/* Shared styles for the product, checkout and policy pages. Tokens match index.html. */
:root{
  color-scheme:dark;
  --bg:#0D0C0B; --bg-2:#141210; --bg-3:#1C1916;
  --fg:#F3ECE0; --fg-2:rgba(243,236,224,.66); --fg-3:rgba(243,236,224,.6);
  --line:rgba(243,236,224,.12); --line-2:rgba(243,236,224,.28);
  --bronze:#C9925A; --ok:#C9D6A8; --err:#F0A58C; --scrim:rgba(0,0,0,.62);
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Courgette",Georgia,"Times New Roman",serif; --gold:#D9A85E;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.3s;
}
@media (prefers-reduced-motion:reduce){:root{--dur:0s}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media(min-width:760px){.wrap{padding-left:max(6vw,env(safe-area-inset-left,0px));padding-right:max(6vw,env(safe-area-inset-right,0px))}}
.label{font:400 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--fg-3)}
.label b{font-weight:400;color:var(--fg-2)}
.display{font-family:var(--sans);font-weight:300;letter-spacing:-.025em;line-height:.98;text-wrap:balance}
.display em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;line-height:1;font-size:1.1em}
.d2{font-size:clamp(2.5rem,5.4vw,5rem)}
.d3{font-size:clamp(2rem,3.6vw,3.2rem)}
.lede{color:var(--fg-2);max-width:42ch;font-size:16px;line-height:1.65}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:50px;padding:0 28px;border-radius:999px;border:0;background:var(--fg);color:var(--bg);font:500 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background var(--dur),transform var(--dur) var(--ease)}
.pill:hover{background:#fff}
.pill:active{transform:scale(.98)}
.pill.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.pill.ghost:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.pill:disabled{opacity:.4;cursor:not-allowed}
.pill.wide{width:100%;height:56px;font-size:14px}
.tlink{border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:border-color var(--dur)}
.tlink:hover{border-color:var(--fg)}

/* header + footer (rendered by shop.js) */
.nav{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);background:rgba(13,12,11,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.mark{display:flex;align-items:center;gap:12px;font:400 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase}
.mark img{width:30px;height:30px;border-radius:50%}
.nav-links{display:flex;gap:36px;font-size:13px;letter-spacing:.04em;color:var(--fg-2)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--fg)}
.bag-btn{background:none;border:0;cursor:pointer;font:400 13px/1 var(--sans);letter-spacing:.04em;padding:10px 0}
.bag-btn span{font-variant-numeric:tabular-nums;color:var(--fg-2)}
@media(max-width:860px){.nav-links{display:none}}
@media(max-width:400px){.mark span{display:none}}
footer{padding-block:72px calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);margin-top:clamp(96px,12vw,160px)}
.foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.foot nav{display:flex;gap:56px;flex-wrap:wrap}
.foot nav div{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--fg-2)}
.foot nav a:hover{color:var(--fg)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:64px;font-size:12px;color:var(--fg-3);letter-spacing:.04em}

