/* ============================================================
   E-PARTS.CA — e-bike replacement parts
   Yellow / black. Built to read fast.
   ============================================================ */

:root{
  --black:#0A0A0A;
  --ink:#141414;
  --panel:#1A1A1A;
  --line:#2A2A2A;
  --yellow:#FFE500;
  --yellow-dim:#C7B300;
  --white:#fff;
  --grey:#8A8A8A;
  --dim:#5C5C5C;
  --green:#00E06A;
  --red:#FF3B30;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:clamp(16px,4vw,40px);
  --maxw:1480px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--white);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--yellow);color:#000}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* ---------- speed type ---------- */
.fast{font-style:italic;font-weight:900;letter-spacing:-.03em;text-transform:uppercase}
.h1{font-size:clamp(40px,8.5vw,104px);line-height:.88}
.h2{font-size:clamp(26px,4vw,46px);line-height:.95}
.h3{font-size:clamp(18px,2vw,24px);line-height:1}
.label{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- chrome ---------- */
.bar{background:var(--yellow);color:#000;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:8px var(--pad);overflow:hidden;white-space:nowrap}
.bar span{display:inline-block;padding:0 30px}

header{position:sticky;top:0;z-index:100;background:rgba(10,10,10,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:26px;padding:14px var(--pad)}
.logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.logo-mark{width:36px;height:36px;flex:0 0 36px}
.logo-txt{font-style:italic;font-weight:900;font-size:23px;letter-spacing:-.045em;text-transform:uppercase}
.logo-txt b{color:var(--yellow)}
.nav-links{display:flex;gap:22px;margin-left:8px}
.nav-links a{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);transition:color .18s}
.nav-links a:hover,.nav-links a.on{color:var(--yellow)}
.search{flex:1;position:relative;max-width:520px}
.search input{width:100%;background:var(--ink);border:1px solid var(--line);color:#fff;font-family:var(--sans);font-size:14px;padding:11px 14px 11px 40px;border-radius:2px}
.search input::placeholder{color:var(--dim)}
.search input:focus{outline:none;border-color:var(--yellow)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--dim)}
.nav-act{display:flex;align-items:center;gap:16px;margin-left:auto}
.icon-btn{position:relative;background:none;border:0;color:#fff;cursor:pointer;padding:6px;display:flex}
.icon-btn svg{width:21px;height:21px}
.icon-btn:hover{color:var(--yellow)}
.pip{position:absolute;top:0;right:0;background:var(--yellow);color:#000;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.burger{display:none}
@media(max-width:1080px){.nav-links{display:none}.burger{display:flex}}
@media(max-width:680px){.search{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--yellow);color:#000;border:0;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:15px 26px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:transform .16s,background .16s}
.btn:hover{background:#fff;transform:translateX(3px)}
.btn svg{width:15px;height:15px}
.btn-lg{padding:19px 40px;font-size:15px}
.btn-o{background:transparent;color:var(--yellow);border:1px solid var(--yellow);clip-path:none}
.btn-o:hover{background:var(--yellow);color:#000}
.btn-blk{background:#000;color:var(--yellow)}
.btn-blk:hover{background:var(--ink);color:#fff}

/* ---------- layout ---------- */
section{padding:clamp(48px,7vw,86px) var(--pad)}
.wrap{max-width:var(--maxw);margin:0 auto}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.head .label{display:block;margin-bottom:9px}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(40px,6vw,72px) var(--pad) clamp(40px,6vw,64px);overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(100deg,transparent 0 38px,rgba(255,229,0,.045) 38px 40px);
  pointer-events:none}
.hero::after{content:'';position:absolute;right:-16%;top:-30%;width:70%;height:170%;
  background:radial-gradient(ellipse at center,rgba(255,229,0,.15) 0%,transparent 62%);pointer-events:none}
.hero-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;display:grid;gap:clamp(28px,4vw,54px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
@media(max-width:960px){.hero-in{grid-template-columns:1fr}}
.hero h1{margin:14px 0 0}
.hero h1 em{color:var(--yellow);font-style:italic}
.hero p.sub{color:var(--grey);font-size:17px;max-width:46ch;margin-top:20px}
.stats{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.stat b{display:block;font-style:italic;font-weight:900;font-size:30px;letter-spacing:-.03em;color:var(--yellow)}
.stat span{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ---------- fitment finder ---------- */
.finder{background:var(--yellow);color:#000;padding:26px;position:relative;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.finder h2{font-style:italic;font-weight:900;font-size:26px;letter-spacing:-.03em;text-transform:uppercase;line-height:.95}
.finder p{font-size:13px;font-weight:600;margin:7px 0 18px;opacity:.72}
.f-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.f-grid .full{grid-column:1/-1}
.fld label{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px;opacity:.65}
.fld select{width:100%;background:#000;color:#fff;border:0;font-family:var(--sans);font-size:14px;font-weight:600;padding:13px 12px;cursor:pointer;border-radius:2px}
.fld select:disabled{opacity:.35;cursor:not-allowed}
.fld select:focus{outline:2px solid #000;outline-offset:2px}
.finder .btn{width:100%;background:#000;color:var(--yellow)}
.finder .btn:hover{background:var(--ink);color:#fff}
.saved{margin-top:14px;font-size:12px;font-weight:700;display:none;align-items:center;gap:8px}
.saved.on{display:flex}
.saved svg{width:15px;height:15px}

/* ---------- category tiles ---------- */
.cats{display:grid;gap:2px;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));background:var(--line)}
.cat{background:var(--ink);padding:26px 22px;display:flex;flex-direction:column;gap:14px;min-height:168px;position:relative;transition:background .18s}
.cat:hover{background:var(--panel)}
.cat:hover .cat-ico{color:var(--yellow);transform:translateX(4px)}
.cat-ico{width:30px;height:30px;color:var(--grey);transition:color .18s,transform .18s}
.cat h3{font-style:italic;font-weight:900;font-size:17px;letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.cat span{font-size:11px;color:var(--dim);font-weight:600;margin-top:auto}
.cat::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--yellow);transition:width .22s}
.cat:hover::after{width:100%}

/* ---------- product grid ---------- */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.card{background:var(--ink);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.card:hover{border-color:var(--yellow);transform:translateY(-3px)}
.card-img{aspect-ratio:1;background:var(--panel);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-img svg{width:52%;height:52%;color:#333;transition:color .2s,transform .3s}
.card:hover .card-img svg{color:var(--yellow);transform:scale(1.06)}
.tag{position:absolute;top:9px;left:9px;background:var(--yellow);color:#000;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px}
.tag.oem{background:#fff}
.tag.out{background:var(--red);color:#fff}
.card-b{padding:15px;display:flex;flex-direction:column;gap:6px;flex:1}
.brand{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.card h3{font-size:14px;font-weight:700;line-height:1.3}
.sku{font-size:11px;color:var(--dim)}
.fitrow{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;margin-top:2px}
.fitrow svg{width:13px;height:13px;flex:0 0 13px}
.fits{color:var(--green)}
.nofit{color:var(--dim)}
.price{margin-top:auto;padding-top:10px;display:flex;align-items:baseline;gap:8px}
.price b{font-style:italic;font-weight:900;font-size:21px;letter-spacing:-.03em}
.price s{color:var(--dim);font-size:13px}
.stock{font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.dot.low{background:var(--yellow)}
.dot.no{background:var(--red)}

/* ---------- strip / brands ---------- */
.brands{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));background:var(--line);border:1px solid var(--line)}
.brands div{background:var(--black);padding:22px 14px;text-align:center;font-style:italic;font-weight:900;font-size:15px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dim);transition:color .18s,background .18s}
.brands div:hover{color:var(--yellow);background:var(--ink)}

/* ---------- value props ---------- */
.props{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));background:var(--line)}
.prop{background:var(--black);padding:28px 24px}
.prop svg{width:26px;height:26px;color:var(--yellow);margin-bottom:14px}
.prop h3{font-style:italic;font-weight:900;font-size:16px;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:7px}
.prop p{font-size:13px;color:var(--grey)}

/* ---------- catalog ---------- */
.cat-layout{display:grid;gap:24px;grid-template-columns:250px minmax(0,1fr);align-items:start}
@media(max-width:900px){.cat-layout{grid-template-columns:1fr}}
.filters{background:var(--ink);border:1px solid var(--line);padding:20px;position:sticky;top:88px}
.fgroup{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.fgroup:last-child{border:0;margin:0;padding:0}
.fgroup h4{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:11px}
.fgroup label{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--grey);padding:5px 0;cursor:pointer}
.fgroup label:hover{color:#fff}
.fgroup input{accent-color:var(--yellow);width:15px;height:15px;cursor:pointer}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.count{font-size:13px;color:var(--grey)}
.count b{color:#fff}
.sort{background:var(--ink);border:1px solid var(--line);color:#fff;font-family:var(--sans);font-size:13px;padding:9px 12px;cursor:pointer}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:52px var(--pad) 30px;background:var(--ink)}
.fgrid{max-width:var(--maxw);margin:0 auto;display:grid;gap:32px;grid-template-columns:1.4fr repeat(3,1fr)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
footer h4{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:13px}
footer a{display:block;font-size:13px;color:var(--grey);padding:4px 0}
footer a:hover{color:var(--yellow)}
.legal{max-width:var(--maxw);margin:34px auto 0;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--dim)}