/*
Theme Name: JustTeia
Theme URI: https://justteia.com
Author: JW Studio
Author URI: https://jwstudios.co.za
Description: Playful, storybook WooCommerce theme for JustTeia. Where little ideas become big fun.
Version: 5.3.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
WC requires at least: 8.0
WC tested up to: 9.4
License: Private
Text Domain: justteia
*/

/*
  =====================================================
  JUSTTEIA DESIGN SYSTEM - BASE
  Direction: Warm Storybook. Playful, premium, magical.

  This file holds the foundations only: tokens, reset,
  typography, layout, buttons, header, drawer, footer,
  homepage sections and shared utilities.

  Shop, product, cart and party styles live in
  assets/css/ and are loaded only on the pages that
  need them. Nothing in this theme uses inline styles.
  =====================================================
*/
/* ── TOKENS ─────────────────────────────────────── */
:root {
  /* Brand palette */
  --pink:       #FFC8DD;
  --pink-deep:  #FF9EC4;
  --lavender:   #CDB4DB;
  --lavender-deep: #B591CC;
  --sky:        #BDE0FE;
  --sky-deep:   #87CEFD;
  --yellow:     #FFD166;
  --yellow-deep:#F0B429;
  --mint:       #95E1D3;
  --mint-deep:  #5ECFBE;
  --peach:      #FFB59A;

  /* Neutrals.
     The page ground is a warm near-white rather than the pink it used to
     be. Tinting every surface pink left nothing for the pastels to sit
     against, so the palette read cheap and the product photos lost.
     The pastels are now section accents, which is what they are good at.
     To go back to the old look, set --bg and --bg-alt to #FFF8FB and
     #FFF0F7. Nothing else needs touching. */
  --bg:         #FFFCFA;
  --bg-alt:     #FBF5F1;
  --cream:      #FBF5F1;
  --surface:    #FFFFFF;
  --surface-2:  #FBF7FD;
  --border:     rgba(148,128,166,0.22);
  --border-mid: rgba(148,128,166,0.42);
  --text:       #241F2E;
  --text-mid:   #5E5470;
  --text-light: #8C819C;

  /* Safety notice. Amber, not red: it is a caution, not an error. */
  --warn-bg:    #FFF6E3;
  --warn-border:#F0B429;
  --warn-text:  #6B4E06;

  /* Semantic */
  --accent:     var(--yellow);
  --accent-deep:var(--yellow-deep);
  --cta:        #FF6B9D; /* hot pink for main CTA buttons */
  --cta-hover:  #F0528A;

  /* Radius */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   40px;
  --r-2xl:  60px;
  --r-pill: 9999px;

  /* Shadows */
  --shadow-xs: 0 2px 8px rgba(205,180,219,0.15);
  --shadow-sm: 0 4px 14px rgba(205,180,219,0.2);
  --shadow-md: 0 8px 28px rgba(205,180,219,0.25);
  --shadow-lg: 0 12px 40px rgba(205,180,219,0.28);
  --shadow-cta: 0 8px 28px rgba(255,107,157,0.4);

  /* Easing */
  --ease:   cubic-bezier(0.23, 1, 0.32, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
}

/* ── RESET ──────────────────────────────────────── */
/* `hidden` must beat any later display rule, or a toggled element stays visible. */
[hidden] { display: none !important; }
/* Set while an overlay owns the screen. */
body.jt-no-scroll { overflow: hidden; }
/* The cart bubble stays in the layout when empty so the button never jumps. */
.cart-count.is-empty { opacity: 0.45; }
.cart-pill-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.cart-pill-icon svg { width: 100%; height: 100%; }
.cart-pill { border: none; }
.footer-socials { display: flex; gap: 14px; margin-top: 16px; }
.footer-socials a { color: rgba(255,255,255,0.55); font-size: var(--text-sm); font-weight: 700; }
.footer-socials a:hover { color: var(--yellow); }
.footer-extra { padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.entry-summary-card { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1.5px solid var(--border); }
.entry-summary-card h2 { font-size: var(--text-2xl); margin-bottom: 8px; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ── TYPOGRAPHY ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl)); }
h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
p  { color: var(--text-mid); line-height: 1.75; }

.label {
  font-family: 'Nunito', sans-serif;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cta);
}

