/*
Theme Name: Jubiloo
Theme URI: https://df9jk7-nx.myshopify.com
Author: Jubiloo
Description: Custom WordPress theme recreating the Jubiloo Shopify storefront design (DIY paint kits for kids).
Version: 1.0
Text Domain: jubiloo
*/

:root {
  /* Body text is one dark grey site-wide; navy is the accent / link colour. */
  --color-primary: #092c59;
  --color-primary-hover: #0b3a75;
  --color-yellow: #ffd600;
  --color-coral: #ff6f61;
  --color-teal: #53d2dc;
  --color-pink: #fe6f62;
  --color-bg: #ffffff;
  --color-text: #2b2b2b;
  --font-body: "Figtree", sans-serif;
  --font-head: "Baloo 2", "Figtree", sans-serif;
  --page-width: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* All headings use the rounded display font, matching the hero. The
   !important on the Elementor selectors overrides its default "Roboto" kit
   typography, which we can't otherwise reach. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
}

.elementor-heading-title,
.elementor-widget-accordion .elementor-accordion-title,
.elementor-widget-toggle .elementor-toggle-title {
  font-family: var(--font-head) !important;
}

/* Body copy inside Elementor widgets — text editors, accordions, lists —
   defaults to the kit's Roboto; force the theme font on every page. */
.elementor-widget-text-editor,
.elementor-widget-text-editor *,
.elementor-widget-accordion,
.elementor-widget-accordion .elementor-tab-content,
.elementor-widget-accordion .elementor-tab-content *,
.elementor-widget-toggle,
.elementor-widget-toggle .elementor-tab-content,
.elementor-widget-icon-list,
.elementor-widget-icon-list *,
.elementor-widget-button .elementor-button {
  font-family: var(--font-body) !important;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 24px;
}

.wrap--narrow {
  max-width: 760px;
}

/* ---------- Header ---------- */
/* Solid, sticky. On the home page it sits below the announcement bar and
   stays pinned to the top once that bar scrolls away. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
  background: #fff9ef;
  border-bottom: 1px solid rgba(9, 44, 89, 0.08);
  box-shadow: 0 6px 16px rgba(9, 44, 89, 0.06);
}

body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

.site-header__side {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-header__side--right {
  justify-content: flex-end;
  margin-left: auto;
}

.site-header__logo {
  flex-shrink: 0;
}

.site-header__logo img {
  height: 40px;
  width: auto;
}

.site-nav {
  display: none;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-nav__list > li > a {
  font-size: 15px;
  font-weight: 600;
  color: #092c59;
  transition: opacity 0.2s ease;
}

.site-nav__list > li > a:hover {
  opacity: 0.6;
}

.site-nav__list li.nav-cta-shop > a {
  display: inline-block;
  background: #092c59;
  color: #fff;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.site-nav__list li.nav-cta-shop > a:hover {
  background: #0b3a75;
  opacity: 1;
}

@media (min-width: 900px) {
  #site-header .menu-toggle {
    display: none;
  }

  .icon-btn.icon-btn--search {
    display: none;
  }

  .site-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  .site-header__side--right {
    margin-left: 0;
  }
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #092c59;
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: none;
}

.icon-btn--cart {
  padding-right: 2px;
}

.cart-count {
  display: none;
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.cart-count.is-visible {
  display: block;
}

.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.menu-toggle span {
  width: 22px;
  height: 2px;
  background: #092c59;
  display: block;
}

/* ---------- Home page announcement bar ---------- */
/* Slim strip at the very top of the front page, above the sticky header. It's
   in normal flow, so it scrolls away with the page while the header stays
   pinned. Only rendered on the front page — see header.php. */
.home-announce {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: #bd75ba;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  text-wrap: balance;
}

@media screen and (max-width: 600px) {
  .home-announce {
    font-size: 10px;
    letter-spacing: 0.03em;
  }
}

@media screen and (max-width: 380px) {
  .home-announce {
    font-size: 9px;
  }
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 100;
  display: none;
  padding: 24px;
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav__close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  margin-bottom: 24px;
}

.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 28px;
}

.mobile-nav li {
  margin-bottom: 18px;
}

.mobile-nav li.nav-cta-shop {
  margin-top: 8px;
}

.mobile-nav li.nav-cta-shop a {
  display: inline-block;
  background: #092c59;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 32px;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.mobile-nav li.nav-cta-shop a:hover {
  background: #0b3a75;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ddd;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero__overlay {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 40px 20px;
}

