/* =========================================================
   TEGO — Kids Watches. Premium E-Commerce Homepage Stylesheet
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* Warm dark "ink" scale — replaces the old navy scale. Used for text and
     small high-contrast UI accents (never as a full section background). */
  --navy-950:#2e2740;
  --navy-900:#3d3450;
  --navy-850:#453a5c;
  --navy-800:#4a3f63;
  --navy-700:#5c4f78;
  --navy-600:#6e608c;

  /* Accents — pastel candy-shop palette, no blue */
  --sky-400:#b49ae8;   /* was a literal blue; now a soft lavender (kept the var name for a low-risk retint) */
  --sky-300:#d6c6f5;
  --cyan-400:#4ecdb4;  /* soft mint (was a cyan-blue) */
  --blue-500:#8b6bf0;  /* was blue-500; repurposed as a deeper lavender for hover states */
  --pink-400:#ff9ecb;
  --purple-400:#b49ae8;
  --red-400:#ff8a80;
  --yellow-300:#ffd873;

  /* Primary "kids" warm accent — retinted to the exact rainbow palette used
     by the logo-reveal preloader, so the first thing a visitor sees (the
     preloader) and the rest of the site read as one cohesive brand. */
  --coral-400:#ff8a6e;
  --coral-500:#ff595e;
  --coral-600:#e8434c;
  --gold-400:#ffca3a;

  /* The full preloader rainbow, available site-wide for badges, icon tiles
     and other playful accents. */
  --kid-red:#ff595e;
  --kid-yellow:#ffca3a;
  --kid-green:#8ac926;
  --kid-blue:#1982c4;
  --kid-purple:#6a4c93;
  --kid-orange:#ff924c;
  --cyan-tint:#e0f7fa;
  --wa-green:#25d366;
  --wa-green-dark:#128c7e;

  /* Neutrals / text */
  --white:#ffffff;
  --ink-050:#fff9f2;
  --ink-100:#f6eefb;
  --ink-300:#d8cce6;
  --ink-500:#8d82a0;

  /* Surfaces — warm, light, pastel-tinted (no more dark-navy sections) */
  --surface-card:#ffffff;
  --surface-soft:#fff6ec;
  --surface-dark-card:#453a5c;
  --border-soft:#f0e4e0;
  --border-dark:#e3d6ee;

  --cream:#fefcfa;
  --cream-deep:#f5f2ee;
  --mint-tint:#eafbf4;
  --lavender-tint:#f5f0fd;
  --peach-tint:#fff0e6;

  /* Dark-section backgrounds — true onyx black (matching the logo's own
     black, not navy or gray), warmed very slightly toward gold in the
     gradient stops so it reads as rich matte-black rather than flat/cold. */
  --onyx-950:#0a0a0a;
  --onyx-900:#141414;
  --onyx-800:#1f1c17;
  --onyx-border:rgba(255,255,255,.1);

  /* Gradients — a warm red→orange→yellow "candy" gradient is the primary
     playful-premium accent against a black/white structural base, matching
     the rainbow logo-reveal preloader. */
  --grad-hero:linear-gradient(160deg,#0a0a0a 0%,#161616 55%,#221c12 100%);
  --grad-cta:linear-gradient(180deg,#8ac926,#4a7d15);
  --grad-gold-text:linear-gradient(90deg,#ff595e 0%,#ff924c 50%,#ffca3a 100%);
  --grad-pink:linear-gradient(135deg,#ff924c 0%,#ff595e 100%);
  --grad-purple:linear-gradient(135deg,#8ac926 0%,#1982c4 100%);

  /* Type — Fredoka is a rounded, friendly display face that still reads as
     premium at weight 600/700; Lexend keeps subtext/body copy clean and
     highly readable. Both are the only two families actually loaded via
     Google Fonts, so headings never fall back to an unstyled system serif.
     Caveat is a third, script/handwriting face reserved for small "sticky
     note" accents (e.g. the footer's "Play Smile Grow"). */
  --font-head:'Fredoka', 'Quicksand', 'Nunito', sans-serif;
  --font-body:'Lexend', 'Segoe UI', system-ui, sans-serif;
  --font-hand:'Caveat', 'Segoe Script', cursive;

  /* Radii & shadow */
  --r-sm:12px;
  --r-md:18px;
  --r-lg:28px;
  --r-xl:40px;
  --shadow-sm:0 4px 14px rgba(120,90,60,.08);
  --shadow-md:0 14px 34px rgba(120,90,60,.12);
  --shadow-lg:0 26px 60px rgba(90,70,110,.18);
  --shadow-glow:0 0 0 6px rgba(255,131,103,.14);

  /* Layout */
  --container:1280px;
  --header-h:88px;
  --header-h-scrolled:66px;
  --announce-h:36px;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-fast:.2s;
  --dur-med:.4s;
  --dur-slow:.7s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;font-synthesis:none;}
/* overflow-x lives on <html>, not <body> — any non-"visible" overflow on
   body (even just overflow-x) makes body's other axis compute to `auto`
   per spec, turning it into its own scroll container. Since the page
   actually scrolls at the document/html level, every `position:sticky`
   descendant then measures against that inert body scrollport instead of
   the real viewport and never sticks. Clipping horizontal overflow on
   <html> instead avoids the whole trap while still hiding the same
   decorative bleed. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--navy-800);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;display:block;}
svg{display:block;}
a{color:inherit;text-decoration:none;}
button,input{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}
ul{list-style:none;}
input:focus,button:focus,a:focus{outline:none;}
:focus-visible{outline:3px solid var(--coral-500);outline-offset:3px;border-radius:6px;}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;line-height:1.3;letter-spacing:.01em;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- Utilities ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem);}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{
  position:absolute;left:1rem;top:-60px;background:var(--navy-900);color:var(--white);
  padding:.75rem 1.25rem;border-radius:var(--r-sm);z-index:1000;transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:1rem;}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:700;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-600);
}
.section-head{max-width:640px;margin-bottom:clamp(2rem,4vw,3rem);}
.section-head.center{margin-inline:auto;text-align:center;}
.section-title{font-size:clamp(1.8rem,3.4vw,2.75rem);margin-block:.6rem;color:var(--navy-900);}
.section-title.on-dark{color:var(--white);}
.section-sub{color:var(--ink-500);font-size:clamp(1rem,1.2vw,1.1rem);max-width:52ch;}
.section-sub.on-dark{color:var(--ink-300);}
.on-dark{color:var(--white);}

section{position:relative;padding-block:clamp(3.5rem,7vw,6.5rem);}

/* Buttons */
/* ---------- Candy buttons ---------- */
/* Glossy, bouncy pill buttons — a rounded top-highlight sheen, a tiny shine
   bubble, a thick candy-colored border, and a gentle idle wiggle every few
   seconds, with a squash-down "press" on hover. Every CTA on the site
   shares this one shape; only the fill/border color changes per variant. */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.8rem;border-radius:999px;font-family:var(--font-head);font-weight:700;
  font-size:1rem;color:var(--white);border:3px solid transparent;
  text-shadow:1px 2px 0 rgba(0,0,0,.25);
  transition:transform .25s cubic-bezier(1,-.4,0,1.4),filter var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  white-space:nowrap;animation:candyBounce 4s ease-out infinite;
}
.btn::before,.add-cart-btn::before,.pdp-add-btn::before,.pdp-buy-btn::before,
.wishlist-move-btn::before,.upsell-add::before,.search-tag::before{
  content:"";position:absolute;top:0;left:0;height:60%;width:100%;border-radius:0 0 25% 25%;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.15) 20%);pointer-events:none;
}
.btn::after,.add-cart-btn::after,.pdp-add-btn::after,.pdp-buy-btn::after,
.wishlist-move-btn::after,.upsell-add::after,.search-tag::after{
  content:"";position:absolute;top:3px;left:10px;width:6px;height:12px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.85));
  transform:rotate(50deg);pointer-events:none;
}
.btn svg{width:1.1em;height:1.1em;position:relative;z-index:1;}
.btn span,.btn{z-index:0;}
.btn:hover,.btn:focus-visible{transform:scale(.94);filter:brightness(.9);animation-play-state:paused;}
.btn:active{transform:scale(.88);}
@keyframes candyBounce{
  0%,10%,100%{transform:none;}
  2%,6%{transform:rotate(-4deg);}
  4%,8%{transform:rotate(4deg);}
}
@media (prefers-reduced-motion: reduce){.btn{animation:none;}}

.btn-primary{
  background:var(--grad-cta);border-color:#5fa018;color:var(--white);
  text-shadow:1px 1px 0 rgba(0,0,0,.2);box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 8px 18px rgba(138,201,38,.35);
}
.btn-ghost{background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);border-color:#0d6aa3;box-shadow:0 6px 3px -3px rgba(0,0,0,.3);}
.btn-dark{background:linear-gradient(180deg,var(--navy-700),var(--navy-900));border-color:var(--navy-950);box-shadow:0 6px 3px -3px rgba(0,0,0,.3);}
.btn-ghost-dark{
  background:linear-gradient(180deg,#ffffff,#f0eaf7);color:var(--navy-800);border-color:var(--coral-500);
  text-shadow:none;box-shadow:0 6px 3px -3px rgba(0,0,0,.15);margin-top:.6rem;
}
.btn-block{width:100%;}
.btn-sm{padding:.7rem 1.3rem;font-size:.9rem;}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* Star rating */
.stars{display:inline-flex;gap:2px;color:var(--yellow-300);}
.stars svg{width:16px;height:16px;}
.star-empty{color:#e3e9fb;}

/* ---------- Header ---------- */
.site-header{
  position:fixed;left:0;right:0;top:var(--announce-h);z-index:902;
  height:var(--header-h);
  display:flex;align-items:center;
  border-bottom:1px solid var(--border-soft);
  transition:height var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease),top var(--dur-med) var(--ease), left var(--dur-med) var(--ease), right var(--dur-med) var(--ease), translate var(--dur-med) var(--ease), width var(--dur-med) var(--ease);
}
/* Blur lives on a pseudo-element (not the header itself) so the header
   never becomes a CSS containing block for its position:fixed mobile-nav
   child — filter/backdrop-filter on an ancestor otherwise reroutes fixed
   descendants to size against that ancestor instead of the viewport.
   Always a solid light glass (not transparent-over-hero) — every page
   opens on a light section now, so the header needs to read correctly
   from the very first frame regardless of scroll position or page. */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:background var(--dur-med) var(--ease);
}
.site-header.is-scrolled{
  left: 50%;
  right: auto;
  top: 12px;
  translate: -50% 0;
  width: fit-content;
  max-width: calc(100vw - 30px);
  border-radius: 50px;
  height: calc(var(--header-h-scrolled) + 4px);
  padding: 0;
  border: none;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(6,10,30,.12);
  transition: background var(--dur-med) var(--ease);
}
.site-header.is-scrolled .header-inner{padding-inline:1.5rem;}
.site-header.is-scrolled.menu-open,
.site-header.is-scrolled.search-open{
  left: 0;
  right: 0;
  margin: 0;
  top: 0;
  translate: none;
  width: 100vw;
  max-width: 100vw;
  border-radius: 0;
  background: rgba(255,255,255,1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.is-scrolled.menu-open .header-inner,
.site-header.is-scrolled.search-open .header-inner{padding-inline:clamp(1.1rem,4vw,2.5rem);}
.top-blur-mask{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 24px;
  z-index: 901;
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
.site-header.is-scrolled::before{
  border-radius: 50px;
}
.site-header.is-scrolled.menu-open::before,
.site-header.is-scrolled.search-open::before{
  display: none;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;position:relative;z-index:2;}
.brand{display:inline-flex;align-items:center;flex-shrink:0;}
.brand-logo{height:26px;width:auto;display:block;transition:height var(--dur-med) var(--ease);}
.site-header.is-scrolled .brand-logo{height:22px;}

/* Candy-coated icon buttons for the scrolled floating navbar */
.site-header.is-scrolled .header-actions{gap:.5rem;}
.site-header.is-scrolled .icon-btn{
  width:36px;height:36px;color:var(--white);
  background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);
  border:2px solid #0d5f96;
  box-shadow:0 4px 0 -1px rgba(0,0,0,.12),0 6px 12px rgba(25,130,196,.38);
  transition:transform .25s cubic-bezier(1,-.4,0,1.4),box-shadow var(--dur-fast) var(--ease);
}
.site-header.is-scrolled .icon-btn::before{
  content:"";position:absolute;top:2px;left:5px;right:5px;height:38%;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));pointer-events:none;
}
.site-header.is-scrolled .icon-btn svg{position:relative;z-index:1;width:17px;height:17px;}
.site-header.is-scrolled #wishlistHeaderBtn{background:linear-gradient(180deg,var(--kid-red),var(--coral-600));border-color:#c73a42;box-shadow:0 4px 0 -1px rgba(0,0,0,.12),0 6px 12px rgba(255,89,94,.4);}
.site-header.is-scrolled #cartHeaderBtn{background:linear-gradient(180deg,var(--kid-orange),#d9591a);border-color:#c14f16;box-shadow:0 4px 0 -1px rgba(0,0,0,.12),0 6px 12px rgba(255,146,76,.4);}
.site-header.is-scrolled #accountBtn{background:linear-gradient(180deg,var(--kid-purple),#4f3670);border-color:#4f3670;box-shadow:0 4px 0 -1px rgba(0,0,0,.12),0 6px 12px rgba(106,76,147,.4);}
.site-header.is-scrolled .mobile-search-btn{background:var(--grad-cta);border-color:#5fa018;box-shadow:0 4px 0 -1px rgba(0,0,0,.12),0 6px 12px rgba(138,201,38,.4);}
.site-header.is-scrolled .icon-btn:hover{transform:translateY(-3px) scale(1.08) rotate(-4deg);color:var(--white) !important;}
.site-header.is-scrolled .icon-btn:active{transform:translateY(0) scale(.92);}
.site-header.is-scrolled .icon-btn .badge{
  background:var(--white);color:var(--navy-900);border-color:var(--white);
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  top:-3px;right:-3px;min-width:15px;height:15px;font-size:.58rem;border-width:1.5px;
}
/* Candy gradient chip for the active nav link */
.site-header.is-scrolled .main-nav a.active{color:var(--white);box-shadow:0 3px 8px rgba(0,0,0,.15);}
.site-header.is-scrolled .main-nav a.active::after{display:none;}
.site-header.is-scrolled .main-nav li:nth-child(1) a.active{background:linear-gradient(180deg,var(--kid-red),var(--coral-600));}
.site-header.is-scrolled .main-nav li:nth-child(2) a.active{background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);}
.site-header.is-scrolled .main-nav li:nth-child(3) a.active{background:linear-gradient(180deg,var(--kid-green),#4a7d15);}
.site-header.is-scrolled .main-nav li:nth-child(4) a.active{background:linear-gradient(180deg,var(--kid-yellow),var(--kid-orange));}
.site-header.is-scrolled .main-nav li:nth-child(5) a.active{background:linear-gradient(180deg,var(--kid-purple),#4f3670);}
.site-header.is-scrolled .main-nav li:nth-child(6) a.active{background:linear-gradient(180deg,var(--kid-orange),#d9591a);}
/* Rainbow wordmark — same per-letter palette as the preloader reveal, so
   the logo reads as one consistent candy-colored brand mark everywhere. */
.brand-logo .logo-path{fill:var(--navy-950);fill-opacity:1;stroke:none;}

.main-nav ul{display:flex;align-items:center;gap:clamp(.6rem,1vw,1.1rem);flex-wrap:nowrap;}
.main-nav a{
  font-family:var(--font-head);font-weight:600;font-size:.86rem;color:var(--navy-800);
  position:relative;padding:.45rem .85rem;border-radius:999px;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform .2s cubic-bezier(1,-.4,0,1.4);
}
.main-nav a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.1rem;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--coral-500),var(--gold-400));transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease);
}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1);}
.main-nav a.active{color:var(--coral-500);}
.main-nav a:hover,.main-nav a:focus-visible{transform:translateY(-2px);}
.main-nav li:nth-child(1) a:hover,.main-nav li:nth-child(1) a.active{background:rgba(255,89,94,.12);}
.main-nav li:nth-child(2) a:hover,.main-nav li:nth-child(2) a.active{background:rgba(25,130,196,.12);color:var(--kid-blue);}
.main-nav li:nth-child(3) a:hover,.main-nav li:nth-child(3) a.active{background:rgba(138,201,38,.14);color:#4a7d15;}
.main-nav li:nth-child(4) a:hover,.main-nav li:nth-child(4) a.active{background:rgba(255,202,58,.2);color:#a97a00;}
.main-nav li:nth-child(5) a:hover,.main-nav li:nth-child(5) a.active{background:rgba(106,76,147,.12);color:var(--kid-purple);}
.main-nav li:nth-child(6) a:hover,.main-nav li:nth-child(6) a.active{background:rgba(255,146,76,.16);color:#e6712a;}
.nav-dot{
  width:7px;height:7px;border-radius:50%;background:var(--red-400);box-shadow:0 0 0 rgba(255,107,107,.6);
  animation:navPulse 2s infinite;
}
@keyframes navPulse{
  0%{box-shadow:0 0 0 0 rgba(255,107,107,.55);}
  70%{box-shadow:0 0 0 6px rgba(255,107,107,0);}
  100%{box-shadow:0 0 0 0 rgba(255,107,107,0);}
}

.header-actions{display:flex;align-items:center;gap:.4rem;}
.search-wrap{position:relative;}
.search-wrap input{
  width:180px;padding:.6rem 2.4rem .6rem 1rem;border-radius:999px;border:1.5px solid var(--border-soft);
  background:var(--surface-soft);color:var(--navy-900);font-size:.9rem;transition:width var(--dur-med) var(--ease),background var(--dur-fast),border-color var(--dur-fast);
}
.search-wrap input::placeholder{color:var(--ink-500);}
.search-wrap input:focus{width:230px;background:var(--white);border-color:var(--coral-500);}
.search-wrap svg{position:absolute;right:.7rem;top:50%;translate:0 -50%;width:16px;height:16px;color:var(--ink-500);pointer-events:none;}
.search-wrap input[type="search"]::-webkit-search-cancel-button,
.search-wrap input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;}

.search-suggestions{
  position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--surface-card);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);border:1px solid var(--border-soft);
  overflow:hidden;z-index:50;max-height:340px;overflow-y:auto;
}
.suggestion-item{
  display:flex;align-items:center;gap:.7rem;width:100%;padding:.65rem .9rem;text-align:left;
  border-bottom:1px solid var(--border-soft);transition:background var(--dur-fast);
}
.suggestion-item:last-child{border-bottom:none;}
.suggestion-item:hover,.suggestion-item:focus-visible{background:var(--surface-soft);}
.suggestion-swatch{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--sw-tone) 55%,white 10%),color-mix(in srgb,var(--sw-tone) 85%,#2e2740 30%));
}
.suggestion-swatch svg{width:16px;height:16px;color:#2e2740;}
.suggestion-text{flex:1;min-width:0;}
.suggestion-name{display:block;font-size:.86rem;font-weight:700;color:var(--navy-900);font-family:var(--font-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.suggestion-price{font-size:.78rem;color:var(--ink-500);}
.suggestion-empty{padding:1rem;text-align:center;color:var(--ink-500);font-size:.85rem;}

.icon-btn{
  position:relative;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--navy-800);transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
/* Must come after .icon-btn — equal specificity (both single classes), and
   .mobile-search-btn also carries .icon-btn, so this needs to win the
   cascade by source order to actually hide the button on desktop. */
.mobile-search-btn{display:none;}
.icon-btn:hover{background:var(--surface-soft);transform:translateY(-2px) scale(1.08);}
.icon-btn svg{width:20px;height:20px;}
.icon-btn.is-active svg{color:var(--coral-500);}
#wishlistHeaderBtn:hover,.mobile-search-btn:hover{background:rgba(255,89,94,.12);color:var(--coral-500);}
#cartHeaderBtn:hover{background:rgba(255,146,76,.15);color:var(--kid-orange);}
.badge{
  position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:linear-gradient(135deg,var(--kid-red),var(--kid-orange));color:var(--white);font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--white);transition:transform .25s var(--ease);
}
.badge.bump{animation:bump .35s var(--ease);}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.4);}100%{transform:scale(1);}}

