/* ZenTuning — Skyline performance store */
:root{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);--text-sm:clamp(.875rem,.8rem + .35vw,1rem);--text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);--text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);--text-hero:clamp(2.6rem,.8rem + 6vw,6.8rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;
  --bg:#0a0a0f;--bg-2:#101018;--surface:#14141e;--surface-2:#1b1b28;--line:#262636;--line-2:#34344a;
  --text:#f1f1f5;--muted:#9a9ab0;--faint:#5c5c74;
  --hot:#ff2e88;--hot-2:#ff5aa3;--cyan:#22e4ff;--lime:#c6ff3d;--amber:#ffb020;
  --font-display:'Panchang','Arial Black',sans-serif;--font-body:'Satoshi','Inter',system-ui,sans-serif;--font-mono:'JetBrains Mono',ui-monospace,monospace;--font-jp:'Noto Sans JP',sans-serif;
  --r:14px;--r-sm:8px;--ease:cubic-bezier(.2,.8,.2,1);--max:1320px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--font-mono);letter-spacing:.04em}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:clamp(var(--space-4),4vw,var(--space-10));position:relative;z-index:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* topbar */
.topbar{background:var(--hot);color:#0a0a0f;font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;overflow:hidden;position:relative;z-index:30}
.marquee__track{display:flex;gap:var(--space-12);white-space:nowrap;padding:var(--space-2) 0;animation:mq 38s linear infinite;width:max-content}
.marquee__track span::before{content:"◆";margin-right:var(--space-12);opacity:.5}
@keyframes mq{to{transform:translateX(-50%)}}

/* header */
.hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--space-6);padding:var(--space-3) clamp(var(--space-4),4vw,var(--space-10));background:rgba(10,10,15,.78);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line);transition:padding .3s var(--ease)}
.hdr.is-scrolled{padding-block:var(--space-2)}
.brand{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.brand__mark{transition:transform .8s var(--ease)}
.brand:hover .brand__mark{transform:rotate(360deg)}
.brand__word{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:.04em}
.brand__word b{color:var(--hot);font-weight:800}
.brand__jp{font-family:var(--font-jp);font-size:var(--text-xs);color:var(--faint);writing-mode:horizontal-tb;border-left:1px solid var(--line-2);padding-left:var(--space-3)}
.nav{display:flex;gap:var(--space-2);margin-left:var(--space-4)}
.nav a{padding:var(--space-2) var(--space-4);border-radius:999px;font-size:var(--text-sm);font-weight:500;color:var(--muted);transition:color .2s,background .2s}
.nav a:hover{color:var(--text);background:var(--surface)}
.nav a.is-active{color:var(--text);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.hdr__tools{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;transition:background .2s,transform .2s;position:relative}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:active{transform:scale(.92)}
.cart-count{position:absolute;top:2px;right:0;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--hot);color:#0a0a0f;font-size:11px;font-weight:700;display:grid;place-items:center}
.cart-count.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.6)}}
.garage-pill{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:1px solid var(--line-2);border-radius:999px;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;transition:border-color .2s}
.garage-pill:hover{border-color:var(--cyan)}
.garage-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.garage-pill.is-set .dot{background:var(--lime);box-shadow:0 0 10px var(--lime)}
.burger{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:999px;font-weight:700;font-size:var(--text-sm);letter-spacing:.02em;transition:transform .2s var(--ease),box-shadow .25s,background .2s,color .2s;position:relative;overflow:hidden;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn--hot{background:var(--hot);color:#0a0a0f}
.btn--hot:hover{box-shadow:0 0 0 4px rgba(255,46,136,.25),0 10px 40px -8px var(--hot)}
.btn--ghost{border:1px solid var(--line-2);color:var(--text)}
.btn--ghost:hover{border-color:var(--text)}
.btn--cyan{background:var(--cyan);color:#0a0a0f}
.btn--cyan:hover{box-shadow:0 10px 40px -8px var(--cyan)}
.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}
.btn--block{width:100%}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);animation:rip .6s linear;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}

