/* Fonts are self-hosted (assets/fonts): no third-party font servers on the critical path. Archivo is one variable file per subset (all weights and widths). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(assets/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(assets/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/satoshi-300.woff2) format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/satoshi-400.woff2) format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/satoshi-500.woff2) format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/satoshi-700.woff2) format('woff2')}
@font-face{font-family:'Satoshi';font-style:normal;font-weight:900;font-display:swap;src:url(assets/fonts/satoshi-900.woff2) format('woff2')}
:root{
/* AGENTS.md palette: #0d0d0d surface, white / terracotta type */
--cream:#0d0d0d; --ink:#ffffff; color-scheme:dark;
--dark:#ffffff; --white:#0d0d0d; --ember:#d3492e; /* --dark = primary fill (white), --white = text on fill (#0d0d0d) */
--crimson:#c23a3a; --crimson-fg:#292929;
--sapphire:#0e4a92; --sapphire-fg:#f4d9cd;
--yellow:#eed231; --yellow-fg:#1b1613;
--line:#2b2b2b; --panel:rgba(255,255,255,.07);
--r:5px; --gap:10px; --pad:clamp(10px,1.6cqw,22px);
--section:clamp(56px,8cqw,112px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{overflow-x:clip;max-width:100%;background:var(--cream);color:var(--ink);font-family:'Satoshi',system-ui,sans-serif;font-size:16px;font-weight:500;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--dark);outline-offset:3px}
[hidden]{display:none!important}
.disp{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.012em;line-height:.98}
.center{text-align:center}
.link{text-decoration:underline}
/* topbar + header */
.topbar{background:#0d0d0d;color:#ffffff;border-bottom:1px solid var(--line);text-align:center;font-size:12px;padding:8px var(--pad);font-weight:500}
.header{position:sticky;top:10px;z-index:40;margin:10px var(--pad) 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 18px;background:var(--cream);border:1px solid var(--line);border-radius:5px}
.logo{font-size:15px;line-height:.9}
.nav{display:flex;gap:clamp(18px,3.4cqw,44px);font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.nav a:hover{text-decoration:underline;text-underline-offset:5px}
.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:5px}
.icon-btn:hover{background:var(--panel)}
.cart-btn{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:5px}
.cart-count{background:var(--dark);color:var(--white);width:24px;height:24px;border-radius:5px;display:grid;place-items:center;font-size:12px;font-weight:600}
.search-bar{margin:10px var(--pad) 0}
.search-bar input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:14px 22px;color:var(--ink);font:inherit}
.search-bar input::placeholder{color:var(--ink);opacity:.6}
/* buttons */
.circ{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:5px;background:#ffffff;color:#0d0d0d;font-size:13px;flex:none}
.circ.dark{background:var(--dark);color:var(--white)}
.pill-btn{display:inline-flex;align-items:center;gap:12px;border-radius:5px;padding:6px 6px 6px 18px;font-size:12px;font-weight:600;transition:transform .2s}
.pill-btn:hover{transform:translateY(-2px)}
.pill-btn.dark{background:var(--dark);color:var(--white)}
.pill-btn.dark .circ{background:#0d0d0d;color:#ffffff}
.pill-btn.ghost{background:rgba(13,13,13,.7);color:#ffffff;border:1px solid var(--line)}
.pill-btn.ghost .circ{background:var(--dark);color:var(--white)}
.pill-btn.light{background:#ffffff;color:#0d0d0d;padding:14px 26px}
/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr 1.25fr;grid-template-rows:clamp(300px,30cqw,430px) clamp(160px,17cqw,250px);gap:var(--gap);padding:var(--gap) var(--pad) 0}
.h-text{grid-column:1/3;background:#0d0d0d;color:#ffffff;border:1px solid var(--line);border-radius:5px;padding:clamp(20px,3cqw,40px);display:flex;flex-direction:column;justify-content:space-between}
.h-text h1{font-size:clamp(34px,5.4cqw,82px)}
.h-text .arrow{display:inline-block;width:clamp(60px,9cqw,150px);height:2px;background:var(--ember);vertical-align:middle;margin-left:12px;position:relative}
.h-text .arrow::after{content:'';position:absolute;right:0;top:-5px;width:10px;height:10px;border-top:2px solid var(--ember);border-right:2px solid var(--ember);transform:rotate(45deg)}
.h-text p{max-width:380px;font-size:13px;opacity:.85;font-weight:400}
.h-tile{position:relative;border-radius:5px;overflow:hidden;display:block}
.t-crimson{background:var(--crimson);color:var(--crimson-fg)}
.t-sapphire{background:var(--sapphire);color:var(--sapphire-fg)}
.tile-img{position:absolute;inset:0}
.tile-img img,.photo-img img,.story-img img{width:100%;height:100%;object-fit:contain}
.tile-img img{transform:scale(1.35) translateY(-6%);transition:transform .5s}
.h-tile:hover .tile-img img{transform:scale(1.45) translateY(-6%)}
.tile-tag{position:absolute;left:16px;bottom:14px;font-size:clamp(16px,2cqw,28px)}
.h-photo{grid-column:3;grid-row:1/3;position:relative;border-radius:5px;background:var(--panel);overflow:hidden}
.photo-img{position:absolute;inset:0}
.photo-img img{transform:scale(1.2);transition:transform .6s}
.h-photo:hover .photo-img img{transform:scale(1.28) rotate(-2deg)}
.shop-badge{position:absolute;right:clamp(14px,4cqw,50px);top:46%;width:84px;height:84px;border-radius:5px;background:var(--dark);color:var(--white);display:grid;place-items:center;text-align:center;font-size:12px;transition:transform .3s}
.shop-badge:hover{transform:scale(1.1) rotate(-8deg)}
.photo-actions{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
/* manifesto */
.manifesto{padding:var(--section) var(--pad);text-align:center}
.manifesto p{max-width:1000px;margin:0 auto;font-size:clamp(24px,3.6cqw,48px);line-height:1.3;font-weight:500;letter-spacing:-.015em}
.inl{display:inline-block;width:1.35em;height:1.35em;border-radius:5px;background:var(--panel);vertical-align:middle;overflow:hidden;margin:0 .1em;position:relative;top:-.05em}
.inl img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1.7)}
.inl-pill{display:inline-block;border:1.5px solid var(--ink);border-radius:5px;padding:0 .4em;line-height:1.15}
/* sections */
.section{padding:var(--section) var(--pad) 0}
.h2-sm{font-size:clamp(26px,3.4cqw,44px);margin-bottom:28px;color:var(--ember)}
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.shop-head h2{font-size:clamp(28px,3.6cqw,48px);color:var(--ember)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill-f{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;font-size:12px;padding:10px 16px;border:1.5px solid var(--dark);border-radius:5px;color:var(--dark);transition:.2s}
.pill-f sup{font-size:8px;margin-left:2px}
.pill-f:hover{background:var(--panel)}
.pill-f.active{background:var(--dark);color:var(--white)}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:13px}
.sort select{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:8px 16px;font:inherit;font-size:13px}
.empty{padding:60px 0;text-align:center}
/* product cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px var(--gap)}
.pcard{display:flex;flex-direction:column;gap:12px}
.pimg{position:relative;display:block;aspect-ratio:4/5;border-radius:5px;background:var(--panel);overflow:hidden}
.pimg .tee-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.14);transition:opacity .35s,transform .5s}
.pimg .tee-img.alt{opacity:0}
.pimg:hover .tee-img.alt{opacity:1}
.pimg:hover .tee-img{transform:scale(1.2)}
.pimg:hover .tee-img:first-of-type:not(:only-of-type){opacity:0}
.pimg .tee-img.art-only{padding:9%;transform:none}
.badge{position:absolute;top:12px;left:12px;z-index:2;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:5px;background:var(--dark);color:var(--white)}
.quick{position:absolute;left:50%;bottom:14px;transform:translate(-50%,8px);opacity:0;z-index:2;background:var(--dark);color:var(--white);border-radius:5px;padding:9px 18px;font-size:12px;font-weight:600;white-space:nowrap;transition:.25s}
.pimg:hover .quick,.pimg:focus-visible .quick{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.quick{opacity:1;transform:translate(-50%,0)}}
.pname{font-size:clamp(17px,1.8cqw,24px)}
.pprice{font-size:14px;font-weight:600}
.pprice s{opacity:.55;margin-right:6px;font-weight:500}
/* story */
.story{display:grid;grid-template-columns:1fr 1.45fr;gap:var(--gap);padding:var(--section) var(--pad) 0}
.story-img{position:relative;border-radius:5px;background:var(--panel);min-height:440px;overflow:hidden}
.story-img img{transform:scale(1.2)}
.story-card{background:var(--yellow);color:var(--yellow-fg);border-radius:5px;padding:clamp(22px,3.4cqw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.story-card h2{font-size:clamp(30px,4.6cqw,66px)}
.story-feats{display:grid;grid-template-columns:1fr 1fr;gap:20px;border:1.5px solid rgba(27,22,19,.35);border-radius:5px;padding:18px}
.story-feats>div{display:flex;flex-direction:column;gap:8px}
.story-feats strong{font-size:14px;display:flex;align-items:center;gap:10px}
.story-feats p{font-size:13px;font-weight:500}
/* custom */
.custom .h2-sm{margin-bottom:26px}
.custom h2{font-size:clamp(28px,4.4cqw,62px);color:var(--ember)}
.custom-card{position:relative;background:#0d0d0d;border:1px solid var(--line);border-radius:5px;height:clamp(300px,38cqw,540px);overflow:hidden;display:flex;justify-content:center;align-items:center}
.custom-card img{position:absolute;width:clamp(180px,28cqw,400px);top:50%;transition:transform .5s}
.c1{left:2%;transform:translateY(-55%) rotate(-10deg)}
.c2{left:22%;transform:translateY(-48%) rotate(4deg);z-index:2}
.c3{left:44%;transform:translateY(-55%) rotate(-4deg);z-index:1}
.c4{left:64%;transform:translateY(-48%) rotate(10deg)}
.custom-card:hover .c1{transform:translateY(-58%) rotate(-14deg)}
.custom-card:hover .c4{transform:translateY(-52%) rotate(14deg)}
.custom-card .pill-btn{position:absolute;bottom:20px;z-index:5}
/* trust */
.trust{margin:var(--section) var(--pad) 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust div{padding:28px 20px;display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line)}
.trust div:last-child{border:0}
.trust strong{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;font-size:15px}
.trust span:not(.ti){font-size:13px}
.ti{font-size:22px;margin-bottom:6px;color:var(--ember)}
/* reviews */
.rv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,4cqw,56px);align-items:center}
.rv-score{display:flex;align-items:flex-end;gap:clamp(16px,3cqw,40px);flex-wrap:wrap}
.rv-big{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(96px,14cqw,190px);line-height:.85;letter-spacing:-.04em}
.rv-big small{font-size:.22em;font-weight:500;letter-spacing:0}
.rv-bars{flex:1;min-width:190px;display:grid;gap:8px;font-size:13px}
.rv-bars div{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px}
.rv-bars i{display:block;height:6px;border-radius:6px;background:var(--panel);overflow:hidden}
.rv-bars b{display:block;height:100%;background:var(--dark);border-radius:6px}
.rv-count{font-size:13px;width:100%}
.rv-card{position:relative;border:1px solid var(--line);border-radius:5px;padding:26px 60px 34px 26px;min-height:200px;display:flex;flex-direction:column;gap:12px}
.rv-top{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.rv-top strong{font-size:16px}
.stars{letter-spacing:.12em}
.rv-card blockquote{font-size:16px;line-height:1.5}
.rv-next{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:5px;border:1px solid var(--line);display:grid;place-items:center}
.rv-next:hover{background:var(--dark);color:var(--white)}
.rv-dots{display:flex;gap:6px;position:absolute;left:26px;bottom:14px}
.rv-dots i{width:26px;height:3px;border-radius:3px;background:var(--line)}
.rv-dots i.on{background:var(--dark)}
/* faq */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(24px,5cqw,72px)}
.size-table h3{font-size:15px;margin-bottom:14px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px 6px;border-bottom:1px solid var(--line)}
th{font-size:12px;text-transform:uppercase}
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;list-style:none;font-size:17px;display:flex;justify-content:space-between;gap:16px}
summary::after{content:'+';transition:transform .38s cubic-bezier(.22,1,.36,1)}
details>summary::-webkit-details-marker{display:none}
/* other slide-outs: search bar, suggestions, notify form, COD line, query note */
@keyframes slideOut{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes slideOutH{from{opacity:0;max-height:0;transform:translateY(-8px)}to{opacity:1;max-height:200px;transform:none}}
#searchBar:not([hidden]){animation:slideOutH .38s cubic-bezier(.22,1,.36,1)}
#searchPanel:not([hidden]){animation:slideOut .28s cubic-bezier(.22,1,.36,1)}
#notifyForm:not([hidden]),.cod-line:not([hidden]),#queryNote:not([hidden]),#emptyState:not([hidden]){animation:slideOutH .38s cubic-bezier(.22,1,.36,1);overflow:hidden}
@media (prefers-reduced-motion:reduce){#searchBar,#searchPanel,#notifyForm,.cod-line,#queryNote,#emptyState{animation:none!important}}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:10px;max-width:560px}
/* footer */
.footer{margin:var(--section) var(--pad) var(--pad);background:#0d0d0d;color:#ffffff;border:1px solid var(--line);border-radius:5px;padding:clamp(24px,4cqw,48px)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.footer .big{font-size:clamp(40px,6cqw,84px);display:block}
.footer-brand p{font-size:12px;margin-top:40px;opacity:.75}
.footer-top>div:not(.footer-brand){display:flex;flex-direction:column;gap:9px;font-size:13px}
.footer h4{font-family:'Archivo',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ember);margin-bottom:6px}
.footer a{opacity:.8}.footer a:hover{opacity:1;text-decoration:underline}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:11px;opacity:.75}
/* PDP */
#pdp{padding:0 var(--pad)}
.crumbs{display:flex;align-items:center;gap:10px;font-size:12px;padding:22px 0 16px}
.crumbs button{display:grid;place-items:center;width:26px;height:26px}
.crumbs a:hover{text-decoration:underline}
.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3cqw,44px);align-items:start}
.gal{position:relative;border-radius:5px;background:var(--panel);overflow:hidden;aspect-ratio:1/1.12}
.gal-prog{position:absolute;top:12px;left:14px;right:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;z-index:3}
.gal-prog i{height:3px;border-radius:3px;background:rgba(255,255,255,.25)}
.gal-prog i.on{background:var(--dark)}
.gal-main{position:absolute;inset:0 0 22%;overflow:hidden}
.gal-main img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.gal-main img.art-only{padding:6%}
.gal-thumbs{position:absolute;left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;z-index:3}
.thumb{position:relative;aspect-ratio:1.15;border-radius:5px;overflow:hidden;background:var(--cream);border:3px solid transparent}
.thumb[aria-pressed="true"]{border-color:#ffffff}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb img.z{object-fit:cover;transform:scale(2.3);object-position:50% 50%}
.info{display:flex;flex-direction:column;gap:16px}
.cat-pill{align-self:flex-start;border:1px solid var(--line);border-radius:5px;padding:5px 16px;font-size:12px}
.info h1{font-size:clamp(28px,3.4cqw,42px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.info .price{font-size:22px;font-weight:600}
.info .price s{font-size:16px;opacity:.55;margin-left:8px}
.deliv{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:5px;padding:9px 16px;font-size:12px}
.lbl{font-size:12px;margin-bottom:-6px}
.sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.size{height:clamp(46px,5cqw,58px);border-radius:5px;background:var(--panel);font-size:15px;font-weight:600;transition:.2s}
.size:hover:not(:disabled){background:rgba(255,255,255,.16)}
.size[aria-pressed="true"]{background:var(--dark);color:var(--white)}
.size:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.err{font-size:13px;min-height:18px;font-weight:600}
.cta-row{display:flex;gap:10px}
.add{flex:1;height:54px;border-radius:5px;background:var(--dark);color:var(--white);font-size:14px;font-weight:600;transition:transform .2s}
.add:hover{transform:translateY(-2px);background:var(--sapphire);color:var(--sapphire-fg)}
.wish{width:54px;height:54px;border-radius:5px;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:.2s}
.wish[aria-pressed="true"]{background:var(--dark);color:var(--white)}
.acc{border:1px solid var(--line);border-radius:5px;padding:0 18px}
.acc details{border:0;padding:16px 0}
.acc summary{font-size:15px}
.ship-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.ship-grid div{display:flex;gap:12px;align-items:center;font-size:13px}
.ship-grid small{display:block;font-size:11px;opacity:.7}
.ship-grid .circ{width:40px;height:40px;background:var(--panel);color:#ffffff;font-size:16px}
.pdp-sec{margin-top:clamp(48px,7cqw,96px)}
.also-h{font-size:clamp(30px,5cqw,60px);font-weight:500;text-align:center;letter-spacing:-.02em;margin:clamp(56px,8cqw,110px) 0 30px;font-family:'Satoshi',sans-serif;text-transform:none}
.also{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.also .pname{font-family:'Satoshi',sans-serif;text-transform:none;font-weight:600;font-size:16px;letter-spacing:0}
.mini-rate{font-size:12px;display:flex;gap:6px;align-items:center}
.chip-off{background:var(--dark);color:var(--white);font-size:10px;padding:2px 8px;border-radius:5px;margin-left:6px}
/* overlays */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:60}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--cream);z-index:70;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);border-left:1px solid var(--line)}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:20px}
.ship-progress{padding:14px 20px;font-size:13px;border-bottom:1px solid var(--line)}
.bar{height:5px;background:var(--panel);border-radius:5px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--dark);transition:width .4s}
.cart-items{flex:1;overflow:auto;padding:6px 20px}
.cart-empty{text-align:center;padding:60px 0;display:flex;flex-direction:column;gap:16px;align-items:center}
.citem{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.cthumb{aspect-ratio:4/5;background:var(--panel);border-radius:5px;overflow:hidden}
.cthumb img{width:100%;height:100%;object-fit:contain;transform:scale(1.15)}
.cinfo{display:flex;flex-direction:column;gap:3px;font-size:14px}
.cinfo small{opacity:.75}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:5px;width:fit-content;margin-top:6px}
.qty button{width:30px;height:30px;font-size:16px}
.qty span{min-width:22px;text-align:center;font-size:13px}
.crm{font-size:12px;text-decoration:underline;align-self:start}
.drawer-foot{padding:18px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.row{display:flex;justify-content:space-between;font-size:14px}
.row.total{font-size:18px;font-weight:600}
.btn{display:flex;justify-content:space-between;align-items:center;background:var(--dark);color:var(--white);border-radius:5px;padding:8px 8px 8px 24px;font-weight:600;font-size:14px;width:100%;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn .circ{background:var(--white);color:var(--dark)}
.note{font-size:12px;text-align:center}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:var(--cream);border:1px solid var(--line);border-radius:5px;z-index:80;opacity:0;pointer-events:none;transition:.25s}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.modal-close{position:absolute;top:12px;right:12px;z-index:2}
.co-body{padding:32px 28px;display:flex;flex-direction:column;gap:18px}
.co-body h3{font-size:30px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px}
.field input{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:13px;color:var(--ink);font:inherit}
.field input:focus{outline:2px solid var(--dark)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt-label{font-size:12px;text-transform:uppercase;margin-bottom:8px;letter-spacing:.04em}
.pay-opt{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:5px;padding:13px 16px;cursor:pointer}
.pay-opt:has(input:checked){border-color:var(--dark);background:var(--panel)}
.pay-opt small{display:block;opacity:.75}
.success{text-align:center;padding:20px 0;display:flex;flex-direction:column;gap:14px;align-items:center}
.success .big{font-size:56px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--dark);color:var(--white);padding:12px 22px;border-radius:5px;font-size:14px;z-index:90;opacity:0;pointer-events:none;transition:.3s}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* responsive */
@media all{
.also{grid-template-columns:repeat(2,1fr)}
.footer-top{grid-template-columns:1fr 1fr}
.rv{grid-template-columns:1fr}
}
@media all{
.header{grid-template-columns:auto 1fr}.nav{display:none}
.hero{grid-template-columns:1fr 1fr;grid-template-rows:auto 200px 440px}
.h-text{grid-column:1/3;min-height:300px;gap:30px}
.h-photo{grid-column:1/3;grid-row:auto}
.grid{grid-template-columns:repeat(2,1fr);gap:22px 8px}
.story{grid-template-columns:1fr}.story-img{min-height:340px}
.story-feats{grid-template-columns:1fr}
.trust{grid-template-columns:1fr 1fr}
.trust div:nth-child(2){border-right:0}.trust div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.faq-wrap{grid-template-columns:1fr}
.pdp-grid{grid-template-columns:1fr}
.two{grid-template-columns:1fr}
.custom-card img{width:48cqw}.c1{left:-8%}.c2{left:18%}.c3{left:42%}.c4{left:60%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
select option{background:#0d0d0d;color:#ffffff}
.logo{color:var(--ember)}
.brand{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.03em;line-height:.92}
.logo.brand{font-size:19px}
.story-card .circ{background:#1b1613;color:#eed231}
/* ===== BENTO (poster style) ===== */
.bx-wrap{padding:var(--section) var(--pad) 0}
.bx-head,.bx-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;letter-spacing:-.01em;font-size:clamp(11px,1.5cqw,18px);color:#ffffff;padding:0 .6%}
.bx-head{margin-bottom:clamp(14px,2cqw,26px)}
.bx-foot{margin-top:clamp(16px,2.2cqw,30px)}
.bx-foot span:not(.bx-clovers){text-align:right}
.bx-clovers{display:inline-flex;gap:.25em;color:var(--ember)}
.bx-clovers svg{width:1.7em;height:1.7em}
.bxg{container-type:inline-size;--u:1cqw;display:grid;grid-template-columns:repeat(24,1fr);grid-template-rows:repeat(40,1fr);aspect-ratio:972/948;max-width:1400px;margin:0 auto}
.bx{position:relative;margin:calc(.8*var(--u));border-radius:5px;display:block;color:inherit;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bx:hover{transform:translateY(-.5cqw) rotate(-.4deg)}
.bx-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.bx-art{position:absolute;display:block;filter:drop-shadow(0 1.2cqw 1.4cqw rgba(0,0,0,.35));transition:transform .5s}
.bx:hover .bx-art{transform:rotate(-3deg) scale(1.04)}
.bx-h{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.045em;line-height:.86;position:absolute;left:calc(2.6*var(--u));z-index:2;font-size:calc(6.4*var(--u))}
.bx-meta{position:absolute;z-index:2;left:calc(2.6*var(--u));bottom:calc(2.4*var(--u));font-size:calc(1.9*var(--u));font-weight:700;line-height:1.05;letter-spacing:-.02em}
.bx-tag{position:absolute;z-index:2;font-size:calc(1.55*var(--u));font-weight:700;line-height:1.05;letter-spacing:-.02em;text-align:right}
.bx-tag.tr{top:calc(2.4*var(--u));right:calc(2.6*var(--u))}
.bx-ic{position:absolute;z-index:2;width:calc(2.6*var(--u));height:calc(2.6*var(--u))}
.bx-ic.tl{top:calc(2.2*var(--u));left:calc(2.6*var(--u))}
.bx-ic.tr{top:calc(2.2*var(--u));right:calc(2.6*var(--u))}
.bx-sticker{position:absolute;z-index:4;border-radius:5px;display:grid;place-items:center;width:calc(12.8*var(--u));height:calc(12.8*var(--u));transition:transform .5s}
.bx:hover .bx-sticker{transform:rotate(45deg) scale(1.06)}
.bx-sticker svg{width:62%;height:62%}
.s-violet{background:#814af9;color:#eddbdb;border:calc(.9*var(--u)) solid #814af9;box-shadow:inset 0 0 0 calc(.35*var(--u)) #eddbdb;right:calc(-2*var(--u));bottom:calc(-3*var(--u))}
.s-cream{background:#eedbcd;color:#0d0d0d;box-shadow:0 0 0 calc(.6*var(--u)) #0d0d0d inset, 0 0 0 calc(.9*var(--u)) #eedbcd;right:calc(-2.4*var(--u));bottom:calc(-3.2*var(--u))}
/* blue */
.c-blue{grid-area:1/1/23/12;background:#124e96;color:#eee2cc}
.c-blue .bx-art{width:calc(46*var(--u));left:50%;top:calc(-5*var(--u));transform:translateX(-50%)}
.c-blue:hover .bx-art{transform:translateX(-50%) rotate(-3deg) scale(1.04)}
.c-blue .bx-h{bottom:calc(9.5*var(--u));font-size:calc(7.2*var(--u));letter-spacing:-.05em}
.c-blue .bx-meta{font-size:calc(2*var(--u))}
.c-blue .bx-tag{color:#eee2cc}
/* red */
.c-red{grid-area:1/12/11/25;background:#c23a3a;color:#292929}
.c-red .bx-h{left:calc(2.6*var(--u));bottom:calc(2.6*var(--u));font-size:calc(6.6*var(--u))}
.c-red .bx-art{width:calc(30*var(--u));right:calc(7*var(--u));bottom:calc(-8*var(--u));transform:rotate(6deg)}
.c-red:hover .bx-art{transform:rotate(1deg) scale(1.04)}
.bx-clover{position:absolute;width:calc(17*var(--u));height:calc(17*var(--u));right:calc(1.5*var(--u));bottom:calc(1*var(--u));color:#292929}
/* yellow */
.c-yellow{grid-area:11/12/33/25;background:#eed231;color:#1b1613}
.c-yellow .bx-h{top:calc(2.4*var(--u));font-size:calc(9.2*var(--u));letter-spacing:-.055em}
.c-yellow .bx-tag.tr{top:calc(2.2*var(--u));font-size:calc(1.8*var(--u))}
.bx-clovers.tr2{position:absolute;z-index:2;top:calc(5.4*var(--u));right:calc(2.6*var(--u));color:#1b1613;font-size:calc(1.6*var(--u))}
.bx-clovers.tr2 svg{width:calc(3.2*var(--u));height:calc(3.2*var(--u))}
.bx-ask{position:absolute;z-index:2;left:calc(2.6*var(--u));top:calc(21*var(--u));font-size:calc(1.9*var(--u));line-height:1.3;font-weight:500}
.bx-arrow{position:absolute;z-index:2;left:calc(2.6*var(--u));top:calc(28*var(--u));width:calc(6.4*var(--u));height:calc(6.4*var(--u))}
.c-yellow .bx-meta.b{font-size:calc(2.2*var(--u));bottom:calc(3*var(--u))}
.c-yellow .bx-art{width:calc(40*var(--u));right:calc(-5*var(--u));bottom:calc(-1*var(--u));transform:rotate(-4deg)}
.c-yellow:hover .bx-art{transform:rotate(-8deg) scale(1.04)}
.bx-blob{position:absolute;right:calc(-2*var(--u));bottom:calc(6*var(--u));width:calc(34*var(--u));height:calc(36*var(--u));background:radial-gradient(closest-side,#0d0d0d 62%,transparent 100%);border-radius:5px}
/* teal */
.c-teal{grid-area:23/1/33/12;color:#1e1e1c;background:transparent}
.c-teal .bx-clip{background:#3f9b8e}
.split{position:absolute;top:0;bottom:0;right:0;width:36%;background:#eedbcd}
.c-teal .bx-h.lc{text-transform:none;top:calc(2.6*var(--u));font-size:calc(5*var(--u));letter-spacing:-.05em}
.c-teal .bx-meta.r{left:auto;right:auto;left:calc(10*var(--u));bottom:calc(2.2*var(--u));font-size:calc(1.7*var(--u));font-weight:500;text-align:right;width:calc(18*var(--u))}
.c-teal .bx-art{width:calc(26*var(--u));right:calc(-2*var(--u));top:50%;transform:translateY(-44%) rotate(4deg)}
.c-teal:hover .bx-art{transform:translateY(-44%) rotate(-2deg) scale(1.05)}
.c-teal .bx-ic.tr{color:#1e1e1c;z-index:3}
/* cream */
.c-cream{grid-area:34/1/41/9;background:#eedbcd;display:flex;flex-direction:column;justify-content:center;gap:calc(.6*var(--u));padding:0 calc(2*var(--u))}
.bx-big{display:flex;align-items:center;gap:calc(1.2*var(--u));font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;font-size:calc(4.2*var(--u));line-height:.95;letter-spacing:-.01em;color:#f2d32d;-webkit-text-stroke:calc(.3*var(--u)) #0d0d0d;paint-order:stroke fill;white-space:nowrap}
.bx-big svg{width:calc(3.6*var(--u));height:calc(3.6*var(--u));color:#8938ff;-webkit-text-stroke:0}
/* purple */
.c-purple{grid-area:34/9/41/25;background:#814af9;color:#eddbdb}
.bx-wash{position:absolute;right:-4%;top:-30%;width:45%;opacity:.28;mix-blend-mode:luminosity;filter:none}
.c-purple .bx-h.thin{top:calc(2.4*var(--u));font-weight:300;font-size:calc(5.4*var(--u));letter-spacing:-.05em}
.ring{position:relative;display:inline-block;padding:0 calc(.8*var(--u))}
.ring::after{content:'';position:absolute;inset:calc(-.2*var(--u)) 0 calc(.2*var(--u));border:calc(.4*var(--u)) solid #c23a3a;border-radius:5px;transform:rotate(-3deg)}
.bx-cols{position:absolute;z-index:2;left:calc(2.6*var(--u));right:calc(2.6*var(--u));bottom:calc(2.2*var(--u));display:flex;gap:calc(3*var(--u));font-size:calc(1.6*var(--u));font-weight:700;line-height:1.1;letter-spacing:-.02em}
@media all{
.bxg{--u:2cqw;display:flex;flex-direction:column;aspect-ratio:auto}
.bx{margin:calc(.9*var(--u)) 0;height:calc(var(--h)*var(--u))}
.bx-head,.bx-foot{font-size:11px}
.bx-foot span:not(.bx-clovers){font-size:10px}
.c-blue{--h:62}.c-red{--h:34}.c-yellow{--h:60}.c-teal{--h:30}.c-cream{--h:22}.c-purple{--h:26}
.c-blue .bx-art{width:calc(50*var(--u))}
.c-red .bx-art{width:calc(30*var(--u));right:calc(10*var(--u))}
.c-yellow .bx-art{width:calc(42*var(--u))}
.c-teal .bx-meta.r{left:calc(6*var(--u))}
.bx-big{font-size:calc(6.4*var(--u))}
}
@media (prefers-reduced-motion:reduce){.bx,.bx-art,.bx-sticker{transition:none!important}}
.bx-wrap{overflow-x:clip}
@media all{.s-violet,.s-cream{right:calc(-.6*var(--u))}}
.c-red .bx-art{width:calc(26*var(--u));right:calc(-1*var(--u));bottom:calc(-9*var(--u))}
.c-teal .bx-meta.r{width:calc(24*var(--u));left:calc(4*var(--u))}
@media all{.c-red .bx-art{width:calc(26*var(--u));right:calc(-1*var(--u))}.c-teal .bx-meta.r{left:calc(2.6*var(--u));text-align:left}}
@media (max-width:0px){.c-red .bx-art{width:calc(30*var(--u));right:calc(4*var(--u));bottom:calc(-11*var(--u))}}
.manifesto .mf-line{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:1;font-size:clamp(40px,8cqw,120px);max-width:1200px}
.manifesto .mf-sub{font-size:clamp(16px,1.9cqw,24px);line-height:1.4;max-width:760px;margin:clamp(20px,3cqw,36px) auto 0;font-weight:500;letter-spacing:0}
.manifesto .inl-pill{color:var(--ember);border-color:var(--ember)}
.manifesto .mf-line{font-size:clamp(34px,8cqw,120px)}
.manifesto .inl-pill{white-space:nowrap;padding:0 .3em}
.tile-img.full img{object-fit:cover;object-position:55% 50%;transform:scale(1);transition:transform .6s}
.h-tile:hover .tile-img.full img{transform:scale(1.06)}
.t-crimson .tile-tag{text-shadow:0 0 .4em rgba(194,58,58,.9)}
.h-tile .tile-tag{background:#0d0d0d;color:#ffffff;padding:.28em .7em;border-radius:5px;font-size:clamp(11px,1.3cqw,17px);left:12px;bottom:12px;text-shadow:none}
/* real product photography (full-bleed scenes) */
.pimg .tee-img{object-fit:cover;transform:scale(1);}
.pimg:hover .tee-img{transform:scale(1.06)}
.gal-main{inset:0}
.gal-main img{object-fit:cover}
.gal-thumbs{background:linear-gradient(transparent,rgba(13,13,13,.55));inset:auto 0 0 0;padding:28px 12px 12px;left:0;right:0;bottom:0}
.thumb img{object-fit:cover}
.thumb img.z{transform:scale(2.2)}
.sizes.one{grid-template-columns:1fr}
.add:disabled{opacity:.5;cursor:not-allowed}
.add:disabled:hover{transform:none;background:var(--dark);color:var(--white)}
.cthumb img{object-fit:cover;transform:none}
.c-blue .bx-h{font-size:calc(6.6*var(--u))}
.pname{overflow-wrap:anywhere;font-size:clamp(15px,1.7cqw,24px)}
/* high-res transparent mockups */
.pimg{aspect-ratio:1280/1400}
.pimg .tee-img.mock{object-fit:contain;transform:scale(1)}
.pimg:hover .tee-img.mock{transform:scale(1.05)}
.gal-prog{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.gal-thumbs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
.gal-main img.mock{object-fit:contain}
.thumb img.mock{object-fit:contain}
.thumb img.z.mock{transform:scale(2.4)}
.cthumb img.mock{object-fit:contain;transform:scale(1.08)}
.manifesto .mf-line{font-weight:600;letter-spacing:-.02em;font-size:clamp(34px,7.2cqw,108px)}
.manifesto .mf-line .inl-pill{display:inline-block;margin-top:.12em}
.manifesto .mf-sub{font-family:'Satoshi',sans-serif}
.manifesto .mf-line{font-size:clamp(26px,7cqw,108px)}
.manifesto .inl-pill{white-space:normal}
/* headings: Archivo (wide, heavy) */
.disp,.brand,.manifesto .mf-line{font-weight:800;font-stretch:115%}
.nav,.footer h4{font-stretch:112%}
.pill-f,.trust strong{font-weight:800;font-stretch:112%}
.rv-big{font-weight:800}
.bx-h{font-weight:800;font-stretch:100%}
.bx-big{font-weight:900;font-stretch:75%;font-size:calc(5*var(--u))}
.manifesto .mf-line{letter-spacing:-.03em}
/* ===== phone-width column on every screen ===== */
html{background:#0d0d0d}
.phone{max-width:480px;margin:0 auto;container-type:inline-size;min-height:100vh;background:var(--cream);border-inline:1px solid var(--line)}
.drawer{max-width:480px}.modal{width:min(460px,calc(100% - 24px))}
/* ===== fine film grain, background only (text and photos stay clean) ===== */
:root{--grain:url("data:image/svg+xml;utf8,")}
html,body,.phone,.header,.h-text,.custom-card,.footer,.drawer,.modal,.x{background-color:#0d0d0d;background-image:var(--grain);background-size:320px 320px}
.topbar{background-image:var(--grain);background-size:320px 320px}
/* nav: wordmark left, cat logo centre, actions right */
.header{grid-template-columns:1fr auto 1fr}
.cat-logo{display:grid;place-items:center;justify-self:center}
.cat-logo img{height:32px;width:auto;display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cat-logo:hover img{transform:rotate(-8deg) scale(1.1)}
/* hero: photo panel first (under the nav), then the two tiles */
.hero{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
.h-photo{grid-column:1/3;grid-row:1;min-height:clamp(380px,118cqw,540px)}
.hero .h-tile{grid-row:2;min-height:clamp(170px,48cqw,230px)}
/* hero block always fills 90% of the screen height */
.hero{height:90vh;height:90svh;min-height:520px;box-sizing:border-box;grid-template-rows:minmax(0,1fr) minmax(150px,31%);padding-bottom:var(--gap)}
.h-photo{min-height:0}
.hero .h-tile{min-height:0}
/* cart: hidden when empty, fly-to-cart + bump */
.fly{position:fixed;left:0;top:0;z-index:9000;pointer-events:none;border-radius:5px;background-size:contain;background-position:center;background-repeat:no-repeat;background-color:rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(0,0,0,.45);will-change:transform}
.cart-btn.bump{animation:cartbump .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes cartbump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.cart-btn.bump .cart-count{animation:cartpop .55s ease}
@keyframes cartpop{0%{background:#d3492e;color:#fff}100%{}}
/* Coz apes section: everything right-aligned, no outline around "strong together" */
.manifesto{text-align:right}
.manifesto .mf-line,.manifesto .mf-sub{margin-left:auto;margin-right:0}
.manifesto .inl-pill{border:0;padding:0;border-radius:0}
.manifesto .mf-line{font-size:clamp(40px,13.5cqw,72px);line-height:.98}
.manifesto .mf-red{color:var(--ember)}
.photo-img.full img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1);transition:transform .8s}
.h-photo:hover .photo-img.full img{transform:scale(1.04)}
.photo-img.full img{object-position:50% 42%}
/* empty space around the phone column on PC: pure black */
html,body{background:#000000!important;background-image:none!important}
.phone{background-color:#0d0d0d}
.photo-actions .pill-btn{border-radius:999px}
.photo-actions .pill-btn .circ{border-radius:50%}
.manifesto .mf-sub{text-align:left}
/* paragraph is exactly as wide as the widest headline line ("TOGETHER") and starts under its "T" */
.manifesto .mf-wrap{width:fit-content;max-width:100%;margin-left:auto;margin-right:0}
.manifesto .mf-line{margin:0;max-width:none;text-align:right}
.manifesto .mf-line .l{display:block}
.manifesto .mf-sub{width:0;min-width:100%;max-width:none;margin:clamp(14px,2.4cqw,28px) 0 0;text-align:left}
.manifesto{padding-top:calc(var(--section) - var(--gap));padding-bottom:0}
.manifesto{padding-top:calc(var(--section) - var(--gap) + 4px)}
.photo-img.full img{object-position:50% 48%}
/* thin gray edge on every box (outline paints above photos, so it shows on images too) */
.h-photo,.h-tile,.pimg,.story-img,.story-card,.custom-card,.gal,.thumb,.cthumb,.drawer,.modal{outline:1px solid #2b2b2b;outline-offset:-1px}
.size,.chip,.cat-pill,.deliv,.sort select,.search-bar input,.field input,.pay-opt,.acc,.rv-card,.footer,.header,.trust{border:1px solid #2b2b2b}
.size[aria-pressed="true"]{border-color:#ffffff}
.thumb[aria-pressed="true"]{outline-color:#ffffff}.t-crimson .tile-img.full img{object-position:50% 58%}
.t-sapphire .tile-img.full img{object-position:50% 28%}
.pcard .pname,.pcard .pprice{padding-left:5px}
/* ===== stacked image cards: normal scrolling, each image slides up over the one before ===== */
.sg{margin-top:var(--section);position:relative}
.sg-card{position:sticky;margin:0;height:40vh;height:40svh;overflow:hidden;background:#000}
.sg-card:nth-child(1){top:84px}
.sg-card:nth-child(2){top:94px}
.sg-card:nth-child(3){top:104px}
.sg-card img{width:100%;height:100%;object-fit:cover;display:block}
.sg-card:nth-child(1) img{object-position:50% 45%}
.sg-card:nth-child(2) img{object-position:50% 55%}
.sg-card:nth-child(3) img{object-position:50% 62%}
.sg-card::after{content:'';position:absolute;inset:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 -10px 24px rgba(0,0,0,.5);pointer-events:none}
/* gray edge on the remaining boxes and labels */
.sg-card{outline:1px solid #2b2b2b;outline-offset:-1px}
.badge,.quick,.tile-tag,.toast{border:1px solid #2b2b2b}
/* visible 1px gray frame drawn OUTSIDE the photo boxes and product cards */
.h-photo,.h-tile,.pimg,.story-img,.story-card,.custom-card,.gal,.cthumb{outline:0;box-shadow:0 0 0 1px #363636}
.shop-head h2{font-size:clamp(34px,11cqw,60px);line-height:.95}
#shop{background:#010001;background-image:none;padding-bottom:var(--section)}
.pcard .pname,.pcard .pprice{opacity:.85}
.pill-f{opacity:.8}
.pill-f:hover{opacity:1}
.pill-f.active{opacity:.95}
/* "see all" bar under the first 10 products */
.see-all-btn{margin-top:22px;min-height:56px;font-size:14px;letter-spacing:.01em}
.see-all-btn small{opacity:.6;font-weight:500;margin-left:6px}
/* bigger "see all" bar */
.see-all-btn{min-height:76px;font-size:17px;padding:10px 10px 10px 28px;margin-top:26px}
.see-all-btn .circ{width:54px;height:54px;font-size:20px}
.see-all-btn small{font-size:13px}
/* ===== grainy gradient backgrounds for transparent product mockups ===== */
:root{--noise:url("data:image/svg+xml;utf8,")}
.grad{background-size:220px 220px,auto;background-blend-mode:overlay,normal;background-repeat:repeat,no-repeat}
.grad.g0{background-image:var(--noise),radial-gradient(120% 95% at 30% 0%,#79a3dc 0%,#456fb0 42%,#1d3156 100%)}
.grad.g1{background-image:var(--noise),radial-gradient(120% 95% at 70% 0%,#eaa56c 0%,#b8563b 45%,#3c1c17 100%)}
.grad.g2{background-image:var(--noise),radial-gradient(120% 95% at 25% 0%,#62c6b3 0%,#23706a 45%,#0d2b2f 100%)}
.grad.g3{background-image:var(--noise),radial-gradient(120% 95% at 75% 0%,#a083f4 0%,#5033a6 45%,#1b1142 100%)}
.grad.g4{background-image:var(--noise),radial-gradient(120% 95% at 35% 0%,#dc6d63 0%,#8f2d31 45%,#2b0e13 100%)}
.grad.g5{background-image:var(--noise),radial-gradient(120% 95% at 65% 0%,#8fa5bd 0%,#475870 45%,#131c28 100%)}
/* ===== v2: smooth top-dark -> bottom-light gradient + very fine, even film grain (matches the reference) ===== */
:root{--noise:url("data:image/svg+xml;utf8,")}
.grad{background-size:256px 256px,100% 100%;background-blend-mode:overlay,normal;background-repeat:repeat,no-repeat}
.grad.g0{background-image:var(--noise),linear-gradient(180deg,#22406b 0%,#4a76ae 48%,#8fb2dc 100%)}
.grad.g1{background-image:var(--noise),linear-gradient(180deg,#4a2418 0%,#b0583a 48%,#eab189 100%)}
.grad.g2{background-image:var(--noise),linear-gradient(180deg,#0f3a3d 0%,#2c8279 48%,#86d0c0 100%)}
.grad.g3{background-image:var(--noise),linear-gradient(180deg,#231757 0%,#5a3fb0 48%,#a99cf0 100%)}
.grad.g4{background-image:var(--noise),linear-gradient(180deg,#3a1015 0%,#9a343a 48%,#e88a80 100%)}
.grad.g5{background-image:var(--noise),linear-gradient(180deg,#1a2432 0%,#46586f 48%,#98abc4 100%)}
/* story: the yellow "We're changing…" box sits INSIDE the tee photo box */
.story{display:grid;grid-template-columns:1fr;grid-template-areas:"s";gap:0;padding:var(--section) var(--pad) 0}
.story-img{grid-area:s;min-height:0;position:relative;overflow:hidden;background:var(--panel)}
.story-img img{position:absolute;top:0;left:0;width:100%;height:clamp(250px,74cqw,360px);object-fit:contain;transform:scale(1.08)}
.story-card{grid-area:s;align-self:end;position:relative;z-index:2;margin:clamp(250px,74cqw,360px) 10px 10px;box-shadow:none;outline:0}
/* fabric quality block */
.story{display:block;padding:var(--section) var(--pad) 0}
.fab{position:relative;overflow:hidden;border-radius:5px;aspect-ratio:4/5;background:#000;box-shadow:0 0 0 1px #363636}
.fab img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.fab:hover img{transform:scale(1.04)}
.fab::after{content:'';position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.78));pointer-events:none}
.fab-text{position:absolute;left:clamp(16px,5cqw,28px);right:clamp(16px,5cqw,28px);bottom:clamp(18px,5.5cqw,32px);z-index:2}
.fab-text h2{font-size:clamp(34px,11cqw,60px);line-height:.95;color:#fff}
.fab-text p{margin-top:12px;max-width:34ch;font-size:clamp(15px,4.2cqw,19px);line-height:1.35;color:rgba(255,255,255,.88)}
/* fabric carousel: scroll-snap track (past 50% snaps to the next image), dots, peek hint */
.fab{position:relative;overflow:hidden}
.fab::after{display:none}
.fab-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab;outline-offset:-3px}
.fab-track::-webkit-scrollbar{display:none}
.fab-track.dragging{cursor:grabbing;scroll-snap-type:none}
.fab-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.fab-slide::after{content:'';position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(0,0,0,.78));pointer-events:none}
.fab-slide img{user-select:none;-webkit-user-drag:none}
.fab-big{font-size:clamp(26px,8.4cqw,44px);line-height:1;color:#fff;max-width:14ch}
.fab-dots{position:absolute;top:14px;left:14px;display:flex;gap:6px;z-index:3;pointer-events:none}
.fab-dots i{width:26px;height:3px;border-radius:3px;background:rgba(255,255,255,.35);transition:background .3s,width .3s}
.fab-dots i.on{background:#fff;width:40px}
.fab-text .fab-big{font-size:clamp(28px,9cqw,46px);line-height:1;margin:0;max-width:13ch;color:#fff}
/* monkey cut-out where the custom-order banner used to be */
.monkey{padding:var(--section) var(--pad) 0;text-align:center}
.monkey img{display:block;width:100%;height:auto;max-width:460px;margin:0 auto;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.monkey:hover img{transform:scale(1.025) rotate(-1deg)}
/* monkey: no hover animation, sits right on the top border of the trust strip */
.monkey{padding-bottom:0}
.monkey img{transition:none;filter:none}
.monkey:hover img{transform:none}
.monkey + .trust{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
/* ===== footer: logo + pill, small link columns, giant cropped wordmark ===== */
.footer{position:relative;overflow:hidden;padding:clamp(18px,5cqw,28px) clamp(16px,5cqw,28px) 0;display:block}
.footer .ft-top{display:flex;justify-content:space-between;align-items:center}
.footer .ft-logo img{height:36px;width:auto;display:block}
.footer .ft-cta{display:inline-flex;align-items:center;gap:12px;padding:6px 6px 6px 18px;border:1.5px solid var(--ember);border-radius:999px;color:var(--ember);font-size:13px;font-weight:700;opacity:1;transition:background .2s,color .2s}
.footer .ft-cta .circ{width:30px;height:30px;background:var(--ember);color:#0d0d0d;border-radius:50%}
.footer .ft-cta:hover{background:var(--ember);color:#0d0d0d;text-decoration:none}
.footer .ft-cta:hover .circ{background:#0d0d0d;color:var(--ember)}
.footer .ft-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(26px,8cqw,40px)}
.footer .ft-links div{display:flex;flex-direction:column;gap:7px}
.footer .ft-links a{font-size:13px;line-height:1.35;color:var(--ember);opacity:1}
.footer .ft-links a:hover{text-decoration:underline}
.footer .ft-legal{margin-top:clamp(22px,6cqw,32px);font-size:11px;line-height:1.7;color:rgba(255,255,255,.55)}
.footer .ft-giant{margin-top:clamp(14px,4cqw,22px);display:flex;flex-direction:column;font-family:'Archivo',sans-serif;font-weight:800;font-stretch:115%;letter-spacing:-.045em;line-height:.8;color:var(--ember);font-size:clamp(120px,40cqw,220px);height:1.5em;overflow:hidden;user-select:none}
.footer .ft-giant span{display:block}
.footer .ft-giant{font-size:clamp(130px,48cqw,250px);height:1.3em}
.trust{background:#000000;background-image:none}
#faq{background:#000000;background-image:none;padding-bottom:var(--section)}
/* black area around the footer box (continues the black FAQ block above) */
.footer-zone{background:#000000;background-image:none;padding:0 var(--pad) var(--pad)}
.footer-zone .footer{margin:0}
.footer-zone{padding:0}
.footer-zone .footer{border-radius:0;border-width:1px 0 0 0;box-shadow:none}
/* ===== top bar: edge-to-edge flat black bar, thin gray line under it, bigger cat ===== */
.header{position:sticky;top:0;margin:0;border:0;border-bottom:1px solid #2b2b2b;border-radius:0;padding:9px clamp(14px,4.4cqw,22px);background:#000000;background-image:none;box-shadow:none}
.header .logo.brand{font-size:21px}
.cat-logo img{height:44px}
.header .icon-btn{width:42px;height:42px}
html{scroll-padding-top:72px}
.sg-card:nth-child(1){top:66px}
.sg-card:nth-child(2){top:76px}
.sg-card:nth-child(3){top:86px}
/* ===== header v3: hamburger left, red monkey + red name centred, search/cart right ===== */
.header{grid-template-columns:1fr auto 1fr}
.header .menu-btn{justify-self:start;margin-left:-6px}
.header .brand-lockup{display:inline-flex;align-items:center;gap:8px;justify-self:center;color:var(--ember)}
.header .brand-lockup img{height:44px;width:auto;display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.header .brand-lockup:hover img{transform:rotate(-8deg) scale(1.08)}
.header .brand-lockup .brand{font-size:21px;color:var(--ember);line-height:1}
.header .header-actions{justify-self:end}
/* left slide-in menu (anchored to the phone column, hidden when closed) */
.drawer.left{right:auto;left:var(--col-left,max(0px,calc((100vw - 480px)/2)));width:min(330px,88%);transform:translateX(-100%);border-left:0;border-right:1px solid #2b2b2b;visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s}
.drawer.left.open{transform:none;visibility:visible;transition-delay:0s}
.menu-links{display:flex;flex-direction:column;padding:10px 20px;flex:1}
.menu-links a{font-family:'Archivo',sans-serif;font-weight:800;font-stretch:112%;text-transform:uppercase;font-size:26px;letter-spacing:-.02em;padding:16px 0;border-bottom:1px solid #2b2b2b;color:#fff}
.menu-links a:hover{color:var(--ember)}
.menu-note{padding:18px 20px;font-size:12px;color:rgba(255,255,255,.6);border-top:1px solid #2b2b2b}
/* ===== pop-out menu: dropdown cards under the top bar ===== */
.menu-pop{position:fixed;z-index:70;top:71px;left:calc(var(--col-left,max(0px,calc((100vw - 480px)/2))) + 10px);width:min(460px,calc(100vw - 20px));display:grid;gap:10px;opacity:0;visibility:hidden;transform:translateY(-12px) scale(.96);transform-origin:top left;transition:opacity .22s ease,transform .32s cubic-bezier(.2,.9,.25,1.1),visibility 0s linear .32s}
.menu-pop.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mp-card{background:#000;border:1px solid #2b2b2b;border-radius:5px;padding:10px}
.mp-links{display:flex;flex-direction:column}
.mp-links a{display:block;text-align:center;font-family:'Archivo',sans-serif;font-weight:800;font-stretch:112%;text-transform:uppercase;font-size:17px;letter-spacing:.01em;color:#fff;padding:16px 8px;border-bottom:1px solid #1f1f1f;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .3s}
.menu-pop.open .mp-links a{opacity:1;transform:none}
.menu-pop.open .mp-links a:nth-child(2){transition-delay:.04s}.menu-pop.open .mp-links a:nth-child(3){transition-delay:.08s}.menu-pop.open .mp-links a:nth-child(4){transition-delay:.12s}.menu-pop.open .mp-links a:nth-child(5){transition-delay:.16s}
.mp-links a:hover{color:var(--ember)}
.mp-links a.mp-cta{border:0;margin-top:12px;padding:14px 8px;background:#fff;color:#0d0d0d;border-radius:5px;box-shadow:0 4px 0 #8c8c8c}
.mp-links a.mp-cta:hover{color:#0d0d0d;transform:translateY(2px);box-shadow:0 2px 0 #8c8c8c}
.mp-quick{display:grid;grid-template-columns:repeat(3,1fr);padding:14px 6px 12px}
.mp-quick a{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:700;padding:4px}
.mp-quick a:hover{color:var(--ember)}
/* bolder menu + search icons, slightly smaller logo */
.header .menu-btn svg,.header #searchToggle svg{stroke-width:2.6}
.header .brand-lockup img{height:38px}
/* ===== top bar hides on scroll down, returns on scroll up ===== */
.header{transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.header.is-hidden{transform:translateY(-101%)}
.sg-card{transition:top .32s cubic-bezier(.2,.8,.2,1)}
html.nav-hidden .sg-card:nth-child(1){top:0}
html.nav-hidden .sg-card:nth-child(2){top:10px}
html.nav-hidden .sg-card:nth-child(3){top:20px}
@media (prefers-reduced-motion:reduce){.header,.sg-card{transition:none}}
#faq details p{opacity:.8}
/* ======================================================================
UX PASS (from ecom-ux-skills): motion tokens, a11y, product page, search, cart, checkout
====================================================================== */
:root{--dur-instant:100ms;--dur-fast:150ms;--dur-base:250ms;--dur-slow:400ms;--ease-standard:cubic-bezier(.2,0,0,1);--ease-enter:cubic-bezier(.05,.7,.1,1);--ease-exit:cubic-bezier(.3,0,.8,.15)}
.pprice,.price,.row,.bb-price,.cthumb + .cinfo,.total{font-variant-numeric:tabular-nums}
/* skip link + offline banner */
.skip-link{position:fixed;left:12px;top:-70px;z-index:300;background:#fff;color:#0d0d0d;padding:12px 18px;border-radius:5px;font-weight:700;transition:top var(--dur-fast) var(--ease-standard)}
.skip-link:focus{top:12px}
.offline{position:sticky;top:0;z-index:120;background:#fff;color:#0d0d0d;text-align:center;font-size:13px;font-weight:700;padding:10px 14px}
#home:focus,#pdp:focus{outline:none}
/* press feedback (<100ms) */
button,.btn,.pill-btn,.pill-f,.chip-s,.size,.pin-btn,.add{transition-property:transform,background-color,color,border-color,opacity,box-shadow;transition-duration:var(--dur-instant);transition-timing-function:var(--ease-standard)}
button:not(:disabled):active,.btn:active,.pill-btn:active,.pill-f:active,.add:not(:disabled):active,.size:active,.pin-btn:active,.mp-links a:active{transform:scale(.97)}
.add:focus-visible,.btn:focus-visible,.pin-btn:focus-visible,.pill-btn:focus-visible,.size:focus-visible{outline:3px solid var(--ember);outline-offset:3px}
/* ---- tap targets >= 44px ---- */
.header .icon-btn{width:44px;height:44px}
.cart-btn{min-height:44px}
.brand-lockup{min-height:44px}
.pill-btn{min-height:44px}
.pill-f{min-height:44px;padding-inline:16px}
.sort select{min-height:44px;font-size:16px;padding-right:34px}
.footer .ft-links{gap:4px 14px}
.footer .ft-links div{gap:0}
.footer .ft-links a{display:block;padding:13px 0}
.qty button{width:44px;height:44px}
.qty span{min-width:30px}
.crm{min-height:44px;padding:0 6px}
.link-btn{min-height:44px;padding:0 4px;text-decoration:underline;text-underline-offset:3px;font-size:13px;font-weight:700}
summary{min-height:48px;align-items:center}
/* ---- search (inside the sticky header) ---- */
.header .search-bar{grid-column:1/-1;margin:6px 0 4px;position:relative}
.search-form{position:relative;display:flex;align-items:center}
.search-form input{width:100%;height:50px;font-size:16px;border:1px solid #3a3a3a;border-radius:5px;background:#0d0d0d;color:#fff;padding:0 96px 0 14px}
.search-form input::placeholder{color:#8f8f8f}
.search-form input::-webkit-search-cancel-button{display:none}
.s-go{position:absolute;right:5px;top:5px;width:40px;height:40px;border-radius:5px;display:grid;place-items:center;background:#fff;color:#0d0d0d}
.s-clear{position:absolute;right:50px;top:3px;width:44px;height:44px;color:#b5b5b5;font-size:15px}
.search-panel{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:#000;border:1px solid #2b2b2b;border-radius:5px;max-height:min(66vh,520px);overflow:auto;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.65);z-index:5}
.sp-title{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#9a9a9a;padding:10px 10px 4px;font-weight:700}
.sp-row{display:flex;align-items:center;border-radius:5px}
.sp-main{flex:1;text-align:left;padding:0 10px;min-height:44px;display:flex;gap:10px;align-items:center;font-size:15px}
.sp-ico{opacity:.6}
.sp-x{width:44px;height:44px;color:#9a9a9a}
.sp-prod{display:flex;align-items:center;gap:12px;padding:8px 10px;min-height:60px;border-radius:5px}
.sp-prod:hover,.sp-row:hover,.is-active{background:rgba(255,255,255,.09)}
.sp-thumb{width:48px;height:54px;position:relative;border-radius:5px;overflow:hidden;background:var(--panel);flex:none}
.sp-thumb img{width:100%;height:100%;object-fit:cover}.sp-thumb img.mock{object-fit:contain}
.sp-name{flex:1;font-weight:700;font-size:14px;display:flex;flex-direction:column;min-width:0}
.sp-name small{opacity:.65;font-weight:500;font-size:12px}
.sp-price{font-size:13px;font-weight:700}
.sp-all{width:100%;text-align:left;padding:0 10px;min-height:48px;font-weight:700;border-top:1px solid #1f1f1f;margin-top:4px}
.sp-dym{padding:8px 10px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 4px 10px}
.chip-s{min-height:44px;padding:0 14px;border:1px solid #3a3a3a;border-radius:5px;font-size:13px;font-weight:700}
.chip-s:hover{border-color:#fff}
.query-note{font-size:14px;margin:0 0 14px;opacity:.9}
.query-note .link{min-height:44px;padding:0 6px}
.empty{padding:34px 4px;text-align:left}
.empty h3{font-size:clamp(24px,7cqw,34px);margin-bottom:8px}
.empty p{opacity:.85;margin-bottom:6px}
.empty .chips{padding-inline:0}
/* ---- loading shimmer + graceful image failure ---- */
.skel{position:relative}
.skel img{opacity:0;transition:opacity var(--dur-base) var(--ease-standard),transform .5s var(--ease-standard)}
.skel.ready img{opacity:1}
.skel:not(.ready)::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,0) 70%);background-size:220% 100%;animation:shimmer 1.4s linear infinite}
.skel.img-fail::after{content:attr(data-name);position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;font-weight:700;font-size:14px;opacity:.7}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
/* ---- product card: one link (title) stretched over the whole card, heart above it ---- */
.pcard{position:relative}
.card-link{color:inherit;text-decoration:none}
.card-link::after{content:'';position:absolute;inset:0;z-index:2}
.card-link:focus-visible{outline:none}
.card-link:focus-visible::after{outline:2px solid #fff;outline-offset:3px;border-radius:5px}
.pimg .tee-img.alt{opacity:0!important}
.pcard:hover .pimg.ready .tee-img.alt,.pcard:focus-within .pimg.ready .tee-img.alt{opacity:1!important}
.pcard:hover .pimg.ready .tee-img:not(.alt):not(:only-of-type),.pcard:focus-within .pimg.ready .tee-img:not(.alt):not(:only-of-type){opacity:0}
.pcard:hover .pimg .tee-img{transform:scale(1.05)}
.pcard.is-out .pimg img{filter:grayscale(.55) brightness(.8)}
.heart{position:absolute;top:6px;right:6px;width:44px;height:44px;z-index:3;display:grid;place-items:center;color:#fff;border-radius:5px;background:rgba(13,13,13,.5)}
.heart[aria-pressed="true"]{color:var(--ember)}
.heart.pop svg,.wish.pop svg{animation:heartpop .38s var(--ease-standard)}
@keyframes heartpop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.pcard .pname a{display:block}
/* ---- product page ---- */
.gal-track{position:absolute;inset:0 0 22% 0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;z-index:1}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden}
.gal-hit{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:zoom-in}
.gal-hit img{width:100%;height:100%;object-fit:cover}
.gal-hit img.mock{object-fit:contain}
.gal-hit img.z{transform:scale(2.4)}
.gal-count{position:absolute;top:26px;right:14px;z-index:4;font-size:12px;font-weight:700;background:rgba(0,0,0,.6);padding:4px 10px;border-radius:5px}
.gal-nav button{position:absolute;top:calc(39% - 22px);width:44px;height:44px;z-index:4;font-size:26px;line-height:1;background:rgba(0,0,0,.5);border-radius:5px;display:grid;place-items:center}
.gal-nav #galPrev{left:8px}.gal-nav #galNext{right:8px}
.gal-prog{z-index:4}.gal-thumbs{z-index:4}
.price-block{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tax{opacity:.7;font-size:12px}
.lbl-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:-10px}
.sizes.shake{animation:shake .32s var(--ease-standard)}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-4px)}}
.size{border:1px solid #363636}
.size[aria-pressed="true"]{border-color:#fff}
.add{display:flex;align-items:center;justify-content:center;gap:10px}
.add.is-loading::after{content:'';width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.add.is-done{animation:addpop .4s var(--ease-standard)}
@keyframes addpop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
.add#notifyBtn,.buybar #bbNotify{background:transparent;color:#fff;border:1.5px solid #fff}
.soldout-note{font-size:14px;padding:12px 14px;border:1px solid #363636;border-radius:5px}
.pin-form label,.notify-form label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.pin-row{display:flex;gap:8px}
.pin-row input{flex:1;min-width:0;height:48px;font-size:16px;background:#0d0d0d;border:1px solid #3a3a3a;border-radius:5px;color:#fff;padding:0 14px}
.pin-btn{height:48px;padding:0 20px;background:#fff;color:#0d0d0d;border-radius:5px;font-weight:700}
.pin-msg{font-size:12px;opacity:.85;margin-top:8px;min-height:18px;line-height:1.5}
.pin-msg.ok{opacity:1}
.pin-msg.bad,.fmsg.bad{color:var(--ember);font-weight:700;opacity:1}
input[aria-invalid="true"]{border-color:var(--ember)!important}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;list-style:none;padding:0;margin:0}
.trust-row li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12px;font-weight:700;padding:12px 6px;border:1px solid #2b2b2b;border-radius:5px}
.acc-p{margin-top:12px;font-size:14px;opacity:.85}
.also-h{margin-top:clamp(40px,8cqw,64px)}
.nf{text-align:center;padding:clamp(30px,10cqw,60px) 6px 10px}
.nf-code{font-size:clamp(80px,34cqw,160px);color:var(--ember);line-height:.9}
.nf h1{font-size:clamp(26px,8cqw,40px);margin:10px 0 12px}
.nf p{opacity:.85;max-width:34ch;margin:0 auto 22px}
.nf .also-h{text-align:left}
/* ---- sticky buy bar ---- */
.buybar{position:fixed;z-index:50;bottom:0;left:var(--col-left,max(0px,calc((100vw - 480px)/2)));width:min(480px,100%);display:flex;align-items:center;gap:14px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#000;border-top:1px solid #2b2b2b;animation:slideup var(--dur-base) var(--ease-enter)}
.bb-price{display:flex;flex-direction:column;line-height:1.15}
.bb-price b{font-size:20px}.bb-price small{opacity:.7;font-size:12px}
.buybar .add{flex:1;height:52px}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
body.overlay-open .buybar{display:none}
body.has-buybar #pdp{padding-bottom:88px}
body.has-buybar .toast{bottom:92px}
/* ---- toast with action ---- */
.toast{display:flex;align-items:center;gap:14px;max-width:min(92vw,440px)}
.toast.show{pointer-events:auto}
.t-act{font-weight:800;text-decoration:underline;min-height:44px;padding:0 4px;color:#0d0d0d}
/* ---- size guide sheet + zoom ---- */
.modal.sheet{top:auto;bottom:0;left:var(--col-left,max(0px,calc((100vw - 480px)/2)));width:min(480px,100%);max-height:86dvh;transform:translateY(100%);border-radius:5px 5px 0 0;transition:transform var(--dur-base) var(--ease-enter),opacity var(--dur-base)}
.modal.sheet.open{transform:none}
.sheet-body{padding:30px 20px calc(24px + env(safe-area-inset-bottom))}
.sheet-sub,.sheet-tip{font-size:14px;opacity:.85;margin:10px 0}
.sheet-body table{margin:12px 0}
.modal.zoom{left:var(--col-left,max(0px,calc((100vw - 480px)/2)));top:0;transform:none;width:min(480px,100%);height:100dvh;max-height:100dvh;border-radius:0;background:#000;overflow:hidden;display:flex;flex-direction:column}
.modal.zoom.open{transform:none}
.zoom-stage{flex:1;overflow:auto;display:grid;place-items:center;cursor:zoom-in}
.zoom-stage img{width:100%;height:auto;max-height:100%;object-fit:contain;transition:width var(--dur-base) var(--ease-standard)}
.zoom-stage.zoomed{place-items:start;cursor:zoom-out}
.zoom-stage.zoomed img{width:220%;max-height:none}
.zoom-hint{text-align:center;font-size:12px;opacity:.7;padding:10px}
/* ---- cart ---- */
.cart-empty{padding:26px 0}
.cart-empty h4{font-size:26px;margin-bottom:6px}
.cart-empty p{opacity:.85}
.empty-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 22px}
.ep{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700}
.ep small{display:block;opacity:.7;font-weight:500}
.ep-img{display:block;aspect-ratio:1/1.1;border-radius:5px;overflow:hidden;position:relative;background:var(--panel)}
.ep-img img{width:100%;height:100%;object-fit:cover}.ep-img img.mock{object-fit:contain}
.cname{font-weight:700;font-size:14px}
.cthumb{display:block}
.fine{font-size:12px;opacity:.75;line-height:1.5;margin:0}
/* ---- checkout ---- */
.co-body fieldset{border:0;padding:0;margin:0 0 20px;display:grid;gap:14px;min-width:0}
.co-body legend{font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ember);margin-bottom:12px;padding:0}
.co-body .field label{font-size:13px;font-weight:700}
.co-body .field input{height:48px;font-size:16px;border:1px solid #3a3a3a;background:#0d0d0d}
.fmsg{font-size:12px;min-height:16px;opacity:.7}
.opt-in{display:flex;gap:12px;align-items:flex-start;padding:6px 0 14px;font-size:14px}
.opt-in input{width:24px;height:24px;flex:none;margin-top:1px;accent-color:#fff}
.opt-in small{display:block;opacity:.7;font-size:12px;margin-top:2px}
.co-pay{position:sticky;bottom:-1px;background:#0d0d0d;padding:12px 0 4px;margin-top:6px;border-top:1px solid #2b2b2b;display:grid;gap:10px}
.co-pay .btn{min-height:56px}
.co-summary{border:1px solid #2b2b2b;border-radius:5px;padding:0 14px;margin-bottom:20px}
.co-summary summary{display:flex;justify-content:space-between;gap:12px;font-size:14px;cursor:pointer;list-style:none}
.co-summary summary::after{content:none}
.co-summary ul{list-style:none;padding:0 0 10px;margin:0}
.co-summary li,.co-lines li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:6px 0}
.btn.is-loading{opacity:.85;pointer-events:none}
.btn.is-loading .circ{animation:spin .7s linear infinite}
.success .order-no{font-size:16px}
.success .cod-remind{background:var(--panel);padding:10px 14px;border-radius:5px;font-size:14px}
.co-lines{list-style:none;padding:0;margin:6px 0 12px;width:100%;border-top:1px solid #2b2b2b}
.co-lines .total{border-top:1px solid #2b2b2b;margin-top:6px;padding-top:10px;font-weight:800}
.success{align-items:stretch;text-align:left}
.success .big{align-self:center}
.success h3{text-align:center}
.success .pill-btn{align-self:center}
#coTitle:focus{outline:none}
/* ---- fabric carousel arrows (alternative to dragging) ---- */
.fab-nav{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:4}
.fab-nav button{width:44px;height:44px;font-size:26px;line-height:1;background:rgba(0,0,0,.55);border:1px solid #3a3a3a;border-radius:5px;display:grid;place-items:center}
.fab-nav button:disabled{opacity:.3}
.fab-dots{top:22px}
/* ---- motion: reveal, page-in, logo wiggle ---- */
.rv-js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease-enter),transform var(--dur-slow) var(--ease-enter)}
.rv-js [data-reveal].in{opacity:1;transform:none}
.page-in{animation:pagein var(--dur-slow) var(--ease-enter)}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.brand-lockup img.wiggle{animation:wiggle .6s var(--ease-standard)}
@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.1)}55%{transform:rotate(9deg) scale(1.1)}100%{transform:rotate(0)}}
/* ---- reduced motion: keep feedback, drop movement ---- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.toast .t-msg{white-space:nowrap}
.toast{padding:6px 14px}
html{scrollbar-gutter:stable}
.footer .ft-logo{display:grid;place-items:center;min-width:44px;min-height:44px;margin-left:-4px}
.footer .ft-links a{padding:14px 0}
.crumbs{padding:6px 0 4px;gap:2px}
.crumbs button{width:44px;height:44px;margin-left:-10px}
.crumbs a,.crumbs span{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
/* high-quality film grain: crisp (no blur), 3 octaves, sparse light specks, big tile so no visible repeat */
:root{--grain:url("data:image/svg+xml;utf8,")}
html,body,.phone,.header,.h-text,.custom-card,.footer,.drawer,.modal,.x,.topbar{background-size:512px 512px}
/* real bitmap film grain (gaussian, two scales, seamless tile). 512px source shown at 256px so it stays crisp on hi-dpi */
:root{--grain:url("assets/grain.png")}
html,body,.phone,.header,.h-text,.custom-card,.footer,.drawer,.modal,.x,.topbar{background-size:256px 256px}
/* ===== PDP v2: full-bleed photo, floating header, size picker replaces the CTA row ===== */
body.pdp-mode #pdp{margin-top:calc(var(--hdr-h,63px) * -1)}
body.pdp-mode .header{background:transparent;background-image:none;border-bottom-color:transparent;transition:transform .32s cubic-bezier(.2,.8,.2,1),background-color .25s,border-color .25s}
body.pdp-mode.pdp-solid .header{background:#000;border-bottom-color:#2b2b2b}
body.pdp-mode:not(.pdp-solid) .header .brand-lockup img{filter:brightness(0) invert(1)}
body.pdp-mode:not(.pdp-solid) .header .brand-lockup .brand{color:#fff}
body.pdp-mode:not(.pdp-solid) .header .cart-btn{border-color:rgba(255,255,255,.35)}
#pdp .gal{margin:0 calc(var(--pad) * -1);height:clamp(440px,calc(100svh - 210px),780px);aspect-ratio:auto;border-radius:0;box-shadow:none;outline:0}
#pdp .gal::before{content:'';position:absolute;inset:0 0 auto 0;height:130px;background:linear-gradient(rgba(0,0,0,.45),transparent);z-index:2;pointer-events:none}
#pdp .gal-track{inset:0}
#pdp .gal-prog{top:auto;bottom:30px;left:20px;right:auto;display:flex;gap:7px}
#pdp .gal-prog i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .2s,transform .2s}
#pdp .gal-prog i.on{background:#fff;transform:scale(1.25)}
#pdp .gal-nav button{top:auto;bottom:16px;width:52px;height:52px;font-size:30px;background:rgba(17,17,17,.78)}
#pdp .gal-nav #galPrev{left:auto;right:76px}
#pdp .gal-nav #galNext{right:16px}
#pdp .info{position:relative;padding-top:30px;gap:14px}
.pdp-handle{position:absolute;top:0;left:calc(50% - 36px);width:72px;height:34px;display:grid;place-items:center;color:rgba(255,255,255,.7)}
.pdp-handle svg{transition:transform .25s}
.pdp-handle:hover svg{transform:translateY(-2px)}
.pi-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pi-row h1{flex:1 1 auto;font-size:clamp(24px,7cqw,31px);line-height:1.08}
.pi-row .cat-pill{flex:none;white-space:nowrap;align-self:center}
.pi-price{align-items:flex-end}
.pi-price .price-block{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cta-row{position:relative}
.size-row{display:none;flex:1;gap:8px;align-items:stretch}
.size-row .size{flex:1;height:54px;padding:0}
.size-row .size:active{background:#fff;color:#000}
.size-x{flex:none;width:44px;border:1px solid #363636;border-radius:5px;display:grid;place-items:center;font-size:16px;opacity:.85}
.cta-row.picking>.add,.cta-row.picking>.wish{display:none}
.cta-row.picking .size-row,.buybar.picking .size-row{display:flex;animation:sizeIn .34s var(--ease-enter,cubic-bezier(.22,1,.36,1))}
.buybar.picking .bb-price,.buybar.picking>.add{display:none}
.buybar .size-row .size{height:48px}
@keyframes sizeIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cta-row.picking .size-row,.buybar.picking .size-row{animation:none}}
#pdp .pdp-grid{grid-template-columns:minmax(0,1fr)}
#pdp .info,#pdp .gal{min-width:0}
.pi-row h1{min-width:0;overflow-wrap:anywhere}
#pdp .gal{height:clamp(420px,calc(100svh - 262px),760px)}
.pi-row h1{overflow-wrap:break-word;flex:1 1 55%}
.pi-row .cat-pill{flex:0 1 auto;white-space:normal;text-align:center;font-size:11px;padding:6px 10px;line-height:1.25}
/* photo stays pinned; the info panel (and all below it) slides over it */
#pdp .gal{position:sticky;top:0;z-index:0}
#pdp .gal::after{content:'';position:absolute;inset:0;background:#000;opacity:calc(var(--dim,0) * .6);z-index:2;pointer-events:none}
#pdp .info{z-index:2;margin:0 calc(var(--pad) * -1);padding:30px var(--pad) 28px;background-color:#0d0d0d;background-image:var(--grain);background-size:256px 256px;border-radius:5px 5px 0 0;box-shadow:0 -14px 30px rgba(0,0,0,.45)}
#pdp .pdp-grid{align-items:start}
/* black fills: size buttons + accordion box */
.size-row .size,.size-x,.acc{background-color:#000;background-image:none}
.size-row .size:hover:not(:disabled){background-color:#161616}
.size-row .size:active{background-color:#fff}
.size-row .size,.size-x,.acc{background-color:#131313}
.size-row .size:hover:not(:disabled){background-color:#1c1c1c}
.size-row .size{background-color:var(--dark,#fff);color:#111;border-color:transparent}
.size-row .size:hover:not(:disabled){background-color:#e9e9e9;color:#111}
.size-row .size:active{background-color:#d6d6d6;color:#111}
/* "You might also like" / "Recently viewed": full-width pure black */
.also-sec{background:#000;background-image:none;margin:0 calc(var(--pad) * -1);padding:36px var(--pad) 32px;position:relative;z-index:2}
body.pdp-mode #pdp,body.has-buybar.pdp-mode #pdp{padding-bottom:0}
body.pdp-mode .also-sec:last-child{padding-bottom:calc(36px + 88px)}
/* ===== PDP motion (kept to a few moments: arrival, size pick, add-to-cart, parallax) ===== */
/* arrival: photo settles, panel rises, rows follow */
@keyframes pdpSettle{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes pdpRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes handleNudge{0%,100%{transform:translateY(0)}35%{transform:translateY(-5px)}65%{transform:translateY(0)}80%{transform:translateY(-3px)}}
/* pressing the handle lifts the chevron toward the details; the button itself never shifts sideways */
.pdp-handle:active,button.pdp-handle:not(:disabled):active{transform:none}
.pdp-handle:active svg{transform:translateY(-4px);color:#fff}
.pdp-handle svg{transition:transform .18s cubic-bezier(.2,.8,.2,1),color .18s}
#pdp:not([hidden]) .gal-slide:first-child .gal-hit img{animation:pdpSettle .7s var(--ease-enter) both}
#pdp:not([hidden]) .info>*:not(.pdp-handle){animation:pdpRise .5s var(--ease-enter) both}
#pdp .info>.pi-row:nth-of-type(1){animation-delay:.16s}
#pdp .info>.pi-price{animation-delay:.22s}
#pdp .info>.cta-row{animation-delay:.3s}
#pdp .info>.trust-row{animation:none}
#pdp:not([hidden]) .pdp-handle{animation:handleNudge 1.1s var(--ease-standard) .9s 2}
/* photo drifts and zooms a touch while the panel slides over it (transform only) */
#pdp .gal-track{transform:translateY(calc(var(--dim,0) * -34px)) scale(calc(1 + var(--dim,0) * .05));will-change:transform}
/* trust row eases in when scrolled to */
.trust-row.rise li{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease-enter),transform .45s var(--ease-enter)}
.trust-row.rise.in li{opacity:1;transform:none}
.trust-row.rise.in li:nth-child(2){transition-delay:.08s}
.trust-row.rise.in li:nth-child(3){transition-delay:.16s}
/* size choices: staggered arrival, confirmed tap */
.cta-row.picking .size-row>*,.buybar.picking .size-row>*{animation:sizeChip .34s var(--ease-enter) both}
.size-row>*:nth-child(2){animation-delay:.04s!important}.size-row>*:nth-child(3){animation-delay:.08s!important}
.size-row>*:nth-child(4){animation-delay:.12s!important}.size-row>*:nth-child(5){animation-delay:.16s!important}.size-row>*:nth-child(6){animation-delay:.2s!important}
@keyframes sizeChip{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
.size-row .size.picked{background-color:#fff;transform:scale(.94);box-shadow:0 0 0 3px rgba(255,255,255,.28);transition:transform .12s,box-shadow .17s}
/* add to cart: one sheen on arrival, animated tick on success */
#pdpAdd{position:relative;overflow:hidden}
#pdpAdd.sheen::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(0,0,0,.09) 50%,transparent 65%);transform:translateX(-120%);animation:sheen .9s var(--ease-standard) forwards;pointer-events:none}
@keyframes sheen{to{transform:translateX(120%)}}
.add .lbl-txt{display:inline-flex;align-items:center;gap:8px;justify-content:center}
.add .ck path{stroke-dasharray:24;stroke-dashoffset:24;animation:tick .38s var(--ease-enter) .05s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.add.is-done{animation:addpop .45s var(--ease-standard)}
/* arrows and dots respond */
#pdp .gal-nav button{transition:transform .12s,background-color .2s}
#pdp .gal-nav button:active{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){
#pdp .gal-slide .gal-hit img,#pdp .info,#pdp .info>*,#pdp .pdp-handle,.cta-row.picking .size-row>*,.buybar.picking .size-row>*{animation:none!important}
#pdp .gal-track{transform:none}
.trust-row.rise li{opacity:1;transform:none;transition:none}
.add .ck path{animation:none;stroke-dashoffset:0}
}
.toast button,.toast .t-act,.toast a{white-space:nowrap}
/* ===== checkout v2 (PayU hosted) ===== */
.field select{background:#0d0d0d;border:1px solid #3a3a3a;border-radius:5px;padding:0 12px;height:48px;font:inherit;font-size:16px;color:var(--ink,#fff);appearance:auto}
.field select:focus{outline:2px solid #fff}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#d3492e}
.pay-note{font-size:14px;line-height:1.5;border:1px solid #363636;border-radius:5px;padding:14px 16px;background:#000;opacity:.95}
.success .big.warn{color:#d3492e}
.success .btn,.success .pill-btn{align-self:center}
.success .note{text-align:center;opacity:.7;font-size:13px}
.co-pay .note a,.success .note a,.success a{text-decoration:underline;text-underline-offset:3px}
.faq-list a,.acc-p a{text-decoration:underline;text-underline-offset:3px}
.ft-legal a{text-decoration:underline;text-underline-offset:3px;opacity:.9;display:inline-block;min-height:24px}
.ft-links a[data-track]{cursor:pointer}
.co-body fieldset{grid-template-columns:minmax(0,1fr)}
.co-body .field{min-width:0}
.field select,.field input{width:100%;min-width:0}
.size-table table{width:100%;border-collapse:collapse}
.size-table th,.size-table td{padding:10px 6px;text-align:center;font-size:14px;border-bottom:1px solid #2b2b2b;white-space:nowrap}
.size-table th{font-size:12px;opacity:.7;font-weight:600}
.size-table .size-note{font-size:12px;opacity:.65;margin-top:10px}
/* ===== customer messages ===== */
.voices{padding-top:44px}
.voices-sub{font-size:14px;opacity:.7;margin:-4px var(--pad) 18px}
.voice-track{list-style:none;margin:0;padding:2px var(--pad) 14px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.voice-track::-webkit-scrollbar{display:none}
.voice-track li{flex:0 0 78%;scroll-snap-align:start;border:1px solid #2b2b2b;border-radius:5px;background:#000;padding:20px 18px;display:flex;align-items:flex-start;min-height:132px}
.voice-track q{font-size:16px;line-height:1.5;quotes:none}
.voice-track q::before{content:'\201C';color:#d3492e;font:800 30px/0 'Archivo',sans-serif;margin-right:4px;vertical-align:-10px}
.voice-track:focus-visible{outline:2px solid #d3492e;outline-offset:2px}
.voices-sub{margin-left:0;margin-right:0}
/* ===== store page ===== */
#store{background:#010001;background-image:none;min-height:70vh;padding-bottom:var(--section)}
#store .store-sec{padding-top:calc(var(--section) * .55)}
.store-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 14px;font-family:'Archivo',sans-serif;font-weight:700;font-stretch:112%;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ember)}
.store-back:hover{text-decoration:underline;text-underline-offset:5px}
#store .shop-head h1{font-size:clamp(34px,11cqw,60px);line-height:.95;color:var(--ember)}
.store-sub{font-size:14px;opacity:.7;margin:-6px 0 22px;max-width:34ch}
#seeAll{margin-top:22px}
/* ===== shutter transition (product pages): a roller door drops from the top, then lifts ===== */
.shutter{position:fixed;z-index:9500;top:0;bottom:0;left:var(--col-left,0);width:min(480px,100vw);transform:translateY(-101%);display:flex;align-items:center;justify-content:center;pointer-events:all;will-change:transform;
background-color:#0d0d0d;
background-image:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,0) 14%,rgba(0,0,0,0) 86%,rgba(0,0,0,.4)),repeating-linear-gradient(to bottom,rgba(255,255,255,.055) 0 1px,rgba(0,0,0,.28) 1px 3px,transparent 3px 34px),var(--grain);
background-size:100% 100%,100% 100%,320px 320px;
border-bottom:6px solid var(--ember);box-shadow:0 14px 34px rgba(0,0,0,.7)}
.shutter[hidden]{display:none}
.shutter img{width:64px;height:64px;opacity:.95}
/* ===== transparent header at the very top; menu icon morphs into an X ===== */
.header::before{content:'';position:absolute;inset:0 0 -26px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,0));opacity:0;transition:opacity .25s}
.header{transition:transform .32s cubic-bezier(.2,.8,.2,1),background-color .25s,border-color .25s}
body.at-top:not(.pdp-mode):not(.menu-open) .header:not(:has(#searchBar:not([hidden]))){background-color:transparent;border-bottom-color:transparent}
body.at-top:not(.pdp-mode):not(.menu-open) .header:not(:has(#searchBar:not([hidden])))::before{opacity:1}
#home{margin-top:calc(var(--hdr-h,63px) * -1)}
#home .hero{padding-top:0;height:calc(90svh + var(--hdr-h,63px))}
.menu-btn .burger path{transform-box:fill-box;transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
.menu-btn[aria-expanded="true"] .b1{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .b2{opacity:0;transform:scaleX(.2)}
.menu-btn[aria-expanded="true"] .b3{transform:translateY(-5px) rotate(-45deg)}
body.menu-open .scrim{top:var(--hdr-h,63px)}
@media (prefers-reduced-motion:reduce){.header::before,.menu-btn .burger path{transition:none}}
/* footer analytics notice */
.an-off{background:none;border:0;padding:0;margin:0;color:inherit;text-decoration:underline;text-underline-offset:3px;font:inherit;cursor:pointer;min-height:44px}
/* ===== checkout: coupon + PIN autofill (follows the site's colour rules: white / ember text on dark, teal with deep-ink text) ===== */
.co-coupon{margin:-6px 0 20px}
.co-coupon-toggle{min-height:44px;padding:0;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;color:#fff}
.co-coupon-box{padding:2px 0 8px}
.co-coupon-box label{display:block;font-size:13px;margin:0 0 6px}
.co-coupon-row{display:flex;gap:8px}
.co-coupon-row input{flex:1;min-width:0;height:48px;font-size:16px;background:#0d0d0d;border:1px solid #3a3a3a;border-radius:5px;color:#fff;padding:0 14px;text-transform:uppercase;letter-spacing:.06em}
.co-coupon-row input::placeholder{text-transform:none;letter-spacing:0}
.co-offers{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.co-offers:empty{display:none}
.co-offers .fmsg,.pin-areas .fmsg{flex-basis:100%;margin:0}
.co-coupon-ok{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#3f9b8e;color:#1e1e1c;border-radius:5px;padding:2px 14px;font-size:14px;font-weight:700}
.co-coupon-ok .link-btn{color:#1e1e1c}
.pin-areas{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 14px}
.pin-areas:empty{display:none}
.fmsg.ok{opacity:1;font-weight:700;color:#fff}
.co-summary li.disc,.co-lines li.disc{font-weight:700}
/* ---- tracking page (order status window) */
.trk .trk-note{max-width:34ch;color:#d4d4d4;margin:0}
.trk-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;margin:6px 0 2px;padding:0;position:relative}
.trk-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:12px;color:#8a8a8a}
.trk-steps li::before{content:'';position:absolute;top:15px;right:50%;width:100%;height:2px;background:var(--line);z-index:0}
.trk-steps li:first-child::before{display:none}
.trk-steps li.done::before,.trk-steps li.now::before{background:var(--ember)}
.trk-dot{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);background:#0d0d0d;font-size:13px;font-weight:700;color:#8a8a8a}
.trk-steps li.done .trk-dot{background:var(--ember);border-color:var(--ember);color:#fff}
.trk-steps li.now .trk-dot{border-color:var(--ember);color:#fff;box-shadow:0 0 0 4px rgb(211 73 46 / .22)}
.trk-steps li.now.warn .trk-dot{border-color:#e0a13a;box-shadow:0 0 0 4px rgb(224 161 58 / .22)}
.trk-steps li.done,.trk-steps li.now{color:#fff}
.trk-l{display:flex;flex-direction:column;gap:2px;line-height:1.25}.trk-l b{font-weight:700}.trk-l small{font-size:11px;color:#a3a3a3}
.trk-eta,.trk-to{margin:0;font-size:14px;color:#d4d4d4}
.trk-card{width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.trk-card small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a3a3a3}
.trk-card b{font-size:16px}
.trk-awb{display:flex;align-items:center;gap:10px;font-size:14px;color:#d4d4d4;word-break:break-all}
.trk-link{margin-top:6px;color:#fff;text-underline-offset:3px;font-size:14px}
@media (prefers-reduced-motion:no-preference){.trk-steps li.now .trk-dot{animation:trkPulse 2.2s ease-in-out infinite}}
@keyframes trkPulse{50%{box-shadow:0 0 0 8px rgb(211 73 46 / 0)}}