:root{
  --brand:#0C3F3C; --brand2:#14645E; --accent:#2E9A90; --tint:#E3F0EE;
  --canvas:#F7FAF9; --ink:#101A19; --white:#fff;
  --grey:#65726F; --line:#E1E6E4;
  --display:"Jost",Futura,"Century Gothic",sans-serif;
  --body:"Inter",Helvetica,Arial,sans-serif;
  --gutter:clamp(1.1rem,4vw,4rem); --gap:clamp(.9rem,1.7vw,1.5rem);
}
body.p-amber{--brand:#4A2E0A;--brand2:#7A4E12;--accent:#C7862A;--tint:#F5EBD9;--canvas:#FBF7F0;--ink:#1E1608;--grey:#736450;--line:#E9E0D0;}
body.p-plum{--brand:#3A1F31;--brand2:#6A3A55;--accent:#A85C7E;--tint:#F3E6EC;--canvas:#FBF6F8;--ink:#1C1017;--grey:#6F5C66;--line:#E9DDE3;}
body.p-cacao{--brand:#33251C;--brand2:#5C4432;--accent:#A5754A;--tint:#EFE5D9;--canvas:#FAF6F1;--ink:#1B1410;--grey:#6E6157;--line:#E7DED2;}
body.p-saffron{--brand:#1E232A;--brand2:#333A44;--accent:#B57F0E;--tint:#ECEFF3;--canvas:#F8F9FB;--ink:#12151A;--grey:#66707C;--line:#DFE4EA;}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;letter-spacing:.005em;line-height:1.1}
p{margin:0 0 1rem}
.d1{font-size:clamp(2.4rem,6vw,4.6rem);text-transform:uppercase;line-height:.96;font-weight:400}
.d2{font-size:clamp(1.8rem,3.8vw,3rem);text-transform:uppercase;line-height:1;font-weight:400}
.d3{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.cap{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin:0 0 1rem;font-family:var(--body)}
.lede{font-size:1.05rem;color:var(--grey);max-width:56ch}
.muted{color:var(--grey)}
.small{font-size:.9rem}
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gutter);width:100%}
.wrap-n{max-width:920px;margin:0 auto;padding-inline:var(--gutter);width:100%}
.sec{padding-block:clamp(3rem,6vw,5.5rem)}
.sec-tight{padding-block:clamp(2rem,4vw,3.5rem)}
.on-brand{background:var(--brand);color:#fff}
.on-brand h1,.on-brand h2,.on-brand h3{color:#fff}
.on-brand .lede,.on-brand .muted{color:rgba(255,255,255,.75)}
.on-brand .cap{color:rgba(255,255,255,.6)}
.on-tint{background:var(--tint)}
.band-w{background:var(--white)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--body);font-weight:500;font-size:.97rem;padding:.85rem 1.7rem;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--canvas);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--canvas)}
.btn-sm{font-size:.87rem;padding:.55rem 1.2rem}
.btn-wide{width:100%}
.on-brand .btn{background:#fff;color:var(--brand);border-color:#fff}
.on-brand .btn:hover{background:transparent;color:#fff}
.on-brand .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.on-brand .btn-ghost:hover{background:#fff;color:var(--brand)}
.chip{display:inline-flex;align-items:center;font-size:.86rem;padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--grey);text-decoration:none;cursor:pointer;font-family:var(--body)}
.chip:hover{color:var(--ink);border-color:var(--ink)}
.chip[aria-pressed=true],.chip.on{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.ulink{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* header */
.trust{background:var(--brand);color:rgba(255,255,255,.85);font-size:.76rem}
.trust .wrap{display:flex;justify-content:center;gap:clamp(.8rem,3vw,2.4rem);padding-block:.6rem;flex-wrap:wrap;text-align:center}
.mast{position:sticky;top:0;z-index:60;background:var(--canvas);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;gap:1.2rem;height:66px}
.mark{font-family:var(--display);font-weight:500;font-size:1.32rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;line-height:1;display:inline-block}
.mark .tri{display:inline-block;width:.56em;height:.7em;vertical-align:baseline;position:relative;top:.012em;margin-right:.04em}
.mark .tri path{fill:var(--accent)}
.nav{display:flex;gap:1.6rem;margin-inline:auto}
.nav a{text-decoration:none;font-size:.94rem;color:var(--grey);padding:.35rem 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}
.util{display:flex;gap:1rem;align-items:center}
.util a{text-decoration:none;font-size:.93rem}
.burger{display:none;background:none;border:0;font:inherit;cursor:pointer;padding:.4rem}
.crumb{font-size:.87rem;color:var(--grey);padding-block:1.1rem}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}

/* hero */
.hero{background:var(--brand);color:#fff;text-align:center;padding-block:clamp(3.5rem,7vw,6rem);position:relative;overflow:hidden}
.hero h1{max-width:16ch;margin-inline:auto}
.hero .lede{margin:1.4rem auto 2rem;color:rgba(255,255,255,.82)}
.badges{display:flex;gap:clamp(.7rem,2.4vw,1.8rem);flex-wrap:wrap;justify-content:center;margin-top:2rem;font-size:.85rem;color:rgba(255,255,255,.75)}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{text-decoration:none;display:block}
.card[hidden]{display:none}
.card-media{aspect-ratio:4/5;display:grid;place-items:center;position:relative;overflow:hidden;margin-bottom:1.1rem;background:var(--tint)}
.card-media svg{width:42%;max-width:150px;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-media svg{transform:translateY(-8px)}
.tag{position:absolute;top:.9rem;left:.9rem;font-size:.74rem;border:1px solid rgba(0,0,0,.2);padding:.24rem .7rem;border-radius:999px;background:rgba(255,255,255,.55)}
.tag-r{left:auto;right:.9rem}
.card-b{font-size:.87rem;color:var(--grey);margin:0 0 .35rem}
.card-h{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline}
.card-h h3{font-size:1.2rem}
.card-p{font-family:var(--display);font-weight:500;font-size:1.2rem;white-space:nowrap}
.card-s{color:var(--grey);font-size:.9rem;margin:.3rem 0 0}
.ticks{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .9rem}
.ticks li{font-size:.8rem;color:var(--grey);display:flex;align-items:center;gap:.3rem}

/* PDP */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.pdp-media{background:var(--tint);aspect-ratio:1;display:grid;place-items:center;position:relative}
.pdp-media svg{width:44%;max-width:250px}
.thumbs{display:flex;gap:.6rem;margin-top:.6rem}
.thumb{flex:1;aspect-ratio:1;background:var(--tint);display:grid;place-items:center;border:1px solid transparent;cursor:pointer}
.thumb svg{width:46%}
.thumb.on{border-color:var(--ink)}
.buy h1{margin-bottom:.5rem}
.rate{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--grey);margin-bottom:1rem}
.rate b{color:var(--accent);letter-spacing:.1em}
.opt{border:1px solid var(--line);padding:1rem 1.1rem;margin-bottom:.6rem;display:flex;gap:.9rem;align-items:flex-start;cursor:pointer;background:var(--white)}
.opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input{margin:.3rem 0 0}
.opt-main{flex:1}
.opt-t{font-weight:500;display:flex;justify-content:space-between;gap:1rem}
.opt-n{font-size:.87rem;color:var(--grey);margin-top:.2rem}
.save{color:var(--accent);font-weight:500}
.qty{display:flex;align-items:center;gap:.9rem;margin:1.2rem 0}
.qty button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;font:inherit;font-size:1.1rem;cursor:pointer;color:var(--ink)}
.qty button:hover{border-color:var(--ink)}
.qty span{min-width:2ch;text-align:center;font-weight:500}
.deliv{font-size:.88rem;color:var(--grey);margin-top:.9rem}
.acc{border-top:1px solid var(--line);margin-top:2rem}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:1.1rem 2.5rem 1.1rem 0;position:relative;font-family:var(--display);font-weight:500;font-size:1.05rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after,.acc summary::before{content:"";position:absolute;right:.3rem;top:50%;background:var(--ink);transition:transform .25s}
.acc summary::before{width:12px;height:1.5px;transform:translateY(-50%)}
.acc summary::after{width:1.5px;height:12px;margin-right:5.25px;transform:translateY(-50%)}
.acc details[open] summary::after{transform:translateY(-50%) rotate(90deg)}
.acc .body{padding:0 0 1.4rem;color:var(--grey)}
.acc .body p:last-child{margin-bottom:0}

/* tables */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-weight:500;font-size:.84rem;color:var(--grey);padding:0 1rem .7rem 0;border-bottom:1px solid var(--ink)}
.tbl td{padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem}
.tbl td:last-child,.tbl th:last-child{padding-right:0}
.tbl .dose{font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--accent);white-space:nowrap}
.tbl .nm{font-weight:500}
.tbl .nm em{display:block;font-style:normal;font-size:.85rem;color:var(--grey);font-weight:400;margin-top:.15rem}
.warn{background:var(--tint);border-left:3px solid var(--accent);padding:1.1rem 1.3rem;font-size:.93rem;margin:1.5rem 0}
.warn strong{font-weight:500}

/* misc blocks */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.tile{background:var(--tint);aspect-ratio:5/3;display:flex;align-items:flex-end;padding:1.4rem;text-decoration:none;position:relative;overflow:hidden}
.tile svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28%;transition:transform .5s}
.tile:hover svg{transform:translate(-50%,-50%) scale(1.06)}
.tile span{position:relative;z-index:2;background:var(--canvas);border-radius:999px;padding:.5rem 1.1rem;font-family:var(--display);font-weight:500;font-size:1rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(1.2rem,2.5vw,2.2rem)}
.col-i{border-top:2px solid var(--accent);padding-top:1rem}
.col-i h3{font-size:1.05rem;margin-bottom:.45rem}
.col-i p{color:var(--grey);font-size:.92rem;margin:0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.step{background:var(--canvas);padding:1.3rem}
.step .n{font-family:var(--display);font-size:.85rem;color:var(--grey);margin-bottom:.6rem}
.step h3{font-size:1rem;margin-bottom:.4rem}
.step p{font-size:.87rem;color:var(--grey);margin:0}

/* cart */
.cart-row{display:grid;grid-template-columns:88px 1fr auto;gap:1.2rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.cart-row .thumbw{background:var(--tint);aspect-ratio:1;display:grid;place-items:center}
.cart-row .thumbw svg{width:52%}
.cart-tot{display:flex;justify-content:space-between;padding:.6rem 0;font-size:.97rem}
.cart-tot.big{font-size:1.2rem;font-weight:500;border-top:1px solid var(--ink);margin-top:.6rem;padding-top:1rem}
.empty{text-align:center;padding:4rem 0}

/* batch */
.field{display:flex;gap:.6rem;flex-wrap:wrap;max-width:520px;margin-top:1.4rem}
.field input{flex:1 1 240px;padding:.85rem 1.3rem;border-radius:999px;border:1px solid var(--line);background:var(--white);font:inherit;font-size:.97rem;color:var(--ink)}
.on-brand .field input{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.on-brand .field input::placeholder{color:rgba(255,255,255,.5)}
.field input:focus{outline:none;border-color:var(--accent)}
.result{margin-top:2rem;border-top:1px solid rgba(255,255,255,.25);padding-top:1.5rem;display:none}
.result.on{display:block}
.result dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.2rem}
.result dt{font-size:.79rem;opacity:.6;margin-bottom:.25rem}
.result dd{margin:0;font-size:.97rem}

/* footer */
.foot{background:var(--brand);color:#fff;padding-block:clamp(3rem,5vw,4.5rem) 2rem;margin-top:0}
.foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;margin-bottom:3rem}
.foot h4{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:1.1rem;font-family:var(--body);font-weight:400}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.7rem}
.foot a{text-decoration:none;color:rgba(255,255,255,.75);font-size:.92rem}
.foot a:hover{color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.18);padding-top:1.6rem;color:rgba(255,255,255,.5);font-size:.79rem;line-height:1.7;max-width:98ch}

/* palette switcher */
.swbar{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-radius:999px;background:rgba(0,0,0,.66);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.2)}
.swbar b{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:400;opacity:.6;padding-inline:.4rem .2rem;white-space:nowrap}
.sw{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);cursor:pointer;padding:0;transition:transform .2s,border-color .2s}
.sw:hover{transform:scale(1.14)}
.sw[aria-pressed=true]{border-color:#fff;transform:scale(1.16)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:1000px){
  .grid,.grid-4{grid-template-columns:1fr 1fr}
  .pdp{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:66px;left:0;right:0;background:var(--canvas);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:.5rem var(--gutter) 1rem;margin:0}
  .nav.open a{padding:.7rem 0;border-bottom:1px solid var(--line)}
  .burger{display:block;margin-left:auto;order:-1}
  .util{margin-left:0}
}
@media (max-width:620px){
  .grid,.grid-4,.tiles,.steps,.foot-cols{grid-template-columns:1fr}
  .swbar b{display:none}
}

/* coming soon */
.card-soon{opacity:.85}
.card-soon .card-media{background:transparent;border:1px dashed var(--line)}
.soon-mark{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.card-soon h3{color:var(--grey)}
.swbar{display:none}