/* ───────────── 1 · tokens ───────────── */
@font-face{font-family:"Jakarta";src:url(../fonts/PlusJakartaSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../fonts/PlusJakartaSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jakarta";src:url(../fonts/PlusJakartaSans-SemiBold.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Jakarta Fallback";src:local("Arial");size-adjust:104%;ascent-override:96%;descent-override:26%;line-gap-override:0%} /* so the swap doesn't move the page */
@font-face{font-family:"Geist Mono";src:url(../fonts/GeistMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --forest-950:#0E1F14; --forest-900:#152B1C; --forest-700:#24452D; --leaf-500:#668F41;
  --cream-50:#FBF9F3; --cream-100:#F7F4EC; --cream-200:#EFEADD;
  --ink:#18201A; --muted:#5D6B60; --juice-500:#F99C24; --juice-600:#E07C0E;
  /* the names the components use */
  --forest:var(--forest-700); --deep:var(--forest-900); --night:var(--forest-950); --leaf:var(--leaf-500); --juice:var(--juice-500);
  --cream:var(--cream-100); --sand:var(--cream-200); --white:var(--cream-50); --red:#B3261E; /* decoration only, never for text you must read */
  --quiet:#6B786E; /* large secondary text */
  --leaf-ink:#4E7330; /* leaf green for small text: 5.0:1 on cream */
  --line:color-mix(in srgb,var(--forest-950) 11%,transparent);
  --field:color-mix(in srgb,var(--forest-950) 20%,transparent);
  --glow:0 0 0 4px color-mix(in srgb,var(--leaf) 24%,transparent);
  --lift:0 0 0 1px rgba(14,31,20,.06),0 30px 60px -32px rgba(14,31,20,.42);
  --c:var(--forest); --tint:var(--sand);
  --gut:clamp(16px,4vw,56px); --max:1360px;
  --r-10:10px; --r-16:16px; --r-24:24px; --r-32:32px; --r:var(--r-16); --r-lg:var(--r-24);
  --ease:cubic-bezier(.22,1,.36,1); --out:var(--ease);
  --t1:.18s; --t2:.32s; --t3:.7s; --fs-2:clamp(34px,4.2vw,68px); --fs-3:clamp(22px,1.9vw,30px);
  --sec:clamp(84px,9vw,150px);
  --hdr:72px; --tabs:0px; --focus:var(--forest);
  color-scheme:light;
  /* the light on the stage: day is the default */
  --st-a:#F6F5EA; --st-b:#E3EDD3; --st-ink:var(--forest-950); --st-soft:#465449; --st-line:rgba(14,31,20,.14); --st-lit:18%; --st-k:.62; --st-btn:rgba(14,31,20,.08); --st-shadow:rgba(14,31,20,.3);
}
html[data-phase=dawn]{--st-a:#FBF1E4; --st-b:#F9D8B8; --st-soft:#5A5346; --st-lit:24%; --st-k:.7}
html[data-phase=evening]{--st-a:#152B1C; --st-b:#2C4B2F; --st-ink:var(--cream-50); --st-soft:#CBD1C2; --st-line:rgba(251,249,243,.18); --st-lit:46%; --st-k:.92; --st-btn:rgba(251,249,243,.12); --st-shadow:rgba(0,0,0,.5)}
html[data-phase=night]{--st-a:#0E1F14; --st-b:#16301F; --st-ink:var(--cream-50); --st-soft:#B7C0B2; --st-line:rgba(251,249,243,.15); --st-lit:26%; --st-k:.5; --st-btn:rgba(251,249,243,.1); --st-shadow:rgba(0,0,0,.6)}

/* ───────────── 2 · base ───────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px);interpolate-size:allow-keywords}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
/* The O as a window: the next page opens through a circle from where you tapped (bo.js sets --vx / --vy) */
html.vt-o::view-transition-old(root){animation:none}
html.vt-o::view-transition-new(root){animation:vt-o .6s var(--out) both}
@keyframes vt-o{from{clip-path:circle(0 at var(--vx,50%) var(--vy,40%))}to{clip-path:circle(150% at var(--vx,50%) var(--vy,40%))}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 "Jakarta","Jakarta Fallback",system-ui,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.05;text-wrap:balance;color:inherit}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
figure{margin:0}
em{font-style:normal}
b,strong{font-weight:600}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:10px}
.ftr,.habit,.menu,.four{--focus:var(--cream)}
html[data-phase=evening] .stage,html[data-phase=night] .stage{--focus:var(--cream-50)}
::selection{background:var(--forest);color:var(--cream)}
.wrap{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto}
.sr,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--deep);color:var(--cream);padding:12px 18px;border-radius:999px;transition:top .2s}
.skip:focus{top:12px}
.muted{color:var(--muted)} .small{font-size:14px}
.stop{color:var(--juice)}
.nw{white-space:nowrap}
.h2{font-size:var(--fs-2);letter-spacing:-.04em;line-height:1.02}
.h3{font-size:var(--fs-3);letter-spacing:-.03em;line-height:1.1}
.lead{font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--muted)}
.n{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--leaf-ink);font-variant-numeric:tabular-nums}
section{position:relative}
.sec{padding:var(--sec) 0}
.sec-pad{margin-bottom:var(--sec)}
.ic{width:22px;height:22px;flex:none}
/* The batch stamp: the print on a label, for dates, batch codes and times */
.stamp{font:500 11.5px/1.3 "Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;text-transform:uppercase}
/* text separated by small dots: "No added sugar · No water · No preservatives" */
.ann i,.trust i{display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;vertical-align:middle;margin:0 10px}

/* ───────────── 3 · forms — one calm field style everywhere ───────────── */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],input[type=url],input[type=date],select,textarea,.input-text{
  width:100%;min-height:52px;padding:14px 18px;border-radius:var(--r-16);border:1px solid var(--field);background:var(--white);color:var(--ink);
  font:500 16px/1.3 "Jakarta","Jakarta Fallback",system-ui,sans-serif;transition:border-color var(--t1),box-shadow var(--t2),background-color var(--t1);-webkit-appearance:none;appearance:none}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--forest-950) 36%,transparent)}
input:focus,select:focus,textarea:focus,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--forest);box-shadow:var(--glow)}
::placeholder{color:var(--quiet);opacity:1}
textarea{min-height:110px;resize:vertical;line-height:1.5}
select{padding-right:46px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324452D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center/18px no-repeat;cursor:pointer}
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0;flex:none;display:inline-grid;place-items:center;vertical-align:middle;
  border:1.5px solid color-mix(in srgb,var(--forest) 34%,transparent);background:var(--white);border-radius:7px;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--forest);border-color:var(--forest)}
input[type=checkbox]:checked::after{content:"";width:10px;height:5.5px;border:2.4px solid var(--cream);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--cream)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:none;box-shadow:var(--glow)}
label{font-size:13.5px;font-weight:600}

/* ───────────── 4 · components ───────────── */
.btn{--bg:var(--forest-700);--fg:var(--cream-50);--hov:var(--juice-500);--hfg:var(--forest-950);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 26px;min-height:50px;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:600;font-size:15.5px;letter-spacing:-.01em;line-height:1.1;isolation:isolate;overflow:hidden;transition:color var(--t2),box-shadow var(--t2),transform var(--t2) var(--ease);white-space:nowrap;border:0;box-shadow:0 14px 26px -18px rgba(14,31,20,.7)}
/* pour: the hover colour rises from the bottom */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hov);border-radius:inherit;transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:none}
.btn:hover{color:var(--hfg);transform:translateY(-1px);box-shadow:0 18px 30px -18px color-mix(in srgb,var(--juice-600) 80%,transparent)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:var(--t1)}
.btn .arrow{width:18px;height:18px;transition:transform .45s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-cream{--bg:var(--cream-50);--fg:var(--forest-950);--hov:var(--juice-500);--hfg:var(--forest-950)}
.btn-line{--bg:transparent;--fg:var(--forest-700);--hov:var(--juice-500);--hfg:var(--forest-950);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--forest-700) 55%,transparent)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--juice-500)}
.btn-ghost{--bg:transparent;--fg:var(--cream);--hov:var(--juice-500);--hfg:var(--forest-950);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cream) 40%,transparent)}
/* after dark the main button lights up: forest on forest would sink */
html[data-phase=evening] [data-stage] .btn:not(.btn-stage),html[data-phase=night] [data-stage] .btn:not(.btn-stage){--bg:var(--cream-50);--fg:var(--forest-950);--hov:var(--juice-500);--hfg:var(--forest-950)}
.btn-stage{--bg:transparent;--fg:var(--st-ink);--hov:var(--juice-500);--hfg:var(--forest-950);box-shadow:inset 0 0 0 1.5px var(--st-ink)}
.btn-xl{padding:0 30px;min-height:56px;font-size:16px}
.btn-sm{padding:0 18px;min-height:42px;font-size:14.5px}
.btn-block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.55;pointer-events:none}
/* Waiting: the button's label gives way to a turning O (a ring with a juice-orange arc) */
.btn.is-busy,.btn-add.is-busy,.srch-add.is-busy{opacity:1;color:transparent!important;position:relative}
.btn.is-busy::after,.btn-add.is-busy::after,.srch-add.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2.5px solid color-mix(in srgb,currentColor 0%,var(--o-ring,rgba(247,244,236,.35)));border-top-color:var(--juice);-webkit-mask:none;mask:none;animation:o-turn .8s linear infinite}
.btn-line.is-busy,.btn-add.is-busy{--o-ring:color-mix(in srgb,var(--forest) 22%,transparent)}
@keyframes o-turn{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.btn.is-busy::after,.btn-add.is-busy::after,.srch-add.is-busy::after{animation-duration:2.4s}}
.btn.is-done{--bg:var(--leaf);--hov:var(--leaf)}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;font-size:14px;transition:text-decoration-color var(--t2)}
.link:hover{text-decoration-color:var(--juice-500);text-decoration-thickness:2px}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;padding-bottom:3px;background:linear-gradient(var(--juice-500) 0 0) left bottom/0 2px no-repeat,linear-gradient(currentColor 0 0) left bottom/100% 1px no-repeat;transition:background-size .5s var(--out)}
.link-arrow .arrow{width:18px;transition:transform .45s var(--out)}
.link-arrow:hover{background-size:100% 2px,100% 1px}
.link-arrow:hover .arrow{transform:translateX(5px)}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .3s}
.icon-btn:hover{background:color-mix(in srgb,currentColor 9%,transparent)}
.stepper{display:inline-flex;align-items:center;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);background:var(--white)}
.stepper button{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;transition:background .25s}
.stepper button:hover{background:var(--sand)}
.stepper .ic{width:16px;height:16px}
.stepper button:disabled{opacity:.3;cursor:not-allowed;background:none}
.stepper b{min-width:24px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.toast{position:fixed;left:50%;bottom:calc(20px + var(--tabs));z-index:120;width:max-content;transform:translate(-50%,140%);background:var(--deep);color:var(--cream);padding:13px 22px;border-radius:999px;font-weight:500;font-size:15px;transition:transform .6s var(--out),opacity .4s,visibility .4s;display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px);opacity:0;visibility:hidden;box-shadow:var(--lift)}
.toast-act{margin-left:6px;padding:4px 2px;font-weight:600;color:var(--juice);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible}
.toast.err{background:var(--red)}
.fly{position:fixed;z-index:130;pointer-events:none;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(21,43,28,.3))}
/* The O streak (bo_o) — used once, on the home page */
.o{width:56px;height:56px;overflow:visible;--oj:var(--juice);--or:var(--forest)}
.o-bg{fill:var(--obg,none)}
.o-ring{fill:none;stroke:var(--or);stroke-width:5;transition:stroke .4s,opacity .5s}
.o-juice{fill:var(--oj)}
.o-lv{transition:transform 1.1s var(--out)}