/* Styled after the "E" in the TEGO wordmark — it's already three stacked
   bars, so the toggle borrows its exact rainbow coloring instead of a
   generic grey hamburger, tying the control back to the brand mark. */
.hamburger{
  display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  width:42px;height:42px;border-radius:50%;transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.hamburger:hover{background:var(--surface-soft);transform:translateY(-2px) scale(1.08);}
.hamburger span{
  width:20px;height:3px;border-radius:999px;
  transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease),width var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.hamburger span:nth-child(1){background:var(--kid-yellow);}
.hamburger span:nth-child(2){background:var(--kid-green);width:15px;align-self:center;}
.hamburger span:nth-child(3){background:var(--kid-blue);}
.hamburger:hover span{width:20px;}
.hamburger[aria-expanded="true"] span{background:var(--coral-500);}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:20px;}

/* Mobile nav drawer */
@media (max-width: 959px){
  .main-nav{
    position:absolute;top:100%;left:calc(-50vw + 50%);width:100vw;height:100vh;
    background:rgba(255,255,255,.98);backdrop-filter:blur(10px);
    padding:2rem 1.5rem;transform:translateX(-100%);
    transition:transform var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
    visibility:hidden;
    overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,.12);
  }
  .main-nav.is-open{transform:translateX(0);visibility:visible;transition:transform var(--dur-med) var(--ease), visibility 0s linear 0s;}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:1.5rem;}
  .main-nav a{font-size:1.3rem;}
  .site-header.is-scrolled .main-nav{height:calc(100vh - var(--header-h-scrolled));}
  .search-wrap{display:none;}
  .mobile-search-btn{display:inline-flex;}
  .site-header.is-scrolled{width: 100%;}
}

@media (min-width:960px){
  .hamburger{display:none;}
}
@media (max-width:400px){
  .header-inner{gap:.5rem;}
  .brand-logo{height:20px;}
  .site-header.is-scrolled .brand-logo{height:16px;}
  .header-actions{gap:.2rem;}
  .icon-btn,.hamburger{width:32px;height:32px;}
  .icon-btn svg{width:16px;height:16px;}
  .hamburger span{width:16px;}
  .site-header.is-scrolled .header-inner{padding-inline:1.1rem;}
}

/* ---------- Mobile search panel ---------- */
.mobile-search-panel{
  position:fixed;top:calc(var(--announce-h) + var(--header-h));left:0;right:0;z-index:895;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  padding:1rem 0;border-bottom:1px solid var(--border-soft);box-shadow:0 12px 30px rgba(0,0,0,.08);
  transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform var(--dur-med) var(--ease),opacity var(--dur-med) var(--ease),top var(--dur-med) var(--ease);
}
.mobile-search-panel.is-open{transform:translateY(0);opacity:1;pointer-events:auto;}
.site-header.is-scrolled ~ .mobile-search-panel{top:var(--header-h-scrolled);}
.search-wrap.mobile{display:block;}
.search-wrap.mobile input{width:100%;padding:.8rem 2.6rem .8rem 1.1rem;}
.search-wrap.mobile input:focus{width:100%;}
@media (min-width:960px){
  .mobile-search-panel{display:none;}
}

/* ---------- Hero ---------- */
.hero{
  background:radial-gradient(circle at 15% 0%,#ffffff 0%,var(--cyan-tint) 55%,#fff5f0 100%);
  padding-top:calc(var(--announce-h) + var(--header-h) + clamp(2.5rem,6vw,5rem));
  padding-bottom:clamp(3rem,7vw,6rem);
  position:relative;
}
.hero-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.hero-wave{position:absolute;bottom:0;left:0;width:100%;height:clamp(40px, 8vw, 80px);display:block;z-index:5;}
.hero .hero-wave path:first-child{fill:var(--surface-soft);}
.hero-deco .cloud,.hero-deco .star,.hero-deco .glow{position:absolute;}
.hero-deco .glow{width:520px;height:520px;border-radius:50%;filter:blur(10px);opacity:.35;}
.hero-deco .glow-1{background:radial-gradient(circle,var(--kid-red),transparent 70%);top:-160px;left:-120px;}
.hero-deco .glow-2{background:radial-gradient(circle,var(--kid-blue),transparent 70%);bottom:-200px;right:-160px;}
.hero-deco .star{color:var(--gold-400);opacity:.9;animation:float 6s ease-in-out infinite;}
.hero-deco .star svg{width:100%;height:100%;}
.hero-deco .s1{width:22px;height:22px;top:14%;left:8%;animation-delay:0s;}
.hero-deco .s2{width:14px;height:14px;top:30%;left:46%;animation-delay:1.2s;color:var(--kid-green);}
.hero-deco .s3{width:26px;height:26px;top:66%;left:14%;animation-delay:.6s;color:var(--coral-500);}
.hero-deco .s4{width:18px;height:18px;top:20%;right:12%;animation-delay:1.8s;color:var(--kid-purple);}
.hero-deco .s5{width:12px;height:12px;top:78%;right:22%;animation-delay:.3s;color:var(--kid-blue);}
.hero-deco .cloud{opacity:.16;color:var(--kid-blue);animation:drift 18s linear infinite;}
.hero-deco .c1{width:180px;top:8%;left:60%;}
.hero-deco .c2{width:130px;top:72%;left:4%;animation-duration:24s;}
.hero-deco .c3{width:90px;top:18%;left:2%;animation-duration:20s;animation-delay:2s;}
.hero-deco .balloon,.hero-deco .kite{position:absolute;animation:float 6.5s ease-in-out infinite;opacity:.5;}
.hero-deco .balloon svg,.hero-deco .kite svg{width:100%;height:100%;}
.hero-deco .hb-1{width:30px;height:44px;top:58%;right:6%;color:var(--pink-400);animation-delay:.8s;}
.hero-deco .hk-1{width:32px;height:32px;top:12%;left:38%;color:var(--kid-orange);animation-delay:1.4s;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes drift{from{transform:translateX(-40px);}50%{transform:translateX(40px);}to{transform:translateX(-40px);}}

.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,3rem);align-items:center;}
.hero-copy{max-width:640px;}
.hero-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.3rem;}
.hero-pill{
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:999px;
  background:var(--white);border:1px solid var(--border-soft);color:var(--navy-800);box-shadow:var(--shadow-sm);
  font-size:.78rem;font-weight:700;font-family:var(--font-head);
}
.hero-title{font-size:clamp(2rem,4.6vw,3.5rem);color:var(--navy-950);margin-bottom:1.1rem;}
.hero-title .accent{color:var(--coral-600);}
.hero-title .accent-pink{color:var(--kid-blue);}
.hero-text{color:var(--navy-700);font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:52ch;margin-bottom:1.9rem;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.6rem;}
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,3vw,2.6rem);}
.hero-stat b{display:block;font-family:var(--font-head);font-size:1.5rem;color:var(--navy-950);}
.hero-stat span{color:var(--ink-500);font-size:.85rem;}

.hero-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.3rem;padding-block:1.5rem;}

/* Hero image carousel (Swiper "cards" effect) — a square, grab-and-drag
   stack of the real product photography, one card peeking out from behind
   the next. Matches Swiper's own cards-effect demo shape/config. */
.hero-carousel{width:min(360px,80%);aspect-ratio:1/1;}
.hero-carousel .swiper-slide{
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border-soft);background:var(--white);
}
/* Browsers make <img> natively draggable, which hijacks Swiper's own
   pointer-drag handling mid-gesture (you get a ghost drag-image instead of
   the slide following your cursor) — the "have to hold forever to drag"
   feeling. Killing native drag/selection on every slide image fixes it. */
.swiper-slide img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.hero-carousel .swiper-slide img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* Nav buttons pinned under the card stack instead of Swiper's default
   left/right edge arrows — "cards" effect centers a single focal slide, so
   flanking arrows would float off in empty space instead of reading as
   controls for it. */
.hero-carousel-nav{display:flex;align-items:center;gap:1rem;position:relative;z-index:6;}
.hero-nav-btn{
  width:44px;height:44px;border-radius:50%;background:var(--white);border:2px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;color:var(--navy-800);box-shadow:var(--shadow-md);
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.hero-nav-btn svg{width:18px;height:18px;}
.hero-nav-prev svg{transform:rotate(180deg);}
.hero-nav-btn:hover{background:var(--coral-500);border-color:var(--coral-500);color:var(--white);transform:scale(1.08);}
.hero-nav-btn:active{transform:scale(.94);}

.hero-float-chip{
  position:absolute;z-index:10;display:flex;align-items:center;gap:.55rem;padding:.65rem 1rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.96);color:var(--navy-900);box-shadow:var(--shadow-md);font-family:var(--font-head);
  font-size:.82rem;font-weight:700;animation:float 5s ease-in-out infinite;
}
.hero-float-chip svg{width:18px;height:18px;}
.chip-1{top:6%;left:-6%;animation-delay:.2s;}
.chip-2{bottom:10%;right:-8%;animation-delay:1s;color:var(--pink-400);}
.chip-1 svg{color:var(--cyan-400);}
.chip-2 svg{color:var(--pink-400);}
@media (max-width:1300px){
  .chip-1{left:2%;}
  .chip-2{right:2%;}
}

@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);}
}

/* Watch mockup component (used across product cards) */
.watch-mock{
  --w-tone:var(--coral-500);
  position:relative;width:min(230px,70%);aspect-ratio:.82/1;display:flex;flex-direction:column;align-items:center;
}
.hero-card .watch-mock{width:min(240px,72%);}
.watch-mock .lug{width:40%;height:9%;background:var(--navy-800);border-radius:10px 10px 0 0;}
.watch-mock .lug.bottom{border-radius:0 0 10px 10px;}
.watch-mock .case{
  width:100%;flex:1;border-radius:38% 38% 34% 34%/30% 30% 30% 30%;
  background:linear-gradient(155deg,#453a5c,#2e2740);
  border:6px solid #2e2740;
  display:flex;align-items:center;justify-content:center;position:relative;margin-block:-2%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.05);
}
.watch-mock .crown{position:absolute;right:-6px;top:38%;width:9px;height:14%;background:#2e2740;border-radius:3px;}
.watch-mock .dial{
  width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--w-tone) 55%,white 10%),color-mix(in srgb,var(--w-tone) 85%,#2e2740 30%));
  display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 4px 14px rgba(0,0,0,.35) inset,0 0 0 3px rgba(255,255,255,.15);
}
.watch-mock .dial svg{width:46%;height:46%;color:#2e2740;opacity:.9;}
.watch-mock .dial .tick{position:absolute;inset:6%;border-radius:50%;border:1.5px dashed rgba(255,255,255,.25);}
.watch-mock .brand-mark{position:absolute;bottom:14%;font-family:var(--font-head);font-size:.5rem;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.55);}

/* ---------- Category Strip ---------- */
.categories{background:var(--surface-soft);}
.cat-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr);}
.cat-card{
  background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:1.5rem 1.3rem;display:flex;flex-direction:column;gap:.8rem;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast);
  text-align:left;width:100%;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.cat-card.is-active{outline:2.5px solid var(--coral-500);outline-offset:-2px;}
.cat-icon{
  width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:var(--grad-cta);color:var(--navy-950);flex-shrink:0;
  transition:transform var(--dur-med) var(--ease);
}
.cat-icon svg{width:26px;height:26px;}
.cat-card h3{font-size:1.05rem;color:var(--navy-900);}
.cat-card p{font-size:.85rem;color:var(--ink-500);}

/* Photo-backed category tiles — real product/lifestyle photography instead
   of a flat icon card, so each collection reads as a distinct visual world. */
/* Redesigned collection cards with blob images and clean text */
.cat-card-blob {
  background: var(--white);
  border-radius: 30px;
  padding: 1.2rem;
  padding-bottom: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-shadow: var(--shadow-sm);
  border: 3px solid transparent;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
  text-align: center;
}

.cat-blob-img {
  width: 100%;
  aspect-ratio: 1/1;
  background-image: var(--cat-photo);
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform var(--dur-slow) var(--ease);
}

.cat-card-blob:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.cat-card-blob:hover .cat-blob-img {
  transform: scale(1.03);
}

/* Random fancy border radii for the blobs */
.cat-card-blob:nth-child(1) .cat-blob-img { border-radius: 60px 30px 60px 30px / 30px 60px 30px 60px; }
.cat-card-blob:nth-child(2) .cat-blob-img { border-radius: 30px 60px 30px 60px / 60px 30px 60px 30px; }
.cat-card-blob:nth-child(3) .cat-blob-img { border-radius: 50px 40px 60px 30px / 40px 50px 30px 60px; }
.cat-card-blob:nth-child(4) .cat-blob-img { border-radius: 30px 50px 40px 60px / 60px 40px 50px 30px; }
.cat-card-blob:nth-child(5) .cat-blob-img { border-radius: 40px 60px 30px 50px / 50px 30px 60px 40px; }

.cat-blob-img .cat-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 1rem; left: 1rem;
}
.cat-blob-img .cat-icon svg { width: 22px; height: 22px; color: var(--navy-900); }

/* Accent icon colors per card */
.cat-card-blob:nth-child(1) .cat-icon svg { color: var(--kid-blue); }
.cat-card-blob:nth-child(2) .cat-icon svg { color: var(--kid-red); }
.cat-card-blob:nth-child(3) .cat-icon svg { color: var(--kid-orange); }
.cat-card-blob:nth-child(4) .cat-icon svg { color: var(--kid-purple); }
.cat-card-blob:nth-child(5) .cat-icon svg { color: var(--gold-500); }

.cat-blob-text h3 { color: var(--navy-900); font-size: 1.15rem; margin-bottom: 0.4rem; }
.cat-blob-text p { color: var(--navy-600); font-size: 0.9rem; line-height: 1.4; }

/* The new FOCUS / ACTIVE state */
.cat-card-blob.is-active {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.08);
}

/* Candy borders for active state */
.cat-card-blob:nth-child(1).is-active { border-color: var(--kid-blue); }
.cat-card-blob:nth-child(2).is-active { border-color: var(--kid-red); }
.cat-card-blob:nth-child(3).is-active { border-color: var(--kid-orange); }
.cat-card-blob:nth-child(4).is-active { border-color: var(--kid-purple); }
.cat-card-blob:nth-child(5).is-active { border-color: var(--gold-400); }
@media (min-width:700px){.cat-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1100px){.cat-grid{grid-template-columns:repeat(5,1fr);}}

/* ---------- Products ---------- */
.products-toolbar{
  /* z-index (needs an explicit value, not just position:relative) keeps this
     — and the sort dropdown it contains — painting above #productGrid. Both
     get a `transform` from the shared .reveal.is-visible scroll-in animation,
     which creates a stacking context for each; without an explicit z-index
     here the two would tie and DOM order would put the grid (which comes
     right after) on top, burying the open dropdown under the product cards. */
  position:relative;z-index:5;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:2.4rem;
  padding:1.3rem 1.5rem;border-radius:var(--r-lg);border:2px dashed var(--border-soft);
  background:linear-gradient(120deg,var(--peach-tint) 0%,var(--white) 45%,var(--lavender-tint) 100%);
}
.toolbar-sparkle{position:absolute;opacity:.5;animation:float 6s ease-in-out infinite;pointer-events:none;}
.toolbar-sparkle svg{width:100%;height:100%;}
.ts-1{width:22px;height:22px;top:10%;left:2%;color:var(--kid-yellow);}
.ts-2{width:16px;height:16px;bottom:14%;right:3%;color:var(--pink-400);animation-delay:.9s;}

.filter-pills{display:flex;flex-wrap:wrap;gap:.65rem;position:relative;z-index:1;}
.pill{
  display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem .55rem .9rem;border-radius:999px;
  border:2px solid var(--border-soft);background:var(--surface-card);
  font-family:var(--font-head);font-weight:700;font-size:.88rem;color:var(--navy-700);
  transition:transform .3s cubic-bezier(1,-.4,0,1.4),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  box-shadow:0 3px 0 -1px rgba(0,0,0,.06);
}
.pill svg{width:16px;height:16px;flex-shrink:0;}
.pill:hover{border-color:var(--coral-500);color:var(--navy-900);transform:translateY(-3px) scale(1.04);}
.pill.is-active{background:var(--navy-900);border-color:var(--navy-900);color:var(--white);box-shadow:0 4px 0 -1px rgba(0,0,0,.18);}
/* Each filter gets its own brand color when active, instead of one flat
   "selected" state, so the pill row reads as colorful/playful rather than
   a plain admin-style filter bar. */
/* Matches the "Add to Cart" category colors exactly (boys=red, girls=pink,
   best=orange, new=blue, gift=green) so the filter row and the buttons it
   filters read as one consistent color language instead of two. */
