:root{
  --void:#0B0B0C;
  --surface:#141416;
  --surface-raised:#1B1B1E;
  --line:#28282B;
  --paper:#F2F1EC;
  --grey:#9A9A9E;
  --grey-dim:#6C6C70;
  --bronze:#B08D57;
  --bronze-dim:#8A6D42;
  --bronze-soft:rgba(176,141,87,0.14);
  --display:'Space Grotesk', sans-serif;
  --body:'IBM Plex Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --nav-h:64px;
  --bar-h:34px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--void); color:var(--paper); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img,svg{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:15px;}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; letter-spacing:-0.01em; color:var(--paper);}
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--bronze); display:inline-block; margin-bottom:14px;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{outline:2px solid var(--bronze); outline-offset:3px;}
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--mono); font-size:13px; letter-spacing:0.03em; padding:14px 26px; border-radius:2px; border:1px solid var(--line); transition:border-color .15s ease, background .15s ease, transform .1s ease; background:transparent; color:var(--paper); white-space:nowrap;}
.btn-primary{background:var(--bronze); color:var(--void); border-color:var(--bronze); font-weight:600;}
.btn-primary:hover{background:#C29B63;}
.btn-ghost:hover{border-color:var(--grey-dim);}
.btn-sm{padding:10px 18px; font-size:12px;}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}