/* ───────────── 5 · header, menu, drawer ───────────── */
.ann{position:relative;height:32px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;font-weight:500;padding:0 16px;text-align:center;white-space:nowrap;overflow:hidden}
.ann span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;vertical-align:middle;margin:0 12px}
/* One flat bar, the same at every scroll position (client, 7 Nov). Logo · four links · the next drop, search, account, bag. */
.hdr{position:sticky;top:0;z-index:90;height:var(--hdr);width:100%;background:color-mix(in srgb,var(--cream-50) 92%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);box-shadow:0 1px 0 var(--line);color:var(--forest-950)}
.hdr-in{position:relative;height:var(--hdr);margin-inline:auto;max-width:calc(var(--max) + 2*var(--gut));padding:0 var(--gut);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.hdr-logo{display:inline-flex;width:fit-content;padding:8px 0;border-radius:8px;color:var(--forest-700)}
.hdr-logo .logo{width:124px;height:auto;color:currentColor;overflow:visible}
/* the live O: a wave that slides, a level that breathes and rises when you point at it, a leaf in a breeze */
.logo-live .lg-wave{animation:lg-wave 5.2s linear infinite}
.logo-live .lg-lv{animation:lg-lv 6.5s ease-in-out infinite alternate}
.logo-live .lg-fill{transition:transform .9s var(--ease)}
.logo-live .lg-in{animation:lg-in 1.6s var(--ease) .2s both}
.logo-live #leaf{transform-box:fill-box;transform-origin:0% 100%;animation:lg-leaf 4.8s ease-in-out infinite}
.hdr-logo:hover .lg-fill{transform:translateY(-62px)}
.hdr-logo:hover #leaf{animation-duration:1.6s}
@keyframes lg-wave{to{transform:translateX(-200px)}}
@keyframes lg-lv{from{transform:translateY(6px)}to{transform:translateY(-8px)}}
@keyframes lg-in{from{transform:translateY(150px)}}
@keyframes lg-leaf{50%{transform:rotate(-7deg)}}
.hdr-nav{display:flex;align-items:center;gap:2px}
.hdr-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;font-weight:500;font-size:15px;color:color-mix(in srgb,var(--forest-950) 80%,transparent);transition:color var(--t2)}
.hdr-nav a>span{position:relative;padding:4px 0}
.hdr-nav a>span::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--juice-500);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease),background var(--t2)}
.hdr-nav a:hover{color:var(--forest-950)}
.hdr-nav a:hover>span::after{transform:scaleX(1);transform-origin:left}
.hdr-nav a[aria-current]{color:var(--forest-950);font-weight:600}
.hdr-nav a[aria-current]>span::after{transform:scaleX(1);background:var(--forest-700)}
.hdr-nav a[aria-current]:hover>span::after{background:var(--juice-500)}
.hdr-tag{padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--juice-500) 20%,var(--cream-50));color:var(--forest-950);font-size:11.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap}
.hdr-act{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.bag-btn{position:relative;display:flex;align-items:center;gap:7px;height:44px;padding:0 6px 0 10px;border-radius:999px;font-weight:600;font-size:15px;transition:background var(--t2)}
.bag-btn:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.cart-count{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--forest-700);color:var(--cream-50);display:grid;place-items:center;font-size:12px;font-weight:600;transition:background var(--t2),color var(--t2)}
.bag-btn.has .cart-count{background:var(--juice-500);color:var(--forest-950)}
.bag-btn.bump .cart-count{animation:bump .6s var(--ease)}
@keyframes bump{30%{transform:scale(1.25)}}
.menu-btn{display:none}
.hdr-bare .hdr-in{grid-template-columns:1fr auto}
/* Phones: an app-like bar along the bottom. Anything fixed to the bottom sits on --tabs, so it never covers a buy bar. */
.tabbar{display:none}
.burger{position:relative;width:22px;height:16px;transition:transform var(--t2) var(--ease)}
.burger i{position:absolute;left:0;right:0;top:7px;height:1.8px;border-radius:2px;background:currentColor;transition:transform .5s var(--ease),opacity .2s,right .3s var(--ease)}
.burger i:nth-child(1){transform:translateY(-6.5px)}
.burger i:nth-child(2){right:7px}
.burger i:nth-child(3){transform:translateY(6.5px)}
.menu-btn:active .burger{transform:scale(.86)}
.menu-btn[aria-expanded=true] .burger i:nth-child(1){transform:rotate(45deg)}
.menu-btn[aria-expanded=true] .burger i:nth-child(2){opacity:0;right:22px}
.menu-btn[aria-expanded=true] .burger i:nth-child(3){transform:rotate(-45deg)}
@media (hover:hover){.menu-btn:hover .burger i:nth-child(2){right:0}}
/* The phone menu drops from the bar; what's in it rises row by row (--i is each row's turn). */
.menu{--ml:color-mix(in srgb,var(--cream) 14%,transparent);position:fixed;inset:0;z-index:85;background:radial-gradient(120% 60% at 100% 0,color-mix(in srgb,var(--forest-700) 70%,transparent),transparent 70%),var(--forest-900);color:var(--cream);padding-top:var(--hdr);padding-bottom:var(--tabs);overflow:auto;overscroll-behavior:contain;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease)}
.menu.open{clip-path:inset(0)}
.menu-in{display:flex;flex-direction:column;min-height:100%;padding:18px 0 22px}
.menu [style*="--i"]{opacity:0;transform:translateY(18px);transition:opacity .3s,transform .3s}
.menu.open [style*="--i"]{opacity:1;transform:none;transition:opacity .6s var(--out) calc(.16s + var(--i) * .035s),transform .8s var(--out) calc(.16s + var(--i) * .035s)}
.menu-k{padding:0 18px;color:color-mix(in srgb,var(--cream) 62%,transparent)}
.menu-juices{display:flex;gap:6px;margin:0;padding:12px 12px 20px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.menu-juices::-webkit-scrollbar{display:none}
.menu-juices li{flex:none;width:76px}
.menu-juices a{display:grid;justify-items:center;gap:8px;text-align:center}
.menu-o{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--tint);overflow:hidden;transition:transform var(--t2) var(--ease),box-shadow var(--t2)}
.menu-o img{position:absolute;left:50%;top:9px;width:auto;max-width:none;height:104px;translate:-50% 0}
.menu-juices b{font-size:12px;font-weight:500;line-height:1.2;color:color-mix(in srgb,var(--cream) 86%,transparent)}
.menu-juices a:active .menu-o{transform:scale(.9);box-shadow:0 0 0 2px var(--juice-500)}
.menu-all .menu-o{background:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cream) 30%,transparent)}
.menu-all .arrow{width:20px;height:20px}
.menu-nav{display:flex;flex-direction:column;margin:0 18px;border-top:1px solid var(--ml)}
.menu-nav a{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;min-height:60px;border-bottom:1px solid var(--ml);transition:color var(--t1),padding var(--t2) var(--ease)}
.menu-nav .stamp{color:color-mix(in srgb,var(--cream) 50%,transparent)}
.menu-nav b{font-size:clamp(22px,6.4vw,27px);font-weight:600;letter-spacing:-.035em;line-height:1.15}
.menu-nav .arrow{box-sizing:content-box;width:16px;height:16px;padding:10px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cream) 22%,transparent);transition:background var(--t1),color var(--t1),box-shadow var(--t1),transform var(--t2) var(--ease)}
.menu-nav a:active{color:var(--juice-500);padding-left:6px}
.menu-nav a:active .arrow{background:var(--juice-500);color:var(--forest-950);box-shadow:none;transform:translateX(3px)}
@media (hover:hover){.menu-nav a:hover{padding-left:6px}.menu-nav a:hover .arrow{background:var(--juice-500);color:var(--forest-950);box-shadow:none}}
.menu-foot{display:grid;gap:10px;margin-top:auto;padding:24px 18px 0}
.menu-foot .btn{width:100%}
.menu-foot .btn em{padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--juice-500) 30%,var(--cream-50));font-size:12px;font-weight:600;font-style:normal}
.menu-try{--bg:transparent;--fg:var(--cream);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--cream) 40%,transparent)}
.menu-try .amount{color:inherit}
.menu-line{margin-top:10px;text-align:center;font-size:15px;color:color-mix(in srgb,var(--cream) 62%,transparent)}
body.menu-on .hdr{background:transparent!important;box-shadow:none!important;color:var(--cream)}
body.menu-on .hdr-in{background:transparent!important;box-shadow:none!important}
body.menu-on .cart-count{background:var(--cream);color:var(--deep)}
body.menu-on .hdr-logo{color:var(--cream)}
body.menu-on .deliv-chip>.ic{background:color-mix(in srgb,var(--cream) 14%,transparent);color:var(--cream)}
body.menu-on .chip-t small{color:color-mix(in srgb,var(--cream) 70%,transparent)}
.scrim{position:fixed;inset:0;z-index:100;background:rgba(21,43,28,.38);backdrop-filter:blur(2px);opacity:0;transition:opacity .5s}
.scrim.on{opacity:1}
.drawer{position:fixed;top:8px;right:8px;bottom:8px;z-index:110;width:min(452px,100% - 16px);border-radius:var(--r-24);overflow:hidden;background:var(--cream-100);transform:translateX(calc(100% + 16px));transition:transform .5s var(--ease);display:flex;flex-direction:column;box-shadow:var(--lift)}
.drawer.on{transform:none}
.drawer-body{display:flex;flex-direction:column;height:100%;overflow:hidden}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 12px 8px 22px}
.drawer-head h2{font-size:24px}
.drawer-head .muted{font-size:16px;font-weight:500;margin-left:4px}
.ship-meter{margin:0 22px 10px;padding:12px 14px;border-radius:var(--r-16);background:var(--cream-50);box-shadow:inset 0 0 0 1px var(--line);font-size:14px;color:var(--muted)}
.ship-meter b{color:var(--forest-950);font-weight:600}
.ship-meter .amount{color:inherit}
.ship-meter .fill{margin-top:9px}
.drawer-scroll{flex:1;overflow:auto;overscroll-behavior:contain}
.drawer-items{padding:0 22px}
.ditem{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.ditem-img{position:relative;width:64px;height:84px;flex:none;border-radius:var(--r-10);background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 45%,transparent),var(--tint));overflow:hidden}
.ditem-img .pimg,.ditem-img>img{position:absolute;left:50%;bottom:0;height:90%;width:auto;max-width:none;translate:-50% 0}
.box-fan{position:relative;display:block;width:100%;height:100%}
.box-fan img{position:absolute;left:50%;bottom:-10px;height:76px;width:auto;max-width:none;transform-origin:50% 100%;transform:translateX(calc(-50% + var(--i) * 15px)) rotate(calc(var(--i) * 9deg));filter:drop-shadow(0 4px 6px rgba(14,31,20,.18))}
.ditem-main{flex:1;min-width:0}
.ditem-top{display:flex;justify-content:space-between;gap:10px;font-size:16px;line-height:1.25}
.ditem-top b{font-weight:600;letter-spacing:-.015em}
.ditem-price{font-weight:600;white-space:nowrap}
.ditem-meta{font-size:13.5px;color:var(--muted);margin:2px 0 8px}
.ditem-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 8px}
.ditem-chips span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--forest-950)}
.ditem-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ditem .stepper button{width:40px;height:40px}
.ditem .link{min-height:40px;font-weight:500;color:var(--muted)}
.drawer-up{padding:14px 22px 16px}
.drawer-up-h{font-size:14px;font-weight:600;color:var(--forest-950);margin-bottom:6px}
.drawer-up-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mini{display:flex;align-items:center;gap:8px;min-width:0;padding:6px;border-radius:var(--r-16);box-shadow:inset 0 0 0 1px var(--line)}
.mini-img{position:relative;width:34px;height:44px;border-radius:8px;background:var(--tint);flex:none;overflow:hidden}
.mini-img img{position:absolute;left:50%;bottom:0;height:88%;width:auto;max-width:none;translate:-50% 0}
.mini div{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px;line-height:1.25}
.mini div b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini div span{color:var(--muted);font-size:12.5px;white-space:nowrap}
.mini-add{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--cream-200);transition:background var(--t2),color var(--t2)}
.mini-add:hover{background:var(--juice-500);color:var(--forest-950)}
.mini-add .ic{width:16px;height:16px}
.drawer-foot{padding:14px 22px 16px;background:var(--cream-50);box-shadow:0 -1px 0 var(--line)}
.drawer-total{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;margin-bottom:2px}
.drawer-total b{font-size:20px;font-weight:600}
.drawer-foot:has(.drawer-grand) .drawer-total:not(.drawer-grand) b{font-size:15px;font-weight:500}
.drawer-grand{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font-size:16px}
.drawer-grand span{font-weight:600}
.drawer-foot .btn{margin-top:12px}
/* In the drawer the bag scrolls as one piece and only Total + Checkout stay in view (the bag page keeps its side card) */
.drawer .drawer-body{overflow:auto;overscroll-behavior:contain}
.drawer .drawer-head{position:sticky;top:0;z-index:3;background:var(--cream-100)}
.drawer .drawer-scroll{flex:none;overflow:visible}
.drawer .drawer-foot{display:contents}
.drawer .drawer-sum{margin-top:auto;padding:14px 22px 6px;background:var(--cream-50);box-shadow:0 -1px 0 var(--line)}
.drawer .drawer-pin{position:sticky;bottom:0;z-index:2;padding:4px 22px 14px;background:var(--cream-50)}
.drawer .drawer-pin .drawer-grand{margin-top:0}
.drawer .drawer-share{margin:0;padding:2px 22px 16px;background:var(--cream-50)}
.drawer-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:30px}
.drawer-empty h3{font-size:26px}
.drawer-empty p{color:var(--muted);margin-bottom:8px}
.drawer-empty .btn{width:100%;max-width:300px}
.drawer-empty .link{margin-top:8px}
.empty-o{width:72px;height:72px;margin-bottom:8px;--or:var(--forest-700)}
.empty-o .o-lv{display:none}
@keyframes inUp{from{opacity:0;transform:translateY(12px)}}
/* delivery promise: one line on the product page and in the bag, a chip in the header, a pincode box */
.deliv{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;margin-top:14px;padding:12px 18px 12px 12px;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);text-align:left;transition:box-shadow .3s}
.deliv:hover{box-shadow:inset 0 0 0 1px var(--forest)}
.deliv>.ic{width:40px;height:40px;padding:10px;border-radius:50%;background:var(--sand);color:var(--forest)}
.deliv-t{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.deliv-t b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deliv-t small{font-size:13.5px;color:var(--muted)}
.deliv-t em{color:var(--forest);font-weight:600}
.deliv-a{font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.deliv.is-no>.ic{background:color-mix(in srgb,var(--juice) 20%,var(--cream))}
.deliv-sm{margin:6px 0 0;padding:4px 0;background:none;box-shadow:none;gap:10px}
.visit-office{margin-top:18px;font-size:15px;color:var(--muted)}
.visit-office a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.deliv-sm:hover{box-shadow:none}
.deliv-sm>.ic{width:32px;height:32px;padding:7px}
.deliv-sm .deliv-t b{white-space:normal}
/* the next drop, live: "Next drop / Tomorrow, 6–9 am"; with a pincode, "To Indiranagar / Earliest Tue 10 Nov" */
.deliv-chip{display:inline-flex;align-items:center;gap:10px;height:48px;max-width:250px;margin-right:6px;padding:0 14px 0 6px;border-radius:999px;text-align:left;transition:background var(--t2)}
.deliv-chip:hover{background:color-mix(in srgb,var(--forest-950) 6%,transparent)}
.deliv-chip>.ic{width:34px;height:34px;padding:8px;border-radius:50%;flex:none;background:var(--cream-200);color:var(--forest-700);transition:background var(--t2),color var(--t2)}
.deliv-chip:hover>.ic{background:var(--juice-500);color:var(--forest-950)}
.chip-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.chip-t>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-t small{font-size:11.5px;font-weight:500;color:var(--muted)}
.chip-t b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.pin-dlg{width:min(460px,100% - 32px);max-width:none;padding:0;border:0;border-radius:28px;background:var(--cream);color:var(--forest);box-shadow:var(--lift),0 0 0 1px var(--line)}
.pin-dlg[open]{animation:dlgIn .5s var(--out)}
.pin-dlg::backdrop{background:rgba(21,43,28,.38);backdrop-filter:blur(2px)}
.pin-dlg-in{position:relative;padding:34px 30px 30px}
.pin-dlg-x{position:absolute;top:14px;right:14px}
.pin-dlg-ic .ic{width:48px;height:48px;padding:12px;border-radius:50%;background:var(--sand);margin-bottom:18px}
.pin-dlg h2{font-size:28px;letter-spacing:-.035em;margin-bottom:8px}
.pin-dlg .muted{font-size:15px;line-height:1.5;margin-bottom:20px}
.pin-dlg-done{margin-top:16px}
.pin-hint{margin-top:2px;font-size:13.5px}
.field-hint{margin-top:6px;font-size:13px;color:var(--muted)}
.field-hint:empty{display:none}
/* a quiet tick inside a field once it's right */
:root{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E")}
/* juice finder */
.quiz{width:min(580px,100% - 32px);max-width:none;padding:0;border:0;border-radius:28px;background:var(--cream);color:var(--forest);box-shadow:var(--lift),0 0 0 1px var(--line)}
.quiz[open]{animation:dlgIn .5s var(--out)}
.quiz::backdrop{background:rgba(21,43,28,.38);backdrop-filter:blur(2px)}
.quiz-in{position:relative;padding:34px 30px 30px;min-height:440px}
.quiz-x{position:absolute;top:14px;right:14px}
.quiz-step{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-ink);margin-bottom:12px}
.quiz h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.035em;margin-bottom:22px;max-width:15ch}
.quiz-opts{display:flex;flex-direction:column;gap:8px;animation:inUp .5s var(--out) both}
.quiz-opt{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:0 20px;border-radius:16px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-size:16.5px;font-weight:500;text-align:left;transition:box-shadow .25s,transform .3s var(--out)}
.quiz-opt:hover{box-shadow:inset 0 0 0 1.5px var(--forest)}
.quiz-opt:active{transform:scale(.99)}
.quiz-opt i{width:14px;height:14px;border-radius:50%;flex:none}
.quiz-opt .arrow{margin-left:auto;width:18px;opacity:.45;transition:transform .45s var(--out),opacity .3s}
.quiz-opt:hover .arrow{transform:translateX(4px);opacity:1}
.quiz-back{margin-top:18px}
.quiz-res{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:start;animation:inUp .5s var(--out) both}
.quiz-img{border-radius:20px;background:var(--tint);aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden}
.quiz-img img{height:184px;width:auto;max-width:none} /* the whole bottle, cap to base */
.quiz-res h2{font-size:clamp(36px,4.4vw,50px);letter-spacing:-.045em;margin:0 0 6px}
.quiz-line{font-weight:500}
.quiz-ing{font-size:14px;color:var(--muted);margin-top:4px}
.quiz-also{margin-top:14px;font-size:14.5px}
.quiz-also a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.quiz-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:22px}
.quiz-ctas .btn{white-space:normal;text-align:left;padding-block:12px}
.quiz-note{font-size:13px;color:var(--muted);margin-top:-4px}
.quiz-open{margin-top:2px}
/* referrals */
.ref-bar{margin:0;padding:11px 16px;background:var(--juice);color:var(--night);text-align:center;font-size:14px;font-weight:500}
.share{max-width:620px}
.share .lead{margin-bottom:22px}
.wait{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.wait-q{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--forest)}
.wait .pin input{min-height:46px;font-size:15px}
.wait b{color:var(--forest)}
.wait-done{display:flex;align-items:center;gap:8px;font-weight:600}
.wait-done .ic{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--leaf-500);color:var(--cream-50)}
/* WhatsApp, on phones: a quiet round button, lifted above the product page's buy bar */
.wa-pill{display:none}
/* The bag pill: rises from the bottom once the bag has something — the bottles as O's, count, total, Checkout */
.pill-bar{position:fixed;left:50%;bottom:calc(10px + var(--tabs));z-index:84;display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 24px);padding:6px;border-radius:999px;background:var(--deep);color:var(--cream);box-shadow:0 22px 48px -18px rgba(21,43,28,.6),0 0 0 1px color-mix(in srgb,var(--cream) 8%,transparent);transform:translate(-50%,calc(100% + 40px));visibility:hidden;transition:transform .6s var(--out),visibility 0s .6s}
.pill-bar{scale:.9}
.pill-bar.on{transform:translate(-50%,0);scale:1;visibility:visible;transition:transform .6s var(--out),scale .7s cubic-bezier(.34,1.56,.64,1)}
/* (the product page's own buy bar only shows on phones — there the pill rides above it, never away) */
html:has([data-box]) .pill-bar{display:none} /* building a subscription: the crate has its own total and button, the header keeps the bag's count */
html:has(.drawer.on) .pill-bar.on,.menu-on .pill-bar.on{transform:translate(-50%,calc(100% + 40px));visibility:hidden;transition:transform .6s var(--out),visibility 0s .6s}
.pill-bar.bump .pill-fan{animation:pill-bump .6s var(--out)}
/* Checkout catches the eye: a shine as the pill arrives and each time the bag grows, and a soft juice glow after */
.pill-go{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 0 0 0 color-mix(in srgb,var(--juice) 55%,transparent)}
.pill-go::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--juice) 45%,transparent) 50%,transparent 70%);translate:-110% 0}
.pill-bar.on .pill-go::after{animation:up-shine 1s var(--out) .35s}
.pill-bar.on .pill-go{animation:pill-glow 2.2s var(--out) .8s 2}
.pill-bar.bump .pill-go::after{animation:pill-shine 1s var(--out) .1s} /* own names, so a bump replays them */
.pill-bar.bump .pill-go{animation:pill-glow-b 1.6s var(--out) .3s}
@keyframes pill-shine{to{translate:110% 0}}
@keyframes pill-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--juice) 55%,transparent)}70%,100%{box-shadow:0 0 0 12px transparent}}
@keyframes pill-glow-b{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--juice) 55%,transparent)}70%,100%{box-shadow:0 0 0 12px transparent}}
@keyframes pill-bump{40%{transform:scale(1.12)}}
.pill-bag{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px 0 0;color:inherit;border-radius:999px}
.pill-fan{display:flex;padding-left:2px}
.pill-fan span{display:grid;place-items:end center;width:38px;height:38px;margin-left:-12px;border-radius:50%;background:var(--tint);box-shadow:0 0 0 2.5px var(--deep);overflow:hidden}
.pill-fan span:first-child{margin-left:0}
.pill-fan img{width:auto;height:40px;margin-bottom:-12px}
.pill-t{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.25;white-space:nowrap}
.pill-t>*{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pill-t b{font-size:14.5px;font-weight:600}
.pill-t small{font-size:12.5px;color:color-mix(in srgb,var(--cream) 72%,transparent)}
.pill-t .pill-by{color:var(--juice);font-weight:600}
.ann-me small{font-size:inherit}
.ann-me a{color:var(--juice-600);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;margin-left:4px}
.ann.ann-me span{position:static;opacity:1;animation:none;overflow:hidden;text-overflow:ellipsis} /* one message: no rotation on phones */
.pill-go{flex:none;margin:0;gap:8px;min-height:44px;padding:0 18px}
.pill-bag{min-width:0}
.pill-go .arrow{width:16px}
html:has(.pill-bar.on) .wa-pill{transform:translateY(-70px)}
html:has(.pill-bar.on) .toast{bottom:calc(84px + var(--tabs))}
@media (prefers-reduced-motion:reduce){.pill-bar,.pill-bar.on{transition:none!important}.pill-bar.bump .pill-fan,.pill-go,.pill-go::after{animation:none!important}}
@media (max-width:900px){
  .wa-pill{position:fixed;right:16px;bottom:calc(14px + var(--tabs));z-index:79;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--forest);color:var(--cream);box-shadow:0 14px 30px -10px rgba(21,43,28,.55);transition:transform .5s var(--out),opacity .3s,background .3s}
  .wa-pill .ic{width:26px;height:26px}

  .wa-pill:active{transform:scale(.94)}
  body:has(.sticky-buy.on) .wa-pill{transform:translateY(-74px)}
  html:has(.sticky-buy.on) .pill-bar.on{transform:translate(-50%,calc(100% + 40px));visibility:hidden} /* one bar at a time: the tab bar keeps the bag's count */
  html:has(.sticky-buy.on) .wa-pill{opacity:0;pointer-events:none}
  html:has(.sticky-buy.on) .toast{bottom:calc(84px + var(--tabs))}
  body.menu-on .wa-pill,html:has(.drawer.on) .wa-pill{opacity:0;pointer-events:none}
}
/* first-order offer in the bag */
.offer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:9px 9px 9px 16px;border-radius:14px;background:color-mix(in srgb,var(--juice) 13%,var(--cream));font-size:14px;line-height:1.35}
.offer-code{font-weight:600;letter-spacing:.06em}
.offer-btn{flex:none;min-height:34px;padding:0 16px;border-radius:999px;background:var(--forest);color:var(--cream);font-weight:600;font-size:13.5px;transition:background .3s,color .3s}
.offer-btn:hover{background:var(--juice);color:var(--night)}
.offer-btn.is-busy{opacity:.55;pointer-events:none}
.offer-note{flex:none;font-size:13px;color:var(--muted)}
.code{margin:0 0 12px}
.code .offer{margin-bottom:8px}
.code-open{padding:3px 0;font-size:14px;font-weight:500;color:var(--forest-950);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--forest-950) 28%,transparent);text-underline-offset:3px;transition:text-decoration-color .25s}
.code-open:hover,.code-open[aria-expanded=true]{text-decoration-color:var(--juice)}
.code-f{display:flex;gap:8px;margin-top:8px}
.code-f[hidden]{display:none}
.code input.code-i{flex:1;min-width:0;min-height:46px;padding:0 18px;border-radius:999px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.code input.code-i::placeholder{font-weight:500;letter-spacing:0;text-transform:none}
.code-go{flex:none;min-height:46px;padding:0 20px;border-radius:999px;background:var(--forest);color:var(--cream);font-weight:600;font-size:14.5px;transition:background .3s,color .3s}
.code-go:hover{background:var(--juice);color:var(--night)}
.code-go.is-busy{opacity:.55;pointer-events:none}
.code-msg{margin-top:7px;font-size:13.5px;line-height:1.4;color:var(--leaf-ink)}
.code-msg:empty{display:none}
.code-msg.is-err{color:var(--red)}
.code-x{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:8px;border-radius:50%;background:color-mix(in srgb,var(--forest-950) 7%,transparent);color:var(--muted);font-size:15px;line-height:1;vertical-align:1px;transition:background .25s,color .25s}
.code-x:hover{background:var(--juice);color:var(--night)}
:is(.drawer-off,.cart-discount).is-busy{opacity:.45;pointer-events:none}
.drawer-saved{margin:6px 0 0;font-size:13.5px;color:var(--leaf-ink)}
.drawer-saved b{font-weight:600}
.drawer-off{color:var(--leaf-ink);font-size:14.5px}
.drawer-off b{font-size:15px}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
/* ── The leaving pop-up (parts/bye.php): the six bottles on their own cream, the offer beside them ── */
.bye{width:min(800px,100% - 32px);max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:28px;background:var(--cream-50);color:var(--forest-950);box-shadow:var(--lift),0 0 0 1px var(--line)}
.bye[open]{animation:dlgIn .5s var(--out)}
.bye::backdrop{background:rgba(21,43,28,.46);backdrop-filter:blur(3px)}
.bye-in{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}
.bye-x{position:absolute;top:12px;right:12px;z-index:1}
.bye-pic{display:grid;place-items:center;padding:28px 22px;background:#F8F5EA} /* the photo's own backdrop, so it has no edge */
.bye-pic img{width:100%;max-width:330px;height:auto}
.bye-t{align-self:center;padding:46px 40px 30px}
.bye-eye{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;padding:7px 14px 7px 12px;border-radius:999px;background:color-mix(in srgb,var(--juice-500) 20%,var(--cream-50));font-size:13.5px;font-weight:600;line-height:1.3}
.bye-eye::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--juice-600)}
.bye h2{font-size:clamp(28px,3.1vw,38px);line-height:1.06;letter-spacing:-.04em;margin-bottom:12px;text-wrap:balance}
.bye .muted{font-size:15.5px;line-height:1.55;margin-bottom:22px}
.bye-f{display:grid;gap:10px}
.bye .news-msg{min-height:0;color:var(--forest-700)}
.bye-ok{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.bye-no{display:block;margin:10px auto 0;padding:8px 12px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.bye-no:hover{color:var(--forest-950)}
.bye-in:focus{outline:none}
.bye-code{width:max-content;margin-bottom:14px;padding:6px 18px;font-size:30px;font-weight:700;line-height:1.2;border-radius:14px;border:1.5px dashed var(--juice-600);background:color-mix(in srgb,var(--juice-500) 14%,transparent);letter-spacing:.01em}
@media (max-width:700px){
  .bye{border-radius:24px}
  .bye-in{grid-template-columns:1fr}
  .bye-pic{padding:20px 20px 0;max-height:148px;overflow:hidden;place-items:start center}
  .bye-pic img{max-width:210px}
  .bye-t{padding:22px 22px 18px}
  .bye .muted{margin-bottom:18px}
}
/* ── The cookie question (footer.php): there only when a measuring tag is set, until it is answered ── */
.ck{position:fixed;left:16px;bottom:16px;z-index:96;width:min(440px,100% - 32px);padding:20px 22px;border-radius:var(--r-24);background:var(--cream-50);color:var(--forest-950);box-shadow:var(--lift),0 0 0 1px var(--line);animation:dlgIn .5s var(--out)}
.ck[hidden]{display:none}
.ftr-quiet .ftr-grid{border-top:0}
.hero-pm{display:none}
.ck p{font-size:14px;line-height:1.55;color:var(--muted)}
.ck p b{color:var(--forest-950)}
.ck-b{display:flex;gap:8px;margin-top:14px}
.ck-b .btn{flex:1}
body:has(.ck:not([hidden])) :is(.pill-bar,.wa-pill){display:none} /* one thing at the bottom at a time */
@media (max-width:760px){
  .ck{left:8px;right:8px;width:auto;bottom:calc(8px + var(--tabs));padding:14px 16px}
  .ck p{font-size:13px;line-height:1.5}
  .ck-b{margin-top:10px}
  .hero-pd{display:none}
  .hero-pm{display:inline}
  .srch-add,.mini-add{width:40px;height:40px}
  .code-open,.offer-btn{min-height:40px}
}

/* ───────────── 6 · home ───────────── */
html.js:not(.ready) [data-rise],html.js:not(.ready) [data-split]{opacity:0;animation:late-in 0s 3s forwards}
@keyframes late-in{to{opacity:1}}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(28px,3.4vw,52px)}
.sec-side{max-width:340px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;color:var(--muted);font-size:15.5px}
.ctas{display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px}

/* The stage: a full background under the header. It looks finished from CSS alone; the shader fades in on top. */
.stage{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:max(620px,calc(100svh - var(--hdr)));color:var(--st-ink);
  background:radial-gradient(46% 70% at 66% 44%,color-mix(in srgb,var(--c) var(--st-lit),transparent),transparent 72%),radial-gradient(90% 120% at 12% 112%,var(--st-b),transparent 66%),var(--st-a)}
.swirl,.st-field{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--ease)}
.st-field{z-index:-1}
.swirl.on,.st-field.on{opacity:1}
.st-main{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:center;gap:clamp(24px,4vw,72px);padding:clamp(20px,4vh,48px) max(var(--gut),calc((100% - var(--max)) / 2)) clamp(14px,2.6vh,28px);min-height:0}
.st-copy{min-width:0}
.st-eye{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;margin-bottom:clamp(14px,2.4vh,24px)}
.st-eye i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 26%,transparent);transition:background var(--t3)}
.st-h{font-size:clamp(50px,min(9.3vw,17svh),156px);line-height:.94;letter-spacing:-.055em;font-weight:600}
.st-h>span{display:block;overflow:clip;overflow-clip-margin:.14em;padding-bottom:.08em;margin-bottom:-.08em}
.st-h>span>span{display:block;animation:pour-up var(--t3) var(--ease) both}
.sl-mask{padding-bottom:.2em;margin-bottom:-.2em} /* SplitText line mask: room for g, p and y, same trick as .st-h */
.st-h>span:nth-child(2)>span{animation-delay:.06s}
.st-h>span:nth-child(3)>span{animation-delay:.12s}
@keyframes pour-up{from{transform:translateY(102%)}}
.st-home{background:radial-gradient(40% 60% at 74% 46%,color-mix(in srgb,var(--c) var(--st-lit),transparent),transparent 72%),radial-gradient(90% 120% at 12% 112%,var(--st-b),transparent 66%),var(--st-a)}
.st-home .st-h{font-size:clamp(52px,min(7.2vw,13.4svh),126px)}
.st-lead{max-width:440px;margin-top:clamp(16px,3vh,28px);font-size:clamp(16px,1.25vw,18.5px);line-height:1.5;color:var(--st-soft)}
.st-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,4vh,40px)}
.st-trust{display:flex;flex-wrap:wrap;align-items:center;margin-top:clamp(14px,2.4vh,22px);font-size:13.5px;font-weight:500;color:var(--st-soft)}
.st-trust i{width:3px;height:3px;margin:0 10px;border-radius:50%;background:currentColor;opacity:.55}
/* the bottle in the O: the ring is the brand O, and while the stage turns through the juices it is also the timer */
.st-show{position:relative;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;padding-top:clamp(8px,2vh,24px)}
.st-show .st-bottle{grid-row:auto;align-self:center;height:clamp(250px,calc(100svh - var(--hdr) - 310px),560px);max-height:none;min-height:0}
.st-ring{position:absolute;left:50%;top:55%;z-index:-1;width:auto;max-width:none;height:88%;aspect-ratio:1;translate:-50% -50%;rotate:-90deg;overflow:visible;pointer-events:none}
.st-ring circle{fill:none}
.st-ring-bg{stroke:var(--st-line);stroke-width:.32}
.st-ring-p{stroke:var(--c);stroke-width:.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke var(--t3),opacity var(--t2);opacity:0}
.st-home.is-auto .st-ring-p{opacity:1;animation:st-ring 6.5s linear forwards}
.st-home.is-paused .st-ring-p{animation-play-state:paused}
@keyframes st-ring{to{stroke-dashoffset:0}}
.st-lead span{display:none}
html[data-phase=dawn] [data-at~=dawn],html[data-phase=day] [data-at~=day],html[data-phase=evening] [data-at~=evening],html[data-phase=night] [data-at~=night]{display:inline}
/* The bottle stands on the Day Line like a shelf */
.st-bottle{grid-row:1/-1;position:relative;align-self:end;justify-self:center;height:100%;aspect-ratio:620/1300;max-height:min(720px,calc(100svh - 240px));min-height:300px}
.st-bottle::after{content:"";position:absolute;left:4%;right:4%;bottom:-7px;height:18px;border-radius:50%;background:radial-gradient(closest-side,var(--st-shadow),transparent);z-index:-1}
.st-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 30px color-mix(in srgb,var(--st-shadow) 70%,transparent))}
/* The next bottle rises through the last one like liquid: a wave-topped mask slides up */
.st-pour{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 3200' preserveAspectRatio='none'%3E%3Cpath d='M0 1580C103 1540 207 1540 310 1580S517 1620 620 1580V3200H0Z'/%3E%3C/svg%3E");-webkit-mask:var(--wave) 0 0/100% 246% no-repeat;mask:var(--wave) 0 0/100% 246% no-repeat}
.st-img.st-pour{filter:none}
.st-pour.go{animation:wipe var(--t3) cubic-bezier(.4,0,.3,1) both}
@keyframes wipe{from{-webkit-mask-position:0 -2%;mask-position:0 -2%}to{-webkit-mask-position:0 100%;mask-position:0 100%}}
.st-pick{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(100%,440px);margin-top:clamp(18px,3vh,30px)}
.st-pick-t{min-width:0}
.st-name{display:block;font-size:clamp(20px,1.6vw,25px);font-weight:600;letter-spacing:-.03em;line-height:1.1;text-decoration:underline 2px transparent;text-underline-offset:5px;transition:text-decoration-color var(--t2)}
.st-name:hover{text-decoration-color:var(--juice-500)}
.st-line{margin-top:3px;font-size:14px;line-height:1.4;color:var(--st-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-buy{display:flex;align-items:center;gap:14px;flex:none}
.st-price{font-size:13.5px;color:var(--st-soft);white-space:nowrap}
.st-price b{font-size:17px;font-weight:600;color:var(--st-ink);margin-right:4px}
.st-add,.sp-add{min-height:44px;padding:0 20px;border-radius:999px;font-size:14.5px;font-weight:600;transition:background var(--t2),color var(--t2),transform var(--t2) var(--ease)}
.st-add{box-shadow:inset 0 0 0 1.5px var(--st-ink);color:var(--st-ink)}
@media (hover:hover){.st-add:hover,.sp-add:hover{background:var(--juice-500);color:var(--forest-950);box-shadow:none}}
.st-add:active,.sp-add:active{transform:scale(.96)}
.st-add.is-busy,.sp-add.is-busy{opacity:.55;pointer-events:none}
.st-add.is-done,.sp-add.is-done{background:var(--leaf);color:var(--cream-50)}
.st-sw{position:relative;display:flex;justify-content:center;margin-top:clamp(10px,1.8vh,16px)}
.sw{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;transition:box-shadow var(--t2)}
.sw i{width:17px;height:17px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);transition:transform var(--t2) var(--ease)}
.sw:hover i{transform:scale(1.2)}
.sw[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--st-ink)}
html[data-phase=evening] .sw i,html[data-phase=night] .sw i{box-shadow:0 0 0 1.5px rgba(251,249,243,.3)}
/* a swatch says its juice when you point at it */
.sw{position:relative}
.sw::after{content:attr(aria-label);position:absolute;z-index:3;left:50%;top:calc(100% + 2px);translate:-50% -4px;padding:4px 10px;border-radius:999px;background:var(--st-ink);color:var(--st-a);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--t1),translate var(--t2) var(--ease)}
@media (hover:hover){.sw:hover::after{opacity:1;translate:-50% 0}}
.sw:focus-visible::after{opacity:1;translate:-50% 0}
.st-foot{display:grid;grid-template-columns:minmax(252px,.8fr) minmax(0,1.6fr) auto;gap:clamp(20px,3vw,48px);align-items:center;margin:0 max(var(--gut),calc((100% - var(--max)) / 2));padding:clamp(12px,2vh,18px) 0 clamp(14px,2.4vh,22px);border-top:1px solid var(--st-line)}
.st-home .st-foot{grid-template-columns:minmax(230px,.6fr) minmax(0,2fr);margin-inline:max(var(--gut),calc((100% - var(--max)) / 2))}
/* ── The home hero (parts/hero.php): one clear offer over a full-width photo, two more take turns. The bar under it
   names them (its line is the timer) and carries the press clock. Always in daylight: the photos are. ── */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;background:var(--cream-100);color:var(--forest-950)}
