/* ==========================================================================
   Makhana Box — shared stylesheet
   Palette: pond-deep / pond-mid (greens), cream / paper (warm neutrals),
   husk (roasted brown), marigold (accent), ripple (soft sage)
   Type: Fraunces (display) / Work Sans (body) / Space Mono (labels, data)
   ========================================================================== */

:root{
  --pond-deep:#1ab48e;
  --pond-mid:#5FCBB0;
  --cream:#F6F1E3;
  --paper:#FBF8F1;
  --husk:#000000;
  --marigold:#FFD166;
  --ripple:#7FA595;
  --ink:#1C2620;
  --ink-soft:#4A564C;
  --line:rgba(28,38,32,0.1);
  --radius-lg:28px;
  --radius-sm:14px;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

/* ---------- Scrollbar ---------- */
html{scrollbar-width:thin;scrollbar-color:var(--marigold) var(--cream);}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--cream);}
::-webkit-scrollbar-thumb{
  background-color:var(--marigold);
  border-radius:100px;
  border:3px solid var(--cream);
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background-color:var(--husk);}

body{
  font-family:'Work Sans',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-0.01em;line-height:1.05;}
.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--husk);
}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:100;
  background:var(--marigold);color:var(--ink);
  padding:12px 20px;border-radius:100px;font-weight:600;font-size:0.9rem;
  transition:top .2s ease;
}
.skip-link:focus{top:16px;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
main{display:block;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:100px;
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:0.95rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary{background:var(--marigold);color:var(--ink);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,209,102,0.45);}
.btn-ghost{border:1.5px solid rgba(251,248,241,0.4);color:var(--paper);}
.btn-ghost:hover{background:rgba(251,248,241,0.1);}
.btn-outline{border:1.5px solid var(--pond-deep);color:var(--pond-deep);}
.btn-outline:hover{background:var(--pond-deep);color:var(--paper);}
.btn svg{width:18px;height:18px;flex-shrink:0;}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(26,180,142,0.92);
  backdrop-filter:blur(10px);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;}
.logo{display:flex;align-items:center;gap:10px;color:var(--paper);}
.logo-img{height:50px;width:auto;flex-shrink:0;}
.logo-word{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:600;letter-spacing:0.01em;}
nav.links{display:flex;gap:34px;}
nav.links a{color:var(--paper);opacity:0.82;font-size:0.95rem;font-weight:500;transition:opacity .15s;}
nav.links a:hover,nav.links a[aria-current="page"]{opacity:1;}
nav.links a[aria-current="page"]{border-bottom:1.5px solid var(--marigold);padding-bottom:3px;}
.nav-cta{display:flex;align-items:center;gap:18px;}
.menu-toggle{display:none;color:var(--paper);}
.menu-toggle svg{width:24px;height:24px;}

/* Wider than the other 820px component breakpoints below — 9 nav items need more
   room before they wrap, so the header switches to the hamburger menu earlier. */
@media (max-width:1220px){
  nav.links{display:none;}
  .menu-toggle{display:block;}
  header.open nav.links{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:var(--pond-deep);padding:10px 28px 24px;
  }
  header.open nav.links a{padding:12px 0;border-bottom:1px solid rgba(251,248,241,0.1);}
}

/* Tighter header + buttons on phones — logo, nav-row padding and the cart/Order
   pill were sized for desktop and crowd the row on narrow screens. */
@media (max-width:480px){
  .nav-row{padding:12px 10px;}
  .logo-img{height:42px;}
  .btn{padding:8px 15px;}
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  background:var(--cream);padding:16px 28px;
  font-family:'Space Mono',monospace;font-size:0.76rem;
  color:var(--husk);letter-spacing:0.02em;
}
.breadcrumbs .wrap{display:flex;gap:8px;flex-wrap:wrap;}
.breadcrumbs a{color:var(--ink-soft);}
.breadcrumbs a:hover{color:var(--pond-deep);}
.breadcrumbs span[aria-current]{color:var(--husk);}

/* ---------- Page hero (non-home pages) ---------- */
.page-hero{
  position:relative;overflow:hidden;
  background-color:var(--pond-deep);
  color:var(--paper);
  padding:70px 28px 84px;
  text-align:center;
}
/* Real <img> + overlay div rather than a layered CSS background-image, for the
   same cross-browser reliability reason as .hero-bg/.hero-overlay above. */
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;}
.page-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background-image:radial-gradient(circle at 50% 20%, rgba(95,203,176,0.62), rgba(26,180,142,0.92) 75%);
}
.page-hero .ripple-field{z-index:1;}
/* Keeps the heading/text above the absolutely-positioned decoration layers. */
.page-hero > *:not(.ripple-field):not(.page-hero-bg):not(.page-hero-overlay){position:relative;z-index:2;}
.page-hero .eyebrow{color:var(--marigold);margin-bottom:16px;}
.page-hero h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:16px;}
.page-hero p{max-width:560px;margin:0 auto;color:rgba(251,248,241,0.8);font-size:1.05rem;}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;overflow:hidden;
  background-color:var(--pond-deep);
  color:var(--paper);
  padding:70px 44px 95px;
  text-align:center;
}
/* A real <img> with object-fit, not a CSS background-image, because several
   mobile/in-app browsers (WhatsApp/Instagram webviews, older Android WebView)
   handle a layered `background-image: gradient, url(...)` + `background-size:
   cover` inconsistently — sometimes sizing the photo layer wrong entirely.
   An <img> + a separate overlay div for the gradient is far more reliably
   "always fills its box" across engines. */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(180deg, rgba(15,28,23,0.28) 0%, rgba(15,28,23,0.48) 55%, rgba(12,24,19,0.8) 100%);
}
.ripple-field{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.ripple-field svg{width:min(900px,140vw);height:auto;opacity:0.5;}
.ripple-field circle{
  fill:none;stroke:var(--ripple);stroke-width:1;
  r:20;
  transform-origin:350px 350px;
  animation:ripple 5.5s ease-out infinite;
}
.ripple-field circle:nth-child(2){animation-delay:1.1s;}
.ripple-field circle:nth-child(3){animation-delay:2.2s;}
.ripple-field circle:nth-child(4){animation-delay:3.3s;}
@keyframes ripple{
  0%{transform:scale(1);opacity:0.9;}
  100%{transform:scale(17);opacity:0;}
}
.hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.hero .eyebrow{color:var(--marigold);margin-bottom:18px;}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);margin-bottom:22px;}
.hero h1 em{font-style:italic;font-weight:500;color:var(--marigold);}
.hero p.lead{font-size:1.15rem;color:rgba(251,248,241,0.82);max-width:520px;margin:0 auto 38px;}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

@media (prefers-reduced-motion:reduce){
  .ripple-field circle{animation:none;opacity:0.35;}
  html{scroll-behavior:auto;}
}

