/* Layout: dark storefront; every color derives from 4 tokens the admin can change (accent, background, surface, text) */
:root{
  --green:#00D9E8; --bg:#080F13; --surface:#17272D; --text:#E8F2F4; --on-accent:#080F13;
  --raise:color-mix(in srgb,var(--surface) 94%,#fff);
  --line:color-mix(in srgb,var(--text) 11%,var(--bg));
  --muted:color-mix(in srgb,var(--text) 58%,var(--bg));
  --faint:color-mix(in srgb,var(--text) 34%,var(--bg));
  --soft:color-mix(in srgb,var(--text) 80%,var(--bg));
  --green-deep:color-mix(in srgb,var(--green) 32%,#000);
  --green-tint:color-mix(in srgb,var(--green) 14%,var(--bg));
  --glow:color-mix(in srgb,var(--green) 45%,transparent);
  --glow-soft:color-mix(in srgb,var(--green) 22%,transparent);
  --r-sm:6px; --r-md:10px; --r-lg:16px; --gcols:4; --logo-h:24px; --base:16px;
  --warn-bg:#241c08; --warn-line:#4a3a10; --warn-text:#e8c76a;
  --display:"Archivo",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--text);font:var(--base)/1.6 var(--body)}
body.nostick header{position:relative;top:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.1;letter-spacing:-.01em}
.label{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.muted{color:var(--muted)} .small{font-size:14px} .mono{font-family:var(--mono)}

.ruo-bar{background:var(--green-deep);color:color-mix(in srgb,#fff 88%,var(--green));font:500 12px/1.4 var(--mono);letter-spacing:.03em;text-align:center}
.ruo-bar .wrap{padding-block:9px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap}
.logo img{height:var(--logo-h);width:auto;display:block}
nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-items:center}
/* tabs: green glow on hover, matching the product images */
nav a{font-weight:500;color:var(--muted);padding:7px 14px;border-radius:999px;border:1px solid transparent;transition:color .3s ease,border-color .3s ease,box-shadow .3s ease,background-color .3s ease,text-shadow .3s ease}
nav a:hover,nav a:focus-visible{color:var(--text);border-color:var(--glow);background:var(--green-tint);box-shadow:0 0 0 1px var(--glow-soft),0 0 22px -4px var(--glow);text-shadow:0 0 14px var(--glow)}
nav a.on{color:var(--text);border-color:var(--line)}
.cartlink{display:flex;align-items:center;gap:8px;border-color:var(--line)!important;color:var(--text)!important;margin-left:6px}
.cartlink:hover{border-color:var(--glow)!important}
.cartlink b{background:var(--green);color:var(--on-accent);font:600 12px/1 var(--mono);border-radius:999px;padding:4px 7px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--green);border-radius:var(--r-sm);padding:12px 22px;font-weight:600;background:var(--green);color:var(--on-accent);transition:filter .2s,border-color .2s,box-shadow .3s}
.btn:hover{filter:brightness(1.1);box-shadow:0 0 22px -6px var(--glow)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none;box-shadow:none}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--green);filter:none}
.btn.small{padding:8px 14px;font-size:14px}

main{min-height:55vh}
section{padding-block:64px}

.hero{background:radial-gradient(900px 420px at 88% -10%,var(--glow-soft),transparent 70%),var(--bg);border-bottom:1px solid var(--line);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.hero-in.solo{grid-template-columns:1fr}
.hero-in.img-left{grid-template-columns:1fr 1.15fr}
.hero-in.img-left .hero-media{order:-1}
.hero.noglow{background:var(--bg)}
.hero-in.solo .hero-copy{max-width:760px}
.hero h1{font-size:clamp(36px,5.6vw,64px);font-weight:800;margin:16px 0 18px}
.hero p{color:var(--muted);font-size:18px;max-width:52ch;margin:0 0 28px;white-space:pre-line}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
/* cover image: soft glow, gentle parallax while scrolling, zoom + brighter glow on hover */
.hero-media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface);
  box-shadow:0 0 0 1px var(--glow-soft),0 30px 80px -40px var(--glow),0 0 60px -30px var(--glow);
  transform:translate3d(0,var(--py,0px),0);transition:border-color .4s ease,box-shadow .4s ease;will-change:transform}