.hero-s{grid-area:1/1;position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(520px,calc(100svh - var(--hdr) - 66px),760px);overflow:clip;visibility:hidden}
.hero-s.on{visibility:visible;z-index:2}
/* Turning: the last offer stays put underneath (.was) while the next photo is drawn across it from the right and
   settles; its words leave first, the new ones rise line by line. Nothing cross-fades, so nothing overlaps. */
.hero-s.was{visibility:visible;z-index:1}
.hero-s.was .hero-copy{opacity:0;transition:opacity .22s linear}
.hero-pic{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-pic img{width:100%;height:100%;object-fit:cover;object-position:84% 36%}
.hero-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cream-100) 0,color-mix(in srgb,var(--cream-100) 92%,transparent) 38%,transparent 66%)}
.hero.is-live .hero-s.on .hero-pic{animation:hero-wipe 1.05s cubic-bezier(.7,0,.2,1) both}
.hero.is-live .hero-s.on .hero-pic img{animation:hero-settle 2.4s var(--out) both}
.hero.is-live .hero-s.on .hero-copy>*{animation:hero-rise .8s var(--out) both;animation-delay:calc(.34s + var(--k,0) * .07s)}
.hero-copy>:nth-child(2){--k:1}.hero-copy>:nth-child(3){--k:2}.hero-copy>:nth-child(4){--k:3}.hero-copy>:nth-child(5){--k:4}
@keyframes hero-wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes hero-settle{from{transform:scale(1.12) translateX(2.5%)}}
@keyframes hero-rise{from{opacity:0;transform:translateY(22px)}}
.hero-in{width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin-inline:auto;padding:clamp(28px,5vh,56px) var(--gut)}
.hero-copy{max-width:min(580px,48vw)}
.hero-eye{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 12px;border-radius:999px;background:color-mix(in srgb,var(--juice-500) 20%,var(--cream-50));font-size:13.5px;font-weight:600;line-height:1.3}
.hero-eye i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--juice-600)}
.hero-h{margin-top:clamp(14px,2.2vh,22px);font-size:clamp(40px,min(5vw,8.8svh),76px);line-height:1;letter-spacing:-.045em}
.hero-p{margin-top:clamp(14px,2.2vh,20px);max-width:46ch;font-size:clamp(16px,1.25vw,18.5px);line-height:1.5;color:#3F4D43}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(20px,3.4vh,32px)}
.hero-alt{font-weight:600;font-size:15.5px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:color-mix(in srgb,var(--forest-950) 35%,transparent);transition:text-decoration-color var(--t2)}
.hero-alt:hover{text-decoration-color:var(--juice-500)}
/* Three promises under the button: each a small round mark and two lines. While the offer is on screen they light
   up one after another, in step with the timer in the bar below (and they hold when it holds). */
.hero-ticks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(22px,3.6vh,34px);padding-top:clamp(16px,2.4vh,22px);border-top:1px solid color-mix(in srgb,var(--forest-950) 12%,transparent)}
.hero-ticks li{display:grid;align-content:start;gap:10px;padding:0 16px}
.hero-ticks li:first-child{padding-left:0}
.hero-ticks li+li{border-left:1px solid color-mix(in srgb,var(--forest-950) 12%,transparent)}
.hero-tick-ic{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--cream-50);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--forest-950) 12%,transparent);color:var(--forest-700)}
.hero-tick-ic .ic{width:19px;height:19px}
.hero-tick-ic::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--juice-500) 50%,transparent)}
.hero-tick-t{display:grid;gap:2px;min-width:0;padding-top:1px}
.hero-tick-t b{font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.hero-tick-t small{font-size:13px;line-height:1.35;color:var(--muted)}
.hero-s.on .hero-tick-ic{animation:tick-lit 6.5s var(--ease) calc(var(--n) * 2.1s + .5s) forwards}
.hero-s.on .hero-tick-ic::after{animation:tick-ring 6.5s var(--out) calc(var(--n) * 2.1s + .5s) forwards}
.hero-s.on .hero-tick-ic .ic{animation:tick-pop 6.5s var(--out) calc(var(--n) * 2.1s + .5s) forwards}
.hero.is-held .hero-tick-ic,.hero.is-held .hero-tick-ic::after,.hero.is-held .hero-tick-ic .ic{animation-play-state:paused}
@keyframes tick-lit{0%,30%{background:var(--juice-500);box-shadow:inset 0 0 0 1px var(--juice-500);color:var(--forest-950)}38%,100%{background:var(--cream-50);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--forest-950) 12%,transparent);color:var(--forest-700)}}
@keyframes tick-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--juice-500) 50%,transparent)}14%,100%{box-shadow:0 0 0 11px transparent}}
@keyframes tick-pop{0%{transform:scale(.6) rotate(-14deg)}7%{transform:scale(1.14)}12%,100%{transform:none}}
.hero-bar{grid-area:2/1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 32px;min-height:66px;padding:8px max(var(--gut),calc((100% - var(--max)) / 2));background:var(--cream-50);box-shadow:0 1px 0 var(--line)}
.hero-dots{display:flex;gap:2px;margin-left:-14px}
.hero-dots button{position:relative;min-height:44px;padding:0 14px;font-size:14.5px;font-weight:600;color:var(--muted);transition:color var(--t2)}
.hero-dots button:hover,.hero-dots [aria-current=true]{color:var(--forest-950)}
.hero-dots i{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.hero-dots i::after{content:"";position:absolute;inset:0;background:var(--juice-500);transform:scaleX(0);transform-origin:0 50%}
.hero-dots .on i::after{animation:hero-fill 6.5s linear forwards}
.hero.is-held .hero-dots .on i::after{animation-play-state:paused}
@keyframes hero-fill{to{transform:scaleX(1)}}
.hero-clock{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;--st-soft:var(--muted);--st-ink:var(--forest-950)}
.hero-clock .clock-k{color:var(--leaf-ink)}
.hero-clock .clock-press{display:none}
.hero-clock .clock-day{margin:0;font-size:16px;letter-spacing:-.015em}
.hero-clock .clock-by{margin:0;font-size:14px}
@media (max-height:760px) and (min-width:761px){.hero-tick-t small{display:none}.hero-ticks li{grid-template-columns:auto minmax(0,1fr);align-items:center}}
/* Phones: the photo, then only what's needed to act. The three names sit on the photo as chips (the lit one is the
   timer), a swipe turns them (bo.js), the long sentences stay on the desktop, and the header already says the next drop. */
@media (max-width:760px){
  .hero{--ph:.86} /* the photo's height, as a share of the screen's width */
  .hero-s{flex-direction:column;align-items:stretch;min-height:0}
  .hero-pic{position:relative;flex:none;display:block;aspect-ratio:1/var(--ph);z-index:0}
  .hero-pic img{object-position:50% 30%}
  .hero-pic::after{display:none}
  .hero-in{flex:1;display:flex;padding:20px 18px 24px}
  .hero-copy{flex:1;display:flex;flex-direction:column;max-width:none}
  .hero-eye,.hero-s:first-of-type .hero-more{display:none} /* the first offer says the most, so its long sentence stays on the desktop; the other two keep theirs and all three end level */
  .hero-h{font-size:clamp(34px,10.2vw,46px);margin-top:0}
  .hero-p{font-size:16px;margin-top:10px;max-width:34ch}
  .hero-cta{margin-top:18px;gap:6px 18px}
  .hero-cta .btn{flex:1 1 100%}
  .hero-alt{flex:1 1 100%;display:grid;place-items:center;min-height:44px;font-size:15px}
  .hero-ticks{margin-top:auto;padding-top:16px}
  .hero-cta{margin-bottom:10px}
  .hero-ticks li,.hero-ticks li:first-child{justify-items:center;gap:8px;padding:0 6px;text-align:center}
  .hero-tick-t small{display:none}
  .hero-tick-t b{font-size:13px;letter-spacing:-.01em}
  .hero-bar{grid-area:auto;position:absolute;z-index:3;left:0;right:0;top:0;height:calc(100vw * var(--ph));min-height:0;padding:0 14px 14px;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;background:none;box-shadow:none;pointer-events:none}
  .hero-dots{margin:0;gap:6px;pointer-events:auto}
  .hero-dots button{min-height:36px;padding:0 14px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--cream-50) 74%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);color:var(--forest-950);font-size:13.5px;transition:background var(--t2)}
  .hero-dots button::before{content:"";position:absolute;inset:-4px 0} /* 44 px to tap */
  .hero-dots [aria-current=true]{background:var(--cream-50)}
  .hero-dots i{left:0;right:0;bottom:0;height:3px;border-radius:0;background:none}
  .hero .hero-clock{display:none}
}

/* ── Gift (page-gift.php): the same shop, sent to someone else ── */
.gift{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,100px);align-items:center;padding-block:clamp(32px,4vw,64px) clamp(56px,6vw,96px)}
.gift-photo{margin:0;aspect-ratio:909/898;border-radius:var(--r-24);overflow:hidden;background:var(--sand)}
.gift-photo img{width:100%;height:100%;object-fit:cover}
.gift .h2{margin-bottom:clamp(18px,2vw,28px);font-size:clamp(30px,3.4vw,52px)}
.gift-who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);border-top:2px solid var(--forest-950);padding-top:22px}
.gift-who h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.03em;margin:8px 0 6px}
.gift-who p{color:var(--muted);font-size:15.5px}
.gift-who .stamp{color:var(--muted)}
.gift-who a{text-decoration:underline;text-underline-offset:3px}
.gift-own{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(28px,3vw,44px)}
@media (max-width:900px){
  .gift{grid-template-columns:minmax(0,1fr)}
  .gift-who{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
}
@media (max-width:480px){.gift-who{grid-template-columns:minmax(0,1fr)}}

/* ── A size that isn't on sale yet (750 ml · coming soon): the upgrade row with a lock where the switch was ── */
.pcard-soon{cursor:pointer}
.pcard-soon .up-lock{flex:none;display:grid;place-items:center;width:36px;height:22px;border-radius:999px;background:color-mix(in srgb,var(--forest-950) 9%,transparent);color:var(--muted);transition:background var(--t2),color var(--t2)}
.pcard-soon .up-lock .ic{width:13px;height:13px}
.pcard-soon:hover .up-lock,.pcard-soon.is-on .up-lock{background:var(--juice-500);color:var(--forest-950)}
.pcard-soon .up-yes,.pcard-soon.is-on .up-ask{display:none}
.pcard-soon.is-on .up-yes{display:block}
.pcard-soon.is-on{cursor:default}
.ftr-soon{margin-top:14px;font-size:13.5px;opacity:.7}

/* The press clock */
.clock-k{display:flex;flex-wrap:wrap;gap:0 10px;color:var(--st-soft)}
.clock-press::before{content:"·";margin-right:10px}
.clock-press:empty,.st-foot .clock-press{display:none}
.clock-day{margin-top:5px;font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.clock-by{margin-top:3px;font-size:13.5px;line-height:1.35;color:var(--st-soft)}
.clock-left{color:var(--st-ink);font-weight:600;margin-left:6px}
.clock-left::before{content:"·";margin-right:6px;font-weight:400}
/* The Fill: a level that rises with a soft meniscus (bo_fill). One per screen, never decoration. */
.fill{position:relative;display:block;height:12px;border-radius:999px;background:color-mix(in srgb,var(--forest-950) 9%,transparent);overflow:hidden;isolation:isolate}
.fill i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 100%);min-width:12px;background:var(--fill-c,var(--leaf));border-radius:inherit;transition:width var(--t3) var(--ease),background var(--t3)}
.fill i::after{content:"";position:absolute;right:-5px;top:-14%;bottom:-14%;width:11px;border-radius:50%;background:inherit;box-shadow:inset -1px 0 2px rgba(255,255,255,.34);animation:slosh 4.8s ease-in-out infinite alternate}
@keyframes slosh{from{transform:scaleX(.7)}to{transform:scaleX(1.25)}}
@media (prefers-reduced-motion:reduce){.fill i::after{animation:none}}

/* The Day Line */
.dl{min-width:0;padding-top:20px}
.dl-track{position:relative;height:6px;border-radius:9px;background:color-mix(in srgb,currentColor 13%,transparent)}
.dl-win{position:absolute;top:0;bottom:0;left:var(--a);width:calc(var(--b) - var(--a));border-radius:9px;background:color-mix(in srgb,currentColor 22%,transparent)}
.dl-fill{position:absolute;left:0;top:0;bottom:0;width:var(--now);min-width:6px;border-radius:9px;background:var(--c);transition:width var(--t3) var(--ease),background var(--t3)}
.dl-now{position:absolute;top:50%;left:var(--now);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--st-a);box-shadow:0 0 0 2.5px var(--c),0 2px 8px var(--st-shadow);transition:left var(--t3) var(--ease)}
.dl-now b{position:absolute;bottom:17px;left:7px;font:500 11px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;transform:translateX(calc(var(--now) * -1))}
.dl-st{position:relative;height:32px;margin-top:9px;color:var(--st-soft)}
.dl-st li{position:absolute;left:var(--a);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:12px;line-height:1.3;white-space:nowrap}
.dl-st b{font-weight:600;color:var(--st-ink)}
.dl-st .dl-first{transform:none;align-items:flex-start}
.dl-st .dl-last{transform:translateX(-100%);align-items:flex-end}
.dl-st .dl-last .dl-x{display:none} /* short, so it never runs into the evening drop's label on a narrow line */

/* Same again: a returning customer's strip under the stage */
.same{display:flex;align-items:center;gap:12px;margin-block:0 0;padding:10px 0;font-size:15px}
.same p{flex:1;min-width:0;line-height:1.3;color:var(--muted)}
.same b{color:var(--forest-950);font-weight:600}
.same .pill-fan span{box-shadow:0 0 0 2.5px var(--cream-100)}
.same .btn{flex:none}

/* Sections share one rhythm */
.nil{padding:clamp(72px,8vw,128px) 0 clamp(48px,6vw,88px)}
.nil-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:14px;border-bottom:6px solid var(--forest-950)}
.nil-t{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.04em}
.nil-top .stamp{color:var(--muted)}
.nil-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.nil-grid>div{display:flex;flex-direction:column;padding:clamp(14px,1.6vw,22px) clamp(14px,2vw,30px) clamp(10px,1.4vw,18px);border-left:1px solid var(--line)}
.nil-grid>div:first-child{border-left:0;padding-left:0}
.nil-grid dt{font-size:clamp(15px,1.3vw,19px);font-weight:600;letter-spacing:-.015em}
.nil-grid dd{font-size:clamp(110px,19vw,300px);font-weight:600;letter-spacing:-.04em;line-height:.92;color:var(--forest-950);margin-top:clamp(4px,1vw,14px)}
.roll{display:inline-block;height:1em;overflow:hidden;vertical-align:bottom;padding-right:.08em}
.roll-in{display:block;transform:translateY(-90%)}
.js .roll-in{transform:none}
.roll-in span{display:block;height:1em;line-height:1}
.pnil .nil-foot{justify-content:flex-end}
.nil-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 32px;padding-top:16px;border-top:1px solid var(--forest-950)}
.nil-ing{font-size:clamp(16px,1.3vw,19px)}
.nil-ing b{font-weight:600}
.nil-dates{display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--muted)}

/* How your next bottle gets made: four stations on one line. The line draws itself station by station when the
   section arrives (bo.js adds .is-in); without a script it is simply drawn. Photos share one 4:5 frame, so nothing overlaps. */
.how{--how-gap:clamp(16px,2vw,32px);padding:var(--sec) 0;background:var(--cream-200)}
.how-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(36px,4.4vw,68px)}
.how-head .h2{max-width:12ch}
.how-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--how-gap)}
.how-step{min-width:0;display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
.how-tick{position:relative;display:flex;align-items:flex-start;gap:12px;padding-top:28px;margin-bottom:16px;color:var(--muted)}
.how-tick::before{content:"";position:absolute;z-index:1;left:0;top:0;width:15px;height:15px;border-radius:50%;background:var(--cream-200);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--forest-950) 24%,var(--cream-200));transition:box-shadow .4s var(--ease) calc(var(--i) * .32s + .1s)}
.how-tick::after{content:"";position:absolute;left:0;right:calc(-1 * var(--how-gap));top:6.5px;height:2px;border-radius:2px;background:linear-gradient(var(--forest-700) 0 0) 0 0/var(--w,100%) 100% no-repeat,color-mix(in srgb,var(--forest-950) 12%,transparent);transition:background-size .5s linear calc(var(--i) * .32s)}
.how-step:last-child .how-tick::after{right:0}
.how-tick .stamp{color:var(--muted)}
.how-n{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--forest-950)}
.how.is-in .how-tick::before,html:not(.js) .how-tick::before{box-shadow:inset 0 0 0 4.5px var(--forest-700)}
.js .how:not(.is-in) .how-tick::after{--w:0%}
.how-img{aspect-ratio:4/5;border-radius:var(--r-16);overflow:hidden;background:var(--cream-100)}
.how-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
@media (hover:hover){.how-step:hover .how-img img{transform:scale(1.045)}}
.how-step h3{font-size:clamp(22px,1.9vw,30px);letter-spacing:-.035em;line-height:1.08;margin:22px 0 8px}
.how-p{max-width:34ch;color:var(--muted);font-size:15.5px;line-height:1.5}
.how-step>.stamp{display:block;margin-top:12px;color:var(--muted)}

/* The Spectrum: every juice as a tall colour field; the one you point at opens up */
.sp{padding:clamp(72px,8vw,128px) 0 clamp(56px,6vw,96px);overflow:hidden}
.sp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(24px,3vw,44px)}
.sp-head .h2{max-width:10ch}
.sp-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.sp-row{display:flex;height:clamp(520px,78svh,760px);overflow:hidden}
.sp-f{position:relative;flex:1 1 0;min-width:0;background:var(--c);color:var(--on);overflow:hidden;transition:flex-grow var(--t3) var(--ease)}
.sp-f.on,.sp-f:focus-within{flex-grow:6}
.sp-link{position:absolute;inset:0;display:block}
.sp-i{position:absolute;left:50%;top:20px;translate:-50% 0;opacity:.72;transition:opacity var(--t2)}
.sp-f.on .sp-i,.sp-f:focus-within .sp-i{opacity:0}
.sp-v{position:absolute;left:50%;top:48px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-size:clamp(14px,1.15vw,17px);font-weight:600;letter-spacing:-.01em;white-space:nowrap;transition:opacity var(--t2)}
.sp-f.on .sp-v,.sp-f:focus-within .sp-v{opacity:0}
.sp-img{position:absolute;left:50%;bottom:22px;width:min(76%,92px);height:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 12px 14px rgba(14,31,20,.3));transition:width var(--t3) var(--ease),left var(--t3) var(--ease),bottom var(--t3) var(--ease),translate var(--t2) var(--ease)}
.sp-f:not(.on):hover .sp-img{translate:0 -12px}
.sp-f:not(.on):hover .sp-v{translate:0 -4px}
.sp-f.on .sp-img,.sp-f:focus-within .sp-img{width:48%;left:74%;bottom:5%}
.sp-more{position:absolute;left:clamp(18px,2vw,30px);top:clamp(18px,2vw,30px);bottom:clamp(18px,2vw,30px);width:min(44%,200px);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity var(--t2),visibility 0s var(--t2);pointer-events:none}
.sp-f.on .sp-more,.sp-f:focus-within .sp-more{opacity:1;visibility:visible;transition:opacity var(--t2) .16s,visibility 0s;pointer-events:auto}
.sp-k{opacity:.72;margin-bottom:12px}
.sp-name{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.04em;line-height:1.02}
.sp-line{margin-top:10px;font-size:15px;line-height:1.4}
.sp-ing{margin-top:14px;padding-top:12px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);font-size:13px;line-height:1.5;opacity:.86}
/* the open panel arrives line by line */
.sp-more>*{transition:opacity var(--t2),translate var(--t3) var(--ease)}
.sp-f:not(.on):not(:focus-within) .sp-more>*{opacity:0;translate:0 10px}
.sp-f.on .sp-more>:nth-child(2),.sp-f:focus-within .sp-more>:nth-child(2){transition-delay:.04s}
.sp-f.on .sp-more>:nth-child(3),.sp-f:focus-within .sp-more>:nth-child(3){transition-delay:.08s}
.sp-f.on .sp-more>:nth-child(4),.sp-f:focus-within .sp-more>:nth-child(4){transition-delay:.12s}
.sp-f.on .sp-more>:nth-child(5),.sp-f:focus-within .sp-more>:nth-child(5){transition-delay:.16s}
/* on a juice field the hover is ink, not orange: orange on Morning or Citrus splash would vanish */
@media (hover:hover){.sp-f .sp-add:hover{background:var(--forest-950);color:var(--cream-50)}}
.sp-dots{display:none}
.sp-buy{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sp-price{font-size:14px}
.sp-price b{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-right:4px}
.sp-add{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--cream-50);color:var(--forest-950)}
.sp-add .ic{width:15px;height:15px}
.sp-shots{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:12px clamp(12px,1.6vw,24px);margin-top:clamp(20px,2.4vw,32px)}
.sp-shots-h{font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.025em;max-width:16ch;line-height:1.2}
.shot{display:flex;align-items:center;gap:14px;padding:8px 10px 8px 12px;border-radius:var(--r-16);background:var(--tint);color:var(--ink)}
.shot-a{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.shot-a img{width:auto;height:58px}
.shot-a span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.shot-a b{font-weight:600;font-size:15.5px}
.shot-a small{font-size:13px;color:color-mix(in srgb,var(--ink) 78%,var(--tint))}
.shot-p{font-weight:600}
.shot .sp-add{background:var(--forest-700);color:var(--cream-50)}
@media (hover:hover){.shot .sp-add:hover{background:var(--juice-500);color:var(--forest-950)}}

/* After 4 pm: the page's dark, warm room */
.four-in{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(40px,6vw,96px) max(var(--gut),calc((100vw - var(--max)) / 2));color:var(--cream-50);background:radial-gradient(60% 90% at 86% 34%,rgba(249,156,36,.3),transparent 72%),radial-gradient(70% 90% at 0 110%,#2C4B2F,transparent 70%),var(--forest-950)}
.four-k{color:var(--juice)}
.four .h2{margin-top:14px;max-width:11ch}
.four .lead{margin-top:18px;max-width:46ch;color:#D2D8CA}
.four-picks{display:flex;gap:8px;margin:clamp(20px,2.4vw,30px) 0}
.four-picks a{display:flex;flex-direction:column;align-items:center;gap:6px;width:92px;padding:10px 6px 8px;border-radius:var(--r-16);background:color-mix(in srgb,var(--cream-50) 8%,transparent);font-size:13px;text-align:center;line-height:1.2;transition:background var(--t2)}
.four-picks a:hover{background:color-mix(in srgb,var(--cream-50) 15%,transparent)}
.four-picks img{height:92px;width:auto}
.four-picks b{font-weight:500}
.four .link-arrow{color:var(--cream-50)}
.four-photo{margin:0;border-radius:999px 999px var(--r-24) var(--r-24);overflow:hidden;aspect-ratio:4/5;max-height:min(680px,82svh);justify-self:center;background:var(--forest-900)}
.four-photo img{width:100%;height:100%;object-fit:cover}

/* Your habit */
.hab-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,6vw,110px);align-items:start}
.hab-l .h2{max-width:11ch}
.hab-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(4px,.6vw,9px);margin-top:clamp(24px,3vw,44px)}
.hab-grid .o{width:100%;height:auto;aspect-ratio:1;--or:var(--forest-700);--oj:var(--leaf-500)}
.hab-grid span:nth-child(10n) .o{--oj:var(--juice)} /* every tenth day: the one spot of orange */
.hab-grid .o .o-ring{opacity:.16}
.hab-grid .on .o-ring{opacity:1}
.hab-count{display:block;margin-top:16px;color:var(--muted)}
.hab-count b{font-weight:500;color:var(--forest-950)}
.hab-r{padding-top:clamp(0px,1vw,14px)}
.hab-r .lead{max-width:40ch}
.hab-sizes{margin:clamp(18px,2.4vw,30px) 0 clamp(20px,2.6vw,32px);border-top:1px solid var(--forest-950)}
.hab-sizes a{display:grid;grid-template-columns:minmax(clamp(58px,6vw,84px),auto) 1fr auto auto;align-items:baseline;gap:6px 14px;padding:12px 4px;border-bottom:1px solid var(--line);transition:padding var(--t2) var(--ease),background var(--t2)}
.hab-sizes a:hover{padding-left:12px;background:var(--cream-50)}
.hab-sizes b{font-size:clamp(32px,3.2vw,46px);font-weight:600;letter-spacing:-.05em;line-height:1}
.hab-sizes span{font-size:14.5px;color:var(--muted)}
.hab-sizes .hab-p{color:var(--ink);font-weight:500}
.hab-sizes em{min-width:72px;text-align:right;font-size:14.5px;font-weight:600;color:var(--leaf-ink)}

/* Reviews, the kiosk */
.reviews-home{padding-top:0}
.kio{padding:clamp(24px,3vw,48px) 0 clamp(64px,7vw,112px)}
.kio-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,6vw,110px);align-items:center}
.kio-photo{margin:0;aspect-ratio:1/1.02;border-radius:var(--r-24);overflow:hidden;background:var(--sand)}
.kio-photo img{width:100%;height:100%;object-fit:cover}
.kio-copy .h2{max-width:9ch;margin-bottom:16px}
.kio-copy .lead{margin:16px 0 22px;max-width:40ch}
.kio-copy .ctas{gap:12px 26px}