/* hero */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:-6% -2%;z-index:-2;background:url(../img/hero.webp) center 60%/cover no-repeat;transform:scale(1.04);will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,15,.92) 0%,rgba(10,10,15,.55) 45%,rgba(10,10,15,.1) 75%),linear-gradient(0deg,var(--bg) 0%,transparent 35%)}
.hero__inner{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--space-10);align-items:end;padding-block:var(--space-24) var(--space-16);width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--cyan)}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:var(--text-hero);line-height:.92;letter-spacing:-.02em;margin:var(--space-4) 0 var(--space-6);text-transform:uppercase}
.hero h1 .outline{color:transparent;-webkit-text-stroke:2px var(--text)}
.hero h1 .hot{color:var(--hot);text-shadow:0 0 40px rgba(255,46,136,.45)}
.hero p.lede{max-width:52ch;color:#cfcfdc;font-size:var(--text-lg);line-height:1.45;margin:0 0 var(--space-8)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero__jp{position:absolute;right:clamp(var(--space-4),3vw,var(--space-10));top:var(--space-16);writing-mode:vertical-rl;font-family:var(--font-jp);font-weight:900;font-size:clamp(2rem,4vw,4rem);color:rgba(255,255,255,.07);letter-spacing:.1em;z-index:-1}

/* gauge */
.gauge-card{justify-self:end;width:min(100%,360px);background:rgba(20,20,30,.6);backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:var(--r);padding:var(--space-5);text-align:center}
.gauge-card .lbl{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.gauge{width:100%;height:auto;display:block;margin:var(--space-2) 0}
.gauge .needle{transform-origin:150px 150px;transition:transform 1.2s cubic-bezier(.3,1.6,.5,1)}
.gauge-read{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;line-height:1}
.gauge-read small{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);font-weight:400;margin-left:4px}
.chassis-switch{display:flex;gap:var(--space-1);background:var(--bg);border-radius:999px;padding:4px;margin-top:var(--space-4)}
.chassis-switch button{flex:1;padding:var(--space-2);border-radius:999px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;color:var(--muted);transition:all .25s}
.chassis-switch button.is-on{background:var(--hot);color:#0a0a0f}
.rev-btn{margin-top:var(--space-3);width:100%}
.shake{animation:shake .5s linear}
@keyframes shake{20%,60%{transform:translate(-2px,1px)}40%,80%{transform:translate(2px,-1px)}}

/* sections */
.sec{padding-block:clamp(var(--space-12),8vw,var(--space-24));position:relative;z-index:1}
.sec__head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-6);margin-bottom:var(--space-8);flex-wrap:wrap}
.sec__head h2{font-family:var(--font-display);font-weight:800;font-size:var(--text-2xl);line-height:1;margin:var(--space-3) 0 0;text-transform:uppercase;letter-spacing:-.01em}
.sec__head p{color:var(--muted);max-width:46ch;margin:0}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* category grid */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.cat{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface);isolation:isolate}
.cat:nth-child(1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .4s;z-index:-1}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,10,15,.92),rgba(10,10,15,0) 60%)}
.cat:hover img{transform:scale(1.08);filter:saturate(1.3)}
.cat__body{position:absolute;inset:auto 0 0 0;padding:var(--space-5);display:flex;justify-content:space-between;align-items:end;gap:var(--space-3)}
.cat__name{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.02em;line-height:1.15}
.cat:nth-child(1) .cat__name{font-size:var(--text-xl)}
.cat__count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--cyan)}
.cat__arrow{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;flex-shrink:0;transition:background .3s,transform .3s}
.cat:hover .cat__arrow{background:var(--hot);border-color:var(--hot);transform:rotate(-45deg);color:#0a0a0f}

/* chassis plates */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.plate{position:relative;border-radius:var(--r);padding:var(--space-8) var(--space-6) var(--space-6);background:linear-gradient(160deg,var(--surface-2),var(--bg-2));border:1px solid var(--line);overflow:hidden;transition:transform .4s var(--ease),border-color .3s;transform-style:preserve-3d;cursor:pointer;text-align:left;width:100%}
.plate:hover{border-color:var(--hot)}
.plate.is-on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime),0 20px 60px -20px rgba(198,255,61,.35)}
.plate__code{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,7vw,5.5rem);line-height:.85;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#6a6a85);-webkit-background-clip:text;background-clip:text;color:transparent}
.plate__chip{display:inline-block;margin-top:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border-radius:4px;background:#f4f0d8;color:#1a3b1a;font-weight:600;letter-spacing:.06em;box-shadow:inset 0 0 0 2px #1a3b1a}
.plate h3{margin:var(--space-4) 0 var(--space-2);font-size:var(--text-lg)}
.plate p{color:var(--muted);margin:0;font-size:var(--text-sm)}
.plate__spec{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px dashed var(--line-2)}
.plate__spec div{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted)}
.plate__spec b{display:block;color:var(--text);font-size:var(--text-sm)}
.plate__jp{position:absolute;right:var(--space-4);top:var(--space-4);font-family:var(--font-jp);font-size:var(--text-xs);color:var(--faint)}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4)}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .35s var(--ease);transform-style:preserve-3d}
.card:hover{border-color:var(--line-2)}
.card__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2);cursor:pointer}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);filter:saturate(.9)}
.card:hover .card__img img{transform:scale(1.07);filter:saturate(1.2)}
.card__img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 45%);opacity:0;transition:opacity .3s}
.card:hover .card__img::after{opacity:1}
.card__brand{position:absolute;left:var(--space-3);top:var(--space-3);font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:var(--space-1) var(--space-2);background:rgba(10,10,15,.8);border-radius:4px;backdrop-filter:blur(6px);max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__fit{position:absolute;right:var(--space-3);top:var(--space-3);display:flex;gap:3px}
.card__fit span{font-family:var(--font-mono);font-size:10px;font-weight:600;padding:2px 5px;border-radius:3px;background:rgba(10,10,15,.8);color:var(--muted)}
.card__fit span.on{background:var(--lime);color:#0a0a0f}
.card__body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.card__sku{font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.06em}
.card__name{font-weight:500;font-size:var(--text-sm);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;cursor:pointer}
.card__name:hover{color:var(--hot-2)}
.card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:var(--space-2)}
.price{font-family:var(--font-display);font-weight:700;font-size:var(--text-base)}
.price small{font-family:var(--font-body);font-weight:500;font-size:var(--text-xs);color:var(--muted);text-decoration:line-through;margin-left:6px}
.add{width:40px;height:40px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;transition:background .2s,transform .2s,color .2s;border:1px solid var(--line-2)}
.add:hover{background:var(--hot);color:#0a0a0f;border-color:var(--hot);transform:rotate(90deg)}
.add.done{background:var(--lime);color:#0a0a0f;border-color:var(--lime)}
.stock{font-size:var(--text-xs);display:flex;align-items:center;gap:6px;color:var(--muted)}
.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.stock.low::before{background:var(--amber)}
.stock.out::before{background:var(--faint)}
.hp-tag{position:absolute;left:var(--space-3);bottom:var(--space-3);font-family:var(--font-mono);font-size:11px;font-weight:600;color:#0a0a0f;background:var(--cyan);padding:2px 6px;border-radius:3px}

/* split promo */
.promo{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.promo__img{min-height:420px;background:url(../img/banner.webp) center/cover}
.promo__body{padding:clamp(var(--space-8),5vw,var(--space-16));display:flex;flex-direction:column;justify-content:center;gap:var(--space-5)}
.promo__body h2{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1;margin:0;text-transform:uppercase}
.promo__body p{color:var(--muted);margin:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-2)}
.stats b{display:block;font-family:var(--font-display);font-size:var(--text-xl);color:var(--hot)}
.stats span{font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* brand wall */
.brandwall{display:flex;overflow:hidden;border-block:1px solid var(--line);padding-block:var(--space-6);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.brandwall__track{display:flex;gap:var(--space-16);width:max-content;animation:mq 50s linear infinite}
.brandwall:hover .brandwall__track{animation-play-state:paused}
.brandwall a{font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);color:var(--faint);text-transform:uppercase;transition:color .2s;white-space:nowrap}
.brandwall a:hover{color:var(--text)}

/* shop */
.shop-hero{padding-block:var(--space-12) var(--space-6);position:relative}
.shop-hero h1{font-family:var(--font-display);font-size:var(--text-2xl);text-transform:uppercase;margin:var(--space-3) 0 var(--space-2);line-height:1}
.shop-hero p{color:var(--muted);margin:0}
.shop{display:grid;grid-template-columns:260px 1fr;gap:var(--space-8);padding-bottom:var(--space-24)}
.filters{position:sticky;top:90px;align-self:start;display:flex;flex-direction:column;gap:var(--space-6);max-height:calc(100vh - 110px);overflow:auto;padding-right:var(--space-2)}
.filters h4{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 var(--space-3);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{padding:var(--space-1) var(--space-3);border-radius:999px;border:1px solid var(--line-2);font-size:var(--text-xs);font-weight:500;color:var(--muted);transition:all .2s;display:inline-flex;gap:6px;align-items:center}
.chip:hover{color:var(--text);border-color:var(--text)}
.chip.is-on{background:var(--text);color:var(--bg);border-color:var(--text)}
.chip em{font-style:normal;font-family:var(--font-mono);font-size:10px;opacity:.6}
.catlist{display:flex;flex-direction:column;gap:2px}
.catlist button{display:flex;justify-content:space-between;padding:var(--space-2) var(--space-3);border-radius:var(--r-sm);font-size:var(--text-sm);color:var(--muted);text-align:left;transition:all .2s}
.catlist button:hover{background:var(--surface);color:var(--text)}
.catlist button.is-on{background:var(--surface-2);color:var(--text);box-shadow:inset 3px 0 0 var(--hot)}
.catlist em{font-style:normal;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--faint)}
.sel,.inp{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}
.range{width:100%;accent-color:var(--hot)}
.range-val{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-1)}
.toggle{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);cursor:pointer}
.toggle input{appearance:none;width:38px;height:22px;border-radius:999px;background:var(--line-2);position:relative;cursor:pointer;transition:background .2s;margin:0}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .25s var(--ease)}
.toggle input:checked{background:var(--hot)}
.toggle input:checked::after{transform:translateX(16px)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap}
.toolbar .count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted)}
.toolbar .sel{width:auto}
.active-filters{display:flex;gap:var(--space-2);flex-wrap:wrap}
.empty{grid-column:1/-1;text-align:center;padding:var(--space-20) var(--space-4);border:1px dashed var(--line-2);border-radius:var(--r);color:var(--muted)}
.empty b{display:block;font-family:var(--font-display);color:var(--text);font-size:var(--text-lg);margin-bottom:var(--space-2)}
.filter-toggle{display:none}
.more{display:flex;justify-content:center;margin-top:var(--space-8)}

