/* ═══════════════════════════════════════════════════════════════
   LOCOMOTO BIKE PARTS PAGE — widget styles
   ───────────────────────────────────────────────────────────────
   All classes prefixed .locobp-* to avoid collision with PS/theme.
   Light theme — matches the homepage design tokens:
     surfaces  #ffffff cards on the theme's light page background
     text      #0d1c2b  ·  muted #5a7a9a  ·  faint #9ca3af
     accent    var(--ac …) — per-bike brand colour set by
               locomoto_header_controls; falls back to LOCOMOTO
               orange #FF6000 when no bike brand is active
   The ONE intentionally-dark element is the top bike strip — a
   deep accent band that frames the page like a sub-header.
   Product cards reuse the .lhs-* markup from locomoto_header_search
   (BikePartsCard::render) so those selectors are styled here too.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page chrome — strip the PS theme's white content card ────
   The theme wraps page content in #content.page-content.card — a
   white padded box. The homepage (a CE full-width page) doesn't
   have it; neither should the bike-parts page. :has() targets only
   our page so other PS pages keep their normal card. ──────────── */
#content.page-content:has(.loco-bike-parts-page) {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Match the homepage page background exactly. The homepage <body> is
   brown rgb(107,68,35) with the navy bg.gif topo texture SCREEN-
   blended over it — the blend is what turns it into the warm tone.
   Module pages don't get the CE theme class, so replicate all of it
   here (without background-blend-mode the navy gif shows as-is). */
body[id^="module-locomoto_bike_parts-"] {
  background-color: rgb(107, 68, 35) !important;
  background-blend-mode: screen !important;
  background-attachment: fixed !important;
  background-position: 50% 0% !important;
  background-repeat: repeat !important;
}
/* The theme's #wrapper / #main have an opaque light-grey fill that
   would hide the brown body — make them transparent so the body
   texture shows through, like the homepage. */
body[id^="module-locomoto_bike_parts-"] #wrapper,
body[id^="module-locomoto_bike_parts-"] #main,
body[id^="module-locomoto_bike_parts-"] #content-wrapper {
  background: transparent !important;
}
/* Redundant theme page heading — the hero band <h1> is the real
   page title, so hide the theme's "Parts for …" header. */
#main:has(.loco-bike-parts-page) .page-header {
  display: none !important;
}
/* Width — line the content up EXACTLY with the header.
   Both the theme .container and the Elementor header section are 1440px
   wide. The header's content sits inside a 10px column padding → 1420px.
   PS's #content-wrapper (.col-xs-12) uses a 15px Bootstrap gutter → the
   content would be 1410px (10px narrower, 5px off-centre vs the header).
   Override that gutter to 10px so the content box matches the header
   exactly, at every breakpoint. */