.pill[data-filter="boys"].is-active{background:var(--kid-red);border-color:var(--coral-600);}
.pill[data-filter="girls"].is-active{background:var(--pink-400);border-color:#ff6f9e;}
.pill[data-filter="new"].is-active{background:var(--kid-blue);border-color:#0d6aa3;}
.pill[data-filter="best"].is-active{background:var(--kid-orange);border-color:#e6712a;}
.pill[data-filter="gift"].is-active{background:var(--kid-green);border-color:#4a7d15;}

.sort-wrap{display:flex;align-items:center;gap:.7rem;position:relative;z-index:2;}
.sort-label{font-family:var(--font-head);font-size:.85rem;color:var(--ink-500);font-weight:700;}

/* Fully custom "Sort by" dropdown — replaces the native <select> (which
   can't be consistently themed) with a themeable trigger + listbox, kept in
   sync with a hidden real <select> so existing sort logic still just works. */
.custom-select{position:relative;}
.custom-select-trigger{
  display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.1rem;border-radius:999px;
  border:2px solid var(--border-soft);background:var(--surface-card);
  font-family:var(--font-head);font-weight:700;font-size:.88rem;color:var(--navy-800);
  transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.custom-select-trigger:hover{border-color:var(--coral-500);transform:translateY(-2px);}
.custom-select-trigger[aria-expanded="true"]{border-color:var(--coral-500);box-shadow:0 0 0 4px rgba(255,89,94,.12);}
.sort-trigger-icon{width:15px;height:15px;color:var(--coral-500);flex-shrink:0;}
.sort-trigger-chevron{width:13px;height:13px;transform:rotate(90deg);transition:transform var(--dur-fast) var(--ease);flex-shrink:0;}
.custom-select-trigger[aria-expanded="true"] .sort-trigger-chevron{transform:rotate(-90deg);}
.custom-select-options{
  position:absolute;top:calc(100% + .6rem);right:0;min-width:220px;z-index:40;list-style:none;
  background:var(--white);border:2px solid var(--border-soft);border-radius:var(--r-md);padding:.5rem;
  box-shadow:var(--shadow-lg);
}
.custom-select-options[hidden]{display:none;}
.custom-select-options li{
  display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:var(--r-sm);cursor:pointer;
  font-size:.88rem;font-weight:600;color:var(--navy-700);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.custom-select-options li svg:first-child{width:15px;height:15px;color:var(--coral-500);flex-shrink:0;}
.custom-select-options li .opt-check{width:14px;height:14px;margin-left:auto;color:var(--kid-green);opacity:0;flex-shrink:0;}
.custom-select-options li.is-selected .opt-check{opacity:1;}
.custom-select-options li:hover,.custom-select-options li:focus-visible{background:var(--peach-tint);color:var(--navy-900);outline:none;}
.custom-select-options li.is-selected{background:var(--mint-tint);color:var(--navy-900);}

.product-grid{display:grid;gap:clamp(1.2rem,2vw,1.7rem);grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.product-card{
  background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease);
}
.product-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);}
.product-card[hidden]{display:none;}
.product-card.is-highlighted{animation:highlightPulse 1.6s var(--ease);}
@keyframes highlightPulse{
  0%{box-shadow:0 0 0 0 rgba(79,209,255,.6),var(--shadow-sm);}
  30%{box-shadow:0 0 0 8px rgba(79,209,255,0),var(--shadow-md);}
  100%{box-shadow:var(--shadow-sm);}
}
.product-media{
  position:relative;display:block;aspect-ratio:1/1;
  background:linear-gradient(160deg,var(--mint-tint),var(--peach-tint));overflow:hidden;
}
.product-media::after{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 15%,rgba(255,255,255,.5),transparent 55%);pointer-events:none;
}
.product-media img.watch-mock{width:100%;height:100%;object-fit:cover;object-position:center;}
.product-card:hover .watch-mock{transform:scale(1.06) rotate(-2deg);}
.watch-mock{transition:transform var(--dur-med) var(--ease);}
.badge-tag{
  position:absolute;top:.9rem;left:.9rem;padding:.32rem .75rem;border-radius:999px;font-size:.68rem;font-weight:800;
  font-family:var(--font-head);letter-spacing:.03em;text-transform:uppercase;z-index:2;color:var(--navy-950);
}
.badge-tag.new{background:linear-gradient(135deg,var(--coral-400),var(--coral-600));color:var(--white);}
.badge-tag.best{background:var(--yellow-300);}
.badge-tag.popular{background:var(--pink-400);color:var(--white);}
.badge-tag.gift{background:var(--cyan-400);}
.wishlist-btn{
  position:absolute;top:.8rem;right:.8rem;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.75);
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:var(--navy-800);z-index:2;
  transition:background var(--dur-fast),transform var(--dur-fast);box-shadow:var(--shadow-sm);
}
.wishlist-btn:hover{background:var(--white);transform:scale(1.06);}
.wishlist-btn svg{width:18px;height:18px;transition:fill var(--dur-fast),color var(--dur-fast);}
.wishlist-btn.is-active svg{fill:var(--pink-400);color:var(--pink-400);}

.product-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
/* Variant/name are free-text and vary in length per product — clamp each to
   one line with ellipsis so every card ends up the same height regardless
   of content, instead of some cards growing taller when text wraps. */
.product-variant{
  font-size:.78rem;color:var(--ink-500);font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.product-name{
  font-size:1.08rem;color:var(--navy-900);font-family:var(--font-head);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.product-name a{display:block;overflow:hidden;text-overflow:ellipsis;}
.product-rating{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-500);}
.product-price{display:flex;align-items:baseline;gap:.55rem;margin-top:.15rem;flex-wrap:wrap;}
.price-now{font-family:var(--font-head);font-size:1.3rem;color:var(--navy-900);font-weight:800;}
.price-old{font-size:.9rem;color:var(--ink-500);text-decoration:line-through;}
.price-discount{font-size:.74rem;font-weight:800;color:#0ea5a1;background:#e3fbf8;padding:.15rem .5rem;border-radius:999px;}
.add-cart-btn{
  position:relative;overflow:hidden;margin-top:.6rem;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1rem;
  border-radius:999px;border:3px solid #5fa018;background:linear-gradient(180deg,var(--kid-green),#4a7d15);color:var(--white);font-family:var(--font-head);font-weight:700;
  font-size:.92rem;text-shadow:1px 1px 0 rgba(0,0,0,.2);
  transition:transform .25s cubic-bezier(1,-.4,0,1.4),filter var(--dur-fast),box-shadow var(--dur-fast) var(--ease);
  box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 8px 18px rgba(138,201,38,.35);
}
.add-cart-btn svg{width:17px;height:17px;position:relative;z-index:1;}
.add-cart-btn:hover{transform:scale(.95);filter:brightness(.95);box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 12px 24px rgba(138,201,38,.45);}

/* Category-tinted "Add to Cart" so the button doubles as an at-a-glance
   category cue instead of every card looking identical: boys = red,
   girls = pink, best sellers = orange, new arrivals = blue, gift sets =
   green. Demographic tags (boys/girls) are declared after the
   merchandising ones (new/best/gift) so they win the tie on cards tagged
   with both, e.g. "best girls". */
.product-card[data-category~="new"] .add-cart-btn{
  border-color:#0d6aa3;background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);
  box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 8px 18px rgba(25,130,196,.35);
}
.product-card[data-category~="new"] .add-cart-btn:hover{box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 12px 24px rgba(25,130,196,.45);}
.product-card[data-category~="best"] .add-cart-btn{
  border-color:#e6712a;background:linear-gradient(180deg,var(--kid-orange),#e6712a);
  box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 8px 18px rgba(255,146,76,.35);
}
.product-card[data-category~="best"] .add-cart-btn:hover{box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 12px 24px rgba(255,146,76,.45);}
.product-card[data-category~="gift"] .add-cart-btn{
  border-color:#5fa018;background:linear-gradient(180deg,var(--kid-green),#4a7d15);
  box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 8px 18px rgba(138,201,38,.35);
}
.product-card[data-category~="boys"] .add-cart-btn{
  border-color:#0d6aa3;background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);
  box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 8px 18px rgba(13,106,163,.35);
}
.product-card[data-category~="boys"] .add-cart-btn:hover{box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 12px 24px rgba(13,106,163,.45);}
.product-card[data-category~="girls"] .add-cart-btn{
  border-color:#ff6f9e;background:linear-gradient(180deg,var(--pink-400),#ff6f9e);
  box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 8px 18px rgba(255,158,203,.4);
}
.product-card[data-category~="girls"] .add-cart-btn:hover{box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 12px 24px rgba(255,158,203,.5);}

.add-cart-btn.is-added,.product-card .add-cart-btn.is-added{background:#0d8f66;border-color:#0a6e4f;color:var(--white);box-shadow:none;}
.no-results{display:none;text-align:center;padding:3rem 1rem;color:var(--ink-500);}
.no-results.is-visible{display:block;}

/* ---------- Adventure Section ---------- */
.adventure{background:var(--lavender-tint);color:var(--navy-800);overflow:clip;isolation:isolate;}
.adventure-grid{display:grid;gap:clamp(2.2rem,4vw,3rem);align-items:center;}
.adventure-visual{position:relative;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(150deg,#fff3e6,#f5f0fd);min-height:340px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);}
.adventure-visual .orbit{position:absolute;border:1.5px dashed rgba(90,70,110,.18);border-radius:50%;}
.adventure-visual .orbit-1{width:78%;aspect-ratio:1;}
.adventure-visual .orbit-2{width:55%;aspect-ratio:1;}
.adventure-visual .scene-icon{
  position:absolute;width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);color:var(--navy-950);
}
.adventure-visual .scene-icon svg{width:26px;height:26px;}
.scene-1{background:var(--yellow-300);top:10%;left:14%;}
.scene-2{background:var(--cyan-400);top:18%;right:10%;}
.scene-3{background:var(--pink-400);bottom:14%;left:8%;color:var(--white);}
.scene-4{background:var(--coral-400);bottom:20%;right:16%;}
.adventure-visual .center-watch{position:relative;z-index:2;}
.adventure-features{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-block:1.8rem 2.2rem;}
.adv-feature{display:flex;gap:.75rem;align-items:flex-start;}
.adv-feature-icon{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--coral-500);box-shadow:var(--shadow-sm);}
.adv-feature:nth-child(2) .adv-feature-icon{color:#1fa891;}
.adv-feature:nth-child(3) .adv-feature-icon{color:#8b6bf0;}
.adv-feature:nth-child(4) .adv-feature-icon{color:#d69300;}
.adv-feature-icon svg{width:19px;height:19px;}
.adv-feature h4{font-size:.95rem;color:var(--navy-900);margin-bottom:.15rem;}
.adv-feature p{font-size:.82rem;color:var(--navy-700);}
@media (min-width:900px){.adventure-grid{grid-template-columns:.95fr 1.05fr;}}

/* ---------- Why TEGO ("Made For Real Kids") ---------- */
.why{
  position:relative;
  background:linear-gradient(180deg,var(--cream) 0%,var(--cyan-tint) 45%,var(--peach-tint) 100%);
}
.why-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.why-float{position:absolute;opacity:.28;animation:float 7s ease-in-out infinite;}
.why-float svg{width:100%;height:100%;}
.wf-1{width:46px;height:46px;top:6%;left:5%;color:var(--kid-red);}
.wf-2{width:34px;height:34px;top:70%;left:9%;color:var(--kid-purple);animation-delay:.6s;}
.wf-3{width:26px;height:26px;top:16%;left:88%;color:var(--kid-yellow);animation-delay:1.1s;}
.wf-4{width:56px;height:56px;top:82%;left:80%;color:var(--kid-blue);animation-delay:.3s;}
.wf-5{width:22px;height:22px;top:36%;left:48%;color:var(--kid-orange);animation-delay:1.6s;}
.wf-6{width:40px;height:40px;top:4%;left:60%;color:var(--kid-green);animation-delay:.9s;}
.wf-7{width:30px;height:30px;top:55%;left:94%;color:var(--kid-purple);animation-delay:2s;}
.wf-8{width:32px;height:44px;top:88%;left:40%;color:var(--kid-orange);animation-delay:1.4s;}
.wf-9{width:28px;height:28px;top:42%;left:2%;color:var(--kid-blue);animation-delay:.7s;}

.why-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:start;}
.why-visual{position:relative;padding:clamp(1.2rem,3vw,2.2rem);}
/* Left-side visual is now a Swiper "cube" effect image carousel instead of
   a single static photo — square-ish so each cube face rotates cleanly. */
.why-cube{width:100%;aspect-ratio:4/5;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);position:relative;z-index:2;border:6px solid var(--white);}
.why-cube .swiper-slide{border-radius:calc(var(--r-xl) - 6px);overflow:hidden;background:var(--white);}
.why-cube .swiper-slide img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* Organic morphing blob backdrop — turns the plain carousel into a playful
   "display case" instead of a flat rectangle floating on the section bg. */
.why-visual-blob{
  position:absolute;inset:.4rem;z-index:0;
  background:linear-gradient(135deg,var(--kid-yellow) 0%,var(--kid-orange) 45%,var(--pink-400) 100%);
  border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;
  opacity:.4;animation:blobMorph 12s ease-in-out infinite;
}
@keyframes blobMorph{
  0%,100%{border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;}
  50%{border-radius:58% 42% 40% 60% / 55% 60% 40% 45%;}
}

/* Dashed "orbit" ring with four little companions parked around the frame —
   the small-scene, storybook feel the flat swiper alone couldn't give. */
.why-visual-ring{
  position:absolute;top:.2rem;right:.2rem;bottom:.2rem;left:.2rem;z-index:1;
  border:3px dashed rgba(255,255,255,.85);border-radius:44% 56% 58% 42% / 46% 42% 58% 54%;pointer-events:none;
}
.ring-dot{
  position:absolute;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--white);box-shadow:var(--shadow-md),0 0 0 4px #fff;animation:float 6s ease-in-out infinite;z-index:3;
}
.ring-dot svg{width:20px;height:20px;}
.rd-1{top:-22px;left:16%;background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);}
.rd-2{top:12%;right:-22px;background:linear-gradient(180deg,var(--kid-purple),#4a3a72);animation-delay:.5s;}
.rd-3{bottom:-22px;right:18%;background:linear-gradient(180deg,var(--kid-green),#5fa018);animation-delay:1s;}
.rd-4{bottom:14%;left:-22px;background:linear-gradient(180deg,var(--kid-red),var(--coral-600));animation-delay:1.5s;}

/* Rosette "kid tested" sticker clipped to the top-left corner of the frame */
.why-visual-sticker{
  position:absolute;top:-6px;left:1.6rem;z-index:6;display:inline-flex;align-items:center;gap:.4rem;
  background:var(--coral-500);color:var(--white);font-family:var(--font-head);font-weight:800;font-size:.78rem;
  padding:.5rem 1.1rem;border-radius:999px;box-shadow:var(--shadow-md);transform:rotate(-6deg);
  border:3px solid var(--white);
}
.why-visual-sticker svg{width:14px;height:14px;}

.why-visual-badge{
  position:absolute;left:2rem;bottom:2rem;right:2rem;z-index:5;display:flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);color:var(--navy-900);
  padding:.8rem 1rem;border-radius:var(--r-md);font-family:var(--font-head);font-weight:700;font-size:.86rem;
  box-shadow:var(--shadow-md);pointer-events:none;
}
.why-visual-badge svg{width:18px;height:18px;color:var(--coral-500);flex-shrink:0;}

.why-stat-chip{
  position:absolute;z-index:6;display:flex;align-items:center;gap:.55rem;padding:.65rem 1rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.96);color:var(--navy-900);box-shadow:var(--shadow-md);font-family:var(--font-head);
  font-size:.82rem;font-weight:700;animation:float 5s ease-in-out infinite;
}
.why-stat-chip svg{width:18px;height:18px;}
.wsc-1{top:1rem;right:-.6rem;animation-delay:.3s;color:var(--coral-500);}
.wsc-2{bottom:5.4rem;left:-.6rem;animation-delay:1.1s;color:var(--kid-yellow);}
@media (max-width:520px){.wsc-1,.wsc-2{display:none;}}
@media (min-width:960px){
  .why-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;}
  /* Left visual stays pinned in view while the right-hand grid of feature
     cards scrolls past it — same sticky pattern as the PDP gallery
     (.pdp-gallery), offset below the fixed header. */
  .why-visual{position:sticky;top:calc(var(--header-h) + 1.5rem);}
}

.why-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(2,1fr);}
.why-card{
  position:relative;background:linear-gradient(160deg,#fff 55%,var(--peach-tint) 100%);
  border:3px solid var(--coral-500);border-radius:22px 22px 40px 22px;padding:1.7rem 1.4rem 1.5rem;overflow:hidden;
  box-shadow:0 6px 3px -3px rgba(0,0,0,.08),var(--shadow-sm);
  transition:transform .3s cubic-bezier(1,-.4,0,1.4),box-shadow var(--dur-fast) var(--ease);
  transform:rotate(-1.5deg);
}
.why-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:45%;border-radius:0 0 50% 50%/0 0 25% 25%;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.1) 70%);pointer-events:none;
}
.why-icon{
  position:relative;z-index:1;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(180deg,var(--kid-red),var(--coral-600));display:flex;align-items:center;justify-content:center;
  color:var(--white);margin-bottom:1rem;box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 4px #fff;
}
.why-icon svg{width:26px;height:26px;}
.why-card:nth-child(2n){transform:rotate(1.5deg);border-radius:40px 22px 22px 22px;border-color:var(--kid-blue);background:linear-gradient(160deg,#fff 55%,#eaf6fd 100%);}
.why-card:nth-child(2n) .why-icon{background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);color:var(--white);}
.why-card:nth-child(3n){transform:rotate(-1deg);border-radius:22px 40px 22px 22px;border-color:var(--kid-green);background:linear-gradient(160deg,#fff 55%,var(--mint-tint) 100%);}
.why-card:nth-child(3n) .why-icon{background:linear-gradient(180deg,var(--kid-green),#5fa018);color:var(--white);}
.why-card:nth-child(4n){transform:rotate(1deg);border-radius:22px 22px 22px 40px;border-color:#0ea5a1;background:linear-gradient(160deg,#fff 55%,#e3fbf7 100%);}
.why-card:nth-child(4n) .why-icon{background:linear-gradient(180deg,#22e5c9,#0ea5a1);color:var(--white);}
.why-card:nth-child(5n){transform:rotate(-2deg);border-color:var(--kid-yellow);background:linear-gradient(160deg,#fff 55%,#fff8e6 100%);}
.why-card:nth-child(5n) .why-icon{background:linear-gradient(180deg,var(--kid-yellow),var(--kid-orange));color:var(--navy-950);}
/* Must come after the :nth-child rotation rules above — equal specificity,
   so source order decides, and hover needs to win regardless of which
   nth-child bucket a given card falls into. */
.why-card:hover{transform:rotate(0deg) translateY(-8px) scale(1.06) !important;box-shadow:0 6px 3px -3px rgba(0,0,0,.14),var(--shadow-md);z-index:2;}
.why-card h3{position:relative;z-index:1;font-size:1.02rem;color:var(--navy-900);margin-bottom:.4rem;}
.why-card p{position:relative;z-index:1;font-size:.86rem;color:var(--navy-700);}
@media (prefers-reduced-motion: reduce){.why-float{animation:none;}}
@media (min-width:560px) and (max-width:959px){.why-grid{grid-template-columns:repeat(4,1fr);}}
@media (min-width:1300px){.why-grid{grid-template-columns:repeat(3,1fr);}}

@media (max-width:559px){
  .cat-grid, .why-grid {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding-top:1rem;
    margin-top:-1rem;
    padding-bottom:1.5rem;
    margin-inline:calc(-1 * clamp(1.1rem,4vw,2.5rem));
    padding-inline:clamp(1.1rem,4vw,2.5rem);
    scroll-padding-inline:clamp(1.1rem,4vw,2.5rem);
  }
  .cat-grid::-webkit-scrollbar, .why-grid::-webkit-scrollbar { display:none; }
  .cat-grid > *, .why-grid > * {
    flex:0 0 80%;
    max-width:280px;
    scroll-snap-align:start;
  }
}

/* ---------- Best Sellers (Swiper) ---------- */
.bestsellers{background:var(--surface-soft);}
.bestseller-carousel{
  position:relative;
  padding:14px 1.5rem 40px 1.5rem; 
  margin: 0 -1.5rem; /* Bleed perfectly to edges on mobile */
}
.bestseller-carousel .swiper-slide{width:264px;}
.bestseller-carousel .swiper-scrollbar{background:var(--border-soft);height:6px;bottom:18px;}
.bestseller-carousel .swiper-scrollbar-drag{background:var(--coral-500);}
.bestseller-carousel .swiper-button-prev, .bestseller-carousel .swiper-button-next,
.bestseller-carousel .swiper-button-prev, .bestseller-carousel .swiper-button-next,
.reels-nav-container .swiper-button-prev, .reels-nav-container .swiper-button-next {
  width:42px;height:42px;border-radius:50%;background:var(--white);border:2px solid var(--border-soft);
  color:var(--navy-800);box-shadow:var(--shadow-md);transition:transform var(--dur-fast),background var(--dur-fast),color var(--dur-fast);
  z-index: 10;
  margin-top: -30px;
}
.bestseller-carousel .swiper-button-prev:after, .bestseller-carousel .swiper-button-next:after,
.reels-nav-container .swiper-button-prev:after, .reels-nav-container .swiper-button-next:after {
  font-size:15px;font-weight:700;
}
.bestseller-carousel .swiper-button-prev:hover, .bestseller-carousel .swiper-button-next:hover,
.reels-nav-container .swiper-button-prev:hover, .reels-nav-container .swiper-button-next:hover {
  background:var(--coral-500);color:var(--white);transform:scale(1.08);
}

/* Symmetrical desktop layout */
@media (min-width: 641px) {
  .bestseller-carousel {
    margin: 0; /* Keep inside container */
    padding: 14px 4rem 40px 4rem; /* Symmetrical 64px padding for arrows */
  }
  .bestseller-carousel .swiper-button-prev {
    left: 0;
  }
  .bestseller-carousel .swiper-button-next {
    right: 0;
  }
}
@media (max-width:640px){.bestseller-carousel .swiper-button-prev,.bestseller-carousel .swiper-button-next{display:none;}}

/* ---------- Gift Banner ---------- */
.gift-banner{background:linear-gradient(120deg,#f5f0fd 0%,#fff0e6 100%);color:var(--navy-800);overflow:clip;isolation:isolate;}
.gift-grid{display:grid;gap:2.2rem;align-items:center;}
.gift-visual{display:flex;justify-content:center;position:relative;}
.gift-box{position:relative;width:min(260px,80%);aspect-ratio:1;}
.gift-box svg{width:100%;height:100%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));}
.gift-visual .spark{position:absolute;color:var(--yellow-300);animation:float 4.5s ease-in-out infinite;}
.gift-visual .spark svg{width:100%;height:100%;}
.spark-a{width:20px;height:20px;top:6%;left:10%;}
.spark-b{width:14px;height:14px;bottom:12%;right:14%;animation-delay:.7s;color:var(--pink-400);}
.gift-copy .btn{margin-top:.6rem;}
@media (min-width:900px){.gift-grid{grid-template-columns:1fr 1fr;}}

/* ---------- Offers ---------- */
.offers{
  position:relative;
  background:linear-gradient(180deg,var(--peach-tint) 0%,var(--cream) 45%,var(--cyan-tint) 100%);
}
.offers-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.offers-float{position:absolute;opacity:.28;animation:float 7s ease-in-out infinite;}
.offers-float svg{width:100%;height:100%;}
.of-1{width:40px;height:40px;top:8%;left:6%;color:var(--kid-red);}
.of-2{width:24px;height:24px;top:20%;left:90%;color:var(--kid-yellow);animation-delay:.5s;}
.of-3{width:30px;height:30px;top:75%;left:10%;color:var(--kid-purple);animation-delay:1s;}
.of-4{width:50px;height:50px;top:65%;left:88%;color:var(--kid-blue);animation-delay:.3s;}
.of-5{width:22px;height:22px;top:40%;left:48%;color:var(--kid-green);animation-delay:1.5s;}
.of-6{width:36px;height:36px;top:5%;left:45%;color:var(--kid-orange);animation-delay:.8s;}
.of-7{width:28px;height:38px;top:85%;left:50%;color:var(--kid-red);animation-delay:1.2s;}
.of-8{width:26px;height:26px;top:35%;left:6%;color:var(--kid-blue);animation-delay:.4s;}
.offers-grid{display:grid;gap:1.6rem;grid-template-columns:1fr;}
.offer-card{
  position:relative;background:linear-gradient(160deg,#fff 55%,var(--peach-tint) 100%);
  border:3px solid var(--coral-500);border-radius:22px 22px 40px 22px;padding:2rem 1.6rem 1.8rem;overflow:hidden;
  box-shadow:0 6px 3px -3px rgba(0,0,0,.08),var(--shadow-sm);
  transition:transform .3s cubic-bezier(1,-.4,0,1.4),box-shadow var(--dur-fast) var(--ease);
  transform:rotate(-1.5deg);
}
.offer-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:45%;border-radius:0 0 50% 50%/0 0 25% 25%;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.1) 70%);pointer-events:none;
}
.offer-watermark{
  position:absolute;right:-16px;bottom:-20px;width:130px;height:130px;color:var(--navy-950);opacity:.06;
  pointer-events:none;transform:rotate(-12deg);z-index:0;
}
.offer-icon{
  position:relative;z-index:1;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(180deg,var(--kid-red),var(--coral-600));display:flex;align-items:center;justify-content:center;
  color:var(--white);margin-bottom:1rem;box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 4px #fff;
}
.offer-icon svg{width:26px;height:26px;}
.offer-badge{
  position:relative;z-index:1;display:inline-block;padding:.3rem .8rem;border-radius:999px;margin-bottom:.7rem;
  font-family:var(--font-head);font-size:.7rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  background:var(--gold-400);color:var(--navy-950);transform:rotate(-3deg);border:2px dashed rgba(0,0,0,.15);
}
.offer-card h3{position:relative;z-index:1;font-size:1.15rem;color:var(--navy-900);margin-bottom:.5rem;}
.offer-card p{position:relative;z-index:1;font-size:.9rem;color:var(--navy-700);}
.offer-cta{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:.3rem;margin-top:1.1rem;
  font-family:var(--font-head);font-weight:700;font-size:.85rem;color:var(--coral-600);
}
.offer-cta svg{width:14px;height:14px;transition:transform var(--dur-fast) var(--ease);}
.offer-card:hover .offer-cta svg{transform:translateX(3px);}
.offer-card:nth-child(2){transform:rotate(1deg);border-color:var(--kid-blue);background:linear-gradient(160deg,#fff 55%,#eaf6fd 100%);}
.offer-card:nth-child(2) .offer-icon{background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);}
.offer-card:nth-child(2) .offer-cta{color:#0d6aa3;}
.offer-card:nth-child(3){transform:rotate(-1deg);border-color:var(--kid-green);background:linear-gradient(160deg,#fff 55%,var(--mint-tint) 100%);}
.offer-card:nth-child(3) .offer-icon{background:linear-gradient(180deg,var(--kid-green),#4a7d15);}
.offer-card:nth-child(3) .offer-cta{color:#4a7d15;}
/* Must come after the :nth-child rotation rules above — equal specificity
   (class + pseudo-class either way), so source order decides, and hover
   needs to win regardless of which nth-child bucket a card falls into
   (same fix already applied to .why-card for the same reason). */
.offer-card:hover{transform:rotate(0deg) translateY(-8px) scale(1.04);box-shadow:0 6px 3px -3px rgba(0,0,0,.14),var(--shadow-md);}
@media (min-width:700px){.offers-grid{grid-template-columns:repeat(3,1fr);}}
@media (prefers-reduced-motion: reduce){.offers-float{animation:none;}}

/* ---------- Benefits Strip ---------- */
.benefits-strip{padding-block:clamp(2.4rem,4vw,3.2rem);background:var(--cyan-tint);position:relative;}
.benefits-strip::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 12% 30%,rgba(255,89,94,.1),transparent 45%),
             radial-gradient(circle at 88% 70%,rgba(25,130,196,.1),transparent 45%);
  pointer-events:none;
}
.benefits-row{display:grid;gap:1.6rem;grid-template-columns:repeat(2,minmax(0,1fr));position:relative;}
.benefit-item{
  position:relative;display:flex;align-items:center;gap:.8rem;color:var(--navy-900);
  background:var(--white);border:2.5px solid var(--border-soft);border-radius:var(--r-md);
  padding:.9rem 1.1rem;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast);
}
.benefit-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--coral-400);}
.benefit-item .b-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--white);flex-shrink:0;transition:transform var(--dur-fast) var(--ease);box-shadow:0 3px 0 rgba(0,0,0,.15);}
.benefit-item:hover .b-icon{transform:translateY(-3px) scale(1.06);}
.benefit-item .b-icon svg{width:21px;height:21px;}
.b-icon.tone-red{background:linear-gradient(180deg,var(--kid-red),var(--coral-600));}
.b-icon.tone-yellow{background:linear-gradient(180deg,var(--kid-yellow),var(--kid-orange));}
.b-icon.tone-green{background:linear-gradient(180deg,var(--kid-green),#5fa018);}
.b-icon.tone-pink{background:linear-gradient(180deg,var(--kid-purple),#4a3568);}
.b-icon.tone-purple{background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);}
.benefit-item span{font-size:.86rem;font-weight:700;color:var(--navy-800);}
@media (min-width:700px){.benefits-row{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1100px){.benefits-row{grid-template-columns:repeat(5,minmax(0,1fr));}}

/* ---------- Newsletter ---------- */
.newsletter{
  background:radial-gradient(circle at 80% 15%,#fff 0%,var(--cyan-tint) 55%,#fff5f0 100%);
  color:var(--navy-900);text-align:center;position:relative;
}
.newsletter .section-title{color:var(--navy-950);}
.newsletter .section-sub{color:var(--navy-700);}
.grad-text{
  background:var(--grad-gold-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.newsletter-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.ndot{position:absolute;border-radius:50%;filter:blur(1px);opacity:.5;}
.nd-1{width:14px;height:14px;background:var(--red-400);top:18%;left:12%;}
.nd-2{width:10px;height:10px;background:var(--yellow-300);top:70%;left:8%;}
.nd-3{width:12px;height:12px;background:var(--cyan-400);top:24%;right:14%;}
.nd-4{width:9px;height:9px;background:var(--purple-400);bottom:16%;right:20%;}
.nstar{position:absolute;color:var(--yellow-300);animation:float 5.5s ease-in-out infinite;opacity:.8;}
.nstar svg{width:100%;height:100%;}
.ns-1{width:18px;height:18px;top:12%;right:30%;}
.ns-2{width:22px;height:22px;bottom:14%;left:20%;animation-delay:.8s;color:var(--pink-400);}
.ns-3{width:14px;height:14px;top:60%;right:8%;animation-delay:1.6s;color:var(--cyan-400);}
.ns-4{width:20px;height:28px;top:22%;left:6%;animation-delay:1.1s;color:var(--purple-400);}
.ns-5{width:18px;height:18px;bottom:22%;right:32%;animation-delay:.4s;color:var(--yellow-300);}
.newsletter-inner{max-width:600px;margin-inline:auto;position:relative;}
.newsletter-form{display:flex;flex-direction:column;gap:.8rem;margin-top:1.8rem;}
.newsletter-field{position:relative;display:flex;}
.newsletter-field input{
  flex:1;padding:1rem 1.2rem;border-radius:999px;border:2px solid var(--border-soft);
  background:var(--white);color:var(--navy-900);font-size:.95rem;box-shadow:var(--shadow-sm);
}
.newsletter-field input:focus{border-color:var(--coral-500);}
.newsletter-field input::placeholder{color:var(--ink-500);}
.newsletter-note{font-size:.78rem;color:var(--ink-500);margin-top:1rem;}
.newsletter-success{display:none;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem;color:#1fa891;font-weight:700;font-family:var(--font-head);}
.newsletter-success.is-visible{display:flex;}
.newsletter-success svg{width:20px;height:20px;}
@media (min-width:560px){
  .newsletter-form{flex-direction:row;}
  .newsletter-form .btn{flex-shrink:0;}
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  margin-top: -40px;
  z-index: 10;
}

.footer-wave {
  display: block;
  width: 100%;
  height: 60px;
  pointer-events: none;
  /* To ensure no 1px gaps between SVG and the div below it on some monitors */
  margin-bottom: -1px;
}

/* Belt divider is no longer an HTML element, it's part of the background */
.footer-belt-divider {
  display: none;
}

/* 
 * 🌌 Main Sky Footer Area
 */
.footer-main-area {
  position: relative;
  z-index: 5;
  padding-top: 2rem;
  background: linear-gradient(180deg, #f4faff 0%, #e6f0fa 100%);
}

.footer-belt-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  margin-top: 0; 
  pointer-events: none;
  width: 100%;
}
@media (min-width: 900px) {
  .footer-belt-wrap {
    margin-top: -108px;
  }
}
.footer-belt-img {
  width: 50%;
  height: auto;
  opacity: 0.9;
  flex-shrink: 0;
}
.footer-char-left,
.footer-char-right {
  width: 20%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.08));
}
.footer-char-left {
  animation: float 6s ease-in-out infinite;
  transform-origin: bottom center;
}
.footer-char-right {
  animation: float 7s ease-in-out infinite reverse;
  transform-origin: bottom center;
}
/* Corner Text Accents */
.footer-corner-text {
  position: absolute;
  top: 1.5rem;
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  z-index: 10;
  line-height: 1.1;
  text-align: center;
}
.fct-left {
  left: 3rem;
  color: var(--kid-blue);
  transform: rotate(-4deg);
}
.fct-right {
  right: 3rem;
  color: #ff5f8a; /* Pinkish */
  transform: rotate(3deg);
}
.footer-corner-text svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 900px) {
  .footer-corner-text {
    display: none;
  }
}

.text-red { color: var(--kid-red); }
.text-blue { color: var(--kid-blue); }
.handwritten { font-family: var(--font-hand); font-size: 1.8rem; line-height: 1; font-weight: 700; }

.footer-content-wrap {
  position: relative;
  z-index: 5;
  padding: 0 1.5rem 1rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 10;
}

/* Playful background stars via pseudo-elements */
.footer-grid::before {
  content: '✦';
  position: absolute;
  top: 5%;
  left: 20%;
  font-size: 32px;
  color: var(--kid-yellow);
  opacity: 0.8;
  animation: float-star-bg 4s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}
.footer-grid::after {
  content: '☁';
  position: absolute;
  bottom: 25%;
  right: 15%;
  font-size: 40px;
  color: rgba(255,255,255,0.8);
  animation: float-star-bg 6s ease-in-out infinite 1s;
  z-index: -1;
  pointer-events: none;
}
@keyframes float-star-bg {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-15px) rotate(10deg) scale(1.1); }
}

/* Premium glassmorphism cards for the columns removed to prevent cramping */
.footer-brand, .footer-col {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.footer-brand:hover, .footer-col:hover {
  transform: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.footer-brand .brand-logo{height:36px;margin-bottom:1.5rem;filter:none;}


.footer-brand p {
  max-width: 32ch;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 2rem;
  color: var(--navy-700); /* Slightly softer than pure black */
  line-height: 1.6;
}
.social-row { 
  display: flex; 
  gap: 1.2rem; 
  padding: 12px 0; /* Space for the protruding straps */
}
.social-row a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease);
  /* Pure SVG styling now */
  background: transparent;
  border: none;
  box-shadow: none;
}
.social-row a:hover { transform: translateY(-3px) scale(1.05); }

/* The Sleek SVG Watch UI */
.watch-icon-ui {
  width: 50px; /* Slightly larger to let strokes breathe */
  height: 50px;
  overflow: visible;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}
.watch-strap {
  fill: #cbd5e1;
}
.watch-crown-path {
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 2;
  stroke-linecap: round;
}
.watch-dial {
  stroke: #f1f5f9;
  stroke-width: 1.5;
}
.watch-hands-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-inner-use {
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}



.footer-col h4 {
  font-family: var(--font-hand); /* Fun handwritten font */
  font-size: 1.8rem;
  color: var(--navy-900);
  margin-bottom: 1.2rem;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: .6rem;
  transform: rotate(-2deg); /* slight playful tilt */
  white-space: nowrap; /* keep 'Customer Care' on one line! */
}
.footer-col-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--white);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.footer-col-icon svg { width: 20px; height: 20px; }
.footer-col-icon.tone-red { background: linear-gradient(180deg,var(--kid-red),var(--coral-600)); }
.footer-col-icon.tone-blue { background: linear-gradient(180deg,var(--kid-blue),#0d5f96); }
.footer-col-icon.tone-yellow { background: linear-gradient(180deg,var(--kid-yellow),var(--kid-orange)); color: var(--navy-950); }

.footer-col ul { display: flex; flex-direction: column; gap: 0.8rem; }
.footer-col a {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: #0d6aa3; /* Rich, deep kid-blue for a premium link look */
  transition: all var(--dur-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.footer-col a::before {
  content: '★';
  color: var(--kid-red);
  font-size: 0.8rem;
  opacity: 0;
  transform: scale(0) rotate(-180deg);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer-col a:hover {
  color: var(--navy-900);
  transform: translateX(6px);
}
.footer-col a:hover::before {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.footer-contact li {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  color: var(--navy-800);
  line-height: 1.5;
}
.footer-contact svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.footer-contact li:nth-child(1) svg { color: var(--kid-red); }
.footer-contact li:nth-child(2) svg { color: var(--kid-blue); }
.footer-contact li:nth-child(3) svg { color: var(--kid-yellow); }

.footer-divider {
  display: none;
}

.footer-bottom-wrap {
  position: relative;
  z-index: 13;
  background: #ffffff;
  padding: 1.8rem 1.5rem;
  color: var(--navy-900);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .footer-bottom { justify-content: center; text-align: center; }
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.footer-legal a { color: rgba(61, 52, 80, 0.7); font-weight: 500; transition: color var(--dur-fast); }
.footer-legal a:hover { color: var(--kid-blue); }
.footer-signature {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--navy-900);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transform: rotate(-2deg);
}
.sig-heart { color: #ff5f8a; filter: none; }

@media (min-width: 600px) and (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { 
    grid-column: 1 / -1; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-bottom: 2rem;
  }
  .footer-brand p { max-width: 60ch; }
}
@media (min-width: 1024px) {
  /* Give enough padding to clear characters, but not so much it squishes the columns */
  .footer-content-wrap { padding-left: 120px; padding-right: 120px; }
  /* Let columns breathe with wider gap and adjusted fractions */
  .footer-grid { grid-template-columns: 1.6fr 1fr 1.3fr 1.3fr; gap: 2rem; }
}


/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:1.6rem;translate:-50% 30px;background:var(--navy-900);color:var(--white);
  padding:.9rem 1.4rem;border-radius:var(--r-sm);display:flex;align-items:center;gap:.6rem;box-shadow:var(--shadow-lg);
  font-size:.9rem;font-weight:600;z-index:1200;opacity:0;pointer-events:none;transition:opacity var(--dur-med) var(--ease),translate var(--dur-med) var(--ease);
}
.toast.is-visible{opacity:1;translate:-50% 0;}
.toast svg{width:18px;height:18px;color:var(--cyan-400);flex-shrink:0;}

/* ---------- Responsive container helpers ---------- */
@media (max-width:420px){
  .hero-ctas .btn{width:100%;}
  .hero-ctas{flex-direction:column;}
}

/* =========================================================
   Announcement Marquee (scrolls away under the fixed header)
   ========================================================= */
.announce-bar{
  position:fixed;top:0;left:0;right:0;z-index:901;height:var(--announce-h);
  overflow:hidden;color:var(--navy-950);font-family:var(--font-head);font-weight:700;
  font-size:.78rem;letter-spacing:.02em;display:flex;align-items:center;
  background:linear-gradient(90deg,#ffd166,#ff9ecb,#7ef0d0,#a78bfa,#ffd166);
  background-size:300% 100%;animation:announceGradient 12s linear infinite;
  transition:transform var(--dur-med) var(--ease);
}
.announce-bar.is-hidden{transform:translateY(-100%);}
@keyframes announceGradient{0%{background-position:0% 0;}100%{background-position:300% 0;}}
.announce-track{display:flex;align-items:center;gap:.9rem;width:max-content;animation:marqueeLeft 26s linear infinite;padding-inline:.5rem;}
.announce-bar:hover .announce-track{animation-play-state:paused;}
.announce-item{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;}
.announce-item svg{width:14px;height:14px;flex-shrink:0;}
.announce-sep{opacity:.6;}
@keyframes marqueeLeft{from{transform:translateX(0);}to{transform:translateX(-100%);}}

/* =========================================================
   Brand Highlights Marquee (two rows, opposite directions)
   ========================================================= */
/* =========================================================
   Reels / Playtime Drops Section
   ========================================================= */
.reels-section {
  padding-block:clamp(4rem,8vw,6rem);
  background:var(--sky-tint); /* TEGO soft blue background */
  overflow:hidden;
}
.reels-carousel-wrap {
  position:relative;
  padding-left:max(1.5rem, calc((100vw - 1280px) / 2));
}
.reels-carousel {
  overflow:visible;
}
.reels-carousel .swiper-slide {
  height:auto;
}
.reel-card {
  position:relative;
  background:var(--white);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 12px 24px rgba(46,39,64,.08);
  transition:transform var(--dur-med) var(--ease);
  display:flex;flex-direction:column;
  height:100%;
}
.reel-card:hover {
  transform:translateY(-8px);
}
.reel-card::after{
  content:"";position:absolute;top:6px;left:6px;right:6px;bottom:6px;
  border:2px dashed var(--kid-blue);
  border-radius:18px;
  pointer-events:none;z-index:2;opacity:0.6;
}
.swiper-slide:nth-child(even) .reel-card::after{border-color:var(--kid-red);}
.swiper-slide:nth-child(3n) .reel-card::after{border-color:var(--kid-yellow);}

.reel-media-wrap {
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  background:var(--navy-100);
  overflow:hidden;
}
.reel-media {
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.reel-play-icon {
  position:absolute;
  top:12px;right:12px;
  width:32px;height:32px;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);
  z-index:1;
}
.reel-play-icon svg { width:16px;height:16px;fill:currentColor;stroke:none;margin-left:2px; }

.reel-info {
  padding:1rem;
  display:flex;
  align-items:center;
  gap:0.75rem;
  background:var(--white);
  position:relative;z-index:3;
  flex:1;
}
.reel-thumb {
  width:44px;height:44px;
  border-radius:10px;
  object-fit:cover;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  border:2px solid var(--white);
}
.reel-text {
  flex:1;
  min-width:0;
}
.reel-text h3 {
  font-family:var(--font-head);
  font-size:0.95rem;
  color:var(--navy-900);
  margin-bottom:0.2rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.reel-price {
  display:flex;
  align-items:baseline;
  gap:0.5rem;
}
.club-price {
  font-weight:800;
  font-size:0.85rem;
  color:var(--kid-green); 
}
.old-price {
  font-weight:600;
  font-size:0.75rem;
  color:var(--ink-400);
  text-decoration:line-through;
}

/* Reels Navigation Buttons */
.reels-nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  z-index: 10;
  position: relative;
}
.reels-prev, .reels-next {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  pointer-events: auto;
}
.swiper-button-disabled { opacity: 0; pointer-events: none; }

/* =========================================================
   Testimonials Section
   ========================================================= */
.testimonials-section{
  padding-block:clamp(4rem,8vw,6rem);
  background:var(--pink-tint);
  position:relative;overflow:hidden;
}
.testimonials-deco{
  position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;
}
.testi-float{position:absolute;opacity:.6;animation:subtleFloat 6s ease-in-out infinite;}
.testi-float.tf-1{width:30px;height:30px;top:15%;left:10%;color:var(--kid-yellow);}
.testi-float.tf-2{width:45px;height:45px;bottom:20%;left:5%;color:var(--kid-red);animation-delay:1s;}
.testi-float.tf-3{width:25px;height:25px;top:25%;right:8%;color:var(--kid-purple);animation-delay:2s;}

.testimonials-carousel-wrap{
  max-width:1200px;margin:0 auto;padding-inline:1.5rem;
  margin-top:clamp(2rem,4vw,3rem);position:relative;z-index:2;
}
.testimonials-carousel{
  padding:2rem 1rem 4rem;
  overflow:visible;
}
.testimonial-card{
  background:var(--white);
  padding:2rem;
  filter:drop-shadow(0 12px 24px rgba(46,39,64,.08));
  position:relative;
  height:100%;display:flex;flex-direction:column;
  transition:transform var(--dur-med) var(--ease);
  border-radius:40px 60px 40px 60px / 60px 40px 60px 40px;
}
.swiper-slide:nth-child(2n) .testimonial-card{border-radius:60px 40px 50px 30px / 40px 60px 30px 50px;}
.swiper-slide:nth-child(3n) .testimonial-card{border-radius:50px 30px 60px 40px / 30px 50px 40px 60px;}

.testimonial-card:hover{transform:translateY(-8px);}
.testimonial-card::after{
  content:"";position:absolute;top:8px;left:8px;right:8px;bottom:8px;
  border:2px dashed var(--kid-blue);
  pointer-events:none;z-index:1;opacity:0.4;
  border-radius:45px 55px 45px 55px / 55px 45px 55px 45px;
}
.swiper-slide:nth-child(2n) .testimonial-card::after{border-color:var(--kid-red);border-radius:55px 45px 45px 35px / 45px 55px 35px 45px;}
.swiper-slide:nth-child(3n) .testimonial-card::after{border-color:var(--kid-purple);border-radius:45px 35px 55px 45px / 35px 45px 45px 55px;}

.testi-stars{display:flex;gap:.3rem;margin-bottom:1rem;color:var(--kid-yellow);}
.testi-stars svg{width:18px;height:18px;fill:currentColor;stroke:none;}
.testi-quote{
  font-family:var(--font-head);font-size:1.15rem;line-height:1.4;
  color:var(--navy-900);margin-bottom:1.5rem;flex:1;
  position:relative;z-index:2;
}
.testi-author{
  display:flex;align-items:center;gap:1rem;
  position:relative;z-index:2;
}
.testi-avatar{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);font-family:var(--font-head);font-weight:700;font-size:1.2rem;
  flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.15);
  border-radius:30px 50px 30px 50px / 50px 30px 50px 30px;
}
.swiper-slide:nth-child(2n) .testi-avatar{border-radius:50px 30px 40px 60px / 30px 60px 40px 50px;}
.swiper-slide:nth-child(3n) .testi-avatar{border-radius:60px 40px 50px 30px / 40px 50px 30px 60px;}
.testi-author strong{display:block;font-size:.95rem;color:var(--navy-900);}
.testi-author span{display:block;font-size:.8rem;color:var(--ink-500);}

.testi-pagination{
  position:absolute;bottom:0;left:0;width:100%;
  display:flex;justify-content:center;gap:.6rem;
}
.testi-pagination .swiper-pagination-bullet{
  width:10px;height:10px;background:var(--navy-400);opacity:.3;
  transition:all var(--dur-fast) var(--ease);cursor:pointer;border-radius:50%;
}
.testi-pagination .swiper-pagination-bullet-active{
  opacity:1;background:var(--kid-blue);transform:scale(1.3);
}

/* =========================================================
   Headline Marquee — big slogan ticker for a bold, premium
   storefront moment between sections.
   The whole site is light/pastel throughout, so a black band (even
   the brand's own onyx black) read as an out-of-place dark patch —
   this uses the same warm coral→orange gradient as the primary CTA
   buttons instead, with solid white text for contrast, so it reads
   as a bright brand moment rather than a dark interruption. */
.headline-marquee{
  background:linear-gradient(120deg,var(--coral-500) 0%,var(--kid-orange) 50%,var(--coral-500) 100%);
  padding-block:clamp(.9rem,2vw,1.4rem);overflow:hidden;display:flex;
}
.headline-track{display:flex;flex-shrink:0;width:max-content;animation:marqueeLeft 26s linear infinite;}
.headline-marquee:hover .headline-track{animation-play-state:paused;}
.headline-item{
  display:inline-flex;align-items:center;gap:1.1rem;white-space:nowrap;padding-inline:1.4rem;
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.1rem,2.6vw,1.9rem);color:var(--white);
}
.headline-item svg{width:22px;height:22px;color:var(--gold-400);flex-shrink:0;}
@media (prefers-reduced-motion: reduce){.headline-track{animation:none;}}

/* ---------- Load More ---------- */
.load-more-wrap{display:flex;justify-content:center;margin-top:clamp(2rem,4vw,2.8rem);}
.load-more-btn{gap:.6rem;}
.load-more-btn svg{transition:transform var(--dur-fast) var(--ease);}
.load-more-btn.all-loaded svg{display:none;}
.load-more-wrap[hidden]{display:none;}

/* =========================================================
   Search Panel (slides in from the left)
   ========================================================= */
.search-panel{
  position:fixed;top:0;left:0;bottom:0;width:min(400px,100%);background:var(--white);z-index:1001;
  display:flex;flex-direction:column;box-shadow:20px 0 50px rgba(6,10,30,.35);
  transform:translateX(-100%);transition:transform var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
  visibility:hidden;
}
.search-panel.is-open{transform:translateX(0);visibility:visible;transition:transform var(--dur-med) var(--ease), visibility 0s linear 0s;}
.search-panel-head{display:flex;align-items:center;gap:.7rem;padding:1.3rem 1.4rem;border-bottom:1px solid var(--border-soft);flex-shrink:0;}
.search-panel-input-wrap{
  flex:1;display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-radius:999px;
  background:var(--surface-soft);border:2px solid var(--border-soft);
}
.search-panel-input-wrap:focus-within{border-color:var(--coral-500);}
.search-panel-input-wrap svg{width:18px;height:18px;color:var(--ink-500);flex-shrink:0;}
.search-panel-input-wrap input{flex:1;background:none;font-size:.92rem;color:var(--navy-900);outline:none;border:none;box-shadow:none;}
.search-panel-body{flex:1;overflow-y:auto;padding:1.4rem;}
.search-panel-label{font-family:var(--font-head);font-size:.8rem;font-weight:700;color:var(--navy-800);letter-spacing:.02em;text-transform:uppercase;margin-bottom:.8rem;}
#searchPopularSection h3:not(:first-child){margin-top:1.6rem;}
.search-tags{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.6rem;}
.search-tag{
  position:relative;overflow:hidden;padding:.55rem 1.1rem;border-radius:999px;border:3px solid transparent;
  font-family:var(--font-head);font-size:.82rem;font-weight:700;color:var(--white);text-shadow:1px 1px 0 rgba(0,0,0,.2);
  animation:candyBounce 4s ease-out infinite;
  transition:transform .25s cubic-bezier(1,-.4,0,1.4),filter var(--dur-fast);
}
.search-tag:hover,.search-tag:focus-visible{transform:scale(.94);filter:brightness(.92);animation-play-state:paused;}
.search-tag:nth-child(1){background:linear-gradient(180deg,var(--pink-400),#ff6f9e);border-color:#ff6f9e;}
.search-tag:nth-child(2){background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);border-color:#0d6aa3;}
.search-tag:nth-child(3){background:linear-gradient(180deg,var(--kid-orange),#e6712a);border-color:#e6712a;}
.search-tag:nth-child(4){background:linear-gradient(180deg,var(--kid-red),var(--coral-600));border-color:var(--coral-600);}
.search-tag:nth-child(5){background:linear-gradient(180deg,var(--kid-green),#5fa018);border-color:#5fa018;}
@media (prefers-reduced-motion: reduce){.search-tag{animation:none;}}
.search-popular-grid{display:flex;flex-direction:column;gap:.7rem;}
.search-popular-item{
  display:flex;align-items:center;gap:.8rem;padding:.6rem;border-radius:var(--r-md);border:2px solid transparent;
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.search-popular-item:hover{background:var(--surface-soft);border-color:var(--coral-400);}
.search-popular-item .swatch{width:52px;height:52px;border-radius:12px;flex-shrink:0;overflow:hidden;border:2px solid var(--border-soft);}
.search-popular-item .swatch img{width:100%;height:100%;object-fit:cover;object-position:center;}
.search-popular-item .info{flex:1;min-width:0;}
.search-popular-item h4{font-size:.86rem;color:var(--navy-900);font-family:var(--font-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-popular-item p{font-size:.8rem;font-weight:700;color:var(--ink-500);}
.search-empty{text-align:center;color:var(--ink-500);font-size:.88rem;padding:1.5rem 0;}
@media (max-width:480px){.search-panel{width:100%;}}

/* =========================================================
   Cart Drawer
   ========================================================= */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(6,10,26,.55);backdrop-filter:blur(2px);z-index:1000;
  opacity:0;transition:opacity var(--dur-med) var(--ease);
}
.drawer-overlay.is-visible{opacity:1;}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--white);z-index:1001;
  display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(6,10,30,.35);
  transform:translateX(100%);transition:transform var(--dur-med) var(--ease);
}
.cart-drawer.is-open{transform:translateX(0);}
.cart-drawer-head{
  display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.4rem;
  border-bottom:1px solid var(--border-soft);flex-shrink:0;
}
.cart-drawer-head h2{font-size:1.15rem;color:var(--navy-900);display:flex;align-items:center;gap:.5rem;}
.cart-drawer-head h2 svg{width:20px;height:20px;color:var(--coral-500);}
.cart-drawer-head .icon-btn{color:var(--navy-900);}
.cart-drawer-head .icon-btn:hover{background:var(--surface-soft);}
.cart-drawer-body{flex:1;overflow-y:auto;padding:1rem 1.4rem;display:flex;flex-direction:column;}

.cart-upsell{margin-top:auto;padding-top:1.4rem;border-top:1px dashed var(--border-soft);}
.cart-upsell h3{font-size:.85rem;font-family:var(--font-head);color:var(--navy-900);margin-bottom:.9rem;display:flex;align-items:center;gap:.4rem;}
.cart-upsell h3 svg{width:16px;height:16px;color:var(--pink-400);}
.upsell-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.upsell-card{border:1px solid var(--border-soft);border-radius:var(--r-sm);padding:.8rem;text-align:center;transition:border-color var(--dur-fast),transform var(--dur-fast);}
.upsell-card:hover{border-color:var(--coral-500);transform:translateY(-2px);}
.upsell-swatch{
  width:48px;height:48px;border-radius:50%;margin-inline:auto;display:block;overflow:hidden;
  border:2px solid var(--coral-400);margin-bottom:.5rem;
}
.upsell-swatch img{width:100%;height:100%;object-fit:cover;object-position:center;}
.upsell-card h4{font-size:.8rem;color:var(--navy-900);margin-bottom:.15rem;}
.upsell-card p{font-size:.78rem;color:var(--ink-500);font-weight:700;margin-bottom:.6rem;}
.upsell-add{
  position:relative;overflow:hidden;width:100%;padding:.45rem;border-radius:999px;
  background:linear-gradient(180deg,var(--kid-green),#4a7d15);color:var(--white);border:2px solid #5fa018;
  font-family:var(--font-head);font-weight:700;font-size:.76rem;display:flex;align-items:center;justify-content:center;gap:.3rem;
  text-shadow:1px 1px 0 rgba(0,0,0,.2);
  transition:transform .25s cubic-bezier(1,-.4,0,1.4),filter var(--dur-fast);
}
.upsell-add:hover{transform:scale(.94);filter:brightness(.95);}
.upsell-add svg{width:13px;height:13px;position:relative;z-index:1;}

.cart-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:3rem 1rem;color:var(--ink-500);}
.cart-empty-icon{width:64px;height:64px;border-radius:50%;background:var(--surface-soft);display:flex;align-items:center;justify-content:center;color:var(--ink-300);margin-bottom:.4rem;}
.cart-empty-icon svg{width:28px;height:28px;}
.cart-empty h3{color:var(--navy-900);font-size:1.05rem;}
.cart-empty .btn{margin-top:.8rem;}

.cart-item{display:flex;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--border-soft);}
.cart-item:last-child{border-bottom:none;}
.cart-item-swatch{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;overflow:hidden;
  border:2px solid var(--coral-400);box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.cart-item-swatch img{width:100%;height:100%;object-fit:cover;object-position:center;}
.cart-item-swatch svg{width:24px;height:24px;color:#2e2740;}
.qty-stepper.sm{padding:.1rem;}
.qty-stepper.sm button{width:22px;height:22px;}
.qty-stepper.sm span{min-width:1rem;font-size:.8rem;}
.cart-item-info{flex:1;min-width:0;}
.cart-item-info h4{font-size:.95rem;color:var(--navy-900);font-family:var(--font-head);}
.cart-item-info p{font-size:.78rem;color:var(--ink-500);margin-bottom:.4rem;}
.cart-item-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
.qty-stepper{display:flex;align-items:center;gap:.5rem;border:2px solid var(--coral-400);border-radius:999px;padding:.2rem;background:var(--peach-tint);}
.qty-stepper button{width:24px;height:24px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--coral-600);box-shadow:var(--shadow-sm);transition:transform var(--dur-fast),background var(--dur-fast);}
.qty-stepper button:hover{background:var(--coral-500);color:var(--white);transform:scale(1.1);}
.qty-stepper button svg{width:12px;height:12px;}
.qty-stepper span{min-width:1.2rem;text-align:center;font-weight:700;font-size:.85rem;}
.cart-item-price{font-family:var(--font-head);font-weight:800;color:var(--navy-900);font-size:.95rem;}
.cart-item-remove{color:var(--ink-500);transition:color var(--dur-fast);}
.wishlist-move-btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .75rem;border-radius:999px;
  background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);color:var(--white);border:2px solid #0d5f96;
  font-family:var(--font-head);font-weight:700;font-size:.72rem;text-shadow:1px 1px 0 rgba(0,0,0,.2);
  transition:transform .25s cubic-bezier(1,-.4,0,1.4),filter var(--dur-fast);
}
.wishlist-move-btn:hover{transform:scale(.94);filter:brightness(.92);}
.wishlist-move-btn svg{width:12px;height:12px;position:relative;z-index:1;}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;right:2.2rem;bottom:7rem;z-index:500;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:3px solid #5fa018;
  background:linear-gradient(180deg,var(--kid-green),#4a7d15);color:var(--white);box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 8px 18px rgba(138,201,38,.4);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.8);
  transition:opacity var(--dur-fast) var(--ease),visibility var(--dur-fast),transform .25s cubic-bezier(1,-.4,0,1.4);
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.back-to-top:hover{transform:translateY(-3px) scale(1.08);filter:brightness(.95);}
.back-to-top svg{width:20px;height:20px;transform:rotate(-90deg);}
@media (max-width:640px){.back-to-top{right:1.5rem;bottom:6rem;width:46px;height:46px;}.back-to-top svg{width:17px;height:17px;}}
.cart-item-remove:hover{color:var(--red-400);}
.cart-item-remove svg{width:16px;height:16px;}

.cart-drawer-foot{padding:1.2rem 1.4rem 1.5rem;border-top:1px solid var(--border-soft);flex-shrink:0;background:var(--surface-soft);}
.cart-subtotal-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-head);font-weight:800;font-size:1.15rem;color:var(--navy-900);margin-bottom:.5rem;}
.cart-note{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--ink-500);margin-bottom:1rem;}

/* =========================================================
   Checkout Modal
   ========================================================= */
.modal-overlay{
  position:fixed;inset:0;background:rgba(6,10,26,0);
  backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  z-index:1100;pointer-events:none;
  transition:background-color var(--dur-med) var(--ease),backdrop-filter var(--dur-med) var(--ease),-webkit-backdrop-filter var(--dur-med) var(--ease);
}
.modal-overlay.is-visible{
  background:rgba(6,10,26,.6);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  pointer-events:auto;
}
.checkout-modal{
  position:fixed;top:50%;left:50%;translate:-50% -46%;width:min(640px,92vw);max-height:88vh;
  background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:1101;
  display:flex;flex-direction:column;opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity var(--dur-med) var(--ease),translate var(--dur-med) var(--ease),visibility 0s linear var(--dur-med);
  overflow:hidden;
}
.checkout-modal.is-open{opacity:1;translate:-50% -50%;pointer-events:auto;visibility:visible;transition-delay:0s;}
.checkout-modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.6rem;border-bottom:1px solid var(--border-soft);flex-shrink:0;}
.checkout-modal-head h2{font-size:1.2rem;color:var(--navy-900);}
.checkout-modal-head .icon-btn{color:var(--navy-900);}
.checkout-modal-head .icon-btn:hover{background:var(--surface-soft);}

.checkout-steps{display:flex;gap:.5rem;padding:1rem 1.6rem;border-bottom:1px solid var(--border-soft);flex-shrink:0;overflow-x:auto;}
.checkout-steps .step{
  display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700;color:var(--ink-500);
  font-family:var(--font-head);white-space:nowrap;
}
.checkout-steps .step:not(:last-child)::after{content:"";width:20px;height:2px;background:var(--border-soft);margin-inline:.4rem;}
.step-dot{
  width:26px;height:26px;border-radius:50%;background:var(--surface-soft);border:1.5px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--ink-500);transition:all var(--dur-fast) var(--ease);
}
.step-dot svg{width:13px;height:13px;}
.checkout-steps .step.is-active .step-dot{background:var(--grad-cta);border-color:transparent;color:var(--navy-950);}
.checkout-steps .step.is-active{color:var(--navy-900);}
.checkout-steps .step.is-done .step-dot{background:#12b886;border-color:transparent;color:var(--white);}

.checkout-body{padding:1.6rem;overflow-y:auto;flex:1;min-height:0;}
.checkout-panel{display:none;}
.checkout-panel.is-active{display:block;animation:panelIn .35s var(--ease);}
@keyframes panelIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.checkout-panel h3{font-size:1.1rem;color:var(--navy-900);margin-bottom:1.1rem;}

.form-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;}
.form-field{display:flex;flex-direction:column;gap:.4rem;position:relative;}
.form-field label{font-size:.8rem;font-weight:700;color:var(--navy-700);font-family:var(--font-head);transition:color var(--dur-fast);}
.form-field input,
.form-field select,
.form-field textarea{
  padding:.8rem 1rem;border-radius:var(--r-sm);border:2px solid var(--border-soft);
  font-size:.92rem;font-family:var(--font-body);color:var(--navy-900);background:var(--surface-soft);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.form-field textarea{resize:vertical;min-height:120px;}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:var(--coral-500);background:var(--white);
  box-shadow:0 0 0 4px rgba(255,89,94,.14);outline:none;
}
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea{
  border-color:var(--kid-red);background:#fff3f3;
  animation:fieldShake .4s var(--ease);
}
.form-field.is-invalid label{color:var(--kid-red);}
.form-field.is-valid input,
.form-field.is-valid select,
.form-field.is-valid textarea{border-color:var(--kid-green);background:var(--mint-tint);}
.field-error-msg{display:flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;color:var(--kid-red);}
.field-error-msg svg{width:13px;height:13px;flex-shrink:0;}
@keyframes fieldShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}
@media (min-width:560px){
  .form-grid{grid-template-columns:1fr 1fr;}
  .span-2{grid-column:span 2;}
}
@media (prefers-reduced-motion: reduce){
  .form-field.is-invalid input,.form-field.is-invalid select,.form-field.is-invalid textarea{animation:none;}
}

.checkout-secure-note{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--ink-500);margin-top:1rem;background:var(--surface-soft);padding:.7rem .9rem;border-radius:var(--r-sm);}
.checkout-secure-note svg{width:16px;height:16px;flex-shrink:0;color:var(--sky-400);}

.checkout-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.6rem;}

.review-items{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.2rem;max-height:240px;overflow-y:auto;}
.review-item{display:flex;align-items:center;gap:.8rem;padding:.6rem;border:1px solid var(--border-soft);border-radius:var(--r-sm);}
.review-item .cart-item-swatch{width:42px;height:42px;}
.review-item .cart-item-swatch svg{width:18px;height:18px;}
.review-item-info{flex:1;min-width:0;}
.review-item-info h4{font-size:.88rem;color:var(--navy-900);}
.review-item-info span{font-size:.76rem;color:var(--ink-500);}
.review-item-price{font-weight:800;font-size:.88rem;color:var(--navy-900);font-family:var(--font-head);}

.review-summary{border-top:1px dashed var(--border-soft);padding-top:1rem;margin-bottom:1.2rem;}
.review-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--ink-500);padding-block:.3rem;}
.review-free{color:#0ea5a1;font-weight:700;}
.review-total{font-family:var(--font-head);font-weight:800;font-size:1.15rem;color:var(--navy-900);border-top:1px solid var(--border-soft);margin-top:.4rem;padding-top:.6rem;}
.review-address{background:var(--surface-soft);border-radius:var(--r-sm);padding:.9rem 1rem;font-size:.85rem;color:var(--navy-700);line-height:1.6;}

.checkout-success{text-align:center;position:relative;padding-block:1.5rem;}
.success-check{
  display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;
  background:linear-gradient(135deg,#3ac7ff,#12b886);color:var(--white);margin-bottom:1.2rem;
  animation:successPop .5s var(--ease);
}
.success-check svg{width:36px;height:36px;}
@keyframes successPop{0%{transform:scale(0);opacity:0;}70%{transform:scale(1.15);}100%{transform:scale(1);opacity:1;}}
.checkout-success h3{font-size:1.4rem;margin-bottom:.5rem;}
.checkout-success p{color:var(--ink-500);}
.order-number{margin-block:.8rem 1.4rem;font-size:.92rem;color:var(--navy-700);}
.order-number b{color:var(--navy-900);font-family:var(--font-head);}
.success-burst{position:absolute;inset:0;pointer-events:none;}
.sb{position:absolute;width:20px;height:20px;opacity:0;animation:burstOut 1.1s var(--ease) forwards;}
.sb-1{top:10%;left:20%;color:var(--yellow-300);animation-delay:.05s;}
.sb-2{top:8%;right:22%;color:var(--pink-400);animation-delay:.15s;}
.sb-3{top:40%;left:8%;color:var(--cyan-400);animation-delay:.25s;}
.sb-4{top:36%;right:10%;color:var(--purple-400);animation-delay:.35s;}
.sb-5{top:6%;left:48%;color:var(--red-400);animation-delay:.2s;}
@keyframes burstOut{
  0%{opacity:0;transform:translateY(0) scale(.4) rotate(0);}
  30%{opacity:1;}
  100%{opacity:0;transform:translateY(-40px) scale(1.2) rotate(45deg);}
}

@media (max-width:640px){
  .checkout-modal{width:100vw;max-height:100vh;height:100%;top:0;left:0;translate:0 0;border-radius:0;}
  .checkout-modal.is-open{translate:0 0;}
}

/* =========================================================
   Account — header popover + WhatsApp OTP login modal
   ========================================================= */
.account-wrap{position:relative;}
.account-dot{
  position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;
  background:var(--wa-green);border:2px solid var(--white);
}
.account-popover{
  position:absolute;top:calc(100% + 14px);right:0;
  background:var(--white);border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  width:260px;padding:1.4rem;z-index:900;
  display:flex;flex-direction:column;gap:1.2rem;
  opacity:0;transform:translateY(15px);pointer-events:none;visibility:hidden;
  transition:opacity var(--dur-med) var(--ease),transform var(--dur-med) var(--ease),visibility 0s linear var(--dur-med);
}
.account-popover.is-open{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;transition-delay:0s;}
.account-popover-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;}
.account-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--wa-green),var(--wa-green-dark));color:var(--white);
}
.account-avatar svg{width:20px;height:20px;}
.account-popover-name{font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--navy-900);}
.account-popover-phone{font-size:.78rem;color:var(--ink-500);}
.account-popover-logout{
  display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.7rem;border-radius:var(--r-sm);
  border:2px solid var(--border-soft);font-family:var(--font-head);font-weight:700;font-size:.85rem;color:var(--coral-600);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.account-popover-logout svg{width:14px;height:14px;}
.account-popover-logout:hover{background:#fff3f3;border-color:var(--coral-500);}

/* The login modal reuses .checkout-modal's whole shell (shape, overlay
   behavior, steps, candy background) — see the "Candy Panel Backgrounds"
   rule further down, which already targets .checkout-modal. */
.login-modal{width:min(460px,92vw);}
.login-title-icon{width:18px;height:18px;color:var(--gold-400);flex-shrink:0;}
.checkout-modal-head h2{display:flex;align-items:center;gap:.5rem;}

.login-panel h3{font-size:1.25rem;text-align:center;}
.login-sub{color:var(--navy-700);font-size:.9rem;text-align:center;margin-bottom:1.4rem;line-height:1.6;}

.login-hero{position:relative;display:flex;justify-content:center;margin-bottom:1.2rem;height:70px;}
.login-hero-sm{height:56px;margin-bottom:.8rem;}
.login-hero-badge{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--wa-green),var(--wa-green-dark));color:var(--white);
  box-shadow:0 6px 0 rgba(0,0,0,.12),0 10px 22px rgba(37,211,102,.35);animation:float 4s ease-in-out infinite;
}
.login-hero-badge svg{width:30px;height:30px;}
.login-hero-sm .login-hero-badge{width:52px;height:52px;}
.login-hero-sm .login-hero-badge svg{width:24px;height:24px;}
.login-hero-float{position:absolute;opacity:.7;animation:float 5s ease-in-out infinite;}
.login-hero-float svg{width:100%;height:100%;}
.lhf-1{width:20px;height:20px;top:-4px;left:26%;color:var(--kid-yellow);}
.lhf-2{width:22px;height:30px;bottom:-2px;right:24%;color:var(--pink-400);animation-delay:.6s;}
.lhf-3{width:26px;height:26px;top:4px;right:20%;color:var(--kid-blue);animation-delay:1.1s;}

.login-phone-row{display:flex;gap:.6rem;}
.login-country{
  display:flex;align-items:center;gap:.4rem;padding:.8rem 1rem;border-radius:var(--r-sm);border:2px solid var(--border-soft);
  background:var(--surface-soft);font-weight:700;font-family:var(--font-head);color:var(--navy-800);flex-shrink:0;
}
.login-phone-row input{flex:1;min-width:0;}
.login-actions{margin-top:1.4rem;}
.login-actions .btn-block{width:100%;}

.btn-whatsapp{
  background:linear-gradient(180deg,var(--wa-green),var(--wa-green-dark));border-color:var(--wa-green-dark);
  box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 8px 18px rgba(37,211,102,.4);
}

.otp-row{display:flex;gap:.6rem;justify-content:center;margin-bottom:1rem;}
.otp-box{
  width:44px;height:52px;text-align:center;font-size:1.3rem;font-weight:800;font-family:var(--font-head);
  border-radius:var(--r-sm);border:2px solid var(--border-soft);background:var(--surface-soft);color:var(--navy-900);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast);
}
.otp-box:focus{border-color:var(--coral-500);background:var(--white);box-shadow:0 0 0 4px rgba(255,89,94,.14);outline:none;}
.otp-box.is-filled{border-color:var(--kid-green);background:var(--mint-tint);}
.otp-error{
  display:flex;align-items:center;justify-content:center;gap:.4rem;color:var(--kid-red);font-size:.82rem;font-weight:700;
  text-align:center;margin-bottom:.8rem;
}
.otp-error svg{width:14px;height:14px;}
.otp-error[hidden]{display:none;}

.login-resend-row{display:flex;align-items:center;justify-content:center;gap:1rem;font-size:.82rem;margin-bottom:.4rem;flex-wrap:wrap;}
.login-resend{font-family:var(--font-head);font-weight:700;color:var(--ink-500);}
.login-resend:not(:disabled){color:var(--coral-600);}
.login-resend:not(:disabled):hover{text-decoration:underline;}
.login-change-number{font-family:var(--font-head);font-weight:700;color:var(--kid-blue);}
.login-change-number:hover{text-decoration:underline;}

@media (max-width:640px){.login-modal{width:100vw;}}

/* =========================================================
   Deal Countdown
   ========================================================= */
.deal-timer{
  padding-block:1.1rem;background:linear-gradient(90deg,var(--peach-tint),var(--lavender-tint));
  border-bottom:1px solid rgba(90,70,110,.08);
}
.deal-timer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.2rem 1.6rem;}
.deal-timer-copy{display:flex;align-items:center;gap:.7rem;color:var(--navy-800);}
.deal-timer-emoji{font-size:1.6rem;}
.deal-timer-title{font-family:var(--font-head);font-weight:600;font-size:.98rem;}
.deal-timer-sub{font-size:.78rem;color:var(--ink-500);}
.deal-timer-clock{display:flex;gap:.5rem;}
.deal-unit{
  display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.6);
  border-radius:var(--r-sm);padding:.4rem .65rem;min-width:48px;box-shadow:var(--shadow-sm);
}
.deal-unit span{font-family:var(--font-head);font-weight:700;font-size:1.1rem;color:var(--coral-600);}
.deal-unit small{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-500);}

/* =========================================================
   Recently Viewed
   ========================================================= */
.recently-viewed{padding-block:clamp(2.4rem,4vw,3.5rem);background:var(--surface-soft);}
.recently-viewed[hidden]{display:none;}
/* Swiper-powered — gives native drag-to-slide, a visible scrollbar and
   nav arrows for free; extra top/bottom padding so the card's own hover
   lift/scale never gets clipped by Swiper's overflow:hidden wrapper. */
.recent-carousel{padding:14px 4px 34px;}
.recent-carousel .swiper-slide{width:170px;}
.recent-card{
  display:block;height:100%;
  background:linear-gradient(160deg,#fff 55%,var(--surface-soft) 100%);border:2.5px solid var(--border-soft);border-radius:var(--r-md);
  padding:.9rem;text-align:center;transition:transform .25s cubic-bezier(1,-.4,0,1.4),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast);
}
.recent-card:hover{transform:translateY(-4px) scale(1.03);box-shadow:var(--shadow-sm);border-color:var(--coral-400);}
.recent-photo{
  width:72px;height:72px;border-radius:50%;margin-inline:auto;display:block;overflow:hidden;
  border:2.5px solid var(--coral-400);margin-bottom:.6rem;box-shadow:var(--shadow-sm);
}
.recent-photo img{width:100%;height:100%;object-fit:cover;object-position:center;}
.recent-card h4{font-size:.85rem;color:var(--navy-900);margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.recent-card p{font-size:.8rem;font-weight:700;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.recent-carousel .swiper-scrollbar{background:var(--border-soft);height:5px;bottom:16px;}
.recent-carousel .swiper-scrollbar-drag{background:var(--coral-500);}
.recent-carousel .swiper-button-prev,.recent-carousel .swiper-button-next{
  width:36px;height:36px;border-radius:50%;background:var(--white);border:2px solid var(--border-soft);
  color:var(--navy-800);box-shadow:var(--shadow-sm);transition:transform var(--dur-fast),background var(--dur-fast),color var(--dur-fast);
}
.recent-carousel .swiper-button-prev:after,.recent-carousel .swiper-button-next:after{font-size:13px;font-weight:700;}
.recent-carousel .swiper-button-prev:hover,.recent-carousel .swiper-button-next:hover{background:var(--coral-500);color:var(--white);transform:scale(1.08);}
@media (max-width:640px){.recent-carousel .swiper-button-prev,.recent-carousel .swiper-button-next{display:none;}}

/* =========================================================
   Media Placeholders (photo / video)
   ========================================================= */
.media-placeholder{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  background:linear-gradient(160deg,var(--navy-850),var(--navy-900));border:1.5px dashed rgba(255,255,255,.22);
  border-radius:var(--r-lg);color:var(--ink-300);text-align:center;overflow:hidden;
}
.media-placeholder .media-label{font-size:.8rem;font-weight:600;padding-inline:1rem;line-height:1.5;}
.media-placeholder .media-label small{display:block;font-weight:400;color:var(--ink-500);font-size:.72rem;margin-top:.2rem;}
.media-play{
  width:60px;height:60px;border-radius:50%;background:var(--grad-cta);color:var(--navy-950);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(255,107,91,.4);
  transition:transform var(--dur-fast) var(--ease);
}
.media-play svg{width:24px;height:24px;margin-left:2px;}
.media-play.sm{width:38px;height:38px;}
.media-play.sm svg{width:16px;height:16px;}
.media-play.lg{width:84px;height:84px;}
.media-play.lg svg{width:34px;height:34px;}
.video-placeholder:hover .media-play{transform:scale(1.08);}
.photo-placeholder svg{width:28px;height:28px;color:var(--ink-500);}

.proof-grid{display:grid;gap:1.4rem;margin-bottom:1.6rem;}
.proof-video{width:100%;aspect-ratio:16/10;cursor:pointer;}
.testimonial-stack{display:flex;flex-direction:column;gap:1rem;}
.testimonial-card{
  position:relative;background:linear-gradient(160deg,#fff 60%,var(--peach-tint) 100%);
  border:3px solid var(--coral-500);border-radius:var(--r-lg);overflow:hidden;
  padding:1.3rem;box-shadow:0 5px 3px -3px rgba(0,0,0,.08),var(--shadow-sm);
  transition:transform .25s cubic-bezier(1,-.4,0,1.4),box-shadow var(--dur-fast) var(--ease);
}
.testimonial-card:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 5px 3px -3px rgba(0,0,0,.12),var(--shadow-md);}
.testimonial-card:nth-child(2n){border-color:var(--kid-blue);background:linear-gradient(160deg,#fff 60%,#eaf6fd 100%);}
.testimonial-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem;}
.avatar-placeholder{
  width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,var(--kid-red),var(--coral-600));
  color:var(--white);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 0 rgba(0,0,0,.15);
}
.avatar-placeholder svg{width:20px;height:20px;}
.avatar-placeholder.tone-b{background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);}
.testimonial-name{font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--navy-900);}
.testimonial-card p{font-size:.9rem;color:var(--navy-700);line-height:1.6;}
@media (min-width:900px){.proof-grid{grid-template-columns:1.3fr 1fr;align-items:stretch;}}

.ugc-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;}
.ugc-strip .media-placeholder{aspect-ratio:1;border-radius:var(--r-md);}
@media (min-width:700px){.ugc-strip{grid-template-columns:repeat(6,1fr);}}

/* Video lightbox */
.video-lightbox{
  position:fixed;top:50%;left:50%;translate:-50% -46%;width:min(760px,92vw);z-index:1101;
  opacity:0;pointer-events:none;transition:opacity var(--dur-med) var(--ease),translate var(--dur-med) var(--ease);
}
.video-lightbox.is-open{opacity:1;translate:-50% -50%;pointer-events:auto;}
.lightbox-video{width:100%;aspect-ratio:16/9;border-radius:var(--r-lg);}
.lightbox-close{
  position:absolute;top:-52px;right:0;background:rgba(255,255,255,.12);color:var(--white);
}
.lightbox-close:hover{background:rgba(255,255,255,.22);}

/* =========================================================
   Spin & Win
   ========================================================= */
.spin-trigger{
  position:fixed;left:1.2rem;bottom:1.2rem;z-index:850;display:flex;align-items:center;gap:.5rem;
  padding:.8rem 1.3rem .8rem 1rem;border-radius:999px;background:var(--grad-cta);color:var(--navy-950);
  font-family:var(--font-head);font-weight:700;font-size:.9rem;box-shadow:var(--shadow-lg);
  opacity:0;translate:-16px 0;pointer-events:none;transition:opacity .5s var(--ease),translate .5s var(--ease),transform var(--dur-fast) var(--ease);
  animation:spinTriggerBob 2.6s ease-in-out infinite;
}
.spin-trigger.is-visible{opacity:1;translate:0 0;pointer-events:auto;}
.spin-trigger:hover{transform:translateY(-3px);}
.spin-trigger-emoji{font-size:1.2rem;}
@keyframes spinTriggerBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@media (max-width:640px){.spin-trigger{left:.8rem;bottom:.8rem;padding:.7rem 1.1rem .7rem .85rem;font-size:.82rem;}}

.spin-modal{
  position:fixed;top:50%;left:50%;translate:-50% -46%;width:min(420px,92vw);max-height:90vh;overflow-y:auto;
  background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);z-index:1101;
  padding:2rem 1.8rem;text-align:center;opacity:0;pointer-events:none;
  transition:opacity var(--dur-med) var(--ease),translate var(--dur-med) var(--ease);
}
.spin-modal.is-open{opacity:1;translate:-50% -50%;pointer-events:auto;}
.spin-close{position:absolute;top:1rem;right:1rem;z-index:3;color:var(--navy-900);}
.spin-close:hover{background:var(--surface-soft);}
.spin-content h2,.spin-result h2{font-size:1.3rem;color:var(--navy-900);margin-bottom:.4rem;}
.spin-content p{color:var(--ink-500);font-size:.9rem;margin-bottom:1.4rem;}

.wheel-wrap{position:relative;width:min(240px,70vw);aspect-ratio:1;margin-inline:auto 1.6rem;}
.wheel-pointer{
  position:absolute;top:-6px;left:50%;translate:-50% 0;z-index:2;width:0;height:0;
  border-left:12px solid transparent;border-right:12px solid transparent;border-top:20px solid var(--coral-600);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.wheel{
  position:relative;width:100%;height:100%;border-radius:50%;
  background:conic-gradient(var(--coral-500) 0deg 60deg,var(--gold-400) 60deg 120deg,var(--cyan-400) 120deg 180deg,var(--purple-400) 180deg 240deg,var(--pink-400) 240deg 300deg,#7ef0c8 300deg 360deg);
  border:6px solid var(--navy-900);box-shadow:var(--shadow-md);
  transition:transform 4.2s cubic-bezier(.12,.72,.14,1);
}
.wheel::after{
  content:"";position:absolute;inset:0;margin:auto;width:20%;height:20%;border-radius:50%;
  background:var(--navy-900);box-shadow:0 0 0 4px var(--white);
}
.wheel-seg{
  position:absolute;width:68px;
  font-family:var(--font-head);font-weight:700;font-size:.72rem;color:var(--navy-950);
  text-align:center;transform:translate(-50%,-50%);
}
/* Positioned at explicit x/y around the wheel's center (not rotated) so
   every label reads horizontally — a rotate+translate label reads upside
   down on the top half of the circle, which is worse than "not radial". */
.wheel-seg.seg-0{left:calc(50% + 33px);top:calc(50% - 56px);}
.wheel-seg.seg-1{left:calc(50% + 65px);top:50%;}
.wheel-seg.seg-2{left:calc(50% + 33px);top:calc(50% + 56px);}
.wheel-seg.seg-3{left:calc(50% - 33px);top:calc(50% + 56px);}
.wheel-seg.seg-4{left:calc(50% - 65px);top:50%;}
.wheel-seg.seg-5{left:calc(50% - 33px);top:calc(50% - 56px);}

.spin-result .success-check{
  display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-400),var(--coral-600));color:var(--white);margin-bottom:1rem;
  animation:successPop .5s var(--ease);position:relative;z-index:1;
}
.spin-result .success-check svg{width:30px;height:30px;}
.spin-result{position:relative;}
.coupon-code{
  display:flex;align-items:center;justify-content:center;gap:.8rem;background:var(--surface-soft);
  border:1.5px dashed var(--border-soft);border-radius:var(--r-sm);padding:.7rem 1rem;margin-bottom:1.4rem;
}
.coupon-code span{font-family:var(--font-head);font-weight:800;letter-spacing:.06em;color:var(--navy-900);font-size:1.05rem;}
.coupon-code button.is-copied{background:#12b886;}

/* =========================================================
   Product Detail Page
   ========================================================= */
.pdp-hero{padding-top:calc(var(--announce-h) + var(--header-h) + 1.6rem);padding-bottom:clamp(3rem,8vw,6rem);position:relative;}
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-500);
  margin-bottom:1.8rem;font-weight:600;
}
.breadcrumb a{display:inline-flex;align-items:center;gap:.3rem;transition:color var(--dur-fast);}
.breadcrumb a:hover{color:var(--coral-600);}
.breadcrumb svg{width:13px;height:13px;}
.breadcrumb-current{color:var(--navy-800);}

.pdp-wrap{display:grid;gap:clamp(2rem,4vw,3.2rem);padding-bottom:clamp(3rem,6vw,4.5rem);}
@media (min-width:960px){
  .pdp-wrap{grid-template-columns:1.05fr 1fr;align-items:start;}
  .pdp-gallery{position:sticky;top:calc(var(--header-h) + 1.5rem);}
}

.pdp-gallery{display:flex;flex-direction:column;gap:1rem;}
.pdp-main-viewer{
  position:relative;aspect-ratio:1/1;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(160deg,var(--mint-tint),var(--peach-tint));
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
}
.pdp-slide{position:absolute;inset:0;display:none;align-items:center;justify-content:center;border-radius:0;width:100%;height:100%;}
.pdp-slide.is-active{display:flex;animation:panelIn .4s var(--ease);}
.pdp-slide.media-placeholder{border:none;background:linear-gradient(160deg,var(--navy-850),var(--navy-900));}
.pdp-main-viewer img.watch-mock{width:100%;height:100%;object-fit:cover;object-position:center;}
.pdp-thumbs{display:flex;gap:.7rem;flex-wrap:wrap;}
.pdp-thumb{
  width:64px;height:64px;border-radius:var(--r-md);border:2px solid var(--border-soft);background:var(--surface-card);
  display:flex;align-items:center;justify-content:center;color:var(--ink-500);transition:border-color var(--dur-fast),transform var(--dur-fast);flex-shrink:0;
}
.pdp-thumb:hover{transform:translateY(-2px);}
.pdp-thumb.is-active{border-color:var(--coral-500);color:var(--coral-600);}
.pdp-thumb svg{width:22px;height:22px;}
.pdp-thumb-video{background:var(--navy-900);color:var(--white);border-color:var(--navy-900);}
.pdp-thumb-swatch{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--sw-tone) 55%,white 10%),color-mix(in srgb,var(--sw-tone) 85%,#2e2740 30%));
}
.pdp-thumb-swatch svg{width:18px;height:18px;color:#2e2740;}

.pdp-info{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;}
.pdp-badge{position:static;margin-bottom:.6rem;}
.pdp-title{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--navy-900);margin-bottom:.5rem;}
.pdp-rating-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;font-size:.88rem;}
.pdp-rating-row a{color:var(--ink-500);text-decoration:underline;text-underline-offset:2px;}
.pdp-rating-row a:hover{color:var(--coral-600);}
.pdp-tagline{color:var(--navy-700);font-size:1.02rem;margin-bottom:.5rem;max-width:48ch;}
.pdp-info .product-variant{margin-bottom:1.1rem;}

