/** Shopify CDN: Minification failed

Line 1430:0 Unexpected "}"
Line 1864:0 Unexpected "}"

**/
/* ============================================================
   GreenCup / AVOCAFE — prototype store
   Palette lifted from the supplied creatives:
   deep forest green, lime, orange CTA, cream
   ============================================================ */

:root{
  --g900:#05200C;
  --g800:#0A3215;
  --g700:#114A20;
  --g600:#1A662D;
  --g500:#26833C;
  --lime:#8BC53F;
  --lime2:#A8D84F;
  --lime3:#D3EDA0;
  --org:#F15A24;
  --org2:#FF7043;
  --orgD:#CF4615;
  --cream:#F8F5EC;
  --cream2:#EFEADA;
  --ink:#0E1A11;
  --body:#445349;
  --muted:#73837A;
  --line:#DFE4DA;
  --white:#fff;

  --r:14px;
  --rl:22px;
  --sh:0 2px 4px rgba(10,50,21,.04), 0 8px 24px rgba(10,50,21,.06);
  --shL:0 8px 16px rgba(10,50,21,.06), 0 24px 56px rgba(10,50,21,.10);
  --wrap:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--body);
  background:var(--white);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:var(--ink);margin:0;line-height:1.14;letter-spacing:-.025em;font-weight:800}
p{margin:0 0 1em}
s{opacity:.55}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%}

/* ---------- MARQUEE ---------- */
/* The ticker sits under the header, not above it, and reads as a soft
   sage band rather than a black bar. */
.marquee{
  background:#EDF2E4;color:var(--g700);overflow:hidden;padding:10px 0;white-space:nowrap;
  border-bottom:1px solid #DCE6CE;
}
.marquee--mid{background:var(--lime);color:var(--g900);border:0}
.marquee__track{display:flex;width:max-content;animation:slide 22s linear infinite;
  /* translate3d + will-change promote this to its own GPU layer. Safari on
     iOS will otherwise sometimes decline to animate a strip that sits under
     a sticky, backdrop-blurred header, and it reads as frozen. */
  will-change:transform;backface-visibility:hidden}
.marquee__track span{
  display:inline-flex;align-items:center;gap:0;padding-right:0;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.marquee__track i{font-style:normal;opacity:.45;padding:0 20px;font-size:8px;vertical-align:middle;color:var(--lime)}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation-duration:90s}}

/* ---------- HEADER ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:28px;height:74px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo__mark{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(145deg,var(--lime2),var(--g600));
  color:var(--white);display:grid;place-items:center;font-size:15px;
  box-shadow:0 3px 10px rgba(26,102,45,.3);
}
.logo__txt{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-weight:700;font-size:19px;color:var(--g800);line-height:1;letter-spacing:-.02em}
.logo__txt em{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-style:normal;font-size:8.5px;letter-spacing:.3em;color:var(--lime);font-weight:800;margin-top:3px}
.nav{display:flex;gap:30px;margin-left:12px}
.nav a{font-size:14.5px;font-weight:600;color:var(--body);position:relative;padding:6px 0;transition:color .2s}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--lime);transition:width .25s var(--ease);border-radius:2px}
.nav a:hover{color:var(--g700)}
.nav a:hover::after{width:100%}
.hdr__right{margin-left:auto;display:flex;align-items:center;gap:18px}
.hdr__rating{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;letter-spacing:.01em}
.hdr__rating b{color:var(--ink);font-size:14px}
.hdr__rating i{font-style:normal}
.hdr__burger{display:none;flex-direction:column;gap:4.5px;padding:8px;margin-left:-8px}
.hdr__burger span{width:21px;height:2px;background:var(--g800);border-radius:2px;transition:.25s var(--ease)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--org);color:var(--white);font-weight:700;font-size:15px;
  padding:14px 26px;border-radius:999px;letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(241,90,36,.3);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
}
.btn:hover{background:var(--orgD);transform:translateY(-2px);box-shadow:0 8px 22px rgba(241,90,36,.38)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:10px 20px;font-size:14px}
.btn--lg{padding:17px 38px;font-size:16.5px}
.btn--cart{
  width:100%;padding:20px 24px;font-size:20px;
  justify-content:center;gap:16px;
  border-radius:var(--r);margin-top:10px;
}
.btn--cart em{font-style:normal;display:flex;align-items:center;gap:9px;font-size:16px}
.btn--cart em s{opacity:.6;font-weight:500}
.btn--cart em b{font-size:21px}

/* ---------- PDP LAYOUT ---------- */
.pdp{padding:48px 0 70px;background:
  radial-gradient(900px 420px at 88% -8%, rgba(139,197,63,.13), transparent 60%),
  radial-gradient(700px 400px at -5% 10%, rgba(26,102,45,.07), transparent 60%);
}
.pdp__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:60px;align-items:start}

/* GALLERY */
.gal{position:sticky;top:98px}
.gal__main{
  position:relative;border-radius:var(--rl);overflow:hidden;background:var(--cream2);
  box-shadow:var(--shL);aspect-ratio:1/1;
}
.gal__main img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.gal__badge{
  position:absolute;top:18px;left:18px;z-index:2;
  background:var(--org);color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:8px 15px;border-radius:999px;
  box-shadow:0 4px 12px rgba(241,90,36,.35);
}
.gal__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-top:14px}
.gal__thumb{
  border-radius:11px;overflow:hidden;aspect-ratio:1/1;background:var(--cream2);
  border:2px solid transparent;transition:border-color .2s,transform .2s var(--ease);padding:0;
}
.gal__thumb img{width:100%;height:100%;object-fit:cover}
.gal__thumb:hover{transform:translateY(-3px)}
.gal__thumb.is-active{border-color:var(--lime)}
.gal__trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  list-style:none;margin:18px 0 0;padding:0;
}
.gal__trust li{
  background:var(--white);border:1px solid var(--line);border-radius:11px;
  padding:12px 6px;text-align:center;font-size:11.5px;font-weight:700;color:var(--g700);
  display:flex;flex-direction:column;align-items:center;gap:5px;line-height:1.3;
}
.gal__trust b{font-size:17px}

/* BUY BOX */
.buy__eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin-bottom:10px}
/* The desire headline is a heavy sans, not the Fraunces serif the rest
   of the headings use. Every brand in this category sets it this way,
   and Fraunces' slanted lowercase e tilts double-e words. */
.buy__title{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;
  font-size:clamp(33px,4.4vw,47px);line-height:1.08;letter-spacing:-.025em;
}
.buy__title span{
  display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:600;
  color:var(--body);letter-spacing:.02em;margin-top:12px;
}
.buy__stars{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:14px;color:var(--muted)}
.stars{color:var(--lime);letter-spacing:2px;font-size:15px}
.stars--lg{font-size:21px}
.buy__stars b{color:var(--ink);font-size:15px}
.buy__stars i{font-style:normal}
/* marketplace-style rule between the rating and the units sold */
.buy__sep{width:1px;height:13px;background:var(--line);display:inline-block;margin:0 -1px}
.buy__sold{color:var(--ink);font-weight:600}
.buy__revlink{color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(0,0,0,.25);cursor:pointer}
.buy__revlink:hover{text-decoration-color:currentColor}
.buy__sub{font-size:16.5px;line-height:1.6;max-width:50ch;margin:14px 0 18px}
.buy__pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 26px}
.buy__pills li{
  background:var(--lime3);color:var(--g700);font-size:12.5px;font-weight:700;
  padding:7px 14px;border-radius:999px;
}

/* TIERS */
.tiers{display:grid;gap:11px;margin-bottom:22px}
.tier{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  border:2px solid var(--line);border-radius:var(--r);padding:18px 18px;cursor:pointer;
  background:var(--white);transition:border-color .2s,box-shadow .2s,background .2s;
}
.tier:hover{border-color:var(--lime2)}
.tier.is-active{border-color:var(--g600);background:#FBFDF7;box-shadow:0 0 0 4px rgba(139,197,63,.14)}
.tier input{position:absolute;opacity:0;pointer-events:none}
.tier__radio{
  width:21px;height:21px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;transition:border-color .2s;flex-shrink:0;
}
.tier__radio::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--g600);transform:scale(0);transition:transform .2s var(--ease)}
.tier.is-active .tier__radio{border-color:var(--g600)}
.tier.is-active .tier__radio::after{transform:scale(1)}
.tier__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.tier__name{font-weight:800;color:var(--ink);font-size:16px}
.tier__meta{font-size:13px;color:var(--muted)}
.tier__unit{font-size:12.5px;color:var(--g600);font-weight:700}
.tier__gift{font-size:12.5px;color:var(--org);font-weight:700;margin-top:3px}
.tier__price{text-align:right;display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.tier__price b{font-size:20px;color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}
.tier__price s{font-size:13px;color:var(--muted)}
.tier__flag{
  position:absolute;top:-10px;left:52px;background:var(--g600);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;
}
.tier__flag--best{background:var(--org)}

/* UNLOCK METER */
.unlock{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:18px}
.unlock__head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:9px}
.unlock__head b{color:var(--ink);font-size:13px}
.unlock__head span{color:var(--g600);font-weight:700}
.unlock__bar{height:7px;background:var(--cream2);border-radius:999px;overflow:hidden}
.unlock__bar i{display:block;height:100%;width:33%;border-radius:999px;background:linear-gradient(90deg,var(--lime),var(--g500));transition:width .45s var(--ease)}
.unlock__items{list-style:none;padding:0;margin:13px 0 0;display:grid;gap:7px}
.unlock__items li{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;transition:color .25s}
.unlock__items li::before{content:'🔒';font-size:11px}
.unlock__items li.is-on{color:var(--g700);font-weight:600}
.unlock__items li.is-on::before{content:'✅'}
.unlock__items b{color:var(--org);font-weight:800}

.buy__ship{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--body);margin:0 0 16px;
}
.buy__ship b{color:var(--ink)}
.dot{
  width:8px;height:8px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 4px rgba(139,197,63,.25);flex-shrink:0;
  animation:dotPulse 2.6s ease-in-out infinite;
}
/* slow "we are live" pulse on the shipping line */
@keyframes dotPulse{
  0%,100%{opacity:1;box-shadow:0 0 0 4px rgba(139,197,63,.25)}
  50%    {opacity:.45;box-shadow:0 0 0 7px rgba(139,197,63,.08)}
}
@media (prefers-reduced-motion:reduce){ .dot{animation:none} }
.buy__fine{font-size:13px;text-align:center;color:var(--muted);margin:12px 0 18px}
.buy__fine b{color:var(--g700)}