/* ---------- Section shell ---------- */
section{padding:100px 28px;}
.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section-head.left{margin-left:0;text-align:left;}
.section-head h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-top:14px;}
.section-head p{color:var(--ink-soft);margin-top:16px;font-size:1.05rem;}

/* ---------- Why / facts grid ---------- */
.why{background:var(--cream);}
.why-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
}
@media (max-width:760px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.why-grid{grid-template-columns:1fr;}}
/* Use on a .why-grid with an item count that isn't a multiple of 3 (e.g. 4 facts) —
   otherwise the container's own background (the gap-line technique below) shows
   through the unfilled trailing cell(s) as a solid block. */
.why-grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:480px){.why-grid.cols-2{grid-template-columns:1fr;}}
.fact{
  background:var(--paper);padding:34px 26px;
  display:flex;flex-direction:column;gap:14px;
}
.fact svg{width:34px;height:34px;color:var(--husk);}
.fact h3{font-family:'Work Sans',sans-serif;font-weight:600;font-size:1.05rem;}
.fact p{color:var(--ink-soft);font-size:0.92rem;}

/* ---------- Nutrition stats (home) ---------- */
.nutrition{background:var(--cream);}
.nutri-stats{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2px;background:var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
}
.nutri-stat{
  background:var(--paper);padding:34px 20px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
}
.nutri-stat svg{width:30px;height:30px;color:var(--husk);}
.nutri-stat .nutri-value{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;color:var(--pond-deep);}
.nutri-stat .nutri-label{font-family:'Space Mono',monospace;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--husk);}

/* ---------- Trust badges strip (home) — sits inside .nutrition, just below .nutri-stats.
   Icons + layout spec copied from the live makhanabox.com "Product benefits" section. ---------- */
.badge-row{
  max-width:var(--max);margin:56px auto 0;
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:28px;
}
@media (max-width:990px){.badge-row{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;}}
@media (max-width:600px){.badge-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:32px;}}
.badge-item{display:grid;justify-items:center;gap:14px;}
.badge-circle{
  width:100px;height:100px;border-radius:999px;
  border:2.5px solid var(--husk);color:var(--husk);
  display:grid;place-items:center;background:transparent;
  transition:background .2s ease, color .2s ease;
}
.badge-circle svg{width:100%;height:100%;display:block;}
@media (max-width:600px){.badge-circle{width:76px;height:76px;}}
.badge-item span{
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:0.82rem;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);
}
.badge-item:hover .badge-circle{background:var(--husk);color:var(--paper);}

/* ---------- Bulk-order promo banner (flavours / raw-makhana pages) ---------- */
.promo-banner-wrap{padding:0 28px 90px;}
.promo-banner{
  max-width:var(--max);margin:0 auto;
  background:var(--pond-deep);color:var(--paper);
  border-radius:var(--radius-lg);
  padding:36px 40px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.promo-banner-icon{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:rgba(251,248,241,0.14);
  display:flex;align-items:center;justify-content:center;
}
.promo-banner-icon svg{width:26px;height:26px;color:var(--marigold);}
.promo-banner-copy{flex:1;min-width:220px;}
.promo-banner-copy h3{font-size:1.25rem;margin-bottom:6px;color:var(--paper);}
.promo-banner-copy p{color:rgba(251,248,241,0.78);font-size:0.92rem;}
.promo-banner .btn{flex-shrink:0;}
.promo-banner-actions{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0;}
@media (max-width:680px){.promo-banner{padding:30px 26px;text-align:center;justify-content:center;}.promo-banner-actions{justify-content:center;}}
/* Two buttons side by side outrun a phone-width banner — stack them full-width. */
@media (max-width:480px){
  .promo-banner{padding:26px 20px;}
  .promo-banner-copy{min-width:0;flex-basis:100%;}
  .promo-banner-actions{flex-direction:column;width:100%;}
  .promo-banner-actions .btn{justify-content:center;}
}

/* ---------- Trust strip ---------- */
.trust{background:var(--paper);padding:0 28px 90px;}
.trust-inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}
.trust-card{
  background:var(--cream);border-radius:var(--radius-sm);
  padding:26px 24px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.trust-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(28,38,32,0.1);}
.trust-card .stat{
  font-family:'Fraunces',serif;font-size:2rem;font-weight:600;color:var(--pond-deep);
}
.trust-card p{color:var(--ink-soft);font-size:0.9rem;margin-top:6px;}
.trust-card.quote p{color:var(--ink);font-style:italic;font-size:0.95rem;line-height:1.5;}
.trust-card.quote span{display:block;margin-top:10px;font-family:'Space Mono',monospace;font-size:0.75rem;color:var(--husk);font-style:normal;}

/* ---------- Flavors / signature box ---------- */
.flavors{background:var(--paper);}
.box-frame{
  position:relative;max-width:980px;margin:0 auto;
  background:var(--cream);
  border:1.5px solid rgba(0,0,0,0.3);
  border-radius:var(--radius-lg);
  padding:56px 34px 34px;
}
.box-flap{
  position:absolute;top:-39px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:64%;height:78px;
  background:var(--pond-deep);
  clip-path:polygon(4% 100%, 0 0, 100% 0, 96% 100%);
  box-shadow:0 10px 20px rgba(28,38,32,0.16);
}
.box-flap span{
  position:absolute;bottom:15px;left:50%;transform:translateX(-50%);
  font-family:'Fraunces',serif;font-weight:600;
  color:var(--paper);font-size:35px;
  letter-spacing:0.005em;white-space:nowrap;
}
/* Names like "Flavored Makhana" outrun the flap's width at phone sizes at a fixed
   35px — scale down below 600px so the text stays inside the ribbon. Font-size
   stays at the pre-existing safe value (raising it in step with the desktop
   size would overrun the ribbon at narrow widths); bottom is scaled by the
   same ratio as the desktop change to keep the vertical position consistent. */
@media (max-width:600px){
  .box-flap span{font-size:16px;bottom:8px;}
}
.pouch-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
@media (max-width:760px){.pouch-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.pouch-grid{grid-template-columns:1fr;}}

.pouch{
  background:var(--paper);border-radius:var(--radius-sm);
  padding:24px 20px;
  box-shadow:0 10px 22px rgba(28,38,32,0.08);
  display:flex;flex-direction:column;gap:10px;
  transform:rotate(var(--tilt,0deg));
  transition:transform .25s ease, box-shadow .25s ease;
}
.pouch:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 16px 30px rgba(28,38,32,0.14);}
.pouch:nth-child(1){--tilt:-1.4deg;}
.pouch:nth-child(2){--tilt:1deg;}
.pouch:nth-child(3){--tilt:-0.8deg;}
.pouch:nth-child(4){--tilt:1.6deg;}
.pouch:nth-child(5){--tilt:-1deg;}
.pouch:nth-child(6){--tilt:1.2deg;}
/* Real <img> filling a position:relative container that also carries a
   background-color fallback (swatch/story-visual/gallery/thumb/blog-thumb) —
   swapped in for what used to be a CSS background-image so product/lifestyle
   photos are real, indexable <img> elements with alt text. Any ::after gradient
   or icon on the same container already paints above this (z-index or, for
   ::after, generated-content paint order), so it layers in unchanged. */
