:root{
  --icon-wheat:url("https://groomy.com.my/wp-content/uploads/2026/07/Wheat.png");
  --icon-blueberry:url("https://groomy.com.my/wp-content/uploads/2026/07/Blueberry.png");
  --icon-tomato:url("https://groomy.com.my/wp-content/uploads/2026/07/Tomato.png");
  --icon-carrot:url("https://groomy.com.my/wp-content/uploads/2026/07/Carrot.png");
  --icon-broccoli:url("https://groomy.com.my/wp-content/uploads/2026/07/Broccoli.png");
  --icon-spinach:url("https://groomy.com.my/wp-content/uploads/2026/07/Vegetable.png");
  --icon-banana:url("https://groomy.com.my/wp-content/uploads/2026/07/Banana.png");
  --icon-sweetpotato:url("https://groomy.com.my/wp-content/uploads/2026/07/Sweet-Potato.png");
  --icon-strawberry:url("https://groomy.com.my/wp-content/uploads/2026/07/Strawberry.png");
  --icon-apple:url("https://groomy.com.my/wp-content/uploads/2026/07/Apple.png");
  --icon-orange:url("https://groomy.com.my/wp-content/uploads/2026/07/Orange.png");
  --icon-grape:url("https://groomy.com.my/wp-content/uploads/2026/07/Grape.png");
  --icon-cucumber:url("https://groomy.com.my/wp-content/uploads/2026/07/Cucumber.png");
  --icon-pear:url("https://groomy.com.my/wp-content/uploads/2026/07/Pear.png");
  --icon-mango:url("https://groomy.com.my/wp-content/uploads/2026/07/Mango.png");
  --icon-pumpkin:url("https://groomy.com.my/wp-content/uploads/2026/07/Pumpkin.png");
  --icon-mushroom:url("https://groomy.com.my/wp-content/uploads/2026/07/Mushroom.png");
}
/* ==========================================================================
   GROOMY (by MummyRQ) — Shared Stylesheet
   Design system + layout patterns for all 6 pages.
   Pure CSS. Mobile-first. No frameworks, no JS.
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Brand colors */
  --color-primary-purple:#9367b2;
  --color-primary-orange:#e9631a;
  --color-primary-brown:#673922;
  --color-bg-lilac:#dac9ed;
  --color-bg-blue:#a9c2e0;
  --color-bg-cream:#ebebdf;
  --color-bg-yellow:#FDB851;
  /* Derived tints */
  --tint-purple:#f1e9f7;
  --tint-orange:#fdeadd;
  --tint-yellow:#fef3df;
  --tint-blue:#eef3f9;
  --ink:#3c2a1e;
  --white:#ffffff;
  /* Typography */
  --font-display:"Baloo 2",cursive;
  --font-body:"Plus Jakarta Sans",system-ui,sans-serif;
  /* Spacing scale */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem;  --sp-6:4rem; --sp-7:6rem;
  /* Radius */
  --r-sm:.75rem; --r-md:1.5rem; --r-lg:3rem; --r-full:999px;
  /* Shadow */
  --shadow-soft:0 12px 30px -14px rgba(103,57,34,.28);
  --shadow-lift:0 20px 44px -18px rgba(103,57,34,.38);
  --maxw:1180px;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;background:var(--color-bg-cream);color-scheme:light}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.05rem;font-weight:500;
  color:var(--ink);
  background:var(--color-bg-cream);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.full-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--color-primary-brown);
  line-height:1.05;
  margin:0 0 var(--sp-2);
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.7rem,7.2vw,4.4rem);font-weight:800}
h2{font-size:clamp(2.1rem,5.2vw,3.1rem);font-weight:800}
h3{font-size:1.5rem;font-weight:800}
p{margin:0 0 var(--sp-2)}
a{color:var(--color-primary-purple)}
a:hover{color:var(--color-primary-orange)}
:focus-visible{outline:3px solid var(--color-primary-orange);outline-offset:3px;border-radius:6px}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--color-primary-brown);
  color:#fff;padding:.6rem 1.2rem;border-radius:0 0 var(--r-sm) 0;z-index:100;
}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-3)}
.section{padding-block:var(--sp-6)}
.center{text-align:center}
.eyebrow{
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--color-primary-purple);
  margin-bottom:var(--sp-1);
}
.lede{font-size:1.18rem;font-weight:500;max-width:42rem;color:rgba(60,42,30,.82);line-height:1.55}
.center .lede{margin-inline:auto}