/* bag drawer */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:60;opacity:0;transition:opacity var(--dur)}
.scrim.show{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--bg-2);border-left:1px solid var(--line);z-index:70;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .45s var(--ease);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.drawer.open{transform:none}
.dh{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid var(--line)}
.dh h3{font:300 22px/1.2 var(--sans)}
.x{background:none;border:0;cursor:pointer;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);padding:8px 0}
.x:hover{color:var(--fg)}
.db{flex:1;overflow-y:auto;padding:28px;display:flex;flex-direction:column;gap:22px}
.df{border-top:1px solid var(--line);padding:22px 28px;display:flex;flex-direction:column;gap:14px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px}
.qty button{background:none;border:0;width:36px;height:36px;cursor:pointer;font-size:16px}
.qty span{min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.bar{height:1px;background:var(--line)}
.bar i{display:block;height:1px;background:var(--bronze);transition:width .5s var(--ease)}
.ship-note{font-size:13px;color:var(--fg-2);display:flex;flex-direction:column;gap:10px}
.ship-note b{color:var(--fg);font-weight:400}
.li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:start;padding-bottom:20px;border-bottom:1px solid var(--line)}
.li .mini{width:64px;height:64px;overflow:hidden;background:var(--bg-3)}
.li .mini img{width:100%;height:100%;object-fit:cover}
.li h4{font:400 15px/1.3 var(--sans)}
.li .meta{font-size:12px;color:var(--fg-3)}
.li .end{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-variant-numeric:tabular-nums}
.li .was{font-size:12px;color:var(--fg-3);text-decoration:line-through}
.lbtn{background:none;border:0;cursor:pointer;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);padding:0}
.lbtn:hover{color:var(--fg)}
.totals{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--fg-2)}
.totals b{color:var(--fg);font-weight:400;font-variant-numeric:tabular-nums}
.totals .save b{color:var(--ok)}
.totals .grand{font-size:16px;color:var(--fg);padding-top:10px;border-top:1px solid var(--line)}
.empty{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding-top:20px;color:var(--fg-2)}
[hidden]{display:none!important}
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);background:var(--fg);color:var(--bg);padding:13px 22px;border-radius:999px;z-index:90;opacity:0;transition:opacity var(--dur),transform var(--dur) var(--ease);font-size:13px;max-width:calc(100% - 32px);text-align:center;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* choices shared by product + checkout */
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line-2);cursor:pointer;transition:border-color var(--dur),background var(--dur)}
.opt:has(input:checked){border-color:var(--bronze);background:rgba(201,146,90,.07)}
.opt:has(input:disabled){opacity:.45;cursor:not-allowed}
.opt input{accent-color:#C9925A;margin:4px 0 0;flex:none}
.opt .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.opt b{font-weight:400}
.opt small{color:var(--fg-3);font-size:12px;line-height:1.5}
.opt .amt{font-variant-numeric:tabular-nums;white-space:nowrap}
.tag{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bg);background:var(--bronze);padding:3px 8px;border-radius:999px;margin-left:8px;vertical-align:2px}
select.sel{background:var(--bg);color:var(--fg);border:1px solid var(--line-2);padding:10px 12px;font-size:13px;margin-top:8px;max-width:100%}
.check{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--fg-2);line-height:1.6;cursor:pointer}
.check input{accent-color:#C9925A;margin-top:4px;flex:none}
.check a{color:var(--fg);border-bottom:1px solid var(--line-2)}

/* product page */
.pdp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);padding-top:clamp(28px,4vw,56px);align-items:start}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gal figure{position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:4/5}
.gal figure:first-child{grid-column:1/-1;aspect-ratio:1/1}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gal figcaption{position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#F3ECE0;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.dots{display:none}
.info{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px}
.info h1{font-size:clamp(2.6rem,4.4vw,4.2rem)}
.mood{font:400 22px/1.3 var(--serif);color:var(--fg-2)}
.proofline{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;letter-spacing:.06em;color:var(--fg-3)}
.proofline b{color:var(--bronze);font-weight:400}
.price{display:flex;align-items:baseline;gap:14px;font-variant-numeric:tabular-nums}
.price b{font:300 32px/1 var(--sans)}
.price s{color:var(--fg-3);font-size:16px}
.price small{color:var(--fg-3);font-size:13px}
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sizes button{background:transparent;border:1px solid var(--line-2);padding:16px 18px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color var(--dur),background var(--dur)}
.sizes button b{font:300 22px/1 var(--sans)}
.sizes button small{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.sizes button[aria-checked="true"]{border-color:var(--bronze);background:rgba(201,146,90,.08)}
.sizes button:hover{border-color:var(--fg)}
.grp{display:flex;flex-direction:column;gap:10px}
.grp>.label{margin-bottom:2px}
.addrow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.addrow .qty{height:56px}
.addrow .qty button{height:54px;width:44px}
.deals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line)}
.deals li{padding:14px 12px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);font-size:12px;color:var(--fg-3);line-height:1.4}
.deals li:last-child{border-right:0}
.deals li b{font:400 15px/1.2 var(--sans);color:var(--fg)}
.promise{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--fg-2)}
.promise li{display:flex;gap:10px}
.promise li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--bronze);margin-top:8px;flex:none}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 0;font:400 15px/1.3 var(--sans)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:20px;color:var(--fg-3);transition:transform var(--dur)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details>div{color:var(--fg-2);font-size:14px;padding:0 0 20px;display:flex;flex-direction:column;gap:10px}
.acc details a{color:var(--fg);border-bottom:1px solid var(--line-2)}
.sec{padding-top:clamp(96px,12vw,160px)}
.sec-top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:clamp(40px,6vw,72px)}
.bundles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.bundle{border:1px solid var(--line);display:flex;flex-direction:column}
.bundle figure{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.bundle figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.9)}
.bundle .bt{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.bundle h3{font:300 24px/1.2 var(--sans)}
.bundle p{color:var(--fg-2);font-size:14px;flex:1}
.bundle .price b{font-size:22px}
.bundle .pill{margin-top:8px}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.steps3 li{padding:28px 28px 0 0;display:flex;flex-direction:column;gap:10px}
.steps3 i{font:400 28px/1 var(--serif);color:var(--fg-3)}
.steps3 h3{font:400 19px/1.3 var(--sans)}
.steps3 p{color:var(--fg-2);font-size:14px;max-width:34ch}
.pbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(20,18,16,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(100%);transition:transform .45s var(--ease)}
.pbar.on{transform:none}
.pbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.pbar span{font-size:13px;color:var(--fg-2)}
.pbar span b{color:var(--fg);font-weight:400}
.pbar .pill{height:44px;padding:0 22px}
@media(max-width:900px){
  .pdp{grid-template-columns:minmax(0,1fr);padding-top:0}
  .pdp>.galwrap{margin-inline:calc(-1 * max(20px,env(safe-area-inset-left,0px)))}
  .gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;scrollbar-width:none}
  .gal::-webkit-scrollbar{display:none}
  .gal figure,.gal figure:first-child{flex:0 0 100%;aspect-ratio:1/1;scroll-snap-align:start}
  .dots{display:flex;justify-content:center;gap:8px;padding-top:14px}
  .dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:background var(--dur)}
  .dots i.on{background:var(--fg)}
  .info{position:static}
  .bundles,.steps3{grid-template-columns:1fr}
  .steps3 li{padding-bottom:24px;border-bottom:1px solid var(--line)}
}
@media(max-width:420px){.deals{grid-template-columns:1fr}.deals li{border-right:0;border-bottom:1px solid var(--line)}.deals li:last-child{border-bottom:0}}