.media-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* For transparent-cutout product photos (e.g. raw makhana grades) meant to float
   centered over their .swatch/.gallery-main colour background rather than crop
   to fill it — same positioning as .media-fill, but object-fit:contain so the
   cutout is never zoomed/cropped against a box of a different aspect ratio. */
.media-contain{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;}

.pouch .swatch{width:100%;height:180px;border-radius:10px;position:relative;overflow:hidden;background-size:cover;background-position:center;}
.pouch .swatch::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(28,38,32,0.22), transparent 55%);}
.pouch .swatch a{position:absolute;inset:0;z-index:1;}
.pouch h3{font-family:'Work Sans',sans-serif;font-weight:700;font-size:1.05rem;}
.pouch h3 a{border-bottom:1px solid transparent;}
.pouch h3 a:hover{border-bottom-color:currentColor;}
.pouch p{color:var(--ink-soft);font-size:0.88rem;flex-grow:1;}
.pouch-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px;gap:10px;flex-wrap:wrap;}
.price{font-family:'Space Mono',monospace;font-weight:700;font-size:0.95rem;}
.price-unit{font-weight:400;font-size:0.76rem;color:var(--ink-soft);}

.qty-stepper{
  display:flex;align-items:center;gap:10px;
  background:var(--cream);border-radius:100px;padding:4px 6px;
}
.qty-stepper button{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);color:var(--pond-deep);font-weight:700;font-size:1rem;
  box-shadow:0 1px 3px rgba(28,38,32,0.15);
}
.qty-stepper button:hover{background:var(--marigold);color:var(--ink);}
.qty-stepper .qty-val{
  font-family:'Space Mono',monospace;font-size:0.85rem;min-width:16px;text-align:center;
}

.pouch-cta{
  font-size:0.82rem;font-weight:600;color:var(--pond-deep);
  display:flex;align-items:center;gap:6px;
  border-bottom:1.5px solid var(--marigold);padding-bottom:2px;
}
.pouch-cta svg{width:14px;height:14px;}

/* "Custom Mix" card: no product photo, so it reads as a builder tool rather than
   a fixed product — dashed border, centered plus icon, whole card is one link. */
.pouch-custom{
  align-items:center;text-align:center;justify-content:center;gap:14px;
  border:1.5px dashed var(--husk);background:transparent;box-shadow:none;
}
.pouch-custom:hover{border-color:var(--marigold);box-shadow:0 16px 30px rgba(28,38,32,0.1);}
.pouch-custom p{text-align:center;}
.pouch-custom-icon{
  width:72px;height:72px;border-radius:50%;flex-shrink:0;
  background:var(--cream);color:var(--pond-deep);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.pouch-custom-icon svg{width:30px;height:30px;}
.pouch-custom:hover .pouch-custom-icon{background:var(--marigold);color:var(--ink);}
.pouch-custom .pouch-cta{border-bottom-color:var(--marigold);}

/* ---------- Cart toggle (header) ---------- */
.cart-toggle{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  color:var(--paper);
}
.cart-toggle svg{width:22px;height:22px;}
.cart-badge{
  position:absolute;top:-2px;right:-2px;
  min-width:18px;height:18px;padding:0 4px;
  border-radius:100px;
  background:var(--marigold);color:var(--ink);
  font-family:'Space Mono',monospace;font-size:0.68rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.cart-badge[hidden]{display:none;}

/* ---------- Cart drawer ---------- */
.cart-overlay{
  position:fixed;inset:0;z-index:90;
  background:rgba(28,38,32,0.45);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.cart-overlay.visible{opacity:1;pointer-events:auto;}

.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:91;
  width:min(400px,92vw);
  background:var(--paper);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s ease, box-shadow .3s ease;
}
/* Shadow only while open — on a closed (off-screen) drawer it bleeds back into
   the right edge of the viewport as a grey strip. */
.cart-drawer.open{transform:translateX(0);box-shadow:-12px 0 32px rgba(0,0,0,0.18);}

.cart-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;border-bottom:1px solid var(--line);
}
.cart-drawer-head h2{font-size:1.3rem;}
.cart-close{
  width:32px;height:32px;border-radius:50%;
  font-size:1.4rem;line-height:1;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
}
.cart-close:hover{background:var(--cream);}

.cart-drawer-body{flex:1;overflow-y:auto;padding:6px 24px;}
.cart-empty{color:var(--ink-soft);font-size:0.92rem;text-align:center;padding:40px 0;}

.cart-item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.cart-item-info{flex:1;min-width:0;}
.cart-item-name{font-family:'Work Sans',sans-serif;font-weight:600;font-size:0.95rem;}
.cart-item-meta{font-family:'Space Mono',monospace;font-size:0.72rem;color:var(--husk);margin-top:2px;}
.cart-item-price{font-family:'Space Mono',monospace;font-size:0.82rem;color:var(--ink-soft);margin-top:4px;}
.cart-item-remove{font-size:0.76rem;color:var(--husk);margin-top:8px;text-decoration:underline;}

.cart-drawer-foot{
  padding:18px 24px 24px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;
}
.cart-total-row{display:flex;align-items:center;justify-content:space-between;font-size:1.05rem;}
.cart-total-row strong{font-family:'Space Mono',monospace;}
.cart-final-btn{width:100%;justify-content:center;}
.cart-next-note{font-size:0.78rem;color:var(--ink-soft);text-align:center;line-height:1.5;margin-top:-4px;}
.cart-clear-btn{font-size:0.82rem;color:var(--ink-soft);text-align:center;text-decoration:underline;}

/* ---------- Custom raw makhana mix calculator ---------- */
.mix-layout{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start;
}
@media (max-width:900px){.mix-layout{grid-template-columns:1fr;gap:36px;}}
/* Grid items default to min-width:auto, so the 560px-min table would stretch the
   whole column past the viewport instead of scrolling inside .mix-table-wrap. */
.mix-layout > *{min-width:0;}

.mix-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.mix-table{width:100%;border-collapse:collapse;min-width:560px;}
.mix-table th,.mix-table td{padding:12px 8px;text-align:center;border-bottom:1px solid var(--line);}
.mix-table thead th{
  font-family:'Space Mono',monospace;font-size:0.74rem;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ink-soft);
}
.mix-table-price{
  display:block;font-family:'Space Mono',monospace;font-weight:700;color:var(--ink);
  font-size:0.86rem;text-transform:none;letter-spacing:0;margin-top:3px;
}
.mix-cell-price{
  display:block;font-family:'Space Mono',monospace;font-weight:700;color:var(--ink-soft);
  font-size:0.76rem;margin-bottom:4px;
}
.mix-table tbody th{
  text-align:left;font-family:'Work Sans',sans-serif;font-weight:700;font-size:0.95rem;white-space:nowrap;
}
.mix-grade-size{display:block;font-family:'Space Mono',monospace;font-weight:400;font-size:0.7rem;color:var(--husk);margin-top:2px;}
.mix-qty-input{
  width:60px;padding:8px 4px;text-align:center;
  border:1.5px solid var(--line);border-radius:10px;
  font-family:'Space Mono',monospace;font-size:0.92rem;color:var(--ink);
  background:var(--paper);
}
.mix-qty-input:focus-visible{border-color:var(--marigold);}