.pdp-price-row{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.7rem;}
.pdp-price-row .price-now{font-size:2rem;}
.pdp-club-price{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--mint-tint);color:#1fa891;
  font-weight:700;font-size:.85rem;padding:.5rem .9rem;border-radius:var(--r-sm);margin-bottom:1.6rem;
  border:1px solid rgba(31,168,145,.2);
}

.pdp-qty-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1.6rem;}
.pdp-qty-label{font-weight:700;font-size:.88rem;color:var(--navy-800);}
.pdp-stock{font-size:.85rem;color:var(--ink-500);}

.pdp-actions{display:flex;gap:.8rem;width:100%;margin-bottom:.9rem;}
.pdp-add-btn{
  position:relative;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem 1.5rem;
  border-radius:999px;border:3px solid #5fa018;background:linear-gradient(180deg,var(--kid-green),#4a7d15);color:var(--white);font-family:var(--font-head);
  text-shadow:1px 1px 0 rgba(0,0,0,.2);
  font-weight:700;font-size:1rem;box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 10px 24px rgba(138,201,38,.4);
  transition:transform .25s cubic-bezier(1,-.4,0,1.4),filter var(--dur-fast),box-shadow var(--dur-fast);
}
.pdp-add-btn svg{width:19px;height:19px;flex-shrink:0;position:relative;z-index:1;}
.pdp-add-btn:hover{transform:scale(.96);filter:brightness(.95);box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 14px 28px rgba(138,201,38,.5);}
.pdp-add-btn.is-added{background:#0d8f66;border-color:#0a6e4f;color:var(--white);}
.pdp-wishlist-btn{
  width:54px;height:54px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--border-soft);background:var(--surface-card);
  display:flex;align-items:center;justify-content:center;color:var(--navy-800);transition:all var(--dur-fast);
}
.pdp-wishlist-btn:hover{border-color:var(--coral-500);color:var(--coral-500);transform:translateY(-2px);}
.pdp-wishlist-btn svg{width:22px;height:22px;}
.pdp-wishlist-btn.is-active svg{fill:var(--coral-500);color:var(--coral-500);}
.pdp-buy-btn{
  position:relative;overflow:hidden;width:100%;padding:1rem 1.5rem;border-radius:999px;
  border:3px solid var(--navy-950);background:linear-gradient(180deg,var(--kid-blue),#0d6aa3);color:var(--white);
  text-shadow:1px 2px 0 rgba(0,0,0,.25);
  font-family:var(--font-head);font-weight:700;font-size:1rem;margin-bottom:1.2rem;
  box-shadow:0 6px 3px -3px rgba(0,0,0,.3),0 10px 24px rgba(25,130,196,.35);
  transition:transform .25s cubic-bezier(1,-.4,0,1.4),filter var(--dur-fast);
}
.pdp-buy-btn:hover{transform:scale(.96);filter:brightness(.92);}

.pdp-meta-row{display:flex;gap:1.5rem;flex-wrap:wrap;}
.pdp-meta-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--ink-500);transition:color var(--dur-fast);}
.pdp-meta-link:hover{color:var(--coral-600);}
.pdp-meta-link svg{width:16px;height:16px;}

