/* ===========================================================
   Tech Tronex — v2
   Direction: "The counter" — the shop's own photography (blue
   display mat, printed price labels) drives the whole design.
   Signature: every product carries a printed price ticket.
   Dials: variance 6 · motion 3 · density 7
   =========================================================== */

:root{
  /* ink + paper */
  --ink:#0C1117;
  --ink-2:#151C24;
  --ink-3:#232C37;
  --paper:#FFFFFF;
  --surface:#F1F3F6;
  --surface-2:#E8ECF1;
  --line:#E1E5EB;
  --line-2:#C7CFD9;
  --text:#0C1117;
  --muted:#59636F;

  /* brand — deep retail blue, with the shop's display-mat cyan as the wash */
  --brand:#0B63E5;
  --brand-d:#0A4CB4;
  --brand-50:#E9F0FE;
  --mat:#38BEE3;

  /* signals */
  --cash:#0F8F5F;
  --cash-50:#E6F4EE;
  --amber:#B45309;
  --amber-50:#FBF0E1;
  --slate:#6B7685;

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:72px; --s9:104px;

  /* shape — sharp, retail, not bubbly */
  --r-sm:2px; --r-md:6px; --r-lg:14px; --r-pill:999px;
  --sh:0 10px 30px -18px rgba(12,17,23,.45);
  --sh-tik:0 2px 8px -1px rgba(12,17,23,.28);

  --dur:200ms;
  --ease:cubic-bezier(.2,.65,.3,1);
  --wrap:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 var(--s3); font-weight:800; letter-spacing:-.033em; line-height:1.03; text-wrap:balance}
