/* =========================================
   WORKSHOP MANUAL — JSG v4.3.8
   Raw & honest. Luxury in execution only.
   Cool slate base. Burnt gold + brick red +
   aged steel. Surface details carry the weight.
   ========================================= */

:root {
    /* ── Cool Slate Base ── */
    --page:          #f2f3f5;   /* page background — cool crisp */
    --surface:       #ffffff;   /* card surface — pure white */
    --surface-raised:#f7f8f9;   /* slightly elevated surface */
    --rule:          #dde0e5;   /* borders, dividers */
    --muted:         #c2c8d0;   /* placeholder, inactive */
    --secondary:     #818c99;   /* secondary text */
    --body:          #3a4250;   /* body text */
    --ink:           #1c2430;   /* primary text / near-black */

    /* ── Dark Foundation (hero, footer) ── */
    --forge:         #050709;   /* deepest bg — near void */
    --anvil:         #0a1018;   /* raised dark surface */
    --iron:          #0f1822;   /* card on dark */
    --seam:          #182230;   /* border on dark */
    --patina:        #2a3d52;   /* lighter border on dark */

    /* ── Accent Colors — used sparingly ── */
    --gold:          #c8920a;   /* burnt gold — primary accent */
    --gold-bright:   #e0a612;   /* gold hover */
    --gold-dim:      rgba(200,146,10,0.15);
    --gold-subtle:   rgba(200,146,10,0.08);

    --ember:         #cc0000;   /* Rosso Corsa — signal/danger */
    --ember-bright:  #e50000;
    --ember-dim:     rgba(204,0,0,0.12);

    --steel:         #1e5fa0;   /* cerulean steel — bold, prominent */
    --steel-bright:  #3278bd;
    --steel-dim:     rgba(30,95,160,0.15);

    /* ── Subtle noise texture (surface luxury) ── */
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");

    /* ── Typography ── */
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body:    'Barlow', sans-serif;

    /* ── Layout ── */
    --site-nav-h:    72px;
    --radius:        6px;
    --radius-sm:     3px;

    /* ── Shadow system (layered depth) ── */
    --shadow-xs:  0 1px 3px rgba(28,36,48,0.08), 0 1px 2px rgba(28,36,48,0.05);
    --shadow-sm:  0 2px 8px rgba(28,36,48,0.08), 0 1px 3px rgba(28,36,48,0.06);
    --shadow-md:  0 6px 20px rgba(28,36,48,0.1),  0 2px 6px rgba(28,36,48,0.07);
    --shadow-lg:  0 14px 40px rgba(28,36,48,0.14), 0 4px 10px rgba(28,36,48,0.08);
    --shadow-xl:  0 24px 60px rgba(28,36,48,0.18), 0 8px 20px rgba(28,36,48,0.1);
}

/* ── Global Resets ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; width: 100%;
    font-family: var(--font-body);
    color: var(--body);
    background-color: var(--page);
    background-image: var(--noise);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--page); }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.container { max-width: 1400px; margin: 0 auto; }
.search-results { display: none; }

/* =========================================
   SITE NAVIGATION
   ========================================= */
.site-nav {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 300;
    padding: 1.25rem 2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, rgba(17,24,32,0.8) 0%, transparent 100%);
    transition: background 0.4s ease, padding 0.35s ease, box-shadow 0.35s ease;
}

.site-nav.is-sticky {
    background: var(--forge);
    padding: 0.85rem 2rem;
    border-bottom: 1px solid var(--seam);
    box-shadow: var(--shadow-lg);
}

.site-nav-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    height: 48px;
}

/* Logo: steel left-border accent, gold underscore on hover */
.site-nav-logo-text {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--page);
    line-height: 1;
    padding-left: 12px;
    border-left: 3px solid var(--steel);
    transition: border-color 0.2s ease;
}

.site-nav-logo:hover .site-nav-logo-text {
    border-left-color: var(--gold);
}

.site-nav-logo-img { height: 48px; width: auto; display: block; }

.site-nav-links {
    display: flex; align-items: center; gap: 2rem;
    margin-left: auto; list-style: none;
    padding: 0; margin-top: 0; margin-bottom: 0;
}

/* =========================================
   HERO SLIDER
   ========================================= */
.hero-slider-container {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    background-color: var(--forge);
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;
    display: flex;
    align-items: center;
}

.hero-slide.active { opacity: 1; visibility: visible; }

/*
 * PRODUCTION IMAGE MASK:
 * When you uncomment the background-image in .slide-bg-1/2/3,
 * this ::after gradient will act as a mask — the photo fades
 * naturally into var(--page) at the bottom edge, no hard cut.
 * The --page value (#eff0f2) is duplicated in the gradient stop
 * so it always matches the body background exactly.
 */
.slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 7s linear;
    z-index: 1;   /* below container::after(5) — bg layers only */
}

/* Layer 1: dark atmospheric overlay on the image */
.slide-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 32, 0.55);
    z-index: 1;
}

/*
 * Layer 2: Production image support — mild bottom darkening.
 * The actual page-bleed gradient lives on .hero-slider-container::after
 * so it persists across slide transitions without flashing.
 */
.slide-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 55%,
        rgba(17, 24, 32, 0.25) 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* Persistent page-bleed gradient — lives on the container, NOT on individual
   slides. This means the fade is always present during transitions — no flash. */
.hero-slider-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(242, 243, 245, 0.08) 45%,
        rgba(242, 243, 245, 0.55) 70%,
        rgba(242, 243, 245, 0.90) 88%,
        #f2f3f5 100%
    );
    z-index: 5;
    pointer-events: none;
}

.hero-slide.active .slide-bg { transform: scale(1.02); }

.slide-content {
    position: relative;
    z-index: 6;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 120px 2rem;
    width: 100%;
}

/* Gold ruled line before title */
.slide-content::before {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--gold);
    margin-bottom: 1.5rem;
}

.slide-title {
    color: var(--surface);
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw + 1rem, 7rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.95;
    margin: 0 0 1.5rem 0;
    letter-spacing: -2px;
    /* Subtle text shadow for legibility over photos */
    text-shadow: 0 2px 30px rgba(17,24,32,0.4);
}

.slide-title .highlight {
    color: var(--gold);
    font-style: normal;
    font-weight: 700;
}

.slide-desc {
    color: rgba(255,255,255,0.7);
    font-family: var(--font-body);
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0 0 2.5rem 0;
    max-width: 480px;
    font-weight: 400;
}

/* CTA button — KEEPER: left-border accent */
.slide-btn {
    display: inline-block;
    background: var(--surface);
    color: var(--ink);
    padding: 0.95rem 2.25rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    border: 1px solid transparent;
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: var(--shadow-md);
    transition: all 0.25s ease;
}

