/* HYPHA — Köppen layout, Hypha fonts. Phone-first. Tokens mirror koppen.co's theme CSS; fonts mirror hypha.nz */
:root{
  --ink:#141313; --white:#fff;
  --off-white:#fffcf3; --neutral:#f5f5f1; --green-tint:#f1f1e9; --green-tint-95:rgba(241,241,233,.95);
  --fresh-green:#dbefd4; --deep-green:#0c3c1e; --cream:#eaeadf; --tile:rgba(234,234,223,.7);
  --c500:#707070; --c250:#a0a0a0; --c100:#d9d7d7; --error:#d31d1d;
  --sp:4px; --header-h:72px; --header-h-min:48px;
  --font-display:Optima,"Marcellus",system-ui,serif;              /* hypha.nz --font-display */
  --font-body:"Suisse Int'l","Hanken Grotesk",system-ui,sans-serif; /* hypha.nz --font-body */
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(0,0,.2,1);
  --card-w:calc(100vw * (240 / 375)); --set-w:calc(100vw * (363 / 375));
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--off-white);color:var(--ink);font-family:var(--font-body);font-size:14px;line-height:16.5px;letter-spacing:.005em;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
input{font:inherit}

/* type scale — Köppen sizes, Hypha faces */
.t-body{font-size:14px;line-height:16.5px;letter-spacing:.005em}
.t-body-lg{font-size:16px;line-height:20px;letter-spacing:.01em}
.t-cap{font-size:10px;line-height:12px;letter-spacing:.02em;text-transform:uppercase}
.t-cap-lg{font-size:12px;line-height:16px;letter-spacing:.02em}
.t-h-xl{font-family:var(--font-display);font-weight:400;font-size:36px;line-height:38px;letter-spacing:-.02em}
.t-h-lg{font-family:var(--font-display);font-weight:400;font-size:32px;line-height:34px;letter-spacing:-.03em}
.t-h-sm{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:27px;letter-spacing:-.02em}
.t-heading{font-family:var(--font-body);font-weight:500;font-size:32px;line-height:32px;letter-spacing:-.02em}
.med{font-weight:500}
.c500{color:var(--c500)} .c250{color:var(--c250)}
.pretty{text-wrap:pretty} .balance{text-wrap:balance}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:max-content;height:calc(var(--sp)*7);padding-inline:calc(var(--sp)*3);background:var(--green-tint);color:var(--ink);font-size:12px;line-height:16px;letter-spacing:.02em;transition:background-color .1s var(--ease-out),color .1s var(--ease-out);white-space:nowrap}
.btn:hover{background:var(--ink);color:var(--off-white)}
.btn.lg{height:calc(var(--sp)*8)}
.btn.dark{background:var(--ink);color:var(--off-white)} .btn.dark:hover{background:var(--green-tint);color:var(--ink)}
.btn .was{text-decoration:line-through;color:var(--c250)}
.btn.dark .was{color:var(--c250)}
.link{transition:opacity .1s var(--ease-out)} .link:hover{opacity:.5}
.tile{position:relative;overflow:hidden;background:var(--tile);display:flex;align-items:center;justify-content:center}
.tile img{width:100%;height:100%;object-fit:contain}
.tile.photo img{object-fit:cover}
.r45{aspect-ratio:4/5} .r11{aspect-ratio:1/1} .r-set{aspect-ratio:357/200}

/* ---------- header (Köppen two-box) ---------- */
.hdr{position:fixed;top:0;left:0;width:100%;z-index:50;padding:calc(var(--sp)*2);pointer-events:none}
.hdr-grid{display:grid;grid-template-rows:auto auto;gap:2px;width:100%;max-width:444px}
.hdr-boxes{display:grid;grid-template-columns:1fr 1fr;gap:2px;height:var(--header-h);pointer-events:auto;transition:height .3s var(--ease)}
.hdr-box{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:calc(var(--sp)*2);background:var(--green-tint-95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background-color .3s var(--ease);overflow:hidden}
.hdr-top{position:absolute;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--sp)*2)}
.wordmark{font-family:var(--font-display);font-size:15px;letter-spacing:.14em;line-height:1;text-transform:uppercase}
.hdr-icons{display:flex;align-items:center;gap:16px}
.hdr-icons svg{width:14px;height:14px;display:block}
.hdr-links{display:flex;flex-direction:column;gap:4px;transition:opacity .2s var(--ease)}
.hdr-links a,.hdr-links button{font-size:12px;line-height:16px;letter-spacing:.02em;text-align:left}
.hdr-tab{position:relative;display:flex;align-items:flex-end;padding:calc(var(--sp)*2);background:var(--green-tint-95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hdr-tab span{font-size:12px;line-height:16px;letter-spacing:.02em}
.hdr-tab:hover,.hdr-box:hover{background:var(--green-tint)}
.ship{pointer-events:auto;background:var(--fresh-green);color:var(--deep-green);padding:calc(var(--sp)*2);font-size:12px;line-height:16px;letter-spacing:.02em;display:flex;justify-content:space-between;align-items:center}
.ship button{font-size:14px;line-height:1}
.hdr.condensed .hdr-boxes{height:var(--header-h-min)}
.hdr.condensed .hdr-links{opacity:0;pointer-events:none}
.hdr.condensed .ship{display:none}
body.menu-open .hdr .hdr-links{opacity:1;pointer-events:auto}
body.menu-open .hdr .hdr-boxes{height:var(--header-h)}
body.menu-open .hdr .ship{display:flex}

/* pair panel (Köppen "Shop Bundles" tab) */
.panel{position:fixed;inset:0;z-index:40;pointer-events:none}
.panel .scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);opacity:0;transition:opacity .3s var(--ease)}
.panel .sheet{position:absolute;top:calc(var(--header-h) + 8px + 2px);left:8px;width:min(444px,calc(100% - 16px));background:var(--green-tint);padding:calc(var(--sp)*2);display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
body.panel-open .panel{pointer-events:auto}
body.panel-open .panel .scrim{opacity:1}
body.panel-open .panel .sheet{opacity:1;transform:none}
.panel .row{display:grid;grid-template-columns:64px 1fr auto;gap:8px;align-items:center}
.panel .row .tile{width:64px;height:80px}

/* cart drawer */
.cart{position:fixed;inset:0;z-index:60;pointer-events:none}
.cart .scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .3s var(--ease)}
.cart .box{position:absolute;top:8px;right:8px;bottom:8px;width:min(444px,calc(100% - 16px));background:var(--off-white);display:flex;flex-direction:column;transform:translateX(calc(100% + 16px));transition:transform .3s var(--ease)}
body.cart-open .cart{pointer-events:auto} body.cart-open .cart .scrim{opacity:1} body.cart-open .cart .box{transform:none}
.cart .head{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid var(--c100)}
.cart .items{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
.cart .item{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:start}
.cart .item .tile{width:72px;height:90px}
.cart .foot{padding:8px;border-top:1px solid var(--c100);display:flex;flex-direction:column;gap:8px}
.cart .foot .btn{width:100%}
.cart .ship-note{background:var(--fresh-green);color:var(--deep-green);padding:6px 8px}

/* ---------- sections ---------- */
.full{position:relative;height:100vh;height:100lvh;min-height:100svh;max-height:1400px;overflow:hidden;color:var(--white)}
.full .bg{position:absolute;inset:0}
.full .bg img,.full .bg video{width:100%;height:100%;object-fit:cover}
.full .bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2)}
.full .mid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:calc(var(--sp)*2)}
.full .bot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:calc(var(--sp)*2) calc(var(--sp)*2) calc(var(--sp)*8 + env(safe-area-inset-bottom))}
@media (min-width:1000px){.full .bot{padding-bottom:calc(var(--sp)*4)}}
.full .bot p{max-width:280px}
.full .top-right{position:absolute;top:calc(var(--header-h) + 18px);right:8px}
.eyebrow-top{position:absolute;top:calc(var(--header-h) + 22px);left:0;right:0;text-align:center}
.px2{padding-inline:calc(var(--sp)*2)}

/* carousels: native scroll-snap (no library) */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--card-w);gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail>li{scroll-snap-align:start}
.rail.sets{grid-auto-columns:var(--set-w);padding-inline:8px}
.rail-foot{display:flex;justify-content:space-between;align-items:center;height:46px;padding-right:8px}
.rail-foot .count{font-variant-numeric:tabular-nums}

/* product card (Köppen best-seller card) */
.card{display:flex;flex-direction:column;gap:4px;position:relative}
.card .tile .add{position:absolute;left:4px;bottom:4px}
.card .badge{position:absolute;left:4px;top:4px;height:24px;display:flex;align-items:center;padding-inline:8px;background:var(--fresh-green);color:var(--deep-green);font-size:12px;letter-spacing:.02em}
.card .alt{position:absolute;inset:0;opacity:0;transition:opacity .1s var(--ease-out);background:var(--tile)}
.card .tile:hover .alt{opacity:1}
.card .meta{display:flex;flex-direction:column;gap:6px;padding:4px 8px 0}
.card .meta h4{font-weight:500}
.card .meta .sub{margin-top:-2px}
.card .meta a.cover::after{content:"";position:absolute;inset:0}

.sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px}
.best{padding-bottom:calc(var(--sp)*8);overflow:hidden}
.best .btn.all{margin:calc(var(--sp)*8) 8px 0}

/* editorial */
.editorial{display:flex;flex-direction:column;gap:16px;padding:120px 8px 8px}
.editorial .copy{display:flex;flex-direction:column;gap:16px}
.editorial .copy .lead{display:flex;flex-direction:column;gap:4px}
.editorial .copy .txt{display:flex;flex-direction:column;gap:8px;max-width:290px}
.editorial .img{width:100%;aspect-ratio:1/1;position:relative;overflow:hidden}
.editorial .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* set details (Köppen set block, mobile) */
.set{display:flex;flex-direction:column;gap:40px;padding:0 8px 16px;overflow:clip}
.set .rail{margin-inline:-8px;padding-inline:8px}
.set .info{display:flex;flex-direction:column;gap:8px}
.set .info .lead{display:flex;flex-direction:column;gap:4px}
.set .info h4{font-weight:500}
.set .list{display:flex;flex-direction:column;align-items:flex-start;width:max-content}
.set .list li button{display:flex;align-items:center;color:var(--c500);transition:color .1s var(--ease-out)}
.set .list li button:hover,.set .list li button.on{color:var(--ink)}
.set .list li button .k{display:block;width:24px;text-align:left}
.set .desc{max-width:300px;color:var(--c500);text-wrap:balance;min-height:33px}
.set .desc b{color:var(--ink);font-weight:500;display:block;margin-bottom:2px}

/* featured ingredients */
.ings{display:flex;flex-direction:column;gap:8px;padding:32px 8px 80px}
.ings .title{padding-top:calc(var(--header-h) + 5rem)}
.ings .list{position:relative;display:flex;flex-direction:column}
.ings .list button{width:max-content;text-align:left;color:var(--c250);transition:color .1s var(--ease-out)}
.ings .list button.on{color:var(--ink)}
.ings .pic{position:absolute;top:0;right:0;width:88px;aspect-ratio:4/5;overflow:hidden}
.ings .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s var(--ease)}
.ings .pic img.on{opacity:1}
.ings .detail{display:flex;flex-direction:column;gap:8px;margin-top:40px}
.ings .detail .thumbs{display:flex;gap:2px}
.ings .detail .thumbs .tile{width:85px;aspect-ratio:4/5}
.ings .detail .body{display:flex;flex-direction:column;gap:16px;max-width:420px}
.ings .detail .body .in{display:flex;flex-direction:column;gap:4px}

/* quotes (Köppen press block) */
.press{position:relative;height:100svh;max-height:1400px;overflow:clip;color:var(--white)}
.press .bg{position:absolute;inset:0}.press .bg video,.press .bg img{width:100%;height:100%;object-fit:cover}
.press .bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25)}
.press .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.press .lbl{padding:16px 8px}
.press .q{padding:0 8px 16px;display:flex;flex-direction:column;gap:16px}
.press .q li{display:none;flex-direction:column;gap:16px;max-width:580px}
.press .q li.on{display:flex}
.press .ctl{display:flex;justify-content:space-between;align-items:center;padding:16px 0}

/* stat card (Köppen dual image text overlay) */
.stat-wrap{padding:16px 8px}
.stat{position:relative;height:700px;padding:16px;display:flex;align-items:flex-end;color:var(--white);overflow:hidden}
.stat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stat .in{position:relative;display:flex;flex-direction:column;gap:16px}
.stat .nums{display:flex;gap:24px}
.stat .nums div{display:flex;flex-direction:column;gap:4px}
.stat .txt{max-width:275px;display:flex;flex-direction:column;gap:8px}
.stat::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 55%)}