.hero h1 {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.1;
  margin: 0;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* ---------- Homepage hero (soft-pink split showcase) ---------- */
/* Rendered from an HTML widget in the Elementor hero section — see
   tools/set-hero-showcase.php. */
.homehero {
  background: #fff9ef;
  /* the "just add colour" sticker overhangs the framed photo; keep that from
     spilling into a page scrollbar at narrow desktop widths */
  overflow-x: clip;
}

.homehero__inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 34px 24px 42px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

/* Left column is centre-aligned; doodle accents are absolutely placed on it. */
.homehero__text {
  text-align: center;
  position: relative;
}

.homehero__kicker {
  position: relative;
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b2b2b;
}

.homehero__title {
  position: relative;
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-size: clamp(31px, 3.9vw, 54px);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: 0.004em;
  text-transform: uppercase;
}

.homehero__title-navy {
  color: #092c59;
}

/* "Bubble Letters." — each letter a rotating colour (spans from the widget) */
.homehero__title-multi {
  display: block;
}

.hm-c0 { color: #fe6f61; }
.hm-c1 { color: #a97fc4; }
.hm-c2 { color: #e87fa8; }
.hm-c3 { color: #3fae97; }
.hm-c4 { color: #e2a52c; }

/* Scattered doodle accents around the text block. */
.homehero__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}

.homehero__deco svg {
  display: block;
  width: 100%;
  height: 100%;
}

.homehero__deco--burst-y {
  color: #f2cd68;
  width: 40px;
  height: 40px;
  top: 6px;
  right: -6px;
}

.homehero__deco--heart {
  color: #a97fc4;
  width: 34px;
  height: 32px;
  top: 44%;
  left: -14px;
}

.homehero__deco--burst-c {
  color: #fe6f61;
  width: 38px;
  height: 38px;
  bottom: 44px;
  left: -8px;
}

.homehero__deco--burst-t {
  color: #3fae97;
  width: 34px;
  height: 34px;
  bottom: 10px;
  right: -4px;
}

.homehero__body {
  margin: 0 auto;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.6;
  color: #5d5f6b;
}

.homehero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.homehero__btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  min-width: 230px;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: background 0.2s ease, transform 0.15s ease;
}

.homehero__btn--primary {
  background: #fe6f61;
  color: #fff;
  box-shadow: 0 12px 24px rgba(254, 111, 97, 0.34);
}

.homehero__btn--primary:hover {
  background: #ee5c4e;
  transform: translateY(-1px);
}

.homehero__btn-arrow {
  margin-left: 6px;
}

.homehero__btn--ghost {
  background: #fff;
  color: #092c59;
  border: 2px solid #092c59;
}

.homehero__btn--ghost:hover {
  background: #092c59;
  color: #fff;
}

.homehero__media {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 380px;
}

/* The photo ships with its multi-colour checked frame baked in
   (assets/img/hero-frame.jpg); we just tilt it slightly and add the crisp
   coral offset shadow used on the other cards. */
.homehero__photo {
  transform: rotate(2.5deg);
  box-shadow: 16px 16px 0 #fb6852;
  line-height: 0;
}

.homehero__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.homehero__spark {
  position: absolute;
  top: -16px;
  right: -14px;
  z-index: 4;
  color: #fe6f61;
  font-size: 26px;
  line-height: 1;
}

/* "Just add colour" die-cut sticker (assets/img/hero-badge.png), sitting over
   the lower-right of the framed photo. */
.homehero__badge {
  position: absolute;
  right: -56px;
  bottom: 22px;
  z-index: 3;
  width: 150px;
  height: auto;
}

@media (max-width: 900px) {
  .homehero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 24px 48px;
  }
  .homehero__media {
    max-width: 340px;
  }
}

@media (max-width: 600px) {
  .homehero__kicker {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .homehero__btn {
    padding: 14px 30px;
  }
  .homehero__badge {
    width: 108px;
    right: -14px;
    bottom: 28px;
  }
  .homehero__deco {
    transform: scale(0.8);
  }
  .homehero__deco--heart {
    display: none;
  }
  .homehero__deco--burst-c {
    left: -2px;
    bottom: 62px;
  }
  .homehero__deco--burst-t {
    right: 0;
  }
}

/* the name-preview section is a smooth-scroll target — clear the sticky header */
#try-your-name {
  scroll-margin-top: 84px;
}

/* ---------- "Also from Jubiloo" party-favour card ---------- */
/* HTML widget — see tools/add-also-from-section.php. A cream band with a white
   card (purple offset shadow) and a few scattered doodle accents. */
.alsofrom {
  position: relative;
  background: #fff9ef;
  padding-top: 48px;
}

.alsofrom__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}

.alsofrom__deco svg {
  display: block;
  width: 100%;
  height: 100%;
}

.alsofrom__deco--burst-y {
  color: #f2cd68;
  width: 34px;
  height: 34px;
  top: 18px;
  left: 24px;
}

.alsofrom__deco--heart {
  color: #bd75ba;
  width: 30px;
  height: 28px;
  top: 30px;
  right: 26px;
}

.alsofrom__deco--burst-c {
  color: #fe6f61;
  width: 30px;
  height: 30px;
  bottom: 40px;
  left: 40px;
}

.alsofrom__inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px 52px;
}

.alsofrom__card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 34px;
  align-items: center;
  padding: 20px;
  background: #fff;
  border: 2px solid #092c59;
  border-radius: 8px;
  box-shadow: 12px 12px 0 #bd75ba;
}

.alsofrom__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
}

.alsofrom__eyebrow {
  margin: 0 0 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fe6f61;
}

.alsofrom__title {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.14;
  font-weight: 800;
  color: #092c59;
}

.alsofrom__title em {
  font-style: italic;
}

.alsofrom__body {
  margin: 0 0 20px;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5d5f6b;
}

.alsofrom__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.alsofrom__btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease;
}

.alsofrom__btn--primary {
  background: #092c59;
  color: #fff;
  box-shadow: 0 9px 18px rgba(9, 44, 89, 0.2);
}

.alsofrom__btn--primary:hover {
  background: #0b3a75;
}

.alsofrom__btn--ghost {
  background: #fff;
  color: #092c59;
  border: 2px solid #092c59;
}

.alsofrom__btn--ghost:hover {
  background: #092c59;
  color: #fff;
}

/* full-width checked strip closing the section */
.alsofrom__checker {
  height: 18px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-yellow) 0 18px,
    #fff 18px 36px,
    var(--color-coral) 36px 54px
  );
}

@media (max-width: 820px) {
  .alsofrom__card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px;
    box-shadow: 8px 8px 0 #bd75ba;
  }
  .alsofrom__media img {
    aspect-ratio: 16 / 11;
  }
  .alsofrom__deco--burst-c {
    display: none;
  }
  .alsofrom__deco--burst-y {
    left: 12px;
    top: 12px;
  }
  .alsofrom__deco--heart {
    right: 12px;
    top: 14px;
  }
}

@media (max-width: 480px) {
  .alsofrom__actions .alsofrom__btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--color-yellow);
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.marquee__track {
  display: inline-block;
  animation: marquee 22s linear infinite;
}