/* ---------- 3. BUTTONS ---------- */
.btn{
  display:inline-block;font-family:var(--font-display);font-weight:800;
  font-size:1.1rem;padding:.95rem 2.2rem;border-radius:var(--r-full);
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-orange{background:var(--color-primary-orange);color:#fff}
.btn-orange:hover{background:#d15512;color:#fff}
.btn-purple{background:var(--color-primary-purple);color:#fff}
.btn-purple:hover{background:#7c539a;color:#fff}
.btn-brown{background:var(--color-primary-brown);color:#fff}
.btn-brown:hover{background:#4f2b19;color:#fff}
.btn-outline{border-color:rgba(103,57,34,.3);color:var(--color-primary-brown);background:transparent}
.btn-outline:hover{border-color:var(--color-primary-purple);color:var(--color-primary-purple)}
.btn-yellow{background:var(--color-bg-yellow);color:var(--color-primary-brown)}
.btn-yellow:hover{background:#f5a93a;color:var(--color-primary-brown)}

/* ---------- 4. HEADER / NAV ---------- */
.topbar{
  background:var(--color-primary-purple);color:#fff;text-align:center;
  font-size:.82rem;font-weight:600;letter-spacing:.03em;padding:.5rem 1rem;
}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.65rem;text-decoration:none;line-height:1;display:flex;align-items:center;gap:.15rem}
.logo:hover{color:inherit}

/* Nav (CSS-only dropdowns) */
/* ---------- BUBBLE MENU (vanilla JS/CSS, no React/GSAP needed) ---------- */
/* No header bar/background — just two floating bubbles (logo + toggle) sitting
   directly on top of page content, React-Bits "BubbleMenu" style. */
.bubble-menu{
  position:fixed;inset-inline:0;top:3.4rem;z-index:200;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-inline:var(--sp-3);pointer-events:none; /* only the bubbles themselves are clickable */
  transition:transform .35s ease, opacity .3s ease;
}
/* Scroll-triggered collapse: hidden while scrolling down, brought back on
   scroll-up (see the "Nav show/hide on scroll" script near the end of the
   file). translateY(-100%) alone only moves the bar by its OWN height —
   since the bar sits offset from the real top (top:3.4rem desktop /
   5.2rem mobile / 4.75rem tablet) and is shorter than that offset, a
   pure -100%/-135% translate left it still poking a few px into view.
   The extra -100px covers every breakpoint's top offset so it fully
   leaves the viewport; opacity+pointer-events make it non-interactive
   the instant it's gone rather than fading through a half-clickable state.*/
.bubble-menu.nav-hidden{
  transform:translateY(calc(-100% - 100px));
  opacity:0;
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){.bubble-menu{transition:none}}
@media(max-width:640px){
  .bubble-menu{
    /* Was top:0, which sat the fixed bar directly on top of the two-line
       .topbar banner underneath it (same stacking position), hiding the
       delivery message under the frosted bar. .topbar wraps to two lines
       on every phone width, so dock the bar right below it instead. */
    top:5.2rem;padding:.6rem var(--sp-3);gap:.5rem;
    background:rgba(235,235,223,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 2px 10px rgba(103,57,34,.08);
  }
}
@media(min-width:641px) and (max-width:849px){
  /* Pre-existing gap (not introduced by the fix above): .topbar still wraps
     to two lines up to ~849px, but top:3.4rem was sized for its one-line
     height, so the nav overlapped the tail end of the banner in this
     tablet/landscape range too. Only nudging the offset down — size,
     color and transparency are untouched here. */
  .bubble-menu{top:4.75rem}
}
.bubble-menu .bubble{
  --bubble-size:3.2rem;width:var(--bubble-size);height:var(--bubble-size);border-radius:999px;
  background:#fff;box-shadow:var(--shadow-soft);display:inline-flex;align-items:center;justify-content:center;
  pointer-events:auto;text-decoration:none;color:var(--color-primary-brown);flex:none;
}
.bubble-menu .logo-bubble{
  width:auto;padding-inline:1.1rem;gap:.15rem;font-family:var(--font-display);font-weight:800;font-size:1.3rem;flex-shrink:0;
}
.logo-bubble:hover{color:inherit}
.bubble-actions{display:flex;align-items:center;gap:.6rem;pointer-events:none}
.action-bubble svg{width:1.15rem;height:1.15rem}
.action-bubble:hover{color:var(--color-primary-orange)}
/* Scoped as .bubble-menu .toggle-bubble (not just .toggle-bubble) so its
   specificity (0,2,0) matches — and, being later in source, wins over —
   .bubble-menu .bubble above. Previously .toggle-bubble{background:purple}
   had lower specificity than .bubble-menu .bubble{background:#fff} and
   silently lost, which is why this button was rendering as a plain white
   circle indistinguishable from the icon bubbles beside it. It's also
   sized a notch larger than the other bubbles since it's the primary nav
   trigger and should read as the "main" action, not just another icon. */.bubble-menu .toggle-bubble{
  --bubble-size:3.7rem;
  background:var(--color-primary-purple);border:none;cursor:pointer;flex-direction:column;gap:.32rem;
  transition:background .15s ease,transform .15s ease;
}
.bubble-menu .toggle-bubble:hover{background:#7c539a;transform:translateY(-2px)}
.toggle-bubble .menu-line{width:1.5rem;height:2.5px;background:#fff;border-radius:2px;display:block;transition:transform .3s ease,opacity .3s ease}
.toggle-bubble[aria-expanded="true"] .menu-line:first-child{transform:translateY(4.5px) rotate(45deg)}
.toggle-bubble[aria-expanded="true"] .menu-line:last-child{transform:translateY(-4.5px) rotate(-45deg)}
@media(max-width:640px){
  .bubble-menu .logo-bubble{padding-inline:.6rem}
  .bubble-menu .logo-bubble .brand-logo{
    height:clamp(1.15rem,6vw,1.5rem)!important;
    width:calc(clamp(1.15rem,6vw,1.5rem) * 3508 / 2481)!important;
  }
  .bubble-menu .bubble{--bubble-size:clamp(2.2rem,7.5vw,2.5rem)}
  .bubble-menu .toggle-bubble{--bubble-size:clamp(2.5rem,8.5vw,2.9rem)}
  .bubble-actions{gap:.35rem}
  .action-bubble svg{width:1rem;height:1rem}
  .toggle-bubble .menu-line{width:1.1rem}
}

.bubble-menu-items{
  position:fixed;inset:0;z-index:190;display:none;align-items:center;justify-content:center;
  padding:1.5rem;overflow-y:auto;pointer-events:none;
  background:rgba(255,255,255,.001);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
  transition:backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease;
}
.bubble-menu-items.open{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pill-list{
  list-style:none;margin:0;padding:0 1rem;display:flex;flex-wrap:wrap;gap:0;row-gap:6px;
  width:100%;max-width:1100px;margin-inline:auto;pointer-events:auto;
}
.pill-col{display:flex;justify-content:center;align-items:stretch;flex:0 0 100%;box-sizing:border-box}
@media(min-width:780px){
  .pill-col{flex:0 0 calc(100%/3)}
  .pill-col:nth-child(7):last-child{margin-inline-start:calc(100%/3)}
}
.pill-link{
  --pill-bg:#fdf8ee;--pill-color:var(--color-primary-brown);--item-rot:0deg;
  --hover-bg:var(--color-primary-orange);--hover-color:#fff;
  width:100%;min-height:110px;padding:1.2rem 1rem;border-radius:999px;
  background:var(--pill-bg);color:var(--pill-color);text-decoration:none;
  font-family:var(--font-display);font-weight:800;font-size:clamp(1rem,2.4vw,1.6rem);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.05;
  box-shadow:0 4px 14px rgba(56,32,20,.18);display:flex;align-items:center;justify-content:center;text-align:center;
  transform:scale(0);transition:background .25s ease,color .25s ease;box-sizing:border-box;position:relative;z-index:1;
}
@media(min-width:780px){
  .pill-link{transform:rotate(var(--item-rot)) scale(0);min-height:150px}
  .bubble-menu-items.open .pill-link{transform:rotate(var(--item-rot)) scale(1)}
  .pill-link:hover{background:var(--hover-bg);color:var(--hover-color);transform:rotate(var(--item-rot)) scale(1.06);z-index:2}
}
.pill-link .pill-label{display:inline-block;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.pill-link{transition:background .25s ease,color .25s ease}}

.main-nav{border-top:1px solid var(--color-bg-cream)}
.main-nav>ul{
  list-style:none;margin:0;padding:0 var(--sp-3);display:flex;flex-wrap:wrap;
  justify-content:center;gap:.25rem;max-width:var(--maxw);margin-inline:auto;
}
.main-nav a,.main-nav summary{
  font-family:var(--font-display);font-weight:600;font-size:.98rem;color:var(--color-primary-brown);
  text-decoration:none;display:block;padding:.8rem 1rem;border-radius:var(--r-sm);cursor:pointer;
}
.main-nav a:hover,.main-nav summary:hover{color:var(--color-primary-orange)}
.main-nav a[aria-current="page"]{color:var(--color-primary-orange)}
.nav-drop{position:relative}
.nav-drop>.drop-panel{
  position:absolute;left:50%;transform:translate(-50%,10px);top:100%;min-width:230px;
  background:var(--white);border-radius:var(--r-md);box-shadow:var(--shadow-lift);
  padding:.8rem;opacity:0;visibility:hidden;transition:all .18s ease;z-index:60;
}
.nav-drop:hover>.drop-panel,.nav-drop:focus-within>.drop-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop-panel a{padding:.55rem .9rem;font-size:.92rem;white-space:nowrap;display:flex;align-items:center;gap:.55rem}
.drop-panel a:hover{background:var(--tint-purple)}
.drop-panel .mini-mascot{width:1.5rem;height:1.5rem;flex:none}

/* ---------- 5. MASCOTS (original inline SVG, sized by wrapper) ---------- */
.mascot{display:inline-block}
.mascot svg{width:100%;height:100%}
.mascot-badge{
  width:4.5rem;height:4.5rem;border-radius:var(--r-full);display:inline-flex;
  align-items:center;justify-content:center;padding:.65rem;
}
.mb-bear{background:var(--color-primary-purple)}
.mb-rabbit{background:var(--color-bg-lilac)}
.mb-fox{background:var(--color-bg-yellow)}

/* ---------- 6. HERO (blob layout) ---------- */
.hero{background:var(--color-bg-cream);overflow:hidden}
.hero-grid{
  display:grid;gap:var(--sp-4);align-items:center;
  padding-block:var(--sp-5);
}
.hero-copy .eyebrow{color:var(--color-primary-orange)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.hero-art{position:relative;min-height:290px}
.blob{
  position:absolute;inset:0;background:var(--color-bg-yellow);
  border-radius:58% 42% 55% 45%/50% 55% 45% 50%;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:.6rem;text-align:center;padding:var(--sp-4);box-shadow:var(--shadow-soft);
}
.blob .blob-title{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--color-primary-brown)}
.blob-mascots{display:flex;gap:.8rem;align-items:flex-end}
.blob-mascots .mascot{width:5.2rem;height:5.2rem;background:#fff;border-radius:var(--r-full);padding:.6rem;box-shadow:var(--shadow-soft)}
.blob-mascots .mascot:nth-child(2){width:6.4rem;height:6.4rem}
.float-chip{
  position:absolute;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-soft);
  padding:.6rem .95rem;font-size:.8rem;font-weight:700;display:flex;gap:.5rem;align-items:center;
}
.float-chip svg{width:1.4rem;height:1.4rem;flex:none}
.chip-tl{top:-2%;left:-2%}
.chip-br{bottom:-4%;right:-2%}

/* ---------- 7. AGE CARD GRID ("Your Little One") ---------- */
.band-yellow{background:var(--color-bg-yellow);border-radius:var(--r-lg);}
.giant-title{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,8vw,4.6rem);color:rgba(255,255,255,.85);
  text-align:center;letter-spacing:.02em;margin:0 0 var(--sp-3);
}
.age-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2)}
.age-card{
  background:#fff;border:2px solid var(--color-primary-brown);border-radius:var(--r-md);
  text-decoration:none;color:var(--color-primary-brown);text-align:center;
  padding:var(--sp-2) var(--sp-1);display:flex;flex-direction:column;align-items:center;gap:.4rem;
  font-family:var(--font-display);font-weight:700;box-shadow:0 4px 0 var(--color-primary-brown);
  transition:transform .15s ease,box-shadow .15s ease;
}
.age-card:hover{transform:translateY(-4px);box-shadow:0 8px 0 var(--color-primary-brown);color:var(--color-primary-orange)}
.age-card .mascot{width:3.2rem;height:3.2rem}
.age-card small{font-family:var(--font-body);font-weight:600;font-size:.72rem;color:rgba(60,42,30,.65)}

/* ---------- 8. CIRCLE CATEGORY GRID ---------- */
.circle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-4) var(--sp-3)}
.circle-cat{text-decoration:none;text-align:center;color:var(--color-primary-brown)}
.circle-cat .disc{
  aspect-ratio:1;border-radius:var(--r-full);margin:0 auto var(--sp-2);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);
  transition:transform .18s ease;max-width:220px;padding:1.6rem;
}
.circle-cat:hover .disc{transform:scale(1.05)}
.circle-cat b{font-family:var(--font-display);font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.disc-purple{background:var(--tint-purple)}
.disc-lilac{background:var(--color-bg-lilac)}
.disc-yellow{background:var(--tint-yellow)}
.disc-blue{background:var(--tint-blue)}
.disc-orange{background:var(--tint-orange)}
.disc-cream{background:#fff}

/* ---------- 9. PHILOSOPHY PILLS ---------- */
.band-soft{background:var(--tint-orange);border-radius:var(--r-lg)}
.pill-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.value-pill{
  display:inline-flex;align-items:center;gap:.6rem;background:#fff;border-radius:var(--r-full);
  padding:.7rem 1.4rem;font-family:var(--font-display);font-weight:700;color:var(--color-primary-brown);
  box-shadow:var(--shadow-soft);font-size:.98rem;
}
.value-pill svg{width:1.5rem;height:1.5rem;flex:none}
.vp-purple{background:var(--tint-purple)}
.vp-lilac{background:var(--color-bg-lilac)}
.vp-yellow{background:var(--tint-yellow)}
.vp-blue{background:var(--tint-blue)}
.vp-white{background:#fff}

/* ---------- 10. PRODUCT CARDS ---------- */
.product-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--sp-3)}
.product-card{
  background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-soft);
  padding:var(--sp-2);text-align:center;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;position:relative;
}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.product-art{
  border-radius:var(--r-md);aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-2);position:relative;overflow:hidden;padding:1.4rem;
}
.product-art .mascot{position:absolute;width:2.6rem;height:2.6rem;top:.6rem;right:.6rem}
.age-tag{
  position:absolute;top:.6rem;left:.6rem;background:var(--color-primary-purple);color:#fff;
  font-size:.68rem;font-weight:800;padding:.25rem .7rem;border-radius:var(--r-full);letter-spacing:.04em;
}
.age-tag.t8{background:var(--color-primary-orange)}
.age-tag.t12{background:var(--color-primary-brown)}.product-card h3{font-size:1.05rem;margin-bottom:.3rem}
.product-card .price{font-family:var(--font-display);font-weight:800;color:var(--color-primary-brown);font-size:1.08rem;margin:0 0 var(--sp-2)}
.product-card .btn{margin-top:auto;font-size:.9rem;padding:.6rem 1.4rem}
.stars{color:var(--color-bg-yellow);letter-spacing:.1em;font-size:.85rem}

/* ---------- 11. JOURNEY BAND ---------- */
.band-purple{background:var(--color-primary-purple);border-radius:var(--r-lg);color:#fff;overflow:hidden}
.band-purple h2{color:#fff}
.band-purple .lede{color:rgba(255,255,255,.85)}
.journey-grid{display:grid;gap:var(--sp-4);align-items:center;padding-block:var(--sp-5)}
.journey-art{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}
.journey-art .mascot{
  width:6.2rem;height:6.2rem;background:#fff;border-radius:var(--r-full);
  padding:.75rem;box-shadow:var(--shadow-lift);
}
.journey-art .mascot:nth-child(2){transform:translateY(-14px)}

/* ---------- WHY CHOOSE US — full-bleed purple benefits band ---------- */
.why-us{background:var(--color-primary-purple);color:#fff;padding:var(--sp-6) var(--sp-3);text-align:center;border-radius:3rem;position:relative;overflow:visible}
.why-us-head{max-width:38rem;margin:0 auto var(--sp-5)}
.why-us-head h2{color:#fff;text-transform:uppercase;font-size:clamp(2rem,5vw,3.2rem);line-height:1.03;margin:0 0 var(--sp-2)}
.why-us-head p{color:rgba(255,255,255,.88);font-size:1.05rem;margin:0}
.why-grid{display:grid;gap:var(--sp-3);max-width:var(--maxw);margin-inline:auto;grid-template-columns:1fr}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.why-grid{grid-template-columns:repeat(4,1fr)}}
.why-card{
  background:#fff;border-radius:1.8rem;border:3px solid var(--color-primary-brown);
  box-shadow:.35rem .35rem 0 rgba(56,32,20,.5);
  padding:2rem 1.4rem 1.8rem;display:flex;flex-direction:column;align-items:center;gap:.8rem;
  transition:transform .18s ease,box-shadow .18s ease;
}
.why-card:hover{transform:translate(-3px,-4px);box-shadow:.55rem .6rem 0 rgba(56,32,20,.5)}
.why-icon{
  width:4.4rem;height:4.4rem;border-radius:999px;background:var(--tint-purple);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.why-icon svg{width:2.3rem;height:2.3rem}
.why-card h3{color:var(--color-primary-brown);font-family:var(--font-display);font-weight:800;font-size:1.08rem;margin:0}
.why-card p{color:rgba(60,42,30,.72);font-size:.9rem;margin:0}

/* ---------- 12. RECIPES / ARTICLES ---------- */
.recipe-panel{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-soft);padding:var(--sp-4)}
.recipe-grid{display:grid;gap:var(--sp-4);align-items:center}
.recipe-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.recipe-list a{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);
  background:var(--tint-yellow);border-radius:var(--r-md);padding:1rem 1.4rem;
  text-decoration:none;font-family:var(--font-display);font-weight:700;color:var(--color-primary-brown);
  transition:transform .15s ease,background .15s ease;
}
.recipe-list li:nth-child(2) a{background:var(--color-bg-lilac)}
.recipe-list li:nth-child(3) a{background:var(--tint-blue)}
.recipe-list a:hover{transform:translateX(6px);color:var(--color-primary-orange)}
.recipe-photo{
  border-radius:var(--r-lg);aspect-ratio:4/3;background:var(--tint-purple);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-3);
}
.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-3)}
.article-card{
  text-decoration:none;color:var(--color-primary-brown);background:#fff;border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .18s ease;display:block;
}
.article-card:hover{transform:translateY(-6px);color:var(--color-primary-orange)}
.article-card .thumb{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:1.6rem}
.article-card h3{padding:var(--sp-2) var(--sp-2) 0;font-size:1.05rem}
.article-card p{padding:0 var(--sp-2) var(--sp-2);font-size:.88rem;color:rgba(60,42,30,.7)}

/* ---------- 13. MARQUEE STRIP (static repeat, scalloped) ---------- */
.marquee-band{
  background:var(--color-primary-orange);color:#fff;padding:1rem 0;margin-block:var(--sp-5);
  border-block:6px dotted rgba(255,255,255,.35);overflow:hidden;
}
.marquee-band .strip{
  display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;white-space:nowrap;
}
.marquee-band .strip span{display:flex;align-items:center;gap:.5rem}
.marquee-band svg{width:1.3rem;height:1.3rem}

/* ---------- 14. REVIEWS ---------- */
.review-grid{display:grid;gap:var(--sp-4);align-items:center}
.review-card{background:#fff;border-radius:var(--r-md);padding:var(--sp-3);box-shadow:var(--shadow-soft);margin-bottom:var(--sp-2)}
.review-card:nth-child(2){background:var(--tint-purple)}
.review-card:nth-child(3){background:var(--tint-yellow)}
.review-card figcaption{font-family:var(--font-display);font-weight:700;color:var(--color-primary-purple)}
.review-collage{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.review-collage .tile{
  aspect-ratio:1;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;padding:1.4rem;
}
.review-collage .tile:nth-child(2){transform:translateY(14px)}
.review-collage .tile:nth-child(3){transform:translateY(-14px)}

/* ---------- 15. JOIN CAPSULE ---------- */
.join-capsule{
  background:var(--color-bg-blue);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-4);
  display:grid;gap:var(--sp-3);align-items:center;text-align:center;
}
.join-capsule .mascot-line{display:flex;justify-content:center;gap:var(--sp-2)}
.join-capsule .mascot{width:4.6rem;height:4.6rem;background:#fff;border-radius:var(--r-full);padding:.55rem;box-shadow:var(--shadow-soft)}
.newsletter{display:flex;flex-wrap:wrap;gap:var(--sp-1);justify-content:center}
.newsletter input[type="email"]{
  font:inherit;border:2px solid transparent;border-radius:var(--r-full);
  padding:.8rem 1.4rem;min-width:min(280px,100%);background:#fff;
}
.newsletter input[type="email"]:focus-visible{border-color:var(--color-primary-purple);outline:none}

/* ---------- 16. FOOTER (hills) ---------- */
.footer-hills{display:block;width:100%;margin-bottom:-2px}
.site-footer{background:var(--color-primary-brown);color:#fff}
.footer-grid{
  display:grid;gap:var(--sp-4);padding-block:var(--sp-5);
  grid-template-columns:1fr;
}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:var(--sp-1)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.site-footer a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.92rem}
.site-footer a:hover{color:#fff}
.footer-brand p{color:rgba(255,255,255,.75);font-size:.9rem;max-width:22rem}
.social-row{display:flex;gap:.7rem;margin-top:var(--sp-1)}
.social-row a{
  width:2.5rem;height:2.5rem;border-radius:var(--r-full);background:rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease;
}
.social-row a:hover{background:rgba(255,255,255,.25)}
.social-row svg{width:1.15rem;height:1.15rem;fill:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.18);padding-block:var(--sp-2);
  display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);justify-content:space-between;
  font-size:.78rem;color:rgba(255,255,255,.62);
}

/* ---------- 17. PAGE HERO (interior pages) ---------- */
.page-hero{padding-block:var(--sp-5) var(--sp-4);text-align:center}
.page-hero .lede{margin-inline:auto}
.crumbs{font-size:.82rem;margin-bottom:var(--sp-2)}
.crumbs a{text-decoration:none}

/* ---------- 18. SHOP FILTERS / TEXTURE TABLE ---------- */
.filter-row{display:flex;flex-wrap:wrap;gap:var(--sp-1);justify-content:center;margin-bottom:var(--sp-4)}
.filter-chip{
  font-family:var(--font-display);font-weight:700;font-size:.9rem;text-decoration:none;
  color:var(--color-primary-brown);background:#fff;border:2px solid rgba(103,57,34,.18);
  padding:.55rem 1.3rem;border-radius:var(--r-full);display:inline-flex;gap:.5rem;align-items:center;
}
.filter-chip:hover,.filter-chip[aria-current="true"]{border-color:var(--color-primary-purple);color:var(--color-primary-purple);background:var(--tint-purple)}
.filter-chip .mascot{width:1.4rem;height:1.4rem}
.texture-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-soft)}
.texture-table caption{
  font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--color-primary-brown);
  padding:var(--sp-3) var(--sp-2) var(--sp-1);text-align:left;
}
.texture-table th,.texture-table td{padding:.9rem 1.1rem;text-align:left;font-size:.92rem;border-bottom:1px solid var(--color-bg-cream)}
.texture-table thead th{background:var(--tint-purple);font-family:var(--font-display);font-weight:700;color:var(--color-primary-brown)}
.texture-table tbody tr:last-child td{border-bottom:none}
.dot-scale{letter-spacing:.15em}

/* ---------- 19. PRODUCT DETAIL ---------- */
.pdp-grid{display:grid;gap:var(--sp-4);align-items:start}
.pdp-gallery{position:sticky;top:6rem}
.pdp-main{
  border-radius:var(--r-lg);aspect-ratio:1;background:#fff;box-shadow:var(--shadow-soft);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4);position:relative;
}
.pdp-main .mascot{position:absolute;top:1rem;right:1rem;width:4rem;height:4rem}
.pdp-thumbs{display:flex;gap:var(--sp-1);margin-top:var(--sp-2)}
.pdp-thumbs span{
  flex:1;aspect-ratio:1;border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-soft);
  display:flex;align-items:center;justify-content:center;padding:.9rem;
}
.trust-row{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-block:var(--sp-2)}
.trust-badge{
  display:inline-flex;align-items:center;gap:.45rem;background:#fff;border-radius:var(--r-full);
  padding:.45rem 1rem;font-size:.8rem;font-weight:700;box-shadow:var(--shadow-soft);
}
.trust-badge svg{width:1.1rem;height:1.1rem}
.pdp-price{font-family:var(--font-display);font-weight:800;font-size:1.9rem;color:var(--color-primary-brown)}
.qty-form{display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center;margin-block:var(--sp-2)}
.qty-form input[type="number"]{
  font:inherit;width:5.2rem;padding:.75rem;border:2px solid rgba(103,57,34,.2);
  border-radius:var(--r-full);text-align:center;background:#fff;
}
.ingredient-list{list-style:none;padding:0;margin:0 0 var(--sp-2);display:flex;flex-wrap:wrap;gap:.5rem}
.ingredient-list li{background:var(--tint-yellow);border-radius:var(--r-full);padding:.35rem 1rem;font-size:.85rem;font-weight:600}
.spec-box{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-soft);padding:var(--sp-3);margin-block:var(--sp-2)}