.hero-media img{display:block;width:100%;max-height:560px;object-fit:cover;transform:scale(var(--ps,1));transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.hero-media:hover{border-color:var(--green);box-shadow:0 0 0 1px var(--glow),0 0 40px -6px var(--glow),0 30px 80px -36px var(--glow)}
.hero-media:hover img{transform:scale(calc(var(--ps,1) * 1.05));filter:brightness(1.06)}
.hero-media.enter{opacity:0;translate:0 26px;scale:.98}
.hero-media.enter.in{opacity:1;translate:0 0;scale:1;transition:opacity 1s ease,translate 1s cubic-bezier(.2,.7,.2,1),scale 1s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .4s ease}

.facts{border-bottom:1px solid var(--line)}
.facts-in{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:24px;padding-block:26px}
.facts strong{display:block;font-family:var(--display);font-size:16px}
.facts span{color:var(--muted);font-size:14px}

.sechead{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sechead h2{font-size:clamp(26px,3.4vw,38px);margin-top:10px}

.grid{display:grid;grid-template-columns:repeat(var(--gcols),minmax(0,1fr));gap:22px}
.card{display:flex;flex-direction:column;gap:10px;min-width:0}
.card-link{display:flex;flex-direction:column;gap:10px;flex:1}
.cardbtn{width:100%;margin-top:auto}
.thumb{aspect-ratio:1;max-width:100%;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;color:var(--faint);font:500 11px var(--mono);letter-spacing:.08em;transition:border-color .35s ease,box-shadow .35s ease}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.thumb:hover,.card:hover .thumb,.gallery .thumbs button:hover{border-color:var(--green);box-shadow:0 0 0 1px var(--glow-soft),0 0 28px -4px var(--glow),0 18px 40px -22px var(--glow)}
.thumb:hover img,.card:hover .thumb img{transform:scale(1.06);filter:brightness(1.06)}
.sku{font:400 11px var(--mono);color:var(--muted);letter-spacing:.06em}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card h3{font:600 16px/1.3 var(--body)}
.price{font:500 15px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.card .sub{font-size:13px;color:var(--muted)}
.badge{display:inline-block;align-self:flex-start;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--green);color:var(--on-accent)}
.thumb{position:relative}
.thumb .badge{position:absolute;top:10px;left:10px;z-index:1}
.ruo-tag{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.card.placeholder h3,.card.placeholder .price,.card.placeholder .sub{color:var(--faint)}
.pill{display:inline-block;font:500 11px var(--mono);padding:3px 8px;border-radius:999px;background:var(--green-tint);color:var(--green)}
.pill.out{background:var(--raise);color:var(--muted)}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);border-radius:999px;padding:6px 14px;background:var(--surface);color:var(--text);font-size:14px;transition:border-color .3s,box-shadow .3s}
.chip:hover{border-color:var(--glow);box-shadow:0 0 16px -6px var(--glow)}
.chip.on{background:var(--green);border-color:var(--green);color:var(--on-accent)}
.tools{display:flex;gap:10px;flex-wrap:wrap}
input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;color:var(--text);font:inherit;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none}

.crumbs{font:400 13px var(--mono);color:var(--muted);margin-bottom:20px}
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:56px}
.gallery{display:grid;gap:12px;min-width:0}
.gallery .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.gallery .thumbs button{padding:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);aspect-ratio:1;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease}
.gallery .thumbs button.on{border-color:var(--green)}
.gallery .thumbs img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.gallery .thumbs button:hover img{transform:scale(1.08)}
.pinfo{display:flex;flex-direction:column;gap:18px;min-width:0}
.pinfo h1{font-size:clamp(28px,3.6vw,42px)}
.pinfo .price{font-size:24px}
.ruo-box{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-text);border-radius:var(--r-md);padding:14px 16px;font-size:14px}
.ruo-box strong{display:block;margin-bottom:2px}
.qty{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.qty button{background:var(--raise);border:0;width:42px;height:46px;font-size:18px;color:var(--text)}
.qty output{width:48px;display:grid;place-items:center;font-family:var(--mono)}
.buyrow{display:flex;gap:12px;flex-wrap:wrap}
.buyrow .btn{flex:1}
.specs{width:100%;border-collapse:collapse;font-size:14px}
.specs td{border-top:1px solid var(--line);padding:11px 0;vertical-align:top}
.specs td:first-child{color:var(--muted);width:40%}
.desc{white-space:pre-line;color:var(--soft)}
.coa-link{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:14px 16px;transition:border-color .3s,box-shadow .3s}
a.coa-link:hover{border-color:var(--glow);box-shadow:0 0 22px -8px var(--glow)}
.coa-link b{font-family:var(--display)}

.cartwrap{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.line{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;padding-block:16px;border-bottom:1px solid var(--line)}
.line .rm{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:13px;padding:0}
.line .qty button{height:34px;width:32px}
.line .qty output{width:36px}
.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:14px}
.summary .row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.summary .total{border-top:1px solid var(--line);padding-top:14px;font-weight:600;font-size:18px}
.attest{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--soft)}
.attest input{margin-top:3px;accent-color:var(--green)}
.empty{border:1px dashed var(--line);border-radius:var(--r-md);padding:48px 24px;text-align:center;color:var(--muted)}
.empty .btn{margin-top:18px}
.note{font-size:14px;color:var(--green);margin:0}