.marquee__track span {
  display: inline-block;
  padding: 0 24px;
  font-size: 18px;
  font-weight: 500;
}

.marquee__track span:not(:last-child)::after {
  content: "/";
  padding-left: 48px;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Section headings ---------- */
.section {
  padding: 64px 0;
}

.section h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 36px;
}

/* ---------- Product grid ---------- */
/* Fixed column counts (rather than auto-fit) so the 5 featured products
   land in one deliberate row on desktop instead of however many columns
   happen to fit the container width. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

@media (max-width: 767px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

.product-card {
  text-align: left;
}

.product-card__image {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f4f4;
  aspect-ratio: 1 / 1;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fff;
  border: 1px solid var(--color-text);
  border-radius: 999px;
  font-size: 12px;
  padding: 4px 12px;
  white-space: nowrap;
  z-index: 1;
}

.product-card__title {
  margin: 14px 0 4px;
  font-size: 16px;
  font-weight: 500;
}

.product-card__title a {
  color: inherit;
  text-decoration: none;
}

.product-card__price {
  margin: 0;
  font-size: 15px;
  color: #555;
}

.woocommerce .product-card .button {
  margin-top: 18px;
}

/* ---------- Promo / split sections ---------- */
.promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: 64px 0;
}

.promo--coral {
  background: var(--color-coral);
  color: #fff;
}

.promo--reverse .promo__image {
  order: -1;
}

.promo__image img {
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.promo__content {
  padding: 0 24px;
}

.promo__content h2 {
  text-align: left;
  font-size: 30px;
  margin: 0 0 16px;
}

.promo__content p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn:hover {
  background: var(--color-primary-hover);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary);
  color: #fff;
}

.btn--outline-white {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.btn--outline-white:hover {
  background: #fff;
  color: var(--color-primary);
}

/* ---------- Split banner (full-bleed image + colour panel) ---------- */
.split-banner {
  display: flex;
  flex-direction: column;
}

.split-banner__media {
  flex: 1;
  min-height: 320px;
}

.split-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-banner__content {
  flex: 1;
  display: flex;
  align-items: center;
}

.split-banner__inner {
  max-width: 460px;
  margin: 0 auto;
  padding: 56px 24px;
}

.split-banner__inner h2 {
  text-align: left;
  font-size: 30px;
  margin: 0 0 16px;
}

.split-banner__inner p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 24px;
}

@media (min-width: 900px) {
  .split-banner {
    flex-direction: row;
    min-height: 420px;
  }

  .split-banner__media {
    flex: 0 0 60%;
    width: 60%;
  }

  .split-banner__content {
    flex: 0 0 40%;
    width: 40%;
  }

  .split-banner__inner {
    padding: 0 48px;
  }
}

/* ---------- Quote section ---------- */
.quote-section {
  background: var(--color-coral);
  color: var(--color-text);
  padding: 80px 24px;
  text-align: center;
}

.quote-section__text {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-head);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.35;
}

/* ---------- Help section ---------- */
.help-section {
  text-align: center;
  padding: 56px 24px;
  background: #ff6f61;
}

.help-section h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 12px;
}

.help-section p {
  max-width: 480px;
  margin: 0 auto 24px;
  font-size: 17px;
}

.help-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ---------- Global "We're here to help" band (footer.php, every page) ---------- */
.helpband {
  background: #ff6f61;
  text-align: center;
  padding: 52px 24px;
}

.helpband__inner {
  max-width: 640px;
  margin: 0 auto;
}

.helpband__title {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: #2b2b2b;
}

.helpband__text {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: #2b2b2b;
}

.helpband__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.helpband__btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease;
}

.helpband__btn--solid {
  background: #2b2b2b;
  color: #fff;
}

.helpband__btn--solid:hover {
  background: #1a1a1a;
}

.helpband__btn--outline {
  background: transparent;
  border: 2px solid #2b2b2b;
  color: #2b2b2b;
}

.helpband__btn--outline:hover {
  background: #2b2b2b;
  color: #fff;
}

/* ---------- Page header (FAQ, Contact, Shop, blog, articles) ---------- */
/* Image-free — a clean cream band with a navy Baloo 2 title, matching the
   home page. Templates still pass a `background-image` inline style; it's
   overridden here so old markup keeps working. */
.page-hero {
  text-align: center;
  background: #fff9ef !important;
  background-image: none !important;
  padding: 46px 24px 42px;
}

.page-hero::after {
  content: none;
}

.page-hero__overlay {
  max-width: 760px;
  margin: 0 auto;
  color: #092c59;
}

.page-hero__overlay h1 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: #092c59;
  text-shadow: none;
}

.page-hero__overlay p {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.6;
  color: #5d5f6b;
  text-shadow: none;
}

.page-hero__overlay .btn {
  margin-top: 18px;
}

.contact-section {
  padding: 64px 0;
}

.contact-panel {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.contact-panel__info {
  background: var(--color-pink);
  color: var(--color-text);
  padding: 40px 32px;
}

.contact-panel__info h2 {
  font-size: 24px;
  margin: 0 0 12px;
}

.contact-panel__info > p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 32px;
  opacity: 0.95;
}