/* ── LAYOUT ─────────────────────────────────────── */
.wrap       { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap-wide  { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow{ max-width: 720px;  margin: 0 auto; padding: 0 24px; }
.section    { padding: 96px 0; }
.section-sm { padding: 56px 0; }
.section-xs { padding: 32px 0; }

/* ── BACKGROUND HELPERS ──────────────────────────── */
.bg-white   { background: var(--surface); }
.bg-lavender{ background: linear-gradient(135deg, #F5EFFF, #EDE0F7); }
.bg-pink    { background: linear-gradient(135deg, #FFF0F7, #FFE4EF); }
.bg-sky     { background: linear-gradient(135deg, #EFF8FF, #DFF0FF); }
.bg-yellow  { background: var(--yellow); }
.bg-mint    { background: linear-gradient(135deg, #EDFCF8, #D8F7F1); }
.bg-cream   { background: var(--cream); }

/* Dotted pattern overlay */
.dots-bg {
  background-image: radial-gradient(circle, rgba(205,180,219,0.25) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

/* Wavy SVG divider */
.wave-top, .wave-bottom { line-height: 0; overflow: hidden; }
.wave-top  { transform: rotate(180deg); }

/* ── BUTTONS ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
  padding: 14px 32px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: all 220ms var(--spring);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 150ms;
}
.btn:hover::after { background: rgba(0,0,0,0.06); }
.btn:active { transform: scale(0.96); }

.btn-cta {
  background: var(--cta);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn-cta:hover {
  background: var(--cta-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(255,107,157,0.5);
  color: #fff;
}

.btn-yellow {
  background: var(--yellow);
  color: var(--text);
  box-shadow: 0 6px 20px rgba(255,209,102,0.4);
}
.btn-yellow:hover {
  background: var(--yellow-deep);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(255,209,102,0.5);
  color: var(--text);
}

.btn-outline {
  background: transparent;
  color: var(--cta);
  border: 2.5px solid var(--cta);
}
.btn-outline:hover {
  background: var(--cta);
  color: #fff;
  transform: translateY(-2px);
}

.btn-white {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-lg { padding: 18px 42px; font-size: var(--text-xl); }
.btn-sm { padding: 10px 22px; font-size: var(--text-base); }
.btn-block { width: 100%; justify-content: center; }

/* ── SITE HEADER ─────────────────────────────────── */
#masthead {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255, 248, 251, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1.5px solid var(--border);
  transition: box-shadow 300ms var(--ease), border-color 300ms;
}
#masthead.scrolled {
  box-shadow: 0 4px 24px rgba(205,180,219,0.25);
  border-color: var(--border-mid);
}
.header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 16px;
}

/* Logo */
.site-logo a { display: flex; align-items: center; }
.site-logo img { height: 52px; width: auto; }
.site-logo .logo-wordmark {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--text-2xl);
  font-weight: 600;
  background: linear-gradient(135deg, var(--cta), var(--lavender-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
}

/* Desktop nav */
.site-nav { display: flex; align-items: center; }
.site-nav ul { display: flex; align-items: center; gap: 4px; }
.site-nav ul li a {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-mid);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: all 180ms var(--ease);
  display: block;
}
.site-nav ul li a:hover,
.site-nav ul li.current-menu-item > a,
.site-nav ul li.current-menu-ancestor > a {
  color: var(--cta);
  background: rgba(255,107,157,0.08);
}

/* Dropdown */
.site-nav ul li { position: relative; }
.site-nav ul li .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border: 1.5px solid var(--border);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top left;
  transition: all 220ms var(--ease);
  pointer-events: none;
  z-index: 600;
}
.site-nav ul li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.site-nav ul li .sub-menu li a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
}

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 10px; }
.cart-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
  background: var(--yellow);
  padding: 8px 18px;
  border-radius: var(--r-pill);
  transition: all 200ms var(--spring);
  box-shadow: 0 3px 10px rgba(255,209,102,0.3);
}
.cart-pill:hover { transform: scale(1.05) translateY(-1px); box-shadow: 0 6px 18px rgba(255,209,102,0.4); }
.cart-pill .cart-count {
  background: var(--cta);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 4px;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: var(--surface-2);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 8px;
  transition: all 200ms var(--ease);
}
.hamburger:hover { background: var(--pink); border-color: var(--pink-deep); }
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: all 300ms var(--ease);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE DRAWER ──────────────────────────────── */
/* Near full screen panel from the left, modelled on the menu the client
   picked: big headline links with a pastel dot, collections nested
   underneath, a swipeable photo row of categories at the bottom. Sits
   above the sticky header and the announcement bar (600), below the
   basket drawer (800), so its own close button is the only X. */
.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 700;
  pointer-events: none;
}
.mobile-drawer.open { pointer-events: auto; }
.drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 36, 56, 0.45);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.mobile-drawer.open .drawer-overlay { opacity: 1; }
.drawer-body {
  position: absolute;
  top: 0;
  left: 0;
  width: min(480px, 94vw);
  height: 100%;
  background: var(--cream);
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform 380ms var(--ease);
  display: flex;
  flex-direction: column;
  padding: 18px 0 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-drawer.open .drawer-body { transform: translateX(0); }
/* A scroll container's flex minimum is zero, so without this the photo
   row is squashed flat whenever the menu is taller than the screen. */
.drawer-body > * { flex-shrink: 0; }

.drawer-close {
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 0 6px 14px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--text);
}
.drawer-close svg { width: 22px; height: 22px; }
.drawer-close:hover { background: var(--surface); }

.drawer-menu { padding: 0 24px; }

/* The pastel dot the reference uses as a bullet, in JustTeia colours. */
.drawer-menu a,
.drawer-heading,
.drawer-sub a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
}
.drawer-menu a::before,
.drawer-heading::before {
  content: '';
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: conic-gradient(var(--pink-deep), var(--yellow), var(--mint-deep), var(--sky-deep), var(--pink-deep));
}
.drawer-menu > li > a,
.drawer-heading {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(1.875rem, 8vw, 2.375rem);
  line-height: 1.1;
  padding: 12px 0;
}
.drawer-menu > li > a:hover { color: var(--cta); }

.drawer-sub { padding: 0 0 8px; }
.drawer-sub a {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  padding: 8px 0;
}
.drawer-sub a:hover { color: var(--cta); }

.drawer-minor {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 14px 24px 0;
  padding-top: 14px;
  border-top: 1.5px solid var(--border);
}
.drawer-minor a {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-mid);
}
.drawer-minor a:hover { color: var(--cta); }

.drawer-cats {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  padding: 0 24px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  scrollbar-width: none;
}
.drawer-cats::-webkit-scrollbar { display: none; }
.drawer-cat {
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--surface);
}
.drawer-cat img { width: 100%; height: 100%; object-fit: cover; }
.drawer-cat span {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.2;
  text-align: center;
  color: var(--text);
}