.announce{height:var(--bar-h); background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.announce p{font-family:var(--mono); font-size:11.5px; color:var(--grey); letter-spacing:0.03em; white-space:nowrap; text-align:center;}

header{position:sticky; top:0; z-index:60; background:rgba(11,11,12,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav{height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:16px;}
.logo{font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-0.02em; flex-shrink:0;}
.logo span{color:var(--bronze);}
.nav-links{display:none; gap:22px; font-size:13.5px; color:var(--grey); align-items:center;}
.nav-links a:hover, .nav-links a.active{color:var(--paper);}
@media(min-width:1180px){ .nav-links{display:flex;} }
.nav-tools{display:flex; align-items:center; gap:10px;}
.icon-btn{width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:2px; background:transparent; color:var(--paper); position:relative;}
.icon-btn:hover{border-color:var(--grey-dim);}
.icon-btn svg{width:16px; height:16px;}
.basket-count{position:absolute; top:-6px; right:-6px; background:var(--bronze); color:var(--void); font-family:var(--mono); font-size:10px; font-weight:700; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center;}
.search-wrap{position:relative; display:none;}
@media(min-width:1180px){ .search-wrap{display:block;} }
.basket-wrap{position:relative;}
.search-panel{position:absolute; top:calc(100% + 10px); right:0; width:260px; background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:12px; display:none; gap:8px;}
.search-panel.open{display:flex;}
.search-panel input{flex:1; background:var(--void); border:1px solid var(--line); color:var(--paper); padding:9px 10px; border-radius:2px; font-size:13px;}

.basket-panel{position:absolute; top:calc(100% + 10px); right:0; width:320px; background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:16px; display:none; z-index:70;}
.basket-panel.open{display:block;}
.basket-panel h3{font-size:14px; margin-bottom:12px;}
.basket-empty{color:var(--grey); font-size:13px;}
.basket-line{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.basket-line:last-of-type{border-bottom:none;}
.basket-line-name{flex:1; font-size:13px;}
.basket-qty{display:flex; align-items:center; gap:6px;}
.basket-qty button{width:22px; height:22px; border:1px solid var(--line); background:transparent; color:var(--paper); border-radius:2px; font-family:var(--mono); font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;}
.basket-qty button:hover{border-color:var(--bronze-dim);}
.basket-qty span{font-family:var(--mono); font-size:12.5px; min-width:16px; text-align:center;}
.basket-remove{background:transparent; border:none; color:var(--grey-dim); font-size:16px; line-height:1; padding:0 2px;}
.basket-remove:hover{color:var(--bronze);}
.basket-note{font-family:var(--mono); font-size:10.5px; color:var(--grey-dim); margin-top:12px; line-height:1.5;}
.basket-checkout{width:100%; margin-top:12px;}
.nav-wholesale-btn{display:none;}
@media(min-width:1180px){ .nav-wholesale-btn{display:inline-flex;} }
.menu-toggle{display:flex; width:36px; height:36px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:2px; background:transparent; color:var(--paper);}
@media(min-width:1180px){ .menu-toggle{display:none;} }
.menu-toggle svg{width:18px; height:18px;}
.mobile-menu{display:none; position:fixed; inset:calc(var(--nav-h) + var(--bar-h)) 0 0 0; background:var(--void); z-index:55; padding:24px; overflow-y:auto;}
.mobile-menu.open{display:block;}
@media(min-width:1180px){ .mobile-menu{display:none !important;} }
.mobile-menu ul{display:flex; flex-direction:column; gap:2px;}
.mobile-menu a{display:block; padding:15px 4px; border-bottom:1px solid var(--line); font-family:var(--display); font-size:18px;}
.mobile-menu .btn{margin-top:24px; width:100%;}

.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface-raised); border:1px solid var(--line); color:var(--paper); padding:14px 20px; border-radius:2px; font-size:13.5px; max-width:min(420px,86vw); z-index:200; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; box-shadow:0 12px 32px rgba(0,0,0,0.4);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

section{padding:80px 0;}
@media(max-width:700px){ section{padding:56px 0;} }
.section-head{max-width:640px; margin-bottom:40px;}
.section-head h2{font-size:clamp(26px,4vw,36px); margin-bottom:14px;}
.section-head h1{font-size:clamp(28px,4.5vw,40px); margin-bottom:14px;}
.section-head p{color:var(--grey); font-size:16px;}
.divider-thread{height:14px; width:100%; background-image:repeating-linear-gradient(115deg, transparent 0 18px, var(--line) 18px 19px); opacity:0.6;}

.hero{padding-top:60px; border-bottom:1px solid var(--line); overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:center;}
@media(min-width:960px){ .hero-grid{grid-template-columns:1.05fr 1fr; gap:32px;} }
.hero-copy h1{font-size:clamp(34px,6vw,54px); line-height:1.06; margin:16px 0 20px; max-width:560px;}
.hero-copy p{color:var(--grey); max-width:460px; font-size:16.5px; margin-bottom:32px;}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px;}
.hero-art{position:relative; display:flex; justify-content:center;}
.hero-art .frame{width:100%; max-width:440px; aspect-ratio:4/5; border:1px solid var(--line); border-radius:2px; background:radial-gradient(circle at 30% 20%, var(--surface-raised), var(--void)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.hero-art .frame svg{width:62%; height:auto;}
.hero-art .frame-label{position:absolute; bottom:16px; left:16px; right:16px; font-family:var(--mono); font-size:10.5px; color:var(--grey-dim); letter-spacing:0.05em;}

.cat-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:640px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1000px){ .cat-grid{grid-template-columns:repeat(5,1fr);} }
.cat-card{border:1px solid var(--line); border-radius:2px; padding:24px; display:flex; flex-direction:column; gap:14px; background:var(--surface); transition:border-color .15s ease;}
.cat-card:hover{border-color:var(--bronze-dim);}
.cat-thumb{aspect-ratio:4/3; border:1px solid var(--line); border-radius:2px; background:linear-gradient(135deg, var(--surface-raised), var(--void)); display:flex; align-items:center; justify-content:center;}
.cat-thumb svg{width:40%; opacity:0.85;}
.cat-card h3{font-size:17px;}
.cat-card p{color:var(--grey); font-size:13.5px; flex:1;}

.product-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:640px){ .product-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1000px){ .product-grid{grid-template-columns:repeat(3,1fr);} }
.product-card{border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--surface); display:flex; flex-direction:column;}
.product-thumb{aspect-ratio:1/1; background:linear-gradient(135deg, var(--surface-raised), var(--void)); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line);}
.product-thumb svg{width:44%; opacity:0.9;}
.product-body{padding:18px; display:flex; flex-direction:column; gap:10px; flex:1;}
.product-title{font-size:16px; font-weight:500;}
.product-desc{color:var(--grey); font-size:13.5px; flex:1;}
.compat-label{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--bronze); border:1px solid var(--bronze-dim); background:var(--bronze-soft); padding:5px 9px; border-radius:2px; width:fit-content; letter-spacing:0.02em;}
.price-row{display:flex; align-items:center; justify-content:space-between; margin-top:4px; padding-top:12px; border-top:1px solid var(--line);}
.price-placeholder{font-family:var(--mono); font-size:13px; color:var(--grey-dim);}
.product-actions{display:flex; gap:8px; margin-top:10px;}
.product-actions .btn{flex:1; padding:10px 12px; font-size:11.5px;}
.spec-note{font-family:var(--mono); font-size:10.5px; color:var(--grey-dim); letter-spacing:0.02em;}