body[id^="module-locomoto_bike_parts-"] #content-wrapper {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* ── Bike Strip (intentionally dark accent band) ─────────────── */
.locobp-bike-strip {
  background: linear-gradient(135deg, #07111B 0%, #0a1622 100%);
  border-bottom: 2px solid var(--ac, #FF6000);
  padding: 18px 28px;
  display: flex; align-items: center; gap: 20px;
  color: #FFF7ED;
}
.locobp-bike-thumb {
  width: 64px; height: 64px; border-radius: var(--r-md, 14px);
  background: linear-gradient(135deg, var(--ac, #FF6000), rgba(0,0,0,0.7));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', system-ui, sans-serif; color: #FFF7ED;
  font-weight: 900; font-size: 13px; letter-spacing: 0.04em;
  box-shadow: 0 4px 12px var(--ac-glow, rgba(255,96,0,0.30));
  flex-shrink: 0;
}
.locobp-bike-meta { flex: 1; }
.locobp-bike-eyebrow {
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 700;
  color: rgba(255,247,237,0.55); letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 4px;
}
.locobp-bike-name {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 22px;
  color: #FFF7ED; letter-spacing: -0.015em;
}
.locobp-bike-name .locobp-yr { color: var(--ac, #FF6000); }
.locobp-bike-action {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,247,237,0.10); color: #FFF7ED;
  border: 1px solid rgba(255,247,237,0.20); border-radius: var(--r-pill, 999px);
  padding: 9px 18px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: all 0.18s; outline: none;
  font-family: 'Inter', system-ui, sans-serif;
}
.locobp-bike-action:hover { background: rgba(255,247,237,0.18); border-color: rgba(255,247,237,0.40); }

/* ── Hero — full-bleed image banner (matches the homepage guest hero) ──
   Breaks out of the content container to span the viewport edge-to-edge,
   and is pulled UP behind the (transparent) site header so the photo
   reads as a true header hero — exactly like the homepage, just shorter.
     · .locobp-hero-bg       background photo / branded gradient
     · .locobp-hero-overlay  dark scrim for text contrast
     · .locobp-hero-glow     soft brand-accent highlight
     · ::after               2px brand-accent baseline stripe
   --loco-hero-pull is set by bike-parts.js to the exact header height;
   the fallback keeps it sane before JS runs. ───────────────────────── */
.locobp-hero-band {
  position: relative;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * var(--loco-hero-pull, 194px));
  padding-top: var(--loco-hero-headh, 170px);
  margin-bottom: 30px;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
  display: flex;
  background: #0a1622;
  color: #FFF7ED;
}
/* Background layer — photo (set inline by the widget) or branded gradient. */
.locobp-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(ellipse at 82% 6%, var(--ac-glow, rgba(255,96,0,0.42)) 0%, transparent 56%),
    linear-gradient(135deg, #11212f 0%, #07111b 100%);
}
/* Dark scrim — guarantees the white headline stays readable on any photo. */
.locobp-hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,17,27,0.62) 0%, rgba(7,17,27,0.18) 32%, rgba(7,17,27,0.82) 100%),
    linear-gradient(105deg, rgba(7,17,27,0.80) 0%, rgba(7,17,27,0.30) 56%, transparent 100%);
}
/* Soft brand-accent highlight, top-right. */
.locobp-hero-glow {
  position: absolute; z-index: 2; pointer-events: none;
  right: 14%; top: -70px; width: 440px; height: 440px;
  background: radial-gradient(ellipse, var(--ac-glow, rgba(255,96,0,0.30)) 0%, transparent 65%);
  filter: blur(40px);
}
/* Brand-accent baseline stripe — same as the homepage hero. */
.locobp-hero-band::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 5;
  background: linear-gradient(90deg, transparent 0%, var(--ac, #FF6000) 20%, var(--ac, #FF6000) 80%, transparent 100%);
  pointer-events: none;
}
/* Content row — capped to the same width as every other section + header. */
.locobp-hero-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 1420px; margin: 0 auto;
  /* Equal breathing room top (header → eyebrow) and bottom. */
  padding: 30px 28px 30px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.locobp-hero-left { max-width: 640px; }
.locobp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ac-dim, rgba(255,96,0,0.16));
  border: 1px solid var(--ac-border, rgba(255,96,0,0.42));
  border-radius: var(--r-pill, 999px); padding: 5px 13px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ac, #FF6000);
  margin-bottom: 14px;
}
.locobp-hero-left h1 {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 900;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05; letter-spacing: -0.035em; color: #fff;
  margin: 0 0 10px; text-shadow: 0 2px 22px rgba(0,0,0,0.55);
}
.locobp-hero-left h1 em {
  font-style: normal; color: var(--ac, #FF6000);
}
.locobp-hero-left p {
  font-size: 14.5px; color: rgba(255,255,255,0.80); margin: 0;
  max-width: 500px; line-height: 1.55;
}
.locobp-hero-right {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  color: rgba(232,219,194,0.66); letter-spacing: 0.08em; text-transform: uppercase;
}
.locobp-hero-right .rating { display: inline-flex; align-items: center; gap: 6px; }
.locobp-hero-right .rating-stars {
  color: #fbbf24; letter-spacing: 2px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px;
}
/* Change-bike action — lives in the hero band (moved from the old bike strip) */
.locobp-hero-changebike {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(232,219,194,0.45);
  color: #e8dbc2;
  padding: 9px 18px; border-radius: var(--r-pill, 999px);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; outline: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.locobp-hero-changebike:hover {
  background: var(--ac, #FF6000);
  border-color: var(--ac, #FF6000);
  color: #ffffff;
}

/* ── Chip Strip ──────────────────────────────────────────────── */
.locobp-chip-strip {
  /* top padding gives the scaled centred chip room — the scroll container
     clips vertically (overflow-x:auto forces overflow-y:auto).
     Desktop keeps its scrollbar; it is hidden only in the mobile picker. */
  display: flex; gap: 8px; padding: 10px 28px 26px; overflow-x: auto;
}
/* Swipe-picker hint shown above the strip on mobile (inserted by JS).
   A bold accent band, framed top + bottom like the header. */
.locobp-chip-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 900; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ac, #FF6000);
  padding: 8px 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ac-dim, rgba(255,96,0,0.10));
  border-top: 1.5px solid var(--ac-border, rgba(255,96,0,0.42));
  border-bottom: 1.5px solid var(--ac-border, rgba(255,96,0,0.42));
}
.locobp-chip-hint-arr {
  display: inline-block; margin-left: 7px;
  animation: locobpHintNudge 1.1s ease-in-out infinite;
}
.locobp-chip-hint-arr-l {
  margin-left: 0; margin-right: 7px;
  animation-name: locobpHintNudgeL;
}
@keyframes locobpHintNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
@keyframes locobpHintNudgeL {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-5px); }
}