.drawer-cart {
  margin: 22px 24px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--yellow);
  color: var(--text);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: var(--text-lg);
  padding: 16px 20px;
  border-radius: var(--r-xl);
  box-shadow: 0 4px 14px rgba(255,209,102,0.35);
}

/* ── SCROLL ANIMATIONS ─────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.d1 { transition-delay: 80ms; }
.fade-up.d2 { transition-delay: 160ms; }
.fade-up.d3 { transition-delay: 240ms; }
.fade-up.d4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── HERO ────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding: 80px 0 64px;
  min-height: 88vh;
  display: flex;
  align-items: center;
}
/* Decorative blobs */
.hero::before {
  content: '';
  position: absolute;
  top: -140px;
  right: -100px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(255,200,221,0.55) 0%, rgba(205,180,219,0.2) 45%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: blobFloat 8s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(149,225,211,0.45) 0%, rgba(189,224,254,0.2) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: blobFloat 10s ease-in-out 2s infinite reverse;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(16px, -20px) scale(1.04); }
  66%  { transform: translate(-12px, 10px) scale(0.97); }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  position: relative;
  z-index: 1;
}
/* Hero text is ALWAYS visible - no opacity:0 keyframe trap on critical content */
.hero-content,
.hero-visual { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero-content { animation: heroIn 600ms var(--ease) forwards; }
  .hero-visual  { animation: heroIn 600ms 140ms var(--ease) forwards; }
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,107,157,0.1);
  border: 1.5px solid rgba(255,107,157,0.25);
  color: var(--cta);
  font-family: 'Nunito', sans-serif;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  margin-bottom: 22px;
}
.hero h1 {
  /* Capped at 60px. At the old 88px "Where little ideas" could not fit the
     hero column, so the headline ran to four lines and pushed both buttons
     below the fold on a laptop. */
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  font-weight: 600;
}
.hero h1 .color-pink     { color: var(--cta); }
.hero h1 .color-lavender { color: var(--lavender-deep); }
.hero h1 .color-sky      { color: #5BACF5; }
.hero-p {
  font-size: var(--text-lg);
  color: var(--text-mid);
  max-width: 44ch;
  margin-bottom: 36px;
  line-height: 1.75;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* Hero visual */
.hero-canvas {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: visible;
}
.hero-img-wrap {
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: #ffffff;
  aspect-ratio: 1/1;
  max-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  position: relative;
}
.hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-emoji-cloud {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 40px;
  font-size: 56px;
  line-height: 1;
}
/* Floating stickers */
.hero-sticker {
  position: absolute;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 10px 16px;
  box-shadow: var(--shadow-md);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
  animation: stickerBounce 4s ease-in-out infinite;
  z-index: 10;
  white-space: nowrap;
}
.hero-sticker-1 { bottom: 18px; left: 18px;  animation-delay: 0s; }
.hero-sticker-2 { top: 18px;   right: 18px; animation-delay: 1.5s; }

@keyframes stickerBounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-8px) rotate(1deg); }
}

/* ── TRUST BAR ──────────────────────────────────── */
.trust-bar {
  background: var(--surface);
  border-top: 1.5px solid var(--border);
  border-bottom: 1.5px solid var(--border);
  padding: 18px 0;
}
.trust-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text);
}
.trust-item .t-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--cta);
}
.trust-item .t-icon svg { width: 100%; height: 100%; }

/* ── HOW IT WORKS ───────────────────────────────── */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
}
.steps-row::before {
  content: '';
  position: absolute;
  top: 44px;
  left: calc(16.666% + 28px);
  right: calc(16.666% + 28px);
  height: 2px;
  background: linear-gradient(90deg, var(--pink-deep), var(--lavender-deep), var(--sky-deep));
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}
.step-card {
  text-align: center;
  padding: 36px 24px 28px;
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-xs);
  position: relative;
  z-index: 1;
  transition: all 280ms var(--spring);
}
.step-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--border-mid); }
.step-icon-holder {
  width: 108px;
  height: 144px; /* 3:4 portrait ratio at a normal, non-oversized size */
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: transform 280ms var(--spring);
}
.step-card:hover .step-icon-holder { transform: scale(1.04) rotate(-2deg); }

.step-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--r-lg);
}
.step-icon-emoji {
  font-family: 'Fredoka', sans-serif;
  font-size: 2.75rem;
  line-height: 1;
}

