/* REVOLT EV shop. Follows the brand design guide: Neon Blue (#00A8FF) and Sunset Orange (#FF6A1F)
   on solid black or white, Chakra Petch Bold for headings, Inter for body text. */
:root{
  --bg:#FFFFFF; --ink:#000000; --muted:#555555; --line:#E3E3E3; --surface:#F5F5F5;
  --orange:#FF6A1F; --blue:#00A8FF; --link:#000000; --danger:#C21F1F; --ok:#1B7A3A;
  --logo-bg:#FFFFFF; --wm-desc-color:#3A4560;
  --head:"Chakra Petch","Arial Narrow",Arial,sans-serif;
  --body:Inter,Arial,sans-serif;
  --wm-scale:.66; --wm-clear:calc(66px * var(--wm-scale));
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --ink:#FFFFFF; --muted:#A3A3A3; --line:#262626; --surface:#111111;
    --link:#00A8FF; --danger:#FF7A7A; --ok:#6FD39C; --logo-bg:#000000; --wm-desc-color:#9FB8FF;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --ink:#FFFFFF; --muted:#A3A3A3; --line:#262626; --surface:#111111;
  --link:#00A8FF; --danger:#FF7A7A; --ok:#6FD39C; --logo-bg:#000000; --wm-desc-color:#9FB8FF;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.08;margin:0}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
a{color:var(--link)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none !important}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}

