/* ============== Design Tokens (Light Theme) ============== */
    :root {
      --bg: #ffffff;
      --panel: #ffffff;
      --elev: #f6f7fb;              /* light elevation surface */
      --text: #0f172a;              /* slate-900 */
      --muted: #5b6b88;             /* slate-500/600 blend */
      --accent: #181f89;            /* primary (deep blue) */
      --accent-2: #f8970c;          /* secondary (orange) */
      --accent-hi: #181f89;         /* same as primary for consistency */
      --border: #e6e8ee;            /* subtle border */
      --focus: #181f89;             /* focus ring */
      --shadow-1: 0 1px 0 rgba(0,0,0,0.04);
      --shadow-2: 0 8px 24px rgba(0,0,0,0.08);
      --container: min(1342px, 92vw);
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-7: 28px;
      --space-8: 32px;
      --space-10: 40px;
      --space-12: 48px;
      --space-16: 64px;
    }

    /* ============== Global Reset ============== */
    *, *::before, *::after {
      box-sizing: border-box;
      border-radius: 0 !important; /* Enforce square corners globally */
    }
    html, body {
      height: 100%;
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
      background:
        radial-gradient(900px 450px at 20% -10%, rgba(24,31,137,0.06), transparent 60%),
        radial-gradient(750px 375px at 90% 10%, rgba(248,151,12,0.06), transparent 60%),
        var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    ::-webkit-scrollbar {
  display: none; /* Hides the scrollbar */
}

/* For Firefox */
body {
  scrollbar-width: none; /* Hides the scrollbar */
}

/* For Internet Explorer and Edge (legacy) */
body {
  -ms-overflow-style: none; /* Hides the scrollbar */
}
    img {
      max-width: 65%;
      /* max-height: 180px; */
      display: block;
    }
    .thumb img {
      /* max-width: 65%; */
      max-height: 180px;
      display: block;
    }
    input, button, select, textarea {
      font: inherit;
      color: inherit;
      background: transparent;
    }
    a { color: inherit; text-decoration: none; }
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 2px;
    }

    /* ============== Layout ============== */
    .container { 
      max-width: 1342px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .stack-xl { display: grid; gap: var(--space-12); }
    .stack-lg { display: grid; gap: var(--space-8); }
    .stack-md { display: grid; gap: var(--space-6); }
    .stack-sm { display: grid; gap: var(--space-4); }

    /* ============== Header ============== */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
    }
    .topbar-inner {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: var(--space-6);
      height: 64px;
    }
    .brand {
      display: flex; align-items: center; gap: var(--space-4);
      font-weight: 700;
      letter-spacing: 0.5px;
      color: var(--accent);
      height: 75%;
    }

    .brand img {
      height: 65px;
    }

    .brand .mark {
      width: 28px; height: 28px;
      background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);
      display: grid; place-items: center;
      color: #fff;
      font-weight: 900;
      box-shadow: var(--shadow-1);
    }
    nav.primary {
      display: flex; gap: var(--space-6);
      justify-content: center;
    }
    nav.primary a {
      color: var(--muted);
      padding: 10px 12px;
      border-bottom: 2px solid transparent;
    }
    nav.primary a:hover { color: var(--accent); }
    nav.primary a.active {
      color: var(--accent);
      border-color: var(--accent);
    }
    .top-actions {
      display: flex; gap: var(--space-3); justify-content: flex-end; align-items: center;
    }
    .btn, .chip {
      border: 1px solid var(--border);
      background: var(--panel);
      color: var(--text);
      padding: 10px 14px;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 10px;
      box-shadow: var(--shadow-1);
      text-decoration: none;
    }
    .btn:hover { border-color: #d5dae6; }
    .btn.primary {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
      box-shadow: var(--shadow-2);
    }
    .btn.ghost {
      background: transparent;
    }
    .icon {
      width: 16px; height: 16px; display: inline-block;
    }
    .cart {
      position: relative;
    }
    .cart-badge {
      position: absolute; top: -6px; right: -6px;
      background: var(--accent-2); color: #111; font-weight: 700; font-size: 12px;
      padding: 2px 6px; border: 1px solid #111;
    }

    /* ============== Hero ============== */
    .hero {
      padding: var(--space-16) 0 var(--space-12);
      border-bottom: 1px solid var(--border);
      background:
        radial-gradient(800px 400px at 15% 5%, rgba(24,31,137,0.06), transparent 60%),
        radial-gradient(700px 350px at 90% 20%, rgba(248,151,12,0.06), transparent 60%);
    }
    .hero h1 {
      font-size: clamp(32px, 6vw, 56px);
      line-height: 1.05;
      margin: 0;
      color: var(--accent);
    }
    .hero p {
      color: var(--muted);
      font-size: clamp(16px, 2vw, 18px);
      max-width: 70ch;
    }
    .hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }

    /* ============== Product Section ============== */
    .products {
      /* padding: var(--space-12) 0; */
    }
    .toolbar {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: var(--space-8);
      align-items: start;
    }
    /* Filters panel */
    .filters {
      position: sticky; top: 74px;
      background: var(--panel);
      /* border: 1px solid var(--border); */
      /* box-shadow: var(--shadow-2); */
      padding: var(--space-6);
      max-height: calc(100vh - 100px);
      overflow: auto;
    }
    .filters h3 { margin: 0 0 var(--space-4) 0; font-size: 16px; color: var(--muted); }
    .filters .group { border-top: 1px solid var(--border); padding-top: var(--space-6); margin-top: var(--space-6); }
    .filters label {
      display: flex; align-items: center; gap: var(--space-3);
      padding: 8px 6px;
      color: var(--text);
      cursor: pointer;
    }
    .filters input[type="checkbox"] {
      width: 18px; height: 18px; accent-color: var(--accent);
    }
    .filters .small {
      color: var(--muted); font-size: 12px; margin-top: var(--space-2);
    }
    .filters .actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
    /* Toolbar-right */
    .tools {
      display: grid; gap: var(--space-6);
    }
    .search-sort {
      display: grid; grid-template-columns: 1fr auto; gap: var(--space-4);
    }
    .searchbar {
      display: flex; gap: var(--space-3);
      background: var(--elev);
      border: 1px solid var(--border);
      padding: 10px 12px;
      align-items: center;
    }
    .searchbar input {
      background: transparent; border: none; width: 100%;
      color: var(--text);
    }
    .sorter {
      display: flex; gap: var(--space-3);
    }
    select {
      background: var(--panel);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 10px 12px;
      appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%),
        linear-gradient(to right, transparent, transparent);
      background-position:
        calc(100% - 18px) calc(1em + 0px),
        calc(100% - 13px) calc(1em + 0px),
        100% 0;
      background-size:
        5px 5px,
        5px 5px,
        2.5em 2.5em;
      background-repeat: no-repeat;
      padding-right: 40px;
    }
    .quick-chips {
      display: flex; gap: var(--space-3); flex-wrap: wrap;
    }
    .chip {
      background: #f1f5ff;             /* light blue chip */
      color: #22336b;
      border-color: #dbe4ff;
      padding: 8px 10px;
      font-size: 14px;
    }
    .chip[aria-pressed="true"] {
      background: var(--accent-2);
      color: #111;
      border-color: transparent;
    }

    .results-meta {
      color: var(--muted);
      font-size: 14px;
      display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap;
    }
    .active-filters {
      display: flex; gap: var(--space-3); flex-wrap: wrap;
    }
    .pill {
      background: var(--elev);
      border: 1px solid var(--border);
      padding: 6px 10px;
      display: inline-flex; gap: 8px; align-items: center; color: var(--muted);
    }
    .pill button {
      background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 0;
    }

    /* Grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
      background-color: rgb(248, 248, 248);
    }
    .card {
      display: grid; gap: var(--space-4);
      background: var(--panel);
      /* border: 1px solid var(--border); */
      /* box-shadow: var(--shadow-2); */
      padding: var(--space-6);
    }
    .thumb {
      background: linear-gradient(160deg, rgba(24,31,137,0.06), rgba(248,151,12,0.08));
      /* border: 1px solid var(--border); */
      height: 180px;
      /* display: grid; grid-template-columns: 1fr 1fr; gap: 0; */
    }
    .thumb .art {
      display: grid; place-items: center; background: white; height: 100%;
    }
    .thumb .art svg { width: 72px; height: 72px; }
    .thumb .meta {
      border-left: 1px solid var(--border);
      display: grid; gap: 8px; padding: 12px;
      align-content: center;
    }
    .k {
      font-size: 12px; color: var(--muted);
    }
    .kv {
      font-size: 14px;
    }
    .badges {
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .badge {
      font-size: 12px; color: #22336b;
      background: #f1f5ff;
      border: 1px solid #dbe4ff;
      padding: 4px 8px;
    }
    .title {
      font-weight: 600; line-height: 1.25;
    }
    .price-row {
      display: flex; justify-content: space-between; align-items: center; gap: var(--space-6);
      border-top: 1px solid var(--border); padding-top: var(--space-4);
    }
    .price { font-size: 20px; font-weight: 700; letter-spacing: 0.2px; color: var(--accent); }
    .foot-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

    /* ============== Browse ============== */
    .section-title {
      display: flex; align-items: baseline; justify-content: space-between;
      border-top: 1px solid var(--border);
      padding-top: var(--space-8);
    }
    .tiles {
      display: grid; gap: var(--space-6);
      grid-template-columns: repeat(6, 1fr);
    }
    .tile {
      background: var(--panel);
      border: 1px solid var(--border);
      padding: var(--space-6);
      display: grid; gap: 8px;
      cursor: pointer;
      text-align: center;
      box-shadow: var(--shadow-1);
    }
    .tile:hover { border-color: #cfd7e6; }
    .tile .t {
      font-size: 12px; color: var(--muted);
    }
    .tile .v {
      font-weight: 700; color: var(--accent);
    }

    /* ============== Footer ============== */
    .footer {
      margin-top: var(--space-16);
      background: #f8fafc;
      border-top: 1px solid var(--border);
      padding: var(--space-12) 0;
      color: var(--muted);
    }

    /* ============== Mobile ============== */
    .filters-toggle {
      display: none;
    }
    @media (max-width: 1024px) {
      .grid { grid-template-columns: repeat(2, 1fr); }
      .toolbar { grid-template-columns: 1fr; }
      .filters {
        position: relative; top: auto; max-height: none;
        display: none;
      }
      .filters.open { display: block; }
      .filters-toggle {
        display: inline-flex; margin-bottom: var(--space-4);
      }
      .tiles { grid-template-columns: repeat(3, 1fr); }
      .topbar-inner { grid-template-columns: 1fr auto auto; gap: var(--space-4); }
      nav.primary { display: none; }
    }
    @media (max-width: 640px) {
      .grid { grid-template-columns: 1fr; }
      .hero { padding: var(--space-12) 0; }
      .hero-cta { flex-direction: column; align-items: stretch; }
      .tiles { grid-template-columns: repeat(2, 1fr); }
    }

    /* ============== Toast ============== */
    .toast {
      position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
      background: var(--accent); border: 1px solid var(--accent);
      box-shadow: var(--shadow-2);
      padding: 10px 14px; color: #fff;
      display: none;
    }
    .toast.show { display: block; }

    /* ===== Orange-forward overrides ===== */

/* Brand mark: more orange in the gradient */
.brand .mark {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-2) 60%, var(--accent) 100%);
}