/* product page */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(var(--space-6),5vw,var(--space-16));padding-block:var(--space-10) var(--space-20)}
.crumbs{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);padding-top:var(--space-8)}
.crumbs a:hover{color:var(--text)}
.pdp__media{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:1;background:var(--bg-2);cursor:zoom-in}
.pdp__media img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.pdp__media.zoom img{transform:scale(1.9)}
.pdp__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-top:var(--space-3)}
.pdp__thumbs button{aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);opacity:.6;transition:opacity .2s,border-color .2s}
.pdp__thumbs button.is-on,.pdp__thumbs button:hover{opacity:1;border-color:var(--hot)}
.pdp__thumbs img{width:100%;height:100%;object-fit:cover}
.pdp__info h1{font-size:var(--text-xl);line-height:1.15;margin:var(--space-3) 0 var(--space-4);font-weight:700}
.pdp__brand{font-family:var(--font-display);font-weight:800;text-transform:uppercase;color:var(--hot);letter-spacing:.04em;font-size:var(--text-sm)}
.pdp__meta{display:flex;flex-wrap:wrap;gap:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);padding-block:var(--space-4);border-block:1px solid var(--line);margin-bottom:var(--space-5)}
.pdp__meta b{color:var(--text);font-weight:600}
.pdp__price{font-family:var(--font-display);font-weight:800;font-size:var(--text-2xl);line-height:1}
.pdp__fit{margin:var(--space-6) 0;padding:var(--space-4);border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}
.pdp__fit h4{margin:0 0 var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.fitrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.fitrow div{padding:var(--space-3);border-radius:var(--r-sm);background:var(--bg-2);text-align:center;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--faint);border:1px solid var(--line)}
.fitrow div.on{color:var(--lime);border-color:rgba(198,255,61,.4)}
.fitrow b{display:block;font-family:var(--font-display);font-size:var(--text-base);margin-bottom:2px}
.fit-alert{margin-top:var(--space-3);font-size:var(--text-sm);display:flex;gap:var(--space-2);align-items:center}
.fit-alert.ok{color:var(--lime)}.fit-alert.no{color:var(--amber)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px}
.qty button{width:40px;height:44px;font-size:1.1rem}
.qty span{min-width:28px;text-align:center;font-family:var(--font-mono)}
.buy-row{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.buy-row .btn{flex:1}
.tabs{margin-top:var(--space-8)}
.tabs__nav{display:flex;gap:var(--space-1);border-bottom:1px solid var(--line)}
.tabs__nav button{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs__nav button.is-on{color:var(--text);border-color:var(--hot)}
.tabs__panel{padding-top:var(--space-5);color:#cfcfdc;font-size:var(--text-sm)}
.tabs__panel ul{padding-left:1.1em;margin:0}
.tabs__panel li{margin-bottom:var(--space-2)}
.spec{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.spec td{padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.spec td:first-child{color:var(--muted);width:40%}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-6)}
.perks div{font-size:var(--text-xs);color:var(--muted);display:flex;gap:var(--space-2);align-items:center}
.perks svg{color:var(--cyan);flex-shrink:0}

/* build lab */
.lab{display:grid;grid-template-columns:1fr 400px;gap:var(--space-8);padding-bottom:var(--space-24)}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--space-4);overflow:hidden}
.stage__head{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);width:100%;text-align:left}
.stage__num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;background:var(--surface-2);font-size:var(--text-sm);flex-shrink:0}
.stage.has .stage__num{background:var(--hot);color:#0a0a0f}
.stage__title{font-weight:700}
.stage__sub{font-size:var(--text-xs);color:var(--muted)}
.stage__pick{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--cyan);text-align:right;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage__chev{transition:transform .3s}
.stage.open .stage__chev{transform:rotate(180deg)}
.stage__body{display:none;padding:0 var(--space-5) var(--space-5);gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.stage.open .stage__body{display:grid}
.opt{text-align:left;padding:var(--space-3);border:1px solid var(--line-2);border-radius:var(--r-sm);display:flex;flex-direction:column;gap:4px;transition:all .2s;background:var(--bg-2)}
.opt:hover{border-color:var(--text)}
.opt.is-on{border-color:var(--hot);background:rgba(255,46,136,.08);box-shadow:inset 0 0 0 1px var(--hot)}
.opt b{font-size:var(--text-xs);font-family:var(--font-display);text-transform:uppercase;color:var(--hot-2)}
.opt span{font-size:var(--text-xs);line-height:1.35}
.opt i{font-style:normal;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);display:flex;justify-content:space-between}
.dyno{position:sticky;top:90px;align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--space-5)}
.dyno h3{font-family:var(--font-display);text-transform:uppercase;font-size:var(--text-base);margin:0 0 var(--space-1)}
.dyno__sub{font-size:var(--text-xs);color:var(--muted);margin:0 0 var(--space-4)}
.dyno svg{width:100%;height:auto;display:block;background:var(--bg-2);border-radius:var(--r-sm)}
.dyno__line{transition:d .8s var(--ease)}
.dyno__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin:var(--space-4) 0}
.dyno__nums div{background:var(--bg-2);border-radius:var(--r-sm);padding:var(--space-3);text-align:center}
.dyno__nums b{display:block;font-family:var(--font-display);font-size:var(--text-lg)}
.dyno__nums div:last-child b{font-size:var(--text-sm);padding-top:.35em}
.dyno__nums span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.dyno__nums .hot b{color:var(--hot)}
.dyno__nums .cy b{color:var(--cyan)}
.dyno__list{font-size:var(--text-xs);color:var(--muted);max-height:160px;overflow:auto;margin-bottom:var(--space-4);display:flex;flex-direction:column;gap:4px}
.dyno__list div{display:flex;justify-content:space-between;gap:var(--space-3)}
.dyno__list div span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note{font-size:11px;color:var(--faint);margin-top:var(--space-3)}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--bg-2);border-left:1px solid var(--line);z-index:70;transform:translateX(100%);transition:transform .45s var(--ease);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:var(--space-5);border-bottom:1px solid var(--line)}
.drawer__head h3{font-family:var(--font-display);text-transform:uppercase;margin:0;font-size:var(--text-base)}
.ship{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--line);font-size:var(--text-xs);color:var(--muted)}
.ship__bar{height:6px;border-radius:999px;background:var(--line);margin-top:var(--space-2);overflow:hidden}
.ship__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--hot),var(--cyan));transition:width .6s var(--ease)}
.drawer__items{flex:1;overflow:auto;padding:var(--space-3) var(--space-5)}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:var(--space-3);padding-block:var(--space-3);border-bottom:1px solid var(--line);align-items:center}
.line img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-sm)}
.line__name{font-size:var(--text-xs);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line__sku{font-family:var(--font-mono);font-size:10px;color:var(--faint)}
.line .qty button{width:28px;height:28px;font-size:.9rem}
.line__right{text-align:right;display:flex;flex-direction:column;gap:4px;align-items:end}
.line__rm{font-size:11px;color:var(--faint);text-decoration:underline}
.drawer__foot{padding:var(--space-5);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--space-3)}
.sumrow{display:flex;justify-content:space-between;font-size:var(--text-sm)}
.sumrow.total{font-family:var(--font-display);font-size:var(--text-lg)}
.icon-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center}
.icon-x:hover{background:var(--surface-2)}