.mix-breakdown-panel{
  background:var(--cream);border-radius:var(--radius-lg);
  padding:28px 26px;position:sticky;top:90px;
}
.mix-breakdown-panel h2{font-size:1.3rem;margin-bottom:16px;}
.mix-breakdown-body{max-height:340px;overflow-y:auto;margin-bottom:16px;}
.mix-breakdown-body .cart-item{padding:12px 0;}
.mix-breakdown-body .cart-item:first-child{padding-top:0;}
.mix-total-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:1.1rem;padding-top:14px;border-top:1px solid var(--line);margin-bottom:16px;
}
.mix-total-row strong{font-family:'Space Mono',monospace;}
.mix-hint{color:var(--husk);font-size:0.82rem;text-align:center;margin-top:10px;}

.mix-pack-option{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;margin-bottom:16px;
}
.mix-pack-option input[type="checkbox"]{width:19px;height:19px;flex-shrink:0;margin-top:2px;accent-color:var(--pond-deep);cursor:pointer;}
.mix-pack-option label{font-size:0.9rem;font-weight:600;color:var(--ink);cursor:pointer;}
.mix-pack-option .field-hint{display:block;font-weight:400;margin-top:4px;}

/* ---------- Steps ---------- */
.steps{background:var(--pond-deep);color:var(--paper);}
.steps .section-head p{color:rgba(251,248,241,0.75);}
.steps .eyebrow{color:var(--marigold);}
.step-row{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;
}
@media (max-width:820px){.step-row{grid-template-columns:1fr;gap:44px;}}
.step{position:relative;padding-left:52px;}
.step-num{
  position:absolute;left:0;top:-4px;
  font-family:'Fraunces',serif;font-size:2.2rem;font-weight:500;font-style:italic;
  color:var(--marigold);
}
.step h3{font-family:'Work Sans',sans-serif;font-weight:600;font-size:1.1rem;margin-bottom:8px;}
.step p{color:var(--ink-soft);font-size:0.94rem;}
.steps .step p{color:rgba(251,248,241,0.75);}

/* ---------- Flavour detail page ---------- */
.flavour-detail{background:var(--paper);}
.flavour-detail-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:0.85fr 1fr;gap:60px;align-items:start;
}
@media (max-width:820px){.flavour-detail-grid{grid-template-columns:1fr;gap:40px;}}
.flavour-visual{
  aspect-ratio:1/1;border-radius:var(--radius-lg);
  position:relative;overflow:hidden;
  background-size:cover;background-position:center;
  box-shadow:0 20px 44px rgba(28,38,32,0.18);
}
.flavour-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(28,38,32,0.28), transparent 45%);
  pointer-events:none;
}

/* Nutrition/ingredients/reviews — full-width, below the gallery+buy-box row
   rather than squeezed into the narrow copy column (which left a tall gap
   under the shorter square product image). */
.flavour-info-grid{
  max-width:var(--max);margin:56px auto 0;padding:0 28px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;
}
@media (max-width:820px){.flavour-info-grid{grid-template-columns:1fr;gap:36px;margin-top:40px;}}
.flavour-info-panel{background:var(--cream);border-radius:var(--radius-lg);padding:32px 30px;}
.flavour-info-panel .spec-table{margin-bottom:0;}
.flavour-info-panel > .ingredients-line:first-child{border-top:none;margin-top:0;padding-top:0;}