/* Nav: orange active/hover */
nav.primary a:hover { color: var(--accent-2); }
nav.primary a.active { color: var(--accent-2); border-color: var(--accent-2); }

/* Primary CTAs: orange background with dark text for contrast */
/* .btn.primary {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #0f172a;
} */
.btn:hover { background: rgba(248,151,12); }

/* Pricing highlight: orange */
.price { color: black; }

/* Chips: orange by default, solid orange when active */
.chip {
  background: rgba(248,151,12,0.12);
  border-color: rgba(248,151,12,0.38);
  color: var(--text);
}
.chip[aria-pressed="true"] {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #0f172a;
}

/* Badges: orange tint */
.badge {
  background: rgba(248,151,12,0.12);
  border: 1px solid rgba(248,151,12,0.42);
  color: var(--accent-2);
}

/* Tiles: orange emphasis */
.tile .v { color: var(--accent-2); }
.tile:hover { border-color: rgba(248,151,12,0.56); }

/* Hero + product thumbs: increase orange weight */
.hero {
  background:
    radial-gradient(800px 400px at 15% 5%, rgba(248,151,12,0.10), transparent 60%),
    radial-gradient(700px 350px at 90% 20%, rgba(24,31,137,0.06), transparent 60%);
}
.thumb {
  background: linear-gradient(160deg, rgba(248,151,12,0.14), rgba(24,31,137,0.06));
}
.thumb .art { background: white; }