/* Product detail page */
.product-detail-grid{display:grid; grid-template-columns:1fr; gap:40px;}
@media(min-width:900px){ .product-detail-grid{grid-template-columns:1fr 1fr;} }
.pd-frame{border:1px solid var(--line); border-radius:2px; background:radial-gradient(circle at 30% 20%, var(--surface-raised), var(--void)); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.pd-frame svg{width:46%;}
.pd-specs{border:1px solid var(--line); border-radius:2px; margin-top:24px;}
.pd-specs .row{display:flex; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:13.5px;}
.pd-specs .row:last-child{border-bottom:none;}
.pd-specs .row span:first-child{color:var(--grey-dim); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.04em;}

.compat-points{display:flex; flex-direction:column; gap:16px; max-width:620px; margin-bottom:40px;}
.compat-points li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--grey); padding-bottom:16px; border-bottom:1px solid var(--line);}
.compat-points li:last-child{border-bottom:none; padding-bottom:0;}
.compat-points li:before{content:"—"; color:var(--bronze); flex-shrink:0;}
.checker{border:1px solid var(--line); border-radius:2px; background:var(--surface); padding:28px; max-width:620px;}
.checker-row{display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:18px;}
@media(min-width:640px){ .checker-row{grid-template-columns:1fr 1fr;} }
.checker label{display:block; font-family:var(--mono); font-size:11px; color:var(--grey-dim); margin-bottom:8px; letter-spacing:0.04em; text-transform:uppercase;}
.checker select{width:100%; background:var(--void); border:1px solid var(--line); color:var(--paper); padding:12px; border-radius:2px;}
.checker-result{margin-top:18px; padding:16px; border:1px solid var(--bronze-dim); background:var(--bronze-soft); border-radius:2px; font-size:13.5px; display:none;}
.checker-result.show{display:block;}
.checker-result .tag{font-family:var(--mono); font-size:10.5px; color:var(--bronze); letter-spacing:0.05em; display:block; margin-bottom:8px;}

.why-grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
@media(min-width:700px){ .why-grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1000px){ .why-grid{grid-template-columns:repeat(5,1fr);} }
.why-item{background:var(--void); padding:26px 20px;}
.why-item svg{width:22px; height:22px; color:var(--bronze); margin-bottom:16px;}
.why-item h3{font-size:15px; margin-bottom:8px;}
.why-item p{color:var(--grey); font-size:13px;}

.wholesale-list{display:flex; flex-direction:column; gap:12px; margin:24px 0 32px;}
.wholesale-list li{font-size:14.5px; color:var(--grey); display:flex; gap:10px; align-items:flex-start;}
.wholesale-list li:before{content:"✔"; color:var(--bronze); font-size:12px; margin-top:3px; flex-shrink:0;}
.wholesale-actions{display:flex; flex-wrap:wrap; gap:12px;}

.form-card{border:1px solid var(--line); border-radius:2px; background:var(--surface); padding:28px;}
.form-row{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px;}
@media(min-width:600px){ .form-row.two{grid-template-columns:1fr 1fr;} }
.field label{display:block; font-family:var(--mono); font-size:11px; color:var(--grey-dim); margin-bottom:8px; letter-spacing:0.04em; text-transform:uppercase;}
.field input, .field select, .field textarea{width:100%; background:var(--void); border:1px solid var(--line); color:var(--paper); padding:12px; border-radius:2px;}
.field textarea{resize:vertical; min-height:100px;}
.field-check{display:flex; gap:10px; align-items:flex-start; margin-bottom:18px;}
.field-check input{width:auto; margin-top:4px;}
.field-check label{font-family:var(--body); font-size:13.5px; color:var(--grey); text-transform:none; letter-spacing:normal;}
.form-note{font-family:var(--mono); font-size:11.5px; color:var(--grey-dim); margin-top:14px; line-height:1.6;}
.form-status{margin-top:16px; padding:12px 14px; border-radius:2px; font-size:13.5px; display:none; border:1px solid var(--bronze-dim); background:var(--bronze-soft);}
.form-status.show{display:block;}

.about-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:start;}
@media(min-width:960px){ .about-grid{grid-template-columns:1fr 1fr;} }
.about-copy p{color:var(--grey); font-size:15.5px; margin-bottom:16px; max-width:520px;}
.about-points li{padding:18px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--grey); display:flex; gap:12px;}
.about-points li:first-child{border-top:1px solid var(--line);}
.about-points li:before{content:"—"; color:var(--bronze); flex-shrink:0;}