/* ---------- Product media gallery (multiple images + video, opens in the lightbox) ---------- */
.product-gallery{display:flex;flex-direction:column;gap:14px;}
.gallery-main{
  aspect-ratio:1/1;border-radius:var(--radius-lg);
  position:relative;overflow:hidden;cursor:pointer;
  background-size:cover;background-position:center;
  box-shadow:0 20px 44px rgba(28,38,32,0.18);
}
.gallery-main::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(28,38,32,0.28), transparent 45%);
  pointer-events:none;
}
.gallery-main:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;}
.gallery-main-icon{
  position:absolute;z-index:1;color:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.gallery-main-icon:not(.is-play){
  top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  background:rgba(28,38,32,0.55);font-size:1.05rem;
}
.gallery-main-icon.is-play{
  inset:0;font-size:2.6rem;text-shadow:0 2px 12px rgba(0,0,0,0.4);
  background:linear-gradient(0deg, rgba(28,38,32,0.35), rgba(28,38,32,0.14));
}
.gallery-thumbs{display:flex;gap:10px;flex-wrap:wrap;}
.gallery-thumb{
  width:64px;height:64px;border-radius:12px;position:relative;overflow:hidden;flex-shrink:0;
  background-size:cover;background-position:center;background-color:var(--cream);
  border:2px solid transparent;opacity:0.65;
  transition:border-color .2s ease, opacity .2s ease;
}
.gallery-thumb:hover{opacity:1;}
.gallery-thumb.active{border-color:var(--marigold);opacity:1;}
.gallery-thumb-video{display:flex;align-items:center;justify-content:center;background-color:var(--pond-deep);}
.gallery-play-icon{position:relative;z-index:1;color:var(--paper);font-size:1.1rem;}

/* ---------- Media lightbox (product gallery images + video) ---------- */
body.lightbox-locked{overflow:hidden;}
.lightbox-overlay{
  position:fixed;inset:0;z-index:120;
  background:rgba(15,20,16,0.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.lightbox-overlay.open{opacity:1;pointer-events:auto;}
.lightbox-stage{
  max-width:min(900px,88vw);max-height:80vh;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-lg);transition:background-color .2s ease;
}
.lightbox-stage.is-image{padding:28px;}
.lightbox-stage img,.lightbox-stage video{
  max-width:100%;max-height:80vh;border-radius:var(--radius-sm);
  box-shadow:0 30px 60px rgba(0,0,0,0.4);
}
.lightbox-stage.is-image img{max-height:calc(80vh - 56px);}
.lightbox-close,.lightbox-nav{
  position:absolute;z-index:2;border-radius:50%;
  background:rgba(251,248,241,0.12);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(251,248,241,0.22);}
.lightbox-close{top:20px;right:24px;width:44px;height:44px;font-size:1.6rem;line-height:1;}
.lightbox-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:1.6rem;}
.lightbox-prev{left:20px;}
.lightbox-next{right:20px;}
.lightbox-counter{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:'Space Mono',monospace;font-size:0.8rem;color:rgba(251,248,241,0.75);
  background:rgba(28,38,32,0.5);padding:6px 14px;border-radius:100px;
}
@media (max-width:640px){
  .lightbox-nav{width:40px;height:40px;font-size:1.3rem;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
  .lightbox-close{top:12px;right:14px;}
}

.flavour-copy .eyebrow{margin-bottom:10px;}
.flavour-copy h1{font-size:clamp(2rem,4.4vw,2.9rem);margin-bottom:16px;}
.flavour-copy .price-row{display:flex;align-items:center;gap:16px;margin-bottom:22px;}
.flavour-copy .price-row .price{font-size:1.3rem;}
.flavour-copy p.desc{color:var(--ink-soft);font-size:1.02rem;margin-bottom:28px;}
.flavour-copy .qty-stepper{display:inline-flex;margin-bottom:20px;}
.flavour-order-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px;}

.variant-picker{margin:24px 0 28px;}
.variant-label{display:block;font-family:'Space Mono',monospace;font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;}
.variant-chips{display:flex;gap:12px;flex-wrap:wrap;}
.variant-chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:84px;min-height:56px;
  padding:10px 18px;border-radius:var(--radius-sm);
  background:var(--paper);border:1.5px solid var(--line);
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.variant-chip-size{font-family:'Work Sans',sans-serif;font-size:0.92rem;font-weight:700;color:var(--ink);}
.variant-chip-price{font-family:'Space Mono',monospace;font-size:0.76rem;color:var(--ink-soft);}
.variant-chip:hover{border-color:var(--marigold);transform:translateY(-1px);}
.variant-chip.active{background:var(--pond-deep);border-color:var(--pond-deep);}
.variant-chip.active .variant-chip-size{color:var(--paper);}
.variant-chip.active .variant-chip-price{color:rgba(251,248,241,0.75);}
@media (max-width:480px){.variant-chip{flex:1 1 0;min-width:0;}}

/* ---------- Starter pack picker (sample-pack.php) ---------- */
.starter-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
@media (max-width:760px){.starter-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.starter-grid{grid-template-columns:1fr;}}
.starter-group-title{
  grid-column:1/-1;
  font-family:'Space Mono',monospace;font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--husk);margin:28px 0 2px;
}
.starter-group-title:first-child{margin-top:0;}
.starter-group-title span{
  text-transform:none;letter-spacing:0;color:var(--ink-soft);
  font-size:0.82rem;font-family:'Work Sans',sans-serif;font-weight:400;margin-left:8px;
}
.starter-card{
  position:relative;
  display:flex;flex-direction:column;gap:8px;cursor:pointer;
  background:var(--paper);border-radius:var(--radius-sm);padding:14px;
  border:1.5px solid var(--line);
  transition:border-color .2s ease, transform .15s ease;
}
.starter-card:hover{border-color:var(--marigold);transform:translateY(-2px);}
.starter-card:has(.starter-checkbox:checked){border-color:var(--pond-deep);background:var(--cream);}
.starter-checkbox{position:absolute;opacity:0;width:1px;height:1px;}
.starter-card:has(.starter-checkbox:focus-visible){outline:3px solid var(--marigold);outline-offset:3px;}
.starter-card .swatch{width:100%;height:88px;border-radius:8px;background-size:cover;background-position:center;}
.starter-name{font-family:'Work Sans',sans-serif;font-weight:700;font-size:0.95rem;}
.starter-price{font-family:'Space Mono',monospace;font-size:0.8rem;color:var(--ink-soft);}

.spec-table{width:100%;border-collapse:collapse;margin-bottom:8px;}
.spec-table caption{
  text-align:left;font-family:'Space Mono',monospace;font-size:0.72rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--husk);margin-bottom:12px;
}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:11px 4px;font-size:0.92rem;}
.spec-table td:first-child{color:var(--ink-soft);}
.spec-table td:last-child{text-align:right;font-family:'Space Mono',monospace;font-weight:600;}

/* Multi-column variant (e.g. the bulk-orders grade spec table) — the base
   rules above assume a 2-column label/value table, so this overrides the
   right-aligned mono last column and adds header styling of its own. */
.spec-table-multi thead th{
  text-align:left;font-family:'Space Mono',monospace;font-size:0.7rem;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft);
  padding:10px 8px;border-bottom:2px solid var(--line);font-weight:600;
}
.spec-table-multi td{padding:12px 8px;vertical-align:top;}
.spec-table-multi td:first-child{font-weight:600;color:var(--ink);}
.spec-table-multi td:last-child{text-align:left;font-family:inherit;font-weight:400;color:var(--ink-soft);}

.ingredients-line{
  font-size:0.9rem;color:var(--ink-soft);padding:16px 0;
  border-top:1px solid var(--line);margin-top:20px;
}
.ingredients-line strong{color:var(--ink);}

.flavour-reviews{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);}
.flavour-reviews .review{margin-bottom:16px;}
.flavour-reviews .stars{color:var(--marigold);font-size:0.85rem;letter-spacing:2px;margin-bottom:4px;}
.flavour-reviews p{color:var(--ink-soft);font-size:0.92rem;font-style:italic;margin-bottom:4px;}
.flavour-reviews span{font-family:'Space Mono',monospace;font-size:0.75rem;color:var(--husk);font-style:normal;}

.related-flavours{background:var(--cream);}
.related-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
@media (max-width:760px){.related-grid{grid-template-columns:1fr;}}
.related-card{
  background:var(--paper);border-radius:var(--radius-sm);padding:20px;
  display:flex;align-items:center;gap:16px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.related-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(28,38,32,0.1);}