/* Toast: orange */
.toast {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #0f172a;
}

/* ===== Hero slider (Splide) ===== */
.hero-slider { margin-bottom: var(--space-8); max-width: 1342px; }
.hero-slider .splide__track {
border: 1px solid var(--border);
background: var(--panel);
box-shadow: var(--shadow-2);
}
.hero-slider .splide__list { margin: 0; }
.hero-slider .splide__slide {
padding: 0;
}
.hero-slider .slide {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: end;
    gap: var(--space-8);
    min-height: clamp(240px, 34vw, 460px);
    padding: var(--space-10);
}
.hero-slider .slide-copy { display: grid; gap: 0; }
.hero-slider .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-2); }
.hero-slider .slide-title { margin: 0; font-size: clamp(24px, 4vw, 40px); color: white; line-height: 1.1; }
.hero-slider .slide-text { color: white; max-width: 56ch; }
.hero-slider .slide-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.hero-slider .slide-art { display: grid; place-items: center; }
.hero-slider .slide-art svg { width: clamp(120px, 24vw, 220px); height: auto; }

/* Slide backgrounds using your palette, orange-forward */
.slide--synthetic {
background:
linear-gradient(120deg, rgba(248,151,12,0.22), rgba(24,31,137,0.10) 60%, rgba(255,255,255,0.96));
}
.slide--highmileage {
background:
linear-gradient(100deg, rgba(24,31,137,0.12), rgba(248,151,12,0.20) 65%, rgba(255,255,255,0.96));
}
.slide--diesel {
background:
linear-gradient(120deg, rgba(248,151,12,0.24), rgba(24,31,137,0.08) 55%, rgba(255,255,255,0.96));
}