.pdp-section-block{padding-block:clamp(2.4rem,4vw,3.5rem);}
.pdp-detail-grid{display:grid;gap:2.5rem;}
@media (min-width:800px){.pdp-detail-grid{grid-template-columns:1.2fr 1fr;}}
.pdp-description{color:var(--navy-700);line-height:1.75;max-width:62ch;margin-top:1rem;}
.spec-grid{display:grid;gap:0;margin-top:1rem;border:3px solid var(--kid-blue);border-radius:var(--r-md);overflow:hidden;box-shadow:0 5px 3px -3px rgba(0,0,0,.08);}
.spec-row{display:grid;grid-template-columns:1fr 1.4fr;font-size:.88rem;}
.spec-row:nth-child(even){background:var(--cyan-tint);}
.spec-row dt{padding:.75rem 1rem;font-weight:700;color:var(--navy-800);border-right:1px solid var(--border-soft);}
.spec-row dd{padding:.75rem 1rem;color:var(--navy-700);}
.pdp-reviews-grid{display:grid;gap:1.2rem;margin-top:1.5rem;}
@media (min-width:700px){.pdp-reviews-grid{grid-template-columns:repeat(2,1fr);}}

.product-name .pdp-link{transition:color var(--dur-fast);}
.product-name .pdp-link:hover{color:var(--coral-600);}
.product-media{cursor:pointer;}

