/* SPD compatibility layer — applies ONLY where oklch() is unsupported:
   Chrome <=110, Edge (Chromium) <=110, Safari <15.4, Firefox <113.
   Everything lives inside a single @supports block, so any browser that
   supports oklch() (i.e. every modern browser) never applies a single rule
   here — modern rendering is left byte-for-byte untouched.
   Values were produced by Chromium's own oklch -> sRGB conversion. */
@supports not (color: oklch(0% 0 0)) {

  /* ---- brand palette (replaces the oklch() custom props in each page) ---- */
  :root {
    --g1: #fde5b3;
    --g2: #e2a520;
    --g3: #af7200;
    --g4: #744800;
    --text: #eceff1;
    --mid: #81878c;
    --dim: #44484c;
  }

  /* ---- shared: nav, buttons, section rules, stats, footer ---- */
  .nav {
    background: rgba(0, 0, 1, 0.72);
    border-bottom: 1px solid #172128;
  }
  .nav-cta {
    border: 1px solid rgba(123, 86, 0, 0.55);
    color: #caa55e;
  }
  .nav-cta:hover { background: rgba(203, 147, 23, 0.10); }
  .btn-ghost {
    border: 1px solid rgba(123, 86, 0, 0.55);
    color: #caa55e;
  }
  .btn-ghost:hover { background: rgba(203, 147, 23, 0.12); }
  .stats-strip {
    border-top: 1px solid #081822;
    border-bottom: 1px solid #081822;
  }
  .stat { border-right: 1px solid #081822; }
  @media (max-width: 860px) {
    .stat:nth-child(-n+2) { border-bottom: 1px solid #081822; }
  }
  @media (max-width: 560px) {
    .stat:nth-child(-n+2) { border-bottom: 1px solid #081822; }
  }
  .sec-label .rl { background: linear-gradient(90deg, #5b3b00, transparent); }
  .sec-label .rl:last-child { background: linear-gradient(270deg, #5b3b00, transparent); }
  .sec-label span { color: #a48038; }
  .hero-stripes {
    background: repeating-linear-gradient(-45deg,
      transparent 0, transparent 16px,
      rgba(200, 139, 0, 0.10) 16px, rgba(200, 139, 0, 0.10) 24px);
  }
  footer { border-top: 1px solid #081822; }
  .foot-tag { color: #5a4414; }
  .foot-meta { color: #202a32; }

  /* ================= HOME page (index.html) ================= */
  .pg-home .hero-overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 1, 0.75) 0%, rgba(0, 0, 1, 0.15) 45%, var(--bg0) 100%),
      linear-gradient(90deg, var(--bg0) 0%, rgba(0, 0, 1, 0.5) 45%, transparent 75%);
  }
  .pg-home .split-img img { border: 1px solid #162631; }
  .pg-home .split-img::after { border: 1px solid rgba(123, 86, 0, 0.25); }
  .pg-home .feat-list li { border-bottom: 1px solid #09131a; }
  .pg-home .feat-ico { border: 1px solid rgba(123, 86, 0, 0.55); }
  .pg-home .feat-txt b { color: #dbb879; }
  .pg-home .sku-wrap { border: 1px solid #121c23; }
  .pg-home .sku-table th { border-bottom: 1px solid #11212c; }
  .pg-home .sku-table td { border-bottom: 1px solid #060e15; }
  .pg-home .sku-table tr:hover td { background: rgba(6, 14, 21, 0.6); }
  .pg-home .sku-group td {
    color: #d4b273;
    border-bottom: 1px solid #162631;
  }
  .pg-home .video-frame { border: 1px solid #162631; }
  .pg-home .lab-card img { border: 1px solid #11212c; }
  .pg-home .lab-card figcaption b { color: #d4b273; }
  .pg-home .contact-ctas { border-top: 1px solid #081822; }
  .pg-home #watch,
  .pg-home #series,
  .pg-home #lab {
    border-top: 1px solid #081822 !important;
    border-bottom: 1px solid #081822 !important;
  }
  .pg-home #contact { border-top: 1px solid #081822 !important; }

  /* ================= PRODUCTS page (products/index.html) ================= */
  .pg-products .page-head {
    background:
      radial-gradient(900px 500px at 70% -10%, rgba(99, 64, 0, 0.12), transparent 60%),
      var(--bg0);
    border-bottom: 1px solid #081822;
  }
  .pg-products .cat-nav {
    background: rgba(0, 1, 2, 0.92);
    border-bottom: 1px solid #081822;
  }
  .pg-products .card-img-wrap::after { color: rgba(189, 152, 81, 0.75); }
  .pg-products .lightbox { background: rgba(0, 0, 0, 0.92); }
  .pg-products .lb-stage img { border: 1px solid #1a3040; }
  .pg-products .lb-caption { color: #ceac6d; }
  .pg-products .lb-close,
  .pg-products .lb-prev,
  .pg-products .lb-next {
    border: 1px solid rgba(123, 86, 0, 0.55);
    background: rgba(0, 0, 4, 0.9);
    color: #dbb879;
  }
  .pg-products .lb-close {
    background: rgba(1, 10, 20, 0.95);
    border-color: rgba(129, 92, 10, 0.7);
  }
  @media (max-width: 700px) {
    .pg-products .lb-close {
      background: rgba(1, 10, 20, 0.95);
      border-color: rgba(129, 92, 10, 0.7);
    }
  }
  .pg-products .card-body h3 { color: #e1bf80; }
  .pg-products .cert-strip,
  .pg-products .cta-band { border: 1px solid #121c23; }
  .pg-products #drivetrain,
  .pg-products #chassis,
  .pg-products #battery {
    border-top: 1px solid #081822 !important;
    border-bottom: 1px solid #081822 !important;
  }

  /* ================= ROLLER CHAIN page (roller-chain/index.html) ================= */
  .pg-roller .hero-overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 1, 0.7) 0%, rgba(0, 0, 1, 0.2) 45%, var(--bg0) 100%),
      linear-gradient(90deg, var(--bg0) 0%, rgba(0, 0, 1, 0.45) 45%, transparent 75%);
  }
  .pg-roller .badge {
    border: 1px solid rgba(123, 86, 0, 0.55);
    background: rgba(203, 147, 23, 0.08);
    color: #caa55e;
  }
  .pg-roller .feat::after { color: rgba(200, 148, 45, 0.05); }
  .pg-roller .feat-no { color: #5e4205; }
  .pg-roller .feat h3 { color: #dbb879; }
  .pg-roller .cert-box {
    border: 1.5px solid rgba(101, 71, 0, 0.65);
    background: rgba(206, 146, 0, 0.05);
  }
  .pg-roller .cert-main { color: #d4b273; }
  .pg-roller .cert-sub { color: #7d6538; }
  .pg-roller .cert-vsep { background: #121c23; }
  .pg-roller .cf1 { color: #445b6c; }
  .pg-roller .cf2 { color: #39444c; }
  .pg-roller .acro-row { border-bottom: 1px solid #060e15; }
  .pg-roller .acro-desc { border-left: 1px solid #0e171e; }
  .pg-roller .cb-line a { color: #ceac6d; }
  .pg-roller .cb-btn { border: 1px solid rgba(123, 86, 0, 0.55); }
  .pg-roller .cb-btn-ghost { background: rgba(203, 147, 23, 0.06); }
  .pg-roller .cb-btn-ghost:hover { background: rgba(203, 147, 23, 0.14); }
}