/* ---------- logo (from the brand guide) ---------- */
.brandbar{background:var(--logo-bg);border-bottom:1px solid var(--line)}
.brandbar-in{max-width:1240px;margin:0 auto;padding:var(--wm-clear) max(20px,var(--wm-clear));display:flex;align-items:center}
.logo{display:inline-flex;text-decoration:none;color:inherit}
.logo:focus-visible{outline-offset:6px}
.wm{height:160px;display:inline-flex;flex-direction:column;justify-content:space-between;zoom:var(--wm-scale)}
.wm-row{display:flex;align-items:center;gap:20px}
.wm-name{display:flex;align-items:center}
.wm-txt{font:700 112px/0.9 "Chakra Petch","Arial Narrow",Arial,sans-serif;letter-spacing:6px;color:#FF6A1F}
.wm-pulse{display:block;flex:none}
.wm-ev{font:700 48px/1 "Chakra Petch","Arial Narrow",Arial,sans-serif;padding:8px 16px 4px;border:3px solid #FF6A1F;color:#00A8FF}
.wm-desc{display:flex;align-items:center;gap:14px;width:0;min-width:100%}
.wm-oem{font:700 26px/1 "Chakra Petch","Arial Narrow",Arial,sans-serif;letter-spacing:3px;padding:6px 12px 3px;border:2px solid #00A8FF;color:#FF6A1F}
.wm-line{flex:1;min-width:0;overflow:visible}
.wm-line text{font-family:Inter,Arial,sans-serif;font-size:24px;font-weight:600;fill:var(--wm-desc-color)}
.emblem{display:none;width:56px;height:56px}
@media (max-width:519px){
  .logo .wm{display:none}
  .logo .emblem{display:block}
  .brandbar-in{padding:14px 20px}
}

/* ---------- buttons and fields ---------- */
.btn{border:0;border-radius:0;background:var(--orange);color:#000;font:700 1rem/1 var(--body);padding:0 26px;min-height:52px;cursor:pointer;letter-spacing:.01em}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:disabled{opacity:.6;cursor:progress}
.btn.big{width:100%;min-height:58px;font-size:1.1rem}
.btn-outline{border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font-weight:700;padding:14px 28px;cursor:pointer}
.btn-outline:hover{background:var(--ink);color:var(--bg)}
.field{display:grid;gap:6px}
label{font-size:.82rem;font-weight:600;color:var(--muted)}
.opt{font-weight:400}
input[type=search],input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:var(--surface);font-size:1rem}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none;box-shadow:inset 0 -2px 0 var(--blue)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:38px}
textarea{resize:vertical;min-height:96px}
.msg{margin:0;font-size:.95rem}
.msg.warn{color:var(--danger)}
.small{font-size:.9rem;color:var(--muted)}

/* ---------- list ---------- */
.hero{padding:44px 0 22px;max-width:760px}
.hero h1{font-size:clamp(2.2rem,5.5vw,3.6rem);text-transform:uppercase;letter-spacing:.01em}
.hero p{color:var(--muted);font-size:1.08rem;margin:14px 0 0}
.searchbar{display:flex;gap:0;margin-top:8px}
.searchbar input{min-height:60px;font-size:1.1rem;border-right:0}
.searchbar .btn{min-height:60px}
.filters{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
@media (min-width:760px){.filters{grid-template-columns:2fr 1fr 1fr 1.3fr}}
.count{margin:26px 0 14px;font-weight:600;color:var(--muted)}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;border:1px solid var(--line);background:var(--bg)}
.card a:hover{border-color:var(--orange)}
.card .img{aspect-ratio:4/3;background:var(--surface);overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.card a:hover .img img{transform:scale(1.03)}
.card .img .none{height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.card h2{font-size:1.2rem}
.card .pn{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.card .fits{font-size:.9rem;color:var(--muted)}
.card .cprice{margin-top:auto;padding-top:10px;font:700 1.35rem/1 var(--head)}
.empty{color:var(--muted);padding:30px 0}
.more{display:block;margin:30px auto 0}
@media (prefers-reduced-motion:reduce){.card .img img{transition:none}}

/* ---------- one part ---------- */
#part-view{padding:28px 0 20px}
.back{border:0;background:transparent;padding:0;color:var(--link);font-weight:600;cursor:pointer;margin-bottom:20px}
.back::before{content:"\2190  "}
.back:hover{text-decoration:underline}
.part{display:grid;gap:34px;grid-template-columns:1fr}
@media (min-width:900px){.part{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.stage{aspect-ratio:4/3;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden}
.stage img{width:100%;height:100%;object-fit:contain}
.nophoto{color:var(--muted)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:8px}
.thumbs button{border:1px solid var(--line);padding:0;background:var(--surface);cursor:pointer;aspect-ratio:1;overflow:hidden}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button[aria-current="true"]{border:2px solid var(--orange)}
.detail h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.price{font:700 2rem/1 var(--head);margin:16px 0 6px;color:var(--orange)}
.detail .pn{margin:0 0 18px;font-weight:600;letter-spacing:.02em}
.specs{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 20px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.specs dt{color:var(--muted);font-size:.92rem}
.specs dd{margin:0;font-weight:500}
.notes{white-space:pre-wrap;margin:0 0 18px;overflow-wrap:anywhere}
.notes h2{font-size:1.05rem;margin-bottom:6px;white-space:normal}
.fit{font-size:.88rem;color:var(--muted);border-left:3px solid var(--blue);padding:4px 0 4px 12px;margin:0 0 22px}
.buy-form{display:grid;gap:14px;margin-top:6px;padding:22px;border:1px solid var(--line);background:var(--surface)}
.buy-form h2{font-size:1.4rem}
.buy-form input,.buy-form textarea{background:var(--bg)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.done{padding:22px;border:1px solid var(--ok);margin-top:6px}
.done h2{color:var(--ok);font-size:1.4rem;margin-bottom:8px}

.foot{border-top:1px solid var(--line);margin-top:60px;padding:28px 0 40px;color:var(--muted)}
.foot p{margin:0 0 6px}

/* ---------- photo count on cards ---------- */
.card .img{position:relative}
.pcount{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.72);color:#fff;font-size:.75rem;font-weight:600;padding:4px 8px}

/* ---------- part page gallery ---------- */
@media (min-width:900px){.gallery{position:sticky;top:20px;align-self:start}}
.stage{position:relative;aspect-ratio:4/3;user-select:none;-webkit-user-select:none}
.stage.has-photos{cursor:zoom-in}
.stage img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.stage .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border:0;border-radius:0;background:rgba(0,0,0,.55);color:#fff;font-size:2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.stage .nav:hover{background:rgba(0,0,0,.8)}
.stage .prev{left:0}
.stage .next{right:0}
.counter{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.72);color:#fff;font-size:.8rem;font-weight:600;padding:4px 9px}
.counter:empty{display:none}
.enlarge{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;border:0;border-radius:0;background:rgba(0,0,0,.72);color:#fff;font-weight:600;font-size:.85rem;padding:8px 12px;cursor:pointer}
.enlarge:hover{background:var(--orange);color:#000}
.thumbs button{aspect-ratio:4/3}
.allphotos{margin-top:10px;border:1px solid var(--line);background:transparent;color:var(--ink);font-weight:600;padding:10px 14px;cursor:pointer;width:100%}
.allphotos:hover{border-color:var(--orange)}


[hidden]{display:none !important}
.detail h1:focus{outline:none}

/* Photos keep their own shape: show them whole inside their boxes. */
.card .img img,.thumbs button img{object-fit:contain}
.card .img,.thumbs button{background:var(--surface)}