.slide-btn:hover {
    background: var(--gold);
    border-left-color: var(--ember);
    color: var(--forge);
    box-shadow: var(--shadow-lg);
}

/* Text animations */
.anim-el {
    opacity: 0;
    transform: translateY(22px);
    display: block;
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-slide.active .title-line-1 { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.hero-slide.active .title-line-2 { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.hero-slide.active .title-line-3 { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }
.hero-slide.active .slide-desc   { transition-delay: 0.75s; opacity: 1; transform: translateY(0); }
.hero-slide.active .slide-btn    { transition-delay: 0.9s;  opacity: 1; transform: translateY(0); }

/* Slider arrows */
.slider-nav {
    position: absolute;
    top: 44%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0 1.5rem;
    box-sizing: border-box;
    pointer-events: none;
}

.nav-arrow {
    background: rgba(17,24,32,0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.12);
    border-left: 3px solid var(--steel);
    color: var(--page);
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.1rem;
    cursor: pointer;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.nav-arrow:hover {
    background: var(--gold);
    border-color: var(--gold);
    border-left-color: var(--ember);
    color: var(--forge);
    box-shadow: var(--shadow-md);
}

/* =========================================
   HERO SLIDE BACKGROUNDS
   Production: uncomment background-image URL.
   The ::after gradient mask above handles the bleed.
   ========================================= */
.slide-bg-1 {
    background: linear-gradient(155deg, #070c14 0%, #0d1a28 45%, #111e30 100%);
    background-image: url('../images/jsg-mechanic-1.jpg');
    background-size: cover;
    background-position: center center;
}
.slide-bg-1::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 65%, rgba(30,95,160,0.30) 0%, transparent 52%),
        radial-gradient(ellipse at 78% 25%, rgba(200,146,10,0.20) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 95%, rgba(30,95,160,0.12) 0%, transparent 42%);
    z-index: 0;
}

.slide-bg-2 {
    background: linear-gradient(148deg, #06090f 0%, #0c1622 48%, #0f1c2e 100%);
    background-image: url('../images/jsg-mechanic-2.jpg');
    background-size: cover;
    background-position: center center;
}
.slide-bg-2::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 72% 50%, rgba(200,146,10,0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 14% 72%, rgba(30,95,160,0.28) 0%, transparent 48%),
        radial-gradient(ellipse at 48% 18%, rgba(204,0,0,0.14) 0%, transparent 40%);
    z-index: 0;
}

.slide-bg-3 {
    background: linear-gradient(152deg, #050a10 0%, #0b1620 52%, #131e2c 100%);
    background-image: url('../images/jsg-mechanic-3.jpg');
    background-size: cover;
    background-position: center center;
}
.slide-bg-3::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 28% 58%, rgba(200,146,10,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 28%, rgba(30,95,160,0.26) 0%, transparent 48%),
        radial-gradient(ellipse at 55% 88%, rgba(204,0,0,0.12) 0%, transparent 38%);
    z-index: 0;
}

/* =========================================
   SEARCH FORM
   ========================================= */
.search-wrapper {
    position: relative;
    max-width: 1000px;
    margin: -140px auto 0;
    z-index: 20;
    padding: 0 2rem 4rem;
}

.search-card {
    background: var(--surface);
    background-image: var(--noise);
    padding: 2.75rem;
    border: 1px solid var(--rule);
    border-top: 5px solid var(--steel);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-xl);
    /* Subtle inner highlight — surface depth */
    outline: 1px solid rgba(255,255,255,0.8);
    outline-offset: -3px;
}

.search-form-title {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink);
    margin: 0 0 0.5rem 0;
}

/* Thin gold rule under title */
.search-form-title::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    margin-top: 0.9rem;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.form-col { display: flex; flex-direction: column; gap: 1.25rem; }

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.form-group { margin-bottom: 1.25rem; }

label {
    display: block;
    margin-bottom: 5px;
    color: var(--secondary);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

input, select, textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    appearance: none;
    outline: none;
    /* Subtle inset shadow — surface depth */
    box-shadow: inset 0 1px 3px rgba(28,36,48,0.06);
}

input::placeholder { color: var(--muted); }

input:focus, select:focus, textarea:focus {
    background: var(--surface);
    border-color: var(--gold);
    box-shadow: inset 0 1px 3px rgba(28,36,48,0.04),
                0 0 0 3px var(--gold-dim);
}

select {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23818c99"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
    cursor: pointer;
}

/* ── Button Row ── */
.btn-row {
    display: flex;
    gap: 10px;
    margin-top: 1rem;
    align-items: stretch;
}

.btn-row .btn { margin-top: 0; flex: 3; }

/*
 * PRIMARY BUTTON — KEEPER style from v3.7 "Get Recommendations"
 * Dark base, gold left-border accent, ember hover state.
 */
.btn, .submit-btn {
    background: var(--ink);
    color: var(--surface);
    border: 1px solid var(--ink);
    border-left: 5px solid var(--gold);
    padding: 1.1rem 2rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.25px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    margin-top: 0.75rem;
    text-transform: none;
    box-shadow: var(--shadow-sm);
}

.btn:hover, .submit-btn:hover {
    background: var(--ember);
    border-color: var(--ember);
    border-left-color: var(--gold);
    box-shadow: var(--shadow-md);
}

.btn:disabled {
    background: var(--surface-raised);
    border-color: var(--rule);
    border-left-color: var(--rule);
    color: var(--muted);
    cursor: not-allowed;
    box-shadow: none;
}

/* Reset button */
.btn-reset {
    flex: 1;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--rule);
    padding: 1.1rem 1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: not-allowed;
    transition: all 0.2s ease;
    opacity: 0.7;
    white-space: nowrap;
}

.btn-reset.active {
    color: var(--secondary);
    border-color: var(--muted);
    border-left-color: var(--muted);
    cursor: pointer;
    opacity: 1;
}

.btn-reset.active:hover {
    border-color: var(--body);
    border-left-color: var(--steel);
    color: var(--ink);
}

@media (max-width: 576px) {
    .btn-row { flex-direction: column; gap: 8px; }
    .btn-row .btn, .btn-reset { flex: none; width: 100%; }
}

/* =========================================
   NAV TABS
   ========================================= */
.nav-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 2.5rem;
    padding: 0 2rem;
    /* The tab bar IS the bottom border line — tabs sit on top of it */
    border-bottom: 2px solid var(--rule);
    background: transparent;
    position: relative;
    z-index: 2;
}

.tab-btn {
    /* Raised tab shape — top + side borders, no bottom on active */
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-bottom: none;
    border-top: 3px solid transparent;
    color: var(--secondary);
    padding: 0.85rem 2.5rem;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.2s ease, background 0.2s ease, border-top-color 0.2s ease;
    /* Sits on the border-bottom line of .nav-tabs */
    margin-bottom: -2px;
    border-radius: var(--radius) var(--radius) 0 0;
    position: relative;
}