.step-card:nth-child(1) .step-icon-holder { background: var(--pink);     color: var(--cta);         box-shadow: 0 4px 16px rgba(255,200,221,0.6); }
.step-card:nth-child(2) .step-icon-holder { background: var(--lavender); color: var(--lavender-deep); box-shadow: 0 4px 16px rgba(205,180,219,0.6); }
.step-card:nth-child(3) .step-icon-holder { background: var(--sky);      color: #5BACF5;             box-shadow: 0 4px 16px rgba(189,224,254,0.6); }
.step-card h3 { font-size: var(--text-xl); margin-bottom: 10px; }
.step-card p  { font-size: var(--text-sm); line-height: 1.65; }

/* ── CATEGORY CARDS ─────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.cat-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: transform 300ms var(--spring), box-shadow 300ms var(--ease);
  text-decoration: none;
  display: block;
}
.cat-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-lg); }
.cat-card-bg {
  position: absolute;
  inset: 0;
  transition: transform 500ms var(--ease);
}
.cat-card:hover .cat-card-bg { transform: scale(1.06); }
.cat-card:nth-child(1) .cat-card-bg { background: linear-gradient(135deg, #FFE4EF, #FFC8DD); }
.cat-card:nth-child(2) .cat-card-bg { background: linear-gradient(135deg, #EDE0F7, #CDB4DB); }
.cat-card:nth-child(3) .cat-card-bg { background: linear-gradient(135deg, #DFF0FF, #BDE0FE); }
.cat-card:nth-child(4) .cat-card-bg { background: linear-gradient(135deg, #D8F7F1, #95E1D3); }
.cat-card-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  font-size: 80px;
  line-height: 1;
  transition: transform 400ms var(--spring);
  z-index: 2;
}
.cat-card:hover .cat-card-emoji { transform: translate(-50%, -65%) scale(1.1) rotate(-5deg); }
.cat-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px 20px;
  background: linear-gradient(0deg, rgba(30,20,40,0.75) 0%, rgba(30,20,40,0.2) 70%, transparent 100%);
  z-index: 2;
}
.cat-card-body h3 { color: #fff; font-size: var(--text-xl); margin-bottom: 2px; }
.cat-card-body p  { color: rgba(255,255,255,0.82); font-size: var(--text-sm); line-height: 1.4; margin: 0; }
.cat-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-top: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: all 250ms var(--ease);
}
.cat-card:hover .cat-card-pill { opacity: 1; transform: translateY(0); }

/* Category photos are real <img> elements so they can be lazy loaded,
   rather than a background-image set from an inline style attribute. */
.cat-card-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sec-cta { text-align: center; margin-top: 36px; }

/* ── ABOUT / LLAMA BAND ─────────────────────────── */
.llama-band {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}
.llama-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.llama-visual {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 1/1;
  max-height: 520px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  font-size: 100px;
}
.llama-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.llama-content .label { display: block; margin-bottom: 12px; }
.llama-content h2 { margin-bottom: 18px; }
.llama-content p  { font-size: var(--text-lg); max-width: 44ch; margin-bottom: 24px; }
.llama-quote {
  background: var(--surface);
  border-left: 4px solid var(--lavender-deep);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 18px 22px;
  font-family: 'Fredoka', sans-serif;
  font-size: var(--text-lg);
  color: var(--text-mid);
  margin-bottom: 28px;
  box-shadow: var(--shadow-xs);
}

/* ── PAGE HERO ──────────────────────────────────── */
/* Shared by About, Care, Flexi Playground and Party Favours, so it lives
   in the base sheet rather than in party.css. */
.party-hero {
  background: linear-gradient(135deg, #FFE4EF, #F5EFFF, #DFF0FF);
  padding: 96px 0 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.party-hero .label { display: block; margin-bottom: 12px; }
.party-hero h1 { margin: 0 0 14px; }
.party-hero > .wrap > p,
.party-hero p { font-size: var(--text-lg); max-width: 56ch; margin: 0 auto; }

/* ── CARE CARDS ─────────────────────────────────── */
.care-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.care-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-xs);
}
.care-icon { font-size: 44px; display: block; margin-bottom: 14px; }
.care-card h3 { font-size: var(--text-xl); margin-bottom: 10px; }
@media (max-width: 768px) {
  .care-grid { grid-template-columns: 1fr; gap: 14px; }
  .care-card { padding: 22px; }
  .party-hero { padding: 56px 0 44px; }
}

/* ── PARTY CTA BAND ─────────────────────────────── */
.party-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 80px 24px;
}
.party-band .label { display: block; margin-bottom: 12px; }
.party-band h2     { margin-bottom: 16px; }
.party-band p      { font-size: var(--text-xl); margin-bottom: 32px; max-width: 52ch; margin-left: auto; margin-right: auto; }