/* ---------- 20. STORY / MANIFESTO ---------- */
.manifesto{
  background:var(--tint-purple);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-4);  font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,2.6vw,1.5rem);
  color:var(--color-primary-brown);text-align:center;line-height:1.55;
}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.timeline li{
  background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-soft);
  padding:var(--sp-3);display:grid;gap:var(--sp-2);grid-template-columns:auto 1fr;align-items:start;
}
.timeline .mark{
  width:3.2rem;height:3.2rem;border-radius:var(--r-full);background:var(--color-bg-yellow);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:800;color:var(--color-primary-brown);
}

/* ---------- 21. JOURNEY (education hub) ---------- */
.stage-card{
  border-radius:var(--r-lg);padding:var(--sp-4);display:grid;gap:var(--sp-2);
  grid-template-columns:auto 1fr;align-items:center;box-shadow:var(--shadow-soft);margin-bottom:var(--sp-3);
}
.stage-card .mascot{width:5.4rem;height:5.4rem;background:#fff;border-radius:var(--r-full);padding:.65rem}
.stage-6{background:var(--tint-purple)}
.stage-8{background:var(--color-bg-lilac)}
.stage-12{background:var(--tint-yellow)}
.stage-card ul{margin:.3rem 0 0;padding-left:1.1rem;font-size:.94rem}

/* ---------- 22. SUPPORT: FAQ + FORM ---------- */
.faq details{
  background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-soft);
  margin-bottom:var(--sp-2);overflow:hidden;
}
.faq summary{
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--color-primary-brown);
  padding:1.1rem 1.4rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--sp-2);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--color-primary-orange);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--color-primary-orange)}