.tab-btn:hover {
    color: var(--ink);
    background: var(--surface);
    border-top-color: var(--steel);
}

/* Active tab: steel top border, surface bg, bottom removed — merges with content panel */
.tab-btn.active {
    color: var(--ink);
    background: var(--surface);
    border-top-color: var(--steel);
    border-left-color: var(--rule);
    border-right-color: var(--rule);
    /* Cover the nav-tabs border-bottom — visually connects tab to panel */
    border-bottom: 2px solid var(--surface);
    font-weight: 800;
    box-shadow: var(--shadow-xs);
}

/* Content panel sits flush under the tab bar — no gap */
.tab-content { display: none; }

.tab-content.active {
    display: block;
    animation: fadeIn 0.35s ease;
    /* No border/padding — tab-content wraps full-width injected sections.
       The tab bar's border-bottom provides visual connection to content. */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   PAGE SECTIONS
   ========================================= */
.page-section {
    padding: 6rem 2rem;
    width: 100%;
    box-sizing: border-box;
    scroll-margin-top: calc(var(--site-nav-h) + 70px);
}

.section-inner { max-width: 1200px; margin: 0 auto; }

.section-header {
    text-align: center;
    position: relative;
    margin-bottom: 4rem;
    padding-top: 5rem;   /* must exceed number height to clear ::after */
}

.section-number {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 11rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px #b0b8c4;   /* darkened — visible on light bg */
    z-index: 0;
    line-height: 1;
    pointer-events: none;
    letter-spacing: -8px;
    user-select: none;
}

.section-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin: 0 0 0.5rem 0;
    color: var(--ink);
    text-transform: uppercase;
}

.section-title span { color: var(--ember); font-style: normal; }

.section-subtitle {
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

/* Gold rule under section headers — margin-top clears the section number */
.section-header::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(to right, var(--steel), var(--gold));
    margin: 2rem auto 0;
    position: relative;
    z-index: 2;
}

/* ── DARK SECTION SYSTEM ──────────────────────────────────────────
   bg-light-gray → deep navy: strong contrast with the light page
   bg-light-blue → dark cerulean: slightly different hue for variation
   Both use white text, light card surfaces, gold/steel accents.
   ───────────────────────────────────────────────────────────────── */

.bg-light-gray {
    background-color: #071222;   /* deep navy */
    background-image: var(--noise);
    border-top: 3px solid #0a1a32;
    border-bottom: 3px solid #0a1a32;
    color: rgba(242,243,245,0.85);
}

.bg-light-blue {
    background-color: #081a30;   /* dark cerulean, bluer than navy */
    background-image: var(--noise);
    border-top: 3px solid #0c2240;
    border-bottom: 3px solid #0c2240;
    color: rgba(242,243,245,0.85);
}

/* ── Text overrides on dark sections ── */
.bg-light-gray .section-title,
.bg-light-blue .section-title {
    color: #f2f3f5;
}

.bg-light-gray .section-number,
.bg-light-blue .section-number {
    -webkit-text-stroke: 2px rgba(255,255,255,0.32);   /* legible on dark bg */
}

.bg-light-gray .section-header::after,
.bg-light-blue .section-header::after {
    background: linear-gradient(to right, var(--gold), var(--steel-bright));
}

.bg-light-gray .section-subtitle,
.bg-light-blue .section-subtitle {
    color: rgba(242,243,245,0.5);
}

/* ── Card surfaces on dark sections ── */
.bg-light-gray .result-card,
.bg-light-blue .result-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: rgba(242,243,245,0.85);
}

.bg-light-gray .result-card h3,
.bg-light-blue .result-card h3 {
    color: #f2f3f5;
}

.bg-light-gray .card,
.bg-light-blue .card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
    color: rgba(242,243,245,0.85);
}

/* Parts list on dark */
.bg-light-gray .parts-list li,
.bg-light-blue .parts-list li {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
    border-left-color: var(--gold);
}

.bg-light-gray .parts-list li:hover,
.bg-light-blue .parts-list li:hover {
    background: rgba(255,255,255,0.09);
    border-left-color: var(--ember);
}

.bg-light-gray .part-name,
.bg-light-blue .part-name {
    color: #f2f3f5;
}

.bg-light-gray .part-description,
.bg-light-blue .part-description {
    color: rgba(242,243,245,0.65);
}

/* View-all / buttons on dark sections */
.bg-light-gray .view-all-btn,
.bg-light-blue .view-all-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    border-left-color: var(--gold);
    color: #f2f3f5;
}

.bg-light-gray .view-all-btn:hover,
.bg-light-blue .view-all-btn:hover {
    background: var(--ember);
    border-color: var(--ember);
    border-left-color: var(--gold);
}

/* Spec items on dark */
.bg-light-gray .spec-item,
.bg-light-blue .spec-item {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
    border-left-color: var(--steel-bright);
}

.bg-light-gray .spec-label,
.bg-light-blue .spec-label {
    color: rgba(242,243,245,0.45);
}

.bg-light-gray .spec-value,
.bg-light-blue .spec-value {
    color: #f2f3f5;
}

/* Retailer links on dark */
.bg-light-gray .retailer-links a,
.bg-light-blue .retailer-links a {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: rgba(242,243,245,0.85);
}

.bg-light-gray .retailer-links a:hover,
.bg-light-blue .retailer-links a:hover {
    background: var(--steel);
    border-left-color: var(--gold);
    color: #fff;
}

/* History items on dark */
.bg-light-gray .history-item,
.bg-light-blue .history-item {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
    border-left-color: rgba(255,255,255,0.15);
}

.bg-light-gray .history-item:hover,
.bg-light-blue .history-item:hover {
    background: rgba(255,255,255,0.09);
    border-left-color: var(--gold);
}

.bg-light-gray .history-title,
.bg-light-blue .history-title {
    color: #f2f3f5;
}

.bg-light-gray .history-date,
.bg-light-blue .history-date {
    color: rgba(242,243,245,0.45);
}

/* Nav tabs on dark sections */
.bg-light-gray .nav-tabs,
.bg-light-blue .nav-tabs {
    border-bottom-color: rgba(255,255,255,0.15);
}

.bg-light-gray .tab-btn,
.bg-light-blue .tab-btn {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    border-bottom: none;
    border-top-color: transparent;
    color: rgba(242,243,245,0.5);
}

.bg-light-gray .tab-btn:hover,
.bg-light-blue .tab-btn:hover {
    background: rgba(255,255,255,0.10);
    color: #f2f3f5;
    border-top-color: var(--steel-bright);
}