/* ── FOOTER ──────────────────────────────────────── */
.site-footer {
  background: var(--text);
  color: rgba(255,255,255,0.9);
  padding: 72px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand .logo-wordmark { color: #fff; -webkit-text-fill-color: #fff; margin-bottom: 14px; display: block; }
.footer-brand img { height: 44px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.footer-brand p { color: rgba(255,255,255,0.55); font-size: var(--text-sm); line-height: 1.8; max-width: 260px; }
.footer-tagline {
  font-family: 'Fredoka', sans-serif;
  font-size: var(--text-lg);
  color: var(--yellow) !important;
  margin-top: 14px !important;
}
.footer-col h4 { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: var(--text-lg); color: #fff; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { color: rgba(255,255,255,0.55); font-size: var(--text-sm); transition: color 150ms var(--ease); }
.footer-col ul li a:hover { color: var(--yellow); }
.footer-bottom {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom p { color: rgba(255,255,255,0.3); font-size: var(--text-xs); }
.footer-bottom a { color: var(--yellow); }

/* ── PAGE CONTENT ────────────────────────────────── */
.page-banner {
  background: linear-gradient(135deg, var(--bg-alt), var(--surface-2));
  padding: 52px 0 36px;
  border-bottom: 1.5px solid var(--border);
}
.page-banner h1 { margin: 0; }
.page-body { padding: 56px 0 96px; }
.entry-content {
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--text-mid);
}
.entry-content h2, .entry-content h3 { color: var(--text); margin: 36px 0 14px; }
.entry-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.entry-content strong { color: var(--text); }
.entry-content p { margin-bottom: 18px; }
.entry-content ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
}
.entry-content ul li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--cta);
  font-size: 0.7em;
  top: 3px;
}

/* ── SECTION HEADER HELPER ──────────────────────── */
.sec-head { margin-bottom: 48px; }
.sec-head .label { display: block; margin-bottom: 10px; }
.sec-head h2 { margin-bottom: 14px; }
.sec-head p { font-size: var(--text-lg); max-width: 52ch; }
.sec-head.center { text-align: center; }
.sec-head.center p { margin: 0 auto; }


/* -- FORMS (shared) ------------------------------ */
.f-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.f-group { margin-bottom: 14px; }
.f-group label {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text);
  margin-bottom: 6px;
}
.f-group input,
.f-group select,
.f-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-mid);
  border-radius: var(--r-lg);
  font-family: 'Nunito', sans-serif;
  font-size: var(--text-base);
  color: var(--text);
  background: var(--surface-2);
  outline: none;
  transition: border-color 150ms, background 150ms;
}
.f-group input:focus,
.f-group select:focus,
.f-group textarea:focus {
  border-color: var(--cta);
  background: var(--surface);
}
.f-group textarea { resize: vertical; min-height: 90px; }
.f-msg { padding: 12px 16px; border-radius: var(--r-lg); margin-bottom: 14px; font-family: 'Nunito', sans-serif; font-weight: 700; }
.f-msg.ok  { background: linear-gradient(135deg,#EDFCF8,#D8F7F1); border-left: 4px solid var(--mint-deep); color: var(--text); }
.f-msg.err { background: linear-gradient(135deg,#FFE4EF,#FFCCE0); border-left: 4px solid var(--cta); color: var(--text); }

/* ═══════════════════════════════════════════════════
   POLISH PASS - v3.2.0
   Fixes: a11y, focus states, touch targets, sr-only,
          skip link, sticky mobile cart, form validation,
          WC single product mobile, better card depth
   ═══════════════════════════════════════════════════ */

/* ── Skip to content (a11y) ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  background: var(--cta);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  text-decoration: none;
  transition: top 200ms var(--ease);
}
.skip-link:focus { top: 0; }

/* ── Screen reader only ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Focus styles - visible everywhere ── */
:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Reset outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) { outline: none; }

/* Specific focus for buttons */
.btn:focus-visible,
.cart-pill:focus-visible,
.cat-card:focus-visible,
.shop-cat-tile:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 4px;
}


/* -- Touch targets: minimum 44x44px -------------- */
.btn { min-height: 44px; }
.cart-pill { min-height: 44px; }
.hamburger { min-width: 44px; min-height: 44px; }
.drawer-menu a, .drawer-minor a { min-height: 44px; display: flex; align-items: center; }
.site-nav ul li a { min-height: 44px; display: flex; align-items: center; }

/* ── Inline form validation states ── */
.f-group .f-error {
  display: none;
  font-family: 'Nunito', sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #D32F2F;
  margin-top: 5px;
}
.f-group.has-error .f-error { display: block; }
.f-group.has-error input,
.f-group.has-error select,
.f-group.has-error textarea {
  border-color: #D32F2F !important;
  background: #FFF5F5 !important;
}
.f-group.is-valid input,
.f-group.is-valid select,
.f-group.is-valid textarea {
  border-color: var(--mint-deep) !important;
}
.f-group input,
.f-group select,
.f-group textarea {
  transition: border-color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
}
.f-group input:focus,
.f-group select:focus,
.f-group textarea:focus {
  box-shadow: 0 0 0 4px rgba(255,107,157,0.12);
}

/* ── Hero: bulletproof visibility ──
   These override EVERYTHING - no animation can
   leave this content invisible. */
.hero-content { opacity: 1 !important; }
.hero h1      { opacity: 1 !important; }
.hero p       { opacity: 1 !important; }
.hero-actions { opacity: 1 !important; }

/* ── Better product card depth ── */
/* Product card shadow - consolidated, no duplicate */

/* ── Page transitions - subtle, fast ── */
#page {
  animation: pageIn 280ms var(--ease) both;
}
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── Toast notification ── */
.jt-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9000;
  background: var(--text);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 12px 24px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all 300ms var(--ease);
  white-space: nowrap;
}
.jt-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.jt-toast.success { background: var(--mint-deep); }
.jt-toast.error   { background: var(--cta); }


/* ── Category card photo mode ─────────────────────
   When a real image is uploaded to the WC category,
   .cat-card-bg becomes a full photo cover.
   .cat-card-img-overlay darkens it so text stays legible.
─────────────────────────────────────────────────── */
.cat-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 500ms var(--ease);
}
.cat-card:hover .cat-card-bg { transform: scale(1.06); }

/* Dark gradient overlay when using a real photo */
.cat-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(45,36,56,0.15) 0%,
    rgba(45,36,56,0.6) 100%
  );
  z-index: 1;
  transition: background 300ms var(--ease);
}
.cat-card:hover .cat-card-img-overlay {
  background: linear-gradient(
    180deg,
    rgba(45,36,56,0.1) 0%,
    rgba(45,36,56,0.7) 100%
  );
}
/* Make sure body text sits above the overlay */
.cat-card-body { z-index: 2; }
.cat-card-emoji { z-index: 2; }

/* ── Image placeholder state ─────────────────────
   Shows when no image has been uploaded yet.
   Visible only in WP admin / Customize preview.
   On the live site it's invisible if user hasn't
   uploaded - the visual column just collapses. */