/* product sets rail (footer group) */
.sets-wrap{padding:120px 0 16px;overflow:hidden}
.setcard{display:flex;flex-direction:column;gap:8px}
.setcard .r-set{background:none;justify-content:center}
.setcard .r-set img{object-fit:contain;width:auto;max-height:100%}
.setcard .meta{display:flex;flex-direction:column;gap:4px}

/* footer */
.ftr{display:flex;flex-direction:column;gap:64px;padding:64px 8px 8px}
.ftr .cols{display:flex;flex-direction:column-reverse;gap:40px}
.ftr .lists{display:flex;flex-direction:column;gap:16px}
.ftr .lists ul{display:flex;flex-direction:column;gap:4px;width:max-content}
.ftr .news{display:flex;flex-direction:column;gap:16px;max-width:511px}
.ftr .news form{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ftr .news input{grid-column:1/-1;height:32px;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:0;outline:none;color:var(--ink)}
.ftr .news .fine{grid-column:1/-1;margin-top:2px;color:var(--c500);font-size:10px;line-height:12px}
.ftr .news .fine a{text-decoration:underline}
.ftr .news .btn{margin-top:16px}
.ftr .bottom{display:flex;flex-direction:column;gap:8px;color:var(--c500)}
.ftr .bottom .row{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ftr .bottom .cred{display:flex;gap:16px;flex-wrap:wrap}
.ftr .cyph{font-family:var(--font-display);letter-spacing:.35em;font-size:12px;color:var(--ink)}

/* shop page */
.shop-head{padding:calc(var(--header-h) + 64px) 8px 24px;display:flex;flex-direction:column;gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding-inline:2px}
.grid2 .card .meta{padding-bottom:24px}

/* product page */
.pdp{padding-top:0;display:flex;flex-direction:column;gap:16px}
.pdp .gal{display:grid;grid-auto-flow:column;grid-auto-columns:100vw;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0;scrollbar-width:none}
.pdp .gal>div.tile{aspect-ratio:auto;height:82svh;min-height:420px}
.pdp .gal>div.tile img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.pdp .gal::-webkit-scrollbar{display:none}
.pdp .gal>div{scroll-snap-align:start}
.pdp .buy{display:flex;flex-direction:column;gap:16px;padding:8px}
.pdp .buy .lead{display:flex;flex-direction:column;gap:4px}
.pdp .plans{display:flex;flex-direction:column;gap:2px}
.pdp .plan{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--green-tint);cursor:pointer;gap:8px}
.pdp .plan.on{outline:1px solid var(--ink);outline-offset:-1px}
.pdp .plan .r{display:flex;gap:8px;align-items:center}
.pdp .plan input{margin:0}
.pdp .buy .btn{width:100%;height:40px;justify-content:space-between;padding-inline:12px}
.pdp .facts{display:flex;flex-direction:column}
.pdp .facts div{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--c100)}
.pdp .facts div span:last-child{text-align:left}
.pdp .benefits{display:flex;flex-direction:column;gap:2px;padding:8px}
.pdp .benefit{background:var(--green-tint);padding:16px 12px;display:flex;flex-direction:column;gap:8px}
.pdp .benefit p{max-width:320px;color:var(--c500)}
.pdp .ingcar{display:flex;flex-direction:column;gap:8px;padding:48px 8px 16px}
.pdp .ingcar .rail{grid-auto-columns:calc(100vw*(150/375));margin-inline:-8px;padding-inline:8px}
.pdp .ingcar .ic{display:flex;flex-direction:column;gap:6px}
.pdp .ingcar .ic .tile{aspect-ratio:4/5}
.pdp .ingcar .ic p{color:var(--c500)}
.pdp .imglist{display:flex;flex-direction:column;gap:2px;padding:48px 8px 0}
.pdp .imglist figure{position:relative;aspect-ratio:4/5;overflow:hidden}
.pdp .imglist figure img{width:100%;height:100%;object-fit:cover}
.pdp .imglist figcaption{position:absolute;left:12px;bottom:12px;color:var(--white);max-width:280px}
.pdp .faq{display:flex;flex-direction:column;padding:48px 8px 0}
.pdp .faq details{border-top:1px solid var(--c100);padding:12px 0}
.pdp .faq details:last-child{border-bottom:1px solid var(--c100)}
.pdp .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-weight:500}
.pdp .faq summary::-webkit-details-marker{display:none}
.pdp .faq summary::after{content:"+"} .pdp .faq details[open] summary::after{content:"–"}
.pdp .faq p{margin-top:8px;max-width:520px;color:var(--c500)}
.pdp .related{padding:48px 0 0;overflow:hidden}

/* about page */
.about{padding:calc(var(--header-h) + 64px) 8px 0;display:flex;flex-direction:column;gap:32px}
.about .blk{display:flex;flex-direction:column;gap:12px;max-width:520px}

/* motion: quiet reveals */
.rv{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- desktop (≥1000px) — Köppen desktop: 24-col grid, 4-up rails ---------- */
@media (min-width:1000px){
  .t-h-xl{font-size:60px;line-height:62px}
  .t-h-lg{font-size:40px;line-height:42px}
  .t-h-sm{font-size:30px;line-height:32px}
  .full .mid{padding:8px;max-width:none}
  .full .mid h1{white-space:nowrap}
  .full .mid .lead-d{display:flex;gap:16px;margin-left:4px;align-items:flex-start}
  .rail{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;padding-inline:2px}
  .rail.sets{grid-template-columns:repeat(auto-fit,minmax(0,1fr));padding-inline:8px}
  .rail-foot{display:none}
  .editorial{display:grid;grid-template-columns:repeat(24,1fr);padding:200px 8px 16px;align-items:end}
  .editorial .copy{grid-column:1/7;position:sticky;bottom:16px}
  .editorial .img{grid-column:9/25}
  .set{display:grid;grid-template-columns:repeat(24,1fr);padding:112px 8px 16px;gap:8px}
  .set .rail{grid-column:1/9;grid-template-columns:repeat(4,85px);margin:0;padding:0;align-items:end}
  .set .info{grid-column:1/9}
  .set .figs{grid-column:9/25;display:flex;gap:8px;align-items:flex-start}
  .set .figs figure{position:relative;flex:1;aspect-ratio:350/430;overflow:hidden}
  .set .figs figure img{width:100%;height:100%;object-fit:cover}
  .set .figs figure span{position:absolute;top:0;left:0}
  .ings{padding:40px 8px 150px}
  .ings .list{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;align-items:start}
  .ings .list button{grid-column:1}
  .ings .pic{position:relative;grid-column:2;grid-row:1/span 12;width:100%;max-width:none;aspect-ratio:4/5;top:auto;right:auto}
  .ings .detail{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:32px;align-items:start}
  .ings .detail .thumbs{grid-column:1}
  .ings .detail .body{grid-column:2}
  .stat-wrap{display:grid;grid-template-columns:repeat(24,1fr);gap:8px;padding:24px 8px}
  .stat{grid-column:7/19;height:auto;aspect-ratio:4/5}
  .ftr{gap:24px}.ftr .cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .grid2{grid-template-columns:repeat(4,1fr)}
  .pdp{display:grid;grid-template-columns:repeat(24,1fr);gap:8px;padding-inline:8px}
  .pdp .gal{grid-column:1/16;grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;overflow:visible;padding:0}
  .pdp .gal>div.tile{aspect-ratio:4/5;height:auto;min-height:0}
  .pdp .buy{padding-top:calc(var(--header-h) + 16px)}
  .pdp .buy{grid-column:17/25;position:sticky;top:calc(var(--header-h) + 16px);height:max-content;padding:0}
  .pdp .benefits,.pdp .ingcar,.pdp .imglist,.pdp .faq,.pdp .related{grid-column:1/25}
  .pdp .benefits{flex-direction:row}.pdp .benefit{flex:1}
  .pdp .imglist{flex-direction:row}.pdp .imglist figure{flex:1}
  .pdp .ingcar .rail{grid-template-columns:repeat(6,1fr);margin:0;padding:0}
  .about{display:grid;grid-template-columns:repeat(24,1fr);gap:24px 8px}.about .blk{grid-column:9/19}
}
@media (max-width:999px){.set .figs{display:none}.full .mid .lead-d{display:none}.ings .list button.on~.pic{}}

.ings .detail .ingp{display:none}
.ings .detail .ingp.on{display:contents}
/* hero: headline at true vertical centre (Köppen), Jack's pick */
.set .figs figure.cut{background:var(--tile)} .set .figs figure.cut img{object-fit:contain}
@media (min-width:1000px){:root{--header-h:96px}}
.card .alt.photo img{object-fit:cover;width:100%;height:100%}
.setcard .r-set img[src$=".jpg"]{object-fit:cover;width:100%}
.panel .row .tile img[src$=".jpg"],.cart .item .tile img[src$=".jpg"]{object-fit:cover}
/* proof strip + visible a/b/c/d detail */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:2px 2px 0}
.proof li{background:var(--green-tint);padding:10px 12px;display:flex;flex-direction:column;gap:3px;min-height:52px}
@media (min-width:1000px){.proof{grid-template-columns:repeat(4,1fr)}}
.set .list{width:100%}
.set .list li button{align-items:flex-start;width:100%;padding:6px 0;border-top:1px solid var(--c100);color:var(--ink)}
.set .list li:last-child button{border-bottom:1px solid var(--c100)}
.set .list li button .t{display:flex;flex-direction:column;gap:2px;text-align:left}
.set .list li button .d{color:var(--c500)}
.set .desc{margin-top:8px}
.editorial.renew{padding-top:64px}
@media (min-width:1000px){.editorial.renew{padding-top:120px}}
#set-the-pair{padding-top:128px}
@media (min-width:1000px){#set-the-pair{padding-top:220px}}
.card .tile .sub{position:absolute;left:4px;bottom:36px;background:var(--off-white)}
.set{scroll-margin-top:0}
/* a/b/c/d rows: full-width rules, one edge */
.set .list{width:100%;align-items:stretch}
.set .list li{display:block;width:100%}
.set .list li button{width:100%;box-sizing:border-box}
.set .list li button .t{flex:1;min-width:0}
/* tile chips: Add on top, Sub under it */
.card .tile .add{bottom:36px}
.card .tile .sub{bottom:4px}
/* breathing room between the three set blocks */
.set + .set{padding-top:120px}
@media (min-width:1000px){.set + .set{padding-top:200px}}
/* desktop fixes: one explainer on the hero, capped hero height, readable captions, tidy grids */
@media (min-width:1000px){
  .full{min-height:0}
  .full.hero .bot{display:none}
  .pdp .imglist figure::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0))}
  .pdp .imglist figcaption{z-index:1}
  .pdp .ingcar .rail{grid-template-columns:repeat(4,1fr)}
  .pdp .ingcar[data-n="10"] .rail{grid-template-columns:repeat(5,1fr)}
  .pdp .related .rail{grid-template-columns:repeat(4,1fr)}
}
.pdp .imglist figure::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0))}
.pdp .imglist figcaption{z-index:1}
/* featured ingredients: Köppen geometry. phone: sticky thumbnail beside the names; desktop: names | text | picture in one band */
.ings .list{display:flex;flex-direction:column;position:relative}
.ings .pic{position:sticky;top:calc(var(--header-h) + 12px);order:-1;align-self:flex-end;width:88px;height:0;overflow:visible;z-index:2}
.ings .pic img{top:0;left:0;width:88px;height:110px}
.ings .list button{position:relative;z-index:1;max-width:calc(100% - 100px)}
@media (min-width:1000px){
  .ings{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:8px;padding:40px 8px 150px}
  .ings .title{grid-column:1/-1}
  .ings .list{grid-column:1;grid-row:2;display:flex;flex-direction:column;min-height:calc((100vw - 32px) / 3 * 1.25)}
  .ings .list button{grid-column:auto;max-width:none}
  .ings .pic{position:absolute;top:0;left:calc(200% + 16px);width:100%;height:auto;margin:0;aspect-ratio:4/5;order:0;align-self:auto;grid-column:auto;grid-row:auto}
  .ings .pic img{width:100%;height:100%}
  .ings .detail{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:16px;margin-top:0;align-items:flex-start}
  .ings .detail .thumbs,.ings .detail .body{grid-column:auto}
}