.bg-light-gray .tab-btn.active,
.bg-light-blue .tab-btn.active {
    background: rgba(255,255,255,0.10);
    color: #f2f3f5;
    border-top-color: var(--gold);
    border-bottom: 2px solid rgba(255,255,255,0.10);
    font-weight: 800;
}

/* .bg-light-* .tab-content.active — no extra styling needed */

/* Labels on dark sections */
.bg-light-gray label,
.bg-light-blue label {
    color: rgba(242,243,245,0.5);
}

/* Error messages on dark */
.bg-light-gray .error-message,
.bg-light-blue .error-message {
    background: rgba(204,0,0,0.15);
    color: #ff8080;
    border-color: rgba(204,0,0,0.5);
    border-left-color: var(--ember);
}

/* =========================================
   RESULT CARDS
   ========================================= */
.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 5;
    transition: box-shadow 0.2s ease;
}

.card:hover { box-shadow: var(--shadow-md); }

/* KEEPER: left-border accent on result cards */
.result-card {
    background: var(--surface);
    background-image: var(--noise);
    border: 1px solid var(--rule);
    border-left: 5px solid var(--gold);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: border-left-color 0.2s ease, box-shadow 0.2s ease;
}

.result-card:hover {
    border-left-color: var(--ember);
    box-shadow: var(--shadow-md);
}

.result-card h3 {
    font-family: var(--font-display);
    color: var(--ink);
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.result-card h3::before {
    content: '';
    width: 3px;
    height: 22px;
    background: linear-gradient(to bottom, var(--gold), var(--ember));
    border-radius: 2px;
    flex-shrink: 0;
}

/* =========================================
   PARTS LIST
   ========================================= */
.parts-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0; margin: 0; width: 100%;
}

.parts-list li {
    padding: 0;               /* image bleeds to card edges; content padded below */
    background: var(--surface-raised);
    background-image: var(--noise);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--steel);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: var(--shadow-xs);
    overflow: hidden;         /* clips image to card's border-radius */
    transition: border-left-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.parts-list li:hover {
    border-left-color: var(--gold);
    box-shadow: var(--shadow-md);
    background: var(--surface);
}

.parts-list li.hidden { display: none; }

/* ── Part image — top of card ── */
.part-image-wrapper {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: var(--anvil);
    position: relative;
    flex-shrink: 0;
    border-bottom: 1px solid var(--rule);
}

.part-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease, opacity 0.3s ease;
    opacity: 0.92;
}

.parts-list li:hover .part-img {
    transform: scale(1.04);
    opacity: 1;
}

/* Atmospheric gradient placeholder — visible by default, replaced by real <img> in production */
.part-img-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    /* Base — deep forge, same darkness as hero slides */
    background: linear-gradient(150deg, #060a10 0%, #0c1622 55%, #101c2c 100%);
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 1.25rem;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

/* Radial glow layer — cycles through 3 variants via nth-child */
.part-img-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Default (variant A): steel left, gold right */
    background:
        radial-gradient(ellipse at 15% 60%, rgba(30,95,160,0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 30%, rgba(200,146,10,0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(30,95,160,0.12) 0%, transparent 45%);
}

/* Variant B: gold left, ember right */
.parts-list li:nth-child(3n+2) .part-img-placeholder::before {
    background:
        radial-gradient(ellipse at 20% 70%, rgba(200,146,10,0.28) 0%, transparent 52%),
        radial-gradient(ellipse at 80% 25%, rgba(204,0,0,0.20) 0%, transparent 48%),
        radial-gradient(ellipse at 50% 100%, rgba(200,146,10,0.10) 0%, transparent 42%);
}

/* Variant C: ember left, steel right */
.parts-list li:nth-child(3n+3) .part-img-placeholder::before {
    background:
        radial-gradient(ellipse at 18% 55%, rgba(204,0,0,0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 78% 35%, rgba(30,95,160,0.30) 0%, transparent 52%),
        radial-gradient(ellipse at 55% 90%, rgba(200,146,10,0.10) 0%, transparent 40%);
}

/* Subtle diagonal line texture — echoes the hero noise */
.part-img-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20 L40 20 M0 40 L40 0' stroke='%23ffffff' stroke-width='0.4' fill='none' opacity='0.04'/%3E%3C/svg%3E");
    z-index: 0;
}

/* Content sits above the gradient layers */
.part-img-placeholder-icon,
.part-img-placeholder-label {
    position: relative;
    z-index: 1;
}

.part-img-placeholder-icon {
    font-size: 1.75rem;
    line-height: 1;
    opacity: 0.45;
    /* Subtle glow matching the dominant radial color */
    filter: drop-shadow(0 0 8px rgba(30,95,160,0.5));
}

.parts-list li:nth-child(3n+2) .part-img-placeholder-icon {
    filter: drop-shadow(0 0 8px rgba(200,146,10,0.5));
}

.parts-list li:nth-child(3n+3) .part-img-placeholder-icon {
    filter: drop-shadow(0 0 8px rgba(204,0,0,0.4));
}

.part-img-placeholder-label {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(242,243,245,0.6);
    line-height: 1.3;
    max-width: 200px;
}

/* ── Part card content area ── */
.part-card-body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.part-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.25px;
    color: var(--ink);
    text-transform: uppercase;
}

/* ── Dark section overrides for part image ── */
.bg-light-gray .part-image-wrapper,
.bg-light-blue .part-image-wrapper {
    border-bottom-color: rgba(255,255,255,0.08);
}

p.part-description, .part-description {
    color: var(--body);
    font-size: 1.1rem;
    line-height: 1.7;
    flex-grow: 1;
    margin: 0;   /* reset browser p margin */
}

/*
 * VIEW ALL / VIEW MORE BUTTONS — KEEPER: same primary button style
 * Matches "Get Recommendations" — dark base, gold left-border, ember hover.
 */
.view-all-btn {
    display: block;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.9rem 1.75rem;
    background: var(--ink);
    color: var(--surface);
    border: 1px solid var(--ink);
    border-left: 5px solid var(--gold);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.view-all-btn:hover {
    background: var(--ember);
    border-color: var(--ember);
    border-left-color: var(--gold);
    box-shadow: var(--shadow-md);
    color: var(--surface);
}

/* =========================================
   RETAILER LINKS — KEEPER: left-border accent
   ========================================= */
.retailer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1rem;
}

.retailer-links a {
    flex: 1;
    min-width: 120px;
    padding: 0.65rem 1rem;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--steel);
    border-radius: var(--radius-sm);
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.25px;
    transition: all 0.2s ease;
    color: var(--body);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    z-index: 10;
    display: inline-block;
    box-shadow: var(--shadow-xs);
}