/* Controls: square corners, brand colors */
.hero-slider .splide__arrow {
width: 44px; height: 44px;
background: transparent;
color: white;
border: none;
/* box-shadow: var(--shadow-1); */
opacity: 1;
}
.hero-slider .splide__arrow:hover {
background: white;
color: #0f172a;
border-color: var(--accent-2);
}
.hero-slider .splide__arrow:disabled { opacity: 0.4; }

.hero-slider .splide__pagination { gap: 8px; }
.hero-slider .splide__pagination__page {
width: 10px; height: 10px;
background: #d9e1f2;
border: 1px solid #c7d0e6;
}
.hero-slider .splide__pagination__page.is-active {
background: white;
border-color: white;
transform: none;
opacity: 1;
}

/* Mobile layout */
@media (max-width: 900px) {
.hero-slider .slide { grid-template-columns: 1fr; min-height: clamp(220px, 38vw, 360px); }
.hero-slider .slide-art { display: none; }
}

:root {
  --side-red: #181f89;   
  --side-red-dk: #181f89;
  --side-border: #e4e7ef;
}

.filters.filters--accordion {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  max-height: calc(100vh - 100px);
  overflow: auto;               /* keep your scroll */
}

/* Red header with chamfered top-right corner */
.filter-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--side-red);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 16px;
  margin-bottom: 12px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  box-shadow: var(--shadow-2);
  background: url(title_bg.png);
  background-size: cover;
}

/* Accordion items */
.filters--accordion details.acc-item {
  border: 1px solid var(--side-border);
  background: #fff;
  margin-bottom: 12px;
}
.filters--accordion details.acc-item[open] {
  border-color: transparent;
}