.contact-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.contact-panel__list li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-panel__list a {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-panel__list strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.contact-panel__list div span {
  display: block;
  font-size: 13px;
  opacity: 0.85;
  margin-top: 2px;
  line-height: 1.3;
}

.contact-panel__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-panel__icon svg {
  display: block;
}

.contact-panel__form {
  padding: 40px 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.contact-panel__form label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.contact-panel__form input,
.contact-panel__form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  box-sizing: border-box;
}

.contact-panel__form textarea {
  min-height: 120px;
}

@media (min-width: 800px) {
  .contact-panel {
    flex-direction: row;
  }
}

/* ---------- Shop page ---------- */
.shop-header {
  text-align: center;
  padding: 48px 24px 16px;
}

.shop-header h1 {
  font-size: 34px;
  margin: 0;
}

.shop-header__subtitle {
  margin: 12px 0 0;
  font-size: 16px;
  color: #666;
}

/* ---------- Blog / articles ---------- */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.article-card {
  display: block;
}

.article-card__image {
  border-radius: 8px;
  overflow: hidden;
  background: #f4f4f4;
  aspect-ratio: 4 / 3;
}

.article-grid .article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.article-grid .article-card:hover .article-card__image img {
  transform: scale(1.04);
}

.article-card__title {
  margin: 16px 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.article-card__excerpt {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.article-content {
  padding-top: 56px;
  padding-bottom: 56px;
  font-size: 16px;
  line-height: 1.7;
}

.article-content p {
  margin: 0 0 20px;
}

/* ---------- FAQ accordion ---------- */
.faq-list {
  border-top: 1px solid #ececec;
}

.faq-item {
  border-bottom: 1px solid #ececec;
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 22px 4px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-item__answer p {
  margin: 0 4px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  max-width: 640px;
}

.faq-item.is-open .faq-item__answer {
  max-height: 240px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: #2b2b2d;
  color: #fff;
  padding: 56px 24px 28px;
  text-align: center;
}

.site-footer h2 {
  font-size: 22px;
  margin: 0 0 20px;
  font-weight: 500;
}

.newsletter-form {
  display: flex;
  max-width: 420px;
  margin: 0 auto 32px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  overflow: hidden;
}

.newsletter-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 18px;
  color: #fff;
  font-family: var(--font-body);
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.newsletter-form button {
  border: none;
  background: #fe6f61;
  color: #fff;
  padding: 0 22px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
}

.site-footer__social {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0 0 28px;
}

.site-footer__social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.site-footer__social a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.site-footer__meta {
  font-size: 13px;
  opacity: 0.8;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.site-footer__meta a {
  text-decoration: underline;
}

.site-footer__legal-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 900px) {
  .promo {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- FAQ accordion (Elementor) ---------- */
/* FAQ-page accordion — matched to the home page's .homefaq cards. */
.jubiloo-faq .elementor-accordion {
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jubiloo-faq .elementor-accordion-item {
  border: 2px solid #092c59 !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: none !important;
}

.jubiloo-faq .elementor-tab-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 15px 18px !important;
  font-family: var(--font-head) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #092c59 !important;
  cursor: pointer;
}

.jubiloo-faq .elementor-tab-title.elementor-active,
.jubiloo-faq .elementor-tab-title .elementor-accordion-title,
.jubiloo-faq .elementor-tab-title.elementor-active .elementor-accordion-title {
  color: #092c59 !important;
  font-family: var(--font-head) !important;
}

.jubiloo-faq .elementor-accordion-title {
  order: 1;
}

/* Swap Elementor's circled icon for a plain coral +/− like .homefaq. */
.jubiloo-faq .elementor-accordion-icon {
  display: none !important;
}

.jubiloo-faq .elementor-tab-title::after {
  content: "+";
  order: 2;
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 1;
  color: #fe6f61;
}

.jubiloo-faq .elementor-tab-title.elementor-active::after {
  content: "\2013";
}

.jubiloo-faq .elementor-accordion-item .elementor-tab-content {
  padding: 0 18px 16px !important;
  border-top: none !important;
}

.jubiloo-faq .elementor-tab-content,
.jubiloo-faq .elementor-tab-content p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #5d5f6b !important;
}

.jubiloo-faq .elementor-tab-content a {
  color: #092c59 !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* ---------- Home split banners (Elementor) ---------- */
.jubiloo-split-banner-media.elementor-column > .elementor-widget-wrap {
  height: 435px;
}

.jubiloo-split-banner-media .elementor-widget-image,
.jubiloo-split-banner-media .elementor-widget-image .elementor-widget-container,
.jubiloo-split-banner-media .elementor-widget-image .elementor-image {
  height: 100%;
}

.jubiloo-split-banner-media .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Contact page icon list (Elementor) ---------- */
.elementor-icon-list-item,
.elementor-icon-list-item a {
  align-items: flex-start;
}

.elementor-icon-list-icon {
  margin-top: 0.2em;
}

.elementor-icon-list-text strong {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.2;
}

.elementor-icon-list-text .jubiloo-icon-list-sub {
  display: block;
  font-weight: 400;
  opacity: 0.85;
  font-size: 0.95em;
}

/* ---------- WooCommerce brand overrides ---------- */
.woocommerce-wrap {
  padding-top: 24px;
}

.woocommerce div.product::after {
  content: "";
  display: table;
  clear: both;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
  clear: both;
}

/* The quantity input + Add to cart button float side by side, which
   collapses their wrapper's height and lets the variation description
   after it ride up alongside them instead of sitting below. */
.woocommerce div.product .woocommerce-variation-add-to-cart::after {
  content: "";
  display: table;
  clear: both;
}

.woocommerce div.product .woocommerce-variation {
  clear: both;
  margin-top: 16px;
}

.woocommerce div.product div.images {
  border-radius: 8px;
  overflow: hidden;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Shop page only — same "one deliberate row" treatment as the Home page's
   Featured products grid. Scoped to .woocommerce-shop rather than changing
   ul.products generally, since that class is shared with the Related
   Products section on single product pages, which only shows 4 items and
   would leave an awkward empty 5th column under this. */
body.woocommerce-shop ul.products {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  body.woocommerce-shop ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

@media (max-width: 767px) {
  body.woocommerce-shop ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  body.woocommerce-shop ul.products {
    grid-template-columns: 1fr;
  }
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
  display: none;
}

.woocommerce ul.products li.product {
  text-align: left;
  position: relative;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.woocommerce ul.products li.product img {
  display: block;
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #f4f4f4;
}

.woocommerce ul.products li.product .product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fff;
  border: 1px solid var(--color-text);
  border-radius: 999px;
  font-size: 12px;
  padding: 4px 12px;
  white-space: nowrap;
  z-index: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 16px;
  font-weight: 500;
  margin: 14px 0 4px;
  color: var(--color-text);
  text-align: left;
}

.woocommerce ul.products li.product .price {
  font-size: 15px;
  color: #555;
}

.woocommerce span.onsale {
  background: var(--color-primary);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  min-height: auto;
  min-width: auto;
  padding: 4px 12px;
  line-height: 1.4;
  top: 12px;
  left: 12px;
}

/* ---------- Article tables ---------- */
/* Guides use comparison tables; the wrapper scrolls rather than
   forcing the page to scroll sideways on a phone. */
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}

.article-content table th,
.article-content table td {
  border-bottom: 1px solid #e6e0dc;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.article-content table th {
  font-weight: 600;
  color: var(--color-text);
  border-bottom-width: 2px;
  white-space: nowrap;
}

.article-content .article-meta {
  color: #6b6b6b;
  font-size: 14px;
  margin-bottom: 24px;
}

.article-content .article-author {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid #e6e0dc;
  color: #6b6b6b;
  font-size: 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--color-primary);
  font-size: 24px;
}

.jubiloo-price-unit {
  font-size: 14px;
  font-weight: 500;
  color: #777;
  vertical-align: middle;
  margin-left: 4px;
}

.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.alt,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .button.alt {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid #fe6f61;
  background: #fe6f61 !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button.alt:hover {
  background: #ee5c4e !important;
  color: #fff !important;
}

.woocommerce .single_add_to_cart_button:disabled,
.woocommerce .single_add_to_cart_button:disabled:hover {
  background: #ccc !important;
  color: #888 !important;
  cursor: not-allowed;
}

/* Home page Featured-products grid: its "Select options" / "Choose letters"
   buttons take the hero's coral, so every CTA on the front page matches. */
body.home .woocommerce a.button,
body.home .woocommerce a.button.alt {
  background: #fe6f61 !important;
  border-color: #fe6f61;
  color: #fff !important;
}

body.home .woocommerce a.button:hover,
body.home .woocommerce a.button.alt:hover {
  background: #ee5c4e !important;
}

.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  height: 44px;
  font-family: var(--font-body);
  font-size: 15px;
}

/* Personalised Bubble Letter Paint Kit product page — the "type a name" +
   finish fields, matched to the home page's name-preview (see
   inc/bubble-letters.php). Reuses the .jnp-l letter tiles. */
.jubiloo-bubble-name,
.jubiloo-bubble-shine {
  margin-bottom: 20px;
}

.jbl__label {
  display: block;
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #092c59;
}

.jbl__req {
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-coral);
}

.jbl__input {
  width: 100%;
  max-width: 360px;
  height: 52px;
  border: 2px solid #092c59;
  border-radius: 10px;
  padding: 11px 16px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: #092c59;
  background: #fff;
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jbl__input::placeholder {
  color: #b7c0cf;
}

.jbl__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(9, 44, 89, 0.16);
}

.jbl__preview {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  min-height: 56px;
  margin: 14px 0 8px;
}

.jbl .jnp-l img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
}

.jbl__meta {
  margin: 0 0 4px;
  min-height: 1.2em;
  font-size: 13px;
  font-weight: 700;
  color: #5d5f6b;
}

.jbl__finish {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.jbl__tick {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 14px;
  color: #092c59;
}

.jbl__tickbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.jbl__tickmark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #092c59;
  border-radius: 5px;
  background: #fff;
  position: relative;
}

.jbl__tick:has(.jbl__tickbox:checked) .jbl__tickmark {
  background: #092c59;
}

.jbl__tick:has(.jbl__tickbox:checked) .jbl__tickmark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.jbl__tick:has(.jbl__tickbox:checked) .jbl__tick-text {
  font-weight: 700;
}

.jbl__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #7c8aa3;
}

.woocommerce div.product form.cart .quantity input.qty[readonly] {
  background: #f5f5f5;
  color: #777;
  cursor: not-allowed;
}

.jubiloo-bubble-locked-qty {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f5f5f5;
  color: #555;
  font-weight: 600;
}

/* ---------- Home page "type a name" bubble-letter preview ---------- */
/* Rendered by inc/name-preview.php via the [jubiloo_name_preview] shortcode,
   in an Elementor Shortcode widget on the home page. Each typed letter is a
   pastel blob tile carrying the real plaster-letter photo
   (assets/img/letters/a.png … z.png); a Fredoka glyph is the fallback. */
.jnp {
  --jnp-navy: #092c59;
  background: var(--jnp-navy);
  color: #fff;
  padding: 38px 0;
}

.jnp__inner {
  display: grid;
  /* card column is wider than the intro so longer names fit before wrapping */
  grid-template-columns: 1fr 1.75fr;
  gap: 36px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: center;
}

@media (max-width: 900px) {
  .jnp {
    padding: 30px 0;
  }
  .jnp__inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

.jnp__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-yellow);
}

/* "YOUR NAME / OUR LETTERS." — hero-headline treatment (Baloo 2, uppercase).
   "your name" is per-letter rainbow (.hm / .hm-c0..c4); "our letters." is
   white with an oversized yellow full stop. Both lines big, tight leading,
   each on one row. */
.jnp__title {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: clamp(24px, 4vw, 46px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: 0.004em;
  text-transform: uppercase;
}

.jnp__title-line {
  display: block;
  white-space: nowrap;
}

.jnp__title-line--plain {
  color: #fff;
}

.jnp__title-stop {
  color: var(--color-yellow);
  font-size: 1.4em;
}

.jnp__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
}

/* Navy stroke + a smidge of corner rounding (matching the step / party-pack
   cards). No drop shadow on this one. */
.jnp__card {
  background: #fbf4e3;
  color: var(--jnp-navy);
  padding: 24px 26px;
  border: 2px solid #092c59;
  border-radius: 8px;
}

@media (max-width: 480px) {
  .jnp__card {
    padding: 18px;
  }
}

.jnp__label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jnp-navy);
  margin: 0 0 7px;
}

