/* ============================================================
   BikeCostCalc — main.css
   Universal stylesheet — included on every page
   All shared styles live here. Page HTML only contains
   styles unique to that specific page.
   bikecostcalculator.com
   ============================================================ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Skip-to-content link (a11y) — visually hidden until focused */
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 10000;
  background: var(--orange); color: #fff; padding: 10px 16px;
  border-radius: 8px; font-weight: 700; text-decoration: none;
  font-size: .85rem;
}
.skip-link:focus { left: 50%; transform: translateX(-50%); }

/* ── Accessibility primitives ────────────────────────────────
   Focus ring (WCAG 2.4.7) — keyboard-only, scoped to true
   interactive elements so the universal selector can't override
   per-element border-radius (which would square off circular
   icon buttons). NO global border-radius reset here. */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--orange, #FF6B2B);
  outline-offset: 2px;
}

/* Honour reduced-motion preference — WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tap-target sizing is intentionally NOT global — forcing every
   button to 44×44 wrecked tiny icon controls (variant pills,
   colour swatches, pagination chevrons, close ×). Per-component
   sizing is enforced in each component's own CSS instead. */

/* ── CSS VARIABLES ── */
:root {
  /* Backgrounds */
  --bg: #0a0f1e;
  --bg2: #0e1628;
  --bg3: #121d35;
  --surface: #162040;
  --surface2: #1c2a50;

  /* Image plates — bike photos ship from OEMs on white studio bg.
     Subtle approach: a soft radial halo behind the image so the
     hard white edges of the photo blend into the dark surface
     without making the whole card light. Layered:
       1. Radial gradient (light centre → transparent edges)
       2. The original dark surface colour shows through where the
          radial gradient is transparent.
     Effect: dark theme everywhere, just a quiet glow under each
     bike picture so it doesn't sit on a harsh rectangle. */
  --img-plate-bg:
    radial-gradient(ellipse 100% 105% at 50% 52%,
      rgba(255,255,255,.55) 0%,
      rgba(250,252,255,.45) 22%,
      rgba(245,247,252,.32) 42%,
      rgba(245,247,252,.18) 60%,
      rgba(245,247,252,.08) 78%,
      rgba(245,247,252,.02) 92%,
      rgba(245,247,252,0)   100%),
    var(--surface);
  --img-plate-shadow: inset 0 0 0 1px rgba(255,255,255,.04);

  /* Borders */
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);

  /* Orange — Primary accent */
  --orange: #ff6b2b;
  --orange-light: #ff8c55;
  --orange-glow: rgba(255,107,43,0.15);
  --orange-dim: rgba(255,107,43,0.08);

  /* Teal */
  --teal: #00d4aa;
  --teal-dim: rgba(0,212,170,0.12);

  /* Blue */
  --blue: #4a8fff;

  /* Text — three-tier hierarchy.
     Original tokens (#8a9cc8 / #5a6a90) tested at perceived luminance 156/106
     out of 255, which made --text3 (used heavily on bike-details, compare,
     calculators, blog, FAQ for body copy and labels) dip below the
     readability floor on dark backgrounds. Bumped to 181/149: --text3 is
     now where --text2 used to be, --text2 moves up a notch, hierarchy
     preserved, homepage tertiary captions remain visually subordinate but
     no longer disappear into the bg. */
  --text: #f0f4ff;   /* primary — luminance 244 */
  --text2: #a8b6d6;  /* secondary — luminance 181 (was 156) */
  --text3: #8595bc;  /* tertiary — luminance 149 (was 106 — too dim) */

  /* Status */
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #f59e0b;
  --purple: #a855f7;

  /* Typography */
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Page gutter — single source of truth for left/right padding.
     9% on desktop, 5% on phones. Everything that needs a gutter
     should use  padding: 0 var(--page-gutter);  instead of hardcoding. */
  --page-gutter: 9%;

  /* Radii */
  --radius: 14px;
  --radius-sm: 8px;
  --r-sm: 8px;

  /* Transition */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Nav height */
  --nav-h: 68px;
}

/* ── BASE ── */
/* scroll-padding-top reserves a no-fly zone at the top of the viewport
   for ALL anchor jumps — `#hash` URLs, in-page <a href="#x"> clicks,
   scrollIntoView() calls. Without this, every target landed flush with
   viewport-top which was tucked under the 68px sticky navbar.
   Calculation: --nav-h (68px) + 12px breathing room = 80px clearance.
   This single declaration replaces having to set scroll-margin-top on
   every potentially-targeted element across every page. (The handful of
   existing per-element scroll-margin-top:80-90px declarations on
   .faq-item / .results-head / .policy-section / .prose h2 still apply
   and just give a few extra px on those elements — they don't conflict.) */
html { scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: calc(var(--nav-h) + 12px); }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Noise texture overlay — used on homepage and optionally other pages */
body.noise::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   NAVBAR
   ============================================================ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9%;
  height: var(--nav-h);
  background: rgba(10,15,30,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text);
}
.nav-logo-pic { display: flex; align-items: center; line-height: 0; }
.nav-logo-pic img { height: 42px; width: auto; display: block; vertical-align: middle; }
.nav-logo-fallback {
  display: none; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
}
.nav-logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--orange), #ff4500);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.nav-logo span { color: var(--orange); }

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  color: var(--text2);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-search-btn {
  display:inline-flex;align-items:center;gap:5px;
  background:var(--surface);border:1px solid var(--border2);
  color:var(--text2);font-size:.82rem;font-weight:600;
  padding:6px 13px;border-radius:20px;order:3;
  text-decoration:none;transition:var(--transition);white-space:nowrap;flex-shrink:0;
}
.nav-search-btn:hover{border-color:rgba(255,107,43,.4);color:var(--orange-light);background:var(--orange-dim);}
.nav-search-icon {
  display:flex;align-items:center;padding:6px 10px!important;
  font-size:1rem!important;border-radius:var(--radius-sm);
  color:var(--text2);text-decoration:none;transition:var(--transition);
}
.nav-search-icon:hover { color:var(--orange)!important;background:var(--orange-dim)!important; }
.nav-search-icon-mobile { display:none;font-size:1.1rem;padding:4px 8px;color:var(--text2);text-decoration:none; }
.nav-search-icon-mobile:hover { color:var(--orange); }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px); left: 0;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 8px;
  min-width: 220px;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition);
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem; color: var(--text2);
  text-decoration: none;
}
.nav-dropdown-menu a:hover { color: var(--orange); background: var(--orange-glow); }

/* Thin divider between semantic groups inside a dropdown (e.g. Bikes ▾
   splits "featured lists" from "browse by X"). Keeps the menu scannable
   without needing a sub-heading. */
.nav-dd-sep {
  height: 1px;
  background: var(--border);
  margin: 6px 8px;
  opacity: .5;
}

/* Slightly wider dropdown to fit the longer page names ("Browse by Engine CC" etc.) */
.nav-dropdown-menu { min-width: 260px; }

/* Nav right area */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* City button */
.bcc-city-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border2);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-body);
  color: var(--text2);
  font-size: 0.82rem;
}
.bcc-city-btn:hover { border-color: var(--orange); color: var(--text); }
.bcc-city-name { font-weight: 600; color: var(--text); }

/* Calculate button in nav */
.btn-nav {
  background: var(--orange);
  color: white;
  border: none;
  padding: 8px 18px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-body);
  text-decoration: none;
}
.btn-nav:hover { background: var(--orange-light); transform: translateY(-1px); }

/* Hamburger button */
.bcc-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px; height: 38px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 8px;
  transition: var(--transition);
  flex-shrink: 0;
}
.bcc-hamburger:hover { border-color: rgba(255,107,43,0.4); }
.bcc-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text2);
  border-radius: 2px;
  transition: var(--transition);
}
.bcc-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--orange-light); }
.bcc-hamburger.open span:nth-child(2) { opacity: 0; }
.bcc-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--orange-light); }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.bcc-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 998;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
.bcc-overlay.open { display: block; }

.bcc-drawer {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: var(--bg2);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 9% 32px;
  flex-direction: column;
  animation: drawerIn 0.25s ease;
}
.bcc-drawer.open { display: flex; flex-direction: column; }
@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bcc-drawer-section { margin-bottom: 20px; }
.bcc-drawer-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange);
  margin-bottom: 8px;
  padding-left: 2px;
}
.bcc-drawer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  text-decoration: none;
  transition: var(--transition);
  color: var(--text2);
  font-size: 0.84rem;
  font-weight: 500;
}
.bcc-drawer-link:hover { border-color: rgba(255,107,43,0.3); color: var(--text); }
.bcc-drawer-link.active { border-color: rgba(255,107,43,0.35); background: var(--orange-dim); color: var(--orange-light); }
.bcc-drawer-link-ic {
  width: 32px; height: 32px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  background: var(--surface2);
}
.bcc-drawer-link-info { flex: 1; min-width: 0; }
.bcc-drawer-link-title { font-weight: 600; color: var(--text); display: block; }
.bcc-drawer-link-desc { font-size: 0.68rem; color: var(--text3); display: block; margin-top: 1px; }

/* ============================================================
   CITY MODAL
   ============================================================ */
.bcc-city-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 1100;
  align-items: flex-end;
  justify-content: center;
}
.bcc-city-modal.open { display: flex; }

.bcc-city-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.bcc-city-modal-box {
  position: relative; z-index: 1;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 20px 20px 0 0;
  padding: 20px 2% 32px;
  width: 100%; max-width: 520px;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Use overscroll-behavior:contain so the bg page doesn't scroll
     when the user reaches the top/bottom of the city list — JS body
     overflow:hidden alone doesn't catch wheel/touch chained-scrolls
     in modern Chrome/iOS. */
  overscroll-behavior: contain;
  animation: slideUp 0.25s ease;
}
/* On phones, fill the viewport so long city lists are scrollable
   without competing with the dimmed page underneath (T289). Use dvh
   (dynamic viewport) so the bottom isn't clipped by mobile browser
   chrome shrinking the visual viewport on scroll. */