/* custom pages */
.prose{max-width:72ch}
.prose h1{font-size:clamp(32px,4.6vw,50px);margin:12px 0 22px}
.sec{margin-top:30px}
.sec:first-of-type{margin-top:0}
.sec h2{font-size:22px;margin-bottom:10px}
.sec p,.sec li{color:var(--soft)}
.sec ul{padding-left:20px}
.sec-img{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);transition:border-color .35s ease,box-shadow .35s ease}
.sec-img img{display:block;width:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sec-img:hover{border-color:var(--green);box-shadow:0 0 0 1px var(--glow-soft),0 0 30px -6px var(--glow)}
.sec-img:hover img{transform:scale(1.03)}
.sec-img figcaption{padding:10px 14px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding-block:18px}
summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--green);font-family:var(--mono)}
details[open] summary::after{content:"−"}
details p{margin:10px 0 0}

.home-extra{border-top:1px solid var(--line)}
.home-extra .sec{max-width:72ch}
.home-extra .sec-img{max-width:none}
.related{margin-top:64px}
/* customer accounts */
.acct{max-width:460px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:16px}
.acct.wide{max-width:720px}
.acct h1{font-size:30px}
.acct p{margin:0;color:var(--muted)}
.acct form{display:grid;gap:12px}
.acct label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.acct label.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--soft)}
.acct label.check input{margin-top:3px;accent-color:var(--green)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:var(--r-sm);padding:11px 16px;font-weight:600;transition:box-shadow .3s}
.gbtn:hover{box-shadow:0 0 22px -6px var(--glow)}
.gbtn:disabled{opacity:.5;cursor:not-allowed}
.or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.linkish{background:none;border:0;padding:0;color:var(--green);text-decoration:underline;font-size:14px}
.acct .err{color:#ef6b5e;font-size:14px;margin:0}
.acct .ok{color:var(--green);font-size:14px;margin:0}
.who{display:flex;align-items:center;gap:14px}
.who img,.who .avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--green-tint);display:grid;place-items:center;font:700 20px var(--display);color:var(--green)}
.addr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.addr .full{grid-column:1/-1}
.shipnote{display:flex;gap:10px;align-items:flex-start;background:var(--green-tint);border:1px solid color-mix(in srgb,var(--green) 30%,var(--line));border-radius:var(--r-md);padding:12px 14px;font-size:14px;color:var(--soft)}
.shipnote b{color:var(--text)}
.shipnote svg{flex:none;margin-top:2px;color:var(--green)}
/* checkout */
.co{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start}
.co-main{display:flex;flex-direction:column;gap:28px;min-width:0}
.co-block{display:flex;flex-direction:column;gap:12px}
.co-block h2{font-size:20px;display:flex;align-items:center;gap:10px}
.co-block h2 .n{width:26px;height:26px;border-radius:50%;background:var(--green-tint);color:var(--green);font:600 13px var(--mono);display:grid;place-items:center}
.co-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-fields .full{grid-column:1/-1}
.co label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.co label.attest{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--soft)}
.co label.attest input{width:auto;margin-top:3px}
.co input,.co select,.co textarea{width:100%}
.co input:invalid:not(:placeholder-shown){border-color:#a3261b}
.pm-list{display:grid;gap:10px}
.pm{display:grid;grid-template-columns:auto 52px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:12px 14px;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.pm:hover{border-color:var(--glow);box-shadow:0 0 22px -10px var(--glow)}
.pm.on{border-color:var(--green);box-shadow:0 0 0 1px var(--glow-soft),0 0 26px -10px var(--glow)}
.pm input{accent-color:var(--green);width:auto}
.pm-icon{width:52px;height:52px;border-radius:var(--r-sm);background:var(--raise);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;font:700 20px var(--display);color:var(--green)}
.pm-icon img{width:100%;height:100%;object-fit:contain}
.pm-name{font-weight:600}
.pm-desc{font-size:13px;color:var(--muted)}
.pm-adj{font:500 12px var(--mono);color:var(--green);white-space:nowrap}
.pm.ship{grid-template-columns:auto 1fr auto}
.ship-h{display:block;margin:18px 0 10px;font-weight:600}
.ship-price{font:600 14px var(--mono);color:var(--text);white-space:nowrap}
.pm-detail{border:1px solid var(--line);border-radius:var(--r-md);padding:16px;background:var(--bg);display:grid;gap:12px}
.pm-detail p{margin:0;color:var(--soft);white-space:pre-line}
.pm-kv{display:grid;grid-template-columns:auto 1fr auto;gap:8px 12px;align-items:center;font-size:14px}
.pm-kv span{color:var(--muted)}
.pm-kv code{font:500 14px var(--mono);color:var(--text);word-break:break-all}
.copy{background:none;border:1px solid var(--line);color:var(--muted);border-radius:var(--r-sm);padding:4px 10px;font-size:12px}
.copy:hover{color:var(--text);border-color:var(--green)}
.amount{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.amount b{font:600 22px var(--mono)}
.drop{border:2px dashed var(--line);border-radius:var(--r-md);padding:26px 16px;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .3s,background .3s,box-shadow .3s;display:grid;gap:8px;justify-items:center}
.drop:hover,.drop.over{border-color:var(--green);background:var(--green-tint);box-shadow:0 0 26px -12px var(--glow)}
.drop svg{color:var(--green)}
.drop.has{border-style:solid;border-color:var(--green)}
.drop .file{display:flex;gap:12px;align-items:center;text-align:left}
.drop .file img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.co .err{color:#ef6b5e;font-size:14px;margin:0}
.co-sum{position:sticky;top:90px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:12px}
.co-sum .it{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;font-size:14px}
.co-sum .it .thumb{aspect-ratio:1;border-radius:var(--r-sm)}
.co-sum .row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums;font-size:14px}
.co-sum .row.total{border-top:1px solid var(--line);padding-top:12px;font-weight:600;font-size:18px}
.codebox{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.codebox label{font-size:13px;color:var(--muted)}
.coderow{display:flex;gap:8px}
.coderow input{flex:1;text-transform:uppercase;font-family:var(--mono)}
.codebox .ok{color:var(--green)}
.co-sum .ordno{font:500 12px var(--mono);color:var(--muted)}
.done{max-width:620px;margin:0 auto;text-align:center;display:grid;gap:14px;justify-items:center}
.done .check{width:64px;height:64px;border-radius:50%;background:var(--green-tint);display:grid;place-items:center;color:var(--green);box-shadow:0 0 40px -10px var(--glow)}
.done p{color:var(--muted);margin:0;white-space:pre-line}
.done .card2{width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;display:grid;gap:8px;font-size:14px}
@media (max-width:960px){.co{grid-template-columns:1fr}.co-sum{position:static}}
@media (max-width:560px){.co-fields{grid-template-columns:1fr}.pm{grid-template-columns:auto 44px 1fr}.pm.ship{grid-template-columns:auto 1fr auto}.pm-adj{grid-column:3}.pm-icon{width:44px;height:44px}}
.sending{position:fixed;inset:0;z-index:65;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px;text-align:center}
.sending div{display:grid;gap:12px;justify-items:center;max-width:420px}
.sending h2{font-size:24px}
.sending p{margin:0;color:var(--muted)}
.spin{width:44px;height:44px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--green);animation:spin .8s linear infinite;box-shadow:0 0 30px -8px var(--glow)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
.steps{list-style:none;margin:6px 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.steps li{display:grid;gap:4px;justify-items:center;text-align:center;font-size:13px;color:var(--faint);position:relative}
.steps li::before{content:"";position:absolute;top:8px;left:-50%;right:50%;height:2px;background:var(--line)}
.steps li:first-child::before{display:none}
.steps li.on::before{background:var(--green)}
.steps .dot{width:18px;height:18px;border-radius:50%;background:var(--line);position:relative;z-index:1}
.steps li.on .dot{background:var(--green)}
.steps li.cur .dot{box-shadow:0 0 0 5px var(--green-tint),0 0 22px -2px var(--glow)}
.steps li.on b{color:var(--text)}
.steps b{font-weight:600}
@media (max-width:560px){.steps{grid-template-columns:repeat(2,1fr);row-gap:16px}.steps li::before{display:none}}
.aff-modes{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.aff-modes button{background:none;border:0;color:var(--muted);padding:10px;font-weight:600}
.aff-modes button.on{background:var(--raise);color:var(--text);box-shadow:inset 0 -2px 0 var(--green)}
.acct .ok{color:var(--green);font-size:14px;margin:0}
.split{display:grid;gap:10px;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;background:var(--bg)}
.split-head{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.split-head b{color:var(--text);font:600 18px var(--mono)}
.split input[type=range]{width:100%;accent-color:var(--green);padding:0;border:0;background:none;height:24px}
.split-ex{font-size:13px;color:var(--muted)}
.lblx{font-size:14px;color:var(--muted)}
.hint{font-size:12px;color:var(--faint)}
.aff-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.aff .st{display:inline-block;font:600 11px var(--mono);padding:4px 10px;border-radius:999px}
.st-new{background:#2a2108;color:#f0c75e}.st-shipped,.st-approved,.st-paid{background:var(--green-tint);color:var(--green)}.st-cancelled,.st-void{background:#2a1210;color:#ef6b5e}
.aff-menu{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin:0;width:auto}
.aff-menu button{background:none;border:1px solid transparent;color:var(--muted);border-radius:999px;padding:7px 14px;font-weight:500;transition:color .3s,border-color .3s,box-shadow .3s}
.aff-menu button:hover{color:var(--text);border-color:var(--glow);box-shadow:0 0 18px -6px var(--glow)}
.aff-menu button.on{color:var(--text);border-color:var(--line);background:var(--raise)}
.aff-menu button:last-child{margin-left:auto}
.aff-body{display:grid;gap:16px}
.aff-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.aff-kpi{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;display:grid;gap:4px;background:var(--bg)}
.aff-kpi span{font-size:12px;color:var(--muted)}
.aff-kpi b{font:600 20px var(--mono)}
.aff-link{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;background:var(--bg)}
.aff-link code{word-break:break-all;font-size:13px}
.aff-table{display:grid;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.aff-row{display:grid;grid-template-columns:1fr 1.2fr 1fr 1.2fr auto;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:14px;align-items:center}
.aff-th{border-top:0;background:var(--raise);font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:560px){.aff-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.aff-link{grid-template-columns:1fr}.aff-row{grid-template-columns:1fr 1fr;row-gap:4px}.aff-th{display:none}.aff-menu button:last-child{margin-left:0}}
.maint{position:fixed;inset:0;z-index:70;background:var(--bg);display:grid;place-items:center;padding:24px;text-align:center}
.maint div{max-width:520px;display:grid;gap:14px;justify-items:center}
.maint img{height:var(--logo-h);width:auto}
.maint p{color:var(--muted);margin:0;white-space:pre-line}
.disclaimer{background:var(--surface);border-top:1px solid var(--line);padding-block:28px;font-size:13px;color:var(--muted)}
.disclaimer strong{color:var(--text)}
footer{background:color-mix(in srgb,var(--bg) 60%,#000);border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:2fr repeat(var(--fcols,3),1fr);gap:32px;padding-block:52px 28px}
.foot-brand img{height:20px;width:auto}
.foot-brand p{color:var(--muted);font-size:14px;max-width:34ch;margin:12px 0 0;white-space:pre-line}
footer h4{margin:0 0 12px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--soft)}
footer ul a{transition:color .3s,text-shadow .3s}
footer ul a:hover{color:var(--text);text-shadow:0 0 12px var(--glow)}
.legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;color:var(--faint);font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.gate{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.82);display:grid;place-items:center;padding:20px}
.gate-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);max-width:480px;width:100%;padding:32px;display:flex;flex-direction:column;gap:12px}
.gate-box img{height:20px;width:auto;align-self:flex-start;margin-bottom:8px}
.gate-box h2{font-size:26px}
.gate-box p{margin:0;color:var(--soft);font-size:15px;white-space:pre-line}
.gate-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));right:max(20px,env(safe-area-inset-right,0px));background:var(--green);color:var(--on-accent);padding:12px 18px;border-radius:var(--r-md);font-weight:600;z-index:60}

/* scroll reveal: only applied by script to content below the first screen */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

@media (max-width:960px){
  .grid{grid-template-columns:repeat(min(2,var(--gcols)),minmax(0,1fr))}
  .hero-in,.hero-in.img-left,.pdp,.cartwrap{grid-template-columns:1fr}
  .hero-in.img-left .hero-media{order:0}
  .facts-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  nav{margin-left:0;width:100%;gap:4px;font-size:15px}
  nav a{padding:6px 11px}
  section{padding-block:44px}
  .grid{gap:14px}
  .tools,.tools input,.tools select{width:100%}
  .addr{grid-template-columns:1fr}
  .acct{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .rv,.hero-media.enter{opacity:1;transform:none;translate:none;scale:none}
  .hero-media{transform:none}
  .thumb:hover img,.card:hover .thumb img,.gallery .thumbs button:hover img,.hero-media:hover img,.sec-img:hover img{transform:none}
}