.faq .faq-body{padding:0 1.4rem 1.2rem;font-size:.95rem;color:rgba(60,42,30,.8)}
.contact-form{display:grid;gap:var(--sp-2);background:#fff;border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-soft)}
.contact-form label{font-family:var(--font-display);font-weight:700;font-size:.95rem;display:grid;gap:.4rem}
.contact-form input,.contact-form select,.contact-form textarea{
  font:inherit;padding:.8rem 1.1rem;border:2px solid rgba(103,57,34,.18);
  border-radius:var(--r-md);background:var(--color-bg-cream);width:100%;
}
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{
  border-color:var(--color-primary-purple);outline:none;
}
.info-cards{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.info-card{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-soft);padding:var(--sp-3)}
.info-card svg{width:2rem;height:2rem;margin-bottom:.6rem}

/* ---------- 23. UTILITIES ---------- */
.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}
.mb-4{margin-bottom:var(--sp-4)}
.grid-2{display:grid;gap:var(--sp-4)}
.pad-inner{padding:var(--sp-4)}

/* ---------- 24. RESPONSIVE ---------- */
@media(min-width:700px){
  .hero-grid{grid-template-columns:1.05fr 1fr}
  .journey-grid{grid-template-columns:1.1fr 1fr;padding-inline:var(--sp-4)}
  .recipe-grid{grid-template-columns:1fr 1.1fr}
  .review-grid{grid-template-columns:1.1fr 1fr}
  .join-capsule{grid-template-columns:auto 1fr;text-align:left}
  .join-capsule .newsletter{justify-content:flex-start}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.3fr}
  .pdp-grid{grid-template-columns:1fr 1.1fr}
  .grid-2{grid-template-columns:1fr 1fr}
  .contact-form .form-row{display:grid;gap:var(--sp-2);grid-template-columns:1fr 1fr}
}
@media(max-width:699px){
  .pdp-gallery{position:static}
  .main-nav>ul{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .main-nav>ul::-webkit-scrollbar{display:none}
  .nav-drop>.drop-panel{left:0;transform:translate(0,10px)}
  .nav-drop:hover>.drop-panel,.nav-drop:focus-within>.drop-panel{transform:translate(0,0)}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* ================================================================
   HOMEPAGE STYLES — animated Earth's Best anatomy, Groomy CI
   (page-scoped; shared tokens/components come from styles.css)
   ================================================================ */

/* ---------- Animations ---------- */
@keyframes floaty      {0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(4deg)}}
@keyframes floaty-rev  {0%,100%{transform:translateY(-8px) rotate(5deg)}50%{transform:translateY(8px) rotate(-3deg)}}
@keyframes bob         {0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes wiggle      {0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes marquee     {from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fade-up     {from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop-in      {0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}

.floaty{animation:floaty 5.5s ease-in-out infinite}
.floaty-rev{animation:floaty-rev 6.5s ease-in-out infinite}
.wiggle{animation:wiggle 3.5s ease-in-out infinite;transform-origin:50% 100%}

/* Scroll-triggered reveals (progressive enhancement) */
.reveal{animation:fade-up .8s ease both}
@supports (animation-timeline: view()) {
  .reveal{animation:fade-up 1s ease both;animation-timeline:view();animation-range:entry 0% entry 42%}
}
@media (prefers-reduced-motion:reduce){
  .floaty,.floaty-rev,.wiggle,.reveal,.hero-arrow,.marquee-track,.pop{animation:none!important}
}

/* ---------- HERO SLIDER (pure CSS, EB arrows + dots) ---------- */
.hero{background:var(--color-bg-cream);overflow:hidden;position:relative;min-height:calc(100vh - 40px);display:flex;flex-direction:column;justify-content:center}
.hero input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.hero-viewport{overflow:hidden}
.hero-track{display:flex;width:200%;transition:transform .55s cubic-bezier(.6,.05,.2,1)}
#hs2:checked ~ .hero-viewport .hero-track{transform:translateX(-50%)}
.hero-slide{width:50%;flex:none}
.hero-inner{
  max-width:var(--maxw);margin-inline:auto;padding:3.4rem var(--sp-3) 4.2rem;
  display:grid;gap:var(--sp-5);align-items:center;
}
@media(min-width:820px){.hero-inner{grid-template-columns:1.02fr 1fr;padding-top:4rem}}
.hero-copy .eyebrow{color:var(--color-primary-brown);opacity:.7;letter-spacing:.14em;font-size:1.05rem}
.hero-copy h1,.hero-copy .h1{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.9rem,6.6vw,4.8rem);line-height:1;color:var(--color-primary-brown);
  margin:0 0 var(--sp-3);
}
.hero-copy p.lede{margin-bottom:var(--sp-4);font-size:1.32rem;max-width:38rem;line-height:1.5}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.hero-ctas .btn{font-size:1.25rem;padding:1.15rem 2.6rem}
.btn-shadow{box-shadow:.28rem .28rem 0 var(--color-primary-brown)}
.btn-shadow:hover{box-shadow:.16rem .16rem 0 var(--color-primary-brown);transform:translate(2px,2px)}

/* Blob artwork w/ real photo + floating bits */
.hero-art{position:relative;min-height:440px}
.hero-blob{
  position:absolute;inset:4% 0;background:var(--color-primary-orange);
  border-radius:58% 42% 55% 45%/50% 58% 42% 50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  padding:var(--sp-4);text-align:center;box-shadow:var(--shadow-soft);
}
.hero-blob.blob-lilac{background:var(--color-bg-lilac)}
.hero-blob .blob-kicker{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3.3vw,2.3rem);
  color:var(--color-primary-brown);transform:rotate(-3deg);
}
.blob-photo{
  width:min(66%,400px);aspect-ratio:1;border-radius:2.4rem;object-fit:cover;
  border:8px solid #fff;box-shadow:var(--shadow-lift);transform:rotate(2deg);
}
.hero-float{position:absolute;filter:drop-shadow(0 10px 14px rgba(103,57,34,.25))}
.hero-float .mascot{width:100%;height:100%;background:#fff;border-radius:999px;padding:12%;box-shadow:var(--shadow-soft);display:block}
.hf-1{width:7.2rem;height:7.2rem;top:2%;left:2%}
.hf-2{width:6rem;height:6rem;bottom:6%;left:8%}
.hf-3{width:6.5rem;height:6.5rem;top:8%;right:4%}
.hf-berry{width:3.6rem;height:3.6rem;bottom:0;right:12%;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:var(--ico)}
.hf-leaf{width:3rem;height:3rem;top:36%;left:-2%;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:var(--ico)}
.float-chip{
  position:absolute;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-lift);
  padding:.75rem 1.25rem;font-size:.95rem;font-weight:800;color:var(--color-primary-brown);
  display:flex;gap:.5rem;align-items:center;z-index:2;
}
.fc-tl{top:-2%;left:-1%}
.fc-br{bottom:-3%;right:-1%}

/* ---------- YOUR LITTLE ONE (yellow band; title + card grid defined in appended CSS) ---------- */
.little-band{
  background:var(--color-bg-yellow);
  border-radius:3rem;
  padding:var(--sp-5) 0 var(--sp-6);position:relative;overflow:hidden;
}

/* ---------- FOOD PHILOSOPHY — concentric ring badge (icons + circular text), scroll parallax ---------- */
.philosophy{
  background:var(--tint-orange);position:relative;overflow:visible;
  padding:var(--sp-6) var(--sp-3);text-align:center;border-radius:3rem;
  display:flex;align-items:center;justify-content:center;
}
.ring-badge{position:relative;width:min(98vw,1600px);aspect-ratio:1;margin:0 auto}
.ring-food-group{position:absolute;inset:0;will-change:transform}
.ring-icon{
  --r:min(42vw,680px);
  position:absolute;top:50%;left:50%;
  width:clamp(5.5rem,9vw,10.5rem);height:clamp(5.5rem,9vw,10.5rem);font-size:clamp(4rem,6.5vw,7rem);line-height:1;
  display:flex;align-items:center;justify-content:center;
  background-image:var(--ico);background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 8px 14px rgba(103,57,34,.26));opacity:1;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(var(--a) * -1));
}
.ring-text{position:absolute;inset:0;will-change:transform}
.ring-text text{
  font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.03em;
  fill:var(--color-primary-purple);text-transform:uppercase;
}
.ring-center{
  position:absolute;inset:30%;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  color:var(--color-primary-brown);font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,7.5vw,4.2rem);line-height:1.12;padding:1rem;text-align:center;
}
.ring-sparkle{position:absolute;bottom:-2%;right:2%;font-size:3rem;color:var(--color-bg-yellow);z-index:2}
@media(prefers-reduced-motion:reduce){  .ring-food-group,.ring-text{transform:none!important}
}