/* =========================================================
   Adventure Gallery — Swiper "coverflow" effect
   ========================================================= */
.coverflow-section{padding-block:clamp(3rem,5vw,5rem);background:var(--surface-soft);overflow:hidden;}
.coverflow-carousel{width:100%;padding-block:2.5rem;opacity:0;transition:opacity .4s var(--ease);}
.coverflow-carousel.swiper-initialized{opacity:1;}
.coverflow-carousel .swiper-slide{
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius:var(--r-xl);overflow:hidden;
  border:3px solid var(--white);box-shadow:var(--shadow-lg);
  position: relative;
}
.coverflow-carousel .swiper-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.60);
  opacity: 1;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.coverflow-carousel .swiper-slide-active::after {
  opacity: 0;
}
.coverflow-carousel .swiper-carousel-animate-opacity {
  width: 100%;
  height: 100%;
}
.coverflow-carousel .swiper-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.coverflow-carousel .swiper-pagination-bullet{background:var(--coral-400);opacity:.5;}
.coverflow-carousel .swiper-pagination-bullet-active{background:var(--coral-500);opacity:1;}

/* =========================================================
   Preloader — cinematic logo reveal (homepage only)
   ========================================================= */
#preloader{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at center,#ffffff 0%,var(--cyan-tint) 100%);
  transition:opacity .6s ease,visibility .6s ease;overflow:hidden;
}
#preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}