/* The shop: a short stage, chips, then one long shelf. Bottles stand on a line; colour pours up behind the one you point at. */
.st-shop{min-height:0;margin-bottom:0;grid-template-rows:auto auto}
.st-shop-in{--px:max(var(--gut),calc((100% - var(--max)) / 2));display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);align-items:end;gap:clamp(20px,4vw,72px);padding:clamp(28px,7vh,84px) var(--px) clamp(24px,4vh,44px)}
.st-shop .st-h{font-size:clamp(46px,min(7.6vw,17svh),124px)}
.st-lead-s{font-size:clamp(15.5px,1.2vw,18px);line-height:1.5;color:var(--st-soft)}
.st-quiz{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-weight:600;font-size:15.5px;color:var(--st-ink)}
.st-quiz .arrow{width:18px;height:18px;transition:transform var(--t2) var(--ease)}
.st-quiz:hover .arrow{transform:translateX(4px)}
.st-foot-2{display:block}
.st-foot-2 .clock,.pst-foot .clock{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}
.st-foot-2 .clock-k,.pst-foot .clock-k{display:none}
.st-foot-2 .clock-day,.pst-foot .clock-day{margin:0;font-size:16px;letter-spacing:-.015em}
.st-foot-2 .clock-by,.pst-foot .clock-by{margin:0;font-size:14px}
.shop{padding-bottom:clamp(40px,5vw,72px)}
.chips{position:sticky;top:var(--hdr);z-index:20;display:flex;align-items:center;gap:8px;margin:clamp(18px,2.2vw,30px) calc(-1 * var(--gut)) clamp(10px,1.4vw,18px);padding:10px var(--gut);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:color-mix(in srgb,var(--cream-100) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:box-shadow var(--t2)}
.chips.is-stuck{box-shadow:0 1px 0 var(--line)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:999px;font-size:15px;font-weight:500;color:var(--forest-950);box-shadow:inset 0 0 0 1px var(--line);transition:background var(--t2),color var(--t2),box-shadow var(--t2),scale var(--t1)}
@media (hover:hover){.chip:not([aria-current]):hover{box-shadow:inset 0 0 0 1px var(--forest-700);background:var(--cream-50)}}
.chip:active{scale:.97}
.chip[aria-current]{background:var(--forest-700);color:var(--cream-50);box-shadow:none}
.chip small{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;transition:color var(--t2)}
.chip[aria-current] small{color:color-mix(in srgb,var(--cream-50) 72%,transparent)}
.chip-gap{margin-left:17px;position:relative}
.chip-gap::before{content:"";position:absolute;left:-13px;top:12px;bottom:12px;width:1px;background:var(--line)}
.chip-box{margin-left:auto;box-shadow:none;padding-inline:10px 6px;font-weight:600;color:var(--forest-700)}
.chip-box .arrow{width:16px;height:16px;transition:transform var(--t2) var(--ease)}
.chip-box:hover .arrow{transform:translateX(3px)}
.shop-grid{--rg:clamp(56px,5.4vw,88px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--rg) clamp(20px,2.6vw,40px)}
.shelf-h{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;margin:clamp(8px,1vw,16px) 0 calc(-1 * var(--rg) + clamp(14px,1.6vw,22px));padding-bottom:14px;border-bottom:1px solid var(--line);font-size:clamp(24px,2.2vw,32px);letter-spacing:-.035em}
.shelf-h small{font-size:14.5px;font-weight:500;letter-spacing:0;color:var(--muted)}
.shelf-h:first-child{margin-top:clamp(8px,1.4vw,20px)}
.shop-none{display:grid;justify-items:start;gap:10px;padding:clamp(40px,6vw,80px) 0}
.shop-more{margin-top:clamp(36px,4.4vw,64px)}
.price{font-weight:600;font-size:16px;white-space:nowrap}
.price .from{font-weight:400;font-size:13.5px;color:var(--muted)}
.price del{color:var(--muted);font-weight:400;font-size:.85em;margin-right:6px}
.price ins{text-decoration:none}
.price.tick{animation:tick .45s var(--out)}
.pcard{position:relative;display:flex;flex-direction:column;min-width:0}
.pcard-media{position:relative;display:block;aspect-ratio:1/1.06;overflow:hidden;isolation:isolate}
.pcard-media::after{content:"";position:absolute;z-index:-1;left:50%;bottom:7%;width:44%;height:14px;translate:-50% 50%;border-radius:50%;background:radial-gradient(closest-side,rgba(14,31,20,.2),transparent);transition:scale var(--t3) var(--ease),opacity var(--t3)}
.pcard-shot .pcard-media::after{width:28%}
.pcard-media .pimg{position:absolute;left:50%;bottom:8%;height:76%;width:auto;max-width:none;translate:-50% 0;object-fit:contain;transform-origin:50% 100%;filter:drop-shadow(0 10px 14px rgba(14,31,20,.14));transition:transform var(--t3) var(--ease),scale var(--t3) var(--ease)}
.pcard.is-big .pimg{scale:1.05}
.pcard-shot .pcard-media{aspect-ratio:1/.78}
.pcard-shot .pimg{height:70%;bottom:10%}
.is-out .pimg{filter:saturate(.3);opacity:.62}
@media (hover:hover){
  .pcard:hover .pimg{transform:translateY(-10px) rotate(-1.5deg)}
  .pcard:hover .pcard-media::after{scale:.8;opacity:.6}
  .pcard:hover :is(.pcard-save,.pcard-qv){opacity:1;transform:none}
  .pcard-qv,.pcard-save{opacity:0;transform:translateY(-4px)}
  .pcard-qv:focus-visible,.pcard-save:focus-visible,.pcard-save[aria-pressed=true]{opacity:1;transform:none}
}
.pcard-best,.pcard-out{position:absolute;left:clamp(10px,1.2vw,16px);top:12px;padding:5px 11px;border-radius:999px;background:var(--juice);color:var(--forest-950);font-size:12px;font-weight:600}
.pcard-out{background:var(--forest-950);color:var(--cream-50)}
.pcard-save,.pcard-qv{position:absolute;z-index:4;right:clamp(10px,1.2vw,16px);display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:999px;background:var(--cream-50);color:var(--forest-950);box-shadow:0 0 0 1px var(--line);font-size:13px;font-weight:600;transition:opacity var(--t2),transform var(--t2) var(--ease)}
.pcard-qv{top:12px;padding:0 14px}
.pcard-save{top:58px;width:38px}
.pcard-qv .ic,.pcard-save .ic,.pdp-acts .ic{width:18px;height:18px}
[data-save][aria-pressed=true] .ic{--ic-fill:var(--juice);color:var(--juice-600);animation:save-pop .45s var(--out)}
@keyframes save-pop{40%{transform:scale(1.3)}}
.pcard-body{display:flex;flex-direction:column;flex:1;padding:18px 0 0}
.pcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pcard-title{font-size:clamp(18px,1.6vw,22px);letter-spacing:-.025em;line-height:1.15}
.pcard-line{margin-top:4px;font-size:14px;line-height:1.4;color:var(--muted)}
.pcard-buy{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:16px}
.pcard-up{flex:1 0 100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:8px 0;border-top:1px solid var(--line);text-align:left}
.up-txt{min-width:0}
.up-txt>span{display:block}
.up-txt b{display:block;font-size:13.5px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--forest-950)}
.up-txt small{display:block;margin-top:1px;font-size:12px;line-height:1.25;color:var(--muted)}
.up-txt .amount{color:inherit}
.up-val i{font-style:normal}
.up-on,.pcard-up[aria-checked=true] .up-off{display:none!important}
.pcard-up[aria-checked=true] .up-on{display:block!important}
.up-sw{flex:none;position:relative;width:36px;height:22px;border-radius:999px;background:color-mix(in srgb,var(--forest-950) 22%,transparent);transition:background var(--t2)}
.up-sw i{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--cream-50);box-shadow:0 1px 2px rgba(14,31,20,.3);transition:transform var(--t2) var(--ease)}
.pcard-up[aria-checked=true] .up-sw{background:var(--forest-700)}
.pcard-up[aria-checked=true] .up-sw i{transform:translateX(14px)}
.pcard-size1{flex:1;font-size:13px;font-weight:600;color:var(--muted)}
.pcard-btns{flex:1 1 0;display:flex;min-width:0}
.btn-add{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--forest-700);color:var(--forest-700);font-weight:600;font-size:14.5px;transition:background var(--t2),color var(--t2),scale var(--t1)}
.btn-add .ic{width:16px;height:16px}
@media (hover:hover){.btn-add:hover{background:var(--juice-500);color:var(--forest-950);box-shadow:inset 0 0 0 1.5px var(--juice-500)}}
.btn-add:active{scale:.97}
.btn-add.is-busy{pointer-events:none}
.btn-add.is-done{background:var(--leaf);color:var(--cream-50);box-shadow:none}
.pcard-tell{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--forest-700);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pcard-step{flex:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:44px;padding:0 3px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--forest-700);background:var(--cream-50)}
.pcard-step b{text-align:center;font-size:15.5px}
.pcard-step button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;transition:background var(--t1)}
.pcard-step button:hover{background:var(--cream-200)}
.pcard-step.is-busy{opacity:.55;pointer-events:none}
.pcard-step:not([hidden]){animation:step-in var(--t2) var(--out)}
@keyframes step-in{from{opacity:0;transform:scale(.92)}}
@keyframes tick{from{opacity:0;transform:translateY(-6px)}}
/* The weekly-box card — liquid gradient, five bottles fanned out, sizes ticking over */
.habit{position:relative;display:grid;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);background:var(--deep);color:var(--cream);--fan-x:34%;--fan-r:7deg}
.habit .swirl{z-index:-2}
.habit::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 85% 100%,color-mix(in srgb,var(--juice) 26%,transparent),transparent 70%),linear-gradient(180deg,transparent 40%,rgba(21,43,28,.45))}
.habit-fan{position:relative;display:block;pointer-events:none}
.habit-fan img{position:absolute;left:50%;bottom:-6%;height:92%;width:auto;max-width:none;transform-origin:50% 100%;transform:translateX(calc(-50% + var(--i) * var(--fan-x))) rotate(calc(var(--i) * var(--fan-r)));filter:drop-shadow(0 24px 24px rgba(0,0,0,.35));transition:transform 1s var(--out);animation:bob 5s ease-in-out infinite;animation-delay:calc(var(--i) * .45s)}
.habit:hover{--fan-x:46%;--fan-r:10deg}
@keyframes bob{50%{translate:0 -12px}}
.habit-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(26px,3vw,48px);z-index:1}
.habit-k{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--juice)}
.habit-h{font-size:clamp(28px,2.8vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1.02;max-width:12ch}
.habit-p{color:color-mix(in srgb,var(--cream) 74%,transparent);max-width:380px;font-size:15.5px}
.habit-tick{position:relative;display:block;width:100%;height:1.6em;overflow:hidden;font-size:15px;margin:2px 0 6px}
.habit-tick span{position:absolute;inset:0;display:flex;align-items:center;gap:6px;opacity:0;animation:tick-5 12.5s infinite;animation-delay:calc(var(--i) * 2.5s)}
.habit-tick[data-n="3"] span{animation-name:tick-3;animation-duration:7.5s}
.habit-tick[data-n="4"] span{animation-name:tick-4;animation-duration:10s}
.habit-tick[data-n="6"] span{animation-name:tick-6;animation-duration:15s}
.habit-tick b{font-size:1.25em;color:var(--juice)}
.habit-tick i{display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;margin:0 4px}
@keyframes tick-3{0%{opacity:0;transform:translateY(100%)}5%,30%{opacity:1;transform:none}33.3%,100%{opacity:0;transform:translateY(-100%)}}
@keyframes tick-4{0%{opacity:0;transform:translateY(100%)}4%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-100%)}}
@keyframes tick-5{0%{opacity:0;transform:translateY(100%)}3%,17%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-100%)}}
@keyframes tick-6{0%{opacity:0;transform:translateY(100%)}3%,14%{opacity:1;transform:none}16.6%,100%{opacity:0;transform:translateY(-100%)}}
.habit .btn{margin-top:8px}
.habit:hover .btn::before{transform:none}
.habit:hover .btn{color:var(--night)}
/* shop: wide, bottles on the right */
.habit-wide{grid-column:span 3;grid-template-columns:1.05fr .95fr;min-height:380px;--fan-x:24%;--fan-r:6deg}
.habit-wide:hover{--fan-x:30%;--fan-r:8deg}
.shop-grid:has(.taster) .habit-wide{grid-column:span 2;grid-template-columns:1.15fr .85fr;--fan-x:17%;--fan-r:5deg} /* bloom + taster + this fill the second row */
.shop-grid:has(.taster) .habit-wide:hover{--fan-x:21%;--fan-r:6deg}
.shop-grid:has(.taster) .habit-wide .habit-fan img{height:50%;bottom:8%}
.shop-grid:has(.taster) .habit-wide .habit-h{font-size:clamp(26px,2.3vw,38px)}
@media (max-width:1240px){.shop-grid:has(.taster) .habit-wide{grid-column:1/-1}} /* the grid has 3 columns below ~1240 px */
.habit-wide .habit-fan img{height:66%;bottom:4%}
.habit-wide .habit-copy{justify-content:center}
.habit-wide .habit-fan{order:2}
/* product page: a slim strip */
.habit-strip{display:flex;align-items:center;gap:12px;min-width:0;overflow:visible;border-radius:0;background:none;color:var(--forest-950);--focus:var(--forest)}
.habit-strip::before{display:none}
.habit-strip .habit-copy{display:block;padding:0}
.habit-strip .habit-h{display:inline;font-size:15.5px;letter-spacing:-.015em;max-width:none}
.habit-strip .habit-p{display:inline;margin-left:6px;font-size:14.5px;color:var(--muted)}
/* the taster: six bottles standing together on the shelf */
.taster{display:flex;flex-direction:column;min-width:0;--fan-x:24%;--fan-r:5deg}
.taster:hover{--fan-x:28%;--fan-r:6deg}
.taster-fan{position:relative;aspect-ratio:1/1.06;overflow:hidden;isolation:isolate}
.taster-fan img{position:absolute;left:50%;bottom:9%;height:66%;width:auto;max-width:none;transform-origin:50% 100%;transform:translateX(calc(-50% + var(--i) * var(--fan-x))) rotate(calc(var(--i) * var(--fan-r)));filter:drop-shadow(0 8px 12px rgba(14,31,20,.2));transition:transform var(--t3) var(--ease)}
.taster-copy{padding:18px 0 0;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.taster-k{font:500 11.5px/1.3 "Geist Mono",ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--leaf-ink)}
.taster-h{font-size:clamp(17px,1.5vw,21px);letter-spacing:-.025em;margin-top:2px}
.taster-p{font-size:14px;line-height:1.4;color:var(--muted);margin-top:4px}
.taster-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:6px 0 12px}
.taster-price b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.taster-price s{color:var(--muted);font-size:15px}
.taster-free{font-style:normal;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--leaf) 16%,var(--cream));color:var(--forest)}
.taster .btn{margin-top:auto}
.taster-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,72px);padding-block:clamp(24px,3vw,40px);border-block:1px solid var(--line);--fan-x:30%;--fan-r:6deg}
.taster-wide:hover{--fan-x:36%;--fan-r:8deg}
.taster-wide .taster-fan{aspect-ratio:auto;height:clamp(220px,22vw,320px)}
.taster-wide .taster-fan img{height:80%;bottom:10%}
.taster-wide .taster-copy{padding:0;flex:none;max-width:440px}
.taster-wide .taster-h{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.04em;margin-top:6px}
.taster-wide .taster-p{font-size:15.5px;margin-top:8px}
.taster-wide .taster-price{margin:14px 0 18px}
.taster-wide .btn{width:auto;margin-top:0}
/* ready-made combos: three bottles fanned on the middle juice's colour, the taster beside them */
.combos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(36px,3.4vw,56px) clamp(14px,1.6vw,24px)}
.combo{--fan-x:34%;--fan-r:7deg}
.combo:hover{--fan-x:44%;--fan-r:9deg}
.combo .taster-fan img{height:78%}
.combo-in{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.combo-in li{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;font-weight:600}
.combo-in i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.habit-strip>.arrow{flex:none;width:18px;color:var(--forest-950);transition:transform .5s var(--out)}
.habit-strip:hover>.arrow{transform:translateX(5px)}

/* Visit + delivery */
.pin{display:flex;gap:8px}
.pin input{flex:1;min-width:0;letter-spacing:.04em}
.pin-res{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.pin-res:empty{display:none}
.pin-res b{color:var(--forest)}

/* FAQ: the heading stays beside the questions */
.faq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,110px);align-items:start}
.faq-in>div:first-child{position:sticky;top:calc(var(--hdr) + 28px);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.faq-in .h2{max-width:9ch}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(17px,1.3vw,19px);font-weight:600;letter-spacing:-.015em;cursor:pointer;border-radius:8px}
.qa summary::-webkit-details-marker{display:none}
.qa-x{position:relative;width:20px;height:20px;flex:none}
.qa-x::before,.qa-x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:currentColor;border-radius:2px;transition:transform .5s var(--out)}
.qa-x::after{transform:rotate(90deg)}
.qa[open] .qa-x::after{transform:rotate(0)}
.qa::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--out),content-visibility .5s allow-discrete}
.qa[open]::details-content{block-size:auto}
.qa-a{padding:0 56px 24px 0;color:var(--muted);font-size:16px}

/* ───────────── 7 · shop + product ───────────── */
/* Product page: the stage is the juice. Everything on it takes the ink that reads on that colour. */
.pdp{padding-bottom:clamp(18px,2.4vw,32px)}
.pst{background:radial-gradient(44% 70% at 52% 46%,var(--tint),transparent 76%),var(--st-a)}
.pst-main{--px:max(var(--gut),calc((100% - var(--max)) / 2));display:grid;grid-template-columns:minmax(0,1fr) auto minmax(320px,372px);gap:0 clamp(16px,2.6vw,44px);align-items:center;padding:clamp(10px,2vh,28px) var(--px) 0;min-height:0}
.pst-copy{grid-column:1;grid-row:1;min-width:0;padding-bottom:clamp(12px,3vh,40px)}
.pst-k{color:var(--st-soft);margin-bottom:clamp(14px,2.4vh,24px)}
.pst-k a:hover{color:var(--st-ink)}
.pst-h{font-size:clamp(52px,min(8.8vw,18svh),148px);overflow-wrap:anywhere}
.pst-line{margin-top:clamp(14px,2.4vh,24px);max-width:24ch;font-size:clamp(18px,1.6vw,23px);font-weight:500;line-height:1.3;letter-spacing:-.015em}
.pst-bottle{grid-column:2;grid-row:1;align-self:end;height:100%;max-height:min(640px,calc(100svh - 280px));margin-bottom:clamp(26px,4.4vh,48px);transition:scale var(--t3) var(--ease);transform-origin:50% 100%}
.pst-bottle.is-big{scale:1.05}
.pst-bottle.is-shot{aspect-ratio:auto;width:clamp(180px,20vw,300px)}
.pst-bottle.is-out .st-img{filter:saturate(.45)}
.pst-buy{grid-column:3;grid-row:1;min-width:0;margin-bottom:clamp(12px,3vh,40px)}
.pdp-rating{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:inherit}
.pdp-rating b{font-weight:600}
/* The buy panel: one calm sheet on the stage. Price, then one labelled row per choice, then the two buttons, each
   with room around it; anything that isn't on sale yet waits, closed, under a hairline. */