/* ---------- JOURNEY BAND (purple, floating products) ---------- */
.journey{background:var(--color-primary-purple);border-radius:var(--r-lg);overflow:hidden;position:relative;color:#fff}
.journey-inner{display:grid;gap:var(--sp-4);align-items:center;padding:var(--sp-5) var(--sp-4)}
@media(min-width:820px){.journey-inner{grid-template-columns:1.05fr 1fr}}
.journey h2{
  color:#fff;text-transform:uppercase;font-size:clamp(2rem,5vw,3.2rem);line-height:1;margin:0 0 var(--sp-2);
}
.journey .lede{color:rgba(255,255,255,.88)}
.journey-art{position:relative;min-height:280px}
.j-img{
  position:absolute;width:52%;aspect-ratio:4/5;object-fit:cover;border-radius:1.6rem;
  border:6px solid #fff;box-shadow:var(--shadow-lift);
}
.j-1{top:4%;left:4%;transform:rotate(-7deg)}
.j-2{bottom:2%;right:6%;transform:rotate(6deg);width:48%}
.j-fruit{position:absolute;font-size:2.4rem;filter:drop-shadow(0 8px 10px rgba(0,0,0,.25))}
.jf-1{top:0;right:18%}.jf-2{bottom:8%;left:0}

/* ---------- RECIPES + PARENTING TIPS — full-bleed combined section ---------- */
.recipes-combo{background:#fff;padding:var(--sp-6) var(--sp-3);border-radius:3rem}
.recipe-tabs-input{position:absolute;opacity:0;pointer-events:none}
.recipe-top-grid{display:grid;gap:var(--sp-4);align-items:start;max-width:var(--maxw);margin-inline:auto}
@media(min-width:820px){.recipe-top-grid{grid-template-columns:1fr 1.3fr}}
.recipe-top-grid h2{text-transform:uppercase;font-size:clamp(4rem,10vw,7.5rem);line-height:.88;letter-spacing:-.01em}
.recipe-content{position:relative}
.recipe-tabs{display:flex;flex-direction:column;gap:1.1rem}
.racc{
  display:flex;justify-content:flex-start;align-items:center;gap:.6rem;
  border-radius:1.6rem;padding:1.7rem 2rem;cursor:pointer;
  font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--color-primary-brown);
  background:#fbf3d8;border:2px solid transparent;box-shadow:none;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;
}
@media(min-width:640px){.racc{padding-right:1.4rem}} /* text stays left; photo overlaps the empty right side */
.racc::after{content:"+";font-size:1.7rem;line-height:1;flex:none}
.racc:hover{transform:translateX(3px)}
#rt1:checked ~ .recipe-top-grid .racc-1,
#rt2:checked ~ .recipe-top-grid .racc-2,
#rt3:checked ~ .recipe-top-grid .racc-3{
  background:var(--color-bg-yellow);border-color:var(--color-primary-brown);
  box-shadow:.22rem .22rem 0 rgba(103,57,34,.85);
}
.recipe-photo-stage{position:relative;width:16rem;aspect-ratio:4/5;margin:var(--sp-3) auto 0}
@media(min-width:640px){
  .recipe-photo-stage{
    position:absolute;top:50%;right:.5rem;transform:translateY(-50%);
    width:15rem;height:18.75rem;margin:0;
  }
}
@media(min-width:900px){.recipe-photo-stage{width:19.5rem;height:24.4rem;right:1.2rem}}
@media(min-width:1200px){.recipe-photo-stage{width:23rem;height:28.75rem;right:1.6rem}}
.rp{
  position:absolute;inset:0;border-radius:1.4rem;background-size:contain;background-repeat:no-repeat;
  background-position:center;border:3px solid #fff;box-shadow:var(--shadow-lift);
  opacity:0;transform:rotate(3deg) scale(.9);
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
#rt1:checked ~ .recipe-top-grid .rp1,
#rt2:checked ~ .recipe-top-grid .rp2,
#rt3:checked ~ .recipe-top-grid .rp3{opacity:1;transform:rotate(-2deg) scale(1);pointer-events:auto}
.rp .learn-btn{
  position:absolute;bottom:-1.1rem;left:50%;transform:translateX(-50%);
  background:var(--color-primary-brown);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:.92rem;
  padding:.6rem 1.5rem;border-radius:999px;box-shadow:var(--shadow-soft);
  text-decoration:none;white-space:nowrap;transition:transform .15s ease;
}
.rp .learn-btn:hover{transform:translateX(-50%) translateY(-3px)}

/* Parenting tips block, same card */
.tips-divider{border:none;border-top:1.5px dashed rgba(103,57,34,.2);margin:var(--sp-5) 0 var(--sp-4)}
.tips-head{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:space-between;align-items:end;margin-bottom:var(--sp-3)}
.tips-head h2{margin:0;font-size:clamp(2.2rem,5vw,3.4rem);line-height:.95;text-transform:uppercase}
.tip-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tip-card{display:block;text-decoration:none;color:var(--color-primary-brown)}
.tip-card .tip-photo{
  display:block;width:100%;aspect-ratio:4/5;background-size:cover;background-position:center;
  border-radius:1.6rem;box-shadow:var(--shadow-soft);
  transition:transform .22s ease,box-shadow .22s ease;
}
.tip-card:hover .tip-photo{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--shadow-lift)}
.tip-card h3{font-size:1.05rem;margin:.8rem 0 0}
.tip-card:hover h3{color:var(--color-primary-orange)}
.tip-card .more{font-family:var(--font-display);font-weight:800;font-size:.85rem}

