/* ═══════════════════════════════════════════════════════════════
LOCOMOTO HEADER CONTROLS — CSS
Mirrors header_mockup_v3.html exactly.
All accent refs use --ac / --ac-dim / --ac-glow / --ac-border
so bike colour-switching works by swapping those four variables.
═══════════════════════════════════════════════════════════════ */
/* ─── Sitewide font: Inter ────────────────────────────────────────
header-controls.css is the only Locomoto stylesheet that loads on
EVERY front-office page (product, listing, bike-parts, homepage,
CMS — wherever the header module renders). Hosting the Inter
@import + body rule here makes the brand font available everywhere
without per-module duplication. The product-theme + bike-parts
modules already spec `font-family: 'Inter'` on their components but
without the @import here the font file wasn't actually loaded on
non-PDP pages, so they fell back to system-ui.
`body, body *:not(i):not(.fa)…` blanket targets most page text. The
`:not` clauses keep icon-font glyphs (Font Awesome, Material Icons,
Material Symbols) rendering correctly. Wrapping individual page
components in their own font-family rules still wins over this.
2026-06-01: the Material Icons exclusions were missing — `.material-
icons` from PS theme.css is (0,1,0) and lost to this rule at (0,2,2),
so Google's `dashboard` ligature
pattern rendered the literal word "dashboard" instead of the icon
on /my-garage tab pills (and anywhere else theme.css was the only
icon-font ancestor). Added :not selectors for every Material variant. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
body {
font-family: 'Inter', system-ui, sans-serif;
}
body *:not(i):not(.fa):not([class*="fa-"]):not(.material-icons):not(.material-icons-outlined):not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp) {
font-family: 'Inter', system-ui, sans-serif;
}
/* Defensive override — even if some other selector reaches one of these
icon-font classes with higher specificity, force the icon font family
so the ligature renders. The whole point of these classes is to BE
icon-font containers, so this !important is targeted, not blanket. */
.material-icons,
.material-icons-outlined,
.material-symbols,
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
font-family: 'Material Icons', 'Material Icons Outlined',
'Material Symbols Outlined', 'Material Symbols Rounded',
'Material Symbols Sharp', sans-serif !important;
}
/* ─── MOBILE BIKE CONTEXT BAR ─────────────────────────────────────── */
.lhc-bike-ctx { display: none; }
@media (max-width: 1023px) {
/* Bar — a flat single-button surface: the whole bar is the tap target,
so there's no boxed icon and no boxed "Change" button. Accent-tinted,
and it brightens on press (and hover). */
.lhc-bike-ctx.visible {
display: flex !important;
align-items: center !important;
gap: 10px !important;
box-sizing: border-box !important;
/* The bar extends ~12px UP behind the header strip (the strip is
positioned, so it paints over this static bar) to fill behind the
strip's rounded bottom corners. padding-top keeps the icon/text in
the visible area below the strip. */
min-height: 48px !important;
padding: 12px 14px 0 !important;
margin: -3px 10px 0 !important;
background: linear-gradient(0deg, var(--ac-dim), var(--ac-dim)), #0a1622 !important;
border-left: 1px solid var(--ac-border);
border-bottom: 1px solid var(--ac-border);
border-radius: 0 0 10px 10px;
cursor: pointer;
transition: background 0.18s ease;
animation: lhcBarReveal 0.7s cubic-bezier(0.22,0.61,0.36,1) 0.2s both;
}
.lhc-bike-ctx.visible:hover,
.lhc-bike-ctx.visible:active {
background: linear-gradient(0deg, var(--ac-glow), var(--ac-glow)), #0a1622 !important;
}
/* Dropdown open — bar joins flush to the dropdown (square bottom corners) */
.lhc-bike-ctx.visible.lhc-ctx-dropopen {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* Icon — bare SVG, no box (the whole bar is the button) */
.lhc-bctx-icon {
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
color: var(--ac, #ff6600) !important;
}
.lhc-bctx-text {
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
gap: 0px !important;
align-self: center !important;
}
.lhc-bctx-label {
font-family: 'Inter', sans-serif !important;
font-size: 9.5px !important;
font-weight: 700 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
color: #7a8fa8 !important;
line-height: 1 !important;
}
.lhc-bctx-bike {
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
color: #ffffff !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* "Change ›" — plain accent text, not a button (the whole bar is tappable) */
.lhc-bctx-change {
flex-shrink: 0 !important;
align-self: center !important;
background: none !important;
border: none !important;
padding: 0 !important;
color: var(--ac, #ff6600) !important;
font-size: 12px !important;
font-weight: 700 !important;
white-space: nowrap !important;
cursor: pointer !important;
outline: none !important;
}
}
/* ── Bike-select dropdown — shared across mobile bar + desktop chip ── */
.lhc-bsd {
display: none;
position: fixed;
left: 10px;
right: 10px;
background: #0a1622;
border-left: 1px solid rgba(255,255,255,0.08);
border-right: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
border-top: 2px solid var(--ac, #ff6600);
border-radius: 0 0 var(--r-md, 14px) var(--r-md, 14px);
box-shadow: 0 12px 40px rgba(0,0,0,0.55);
z-index: 99998;
overflow: hidden;
}
.lhc-bsd.open { display: block; }
/* Desktop: fixed-width box aligned to the chip's left edge */
@media (min-width: 1024px) {
.lhc-bsd {
width: 280px;
right: auto;
}
}
.lhc-bsd-head {
padding: 12px 16px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7a8fa8;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.lhc-bsd-row {
display: flex;
align-items: center;
padding: 11px 16px;
border-left: 3px solid rgba(255,255,255,0.15);
border-bottom: 1px solid rgba(255,255,255,0.05);
cursor: pointer;
transition: background 0.15s;
}
.lhc-bsd-row:last-of-type { border-bottom: none; }
.lhc-bsd-row:hover { background: rgba(255,255,255,0.05); }
/* Active bike — green, matching the site-wide active/logged-in indicator */
.lhc-bsd-row.active { background: rgba(34,197,94,0.10); border-left-color: #22c55e; }
.lhc-bsd-info { flex: 1; min-width: 0; }
.lhc-bsd-name {
font-size: 13px;
font-weight: 700;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lhc-bsd-year {
font-size: 11px;
color: #7a8fa8;
margin-top: 1px;
}
.lhc-bsd-badge {
flex-shrink: 0;
margin-left: 10px;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #22c55e;
background: rgba(34,197,94,0.14);
border: 1px solid rgba(34,197,94,0.45);
padding: 2px 8px;
border-radius: 99px;
}
.lhc-bsd-foot {
display: flex;
align-items: center;
justify-content: center;
padding: 11px 16px;
font-size: 12px;
font-weight: 600;
color: #7a8fa8;
text-decoration: none;
border-top: 1px solid rgba(255,255,255,0.07);
transition: color 0.18s;
}
.lhc-bsd-foot:hover { color: var(--ac, #ff6600); }
/* Bike context bar — slides out from under the header after page load.
translateY moves the bar a full height downward (the actual slide); the
matching clip-path inset masks whatever is still above the slot so the
bar appears to emerge from under the header. Both are layout-neutral
(no max-height) so the header height never changes mid-load and heroes
that measure the header (syncHeroPull) position correctly — no gap. */
@keyframes lhcBarReveal {
from { transform: translateY(-100%); clip-path: inset(100% 0 0 0); }
to { transform: translateY(0); clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
.lhc-bike-ctx.visible { animation: none !important; }
}
/* Guest bike picker inside the dropdown (make / model / year + prompt) */
.lhc-bsd-guest {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 16px;
}
.lhc-bsd-sel {
width: 100%;
background: #11212f;
color: #ffffff;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
outline: none;
cursor: pointer;
}
.lhc-bsd-sel:disabled { opacity: 0.4; cursor: default; }
.lhc-bsd-sel:focus { border-color: var(--ac, #ff6600); }
.lhc-bsd-prompt {
padding: 12px 16px 14px;
font-size: 11.5px;
line-height: 1.55;
color: #7a8fa8;
border-top: 1px solid rgba(255,255,255,0.07);
}
.lhc-bsd-prompt a {
color: var(--ac, #ff6600);
font-weight: 700;
text-decoration: none;
}
.lhc-bsd-prompt a:hover { text-decoration: underline; }
/* ── Controls wrapper — flex container for all four sub-widgets ── */
.lhc-controls {
display: flex;
align-items: center;
gap: 4px;
}
/* Mockup order: WA | divider | Garage | divider | Notif | WL | divider | Cart */
/* DOM order: WA / Notif / WL / Garage / Cart — use flex order to reorder */
.lhc-wa-btn { order: 0; }
.lhc-util-divider { order: 1; } /* sits between WA(0) and Garage(2) */
.lhc-garage-wrap { order: 2; }
.lhc-notif-wrap { order: 3; }
.lhc-wishlist-btn { order: 4; }
.lhc-cart-wrap { order: 5; }
/* ── Vertical divider between controls ── */
.lhc-util-divider {
width: 1px;
height: 30px;
background: var(--border);
flex-shrink: 0;
}
/* ── WhatsApp button ── */
.lhc-wa-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(37,211,102,0.10);
border: 1.5px solid rgba(37,211,102,0.30);
border-radius: var(--r-md, 14px);
padding: 6px 12px 6px 8px;
height: 48px;
text-decoration: none;
color: #25d366;
flex-shrink: 0;
transition: background 0.2s, border-color 0.2s;
}
.lhc-wa-btn:hover { background: rgba(37,211,102,0.18); border-color: rgba(37,211,102,0.55); }
.lhc-wa-icon {
width: 34px;
height: 34px;
background: #25d366;
border-radius: var(--r-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lhc-wa-text {
display: flex;
flex-direction: column;
gap: 1px;
}
.lhc-wa-lbl {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(37,211,102,0.6);
}
.lhc-wa-val {
font-size: 12.5px;
font-weight: 700;
color: #25d366;
display: flex;
align-items: center;
gap: 5px;
}
.lhc-wa-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #25d366;
flex-shrink: 0;
animation: lhc-wa-blink 2s infinite;
}
@keyframes lhc-wa-blink { 0%,100%{opacity:1} 50%{opacity:0.35} }
.lhc-wa-btn:hover .lhc-wa-icon svg {
animation: lhc-wa-buzz 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes lhc-wa-buzz {
0%,100% { transform: rotate(0deg); }
20% { transform: rotate(-8deg); }
40% { transform: rotate(8deg); }
60% { transform: rotate(-5deg); }
80% { transform: rotate(3deg); }
}
.lhc-wa-btn:hover .lhc-wa-dot {
animation: lhc-wa-dot-active 0.4s ease-in-out infinite;
}
@keyframes lhc-wa-dot-active { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.6);opacity:0.5} }
/* ≤1360px: WA + Garage buttons go icon-only */
@media (max-width: 1360px) {
.lhc-wa-btn { padding: 0; width: 48px; height: 48px; justify-content: center; gap: 0; }
.lhc-wa-text { display: none; }
}
/* ── Shared tokens (fallback; overridden by active-bike accent) ── */
:root {
/* --ac is the bike accent — overridden per-bike via inline style.
The fallback (when no bike is selected) is now "light cocoa" —
a brand-neutral warm tone that sits inside the cocoa page palette.
Was: #7a8fa8 (steel blue) — clashed with the warm bg. */
--ac: #A47148;
--ac-dim: rgba(164,113,72,0.12);
--ac-glow: rgba(164,113,72,0.22);
--ac-border: rgba(164,113,72,0.32);
--navy: #0a1622;
--navy-dark: #061020;
--white: #ffffff;
--off-white: #dde4ed;
--muted: #7a8fa8;
--dim: #3d5168;
--border: rgba(255,255,255,0.08);
/* ── Extended palette (UI/UX Pro Max recommendations 2026-05-17) ──
Additive — does not affect any existing styling. Use these for
non-orange-CTA elements where a fixed secondary/accent reads
better than bike-brand colors (informational eyebrows, blog,
reviews, "info" pills, sale/alert markers). */
--secondary: #0891B2; /* teal — informational accent */
--secondary-dim: rgba(8,145,178,0.12);
--secondary-border: rgba(8,145,178,0.30);
--accent: #D97706; /* darker amber — sale/alert */
--accent-dim: rgba(217,119,6,0.12);
--accent-border: rgba(217,119,6,0.30);
--page-cream: #FFF7ED; /* legacy warm page bg (now superseded) */
/* ── Cocoa palette (2026-05-17: replaces the cream direction) ──
Page bg = dark cocoa #6B4423, screen-blended through bg.gif tile.
Three-tier CTA family for use when no bike is selected:
--cocoa-light = primary CTA fallback (also = --ac)
--page-cream = secondary CTA fill
--cocoa-dark = tertiary / quiet CTA (= page bg, recedes) */
--page-bg: #6B4423;
--cocoa-light: #A47148;
--cocoa-dark: #6B4423;
/* CANONICAL radius scale — single source of truth across the site.
Other modules (header-search, ce_product_theme, intelligence/admin)
either reference these directly via var(--r-*) or alias their local
tokens to these values. Do not redefine elsewhere with different
values — change here to update sitewide. (2026-05-17) */
--r-sm: 8px;
--r-md: 14px;
--r-lg: 18px;
--r-xl: 28px;
--r-pill: 999px;
--shadow: 0 8px 40px rgba(0,0,0,0.5);
--shadow-sm: 0 2px 12px rgba(0,0,0,0.35);
}
/* ═══════════════════════════════════════════════════════════════
BIKE-COLOR THEMING — SINGLE SOURCE OF TRUTH (2026-05-17 refactor)
───────────────────────────────────────────────────────────────
All per-bike accent colors live here and ONLY here.
PHP/JS responsibility: set `` from cookie.
Anything inside using var(--ac) automatically themes.
Adding a new bike = add a new rule below. Two lines, no PHP/JS.
The corresponding key in LocoContextHelper / header-controls.js
only needs to exist as a key string — color values are ignored.
═══════════════════════════════════════════════════════════════ */
html.bike-ktm { --ac: #FF6000; --ac-dim: rgba(255,96,0,0.12); --ac-glow: rgba(255,96,0,0.22); --ac-border: rgba(255,96,0,0.22); --lm-orange: #FF6000; }
html.bike-bmw { --ac: #1c69d4; --ac-dim: rgba(28,105,212,0.12); --ac-glow: rgba(28,105,212,0.22); --ac-border: rgba(28,105,212,0.30); --lm-orange: #1c69d4; }
html.bike-yamaha { --ac: #0050a0; --ac-dim: rgba(0,80,160,0.12); --ac-glow: rgba(0,80,160,0.22); --ac-border: rgba(0,80,160,0.30); --lm-orange: #0050a0; }
html.bike-husqvarna { --ac: #e07020; --ac-dim: rgba(224,112,32,0.12); --ac-glow: rgba(224,112,32,0.22); --ac-border: rgba(224,112,32,0.28); --lm-orange: #e07020; }
html.bike-honda { --ac: #CC0000; --ac-dim: rgba(204,0,0,0.12); --ac-glow: rgba(204,0,0,0.22); --ac-border: rgba(204,0,0,0.28); --lm-orange: #CC0000; }
html.bike-kawasaki { --ac: #1a7a2e; --ac-dim: rgba(26,122,46,0.12); --ac-glow: rgba(26,122,46,0.22); --ac-border: rgba(26,122,46,0.28); --lm-orange: #1a7a2e; }
html.bike-triumph { --ac: #c4a44e; --ac-dim: rgba(196,164,78,0.12); --ac-glow: rgba(196,164,78,0.22); --ac-border: rgba(196,164,78,0.28); --lm-orange: #c4a44e; }
html.bike-royal_enfield,
html.bike-royal-enfield { --ac: #8B2020; --ac-dim: rgba(139,32,32,0.12); --ac-glow: rgba(139,32,32,0.22); --ac-border: rgba(139,32,32,0.28); --lm-orange: #8B2020; }
html.bike-suzuki { --ac: #1e6fb5; --ac-dim: rgba(30,111,181,0.12); --ac-glow: rgba(30,111,181,0.22); --ac-border: rgba(30,111,181,0.28); --lm-orange: #1e6fb5; }
html.bike-beta { --ac: #c0392b; --ac-dim: rgba(192,57,43,0.12); --ac-glow: rgba(192,57,43,0.22); --ac-border: rgba(192,57,43,0.28); --lm-orange: #c0392b; }
html.bike-sherco { --ac: #e74c3c; --ac-dim: rgba(231,76,60,0.12); --ac-glow: rgba(231,76,60,0.22); --ac-border: rgba(231,76,60,0.28); --lm-orange: #e74c3c; }
/* Default (no bike) — light cocoa — also set on :root above for fallback */
html.bike-default { --ac: #A47148; --ac-dim: rgba(164,113,72,0.12); --ac-glow: rgba(164,113,72,0.22); --ac-border: rgba(164,113,72,0.32); --lm-orange: #A47148; }
/* ═══════════════════════════════════════════════════════════════
PAGE SCROLLBAR — themed to active bike accent colour (--ac)
Matches mockup header_mockup_v3.html scrollbar spec exactly.
═══════════════════════════════════════════════════════════════ */
/* Firefox */
html {
scrollbar-width: auto;
scrollbar-color: var(--ac) transparent;
/* Reserve scrollbar gutter so content layout stays in the same place
whether the scrollbar is visible or not. Without this, on phones /
browsers that use classic (space-taking) scrollbars the content area
gets ~10px narrower and shifts left, while position:fixed elements
(sticky footer, drawers) stay full-width — making things look
off-centre relative to each other. Has no effect on overlay
scrollbars (most iOS/Android), so safe sitewide. */
scrollbar-gutter: stable;
}
/* Chromium / Safari */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; border-radius: 99px; }
::-webkit-scrollbar-thumb {
background: var(--ac);
border-radius: 99px;
border: 2px solid rgba(10,22,34,0.7);
}
::-webkit-scrollbar-thumb:hover { filter: brightness(1.25); }
/* ═══════════════════════════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════════════════════════ */
/* Bell swings like it's ringing */
@keyframes lhc-bell-ring {
0%,100% { transform: rotate(0deg); }
10% { transform: rotate(18deg); }
25% { transform: rotate(-16deg); }
40% { transform: rotate(12deg); }
55% { transform: rotate(-8deg); }
70% { transform: rotate(4deg); }
85% { transform: rotate(-2deg); }
}
.lhc-notif-btn:hover svg {
animation: lhc-bell-ring 0.65s cubic-bezier(0.36,0.07,0.19,0.97);
transform-origin: 50% 0%;
display: block;
}
/* Heart beats twice */
@keyframes lhc-heartbeat {
0%,100% { transform: scale(1); }
15% { transform: scale(1.35); }
30% { transform: scale(1); }
45% { transform: scale(1.22); }
65% { transform: scale(1); }
}
.lhc-wishlist-btn:hover svg {
animation: lhc-heartbeat 0.7s ease-in-out;
transform-origin: center;
}
/* Cart bounces like something just landed */
@keyframes lhc-cart-land {
0%,100% { transform: translateY(0) rotate(0deg); }
20% { transform: translateY(-5px) rotate(-4deg); }
40% { transform: translateY(2px) rotate(3deg); }
60% { transform: translateY(-2px) rotate(-2deg); }
80% { transform: translateY(1px) rotate(1deg); }
}
.lhc-cart-btn:hover .lhc-cart-icon-wrap svg {
animation: lhc-cart-land 0.5s cubic-bezier(0.36,0.07,0.19,0.97);
transform-origin: center bottom;
}
/* Wrench turns like it's tightening a bolt */
@keyframes lhc-wrench-turn {
0% { transform: rotate(0deg); }
20% { transform: rotate(-28deg); }
45% { transform: rotate(22deg); }
65% { transform: rotate(-14deg); }
80% { transform: rotate(8deg); }
100% { transform: rotate(0deg); }
}
.lhc-garage-btn:hover .lhc-garage-btn-icon svg {
animation: lhc-wrench-turn 0.55s cubic-bezier(0.36,0.07,0.19,0.97);
transform-origin: center;
}
/* Dropdown entrance */
@keyframes lhc-drop-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Badge pop */
@keyframes lhc-badge-pop {
0% { transform: scale(0.5); }
70% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* ═══════════════════════════════════════════════════════════════
NOTIFICATION BELL
═══════════════════════════════════════════════════════════════ */
.lhc-notif-wrap {
position: relative;
display: inline-flex;
}
.lhc-notif-btn {
position: relative;
width: 48px;
height: 48px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1.5px solid var(--border);
border-radius: var(--r-md, 14px);
color: var(--off-white);
cursor: pointer;
font-family: inherit;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.lhc-notif-btn:hover {
color: var(--ac);
border-color: var(--ac-border);
background: var(--ac-dim);
}
.lhc-notif-btn.open {
color: var(--ac);
border-color: var(--ac-border);
background: var(--ac-dim);
}
.lhc-notif-badge {
position: absolute;
top: -8px;
right: -8px;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--ac);
color: #fff;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 1px;
border-radius: var(--r-pill);
border: 2px solid var(--navy);
animation: lhc-badge-pop 0.3s ease;
}
.lhc-notif-badge-hidden { display: none !important; }
/* Notification dropdown */
.lhc-notif-drop {
display: none;
position: fixed;
top: var(--lhc-drop-top, 92px);
right: var(--lhc-drop-right, 24px);
width: 320px;
background: rgba(10,22,34,0.96);
backdrop-filter: blur(22px) saturate(140%);
-webkit-backdrop-filter: blur(22px) saturate(140%);
border: 1px solid var(--ac-border);
border-top: 2px solid var(--ac);
border-radius: 0 0 var(--r-lg) var(--r-lg);
box-shadow: var(--shadow);
z-index: 1050;
overflow: hidden;
color: var(--off-white);
font-family: inherit;
}
.lhc-notif-drop.open {
display: block;
animation: lhc-drop-in 0.2s ease;
}
.lhc-notif-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
}
.lhc-notif-head-title {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--white);
}
.lhc-notif-mark-read {
font-size: 11px;
color: var(--ac);
font-weight: 700;
cursor: pointer;
}
.lhc-notif-mark-read:hover { text-decoration: underline; }
.lhc-notif-item {
display: flex;
gap: 10px;
padding: 11px 14px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.18s ease;
}
.lhc-notif-item:hover { background: rgba(255,255,255,0.04); }
.lhc-notif-item.unread { background: var(--ac-dim); }
.lhc-notif-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ac);
flex-shrink: 0;
margin-top: 5px;
}
.lhc-notif-item:not(.unread) .lhc-notif-dot {
background: transparent;
border: 1.5px solid var(--border);
}
.lhc-notif-text {
font-size: 12px;
color: var(--off-white);
line-height: 1.45;
flex: 1;
}
.lhc-notif-text strong { color: var(--white); font-weight: 700; }
.lhc-notif-time {
font-size: 10.5px;
color: var(--muted);
margin-top: 3px;
}
.lhc-notif-empty {
padding: 20px 14px;
font-size: 12px;
color: var(--muted);
text-align: center;
line-height: 1.5;
}
.lhc-notif-empty a { color: var(--ac); font-weight: 600; }
.lhc-notif-foot {
padding: 10px 14px;
text-align: center;
font-size: 12px;
font-weight: 700;
}
.lhc-notif-foot a { color: var(--ac); text-decoration: none; }
.lhc-notif-foot a:hover { text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════════
WISHLIST BUTTON
═══════════════════════════════════════════════════════════════ */
.lhc-wishlist-btn {
position: relative;
width: 48px;
height: 48px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1.5px solid var(--border);
border-radius: var(--r-md, 14px);
color: var(--off-white) !important;
text-decoration: none !important;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.lhc-wishlist-btn:hover {
color: var(--ac);
border-color: var(--ac-border);
background: var(--ac-dim);
}
.lhc-wl-badge {
position: absolute;
top: -8px;
right: -8px;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--ac);
color: #fff;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 1px;
border-radius: var(--r-pill);
border: 2px solid var(--navy);
animation: lhc-badge-pop 0.3s ease;
}
.lhc-wl-badge-hidden,
.lhc-badge-hidden { display: none !important; }
/* ═══════════════════════════════════════════════════════════════
CART BUTTON
═══════════════════════════════════════════════════════════════ */
.lhc-cart-wrap {
position: relative;
display: inline-flex;
}
.lhc-cart-btn {
display: flex;
align-items: center;
gap: 9px;
background: none;
border: 1.5px solid var(--ac);
border-radius: var(--r-md, 14px);
padding: 6px 12px;
height: 48px;
cursor: pointer;
font-family: inherit;
color: var(--white);
position: relative;
transition: background 0.2s ease;
}
.lhc-cart-btn:hover,
.lhc-cart-wrap.open .lhc-cart-btn { background: var(--ac-dim); }
.lhc-cart-icon-wrap {
position: static;
display: flex;
align-items: center;
justify-content: center;
}
.lhc-cart-badge {
position: absolute;
top: -8px;
left: 23px;
right: auto;
background: var(--ac);
color: #fff;
min-width: 22px;
height: 22px;
padding: 0 6px;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 1px;
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 800;
border: 2px solid var(--navy);
animation: lhc-badge-pop 0.3s ease;
}
.lhc-cart-meta {
display: flex;
flex-direction: column;
gap: 1px;
}
.lhc-cart-lbl {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
}
.lhc-cart-total {
font-size: 13px;
font-weight: 700;
color: var(--white);
}
/* Cart dropdown */
.lhc-cart-drop {
display: none;
position: fixed;
top: var(--lhc-drop-top, 92px);
right: var(--lhc-drop-right, 24px);
width: 360px;
background: rgba(10,22,34,0.92);
backdrop-filter: blur(22px) saturate(140%);
-webkit-backdrop-filter: blur(22px) saturate(140%);
border: 1px solid var(--ac-border);
border-top: 2px solid var(--ac);
border-radius: 0 0 var(--r-lg) var(--r-lg);
box-shadow: var(--shadow);
z-index: 1050;
overflow: hidden;
color: var(--off-white);
font-family: inherit;
}
.lhc-cart-drop.open {
display: block;
animation: lhc-drop-in 0.2s ease;
}
.lhc-cdrop-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 16px;
border-bottom: 1px solid var(--border);
}
.lhc-cdrop-title {
font-size: 13px;
font-weight: 800;
color: var(--white);
}
.lhc-cdrop-count {
font-size: 11px;
color: var(--muted);
margin-left: 6px;
}
.lhc-cdrop-close-btn {
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--muted);
font-size: 14px;
transition: color 0.18s ease, background 0.18s ease;
}
.lhc-cdrop-close-btn:hover { color: var(--white); background: rgba(255,255,255,0.1); }
.lhc-cdrop-items {
max-height: 300px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.lhc-cdrop-items::-webkit-scrollbar { width: 4px; }
.lhc-cdrop-items::-webkit-scrollbar-track { background: transparent; }
.lhc-cdrop-items::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.lhc-cdrop-item {
display: flex;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
transition: background 0.15s ease;
}
.lhc-cdrop-item:hover { background: rgba(255,255,255,0.03); }
.lhc-cdrop-item-img {
width: 58px;
height: 58px;
flex-shrink: 0;
border-radius: var(--r-sm);
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
overflow: hidden;
}
.lhc-cdrop-item-body { flex: 1; min-width: 0; }
.lhc-cdrop-item-brand {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ac);
margin-bottom: 2px;
}
.lhc-cdrop-item-name {
font-size: 12.5px;
font-weight: 700;
line-height: 1.35;
color: var(--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lhc-cdrop-item-fit {
font-size: 10.5px;
color: var(--muted);
margin-top: 2px;
}
.lhc-cdrop-item-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 7px;
}
.lhc-cdrop-item-price {
font-size: 13.5px;
font-weight: 800;
color: var(--white);
}
.lhc-cdrop-qty {
display: flex;
align-items: center;
border: 1px solid var(--border);
border-radius: var(--r-sm);
overflow: hidden;
}
.lhc-cdrop-qty button {
width: 26px;
height: 24px;
background: rgba(255,255,255,0.05);
border: none;
color: var(--white);
font-size: 15px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
transition: background 0.15s ease;
}
.lhc-cdrop-qty button:hover { background: var(--ac); }
.lhc-cdrop-qty span {
width: 28px;
text-align: center;
font-size: 12px;
font-weight: 700;
background: rgba(255,255,255,0.03);
color: var(--white);
padding: 0 2px;
}
.lhc-cdrop-remove {
background: none;
border: none;
cursor: pointer;
color: var(--dim);
padding: 2px 4px;
border-radius: var(--r-sm);
display: flex;
align-items: center;
transition: color 0.15s ease, background 0.15s ease;
}
.lhc-cdrop-remove:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.lhc-cdrop-empty {
padding: 32px 16px;
text-align: center;
}
.lhc-cdrop-empty-icon { font-size: 32px; margin-bottom: 10px; opacity: 0.4; }
.lhc-cdrop-empty p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.lhc-cdrop-foot { padding: 14px 16px; }
.lhc-cdrop-subtotal {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 4px;
}
.lhc-cdrop-subtotal-lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.lhc-cdrop-subtotal-val {
font-size: 20px;
font-weight: 900;
color: var(--white);
}
.lhc-cdrop-actions {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 12px;
}
.lhc-cdrop-checkout {
width: 100%;
background: var(--ac);
color: #fff;
border: none;
border-radius: var(--r-md, 14px);
padding: 12px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
transition: filter 0.15s ease;
}
.lhc-cdrop-checkout:hover { filter: brightness(1.12); }
.lhc-cdrop-viewcart {
width: 100%;
background: transparent;
border: 1.5px solid var(--border);
color: var(--off-white);
border-radius: var(--r-md, 14px);
padding: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
text-align: center;
text-decoration: none;
display: block;
transition: border-color 0.18s ease, color 0.18s ease;
}
.lhc-cdrop-viewcart:hover { border-color: var(--ac); color: var(--ac); }
.lhc-cdrop-secure {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 10.5px;
color: var(--dim);
margin-top: 9px;
}
/* ═══════════════════════════════════════════════════════════════
GARAGE BUTTON
═══════════════════════════════════════════════════════════════ */
.lhc-garage-wrap {
position: relative;
display: inline-flex;
flex-shrink: 0;
}
.lhc-garage-btn {
display: flex;
align-items: center;
gap: 8px;
background: var(--ac-dim);
border: 1.5px solid var(--ac-border);
border-radius: var(--r-md, 14px);
padding: 6px 12px 6px 8px;
cursor: pointer;
transition: background 0.2s ease;
position: relative;
height: 48px;
color: var(--white);
}
.lhc-garage-btn:hover,
.lhc-garage-wrap.open .lhc-garage-btn { background: var(--ac-glow); }
.lhc-garage-btn-icon {
width: 34px;
height: 34px;
background: var(--ac);
border-radius: var(--r-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lhc-garage-btn-text {
display: flex;
flex-direction: column;
gap: 1px;
}
.lhc-gb-label {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--muted);
}
.lhc-gb-value {
font-size: 12.5px;
font-weight: 700;
color: var(--white);
}
.lhc-gb-guest {
color: var(--muted);
font-weight: 500;
}
.lhc-gb-chevron {
opacity: 0.5;
transition: transform 0.2s ease;
margin-left: 2px;
color: var(--off-white);
}
.lhc-garage-wrap.open .lhc-gb-chevron { transform: rotate(180deg); }
/* Compact icon-only at ≤1360px */
@media (max-width: 1360px) {
.lhc-garage-btn {
width: 48px;
padding: 0;
justify-content: center;
gap: 0;
}
.lhc-garage-btn-text,
.lhc-gb-chevron { display: none; }
}
/* ── GARAGE DROPDOWN ─────────────────────────────────── */
.lhc-garage-drop {
display: none;
position: fixed;
top: var(--lhc-drop-top, 92px);
right: var(--lhc-drop-right, 24px);
width: 560px;
background: rgba(10,22,34,0.92);
backdrop-filter: blur(22px) saturate(140%);
-webkit-backdrop-filter: blur(22px) saturate(140%);
border: 1px solid var(--ac-border);
border-top: 2px solid var(--ac);
border-radius: 0 0 var(--r-lg) var(--r-lg);
box-shadow: var(--shadow);
z-index: 1050;
overflow: hidden;
color: var(--off-white);
font-family: inherit;
}
.lhc-garage-drop.open {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"user user"
"bikes links"
"signout signout";
animation: lhc-drop-in 0.2s ease;
}
/* User section */
.lhc-gdrop-user {
grid-area: user;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 10px;
}
.lhc-gdrop-avatar {
width: 38px;
height: 38px;
background: var(--ac);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
color: #fff;
flex-shrink: 0;
}
.lhc-gdrop-name {
font-size: 13.5px;
font-weight: 700;
color: var(--white);
}
.lhc-gdrop-email {
font-size: 11px;
color: var(--muted);
margin-top: 1px;
}
/* Bikes column */
.lhc-gdrop-bikes {
grid-area: bikes;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
}
.lhc-gdrop-bikes-lbl {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.lhc-gdrop-bike-card {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-left: 3px solid var(--bc, var(--ac));
border-radius: var(--r-sm);
padding: 8px 10px;
cursor: pointer;
transition: background 0.15s ease;
position: relative;
margin-bottom: 6px;
}
.lhc-gdrop-bike-card:last-of-type { margin-bottom: 0; }
.lhc-gdrop-bike-card:hover { background: rgba(255,255,255,0.07); }
.lhc-gdrop-bike-card.active { background: var(--ac-dim); border-color: var(--ac); border-left-color: var(--bc, var(--ac)); }
.lhc-bc-info { flex: 1; min-width: 0; }
.lhc-bc-name {
font-size: 12.5px;
font-weight: 700;
color: var(--white);
}
.lhc-bc-year {
font-size: 11px;
color: var(--muted);
}
.lhc-primary-badge {
position: absolute;
top: 6px;
right: 8px;
font-size: 9.5px;
font-weight: 700;
color: var(--ac);
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 2px;
}
.lhc-gdrop-add {
display: flex;
align-items: center;
gap: 7px;
margin-top: 8px;
padding: 6px 4px;
font-size: 12px;
font-weight: 600;
color: var(--muted);
cursor: pointer;
border-radius: var(--r-sm);
transition: color 0.15s ease, background 0.15s ease;
}
.lhc-gdrop-add:hover { color: var(--ac); background: var(--ac-dim); }
/* Quick links column */
.lhc-gdrop-links {
grid-area: links;
padding: 6px 8px;
border-bottom: 1px solid var(--border);
}
#header .lhc-gdrop-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
border-radius: var(--r-sm);
cursor: pointer;
text-decoration: none;
letter-spacing: 0.01em;
transition: color 0.15s ease, background 0.15s ease;
}
#header .lhc-gdrop-link svg { color: rgba(255,255,255,0.45); transition: color 0.15s ease; }
#header .lhc-gdrop-link:hover { color: var(--ac); background: var(--ac-dim); }
#header .lhc-gdrop-link:hover svg { color: var(--ac); }
.lhc-gdrop-link-badge {
margin-left: auto;
background: var(--ac);
color: #fff;
font-size: 9.5px;
font-weight: 700;
padding: 1px 6px;
border-radius: var(--r-pill);
}
#header .lhc-gdrop-link-soon {
opacity: 0.45;
cursor: default;
pointer-events: none;
}
/* Sign-out row */
.lhc-gdrop-signout {
grid-area: signout;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: var(--muted);
cursor: pointer;
transition: color 0.15s ease;
}
.lhc-gdrop-signout:hover { color: #ef4444; }
/* Guest state */
.lhc-gdrop-guest {
grid-column: 1 / -1;
padding: 22px 16px;
text-align: center;
}
.lhc-gdrop-guest-ico { font-size: 28px; margin-bottom: 8px; }
.lhc-gdrop-guest h4 {
font-size: 15px;
font-weight: 800;
margin-bottom: 6px;
color: var(--white);
}
.lhc-gdrop-guest p {
font-size: 12px;
color: var(--muted);
line-height: 1.5;
margin-bottom: 14px;
}
.lhc-gdrop-guest-btns {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Inline sign-in form inside the garage pop-up — hidden until "Sign In"
is tapped, then it replaces the chooser buttons in place. */
.lhc-gdrop-signin { display: none; }
.lhc-gdrop-guest.show-signin .lhc-gdrop-signin { display: block; }
.lhc-gdrop-guest.show-signin .lhc-gdrop-guest-btns,
.lhc-gdrop-guest.show-signin p { display: none; }
.lhc-gdrop-signin .lhc-btn-primary { margin-top: 4px; }
.lhc-gdrop-signin-back {
display: block; width: 100%; margin-top: 8px;
background: none; border: none; cursor: pointer;
font-family: inherit; font-size: 12px; font-weight: 700;
color: var(--ac); outline: none; padding: 4px;
}
.lhc-btn-primary {
display: block;
background: var(--ac);
color: #fff;
border: none;
border-radius: var(--r-md, 14px);
padding: 11px;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
text-align: center;
text-decoration: none;
font-family: inherit;
transition: filter 0.15s ease;
}
.lhc-btn-primary:hover { filter: brightness(1.1); }
.lhc-btn-outline {
display: block;
background: transparent;
border: 1.5px solid var(--border);
color: var(--off-white);
border-radius: var(--r-md, 14px);
padding: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: center;
text-decoration: none;
font-family: inherit;
transition: border-color 0.18s ease, color 0.18s ease;
}
.lhc-btn-outline:hover { border-color: var(--ac); color: var(--ac); }
/* ═══════════════════════════════════════════════════════════════
COMPACT NAV VERSIONS (scrolled state)
═══════════════════════════════════════════════════════════════ */
.lhc-compact-actions {
display: none;
align-items: center;
gap: 8px;
margin-left: auto;
}
.lhc-scrolled .lhc-compact-actions {
display: flex;
animation: lhc-compact-in 0.35s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes lhc-compact-in {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
.lhc-scrolled .ets_mm_megamenu {
border-radius: 0 0 10px 10px;
}
.lhc-compact-btn {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: 1.5px solid var(--border);
border-radius: var(--r-md, 14px);
padding: 5px 7px;
color: var(--off-white);
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
height: 40px;
position: relative;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lhc-compact-btn:hover,
.lhc-compact-btn.open { background: var(--ac-dim); border-color: var(--ac); color: var(--ac); }
.lhc-compact-btn.lhc-cart-compact { border-color: var(--ac-border); color: var(--ac); }
.lhc-compact-btn.lhc-cart-compact:hover { background: var(--ac-dim); }
.lhc-nca-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--off-white);
position: relative;
}
.lhc-nca-icon svg { stroke: var(--off-white); transition: stroke 0.2s ease; }
.lhc-compact-btn:hover .lhc-nca-icon svg { stroke: var(--ac); }
.lhc-cart-compact .lhc-nca-icon svg { stroke: var(--ac); }
.lhc-nca-badge {
position: absolute;
top: -8px;
right: -8px;
background: var(--ac);
color: #fff;
font-size: 11px;
font-weight: 800;
border-radius: var(--r-pill);
padding: 0 6px;
min-width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 1px;
border: 2px solid var(--navy-dark);
}
/* Label text inside compact zone buttons (Garage name, Cart total) */
.lhc-nca-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: inherit;
white-space: nowrap;
}
.lhc-cart-compact .lhc-nca-label {
color: var(--ac);
}
/* ═══════════════════════════════════════════════════════════════
MEGA MENU NAV OVERRIDES — match mockup exactly
═══════════════════════════════════════════════════════════════ */
/* Nav link text — off-white as in mockup.
ets_megamenu permanently adds .hover to ALL nav items at init, so
the .hover selector must NOT be used for colour — it would force
accent colour on every link. Use only the CSS :hover pseudo-class. */
.ets_mm_megamenu .mm_menus_ul .mm_menus_li a.ets_mm_url {
color: var(--off-white) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
transition: color 0.2s ease !important;
}
.ets_mm_megamenu .mm_menus_ul .mm_menus_li a.ets_mm_url:hover {
color: var(--ac) !important;
}
/* RALLY nav item — always accent colour (intentional). */
.ets_mm_megamenu .mm_menus_ul .loco-promo-col a.ets_mm_url {
color: var(--ac) !important;
}
/* ── Bike chip — always-visible active-bike button at nav bar start ── */
.lhc-bike-chip {
display: flex;
align-items: center;
gap: 8px;
background: var(--ac-dim);
border: none;
outline: none;
border-right: 1px solid var(--ac-border);
padding: 0 18px;
color: var(--white);
cursor: pointer;
align-self: stretch;
flex-shrink: 0;
transition: background 0.2s ease;
white-space: nowrap;
text-align: left;
font-family: inherit;
}
.lhc-bike-chip:focus,
.lhc-bike-chip:focus-visible { outline: none; box-shadow: none; }
.lhc-bike-chip:hover,
.lhc-bike-chip.open { background: var(--ac-glow); }
.lhc-bike-chip-guest {
background: rgba(221,228,237,0.07);
border-right-color: rgba(221,228,237,0.12);
}
.lhc-bike-chip-guest:hover { background: rgba(221,228,237,0.13); }
.lhc-bc-chip-icon {
width: 28px;
height: 28px;
background: var(--ac);
border-radius: var(--r-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
}
.lhc-bc-chip-text {
display: flex;
flex-direction: column;
gap: 1px;
}
.lhc-bc-chip-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ac);
line-height: 1;
}
.lhc-bike-chip-guest .lhc-bc-chip-label { color: var(--muted); }
.lhc-bc-chip-value {
font-size: 12.5px;
font-weight: 700;
line-height: 1;
margin-top: 2px;
}
.lhc-bc-chip-chevron {
opacity: 0.5;
flex-shrink: 0;
margin-left: 2px;
transition: transform 0.2s ease;
}
.lhc-bike-chip.open .lhc-bc-chip-chevron { transform: rotate(180deg); }
@media (max-width: 1360px) {
.lhc-bike-chip { padding: 0 12px; }
.lhc-bc-chip-text,
.lhc-bc-chip-chevron { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════ */
/* Tablet: garage + WA buttons go icon-only */
@media (max-width: 1360px) {
.lhc-garage-btn-text { display: none; }
.lhc-gb-chevron { display: none; }
}
/* ════════════════════════════════════════════════════════════
DESKTOP HEADER COLUMN SIZING
Controls column must auto-size to its content (with WA + Garage
full-text the total can be ~580px — wider than Elementor's default
percentage-based column). Search column gets remaining space.
Column element IDs:
bc24acc = logo | 2cf6ce6 = search | 733c714 = controls
════════════════════════════════════════════════════════════ */
.elementor-element-733c714 {
flex: 0 0 auto !important;
width: auto !important;
}
.elementor-element-2cf6ce6 {
flex: 1 1 auto !important;
min-width: 180px !important;
}
/* Compact nav zone + bike chip: desktop only — on mobile the megamenu shows a hamburger */
@media (max-width: 1023px) {
.lhc-compact-actions { display: none !important; }
.lhc-bike-chip { display: none !important; }
}
/* Compact hamburger: mobile only — desktop has full megamenu visible */
@media (min-width: 1024px) {
.lhc-compact-menu-btn { display: none !important; }
}
/* Mobile: cart button shows icon only, no label */
@media (max-width: 1023px) {
.lhc-cart-meta { display: none; }
.lhc-cart-btn {
width: 48px;
padding: 0;
justify-content: center;
gap: 0;
}
/* Notification + wishlist share same compact style as desktop btn */
.lhc-notif-btn,
.lhc-wishlist-btn {
width: 44px;
height: 44px;
}
/* Dropdowns go full-width pinned to viewport on mobile */
.lhc-notif-drop,
.lhc-cart-drop,
.lhc-garage-drop {
left: 0 !important;
right: 0 !important;
width: auto !important;
top: auto !important;
bottom: 0 !important;
border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
max-height: 70dvh;
overflow-y: auto;
z-index: 840 !important;
padding-bottom: 76px !important;
}
/* Garage 2-col → 1-col on mobile */
.lhc-garage-drop.open {
grid-template-columns: 1fr;
grid-template-areas:
"user"
"bikes"
"links"
"signout";
}
.lhc-gdrop-bikes { border-right: none; border-bottom: 1px solid var(--border); }
}
/* Very small: hide cart total text */
@media (max-width: 480px) {
.lhc-cart-total { display: none; }
}
/* ════════════════════════════════════════════════════════════
MOBILE HEADER LAYOUT FIX (≤1023px)
Elementor stacks logo / search / controls as three full-width
rows on mobile. Override to collapse them into one flex row.
Column element IDs (Elementor template):
bc24acc = logo col
2cf6ce6 = search col (loco-header-search widget)
733c714 = controls col (lhc_header_controls widget)
Parent section: elementor-element-4685dcd
════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
/* Section padding — give the header row 8px top/bottom breathing room.
On mobile the nav row is hidden, so this section is the only header
card — give it bottom rounded corners + accent highlight so it reads
as a finished pill, not an abrupt square edge. */
.elementor-element-4685dcd {
padding: 8px 0 14px !important;
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
border-bottom: 2px solid var(--ac, #FF6000) !important;
}
/* Make the elementor container and its row a single horizontal strip */
.elementor-element-4685dcd > .elementor-container,
.elementor-element-4685dcd > .elementor-container > .elementor-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
padding: 0 12px !important;
gap: 4px !important;
width: 100% !important;
}
/* CE sets elementor-col-33 to width:100% at tablet — reset it for our header columns */
.elementor-element-4685dcd .elementor-col-33 {
flex-basis: auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
/* ── Logo column: auto width, shrink to content ── */
.elementor-element-bc24acc {
width: auto !important;
flex: 0 0 auto !important;
padding: 0 !important;
}
/* Logo clip — container shows only the wordmark; tagline is cut from the bottom.
Matches mockup: container h:38px overflow:hidden align-items:flex-start,
image renders at h:48px so wordmark fills the clip area at full quality. */
.elementor-element-bc24acc .elementor-widget-container {
padding: 0 !important;
overflow: hidden !important;
height: 38px !important;
display: flex !important;
align-items: flex-start !important;
}
.elementor-element-bc24acc img {
height: 48px !important;
width: auto !important;
max-width: none !important;
display: block !important;
flex-shrink: 0 !important;
}
/* ── Search column: fixed to icon width, pushed right with auto left margin ── */
.elementor-element-2cf6ce6 {
width: auto !important;
flex: 0 0 auto !important;
min-width: 0 !important;
padding: 0 !important;
margin-left: auto !important;
}
.elementor-element-2cf6ce6 .elementor-widget-container { padding: 0 !important; }
/* Search box: collapse to icon-only 44px (overrides base min-width) */
.elementor-element-2cf6ce6 .lhs-search-box {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
border-radius: var(--r-sm) !important;
justify-content: center !important;
}
.elementor-element-2cf6ce6 .lhs-search-icon { margin-left: 0 !important; }
/* ── Strip all Elementor-generated spacing inside search + controls columns.
CE's align:flex-end column setting adds align-items:flex-end on widget-wrap,
right-aligning the widget inside a wider wrap — we force left-start instead.
All wrapper levels get padding/margin zero to close any phantom gap. ── */
/* CE's inner wrapper is .elementor-column-wrap / .elementor-element-populated
(not .elementor-widget-wrap). CE applies padding:10px there without !important,
so our !important wins regardless of CE's higher specificity. */
.elementor-element-bc24acc .elementor-element-populated,
.elementor-element-2cf6ce6 .elementor-element-populated {
padding: 0 !important;
margin: 0 !important;
}
.elementor-element-733c714 .elementor-element-populated {
padding: 0 !important;
margin: 0 !important;
}
.elementor-element-2cf6ce6 .elementor-element,
.elementor-element-733c714 .elementor-element {
padding: 0 !important;
margin: 0 !important;
width: auto !important;
}
.elementor-element-2cf6ce6 .elementor-widget,
.elementor-element-733c714 .elementor-widget { padding: 0 !important; margin: 0 !important; }
/* ── Controls column: auto width, shrink to buttons ── */
.elementor-element-733c714 {
width: auto !important;
flex: 0 0 auto !important;
min-width: 0 !important;
padding: 0 32px 0 0 !important;
}
/* Elementor's align:flex-end column setting right-aligns content within the column;
override to keep WA button flush left so there's no phantom gap after search. */
.elementor-element-733c714 > .elementor-widget-wrap { align-items: flex-start !important; }
.elementor-element-733c714 .elementor-widget-container { padding: 0 !important; }
/* ── Mobile controls: Logo | Search | WA icon | Cart.
Hide garage, notification bell, wishlist, and divider. ── */
.lhc-garage-wrap { display: none !important; }
.lhc-notif-wrap { display: none !important; }
.lhc-wishlist-btn { display: none !important; }
.lhc-util-divider { display: none !important; }
/* ── WhatsApp: hidden on mobile to save header space ── */
.lhc-wa-btn { display: none !important; }
/* ── Tighten control gap on mobile ── */
.lhc-controls { gap: 4px !important; }
/* ── Cart: hidden on mobile — accessed via hamburger menu ── */
.lhc-cart-btn { display: none !important; }
/* ── Hamburger: pull megamenu toggle into the header row (right side) ── */
/* Use .ets_mm_megamenu prefix to reach (0,2,0) — beats skin's base toggle rules */
.ets_mm_megamenu .ybc-menu-toggle {
position: fixed !important;
top: 18px !important;
right: 18px !important;
z-index: 99999 !important;
width: 44px !important;
height: 44px !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 1.5px solid rgba(255,255,255,0.12) !important;
border-radius: 8px !important;
cursor: pointer !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
/* .ybc-menu-button-toggle_icon is the direct parent of the three .icon-bar elements.
Toggle is flex-row so align-items:center vertically centers this span.
Span is flex-column so gap:5px spaces the bars inside it. */
.ets_mm_megamenu .ybc-menu-toggle .ybc-menu-button-toggle_icon {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
margin: 0 !important;
padding: 0 !important;
}
/* (0,3,0) + !important — beats skin's (0,3,0) margin:0 by source order */
.ets_mm_megamenu .ybc-menu-toggle .icon-bar {
width: 20px !important;
height: 2px !important;
background: #dde4ed !important;
border-radius: 2px !important;
display: block !important;
float: none !important;
position: static !important;
opacity: 1 !important;
transform: none !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
}
/* ════════════════════════════════════════════════════════════
GARAGE DROP — SMF MOBILE BOTTOM-SHEET MODE
Applied when the drop is opened from the mobile sticky footer
(class lhc-gdrop-smf added by smfOpenGarage).
════════════════════════════════════════════════════════════ */
/* Override grid template: remove bikes row */
.lhc-garage-drop.lhc-gdrop-smf.open {
grid-template-columns: 1fr;
grid-template-areas:
"user"
"links"
"signout";
}
/* Hide bikes section entirely */
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-bikes {
display: none !important;
}
/* User row: add separator, more padding */
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-user {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
/* Links section: roomier padding */
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-links {
padding: 8px 12px;
}
/* Links: re-implement without #header prefix (drop is outside #header in body) */
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-link {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 12px;
font-size: 15px;
font-weight: 600;
color: #fff;
border-radius: var(--r-sm);
cursor: pointer;
text-decoration: none;
letter-spacing: 0.01em;
transition: color 0.15s ease, background 0.15s ease;
}
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-link svg {
color: rgba(255,255,255,0.45);
flex-shrink: 0;
transition: color 0.15s ease;
}
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-link:hover,
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-link:active {
color: var(--ac);
background: var(--ac-dim);
}
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-link:hover svg,
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-link:active svg {
color: var(--ac);
}
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-link-badge {
margin-left: auto;
}
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-link-soon {
opacity: 0.45;
cursor: default;
pointer-events: none;
}
/* Sign-out row: more padding */
.lhc-garage-drop.lhc-gdrop-smf .lhc-gdrop-signout {
padding: 14px 20px;
font-size: 13px;
}
/* ─── STICKY NAV OVERLAP FIX ──────────────────────────────────────────
Smooth fade for the ETS nav wrapper while the header controls row is
still in the viewport. JS sets opacity:0 / pointer-events:none until
scrollY clears _headerBottom; this transition makes it silky.
body.lhc-at-top: applied by JS when scrollY < 20 and nav is sticky.
Overrides Elementor's inline position:fixed with !important so the nav
returns to document flow (below the controls row) at the top of the page.
.ets_mm_megamenu.scroll_heading: ETS forces the sticky menu to full
viewport width (position:fixed; left:0; right:0). Override to position
relative so it inherits the wrapper width (matches the header content
width instead of bleeding to the viewport edges).
border-radius: rounded bottom corners on the nav bar in both states. */
@media (min-width: 1024px) {
.elementor-element-37df6d6 {
transition: opacity 0.15s ease;
}
body.lhc-at-top .elementor-element-37df6d6 {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
}
.ets_mm_megamenu.scroll_heading {
position: relative !important;
left: auto !important;
right: auto !important;
width: 100% !important;
}
.ets_mm_megamenu,
.ets_mm_megamenu_content,
.ets_mm_megamenu_content_content,
.ets_mm_megamenu .mm_menus_ul {
border-bottom-left-radius: 12px !important;
border-bottom-right-radius: 12px !important;
}
.ets_mm_megamenu .lhc-bike-chip {
border-bottom-left-radius: 12px;
}
/* Tapered highlight line at top of the header logo row — mirrors the
orange border-bottom + rounded corners on the menu. Same recipe:
1-sided border with same-side radius. Side borders are 0 by default,
so the line naturally tapers to 0 at the curved corners. */
.elementor-element-4685dcd {
border-top: 2px solid rgba(140, 165, 190, 0.45);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
/* While a submenu is open (.lhc-sub-open added by JS on mouseenter of
any mm_has_sub li), flatten the menu bar's rounded bottom corners so
no triangular gap shows between the menu and the submenu. Corners
restore on mouseleave. */
.ets_mm_megamenu.lhc-sub-open,
.ets_mm_megamenu.lhc-sub-open .ets_mm_megamenu_content,
.ets_mm_megamenu.lhc-sub-open .ets_mm_megamenu_content_content,
.ets_mm_megamenu.lhc-sub-open .mm_menus_ul {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.ets_mm_megamenu.lhc-sub-open .lhc-bike-chip {
border-bottom-left-radius: 0 !important;
}
/* Flatten the bike chip's rounded bottom-left while its bike-select
panel is open (JS toggles .lhc-bsd-open on the chip). The parent
menu layers ALSO have border-bottom-left-radius: 12px (set above) —
their rounded corners would still show through next to the chip, so
flatten only the LEFT side of those parents while the chip is open
(right corner stays rounded). */
.ets_mm_megamenu .lhc-bike-chip.lhc-bsd-open {
border-bottom-left-radius: 0 !important;
}
.ets_mm_megamenu:has(.lhc-bike-chip.lhc-bsd-open),
.ets_mm_megamenu:has(.lhc-bike-chip.lhc-bsd-open) .ets_mm_megamenu_content,
.ets_mm_megamenu:has(.lhc-bike-chip.lhc-bsd-open) .ets_mm_megamenu_content_content,
.ets_mm_megamenu:has(.lhc-bike-chip.lhc-bsd-open) .mm_menus_ul {
border-bottom-left-radius: 0 !important;
}
/* The Elementor wrapper around the menu has a box-shadow (0 0 6px rgba(0,0,0,0.3))
but the wrapper itself is square — so the shadow leaks past the menu's rounded
bottom corners. Match the wrapper's bottom-radius to the menu's so the shadow
follows the curve. */
.elementor-element-37df6d6 > .elementor-widget-container {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
/* Remove the orange underline on hovered/active main menu items.
The base rule (locomoto-skin.css) sets border-bottom-color: var(--lm-orange)
on :hover/.active. header-controls.css loads BEFORE locomoto-skin.css,
so equal-specificity + !important loses on cascade order — we bump
specificity by doubling .mm_menus_li so this rule wins. */
.ets_mm_megamenu li.mm_menus_li.mm_menus_li:hover > a.ets_mm_url,
.ets_mm_megamenu li.mm_menus_li.mm_menus_li.active > a.ets_mm_url {
border-bottom-color: transparent !important;
}
/* Compact (sticky) action buttons — bring them inline with normal view:
1) ALL compact-btn icons 22x22 (matches normal),
2) cart badge over the icon (left:23 instead of right:-8) so it sits
at the top-right of the icon like the normal cart,
3) 10px right margin on the cart so the button is the same distance
from the menu's right edge as the normal-view cart. */
.lhc-compact-btn svg {
width: 22px !important;
height: 22px !important;
}
.lhc-cart-compact .lhc-nca-badge {
top: -8px !important;
right: auto !important;
left: 23px !important;
}
.lhc-cart-compact {
margin-right: 10px !important;
}
/* Hover animations on compact buttons — mirror the normal-view icons
(wrench turn / heartbeat / cart-land). Keyframes already defined
above for the normal buttons; we just bind them to the compact
equivalents via title-based selectors. */
.lhc-compact-actions [title*="Garage"]:hover svg {
animation: lhc-wrench-turn 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
transform-origin: center;
}
.lhc-compact-actions [title*="Wishlist"]:hover svg {
animation: lhc-heartbeat 0.7s ease-in-out;
transform-origin: center;
}
.lhc-cart-compact:hover svg {
animation: lhc-cart-land 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
transform-origin: center bottom;
}
}
/* Remove the 10px padding-bottom on the footer column-wrap so the dark
footer (#siteFooter) is flush with the page bottom — no white sliver
between the footer’s bottom edge and the page border. */
#footer .elementor-column-wrap.elementor-element-populated {
padding-bottom: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
AUTH MODAL — Sign In / Create Account
Ported from Header/header_mockup_v3.html (~lines 1976–2021).
All classes prefixed .lhc-auth-* to avoid collision with PS/theme.
═══════════════════════════════════════════════════════════════ */
.lhc-auth-overlay {
display: none;
position: fixed; inset: 0; z-index: 2000;
background: rgba(0,0,0,0.72);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
align-items: center; justify-content: center;
}
.lhc-auth-overlay.open { display: flex; }
.lhc-auth-modal {
background: var(--navy, #0a1622);
border: 1px solid var(--ac-border);
border-top: 3px solid var(--ac);
border-radius: var(--r-lg);
width: 100%; max-width: 420px; margin: 16px;
box-shadow: 0 24px 80px rgba(0,0,0,0.7);
overflow: hidden;
animation: lhcAuthIn 0.22s ease;
color: var(--white);
font-family: 'Inter', system-ui, sans-serif;
}
@keyframes lhcAuthIn {
from { opacity: 0; transform: translateY(-14px) scale(0.97); }
to { opacity: 1; transform: none; }
}
.lhc-auth-tab-row {
display: flex; position: relative;
border-bottom: 1px solid var(--border);
}
.lhc-auth-tab {
flex: 1; padding: 15px; text-align: center;
font-size: 14px; font-weight: 700; color: var(--muted);
background: none; border: none; border-bottom: 2.5px solid transparent;
cursor: pointer; transition: color 0.15s, border-color 0.15s;
font-family: inherit; outline: none;
}
.lhc-auth-tab:focus { outline: none; }
.lhc-auth-tab.active { color: var(--white); border-bottom-color: var(--ac); }
/* Auth modal has no × button — it dismisses on backdrop click and Escape
(the × overlapped the Create Account tab and was off-style). */
.lhc-auth-pane { display: none; padding: 22px; }
.lhc-auth-pane.active { display: block; }
.lhc-auth-welcome { text-align: center; margin-bottom: 20px; }
.lhc-auth-ico { font-size: 26px; margin-bottom: 7px; }
.lhc-auth-welcome h3 { font-size: 17px; font-weight: 800; margin: 0 0 4px; color: var(--white); }
.lhc-auth-welcome p { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.lhc-auth-form-group { margin-bottom: 13px; }
.lhc-auth-form-group label {
display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.lhc-auth-form-group input {
width: 100%; box-sizing: border-box;
background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1);
border-radius: var(--r-sm); padding: 10px 13px;
font-size: 14px; color: var(--white); font-family: inherit;
outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.lhc-auth-form-group input::placeholder { color: var(--dim); }
.lhc-auth-form-group input:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-dim); }
.lhc-auth-submit {
width: 100%; box-sizing: border-box;
background: var(--ac); color: #fff; border: none;
border-radius: var(--r-md, 14px); padding: 12px;
font-size: 14px; font-weight: 700; cursor: pointer;
transition: filter 0.15s; margin-top: 4px;
font-family: inherit; outline: none;
}
.lhc-auth-submit:focus { outline: none; }
.lhc-auth-submit:hover { filter: brightness(1.1); }
.lhc-auth-forgot { text-align: right; margin-top: -7px; margin-bottom: 12px; }
.lhc-auth-forgot a {
font-size: 12px; color: var(--muted); text-decoration: none;
transition: color 0.15s;
}
.lhc-auth-forgot a:hover { color: var(--ac); }
.lhc-auth-divider {
display: flex; align-items: center; gap: 10px;
margin: 14px 0; color: var(--dim); font-size: 12px;
}
.lhc-auth-divider::before,
.lhc-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.lhc-auth-social-btns { display: flex; gap: 8px; }
.lhc-auth-social-btn {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
background: rgba(255,255,255,0.06); border: 1px solid var(--border);
border-radius: var(--r-md, 14px); padding: 9px; font-size: 12.5px; font-weight: 600;
color: var(--off-white); cursor: pointer; transition: background 0.15s;
font-family: inherit; outline: none;
}
.lhc-auth-social-btn:focus { outline: none; }
.lhc-auth-social-btn:hover { background: rgba(255,255,255,0.1); }
.lhc-auth-switch { text-align: center; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.lhc-auth-switch a { color: var(--ac); font-weight: 600; cursor: pointer; text-decoration: none; }
.lhc-auth-perks {
background: var(--ac-dim); border: 1px solid var(--ac-border);
border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 16px;
}
.lhc-auth-perk {
display: flex; align-items: flex-start; gap: 7px;
font-size: 12.5px; color: var(--off-white); margin-bottom: 5px;
}
.lhc-auth-perk:last-child { margin-bottom: 0; }
.lhc-auth-perk-ico { color: var(--ac); font-weight: 800; }
/* ── Very narrow phones (< 400px) — drop the search icon from the header
to free up space for logo + cart + menu toggle. Search remains
reachable via the sticky mini-footer bottom bar. ── */
@media (max-width: 399px) {
.elementor-element-2cf6ce6 { display: none !important; }
}
/* ── Locomoto pill-chip breadcrumb (sitewide) ─────────────────────────
Was originally in ce_product_theme/views/css/product-theme.css when
only the PDP rewrote the breadcrumb. Moved here on 2026-05-26 so the
same pill-chip design applies on bike-parts, homepage, profile and
any other page that renders the default PrestaShop .breadcrumb.
JS counterpart: initBreadcrumb in header-controls.js (sitewide IIFE
listens for lhsBikeChanged and re-renders).
─────────────────────────────────────────────────────────────────── */
/* FOUC guard — the chip breadcrumb is built client-side (_renderBreadcrumb in
header-controls.js adds `.lm-bc-wrap` once done). Until then the raw
PrestaShop `