h1{font-size:clamp(2.3rem,1.4rem + 3.6vw,4.1rem)}
h2{font-size:clamp(1.6rem,1.15rem + 1.8vw,2.5rem)}
h3{font-size:1.1rem; letter-spacing:-.02em}
p{margin:0 0 var(--s4); text-wrap:pretty}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%; display:block}
ul{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
::selection{background:var(--ink); color:#fff}

.wrap{width:min(100% - 32px,var(--wrap)); margin-inline:auto}
.muted{color:var(--muted)}
.small{font-size:.83rem}
.mono{font-family:"DM Mono",ui-monospace,monospace; font-feature-settings:"tnum"}
.lede{font-size:1.08rem; color:var(--muted); max-width:56ch}
.bg-surface{background:var(--surface)}
.bg-ink{background:var(--ink); color:#fff}

/* label / eyebrow — printed-label voice */
.eyebrow{
  display:inline-block; font-family:"DM Mono",monospace; font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-bottom:var(--s3);
}
.bg-ink .eyebrow,.hero .eyebrow{color:var(--mat)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:var(--r-sm); border:1px solid transparent;
  font-weight:700; font-size:.92rem; letter-spacing:-.01em; cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-d)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:var(--ink-3)}
.btn-ghost{background:transparent; border-color:var(--line-2); color:var(--text)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:#fff; color:var(--ink)}
.btn-light:hover{background:#E9EEF5}
.btn-outline-light{background:transparent; border-color:rgba(255,255,255,.35); color:#fff}
.btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn-lg{padding:16px 28px; font-size:1rem}
.btn-sm{padding:9px 15px; font-size:.83rem}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.btn-block{width:100%}

/* ---------- header ---------- */
.topbar{background:#05080C; color:#8E9AA9; font-size:.76rem; font-family:"DM Mono",monospace; letter-spacing:.02em}
.topbar .wrap{display:flex; gap:var(--s5); align-items:center; justify-content:space-between; min-height:34px; overflow:hidden}
.topbar strong{color:#fff; font-weight:500}
.topbar .dot{color:var(--mat)}
.topbar a:hover{color:#fff}

.site-head{background:var(--ink); color:#fff; position:sticky; top:0; z-index:40}
.site-head .wrap{display:flex; align-items:center; gap:var(--s4); padding:15px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.2rem; letter-spacing:-.045em}
.logo .mark{
  width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--brand); color:#fff; font-weight:800; font-size:1rem; letter-spacing:-.06em;
}
.logo i{font-style:normal; color:var(--mat)}

.search{flex:1; position:relative; max-width:560px; display:none}
@media(min-width:900px){.search{display:block}}
.search input{
  width:100%; padding:11px 44px 11px 14px; border-radius:var(--r-sm);
  border:1px solid #2A333F; background:#161E27; color:#fff;
}
.search input::placeholder{color:#78848F}
.search input:focus{border-color:var(--brand); background:#111922}
.search button{
  position:absolute; right:3px; top:3px; bottom:3px; width:38px; border:0; border-radius:var(--r-sm);
  background:var(--brand); color:#fff; cursor:pointer; display:grid; place-items:center;
}
.head-actions{margin-left:auto; display:flex; align-items:center; gap:var(--s4)}
.icon-link{display:flex; align-items:center; gap:7px; color:#B4BFCB; font-size:.85rem; font-weight:500}
.icon-link svg{width:18px;height:18px}
.icon-link:hover{color:#fff}

.mainnav{background:var(--ink); border-top:1px solid #1E2731}
.mainnav .wrap{display:flex; gap:var(--s1); overflow-x:auto; scrollbar-width:none}
.mainnav .wrap::-webkit-scrollbar{display:none}
.mainnav a{
  padding:12px 15px; color:#A9B4C1; font-size:.88rem; font-weight:600; white-space:nowrap;
  border-bottom:2px solid transparent; transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.mainnav a:hover{color:#fff}
.mainnav a[aria-current="page"]{color:#fff; border-bottom-color:var(--mat)}
.mob-search{padding:10px 0; background:var(--ink-2)}
@media(min-width:900px){.mob-search{display:none}}
.mob-search .search{display:block; max-width:none}

/* ---------- hero ---------- */
.hero{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.hero .wrap{display:grid; gap:var(--s6); padding:var(--s7) 0 var(--s8)}
@media(min-width:1000px){
  .hero .wrap{grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center; padding:var(--s8) 0 calc(var(--s9) + 20px)}
}
.hero h1{color:#fff}
.hero h1 .thin{font-weight:400; letter-spacing:-.03em; color:#93A1B2; display:block}
.hero .lede{color:#A7B3C2; margin-top:var(--s4)}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.hero-facts{display:grid; grid-template-columns:repeat(3,auto); gap:var(--s6); margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid #222C37; justify-content:start}
.hero-facts dt{font-weight:800; font-size:1.7rem; letter-spacing:-.04em; line-height:1}
.hero-facts dd{margin:6px 0 0; font-family:"DM Mono",monospace; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:#8795A6}

/* photo collage — offset, not a neat card */
.collage{position:relative; padding-bottom:34px}
.collage figure{margin:0; position:relative; overflow:hidden; border-radius:var(--r-md); background:#1A222B}
.collage .big{aspect-ratio:4/3.3}
.collage .big img{width:100%;height:100%;object-fit:cover}
.collage .small{
  position:absolute; right:-6px; bottom:0; width:42%; aspect-ratio:1/1;
  border:5px solid var(--ink); border-radius:var(--r-md); box-shadow:var(--sh);
}
.collage .small img{width:100%;height:100%;object-fit:cover}
@media(max-width:999px){.collage .small{width:38%}}

/* value bar — straddles hero and page */
.valuebar{position:relative; z-index:3; margin-top:-56px; margin-bottom:var(--s7)}
@media(max-width:999px){.valuebar{margin-top:var(--s6)}}
.valuebar .inner{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh);
  display:grid; gap:var(--s4); padding:var(--s5);
}
@media(min-width:900px){
  .valuebar .inner{grid-template-columns:1.1fr 1fr auto auto; align-items:end; gap:var(--s5); padding:var(--s5) var(--s6)}
}
.vb-label{display:block; font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.valuebar select{width:100%; padding:11px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff}
.valuebar select:hover{border-color:var(--ink)}
.vb-out{display:flex; gap:var(--s5); align-items:baseline; white-space:nowrap}
.vb-out b{font-size:1.9rem; font-weight:800; letter-spacing:-.04em; line-height:1}
.vb-out .credit{color:var(--cash)}
.vb-out span{display:block; font-family:"DM Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px}

/* ---------- sections ---------- */
.section{padding:var(--s8) 0}
.section--tight{padding:var(--s7) 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); margin-bottom:var(--s6); flex-wrap:wrap}
.sec-head p{margin:8px 0 0; color:var(--muted); max-width:58ch}
.link-more{font-weight:700; font-size:.88rem; color:var(--brand); border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease)}
.link-more:hover{border-color:var(--brand)}

/* ---------- product card with printed ticket ---------- */
.grid{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.pcard:hover{border-color:var(--line-2); box-shadow:var(--sh); transform:translateY(-3px)}
.shot{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--surface-2)}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease)}
.pcard:hover .shot img{transform:scale(1.045)}
.ticket{
  position:absolute; left:11px; bottom:11px; background:#fff; color:#0C1117;
  padding:8px 11px 7px; border-radius:1px; box-shadow:var(--sh-tik);
  transform:rotate(-1.3deg); transform-origin:left bottom;
  transition:transform var(--dur) var(--ease);
  min-width:118px;
}
.pcard:hover .ticket{transform:rotate(0) translateY(-2px)}
.ticket .t-m{font-family:"DM Mono",monospace; font-size:.6rem; line-height:1.45; letter-spacing:.04em; text-transform:uppercase; color:#3A444F}
.ticket .t-p{font-weight:800; font-size:1.3rem; letter-spacing:-.035em; line-height:1.15; margin-top:1px}
.ticket .t-w{
  font-family:"DM Mono",monospace; font-size:.54rem; letter-spacing:.07em; text-transform:uppercase;
  color:#5B6470; border-top:1px solid #DDE1E6; margin-top:5px; padding-top:4px;
}
.flag{
  position:absolute; top:0; left:0; z-index:2; background:var(--ink); color:#fff;
  font-family:"DM Mono",monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px; border-bottom-right-radius:var(--r-sm);
}
.flag--new{background:var(--brand)}
.pcard .body{padding:var(--s4); display:flex; flex-direction:column; gap:7px; flex:1}
.pcard .brandline{font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.pcard .title{font-weight:700; font-size:.98rem; line-height:1.3; letter-spacing:-.02em}
.pcard .title:hover{color:var(--brand)}
.pcard .webuy{
  margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--line);
  font-size:.8rem; color:var(--cash); font-weight:700;
}
.pcard .row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.stretch::after{content:""; position:absolute; inset:0}

/* grade chips */
.grade{
  display:inline-flex; align-items:center; gap:6px; font-family:"DM Mono",monospace;
  font-size:.66rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px 3px 4px; border-radius:var(--r-pill); background:var(--surface); color:var(--slate);
}
.grade i{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.6rem;background:var(--slate);color:#fff}
.grade--new{background:var(--brand-50); color:var(--brand-d)} .grade--new i{background:var(--brand)}
.grade--A{background:var(--cash-50); color:#0B7A50} .grade--A i{background:var(--cash)}
.grade--B{background:var(--amber-50); color:#96490A} .grade--B i{background:var(--amber)}
.grade--C{background:var(--surface); color:var(--slate)} .grade--C i{background:var(--slate)}
.tag{font-family:"DM Mono",monospace; font-size:.64rem; letter-spacing:.07em; text-transform:uppercase; padding:4px 8px; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--muted)}
.tag--order{border-color:#EBD9BE; background:var(--amber-50); color:#96490A}
.swatches{display:flex; gap:5px}
.swatches i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(12,17,23,.2) inset}

/* ---------- stock sheet table ---------- */
.sheet-wrap{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:#fff}
.sheet{width:100%; border-collapse:collapse; font-size:.9rem}
.sheet th{
  text-align:left; font-family:"DM Mono",monospace; font-size:.64rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding:13px var(--s4); background:var(--surface); border-bottom:1px solid var(--line);
}
.sheet td{padding:13px var(--s4); border-bottom:1px solid var(--line); vertical-align:middle}
.sheet tr:last-child td{border-bottom:0}
.sheet tbody tr:hover{background:#FAFBFC}
.sheet .model{font-weight:700; letter-spacing:-.01em}
.sheet .note{display:block; font-size:.76rem; color:var(--muted); margin-top:2px}
.sheet .price{text-align:right; font-weight:800; letter-spacing:-.025em; font-feature-settings:"tnum"; white-space:nowrap}
.sheet .num{font-family:"DM Mono",monospace; font-size:.76rem; color:var(--muted)}
@media(max-width:780px){
  .sheet .hide-col{display:none}
  .sheet th,.sheet td{padding:11px var(--s3)}
}

/* ---------- editorial split (sell / repairs) ---------- */
.split{display:grid; gap:var(--s6)}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center}}
.split--ink{background:var(--ink); color:#fff}
.split figure{margin:0; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3}
.split figure img{width:100%;height:100%;object-fit:cover}
.split h2{color:inherit}
.split--ink p{color:#A7B3C2}

/* numbered process list */
.process{counter-reset:p; display:grid; gap:0; margin-top:var(--s5)}
.process li{
  counter-increment:p; display:grid; grid-template-columns:auto 1fr; gap:var(--s4);
  padding:var(--s4) 0; border-top:1px solid var(--line); align-items:baseline;
}
.process li::before{
  content:counter(p,decimal-leading-zero); font-family:"DM Mono",monospace; font-size:.72rem;
  letter-spacing:.08em; color:var(--brand);
}
.process li b{display:block; font-size:.98rem; letter-spacing:-.015em}
.process li span{font-size:.88rem; color:var(--muted)}
.split--ink .process li{border-color:#232C37}
.split--ink .process li::before{color:var(--mat)}
.split--ink .process li span{color:#8795A6}

/* ---------- promise strip ---------- */
.promise{display:grid; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:#fff}
@media(min-width:760px){.promise{grid-template-columns:repeat(4,1fr)}}
.promise div{padding:var(--s5); border-bottom:1px solid var(--line)}
@media(min-width:760px){
  .promise div{border-bottom:0; border-right:1px solid var(--line)}
  .promise div:last-child{border-right:0}
}
.promise div:last-child{border-bottom:0}
.promise .n{font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); margin-bottom:var(--s3)}
.promise b{display:block; font-size:1.02rem; letter-spacing:-.02em; margin-bottom:5px}
.promise p{margin:0; font-size:.87rem; color:var(--muted)}

/* ---------- category strip ---------- */
.cats{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3)}
@media(min-width:700px){.cats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.cats{grid-template-columns:repeat(6,1fr)}}
.cat{
  border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s4); background:#fff;
  display:flex; flex-direction:column; gap:var(--s3); min-height:112px;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.cat:hover{border-color:var(--ink); background:var(--surface)}
.cat svg{width:22px;height:22px;color:var(--brand)}
.cat b{font-size:.94rem; letter-spacing:-.015em}
.cat span{font-family:"DM Mono",monospace; font-size:.64rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-top:auto}

/* ---------- listing ---------- */
.pagehead{background:var(--ink); color:#fff; padding:var(--s7) 0 var(--s8)}
.pagehead h1{color:#fff; max-width:18ch}
.pagehead p{color:#A7B3C2; margin:var(--s4) 0 0; max-width:58ch}
.listing{display:grid; gap:var(--s6); padding:var(--s6) 0 var(--s8)}
@media(min-width:1000px){.listing{grid-template-columns:238px 1fr; align-items:start}}
.filters{position:sticky; top:132px}
.fgroup{padding-bottom:var(--s4); margin-bottom:var(--s4); border-bottom:1px solid var(--line)}
.fgroup:last-child{border:0; margin:0; padding:0}
.fgroup h4{font-family:"DM Mono",monospace; font-size:.66rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s3)}
.check{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:.9rem; cursor:pointer}
.check input{accent-color:var(--brand); width:15px; height:15px}
.fgroup input[type=search]{width:100%; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm)}
.listing-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s4); padding-bottom:var(--s4); border-bottom:1px solid var(--line)}
.listing-head select{padding:8px 11px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff}
.count{font-family:"DM Mono",monospace; font-size:.8rem; color:var(--muted)}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--s4)}
.chip{
  border:1px solid var(--line-2); background:#fff; border-radius:var(--r-sm); padding:8px 15px;
  font-size:.85rem; font-weight:600; cursor:pointer; transition:all var(--dur) var(--ease);
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.empty{border:1px dashed var(--line-2); border-radius:var(--r-md); padding:var(--s8); text-align:center; color:var(--muted)}

/* ---------- breadcrumb ---------- */
.crumb{font-family:"DM Mono",monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:var(--s5) 0 0}
.crumb a:hover{color:var(--brand)}
.crumb span{margin:0 8px; color:var(--line-2)}

/* ---------- product detail ---------- */
.pdp{display:grid; gap:var(--s6); padding:var(--s5) 0 var(--s8)}
@media(min-width:980px){.pdp{grid-template-columns:1.05fr 1fr; align-items:start; gap:var(--s8)}}
.pdp-media{position:sticky; top:132px}
.pdp-media .main{border-radius:var(--r-md); overflow:hidden; aspect-ratio:1/1; background:var(--surface-2); position:relative}
.pdp-media .main img{width:100%;height:100%;object-fit:cover}
.pdp-thumbs{display:flex; gap:10px; margin-top:10px}
.pdp-thumbs button{
  width:76px; height:76px; padding:0; border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; background:none; cursor:pointer; transition:border-color var(--dur) var(--ease);
}
.pdp-thumbs button[aria-pressed="true"]{border-color:var(--ink)}
.pdp-thumbs img{width:100%;height:100%;object-fit:cover}
.pdp h1{font-size:clamp(1.8rem,1.3rem + 1.9vw,2.7rem)}
.pricebox{border-top:1px solid var(--ink); border-bottom:1px solid var(--line); padding:var(--s5) 0; margin:var(--s5) 0}
.pricebox .big{font-size:3rem; font-weight:800; letter-spacing:-.045em; line-height:1}
.pricebox .was{font-size:1rem; font-weight:500; color:var(--muted); text-decoration:line-through; margin-left:10px; letter-spacing:0}
.pricebox .sub{display:flex; gap:var(--s6); flex-wrap:wrap; margin-top:var(--s5)}
.pricebox .sub div{font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.pricebox .sub b{display:block; font-family:"Archivo",sans-serif; font-size:1.25rem; letter-spacing:-.03em; color:var(--text); margin-top:4px}
.opts h4{font-family:"DM Mono",monospace; font-size:.66rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s2)}
.opt-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--s5)}
.opt{border:1px solid var(--line-2); background:#fff; border-radius:var(--r-sm); padding:9px 15px; font-size:.87rem; font-weight:600; cursor:pointer; transition:all var(--dur) var(--ease)}
.opt:hover{border-color:var(--ink)}
.opt[aria-pressed="true"]{border-color:var(--ink); background:var(--ink); color:#fff}
.opt[disabled]{opacity:.38; cursor:not-allowed}
.opt[disabled]:hover{border-color:var(--line-2)}
.spec{width:100%; border-collapse:collapse; font-size:.9rem; margin-top:var(--s6)}
.spec th,.spec td{text-align:left; padding:12px 0; border-bottom:1px solid var(--line); vertical-align:top}
.spec th{font-family:"DM Mono",monospace; font-size:.66rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); width:38%}
.notebox{border-left:3px solid var(--amber); background:var(--amber-50); padding:var(--s3) var(--s4); font-size:.88rem; color:#7A3D05; margin-bottom:var(--s5)}

/* ---------- grade cards ---------- */
.gtable{display:grid; gap:var(--s3)}
@media(min-width:760px){.gtable{grid-template-columns:repeat(4,1fr)}}
.gtable article{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s4); background:#fff}
.gtable p{font-size:.86rem; color:var(--muted); margin:var(--s3) 0 0}

/* ---------- sell wizard ---------- */
.sell-grid{display:grid; gap:var(--s6); padding:var(--s6) 0 var(--s8)}
@media(min-width:1060px){.sell-grid{grid-template-columns:1fr 380px; align-items:start}}
.panel{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s6); background:#fff}
.panel + .panel{margin-top:var(--s4)}
.panel h2{font-size:1.4rem}
.stepbar{display:flex; gap:5px; margin-bottom:var(--s5)}
.stepbar i{flex:1; height:3px; background:var(--line); font-style:normal; transition:background var(--dur) var(--ease)}
.stepbar i.on{background:var(--brand)}
.step{display:none}
.step.on{display:block; animation:fade .24s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.step h3{font-size:1.25rem; letter-spacing:-.03em}
.step .hint{font-size:.88rem; color:var(--muted); margin-bottom:var(--s5)}
.field{margin-bottom:var(--s4)}
.field label{display:block; font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.field select,.field input,.field textarea{width:100%; padding:12px 13px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff}
.field select:hover,.field input:hover{border-color:var(--ink)}
.wiz-actions{display:flex; justify-content:space-between; gap:var(--s3); margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line)}

.offer{position:sticky; top:132px; background:var(--ink); color:#fff; border-radius:var(--r-md); padding:var(--s5)}
.offer h3{color:#fff; font-family:"DM Mono",monospace; font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--mat)}
.offer .summary{font-size:.92rem; color:#B7C2CF; line-height:1.5; margin:var(--s3) 0 var(--s5)}
.offer .line{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s4); border:1px solid #26303B; margin-bottom:9px; border-radius:var(--r-sm)}
.offer .line.best{background:var(--cash); border-color:var(--cash)}
.offer .line span{font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#93A1B2}
.offer .line.best span{color:#DFF3EA}
.offer .line b{font-size:1.6rem; font-weight:800; letter-spacing:-.04em}
.offer .meta{font-size:.78rem; color:#8795A6; border-top:1px solid #232C37; padding-top:var(--s4); margin:var(--s4) 0 0}
.offer-mini{display:none}
@media(max-width:1059px){
  .offer-mini{
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    margin-top:var(--s5); padding:var(--s4); background:var(--ink); color:#fff; border-radius:var(--r-sm);
  }
  .offer-mini span{width:100%; font-family:"DM Mono",monospace; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:#8795A6}
  .offer-mini b{font-size:1.5rem; font-weight:800; letter-spacing:-.04em}
  .offer-mini b.credit{color:#4BD8A0}
  .offer-mini small{font-family:"DM Mono",monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#8795A6; margin-right:12px}
}

/* ---------- live buying desk ---------- */
.chat{border:1px solid var(--line); border-radius:var(--r-md); display:flex; flex-direction:column; overflow:hidden; height:500px; background:#fff}
.chat-head{background:var(--ink-2); color:#fff; padding:var(--s3) var(--s4); display:flex; align-items:center; gap:11px}
.chat-head .pulse{width:8px;height:8px;border-radius:50%;background:#3BD98E;box-shadow:0 0 0 0 rgba(59,217,142,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(59,217,142,0)}100%{box-shadow:0 0 0 0 rgba(59,217,142,0)}}
.chat-head b{font-size:.9rem; letter-spacing:-.02em}
.chat-head small{display:block; font-family:"DM Mono",monospace; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:#8795A6}
.chat-log{flex:1; overflow-y:auto; padding:var(--s4); background:var(--surface); display:flex; flex-direction:column; gap:9px}
.msg{max-width:86%; padding:10px 13px; border-radius:10px; font-size:.88rem; line-height:1.45}
.msg.them{background:#fff; border:1px solid var(--line); border-bottom-left-radius:2px; align-self:flex-start}
.msg.me{background:var(--brand); color:#fff; border-bottom-right-radius:2px; align-self:flex-end}
.msg .t{display:block; font-family:"DM Mono",monospace; font-size:.6rem; opacity:.55; margin-top:4px}
.msg.offer-card{background:var(--ink); color:#fff; align-self:flex-start; max-width:94%}
.msg.offer-card b{font-size:1.2rem; font-weight:800; letter-spacing:-.03em; display:block; margin:4px 0}
.quickies{display:flex; gap:6px; flex-wrap:wrap; padding:11px var(--s4); border-top:1px solid var(--line)}
.quickies button{border:1px solid var(--line-2); background:#fff; border-radius:var(--r-pill); padding:6px 12px; font-size:.78rem; cursor:pointer}
.quickies button:hover{border-color:var(--brand); color:var(--brand)}
.chat-form{display:flex; gap:8px; padding:var(--s3) var(--s4) var(--s4); border-top:1px solid var(--line)}
.chat-form input{flex:1; padding:11px 13px; border:1px solid var(--line-2); border-radius:var(--r-pill)}
.chat-form button{width:42px; flex:none; border:0; border-radius:50%; background:var(--brand); color:#fff; cursor:pointer; display:grid; place-items:center}
.typing{display:flex; gap:4px; align-items:center}
.typing i{width:5px;height:5px;border-radius:50%;background:#A3AEBB;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ---------- repairs ---------- */
.repair-grid{display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.rcard h3{padding-bottom:var(--s3); border-bottom:2px solid var(--ink); margin-bottom:0}
.rcard li{display:flex; align-items:baseline; gap:var(--s4); padding:12px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.rcard li .job{flex:1}
.rcard li .time{display:block; font-family:"DM Mono",monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px}
.rcard li .from{font-weight:800; letter-spacing:-.025em; white-space:nowrap}

/* ---------- contact ---------- */
.contact-grid{display:grid; gap:var(--s6); padding:var(--s7) 0 var(--s8)}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr; gap:var(--s8)}}
.info li{display:flex; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--line)}
.info svg{width:19px;height:19px;color:var(--brand);flex:none;margin-top:4px}
.info b{display:block; letter-spacing:-.02em}
.info span{color:var(--muted); font-size:.88rem}
.hours{width:100%; border-collapse:collapse; font-size:.9rem}
.hours td{padding:10px 0; border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right; font-family:"DM Mono",monospace; font-size:.82rem}
.map{aspect-ratio:16/10; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--muted); font-family:"DM Mono",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}

/* ---------- footer ---------- */
.site-foot{background:var(--ink); color:#8795A6; border-top:3px solid var(--mat)}
.foot-top{display:grid; gap:var(--s6); padding:var(--s8) 0 var(--s6)}
@media(min-width:820px){.foot-top{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.site-foot h4{color:#fff; font-family:"DM Mono",monospace; font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--s4)}
.site-foot li{margin-bottom:11px; font-size:.9rem}
.site-foot a:hover{color:#fff}
.site-foot .logo{color:#fff}
.foot-note{max-width:40ch; font-size:.9rem; margin-top:var(--s4)}
.foot-bottom{border-top:1px solid #1E2731; padding:var(--s4) 0; display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between; font-family:"DM Mono",monospace; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase}

/* ---------- misc ---------- */
.demo-note{
  background:var(--surface); border-bottom:1px solid var(--line);
  font-family:"DM Mono",monospace; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); padding:10px 0;
}
.hide-sm{display:none}
@media(min-width:900px){.hide-sm{display:block}}
@media(max-width:899px){.hide-sm{display:none !important}}

/* scroll reveal */
.rv{opacity:0; transform:translateY(14px)}
.rv.in{opacity:1; transform:none; transition:opacity .55s var(--ease),transform .55s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- pass-2 fixes ---------- */
@media(min-width:900px){ .topbar .hide-sm{display:inline} }
.sheet td .num{display:block}
.sheet td.hide-col .num{display:inline}
.collage .small{right:0}
.chat{height:440px}
.trust{margin-top:var(--s5); border-top:1px solid var(--line)}
.trust li{display:flex; gap:var(--s3); padding:11px 0; border-bottom:1px solid var(--line); font-size:.86rem; align-items:baseline}
.trust li b{font-weight:700}
.trust li span{color:var(--muted)}
.trust li::before{content:"✓"; color:var(--cash); font-weight:700; font-size:.8rem}

/* ===========================================================
   Sell page v2 — "trade-in docket"
   One screen, no wizard. All three grades priced side by side.
   =========================================================== */
.sell-wrap{padding:var(--s7) 0 0}
.docket{border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden}
.docket-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  padding:var(--s4) var(--s5); background:var(--ink); color:#fff;
  font-family:"DM Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
.docket-head .no{color:var(--mat)}
.docket-body{display:grid; gap:var(--s5); padding:var(--s5)}
@media(min-width:840px){.docket-body{grid-template-columns:1.1fr 1fr; gap:var(--s6) var(--s7)}}
.dfield{border-top:1px solid var(--line); padding-top:var(--s4)}
.dfield:first-child,.dfield:nth-child(2){border-top:0; padding-top:0}
@media(max-width:839px){.dfield:nth-child(2){border-top:1px solid var(--line); padding-top:var(--s4)}}
.dfield > label,.dfield > h4{
  display:block; font-family:"DM Mono",monospace; font-size:.66rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 10px;
}
.dfield select{width:100%; padding:13px 13px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:#fff; font-weight:600}
.dfield select:hover{border-color:var(--ink)}
.dfield .opt-row{margin-bottom:0}

/* the price matrix — the whole point of this page */
.matrix{display:grid; gap:var(--s4); margin-top:var(--s6)}
@media(min-width:820px){.matrix{grid-template-columns:repeat(3,1fr)}}
.gcol{
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff; padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s3); cursor:pointer; text-align:left;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.gcol:hover{border-color:var(--line-2); box-shadow:var(--sh)}
.gcol[aria-pressed="true"]{border-color:var(--ink); box-shadow:var(--sh); transform:translateY(-2px)}
.gcol[aria-pressed="true"] .pick{background:var(--ink); color:#fff; border-color:var(--ink)}
.gcol .desc{font-size:.87rem; color:var(--muted); margin:0; min-height:3.2em}
.gcol .prices{display:grid; gap:8px; margin-top:auto; padding-top:var(--s4); border-top:1px solid var(--line)}
.gcol .pr{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3)}
.gcol .pr span{font-family:"DM Mono",monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.gcol .pr b{font-size:1.5rem; font-weight:800; letter-spacing:-.04em}
.gcol .pr.credit b{color:var(--cash)}
.gcol .pick{
  margin-top:var(--s4); border:1px solid var(--line-2); background:#fff; color:var(--text);
  border-radius:var(--r-sm); padding:11px; font-weight:700; font-size:.88rem; text-align:center;
  transition:all var(--dur) var(--ease);
}
.gcol:hover .pick{border-color:var(--ink)}

/* sticky confirmation slip */
.confirm{
  position:sticky; bottom:16px; z-index:30; margin:var(--s6) 0 var(--s8);
  background:var(--ink); color:#fff; border-radius:var(--r-md); padding:var(--s4) var(--s5);
  display:grid; gap:var(--s4); box-shadow:0 18px 40px -22px rgba(12,17,23,.8);
}
@media(min-width:900px){.confirm{grid-template-columns:1fr auto auto; align-items:center; gap:var(--s6)}}
.confirm .what{font-size:.92rem; line-height:1.45}
.confirm .what b{display:block; font-size:1rem}
.confirm .what span{font-family:"DM Mono",monospace; font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:#93A1B2}
.confirm .figs{display:flex; gap:var(--s5)}
.confirm .figs div span{display:block; font-family:"DM Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#93A1B2; margin-bottom:3px}
.confirm .figs b{font-size:1.6rem; font-weight:800; letter-spacing:-.04em}
.confirm .figs .credit b{color:#4BD8A0}
.confirm .acts{display:flex; gap:10px; flex-wrap:wrap}
.reserved{
  border:1px solid var(--cash); background:var(--cash-50); color:#0B6B47;
  border-radius:var(--r-md); padding:var(--s4) var(--s5); margin-bottom:var(--s5);
}
.reserved b{display:block}
.reserved .ref{font-family:"DM Mono",monospace; letter-spacing:.08em}

/* desk band — chat full width instead of a tall rail */
.desk{display:grid; gap:var(--s6)}
@media(min-width:960px){.desk{grid-template-columns:1fr 420px; align-items:start}}
.desk .chat{height:420px}
.gcol .grade{align-self:flex-start}

/* compact sticky slip on small screens */
@media(max-width:899px){
  .confirm{grid-template-columns:1fr auto; gap:10px 14px; padding:12px 14px; bottom:10px}
  .confirm .what{grid-column:1/-1}
  .confirm .what span:first-child{display:none}
  .confirm .what b{font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .confirm .what span{font-size:.58rem}
  .confirm .figs{gap:var(--s4)}
  .confirm .figs b{font-size:1.2rem}
  .confirm .acts{gap:7px}
  .confirm .acts .btn{padding:10px 13px; font-size:.8rem}
}
@media(max-width:899px){
  .confirm .what #confirm-spec{display:none}
  .confirm .acts #send-offer{display:none}
  .confirm .acts{grid-column:auto}
}


/* ---------- condition tiers (Sealed / Spotless / Everyday / Honest) ---------- */
.grade i{width:7px; height:7px; border-radius:50%; background:var(--slate); margin-left:5px}
.grade{padding:4px 10px 4px 5px}
.grade--sealed{background:var(--brand-50); color:var(--brand-d)}   .grade--sealed i{background:var(--brand)}
.grade--spotless{background:var(--cash-50); color:#0B7A50}         .grade--spotless i{background:var(--cash)}
.grade--everyday{background:#EDF1F6; color:#41505F}                .grade--everyday i{background:#61748A}
.grade--honest{background:var(--amber-50); color:#96490A}          .grade--honest i{background:var(--amber)}
.foot-bottom a{color:#B4BFCB; border-bottom:1px solid #2A3540}
.foot-bottom a:hover{color:#fff; border-color:var(--mat)}

/* ---------- main nav: Buy has a panel, so Tablets isn't stranded ---------- */
.navitem{position:relative}
.navitem > a{display:inline-flex; align-items:center; gap:7px}
.navitem .caret{width:9px; height:6px; opacity:.65; transition:transform var(--dur) var(--ease)}
.navitem:hover .caret,.navitem:focus-within .caret{transform:rotate(180deg); opacity:1}
.subnav{
  position:absolute; top:100%; left:0; z-index:50; min-width:268px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 22px 44px -22px rgba(12,17,23,.55); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.navitem:hover .subnav,.navitem:focus-within .subnav{opacity:1; visibility:visible; transform:none}
.subnav a{
  display:block; padding:10px 12px; border-radius:var(--r-sm); border:0;
  color:var(--text); white-space:normal;
}
.subnav a:hover{background:var(--surface); color:var(--text)}
.subnav b{display:block; font-size:.9rem; font-weight:700; letter-spacing:-.015em}
.subnav span{
  display:block; font-family:"DM Mono",monospace; font-size:.62rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted); margin-top:2px;
}
@media(max-width:899px){
  .subnav{display:none}
  .navitem .caret{display:none}
}
@media(min-width:900px){ .mainnav .wrap{overflow:visible} }