.jnp__label + .jnp__label {
  margin-top: 14px;
}

/* "Type a name in here ↓" — a louder prompt with a bobbing coral chevron so
   it's obvious the field is where you start. */
.jnp__label--type {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.jnp__point {
  width: 18px;
  height: 18px;
  color: #fe6f61;
  animation: jnpPoint 1.1s ease-in-out infinite;
}

.jnp__point svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes jnpPoint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.jnp__input {
  width: 100%;
  border: 2px solid var(--jnp-navy);
  border-radius: 13px;
  padding: 11px 18px;
  height: 52px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--jnp-navy);
  background: #fff;
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jnp__input::placeholder {
  color: #b7c0cf;
}

.jnp__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(9, 44, 89, 0.18);
}

/* Coral pulse radiating off the field until the visitor focuses or types in
   it — pops against the cream card. */
.jnp__input {
  animation: jnpPulse 1.9s ease-in-out infinite;
}

.jnp__input:focus,
.jnp__input.is-dirty {
  animation: none;
}

@keyframes jnpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(254, 111, 97, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(254, 111, 97, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .jnp__point,
  .jnp__input {
    animation: none;
  }
}

.jnp__preview {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 9px;
  min-height: 62px;
  margin: 16px 0 11px;
}

/* A little rounded colour square behind each plaster-letter photo — the
   colour cycles through the hero headline's letter palette. No outline; the
   crisp offset shadow stays. Auto width + fixed height so every letter lands
   at the same cap height whatever its shape. */
.jnp-l {
  --tint: #fe6f61;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  min-width: 52px;
  padding: 8px;
  border-radius: 8px;
  background: var(--tint);
  /* crisp offset shadow (no blur), not a soft fade */
  box-shadow: 3px 5px 0 rgba(9, 44, 89, 0.24);
}

/* `.jnp .jnp-l img` outweighs Elementor's `.elementor img { height: auto }`. */
.jnp .jnp-l img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(9, 44, 89, 0.18));
}