.hero-placeholder {
  width: 100%;
  height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  text-align: center;
  border: 2px dashed rgba(255,107,157,0.3);
  border-radius: var(--r-xl);
}
.hero-placeholder p {
  font-family: 'Nunito', sans-serif;
  font-size: var(--text-sm);
  color: rgba(255,107,157,0.65);
  line-height: 1.6;
}
.hero-placeholder strong { color: rgba(255,107,157,0.85); }

/* Hide the hero visual entirely when no image is uploaded
   (so there's no empty box on the live site) */
.hero-img-wrap:has(.hero-placeholder) {
  background: none;
  box-shadow: none;
}


/* ── ANNOUNCEMENT BAR ─────────────────────────────── */
.announce-bar {
  background: linear-gradient(90deg, var(--cta), var(--lavender-deep));
  color: #fff;
  position: relative;
  z-index: 600;
  overflow: hidden;
}
.announce-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 44px 9px 16px;
  position: relative;
  min-height: 20px;
}
.announce-bar-text {
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.01em;
}
a.announce-bar-text:hover { text-decoration: underline; }
.announce-bar-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms var(--ease);
  flex-shrink: 0;
}
.announce-bar-close:hover { background: rgba(255,255,255,0.35); }
.announce-bar.jt-dismissed { display: none; }

@media (max-width: 600px) {
  .announce-bar-text { font-size: 0.8125rem; }
  .announce-bar-inner { padding: 8px 40px 8px 12px; }
}

/* ── HERO SLIDER (auto-scrolling) ─────────────────── */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--ease);
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}
/* When active, stack it back so cross-fade works cleanly */
.hero-slider-track img.hero-slide:not(.is-active) { position: absolute; }
.hero-slider-track img.hero-slide.is-active { position: absolute; }

.hero-slider-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 5;
  background: rgba(45,36,56,0.35);
  backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: var(--r-pill);
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 200ms var(--ease);
}
.hero-dot.is-active { background: #fff; transform: scale(1.25); }
.hero-dot:hover { background: rgba(255,255,255,0.8); }

/* ── STEP CARDS AS LINKS ──────────────────────────── */
a.step-card {
  text-decoration: none;
  display: block;
  position: relative;
}
.step-link-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--cta);
  opacity: 0;
  transform: translateY(4px);
  transition: all 220ms var(--ease);
}
a.step-card:hover .step-link-hint { opacity: 1; transform: translateY(0); }
a.step-card:hover { box-shadow: var(--shadow-md); border-color: var(--cta); }
a.step-card:focus-visible { outline: 3px solid var(--cta); outline-offset: 4px; }

/* ── FLEXI PLAYGROUND SECTION ─────────────────────── */
.flexi-playground-band { overflow: hidden; }
.flexi-playground-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 40px;
}
.flexi-playground-content .label { display: block; margin-bottom: 10px; }
.flexi-playground-content h2 { margin-bottom: 14px; }
.flexi-playground-content p { font-size: 1.0625rem; max-width: 46ch; margin-bottom: 24px; }
.flexi-playground-visual img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

@media (max-width: 1024px) {
  .flexi-playground-inner { grid-template-columns: 1fr; text-align: center; }
  .flexi-playground-content p { margin-left: auto; margin-right: auto; }
  .flexi-playground-visual { margin-top: 12px; }
}


/* ── FLEXI PLAYGROUND - IFRAME EMBED + FALLBACK ──── */
.flexi-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  min-height: 480px;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--surface-2);
  border: 2px solid var(--border);
}
.flexi-embed-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.flexi-embed-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-alt), var(--surface-2));
  z-index: 2;
}
.flexi-embed-fallback-inner {
  text-align: center;
  max-width: 420px;
  padding: 32px;
}
.flexi-embed-fallback-emoji {
  font-size: 3.5rem;
  display: block;
  margin-bottom: 16px;
}
.flexi-embed-fallback-inner h3 { margin-bottom: 10px; }
.flexi-embed-fallback-inner p { margin-bottom: 22px; }
.flexi-embed-newtab-link {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--cta);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.flexi-embed-newtab-link:hover { color: var(--cta-hover); }

@media (max-width: 768px) {
  .flexi-embed-wrap { aspect-ratio: 4/5; min-height: 400px; }
}