.retailer-links a:hover {
    background: var(--ink);
    border-left-color: var(--gold);
    color: var(--surface);
    box-shadow: var(--shadow-sm);
}

.retailer-links a:nth-child(odd)   { border-left-color: var(--ember); }
.retailer-links a:nth-child(even)  { border-left-color: var(--steel); }
.retailer-links a:nth-child(odd):hover  { border-left-color: var(--gold); background: var(--ember); color: var(--surface); }
.retailer-links a:nth-child(even):hover { border-left-color: var(--gold); background: var(--ink); color: var(--surface); }

.parts-list a, .video-item a { position: relative; z-index: 10; cursor: pointer; }

/* =========================================
   SPECS GRID
   ========================================= */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    width: 100%;
}

.spec-item {
    background: var(--surface);
    background-image: var(--noise);
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--steel);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    transition: border-left-color 0.2s ease, box-shadow 0.2s ease;
}

.spec-item:hover {
    border-left-color: var(--gold);
    box-shadow: var(--shadow-sm);
}

.spec-label {
    font-family: var(--font-body);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.spec-value {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.25px;
}

/* =========================================
   HISTORY LIST
   ========================================= */
.history-item {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: all 0.2s ease;
    position: relative;
    z-index: 10;
}

.history-item:hover {
    background: var(--surface-raised);
    border-left-color: var(--gold);
    box-shadow: var(--shadow-sm);
}

.history-date {
    font-family: var(--font-body);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.history-title {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

/* =========================================
   LOADING STATE
   ========================================= */
.loading { display: none; text-align: center; padding: 3rem; color: var(--secondary); }
.loading.active { display: block; }

.spinner {
    border: 2px solid var(--rule);
    border-top: 2px solid var(--gold);
    border-right: 2px solid var(--steel);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    animation: spin 0.9s linear infinite;
    margin: 0 auto 1.5rem;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* =========================================
   VIDEO / RESOURCES SLIDER
   ========================================= */
.res-slider-wrapper { position: relative; width: 100%; margin-top: 1rem; }

.res-slider-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.res-slider-track::-webkit-scrollbar { display: none; }

.res-slider-track .video-item {
    flex: 0 0 calc(33.333% - 0.84rem);
    scroll-snap-align: start;
}

.res-slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 1.5rem;
}

.res-slider-dots .res-dot {
    width: 6px;
    height: 6px;
    background: var(--muted);
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.2s ease;
}

.res-slider-dots .res-dot:hover  { background: var(--secondary); }
.res-slider-dots .res-dot.active { background: var(--gold); transform: scale(1.5); }

@media (max-width: 900px) { .res-slider-track .video-item { flex: 0 0 calc(50% - 0.625rem); } }
@media (max-width: 576px)  { .res-slider-track .video-item { flex: 0 0 100%; } }

/* Video cards — dark, like a film strip against the light page */
.video-item {
    background: var(--anvil);
    background-image: var(--noise);
    border: 1px solid var(--seam);
    border-top: 3px solid var(--steel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    transition: border-top-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.video-item:hover {
    border-top-color: var(--gold);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

/* ── Video thumbnail — real YouTube image + play overlay ── */
.video-thumbnail {
    width: 100%;
    height: 175px;
    background: var(--forge);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

/* Real thumbnail image */
.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease, opacity 0.3s ease;
    opacity: 0.88;
}

.video-item:hover .video-thumbnail img {
    transform: scale(1.04);
    opacity: 1;
}

/* Play button overlay — centered over thumbnail */
.video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 7, 9, 0.25);
    transition: background 0.2s ease;
    z-index: 2;
}

.video-thumbnail:hover .video-play-overlay {
    background: rgba(5, 7, 9, 0.45);
}

.video-play-btn {
    width: 54px;
    height: 54px;
    background: var(--ember);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(204,0,0,0.45);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.video-thumbnail:hover .video-play-btn {
    background: var(--gold);
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(200,146,10,0.5);
}

.video-play-btn svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    margin-left: 3px; /* optical center for play triangle */
}

/* ── Playing state — thumbnail replaced by 16:9 iframe ── */
.video-thumbnail.playing {
    height: auto;
    aspect-ratio: 16 / 9;
    cursor: default;
    display: block;   /* override flex so iframe fills naturally */
    padding: 0;
}

.video-thumbnail.playing iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    inset: 0;
}

/* ── Video CTA row ── */
.video-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}

/* "Watch Video" — primary dark button, matches card style */
.video-watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 1.1rem;
    background: var(--ink);
    color: rgba(242,243,245,0.9);
    border: none;
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, border-left-color 0.2s ease, color 0.2s ease;
    flex: 1;
    justify-content: center;
}

.video-watch-btn:hover {
    background: var(--ember);
    border-left-color: var(--gold);
    color: #fff;
}

/* "View related videos" — secondary ghost style */
.video-related-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 1.1rem;
    background: transparent;
    color: rgba(242,243,245,0.55);
    border: 1px solid rgba(242,243,245,0.15);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    flex: 1;
    justify-content: center;
    white-space: nowrap;
}

.video-related-btn:hover {
    border-color: var(--steel-bright);
    color: rgba(242,243,245,0.9);
    background: rgba(30,95,160,0.12);
}

/* Legacy play icon — kept for any fallback cards */
.video-play-icon {
    font-size: 2.25rem;
    color: var(--gold);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 8px rgba(200,146,10,0.3));
}

/* ── YouTube fallback cards (API unavailable) ────────────────────
   Gray out the play overlay + Watch Video button so users aren't
   tempted to click them. Elevate View Related as the clear CTA.
   ─────────────────────────────────────────────────────────────── */

/* Dim the thumbnail area — no hover brighten */
.yt-fallback .video-play-overlay {
    background: rgba(5, 7, 9, 0.55);
    cursor: default;
    pointer-events: none;
}
.yt-fallback .video-thumbnail:hover .video-play-overlay {
    background: rgba(5, 7, 9, 0.55);
}

/* Gray out the play button — no hover transform */
.yt-fallback .video-play-btn {
    background: #3a3a3a;
    box-shadow: none;
    pointer-events: none;
}
.yt-fallback .video-thumbnail:hover .video-play-btn {
    background: #3a3a3a;
    transform: none;
    box-shadow: none;
}
.yt-fallback .video-play-btn svg {
    fill: rgba(255, 255, 255, 0.25);
}

/* Watch Video — disabled appearance */
.yt-fallback .video-watch-btn {
    background: #1e1e1e;
    border-left-color: #3a3a3a;
    color: rgba(242, 243, 245, 0.25);
    cursor: not-allowed;
    pointer-events: none;
}

