/* ═══════════════════════════════════════════════════════════════════════════
   PURE FUNCTION — Workshop Industrial unified theme
   Concatenated verbatim from 3 mockup files in pf-design/:
     - mockup.html          (homepage)
     - pf-category-page.html (category/listing)
     - pf-product-page.html  (product detail)
   No overrides. No Sm/MVP patches. If a rule doesn't match the mockup, fix
   the mockup or the template — not this file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────── HOMEPAGE MOCKUP CSS ─────────────────── */
/* ═══════════════════════════════════════
   DESIGN SYSTEM - WORKSHOP INDUSTRIAL
   v2 - Section separation, platform nav,
   SVG icons, video-linked picks, build
   recipes, install consult CTA.
   (c) Next Level HTML
   ═══════════════════════════════════════ */
:root {
  --bg-base: #111113;
  --bg-slab: #1A1A1F;
  --bg-bay: #1E1E24;
  --bg-steel: #1C1C20;
  --bg-panel: #202026;
  --bg-raised: #28282F;
  --edge-light: rgba(255,255,255,0.045);
  --blue: #3B7DFF;
  --blue-raw: #2B6AE6;
  --blue-hot: #5B9AFF;
  --blue-dim: rgba(59, 125, 255, 0.12);
  --blue-glow: rgba(59, 125, 255, 0.25);
  --concrete: #3A3A42;
  --concrete-light: #4A4A55;
  --steel: #8A8A98;
  --steel-light: #8A8A98;
  --chalk: #C8C8D0;
  --white: #EAEAEF;
  --white-hot: #FFFFFF;
  --caution: #E8A820;
  --caution-dim: rgba(232, 168, 32, 0.15);
  --font-stencil: 'Bebas Neue', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Outfit', sans-serif;
  --pad-section: clamp(64px, 9vw, 128px);
  --pad-side: clamp(20px, 5vw, 80px);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { background: var(--bg-base) !important; color: var(--chalk) !important; font-family: var(--font-body) !important; font-weight: 400; line-height: 1.6; overflow-x: hidden; }
::selection { background: var(--blue); color: var(--white-hot); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("../images/noise.svg");
  pointer-events: none; z-index: 9998;
}

.mono { font-family: var(--font-mono); }
.stencil { font-family: var(--font-stencil); }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.vis { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.1s; } .reveal.d2 { transition-delay: 0.2s; } .reveal.d3 { transition-delay: 0.3s; } .reveal.d4 { transition-delay: 0.4s; } .reveal.d5 { transition-delay: 0.5s; }

.zone-slab { position: relative; }
.zone-slab::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 8%, var(--edge-light) 50%, transparent 92%); z-index: 1; pointer-events: none; }
.zone-slab::after { content: ''; position: absolute; inset: 0; background: linear-gradient(172deg, rgba(255,255,255,0.008) 0%, transparent 40%); pointer-events: none; z-index: 0; }
.zone-slab > * { position: relative; z-index: 1; }
.zone-bay { position: relative; }
.zone-bay::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, rgba(59,125,255,0.06) 30%, var(--edge-light) 50%, rgba(59,125,255,0.06) 70%, transparent 95%); z-index: 1; pointer-events: none; }

.topbar { height: 32px; background: #08080A; border-bottom: 2px solid rgba(59,125,255,0.15); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--steel); text-transform: uppercase; gap: 6px; }
.topbar .dot { width: 4px; height: 4px; background: var(--blue); border-radius: 50%; animation: blink 3s ease infinite; }
.topbar .sep { color: rgba(255,255,255,0.08); margin: 0 4px; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.nav { position: sticky; top: 0; z-index: 1000; height: 64px; padding: 0 var(--pad-side); display: flex; align-items: center; justify-content: space-between; background: rgba(17, 17, 19, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--concrete); }
.nav-logo { display: flex; align-items: center; gap: 14px; }
.nav-logo-badge { width: 38px; height: 38px; background: var(--blue); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; font-family: var(--font-stencil); font-size: 20px; color: var(--white-hot); }
.nav-logo-type { font-family: var(--font-stencil); font-size: 22px; letter-spacing: 3px; color: var(--white); }
.nav-logo-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--steel); text-transform: uppercase; margin-top: -2px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel-light); transition: color 0.2s; position: relative; }
.nav-links a:hover { color: var(--white); }
.nav-links a::before { content: '//'; color: var(--concrete); margin-right: 4px; font-weight: 700; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-btn { height: 36px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--concrete); border-radius: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel-light); transition: border-color 0.2s, color 0.2s; }
.nav-btn:hover { border-color: var(--blue); color: var(--white); }
.nav-btn i { font-size: 12px; }

.hero-viewport { min-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.hero { position: relative; flex: 1; display: flex; align-items: center; overflow: hidden; background: url('../images/hero-supra-platinum.png') center center / cover no-repeat; }
.hero { background-image: image-set(url('../images/hero-supra-platinum.avif') type('image/avif'), url('../images/hero-supra-platinum.webp') type('image/webp'), url('../images/hero-supra-platinum.png') type('image/png')); }
@media (max-width: 900px) { .hero { background-image: image-set(url('../images/hero-supra-platinum-mobile.avif') type('image/avif'), url('../images/hero-supra-platinum-mobile.webp') type('image/webp'), url('../images/hero-supra-platinum.png') type('image/png')); } }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,7,0.92) 0%, rgba(5,5,7,0.75) 35%, rgba(5,5,7,0.3) 55%, transparent 75%), linear-gradient(180deg, rgba(5,5,7,0.3) 0%, transparent 30%, transparent 70%, rgba(5,5,7,0.4) 100%); z-index: 1; }
.hero-left { display: flex; flex-direction: column; justify-content: center; padding: 80px var(--pad-side) 60px; position: relative; z-index: 2; max-width: 55%; }
.hero-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--steel-light); margin-bottom: 28px; opacity: 0; animation: fadeIn 0.6s 0.3s forwards; }
.hero-tag::before { content: ''; width: 32px; height: 1px; background: var(--blue); }
@keyframes fadeIn { to { opacity: 1; } }
.hero-title { font-family: var(--font-stencil); font-size: clamp(56px, 8vw, 110px); line-height: 0.95; letter-spacing: 2px; color: var(--white); margin-bottom: 28px; }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .inner { display: block; transform: translateY(110%); animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.hero-title .line:nth-child(2) .inner { animation-delay: 0.12s; }
.hero-title .line:nth-child(3) .inner { animation-delay: 0.24s; }
@keyframes rise { to { transform: translateY(0); } }
.hero-title .blue { color: var(--blue); }
.hero-annotation { font-family: var(--font-mono); font-size: 12px; color: var(--steel); letter-spacing: 0.5px; line-height: 1.8; max-width: 460px; margin-bottom: 40px; opacity: 0; animation: fadeIn 0.6s 0.6s forwards; }
.hero-annotation strong { color: var(--chalk); font-weight: 600; }
/* Entrance is a transform-only rise (NOT an opacity fade). Fading opacity made
   the solid-blue SHOP PARTS button translucent over the dark hero mid-animation,
   so it read as low-contrast "blue on blue" with grayed text on every load. */
.hero-ctas { display: flex; gap: 12px; transform: translateY(14px); animation: rise 0.6s 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.btn-shop { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--blue); color: var(--white-hot); font-family: var(--font-stencil); font-size: 16px; letter-spacing: 3px; border-radius: 2px; transition: background 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; }
.btn-shop:hover { background: var(--blue-hot); box-shadow: 0 0 40px rgba(59, 125, 255, 0.2); }
.btn-shop i { font-size: 13px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: 1px solid var(--concrete); color: var(--chalk); font-family: var(--font-stencil); font-size: 16px; letter-spacing: 3px; border-radius: 2px; transition: border-color 0.2s, color 0.2s; position: relative; overflow: hidden; }
.btn-ghost:hover { border-color: var(--steel-light); color: var(--white); }
.btn-ghost i { font-size: 13px; }
.btn-scan-line { position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.25), rgba(255,255,255,0.6), rgba(255,255,255,0.25), transparent); }
.hero-right, .hero-image-box, .hero-image-label { display: none; }

.fitment-bar { background: var(--blue); border-top: none; border-bottom: none; padding: 24px var(--pad-side); position: relative; z-index: 10; }
.fitment-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.12); z-index: 2; }
.fitment-bar::after { content: ''; position: absolute; top: -2px; left: 50%; width: 0; height: 3px; transform: translateX(-50%); border-radius: 1px; background: radial-gradient(ellipse at center, #fff 0%, rgba(91,154,255,0.7) 50%, transparent 100%); z-index: 4; opacity: 0; pointer-events: none; }
.fitment-bar.charged::after { animation: arcFlash 0.3s ease-out forwards; }
@keyframes arcFlash { 0% { width: 0; opacity: 1; box-shadow: 0 0 12px 3px rgba(91,154,255,0.7), 0 0 4px 1px rgba(255,255,255,0.5); } 15% { width: 50px; opacity: 1; box-shadow: 0 0 8px 2px rgba(91,154,255,0.4), 0 0 2px rgba(255,255,255,0.3); } 100% { width: 8px; opacity: 0; box-shadow: none; } }
.fitment-spark { position: absolute; top: -1px; z-index: 5; pointer-events: none; border-radius: 50%; will-change: transform, opacity; }
.fitment-split-scan { position: absolute; top: -2px; bottom: -2px; width: 2px; pointer-events: none; z-index: 4; background: linear-gradient(180deg, transparent 2%, rgba(59,125,255,0.25) 18%, rgba(100,160,255,0.35) 40%, rgba(120,175,255,0.4) 50%, rgba(100,160,255,0.35) 60%, rgba(59,125,255,0.25) 82%, transparent 98%); box-shadow: 0 0 8px rgba(59,125,255,0.15); will-change: transform, opacity; }
.fitment-bar-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.fitment-bar-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.85); white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; }
.fitment-bar-label i { color: var(--white-hot); }
.fitment-bar-fields { display: flex; align-items: center; gap: 8px; flex: 1; }
.fitment-field { flex: 1; }
.fitment-field select { width: 100%; height: 44px; padding: 0 32px 0 14px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.18); border-radius: 2px; color: var(--white); font-family: var(--font-mono); font-size: 12px; outline: none; appearance: none; cursor: pointer; transition: border-color 0.2s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.fitment-field select:focus { border-color: var(--white-hot); background: rgba(0,0,0,0.5); }
.fitment-field select:disabled { opacity: 0.4; cursor: not-allowed; }
.fitment-go { height: 44px; padding: 0 32px; background: var(--bg-base); color: var(--white-hot); font-family: var(--font-stencil); font-size: 15px; letter-spacing: 3px; border-radius: 2px; transition: background 0.2s, box-shadow 0.2s; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; }
.fitment-go:hover { background: var(--bg-raised); box-shadow: 0 0 20px rgba(0,0,0,0.3); }

.hero-scanline { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--blue-hot), transparent); opacity: 0.5; z-index: 20; animation: scanline 5s linear infinite; pointer-events: none; }
@keyframes scanline { 0% { top: 0; opacity: 0; } 5% { opacity: 0.5; } 95% { opacity: 0.5; } 100% { top: 100%; opacity: 0; } }
.hero-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(59, 125, 255, 0.015) 3px, rgba(59, 125, 255, 0.015) 4px); pointer-events: none; z-index: 2; }

@keyframes electricPulse { 0%, 100% { box-shadow: 0 0 4px var(--blue), 0 0 8px rgba(59,125,255,0.2), inset 0 0 4px rgba(59,125,255,0.05); } 50% { box-shadow: 0 0 8px var(--blue-hot), 0 0 20px rgba(59,125,255,0.3), inset 0 0 8px rgba(59,125,255,0.08); } }
.plat:hover, .prod:hover, .cat:hover { border-color: var(--blue); animation: electricPulse 1.2s ease-in-out infinite; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.section-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--steel); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.section-tag::before { content: ''; width: 12px; height: 1px; background: var(--blue); }
.section-title { font-family: var(--font-stencil); font-size: clamp(28px, 3.5vw, 44px); letter-spacing: 2px; color: var(--white); line-height: 1; }
.section-title .blue { color: var(--blue); }
.section-more { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--steel); display: flex; align-items: center; gap: 8px; transition: color 0.2s; flex-shrink: 0; }
.section-more:hover { color: var(--blue); }
.section-sub { font-family: var(--font-mono); font-size: 11px; color: var(--steel); letter-spacing: 0.5px; margin-top: 8px; }

.platforms { padding: var(--pad-section) var(--pad-side); background: var(--bg-base); }
.plat-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 3px; }
.plat { position: relative; overflow: hidden; cursor: pointer; background: var(--bg-steel); border: 1px solid rgba(255,255,255,0.03); transition: border-color 0.3s, box-shadow 0.3s; }
.plat.hero-plat { grid-row: 1 / 3; border-left: 3px solid var(--blue); }
.plat-inner { position: absolute; inset: 0; background: linear-gradient(160deg, var(--bg-slab) 0%, var(--bg-steel) 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,0.05); text-transform: uppercase; transition: transform 0.5s ease; }
.plat:hover .plat-inner { transform: scale(1.04); }
.plat-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(17,17,19,0.92) 100%); z-index: 1; }
.plat-id { position: absolute; top: 16px; left: 16px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; color: var(--steel); text-transform: uppercase; z-index: 2; opacity: 0.5; }
.plat-info { position: absolute; bottom: 28px; left: 0; right: 0; padding: 0 20px; z-index: 2; }
.plat-name { font-family: var(--font-stencil); font-size: 26px; letter-spacing: 2px; color: var(--white); margin-bottom: 2px; }
.plat.hero-plat .plat-name { font-size: 38px; }
.plat-spec { font-family: var(--font-mono); font-size: 10px; color: var(--steel); letter-spacing: 0.5px; }
.plat-shop-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 28px; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--steel-light); z-index: 4; transition: all 0.3s ease; }
.plat-shop-bar .arrow { margin-left: 6px; transition: transform 0.2s; }
.plat:hover .plat-shop-bar { height: 36px; background: var(--blue); color: var(--white-hot); }
.plat:hover .plat-shop-bar .arrow { transform: translateX(3px); }

/* 2026-06-08 r2: platform tile picture element backdrop (replaces inline background-image:url PNG) */
.plat .plat-bg { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; margin: 0; padding: 0; }
.plat .plat-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
.plat.hero-plat .plat-bg img { object-position: center 45%; }

.categories { padding: var(--pad-section) var(--pad-side); background: var(--bg-slab); border-bottom: 1px solid rgba(255,255,255,0.03); position: relative; }
.cat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.cat { background: var(--bg-base); border: 1px solid rgba(255,255,255,0.03); padding: 28px 20px; position: relative; cursor: pointer; overflow: hidden; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.cat:hover { background: var(--bg-steel); }
.cat-num { font-family: var(--font-stencil); font-size: 60px; color: rgba(255,255,255,0.025); line-height: 1; position: absolute; top: 8px; right: 12px; transition: color 0.3s; }
.cat:hover .cat-num { color: var(--blue-dim); }
.cat-icon { width: 40px; height: 40px; border: 1px solid var(--concrete); border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--blue); transition: border-color 0.2s, background 0.2s; }
.cat:hover .cat-icon { border-color: var(--blue); background: var(--blue-dim); }
.cat-icon svg { width: 22px; height: 22px; }
.cat-name { font-family: var(--font-stencil); font-size: 18px; letter-spacing: 1px; color: var(--white); margin-bottom: 4px; }
.cat-count { font-family: var(--font-mono); font-size: 10px; color: var(--steel); letter-spacing: 1px; }

.picks { padding: var(--pad-section) var(--pad-side); background: var(--bg-base); }
.picks-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--blue-dim); border: 1px solid rgba(59, 125, 255, 0.2); border-radius: 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--blue-hot); margin-bottom: 16px; }
.picks-tabs { display: flex; gap: 0; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.picks-tab { padding: 10px 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--steel); cursor: pointer; position: relative; transition: color 0.2s; border: none; background: none; }
.picks-tab:hover { color: var(--steel-light); }
.picks-tab.active { color: var(--white); }
.picks-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--blue); }
.picks-tab-icon { margin-right: 6px; font-size: 9px; }
.picks-panel { display: none; }
.picks-panel.active { display: block; }
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.prod { background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.03); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; position: relative; }
.prod-img { height: 200px; background: var(--bg-steel); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,0.05); letter-spacing: 2px; text-transform: uppercase; position: relative; overflow: hidden; }
.prod-badge { position: absolute; top: 10px; left: 10px; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 1.5px; padding: 3px 9px; z-index: 2; }
.prod-badge.staff { color: var(--white-hot); background: var(--blue); }
.prod-badge.new { color: var(--bg-base); background: var(--caution); }
.prod-badge.best { color: var(--white-hot); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15); }
.prod-img::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--blue); opacity: 0; top: 0; transition: none; }
.prod:hover .prod-img::after { opacity: 0.5; animation: scanProd 1.5s linear infinite; }
@keyframes scanProd { from { top: 0; } to { top: 100%; } }
.prod-body { padding: 16px 18px 20px; }
.prod-brand { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.prod-name { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--white); line-height: 1.4; margin-bottom: 12px; min-height: 36px; }
.prod-footer { display: flex; align-items: center; justify-content: space-between; }
.prod-price { font-family: var(--font-stencil); font-size: 22px; color: var(--white); }
.prod-add { width: 32px; height: 32px; background: var(--blue); border-radius: 2px; display: flex; align-items: center; justify-content: center; color: var(--white-hot); font-size: 16px; transition: background 0.2s; }
.prod-add:hover { background: var(--blue-hot); }

.diff { padding: var(--pad-section) var(--pad-side); background: var(--bg-slab); border-bottom: 1px solid rgba(255,255,255,0.03); position: relative; }
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.diff-card { background: var(--bg-base); padding: 36px 28px; position: relative; border-left: 3px solid var(--blue); }
.diff-card::before { content: attr(data-num); font-family: var(--font-stencil); font-size: 80px; color: rgba(255,255,255,0.015); position: absolute; top: 12px; right: 16px; line-height: 1; }
.diff-label { font-family: var(--font-stencil); font-size: 22px; letter-spacing: 1px; color: var(--white); margin-bottom: 12px; }
.diff-text { font-family: var(--font-body); font-size: 13px; line-height: 1.75; color: var(--steel-light); }

.garage { padding: var(--pad-section) var(--pad-side); background: var(--bg-base); }
.garage-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.04); margin-bottom: 3px; overflow: hidden; }
.garage-vid-side { padding: 28px; display: flex; flex-direction: column; gap: 16px; border-right: 1px solid rgba(255,255,255,0.04); }
.garage-embed { aspect-ratio: 16/9; background: var(--bg-steel); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.04); }
.garage-embed-play { width: 60px; height: 60px; background: rgba(17,17,19,0.8); border: 2px solid var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s; cursor: pointer; z-index: 2; }
.garage-embed:hover .garage-embed-play { background: var(--blue); transform: scale(1.08); }
.garage-embed-play i { font-size: 18px; color: var(--white-hot); margin-left: 3px; }
.garage-embed-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 14px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel-light); display: flex; justify-content: space-between; align-items: center; }
.garage-vid-meta { display: flex; flex-direction: column; gap: 6px; }
.garage-vid-title { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--white); line-height: 1.35; }
.garage-vid-stats { font-family: var(--font-mono); font-size: 10px; color: var(--steel); letter-spacing: 0.5px; }
.garage-vid-link { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--blue); text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s; cursor: pointer; margin-top: auto; }
.garage-vid-link:hover { color: var(--blue-hot); }
.garage-parts-side { padding: 28px; display: flex; flex-direction: column; }
.garage-parts-header { font-family: var(--font-stencil); font-size: 15px; letter-spacing: 2px; color: var(--blue); padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 4px; }
.garage-parts-list { display: flex; flex-direction: column; flex: 1; }
.garage-part { display: grid; grid-template-columns: 24px 52px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.garage-part:last-child { border-bottom: none; }
.garage-part-num { font-family: var(--font-stencil); font-size: 14px; color: rgba(255,255,255,0.08); }
.garage-part-img { width: 52px; height: 44px; background: var(--bg-steel); border: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 7px; color: rgba(255,255,255,0.06); text-transform: uppercase; }
.garage-part-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.garage-part-name { font-family: var(--font-stencil); font-size: 15px; letter-spacing: 0.5px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.garage-part-brand { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel); }
.garage-part-price { font-family: var(--font-stencil); font-size: 20px; color: var(--blue); white-space: nowrap; }
.garage-part-add { height: 30px; padding: 0 14px; border: 1px solid var(--concrete); border-radius: 2px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel-light); display: flex; align-items: center; gap: 4px; transition: all 0.2s; white-space: nowrap; }
.garage-part-add:hover { border-color: var(--blue); color: var(--white); background: var(--blue-dim); }
.garage-selector-wrap { position: relative; }
.garage-selector { display: flex; gap: 3px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.garage-selector::-webkit-scrollbar { display: none; }
.garage-sel { min-width: 300px; flex-shrink: 0; background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.03); cursor: pointer; padding: 14px 16px; display: flex; gap: 14px; align-items: center; transition: border-color 0.2s, background 0.2s; position: relative; }
.garage-sel:hover { background: var(--bg-steel); border-color: rgba(255,255,255,0.06); }
.garage-sel.active { border-color: var(--blue); background: var(--bg-steel); }
.garage-sel.active::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--blue); }
.garage-slider-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 36px; height: 36px; background: rgba(17,17,19,0.9); border: 1px solid var(--concrete); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--steel-light); font-size: 14px; transition: border-color 0.2s, color 0.2s, background 0.2s; backdrop-filter: blur(4px); }
.garage-slider-btn:hover { border-color: var(--blue); color: var(--white); background: rgba(17,17,19,0.95); }
.garage-slider-btn.prev { left: -18px; }
.garage-slider-btn.next { right: -18px; }
.garage-slider-btn.hidden { opacity: 0; pointer-events: none; }
.garage-sel-play { width: 36px; height: 36px; background: rgba(17,17,19,0.6); border: 1.5px solid var(--concrete); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s; }
.garage-sel.active .garage-sel-play { border-color: var(--blue); }
.garage-sel-play i { font-size: 10px; color: var(--steel-light); margin-left: 1px; }
.garage-sel.active .garage-sel-play i { color: var(--blue); }
.garage-sel-info { min-width: 0; }
.garage-sel-title { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--white); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.garage-sel-meta { font-family: var(--font-mono); font-size: 9px; color: var(--steel); letter-spacing: 0.5px; margin-top: 2px; }

.garage-install { margin-top: 3px; padding: 16px 24px; display: flex; align-items: center; gap: 14px; background: rgba(59,125,255,0.04); border: 1px solid rgba(59,125,255,0.1); position: relative; overflow: hidden; }
.garage-install-scan { position: absolute; top: 0; bottom: 0; width: 2px; left: -2%; background: linear-gradient(180deg, transparent, rgba(59,125,255,0.4), rgba(255,255,255,0.7), rgba(59,125,255,0.4), transparent); box-shadow: 0 0 8px rgba(59,125,255,0.3); pointer-events: none; opacity: 0; }
.garage-install.vis .garage-install-scan { animation: installScan 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards; }
@keyframes installScan { 0% { left: -2%; opacity: 0.8; } 45% { left: 102%; opacity: 0.5; } 50% { left: 102%; opacity: 0.3; } 95% { left: -2%; opacity: 0.5; } 100% { left: -2%; opacity: 0; } }
.garage-install-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--blue); opacity: 0.7; }
.garage-install-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3px; color: var(--steel-light); flex: 1; line-height: 1.5; }
.garage-install-text span { color: var(--white); font-weight: 500; }
.garage-install-btn { font-family: var(--font-stencil); font-size: 11px; letter-spacing: 2.5px; color: var(--white-hot); background: var(--blue); padding: 10px 20px; cursor: pointer; position: relative; overflow: hidden; transition: background 0.3s; flex-shrink: 0; border: none; }
.garage-install-btn:hover { background: var(--blue-hot); }

.recipes { padding: var(--pad-section) var(--pad-side); background: var(--bg-bay); position: relative; }
.recipe-stack { display: flex; flex-direction: column; gap: 12px; }
.recipe { display: grid; grid-template-columns: 1fr 1.2fr; background: var(--bg-steel); border-left: 3px solid var(--blue); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.04); border-left: 3px solid var(--blue); }
.recipe::before { content: attr(data-num); font-family: var(--font-stencil); font-size: 120px; color: rgba(255,255,255,0.012); position: absolute; top: -10px; right: 20px; line-height: 1; pointer-events: none; }
.recipe-summary { padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; }
.recipe-wo { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; color: var(--steel); text-transform: uppercase; opacity: 0.6; }
.recipe-title { font-family: var(--font-stencil); font-size: 26px; letter-spacing: 1px; color: var(--white); line-height: 1.1; }
.recipe-context { font-family: var(--font-mono); font-size: 10px; color: var(--steel); letter-spacing: 0.5px; }
.recipe-desc { font-family: var(--font-body); font-size: 13px; color: var(--steel-light); line-height: 1.6; }
.recipe-video { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--blue); text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; cursor: pointer; }
.recipe-video:hover { color: var(--blue-hot); }
.recipe-bottom { display: flex; align-items: center; gap: 20px; margin-top: auto; padding-top: 8px; }
.recipe-total { font-family: var(--font-stencil); font-size: 30px; color: var(--white); }
.recipe-atc { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; min-height: 44px; box-sizing: border-box; background: transparent !important; color: var(--blue) !important; border: 1px solid var(--blue) !important; font-family: var(--font-stencil); font-size: 13px; letter-spacing: 2px; border-radius: 2px; transition: background 0.2s, color 0.2s, border-color 0.2s; position: relative; overflow: hidden; }
.recipe-atc:hover { background: var(--blue) !important; color: var(--white-hot) !important; border-color: var(--blue) !important; }
.recipe-manifest { padding: 28px 24px; border-left: 1px solid rgba(255,255,255,0.04); font-family: var(--font-mono); font-size: 12px; }
.manifest-header { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--steel); padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 6px; }
.manifest-line { display: flex; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--chalk); gap: 10px; }
.manifest-line:last-child { border-bottom: none; }
.manifest-dot { width: 5px; height: 5px; background: var(--blue); border-radius: 50%; flex-shrink: 0; }
.manifest-part { flex: 1; font-size: 11px; letter-spacing: 0.3px; }
.manifest-price { font-size: 11px; color: var(--steel-light); text-align: right; flex-shrink: 0; }
.manifest-total-line { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; margin-top: 4px; border-top: 2px solid rgba(255,255,255,0.06); font-weight: 700; color: var(--white); font-size: 12px; }

.brands { padding: var(--pad-section) var(--pad-side); background: var(--bg-base); border-top: 1px solid rgba(255,255,255,0.03); }
.brand-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.brand-tile { min-height: 64px; padding: 0 16px; background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15; font-family: var(--font-stencil); font-size: clamp(12px, 1.1vw, 15px); letter-spacing: 2px; color: var(--steel); transition: color 0.2s, border-color 0.2s; cursor: pointer; }
.brand-tile:hover { color: var(--white); border-color: var(--blue); }

.cta-end { padding: 80px var(--pad-side); background: var(--bg-slab); text-align: center; position: relative; border-top: 1px solid rgba(255,255,255,0.03); }
.cta-end-title { font-family: var(--font-stencil); font-size: clamp(36px, 5vw, 60px); letter-spacing: 2px; color: var(--white); margin-bottom: 12px; }
.cta-end-title .blue { color: var(--blue); }
.cta-end-sub { font-family: var(--font-mono); font-size: 12px; color: var(--steel); letter-spacing: 1px; margin-bottom: 32px; }
.cta-end-btns { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; }
.socials { display: flex; justify-content: center; gap: 3px; }
.soc { width: 48px; height: 48px; background: var(--bg-base); border: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--steel); transition: border-color 0.2s, color 0.2s; }
.soc:hover { border-color: var(--blue); color: var(--white); }
.consult-block { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--concrete); max-width: 460px; margin-left: auto; margin-right: auto; }
.consult-tag { font-family: var(--font-mono); font-size: 11px; color: var(--steel-light); letter-spacing: 0.5px; margin-bottom: 8px; }
.consult-desc { font-family: var(--font-body); font-size: 12px; color: var(--steel); margin-bottom: 16px; line-height: 1.5; }

.consult-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.85); backdrop-filter: blur(12px); opacity: 0; transition: opacity 0.4s ease; }
.consult-overlay.active { display: flex; opacity: 1; }
.consult-overlay.closing { opacity: 0; }
.consult-modal { position: relative; width: 640px; max-width: 94vw; max-height: 90vh; overflow-y: auto; background: linear-gradient(170deg, #0a0e18 0%, #0d1117 50%, #0a0c12 100%); border: 1px solid rgba(59,125,255,0.2); box-shadow: 0 0 80px rgba(59,125,255,0.08), 0 0 1px rgba(59,125,255,0.4), inset 0 1px 0 rgba(59,125,255,0.1); padding: 0; overflow: hidden; }
.consult-modal::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(59,125,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(59,125,255,0.03) 1px, transparent 1px), linear-gradient(rgba(59,125,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(59,125,255,0.015) 1px, transparent 1px); background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px; }
.consult-corner { position: absolute; width: 24px; height: 24px; z-index: 2; }
.consult-corner::before, .consult-corner::after { content: ''; position: absolute; background: var(--blue); }
.consult-corner.tl { top: -1px; left: -1px; }
.consult-corner.tl::before { top: 0; left: 0; width: 24px; height: 2px; box-shadow: 0 0 8px rgba(59,125,255,0.8), 0 0 20px rgba(59,125,255,0.3); }
.consult-corner.tl::after { top: 0; left: 0; width: 2px; height: 24px; box-shadow: 0 0 8px rgba(59,125,255,0.8), 0 0 20px rgba(59,125,255,0.3); }
.consult-corner.tr { top: -1px; right: -1px; }
.consult-corner.tr::before { top: 0; right: 0; width: 24px; height: 2px; box-shadow: 0 0 8px rgba(59,125,255,0.8); }
.consult-corner.tr::after { top: 0; right: 0; width: 2px; height: 24px; box-shadow: 0 0 8px rgba(59,125,255,0.8); }
.consult-corner.bl { bottom: -1px; left: -1px; }
.consult-corner.bl::before { bottom: 0; left: 0; width: 24px; height: 2px; box-shadow: 0 0 8px rgba(59,125,255,0.8); }
.consult-corner.bl::after { bottom: 0; left: 0; width: 2px; height: 24px; box-shadow: 0 0 8px rgba(59,125,255,0.8); }
.consult-corner.br { bottom: -1px; right: -1px; }
.consult-corner.br::before { bottom: 0; right: 0; width: 24px; height: 2px; box-shadow: 0 0 8px rgba(59,125,255,0.8); }
.consult-corner.br::after { bottom: 0; right: 0; width: 2px; height: 24px; box-shadow: 0 0 8px rgba(59,125,255,0.8); }
.consult-corner .spark { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px var(--blue); animation: cornerSpark 2s ease-in-out infinite; }
.consult-corner.tl .spark { top: 0; left: 0; }
.consult-corner.tr .spark { top: 0; right: 0; }
.consult-corner.bl .spark { bottom: 0; left: 0; }
.consult-corner.br .spark { bottom: 0; right: 0; }
.consult-corner .spark:nth-child(3) { animation-delay: 0.6s; }
.consult-corner .spark:nth-child(4) { animation-delay: 1.2s; }
@keyframes cornerSpark { 0%, 100% { opacity: 0; transform: translate(0,0); } 10% { opacity: 1; } 50% { opacity: 0; transform: translate(var(--sx, 8px), var(--sy, -8px)); } }
.consult-scanline { position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, rgba(59,125,255,0.4), transparent); box-shadow: 0 0 12px rgba(59,125,255,0.3); animation: modalScan 4s ease-in-out infinite; }
@keyframes modalScan { 0% { top: 0; opacity: 0.6; } 50% { top: 100%; opacity: 0.2; } 100% { top: 0; opacity: 0.6; } }
.consult-header { position: relative; z-index: 1; padding: 32px 36px 20px; border-bottom: 1px solid rgba(59,125,255,0.08); }
.consult-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: rgba(59,125,255,0.7); text-transform: uppercase; margin-bottom: 12px; }
.consult-status .pulse { width: 6px; height: 6px; background: var(--blue); border-radius: 50%; animation: blink 2s ease infinite; box-shadow: 0 0 6px var(--blue); }
.consult-h { font-family: var(--font-stencil); font-size: 32px; letter-spacing: 2px; color: var(--white); line-height: 1.1; }
.consult-h .blue { color: var(--blue); text-shadow: 0 0 20px rgba(59,125,255,0.3); }
.consult-sub { font-family: var(--font-mono); font-size: 10px; color: var(--steel); letter-spacing: 0.5px; margin-top: 8px; }
.consult-close { position: absolute; top: 20px; right: 20px; z-index: 3; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.4); color: var(--steel); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.consult-close:hover { border-color: var(--blue); color: var(--white); }
.consult-body { position: relative; z-index: 1; padding: 24px 36px 32px; }
.consult-field { margin-bottom: 20px; }
.consult-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--steel); margin-bottom: 6px; display: block; }
.consult-label::before { content: '// '; color: rgba(59,125,255,0.4); }
.consult-input, .consult-textarea, .consult-select { width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); color: var(--white); font-family: var(--font-body); font-size: 14px; transition: border-color 0.3s, box-shadow 0.3s; outline: none; }
.consult-input:focus, .consult-textarea:focus, .consult-select:focus { border-color: rgba(59,125,255,0.4); box-shadow: 0 0 0 1px rgba(59,125,255,0.1), inset 0 0 20px rgba(59,125,255,0.03); }
.consult-input::placeholder, .consult-textarea::placeholder { color: rgba(255,255,255,0.15); }
.consult-textarea { min-height: 80px; resize: vertical; }
.consult-select { appearance: none; cursor: pointer; }
.consult-select option { background: #0d1117; color: var(--white); }
.consult-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consult-dims { display: flex; align-items: center; gap: 8px; margin: 20px 0 16px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.5px; color: rgba(59,125,255,0.3); }
.consult-dims::before, .consult-dims::after { content: ''; flex: 1; height: 1px; background: rgba(59,125,255,0.08); }
.consult-submit { width: 100%; padding: 14px; background: var(--blue); color: var(--white-hot); font-family: var(--font-stencil); font-size: 15px; letter-spacing: 3px; border: none; cursor: pointer; position: relative; overflow: hidden; transition: background 0.2s; margin-top: 8px; }
.consult-submit:hover { background: var(--blue-hot); }
.consult-submit::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transform: translateX(-100%); transition: none; }
.consult-submit:hover::before { animation: submitGlide 0.6s ease; }
@keyframes submitGlide { to { transform: translateX(100%); } }
.consult-footer-note { text-align: center; margin-top: 16px; font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,0.15); letter-spacing: 0.5px; }
@media (max-width: 600px) { .consult-row { grid-template-columns: 1fr; } .consult-header { padding: 24px 20px 16px; } .consult-body { padding: 20px 20px 28px; } .consult-h { font-size: 26px; } }

.footer { padding: 48px var(--pad-side) 24px; background: var(--bg-base); border-top: 1px solid var(--concrete); }
/* The layout container <div class="footer footer-wrapper"> AND the template's
   inner <footer class="footer"> both match .footer, so the divider painted
   twice: full-width on the wrapper (kept) + a partial, page-padded line on the
   inner footer (removed here). The element selector outspecifies .footer. */
footer.footer { border-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 40px; }
.footer-brand-sub { font-family: var(--font-mono); font-size: 11px; color: var(--steel); line-height: 1.7; margin-top: 12px; }
.footer-col-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--chalk); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 12px; color: var(--steel); margin-bottom: 8px; transition: color 0.2s; }
.footer-col a:hover { color: var(--blue); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.04); }
.footer-copy { font-family: var(--font-mono); font-size: 10px; color: var(--concrete-light); letter-spacing: 0.5px; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-family: var(--font-mono); font-size: 10px; color: var(--concrete-light); transition: color 0.2s; }
.footer-legal a:hover { color: var(--steel-light); }

@media (max-width: 1024px) {
  .fitment-bar-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .fitment-bar-fields { flex-wrap: wrap; }
  .fitment-field { flex: 1 1 45%; min-width: 120px; }
  .plat-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .plat.hero-plat { grid-row: auto; }
  .cat-row { grid-template-columns: repeat(3, 1fr); }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .diff-grid { grid-template-columns: 1fr; }
  .garage-featured { grid-template-columns: 1fr; }
  .garage-vid-side { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.04); }
  .garage-sel { min-width: 260px; }
  .recipe { grid-template-columns: 1fr; }
  .recipe-manifest { border-left: none; border-top: 1px solid rgba(255,255,255,0.04); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 640px) {
  .cat-row { grid-template-columns: 1fr 1fr; }
  .prod-grid { grid-template-columns: 1fr; }
  .fitment-bar-fields { flex-direction: column; }
  .fitment-field { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ─────────────────── CATEGORY MOCKUP CSS ─────────────────── */
:root {
  --bg-base: #111113;
  --bg-slab: #1A1A1F;
  --bg-bay: #1E1E24;
  --bg-steel: #1C1C20;
  --bg-panel: #202026;
  --bg-raised: #28282F;
  --edge-light: rgba(255,255,255,0.045);
  --blue: #3B7DFF;
  --blue-raw: #2B6AE6;
  --blue-hot: #5B9AFF;
  --blue-dim: rgba(59, 125, 255, 0.12);
  --blue-glow: rgba(59, 125, 255, 0.25);
  --concrete: #3A3A42;
  --concrete-light: #4A4A55;
  --steel: #8A8A98;
  --steel-light: #8A8A98;
  --chalk: #C8C8D0;
  --white: #EAEAEF;
  --white-hot: #FFFFFF;
  --caution: #E8A820;
  --green: #34D399;
  --red: #EF4444;
  --font-stencil: 'Bebas Neue', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Outfit', sans-serif;
  --pad-side: clamp(20px, 5vw, 80px);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { background: var(--bg-base) !important; color: var(--chalk) !important; font-family: var(--font-body) !important; font-weight: 400; line-height: 1.6; overflow-x: hidden; }
::selection { background: var(--blue); color: var(--white-hot); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Noise overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("../images/noise.svg");
  pointer-events: none; z-index: 9998;
}

/* ═══ TOPBAR ═══ */
.topbar {
  height: 32px; background: #08080A; border-bottom: 2px solid rgba(59,125,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--steel); text-transform: uppercase; gap: 6px;
}
.topbar .dot { width: 4px; height: 4px; background: var(--blue); border-radius: 50%; animation: blink 3s ease infinite; }
.topbar .sep { color: rgba(255,255,255,0.08); margin: 0 4px; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ═══ NAVIGATION ═══ */
.nav {
  position: sticky; top: 0; z-index: 1000; height: 64px; padding: 0 var(--pad-side);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(17, 17, 19, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--concrete);
}
.nav-logo { display: flex; align-items: center; gap: 14px; }
.nav-logo-badge {
  width: 38px; height: 38px; background: var(--blue);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-stencil); font-size: 20px; color: var(--white-hot);
}
.nav-logo-type { font-family: var(--font-stencil); font-size: 22px; letter-spacing: 3px; color: var(--white); }
.nav-logo-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--steel); text-transform: uppercase; margin-top: -2px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel-light); transition: color 0.2s; position: relative; }
.nav-links a:hover { color: var(--white); }
.nav-links a::before { content: '//'; color: var(--concrete); margin-right: 4px; font-weight: 700; }
.nav-links a.active { color: var(--blue); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-btn {
  height: 36px; padding: 0 16px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--concrete); border-radius: 2px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel-light);
  transition: border-color 0.2s, color 0.2s;
}
.nav-btn:hover { border-color: var(--blue); color: var(--white); }