/* modal / search */
.modal,.search{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--space-4);opacity:0;pointer-events:none;transition:opacity .3s}
.modal.on,.search.on{opacity:1;pointer-events:auto}
.modal{background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
.modal__box{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:var(--space-6);transform:translateY(20px) scale(.97);transition:transform .4s var(--ease)}
.modal.on .modal__box{transform:none}
.modal__box h3{font-family:var(--font-display);text-transform:uppercase;margin:0 0 var(--space-2)}
.search{align-items:start;padding-top:12vh;background:rgba(5,5,8,.85);backdrop-filter:blur(8px)}
.search__box{width:min(720px,100%)}
.search__box input{width:100%;font-size:var(--text-lg);padding:var(--space-4) var(--space-5);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);outline:none}
.search__box input:focus{border-color:var(--hot)}
.search__results{margin-top:var(--space-3);display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow:auto}
.sres{display:grid;grid-template-columns:48px 1fr auto;gap:var(--space-3);align-items:center;padding:var(--space-2) var(--space-3);border-radius:var(--r-sm);text-align:left;width:100%}
.sres:hover,.sres.is-on{background:var(--surface-2)}
.sres img{width:48px;height:48px;border-radius:6px;object-fit:cover}
.sres span{font-size:var(--text-sm)}
.sres small{display:block;font-family:var(--font-mono);font-size:11px;color:var(--faint)}