/* View Related — elevated to primary CTA */
.yt-fallback .video-related-btn {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201, 168, 76, 0.08);
}
.yt-fallback .video-related-btn:hover {
    background: rgba(201, 168, 76, 0.18);
    border-color: var(--gold);
    color: var(--gold);
}

.video-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.video-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.25px;
    color: rgba(239,240,242,0.9);
}

p.video-description, .video-description {
    color: rgba(239,240,242,0.75);
    font-size: 1.1rem;
    line-height: 1.7;
    flex-grow: 1;
    margin: 0;
}

.video-item a {
    color: var(--gold);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    transition: color 0.2s ease, gap 0.2s ease;
}

.video-item a:hover { color: var(--gold-bright); gap: 10px; }
/* SVG icon used on .video-related-btn — no text arrow needed on video-item links */
.video-watch-btn::after,
.video-related-btn::after { content: none; }

/* External-link SVG icon sizing */
.ext-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Video slider (static sections) */
.video-slider-wrapper { position: relative; width: 100%; }

.video-slider {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 1rem;
}

.video-slider::-webkit-scrollbar { display: none; }

.video-card {
    flex: 0 0 calc(33.333% - 1rem);
    scroll-snap-align: start;
    text-decoration: none;
    color: var(--body);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    background-image: var(--noise);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--steel);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    transition: border-left-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.video-card:hover {
    border-left-color: var(--gold);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, opacity 0.3s ease;
    opacity: 0.82;
}

.video-card:hover .video-thumbnail img { transform: scale(1.04); opacity: 0.95; }

.play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; height: 50px;
    background: var(--ember);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(176,58,26,0.35);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 2;
}

.play-btn::after {
    content: '';
    width: 0; height: 0;
    border-left: 15px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    margin-left: 4px;
}

.video-card:hover .play-btn {
    background: var(--gold);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(200,146,10,0.35);
}

.video-info { padding: 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }

.video-info h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.4rem 0;
    line-height: 1.35;
    color: var(--ink);
    transition: color 0.2s ease;
}

.video-card:hover .video-info h3 { color: var(--ember); }

.video-desc {
    font-size: 0.9rem;
    color: var(--secondary);
    margin: 0 0 1rem 0;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* KEEPER: View button matches primary style */
.video-view-btn {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    background: var(--ink);
    color: var(--surface);
    border-left: 3px solid var(--gold);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    margin-top: auto;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: background 0.2s ease, color 0.2s ease;
    border-top: none; border-right: none; border-bottom: none;
}

.video-card:hover .video-view-btn { background: var(--ember); border-left-color: var(--gold); }

/* Hero slider dot controls */
.slider-dots {
    display: none;              /* hidden on desktop — arrows handle it */
    justify-content: center;
    gap: 12px;
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.slider-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.slider-dots .dot:hover  { background: rgba(255,255,255,0.7); transform: scale(1.3); }
.slider-dots .dot.active { background: var(--gold); transform: scale(1.4); }

.dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--muted);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dot:hover { transform: scale(1.3); }
.dot.active { background: var(--gold); transform: scale(1.4); }

/* =========================================
   BRAND / CATEGORY GRID
   ========================================= */
.brands-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; align-items: center; }

.brand-item {
    background: var(--surface);
    background-image: var(--noise);
    padding: 1.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: var(--muted);
}

.brand-item:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); color: var(--ink); }

.brand-placeholder-logo {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 2px;
    transition: color 0.2s ease;
}

.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }

.category-card {
    text-decoration: none;
    color: var(--body);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--surface);
    background-image: var(--noise);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    padding-bottom: 1.25rem;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.category-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }

.category-img-wrapper { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-raised); }

.category-img-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease, opacity 0.3s ease;
    opacity: 0.85;
}

.category-card:hover .category-img-wrapper img { transform: scale(1.06); opacity: 1; }

.category-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0.9rem 0 0.3rem 0;
    transition: color 0.2s ease;
    color: var(--ink);
}

.category-card:hover h3 { color: var(--ember); }
.category-card p { font-size: 0.82rem; color: var(--secondary); margin: 0; line-height: 1.5; }

/* =========================================
   ERROR MESSAGE
   ========================================= */
.error-message {
    background: var(--ember-dim);
    border: 1px solid var(--ember);
    border-left: 4px solid var(--ember);
    color: var(--ember-bright);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius);
    font-size: 0.88rem;
}

/* =========================================
   YOUTUBE UNAVAILABLE — TOAST + INLINE NOTICE
   ========================================= */

/* Dismissible toast — lives inside res-slider-wrapper, directly above the slider track */
.yt-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #2a1f10;
    border: 1px solid var(--gold);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
    animation: yt-toast-in 0.3s ease;
}

@keyframes yt-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.yt-toast-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.yt-toast-body {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #e8d5a3;
}

.yt-toast-body strong {
    display: block;
    color: var(--gold);
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.yt-toast-dismiss {
    background: none;
    border: none;
    color: #a08840;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.05rem;
    transition: color 0.2s;
}

.yt-toast-dismiss:hover {
    color: var(--gold);
}

/* Inline notice card — sits above AI fallback links in the Resources slider */
.yt-inline-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(201, 168, 76, 0.07);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.yt-inline-notice-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.yt-inline-notice-body {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.yt-inline-notice-body strong {
    display: block;
    color: var(--gold);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

/* =========================================
   PWA INSTALL PROMPT — KEEPER: left-border accent
   ========================================= */
.install-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    background-image: var(--noise);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--gold);
    border-left: 5px solid var(--gold);
    color: var(--body);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow-xl);
    display: none;
    align-items: center;
    gap: 1.5rem;
    z-index: 1000;
    max-width: 90%;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.install-prompt.show { display: flex; animation: slideUp 0.3s ease; }
.install-prompt-content { flex: 1; }

.install-prompt-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--ink);
}

.install-prompt-text { font-size: 0.85rem; color: var(--secondary); }

.safari-instructions {
    display: none;
    font-size: 0.8rem;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    color: var(--muted);
}

.safari-instructions.show { display: block; }
.share-icon { color: var(--gold); }

/* KEEPER: install button matches primary style */
.install-prompt button {
    background: var(--ink);
    color: var(--surface);
    border: 1px solid var(--ink);
    border-left: 4px solid var(--gold);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: background 0.2s ease;
    box-shadow: var(--shadow-xs);
}

.install-prompt button:hover { background: var(--ember); border-color: var(--ember); border-left-color: var(--gold); }

.install-prompt .close-btn {
    position: absolute;
    top: 10px; right: 10px;
    background: transparent;
    color: var(--muted);
    padding: 4px 10px;
    font-size: 1.3rem;
    box-shadow: none;
    line-height: 1;
    border: none;
    transition: color 0.2s ease;
}