/* checkout */
.co{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);padding-top:clamp(28px,4vw,48px);align-items:start}
.co h1{font-size:clamp(2.4rem,4vw,3.6rem)}
.co-main{display:flex;flex-direction:column;gap:40px}
.stepnum{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.stepnum i{font:400 24px/1 var(--serif);color:var(--bronze)}
.stepnum h2{font:300 22px/1.2 var(--sans)}
.co-side{position:sticky;top:96px;border:1px solid var(--line);background:var(--bg-2);padding:28px;display:flex;flex-direction:column;gap:22px}
.panel{border:1px solid var(--line-2);padding:22px;display:flex;flex-direction:column;gap:14px;font-size:14px;color:var(--fg-2)}
.panel pre{white-space:pre-wrap;font:400 13px/1.6 var(--sans);color:var(--fg);background:var(--bg-3);padding:14px;margin:0;max-height:220px;overflow:auto}
.secure{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--fg-3);letter-spacing:.04em}
.secure svg{width:14px;height:14px;flex:none}
.err{color:var(--err);font-size:13px}
@media(max-width:900px){.co{grid-template-columns:1fr}.co-side{position:static;order:-1}}

/* policy pages */
.doc{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(32px,5vw,88px);padding-top:clamp(56px,7vw,110px)}
.doc aside{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:10px;font-size:13px;color:var(--fg-2)}
.doc aside a[aria-current]{color:var(--fg)}
.doc aside a:hover{color:var(--fg)}
.prose{max-width:68ch;display:flex;flex-direction:column;gap:16px;color:var(--fg-2)}
.prose h1{color:var(--fg);margin-bottom:8px}
.prose .eff{font-size:13px;color:var(--fg-3);margin-bottom:24px}
.prose h2{font:400 20px/1.3 var(--sans);color:var(--fg);margin-top:28px}
.prose ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.prose a{color:var(--fg);border-bottom:1px solid var(--line-2)}
.prose strong{color:var(--fg);font-weight:400}
@media(max-width:860px){.doc{grid-template-columns:1fr}.doc aside{position:static;flex-direction:row;flex-wrap:wrap;gap:8px 20px}}