/* set rows, Köppen list: letter + name, no rules; detail appears on tap or hover */
.set .list li button{border:0;padding:3px 0;width:auto}
.set .list li:last-child button{border:0}
.set .list li button .n{font-weight:400}
.set .list li button.on .n{font-weight:500}
.set .detail{min-height:16px;margin-top:4px}
.set .desc{margin:0;color:var(--ink)}
.set .info{gap:12px}
.set .rail li .tile{outline:1px solid transparent;outline-offset:-1px;transition:outline-color .15s}
.set .rail li.on .tile{outline-color:var(--ink)}

.certs{display:flex;flex-direction:column;gap:2px;max-width:640px}
.cert{background:var(--green-tint);padding:14px 12px;display:flex;flex-direction:column;gap:6px}
.cert .top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.cert .links{display:flex;gap:16px;flex-wrap:wrap}
/* Köppen: add-to-cart appears on hover on a mouse, always visible on touch */
@media (hover:hover) and (pointer:fine){
  .card .tile .add,.card .tile .sub{opacity:0;transition:opacity .1s var(--ease-out)}
  .card .tile:hover .add,.card .tile:hover .sub,.card .tile:focus-within .add,.card .tile:focus-within .sub{opacity:1}
}
/* laptop: tonics tiles at Köppen's card height (their 4-up is ~445px tall; our 3-up at 4:5 was ~600) */
@media (min-width:1000px){.best .card .tile.r45,.grid2 .card .tile.r45{aspect-ratio:1/1}}
/* reviews rail (after the tonics) */
.reviews{padding:8px 0 40px;overflow:hidden}
.rcard{background:var(--green-tint);min-height:calc(var(--card-w) * 0.9);padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.rcard blockquote{text-wrap:pretty}
@media (min-width:1000px){.reviews .rail{grid-template-columns:repeat(3,1fr)}.rcard{min-height:260px;padding:24px}}
/* How It's Made on the liquid film */
.press.made .in{justify-content:flex-start}
.press .madeq{display:flex;flex-direction:column;gap:16px;padding:0 8px 24px;margin-top:auto}
.phases{display:grid;grid-template-columns:1fr 1fr;gap:2px;max-width:520px}
.phases li{background:rgba(255,252,243,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.press .who{display:flex;flex-direction:column;gap:4px}
@media (min-width:1000px){.phases{grid-template-columns:repeat(4,1fr);max-width:820px}.press .madeq{padding:0 8px 32px}}
/* How It's Made, a clean cream section where Featured Ingredients was */
.made-sec{display:flex;flex-direction:column;gap:32px;padding:calc(var(--header-h) + 48px) 8px 80px}
.made-sec .head{display:flex;flex-direction:column;gap:12px}
.made-sec .intro{max-width:420px;color:var(--c500)}
.made-sec .phases{display:flex;flex-direction:column;max-width:520px}
.made-sec .phases li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--c100);background:none;backdrop-filter:none}
.made-sec .phases li:last-child{border-bottom:1px solid var(--c100)}
.made-sec .who{display:flex;flex-direction:column;gap:6px;max-width:520px}
.press.film .bot{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:8px 8px 32px;color:var(--white)}
.press.film .in{display:none}
@media (min-width:1000px){.made-sec{display:grid;grid-template-columns:repeat(24,1fr);gap:24px 8px;padding:150px 8px 150px}.made-sec .head{grid-column:1/10}.made-sec .phases{grid-column:11/18;max-width:none}.made-sec .who{grid-column:19/25;max-width:none}}
.press.film .mid{position:absolute;inset:0;display:flex;align-items:center;padding:8px;color:var(--white)}
.made-sec .phases li{display:grid;grid-template-columns:28px 1fr auto;align-items:baseline;gap:12px}
.made-tabs .title{padding-top:calc(var(--header-h) + 3rem)}
.made-tabs .detail .thumbs .tile{width:85px;aspect-ratio:4/5}
.made-tabs .detail .thumbs .tile img{object-fit:cover}
.press .q li blockquote{max-width:620px}
@media (min-width:1000px){.press .q li blockquote.t-h-sm{font-size:36px;line-height:40px}}
/* Why we exist: three numbers and the line, over the liquid */
.press.why .in{justify-content:space-between}
.press .whyq{display:flex;flex-direction:column;gap:24px;padding:0 8px 32px}
.press .whyq .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:640px}
.press .whyq .nums div{display:flex;flex-direction:column;gap:6px}
.press .whyq .nums p.t-cap-lg{max-width:150px}
@media (max-width:999px){.press .whyq .nums{grid-template-columns:1fr 1fr}.press .whyq .nums div:last-child{grid-column:1/-1}}
/* tab sections, Köppen geometry: desktop = names | thumbs | picture with the text under the picture */
.made-tabs .title{padding-top:calc(var(--header-h) + 5rem)}
.ings .detail .body{display:flex;flex-direction:column;gap:12px}
@media (min-width:1000px){
  .ings{grid-template-columns:1fr 1fr 1fr}
  .ings .detail{grid-column:2/4;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}
  .ings .detail .ingp.on{display:contents}
  .ings .detail .thumbs{grid-column:1;justify-self:end}
  .ings .detail .body{grid-column:2;padding-top:calc((100vw - 32px) / 3 * 1.25 + 16px)}
  .ings .list{min-height:calc((100vw - 32px) / 3 * 1.25 + 160px)}
}
/* laptop hero: centred (Jack wants to see it) */
@media (min-width:1000px){
  .full.hero .mid{align-items:center;text-align:center;justify-content:center;padding:8px}
  .full.hero .mid .lead-d{flex-direction:column;align-items:center;gap:20px;margin:0}
  .full.hero .mid .lead-d p{max-width:420px}
}
.ings .list button{display:flex;align-items:baseline;gap:10px}
.ings .list button .num{min-width:14px;font-variant-numeric:tabular-nums}
.press .q li{gap:12px}
.press .q li p.t-h-xl{letter-spacing:-.02em}
.press .q li blockquote{max-width:560px}
/* how it's made: number sits with the word; one picture per tab, text under it on laptop */
.ings .list button .num{font:inherit;color:var(--c250);min-width:0}
.ings .list button.on .num{color:var(--ink)}
.ings .list button{gap:6px}
@media (min-width:1000px){
  .made-tabs .detail{grid-column:3;display:block;padding-top:calc((100vw - 32px) / 3 * 1.25 + 16px)}
  .made-tabs .detail .body{padding-top:0;max-width:420px}
}
/* compact header, always: one slim box height with the links kept */
:root{--header-h:56px;--header-h-min:56px}
@media (min-width:1000px){:root{--header-h:56px}}
.hdr-box{padding:6px 8px}
.hdr-top{padding:6px 8px}
.wordmark{font-size:14px}
.hdr-links{flex-direction:row;gap:12px}
.hdr-links a,.hdr-links button{font-size:11px;line-height:14px}
.hdr-tab{padding:6px 8px}
.hdr-tab span{font-size:11px;line-height:14px}
.hdr.condensed .hdr-links{opacity:1;pointer-events:auto}
.hdr.condensed .ship{display:flex}
.ship{padding:5px 8px;font-size:11px;line-height:14px}
.full.hero .mid{padding-top:8px}
/* step numbers: small, in their own column, words aligned */
.made-tabs .list button{display:flex;align-items:baseline;gap:0}
.made-tabs .list button .num{display:inline-block;min-width:38px;font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1;letter-spacing:.02em;color:var(--c250)}
.made-tabs .list button.on .num{color:var(--ink)}
.made-tabs .pic{z-index:2}
/* stat card: three equal columns */
.stat .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.stat .nums div p.t-cap{max-width:110px}
/* full-bleed: line at the top of the photo so it reads before any scroll */
.full.topline .bot{top:calc(var(--header-h) + 56px);bottom:auto;align-items:flex-start;padding-bottom:8px}
/* phone header: skinnier still */
@media (max-width:999px){
  :root{--header-h:46px;--header-h-min:46px}
  .hdr{padding:6px}
  .hdr-box,.hdr-tab{padding:4px 8px}
  .hdr-top{padding:4px 8px}
  .wordmark{font-size:13px}
  .hdr-links{gap:10px}
  .hdr-links a,.hdr-links button,.hdr-tab span{font-size:11px;line-height:13px}
  .ship{padding:4px 8px}
}
.full.topline .bot{top:calc(var(--header-h) + 44px)}
@media (max-width:999px){.full.topline .bot{top:calc(var(--header-h) + 40px)}}
/* why we exist: Köppen quote weight */
.press.why .q li blockquote.t-h-lg{font-size:30px;line-height:34px;max-width:620px}
@media (min-width:1000px){.press.why .q li blockquote.t-h-lg{font-size:44px;line-height:48px;max-width:860px}}
.press.why .q li p.t-cap{text-transform:uppercase;letter-spacing:.06em}
.rcard{min-height:calc(var(--card-w) * 0.95)}
.rcard blockquote{font-size:20px;line-height:24px}
@media (min-width:1000px){.reviews .rail{grid-template-columns:repeat(4,1fr)}.rcard{min-height:240px}.rcard blockquote{font-size:22px;line-height:26px}}
.full.topline .bot{top:calc(var(--header-h) + 12px)}
@media (max-width:999px){.full.topline .bot{top:calc(var(--header-h) + 12px)}}
/* shipping bar off the header (Jack) */
.hdr .ship{display:none!important}
.hdr-grid{grid-template-rows:auto}
/* laptop reviews: one scrolling row like phone */
@media (min-width:1000px){
  .reviews .rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100vw - 16px) / 3.5);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:2px;scrollbar-width:none}
  .reviews .rail-foot{display:flex;padding-left:8px}
}
/* full-bleed line: top of the photo, forced */
.full.topline .bot{top:calc(var(--header-h) + 12px)!important;bottom:auto!important;align-items:flex-start!important}
/* laptop set blocks: the big pictures only, no small duplicates above the text */
@media (min-width:1000px){.set .rail{display:none}.set .info{grid-column:1/9;align-self:start;padding-top:0}}
/* header hides while the film section is in view */
.hdr{transition:opacity .12s var(--ease)}
body.hide-hdr .hdr{opacity:0;pointer-events:none}
.press .lbl{padding-top:calc(var(--header-h) + 16px)}
/* why we exist on phone: film pinned, text rides to the bottom of the screen as you scroll (Köppen) */
/* Köppen press mechanics, measured on koppen.co: section one screen tall; the label rides with the section;
   the quote block is sticky to the bottom of the screen inside a container that starts below the label,
   so it enters tucked under the label, pins at the bottom edge once there is room, and leaves with the section. */