.install-prompt .close-btn:hover { color: var(--ink); background: transparent; transform: none; }

@keyframes slideUp {
    from { transform: translateX(-50%) translateY(60px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

@media (max-width: 576px) {
    .install-prompt {
        flex-direction: column; align-items: stretch;
        padding: 40px 20px 20px; gap: 1rem;
        width: calc(100% - 48px); max-width: calc(100% - 48px); bottom: 16px;
    }
    .install-prompt button:not(.close-btn) { width: 100%; }
}

/* =========================================
   OFFLINE INDICATOR — KEEPER: left-border accent
   ========================================= */
.offline-indicator {
    position: fixed;
    top: 20px; right: 20px;
    background: var(--surface);
    background-image: var(--noise);
    border: 1px solid var(--ember);
    border-left: 4px solid var(--ember);
    color: var(--ink);
    padding: 0.85rem 1.5rem;
    display: none;
    z-index: 1000;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius);
}

.offline-indicator.show { display: block; animation: slideIn 0.3s ease; }

@keyframes slideIn {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* =========================================
   RESULTS SECTION NAVIGATION
   KEEPER: top border + icon sets.
   v3.9: High contrast — white surface, deep shadow,
         gold top border, bold active state.
   ========================================= */
.results-nav {
    position: sticky;
    top: calc(var(--site-nav-h) + 8px);
    z-index: 200;
    background: var(--surface);
    background-image: var(--noise);
    /* Steel top border — blue flash, pops against the page */
    border: 1px solid var(--rule);
    border-top: 4px solid var(--steel);
    /* Deeper shadow lifts it clearly off page */
    box-shadow: 0 8px 32px rgba(7,11,15,0.18), 0 2px 6px rgba(7,11,15,0.1);
    max-width: 75%;
    margin: 1.5rem auto 0;
    border-radius: 0 0 var(--radius) var(--radius);
}

.results-nav-hamburger { display: none; }

.results-nav-menu {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 0;
}

.results-nav-header { display: none; }

/* KEEPER: icon + label buttons */
.results-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.85rem 1.5rem;
    background: none;
    border: none;
    border-right: 1px solid var(--rule);
    border-bottom: 3px solid transparent;
    color: var(--secondary);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.25px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease, background 0.2s ease, border-bottom-color 0.2s ease;
    white-space: nowrap;
    margin-bottom: -1px;
}

.results-nav-link:last-child { border-right: none; }

/* Clear Results button — ember-accented, sits at far right of desktop nav bar */
.results-nav-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.85rem 1.5rem;
    margin-left: auto;
    background: none;
    border: none;
    border-left: 1px solid var(--rule);
    border-bottom: 3px solid transparent;
    color: var(--secondary);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.25px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -1px;
    transition: color 0.2s ease, background 0.2s ease, border-bottom-color 0.2s ease;
}

.results-nav-clear-btn:hover {
    background: var(--surface-raised);
    color: var(--ember);
    border-bottom-color: var(--ember);
}

.results-nav-link:hover {
    background: var(--surface-raised);
    color: var(--ink);
    border-bottom-color: var(--gold);
}

/* Active: steel border-bottom, ember text — blue flash + red energy */
.results-nav-link.active {
    color: var(--ember);
    border-bottom-color: var(--steel);
    background: var(--surface-raised);
    font-weight: 800;
}

.results-nav-overlay { display: none; }

/* Mobile drawer */
@media (max-width: 768px) {
    .results-nav {
        max-width: 100%;
        margin: 0;
        display: flex;
        align-items: center;
        padding: 0;
        border-radius: 0;
    }

    .results-nav-hamburger {
        display: flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: none;
        padding: 1rem 1.25rem;
        cursor: pointer;
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: 0.25px;
        z-index: 210;
    }

    .hamburger-icon { display: flex; flex-direction: column; gap: 5px; width: 22px; }

    .hamburger-icon span {
        display: block;
        height: 2px;
        background: var(--body);
        border-radius: 1px;
        transition: all 0.3s ease;
    }

    .results-nav-hamburger.open .hamburger-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--ember); }
    .results-nav-hamburger.open .hamburger-icon span:nth-child(2) { opacity: 0; }
    .results-nav-hamburger.open .hamburger-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--ember); }

    .results-nav-menu {
        position: fixed;
        top: 72px;
        left: -280px;
        width: 260px;
        height: 100vh;
        background: var(--surface);
        background-image: var(--noise);
        border-right: 3px solid var(--gold);
        box-shadow: var(--shadow-xl);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        z-index: 300;
        transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow-y: auto;
    }

    .results-nav-menu.open { left: 0; }

    .results-nav-header {
        display: block;
        padding: 1.5rem 1.25rem 1rem;
        font-family: var(--font-body);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 2px;
        color: var(--muted);
        text-transform: uppercase;
        border-bottom: 1px solid var(--rule);
    }

    .results-nav-link {
        border-right: none;
        border-bottom: 1px solid var(--rule);
        border-left: 3px solid transparent;
        padding: 1.1rem 1.25rem;
        font-size: 1rem;
        justify-content: flex-start;
    }

    .results-nav-link:hover {
        background: var(--surface-raised);
        border-left-color: var(--gold);
        border-bottom-color: var(--rule);
        color: var(--ink);
    }

    .results-nav-link.active {
        background: var(--surface-raised);
        border-left-color: var(--ember);
        color: var(--ember);
        border-bottom-color: var(--rule);
    }

    /* Clear button in mobile drawer — full width, ember tinted, sits at bottom */
    .results-nav-clear-btn {
        margin-left: 0;
        border-left: 3px solid transparent;
        border-bottom: 1px solid var(--rule);
        border-top: 2px solid var(--rule);
        margin-top: 0;
        padding: 1.1rem 1.25rem;
        font-size: 1rem;
        justify-content: flex-start;
        width: 100%;
        color: var(--ember);
    }

    .results-nav-clear-btn:hover {
        background: var(--surface-raised);
        border-left-color: var(--ember);
        border-bottom-color: var(--rule);
        color: var(--ember);
    }

    .results-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(28,36,48,0.4);
        z-index: 299;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .results-nav-overlay.open { opacity: 1; pointer-events: all; }
}

/* =========================================
   RESULTS SECTION
   ========================================= */
.results-section { margin-top: 0; }
.welcome-section { padding-top: 3rem; background-color: var(--page); }

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
    background-color: var(--forge);
    background-image: var(--noise);
    color: rgba(239,240,242,0.45);
    padding: 5rem 2rem 0;
    /* Hard cut — deep forge against the light page */
    border-top: 4px solid var(--anvil);
    position: relative;
}

/* Steel-to-forge gradient seam at footer top */
.site-footer::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(to right, transparent, var(--steel), var(--steel-bright), var(--gold), var(--steel-bright), var(--steel), transparent);
}