/* depth modules: marquee, comparison, texture band, kiosk, faq, reveals */
.marquee{overflow:hidden;border-block:1px solid var(--line);margin-top:clamp(72px,9vw,120px);padding-block:18px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:56px;width:max-content;animation:mq 38s linear infinite;font:400 clamp(22px,2.4vw,32px)/1 var(--serif);color:var(--fg-2);white-space:nowrap}
.mq-track span::after{content:"✦";font-style:normal;font-size:.5em;color:var(--bronze);margin-left:56px;vertical-align:.3em}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}
.cmp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:start}
.cmp-t{width:100%;border-collapse:collapse;font-size:14px}
.cmp-t th,.cmp-t td{padding:16px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp-t thead th{font:400 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.cmp-t thead th:nth-child(2){color:var(--bronze)}
.cmp-t tbody th{font-weight:400;color:var(--fg-3);width:30%}
.cmp-t td:nth-child(2){color:var(--fg);background:rgba(201,146,90,.06)}
.cmp-t td:nth-child(3){color:var(--fg-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tex{position:relative;height:min(92vh,880px);overflow:hidden;margin-top:clamp(96px,12vw,160px);background:var(--bg-2)}
.tex-img{position:absolute;inset:-60px 0;width:100%;height:calc(100% + 120px);object-fit:cover;transform:scale(1.18);filter:saturate(.85) contrast(1.06) brightness(.72);will-change:transform}
.tex::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,12,11,.88),rgba(13,12,11,.2) 60%),linear-gradient(0deg,rgba(13,12,11,.6),transparent 40%)}
.tex-in{position:absolute;left:0;right:0;bottom:clamp(48px,8vw,110px);z-index:1;display:flex;flex-direction:column;gap:20px}
.kiosk{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr);gap:clamp(16px,2.4vw,32px);align-items:end}
.kiosk figure{position:relative;overflow:hidden;background:var(--bg-2)}
.kiosk .k1{aspect-ratio:3/4}.kiosk .k2{aspect-ratio:3/4;margin-bottom:12%}
.kiosk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kiosk .kt{display:flex;flex-direction:column;gap:20px;align-self:center}
.where{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.faqgrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,88px)}
.rvon .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rvon .rv.in{opacity:1;transform:none}
@media(max-width:900px){
  .cmp,.faqgrid{grid-template-columns:1fr}
  .cmp-t{font-size:13px}.cmp-t th,.cmp-t td{padding:12px 8px}
  .kiosk{grid-template-columns:1fr 1fr}.kiosk .kt{grid-column:1/-1;order:-1}.kiosk .k2{margin-bottom:0}
  .tex{height:78vh}
}
.upg{display:block;margin-top:10px;background:none;border:0;padding:0;cursor:pointer;font-size:12px;color:var(--bronze);text-align:left;border-bottom:1px solid rgba(201,146,90,.4)}
.upg:hover{color:var(--fg)}
.xsell{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px;border:1px dashed var(--line-2)}
.xsell img{width:52px;height:52px;object-fit:cover}
.xsell b{display:block;font-weight:400;font-size:14px}
.xsell small{color:var(--fg-3);font-size:12px}
.xsell .pill{height:38px;padding:0 16px;font-size:11px}
/* pack tiles */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.packs button{position:relative;background:transparent;border:1px solid var(--line-2);padding:16px 12px 14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color var(--dur),background var(--dur)}
.packs button[aria-checked="true"]{border-color:var(--bronze);background:rgba(201,146,90,.08)}
.packs button:hover{border-color:var(--fg)}
.packs b{font:300 19px/1.1 var(--sans)}
.packs .pp{font-size:14px;font-variant-numeric:tabular-nums}
.packs small{font-size:11px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.packs .save{position:absolute;top:-9px;right:8px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;background:var(--bronze);color:var(--bg);padding:3px 7px;border-radius:999px}
.ticks{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.ticks li{font-size:12px;color:var(--fg-2);display:flex;gap:8px}
.ticks li::before{content:"✓";color:var(--bronze)}
.eta{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border:1px solid var(--line);background:var(--bg-2);font-size:13px;color:var(--fg-2)}
.eta b{color:var(--fg);font-weight:400}
.eta .r{display:flex;gap:12px;align-items:flex-start}
.eta svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--bronze)}
main{overflow-x:clip}
.ship-note>span{display:block}