/* checkout */
.steps{display:flex;gap:var(--space-2);margin:var(--space-4) 0 var(--space-6)}
.steps div{flex:1;height:4px;border-radius:2px;background:var(--line)}
.steps div.on{background:var(--hot)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.form label{display:flex;flex-direction:column;gap:6px;font-size:var(--text-xs);color:var(--muted)}
.form .full{grid-column:1/-1}
.done-burst{text-align:center;padding:var(--space-6) 0}
.done-burst svg{margin:0 auto var(--space-4)}

/* toast */
.toast{visibility:hidden;position:fixed;left:50%;bottom:var(--space-6);transform:translate(-50%,150%);background:var(--text);color:var(--bg);padding:var(--space-3) var(--space-5);border-radius:999px;font-weight:700;font-size:var(--text-sm);z-index:90;transition:transform .45s var(--ease);display:flex;gap:var(--space-2);align-items:center;box-shadow:0 20px 50px -10px rgba(0,0,0,.6);max-width:calc(100% - 2rem)}
.toast.on{transform:translate(-50%,0);visibility:visible}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center;padding-block:var(--space-16)}
.about h1{font-family:var(--font-display);font-size:var(--text-2xl);text-transform:uppercase;line-height:1;margin:var(--space-3) 0 var(--space-5)}
.about p{color:#cfcfdc}
.faq{display:flex;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-20)}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--space-4) var(--space-5)}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";font-family:var(--font-mono);color:var(--hot);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:var(--space-3) 0 0;font-size:var(--text-sm)}
.spin-slow{animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* footer */
.ftr{border-top:1px solid var(--line);background:var(--bg-2);position:relative;z-index:1}
.ftr__grid{max-width:var(--max);margin:0 auto;padding:var(--space-16) clamp(var(--space-4),4vw,var(--space-10));display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.6fr;gap:var(--space-8)}
.ftr h4{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 var(--space-4);font-weight:600}
.ftr a{display:block;font-size:var(--text-sm);padding-block:4px;color:#cfcfdc}
.ftr a:hover{color:var(--hot)}
.ftr__brand p{color:var(--muted);font-size:var(--text-sm);margin:var(--space-4) 0 0;max-width:32ch}
.ftr__news p{color:var(--muted);font-size:var(--text-sm);margin:0 0 var(--space-3)}
.news-row{display:flex;gap:var(--space-2)}
.news-row input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:var(--space-2) var(--space-4)}
.news-ok{color:var(--lime)!important;margin-top:var(--space-3)!important}
.ftr__base{max-width:var(--max);margin:0 auto;padding:var(--space-5) clamp(var(--space-4),4vw,var(--space-10));border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--text-xs);color:var(--faint);flex-wrap:wrap}