/* ---------- MARQUEE (scalloped, animated) ---------- */
.marquee{
  background:var(--color-primary-purple);color:#fff;padding:1.2rem 0;overflow:hidden;position:relative;
  margin:0;
}
.marquee-wave{display:block;width:100%}
.marquee-wave-top{margin-bottom:-1px}
.marquee-wave-bottom{margin-top:-1px}
.marquee-track{display:flex;gap:3.4rem;width:max-content;will-change:transform}
.marquee-track span{
  display:flex;align-items:center;gap:.8rem;font-family:var(--font-display);font-weight:800;
  font-size:1.1rem;white-space:nowrap;text-transform:lowercase;
}
.marquee-track .mq-ico{
  width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;justify-content:center;flex:none;
  background-size:contain;background-repeat:no-repeat;background-position:center;background-image:var(--ico,none);
}
.marquee-track .mq-ico svg{width:100%;height:100%}
.marquee-track .mq-mascot{
  width:2.3rem;height:2.3rem;border-radius:999px;background-color:#fff;
  box-shadow:0 3px 6px rgba(103,57,34,.2);flex:none;
}

/* ---------- REVIEWS — scroll-pinned, continuous parallax drift ---------- */
.reviews-pin-wrap{position:relative;height:420vh}
.reviews2{
  position:sticky;top:0;height:100vh;width:100%;
  background:var(--color-primary-orange);color:#fff;
  display:flex;align-items:center;justify-content:center;overflow:visible;
  border-radius:3rem 3rem 0 0;
}
.reviews2-headline{
  font-family:var(--font-display);font-weight:800;color:#fdf8ee;text-align:center;
  font-size:clamp(2.2rem,7vw,4.6rem);line-height:1.08;margin:0;max-width:20ch;position:relative;z-index:1;
}
.rv-bubble{
  position:absolute;background:var(--color-bg-yellow);color:var(--color-primary-brown);
  border-radius:1.4rem;padding:1.6rem 1.9rem 1.8rem;max-width:clamp(320px,27vw,420px);font-size:1.08rem;font-weight:600;
  line-height:1.42;box-shadow:var(--shadow-lift);text-align:center;z-index:2;will-change:transform;
  transform:translateY(0) rotate(var(--rot,0deg));
}
.rv-bubble::after{
  content:"";position:absolute;bottom:-12px;left:30px;
  width:0;height:0;border:13px solid transparent;
  border-top-color:var(--color-bg-yellow);border-bottom:0;margin-left:-13px;
}
.rv-bubble .avatar{
  position:absolute;left:-.9rem;bottom:-1.8rem;
  width:3.5rem;height:3.5rem;border-radius:999px;background:var(--color-primary-purple);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;
  box-shadow:var(--shadow-soft);font-size:1.4rem;border:4px solid var(--color-primary-orange);
}
.rv-bubble .spark{position:absolute;left:3.1rem;bottom:-1.3rem;font-size:1.4rem;color:#fdf8ee}
.rv-bubble .name{display:block;margin-top:.85rem;font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--color-primary-purple)}
@media(max-width:900px){
  .reviews-pin-wrap{height:auto}
  .reviews2{position:static;height:auto;padding:var(--sp-6) var(--sp-3) var(--sp-7);flex-direction:column;gap:var(--sp-4)}
  .rv-bubble{position:relative!important;max-width:26rem;width:100%;transform:rotate(0deg)!important;margin:0 0 2rem}
}
@media(prefers-reduced-motion:reduce){
  .rv-bubble{transform:rotate(var(--rot,0deg))!important}
  .reviews2{position:static;height:auto}
  .reviews-pin-wrap{height:auto}
}

