/* Farmore: Apple design language, white theme, Liquid Glass interactions
   Layout: content layer = white and Apple grey (#f5f5f7) surfaces, product photography, store-style cards.
   Functional layer (glass) = floating top bar, phone tab bar, bottom accessory, notifications.
   Signature interaction: a navy "liquid lens" that slides and stretches between choices
   (menu, tabs, pack sizes), turning clear while pressed, like iOS 27 controls. */
:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #5e5e63;      /* 5.9:1 on #f5f5f7, 5.2:1 on product tints */
  --line: #d2d2d7;
  --fill: rgba(120, 120, 128, 0.12);
  --fill-2: rgba(120, 120, 128, 0.2);
  --brand: #00306b;      /* logo navy, 12.8:1 with white */
  --brand-2: #0b4a96;
  --brand-text: #00306b;
  --brand-soft: rgba(0, 48, 107, 0.08);
  --focus: #0a66e8;
  --ok: #1d7347; --ok-bg: #e7f4ec;
  --danger: #c4241a; --danger-bg: #fdecea;
  --wa: #156c40; --wa-fill: #0e7a40;
  --t-leaf: #e6eedb; --t-seed: #f1ece2; --t-soup: #e2ead5; --t-banana: #f8f0d4; --t-palmyra: #f4e7d4;
  --s-leaf: #6b8e2e; --s-seed: #cdbd9f; --s-soup: #7d9a44; --s-banana: #dcc681; --s-palmyra: #d6a35f;
  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-hi: rgba(255, 255, 255, 1);
  --glass-hi-2: rgba(255, 255, 255, 0.5);
  --glass-edge: rgba(0, 0, 0, 0.1);
  --glass-lift: 0 8px 28px rgba(0, 0, 0, 0.09), 0 1px 2px rgba(0, 0, 0, 0.06);
  /* Blue-tinted glass (logo navy), used for the lens and every buy action */
  --tglass: linear-gradient(180deg, rgba(58, 128, 232, .78) 0%, rgba(10, 70, 160, .88) 48%, rgba(0, 48, 107, .94) 100%);
  --tglass-rim: inset 0 1px 1px rgba(255,255,255,.8), inset 0 -2px 4px rgba(150,200,255,.28), inset 2px 0 2px -1px rgba(120,225,255,.45), inset -2px 0 2px -1px rgba(255,140,210,.35), 0 0 0 .5px rgba(0,30,80,.4);
  --tglass-glow: 0 8px 22px rgba(0, 80, 200, .32), 0 2px 4px rgba(0, 30, 80, .18);
  /* Motion: Apple-like springs */
  --spring: cubic-bezier(.34, 1.45, .64, 1);
  --spring-soft: cubic-bezier(.3, 1.2, .5, 1);
  --ease: cubic-bezier(.25, .1, .25, 1);
  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans Tamil", "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Poppins", var(--font);
  --fs-cap: 0.8125rem; --fs-sm: 0.9375rem; --fs-body: 1.0625rem; --fs-lg: 1.3125rem; --fs-h3: 1.5rem;
  --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 3rem);       /* section headline: 28 to 48 */
  --fs-h1: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);   /* page title: 36 to 56 */
  --fs-display: clamp(2.5rem, 1.4rem + 4vw, 4.5rem); /* hero only: 40 to 72 */
  --r-xl: 28px; --r-lg: 20px; --r-md: 14px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --shelf-pad: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  --nav-space: 88px;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.47; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-text); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font); color: var(--ink); margin: 0; text-wrap: balance; font-weight: 600; }
h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); line-height: 1.17; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 10px; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 12px; z-index: 100; }
.skip:focus { left: 12px; }
.eyebrow { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.lede { font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.38; max-width: 36ch; letter-spacing: -0.016em; }
.muted { color: var(--ink-2); }
.tamil { font-family: "Noto Sans Tamil", var(--font); letter-spacing: 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; }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 20px; height: 20px; flex: none; }
main { padding-top: var(--nav-space); }
main.flush { padding-top: 0; }

/* ======================================================================
   LIQUID GLASS (functional layer)
   ====================================================================== */
.glass {
  position: relative; isolation: isolate;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.35);
  backdrop-filter: blur(12px) saturate(1.35);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.28), inset 0 1px 6px rgba(255,255,255,.18), 0 0 0 .5px rgba(0,0,0,.09), 0 8px 26px rgba(0,0,0,.08);
}
/* Refracting rim: a thin ring that catches light from one angle (it turns toward the cursor),
   with faint cyan and pink dispersion beside each highlight */
.glass::before, .lens::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.25px; pointer-events: none; z-index: -1;
  background: conic-gradient(from var(--rim-angle, 300deg),
    rgba(255,255,255,.98) 0%, rgba(255,255,255,.3) 9%, rgba(160,225,255,.45) 16%, rgba(255,255,255,.06) 30%,
    rgba(255,255,255,.04) 40%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.25) 59%, rgba(255,190,235,.42) 66%,
    rgba(255,255,255,.06) 80%, rgba(255,255,255,.05) 90%, rgba(255,255,255,.98) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.glass-tint { background: var(--tglass); color: #fff; box-shadow: var(--tglass-rim), var(--tglass-glow); text-shadow: 0 1px 1px rgba(0,30,80,.3); }
@media (prefers-reduced-transparency: reduce) {
  .glass, .edge-top, .edge-bottom { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass { background: #f7f7f9; }
  .edge-top, .edge-bottom { display: none; }
}
@media (prefers-contrast: more) {
  .glass { background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
  .glass::before { display: none; }
}

/* Liquid press: elements grow and catch the light under your finger, then spring back */
.lg { position: relative; transition: transform .55s var(--spring), box-shadow .3s var(--ease), background-color .2s; will-change: transform; }
.lg.is-down { transform: scale(1.06); transition-duration: .2s; }

/* Light trail: a soft light follows the cursor through a control, with a slower glow trailing behind it */
.trail { --trail-a: rgba(255,255,255,.5); --trail-b: rgba(255,255,255,.22); }
.glass.trail, .navpill { --trail-a: rgba(20, 100, 220, .13); --trail-b: rgba(20, 100, 220, .07); }
.trail::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(70px circle at var(--mx, 50%) var(--my, 50%), var(--trail-a), transparent 70%), radial-gradient(150px circle at var(--tx, 50%) var(--ty, 50%), var(--trail-b), transparent 72%); }
.trail.trail-on::after { opacity: 1; }
.lg.is-down.trail::after { opacity: 1; --trail-a: rgba(255,255,255,.7); }
.glass.lg.is-down { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 .5px rgba(0,0,0,.12), 0 14px 36px rgba(0,0,0,.14); }

/* Scroll edge effect */
.edge-top, .edge-bottom { position: fixed; left: 0; right: 0; z-index: 40; pointer-events: none; transition: opacity .3s; }
.edge-top { top: 0; height: calc(84px + env(safe-area-inset-top, 0px)); background: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,0)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent); mask-image: linear-gradient(to bottom, #000 35%, transparent); }
.edge-bottom { display: none; }
body.at-top .edge-top { opacity: 0; }

/* ======================================================================
   LIQUID LENS: blue-tinted glass that separates like a water drop on click
   ====================================================================== */
.seg { position: relative; display: flex; }
.seg > :not(.lens):not(.lens-goo) { position: relative; z-index: 1; transition: color .3s var(--ease), transform .5s var(--spring); }
.seg .on { color: var(--brand-text) !important; transform: scale(1.03); }
.lens { position: absolute; z-index: 0; pointer-events: none; border-radius: 999px; isolation: isolate;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(6px) saturate(1.5); backdrop-filter: blur(6px) saturate(1.5);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.55), inset 0 -1px 2px rgba(0,30,80,.05), 0 0 0 .5px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.10);
  transition: opacity .3s var(--ease), transform .6s var(--spring); }
.sizes .lens { background: rgba(255, 255, 255, 0.62); }
.lens.hide { opacity: 0; transform: scale(.82, .7); transition-duration: .16s, .2s; }
.lens.landing { animation: land .7s var(--spring); }
@keyframes land { 0% { transform: scale(.86, .74); } 45% { transform: scale(1.07, .93); } 70% { transform: scale(.98, 1.03); } 100% { transform: none; } }
/* The drop itself: two blobs merged by a gooey filter, frosted and see-through while moving */
.lens-goo { position: absolute; inset: -18px -8px; z-index: 2; pointer-events: none; opacity: 0; filter: url(#goo); transition: opacity .42s var(--ease); }
.lens-goo i { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; background: #ffffff; }
.lens-goo.active { opacity: .7; transition-duration: .14s; }
.sizes .lens, .sizes .lens-goo i { border-radius: 15px; }
@media (prefers-reduced-motion: reduce) { .lens, .seg > * { transition: none !important; } .lens.landing { animation: none; } }

/* ---------- Top bar ---------- */
.topbar { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 50; pointer-events: none; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.topbar-inner > * { pointer-events: auto; }
.brand-pill { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px 0 16px; border-radius: 999px; text-decoration: none; color: var(--brand-text); }
.brand-mark { width: 18px; height: 32px; background: currentColor; -webkit-mask: url(../img/mark.png) center/contain no-repeat; mask: url(../img/mark.png) center/contain no-repeat; }
.brand-name { font: 700 1.25rem/1 var(--font-brand); letter-spacing: -0.01em; }
.navpill { height: 52px; padding: 5px; border-radius: 999px; gap: 2px; }
.navpill a { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.icon-pill { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; color: var(--ink); text-decoration: none; }
.icon-pill .icon { width: 22px; height: 22px; }
.badge { position: absolute; top: 6px; right: 6px; z-index: 2; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e5332a; color: #fff; font: 700 11px/18px var(--font); text-align: center; letter-spacing: 0; }
.badge.bump { animation: bump .45s var(--spring); }
@keyframes bump { 40% { transform: scale(1.4); } }

/* ---------- Phone tab bar ---------- */
.tabbar { display: none; }
@media (max-width: 760px) {
  :root { --nav-space: 76px; }
  .navpill, .topbar .cart-pill { display: none; }
  .brand-pill { height: 46px; padding: 0 16px 0 14px; }
  .brand-name { font-size: 1.125rem; }
  .edge-top { height: calc(70px + env(safe-area-inset-top, 0px)); }
  .tabbar { display: flex; position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 24px), 440px); height: 64px; padding: 4px; border-radius: 999px; transition: height .4s var(--spring-soft), width .4s var(--spring-soft); }
  .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: 0; min-width: 44px; }
  .tab .icon { width: 25px; height: 25px; }
  .tab .badge { top: 4px; right: calc(50% - 22px); }
  .tabbar.is-min { height: 50px; width: min(calc(100% - 96px), 330px); }
  .tabbar.is-min .tab > span:not(.badge) { display: none; }
  .tabbar.is-min .tab .icon { width: 23px; height: 23px; }
  .edge-bottom { display: block; bottom: 0; height: calc(96px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(255,255,255,.85), rgba(255,255,255,0)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent); }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body.has-accessory { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Bottom accessory (phone) ---------- */
.accessory { display: none; }
@media (max-width: 760px) {
  .accessory:not([hidden]) { display: flex; align-items: center; gap: 12px; position: fixed; z-index: 49; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 24px), 440px); padding: 7px 7px 7px 20px; border-radius: 999px; animation: rise .4s var(--spring); }
  .accessory > div { display: grid; line-height: 1.15; min-width: 0; }
  .accessory small { color: var(--ink-2); font-size: var(--fs-cap); }
  .accessory strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
  .accessory .btn, .accessory .cartctl { margin-left: auto; }
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } }

/* ---------- Notification ---------- */
.toast { position: fixed; left: 50%; top: calc(76px + env(safe-area-inset-top, 0px)); z-index: 60; transform: translate(-50%, -14px) scale(.92); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 24px); padding: 8px 8px 8px 20px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); transition: opacity .25s, transform .5s var(--spring); }
.toast.glass { background: rgba(255,255,255,.9); }
.accessory.glass { background: rgba(255,255,255,.4); }
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.toast .ok-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; flex: none; margin-left: -8px; }
.toast .ok-dot svg { width: 14px; height: 14px; }
.toast a, .toast button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--brand); color: #fff; font: 600 var(--fs-sm) var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
@media (max-width: 760px) { .toast { top: calc(68px + env(safe-area-inset-top, 0px)); } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0; font: 500 var(--fs-body)/1 var(--font); letter-spacing: -0.016em; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; }
.btn-primary { background: var(--tglass); color: #fff; box-shadow: var(--tglass-rim), var(--tglass-glow); text-shadow: 0 1px 1px rgba(0,30,80,.3); }
.btn-primary:hover { box-shadow: var(--tglass-rim), 0 12px 28px rgba(0,80,200,.38), 0 2px 4px rgba(0,30,80,.18); }
.btn-sub { font-size: var(--fs-cap); font-weight: 500; opacity: .82; margin-left: 2px; }
/* A light sweep crosses the main buy buttons every few seconds to draw the eye */
.sheen { position: relative; overflow: hidden; }
.sheen::before { content: ""; position: absolute; top: -10%; bottom: -10%; width: 38%; left: -60%; pointer-events: none; z-index: 1; transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.38), rgba(255,255,255,0)); animation: sheen 6.5s 1.8s infinite; }
@keyframes sheen { 0%, 76% { left: -60%; } 92%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .sheen::before { animation: none; display: none; } }
.btn-gray { background: var(--fill); color: var(--brand-text); }
.btn-gray:hover { background: var(--fill-2); }

.btn-wa { background: transparent; color: var(--wa); box-shadow: inset 0 0 0 1.5px rgba(21,108,64,.4); }
.btn-wa:hover { box-shadow: inset 0 0 0 1.5px var(--wa); }
.btn-wa-solid { background: var(--wa-fill); color: #fff; }
.btn-block { width: 100%; }
.btn-lg { min-height: 56px; padding: 0 30px; }

.btn[disabled] { opacity: .5; cursor: not-allowed; }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; text-decoration: none; color: var(--brand-text); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow .icon { width: 16px; height: 16px; }
.round { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; color: var(--ink); cursor: pointer; }
.round[disabled] { opacity: .35; cursor: default; }

/* Pop-up button (select) with Apple's up/down chevron, properly inset */
.pick { -webkit-appearance: none; appearance: none; height: 40px; border-radius: 999px; border: 0; padding: 0 36px 0 16px; font: 500 var(--fs-sm) var(--font); color: var(--ink); cursor: pointer; letter-spacing: -0.01em;
  background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none' stroke='%235e5e63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 5.5 5 2l3.5 3.5M1.5 10.5 5 14l3.5-3.5'/%3E%3C/svg%3E") no-repeat right 14px center / 9px 14px;
  transition: background-color .2s; }
.pick:hover { background-color: var(--fill-2); }

/* ======================================================================
   CART CONTROL: Add morphs into [delete or −] [qty] [+]
   ====================================================================== */
.cartctl { position: relative; flex: none; display: inline-block; width: 84px; height: 44px; border-radius: 999px; color: #fff; overflow: hidden;
  background: var(--tglass); box-shadow: var(--tglass-rim), var(--tglass-glow); text-shadow: 0 1px 1px rgba(0,30,80,.3);
  transition: width .55s var(--spring), transform .55s var(--spring); }
.cartctl.in-cart { width: 128px; }
.cartctl > .ctl-add, .cartctl > .ctl-step { position: absolute; inset: 0; display: flex; align-items: center; transition: opacity .2s var(--ease), transform .5s var(--spring); }
.ctl-add { justify-content: center; gap: 6px; border: 0; background: transparent; color: inherit; font: 600 var(--fs-sm) var(--font); letter-spacing: -0.01em; cursor: pointer; width: 100%; }
.ctl-add .icon { width: 16px; height: 16px; }
.ctl-step { justify-content: space-between; padding: 0 2px; }
.ctl-step button { position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .2s, transform .45s var(--spring); }
.ctl-step button:hover { background: rgba(255,255,255,.14); }
.ctl-step button:active { background: rgba(255,255,255,.26); transform: scale(1.15); transition-duration: .15s; }
.ctl-step .icon { width: 18px; height: 18px; }
.ctl-mid { display: grid; justify-items: center; line-height: 1.1; min-width: 26px; }
.ctl-qty { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-body); }
.ctl-qty.tick { animation: tick .4s var(--spring); }
@keyframes tick { 40% { transform: scale(1.35); } }
.ctl-sub { display: none; font-size: 11px; opacity: .8; font-weight: 500; }
.cartctl:not(.in-cart) > .ctl-step, .cartctl.in-cart > .ctl-add { opacity: 0; transform: scale(.6); pointer-events: none; }
.cartctl.pop { animation: pop .6s var(--spring); }
.cartctl.xl:not(.in-cart) .ctl-add::before { content: ""; position: absolute; top: -10%; bottom: -10%; width: 30%; left: -50%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0)); animation: sheen 6.5s 1.5s infinite; }
@media (hover: hover) { .pcard:hover .cartctl:not(.in-cart) .ctl-add::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0)); animation: sweep .9s var(--ease) .1s; } }
@keyframes sweep { to { left: 130%; } }
@keyframes pop { 30% { transform: scale(1.08); } }
/* Large version on product pages */
.cartctl.xl { width: 100%; height: 58px; }
.cartctl.xl .ctl-add { font-size: var(--fs-body); }
.cartctl.xl .ctl-step { padding: 0 6px; }
.cartctl.xl .ctl-step button { width: 48px; height: 48px; }
.cartctl.xl .ctl-step .icon { width: 20px; height: 20px; }
.cartctl.xl .ctl-mid { grid-auto-flow: column; gap: 6px; align-items: baseline; }
.cartctl.xl .ctl-qty { font-size: var(--fs-lg); }
.cartctl.xl .ctl-sub { display: inline; font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce) { .cartctl, .cartctl > * { transition-duration: .01ms !important; } }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(86vh, 860px); display: grid; align-items: center; overflow: hidden; background: var(--t-leaf); }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 34%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 64%); }
.hero-copy { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: start; padding-block: 140px 80px; max-width: 560px; }
.hero-copy h1 { max-width: 11ch; }
.hero-copy .lede { max-width: 30ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 4px 0 0; font-size: var(--fs-cap); color: var(--ink-2); font-weight: 500; }
.hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust .icon { width: 15px; height: 15px; color: var(--ok); }
@media (max-width: 760px) {
  .hero { min-height: 0; align-items: end; background: var(--bg); }
  .hero picture { position: relative; display: block; height: min(78vw, 470px); }
  .hero picture img { position: absolute; }
  .hero::after { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) calc(min(78vw, 470px) - 150px), #fff calc(min(78vw, 470px) - 10px)); }
  .hero-copy { padding-block: 0 48px; margin-top: -36px; gap: 16px; }
  .hero-copy .lede { max-width: 34ch; }
  .hero-copy .btn-lg { min-height: 52px; padding: 0 24px; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-alt { background: var(--bg-alt); }
.section-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head.center { justify-items: center; text-align: center; }
.section-head.row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.section-head.row > div { display: grid; gap: 8px; min-width: 0; }
.section-head.row > .head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (hover: none) { [data-shelf-prev], [data-shelf-next] { display: none !important; } }

/* Bowl close-ups (signature strip) */
.bowls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0 auto; max-width: 980px; }
.bowls a { display: grid; justify-items: center; gap: 14px; padding: 8px 4px; text-decoration: none; color: var(--ink); text-align: center; border-radius: var(--r-lg); }
.bowl { position: relative; width: clamp(64px, 13vw, 150px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--tint); box-shadow: 0 14px 30px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.06); transition: transform .6s var(--spring), box-shadow .4s var(--ease); }
.bowl img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--spring); }
.bowl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), inset 0 3px 8px rgba(255,255,255,.6), inset 0 -6px 14px rgba(0,0,0,.12); }
.bowls b { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; display: block; }
.bowls small { font-size: var(--fs-cap); color: var(--ink-2); }
@media (hover: hover) { .bowls a:hover .bowl { transform: translateY(-6px) scale(1.05); box-shadow: 0 22px 44px rgba(0,0,0,.16); } .bowls a:hover .bowl img { transform: scale(1.08); } }
.bowls a:active .bowl { transform: scale(1.1); transition-duration: .2s; }
@media (max-width: 560px) { .bowls { gap: 4px; } .bowls b { font-size: 12px; } .bowls small { display: none; } }