.press.why{height:100svh;min-height:0;max-height:1400px;overflow:clip;position:relative}
.press.why .bg{position:absolute;inset:0;height:auto}
.press.why .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start}
.press.why .lbl{flex:none;padding:calc(var(--header-h) + 16px) 8px 16px}
.press.why .in > .q{flex:1;position:relative;display:flex;flex-direction:column;padding:0}
.press.why .qs{position:sticky;bottom:0;margin-top:auto;padding:0 8px 24px;display:flex;flex-direction:column;gap:16px;transform:none!important}
}
/* product page: quick links, Benefits | How to use tabs, ingredient learn-more */
.pdp .quick{display:flex;flex-direction:column;margin-top:8px}
.pdp .quick a{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--c100)}
.pdp .quick a:last-child{border-bottom:1px solid var(--c100)}
.pdp .quick a::after{content:"→";color:var(--c500)}
.pdp .tabsec{padding:40px 8px 0;display:flex;flex-direction:column;gap:12px}
.pdp .tabhead{display:flex;gap:16px}
.pdp .tabhead button{color:var(--c250)} .pdp .tabhead button.on{color:var(--ink)}
.pdp .tabpane{display:none} .pdp .tabpane.on{display:block}
.pdp .tabpane .benefits{padding:0}
.pdp .steps{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pdp .steps li{background:var(--green-tint);padding:14px 12px;display:flex;flex-direction:column;gap:6px}
.pdp .ingcar .ic .more summary{list-style:none;cursor:pointer;margin-top:4px;text-decoration:underline}
.pdp .ingcar .ic .more summary::-webkit-details-marker{display:none}
.pdp .ingcar .ic .more p{margin-top:6px}
@media (min-width:1000px){.pdp .tabsec{grid-column:1/25}.pdp .steps{grid-template-columns:repeat(4,1fr)}}
/* phone hero: the raw Hypha film in black and white; laptop keeps the photo */
.full.hero .bg video.herofilm{display:none}
@media (max-width:999px){
  .full.hero .bg img{display:none}
  .full.hero .bg video.herofilm{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
}
/* the set layer: one wide Pair card at the bottom (Köppen's sets rail) */
.sets-wrap{padding:96px 0 24px}
.pairset{padding:0 8px;display:flex;flex-direction:column;gap:12px}
.pairset .r-set{aspect-ratio:4/3;background:var(--tile)}
.pairset .r-set img{width:100%;height:100%;object-fit:cover}
.pairset .meta{display:flex;flex-direction:column;gap:8px}
.pairset .meta .row{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.pairset .inside{display:flex;flex-direction:column;gap:2px}
.pairset .inside .k{display:inline-block;width:22px}
.pairset .btns{display:flex;gap:2px;margin-top:4px}
@media (min-width:1000px){.pairset{display:grid;grid-template-columns:repeat(24,1fr);gap:8px;padding:0 8px}.pairset .r-set{grid-column:1/17;aspect-ratio:16/9}.pairset .meta{grid-column:17/25;align-self:end}}
/* product page, Köppen buy box */
.pdp .plans2{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pdp .plan2{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--green-tint);cursor:pointer;border:1px solid transparent;min-height:104px}
.pdp .plan2.on{border-color:var(--ink)}
.pdp .plan2 input{position:absolute;opacity:0;pointer-events:none}
.pdp .plan2 .chips{display:flex;gap:2px;margin-top:auto;padding-top:8px}
.pdp .chip{background:var(--fresh-green);color:var(--deep-green);font-size:11px;line-height:14px;padding:4px 8px}
.pdp .btn.bar{width:100%;height:36px;justify-content:space-between;padding-inline:12px}
.pdp .btn.bar.buynow{margin-top:-12px;background:transparent;box-shadow:inset 0 0 0 1px var(--ink)} .pdp .btn.bar.buynow:hover{background:var(--ink);color:var(--off-white)} .pdp .btn.bar.buynow:hover .c500{color:var(--off-white)}
.pdp .note{max-width:420px;color:var(--c500)}
.pdp .ktabs{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.pdp .krow{display:flex;gap:16px;border-bottom:1px solid var(--c100)}
.pdp .krow button{padding:6px 0 8px;color:var(--c500);border-bottom:1px solid transparent;margin-bottom:-1px}
.pdp .krow button.on{color:var(--ink);border-bottom-color:var(--ink)}
.pdp .kpane{display:none;grid-template-columns:1fr 136px;gap:16px;align-items:start}
.pdp .kpane.on{display:grid}
.pdp .ktext{display:flex;flex-direction:column;gap:8px}
.pdp .ktext .btn{margin-top:8px;width:max-content}
.pdp .kpic{aspect-ratio:4/5;width:136px}
.pdp .plus{display:flex;flex-direction:column;gap:6px}
.pdp .plus li{display:flex;gap:8px;align-items:center}
.pdp .plus li::before{content:"";width:12px;height:12px;border:1px solid var(--ink);border-radius:50%;display:inline-block;background:radial-gradient(circle,var(--ink) 0 1px,transparent 1.5px),linear-gradient(var(--ink),var(--ink)) center/6px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 6px no-repeat}
.pdp .stepsmini{display:flex;flex-direction:column;gap:6px}
.pdp .stepsmini li{display:flex;gap:8px}
.pdp .stepsmini .n{flex:none;width:22px;color:var(--c500)}
.pdp .complete{display:flex;flex-direction:column;gap:8px;margin-top:32px}
.pdp .ccard{display:grid;grid-template-columns:1fr 120px;gap:12px;background:var(--green-tint);padding:12px}
.pdp .cmeta{display:flex;flex-direction:column;gap:4px}
.pdp .cimg{width:120px;aspect-ratio:1/1}
.pdp .others{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.pdp .orow{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--c100)}
.pdp .oimg{width:64px;height:64px}
.pdp .facts{margin-top:24px}
/* desktop: buy box left, sticky gallery right (Köppen) */
@media (min-width:1000px){
  .pdp .buy{grid-column:1/9;grid-row:1;position:relative;top:auto;padding-top:calc(var(--header-h) + 64px)}
  .pdp .gal{grid-column:9/25;grid-row:1;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--tile)}
  .pdp .gal>div.tile{aspect-ratio:auto;height:auto;min-height:0;flex:1;display:none}
  .pdp .gal>div.tile:first-child{display:flex}
  .pdp .gal>div.tile img{object-fit:contain}
}
/* what people say: skinnier cards */
.rcard{min-height:0;padding:14px 12px;gap:14px}
.rcard blockquote{font-size:16px;line-height:20px}
.reviews{padding:8px 0 24px}
@media (min-width:1000px){.rcard{min-height:0;padding:16px}.rcard blockquote{font-size:18px;line-height:22px}}
/* phone hero: Shop button centred against the text beside it */
@media (max-width:999px){.full.hero .bot{align-items:center}}
.pdp .stepsmini{padding-left:0;margin:0}
.pdp .plus{padding-left:0;margin:0}
.pdp .kpic img{width:100%;height:100%;object-fit:cover;display:block}
.pdp .plus.cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}

/* product page: the gallery only sticks within the buy-box row, never over the sections below */
.pmain{display:flex;flex-direction:column;gap:16px}
@media (min-width:1000px){
  .pdp{display:block;padding-inline:8px}
  .pmain{display:grid;grid-template-columns:repeat(24,1fr);gap:8px;align-items:start}
  .pmain .buy{grid-column:1/9;grid-row:auto;position:relative;top:auto;padding-top:calc(var(--header-h) + 64px)}
  .pmain .gal{grid-column:9/25;grid-row:auto;position:sticky;top:0;height:100vh}
  .pdp .benefits,.pdp .ingcar,.pdp .imglist,.pdp .faq,.pdp .related,.pdp .tabsec{grid-column:auto}
}
/* full-bleed: the line sits at the very top edge of the photo (not under where the header would be), and the photo gets air above it */
.full.topline .bot{top:14px!important}
.full.topline{margin-top:72px}
@media (min-width:1000px){.full.topline{margin-top:120px}.full.topline .bot{top:16px!important}}
/* 16 Sep: gap after How It's Made matches the gap before it (photo -> title) */
.ings.made-tabs{padding-bottom:calc(var(--header-h) + 5rem + 32px)}
@media (min-width:1000px){.ings.made-tabs{padding-bottom:calc(var(--header-h) + 5rem + 40px)}}

/* 16 Sep: cards carry the subscription price only; add button back to the bottom corner */
.card .tile .add{bottom:4px}
/* 16 Sep: How It's Made picture no longer rides with the scroll on phone */
@media (max-width:999px){.made-tabs .pic{position:absolute;top:0;right:0;height:auto;aspect-ratio:4/5;order:0;align-self:auto;overflow:hidden}.made-tabs .pic img{position:absolute;inset:0;width:100%;height:100%}}

/* 16 Sep: View All removed; gap tonics -> reviews equals gap reviews -> ritual (reviews pb 24 + editorial pt 120/200, minus reviews pt 8) */
.best{padding-bottom:136px}
@media (min-width:1000px){.best{padding-bottom:216px}}
/* 16 Sep: breathing room in the How It's Made list: before step 1 and before California */
.made-tabs .list button[data-ing="ferment"]{margin-top:10px}
.made-tabs .list button[data-ing="california"]{margin-top:14px}

/* 16 Sep: a/b/c/d rows show title and detail together, no tap needed */
.set .list li button .t{display:block;text-align:left;text-wrap:pretty}
.set .list li button .n{color:var(--ink)}
.set .list li button .d{color:var(--c500);margin-left:2px}
/* 16 Sep: desktop product page: buy box and gallery share row 1 (gallery is first in the DOM, so auto-placement was pushing the text below a 100vh gallery) */
@media (min-width:1000px){.pmain .buy{grid-row:1}.pmain .gal{grid-row:1}}

/* 16 Sep: a/b/c/d rows one colour, one line: title weight 500, detail 400, both ink; smaller on phone so each row fits a line */
.set .list li button .n{color:var(--ink);font-weight:500}
.set .list li button .d{color:var(--ink);font-weight:400;margin-left:0}
.set .list li button .k{color:var(--ink)}
@media (max-width:999px){.set .list li button{font-size:12px;line-height:18px}.set .list li button .k{width:20px}}
/* 16 Sep: a breath between the hero and The Tonics (was 8px) */
.best{padding-top:40px}
@media (min-width:1000px){.best{padding-top:64px}}

/* 16 Sep: new phone hero film, colour pulled down to about a third (not full B&W, not full colour); ?colour=1 and ?bw=1 to compare */
@media (max-width:999px){.full.hero .bg video.herofilm{filter:grayscale(.65) contrast(1.02)}}
body.film-colour .full.hero .bg video.herofilm{filter:none}
body.film-bw .full.hero .bg video.herofilm{filter:grayscale(1)}
.full.hero .snd{display:none;position:absolute;right:8px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:3;padding:6px 10px;border:1px solid rgba(255,255,255,.6);color:var(--white);background:rgba(0,0,0,.25);backdrop-filter:blur(4px)}
@media (max-width:999px){.full.hero .snd{display:inline-flex}}
/* 16 Sep: reviews -> ritual trimmed a little (Jack), and tonics -> reviews trimmed the same so the two stay equal */
.editorial{padding-top:96px}
.best{padding-bottom:112px}
@media (min-width:1000px){.editorial{padding-top:160px}.best{padding-bottom:176px}}
/* 16 Sep: ONE rhythm between every home section (Jack: "gaps even between each section"). --gap is the visual distance
   from the end of one section to the first text/photo of the next; each boundary below subtracts the neighbour's own padding.
   Hero -> Tonics is the one deliberate half-step (40/64). Change --gap here and everything moves together. */
:root{--gap:176px}
@media (min-width:1000px){:root{--gap:216px}}
.best{padding-bottom:calc(var(--gap) - 8px)}                 /* reviews sec-head has 8px top padding */
.editorial{padding-top:calc(var(--gap) - 24px)}              /* reviews bottom padding 24 */
.editorial + .set{padding-top:calc(var(--gap) - 8px)}        /* editorial bottom padding 8 */
.set + .set{padding-top:calc(var(--gap) - 16px)}             /* set bottom padding 16 */
.full.topline{margin-top:calc(var(--gap) - 16px)}
.ings.made-tabs{padding-top:0}
.made-tabs .title{padding-top:var(--gap)}
.ings.made-tabs{padding-bottom:var(--gap)}
.stat-wrap{padding-top:var(--gap)}
@media (min-width:1000px){
  .best{padding-bottom:calc(var(--gap) - 8px)}
  .editorial{padding-top:calc(var(--gap) - 24px);padding-bottom:16px}
  .editorial + .set{padding-top:calc(var(--gap) - 16px)}
  .set + .set{padding-top:calc(var(--gap) - 16px)}
  .full.topline{margin-top:calc(var(--gap) - 16px)}
  .ings.made-tabs{padding-top:0;padding-bottom:var(--gap)}
  .made-tabs .title{padding-top:var(--gap)}
  .stat-wrap{padding-top:var(--gap)}
}
/* 16 Sep: review cards all the same size: every card fills its rail cell, so the row takes the tallest card's height */
.reviews .rail>li{display:flex;align-items:stretch}
.reviews .rail>li .rcard{flex:1;width:100%;height:auto;min-height:100%}
/* 16 Sep: sound pill moved to the top-right under the header, smaller, off the Shop button */
.full.hero .snd{top:calc(var(--header-h) + 18px);bottom:auto;right:8px;padding:3px 7px;font-size:10px;line-height:14px;letter-spacing:.06em;text-transform:uppercase;border-color:rgba(255,255,255,.45);background:rgba(0,0,0,.2)}
/* 16 Sep: Jack was right, reviews -> ritual read 46px bigger: the rail-foot (count + arrows, 46px) sits under the cards on phone and desktop. Subtract it. */
.editorial{padding-top:calc(var(--gap) - 24px - 46px)}
@media (min-width:1000px){.editorial{padding-top:calc(var(--gap) - 24px - 46px)}}
/* 16 Sep: optical trim, tonics -> reviews. Nothing hidden sits under the cards (checked: no rail-foot there); the cards end in light caption text and the reviews open with a caption, so the same measured gap reads larger. Pulled in 24/32. */
.best{padding-bottom:calc(var(--gap) - 8px - 24px)}
@media (min-width:1000px){.best{padding-bottom:calc(var(--gap) - 8px - 32px)}}
/* 16 Sep: phone hero. Headline stays where it was (Jack's pick); the bottom text + Shop button stay in .bot and sit ABOVE the URL bubble:
   100lvh - 100svh is exactly the height of the browser chrome that is showing on load. The hero still fills the large viewport. */
@media (max-width:999px){
  .full.hero{height:100lvh;min-height:100svh;max-height:none}
  .full.hero .bot{padding-bottom:calc(100lvh - 100svh + 20px + env(safe-area-inset-bottom))}
}
}
/* 16 Sep: iOS full-screen hero fix. The cart drawer and the Shop-the-Pair panel are fixed, viewport-sized containers whose slid-out children
   sit off-canvas to the right (measured: cart box at x 401-778 on a 393px phone). WebKit lets that overflow widen the page, which is why the
   phone showed the hero short with the next section under it. Clip them, and clip the root as well. */
.cart,.panel{overflow:hidden}
html,body{overflow-x:clip}

/* 16 Sep: product page. Facts grid replaced by the chemist line under the tag; Complete-the-ritual band after the photos (Köppen's second placement) */
.pdp .spec{font-size:11px;line-height:18px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);max-width:340px;text-wrap:pretty}
.pdp .spec a{text-decoration:underline;text-underline-offset:2px}
.pdp .caf{margin-top:-8px}
.pdp .ctr{display:flex;flex-direction:column;gap:8px;padding:8px 0}
.pdp .ctr .cimg{aspect-ratio:4/5;width:100%}
.pdp .ctr .ctext{display:flex;flex-direction:column;gap:12px;padding:8px;background:var(--green-tint)}
.pdp .ctr .ctext p.t-body{max-width:340px}
.pdp .ctr .btn.bar{margin-top:4px}
@media (min-width:1000px){.pdp .ctr{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}.pdp .ctr .cimg{aspect-ratio:auto;height:100%}.pdp .ctr .ctext{justify-content:flex-end;padding:24px}}
/* 16 Sep: desktop band capped so the text is on screen with the photo */
@media (min-width:1000px){.pdp .ctr .cimg{aspect-ratio:auto;height:560px}.pdp .ctr .ctext{justify-content:center}}
/* 16 Sep: facts grid restored (the chemist line was hard to read), placed under the tabs with its own caption */
.pdp .facts .fhead{grid-column:1/-1;padding-bottom:2px}
.pdp .spec,.pdp .caf{display:none}
.pdp .facts .fhead{display:block;border-top:0;padding:0 0 6px}
/* 16 Sep: no small photo beside the tab panels (Jack); text takes the full width */
.pdp .kpic{display:none}
.pdp .kpane.on{grid-template-columns:1fr}
/* 16 Sep: laptop hover fix. The card's full-cover link (a.cover::after) sat over the tile, so .tile:hover never fired and the Add button was under the overlay. Show on card hover and lift the button above the cover. */
.card .tile .add{z-index:2}
@media (hover:hover) and (pointer:fine){.card:hover .tile .add,.card:focus-within .tile .add{opacity:1}}