/* ── PRINT ──────────────────────────────────────── */
@media print {
  #masthead, .trust-bar, .site-footer, .mobile-drawer,
  .announce-bar, .jt-atc-bar, .jt-drawer-cart { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   One coherent set of breakpoints. Previous versions
   had three overlapping passes that fought each other,
   which is why grids stayed 2-col on narrow desktops.
   ═══════════════════════════════════════════════════ */

/* Global overflow guard */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
.hero-grid,
.llama-band-inner,
.footer-grid { width: 100%; }
.wrap > *,
.wrap-narrow > *,
section > .wrap > * { max-width: 100%; }

@media (max-width: 1200px) {
  .hero-grid { gap: 36px; }
  .hero h1 { font-size: clamp(2.25rem, 4.5vw, 4rem); }
  .llama-band-inner { gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 1100px) {
  .hero { padding: 60px 0 52px; min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-visual { display: none; }
  .hero-content { text-align: center; max-width: 640px; margin: 0 auto; }
  .hero-p { margin: 0 auto 32px; }
  .hero-label { margin: 0 auto 20px; }
  .hero-actions { justify-content: center; }

  .llama-band-inner { grid-template-columns: 1fr; gap: 36px; }
  .llama-visual { width: 100%; max-width: 520px; margin: 0 auto; min-height: 300px; max-height: 380px; }
  .llama-visual img { width: 100%; height: 100%; object-fit: cover; }
  .llama-content { text-align: center; }
  .llama-content p { max-width: 60ch; margin: 0 auto 18px; }
  .llama-quote { text-align: left; }

  .flexi-playground-inner { grid-template-columns: 1fr; text-align: center; }
  .flexi-playground-content p { margin-left: auto; margin-right: auto; }
  .flexi-playground-visual { margin-top: 12px; }
}

@media (max-width: 768px) {
  .wrap, .wrap-narrow, .wrap-wide { padding: 0 16px; }

  .site-nav { display: none; }
  .hamburger { display: flex; }
  .mobile-drawer { display: block; }

  h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  h2 { font-size: clamp(1.75rem, 7vw, 2.5rem); }

  .hero { padding: 44px 0 40px; }
  .hero h1 { font-size: clamp(1.875rem, 8vw, 2.5rem); letter-spacing: -0.02em; }
  .hero-p { font-size: 1rem; margin-bottom: 28px; }
  .hero-actions { flex-direction: column; align-items: center; gap: 12px; }
  .hero-actions .btn { width: 100%; max-width: 320px; justify-content: center; font-size: 1rem; padding: 14px 28px; }
  .hero-label { font-size: 0.7rem; }

  .steps-row { grid-template-columns: 1fr; gap: 12px; }
  .steps-row::before { display: none; }
  .step-card { padding: 22px 18px; text-align: center; }
  .step-icon-holder { width: 78px; height: 104px; margin: 0 auto 14px; }
  .step-icon-emoji { font-size: 2rem; }

  .cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cat-card { aspect-ratio: 4/3; border-radius: 20px; }
  .cat-card-emoji { font-size: 48px; transform: translate(-50%, -55%); }
  .cat-card-body h3 { font-size: 0.9375rem; }
  .cat-card-body p { display: none; }
  .cat-card-pill { display: none; }

  .llama-visual { max-width: 100%; max-height: 440px; }
  .llama-quote { font-size: 1rem; padding: 14px 16px; }

  .f-grid-2 { grid-template-columns: 1fr; gap: 0; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
  .trust-items { gap: 14px; justify-content: flex-start; }
  .trust-item { font-size: 0.8125rem; }

  .section { padding: 48px 0; }
  .section-sm { padding: 28px 0; }
  .sec-head { margin-bottom: 28px; }
  .sec-head h2 { font-size: clamp(1.625rem, 6vw, 2.25rem); }

  .party-band { padding: 56px 20px; text-align: center; }
  .party-band h2 { font-size: clamp(1.625rem, 6vw, 2.25rem); }
  .party-band p { font-size: 1rem; }

  .flexi-embed-wrap { aspect-ratio: 4/5; min-height: 400px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-card-emoji { font-size: 40px; }
  .trust-items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; justify-items: start; }
  .cart-pill .cart-pill-label { display: none; }
  .cart-pill { padding: 8px 12px; }
}

/* ═══════════════════════════════════════════════════
   v5.1 REVAMP BLOCKS
   Announcement segments, the proof strip under the
   hero, the reasons grid and the small parts notice.
   ═══════════════════════════════════════════════════ */

/* ── ANNOUNCEMENT SEGMENTS ───────────────────────── */
.announce-bar-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.announce-bar-part { white-space: nowrap; }
.announce-bar-sep {
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.55);
  flex: none;
}

/* ── PROOF STRIP ─────────────────────────────────── */
.proof-strip {
  background: var(--surface);
  border-top: 1.5px solid var(--border);
  border-bottom: 1.5px solid var(--border);
  padding: 18px 0;
}
.proof-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.proof-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--text);
}
.proof-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--yellow-deep);
}
.proof-icon svg { width: 100%; height: 100%; fill: currentColor; stroke-width: 1.2; }

/* ── REASONS GRID ────────────────────────────────── */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.reason-tile {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 30px 32px;
}
.reason-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  margin-bottom: 18px;
  color: var(--text);
}
.reason-icon svg { width: 26px; height: 26px; }
.tint-mint   { background: var(--mint); }
.tint-sky    { background: var(--sky); }
.tint-yellow { background: var(--yellow); }
.tint-pink   { background: var(--pink); }
.reason-tile h3 { font-size: var(--text-xl); margin-bottom: 8px; }
.reason-tile p  { font-size: var(--text-base); margin: 0; }

/* ── SMALL PARTS NOTICE ──────────────────────────── */
.safety-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--warn-bg);
  border: 1.5px solid var(--warn-border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.5;
  color: var(--warn-text);
}
.safety-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* In the footer it sits on the dark ground, so it inverts rather than
   punching a bright amber card into the bottom of the page. */
.footer-safety {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 20px 0 0;
  margin-top: 8px;
}
.footer-safety .safety-note {
  background: rgba(240,180,41,0.12);
  border-color: rgba(240,180,41,0.4);
  color: rgba(255,255,255,0.88);
  max-width: 62ch;
}

/* The product page version sits directly above the basket button. */
.pdp-safety { margin: 0 0 18px; }

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 768px) {
  .reasons-grid { grid-template-columns: 1fr; gap: 14px; }
  .reason-tile { padding: 22px; }
  .proof-list { gap: 10px 24px; }
  .proof-item { font-size: 0.8125rem; }
  .announce-bar-text { gap: 8px; }
  .announce-bar-part { white-space: normal; }
}