@media (max-width: 600px) {
  .bcc-city-modal-box {
    max-width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 24px);
  }
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.bcc-city-modal-title {
  font-family: var(--font-head);
  font-size: 1rem; font-weight: 800;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text);
}
.bcc-city-modal-close {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.8rem; color: var(--text2);
  transition: var(--transition);
}
.bcc-city-modal-close:hover { background: var(--surface); color: var(--text); }
.bcc-city-search {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 0.84rem; color: var(--text);
  outline: none; margin-bottom: 14px;
  transition: var(--transition);
}
.bcc-city-search:focus { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-glow); }
.bcc-city-search::placeholder { color: var(--text3); }
.bcc-state-label {
  font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text3); margin: 10px 0 6px;
}
.bcc-city-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-bottom: 8px;
}
.bcc-city-opt {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.74rem; color: var(--text2);
  cursor: pointer; font-family: var(--font-body);
  transition: var(--transition); text-align: center;
}
.bcc-city-opt:hover { border-color: rgba(255,107,43,0.3); color: var(--orange-light); }
.bcc-city-opt.selected { background: var(--orange-dim); border-color: rgba(255,107,43,0.4); color: var(--orange-light); font-weight: 600; }

/* ============================================================
   SHARED BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--orange), #e85520);
  color: white; padding: 14px 28px; border-radius: 40px;
  font-size: 0.95rem; font-weight: 600;
  text-decoration: none; border: none; cursor: pointer;
  font-family: var(--font-body); transition: var(--transition);
  box-shadow: 0 8px 32px rgba(255,107,43,0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(255,107,43,0.45); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--text);
  padding: 14px 28px; border-radius: 40px;
  font-size: 0.95rem; font-weight: 600;
  text-decoration: none; border: 1px solid var(--border2);
  cursor: pointer; font-family: var(--font-body);
  transition: var(--transition);
}
.btn-secondary:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-glow); }

/* Filter pill */
.pill {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 40px; padding: 5px 16px;
  font-size: 0.82rem; color: var(--text2);
  cursor: pointer; transition: var(--transition);
  font-family: var(--font-body);
}
.pill.active, .pill:hover { background: var(--orange-glow); border-color: var(--orange); color: var(--orange); }

/* Tab button */
.tab {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 40px; padding: 7px 18px;
  font-size: 0.82rem; font-weight: 500; color: var(--text2);
  cursor: pointer; font-family: var(--font-body);
  transition: var(--transition);
}
.tab.active { background: var(--orange); border-color: var(--orange); color: white; }
.tab:hover:not(.active) { border-color: var(--orange); color: var(--orange); }

/* Search tag */
.tag {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 40px; padding: 4px 12px;
  font-size: 0.78rem; color: var(--text2);
  cursor: pointer; transition: var(--transition); text-decoration: none;
}
.tag:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-glow); }

/* ============================================================
   SHARED SECTION STYLES
   ============================================================ */
section { padding: 80px 9%; }

.section-label {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--orange); margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800; line-height: 1.15;
  letter-spacing: -0.02em; margin: 0 0 12px;
  color: var(--text);
}
.section-sub {
  color: var(--text2); font-size: 1rem;
  max-width: 520px; line-height: 1.7; font-weight: 300;
}
.section-header {
  display: flex; justify-content: space-between;
  align-items: flex-end; margin-bottom: 40px; gap: 20px;
}
.view-all {
  text-decoration: none; font-size: 0.85rem; font-weight: 600;
  color: var(--orange); display: flex; align-items: center;
  gap: 6px; white-space: nowrap; transition: var(--transition); flex-shrink: 0;
}
.view-all:hover { gap: 10px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 60px 9% 30px;
  margin-top: 80px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 50px;
}
.footer-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  color: var(--text); text-decoration: none; margin-bottom: 14px;
}
.footer-logo-pic { display: flex; align-items: center; }
.footer-logo-pic img { height: 44px; width: auto; display: block; }
.footer-logo-fallback {
  display: none; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
}
.footer-logo-icon {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--orange), #e85520);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.footer-tagline {
  font-size: 0.84rem; color: var(--text3);
  line-height: 1.65; font-weight: 300; margin-bottom: 20px;
}
.footer-social { display: flex; gap: 10px; }
.social-btn {
  width: 36px; height: 36px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; color: var(--text3);
  cursor: pointer; transition: var(--transition); text-decoration: none;
}
.social-btn:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-glow); }
.footer-col h4 {
  font-family: var(--font-head); font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text3); margin-bottom: 18px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 0.85rem; color: var(--text2);
  text-decoration: none; transition: var(--transition); font-weight: 300;
}
.footer-links a:hover { color: var(--orange); }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 24px;
  display: flex; justify-content: space-between;
  align-items: center; gap: 20px; flex-wrap: wrap;
}
.footer-copy { font-size: 0.8rem; color: var(--text3); font-weight: 300; }
.footer-copy span { color: var(--orange); }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a {
  font-size: 0.8rem; color: var(--text3);
  text-decoration: none; transition: var(--transition);
}
.footer-bottom-links a:hover { color: var(--orange); }