/* ======================================================================
   PRODUCT CARDS (Apple Store style)
   ====================================================================== */
.pcard { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--r-xl); background: var(--surface); min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .6s var(--spring), box-shadow .45s var(--ease); }
@media (hover: hover) { .pcard:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 24px 50px rgba(0,0,0,.1); } .pcard:hover .pcard-media img { transform: scale(1.05); } }
.pcard-head { display: grid; gap: 6px; }
.pcard-kicker { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.pcard-kicker .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 -1px 2px rgba(0,0,0,.2); }
.pcard h3 { font-size: 1.5rem; }
@media (max-width: 600px) { .pcard { padding: 20px; } .pcard h3 { font-size: 1.3125rem; } }
.pcard h3 a { color: inherit; text-decoration: none; }
.pcard h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pcard-sub { font-size: var(--fs-sm); color: var(--ink-2); min-height: calc(2 * 1.47em); }
.pcard-media { border-radius: var(--r-lg); overflow: hidden; background: var(--tint); aspect-ratio: 1 / 1; max-width: 100%; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--spring); }
.pcard-buy { display: grid; gap: 12px; margin-top: auto; }
.pcard-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pcard-price b { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pcard-price span { font-size: var(--fs-cap); color: var(--ink-2); }
.pcard-row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard-row .pick { flex: 1; min-width: 0; max-width: 140px; height: 44px; }

/* Shelf: horizontally scrolling row, like apple.com/store */
.shelf { display: grid; grid-auto-flow: column; grid-auto-columns: min(max(calc((min(100vw - 2 * var(--gutter), var(--wrap)) - 40px) / 3), 290px), 82%); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 10px var(--shelf-pad) 44px; scroll-padding-inline: var(--shelf-pad); scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.shelf > * { scroll-snap-align: start; }

/* Shop grid: 3 then 2, no orphans */
.pgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.pgrid > * { grid-column: span 2; }
.pgrid > :nth-child(n+4) { grid-column: span 3; }
.pgrid > :nth-child(n+4) .pcard-media { aspect-ratio: 16 / 10; }
@media (max-width: 960px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgrid > *, .pgrid > :nth-child(n+4) { grid-column: span 1; } .pgrid > :last-child:nth-child(odd) { grid-column: span 2; } .pgrid > :nth-child(n+4) .pcard-media { aspect-ratio: 1 / 1; } .pgrid > :last-child:nth-child(odd) .pcard-media { aspect-ratio: 16 / 9; } }
@media (max-width: 600px) { .pgrid { grid-template-columns: 1fr; } .pgrid > :last-child:nth-child(odd) { grid-column: auto; } .pgrid .pcard-media, .pgrid > :last-child:nth-child(odd) .pcard-media { aspect-ratio: 4 / 3 !important; } }

/* ---------- Trust ---------- */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.trust li { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 28px 24px; border-radius: var(--r-xl); background: var(--bg-alt); }
.trust .icon { width: 32px; height: 32px; color: var(--brand-text); }
.trust h3 { font-size: 1.1875rem; }
.trust p { color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 900px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .trust { grid-template-columns: 1fr; } }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.split-media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; background: var(--tint, var(--bg-alt)); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.split-copy p { color: var(--ink-2); max-width: 44ch; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.tagline { font-family: var(--font-brand); font-style: italic; font-weight: 500; color: var(--brand-text); }
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 32px 36px; border-radius: var(--r-xl); background: var(--surface); }
.band p { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; }

/* ---------- Page header ---------- */
.page-head { padding-block: clamp(32px, 6vw, 72px) clamp(20px, 3vw, 36px); display: grid; gap: 14px; }
.page-head p { max-width: 56ch; color: var(--ink-2); font-size: var(--fs-lg); line-height: 1.38; }
.crumbs { display: flex; gap: 8px; font-size: var(--fs-cap); color: var(--ink-2); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.crumbs a { color: var(--ink-2); }
.crumbs li + li::before { content: "›"; margin-right: 8px; opacity: .7; }

/* ======================================================================
   PRODUCT PAGE
   ====================================================================== */
.pdp { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-block: 12px clamp(56px, 8vw, 96px); }
.gallery { position: sticky; top: 92px; display: grid; gap: 14px; min-width: 0; }

.buybox { display: grid; gap: 22px; min-width: 0; }
.pdp-title { display: grid; gap: 8px; }
.pdp-title .tamil { color: var(--ink-2); font-size: var(--fs-sm); }
.pdp-title h1 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); }
.pdp-desc { color: var(--ink-2); max-width: 50ch; }
.price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.unit-price { font-size: var(--fs-sm); color: var(--ink-2); }
.tax-note { font-size: var(--fs-cap); color: var(--ink-2); width: 100%; }
.field-label { font-size: var(--fs-body); font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.field-label span { font-weight: 400; font-size: var(--fs-sm); color: var(--ink-2); }
/* Pack size segmented control with liquid lens */
.sizes { border: 0; margin: 0; padding: 5px; min-width: 0; background: var(--fill); border-radius: 20px; gap: 4px; }

.size-opt { flex: 1; min-width: 0; }
.size-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.size-opt label { display: grid; place-items: center; gap: 1px; height: 60px; padding: 4px 2px; border-radius: 15px; cursor: pointer; text-align: center; user-select: none; -webkit-user-select: none; }
.size-opt label b { font-weight: 600; font-size: var(--fs-sm); }
.size-opt label span { font-size: 0.75rem; opacity: .75; font-variant-numeric: tabular-nums; }
.size-opt input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.size-opt.on label { color: var(--brand-text); }
.size-opt.best { position: relative; }
.size-opt.best::before { content: "Best value"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--ok); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(29,115,71,.3); }
.sizes { margin-top: 10px; }
.viewcart { display: flex; justify-content: center; margin-top: -8px; }
.info-list { list-style: none; margin: 0; padding: 6px 20px; border-radius: var(--r-lg); background: var(--bg-alt); display: grid; }
.info-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 14px 0; font-size: var(--fs-sm); color: var(--ink-2); }
.info-list li + li { border-top: 1px solid var(--line); }
.info-list .icon { width: 24px; height: 24px; color: var(--brand-text); }
.info-list b { display: block; color: var(--ink); font-weight: 600; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.facts li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cap); font-weight: 500; padding: 7px 13px 7px 10px; border-radius: 999px; background: var(--fill); }
.facts .icon { width: 14px; height: 14px; color: var(--ok); }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; } .gallery { position: static; } }

/* How to use + details */
.howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.howto li { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: var(--r-xl); background: var(--surface); min-width: 0; }
.howto .n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); font-weight: 700; font-size: var(--fs-sm); }
.howto h3 { font-size: 1.1875rem; }
.howto.seq li { grid-template-columns: 34px 1fr; align-items: center; gap: 16px; padding: 22px 24px; }
.howto.seq p { color: var(--ink); font-size: var(--fs-body); }
.howto p { color: var(--ink-2); font-size: var(--fs-sm); }
.amount { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; color: var(--ink-2); font-size: var(--fs-sm); }
.amount b { color: var(--ink); }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; }
.specs div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); min-width: 0; }
.specs dt { font-weight: 600; }
.specs dd { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 860px) { .howto { grid-template-columns: 1fr; } .specs { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .specs div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Cart ---------- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; padding-bottom: clamp(56px, 8vw, 104px); }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }
.cart-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px 18px; padding-block: 20px; border-bottom: 1px solid var(--line); align-items: center; animation: rise-in .45s var(--spring); }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
.cart-item > img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-md); background: var(--tint); }
.cart-item h3 { font-size: 1.0625rem; }
.cart-item h3 a { color: inherit; text-decoration: none; }
.cart-item .meta { font-size: var(--fs-sm); color: var(--ink-2); }
.cart-item .right { display: grid; justify-items: end; gap: 10px; }
.cart-item .line-total { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .cart-item { grid-template-columns: 72px minmax(0, 1fr); } .cart-item > img { width: 72px; height: 72px; } .cart-item .right { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: center; } }
.summary { position: sticky; top: 92px; display: grid; gap: 18px; padding: 28px; border-radius: var(--r-xl); background: var(--bg-alt); }
.summary h2 { font-size: var(--fs-h3); }
.sum-rows { display: grid; gap: 10px; margin: 0; }
.sum-rows div { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.sum-rows dt { color: var(--ink-2); }
.sum-rows dd { margin: 0; font-weight: 500; }
.sum-rows .total { border-top: 1px solid var(--line); padding-top: 12px; font-size: var(--fs-lg); }
.sum-rows .total dt, .sum-rows .total dd { color: var(--ink); font-weight: 600; }
.ship-meter { display: grid; gap: 8px; font-size: var(--fs-sm); }
.ship-meter .bar { height: 6px; border-radius: 999px; background: var(--fill-2); overflow: hidden; }
.ship-meter .bar i { display: block; height: 100%; background: var(--ok); border-radius: inherit; transition: width .5s var(--spring-soft); }
.form { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field input, .field select { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--r-md); border: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); color: var(--ink); font: 400 var(--fs-body) var(--font); letter-spacing: -0.016em; transition: box-shadow .2s; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 40px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none' stroke='%235e5e63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 5.5 5 2l3.5 3.5M1.5 10.5 5 14l3.5-3.5'/%3E%3C/svg%3E") no-repeat right 16px center / 9px 14px; }
.field input:focus, .field select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--focus), 0 0 0 4px rgba(10,102,232,.18); }
.field .hint { font-size: var(--fs-cap); color: var(--ink-2); }
.field .err { font-size: var(--fs-cap); color: var(--danger); }
.field.invalid input, .field.invalid select { box-shadow: inset 0 0 0 2px var(--danger); }
.notice { padding: 14px 16px; border-radius: var(--r-md); font-size: var(--fs-sm); display: grid; gap: 10px; }
.notice.error { background: var(--danger-bg); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(196,36,26,.3); }
.secure { display: flex; align-items: center; gap: 8px; font-size: var(--fs-cap); color: var(--ink-2); justify-content: center; }
.secure .icon { width: 15px; height: 15px; }
.or { display: flex; align-items: center; gap: 12px; font-size: var(--fs-cap); color: var(--ink-2); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.empty { display: grid; gap: 16px; justify-items: start; padding: 32px 0 96px; }

/* ---------- Recipes ---------- */
.recipe-list { display: grid; gap: clamp(48px, 7vw, 88px); }
.recipe { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; scroll-margin-top: 100px; }
.recipe-media { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--tint); max-width: 100%; }
.recipe-media img { width: 100%; height: 100%; object-fit: cover; }
.recipe-body { display: grid; gap: 16px; min-width: 0; }
.recipe-meta { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.recipe-meta li { font-size: var(--fs-cap); padding: 6px 12px; border-radius: 999px; background: var(--fill); }
.recipe-meta b { font-weight: 600; }
.recipe-cols { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 24px; }
.recipe-cols h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.recipe-cols ul, .recipe-cols ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 820px) { .recipe { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .recipe-cols { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--fill); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.chips a:hover { background: var(--fill-2); }

/* ---------- Prose ---------- */
.prose { max-width: 68ch; display: grid; gap: 16px; padding-bottom: clamp(56px, 8vw, 104px); }
.prose h2 { font-size: 1.625rem; margin-top: 20px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose .updated { font-size: var(--fs-sm); }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.values li { display: grid; gap: 8px; padding: 28px; border-radius: var(--r-xl); background: var(--surface); align-content: start; }
.values p { color: var(--ink-2); font-size: var(--fs-sm); }
@media (max-width: 820px) { .values { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-alt); padding-block: 56px 32px; font-size: var(--fs-cap); color: var(--ink-2); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-grid h2 { font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0; color: var(--ink); margin-bottom: 10px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer-grid a { color: var(--ink-2); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.footer-grid a:hover { color: var(--ink); text-decoration: underline; }
.footer-brand { display: grid; gap: 10px; align-content: start; justify-items: start; }
.footer-brand .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--brand-text); text-decoration: none; }
.footer-brand .tagline { font-size: var(--fs-sm); }
.footer-legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .pcard:hover, .bowls a:hover .bowl, .lg.is-down { transform: none !important; }
}

/* ---------- Buying aids ---------- */
.save-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: var(--fs-cap); font-weight: 700; letter-spacing: 0; }
.pcard-price .save-tag { font-size: 0.75rem; padding: 2px 8px; color: var(--ok); }
.nudge { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-md); background: var(--bg-alt); font-size: var(--fs-sm); }
.nudge-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.nudge-t { font-weight: 600; }
.nudge.ok .nudge-t { color: var(--ok); }
.nudge-bar { height: 6px; border-radius: 999px; background: var(--fill-2); overflow: hidden; }
.nudge-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #3a7be0, var(--ok)); transition: width .7s var(--spring-soft); }
.nudge a { font-weight: 600; text-decoration: none; }
.nudge a:hover { text-decoration: underline; }
.toast .t-sub { display: block; font-size: var(--fs-cap); color: var(--ink-2); font-weight: 500; }
/* Fly-to-cart */
.fly { position: fixed; z-index: 70; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background-size: cover; background-position: center; pointer-events: none;
  box-shadow: 0 0 0 2px #fff, 0 8px 20px rgba(0,0,0,.25); }
.cart-hit { animation: hit .55s var(--spring); }
@keyframes hit { 30% { transform: scale(1.22); } 60% { transform: scale(.94); } }
/* Empty cart: greyed, outline bag */
[data-cart-label].is-empty { color: #a1a1a6; }
[data-cart-label].is-empty > svg path { fill: none; stroke: currentColor; stroke-width: 1.7px; }
.tab.on.is-empty { color: var(--brand-text); }

/* ---------- Top bar: #60606012 glass, 1px blur; active button navy-tinted glass, bold ---------- */
.topbar .glass { background: #60606012; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
.navpill .lens { background: #00306b1f; -webkit-backdrop-filter: blur(15px) saturate(1.4); backdrop-filter: blur(15px) saturate(1.4); }
.navpill a { flex-direction: column; justify-content: center; }
.navpill a.on { font-weight: 700; }
.navpill a::after { content: attr(data-label); font-weight: 700; height: 0; visibility: hidden; overflow: hidden; pointer-events: none; }

/* ---------- Page change: the new page blinks in while the bar stays put ---------- */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(root) { animation: vt-out .1s ease both; }
::view-transition-new(root) { animation: vt-in .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: scale(.992); } }
@supports not (view-transition-name: a) { main { animation: vt-in .45s cubic-bezier(.2,.8,.2,1) both; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } main { animation: none !important; } }

/* ---------- Top bar spans the screen with 16px breathing room; white 80% active button ---------- */
.topbar-inner { max-width: none; padding-inline: clamp(12px, 1.2vw, 20px); display: grid; grid-template-columns: 1fr auto 1fr; }
.topbar-inner > .brand-pill { justify-self: start; }
.topbar-inner > .cart-pill { justify-self: end; }
@media (max-width: 760px) { .topbar-inner { grid-template-columns: 1fr auto; } }
.navpill .lens { background: rgba(255, 255, 255, 0.8); }
@keyframes land { 0% { transform: scale(.88, .78); } 30% { transform: scale(1.1, .9); } 52% { transform: scale(.95, 1.06); } 72% { transform: scale(1.03, .97); } 88% { transform: scale(.99, 1.01); } 100% { transform: none; } }
.lens.landing { animation-duration: .9s; }

/* ---------- Parallax hills (home) ---------- */
.vista { position: relative; height: clamp(560px, 92vh, 860px); overflow: hidden; background: linear-gradient(180deg, #eef5fb 0%, #f4f8f1 55%, #e9f2df 100%); }
.vista-sun { position: absolute; left: 62%; top: 12%; width: 360px; height: 360px; margin-left: -180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,244,214,.95), rgba(255,244,214,0)); }
.vista-layer { position: absolute; left: -2%; width: 104%; max-width: none; bottom: -14%; object-fit: fill; will-change: transform; }
.l-back { height: 78%; } .l-mid { height: 62%; } .l-front { height: 46%; z-index: 2; }
.vista-copy { position: relative; z-index: 1; display: grid; gap: 16px; justify-items: center; text-align: center; padding-top: clamp(90px, 14vh, 150px); will-change: transform; }
.vista-copy p:not(.eyebrow) { color: var(--ink-2); max-width: 46ch; font-size: var(--fs-lg); line-height: 1.4; }
@media (max-width: 760px) { .vista { height: 640px; } .l-back { height: 70%; } .l-mid { height: 52%; } .l-front { height: 36%; } }

/* ---------- Farmore sprout: the logo grows out of the hills as you scroll ---------- */
.sprout-wrap { position: absolute; left: 72%; bottom: 13%; z-index: 1; width: clamp(84px, 8vw, 128px); margin-left: calc(clamp(84px, 8vw, 128px) / -2); will-change: transform; }
@media (max-width: 760px) { .sprout-wrap { left: 76%; bottom: 10%; } }
.sprout { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0,30,80,.25)); }
.sp-pot { fill: #00306b; }
.sp-stem { stroke: #00306b; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--g) - .12) * 2.4), 1)); }
.sp-leaf { fill: #00306b; transform-box: fill-box; transition: none; }
.sp-leaf.r { transform-origin: 0% 100%; } .sp-leaf.l { transform-origin: 100% 100%; } .sp-leaf.t { transform-origin: 50% 100%; }
.sp-leaf.l1 { transform: scale(clamp(0, calc((var(--g) - .42) * 5), 1)) rotate(calc((1 - clamp(0, calc((var(--g) - .42) * 5), 1)) * 25deg)); }
.sp-leaf.l2 { transform: scale(clamp(0, calc((var(--g) - .58) * 5), 1)) rotate(calc((1 - clamp(0, calc((var(--g) - .58) * 5), 1)) * 25deg)); }
.sp-leaf.l3 { transform: scale(clamp(0, calc((var(--g) - .74) * 5), 1)); }

/* floating moringa seeds drift up once it's grown */
.seed { position: absolute; left: 50%; bottom: 60%; width: 7px; height: 7px; border-radius: 50%; background: #f7f1df; box-shadow: 0 0 6px rgba(255,240,200,.9); opacity: calc(clamp(0, calc((var(--g) - .9) * 10), 1) * .9); animation: drift 6s ease-in-out infinite; }
.seed.s1 { margin-left: -60px; animation-delay: 0s; } .seed.s2 { margin-left: 40px; animation-delay: -1.2s; } .seed.s3 { margin-left: -20px; animation-delay: -2.4s; width: 5px; height: 5px; }
.seed.s4 { margin-left: 70px; animation-delay: -3.6s; width: 5px; height: 5px; } .seed.s5 { margin-left: -90px; animation-delay: -4.8s; }
@keyframes drift { 0% { transform: translate(0, 0); } 50% { transform: translate(12px, -60px); } 100% { transform: translate(-6px, -120px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vista { --g: 1 !important; } .seed { animation: none; } }

/* ---------- Home: the hero stays put and the page slides up over it like a sheet ---------- */
.hero[data-hero] { position: sticky; top: 0; z-index: 0; }
.hero[data-hero] picture img { will-change: transform, opacity; }
/* transform only: will-change opacity would hide the page from the glass buttons inside (backdrop root) */
.hero[data-hero] .hero-copy { will-change: transform; }
.over { position: relative; z-index: 1; background: var(--bg); border-radius: 34px 34px 0 0; margin-top: -34px; box-shadow: 0 -18px 50px rgba(0, 20, 50, .10); }
@media (max-width: 760px) { .hero[data-hero] { position: relative; } .over { margin-top: -20px; border-radius: 24px 24px 0 0; } }

/* ---------- Recipes: floating bowls parallax header ---------- */
.rp-hero { position: relative; min-height: clamp(580px, 84vh, 800px); overflow: hidden; display: grid; align-items: center; background: linear-gradient(180deg, #eef5fb 0%, #f5f9f0 62%, #ffffff 100%); }
.rp-hill-back { height: 38%; bottom: -10%; opacity: .75; }
.rp-hill-mid { height: 26%; bottom: -12%; opacity: .85; }
.rp-bowl { position: absolute; z-index: 1; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--tint); box-shadow: 0 22px 44px rgba(0, 30, 60, .16), 0 2px 6px rgba(0,0,0,.06); will-change: transform; }
.rp-bowl img { width: 100%; height: 100%; object-fit: cover; }
.rp-bowl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), inset 0 4px 10px rgba(255,255,255,.6), inset 0 -8px 16px rgba(0,0,0,.12); }
.rp-copy { position: relative; z-index: 2; display: grid; gap: 16px; justify-items: center; text-align: center; padding-block: 150px 130px; will-change: transform; }
.rp-copy h1 { max-width: 13ch; }
.rp-copy p:not(.eyebrow) { color: var(--ink-2); font-size: var(--fs-lg); max-width: 44ch; line-height: 1.4; }
.rp-copy .chips { justify-content: center; max-width: 860px; margin-top: 8px; }
.rp-copy .chips a { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.06); }
@media (max-width: 760px) { .rp-bowl { scale: .42; opacity: .3; } .rp-copy { padding-block: 120px 110px; } }

/* ===== Scale sync: one Apple-style type and layout scale on every page ===== */
.hero-copy h1, .rp-copy h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.032em; }
.vista-copy h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); }
.pdp-title h1 { font-size: var(--fs-h1); }
.eyebrow, .page-head .eyebrow, .vista-copy .eyebrow, .rp-copy .eyebrow, .hero-copy .eyebrow { font-size: var(--fs-body); font-weight: 600; color: var(--ink-2); line-height: 1.3; letter-spacing: -0.012em; max-width: none; }
.page-head { padding-block: clamp(36px, 5vw, 64px) clamp(28px, 3.5vw, 44px); gap: 12px; }
.page-head h1 { max-width: 18ch; }
.page-head p:not(.eyebrow):not(.updated) { font-size: var(--fs-lg); }
.pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pgrid > *, .pgrid > :nth-child(n+4) { grid-column: auto; }
.pgrid .pcard-media, .pgrid > :nth-child(n+4) .pcard-media { aspect-ratio: 1 / 1; }
@media (max-width: 960px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pgrid > :last-child:nth-child(odd) { grid-column: auto; } .pgrid > :last-child:nth-child(odd) .pcard-media { aspect-ratio: 1 / 1; } }
@media (max-width: 600px) { .pgrid { grid-template-columns: 1fr; } .pgrid .pcard-media, .pgrid > :last-child:nth-child(odd) .pcard-media { aspect-ratio: 4 / 3 !important; } }
.shop-grid { padding-block: clamp(40px, 5vw, 64px) clamp(64px, 8vw, 104px); }

/* ===== Hills run on under the page: layers are twice as tall (the shape sits in the top half, solid colour below) ===== */
.vista-layer { bottom: auto; top: auto; }
.l-back  { height: 156%; bottom: -92%; }
.l-mid   { height: 124%; bottom: -76%; }
.l-front { height: 92%;  bottom: -60%; z-index: 2; }
@media (max-width: 760px) { .l-back { height: 140%; bottom: -84%; } .l-mid { height: 104%; bottom: -66%; } .l-front { height: 72%; bottom: -50%; } }
.rp-hill-back { height: 76%; bottom: -48%; opacity: 1; }
.rp-hill-mid  { height: 52%; bottom: -38%; opacity: 1; }
/* the page content slides over the hills as a rounded sheet */
.sheet { position: relative; z-index: 3; background: var(--bg); border-radius: 34px 34px 0 0; margin-top: -34px; box-shadow: 0 -10px 30px rgba(0,0,0,.05); }
.sheet.section-alt { background: var(--bg-alt); }
@media (max-width: 760px) { .vista { height: 740px; } .sprout-wrap { bottom: 9%; } }
/* ===== Checkout form polish ===== */
.form-row { align-items: start; }
.field { align-content: start; }
.field input, .field select { min-height: 50px; }
.field .hint { line-height: 1.35; }
#checkout h2 { margin-bottom: 4px; }
@media (max-width: 760px) {
  .accessory.glass { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); }
  .accessory:not([hidden]) { transition: bottom .4s var(--spring-soft), width .4s var(--spring-soft), opacity .25s, transform .35s var(--spring-soft); }
  body:has(.tabbar.is-min) .accessory { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 96px), 330px); }
  .accessory.is-typing { opacity: 0; pointer-events: none; transform: translate(-50%, 16px); }
}