.filters--accordion summary.acc-trigger {
  list-style: none;
  display: grid;
  grid-template-columns: 85% 1fr; 
  gap: 20px;
  align-items: center; 
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}
.filters--accordion summary::-webkit-details-marker { display: none; }

/* Red square caret (down/up) on the right */
.filters--accordion .caret {
  width: 24px; height: 24px;
  background: var(--side-red);
  display: grid; place-items: center;
}
.filters--accordion .caret::before {
  content: "";
  border: 5px solid transparent;
  border-top-color: #fff;         /* down */
  transform: translateY(2px);
}
.filters--accordion details[open] .caret::before {
  border-top-color: transparent;
  border-bottom-color: #fff;       /* up */
  transform: translateY(-1px);
}

.filters--accordion .acc-panel {
  border-top: 1px solid var(--side-border);
  padding: 12px 16px 14px;
}

/* Tweak internal labels to feel cleaner inside boxes */
.filters--accordion label {
  padding: 6px 2px;
  font-weight: 500;
  text-transform: none;
}

/* Keep reset button spacing aligned */
.filters--accordion .actions {
  display: flex; gap: var(--space-3);
  margin: 12px 0 0;
  padding: 0 16px 12px;
}

/* On mobile the original .filters behavior still applies */
@media (max-width: 1024px) {
  .filters.filters--accordion { display: none; }
  .filters.filters--accordion.open { display: block; }
  .filters--accordion summary.acc-trigger {
    list-style: none;
    display: grid;
    grid-template-columns: 90% 1fr; 
    gap: 20px;
  }
}

/* Positioning and button styling */
.header__knob { position: relative; }
.header__knob-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

/* Submenu styling (reuses your menusub look but ensures it's visible here) */
.header__knob-submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 2000;
  min-width: 280px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
  padding: 8px 0;
}

.header__knob-submenu .menusub__link {
  display: block;
  padding: 10px 16px;
  color: #111;
  white-space: normal;
}

.header__knob-submenu .menusub__link:hover {
  background: #f5f5f7;
}

/* Arrow rotation when open */
.header__knob.is-open .header__knob-arrow svg {
  transform: rotate(180deg);
  transition: transform .2s ease;
}

/* Bilingual titles inside accordion headers */
.acc-trigger .bilingual {
  display: grid;
  line-height: 1.1;
}
.acc-trigger .bilingual .en {
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.acc-trigger .bilingual .zh {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  font-weight: 600;
}

/* Subtype list styling */
.filters__sublist label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 2px;
}
.filters__sublist .sub-zh {
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
}

/* Make the main type title clickable + show selected state */
.acc-trigger .js-cat-toggle {
    font-weight: 700;
  cursor: pointer;
  outline: none;
}
.acc-trigger .js-cat-toggle:hover .en,
.acc-trigger .js-cat-toggle:hover .zh {
  color: var(--side-red);
}
.acc-trigger .js-cat-toggle[aria-pressed="true"] .en,
.acc-trigger .js-cat-toggle[aria-pressed="true"] .zh {
  color: var(--side-red);
  text-decoration: underline;
}

.crumbs{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);font-size:.9rem;color:var(--muted)}
.crumbs .container{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 20px}
.crumbs a{color:inherit}
.crumbs .sep{opacity:.6}

/* Footer */
footer{border-top:1px solid var(--border);background:var(--surface);margin-top:40px; padding: 2rem !important;}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding:36px 0}
footer h4{margin:0 0 .75rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:var(--muted)}
footer a:hover{color:var(--primary)}
@media (max-width: 900px){
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  footer .cols{grid-template-columns:1fr}
}

/* Essential styles to make the toggle work */
.language {
  position: relative; /* Ensure dropdown positions relative to this */
}

.language__toggle {
  cursor: pointer; /* Show pointer on hover */
  user-select: none;
}

/* Hide the body by default */
.language__body {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  z-index: 50;
  /* Basic styling in case external CSS is missing */
  background: #000; 
  padding: 10px;
}

/* Show the body when the parent has the 'is-open' class */
.language.is-open .language__body {
  display: block;
}