/* Hexfold — editorial layer (loaded after car-parts.css). Warm stone + graphite, one muted brass accent, Instrument Serif display, Manrope text. */
:root{
  --bg:#F1EEE8;--panel:#FAF8F4;--panel-2:#E8E3DA;
  --ink:#1C1E21;--ink-2:#2A2D31;--ink-3:#3A3D42;
  --cob:#1C1E21;--cob-d:#0F1012;--cob-l:#ECE6DB;
  --haz:#B39368;--haz-d:#9C7E55;
  --brass:#A7865A;
  --red:#A04A3E;--ok:#3F6B50;--warn:#94702F;
  --mut:#6F6A62;
  --line:rgba(28,30,33,.12);--line-2:rgba(28,30,33,.06);--line-l:rgba(241,238,232,.14);
  --disp:"Instrument Serif",Georgia,serif;--sans:"Manrope",system-ui,sans-serif;--mono:"Manrope",system-ui,sans-serif;
  --cut:0px;--ease:cubic-bezier(.2,.7,.2,1);--r:6px
}
body{font-family:var(--sans);letter-spacing:.003em;background:var(--bg);color:var(--ink)}
*{clip-path:none!important}
h1,h2,h3{font-family:var(--disp);font-weight:400;text-transform:none;letter-spacing:-.01em;line-height:1}
h1 em,h2 em,h3 em{font-style:italic;color:var(--brass)}
::selection{background:#d9cbb4}

/* eyebrows */
.kicker{font:600 10.5px/1.2 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:14px}
.kicker:before{content:"";width:30px;height:1px;background:currentColor;flex:none}
.tag{background:none;padding:0;font:600 10.5px/1.2 var(--sans);letter-spacing:.3em;color:inherit;opacity:.85;gap:14px}
.tag i{display:none}
.tag:before{content:"";width:30px;height:1px;background:currentColor}

/* buttons */
.btn{min-height:48px;padding:0 24px;border-radius:99px;border:1px solid transparent;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;box-shadow:none!important}
.btn-cob,.btn-haz{background:var(--ink);color:#F6F2EC;border-color:var(--ink)}
.btn-cob:hover,.btn-haz:hover{background:#000;color:#fff}
.btn-line{border-color:rgba(28,30,33,.28);background:transparent;color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-ghost{border-color:rgba(246,242,236,.35);color:#F6F2EC;background:transparent}

/* nav */
.nav{background:rgba(241,238,232,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo svg{color:var(--brass);width:28px;height:28px}
.logo span{font:400 25px/1 var(--disp);letter-spacing:.01em}
.nav-links a{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.nav-links a:after{height:1px;background:var(--brass)}
.garage,.nav-staff{border-radius:99px;border:1px solid var(--line);font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.garage svg{color:var(--brass)}
.garage.has{background:var(--cob-l);border-color:var(--line)}
.cart-btn{border-radius:99px;background:var(--ink)}
.cart-btn b{background:var(--brass);color:#fff;border-radius:99px;font:700 10px/1 var(--sans)}
.menu{background:var(--ink);color:#F1EEE8}
.menu nav a{font:400 clamp(34px,9vw,52px)/1.2 var(--disp);text-transform:none;letter-spacing:-.01em}
.menu nav a small{font:600 10.5px var(--sans);color:var(--brass);letter-spacing:.2em}
.menu-foot{color:#b7b0a5}
.rib{font-family:var(--sans)}

/* ---------- home hero (static, editorial) ---------- */
.hero.hx{position:relative;isolation:isolate;background:#16171A;color:#F1EEE8;padding:calc(var(--rib) + var(--navh) + clamp(40px,8vw,110px)) 0 clamp(36px,5vw,64px);overflow:hidden}
.hx-media{position:absolute;inset:0;z-index:-1;margin:0}
.hx-media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;display:block}
.hx-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#16171A 0,rgba(22,23,26,.86) 30%,rgba(22,23,26,.2) 62%,rgba(22,23,26,0) 80%),linear-gradient(0deg,#16171A 0,rgba(22,23,26,0) 32%)}
.hx-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:40px;min-height:clamp(380px,48vw,600px)}
.hx-copy{max-width:620px;align-self:center}
.hx-k{color:#cfc6b8;margin-bottom:26px}
.hx-h{font:400 clamp(58px,8.2vw,132px)/.9 var(--disp)!important;letter-spacing:-.02em!important;text-transform:none!important;margin:0}
.hx-h .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hx-h .ln>span{display:block}
.hx-h em{color:#D4BC96;font-style:italic}
.hx-p{max-width:470px;margin-top:26px;font-size:15.5px;line-height:1.75;color:#cfc8bd}
.hx-facts{list-style:none;padding:0;margin:34px 0 0;display:flex;gap:38px;border-top:1px solid rgba(241,238,232,.16);padding-top:20px}
.hx-facts b{display:block;font:400 34px/1 var(--disp);color:#F1EEE8}
.hx-facts span{font:600 10px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#a9a195}
.hx-spec{justify-self:end;align-self:end;display:grid;gap:4px;padding:16px 18px;border:1px solid rgba(241,238,232,.18);border-radius:6px;background:rgba(22,23,26,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:260px}
.hx-spec span{font:600 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#D4BC96}
.hx-spec b{font:400 22px/1.1 var(--disp)}
.hx-spec small{font-size:12px;color:#b7b0a5}
.hx-finder{margin-top:clamp(30px,4vw,54px)}
.hero .finder{background:rgba(241,238,232,.06);border:1px solid rgba(241,238,232,.16);border-radius:8px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:20px 22px}
.finder-h b{font:400 clamp(22px,2vw,28px)/1.1 var(--disp);text-transform:none;letter-spacing:0}
.finder-h span{font:500 12px/1.3 var(--sans);color:#a9a195}
.veh-k{font:600 10px/1 var(--sans);letter-spacing:.24em;color:#D4BC96}
.veh select{border-radius:6px}
.hero .veh select{background:#F6F2EC;color:var(--ink);border:1px solid transparent}
.hero .veh select:disabled{background:rgba(241,238,232,.12);color:#9d968a}
.hero .veh .btn{background:#F1EEE8;color:var(--ink);border-color:#F1EEE8}
.hero .veh .btn:hover{background:#fff}

/* ticker: a quiet ruled strip */
.ticker{transform:none;margin:0;background:var(--panel);border-block:1px solid var(--line)}
.ticker-t{font:400 clamp(18px,1.8vw,24px)/1 var(--disp);text-transform:none;letter-spacing:0;padding:18px 0;color:var(--ink)}
.ticker-t small{background:none;color:var(--mut);font:600 10px/1 var(--sans);letter-spacing:.18em;border:1px solid var(--line);border-radius:99px;padding:5px 9px}

/* sections */
.sec-head h2,.fit-c h2,.ware-c h2,.how h2,.rel h2{font-size:clamp(40px,5.4vw,84px);line-height:.95}
.cats,.best,.fit,.how,.nums{padding-top:clamp(80px,10vw,150px)}
.cat,.pc,.ocard,.kpi,.ord,.bcol,.opts button,.fitbox,.fit-res,.sum,.trk,.trk-f,.vbar,.sfilters,.line,.lines>*{border-radius:6px}
.cat{background:var(--panel);border:1px solid var(--line)}
.cat:after{background:var(--brass);box-shadow:none;height:1px}
.cat img,.pc img,.pd-main img,.pd-thumbs img{filter:saturate(.55) contrast(1.02);transition:transform 1.2s var(--ease),filter .6s}
.cat:hover img,.pc:hover img{transform:scale(1.04);filter:saturate(.8)}
.cat-b b{font:400 20px/1.1 var(--disp);text-transform:none;letter-spacing:0}
.cat-b small{font:500 11px/1 var(--sans);letter-spacing:.06em}
.pc{background:var(--panel);border:1px solid var(--line)}
.pc-fit{border-radius:99px;font:600 9.5px/1 var(--sans);letter-spacing:.14em;background:rgba(250,248,244,.92);border:1px solid var(--line);color:var(--ink)}
.pc-fit.no{background:#F3E6E2;border-color:#E2C9C2;color:var(--red)}
.pc-fit.uni{background:var(--cob-l);border-color:var(--line);color:var(--ink-3)}
.pc-fit.uni:before{background:var(--brass)}
.pc-badge{transform:none;border-radius:99px;background:var(--ink);color:#F1EEE8;font:600 9.5px/1 var(--sans);letter-spacing:.14em}
.pc-sku,.pc-stock{font:500 11px/1.3 var(--sans);letter-spacing:.02em}
.pc-name,.pc h3{font-family:var(--sans);font-weight:600}
.pc-pr b,.pc-pr{font-family:var(--disp);font-weight:400;font-size:22px}
.pc-add{border-radius:99px;background:var(--ink)}
.pc-add:hover{background:var(--brass)}
.fit-ph img,.ware-ph img{transition:transform 1.4s var(--ease)}
.fit-media:hover img,.ware-media:hover img{transform:scale(1.03)}
.ph{border-radius:6px;overflow:hidden}
.fit-l b{font:400 32px/1 var(--disp);color:var(--ink)}
.fit-l li{border-color:var(--line)}
.how{background:#1C1E21;color:#F1EEE8}
.how .kicker{color:#b7b0a5}.how h2 em{color:#D4BC96}
.how-l li{border-color:rgba(241,238,232,.14);border-radius:6px}
.how-l span{font:600 10.5px/1 var(--sans);letter-spacing:.2em;color:#D4BC96}
.how-l b{font:400 26px/1.1 var(--disp);text-transform:none;letter-spacing:0}
.how-l li:after{height:1px;background:#D4BC96}
.nums b{font:400 clamp(48px,5.4vw,88px)/1 var(--disp);letter-spacing:-.02em}
.nums span{font:600 10.5px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.ware{background:var(--panel-2);color:var(--ink)}
.ware .kicker{color:var(--mut)}.ware h2 em{color:var(--brass)}
.ware .btn-ghost{border-color:rgba(28,30,33,.28);color:var(--ink)}
.ware-ph2{border:0;box-shadow:0 24px 50px -24px rgba(28,30,33,.45);border-radius:6px}
.foot{background:#16171A;color:#d7d0c4}
.foot .logo svg{color:#D4BC96}.foot-nav a{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}.foot-nav a:hover{color:#D4BC96}
.foot-word{font:400 clamp(80px,19vw,320px)/.8 var(--disp);letter-spacing:-.02em;-webkit-text-stroke:0;color:rgba(241,238,232,.06)}

/* inner pages */
.phead{padding-top:calc(var(--rib) + var(--navh) + clamp(40px,6vw,80px))}
.ph-h{font:400 clamp(52px,7vw,110px)/.92 var(--disp)!important;text-transform:none!important}
.crumbs{font:500 12px/1.4 var(--sans)}
.crumbs a:hover{color:var(--brass)}
.vbar{background:#1C1E21;color:#F1EEE8;border-radius:8px}
.vbar-cur b{font:400 22px/1.1 var(--disp);text-transform:none;letter-spacing:0;color:#D4BC96}
.vbar .veh select{background:#F6F2EC;border-radius:6px}
.vbar .veh .btn{background:#F1EEE8;color:var(--ink);border-color:#F1EEE8}
.chips button{border-radius:99px;border:1px solid var(--line);font:600 11px/1 var(--sans);letter-spacing:.06em}
.chips button.is-on{background:var(--ink);color:#F1EEE8;border-color:var(--ink)}
.chips button.is-on small{color:#D4BC96}
.chips button small{font:500 10.5px/1 var(--sans)}
.sf-grp h3{font:600 10.5px/1 var(--sans);letter-spacing:.2em}
.sf-grp h3 b{color:var(--brass)}
.tog input:checked+span{background:var(--ink)}
input[type=range]{background:linear-gradient(var(--ink),var(--ink)) 0 50% / var(--p,100%) 2px no-repeat,linear-gradient(var(--line),var(--line)) 0 50% / 100% 2px no-repeat}
input[type=range]::-webkit-slider-thumb{background:#fff;border:1px solid var(--ink);border-radius:50%}
input[type=range]::-moz-range-thumb{background:#fff;border:1px solid var(--ink);border-radius:50%}
.sbar-n{font:500 13px/1 var(--sans)}
.sbar-n b{font:400 34px/1 var(--disp);letter-spacing:0}
.sel span{font:600 10px/1 var(--sans);letter-spacing:.16em}
.search,.sel select,.fld input,.fld select,.trk-f input{border-radius:6px}
.pd-h{font:400 clamp(40px,4.4vw,64px)/1 var(--disp)!important;text-transform:none!important}
.pd-sku,.pd-rate{font:500 12px/1.3 var(--sans);letter-spacing:.04em}
.pd-price b{font:400 clamp(34px,3.2vw,46px)/1 var(--disp);letter-spacing:0}
.pd-price span{font:500 12px/1 var(--sans)}
.pd-thumbs button{border-radius:6px;overflow:hidden}
.pd-thumbs button.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pd-var h3{font:600 10.5px/1 var(--sans);letter-spacing:.2em}
.pd-var h3 span{color:var(--brass)}
.pd-var button{border-radius:99px}
.fit-res b{font:400 22px/1.2 var(--disp);text-transform:none;letter-spacing:0}
.fit-res.ok{background:#E7EEE7;color:#2E5540}
.fit-res.no{background:#F3E6E2;color:var(--red)}
.fit-res.uni{background:var(--cob-l);color:var(--ink-2)}
.addfit{border-radius:6px}
.addfit input,.check input{accent-color:var(--ink)}
.qty{border-radius:99px;overflow:hidden}
.qty input{font:600 16px/1 var(--sans)}
.pd-ship li b{font:600 10.5px/1.9 var(--sans);letter-spacing:.14em;color:var(--brass)}
.tabs button{border-radius:99px;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.tabs button.is-on{background:var(--ink);color:#F1EEE8}
.spec dt{font:600 10.5px/1.7 var(--sans);letter-spacing:.14em}
.fits-l li small,.rev small,.rev-bars span{font:500 11.5px/1.4 var(--sans)}
.box-l li:before{content:"—";color:var(--brass)}
.rev-sum b{font:400 72px/1 var(--disp);letter-spacing:0}
.rev-bars i,.rev-bars b{background:var(--ink)}
.steps li{border-radius:99px}
.steps b{border-radius:50%;font:600 11px/1 var(--sans)}
.steps li.is-on b{background:var(--ink);color:#F1EEE8}
.steps li.is-done{background:var(--cob-l);color:var(--ink-2)}
.line-t small,.line-warn,.line-ok{font-family:var(--sans)}
.line-warn{color:var(--red)}.line-ok{color:var(--ok)}
.opts button{border:1px solid var(--line);background:var(--panel)}
.opts button b{font:400 21px/1.15 var(--disp);text-transform:none;letter-spacing:0}
.opts button i{font:600 11.5px/1.3 var(--sans);color:var(--brass)}
.opts button.is-on{border-color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--ink)!important}
.fld>span{font:600 10px/1.2 var(--sans);letter-spacing:.18em}
.sum{background:var(--panel);border:1px solid var(--line)}
.sum-dl dd{font:600 13px/1.5 var(--sans)}
.sum-tot span{font:600 10.5px var(--sans);letter-spacing:.2em}
.sum-tot b{font:400 36px/1 var(--disp);letter-spacing:0}
.done-ic{background:var(--ink);color:#F1EEE8;border-radius:50%}
.done-ref{font:600 13px/1 var(--sans);letter-spacing:.06em;color:var(--brass)}
.trk-hint button{border-radius:99px;font:600 11.5px/1 var(--sans);padding:6px 10px}
.trk-head p{font:500 13px/1.4 var(--sans)}
.trk-eta{background:var(--cob-l);border-radius:6px;color:var(--ink)}
.tl li.done:before,.tl li.done:after{background:var(--ink);border-color:var(--ink)}
.tl li.now:after{background:var(--brass);border-color:var(--brass)}
.tl b{font:400 20px/1.2 var(--disp);text-transform:none;letter-spacing:0}
.tl small,.trk-item small{font:500 11.5px/1.3 var(--sans)}
.trk-map{background:#1C1E21;border-radius:8px}
.toast{background:var(--ink);border-radius:99px;font-family:var(--sans)}

/* staff / warehouse board */
.ops{background:var(--bg)}
.ops-top{background:var(--panel);border-bottom:1px solid var(--line);color:var(--ink)}
.ops-t{background:none;color:var(--mut);font:600 10.5px/1 var(--sans);letter-spacing:.2em;padding:0}
.ops-tabs button{border-radius:99px;font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.ops-tabs button.is-on{background:var(--ink);color:#F1EEE8}
.ops-tabs b{background:var(--brass);border-radius:99px;font:700 10px/1 var(--sans)}
.live{font:600 12px/1 var(--sans)}
.kpi{background:var(--panel);border:1px solid var(--line)}
.kpi small{font:600 10px/1.3 var(--sans);letter-spacing:.16em}
.kpi b{font:400 clamp(30px,2.6vw,40px)/1 var(--disp);letter-spacing:0}
.kpi.alert{background:#1C1E21;color:#F1EEE8}
.kpi.alert small,.kpi.alert span{color:#D4BC96}
.bcol-h b{font:400 22px/1 var(--disp);text-transform:none;letter-spacing:0}
.bcol-h small{font:600 10.5px/1 var(--sans);color:var(--brass)}
.ord{background:var(--panel);border:1px solid var(--line)}
.ord.web{border:1px solid var(--ink);box-shadow:none}
.ord-t b{font:600 14px/1 var(--sans)}
.ord-t small{font:500 11px/1 var(--sans)}
.ord-ship{border-radius:99px;font:600 9.5px/1 var(--sans);letter-spacing:.12em;padding:5px 8px}
.ord-ship.same{background:var(--cob-l);color:var(--ink)}
.ord-ship.collect{background:#E7EEE7;color:#2E5540}
.pick li code{background:var(--panel-2);color:var(--ink);font:600 11px/1 var(--sans);border-radius:4px}
.pick li em{font:600 11px/1 var(--sans)}
.ocard-h>span{font:500 12px var(--sans)}
.tbl th{font:600 10px/1.2 var(--sans);letter-spacing:.16em;border-bottom:1px solid var(--line)}
.tbl td.m{font:500 12.5px var(--sans)}
.st{border-radius:99px;font:600 9.5px/1 var(--sans);letter-spacing:.12em;padding:5px 8px}
.st.po{background:var(--cob-l);color:var(--ink)}
.dr-dl dt{font:600 10px/1.8 var(--sans);letter-spacing:.16em}
.label-p{font:600 13px/1.3 var(--sans)}
.drawer-in{border-radius:8px 0 0 8px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hx-in{grid-template-columns:1fr;min-height:0}
  .hx-spec{display:none}
}
@media (max-width:820px){
  .hero.hx{padding-top:calc(var(--rib) + var(--navh));padding-bottom:28px}
  .hx-media{position:relative;inset:auto;height:min(52vw,320px);margin:0 0 -40px}
  .hx-media img{object-position:72% 50%}
  .hx-media:after{background:linear-gradient(0deg,#16171A 4%,rgba(22,23,26,0) 60%)}
  .hx-copy{position:relative}
  .hx-k{margin-bottom:16px;font-size:9.5px}
  .hx-h{font-size:clamp(46px,13vw,66px)!important}
  .hx-p{font-size:14.5px;margin-top:16px}
  .hx-facts{gap:22px;margin-top:22px}
  .hx-facts b{font-size:28px}
  .hx-finder{margin-top:26px}
  .hero .finder{padding:18px 16px}
  .sec-head h2,.fit-c h2,.ware-c h2,.how h2,.rel h2{font-size:clamp(36px,10vw,52px)}
  .ph-h{font-size:clamp(44px,12vw,64px)!important}
  .cats,.best,.fit,.how,.nums{padding-top:72px}
  .chips button,.pd-var button,.tabs button,.ops-tabs button,.trk-hint button{min-height:40px}
  .foot-word{font-size:26vw}
}
/* fixes */
.ticker{transform:none!important;margin-inline:0!important}
.ware-c p:not(.kicker){color:var(--mut)}
.ware-ph{border:0;border-radius:6px}
.cat-g img,.pgrid img,[data-pd-main] img,[data-pd-thumbs] img,.lines img,.trk img{filter:saturate(.16) sepia(.08) contrast(1.03)}
.cat-g a:hover img,.pgrid article:hover img,.pgrid a:hover img{filter:saturate(.35) sepia(.05)}
.how{background-image:none}
.fit-res.ask{background:var(--cob-l);color:var(--ink)}
.fit-res.yes{background:#E6EDE6;color:#2E5540}
.fit-res svg [fill="#FFD400"],.fit-res svg [fill="#ffd400"]{fill:var(--brass)}
.tog span{border-radius:99px;border:1px solid rgba(28,30,33,.35);background:var(--panel)}
.tog span:after{border-radius:50%;top:2.5px;left:3px;width:15px;height:15px;background:var(--ink-3)}
.tog input:checked+span{background:var(--ink);border-color:var(--ink)}
.tog input:checked+span:after{background:#F1EEE8}
.bcol{border:1px solid var(--line)!important;background:var(--panel)}
.tl li:before{height:2px;top:11px}
.tl li:after{border-radius:50%;border-width:1px}
.tl li.now:after{animation:none;box-shadow:0 0 0 5px rgba(167,134,90,.18)}
.trk-map path#rt{stroke:#D4BC96}
.trk-map circle{fill:#F1EEE8;stroke:#1C1E21}
.trk-map circle[cx]{fill:#D4BC96;stroke:none}
.veh select:disabled{background:rgba(241,238,232,.12)!important;color:#9d968a!important;border-color:rgba(241,238,232,.14)!important}
.veh select{min-height:46px;border-radius:6px!important}
.co-empty{border-radius:6px;border-style:solid;border-color:var(--line)}
.btn:disabled,.btn[disabled]{opacity:.45}
.burger{border-radius:99px!important;border:1px solid var(--line)!important;width:44px;height:44px}
.trk-f,.fitbox{border-width:1px!important;border-color:rgba(28,30,33,.2)!important}
.addfit{border:1px solid var(--line)!important}
.bcol-h{border-bottom:1px solid var(--line)}
@media (max-width:820px){
  .ops .btn,.ops-back,.drawer .btn{min-height:40px}
  .tog{min-height:40px}
  .search,.sel{min-height:44px}
}