/* 16 Sep: cart upgrade to subscription under any one-time line */
.cart .item .upg{grid-column:1/-1;background:var(--green-tint);padding:8px 10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cart .item .upg p{max-width:300px}
/* 16 Sep: hero button scrolls to The Tonics (three products, no separate page needed); heading lands just under the fixed header */
.best{scroll-margin-top:48px}

/* 16 Sep: How It's Made rebuilt. Numbers as a small tracked index set to the top of the word; short step names on phone;
   phone stack = list, full-width photo, detail; desktop = list | detail | photo with no hole. */
.made-tabs .list button{display:flex;align-items:flex-start;gap:0;width:100%;max-width:none}
.made-tabs .list button .num{display:inline-block;min-width:32px;font-family:var(--font-body);font-weight:400;font-size:11px;line-height:1;letter-spacing:.2em;color:var(--c250);padding-top:7px}
.made-tabs .list button.on .num{color:var(--ink)}
.made-tabs .list button .w .sht{display:none}
.made-tabs .list button.is-open{color:var(--ink)}
.made-tabs .list button.is-close{border-top:1px solid var(--c100);padding-top:12px;margin-top:16px}
@media (max-width:999px){
  .made-tabs .list button .w .lng{display:none}
  .made-tabs .list button .w .sht{display:inline}
  .made-tabs .pic{position:static;order:99;width:100%;height:auto;aspect-ratio:4/5;margin-top:20px;align-self:stretch;overflow:hidden}
  .made-tabs .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .made-tabs .pic{position:relative}
  .made-tabs .list button{max-width:none}
  .made-tabs .detail{margin-top:16px}
}
@media (min-width:1000px){
  .made-tabs .detail{grid-column:2;grid-row:2;display:block;padding-top:0;padding-left:8px}
  .made-tabs .detail .body{padding-top:0;max-width:400px}
  .made-tabs .list{min-height:calc((100vw - 32px) / 3 * 1.25)}
  .made-tabs .list button .num{padding-top:9px}
}
/* 16 Sep: phone How It's Made photo shorter so the step text sits on the same screen */
@media (max-width:999px){.made-tabs .pic{aspect-ratio:16/10;margin-top:16px}.made-tabs .detail{margin-top:12px}}

/* 16 Sep: phone tonics rail shows ONE card at a time (feedback: half of the next card was showing); counter + Next under it like the reviews.
   The 46px rail-foot is subtracted from the tonics -> reviews gap so the rhythm holds. */
@media (max-width:999px){
  .best .rail{grid-auto-columns:calc(100vw - 20px);scroll-snap-type:x mandatory}
  .best .rail>li{scroll-snap-align:start}
  .best{padding-bottom:calc(var(--gap) - 8px - 24px - 46px)}
}
@media (max-width:999px){.best .rail{grid-auto-columns:calc(100vw - 4px)}}

/* 16 Sep: dots under the tonics rail on phone (swipe cue), replacing the counter there; one-time nudge is in app.js */
.best .dots{display:none}
@media (max-width:999px){
  .best .dots{display:flex;justify-content:center;align-items:center;gap:8px;height:28px;padding:0}
  .best .dots button{width:6px;height:6px;border-radius:50%;background:var(--c250);padding:0;border:0;transition:background .2s var(--ease)}
  .best .dots button.on{background:var(--ink)}
  .best{padding-bottom:calc(var(--gap) - 8px - 24px - 28px)}
}

/* 17 Sep: Jack: tonics rail back to what it was (card + peek); the set blocks below show ONE photo at a time with dots on phone */
.dots{display:none}
@media (max-width:999px){
  .best .rail{grid-auto-columns:var(--card-w);scroll-snap-type:x mandatory}
  .best{padding-bottom:calc(var(--gap) - 8px - 24px)}
  .set .rail{grid-auto-columns:calc(100vw - 16px)}
  .set .dots{display:flex;justify-content:center;align-items:center;gap:8px;height:28px;padding:0;margin-top:-12px}
  .set .dots button{width:6px;height:6px;border-radius:50%;background:var(--c250);padding:0;border:0;transition:background .2s var(--ease)}
  .set .dots button.on{background:var(--ink)}
}
/* 17 Sep: set-block tiles: gap equals the side padding so the next photo is fully off-screen */
@media (max-width:999px){.set .rail{grid-auto-columns:calc(100vw - 16px);gap:16px}}
/* 17 Sep: set-block photos a touch smaller on phone: square instead of 4:5 (about a fifth shorter), still full width */
@media (max-width:999px){.set .rail .tile.r45{aspect-ratio:1/1}}

/* 17 Sep: product page three photos: phone = side swipe with a peek of the next and dots; laptop = the same three-across row as before */
.pdp .imglist{display:block}
.pdp .imglist .rail{display:flex;flex-direction:row;gap:2px;overflow:visible;padding:0;margin:0}
.pdp .imglist .rail>li{flex:1;display:block;min-width:0}
.pdp .imglist .rail figure{width:100%}
.pdp .imglist .dots{display:none}
@media (max-width:999px){
  .pdp .imglist .rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100vw - 16px - 44px);gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-8px;padding-inline:8px}
  .pdp .imglist .rail::-webkit-scrollbar{display:none}
  .pdp .imglist .rail>li{scroll-snap-align:start}
  .pdp .imglist .dots{display:flex;justify-content:center;align-items:center;gap:8px;height:28px;margin-top:4px}
  .pdp .imglist .dots button{width:6px;height:6px;border-radius:50%;background:var(--c250);padding:0;border:0}
  .pdp .imglist .dots button.on{background:var(--ink)}
}
/* 17 Sep: snap points respect the 8px side padding, so the one-at-a-time tile sits centred with equal margins */
@media (max-width:999px){.set .rail,.pdp .imglist .rail{scroll-padding-inline:8px}.set .rail>li{scroll-snap-align:start}}
/* 17 Sep: set-block tiles on phone: snap respects the 8px side padding, so the one-at-a-time photo sits centred with equal margins */
@media (max-width:999px){.set .rail{scroll-padding-inline:8px}.set .rail>li{scroll-snap-align:start}}
/* 17 Sep: laptop hero photo framed lower so the whole bottle and the bench are in view (Jack) */
@media (min-width:1000px){.full.hero .bg img{object-position:50% 82%}}
/* 17 Sep: hero photo a touch lower again so the bottle sits clear beneath the headline and button */
@media (min-width:1000px){.full.hero .bg img{object-position:50% 66%}}

/* 17 Sep: laptop hero as a diptych (Jack): left, the woman taking it; right, the dropper and the liquid. Phone keeps the film. */
@media (min-width:1000px){
  .full.hero .bg img{position:absolute;top:0;left:0;width:50%;height:100%;object-fit:cover;object-position:50% 55%}
  .full.hero .bg img.split{left:50%;object-position:50% 45%}
}
@media (max-width:999px){.full.hero .bg img.split{display:none}}

@media (min-width:1000px){.full.hero .bg img.split{object-position:50% 50%}}
/* 17 Sep: left half = the profile with the dropper at the lips (file pair-boxes.jpg, misnamed) */
@media (min-width:1000px){.full.hero .bg img:not(.split){object-position:50% 40%}}