/* ============================================================
   BLOG BADGES (free / premium) — used on blog cards sitewide
   ============================================================ */
.blog-badge-free {
  background: var(--green); color: #fff;
  font-size: 0.62rem; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; text-transform: uppercase;
}
.blog-badge-premium {
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.3);
  color: var(--yellow);
  font-size: 0.62rem; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; text-transform: uppercase;
}

/* ============================================================
   ADSENSE PLACEHOLDER
   ============================================================ */
.bcc-ad-slot {
  width: 100%; min-height: 90px;
  background: var(--surface); border: 1px dashed var(--border2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: var(--text3); margin: 12px 0;
}
/* Hide in production: add class="production" to <body> */
body.production .bcc-ad-slot { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links, .nav-right { display: none; }
  .nav-search-icon-mobile { display:flex;align-items:center; }
  nav { justify-content: flex-start; gap: 10px; padding-left: 5%; padding-right: 5%; }
  .nav-logo { flex: 1; }
  .nav-search-btn {
    order: 9; margin-left: auto; flex-shrink: 0;
    padding: 5px 10px; font-size: 0; gap: 0;
    width: 38px; height: 38px; justify-content: center;
    border-radius: 50%;
  }
  .nav-search-btn::before { content: '🔍'; font-size: .95rem; }
  .bcc-hamburger { display: flex; flex-direction: column; order: 10; flex-shrink: 0; }
  .bcc-city-grid { grid-template-columns: repeat(2, 1fr); }
  section { padding: 60px 5%; }
  footer { padding-left: 5%; padding-right: 5%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section-header { flex-direction: column; align-items: flex-start; }

  /* ── Mobile side-gap override: all page content containers drop to 5% ── */
  .page-head, .page-wrap, .wrap,
  .main, .main-grid, .hero, .rc-hero, .saved-hero,
  .brands-section, .bikes-section, .bikes-grid,
  .az-section, .budget-section, .search-section, .search-wrap,
  .filter-pills, .all-brands-section,
  .models-preview, .brand-hero, .controls-bar, .compare-bar, .compare-action,
  .status-pills, .sticky-bar, .pagination,
  .az-nav, .content, .content-wrap,
  .knowledge-section, .faq-section, .faq-sec, .related-section, .related-sec,
  .related-articles, .post-hero .crumb, .section-wrap,
  .bcp-wrap, .bvb-content, .calc-wrap,
  .comparison-section, .selector-section,
  .insights, .rc-section, .rel-sec,
  .tips-section, .empty-state, .results, .breadcrumb {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  .crumb { padding-left: 0 !important; padding-right: 0 !important; }

  /* Flip the root variable — every element using var(--page-gutter)
     automatically re-reads the new 5% without touching per-element rules. */
  :root { --page-gutter: 5%; }
  /* Keep the suffix sweep as a safety-net for legacy inline page styles
     that hardcoded 9% instead of using var(--page-gutter). The full
     suffix list catches the long tail of per-page section classes
     (em-bullets, nh-cats, bo-bottom, etc.) that don't fit the explicit
     allow-list above. Without this, those pages keep desktop's 9% on
     phones and force a horizontal slide-in inside the table cells. */
  [class$="-section"]:not([class*="bcc-"]),
  [class$="-wrap"]:not([class*="bcc-"]):not(.ad-container),
  [class$="-hero"]:not([class*="bcc-"]),
  [class$="-content"]:not([class*="bcc-"]),
  [class$="-bar"]:not([class*="bcc-"]):not(.sidebar-link),
  [class$="-grid"]:not([class*="bcc-"]),
  [class$="-head"]:not([class*="bcc-"]):not(.card-head):not(.calc-card-head),
  [class$="-page"]:not([class*="bcc-"]),
  [class$="-list"]:not([class*="bcc-"]),
  [class$="-cats"]:not([class*="bcc-"]),
  [class$="-bullets"]:not([class*="bcc-"]),
  [class$="-bottom"]:not([class*="bcc-"]),
  [class$="-action"]:not([class*="bcc-"]),
  [class$="-articles"]:not([class*="bcc-"]),
  [class$="-pills"]:not([class*="bcc-"]),
  [class$="-empty"]:not([class*="bcc-"]),
  [class$="-nav"]:not([class*="bcc-"]):not(nav),
  [class$="-sec"]:not([class*="bcc-"]) {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  /* Global <section> element override — beats any inline `<section
     style="padding:60px 9%">` (per-page hero/CTA blocks) without
     having to touch every PHP file. !important matters because
     inline `style=` outranks normal class rules; only !important
     longhand wins. */
  section { padding-left: 5% !important; padding-right: 5% !important; }
  /* Belt-and-braces: never let any element hold horizontal scroll
     by mistake. html,body already have overflow-x:hidden on most
     pages, but inline-styled wrappers occasionally leak. Limit body
     overflow-x once at the global level. */
  html, body { overflow-x: hidden; max-width: 100vw; }
  /* Per-slot ad container always 5% on mobile — beats desktop !important */
  div.ad-container { padding-left: 5% !important; padding-right: 5% !important; }
  /* First-ad nav-clearance tighter on mobile */
  body > div.ad-container--first { margin-top: calc(var(--nav-h) + 6px) !important; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  /* On narrow phones, 5% gutter ate too much real estate — wide
     content (price tables, comparison grids, calc result cards)
     pushed past the viewport and caused a horizontal slide. Drop
     to 3% so content fits and the page stops scrolling sideways.
     The global `html, body { overflow-x: hidden }` above is the
     belt-and-braces guard if anything still leaks. */
  :root { --page-gutter: 3%; }
  section { padding-left: 3% !important; padding-right: 3% !important; }
  [class$="-section"]:not([class*="bcc-"]),
  [class$="-wrap"]:not([class*="bcc-"]):not(.ad-container),
  [class$="-hero"]:not([class*="bcc-"]),
  [class$="-content"]:not([class*="bcc-"]),
  [class$="-bar"]:not([class*="bcc-"]):not(.sidebar-link),
  [class$="-grid"]:not([class*="bcc-"]),
  [class$="-head"]:not([class*="bcc-"]):not(.card-head):not(.calc-card-head),
  [class$="-page"]:not([class*="bcc-"]),
  [class$="-list"]:not([class*="bcc-"]),
  [class$="-cats"]:not([class*="bcc-"]),
  [class$="-bullets"]:not([class*="bcc-"]),
  [class$="-bottom"]:not([class*="bcc-"]),
  [class$="-action"]:not([class*="bcc-"]),
  [class$="-articles"]:not([class*="bcc-"]),
  [class$="-pills"]:not([class*="bcc-"]),
  [class$="-empty"]:not([class*="bcc-"]),
  [class$="-nav"]:not([class*="bcc-"]):not(nav),
  [class$="-sec"]:not([class*="bcc-"]),
  .page-head, .page-wrap, .wrap, .main, .main-grid, .hero,
  .content, .content-wrap, .breadcrumb {
    padding-left: 3% !important;
    padding-right: 3% !important;
  }
  div.ad-container { padding-left: 3% !important; padding-right: 3% !important; }
}

/* ============================================================
   UNIFIED AD SYSTEM
   /includes/ads.php outputs:
     <div class="ad-container ad-container--{position}">
       <div class="ad-container--{position}__inner">
         <div class="ad-slot ad-slot--{position} ad-slot--{key}">…</div>
       </div>
     </div>
   The outer container handles width + page gutters + nav offset.
   The inner .ad-slot handles label, border, CLS-stable sizing.
   ============================================================ */

/* ── Outer container: matches site content width (padding 0 9% like nav)
     and leaves the ad unconstrained if its parent already clips width. ── */
div.ad-container{
  display:block !important;
  width:100% !important;
  margin:14px auto !important;
  box-sizing:border-box !important;
  padding:0 var(--page-gutter) !important;
  clear:both;
}
div.ad-container__inner{
  display:flex !important;
  max-width:1160px !important;
  width:100% !important;
  margin:0 auto !important;
  justify-content:center !important;
  box-sizing:border-box;
}

/* FIRST ad rendered per request is tagged by PHP with .ad-container--first.
   Give it just enough nav-clearance so it sits below the fixed navbar. */
body > div.ad-container--first{
  margin-top:calc(var(--nav-h) + 8px) !important;
  margin-bottom:8px !important;
}

.page-wrap > div.ad-container--first,
.content   > div.ad-container--first,
.article-body div.ad-container--first,
.section-wrap > div.ad-container--first,
article div.ad-container--first{
  margin-top:12px !important;
}

/* When ANY element directly follows the first ad, its own top padding
   (usually a nav-clearance like 80px or 82px) becomes redundant because
   the ad has already cleared the nav. Force a small top-padding on any
   direct sibling that follows div.ad-container--first. */
div.ad-container--first + *{
  padding-top:10px !important;
}
/* Even if the next sibling is a container with its own first-child heading,
   cancel its extra offsets. */
div.ad-container--first + .page-head,
div.ad-container--first + .hero,
div.ad-container--first + .post-hero,
div.ad-container--first + section.hero,
div.ad-container--first + .breadcrumb,
div.ad-container--first + .search-hero,
div.ad-container--first + .brand-hero,
div.ad-container--first + .rc-hero,
div.ad-container--first + .saved-hero,
div.ad-container--first + .about-hero,
div.ad-container--first + .empty-query,
div.ad-container + .page-head,
div.ad-container + .hero{
  padding-top:12px !important;
  margin-top:0 !important;
}

/* Catch-all: if the first-ad's next sibling is itself a container (e.g. <main>),
   find its first-child nav-clearance container inside and kill its top offset. */
div.ad-container--first + * > .page-head:first-child,
div.ad-container--first + * > .hero:first-child,
div.ad-container--first + * > .post-hero:first-child,
div.ad-container--first + * > .brand-hero:first-child,
div.ad-container--first + * > .search-hero:first-child,
div.ad-container--first + * > .rc-hero:first-child,
div.ad-container--first + * > .saved-hero:first-child,
div.ad-container--first + * > .about-hero:first-child,
div.ad-container--first + * > .breadcrumb:first-child{
  padding-top:12px !important;
  margin-top:0 !important;
}

/* When an ad sits inside a page's content wrapper, the parent already
   has gutters — drop ours so we don't double-indent. */
.page-wrap > div.ad-container,
.content   > div.ad-container,
.article-body div.ad-container,
.section-wrap > div.ad-container,
article div.ad-container{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Blog post: ads inside article column break out to full page-wrap width
   on desktop so they align with the rest of the site (not the narrow
   reading column). On mobile the layout is single-column anyway. */
@media (min-width: 900px){
  .post-layout .article-body > div.ad-container{
    grid-column: 1 / -1;
    position: relative;
    width: calc(100% + 260px + 28px);  /* article col + sidebar col + gap */
    max-width: none !important;
  }
}

/* ── Global breadcrumb (used by the per-bike tool pages, calculators
   and any new content surface). bike-details.php has its OWN scoped
   .breadcrumb rule with extra top-padding because its breadcrumb sits
   above the hero — that local rule overrides this default.
   Pattern for new pages: Home › All Bikes › Brand › Bike › Current */
.breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  font-size:.72rem;color:var(--text3,#94a3b8);
  margin-bottom:14px;line-height:1.6;
}
.breadcrumb a{color:var(--text3,#94a3b8);text-decoration:none;transition:.15s}
.breadcrumb a:hover{color:var(--orange,#FF6B2B)}
.breadcrumb > span{color:var(--text2,#cbd5e1);font-weight:600}

/* ── Tool-page sidebar layout (used by the 8 new content tools) ──
   2-col grid (main + 280px sidebar) on desktop, single-col on mobile.
   Sidebar sticks at top:80px so it stays visible while scrolling long
   content pages like spare-parts and service-cost. */
.tool-grid{display:grid;grid-template-columns:1fr 280px;gap:28px;align-items:start}
@media(max-width:900px){.tool-grid{grid-template-columns:1fr;gap:18px}}
.tool-side{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(min-width:900px){.tool-side{position:sticky;top:80px}}

.tool-side-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;
}
.tool-side-card__title{
  font-family:var(--font-head);font-size:.7rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--text3);
  margin-bottom:10px;display:flex;align-items:center;gap:6px;
}
.tool-side-link{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:8px 0;border-bottom:1px dashed transparent;
  text-decoration:none;color:var(--text2);font-size:.84rem;line-height:1.3;transition:.15s;
}
.tool-side-link:not(:last-child){border-bottom:1px dashed var(--border2)}
.tool-side-link:hover{color:var(--orange-light);transform:translateX(2px)}
.tool-side-link__arrow{color:var(--text3);font-size:.78rem;flex-shrink:0;transition:.15s}
.tool-side-link:hover .tool-side-link__arrow{color:var(--orange-light)}

.tool-tip{display:flex;gap:10px;padding:8px 0;font-size:.78rem;color:var(--text2);line-height:1.5}
.tool-tip:not(:last-child){border-bottom:1px dashed var(--border2)}
.tool-tip__ic{flex-shrink:0;font-size:.95rem;line-height:1.2}

/* ── Listing-card extras: variant count pill + colour swatches ──
   Emitted by bcc_listing_extras_html() — slots in under the price
   line on bike-listing cards (browse, all-bikes, best-bikes, etc.).
   Stays compact so it doesn't push the card layout. */
.bk-card-extras{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-top:6px;font-size:.72rem;line-height:1;
}
.bk-variants-pill{
  display:inline-flex;align-items:center;
  background:rgba(255,107,43,.08);border:1px solid rgba(255,107,43,.22);
  color:var(--orange-light,#ffb28a);
  padding:3px 8px;border-radius:10px;font-weight:700;
  letter-spacing:.02em;white-space:nowrap;
}
.bk-swatches{display:inline-flex;align-items:center;gap:4px}
.bk-swatch{
  width:14px;height:14px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  display:inline-block;flex-shrink:0;
}
.bk-swatch-more{
  font-size:.65rem;font-weight:700;color:var(--text3,#94a3b8);
  background:var(--surface2,#1f2330);border:1px solid var(--border2,#2a2e3c);
  padding:2px 6px;border-radius:8px;letter-spacing:.02em;margin-left:2px;
}

/* ── Price-vary caveat block ──────────────────────────────────
   Rendered by bcc_price_vary_note() near every on-road price
   display so users know the figure is an estimate and a real
   dealer quote is one click away. */
.bcc-pv-note{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:.78rem;line-height:1.5;color:var(--text3);
  background:rgba(255,107,43,.05);
  border:1px solid rgba(255,107,43,.18);
  border-radius:8px;padding:8px 12px;
  margin:8px 0 0;
}
.bcc-pv-note--block{
  margin:14px 0;padding:12px 16px;font-size:.82rem;
  background:linear-gradient(180deg,rgba(255,107,43,.06),rgba(255,107,43,.02));
}
.bcc-pv-note__txt{color:var(--text2)}
.bcc-pv-note__cta{
  color:var(--orange-light);font-weight:700;text-decoration:none;
  border-bottom:1px dashed rgba(255,107,43,.45);padding-bottom:1px;
  white-space:nowrap;
}
.bcc-pv-note__cta:hover{color:var(--orange);border-bottom-color:var(--orange)}

/* Sidebar ads — kill the default horizontal gutters (the sidebar column
   is already narrow and has its own gap) and let the slot honour the
   admin-chosen size without bumping into the 9% page gutter.
   Matches every sidebar wrapper variant in use site-wide:
     • <aside class="sidebar">     — blog-post
     • <div class="sidebar">       — blog list, best-bikes, new-bikes, search
     • <div class="side">          — bike-affordability-calculator (right rail)
     • <div class="info-panel">    — bike-details (right rail of hero)
     • <aside class="fr-sidebar">  — forum list + forum thread */
.sidebar > div.ad-container,
.sidebar div.ad-container,
.side > div.ad-container,
.side div.ad-container,
.info-panel > div.ad-container,
.info-panel div.ad-container,
.fr-sidebar > div.ad-container,
.fr-sidebar div.ad-container{
  padding-left:0 !important;
  padding-right:0 !important;
  margin:0 !important;
}

/* ── Inner slot box ── */
.ad-slot{
  position:relative;
  /* Defaults to filling its parent width. PHP overrides via inline
     max-width:{w}px when admin picks a fixed size — that caps the slot
     at the chosen width while still letting it shrink on narrower
     viewports. min-height is also injected inline for CLS reservation. */
  width:100%;
  max-width:100%;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  text-align:center;
  box-sizing:border-box;
}

/* Per-slot style variants (picked in admin modal) */
.ad-slot--v-default {}                                             /* baseline */
.ad-slot--v-boxed   { border:1px solid var(--border2);background:var(--surface); }
.ad-slot--v-ghost   { border:1px dashed rgba(255,255,255,.12);background:transparent; }
.ad-slot--v-minimal { border:0;background:transparent; }
.ad-slot--v-accent  {
  border:1px solid rgba(255,107,43,.3);
  background:linear-gradient(135deg,rgba(255,107,43,.06),rgba(0,212,170,.04));
}
.ad-slot--v-dark    {
  border:1px solid rgba(0,0,0,.4);
  background:linear-gradient(135deg,#0a0f1e,#060913);
}
.ad-slot__label{
  /* Positioned top-RIGHT so it never overlaps a banner's own
     eyebrow/brand text (which is always top-left). */
  position:absolute;top:6px;right:10px;z-index:2;
  font-family:var(--font-body);font-size:.62rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--text3);
  background:rgba(10,15,30,.82);
  backdrop-filter:blur(6px);
  padding:2px 8px;border-radius:999px;
  pointer-events:none;
  user-select:none;
}
.ad-slot__label.is-sponsored{ color:var(--orange-light); }
.ad-slot__body{
  display:flex;align-items:center;justify-content:center;
  width:100%;
  /* Only inherit min-height when the slot has reserved it (adsense/image/placeholder).
     HTML / text creatives size naturally so we don't inflate them. */
  line-height:1.4;
}
.ad-slot[style*="min-height"] .ad-slot__body{ min-height:inherit; }
.ad-slot__body img{ max-width:100%;height:auto;display:block; }
/* Sponsored HTML creatives from demo.php use their own flex layouts —
   let them span full width of the slot body. Do NOT set line-height:0
   here — it cascades into child text and collapses every line. */
.ad-slot__body > a,
.ad-slot__body > div{ width:100%; display:block; }

/* Placeholder — shows size + availability message */
.ad-slot__ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;width:100%;min-height:inherit;padding:18px 14px;box-sizing:border-box;
  background:repeating-linear-gradient(-45deg,
    rgba(255,255,255,.022) 0 8px,
    rgba(255,255,255,.05)  8px 16px);
}
.ad-slot__ph-title{font-size:.82rem;font-weight:700;color:var(--text2);letter-spacing:.02em;text-align:center;max-width:90%;}
.ad-slot__ph-msg  {font-size:.72rem;color:var(--text3);text-align:center;}
/* Pixel-size badge — admin's chosen size shown for visual feedback. */
.ad-slot__ph-size{
  font-family:var(--font-body);font-size:.62rem;font-weight:700;letter-spacing:.06em;
  color:var(--text3);background:rgba(255,107,43,.08);
  border:1px solid rgba(255,107,43,.18);border-radius:999px;
  padding:1px 8px;line-height:1.4;
}
/* Clickable sponsorship CTA pill — goes to contact page pre-filled with slot context */
a.ad-slot__ph-avail{
  font-size:.66rem;font-weight:600;
  background:rgba(255,107,43,.08);border:1px solid rgba(255,107,43,.22);
  color:var(--orange-light);padding:5px 14px;border-radius:12px;
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;
  transition:.18s;cursor:pointer;
}
a.ad-slot__ph-avail:hover{
  background:rgba(255,107,43,.18);
  border-color:rgba(255,107,43,.45);
  color:#ffb28a;
  transform:translateY(-1px);
}

/* Text-style sponsored ad */
.ad-text{
  display:block;padding:14px 18px;width:100%;box-sizing:border-box;
  text-decoration:none;text-align:left;line-height:1.5;
  background:var(--surface);border:1px solid rgba(255,107,43,.25);
  border-left:3px solid var(--orange);border-radius:var(--radius-sm);
  transition:.2s;
}
.ad-text:hover{background:var(--surface2);border-left-color:var(--orange-light);}
.ad-text__title{font-weight:700;color:var(--text);font-size:.9rem;margin-bottom:3px;}
.ad-text__desc {font-size:.78rem;color:var(--text2);}
.ad-text__url  {font-size:.7rem;color:var(--orange-light);margin-top:6px;font-weight:600;}

/* Demo AdSense card (seed HTML fallbacks) */
.ad-demo{
  display:flex;flex-direction:column;gap:6px;
  align-items:center;justify-content:center;
  width:100%;height:100%;min-height:inherit;
  background:linear-gradient(135deg,#141d3a 0%,#0d1529 100%);
  color:var(--text2);
  font-family:var(--font-body);
  border:1px dashed var(--border2);
  border-radius:var(--radius-sm);
}
.ad-demo__label{ font-size:.82rem;color:var(--blue);font-weight:700;letter-spacing:.02em; }
.ad-demo__size{  font-size:.68rem;color:var(--text3);letter-spacing:.12em; }
.ad-demo--leaderboard{ min-height:90px; }
.ad-demo--rect       { min-height:250px; }
.ad-demo--halfpage   { min-height:600px; }
.ad-demo--mobile     { min-height:50px;font-size:.68rem; }


/* Responsive */
@media (max-width:900px){
  div.ad-container{ padding:0 5% !important; }
  .ad-slot--new-bikes-sidebar{ display:none; }
}
@media (max-width:600px){
  div.ad-container{ margin:10px auto !important; }

  /* Demo HTML sponsor banners use inline flex with flex-shrink:0 + fixed
     height:90px, designed for 728px desktop. On a narrow phone they overflow
     or clip. Override the inline styles so they stack vertically and shrink. */
  .ad-slot__body > a{
    flex-wrap:wrap !important;
    height:auto !important;
    min-height:auto !important;
    padding:12px 14px !important;
    gap:10px !important;
    text-align:left !important;
    align-items:flex-start !important;
  }
  .ad-slot__body > a > div{
    flex-shrink:1 !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  /* Decorative absolute-positioned glow divs — clip them safely */
  .ad-slot{ contain:paint; }
}

/* ════════════════════════════════════════════════════════════
   IMAGE PLATE SWEEP
   Apply the warm white "studio plate" backdrop to every bike-image
   container site-wide. Every selector listed here is a known image
   wrapper that contains a white-bg OEM photo. Anything NOT in this
   list keeps its dark surface — we only target the actual image
   plates so the rest of the dark UI is untouched.
   Tiles that intentionally stay dark (overlay text, video/CTA tiles)
   are excluded via :not() guards.
   ════════════════════════════════════════════════════════════ */
/* Brand logos are intentionally excluded from the halo sweep —
   they're tiny, often transparent / mono-on-dark, and look better
   sitting flat on the dark UI than wearing a glow. Classes left out:
     .brand-logo, .brand-logo-hero, .mini-brand-icon, .bd-img
   Halo applies ONLY when the container actually holds an uploaded
   bike <img> — the :has(img) gate skips empty-state slots that
   show a 🏍️ emoji / placeholder icon, so those keep their flat
   dark-theme look. :has() is supported in every modern Chromium /
   Safari / Firefox (Chrome 105+, Safari 15.4+, Firefox 121+); on
   older browsers the rule simply doesn't match and we get the
   pre-halo look (graceful degradation). */
.gallery-main:has(img),
.gallery-thumb:not(.gallery-thumb--more):not(.gallery-thumb--video):has(img),
.ra-img:has(img),
.bp-lb-img:has(img),
.bike-card-img:has(img),
.rc-img:has(img),
.sim-img:has(img),
.bo-img:has(img),
.blc-img:has(img),
.gc-img:has(img),
.bcc-acc__img:has(img),
.bcc-srch__thumb:has(img),
.cwt-picker__thumb:has(img),
.bcc-cmp-bar__slot-img:has(img),
.slot-bike-img:has(img),
.bvb-bike-img:has(img),
.bike-selected-thumb:has(img),
.bs-sel-thumb:has(img),
.fr-bike-card img,
.bcc-404-sugg__chip img {
  background: var(--img-plate-bg) !important;
  box-shadow: var(--img-plate-shadow);
}
/* The image itself sits on the halo — a tiny drop-shadow grounds it
   so the bike doesn't float, while keeping the rest of the card
   firmly inside the dark theme. */
.gallery-img,
.gallery-thumb:not(.gallery-thumb--more):not(.gallery-thumb--video) img,
.ra-img img,
.bp-lb-img img,
.bike-card-img img,
.rc-img img,
.sim-img img,
.bo-img img,
.slot-bike-img img,
.bvb-bike-img img,
.bike-selected-thumb img,
.bs-sel-thumb img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
}