.related-card .swatch{width:56px;height:56px;border-radius:10px;flex-shrink:0;position:relative;overflow:hidden;background-size:cover;background-position:center;}
.related-card h3{font-size:0.98rem;margin-bottom:4px;}
.related-card .price{font-size:0.82rem;color:var(--husk);}
.related-card-custom{border:1.5px dashed var(--husk);background:transparent;}
.related-card-custom:hover{border-color:var(--marigold);}
.related-card-icon{
  width:56px;height:56px;border-radius:10px;flex-shrink:0;
  background:var(--cream);color:var(--pond-deep);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.related-card-icon svg{width:24px;height:24px;}
.related-card-custom:hover .related-card-icon{background:var(--marigold);color:var(--ink);}

/* ---------- Nutrition table (health-benefits page) ---------- */
.nutri-panel{background:var(--cream);border-radius:var(--radius-lg);padding:40px 34px;max-width:760px;margin:0 auto;}
.nutri-panel table{width:100%;border-collapse:collapse;}
.nutri-panel th,.nutri-panel td{padding:13px 6px;text-align:left;border-bottom:1px solid var(--line);font-size:0.94rem;}
.nutri-panel th{font-family:'Space Mono',monospace;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--husk);font-weight:600;}
.nutri-panel td:not(:first-child),.nutri-panel th:not(:first-child){text-align:right;font-family:'Space Mono',monospace;}
.nutri-note{font-size:0.82rem;color:var(--ink-soft);margin-top:18px;}

.compare-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;
  background:var(--line);border-radius:var(--radius-lg);overflow:hidden;
}
.compare-card{background:var(--paper);padding:30px 24px;text-align:center;}
.compare-card.highlight{background:var(--pond-deep);color:var(--paper);}
.compare-card .snack{font-family:'Work Sans',sans-serif;font-weight:600;margin-bottom:14px;}
.compare-card .num{font-family:'Fraunces',serif;font-size:2rem;font-weight:600;}
.compare-card.highlight .num{color:var(--marigold);}
.compare-card .unit{font-size:0.78rem;color:var(--ink-soft);margin-top:2px;}
.compare-card.highlight .unit{color:rgba(251,248,241,0.7);}

/* ---------- Bulk order scale tiers (bulk-orders page) ---------- */
.tier-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--line);border-radius:var(--radius-lg);overflow:hidden;
}
@media (max-width:820px){.tier-grid{grid-template-columns:1fr;}}
.tier-card{
  background:var(--paper);padding:38px 32px;
  display:flex;flex-direction:column;gap:12px;
}
.tier-card.featured{background:var(--pond-deep);color:var(--paper);}
.tier-card .tier-qty{
  font-family:'Space Mono',monospace;font-size:0.76rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--marigold);
}
.tier-card h3{font-size:1.25rem;}
.tier-card p{color:var(--ink-soft);font-size:0.92rem;flex-grow:1;}
.tier-card.featured p{color:rgba(251,248,241,0.78);}
.tier-lead{
  display:flex;align-items:center;gap:8px;margin-top:6px;padding-top:16px;
  border-top:1px solid var(--line);
  font-family:'Space Mono',monospace;font-size:0.78rem;color:var(--husk);
}
.tier-card.featured .tier-lead{border-top-color:rgba(251,248,241,0.18);color:rgba(251,248,241,0.75);}
.tier-lead svg{width:16px;height:16px;flex-shrink:0;}

/* ---------- FAQ hero search ---------- */
.faq-hero{padding-bottom:52px;}
.faq-search{position:relative;max-width:480px;margin:32px auto 0;}
.faq-search svg{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--husk);pointer-events:none;
}
.faq-search input{
  width:100%;padding:16px 20px 16px 52px;border-radius:100px;border:none;
  background:var(--paper);color:var(--ink);font:inherit;font-size:0.96rem;
  box-shadow:0 14px 30px rgba(28,38,32,0.24);
}
.faq-search input::placeholder{color:var(--ink-soft);}
.faq-search input:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;}

/* ---------- FAQ layout: category sidebar + content ---------- */
.faq-body{background:var(--paper);padding-top:64px;}
.faq-layout{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;}
@media (max-width:820px){.faq-layout{grid-template-columns:1fr;gap:26px;}}

.faq-sidebar{
  display:flex;flex-direction:column;gap:4px;
  position:sticky;top:100px;
  background:var(--cream);border-radius:var(--radius-sm);padding:10px;
}
@media (max-width:820px){
  .faq-sidebar{
    position:static;flex-direction:row;overflow-x:auto;
    gap:8px;background:none;padding:0 0 4px;
  }
}
.faq-cat-btn{
  text-align:left;padding:13px 16px;border-radius:var(--radius-sm);
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:0.92rem;
  color:var(--ink-soft);border-left:3px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.faq-cat-btn:hover{color:var(--pond-deep);}
.faq-cat-btn.active{
  background:var(--paper);color:var(--pond-deep);border-left-color:var(--marigold);
  box-shadow:0 4px 14px rgba(28,38,32,0.08);
}
@media (max-width:820px){
  .faq-cat-btn{
    white-space:nowrap;flex-shrink:0;
    border-left:none;border-bottom:3px solid transparent;
  }
  .faq-cat-btn.active{background:var(--cream);border-bottom-color:var(--marigold);box-shadow:none;}
}

.faq-content{min-width:0;}
.faq-group-title{font-size:1.3rem;margin-bottom:6px;}
.faq-group .faq-list{max-width:none;margin:0;}
.faq-empty{color:var(--ink-soft);font-size:0.95rem;padding:26px 4px;}

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 4px;font-family:'Work Sans',sans-serif;font-weight:600;font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--cream);display:flex;align-items:center;justify-content:center;
  font-family:'Space Mono',monospace;font-size:1.1rem;color:var(--pond-deep);
  transition:transform .2s ease;
}
.faq-item[open] summary .plus{transform:rotate(45deg);}
.faq-item .faq-answer{padding:0 4px 24px;color:var(--ink-soft);font-size:0.95rem;max-width:640px;}