.pst-buy{display:grid;gap:18px;padding:clamp(20px,1.7vw,26px);border-radius:var(--r-24);background:color-mix(in srgb,var(--cream-50) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cream-50) 70%,transparent),0 30px 60px -44px rgba(14,31,20,.45);color:var(--forest-950);--st-line:var(--line);--st-soft:var(--muted);--st-ink:var(--forest-950)}
.pdp-bought{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:13.5px;font-weight:600;color:var(--leaf-ink)}
.pdp-bought .ic{width:16px;height:16px}
.buy-head{display:grid;gap:6px}
.pdp-price{margin:0;font-size:clamp(34px,2.9vw,42px);font-weight:600;letter-spacing:-.04em;line-height:1}
.pdp-price .amount{color:inherit}
.buy-unit{font-size:14px;color:var(--muted)}
.buy-f{display:grid;gap:9px}
.buy-k{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--muted)}
.buy-q{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding-top:16px;border-top:1px solid var(--line)}
.sizes-pick{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.size{position:relative;display:block;cursor:pointer;font-size:inherit;font-weight:inherit;text-align:left}
.size input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:inherit}
.size>span,.size-soon{display:grid;align-content:center;gap:2px;min-height:60px;padding:9px 14px;border-radius:var(--r-16);box-shadow:inset 0 0 0 1px var(--line);transition:background var(--t2),box-shadow var(--t2),color var(--t2)}
.size b{font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.size small{display:flex;align-items:center;gap:5px;font-size:13px;line-height:1.3;color:var(--muted)}
.size small .amount{color:inherit}
.size small .ic{width:13px;height:13px}
.size input:checked+span{background:var(--white);box-shadow:inset 0 0 0 2px var(--forest-950)}
.size input:checked+span::after{content:"";position:absolute;right:13px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--forest-950) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.4 2.7 2.6L13 6.6' fill='none' stroke='%23FBF9F3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.size input:focus-visible+span,.size-soon:focus-visible{outline:2px solid var(--forest-950);outline-offset:2px}
.size input:disabled+span{opacity:.55}
@media (hover:hover){.size:not(.size-soon):hover input:not(:checked):not(:disabled)+span{box-shadow:inset 0 0 0 1px var(--forest-700)}.size-soon:hover{background:color-mix(in srgb,var(--juice-500) 16%,transparent);box-shadow:inset 0 0 0 1px var(--juice-500)}}
.size-soon{width:100%;color:var(--muted);background:color-mix(in srgb,var(--forest-950) 3.5%,transparent)}
.size-soon b{color:color-mix(in srgb,var(--forest-950) 72%,transparent)}
.size-soon.is-on small{color:var(--leaf-ink)}
.size-best{position:absolute;top:-8px;right:10px;padding:2px 9px;border-radius:999px;background:var(--juice-500);color:var(--forest-950);font-size:11px;font-weight:600;font-style:normal}
.buy-q .stepper{padding:3px;box-shadow:inset 0 0 0 1px var(--line);background:var(--white)}
.buy-q .stepper button{width:40px;height:40px}
.buy-q .stepper b{min-width:34px;font-size:16px}
.buy-row{display:grid;gap:10px}
.buy-row .btn{width:100%}
.buy-row .btn:first-child{justify-content:space-between;padding:0 24px}
.buy-sum{font-variant-numeric:tabular-nums;opacity:.86}
.buy-sum::before{content:"";display:inline-block;width:1px;height:16px;margin-right:14px;vertical-align:-2px;background:currentColor;opacity:.3}
html[data-phase] .pst .btn:not(.btn-stage){--bg:var(--forest-950);--fg:var(--cream-50);--hov:var(--juice-500);--hfg:var(--forest-950);box-shadow:none}
html[data-phase] .pst .btn:not(.btn-stage):hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--forest-950) 20%,transparent)}
.pst .btn-add,.pst .btn .ic{color:inherit}
.pdp-notify{padding-top:14px;border-top:1px solid var(--line)}
.pdp-notify summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;cursor:pointer;border-radius:10px}
.pdp-notify summary::-webkit-details-marker{display:none}
.pdp-notify summary>.ic{width:34px;height:34px;padding:9px;border-radius:50%;background:color-mix(in srgb,var(--forest-950) 6%,transparent);color:var(--forest-700)}
.pdp-notify summary b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.pdp-notify summary small{display:block;font-size:13px;line-height:1.3;color:var(--muted)}
.pdp-notify[open] .qa-x::after{transform:rotate(0)}
.pdp-notify::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--out),content-visibility .45s allow-discrete}
.pdp-notify[open]::details-content{block-size:auto}
.pdp-notify .pin{padding:12px 0 2px;font-size:14.5px;font-weight:500;line-height:1.4}
.pdp-notify .pin input{min-height:48px;padding-inline:16px;border-radius:999px;font-size:15px;letter-spacing:0;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);border:0}
.pdp-notify .pin .btn{min-height:48px;padding:0 20px}
.pst-foot{grid-template-columns:minmax(0,1fr) auto}
.pst .deliv{width:auto;margin:0;padding:0;gap:10px;background:none;box-shadow:none}
.pst .deliv:hover{box-shadow:none}
.pst .deliv>.ic{width:22px;height:22px;padding:0;background:none;color:inherit}
.pst .deliv:not(.is-no) .deliv-t:not(:has(em)) small{display:none} /* only the "see the earliest day" hint: a known pincode's line always shows */
.pst .deliv-t small,.pst .deliv-t .deliv-fresh{color:var(--st-soft)}
.pst .deliv-t em{color:inherit}
.pdp-under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px clamp(20px,3vw,44px);padding-block:clamp(14px,1.6vw,20px);border-bottom:1px solid var(--line)}
.pdp-side{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.pdp-acts{display:flex;gap:8px}
.pdp-acts button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--forest);box-shadow:inset 0 0 0 1px var(--line);transition:background var(--t2)}
.pdp-acts button:hover{background:var(--cream-50)}
.pdp-notes{margin-top:clamp(24px,3vw,40px)}
.pdp-notes .qa summary{font-size:16.5px;padding:18px 0}
.pdp-notes .qa-a{font-size:15px;padding-right:30px}
.sticky-buy{position:fixed;left:8px;right:8px;bottom:calc(8px + var(--tabs));z-index:82;display:none;align-items:center;gap:12px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--forest-950);color:var(--cream-50);box-shadow:var(--lift);transform:translateY(160%);transition:transform var(--t3) var(--ease)}
.sticky-buy.on{transform:none}
.sticky-buy.on.by-ftr{transform:translateY(160%)}
.sticky-buy div{flex:1;min-width:0;line-height:1.25;font-size:13.5px;color:#CBD1C2}
.sticky-buy b{display:block;font-size:15.5px;font-weight:600;color:var(--cream-50);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy .amount{color:inherit}
html:has(.drawer.on) .sticky-buy{visibility:hidden}

/* The recipe: set like a page of the book, the amounts stamped */
.pstory{padding:clamp(64px,8vw,120px) 0 clamp(40px,5vw,72px);scroll-margin-top:calc(var(--hdr) + 12px)}
.pstory-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(28px,6vw,110px);align-items:start}
.pstory-side{position:sticky;top:calc(var(--hdr) + 28px)}
.pstory-k{color:var(--muted);margin-bottom:14px}
.pstory-lede{margin-top:clamp(16px,2vw,24px);max-width:44ch;font-size:clamp(16.5px,1.3vw,19px);line-height:1.55;color:var(--muted);text-wrap:pretty}
.pstory-ing{border-bottom:1px solid var(--line)}
.pstory-ing li{display:grid;grid-template-columns:36px minmax(62px,auto) minmax(0,1fr);align-items:center;gap:2px 14px;padding:clamp(14px,1.5vw,20px) 0;border-top:1px solid var(--line)}
.pstory-o{width:36px;height:36px;transform:rotate(-90deg);grid-row:span 2}
.pstory-o circle{fill:var(--tint);stroke:var(--c);stroke-width:3;stroke-linecap:round;stroke-dasharray:101;stroke-dashoffset:0;transition:fill var(--t2)}
.pstory-amt{grid-row:span 2;font-size:13px;color:var(--forest-950);white-space:nowrap}
.pstory-ing b{font-size:clamp(19px,1.7vw,25px);font-weight:600;letter-spacing:-.03em;line-height:1.15;color:var(--forest-950)}
.pstory-note{color:var(--muted);font-size:14.5px;line-height:1.4}
.pstory-sum{margin-top:12px;font-size:13.5px;color:var(--muted)}
.pnil{padding:clamp(28px,4vw,56px) 0 clamp(36px,5vw,72px)}
.pnil .nil-grid dd{font-size:clamp(64px,8vw,120px)}

/* ratings: stars drawn from one mask, filled to --r of 5 */
.stars{--size:16px;position:relative;display:inline-block;flex:none;width:calc(var(--size) * 5);height:var(--size);background:color-mix(in srgb,var(--forest) 16%,transparent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 16.9l-5.7 3.2 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") 0 0/var(--size) var(--size) repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 16.9l-5.7 3.2 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") 0 0/var(--size) var(--size) repeat-x;vertical-align:-2px}
.stars::before{content:"";position:absolute;inset:0;width:calc(var(--r) / 5 * 100%);background:var(--juice)}
.pdp-rating{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:var(--muted);transition:color .3s}
.pdp-rating b{color:var(--forest);font-weight:600}
.pdp-rating:hover{color:var(--forest)}
.pcard-rate{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:var(--muted)}
.pcard-rate .stars{--size:13px}
.reviews{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(28px,5vw,80px);align-items:start;padding:clamp(24px,3vw,48px) 0 clamp(64px,8vw,120px)}
.reviews-sum{position:sticky;top:calc(var(--hdr) + 24px)}
.reviews-avg{display:flex;align-items:center;gap:16px;margin:22px 0 8px}
.reviews-avg b{font-size:clamp(48px,5vw,72px);font-weight:600;letter-spacing:-.05em;line-height:1}
.reviews-avg .stars{--size:22px}
.reviews-sum .muted{font-size:15px;margin-bottom:18px}
.reviews-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.review{padding:24px;border-radius:var(--r-lg);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:14px}
.review-t{font-size:16.5px;line-height:1.55;color:var(--ink)}
.review-by{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:13.5px;color:var(--muted)}
.review-by b{color:var(--forest);font-weight:600}
.rv-ok{display:inline-flex;align-items:center;gap:4px;color:var(--leaf-ink);font-weight:600}
.rv-ok .ic{width:15px;height:15px}
/* the stars by count — each bar filters the list */
.rv-bars{display:grid;gap:4px;margin:4px 0 22px}
.rv-bars button{display:grid;grid-template-columns:42px minmax(0,1fr) 30px;align-items:center;gap:12px;padding:6px 10px;margin:0 -10px;border-radius:10px;font-size:14px;color:var(--muted);text-align:left;transition:background .3s,color .3s}
.rv-bars button span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.rv-bars button:not(:disabled):hover,.rv-bars [aria-pressed=true]{background:var(--white);color:var(--forest)}
.rv-bars button:disabled{opacity:.55;cursor:default}
.rv-bars i{height:8px;border-radius:8px;background:color-mix(in srgb,var(--forest) 9%,transparent);overflow:hidden}
.rv-bars s{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--juice);transform-origin:0 50%}
.rv-bars [aria-pressed=true] s{background:var(--forest)}
.rv-who{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--muted);margin-bottom:18px}
.rv-who .ic{flex:none;width:18px;height:18px;margin-top:2px;color:var(--leaf-ink)}
.reviews-avg.is-none{font-size:15px;color:var(--muted)}
.rv-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;font-size:14.5px;color:var(--muted)}
.rv-tools select{width:auto;padding-top:10px;padding-bottom:10px;font-size:14.5px}
.rv-more{margin-top:22px}
.rv-none{padding:28px;border-radius:var(--r-lg);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.rv-clear{font-weight:600;color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.rv-empty{display:grid;justify-items:start;gap:12px;padding:clamp(28px,3.4vw,48px);border-radius:var(--r-lg);background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.rv-empty h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.03em}
.rv-empty p{color:var(--muted);max-width:44ch;margin-bottom:8px}
.rv-empty-o{width:56px;height:56px;transform:rotate(-90deg)}
.rv-empty-o circle{fill:none;stroke:var(--juice);stroke-width:6;stroke-linecap:round;stroke-dasharray:201;stroke-dashoffset:0}
/* pick-up pass: the QR to show at the kiosk counter; staff who scan it while signed in get "Hand over" */
.pass>.rate-msg{grid-column:1/-1;max-width:760px}
@keyframes pass-in{from{opacity:0;scale:.92}}

/* ───────────── 8 · weekly box ───────────── */
.st-box .st-h{font-size:clamp(46px,min(7.6vw,16svh),124px)}
/* the builder: the steps on the left, the crate on the right */
.bx{padding:clamp(28px,3.4vw,48px) 0 clamp(48px,5vw,80px);scroll-margin-top:var(--hdr)}
.combos-s{padding-top:clamp(56px,6vw,96px);border-top:1px solid var(--line)}
.bx-in{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(380px,.8fr);grid-template-rows:auto 1fr;gap:0 clamp(24px,4vw,64px);align-items:start}
.bx-in>*{min-width:0}
.bx-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 12px;margin-bottom:22px}
.bx-h h2{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.035em}
.bx-h p{grid-column:1;color:var(--muted);font-size:15px;margin-top:4px}
.bx-h [data-count]{color:var(--forest-950);font-weight:600}
.bx-h .fl-tools{grid-column:2;grid-row:1/3;align-self:center}
/* fill: the same shelf as the shop; tap the bottle */
.fl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,3.4vw,48px) clamp(12px,1.4vw,20px)}
.fl-card{display:flex;flex-direction:column;min-width:0}
.fl-media{position:relative;display:block;width:100%;aspect-ratio:1/1.12;overflow:hidden;border-radius:var(--r-16);isolation:isolate}
.fl-media::after{content:"";position:absolute;z-index:-1;left:50%;bottom:8%;width:46%;height:12px;translate:-50% 50%;border-radius:50%;background:radial-gradient(closest-side,rgba(14,31,20,.2),transparent);transition:scale var(--t2) var(--ease)}
.fl-media::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 40%,transparent),var(--tint));transform:translateY(102%);border-radius:50% 50% 0 0/20px 20px 0 0;transition:transform var(--t3) var(--ease),border-radius var(--t3) var(--ease)}
.fl-card.has .fl-media::before{transform:none;border-radius:var(--r-16)}
.fl-media img{position:absolute;left:50%;bottom:9%;height:78%;width:auto;max-width:none;translate:-50% 0;filter:drop-shadow(0 6px 8px rgba(14,31,20,.16));transform-origin:50% 100%;transition:transform var(--t2) var(--ease)}
@media (hover:hover){.fl-media:not(:disabled):hover img{transform:translateY(-8px)}.fl-media:not(:disabled):hover::after{scale:.82}.fl-media:not(:disabled):hover::before{transform:none;border-radius:var(--r-16)}}
.fl-media:active img{transform:scale(.97)}
.fl-media:disabled{cursor:not-allowed}
.fl-card.is-out img{filter:saturate(.3);opacity:.6}
.fl-count{position:absolute;top:8px;left:8px;min-width:28px;height:28px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:var(--forest-950);color:var(--cream-50);font-size:14px;font-weight:600;opacity:0;scale:.8;transition:opacity var(--t1),scale var(--t2) var(--ease)}
.fl-card.has .fl-count{opacity:1;scale:1}
.fl-body{padding:14px 4px 0;flex:1}
.fl-body>b{font-size:16px;font-weight:600;letter-spacing:-.02em}
.fl-body p{font-size:13px;line-height:1.35;color:var(--muted);margin-top:1px}
.fl-card .stepper{align-self:flex-start;margin:12px 4px 0}
.fl-card .stepper button{width:38px;height:38px}
.fl-tools{display:flex;gap:6px}
.fl-tool{min-height:40px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--forest-700);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--t2)}
.fl-tool:hover{box-shadow:inset 0 0 0 1px var(--juice-500);background:color-mix(in srgb,var(--juice-500) 12%,transparent)}
/* the plan: four short rows of pills — bottles a day, days, time, how often */
.pl{display:grid;gap:12px}
.pl-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px}
.pl-k{font-size:13.5px;font-weight:600;line-height:44px;color:var(--muted)}
.pl-v{display:flex;flex-wrap:wrap;gap:6px}
.pl-pill{position:relative;cursor:pointer}
.pl-pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}
.pl-pill>span{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 17px;border-radius:999px;background:var(--cream-50);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:500;color:var(--forest-950);white-space:nowrap;transition:background-color var(--t1),color var(--t1),box-shadow var(--t1)}
.pl-pill small{font-size:13.5px;font-weight:400;opacity:.72}
.pl-pill input:checked+span{background:var(--juice-500);color:var(--forest-950);box-shadow:none}
.pl-pill input:focus-visible+span{box-shadow:var(--glow)}
.pl-pill input:disabled{cursor:not-allowed}
.pl-pill input:disabled+span{opacity:.4}
.bx-hint{font-size:14px;font-weight:500;color:var(--muted);margin-top:16px}
.bx-sub{font-size:15px;font-weight:600;margin:20px 0 8px}
/* the crate */
.bx-sum{position:sticky;top:calc(var(--hdr) + 12px);background:var(--cream-50);color:var(--forest-950);border-radius:var(--r-24);padding:clamp(18px,1.8vw,24px);box-shadow:inset 0 0 0 1px var(--line)}
.bx-sum-top{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.bx-sum h2{font-size:22px;flex:none}
.bx-sum .sub{color:var(--muted);font-size:14.5px;line-height:1.45}
.bx-box{position:relative;isolation:isolate;overflow:hidden;min-height:96px;padding:7px;border-radius:var(--r-16);background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.bx-level{position:absolute;left:0;right:0;bottom:0;z-index:-1;height:calc(var(--p,0) * 100%);background:color-mix(in srgb,var(--juice) 46%,var(--cream-50));transition:height var(--t3) var(--ease)}
.bx-level::before{content:"";position:absolute;left:-12%;right:-12%;top:-6px;height:13px;border-radius:50%;background:inherit;animation:slosh-y 4.8s ease-in-out infinite alternate}
@keyframes slosh-y{from{transform:scaleY(.6) rotate(-.4deg)}to{transform:scaleY(1.15) rotate(.4deg)}}
.bx-crate{display:grid;grid-template-columns:repeat(var(--k,6),minmax(0,1fr));gap:7px;max-width:calc(var(--k,6) * 64px);margin-inline:auto} /* --k bottles across; one compartment a drop day, --cols bottles wide */
.bx-half{grid-column:span var(--cols,1);display:flex;flex-direction:column;gap:3px;min-width:0}
.bx-day{font:500 10.5px/1.3 "Geist Mono",ui-monospace,monospace;letter-spacing:.03em;text-transform:uppercase;color:var(--forest-950);white-space:nowrap;overflow:hidden}
.bx-slots{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));direction:ltr;grid-auto-rows:1fr;border-radius:var(--r-10);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(14,31,20,.16);transform:scaleY(-1)} /* filled from the bottom row up, like a crate */
.slot{position:relative;aspect-ratio:1/1.72;box-shadow:inset -.5px -.5px 0 rgba(14,31,20,.14),inset .5px .5px 0 rgba(14,31,20,.14);overflow:hidden;transform:scaleY(-1);transition:background var(--t2)}
.slot img{position:absolute;left:50%;bottom:3%;height:92%;width:auto;max-width:none;translate:-50% 0;filter:drop-shadow(0 3px 3px rgba(14,31,20,.22))}
.bx-left{margin-top:10px;font-size:14.5px;font-weight:500}
.bx-lines{display:flex;flex-direction:column;gap:4px;font-size:14.5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.bx-lines div{display:flex;justify-content:space-between;gap:12px}
.bx-lines .save{color:var(--leaf-ink);font-weight:600}
.bx-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:8px}
.bx-total b{font-size:38px;font-weight:600;letter-spacing:-.04em;line-height:1.1}
.bx-total span{font-size:13.5px;color:var(--muted);text-align:right}
.bx-fullbox{font-size:13.5px;color:var(--muted)}
.bx-fullbox:empty{display:none}
.bx-box:not(:has(.slot img))::after{content:attr(data-hint);position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;font-size:14.5px;font-weight:500;color:var(--muted);pointer-events:none}
.bx.is-full .bx-pay .btn:not(:disabled){animation:ready 2.4s var(--out) infinite}
@keyframes ready{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--juice) 46%,transparent)}70%,100%{box-shadow:0 0 0 12px transparent}}
.bx-fine{font-size:13px;line-height:1.45;color:var(--muted);margin-top:12px}
.bx-err{color:var(--red);font-weight:600;font-size:14px;margin-top:10px}
.bx-err:empty{display:none}
.bx-bar{position:fixed;left:8px;right:8px;max-width:520px;margin-inline:auto;bottom:calc(8px + var(--tabs));z-index:82;display:flex;align-items:center;gap:12px;padding:7px 7px 7px 18px;border-radius:999px;background:var(--forest-950);color:var(--cream-50);box-shadow:var(--lift);overflow:hidden;isolation:isolate;transform:translateY(160%);transition:transform var(--t3) var(--ease)}
.bx-bar.on{transform:none}
.bx-bar-fill{position:absolute;left:0;top:0;bottom:0;z-index:-1;width:calc(var(--p,0) * 100%);background:var(--forest-700);border-radius:0 18px 18px 0;transition:width var(--t3) var(--ease)}
.bx-bar div{flex:1;min-width:0;line-height:1.2;font-size:13px;color:#D2D8CA}
.bx-bar div>*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-bar b{display:block;font-size:17px;font-weight:600;color:var(--cream-50)}
.bx-bar .btn{flex:none}
.bx-fly{position:fixed;z-index:130;pointer-events:none;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(14,31,20,.3))}
html:has(.drawer.on) .bx-bar,body:has(.ck:not([hidden])) .bx-bar{visibility:hidden}
@media (min-width:1101px){.bx-bar{bottom:20px;left:calc(max(var(--gut),(100% - var(--max)) / 2) + (min(var(--max),100% - 2*var(--gut)) * .57 - 520px) / 2);right:auto;width:520px;margin:0}} /* wide screens: centred under the column you are working in, clear of the summary card */
@media (hover:none){html:has(form.checkout :is(input:not([type=radio],[type=checkbox]),textarea):focus) .bx-bar{visibility:hidden}} /* phones: typing an address, the keyboard has the room */
/* do the maths + promises */
.bxm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.bxm-card{display:flex;flex-direction:column;gap:6px;padding:clamp(26px,3vw,44px);border-radius:var(--r-lg);background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.bxm-card.on{background:var(--forest);color:var(--cream)}
.bxm-k{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bxm-card.on .bxm-k{color:var(--juice)}
.bxm-card b{font-size:clamp(46px,5vw,84px);font-weight:600;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums;margin:14px 0 4px}
.bxm-card span:last-child{color:var(--muted)}
.bxm-card.on span:last-child{color:color-mix(in srgb,var(--cream) 72%,transparent)}
.bxp{padding-top:0}
.bxp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.bxp-grid article{padding-top:20px;border-top:1px solid var(--line)}
.bxp-grid h3{font-size:20px;letter-spacing:-.025em;margin:12px 0 8px}
.bxp-grid p{color:var(--muted);font-size:15px}

/* ───────────── 9 · WooCommerce pages ───────────── */
.woo-page{padding:clamp(28px,4vw,56px) 0 var(--sec)}
.woo-page>h1{font-size:clamp(40px,5vw,76px);letter-spacing:-.05em;margin-bottom:clamp(24px,3vw,44px)}
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{list-style:none;margin:0 0 22px;padding:16px 20px 16px 50px;border-radius:16px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-weight:500;font-size:15px;position:relative;line-height:1.45}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{content:"";position:absolute;left:20px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--leaf)}
.woocommerce-info::before{background:var(--forest)}
.woocommerce-error{background:#FCEEEC;box-shadow:inset 0 0 0 1px #F0C9C4;color:#7A1B1B;flex-direction:column;align-items:flex-start}
.woocommerce-error::before{top:24px;margin-top:0;background:var(--red)}
.woocommerce-message .button,.woocommerce-info .button{order:2;margin-left:auto}
.woocommerce-info a:not(.button){text-decoration:underline;text-underline-offset:3px}
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.woocommerce input.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;min-height:48px;border-radius:999px;background:var(--forest);color:var(--cream);font-weight:600;font-size:15px;border:0;cursor:pointer;transition:background .3s;line-height:1.1}
.woocommerce .button:hover{background:var(--juice);color:var(--night)}
.woocommerce .button:disabled,.woocommerce .button.disabled{opacity:.5}
.woocommerce form .woocommerce-invalid input.input-text,.woocommerce form .woocommerce-invalid select{border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 12%,transparent)}
.woocommerce form .woocommerce-validated input.input-text{border-color:color-mix(in srgb,var(--leaf) 60%,transparent)}
.woocommerce form .bo-hidden{display:none}
/* track an order */
.track_order{max-width:520px;padding:clamp(20px,2.4vw,30px);border-radius:var(--r-24);background:var(--cream-50);box-shadow:inset 0 0 0 1px var(--line)}
.track_order>p:first-of-type{margin-bottom:14px;color:var(--muted);font-size:15.5px}
.track_order .button{width:100%}
.woocommerce-page mark,.order-info mark{background:none;color:inherit;font-weight:600}
.woocommerce>.order-info{margin-bottom:18px;color:var(--muted)}
.coupon .button{white-space:nowrap}
/* cart page */
.coupon{display:inline-flex;gap:8px;float:left}
.coupon input{max-width:220px;min-height:48px}
/* Checkout: one calm column of numbered steps (how, who, when, pay) beside a summary that stays put. The fragments
   WooCommerce redraws sit in reserved space, and its white overlay is off, so nothing jumps. */