#preloader .decorations{position:absolute;inset:0;pointer-events:none;z-index:0;}
#preloader .bubble{position:absolute;border-radius:50%;opacity:.5;animation:preloaderFloatUp linear infinite;}
#preloader .bubble-1{width:40px;height:40px;background:var(--kid-red);left:15%;bottom:-50px;animation-duration:6s;animation-delay:0s;}
#preloader .bubble-2{width:25px;height:25px;background:var(--kid-yellow);left:35%;bottom:-50px;animation-duration:8s;animation-delay:1s;}
#preloader .bubble-3{width:50px;height:50px;background:var(--kid-green);left:55%;bottom:-50px;animation-duration:7s;animation-delay:2s;}
#preloader .bubble-4{width:30px;height:30px;background:var(--kid-blue);left:75%;bottom:-50px;animation-duration:9s;animation-delay:.5s;}
#preloader .bubble-5{width:20px;height:20px;background:var(--kid-purple);left:85%;bottom:-50px;animation-duration:5s;animation-delay:3s;}
#preloader .bubble-6{width:45px;height:45px;background:var(--kid-orange);left:25%;bottom:-50px;animation-duration:7.5s;animation-delay:1.5s;}
#preloader .preload-vec{position:absolute;opacity:.35;animation:float 6s ease-in-out infinite;}
#preloader .preload-vec svg{width:100%;height:100%;}
#preloader .pv-1{width:34px;height:34px;top:12%;left:10%;color:var(--kid-red);}
#preloader .pv-2{width:42px;height:42px;top:70%;left:14%;color:var(--kid-blue);animation-delay:.6s;}
#preloader .pv-3{width:30px;height:30px;top:18%;right:12%;color:var(--kid-green);animation-delay:1.1s;}
#preloader .pv-4{width:50px;height:50px;bottom:14%;right:10%;color:var(--kid-purple);animation-delay:.3s;}
#preloader .pv-5{width:26px;height:26px;top:45%;left:6%;color:var(--kid-yellow);animation-delay:1.6s;}
@keyframes preloaderFloatUp{
  0%{transform:translateY(0) scale(1) rotate(0deg);opacity:0;}
  10%{opacity:.6;}
  50%{transform:translateY(-50vh) scale(1.2) rotate(180deg);opacity:.4;}
  100%{transform:translateY(-110vh) scale(1) rotate(360deg);opacity:0;}
}

#preloader .main-wrapper{
  position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;
  animation:preloaderBouncyFloat 4s ease-in-out 2.6s infinite;
}
#preloader .logo-container{
  position:relative;width:80vw;max-width:340px;
  filter:drop-shadow(0 8px 15px rgba(0,150,200,.15));overflow:visible;
}
#preloader svg{display:block;width:100%;height:auto;overflow:visible;}
#preloader .logo-path{
  fill:var(--navy-950);stroke:var(--navy-950);stroke-width:2.5px;
  fill-opacity:0;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:2000;stroke-dashoffset:2000;
}
@keyframes drawLine{to{stroke-dashoffset:0;}}
@keyframes fillIn{
  0%{fill-opacity:0;transform:scale(1);}
  50%{transform:scale(1.02);}
  100%{fill-opacity:1;transform:scale(1);}
}
@keyframes preloaderBouncyFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  25%{transform:translateY(-4px) rotate(1deg);}
  50%{transform:translateY(-8px) rotate(0deg);}
  75%{transform:translateY(-4px) rotate(-1deg);}
}

@media (prefers-reduced-motion: reduce){
  #preloader .logo-path{animation:none !important;stroke-dashoffset:0 !important;fill-opacity:1 !important;}
  #preloader .bubble,#preloader .main-wrapper{animation:none !important;opacity:.5 !important;transform:none !important;}
}

/* =========================================================
   Kids Decorative Vectors
   ========================================================= */
.kid-vector {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  animation: subtleFloat 8s ease-in-out infinite;
}
.kid-vector svg {
  width: 100%;
  height: 100%;
}
.kid-vector.kv-1 { top: 10%; left: 5%; width: 40px; height: 40px; color: var(--sun-yellow); animation-delay: 0s; }
.kid-vector.kv-2 { top: 60%; right: 8%; width: 50px; height: 50px; color: var(--tomato-red); animation-delay: 1.5s; transform: rotate(15deg); }
.kid-vector.kv-3 { bottom: 15%; left: 10%; width: 35px; height: 35px; color: var(--sky-blue); animation-delay: 3s; transform: rotate(-20deg); }
.kid-vector.kv-4 { top: 20%; right: 12%; width: 45px; height: 45px; color: var(--sun-yellow); animation-delay: 2s; }
.kid-vector.kv-5 { bottom: 5%; right: 5%; width: 60px; height: 60px; color: var(--tomato-red); animation-delay: 0.5s; }
.kid-vector.kv-6 { top: 40%; left: 2%; width: 30px; height: 30px; color: var(--sky-blue); animation-delay: 2.5s; }

/* =========================================================
   Page Banner — About / Contact
   ========================================================= */
.page-banner{position:relative;padding:calc(var(--announce-h) + var(--header-h) + 2.6rem) 0 3.2rem;text-align:center;overflow:clip;isolation:isolate;background:var(--cyan-tint);}
.page-banner-deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.page-banner-deco .pb-float{position:absolute;opacity:.3;animation:float 7s ease-in-out infinite;}
.page-banner-deco .pb-float svg{width:100%;height:100%;}
.pb-1{width:38px;height:38px;top:16%;left:8%;color:var(--kid-red);}
.pb-2{width:26px;height:26px;top:68%;left:16%;color:var(--kid-purple);animation-delay:.6s;}
.pb-3{width:44px;height:44px;top:20%;right:10%;color:var(--kid-blue);animation-delay:1s;}
.pb-4{width:30px;height:30px;top:72%;right:16%;color:var(--kid-yellow);animation-delay:.3s;}
.pb-5{width:22px;height:22px;top:42%;left:46%;color:var(--kid-green);animation-delay:1.5s;}
.page-banner .breadcrumb{justify-content:center;margin-bottom:1.2rem;}
.page-banner h1{font-size:clamp(2.1rem,4.4vw,3.4rem);color:var(--navy-950);margin-bottom:.7rem;}
.page-banner p{color:var(--navy-700);max-width:56ch;margin-inline:auto;font-size:1.05rem;}
@media (prefers-reduced-motion: reduce){.page-banner-deco .pb-float{animation:none;}}

/* About page */
.about-story{padding-block:clamp(3rem,5vw,4.5rem);}
.about-story-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3rem);align-items:center;}
.about-story-visual{width:100%;aspect-ratio:4/5;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);}
.about-story-visual .swiper-slide{border-radius:var(--r-xl);overflow:hidden;background:var(--white);}
.about-story-visual .swiper-slide img{width:100%;height:100%;object-fit:cover;object-position:center;}
.about-stats{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,3vw,2.6rem);margin-top:1.8rem;}
@media (min-width:900px){.about-story-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}}

.about-values{padding-block:clamp(3rem,5vw,4.5rem);background:var(--surface-soft);position:relative;overflow:clip;isolation:isolate;}

.about-cta{padding-block:clamp(3rem,5vw,4.2rem);text-align:center;background:linear-gradient(120deg,#f5f0fd 0%,#fff0e6 100%);}
.about-cta h2{margin-bottom:.7rem;color:var(--navy-950);}
.about-cta p{color:var(--navy-700);max-width:52ch;margin:0 auto 1.8rem;}

/* Contact page */
.contact-section{padding-block:clamp(3rem,5vw,4.5rem);}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3rem);align-items:start;}
@media (min-width:960px){.contact-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);}}
.contact-form-card{background:var(--white);border:3px solid var(--border-soft);border-radius:var(--r-xl);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-md);position:relative;overflow:hidden;}
.contact-form-card::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:linear-gradient(90deg,var(--kid-red),var(--kid-yellow),var(--kid-green),var(--kid-blue),var(--kid-purple),var(--kid-orange));}
.contact-form-card h2{font-size:1.4rem;color:var(--navy-900);margin-bottom:1.4rem;}
.contact-form-card .form-grid{gap:1.2rem;}
.contact-form-success{display:none;align-items:center;gap:.6rem;margin-top:1rem;padding:.85rem 1rem;border-radius:var(--r-sm);background:var(--mint-tint);color:#0d8f66;font-weight:700;font-size:.88rem;}
.contact-form-success.is-visible{display:flex;}
.contact-form-success svg{width:18px;height:18px;flex-shrink:0;}
.contact-info-list{display:flex;flex-direction:column;gap:1.2rem;}
.contact-photo{width:100%;aspect-ratio:16/10;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md);border:3px solid var(--white);}
.contact-photo img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* =========================================================
   Candy Panel Backgrounds — search, cart/wishlist, checkout
   ========================================================= */