/* =====================================================================
   v5 · Signature moments
   ===================================================================== */
/* Top bar sits a little lower; the fade behind it is light and unblurred */
:root { --nav-space: 96px; }
.topbar { top: calc(20px + env(safe-area-inset-top, 0px)); }
.edge-top { height: calc(64px + env(safe-area-inset-top, 0px)); background: linear-gradient(to bottom, rgba(255,255,255,.38), rgba(255,255,255,0)); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 760px) { :root { --nav-space: 80px; } .topbar { top: calc(14px + env(safe-area-inset-top, 0px)); } .edge-top { height: calc(56px + env(safe-area-inset-top, 0px)); } }

/* Pages without a hero get a soft tinted top, so the glass bar always has something to sit on */
main:has(> .page-head:first-child) { background: linear-gradient(180deg, #e9f0fa 0%, #f3f7ef 260px, var(--bg) 560px); }

/* ---------- The sprout grows by itself on load ---------- */
@property --g { syntax: "<number>"; inherits: true; initial-value: 0; }
.grow-on-load { --g: 0; }
.is-live .grow-on-load { animation: sproutGrow 2.4s cubic-bezier(.33, .8, .25, 1) .25s forwards; }
@keyframes sproutGrow { from { --g: 0; } to { --g: 1; } }
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }

/* ---------- Shop: five bowls orbit the title; the logo docks into the top bar ---------- */
.shop-hero { position: relative; overflow: hidden; min-height: clamp(660px, 96vh, 940px); display: grid; place-items: center; text-align: center;
  background: radial-gradient(56% 46% at 50% 46%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 72%), linear-gradient(180deg, #e3ecf8 0%, #ebf3e2 64%, var(--bg-alt) 100%); }
.sh-ring { position: absolute; inset: 0; }
.sh-bowl { --s: clamp(104px, 11.5vw, 176px); position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; overflow: hidden; background: var(--tint); box-shadow: 0 26px 50px rgba(28, 52, 20, .2), 0 4px 10px rgba(0,0,0,.08); will-change: transform, opacity; opacity: 0; }
.sh-bowl img { width: 100%; height: 100%; object-fit: cover; }
.sh-copy { position: relative; z-index: 30; display: grid; justify-items: center; gap: 14px; padding-top: calc(var(--nav-space) - 24px); }
.sh-copy h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.035em; }
.sh-copy .lede { max-width: 38ch; margin-inline: auto; }
.sh-logo { width: 84px; margin-bottom: 4px; transform-origin: 0 0; will-change: transform, opacity; }
.sh-logo .sprout { filter: drop-shadow(0 14px 24px rgba(0, 30, 80, .25)); }
.sh-down { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; height: 44px; padding: 0 18px 0 20px; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; background: rgba(255,255,255,.6); }
.sh-down .icon { width: 16px; height: 16px; transform: rotate(90deg); }
.brand-pill .brand-mark { transition: transform .4s var(--spring); }
.brand-pill.docked .brand-mark { animation: dockPop .7s var(--spring); }
@keyframes dockPop { 0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-6deg); } 100% { transform: scale(1); } }
@media (max-width: 760px) { .shop-hero { min-height: 640px; } .sh-bowl { --s: 84px; } .sh-logo { width: 64px; } }

/* ---------- Product pages: a glow in the colour of the powder ---------- */
.pdp-page { position: relative; isolation: isolate; }
.pdp-glow { position: absolute; left: 0; right: 0; top: 0; height: 820px; overflow: hidden; pointer-events: none; z-index: -1; background: linear-gradient(180deg, var(--glow-soft) 0%, rgba(255,255,255,0) 100%); }
.pdp-glow i { position: absolute; border-radius: 50%; filter: blur(90px); }
.pdp-glow i:first-child { width: 640px; height: 640px; left: -160px; top: -200px; background: var(--glow); opacity: .32; }
.pdp-glow i:last-child { width: 520px; height: 520px; right: -120px; top: 60px; background: var(--glow); opacity: .18; }