/* ---------- Contact page ---------- */
.contact-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;
}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:44px;}}
.contact-grid > *{min-width:0;}
.contact-row > div{min-width:0;overflow-wrap:anywhere;}
.contact-card{background:var(--cream);border-radius:var(--radius-lg);padding:40px 34px;}
.contact-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);}
.contact-row:last-child{border-bottom:none;}
.contact-row svg{width:22px;height:22px;color:var(--husk);flex-shrink:0;margin-top:2px;}
.contact-row h3{font-family:'Work Sans',sans-serif;font-weight:600;font-size:0.98rem;margin-bottom:4px;}
.contact-row p,.contact-row a{color:var(--ink-soft);font-size:0.92rem;}
.contact-row a:hover{color:var(--pond-deep);}
.social-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;}
.social-row a{
  width:40px;height:40px;border-radius:50%;background:var(--pond-deep);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.social-row a:hover{background:var(--marigold);color:var(--ink);}
.social-row svg{width:18px;height:18px;}
.map-embed{border-radius:var(--radius-lg);overflow:hidden;border:1.5px solid var(--line);}
.map-embed iframe{width:100%;height:340px;border:0;display:block;}

.contact-form-card{
  background:var(--cream);border-radius:var(--radius-lg);padding:40px 34px;
  max-width:var(--max);margin:0 auto;
}
.contact-form-card h2{font-size:1.5rem;margin-bottom:8px;text-align:center;max-width:560px;margin-left:auto;margin-right:auto;}
.contact-form-card > p{color:var(--ink-soft);margin-bottom:28px;text-align:center;max-width:560px;margin-left:auto;margin-right:auto;}
.contact-form{display:grid;gap:20px;max-width:560px;margin:0 auto;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.form-field label{display:block;font-size:0.86rem;font-weight:600;margin-bottom:8px;}
.form-field .field-hint{display:block;font-size:0.78rem;font-weight:400;color:var(--husk);margin-top:3px;}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:13px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);font:inherit;font-size:0.95rem;
  transition:border-color .15s ease;
}
.form-field textarea{resize:vertical;min-height:120px;}
.form-field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px;
}
.form-field input:focus-visible,.form-field textarea:focus-visible,.form-field select:focus-visible{outline:3px solid var(--marigold);outline-offset:1px;}
.form-field input:hover,.form-field textarea:hover,.form-field select:hover{border-color:var(--husk);}
.form-note{font-size:0.8rem;color:var(--husk);margin-top:8px;}
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.radio-pill-group{display:flex;gap:10px;flex-wrap:wrap;}
.radio-pill{
  display:flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:100px;
  background:var(--paper);border:1.5px solid var(--line);
  cursor:pointer;font-size:0.9rem;font-weight:600;color:var(--ink);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.radio-pill:hover{border-color:var(--husk);}
.radio-pill input{accent-color:var(--pond-deep);width:15px;height:15px;flex-shrink:0;}
.radio-pill:has(input:checked){background:var(--pond-deep);border-color:var(--pond-deep);color:var(--paper);}
.form-notice{
  border-radius:var(--radius-sm);padding:14px 18px;margin:0 auto 20px;
  font-size:0.92rem;max-width:560px;
}
.form-notice.success{background:rgba(95,203,176,0.14);color:var(--pond-deep);}
.form-notice.error{background:rgba(199,87,60,0.12);color:#8A3A26;}

/* ---------- Blog ---------- */
.blog-grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
}
@media (max-width:820px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{
  background:var(--cream);border-radius:var(--radius-sm);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.blog-card:not(.soon):hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(28,38,32,0.14);}
.blog-card .thumb{aspect-ratio:16/10;background-size:cover;background-position:center;position:relative;}
.blog-card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(28,38,32,0.2), transparent 55%);}
.blog-card .body{padding:24px;flex-grow:1;display:flex;flex-direction:column;}
.blog-card .eyebrow{margin-bottom:10px;}
.blog-card h3{font-size:1.15rem;margin-bottom:10px;}
.blog-card p{color:var(--ink-soft);font-size:0.9rem;flex-grow:1;}
.blog-card .read-more{margin-top:16px;font-size:0.86rem;font-weight:600;color:var(--pond-deep);border-bottom:1.5px solid var(--marigold);display:inline-block;width:fit-content;}
.blog-card.soon{opacity:0.6;}
.blog-card.soon .body p{font-style:italic;}

.blog-search{position:relative;max-width:480px;margin:32px auto 0;}
.blog-search svg{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--husk);pointer-events:none;
}
.blog-search input{
  width:100%;padding:16px 46px 16px 52px;border-radius:100px;border:none;
  background:var(--paper);color:var(--ink);font:inherit;font-size:0.96rem;
  box-shadow:0 14px 30px rgba(28,38,32,0.24);
}
.blog-search input::placeholder{color:var(--ink-soft);}
.blog-search input:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;}
.blog-search-clear{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:100px;color:var(--ink-soft);font-size:1.3rem;line-height:1;
}
.blog-search-clear:hover{background:var(--cream);color:var(--ink);}
.blog-search-status{
  text-align:center;color:var(--ink-soft);font-size:0.9rem;
  font-family:'Space Mono',monospace;margin:0 0 40px;
}
.blog-empty{text-align:center;color:var(--ink-soft);font-size:0.98rem;padding:40px 20px;max-width:480px;margin:0 auto;}
.blog-empty a{color:var(--pond-deep);text-decoration:underline;}

/* ---------- Pagination ---------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:56px;flex-wrap:wrap;}
.pagination-pages{display:flex;align-items:center;gap:6px;}
.pagination-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 4px;border-radius:100px;
  font-family:'Space Mono',monospace;font-size:0.88rem;font-weight:600;
  color:var(--ink-soft);transition:background .15s ease,color .15s ease;
}
.pagination-num:hover{background:var(--cream);color:var(--ink);}
.pagination-num.active{background:var(--pond-deep);color:var(--paper);}
.pagination-ellipsis{color:var(--husk);padding:0 4px;}
.pagination-btn{
  font-family:'Work Sans',sans-serif;font-weight:600;font-size:0.9rem;
  color:var(--pond-deep);padding:10px 18px;border-radius:100px;
  border:1.5px solid var(--pond-deep);transition:background .15s ease,color .15s ease;
}
.pagination-btn:hover{background:var(--pond-deep);color:var(--paper);}
.pagination-btn.disabled{opacity:0.35;pointer-events:none;border-color:var(--line);color:var(--ink-soft);}
@media (max-width:560px){.pagination{gap:8px;}.pagination-btn{padding:9px 14px;font-size:0.85rem;}}

.post-body{max-width:700px;margin:0 auto;}
.post-body p{color:var(--ink-soft);font-size:1.02rem;margin-bottom:20px;line-height:1.7;}
.post-body h2{font-size:1.5rem;margin:36px 0 16px;}
.post-body ul{margin:0 0 20px 20px;color:var(--ink-soft);font-size:1.02rem;line-height:1.7;}
.post-body a{color:var(--pond-deep);text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.post-body a:hover{color:var(--marigold);}
.post-meta{
  font-family:'Space Mono',monospace;font-size:0.76rem;color:var(--husk);
  letter-spacing:0.04em;margin-bottom:10px;max-width:700px;margin-left:auto;margin-right:auto;
  text-align:center;
}

/* ---------- About page ---------- */
.story-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media (max-width:820px){.story-grid{grid-template-columns:1fr;gap:36px;}}
.story-grid.reverse .story-visual{order:2;}
@media (max-width:820px){.story-grid.reverse .story-visual{order:0;}}
.story-visual{
  aspect-ratio:4/3;border-radius:var(--radius-lg);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;
  box-shadow:0 20px 44px rgba(28,38,32,0.16);
}
.story-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.story-visual::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg, rgba(28,38,32,0.22), transparent 50%);}
.story-visual svg{width:30%;height:30%;position:relative;z-index:2;opacity:0.9;}
.story-copy h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-bottom:16px;}
.story-copy p{color:var(--ink-soft);font-size:1rem;margin-bottom:14px;}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:70px 28px 110px;}
.footer-top{
  max-width:var(--max);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start;
  padding-bottom:44px;border-bottom:1px solid rgba(251,248,241,0.12);
}
.footer-top h2{font-size:clamp(1.7rem,3.6vw,2.3rem);max-width:420px;}
.footer-top p{color:rgba(251,248,241,0.6);margin-top:10px;max-width:380px;}
.footer-links{
  max-width:var(--max);margin:0 auto;padding:36px 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px;
  border-bottom:1px solid rgba(251,248,241,0.12);
}
.footer-links h4{font-family:'Space Mono',monospace;font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:rgba(251,248,241,0.5);margin-bottom:14px;}
.footer-links a{display:block;color:rgba(251,248,241,0.75);font-size:0.92rem;padding:6px 0;}
.footer-links a:hover{color:var(--marigold);}
.footer-bottom{
  max-width:var(--max);margin:0 auto;padding-top:26px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-size:0.82rem;color:rgba(251,248,241,0.55);
}
.footer-bottom .logo-word{color:rgba(251,248,241,0.75);}