.buy__guar{display:flex;gap:14px;align-items:flex-start;background:var(--g800);color:#fff;border-radius:var(--r);padding:18px 20px;margin-bottom:26px}
.buy__guar-ic{font-size:24px;line-height:1}
.buy__guar b{display:block;font-size:14.5px;margin-bottom:3px;color:#fff}
.buy__guar span{font-size:13px;color:rgba(255,255,255,.72);line-height:1.5}

/* ACCORDION */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none;cursor:pointer;padding:17px 0;font-weight:700;color:var(--ink);
  font-size:15px;display:flex;justify-content:space-between;align-items:center;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-size:22px;font-weight:400;color:var(--g600);transition:transform .25s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc__c{padding:0 0 18px;font-size:14.5px;line-height:1.7}
.acc__c p:last-child{margin-bottom:0}
.ul{padding-left:18px;margin:0}
.ul li{margin-bottom:5px}

/* ---------- STATS ---------- */
.stats{background:var(--g900);padding:52px 0}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat b{display:block;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:clamp(34px,4.4vw,52px);color:var(--lime2);line-height:1;letter-spacing:-.02em}
.stat span{display:block;margin-top:9px;font-size:13px;color:rgba(255,255,255,.62);font-weight:600;letter-spacing:.02em}

/* ---------- SECTION SHELL ---------- */
.sec{padding:84px 0}
.sec--cream{background:var(--cream)}
.sec--dark{background:var(--g800);color:rgba(255,255,255,.76)}
.sec__head{max-width:660px;margin:0 auto 48px;text-align:center}
.sec__head h2{font-size:clamp(29px,3.7vw,44px);margin-bottom:14px}
.sec__head p{font-size:16.5px;max-width:56ch;margin:0 auto}
.sec__head--light h2{color:#fff}
.sec__head--light p{color:rgba(255,255,255,.66)}
.kicker{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--g600);background:var(--lime3);
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
}
.sec--dark .kicker{background:rgba(139,197,63,.17);color:var(--lime2)}
.kicker--warn{background:#FFE8DC;color:var(--orgD)}
.sec__rating{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font-size:14px;color:var(--muted)}
.sec__rating b{font-size:20px;color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}
.sec__rating i{font-style:normal}

/* ---------- COMPARISON ---------- */
.cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:44px;align-items:center}
.cmp__img{margin:0;border-radius:var(--rl);overflow:hidden;box-shadow:var(--shL)}
.cmp__cols{display:grid;gap:16px}
.cmp__col{background:var(--white);border-radius:var(--r);padding:24px 26px;border:1px solid var(--line)}
.cmp__col h3{font-size:21px;margin-bottom:14px}
.cmp__col ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.cmp__col li{font-size:14.5px;line-height:1.5;position:relative;padding-left:24px}
.cmp__col li::before{font-size:15px;position:absolute;left:0;top:0}
.cmp__col--bad{background:#FBF6F4}
.cmp__col--bad h3{color:#A33B1B}
.cmp__col--bad li::before{content:'✕';color:var(--org);font-weight:800}
.cmp__col--good{border-color:var(--lime);box-shadow:0 0 0 4px rgba(139,197,63,.13)}
.cmp__col--good h3{color:var(--g700)}
.cmp__col--good li::before{content:'✓';color:var(--g500);font-weight:800}

/* ---------- INGREDIENTS ---------- */
.ing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ing__card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--rl);padding:30px 26px 26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.ing__card:hover{transform:translateY(-5px);box-shadow:var(--shL);border-color:var(--lime2)}
.ing__n{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--lime3);color:var(--g700);font-weight:800;font-size:13px;margin-bottom:16px;
}
.ing__card h3{font-size:21px;margin-bottom:10px}
.ing__card p{font-size:14.5px;line-height:1.65;margin-bottom:16px}
.ing__card b{font-size:13px;font-weight:800;color:var(--g600);background:var(--cream);padding:6px 13px;border-radius:999px;display:inline-block}
.ing__card--alt{background:var(--g800);border-color:var(--g800)}
.ing__card--alt h3{color:#fff}
.ing__card--alt p{color:rgba(255,255,255,.7)}
.ing__card--alt .ing__n{background:rgba(139,197,63,.2);color:var(--lime2)}
.ing__card--alt b{background:var(--lime);color:var(--g900)}

/* ---------- BENEFITS ---------- */
.ben{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.ben__media{border-radius:var(--rl);overflow:hidden;box-shadow:var(--shL)}
.ben__list{display:grid;gap:14px}
.ben__row{display:flex;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;transition:transform .22s var(--ease),box-shadow .22s}
.ben__row:hover{transform:translateX(5px);box-shadow:var(--sh)}
.ben__row i{font-size:23px;font-style:normal;line-height:1.2;flex-shrink:0}
.ben__row b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:3px}
.ben__row p{font-size:14px;margin:0;line-height:1.55}

/* ---------- REVIEWS ---------- */
.rev{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev__card{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--rl);padding:30px 28px;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s;
}
.rev__card:hover{transform:translateY(-5px);box-shadow:var(--shL)}
.rev__score{
  position:absolute;top:26px;right:26px;background:var(--lime3);color:var(--g700);
  font-weight:800;font-size:13px;padding:5px 12px;border-radius:999px;
}
.rev__card h3{font-size:19px;line-height:1.3;margin-bottom:14px;padding-right:56px}
.rev__card p{font-size:14.5px;line-height:1.7;flex:1}
.rev__card footer{display:flex;flex-direction:column;margin:8px 0 14px}
.rev__card footer b{font-size:13.5px;color:var(--ink);letter-spacing:.04em}
.rev__card footer span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.rev__tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px}
.rev__tags li{font-size:11.5px;font-weight:700;color:var(--g600);background:var(--cream);padding:5px 11px;border-radius:999px}

/* ---------- JOURNEY ---------- */
.jny{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.jny__step{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rl);padding:28px 24px;position:relative;
  transition:background .25s,transform .25s var(--ease);
}
.jny__step:hover{background:rgba(255,255,255,.09);transform:translateY(-5px)}
.jny__step span{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime2);margin-bottom:12px;
}
.jny__step h3{color:#fff;font-size:21px;margin-bottom:14px}
.jny__step ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.jny__step li{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.5;position:relative;padding-left:19px}
.jny__step li::before{content:'→';color:var(--lime);position:absolute;left:0;top:0}
.jny__step--last{background:rgba(139,197,63,.13);border-color:rgba(139,197,63,.3)}
.jny__cta{text-align:center;margin-top:40px}

/* ---------- WHY ---------- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.why__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--rl);
  padding:32px 30px;transition:transform .25s var(--ease),box-shadow .25s;
}
.why__card:hover{transform:translateY(-4px);box-shadow:var(--shL)}
.why__card span{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--org);margin-bottom:12px;
}
.why__card h3{font-size:23px;margin-bottom:11px}
.why__card p{font-size:14.5px;line-height:1.7;margin:0}

/* ---------- SAMPLES ---------- */
.samp{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.samp figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--cream)}
.samp img{width:100%;aspect-ratio:1/1;object-fit:cover}
.samp figcaption{font-size:12px;padding:11px 13px;color:var(--muted);line-height:1.4;font-weight:600}
.samp--flag{border-color:var(--org);box-shadow:0 0 0 3px rgba(241,90,36,.12)}
.samp--flag figcaption{color:var(--orgD)}

/* ---------- FOOTER ---------- */
.ftr{background:var(--g900);color:rgba(255,255,255,.58);padding:68px 0 0}
.ftr__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:48px}
.logo--ftr .logo__txt{color:#fff}
.ftr__brand p{font-size:14px;margin:18px 0;max-width:38ch;line-height:1.65}
.ftr__badges{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.ftr__badges li{font-size:11px;font-weight:700;color:var(--lime2);border:1px solid rgba(139,197,63,.3);padding:5px 11px;border-radius:999px}
.ftr__col h4{color:#fff;font-size:14px;margin-bottom:16px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:.04em}
.ftr__col a{display:block;font-size:14px;padding:5px 0;transition:color .2s}
.ftr__col a:hover{color:var(--lime2)}
.ftr__legal{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;padding-bottom:34px}
.ftr__legal p{font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.4);margin-bottom:7px}
.ftr__proto{color:var(--org2)!important;font-weight:700}

/* ---------- STICKY CTA ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  align-items:center;gap:14px;padding:12px 18px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(10,50,21,.1);
}
.sticky__info{display:flex;flex-direction:column;line-height:1.25;flex-shrink:0}
.sticky__info b{font-size:14px;color:var(--ink)}
.sticky__info span{font-size:15px;font-weight:800;color:var(--g600)}
.btn--sticky{flex:1;margin-top:0;padding:14px 20px;font-size:15px;justify-content:center}

/* ---------- TOAST ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,120%);
  background:var(--g900);color:#fff;font-size:14px;font-weight:600;
  padding:14px 24px;border-radius:999px;z-index:90;box-shadow:var(--shL);
  transition:transform .4s var(--ease);max-width:calc(100vw - 32px);text-align:center;
}
.toast.is-on{transform:translate(-50%,0)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .pdp__grid{grid-template-columns:1fr;gap:44px}
  .gal{position:static}
  .gal__main{max-width:560px;margin:0 auto}
  .gal__thumbs,.gal__trust{max-width:560px;margin-left:auto;margin-right:auto}
  .ing,.rev{grid-template-columns:repeat(2,1fr)}
  .jny{grid-template-columns:repeat(2,1fr)}
  .samp{grid-template-columns:repeat(3,1fr)}
  .nav{display:none}
  .hdr__burger{display:flex}
  .nav.is-open{
    display:flex;flex-direction:column;gap:0;position:absolute;top:74px;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);padding:8px 24px 18px;margin:0;
    box-shadow:var(--sh);
  }
  .nav.is-open a{padding:13px 0;border-bottom:1px solid var(--line)}
}
@media (max-width:860px){
  .cmp,.ben{grid-template-columns:1fr;gap:32px}
  .ftr__grid{grid-template-columns:1fr 1fr;gap:32px}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .why{grid-template-columns:1fr}
}
@media (max-width:680px){
  .wrap{padding:0 16px}
  .sec{padding:60px 0}
  .pdp{padding:14px 0 44px}
  .pdp__grid{gap:18px}
  /* Keep the hero square on mobile. The packshots are square, so any
     other ratio letterboxes them and the pouch renders smaller than
     the card it sits in. */
  .gal__main{aspect-ratio:1/1}
  .gal__thumbs{margin-top:9px;gap:6px}
  .gal__thumb{aspect-ratio:1/.8;border-radius:9px}
  .buy__stars{margin:0 0 8px;gap:7px;font-size:13.5px}
  .buy__stars b{font-size:14px}
  .buy__sub{font-size:15.5px;line-height:1.5;margin:10px 0 13px}
  .buy__pills{gap:6px;margin:0 0 16px}
  .buy__title span{margin-top:5px}
  .hdr__rating{display:none}
  .ing,.rev,.jny,.samp{grid-template-columns:1fr}
  .samp{gap:14px}
  .gal__thumbs{grid-template-columns:repeat(5,1fr);gap:7px}
  .gal__trust{grid-template-columns:repeat(2,1fr)}
  .tier{grid-template-columns:auto 1fr;row-gap:8px;padding:16px 15px}
  .tier__price{grid-column:2;text-align:left;flex-direction:row;align-items:baseline;gap:9px}
  .tier__flag{left:46px}
  .buy__title{font-size:28.5px;line-height:1.12;letter-spacing:-.02em}
  /* label and price stay on ONE line, centred together */
  .btn--cart{flex-direction:row;flex-wrap:nowrap;justify-content:center;
    gap:14px;padding:18px 14px;font-size:19px}
  .btn--cart>span{white-space:nowrap}
  .btn--cart em{gap:7px;white-space:nowrap}
  .btn--cart em b{font-size:20px}
  .sticky.is-on{display:flex}
  /* only reserve room when a sticky CTA bar is actually on screen;
     this theme does not render one, so the page used to end in 74px of dead space */
  body:has(.sticky.is-on){padding-bottom:74px}
  .ftr{padding-top:48px}
}

/* ============================================================
   SHOP / COLLECTION PAGE
   ============================================================ */
.shophero{
  background:
    radial-gradient(760px 420px at 85% -10%, rgba(139,197,63,.16), transparent 62%),
    linear-gradient(180deg,#fff, var(--cream));
  padding:62px 0 54px;text-align:center;
}
.shophero h1{font-size:clamp(34px,5vw,58px);margin-bottom:16px;letter-spacing:-.03em}
.shophero p{font-size:17px;max-width:56ch;margin:0 auto}
.shophero__stats{display:flex;justify-content:center;flex-wrap:wrap;gap:46px;margin-top:38px}
.shophero__stats b{display:block;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:32px;color:var(--g700);line-height:1}
.shophero__stats span{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* FILTERS */
.filters{position:sticky;top:74px;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.filters__in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.filters__group{display:flex;gap:8px;flex-wrap:wrap}
.filters__group--tier{margin-left:4px}
.chip{
  border:1.5px solid var(--line);background:#fff;border-radius:999px;
  padding:9px 17px;font-size:13.5px;font-weight:700;color:var(--body);
  transition:border-color .2s,background .2s,color .2s,transform .15s var(--ease);
}
.chip:hover{border-color:var(--lime2);transform:translateY(-1px)}
.chip.is-on{background:var(--g700);border-color:var(--g700);color:#fff}
.chip--ghost{font-size:12.5px;padding:8px 14px;color:var(--muted)}
.chip--ghost.is-on{background:var(--lime3);border-color:var(--lime);color:var(--g700)}
.filters__count{margin-left:auto;font-size:13px;color:var(--muted);font-weight:600}

/* PRODUCT GRID */
.sec--grid{padding-top:44px}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pc{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--rl);overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;
}
.pc:hover{transform:translateY(-6px);box-shadow:var(--shL);border-color:var(--lime2)}
.pc.is-hidden{display:none}
.pc__img{
  position:relative;aspect-ratio:1/1;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--a,#1A662D),var(--b,#8BC53F));overflow:hidden;
}
.pc__img--photo{background:var(--cream2)}
.pc__img--photo img{width:100%;height:100%;object-fit:cover}
.pc__art{font-size:76px;line-height:1;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
.pc__fmt{
  position:absolute;top:12px;left:12px;z-index:2;background:rgba(255,255,255,.93);
  color:var(--g800);font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;
  letter-spacing:.03em;
}
.pc__tier{
  position:absolute;top:12px;right:12px;z-index:2;font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;color:#fff;
}
.pc__tier--1{background:var(--g600)}
.pc__tier--2{background:#C98B2B}
.pc__tier--3{background:#7B8A80}
.pc__tier--best{background:var(--org)}
.pc__body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.pc__ph{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin-bottom:7px}
.pc__body h3{font-size:18px;line-height:1.25;margin-bottom:8px}
.pc__owns{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:12px;flex:1}
.pc__meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:14px}
.pc__meta i{font-style:normal}
.pc__foot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.pc__foot b{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:20px;color:var(--ink)}
.pc__foot s{font-size:13px;color:var(--muted)}
.pc__btn{
  margin-left:auto;background:var(--g700);color:#fff;font-size:13px;font-weight:700;
  padding:9px 18px;border-radius:999px;transition:background .2s,transform .15s var(--ease);
}
.pc__btn:hover{background:var(--org);transform:translateY(-1px)}
.pc--hero{border-color:var(--lime);box-shadow:0 0 0 3px rgba(139,197,63,.16)}
.pgrid__empty{text-align:center;padding:60px 0;color:var(--muted);font-size:15px}

/* BITOON HOLD */
.hold{
  display:flex;gap:22px;background:#fff;border:2px solid var(--org);
  border-radius:var(--rl);padding:30px 32px;box-shadow:0 0 0 4px rgba(241,90,36,.1);
}
.hold__ic{font-size:36px;line-height:1;flex-shrink:0}
.hold h3{font-size:24px;margin-bottom:12px;color:var(--orgD)}
.hold p{font-size:14.5px;line-height:1.7}
.hold p:last-child{margin-bottom:0}
.hold u{text-decoration-color:var(--org);text-underline-offset:3px}

@media (max-width:1080px){ .pgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .shophero__stats{gap:30px}
  .hold{flex-direction:column;gap:14px;padding:24px}
}
@media (max-width:560px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:14px}
  .pc__body{padding:14px}
  .pc__body h3{font-size:15px}
  .pc__owns{font-size:12px}
  .pc__art{font-size:54px}
  .pc__foot{flex-wrap:wrap;gap:6px}
  .pc__btn{margin-left:0;width:100%;text-align:center;margin-top:4px}
  .filters__in{gap:10px}
  .filters__count{display:none}
  .filters{top:74px}
}

/* ============================================================
   PDP VARIANT ART + BREADCRUMBS
   ============================================================ */
/* Breadcrumbs are hidden everywhere — the header nav covers it and they
   cost a strip of the first screen. Markup stays so product.js can keep
   writing into it and nothing has to change if they come back. */
.crumbs{display:none}
.crumbs--on{background:var(--cream);border-bottom:1px solid var(--line);font-size:13px;padding:11px 0;color:var(--muted)}
.crumbs a{color:var(--g600);font-weight:600}
.crumbs a:hover{text-decoration:underline}

.gal__main--art{background:linear-gradient(145deg,var(--a,#14512A),var(--b,#8BC53F));display:grid;place-items:center;transition:background .4s var(--ease)}
.art{position:relative;display:grid;place-items:center;width:100%;height:100%}
.art__bottle{
  position:relative;width:40%;max-width:190px;aspect-ratio:.62/1;
  background:linear-gradient(170deg,#F6F3EA,#DCD6C4);border-radius:16px 16px 12px 12px;
  box-shadow:0 20px 44px rgba(0,0,0,.34), inset -10px 0 22px rgba(0,0,0,.09);
  display:flex;align-items:center;justify-content:center;z-index:2;
}
.art__cap{position:absolute;top:-9%;left:17%;width:66%;height:14%;background:linear-gradient(180deg,#0A3215,#06240F);border-radius:7px 7px 4px 4px;box-shadow:0 5px 12px rgba(0,0,0,.3)}
.art__label{
  width:84%;background:var(--g800);border-radius:9px;padding:15px 11px;text-align:center;color:#fff;
  box-shadow:0 5px 14px rgba(0,0,0,.2);
}
.art__label i{display:block;font-style:normal;font-size:8px;letter-spacing:.24em;color:var(--lime);font-weight:800;margin-bottom:5px}
.art__label b{display:block;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1;letter-spacing:-.01em}
.art__label u{display:block;text-decoration:none;font-size:6.5px;letter-spacing:.17em;color:rgba(255,255,255,.75);font-weight:700;margin-top:5px}
.art__label em{display:block;font-style:normal;font-size:6px;color:var(--lime2);margin-top:7px;font-weight:700;letter-spacing:.04em}
.art__fruit{position:absolute;right:11%;bottom:11%;font-size:74px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.3));z-index:1}
.gal__thumb span{display:grid;place-items:center;width:100%;height:100%;font-size:26px;background:linear-gradient(145deg,var(--a,#14512A),var(--b,#8BC53F))}

/* ============================================================
   CREATIVE REWRITE PAGE
   ============================================================ */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rule{border-radius:var(--rl);padding:26px 28px;border:2px solid}
.rule b{display:block;font-size:15px;margin-bottom:14px;font-weight:800;letter-spacing:.02em}
.rule ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.rule li{font-size:14px;line-height:1.5;position:relative;padding-left:22px}
.rule li::before{position:absolute;left:0;top:0;font-weight:800}
.rule--no{background:#FDF4F1;border-color:#F3C3B0}
.rule--no b{color:#A33B1B}
.rule--no li::before{content:'✕';color:var(--org)}
.rule--ok{background:#F4FAEE;border-color:var(--lime)}
.rule--ok b{color:var(--g700)}
.rule--ok li::before{content:'✓';color:var(--g500)}

.rw{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.rw__side{background:#fff;border:2px solid var(--line);border-radius:var(--rl);padding:22px;display:flex;flex-direction:column;gap:16px}
.rw__side--bad{border-color:#F3C3B0;background:#FDFAF8}
.rw__side--good{border-color:var(--lime);background:#FBFDF7}
.rw__side header{margin:0}
.rw__tag{display:inline-block;font-size:12px;font-weight:800;padding:7px 15px;border-radius:999px;letter-spacing:.03em}
.rw__tag--bad{background:var(--org);color:#fff}
.rw__tag--ok{background:var(--g600);color:#fff}
.rw__side figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.rw__list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.rw__list li{font-size:13.5px;line-height:1.55;position:relative;padding-left:21px}
.rw__list li::before{content:'✕';color:var(--org);font-weight:800;position:absolute;left:0;top:0}
.rw__list--ok li::before{content:'✓';color:var(--g500)}
.rw__list b{color:var(--ink)}

/* fake ad mock */
.mock{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--sh)}
.mock__bar{background:var(--cream);padding:11px 15px;font-size:12.5px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line)}
.mock__copy{padding:17px 18px;font-size:13.5px;line-height:1.65}
.mock__copy p{margin-bottom:11px}
.mock__copy p:last-child{margin-bottom:0}
.mock__copy small{font-size:10.5px;color:var(--muted);line-height:1.45;display:block}
.mock__cta{display:flex;align-items:center;gap:12px;background:var(--cream);padding:13px 15px;border-top:1px solid var(--line)}
.mock__art{width:46px;height:46px;border-radius:9px;background:linear-gradient(145deg,var(--g600),var(--lime));display:grid;place-items:center;font-size:23px;flex-shrink:0}
.mock__cta div b{display:block;font-size:13.5px;color:var(--ink);line-height:1.25}
.mock__cta div span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.mock__cta button{margin-left:auto;background:var(--g700);color:#fff;font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:7px;flex-shrink:0}

/* swap table */
.swap{border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;background:#fff}
.swap__row{display:grid;grid-template-columns:1fr 1.25fr;border-bottom:1px solid var(--line)}
.swap__row:last-child{border-bottom:0}
.swap__row span{padding:15px 20px;font-size:13.5px;line-height:1.55}
.swap__row span:first-child{border-right:1px solid var(--line);background:#FDFAF8;color:#8E3A1C}
.swap__row span:last-child{color:var(--g700)}
.swap__row--head span{font-weight:800;font-size:13px;background:var(--cream)!important;color:var(--ink)!important;letter-spacing:.03em}
.swap__row b{color:var(--g800);font-weight:800}

@media (max-width:860px){
  .rules,.rw{grid-template-columns:1fr}
  .swap__row{grid-template-columns:1fr}
  .swap__row span:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .swap__row--head{display:none}
  .art__fruit{font-size:52px}
}

/* ============================================================
   ECONOMICS CALCULATOR
   ============================================================ */
.calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;align-items:start}
.calc__controls{background:var(--cream);border:1px solid var(--line);border-radius:var(--rl);padding:26px;display:grid;gap:22px;position:sticky;top:96px}
.ctrl label{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:9px}
.ctrl label b{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:18px;color:var(--g600)}
.ctrl__hint{display:block;font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.45}
.ctrl select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;
}
.ctrl select:focus{outline:none;border-color:var(--g600)}
.seg{display:flex;gap:8px}
.seg button{
  flex:1;padding:12px 10px;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;font-size:14px;font-weight:700;color:var(--body);transition:.2s;
}
.seg button.is-on{background:var(--g700);border-color:var(--g700);color:#fff}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--lime),var(--g500));outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;
  border:3px solid var(--g600);cursor:pointer;box-shadow:0 2px 8px rgba(10,50,21,.22);
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--g600);
  cursor:pointer;box-shadow:0 2px 8px rgba(10,50,21,.22);
}

.calc__out{display:grid;gap:18px}
.kpi{background:#fff;border:2px solid var(--line);border-radius:var(--rl);padding:26px 28px;transition:border-color .3s,background .3s}
.kpi.is-good{border-color:var(--lime);background:#FAFDF5}
.kpi.is-mid{border-color:#E8B54A;background:#FFFDF6}
.kpi.is-bad{border-color:var(--org);background:#FFF8F5}
.kpi__label{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.kpi__big{display:block;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:clamp(40px,6vw,60px);line-height:1;color:var(--ink);margin:10px 0 6px;letter-spacing:-.03em}
.kpi.is-bad .kpi__big{color:var(--orgD)}
.kpi.is-good .kpi__big{color:var(--g600)}
.kpi__sub{font-size:14px;color:var(--muted);font-weight:600}
.kpi__state{
  display:inline-block;margin-top:14px;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:7px 15px;border-radius:999px;background:var(--cream2);color:var(--body);
}
.kpi.is-good .kpi__state{background:var(--lime3);color:var(--g700)}
.kpi.is-mid .kpi__state{background:#FBEFD2;color:#8A6416}
.kpi.is-bad .kpi__state{background:#FFE0D4;color:var(--orgD)}
.kpi--alt{border-color:var(--g800);background:var(--g800)}
.kpi--alt .kpi__label{color:rgba(255,255,255,.5);margin-bottom:14px;display:block}
.kpi__row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px;color:rgba(255,255,255,.72)}
.kpi__row:last-child{border-bottom:0}
.kpi__row b{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:17px;color:#fff}
.kpi__row--big{padding-top:14px;margin-top:6px;border-top:1px solid rgba(255,255,255,.2);border-bottom:0}
.kpi__row--big b{font-size:26px}
.kpi__row b.pos{color:var(--lime2)} .kpi__row b.neg{color:var(--org2)}

.pl{list-style:none;padding:0;margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--rl);overflow:hidden}
.pl__r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 22px;font-size:13.5px;border-bottom:1px solid var(--line)}
.pl__r:last-child{border-bottom:0}
.pl__r b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);flex-shrink:0}
.pl__r--neg b{color:#A33B1B}
.pl__r--sub{background:var(--cream);font-weight:700}
.pl__r--sub span{color:var(--ink);font-weight:700}
.pl__r--tot{background:var(--g800)}
.pl__r--tot span{color:#fff;font-weight:800;font-size:14.5px}
.pl__r--tot b{color:var(--lime2);font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:21px}
.calcnote{margin-top:24px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.6}

@media (max-width:960px){
  .calc{grid-template-columns:1fr}
  .calc__controls{position:static}
}

/* ============================================================
   PACKAGING v2 — TYPE, STAGE, HERO COMPOSITION
   ============================================================ */
.pk{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 40px rgba(0,0,0,.42))}
.pk text{font-family:'Plus Jakarta Sans',sans-serif;text-anchor:middle}
.pk-brand{font-size:15px;font-weight:800;letter-spacing:.3em;text-anchor:start}
.pk-pre{font-size:11px;font-weight:800;letter-spacing:.26em}
.pk-name{font-family:'Fraunces',serif;font-weight:700;letter-spacing:-.022em}
.pk-with{font-size:11.5px;font-weight:800;letter-spacing:.14em}
.pk-latin{font-family:'Fraunces',serif;font-size:11px;font-style:italic;font-weight:500}
.pk-tick{font-size:8.6px;font-weight:800;letter-spacing:.045em;text-anchor:start}
.pk-owns{font-size:11px;font-weight:800;letter-spacing:.14em}
.pk-count{font-size:10.5px;font-weight:800;letter-spacing:.1em}
.pk-chip{font-size:6.5px;font-weight:800;letter-spacing:.11em}

/* dark moody studio stage */
.stage{
  border-radius:var(--rl);padding:40px 34px 44px;display:grid;place-items:center;
  background:
    radial-gradient(62% 48% at 50% 34%, rgba(255,255,255,.10), transparent 64%),
    radial-gradient(70% 40% at 50% 104%, rgba(0,0,0,.55), transparent 70%),
    var(--stage,#24301F);
  position:relative;overflow:hidden;
}
.stage .pk{max-width:270px;position:relative;z-index:1}
.stage--sm{padding:22px 18px 26px}
.stage--sm .pk{max-width:150px}

/* hero composition: 2 pouches + jar + burst */
.stage>div{width:100%}
.comp{position:relative;width:100%;max-width:430px;margin:0 auto;aspect-ratio:1/1.2}
.comp__back,.comp__front{position:absolute;top:0}
.comp__back{left:42%;width:55%;opacity:.95;transform:translateY(2%) scale(.97)}
.comp__front{left:1%;width:58%;z-index:2}
.comp__jar{position:absolute;left:33%;bottom:0;width:36%;z-index:3;text-align:center}
.jar{position:relative;width:76%;margin:0 auto;aspect-ratio:.92/1}
.jar__lid{
  position:absolute;top:0;left:8%;width:84%;height:17%;border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg,#C79A5E,#8A6433);box-shadow:0 3px 7px rgba(0,0,0,.4);
}
.jar__body{
  position:absolute;top:14%;left:0;width:100%;height:86%;border-radius:7px 7px 11px 11px;
  background:
    linear-gradient(100deg,rgba(255,255,255,.34) 0 14%,rgba(255,255,255,0) 32%),
    radial-gradient(70% 60% at 50% 66%, #9A6A2A, #5E3C14);
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.4), 0 10px 22px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.2);
}
.comp__jarcap{
  margin-top:9px;font-size:9px;font-weight:800;letter-spacing:.07em;color:#fff;line-height:1.35;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.comp__jarcap b{color:var(--hot)}
.comp__burst{
  position:absolute;top:-1%;right:-2%;z-index:4;width:30%;aspect-ratio:1/1;
  display:grid;place-items:center;text-align:center;border-radius:50%;
  background:var(--hot);color:#fff;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-weight:700;
  font-size:clamp(12px,2.6vw,19px);line-height:1.05;
  box-shadow:0 8px 20px rgba(0,0,0,.42);
}

/* design-system page */
.dsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dscard{background:#fff;border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.dscard:hover{transform:translateY(-5px);box-shadow:var(--shL)}
.dscard__meta{padding:14px 16px 16px}
.dscard__meta b{display:block;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:17px;color:var(--ink)}
.dscard__meta span{font-size:12px;color:var(--muted)}
.dscard__sw{display:flex;gap:5px;margin-top:9px}
.dscard__sw i{width:19px;height:19px;border-radius:5px;border:1px solid rgba(0,0,0,.09)}

.anat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.anat__list{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.anat__list li{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 18px}
.anat__list em{font-style:normal;flex-shrink:0;width:27px;height:27px;border-radius:50%;background:var(--g800);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.anat__list b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}
.anat__list p{margin:0;font-size:13.5px;line-height:1.55}

.ba{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ba__col{background:#fff;border:2px solid var(--line);border-radius:var(--rl);padding:20px;display:grid;gap:14px;align-content:start}
.ba__col--old{border-color:#F3C3B0;background:#FDFAF8}
.ba__col--new{border-color:var(--lime);background:#FBFDF7}
.ba__col figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.ba__col h3{font-size:19px}
.ba__col ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ba__col li{font-size:13.5px;line-height:1.55;position:relative;padding-left:21px}
.ba__col--old li::before{content:'✕';color:var(--org);font-weight:800;position:absolute;left:0;top:0}
.ba__col--new li::before{content:'✓';color:var(--g500);font-weight:800;position:absolute;left:0;top:0}

/* product card with pack art */
.pc__img--pack{
  background:
    radial-gradient(60% 46% at 50% 30%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(70% 40% at 50% 106%, rgba(0,0,0,.5), transparent 70%),
    var(--stage,#24301F);
  padding:18px 16px 0;align-items:end;
}
.pc__img--pack .pk{max-width:112px;margin:0 auto}

@media (max-width:1080px){ .dsgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){
  .dsgrid{grid-template-columns:repeat(2,1fr)}
  .anat,.ba{grid-template-columns:1fr;gap:26px}
}
@media (max-width:560px){
  .dsgrid{grid-template-columns:1fr 1fr;gap:12px}
  .stage{padding:26px 16px 30px}
  .pc__img--pack .pk{max-width:92px}
}

/* note block + spec code */
.note{
  margin-top:26px;background:var(--lime3);border-left:4px solid var(--g600);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;font-size:14.5px;line-height:1.7;color:var(--g800);
}
.note b{color:var(--g900)}
.swap code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--cream2);padding:2px 6px;border-radius:4px;color:var(--ink);
}
.swap__row i{font-style:italic;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}

/* product card using real pack art */
.pc__img--pack{
  background:
    radial-gradient(58% 44% at 50% 88%, rgba(0,0,0,.17), transparent 70%),
    linear-gradient(168deg, var(--s1,#EDE7D8), var(--s2,#AFCB94));
  padding:20px 18px 0;align-items:end;
}
.pc__img--pack .pk{max-width:118px;margin:0 auto;filter:drop-shadow(0 12px 24px rgba(12,40,22,.3))}
@media (max-width:560px){ .pc__img--pack .pk{max-width:96px} .pc__img--pack{padding:14px 12px 0} }

/* ============================================================
   WORDMARK IDENTITY — condensed, tracked, no symbol
   ============================================================ */
.logo__wm{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:27px;
  letter-spacing:.21em;
  color:var(--g900);
  line-height:1;
  white-space:nowrap;
}
.logo--ftr .logo__wm{color:#fff}
.sec--dark .logo__wm{color:#fff}
@media (max-width:680px){ .logo__wm{font-size:22px;letter-spacing:.17em} }

/* pack brand -> condensed */
.pk-brand{
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:19px;
  font-weight:600;
  letter-spacing:.26em;
  text-anchor:middle !important;
}

/* ============================================================
   REAL PACKSHOTS ON WHITE — replaces the old vector pack art.
   The packshot is already a studio shot on white, so the card
   stage must be white too or it sits in a coloured box.
   ============================================================ */
.pc__img--pack{
  background:#fff;
  padding:0;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.pc__pack{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  transform:scale(1.04);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.pc:hover .pc__pack{transform:scale(1.10)}
@media (max-width:560px){ .pc__pack{transform:scale(1.02)} }

/* ============================================================
   PDP GALLERY WITH REAL PACKSHOTS
   The packshots are studio shots on white, so the gallery must
   contain (never cover) them and sit on white — cover crops the
   pouch, and a tinted stage puts a coloured box behind a white
   product shot.
   ============================================================ */
.gal__main{background:#fff}
.gal__main img{object-fit:contain;background:#fff}
.gal__thumb{background:#fff;overflow:hidden}
.gal__thumb img{width:100%;height:100%;object-fit:contain;background:#fff}

/* ============================================================
   FUNNEL — checkout, post-purchase offers, receipt
   ============================================================ */
.fwrap{max-width:1040px;margin:0 auto;padding:0 20px}
.fnar{max-width:720px}
.fbar{background:var(--g900,#0A3215);color:#fff;padding:12px 0;text-align:center;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.fsteps{display:flex;gap:6px;justify-content:center;padding:18px 0 4px}
.fsteps i{width:34px;height:4px;border-radius:2px;background:#DED8C6;display:block}
.fsteps i.on{background:var(--g600,#1A662D)}
.fhead{text-align:center;padding:24px 0 10px}
.fhead .kicker{display:inline-block;background:var(--org,#C8551F);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:7px 15px;border-radius:999px;margin-bottom:14px}
.fhead h1{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:clamp(28px,4.4vw,44px);line-height:1.1;margin:0 0 12px}
.fhead p{max-width:60ch;margin:0 auto;font-size:16.5px;line-height:1.65;color:var(--muted,#5B6355)}
.fcard{background:#fff;border:1px solid var(--line,#E4DFD1);border-radius:18px;padding:24px;box-shadow:0 10px 34px rgba(16,40,22,.07)}
.foffer{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;align-items:center;margin:22px 0}
.foffer__img{background:#fff;border:1px solid var(--line,#E4DFD1);border-radius:16px;overflow:hidden;aspect-ratio:1/1}
.foffer__img img{width:100%;height:100%;object-fit:contain;display:block}
.foffer ul{list-style:none;margin:0 0 20px;padding:0}
.foffer li{position:relative;padding-left:28px;margin:9px 0;font-size:16px;line-height:1.5}
.foffer li::before{content:'✓';position:absolute;left:0;top:0;color:var(--g500,#2E8B46);font-weight:800}
.fprice{display:flex;align-items:baseline;gap:12px;margin:4px 0 18px}
.fprice b{font-size:34px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight:800;letter-spacing:-.02em;color:var(--g900,#0A3215)}
.fprice s{color:var(--muted,#7A8275);font-size:19px}
.fprice em{font-style:normal;background:#E8F3DC;color:var(--g700,#17502A);font-weight:800;font-size:13px;padding:5px 11px;border-radius:999px}
.fbtn{display:block;width:100%;text-align:center;border:0;cursor:pointer;font-family:inherit;
  background:var(--g600,#1A662D);color:#fff;font-size:18px;font-weight:800;padding:19px 22px;border-radius:12px;
  text-decoration:none;transition:transform .15s ease,background .15s ease}
.fbtn:hover{background:var(--g700,#17502A);transform:translateY(-1px)}
.fbtn--alt{background:var(--org,#C8551F)}
.fbtn--alt:hover{background:#A8450F}
.fskip{display:block;width:100%;background:none;border:0;cursor:pointer;font-family:inherit;
  color:var(--muted,#6B7366);font-size:14.5px;text-decoration:underline;padding:16px 0 4px;text-align:center}
.fskip:hover{color:var(--ink,#22221E)}
.fnote{text-align:center;font-size:13px;color:var(--muted,#6B7366);margin-top:10px;line-height:1.6}
.fsum{border-top:1px solid var(--line,#E4DFD1);margin-top:18px;padding-top:16px}
.fsum__row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:15.5px}
.fsum__row--tot{border-top:1px solid var(--line,#E4DFD1);margin-top:8px;padding-top:14px;font-weight:800;font-size:19px}
.fsum__row small{color:var(--muted,#6B7366);font-weight:500}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ffield{display:block;margin:0 0 14px}
.ffield span{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink,#22221E)}
.ffield input,.ffield select{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--line,#E4DFD1);border-radius:10px;background:#fff}
.ffield input:focus,.ffield select:focus{outline:2px solid var(--g500,#2E8B46);outline-offset:1px}
.ftick{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;margin:14px 0}
.fok{text-align:center;padding:30px 0 6px}
.fok__ring{width:76px;height:76px;border-radius:50%;background:#E8F3DC;color:var(--g600,#1A662D);
  display:grid;place-items:center;font-size:38px;margin:0 auto 18px}
@media (max-width:760px){
  .foffer{grid-template-columns:1fr;gap:18px}
  .foffer__img{max-width:300px;margin:0 auto}
  .fgrid2{grid-template-columns:1fr}
  .fcard{padding:18px}
}

/* checkout two-column — must collapse on a phone.
   The inline minmax(0,1fr) was flattening the form to 0px. */
.fck{display:grid;grid-template-columns:minmax(320px,1fr) minmax(300px,400px);gap:26px;align-items:start}
@media (max-width:860px){
  .fck{grid-template-columns:1fr;gap:18px}
  .fck > :last-child{order:-1}      /* order summary first on mobile */
}

/* the funnel top bar had no side gutter — text ran to the screen edge on a phone */
.fbar{padding-left:18px;padding-right:18px;line-height:1.45}
@media (max-width:560px){ .fbar{font-size:11.5px;letter-spacing:.04em} }

/* delivery plan chooser on checkout */
.fplan{margin:18px 0 4px}
.fplan h3{font-size:15px;margin:0 0 10px;font-weight:800}
.fplan__opt{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:1.5px solid var(--line,#E4DFD1);border-radius:12px;padding:13px 14px;margin-bottom:9px;background:#fff;transition:border-color .15s,background .15s}
.fplan__opt.is-on{border-color:var(--g500,#2E8B46);background:#F4FAEF}
.fplan__opt input{margin-top:3px;accent-color:var(--g600,#1A662D);flex:0 0 auto}
.fplan__b{display:block;flex:1 1 auto;min-width:0}
.fplan__b b{display:block;font-size:15px}
.fplan__b small{display:block;color:var(--muted,#6B7366);font-size:12.5px;line-height:1.5;margin-top:3px}
.fplan__p{font-weight:800;font-size:16px;white-space:nowrap}

/* quiz */
.qwrap{max-width:720px;margin:0 auto;padding:0 20px}
.qcard{background:#fff;border:1px solid var(--line,#E4DFD1);border-radius:18px;padding:28px 26px;box-shadow:0 10px 34px rgba(16,40,22,.07)}
.qcount{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--g600,#1A662D)}
.qq{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:clamp(24px,3.6vw,34px);line-height:1.2;margin:10px 0 8px}
.qhelp{color:var(--muted,#6B7366);font-size:15px;line-height:1.6;margin:0 0 20px}
.qopt{display:block;width:100%;text-align:left;font:inherit;font-size:16.5px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line,#E4DFD1);border-radius:12px;padding:16px 18px;margin-bottom:10px;transition:border-color .15s,background .15s,transform .12s}
.qopt:hover{border-color:var(--g500,#2E8B46);background:#F4FAEF;transform:translateY(-1px)}
.qbar{height:5px;background:#E6E1D2;border-radius:3px;overflow:hidden;margin-bottom:22px}
.qbar i{display:block;height:100%;background:var(--g600,#1A662D);transition:width .3s ease}
.qback{background:none;border:0;font:inherit;color:var(--muted,#6B7366);cursor:pointer;text-decoration:underline;padding:14px 0 0;font-size:14px}

/* multi-select quiz options */
.qopt.is-pick{border-color:var(--g500,#2E8B46);background:#EDF7E6}
.qopt__tick{float:right;color:var(--g600,#1A662D);font-weight:800;opacity:0;transition:opacity .15s}
.qopt.is-pick .qopt__tick{opacity:1}
.qnext{display:block;width:100%;border:0;cursor:pointer;font-family:inherit;background:var(--g600,#1A662D);
  color:#fff;font-size:17px;font-weight:800;padding:17px;border-radius:12px;margin-top:6px}
.qnext[disabled]{background:#C9CDC3;cursor:not-allowed}

/* the credit shelf */
.credit{position:sticky;top:0;z-index:20;background:var(--g900,#0A3215);color:#fff;padding:14px 18px;text-align:center}
.credit b{font-size:19px}
.credit__bar{max-width:420px;height:7px;background:rgba(255,255,255,.22);border-radius:4px;margin:9px auto 0;overflow:hidden}
.credit__bar i{display:block;height:100%;background:#9ACD5A;width:0;transition:width .3s ease}
.credit small{display:block;opacity:.8;font-size:12.5px;margin-top:7px;line-height:1.5}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
.sitem{background:#fff;border:1.5px solid var(--line,#E4DFD1);border-radius:16px;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;transition:border-color .15s,transform .12s,box-shadow .15s}
.sitem:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,40,22,.09)}
.sitem.is-in{border-color:var(--g500,#2E8B46);box-shadow:0 0 0 3px rgba(46,139,70,.14)}
.sitem__tag{position:absolute;top:10px;left:10px;background:var(--g600,#1A662D);color:#fff;font-size:10.5px;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.sitem__img{position:relative;background:#fff;aspect-ratio:1/1}
.sitem__img img{width:100%;height:100%;object-fit:contain;display:block}
.sitem__b{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.sitem__b h3{margin:0;font-size:16.5px;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}
.sitem__b p{margin:0;font-size:13px;line-height:1.5;color:var(--muted,#6B7366);flex:1}
.sitem__p{display:flex;align-items:baseline;gap:8px}
.sitem__p b{font-size:20px}.sitem__p s{color:var(--muted,#8A9184);font-size:14px}
.sitem__add{border:1.5px solid var(--g600,#1A662D);color:var(--g600,#1A662D);background:#fff;
  border-radius:10px;padding:10px;font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.sitem.is-in .sitem__add{background:var(--g600,#1A662D);color:#fff}
.sqty{display:flex;align-items:center;gap:10px;justify-content:center}
.sqty button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line,#E4DFD1);background:#fff;
  font:inherit;font-weight:800;cursor:pointer;line-height:1}
@media (max-width:860px){ .shelf{grid-template-columns:repeat(2,1fr);gap:12px} }
@media (max-width:520px){ .shelf{grid-template-columns:1fr 1fr;gap:10px} .sitem__b{padding:11px 11px 13px} .sitem__b h3{font-size:14.5px} .sitem__b p{display:none} }

/* The credit bar is sticky, so on a phone its explainer was eating
   a third of the screen for the whole page. The intro paragraph
   already says the same thing — drop it below 620px. */
@media (max-width:620px){
  .credit{padding:10px 16px}
  .credit b{font-size:17px}
  .credit small{display:none}
  .credit__bar{margin-top:7px;height:6px}
}

/* the menu button was a 31px tap target — under the 44px guideline */
@media (max-width:860px){
  .hdr__burger{min-width:44px;min-height:44px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:5px}
}

/* the credit reveal */
.creveal{text-align:center;padding:10px 0 4px}
.creveal__amt{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:clamp(62px,15vw,104px);
  line-height:1;color:var(--g700,#17502A);margin:6px 0 2px;letter-spacing:-.02em}
.creveal__cap{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--g600,#1A662D)}
.crecap{background:#F4FAEF;border:1px solid #CFE6C4;border-radius:14px;padding:18px 20px;margin:22px 0;text-align:left}
.crecap h3{margin:0 0 10px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--g700,#17502A)}
.crecap ul{list-style:none;margin:0;padding:0}
.crecap li{position:relative;padding-left:26px;margin:7px 0;font-size:15.5px;line-height:1.55}
.crecap li::before{content:'✓';position:absolute;left:0;top:0;color:var(--g600,#1A662D);font-weight:800}
.cterms{display:grid;gap:9px;margin:20px 0 4px;text-align:left}
.cterms div{position:relative;padding-left:24px;font-size:14.5px;line-height:1.55;color:var(--muted,#5B6355)}
.cterms div::before{content:'•';position:absolute;left:6px;top:-1px;color:var(--g500,#2E8B46);font-weight:800}

/* ============================================================
   PDP STORY — hook, problem, promise, mechanism, objection,
   proof, offer, risk reversal, CTA. Sits under the buy box.
   ============================================================ */
.st__nar{max-width:720px;margin:0 auto}
.st{padding:62px 0}
.st h2{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:clamp(26px,4vw,40px);line-height:1.15;margin:0 0 18px}
.st__num{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--g500,#2E8B46);margin:0 0 12px}
.st__lead{font-size:18px;line-height:1.72;color:var(--ink,#2A2A24);margin:0 0 18px}
.st__fine{font-size:13px;line-height:1.65;color:var(--muted,#6B7366);margin:18px 0 0}
.st--hook{padding-top:54px}
.st__hook{font-size:clamp(30px,5.4vw,52px)!important;line-height:1.08!important;letter-spacing:-.01em}
.st__six{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.st__six li{position:relative;padding-left:28px;font-size:17px;line-height:1.5}
.st__six li::before{content:'✓';position:absolute;left:0;top:0;color:var(--g500,#2E8B46);font-weight:800}
.st__spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line,#E4DFD1);
  border:1px solid var(--line,#E4DFD1);border-radius:14px;overflow:hidden;margin-top:24px}
.st__spec div{background:#fff;padding:16px 18px}
.st__spec b{display:block;font-size:16px;margin-bottom:3px}
.st__spec span{font-size:12.5px;color:var(--muted,#6B7366);letter-spacing:.04em;text-transform:uppercase}
.st__qa{margin-top:6px}
.st__d{border-bottom:1px solid var(--line,#E4DFD1)}
.st__d summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font-size:17.5px;font-weight:700;position:relative}
.st__d summary::-webkit-details-marker{display:none}
.st__d summary::after{content:'+';position:absolute;right:4px;top:15px;font-size:24px;font-weight:400;color:var(--g600,#1A662D)}
.st__d[open] summary::after{content:'−'}
.st__d p{margin:0 0 20px;font-size:16.5px;line-height:1.7;color:var(--muted,#4F574B)}
.st__proof{list-style:none;margin:0;padding:0}
.st__proof li{position:relative;padding-left:30px;margin:14px 0;font-size:17px;line-height:1.6}
.st__proof li::before{content:'✓';position:absolute;left:0;top:1px;color:var(--g500,#2E8B46);font-weight:800;font-size:18px}
.st__offer{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.st__offer div{background:#fff;border:1.5px solid var(--line,#E4DFD1);border-radius:14px;padding:20px 16px;text-align:center}
.st__offer div.is-best{border-color:var(--g500,#2E8B46);box-shadow:0 0 0 3px rgba(46,139,70,.12)}
.st__offer b{display:block;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-size:30px;margin-bottom:5px}
.st__offer span{display:block;font-size:13px;line-height:1.45;color:var(--muted,#6B7366)}
.st__offer em{display:block;font-style:normal;margin-top:7px;font-size:12.5px;font-weight:800;color:var(--g600,#1A662D)}
.st--guar{background:var(--g900,#0A3215);color:#F6F1E4}
.st--guar h2,.st--guar .st__lead{color:#F6F1E4}
.st--guar .st__num{color:#9ACD5A}
.st--cta{text-align:center;padding-bottom:70px}
.st--cta .fbtn{max-width:460px;margin:8px auto 0}
@media (max-width:680px){
  .st{padding:44px 0}
  .st__six{grid-template-columns:1fr}
  .st__spec{grid-template-columns:1fr}
  .st__offer{grid-template-columns:1fr;gap:10px}
  .st__lead{font-size:17px}
}




/* ============================================================
   BUY BOX — modelled on the cluster: supply tiers + a
   pre-ticked refill box. No one-time option is shown.
   ============================================================ */
.tiers{display:grid;gap:12px;margin:0 0 8px}
.tier{
  position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line,#E4DFD1);border-radius:14px;padding:14px 16px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.tier:hover{border-color:var(--lime2,#9ACD5A)}
.tier.is-active{border-color:var(--g600,#1A662D);background:#FAFDF6;box-shadow:0 0 0 4px rgba(46,139,70,.12)}
.tier input{position:absolute;opacity:0;pointer-events:none}
.tier__radio{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid #CFCBBC;
  display:grid;place-items:center;transition:border-color .18s ease;
}
.tier__radio::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--g600,#1A662D);
  transform:scale(0);transition:transform .2s cubic-bezier(.2,.9,.3,1.3)}
.tier.is-active .tier__radio{border-color:var(--g600,#1A662D)}
.tier.is-active .tier__radio::after{transform:scale(1)}

/* 1 / 3 / 5 shown as a stack of packs, the way the cluster does it */
.tier__pack{flex:0 0 auto;display:flex;align-items:center;position:relative}
.tier__pack img{width:auto;display:block;filter:drop-shadow(0 3px 6px rgba(16,40,22,.16))}

.tier__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.tier__name{font-weight:800;font-size:16px;line-height:1.25;letter-spacing:-.01em;color:var(--ink,#22221E)}
.tier__supply{font-size:13px;color:var(--muted,#6B7366)}
/* the outcome now sits inline, right after the pack count */
.tier__outcome{font-style:normal;font-size:inherit;font-weight:800;color:var(--g600,#1A662D)}
.tier__price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:0 0 auto}
.tier__price b{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;
  font-size:21px;line-height:1.1;letter-spacing:-.02em;
}
.tier__price s{font-size:13px;color:var(--muted,#8A9184)}
.tier__price em{font-style:normal;font-size:11px;font-weight:800;background:#E8F3DC;color:var(--g700,#17502A);
  padding:3px 8px;border-radius:999px;margin-top:3px}
.tier__flag{
  position:absolute;top:-8px;right:12px;left:auto;background:var(--g600,#1A662D);color:#fff;
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(16,40,22,.16);
}
/* a flagged row gets headroom so the badge never sits on the price */
.tier.is-flagged{padding-top:22px}
.tier__flag--best{background:var(--org,#C8551F)}

/* the refill tick — dashed, pre-checked, like the cluster */
.refill{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0 0 6px;
  border:2px dashed #C9C3B0;border-radius:14px;padding:15px 16px;background:#fff;
  transition:border-color .18s ease,background .18s ease;
}
.refill.is-on{border-color:var(--g600,#1A662D);background:#FAFDF6}
.refill__box{
  flex:0 0 auto;width:23px;height:23px;border-radius:6px;border:2px solid #C9C3B0;background:#fff;
  display:grid;place-items:center;margin-top:1px;transition:border-color .18s ease,background .18s ease;
}
.refill__box::after{
  content:'';width:11px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(0);transform-origin:center;margin-top:-3px;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3);
}
.refill.is-on .refill__box{border-color:var(--g600,#1A662D);background:var(--g600,#1A662D)}
.refill.is-on .refill__box::after{transform:rotate(-45deg) scale(1)}
.refill__b b{display:block;font-size:15.5px;color:var(--g700,#17502A);letter-spacing:-.01em}
.refill__b small{display:block;font-size:12.5px;line-height:1.5;color:var(--muted,#6B7366);margin-top:3px}

@media (max-width:520px){
  .tier{padding:12px 13px;gap:10px;border-radius:12px}
  .tier.is-flagged{padding-top:20px}
  .tier__flag{font-size:8.5px;padding:3px 7px;right:10px}
  .tier__name{font-size:15px}
  /* no room for one line at this width — the outcome drops under the count */
  .tier__outcome{display:block;font-size:13px}
  .tier__dash{display:none}
  .tier__price b{font-size:20px}
  .refill{padding:13px 13px}
  .refill__b b{font-size:14.5px}
}
.tier__supply b{color:var(--g600,#1A662D);font-weight:800}
@media (max-width:420px){ .tier__supply{font-size:12px} }
.tier__mo{font-size:12.5px;color:var(--muted,#6B7366)}
.tier__mo b{color:var(--g600,#1A662D);font-weight:800;font-size:13.5px}
/* The stack shows one pouch per unit — 1, 3 or 5. The cutouts are
   transparent, so they overlap; the back of the row steps down in
   height and opacity so the front pack stays the hero. The column is
   a fixed width at each count so all three rows line up. */
.tier__pack{height:62px}
.tier__pack img{height:62px}

.tier__pack[data-n="1"]{width:46px}
.tier__pack[data-n="3"]{width:80px}
.tier__pack[data-n="5"]{width:104px}

.tier__pack[data-n="3"] img + img{margin-left:-25px}
.tier__pack[data-n="3"] img:nth-child(1){height:50px;opacity:.80}
.tier__pack[data-n="3"] img:nth-child(2){height:56px;opacity:.90}

.tier__pack[data-n="5"] img + img{margin-left:-27px}
.tier__pack[data-n="5"] img:nth-child(1){height:44px;opacity:.66}
.tier__pack[data-n="5"] img:nth-child(2){height:48px;opacity:.74}
.tier__pack[data-n="5"] img:nth-child(3){height:52px;opacity:.82}
.tier__pack[data-n="5"] img:nth-child(4){height:57px;opacity:.91}

@media (max-width:520px){
  .tier__pack,.tier__pack img{height:42px}
  .tier__pack[data-n="1"]{width:29px}
  .tier__pack[data-n="3"]{width:53px}
  .tier__pack[data-n="5"]{width:69px}
  .tier__pack[data-n="3"] img + img{margin-left:-17px}
  .tier__pack[data-n="3"] img:nth-child(1){height:34px}
  .tier__pack[data-n="3"] img:nth-child(2){height:38px}
  .tier__pack[data-n="5"] img + img{margin-left:-18px}
  .tier__pack[data-n="5"] img:nth-child(1){height:30px}
  .tier__pack[data-n="5"] img:nth-child(2){height:33px}
  .tier__pack[data-n="5"] img:nth-child(3){height:36px}
  .tier__pack[data-n="5"] img:nth-child(4){height:39px}
  .tier__supply{font-size:11px;white-space:nowrap}
}

/* ---- 90-day guarantee, under Add To Cart ---------------------------- */
.gtee{
  display:flex;align-items:center;gap:14px;margin:9px 0 4px;
  background:#FAF8F2;border:1.5px dashed #DCD3BE;border-radius:14px;padding:14px 16px;
}
.gtee__seal{flex:0 0 auto;width:62px;height:62px;display:block}
.gtee__b{min-width:0}
.gtee__b b{
  display:block;font-size:15.5px;letter-spacing:-.01em;
  color:var(--g700,#17502A);margin-bottom:3px;
}
.gtee__b span{display:block;font-size:12.5px;line-height:1.5;color:var(--muted,#6B7366)}
@media (max-width:520px){
  .gtee{gap:12px;padding:12px 13px;border-radius:12px}
  .gtee__seal{width:52px;height:52px}
  .gtee__b b{font-size:14.5px}
  .gtee__b span{font-size:12px}
}

/* ---- buy-box FAQ accordion ----------------------------------------- */
.faq{margin:18px 0 6px;display:grid;gap:9px}
.faq__i{
  border:1.5px solid var(--line,#E4DFD1);border-radius:12px;background:#fff;
  transition:border-color .18s ease,background .18s ease;
}
.faq__i[open]{border-color:#C9D8BC;background:#FCFDFA}
.faq__i summary{
  cursor:pointer;list-style:none;position:relative;
  padding:15px 42px 15px 16px;
  font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink,#22221E);
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:focus{outline:none}
.faq__i summary:focus-visible{outline:2px solid var(--g600,#1A662D);outline-offset:-2px;border-radius:12px}
.faq__i summary::after{
  content:'+';position:absolute;right:15px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400;line-height:1;color:var(--g600,#1A662D);
}
.faq__i[open] summary::after{content:'\2212'}
.faq__a{padding:2px 16px 16px}
.faq__a p{margin:0 0 10px;font-size:15px;line-height:1.62;color:var(--body,#445349)}
.faq__a p:last-child{margin-bottom:0}
.faq__a b{color:var(--g700,#17502A)}
@media (max-width:520px){
  .faq{gap:8px}
  .faq__i summary{font-size:14.5px;padding:13px 38px 13px 13px}
  .faq__a{padding:2px 13px 14px}
  .faq__a p{font-size:14.5px}
}

/* ---- buy-box header: kicker + desire headline + 6 benefits --------- */
.buy__kicker{
  font-size:13.5px;font-weight:700;color:var(--muted,#73837A);
  letter-spacing:.01em;margin:0 0 6px;
}
/* the product name, demoted under the desire headline */
.buy__title span{
  display:block;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15.5px;font-weight:600;letter-spacing:0;line-height:1.4;
  color:var(--body,#445349);margin-top:9px;
}
/* the blurb used to provide this gap; it is gone, so the title owns it */
.buy__title{margin:0 0 13px}
.buy__bens{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 16px;list-style:none;padding:0;margin:0 0 20px;
}
.buy__bens li{display:flex;align-items:flex-start;gap:8px;min-width:0}
.buy__bens .ben__i{
  flex:0 0 auto;width:20px;height:20px;margin-top:0;color:var(--g600,#1A662D);
}
.buy__bens span{
  font-size:14.5px;line-height:1.3;font-weight:600;color:var(--ink,#0E1A11);
}
@media (max-width:520px){
  .buy__kicker{font-size:12.5px;margin-bottom:5px}
  .buy__title{margin-bottom:10px}
  .buy__title span{font-size:14px;margin-top:7px}
  .buy__bens{gap:8px 12px;margin-bottom:16px}
  .buy__bens .ben__i{width:18px;height:18px}
  .buy__bens span{font-size:13.2px}
}

/* ============================================================
   PDP PROOF SECTIONS — trust / how it works / timeline /
   comparison / reviews. Modelled on the cluster's running order.
   ============================================================ */
.pf{padding:58px 0;border-top:1px solid var(--line)}
.pf--trust{background:var(--cream)}
.pf--works{background:#fff}
.pf--time{background:var(--cream)}
.pf--vs{background:#fff}
.pf--revs{background:var(--cream)}
.pf__kick{
  display:block;text-align:center;font-size:11.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--g600);margin-bottom:10px;
}
.pf__h{text-align:center;font-size:clamp(25px,3.4vw,38px);line-height:1.15;margin:0 0 14px}
.pf__lead{
  max-width:62ch;margin:0 auto 30px;text-align:center;
  font-size:16px;line-height:1.65;color:var(--body);
}
.pf__lead--note{font-size:14px;color:var(--muted)}
.pf__grid{display:grid;gap:16px;margin-top:26px}
.pf__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pf__card{
  background:#fff;border:1px solid var(--line);border-radius:var(--rl);
  padding:24px 20px;text-align:center;
}
.pf--works .pf__card{background:var(--cream)}

}
.pf__ir{
  display:grid;place-items:center;width:46px;height:46px;margin:0 auto 14px;
  border-radius:50%;background:#E8F3DC;color:var(--g700);
}
.pf__i{width:22px;height:22px;display:block}
.pf__card b{display:block;font-size:16px;letter-spacing:-.01em;color:var(--ink);margin-bottom:7px}
.pf__card p{margin:0;font-size:14px;line-height:1.6;color:var(--body)}

/* timeline */
.pf__time{list-style:none;padding:0;margin:26px auto 0;max-width:760px;display:grid;gap:14px}
.pf__time li{
  display:flex;gap:16px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--rl);padding:20px 22px;
}
.pf__n{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--g700);color:#fff;font-weight:800;font-size:15px;
}
.pf__when{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--g600);margin-bottom:3px;
}
.pf__time b{display:block;font-size:17px;letter-spacing:-.01em;margin-bottom:5px}
.pf__time p{margin:0;font-size:14.5px;line-height:1.6;color:var(--body)}

/* comparison */
.vs{max-width:860px;margin:26px auto 0;border:1px solid var(--line);border-radius:var(--rl);overflow:hidden;background:#fff}
.vs__row{display:grid;grid-template-columns:1.1fr 1.5fr 1.5fr;gap:14px;padding:15px 20px;border-top:1px solid var(--line);align-items:start}
.vs__row:first-child{border-top:0}
.vs__row span{font-size:13px;font-weight:700;color:var(--muted)}
.vs__row b{font-size:14.5px;color:var(--g700);font-weight:800}
.vs__row i{font-style:normal;font-size:14.5px;color:var(--muted)}
.vs__row--head{background:#F4F7EF}
.vs__row--head b{font-size:15px;letter-spacing:.02em}
.vs__row--head i{font-weight:700;color:var(--body)}

/* review slots */
.pf__rev{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:22px 20px}
.pf__rev--empty{border-style:dashed;text-align:center}
.pf__stars{display:block;color:#E8B931;font-size:15px;letter-spacing:2px;margin-bottom:9px}
.pf__rev b{display:block;font-size:15.5px;margin-bottom:6px}
.pf__rev p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted)}

@media (max-width:900px){
  .pf__grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .pf{padding:40px 0}
  .pf__h{font-size:24px}
  .pf__lead{font-size:15px;margin-bottom:22px}
  .pf__grid{gap:12px;margin-top:20px}
  .pf__card{padding:20px 16px;border-radius:14px}
  .pf__ir{width:40px;height:40px;margin-bottom:11px}
  .pf__card b{font-size:15px}
  .pf__card p{font-size:13.5px}
  .pf__time li{padding:16px 16px;gap:13px;border-radius:14px}
  .pf__n{width:30px;height:30px;font-size:14px}
  .pf__time b{font-size:16px}
  .pf__time p{font-size:14px}
  /* the comparison becomes label over two stacked answers */
  .vs__row{grid-template-columns:1fr;gap:5px;padding:14px 16px}
  .vs__row--head{display:none}
  .vs__row b::before{content:'FLORIOR — ';color:var(--muted);font-weight:700}
  .vs__row i::before{content:'Other brands — ';font-weight:700}
}
@media (max-width:480px){
  .pf__grid--4{grid-template-columns:1fr}
}

/* FAQ now runs full width as the last section, not inside the buy column */
.pf--faq{background:#fff}
.pf--faq .faq{max-width:760px;margin:26px auto 0}

/* the big guarantee block before it */
.pf--guar{background:var(--g900);border-top:0}
.guar{
  display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
  max-width:900px;margin:0 auto;
}
.guar__sealsvg{width:124px;height:124px;display:block}
.guar__sealsvg path[fill="#17502A"]{fill:var(--lime)}
.guar__sealsvg text{fill:var(--g900)!important}
.guar__sealsvg circle{stroke:var(--g900)!important}
.guar__b .pf__kick{color:var(--lime2);margin-bottom:8px}
.guar__b .pf__h{color:#fff;margin-bottom:14px}
.guar__b p{margin:0 0 10px;font-size:15.5px;line-height:1.65;color:#D8E6CE}
.guar__b p:last-child{margin-bottom:0}
@media (max-width:680px){
  .guar{grid-template-columns:1fr;gap:18px;text-align:center}
  .guar__seal{display:flex;justify-content:center}
  .guar__sealsvg{width:96px;height:96px}
  .guar__b .pf__kick,.guar__b .pf__h{text-align:center!important}
  .guar__b p{font-size:14.5px}
}

/* free-gift line on the bigger tiers */
.tier__gift{
  display:inline-flex;align-items:baseline;gap:5px;margin-top:5px;white-space:nowrap;
  font-size:12.5px;font-weight:800;color:var(--orgD,#CF4615);
  background:#FDEDE6;border-radius:999px;padding:3px 9px;align-self:flex-start;
}
.tier__gift i{font-style:normal;font-weight:600;color:var(--org,#F15A24);opacity:.9}
.ckgift{
  display:block;margin-top:5px;font-size:12.5px;font-weight:700;
  color:var(--orgD,#CF4615);
}
@media (max-width:520px){
  .tier__gift{font-size:11px;padding:2px 7px;margin-top:4px}
  .tier__gift i{display:none}
}

/* ============================================================
   ORDER CONFIRMED  +  90-DAY TRACKER
   ============================================================ */
.cf__tick{
  width:62px;height:62px;margin:0 auto 18px;border-radius:50%;
  display:grid;place-items:center;background:#E8F3DC;color:var(--g700);
}
.cf__tick svg{width:28px;height:28px}
.cf__h{text-align:center;font-size:clamp(26px,4.4vw,36px);margin:0 0 10px}
.cf__lead{text-align:center;font-size:15.5px;line-height:1.65;color:var(--body);margin:0 0 22px}
.cf__order{
  display:flex;align-items:center;gap:13px;background:var(--cream);
  border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:24px;
}
.cf__order img{border-radius:10px;background:#fff;object-fit:contain;flex:0 0 auto}
.cf__order b{display:block;font-size:15.5px}
.cf__order span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.cf__price{margin-left:auto;font-size:17px;font-weight:800}
.cf__gifts h3{font-size:19px;margin:0 0 4px}
.cf__sub{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.cf__list{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}
.cf__list li{
  display:flex;align-items:flex-start;gap:12px;padding:14px 15px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
}
.cf__i{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#E8F3DC;color:var(--g700);
}
.cf__i svg{width:17px;height:17px}
.cf__list b{display:block;font-size:15px;margin-bottom:3px}
.cf__list b i{font-style:normal;font-weight:700;font-size:12.5px;color:var(--org)}
.cf__list p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.cf__lock{margin-left:auto;font-size:14px;opacity:.5;flex:0 0 auto}
.cf__cta{margin-top:4px}
.cf__skip{text-align:center;margin:14px 0 0;font-size:13.5px}
.cf__skip a{color:var(--muted);text-decoration:underline}

.tk__h{text-align:center;font-size:clamp(28px,4.6vw,42px);margin:8px 0 10px}
.tk__lead{text-align:center;max-width:56ch;margin:0 auto 26px;font-size:16px;line-height:1.65;color:var(--body)}
.tk__card{background:#fff;border:1px solid var(--line);border-radius:var(--rl);padding:24px;box-shadow:var(--sh)}
.tk__today{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tk__date{display:block;font-size:12.5px;color:var(--muted);margin-bottom:3px}
.tk__today b{font-size:19px;letter-spacing:-.01em}
.tk__btn{width:auto;margin:0 0 0 auto;padding:14px 22px;font-size:16px}
.tk__btn--done{background:var(--g600);box-shadow:none}
.tk__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 14px;text-align:center}
.tk__stats b{display:block;font-size:30px;font-weight:800;color:var(--g700);line-height:1;letter-spacing:-.02em}
.tk__stats span{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.tk__bar{height:8px;border-radius:99px;background:var(--cream2);overflow:hidden;margin-bottom:18px}
.tk__bar i{display:block;height:100%;background:var(--lime);transition:width .3s ease}
.tk__grid{display:grid;grid-template-columns:repeat(18,1fr);gap:5px}
.tk__d{display:block;aspect-ratio:1/1;border-radius:4px;background:var(--cream2)}
.tk__d.is-on{background:var(--g600)}
.tk__d.is-today{background:#fff;box-shadow:inset 0 0 0 2px var(--org)}
.tk__d.is-miss{background:#EDE9DC}
.tk__note{margin:16px 0 0;font-size:13.5px;color:var(--muted);text-align:center}
.tk__why{margin-top:28px;background:var(--cream);border:1px solid var(--line);border-radius:var(--rl);padding:24px}
.tk__why h3{font-size:19px;margin:0 0 10px}
.tk__why p{margin:0 0 10px;font-size:15px;line-height:1.65;color:var(--body)}
.tk__why p:last-child{margin-bottom:0}
@media (max-width:680px){
  .tk__card{padding:18px}
  .tk__today{gap:12px}
  .tk__btn{width:100%;margin:4px 0 0}
  .tk__stats b{font-size:25px}
  .tk__grid{grid-template-columns:repeat(15,1fr);gap:4px}
  .cf__order img{width:52px;height:52px}
}
.cf__open{
  margin-left:auto;flex:0 0 auto;align-self:center;
  font-size:12.5px;font-weight:800;color:#fff;background:var(--g600);
  padding:7px 13px;border-radius:999px;text-decoration:none;white-space:nowrap;
}
.cf__open:hover{background:var(--g700)}
.cf__soon{
  margin-left:auto;flex:0 0 auto;align-self:center;
  font-size:11.5px;font-weight:800;color:var(--muted);background:var(--cream2);
  padding:6px 11px;border-radius:999px;white-space:nowrap;
}

/* ============================================================
   HOMEPAGE — brand home (not a product page)
   ============================================================ */
.hhero{
  background:
    radial-gradient(820px 460px at 88% -12%, rgba(139,197,63,.17), transparent 62%),
    linear-gradient(180deg,#fff, var(--cream));
  padding:56px 0 64px;
}
.hhero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hhero__copy h1{
  font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.03em;margin:10px 0 16px;
}
.hhero__copy p{font-size:17px;line-height:1.65;color:var(--body);max-width:48ch;margin:0 0 24px}
.hhero__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.hhero__link{font-weight:700;color:var(--g600);font-size:15px}
.hhero__link:hover{text-decoration:underline}
.hhero__trust{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:9px}
.hhero__trust li{
  font-size:12.5px;font-weight:700;color:var(--g700);
  background:#E8F3DC;border-radius:999px;padding:6px 12px;
}
.hhero__art{position:relative;min-height:380px;display:grid;place-items:center}
.hhero__p{position:absolute;width:62%;filter:drop-shadow(0 18px 34px rgba(16,40,22,.18))}
.hhero__p--0{z-index:3;transform:translateX(0) scale(1)}
.hhero__p--1{z-index:2;transform:translateX(-38%) scale(.84) rotate(-7deg)}
.hhero__p--2{z-index:1;transform:translateX(38%) scale(.84) rotate(7deg)}

/* the range */
.ring{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.ring__c{
  background:#fff;border:1px solid var(--line);border-radius:var(--rl);
  overflow:hidden;display:flex;flex-direction:column;
}
.ring__c img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;padding:12px}
.ring__b{padding:0 18px 18px;display:flex;flex-direction:column;flex:1}
.ring__n{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--muted)}
.ring__b h3{font-size:19px;margin:4px 0 2px;letter-spacing:-.01em}
.ring__lat{margin:0 0 8px;font-size:12.5px;color:var(--muted)}
.ring__why{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--body);flex:1}
.ring__links{display:flex;gap:8px}
.ring__links a{
  flex:1;text-align:center;font-size:13px;font-weight:800;padding:9px 6px;border-radius:999px;
  background:var(--cream);color:var(--g700);border:1px solid var(--line);
}
.ring__links a:hover{background:#E8F3DC;border-color:#C9D8BC}

@media (max-width:980px){
  .hhero__in{grid-template-columns:1fr;gap:28px}
  .hhero__art{min-height:300px;order:-1}
  .ring{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .hhero{padding:28px 0 44px}
  .hhero__copy p{font-size:15.5px}
  .hhero__art{min-height:250px}
  .hhero__p{width:58%}
  .ring{gap:12px}
  .ring__b h3{font-size:17px}
  .ring__why{font-size:13px}
}
@media (max-width:420px){ .ring{grid-template-columns:1fr} }

/* ---- swipeable gallery ---------------------------------------------- */
.gal__main--swipe{
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;aspect-ratio:1/1;
}
.gal__main--swipe::-webkit-scrollbar{display:none}
.gal__slide{
  flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  display:grid;place-items:center;background:#fff;
}
.gal__slide img{width:100%;height:100%;object-fit:contain;display:block}

.gal__dots{display:none}
@media (max-width:680px){
  /* The gallery reads as ONE block: image, dots and thumbs sit tight
     together, and the copy starts right under them. */
  .gal__dots{display:flex;justify-content:center;gap:5px;margin-top:7px}
  .gal__dot{
    width:5px;height:5px;border-radius:50%;background:#D5CFC0;
    transition:background .2s ease,width .2s ease;
  }
  .gal__dot.is-on{background:var(--g600);width:16px;border-radius:99px}

  /* a tight strip, not four boxes spread across the screen */
  .gal__thumbs{
    display:flex;justify-content:center;gap:5px;margin-top:7px;
    grid-template-columns:none;
  }
  .gal__thumb{
    flex:0 0 58px;width:58px;aspect-ratio:1/1;border-radius:8px;
    box-sizing:border-box;border-width:2px;   /* same when active, so gaps stay even */
  }
  .gal{margin-bottom:0}
  .pdp__grid{gap:14px}
}



/* ===== FOOTER (compact, centred) ===================================== */
.ftr{background:var(--g900);color:var(--cream);padding:46px 0 34px;margin:0}
.ftr__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.ftr .logo--ftr{display:block;margin:0}
.ftr__tag{max-width:520px;margin:0;font-size:15px;line-height:1.55;color:rgba(246,241,228,.78)}
.ftr__links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px 0;max-width:780px;margin:8px 0 0}
.ftr__links a.ftr__link{color:var(--cream);text-decoration:underline;text-underline-offset:3px;
  font-size:15px;font-weight:600;line-height:1.3;display:inline-block;
  padding:4px 18px;position:relative}
.ftr__links a.ftr__link + a.ftr__link::before{content:"";position:absolute;left:0;top:50%;
  transform:translateY(-50%);height:14px;width:1px;background:rgba(246,241,228,.34)}
.ftr__links a:hover{color:#fff}
.ftr__contact{margin:4px 0 0;font-size:16px;font-weight:700}
.ftr__contact a{color:var(--cream);text-decoration:none}
.ftr__contact a:hover{text-decoration:underline}
.ftr__dot{opacity:.5;padding:0 8px}
.ftr__addr{margin:0;font-size:14px;color:rgba(246,241,228,.6)}
.ftr__pay{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 2px}
.ftr__pay svg,.ftr__payicon{height:30px;width:auto;display:block;background:#fff;
  border-radius:6px;padding:2px 4px;box-sizing:content-box}
.ftr__copy{margin:8px 0 0;font-size:14px;font-weight:700;color:rgba(246,241,228,.72)}
@media(max-width:560px){
  .ftr{padding:36px 0 26px}
  .ftr__links a{font-size:14px;padding:3px 10px}
  .ftr__contact{font-size:15px}
  .ftr__pay svg,.ftr__payicon{height:26px}
  .ftr__copy{font-size:13px}
}

/* ===== ADD TO CART - always one line ================================= */
.btn--cart{display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:nowrap;white-space:nowrap;width:100%;text-align:center;line-height:1.1}
.btn--cart span,.btn--cart em{display:inline-block;font-style:normal;white-space:nowrap}
.btn--cart em{font-weight:800}
.btn--cart em b{font-weight:800}
@media(max-width:560px){
  .btn--cart{font-size:18px;padding-left:16px;padding-right:16px;gap:8px}
}
@media(max-width:380px){ .btn--cart{font-size:16.5px;gap:6px} }


/* Shopify injects a tiny tracking iframe after the footer; it needs to load
   but not occupy layout. */
body > iframe{height:0!important;border:0!important;display:block}


/* footer disclaimers */
.ftr__legal{max-width:720px;margin:14px 0 2px;display:flex;flex-direction:column;gap:7px}
.ftr__legal p{margin:0;font-size:12.5px;line-height:1.55;color:rgba(246,241,228,.55);text-align:center}
.ftr__mark{color:rgba(246,241,228,.8);font-weight:700;padding-right:2px}
@media(max-width:560px){ .ftr__legal p{font-size:11.5px;line-height:1.5} }


/* ===== COMPACT MOBILE HEADER =========================================
   On a 375px screen the header was 103px because the Shop Now button
   wrapped to two lines (81px tall) and pushed the bar open, and the
   marquee added another 41px - 144px of chrome before any content.
   Keeping the button on one line is what actually fixes it. */
@media(max-width:620px){
  .hdr{padding:0}
  .hdr__in{height:58px;gap:12px}
  .hdr .logo img{width:112px!important}
  .hdr__right .btn,.hdr__right .btn--sm{
    white-space:nowrap;font-size:14px;padding:9px 16px;line-height:1.1;
    box-shadow:0 4px 12px rgba(241,90,36,.22)}
  .hdr__burger{width:22px}
  .marquee--top .marquee__track span{font-size:11px}
  .marquee--top{padding:7px 0}
}
@media(max-width:380px){
  .hdr__in{height:54px;gap:8px}
  .hdr .logo img{width:100px!important}
  .hdr__right .btn,.hdr__right .btn--sm{font-size:13px;padding:8px 13px}
}


/* ===== TRUST CARDS: one line on mobile ===============================
   Four stacked rows still ate a whole screen. These are badges, not
   reading material - the four titles say the whole thing on their own,
   so on a phone they go side by side in a single strip and the
   supporting sentence drops out. Full copy stays on tablet and up. */
@media(max-width:620px){
  .pf--trust .pf__grid--4{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .pf--trust .pf__card{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;gap:8px;
    padding:14px 5px 13px;border-radius:12px}
  .pf--trust .pf__card .pf__ir{flex:0 0 auto;margin:0;width:38px;height:38px;
    display:grid;place-items:center}
  .pf--trust .pf__card .pf__ir svg{width:19px;height:19px}
  .pf--trust .pf__cardb{min-width:0;width:100%}
  .pf--trust .pf__card b{display:block;margin:0;
    font-size:11.5px;line-height:1.25;letter-spacing:-.005em;
    /* break-word so "Third-party" cannot push the column wider */
    overflow-wrap:break-word}
  /* the sentence is detail, not the claim - it comes back at 621px */
  .pf--trust .pf__card p{display:none}
}
/* very narrow phones: keep all four on the line, just tighter */
@media(max-width:360px){
  .pf--trust .pf__grid--4{gap:6px}
  .pf--trust .pf__card{padding:12px 3px 11px}
  .pf--trust .pf__card .pf__ir{width:34px;height:34px}
  .pf--trust .pf__card b{font-size:10.5px}
}


/* ===== CUSTOMER REVIEWS - swipeable =================================
   24 stacked cards was a wall. Native scroll-snap gives real momentum
   swiping on iOS with no JS, and the next card peeks in on the right so
   people can see there is more to swipe to. */
.pf__revs{display:flex;gap:14px;margin-top:24px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scroll-padding-left:0;padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none}
.pf__revs::-webkit-scrollbar{display:none}
.pf__revs .pf__rev{
  flex:0 0 clamp(260px, 31%, 340px);
  scroll-snap-align:start;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:20px 18px;margin:0;display:flex;flex-direction:column;gap:10px}
.pf__revs .pf__stars{color:var(--lime);font-size:15px;letter-spacing:1px;line-height:1}
.pf__revs .pf__stars i{color:var(--line);font-style:normal}
.pf__revs blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
.pf__revs blockquote::before{content:'\201C'}
.pf__revs blockquote::after{content:'\201D'}
.pf__revs figcaption{font-size:13.5px;font-weight:800;color:var(--ink);margin-top:auto}
.pf__lead--note{max-width:620px;margin:0 auto;text-align:center;font-size:15px;color:var(--muted)}
.pf__swipe{display:block;text-align:center;font-size:13px;color:var(--muted);margin:10px 0 0}
@media(max-width:620px){
  .pf__revs{gap:10px;margin-top:18px}
  /* 86% leaves a sliver of the next card visible - that peek is what
     tells a thumb there is something to swipe to */
  .pf__revs .pf__rev{flex:0 0 86%;padding:16px 16px;gap:8px}
  .pf__revs blockquote{font-size:14.5px}
}
}


/* ===== "WHY IT WORKS" PHOTO CARDS ===================================
   Line icons made four near-identical cards. A square ingredient shot
   that bleeds to the card's top corners, with the copy underneath, is
   the treatment the better supplement PDPs converge on.
   These live at the end of the file and carry the section class because
   the generic .pf__card padding/centring rules sit in the responsive
   block further down and would otherwise win on source order. */
.pf--works .pf__card--shot{padding:0;overflow:hidden;text-align:left;
  display:flex;flex-direction:column}
.pf--works .pf__shot{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  background:var(--lime3);border-bottom:1px solid var(--line)}
.pf--works .pf__card--shot .pf__cardb{padding:18px 18px 20px}
.pf--works .pf__card--shot b{display:block;font-size:16px;letter-spacing:-.01em;
  color:var(--ink);margin:0 0 7px;text-align:left}
.pf--works .pf__card--shot p{margin:0;font-size:14px;line-height:1.6;
  color:var(--body);text-align:left}

@media(max-width:620px){
  /* two across on a phone. Four would make the photos postage stamps and
     one across would make the section endless. */
  .pf--works .pf__grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pf--works .pf__card--shot{padding:0}
  .pf--works .pf__card--shot .pf__cardb{padding:12px 12px 15px}
  .pf--works .pf__card--shot b{font-size:13.5px;margin:0 0 5px;line-height:1.3}
  .pf--works .pf__card--shot p{font-size:12.5px;line-height:1.5}
}


/* ===== CUSTOMER PHOTO REVIEWS =======================================
   One review in a row having a photo must not stretch every other card
   to match it, so the track aligns to the top and each card keeps its
   own height. */
.pf__revs{align-items:flex-start}
.pf__revimg{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:10px;margin:0 0 14px;background:var(--lime3)}
.pf__rev--photo blockquote{font-size:15px}
@media(max-width:620px){
  .pf__revimg{aspect-ratio:1/1;margin-bottom:11px}
}