/* ---------- Contact: a live conversation ---------- */
.ct-hero { position: relative; overflow: hidden; padding: calc(var(--nav-space) + clamp(16px, 4vw, 56px)) 0 clamp(56px, 8vw, 104px); background: linear-gradient(180deg, #e4f4ea 0%, #f1f8f3 58%, var(--bg) 100%); }
.ct-blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.ct-blob.b1 { width: 560px; height: 560px; background: #bfe9cf; opacity: .6; top: -200px; right: -140px; }
.ct-blob.b2 { width: 460px; height: 460px; background: #d4e4fb; opacity: .55; bottom: -220px; left: -160px; }
.ct-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ct-copy { display: grid; gap: 18px; justify-items: start; }
.ct-copy h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.035em; }
.ct-copy .lede { max-width: 34ch; }
.ct-hours { font-size: var(--fs-sm); }
.ct-phone { margin: 0; justify-self: center; width: min(100%, 380px); perspective: 1200px; }
.ct-screen { border-radius: 44px; padding: 14px 14px 18px; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 44px 90px rgba(20, 70, 40, .18), 0 8px 22px rgba(0,0,0,.06);
  transform: rotateY(calc(var(--ty, 0) * 1deg)) rotateX(calc(var(--tx, 0) * 1deg)); transition: transform .8s var(--spring-soft); }
.ct-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 14px; border-bottom: 1px solid rgba(0,0,0,.06); }
.ct-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--brand-text); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.ct-avatar .brand-mark { width: 14px; height: 25px; }
.ct-head b { display: block; font-size: var(--fs-body); line-height: 1.2; }
.ct-head small { color: var(--ink-2); font-size: var(--fs-cap); }
.ct-thread { list-style: none; margin: 0; padding: 16px 4px 4px; display: grid; gap: 10px; min-height: 340px; align-content: start; }
.ct-thread li { max-width: 82%; padding: 10px 14px; border-radius: 20px; font-size: var(--fs-sm); line-height: 1.38; opacity: 0; transform: translateY(16px) scale(.86); transition: opacity .3s var(--ease), transform .6s var(--spring); }
.ct-thread .me { justify-self: end; background: #d9fdd3; border-bottom-right-radius: 6px; transform-origin: 100% 100%; }
.ct-thread .them { justify-self: start; background: #fff; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.06); transform-origin: 0 100%; }
.ct-thread li.in { opacity: 1; transform: none; }
.ct-thread .typing { justify-self: start; display: flex; gap: 4px; padding: 13px 15px; background: #fff; border-bottom-left-radius: 6px; transform-origin: 0 100%; }
.ct-thread .typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa3a0; animation: blink 1.2s infinite; }
.ct-thread .typing i:nth-child(2) { animation-delay: .2s; } .ct-thread .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.ct-phone figcaption { text-align: center; margin-top: 14px; font-size: var(--fs-cap); color: var(--ink-2); }
.ct-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ct-tiles li { display: grid; gap: 4px; align-content: start; padding: 24px; border-radius: var(--r-xl); background: var(--bg-alt); min-width: 0; }
.ct-tiles li.wide { grid-column: 1 / -1; }
.ct-tiles span:not(.ct-ic) { font-size: var(--fs-cap); color: var(--ink-2); font-weight: 500; }
.ct-tiles a, .ct-tiles b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ct-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #fff; color: var(--brand-text); margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.ct-ic .icon { width: 22px; height: 22px; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } .ct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ct-tiles { grid-template-columns: 1fr; } .ct-thread { min-height: 310px; } }

/* ---------- Our Story: sunrise, a sentence that fills in, and the journey ---------- */
.st-hero { position: relative; overflow: hidden; min-height: clamp(620px, 94vh, 900px); display: grid; place-items: center; text-align: center; background: linear-gradient(180deg, #f9ead6 0%, #fcf4e8 42%, #f2f7ec 78%, var(--bg) 100%); }
.st-sun { position: absolute; left: 50%; top: 52%; width: min(80vw, 820px); aspect-ratio: 1; margin-left: calc(min(80vw, 820px) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(255, 207, 120, .7) 0%, rgba(255, 214, 140, .28) 38%, rgba(255, 214, 140, 0) 68%); will-change: transform; }
.st-copy { position: relative; display: grid; gap: 22px; justify-items: center; padding-top: calc(var(--nav-space) - 16px); }
.st-copy h1 { font-size: clamp(2.75rem, 1.1rem + 5.6vw, 6rem); line-height: 1.02; letter-spacing: -.042em; max-width: 13ch; }
.st-copy .lede { max-width: 44ch; margin-inline: auto; }
.rise-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .1em; margin-bottom: -.1em; }
.rise-words .w > span { display: inline-block; transform: translateY(110%); }
.is-live .rise-words .w > span { animation: riseIn 1s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(.2s + var(--d) * .09s); }
@keyframes riseIn { to { transform: none; } }
.st-copy .eyebrow, .st-copy .lede { opacity: 0; }
.is-live .st-copy .eyebrow { animation: fadeUp .8s var(--ease) .05s forwards; }
.is-live .st-copy .lede { animation: fadeUp 1s var(--ease) .8s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.st-cue { position: absolute; bottom: 28px; left: 50%; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.22); }
.st-cue span { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: rgba(0,0,0,.35); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
.st-statement { padding-block: clamp(88px, 14vw, 180px); }
.st-statement p { font-size: clamp(1.75rem, .9rem + 2.8vw, 3.25rem); line-height: 1.16; letter-spacing: -.028em; font-weight: 600; max-width: 26ch; margin: 0 auto; color: var(--ink); }
.st-statement [data-fill] span { opacity: calc(.14 + .86 * var(--on, 0)); }
.st-journey { padding-block: clamp(72px, 10vw, 128px) clamp(56px, 8vw, 96px); background: var(--bg-alt); }
.jr { position: relative; max-width: 940px; margin: 0 auto; }
.jr ol { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(36px, 6vw, 72px); }
.jr-line { position: absolute; left: 50%; top: 32px; bottom: 150px; width: 4px; margin-left: -2px; border-radius: 2px; background: rgba(0, 48, 107, .1); }
.jr-line i { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(180deg, #8cbc6c, #00306b); }
.jr li { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; gap: 28px; }
.jr-dot { grid-column: 2; grid-row: 1; position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #8a8f98; box-shadow: 0 0 0 8px var(--bg-alt), 0 8px 20px rgba(0,0,0,.08); transition: background .45s var(--ease), color .45s var(--ease), transform .6s var(--spring); }
.jr-dot .icon { width: 26px; height: 26px; }
.jr li.on .jr-dot { background: #00306b; color: #fff; transform: scale(1.08); }
.jr-card { grid-column: 3; grid-row: 1; padding: 24px 26px; border-radius: var(--r-xl); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); opacity: .3; transform: translateX(20px); transition: opacity .6s var(--ease), transform .8s var(--spring-soft), box-shadow .6s; }
.jr li:nth-child(even) .jr-card { grid-column: 1; text-align: right; transform: translateX(-20px); }
.jr li.on .jr-card { opacity: 1; transform: none; box-shadow: 0 18px 40px rgba(0,0,0,.07); }
.jr-n { font-size: var(--fs-cap); font-weight: 700; color: #6f9f52; letter-spacing: .06em; }
.jr-card h3 { font-size: 1.3125rem; margin: 4px 0 6px; }
.jr-card p { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; }
.jr-end { position: relative; width: 84px; margin: 24px auto 0; }
@media (max-width: 760px) {
  .jr-line { left: 32px; bottom: 140px; }
  .jr li { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; }
  .jr-dot { grid-column: 1; }
  .jr-card, .jr li:nth-child(even) .jr-card { grid-column: 2; text-align: left; transform: translateY(14px); padding: 20px; }
  .jr-end { margin-left: -10px; width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .grow-on-load { --g: 1 !important; animation: none !important; }
  .rise-words .w > span, .st-copy .eyebrow, .st-copy .lede { transform: none !important; opacity: 1 !important; animation: none !important; }
  .ct-thread li { opacity: 1; transform: none; transition: none; } .ct-thread .typing i { animation: none; }
  .st-statement [data-fill] span { opacity: 1; }
  .jr-card { opacity: 1; transform: none !important; } .jr-line i { height: 100%; }
  .sh-bowl { opacity: 1; } .st-cue span { animation: none; }
  
}
.brand-pill.awaiting .brand-mark { opacity: 0; transform: scale(.4); }
.ct-thread .typing:not(.in) { display: none; }
.ct-thread .typing.in { animation: typingIn .45s var(--spring); }
@keyframes typingIn { from { opacity: 0; transform: translateY(10px) scale(.8); } }
.sh-bowl { --s: clamp(96px, 10vw, 150px); }
.sh-logo { width: 72px; }
@media (max-width: 760px) { .sh-bowl { --s: 76px; } .sh-logo { width: 58px; } }
@media (max-width: 760px) { .shop-hero { min-height: 700px; } }
.ct-blob.b2 { bottom: auto; top: 46%; opacity: .45; }
.ct-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg)); pointer-events: none; }
.ct-grid { z-index: 1; }
.pdp-glow i:first-child { opacity: .26; }
.st-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg)); pointer-events: none; }
.st-copy, .st-cue { z-index: 1; }
.ct-thread .typing.mine { justify-self: end; background: #d9fdd3; border-bottom-left-radius: 20px; border-bottom-right-radius: 6px; transform-origin: 100% 100%; }
.ct-thread .typing.mine i { background: #6a9e66; }

/* ---------- Contact us: frosted button over a living green shape ---------- */
.ct-hero { overflow: visible; overflow-x: clip; }
.ct-blob.b2 { top: auto; bottom: 60px; }
.mail-wrap { position: relative; display: inline-grid; isolation: isolate; }

@keyframes morph {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; }
  50% { transform: translate(6px, -4px) rotate(16deg) scale(1.07); border-radius: 42% 58% 45% 55% / 60% 40% 60% 40%; }
}
.mail-btn { position: relative; z-index: 1; gap: 8px; color: #10301f; font-weight: 600; background: rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55), 0 10px 26px rgba(15, 90, 50, .22);
  transition: transform .55s var(--spring), -webkit-backdrop-filter .45s var(--ease), backdrop-filter .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease); }
.mail-btn .icon { width: 20px; height: 20px; }
@media (hover: hover) { .mail-btn:hover { background: rgba(255,255,255,.34); } }
.mail-btn:active, .mail-btn[aria-expanded="true"] { transform: translateY(-7px);
  -webkit-backdrop-filter: blur(4px) saturate(1.4); backdrop-filter: blur(4px) saturate(1.4); background: rgba(255,255,255,.52);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.85), 0 20px 38px rgba(15, 90, 50, .3); }
.mail-btn:focus-visible { outline: 3px solid #1f9d55; outline-offset: 3px; }
.mail-pop { position: absolute; z-index: 40; top: calc(100% + 14px); left: -6px; width: min(310px, calc(100vw - 32px)); padding: 8px; border-radius: 22px;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 24px 60px rgba(0,0,0,.16), 0 4px 12px rgba(0,0,0,.06); transform-origin: 30px 0; animation: popIn .4s var(--spring); }
.mail-pop[hidden] { display: none; }
@keyframes popIn { from { opacity: 0; transform: translateY(-8px) scale(.9); } }
.mail-pop-head { display: grid; gap: 1px; margin: 0; padding: 8px 12px 8px; }
.mail-pop-head b { font-size: var(--fs-body); }
.mail-pop-head span { font-size: var(--fs-cap); color: var(--ink-2); }
.mail-pop a, .mail-pop button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 10px; border: 0; border-radius: 14px; background: none; color: var(--ink); font: 500 var(--fs-sm) var(--font); letter-spacing: -0.01em; text-decoration: none; text-align: left; cursor: pointer; }
.mail-pop a:hover, .mail-pop button:hover, .mail-pop a:focus-visible, .mail-pop button:focus-visible { background: rgba(0,0,0,.05); outline: none; }
.mo-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--c, #5b6470); color: #fff; font-size: 14px; font-weight: 700; }
.mo-ic .icon { width: 17px; height: 17px; }
.mo-ic.soft { background: rgba(0,0,0,.06); color: var(--ink); }
.mo-sub { margin-left: auto; font-size: var(--fs-cap); color: var(--ink-2); }
.mail-pop hr { border: 0; border-top: 1px solid rgba(0,0,0,.08); margin: 6px 10px; }
@media (prefers-reduced-motion: reduce) {  .mail-pop { animation: none; } }

/* Palmyra close-up is a jar shot: show its top (rim, flour and scoop) like the other bowls */
.bowl img[src*="palmyra-sprout-flour-bowl"], .sh-bowl img[src*="palmyra-sprout-flour-bowl"], .rp-bowl img[src*="palmyra-sprout-flour-bowl"] { height: 122%; object-position: 50% 0; }

body { position: relative; }

/* Sprout grows with scroll (hero and footer); sways once fully grown */

/* ---------- Home: blue ball → U → sprout grows with a wiggle → fireflies ---------- */
.powders { position: relative; }
.grow-stage { --b: 0; --m: 0; --g: 0; position: absolute; z-index: 2; right: max(28px, calc((100% - var(--wrap)) / 2 + 8px)); top: clamp(36px, 5vw, 72px); width: clamp(84px, 7.4vw, 108px); pointer-events: none; }
.grow-stage .sprout { display: block; overflow: visible; transform-origin: 50% 88%; filter: drop-shadow(0 12px 20px rgba(0, 30, 80, .24)); }

.grow-stage .sp-pot { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(calc(.35 + .65 * var(--m))); opacity: calc(var(--m) * 1.6); }
.grow-stage.grown .sprout { animation: sway 6s ease-in-out infinite; }
.ff-layer { position: absolute; inset: 0; overflow: visible; }
.ff { position: absolute; left: 0; top: 0; width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); will-change: transform, opacity;
  animation: ffPath var(--d) cubic-bezier(.37, 0, .63, 1) forwards; }
.ff i { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0%, #ffe680 30%, #ffc92e 55%, rgba(255, 190, 40, 0) 72%);
  box-shadow: 0 0 6px 2px rgba(255, 214, 80, .75), 0 0 16px 6px rgba(255, 190, 40, .32), 0 0 28px 10px rgba(170, 220, 90, .16);
  animation: ffBlink var(--bl) ease-in-out var(--bd) infinite; }
@keyframes ffPath {
  0% { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0; }
  10% { opacity: 1; }
  35% { transform: translate(calc(var(--sx) + var(--x1)), calc(var(--sy) + var(--y1))) scale(1); }
  70% { transform: translate(calc(var(--sx) + var(--x2)), calc(var(--sy) + var(--y2))) scale(.9); opacity: 1; }
  100% { transform: translate(calc(var(--sx) + var(--x3)), calc(var(--sy) + var(--y3))) scale(.3); opacity: 0; }
}
@keyframes ffBlink { 0%, 100% { opacity: 1; transform: scale(1); } 45% { opacity: .25; transform: scale(.7); } 60% { opacity: .9; transform: scale(1.05); } }
@media (max-width: 760px) {
  .grow-stage { position: relative; right: auto; top: auto; width: 64px; margin: 0 auto 8px; }
  .powders { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { .grow-stage .sprout { animation: none !important; } .ff { display: none; } }
.ff i { background: radial-gradient(circle, #fffef2 0%, #fff0a0 22%, #ffd23a 46%, rgba(255, 180, 20, 0) 72%);
  box-shadow: 0 0 8px 3px rgba(255, 205, 60, .85), 0 0 22px 8px rgba(255, 175, 30, .38), 0 0 40px 14px rgba(160, 215, 80, .18); }
.ff i::before, .ff i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 260%; height: 2px; margin: -1px 0 0 -130%; border-radius: 2px; background: linear-gradient(90deg, rgba(255,230,120,0), rgba(255,240,170,.95), rgba(255,230,120,0)); }
.ff i::after { transform: rotate(90deg); }
.grow-stage::before { content: ""; position: absolute; left: 50%; top: 30%; width: 220%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(var(--g) * .9)); border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 120, .32), rgba(255, 226, 120, 0) 62%); opacity: var(--g); pointer-events: none; }

/* ===== Top bar 10% larger ===== */
:root { --nav-space: 102px; }
.brand-pill { height: 57px; padding: 0 22px 0 18px; gap: 10px; }
.brand-pill .brand-mark { width: 20px; height: 35px; }
.brand-pill .brand-name { font-size: 1.375rem; }
.navpill { height: 57px; padding: 5px; }
.navpill a { height: 47px; padding: 0 20px; font-size: 1.03rem; }
.icon-pill { width: 57px; height: 57px; }
.icon-pill .icon { width: 24px; height: 24px; }
@media (max-width: 760px) { :root { --nav-space: 86px; } .brand-pill { height: 51px; padding: 0 18px 0 15px; } .brand-pill .brand-name { font-size: 1.24rem; } .brand-pill .brand-mark { width: 19px; height: 33px; } }

/* ===== Home: About ===== */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.about-copy { display: grid; gap: 18px; justify-items: start; }
.about-copy .lede { max-width: 32ch; }
.about-copy > p:not(.eyebrow):not(.lede):not(.about-fssai) { color: var(--ink-2); max-width: 46ch; }
.about-fssai { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: var(--fs-cap); color: var(--ink-2); font-weight: 500; }
.about-fssai .icon { width: 16px; height: 16px; color: var(--ok); }
.about-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.about-tiles li { display: grid; gap: 6px; align-content: start; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-xl); background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.04);
  opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .9s var(--spring-soft), box-shadow .4s var(--ease); transition-delay: calc(var(--k) * 90ms); }