/* ═══ FITMENT BAR ═══ */
.fitment-bar { background: var(--blue); padding: 20px var(--pad-side); position: relative; }
.fitment-bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.12); }
.fitment-bar-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.fitment-bar-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.85); white-space: nowrap; flex-shrink: 0; }
.fitment-bar-vehicle { font-family: var(--font-stencil); font-size: 18px; letter-spacing: 2px; color: var(--white-hot); }
.fitment-bar-change { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.25); padding: 6px 14px; border-radius: 2px; transition: all 0.2s; margin-left: auto; }
.fitment-bar-change:hover { border-color: var(--white-hot); color: var(--white-hot); background: rgba(255,255,255,0.08); }

/* ═══ BREADCRUMB ═══ */
.breadcrumb { padding: 20px var(--pad-side); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel-light); }
.breadcrumb a { color: var(--steel-light); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep { margin: 0 8px; color: var(--concrete); }
.breadcrumb .current { color: var(--chalk); }

/* ═══ CATEGORY HEADER ═══ */
.cat-header {
  padding: 0 var(--pad-side) 40px;
  display: flex; align-items: flex-end; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cat-header-left {}
.cat-header-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--steel); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.cat-header-tag::before { content: ''; width: 12px; height: 1px; background: var(--blue); }
.cat-header-title { font-family: var(--font-stencil); font-size: clamp(36px, 4vw, 56px); letter-spacing: 2px; color: var(--white); line-height: 1; }
.cat-header-title .blue { color: var(--blue); }
.cat-header-count { font-family: var(--font-mono); font-size: 11px; color: var(--steel); margin-top: 8px; letter-spacing: 0.5px; }
.cat-header-desc { font-family: var(--font-body); font-size: 13px; color: var(--steel-light); max-width: 500px; margin-top: 12px; line-height: 1.6; }

/* ═══ SUBCATEGORY STRIP ═══ */
/* Child-category strip: horizontally scrollable with an OBVIOUS, on-brand affordance.
   26-item categories (e.g. Engine) overflow; a visible thin blue scrollbar + smooth
   scroll + drag/wheel (pf-theme.js) make horizontal scrolling intuitive. */
.subcat-strip {
  padding: 28px var(--pad-side) 18px; display: flex; gap: 3px; overflow-x: auto;
  scroll-behavior: smooth; cursor: grab;
  scrollbar-width: thin; scrollbar-color: var(--blue) rgba(255,255,255,0.06);
}
.subcat-strip.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.subcat-strip::-webkit-scrollbar { height: 8px; }
.subcat-strip::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); }
.subcat-strip::-webkit-scrollbar-thumb { background: var(--blue); }
.subcat-strip::-webkit-scrollbar-thumb:hover { background: var(--blue-hot); }
.subcat-card {
  flex-shrink: 0; padding: 14px 20px; background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.03);
  display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.2s; min-width: 160px;
}
.subcat-card:hover { border-color: var(--blue); background: var(--bg-steel); }
.subcat-card.active { border-color: var(--blue); background: var(--bg-steel); }
.subcat-card.active::after { content: ''; display: block; }
.subcat-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--steel); font-size: 14px; }
.subcat-icon svg { width: 18px; height: 18px; }
.subcat-card:hover .subcat-icon, .subcat-card.active .subcat-icon { color: var(--blue); }
.subcat-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel-light); white-space: nowrap; }
.subcat-card:hover .subcat-name, .subcat-card.active .subcat-name { color: var(--white); }
.subcat-count { font-family: var(--font-stencil); font-size: 16px; color: var(--steel); margin-left: auto; }
.subcat-card:hover .subcat-count, .subcat-card.active .subcat-count { color: var(--blue); }

/* BROWSE CATEGORY sidebar nav — vertical mirror of the .subcat-strip (same data). */
/* #212: Browse Category list expands to its natural height; no nested inner
   scrollbar (the page scrolls instead). Removed max-height:360px + overflow-y
   + the custom scrollbar styling that produced the secondary scrollbar. */
.cat-sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.cat-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; }
.cat-sidebar-icon { width: 18px; flex: 0 0 18px; display: flex; align-items: center; justify-content: center; color: var(--steel); font-size: 12px; }
.cat-sidebar-icon svg { width: 16px; height: 16px; }
.cat-sidebar-name { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--steel-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-sidebar-count { font-family: var(--font-stencil); font-size: 12px; color: var(--concrete); }
.cat-sidebar-item:hover { border-color: rgba(59,125,255,0.25); background: var(--bg-slab); }
.cat-sidebar-item:hover .cat-sidebar-icon, .cat-sidebar-item:hover .cat-sidebar-name { color: var(--white); }
.cat-sidebar-item.active { background: var(--blue-dim); border-color: rgba(59,125,255,0.3); }
.cat-sidebar-item.active .cat-sidebar-icon, .cat-sidebar-item.active .cat-sidebar-name, .cat-sidebar-item.active .cat-sidebar-count { color: var(--blue); }

/* ═══ MAIN LAYOUT ═══ */
/* Category page: undo the outer Magento 2-columns-left shell. Layered nav forces
   page-layout-2columns-left, so .col-main gets width:calc(100% - 300px)+float:right,
   reserving a phantom 300px left gutter (the sidebar was removed) and shifting the whole
   category body right. PF renders its own sidebar+grid inside .cat-layout, so col-main
   must be full-width. Scoped to category pages so other 2-col layouts are unaffected.
   (Root cause measured + confirmed via GPT-5.5 consult.) */
body.catalog-category-view.page-products.page-layout-2columns-left .row-content > .col-main,
body.catalog-category-view.page-products .columns.col2-layout .row-content > .col-main {
  width: 100% !important;
  max-width: none;
  float: none !important;
  margin-left: 0;
  margin-right: 0;
  clear: both;
}
body.catalog-category-view.page-products .row-content > .col-sidebar { display: none !important; }

.cat-layout {
  display: grid; grid-template-columns: 260px 1fr; gap: 0;
  padding: 0 var(--pad-side); min-height: 80vh;
}

/* ═══ SIDEBAR / FILTERS ═══ */
.sidebar {
  padding: 28px 24px 28px 0; border-right: 1px solid rgba(255,255,255,0.04);
  /* #212: was position:sticky + max-height:calc(100vh-120px) + overflow-y:auto,
     which gave the whole sidebar its own scrollbar and (when taller than the
     viewport) trapped the lower Price/Availability filters out of reach. Now a
     static, natural-height column that scrolls with the page. */
}
.filter-group { margin-bottom: 28px; }
.filter-group-head {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 12px;
}
.filter-group-label { font-family: var(--font-stencil); font-size: 15px; letter-spacing: 2px; color: var(--white); }
.filter-group-toggle { color: var(--steel); font-size: 10px; transition: transform 0.2s; }
.filter-group.collapsed .filter-group-toggle { transform: rotate(-90deg); }
.filter-group.collapsed .filter-items { display: none; }
.filter-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; transition: color 0.2s;
}
.filter-item:hover { color: var(--white); }
.filter-check {
  width: 16px; height: 16px; border: 1px solid var(--concrete); border-radius: 2px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all 0.2s; position: relative;
}
.filter-item:hover .filter-check { border-color: var(--blue); }
.filter-item.active .filter-check { border-color: var(--blue); background: var(--blue); }
.filter-item.active .filter-check::after { content: ''; width: 8px; height: 5px; border-left: 2px solid var(--white-hot); border-bottom: 2px solid var(--white-hot); transform: rotate(-45deg); position: absolute; top: 3px; }
.filter-label { font-family: var(--font-body); font-size: 13px; color: var(--steel-light); flex: 1; }
.filter-item.active .filter-label { color: var(--white); }
.filter-count { font-family: var(--font-mono); font-size: 10px; color: var(--concrete-light); }

/* Price range */
.filter-price-range { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.filter-price-input {
  flex: 1; height: 36px; background: var(--bg-slab); border: 1px solid var(--concrete); border-radius: 2px;
  color: var(--white); font-family: var(--font-mono); font-size: 11px; padding: 0 10px; outline: none; text-align: center;
}
.filter-price-input:focus { border-color: var(--blue); }
.filter-price-sep { font-family: var(--font-mono); font-size: 11px; color: var(--concrete); }
.filter-price-go {
  height: 36px; width: 36px; background: var(--blue-dim); border: 1px solid rgba(59,125,255,0.2); border-radius: 2px;
  color: var(--blue); font-size: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.filter-price-go:hover { background: var(--blue); color: var(--white-hot); }

/* Active filters */
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.active-filter {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  background: var(--blue-dim); border: 1px solid rgba(59,125,255,0.15); border-radius: 2px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--blue);
}
.active-filter-x { cursor: pointer; opacity: 0.6; transition: opacity 0.2s; font-size: 11px; }
.active-filter-x:hover { opacity: 1; }
.clear-all { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel); transition: color 0.2s; padding: 5px 0; }
.clear-all:hover { color: var(--red); }

/* ═══ PRODUCT GRID AREA ═══ */
.products-area { padding: 28px 0 28px 28px; }

/* Toolbar */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 24px;
}
.toolbar-left { display: flex; align-items: center; gap: 16px; }
.toolbar-count { font-family: var(--font-mono); font-size: 11px; color: var(--steel); letter-spacing: 0.5px; }
.toolbar-count strong { color: var(--chalk); }
.toolbar-views { display: flex; gap: 4px; }
.toolbar-view {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--concrete); border-radius: 2px; color: var(--steel); font-size: 12px;
  transition: all 0.2s; cursor: pointer;
}
.toolbar-view:hover { border-color: var(--steel-light); color: var(--white); }
.toolbar-view.active { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
.toolbar-right { display: flex; align-items: center; gap: 16px; }
.toolbar-sort {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel);
}
.toolbar-sort select {
  background: var(--bg-slab); border: 1px solid var(--concrete); border-radius: 2px;
  color: var(--white); font-family: var(--font-mono); font-size: 10px; padding: 6px 28px 6px 10px; outline: none;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B6B78' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.toolbar-sort select:focus { border-color: var(--blue); }
.toolbar-perpage { display: flex; align-items: center; gap: 6px; }
.toolbar-perpage span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel); }
.toolbar-pp-opt {
  width: 32px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--steel); border: 1px solid var(--concrete);
  border-radius: 2px; cursor: pointer; transition: all 0.2s;
}
.toolbar-pp-opt:hover { border-color: var(--steel-light); color: var(--white); }
.toolbar-pp-opt.active { border-color: var(--blue); color: var(--blue-hot); background: var(--blue-dim); }

/* ═══ PRODUCT GRID ═══ */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
/* Toolbar view-modes: grid (default 3-col) + list (horizontal rows). */
.product-grid.mode-list { grid-template-columns: 1fr; gap: 2px; }
.product-grid.mode-list .product-card { display: grid; grid-template-columns: 220px 1fr; align-items: stretch; }
.product-grid.mode-list .product-img { aspect-ratio: auto; height: 100%; min-height: 170px; }
.product-grid.mode-list .product-info { padding: 22px 24px; justify-content: center; }
.product-grid.mode-list .product-name { font-size: 16px; }
/* grid-wide: 4 per row (grid stays the 3-per-row default). Responsive 4->3->2->1. */
.product-grid.mode-grid-wide { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1280px) { .product-grid.mode-grid-wide { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px)  { .product-grid.mode-grid-wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .product-grid.mode-grid-wide { grid-template-columns: 1fr; } }
/* Wired pager (Magento\Theme\Block\Html\Pager via toolbar->getPagerHtml) restyled to PF. */
.pf-pager { margin-top: 44px; display: flex; justify-content: center; }
.pf-pager .pages { width: 100%; display: flex; justify-content: center; }
.pf-pager .pages-label, .pf-pager .pages .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pf-pager .pages .items { display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; }
.pf-pager .pages .item { margin: 0; }
.pf-pager .pages .page, .pf-pager .pages .action {
  display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px;
  background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.05); color: var(--steel-light);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-decoration: none; transition: all .2s;
}
.pf-pager .pages .page { background: var(--bg-slab) !important; }
.pf-pager .pages .item.current .page { background: var(--blue) !important; border-color: var(--blue) !important; color: var(--white-hot) !important; }
.pf-pager .pages a.page:hover, .pf-pager .pages .action:hover { border-color: var(--blue); color: var(--white); }

/* ═══ PRODUCT CARD ═══ */
.product-card {
  background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.03); position: relative;
  display: flex; flex-direction: column; transition: border-color 0.3s, box-shadow 0.3s; overflow: hidden;
}
.product-card:hover { border-color: var(--blue); }

@keyframes electricPulse {
  0%, 100% { box-shadow: 0 0 4px var(--blue), 0 0 8px rgba(59,125,255,0.2), inset 0 0 4px rgba(59,125,255,0.05); }
  50% { box-shadow: 0 0 8px var(--blue-hot), 0 0 20px rgba(59,125,255,0.3), inset 0 0 8px rgba(59,125,255,0.08); }
}
.product-card:hover { animation: electricPulse 1.2s ease-in-out infinite; }

/* Fitment badge */
.product-fitment {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 2px;
}
.product-fitment.fits { background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.25); color: var(--green); }
.product-fitment.universal { background: var(--blue-dim); border: 1px solid rgba(59,125,255,0.2); color: var(--blue); }
.product-fitment-dot { width: 5px; height: 5px; border-radius: 50%; }
.product-fitment.fits .product-fitment-dot { background: var(--green); }
.product-fitment.universal .product-fitment-dot { background: var(--blue); }

/* Wishlist */
.product-wish {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 32px; height: 32px; background: rgba(17,17,19,0.7); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--steel); font-size: 12px;
  cursor: pointer; transition: all 0.2s; opacity: 0;
}
.product-card:hover .product-wish { opacity: 1; }
.product-wish:hover { border-color: var(--blue); color: var(--blue); background: rgba(17,17,19,0.9); }

/* Image */
.product-img {
  aspect-ratio: 1; background: linear-gradient(135deg, var(--bg-steel) 0%, var(--bg-bay) 50%, var(--bg-panel) 100%);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.product-img-inner {
  font-family: var(--font-mono); font-size: 9px; color: rgba(0,0,0,0.06); text-transform: uppercase; letter-spacing: 2px;
  transition: transform 0.5s ease;
}
.product-card:hover .product-img-inner { transform: scale(1.04); }
/* Image is now wrapped in an inner <a> so .product-quick can stay a valid child
   of .product-img (the overlay's positioned parent). Fill + center the link. */
.product-img-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.product-img-link img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: contrast(1.05); transition: filter 0.3s ease; }
/* Quick action overlay */
.product-quick {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 12px 12px;
  background: linear-gradient(transparent 0%, rgba(6,7,14,0.55) 30%, rgba(6,7,14,0.93) 100%);
  display: flex; gap: 6px; transform: translateY(100%); transition: transform 0.3s ease;
}
.product-card:hover .product-quick { transform: translateY(0); }
.product-card:hover .product-img-link img { filter: contrast(1.08) drop-shadow(0 4px 14px rgba(0,0,0,0.32)); }
.product-quick-btn {
  flex: 1; height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--blue); border: none; border-radius: 2px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--white-hot); cursor: pointer; transition: background 0.2s;
}
.product-quick-btn:hover { background: var(--blue-hot); }
.product-quick-btn.ghost {
  background: transparent; border: 1px solid var(--concrete); color: var(--steel-light); flex: 0 0 34px; padding: 0;
}
.product-quick-btn.ghost:hover { border-color: var(--blue); color: var(--white); }

/* Info */
.product-info { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-brand {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel);
}
.product-name {
  font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--white); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-name:hover { color: var(--blue-hot); }
.product-sku { font-family: var(--font-mono); font-size: 9px; color: var(--steel-light); letter-spacing: 0.5px; }
.product-bottom { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.product-price { font-family: var(--font-stencil); font-size: 24px; color: var(--blue); letter-spacing: 1px; }
.product-price-old { font-family: var(--font-mono); font-size: 11px; color: var(--concrete); text-decoration: line-through; margin-bottom: 2px; }
.product-stock { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.product-stock.in-stock { color: var(--green); }
.product-stock.low-stock { color: var(--caution); }
.product-stock-dot { width: 5px; height: 5px; border-radius: 50%; }
.product-stock.in-stock .product-stock-dot { background: var(--green); }
.product-stock.low-stock .product-stock-dot { background: var(--caution); animation: blink 2s ease infinite; }

/* ═══ PAGINATION ═══ */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 40px 0 20px; border-top: 1px solid rgba(255,255,255,0.04); margin-top: 24px;
}
.page-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--concrete); border-radius: 2px; color: var(--steel);
  font-family: var(--font-mono); font-size: 12px; cursor: pointer; transition: all 0.2s;
}
.page-btn:hover { border-color: var(--blue); color: var(--white); }
.page-btn.active { border-color: var(--blue); color: var(--white-hot); background: var(--blue); }
.page-btn.arrow { font-size: 10px; }
.page-btn.disabled { opacity: 0.3; pointer-events: none; }
.page-dots { font-family: var(--font-mono); font-size: 12px; color: var(--concrete); padding: 0 4px; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .cat-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .products-area { padding-left: 0; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
}
@media (max-width: 640px) {
  .product-grid { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; gap: 12px; align-items: stretch; }
  .toolbar-right { justify-content: space-between; }
  .subcat-strip { padding: 16px var(--pad-side); }
}

/* ─────────────────── PDP MOCKUP CSS ─────────────────── */
:root {
  --bg-base: #111113;
  --bg-slab: #1A1A1F;
  --bg-bay: #1E1E24;
  --bg-steel: #1C1C20;
  --bg-panel: #202026;
  --bg-raised: #28282F;
  --edge-light: rgba(255,255,255,0.045);
  --blue: #3B7DFF;
  --blue-raw: #2B6AE6;
  --blue-hot: #5B9AFF;
  --blue-dim: rgba(59, 125, 255, 0.12);
  --blue-glow: rgba(59, 125, 255, 0.25);
  --concrete: #3A3A42;
  --concrete-light: #4A4A55;
  --steel: #8A8A98;
  --steel-light: #8A8A98;
  --chalk: #C8C8D0;
  --white: #EAEAEF;
  --white-hot: #FFFFFF;
  --caution: #E8A820;
  --green: #34D399;
  --red: #EF4444;
  --font-stencil: 'Bebas Neue', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Outfit', sans-serif;
  --pad-side: clamp(20px, 5vw, 80px);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { background: var(--bg-base) !important; color: var(--chalk) !important; font-family: var(--font-body) !important; font-weight: 400; line-height: 1.6; overflow-x: hidden; }
::selection { background: var(--blue); color: var(--white-hot); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("../images/noise.svg");
  pointer-events: none; z-index: 9998;
}

/* ═══ TOPBAR + NAV (same as category) ═══ */
.topbar {
  height: 32px; background: #08080A; border-bottom: 2px solid rgba(59,125,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--steel); text-transform: uppercase; gap: 6px;
}
.topbar .dot { width: 4px; height: 4px; background: var(--blue); border-radius: 50%; animation: blink 3s ease infinite; }
.topbar .sep { color: rgba(255,255,255,0.08); margin: 0 4px; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.nav {
  position: sticky; top: 0; z-index: 1000; height: 64px; padding: 0 var(--pad-side);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(17, 17, 19, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--concrete);
}
.nav-logo { display: flex; align-items: center; gap: 14px; }
.nav-logo-badge {
  width: 38px; height: 38px; background: var(--blue);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-stencil); font-size: 20px; color: var(--white-hot);
}
.nav-logo-type { font-family: var(--font-stencil); font-size: 22px; letter-spacing: 3px; color: var(--white); }
.nav-logo-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; color: var(--steel); text-transform: uppercase; margin-top: -2px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel-light); transition: color 0.2s; }
.nav-links a:hover { color: var(--white); }
.nav-links a::before { content: '//'; color: var(--concrete); margin-right: 4px; font-weight: 700; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-btn {
  height: 36px; padding: 0 16px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--concrete); border-radius: 2px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel-light);
  transition: border-color 0.2s, color 0.2s;
}
.nav-btn:hover { border-color: var(--blue); color: var(--white); }

/* ═══ FITMENT BAR ═══ */
.fitment-bar { background: var(--blue); padding: 20px var(--pad-side); }
.fitment-bar-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.fitment-bar-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.85); white-space: nowrap; }
.fitment-bar-vehicle { font-family: var(--font-stencil); font-size: 18px; letter-spacing: 2px; color: var(--white-hot); }
.fitment-bar-change { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.25); padding: 6px 14px; border-radius: 2px; transition: all 0.2s; margin-left: auto; cursor: pointer; }
.fitment-bar-change:hover { border-color: var(--white-hot); color: var(--white-hot); }

/* ═══ BREADCRUMB ═══ */
.breadcrumb { padding: 20px var(--pad-side); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel-light); }
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep { margin: 0 8px; color: var(--concrete); }
.breadcrumb .current { color: var(--chalk); }

/* ═══ PDP MAIN ═══ */
.pdp-main {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding: 0 var(--pad-side) 60px;
}

/* ═══ GALLERY ═══ */
.gallery { position: sticky; top: 100px; height: fit-content; padding-right: 40px; }
.gallery-main {
  aspect-ratio: 1; background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.03);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  margin-bottom: 3px;
}
.gallery-main-inner {
  font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.03); text-transform: uppercase; letter-spacing: 3px;
}
.gallery-zoom {
  position: absolute; bottom: 16px; right: 16px;
  width: 40px; height: 40px; background: rgba(17,17,19,0.7); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 2px;
  display: flex; align-items: center; justify-content: center; color: var(--steel); font-size: 14px;
  cursor: pointer; transition: all 0.2s;
}
.gallery-zoom:hover { border-color: var(--blue); color: var(--blue); }
.gallery-badge {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.25); border-radius: 2px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green);
}
.gallery-badge-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.gallery-thumb {
  aspect-ratio: 1; background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.03);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s;
  font-family: var(--font-mono); font-size: 7px; color: rgba(255,255,255,0.04); text-transform: uppercase;
}
.gallery-thumb:hover { border-color: var(--steel); }
.gallery-thumb.active { border-color: var(--blue); }
.gallery-thumb.video { position: relative; }
.gallery-thumb.video::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(59,125,255,0.08);
  display: flex; align-items: center; justify-content: center;
}

/* ═══ PRODUCT INFO ═══ */
.pdp-info { padding-left: 40px; border-left: 1px solid rgba(255,255,255,0.04); }

/* Fitment status */
.pdp-fitment-status {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; margin-bottom: 24px;
  border-radius: 2px; position: relative; overflow: hidden;
}
.pdp-fitment-status.fits {
  background: rgba(52, 211, 153, 0.06); border: 1px solid rgba(52, 211, 153, 0.15);
}
.pdp-fitment-status.nofit {
  background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.15);
}
.pdp-fitment-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.pdp-fitment-status.fits .pdp-fitment-icon { color: var(--green); }
.pdp-fitment-status.nofit .pdp-fitment-icon { color: var(--red); }
.pdp-fitment-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; }
.pdp-fitment-status.fits .pdp-fitment-text { color: var(--green); }
.pdp-fitment-status.nofit .pdp-fitment-text { color: var(--red); }
.pdp-fitment-text strong { font-weight: 700; }
/* Scanline on fitment */
.pdp-fitment-scan {
  position: absolute; top: 0; bottom: 0; width: 2px; left: -2%;
  background: linear-gradient(180deg, transparent, rgba(52,211,153,0.5), rgba(255,255,255,0.6), rgba(52,211,153,0.5), transparent);
  pointer-events: none; animation: fitScan 3s ease-out 0.5s forwards; opacity: 0;
}
@keyframes fitScan {
  0% { left: -2%; opacity: 0.8; }
  50% { left: 102%; opacity: 0.4; }
  100% { left: 102%; opacity: 0; }
}

.pdp-brand {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.pdp-brand::before { content: ''; width: 12px; height: 1px; background: var(--blue); }
.pdp-title { font-family: var(--font-stencil); font-size: clamp(28px, 3vw, 42px); letter-spacing: 2px; color: var(--white); line-height: 1.1; margin-bottom: 12px; }
.pdp-sku-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.pdp-sku { font-family: var(--font-mono); font-size: 10px; color: var(--steel-light); letter-spacing: 0.5px; }
.pdp-sku-sep { color: var(--concrete); }
.pdp-mpn { font-family: var(--font-mono); font-size: 10px; color: var(--steel-light); letter-spacing: 0.5px; }
.pdp-reviews { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--steel-light); }
.pdp-stars { display: flex; gap: 2px; color: var(--caution); font-size: 11px; }

/* Divider line */
.pdp-divider { height: 1px; background: rgba(255,255,255,0.04); margin: 24px 0; }

/* Price */
.pdp-price-block { margin-bottom: 4px; }
.pdp-price { font-family: var(--font-stencil); font-size: 48px; color: var(--blue); letter-spacing: 2px; line-height: 1; }
.pdp-price-note { font-family: var(--font-mono); font-size: 10px; color: var(--steel); letter-spacing: 0.5px; margin-top: 6px; }

/* Stock */
.pdp-stock {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 2px; margin-bottom: 24px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
}
.pdp-stock.in-stock { background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.12); color: var(--green); }
.pdp-stock.low-stock { background: rgba(232,168,32,0.06); border: 1px solid rgba(232,168,32,0.12); color: var(--caution); }
.pdp-stock-dot { width: 6px; height: 6px; border-radius: 50%; }
.pdp-stock.in-stock .pdp-stock-dot { background: var(--green); }
.pdp-stock.low-stock .pdp-stock-dot { background: var(--caution); animation: blink 2s ease infinite; }

/* Configurable options */
.pdp-options { margin-bottom: 28px; }
.pdp-option-group { margin-bottom: 20px; }
.pdp-option-label {
  font-family: var(--font-stencil); font-size: 14px; letter-spacing: 2px; color: var(--white); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.pdp-option-selected { font-family: var(--font-mono); font-size: 10px; color: var(--blue); letter-spacing: 1px; text-transform: uppercase; }
.pdp-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.pdp-swatch {
  min-width: 80px; height: 42px; padding: 0 16px;
  background: var(--bg-slab); border: 1px solid var(--concrete); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; color: var(--steel-light);
  cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden;
}
.pdp-swatch:hover { border-color: var(--blue); color: var(--white); background: var(--bg-steel); }
.pdp-swatch.active { border-color: var(--blue); color: var(--white-hot); background: var(--blue-dim); }
.pdp-swatch.active::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--blue);
}
.pdp-swatch-price { font-family: var(--font-stencil); font-size: 13px; color: var(--blue); margin-left: 8px; }
.pdp-swatch.active .pdp-swatch-price { color: var(--blue-hot); }

/* Dropdown option */
.pdp-select {
  width: 100%; height: 44px; padding: 0 32px 0 14px;
  background: var(--bg-slab); border: 1px solid var(--concrete); border-radius: 2px;
  color: var(--white); font-family: var(--font-mono); font-size: 12px; outline: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B6B78' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.2s;
}
.pdp-select:focus { border-color: var(--blue); }

/* Quantity + ATC */
.pdp-actions { display: flex; gap: 8px; margin-bottom: 20px; }
.pdp-qty {
  display: flex; align-items: center; border: 1px solid var(--concrete); border-radius: 2px; overflow: hidden; flex-shrink: 0;
}
.pdp-qty-btn {
  width: 40px; height: 52px; display: flex; align-items: center; justify-content: center;
  color: var(--steel); font-size: 14px; background: var(--bg-slab); cursor: pointer; transition: all 0.2s;
}
.pdp-qty-btn:hover { background: var(--bg-steel); color: var(--white); }
.pdp-qty-input {
  width: 48px; height: 52px; text-align: center; background: var(--bg-base); border: none; border-left: 1px solid var(--concrete); border-right: 1px solid var(--concrete);
  color: var(--white); font-family: var(--font-mono); font-size: 14px; outline: none;
}
.pdp-atc {
  flex: 1; height: 52px; min-height: 52px;
  background: linear-gradient(135deg, rgba(59,125,255,0.08) 0%, rgba(59,125,255,0.18) 100%);
  border: 1px solid rgba(59,125,255,0.5); border-radius: 2px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-stencil); font-size: 18px; letter-spacing: 3px; color: var(--white);
  transition: all 0.2s; position: relative; overflow: hidden;
}
.pdp-atc:hover {
  background: linear-gradient(135deg, rgba(59,125,255,0.18) 0%, rgba(59,125,255,0.30) 100%);
  border-color: var(--blue); color: var(--white-hot);
  box-shadow: 0 0 26px rgba(59, 125, 255, 0.18); transform: translateY(-1px);
}
.pdp-atc i { font-size: 14px; }
/* Scan line on hover */
.pdp-atc .scan { position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.25), rgba(255,255,255,0.6), rgba(255,255,255,0.25), transparent); }

/* Secondary actions */
.pdp-secondary { display: flex; gap: 8px; margin-bottom: 28px; }
.pdp-sec-btn {
  flex: 1; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--concrete); border-radius: 2px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel-light);
  transition: all 0.2s;
}
.pdp-sec-btn:hover { border-color: var(--blue); color: var(--white); }
.pdp-sec-btn i { font-size: 12px; }

/* Shipping info */
.pdp-shipping {
  background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.03); border-radius: 2px; padding: 16px; margin-bottom: 24px;
}
.pdp-ship-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.pdp-ship-row:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.03); }
.pdp-ship-icon { width: 20px; text-align: center; color: var(--blue); font-size: 13px; }
.pdp-ship-text { font-family: var(--font-body); font-size: 13px; color: var(--steel-light); }
.pdp-ship-text strong { color: var(--chalk); font-weight: 500; }

/* ═══ TABS ═══ */
.pdp-tabs-section { padding: 0 var(--pad-side) 60px; }
.pdp-tabs-nav {
  display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pdp-tab-btn {
  padding: 16px 28px; font-family: var(--font-stencil); font-size: 16px; letter-spacing: 2px;
  color: var(--steel-light); cursor: pointer; position: relative; transition: color 0.2s;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pdp-tab-btn:hover { color: var(--chalk); }
.pdp-tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
.pdp-tab-content { display: none; padding: 32px 0; }
.pdp-tab-content.active { display: block; }

/* ═══ SPECIFICATIONS tab: one clean, deduped list in a bordered card ═══
   The static identifier rows (.pf-specs-ids: SKU plus any system attributes)
   and the build_specs region (.pdp-specs-dynamic, swapped per configurable
   child by Nextlevel_ConfigurableDetails) stack inside ONE bordered card and
   read as a single continuous zebra-striped list. Both use the same
   .additional-attributes markup (th.col.label / td.col.data) so the server
   pre-fill and the JS-swapped rows are byte-identical. */
.pf-specs {
  width: 100%; margin: 6px 0 4px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 3px;
  background: rgba(255,255,255,0.014); overflow: hidden;
}
.pf-specs .additional-attributes-wrapper { margin: 0; }
.pf-specs table.additional-attributes { width: 100%; border-collapse: collapse; margin: 0; }
/* Magento's module CSS ships `.additional-attributes-wrapper .additional-attributes
   >tbody>tr>td { padding:5.5px 5px 10px; border:none }` at specificity (0,2,3) - one
   element more than the old `.pf-specs table.additional-attributes td` (0,2,2), so it
   was burying these rows (cramped padding, separators killed). Match the same
   child-combinator shape and prepend .pf-specs to win at (0,3,3). */
.pf-specs .additional-attributes-wrapper .additional-attributes > tbody > tr > th,
.pf-specs .additional-attributes-wrapper .additional-attributes > tbody > tr > td {
  padding: 17px 26px; border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 13px; text-align: left; vertical-align: top; line-height: 1.5;
}
/* A global `label, .label { padding:0; font-weight:500; font-size:100% }` (all
   !important) matches this th's `col label` class and was zeroing its padding and
   clobbering the mono treatment. Re-assert padding/size/weight with !important so
   the label cell keeps its 17px rhythm and small-caps mono look. Left padding 26px
   matches the value column; right padding 44px holds the label/value gap. */
.pf-specs .additional-attributes-wrapper .additional-attributes > tbody > tr > th.col.label {
  font-family: var(--font-mono); font-size: 11px !important; letter-spacing: 1px;
  text-transform: uppercase; color: var(--steel); width: 240px;
  padding: 17px 44px 17px 26px !important; font-weight: 400 !important;
  vertical-align: top;
}
.pf-specs .additional-attributes-wrapper .additional-attributes > tbody > tr > td.col.data { color: var(--white); }
/* Drop the trailing border on the dynamic table's last row so it doesn't
   double the card's bottom edge (dynamic is the last block when present). */
.pf-specs .pdp-specs-dynamic table.additional-attributes tr:last-child > * { border-bottom: none; }
/* Continuous zebra across the two stacked tables. The identifier table starts
   the pattern (odd rows shaded); the dynamic table continues it. When the
   identifier count is ODD, .pf-specs-dynamic--flip offsets the dynamic table by
   one so the alternation never doubles a shade at the seam. The flip depends
   only on the (fixed, server-rendered) identifier count, so it stays correct
   across every CD per-child swap (CD replaces innerHTML, preserving the class). */
.pf-specs .pf-specs-ids table.additional-attributes tr:nth-child(odd) { background: rgba(255,255,255,0.06); }
.pf-specs .pdp-specs-dynamic table.additional-attributes tr:nth-child(odd) { background: rgba(255,255,255,0.06); }
.pf-specs .pdp-specs-dynamic.pf-specs-dynamic--flip table.additional-attributes tr:nth-child(odd) { background: transparent; }
.pf-specs .pdp-specs-dynamic.pf-specs-dynamic--flip table.additional-attributes tr:nth-child(even) { background: rgba(255,255,255,0.06); }

/* Description */
.pdp-description { font-size: 14px; color: var(--steel-light); line-height: 1.8; max-width: 700px; }
.pdp-description h3 { font-family: var(--font-stencil); font-size: 20px; letter-spacing: 2px; color: var(--white); margin: 24px 0 12px; }

/* The build_specs region is empty on products with no build_specs (and is the
   reset state before a child is selected); hide it while empty so the card has
   no dangling blank row. Styling lives in the .pf-specs block above. */
.pf-specs .pdp-specs-dynamic:empty { display: none; }
/* The live SKU/MPN value hooks must inherit the mono row styling, not introduce a baseline shift. */
.pdp-sku [data-live], .pdp-mpn [data-live] { font: inherit; letter-spacing: inherit; color: inherit; }
.pdp-description ul { list-style: none; padding: 0; }
.pdp-description ul li { padding: 6px 0; padding-left: 20px; position: relative; }
.pdp-description ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; background: var(--blue); border-radius: 50%; }

/* Some product descriptions embed their own quick-spec table (table.spec) carrying an
   inline <style> authored for the MVP LIGHT theme (e.g. .mvp-brembo table.spec th{background:#f5f5f5}).
   On the PF dark theme those light cells bleed through. Neutralize to the dark palette.
   The inline <style> sits in body content (loads after head CSS), so !important is required
   to outweigh it at equal-or-higher specificity. */
.catalog-product-view .pdp-description table.spec {
  width: 100%; border-collapse: collapse; margin: 18px 0; background: transparent !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.catalog-product-view .pdp-description table.spec th,
.catalog-product-view .pdp-description table.spec td {
  background: transparent !important; color: var(--chalk) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  padding: 12px 16px !important; text-align: left !important; vertical-align: top;
  font-size: 13px;
}
.catalog-product-view .pdp-description table.spec th {
  font-family: var(--font-mono) !important; font-size: 11px !important;
  letter-spacing: 1px; text-transform: uppercase; color: var(--steel) !important;
  font-weight: 400 !important; width: 38%; white-space: nowrap;
}

/* Fitment table */
.fitment-table { width: 100%; border-collapse: collapse; }
.fitment-table th {
  text-align: left; padding: 10px 16px; background: var(--bg-slab);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--steel);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fitment-table td {
  padding: 10px 16px; font-size: 13px; color: var(--chalk);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.fitment-table tr:hover td { background: rgba(59,125,255,0.03); }
.fitment-match { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.fitment-match.yes { color: var(--green); }
.fitment-match.no { color: var(--steel); }
.fitment-match-dot { width: 5px; height: 5px; border-radius: 50%; }
.fitment-match.yes .fitment-match-dot { background: var(--green); }

/* ═══ ALSO VIEWED / FREQ BOUGHT ═══ */
.pdp-reco { padding: 0 var(--pad-side) 80px; }
.pdp-reco-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.pdp-reco-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--steel); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.pdp-reco-tag::before { content: ''; width: 12px; height: 1px; background: var(--blue); }
.pdp-reco-title { font-family: var(--font-stencil); font-size: clamp(24px, 3vw, 36px); letter-spacing: 2px; color: var(--white); }
.pdp-reco-title .blue { color: var(--blue); }
.pdp-reco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }

/* Reco card (compact) */
.reco-card {
  background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.03); transition: border-color 0.3s; overflow: hidden;
}
.reco-card:hover { border-color: var(--blue); }
.reco-img {
  aspect-ratio: 1; background: linear-gradient(135deg, var(--bg-steel), var(--bg-bay));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 8px; color: rgba(255,255,255,0.03); text-transform: uppercase;
}
.reco-info { padding: 14px; }
.reco-brand { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.reco-name { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--white); line-height: 1.3; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reco-bottom { display: flex; align-items: center; justify-content: space-between; }
.reco-price { font-family: var(--font-stencil); font-size: 20px; color: var(--blue); }
.reco-add {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--concrete); border-radius: 2px; color: var(--steel); font-size: 11px;
  transition: all 0.2s;
}
.reco-add:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }

/* Freq bought bundle */
.freq-bundle {
  background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.03); border-radius: 2px;
  padding: 28px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