.footer-inner { max-width: 1200px; margin: 0 auto; }

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--seam);
}

.footer-col h3, .footer-col h4 {
    font-family: var(--font-display);
    color: var(--page);
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    letter-spacing: 2px;
}

.footer-col h3 { font-size: 1.8rem; }
.footer-col h3 span { color: var(--gold); font-style: normal; }
.footer-col h4 { font-size: 0.85rem; letter-spacing: 2px; font-style: normal; text-transform: uppercase; }

.footer-col p { font-size: 1.1rem; line-height: 1.75; margin-bottom: 1.25rem; color: rgba(239,240,242,0.72); }

.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 0.6rem; font-size: 0.85rem; }

.footer-list a {
    color: rgba(239,240,242,0.4);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.footer-list a:hover { color: var(--gold); }

.contact-info li { position: relative; padding-left: 1.25rem; }
.contact-info li::before { content: '›'; color: var(--gold); position: absolute; left: 0; line-height: 1.4; }

.footer-subscribe-form { display: flex; flex-direction: column; gap: 0; }

.footer-subscribe-form input {
    padding: 0.9rem;
    background: var(--iron);
    border: 1px solid var(--seam);
    border-bottom: none;
    color: var(--page);
    font-family: var(--font-body);
    font-size: 0.85rem;
    outline: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: border-color 0.2s ease;
}

.footer-subscribe-form input:focus { border-color: var(--gold); }

/* KEEPER: subscribe button matches primary style */
.footer-subscribe-form button {
    padding: 0.9rem;
    background: var(--ember);
    color: var(--surface);
    border: none;
    border-left: 4px solid var(--gold);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 2px;
    border-radius: 0 0 0 0;
    transition: background 0.2s ease;
}

.footer-subscribe-form button:hover { background: var(--ember-bright); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(239,240,242,0.55);
    font-family: var(--font-body);
    font-weight: 500;
}

.social-links { display: flex; gap: 1rem; }

.social-links a {
    color: rgba(239,240,242,0.3);
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.2s ease;
    font-family: var(--font-body);
    font-weight: 500;
}

.social-links a:hover { color: var(--gold); }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 992px) {
    .brands-grid { grid-template-columns: repeat(4, 1fr); }
    .video-card  { flex: 0 0 calc(50% - 0.75rem); }
}

@media (max-width: 768px) {
    .hero-slider-container { height: 600px; }
    .nav-arrow { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
    /* Swap arrows for dots on mobile */
    .slider-nav  { display: none; }
    .slider-dots { display: flex; bottom: 100px; z-index: 25; }
    /* Align slide content to top so it clears the fixed nav */
    .hero-slide   { align-items: flex-start; }
    .slide-content { padding-top: calc(var(--site-nav-h) + 1.5rem); }
    .slide-desc   { font-size: 1.5rem; }
    .form-columns { grid-template-columns: 1fr; gap: 1rem; }
    .form-col { gap: 1rem; }
    .search-card { padding: 1.5rem; }
    .search-wrapper { margin-top: -80px; padding: 0 1rem; }
    .section-number { font-size: 6rem; top: -8px; }
    .section-title { font-size: 2.2rem; }
    .page-section { padding: 4rem 1rem; }
    .parts-list { grid-template-columns: repeat(2, 1fr); }
    .specs-grid { grid-template-columns: 1fr; }
    .brands-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .footer-main { grid-template-columns: 1fr; gap: 2rem; }
    .footer-col { width: 100%; }
    .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
}

@media (max-width: 576px) {
    .video-card  { flex: 0 0 100%; }
    .brands-grid { grid-template-columns: repeat(2, 1fr); }
    .search-card { padding: 1.25rem; }
    .search-wrapper { padding: 0 0.75rem; }
    .search-results { margin-top: 25px; }
    .form-group { margin-bottom: 1rem; }
    .parts-list { grid-template-columns: 1fr; gap: 0.75rem; }
    .retailer-links a { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
}


/* =========================================
   DISCLAIMER MODAL
   ========================================= */

.disclaimer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5, 7, 9, 0.82);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(3px);
}

.disclaimer-backdrop.open {
    display: flex;
    animation: disclaimer-fade-in 0.25s ease;
}

@keyframes disclaimer-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.disclaimer-modal {
    background: var(--surface);
    background-image: var(--noise);
    border: 1px solid var(--anvil);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius-lg, 10px);
    width: 100%;
    max-width: 640px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    animation: disclaimer-slide-in 0.28s ease;
}

@keyframes disclaimer-slide-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header */
.disclaimer-modal-header {
    padding: 1.75rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--anvil);
    flex-shrink: 0;
}

.disclaimer-modal-eyebrow {
    font-size: 0.72rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.4rem;
}

.disclaimer-modal-title {
    font-size: 1.6rem;
    font-family: var(--font-display);
    color: var(--text-primary);
    margin: 0 0 0.3rem;
    line-height: 1.2;
}

.disclaimer-modal-title span {
    color: var(--gold);
}

.disclaimer-modal-subtitle {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Scrollable body */
.disclaimer-modal-body {
    padding: 1.25rem 1.75rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Individual blocks */
.disclaimer-block {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.disclaimer-block:last-child {
    border-bottom: none;
}

.disclaimer-block-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
    margin-top: 0.1rem;
}

.disclaimer-block h3 {
    font-size: 0.9rem;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
    letter-spacing: 0.3px;
}

.disclaimer-block p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.disclaimer-block p strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Highlighted final block — feedback CTA */
.disclaimer-block--highlight {
    background: rgba(201, 168, 76, 0.07);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 0.5rem;
}

.disclaimer-block--highlight h3 {
    color: var(--gold);
}

/* Footer */
.disclaimer-modal-footer {
    padding: 1.25rem 1.75rem;
    border-top: 1px solid var(--anvil);
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}

.disclaimer-got-it-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: var(--gold);
    color: var(--ink);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.disclaimer-got-it-btn:hover {
    background: var(--gold-bright, #ddb84a);
    transform: translateY(-1px);
}

/* Footer trigger link */
.footer-disclaimer-link {
    background: none;
    border: none;
    color: rgba(239, 240, 242, 0.4);
    font-size: 0.7rem;
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
    text-decoration: none;
}

.footer-disclaimer-link:hover {
    color: var(--gold);
}

/* Mobile */
@media (max-width: 576px) {
    .disclaimer-modal {
        max-height: 92vh;
        border-radius: var(--radius);
    }
    .disclaimer-modal-header,
    .disclaimer-modal-body,
    .disclaimer-modal-footer {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
    .disclaimer-got-it-btn {
        width: 100%;
        justify-content: center;
    }
}