.about-tiles li:nth-child(even) { margin-top: 28px; }
.about-tiles.in li { opacity: 1; transform: none; }
@media (hover: hover) { .about-tiles li:hover { box-shadow: 0 20px 44px rgba(0,0,0,.08); transform: translateY(-4px); transition-delay: 0s; } }
.ab-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); margin-bottom: 10px; }
.ab-ic .icon { width: 24px; height: 24px; }
.about-tiles h3 { font-size: 1.1875rem; }
.about-tiles p { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .about-tiles { grid-template-columns: 1fr; } .about-tiles li:nth-child(even) { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .about-tiles li { opacity: 1; transform: none; transition: none; } }

/* ===== Footer: the big sprout grows as you reach the bottom ===== */

/* =====================================================================
   v7 · smoother, calmer, deeper
   ===================================================================== */
/* Sprout stage: the original growth (U → stem → leaves), no ball */
.grow-stage { --g: 0; }
.grow-stage .sp-pot { transform: none; opacity: 1; }
.grow-stage::before { display: none; }
/* Particles: small soft dots, nothing more */
.ff i { background: radial-gradient(circle, #fff6c8 0%, #ffd75a 55%, rgba(255, 200, 60, 0) 100%); box-shadow: 0 0 6px 1px rgba(255, 200, 70, .5); }
.ff i::before, .ff i::after { content: none; }
@keyframes ffBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* The second sprout sits on the top-right of the WhatsApp sheet */
.band-sheet { position: relative; }
.band-sheet .grow-stage { top: clamp(18px, 3vw, 40px); }
@media (max-width: 760px) { .band-sheet .grow-stage { margin-bottom: 4px; } .band-sheet { padding-top: 36px; } }

/* Parallax scenes: clouds, mist, sun rays, foreground moringa */
.vista, .rp-hero { isolation: isolate; }
.cloud { position: absolute; z-index: 0; height: 70px; border-radius: 999px; background: #fff; opacity: .75; filter: blur(14px); pointer-events: none; animation: cloudDrift 70s linear infinite alternate; will-change: transform; }
.cloud.c1 { width: 340px; left: 6%; top: 10%; }
.cloud.c2 { width: 260px; left: 58%; top: 20%; opacity: .6; animation-duration: 90s; animation-delay: -30s; }
.cloud.c3 { width: 200px; left: 30%; top: 4%; opacity: .5; height: 50px; animation-duration: 110s; animation-delay: -60s; }
@keyframes cloudDrift { from { translate: -60px 0; } to { translate: 90px 0; } }
.mist { position: absolute; left: -5%; right: -5%; bottom: 18%; height: 30%; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.55) 45%, rgba(255,255,255,0)); filter: blur(6px); will-change: transform; }
.rp-hero .mist { bottom: 6%; height: 26%; }
.vista-sun { z-index: 0; will-change: transform; }
.vista-sun .rays { position: absolute; inset: -60%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 236, 190, .35) 0deg 6deg, rgba(255, 236, 190, 0) 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 72%); mask: radial-gradient(closest-side, #000 20%, transparent 72%); animation: spin 120s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vista-layer.l-back, .rp-hill-back { z-index: 0; } .vista-layer.l-mid, .rp-hill-mid { z-index: 1; }
.vista-copy { z-index: 2; will-change: transform, opacity, filter; }
.vista-layer.l-front { z-index: 3; }
.fg-leaf { position: absolute; z-index: 4; bottom: -6%; width: clamp(200px, 22vw, 340px); max-width: none; pointer-events: none; filter: blur(1.5px) drop-shadow(0 20px 30px rgba(20, 50, 10, .25)); will-change: transform; }
.fg-leaf.left { left: -4%; transform-origin: 0 100%; }
.fg-leaf.right { right: -5%; transform: scaleX(-1); transform-origin: 100% 100%; }
.fg-leaf.right { scale: -1 1; transform: none; }
@media (max-width: 760px) { .fg-leaf { width: 150px; bottom: -4%; } .cloud { filter: blur(10px); } .cloud.c1 { width: 200px; } .cloud.c2 { width: 160px; } }
@media (prefers-reduced-motion: reduce) { .cloud, .vista-sun .rays { animation: none; } }

/* Contact us: frosted button over flowing WhatsApp-green ribbons */
.ribbons { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.ribbons path { fill: none; stroke-linecap: round; }
.ribbons .thin { stroke-dasharray: 6 10; animation: dash 6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -160; } }
.mail-btn { background: rgba(255,255,255,.58); -webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 26px rgba(7, 94, 84, .16); }
@media (hover: hover) {
  .mail-btn:hover { transform: translateY(-7px) scale(1.04); background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(2px) saturate(1.2); backdrop-filter: blur(2px) saturate(1.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.9), 0 22px 40px rgba(7, 94, 84, .26); }
}
.mail-btn:active, .mail-btn[aria-expanded="true"] { transform: translateY(-7px) scale(1.04); background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(3px) saturate(1.2); backdrop-filter: blur(3px) saturate(1.2); }
@media (prefers-reduced-motion: reduce) { .ribbons .thin { animation: none; } }
.fg-leaf { width: clamp(150px, 15vw, 250px); bottom: -14%; }
.fg-leaf.left { left: -3%; }
.fg-leaf.right { right: -3%; transform-origin: 50% 50%; }
@media (max-width: 760px) { .fg-leaf { width: 120px; bottom: -10%; } }
/* the sheet sprout plants itself on the sheet's top edge, above the card */
.band-sheet .grow-stage { top: 22px; width: clamp(76px, 6.4vw, 96px); transform: translateY(-58%); right: max(28px, calc((100% - var(--wrap)) / 2 + 24px)); }
@media (max-width: 760px) { .band-sheet .grow-stage { transform: none; top: auto; } }

/* ===== v8 ===== */
/* Foreground moringa: rooted behind the sheet below, swaying gently instead of floating */
.fg-leaf { bottom: -36px; transform: none !important; }
.fg-leaf.left { transform-origin: 0% 100%; animation: leafSway 7s ease-in-out infinite; }
.fg-leaf.right { transform-origin: 50% 100%; animation: leafSway 8s ease-in-out -3s infinite reverse; }
@keyframes leafSway { 0%, 100% { rotate: 0deg; } 50% { rotate: 2.5deg; } }
@media (max-width: 760px) { .fg-leaf { bottom: -26px; width: 118px; } }
@media (prefers-reduced-motion: reduce) { .fg-leaf { animation: none; } }

/* Sprouts sit centred above their section on phones and tablets */
@media (max-width: 1024px) {
  .grow-stage, .band-sheet .grow-stage { position: relative; left: auto; right: auto; top: auto; transform: none; margin: 0 auto 10px; width: 72px; }
  .powders { padding-top: 40px; }
  .band-sheet { padding-top: 36px; }
}

/* Bottom tab bar: the same glass as the desktop top bar */
.tabbar.glass { background: #60606012; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
.tabbar .lens { background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(15px) saturate(1.4); backdrop-filter: blur(15px) saturate(1.4); }
.tabbar .tab[aria-current="page"] { font-weight: 700; }
.edge-bottom { background: linear-gradient(to top, rgba(255,255,255,.38), rgba(255,255,255,0)); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ===== v9: grey glass, #67676733 ===== */
/* Contact us: clear by default (ribbons show through), frosts over on hover */
.mail-btn { background: #67676733; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.55), 0 10px 26px rgba(7, 94, 84, .14); }
@media (hover: hover) {
  .mail-btn:hover { transform: translateY(-7px) scale(1.04); background: #67676733; -webkit-backdrop-filter: blur(15px) saturate(1.3); backdrop-filter: blur(15px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.7), 0 22px 40px rgba(7, 94, 84, .24); }
}
.mail-btn:active, .mail-btn[aria-expanded="true"] { transform: translateY(-7px) scale(1.04); background: #67676733; -webkit-backdrop-filter: blur(15px) saturate(1.3); backdrop-filter: blur(15px) saturate(1.3); }

/* Menu (top bar and phone tab bar): the active pill rests as 15px frosted grey glass;
   the drop that travels between items on click is the same grey, lightly blurred */
.navpill .lens, .tabbar .lens { background: #67676733; -webkit-backdrop-filter: blur(15px) saturate(1.3); backdrop-filter: blur(15px) saturate(1.3); }
.navpill .lens-goo i, .tabbar .lens-goo i { background: #676767; }
.navpill .lens-goo.active, .tabbar .lens-goo.active { opacity: .2; }
.navpill .lens-goo, .tabbar .lens-goo { filter: url(#goo) blur(1px); }

/* ===== v10 ===== */
/* Home hero: the photo stays pinned in place; the words scroll with the page and the sheet slides over the photo */
@media (min-width: 761px) {
  .hero[data-hero] { position: relative; clip-path: inset(0); }
  .hero[data-hero] picture { position: fixed; top: 0; left: 0; width: 100%; height: min(86vh, 860px); }
  .hero[data-hero] picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero[data-hero] .hero-copy { transform: none !important; }
}
/* "See recipes" uses the same glass as Contact us: clear by default, frosts and lifts on hover */
.glass-btn { position: relative; gap: 8px; color: #10301f; font-weight: 500; background: #67676733; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.55), 0 10px 26px rgba(0, 40, 30, .12);
  transition: transform .55s var(--spring), -webkit-backdrop-filter .45s var(--ease), backdrop-filter .45s var(--ease), box-shadow .45s var(--ease); }
@media (hover: hover) {
  .glass-btn:hover { transform: translateY(-7px) scale(1.04); -webkit-backdrop-filter: blur(15px) saturate(1.3); backdrop-filter: blur(15px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.7), 0 22px 40px rgba(0, 40, 30, .2); }
}
.glass-btn:active { transform: translateY(-7px) scale(1.04); -webkit-backdrop-filter: blur(15px) saturate(1.3); backdrop-filter: blur(15px) saturate(1.3); }
.glass-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* ===== v11 · Policies hub ===== */
.page-head .eyebrow a { color: inherit; text-decoration: none; }
.page-head .eyebrow a:hover { text-decoration: underline; }
.pol-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: clamp(40px, 6vw, 72px); }
.pol-card { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 22px; background: var(--paper-2, #f5f5f7); color: var(--ink); text-decoration: none; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.pol-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.08); }
.pol-card b { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; }
.pol-card > span:last-child { color: var(--ink-2); font-size: var(--fs-sm, .9375rem); line-height: 1.45; }
.pol-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: #1f7a3f; margin-bottom: 6px; }
.pol-ic svg { width: 22px; height: 22px; }
.biz-dl { display: grid; margin: 4px 0 0; border-top: 1px solid rgba(0,0,0,.08); }
.biz-dl > div { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.biz-dl dt { color: var(--ink-2); }
.biz-dl dd { margin: 0; color: var(--ink); }
@media (max-width: 520px) { .biz-dl > div { grid-template-columns: 1fr; gap: 2px; } }
.pay-legal { font-size: var(--fs-sm, .875rem); color: var(--ink-2); text-align: center; margin-top: 10px; }
.pay-legal a { color: inherit; }

/* ===== v12 · Launch offer ===== */
.mrp { color: var(--ink-3, #86868b); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(200, 40, 40, .65); font-weight: 500; margin-right: .4em; font-size: .78em; }
.sale { color: #1f7a3f; }
.pcard-price .mrp { font-size: .8em; }
.price .mrp { font-size: .62em; vertical-align: .12em; }
.offer-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; background: rgba(31, 157, 85, .12); color: #156b37; font-size: .8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; vertical-align: middle; }
.offer-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.offer-chip time { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.offer-chip .offer-chip-t { font-weight: 500; opacity: .85; }
.offer-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 0 rgba(31, 157, 85, .5); animation: offerPulse 1.6s infinite; order: -1; }
@keyframes offerPulse { 70% { box-shadow: 0 0 0 7px rgba(31, 157, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); } }

.offer-chip[hidden] { display: none; }
.price-row .offer-chip { margin-left: 2px; }
.cart-offer { margin: 6px 0 0; }
.sum-save dt, .sum-save dd { color: #1f7a3f; font-weight: 600; }
.price-table .mrp { display: block; margin: 0; font-size: .82em; }
[data-from] .mrp { font-size: .9em; margin-right: .3em; }

@media (max-width: 420px) {  .offer-chip .offer-chip-t { display: none; } }
@media (prefers-reduced-motion: reduce) { .offer-chip::before { animation: none; } }

/* Menus: a more liquid drop — slightly more visible while it pours */
.navpill .lens-goo.is-liquid.active, .tabbar .lens-goo.is-liquid.active { opacity: .32; }
.navpill .lens.landing, .tabbar .lens.landing { animation: landLiquid 1s cubic-bezier(.2, .9, .3, 1); }
@keyframes landLiquid { 0% { transform: scale(1.18, .7); } 22% { transform: scale(.9, 1.14); } 42% { transform: scale(1.07, .93); } 60% { transform: scale(.97, 1.04); } 78% { transform: scale(1.015, .985); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .navpill .lens.landing, .tabbar .lens.landing { animation: none; } }
.btn-sub .sale { color: inherit; }
.size-opt span.sale { color: #1f7a3f; font-weight: 600; }
.size-opt input:checked + label span.sale { color: #156b37; }

/* ===== v13 · Shop launch banner, sold-out states ===== */

/* sold out */
.cartctl.sold-out .ctl-add { background: rgba(0, 0, 0, .06); color: var(--ink-2); box-shadow: none; cursor: not-allowed; }
.cartctl.sold-out { pointer-events: auto; }
.pcard.is-soldout .pcard-media img { filter: grayscale(.85) opacity(.7); }
.pcard.is-soldout .pcard-head::after { content: "Sold out"; position: absolute; top: 18px; right: 18px; padding: 5px 11px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: rgba(0, 0, 0, .07); color: var(--ink-2); }
.pcard { position: relative; }
.size-opt.is-out label { opacity: .45; text-decoration: line-through; text-decoration-thickness: 1px; cursor: not-allowed; }
.size-opt.is-out.best label::after { display: none; }
.soldout-note { flex-basis: 100%; margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .045); color: var(--ink-2); font-size: .9375rem; }
.soldout-note[hidden] { display: none; }
.soldout-line { margin: 4px 0 0; color: #b3261e; font-size: .8125rem; font-weight: 600; }
.cart-item.is-soldout img { filter: grayscale(1) opacity(.6); }
.stock-warn { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #fde2e1; color: #8c1d18; font-size: .875rem; font-weight: 500; }
.stock-warn[hidden] { display: none; }
#pay-btn:disabled { opacity: .5; cursor: not-allowed; }
.cartctl.sold-out { background: rgba(0, 0, 0, .07) !important; box-shadow: none !important; color: var(--ink-2) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cartctl.sold-out::before, .cartctl.sold-out::after { display: none !important; }
.cartctl.sold-out .ctl-add { background: transparent; color: var(--ink-2); }
.pcard-price b .sale { font-size: inherit; color: #1f7a3f; }
.pcard-price b .mrp { font-size: .6em; vertical-align: .18em; }
#paybar button:disabled { opacity: .5; }

/* ===== v15 · minimum order + WhatsApp checkout while online payment is off ===== */
.stock-warn.is-min { background: rgba(0, 48, 107, .07); color: var(--ink); }

/* ===== v16 · steady top bar + smoother page changes ===== */
svg.brand-mark { display: block; background: none; -webkit-mask: none; mask: none; color: inherit; flex: none; }
.brand-mark path { fill: currentColor; }
/* the shop logo now docks with a pulse instead of disappearing from the bar first */
.brand-pill.awaiting .brand-mark { opacity: 1; transform: none; }
/* named, so each pill stays perfectly still while the page underneath changes */
.topbar { view-transition-name: none; }
.brand-pill { view-transition-name: tb-brand; }
.navpill { view-transition-name: tb-nav; }
.topbar .cart-pill { view-transition-name: tb-cart; }
::view-transition-group(tb-brand), ::view-transition-group(tb-nav), ::view-transition-group(tb-cart), ::view-transition-group(tabbar) { animation-duration: 0s; }
::view-transition-old(tb-brand), ::view-transition-old(tb-cart) { animation: none; opacity: 0; }
::view-transition-new(tb-brand), ::view-transition-new(tb-cart) { animation: none; }
::view-transition-old(tb-nav), ::view-transition-old(tabbar) { animation: vt-out .18s ease both; }
::view-transition-new(tb-nav), ::view-transition-new(tabbar) { animation: none; }
/* keep the glass alive during the change (snapshots can't blur what's behind them) */
::view-transition-group(tb-brand), ::view-transition-group(tb-nav), ::view-transition-group(tb-cart) { border-radius: 999px; overflow: hidden; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
::view-transition-old(root) { animation: vt-out .12s ease both; }
::view-transition-new(root) { animation: vt-in .24s cubic-bezier(.2, .8, .2, 1) both; }
/* below-the-fold work is skipped until it's needed */
.site-footer { content-visibility: auto; contain-intrinsic-size: auto 520px; }
.pcard { contain: layout style; }
::view-transition-old(tb-nav), ::view-transition-old(tabbar) { animation: none; opacity: 0; }

/* ===== v17 · "online payment coming soon" notice ===== */
.pay-info { margin: 12px 0 0; padding: 14px 16px; border-radius: 16px; background: rgba(31, 157, 85, .09); color: var(--ink); font-size: .9375rem; line-height: 1.45; }
.pay-info[hidden] { display: none; }
.pay-info p { margin: 0; color: var(--ink-2); }
.pay-info .pay-info-t { color: #156b37; font-weight: 600; margin-bottom: 4px; }
.pay-info .pay-info-thanks { margin-top: 6px; color: var(--ink); }
.pay-info.show { animation: payInfoIn .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes payInfoIn { from { opacity: 0; transform: translateY(-6px); } }

@keyframes waNudge { 0%, 100% { transform: none; box-shadow: none; } 30% { transform: scale(1.035); box-shadow: 0 0 0 6px rgba(31, 157, 85, .18); } 60% { transform: scale(.995); } }
@media (prefers-reduced-motion: reduce) { .pay-info.show { animation: none; } }

/* ===== v18 · "Did you send your order?" dialog ===== */
.ask-dlg { width: min(420px, calc(100vw - 32px)); padding: 28px 26px 22px; border: 0; border-radius: 28px; text-align: center; color: var(--ink);
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 30px 80px -20px rgba(0, 20, 50, .35), inset 0 0 0 1px rgba(255, 255, 255, .7); }
.ask-dlg::backdrop { background: rgba(10, 20, 30, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ask-dlg[open] { animation: askIn .38s cubic-bezier(.2, .9, .3, 1.1); }
.ask-dlg[open]::backdrop { animation: askFade .3s ease; }
.ask-dlg.closing { animation: askOut .2s ease forwards; }
@keyframes askIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes askOut { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes askFade { from { opacity: 0; } }

.ask-dlg h2 { font-size: 1.3125rem; line-height: 1.25; margin: 0 0 10px; letter-spacing: -.02em; }
.ask-dlg p { margin: 0 0 20px; color: var(--ink-2); font-size: .9688rem; line-height: 1.5; }
.ask-actions { display: grid; gap: 10px; }
.ask-actions .btn { width: 100%; justify-content: center; min-height: 48px; }
@media (max-width: 520px) {
  .ask-dlg { margin: auto auto max(16px, env(safe-area-inset-bottom)); border-radius: 26px; }
  @keyframes askIn { from { opacity: 0; transform: translateY(40px); } }
}
@media (prefers-reduced-motion: reduce) { .ask-dlg[open], .ask-dlg[open]::backdrop, .ask-dlg.closing { animation: none; } }

/* ===== v19 · Accounts, My orders (sprout stem), order page, About (pack label), checkout extras ===== */
.acct-strip { padding: 12px 16px; border-radius: var(--r-md); background: var(--brand-soft); font-size: var(--fs-sm); }
.acct-strip p { margin: 0; color: var(--ink); }
.acct-strip a { color: var(--brand-text); font-weight: 600; }
.check { display: flex; gap: 10px; align-items: center; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.check[hidden], .acct-strip[hidden] { display: none; }
.linkish { background: none; border: 0; padding: 6px 0; color: var(--brand-text); font: 600 var(--fs-sm) var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: #fbd9d5; }
.fine { font-size: var(--fs-sm); max-width: 60ch; }

.acct-main { background: var(--bg-alt); min-height: 70vh; }
.acct { padding-block: clamp(28px, 5vw, 64px) clamp(56px, 8vw, 104px); }
.acct-loading { color: var(--ink-2); }
.acct-signin { max-width: 520px; margin-inline: auto; text-align: center; display: grid; gap: 16px; }
.acct-signin h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); letter-spacing: -.025em; }
.acct-signin .lede { color: var(--ink-2); }
.signin-card { background: #fff; border-radius: 24px; padding: 28px 24px; display: grid; gap: 14px; text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.gsi-btn { display: flex; justify-content: center; min-height: 44px; }
.code-form { gap: 12px; }
.code-form[hidden] { display: none; }
#code { letter-spacing: .3em; font-variant-numeric: tabular-nums; font-size: 1.25rem; }

.acct-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.acct-head h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); letter-spacing: -.025em; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .acct-grid { grid-template-columns: 1fr; } }
.acct-orders { display: grid; gap: 16px; }
.acct-orders.single { max-width: 720px; margin-inline: auto; margin-bottom: 20px; }
.single-h { font-size: clamp(1.75rem, 4vw, 2.25rem); letter-spacing: -.02em; margin-bottom: 4px; }
.acct-side { display: grid; gap: 16px; }
.side-card { background: #fff; border-radius: 22px; padding: 20px; display: grid; gap: 10px; }
.side-card h2 { font-size: 1.0625rem; }
.side-card p { margin: 0; }
.side-card form[hidden] { display: none; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.danger-card .btn-danger { justify-self: start; }
.empty-orders { background: #fff; border-radius: 22px; padding: 32px 24px; display: grid; gap: 12px; justify-items: start; }

.ocard { background: #fff; border-radius: 22px; padding: 22px; display: grid; gap: 14px; }
.ocard-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.ocard-head h2 { font-size: 1.1875rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ocard-head p { margin: 2px 0 0; }
.ocard p { margin: 0; }
.opill { flex: none; padding: 5px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 600; background: var(--brand-soft); color: var(--brand-text); }
.opill.s-delivered { background: var(--ok-bg); color: var(--ok); }
.opill.s-shipped { background: #e7f0fb; color: #0b4a96; }
.opill.s-cancelled { background: var(--fill); color: var(--ink-2); }
.olines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.olines li { display: flex; justify-content: space-between; gap: 12px; }
.olines li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ocard-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ocard-actions .btn { min-height: 44px; }

.refund-note { padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); color: var(--ok); font-size: var(--fs-sm); }

/* The sprout stem: the green stalk grows to the current stage; each reached stage opens a leaf pair. */
.stem { --grown: 0; list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.stem.is-cancelled { grid-template-columns: repeat(6, 1fr); }
.stem::before, .stem::after { content: ""; position: absolute; left: 10%; right: 10%; top: 21px; height: 3px; border-radius: 3px; }
.stem::before { background: var(--fill-2); }
.stem::after { background: linear-gradient(90deg, #3e9b62, #1f7a3f); right: auto; width: 0; transition: width 1.1s cubic-bezier(.3,.7,.2,1); }
.grown .stem::after { width: calc((100% - 20%) * (max(var(--grown), 1) - 1) / 4); }
.stem.is-cancelled::before { left: 8.33%; right: 8.33%; }
.grown .stem.is-cancelled::after { width: calc((100% - 16.66%) * (max(var(--grown), 1) - 1) / 5); background: linear-gradient(90deg, #3e9b62, #9aa0a6); }
.node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; text-align: center; }
.bud { width: 28px; height: 28px; margin-top: 8px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--fill-2); display: grid; place-items: center; }
.node.on .bud { box-shadow: none; background: transparent; margin-top: 0; width: 36px; height: 36px; }
.leaf { width: 34px; height: 28px; overflow: visible; }
.leaf path { fill: none; stroke: #1f7a3f; stroke-width: 1.8; stroke-linecap: round; }
.leaf .l, .leaf .r { fill: #57b26f; stroke: #1f7a3f; transform-origin: 14px 12px; transform: scale(0); transition: transform .6s var(--spring); transition-delay: calc(var(--i) * 180ms + 250ms); }
.leaf .r { transform-origin: 14px 9px; }
.grown .node.on .leaf .l, .grown .node.on .leaf .r { transform: scale(1); }
.node.now .leaf .l, .node.now .leaf .r { fill: #3e9b62; }
.node.cut .bud { background: var(--fill); box-shadow: none; position: relative; }
.node.cut .bud::after { content: ""; width: 12px; height: 2px; background: var(--ink-2); transform: rotate(-45deg); }
.lab { font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.node.on .lab { color: var(--ink); }
.when { font-size: .75rem; color: var(--ink-2); min-height: 1em; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .lab { font-size: .6875rem; } .when { font-size: .6875rem; } .leaf { width: 28px; } }
@media (prefers-reduced-motion: reduce) { .stem::after, .leaf .l, .leaf .r { transition: none; } }

/* About: registrations set like the information panel on the back of a food pack */
/* (only the About page's wrapper: the home page's "About Farmore" section also has the class "about") */
.wrap.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-block: clamp(36px, 6vw, 88px); }
@media (max-width: 860px) { .wrap.about { grid-template-columns: 1fr; } }
.about-intro { display: grid; gap: 18px; max-width: 60ch; }
.about-intro h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; }
.about-intro p { margin: 0; color: var(--ink-2); }
.about-intro .lede { color: var(--ink); font-size: var(--fs-lg); }
.pack-label { border: 3px solid var(--ink); padding: 16px 18px 14px; background: #fff; font-size: var(--fs-sm); }
.pack-label h2 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; padding-bottom: 8px; border-bottom: 10px solid var(--ink); margin-bottom: 4px; }
.pack-label dl { margin: 0; }
.pack-label dl > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ink); }
.pack-label dl > div:nth-child(3), .pack-label dl > div:nth-child(5) { border-bottom-width: 4px; }
.pack-label dt { font-weight: 700; color: var(--ink); }
.pack-label dd { margin: 0; color: var(--ink); }
.pack-foot { margin: 10px 0 0; color: var(--ink-2); font-size: .8125rem; }
@media (max-width: 420px) { .pack-label dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* ===== v19 · payment sheet: Cashfree UPI QR on the page ===== */
.pay-dlg { width: min(400px, calc(100vw - 24px)); padding: 26px 24px 18px; position: relative; }
.pay-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--fill); color: var(--ink-2); cursor: pointer; }
.pay-x:hover { background: var(--fill-2); color: var(--ink); }
.pay-x svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.pay-eyebrow { margin: 0 0 4px !important; font-size: var(--fs-cap) !important; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }
.pay-dlg h2 { font-size: 1.75rem; margin-bottom: 16px; }
.pay-qr { margin: 0 auto 6px; }
.pay-qr[hidden] { display: none; }
.pay-qr-box { position: relative; width: 244px; min-height: 244px; margin: 0 auto; padding: 12px; border-radius: 22px; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 30px -12px rgba(0, 40, 90, .28), inset 0 0 0 1px rgba(0, 0, 0, .06); display: grid; place-items: center; }
.pay-qr-mount { width: 220px; min-height: 220px; display: grid; place-items: center; }
.pay-qr-mount:empty { display: none; }
.pay-qr-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink-2); font-size: var(--fs-cap); padding: 24px 8px; text-align: center; }
.pay-qr-wait[hidden] { display: none; }
.pay-qr-wait .linkish { border: 0; background: none; color: var(--brand-2); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(0, 48, 107, .14); border-top-color: var(--brand-2); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pay-dlg .pay-qr-cap { margin: 12px 0 4px; font-size: var(--fs-cap); }
.pay-dlg .pay-live { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 16px; padding: 6px 12px; border-radius: 999px; background: var(--fill); font-size: var(--fs-cap); font-weight: 500; color: var(--ink); }
.pay-live i { width: 8px; height: 8px; border-radius: 50%; background: #e0a100; box-shadow: 0 0 0 0 rgba(224, 161, 0, .5); animation: livePulse 1.6s ease-out infinite; }
.pay-live.ok { background: var(--ok-bg); color: var(--ok); } .pay-live.ok i { background: var(--ok); animation: none; }
.pay-live.bad { background: var(--danger-bg); color: var(--danger); } .pay-live.bad i { background: var(--danger); animation: none; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 7px rgba(224, 161, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 161, 0, 0); } }
.pay-dlg .ask-actions .btn { white-space: normal; text-align: center; line-height: 1.2; }
.pay-dlg .ask-actions .btn svg { width: 20px; height: 20px; flex: none; }
.pay-dlg .pay-fine { margin: 14px 0 0; font-size: .75rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .spin, .pay-live i { animation: none; } }

/* ===== v19 · cancel order (Amazon-style) + switched-off cancel for shipped orders ===== */
.btn.is-off, .btn:disabled.is-off { opacity: .45; cursor: not-allowed; box-shadow: none; }
.cx-off-note { flex-basis: 100%; font-size: var(--fs-sm); color: var(--ink-2); }
.cx-help { display: flex; gap: 10px; flex-wrap: wrap; flex-basis: 100%; }
.cx-help[hidden] { display: none; }
.cx { max-width: 640px; margin-inline: auto; }
.cx .eyebrow a { color: var(--brand-text); text-decoration: none; }
.cx .eyebrow a::before { content: "‹ "; }
.cx-lede { margin: 0 0 18px; }
.cx-card { background: #fff; border-radius: 24px; padding: clamp(20px, 4vw, 28px); display: grid; gap: 18px; margin-top: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.cx-sum { display: flex; gap: 14px; align-items: center; }
.cx-sum p { margin: 2px 0 0; font-size: var(--fs-sm); }
.cx-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.cx-ic svg { width: 24px; height: 24px; }
.cx-reasons { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-reasons legend { font-weight: 600; margin-bottom: 10px; display: flex; gap: 8px; align-items: baseline; }
.cx-reasons .req { font-size: var(--fs-cap); font-weight: 500; color: var(--ink-2); }
.cx-r { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 12px 16px; border-radius: 16px; cursor: pointer; background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s var(--ease), background .2s var(--ease); }
.cx-r:hover { background: #ececf0; }
.cx-r input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #a1a1a6; background: #fff; display: grid; place-items: center; transition: box-shadow .2s var(--spring); }
.cx-r input:checked { box-shadow: inset 0 0 0 7px var(--brand-2); }
.cx-r input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.cx-r:has(input:checked) { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px rgba(11, 74, 150, .55); }
.cx textarea { width: 100%; min-height: 96px; padding: 12px 16px; border-radius: var(--r-md); border: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); color: var(--ink); font: 400 var(--fs-body)/1.45 var(--font); resize: vertical; }
.cx textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--focus), 0 0 0 4px rgba(10, 102, 232, .18); }
.cx .hint { text-align: right; }
.cx .err:empty { display: none; }
.cx-refund:empty { display: none; }
.cx-refund { padding: 12px 14px; border-radius: 14px; background: var(--ok-bg); color: var(--ok); font-size: var(--fs-sm); }
.cx-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cx-actions .btn { flex: 1 1 200px; }
.cx .btn-danger.cx-go:not(:disabled) { background: var(--danger); color: #fff; }
.cx .btn-danger.cx-go:not(:disabled):hover { background: #a81e15; }
.cx .fine { margin-top: 16px; font-size: var(--fs-cap); text-align: center; }
.cx-done { justify-items: center; text-align: center; }
.cx-done p { margin: 0; max-width: 46ch; }
.cx-tick { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); }
.cx-tick svg { width: 32px; height: 32px; stroke-dasharray: 24; stroke-dashoffset: 24; animation: tickDraw .5s .15s var(--ease) forwards; }
@keyframes tickDraw { to { stroke-dashoffset: 0; } }
.cx-done .cx-actions { width: 100%; }
@media (prefers-reduced-motion: reduce) { .cx-tick svg { animation: none; stroke-dashoffset: 0; } }

/* ===== v20 · buy buttons as clear glass: 5% tint + 2px blur, 10% + 10px blur on hover ===== */
:root { --bglass: rgba(0, 48, 107, .05); --bglass-hover: rgba(0, 48, 107, .10);
  --bglass-rim: inset 0 0 0 1px rgba(0, 48, 107, .22), inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 2px rgba(0, 30, 80, .06); }
.btn-primary, .glass-tint, .cartctl {
  background: var(--bglass); color: var(--brand-text); text-shadow: none; box-shadow: var(--bglass-rim);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background-color .25s var(--ease), -webkit-backdrop-filter .25s var(--ease), backdrop-filter .25s var(--ease), box-shadow .25s var(--ease), width .55s var(--spring), transform .55s var(--spring); }
.btn-primary:hover, .glass-tint:hover, .cartctl:hover {
  background: var(--bglass-hover); box-shadow: var(--bglass-rim), 0 6px 18px rgba(0, 48, 107, .10);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-primary:active, .glass-tint:active { background: rgba(0, 48, 107, .14); }
.btn-primary:disabled, .glass-tint:disabled { opacity: .5; }
.btn-primary .icon, .glass-tint .icon, .cartctl .icon { color: var(--brand-text); }
.cartctl button { color: var(--brand-text); }
.sheen::before { opacity: .35; }
.cartctl .ctl-step button { color: var(--brand-text); }
.cartctl .ctl-step button:hover { background: rgba(0, 48, 107, .08); }
.cartctl .ctl-step button:active { background: rgba(0, 48, 107, .14); }

/* ===== v21 · Amazon-style product photos: thumbnails on the left, big photo, click to enlarge ===== */
.gallery.az { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
.gallery.az:not(:has(.az-thumbs)) { grid-template-columns: minmax(0, 1fr); }
.az-thumbs { display: flex; flex-direction: column; gap: 10px; max-height: min(70vh, 640px); overflow-y: auto; scrollbar-width: none; padding: 2px; }
.az-thumbs::-webkit-scrollbar { display: none; }
.az-thumb { flex: none; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--tint);
  box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s var(--ease), transform .4s var(--spring); }
.az-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.az-thumb:hover { transform: translateY(-1px); }
.az-thumb.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-2); }
.az-thumb:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
.az-main { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--tint); aspect-ratio: 4 / 3; }
.az-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.az-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .25s var(--ease), transform .6s var(--spring); }
.az-zoom img.swap { opacity: 0; transform: scale(1.02); }
.az-zoom:hover img { transform: scale(1.015); }
.az-hint { position: absolute; right: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; pointer-events: none; }
.az-main:hover .az-hint { opacity: 1; transform: none; }
.az-track, .az-dots { display: none; }
@media (max-width: 860px) {
  .gallery.az { grid-template-columns: minmax(0, 1fr); }
  .az-thumbs, .az-zoom, .az-hint { display: none; }
  .az-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .az-track::-webkit-scrollbar { display: none; }
  .az-slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; cursor: zoom-in; }
  .az-dots { display: flex; gap: 6px; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .az-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .25); transition: background .2s, transform .3s var(--spring); }
  .az-dots i.on { background: var(--ink); transform: scale(1.25); }
}
.az-box { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12, 14, 18, .94); color: #fff; overflow: hidden; }
.az-box[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; animation: askFade .25s ease; }
.az-box::backdrop { background: transparent; }
.az-box figure { grid-row: 1; grid-column: 2; margin: 0; height: 100%; display: grid; place-items: center; overflow: auto; padding: 56px 8px 8px; }
.az-box figure img { max-width: 100%; max-height: calc(100dvh - 160px); object-fit: contain; border-radius: 14px; cursor: zoom-in; transition: transform .35s var(--spring); }
.az-box figure img.zoomed { transform: scale(1.8); cursor: zoom-out; }
.az-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; font-size: 28px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .14); cursor: pointer; }
.az-nav { width: 48px; height: 48px; justify-self: center; border-radius: 50%; border: 0; font-size: 32px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .12); cursor: pointer; }
.az-nav.prev { grid-column: 1; grid-row: 1; } .az-nav.next { grid-column: 3; grid-row: 1; }
.az-x:hover, .az-nav:hover { background: rgba(255, 255, 255, .24); }
.az-strip { grid-row: 2; grid-column: 1 / -1; display: flex; gap: 10px; justify-content: center; padding: 14px 16px max(16px, env(safe-area-inset-bottom)); overflow-x: auto; }
.az-strip button { flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; opacity: .55; cursor: pointer; background: #222; transition: opacity .2s; }
.az-strip button.on, .az-strip button:hover { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.az-strip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) { .az-box[open] { grid-template-columns: 0 minmax(0, 1fr) 0; } .az-nav { display: none; } }
.price-table td.muted { color: var(--ink-2); opacity: .6; }
@media (prefers-reduced-motion: reduce) { .az-zoom img, .az-box figure img { transition: none; } }

/* ===== v21 · Size pop-up button (Apple-style): the native select stays underneath as the value ===== */
.pick-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.pick-btn { flex: 1; min-width: 0; max-width: 140px; height: 42px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px 0 16px; border: 0; border-radius: 999px; cursor: pointer; color: var(--ink); font: 500 var(--fs-sm)/1 var(--font); letter-spacing: -0.01em;
  background: rgba(120, 120, 128, .1); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .06);
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .35s var(--spring); }
.pick-btn .pick-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-chev { width: 8px; height: 13px; flex: none; fill: none; stroke: #6e6e73; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--spring); }
@media (hover: hover) { .pick-btn:hover { background: rgba(120, 120, 128, .17); } }
.pick-btn:active { transform: scale(.96); }
.pick-btn[aria-expanded="true"] { background: #fff; box-shadow: 0 0 0 1px rgba(10, 102, 232, .5), 0 4px 14px rgba(0, 48, 107, .12); }
.pick-btn[aria-expanded="true"] .pick-chev { transform: scaleY(.82); stroke: var(--focus); }
.pick-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10, 102, 232, .35); }
.pick-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
@media (pointer: coarse) { .pick-btn { height: 44px; } }

.pick-menu { position: fixed; z-index: 1000; padding: 6px; border-radius: 16px; display: grid; gap: 2px;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 18px 48px rgba(0, 0, 0, .16), 0 3px 10px rgba(0, 0, 0, .06);
  animation: pickIn .22s var(--spring) both; }
.pick-menu.from-top { transform-origin: 50% 0; } .pick-menu.from-bottom { transform-origin: 50% 100%; }
.pick-menu.out { animation: pickOut .13s var(--ease) both; pointer-events: none; }
@keyframes pickIn { from { opacity: 0; transform: scale(.94) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pickOut { to { opacity: 0; transform: scale(.97); } }
.pick-opt { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px 0 10px;
  border-radius: 10px; cursor: pointer; font: 500 .9375rem/1.2 var(--font); color: var(--ink); user-select: none; -webkit-user-select: none; }
.pick-tick { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pick-opt.on .pick-tick { opacity: 1; }
.pick-price { font-size: .8125rem; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pick-price s { opacity: .7; margin-right: 2px; }
.pick-opt.active { background: #0a66e8; color: #fff; }
.pick-opt.active .pick-price { color: rgba(255, 255, 255, .88); }
.pick-opt[aria-disabled="true"] { opacity: .45; cursor: default; }
.pick-opt[aria-disabled="true"].active { background: rgba(120, 120, 128, .14); color: var(--ink); }
@media (pointer: coarse) { .pick-opt { min-height: 44px; } }

/* The card stays lifted while its menu is open, and its hover area doesn't shrink when it lifts,
   so a pointer near the bottom edge no longer makes it bounce. */
@media (hover: hover) {
  .pcard.menu-open { transform: translateY(-5px) scale(1.01); box-shadow: 0 24px 50px rgba(0,0,0,.1); }
  .pcard:hover::before, .pcard.menu-open::before { content: ""; position: absolute; inset: -8px -8px -10px; z-index: -1; border-radius: inherit; }
}
@media (prefers-reduced-motion: reduce) { .pick-menu, .pick-menu.out { animation: none; } .pick-btn, .pick-chev { transition: none; } }

/* ===== v21 · Pay: the one filled button on the page. Lifts like "Contact us", the lock opens on hover,
   a soft ring breathes while it waits, and a light sweep runs while the payment window opens. ===== */
#pay-btn, #paybar .glass-tint {
  color: #fff; font-weight: 600; text-shadow: 0 1px 1px rgba(0, 30, 80, .25);
  background: linear-gradient(180deg, #2b8af5 0%, #0a63d6 52%, #0850b3 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 10px 26px rgba(10, 95, 209, .30), 0 2px 4px rgba(0, 30, 80, .16);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .5s var(--spring), box-shadow .35s var(--ease), filter .25s var(--ease); }
#pay-btn .icon, #paybar .glass-tint .icon { color: #fff; }
#pay-btn .icon path { transition: transform .4s var(--spring); transform-origin: 50% 100%; }
#pay-btn:not(:disabled) { animation: payBreathe 3.2s ease-in-out 1.2s infinite; }
@media (hover: hover) {
  #pay-btn:not(:disabled):hover, #paybar .glass-tint:not(:disabled):hover {
    transform: translateY(-4px) scale(1.02); filter: brightness(1.06); animation: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 22px 40px rgba(10, 95, 209, .38), 0 4px 10px rgba(0, 30, 80, .18); }
  #pay-btn:not(:disabled):hover .icon path { transform: translateY(-2.5px) rotate(-8deg); }
}
#pay-btn:not(:disabled):active, #paybar .glass-tint:not(:disabled):active { transform: translateY(-1px) scale(.98); transition-duration: .12s; }
#pay-btn:focus-visible, #paybar .glass-tint:focus-visible { outline: 3px solid rgba(10, 102, 232, .45); outline-offset: 3px; }
@keyframes payBreathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 10px 26px rgba(10, 95, 209, .30), 0 0 0 0 rgba(10, 99, 214, .28); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 14px 30px rgba(10, 95, 209, .34), 0 0 0 7px rgba(10, 99, 214, 0); }
}
#pay-btn.is-busy { opacity: 1; cursor: progress; animation: none; }
#pay-btn.is-busy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%); background-size: 200% 100%; animation: payBusy 1.1s linear infinite; }
@keyframes payBusy { from { background-position: 150% 0; } to { background-position: -50% 0; } }
#pay-btn:disabled:not(.is-busy) { opacity: .5; filter: saturate(.6); }
@media (prefers-reduced-motion: reduce) { #pay-btn, #pay-btn.is-busy::after { animation: none !important; } #pay-btn, #paybar .glass-tint, #pay-btn .icon path { transition: none; } }

/* ===== v13 · 14 Oct 2026 ===== */
/* Top menu: 3px frosted glass. On Chrome/Edge the bar also works as a light magnifying glass over the page (app.js,
   wireBarMagnifier); other browsers keep the plain frost. */
.topbar .glass { -webkit-backdrop-filter: blur(3px) saturate(1.3); backdrop-filter: blur(3px) saturate(1.3); }
.navpill.magnify { background: rgba(255, 255, 255, 0.06); }

/* The active menu item: a white pill (2px frost). It glides to the next item quickly, swelling into a magnifier only
   while it moves, then lands as a plain pill again. The old liquid drop is retired for menus. */
.navpill .lens, .tabbar .lens {
  background: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(2px) saturate(1.2); backdrop-filter: blur(2px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 2px 10px rgba(0, 20, 40, 0.07);
  transition: opacity .2s var(--ease), box-shadow .25s var(--ease);
}
.navpill .lens.moving, .tabbar .lens.moving {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), inset 0 2px 6px rgba(255, 255, 255, 0.6), inset 0 -2px 6px rgba(0, 30, 60, 0.06), 0 8px 22px rgba(0, 20, 40, 0.14);
}
.navpill .lens-goo, .tabbar .lens-goo { display: none; }
.navpill .lens.landing, .tabbar .lens.landing { animation: navLand .38s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes navLand { 0% { transform: scale(.92); } 60% { transform: scale(1.03); } 100% { transform: none; } }
.navpill a, .tabbar .tab { transition: color .2s var(--ease), transform .35s var(--spring); }
@media (prefers-reduced-motion: reduce) { .navpill .lens.landing, .tabbar .lens.landing { animation: none; } }

/* Contact page: less washed out. Deeper greens, stronger ribbons, a less milky phone. */
.ct-hero { background: linear-gradient(180deg, #cde8d8 0%, #dff0e5 52%, var(--bg) 100%); }
.ct-blob.b1 { background: #8fd3ab; opacity: .55; }
.ct-blob.b2 { background: #b9cff3; opacity: .5; }
.ct-hero .ribbons { filter: saturate(1.25) contrast(1.08); opacity: .95; }
.ct-copy .lede { color: #2f3a33; }
.ct-screen { background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 30px 60px rgba(7, 70, 50, 0.16), 0 2px 8px rgba(0, 0, 0, 0.05); }
.ct-head small, .ct-phone figcaption { color: #4a524d; }

/* Contact page: bulk order call-back form */
.bulk-sec { padding-bottom: 0; }
.bulk-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: start; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl, 28px);
  background: linear-gradient(160deg, #eef7f1, #f6f8fb); box-shadow: inset 0 0 0 1px rgba(0, 60, 30, 0.06); }
.bulk-copy { display: grid; gap: 12px; align-content: start; }
.bulk-copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -.025em; margin: 0; }
.bulk-form { display: grid; gap: 14px; min-width: 0; }
.bulk-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bulk-form textarea { width: 100%; min-height: 92px; padding: 12px 16px; border-radius: var(--r-md); border: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface, #fff); color: var(--ink); font: 400 var(--fs-body) var(--font); resize: vertical; }
.bulk-form textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--focus), 0 0 0 4px rgba(10,102,232,.18); }
.bulk-form .opt { font-weight: 400; color: var(--ink-2); }
.bulk-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bulk-send { justify-self: start; background: var(--brand, #00306b); color: #fff; }
.bulk-send:disabled { opacity: .6; }
.bulk-status { margin: 0; min-height: 1.2em; font-size: var(--fs-sm); color: var(--ink-2); }
.bulk-done { display: grid; gap: 10px; justify-items: start; align-content: center; min-height: 260px; }
.bulk-done.in { animation: bulkIn .6s var(--spring); }
@keyframes bulkIn { from { opacity: 0; transform: translateY(12px); } }
.bulk-done h3 { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; outline: none; }
.bulk-tick { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #1f9d55; color: #fff; box-shadow: 0 10px 24px rgba(31, 157, 85, .3); }
.bulk-tick svg { width: 26px; height: 26px; }
@media (max-width: 860px) { .bulk-card { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bulk-form .form-row { grid-template-columns: 1fr; } }

/* ===== v14 · 14 Oct 2026 (later): glass that bends what is behind it =====
   Chrome/Edge only (app.js adds .mag-glass and the filters); other browsers keep the frost below. */
/* The menu bar: lighter frost, a stronger magnifier through its middle than at its top and bottom edges */
.topbar .glass { -webkit-backdrop-filter: blur(1.5px) saturate(1.25); backdrop-filter: blur(1.5px) saturate(1.25); }

/* Clear-glass buttons (Shop now, See recipes, Contact us, buy buttons): a light magnifier at rest;
   pointing at one frosts it, lifts it and magnifies more */
.btn.mag-glass { -webkit-backdrop-filter: var(--mag-rest,) blur(1px) saturate(1.2); backdrop-filter: var(--mag-rest,) blur(1px) saturate(1.2); }
@media (hover: hover) {
  .btn.mag-glass:hover { -webkit-backdrop-filter: var(--mag-hover,) blur(8px) saturate(1.35); backdrop-filter: var(--mag-hover,) blur(8px) saturate(1.35); }
  .btn-primary.mag-glass:hover, .glass-tint.mag-glass:hover { transform: translateY(-3px) scale(1.03); }
}
.btn.mag-glass[aria-expanded="true"], .btn.mag-glass:active { -webkit-backdrop-filter: var(--mag-hover,) blur(8px) saturate(1.35); backdrop-filter: var(--mag-hover,) blur(8px) saturate(1.35); }

/* Contact page, PC: less exposure. Deeper greens, no bright wash at the bottom of the hero */
@media (min-width: 761px) {
  .ct-hero { background: linear-gradient(180deg, #b7dcc5 0%, #cbe5d4 46%, #d9ecdf 86%, var(--bg) 100%); padding-bottom: clamp(40px, 5vw, 72px); }
  .ct-hero::after { height: 64px; }
  .ct-blob.b1 { background: #7cc79c; opacity: .5; }
  .ct-blob.b2 { background: #8fb0e3; opacity: .28; }
  .ct-hero .ribbons { filter: saturate(1.35) contrast(1.12) brightness(.94); }
  .ct-copy h1 { color: #14211a; }
}
/* the chat card: clearer glass that slightly magnifies the ribbons behind it, with real depth */
.ct-screen { background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), inset 0 1px 0 #fff, 0 2px 6px rgba(0, 40, 25, 0.06), 0 22px 44px rgba(7, 70, 50, 0.18), 0 50px 90px -30px rgba(7, 70, 50, 0.28); }
.ct-screen.mag-glass { -webkit-backdrop-filter: var(--mag-rest,) blur(8px) saturate(1.5); backdrop-filter: var(--mag-rest,) blur(8px) saturate(1.5); }

/* ===== v15 · 14 Oct: menu glass. Bar: 2px frost, 8% white, magnifies a little more.
   Active pill: 1px frost, 2% white, and a stronger magnifier than the bar (app.js). Same on the phone tab bar. ===== */
.navpill.glass, .tabbar.glass { background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(2px) saturate(1.25); backdrop-filter: blur(2px) saturate(1.25); }
.navpill .lens, .tabbar .lens { background: rgba(255, 255, 255, 0.02); -webkit-backdrop-filter: blur(1px) saturate(1.3); backdrop-filter: blur(1px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -1px 3px rgba(0, 30, 60, 0.06), 0 3px 12px rgba(0, 20, 40, 0.08); }
.navpill .lens.moving, .tabbar .lens.moving { background: rgba(255, 255, 255, 0.02); }

/* ===== v22 · Promotions in the cart: free gifts, coupon code, cookie notice ===== */
.gift-lines { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.gift-lines[hidden], .promo-msg[hidden] { display: none; }
.gift-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(31, 157, 85, .09), rgba(227, 199, 124, .14)); box-shadow: inset 0 0 0 1px rgba(31, 157, 85, .16); }
.gift-line img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: #fff; }
.gift-line h3 { margin: 0; font-size: var(--fs-body); }
.gift-line p { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-cap); }
.gift-line .free { padding: 5px 12px; border-radius: 999px; background: #1f7a3f; color: #fff; font-weight: 700; font-size: .8125rem; letter-spacing: .06em; }
.promo-msg { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(227, 199, 124, .2); color: #5e4413; font-size: .875rem; }
.coupon-box { margin: 14px 0 4px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.coupon-box label { font-size: var(--fs-cap); color: var(--ink-2); font-weight: 500; }
.coupon-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* "View available coupons": a full-width row above the code box (always shown; says when there are none) */
.coupon-see { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 60px; padding: 10px 12px 10px 10px;
  border: 1.5px dashed rgba(0, 48, 107, .32); border-radius: 16px; cursor: pointer; text-align: left; color: var(--brand-text); font: inherit;
  background: linear-gradient(135deg, rgba(0, 48, 107, .05), rgba(31, 157, 85, .07));
  transition: background-color .2s, border-color .2s, box-shadow .25s, transform .2s var(--spring, ease); }
.coupon-see:hover:not(:disabled) { border-color: rgba(0, 48, 107, .55); box-shadow: 0 8px 20px -14px rgba(0, 30, 70, .55); transform: translateY(-1px); }
.coupon-see:active:not(:disabled) { transform: scale(.985); }
.coupon-see:focus-visible { outline: 3px solid rgba(0, 113, 227, .45); outline-offset: 2px; }
.coupon-see:disabled { cursor: default; }
.coupon-see .cv-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.coupon-see .cv-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.coupon-see .cv-t { min-width: 0; display: grid; gap: 1px; }
.coupon-see .cv-t b { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.coupon-see .cv-t small { font-size: .8125rem; color: var(--ink-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon-see .cv-n { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: #1f7a3f; color: #fff; font-size: .8125rem; font-weight: 700; }
.coupon-see .cv-n[hidden] { display: none; }
.coupon-see .cv-chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.coupon-see:disabled .cv-chev { visibility: hidden; }
.coupon-see.is-empty { border-style: solid; border-color: var(--line); background: rgba(120, 120, 128, .06); color: var(--ink-2); }
.coupon-see.is-empty .cv-ic { background: rgba(120, 120, 128, .18); color: var(--ink-2); }

/* the "Coupons for you" sheet: a centred card on computers, a sheet from the bottom on phones */
.coupon-sheet { width: min(480px, calc(100% - 32px)); max-height: min(640px, calc(100dvh - 48px)); padding: 0; border: 0; border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; color: var(--ink); background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12), 0 24px 60px -12px rgba(0, 30, 70, .35), 0 8px 20px -8px rgba(0, 0, 0, .18); }
.coupon-sheet:not([open]) { display: none; }
.coupon-sheet::backdrop { background: rgba(0, 0, 0, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.coupon-sheet[open] { animation: csIn .32s cubic-bezier(.2, .9, .25, 1.05); }
@keyframes csIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.cs-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 10px 22px; }
.cs-head h2 { margin: 0; font-size: 1.1875rem; letter-spacing: -.01em; }
.cs-close { width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(120, 120, 128, .12); color: var(--ink); }
.cs-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.cs-close:focus-visible { outline: 3px solid rgba(0, 113, 227, .45); outline-offset: 2px; }
.cs-list { list-style: none; margin: 0; padding: 4px 18px 6px; overflow: auto; display: grid; gap: 10px; }
.cs-item { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px 14px 0; border-radius: 16px;
  background: #fff; box-shadow: 0 0 0 1px var(--line); }
/* ticket notches on the dashed tear line */
.cs-item::before, .cs-item::after { content: ""; position: absolute; left: 61px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.cs-item::before { top: -7px; clip-path: inset(50% 0 0 0); }
.cs-item::after { bottom: -7px; clip-path: inset(0 0 50% 0); }
.cs-off { align-self: stretch; display: grid; place-content: center; text-align: center; border-right: 1.5px dashed var(--line); color: var(--brand); line-height: 1; }
.cs-off b { font-size: 1.375rem; letter-spacing: -.02em; }
.cs-off small { font-size: .625rem; font-weight: 700; letter-spacing: .14em; margin-top: 4px; }
.cs-body { min-width: 0; display: grid; gap: 4px; }
.cs-code { justify-self: start; margin-bottom: 2px; padding: 2px 8px; border-radius: 7px; background: rgba(0, 48, 107, .07); color: var(--brand-text); font-weight: 700; letter-spacing: .08em; font-size: .9375rem; }
.cs-body p { margin: 0; font-size: .8125rem; line-height: 1.35; color: var(--ink-2); }
.cs-body .cs-ends { color: #8a5a00; font-weight: 500; }
.cs-body .cs-no-offer { display: flex; align-items: center; gap: 6px; color: #c62828; font-weight: 500; }
.cs-body .cs-no-offer::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cs-only { font-size: .8125rem; color: var(--ink-2); }
.cs-only summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; color: var(--brand-text); font-weight: 500; }
.cs-only summary::-webkit-details-marker { display: none; }
.cs-only summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.cs-only[open] summary::after { transform: translateY(1px) rotate(225deg); }
.cs-only summary:focus-visible { outline: 3px solid rgba(0, 113, 227, .45); outline-offset: 2px; border-radius: 4px; }
.cs-only ul { margin: 6px 0 2px; padding: 0 0 0 16px; display: grid; gap: 2px; line-height: 1.35; }
.cs-apply { min-height: 40px; padding: 0 18px; }
.cs-note { margin: 0; padding: 8px 22px 18px; font-size: .75rem; color: var(--ink-2); }
@media (max-width: 560px) {
  .coupon-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 86dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .coupon-sheet[open] { animation-name: csUp; }
  @keyframes csUp { from { transform: translateY(100%); } }
  .cs-item { grid-template-columns: 64px minmax(0, 1fr); padding-bottom: 12px; }
  .cs-item::before, .cs-item::after { left: 57px; }
  .cs-apply { grid-column: 2; justify-self: stretch; margin-right: 0; }
  .cs-off { grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { .coupon-sheet[open] { animation: none; } .coupon-see { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .coupon-sheet::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .5); } }
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font: 600 1rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.coupon-row input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }
.coupon-row input:focus-visible { outline: 3px solid rgba(0, 113, 227, .35); outline-offset: 1px; border-color: #0071e3; }
.coupon-row .btn { min-height: 44px; padding: 0 18px; }
.coupon-on { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coupon-on[hidden], .coupon-row[hidden] { display: none; }
.coupon-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(31, 157, 85, .12); color: #156b37; font-size: .875rem; }
.coupon-tag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.coupon-msg { margin: 0; min-height: 1em; font-size: .8125rem; color: var(--ink-2); }
.coupon-msg.bad { color: #b3261e; }
.coupon-msg.good { color: #1f7a3f; }
.free-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(31, 157, 85, .12); color: #156b37; font-size: .75rem; }
/* Cookie notice: a floating card in the functional layer (glass + a clear layered shadow so it stands apart from the page).
   Desktop: bottom-left, out of the way of the content. Phone: full width, just above the tab bar, big tap targets. */
.cookie-note { position: fixed; z-index: 60; left: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: min(400px, calc(100% - 32px));
  display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; padding: 18px 18px 16px; border-radius: 24px; color: var(--ink);
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 .5px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06), 0 14px 32px -6px rgba(0, 30, 70, .22), 0 40px 80px -18px rgba(0, 30, 70, .38);
  animation: cnIn .5s cubic-bezier(.2, .9, .25, 1.1) both; }
.cookie-note.leaving { animation: cnOut .22s ease-in both; }
@keyframes cnIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cnOut { to { opacity: 0; transform: translateY(12px) scale(.98); } }
.cookie-note .cn-ic { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--brand);
  background: linear-gradient(160deg, #e7eefb, #d4e1f6); box-shadow: inset 0 0 0 .5px rgba(0, 48, 107, .12); }
.cookie-note .cn-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cookie-note h2 { margin: 1px 0 0; font-size: 1.0625rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.cookie-note p { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.cookie-note p a { color: var(--brand-text); font-weight: 500; text-underline-offset: 2px; }
.cookie-note .cn-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.cookie-note .cn-btn { min-height: 44px; min-width: 96px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font: 600 .9375rem/1 var(--font); letter-spacing: -.01em;
  transition: transform .2s var(--spring, ease), background-color .2s, box-shadow .2s; }
.cookie-note .cn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 14px -6px rgba(0, 48, 107, .6); }
.cookie-note .cn-primary:hover { background: #0a3f85; }
.cookie-note .cn-secondary { background: rgba(120, 120, 128, .14); color: var(--ink); }
.cookie-note .cn-secondary:hover { background: rgba(120, 120, 128, .22); }
.cookie-note .cn-btn:active { transform: scale(.96); }
.cookie-note .cn-btn:focus-visible { outline: 3px solid rgba(0, 113, 227, .5); outline-offset: 2px; }
.has-accessory .cookie-note { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px) {
  /* above the phone tab bar (64 px + 10 px), edge to edge with a 12 px margin; buttons share the width */
  .cookie-note { left: 12px; right: 12px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); padding: 16px; border-radius: 22px; }
  .cookie-note p { font-size: 1rem; }
  .cookie-note .cn-actions { margin-top: 14px; }
  .cookie-note .cn-btn { flex: 1; min-height: 48px; font-size: 1rem; }
  .has-accessory .cookie-note { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .cookie-note, .cookie-note.leaving { animation: none; } .cookie-note .cn-btn { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .cookie-note { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .cookie-note { box-shadow: 0 0 0 1.5px var(--ink), 0 20px 40px -12px rgba(0, 0, 0, .4); } .cookie-note p { color: var(--ink); } }

/* ===== v30 · 4 Nov 2026: Liquid Glass (refraction, no blur) =====
   Menu bars, the moving menu pill, glass buttons and pop-ups. On Chrome/Edge/Android, app.js (liquidGlass) bends what
   is behind them with a displacement map: the edge squeezes and mirrors, the middle magnifies, a rainbow fringe on
   the rim. Every browser gets the top highlight and the thin white rim line below; Safari/Firefox keep their frost. */
/* rim line (1 px white, 60%) and a bright band ~6 px inside the top edge that fades to the sides */
.lqg:not(.trail)::after, .lqg.trail:not(.glass):not(.lens)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  background: radial-gradient(ellipse 74% 7px at 50% 6px, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 100%) no-repeat; }
/* the menu bars and the moving pill already use both layers (refracting rim, light trail): same look with shadows */
.navpill.glass.lqg, .tabbar.glass.lqg { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 7px 6px -5px rgba(255, 255, 255, .75), 0 0 0 .5px rgba(0, 0, 0, .09), 0 8px 26px rgba(0, 0, 0, .08); }
.navpill .lens.lqg, .tabbar .lens.lqg { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 6px 5px -4px rgba(255, 255, 255, .75), 0 3px 12px rgba(0, 20, 40, .1); }
/* the layer that does the refraction: exactly the element's box, no shadow, behind its content */
.lqg-refract { isolation: isolate; }
.lqg-layer { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
/* rainbow fringe on the rim (the chromatic split of real glass): warm on the left and bottom, cool on the top and right */
.lqg-layer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 200deg, rgba(255, 120, 160, .55), rgba(255, 190, 90, .45) 14%, rgba(120, 230, 160, .45) 32%, rgba(90, 180, 255, .55) 50%, rgba(170, 120, 255, .45) 68%, rgba(255, 120, 160, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .7; }
/* the menu bars keep their page-to-page morph (view-transition-name), which walls them off from the page: they bend the
   page themselves, so they carry no outer shadow (it would move the bend). Depth comes from the rim and highlight. */
.navpill.glass.lqg.lqg-self, .tabbar.glass.lqg.lqg-self, .topbar .glass.lqg.lqg-self { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 7px 6px -5px rgba(255, 255, 255, .75), inset 0 -8px 14px -10px rgba(0, 30, 60, .12); }
/* the bars and the active pill: clear glass with a 6% white tint (the refraction replaces the frost) */
.navpill.glass.lqg-refract, .tabbar.glass.lqg-refract, .topbar .glass.lqg-refract { background: rgba(255, 255, 255, .06); }
.navpill .lens.lqg-refract, .tabbar .lens.lqg-refract { background: rgba(255, 255, 255, .06); }
.navpill .lens.lqg-refract.moving, .tabbar .lens.lqg-refract.moving { -webkit-backdrop-filter: blur(1px) saturate(1.2); backdrop-filter: blur(1px) saturate(1.2); }
@media (prefers-reduced-transparency: reduce) { .lqg:not(.trail)::after, .lqg.trail:not(.glass):not(.lens)::before { background: none; } }
@media (prefers-contrast: more) { .lqg:not(.trail)::after, .lqg.trail:not(.glass):not(.lens)::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); background: none; } }

/* ---------- v31 · 4 Nov 2026: "drops" (fractal glass hero, fan of products, glass wordmark, chromatic & bubble buttons) ---------- */
/* Fractal Glass: a canvas over the hero photo (the picture is already positioned); the photo stays underneath without WebGL */
.fg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); transform-origin: 50% 50%; }
.fg-canvas.on { opacity: 1; }

/* Fan Gallery: the five product bowls as a fanned hand of cards */
.bowls.fan { display: block; position: relative; max-width: 980px; padding: 0; }
.bowls.fan > li { position: absolute; left: 50%; top: calc(var(--lift, 42px) + 4px); width: var(--cw); height: var(--ch); transform-origin: 50% 110%; will-change: transform; }
.bowls.fan > li > a { width: 100%; height: 100%; box-sizing: border-box; align-content: center; gap: 10px; padding: 14px 10px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)), var(--surface, #fff);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(0,0,0,.05), 0 18px 40px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.06); }
.bowls.fan .bowl { width: 64%; }
.bowls.fan > li > a:hover .bowl, .bowls.fan > li > a:active .bowl { transform: none; }
.bowls.fan > li > a:focus-visible { outline: 2px solid var(--accent, #0b5bd3); outline-offset: 3px; }
@media (max-width: 560px) { .bowls.fan small { display: block; } .bowls.fan b { font-size: 12px; } .bowls.fan > li > a { border-radius: 16px; padding: 10px 6px; } }

/* Refracted Text: the "Farmore" glass wordmark (plain text without WebGL) */
.rt-word { position: relative; margin: 0 auto clamp(18px, 3vw, 34px); height: clamp(96px, 17vw, 210px); display: grid; place-items: center;
  font: 700 clamp(64px, 13vw, 168px)/1 var(--font); letter-spacing: -0.04em; color: var(--brand, #1f7a46); user-select: none; }
.rt-word.rt-live > span { opacity: 0; }
.rt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Chromatic (Shop now) and Bubble (See recipes) buttons: a canvas behind the label */
.drop-chromatic, .drop-bubble { position: relative; isolation: isolate; }
.drop-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; z-index: -1; pointer-events: none; }
.drop-chromatic { background: transparent; box-shadow: 0 10px 28px rgba(11,91,211,.28), 0 2px 6px rgba(0,0,0,.12); transition: transform .5s var(--spring), box-shadow .4s var(--ease); }
@media (hover: hover) { .drop-chromatic:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(11,91,211,.34), 0 3px 8px rgba(0,0,0,.12); } }
.drop-canvas { animation: drop-in .7s var(--ease) both; }
@keyframes drop-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { .drop-canvas { animation: none; } .bowls.fan > li { will-change: auto; } }
.drop-chromatic, .drop-chromatic .btn-sub, .drop-chromatic .btn-sub * { color: #fff !important; text-shadow: 0 1px 2px rgba(0,20,50,.45); }

/* ===== v32 · 5 Nov 2026: proportions at 100% zoom (apple-design review) and the glass on phones ===== */
/* a wider reading column on big screens (1120 → up to 1320 px), so wide windows don't leave empty sides */
:root { --wrap: clamp(1120px, 74vw, 1320px); }
/* calmer vertical rhythm: sections were 120 px top and bottom */
.section { padding-block: clamp(56px, 6.5vw, 96px); }
@media (min-width: 761px) and (max-height: 820px) { .section { padding-block: clamp(48px, 5vw, 76px); } }
.section-head { margin-bottom: clamp(24px, 3vw, 40px); }
/* Hero: one screen tall, the words fit under the menu bar on short laptop screens (1366×650 and up) */
@media (min-width: 761px) {
  .hero { min-height: clamp(560px, 92svh, 900px); }
  .hero-copy { padding-block: calc(84px + clamp(8px, 4vh, 56px)) clamp(56px, 8vh, 96px); gap: clamp(12px, 2.2vh, 22px); max-width: 640px; }
  .hero-copy h1 { font-size: min(var(--fs-display), 10.5vh); }
  .hero-copy .lede { max-width: 38ch; }
}
/* the glass wordmark sits closer to what follows */
.rt-word { height: clamp(88px, 14vw, 180px); margin-bottom: clamp(12px, 2vw, 24px); }

/* Safari and Firefox (iPhone, iPad, Mac) can't bend the page: the same glass drawn with CSS (frost, extra colour,
   rainbow rim, top highlight), so phones see the liquid look too */
.lqg-css { isolation: isolate; }
.navpill.glass.lqg-css, .tabbar.glass.lqg-css, .topbar .glass.lqg-css, .navpill .lens.lqg-css, .tabbar .lens.lqg-css, .glass-btn.lqg-css {
  background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(7px) saturate(1.9) brightness(1.06); backdrop-filter: blur(7px) saturate(1.9) brightness(1.06); }
.lqg-css > .lqg-layer::after { opacity: .9; }
/* phones: the rim and highlight are a little stronger (small glass reads better with more light) */
@media (max-width: 760px) {
  .lqg:not(.trail)::after, .lqg.trail:not(.glass):not(.lens)::before { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75);
    background: radial-gradient(ellipse 80% 8px at 50% 6px, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 100%) no-repeat; }
  .bowls.fan > li > a { gap: 6px; padding: 10px 6px; }
  .bowls.fan b { font-size: 12px; line-height: 1.2; }
  .bowls.fan small { font-size: 11px; }
  .fg-canvas { pointer-events: none; }
}
@media (prefers-reduced-transparency: reduce) { .lqg-css { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }

/* ===== v33 · 5 Nov 2026: bigger content on big desktop screens, WhatsApp glass ===== */
/* Text and rem-based sizes grow with the window from 1280 px (16 px) to 1920 px (19 px), and the content column
   widens to 80% of the window (up to 1520 px), so a 100% zoom window is filled instead of leaving empty sides. */
@media (min-width: 1280px) {
  html { font-size: clamp(16px, calc(16px + (100vw - 1280px) * 0.0047), 19px); }
  :root { --wrap: clamp(1120px, 80vw, 1520px); }
  .hero-copy { max-width: 42rem; }
  .btn { min-height: 3rem; padding-inline: 1.5rem; }
  .btn-lg { min-height: 3.5rem; padding-inline: 1.875rem; }
}
/* Chat on WhatsApp: the same glass as "Contact us", with a low, green-tinted window and a 2 px frost */
.wa-glass { position: relative; gap: 8px; color: #0b3d24; font-weight: 600; background: rgba(37, 211, 102, .16);
  -webkit-backdrop-filter: blur(2px) saturate(1.3); backdrop-filter: blur(2px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(160, 235, 190, .6), 0 10px 26px rgba(15, 110, 60, .16);
  transition: transform .55s var(--spring), background .45s var(--ease), box-shadow .45s var(--ease); }
.wa-glass .icon { width: 20px; height: 20px; color: #128c4a; }
@media (hover: hover) { .wa-glass:hover { transform: translateY(-4px) scale(1.03); background: rgba(37, 211, 102, .24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(160, 235, 190, .75), 0 18px 34px rgba(15, 110, 60, .22); } }
.wa-glass:active { transform: scale(.97); }
.wa-glass:focus-visible { outline: 3px solid #1f9d55; outline-offset: 3px; }
.wa-glass.lqg-css { -webkit-backdrop-filter: blur(2px) saturate(1.5); backdrop-filter: blur(2px) saturate(1.5); }
@media (prefers-contrast: more) { .wa-glass { background: #e3f7ea; color: #06301b; } }
.rt-word { color: var(--brand); }

/* ===== v34 · 5 Nov 2026: iPhone / Safari liquid glass, richer =====
   Safari (every iPhone browser, Chrome on iPhone included) can't bend the page behind an element, and no setting
   changes that. So the glass is drawn: clear, colour-boosted frost, a bright refracted edge band, a lens shadow at the
   bottom, the rainbow rim and a slow sheen that drifts across. */
.lqg-css > .lqg-layer::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  /* the edge of a lens bends extra light in: bright at the rim, clear in the middle */
  background: radial-gradient(120% 140% at 50% 50%, rgba(255,255,255,0) 58%, rgba(255,255,255,.34) 86%, rgba(255,255,255,.6) 100%),
    linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 72%, rgba(255,255,255,.18) 100%); }
.navpill.glass.lqg-css, .tabbar.glass.lqg-css, .topbar .glass.lqg-css, .glass-btn.lqg-css {
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(3px) saturate(2.2) brightness(1.1) contrast(1.06); backdrop-filter: blur(3px) saturate(2.2) brightness(1.1) contrast(1.06);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.55),
    inset 4px 0 8px -4px rgba(255,255,255,.75), inset -4px 0 8px -4px rgba(255,255,255,.75),
    inset 0 -8px 14px -8px rgba(0, 40, 90, .16), 0 0 0 .5px rgba(0, 0, 0, .08), 0 10px 28px rgba(0, 20, 50, .12); }
.navpill .lens.lqg-css, .tabbar .lens.lqg-css {
  background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(2px) saturate(2.4) brightness(1.12); backdrop-filter: blur(2px) saturate(2.4) brightness(1.12);
  box-shadow: inset 0 1.5px 1px #fff, inset 0 -1px 1px rgba(255,255,255,.6), inset 0 -6px 10px -6px rgba(0, 40, 90, .2), 0 4px 14px rgba(0, 30, 70, .14); }
.wa-glass.lqg-css { box-shadow: inset 0 1.5px 1px rgba(255,255,255,.95), inset 4px 0 8px -4px rgba(255,255,255,.7), inset -4px 0 8px -4px rgba(255,255,255,.7),
  inset 0 0 0 1px rgba(160, 235, 190, .6), inset 0 -8px 14px -8px rgba(0, 80, 40, .18), 0 10px 26px rgba(15, 110, 60, .16); }
/* a slow sheen drifting across the glass, like light moving over it */
@keyframes lqg-sheen { 0%, 62% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
.lqg-css > .lqg-layer { overflow: hidden; }
.lqg-css > .lqg-layer > i.lqg-sheen { position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.38), rgba(255,255,255,0)); animation: lqg-sheen 7s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .lqg-css > .lqg-layer > i.lqg-sheen { display: none; } }
/* phones: a taller photo with the words rising over its lower part, like the desktop hero (the glass flutes and the
   photo are part of the first screen, not a strip above the text) */
@media (max-width: 760px) {
  .hero picture { height: min(118vw, 560px); }
  .hero::after { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) calc(min(118vw, 560px) - 300px), rgba(255,255,255,.82) calc(min(118vw, 560px) - 150px), #fff calc(min(118vw, 560px) - 40px)); }
  .hero-copy { margin-top: -190px; }
}
/* cookie notice: "Don't count my visits" (visit totals by town are kept without cookies) */
.cookie-note .cn-link { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ===== v35 · 6 Nov 2026: site leave protocol (last-call card) and the sales boosters ===== */
.lv-sheet { width: min(460px, calc(100% - 32px)); padding: 26px 24px 22px; border: 0; border-radius: 28px; color: var(--ink); background: #fff; overflow: visible;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 30px 70px -18px rgba(0,30,70,.42), 0 10px 24px -10px rgba(0,0,0,.2); }
.lv-sheet:not([open]) { display: none; }
.lv-sheet::backdrop { background: rgba(0, 12, 30, .38); -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2); }
.lv-sheet[open] { animation: lvIn .42s cubic-bezier(.2, .9, .25, 1.1); }
@keyframes lvIn { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.lv-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(120,120,128,.12); color: var(--ink); }
.lv-x svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.lv-x:focus-visible { outline: 3px solid rgba(0,113,227,.45); outline-offset: 2px; }
.lv-kick { margin: 0 0 6px; font: 700 .75rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text); }
.lv-sheet h2 { margin: 0 44px 14px 0; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; }
.lv-quote { margin: 0 0 16px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(160deg, rgba(0,48,107,.06), rgba(0,48,107,.02)); }
.lv-quote p { margin: 0; font-size: 1.0625rem; line-height: 1.45; font-style: italic; letter-spacing: -.005em; }
.lv-quote cite { display: block; margin-top: 6px; font: 600 .8125rem var(--font); font-style: normal; color: var(--muted); }
.lv-quote cite::before { content: "— "; }
.lv-offers { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.lv-offer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff7e6; box-shadow: inset 0 0 0 1px rgba(233,160,40,.35); }
.lv-dot { width: 10px; height: 10px; border-radius: 50%; background: #f59a2c; box-shadow: 0 0 0 4px rgba(245,154,44,.2); }
.lv-o-main { display: grid; gap: 2px; min-width: 0; }
.lv-o-main b { font-size: .9375rem; }
.lv-o-main span { font-size: .8125rem; color: var(--muted); }
.lv-ends { font-size: .8125rem; color: #8a4b00; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lv-ends b { display: block; font-size: .9375rem; color: #6b3a00; }
.lv-coupon { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 10px 10px 12px; border-radius: 16px; border: 1.5px dashed rgba(0,48,107,.35); }
.lv-coupon[hidden] { display: none; }
.lv-c-off { padding: 8px 10px; border-radius: 12px; background: var(--brand); color: #fff; font: 700 .875rem var(--font); white-space: nowrap; }
.lv-c-main { display: grid; font-size: .875rem; }
.lv-c-main b { letter-spacing: .06em; }
.lv-c-main small { color: var(--muted); font-size: .75rem; }
.lv-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 4px; }
.lv-actions .btn { min-height: 48px; justify-content: center; }
@media (max-width: 760px) {
  .lv-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 28px 28px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .lv-sheet[open] { animation-name: lvUp; }
  @keyframes lvUp { from { transform: translateY(100%); } }
  .lv-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lv-sheet[open] { animation: none; } }
@media (prefers-reduced-transparency: reduce) { .lv-sheet::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0,0,0,.5); } }

/* "Only a few left" (5 or fewer packs; the number is never shown) */
.few-left { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font: 600 .875rem var(--font); color: #b3261e; }
.few-left[hidden] { display: none; }
.few-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 0 rgba(229,72,77,.5); animation: fewPulse 1.8s ease-out infinite; }
@keyframes fewPulse { 70% { box-shadow: 0 0 0 7px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
@media (prefers-reduced-motion: reduce) { .few-dot { animation: none; } }
/* "Popular this month" (real orders, last 30 days) */
.pop-chip { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 5px 12px 5px 9px; border-radius: 999px; font: 600 .8125rem var(--font); color: #6b3a00; background: #fff3d6; box-shadow: inset 0 0 0 1px rgba(233,160,40,.35); }
.pop-chip[hidden] { display: none; }
.pop-chip svg { width: 14px; height: 14px; fill: #f0a020; }
.pcard-media { position: relative; }
.pop-tag { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font: 600 .75rem var(--font); color: #6b3a00; background: rgba(255,243,214,.94); box-shadow: 0 2px 8px rgba(0,0,0,.08); pointer-events: none; }
.pop-tag[hidden] { display: none; }
/* Cart reminder */
.cart-nudge { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); width: max-content;
  padding: 8px 8px 8px 10px; border-radius: 999px; font-size: var(--fs-sm); color: var(--ink); background: rgba(255,255,255,.88);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 16px 40px -10px rgba(0,30,70,.3); transform: translate(-50%, 16px) scale(.96); opacity: 0; transition: opacity .3s, transform .5s var(--spring); }
.cart-nudge.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.cn-bag { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); flex: none; }
.cn-bag svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.cart-nudge a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cart-nudge button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(120,120,128,.14); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; flex: none; }
@media (min-width: 761px) { .cart-nudge { bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .cart-nudge { transition: opacity .2s; } }
.lv-actions .lv-go { background: var(--brand); color: #fff; font-weight: 600; box-shadow: 0 10px 24px -10px rgba(0,48,107,.55), inset 0 1px 0 rgba(255,255,255,.25); text-decoration: none; }
.lv-actions .lv-go:hover { filter: brightness(1.08); }
.lv-actions .lv-go:focus-visible { outline: 3px solid rgba(0,113,227,.45); outline-offset: 2px; }
.pop-chip { align-self: flex-start; justify-self: start; width: max-content; max-width: 100%; }
@media (max-width: 480px) { .cart-nudge .cn-extra { display: none; } }
.few-left { padding-left: 2px; }