/* ── v5.2: COMING SOON ───────────────────────────── */
.soon-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--yellow);
  color: var(--text);
  font-family: 'Nunito', sans-serif;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.soon-label {
  display: inline-block !important;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.flexi-soon { padding-top: 72px; padding-bottom: 88px; }
.flexi-soon h1 { font-size: clamp(var(--text-3xl), 5vw, 3.25rem); margin-bottom: 16px; }

/* ── v5.2: CUSTOMIZER IMAGES ─────────────────────── */
.jt-empty-img { width: 140px; height: 140px; object-fit: contain; margin: 0 auto 18px; }
.jt-drawer-cart-empty .jt-empty-img { width: 110px; height: 110px; margin-bottom: 14px; }
.care-icon-img { width: 64px; height: 64px; object-fit: contain; border-radius: var(--r-sm); margin-bottom: 14px; }
.footer-brand img.is-own { filter: none; }

/* ── v5.2: LEGAL ─────────────────────────────────── */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: var(--text-xs);
}
.footer-bottom .footer-legal a,
.footer-legal button {
  color: rgba(255,255,255,0.7);
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.footer-bottom .footer-legal a:hover,
.footer-legal button:hover { color: var(--yellow); }
.jt-fillin { background: #FFE58F; color: #5C4400; padding: 1px 6px; border-radius: 4px; }

/* ── v5.2: COOKIE BANNER ─────────────────────────── */
.jt-cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9990;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.jt-cookie[hidden] { display: none; }
.jt-cookie-inner {
  pointer-events: auto;
  width: 100%;
  max-width: 720px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 20px;
  align-items: center;
}
.jt-cookie-title { grid-column: 1; font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--text); margin: 0; }
.jt-cookie-text { grid-column: 1; font-size: var(--text-sm); line-height: 1.6; margin: 0; }
.jt-cookie-text a { color: var(--cta); font-weight: 700; text-decoration: underline; }
.jt-cookie-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 10px; }
.jt-cookie-actions .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .jt-cookie { left: 8px; right: 8px; bottom: 8px; }
  .jt-cookie-inner { grid-template-columns: 1fr; padding: 16px; }
  .jt-cookie-actions { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .jt-cookie-actions .btn { flex: 1; justify-content: center; }
}

/* ── v5.3: BESTSELLERS CAROUSEL ──────────────────── */
/* Modelled on the swipe row the client picked. Native scroll snap does
   the swiping, so a phone needs no script; the arrow buttons are a
   desktop extra driven from main.js. */
.label-dot { display: inline-flex !important; align-items: center; gap: 8px; color: var(--text-mid); }
.label-dot::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: conic-gradient(var(--pink-deep), var(--yellow), var(--mint-deep), var(--sky-deep), var(--pink-deep));
}
.bestsellers h2 .color-pink { color: var(--cta); }

.bestsellers-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.bestsellers-head .sec-head { margin-bottom: 0; }

.rail-nav { display: flex; gap: 10px; }
.rail-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border-mid);
  color: var(--text);
  transition: background 150ms var(--ease), opacity 150ms var(--ease);
}
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn:hover { background: var(--cream); }
.rail-btn:disabled { opacity: 0.35; cursor: default; }

.bs-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.bs-rail::-webkit-scrollbar { display: none; }

.bs-card {
  flex: 0 0 calc((100% - 60px) / 4);
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: 28px;
  overflow: hidden;
  scroll-snap-align: start;
}
.bs-card-media {
  position: relative;
  display: block;
  aspect-ratio: 9 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #FFE4EF, #EDE0F7);
}
.bs-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.bs-card:hover .bs-card-media img { transform: scale(1.04); }
.bs-card-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 56px;
}

.bs-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 20px 20px 22px;
}
.bs-card-cat {
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}
.bs-card-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bs-card-title a { color: var(--text-mid); }
.bs-card-title a:hover { color: var(--cta); }

.bs-card-foot {
  align-self: stretch;
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.bs-card-price {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text);
  padding-bottom: 4px;
}
.bs-card-price del { color: var(--text-light); font-weight: 400; font-size: 0.85em; margin-right: 6px; }
.bs-card-price ins { text-decoration: none; }

.bs-card-add {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--yellow);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(240,180,41,0.35);
  transition: background 150ms var(--ease), transform 220ms var(--spring);
}
.bs-card-add svg { width: 22px; height: 22px; }
.bs-card-add:hover { background: var(--yellow-deep); transform: scale(1.06); }
.bs-card-add.is-loading svg { opacity: 0; }
.bs-card-add.is-loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(45,36,56,0.25);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: bsSpin 700ms linear infinite;
}
@keyframes bsSpin { to { transform: rotate(360deg); } }

.bestsellers-foot { display: flex; justify-content: flex-end; margin-top: 24px; }
.btn-soft {
  background: var(--cream);
  color: var(--text-mid);
  font-size: var(--text-base);
  padding: 12px 30px;
}
.btn-soft:hover { color: var(--text); }

@media (max-width: 1024px) {
  .bs-card { flex-basis: calc((100% - 40px) / 3); }
}

@media (max-width: 768px) {
  .rail-nav { display: none; }
  .bestsellers-head { margin-bottom: 22px; }
  /* Bleed to the screen edge so the next card peeks in, which is what
     tells a thumb the row scrolls. */
  .bs-rail {
    gap: 16px;
    margin: 0 -16px;
    padding: 0 16px 4px;
    scroll-padding: 0 16px;
  }
  .bs-card { flex-basis: 78%; border-radius: 24px; }
}