/* ---------- Testimonials (Google reviews slider) ---------- */
.testimonials{background:var(--cream);}
.testimonials .section-head p{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.testimonials .rating-stars{color:var(--marigold);letter-spacing:1px;}
.testimonial-slider{max-width:720px;margin:0 auto;position:relative;}
.testimonial-viewport{overflow:hidden;border-radius:var(--radius-lg);}
.testimonial-track{display:flex;transition:transform .45s ease;}
@media (prefers-reduced-motion:reduce){.testimonial-track{transition:none;}}
.testimonial-card{
  flex:0 0 100%;background:var(--paper);border-radius:var(--radius-lg);
  padding:36px 34px;box-shadow:0 14px 34px rgba(28,38,32,0.08);
}
/* Reviews page: same card styling as the homepage slider, laid out as a grid
   instead of a carousel — flex:0 0 100% above is simply ignored in this
   grid context, so the card style is fully reused with no overrides needed. */
.reviews-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px;
  max-width:var(--max);margin:0 auto;
}
.testimonial-stars{color:var(--marigold);font-size:1.1rem;letter-spacing:2px;margin-bottom:16px;}
.testimonial-text{font-size:1.08rem;color:var(--ink);line-height:1.65;margin-bottom:24px;}
.testimonial-footer{display:flex;align-items:center;gap:14px;}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;flex-shrink:0;object-fit:cover;background:var(--line);}
.testimonial-avatar-fallback{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:var(--pond-deep);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:1.1rem;
}
.testimonial-who{flex-grow:1;min-width:0;}
.testimonial-name{display:block;font-weight:600;font-size:0.95rem;}
.testimonial-time{display:block;color:var(--ink-soft);font-size:0.82rem;margin-top:2px;}
.testimonial-google-badge{flex-shrink:0;width:20px;height:20px;}
.testimonial-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px;}
.testimonial-prev,.testimonial-next{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--paper);color:var(--pond-deep);border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;line-height:1;
  transition:background .2s ease, color .2s ease;
}
.testimonial-prev:hover,.testimonial-next:hover{background:var(--pond-deep);color:var(--paper);}
.testimonial-dots{display:flex;gap:8px;}
.testimonial-dot{width:8px;height:8px;border-radius:50%;background:var(--line);}
.testimonial-dot.active{background:var(--marigold);width:22px;border-radius:100px;transition:width .2s ease;}

/* ---------- Delivery partners strip ---------- */
/* No fixed section background here — each page sets its own inline style so
   it always contrasts with whichever section sits directly above it. */
.partners-strip{
  max-width:var(--max);margin:0 auto;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:16px;
}
.partner-chip{
  display:flex;align-items:center;justify-content:center;
  min-width:210px;height:120px;padding:18px 32px;
  background:var(--paper);border-radius:var(--radius-sm);
  filter:grayscale(1);opacity:0.72;
  transition:filter .2s ease, opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.partner-chip:hover,.partner-chip:focus-visible{
  filter:grayscale(0);opacity:1;transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(28,38,32,0.1);
}
.partner-logo-img{max-height:72px;width:auto;max-width:180px;}
.partner-wordmark{
  font-family:'Space Mono',monospace;font-weight:700;font-size:0.9rem;
  letter-spacing:0.02em;color:var(--pond-deep);text-align:center;
}

/* ---------- Floating WhatsApp button ---------- */
.wa-float{
  position:fixed;bottom:22px;right:22px;z-index:60;
  width:58px;height:58px;border-radius:50%;
  background:var(--marigold);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 26px rgba(0,0,0,0.25);
  transition:transform .2s ease, bottom .3s ease;
}
.wa-float:hover{transform:scale(1.06);}
.wa-float svg{width:28px;height:28px;color:var(--ink);}

/* Scroll reveal — visible by default; only hidden pre-animation once js/site.js
   has actually loaded and run (it adds html.js itself, right where the reveal
   observer is set up — see js/site.js), so a blocked/failed/slow script can
   never take content down with it. */
.reveal{transition:opacity .6s ease, transform .6s ease;}
html.js .reveal{opacity:0;transform:translateY(18px);}
html.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---------- Phone spacing ---------- */
/* Desktop paddings (100px sections, 40px/34px cards, 28px gutters) eat most of a
   320–414px screen — tighten them so content gets the width instead. */
body{overflow-wrap:break-word;}
@media (max-width:600px){
  .wrap{padding:0 18px;}
  section{padding:64px 18px;}
  .section-head{margin-bottom:36px;}
  .page-hero{padding:52px 18px 60px;}
  .hero{padding:56px 20px 72px;}
  .breadcrumbs{padding:12px 18px;}
  .trust,.promo-banner-wrap{padding-left:18px;padding-right:18px;}
  .trust,.promo-banner-wrap{padding-bottom:64px;}
  .box-frame{padding:48px 16px 20px;}
  .contact-card,.contact-form-card,.nutri-panel{padding:28px 20px;}
  .flavour-info-grid{padding:0 18px;}
  .flavour-info-panel{padding:26px 20px;}
  .tier-card{padding:30px 22px;}
  .testimonial-card{padding:28px 22px;}
  .mix-breakdown-panel{position:static;padding:24px 20px;}
  .partner-chip{min-width:0;flex:1 1 140px;height:96px;padding:14px 18px;}
  .partner-logo-img{max-width:100%;max-height:56px;}
  .faq-body{padding-top:40px;}
  footer{padding:56px 18px 100px;}
  .map-embed iframe{height:260px;}
  .social-row{gap:10px;}
  .social-row a{width:38px;height:38px;}
}
@media (max-width:360px){
  .nav-cta{gap:10px;}
  .logo-img{height:36px;}
}