/* MotoMagic — Motorcycle marketplace styles (css/marketplace.css) */
/* ═══════════════════════════════════════════════════════════════════════════
   MotoMagic — Motorcycles marketplace: filter sidebar, chips, cards, drawer.
   Identity: black / charcoal / white / red. Red is used ONLY for selected
   states, focus rings and primary actions — never as decorative borders.
   ═══════════════════════════════════════════════════════════════════════════ */

.mm-mkt{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start;padding-bottom:90px}

/* ── Sidebar panel ────────────────────────────────────────────────────────── */
.mm-sidebar{
  background:linear-gradient(180deg,#161618,#111113 62%,#0f0f10);
  border:1px solid var(--line2,rgba(255,255,255,.1));
  border-radius:18px;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.025);
  position:sticky;top:88px;
  max-height:calc(100vh - 108px);
  display:flex;flex-direction:column;overflow:hidden;
}
.mm-side-head{
  display:flex;align-items:center;gap:9px;
  padding:16px 18px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:linear-gradient(180deg,#161618,#141416);z-index:2;
}
.mm-side-head h5{font-family:var(--font-d);font-size:15px;letter-spacing:-.2px;margin:0}
.mm-activebadge{
  min-width:20px;height:20px;padding:0 6px;border-radius:99px;
  background:var(--red);color:#fff;font-size:11.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-m)
}
.mm-reset{
  margin-left:auto;background:none;border:none;color:var(--gray-dim,#8a8a8a);font-size:12px;font-weight:600;
  cursor:pointer;padding:5px 8px;border-radius:8px;transition:color .2s,background .2s;white-space:nowrap
}
.mm-reset:hover{color:#fff;background:rgba(255,255,255,.06)}
.mm-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mm-filter-body{overflow-y:auto;overscroll-behavior:contain;padding:4px 0 8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.mm-filter-body::-webkit-scrollbar{width:6px}
.mm-filter-body::-webkit-scrollbar-track{background:transparent}
.mm-filter-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px}
.mm-filter-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}

/* ── Accordion ────────────────────────────────────────────────────────────── */
.mm-acc{border-bottom:1px solid var(--line)}
.mm-acc:last-child{border-bottom:none}
.mm-acc-head{
  width:100%;min-height:56px;background:none;border:none;cursor:pointer;color:var(--white,#fff);
  display:flex;align-items:center;gap:11px;padding:12px 18px;font-size:13.5px;font-weight:600;
  font-family:inherit;text-align:left;transition:background .18s
}
.mm-acc-head:hover{background:rgba(255,255,255,.03)}
.mm-acc-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mm-acc-head .mm-acc-ic{color:var(--gray,#9a9a9a);display:inline-flex;align-items:center;justify-content:center;width:18px;flex:0 0 auto}
.mm-acc-head .mm-acc-title{flex:1}
.mm-acc-head .mm-acc-n{
  color:var(--red);font-family:var(--font-m);font-size:11.5px;font-weight:700;margin-right:2px
}
.mm-acc-head .mm-chev{transition:transform .25s var(--ease,ease);color:var(--gray-dim,#777);flex:0 0 auto}
.mm-acc[data-open="1"] .mm-chev{transform:rotate(180deg);color:var(--gray,#b9b9b9)}
.mm-acc[data-open="1"]{background:rgba(255,255,255,.02)}
.mm-acc[data-open="1"] .mm-acc-head{background:rgba(255,255,255,.028)}
.mm-acc[data-open="1"] .mm-acc-ic{color:var(--red)}
.mm-acc-panel{overflow:hidden;transition:height .28s var(--ease,ease)}
.mm-acc-inner{padding:4px 18px 16px}
@media (prefers-reduced-motion:reduce){
  .mm-acc-panel{transition:none}
  .mm-chev{transition:none}
}

/* ── Custom checkbox rows ─────────────────────────────────────────────────── */
.mm-check{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:9px;cursor:pointer;
  font-size:13px;color:var(--gray,#b9b9b9);transition:background .16s,color .16s;user-select:none
}
.mm-check:hover{background:rgba(255,255,255,.04);color:#fff}
.mm-check input{position:absolute;opacity:0;width:1px;height:1px}
.mm-check .mm-box{
  flex:0 0 auto;width:18px;height:18px;border-radius:5px;
  border:1.5px solid var(--line2,rgba(255,255,255,.18));background:#0c0c0d;
  display:inline-flex;align-items:center;justify-content:center;transition:all .16s
}
.mm-check .mm-box svg{opacity:0;transform:scale(.6);transition:all .16s;color:#fff}
.mm-check input:checked + .mm-box{background:var(--red);border-color:var(--red)}
.mm-check input:checked + .mm-box svg{opacity:1;transform:scale(1)}
.mm-check input:focus-visible + .mm-box{outline:2px solid var(--accent);outline-offset:2px}
.mm-check .mm-lbl{flex:1;line-height:1.25}
.mm-check .mm-cnt{margin-left:auto;color:var(--gray-dim,#777);font-family:var(--font-m);font-size:11.5px;font-variant-numeric:tabular-nums}
.mm-check input:checked ~ .mm-lbl{color:#fff;font-weight:600}

/* Brand search + show more */
.mm-search{
  width:100%;margin:2px 0 8px;padding:9px 12px;border-radius:9px;font-size:12.5px;
  background:#0c0c0d;border:1px solid var(--line2,rgba(255,255,255,.14));color:#fff
}
.mm-search::placeholder{color:var(--gray-dim,#777)}
.mm-search:focus{outline:none;border-color:var(--accent)}
.mm-morelink{
  background:none;border:none;color:var(--accent,#ff2020);font-size:12.5px;font-weight:600;
  cursor:pointer;padding:8px;border-radius:8px;font-family:inherit
}
.mm-morelink:hover{text-decoration:underline}
.mm-morelink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mm-brandhidden{display:none}

/* ── Category cards (Vehicle Type) ────────────────────────────────────────── */
.mm-catgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mm-catcard{
  position:relative;display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:10px 10px;border-radius:11px;cursor:pointer;
  background:#0f0f11;border:1px solid var(--line,rgba(255,255,255,.08));
  transition:border-color .16s,background .16s,transform .12s;text-align:left
}
.mm-catcard:hover{background:#151517;border-color:var(--line2,rgba(255,255,255,.18))}
.mm-catcard:active{transform:scale(.98)}
.mm-catcard .mm-catic{color:var(--gray,#9a9a9a);display:inline-flex}
.mm-catcard .mm-catname{font-size:12px;font-weight:600;color:var(--gray,#c4c4c4);line-height:1.15}
.mm-catcard .mm-catn{font-size:11px;color:var(--gray-dim,#777);font-family:var(--font-m)}
.mm-catcard .mm-catcheck{
  position:absolute;top:7px;right:7px;width:16px;height:16px;border-radius:50%;
  background:var(--red);display:none;align-items:center;justify-content:center
}
.mm-catcard .mm-catcheck svg{color:#fff}
.mm-catcard[aria-pressed="true"]{border-color:var(--red);background:rgba(227,6,19,.09)}
.mm-catcard[aria-pressed="true"] .mm-catname{color:#fff}
.mm-catcard[aria-pressed="true"] .mm-catic{color:var(--accent)}
.mm-catcard[aria-pressed="true"] .mm-catcheck{display:flex}
.mm-catcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Scooter cc refine */
.mm-refine{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2,rgba(255,255,255,.14))}
.mm-refine-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--gray-dim,#777);margin-bottom:7px}

/* Range mini-inputs (year / price / mileage) */
.mm-range{display:flex;align-items:center;gap:8px;margin-top:8px}
.mm-range input,.mm-range select{
  width:100%;min-height:40px;padding:9px 11px;border-radius:9px;font-size:12.5px;line-height:1.2;
  background:#0d0d0e;border:1px solid var(--line2,rgba(255,255,255,.14));color:#fff;
  appearance:none;-webkit-appearance:none;transition:border-color .16s,box-shadow .16s
}
.mm-range input::placeholder{color:var(--gray-dim,#777)}
.mm-range input:hover,.mm-range select:hover{border-color:rgba(255,255,255,.22)}
.mm-range input:focus,.mm-range select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,32,32,.16)}
.mm-range span{color:var(--gray-dim,#777);font-size:12px}

/* ── Results column ───────────────────────────────────────────────────────── */
.mm-results{min-width:0}

/* Category chips above grid */
.mm-chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;position:relative}
.mm-preview-notice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:12.5px;color:#d8d8db;background:rgba(227,6,19,.07);border:1px solid rgba(227,6,19,.28);border-radius:12px;padding:10px 16px;margin-bottom:16px}
.mm-preview-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;flex:1;min-width:200px}
.mm-preview-text b{font-size:11px;font-weight:800;letter-spacing:.6px;color:#fff;white-space:nowrap}
.mm-preview-cta{min-height:34px;padding:0 16px;font-size:12.5px;flex-shrink:0}
#page-bike .mkt-detail-sample-note{display:inline-block;font-size:12px;color:#d8d8db;background:rgba(227,6,19,.07);border:1px solid rgba(227,6,19,.28);border-radius:10px;padding:8px 13px;margin:12px 0 4px}
.mm-chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line2,rgba(255,255,255,.12));
  color:var(--gray,#c4c4c4);font-size:13px;font-weight:600;font-family:inherit;
  transition:background .16s,color .16s,border-color .16s,transform .12s;white-space:nowrap
}
.mm-chip svg{flex:0 0 auto;opacity:.8}
.mm-chip:hover{background:rgba(255,255,255,.08);color:#fff}
.mm-chip:active{transform:scale(.97)}
.mm-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mm-chip.on{background:var(--red);border-color:var(--red);color:#fff}
.mm-chip.on svg{opacity:1}
.mm-chip.mm-morechip{position:relative}
.mm-moremenu{
  position:absolute;top:calc(100% + 6px);z-index:20;min-width:210px;max-height:320px;overflow:auto;
  background:var(--card2,#131315);border:1px solid var(--line2,rgba(255,255,255,.14));
  border-radius:12px;box-shadow:0 20px 50px -16px rgba(0,0,0,.85);padding:6px
}
.mm-moremenu[hidden]{display:none}
.mm-moremenu button{
  display:flex;width:100%;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;
  background:none;border:none;color:var(--gray,#c4c4c4);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;text-align:left
}
.mm-moremenu button:hover{background:rgba(255,255,255,.06);color:#fff}
.mm-moremenu button[aria-pressed="true"]{color:#fff}
.mm-moremenu button[aria-pressed="true"] .mm-mm-dot{background:var(--red)}
.mm-mm-dot{width:7px;height:7px;border-radius:50%;background:transparent;border:1px solid var(--line2);flex:0 0 auto}

/* Toolbar */
.mm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.mm-count{font-size:14px;color:var(--gray,#c4c4c4)}
.mm-count b{color:#fff;font-family:var(--font-d);font-size:18px;margin-right:2px}
.mm-sortwrap{display:flex;align-items:center;gap:8px}
.mm-sortwrap label{font-size:12.5px;color:var(--gray-dim,#777)}
.mm-select{
  padding:8px 12px;border-radius:9px;font-size:13px;font-family:inherit;cursor:pointer;
  background:#0f0f11;border:1px solid var(--line2,rgba(255,255,255,.14));color:#fff
}
.mm-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Active filter chips */
.mm-activechips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.mm-activechips:empty{display:none}
.mm-fchip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 7px 5px 12px;border-radius:10px;
  background:#161618;border:1px solid var(--line2,rgba(255,255,255,.12));border-left:2px solid var(--red);
  color:#eaeaea;font-size:12.5px;font-weight:600
}
.mm-fchip button{
  width:18px;height:18px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;transition:background .16s
}
.mm-fchip button:hover{background:var(--red)}
.mm-fchip button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mm-clearall{
  background:none;border:1px solid var(--line2,rgba(255,255,255,.14));color:var(--gray,#c4c4c4);
  padding:5px 12px;border-radius:99px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .16s
}
.mm-clearall:hover{color:#fff;border-color:var(--red)}
.mm-clearall:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Cards (enhanced) ─────────────────────────────────────────────────────── */
#moto-grid.moto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px}
.mmc{
  display:flex;flex-direction:column;background:var(--card,#0f0f10);
  border:1px solid var(--line,rgba(255,255,255,.08));border-radius:16px;overflow:hidden;
  cursor:pointer;text-decoration:none;color:inherit;transition:transform .18s var(--ease,ease),border-color .18s,box-shadow .18s
}
.mmc:hover{transform:translateY(-3px);border-color:var(--line2,rgba(255,255,255,.16));box-shadow:0 20px 44px -22px rgba(0,0,0,.9)}
.mmc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mmc-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b0b0c;display:flex;align-items:center;justify-content:center}
.mmc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease,ease)}
.mmc-media .mmc-art{width:78%;height:78%;opacity:.55}
.mmc-badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 60px)}
.mmc-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.2px;font-family:var(--font-m)}
.mmc-badge.verified{background:rgba(6,20,10,.82);color:#37d67a;border:1px solid rgba(55,214,122,.35)}
.mmc-badge.boost{background:var(--red);color:#fff}
.mmc-badge.local{background:rgba(10,12,20,.82);color:#cbd5ff;border:1px solid rgba(120,140,255,.35)}
.mmc-badge.sample{background:rgba(255,255,255,.1);color:#e9e9e9;border:1px solid var(--line2,rgba(255,255,255,.16))}
.mmc-wish{
  position:absolute;top:9px;right:9px;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:all .16s;z-index:2
}
.mmc-wish:hover{background:var(--red);border-color:var(--red)}
.mmc-wish:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mmc-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.mmc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mmc-title{font-size:14.5px;font-weight:600;line-height:1.2;letter-spacing:-.2px}
.mmc-price{font-family:var(--font-d);font-size:16px;color:#fff;white-space:nowrap}
.mmc-neg{font-size:10.5px;color:var(--gray-dim,#777);font-weight:500}
.mmc-specs{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:11.5px;color:var(--gray,#a7a7a7);font-family:var(--font-m)}
.mmc-specs .mmc-dot{color:var(--line2)}
.mmc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:9px;border-top:1px solid var(--line);font-size:11.5px;color:var(--gray-dim,#777)}
.mmc-loc{display:inline-flex;align-items:center;gap:4px}
.mmc-seller{display:inline-flex;align-items:center;gap:5px}
.mmc-stype{padding:2px 7px;border-radius:99px;font-size:10px;font-weight:700;font-family:var(--font-m)}
.mmc-stype.dealer{background:rgba(55,214,122,.12);color:#37d67a}
.mmc-stype.private{background:rgba(255,255,255,.07);color:var(--gray,#b9b9b9)}

/* Empty state */
.mm-empty{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  padding:64px 24px;border:1px dashed var(--line2,rgba(255,255,255,.14));border-radius:16px;background:rgba(255,255,255,.015)
}
.mm-empty svg{color:var(--gray-dim,#666)}
.mm-empty b{font-family:var(--font-d);font-size:17px}
.mm-empty span{color:var(--gray,#9a9a9a);font-size:13.5px}
.mm-empty .btn{margin-top:6px}

/* ── Mobile toolbar + drawer ──────────────────────────────────────────────── */
.mm-mobilebar{display:none}
.mm-drawer{position:fixed;inset:0;z-index:9996;display:flex;flex-direction:column;justify-content:flex-end}
.mm-drawer[hidden]{display:none}
.mm-drawer-scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.mm-drawer-panel{
  position:relative;background:var(--card2,#131315);border-top-left-radius:20px;border-top-right-radius:20px;
  border-top:1px solid var(--line2,rgba(255,255,255,.14));display:flex;flex-direction:column;
  max-height:92vh;animation:mmDrawerUp .28s var(--ease,ease)
}
@keyframes mmDrawerUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.mm-drawer-panel{animation:none}}
.mm-drawer-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.mm-drawer-head b{font-family:var(--font-d);font-size:16px;flex:1}
.mm-drawer-reset{background:none;border:none;color:var(--gray,#9a9a9a);font-size:12.5px;font-weight:600;cursor:pointer}
.mm-drawer-reset:hover{color:#fff}
.mm-drawer-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.06);border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mm-drawer-close:focus-visible,.mm-drawer-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mm-drawer-body{overflow-y:auto;overscroll-behavior:contain;flex:1;padding:4px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.mm-drawer-body::-webkit-scrollbar{width:6px}
.mm-drawer-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px}
.mm-drawer-foot{display:flex;gap:10px;align-items:center;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0));border-top:1px solid var(--line2,rgba(255,255,255,.12));background:linear-gradient(180deg,#141416,#0f0f11)}
.mm-drawer-foot .mm-drawer-reset{flex:0 0 auto;padding:12px 16px;border-radius:11px;border:1px solid var(--line2,rgba(255,255,255,.16));background:rgba(255,255,255,.04);color:#eaeaea;font-size:13.5px;font-weight:600;min-height:46px}
.mm-drawer-foot .mm-drawer-reset:hover{border-color:var(--red);color:#fff}
.mm-drawer-apply{flex:1;justify-content:center;min-height:46px}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .mm-mkt{grid-template-columns:300px 1fr;gap:20px}
}
@media (max-width:860px){
  .mm-mkt{grid-template-columns:1fr}
  .mm-sidebar{display:none}
  .mm-mobilebar{
    display:flex;align-items:center;gap:10px;position:sticky;top:64px;z-index:30;
    padding:10px 0;margin-bottom:6px;background:linear-gradient(var(--bg,#090909) 72%,transparent)
  }
  .mm-mbtn{
    display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:11px;min-height:44px;
    background:var(--card2,#131315);border:1px solid var(--line2,rgba(255,255,255,.14));color:#fff;
    font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit
  }
  .mm-mbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .mm-mbadge{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-m)}
  .mm-mcount{flex:1;font-size:12.5px;color:var(--gray,#9a9a9a)}
  .mm-msort{min-height:44px}
  .mm-toolbar{display:none}
}
@media (min-width:861px){
  .mm-drawer{display:none !important}
}
@media (max-width:560px){
  #moto-grid.moto-grid{grid-template-columns:1fr 1fr;gap:12px}
  .mmc-title{font-size:13px}
  .mmc-price{font-size:14px}
  .mm-catgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:400px){
  #moto-grid.moto-grid{grid-template-columns:1fr}
}


/* ── Phase 7: grid / list view ─────────────────────────────────────────── */
.mm-viewtoggle{display:inline-flex;gap:2px;border:1px solid var(--line2,rgba(255,255,255,.12));border-radius:10px;padding:3px;background:rgba(255,255,255,.03);margin-left:10px}
.mm-viewbtn{width:34px;height:30px;display:grid;place-items:center;border:none;background:none;color:var(--gray,#9a9a9a);border-radius:7px;cursor:pointer;transition:color .2s,background .2s}
.mm-viewbtn:hover{color:#fff}
.mm-viewbtn.on{color:#fff;background:var(--red,#E30613)}
.mm-viewbtn:focus-visible{outline:2px solid var(--red,#E30613);outline-offset:2px}
#moto-grid.mm-list{grid-template-columns:1fr;gap:12px}
#moto-grid.mm-list .mmc{display:grid;grid-template-columns:clamp(190px,28%,290px) 1fr;align-items:stretch}
#moto-grid.mm-list .mmc-media{aspect-ratio:auto;height:100%;min-height:150px}
#moto-grid.mm-list .mmc-body{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:16px 18px}
#moto-grid.mm-list .mmc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
#moto-grid.mm-list .mmc-title{font-size:16px;line-height:1.3}
#moto-grid.mm-list .mmc-price{font-size:19px;white-space:nowrap;text-align:right}
#moto-grid.mm-list .mmc-foot{margin-top:2px}
@media(max-width:640px){
  #moto-grid.mm-list .mmc{grid-template-columns:1fr}
  #moto-grid.mm-list .mmc-media{min-height:180px}
}

/* ── Phase 7 refinement: premium placeholder (listings without a photo) ──── */
.mmc-media.mmc-noimg{position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 12%,#1c1c20 0%,#101013 55%,#0b0b0d 100%)}
.mmc-media.mmc-noimg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 60% at 50% 122%,rgba(227,6,19,.3),transparent 72%)}
.mmc-media.mmc-noimg .mmc-art{width:60%;height:auto;position:absolute;top:24%;left:50%;transform:translateX(-50%);color:#2c2c30;opacity:.9}
.mmc-media.mmc-noimg .mmc-ph{position:absolute;left:0;right:0;bottom:14px;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;pointer-events:none}
.mmc-ph-brand{font-family:var(--font-d,sans-serif);font-weight:800;font-size:12px;letter-spacing:2.5px;color:#fff;text-shadow:0 1px 10px rgba(227,6,19,.55)}
.mmc-ph-txt{font-family:var(--font-m,monospace);font-size:9.5px;letter-spacing:1px;color:rgba(255,255,255,.42);text-transform:uppercase;font-style:normal}
#moto-grid.mm-list .mmc-media.mmc-noimg .mmc-art{top:50%;transform:translate(-50%,-58%)}

/* ── Sticky sidebar: clears the header, never runs past the viewport bottom ─ */
.mm-sidebar{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 104px)}

/* ── Keyboard focus visibility ──────────────────────────────────────────── */
.mm-chip:focus-visible,.mm-acc-head:focus-visible,.mm-fchip:focus-visible,
.mm-clearall:focus-visible,.mm-select:focus-visible,.mmc:focus-visible,
.mm-morelink:focus-visible,.mm-search:focus-visible{outline:2px solid var(--red,#E30613);outline-offset:2px}
.mm-check:focus-within{outline:2px solid var(--red,#E30613);outline-offset:2px;border-radius:8px}

/* ── Prevent horizontal overflow on small screens ──────────────────────── */
@media(max-width:860px){
  #page-motorcycles{overflow-x:hidden}
  #page-motorcycles .mm-mkt{max-width:100%}
  #moto-grid.mm-list .mmc-title{overflow-wrap:anywhere}
}

/* ═══════════════ Phase 8 — marketplace polish (additive, no redesign) ═════ */

/* Cards — depth, hierarchy, smoother hover */
.mmc{background:linear-gradient(180deg,#141416,#0f0f11);
  transition:transform .26s var(--ease,cubic-bezier(.22,1,.36,1)),border-color .26s,box-shadow .26s}
.mmc:hover{transform:translateY(-4px);border-color:rgba(227,6,19,.28);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.95),0 8px 22px -16px rgba(227,6,19,.4)}
.mmc-media img{transition:transform .45s var(--ease,cubic-bezier(.22,1,.36,1))}
.mmc:hover .mmc-media img{transform:scale(1.045)}
.mmc-media::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.24),transparent 32%)}
.mmc-body{padding:14px 15px 15px;gap:9px}
.mmc-title{font-size:15px;font-weight:700;letter-spacing:-.25px;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mmc-price{font-size:19px;font-weight:800;letter-spacing:-.4px}
.mmc-specs{gap:6px 11px;letter-spacing:.1px}
.mmc-foot{padding-top:11px;margin-top:2px}

/* Badges — premium, legible */
.mmc-badges{gap:6px;z-index:2}
.mmc-badge{padding:4px 9px;backdrop-filter:blur(6px);box-shadow:0 4px 12px -6px rgba(0,0,0,.7)}
.mmc-badge.boost{background:linear-gradient(180deg,#F5121F,var(--red,#E30613));
  box-shadow:0 6px 16px -6px rgba(227,6,19,.7),inset 0 1px 0 rgba(255,255,255,.2)}
.mmc-badge.verified{background:rgba(6,20,10,.86)}
.mmc-stype{padding:3px 9px}
.mmc-stype.dealer{background:rgba(55,214,122,.14);border:1px solid rgba(55,214,122,.28)}
.mmc-stype.private{background:rgba(255,255,255,.06);border:1px solid var(--line,rgba(255,255,255,.08))}
.mmc-wish{z-index:2;transition:transform .2s var(--ease,ease),background .2s,border-color .2s}
.mmc-wish:active{transform:scale(.88)}

/* Filters — active state, hover, per-section counter, search */
.mm-acc[data-open="1"]{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent)}
.mm-acc-head{transition:background .2s,color .2s}
.mm-acc-head:hover{background:rgba(255,255,255,.045)}
.mm-acc-head .mm-acc-n{min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px;
  border-radius:99px;background:rgba(227,6,19,.16);color:#ff6a6a;font-family:var(--font-m,monospace);
  font-size:10.5px;font-weight:700;line-height:1}
.mm-activebadge{background:var(--red,#E30613);color:#fff;font-weight:800;
  box-shadow:0 3px 12px -4px rgba(227,6,19,.7)}
.mm-check{transition:background .16s,color .16s}
.mm-check:hover{background:rgba(255,255,255,.05)}
.mm-search{transition:border-color .22s,background .22s,box-shadow .22s}
.mm-search:hover{border-color:rgba(255,255,255,.2)}
.mm-search:focus{outline:none;border-color:rgba(227,6,19,.5);box-shadow:0 0 0 3px rgba(227,6,19,.13)}

/* Sidebar — sticky depth, smooth scroll, section separation */
.mm-sidebar{box-shadow:0 24px 60px -34px rgba(0,0,0,.8)}
.mm-filter-body{scroll-behavior:smooth}

/* Empty state — premium */
.mm-empty{padding:72px 28px;border:1px solid var(--line,rgba(255,255,255,.08));
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent);gap:14px}
.mm-empty svg{width:58px;height:58px;padding:14px;border-radius:50%;box-sizing:border-box;
  background:rgba(227,6,19,.1);border:1px solid rgba(227,6,19,.24);color:var(--red,#E30613)}
.mm-empty b{font-size:19px;letter-spacing:-.3px;color:#fff}
.mm-empty span{max-width:340px;line-height:1.55}
.mm-empty .btn{margin-top:8px}

/* Consistent red focus */
.mmc:focus-visible,.mm-chip:focus-visible,.mm-fchip:focus-visible,
.mm-select:focus-visible,.mm-clearall:focus-visible{outline:2px solid var(--red,#E30613);outline-offset:2px}

/* ═══════════════ Phase 8b — stats row · photo count · placeholder ═════════ */
.mm-statsrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:0 2px}
.mm-stat-main{font-size:13px;color:var(--gray,#a7a7a7)}
.mm-stat-main b{font-family:var(--font-d);font-size:15px;font-weight:800;color:#fff;margin-right:3px}
.mm-stat-main i{font-style:normal;color:var(--gray-dim,#777);font-size:12px}
.mm-stat-main i::before{content:'• ';color:var(--line2,rgba(255,255,255,.22))}
.mm-stat-pills{display:flex;gap:8px;flex-wrap:wrap}
.mm-stat{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.03);border:1px solid var(--line,rgba(255,255,255,.08));
  font-size:11.5px;color:var(--gray,#a7a7a7);font-family:var(--font-m,monospace)}
.mm-stat b{color:#fff;font-weight:700}
@media(max-width:560px){.mm-statsrow{gap:8px}.mm-stat{padding:4px 9px;font-size:11px}}

/* Photo-count badge (only present when the listing has photos) */
.mmc-photos{position:absolute;bottom:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:99px;background:rgba(9,9,9,.72);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:10.5px;font-weight:700;font-family:var(--font-m,monospace);backdrop-filter:blur(6px)}
.mmc-photos svg{opacity:.9}

/* Placeholder — cleaner, less dominant than real photos */
.mmc-media.mmc-noimg{background:radial-gradient(120% 90% at 50% 18%,#161619 0%,#0f0f12 60%,#0b0b0d 100%)}
.mmc-media.mmc-noimg::after{background:radial-gradient(60% 55% at 50% 122%,rgba(227,6,19,.16),transparent 72%)}
.mmc-media.mmc-noimg .mmc-art{opacity:.5;color:#26262b}
.mmc-media.mmc-noimg .mmc-ph-brand{font-size:11px;letter-spacing:2.2px;color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(227,6,19,.35)}
.mmc-media.mmc-noimg .mmc-ph-txt{color:rgba(255,255,255,.34)}

/* Stronger title/price + tighter spec/location spacing */
.mmc-title{font-size:15px;font-weight:700}
.mmc-price{font-size:19.5px;font-weight:800}
.mmc-specs{gap:5px 10px}
.mmc-loc{gap:5px}

/* Sidebar — reinforce sticky offset (no header/bottom overlap) + section spacing */
.mm-sidebar{top:88px;max-height:calc(100vh - 104px)}
.mm-acc-inner{padding-top:2px}

/* ══════════════════════════════════════════════════════════════════════════
   Premium listing cards v2 — action cluster, price block, meta + compare bar
   Extends the .mmc rules above (no duplicated selectors). Reuses design tokens.
   ══════════════════════════════════════════════════════════════════════════ */

/* Media hover zoom (honoured only where hover is real; respects reduced motion) */
@media (hover:hover){.mmc:hover .mmc-media img{transform:scale(1.045)}}
@media (prefers-reduced-motion:reduce){.mmc-media img{transition:none}.mmc:hover .mmc-media img{transform:none}}

/* New badges */
.mmc-badge.dealer{background:rgba(10,14,22,.82);color:#9db8ff;border:1px solid rgba(120,150,255,.4)}
.mmc-badge.cond{background:rgba(255,255,255,.1);color:#e9e9e9;border:1px solid var(--line2,rgba(255,255,255,.16));text-transform:capitalize}

/* Action cluster (save preserved; compare + share stacked beneath it) */
.mmc-actions{position:absolute;top:9px;right:9px;display:flex;flex-direction:column;gap:7px;z-index:3}
.mmc-act{position:static;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .16s var(--ease,ease),background .16s,border-color .16s,color .16s,opacity .16s}
.mmc-actions .mmc-wish{position:static;top:auto;right:auto}
.mmc-act:hover{background:var(--red);border-color:var(--red)}
.mmc-act:active{transform:scale(.9)}
.mmc-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mmc-compare.on{background:#2d6cff;border-color:#2d6cff;color:#fff}
.mmc-compare.on:hover{background:#2d6cff}
.mmc-share.copied{background:#37d67a;border-color:#37d67a;color:#04140a}
/* Saved-heart pop */
.mmc-wish.on{background:var(--red);border-color:var(--red);color:#fff}
.mmc-wish.on svg{fill:currentColor}
.mmc-wish.mmc-pop svg{animation:mmcPop .38s var(--ease,ease)}
@keyframes mmcPop{0%{transform:scale(1)}40%{transform:scale(1.34)}70%{transform:scale(.9)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.mmc-wish.mmc-pop svg{animation:none}}
/* Compare/share reveal on hover for pointer devices; always visible on touch */
@media (hover:hover){
  .mmc-compare,.mmc-share{opacity:0;transform:translateX(5px)}
  .mmc:hover .mmc-compare,.mmc:hover .mmc-share,
  .mmc:focus-within .mmc-compare,.mmc:focus-within .mmc-share,
  .mmc-compare.on{opacity:1;transform:none}
}

/* Views pill (real listing.views data only) */
.mmc-viewpill{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:99px;font-size:10.5px;font-weight:600;font-family:var(--font-m);
  background:rgba(0,0,0,.55);color:#dcdcdc;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Price block: discount (real oldPrice only) + indicative monthly estimate */
.mmc-priceblock{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap;min-width:0}
.mmc-oldrow{display:inline-flex;align-items:center;gap:6px}
.mmc-old{font-size:11.5px;color:var(--gray-dim,#777);text-decoration:line-through;font-family:var(--font-m)}
.mmc-disc{font-size:10px;font-weight:800;color:#fff;background:var(--red);padding:1px 6px;border-radius:99px;font-family:var(--font-m)}
.mmc-mo{font-size:10.5px;color:var(--gray,#9a9a9a);font-family:var(--font-m)}
.mmc-mo i{font-style:normal;color:var(--gray-dim,#6b6b6b)}

/* Foot: posted time + seller name */
.mmc-posted{color:var(--gray-dim,#777)}
.mmc-seller{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:54%;
  font-size:11px;font-weight:600;font-family:var(--font-m);color:var(--gray,#b9b9b9);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mmc-seller .mmc-dot2{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--gray-dim,#777)}
.mmc-seller.dealer .mmc-dot2{background:#37d67a;box-shadow:0 0 8px rgba(55,214,122,.6)}

/* List view: keep new bits aligned */
#moto-grid.mm-list .mmc-priceblock{align-items:flex-end}
#moto-grid.mm-list .mmc-viewpill{left:12px;bottom:12px}
@media (hover:hover){
  /* in list view the actions sit in the media column — reveal on row hover too */
  #moto-grid.mm-list .mmc:hover .mmc-compare,#moto-grid.mm-list .mmc:hover .mmc-share{opacity:1;transform:none}
}

/* ── Floating compare bar ─────────────────────────────────────────────────── */
.mm-cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:9995;pointer-events:none;
  padding:0 16px calc(14px + env(safe-area-inset-bottom,0));display:flex;justify-content:center}
.mm-cmpbar[hidden]{display:none}
.mm-cmpbar-in{pointer-events:auto;display:flex;align-items:center;gap:14px;max-width:1080px;width:100%;
  background:linear-gradient(180deg,#17171a,#0e0e10);border:1px solid var(--line2,rgba(255,255,255,.14));
  border-radius:16px;padding:11px 14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.9);
  animation:mmCmpUp .28s var(--ease,ease)}
.mm-cmpbar-in[data-static]{animation:none}
@keyframes mmCmpUp{from{transform:translateY(130%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.mm-cmpbar-in{animation:none}}
.mm-cmplabel{font-family:var(--font-d);font-size:13.5px;color:#eaeaea;white-space:nowrap}
.mm-cmplabel b{color:var(--red)}
.mm-cmpchips{display:flex;gap:8px;flex:1;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.mm-cmpchips::-webkit-scrollbar{display:none}
.mm-cmpchip{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 11px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--line,rgba(255,255,255,.1));
  font-size:12px;color:#dcdcdc;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.mm-cmpchip button{width:18px;height:18px;border-radius:50%;border:none;background:rgba(255,255,255,.1);
  color:#fff;cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mm-cmpchip button:hover{background:var(--red)}
.mm-cmpbtns{display:flex;gap:8px;flex-shrink:0}
.mm-cmpclear{background:none;border:1px solid var(--line2,rgba(255,255,255,.14));color:var(--gray,#c4c4c4);
  padding:9px 14px;border-radius:11px;font-size:13px;font-weight:600;cursor:pointer;min-height:42px}
.mm-cmpclear:hover{color:#fff;border-color:var(--red)}
.mm-cmpgo{display:inline-flex;align-items:center;gap:7px;background:var(--red);border:none;color:#fff;
  padding:9px 16px;border-radius:11px;font-size:13px;font-weight:700;cursor:pointer;min-height:42px;
  box-shadow:0 8px 24px -8px rgba(227,6,19,.55)}
.mm-cmpgo:hover{filter:brightness(1.08)}
.mm-cmpclear:focus-visible,.mm-cmpgo:focus-visible,.mm-cmpchip button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){
  .mm-cmpbar{padding:0 10px calc(10px + env(safe-area-inset-bottom,0))}
  .mm-cmplabel{display:none}
  .mm-cmpchip{max-width:130px}
  .mm-cmpclear{display:none}
}
/* Keep the floating contact FAB clear of the compare bar on mobile (same pattern as pd-sticky-on) */
@media (max-width:768px){
  body.cmp-bar-on #mm-contact-fab{bottom:calc(160px + env(safe-area-inset-bottom,0px))}
}

/* ══════════════════════════════════════════════════════════════════════════
   Marketplace banners (reusable MMBanner component)
   Fixed responsive heights → no CLS. Radius 24, premium shadow, subtle motion.
   Degrades to a branded block of the same height if the .jpg isn't present yet.
   ══════════════════════════════════════════════════════════════════════════ */
.mm-hero-wrap{margin:6px 0 22px}
.mm-banner{
  position:relative;display:block;width:100%;
  height:clamp(420px,42vw,500px);            /* desktop 420–500 */
  border-radius:24px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%,#1b1b1f 0%,#101013 60%,#0b0b0d 100%);
  border:1px solid var(--line,rgba(255,255,255,.08));
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.03)
}
.mm-banner-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .5s var(--ease,ease)
}
@media (hover:hover){.mm-banner:hover .mm-banner-img{transform:scale(1.035)}}
/* Interstitial: spans the full listing grid, a touch shorter than a hero */
.mm-banner-inline{grid-column:1 / -1;margin:6px 0}
.mm-banner-compact{height:clamp(240px,26vw,320px)}
@media (max-width:900px){
  .mm-banner{height:clamp(340px,44vw,420px)}     /* tablet 340–420 */
  .mm-banner-compact{height:clamp(220px,32vw,300px)}
}
@media (max-width:560px){
  .mm-banner{height:clamp(220px,54vw,280px)}     /* mobile 220–280 */
  .mm-banner-compact{height:clamp(200px,50vw,250px)}
  .mm-hero-wrap{margin-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .mm-banner-img{transition:none}
  .mm-banner:hover .mm-banner-img{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   Marketplace three-zone stage — vertical side promo rails
   <1440: no rails (stage behaves exactly as before).
   1440–1799: 1 banner per side (150px rails).  ≥1800: 2 per side (210px rails).
   Center uses minmax(0,1440) so it stays full at 1920 and only flexes when the
   rails genuinely need room. No horizontal overflow (min 0 prevents blowout).
   ══════════════════════════════════════════════════════════════════════════ */
.marketplace-stage{display:block}
.marketplace-main{min-width:0}
.marketplace-side-rail{display:none}
.ms-second{display:none}

@media (min-width:1440px){
  .marketplace-stage{
    display:grid;
    grid-template-columns:150px minmax(0,1440px) 150px;
    justify-content:center;align-items:start;gap:24px;
  }
  .marketplace-side-rail{
    display:flex;flex-direction:column;gap:22px;
    position:sticky;top:110px;align-self:start;
    padding-bottom:96px;      /* stay clear of footer + floating contact buttons */
    z-index:1;                /* below the fixed WhatsApp/Viber widget */
  }
}
@media (min-width:1800px){
  .marketplace-stage{grid-template-columns:210px minmax(0,1440px) 210px}
  .ms-second{display:block}   /* second banner per side only on ultra-wide */
}

/* Vertical banner (no text overlay — artwork already has the CTA) */
.ms-banner{
  display:block;width:100%;border-radius:18px;overflow:hidden;text-decoration:none;cursor:pointer;
  border:1px solid var(--line,rgba(255,255,255,.1));
  box-shadow:0 20px 44px -22px rgba(0,0,0,.8);background:#111;
  transition:transform .25s var(--ease,ease),box-shadow .25s var(--ease,ease),border-color .25s var(--ease,ease)
}
.ms-banner img{display:block;width:100%;height:auto;object-fit:cover}
@media (hover:hover){
  .ms-banner:hover{transform:translateY(-3px) scale(1.015);border-color:rgba(255,255,255,.28);box-shadow:0 26px 54px -20px rgba(0,0,0,.92)}
}
.ms-banner:focus-visible{outline:2px solid var(--red,#E30613);outline-offset:3px;border-color:rgba(255,255,255,.35)}
@media (prefers-reduced-motion:reduce){.ms-banner{transition:none}.ms-banner:hover{transform:none}}

/* ══════════════════════════════════════════════════════════════════════════
   Parts banners (parts-banner-*) — horizontal in-content + desktop side rails
   + mobile "Performance Picks" scroller. Scoped; no changes to products/filters.
   ══════════════════════════════════════════════════════════════════════════ */
.parts-banner{display:block;text-decoration:none;cursor:pointer;border-radius:17px;overflow:hidden;background:#111;
  border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 48px -24px rgba(0,0,0,.8);
  transition:transform .2s var(--ease,ease),box-shadow .2s var(--ease,ease),border-color .2s var(--ease,ease)}
.parts-banner-h{width:100%;aspect-ratio:1672 / 941;background:#0e0e10}
.parts-banner-h img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
/* The interleaved horizontals are direct grid children; premium-cards.css sets
   .prod-grid>* to display:flex and the grid stretches cells to the product-row
   height, which distorted them. Keep them block + top-aligned so the frame's own
   aspect-ratio governs and object-fit:contain shows the complete image (no crop). */
#parts-grid > .parts-banner-inline,
.prod-grid > .parts-banner-inline{display:block;align-self:start}
.parts-banner-v{width:100%;border-radius:15px}
.parts-banner-v img{width:100%;height:auto;display:block}
@media (hover:hover){.parts-banner:hover{transform:translateY(-3px);box-shadow:0 28px 56px -22px rgba(0,0,0,.9);border-color:rgba(255,255,255,.2)}}
.parts-banner-link:focus-visible{outline:2px solid var(--red,#E30613);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.parts-banner{transition:none}.parts-banner:hover{transform:none}}

.parts-banner-hero-wrap{margin:18px auto 4px}
.prod-grid > .parts-banner-inline{grid-column:1 / -1;margin:8px 0}

/* Desktop three-zone stage — rails only ≥1440, only while Parts is active, and ONLY
   once the rails are actually filled. If banners fail to load the stage stays a plain
   block and Parts renders full-width and centered (failure-safe layout). */
.parts-stage{display:block}
.parts-side-rail{display:none}
.parts-side-rail:empty{display:none}
@media (min-width:1600px){
  .parts-stage:has(#page-parts.on):has(.parts-side-rail[data-filled]){
    display:grid;justify-content:center;align-items:start;gap:24px;
    grid-template-columns:clamp(160px,11vw,205px) minmax(0,1440px) clamp(160px,11vw,205px);
  }
  .parts-stage:has(#page-parts.on):has(.parts-side-rail[data-filled]) #page-parts{min-width:0}
  .parts-stage:has(#page-parts.on) .parts-side-rail[data-filled]{
    display:flex;flex-direction:column;gap:28px;
    position:sticky;top:96px;align-self:start;padding-bottom:90px;z-index:1;
  }
}

/* Mobile "Performance Picks" — the 4 verticals in a scroll-snap row (below the rail breakpoint) */
.parts-banner-picks{grid-column:1 / -1;margin:12px 0 4px}
.parts-banner-picks-h{font-family:var(--font-d,sans-serif);font-size:16px;font-weight:800;color:#fff;letter-spacing:.3px;margin:0 0 12px}
.parts-banner-picks-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 16px 6px 0}
.parts-banner-picks-track::-webkit-scrollbar{display:none}
.parts-banner-picks-track .parts-banner-v{flex:0 0 min(78vw,310px);scroll-snap-align:start}
@media (min-width:1600px){.parts-banner-picks{display:none}}

/* ══════════════════════════════════════════════════════════════════════════
   Accessories (Shop) banners — horizontal carousel + vertical side rails.
   Scoped (acc-*). No changes to products, filters, cart or wishlist.
   ══════════════════════════════════════════════════════════════════════════ */
.acc-carousel-wrap{margin:22px 0 4px}
.acc-carousel{position:relative;width:100%;aspect-ratio:1672 / 941;background:#0e0e10;
  border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 48px -24px rgba(0,0,0,.8)}
.acc-track{display:flex;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.acc-slide{flex:0 0 100%;width:100%;height:100%;display:block}
.acc-slide .acc-img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
@media (prefers-reduced-motion:reduce){.acc-track{transition:none}}
/* arrows */
.acc-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.5);color:#fff;cursor:pointer;
  display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:.55;transition:opacity .2s,background .2s;z-index:2}
.acc-carousel:hover .acc-arrow,.acc-carousel:focus-within .acc-arrow{opacity:1}
.acc-arrow:hover{background:var(--red,#E30613)}
.acc-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px;opacity:1}
.acc-prev{left:14px}.acc-next{right:14px}
.acc-prev svg{transform:rotate(180deg)}
/* dots */
.acc-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.acc-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.4);
  cursor:pointer;padding:0;transition:background .2s,width .2s}
.acc-dot.on{background:#fff;width:22px;border-radius:5px}
.acc-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* vertical side banners */
.acc-vbanner{display:block;height:320px;border-radius:16px;overflow:hidden;background:#0e0e10;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 44px -22px rgba(0,0,0,.8);
  transition:transform .2s var(--ease,ease),border-color .2s var(--ease,ease)}
.acc-vbanner .acc-img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
@media (hover:hover){.acc-vbanner:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}}
.acc-vbanner:focus-visible{outline:2px solid var(--red,#E30613);outline-offset:3px}
.acc-slide:focus-visible{outline:2px solid var(--red,#E30613);outline-offset:-3px}

/* three-zone stage — rails only ≥1600 (enough room for a full-width catalog first), only on the shop page, only once filled */
.acc-stage{display:block}
.acc-side-rail{display:none}
.acc-side-rail:empty{display:none}
@media (min-width:1600px){
  #page-shop.on .acc-stage:has(.acc-side-rail[data-filled]){
    display:grid;justify-content:center;align-items:start;gap:24px;
    grid-template-columns:clamp(150px,11vw,200px) minmax(0,1440px) clamp(150px,11vw,200px);
  }
  #page-shop.on .acc-stage:has(.acc-side-rail[data-filled]) .acc-main{min-width:0}
  #page-shop.on .acc-stage .acc-side-rail[data-filled]{
    display:flex;flex-direction:column;gap:24px;
    position:sticky;top:96px;align-self:start;padding-bottom:90px;z-index:1;
  }
}