/* responsive */
@media (max-width:1100px){
  .ftr__grid{grid-template-columns:1fr 1fr 1fr}
  .ftr__brand,.ftr__news{grid-column:span 3}
  .lab{grid-template-columns:1fr}
  .dyno{position:static}
  .brand__jp{display:none}
}
@media (max-width:900px){
  .nav{position:fixed;top:0;left:0;right:0;flex-direction:column;background:var(--bg-2);padding:90px var(--space-6) var(--space-6);margin:0;transform:translateY(-100%);visibility:hidden;transition:transform .4s var(--ease),visibility .4s;z-index:-1;border-bottom:1px solid var(--line)}
  .nav.on{transform:none;visibility:visible}
  .nav a{font-size:var(--text-lg);padding:var(--space-3) var(--space-4)}
  .burger{display:grid}
  .hero__inner{grid-template-columns:1fr}
  .gauge-card{justify-self:stretch;width:100%}
  .cats{grid-template-columns:repeat(2,1fr)}
  .plates{grid-template-columns:1fr}
  .promo{grid-template-columns:1fr}
  .promo__img{min-height:260px}
  .shop{grid-template-columns:1fr}
  .filters{position:fixed;inset:auto 0 0 0;max-height:80vh;background:var(--bg-2);z-index:75;padding:var(--space-6);border-top:1px solid var(--line-2);border-radius:var(--r) var(--r) 0 0;transform:translateY(105%);transition:transform .4s var(--ease)}
  .filters.on{transform:none}
  .filter-toggle{display:inline-flex}
  .pdp{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
}
@media (max-width:560px){
  .garage-pill{display:none}
  .brand__word{font-size:.9rem}
  .brand__mark{width:32px;height:32px}
  .hdr{gap:var(--space-2)}
  .hdr__tools{gap:0}
  .icon-btn{width:38px;height:38px}
  .price{font-size:var(--text-sm)}
  .add{width:34px;height:34px}
  .card__brand{max-width:80%}
  .card__foot{gap:var(--space-2)}
  .price small{display:none}
  .grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
  .card__body{padding:var(--space-3)}
  .card__fit{display:none}
  .stats{grid-template-columns:1fr 1fr 1fr}
  .form{grid-template-columns:1fr}
  .perks{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .ftr__brand,.ftr__news{grid-column:span 2}
  .hero h1 .outline{-webkit-text-stroke-width:1.5px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}