.search-panel,
.cart-drawer,
.checkout-modal{
  background:linear-gradient(185deg,#ffffff 0%,var(--cream) 60%,var(--cyan-tint) 160%);
}
.search-panel::before,
.cart-drawer::before,
.checkout-modal::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;z-index:3;
  background:linear-gradient(90deg,var(--kid-red),var(--kid-yellow),var(--kid-green),var(--kid-blue),var(--kid-purple),var(--kid-orange));
}
.search-panel-head,
.cart-drawer-head,
.checkout-modal-head{
  position:relative;
  background:linear-gradient(135deg,var(--cyan-tint) 0%,var(--peach-tint) 100%);
}
.search-panel-body,
.cart-drawer-body,
.checkout-body{
  position:relative;
  background-image:
    radial-gradient(circle,rgba(255,89,94,.09) 3px,transparent 3px),
    radial-gradient(circle,rgba(25,130,196,.09) 3px,transparent 3px),
    radial-gradient(circle,rgba(138,201,38,.09) 3px,transparent 3px),
    radial-gradient(circle,rgba(255,202,58,.1) 3px,transparent 3px);
  background-size:150px 150px,170px 170px,130px 130px,160px 160px;
  background-position:10px 20px,60px 90px,110px 10px,20px 130px;
}
.cart-drawer-foot{position:relative;}
.cart-drawer-foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--kid-blue),var(--kid-purple),var(--pink-400));
}
.checkout-steps{background:var(--surface-soft);}
.step-dot{box-shadow:0 2px 0 rgba(0,0,0,.1);}

/* =========================================================
   Background Decorative Vectors — Collections / Shop / Adventure / Best Sellers
   ========================================================= */
.categories-deco,.products-deco,.coverflow-deco,.bestsellers-deco{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.categories-float,.products-float,.coverflow-float,.bestsellers-float{
  position:absolute;opacity:.25;animation:float 7s ease-in-out infinite;
}
.categories-float svg,.products-float svg,.coverflow-float svg,.bestsellers-float svg{width:100%;height:100%;}

.cf-1{width:30px;height:30px;top:8%;left:4%;color:var(--kid-red);}
.cf-2{width:22px;height:22px;top:80%;left:10%;color:var(--kid-blue);animation-delay:.6s;}
.cf-3{width:26px;height:26px;top:12%;left:92%;color:var(--kid-yellow);animation-delay:1.1s;}
.cf-4{width:34px;height:34px;top:75%;left:90%;color:var(--kid-purple);animation-delay:.3s;}
.cf-5{width:24px;height:34px;top:48%;left:50%;color:var(--kid-green);animation-delay:1.6s;}

.pf-1{width:28px;height:28px;top:6%;left:3%;color:var(--kid-green);}
.pf-2{width:20px;height:20px;top:90%;left:6%;color:var(--kid-orange);animation-delay:.8s;}
.pf-3{width:24px;height:24px;top:5%;left:94%;color:var(--kid-blue);animation-delay:1.3s;}
.pf-4{width:32px;height:32px;top:88%;left:92%;color:var(--kid-red);animation-delay:.4s;}
.pf-5{width:24px;height:24px;top:46%;left:96%;color:var(--kid-purple);animation-delay:1.7s;}

.cvf-1{width:26px;height:26px;top:10%;left:6%;color:var(--kid-yellow);}
.cvf-2{width:20px;height:20px;top:82%;left:12%;color:var(--kid-purple);animation-delay:.7s;}
.cvf-3{width:30px;height:30px;top:14%;left:90%;color:var(--kid-green);animation-delay:1.2s;}
.cvf-4{width:26px;height:26px;top:46%;left:2%;color:var(--kid-orange);animation-delay:.9s;}

.bf-1{width:28px;height:28px;top:8%;left:4%;color:var(--kid-orange);}
.bf-2{width:22px;height:22px;top:85%;left:8%;color:var(--kid-blue);animation-delay:.5s;}
.bf-3{width:32px;height:32px;top:10%;left:92%;color:var(--kid-red);animation-delay:1s;}
.bf-4{width:20px;height:20px;top:80%;left:88%;color:var(--kid-green);animation-delay:1.5s;}
.bf-5{width:24px;height:24px;top:45%;left:96%;color:var(--kid-purple);animation-delay:.9s;}

@media (prefers-reduced-motion: reduce){
  .categories-float,.products-float,.coverflow-float,.bestsellers-float{animation:none;}
}

/* About / Contact page decoration */
.about-story-deco,.about-cta-deco,.contact-deco{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.about-story-float,.about-cta-float,.contact-float{
  position:absolute;opacity:.25;animation:float 7s ease-in-out infinite;
}
.about-story-float svg,.about-cta-float svg,.contact-float svg{width:100%;height:100%;}

.asf-1{width:28px;height:28px;top:8%;left:4%;color:var(--kid-blue);}
.asf-2{width:20px;height:20px;top:85%;left:8%;color:var(--kid-yellow);animation-delay:.6s;}
.asf-3{width:26px;height:26px;top:12%;left:94%;color:var(--kid-red);animation-delay:1.1s;}

.acf-1{width:30px;height:30px;top:10%;left:6%;color:var(--kid-purple);}
.acf-2{width:22px;height:22px;top:78%;left:12%;color:var(--kid-green);animation-delay:.5s;}
.acf-3{width:34px;height:34px;top:15%;left:90%;color:var(--kid-orange);animation-delay:1s;}
.acf-4{width:18px;height:18px;top:80%;left:88%;color:var(--kid-blue);animation-delay:1.4s;}

.ctf-1{width:26px;height:26px;top:10%;left:5%;color:var(--kid-green);}
.ctf-2{width:20px;height:20px;top:82%;left:10%;color:var(--kid-red);animation-delay:.7s;}
.ctf-3{width:30px;height:30px;top:14%;left:92%;color:var(--kid-blue);animation-delay:1.2s;}

/* =========================================================
   Live Chat AI Widget
   ========================================================= */
.chat-widget-btn{
  position:fixed;bottom:2rem;right:2rem;z-index:900;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--kid-red),var(--kid-purple));
  color:var(--white);display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.2);
  transition:transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
  cursor:pointer;
  border:none;
}
.chat-widget-btn:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 18px 40px rgba(255,89,94,.3);
}
.chat-widget-btn svg{width:28px;height:28px;}

.chat-window{
  position:fixed;bottom:6rem;right:2rem;z-index:1102;
  width:340px;max-width:calc(100vw - 3rem);
  background:var(--white);border-radius:24px;
  box-shadow:0 20px 50px rgba(0,0,0,.15);
  display:flex;flex-direction:column;
  overflow:hidden;
  transform:translateY(20px) scale(0.95);
  opacity:0;pointer-events:none;
  transition:transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
  border:1px solid var(--border-soft);
}
.chat-window.is-open{
  transform:translateY(0) scale(1);opacity:1;pointer-events:auto;
}

.chat-header{
  background:transparent;
  color:var(--kid-purple);padding:1.6rem 1.6rem 1rem;
  display:flex;align-items:center;justify-content:space-between;
}
.chat-header h3{font-size:1.15rem;margin:0;color:var(--kid-purple);display:flex;align-items:center;gap:.5rem;}
.chat-header h3 svg{width:22px;height:22px;color:var(--kid-blue);}
.close-chat-btn{
  background:var(--surface-soft);border:none;color:var(--navy-600);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  transition:all var(--dur-fast) var(--ease);
  padding:0;
}
.close-chat-btn:hover{background:var(--kid-red);color:var(--white);transform:rotate(90deg) scale(1.1);}
.close-chat-btn svg{width:18px;height:18px;}

.chat-messages{
  height:320px;overflow-y:auto;padding:0.5rem 1.6rem;
  display:flex;flex-direction:column;gap:1rem;
  background:transparent;
}
.chat-bubble{
  max-width:85%;padding:.7rem 1rem;border-radius:18px;
  font-size:.95rem;line-height:1.4;
  animation:popIn .3s var(--ease) forwards;
}
@keyframes popIn{
  0%{opacity:0;transform:scale(0.9) translateY(10px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
.chat-ai{
  background:var(--white);color:var(--ink-700);
  align-self:flex-start;
  border-bottom-left-radius:4px;
  box-shadow:0 4px 10px rgba(0,0,0,.03);
  border:1px solid var(--border-soft);
}
.chat-user{
  background:var(--kid-blue);color:var(--white);
  align-self:flex-end;
  border-bottom-right-radius:4px;
}
.chat-bubble p{margin:0;}

.chat-typing{
  display:flex;align-items:center;gap:4px;
  padding:.8rem 1rem;
}
.chat-typing span{
  display:block;width:6px;height:6px;border-radius:50%;
  background:var(--ink-300);
  animation:typingDot 1.4s infinite ease-in-out both;
}
.chat-typing span:nth-child(1){animation-delay:-0.32s;}
.chat-typing span:nth-child(2){animation-delay:-0.16s;}
@keyframes typingDot{
  0%,80%,100%{transform:scale(0);}
  40%{transform:scale(1);}
}

.chat-input-area{
  padding:1rem 1.6rem 1.8rem;background:transparent;
  border-top:none;
}
.chat-form{display:flex;gap:.5rem;}
.chat-form input{
  flex:1;background:var(--surface-soft);
  border:1px solid transparent;border-radius:20px;
  padding:.6rem 1rem;font-size:.95rem;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.chat-form input:focus{
  outline:none;background:var(--white);border-color:var(--kid-purple);
}
.chat-form button{
  background:var(--kid-purple);color:var(--white);
  border:none;border-radius:50%;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  flex-shrink:0;padding:0;
}
.chat-form button:hover{background:var(--kid-blue);transform:scale(1.1) rotate(-10deg);}

.chat-form button svg{width:18px;height:18px;}

@media (max-width:480px){
  .chat-window{
    bottom:0;right:0;width:100%;max-width:100%;
    height:100dvh;border-radius:0;
    transform:translateY(100%);
  }
  .chat-messages{flex:1;height:auto;}
  .chat-widget-btn{bottom:1.5rem;right:1.5rem;}
}

/* =========================================================
   Legal Pages (Privacy / Terms)
   ========================================================= */
.legal-section {
  padding-block: clamp(3rem, 5vw, 5rem);
  max-width: 800px;
  margin: 0 auto;
}
.legal-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--kid-blue-light);
}
.legal-card h2 {
  font-family: var(--font-hand);
  color: var(--kid-blue);
  font-size: 2.2rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.legal-card h2:first-child {
  margin-top: 0;
}
.legal-card h3 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-dark);
}
.legal-card p, .legal-card ul {
  margin-bottom: 1.2rem;
  line-height: 1.7;
}
.legal-card ul {
  padding-left: 1.5rem;
  list-style: disc;
}
.legal-card ul li {
  margin-bottom: 0.5rem;
}

/* =========================================================
   Creative Login Popup — TEGO kid characters holding a sign
   ========================================================= */
.login-modal{
  background:transparent;box-shadow:none;overflow:visible;pointer-events:none;
  width:min(400px,92vw);display:block;padding-top:58px;
}
.login-modal.is-open{pointer-events:auto;}
.login-modal *{pointer-events:auto;}
.login-modal::before{content:none;}

.login-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;z-index:3;
  background:linear-gradient(90deg,var(--kid-red),var(--kid-yellow),var(--kid-green),var(--kid-blue),var(--kid-purple),var(--kid-orange));
}
.login-dots{list-style:none;}

.login-modal .tp-char,
.login-modal .tp-hand{position:absolute;pointer-events:none;user-select:none;z-index:1;}
.login-modal .tp-char-boy{
  width:180px;left:-92px;top:-37px;z-index:4;
  filter:drop-shadow(0 16px 18px rgba(46,39,64,.22));
  
}
.login-modal .tp-char-girl{
  width:180px;right:-83px;top:-37px;z-index:3;
  filter:drop-shadow(0 16px 18px rgba(46,39,64,.22));
  
}
@keyframes tpBob{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-6px) rotate(-1deg);}}
@media (prefers-reduced-motion: reduce){.login-modal .tp-char-boy,.login-modal .tp-char-girl{animation:none;}}

.login-modal .tp-hand{filter:drop-shadow(0 6px 6px rgba(46,39,64,.25));}
.login-modal .tp-hand-boy-fist{z-index:3;width:23px;top:75px;left:-5px;transform:rotate(8deg);}
.login-modal .tp-hand-girl-fist{z-index:3;width:30px;top:70px;right:2px;}
.login-modal .tp-hand-boy-upper{z-index:4;width:30px;top:55px;left:46px;transform:rotate(6deg);opacity:1;}
.login-modal .tp-hand-girl-upper{z-index:4;width:30px;top:54px;right:56px;transform:scaleX(-1) rotate(6deg);opacity:1;}

.login-card{
  position:relative;z-index:2;
  background:var(--white);
  border-radius:46px 46px 52px 52px / 40px 40px 60px 60px;
  filter:drop-shadow(0 16px 24px rgba(46,39,64,.15));
  padding:1.9rem 1.6rem 1.6rem;
  max-height:calc(90vh - 58px);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.login-card::after {
  content: ""; position: absolute;
  top: 14px; left: 14px; right: 14px; bottom: 14px;
  border: 2px dashed #b5e2fa;
  border-radius: 36px 36px 42px 42px / 30px 30px 48px 48px;
  pointer-events: none;
}
.login-card .checkout-body{padding:0;overflow-y:auto;flex:1;min-height:0;}

.login-modal .tp-close{
  position:absolute;top:.8rem;right:.8rem;z-index:5;
  width:32px;height:32px;border-radius:50%;border:none;
  background:var(--surface-soft);color:var(--navy-700);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.login-modal .tp-close svg{width:15px;height:15px;}
.login-modal .tp-close:hover{background:var(--kid-red);color:var(--white);transform:rotate(90deg);}

.login-card-head{text-align:center;margin-bottom:1rem;}
.login-card-head #loginTitle{
  font-size:1.45rem;display:flex;align-items:center;justify-content:center;gap:.35rem;
  color:var(--navy-900);margin-bottom:.35rem;
}
.login-wave{display:inline-block;animation:loginWave 2.2s ease-in-out infinite;transform-origin:70% 70%;}
@keyframes loginWave{
  0%,100%{transform:rotate(0deg);} 10%{transform:rotate(16deg);} 20%{transform:rotate(-8deg);}
  30%{transform:rotate(16deg);} 40%{transform:rotate(-4deg);} 50%{transform:rotate(10deg);} 60%,100%{transform:rotate(0deg);}
}
.login-card-head .login-sub{margin-bottom:0;}
.login-sub-inline{margin-bottom:1.1rem;}

.login-dots{display:flex;justify-content:center;align-items:center;gap:.4rem;padding:0;margin-bottom:1.3rem;}
.login-dots[hidden]{display:none;}
.login-card-head:not([data-step="1"]) .login-wave{display:none;}
.login-dots .step-dot{
  display:block;width:8px;height:8px;border-radius:5px;background:var(--border-soft);
  transition:width var(--dur-med) var(--ease),background var(--dur-med) var(--ease);
}
.login-dots .step.is-active .step-dot{width:24px;background:linear-gradient(90deg,var(--coral-500),var(--coral-600));}
.login-dots .step.is-done .step-dot{width:8px;background:var(--kid-green);}

.login-phone-field label{text-align:center;}
.login-phone-row{gap:0;}
.login-country{border-radius:999px 0 0 999px;border-right:none;gap:.35rem;transition:border-color var(--dur-fast),background var(--dur-fast);}
.login-country svg{width:15px;height:15px;color:var(--navy-600);}
.login-phone-row input{border-radius:0 999px 999px 0;border-left:none;}
.login-phone-row input:focus{border-left:none;}
.login-phone-field.is-invalid .login-phone-row{animation:fieldShake .4s var(--ease);}
.login-phone-field.is-invalid input{animation:none;border-left:none;}
.login-phone-field.is-invalid .login-country{border-color:var(--kid-red);background:#fff3f3;}

.btn-login-cta{
  background:linear-gradient(180deg,var(--coral-500),var(--coral-600));
  border-color:#c73a42;color:var(--white);
  box-shadow:0 6px 3px -3px rgba(0,0,0,.25),0 10px 22px rgba(255,89,94,.4);
}
.login-cta-arrow{
  width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.28);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.login-cta-arrow svg{width:13px;height:13px;}

@media (max-width:640px){
  .login-modal{
    width:92vw;top:50%;bottom:auto;left:50%;translate:-50% -50%;padding-top:40px;
    max-height:90vh;height:auto;border-radius:0;
  }
  .login-modal.is-open{translate:-50% -50%;}
  .login-card{
    border-radius:38px 38px 44px 44px / 32px 32px 50px 50px;max-height:calc(90vh - 40px);
    padding:2rem 1.2rem 1.2rem;
  }
  .login-modal .tp-char-boy{width:130px;left:-66px;top:-27px;}
  .login-modal .tp-char-girl{width:130px;right:-60px;top:-27px;}
  .login-modal .tp-hand-boy-fist{width:26px;top:50px;left:-6px;}
  .login-modal .tp-hand-girl-fist{width:30px;top:48px;right:-1px;}
  .login-modal .tp-hand-boy-upper{width:29px;top:32px;left:29px;}
  .login-modal .tp-hand-girl-upper{width:32px;top:32px;right:33px;}
}
@media (max-width:380px){
  .login-modal .tp-char-boy{width:110px;left:-55px;top:-23px;}
  .login-modal .tp-char-girl{width:110px;right:-50px;top:-23px;}
  .login-modal .tp-hand-boy-fist{width:16px;top:45px;left:-2px;}
  .login-modal .tp-hand-girl-fist{width:22px;top:42px;right:-2px;}
  .login-modal .tp-hand-boy-upper{width:20px;top:33px;left:28px;}
  .login-modal .tp-hand-girl-upper{width:27px;top:32px;right:30px;}
}

/* =========================================================
   Fancy Border-Radius — same soft organic card shape as the
   login popup, shared by Checkout and the Chat window
   ========================================================= */
#checkoutModal,
.chat-window{
  border-radius:40px 40px 46px 46px / 34px 34px 52px 52px;
  box-shadow:none;
  filter:drop-shadow(0 16px 24px rgba(46,39,64,.18));
}
.chat-window{border:none;}
#checkoutModal::after,
.chat-window::after{
  content:"";position:absolute;z-index:5;pointer-events:none;
  top:12px;left:12px;right:12px;bottom:12px;
  border:2px dashed #b5e2fa;
  border-radius:30px 30px 36px 36px / 26px 26px 40px 40px;
}
@media (max-width:640px){
  #checkoutModal{border-radius:0;filter:none;box-shadow:var(--shadow-lg);}
  #checkoutModal::after{display:none;}
}
@media (max-width:480px){
  .chat-window{border-radius:0;filter:none;box-shadow:0 20px 50px rgba(0,0,0,.15);}
  .chat-window::after{display:none;}
}
@media (max-width:640px){
  .header-actions{gap:.3rem;}
}