/* ---------- JOIN CAPSULE (navy, animated doodles) ---------- */
.join-section-wrap{position:relative;padding-block:0}
.join{
  background:#dac9ed;color:var(--color-primary-brown);position:relative;overflow:hidden;
  padding:var(--sp-6) 0 var(--sp-7);
}
.join-grid{display:grid;gap:var(--sp-5);align-items:center}
@media(min-width:820px){.join-grid{grid-template-columns:1.1fr 1fr}}
.join-copy{text-align:left}
.join-copy h2{color:var(--color-primary-purple);text-transform:uppercase;font-size:clamp(2.6rem,6.4vw,4.4rem);line-height:.94;margin-bottom:var(--sp-2)}
.join-copy p{color:rgba(60,42,30,.82);max-width:32rem;margin:0 0 var(--sp-3)}
.join .newsletter{justify-content:flex-start}
.join-visual{position:relative;min-height:280px;display:flex;align-items:center;justify-content:center}
@media(max-width:819px){.join-visual{min-height:220px}}
.join-product{
  position:relative;width:64%;max-width:270px;aspect-ratio:3/4;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.35));transform:rotate(-6deg);z-index:1;
}
.join-fruit{
  position:absolute;width:clamp(4rem,9vw,6.5rem);height:clamp(4rem,9vw,6.5rem);
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.32));z-index:2;pointer-events:none;
}
.jf-1{top:4%;left:0%}
.jf-2{bottom:6%;right:2%}
.jf-3{top:44%;right:-2%}

/* ---------- FOOTER (yellow hills, EB-style) ---------- */
.hills{display:block;width:100%;margin-bottom:-2px}
/* Footer overlap wave — global, reused on every page via Elementor.
   It must NOT assume a color for whatever section sits above it, so the
   rect behind the wave path is transparent (fill:none in the markup) and
   the whole SVG is pulled up with a capped negative margin so the real
   section above shows through the gaps instead of a guessed color.
   Height is CLAMPED (not proportional to viewport width) so the overlap
   never exceeds 80px — this requires whatever section precedes the
   footer to reserve at least 96px (--sp-7) of bottom padding, which is
   an existing spacing token already used elsewhere on this site. The
   Join section's bottom padding was bumped to --sp-7 to match. Any new
   page/section template placed directly above the global footer must
   do the same (padding-bottom:var(--sp-7) or 96px minimum), or this
   number needs to come back down — don't raise it without also raising
   that section's clearance. */
.hills-footer{
  position:relative;
  z-index:2;
  height:clamp(40px,6vw,80px);
  margin-top:clamp(-80px,-6vw,-40px);
  margin-bottom:-2px;
  pointer-events:none;
}
.site-footer.yellow{background:var(--color-bg-yellow);color:var(--color-primary-brown);position:relative;overflow:hidden}
.site-footer.yellow h4{color:var(--color-primary-brown)}.site-footer.yellow a{color:rgba(103,57,34,.85)}
.site-footer.yellow a:hover{color:var(--color-primary-orange)}
.site-footer.yellow .footer-brand p{color:rgba(103,57,34,.8)}
.site-footer.yellow .social-row a{background:rgba(103,57,34,.12)}
.site-footer.yellow .social-row a:hover{background:rgba(103,57,34,.25)}
.site-footer.yellow .social-row svg{fill:var(--color-primary-brown)}
.site-footer.yellow .footer-bottom{border-top:1px solid rgba(103,57,34,.2);color:rgba(103,57,34,.7)}

/* ---------- FOOTER EXPLOSION LOGO (Fruit Ninja-style continuous throw) ---------- */
.footer-explode{position:relative;padding:var(--sp-7) 0 var(--sp-6);text-align:center;z-index:1}
.footer-wordmark{
  font-family:var(--font-display);font-weight:800;line-height:.85;
  font-size:clamp(4.5rem,17vw,11.5rem);position:relative;z-index:1;user-select:none;
}
@keyframes fruit-throw{
  0%   {transform:translateY(105vh)   rotate(0deg);  opacity:0}
  3%   {opacity:1}
  5%   {transform:translateY(71vh)    rotate(27deg)}
  10%  {transform:translateY(40.6vh)  rotate(54deg)}
  15%  {transform:translateY(13.7vh)  rotate(81deg)}
  20%  {transform:translateY(-9.6vh)  rotate(108deg)}
  25%  {transform:translateY(-29.2vh) rotate(135deg)}
  30%  {transform:translateY(-45.4vh) rotate(162deg)}
  35%  {transform:translateY(-57.9vh) rotate(189deg)}
  40%  {transform:translateY(-66.8vh) rotate(216deg)}
  45%  {transform:translateY(-72.2vh) rotate(243deg)}
  50%  {transform:translateY(-74vh)   rotate(270deg)}
  55%  {transform:translateY(-72.2vh) rotate(297deg)}
  60%  {transform:translateY(-66.8vh) rotate(324deg)}
  65%  {transform:translateY(-57.9vh) rotate(351deg)}
  70%  {transform:translateY(-45.4vh) rotate(378deg)}
  75%  {transform:translateY(-29.2vh) rotate(405deg)}
  80%  {transform:translateY(-9.6vh)  rotate(432deg)}
  85%  {transform:translateY(13.7vh)  rotate(459deg)}
  90%  {transform:translateY(40.6vh)  rotate(486deg)}
  95%  {transform:translateY(71vh)    rotate(513deg); opacity:1}
  97%  {opacity:0}
  100% {transform:translateY(105vh)   rotate(540deg); opacity:0}
}
.fx-asset{
  position:absolute;bottom:4%;z-index:2;width:clamp(6rem,9vw,8.5rem);height:clamp(6rem,9vw,8.5rem);
  display:flex;align-items:center;justify-content:center;
  background-image:var(--ico);background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 12px 16px rgba(103,57,34,.3));
  opacity:0;animation:fruit-throw var(--dur,5.5s) linear infinite;
  animation-delay:var(--delay,0s);
}
@media(prefers-reduced-motion:reduce){
  .fx-asset{animation:none;opacity:1;bottom:auto;top:10%}
}

:root{
  --img-logo-groomy:url("https://groomy.com.my/wp-content/uploads/2026/07/Groomy-Brand-Logo-01.png");
  --img-bear1:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Bear1.png");
  --img-bear2:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Bear2.png");
  --img-rabbit1:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Rabbit_1.png");
  --img-rabbit2:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Rabbit_2.png");
  --img-fox1:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Fox_1.png");
  --img-fox2:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Fox_2.png");
  --img-pkOriginal:url("https://groomy.com.my/wp-content/uploads/2022/03/pancake-original.png");
  --img-pkBroccoli:url("https://groomy.com.my/wp-content/uploads/2022/03/Pancake-Brokoli.png");
  --img-pkCarrot:url("https://groomy.com.my/wp-content/uploads/2022/03/Pancake-carrot.png");
  --img-pkPumpkin:url("https://groomy.com.my/wp-content/uploads/2022/03/Pancake-Pumpkin.png");
  --img-pkPurple:url("https://groomy.com.my/wp-content/uploads/2022/03/pancake-sweet-potato.png");
  --img-pkSpinach:url("https://groomy.com.my/wp-content/uploads/2022/03/Pancake-spinach.png");
  --img-fox-tomato:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Fox_3.png");
  --img-rabbit-snacks:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Rabbit_3.png");
  --img-bear-oats:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Bear3.png");
  --img-fox-hands:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Fox_4.png");
  --img-bear-porridge:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Bear4.png");
  --img-fox-spoon:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Fox_5.png");
  --img-rabbit-pancake:url("https://groomy.com.my/wp-content/uploads/2026/07/Grommy-Rabbit_4.png");
}
.mascot-img{display:inline-block;background-repeat:no-repeat;background-position:center;background-size:contain}
.m-bear1{background-image:var(--img-bear1)}
.m-bear2{background-image:var(--img-bear2)}
.m-rabbit1{background-image:var(--img-rabbit1)}
.m-rabbit2{background-image:var(--img-rabbit2)}
.m-fox1{background-image:var(--img-fox1)}
.m-fox2{background-image:var(--img-fox2)}