.ship-pick{min-width:0;margin:0;padding:0 0 clamp(22px,2.6vw,36px);border:0}
.ship-pick legend{float:left;width:100%;margin-bottom:14px;padding:0}
.ship-row{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ship-opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:84px;padding:14px 16px;border-radius:var(--r-16);background:var(--cream-50);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;font-size:inherit;font-weight:inherit;transition:box-shadow var(--t2),background var(--t2),color var(--t2)}
.ship-opt:hover{box-shadow:inset 0 0 0 1px var(--forest-700)}
.ship-opt input{position:absolute;opacity:0;pointer-events:none}
.ship-opt .ic{width:26px;height:26px}
.ship-t b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.ship-t small{display:block;margin-top:1px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.ship-p{font-size:15px;font-weight:600;white-space:nowrap}
.ship-p .amount{color:inherit}
.ship-opt:has(input:checked){background:var(--forest-700);color:var(--cream-50);box-shadow:none}
.ship-opt:has(input:checked) small{color:color-mix(in srgb,var(--cream-50) 76%,transparent)}
.ship-opt:has(input:focus-visible){box-shadow:var(--glow)}
/* phones: what you're paying, at the top */
#order_comments_field{order:2;display:none;margin:10px 0 0!important}
#order_comments_field.is-open{display:flex}
.note-chips{display:flex;flex-wrap:wrap;gap:6px}
.note-chips::before{content:"A note for the rider";flex-basis:100%;font-size:13.5px;font-weight:600;color:var(--forest-700)}
.note-chips button{min-height:40px;padding:0 14px;border-radius:999px;font-size:13.5px;color:var(--forest-950);box-shadow:inset 0 0 0 1px var(--line);transition:background var(--t2),box-shadow var(--t2),color var(--t2)}
.note-chips button:hover{box-shadow:inset 0 0 0 1px var(--forest-700)}
.note-chips button.on{background:var(--forest-700);color:var(--cream-50);box-shadow:none}
.bo-delivery{grid-column:1;min-width:0;margin:0;padding:clamp(22px,2.6vw,36px) 0;border-top:1px solid var(--line)}
.bo-delivery>p{font-size:14px;color:var(--muted);margin-top:10px}
.bo-delivery .day-full{margin-top:8px}
#co-pay-h{grid-column:1;padding-top:clamp(22px,2.6vw,36px);margin-bottom:14px;border-top:1px solid var(--line)}
/* the summary: a printed slip that stays beside you */
.trust{text-align:center;margin-top:12px;font-size:12.5px;color:var(--muted)}
/* Ways to pay: small white badges with the real marks (assets/img/pay.svg); UPI, RuPay, cash as text */
.pm-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pm{display:inline-grid;place-items:center;height:26px;min-width:40px;padding:0 7px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(21,43,28,.05)}
.pm svg{width:30px;height:13px}
.pm-phonepe svg,.pm-amex svg{width:17px;height:17px}
.pm-mastercard svg{width:26px;height:16px}
.pm-visa svg{height:11px;width:34px}
.pm-t{font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.pm-upi{font-style:italic;font-weight:600;letter-spacing:.03em}
.pm-rupay{font-style:italic}
.pm-cash{color:var(--muted);font-weight:500}
.pm-sm .pm{height:22px;min-width:34px;padding:0 5px;border-radius:6px}
.pm-sm .pm svg{width:26px;height:11px}
.pm-sm .pm-phonepe svg,.pm-sm .pm-amex svg{width:14px;height:14px}
.pm-sm .pm-mastercard svg{width:22px;height:14px}
.pm-sm .pm-visa svg{width:30px;height:10px}
.pm-sm .pm-t{font-size:10.5px}
.pm-center{justify-content:center;margin-top:16px}
.secure{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.secure .ic{width:15px;height:15px;color:var(--leaf-ink)}
.secure .rzp{display:inline-block;width:11px;height:13px;vertical-align:-2px;margin:0 1px}
/* a lock on every button that takes money (::before is the hover fill; WooCommerce rewrites Place order's text) */
.btn-pay::after{content:"";order:-1;width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--lock) center/contain no-repeat;mask:var(--lock) center/contain no-repeat}
:root{--lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8.5 11V8a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E")}
.drawer-pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.pdp-pay{font-size:13px}
.ftr-pay{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:22px 0;border-top:1px solid color-mix(in srgb,var(--cream) 10%,transparent);font-size:13.5px;color:color-mix(in srgb,var(--cream) 72%,transparent)}
.ftr-pay .secure .ic{color:var(--cream)}
.ftr-pay .pm{box-shadow:none}
/* paying: Save 5% / + ₹20 handling next to the choice, why pay on delivery is missing, the acceptance note */
.pay-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--sand);color:var(--forest)}
.pay-tag.is-save{background:color-mix(in srgb,var(--leaf) 16%,var(--white));color:var(--leaf-ink)}
.pay-accept{display:block;margin-top:10px;font-size:13px;color:var(--muted)}
.pay-note{margin:4px 0 12px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--juice) 9%,var(--white));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--juice) 35%,transparent);font-size:14px}
.drawer-save{margin:6px 0 2px;font-size:13.5px;color:var(--muted)}
.drawer-save b{color:var(--leaf-ink)}
/* complete the five: the juices you have (filled O's) and the ones the taster adds (rings) */
.swap5{margin:4px 26px 16px;padding:16px;border-radius:18px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.swap5-os{display:flex;gap:6px;margin-bottom:10px}
.swap5-os i{display:grid;place-items:end center;width:34px;height:34px;border-radius:50%;overflow:hidden;font-style:normal;font-weight:600;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--field)}
.swap5-os i:not(.has){place-items:center}
.swap5-os i.has{background:var(--tint);box-shadow:none}
.swap5-os img{height:38px;width:auto;margin-bottom:-10px}
.swap5 p{font-size:14px;color:var(--muted);margin-bottom:12px}
.swap5 p b{color:var(--forest)}
.drawer-share{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--forest)}
.drawer-share .ic{width:18px;height:18px;color:var(--leaf-ink)}
.drawer-share:hover{text-decoration:underline;text-underline-offset:3px}
/* save for later (cards, product page), share, sold-out alerts, bought this week, goes well together */
.fbt{padding:clamp(28px,4vw,56px) 0}
.fbt h2{margin-bottom:clamp(18px,2.4vw,32px)}
.fbt-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(220px,1fr);gap:clamp(18px,3vw,44px);align-items:end}
.fbt-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.fbt-row li{position:relative}
.fbt-row li+li::before{content:"+";position:absolute;left:-8px;top:36%;z-index:2;font-size:24px;font-weight:600;color:var(--muted)}
.fbt-row label{display:grid;gap:2px;cursor:pointer;font-size:inherit;font-weight:inherit}
.fbt-row input{position:absolute;left:8px;top:8px;z-index:2}
.fbt-img{position:relative;display:block;aspect-ratio:1/1.04;overflow:hidden;margin-bottom:8px;transition:opacity var(--t2)}
.fbt-img img{position:absolute;left:50%;bottom:7%;height:80%;width:auto;max-width:none;translate:-50% 0;filter:drop-shadow(0 8px 12px rgba(14,31,20,.14))}
.fbt-row li:has(input:not(:checked)) .fbt-img{opacity:.42}
.fbt-row b{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--forest-950);padding-inline:2px}
.fbt-row small{font-size:13.5px;color:var(--muted);padding-inline:2px}
.fbt-buy{display:grid;gap:12px}
.fbt-buy p{color:var(--muted);font-size:15px}
.fbt-buy b{display:block;font-size:clamp(30px,3vw,44px);font-weight:600;color:var(--forest-950);letter-spacing:-.035em;line-height:1.1}
@media (max-width:700px){.fbt-in{grid-template-columns:1fr}}
.qv{width:min(900px,100% - 32px);max-width:none;max-height:min(88vh,640px);padding:0;border:0;border-radius:var(--r-32);background:var(--cream-100);color:var(--forest-950);box-shadow:var(--lift);overflow:auto}
.qv::backdrop{background:color-mix(in srgb,var(--forest-950) 42%,transparent)}
.qv[open]{animation:srch-in var(--t2) var(--out)}
.qv-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.qv-x{position:absolute;right:10px;top:10px;z-index:2}
.qv-media{position:relative;display:grid;place-items:end center;min-height:520px;padding-top:28px;background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--tint) 58%,transparent),transparent 76%),var(--c);color:var(--on);overflow:hidden}
.qv-media img{height:min(460px,62vh);width:auto;margin-bottom:22px;filter:drop-shadow(0 18px 18px rgba(0,0,0,.22))}
.qv-media .stamp{position:absolute;left:18px;top:18px}
.qv-copy{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(24px,3vw,44px)}
.qv-copy h2{font-size:clamp(34px,3.4vw,50px);letter-spacing:-.045em}
.qv-line{font-size:17px;font-weight:500;line-height:1.35}
.qv-ing{font-size:14.5px;line-height:1.45;color:var(--muted)}
.qv-price{margin-top:6px}
.qv-price b{font-size:26px;font-weight:600;letter-spacing:-.03em}
.qv-price small{margin-left:6px;color:var(--muted);font-size:14px}
.pcard-size{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin-top:6px}
.pcard-size button{min-height:44px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted);box-shadow:inset 0 0 0 1px var(--field);transition:background var(--t2),color var(--t2),box-shadow var(--t2)}
.pcard-size button:hover{color:var(--forest-700);box-shadow:inset 0 0 0 1px var(--forest-700)}
.pcard-size button[aria-pressed=true]{background:var(--forest-700);color:var(--cream-50);box-shadow:none}
.qv-buy{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;margin-top:4px}
.qv-buy .btn{margin:0;padding:0 18px}
.qv-buy .stepper button{width:44px;height:44px;font-size:20px}
.qv-copy .link-arrow{align-self:flex-start;margin-top:4px}
@media (max-width:640px){.qv{width:100%;max-height:92vh;margin:auto 0 0;border-radius:var(--r-24) var(--r-24) 0 0}.qv-in{grid-template-columns:1fr}.qv-media{min-height:240px;padding-top:20px}.qv-media img{height:200px}.qv-buy{grid-template-columns:auto 1fr}.qv-buy [data-buy]{grid-column:1/-1}.qv-copy{padding:20px 18px calc(20px + env(safe-area-inset-bottom))}}
/* You looked at */
.seen{padding:clamp(28px,4vw,56px) 0}
.seen h2{margin-bottom:16px}
.seen-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.seen-it{position:relative;animation:seen-in .6s var(--out) both;animation-delay:calc(var(--n) * 80ms)}
@keyframes seen-in{from{opacity:0;transform:translateY(14px)}}
.seen-it a{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:10px 54px 10px 10px;border-radius:18px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.seen-img{grid-row:span 2;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--tint);overflow:hidden}
.seen-img img{height:52px;width:auto}
.seen-it b{font-size:15px}
.seen-it small{font-size:13px;color:var(--muted)}
.seen-it .srch-add{top:50%;transform:translateY(-50%);right:12px}
@media (max-width:900px){.seen-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.seen-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.seen-it,.qv-media img,.qv[open]{animation:none}}
/* Search sheet: a calm panel from the top, results as rows with the packshot on its label tint */
.srch{width:min(640px,100% - 32px);max-width:none;max-height:min(80vh,720px);margin:clamp(16px,10vh,96px) auto auto;padding:0;border:0;border-radius:24px;background:var(--cream);color:var(--forest);box-shadow:var(--lift),0 0 0 1px var(--line);overflow:hidden}
.srch::backdrop{background:color-mix(in srgb,var(--deep) 45%,transparent);backdrop-filter:blur(4px)}
.srch[open]{animation:srch-in .35s var(--out)}
@keyframes srch-in{from{opacity:0;transform:translateY(-12px) scale(.98)}}
.srch-in{display:flex;flex-direction:column;max-height:inherit}
.srch-bar{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 20px;border-bottom:1px solid var(--line)}
.srch-bar>.ic{color:var(--muted)}
.srch-bar input{flex:1;min-height:48px;border:0;background:transparent;padding:0;font-size:18px;box-shadow:none}
.srch-bar input:focus{box-shadow:none}
.srch-bar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.srch-res{overflow:auto;padding:8px 8px 14px}
.srch-h{padding:10px 12px 6px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.srch-res li{position:relative;display:flex;align-items:center}
.srch-it{flex:1;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:8px 12px;border-radius:14px;min-height:56px}
.srch-it:hover,.srch-it:focus-visible{background:var(--white);outline:none;box-shadow:inset 0 0 0 1px var(--line)}
.srch-img{width:44px;height:44px;border-radius:12px;background:var(--tint);display:grid;place-items:center;overflow:hidden}
.srch-img img{height:40px;width:auto}
.srch-ic{width:44px;height:44px;border-radius:12px;background:var(--sand);display:grid;place-items:center;font-weight:600;color:var(--muted)}
.srch-t{display:flex;flex-direction:column;min-width:0}
.srch-t b{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.srch-t small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-p{font-size:14px;font-weight:600}
.srch-res li:has(.srch-add) .srch-it{padding-right:58px}
.srch-add{position:absolute;right:14px;width:34px;height:34px;border-radius:50%;background:var(--forest);color:var(--cream);font-size:20px;line-height:1;transition:background .25s,color .25s}
.srch-add:hover{background:var(--juice-500);color:var(--forest-950)}
.srch-none{padding:18px 12px;color:var(--muted)}
@media (max-width:640px){.srch{width:100%;max-height:88vh;margin:0 0 auto;border-radius:0 0 22px 22px}.srch-p{display:none}}
@media (prefers-reduced-motion:reduce){.srch[open]{animation:none}}
@media (max-width:640px){
}
.drawer-ship{align-items:flex-start}
.drawer-ship small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:1px}
.deliv-t .deliv-fresh{color:var(--leaf-ink);font-weight:500}
/* +91 in the mobile fields (autocomplete tel-national gives the 10 digits) */
.variation{list-style:none;margin:4px 0 0;padding:0;font-size:13px;color:var(--muted)}
.variation dt,.variation dd{display:inline;margin:0}
.variation p{display:inline}
.variation dd::after{content:"";display:block} /* one detail a line: Bottles / Plan / You save */
[data-bo-known-err]{color:var(--red);font-weight:600}
/* after the order: share + make it a habit */
address{font-style:normal;line-height:1.55;font-size:15px;color:var(--muted)}
/* My account: a small app. A rail of tabs, and today at the top */
.acc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sk{grid-column:1/-1}
/* the O streak: every delivered day an O full of its juice */
fieldset{border:0;padding:0;margin:22px 0}
legend{font-weight:600;font-size:18px;margin-bottom:10px}
/* My box */
.mybox{display:flex;flex-direction:column;gap:20px}
.left{font-weight:600;color:var(--forest)}
.left.is-soon::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--juice);margin-right:6px;vertical-align:1px}
.btn .amount{color:inherit}