/* ---------- inspiration pass: Allbirds / Glossier / ASOS ---------- */
:root{--r:16px}
/* rotating announcement bar */
.annc{position:relative;height:34px;overflow:hidden;background:var(--bronze);color:var(--bg);font:500 11px/34px var(--sans);letter-spacing:.16em;text-transform:uppercase;text-align:center}
.annc a,.annc span{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);padding-inline:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.annc .on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.annc a,.annc span{transition:none}}
/* floating pill nav on shop pages */
.nav{background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:calc(10px + env(safe-area-inset-top,0px))}
.nav .nav-in{height:60px;background:rgba(20,18,16,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:999px;padding-inline:22px;max-width:calc(1440px - 12vw);margin-inline:auto}
.nav>.annc{margin:-10px 0 10px}
@media(max-width:760px){.nav{padding-inline:12px}.nav .nav-in{padding-inline:16px;height:54px}}
/* rounded media */
.gal figure,.bundle,.kiosk figure,.panel,.co-side,.eta,.xsell,.opt,.sizes button,.packs button,.why,.perk,.qcard{border-radius:var(--r)}
.bundle,.qcard{overflow:hidden}
.tex{margin-inline:max(12px,1.6vw);border-radius:calc(var(--r) + 8px)}
@media(max-width:900px){.gal figure,.gal figure:first-child{border-radius:0}}
/* buy box as a card */
@media(min-width:901px){.info{background:var(--bg-2);border:1px solid var(--line);border-radius:calc(var(--r) + 8px);padding:36px}}
/* save with sets, inside the buy box */
.sets{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sets li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.sets img{width:48px;height:48px;object-fit:cover;border-radius:10px}
.sets b{display:block;font-weight:400;font-size:14px}
.sets small{color:var(--fg-3);font-size:12px;font-variant-numeric:tabular-nums}
.sets .chip{display:inline-block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--bronze);color:var(--bronze);padding:2px 7px;border-radius:999px;margin-left:8px;vertical-align:1px}
.sets button{height:36px;padding:0 16px;font-size:11px}
/* why we love it: callouts around the jar */
.why{background:var(--bg-2);border:1px solid var(--line);padding:clamp(28px,4vw,56px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);gap:clamp(24px,3vw,48px);align-items:center}
.why .wl{display:flex;flex-direction:column;gap:18px}
.why .wl p{color:var(--fg-2);max-width:38ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);background:var(--bg-3);border-radius:999px;padding:8px 14px}
.why .orb{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 40px 120px -20px rgba(201,146,90,.35)}
.why .orb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.why .wr{display:flex;flex-direction:column;gap:18px}
.why .wr li{padding-left:18px;border-left:1px solid var(--bronze);color:var(--fg-2);font-size:14px}
.why .wr b{display:block;color:var(--fg);font-weight:400;font-size:15px}
@media(max-width:900px){.why{grid-template-columns:1fr}.why .orb{max-width:300px;width:100%;margin-inline:auto;order:-1}}
/* perk tiles */
.perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.perk{background:var(--bg-2);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:8px}
.perk svg{width:22px;height:22px;color:var(--bronze)}
.perk b{font:400 15px/1.3 var(--sans)}
.perk small{font-size:13px;color:var(--fg-3);line-height:1.5}
@media(max-width:900px){.perks{grid-template-columns:1fr 1fr}}
/* glossier-style sticky bar */
.pbar .wrap>div{display:flex;align-items:center;gap:12px;min-width:0}
.pbar img{width:40px;height:40px;object-fit:cover;border-radius:10px;flex:none}
.pbar .nm{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.pbar .nm b{font-weight:400;color:var(--fg);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{padding-left:max(16px,6vw,env(safe-area-inset-left,0px));padding-right:max(16px,6vw,env(safe-area-inset-right,0px))}
.nav>.annc{margin-left:calc(-1 * max(16px,6vw,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,6vw,env(safe-area-inset-right,0px)))}
@media(max-width:760px){.nav{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}.nav>.annc{margin-left:calc(-1 * max(12px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(12px,env(safe-area-inset-right,0px)))}}
.sets s{margin-left:4px}
.info{position:relative;top:auto}
.nav-r{display:flex;align-items:center;gap:22px}.nav-shop{display:none;font-size:13px;letter-spacing:.04em}@media(max-width:860px){.nav-shop{display:inline}}

/* checkout, thank-you, policy polish */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.crumbs li{display:flex;align-items:center;gap:8px;color:var(--fg-3)}
.crumbs li+li::before{content:"";width:18px;height:1px;background:var(--line-2)}
.crumbs .on{color:var(--fg)}
.crumbs button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--fg-2);cursor:pointer;border-bottom:1px solid var(--line-2)}
.co-main>section{background:var(--bg-2);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,3vw,32px)}
.co-main>section .opt{background:var(--bg)}
.co-side{border-radius:24px;top:24px}
.panel{border-radius:var(--r);background:var(--bg)}
.mini-perks{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.mini-perks li{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--fg-2)}
.mini-perks svg{width:16px;height:16px;flex:none;color:var(--bronze)}
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.next li{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:4px}
.next i{font:400 20px/1 var(--serif);color:var(--bronze);margin-bottom:6px}
.next b{font-weight:400;color:var(--fg);font-size:14px}
.next span{font-size:12.5px;color:var(--fg-3);line-height:1.5}
.ty-fig{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;background:var(--bg-2);border-radius:28px}
@media(max-width:620px){.next{grid-template-columns:1fr}}
.doc aside{gap:4px}
.doc aside .label{margin-bottom:8px}
.doc aside a{padding:9px 14px;border-radius:999px;border:1px solid transparent;transition:background var(--dur),border-color var(--dur)}
.doc aside a[aria-current]{background:var(--bg-2);border-color:var(--line)}
.prose{max-width:76ch;background:var(--bg-2);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4.5vw,64px)}
.prose h2{padding-top:28px;border-top:1px solid var(--line)}
.prose .eff{display:inline-block;align-self:flex-start;border:1px solid var(--line-2);border-radius:999px;padding:6px 12px}
.help{margin-top:32px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.help b{display:block;color:var(--fg);font-weight:400;font-size:16px}
.help span{font-size:13px;color:var(--fg-3)}
.help-a{display:flex;flex-wrap:wrap;gap:10px}
.help .pill{height:44px;padding:0 18px;font-size:11px;border-bottom:0}
.help .pill svg{width:16px;height:16px}
.help .pill:not(.ghost){color:var(--bg)}
@media(max-width:860px){.doc aside{flex-direction:row;flex-wrap:wrap;gap:6px}.doc aside .label{width:100%;margin-bottom:2px}.prose{border-radius:20px}}
.display em{font-style:normal;font-size:1em;letter-spacing:0;line-height:1.08;color:var(--gold)}
.mark span{font:400 17px/1 var(--serif);letter-spacing:.02em;text-transform:none;color:var(--gold)}


/* phone: price right under the name so it shows on the first screen */
@media(max-width:900px){
  .info>*{order:3}
  .info>.label,.info>.display{order:0}
  .info>.price{order:1;margin-top:-6px}
  .info>.mood{order:2;font-size:19px}
}

/* 404 */
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding-block:clamp(60px,10vw,120px)}
.nf>div{display:flex;flex-direction:column;gap:20px;align-items:center;max-width:46ch}
.nf p{color:var(--fg-2)}
.nf .row-a{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}