/* ── Confirmation toast (wishlist saved, etc.) ──────────────────── */
.locobp-toast {
  position: fixed; left: 50%; bottom: 92px; z-index: 99999;
  transform: translateX(-50%) translateY(16px);
  background: #0d1c2b; color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  padding: 12px 24px; border-radius: var(--r-pill, 999px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.42);
  max-width: 84vw; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.locobp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Mobile drawer "Wishlist" quick-link count badge ────────────── */
.locobp-qlink-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 6px; margin-left: 8px;
  background: var(--ac, #FF6000); color: #ffffff;
  border-radius: var(--r-pill, 999px);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 800; line-height: 1;
}
/* ── Sticky mini-footer wishlist count ──────────────────────────────
   The site's .smf-cc-badge style is scoped to the cart button, so the
   wishlist badge we add needs its own styling (otherwise it renders as
   a big unstyled number). Small corner pill, matching the cart badge. */
.smf-cc-wish { position: relative; }
.smf-cc-wish .smf-cc-badge {
  /* Positioned identically to the SMF cart badge (top:-1px / right:1px). */
  position: absolute !important;
  top: -1px !important; right: 1px !important;
  bottom: auto !important; left: auto !important;
  width: 16px !important; height: 16px !important;
  min-width: 16px; padding: 0; margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
  background: var(--ac, #FF6000); color: #ffffff;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px !important; font-weight: 800; line-height: 1;
}
.locobp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ffffff;
  border: 1px solid rgba(13,28,43,0.12); color: #0d1c2b;
  padding: 8px 16px; border-radius: var(--r-pill, 999px);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; transition: all 0.18s; outline: none;
}
/* Pills are <a> tags — never underline them, in any state. */
.locobp-chip,
.locobp-chip:hover,
.locobp-chip:focus,
.locobp-chip:active,
.locobp-chip.active { text-decoration: none !important; }
.locobp-chip:hover {
  border-color: var(--ac, #FF6000);
  color: var(--ac, #FF6000);
}
.locobp-chip.active {
  /* Cream / light-brown semi-transparent — design-system warm tone. */
  background: rgba(232, 219, 194, 0.60);
  border-color: rgba(232, 219, 194, 0.85);
  color: #3a2718;
}
.locobp-chip-count {
  opacity: 0.55; font-weight: 500;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
}

/* ── Section header (used by Featured) ──────────────────────── */
.locobp-section { /* layout-only wrapper */ }
.locobp-sec-h {
  display: flex; align-items: baseline; gap: 14px; padding: 0 28px 16px;
}
.locobp-sec-h h2 {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 900; font-size: 34px;
  color: #0d1c2b; letter-spacing: -0.02em; text-transform: uppercase; margin: 0;
}
.locobp-sec-h .locobp-sec-sub {
  font-size: 15px; font-weight: 600; color: #e8dbc2;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Grids ───────────────────────────────────────────────────── */
.locobp-feat-grid,
.locobp-prod-grid {
  display: grid; gap: 14px; padding: 0 28px 36px;
}
.locobp-feat-grid[data-cols="3"], .locobp-prod-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.locobp-feat-grid[data-cols="4"], .locobp-prod-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.locobp-feat-grid[data-cols="5"], .locobp-prod-grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.locobp-feat-grid[data-cols="6"], .locobp-prod-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
.locobp-feat-grid[data-cols="8"], .locobp-prod-grid[data-cols="8"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
  .locobp-feat-grid, .locobp-prod-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 599px) {
  .locobp-feat-grid, .locobp-prod-grid { grid-template-columns: 1fr !important; }
}

/* ── Product cards (.lhs-* markup from BikePartsCard::render) ── */
.loco-bike-parts-page .lhs-card {
  background: #ffffff;
  border: 1px solid rgba(13,28,43,0.08);
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
  text-decoration: none;
  display: flex; flex-direction: column;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.loco-bike-parts-page .lhs-card:hover {
  border-color: rgba(13,28,43,0.18);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,28,43,0.10);
}
/* No focus ring on the card link — the theme adds a cyan outline on
   tap/focus that reads as an ugly border. */
.loco-bike-parts-page .lhs-card,
.loco-bike-parts-page .lhs-card:focus,
.loco-bike-parts-page .lhs-card:focus-visible { outline: none !important; }
.loco-bike-parts-page .lhs-img {
  position: relative;
  background: #f4f5f7;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.loco-bike-parts-page .lhs-prod-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
}
/* Card text — sizing kept identical to the header-search / homepage
   product cards (the "standard"); only the colours are re-tuned for the
   light theme. Don't drift these values — match search. */
.loco-bike-parts-page .lhs-meta {
  padding: 10px 12px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.loco-bike-parts-page .lhs-name {
  color: #0d1c2b;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 700; line-height: 1.3;
}
.loco-bike-parts-page .lhs-price {
  color: var(--ac, #FF6000);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 22px; font-weight: 900; letter-spacing: -0.03em; line-height: 1;
}
.loco-bike-parts-page .lhs-price .was {
  color: #9ca3af;
  font-size: 11.5px; font-weight: 500;
  text-decoration: line-through; margin-left: 7px;
}
.loco-bike-parts-page .lhs-fit-row {
  /* flex-direction:row is explicit — header-search's mobile CSS forces
     column, which made align-items:center push the badge to the middle. */
  display: flex; flex-direction: row;
  align-items: center; justify-content: flex-start; gap: 6px;
  margin-top: 3px;
}
.loco-bike-parts-page .lhs-fit,
.loco-bike-parts-page .lhs-no-fit {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  text-align: left;
}
.loco-bike-parts-page .lhs-fit  { color: #16a34a; }
.loco-bike-parts-page .lhs-no-fit { color: #dc2626; }

/* Stock + brand pills on the image — match the search card. */
.loco-bike-parts-page .lhs-stock {
  position: absolute; top: 8px; left: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill, 999px);
  line-height: 1; display: inline-flex; align-items: center;
}
.loco-bike-parts-page .lhs-stock.in  { background: rgba(34,197,94,0.55);  color: #166534; border: 1px solid rgba(34,197,94,0.70); }
.loco-bike-parts-page .lhs-stock.low { background: rgba(251,146,60,0.55); color: #7c2d12; border: 1px solid rgba(251,146,60,0.70); }
.loco-bike-parts-page .lhs-stock.out { background: rgba(239,68,68,0.55);  color: #7f1d1d; border: 1px solid rgba(239,68,68,0.70); }
.loco-bike-parts-page .lhs-brand-tag {
  position: absolute; bottom: 8px; right: 8px;
  background: #ffffff; color: var(--ac, #FF6000);
  border: 1px solid var(--ac, #FF6000);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill, 999px);
}

/* Card hover actions (wishlist / ATC / hide) */
.loco-bike-parts-page .lhs-card-actions {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 14px;
  background: rgba(255,255,255,0.78);
  opacity: 0; transition: opacity 0.18s;
}
.loco-bike-parts-page .lhs-card:hover .lhs-card-actions,
.loco-bike-parts-page .lhs-card.lhs-is-in-cart .lhs-card-actions {
  opacity: 1;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.loco-bike-parts-page .lhs-wl-btn,
.loco-bike-parts-page .lhs-atc,
.loco-bike-parts-page .lhs-hide-btn,
.loco-bike-parts-page .lhs-notify-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.03em;
  padding: 8px 12px; border-radius: var(--r-md, 12px);
  cursor: pointer; outline: none; transition: all 0.16s;
}
.loco-bike-parts-page .lhs-atc {
  background: var(--ac, #FF6000); color: #ffffff; border: 1px solid var(--ac, #FF6000);
}
.loco-bike-parts-page .lhs-atc:hover { filter: brightness(1.08); }
.loco-bike-parts-page .lhs-wl-btn,
.loco-bike-parts-page .lhs-notify-btn {
  background: #ffffff; color: #0d1c2b; border: 1px solid rgba(13,28,43,0.16);
}
.loco-bike-parts-page .lhs-wl-btn:hover { border-color: #dc2626; color: #dc2626; }
.loco-bike-parts-page .lhs-wl-btn.added { border-color: #dc2626; color: #dc2626; }
.loco-bike-parts-page .lhs-hide-btn {
  background: transparent; color: #8a96a8;
  border: 1px dashed rgba(13,28,43,0.20);
}
.loco-bike-parts-page .lhs-hide-btn:hover { border-color: #dc2626; color: #dc2626; border-style: solid; }
/* "View product" — desktop-hidden (the card click already opens the PDP);
   shown inside the tap-to-open overlay on mobile. */
.loco-bike-parts-page .lhs-view-btn {
  display: none;
  width: 100%;
  align-items: center; justify-content: center; gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em;
  padding: 8px 12px; border-radius: var(--r-md, 12px);
  cursor: pointer; outline: none; transition: filter 0.16s;
  background: #0d1c2b; color: #ffffff; border: 1px solid #0d1c2b;
}
.loco-bike-parts-page .lhs-view-btn:hover { filter: brightness(1.15); }
/* Hide / Unhide label swap — show "Unhide" once the card is hidden. */
.loco-bike-parts-page .lhs-unhide-lbl { display: none; }
.loco-bike-parts-page .lhs-card.is-hidden .lhs-hide-lbl   { display: none; }
.loco-bike-parts-page .lhs-card.is-hidden .lhs-unhide-lbl { display: inline; }
.loco-bike-parts-page .lhs-card.is-hidden .lhs-hide-btn {
  border-style: solid; border-color: rgba(34,197,94,0.5); color: #16a34a;
}
.loco-bike-parts-page .lhs-card.is-hidden .lhs-hide-btn:hover {
  border-color: #16a34a; color: #16a34a;
}
/* In-cart pill: show "In Cart", reveal "Remove" on hover */
.loco-bike-parts-page .lhs-atc .lhs-atc-rem-lbl { display: none; }
.loco-bike-parts-page .lhs-card.lhs-is-in-cart .lhs-atc:hover .lhs-atc-add-lbl { display: none; }
.loco-bike-parts-page .lhs-card.lhs-is-in-cart .lhs-atc:hover .lhs-atc-rem-lbl { display: inline; }
.loco-bike-parts-page .lhs-wl-rem-lbl { display: none; }
/* Wishlist heart badge (top-left, when wishlisted) */
.loco-bike-parts-page .lhs-wl-badge {
  /* top-RIGHT — top-left is occupied by the stock label. */
  position: absolute; top: 8px; right: 8px; left: auto; z-index: 5;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid #dc2626;
}
.loco-bike-parts-page .lhs-card:hover .lhs-wl-badge,
.loco-bike-parts-page .lhs-card.lhs-is-in-cart .lhs-wl-badge { opacity: 0; }

/* Hidden cards */
.loco-bike-parts-page .lhs-card.is-hidden { opacity: 0.45; }
.loco-bike-parts-page .lhs-card.is-hidden:hover { opacity: 0.75; }

/* ── Save Panel (inline) ──────────────────────────────────────── */
.locobp-save-inline {
  margin: 0 28px 32px;
  /* White surface card — matches the product cards on this page
     (design-system card: #fff, hairline border, soft shadow). */
  background: #ffffff;
  border: 1px solid rgba(13,28,43,0.08);
  border-radius: var(--r-lg, 18px);
  box-shadow: 0 8px 26px rgba(13,28,43,0.12);
  padding: 24px 28px;
  display: flex; align-items: center; gap: 22px;
  color: #0d1c2b;
  position: relative; overflow: hidden;
}
.locobp-save-ico {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ac, #FF6000); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0;
  box-shadow: 0 8px 20px var(--ac-glow, rgba(255,96,0,0.30));
}
.locobp-save-text { flex: 1; }
.locobp-save-text h3 {
  font-family: 'Inter', system-ui, sans-serif; font-size: 19px; font-weight: 800;
  margin: 0 0 4px; color: #0d1c2b; letter-spacing: -0.015em;
}
.locobp-save-text p {
  font-size: 13.5px; color: #2f3540; margin: 0;
  max-width: 580px; line-height: 1.55;
}
.locobp-save-btn {
  background: var(--ac, #FF6000); color: #ffffff;
  /* 1.5px border (same colour as the fill) so it matches the outlined
     Log-in button's box height exactly. */
  border: 1.5px solid var(--ac, #FF6000);
  padding: 11px 22px; border-radius: var(--r-pill, 999px);
  font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: transform 0.18s, filter 0.18s;
  flex-shrink: 0; display: inline-block; outline: none;
}
.locobp-save-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
/* Create account + Log in, side by side. Same pill; register is the
   filled primary, login the outlined twin. */
.locobp-save-actions {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.locobp-save-login {
  background: transparent; color: var(--ac, #FF6000);
  border: 1.5px solid var(--ac, #FF6000);
  padding: 11px 22px; border-radius: var(--r-pill, 999px);
  font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; display: inline-block; outline: none;
  transition: transform 0.18s, background 0.18s, color 0.18s;
}
.locobp-save-login:hover {
  transform: translateY(-2px);
  background: var(--ac, #FF6000); color: #ffffff;
}

/* ── AllParts head ───────────────────────────────────────────── */
.locobp-allparts-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 28px 14px;
  /* Lift the head (and its sort dropdown) above the product grid. The grid
     carries header-search's .lhs-grid class which sets z-index:600, so the
     head must beat that. */
  position: relative; z-index: 700;
}
.locobp-allparts-head h2 {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 900; font-size: 34px;
  color: #0d1c2b; letter-spacing: -0.025em; text-transform: uppercase; margin: 0;
}
.locobp-allparts-head .locobp-allparts-count {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  color: rgba(232,219,194,0.7); letter-spacing: 0.06em; text-transform: uppercase;
}

/* Sort */
.locobp-sort-wrap { position: relative; margin-left: auto; }
.locobp-sort-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px;
  color: #5a7a9a; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; padding: 7px 14px;
  border: 1px solid rgba(13,28,43,0.14); border-radius: var(--r-pill, 999px);
  background: #ffffff; outline: none; transition: all 0.18s;
}
.locobp-sort-btn:hover { border-color: var(--ac, #FF6000); color: var(--ac, #FF6000); }
.locobp-sort-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  background: #ffffff; color: #0d1c2b;
  border: 1px solid rgba(13,28,43,0.10); border-radius: var(--r-md, 14px);
  box-shadow: 0 8px 24px rgba(13,28,43,0.12);
  padding: 6px; min-width: 160px;
}
.locobp-sort-menu.show { display: block; }
.locobp-sort-opt {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer; outline: none;
  padding: 9px 14px; border-radius: var(--r-sm, 8px);
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 700;
  color: #0d1c2b; transition: background 0.15s;
}
.locobp-sort-opt:hover { background: rgba(13,28,43,0.06); }
.locobp-sort-opt.is-active { background: var(--ac-dim, rgba(255,96,0,0.10)); color: var(--ac, #FF6000); }

/* ── Active filter chips ─────────────────────────────────────── */
.locobp-fchip-bar {
  padding: 0 28px 16px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.locobp-fchip-label {
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  color: rgba(232,219,194,0.7); letter-spacing: 0.10em; text-transform: uppercase;
  margin-right: 4px;
}
.locobp-fchip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ac-dim, rgba(255,96,0,0.10));
  color: var(--ac, #FF6000);
  border: 1.5px solid var(--ac-border, rgba(255,96,0,0.28));
  padding: 7px 8px 7px 14px; border-radius: var(--r-pill, 999px);
  font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.03em;
}
.locobp-fchip-key {
  font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700;
  color: #9ca3af; text-transform: uppercase; margin-right: 6px;
}
.locobp-fchip-x {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ac, #FF6000); color: #ffffff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
  border: none; cursor: pointer; opacity: 0.85; outline: none;
  transition: opacity 0.18s;
}
.locobp-fchip-x:hover { opacity: 1; }
.locobp-fchip-add {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: #5a7a9a;
  border: 1.5px dashed rgba(13,28,43,0.22);
  padding: 7px 14px; border-radius: var(--r-pill, 999px);
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; transition: all 0.18s; outline: none;
}
.locobp-fchip-add:hover {
  color: var(--ac, #FF6000); border-color: var(--ac, #FF6000); border-style: solid;
}
.locobp-fchip-clear {
  margin-left: auto;
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 700;
  color: #8a96a8; letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; border: none; cursor: pointer; outline: none;
  transition: color 0.18s;
}
.locobp-fchip-clear:hover { color: var(--ac, #FF6000); }

/* ── Add-filter popover ─────────────────────────────────────── */
.locobp-fchip-popover {
  margin: 0 28px 16px;
  background: #ffffff; color: #0d1c2b;
  border: 1px solid rgba(13,28,43,0.10); border-radius: var(--r-md, 14px);
  padding: 14px 18px; box-shadow: 0 8px 24px rgba(13,28,43,0.08);
  display: none;
}
.locobp-fchip-popover.show { display: block; }
.locobp-popover-group + .locobp-popover-group {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(13,28,43,0.06);
}
.locobp-popover-title {
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 800;
  color: #5a7a9a; letter-spacing: 0.10em; text-transform: uppercase; margin: 0 0 10px;
}
.locobp-popover-opts { display: flex; gap: 7px; flex-wrap: wrap; }
.locobp-popover-opt {
  background: #f4f5f7; border: 1px solid rgba(13,28,43,0.10);
  padding: 5px 12px; border-radius: var(--r-pill, 999px);
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px;
  color: #0d1c2b; cursor: pointer; transition: all 0.18s; outline: none;
}
.locobp-popover-opt:hover, .locobp-popover-opt.is-active {
  background: var(--ac, #FF6000); color: #ffffff;
  border-color: var(--ac, #FF6000);
}
.locobp-popover-cnt {
  opacity: 0.55; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; margin-left: 4px;
}

/* ── Load more ──────────────────────────────────────────────── */
.locobp-load-more { text-align: center; padding: 0 28px 50px; }
.locobp-load-more-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #ffffff; color: #0d1c2b;
  border: 1.5px solid rgba(13,28,43,0.16);
  padding: 12px 28px; border-radius: var(--r-pill, 999px);
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: all 0.18s; outline: none;
}
.locobp-load-more-btn:hover { border-color: var(--ac, #FF6000); color: var(--ac, #FF6000); }
.locobp-load-more-btn.is-loading { opacity: 0.6; cursor: progress; }
.locobp-load-more-info {
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  color: rgba(232,219,194,0.7); margin-top: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ── Empty state ─────────────────────────────────────────────── */
.locobp-empty {
  background: #ffffff; color: #0d1c2b;
  border: 1px solid rgba(13,28,43,0.10); border-radius: var(--r-lg, 18px);
  padding: 44px 36px; margin: 0 28px 36px;
  text-align: center; box-shadow: 0 2px 8px rgba(13,28,43,0.06);
}
.locobp-empty-ico { font-size: 44px; margin-bottom: 10px; }
.locobp-empty h3 {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 22px;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #0d1c2b;
}
.locobp-empty p {
  font-size: 14px; color: #5a7a9a; max-width: 580px; margin: 0 auto 22px; line-height: 1.6;
}
.locobp-empty-cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.locobp-empty-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ffffff; color: #0d1c2b;
  border: 1.5px solid rgba(13,28,43,0.18); border-radius: var(--r-pill, 999px);
  padding: 10px 22px; font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: all 0.18s; outline: none;
}
.locobp-empty-cta:hover { border-color: var(--ac, #FF6000); color: var(--ac, #FF6000); }
.locobp-empty-cta.primary {
  background: var(--ac, #FF6000); color: #ffffff; border-color: var(--ac, #FF6000);
}
.locobp-empty-cta.primary:hover { filter: brightness(1.08); color: #ffffff; }

/* ── Setup notice (shown if CE template ID not configured) ──── */
.locobp-setup-notice {
  background: #ffffff; color: #0d1c2b;
  border: 1px solid rgba(13,28,43,0.10); border-radius: var(--r-lg, 18px);
  padding: 32px 36px; margin: 32px 28px;
}
.locobp-setup-notice h2 { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; margin: 0 0 10px; }
.locobp-setup-notice code { background: rgba(13,28,43,0.06); padding: 2px 7px; border-radius: 4px; font-size: 13px; }
.locobp-error {
  margin: 24px 28px; padding: 16px 20px;
  background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.25);
  border-radius: var(--r-md, 14px); color: #b91c1c;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px;
}

/* ── Show-hidden + Auto-scroll + Featured pills ──────────────── */
.locobp-hidden-toggle,
.locobp-auto-toggle,
.locobp-feat-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(13,28,43,0.14);
  color: #5a7a9a;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 7px 14px; border-radius: var(--r-pill, 999px);
  cursor: pointer; outline: none;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.locobp-hidden-toggle:hover,
.locobp-auto-toggle:hover,
.locobp-feat-toggle:hover {
  border-color: var(--ac, #FF6000); color: var(--ac, #FF6000);
}
.locobp-hidden-toggle.is-active,
.locobp-auto-toggle.is-active,
.locobp-feat-toggle.is-active {
  /* Translucent accent layered OVER a solid white base, so the tint
     reads cleanly instead of muddying against the brown page. */
  background:
    linear-gradient(0deg, var(--ac-dim, rgba(255,96,0,0.10)), var(--ac-dim, rgba(255,96,0,0.10))),
    #ffffff;
  border-color: var(--ac, #FF6000); border-style: solid;
  color: var(--ac, #FF6000);
}
.locobp-auto-slot {
  width: 22px; height: 12px; border-radius: var(--r-pill, 999px);
  background: rgba(13,28,43,0.18); position: relative;
  flex-shrink: 0; transition: background 0.18s;
}
.locobp-auto-slot::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; transition: transform 0.18s;
}
.locobp-auto-toggle.is-active .locobp-auto-slot,
.locobp-feat-toggle.is-active .locobp-auto-slot { background: var(--ac, #FF6000); }
.locobp-auto-toggle.is-active .locobp-auto-slot::after,
.locobp-feat-toggle.is-active .locobp-auto-slot::after { transform: translateX(10px); }

/* ── Responsive padding trim ─────────────────────────────────── */
@media (max-width: 599px) {
  .locobp-bike-strip,
  .locobp-chip-strip,
  .locobp-sec-h,
  .locobp-feat-grid,
  .locobp-prod-grid,
  .locobp-allparts-head,
  .locobp-fchip-bar,
  .locobp-load-more { padding-left: 16px; padding-right: 16px; }
  .locobp-save-inline { margin-left: 16px; margin-right: 16px; flex-wrap: wrap; }
  /* Stack the two CTAs full-width — side-by-side wraps "Create account". */
  .locobp-save-actions { width: 100%; flex-direction: column; }
  .locobp-save-btn, .locobp-save-login { width: 100%; text-align: center; }
  /* Hero stays full-bleed on mobile; only the inner padding + stacking change. */
  .locobp-hero-band { border-radius: 0 0 16px 16px; margin-bottom: 22px; }
  .locobp-hero-inner {
    flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 20px 16px 24px;
  }
  .locobp-hero-left { max-width: 100%; }
  .locobp-hero-left h1 { font-size: clamp(22px, 6.5vw, 30px); }
  .locobp-hero-right { align-items: flex-start; }
  .locobp-hero-glow { width: 300px; height: 300px; right: -50px; top: -40px; }
}

/* ── Mobile: tap-to-reveal product-card actions ──────────────────
   Touch has no hover. On mobile a card shows nothing extra; a TAP
   opens the options overlay (View product / Wishlist / Add to Cart)
   instead of navigating. bike-parts.js adds .actions-open on tap and
   blocks the card's product-link until "View product" is chosen. */
@media (max-width: 1023px) {
  /* Full-bleed body on mobile so it matches the header + hero width.
     Needs !important to beat the desktop #content-wrapper rule. */
  body[id^="module-locomoto_bike_parts-"] #content-wrapper {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .loco-bike-parts-page .lhs-card-actions { opacity: 0; }
  .loco-bike-parts-page .lhs-card.actions-open .lhs-card-actions {
    opacity: 1;
    pointer-events: auto;     /* re-enable taps — base .lhs-* sets none */
    transform: none;          /* cancel header-search's slide-in offset
                                 so the frost sits flush to the image edges */
    inset: 0;
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  }
  .loco-bike-parts-page .lhs-view-btn { display: flex; }
  /* No hover lift on touch. */
  .loco-bike-parts-page .lhs-card:hover { transform: none; box-shadow: none; }
  /* Card text — match the search card's mobile sizes exactly. */
  .loco-bike-parts-page .lhs-name      { font-size: 13.5px; }
  .loco-bike-parts-page .lhs-price     { font-size: 20px; }
  .loco-bike-parts-page .lhs-price .was{ font-size: 12px; }
  .loco-bike-parts-page .lhs-fit,
  .loco-bike-parts-page .lhs-no-fit    { font-size: 11px; }
  .loco-bike-parts-page .lhs-stock     { font-size: 11px; padding: 4px 9px; }
  .loco-bike-parts-page .lhs-brand-tag { font-size: 10.5px; padding: 4px 8px; }
}

/* ── Mobile: category strip as a swipe picker ────────────────────
   On touch the strip behaves like a wheel/spinner picker — swipe and
   it snaps chip-to-centre, the centred chip is highlighted, and on
   release (scroll settle) bike-parts.js applies that category. Tapping
   a chip still works and re-centres it. Desktop is untouched. */
@media (max-width: 1023px) {
  .locobp-chip-strip {
    /* No CSS snap — it fought the fling. The strip free-scrolls with full
       momentum (fast to spin through); bike-parts.js glides the centred
       chip to exact centre on settle, giving the wheel-picker feel. */
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding-left: 50%; padding-right: 50%;
    padding-bottom: 10px;   /* match padding-top so both rulers sit evenly */
    gap: 8px;
    scrollbar-width: none;  /* mobile picker — no scrollbar (Firefox) */
    /* Dark-brown depth track behind the pills — darkest at the centre,
       fading out to the page background at the sides. */
    background: linear-gradient(90deg,
      transparent 0%, rgba(34,19,7,0.50) 27%, rgba(34,19,7,0.58) 50%,
      rgba(34,19,7,0.50) 73%, transparent 100%);
    /* Edge fade — pills soften out as they reach the screen edges
       (where they disappear / reappear). */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  }
  .locobp-chip-strip::-webkit-scrollbar { display: none; }   /* mobile — WebKit */
  /* Ruler strip — tick marks under the chips that fade in while scrolling;
     a larger accent unit in the centre marks the selected slot. */
  .locobp-ruler {
    position: relative;
    height: 10px;
    margin: 4px 0 16px;            /* bottom ruler — gap down to next section */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: repeating-linear-gradient(
      90deg,
      rgba(232,219,194,0.65) 0, rgba(232,219,194,0.65) 1.5px,
      transparent 1.5px, transparent 13px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
  .locobp-ruler-top { margin: 0 0 4px; }   /* top ruler — sits just above the chips */
  .locobp-ruler.is-scrolling { opacity: 0.8; }
  .locobp-ruler-center {
    position: absolute; left: 50%; top: -10px;
    width: 3px; height: 30px;
    transform: translateX(-50%);
    background: var(--ac, #FF6000);
    border-radius: 2px;
  }
  .locobp-chip {
    /* transform is JS-driven per scroll frame for the wheel-picker depth
       effect — no transition on it so it tracks the finger.
       Non-focused pills = light brown; the focused one flips to white. */
    transition: background 0.16s, color 0.16s, border-color 0.16s;
    transform-origin: center center;
    background: rgba(232, 219, 194, 0.55);
    border-color: rgba(232, 219, 194, 0.70);
    color: #3a2718;
  }
  .locobp-chip.is-centered {
    background: #ffffff;
    border-color: #ffffff;
    color: #0d1c2b; font-weight: 800;
  }
  .locobp-chip.is-centered .locobp-chip-count { opacity: 0.6; color: #0d1c2b; }
}

/* ───────────────────────────────────────────────────────────────
   Make landing — model grid  (/bikes/{make})
   ─────────────────────────────────────────────────────────────── */
.locobp-make-grid {
  display: grid; gap: 14px; padding: 0 28px 48px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1023px) { .locobp-make-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .locobp-make-grid { grid-template-columns: 1fr; } }

.locobp-make-card {
  display: flex; flex-direction: column; gap: 4px;
  background: #ffffff;
  border: 1px solid rgba(13,28,43,0.08);
  border-radius: var(--r-lg, 18px);
  padding: 20px 22px;
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.locobp-make-card:hover {
  border-color: var(--ac, #FF6000);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,28,43,0.12);
}
.locobp-make-card-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px; font-weight: 800; color: #0d1c2b;
  letter-spacing: -0.01em; line-height: 1.25;
}
.locobp-make-card-years {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; color: #8a96a8;
  letter-spacing: 0.04em;
}
.locobp-make-card-go {
  margin-top: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ac, #FF6000);
}

/* ───────────────────────────────────────────────────────────────
   Model landing — year grid  (/bikes/{make}/{model})
   ─────────────────────────────────────────────────────────────── */
.locobp-year-grid {
  display: grid; gap: 12px; padding: 0 28px 48px;
  grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 1023px) { .locobp-year-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 599px)  { .locobp-year-grid { grid-template-columns: repeat(3, 1fr); } }

.locobp-year-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 78px;
  background: #ffffff;
  border: 1px solid rgba(13,28,43,0.08);
  border-radius: var(--r-md, 14px);
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.locobp-year-card:hover {
  border-color: var(--ac, #FF6000);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(13,28,43,0.12);
}
.locobp-year-card-yr {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 22px; font-weight: 900; color: #0d1c2b; letter-spacing: -0.02em;
}
.locobp-year-card-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ac, #FF6000);
}
.locobp-year-card.is-current {
  border-color: var(--ac, #FF6000);
  background: var(--ac-dim, rgba(255,96,0,0.08));
}