.freq-items { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.freq-item {
  width: 100px; text-align: center;
}
.freq-item-img {
  width: 100px; height: 80px; background: var(--bg-steel); border: 1px solid rgba(255,255,255,0.03); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 7px; color: rgba(255,255,255,0.04); text-transform: uppercase;
  margin-bottom: 6px;
}
.freq-item-check {
  width: 16px; height: 16px; border: 1px solid var(--blue); border-radius: 2px; background: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.freq-item-check::after { content: ''; width: 8px; height: 5px; border-left: 2px solid var(--white-hot); border-bottom: 2px solid var(--white-hot); transform: rotate(-45deg); }
.freq-item-name { font-family: var(--font-body); font-size: 10px; color: var(--steel-light); line-height: 1.3; }
.freq-item-price { font-family: var(--font-stencil); font-size: 16px; color: var(--blue); margin-top: 4px; }
.freq-plus { font-family: var(--font-stencil); font-size: 28px; color: var(--concrete); }
.freq-summary { text-align: center; }
.freq-total-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.freq-total-price { font-family: var(--font-stencil); font-size: 36px; color: var(--blue); margin-bottom: 12px; }
.freq-total-save { font-family: var(--font-mono); font-size: 10px; color: var(--green); letter-spacing: 1px; margin-bottom: 16px; }
.freq-add-all {
  padding: 14px 28px; background: var(--blue); border-radius: 2px;
  font-family: var(--font-stencil); font-size: 15px; letter-spacing: 3px; color: var(--white-hot);
  transition: all 0.2s; white-space: nowrap;
}
.freq-add-all:hover { background: var(--blue-hot); box-shadow: 0 0 30px rgba(59,125,255,0.2); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .pdp-main { grid-template-columns: 1fr; }
  .gallery { position: static; padding-right: 0; margin-bottom: 32px; }
  .pdp-info { padding-left: 0; border-left: none; }
  .pdp-reco-grid { grid-template-columns: repeat(2, 1fr); }
  .freq-bundle { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 640px) {
  .pdp-reco-grid { grid-template-columns: 1fr 1fr; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
  .freq-items { justify-content: center; }
}

/* JS-fallback: ensure .reveal content shows even if IntersectionObserver hasn't fired */
.reveal { opacity: 1; transform: translateY(0); }
.reveal.preload { opacity: 0; transform: translateY(30px); }
.reveal.preload.vis { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════════════════
   MVP/Sm theme override block — repaints any red leak to PF blue
   and hides Sm chrome that escapes the Pf/workshop templates.
   ════════════════════════════════════════════════════════════ */
:root {
  --theme-color: #3B7DFF;
  --theme-color-darker: #2B6AE6;
  --theme-color-lighter: #5B9AFF;
  --theme-color-active: #2B6AE6;
}

/* Force all primary action buttons to PF blue */
.cms-index-index .action.primary,
.cms-index-index button.action.primary,
.catalog-category-view .action.primary,
.catalog-product-view .action.primary,
.action.primary,
button.action.primary,
a.action.primary,
.action.tocart,
button.action.tocart,
.box-tocart .action.tocart,
.box-tocart button.action.tocart,
.product-item-actions .action.tocart,
.modal-footer .action-primary,
.actions-toolbar > .primary .action,
.cart-container .checkout-methods-items .action.primary.checkout {
  background-color: var(--blue) !important;
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--white-hot) !important;
  font-family: var(--font-stencil) !important;
  letter-spacing: 2px !important;
}
.action.primary:hover,
button.action.primary:hover,
a.action.primary:hover,
.action.tocart:hover,
button.action.tocart:hover,
.box-tocart .action.tocart:hover {
  background-color: var(--blue-hot) !important;
  background: var(--blue-hot) !important;
  border-color: var(--blue-hot) !important;
  box-shadow: 0 0 30px rgba(59,125,255,0.25) !important;
}

/* Catch-all global button rule (the one Sm's config_less.phtml emits) */
button:not(.owl-prev):not(.owl-next):not(.slick-arrow):not(.btn-shop):not(.btn-ghost):not(.fitment-bar-change):not(.pdp-qty-btn):not(.consult-submit):not(.pdp-atc):not(.pdp-sec-btn):not(.reco-add):not(.freq-add-all):not(.recipe-atc):not(.garage-install-btn):not(.product-quick-btn):not(.toolbar-pp-opt):not(.filter-price-go):not(.fitment-go):not(.page-btn):not(.picks-tab):not(.picks-atc):not(.action.close):not(.update-cart-item):not(.fitment-bar-clear):not(.pf-ymm-modal__clear):not(.pf-mnav-toggle):not(.nav-search-btn) {
  background-color: var(--blue) !important;
}
button:not(.owl-prev):not(.owl-next):not(.slick-arrow):not(.btn-shop):not(.btn-ghost):not(.fitment-bar-change):not(.pdp-qty-btn):not(.consult-submit):not(.pdp-atc):not(.pdp-sec-btn):not(.reco-add):not(.freq-add-all):not(.recipe-atc):not(.garage-install-btn):not(.product-quick-btn):not(.toolbar-pp-opt):not(.filter-price-go):not(.fitment-go):not(.page-btn):not(.picks-tab):not(.picks-atc):not(.action.close):not(.update-cart-item):not(.fitment-bar-clear):not(.pf-ymm-modal__clear):hover {
  background-color: var(--blue-hot) !important;
}

/* Hide MVP/Sm header & footer chrome that leaks through */
.header-container,
[class^="header-style-"],
.panel.wrapper,
.mvp-top-banner,
.copyright,
.cms-index-index .page-header > .header,
.footer-container > .footer,
.cms-index-index .footer.content {
  display: none !important;
}

/* Page wrappers — force PF dark background */
html, body {
  background: var(--bg-base) !important;
}
.page-wrapper, .page-main, .columns, .column.main {
  background: var(--bg-base) !important;
  color: var(--chalk);
}
.page-main {
  max-width: none !important;
  padding: 0 !important;
}
.cms-index-index .page-main,
.cms-index-index .columns,
.cms-index-index .column.main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.catalog-category-view .page-main,
.catalog-product-view .page-main {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Hide breadcrumbs/page-title leftover when our template injects its own */
.catalog-category-view .breadcrumbs:not(.breadcrumb),
.catalog-product-view .breadcrumbs:not(.breadcrumb) {
  display: none !important;
}

/* Social icon contrast fix (the 4 black squares in the footer review) */
.soc {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--chalk) !important;
}
.soc:hover {
  border-color: var(--blue) !important;
  color: var(--blue-hot) !important;
  background: var(--blue-dim) !important;
}
.soc i { font-size: 16px; }

/* Fitment selector form: force horizontal flex row for YMM widget */
.fitment-bar-fields {
  display: flex !important; align-items: center !important; gap: 10px !important;
  flex: 1 1 auto !important; flex-wrap: nowrap !important;
}
.fitment-bar .nlh-ymm,
.fitment-bar .pf-fitment-form {
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 8px !important; width: 100% !important; flex-wrap: nowrap !important;
}
.fitment-bar .nlh-ymm .nlh-ymm__form {
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 8px !important; flex: 1 1 auto !important; width: 100% !important;
  flex-wrap: nowrap !important;
}
.fitment-bar .nlh-ymm .fitment-field {
  position: relative !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.fitment-bar .nlh-ymm select,
.fitment-bar .nlh-ymm .nlh-ymm__select {
  width: 100%; height: 44px; padding: 0 14px;
  background: rgba(10,12,18,0.72) !important;
  color: #EAEAEF !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 2px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.4) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.4) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.fitment-bar .nlh-ymm select:focus { border-color: var(--white-hot) !important; outline: none; }
.fitment-bar .nlh-ymm select:disabled { opacity: 0.5; cursor: not-allowed; }
.fitment-bar .nlh-ymm__apply,
.fitment-bar .fitment-go,
.fitment-bar button.fitment-go {
  height: 44px; padding: 0 28px;
  background: var(--bg-base) !important;
  color: var(--white-hot) !important;
  font-family: var(--font-stencil); font-size: 14px; letter-spacing: 2px;
  border-radius: 2px;
  border: none;
  transition: background 0.2s, box-shadow 0.2s;
}
.fitment-bar .nlh-ymm__apply:hover,
.fitment-bar .fitment-go:hover {
  background: var(--bg-raised) !important;
  color: var(--white-hot) !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

/* Empty product image fallback (review: blank image areas) */
.product-card .product-img img[src*="placeholder"],
.product-card .product-img img[src*="missingimage"],
.product-card .product-img img:not([src]),
.product-card .product-img img[src=""] {
  display: none !important;
}
.product-card .product-img {
  background: linear-gradient(135deg, var(--bg-steel), var(--bg-bay));
  position: relative;
}
.product-img-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; color: var(--steel);
  letter-spacing: 2px; text-transform: uppercase;
  text-align: center; padding: 12px;
}

/* Recipe item images — fallback when missing */
.recipe-item img[src*="missingimage"],
.recipe-item img[src*="placeholder"] {
  opacity: 0;
}
.recipe-item .recipe-item-img {
  background: linear-gradient(135deg, var(--bg-steel), var(--bg-bay));
}

/* GarageVideos parts grid — improve image fallbacks */
.garage-part-thumb img[src*="missingimage"],
.garage-part-thumb img[src*="placeholder"],
.garage-vid-card img[src*="missingimage"],
.garage-vid-card img[src*="placeholder"] {
  opacity: 0;
}

/* Hide Magento's default "category description" / sidebar shop-by / etc. */
.catalog-category-view .sidebar:not(.sidebar) {
  display: none !important;
}
.catalog-category-view .toolbar-products,
.catalog-category-view .pages,
.catalog-category-view .pager {
  display: none !important;
}

/* Make MVP messages / notice / error bars match PF palette */
.message {
  background: var(--bg-slab) !important;
  color: var(--chalk) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-left: 3px solid var(--blue) !important;
  font-family: var(--font-body);
}
.message.error { border-left-color: #FF4D5E !important; }
.message.success { border-left-color: #4CD964 !important; }
.message.notice { border-left-color: var(--caution) !important; }

/* === Improve typography contrast for QA review HIGH issues === */
.cat-header-desc, .pdp-pf-difference p, .diff-card p,
.recipe-desc, .garage-vid-context, .consult-desc {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #B3B8C5 !important;
}

/* === PDP secondary buttons force-dark (kill red bleed from Sm theme) === */
.pdp-secondary a.pdp-sec-btn,
a.pdp-sec-btn,
.pdp-secondary button.pdp-sec-btn,
button.pdp-sec-btn {
  background: transparent !important;
  border: 1px solid var(--concrete) !important;
  color: var(--steel-light) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 14px !important;
  min-height: 44px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.pdp-secondary a.pdp-sec-btn:hover,
a.pdp-sec-btn:hover {
  border-color: var(--blue) !important;
  color: var(--white-hot) !important;
}

/* === Qty stepper: force dark === */
.pdp-qty {
  display: inline-flex !important;
  align-items: stretch !important;
  border: 1px solid var(--concrete) !important;
  border-radius: 2px !important;
  background: var(--bg-slab) !important;
  overflow: hidden;
}
.pdp-qty-btn, button.pdp-qty-btn {
  width: 40px !important; height: 48px !important;
  background: var(--bg-steel) !important;
  color: var(--steel-light) !important;
  border: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 11px !important;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.pdp-qty-btn:hover, button.pdp-qty-btn:hover {
  background: var(--blue-dim) !important;
  color: var(--blue) !important;
}
.pdp-qty-input {
  width: 56px !important; height: 48px !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(255,255,255,0.05) !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  text-align: center !important;
  font-family: var(--font-stencil) !important;
  font-size: 18px !important;
  color: var(--white) !important;
  outline: none;
}

/* === Breadcrumb / Magento breadcrumbs container: force dark === */
.breadcrumbs,
.breadcrumb {
  background: var(--bg-base) !important;
  color: var(--steel) !important;
}
.breadcrumbs .items {
  background: var(--bg-base) !important;
  padding: 14px var(--pad-side) !important;
  max-width: none !important;
}
.breadcrumbs a, .breadcrumbs a:visited {
  color: var(--steel) !important;
}
.breadcrumbs a:hover { color: var(--blue) !important; }
.breadcrumbs strong { color: var(--chalk) !important; }
.breadcrumbs .items > li { background: none !important; }

/* === Sidebar YMM widget styling — match dark workshop === */
.pf-sidebar-ymm .nlh-ymm {
  display: flex; flex-direction: column; gap: 8px;
}
.pf-sidebar-ymm .nlh-ymm__form {
  display: flex; flex-direction: column; gap: 8px;
}
.pf-sidebar-ymm .fitment-field {
  width: 100%;
}
.pf-sidebar-ymm .nlh-ymm select,
.pf-sidebar-ymm .nlh-ymm__select {
  width: 100% !important;
  height: 40px !important;
  background: var(--bg-base) !important;
  border: 1px solid var(--concrete) !important;
  color: var(--chalk) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  padding: 0 12px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px !important;
  outline: none;
}
.pf-sidebar-ymm .nlh-ymm select:focus,
.pf-sidebar-ymm .nlh-ymm__select:focus {
  border-color: var(--blue) !important;
}
.pf-sidebar-ymm .nlh-ymm__apply,
.pf-sidebar-ymm button.nlh-ymm__apply,
.pf-sidebar-ymm .fitment-go,
.pf-sidebar-ymm button.fitment-go {
  width: 100% !important;
  height: 40px !important;
  background: var(--blue) !important;
  color: var(--white-hot) !important;
  border: none !important;
  font-family: var(--font-stencil) !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  border-radius: 2px !important;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  margin-top: 4px;
}
.pf-sidebar-ymm .nlh-ymm__apply:hover,
.pf-sidebar-ymm .fitment-go:hover {
  background: var(--blue-hot) !important;
  box-shadow: 0 0 24px rgba(59,125,255,0.25);
}
.pf-sidebar-ymm .nlh-ymm__garage { display: none !important; }

/* === Configurable product options block force-dark === */
.pdp-options .swatch-attribute-label,
.pdp-options .swatch-attribute,
.pdp-options .super-attribute-select,
.pdp-options .product-options-wrapper label,
#product-options-wrapper label {
  color: var(--chalk) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}
.pdp-options select,
.product-options-wrapper select,
.product-options-wrapper input[type="text"],
#product-options-wrapper select,
#product-options-wrapper input[type="text"] {
  background: var(--bg-base) !important;
  border: 1px solid var(--concrete) !important;
  color: var(--chalk) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 2px !important;
  margin-top: 6px;
}
.pdp-options .swatch-option,
.product-options-wrapper .swatch-option {
  background: var(--bg-slab) !important;
  border: 1px solid var(--concrete) !important;
  color: var(--chalk) !important;
  padding: 8px 14px !important;
  border-radius: 2px !important;
  font-family: var(--font-stencil) !important;
}
.pdp-options .swatch-option.selected,
.pdp-options .swatch-option:hover,
.product-options-wrapper .swatch-option.selected {
  border-color: var(--blue) !important;
  background: var(--blue-dim) !important;
  color: var(--blue-hot) !important;
}

/* Gallery main image: cover available space.
   Image surfaces are WHITE so light/white-background product photos (the common
   case) sit seamlessly as a clean product card instead of floating as a hard
   white rectangle on a dark gradient. The dark .gallery-main panel still frames
   no-image products (the .gallery-main-inner placeholder keeps the dark look). */
.gallery-main { position: relative; overflow: hidden; }
.gallery-main-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; padding: 24px;
  background: #FFFFFF;
}
.gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: contain; padding: 6px;
  background: #FFFFFF;
}

/* Catch any white-background-leak under .columns / .column.main */
.catalog-product-view .columns,
.catalog-category-view .columns,
.catalog-product-view .column.main,
.catalog-category-view .column.main {
  background: var(--bg-base) !important;
}

/* === Ensure sticky nav works (no overflow-hidden ancestors) === */
html, body { overflow-x: clip !important; overflow-y: visible !important; }
.page-wrapper, .columns, .column.main, .page-main, .pf-shell {
  overflow: visible !important;
  contain: none !important;
}
.page-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.page-header .topbar { position: relative; z-index: 1001; }
.page-header .nav { position: relative; z-index: 1001; }

/* === Final QA pass — body copy contrast + icon visibility === */

/* Larger, higher-contrast body copy */
body, p {
  font-size: 14px !important;
  line-height: 1.65 !important;
}
.diff-text, .recipe-desc, .garage-vid-context,
.consult-desc, .cat-header-desc {
  color: #B3B8C5 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Footer — match mockup type scale: recessed, mono, dim (not body-copy contrast) */
.footer-brand-sub {
  color: #6B6B78 !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
}
.footer-col a, .footer-col {
  color: #6B6B78 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}
.footer-col a:hover { color: var(--blue-hot) !important; }
.footer-copy, .footer-legal a {
  color: #4A4A55 !important;
  font-size: 10px !important;
}

/* Nav links — slightly larger and more visible */
.nav-links a {
  font-size: 12px !important;
  color: #BCC0CB !important;
  letter-spacing: 0.12em !important;
}
.nav-links a:hover { color: var(--white-hot) !important; }
.nav-btn {
  font-size: 11px !important;
  color: #BCC0CB !important;
}
.nav-btn i { font-size: 14px !important; }

/* Header utility icons: ensure they have visible glyphs */
.nav-btn i, .nav-right i, .soc i {
  display: inline-block !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Cart/social/garage thumb fallback — show the SKU/label clearly when no image */
.product-img-inner, .garage-iframe-wrap, .freq-item-img,
.gallery-main-inner, .reco-img, .plat-img {
  color: var(--steel) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* Larger product card image area */
.product-card .product-img {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #1C1C20, #15151A);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card .product-img img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  padding: 16px;
  mix-blend-mode: multiply;
  filter: contrast(1.05);
  transition: filter 0.3s ease;
}
.product-card:hover .product-img img {
  filter: contrast(1.08) drop-shadow(0 4px 14px rgba(0,0,0,0.32));
}
/* Dark cinema spotlight — GPT-4o vision winner.
   Spotlight from above-center + brightness/contrast boost makes dark metal parts
   crisp and visible without breaking the dark industrial store aesthetic.
   :has() scopes to cards with real product images; placeholders keep base dark bg. */
.product-card .product-img:has(img:not([src*="placeholder"]):not([src*="missingimage"]):not([src=""])) {
  background:
    radial-gradient(ellipse 70% 65% at 50% 38%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 55%, transparent 80%),
    linear-gradient(135deg, #1C1D24 0%, #13141A 100%) !important;
}
.product-card .product-img:has(img:not([src*="placeholder"]):not([src*="missingimage"]):not([src=""])) img {
  mix-blend-mode: normal !important;
  filter: brightness(1.28) contrast(1.14);
  transition: filter 0.3s ease;
}
.product-card:hover .product-img:has(img) img {
  filter: brightness(1.35) contrast(1.18) drop-shadow(0 6px 18px rgba(0,0,0,0.55));
}

.product-card .product-img .product-img-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  text-align: center;
}

/* Top bar contrast (was nearly illegible) */
.topbar {
  font-size: 10px !important;
  color: #9094A1 !important;
  letter-spacing: 0.16em !important;
}

/* CTA section trailing icons (social row in cta-end) — ensure visible glyph */
.cta-end .socials .soc {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--chalk) !important;
}
.cta-end .socials .soc i { font-size: 16px !important; line-height: 1 !important; }

/* === Issue 4 — staff picks full-width (and tighten icon size, container width) === */
.picks { width: 100%; max-width: none; }
.picks .picks-widget-host {
  width: 100%; max-width: none;
  display: block;
}
.picks .prod-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 3px !important;
  width: 100%;
}
.picks .prod-grid .prod {
  display: flex; flex-direction: column;
  min-height: 360px;
  background: var(--bg-slab);
  border: 1px solid rgba(255,255,255,0.04);
}
.picks .prod-grid .prod .prod-img {
  height: 240px !important;
  background-color: linear-gradient(135deg, var(--bg-steel), var(--bg-bay));
  position: relative;
}
.picks .prod-grid .prod .prod-body {
  padding: 16px 14px;
  flex: 1;
}
.picks .prod-grid .prod .prod-name {
  color: var(--white);
  font-family: var(--font-body); font-weight: 500;
  font-size: 14px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.picks .prod-grid .prod .prod-brand {
  color: var(--blue-hot);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 6px;
}
.picks .prod-grid .prod .prod-price {
  font-family: var(--font-stencil); color: var(--blue); font-size: 22px;
}

/* === Issue 3 — Department icons (FA already in CMS now); size + color === */
.cat-icon i.fa-solid {
  font-size: 28px;
  color: var(--steel-light);
  transition: color 0.2s;
}
.cat:hover .cat-icon i.fa-solid { color: var(--blue-hot); }

/* === Final fitment bar — strong horizontal layout enforcement === */
.fitment-bar .fitment-bar-inner {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 24px !important;
}
.fitment-bar .fitment-bar-inner > * { flex-shrink: 0; }
.fitment-bar .fitment-bar-inner .fitment-bar-fields { flex: 1 1 auto; }
@media (max-width: 768px) {
  .fitment-bar .fitment-bar-inner { flex-direction: column !important; }
  .fitment-bar .nlh-ymm .nlh-ymm__form { flex-wrap: wrap !important; }
  .fitment-bar .nlh-ymm .fitment-field { flex: 1 1 45% !important; }
}

/* === Final QA pass — kill Sm .container constraint on PF pages === */
.cms-index-index .container,
.cms-index-index .row,
.cms-index-index .col-lg-12,
.cms-index-index .col-md-12,
.cms-index-index .page-main-full-width,
.catalog-category-view .container,
.catalog-category-view .row,
.catalog-category-view .col-lg-12,
.catalog-product-view .container,
.catalog-product-view .row,
.catalog-product-view .col-lg-12,
.shopscheduler-booking-create .container,
.shopscheduler-booking-create .row {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-basis: 100% !important;
}

/* Hide Magento's auto-injected page title wrapper on homepage */
.cms-index-index .page-title-wrapper,
.cms-index-index .nlh-ymm-title-wrapper {
  display: none !important;
}

/* Hero viewport must fit topbar+nav+hero+fitment-bar in 100vh */
.hero-viewport {
  min-height: calc(100vh - 96px) !important;
  display: flex !important;
  flex-direction: column !important;
}
.hero-viewport > .hero { flex: 1 1 auto !important; }
.hero-viewport > .fitment-bar { flex: 0 0 auto !important; }

/* Picks section — force prod cards to render properly with full-width grid */
.picks {
  width: 100% !important;
  max-width: none !important;
  padding: var(--pad-section) var(--pad-side) !important;
  background: var(--bg-base) !important;
}
.picks .prod-grid,
.picks .picks-widget-host,
.picks .picks-widget-host .prod-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 3px !important;
  width: 100% !important;
  max-width: none !important;
}
/* The outer .picks-widget-host wrapping the inner .prod-grid — flatten so we don't nest grids */
.picks .picks-widget-host {
  grid-template-columns: 1fr !important;
  display: block !important;
  width: 100% !important;
}
.picks .picks-widget-host > .prod-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}
.picks .prod {
  display: flex !important; flex-direction: column !important;
  min-height: 380px !important;
  width: 100% !important;
  background: var(--bg-slab) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}
.picks .prod .prod-img {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  width: 100% !important;
  background: linear-gradient(135deg, var(--bg-steel) 0%, var(--bg-bay) 50%, var(--bg-panel) 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.picks .prod .prod-img img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
  padding: 16px !important;
}
.picks .prod .prod-body {
  padding: 16px 14px !important;
  flex: 1 1 auto !important;
  display: flex; flex-direction: column;
  gap: 6px;
}
.picks .prod .prod-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: var(--white) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  margin-bottom: 8px;
}
.picks .prod .prod-brand {
  color: var(--blue-hot) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.picks .prod .prod-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 8px;
}
.picks .prod .prod-price {
  font-family: var(--font-stencil) !important;
  font-size: 22px !important;
  color: var(--blue) !important;
}
/* Magento's price wrapper inside .prod-price */
.picks .prod .prod-price .price,
.picks .prod .prod-price .price-final_price,
.picks .prod .prod-price [data-price-type] {
  font-family: var(--font-stencil) !important;
  font-size: 22px !important;
  color: var(--blue) !important;
}
.picks .prod .prod-add {
  width: 36px !important; height: 36px !important;
  background: var(--blue) !important;
  color: var(--white-hot) !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.1s !important;
}
.picks .prod .prod-add:hover { background: var(--blue-hot) !important; transform: scale(1.05); }

/* ════════════════════════════════════════════════════════════
   MOBILE AUDIT — comprehensive overhaul for ≤768px
   Loaded after all earlier rules so wins by source order.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ─── Topbar: single line, smaller text, dot-separated, marquee if needed ─── */
  .topbar {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
    gap: 4px !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .topbar > span:not(.dot):not(.sep) { font-size: 9px !important; }
  .topbar .sep { margin: 0 2px !important; }
  /* Full promo (~439px) exceeds 390px and, being centered, clipped "Free
     shipping" off the left edge. Drop the trailing "Est. 2019" segment so the
     remaining copy fits unclipped on narrow screens. */
  .topbar > span:last-child,
  .topbar > span:nth-last-child(2) { display: none !important; }

  /* ─── Nav: logo on left, 3 icon-only buttons on right, ONE row ─── */
  .nav {
    min-height: 56px !important;
    height: auto !important;
    padding: 6px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;       /* allow nav-links to drop to a 2nd row */
    column-gap: 8px !important;
    row-gap: 0 !important;
  }
  .nav-logo {
    gap: 8px !important;
    flex: 0 0 auto !important;
    order: 1 !important;
  }
  .nav-logo-badge {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }
  .nav-logo-type {
    font-size: 15px !important;
    letter-spacing: 2px !important;
  }
  .nav-logo-sub {
    display: none !important;
  }
  /* Mobile nav links: was display:none (primary nav unreachable on phones).
     Show as a compact horizontal-scroll strip on its own row below the bar. */
  .nav-links {
    display: flex !important;
    order: 3 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 4px 0 0 !important;
    padding: 8px 0 2px !important;
    list-style: none !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    border-top: 1px solid var(--concrete) !important;
    scrollbar-width: none !important;
  }
  .nav-links::-webkit-scrollbar { display: none !important; }
  .nav-links li { flex: 0 0 auto !important; }
  .nav-links a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;       /* was a 24px tap target; meet 44px touch min */
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap !important;
    padding: 2px 0 !important;
  }
  /* STAFF PICKS tab row. Base rule (~line 3927) is display:inline-flex;width:auto,
     so the tabs shrink-wrapped to ~531px and overflowed the 390 viewport, pushing
     <body> to 547px. html overflow-x:clip hid the scrollbar, so it rendered as a
     dead right-hand rail in the capture and clipped the last tab off-screen on
     phones. Contain it as a swipeable scroll strip (same idiom as .nav-links).
     Scoped under .picks so specificity (0,2,0) beats the later base rule. */
  .picks .picks-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .picks .picks-tabs::-webkit-scrollbar { display: none !important; }
  .picks .picks-tabs button,
  .picks .picks-tabs .picks-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 12px 16px !important;
  }
  .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    order: 2 !important;
  }
  .nav-right .nav-btn {
    height: 44px !important;        /* 44px min touch target (was 36px, below tap minimum) */
    width: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;        /* hide text */
    border: 1px solid var(--concrete) !important;
  }
  .nav-right .nav-btn i {
    font-size: 14px !important;
    color: var(--chalk) !important;
  }
  .nav-right .nav-btn .counter-number { display: none !important; }

  /* ─── Hero viewport: respect 100vh - new 84px header ─── */
  .hero-viewport {
    min-height: calc(100vh - 120px) !important;
  }
  .hero {
    background-position: center center !important;
    background-size: cover !important;
  }
  /* Desktop overlay is a left-edge horizontal gradient (transparent past 75%).
     On mobile hero-left is full-width, so text spilled over the un-scrimmed
     bright photo. Replace with a full-width vertical veil for readable text. */
  .hero::after {
    background: linear-gradient(180deg, rgba(5,5,7,0.62) 0%, rgba(5,5,7,0.5) 38%, rgba(5,5,7,0.72) 100%) !important;
  }
  .hero-left {
    padding: 32px 24px 40px !important;
    max-width: 100% !important;
  }
  .hero-tag {
    font-size: 10px !important;
    margin-bottom: 16px !important;
  }
  .hero-title {
    font-size: clamp(40px, 11vw, 68px) !important;
    line-height: 0.95 !important;
    letter-spacing: 1px !important;
    margin-bottom: 20px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .hero-annotation {
    font-size: 11px !important;
    line-height: 1.7 !important;
    margin-bottom: 28px !important;
    color: #aeaeb8 !important;        /* lift from --steel #6B6B78: AA over the veil */
    text-shadow: 0 1px 6px rgba(0,0,0,0.7) !important;
  }
  .hero-ctas {
    flex-direction: row !important;
    gap: 8px !important;
  }
  .btn-shop, .btn-ghost {
    flex: 1 1 auto !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    justify-content: center !important;
  }

  /* ─── Fitment bar: full-width, stacked label + form ─── */
  .fitment-bar { padding: 16px 16px !important; }
  .fitment-bar-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .fitment-bar-label {
    font-size: 10px !important;
    text-align: center !important;
  }
  /* Collapsed-state CTA ("Find Your Vehicle" / "Change Vehicle"). Base rule
     (~line 934) gives it margin-left:auto, which in the stacked column still
     pushes it to the cross-axis right edge, so it floated right with dead space
     on the left under the centered heading (read as accidentally placed). Kill
     the auto margin and stretch it full width so it sits centered under the
     heading like a proper mobile CTA. */
  .fitment-bar-change {
    margin-left: 0 !important;
    align-self: stretch !important;
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    /* Contrast/affordance fix. Base (~line 934) is rgba(255,255,255,0.6) text at
       10px on the bright-blue bar = 3.77:1, which fails WCAG AA for that size and
       reads as a disabled ghost outline. As the primary fitment action on
       shop/category/pdp it must look tappable: make it a solid white CTA with
       near-black label (~19:1) at a legible 12px. */
    background: var(--white-hot) !important;
    color: #0A0A0F !important;
    border-color: var(--white-hot) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }
  .fitment-bar-fields {
    flex-direction: column !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .fitment-bar .nlh-ymm,
  .fitment-bar .pf-fitment-form,
  .fitment-bar .nlh-ymm .nlh-ymm__form {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .fitment-bar .nlh-ymm .fitment-field {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* ─── Selects: fix text clipping (line-height vs height mismatch) ─── */
  select,
  .fitment-bar select,
  .fitment-bar .nlh-ymm__select,
  .fitment-bar .nlh-ymm select {
    height: 44px !important;
    line-height: 44px !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    text-overflow: ellipsis !important;
  }
  .fitment-go,
  .nlh-ymm__apply,
  button.fitment-go,
  button.nlh-ymm__apply {
    width: 100% !important;
    height: 44px !important;
    font-size: 13px !important;
  }

  /* ─── Platforms grid: 1 col on phones ─── */
  .plat-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 8px !important;
  }
  .plat,
  .plat.hero-plat {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 200px !important;
  }
  .plat-name { font-size: 22px !important; }
  .plat-spec { font-size: 10px !important; }

  /* ─── Categories / departments: 2 col on phones ─── */
  .cat-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .cat {
    padding: 18px 12px !important;
  }
  .cat-icon i.fa-solid { font-size: 22px !important; }
  .cat-name { font-size: 13px !important; }

  /* ─── Picks: 2-col grid not 1-col ─── */
  .picks {
    padding: 48px 16px !important;
  }
  .picks .prod-grid,
  .picks .picks-widget-host > .prod-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .picks .prod {
    min-height: 280px !important;
  }
  .picks .prod .prod-name {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  .picks .prod .prod-price {
    font-size: 17px !important;
  }
  .picks .prod .prod-brand {
    font-size: 9px !important;
  }
  .picks .prod .prod-add {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }

  /* ─── Garage section: stack vertically ─── */
  .garage { padding: 48px 16px !important; }
  .garage-featured { grid-template-columns: 1fr !important; }
  .garage-vid-title { font-size: 18px !important; }
  .garage-parts-list { padding: 0 !important; }
  .garage-part {
    grid-template-columns: 36px 56px 1fr auto !important;
    grid-template-areas: "num img info price" "num img info add" !important;
    padding: 10px 4px !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
  }
  .garage-part-num { grid-area: num !important; align-self: center !important; }
  .garage-part-img { grid-area: img !important; align-self: center !important; }
  .garage-part-info { grid-area: info !important; align-self: center !important; }
  .garage-part-name { font-size: 11px !important; }
  .garage-part-price { grid-area: price !important; align-self: center !important; text-align: right !important; font-size: 13px !important; }
  .garage-part-add { grid-area: add !important; justify-self: end !important; align-self: center !important; }
  /* Was height:28px, below the 44px mobile touch minimum. min-height keeps the
     pill tappable; base flex (align-items:center) vertically centers the label. */
  .garage-part-add {
    min-height: 44px !important;
    min-width: 44px !important;       /* was ~36px wide; square up the "ADD +" tap target */
    justify-content: center !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
  /* STAFF PICKS "+" add button: base is 36x36 (line ~3911); .picks scope (0,2,0)
     beats it to reach the 44px mobile touch minimum. */
  .picks .picks-atc {
    width: 44px !important;
    height: 44px !important;
  }

  /* ─── Recipes: stack ─── */
  .recipes { padding: 48px 16px !important; }
  .recipe { grid-template-columns: 1fr !important; }
  .recipe-summary { padding: 20px !important; }
  .recipe-title { font-size: 18px !important; }
  .recipe-manifest { padding: 20px !important; }
  .recipe-total { font-size: 22px !important; }

  /* ─── Diff section: stack ─── */
  .diff { padding: 48px 16px !important; }
  .diff-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .diff-card { padding: 24px !important; }
  .diff-title { font-size: 16px !important; }

  /* ─── Brands grid: smaller, more cols ─── */
  .brands { padding: 48px 16px !important; }
  .brand-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
    align-items: stretch !important;
  }
  .brand-tile {
    padding: 14px 10px !important;
    min-height: 56px !important;
    font-size: 11px !important;
  }

  /* ─── CTA end: tighten ─── */
  .cta-end { padding: 48px 16px !important; }
  .cta-end-title { font-size: 32px !important; }
  .cta-end-sub { font-size: 12px !important; margin: 12px 0 24px !important; }
  .cta-end-btns { flex-direction: column !important; gap: 8px !important; }
  .cta-end-btns .btn-shop,
  .cta-end-btns .btn-ghost {
    width: 100% !important;
    justify-content: center !important;
  }
  .socials { gap: 6px !important; }
  .soc { width: 40px !important; height: 40px !important; }

  /* ─── Footer ─── */
  .footer { padding: 32px 16px 24px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .footer-col:first-child { grid-column: 1 / -1 !important; }
  .footer-col-title { font-size: 11px !important; }
  .footer-col a { font-size: 12px !important; }
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }

  /* ─── Category page: products in 2-col on mobile, not 1-col ─── */
  .cat-layout {
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
  }
  .sidebar {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    padding: 16px 0 !important;
    position: static !important;
    max-height: none !important;
  }
  .products-area { padding: 16px 0 !important; }
  .product-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }
  .product-card { min-height: auto !important; }
  .product-info { padding: 10px !important; }
  .product-name { font-size: 13px !important; line-height: 1.3 !important; }
  .product-price { font-size: 14px !important; }
  .product-brand { font-size: 10px !important; }
  /* Touch/mobile: the quick-add overlay is hover-reveal, so on touch it never
     appeared and the in-grid Add To Cart was invisible/unusable. On touch we take
     it OUT of the image overlay and pin it as a full-width bar at the very bottom
     of the card, BELOW brand/name/price (correct buy hierarchy: image -> identity
     -> price -> CTA). Re-anchoring works by dropping position on .product-img so the
     absolute .product-quick resolves against the relative .product-card; padding-bottom
     reserves the strip so the info never sits under the bar. 44px = AAA touch target.
     Drop the redundant "view" eye (image + title already open the PDP, eye overflowed). */
  .product-card { position: relative; padding-bottom: 44px !important; }
  .product-card .product-img { position: static !important; }
  .product-card .product-quick {
    position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
    transform: none !important; padding: 0 !important; background: none !important; gap: 0 !important;
  }
  .product-card .product-quick-btn.ghost { display: none !important; }
  .product-card .product-quick-btn { flex: 1 1 auto !important; min-width: 0 !important; height: 44px !important; border-radius: 0 !important; font-size: 11px !important; }
  .cat-header { padding: 24px 12px !important; }
  .cat-header-title { font-size: 32px !important; }
  .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
  }
  .toolbar-left, .toolbar-right {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .subcat-strip {
    overflow-x: auto !important;
    grid-template-columns: none !important;
    display: flex !important;
    padding: 12px !important;
  }
  .subcat-card {
    flex: 0 0 110px !important;
  }

  /* ─── PDP mobile ─── */
  .pdp-main {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 16px !important;
  }
  .gallery {
    position: static !important;
    padding-right: 0 !important;
  }
  /* width:100% stops aspect-ratio:1 from deriving width from the 320px height
     (which left the gallery 320px wide in a 358px column = a 38px right-side gap
     read as a misaligned image). Fill the column so it sits 16px/16px symmetric. */
  .gallery-main { height: 320px !important; width: 100% !important; }
  .gallery-thumbs {
    grid-template-columns: repeat(5, 1fr) !important;
  }
  .pdp-info { padding-left: 0 !important; border-left: none !important; }
  .pdp-title { font-size: 26px !important; }
  .pdp-price { font-size: 36px !important; }
  .pdp-actions { flex-direction: column !important; gap: 12px !important; }
  .pdp-actions .pdp-qty { width: auto !important; align-self: flex-start !important; }
  .pdp-atc { width: 100% !important; flex: none !important; height: 52px !important; min-height: 52px !important; font-size: 15px !important; }
  .pdp-secondary {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .pdp-sec-btn {
    flex: 1 1 30% !important;
    font-size: 10px !important;
    padding: 8px 6px !important;
  }
  .pdp-tabs-nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
  .pdp-tab-btn {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    padding: 12px 16px !important;
  }

  /* ─── PDP recommendations / freq bought ─── */
  .pdp-reco-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .freq-bundle { grid-template-columns: 1fr !important; padding: 16px !important; }
  .freq-items { justify-content: center !important; gap: 6px !important; }
  .freq-item { width: 80px !important; }
  .freq-item-img { width: 80px !important; height: 60px !important; }

  /* ─── Breadcrumb ─── */
  .breadcrumb {
    padding: 12px 16px !important;
    font-size: 9px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
  .breadcrumb .sep { margin: 0 6px !important; }

  /* Section eyebrows */
  .section-eyebrow, .picks-badge { font-size: 9px !important; }
  .section-title, .picks-title, .platforms-title, .cat-section-title {
    font-size: 28px !important;
  }
}

/* Smaller phones (≤480px): keep 2-col grids so users see more cards at once */
@media (max-width: 480px) {
  .hero-title { font-size: 36px !important; }
  .picks .prod-grid,
  .picks .picks-widget-host > .prod-grid { grid-template-columns: 1fr 1fr !important; }
  .product-grid { grid-template-columns: 1fr 1fr !important; }
  .pdp-reco-grid { grid-template-columns: 1fr 1fr !important; }
  .cat-row { grid-template-columns: 1fr 1fr !important; }
  .brand-row { grid-template-columns: 1fr 1fr !important; }
  /* Tighter card content for narrow viewport */
  .picks .prod .prod-name,
  .product-card .product-name { font-size: 12px !important; line-height: 1.3 !important; }
  .picks .prod .prod-price,
  .product-card .product-price { font-size: 13px !important; }
  .product-card .product-brand { font-size: 10px !important; }
  .product-card .product-img { aspect-ratio: 1 / 1 !important; }
}

/* Touch devices wider than the phone breakpoint (tablets) also cannot hover, so
   pin the Add To Cart as a full-width bar below the card info there too, and drop
   the redundant view eye. Mirrors the phone treatment above. */
@media (hover: none) and (min-width: 769px) {
  .product-card { position: relative; padding-bottom: 44px; }
  .product-card .product-img { position: static; }
  .product-card .product-quick {
    position: absolute; bottom: 0; left: 0; right: 0; top: auto;
    transform: none; padding: 0; background: none; gap: 0;
  }
  .product-card .product-quick-btn.ghost { display: none; }
  .product-card .product-quick-btn { min-width: 0; height: 44px; border-radius: 0; }
}

/* ════════════════════════════════════════════════════════════
   FORM PAGES (login, register, contact, checkout, account)
   Repaint Sm/MVP light form panels in PF dark workshop palette.
   ════════════════════════════════════════════════════════════ */

/* Generic form fieldset / box / panel — kill light backgrounds */
.customer-account-login .block,
.customer-account-create .block,
.contactform-index-index .block,
.contactform-contact-index .block,
.contact-index-index .block,
.checkout-cart-index .cart-container,
.checkout-onepage-success .block,
.customer-account-edit .block,
.customer-account-index .block,
.customer-address-form .block,
.fieldset {
  background: var(--bg-slab) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--chalk) !important;
}
.block-title, .block-title strong, .form .legend, .fieldset > .legend {
  color: var(--white) !important;
  font-family: var(--font-stencil) !important;
  letter-spacing: 2px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.block .block-content { color: var(--chalk) !important; }
.block .field > .label, .field > .label, label.label, .field label {
  color: var(--steel-light) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.field.required > .label::after, .field._required > .label::after {
  color: var(--blue) !important;
}

/* Inputs: dark workshop slabs */
input[type="text"]:not(.pdp-qty-input),
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"]:not(.fitment-field input),
input[type="number"]:not(.pdp-qty-input),
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select {
  background-color: var(--bg-base) !important;
  border: 1px solid var(--concrete) !important;
  color: var(--white) !important;
  border-radius: 2px !important;
  font-family: var(--font-body) !important;
  height: 44px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
}
textarea { height: auto !important; padding: 12px 14px !important; min-height: 100px !important; }
input:focus, textarea:focus, select:focus {
  border-color: var(--blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59,125,255,0.15) !important;
}
input::placeholder, textarea::placeholder { color: var(--steel) !important; }

/* Header search: functional GET form (posts q to catalogsearch/result/), PF dark mono slab.
   .nav-right prefix lifts specificity above the global input[type=search] rule so height/font/padding win. */
.nav-search { display: flex; align-items: center; }
.nav-right .nav-search input[type="search"] {
  height: 36px !important;
  width: 220px !important;
  padding: 0 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  border: 1px solid var(--blue, #3B7DFF) !important;   /* blue stroke around the search box */
  border-radius: 2px 0 0 2px !important;
  border-right: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: width 0.2s ease;
}
.nav-right .nav-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nav-right .nav-search input[type="search"]::placeholder { color: var(--steel) !important; text-transform: uppercase; letter-spacing: 2px; }
.nav-right .nav-search input[type="search"]:focus { width: 240px !important; }
/* submit background (PF blue) + icon color come from the global primary-button rule; we only own geometry */
.nav-right .nav-search .nav-search-btn {
  height: 36px !important; width: auto !important; padding: 0 16px !important; margin-left: -1px; cursor: pointer;
  /* glass submit: slightly darker than the header bg + blue magnifier, blue stroke continues the box */
  background: rgba(0, 0, 0, 0.30) !important; color: var(--blue, #3B7DFF) !important;
  border: 1px solid var(--blue, #3B7DFF) !important; border-left: none !important;
  border-radius: 0 2px 2px 0 !important;
}
.nav-right .nav-search .nav-search-btn i { color: var(--blue, #3B7DFF) !important; }
.nav-right .nav-search .nav-search-btn:hover { background: rgba(59, 125, 255, 0.14) !important; }
@media (max-width: 768px) {
  .nav-right .nav-search input[type="search"] { height: 44px !important; width: 116px !important; }
  .nav-right .nav-search input[type="search"]:focus { width: 132px !important; }
  .nav-right .nav-search .nav-search-btn { height: 44px !important; width: 44px !important; padding: 0 !important; }
}

/* Primary form action button → PF blue */
.customer-account-login .action.primary,
.customer-account-create .action.primary,
.action.submit.primary,
button.action.login,
button.action.submit,
.contact-index-index .action.submit,
button[name="send"] {
  background: var(--blue) !important;
  color: var(--white-hot) !important;
  border: none !important;
  font-family: var(--font-stencil) !important;
  letter-spacing: 3px !important;
  height: 48px !important;
  padding: 0 28px !important;
  border-radius: 2px !important;
}
.action.primary:hover { background: var(--blue-hot) !important; }

/* Required field marker text */
.form .field.required > .label > span::after,
.field._required > .label > span::after { color: var(--blue) !important; }
.required-text, p.required {
  color: var(--blue) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}

/* Contact form / contactform-plus specific repaints */
.contact-index-index,
.contactform-index-index,
.contactform-contact-index {
  background: var(--bg-base) !important;
}
.contact-index-index .page-title,
.contactform-index-index .page-title {
  font-family: var(--font-stencil) !important;
  font-size: 48px !important;
  letter-spacing: 3px !important;
  color: var(--white) !important;
}
.contact-info, .contact-card, .contact-detail, .contact-row, .contact-block {
  background: var(--bg-slab) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--chalk) !important;
  padding: 24px !important;
  border-radius: 2px !important;
}
.contact-info a, .contact-block a, .contact-detail a,
[class*="contact"] a[href^="tel:"],
[class*="contact"] a[href^="mailto:"] {
  color: var(--blue-hot) !important;
}
.contact-info a:hover, .contact-block a:hover { color: var(--white-hot) !important; }
.contact-hours, .hours-block, .hours-table {
  background: var(--bg-base) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.contact-hours td, .contact-hours th, .hours-block td, .hours-block th {
  background: transparent !important;
  color: var(--chalk) !important;
  border-color: rgba(255,255,255,0.04) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

/* Cart page */
.checkout-cart-index .page-title { color: var(--white) !important; font-family: var(--font-stencil); letter-spacing: 3px; }
.checkout-cart-index .cart-empty,
.checkout-cart-index .cart-summary,
.checkout-cart-index .cart-container,
.checkout-cart-index .cart.table-wrapper {
  background: var(--bg-slab) !important;
  color: var(--chalk) !important;
}
.checkout-cart-index .cart-empty a { color: var(--blue-hot) !important; }

/* Customer account dashboard, address book, orders */
.account .page-title, .account .block-title, .account .block-title strong {
  color: var(--white) !important;
  font-family: var(--font-stencil) !important;
  letter-spacing: 2px !important;
}
.account .data.table,
.account .data.table thead,
.account .data.table tbody,
.account .data.table td,
.account .data.table th {
  background: var(--bg-slab) !important;
  color: var(--chalk) !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* Sm sidebar customer menu */
.account .sidebar-additional .block-collapsible-nav,
.account .block-collapsible-nav {
  background: var(--bg-slab) !important;
}
.account .block-collapsible-nav .item a {
  color: var(--chalk) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}
.account .block-collapsible-nav .item.current strong,
.account .block-collapsible-nav .item.current a {
  color: var(--blue-hot) !important;
  border-color: var(--blue) !important;
}

/* Generic page wrap dark — applies to all account/customer pages too */
.customer-account-login .page-main,
.customer-account-create .page-main,
.contact-index-index .page-main,
.contactform-index-index .page-main,
.checkout-cart-index .page-main,
.account .page-main {
  background: var(--bg-base) !important;
  padding: 32px 16px !important;
}

/* Hide MVP red phone/email lookups */
.contact-detail [style*="color:#e63"],
.contact-detail [style*="color:red"],
[class*="contact"] [style*="color:red"] { color: var(--blue-hot) !important; }

/* === ContactFormPlus "clean" skin → PF dark workshop === */
.contact-hero-clean {
  background: var(--bg-base) !important;
  color: var(--chalk) !important;
  padding: 48px 24px !important;
  text-align: center;
}
.contact-hero-clean .hero-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--blue-hot) !important;
}
.contact-hero-clean .hero-title-clean {
  font-family: var(--font-stencil) !important;
  color: var(--white) !important;
  font-size: clamp(36px, 8vw, 64px) !important;
  letter-spacing: 3px !important;
  margin: 12px 0 16px !important;
  text-transform: uppercase !important;
}
.contact-hero-clean .hero-subtitle-clean {
  color: var(--chalk) !important;
  font-size: 14px !important;
}
.contact-main-clean {
  background: var(--bg-base) !important;
  padding: 24px !important;
}
.contact-wrapper {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .contact-wrapper { grid-template-columns: 1.4fr 1fr; }
}
.form-section-clean, .info-section-clean,
.contact-actions-grid, .direct-email-section,
.hours-section, .info-card, .action-card-clean,
.info-block {
  background: var(--bg-slab) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 2px !important;
  padding: 24px !important;
}
/* Contact form card: distinct, defined slab so it separates from the page */
body.contact-index-index .form-section-clean {
  background: linear-gradient(180deg, #1C1C22 0%, #141418 100%) !important;
  border: 1px solid #2C313D !important;
  border-radius: 3px !important;
  padding: 36px !important;
}
.contact-form-clean .form-heading,
.contact-form-clean h2,
.form-heading {
  color: var(--white) !important;
  font-family: var(--font-stencil) !important;
  letter-spacing: 2px !important;
  font-size: 26px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}
.contact-form-clean .form-subheading,
.form-subheading {
  color: #AEB2BC !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  margin-bottom: 22px !important;
}
.contact-form-clean .field,
.contact-form-clean .field-row {
  margin-bottom: 16px;
}
.contact-form-clean .field label,
.contact-form-clean label,
.contact-form-clean .field > .label {
  color: #D4D7DE !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.contact-form-clean input[type="text"],
.contact-form-clean input[type="email"],
.contact-form-clean input[type="tel"],
.contact-form-clean input[type="search"],
.contact-form-clean input[type="number"],
.contact-form-clean select,
.contact-form-clean textarea {
  background-color: var(--bg-base) !important;
  border: 1px solid var(--concrete) !important;
  color: var(--white) !important;
  border-radius: 2px !important;
}
.contact-form-clean button[type="submit"],
.contact-form-clean .submit-btn,
.contact-form-clean .action.submit {
  background: linear-gradient(135deg, #3B7DFF 0%, #255FE6 100%) !important;
  color: var(--white-hot) !important;
  font-family: var(--font-stencil) !important;
  font-size: 17px !important;
  letter-spacing: 2px !important;
  height: 54px !important;
  padding: 0 32px !important;
  border-radius: 3px !important;
  border: none !important;
  width: 100% !important;
  box-shadow: 0 0 0 1px rgba(59,125,255,0.5), 0 14px 36px rgba(59,125,255,0.28) !important;
  transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease !important;
}
.contact-form-clean button[type="submit"]:hover {
  background: linear-gradient(135deg, #5B9AFF 0%, #3B7DFF 100%) !important;
  box-shadow: 0 0 0 1px rgba(91,154,255,0.6), 0 16px 44px rgba(59,125,255,0.38) !important;
  transform: translateY(-1px) !important;
}

/* Action cards (CALL US / WHATSAPP / EMAIL / FAQ) */
.contact-actions-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.action-card-clean {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 18px 12px !important;
  text-decoration: none !important;
  color: var(--chalk) !important;
  background: var(--bg-slab) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  transition: border-color 0.2s, background 0.2s;
}
.action-card-clean:hover { border-color: var(--blue) !important; background: var(--bg-bay) !important; }
.action-card-clean .action-icon,
.action-card-clean i {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(59,125,255,0.12);
  border-radius: 50%;
  color: var(--blue-hot) !important;
  font-size: 14px !important;
  margin-bottom: 10px;
}
.action-card-clean .action-title {
  font-family: var(--font-stencil) !important;
  letter-spacing: 1.5px !important;
  color: var(--white) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
}
.action-card-clean .action-subtitle,
.action-card-clean .action-detail {
  color: var(--steel-light) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
}

/* Direct email / hours */
.direct-email-section, .hours-section, .info-card, .info-block {
  margin-bottom: 16px;
}
.direct-email-section h2, .hours-section h2,
.info-card h2, .info-block h2 {
  color: var(--white) !important;
  font-family: var(--font-stencil) !important;
  letter-spacing: 2px !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.direct-email-section a, .info-card a, .info-block a {
  color: var(--blue-hot) !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  word-break: break-all !important;
}
.direct-email-section .email-label,
.info-block .label,
.info-card .label {
  color: var(--steel) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 4px;
  display: block;
}
.hours-section table, .hours-section .hours-table {
  width: 100% !important;
  background: transparent !important;
}
.hours-section td, .hours-section th, .hours-section tr {
  background: transparent !important;
  color: var(--chalk) !important;
  border-color: rgba(255,255,255,0.04) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  padding: 6px 0 !important;
}

/* === Contact page: Direct Email directory (different classes) === */
.email-directory {
  background: var(--bg-slab) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 2px !important;
  padding: 20px !important;
  margin-top: 16px !important;
}
.email-directory-heading {
  color: var(--white) !important;
  font-family: var(--font-stencil) !important;
  letter-spacing: 2px !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.email-directory-item {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.email-directory-item:last-child { border-bottom: none !important; }
.email-directory-item .email-dept {
  color: var(--steel-light) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 3px !important;
}
.email-directory-item a {
  color: var(--blue-hot) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  word-break: break-all !important;
}
.email-directory-item a:hover { color: var(--white-hot) !important; }

/* === Contact form — high specificity override of mvp-contact-premium-v2.css === */
body.contact-index-index .contact-form-clean input[type="text"]:not(.pdp-qty-input),
body.contact-index-index .contact-form-clean input[type="email"],
body.contact-index-index .contact-form-clean input[type="tel"],
body.contact-index-index .contact-form-clean input[type="search"],
body.contact-index-index .contact-form-clean input[type="number"],
body.contact-index-index .contact-form-clean textarea,
body.contact-index-index .form-field-clean input:not([type="checkbox"]),
body.contact-index-index .form-field-clean textarea,
body.contact-index-index .contact-form-clean select,
body.contact-index-index .form-field-clean select,
.contactform-index-index .contact-form-clean input[type="text"],
.contactform-index-index .contact-form-clean input[type="email"],
.contactform-index-index .contact-form-clean input[type="tel"],
.contactform-index-index .contact-form-clean textarea,
.contactform-index-index .form-field-clean input:not([type="checkbox"]),
.contactform-index-index .form-field-clean textarea,
.contactform-index-index .contact-form-clean select,
.contactform-index-index .form-field-clean select {
  background-color: #0E0E12 !important;
  border: 1px solid #4C5260 !important;
  color: #EAEAEF !important;
  font-family: 'Outfit', 'Barlow Condensed', sans-serif !important;
  height: 48px !important;
  font-size: 15px !important;
  padding: 0 16px !important;
  border-radius: 3px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}
body.contact-index-index .contact-form-clean textarea,
body.contact-index-index .form-field-clean textarea,
.contactform-index-index .contact-form-clean textarea {
  height: auto !important;
  min-height: 128px !important;
  padding: 14px 16px !important;
  line-height: 1.6 !important;
  resize: none !important;
}
body.contact-index-index .form-field-clean input::placeholder,
body.contact-index-index .form-field-clean textarea::placeholder,
.contactform-index-index .form-field-clean input::placeholder,
.contactform-index-index .form-field-clean textarea::placeholder {
  color: #8A90A0 !important;
  opacity: 1 !important;
}
body.contact-index-index .form-field-clean input:focus,
body.contact-index-index .form-field-clean textarea:focus,
body.contact-index-index .form-field-clean select:focus,
.contactform-index-index .form-field-clean input:focus,
.contactform-index-index .form-field-clean textarea:focus,
.contactform-index-index .form-field-clean select:focus {
  border-color: #3B7DFF !important;
  background: #15151B !important;
  background-color: #15151B !important;
  box-shadow: 0 0 0 3px rgba(59,125,255,0.22) !important;
}

/* ════════════════════════════════════════════════════════════════════
   PF — Module-output fixes (added from QA pass 20260527-085321)
   ════════════════════════════════════════════════════════════════════ */

/* form-pf-bar.phtml emits .nlh-ymm > form.nlh-ymm__form > .fitment-field
   inside the .fitment-bar-fields wrapper. Use display:contents on the
   intermediate wrappers so the .fitment-field children flex correctly
   alongside the .fitment-go button defined in the CMS markup.            */
.fitment-bar-fields > .nlh-ymm.pf-fitment-form,
.fitment-bar-fields > .nlh-ymm.pf-fitment-form > .nlh-ymm__form {
  display: contents;
}
/* The module template includes a hidden garage button — keep hidden.    */
.fitment-bar-fields .nlh-ymm__garage { display: none !important; }
/* And the .nlh-ymm__select needs to match .fitment-field select.        */
.fitment-bar-fields .nlh-ymm__select {
  width: 100%; height: 44px; padding: 0 32px 0 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 2px;
  color: #EAEAEF;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.fitment-bar-fields .nlh-ymm__select:focus {
  border-color: #FFFFFF;
  background-color: rgba(0,0,0,0.5);
  outline: none;
}
.fitment-bar-fields .nlh-ymm__select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Dark-theme the Fitments nlh-ymm-card if it appears anywhere
   (e.g. search results, header drawer). Prevents the white panel
   bleed-through flagged by the QA review.                              */
.nlh-ymm-card,
.nlh-ymm-card__shell,
.nlh-ymm__form {
  background: #15161d !important;
  color: #EAEAEF !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.nlh-ymm-card__eyebrow,
.nlh-ymm-card__title,
.nlh-ymm-card__field-label {
  color: #EAEAEF !important;
  font-family: 'Space Mono', monospace;
  letter-spacing: 1.5px;
}
.nlh-ymm-card__field-label { color: rgba(255,255,255,0.65) !important; }
.nlh-ymm-card .nlh-ymm__select,
.nlh-ymm-card select {
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #EAEAEF !important;
  height: 44px !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 12px !important;
}
.nlh-ymm-card__btn--apply,
.nlh-ymm__apply {
  background: #3B7DFF !important;
  color: #FFFFFF !important;
  border-color: #3B7DFF !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 3px !important;
}
.nlh-ymm-card__btn--apply:hover,
.nlh-ymm__apply:hover { background: #5B9AFF !important; }

/* Suppress the legacy white "filter by vehicle" toolbar bar that Fitments
   places at the bottom of category listings on layered nav pages.       */
.nl-fitment-bar,
.nextlevel-fitments-toolbar,
.fitment-bottom-bar {
  background: #15161d !important;
  color: #EAEAEF !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  padding: 18px 24px !important;
  border-radius: 4px !important;
}
.nl-fitment-bar select,
.nextlevel-fitments-toolbar select,
.fitment-bottom-bar select {
  background: rgba(0,0,0,0.35) !important;
  color: #EAEAEF !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  height: 44px !important;
}

/* PDP "Add to Cart" — flagged CRITICAL by QA: was small white text.
   Restore the full-width blue CTA expected by the design system.       */
.product-info-main .box-tocart,
.catalog-product-view .box-tocart {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-top: 18px !important;
}
.product-info-main .box-tocart .field.qty,
.catalog-product-view .box-tocart .field.qty {
  flex: 0 0 auto !important;
}
.product-info-main .box-tocart .actions,
.catalog-product-view .box-tocart .actions {
  flex: 1 1 auto !important;
  display: flex !important;
}
.product-info-main .box-tocart .action.tocart,
.catalog-product-view .box-tocart .action.tocart,
.product-info-main .box-tocart button.action.tocart,
.catalog-product-view .box-tocart button.action.tocart {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 220px !important;
  height: 58px !important;
  background: #3B7DFF !important;
  border: 1px solid #3B7DFF !important;
  color: #FFFFFF !important;
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.product-info-main .box-tocart .action.tocart:hover,
.catalog-product-view .box-tocart .action.tocart:hover {
  background: #5B9AFF !important;
}

/* Product image placeholder: drop raw SKU fallback text that was
   rendering as `[ PHRPHRA01011082.P ]` in cards with no image.         */
.products-grid .product-item-photo .sku-placeholder,
.product-image-photo[alt^="["],
.pf-prod-image .sku-fallback {
  display: none !important;
}
.products-grid .product-item-photo,
.pf-prod-image,
.prod-img {
  background: #1A1A1F !important;
}

/* Make the category-page "Active Vehicle" bar (theme-level) look
   crisper for the empty/no-selection state.                             */
.fitment-bar .fitment-bar-change {
  text-decoration: none;
}


/* ════════════════════════════════════════════════════════════════════
   Legacy-CMS bleed protection (added from QA pass)
   The about-us, customer-service, bfs-test, daily-deals CMS pages all
   contain embedded <style> blocks with MVP/Luma branding. We can't
   strip those styles from CSS, but we can paint over the worst of it
   so the page reads PF-dark instead of MVP-light.
   ════════════════════════════════════════════════════════════════════ */
.cms-about-us .page-main,
.cms-customer-service .page-main,
.cms-bfs-test .page-main,
.cms-daily-deals .page-main {
  background: #111113 !important;
  color: #C8C8D0 !important;
}
.cms-about-us .page-main *:not(a):not(button):not(input):not(textarea):not(select),
.cms-customer-service .page-main *:not(a):not(button):not(input):not(textarea):not(select) {
  /* Block legacy white backgrounds on text containers */
  background-color: transparent !important;
}
.cms-about-us .page-main h1,
.cms-about-us .page-main h2,
.cms-about-us .page-main h3,
.cms-customer-service .page-main h1,
.cms-customer-service .page-main h2,
.cms-customer-service .page-main h3 {
  color: #EAEAEF !important;
}
.cms-about-us .page-main p,
.cms-customer-service .page-main p,
.cms-customer-service .page-main li {
  color: #C8C8D0 !important;
}
/* Replace MVP red accents with PF blue wherever possible */
.cms-about-us [style*="color:#ef3340"],
.cms-about-us [style*="color: #ef3340"],
.cms-about-us [style*="color:#EF3340"] { color: #3B7DFF !important; }
.cms-about-us [style*="background:#ef3340"],
.cms-about-us [style*="background-color:#ef3340"] { background-color: #3B7DFF !important; }
/* Hide broken image frames so the page doesn't show empty red rectangles */
.cms-about-us img:not([src]),
.cms-about-us img[src=""],
.cms-customer-service img:not([src]),
.cms-customer-service img[src=""] { display: none !important; }
/* Collapse huge blank spacers in the bfs-test page */
.cms-bfs-test .page-main .bf-spacer,
.cms-bfs-test .page-main [class*="spacer"],
.cms-bfs-test .page-main [style*="height: 2"][style*="px"],
.cms-bfs-test .page-main [style*="min-height: 2"] {
  min-height: 80px !important;
  height: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PDP description bleed protection
   Legacy product descriptions ship an embedded <style> styling .mvp-phrd
   with light-theme colors (#444/#555 body, #222 bold, #111 headings, #c00
   red accents). On the PF-dark tab panel that is near-invisible. Repaint to
   readable values; the embedded rules aren't !important so we win. */
.catalog-product-view .pdp-description,
.catalog-product-view .mvp-phrd,
.catalog-product-view .mvp-phrd p,
.catalog-product-view .mvp-phrd li,
.catalog-product-view .mvp-phrd td,
.catalog-product-view .mvp-phrd span,
.catalog-product-view .mvp-phrd h5 {
  color: #C8C8D0 !important;
}
.catalog-product-view .mvp-phrd h2,
.catalog-product-view .mvp-phrd h3,
.catalog-product-view .mvp-phrd h4,
.catalog-product-view .pdp-description h3 {
  color: #EAEAEF !important;
}
.catalog-product-view .mvp-phrd strong,
.catalog-product-view .mvp-phrd b,
.catalog-product-view .mvp-phrd p > strong:first-child {
  color: #FFFFFF !important;
}
/* legacy dark-red (#c00) accent headings → PF blue so they read on dark */
.catalog-product-view .mvp-phrd h2:first-of-type + h2,
.catalog-product-view .mvp-phrd h4 {
  color: var(--blue) !important;
}
.catalog-product-view .mvp-phrd *:not(a):not(button) {
  background-color: transparent !important;
}

/* My Garage sidebar (FitmentsGarageSidebar) — convert from fixed-overlay
   to in-flow drawer on search results so it doesn't clip product grid.
   Flagged CRITICAL by QA on /catalogsearch/result. */
.catalogsearch-result-index .nl-garage-sidebar,
.catalogsearch-result-index .nlh-garage-sidebar {
  position: relative !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 24px 0 !important;
}
/* On larger viewports, restore as a left rail rather than overlap */
@media (min-width: 1024px) {
  .catalogsearch-result-index .nl-garage-sidebar,
  .catalogsearch-result-index .nlh-garage-sidebar {
    position: sticky !important;
    top: 96px !important;
    max-width: 280px !important;
    float: left !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PF SEARCH RESULTS (catalogsearch_result_index)
   The search page renders PF list-cards (PF product/list.phtml) inside the
   inherited Bootstrap/SmartWave shell (.columns > .container > .row-content
   > .col-main + .col-sidebar). The cards + grid pick up the GLOBAL PF rules,
   but the surrounding chrome (page H1, the stock toolbar modes/sorter/
   limiter, the .pages pager, and the .col-sidebar layered nav + compare
   block) was never skinned for PF, so it rendered as light-on-dark default
   markup: faint H1, plain-text "View as Grid List", a vertical text-wall
   pager. This block re-skins ONLY that chrome to the category aesthetic,
   scoped to .catalogsearch-result-index. CSS only: no template/layout/data
   changes. The product cards, fit badges, and the FITS-YOUR-VEHICLE banner
   are intentionally untouched - they already render via the global rules.
   ═══════════════════════════════════════════════════════════════════ */

/* — Page H1: mirror .cat-header-title (stencil, uppercase). On non-category
     routes title.phtml leaves the wrapper as a plain page title. — */
.catalogsearch-result-index .col-main > .page-title-wrapper,
.catalogsearch-result-index .page-title-wrapper.nlh-ymm-title-wrapper {
  padding: 22px 0 18px;
  margin: 0 0 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.catalogsearch-result-index .page-title-wrapper .page-title { margin: 0; }
.catalogsearch-result-index .page-title-wrapper .page-title .base {
  font-family: var(--font-stencil);
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.05;
}

/* — Layout: keep the inherited float columns (sidebar left / grid right);
     just give them breathing room + a divider like .cat-layout. — */
.catalogsearch-result-index .columns .col-sidebar {
  padding: 26px 24px 26px 0;
  border-right: 1px solid rgba(255,255,255,0.04);
}
.catalogsearch-result-index .columns .col-main { padding-bottom: 28px; }

/* — Layered-nav sidebar (.block.filter "SHOP BY" + facets) → .filter-group — */
.catalogsearch-result-index .sidebar .block.filter { margin-bottom: 28px; }
.catalogsearch-result-index .sidebar .block-title.filter-title {
  margin: 0 0 16px; padding: 0; border: 0;
}
.catalogsearch-result-index .sidebar .block-title.filter-title strong {
  font-family: var(--font-stencil); font-size: 17px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--white); font-weight: 400;
}
.catalogsearch-result-index .sidebar .filter-options { margin: 0; }
.catalogsearch-result-index .sidebar .filter-options-item {
  margin: 0 0 24px; padding: 0; border: 0;
}
.catalogsearch-result-index .sidebar .filter-options-title {
  font-family: var(--font-stencil); font-size: 15px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--white);
  padding: 0 0 12px; margin: 0 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative; cursor: pointer;
}
.catalogsearch-result-index .sidebar .filter-options-content { margin: 0; padding: 0; }
.catalogsearch-result-index .sidebar .filter-options-content .items,
.catalogsearch-result-index .sidebar .filter-options-content ol,
.catalogsearch-result-index .sidebar .filter-options-content ul {
  list-style: none; margin: 0; padding: 0;
}
.catalogsearch-result-index .sidebar .filter-options-content .item { margin: 0; padding: 0; }
.catalogsearch-result-index .sidebar .filter-options-content a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; text-decoration: none;
  font-family: var(--font-body); font-size: 13px; color: var(--steel-light);
  transition: color .15s;
}
.catalogsearch-result-index .sidebar .filter-options-content a:hover { color: var(--white); }
.catalogsearch-result-index .sidebar .filter-options-content .count {
  font-family: var(--font-mono); font-size: 10px; color: var(--concrete-light);
}
.catalogsearch-result-index .sidebar .filter-options-content .count .filter-count-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* Active filters ("Now Shopping by") + clear */
.catalogsearch-result-index .sidebar .filter-current .block-subtitle,
.catalogsearch-result-index .sidebar .filter-current .filter-current-subtitle {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--steel); display: block; margin-bottom: 10px;
}
.catalogsearch-result-index .sidebar .filter-current .item { padding: 4px 0; font-size: 12px; color: var(--steel-light); }
.catalogsearch-result-index .sidebar .filter-current .action.remove { color: var(--steel); }
.catalogsearch-result-index .sidebar .filter-actions a,
.catalogsearch-result-index .sidebar .filter-clear {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--steel);
}
.catalogsearch-result-index .sidebar .filter-actions a:hover { color: var(--red); }

/* Compare block: hide entirely while empty (Knockout flags .block-content.no-display
   when compareProducts().count === 0); skin the heading for when it does populate. */
.catalogsearch-result-index .sidebar .block-compare:has(.block-content.no-display) {
  display: none;
}
.catalogsearch-result-index .sidebar .block-compare { margin-top: 28px; }
.catalogsearch-result-index .sidebar .block-compare > strong,
.catalogsearch-result-index .sidebar .block-compare .block-title strong {
  display: block; margin: 0 0 14px;
  font-family: var(--font-stencil); font-size: 15px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--white); font-weight: 400;
}
.catalogsearch-result-index .sidebar .block-compare .empty {
  font-family: var(--font-mono); font-size: 11px; color: var(--steel);
}

/* — Stock toolbar → PF toolbar bar (mirror .toolbar / .toolbar-* ) — */
.catalogsearch-result-index .toolbar-products {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  margin: 0 0 24px; padding: 0 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.catalogsearch-result-index .toolbar-products .toolbar-amount {
  order: 1; position: static; padding: 0; margin: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .5px; color: var(--steel);
}
.catalogsearch-result-index .toolbar-products .toolbar-amount .toolbar-number { color: var(--chalk); }

/* View-as toggle (.modes) → bordered mono buttons like .toolbar-view */
.catalogsearch-result-index .toolbar-products .modes { order: 2; display: flex; gap: 4px; }
.catalogsearch-result-index .toolbar-products .modes-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.catalogsearch-result-index .toolbar-products .modes-mode {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 32px; padding: 0 10px;
  border: 1px solid var(--concrete); border-radius: 2px; background: transparent;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--steel); text-decoration: none; transition: all .2s;
}
.catalogsearch-result-index .toolbar-products .modes-mode:hover { border-color: var(--steel-light); color: var(--white); }
.catalogsearch-result-index .toolbar-products .modes-mode.active {
  border-color: var(--blue); color: var(--blue); background: var(--blue-dim);
}
.catalogsearch-result-index .toolbar-products .modes-mode:before,
.catalogsearch-result-index .toolbar-products .modes-mode:after { content: none; } /* drop sprite glyph */

/* Sorter + limiter pushed right */
.catalogsearch-result-index .toolbar-products .toolbar-sorter {
  order: 3; margin-left: auto; display: flex; align-items: center; gap: 8px;
}
.catalogsearch-result-index .toolbar-products .field.limiter {
  order: 4; display: flex; align-items: center; gap: 8px; margin: 0;
}
.catalogsearch-result-index .toolbar-products .sorter-label,
.catalogsearch-result-index .toolbar-products .limiter .label,
.catalogsearch-result-index .toolbar-products .limiter-text {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel);
}
.catalogsearch-result-index .toolbar-products select.sorter-options,
.catalogsearch-result-index .toolbar-products .limiter-options {
  background: var(--bg-slab); border: 1px solid var(--concrete); border-radius: 2px;
  color: var(--white); font-family: var(--font-mono); font-size: 10px; padding: 6px 28px 6px 10px; outline: none;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B6B78' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.catalogsearch-result-index .toolbar-products select.sorter-options:focus,
.catalogsearch-result-index .toolbar-products .limiter-options:focus { border-color: var(--blue); }
.catalogsearch-result-index .toolbar-products .sorter-action {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--concrete); border-radius: 2px; color: var(--steel); transition: all .2s; text-decoration: none;
}
.catalogsearch-result-index .toolbar-products .sorter-action:hover { border-color: var(--blue); color: var(--blue); }
.catalogsearch-result-index .toolbar-products .sorter-action:before { content: none; } /* drop sprite glyph */
.catalogsearch-result-index .toolbar-products .sorter-action span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.catalogsearch-result-index .toolbar-products .sorter-action.sort-desc:after { content: '\2193'; }
.catalogsearch-result-index .toolbar-products .sorter-action.sort-asc:after  { content: '\2191'; }

/* — Pager (.pages) → horizontal, mirror .pf-pager .pages — */
.catalogsearch-result-index .toolbar-products .pages { display: none; width: 100%; }
.catalogsearch-result-index .products.wrapper ~ .toolbar-products .pages {
  display: flex; justify-content: center;
}
.catalogsearch-result-index .pages .pages-label,
.catalogsearch-result-index .pages .label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.catalogsearch-result-index .pages .items {
  display: flex; flex-wrap: wrap; gap: 3px; list-style: none; margin: 0; padding: 0; justify-content: center;
}
.catalogsearch-result-index .pages .item { margin: 0; }
.catalogsearch-result-index .pages .page,
.catalogsearch-result-index .pages .action {
  display: flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px;
  background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.05); color: var(--steel-light);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-decoration: none; transition: all .2s;
}
.catalogsearch-result-index .pages .item.current .page {
  background: var(--blue) !important; border-color: var(--blue) !important; color: var(--white-hot) !important;
}
.catalogsearch-result-index .pages a.page:hover,
.catalogsearch-result-index .pages .action:hover { border-color: var(--blue); color: var(--white); }
.catalogsearch-result-index .pages .action:before { content: none; }

/* — Bottom toolbar: show only the pager (hide duplicate controls), centered — */
.catalogsearch-result-index .products.wrapper ~ .toolbar-products {
  border-bottom: 0; border-top: 1px solid rgba(255,255,255,0.04);
  justify-content: center; margin: 32px 0 0; padding: 28px 0 0;
}
.catalogsearch-result-index .products.wrapper ~ .toolbar-products .toolbar-amount,
.catalogsearch-result-index .products.wrapper ~ .toolbar-products .modes,
.catalogsearch-result-index .products.wrapper ~ .toolbar-products .toolbar-sorter,
.catalogsearch-result-index .products.wrapper ~ .toolbar-products .field.limiter { display: none; }

/* — Empty results message — */
.catalogsearch-result-index .message.notice,
.catalogsearch-result-index .message.empty {
  background: var(--bg-slab); border: 1px solid rgba(255,255,255,0.04); color: var(--steel-light);
  font-family: var(--font-mono); font-size: 12px; padding: 18px 20px;
}

/* — Responsive: stack columns; keep facets visible (don't hide like category) — */
@media (max-width: 1024px) {
  .catalogsearch-result-index .columns .col-sidebar {
    padding: 0 0 24px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.04); margin-bottom: 24px;
  }
}
@media (max-width: 640px) {
  .catalogsearch-result-index .toolbar-products { gap: 12px; }
  .catalogsearch-result-index .toolbar-products .toolbar-sorter { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   MINICART BUTTON — neutralize Magento orange-button styling so the
   showcart anchor inherits the PF .nav-btn dark-mono look.
   CSS-only; no template/JS edits. Targets the rendered DOM of
   <div class="nav-btn nav-btn-cart"> → .minicart-wrapper → .action.showcart
   ═════════════════════════════════════════════════════════════════ */

/* Fixed width so opening the cart can NEVER reflow the nav. The counter
   re-renders ~2px wider on open (customer-data settle); a fixed shell
   absorbs that inside, keeping logo + links + right-cluster pinned. */
.nav-btn-cart {
  width: 72px !important;               /* generous padding around the cart icon + count; fixed so opening can't reflow the nav */
  padding-left: 14px !important;
  padding-right: 14px !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  /* NOTE: no overflow:hidden here — the minicart dropdown is an absolute CHILD of
     .nav-btn-cart, so clipping the button clips the whole panel. Fixed width above
     already stops the button from growing on open. */
}

/* The minicart-wrapper is a passive container; fill the .nav-btn shell */
.nav-btn-cart .minicart-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

/* FA bag icon at the start of the cart button — the template doesn't
   emit one here, so we synthesize it via ::before to match the sibling
   nav-btn icons (Search, Account). */
.nav-btn-cart .action.showcart::before {
  content: '\f07a' !important;                  /* fa-cart-shopping — always a cart, closed AND open (!important beats Luma's active-state icon swap) */
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
  font-size: 13px;
  color: inherit;
  display: inline-block;
  line-height: 1;
  /* no margin-right: the .action.showcart flex gap (6px) already spaces icon↔count */
}

/* Showcart anchor: strip Magento's default orange-button chrome and
   inherit the PF .nav-btn typography/color. The outer .nav-btn-cart
   already provides the border, padding, and height. */
.nav-btn-cart .action.showcart,
.nav-btn-cart .action.showcart:hover,
.nav-btn-cart .action.showcart:focus,
.nav-btn-cart .action.showcart:active,
.nav-btn-cart .action.showcart:visited {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  border-radius: 0 !important;
}

/* Hide the "My Cart" text wrapper entirely — it renders on open (active state) and
   grows the button, shoving the nav. Icon + count digit are all we want. */
.nav-btn-cart .action.showcart .text {
  display: none !important;
}
.nav-btn-cart .action.showcart .cart-label {
  font: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* Hide the redundant "X items" textual labels and the inline subtotal
   amount — the counter digit alone is enough on the button. */
.nav-btn-cart .action.showcart .text > .counter-label,
.nav-btn-cart .counter.qty > .counter-label,
.nav-btn-cart .price-minicart { display: none !important; }

/* The Magento counter pill — this is where the orange background lives.
   Strip everything; render the digit inline with PF blue accent. */
.nav-btn-cart .counter.qty {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 0 4px !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  font: inherit !important;
  color: inherit !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow: none !important;
}

/* Magento marks the counter .empty when cart count is 0 — hide entirely */
.nav-btn-cart .counter.qty.empty { display: none !important; }

/* Active count digit — PF blue accent */
.nav-btn-cart .counter-number {
  color: var(--blue) !important;
  font-family: var(--font-mono) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  background: transparent !important;
  padding: 0 !important;
  display: inline-block !important;
}

/* Mobile compact (<=1024px): icon only — the existing rule at line 1993
   hides .counter-number; extend it to hide the cart-label text too so
   the 36×36 square button shows just the bag icon. */
@media (max-width: 1024px) {
  .nav-right .nav-btn-cart .action.showcart .text,
  .nav-right .nav-btn-cart .cart-label { display: none !important; }
  .nav-right .nav-btn-cart .action.showcart {
    width: 100% !important;
    height: 100% !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .nav-right .nav-btn-cart .action.showcart::before {
    margin-right: 0 !important;
    font-size: 14px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   FITMENT-BAR SELECTORS — opaque dark pills with visible blue gaps.
   Issue: the widget output (.nlh-ymm.pf-fitment-form > form.nlh-ymm__form)
   had semi-transparent selects (rgba(10,12,18,0.72)) so the blue bar
   bled through, making the 8px gaps invisible and the selects "murky".
   Fix: opaque var(--bg-base) background, 10px gap on the form (the actual
   flex container — .fitment-bar-fields has only one child, the wrapper).
   Cover both possible wrapper structures (with or without the .nlh-ymm
   intermediate div) with high-specificity selectors.
   ═════════════════════════════════════════════════════════════════ */
.fitment-bar-fields > .nlh-ymm,
.fitment-bar-fields > form.nlh-ymm__form,
.fitment-bar-fields .nlh-ymm > form.nlh-ymm__form,
.fitment-bar-fields form.nlh-ymm__form {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Specificity bump: needs to beat existing
   `.fitment-bar .nlh-ymm .nlh-ymm__select` (0,3,0) at line ~1326
   which sets bg to rgba(10,12,18,0.72). Use compound selector
   `.fitment-bar .fitment-bar-fields .nlh-ymm__select` (0,3,0) — equal
   specificity but appears LATER so wins the cascade tie. */
.fitment-bar .fitment-bar-fields .nlh-ymm__select,
.fitment-bar-fields .nlh-ymm .nlh-ymm__select {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 32px 0 14px !important;
  margin: 0 !important;
  background-color: var(--bg-base) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 2px !important;
  color: var(--white) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
  box-shadow: none !important;
}

.fitment-bar .fitment-bar-fields .nlh-ymm__select:focus,
.fitment-bar-fields .nlh-ymm .nlh-ymm__select:focus {
  border-color: var(--white-hot) !important;
  background-color: rgba(0,0,0,0.85) !important;
}

.fitment-bar .fitment-bar-fields .nlh-ymm__select:disabled,
.fitment-bar-fields .nlh-ymm .nlh-ymm__select:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* FIND PARTS button — match mockup line 235: dark bg, white text.
   (User prompt suggested var(--white) bg but explicitly corrected to use
    the mockup spec; mockup says background: var(--bg-base) color: var(--white-hot)) */
.fitment-bar-fields .nlh-ymm__apply,
.fitment-bar-fields .fitment-go,
.fitment-bar-fields button.nlh-ymm__apply,
.fitment-bar-fields button.fitment-go {
  height: 44px !important;
  padding: 0 32px !important;
  background: var(--bg-base) !important;
  color: var(--white-hot) !important;
  font-family: var(--font-stencil) !important;
  font-size: 15px !important;
  letter-spacing: 3px !important;
  border: 0 !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s !important;
}

.fitment-bar-fields .nlh-ymm__apply:hover,
.fitment-bar-fields .fitment-go:hover,
.fitment-bar-fields button.nlh-ymm__apply:hover,
.fitment-bar-fields button.fitment-go:hover {
  background: var(--bg-raised) !important;
  color: var(--white-hot) !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PLATFORMS — anchor-element support + electric-blue tint overlay.
   CMS markup uses <a class="plat"> (semantic upgrade from mockup's
   <div class="plat">). The existing .plat rules in pf-theme.css already
   style position/overflow/grid/.plat-shop-bar/.plat-info/etc. — these
   appended rules only add link-decoration removal and a subtle blue
   tint overlay so plain car photos pick up the PF brand color until
   electric-blue treated images are produced (see PLATFORMS-IMAGE-PROMPTS.md).
   ═════════════════════════════════════════════════════════════════ */
a.plat,
.plat-grid > a.plat {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}
a.plat:hover,
a.plat:focus,
a.plat:visited { text-decoration: none !important; color: inherit !important; }

/* Subtle electric-blue tint over the background image so plain photos
   pick up the PF accent. Sits BELOW the .plat-overlay (which adds the
   bottom-gradient darkening for text legibility). */
.plat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59,125,255,0.18) 0%, transparent 50%, rgba(59,125,255,0.10) 100%);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Z-index stack so text + shop-bar sit above the tint and overlay */
.plat > .plat-overlay { z-index: 2; }
.plat > .plat-id      { z-index: 3; }
.plat > .plat-info    { z-index: 3; }
.plat > .plat-shop-bar { z-index: 4; }

/* ═══════════════════════════════════════════════════════════════════
   SHOP BY DEPARTMENT — horizontal carousel + VIEW ALL pulse cue.
   Overrides the mockup-baseline `.cat-row { display: grid; ... }` at
   line ~172 with a flex/scroll-snap carousel so the 12 dynamically-
   queried cards scroll horizontally and the user can swipe through them.
   When they reach the right edge, JS toggles `.pulse` on the
   `.section-more` "View All" link as a visual nudge.
   ═════════════════════════════════════════════════════════════════ */
.categories .cat-row {
  display: flex !important;
  gap: 1px !important;
  grid-template-columns: none !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--blue) transparent;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.categories .cat-row::-webkit-scrollbar { height: 6px; }
.categories .cat-row::-webkit-scrollbar-track { background: transparent; }
.categories .cat-row::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 3px; }
.categories .cat-row::-webkit-scrollbar-thumb:hover { background: var(--blue-hot); }
.categories .cat-row > .cat {
  scroll-snap-align: start;
  flex: 0 0 220px;
  min-width: 220px;
}

/* VIEW ALL link pulse animation when the user has scrolled to the carousel's end */
.categories .section-head .section-more.pulse {
  animation: viewAllPulse 1.2s ease-in-out infinite;
}
@keyframes viewAllPulse {
  0%, 100% { color: var(--steel-light); text-shadow: none; }
  50% { color: var(--blue-hot); text-shadow: 0 0 12px rgba(91,154,255,0.6); }
}

/* ═══════════════════════════════════════════════════════════════════
   STAFF PICKS / TESTED INSTALLED TRUSTED — product card grid + tabs.
   Ported from mockup.html lines 318-371 (the .prod-* rules) and
   renamed to .picks-* per the spec, with .picks-grid added so the
   4-card row sits on a stable grid regardless of viewport.
   ═════════════════════════════════════════════════════════════════ */
.picks-panel { display: none; }
.picks-panel.active { display: block; }

.picks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.picks-card {
  background: var(--bg-slab);
  border: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}
.picks-card:hover {
  border-color: var(--blue);
  box-shadow: 0 0 24px rgba(59,125,255,0.18);
}
.picks-card:hover .picks-img { transform: scale(1.04); }

.picks-img {
  height: 200px;
  background: var(--bg-steel);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease;
}
.picks-img::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--blue);
  opacity: 0;
  top: 0;
}
.picks-card:hover .picks-img::after {
  opacity: 0.5;
  animation: scanPick 1.5s linear infinite;
}
@keyframes scanPick { from { top: 0; } to { top: 100%; } }

/* Scope the absolute-positioned badge to CARDS only — line 184's eyebrow
   .picks-badge (the "STAFF PICKS · RYAN SCOTT" pill in the section-head)
   uses inline-flex layout and was being overridden when this rule applied
   to bare .picks-badge, causing the eyebrow to fly to the top-left of the
   section-head and overlap the title. */
.picks-card .picks-badge,
.picks-img .picks-badge {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 3px 9px;
  z-index: 2;
  text-transform: uppercase;
  /* Reset eyebrow-rule properties so the card badge isn't styled like the eyebrow */
  background: transparent;
  border: 0;
  margin: 0;
  display: inline-block;
  border-radius: 0;
}
.picks-card .picks-badge.staff,
.picks-img .picks-badge.staff { color: var(--white-hot); background: var(--blue); }
.picks-card .picks-badge.new,
.picks-img .picks-badge.new   { color: var(--bg-base); background: var(--caution); }
.picks-card .picks-badge.best,
.picks-img .picks-badge.best  {
  color: var(--white-hot);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
}

.picks-body { padding: 16px 18px 20px; }
.picks-brand {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.picks-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 12px;
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.picks-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.picks-price {
  font-family: var(--font-stencil);
  font-size: 22px;
  color: var(--white);
}
.picks-atc {
  width: 32px;
  height: 32px;
  background: var(--blue);
  border-radius: 2px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-hot);
  font-size: 18px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  padding: 0;
  line-height: 1;
}
.picks-atc:hover { background: var(--blue-hot); transform: scale(1.06); }
.picks-atc:disabled { opacity: 0.6; cursor: wait; }

@media (max-width: 1024px) {
  .picks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .picks-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   PICKS — round-2 fixes:
   • no-image fallback (PF-blue gradient with stencil 'PF' instead of
     Magento's placeholder cube)
   • tab styling: explicit ghost/outline inactive + blue underline active,
     fixing the eyebrow overlap and overriding any cascading defaults
   • card sizing: flex column + 240px image (was 200px) to match mockup
   • picks-tab-icon: circular 18×18 outline that fills blue on active tab
   ═════════════════════════════════════════════════════════════════ */
.picks-img.no-image {
  background: linear-gradient(135deg, rgba(59,125,255,0.10) 0%, rgba(0,0,0,0.45) 100%) !important;
  position: relative;
}
.picks-img.no-image::before {
  content: 'PF';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-stencil);
  font-size: 56px;
  letter-spacing: 6px;
  color: rgba(59,125,255,0.18);
  pointer-events: none;
}

/* Card sizing — explicit flex column so image height drives the card,
   not the placeholder cube. */
.picks-card { display: flex !important; flex-direction: column !important; }
.picks-img  { height: 240px !important; }
.picks-body { flex: 1 0 auto; }

/* Tabs — explicit overrides to defeat browser button defaults and any
   cascading rules. Bumps existing .picks-tab definition at line 186. */
.picks-tabs {
  display: inline-flex !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--concrete) !important;
  margin-bottom: 24px !important;
  background: transparent !important;
}
button.picks-tab,
.picks-tabs .picks-tab {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 24px !important;
  min-height: 44px !important;
  color: var(--steel-light) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  transition: color 0.2s !important;
  box-shadow: none !important;
}
button.picks-tab:hover,
.picks-tabs .picks-tab:hover { color: var(--chalk) !important; }
button.picks-tab.active,
.picks-tabs .picks-tab.active { color: var(--white-hot) !important; }
button.picks-tab.active::after,
.picks-tabs .picks-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--blue);
}

.picks-tab .picks-tab-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid currentColor !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  margin-right: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  color: inherit !important;
}
.picks-tab.active .picks-tab-icon {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--white-hot) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PICKS — round-3 fixes (Bug C: card sizing; Bug B step 2: varied
   no-image gradients per nth-child so 4 placeholder cards don't look
   like 4 identical squares).
   ═════════════════════════════════════════════════════════════════ */

/* === CARD SIZING — image 220, body min ~130, gap 16, min-height 360 === */
.picks-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
.picks-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-bay, var(--bg-slab)) !important;
  border: 1px solid var(--concrete) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: border-color 0.3s, transform 0.3s !important;
  min-height: 360px !important;
}
.picks-card:hover {
  border-color: var(--blue) !important;
  transform: translateY(-2px) !important;
}
.picks-card-link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  color: inherit !important;
  text-decoration: none !important;
}
.picks-img {
  height: 220px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.picks-body {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 8px !important;
}
.picks-actions {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 0 20px 20px !important;
  margin-top: auto !important;
}
.picks-brand {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--blue-hot) !important;
  margin-bottom: 0 !important;
}
.picks-name {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--white) !important;
  line-height: 1.35 !important;
  flex: 1 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0 !important;
}
.picks-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}
.picks-price {
  font-family: var(--font-stencil) !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  letter-spacing: 1px !important;
  color: var(--white-hot) !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
.picks-atc {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 auto !important;
  background: var(--blue) !important;
  color: var(--white-hot) !important;
  border: 0 !important;
  border-radius: 2px !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s !important;
}
.picks-atc:hover { background: var(--blue-hot) !important; }

/* === Varied no-image gradients per nth-child so 4 placeholder cards
       don't look like 4 identical squares. The base .picks-img.no-image
       at line ~3580 still wins for the 'PF' stencil overlay. === */
.picks-grid > .picks-card:nth-child(1) .picks-img.no-image {
  background: linear-gradient(135deg, rgba(59,125,255,0.14) 0%, rgba(0,0,0,0.55) 100%) !important;
}
.picks-grid > .picks-card:nth-child(2) .picks-img.no-image {
  background: linear-gradient(225deg, rgba(91,154,255,0.12) 0%, rgba(20,20,30,0.65) 100%) !important;
}
.picks-grid > .picks-card:nth-child(3) .picks-img.no-image {
  background: linear-gradient(45deg, rgba(43,106,230,0.10) 0%, rgba(0,0,0,0.55) 100%) !important;
}
.picks-grid > .picks-card:nth-child(4) .picks-img.no-image {
  background: linear-gradient(315deg, rgba(59,125,255,0.12) 0%, rgba(10,10,15,0.7) 100%) !important;
}
/* Soft radial sheen overlay (same for all cards, subtle texture) */
.picks-img.no-image::after {
  content: '';
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(59,125,255,0.10) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(91,154,255,0.06) 0%, transparent 50%);
  pointer-events: none !important;
  z-index: 0 !important;
}
/* Keep the PF stencil + badge above the sheen */
.picks-img.no-image::before { z-index: 1 !important; }
.picks-img.no-image .picks-badge { z-index: 2 !important; }

/* === PICKS TABS — FINAL OVERRIDE (round 4)
       Ghost inactive, underline active, NEVER solid blue background.
       Appended at EOF so it wins by cascade order. Compound selectors
       cover every wrapper variation we've seen so far. === */
.picks-tabs {
  display: inline-flex !important;
  gap: 4px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--concrete) !important;
  border-radius: 0 !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  width: auto !important;
}
.picks-tab,
button.picks-tab,
.picks-tabs button,
.picks-tabs .picks-tab {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 24px !important;
  margin: 0 4px 0 0 !important;
  color: var(--steel-light) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  transition: color 0.2s !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}
.picks-tab:hover,
button.picks-tab:hover {
  color: var(--chalk) !important;
  background: transparent !important;
  background-color: transparent !important;
}
.picks-tab.active,
button.picks-tab.active,
.picks-tabs button.active,
.picks-tabs .picks-tab.active {
  color: var(--white-hot) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  font-weight: 500 !important;
}
.picks-tab.active::after,
button.picks-tab.active::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 2px !important;
  background: var(--blue) !important;
  pointer-events: none !important;
  display: block !important;
}
.picks-tab-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid currentColor !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
}
.picks-tab.active .picks-tab-icon {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--white-hot) !important;
}

/* === PICKS GRID — narrow card gaps, match mockup density === */
.picks-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}

/* Mobile: the two !important base rules above (this one + the card-sizing block
   ~200 lines up) hard-force 4 columns at EVERY width, defeating the earlier
   non-important @media overrides and crushing each picks card to ~84px at 390px
   (product image + name + price + ATC unusable). Re-assert a usable 2-up grid on
   phones, matching the category/shop product-card density (~175px cards). Must
   live AFTER the base rules and carry !important to win the cascade. */
@media (max-width: 640px) {
  .picks-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MINICART DROPDOWN — single clean source of truth.
   Consolidated 2026-05-27, replacing ~1300 lines of iterative sediment.
   Works with the theme template override at
   Magento_Checkout/web/template/minicart/item/default.html
   (3-col grid: 88px photo | 1fr details | 36px remove).
   !important is used ONLY to beat Sm/Magento upstream defaults (white
   panel bg, position:absolute price-container, 95px detail padding),
   never to fight another PF rule.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Panel: pull out of the .minicart-wrapper flex flow, position popover ── */
.nav-btn-cart .block.block-minicart {
  position: absolute !important;
  top: calc(100% + 15px) !important;   /* panel top flush with nav bottom: cart btn is centered in the 64px nav, +15px == nav bottom edge */
  right: 0 !important;
  left: auto !important;
  width: 420px !important;
  max-width: 95vw !important;
  min-width: 340px !important;
  height: auto !important;
  z-index: 1000 !important;
  flex: none !important;
  box-sizing: border-box !important;
  background: var(--bg-panel, #202026) !important;
  border: 1px solid var(--concrete, #2a2a32) !important;
  border-top: 2px solid var(--blue, #3B7DFF) !important;   /* industrial spec-panel accent edge */
  border-radius: 0 0 var(--radius-sm, 2px) var(--radius-sm, 2px) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(59,125,255,0.06), 0 -1px 24px rgba(59,125,255,0.10), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  color: var(--chalk, #c8c8d0) !important;
}
.block.block-minicart > .block-content,
.block.block-minicart #minicart-content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.block.block-minicart .block-content {
  /* signature fractal-noise grain over the panel base — the PF industrial texture */
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    var(--bg-panel, #202026);
  padding: 20px 18px;
  position: relative;
}
.block.block-minicart .block-title { display: none; }
.block.block-minicart .block-content::before {
  content: "YOUR CART";
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue-hot, #5B9AFF);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(59,125,255,0.22);  /* blue spec-sheet rule under the header */
  text-shadow: 0 0 12px rgba(59,125,255,0.35);
}
.block.block-minicart .subtitle.empty {
  color: var(--steel-light, #6a6a78);
  font-family: var(--font-mono, monospace);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; display: block; padding: 24px 0;
}

/* ── Items scroll area (#1/#2): wrapper = sole scroll container, capped,
   styled rail at the right edge with a gap from content ── */
.block.block-minicart .minicart-items-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: 340px !important;
  background: transparent !important;   /* kill upstream Luma white bg so dark panel shows through */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  padding-right: 6px !important;
  margin: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--steel, #4a4a55) transparent !important;
}
.block.block-minicart .minicart-items-wrapper::-webkit-scrollbar { width: 6px; }
.block.block-minicart .minicart-items-wrapper::-webkit-scrollbar-track { background: transparent; }
.block.block-minicart .minicart-items-wrapper::-webkit-scrollbar-thumb { background: var(--steel, #4a4a55); border-radius: 3px; }
.block.block-minicart .minicart-items-wrapper::-webkit-scrollbar-thumb:hover { background: var(--blue, #3B7DFF); }
/* collapse Magento's nested inner ol scroll so the wrapper governs */
.block.block-minicart .minicart-items {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0; padding: 0; list-style: none;
}

/* ── Item row (template provides the 3-col grid) ── */
.block.block-minicart .minicart-items > li.product-item {
  list-style: none;
  min-width: 0;
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.block.block-minicart .minicart-items > li.product-item:last-child {
  border-bottom: 0; margin-bottom: 0; padding-bottom: 0;
}
.block.block-minicart .product-item-details {
  min-width: 0 !important;
  max-width: 100% !important;
  padding-left: 0 !important;     /* beat upstream 95px ghost */
  box-sizing: border-box;
}
.block.block-minicart .product-item-photo,
.block.block-minicart .product-image-container {
  position: relative !important;   /* beat template inline position:static so placeholder ::after stays in the 88px box, not .block-content */
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 2px;
  overflow: hidden;
  background: #15171d;
}
.block.block-minicart .product-image-photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* product name — readable, NOT the upstream 11px/uppercase/400.
   !important required: upstream `.block-minicart .minicart-items
   .product-item-details .product-item-name(/ a)` (0,4,x) sets
   font-size:100%, font-weight:400, text-transform:uppercase. */
.block.block-minicart .product-item-name {
  margin: 0 0 8px !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
.block.block-minicart .product-item-name a {
  color: var(--white, #e8e8ec) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-decoration: none;
}
.block.block-minicart .product-item-name a:hover { color: var(--blue-hot, #5B9AFF) !important; }

/* ── Price + qty on ONE line (#3) ── */
.block.block-minicart .product-item-pricing {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 0;
  width: 100%;
}
.block.block-minicart .price-container,
.block.block-minicart .price-wrapper {
  position: static !important;     /* beat upstream position:absolute */
  margin: 0 !important;
  flex: 0 0 auto;
  white-space: nowrap;
}
.block.block-minicart .price-container .price,
.block.block-minicart .price-wrapper .price,
.block.block-minicart .minicart-price .price {
  font-family: var(--font-mono, monospace) !important;
  font-size: 15px !important;       /* upstream renders the line price ~11px/400; pin it bold */
  font-weight: 700 !important;
  color: var(--white-hot, #fff) !important;
  white-space: nowrap !important;
}
.block.block-minicart .details-qty {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0;
}
.block.block-minicart .details-qty .label {
  margin: 0 !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--chalk, #c8c8d0) !important;   /* legible label; prior steel was too close to bg */
}
.block.block-minicart .item-qty {
  width: 42px !important;            /* trimmed so price+qty fit the details column without overflow */
  height: 34px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  background: var(--bg-base, #0a0a0c) !important;
  border: 1px solid rgba(59,125,255,0.4) !important;   /* blue-tinted technical input */
  border-radius: 2px !important;
  color: var(--white-hot, #fff) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.block.block-minicart .item-qty:focus {
  border-color: var(--blue, #3B7DFF) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59,125,255,0.18) !important;
}
.block.block-minicart .update-cart-item { display: none; }

/* ── Remove (X) button — template puts .product.actions in grid col 3 ── */
.block.block-minicart .product.actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
}
.block.block-minicart .product.actions .primary { display: none; }
.block.block-minicart .product.actions .secondary { display: flex; }
.block.block-minicart .action.delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--steel-light, #6a6a78);   /* brighter ring so the control reads */
  border-radius: 50%;
  background: rgba(255,255,255,0.05);              /* faint fill so the X has a surface */
  color: var(--white-hot, #fff);                   /* max-contrast glyph */
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.block.block-minicart .action.delete > span { display: none; }
.block.block-minicart .action.delete::before {
  content: "\00d7";
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--white-hot, #fff) !important;   /* upstream sets the ::before glyph to #303030 (dark-on-dark); force it bright */
}
.block.block-minicart .action.delete:hover { color: var(--red, #d33); border-color: var(--red, #d33); }

/* ── Cart subtotal (#5): clear separation + treatment ── */
.block.block-minicart .subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: var(--space-5, 24px) 0;
  padding: 16px 0 18px;
  background: transparent !important;             /* kill upstream Luma white bg */
  color: var(--chalk, #c8c8d0) !important;        /* was upstream #444 dark-on-dark */
  border-top: 1px solid rgba(59,125,255,0.28);   /* blue spec rule */
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.block.block-minicart .subtotal .label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel-light, #6a6a78) !important;
}
.block.block-minicart .subtotal .price,
.block.block-minicart .subtotal .amount .price {
  font-family: var(--font-mono, monospace);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--white-hot, #fff) !important;
  text-shadow: 0 0 18px rgba(59,125,255,0.18);   /* faint blue lift on the total */
}

/* ── Actions: View Cart (ghost) + Checkout (primary). PayPal Braintree
   splits these into sibling <a> in .secondary; gap via a+a (#6). ── */
.block.block-minicart .actions { margin: 0; padding: 0; background: transparent !important; }
.block.block-minicart .actions .primary:empty,
.block.block-minicart .actions .primary #paypal-braintree-mini-cart-paylater-container-message:empty { display: none; }
.block.block-minicart .block-content > .actions .secondary {
  display: flex;
  flex-direction: column;
}
.block.block-minicart .actions .secondary > a + a { margin-top: 8px; }
.block.block-minicart .action.viewcart,
.block.block-minicart .action.primary.checkout,
.block.block-minicart #top-cart-btn-checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 50px !important;
  font-family: var(--font-stencil, sans-serif) !important;
  font-size: 17px !important;          /* upstream squeezed the label to ~11px; pin it large */
  font-weight: 400 !important;         /* Bebas Neue is a display weight; 700 faux-bolds it fuzzy */
  letter-spacing: 2px !important;      /* PF CTA tracking, eased from 3px for legibility at this size */
  text-transform: uppercase !important;
  border-radius: var(--radius-sm, 2px) !important;
  text-decoration: none !important;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
}
/* VIEW CART — ghost, blue identity */
.block.block-minicart .action.viewcart {
  background: transparent;
  color: var(--blue-hot, #5B9AFF);
  border: 1px solid var(--concrete, #2a2a32);
}
.block.block-minicart .action.viewcart:hover {
  border-color: var(--blue, #3B7DFF);
  color: var(--white-hot, #fff);
  box-shadow: 0 0 24px rgba(59,125,255,0.15), inset 0 0 0 1px rgba(59,125,255,0.25);
}
.block.block-minicart .action.viewcart span { color: inherit; }
/* CHECKOUT — the hero CTA: electric-blue slab with depth + glow */
.block.block-minicart .action.primary.checkout,
.block.block-minicart #top-cart-btn-checkout {
  background: var(--blue, #3B7DFF) !important;   /* solid like .btn-shop; gradient's light top killed white-text contrast */
  color: var(--white-hot, #fff) !important;
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);   /* dropped the outer glow that fuzzed the edges */
}
.block.block-minicart .action.primary.checkout:hover,
.block.block-minicart #top-cart-btn-checkout:hover {
  background: #2f6ae0 !important;                 /* darker on hover, keeps white text legible */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.block.block-minicart .action.primary.checkout span,
.block.block-minicart #top-cart-btn-checkout span { color: inherit; }

/* No-image placeholder: brand mark instead of Magento cube */
.block.block-minicart .product-item-photo:has(img[src*='/placeholder/'])::after,
.block.block-minicart .product-image-container:has(img[src*='/placeholder/'])::after {
  content: "PF";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: rgba(140,148,163,0.5);
  background: #15171d;
}
.block.block-minicart .product-item-photo:has(img[src*='/placeholder/']) img,
.block.block-minicart .product-image-container:has(img[src*='/placeholder/']) img { visibility: hidden; }

/* Cart trigger hover — icon + count go blue (preserved from prior block) */
.nav-btn-cart:hover { border-color: var(--blue); }
.nav-btn-cart:hover .action.showcart,
.nav-btn-cart:hover .action.showcart::before,
.nav-btn-cart:hover .counter-number { color: var(--blue-hot); }
/* ── END MINICART DROPDOWN ── */

/* ═══════════════════════════════════════════════════════════════════
   CART PAGE (checkout/cart) — kill upstream white panels + PF workshop tune.
   Every node below measured white/light on the dark page; scoped to
   .checkout-cart-index so nothing else is touched. Same white-panel
   disease fixed on the minicart.
   ═══════════════════════════════════════════════════════════════════ */

body.checkout-cart-index,
body.checkout-cart-index .page-wrapper {
  background: var(--bg-base, #0a0a0c) !important;
}

/* #1 Header strips: main cart thead + summary block titles (Estimate/Discount/Fees)
   + saved-for-later title. All were #f7f7f7/#fafafa. */
.checkout-cart-index .cart.table-wrapper thead,
.checkout-cart-index .cart.table-wrapper thead tr,
.checkout-cart-index .cart.table-wrapper thead th,
.checkout-cart-index .cart-container .title,
.checkout-cart-index .cart-summary .title {
  background: var(--bg-slab, #15151a) !important;
  color: var(--steel-light, #8a8a98) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--concrete, #2a2a32) !important;
}

/* #2 Summary lower half (Proceed-to-Checkout list + Share Cart) — make the whole
   summary one continuous dark card by clearing the white inner panels. */
.checkout-cart-index .cart-summary .checkout.methods,
.checkout-cart-index .cart-summary ul.checkout.methods.items,
.checkout-cart-index .cart-summary .checkout-methods-items,
.checkout-cart-index .nlh-sharedcart {
  background: transparent !important;
  color: var(--chalk, #c8c8d0) !important;
}

/* #3 Qty stepper (- N +): dark PF input, not a white box. */
.checkout-cart-index .nlh-hstepper {
  background: var(--bg-base, #0a0a0c) !important;
  border: 1px solid var(--concrete, #2a2a32) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
.checkout-cart-index .nlh-hstepper button.nlh-hstepper__btn,
.checkout-cart-index .nlh-hstepper .nlh-hstepper__btn {
  background: var(--bg-raised, #2a2a32) !important;
  background-color: var(--bg-raised, #2a2a32) !important;   /* generic Magento qty-button rule wins on specificity otherwise */
  color: var(--chalk, #c8c8d0) !important;
  border: 0 !important;
  transition: background 0.15s, color 0.15s;
}
.checkout-cart-index .nlh-hstepper button.nlh-hstepper__btn:hover,
.checkout-cart-index .nlh-hstepper .nlh-hstepper__btn:hover {
  background-color: var(--blue, #3B7DFF) !important;
  color: var(--white-hot, #fff) !important;
}
.checkout-cart-index .nlh-hstepper__input,
.checkout-cart-index .nlh-hstepper input {
  background: transparent !important;
  color: var(--white, #e8e8ec) !important;
  border: 0 !important;
  font-family: var(--font-mono, monospace) !important;
  font-weight: 700 !important;
}

/* #4 Estimate-shipping / discount controls: fields already dark; pin border + blue focus. */
.checkout-cart-index .cart-summary input.input-text,
.checkout-cart-index .cart-summary select {
  background: var(--bg-base, #0a0a0c) !important;
  border: 1px solid var(--concrete, #2a2a32) !important;
  color: var(--chalk, #c8c8d0) !important;
  border-radius: 2px !important;
}
.checkout-cart-index .cart-summary input.input-text:focus,
.checkout-cart-index .cart-summary select:focus {
  border-color: var(--blue, #3B7DFF) !important;
  outline: none !important;
}

/* #5 Secondary buttons (Remove item / Save for later / Continue Shopping):
   one ghost treatment — transparent, steel border, mono uppercase. */
.checkout-cart-index .action.action-delete,
.checkout-cart-index .nlh-sfl__btn--inline,
.checkout-cart-index .cart .action.secondary,
.checkout-cart-index a.action.continue,
.checkout-cart-index .cart.main.actions a.action.continue {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--steel, #4a4a55) !important;
  color: var(--chalk, #c8c8d0) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.checkout-cart-index .action.action-delete:hover,
.checkout-cart-index .nlh-sfl__btn--inline:hover,
.checkout-cart-index .cart .action.secondary:hover,
.checkout-cart-index a.action.continue:hover {
  border-color: var(--blue, #3B7DFF) !important;
  color: var(--blue-hot, #5B9AFF) !important;
}

/* #6 Primary buttons (Update Cart / Proceed to Checkout / Share Cart):
   consistent solid blue family, sharp corners. */
.checkout-cart-index .cart.main.actions button.action.update,
.checkout-cart-index .checkout-methods-items .action.primary.checkout,
.checkout-cart-index .nlh-sharedcart button.action.primary,
.checkout-cart-index .nlh-sharedcart .action.primary,
.checkout-cart-index .cart-summary button.action.primary {
  background: var(--blue, #3B7DFF) !important;
  color: var(--white-hot, #fff) !important;
  border: 0 !important;
  font-family: var(--font-stencil, sans-serif) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.checkout-cart-index .cart.main.actions button.action.update:hover,
.checkout-cart-index .checkout-methods-items .action.primary.checkout:hover,
.checkout-cart-index .nlh-sharedcart button.action.primary:hover,
.checkout-cart-index .cart-summary button.action.primary:hover {
  background: #2f6ae0 !important;
}

/* #7 No-image cart thumbnails: PF tile instead of the broken Magento starburst
   placeholder (gotcha #5 — these products have no image). Same trick as minicart. */
.checkout-cart-index .cart .product-item-photo {
  position: relative !important;
  background: #15171d !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
.checkout-cart-index .cart .product-item-photo:has(img[src*='/placeholder/'])::after,
.checkout-cart-index .cart .product-item-photo:has(img[src*='lazyload'])::after,
.checkout-cart-index .cart .product-item-photo:has(img[src*='blank'])::after {
  content: "PF";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: rgba(140,148,163,0.5);
  background: #15171d;
}
.checkout-cart-index .cart .product-item-photo:has(img[src*='/placeholder/']) img,
.checkout-cart-index .cart .product-item-photo:has(img[src*='lazyload']) img,
.checkout-cart-index .cart .product-item-photo:has(img[src*='blank']) img { visibility: hidden; }

/* ─── CART PAGE: premium pass (GPT-5.5 direction — lower the noise, machine the
   controls, gauge-align the numbers; same palette, sharp corners only) ─── */

/* Quiet the bright #d1d1d1 row rules -> concrete hairlines; reserve the brighter
   steel line for the header (the one deliberate major break). */
.checkout-cart-index .cart.table-wrapper .cart.item,
.checkout-cart-index .cart.table-wrapper .cart.item td,
.checkout-cart-index .cart.table-wrapper tbody.cart.item {
  border-color: var(--concrete, #2a2a32) !important;
}
.checkout-cart-index .cart.table-wrapper thead,
.checkout-cart-index .cart.table-wrapper thead tr,
.checkout-cart-index .cart.table-wrapper thead th {
  border-bottom: 1px solid var(--steel-light, #6a6a78) !important;
}

/* Gauge-style numbers: tabular figures everywhere money/qty appears. */
.checkout-cart-index .cart .price,
.checkout-cart-index .cart-summary .price,
.checkout-cart-index .cart-totals .price,
.checkout-cart-index .nlh-hstepper input {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}

/* Product titles: white by default, electric blue ONLY on hover (de-blue the page). */
.checkout-cart-index .cart .product-item-name a {
  color: var(--white, #e8e8ec) !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}
.checkout-cart-index .cart .product-item-name a:hover,
.checkout-cart-index .cart .product-item-name a:focus {
  color: var(--blue, #3B7DFF) !important;
}

/* Order Total = the premium anchor: brighter, larger, with a steel break above it. */
.checkout-cart-index .cart-totals .grand.totals,
.checkout-cart-index .grand.totals {
  border-top: 1px solid var(--steel-light, #6a6a78) !important;
}
.checkout-cart-index .cart-totals .grand.totals .price,
.checkout-cart-index .cart-totals .grand .amount .price,
.checkout-cart-index .grand.totals .amount .price {
  color: var(--white-hot, #fff) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.checkout-cart-index .cart-totals .grand.totals .mark,
.checkout-cart-index .grand.totals .mark strong {
  color: var(--chalk, #c8c8d0) !important;
  font-family: var(--font-mono, monospace) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-weight: 400 !important;
}

/* Summary = a calm, sticky control module with a quieter steel frame. */
.checkout-cart-index .cart-summary {
  position: sticky !important;
  top: 24px !important;
  border: 1px solid var(--steel, #4a4a55) !important;
}

/* Primary actions: flat decisive blue, a touch taller, more deliberate tracking. */
.checkout-cart-index .cart.main.actions button.action.update,
.checkout-cart-index .checkout-methods-items .action.primary.checkout,
.checkout-cart-index .nlh-sharedcart button.action.primary,
.checkout-cart-index .cart-summary button.action.primary {
  height: 46px !important;
  letter-spacing: 2.5px !important;
}
/* ═══ CART PAGE v2 — polish pass (GPT-5.5 direction): breathing room, cohesive
   divider language, framed panels, instrument-panel summary rhythm. Keeps the
   working float layout (cart-container children are summary+form-cart+aux, not a
   clean 2-child grid). Same palette, sharp corners only. ═══ */

/* Page: generous side gutters, centered, more vertical room (was 32px 16px). */
.checkout-cart-index .page-main {
  max-width: 1760px !important;
  margin: 0 auto !important;
  padding: 44px 64px 88px !important;
}

/* Cart table: a real machined frame with consistent inner inset. */
.checkout-cart-index .cart.table-wrapper {
  background: var(--bg-slab, #15151a) !important;
  border: 1px solid var(--concrete, #2a2a32) !important;
  border-radius: 2px !important;
  padding: 26px 28px 28px !important;
}
.checkout-cart-index .cart.table-wrapper table { width: 100% !important; border-collapse: collapse !important; }
.checkout-cart-index .cart.table-wrapper thead th {
  padding: 0 18px 16px !important;
  border-bottom: 1px solid var(--steel, #4a4a55) !important;
}
.checkout-cart-index .cart.table-wrapper thead th:first-child { padding-left: 20px !important; }
.checkout-cart-index .cart.table-wrapper thead th:last-child  { padding-right: 20px !important; }
.checkout-cart-index .cart.table-wrapper tbody.cart.item td {
  padding: 30px 18px !important;
  border-top: 1px solid var(--concrete, #2a2a32) !important;
  vertical-align: top !important;
}
.checkout-cart-index .cart.table-wrapper tbody.cart.item:first-of-type td { border-top: 0 !important; }
.checkout-cart-index .cart.table-wrapper tbody.cart.item td:first-child { padding-left: 20px !important; }
.checkout-cart-index .cart.table-wrapper tbody.cart.item td:last-child  { padding-right: 20px !important; }

/* Item: a touch more separation between the photo and the spec text. */
.checkout-cart-index .cart td.item .product-item-details { padding-left: 22px !important; }
.checkout-cart-index .cart .product-item-name { margin: 0 0 6px !important; }
.checkout-cart-index .cart .product-item-name a {
  display: inline-block !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* Summary: framed instrument panel with inner inset (keep Magento's float). */
.checkout-cart-index .cart-summary {
  background: var(--bg-slab, #15151a) !important;
  border: 1px solid var(--steel, #4a4a55) !important;
  border-radius: 2px !important;
  padding: 26px 28px 30px !important;
}
.checkout-cart-index .cart-summary > .summary.title {
  display: block !important;
  margin: 0 0 8px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid var(--steel, #4a4a55) !important;
  background: transparent !important;
}

/* Totals: quiet rows, strong grand-total rails, clear vertical rhythm. */
.checkout-cart-index .cart-totals { width: 100% !important; margin: 18px 0 0 !important; border-collapse: collapse !important; }
.checkout-cart-index .cart-totals .totals th.mark,
.checkout-cart-index .cart-totals .totals td.amount {
  padding: 14px 0 !important;
  border-top: 1px solid var(--concrete, #2a2a32) !important;
}
.checkout-cart-index .cart-totals tr:first-child th.mark,
.checkout-cart-index .cart-totals tr:first-child td.amount { border-top: 0 !important; }
.checkout-cart-index .cart-totals .grand.totals th.mark,
.checkout-cart-index .cart-totals .grand.totals td.amount {
  padding: 20px 0 !important;
  border-top: 1px solid var(--steel-light, #6a6a78) !important;
  border-bottom: 0 !important;
}

/* Estimate fees / shipping / discount: each becomes a deliberate control surface. */
.checkout-cart-index #block-fee,
.checkout-cart-index #block-shipping,
.checkout-cart-index #block-discount { margin: 14px 0 0 !important; }
.checkout-cart-index #block-fee > .title,
.checkout-cart-index #block-shipping > .title,
.checkout-cart-index #block-discount > .title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  background: var(--bg-bay, #1a1a20) !important;
  border: 1px solid var(--steel, #4a4a55) !important;
  border-bottom: 1px solid var(--steel, #4a4a55) !important;
  border-radius: 2px !important;
}
.checkout-cart-index #block-fee > .title:hover,
.checkout-cart-index #block-shipping > .title:hover,
.checkout-cart-index #block-discount > .title:hover {
  border-color: var(--steel-light, #6a6a78) !important;
  color: var(--white, #e8e8ec) !important;
}
.checkout-cart-index #block-fee .content,
.checkout-cart-index #block-shipping .content,
.checkout-cart-index #block-discount .content { padding: 16px 2px 2px !important; }

/* Secondary buttons: cohesive ghost, comfortable size + a gap between the pair. */
.checkout-cart-index .action.action-delete,
.checkout-cart-index .nlh-sfl__btn--inline,
.checkout-cart-index a.action.continue {
  min-height: 40px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--steel, #4a4a55) !important;
}
.checkout-cart-index .action.action-delete + .nlh-sfl__btn--inline { margin-left: 16px !important; }

/* Primary buttons: decisive, taller. */
.checkout-cart-index .checkout-methods-items .action.primary.checkout,
.checkout-cart-index .nlh-sharedcart .action.primary,
.checkout-cart-index .cart.main.actions button.action.update {
  min-height: 48px !important;
}
/* ── END CART PAGE ── */

@media (max-width: 767px) {
  .checkout-cart-index .page-main {
    padding: 20px 16px 64px !important;
    max-width: 100% !important;
  }
  .checkout-cart-index .cart-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  .checkout-cart-index .cart-summary,
  .checkout-cart-index .cart.table-wrapper {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: static !important;
    box-sizing: border-box !important;
    background: var(--bg-slab, #15151a) !important;
    border: 1px solid var(--concrete, #2a2a32) !important;
    border-radius: 2px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
  }
  .checkout-cart-index .cart.table-wrapper {
    order: 0 !important;
    padding: 20px 18px 22px !important;
  }
  .checkout-cart-index .cart-summary {
    order: 1 !important;
    padding: 20px 18px 22px !important;
  }
  .checkout-cart-index .cart.table-wrapper thead {
    display: none !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item {
    display: block !important;
    margin: 0 0 20px !important;
    padding: 0 0 20px !important;
    border-bottom: 1px solid var(--concrete, #2a2a32) !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item tr {
    display: block !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.item {
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.item .product-item-photo {
    width: 80px !important;
    height: 80px !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.item .product-item-details {
    padding-left: 0 !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.price,
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.qty,
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.subtotal {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 12px 0 0 !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.price::before,
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.qty::before,
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.subtotal::before {
    content: attr(data-th) !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--steel-light, #6a6a78) !important;
    flex: 0 0 auto !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.price > *,
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.qty > *,
  .checkout-cart-index .cart.table-wrapper tbody.cart.item td.col.subtotal > * {
    margin-left: auto !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item .field.qty {
    margin: 0 !important;
    width: 100% !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item .control.qty {
    width: 100% !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item .input-text.qty {
    width: 104px !important;
    max-width: 100% !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item .item-actions td {
    padding-top: 16px !important;
  }
  .checkout-cart-index .cart.table-wrapper tbody.cart.item .actions-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .checkout-cart-index .cart.main.actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .checkout-cart-index .action.action-delete,
  .checkout-cart-index .nlh-sfl__btn--inline,
  .checkout-cart-index a.action.continue,
  .checkout-cart-index .cart.main.actions button.action.update,
  .checkout-cart-index .checkout-methods-items .action.primary.checkout,
  .checkout-cart-index .nlh-sharedcart .action.primary {
    width: 100% !important;
    justify-content: center !important;
  }
  .checkout-cart-index .action.action-delete + .nlh-sfl__btn--inline {
    margin-left: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CHECKOUT PAGE (checkout/index) — PF dark workshop treatment.
   Handles the one-page checkout, the multishipping gate, and the mobile
   responsive layout so the flow reads as one continuous product instead of
   the default white Magento panels.
   ═══════════════════════════════════════════════════════════════════ */

body.checkout-index-index,
body.checkout-index-index .page-wrapper,
body.multishipping-checkout-login,
body.multishipping-checkout-addresses,
body.multishipping-checkout-overview {
  background: var(--bg-base, #0a0a0c) !important;
}
.checkout-index-index .page-main {
  max-width: 1760px !important;
  margin: 0 auto !important;
  padding: 44px 64px 92px !important;
  background: var(--bg-base, #0a0a0c) !important;
}
.checkout-index-index .page-wrapper {
  background: var(--bg-base, #0a0a0c) !important;
}
.checkout-index-index .checkout-container,
.checkout-index-index .opc-wrapper,
.checkout-index-index .opc-sidebar,
.checkout-index-index .opc-estimated-wrapper,
.checkout-index-index .opc-block-summary,
.checkout-index-index .checkout-shipping-address,
.checkout-index-index .checkout-payment-method,
.checkout-index-index .step-content,
.checkout-index-index .payment-group,
.checkout-index-index .checkout-billing-address,
.checkout-index-index .multishipping-checkout-login .block,
.checkout-index-index .multishipping-checkout-addresses .block,
.checkout-index-index .multishipping-checkout-overview .block,
.checkout-index-index .multishipping-checkout-login .fieldset,
.checkout-index-index .multishipping-checkout-addresses .fieldset,
.checkout-index-index .multishipping-checkout-overview .fieldset {
  background: var(--bg-slab, #15151a) !important;
  color: var(--chalk, #c8c8d0) !important;
  border: 1px solid var(--concrete, #2a2a32) !important;
  border-radius: 2px !important;
}
.checkout-index-index .columns {
  align-items: flex-start !important;
  gap: 28px !important;
}
.checkout-index-index .opc-wrapper {
  padding: 32px 34px 36px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24) !important;
}
.checkout-index-index .opc-sidebar {
  position: sticky !important;
  top: 24px !important;
  padding: 28px 30px 32px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24) !important;
}
.checkout-index-index .opc-block-summary {
  padding: 0 !important;
}
.checkout-index-index .opc-block-summary > .title,
.checkout-index-index .opc-sidebar .title,
.checkout-index-index .checkout-shipping-method .step-title,
.checkout-index-index .payment-group .step-title,
.checkout-index-index .checkout-payment-method .step-title,
.checkout-index-index .multishipping-checkout-login .block-title,
.checkout-index-index .multishipping-checkout-addresses .block-title,
.checkout-index-index .multishipping-checkout-overview .block-title {
  color: var(--white, #e8e8ec) !important;
  font-family: var(--font-stencil, sans-serif) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--concrete, #2a2a32) !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
}
.checkout-index-index .opc-progress-bar {
  margin: 0 0 24px !important;
  counter-reset: item !important;
}
.checkout-index-index .opc-progress-bar-item > span,
.checkout-index-index .opc-progress-bar-item:before {
  color: var(--steel-light, #8a8a98) !important;
}
.checkout-index-index .opc-progress-bar-item._active:before,
.checkout-index-index .opc-progress-bar-item._complete:before,
.checkout-index-index .opc-progress-bar-item._active > span,
.checkout-index-index .opc-progress-bar-item._complete > span {
  color: var(--blue-hot, #5B9AFF) !important;
}
.checkout-index-index .field > .label,
.checkout-index-index .field label,
.checkout-index-index .opc-wrapper .fieldset > .legend,
.checkout-index-index .opc-wrapper .fieldset .legend,
.checkout-index-index .payment-method-title label,
.checkout-index-index .payment-group .step-title,
.checkout-index-index .opc-block-summary .items-in-cart .title {
  color: var(--steel-light, #8a8a98) !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.checkout-index-index .fieldset {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.checkout-index-index .fieldset > .legend {
  margin-bottom: 16px !important;
}
.checkout-index-index .fieldset > .field,
.checkout-index-index .fieldset .field {
  margin-bottom: 16px !important;
}
.checkout-index-index .field .control {
  margin-top: 6px !important;
}
.checkout-index-index .input-text,
.checkout-index-index select,
.checkout-index-index textarea {
  min-height: 44px !important;
  padding: 0 14px !important;
  background: var(--bg-base, #0a0a0c) !important;
  border: 1px solid var(--concrete, #2a2a32) !important;
  border-radius: 2px !important;
  color: var(--chalk, #c8c8d0) !important;
}
.checkout-index-index .input-text:focus,
.checkout-index-index select:focus,
.checkout-index-index textarea:focus {
  border-color: var(--blue, #3B7DFF) !important;
  outline: none !important;
}
.checkout-index-index .actions-toolbar > .primary,
.checkout-index-index .actions-toolbar > .secondary,
.checkout-index-index .checkout-payment-method .actions-toolbar,
.checkout-index-index .checkout-shipping-method .actions-toolbar,
.checkout-index-index .multishipping-checkout-login .actions-toolbar,
.checkout-index-index .multishipping-checkout-addresses .actions-toolbar,
.checkout-index-index .multishipping-checkout-overview .actions-toolbar {
  margin-top: 18px !important;
}
.checkout-index-index .actions-toolbar .action.primary,
.checkout-index-index .checkout-payment-method .action.primary,
.checkout-index-index .checkout-shipping-method .action.primary,
.checkout-index-index .opc-sidebar .action.primary,
.checkout-index-index .multishipping-checkout-login .action.primary,
.checkout-index-index .multishipping-checkout-addresses .action.primary,
.checkout-index-index .multishipping-checkout-overview .action.primary {
  background: var(--blue, #3B7DFF) !important;
  color: var(--white-hot, #fff) !important;
  border: 0 !important;
  font-family: var(--font-stencil, sans-serif) !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  min-height: 48px !important;
}
.checkout-index-index .actions-toolbar .action.primary:hover,
.checkout-index-index .checkout-payment-method .action.primary:hover,
.checkout-index-index .checkout-shipping-method .action.primary:hover,
.checkout-index-index .opc-sidebar .action.primary:hover,
.checkout-index-index .multishipping-checkout-login .action.primary:hover,
.checkout-index-index .multishipping-checkout-addresses .action.primary:hover,
.checkout-index-index .multishipping-checkout-overview .action.primary:hover {
  background: #2f6ae0 !important;
}
.checkout-index-index .actions-toolbar .action:not(.primary),
.checkout-index-index .opc-sidebar .action,
.checkout-index-index .multishipping-checkout-login .action,
.checkout-index-index .multishipping-checkout-addresses .action,
.checkout-index-index .multishipping-checkout-overview .action {
  background: transparent !important;
  border: 1px solid var(--steel, #4a4a55) !important;
  color: var(--chalk, #c8c8d0) !important;
  border-radius: 2px !important;
}
.checkout-index-index .payment-method,
.checkout-index-index .payment-method-title,
.checkout-index-index .payment-method-content,
.checkout-index-index .table-checkout-shipping-method,
.checkout-index-index .table-totals {
  background: transparent !important;
  color: var(--chalk, #c8c8d0) !important;
}
.checkout-index-index .payment-method {
  border: 1px solid var(--concrete, #2a2a32) !important;
  border-radius: 2px !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
}
.checkout-index-index .payment-method._active {
  border-color: var(--blue, #3B7DFF) !important;
}
.checkout-index-index .payment-method-title {
  padding: 16px 18px !important;
}
.checkout-index-index .payment-method-content {
  padding: 18px 18px 24px !important;
}
.checkout-index-index .opc-block-summary .table-totals tr th,
.checkout-index-index .opc-block-summary .table-totals tr td,
.checkout-index-index .opc-sidebar .table-totals tr th,
.checkout-index-index .opc-sidebar .table-totals tr td {
  border-color: var(--concrete, #2a2a32) !important;
  color: var(--chalk, #c8c8d0) !important;
}
.checkout-index-index .opc-block-summary .table-totals .grand .mark,
.checkout-index-index .opc-block-summary .table-totals .grand .amount,
.checkout-index-index .opc-sidebar .table-totals .grand .mark,
.checkout-index-index .opc-sidebar .table-totals .grand .amount {
  border-top: 1px solid var(--steel-light, #6a6a78) !important;
  color: var(--white-hot, #fff) !important;
}
.checkout-index-index .opc-block-summary .table-totals .grand .amount .price,
.checkout-index-index .opc-sidebar .table-totals .grand .amount .price {
  color: var(--white-hot, #fff) !important;
  font-size: 20px !important;
  font-family: var(--font-stencil, sans-serif) !important;
}
.checkout-index-index .checkout-shipping-method .table-checkout-shipping-method tbody tr td,
.checkout-index-index .checkout-shipping-method .table-checkout-shipping-method thead th {
  border-color: var(--concrete, #2a2a32) !important;
}
.checkout-index-index .checkout-shipping-method .table-checkout-shipping-method tbody tr:hover td {
  background: rgba(59,125,255,0.06) !important;
}
.checkout-index-index .checkout-shipping-method input[type="radio"],
.checkout-index-index .payment-method input[type="radio"] {
  accent-color: var(--blue, #3B7DFF);
}
.checkout-index-index .opc-estimated-wrapper {
  background: var(--bg-slab, #15151a) !important;
  border: 1px solid var(--concrete, #2a2a32) !important;
  border-radius: 2px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
}
.checkout-index-index .opc-estimated-wrapper .estimated-block {
  color: var(--white, #e8e8ec) !important;
}
.checkout-index-index .opc-estimated-wrapper .estimated-block strong,
.checkout-index-index .opc-estimated-wrapper .estimated-price {
  color: var(--blue-hot, #5B9AFF) !important;
}
.multishipping-checkout-login .page-main,
.multishipping-checkout-addresses .page-main,
.multishipping-checkout-overview .page-main {
  background: var(--bg-base, #0a0a0c) !important;
  padding: 32px 16px 72px !important;
}
.multishipping-checkout-login .page-title,
.multishipping-checkout-addresses .page-title,
.multishipping-checkout-overview .page-title {
  color: var(--white, #e8e8ec) !important;
  font-family: var(--font-stencil, sans-serif) !important;
  letter-spacing: 3px !important;
}
.multishipping-checkout-login .block,
.multishipping-checkout-addresses .block,
.multishipping-checkout-overview .block {
  background: var(--bg-slab, #15151a) !important;
  border: 1px solid var(--concrete, #2a2a32) !important;
  color: var(--chalk, #c8c8d0) !important;
}
@media (max-width: 767px) {
  .checkout-index-index .page-main {
    padding: 20px 16px 64px !important;
    max-width: 100% !important;
  }
  .checkout-index-index .columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  .checkout-index-index .opc-wrapper,
  .checkout-index-index .opc-sidebar {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: static !important;
    box-sizing: border-box !important;
  }
  .checkout-index-index .opc-wrapper {
    order: 0 !important;
    padding: 20px 18px 22px !important;
  }
  .checkout-index-index .opc-sidebar {
    order: 1 !important;
    padding: 20px 18px 22px !important;
  }
  .checkout-index-index .opc-estimated-wrapper {
    margin-bottom: 12px !important;
  }
  .checkout-index-index .fieldset > .field,
  .checkout-index-index .fieldset .field {
    margin-bottom: 14px !important;
  }
  .checkout-index-index .field > .label,
  .checkout-index-index .field label {
    line-height: 1.4 !important;
  }
  .checkout-index-index .input-text,
  .checkout-index-index select,
  .checkout-index-index textarea {
    min-height: 46px !important;
  }
  .checkout-index-index .payment-method-title {
    padding: 14px 16px !important;
  }
  .checkout-index-index .payment-method-content {
    padding: 16px 16px 20px !important;
  }
  .checkout-index-index .checkout-shipping-method .table-checkout-shipping-method tbody tr td {
    padding: 12px 10px !important;
  }
  .checkout-index-index .actions-toolbar {
    margin-top: 20px !important;
    display: grid !important;
    gap: 12px !important;
  }
  .checkout-index-index .actions-toolbar .action.primary,
  .checkout-index-index .checkout-payment-method .action.primary,
  .checkout-index-index .checkout-shipping-method .action.primary,
  .checkout-index-index .opc-sidebar .action.primary,
  .checkout-index-index .multishipping-checkout-login .action.primary,
  .checkout-index-index .multishipping-checkout-addresses .action.primary,
  .checkout-index-index .multishipping-checkout-overview .action.primary {
    width: 100% !important;
  }
}

/* ── end checkout page treatment ── */

@media (max-width: 767px) {
  .pf-cqpi { padding: 18px !important; }
  .pf-cqpi .cqpi-add-head {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .pf-cqpi .cqpi-add-media {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
  .pf-cqpi .cqpi-add-foot {
    flex-direction: column !important;
  }
  .pf-cqpi .cqpi-add-qty {
    width: 100% !important;
  }
  .pf-cqpi .cqpi-add-qty input {
    width: 100% !important;
  }
  .pf-cqpi .cqpi-add-btn {
    width: 100% !important;
    align-self: stretch !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   QUICK-ADD OPTIONS MODAL (Sm_CartQuickPro) — PF industrial chrome.
   GPT-5.5 direction, ADAPTED: the modal content is an IFRAME (the
   cartquickpro options page = options form only, no product image), so
   GPT's "two-column image-left" doesn't apply. We widen the legacy 420px
   strip, give the shell PF dark chrome, and let the inner column fill.
   Same palette, sharp corners only.
   ═══════════════════════════════════════════════════════════════════ */

/* Shell: widen (was a 420px phone strip) + dark PF panel with a blue datum edge. */
.modal-popup.modal-slide.smcqp-modal-popup .modal-inner-wrap,
.modal-popup.modal-slide.smcqp-modal-popup .modal-inner-wrap.smcqp-options:not(.smcqp-loading) {
  width: 760px !important;
  max-width: calc(100vw - 48px) !important;
  background: var(--bg-slab, #15151a) !important;
  border: 1px solid var(--concrete, #2a2a32) !important;
  border-top: 2px solid var(--blue, #3B7DFF) !important;
  border-radius: 2px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}
/* Overlay: dark shop-floor dim, not the gray web haze. */
body._has-modal .modals-overlay { background: var(--bg-base, #0a0a0c) !important; opacity: 0.9 !important; }

/* Content + header chrome dark. */
.smcqp-modal-popup .modal-content,
.smcqp-modal-popup #smcqp-contents { background: var(--bg-slab, #15151a) !important; }
.smcqp-modal-popup .modal-header { background: var(--bg-bay, #1a1a20) !important; border-bottom: 1px solid var(--concrete, #2a2a32) !important; }

/* Close: machined square control, blue on hover. */
.smcqp-modal-popup .action-close {
  width: 44px !important; height: 44px !important; top: 8px !important; right: 8px !important;
  background: var(--bg-raised, #202026) !important;
  border: 1px solid var(--steel, #4a4a55) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.smcqp-modal-popup .action-close:hover,
.smcqp-modal-popup .action-close:focus { background: var(--blue, #3B7DFF) !important; border-color: var(--blue, #3B7DFF) !important; }
.smcqp-modal-popup .action-close::before { color: var(--white, #e8e8ec) !important; }

/* QuickPro action bar → PF primary buttons (was legacy #0083c1, rounded). */
.smcqp-modal-popup .smcqp-actions { background: var(--bg-bay, #1a1a20) !important; border-top: 1px solid var(--concrete, #2a2a32) !important; }
.smcqp-modal-popup .smcqp-actions .smcqp-btn,
.smcqp-modal-popup .smcqp-actions .smcqp-continue {
  background: var(--blue, #3B7DFF) !important;
  border: 1px solid var(--blue, #3B7DFF) !important;
  border-radius: 2px !important;
  color: var(--white-hot, #fff) !important;
  font-family: var(--font-stencil, sans-serif) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
.smcqp-modal-popup .smcqp-actions .smcqp-btn:hover,
.smcqp-modal-popup .smcqp-actions .smcqp-continue:hover { background: #2f6ae0 !important; border-color: #2f6ae0 !important; }

/* Iframe options page (loaded WITH this theme): unclamp the 400px inner column
   so the configurator fills the wider modal. */
.cartquickpro-catalog_product-options .columns .column.main,
.cartquickpro-catalog_product-options .column.main {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  padding: 24px !important;
}
/* ── END QUICK-ADD MODAL ── */

/* ═══════════════════════════════════════════════════════════════════
   QUICK-VIEW MODAL (product title/image click on home sections).
   SEPARATE from the add-to-cart options modal. Full-screen PF panel
   with the PDP in an iframe; X top-right, CLOSE bottom-right.
   ═══════════════════════════════════════════════════════════════════ */
.pf-qv-modal { position: fixed; inset: 0; z-index: 100050; display: none; }
.pf-qv-modal.is-open { display: block; }
.pf-qv-backdrop {
  position: absolute; inset: 0;
  background: var(--bg-base, #0a0a0c);
  opacity: 0.95;
}
.pf-qv-panel {
  position: absolute;
  inset: 2.5vh 2.5vw;
  display: flex;
  flex-direction: column;
  background: var(--bg-slab, #15151a);
  border: 1px solid var(--concrete, #2a2a32);
  border-top: 2px solid var(--blue, #3B7DFF);
  border-radius: 2px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  overflow: hidden;
}
.pf-qv-body { flex: 1 1 auto; min-height: 0; }
.pf-qv-iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg-slab, #15151a); }

/* X — machined square control, top-right (mirrors the minicart X). */
.pf-qv-x {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-raised, #202026);
  border: 1px solid var(--steel, #4a4a55);
  border-radius: 2px;
  color: var(--white, #e8e8ec);
  font-family: var(--font-mono, monospace);
  font-size: 24px; line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.pf-qv-x:hover, .pf-qv-x:focus { background: var(--blue, #3B7DFF); border-color: var(--blue, #3B7DFF); color: #fff; outline: none; }

/* CLOSE — ghost PF button, bottom-right. */
.pf-qv-close-btn {
  position: absolute; bottom: 16px; right: 16px; z-index: 3;
  height: 44px; padding: 0 28px;
  background: var(--bg-slab, #15151a);
  border: 1px solid var(--blue, #3B7DFF);
  border-radius: 2px;
  color: var(--blue-hot, #5B9AFF);
  font-family: var(--font-stencil, sans-serif);
  font-size: 16px; letter-spacing: 2.5px; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pf-qv-close-btn:hover, .pf-qv-close-btn:focus { background: var(--blue, #3B7DFF); color: #fff; outline: none; }

/* Body scroll-lock while the quick-view is open. */
body.pf-qv-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* Trigger affordance — title/image/manifest part are clickable. */
.pf-qv-trigger { cursor: pointer; }
.garage-part-name.pf-qv-trigger:hover,
.manifest-part.pf-qv-trigger:hover { color: var(--blue-hot, #5B9AFF); }

/* Inside the quick-view iframe (?quickview=1 → body.pf-quickview): no header is
   rendered, so remove the sticky-header offset and tighten top spacing. */
body.pf-quickview .page-wrapper { padding-top: 0 !important; min-height: 0 !important; }
body.pf-quickview .page-main { padding-top: 20px !important; }
body.pf-quickview .nav-sections, body.pf-quickview .breadcrumbs { display: none !important; }
/* ── END QUICK-VIEW MODAL ── */

/* "From" prefix on range-priced (configurable/bundle) product cards */
.product-card .product-price .product-price-from {
  font-family: var(--font-mono, monospace);
  font-size: 0.62em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  margin-right: 0.35em;
  vertical-align: middle;
}

/* Hidden Magento fotorama gallery that powers the PDP expand-icon fullscreen
   (.gallery-zoom -> requestFullScreen). Positioned OFFSCREEN, not display:none
   or opacity:0 -- fotorama must initialize with real dimensions, and its
   fixed-position fullscreen overlay (.fotorama--fullscreen) must stay visible
   (opacity/visibility on an ancestor would hide the fixed child too). */
.pf-fs-gallery-host { position: absolute; left: -99999px; top: 0; width: 600px; height: 600px; }
.gallery-zoom { cursor: pointer; }

/* PDP trust-line icons are now inline SVGs (admin-selectable, currentColor) instead of
   Font Awesome <i>; size them to match the prior icon footprint. */
.pdp-ship-icon svg { width: 16px; height: 16px; display: block; }

/* ===== PF vehicle-selector modal (wraps the Nextlevel_Fitments YMM widget) ===== */
.pf-ymm-modal { position: fixed; inset: 0; z-index: 100000; display: none; }
.pf-ymm-modal.is-open { display: block; }
html.pf-ymm-modal-open { overflow: hidden; }
.pf-ymm-modal__backdrop { position: absolute; inset: 0; background: rgba(8,10,14,0.82); backdrop-filter: blur(3px); }
.pf-ymm-modal__shell {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--bg-slab, #16181d); border: 1px solid rgba(59,125,255,0.45);
  box-shadow: 0 0 0 1px rgba(59,125,255,0.15), 0 30px 80px rgba(0,0,0,0.6);
  border-radius: 0; padding: 36px 32px 32px;
}
.pf-ymm-modal__close {
  position: absolute; top: 12px; right: 14px; width: 34px; height: 34px;
  background: transparent; border: 1px solid rgba(255,255,255,0.12); color: var(--chalk, #eaeaef);
  font-size: 22px; line-height: 1; cursor: pointer; transition: all 0.2s;
}
.pf-ymm-modal__close:hover { border-color: var(--blue, #3B7DFF); color: var(--blue, #3B7DFF); }
.pf-ymm-modal__eyebrow { font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--blue, #3B7DFF); margin-bottom: 8px; }
.pf-ymm-modal__title { font-family: var(--font-stencil, sans-serif); font-size: 30px; line-height: 1; letter-spacing: 0.5px; color: var(--white-hot, #fff); margin: 0 0 10px; }
.pf-ymm-modal__sub { font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.6; color: var(--steel, #7a8290); margin: 0 0 24px; }
/* Stack the PF bar form vertically inside the modal */
.pf-ymm-modal__body .nlh-ymm__form { display: flex; flex-direction: column; gap: 12px; }
.pf-ymm-modal__body .fitment-field { display: block; width: 100%; }
.pf-ymm-modal__body .nlh-ymm__select { width: 100%; }
.pf-ymm-modal__body .nlh-ymm__apply { width: 100%; margin-top: 4px; }

/* ===== Fitment badge states (data-driven; replaces the old unconditional "Fits Your") ===== */
.pf-fit-badge[hidden] { display: none !important; }
.pf-fit-badge { display: inline-flex; align-items: center; }
.pf-fit-badge .pf-fit-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 8px; flex: none; }
.pf-fit-badge .pf-fit-text { font-family: var(--font-mono, monospace); text-transform: uppercase; letter-spacing: 1px; }
/* state colors (override the legacy baked-green look) */
.pf-fit-badge.fit-state-fits      { color: var(--green, #22E6A8) !important; border-color: rgba(34,230,168,0.55) !important; background: rgba(34,230,168,0.10) !important; }
.pf-fit-badge.fit-state-nofit     { color: #ff6a6a !important;               border-color: rgba(255,90,90,0.55) !important;  background: rgba(255,90,90,0.10) !important; }
.pf-fit-badge.fit-state-universal { color: var(--blue-hot, #5B9AFF) !important;  border-color: rgba(59,125,255,0.5) !important;  background: rgba(59,125,255,0.10) !important; }
.pf-fit-badge.fit-state-unknown   { color: var(--steel-light, #aab2bd) !important; border-color: rgba(255,255,255,0.18) !important; background: rgba(255,255,255,0.04) !important; }
.pdp-fitment-status.pf-fit-badge .pf-fit-text { font-size: 12px; }
/* Card context: keep the compact top-left pill metrics (was .product-fitment).
   .product-fitment supplies position/padding/radius; .fit-state-* supplies color. */
.product-card .pf-fit-badge .pf-fit-text { font-size: 9px; letter-spacing: 1.5px; }
.product-card .pf-fit-badge .pf-fit-dot { width: 5px; height: 5px; margin-right: 5px; }
/* Card fitment badges: solid dark pill so they read on both dark and light image zones */
.product-card .pf-fit-badge { background: rgba(8,10,20,0.88) !important; }
.product-card .pf-fit-badge.fit-state-fits      { border-color: rgba(34,230,168,0.80) !important; }
.product-card .pf-fit-badge.fit-state-nofit     { border-color: rgba(255,90,90,0.80) !important; }
.product-card .pf-fit-badge.fit-state-universal { border-color: rgba(59,125,255,0.80) !important; }
.product-card .pf-fit-badge.fit-state-unknown   { border-color: rgba(255,255,255,0.28) !important; }

/* ===== PDP "Fits These Vehicles" (HIGH-1: PF-skinned fitment list inside the FITMENT tab) ===== */
.pf-fits-vehicles { font-family: var(--font-mono, monospace); }
.pf-fits-vehicles__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 16px; }
.pf-fits-vehicles__title { font-family: var(--font-stencil, var(--font-mono, monospace)); text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--chalk, #EAEAEF); }
.pf-fits-vehicles__count { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel-light, #8B8F9B); white-space: nowrap; }
.pf-fits-vehicles__make-group { margin-bottom: 18px; }
.pf-fits-vehicles__make-group:last-child { margin-bottom: 0; }
.pf-fits-vehicles__make { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--blue, #3B7DFF); margin: 0 0 8px; font-weight: 600; }
.pf-fits-vehicles__make-count { color: var(--steel, #6F7480); font-weight: 400; }
.pf-fits-vehicles__list { list-style: none; margin: 0; padding: 0; }
.pf-fits-vehicles__row { display: flex; gap: 14px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12px; line-height: 1.4; }
.pf-fits-vehicles__row:last-child { border-bottom: 0; }
.pf-fits-vehicles__years { color: var(--chalk, #EAEAEF); flex: 0 0 auto; min-width: 92px; }
.pf-fits-vehicles__veh { color: var(--steel-light, #aab2bd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-fits-vehicles__sep { color: var(--concrete, #4a4f57); }
.pf-fits-vehicles--universal .pf-fits-vehicles__universal-note { font-size: 12px; line-height: 1.65; color: var(--steel-light, #8B8F9B); margin: 0; }

/* ===== CLEAR active vehicle (task #213) =====================================
   The fitment bar's x button and the YMM modal's "Clear current vehicle" link
   appear ONLY when a vehicle is active (.fitment-bar.has-vehicle / html.pf-has-vehicle,
   toggled by pf-theme.js so they are correct on FPC cookie-blind pages). CLEAR is
   visually subordinate to the SWITCH control (.fitment-bar-change) next to it. */
.fitment-bar-clear { display: none; }
.fitment-bar.has-vehicle .fitment-bar-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin-left: 8px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.42); border-radius: 50%;
  background: transparent; color: rgba(255,255,255,0.85);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.fitment-bar.has-vehicle .fitment-bar-clear:hover {
  color: var(--white-hot, #fff); border-color: var(--white-hot, #fff); background: rgba(255,255,255,0.12);
}
.fitment-bar.has-vehicle .fitment-bar-clear:focus-visible {
  outline: 2px solid var(--white-hot, #fff); outline-offset: 2px;
}

.pf-ymm-modal__foot { display: none; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); text-align: center; }
html.pf-has-vehicle .pf-ymm-modal__foot { display: block; }
.pf-ymm-modal__clear {
  background: transparent; border: 0; padding: 6px 10px; cursor: pointer;
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--steel, #7a8290);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.2s;
}
.pf-ymm-modal__clear:hover { color: var(--white-hot, #fff); }

/* ===== PF Price Match modal (Task 3) ========================================
   Re-skin the shared Nextlevel_PriceMatch modal to PF. price-match.css is module
   CSS loaded on BOTH stores, so these PF-only overrides live here (pf-theme.css
   loads only under Pf/workshop, so MVP is untouched). We: (1) remap --theme-color
   /--theme-darker so the module's var-based RED accents resolve to PF blue,
   (2) override the few HARDCODED red spots (input focus bg/glow), (3) swap the MVP
   Supra hero for the PF car image, (4) restyle the submit as a blue GHOST button
   mirroring the PDP Add to Cart, and (5) open up form spacing. No template/JS edits:
   the JS paints the hero via INLINE background-image, which our !important beats. */
.nlh-pricematch-modal-popup,
#nlh-pricematch-modal {
  --theme-color: #3B7DFF;
  --theme-darker: #2B6AE6;
}
/* Sharper PF corners (module ships an MVP-glassy 16px radius) */
.nlh-pricematch-modal-popup .modal-inner-wrap { border-radius: 4px !important; }
#nlh-pricematch-modal .nlh-pricematch__wrap { border-radius: 4px; }
/* (3) Hero swap: PF car, no MVP decal. JS sets the bg inline; !important wins. */
#nlh-pricematch-modal .nlh-pricematch__media {
  background-image: url("../images/pf-pricematch.png") !important;
  background-color: #0a0a0d;
}
/* PF title in the stencil face, matching PDP headings */
#nlh-pricematch-modal .nlh-pricematch__title {
  font-family: var(--font-stencil, 'Bebas Neue', sans-serif);
  font-weight: 400; letter-spacing: 2px; font-size: 30px;
}
/* (5) Breathing room: more outer padding + a calmer field rhythm */
#nlh-pricematch-modal .nlh-pricematch__content { padding: 40px 44px; }
#nlh-pricematch-modal .nlh-pricematch__grid { gap: 18px; margin-bottom: 18px; }
#nlh-pricematch-modal .nlh-pricematch__form .field { margin-bottom: 18px; }
#nlh-pricematch-modal .nlh-pricematch__actions { margin-top: 28px; gap: 14px; }
/* Inputs: PF-sharp corners + blue focus (override the module's hardcoded red) */
#nlh-pricematch-modal .nlh-pricematch__form input.input-text,
#nlh-pricematch-modal .nlh-pricematch__form textarea.input-text { border-radius: 3px; padding: 15px 18px; }
#nlh-pricematch-modal .nlh-pricematch__form input.input-text:focus,
#nlh-pricematch-modal .nlh-pricematch__form textarea.input-text:focus {
  border-color: var(--blue, #3B7DFF) !important;
  background: rgba(59,125,255,0.10) !important;
  box-shadow: 0 0 0 3px rgba(59,125,255,0.14) !important;
}
/* (4) Submit as a blue ghost button (mirror the PDP Add to Cart) */
#nlh-pricematch-modal .nlh-pricematch__actions button.action.primary {
  background: linear-gradient(135deg, rgba(59,125,255,0.08) 0%, rgba(59,125,255,0.18) 100%) !important;
  border: 1px solid rgba(59,125,255,0.5) !important;
  color: var(--white, #EAEAEF) !important;
  border-radius: 2px !important; box-shadow: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.1s ease !important;
}
#nlh-pricematch-modal .nlh-pricematch__actions button.action.primary:hover {
  background: linear-gradient(135deg, rgba(59,125,255,0.18) 0%, rgba(59,125,255,0.30) 100%) !important;
  border-color: var(--blue, #3B7DFF) !important;
  color: var(--white-hot, #fff) !important;
  box-shadow: 0 0 26px rgba(59,125,255,0.18) !important;
  transform: translateY(-1px) !important;
}
#nlh-pricematch-modal .nlh-pricematch__actions button.action.primary:active { transform: translateY(0) !important; }
/* Preserve the module's send-success (green) and disabled affordances under our !important */
#nlh-pricematch-modal .nlh-pricematch__actions button.action.primary.success {
  background: #1f8f3a !important; border-color: #1f8f3a !important; color: #fff !important; box-shadow: none !important;
}
#nlh-pricematch-modal .nlh-pricematch__actions button.action.primary:disabled {
  background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important;
  color: #666 !important; box-shadow: none !important; transform: none !important; cursor: not-allowed;
}
/* Match the secondary Close to the ghost primary's lighter border weight */
#nlh-pricematch-modal .nlh-pricematch__actions button.action:not(.primary) { border-width: 1px; border-radius: 2px; }

/* ===== PF Brands page (Task 4) ==============================================
   The Nextlevel_Brands directory + featured carousel render MVP-flavored (light
   cards, red #e31837 accents) from module CSS (brands.css) that loads on BOTH
   stores. We keep MVP untouched two ways:
   (A) DIRECTORY: a PF-only TEMPLATE override (Pf/workshop/Nextlevel_Brands/
       templates/directory.phtml) emits isolated pf-branddir__* markup, so
       brands.css's .nlb-dir__* rules never match on PF. Full PF styling below.
   (B) FEATURED strip: NOT overridden at the template level (keeps its inline
       carousel JS + the module default for MVP). It is re-skinned here by
       remapping its four locally-scoped vars (--nlb-red/ink/muted/border) plus
       the few hardcoded-light spots. These rules live in pf-theme.css, which
       loads ONLY under Pf/workshop, so MVP renders the module default unchanged. */

/* ---- (A) Directory: isolated PF markup, full styling ---- */
.pf-branddir { margin: 0; padding: 0; font-family: var(--font-body, 'Outfit', sans-serif); }
.pf-branddir a { text-decoration: none; }
.pf-branddir__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.pf-branddir__header-left { min-width: 0; }
.pf-branddir__eyebrow {
  display: block; margin: 0 0 10px; font-family: var(--font-mono, monospace);
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue, #3B7DFF);
}
.pf-branddir__title {
  margin: 0; color: var(--white, #EAEAEF); font-family: var(--font-stencil, 'Bebas Neue', sans-serif);
  font-size: clamp(40px, 5vw, 64px); line-height: 0.92; font-weight: 400;
  letter-spacing: 1px; text-transform: uppercase; border: none; padding: 0;
}
.pf-branddir__title-accent { color: var(--blue, #3B7DFF); }
.pf-branddir__count {
  margin: 12px 0 0; font-family: var(--font-mono, monospace); font-size: 11px;
  color: var(--steel, #8A8A98); text-transform: uppercase; letter-spacing: 0.14em;
}
.pf-branddir__search {
  display: flex; align-items: center; gap: 10px; background: var(--bg-slab, #1A1A1F);
  border: 1px solid var(--concrete, #3A3A42); border-radius: 2px; padding: 0 14px;
  height: 44px; min-width: 250px; flex-shrink: 0; transition: border-color 0.15s;
}
.pf-branddir__search:focus-within { border-color: var(--blue, #3B7DFF); }
.pf-branddir__search svg { color: var(--steel, #8A8A98); flex-shrink: 0; }
.pf-branddir__search input[type="text"] {
  flex: 1; border: none; background: transparent; font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 13px; color: var(--white, #EAEAEF); outline: none; padding: 0; height: 100%;
}
.pf-branddir__search input[type="text"]::placeholder { color: var(--steel, #8A8A98); }
.pf-branddir__search-clear { font-size: 18px; color: var(--steel, #8A8A98); line-height: 1; }
.pf-branddir__search-clear:hover { color: var(--blue, #3B7DFF); }
.pf-branddir__alpha {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 14px 0; margin: 0 0 4px;
  border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pf-branddir__alpha-link {
  font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700; color: var(--steel, #8A8A98);
  padding: 4px 9px; text-transform: uppercase; letter-spacing: 0.05em; transition: color 0.15s;
}
.pf-branddir__alpha-link:hover, .pf-branddir__alpha-link:focus { color: var(--blue, #3B7DFF); }
.pf-branddir__section { display: grid; grid-template-columns: 96px 1fr; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.pf-branddir__section:last-child { border-bottom: none; }
.pf-branddir__section-left { position: relative; }
.pf-branddir__letter {
  font-family: var(--font-stencil, 'Bebas Neue', sans-serif); font-size: 76px; font-weight: 400;
  color: var(--white, #EAEAEF); opacity: 0.10; line-height: 1; text-transform: uppercase;
  transition: color 0.3s, opacity 0.3s;
}
.pf-branddir__section:hover .pf-branddir__letter { color: var(--blue, #3B7DFF); opacity: 0.35; }
.pf-branddir__brand-count {
  font-family: var(--font-mono, monospace); font-size: 10px; color: var(--steel, #8A8A98); margin-top: 4px; letter-spacing: 0.04em;
}
.pf-branddir__section-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; padding-top: 8px; }
.pf-branddir__brand {
  font-family: var(--font-body, 'Outfit', sans-serif); font-size: 14px; font-weight: 400; color: var(--chalk, #C8C8D0);
  padding: 7px 0; display: block; transition: color 0.15s;
}
.pf-branddir__brand:hover, .pf-branddir__brand:focus { color: var(--blue, #3B7DFF); }
.pf-branddir__empty { text-align: center; color: var(--steel, #8A8A98); font-size: 15px; padding: 80px 0; }
@media (max-width: 860px) {
  .pf-branddir__header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pf-branddir__search { width: 100%; min-width: 0; }
}
@media (max-width: 768px) {
  .pf-branddir__section { grid-template-columns: 60px 1fr; padding: 22px 0; }
  .pf-branddir__letter { font-size: 52px; }
  .pf-branddir__section-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pf-branddir__section { grid-template-columns: 1fr; gap: 10px; }
  .pf-branddir__letter { font-size: 40px; }
  .pf-branddir__section-grid { grid-template-columns: 1fr; }
}

/* ---- (B) Featured carousel: palette remap (template + JS untouched) ----
   Body-class-scoped so the var remap beats the module's .nlb-featured definition
   (equal specificity would otherwise depend on load order). */
.brands-index-page .nlb-featured {
  --nlb-red: var(--blue, #3B7DFF);
  --nlb-ink: var(--white, #EAEAEF);
  --nlb-muted: var(--steel, #8A8A98);
  --nlb-border: rgba(255,255,255,0.12);
}
/* Eyebrow in the PF mono face to match the rest of the page */
.brands-index-page .nlb-featured__eyebrow { font-family: var(--font-mono, monospace); }
.brands-index-page .nlb-featured__title { font-family: var(--font-stencil, 'Bebas Neue', sans-serif); font-weight: 400; letter-spacing: 1px; }
/* Nav arrows: dark chip, blue on hover (the --nlb-ink var path would invert wrong here) */
.nlb-featured .nlb-featured__nav { background: var(--bg-panel, #202026); border-color: rgba(255,255,255,0.14); }
.nlb-featured .nlb-featured__nav:hover,
.nlb-featured .nlb-featured__nav:focus { background: var(--blue, #3B7DFF); border-color: var(--blue, #3B7DFF); }
/* Brand cards: dark panel instead of white */
.nlb-featured .nlb-featured__cell { background: var(--bg-slab, #1A1A1F); }
.nlb-featured .nlb-featured__cell:hover { border-color: rgba(59,125,255,0.45); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.nlb-featured .nlb-featured__cell-arrow { color: var(--steel, #8A8A98); }
/* Dots */
.nlb-featured .nlb-featured__dot { background: var(--concrete, #3A3A42); }
.nlb-featured .nlb-featured__dot:hover,
.nlb-featured .nlb-featured__dot:focus { background: var(--steel-light, #8A8A98); }

/* ---- (C) Brand VIEW page (/brands/<key>) ----
   Re-skin the Nextlevel_Brands module's MVP red/light brand-view surfaces (hero accents,
   subcategory strip, products heading, story, YMM card, price slider, shop-by sidebar) to
   the PF dark/blue palette. Scoped to the auto-generated full-action body class
   .brands-view-index (NOT .brand-page: the layout sets value="brand-page brand-page--editorial",
   but Magento's addBodyClass() collapses the space to a hyphen -> the dead single token
   "brand-page-brand-page--editorial", so the module's own .brand-page rules never match either;
   not worth "fixing" in the shared layout since that would resurrect those dead light rules on
   MVP). This file is PF-only, so MVP is untouched. brands.css loads AFTER this file in the merged
   bundle, so every override wins by carrying higher specificity (the leading .brands-view-index)
   and matches !important only where a base module rule is !important. Module markup + JS untouched.
   Tokens: red #e31837 -> var(--blue); light #f5f5f5/#fafafa/#fff -> dark slab/panel;
   invisible #121212 titles -> var(--white); muted #6f6f6f/#666/#333 -> chalk/steel. */

/* Hero: blue badge, blue slash accent, blue primary CTA + strip nav, blue card hover bar */
.brands-view-index .nlb-brandhero__hero-slash {
  background: linear-gradient(to right, transparent 0%, transparent 18%,
    rgba(59,125,255,0.14) 22%, rgba(59,125,255,0.10) 35%, rgba(59,125,255,0.05) 55%,
    rgba(59,125,255,0.02) 80%, transparent 100%);
}
.brands-view-index .nlb-brandhero__hero-slash::after { background: var(--blue, #3B7DFF); }
.brands-view-index .nlb-brandhero__badge { background: var(--blue, #3B7DFF); color: var(--white-hot, #fff); }
.brands-view-index .nlb-brandhero__button--primary { background: var(--blue, #3B7DFF); border-color: var(--blue, #3B7DFF); }
.brands-view-index .nlb-brandhero__button--primary:hover { background: var(--blue-hot, #5B9AFF); border-color: var(--blue-hot, #5B9AFF); }
.brands-view-index .nlb-brandhero__nav-btn { background: var(--blue, #3B7DFF); }
.brands-view-index .nlb-brandhero__nav-btn:hover:not(:disabled) { background: var(--blue-hot, #5B9AFF); }
.brands-view-index .nlb-brandhero__card::before { background: var(--blue, #3B7DFF); }
/* Neutralize the hardcoded "Curated by Pure Function" kicker (renders only for branded
   logos; the brand-name strong below it remains). Re-texting needs a template override. */
.brands-view-index .nlb-brandhero__logo-kicker { display: none; }

/* Subcategory strip: dark slab instead of #f5f5f5; light title + light edge line */
.brands-view-index .nlb-brandhero__strip { background: var(--bg-slab, #1A1A1F); }
.brands-view-index .nlb-brandhero__strip-title { color: var(--white, #EAEAEF) !important; }
.brands-view-index .nlb-brandhero__strip-line {
  background: linear-gradient(to right, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.02) 80%, transparent 100%);
}

/* Products heading: blue eyebrow, light title (was invisible #121212), light divider + meta */
.brands-view-index .nlb-brand-products-head__eyebrow { color: var(--blue, #3B7DFF); }
.brands-view-index .nlb-brand-products-head__inner { border-bottom-color: rgba(255,255,255,0.10); }
.brands-view-index .nlb-brand-products-head__title { color: var(--white, #EAEAEF); }
.brands-view-index .nlb-brand-products-head__meta { color: var(--steel, #8A8A98); }

/* Story: blue eyebrow + links + blockquote rule, light titles/body, dark blockquote panel */
.brands-view-index .nlb-brand-story { border-top-color: rgba(255,255,255,0.10); }
.brands-view-index .nlb-brand-story__eyebrow { color: var(--blue, #3B7DFF); }
.brands-view-index .nlb-brand-story__title { color: var(--white, #EAEAEF); }
.brands-view-index .nlb-brand-story__copy { color: var(--steel, #8A8A98); }
.brands-view-index .nlb-brand-story__content { color: var(--chalk, #C8C8D0); }
.brands-view-index .nlb-brand-story__content h2,
.brands-view-index .nlb-brand-story__content h3,
.brands-view-index .nlb-brand-story__content h4 { color: var(--white, #EAEAEF); }
.brands-view-index .nlb-brand-story__content a { color: var(--blue, #3B7DFF) !important; }
.brands-view-index .nlb-brand-story__content blockquote {
  border-left-color: var(--blue, #3B7DFF);
  background: var(--bg-slab, #1A1A1F);
  color: var(--chalk, #C8C8D0);
}

/* YMM fitment card (module scopes these under .brands-view-indexWITH !important, so prefix body
   to win on specificity): dark panel, blue accents, dark selects with light text */
body.brands-view-index .nlh-ymm-card__shell {
  background: var(--bg-panel, #202026) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
body.brands-view-index .nlh-ymm-card__eyebrow { color: var(--blue, #3B7DFF) !important; }
body.brands-view-index .nlh-ymm-card__eyebrow::after {
  background: linear-gradient(to right, rgba(255,255,255,0.16), rgba(255,255,255,0.04), transparent) !important;
}
body.brands-view-index .nlh-ymm-card__field-label { color: var(--chalk, #C8C8D0) !important; }
body.brands-view-index .nlh-ymm-card__field-step { color: var(--blue, #3B7DFF) !important; border-color: var(--blue, #3B7DFF) !important; }
body.brands-view-index .nlh-ymm-card .nlh-ymm__select,
body.brands-view-index .nlh-ymm-card select {
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--white, #EAEAEF) !important;
  background: var(--bg-slab, #1A1A1F) !important;
}
body.brands-view-index .nlh-ymm-card .nlh-ymm__select:focus,
body.brands-view-index .nlh-ymm-card select:focus { border-color: var(--blue, #3B7DFF) !important; }

/* Price slider: concrete track, blue range + handle, dark value inputs with light text */
.brands-view-index .nlb-brand-price-slider .ui-slider { background: var(--concrete, #3A3A42); }
.brands-view-index .nlb-brand-price-slider .ui-slider .ui-slider-range { background: var(--blue, #3B7DFF); }
.brands-view-index .nlb-brand-price-slider .ui-slider .ui-slider-handle {
  background: var(--blue, #3B7DFF);
  border: 2px solid var(--bg-base, #111113);
}
.brands-view-index .nlb-brand-price-slider .ui-slider .ui-slider-handle:hover,
.brands-view-index .nlb-brand-price-slider .ui-slider .ui-slider-handle:focus {
  background: var(--blue-hot, #5B9AFF);
  border-color: var(--bg-base, #111113);
}
.brands-view-index .nlb-brand-price-slider .price-slider-values { color: var(--chalk, #C8C8D0); }
.brands-view-index .nlb-brand-price-slider .price-slider-values input {
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--white, #EAEAEF);
  background: var(--bg-slab, #1A1A1F);
}
.brands-view-index .nlb-brand-price-slider .price-filter-separator { color: var(--steel, #8A8A98); }
.brands-view-index .nlb-brand-price-slider .filter-currency { color: var(--steel-light, #8A8A98); }
.brands-view-index .nlb-price-clear { color: var(--blue, #3B7DFF) !important; }

/* Shop-by sidebar: dark-mode stencil title (was the light "SHOP BY CATEGORY" bar), light
   category links, dark count chips, faint dividers */
.brands-view-index .nlb-brand-shopby .filter-options-title {
  font-family: var(--font-stencil, 'Bebas Neue', sans-serif);
  font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--white, #EAEAEF);
}
.brands-view-index .nlb-brand-sidebar-cats .item { border-bottom-color: rgba(255,255,255,0.07); }
.brands-view-index .nlb-brand-sidebar-cats .item a { color: var(--chalk, #C8C8D0); }
.brands-view-index .nlb-brand-sidebar-cats .item a:hover { color: var(--white, #EAEAEF); }
.brands-view-index .nlb-brand-sidebar-cats .count {
  border: 1px solid rgba(255,255,255,0.14);
  background: var(--bg-slab, #1A1A1F);
  color: var(--steel-light, #8A8A98);
}
.brands-view-index .nlb-brand-shopby .nlb-brand-filter-section + .nlb-brand-filter-section { border-top-color: rgba(255,255,255,0.08); }
.brands-view-index .nlb-brand-shopby .nlb-brand-filter-section + .nlb-brand-filter-section::before { background: rgba(255,255,255,0.08); }

/* NLH editorial product description: theme role-token skin (Phase 36). Scoped to .nlh-desc;
   defines the --desc-* roles so editorial descriptions render in this store's palette. Additive,
   harmless elsewhere (only .nlh-desc consumes these). Source of truth: lib/editorial_description.theme_tokens_css. */
.nlh-desc{--desc-on-surface: var(--white, #EAEAEF);--desc-on-surface-dim: var(--chalk, #C8C8D0);--desc-primary: var(--blue, #3B7DFF);--desc-outline: color-mix(in srgb, var(--white, #EAEAEF) 16%, transparent);--desc-outline-soft: color-mix(in srgb, var(--white, #EAEAEF) 9%, transparent);--desc-container: var(--bg-panel, #202026);}

.nlh-desc{--_fg:var(--desc-on-surface,currentColor);--_dim:var(--desc-on-surface-dim,color-mix(in srgb,currentColor 68%,transparent));--_accent:var(--desc-primary,currentColor);--_line:var(--desc-outline,color-mix(in srgb,currentColor 18%,transparent));--_line-soft:var(--desc-outline-soft,color-mix(in srgb,currentColor 10%,transparent));--_panel:var(--desc-container,color-mix(in srgb,currentColor 4%,transparent));color:var(--_fg);font-size:clamp(15px,0.95rem + 0.15vw,17px);line-height:1.65;max-width:72ch;}.nlh-desc *{box-sizing:border-box;}.nlh-desc .nlh-kicker{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--_accent);margin:0 0 .7rem;}.nlh-desc .nlh-lead{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.5rem);line-height:1.08;letter-spacing:-0.018em;font-weight:680;margin:0 0 1rem;max-width:22ch;overflow-wrap:normal;word-break:keep-all;}.nlh-desc .nlh-lead::after{content:"";display:block;width:3rem;height:3px;margin-top:1.05rem;background:var(--_accent);border-radius:1px;}.nlh-desc .nlh-standfirst{font-size:clamp(1.1rem,1rem + 0.5vw,1.4rem);color:var(--_fg);line-height:1.45;letter-spacing:-0.005em;margin:0 0 1.35rem;max-width:54ch;}.nlh-desc h2.nlh-h{font-size:clamp(.92rem,0.88rem + 0.22vw,1.05rem);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--_dim);margin:3.4rem 0 1.15rem;padding-top:1.15rem;border-top:1px solid var(--_line);}.nlh-desc .nlh-body>* + *{margin-top:1rem;}.nlh-desc .nlh-body p{max-width:65ch;}.nlh-desc .nlh-body ul{padding-left:1.1rem;margin:.5rem 0;}.nlh-desc .nlh-body li{margin:.3rem 0;}.nlh-desc .nlh-body li::marker{color:var(--_accent);}.nlh-desc .nlh-specs{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:0;margin:.5rem 0;border-top:1px solid var(--_line);}.nlh-desc .nlh-specs>div{display:contents;}.nlh-desc .nlh-specs dt{font-weight:650;color:var(--_dim);padding:.6rem 1rem .6rem 0;border-bottom:1px solid var(--_line-soft);}.nlh-desc .nlh-specs dd{margin:0;padding:.6rem 0;border-bottom:1px solid var(--_line-soft);font-weight:600;font-size:1.05em;font-variant-numeric:tabular-nums;}.nlh-desc .nlh-parts{columns:2;column-gap:2.75rem;margin:.85rem 0 0;padding:0;list-style:none;}.nlh-desc .nlh-parts li{break-inside:avoid;padding:.5rem 0;line-height:1.42;border-bottom:1px solid var(--_line-soft);}.nlh-desc .nlh-parts .nlh-q{color:var(--_dim);font-weight:700;font-variant-numeric:tabular-nums;margin-right:.5rem;}@media (max-width:560px){.nlh-desc .nlh-parts{columns:1;}}.nlh-desc .nlh-fit{list-style:none;padding:0;margin:.5rem 0;}.nlh-desc .nlh-fit li{padding:.4rem 0;border-bottom:1px solid var(--_line-soft);font-variant-numeric:tabular-nums;}.nlh-desc .nlh-note{color:var(--_dim);font-size:.92em;margin-top:2.5rem;}@media (max-width:560px){.nlh-desc .nlh-specs{grid-template-columns:1fr;}.nlh-desc .nlh-specs dt{padding-bottom:.1rem;border-bottom:0;}}

.pdp-description:has(.nlh-desc),.pdp-description:has(.pf-pdp-desc){max-width:none!important;margin-inline:0!important}

/* =========================================================================
   OPTION 4 - Full-Width Structured Sections (editorial PDP description).
   Values copied from the Option 4 mockup (px = independent of the 10px root);
   classes prefixed .pf-pdp-desc-* and scoped. !important on type/color wins
   against the theme's .pdp-description text overrides so it renders like the
   mockup on the real PDP. Palette/fonts mirror the mockup :root, scoped here.
   ========================================================================= */
.pf-pdp-desc{
  --pfd-bg-panel:#11141a; --pfd-border-subtle:rgba(255,255,255,0.08);
  --pfd-border-medium:rgba(255,255,255,0.14);
  --pfd-chalk:#e8ecf2; --pfd-chalk-dim:#b4bac6; --pfd-steel-light:#a0a8bc; --pfd-blue:#3b7dff;
  --pfd-font-mono:'JetBrains Mono','SF Mono',Monaco,Consolas,monospace;
  --pfd-font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --pfd-font-stencil:'Anton','Bebas Neue',sans-serif;
  max-width:1400px;
}
.pf-pdp-desc *{ box-sizing:border-box; }
.pf-pdp-desc ul li::before, .pf-pdp-desc ol li::before{ content:none !important; display:none !important; }
/* lead */
.pf-pdp-desc-lead{ max-width:1000px; margin-bottom:48px; }
.pf-pdp-desc-kicker{ font-family:var(--pfd-font-mono) !important; font-size:11px !important; letter-spacing:.2em; text-transform:uppercase; color:var(--pfd-blue) !important; margin:0 0 14px; }
.pf-pdp-desc-headline{ font-family:var(--pfd-font-stencil) !important; font-size:52px !important; line-height:1.05 !important; letter-spacing:.01em; text-transform:uppercase; color:var(--pfd-chalk) !important; margin:0 0 18px; max-width:22ch; font-weight:400; }
.pf-pdp-desc-rule{ width:64px; height:2px; background:var(--pfd-blue); margin:0 0 28px; }
.pf-pdp-desc-deck{ font-family:var(--pfd-font-sans) !important; font-size:19px !important; line-height:1.5 !important; color:var(--pfd-chalk) !important; max-width:38em; margin:0; }
/* key facts strip */
.pf-pdp-desc-keyfacts{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--pfd-border-medium); margin:0 0 56px; }
.pf-pdp-desc-keyfact{ padding:24px 28px; border-right:1px solid var(--pfd-border-subtle); }
.pf-pdp-desc-keyfact:last-child{ border-right:none; }
.pf-pdp-desc-keyfact-label{ font-family:var(--pfd-font-mono) !important; font-size:10px !important; letter-spacing:.2em; text-transform:uppercase; color:var(--pfd-steel-light) !important; margin:0 0 10px; }
.pf-pdp-desc-keyfact-value{ font-family:var(--pfd-font-stencil) !important; font-size:26px !important; color:var(--pfd-chalk) !important; line-height:1 !important; text-transform:uppercase; letter-spacing:.01em; font-weight:400; }
.pf-pdp-desc-keyfact-value.accent{ color:var(--pfd-blue) !important; }
.pf-pdp-desc-keyfact-sub{ font-family:var(--pfd-font-mono) !important; font-size:11px !important; color:var(--pfd-steel-light) !important; margin:6px 0 0; }
/* narrative */
.pf-pdp-desc-narrative{ max-width:980px; margin:0 0 56px; }
.pf-pdp-desc-narrative-label{ font-family:var(--pfd-font-mono) !important; font-size:11px !important; letter-spacing:.2em; text-transform:uppercase; color:var(--pfd-blue) !important; margin:0 0 14px; }
.pf-pdp-desc-narrative-title{ font-family:var(--pfd-font-stencil) !important; font-size:28px !important; color:var(--pfd-chalk) !important; text-transform:uppercase; letter-spacing:.01em; margin:0 0 24px; font-weight:400; }
.pf-pdp-desc-narrative-body{ columns:2; column-gap:56px; }
.pf-pdp-desc-narrative-body p{ font-family:var(--pfd-font-sans) !important; font-size:15.5px !important; line-height:1.75 !important; color:var(--pfd-chalk-dim) !important; margin:0 0 18px; break-inside:avoid; }
/* callout */
.pf-pdp-desc-callout{ background:var(--pfd-bg-panel); border-left:3px solid var(--pfd-blue); padding:28px 32px; max-width:980px; }
.pf-pdp-desc-callout-label{ font-family:var(--pfd-font-mono) !important; font-size:10px !important; letter-spacing:.2em; text-transform:uppercase; color:var(--pfd-blue) !important; margin:0 0 10px; }
.pf-pdp-desc-callout-text{ font-family:var(--pfd-font-sans) !important; font-size:14px !important; line-height:1.7 !important; color:var(--pfd-chalk-dim) !important; }
/* responsive (mockup breakpoint + the <600 single-col) */
@media (max-width:1100px){
  .pf-pdp-desc-narrative-body{ columns:1; }
  .pf-pdp-desc-keyfacts{ grid-template-columns:repeat(2,1fr); }
  .pf-pdp-desc-keyfact{ border-bottom:1px solid var(--pfd-border-subtle); }
  .pf-pdp-desc-keyfact:nth-child(2){ border-right:none; }
}
@media (max-width:600px){
  .pf-pdp-desc-headline{ font-size:38px !important; }
  .pf-pdp-desc-keyfacts{ grid-template-columns:1fr; }
  .pf-pdp-desc-keyfact{ border-right:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLATFORMS - 2JZ FAMILY   (concept page, CMS identifier: platforms)
   Scoped under .pf-platforms. Uses the :root tokens defined at the top.
   YMM portal tiles link to /shop/ymm/{year}/{make}/{model}[/{sub}].
   ═══════════════════════════════════════════════════════════════════════════ */
/* full-bleed reset for the cms-full-width platforms page */
[class*="cms-platforms"] .column.main { padding:0 !important; max-width:none !important; width:100% !important; }
[class*="cms-platforms"] .page-main { padding:0 !important; max-width:none !important; }
.pf-platforms { background:var(--bg-base); color:var(--chalk); font-family:var(--font-body); overflow:hidden; }
.pf-platforms *, .pf-platforms *::before, .pf-platforms *::after { box-sizing:border-box; }

/* shared eyebrow */
.pf-platforms .pfp-eyebrow { display:flex; gap:22px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--blue); }
.pf-platforms .pfp-eyebrow span { white-space:nowrap; }

/* 1. HERO */
.pfp-hero { position:relative; min-height:84vh; display:flex; align-items:center; background-size:cover; background-position:center; background-color:#0b0b0e; }
.pfp-hero-veil { position:absolute; inset:0; z-index:1; background:
   linear-gradient(95deg, rgba(7,7,10,0.94) 0%, rgba(7,7,10,0.72) 40%, rgba(7,7,10,0.32) 64%, rgba(7,7,10,0.55) 100%),
   linear-gradient(180deg, rgba(7,7,10,0.5) 0%, transparent 26%, transparent 58%, rgba(7,7,10,0.9) 100%); }
.pfp-hero-inner { position:relative; z-index:2; padding:0 var(--pad-side); max-width:1040px; }
.pfp-hero .pfp-eyebrow { margin-bottom:26px; }
.pfp-hero-title { font-family:var(--font-stencil); font-size:clamp(64px,12vw,168px); line-height:0.88; letter-spacing:2px; color:var(--white-hot); text-transform:uppercase; margin:0 0 24px; text-shadow:0 6px 70px rgba(0,0,0,0.65); }
.pfp-hero-sub { font-family:var(--font-mono); font-size:clamp(13px,1.5vw,17px); line-height:1.7; color:var(--chalk); max-width:640px; }
.pfp-hero-scroll { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2; font-family:var(--font-mono); font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--steel); }
.pfp-hero-scroll::after { content:''; display:block; width:1px; height:26px; margin:8px auto 0; background:linear-gradient(180deg,var(--blue),transparent); }

/* 2. INTRO CONTEXT */
.pfp-intro { padding:var(--pad-section) var(--pad-side); border-bottom:1px solid var(--concrete); }
.pfp-intro-inner { max-width:720px; margin:0 auto; }
.pfp-intro-inner p { margin:0 0 24px; }
.pfp-intro-inner p:first-child { font-family:var(--font-mono); font-size:clamp(13px,1.5vw,15px); line-height:1.85; color:var(--steel-light); letter-spacing:.3px; }
.pfp-intro-inner p:nth-child(2) { font-family:var(--font-body); font-size:clamp(18px,2.1vw,23px); line-height:1.7; color:var(--chalk); }
.pfp-intro-inner p:last-child { margin-bottom:0; font-family:var(--font-body); font-size:clamp(18px,2.1vw,23px); line-height:1.7; color:var(--white-hot); }

/* 3. ENGINE FOCUS BREAKS */
.pfp-break { position:relative; height:clamp(220px,40vh,440px); background-size:cover; background-position:center; background-color:#0b0b0e; display:flex; align-items:flex-end; overflow:hidden; }
.pfp-break-veil { position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,7,10,0.55) 0%, rgba(7,7,10,0.18) 42%, rgba(7,7,10,0.78) 100%); }
.pfp-break-label { position:relative; z-index:1; padding:0 var(--pad-side) 26px; font-family:var(--font-mono); font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--blue); }
.pfp-break-inline { margin:clamp(48px,7vw,92px) 0; }

/* 4. PLATFORM GRID */
.pfp-grid-wrap { padding:var(--pad-section) var(--pad-side); }
.pfp-tier-sep { display:flex; align-items:center; gap:18px; margin:0 0 30px; }
.pfp-grid + .pfp-tier-sep, .pfp-break-inline + .pfp-tier-sep { margin-top:clamp(40px,6vw,80px); }
.pfp-tier-code { font-family:var(--font-mono); font-size:12px; letter-spacing:2px; color:var(--blue); text-transform:uppercase; font-weight:700; }
.pfp-tier-name { font-family:var(--font-stencil); font-size:clamp(22px,3vw,34px); letter-spacing:1px; color:var(--white); text-transform:uppercase; }
.pfp-tier-rule { flex:1; height:1px; background:linear-gradient(90deg,var(--concrete),transparent); }
.pfp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

/* TILE */
.pfp-tile { position:relative; display:block; aspect-ratio:4/5; border-radius:3px; overflow:hidden; background:var(--bg-slab); border:1px solid var(--concrete); isolation:isolate; transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .35s; }
/* required cohesion treatment on EVERY tile image (Unsplash or AI) */
.pfp-tile-media { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; background-color:#0e0e12; filter:brightness(0.92) contrast(1.02) saturate(1.06); transition:transform .6s cubic-bezier(.22,1,.36,1), filter .35s; }
.pfp-tile-grad { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,7,10,0.02) 0%, rgba(7,7,10,0.0) 46%, rgba(7,7,10,0.48) 72%, rgba(7,7,10,0.93) 100%); }
.pfp-tile-chassis { position:absolute; top:11px; left:11px; z-index:3; font-family:var(--font-mono); font-size:11px; letter-spacing:.5px; color:var(--blue); background:rgba(8,8,12,0.72); border:1px solid rgba(59,125,255,0.32); padding:4px 7px; border-radius:2px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); max-width:72%; }
.pfp-tile-tag { position:absolute; top:11px; right:11px; z-index:3; display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; color:var(--chalk); background:rgba(8,8,12,0.72); border:1px solid var(--edge-light); padding:4px 8px; border-radius:2px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); text-transform:uppercase; }
.pfp-tag-dot { width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.pfp-tag-usdm .pfp-tag-dot { background:var(--blue); box-shadow:0 0 6px var(--blue); }
.pfp-tag-jdm .pfp-tag-dot { background:var(--caution); box-shadow:0 0 6px var(--caution); }
.pfp-tile-content { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:18px 15px 15px; display:flex; flex-direction:column; gap:5px; }
.pfp-tile-name { font-family:var(--font-stencil); font-size:clamp(20px,1.7vw,25px); line-height:1; letter-spacing:.5px; color:var(--white-hot); text-transform:uppercase; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.pfp-tile-sub { font-family:var(--font-mono); font-size:10px; letter-spacing:.5px; color:var(--steel-light); text-transform:uppercase; }
.pfp-tile-trans { font-family:var(--font-mono); font-size:11px; color:var(--blue-hot); letter-spacing:.3px; }
.pfp-tile-years { font-family:var(--font-mono); font-size:11.5px; color:var(--steel-light); letter-spacing:.3px; }
.pfp-tile-variant { align-self:flex-start; margin-top:5px; font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:3px 8px; border-radius:2px; border:1px solid var(--edge-light); }
.pfp-eng-gte { color:var(--blue); border-color:rgba(59,125,255,0.42); }
.pfp-eng-ge { color:var(--chalk); border-color:rgba(255,255,255,0.16); }
.pfp-eng-fse { color:var(--caution); border-color:rgba(232,168,32,0.42); }
.pfp-tile-oneliner { font-family:var(--font-body); font-size:12.5px; line-height:1.5; color:var(--chalk); max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .3s ease, margin .4s ease; }
/* hover state */
.pfp-tile:hover { transform:translateY(-2px) scale(1.02); border-color:var(--blue); box-shadow:0 0 0 1px var(--blue), 0 18px 50px rgba(0,0,0,0.55), 0 0 42px var(--blue-glow); z-index:5; }
.pfp-tile:hover .pfp-tile-media { transform:scale(1.06); filter:brightness(0.95) contrast(1.1) saturate(1.08); }
.pfp-tile:hover .pfp-tile-oneliner, .pfp-tile:focus-within .pfp-tile-oneliner { max-height:90px; opacity:1; margin-top:5px; }
.pfp-tile:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.pfp-tile.pfp-loading { opacity:.55; }

/* 5. ENGINE VARIANT BREAKDOWN */
.pfp-variants { padding:var(--pad-section) var(--pad-side); border-top:1px solid var(--concrete); background:var(--bg-slab); }
.pfp-variants-head { max-width:1400px; margin:0 auto 40px; }
.pfp-variants-title { font-family:var(--font-stencil); font-size:clamp(30px,5vw,56px); letter-spacing:1px; color:var(--white); text-transform:uppercase; margin:14px 0 0; }
.pfp-variants-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pfp-variant-card { background:var(--bg-base); border:1px solid var(--concrete); border-radius:3px; padding:30px 28px; transition:border-color .25s, transform .25s; }
.pfp-variant-card:hover { border-color:var(--blue); transform:translateY(-3px); }
.pfp-variant-code { font-family:var(--font-stencil); font-size:40px; letter-spacing:1px; line-height:1; display:inline-block; }
.pfp-variant-kicker { display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--steel-light); margin:8px 0 18px; }
.pfp-variant-card p { font-family:var(--font-body); font-size:15px; line-height:1.7; color:var(--chalk); margin:0; }

/* 6. CTA */
.pfp-cta { padding:var(--pad-section) var(--pad-side); text-align:center; border-top:1px solid var(--concrete); background:radial-gradient(ellipse at 50% 0%, rgba(59,125,255,0.09), transparent 60%), var(--bg-base); }
.pfp-cta-inner { max-width:780px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.pfp-cta .pfp-eyebrow { justify-content:center; margin-bottom:18px; }
.pfp-cta-title { font-family:var(--font-stencil); font-size:clamp(30px,5vw,52px); line-height:1.05; letter-spacing:1px; color:var(--white); text-transform:uppercase; margin:0 0 32px; max-width:20ch; }
.pfp-cta-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.pf-platforms a.pfp-btn { display:inline-flex; align-items:center; gap:10px; padding:15px 30px; font-family:var(--font-stencil); font-size:16px; letter-spacing:3px; text-transform:uppercase; border-radius:2px; transition:background .2s, border-color .2s, color .2s, box-shadow .2s; }
.pf-platforms a.pfp-btn-solid { background:var(--blue); color:var(--white-hot); }
.pf-platforms a.pfp-btn-solid:hover { background:var(--blue-hot); box-shadow:0 0 40px var(--blue-glow); }
.pf-platforms a.pfp-btn-ghost { border:1px solid var(--concrete); color:var(--chalk); }
.pf-platforms a.pfp-btn-ghost:hover { border-color:var(--steel-light); color:var(--white); }
.pfp-btn-arrow { font-size:14px; }

/* RESPONSIVE: 4-col desktop / 2-col tablet / 1-col mobile */
@media (max-width:1024px){
  .pfp-grid { grid-template-columns:repeat(2,1fr); }
  .pfp-variants-grid { grid-template-columns:1fr; max-width:540px; }
}
@media (max-width:560px){
  .pfp-grid { grid-template-columns:1fr; }
  .pfp-tile { aspect-ratio:16/10; }
  .pfp-hero { min-height:76vh; }
}
/* touch devices have no hover: always reveal the one-liner */
@media (hover:none){
  .pf-platforms .pfp-tile-oneliner { max-height:90px; opacity:1; margin-top:5px; }
}

/* ═══════════════ CONCEPT 3: EDITORIAL INDEX (.pf-platforms-test-3) ═══════════════ */
.pf-platforms-test-3 .c3-wrapper { max-width:1500px; margin:0 auto; padding:var(--pad-section) var(--pad-side); display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,80px); align-items:start; }
.pf-platforms-test-3 .c3-index { display:flex; flex-direction:column; }
.pf-platforms-test-3 .c3-section-label { font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--blue); margin:34px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--concrete); text-transform:uppercase; }
.pf-platforms-test-3 .c3-section-label:first-child { margin-top:0; }
.pf-platforms-test-3 .c3-entry { display:grid; grid-template-columns:34px 1fr auto; gap:16px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--concrete); transition:padding .2s ease, border-color .2s ease; }
.pf-platforms-test-3 .c3-entry:hover, .pf-platforms-test-3 .c3-entry.is-active { padding-left:12px; border-bottom-color:var(--blue); }
.pf-platforms-test-3 .c3-entry:hover .c3-entry-name, .pf-platforms-test-3 .c3-entry.is-active .c3-entry-name { color:var(--blue); }
.pf-platforms-test-3 .c3-entry:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.pf-platforms-test-3 .c3-num { font-family:var(--font-mono); font-size:11px; color:var(--steel); letter-spacing:1px; }
.pf-platforms-test-3 .c3-entry-main { min-width:0; }
.pf-platforms-test-3 .c3-entry-name { font-family:var(--font-stencil); font-size:22px; line-height:1; letter-spacing:.5px; text-transform:uppercase; color:var(--white); margin-bottom:4px; transition:color .2s ease; }
.pf-platforms-test-3 .c3-entry-trans { font-family:var(--font-mono); font-size:11px; color:var(--steel-light); }
.pf-platforms-test-3 .c3-entry-chassis { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:var(--blue); text-align:right; line-height:1.5; white-space:nowrap; }
.pf-platforms-test-3 .c3-entry-chassis .yr { color:var(--steel); display:block; margin-top:2px; }
.pf-platforms-test-3 .c3-display { position:sticky; top:40px; height:calc(100vh - 80px); max-height:820px; overflow:hidden; border:1px solid var(--concrete); border-radius:3px; display:flex; align-items:flex-end; isolation:isolate; }
.pf-platforms-test-3 .c3-display-media { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; background-color:#0e0e12; filter:brightness(0.96) contrast(1.02) saturate(1.05); }
.pf-platforms-test-3 .c3-display-veil { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,7,10,0.1) 0%, rgba(7,7,10,0.55) 58%, rgba(7,7,10,0.95) 100%); }
.pf-platforms-test-3 .c3-display-content { position:relative; z-index:2; padding:clamp(28px,3vw,44px); width:100%; }
.pf-platforms-test-3 .c3-display-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--blue); margin-bottom:12px; text-transform:uppercase; }
.pf-platforms-test-3 .c3-display-name { font-family:var(--font-stencil); font-size:clamp(40px,4vw,58px); line-height:0.95; text-transform:uppercase; color:var(--white-hot); margin:0 0 12px; }
.pf-platforms-test-3 .c3-display-trans { font-family:var(--font-mono); font-size:13px; color:var(--blue-hot); margin-bottom:18px; }
.pf-platforms-test-3 .c3-display-meta { font-family:var(--font-mono); font-size:12px; color:var(--chalk); line-height:1.65; margin-bottom:24px; }
.pf-platforms-test-3 a.c3-display-cta { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-stencil); font-size:15px; letter-spacing:2px; text-transform:uppercase; color:var(--white-hot); background:var(--blue); padding:14px 26px; border-radius:2px; transition:background .2s, box-shadow .2s; }
.pf-platforms-test-3 a.c3-display-cta:hover { background:var(--blue-hot); box-shadow:0 0 36px var(--blue-glow); }
@media (max-width:1024px){
  .pf-platforms-test-3 .c3-wrapper { grid-template-columns:1fr; gap:28px; }
  .pf-platforms-test-3 .c3-display { position:relative; top:0; height:auto; aspect-ratio:16/10; max-height:none; order:-1; }
}

/* ═══════════════ CONCEPT 4: ASYMMETRIC MASTHEAD (.pf-platforms-test-4) ═══════════════ */
.pf-platforms-test-4 .c4-masthead { position:relative; min-height:90vh; overflow:hidden; background-size:cover; background-position:center; background-color:#0b0b0e; display:flex; }
.pf-platforms-test-4 .c4-masthead-veil { position:absolute; inset:0; z-index:1; background:linear-gradient(135deg, rgba(7,7,10,0.9) 0%, rgba(7,7,10,0.42) 40%, rgba(7,7,10,0.3) 60%, rgba(7,7,10,0.93) 100%); }
.pf-platforms-test-4 .c4-masthead-content { position:relative; z-index:2; padding:clamp(40px,6vw,80px) var(--pad-side); max-width:1500px; margin:0 auto; width:100%; min-height:90vh; display:flex; flex-direction:column; justify-content:space-between; gap:40px; }
.pf-platforms-test-4 .c4-masthead-top { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.pf-platforms-test-4 .c4-mastlabel { font-family:var(--font-mono); font-size:12px; letter-spacing:2px; color:var(--blue); text-transform:uppercase; }
.pf-platforms-test-4 .c4-edition { font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--steel-light); text-align:right; line-height:1.7; text-transform:uppercase; }
.pf-platforms-test-4 .c4-edition strong { color:var(--white); font-weight:700; }
.pf-platforms-test-4 .c4-masthead-main { margin-top:auto; }
.pf-platforms-test-4 .c4-feature-label { font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--blue); margin-bottom:16px; text-transform:uppercase; }
.pf-platforms-test-4 .c4-title { font-family:var(--font-stencil); font-size:clamp(80px,12vw,200px); line-height:0.84; letter-spacing:1px; text-transform:uppercase; color:var(--white-hot); margin:0 0 24px; text-shadow:0 6px 70px rgba(0,0,0,0.6); }
.pf-platforms-test-4 .c4-title-line2 { color:var(--blue); }
.pf-platforms-test-4 .c4-deck { font-family:var(--font-mono); font-size:14px; color:var(--chalk); max-width:540px; line-height:1.7; }
.pf-platforms-test-4 .c4-masthead-bottom { padding-top:40px; border-top:1px solid rgba(255,255,255,0.18); }
.pf-platforms-test-4 .c4-stats { display:flex; gap:clamp(32px,5vw,64px); flex-wrap:wrap; }
.pf-platforms-test-4 .c4-stat-num { font-family:var(--font-stencil); font-size:clamp(44px,5vw,62px); line-height:0.9; color:var(--blue); }
.pf-platforms-test-4 .c4-stat-label { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; color:var(--steel-light); text-transform:uppercase; margin-top:8px; }
.pf-platforms-test-4 .c4-grid { max-width:1500px; margin:0 auto; padding:var(--pad-section) var(--pad-side); display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:280px; gap:16px; }
.pf-platforms-test-4 .c4-cell { position:relative; display:block; overflow:hidden; border:1px solid var(--concrete); border-radius:3px; isolation:isolate; transition:transform .3s ease, border-color .25s, box-shadow .3s; }
.pf-platforms-test-4 .c4-cell-media { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; background-color:#0e0e12; filter:brightness(0.92) contrast(1.02) saturate(1.06); transition:transform .6s cubic-bezier(.22,1,.36,1), filter .35s; }
.pf-platforms-test-4 .c4-cell-veil { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(7,7,10,0.04) 0%, rgba(7,7,10,0.02) 44%, rgba(7,7,10,0.48) 72%, rgba(7,7,10,0.93) 100%); }
.pf-platforms-test-4 .c4-cell:hover { border-color:var(--blue); transform:translateY(-2px); box-shadow:0 0 0 1px var(--blue), 0 16px 44px rgba(0,0,0,0.5), 0 0 40px var(--blue-glow); z-index:5; }
.pf-platforms-test-4 .c4-cell:hover .c4-cell-media { transform:scale(1.05); filter:brightness(0.95) contrast(1.1) saturate(1.08); }
.pf-platforms-test-4 .c4-cell:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.pf-platforms-test-4 .c4-cell-size-1 { grid-column:span 2; grid-row:span 1; }
.pf-platforms-test-4 .c4-cell-size-2 { grid-column:span 2; grid-row:span 2; }
.pf-platforms-test-4 .c4-cell-wide { grid-column:span 4; grid-row:span 1; }
.pf-platforms-test-4 .c4-cell-content { position:absolute; inset:0; z-index:2; padding:22px; display:flex; flex-direction:column; justify-content:space-between; }
.pf-platforms-test-4 .c4-cell-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.pf-platforms-test-4 .c4-cell-chassis { font-family:var(--font-mono); font-size:10px; letter-spacing:.5px; color:var(--blue); background:rgba(8,8,12,0.72); padding:4px 8px; border:1px solid rgba(59,125,255,0.3); border-radius:2px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.pf-platforms-test-4 .c4-cell-region { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; color:var(--chalk); text-transform:uppercase; }
.pf-platforms-test-4 .c4-cell-region .dot { width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.pf-platforms-test-4 .c4-cell-region.usdm .dot { background:var(--blue); box-shadow:0 0 6px var(--blue); }
.pf-platforms-test-4 .c4-cell-region.jdm .dot { background:var(--caution); box-shadow:0 0 6px var(--caution); }
.pf-platforms-test-4 .c4-cell-name { font-family:var(--font-stencil); line-height:0.95; letter-spacing:.5px; text-transform:uppercase; color:var(--white-hot); font-size:26px; }
.pf-platforms-test-4 .c4-cell-size-2 .c4-cell-name { font-size:clamp(30px,2.6vw,40px); }
.pf-platforms-test-4 .c4-cell-wide .c4-cell-name { font-size:clamp(26px,2.2vw,32px); }
.pf-platforms-test-4 .c4-cell-trans { font-family:var(--font-mono); font-size:10px; color:var(--blue-hot); margin-top:5px; }
.pf-platforms-test-4 .c4-cell-meta { font-family:var(--font-mono); font-size:10px; color:var(--steel-light); line-height:1.5; margin-top:6px; }
.pf-platforms-test-4 .c4-cell-liner { font-family:var(--font-body); font-size:12px; color:var(--chalk); line-height:1.5; margin-top:8px; max-width:60ch; }
@media (max-width:1024px){
  .pf-platforms-test-4 .c4-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:240px; }
  .pf-platforms-test-4 .c4-cell-size-1, .pf-platforms-test-4 .c4-cell-size-2, .pf-platforms-test-4 .c4-cell-wide { grid-column:span 1; grid-row:span 1; }
}
@media (max-width:560px){
  .pf-platforms-test-4 .c4-grid { grid-template-columns:1fr; grid-auto-rows:210px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PF SERVICES PAGE  (/services, CMS identifier pf-services)
   Card grid + booking modal. Every rule is scoped under .pf-services or
   #pf-book-modal so nothing leaks to other surfaces. Sharp corners (2-4px),
   tool-drawer panel grid, PF dark-industrial tokens. Triggers are <article>/<span>
   (not <button>) so the global force-blue button rule never touches them.
   ════════════════════════════════════════════════════════════════════════════ */
.pf-services {
  background: var(--bg-base, #111113);
  padding: clamp(56px, 8vw, 104px) var(--pad-side, 40px) clamp(64px, 9vw, 120px);
}
.pf-services__head { max-width: 1320px; margin: 0 auto clamp(32px, 4vw, 52px); }
.pf-services__eyebrow {
  display: block;
  font-family: var(--font-mono, 'Space Mono'), monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue, #3B7DFF); margin-bottom: 14px;
}
.pf-services__title {
  font-family: var(--font-stencil, 'Bebas Neue'), Impact, sans-serif;
  font-weight: 400; font-size: clamp(52px, 9vw, 104px); line-height: 0.9;
  letter-spacing: 1px; text-transform: uppercase; color: var(--white-hot, #fff); margin: 0;
}
.pf-services__sub {
  font-family: var(--font-body, 'Outfit'), sans-serif;
  font-size: clamp(15px, 1.6vw, 19px); line-height: 1.5;
  color: var(--chalk, #C8C8D0); margin: 16px 0 0; max-width: 60ch;
}
/* Tool-drawer panel grid: 1px concrete dividers show through the gap. */
.pf-services__grid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--concrete, #3A3A42); border: 1px solid var(--concrete, #3A3A42);
  border-radius: 2px; overflow: hidden;
}
.pf-services__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  min-height: 300px; padding: clamp(24px, 2.4vw, 36px);
  background: var(--bg-bay, #1E1E24); cursor: pointer; outline: none;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.pf-services__card:hover { background: var(--bg-panel, #202026); }
.pf-services__card:focus-visible { box-shadow: inset 0 0 0 2px var(--blue, #3B7DFF); }
/* Supplied PF icon set: detailed blue line illustrations, shown free-standing
   (no frame) at 64px so the art stays legible. Blue glow on card hover ties them
   to the pill's hover treatment. */
.pf-services__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.pf-services__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pf-services__card:hover .pf-services__icon {
  transform: scale(1.06);
  filter: drop-shadow(0 0 14px rgba(59, 125, 255, 0.45));
}
.pf-services__card-title {
  position: relative;
  font-family: var(--font-stencil, 'Bebas Neue'), Impact, sans-serif;
  font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.04;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--white, #EAEAEF);
  margin: 0; padding-bottom: 12px;
}
.pf-services__card-title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 30px; height: 2px; background: var(--blue, #3B7DFF);
}
.pf-services__desc {
  font-family: var(--font-body, 'Outfit'), sans-serif;
  font-size: 14px; line-height: 1.6; color: var(--chalk, #C8C8D0); margin: 0;
}
.pf-services__pill {
  margin-top: auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border: 1px solid var(--blue, #3B7DFF); border-radius: 2px;
  background: transparent;
  font-family: var(--font-mono, 'Space Mono'), monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue-hot, #5B9AFF); cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, gap 0.16s ease, box-shadow 0.16s ease;
}
.pf-services__pill-arr { transition: transform 0.16s ease; }
.pf-services__card:hover .pf-services__pill,
.pf-services__card:focus-visible .pf-services__pill {
  background: var(--blue, #3B7DFF); color: #fff; box-shadow: 0 0 22px rgba(59, 125, 255, 0.4);
}
.pf-services__card:hover .pf-services__pill-arr { transform: translateX(4px); }
.pf-services__caveat {
  max-width: 1320px; margin: clamp(28px, 3vw, 40px) auto 0;
  font-family: var(--font-mono, 'Space Mono'), monospace;
  font-size: 12.5px; line-height: 1.6; letter-spacing: 0.02em; color: var(--steel, #8A8A98);
}
@media (max-width: 1024px) { .pf-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .pf-services__grid { grid-template-columns: 1fr; }
  .pf-services__card { min-height: 0; }
}

/* ── Booking modal (#pf-book-modal) ───────────────────────────────────────────
   Modeled on the proven Contact-page .pf-sched-modal, fully re-scoped under
   #pf-book-modal / .pf-book-modal so the two never collide. Sharp 4px dialog. */
html.pf-book-modal-open { overflow: hidden; }
.pf-book-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center; padding: 4vh 16px;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.pf-book-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.2s ease; }
.pf-book-modal__overlay {
  position: absolute; inset: 0; background: rgba(8, 9, 11, 0.9);
  -webkit-backdrop-filter: blur(12px) saturate(78%); backdrop-filter: blur(12px) saturate(78%);
}
.pf-book-modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 760px; max-height: 92vh; overflow-y: auto;
  background: var(--bg-slab, #1A1A1F); border: 1px solid var(--concrete, #3A3A42); border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); transform: translateY(18px); transition: transform 0.2s ease;
}
.pf-book-modal.is-open .pf-book-modal__dialog { transform: translateY(0); }
.pf-book-modal__head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px; padding: 20px 24px 16px;
  background: var(--bg-slab, #1A1A1F); border-bottom: 1px solid var(--concrete, #3A3A42);
}
.pf-book-modal__heading { display: flex; flex-direction: column; gap: 4px; }
.pf-book-modal__eyebrow {
  font-family: var(--font-mono, 'Space Mono'), monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--blue, #3B7DFF);
}
.pf-book-modal__title {
  font-family: var(--font-stencil, 'Bebas Neue'), Impact, sans-serif;
  font-size: 34px; font-weight: 400; line-height: 0.95; letter-spacing: 0.6px;
  text-transform: uppercase; color: #F4F4F6;
}
.pf-book-modal__close {
  flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; color: #EAEAEF; border: 1px solid var(--concrete, #3A3A42);
  border-radius: 2px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.pf-book-modal__body { padding: 4px 24px 28px; }
/* Defeat pf-theme.css force-blue button rule: an id outranks its class chain. */
#pf-book-modal .pf-book-modal__close { background: transparent !important; }
#pf-book-modal .pf-book-modal__close:hover {
  background: var(--bg-raised, #28282F) !important; color: var(--white-hot, #FFFFFF) !important;
  border-color: var(--steel, #8A8A98) !important;
}
#pf-book-modal .pf-book-modal__close:focus-visible { outline: 2px solid var(--blue, #3B7DFF); outline-offset: 2px; }
@media (max-width: 600px) {
  .pf-book-modal { padding: 0; align-items: stretch; }
  .pf-book-modal__dialog { max-width: none; max-height: 100vh; border: none; border-radius: 0; }
  .pf-book-modal__title { font-size: 30px; }
  .pf-book-modal__body { padding: 4px 16px 24px; }
}

/* ── PF HEADER CTA (.pf-header-cta) ───────────────────────────────────────────
   INSTALLS & SERVICE -> /services. Leads the utility cluster (.nav-right, before
   search). Outline-to-fill billet: blue outline + blue label at rest; fills solid
   --blue with a near-black (--bg-base) label on hover/focus. The ONLY outlined
   control up top, so it reads distinct from the solid-blue search button. 36px to
   match the cluster controls, 2px corners, mono caps. Glyph uses currentColor so it
   flips with the text. Scoped to .pf-header-cta; nothing global. Hidden <=1024px
   (the CTA reappears at the top of the #pf-mnav drawer). */
.pf-header-cta {
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 18px;
  border: 1px solid var(--blue, #3B7DFF); border-radius: 2px;   /* border == fill: solid, no visible stroke */
  background: var(--blue, #3B7DFF); color: #FFFFFF;
  font-family: var(--font-mono, 'Space Mono'), monospace;
  font-size: 12.5px; font-weight: 400; letter-spacing: 1.5px; line-height: 1;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.pf-header-cta svg { width: 16px; height: 16px; flex: 0 0 auto; }
.pf-header-cta:hover, .pf-header-cta:focus-visible {
  background: var(--blue-hot, #5B9AFF); border-color: var(--blue-hot, #5B9AFF); color: #fff;
  box-shadow: 0 0 18px rgba(59, 125, 255, 0.45);
}
.pf-header-cta:focus-visible { outline: 2px solid var(--white, #EAEAEF); outline-offset: 2px; }
/* On mobile the bar CTA is hidden; it reappears at the top of the #pf-mnav drawer. */

/* ── PF MOBILE NAV: hamburger -> vertical dropdown drawer (<=1024px) ───────────
   Replaces the horizontally-overflowing .nav-links row on small screens with a
   tap-to-open vertical menu in the dark industrial aesthetic. Anchored under the
   sticky .nav (position:absolute top:100%). All rules scoped under .pf-mnav* and
   only active <=1024px; desktop is untouched. */
.pf-mnav-toggle { display: none; }
.pf-mnav { display: none; }
@media (max-width: 1024px) {
  /* kill the horizontal nav-links row (a later duplicate rule re-shows it; this wins by source order + media) */
  .nav-links { display: none !important; }
  /* the outline CTA moves into the drawer on mobile */
  .nav-right > .pf-header-cta { display: none; }

  /* single-row mobile app-bar: [P emblem][hamburger][search flex][account][cart].
     !important + explicit order beat the legacy mobile-nav block (~line 2134) that
     forced flex-wrap:wrap + space-between + a 2nd-row nav-links strip. */
  .nav { flex-wrap: nowrap !important; justify-content: flex-start !important;
    align-items: center !important; column-gap: 12px !important; height: 64px !important; min-height: 0 !important; }
  .nav-logo { order: 0 !important; flex: 0 0 auto !important; }
  .nav-right { order: 1 !important; flex: 1 1 auto !important; min-width: 0; gap: 8px; }
  .nav-right .nav-search { flex: 1 1 auto; min-width: 0; }
  .nav-right .nav-search input[type="search"] { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .nav-right .nav-search input[type="search"]:focus { width: auto !important; }

  .pf-mnav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; background: transparent !important;
    border: 1px solid var(--concrete, #3A3A42); border-radius: 2px; cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .pf-mnav-toggle:hover, .pf-mnav-toggle[aria-expanded="true"] { background: var(--bg-bay, #1E1E24) !important; }
  .pf-mnav-toggle:hover, .pf-mnav-toggle[aria-expanded="true"] { border-color: var(--blue, #3B7DFF); }
  .pf-mnav-toggle:focus-visible { outline: 2px solid var(--blue, #3B7DFF); outline-offset: 2px; }
  /* flex:0 0 auto keeps the bar box from being shrunk by the flex button; explicit
     span widths make the lines independent of the container size (robust). */
  .pf-mnav-toggle__bars { position: relative; flex: 0 0 auto; width: 22px; height: 16px; }
  .pf-mnav-toggle__bars span {
    position: absolute; left: 0; width: 22px; height: 2px; border-radius: 1px;
    background: var(--white, #EAEAEF);
    transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
  }
  .pf-mnav-toggle__bars span:nth-child(1) { top: 0; }
  .pf-mnav-toggle__bars span:nth-child(2) { top: 7px; }
  .pf-mnav-toggle__bars span:nth-child(3) { top: 14px; }
  .pf-mnav-toggle[aria-expanded="true"] .pf-mnav-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .pf-mnav-toggle[aria-expanded="true"] .pf-mnav-toggle__bars span:nth-child(2) { opacity: 0; }
  .pf-mnav-toggle[aria-expanded="true"] .pf-mnav-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  .pf-mnav {
    display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
    background: var(--bg-slab, #1A1A1F); border-top: 1px solid var(--concrete, #3A3A42);
    border-bottom: 1px solid var(--concrete, #3A3A42); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0s linear 0.28s;
  }
  .pf-mnav.is-open {
    max-height: calc(100vh - 64px); overflow-y: auto; opacity: 1; visibility: visible;
    transition: max-height 0.28s ease, opacity 0.2s ease;
  }
  .pf-mnav__cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 16px var(--pad-side, 20px) 10px; padding: 14px 18px;
    background: var(--blue, #3B7DFF); color: var(--bg-base, #111113); border-radius: 2px;
    font-family: var(--font-mono, 'Space Mono'), monospace; font-size: 13px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
    transition: background 0.18s ease;
  }
  .pf-mnav__cta:hover { background: var(--blue-hot, #5B9AFF); }
  .pf-mnav__cta-glyph { width: 16px; height: 16px; flex: 0 0 auto; }
  .pf-mnav__links { display: flex; flex-direction: column; padding: 4px 0 12px; }
  .pf-mnav__links a {
    display: block; padding: 15px var(--pad-side, 20px);
    font-family: var(--font-mono, 'Space Mono'), monospace; font-size: 14px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--steel-light, #8A8A98); text-decoration: none;
    border-top: 1px solid var(--concrete, #3A3A42);
    transition: color 0.18s ease, background 0.18s ease, padding-left 0.18s ease;
  }
  .pf-mnav__links a::before { content: '// '; color: var(--concrete, #3A3A42); font-weight: 700; }
  .pf-mnav__links a:hover, .pf-mnav__links a:active {
    color: var(--white, #EAEAEF); background: var(--bg-bay, #1E1E24);
    padding-left: calc(var(--pad-side, 20px) + 6px);
  }
  .pf-mnav__links a:hover::before { color: var(--blue, #3B7DFF); }
  html.pf-mnav-open { overflow: hidden; }
}

/* ── PF header logo (real PF mark, dark-surface recolor) ──────────────────────
   The real logo art is light-background (black/blue/chrome); on the dark header
   the black sank away, so web/images/pf-*-dark.png are faithful recolors (black
   art lifted to white/chrome, brand blue kept) that read on #111113. Desktop shows
   the wordmark; mobile (<=1024) shows the symbol emblem. Replaces the placeholder
   CSS hex badge + "PURE FUNCTION / motorsports" text lockup. */
.nav-logo-img { display: block; height: 38px; width: auto; transform: translateY(1px); }
.nav-logo-img--mark { display: none; }
@media (max-width: 1024px) {
  .nav-logo-img--full { display: none; }
  .nav-logo-img--mark { display: block; height: 36px; }
}

/* ── PF responsive header — intermediate-desktop fix (1025–1279) ─────────────
   At desktop widths below 1280, the full PF wordmark + nav-links + search +
   INSTALLS-CTA + account + cart all competed for the same row. Because
   .nav-logo had no flex-shrink rule, the flex parent squeezed its width to
   zero — the wordmark vanished while the rest of the bar kept rendering.
   Below 1200 the right-side icons also clipped off the viewport.

   Fix: keep the desktop nav-links visible (this is still desktop territory,
   not the hamburger range), but swap to the small mark emblem, lock the
   logo to flex-shrink:0 so it can never collapse, and tighten the spacing
   so the right-side icons stay on screen. */
.nav-logo { flex-shrink: 0; }
@media (min-width: 1025px) and (max-width: 1439px) {
  .nav-logo-img--full { display: none; }
  .nav-logo-img--mark { display: block; height: 32px; }
  .nav { column-gap: 10px; }
  .nav-right { gap: 8px; min-width: 0; }
  .nav-right .nav-search { flex: 1 1 auto; min-width: 0; }
  .nav-right .nav-search input[type="search"] { width: 130px !important; min-width: 0; }
  .nav-links { gap: 14px; }
  /* keep the INSTALLS & SERVICE CTA from clipping at the tightest widths */
  .pf-header-cta { padding-left: 12px; padding-right: 12px; }
}

/* Header is a single row at every width (a duplicate base rule set flex-wrap:wrap,
   which let the wider INSTALLS & SERVICE label + search spill to a 2nd row). */
.nav { flex-wrap: nowrap; }
.nav-links a { white-space: nowrap; }   /* keep "FROM THE GARAGE" on one line */
/* account/cart keep their bordered-box treatment (matches the search box + the
   reference screenshot now that the blue accent lives on the CTA + search stroke). */
@media (min-width: 1440px) {
  /* trim the desktop search a touch so the full cluster fits one row */
  .nav-right .nav-search input[type="search"] { width: 190px !important; }
}

/* ── Footer brand lockup ───────────────────────────────────────────────────────
   Real PF logo (full wordmark, knockout site-blue) replaces the old hex "PF" badge
   + text. Tagline sits under it, above the brand blurb. */
.footer-logo { display: inline-block; line-height: 0; }
.footer-logo-img { height: 40px; width: auto; display: block; }
.footer-tagline {
  font-family: var(--font-mono, 'Space Mono'), monospace;
  font-size: 12px; letter-spacing: 0.02em; line-height: 1.5;
  color: var(--chalk, #C8C8D0); margin-top: 14px;
}

/* ── Visual batch #24 + #26 (2026-06-05) ──────────────────────────────────── */
/* #24 Latest From the Garage: center the Subscribe link against the title block
   (was align-items:flex-end -> orphaned in the bottom-right corner). */
.garage .section-head { align-items: center; }
.garage .section-more { align-self: center; }
/* #26 Mobile cart: render the item-count as a small blue badge over the bag icon
   (desktop shows it inline; mobile was hidden entirely). */
@media (max-width: 1024px) {
  .nav-right .nav-btn-cart {
    overflow: visible !important;
  }
  .nav-right .nav-btn-cart .action.showcart { position: relative !important; }
  .nav-right .nav-btn-cart .counter.qty {
    display: inline-flex !important; position: absolute !important;
    top: -8px !important; right: -10px !important; margin: 0 !important; z-index: 3;
    overflow: visible !important;
  }
  .nav-right .nav-btn-cart .counter-number {
    display: inline-flex !important; min-width: 22px; height: 22px; padding: 0 7px;
    background: var(--blue) !important; color: var(--white-hot) !important;
    border: 2px solid var(--bg-base, #0a0a0c) !important;
    border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 800;
    align-items: center; justify-content: center; line-height: 1;
    box-shadow: 0 0 0 1px rgba(59,125,255,0.18);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  }
  .nav-right .nav-btn-cart .counter.qty.empty { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   YMM bar: selected-vehicle chip + clear/change button
   (form-pf-bar.phtml — shown only when a vehicle is currently selected)
   ───────────────────────────────────────────────────────────────────── */
.pf-ymm-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 12px; margin-bottom: 8px;
  background: rgba(59,125,255,0.12);
  border: 1px solid rgba(59,125,255,0.35);
  border-radius: 2px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px;
}
.pf-ymm-chip[hidden] { display: none; }
.pf-ymm-chip__label { display: inline-flex; align-items: center; gap: 8px; color: var(--white); }
.pf-ymm-chip__label .fa-car { color: var(--blue); font-size: 13px; }
.pf-ymm-chip__text { font-family: var(--font-stencil); letter-spacing: 1.5px; font-size: 14px; }
.pf-ymm-chip__clear {
  background: transparent; border: 1px solid rgba(255,255,255,0.18);
  color: var(--steel-light);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 2px; cursor: pointer; transition: all 0.2s;
}
.pf-ymm-chip__clear:hover {
  border-color: var(--blue); color: var(--white-hot); background: rgba(59,125,255,0.08);
}

/* ─────────────────────────────────────────────────────────────────────
   Shop Scheduler: auto-filled current vehicle chip + "Change vehicle"
   (schedule.phtml — shown when CFG.currentVehicle is present on load)
   ───────────────────────────────────────────────────────────────────── */
.shop-scheduler-current-vehicle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; margin-bottom: 16px;
  background: rgba(59,125,255,0.10);
  border-left: 3px solid var(--blue);
  border-radius: 2px;
}
.shop-scheduler-current-vehicle[hidden] { display: none; }
.shop-scheduler-current-vehicle__label { display: flex; flex-direction: column; gap: 2px; }
.shop-scheduler-current-vehicle__tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--steel);
}
.shop-scheduler-current-vehicle__label strong {
  font-family: var(--font-stencil); font-size: 18px; letter-spacing: 1px; color: var(--white);
}
.shop-scheduler-current-vehicle__change {
  background: transparent; border: 1px solid rgba(255,255,255,0.22);
  color: var(--steel-light);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 8px 14px; border-radius: 2px; cursor: pointer; transition: all 0.2s;
}
.shop-scheduler-current-vehicle__change:hover {
  border-color: var(--blue); color: var(--white-hot); background: rgba(59,125,255,0.10);
}

/* When the chip is showing, hide the cascade form so the bar is just
   "Booking for X — Change vehicle". Saves vertical space and removes the
   confusing empty dropdowns. CSS :has lets us do this without JS toggling. */
.fitment-bar .nlh-ymm:has(.pf-ymm-chip:not([hidden])) {
  flex-direction: column !important;
  align-items: stretch !important;
}
.fitment-bar .nlh-ymm:has(.pf-ymm-chip:not([hidden])) .nlh-ymm__form {
  display: none !important;
}
.fitment-bar .nlh-ymm .pf-ymm-chip {
  width: 100%; flex-basis: 100%; box-sizing: border-box;
  background: rgba(0,0,0,0.25); border-color: rgba(255,255,255,0.22);
  padding: 8px 14px; margin-bottom: 0;
}
.fitment-bar .nlh-ymm .pf-ymm-chip__text { color: var(--white-hot); }

/* ── Hero fit on short landscape (laptop) viewports (2026-06-11) ──────────
   Below ~920px tall the uncompressed hero (3-line clamp() title + 80/60
   padding) overflowed the first screen, pushing the CTAs and the
   "Find Your Vehicle" bar below the fold. These viewport-height-relative
   sizes shrink the hero fluidly so both stay visible. Scoped to >=901px wide
   (mobile keeps its own breakpoints) and short viewports only (tall desktop
   monitors are untouched; title still caps at 110px). */
@media (min-width: 901px) and (max-height: 920px) {
  .hero-left { padding-top: clamp(24px, 5vh, 80px); padding-bottom: clamp(18px, 3.5vh, 60px); }
  .hero-tag { margin-bottom: clamp(8px, 1.8vh, 28px); }
  .hero-title { font-size: clamp(40px, min(8vw, 11vh), 110px); margin-bottom: clamp(10px, 2vh, 28px); }
  .hero-annotation { margin-bottom: clamp(12px, 2.4vh, 40px); }
}

/* Tier 2: very short laptops (<=700px tall) need more compression so the
   fitment bar's bottom edge clears the fold too. Title scales harder here. */
@media (min-width: 901px) and (max-height: 700px) {
  .hero-left { padding-top: clamp(18px, 3.2vh, 40px); padding-bottom: clamp(14px, 2.6vh, 30px); }
  .hero-tag { margin-bottom: clamp(6px, 1.4vh, 18px); }
  .hero-title { font-size: clamp(38px, min(8vw, 9.5vh), 84px); margin-bottom: clamp(8px, 1.6vh, 20px); }
  .hero-annotation { margin-bottom: clamp(10px, 2vh, 24px); line-height: 1.6; }
}

/* ============================================================
 * PF blue button-anchor hover contrast fix (Claude, 2026-06-13)
 * The global `a:hover { color: #3B7DFF }` (pf-config.css) overrides the
 * light text on solid-blue CTA anchors during hover, producing
 * blue-text-on-blue-background (invisible). Force the button's normal
 * light text to persist on hover. Scoped to anchors only (a:hover is the
 * sole culprit; <button> CTAs are unaffected) and to known blue CTA classes.
 * ============================================================ */
a.btn-shop:hover,
a.garage-install-btn:hover,
a.recipe-atc:hover,
a.pf-recipe-atc:hover,
a.pdp-atc:hover,
a.pdp-sec-btn:hover,
a.picks-atc:hover,
a.reco-add:hover,
a.freq-add-all:hover,
a.product-quick-btn:hover,
a.action.primary:hover,
a.action.primary.checkout:hover {
  color: var(--white-hot, #fff) !important;
}

/* ============================================================
 * Minicart qty input legibility (Claude, 2026-06-13)
 * Was width:42px with 14px side padding -> ~12px content area, which clips
 * 2-digit quantities and renders cramped/blank-looking on mobile. Widen and
 * trim the padding so 1-3 digit quantities are always centered and legible.
 * ============================================================ */
.block.block-minicart .item-qty {
  width: 52px !important;
  padding: 0 4px !important;
}

/* ============================================================
 * Mobile cart badge digit visibility (Claude, 2026-06-13)
 * The mobile badge rule (#26, ~line 6901) sets counter-number font-size:11px but
 * WITHOUT !important, so the earlier `.nav-btn-cart .counter-number { font-size: inherit
 * !important }` wins and inherits 0px from the icon-only showcart button -> the digit
 * renders at zero size (just a blue circle, no number). Force a real, !important
 * font-size + line-height (higher specificity) so the count is visible on mobile.
 * ============================================================ */
@media (max-width: 1024px) {
  .nav-right .nav-btn-cart .counter.qty .counter-number,
  .nav-btn-cart .counter.qty .counter-number,
  .nav-btn-cart .counter-number {
    font-size: 11px !important;
    line-height: 1 !important;
  }
}

/* ── PF PDP gallery: dynamic viewer polish v2 (2026-06-15) ──
   Appeal + coherence + intuitivity: all images, bigger refined thumbs, controlled electric
   active glow, softened (non-pure-white) image canvas with a machined frame, smooth fade swap,
   subtle main zoom, on-brand expand control. Additive; overrides the legacy repeat(5,1fr). */
.gallery-thumbs {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 8px;
}
.gallery-thumb {
  aspect-ratio: 1; border-radius: 5px;
  border: 1px solid rgba(234,234,239,0.12);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.gallery-thumb:hover { transform: translateY(-2px); border-color: var(--steel); }
.gallery-thumb.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue), 0 0 18px rgba(59,125,255,0.35);
}
.gallery-thumb img { background: #F4F5F7 !important; padding: 7px; }
.gallery-main {
  border-radius: 6px;
  border: 1px solid rgba(234,234,239,0.08);
  box-shadow: inset 0 0 0 1px rgba(17,17,19,0.04);
}
/* Soft machined canvas (not a harsh pure-white box) + a faint cold-blue rim so the part
   reads as framed by Pure Function rather than a generic white ecommerce tile. */
.gallery-main::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 6px;
  background: radial-gradient(120% 90% at 50% 18%, rgba(59,125,255,0.05), transparent 60%);
}
.gallery-main-img {
  background: #F4F5F7 !important;
  transition: opacity .25s ease, transform .45s ease;
}
.gallery-main:hover .gallery-main-img { transform: scale(1.05); }
.gallery-zoom {
  background: rgba(17,17,19,0.82) !important;
  border: 1px solid rgba(59,125,255,0.35) !important;
  color: #EAEAEF !important;
}
.gallery-zoom:hover { border-color: var(--blue) !important; color: var(--blue) !important; }
@media (max-width: 640px) {
  .gallery-thumbs { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   PF PDP broader polish — batch 1 (CRITICAL + HIGH) — 2026-06-15
   Real selectors. Additive; overrides legacy/sediment rules by source order.
   ════════════════════════════════════════════════════════════════════════ */

/* HIGH: primary Add-to-Cart must be the dominant CTA (was a dark outline). */
.pdp-atc {
  background: var(--blue) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--blue) !important;
  box-shadow: 0 0 28px rgba(59,125,255,0.28) !important;
  font-weight: 700 !important;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.pdp-atc:hover {
  background: #2f6bf0 !important; border-color: #2f6bf0 !important;
  box-shadow: 0 0 36px rgba(59,125,255,0.42) !important; transform: translateY(-1px);
}

/* HIGH: footer contrast — links/copyright were near-invisible. */
.footer-col a { color: #9098A6 !important; }
.footer-col a:hover { color: #B9C2D6 !important; }
.footer-legal a, .footer-copy, .footer-bottom, .footer-brand-sub { color: #7E8593 !important; }

/* CRITICAL+HIGH: FBT "More from this category" cards — no broken loader boxes,
   roomier intentional grid, on-brand machined cards. */
.pi-fbt__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 18px !important; }
.pi-fbt .loading-mask, .pi-fbt__media .loading-mask { display: none !important; }
.pi-fbt__media img { background: #F4F5F7; opacity: 1 !important; visibility: visible !important; }
.pi-fbt__card { border: 1px solid rgba(234,234,239,0.10); border-radius: 6px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.pi-fbt__card:hover { border-color: var(--blue); box-shadow: 0 6px 22px rgba(59,125,255,0.16); transform: translateY(-2px); }
.pi-fbt__choose { background: rgba(59,125,255,0.10) !important; border-color: rgba(59,125,255,0.45) !important; color: #EAEAEF !important; }

/* HIGH: fitment bar slightly toned (gradient, not a flat dominant slab) so it supports
   rather than out-shouts the product title + buy flow. Stays clearly the brand-blue bar. */
.fitment-bar { background: linear-gradient(90deg, rgba(59,125,255,0.95), rgba(59,125,255,0.72)) !important; }

/* HIGH: description readability — cap line length, looser leading. */
.pdp-description { max-width: 760px; line-height: 1.75; }

/* HIGH: tab section — kill the dead vertical gap before the tabs. */
.pdp-tabs-section { margin-top: 36px !important; }


/* ════════════════════════════════════════════════════════════════════════
   PF PDP broader polish — batch 2 (actionable items; review-guided, judgment-applied)
   NOTE: kept the gallery canvas LIGHT (softened) on purpose — these are white-background
   supplier photos; a dark canvas + multiply (review suggestion) would hide the product.
   ════════════════════════════════════════════════════════════════════════ */

/* SKU / MPN legibility (was near-invisible). */
.pdp-sku, .pdp-mpn, .pdp-sku-row, .nlh-part-number { font-size: 12px !important; color: #9EA3AF !important; letter-spacing: 0.06em !important; }
.pdp-sku-sep { color: rgba(234,234,239,0.25) !important; }

/* Breadcrumbs — readable orientation. */
.breadcrumbs, .breadcrumbs a, .breadcrumbs strong { font-size: 11px !important; color: #A8ABB4 !important; letter-spacing: 0.10em !important; }
.breadcrumbs a:hover { color: var(--blue) !important; }

/* Header search — give the field presence + a legible placeholder. */
.nav-search input, .nav-search .input-text { border-color: rgba(59,125,255,0.30) !important; background: rgba(17,17,19,0.72) !important; }
.nav-search input::placeholder { color: rgba(234,234,239,0.5) !important; }

/* Add-to-Cart — keep the bold blue fill (batch1), add typographic authority + electric sheen. */
.pdp-atc { font-size: 13px !important; letter-spacing: 0.14em !important; background: linear-gradient(135deg, #3B7DFF, #2f6bf0) !important; }

/* Related (FBT) card image stage — integrate the white photo boxes into the dark system
   with a soft graphite-to-steel gradient + cold-blue hairline (not stark white). */
.pi-fbt__media, .pi-fbt__media .product-image-container { background: linear-gradient(180deg, #F3F5F8 0%, #E7EAF0 100%) !important; }
.pi-fbt__name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 56px; font-size: 13px; line-height: 1.45; }
.pi-fbt__price { font-size: 18px; letter-spacing: 0.02em; }

/* Border-radius coherence — unify the industrial component radius. */
.pdp-atc, .pdp-qty, .pi-fbt__card, .pi-fbt__choose, .nav-btn, .nav-search input { border-radius: 4px !important; }

/* Top announcement bar — calmer tracking, slightly more legible. */
.topbar { font-size: 12px !important; letter-spacing: 0.03em !important; }

/* Quantity control — clearer interactivity. */
.pdp-qty { background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(234,234,239,0.16) !important; }
.pdp-qty-btn { color: #DDE2EC !important; }
.pdp-qty-btn:hover { color: var(--blue) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   STRIKETHROUGH MSRP / COMPARE-AT PRICING — appended 2026-06-17
   PureFunction Workshop industrial aesthetic: muted MSRP line-through,
   blue-accent Save pill. Harmonizes with .pdp-price (Bebas Neue 48px blue).
   ═══════════════════════════════════════════════════════════════════════════ */

/* MSRP row: label + struck-through price, above the MAP price */
.pdp-msrp-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.pdp-msrp-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--steel);
  flex-shrink: 0;
}
.pdp-msrp {
  font-family: var(--font-stencil);
  font-size: 20px;
  color: var(--steel);
  letter-spacing: 1px;
  text-decoration: line-through;
  text-decoration-color: rgba(138,138,152,0.55);
  text-decoration-thickness: 1.5px;
  line-height: 1;
}

/* Save badge: small mono pill using the blue accent system */
.pdp-save {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 3px 10px;
  background: var(--blue-dim);
  border: 1px solid rgba(59,125,255,0.25);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue-hot);
  white-space: nowrap;
}

/* Hide dynamically when JS clears them (display:none set by mixin) */
.pdp-msrp-row[hidden],
.pdp-save[hidden] { display: none !important; }