/* ---------- HERO CONTROLS (arrows + dots, bottom-right) ---------- */
.hero-controls{
  position:absolute;bottom:1.3rem;
  right:max(var(--sp-3),calc((100% - var(--maxw))/2 + var(--sp-3)));
  display:flex;align-items:center;gap:.9rem;z-index:5;
}
.hero-dots{display:flex;gap:.6rem}
.hero-dot{width:.95rem;height:.95rem;border-radius:999px;background:rgba(103,57,34,.25);cursor:pointer;transition:background .2s,transform .2s}
#hs1:checked ~ .hero-controls .hero-dots label[for="hs1"],
#hs2:checked ~ .hero-controls .hero-dots label[for="hs2"]{background:var(--color-primary-brown);transform:scale(1.25)}
.hero-arrows{display:flex;gap:.7rem}
.hero-arrow{
  width:3.2rem;height:3.2rem;border-radius:999px;background:#fff;border:2px solid var(--color-primary-brown);
  box-shadow:.2rem .2rem 0 var(--color-primary-brown);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--color-primary-brown);
  transition:transform .15s ease,box-shadow .15s ease;animation:bob 3s ease-in-out infinite;
}
.hero-arrow:hover{transform:translate(2px,2px);box-shadow:.08rem .08rem 0 var(--color-primary-brown)}

/* ---------- YOUR LITTLE ONE — giant title, gently overlaid by 2-row card grid ---------- */
.little-wrap{position:relative}
.little-title{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;text-align:center;
  font-size:clamp(3.4rem,15vw,10.5rem);color:rgba(255,255,255,.8);letter-spacing:.01em;line-height:.88;
  margin:0 0 clamp(-.6rem,-1.6vw,-1rem);position:relative;z-index:1;user-select:none;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-inline:.4rem;
}
.age-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
@media(min-width:640px){.age-grid{grid-template-columns:repeat(3,1fr)}}
.age-card{
  background:#fff;border:3px solid var(--color-primary-brown);border-radius:1.8rem;
  box-shadow:.35rem .35rem 0 rgba(103,57,34,.9);
  text-decoration:none;color:var(--color-primary-brown);text-align:center;
  padding:2rem 1.2rem 1.6rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.2rem;line-height:1.15;
  transition:transform .16s ease,box-shadow .16s ease;
}
.age-card:hover{transform:translate(-3px,-4px);box-shadow:.6rem .65rem 0 rgba(103,57,34,.9);color:var(--color-primary-orange)}
.age-card .mascot-img,.age-card .mascot{width:4.6rem;height:4.6rem}
.age-card small{font-family:var(--font-body);font-weight:600;font-size:.86rem;text-transform:none;color:rgba(60,42,30,.65)}

/* ---------- SHOP BY CATEGORY — carousel, bigger circles + halo depth ---------- */
.cats{padding:var(--sp-6) 0}
.cats-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.cats-head h2{margin:0;text-align:left;font-size:clamp(1.4rem,3vw,1.8rem);text-transform:uppercase;letter-spacing:.02em}
.cat-nav{display:flex;gap:.6rem}
.cat-scroller{
  display:flex;gap:var(--sp-4);overflow-x:auto;padding:1.6rem .2rem 1.4rem;
  scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;
}
.cat-scroller::-webkit-scrollbar{display:none}
.cat-card{
  flex:0 0 300px;scroll-snap-align:start;scroll-margin-left:var(--sp-3);
  text-decoration:none;text-align:center;color:var(--color-primary-brown);position:relative;
}
.cat-ring-wrap{position:relative;margin:0 auto var(--sp-3);width:100%}
.cat-halo{
  position:absolute;inset:0;border-radius:999px;opacity:.4;z-index:0;
  transform:translate(7%,9%);
}
.cat-ring{
  position:relative;z-index:1;aspect-ratio:1;border-radius:999px;
  box-shadow:var(--shadow-soft);transition:transform .22s ease,box-shadow .22s ease;
  overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;
}
.cat-ring.photo-fill img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.cat-card:hover .cat-ring{transform:scale(1.05);box-shadow:var(--shadow-lift)}
.cat-card:hover .cat-ring.photo-fill img{transform:scale(1.09)}
.cat-ring.box-float{overflow:visible}
.cat-ring.box-float img{
  width:80%;object-fit:contain;transform:rotate(-6deg) translateY(-4%);transition:transform .3s var(--ease-spring,ease);
  filter:drop-shadow(0 14px 18px rgba(103,57,34,.28));
}
.cat-card:hover .cat-ring.box-float img{transform:rotate(2deg) translateY(-4%) scale(1.06)}
.cat-card b{font-family:var(--font-display);font-size:1.15rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.cat-card:hover b{color:var(--color-primary-orange)}
.cat-card span.sub{display:block;font-family:var(--font-body);font-weight:600;font-size:.85rem;color:rgba(60,42,30,.6);text-transform:none;margin-top:.15rem}




/* ---------- PRODUCTS TO TRY — pop-out ingredient carousel ---------- */
:root{--ease-spring:cubic-bezier(.34,1.56,.64,1)}
.try{padding:var(--sp-6) 0}
.try-head{margin-bottom:var(--sp-3)}
.try-head h2{text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
@media(min-width:700px){.product-grid{grid-template-columns:repeat(3,1fr)}}
.p-card{
  text-align:center;text-decoration:none;color:var(--color-primary-brown);
}
.p-circle{
  position:relative;aspect-ratio:1;border-radius:999px;background:#fff;
  box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:center;  margin-bottom:var(--sp-3);transition:background-color .32s var(--ease-spring),box-shadow .32s var(--ease-spring),transform .32s var(--ease-spring);
}
.p-card:hover .p-circle{background-color:#dcecd3;box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.p-photo{
  width:64%;object-fit:contain;position:relative;z-index:3;
  filter:drop-shadow(0 14px 18px rgba(103,57,34,.28));
  transform:rotate(-4deg);transition:transform .32s var(--ease-spring);
}
.p-card:hover .p-photo{transform:rotate(2deg) scale(1.05)}
.ingredient{
  position:absolute;top:50%;width:clamp(6.5rem,13vw,10rem);height:clamp(6.5rem,13vw,10rem);font-size:clamp(4.6rem,9vw,7rem);line-height:1;
  background-image:var(--ico);background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 8px 14px rgba(103,57,34,.28));
  display:flex;align-items:center;justify-content:center;z-index:2;
  opacity:0;transform:translate(calc(-50% + var(--hide-x,0)),-50%) scale(.88) rotate(var(--rot,0deg));
  transition:opacity .32s var(--ease-spring),transform .32s var(--ease-spring);
}
.p-card:hover .ingredient{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--rot,0deg))}
.ing-l1{left:10%;top:78%;--hide-x:2.8rem;--rot:-38deg}
.ing-l2{left:4%; top:74%;--hide-x:2.8rem;--rot:-38deg}
.ing-r1{left:90%;top:78%;--hide-x:-2.8rem;--rot:38deg}
.ing-r2{left:96%;top:74%;--hide-x:-2.8rem;--rot:38deg}
.p-card:hover .ing-l2,.p-card:hover .ing-r2{transition-delay:.04s}
.age-flag{
  position:absolute;top:5%;left:50%;transform:translateX(-50%) rotate(-2deg);background:var(--color-primary-purple);color:#fff;
  font-size:.78rem;font-weight:800;padding:.32rem .95rem;border-radius:999px;letter-spacing:.04em;z-index:4;
}
.p-card h3{font-size:1.15rem;margin:.2rem 0 .2rem;line-height:1.28}
.p-card .stars{font-size:.9rem}
.p-card .price{font-family:var(--font-display);font-weight:800;font-size:1.1rem;margin:.2rem 0 0}