/* ==========================================================================
   GANJAVA — shared stylesheet
   Palette sampled from the real 4-pack carton dieline + can artwork.
   ========================================================================== */
:root{
  --cream:#FDF6E4;
  --white:#FFFFFF;
  --teal-deep:#1E4A45;
  --teal:#276B60;
  --teal-bright:#4EA8A8;
  --gold:#E8A13C;
  --gold-soft:#F3DFAE;
  --coral:#D9483B;
  --mocha:#7A5B47;
  --ink:#1A2420;
  --muted:#5E6C66;
  --line:#DED6BE;
  --r-pill:100px;
  --r-card:26px;
  --r-panel:32px;
  --shadow:0 20px 50px -24px rgba(26,36,32,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',system-ui,sans-serif;background:var(--cream);color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased}
body.no-scroll{overflow:hidden}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.025em;line-height:1.05}
.wrap{max-width:1240px;margin:0 auto;padding:0 30px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.script{font-family:'Great Vibes',cursive;font-weight:400}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;background:var(--teal-deep);color:#fff;font-weight:700;padding:19px 42px;
  border-radius:var(--r-pill);font-size:1.04rem;border:none;cursor:pointer;font-family:'Montserrat';
  transition:background .16s,transform .16s;text-align:center}
.btn:hover{background:#153833;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#D8912F}
.btn-outline{background:transparent;border:2px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- PLACEHOLDERS ---------- */
.ph{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  color:#6f6250;background:repeating-linear-gradient(45deg,#efe6cd,#efe6cd 14px,#e9dfc2 14px,#e9dfc2 28px);
  border:2px dashed #cbbc9a;font-size:.75rem;font-weight:600;padding:16px;overflow:hidden}
.ph .tag{background:rgba(255,255,255,.9);padding:9px 15px;border-radius:var(--r-pill);
  line-height:1.45;max-width:88%;color:#4a4030}
.grad-teal{background:linear-gradient(150deg,#4EA8A8 0%,#2C7A6E 45%,#1E4A45 100%)}
.grad-gold{background:linear-gradient(150deg,#F5D79A 0%,#E8A13C 55%,#C4762B 100%)}
.grad-mocha{background:linear-gradient(150deg,#B99274 0%,#7A5B47 55%,#4E3A2C 100%)}
.grad-sky{background:linear-gradient(150deg,#BFE6F0 0%,#7FC9DE 55%,#4E9DBF 100%)}
.ph.on-grad{border:none;background:transparent;color:#2a3320}
.ph.on-grad .tag{background:rgba(255,255,255,.85)}

/* ---------- ANNOUNCEMENT + HEADER ---------- */
.announce{background:var(--coral);color:#fff;text-align:center;font-size:.84rem;
  font-weight:700;padding:11px 16px;letter-spacing:.02em}
.announce b{color:var(--gold)}
header{position:sticky;top:0;z-index:80;padding:14px 0}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo-pill{background:rgba(30,74,69,.42);backdrop-filter:blur(10px);border-radius:var(--r-pill);
  padding:11px 26px;display:flex;flex-direction:column;line-height:1}
.logo-pill .mark{font-weight:900;font-size:1.55rem;color:#fff;letter-spacing:.01em}
.logo-pill .sub{font-size:.52rem;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.8);margin-top:3px}
.nav-actions{background:rgba(30,74,69,.42);backdrop-filter:blur(10px);border-radius:var(--r-pill);
  padding:8px 10px;display:flex;align-items:center;gap:12px}
.nav-actions .btn{padding:11px 26px;font-size:.94rem;background:var(--gold);color:var(--ink);font-weight:800}
.icobtn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:1.05rem;cursor:pointer;background:none;border:none;position:relative;border-radius:50%}
.icobtn:hover{background:rgba(255,255,255,.14)}
.cart-count{position:absolute;top:2px;right:1px;background:var(--coral);color:#fff;font-size:.62rem;
  font-weight:800;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;padding:0 4px;font-family:'Montserrat'}
.cart-count[hidden]{display:none}
.nav-links{display:flex;gap:30px;font-weight:600;font-size:.94rem}
.nav-links a:hover{color:var(--teal)}
.burger{display:none}
@media(max-width:1040px){.nav-links{display:none}.burger{display:flex}}

/* ---------- MOBILE DRAWER ---------- */
.mobile-nav{position:fixed;inset:0;z-index:150;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s}
.mobile-nav.open{visibility:visible;opacity:1}
.mobile-nav .scrim{position:absolute;inset:0;background:rgba(26,36,32,.6)}
.mobile-nav .sheet{position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);background:var(--cream);
  padding:28px;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.mobile-nav.open .sheet{transform:translateX(0)}
.mobile-nav .sheet a{padding:16px 4px;font-size:1.15rem;font-weight:700;border-bottom:1px solid var(--line)}
.mobile-nav .closex{align-self:flex-end;background:none;border:none;font-size:1.5rem;cursor:pointer;
  padding:6px 10px;margin-bottom:10px}

/* ---------- CART DRAWER ---------- */
.cart-drawer{position:fixed;inset:0;z-index:160;visibility:hidden;opacity:0;transition:opacity .25s,visibility .25s}
.cart-drawer.open{visibility:visible;opacity:1}
.cart-drawer .scrim{position:absolute;inset:0;background:rgba(26,36,32,.6)}
.cart-drawer .sheet{position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--cream);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.cart-drawer.open .sheet{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;
  border-bottom:1px solid var(--line)}
.cart-head h3{font-size:1.3rem}
.cart-head button{background:none;border:none;font-size:1.4rem;cursor:pointer;padding:4px 8px}
.ship-bar{padding:16px 26px;border-bottom:1px solid var(--line);font-size:.85rem;font-weight:600}
.ship-bar .track{height:7px;background:#E7DDC4;border-radius:5px;margin-top:9px;overflow:hidden}
.ship-bar .fill{height:100%;background:var(--gold);border-radius:5px;transition:width .3s}
.cart-items{flex:1;overflow-y:auto;padding:8px 26px}
.cart-empty{text-align:center;color:var(--muted);padding:56px 20px;font-weight:500}
.ci{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.ci .thumb{width:74px;height:92px;border-radius:12px;flex-shrink:0;overflow:hidden}
.ci .info{flex:1;min-width:0}
.ci .info b{display:block;font-size:.94rem;line-height:1.3;margin-bottom:3px}
.ci .info .sub{font-size:.78rem;color:var(--muted);font-weight:500;margin-bottom:9px}
.ci .price{font-weight:700;font-size:.95rem}
.ci .price s{color:#9aa39b;font-weight:400;font-size:.82rem;margin-left:5px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);
  background:var(--white);overflow:hidden}
.qty button{background:none;border:none;width:32px;height:32px;cursor:pointer;font-size:1.05rem;
  color:var(--ink);font-family:'Montserrat'}
.qty button:hover{background:#F0E9D6}
.qty span{min-width:26px;text-align:center;font-weight:700;font-size:.9rem}
.ci .rm{background:none;border:none;color:var(--muted);font-size:.76rem;cursor:pointer;
  text-decoration:underline;padding:0;margin-top:8px;font-family:'Montserrat'}
.cart-foot{padding:22px 26px;border-top:1px solid var(--line);background:var(--white)}
.cart-foot .row{display:flex;justify-content:space-between;font-weight:800;font-size:1.12rem;margin-bottom:6px}
.cart-foot .note{font-size:.76rem;color:var(--muted);margin-bottom:16px;font-weight:500}
.cart-foot .btn{width:100%}

/* ---------- TOAST ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,120%);background:var(--teal-deep);
  color:#fff;padding:15px 28px;border-radius:var(--r-pill);font-weight:700;font-size:.94rem;z-index:190;
  transition:transform .32s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow);max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0)}

/* ---------- HERO (home) ---------- */
.hero{padding:26px 0 60px}
.hero-grid{display:grid;grid-template-columns:1fr 1.04fr;gap:44px;align-items:center}
.rating-line{font-size:1rem;font-weight:500;margin-bottom:22px}
.rating-line .stars{color:var(--gold);letter-spacing:1px;margin-right:6px}
.rating-line b{color:var(--teal);font-weight:800}
.hero h1{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:14px;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero .sub{font-size:1.1rem;color:var(--muted);font-weight:400;max-width:44ch;margin-bottom:30px}
.hero .btn{margin-bottom:16px}
.guar{display:flex;gap:24px;font-size:.9rem;color:var(--muted);font-weight:500;margin-bottom:40px;flex-wrap:wrap}
.statrow{display:flex;gap:38px;flex-wrap:wrap}
.statc{text-align:center;max-width:140px}
.statc .circle{width:96px;height:96px;border-radius:50%;background:var(--gold);display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:1.75rem;margin:0 auto 10px;
  color:var(--ink);letter-spacing:-.03em}
.statc b{display:block;font-size:1.02rem;font-weight:800;line-height:1.2}
.statc span{font-size:.8rem;color:var(--muted);font-weight:500;line-height:1.3;display:block;margin-top:3px}
.hero-panel{border-radius:var(--r-panel);height:610px;position:relative;padding:20px}
.hero-panel .ph{width:100%;height:100%;border-radius:calc(var(--r-panel) - 8px)}
.hero-video{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:calc(var(--r-panel) - 8px);background:#5B4436}
.hero-poster{display:none;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-panel) - 8px)}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.hero-poster{display:block !important}}
.sticker{position:absolute;z-index:4;background:var(--coral);color:#fff;font-weight:800;display:flex;
  align-items:center;justify-content:center;text-align:center;line-height:1.12;border-radius:50%;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.45)}
.sticker.s1{width:126px;height:126px;font-size:.98rem;top:-18px;left:-20px;transform:rotate(-10deg)}
.sticker.s2{width:94px;height:94px;font-size:.82rem;bottom:26px;right:-16px;transform:rotate(9deg);
  background:var(--gold);color:var(--ink)}
@media(max-width:1040px){.hero-grid{grid-template-columns:1fr}.hero-panel{height:420px;order:-1}
  .hero h1{max-width:none}}

/* ---------- SECTIONS ---------- */
.press{padding:34px 0 50px}
.press-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.press-row span{font-weight:800;font-size:1.2rem;opacity:.78}
section.pad{padding:84px 0}
.sec-title{font-size:clamp(2.2rem,4.4vw,3.3rem);text-align:center;color:var(--teal);margin-bottom:12px}
.sec-sub{text-align:center;color:var(--muted);font-weight:400;max-width:620px;margin:0 auto 46px;font-size:1.04rem}

/* ---------- PRODUCT TILES ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tile{display:flex;flex-direction:column}
.tile .panel{border-radius:22px;height:360px;position:relative;margin-bottom:18px;padding:16px}
.tile .panel-link{display:block;overflow:hidden;cursor:pointer;transition:transform .16s,box-shadow .16s}
.tile .panel-link:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.tile .panel-link:focus-visible{outline:4px solid var(--gold);outline-offset:4px}
.tile .panel .ph{width:100%;height:100%;border-radius:16px}
.tile .flag{position:absolute;top:16px;left:16px;z-index:3;background:var(--coral);color:#fff;
  font-size:.72rem;font-weight:800;padding:8px 16px;border-radius:var(--r-pill);letter-spacing:.04em}
.tile .flag.soon{background:rgba(255,255,255,.92);color:var(--muted)}
.tile h3{font-size:1.2rem;margin-bottom:5px}
.tile .meta{font-size:.86rem;color:var(--muted);font-weight:500;margin-bottom:9px}
.tile .price{font-size:1rem;font-weight:600;margin-bottom:16px}
.tile .price s{color:#9aa39b;margin-left:5px;font-weight:400}
.tile .btn{width:100%;padding:16px;font-size:.98rem}
.tile .learn{display:block;text-align:center;margin-top:13px;font-weight:700;text-decoration:underline;font-size:.95rem}
.tile.soon .panel{filter:none;opacity:1}
.tile.soon .btn{background:transparent;border:2px solid #C3CBBE;color:var(--muted)}
.tile.soon .btn:hover{transform:none;background:transparent}
@media(max-width:900px){.tiles{grid-template-columns:1fr}}

/* ---------- BANDS ---------- */
.band{background:var(--teal);padding:86px 0}
.band h2{text-align:center;font-size:clamp(2.2rem,4.6vw,3.4rem);color:var(--cream);margin-bottom:50px;line-height:1.08}
.band h2 em{font-style:normal;color:var(--gold)}
.vp{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.vp .card{background:var(--white);border-radius:var(--r-card);padding:14px 14px 30px;text-align:center}
.vp .card .ph,.vp .card img.photo{height:280px;border-radius:18px;margin-bottom:22px}
.vp .card img.photo{width:100%;object-fit:cover}
.vp .card h3{font-size:1.45rem;margin-bottom:11px}
.vp .card p{color:#4d5a54;font-size:.98rem;font-weight:400;padding:0 16px}
@media(max-width:900px){.vp{grid-template-columns:1fr}}
.showcase{height:660px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.showcase-img{width:100%;height:100%;object-fit:cover;display:block}
.showcase .ph{width:min(620px,84%);height:80%;border:none;background:transparent}
.showcase .ph .tag{background:rgba(255,255,255,.88)}
@media(max-width:800px){.showcase{height:420px}}

.why{background:var(--teal-deep);color:#fff;padding:92px 0}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.why .eyebrow{color:var(--gold);font-size:.78rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:14px}
.why h2{font-size:clamp(2.2rem,4.4vw,3.4rem);color:#fff;margin-bottom:22px;line-height:1.06}
.why h2 em{font-style:normal;color:var(--gold)}
.why .lead{font-size:1.1rem;color:#B7CFC9;font-weight:400;margin-bottom:32px;max-width:46ch}
.why ol{list-style:none;display:flex;flex-direction:column;gap:20px;margin-bottom:36px}
.why li{display:flex;gap:16px;align-items:flex-start;font-size:1.04rem;color:#E4EFEC;font-weight:400;line-height:1.5}
.why li b{background:var(--gold);color:var(--ink);width:30px;height:30px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:.92rem;font-weight:800;flex-shrink:0;margin-top:2px}
.why .panel{border-radius:var(--r-panel);height:520px;padding:18px}
.why .panel .ph{width:100%;height:100%;border:none;background:transparent}
@media(max-width:1000px){.why-grid{grid-template-columns:1fr;gap:38px}.why .panel{height:340px;order:-1}}

.nutri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.nutri .n{background:var(--white);border-radius:var(--r-card);padding:32px 18px;text-align:center}
.nutri .n b{display:block;font-size:2.2rem;color:var(--teal);margin-bottom:4px}
.nutri .n span{font-size:.9rem;color:var(--muted);font-weight:500}
@media(max-width:860px){.nutri-grid{grid-template-columns:repeat(2,1fr)}}
.nutrition-facts-img{width:100%;border-radius:var(--r-card);display:block;box-shadow:var(--shadow)}
.test-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.test{background:var(--white);border-radius:var(--r-card);padding:34px 20px;text-align:center}
.test .ic{width:62px;height:62px;border-radius:50%;background:var(--cream);margin:0 auto 15px;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.test b{display:block;font-size:1.04rem;margin-bottom:5px}
.test span{font-size:.86rem;color:var(--muted);font-weight:400}
@media(max-width:860px){.test-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- PRICING ---------- */
.pricing{background:var(--teal-deep);color:var(--cream);padding:86px 0}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.price-grid .showpanel{border-radius:var(--r-panel);height:530px;padding:18px}
.price-grid .showpanel .ph,.price-grid .showpanel img.photo{width:100%;height:100%;border:none;background:transparent}
.pricing h2{font-size:2.5rem;margin-bottom:8px;color:#fff}
.pricing .lead{color:#A9C4BE;margin-bottom:30px;font-weight:400}
.plan{background:#26584F;border:2px solid #37766A;border-radius:var(--r-card);padding:26px;
  margin-bottom:16px;position:relative;cursor:pointer;transition:border-color .16s}
.plan.best{border-color:var(--gold);border-width:3px}
.plan .pop{position:absolute;top:-14px;left:26px;background:var(--gold);color:var(--ink);font-size:.72rem;
  font-weight:800;padding:6px 16px;border-radius:var(--r-pill)}
.plan h4{font-size:1.26rem;margin-bottom:6px;color:#fff}
.plan .pp{font-size:1.95rem;font-weight:800;color:var(--gold)}
.plan .pp s{font-size:1rem;color:#89A69F;margin-left:8px;font-weight:400}
.plan .pp small{font-size:.84rem;color:#A9C4BE;font-weight:400;margin-left:6px}
.plan ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.plan li{font-size:.9rem;color:#CFE0DC;font-weight:400}
.plan li::before{content:"✓ ";color:var(--gold);font-weight:800}
.badges{display:flex;gap:24px;margin-top:26px;flex-wrap:wrap}
.badges div{display:flex;align-items:center;gap:9px;font-size:.86rem;color:#A9C4BE}
.badges .b-ic{width:34px;height:34px;border-radius:50%;border:2px solid var(--gold);display:flex;
  align-items:center;justify-content:center;font-size:.9rem;color:var(--gold);font-weight:700}
@media(max-width:1000px){.price-grid{grid-template-columns:1fr}.price-grid .showpanel{height:380px;order:-1}}

/* ---------- SOCIAL ---------- */
.social{padding:86px 0 0;text-align:center;overflow:hidden}
.display-caps{font-weight:900;letter-spacing:-.03em;line-height:.94;
  font-size:clamp(2.4rem,6.4vw,5.2rem);text-transform:uppercase}
.display-caps .g{color:var(--teal);display:block}
.display-caps .d{color:var(--ink);display:block}
.socials{display:flex;gap:12px;justify-content:center;margin:26px 0 20px}
.socials a{width:46px;height:46px;border-radius:12px;background:var(--teal);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:1.1rem;font-weight:700}
.ugc-row{display:flex;gap:20px;justify-content:center;align-items:flex-start;padding-bottom:40px;flex-wrap:wrap}
.ugc-row .ph,.ugc-row img.photo{width:245px;height:315px;border-radius:18px;flex-shrink:0}
.ugc-row img.photo{object-fit:cover;box-shadow:0 18px 38px -24px rgba(0,0,0,.55)}
.ugc-row .ph:nth-child(1),.ugc-row img.photo:nth-child(1){transform:rotate(-6deg)}
.ugc-row .ph:nth-child(2),.ugc-row img.photo:nth-child(2){transform:rotate(3deg);margin-top:18px}
.ugc-row .ph:nth-child(3),.ugc-row img.photo:nth-child(3){transform:rotate(-3deg)}
.ugc-row .ph:nth-child(4),.ugc-row img.photo:nth-child(4){transform:rotate(6deg);margin-top:14px}

/* ---------- ACCORDION ---------- */
.faq{max-width:860px;margin:0 auto}
details{border-bottom:1.5px solid var(--line)}
summary{font-size:1.22rem;font-weight:800;padding:25px 4px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.85rem;font-weight:400;line-height:1}
details[open] summary::after{content:"–"}
details p{padding:0 4px 25px;color:#4d5a54;font-weight:400;max-width:74ch}

/* ---------- FOOTER ---------- */
footer{background:var(--teal-deep);color:#CFE0DC;padding:76px 0 0;font-size:.93rem;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
footer h5{color:var(--gold);margin-bottom:18px;font-size:1.1rem;font-weight:800}
footer a{display:block;margin-bottom:11px;font-weight:400}
footer a:hover{color:var(--gold)}
.signup{display:flex;max-width:360px}
.signup input{flex:1;padding:15px 18px;border:2px solid transparent;font-family:'Montserrat';font-size:.94rem;min-width:0}
.signup input.err{border-color:var(--coral)}
.signup .go{background:var(--gold);border:none;padding:15px 22px;cursor:pointer;font-size:1rem;font-weight:700}
.foot-logo{font-weight:900;font-size:2.2rem;color:var(--gold);letter-spacing:.01em;margin:10px 0 6px}
.foot-logo small{display:block;font-size:.62rem;letter-spacing:.22em;color:#89A69F;font-weight:700;margin-top:4px}
.legal-boxes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0 32px}
.legal-boxes div{border:1px solid #37766A;padding:18px 20px;font-size:.78rem;color:#A9C4BE;line-height:1.65}
.foot-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:.83rem;
  color:#89A69F;padding-bottom:44px}
.foot-bottom .links{display:flex;gap:22px;flex-wrap:wrap}
.bigword{font-weight:900;font-size:clamp(3rem,12vw,10rem);color:#2A5C55;text-align:center;line-height:.85;
  text-transform:uppercase;letter-spacing:-.04em;margin:0 -30px;padding-bottom:10px}
@media(max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}.legal-boxes{grid-template-columns:1fr}}

/* ---------- POLICY PAGES ---------- */
.policy-page{padding:56px 0 84px}
.policy-hero{text-align:center;max-width:900px;margin:0 auto 46px}
.policy-kicker{font-size:.78rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin-bottom:12px}
.policy-hero h1{font-size:clamp(2.25rem,5vw,4.2rem);color:var(--teal);margin-bottom:14px}
.policy-hero p{color:var(--muted);font-size:1.08rem;font-weight:500;max-width:720px;margin:0 auto}
.policy-updated{display:inline-flex;align-items:center;justify-content:center;margin-top:22px;
  padding:9px 18px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line);
  color:var(--muted);font-size:.82rem;font-weight:700}
.policy-content{max-width:900px;margin:0 auto;background:rgba(255,255,255,.54);border-top:3px solid var(--teal-deep);
  padding:10px 0 0}
.policy-section{padding:30px 34px;border-bottom:1px solid var(--line)}
.policy-section h2{font-size:1.52rem;color:var(--teal-deep);margin-bottom:12px;letter-spacing:0}
.policy-section h3{font-size:1.05rem;color:var(--ink);margin:18px 0 8px;letter-spacing:0}
.policy-section p,.policy-section li{color:#4d5a54;font-size:.98rem;font-weight:500;line-height:1.72}
.policy-section p+p{margin-top:12px}
.policy-section ul,.policy-section ol{margin-left:22px;display:flex;flex-direction:column;gap:8px}
.policy-section a{text-decoration:underline;text-underline-offset:3px;font-weight:700;color:var(--teal-deep)}
.policy-callout{background:var(--teal-deep);color:#fff;border-radius:18px;padding:22px 24px;margin-top:16px}
.policy-callout p,.policy-callout li{color:#D9ECE8}
.policy-callout b{color:var(--gold)}
.policy-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:28px}
.policy-actions .btn{padding:15px 28px;font-size:.94rem}
@media(max-width:720px){
  .policy-page{padding:36px 0 58px}
  .policy-hero{text-align:left;margin-bottom:30px}
  .policy-section{padding:24px 18px}
  .policy-content{background:transparent}
  .policy-actions{justify-content:flex-start}
}

/* ---------- OFFER PILL + AGE GATE ---------- */
.offerpill{position:fixed;bottom:22px;left:22px;z-index:90;background:var(--gold-soft);
  border-radius:var(--r-pill);padding:15px 26px;display:flex;align-items:center;gap:16px;
  font-weight:800;font-size:1.02rem;box-shadow:var(--shadow)}
.offerpill button{background:none;border:none;cursor:pointer;opacity:.55;font-size:1.15rem;font-family:'Montserrat'}
@media(max-width:600px){.offerpill{font-size:.9rem;padding:12px 20px;bottom:14px;left:14px}}
#agegate{position:fixed;inset:0;background:rgba(26,36,32,.97);z-index:200;display:flex;
  align-items:center;justify-content:center;padding:24px}
#agegate[hidden]{display:none}
#agegate .box{background:var(--cream);border-radius:34px;max-width:460px;text-align:center;padding:46px 40px}
#agegate .mark{font-weight:900;font-size:2.2rem;color:var(--teal-deep);letter-spacing:.01em}
#agegate .mark small{display:block;font-size:.58rem;letter-spacing:.22em;color:var(--muted);margin-top:5px}
#agegate h2{font-size:1.7rem;margin:20px 0 12px}
#agegate p{color:var(--muted);margin-bottom:26px;font-size:.94rem;font-weight:400}
#agegate .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.pdp{padding:20px 0 70px}
.pdp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.gallery{display:grid;grid-template-columns:88px 1fr;gap:16px;position:sticky;top:100px}
.thumbs{display:flex;flex-direction:column;gap:12px}
.thumb{height:96px;border-radius:14px;cursor:pointer;border:2.5px solid transparent;overflow:hidden;
  padding:6px;transition:border-color .16s}
.thumb.active{border-color:var(--teal-deep)}
.thumb .ph{width:100%;height:100%;border:none;background:transparent;font-size:.58rem;padding:2px}
.thumb .ph .tag{padding:3px 6px;font-size:.55rem}
.stage{border-radius:var(--r-panel);height:600px;position:relative;padding:20px;overflow:hidden}
.stage .ph{width:100%;height:100%;border:none;background:transparent}
.stage video,.stage img.media{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-panel) - 8px)}
.stage-banner{position:absolute;top:0;left:0;right:0;background:var(--teal-deep);color:#fff;
  text-align:center;padding:11px;font-weight:800;font-size:.88rem;z-index:3;letter-spacing:.02em}
@media(max-width:1000px){.pdp-grid{grid-template-columns:1fr;gap:34px}.gallery{position:static}
  .stage{height:420px}}
@media(max-width:560px){.gallery{grid-template-columns:1fr}
  .thumbs{flex-direction:row;order:2;overflow-x:auto}.thumb{width:82px;height:82px;flex-shrink:0}}

.pdp-info .revlink{font-size:.94rem;font-weight:600;margin-bottom:14px;display:inline-block}
.pdp-info .revlink .stars{color:var(--gold);letter-spacing:1px}
.pdp-info .revlink u{text-underline-offset:3px}
.pdp-info h1{font-size:clamp(2rem,3.6vw,2.9rem);color:var(--teal);margin-bottom:14px}
.pdp-info .tagline{font-size:1.12rem;font-weight:600;margin-bottom:22px;color:var(--ink)}
.checks{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;font-weight:500}
.checks li::before{content:"✓";color:var(--teal);font-weight:800;flex-shrink:0}
.divider{height:1px;background:var(--line);margin:26px 0}
.opt-label{font-weight:800;font-size:1.05rem;margin-bottom:12px}
.opt-label span{font-weight:500;color:var(--muted)}
.variants{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:26px}
.variant{border:2.5px solid var(--line);border-radius:18px;padding:14px;cursor:pointer;text-align:center;
  background:var(--white);transition:border-color .16s,background .16s;position:relative}
.variant.active{border-color:var(--teal-deep)}
.variant.disabled{opacity:.5;cursor:not-allowed}
.variant .sw{height:96px;border-radius:12px;margin-bottom:10px;padding:6px}
.variant .sw .ph{width:100%;height:100%;border:none;background:transparent;font-size:.6rem;padding:2px}
.variant b{font-size:.92rem;display:block}
.variant .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--coral);
  color:#fff;font-size:.62rem;font-weight:800;padding:4px 12px;border-radius:var(--r-pill);white-space:nowrap}
.plans{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.planopt{border:2.5px solid var(--line);border-radius:20px;padding:20px;cursor:pointer;background:var(--white);
  position:relative;transition:border-color .16s}
.planopt.active{border-color:var(--teal-deep)}
.planopt .top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.planopt .top b{font-size:1.08rem}
.planopt .top .amt{font-size:1.3rem;font-weight:800;color:var(--teal)}
.planopt .top .amt s{font-size:.9rem;color:#9aa39b;font-weight:400;margin-left:6px}
.planopt .desc{font-size:.86rem;color:var(--muted);margin-top:4px;font-weight:500}
.planopt ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:6px}
.planopt li{font-size:.84rem;color:#4d5a54}
.planopt li::before{content:"✓ ";color:var(--teal);font-weight:800}
.planopt .save{position:absolute;top:-12px;right:20px;background:var(--gold);color:var(--ink);
  font-size:.68rem;font-weight:800;padding:5px 14px;border-radius:var(--r-pill)}
.qtyrow{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.qtyrow .qty{border-width:2.5px}
.qtyrow .qty button{width:44px;height:46px;font-size:1.2rem}
.qtyrow .qty span{min-width:38px;font-size:1rem}
.addbtn{width:100%;font-size:1.1rem;padding:21px}
.autoapplied{text-align:center;color:var(--teal);font-weight:800;font-size:.84rem;letter-spacing:.04em;margin-top:14px}
.trustrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px;text-align:center}
.trustrow div{font-size:.8rem;color:var(--muted);font-weight:500}
.trustrow .ic{width:42px;height:42px;border-radius:50%;border:2px solid var(--teal);color:var(--teal);
  display:flex;align-items:center;justify-content:center;margin:0 auto 9px;font-size:1rem;font-weight:700}
.pdp-acc{margin-top:30px}

/* review filter tabs */
.revtabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.revtab{border:2px solid var(--teal-deep);background:transparent;color:var(--ink);font-weight:700;
  padding:13px 30px;border-radius:var(--r-pill);cursor:pointer;font-family:'Montserrat';font-size:.95rem;
  transition:background .16s,color .16s}
.revtab.active{background:var(--teal-deep);color:#fff}
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.rev{text-align:center}
.rev .stars{color:var(--gold);letter-spacing:2px;margin-bottom:12px;display:block}
.rev h4{font-size:1.08rem;margin-bottom:10px;line-height:1.35}
.rev p{font-size:.95rem;color:#4d5a54;font-weight:400;margin-bottom:12px}
.rev .who{font-weight:700;font-size:.88rem}
@media(max-width:900px){.revgrid{grid-template-columns:1fr}}

/* sticky buy bar */
.buybar{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--line);
  z-index:70;padding:12px 0;transform:translateY(120%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.35)}
.buybar.show{transform:translateY(0)}
.buybar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.buybar .left{display:flex;align-items:center;gap:14px;min-width:0}
.buybar .th{width:52px;height:60px;border-radius:11px;flex-shrink:0;overflow:hidden}
.buybar b{display:block;font-size:1rem;line-height:1.25}
.buybar span{font-size:.84rem;color:var(--muted);font-weight:600}
.buybar .btn{padding:15px 38px;font-size:1rem;white-space:nowrap}
@media(max-width:600px){.buybar .left b{font-size:.86rem}.buybar span{display:none}
  .buybar .btn{padding:14px 24px;font-size:.92rem}}
body.has-buybar{padding-bottom:84px}

/* cross-sell */
.xsell{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.xsell{grid-template-columns:1fr}}

/* two-col faq (pdp) */
.faq2{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start}
.faq2 h2{font-size:clamp(2rem,4vw,3rem)}
@media(max-width:900px){.faq2{grid-template-columns:1fr;gap:24px}}

/* ==========================================================================
   REAL PRODUCT PHOTOGRAPHY
   Photos sit inside the gradient panels. If a file is missing the gradient
   shows through, so the layout degrades gracefully rather than breaking.
   ========================================================================== */
.panel img.photo,.stage img.photo,.sw img.photo,.thumb img.photo,.ph img.photo,
.showpanel img.photo,.ci .thumb img.photo,.buybar .th img.photo{
  width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.panel img.photo{border-radius:16px}
.stage img.photo{border-radius:calc(var(--r-panel) - 8px)}
.sw img.photo{border-radius:12px}
.thumb img.photo{border-radius:10px}
.tile.soon .panel img.photo{filter:none}

/* ==========================================================================
   PREVIEW RIBBON — draft notice for stakeholder review.
   DELETE the <div class="preview-note"> line in index.html + product.html
   (and this block) when the site goes live.
   ========================================================================== */
.preview-note{background:#2B2B2B;color:#F5E9C8;text-align:center;font-size:.76rem;
  font-weight:600;padding:8px 44px 8px 16px;letter-spacing:.02em;position:relative}
.preview-note b{color:var(--gold)}
.preview-note button{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:#F5E9C8;cursor:pointer;font-size:.95rem;opacity:.6;
  font-family:'Montserrat'}

/* ==========================================================================
   MOBILE OPTIMISATION
   Written mobile-out: base fixes apply everywhere, then progressively
   tighter breakpoints. Touch targets follow the 44px minimum.
   ========================================================================== */

/* --- global guards --- */
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden}
*{-webkit-tap-highlight-color:rgba(30,74,69,.14)}
button,a,summary,.variant,.planopt,.thumb,.revtab{touch-action:manipulation}

/* iOS zooms any focused input below 16px. Never go under 1rem. */
input,select,textarea{font-size:16px !important}

/* respect the iPhone home indicator on fixed bottom bars */
.buybar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.offerpill{bottom:calc(22px + env(safe-area-inset-bottom))}
.cart-drawer .cart-foot{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.mobile-nav .sheet{padding-bottom:calc(28px + env(safe-area-inset-bottom))}

/* the two fixed bottom elements must never share space */
body.buybar-visible .offerpill{opacity:0;pointer-events:none;transform:translateY(20px)}
.offerpill{transition:opacity .25s,transform .25s}

/* stop the oversized footer word from creating sideways scroll */
footer{max-width:100vw}
.bigword{max-width:100vw;overflow:hidden;margin:0;padding-left:8px;padding-right:8px}

/* ---------------- TABLET / SMALL LAPTOP ---------------- */
@media(max-width:1040px){
  .wrap{padding:0 24px}
  section.pad{padding:64px 0}
  .band,.why,.pricing{padding:64px 0}
  .icobtn{width:44px;height:44px}          /* touch target */
  .nav-actions{gap:6px;padding:7px 8px}
  .nav-actions .btn{padding:13px 22px}
}

/* ---------------- PHONE ---------------- */
@media(max-width:640px){
  .wrap{padding:0 18px}
  section.pad{padding:48px 0}
  .band,.why,.pricing,.social{padding:48px 0}
  .social{padding-bottom:0}

  /* type scales down but stays readable */
  body{font-size:.97rem}
  .sec-title{font-size:1.95rem;margin-bottom:10px}
  .sec-sub{font-size:.97rem;margin-bottom:32px}
  .hero h1{font-size:2.15rem}
  .hero .sub{font-size:1.02rem}
  .band h2,.why h2{font-size:1.95rem;margin-bottom:28px}
  .pricing h2{font-size:1.85rem}
  .display-caps{font-size:2.1rem}
  .bigword{font-size:3.2rem}

  /* header: tighter, still tappable */
  header{padding:10px 0}
  .logo-pill{padding:9px 16px}
  .logo-pill .mark{font-size:1.2rem}
  .logo-pill .sub{font-size:.44rem;letter-spacing:.16em}
  .nav-actions .btn{padding:12px 18px;font-size:.86rem}
  .announce{font-size:.72rem;padding:9px 12px;line-height:1.4}
  .preview-note{font-size:.68rem;padding:8px 38px 8px 12px;line-height:1.45}

  /* hero: aspect-ratio so the video never letterboxes */
  .hero{padding:16px 0 40px}
  .hero-panel{height:auto;aspect-ratio:1/1;padding:12px}
  .hero-video,.hero-poster,.hero-panel .ph{border-radius:20px}
  .hero-panel{border-radius:26px}
  .rating-line{font-size:.9rem;margin-bottom:16px}
  .hero .btn,.addbtn{width:100%}
  .guar{gap:14px;font-size:.84rem;margin-bottom:28px}

  /* stickers shrink so they don't cover the can */
  .sticker.s1{width:84px;height:84px;font-size:.7rem;top:-10px;left:-6px}
  .sticker.s2{width:64px;height:64px;font-size:.6rem;bottom:14px;right:-6px}

  /* stat circles: 3 across, sized to fit */
  .statrow{gap:0;justify-content:space-between}
  .statc{max-width:none;flex:1;padding:0 4px}
  .statc .circle{width:74px;height:74px;font-size:1.3rem;margin-bottom:7px}
  .statc b{font-size:.86rem}
  .statc span{font-size:.68rem}

  /* press logos centre rather than stretch */
  .press{padding:24px 0 32px}
  .press-row{justify-content:center;gap:18px 22px}
  .press-row span{font-size:.92rem}

  /* product tiles */
  .tile .panel{height:300px}
  .tile h3{font-size:1.1rem}
  .tile .btn{padding:16px;font-size:1rem}

  /* value-prop + trust cards */
  .vp{gap:18px}
  .vp .card{padding:12px 12px 24px}
  .vp .card .ph,.vp .card img.photo{height:220px}
  .vp .card h3{font-size:1.25rem}
  .vp .card p{padding:0 6px;font-size:.94rem}
  .showcase{height:300px}
  .nutri-grid,.test-grid{gap:14px}
  .nutri .n{padding:24px 12px}
  .nutri .n b{font-size:1.75rem}
  .test{padding:26px 14px}

  /* why band */
  .why .lead{font-size:1rem;margin-bottom:26px}
  .why li{font-size:.96rem;gap:12px}
  .why ol{gap:16px;margin-bottom:28px}
  .why .panel{height:260px}
  .why .btn{width:100%}

  /* pricing */
  .plan{padding:20px}
  .plan .pp{font-size:1.6rem}
  .badges{gap:14px;justify-content:space-between}
  .badges div{font-size:.76rem;flex-direction:column;text-align:center;gap:6px;flex:1}

  /* UGC becomes a swipeable carousel instead of a broken wrap */
  .ugc-row{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding:0 18px 32px;gap:12px;justify-content:flex-start}
  .ugc-row::-webkit-scrollbar{display:none}
  .ugc-row .ph,.ugc-row img.photo{width:62vw;max-width:230px;height:270px;scroll-snap-align:center;transform:none !important}
  .socials{margin:20px 0 28px}

  /* accordions */
  summary{font-size:1.05rem;padding:20px 2px;gap:14px}
  summary::after{font-size:1.6rem}
  details p{padding:0 2px 20px;font-size:.94rem}

  /* footer */
  footer{padding:52px 0 0}
  .foot-grid{grid-template-columns:1fr;gap:30px;margin-bottom:36px}
  .signup{max-width:none}
  .foot-bottom{flex-direction:column;gap:14px;font-size:.78rem}
  .foot-bottom .links{gap:14px}
  .legal-boxes div{font-size:.72rem;padding:14px 16px}
  .foot-logo{font-size:1.8rem}

  /* offer pill */
  .offerpill{font-size:.86rem;padding:12px 18px;left:14px;
    bottom:calc(14px + env(safe-area-inset-bottom))}

  /* age gate */
  #agegate .box{padding:34px 22px;border-radius:26px}
  #agegate h2{font-size:1.4rem}
  #agegate p{font-size:.9rem}
  #agegate .row{flex-direction:column}
  #agegate .row .btn{width:100%}

  /* cart drawer takes the full screen on a phone */
  .cart-drawer .sheet{width:100vw}
  .cart-head{padding:18px 18px}
  .cart-items{padding:6px 18px}
  .cart-foot{padding:18px}
  .ci .thumb{width:64px;height:80px}
  .qty button{width:44px;height:44px;font-size:1.15rem}   /* touch target */
  .qty span{min-width:32px}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom));font-size:.88rem;padding:13px 22px}

  /* ---- PRODUCT PAGE ---- */
  .pdp{padding:12px 0 40px}
  .pdp-grid{gap:26px}
  .stage{height:auto;aspect-ratio:1/1;padding:12px;border-radius:26px}
  .stage video,.stage img.media,.stage img.photo,.stage .ph{border-radius:18px}
  .stage-banner{font-size:.7rem;padding:9px 6px}

  /* thumbnails scroll horizontally under the main image */
  .gallery{grid-template-columns:1fr;gap:12px}
  .thumbs{flex-direction:row;order:2;overflow-x:auto;gap:10px;
    -webkit-overflow-scrolling:touch;padding-bottom:4px}
  .thumbs::-webkit-scrollbar{display:none}
  .thumb{width:74px;height:74px;flex-shrink:0;padding:4px;border-radius:12px}

  .pdp-info h1{font-size:1.65rem}
  .pdp-info .tagline{font-size:1rem}
  .checks li{font-size:.94rem}
  .divider{margin:20px 0}
  .opt-label{font-size:.98rem}
  .variant{padding:10px}
  .variant .sw{height:76px}
  .variant b{font-size:.84rem}
  .planopt{padding:16px;border-radius:16px}
  .planopt .top{flex-direction:column;align-items:flex-start;gap:6px}
  .planopt .top .amt{font-size:1.35rem}
  .planopt .save{right:14px}
  .qtyrow{justify-content:space-between;margin-bottom:18px}
  .addbtn{font-size:1.02rem;padding:19px}
  .trustrow{gap:8px;margin-top:20px}
  .trustrow div{font-size:.68rem;line-height:1.35}
  .trustrow .ic{width:36px;height:36px;font-size:.85rem;margin-bottom:7px}

  /* review filter tabs scroll instead of wrapping into a block */
  .revtabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;gap:8px;margin:0 -18px 28px;padding:0 18px 6px}
  .revtabs::-webkit-scrollbar{display:none}
  .revtab{flex-shrink:0;padding:12px 20px;font-size:.88rem}
  .revgrid{gap:26px}
  .rev h4{font-size:1rem}
  .rev p{font-size:.92rem}

  .faq2{gap:18px}
  .buybar .btn{padding:15px 22px;font-size:.9rem}
  .buybar .th{width:44px;height:52px}
  body.has-buybar{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}

/* ---------------- SMALL PHONE (iPhone SE etc.) ---------------- */
@media(max-width:380px){
  .wrap{padding:0 14px}
  .hero h1{font-size:1.9rem}
  .sec-title{font-size:1.72rem}
  .statc .circle{width:64px;height:64px;font-size:1.12rem}
  .statc b{font-size:.78rem}
  .statc span{font-size:.62rem}
  .nav-actions .btn{padding:11px 14px;font-size:.8rem}
  .logo-pill{padding:8px 13px}
  .logo-pill .mark{font-size:1.05rem}
  .variants{gap:10px}
  .display-caps{font-size:1.8rem}
  .bigword{font-size:2.6rem}
}

/* ---------------- LANDSCAPE PHONE ---------------- */
@media(max-height:500px) and (orientation:landscape){
  .hero-panel,.stage{aspect-ratio:16/10}
  #agegate .box{padding:22px;max-height:92vh;overflow-y:auto}
  #agegate h2{font-size:1.25rem;margin:12px 0 8px}
}

/* iOS keeps scrolling the page behind an overlay unless the body is pinned.
   JS stores the offset and restores it on close so you don't lose your place. */
body.no-scroll{position:fixed;width:100%;overflow:hidden}