.jnp-l--font {
  font-family: "Fredoka", var(--font-body);
  font-weight: 600;
  font-size: 28px;
  color: var(--jnp-navy);
}

.jnp-l--c0 { --tint: #fe6f61; }
.jnp-l--c1 { --tint: #a97fc4; }
.jnp-l--c2 { --tint: #e87fa8; }
.jnp-l--c3 { --tint: #3fae97; }
.jnp-l--c4 { --tint: #e2a52c; }

.jnp-gap {
  width: 16px;
}

@media (max-width: 480px) {
  .jnp-l {
    height: 50px;
    min-width: 42px;
    padding: 6px;
    border-radius: 7px;
    box-shadow: 2px 4px 0 rgba(9, 44, 89, 0.24);
  }
  .jnp-l--font {
    font-size: 20px;
  }
  .jnp__preview {
    min-height: 52px;
    gap: 7px;
  }
}

.jnp__meta {
  margin: 4px 0 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #5c6b88;
  min-height: 1.2em;
}

/* Finish choice — two mutually-exclusive tick boxes, no surrounding box. */
.jnp__finish {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.jnp__tick {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--jnp-navy);
}

.jnp__tickbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.jnp__tickmark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--jnp-navy);
  border-radius: 5px;
  background: #fff;
  position: relative;
}

.jnp__tick.is-checked .jnp__tick-text,
.jnp__tick:has(.jnp__tickbox:checked) .jnp__tick-text {
  font-weight: 700;
}

.jnp__tick.is-checked .jnp__tickmark,
.jnp__tick:has(.jnp__tickbox:checked) .jnp__tickmark {
  background: var(--jnp-navy);
}

.jnp__tick.is-checked .jnp__tickmark::after,
.jnp__tick:has(.jnp__tickbox:checked) .jnp__tickmark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.jnp__tick:has(.jnp__tickbox:focus-visible) .jnp__tickmark {
  outline: 2px solid var(--jnp-navy);
  outline-offset: 2px;
}

.jnp__submit {
  width: 100%;
  margin-top: 16px;
  padding: 14px 24px;
  border: none;
  border-radius: 999px;
  background: var(--jnp-navy);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  /* crisp offset shadow to match the letter tiles */
  box-shadow: 3px 5px 0 rgba(9, 44, 89, 0.24);
}

.jnp__submit:hover {
  background: #0b3a75;
}

.jnp__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.jnp__note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #7c8aa3;
}

/* Variation picker (e.g. "Choose your shape") — de-table-ify WooCommerce's
   default <table> markup and style the select to match the site's inputs. */
.woocommerce div.product p.price {
  margin-bottom: 0;
}

.woocommerce div.product table.variations {
  width: auto;
  margin: 20px 0 0 !important;
}

.woocommerce div.product .single_variation_wrap {
  margin-top: 20px;
}

.woocommerce div.product table.variations tbody,
.woocommerce div.product table.variations tr {
  display: flex;
  align-items: center;
}

.woocommerce div.product table.variations tr {
  gap: 16px;
}

.woocommerce div.product table.variations th.label {
  padding: 0;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text);
  white-space: nowrap;
}

.woocommerce div.product table.variations td.value {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
}

.woocommerce div.product table.variations td.value select {
  min-width: 200px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 14px;
  height: 44px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  background: #fff;
  cursor: pointer;
}

.woocommerce div.product table.variations .reset_variations {
  font-size: 13px;
  color: #888;
}

.woocommerce div.product .woocommerce-variation-price {
  margin-top: 16px;
}

.woocommerce div.product .woocommerce-variation-availability {
  margin-top: 4px;
}

/* Category and SKU hidden from the public for now; tags still show if present. */
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .sku_wrapper {
  display: none;
}

.woocommerce nav.woocommerce-breadcrumb {
  font-size: 13px;
  color: #888;
  margin: 0 0 24px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}

/* Long-form product description, moved inline below the short description
   (see jubiloo_product_description_in_summary() in functions.php). It's
   plain editor HTML with no classes of its own, so this normalizes the
   typography to match the short description above it rather than falling
   back to unstyled browser-default headings. */
.jubiloo-product-description {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(47, 47, 47, 0.12);
  text-align: left;
}

/* The page wrapper carries a generic `.section` class (shared with the
   homepage's centered sections), whose `.section h2 { text-align: center }`
   rule was otherwise bleeding into these h2s too. */
.jubiloo-product-description h2 {
  text-align: left;
}

.jubiloo-product-description p {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 16px;
}

.jubiloo-product-description h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
  margin: 24px 0 10px;
}