/* ───────────── 10 · pages ───────────── */
/* The slim stage every quiet page opens on (bo_page_stage), and a page's body under it */
.st-page .st-shop-in{padding-block:clamp(20px,5vh,56px) clamp(24px,4vh,40px)}
.st-page .st-h{font-size:clamp(44px,min(7.4vw,17svh),116px)}
.st-page .st-lead-s a{color:inherit}
.page-body{padding-block:clamp(36px,5vw,72px) var(--sec)}
.page-body.has-toc{display:grid;grid-template-columns:200px minmax(0,740px);gap:clamp(32px,8vw,130px);justify-content:center}
.page-toc{position:sticky;top:calc(var(--hdr) + 24px);align-self:start;display:flex;flex-direction:column;border-top:2px solid var(--forest-950)}
.page-toc a{padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.35;color:var(--muted);transition:color var(--t1)}
.page-toc a:hover{color:var(--forest-950)}
.prose{max-width:740px;font-size:17px;line-height:1.7}
.prose h2{font-size:clamp(24px,2.2vw,32px);margin:44px 0 14px;scroll-margin-top:calc(var(--hdr) + 20px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;margin:30px 0 10px;letter-spacing:-.02em}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul{list-style:disc;padding-left:22px} .prose ol{list-style:decimal;padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{text-decoration:underline;text-underline-offset:3px}
/* A label-like list: a heavy rule, hairlines, a stamp on the left */
.rows{border-top:2px solid var(--forest-950)}
.row{display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:2px 20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.row .stamp{grid-row:1/3;color:var(--muted)}
.row b{font-size:clamp(20px,1.8vw,25px);font-weight:600;letter-spacing:-.03em;line-height:1.2}
.row-t{grid-column:2;color:var(--muted);font-size:15.5px}
.row .arrow{grid-column:3;grid-row:1/3;align-self:center;width:20px;height:20px;transition:transform var(--t2) var(--ease)}
@media (hover:hover){.row:hover .arrow{transform:translateX(5px)}}
.facts{margin:6px 0 28px}
.facts div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15.5px}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{font:500 11.5px/1.3 "Geist Mono",ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-top:4px}
/* Pincode box */
.pin-box{padding:22px;border-radius:var(--r-24);background:var(--cream-50);box-shadow:inset 0 0 0 1px var(--line)}
.pin-box h2{font-size:19px;letter-spacing:-.02em;margin-bottom:14px}
/* FAQ */
.faq-page{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(30px,7vw,120px);padding-block:clamp(32px,4vw,64px) var(--sec)}
.faq-page>*{min-width:0}
.faq-side{position:sticky;top:calc(var(--hdr) + 16px);align-self:start;display:grid;gap:22px}
.faq-nav{display:flex;flex-direction:column;border-top:2px solid var(--forest-950)}
.faq-nav a{padding:11px 0;border-bottom:1px solid var(--line);font-weight:500;transition:color var(--t1)}
.faq-nav a:hover{color:var(--leaf-ink)}
.faq-group{font:500 11.5px/1.3 "Geist Mono",ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:44px 0 12px;scroll-margin-top:calc(var(--hdr) + 20px)}
.faq-group:first-child{margin-top:0}
/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,6vw,100px);align-items:start;padding-block:clamp(32px,4vw,64px) var(--sec)}
.kiosk-card{position:sticky;top:calc(var(--hdr) + 16px);display:block}
.kiosk-card figure{margin:0 0 16px;aspect-ratio:1/1.08;border-radius:999px 999px var(--r-24) var(--r-24);overflow:hidden;background:var(--sand)}
.kiosk-card img{width:100%;height:100%;object-fit:cover;transition:scale var(--t3) var(--ease)}
@media (hover:hover){.kiosk-card:hover img{scale:1.03}}
.kiosk-card h2{font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;margin:10px 0 4px}
.kiosk-card p:not(.open-chip){color:var(--muted);font-size:15.5px}
/* The open / closed chip (bo_open_chip) reads on whatever it sits on */
.open-chip.open-card{background:var(--cream-200);color:var(--forest-950)!important}
.open-chip.open-stage{background:var(--st-btn);color:var(--st-ink)!important;margin-bottom:clamp(14px,2.4vh,24px)}
/* Office */
.office{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,6vw,100px);align-items:start;padding-block:clamp(32px,4vw,64px) var(--sec)}
.office>*{min-width:0}
.office-ways{border-top:2px solid var(--forest-950)}
.office-ways li{padding:18px 0;border-bottom:1px solid var(--line)}
.office-ways .stamp{color:var(--muted)}
.office-ways h2{font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;margin:8px 0 6px}
.office-ways p{color:var(--muted);font-size:15.5px}
.office-photo{margin:24px 0 0;aspect-ratio:4/3;border-radius:var(--r-24);overflow:hidden;background:var(--sand)}
.office-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.office-form{position:sticky;top:calc(var(--hdr) + 16px);padding:clamp(22px,3vw,40px);border-radius:var(--r-24);background:var(--cream-50);box-shadow:var(--lift)}
.office-form>h2,.office-done h2{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.035em;margin-bottom:20px}
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.office-grid p{display:flex;flex-direction:column;gap:7px}
.office-grid .wide{grid-column:1/-1}
.office-send{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:22px}
.office-msg{margin-top:12px;color:var(--red);font-size:14.5px}
.office-msg:empty{display:none}
.office-done p{color:var(--muted)}
/* Search results */
.srch-page{margin-top:14px;max-width:420px}
.srch-page input{background:var(--cream-50);color:var(--ink)}
.found{padding-block:clamp(24px,3vw,48px) var(--sec)}
.found .rows{margin-top:clamp(24px,3vw,44px)}
.found .shop-grid+.rows{margin-top:clamp(40px,5vw,72px)}
.found-try{display:flex;flex-wrap:wrap;gap:8px}
/* 404, and the pages that say one thing (rate.php, pass.php) */
.st-404{min-height:max(560px,calc(100svh - 18px));margin-bottom:0;grid-template-rows:1fr}
.st-404-in{--px:max(var(--gut),calc((100% - var(--max)) / 2));display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:20px var(--px) clamp(28px,5vh,56px)}
.st-404-n{display:flex;align-items:center;gap:.04em;font-size:clamp(84px,14vw,216px);font-weight:600;letter-spacing:-.05em;line-height:.9;margin-bottom:clamp(14px,3vh,28px)}
.st-404-o{width:.82em;height:.82em;--or:currentColor}
.st-404-o .o-ring{stroke-width:7.5}
.st-404 .st-h,.st-msg .st-h{font-size:clamp(40px,min(6vw,12svh),92px)}
.st-404 .st-lead-s,.st-msg .st-lead-s{max-width:46ch;margin-top:14px}
.st-404-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(22px,4vh,36px)}
.st-404-links .link-arrow{color:var(--st-ink)}
.st-msg{min-height:min(640px,calc(100svh - 18px))}
.st-tick .ic{width:52px;height:52px;padding:14px;border-radius:50%;background:var(--leaf);color:var(--cream-50);margin-bottom:20px}
/* Our story: one day, from night to dusk. No script: every section is a plain layout on its own colour */
.is-story{--st-ink:var(--cream-50);--st-a:var(--forest-950)}
.sh{padding:clamp(32px,6vw,80px) 0 var(--sec);background:var(--forest-950);color:var(--cream-50);--focus:var(--cream-50)}
.sh-pin{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto;display:flex;flex-direction:column;gap:clamp(24px,3vw,44px)}
.sh-kicker{color:var(--juice-500)}
.sh-a,.sh-c{font-size:clamp(58px,11.4vw,208px);font-weight:600;letter-spacing:-.06em;line-height:.92}
.sh-b{display:flex;flex-direction:column;gap:6px}
.sh-b li{font-size:clamp(28px,4.4vw,74px);font-weight:600;letter-spacing:-.04em;line-height:1.12;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:inherit;gap:0 .3em}
.sh-b span{position:relative}
.sh-b span::after{content:"";position:absolute;left:-2%;right:-2%;top:55%;height:.08em;border-radius:9px;background:var(--juice-500);transform:scaleX(var(--s,1));transform-origin:0 50%}
.sh-b em{font-size:.48em;color:#B7C0B2;font-weight:500;letter-spacing:-.01em}
.sh-win{position:relative;border-radius:var(--r-24);overflow:hidden;aspect-ratio:16/8}
.sh-win img{width:100%;height:100%;object-fit:cover}
.sh-hint{display:none}
.js .sh:not(.static){height:330vh;padding:0}
.js .sh:not(.static) .sh-pin{position:sticky;top:0;height:100svh;width:100%;display:block;overflow:hidden}
.js .sh:not(.static) .sh-kicker{position:absolute;left:var(--gut);top:calc(var(--hdr) + 24px)}
.js .sh:not(.static) :is(.sh-a,.sh-b,.sh-c){position:absolute;left:var(--gut);right:var(--gut);top:50%;translate:0 -46%}
.js .sh:not(.static) .sh-a{z-index:2}
.js .sh:not(.static) .sh-b{z-index:2;align-items:center;justify-content:center;text-align:center}
.js .sh:not(.static) .sh-b li{opacity:0}
.js .sh:not(.static) .sh-b span::after{transform:scaleX(var(--s,0))}
.js .sh:not(.static) .sh-c{text-align:center;z-index:2;opacity:0;text-shadow:0 2px 28px rgba(14,31,20,.35)}
.js .sh:not(.static) .sh-win{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;z-index:1;opacity:0;clip-path:inset(var(--iy,38%) var(--ix,42%) round var(--ir,999px))}
.js .sh:not(.static) .sh-win::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,31,20,.24),rgba(14,31,20,.42))}
.js .sh:not(.static) .sh-hint{display:block;position:absolute;left:50%;bottom:calc(22px + var(--tabs));translate:-50% 0}
.sh-hint span{display:block;width:1.5px;height:42px;background:linear-gradient(var(--cream-50),transparent);transform-origin:top;animation:hint 2.2s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.line-s{padding:var(--sec) 0 clamp(48px,6vw,96px);background:linear-gradient(#F9D8B8,#FBF1E4 26%,var(--cream-100) 92%)}
.line-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,110px);align-items:start}
.line-big{position:sticky;top:calc(var(--hdr) + 12vh)}
.line-big p{font-size:clamp(48px,7.4vw,132px);font-weight:600;letter-spacing:-.055em;line-height:.98;color:var(--forest-950);transition:color .7s var(--ease)}
.js .line-big p{color:color-mix(in srgb,var(--forest-950) 20%,transparent)}
.js .line-big p.on{color:var(--forest-950)}
.line-notes li{min-height:54vh;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line);padding:40px 0}
.line-notes .stamp{color:var(--muted)}
.line-notes h3{font-size:clamp(26px,2.6vw,42px);letter-spacing:-.035em;margin:14px 0 12px}
.line-notes p{color:var(--muted);font-size:17px;max-width:430px}
.psr{padding:clamp(48px,6vw,96px) 0 var(--sec)}
.psr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 30px;margin-bottom:clamp(28px,3vw,48px)}
.psr-head .sec-side{max-width:34ch}
.psr-stack{display:grid;gap:clamp(12px,1.4vw,20px)}
.psr-card{position:sticky;top:calc(var(--hdr) + 6px + var(--i) * 12px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);height:min(calc(100svh - var(--hdr) - 48px),680px);border-radius:var(--r-32);overflow:hidden;background:#FBE6CD;box-shadow:0 -24px 48px -32px rgba(14,31,20,.3)}
.psr-card:nth-child(2){background:#E3EDD3}
.psr-card:nth-child(3){background:var(--forest-900);color:var(--cream-50)}
.psr-card figure{margin:0;overflow:hidden}
.psr-card img{width:100%;height:100%;object-fit:cover}
.psr-copy{display:flex;flex-direction:column;padding:clamp(24px,3.4vw,56px)}
.psr-copy .stamp{margin-bottom:auto;color:var(--forest-700)}
.psr-card:nth-child(3) .stamp{color:var(--juice-500)}
.psr-copy h3{font-size:clamp(64px,min(10vw,22svh),168px);letter-spacing:-.06em;line-height:.9}
.psr-copy p{margin-top:34px;max-width:36ch;font-size:clamp(16px,1.3vw,19px);line-height:1.5}
.honest{padding:0 0 var(--sec)}
.honest-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,7vw,120px);padding-top:18px;border-top:2px solid var(--forest-950)}
.honest-in .stamp{color:var(--muted);margin-bottom:14px}
.honest-yes li{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line)}
.honest-yes b{font-size:clamp(17px,1.4vw,20px);letter-spacing:-.02em}
.honest-yes span{color:var(--muted);font-size:15.5px}
.honest-no li{display:flex;flex-direction:column;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.honest-no s{position:relative;text-decoration:none;width:fit-content;font-size:clamp(34px,3.8vw,60px);font-weight:600;letter-spacing:-.045em;line-height:1.08}
.honest-no s::after{content:"";position:absolute;left:-3%;right:-3%;top:54%;height:.07em;border-radius:9px;background:var(--juice-600);transform:scaleX(var(--s,1));transform-origin:0 50%}
.honest-no small{font-size:14px;color:var(--muted)}
.owin{padding:0 0 var(--sec)}
.owin-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,8vw,140px);align-items:center}
.owin-in>*{min-width:0}
.owin-art{width:min(100% - 60px,520px);justify-self:center;aspect-ratio:1;margin:0;border-radius:50%;overflow:hidden;box-shadow:0 0 0 clamp(16px,2.6vw,38px) var(--forest-700)}
.owin-art img{width:100%;height:100%;object-fit:cover;object-position:56% 62%;scale:1.34;transform-origin:56% 60%}
.owin .lead{margin:20px 0 14px;max-width:44ch}
.owin-more{color:var(--muted);max-width:46ch}
.owin-week{display:flex;gap:clamp(2px,.6vw,8px);margin:22px 0 26px}
.owin-week .o{width:clamp(38px,4vw,52px);height:clamp(38px,4vw,52px)}
.where-s{padding:var(--sec) 0 clamp(48px,6vw,96px);border-radius:var(--r-32) var(--r-32) 0 0;background:var(--forest-900);color:var(--cream-50);--focus:var(--cream-50)}
.where-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,7vw,120px);align-items:center}
.where-photo{margin:0;aspect-ratio:4/5;border-radius:999px 999px var(--r-24) var(--r-24);overflow:hidden;background:var(--forest-950)}
.where-photo img{width:100%;height:100%;object-fit:cover}
.where-copy .open-chip{margin-bottom:18px}
.where-copy .lead{margin:20px 0 22px;max-width:44ch;color:#CBD1C2}
.where-neon{margin:clamp(28px,3vw,44px) 0 0;aspect-ratio:2/1;border-radius:var(--r-24);overflow:hidden}
.where-neon img{width:100%;height:100%;object-fit:cover}
.mani{padding:clamp(48px,6vw,96px) 0 var(--sec);background:var(--forest-900);color:var(--cream-50);--focus:var(--cream-50)}
.mani-t{font-size:clamp(30px,4.2vw,68px);font-weight:500;letter-spacing:-.04em;line-height:1.14;max-width:1180px}
.mani .ctas{margin-top:44px}
/* The kiosk: the place itself, in the hour's light */
.st-kiosk{min-height:0;margin-bottom:0;grid-template-rows:auto}
.st-kiosk-in{--px:max(var(--gut),calc((100% - var(--max)) / 2));display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,88px);padding:clamp(20px,4vh,44px) var(--px) 0}
.st-kiosk-copy{padding-bottom:clamp(28px,5vh,56px)}
.st-kiosk .st-h{font-size:clamp(46px,min(7.6vw,15svh),124px)}
.st-kiosk-copy .st-lead-s{max-width:44ch;margin-top:16px}
.st-kiosk-copy .facts{margin:22px 0 24px;max-width:560px}
.st-kiosk-copy .facts div{border-color:var(--st-line)}
.st-kiosk-copy .facts dt{color:var(--st-soft)}
.st-kiosk-copy .link{color:inherit;font-size:inherit}
.st-kiosk-photo{position:relative;margin:0;align-self:end;aspect-ratio:1/1.14;border-radius:999px 999px 0 0;overflow:hidden;background:var(--forest-900)}
.st-kiosk-photo img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kiosk-do{padding-block:var(--sec) clamp(40px,5vw,72px)}
.kiosk-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px);margin-top:clamp(28px,3vw,48px);padding-top:18px;border-top:2px solid var(--forest-950)}
.kiosk-steps .stamp{color:var(--muted)}
.kiosk-steps h3{font-size:clamp(24px,2.3vw,36px);letter-spacing:-.035em;margin:clamp(16px,3vw,40px) 0 10px}
.kiosk-steps p{color:var(--muted)}
.kiosk-qr{position:relative;padding-bottom:var(--sec)}
.kiosk-neon{margin:0;aspect-ratio:2/1;border-radius:var(--r-32);overflow:hidden;background:var(--sand)}
.kiosk-neon img{width:100%;height:100%;object-fit:cover}
.standee{position:absolute;right:clamp(16px,2.8vw,44px);bottom:calc(var(--sec) - 44px);display:grid;justify-items:center;gap:12px;width:232px}
.standee-card{width:100%;padding:22px 22px 14px;border-radius:var(--r-24);background:var(--cream-50);text-align:center;box-shadow:var(--lift)}
.standee-logo{width:62%;margin:0 auto;color:var(--forest-700)}
.standee-line{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:12px 0 14px}
.standee-qr{padding:12px;aspect-ratio:1;display:grid;place-items:center;border-radius:var(--r-16);background:#fff}
.standee-qr svg{width:100%;height:auto}
.standee-foot{margin-top:12px;font:500 10.5px/1.3 "Geist Mono",ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.standee figcaption{font-size:13.5px;color:var(--muted);line-height:1.45;text-align:center;max-width:230px;translate:0 56px}
/* Rate your order */
.rate{max-width:820px;padding-block:clamp(24px,3vw,44px) var(--sec)}
.rate-form{display:flex;flex-direction:column;gap:12px}
.rate-row{display:grid;grid-template-columns:112px 1fr;gap:clamp(14px,2vw,24px);padding:clamp(12px,1.6vw,18px);border-radius:var(--r-24);background:var(--cream-50);box-shadow:inset 0 0 0 1px var(--line)}
.rate-row.rate-delivery{display:block;padding:clamp(16px,2vw,24px)}
.rate-img{display:grid;place-items:end center;overflow:hidden;border-radius:var(--r-16);background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 40%,transparent),var(--tint))}
.rate-img img{width:100%;height:100%;object-fit:contain;padding:10px 8px 0}
.rate-main{min-width:0;padding-block:4px}
.rate-main h2{font-size:clamp(20px,1.9vw,25px);letter-spacing:-.03em}
.rate-stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;margin:6px 0 0;padding:0;border:0}
.rate-stars label{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-10);cursor:pointer;color:color-mix(in srgb,var(--forest-950) 16%,transparent);transition:color var(--t1),transform var(--t1)}
.rate-stars label svg{width:32px;height:32px;fill:currentColor}
.rate-stars input:checked~label{color:var(--rc,var(--juice-500))}
.rate-stars input:checked+label svg{animation:star-pop var(--t2) var(--ease)}
@keyframes star-pop{40%{transform:scale(1.28) rotate(-6deg)}}
.rate-stars:hover label{color:color-mix(in srgb,var(--forest-950) 16%,transparent)} /* while hovering, preview instead of the saved pick */
.rate-stars label:hover,.rate-stars label:hover~label{color:var(--rc,var(--juice-500))}
.rate-stars label:active{transform:scale(.9)}
.rate-stars input:focus-visible+label{outline:2px solid var(--forest-700);outline-offset:1px}
.rate-word{min-height:1.4em;font-size:14px;font-weight:600;margin:2px 0 8px}
.rate-row:has(input[value="1"]:checked) .rate-word::after{content:"Not for me"}
.rate-row:has(input[value="2"]:checked) .rate-word::after{content:"It was okay"}
.rate-row:has(input[value="3"]:checked) .rate-word::after{content:"Good"}
.rate-row:has(input[value="4"]:checked) .rate-word::after{content:"Really good"}
.rate-row:has(input[value="5"]:checked) .rate-word::after{content:"Loved it"}
.rate-main textarea{min-height:64px}
.rate-send{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:14px 0 calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--cream-100) 26%)}
.st-msg .rate-google{margin-top:16px;font-weight:500}
.rate-ctas{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;margin-top:clamp(22px,4vh,36px)}
.rate-ctas .link-arrow{color:var(--st-ink)}
/* The pick-up pass: a ticket on the hour's stage, two halves torn along a dotted line */
.st-pass{min-height:100svh;margin-bottom:0;grid-template-rows:1fr}
.pass{--px:clamp(14px,3.6vw,56px);display:grid;grid-template-columns:minmax(0,420px) minmax(0,260px);justify-content:center;align-items:center;gap:clamp(20px,5vw,72px);padding:clamp(16px,3vh,32px) var(--px) clamp(20px,4vh,44px)}
html[data-phase] [data-stage] .pass-card .btn:not(.btn-stage){--bg:var(--forest-700);--fg:var(--cream-50);--hov:var(--juice-500);--hfg:var(--forest-950)}
.pass-card{--focus:var(--forest-700);filter:drop-shadow(0 24px 34px rgba(14,31,20,.24));text-align:center;color:var(--ink)}
.pass-top,.pass-bot{--y:100%;padding:clamp(20px,2.4vw,28px);background:var(--cream-50);border-radius:var(--r-24);-webkit-mask:radial-gradient(circle 11px at 0 var(--y),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% var(--y),#0000 97%,#000) right/51% 100% no-repeat}
.pass-top{border-bottom:1.5px dashed var(--field);border-radius:var(--r-24) var(--r-24) 0 0}
.pass-bot{--y:0%;border-radius:0 0 var(--r-24) var(--r-24)}
.pass-solo{border-bottom:0;border-radius:var(--r-24);-webkit-mask:none}
.pass-staff{margin:0 auto 12px;width:max-content;padding:4px 12px;border-radius:999px;background:var(--forest-700);color:var(--cream-50);font-size:12px;font-weight:600}
.pass-state{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:13.5px;font-weight:600;background:var(--cream-200);color:var(--forest-950)}
.pass-state i{width:8px;height:8px;border-radius:50%;background:var(--quiet)}
.pass-state.is-ready{background:color-mix(in srgb,var(--juice-500) 24%,var(--cream-50))}
.pass-state.is-ready i{background:var(--juice-500);animation:pass-ping 1.6s var(--ease) infinite}
@keyframes pass-ping{to{box-shadow:0 0 0 10px transparent}from{box-shadow:0 0 0 0 color-mix(in srgb,var(--juice-500) 60%,transparent)}}
.pass-state.is-done{background:color-mix(in srgb,var(--leaf-500) 20%,var(--cream-50))}
.pass-state.is-done i{background:var(--leaf-500)}
.pass-card h1{font-size:clamp(34px,4vw,48px);letter-spacing:-.045em;line-height:1;margin-top:12px}
.pass-who{color:var(--muted);margin-top:6px}
.pass-qr{width:min(100%,232px);aspect-ratio:1;margin:18px auto 0;padding:12px;border-radius:var(--r-16);background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.pass-qr svg{width:100%;height:auto}
.pass-tip{font-size:13.5px;color:var(--muted);margin-top:10px}
.pass-done{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-weight:500}
.pass-done .ic{width:34px;height:34px;padding:8px;border-radius:50%;background:var(--leaf-500);color:var(--cream-50)}
.pass-items{text-align:left}
.pass-items li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.pass-items li:last-child{border-bottom:0}
.pass-items small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.pass-pay,.pass-pay>p{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px;text-align:left}
.pass-pay{margin:0 0 12px;padding:12px 16px;border-radius:var(--r-16);background:var(--cream-200)}
.pass-pay b{font-size:18px}
.pass-pay>span,.pass-pay>p>span{display:flex;align-items:center;gap:8px}
.pass-pay.is-paid{background:color-mix(in srgb,var(--leaf-500) 18%,var(--cream-50));color:var(--forest-950);font-weight:600}
.pass-pay.is-paid .ic{width:20px;height:20px;padding:4px;border-radius:50%;background:var(--leaf-500);color:var(--cream-50)}
.pass-pay.is-due{background:color-mix(in srgb,var(--juice-500) 16%,var(--cream-50))}
div.pass-pay{display:block;padding:14px 16px}
div.pass-pay small{display:block;margin-top:10px;font-size:13px;color:var(--muted);text-align:center}
.pass-paynow{margin-top:12px}
.pass-justpaid{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 14px;padding:10px 14px;border-radius:var(--r-16);background:var(--leaf-500);color:var(--forest-950);font-weight:600;font-size:14.5px}
.pass-justpaid .ic{width:18px;height:18px}
.pass-next{margin-top:16px}
.pass-find input[name=n]{margin:18px 0 12px;text-align:center;font-size:28px;font-weight:600;letter-spacing:.06em}
.pass-miss{color:var(--red);font-weight:600;font-size:14.5px;margin-bottom:12px}
.pass-hand{margin-top:14px}
.pass-paid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pass-paid .btn{padding-inline:12px;font-size:16px}
.pass-where{color:var(--st-ink)}
.pass-where h2{font-size:21px;letter-spacing:-.02em;margin-top:12px}
.pass-where p:not(.open-chip){color:var(--st-soft);margin:6px 0 12px}
@media (prefers-reduced-motion:reduce){.pass-state.is-ready i{animation:none}}

/* The bag as a page: the same markup as the drawer, in two columns */
.bag-page{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:0 clamp(24px,5vw,88px);align-items:start}
.bag-page>*{grid-column:1}
.bag-page .drawer-head{display:none}
.bag-page .ship-meter{margin:0 0 16px}
.bag-page .drawer-scroll{overflow:visible}
.bag-page .drawer-items{padding:0}
.bag-page .ditem:first-child{padding-top:6px}
.bag-page .drawer-up{padding-inline:0}
.bag-page .drawer-foot{grid-column:2;grid-row:1/span 3;position:sticky;top:calc(var(--hdr) + 16px);padding:20px 22px;border-radius:var(--r-24);box-shadow:var(--lift)}
.bag-page .drawer-empty{grid-column:1/-1;padding:clamp(24px,5vw,64px) 0}

/* ───────────── 11 · footer ───────────── */
.ftr{background:var(--forest-950);color:var(--cream);overflow:hidden;position:relative}
.ftr-close{padding:clamp(72px,9vw,140px) 0 clamp(56px,6vw,96px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(24px,3vw,40px)}
.ftr-line{font-size:clamp(42px,6.4vw,104px);letter-spacing:-.05em;line-height:.98;max-width:9.5em}
.ftr-cta-row{display:flex;gap:10px;flex-wrap:wrap}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,64px);padding:clamp(40px,5vw,72px) 0;border-top:1px solid color-mix(in srgb,var(--cream) 10%,transparent)}
.ftr-news h3{font-size:clamp(22px,1.8vw,28px);letter-spacing:-.03em;margin-bottom:8px}
.ftr-visit p{color:color-mix(in srgb,var(--cream) 72%,transparent);font-size:15px;line-height:1.6;margin-bottom:16px}
.ftr-visit h4{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--cream) 62%,transparent);margin-bottom:16px}
.open-chip{display:inline-flex!important;align-items:center;gap:10px;padding:7px 14px 7px 12px;border-radius:999px;background:color-mix(in srgb,var(--cream) 8%,transparent);color:var(--cream)!important;font-size:13.5px!important}
.kio-copy .open-chip{background:var(--cream-50);color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--line)}
.open-chip[hidden]{display:none!important}
.open-chip b{font-weight:500;white-space:nowrap}
.open-chip i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--juice);flex:none}
.open-chip.open i{background:#7CC25A}
.open-chip.open i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #7CC25A;animation:ping 1.8s var(--ease) infinite}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
.ftr-mark{display:block;padding:clamp(10px,2vw,30px) 0 clamp(16px,2.4vw,36px)}
.ftr-logo{width:100%;height:auto;overflow:visible;color:color-mix(in srgb,var(--cream) 11%,transparent);transition:color .8s var(--ease)}
.ftr-mark:hover .ftr-logo{color:color-mix(in srgb,var(--cream) 18%,transparent)}
.ftr-logo #juice{transform-box:fill-box;transform-origin:50% 100%}
/* the leaf tip sits on the logo's top edge; overflow:visible above lets the sway rise past it */
.ftr-logo #leaf{transform-box:fill-box;transform-origin:0% 100%;animation:sway 5s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(-9deg)}}

.ftr-news>p{color:color-mix(in srgb,var(--cream) 74%,transparent);max-width:360px;font-size:15.5px}
.news{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;max-width:420px}
.news input{flex:2 1 190px;min-width:0;min-height:50px;padding:0 20px;border-radius:999px;border:1px solid color-mix(in srgb,var(--cream) 18%,transparent);background:transparent;color:var(--cream)}
.news input::placeholder{color:color-mix(in srgb,var(--cream) 42%,transparent)}
.news input:hover{border-color:color-mix(in srgb,var(--cream) 32%,transparent)}
.news input:focus{border-color:var(--cream);box-shadow:0 0 0 4px color-mix(in srgb,var(--cream) 12%,transparent)}
.news input[name=name]{flex:1 1 120px}
.news .btn{flex:1 0 auto}
.news-msg{width:100%;font-size:14px;font-weight:500;color:var(--cream);min-height:20px}
.news-msg:empty{display:none}
.news-ok{width:100%;margin-top:4px;font-size:12.5px;line-height:1.5;color:color-mix(in srgb,var(--cream) 56%,transparent)}
.news-ok a,.bye-ok a,.ck a{text-decoration:underline;text-underline-offset:2px}
.news-ok a:hover,.ftr-legal button:hover{color:var(--juice-500)}
.ftr nav{display:flex;flex-direction:column;gap:10px}
.ftr nav h4{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--cream) 62%,transparent);margin-bottom:8px}
.ftr nav a{color:color-mix(in srgb,var(--cream) 80%,transparent);transition:color .3s;width:fit-content;font-size:15.5px}
.ftr nav a:hover{color:var(--juice-500)}
.ftr-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 0 28px;font-size:13.5px;color:color-mix(in srgb,var(--cream) 66%,transparent);border-top:1px solid color-mix(in srgb,var(--cream) 10%,transparent)}
.ftr-legal{display:flex;gap:18px}
.ftr-legal a:hover{color:var(--juice-500)}

/* ───────────── 12 · responsive ───────────── */
@media (max-width:1100px){
  .bxm-grid{grid-template-columns:1fr}
  .bxp-grid{grid-template-columns:1fr 1fr}
  .ftr-grid{grid-template-columns:1fr 1fr 1fr}
  .ftr-news{grid-column:1/-1}
  .habit-wide,.shop-grid:has(.taster) .habit-wide{grid-column:1/-1}
}
@media (max-width:900px){
  /* the top bar takes turns instead of squeezing */
  :root{--hdr:64px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:18px}
  .combos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .hide-s{display:none!important}
  .bag-btn{padding:0 4px 0 10px;gap:6px}
  .habit-strip .habit-h{display:block}
  .habit-strip .habit-p{display:block;margin:3px 0 0;line-height:1.45}
  .pin-dlg{width:100%;margin:auto 0 0;border-radius:28px 28px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .pin-dlg[open]{animation-name:sheetIn}
  .quiz{width:100%;margin:auto 0 0;border-radius:28px 28px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .quiz[open]{animation-name:sheetIn}
  .quiz-in{min-height:0;padding:30px 20px 24px}
  .quiz-res{grid-template-columns:96px 1fr;gap:16px}
  .quiz-img img{height:116px}
  @keyframes sheetIn{from{transform:translateY(100%)}}
  .ann{font-size:12px}
  .tabs button{font-size:34px}
  .rail-s{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);gap:12px}
  .rail-s::-webkit-scrollbar{display:none}
  .rail-s>*{flex:none;width:76vw;max-width:320px;scroll-snap-align:center}
  .facts div{grid-template-columns:90px 1fr}
  .reviews{grid-template-columns:1fr}
  .reviews-sum{position:static}
  .coupon{float:none;display:flex;margin-bottom:12px}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:34px 20px}
  .ftr-visit{grid-column:1/-1} /* the delivery lines get the whole row, so they don't break word by word */
  .ftr-base{flex-direction:column}
  .habit-wide{grid-template-columns:1fr;grid-template-rows:220px auto;min-height:0}
  .habit-wide .habit-fan{order:0}
  .acc{grid-template-columns:minmax(0,1fr)}
  .ann-me small,.ann-me i{display:none}
  .ann-me a{display:inline}
}

/* ── Daylight: stage, tab bar, sections on tablets and phones ── */
@media (max-width:1400px){.dl-x{display:none}}
@media (max-width:1240px){.hdr-tag{display:none}}
@media (max-width:1060px){.hdr-nav a{padding:0 10px}.deliv-chip{max-width:190px}.chip-t small{display:none}}
@media (max-width:1180px){
  .st-h{font-size:clamp(50px,min(9.3vw,14svh),156px)}
  .sw{width:32px;height:32px}
  .st-pick{gap:14px}
}
@media (max-height:760px) and (min-width:861px){.st-home .st-lead{display:none}.st-cta{margin-top:clamp(18px,3vh,28px)}}
@media (max-width:860px){
  :root{--hdr:60px}
  body.has-tabs{--tabs:calc(58px + env(safe-area-inset-bottom));padding-bottom:var(--tabs)}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:83;display:grid;grid-template-columns:repeat(5,1fr);height:var(--tabs);padding-bottom:env(safe-area-inset-bottom);background:var(--cream-50);box-shadow:0 -1px 0 var(--line)}
  html:has(.drawer.on) .tabbar{visibility:hidden}
  .tabbar a,.tabbar .bag-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:auto;padding:0;border-radius:0;font-size:11px;font-weight:500;line-height:1.2;color:var(--muted)}
  .tabbar .bag-btn:hover{background:none}
  .tabbar .ic{width:23px;height:23px}
  .tabbar [aria-current]{color:var(--forest-700);font-weight:600}
  .tabbar [aria-current]::before{content:"";position:absolute;top:0;width:26px;height:2.5px;border-radius:0 0 3px 3px;background:var(--forest-700)}
  .tabbar .cart-count{position:absolute;top:5px;left:calc(50% + 4px);min-width:17px;height:17px;padding:0 4px;font-size:10.5px;box-shadow:0 0 0 2px var(--cream-50)}
  .tabbar .bag-btn:not(.has) .cart-count{display:none}
  .hdr-in{grid-template-columns:auto 1fr;gap:8px;padding:0 6px 0 16px}
  .hdr-nav{display:none}
  .hdr-logo .logo{width:100px}
  .menu-btn{display:grid}
  .hide-s{display:none!important}
  .deliv-chip{max-width:min(176px,46vw);margin-right:0;height:44px;padding:0 6px 0 4px;gap:5px}
  .deliv-chip>.ic{width:28px;height:28px;padding:6px}
  .chip-t small{font-size:10.5px}
  .chip-t b{font-size:13px}

  .stage{min-height:max(600px,calc(100svh - var(--hdr) - var(--tabs)))}
  .st-main{grid-template-columns:minmax(0,1fr);gap:0;padding:16px 18px 4px;align-items:start;align-content:start}
  .st-copy{display:contents}
  .st-eye{order:1;font-size:14px;margin-bottom:10px}
  .st-h{font-size:clamp(46px,15.2vw,84px)}
  .st-home .st-h{order:2;font-size:clamp(40px,12.4vw,64px)}
  .st-lead{display:none}
  .st-show{order:3;padding-top:clamp(12px,2.4svh,24px)}
  .st-show .st-bottle{height:clamp(180px,29svh,300px)}
  .st-ring{height:80%}
  .st-pick{width:100%;margin-top:14px;gap:12px}
  .st-name{font-size:21px}
  .st-line{font-size:13.5px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:2.8em} /* two lines kept, so turning juices never moves the buttons */
  .st-sw{justify-content:flex-start;width:calc(100% + 36px);margin:6px -18px 0;padding:0 11px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent)}
  .st-sw::-webkit-scrollbar{display:none}
  .sw{flex:0 0 44px;height:44px}
  .sw i{width:20px;height:20px}
  .st-cta{order:4;margin-top:14px;gap:8px}
  .st-cta .btn{flex:1 1 0;padding:0 12px;min-height:52px;font-size:15px}
  .st-cta .btn .arrow{display:none}
  .st-trust{order:5;justify-content:center;margin:12px 0 2px;font-size:12.5px}
  .st-trust i{margin:0 8px}
  .st-foot,.st-home .st-foot{grid-template-columns:minmax(0,1fr);margin:0 18px;gap:8px;padding:10px 0 12px}
  .st-foot .dl{grid-column:1;grid-row:auto;padding-top:17px}
  .clock{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 10px}
  .clock-day{grid-column:1;grid-row:1;margin:0;font-size:18px}
  .clock-k{grid-column:2;grid-row:1;justify-content:flex-end}
  .clock-k [data-clk-k],.later .clock-press{display:none}
  .later .clock-k [data-clk-k]{display:inline}
  .clock-press::before{display:none}
  .clock-by{grid-column:1/-1;margin:0;font-size:13px}
  .dl-st{height:16px;margin-top:6px}
  .dl-x,.dl-st .dl-first,.dl-st .dl-last{display:none}
  .dl-st li{flex-direction:row;gap:4px}
  .dl-st li{font-size:11px}

  .how-head{flex-direction:column;align-items:flex-start;gap:14px}
  .how-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78%,320px);margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .how-steps::-webkit-scrollbar{display:none}
  .how-step{scroll-snap-align:start}
  .nil-top .stamp{display:none}
  .nil-grid dd{font-size:33vw}
  .nil-grid>div{padding-inline:10px}
  .nil-grid dt{font-size:13.5px;letter-spacing:-.01em}

  .sp-head{flex-direction:column;align-items:flex-start;gap:14px}
  .sp .sec-side,.sp .link-arrow{color:inherit}
  .sp-row{display:flex;height:auto;margin:0;gap:0;padding-inline:9vw;border-radius:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sp-row::-webkit-scrollbar{display:none}
  .sp-f,.sp-f.on{flex:0 0 82vw;height:min(520px,72svh);scroll-snap-align:center;scroll-snap-stop:always}
  .sp-f:first-child{border-radius:var(--r-24) 0 0 var(--r-24)}
  .sp-f:last-child{border-radius:0 var(--r-24) var(--r-24) 0}
  .sp-v,.sp-i{display:none}
  .sp-f:not(.on):not(:focus-within) .sp-more>*{opacity:1;translate:none}
  .sp-ing{display:none}
  .sp-dots{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:18px}
  .sp-dots i{width:7px;height:7px;border-radius:99px;background:var(--c);opacity:.32;transition:width .45s var(--ease),opacity var(--t2)}
  .sp-dots i.on{width:24px;opacity:1}
  .sp-f .sp-img,.sp-f.on .sp-img{width:46%;left:75%;bottom:6%}
  .sp-more{visibility:visible;opacity:1;pointer-events:auto;width:44%;top:20px;bottom:20px;left:18px}
  .sp-buy{align-items:stretch;gap:12px}
  .sp-f .sp-add{min-height:50px;padding:0 14px;font-size:15px;box-shadow:0 10px 22px -14px rgba(14,31,20,.5)}
  .sp-shots{grid-template-columns:1fr;margin-top:20px}

  .four-in{grid-template-columns:minmax(0,1fr);padding:40px 20px 24px}
  .four-photo{order:2;width:100%;max-height:none;aspect-ratio:1/1.08}
  .four-picks a{flex:1;width:auto}

  .hab-in,.kio-in,.faq-in{grid-template-columns:minmax(0,1fr)}
  .faq-in>div:first-child{position:static}
  .hab-grid{grid-template-columns:repeat(10,1fr)}
  .hab-sizes a{grid-template-columns:58px 1fr auto;gap:0 12px;align-items:center}
  .hab-sizes b{grid-row:1/3}
  .hab-sizes a>span:not(.hab-p){grid-column:2;font-size:13px;line-height:1.3}
  .hab-sizes .hab-p{grid-column:2}
  .hab-sizes em{grid-column:3;grid-row:1/3}
}
@media (min-width:600px) and (max-width:860px){
  .st-main{padding-inline:max(var(--gut),32px)}
  .st-home .st-h{font-size:clamp(64px,11.4vw,96px)}
  .st-show .st-bottle{height:clamp(260px,34svh,420px)}
  .st-pick{max-width:560px}
  .st-sw{justify-content:center;width:auto;margin:8px 0 0;padding:0;overflow:visible;-webkit-mask:none;mask:none}
  .st-cta{max-width:560px}
  .st-trust{justify-content:flex-start}
  .st-home .st-foot{margin-inline:max(var(--gut),32px)}
}
@media (max-width:860px) and (max-height:720px){
  .st-h{font-size:clamp(42px,13.4vw,84px)}
  .st-home .st-h{font-size:clamp(36px,11vw,56px)}
  .st-show .st-bottle{height:clamp(148px,24svh,180px)}
  .st-line,.st-trust,.st-foot .dl-st{display:none}
  .st-foot .dl{padding-top:14px}
  .st-main{padding-top:6px}
  .st-eye{margin-bottom:6px}
}
@media (max-width:360px){
  .chip-t{display:none}
  .deliv-chip{padding:0 8px}
}