/* ---------- product gallery: Amazon-style stage + thumbnails + hover zoom (desktop), swipe (phone) ---------- */
.thumbs,.zoomhint{display:none}
@media(min-width:901px){
  .galwrap{position:sticky;top:96px;display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start}
  .gal{display:block;position:relative;aspect-ratio:1/1;grid-column:2;grid-row:1;border-radius:var(--r);overflow:hidden;background:var(--bg-2);cursor:zoom-in;outline-offset:4px}
  .gal figure,.gal figure:first-child{position:absolute;inset:0;aspect-ratio:auto;margin:0;opacity:0;transition:opacity .45s var(--ease);border-radius:0}
  .gal figure.on{opacity:1;z-index:1}
  .gal img{transition:transform .25s ease-out}
  .gal figure.zoom img{transform:scale(2.2)}
  .gal figure.zoom figcaption{opacity:0}
  .thumbs{display:flex;flex-direction:column;gap:10px;grid-column:1;grid-row:1;max-height:calc(100vh - 140px);overflow-y:auto;scrollbar-width:none}
  .thumbs::-webkit-scrollbar{display:none}
  .thumbs button{flex:none;width:76px;height:76px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2);cursor:pointer;opacity:.62;transition:opacity var(--dur),border-color var(--dur),transform var(--dur) var(--ease)}
  .thumbs button:hover{opacity:1}
  .thumbs button[aria-selected=true]{opacity:1;border-color:var(--gold);transform:translateX(2px)}
  .thumbs img{width:100%;height:100%;object-fit:cover;display:block}
  .zoomhint{display:block;grid-column:2;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);text-align:center;margin:0}
}
@media(max-width:900px){
  .thumbs{display:flex;gap:8px;overflow-x:auto;padding:12px max(20px,env(safe-area-inset-left,0px)) 0;scrollbar-width:none}
  .thumbs::-webkit-scrollbar{display:none}
  .thumbs button{flex:none;width:56px;height:56px;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-2);opacity:.6}
  .thumbs button[aria-selected=true]{opacity:1;border-color:var(--gold)}
  .thumbs img{width:100%;height:100%;object-fit:cover;display:block}
  .dots{display:none}
}
/* selection summary + two buttons */
.sel-sum{font-size:13px;line-height:1.6;color:var(--fg-2);margin:0;padding:12px 16px;border-radius:12px;background:var(--bg-3)}
.sel-sum b{color:var(--fg);font-weight:400}
.buy2{display:grid;grid-template-columns:1fr;gap:10px}
@media(prefers-reduced-motion:reduce){.gal figure,.gal img,.thumbs button{transition:none}}
.gal.nofade figure{transition:none}