.jubiloo-product-description ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.jubiloo-product-description li {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 6px;
}

.jubiloo-product-description li::marker {
  color: var(--color-coral);
}

.jubiloo-product-description a {
  color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.jubiloo-product-description .product-related-links {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed rgba(47, 47, 47, 0.15);
  font-size: 14px;
  color: #777;
}

.jubiloo-product-description .product-related-links a {
  color: inherit;
  font-weight: 600;
}

.woocommerce table.shop_table {
  border-collapse: collapse;
  width: 100%;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border: 1px solid #ececec;
  padding: 12px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--color-primary);
  font-family: var(--font-body);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--color-primary);
}

/* ---------- Star ratings & reviews ---------- */
.woocommerce .star-rating {
  font-size: 15px;
}

.woocommerce .star-rating::before {
  color: #e2ded9;
}

.woocommerce .star-rating span::before {
  color: var(--color-yellow);
}

.woocommerce div.product p.stars a {
  color: var(--color-yellow);
}

.woocommerce div.product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
  font-size: 14px;
  color: #777;
  text-decoration: none;
}

.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link:hover {
  color: var(--color-primary);
}

/* When Reviews is the only tab on a product, the tab button just repeats
   the heading below it — hide the nav and let the heading stand alone. */
.woocommerce-tabs ul.tabs:has(li:only-child) {
  display: none;
}

.woocommerce-Reviews-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text);
  margin: 40px 0 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid #f0ece9;
}

.woocommerce-Reviews-title span {
  color: var(--color-primary);
}

.woocommerce .commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.woocommerce #reviews .comment_container {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #faf7f5;
  border-radius: 14px;
  padding: 22px 26px;
}

.woocommerce #reviews #comments ol.commentlist li.review .comment_container .avatar,
.woocommerce #reviews .comment_container .avatar {
  position: static !important;
  float: none !important;
  top: auto !important;
  left: auto !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0;
}

.woocommerce #reviews .comment-text {
  flex: 1;
  border: none;
  padding: 0;
  margin: 0 !important;
}

.woocommerce #reviews .comment-text .star-rating {
  float: right;
  margin-top: 2px;
}

.woocommerce-review__author {
  font-weight: 600;
  color: var(--color-text);
}

.woocommerce-review__dash {
  display: none;
}

.woocommerce-review__published-date {
  color: #999;
  font-size: 13px;
}

.woocommerce #reviews .description p:last-child {
  margin: 10px 0 0;
  color: #555;
  line-height: 1.6;
}

.woocommerce #reviews #respond {
  margin-top: 32px;
  background: #faf7f5;
  border-radius: 14px;
  padding: 28px 26px;
}

.woocommerce #reviews #reply-title {
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
}

.woocommerce #reviews .comment-form-rating label,
.woocommerce #reviews .comment-form-comment label {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
}

.woocommerce #reviews .comment-form-rating p.stars a {
  color: #e2ded9;
}

.woocommerce #reviews .comment-form-rating p.stars a::before {
  color: inherit;
}

.woocommerce #reviews .comment-form-rating p.stars a:hover,
.woocommerce #reviews .comment-form-rating p.stars a.active,
.woocommerce #reviews .comment-form-rating p.stars.selected a.active {
  color: var(--color-yellow);
}

.woocommerce #reviews #commentform textarea,
.woocommerce #reviews #commentform input[type="text"],
.woocommerce #reviews #commentform input[type="email"] {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  margin-top: 6px;
}

.woocommerce #reviews #commentform textarea {
  min-height: 120px;
}

/* Reviews landing page cards: kill the browser's default <p> margin so
   spacing between the badge/quote/meta lines comes only from the
   padding set on each widget, not stacked on top of it. */
.review-card p {
  margin: 0;
}

/* Elementor's column width defaults to flex-shrink:1 + min-width:auto,
   so cards with longer/shorter quotes fight each other for space instead
   of staying at a fixed 33.33%. Force genuinely equal, content-independent
   columns within each row of 3 on desktop; Elementor's own responsive
   column CSS already stacks them full-width on mobile, so this override
   just needs to get out of the way below the mobile breakpoint.

   The columns themselves carry no gap (no Elementor "column gap" setting
   on the reviews-grid sections), so padding here is what keeps the white,
   rounded-corner card boxes from butting flush against their neighbours —
   both side-by-side on desktop and stacked on mobile. Padding, not margin,
   because .elementor-column is already box-sizing: border-box, so it's
   absorbed inside the fixed 33.33% width instead of adding to it. */
.review-card {
  flex: 0 0 33.3333% !important;
  max-width: 33.3333%;
  min-width: 0 !important;
  padding: 0 12px 24px;
}