/* ── Checkout on tablets and phones ── */
@media (max-width:1100px){
  .bo-delivery{order:2}
  #co-pay-h{order:4}
}
@media (max-width:640px){
  .ship-row{grid-template-columns:minmax(0,1fr)}
  .ship-opt{min-height:68px}
}

/* ── The weekly box on tablets and phones ── */
@media (max-width:1100px){
  .bx-in{grid-template-columns:minmax(0,1fr)}
  .bx-sum{position:relative;top:0;max-width:560px;width:100%;margin-inline:0}
}
@media (max-width:640px){
  .st-box .st-h{font-size:clamp(40px,12.4vw,72px)}
  .bxp-grid{grid-template-columns:1fr}
  .bx-h{grid-template-columns:minmax(0,1fr)}
  .bx-h .fl-tools{grid-column:1/-1;grid-row:auto;margin-top:10px}
  .pl-row{grid-template-columns:minmax(0,1fr);gap:2px}
  .pl-k{line-height:1.9}
  .pl-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .pl-pill>span{padding:0 15px}
  .pl-days .pl-pill>span{width:100%;min-width:0;padding:0;font-size:13.5px}
  .fl{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line)}
  .fl-card .stepper{margin:0}
  .fl-body{padding:0}
  .fl-card{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:0 12px;padding:6px 0;border-bottom:1px solid var(--line)}
  .fl-media{aspect-ratio:auto;height:72px;border:0;border-radius:var(--r-10)}
  .fl-media::after{display:none}
  .fl-media img{bottom:0;height:90%}
  .fl-media::before{transform:none;border-radius:0;background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 40%,transparent),var(--tint))}
  .fl-count{display:none}
  .fl-body{padding:0}
  .fl-body p{font-size:12.5px}
  .fl-card .stepper{margin:0}
  .fl-card .stepper button{width:40px;height:44px}
  .bx-sum{padding:16px}
  .bx-sum-top{flex-direction:column;gap:2px}
  .bx-sum .sub{text-align:left}
}

/* ── The product page on tablets and phones ── */
@media (max-width:1180px){
  .pst-main{grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .pst-copy{grid-column:1;grid-row:1}
  .pst-buy{grid-column:1;grid-row:2;max-width:430px}
  .pst-bottle{grid-column:2;grid-row:1/3;height:min(620px,74svh)}
  .pst-foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:860px){
  /* phones: the name, the bottle standing in the middle of its colour, then the buy panel across the full width */
  .sticky-buy{display:flex}
  .pst{min-height:0}
  .pst-main{--px:16px;grid-template-columns:minmax(0,1fr);gap:0;padding-top:14px}
  .pst-copy{grid-column:1;grid-row:1;padding-bottom:0}
  .pst-k{margin-bottom:8px}
  .pst-h{font-size:clamp(46px,14.8vw,92px)}
  .pst-line{font-size:17px;margin-top:8px;max-width:none}
  .pst-bottle{grid-column:1;grid-row:2;height:clamp(250px,36svh,400px);max-height:none;min-height:0;margin:18px 0 22px;justify-self:center;align-self:center}
  .pst-bottle.is-shot{width:auto;height:clamp(190px,28svh,300px);aspect-ratio:620/1300}
  .pst-buy{grid-column:1;grid-row:3;max-width:none;gap:16px;padding:20px 18px;margin-bottom:30px}
  .pdp-price{font-size:36px}
  .buy-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .pst-foot{grid-template-columns:minmax(0,1fr);gap:12px;margin:0 18px;padding:20px 0 22px}
  .pdp-under{padding-block:22px;gap:16px}
  .pstory-grid{grid-template-columns:minmax(0,1fr)}
  .pstory-side{position:static}
  .pstory-ing li{grid-template-columns:36px minmax(0,1fr) auto;column-gap:12px}
  .pstory-amt{grid-column:3;grid-row:1/3}
  .pnil .nil-grid dd{font-size:18vw}
}

@media (max-width:640px){html:has(.drawer.on) .toast{bottom:auto;top:20px;transform:translate(-50%,-160%)}html:has(.drawer.on) .toast.on{transform:translate(-50%,0)}}
/* ── The shop on tablets and phones ── */
@media (max-width:1100px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){
  .st-shop{margin-bottom:0;min-height:0}
  .st-shop-in{--px:18px;grid-template-columns:minmax(0,1fr);gap:10px;padding:22px 18px 16px}
  .st-shop .st-h{font-size:clamp(44px,13.4vw,84px)}
  .st-lead-s{font-size:15px}
  .st-quiz{margin-top:0;font-size:15px}
  .st-foot-2{grid-template-columns:minmax(0,1fr)}
  .chip-box{display:none}
  .chip{padding:0 16px}
  .shop-grid{--rg:34px;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--rg) 12px}
  .shelf-h{font-size:22px;flex-wrap:wrap;gap:4px 10px}
  .taster-wide{grid-template-columns:minmax(0,1fr);gap:8px}
  .taster-wide .taster-fan{height:200px}
  .taster-wide .btn{width:100%}
  .shelf-h small{font-size:13px}
  .chips{padding-block:8px}
  .pcard-body,.taster-copy{padding-inline:2px}
  .pcard-top{gap:8px}
  .pcard-title{font-size:17px}
  .pcard .price{font-size:15.5px}
  .pcard-line{font-size:13px;line-height:1.35}
  .pcard-buy{gap:6px}
  .pcard-up{gap:6px;min-width:0;min-height:44px;padding:6px 0}
  .pcard-soon .up-txt b{font-weight:500;color:var(--muted);white-space:normal}
  .pcard-soon .up-txt small{display:none}
  .pcard-soon.is-on .up-yes small{display:block}
  .pcard-soon .up-lock{width:30px;height:20px}
  .up-txt b{font-size:12.5px;letter-spacing:-.02em;white-space:nowrap}
  .up-txt small{font-size:11.5px}
  /* 44 px to tap, a 36 px circle to see */
  .pcard-title a{display:block;padding-block:12px;margin-block:-12px}
  .up-val{display:none}
  .up-sw{width:30px;height:18px}
  .up-sw i{width:14px;height:14px}
  .pcard-up[aria-checked=true] .up-sw i{transform:translateX(12px)}
  .pcard-qv{display:none}
  .pcard-save{right:-6px;top:0;width:44px;height:44px;padding:0;background:none;box-shadow:none}
  .pcard-best,.pcard-out{left:8px;top:8px}
}

@media (max-width:900px){
  .page-body.has-toc{display:block}
  .page-toc{display:none}
  .faq-page,.contact,.office{grid-template-columns:minmax(0,1fr)}
  .faq-side{position:static}
  .faq-nav{flex-direction:row;flex-wrap:wrap;gap:6px;border-top:0}
  .faq-nav a{padding:8px 14px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px}
  .kiosk-card,.office-form{position:static}
  .kiosk-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
  .kiosk-card figure{margin:0}
  .office-photo{display:none}
  .line-in,.where-in,.owin-in{grid-template-columns:minmax(0,1fr)}
  .line-big{position:relative;top:0}
  .js .line-big p{color:var(--forest-950)}
  .line-notes li{min-height:0;padding:26px 0}
  .js .sh:not(.static){height:250vh}
  .sh-b li{font-size:clamp(24px,7.4vw,44px)}
  .psr-head{flex-direction:column;align-items:flex-start}
  .psr-card{position:static;grid-template-columns:minmax(0,1fr);height:auto;border-radius:var(--r-24)}
  .psr-card figure{order:-1;aspect-ratio:1/.92}
  .psr-copy{padding:22px 20px 26px;gap:10px}
  .psr-copy .stamp{margin-bottom:0}
  .psr-copy p{margin-top:2px}
  .honest-in{grid-template-columns:minmax(0,1fr);gap:24px}
  .where-s{border-radius:var(--r-24) var(--r-24) 0 0}
  .where-photo{max-width:440px;width:100%;justify-self:center}
  .st-kiosk-in{grid-template-columns:minmax(0,1fr);gap:0;padding-inline:18px}
  .st-kiosk-photo{aspect-ratio:1/1;max-width:420px;width:100%;justify-self:center}
  .kiosk-steps{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0;border-top:2px solid var(--forest-950)}
  .kiosk-steps li{padding:16px 0;border-bottom:1px solid var(--line)}
  .kiosk-steps h3{margin:6px 0 4px}
  .kiosk-neon{aspect-ratio:3/2;border-radius:var(--r-24)}
  .standee{position:relative;right:auto;bottom:auto;z-index:1;width:100%;margin-top:-44px}
  .standee-card{width:230px}
  .standee figcaption{translate:none}
  .pass{grid-template-columns:minmax(0,420px);align-content:center}
  .pass-where{text-align:center}
  .bag-page{grid-template-columns:minmax(0,1fr)}
  .bag-page .drawer-foot{grid-column:1;grid-row:auto;position:static;margin-top:16px}
}
@media (max-width:760px){
  .row{grid-template-columns:minmax(0,1fr) auto}
  .row .stamp{grid-row:auto;grid-column:1}
  .row b,.row-t{grid-column:1}
  .row .arrow{grid-row:1/4;grid-column:2}
  .office-grid{grid-template-columns:minmax(0,1fr)}
  .rate-row{grid-template-columns:76px minmax(0,1fr)}
  .rate-stars label{width:44px;height:44px}
  .rate-stars label svg{width:30px;height:30px}
  .honest-yes li{grid-template-columns:minmax(0,1fr);gap:2px}
  .ftr-legal a{display:inline-flex;align-items:center;min-height:44px}
  .owin-art{width:min(100% - 44px,340px)}
}

/* ───────────── 13 · motion preferences ───────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .habit-tick span:first-child{opacity:1;transform:none}
  .st-h>span>span{animation:none}
  .how-tick::before,.how-tick::after,.sp-more>*{transition-delay:0s!important}
}

/* ───────────── 14 · landing page (/start/) ───────────── */
.is-bare{--st-lit:0%}
.ls-hero{--st-ink:var(--forest-950);--st-soft:var(--muted);--c:var(--juice);position:relative;isolation:isolate;overflow:hidden;color:var(--st-ink);background:#F8F5EA;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(720px,calc(100svh - var(--hdr)))}
.ls-copy{align-self:center;padding:clamp(12px,3vh,36px) clamp(18px,4vw,64px) clamp(24px,4vh,48px)}
/* One real photograph. The hero is the photo's own cream, so there is no box around it, in any phase */
.ls-photo{position:relative;min-width:0;display:flex;align-items:center}
.ls-photo>img{width:100%;height:auto}
.ls-row{display:flex;align-items:flex-end;justify-content:center;gap:1.4%;width:100%;padding:0 6% 7%}
.ls-row img{flex:1;min-width:0;width:0;height:auto;filter:drop-shadow(0 10px 12px rgba(14,31,20,.22))}
.ls-eye{font-size:15px;font-weight:500;margin-bottom:12px}
.ls-h{font-size:clamp(44px,min(5.3vw,11svh),92px);line-height:.98;letter-spacing:-.05em;font-weight:600;max-width:9em}
.ls-offer{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:clamp(14px,2.4vh,24px)}
.ls-offer b{font-size:clamp(34px,3.4vw,50px);font-weight:600;letter-spacing:-.04em;line-height:1}
.ls-offer s{font-size:18px;color:var(--st-soft)}
.ls-note{margin-top:6px;font-size:15px;line-height:1.45;color:var(--st-soft);max-width:42ch}
.ls-note .stamp{color:var(--st-ink)}
.ls-hero .btn{margin-top:clamp(14px,2.4vh,24px)}
.ls-claims{margin-top:12px;font-size:13.5px;font-weight:500;color:var(--st-soft)}
.ls-sec{padding:clamp(36px,4.6vw,68px) 0}
.ls-sec .h2{max-width:14ch;margin-bottom:clamp(18px,2.4vw,32px)}
.is-bare .reviews-home{padding-block:clamp(36px,4.6vw,68px) 0}
.ls-six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ls-six li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 14px;border-radius:var(--r-16);background:var(--tint);color:var(--ink);text-align:center}
.ls-six img{height:clamp(130px,14vw,200px);width:auto}
.ls-six b{font-weight:600;font-size:15.5px;letter-spacing:-.015em;line-height:1.15}
.ls-six span{font-size:13px;line-height:1.3;color:color-mix(in srgb,var(--ink) 74%,var(--tint))}
.ls-proofs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:6px solid var(--forest-950)}
.ls-proofs li{padding:18px clamp(14px,2vw,30px) 8px;border-left:1px solid var(--line)}
.ls-proofs li:first-child{border-left:0;padding-left:0}
.ls-proofs b{display:block;font-size:clamp(36px,4.6vw,72px);font-weight:600;letter-spacing:-.05em;line-height:1}
.ls-proofs h3{font-size:19px;letter-spacing:-.02em;margin-top:14px}
.ls-proofs p{margin-top:4px;color:var(--muted);font-size:15.5px;line-height:1.45;max-width:32ch}
.ls-way{background:var(--forest-950);color:var(--cream-50);--st-a:#0E1F14;--st-ink:var(--cream-50);--st-soft:#C4CCBD;--st-line:rgba(251,249,243,.16);--st-shadow:rgba(0,0,0,.5);--c:var(--juice);--focus:var(--cream-50);border-radius:var(--r-32);margin:0 10px;padding:clamp(40px,6vw,84px) clamp(20px,5vw,72px)}
.ls-way .h2{margin-bottom:clamp(14px,2vw,24px)}
.ls-way-in{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.6fr);gap:clamp(20px,4vw,64px);align-items:center}
.ls-way-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;margin-top:clamp(24px,3vw,40px);padding-top:18px;border-top:1px solid var(--st-line);color:#D2D8CA;font-size:15.5px;line-height:1.45}
.ls-way-list b{display:block;color:var(--cream-50);font-weight:600}
.ls-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,90px)}
.ls-last{margin-top:clamp(20px,3vw,44px);padding:clamp(56px,7vw,104px) 0 clamp(28px,3vw,44px);background:var(--forest-950);color:var(--cream-50);--focus:var(--cream-50)}
.ls-last .h2{max-width:11ch;font-size:clamp(40px,5.6vw,88px);line-height:1;letter-spacing:-.048em;margin-bottom:clamp(20px,2.6vw,32px)}
.ls-last-note{margin-top:12px;font-size:14px;color:#C4CCBD}
.ls-bar{display:none}
.ftr-bare{padding-bottom:var(--ls-bar,0px)}
.ftr-bare .ftr-base{border-top:0}
@media (max-width:860px){
  .ls-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .ls-copy{padding:14px 18px 22px}
  .ls-eye{font-size:14px;margin-bottom:6px}
  .ls-h{font-size:clamp(40px,12.4vw,72px)}
  .ls-hero .btn{width:100%}
  .ls-six{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ls-six li{padding:12px 6px 10px}
  .ls-six span{display:none}
  .ls-proofs{grid-template-columns:minmax(0,1fr)}
  .ls-proofs li,.ls-proofs li:first-child{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:12px;padding:14px 0;border-left:0;border-bottom:1px solid var(--line)}
  .ls-proofs b{grid-row:1/3;font-size:30px;white-space:nowrap}
  .ls-proofs h3{margin-top:0}
  .ls-way{margin:0 6px;border-radius:var(--r-24)}
  .ls-way-in,.ls-faq,.ls-way-list{grid-template-columns:minmax(0,1fr)}
  .ls-bar{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--forest-950);color:var(--cream-50);box-shadow:var(--lift);transform:translateY(160%);transition:transform .5s var(--ease)}
  .ls-bar.on{transform:none}
  .ls-bar div{flex:1;line-height:1.2;min-width:0}
  .ls-bar b{display:block;font-size:16px;font-weight:600}
  .ls-bar small{font-size:12.5px;color:#C4CCBD}
  .is-bare{--ls-bar:80px}
}

/* Subscription flow v2 */
/* The builder: the plan → the crate */
.bx-step{scroll-margin-top:calc(var(--hdr) + 8px)}
.bx-note{margin-bottom:clamp(18px,2vw,28px);padding:12px 16px;border-radius:var(--r-16);background:color-mix(in srgb,var(--juice-500) 14%,var(--cream-50));color:var(--forest-950);font-size:15px;font-weight:500}
.fl-tool,.bx-bar .btn{min-height:44px}
/* hover: juice orange, forest text (a chosen card keeps its forest fill; the day chips keep their orange ring, since orange fill means chosen) */
@media (hover:hover){
  .pl-pill:hover>input:not(:checked):not(:disabled)+span{background:color-mix(in srgb,var(--juice-500) 14%,var(--cream-50));box-shadow:inset 0 0 0 1px var(--juice-500)}
  .fl-tool:hover{background:var(--juice-500);box-shadow:none;color:var(--forest-950)}
}
/* The bag: make these bottles a subscription (parts/cart-drawer.php) */
.drawer-sub{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:64px;margin:4px 22px 16px;padding:12px 16px;border-radius:var(--r-16);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);color:var(--forest-950);transition:background var(--t2),box-shadow var(--t2)}
.drawer-sub b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.drawer-sub small{display:block;font-size:13.5px;color:var(--muted);transition:color var(--t2)}
.drawer-sub .arrow{width:18px;height:18px;transition:transform var(--t2) var(--ease)}
.drawer-sub:hover{background:var(--juice-500);box-shadow:none}
.drawer-sub:hover small{color:var(--forest-950)}
.drawer-sub:hover .arrow{transform:translateX(3px)}
.bag-page .drawer-sub{margin-inline:0}
/* The shop: one quiet line under the chips */
.shop-sub{margin-bottom:clamp(14px,1.6vw,22px);font-size:15px;color:var(--muted)}
.shop-sub .link{font-size:inherit;color:var(--forest-950)}
@media (max-width:640px){
  .fl-card .stepper button{width:44px}
}

/* Small fixes from the 11-14 sweep of every page */
.drawer .drawer-pin::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;background:linear-gradient(transparent,var(--cream-50));pointer-events:none} /* rows fade out under the pinned total instead of being cut mid-line */
.combos .taster-price{margin-top:auto} /* the Try 3 card lines up with the combos beside it */
.combos .taster .btn{margin-top:0}
.combos .taster-fan img{height:78%}
.woocommerce-error:focus,.woocommerce-message:focus,.woocommerce-info:focus{outline:0} /* WooCommerce moves focus to its notice for screen readers: no ring around the box */
.qa:has(+ .faq-group){border-bottom:1px solid var(--line)} /* every FAQ group closes with a line, not only the last */
@media (max-width:860px){
  html:has(.pill-bar.on) .ftr-base{padding-bottom:100px} /* the floating bag pill never sits on the footer links */
  .hdr-bare .hdr-in{padding-right:16px}
}
@media (max-width:640px){.srch-bar input{font-size:16px}} /* the whole placeholder fits */

/* The subscribe builder in three steps (your week → your juices → delivery), one on screen at a time */
.bx-steps{grid-column:1;grid-row:1}
.bx-sum{grid-column:2;grid-row:1/span 2}
.bx-pay{grid-column:1;grid-row:2}
.bx-nav{display:flex;align-items:center;gap:10px;margin:0 0 clamp(22px,2.6vw,34px);padding:0;list-style:none}
.bx-nav li{display:flex;align-items:center;gap:10px}
.bx-nav li+li::before{content:"";width:clamp(14px,2.4vw,32px);height:1px;background:var(--field)}
.bx-nav button{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.bx-nav button:disabled{cursor:default}
.bx-nav i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--field);font:500 12px/1 "Geist Mono",ui-monospace,monospace;color:var(--forest-950);transition:background-color var(--t2),box-shadow var(--t2)}
.bx-nav .is-done{color:var(--forest-950)}
.bx-nav .is-done i{box-shadow:inset 0 0 0 1.5px var(--juice-500)}
.bx-nav [aria-current]{color:var(--forest-950);font-weight:600}
.bx-nav [aria-current] i{background:var(--juice-500);box-shadow:none}
.bx-h h2:focus{outline:0} /* focus lands on the heading when a step opens, for screen readers: no ring on a title */
.bx-next{display:flex;align-items:center;gap:18px;margin-top:clamp(24px,2.8vw,36px)}
.bx-next .btn{min-width:min(100%,260px)}
.bx-next .btn:disabled .arrow{display:none}
.bx-back{min-height:44px;font-size:15px;font-weight:500;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.bx-back:hover{color:var(--forest-950)}
.bx.is-empty .bx-lines,.bx.is-empty .bx-total{display:none}
@media (max-width:1100px){
  .bx-steps,.bx-sum,.bx-pay{grid-column:1;grid-row:auto}
  .bx:not([data-at="3"]) .bx-sum{display:none} /* phones: the summary comes with the last step, above the pay button */
  .bx-sum{margin-top:clamp(24px,3vw,32px)}
}
@media (max-width:640px){
  .bx-nav button:not([aria-current]) span{display:none}
  .bx-next .btn{flex:1;min-width:0}
}