.safety-grid{display:grid; grid-template-columns:1fr; gap:12px; max-width:760px;}
@media(min-width:700px){ .safety-grid{grid-template-columns:1fr 1fr;} }
.safety-grid li{font-size:13.5px; color:var(--grey); border:1px solid var(--line); border-radius:2px; padding:14px 16px; background:var(--surface-raised);}

.faq-list{max-width:760px; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
.faq-item{background:var(--void);}
.faq-item summary{padding:20px 22px; font-family:var(--display); font-size:15.5px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; list-style:none; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:after{content:"+"; color:var(--bronze); font-size:20px; flex-shrink:0;}
.faq-item[open] summary:after{content:"–";}
.faq-item p{padding:0 22px 22px; color:var(--grey); font-size:14px; max-width:640px;}

.contact-emails .row{padding:16px 0; border-bottom:1px solid var(--line);}
.contact-emails .row:first-child{border-top:1px solid var(--line);}
.contact-emails .label{font-family:var(--mono); font-size:11px; color:var(--grey-dim); text-transform:uppercase; letter-spacing:0.04em; display:block; margin-bottom:6px;}
.contact-emails a{color:var(--bronze); font-size:15px;}
.contact-grid{display:grid; grid-template-columns:1fr; gap:40px;}
@media(min-width:960px){ .contact-grid{grid-template-columns:0.8fr 1.2fr;} }

.newsletter-card{max-width:560px; margin:0 auto; text-align:center;}
.nl-form{display:flex; flex-direction:column; gap:10px; margin-top:24px;}
@media(min-width:560px){ .nl-form{flex-direction:row;} }
.nl-form input{flex:1; background:var(--surface); border:1px solid var(--line); color:var(--paper); padding:13px 14px; border-radius:2px; font-size:14px;}

/* Legal / long-form text pages */
.legal-content{max-width:760px;}
.legal-content h2{font-size:20px; margin-top:36px; margin-bottom:12px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--grey); font-size:14.5px; margin-bottom:14px;}
.legal-content ul{margin:0 0 14px 0; display:flex; flex-direction:column; gap:8px;}
.legal-content ul li{color:var(--grey); font-size:14.5px; display:flex; gap:10px;}
.legal-content ul li:before{content:"—"; color:var(--bronze); flex-shrink:0;}
.legal-updated{font-family:var(--mono); font-size:11.5px; color:var(--grey-dim); margin-bottom:32px; display:block;}
.assumption{border:1px solid var(--bronze-dim); background:var(--bronze-soft); border-radius:2px; padding:14px 16px; font-size:13px; color:var(--paper); margin:16px 0;}
.assumption b{color:var(--bronze);}

footer{padding:56px 0 28px; border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
@media(min-width:800px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;} }
.footer-grid h4{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--grey-dim); margin-bottom:14px;}
.footer-grid ul li{margin-bottom:10px; font-size:13.5px; color:var(--grey);}
.footer-grid ul li a:hover{color:var(--paper);}
.footer-about p{color:var(--grey); font-size:13.5px; max-width:280px; margin-top:12px;}
.footer-legal{margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px;}
.footer-legal p{font-family:var(--mono); font-size:11px; color:var(--grey-dim); line-height:1.8;}
.footer-bottom{margin-top:20px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; font-family:var(--mono); font-size:11px; color:var(--grey-dim);}
@media(min-width:800px){ .footer-bottom{flex-direction:row; justify-content:space-between;} }

.age-gate{position:fixed; inset:0; z-index:300; background:var(--void); display:flex; align-items:center; justify-content:center; padding:24px;}
.age-card{max-width:420px; width:100%; border:1px solid var(--line); border-radius:2px; padding:40px 32px; text-align:center; background:var(--surface);}
.age-card .logo{justify-content:center; display:flex; margin-bottom:28px;}
.age-card h2{font-size:21px; margin-bottom:14px;}
.age-card p{color:var(--grey); font-size:13.5px; margin-bottom:28px;}
.age-actions{display:flex; flex-direction:column; gap:10px;}
.age-actions .btn{width:100%;}
body.age-locked{overflow:hidden;}
body.age-locked > *:not(.age-gate){display:none;}

@media(prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}