/* Gap between the two rows of three. An adjacent-sibling selector rather
   than margin-bottom on every .review-card, so it lands once between the
   rows and doesn't add trailing space after the last one. */
.reviews-grid + .reviews-grid {
  margin-top: 24px;
}

@media (max-width: 767px) {
  .review-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
  }
}

/* ---------- "How it works" — three numbered steps ---------- */
/* HTML widget in the home page's third-from-last section (replaced the old
   jubiloo-search-answers Q&A block) — see tools/set-howto-section.php. The
   "How it works" nav item scrolls here (#how-it-works). */
.howto {
  position: relative;
  background: #fff9ef;
  padding: 40px 24px 44px;
}

/* Two scattered doodle accents (matching the hero's) — one left, one top-right. */
.howto__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}

.howto__deco svg {
  display: block;
  width: 100%;
  height: 100%;
}

.howto__deco--heart {
  color: #a97fc4;
  width: 30px;
  height: 28px;
  top: 48%;
  left: 26px;
}

.howto__deco--burst {
  color: #f2cd68;
  width: 34px;
  height: 34px;
  top: 26px;
  right: 30px;
}

@media (max-width: 820px) {
  .howto__deco--heart { left: 12px; top: 20px; }
  .howto__deco--burst { right: 14px; top: 16px; width: 28px; height: 28px; }
}

/* Kill Elementor's default 10px column padding on this section so the cream
   .howto block meets the section edge (no white frame around it). */
.howto-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
  padding: 0;
}

.howto__inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* Eyebrow + heading mirror the hero's kicker / headline metrics. */
.howto__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b2b2b;
}

.howto__title {
  margin: 0 0 32px;
  font-family: var(--font-head);
  font-size: clamp(28px, 3.9vw, 46px);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: #092c59;
}

/* Three compact step cards side by side — clean white, a hairline edge, gently
   rounded corners, and a crisp offset shadow whose colour matches that step's
   number. */
.howto__steps {
  list-style: none;
  margin: 0 auto 24px;
  padding: 0;
  max-width: 800px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.howto__step {
  padding: 18px 16px 20px;
  background: #fff;
  border: 2px solid #092c59;
  border-radius: 8px;
}

.howto__step:nth-child(1) { box-shadow: 10px 10px 0 #fe6f61; }
.howto__step:nth-child(2) { box-shadow: 10px 10px 0 #a97fc4; }
.howto__step:nth-child(3) { box-shadow: 10px 10px 0 #e87fa8; }

.howto__step-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* A bold numeral in its hero-letter colour, sitting on a soft tinted circle. */
.howto__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  border-radius: 50%;
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.howto__num--c0 { color: #fe6f61; background: rgba(254, 111, 97, 0.13); }
.howto__num--c1 { color: #a97fc4; background: rgba(169, 127, 196, 0.16); }
.howto__num--c2 { color: #e87fa8; background: rgba(232, 127, 168, 0.15); }

.howto__step-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  color: #092c59;
}

.howto__step-text {
  margin: 0;
  max-width: 24ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5d5f6b;
}

.howto__cta {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  background: #092c59;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(9, 44, 89, 0.2);
  transition: background 0.2s ease;
}

.howto__cta:hover {
  background: #0b3a75;
}

.howto__cta-arrow {
  margin-left: 6px;
}

#how-it-works {
  scroll-margin-top: 84px;
}

@media (max-width: 820px) {
  .howto {
    padding: 34px 20px 40px;
  }
  .howto__steps {
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 340px;
  }
  .howto__step:nth-child(1) { box-shadow: 8px 8px 0 #fe6f61; }
  .howto__step:nth-child(2) { box-shadow: 8px 8px 0 #a97fc4; }
  .howto__step:nth-child(3) { box-shadow: 8px 8px 0 #e87fa8; }
  .howto__num {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }
}

/* ---------- Home page FAQ accordion ---------- */
/* HTML widget — see tools/add-home-faq-section.php. Native <details>; styled
   to match the rest of the page (cream band, white cards, 2px navy stroke,
   8px corners). The primary-nav "FAQs" item scrolls here (#faqs). */
.homefaq {
  background: #fff9ef;
  padding: 46px 24px 52px;
}

#faqs {
  scroll-margin-top: 84px;
}

.homefaq__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.homefaq__eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b2b2b;
}

.homefaq__title {
  margin: 0 0 26px;
  font-family: var(--font-head);
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: #092c59;
}

.homefaq__list {
  text-align: left;
}

.homefaq__item {
  background: #fff;
  border: 2px solid #092c59;
  border-radius: 8px;
  margin-bottom: 12px;
}

.homefaq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #092c59;
}

.homefaq__q::-webkit-details-marker {
  display: none;
}

.homefaq__q::after {
  content: "+";
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
  color: #fe6f61;
  transition: transform 0.15s ease;
}

.homefaq__item[open] .homefaq__q::after {
  content: "\2013";
}

.homefaq__a {
  padding: 0 18px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #5d5f6b;
}

.homefaq__more {
  margin: 22px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.homefaq__more a {
  color: #092c59;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.homefaq__more a:hover {
  color: #fe6f61;
}

@media (max-width: 600px) {
  .homefaq {
    padding: 38px 20px 44px;
  }
  .homefaq__q {
    font-size: 15px;
    padding: 13px 15px;
  }
  .homefaq__a {
    padding: 0 15px 14px;
  }
}

/* ---------- Home page: kill stray white strips between full-bleed blocks ---------- */
/* Elementor gives every top-level widget a default 20px bottom margin; on the
   home page those widgets (name preview, "Also from", product grid, FAQ) are
   full-bleed coloured bands, so the margin shows as a white gap. */
body.home .elementor > .elementor-widget {
  margin-bottom: 0 !important;
}