/* 17 Sep: laptop hero = the niche shot (the one landscape photo), bottles framed low, headline lifted into the plaster. Diptych retired. */
@media (min-width:1000px){
  .full.hero .bg img,.full.hero .bg img:not(.split){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
  .full.hero .mid{padding-bottom:30vh}
}

/* 17 Sep: back to the original laptop hero (bathroom counter, hand and dropper), framed so the bottle sits clear under the text; headline back to centre */
@media (min-width:1000px){
  .full.hero .bg img,.full.hero .bg img:not(.split){object-position:50% 66%}
  .full.hero .mid{padding-bottom:8px}
}

/* reviews (Judge.me, 1 Oct 2026): stars line under the product name, photos sent with a review */
.stars{display:inline-flex;gap:6px;align-items:baseline;margin-top:4px;text-decoration:none;color:inherit}
.stars .st,.faq .st{letter-spacing:1px;color:#141313}
.rpics{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.rpics img{width:64px;height:64px;object-fit:cover;background:#EAEADF}

/* Afterpay line under the one-off price (1 Oct 2026) */
.plan2 .ap{display:block;margin-top:6px;font-size:11px;line-height:1.3;color:inherit}
/* TRUST LINE under the home Tonics cards (Jack, 2 Oct 2026): replaced the black "Tested every batch" strip. */
.best .trust{margin:16px 8px 0}
.best .trust .u{text-decoration:underline;text-underline-offset:2px}
/* JUDGE.ME STARS on the home review cards (2 Oct 2026); only rendered when REVIEWS_SOURCE=judgeme. */
.reviews .st,.sec-head .st{letter-spacing:.08em;color:var(--ink)}
.rcard p.st{margin:0 0 8px}
/* REVIEWS BAND TIGHTER (Jack, 2 Oct 2026: "way too much white space either side of the reviews"). Deliberate exception to the
   one --gap rhythm: Tonics -> reviews ~48/64px, reviews -> The Ritual ~72/96px. Delete this block to return to --gap. */
main > .best{padding-bottom:40px}
main > .editorial{padding-top:48px}
@media (min-width:1000px){main > .best{padding-bottom:56px} main > .editorial{padding-top:72px}}
/* HEADER V2 (Jack, 2 Oct 2026): full-width banner on top, then one bar: links left, HYPHA centred, account + cart right. */
:root{--bn-h:34px;--bar-h:44px;--header-h:calc(var(--bn-h) + var(--bar-h))}
@media (min-width:1000px){:root{--header-h:calc(var(--bn-h) + var(--bar-h))}}
.hdr.hdr2{padding:0;pointer-events:auto}
.hdr2 .bn{height:var(--bn-h);display:flex;align-items:center;background:#0f2730;color:var(--off-white);overflow:hidden;position:relative}
.hdr2 .bn-track{display:flex;width:max-content;animation:bn-slide 45s linear infinite}
.hdr2 .bn:hover .bn-track{animation-play-state:paused}
.hdr2 .bn-run{display:flex;align-items:center;flex-shrink:0}
.hdr2 .bn-i{font-size:13px;font-weight:500;letter-spacing:.03em;white-space:nowrap;padding:0 28px}
.hdr2 .bn-s{font-family:var(--font-display);font-size:12px;opacity:.55}
@keyframes bn-slide{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@media (min-width:1000px){.hdr2 .bn-i{font-size:14px;padding:0 36px}}
@media (prefers-reduced-motion:reduce){.hdr2 .bn-track{animation:none;margin:0 auto}.hdr2 .bn-run[aria-hidden]{display:none}}
/* banner colour history: deep green (2 Oct am) → cream (2 Oct) → deeper sand #e4e0d0 → bottle blue #0f2730 (sampled from the hero bottle, lifted a touch so it reads blue) (2 Oct). Moving banner from 2 Oct. */
.hdr2 .bar{height:var(--bar-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px;background:rgba(228,224,208,.97);border-bottom:1px solid rgba(20,19,19,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hdr2 .bar-l{display:flex;gap:16px;font-size:12px;letter-spacing:.02em}
.hdr2 .bar-l button{font-size:12px;letter-spacing:.02em}
.hdr2 .wordmark{font-size:17px;letter-spacing:.2em}
.hdr2 .bar-r{justify-self:end}
.hdr2.condensed .bn{display:flex}
@media (max-width:999px){
  .hdr2 .bar-pair{display:none}
  .hdr2 .bar-l{gap:12px;font-size:11px}
}
.panel .sheet{top:calc(var(--header-h) + 8px)}
/* ROUNDED PHOTOS (Jack, 2 Oct 2026): soft corners on every photo tile; full-bleed hero/film sections stay square. */
.tile,.kpic,.pic img,.pic video,.figs figure,.rpics img,.stat > img,.cimg,.imglist img,.editorial .img,main figure{border-radius:8px;overflow:hidden}
/* MADE THE SLOW WAY title (Jack, 2 Oct 2026): a little bigger, with room before "120 days". */
.made-tabs .title h2{font-size:14px;line-height:18px;letter-spacing:.06em;font-weight:500}
.made-tabs .title{padding-bottom:28px}
@media (min-width:1000px){.made-tabs .title h2{font-size:16px;line-height:20px}.made-tabs .title{padding-bottom:36px}}
/* card "full breakdown" cue (Jack, 2 Oct 2026, option A): the whole card is already a link (a.cover); this line makes it obvious. */
.card .meta .more{margin-top:6px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.card:hover .meta .more{opacity:.6}
/* HOME TONIC CARD LAYOUT (Jack, 2 Oct 2026): bigger name with the subscription price beside it, Day/Night under it,
   "See the full breakdown" pinned to the bottom so the three cards line up, 8px between photos. */
.best .rail{gap:8px;padding-inline:8px}
.best .rail>li{display:flex}
.best .card{flex:1;display:flex;flex-direction:column}
.best .card .meta.hl{flex:1;gap:6px}
.best .meta.hl .nm{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px}
.best .meta.hl h4{font-size:18px;line-height:22px;font-weight:500}
.best .meta.hl .pr{font-size:14px;color:var(--ink);white-space:nowrap}
.best .meta.hl .cat{margin-top:-4px}
.best .meta.hl .sub{margin-top:6px}
.best .meta.hl .more{margin-top:auto;padding-top:10px}
@media (min-width:1000px){.best .meta.hl h4{font-size:20px;line-height:24px}}
/* PRODUCT PAGE V2 (Jack, 2 Oct 2026) */
.pdp .pitch{display:flex;flex-direction:column;gap:6px;max-width:380px}
.pdp .plan2 .was{color:var(--c500);margin-right:2px}
.pdp .buy .trust{color:var(--ink);margin-top:-6px;line-height:18px}
.pdp .buy .trust .u{text-decoration:underline;text-underline-offset:2px}
.pnav{position:sticky;top:var(--header-h);z-index:20;display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;padding:12px 8px;background:rgba(255,252,243,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--c100);margin-top:24px;white-space:nowrap}
.pnav::-webkit-scrollbar{display:none}
.pnav a{color:var(--c500)} .pnav a:hover,.pnav a.on{color:var(--ink)}
.pdp #ingredients,.pdp #reviews,.pdp #made,.pdp #faq{scroll-margin-top:calc(var(--header-h) + 56px)}
.sbar{display:none}
.gcount{display:none}
@media (max-width:999px){
  .pdp{padding-top:var(--header-h)}
  .pdp .pmain{position:relative}
  .pdp .gal>div.tile{height:min(125vw,56svh);min-height:0}
  .gcount{display:block;position:absolute;right:12px;top:calc(min(125vw,56svh) - 32px);background:rgba(255,252,243,.9);padding:3px 8px;border-radius:10px;font-size:11px;line-height:14px;pointer-events:none}
  .sbar{display:flex;position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:40;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 14px;background:rgba(228,224,208,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.12);transform:translateY(140%);transition:transform .25s var(--ease)}
  .sbar.show{transform:none}
  body.cart-open .sbar,body.panel-open .sbar{transform:translateY(140%)}
  .sbar .btn{height:38px;padding-inline:16px}
}
/* PRODUCT BUY BOX v3 (Jack, 2 Oct 2026): what converts sits up top; the rest is calmer below. */
.pdp .buy .lead .rcount{color:var(--ink);text-decoration:underline;text-underline-offset:2px;width:max-content}
.pdp .buy .pitch p{font-size:15px;line-height:21px}
.pdp .ticks{list-style:none;margin:-4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--ink)}
.pdp .ticks li{display:flex;align-items:center;gap:6px}
.pdp .ticks li::before{content:"";width:14px;height:14px;flex:0 0 14px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' stroke='%23fffcf3' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pdp .ticks li.b{font-weight:600}
.pdp .proof{margin-top:-6px}
.pdp .proof .u,.pdp .fullben .u{text-decoration:underline;text-underline-offset:2px}
.pdp .subnote summary{list-style:none;cursor:pointer}
.pdp .subnote summary::-webkit-details-marker{display:none}
.pdp .subnote .i{color:var(--ink);margin-left:2px}
.pdp .subnote p{margin-top:6px;max-width:420px}
.pdp .goodfor,.pdp .glance{border-top:1px solid var(--c100);padding-top:16px;margin-top:8px;display:flex;flex-direction:column;gap:12px}
.pdp .goodfor ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.pdp .goodfor li{position:relative;padding-left:14px}
.pdp .goodfor li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
/* try page (14 Oct 2026): the numbered How-it-works steps inside a Good-for block keep their numbers, not the dots */
.pdp .goodfor .stepsmini li{padding-left:0}.pdp .goodfor .stepsmini li::before{content:none}
.pdp .fullben summary{list-style:none;cursor:pointer;width:max-content}
.pdp .fullben summary::-webkit-details-marker{display:none}
.pdp .fullben p{margin-top:8px}
.pdp .glance dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.pdp .glance dl div{display:flex;flex-direction:column;gap:2px}
.pdp .glance dd{margin:0}
.pdp .buy .proof{display:block}
/* DESKTOP PRODUCT PHOTO (Jack, 2 Oct 2026): tries 1–3 were letterboxed / over-cropped / a busy 4-photo grid ("too full on").
   Now ONE photo at its own 4:5 shape, held to the screen height, centred in its column and sticky while the buy box scrolls. */
@media (min-width:1000px){
  .pmain .gal{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;background:transparent;padding:calc(var(--header-h) + 16px) 24px 16px;overflow:hidden}
  .pdp .gal>div.tile{display:none}
  .pdp .gal>div.tile:first-child{display:block;height:min(100%,820px);width:auto;aspect-ratio:4/5;flex:none;border-radius:8px;overflow:hidden}
  .pdp .gal>div.tile img{width:100%;height:100%;object-fit:cover}
}
/* product buy column off the left edge (Jack, 2 Oct 2026): it sat 8px from the screen edge on laptops */
@media (min-width:1000px){
  .pmain .buy{grid-column:1/10;padding-left:48px;padding-right:8px}
  .pmain .gal{grid-column:10/25}
}
@media (min-width:1400px){.pmain .buy{padding-left:72px}}
/* NAV (Jack, 2 Oct 2026): Shop ▾ (quick-shop dropdown, on phones too) · Our story (→ Why We Exist on the home page) */
.hdr2 .bar-shop{display:inline-flex;align-items:center;gap:4px}
.hdr2 .bar-shop .car{display:block;transition:transform .2s}
body.panel-open .hdr2 .bar-shop .car{transform:rotate(180deg)}
.panel .seeall{text-decoration:underline;text-underline-offset:3px;align-self:flex-start;margin-top:4px}
#tonics,#why,#story{scroll-margin-top:var(--header-h)}
/* buy-box ticks in Afterpay mint (Jack, 2 Oct 2026): mint circle, dark tick so it stays readable on cream */
.pdp .ticks li::before{background:#b2fce4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' stroke='%23141313' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;width:16px;height:16px;flex-basis:16px}
/* PRODUCT PAGE CENTRED (Jack, 2 Oct 2026: "centre it so it's all even spaces"): buy box + photo sit as one centred pair,
   equal space on the left and right edges, fixed gap between them. Replaces the 24-col split on laptops. */
@media (min-width:1000px){
  .pmain{display:flex;flex-direction:row;justify-content:space-evenly;align-items:flex-start;gap:0;padding:0}   /* left edge = gap = right edge (Jack: "all the gaps even") */
  .pmain .buy{order:0;flex:0 1 460px;min-width:380px;padding-left:0;padding-right:0;grid-column:auto}
  .pmain .gal{order:1;margin-left:8px}
  .pmain .gal{flex:0 0 auto;grid-column:auto;position:sticky;top:0;height:100vh;padding:calc(var(--header-h) + 16px) 0 16px;display:flex;align-items:center}
  .pdp .gal>div.tile:first-child{height:min(calc(100vh - var(--header-h) - 32px),820px,calc((100vw - 460px - 3*72px) * 1.25));width:auto;aspect-ratio:4/5}   /* third cap: photo shrinks on smaller laptops so every gap stays >= ~72px */
}
@media (min-width:1400px){.pmain .buy{padding-left:0}}
/* OUR STORY (Jack, 2 Oct 2026; copy from the founders' "Hypha Philosophy" doc): story text beside the numbers card */
.story-wrap .story{display:flex;flex-direction:column;gap:14px;max-width:520px;padding:0 0 24px}
.story-wrap .story h2{margin-bottom:4px}
.story-wrap .story p{color:var(--ink);line-height:22px}
.story-wrap .story strong{font-weight:600}
.story-wrap .story .close{font-family:var(--font-display);font-size:22px;line-height:28px;margin-top:6px}
.stat .txt strong{font-weight:600}
@media (min-width:1000px){
  .story-wrap{align-items:center}
  .story-wrap .story{grid-column:3/12;padding:0}
  .story-wrap .stat{grid-column:14/23}
  .story-wrap .story p{font-size:15px;line-height:23px}
}
/* OUR STORY v2 (Jack, 2 Oct 2026: "needs to be WAY better"). Editorial: big display headline, sticky photo beside three numbered
   chapters, a California → New Zealand → Australia route, a large closing line, then the numbers as a clean ruled row. */
.ost{background:#efebdf;margin-top:var(--gap);padding:72px 16px 64px;border-radius:0}
.ost-eye{margin-bottom:18px}
.ost-title{font-family:var(--font-display);font-weight:400;font-size:44px;line-height:46px;letter-spacing:-.02em;margin:0}
.ost-body{display:flex;flex-direction:column;gap:40px;margin-top:40px}
.ost-pic{margin:0;border-radius:8px;overflow:hidden;aspect-ratio:4/5}
.ost-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ost-ch{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ost-ch>li{display:grid;grid-template-columns:44px 1fr;gap:0 12px;padding:24px 0;border-top:1px solid rgba(20,19,19,.18)}
.ost-ch>li:last-child{border-bottom:1px solid rgba(20,19,19,.18)}
.ost-ch .n{font-size:12px;letter-spacing:.12em;color:var(--c500);padding-top:6px}
.ost-h{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:28px;letter-spacing:-.01em;margin:0 0 10px}
.ost-ch p{margin:0;font-size:15px;line-height:23px;color:var(--ink);max-width:520px}
.ost-route{list-style:none;margin:20px 0 0;padding:0;display:flex;gap:0;position:relative}
.ost-route li{flex:1;display:flex;flex-direction:column;gap:3px;position:relative;padding-top:18px}
.ost-route li::before{content:"";position:absolute;top:4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.ost-route li:not(:last-child)::after{content:"";position:absolute;top:8px;left:14px;right:6px;height:1px;background:rgba(20,19,19,.35)}
.ost-route b{font-weight:500;font-size:14px}
.ost-route span{font-size:12px;color:var(--c500)}
.ost-close{font-family:var(--font-display);font-size:30px;line-height:36px;letter-spacing:-.01em;text-align:center;margin:64px auto 0;max-width:820px}
.ost-close span{display:block;color:#0f2730}
.ost-nums{display:grid;grid-template-columns:repeat(3,1fr);margin:56px 0 0;border-top:1px solid rgba(20,19,19,.18);border-bottom:1px solid rgba(20,19,19,.18)}
.ost-nums div{display:flex;flex-direction:column;gap:6px;padding:22px 8px;text-align:center}
.ost-nums div+div{border-left:1px solid rgba(20,19,19,.18)}
.ost-nums b{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:36px}
.ost-nums span{font-size:11px;line-height:14px;letter-spacing:.04em;color:var(--c500);text-transform:uppercase}
.ost-foot{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-top:32px}
.ost-foot p{margin:0;max-width:440px;font-size:15px;line-height:22px}
.ost-foot strong{font-weight:600}
@media (min-width:1000px){
  .ost{padding:120px 64px 96px;margin-left:8px;margin-right:8px;border-radius:12px}
  .ost-head{max-width:1180px;margin:0 auto}
  .ost-title{font-size:76px;line-height:76px}
  .ost-body{max-width:1180px;margin:56px auto 0;display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:start}
  .ost-pic{position:sticky;top:calc(var(--header-h) + 24px)}
  .ost-ch>li{grid-template-columns:64px 1fr;padding:32px 0}
  .ost-h{font-size:30px;line-height:34px}
  .ost-close{font-size:44px;line-height:52px;margin-top:112px}
  .ost-nums{max-width:1000px;margin:80px auto 0}
  .ost-nums b{font-size:48px;line-height:50px}
  .ost-nums div{padding:30px 12px}
}
/* OUR STORY v2b: sit on the page like every other section (Jack: "looks nothing like the rest of the site").
   No sand panel; same cream page, same 8px outer gutter, display type at the site's own scale. */
.ost{background:transparent;border-radius:0;margin:0;padding:var(--gap) 8px 0}
.ost-title{font-size:36px;line-height:38px}
.ost-ch p{color:var(--c500)}
@media (min-width:1000px){
  .ost{margin:0;padding:var(--gap) 8px 0;border-radius:0}
  .ost-head,.ost-body{max-width:none}
  .ost-title{font-size:52px;line-height:54px}
  .ost-body{grid-template-columns:repeat(24,1fr);gap:8px;margin-top:48px}
  .ost-pic{grid-column:1/11}
  .ost-ch{grid-column:13/24}
  .ost-close{font-size:36px;line-height:44px;margin-top:var(--gap)}
  .ost-nums{max-width:none;margin:64px 0 0}
}
/* OUR STORY v3 (Jack, 2 Oct 2026): built from the SAME component as The Ritual (.editorial) so type, spacing and grid match exactly;
   mirrored (photo left, copy right) so the two read as a pair. The numbers card below is the site's original stat card, unchanged. */
.editorial.story-ed{padding-top:var(--gap)}
@media (min-width:1000px){
  .editorial.story-ed .img{grid-column:1/17;grid-row:1}
  .editorial.story-ed .copy{grid-column:19/25;grid-row:1}
}
/* NUMBERS STRIP (Jack, 2 Oct 2026): the stat card becomes a strip, photo running edge to edge (8px gutter like the rest), shorter height */
.stat-wrap .stat{height:440px;aspect-ratio:auto}
.stat-wrap .stat img{object-position:50% 55%}
@media (min-width:1000px){
  .stat-wrap{display:block;padding-left:8px;padding-right:8px}
  .stat-wrap .stat{height:min(480px,52vh);min-height:400px;padding:24px;align-items:flex-end}
  .stat-wrap .stat .in{flex-direction:row;align-items:flex-end;justify-content:space-between;width:100%;gap:48px}
  .stat-wrap .stat .nums{width:auto;grid-template-columns:repeat(3,max-content);gap:40px}
  .stat-wrap .stat .txt{max-width:340px}
}
.stat-wrap .stat::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.38),rgba(0,0,0,0));pointer-events:none}
.stat-wrap .stat .in{z-index:1}
/* 2 Oct: MADE_SNAP (build.py). Phones: Made the slow way is exactly one screen (100svh, the height with Safari's bars showing).
   The photo takes whatever height is left; the step text area is held at the tallest step so the photo never jumps between tabs.
   The space around it moves from padding to margin so the section box is the screen. Remove the flag or this block to undo. */
@media (max-width:999px){
  .ings.made-tabs.snap{min-height:100svh;padding:16px 8px;margin-block:calc(var(--gap) - 16px);gap:0}
  .made-tabs.snap .title{padding-top:0;padding-bottom:16px}
  .made-tabs.snap .list{flex:1 1 auto}
  .made-tabs.snap .pic{flex:1 1 0;min-height:140px;aspect-ratio:auto}
  .made-tabs.snap .detail{display:grid;margin-top:12px}
  .made-tabs.snap .detail .ingp{display:block;grid-area:1/1;visibility:hidden}
  .made-tabs.snap .detail .ingp.on{visibility:visible}
}

/* 2 Oct: REVIEWS_CARDS (build.py). Judge.me Cards Carousel look, taken from the approved mock. */
.jc{padding:8px 8px 24px}
.jc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 0 16px;flex-wrap:wrap}
.jc-sum{font-size:12px;color:#6b6b6b}
.jc-stars{color:var(--ink);letter-spacing:2px;font-size:15px}
.jc-wrap{position:relative}
.jc-track{list-style:none;margin:0;padding:0 0 4px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.jc-track::-webkit-scrollbar{display:none}
.jc-card{flex:0 0 78%;scroll-snap-align:start;background:#fff;border:1px solid #e6e3da;border-radius:10px;padding:18px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
@media (min-width:1000px){.jc-card{flex-basis:calc((100% - 36px)/4)}.jc{padding:8px 16px 24px}}
.jc-body{margin:0;font-size:14px;line-height:20px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.jc-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;border-top:1px solid #efece4;padding-top:10px}
.jc-name{font-weight:500}.jc-who{display:flex;flex-direction:column;gap:3px}.jc-ver{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#108474}.jc-by{font-size:11px;color:#6b6b6b;width:100%;text-align:right}.jc-by b{color:#108474;font-weight:600}
.jc-prod{color:#6b6b6b}
.jc-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid #e6e3da;background:#fff;font-size:20px;line-height:28px;cursor:pointer;z-index:2;color:var(--ink)}
.jc-prev{left:0}.jc-next{right:0}@media (min-width:1000px){.jc-wrap{padding:0 40px}}
@media (max-width:999px){.jc-arrow{display:none}}
.pdp .jc{padding:32px 8px 24px}@media (min-width:1000px){.pdp .jc{padding:48px 16px 24px}}
.jc-src{font-size:11px;color:#6b6b6b}
.jc-btn{padding-top:16px}
/* 2 Oct v2, from Jack on his phone: (1) the banner stays over Made the slow way; only the nav bar steps away (app.js body.bn-only).
   (2) The settle is now the browser's own scroll snapping (proximity: it only catches when you stop near the section, and it rides
   the flick instead of moving after the scroll has stopped). The section fills the screen below the banner.
   (3) Less space between The Ritual and Made the slow way: 56px of content gap, the same as reviews to The Ritual.
   (4) The Our story photo is hidden on phones. */
.hdr2 .bar{transition:opacity .12s var(--ease)}
@media (max-width:999px){
  /* html:has(#made.snap){scroll-snap-type:y proximity} removed same day: snapping on the whole page made every scroll feel sticky on iPhone (Jack). The JS glide in app.js does the job alone, and only near this section. */
  .ings.made-tabs.snap{scroll-snap-align:start;min-height:calc(100svh - var(--bn-h));margin-top:32px}
  body.bn-only .hdr2 .bar{opacity:0;pointer-events:none}
  .editorial.story-ed .img{display:none}
}
@media (max-width:999px){.ings.made-tabs.snap{padding:12px 8px 8px;margin-top:36px}.made-tabs.snap .pic{min-height:96px}}
/* 2 Oct, Jack: moving banner text a touch bigger on phones (13 → 14px, the size desktop already uses) */
@media (max-width:999px){.hdr2 .bn-i{font-size:14px}}
/* the "1 / 4" counter follows the fitted photo height (app.js sets --gal-h on .pmain) */
@media (max-width:999px){.gcount{top:calc(var(--gal-h, min(125vw,56svh)) - 32px)}}
/* 2 Oct v3, Jack: once Made the slow way fills the screen, scrolling walks through the steps (120 days → Fermentation → … →
   California) so people see that every step has its own text. Phones: the section is tall, its content (.pin) stays pinned under the
   banner, and app.js maps how far you have scrolled through it to the step shown. One step per 30% of the screen height.
   Desktop: .pin is display:contents, so the desktop layout is untouched. */
.made-tabs .pin{display:contents}
@media (max-width:999px){
  .ings.made-tabs.snap{display:block;padding:0;min-height:0;height:calc(100svh - var(--bn-h) + var(--made-steps,7) * 30svh)}
  .made-tabs.snap .pin{position:sticky;top:var(--bn-h);height:calc(100svh - var(--bn-h));display:flex;flex-direction:column;padding:12px 8px 8px;box-sizing:border-box}
  .made-tabs.snap .list{min-height:0}
  .made-tabs.snap .pin .detail{flex:none}
}
/* 2 Oct, Jack: on phones the Afterpay "or 4 interest-free payments…" line comes out of the Buy Once box (it made both price boxes
   174px tall). The tick under Add to Cart already says "Pay in 4 with Afterpay"; the space goes back to the product photo (app.js fit). */
@media (max-width:999px){.plan2 afterpay-placement.ap{display:none}}
/* 2 Oct, Jack: on phones just the Afterpay logo sits under "One-time purchase" (the official badge, saved from Afterpay's own
   widget as assets/afterpay-badge.svg); the "or 4 payments of…" text stays hidden so the box only grows by the logo row. Desktop keeps the full line. */
.plan2 .ap-logo{display:none}
@media (max-width:999px){.plan2 .ap-logo{display:block;height:14px;width:auto;margin-top:2px;align-self:flex-start}}
/* 2 Oct, REVIEWS_AFTER_RITUAL: the three gaps keep the measured sizes they had before the move.
   Tonics → The Ritual takes the old Tonics → reviews gap (about 46 phone / 62 desktop); The Ritual → reviews keeps 84 / 100;
   reviews → Made the slow way keeps the old Ritual → Made gap (56 / 232). */
.best + .editorial{padding-top:0}
.editorial + .jc{padding-top:78px}
@media (max-width:999px){.jc + .ings.made-tabs.snap{margin-top:16px}}
@media (min-width:1000px){.best + .editorial{padding-top:6px}.editorial + .jc{padding-top:86px}.jc + .made-tabs .title{padding-top:calc(var(--gap) - 12px)}}
/* 2 Oct, GLANCE_V2: At a glance as a spec sheet. One row per fact, label in small tracked capitals on the left, value in ink on the
   right, a thin rule between rows (the Made the slow way phases pattern). */
.pdp .glance.g2 dl{display:flex;flex-direction:column;gap:0}
.pdp .glance.g2 dl div{flex-direction:row;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-top:1px solid var(--c100)}
.pdp .glance.g2 dl div:last-child{border-bottom:1px solid var(--c100)}
.pdp .glance.g2 dt{letter-spacing:.08em;white-space:nowrap}
.pdp .glance.g2 dd{text-align:right}
/* 2 Oct, Jack: the cart must make it obvious when a line is the subscription price. Subscription lines get an ink "Subscription · every
   month" tag, the price column shows the struck one-off price, the subscription price and "/ month"; one-time lines get an outlined tag. */
.cart .item .plan-tag{display:inline-block;align-self:flex-start;margin:4px 0 2px;padding:2px 8px;border-radius:10px;background:var(--ink);color:var(--off-white)}
.cart .item .plan-tag.one{background:none;color:var(--ink);border:1px solid var(--c100)}
.cart .item .pr-col{display:flex;flex-direction:column;align-items:flex-end;gap:0;text-align:right}
/* 2 Oct, Jack: more room between the Tonics and The Ritual (back to the spacing it had before the reviews moved: 96 phone / 128 desktop) */
.best + .editorial{padding-top:48px}
@media (min-width:1000px){.best + .editorial{padding-top:72px}}
/* 2 Oct, Jack: "available" after the Afterpay logo, on the same line so the box does not grow */
@media (max-width:999px){.plan2 .ap-logo{display:flex;align-items:center;gap:6px;height:auto}.plan2 .ap-logo img{height:14px;width:auto;display:block}}
/* 2 Oct, GLANCE_NUMS: At a glance as big numbers (display numerals + small capital labels, like the home stat card), then
   "Take" and "Taste" as plain lines in the Good for text style. */
.pdp .glance.gn .gnums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pdp .glance.gn .gnums div{display:flex;flex-direction:column;gap:4px}
.pdp .glance.gn .gnums .t-cap{max-width:90px}
.pdp .glance.gn > p.t-body .med{margin-right:4px}
/* 2 Oct, Jack: the gap above the reviews (from The Ritual) and below them (to Made the slow way) are now the same: 84 phone / 100 desktop */
@media (max-width:999px){.jc + .ings.made-tabs.snap{margin-top:44px}}
@media (min-width:1000px){.jc + .made-tabs .title{padding-top:calc(var(--gap) - 144px)}}
/* 2 Oct GLANCE_NUMS v2: sits on the Good for grid (2 columns, same gaps), sentence-case captions like the plan boxes */
.pdp .glance.gn .gnums{grid-template-columns:1fr 1fr;gap:12px 16px}
.pdp .glance.gn .gnums .t-cap-lg{max-width:none}
.pdp .glance.gn .gnums div{gap:2px}
.pdp .glance.gn .glines{margin-top:4px}
/* 2 Oct, Jack: "Buy once instead, $150 plus shipping" in the cart in bold (same 600 weight as the guarantee tick) */
.cart .item .upg [data-downg]{font-weight:600}
/* 2 Oct, Jack: At a glance looked odd as a copy of Good for's two columns, so it is a single-column list */
.pdp .glance-list ul{grid-template-columns:1fr;gap:8px}
/* 2 Oct, Jack: At a glance top to bottom with thin lines between the items, no dots */
.pdp .glance-list ul{gap:0}
.pdp .glance-list li{padding:10px 0;border-top:1px solid var(--c100)}
.pdp .glance-list li:last-child{border-bottom:1px solid var(--c100)}
.pdp .glance-list li::before{display:none}
/* 2 Oct, Jack: "At a glance" is the heading; no divider line above it, just space after Good for (the list's own lines start under the heading) */
.pdp .glance-list{border-top:none;padding-top:0;margin-top:24px}
/* 2 Oct, Jack: "Switch to $135 a month" in the cart in bold too (matches "Buy once instead") */
.cart .item .upg [data-upg]{font-weight:600}
/* v8: label left (grey), value beside it (ink), same text size; label column fixed so the values line up */
.pdp .glance-list li{display:grid;grid-template-columns:96px 1fr;gap:12px}
/* lab link under At a glance keeps its underline */
.pdp .glance-list > p a.link{text-decoration:underline;text-underline-offset:2px}
/* 2 Oct, Jack: banner messages in small tracked capitals (announcement-bar style). Delete this block to go back to sentence case. */
.hdr2 .bn-i{text-transform:uppercase;letter-spacing:.1em;font-size:12px}
@media (min-width:1000px){.hdr2 .bn-i{font-size:13px}}
/* 2 Oct, Jack: HYPHA wordmark a little bigger (17 → 20px phones, 22px desktop) */
.hdr2 .wordmark{font-size:20px}
@media (min-width:1000px){.hdr2 .wordmark{font-size:22px}}
/* 2 Oct, Jack: phones back to the original 17px wordmark; desktop keeps 22px */
@media (max-width:999px){.hdr2 .wordmark{font-size:17px}}

/* refill mode choice in the basket (4 Oct 2026) */
.cart .foot .mode{display:flex;flex-direction:column;gap:6px;padding:4px 0 8px;border-bottom:1px solid var(--c100);margin-bottom:4px}
.cart .foot .mode[hidden]{display:none}
.cart .foot .mode .opt{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--c100);border-radius:8px;cursor:pointer}
.cart .foot .mode .opt:has(input:checked){border-color:var(--ink)}
.cart .foot .mode .opt input{margin-top:3px;accent-color:var(--ink)}
.cart .foot .mode .opt>span{display:flex;flex-direction:column;gap:2px}

/* item note as a card matching the refill choice (4 Oct 2026) */
.cart .item .upg{background:none;border:1px solid var(--c100);border-radius:8px;padding:10px;flex-direction:row;justify-content:space-between;align-items:center;gap:10px}
.cart .item .upg p{max-width:none}
.cart .item .upg [data-downg]{padding:0;border:0;background:none;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cart .item .upg p b{font-weight:600;color:var(--ink)}
.cart .item .upg [data-upg]{padding:0;border:0;background:none;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* 3 Oct: phone ingredient rail: the first tile sat flush to the screen edge because x-mandatory snap pulled it past the 8px padding. scroll-padding keeps the gutter; the tiles now line up with the paragraph above. */
@media (max-width:999px){.pdp .ingcar .rail{padding-inline:8px;scroll-padding-inline:8px}}
/* 3 Oct 13:05 (Jack: "a little bit too big"): Ritual copy trimmed to 16/23 at 460px, headline 34/38, matching Our story. Earlier that day (Jack: the laptop Ritual block is "a bit dense with too much white space"): the home Ritual copy was a 290px block of 14px type beside a 1073px photo. Now the copy column spans 8 of 24, text up to 480px wide at 17/25, headline 36/40, a touch more air between the parts. Our story (.story-ed) is left as it was. */
@media (min-width:1000px){main > .editorial:not(.story-ed) .copy{grid-column:1/9;gap:24px}main > .editorial:not(.story-ed) .copy .lead{gap:8px}main > .editorial:not(.story-ed) .copy .lead h2{font-size:34px;line-height:38px}main > .editorial:not(.story-ed) .copy .txt{max-width:460px;gap:12px}main > .editorial:not(.story-ed) .copy .txt p{font-size:16px;line-height:23px;letter-spacing:0}}
/* 3 Oct (Jack: the laptop "Made the slow way" detail text needs to be a bit bigger): the step paragraph's 360px inline width is now the .mdp class so it can differ by screen. Phone unchanged (360px, 14/16.5). Desktop: step name 20/24, duration 13/18, paragraph 17/25 up to 440px, body up to 460px. */
.made-tabs .detail .body p.mdp{max-width:360px}
@media (min-width:1000px){.made-tabs .detail .body{max-width:460px;gap:16px}.made-tabs .detail .body .in{gap:6px}.made-tabs .detail .body h4{font-size:20px;line-height:24px}.made-tabs .detail .body .in p{font-size:13px;line-height:18px}.made-tabs .detail .body p.mdp{font-size:17px;line-height:25px;letter-spacing:0;max-width:440px}}
/* 3 Oct (Jack: "our story needs to be slightly bigger on laptop too"): the home Our story editorial (.story-ed, copy in the right-hand 6 columns) steps up one notch less than the Ritual: text 16/23 up to 380px (was 14/16.5 at 290px), headline 32/36. Phone unchanged. */
@media (min-width:1000px){main > .editorial.story-ed .copy{gap:20px}main > .editorial.story-ed .copy .lead{gap:6px}main > .editorial.story-ed .copy .lead h2{font-size:32px;line-height:36px}main > .editorial.story-ed .copy .txt{max-width:380px;gap:12px}main > .editorial.story-ed .copy .txt p{font-size:16px;line-height:23px;letter-spacing:0}}
/* 3 Oct 13:15 (Jack: "our story... a little bit more padding on the RHS, move it into the middle just a little"): the copy block moves one grid column in from the right edge (19/25 -> 18/24), about 60px of air at 1470 wide. Phone unchanged. */
@media (min-width:1000px){main > .editorial.story-ed .copy{grid-column:18/24}}
/* 3 Oct 13:25 (Jack: "a little bit too much padding on the RHS now, bring it to the middle"): the Our story copy is now centred in the space between the photo and the page edge (columns 17/25, justify-self center, up to 380px wide), so the gaps either side are equal. Replaces the 18/24 nudge. Phone unchanged. */
@media (min-width:1000px){main > .editorial.story-ed .copy{grid-column:17/25;justify-self:center;width:min(380px,100%)}}
/* 3 Oct: required WhatsApp number in the basket, under the refill choice (shown only with a subscription in the basket) */
.cart .foot .mode .wa{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cart .foot .mode .wa[hidden]{display:none}
.cart .foot .mode .wa input{height:40px;width:100%;border:1px solid var(--c100);border-radius:8px;padding:0 10px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.cart .foot .mode .wa input:focus{outline:none;border-color:var(--ink)}
.cart .foot .mode .wa a{text-decoration:underline;color:var(--ink)}
.cart .foot .mode .wa .err{color:#b3261e}
.cart .foot .mode .wa .err[hidden]{display:none}
.cart .foot .mode .wa.bad input{border-color:#b3261e}

/* 3 Oct 2026: the header wordmark is the real HYPHA logo (inline SVG, takes the header's colour). Sized off the old typed
   wordmark's font-size, so every breakpoint that sized the text sizes the logo. */
.wordmark.wm-logo{display:inline-flex;align-items:center;letter-spacing:0;line-height:0}
.wordmark.wm-logo .wm-svg{height:.86em;width:auto;display:block}

/* 3 Oct 2026 (Jack): the home hero photo starts under the header instead of behind it, and the headline sits centred
   between the bottom of the header and the bottom of the photo. */
.full.hero .bg{top:var(--header-h)}
.full.hero .mid{top:var(--header-h)}

/* 5 Oct 2026: Judge.me's own widgets on the product pages. The star badge stays hidden until a product has a review
   (Judge.me prints "No reviews" otherwise); the review widget sits under the hand-collected quotes. */
.jdgm-preview-badge .jdgm-prev-badge[data-number-of-reviews="0"]{display:none}
.jm-wrap{padding-top:8px}
.jm-wrap .jdgm-rev-widg{font-family:inherit;border:0;padding-left:0;padding-right:0}
/* 7 Oct 2026 (Jack): on laptops the Made the slow way photo sits level with the "MADE THE SLOW WAY" title, not with the step
   list below it. The picture is absolute inside the list, so it is lifted by the title line (20px) + its 36px padding + the 8px
   row gap, minus the 3px of line box above the capitals. */
@media (min-width:1000px){.made-tabs .pic{top:-61px}}

/* 7 Oct 2026: the Made the slow way film sits in the picture frame like the step photos do (one video, shown for 120 days and steps 1-4) */
.ings .pic video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s var(--ease)}
.ings .pic video.on{opacity:1}
/* 8 Oct 2026 (Jack, on his phone): the Made the slow way picture is bigger, the step text runs to the bottom of the screen,
   the certificate shows its top (the Infinite header and the batch result) instead of its middle, and the California map
   fits inside the frame instead of being cropped. Phones only, except the two picture rules, which are harmless on laptops
   where the frame is 4:5 like the images. */
.made-tabs .pic img[data-ing="california"]{object-fit:contain;background:var(--off-white)}
.made-tabs .pic img[data-ing="tested"]{object-position:50% 0}
@media (max-width:999px){
  /* (8 Oct, later: Jack preferred the step list as it was, so the tighter type and spacing came back out; only the
     picture gap and the bottom-anchored text stay) */
  .made-tabs.snap .pic{margin-top:12px}
  .made-tabs.snap .detail{align-items:end}
}
/* 8 Oct 2026: the pinned screen is sized with dvh, not svh, so when Safari's bars slide away on scroll the panel grows
   with the viewport and the step text stays on the bottom edge instead of leaving a band of empty page under it. */
@media (max-width:999px){
  .made-tabs.snap .pin{height:calc(100dvh - var(--bn-h))}
}
.made-tabs .pic img.ca-wide{display:none;object-fit:contain;background:var(--off-white)}
@media (max-width:999px){.made-tabs .pic img.ca-wide{display:block}.made-tabs .pic img.ca-tall{display:none}}

/* 14 Oct 2026 (Jack): "Don't have it? Download it here" sits beside the WhatsApp label, above the box */
.cart .wa-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;padding-inline:11px}
.cart .wa-head a{color:inherit;text-decoration:underline}