/* The shell declares font-family: Inter everywhere but never LOADED it.
 * index-v3.php pulls Inter from Google Fonts in its own <head>; when this stylesheet
 * was lifted out of that page's inline <style>, the font <link> stayed behind. Shell
 * pages therefore fell back to a wider system face — measured in Chrome, the string
 * "AccessoriesAttachments" renders 196px on the FAQ vs 184px on the home page, which
 * widened the whole nav row by 80px and pushed the menu 213px over the logo and 98px
 * over the phone number (home: 173px / 43px with the real font).
 *
 * Declared HERE rather than in one template so no future shell page can forget it —
 * the font travels with the stylesheet that asks for it.
 * Ticket 2026-09-04_23-59-18_Russell.
 *
 * SELF-HOSTED since ticket 2026-09-07_16-18-17_Russell. This used to be
 * @import url(fonts.googleapis.com/...), which is the worst shape a webfont can have:
 * an @import is a SERIAL render-blocking request, so the browser had to fetch this
 * stylesheet, parse it, and only THEN discover it needed a second stylesheet from a
 * third-party host — and index-v3.php was requesting the very same Google CSS again
 * with its own <link>. Measured ~110-140ms of blocked render plus two extra hosts
 * (fonts.googleapis.com for the CSS, fonts.gstatic.com for the font itself).
 *
 * Inter ships as a VARIABLE font — ONE file covers every weight from 100 to 900, so
 * the six weights this site uses (400/500/600/700/800/900) cost one 48 KB download,
 * not six. Inter is SIL Open Font License, which expressly permits self-hosting.
 * The unicode-range split is Google's own: a browser only pulls latin-ext if the page
 * actually renders a character in that range, so English pages fetch just the 48 KB.
 * font-display: swap keeps text visible while it loads, exactly as before. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-var.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* rv_site.css -- the storefront page shell, lifted VERBATIM from the inline <style>
 * block in index-v3.php (the live home page) on 2026-09-05.
 * Ticket 2026-09-04_23-59-18_Russell: "a FULL retheme just like we did on the home
 * page ... we are going to start doing all of these static customer facing pages".
 *
 * WHY IT EXISTS: index-v3.php carried 81,754 characters of CSS inline, so every home
 * page hit re-downloaded it and no other page could reach it. 327 selectors, of which
 * only 71 are homepage-widget specific (pf-/hero/fragrance/carousel) -- the other ~78%
 * is site chrome: navbar, footer, buttons, cards, effects. It was never homepage CSS,
 * it was site CSS trapped in one file.
 *
 * NOT YET LINKED FROM THE PUBLIC HOME PAGE. index-v3.php is deliberately untouched so
 * the live home page cannot regress from this extraction. Pointing it here later is a
 * one-line change and makes the home page faster (cacheable file vs inline bytes).
 *
 * Palette note: these tokens (--primary-blue #2563eb, --bg-dark #0a0e27) are the HOME
 * PAGE's, and differ from rv_theme.css (--bg #0b1220, --accent #6366f1). rv_site.css is
 * the page-level shell; rv_theme.css stays the popup/widget theme. See memory
 * retheme-means-rv-theme-bugboard -- following an existing house palette, not a new one.
 */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        :root {
            --primary-blue: #2563eb;
            --primary-blue-light: #3b82f6;
            --primary-blue-dark: #1d4ed8;
            --bg-dark: #0a0e27;
            --bg-card: rgba(15, 23, 42, 0.6);
            --text-light: #e4e4e7;
            --text-white: #ffffff;
            --border-blue: rgba(37, 99, 235, 0.2);
            --glow-blue: rgba(37, 99, 235, 0.6);

            /* Bottom edge of the sticky .navbar, used to park #pf-cart-sidebar
               underneath it. Declared here so the FIRST PAINT is already correct
               and the sidebar never has to be moved by JavaScript — that move was
               the homepage's entire Cumulative Layout Shift (2026-08-03_10-51-50).
               .navbar measures a constant 119.38px at every width where the
               sidebar is visible (it is display:none at <=1200px), verified
               1201/1280/1366/1440/1600/1920/2560. The syncSidebarTop() script near
               the end of the body still overrides this inline for the one case
               that genuinely varies: a logged-in employee whose "on the phone"
               caller bar mounts above the navbar and pushes it down. */
            --nav-h: 119.38px;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg-dark);
            background-image:
                radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(29, 78, 216, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
                radial-gradient(at 0% 100%, rgba(37, 99, 235, 0.15) 0px, transparent 50%);
            min-height: 100vh;
            color: var(--text-light);
            position: relative;
            overflow-x: hidden;
            padding-right: 240px;
            padding-left: 0;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* Scroll Progress Bar */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa);
            z-index: 9999;
            transition: width 0.1s ease-out;
            box-shadow: 0 0 10px rgba(37, 99, 235, 0.8);
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                linear-gradient(90deg, rgba(37, 99, 235, 0.03) 1px, transparent 1px),
                linear-gradient(rgba(37, 99, 235, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            pointer-events: none;
            z-index: 0;
        }

        /* Animated Particle Background */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background: rgba(96, 165, 250, 0.6);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(96, 165, 250, 0.8);
            animation: float linear infinite;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) translateX(0) scale(0);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                transform: translateY(-100px) translateX(var(--tx)) scale(1);
                opacity: 0;
            }
        }

        /* Ripple Effect */
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            transform: scale(0);
            animation: ripple-effect 0.6s ease-out;
            pointer-events: none;
        }

        @keyframes ripple-effect {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        /* Scroll Reveal Animations */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Floating Animation */
        @keyframes floatBadge {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        /* Shimmer Loading Effect */
        @keyframes shimmer {
            0% {
                background-position: -1000px 0;
            }

            100% {
                background-position: 1000px 0;
            }
        }

        .loading {
            background: linear-gradient(90deg,
                    rgba(15, 23, 42, 0.8) 0%,
                    rgba(37, 99, 235, 0.2) 50%,
                    rgba(15, 23, 42, 0.8) 100%);
            background-size: 1000px 100%;
            animation: shimmer 2s infinite;
        }

        /* 3D Tilt Effect */
        .tilt-card {
            transform-style: preserve-3d;
            transition: transform 0.3s ease;
        }

        /* Enhanced Glow Effect */
        .glow-on-hover {
            position: relative;
            overflow: hidden;
        }

        .glow-on-hover::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(96, 165, 250, 0.4) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
            pointer-events: none;
        }

        .glow-on-hover:hover::after {
            width: 500px;
            height: 500px;
        }

        /* ==================== NAVBAR ==================== */
        .navbar {
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            width: 100vw;
            margin-left: 0;
            z-index: 1000;
            background: linear-gradient(135deg, rgba(10, 14, 39, 0.98), rgba(15, 23, 42, 0.95));
            backdrop-filter: blur(25px);
            border-bottom: 2px solid var(--border-blue);
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 100px rgba(37, 99, 235, 0.1);
            animation: navSlideDown 0.6s ease-out;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .navbar.scrolled {
            padding: 0;
            box-shadow: 0 12px 50px rgba(0, 0, 0, 0.7), 0 0 150px rgba(37, 99, 235, 0.15);
            border-bottom-color: rgba(37, 99, 235, 0.5);
        }

        .navbar.scrolled .navbar-content {
            padding: 0 20px;
        }
        .navbar.scrolled .navbar-row1 {
            padding: 4px 0 3px;
        }
        .navbar.scrolled .navbar-bottom {
            padding: 2px 0 5px;
        }

        .navbar.scrolled .logo-section img {
            /* Intentionally no height override here — was 60px, shrinking the logo
               on scroll. Russell wants it to stay the same size at all times; only
               the glow intensifies on scroll now. See ticket 2026-08-01_19-06-09_Russell. */
            filter: drop-shadow(0 0 30px var(--glow-blue)) drop-shadow(0 6px 25px rgba(37, 99, 235, 0.8));
        }

        @keyframes navSlideDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .navbar-content {
            display: flex;
            flex-direction: column;
            position: relative;
            padding: 0 20px;
            width: 100%;
        }

        /* Logo: absolutely positioned so it floats outside the row flow */
        .logo-section {
            position: absolute;
            left: 20px;
            top: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            z-index: 2;
        }

        /* ── Row 1: Nav links (true center via justify-content) | Phone ── */
        .navbar-row1 {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 6px 0;
            position: relative;
        }

        /* Nav links stay in flow, centered by the flex parent */
        .navbar-row1 .nav-links {
            flex: unset;
        }

        /* ── Row 2: Search bar + quick buttons ── */
        .navbar-bottom {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 100%;
            padding: 0 0 5px;
            border-top: 1px solid rgba(37, 99, 235, 0.14);
        }

        /* Search: stays in flow, centered by flex parent */
        .navbar-bottom .nav-search {
            width: 440px;
            max-width: 60%;
            pointer-events: auto;
        }

        /* Quick buttons: pinned to right edge */
        .navbar-bottom .nav-quick-buttons {
            position: absolute;
            right: 0;
        }

        /* YOUR CODE badge slot -- desktop placement (>=769px; see rv_site_nav.tpl's picker
           script for which candidate becomes #rv-vc-slot at a given width, and why 769 not
           901). Plain in-flow, right before .nav-search in the markup -- NOT position:absolute:
           that needs a left/right number, and neither the logo's edge nor .nav-search's edge
           sits at a fixed spot across widths (both measured and both tried; each collided
           somewhere -- see the picker script's comment). In-flow needs no number at all.
           Moved here 2026-09-27 (owner, ticket 2026-09-08_00-24-12_Russell) from beside the
           logo: .logo-section is position:absolute with no reserved space (see .navbar-row1
           below), so the centered nav pills already ran underneath the bare logo at
           769-1620px, and the badge inherited that collision riding along beside it. */
        .navbar-bottom #rv-vc-slot {
            margin-right: 14px;
        }

        .logo-section img {
            height: 120px;
            width: auto;
            filter: drop-shadow(0 0 25px var(--glow-blue)) drop-shadow(0 4px 20px rgba(37, 99, 235, 0.5));
            transition: all 0.4s ease;
            animation: logoPulse 4s ease-in-out infinite;
        }

        @keyframes logoPulse {

            0%,
            100% {
                filter: drop-shadow(0 0 25px var(--glow-blue)) drop-shadow(0 4px 20px rgba(37, 99, 235, 0.5));
            }

            50% {
                filter: drop-shadow(0 0 35px var(--glow-blue)) drop-shadow(0 8px 25px rgba(37, 99, 235, 0.8));
            }
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 1;
            justify-content: center;
        }

        .nav-links a {
            color: var(--text-white);
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            padding: 8px 10px;
            border-radius: 10px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-transform: uppercase;
            letter-spacing: 0.8px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.7), rgba(37, 99, 235, 0.5));
            box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
            border: 1px solid rgba(59, 130, 246, 0.25);
        }

        /* Two-line pills (Rainbow/Vacuum, Accessories/Attachments) — narrower per
           button than a one-line label at this length, which is what leaves room
           for Belts/Filters as a new top-level item without widening the row.
           See ticket 2026-08-01_19-06-09_Russell. */
        .nav-links a.nav-stacked {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1.3;
            padding-top: 6px;
            padding-bottom: 6px;
        }

        .nav-links a::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.3), transparent);
            transition: left 0.4s ease;
        }

        .nav-links a:hover::before {
            left: 100%;
        }

        .nav-links a:hover {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.55), rgba(59, 130, 246, 0.4));
            color: var(--text-white);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5), 0 0 40px rgba(37, 99, 235, 0.25);
            border-color: rgba(96, 165, 250, 0.5);
        }

        .nav-links a.nav-repair {
            background: linear-gradient(135deg, #ff4444, #dc2626);
            color: var(--text-white);
            box-shadow: 0 4px 15px rgba(255, 68, 68, 0.4);
        }

        .nav-links a.nav-repair:hover {
            background: linear-gradient(135deg, #ff5555, #ef4444);
            box-shadow: 0 6px 20px rgba(255, 68, 68, 0.6);
            transform: translateY(-2px) scale(1.05);
        }

        .nav-right-tools {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
        }

        .nav-quick-buttons {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: nowrap;
        }

        .nav-quick-buttons a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.4px;
            padding: 10px 16px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.12);
            transition: all 0.25s ease;
            white-space: nowrap;
        }

        /* currency picker: a small pill under the phone numbers (rv_currency.js). It was in the quick-button row first and squeezed the search box. */
        .nav-contact .rv-cur-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin: 6px 0 0; padding: 4px 12px; color: rgba(255, 255, 255, 0.92); font: 700 12px/1.2 sans-serif; font-family: inherit; letter-spacing: 0.4px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer; white-space: nowrap; overflow: visible; transition: all 0.25s ease; }
        /* 10/8 9:45 PM (Russell: a blurred gray band left of the USD pill): the global button rule above gives every button a white shine sweep (::before at left:-100%) that overflow:hidden normally hides;
           the pill is overflow:visible, so the sweep showed. Buttons that draw their own look carry no shine, no animation, no lift (same fix as the Compare links, rule 49). */
        .nav-contact .rv-cur-btn::before, .nav-contact .rv-cur-btn::after, .global-search-add::before, .global-search-add::after { content: none; display: none; }
        .nav-contact .rv-cur-btn, .global-search-add { animation: none; }
        .nav-contact .rv-cur-btn:hover, .global-search-add:hover { transform: none; box-shadow: none; }
        .nav-contact .rv-cur-btn:hover, .nav-contact .rv-cur-btn:focus-visible { background: rgba(59, 130, 246, 0.26); color: #fff; border-color: rgba(96, 165, 250, 0.45); }

        .nav-quick-buttons a:hover {
            background: rgba(59, 130, 246, 0.26);
            color: #fff;
            border-color: rgba(96, 165, 250, 0.45);
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28);
        }

        @media (max-width: 900px) {
            .nav-quick-buttons {
                display: none;
            }
        }

        /* Dropdown Menu */
        .nav-item {
            position: relative;
            display: inline-flex;
            width: fit-content;
        }

        .nav-item>a {
            position: relative;
            z-index: 1001;
        }

        .dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            transform: translateY(-10px);
            min-width: 220px;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.98));
            backdrop-filter: blur(20px);
            border-radius: 12px;
            padding: 8px 0;
            padding-top: 13px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(37, 99, 235, 0.2);
            z-index: 1000;
        }

        .nav-item>a:hover+.dropdown,
        .nav-item:hover .dropdown,
        .dropdown:hover,
        .nav-item.dropdown-open .dropdown {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }

        .dropdown a {
            display: block;
            padding: 12px 20px;
            color: var(--text-light);
            text-decoration: none;
            font-weight: 600;
            font-size: 13px;
            text-transform: none;
            letter-spacing: 0.3px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-left: 3px solid transparent;
            position: relative;
            overflow: hidden;
            opacity: 0;
            transform: translateX(-10px);
        }

        .nav-item:hover .dropdown a,
        .nav-item.dropdown-open .dropdown a {
            opacity: 1;
            transform: translateX(0);
        }

        /* Staggered animation for dropdown items */
        .dropdown a:nth-child(1) {
            transition-delay: 0.05s;
        }

        .dropdown a:nth-child(2) {
            transition-delay: 0.1s;
        }

        .dropdown a:nth-child(3) {
            transition-delay: 0.15s;
        }

        .dropdown a:nth-child(4) {
            transition-delay: 0.2s;
        }

        .dropdown a:nth-child(5) {
            transition-delay: 0.25s;
        }

        .dropdown a:nth-child(6) {
            transition-delay: 0.3s;
        }

        /* Ripple effect on click */
        .dropdown a::after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
            border-radius: 50%;
            pointer-events: none;
        }

        .dropdown a:active::after {
            width: 300px;
            height: 300px;
        }

        .dropdown a:hover {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(59, 130, 246, 0.2));
            color: var(--text-white);
            border-left-color: var(--primary-blue);
            transform: translateX(8px);
            box-shadow: inset 0 0 20px rgba(37, 99, 235, 0.1);
        }

        .dropdown a::before {
            display: none;
        }

        /* Phone group: pinned to right edge of row */
        .nav-contact-group {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 3px;
        }

        .nav-contact {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 1px;
            padding: 4px 10px;
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.15));
            border-radius: 12px;
            border: 1px solid rgba(37, 99, 235, 0.3);
            transition: all 0.3s ease;
        }

        .nav-contact:hover {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(59, 130, 246, 0.25));
            border-color: rgba(37, 99, 235, 0.5);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
        }

        .nav-phone {
            color: #60a5fa;
            font-weight: 800;
            font-size: 17px;
            text-decoration: none;
            letter-spacing: 0.5px;
            text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
        }

        .nav-phone-intl {
            color: var(--text-light);
            font-size: 13px;
            opacity: 0.9;
            font-weight: 500;
        }

        /* ==================== NAVBAR SEARCH BAR ==================== */
        .nav-search {
            position: relative;
            width: 100%;
            max-width: 800px;
        }

        .global-search-form {
            position: relative;
            width: 100%;
        }

        .global-search-input {
            width: 100%;
            padding: 8px 16px;
            padding-left: 40px !important;
            background: rgba(15, 23, 42, 0.8);
            border: 2px solid var(--border-blue);
            border-radius: 50px;
            font-size: 14px;
            color: var(--text-white);
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .global-search-input::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        .global-search-input:focus {
            outline: none;
            border-color: var(--primary-blue);
            background: rgba(15, 23, 42, 0.95);
            box-shadow: 0 0 30px rgba(37, 99, 235, 0.3);
        }

        .global-search-icon {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-blue-light);
            font-size: 15px;
            pointer-events: none;
        }

        .global-search-results {
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            right: 0;
            min-width: 600px;
            background: linear-gradient(135deg, rgb(15, 23, 42), rgb(10, 14, 39));   /* fully opaque (10/9: page content, such as the Compare pictures, showed through at 95%) */
            backdrop-filter: blur(25px);
            border: 2px solid var(--border-blue);
            border-radius: 16px;
            max-height: 500px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 100px rgba(37, 99, 235, 0.1);
            z-index: 9999 !important;
            display: none;
        }

        .global-search-results.active {
            display: block !important;
            animation: fadeIn 0.3s ease;
        }

        .global-search-results {
            padding: 15px;
        }

        #global-search-items-list {
            overflow-y: auto;
            max-height: 400px;
        }

        .global-search-items-header {
            color: var(--primary-blue-light);
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            margin: 0 0 15px 0;
            letter-spacing: 0.5px;
        }

        .global-search-item {
            display: flex;
            align-items: center;
            padding: 10px;
            margin-bottom: 8px;
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(37, 99, 235, 0.2);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .global-search-item:hover {
            background: rgba(37, 99, 235, 0.1);
            border-color: var(--primary-blue-light);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(37, 99, 235, 0.2);
        }

        .global-search-item img {
            width: 50px;
            height: 50px;
            object-fit: contain;
            margin-right: 12px;
            border-radius: 4px;
            border: 1px solid rgba(37, 99, 235, 0.2);
        }

        .global-search-item-details {
            flex: 1;
        }

        .global-search-item-name {
            color: var(--text-white);
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 3px;
        }

        .global-search-item-model {
            color: var(--text-light);
            font-size: 11px;
            margin-bottom: 2px;
        }

        .global-search-item-price {
            color: var(--primary-blue-light);
            font-size: 13px;
            font-weight: 700;
            text-align: right;
        }

        .global-search-view-all {
            text-align: center;
            padding: 12px;
            margin-top: 10px;
            border-top: 1px solid rgba(37, 99, 235, 0.2);
            color: var(--primary-blue-light);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .global-search-view-all:hover {
            background: rgba(37, 99, 235, 0.1);
        }

        /* ==================== NAV SEARCH DROPDOWN: rows, chips, "View all" (rv_global_search.js, 2026-10-08) ====================
           The rows are real links now; the chip strip's colors used to be inline styles written for a white page. */
        .global-search-item { text-decoration: none; color: inherit; }
        .global-search-item:focus-visible, .global-search-view-all:focus-visible, .global-search-suggestion:focus-visible { outline: 2px solid var(--primary-blue-light); outline-offset: 2px; }
        .global-search-item-price.is-status { color: #fbbf24; }

        /* NAV SEARCH DROPDOWN, 2026-10-08: a row = the picture-and-words link + a side (price, Add to Cart, a note) */
        .global-search-item { gap: 10px; }
        .global-search-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; color: inherit; text-decoration: none; }
        .global-search-main:focus-visible { outline: 2px solid var(--primary-blue-light); outline-offset: 2px; border-radius: 6px; }
        .global-search-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 150px; }
        .global-search-add { padding: 3px 10px; border: 0; border-radius: 6px; background: linear-gradient(135deg, #34d399, #10b981); color: #06281d; font: 700 11px/1.3 sans-serif; font-family: inherit; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; white-space: nowrap; box-shadow: none; animation: none; }
        .global-search-add:hover:not(:disabled) { filter: brightness(1.08); }
        .global-search-add:disabled { opacity: .75; cursor: default; }
        .global-search-add.is-added { background: #fff; color: #047857; }
        .global-search-add:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
        .global-search-note { max-width: 150px; font-size: 11px; line-height: 1.3; color: #fca5a5; text-align: right; }
        .global-search-hit { background: #fde68a; color: #111827; border-radius: 3px; padding: 0 1px; }
        a.global-search-view-all { display: block; text-decoration: none; }
        .global-search-results { max-height: none; }   /* the list inside is 400 px and scrolls; the panel holds the header, the list, View all and the chips */
        .global-search-suggestions { margin-top: 6px; padding: 10px 0 4px; border-top: 1px solid var(--border-blue); }
        .global-search-suggestions-title { margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-light); }
        .global-search-suggestion { display: inline-block; margin: 0 6px 6px 0; padding: 3px 11px; border: 1px solid var(--primary-blue-light); border-radius: 14px; color: var(--text-white); font-size: 13px; white-space: nowrap; text-decoration: none; }
        .global-search-suggestion:hover { background: rgba(37, 99, 235, 0.15); }
        .global-search-suggestion-n { opacity: .7; }

        /* ==================== HERO ==================== */
        .hero {
            position: relative;
            padding: 30px 30px 40px;
            text-align: center;
            overflow: hidden;
            /* NOTE: never put a transform on .hero itself. It is a normal-flow
               section, so a transform moves it visually WITHOUT reserving space,
               and it slides down over the part-finder tiles below. The scroll
               parallax drives --hero-glow-shift on the decorative ::before layer
               instead (see heroParallax()). */
        }

        .hero::before {
            content: '';
            position: absolute;
            top: calc(50% + var(--hero-glow-shift, 0px));
            left: 50%;
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(37, 99, 235, 0.15), transparent 70%);
            transform: translate(-50%, -50%);
            animation: pulse 8s ease-in-out infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.5;
            }

            50% {
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 0.8;
            }
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 1200px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 4.5em;
            font-weight: 900;
            margin-bottom: 30px;
            letter-spacing: -0.03em;
            line-height: 1.1;
            background: linear-gradient(90deg,
                    #ff4444 0%,
                    #ff8800 16%,
                    #ffdd00 33%,
                    #44cc44 50%,
                    #2299ff 66%,
                    #6644ff 83%,
                    #cc44ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 60px rgba(37, 99, 235, 0.4);
            filter: drop-shadow(0 4px 20px rgba(37, 99, 235, 0.3));
        }

        .hero p {
            font-size: 1.4em;
            color: rgba(255, 255, 255, 0.9);
            max-width: 900px;
            margin: 0 auto 35px;
            line-height: 1.7;
            font-weight: 400;
        }

        .hero-badges {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: nowrap;
            margin-bottom: 40px;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.6));
            backdrop-filter: blur(20px);
            border: 2px solid var(--border-blue);
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-white);
            text-decoration: none;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
        }

        .badge:hover {
            transform: translateY(-5px) scale(1.05);
            border-color: var(--primary-blue);
            box-shadow: 0 15px 40px rgba(37, 99, 235, 0.5), 0 0 30px rgba(59, 130, 246, 0.3);
        }

        .badge::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }

        .badge:hover::after {
            transform: translateX(100%);
        }

        .badge-icon {
            font-size: 17px;
        }

        /* Made in USA pill (home hero; key "Made in USA", Russell 10/8): the real badge picture at pill height, same pill as the others */
        .badge-usa { cursor: default; padding-top: 6px; padding-bottom: 6px; }
        .badge-usa-img { display: block; width: auto; height: 30px; }

        /* ==================== DID YOU KNOW & FRAGRANCE SECTION ==================== */
        /* Fragrance carousel stacked full-width on top; Did You Know sits below it,
           in what used to be blank margin before .main-container. Was a 400px/1fr
           grid (carousel squeezed to 1fr) — see ticket 2026-08-01_19-06-09_Russell.
           Wrapper sits directly in .hero (not .hero-content, which is capped at
           1200px) and cancels .hero's own 30px side padding with a negative margin,
           so .fragrance-carousel reaches .hero's true edges. .did-you-know re-caps
           itself with the same 1200px/60px formula .hero-content uses, so it stays
           pixel-aligned with the h1/paragraph column at every viewport width. */
        .info-fragrance-wrapper {
            display: flex;
            flex-direction: column;
            gap: 30px;
            margin: 20px -30px 0;
            padding-bottom: 20px;
            position: relative;
        }

        .did-you-know {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(59, 130, 246, 0.1));
            backdrop-filter: blur(20px);
            border: 2px solid var(--border-blue);
            border-radius: 20px;
            padding: 24px 30px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 24px;
            width: calc(100% - 60px);
            max-width: 1200px;
            margin: 0 auto;
            align-self: center;
        }

        .did-you-know-title {
            font-size: 1.8em;
            font-weight: 800;
            color: #60a5fa;
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 0 0 auto;
            white-space: nowrap;
        }

        .did-you-know-content {
            flex: 1 1 auto;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.8;
            font-size: 1.05em;
        }

        .did-you-know-content strong {
            color: #60a5fa;
            font-weight: 700;
        }

        .did-you-know-content a {
            color: #fbbf24;
            font-weight: 700;
            text-decoration: underline;
            transition: all 0.3s ease;
        }

        .did-you-know-content a:hover {
            color: #fcd34d;
            text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
        }

        /* ==================== FRAGRANCE CAROUSEL ==================== */
        .fragrance-carousel {
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .fragrance-carousel-title {
            text-align: center;
            font-size: 1.8em;
            font-weight: 800;
            color: #60a5fa;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 2.5em;
        }

        .carousel-container {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .carousel-track {
            display: flex;
            gap: 20px;
            will-change: transform;
            animation: carouselScroll 30s linear infinite;
        }

        @keyframes carouselScroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .carousel-track:hover {
            animation-play-state: paused;
        }

        .carousel-item {
            flex: 0 0 200px;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.6));
            backdrop-filter: blur(20px);
            border: 2px solid var(--border-blue);
            border-radius: 20px;
            padding: 15px;
            transition: all 0.3s ease;
            text-align: center;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            color: inherit;
            position: relative;
        }

        .carousel-item:hover {
            transform: translateY(-8px) scale(1.05);
            border-color: var(--primary-blue);
            box-shadow: 0 15px 50px rgba(37, 99, 235, 0.5), 0 0 40px rgba(59, 130, 246, 0.3);
        }

        .carousel-item:hover img {
            transform: scale(1.1) rotate(2deg);
            filter: brightness(1.1);
        }

        .carousel-item img {
            width: 100%;
            height: 150px;
            object-fit: contain;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            padding: 10px;
            margin-bottom: 12px;
        }

        .carousel-item-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-white);
            margin-bottom: 5px;
            line-height: 1.3;
            min-height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .carousel-item-model {
            font-size: 12px;
            color: var(--primary-blue-light);
            font-weight: 700;
            margin-bottom: 10px;
        }

        .carousel-item-link {
            text-decoration: none;
            color: inherit;
            display: block;
            cursor: pointer;
        }

        .carousel-add-to-cart {
            width: 100%;
            padding: 8px 12px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: auto;
        }

        .carousel-add-to-cart:hover {
            background: linear-gradient(135deg, #059669, #047857);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }

        .carousel-add-to-cart:active {
            transform: translateY(0);
        }

        .carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.8), rgba(29, 78, 216, 0.8));
            border: 2px solid var(--border-blue);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: white;
            font-size: 24px;
            z-index: 2;
            transition: all 0.3s ease;
            user-select: none;
        }

        .carousel-nav:hover {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9));
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5);
        }

        .carousel-nav.prev {
            left: -20px;
        }

        .carousel-nav.next {
            right: -20px;
        }

        /* ==================== MAIN CONTENT ==================== */
        .main-container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 30px 30px 60px;
            position: relative;
            clear: both;
        }

        #part-finder {
            scroll-margin-top: 120px;
            /* clears the sticky navbar */
        }

        .section-title {
            text-align: center;
            font-size: 3em;
            font-weight: 900;
            margin: 70px 0 50px;
            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.03em;
            position: relative;
            padding-bottom: 20px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, transparent, #3b82f6, transparent);
            border-radius: 2px;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
        }

        /* ==================== PART FINDER TILES ==================== */
        .tiles-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
            position: relative;
        }

        .tile {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 100%);
            backdrop-filter: blur(25px);
            border-radius: 28px;
            padding: 30px;
            border: 2px solid rgba(37, 99, 235, 0.3);
            box-shadow:
                0 25px 70px rgba(0, 0, 0, 0.4),
                0 10px 30px rgba(37, 99, 235, 0.05),
                inset 0 2px 0 rgba(255, 255, 255, 0.1);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .tile::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, rgba(37, 99, 235, 0.03), transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .tile:hover {
            border-color: rgba(37, 99, 235, 0.6);
            transform: translateY(-5px);
            z-index: 2;
            box-shadow:
                0 30px 80px rgba(0, 0, 0, 0.5),
                0 15px 40px rgba(37, 99, 235, 0.15),
                0 0 0 1px rgba(37, 99, 235, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.15);
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.92) 100%);
        }

        .tile:hover::before {
            opacity: 1;
        }

        .tile h2 {
            color: var(--text-white);
            margin-bottom: 25px;
            font-size: 1.5em;
            font-weight: 700;
            letter-spacing: -0.01em;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(37, 99, 235, 0.25);
            position: relative;
        }

        .tile h2::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa);
            border-radius: 2px;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 0 10px rgba(37, 99, 235, 0.6);
        }

        .tile:hover h2::after {
            width: 100%;
        }

        .form-group {
            margin-bottom: 24px;
        }

        label {
            display: block;
            margin-bottom: 10px;
            color: var(--text-light);
            font-weight: 500;
            font-size: 0.9em;
            letter-spacing: 0.01em;
            text-transform: uppercase;
        }

        input[type="text"],
        select {
            width: 100%;
            padding: 14px 16px;
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid var(--border-blue);
            border-radius: 12px;
            font-size: 15px;
            color: var(--text-white);
            transition: all 0.3s ease;
            font-family: inherit;
        }

        input[type="text"]::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        input[type="text"]:focus,
        select:focus {
            outline: none;
            border-color: var(--primary-blue);
            background: rgba(15, 23, 42, 0.95);
            box-shadow:
                0 0 0 3px rgba(37, 99, 235, 0.1),
                0 8px 20px rgba(37, 99, 235, 0.15),
                0 0 30px rgba(37, 99, 235, 0.2);
            transform: translateY(-2px) scale(1.01);
        }

        input[type="text"].success {
            border-color: #10b981;
            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
        }

        input[type="text"].error {
            border-color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
            animation: shake 0.5s;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-10px);
            }

            75% {
                transform: translateX(10px);
            }
        }

        select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 40px;
        }

        select option {
            background: #1e293b;
            color: var(--text-white);
            padding: 10px;
        }

        optgroup {
            font-weight: bold;
            color: var(--primary-blue-light);
            background-color: #0f172a;
        }

        .help-text {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.5);
            margin-top: 8px;
        }

        /* Inline form fields */
        .form-row {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .form-row .form-group {
            flex: 1;
            margin-bottom: 24px;
        }

        .form-row .form-group:first-child {
            flex: 2;
        }

        /* Model image display */
        .model-image-display {
            margin-top: 16px;
            margin-bottom: 16px;
            padding: 16px;
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid var(--border-blue);
            border-radius: 12px;
            text-align: center;
            display: none;
        }

        .model-image-display.active {
            display: block;
        }

        .model-image-display img {
            max-width: 100%;
            max-height: 200px;
            object-fit: contain;
            border-radius: 8px;
        }

        button,
        .btn {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 50%, var(--primary-blue-light) 100%);
            background-size: 200% 200%;
            color: white;
            border: none;
            border-radius: 14px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 0.5px;
            text-transform: uppercase;
            box-shadow:
                0 8px 20px rgba(37, 99, 235, 0.4),
                0 4px 10px rgba(37, 99, 235, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.3),
                inset 0 -2px 0 rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
            animation: gradientShift 3s ease infinite;
            margin-top: auto;
        }

        @keyframes gradientShift {

            0%,
            100% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }
        }

        button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }

        button:hover::before {
            left: 100%;
        }

        button:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow:
                0 15px 35px rgba(37, 99, 235, 0.5),
                0 8px 20px rgba(59, 130, 246, 0.3),
                0 0 0 2px rgba(255, 255, 255, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.4),
                0 0 60px rgba(37, 99, 235, 0.4);
            animation: none;
        }

        button:active {
            transform: translateY(-1px) scale(0.98);
        }

        button.loading {
            pointer-events: none;
            opacity: 0.7;
        }

        button.loading::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .serial-matches,
        .part-matches {
            margin-top: 20px;
            padding: 15px;
            border-radius: 16px;
            background: rgba(37, 99, 235, 0.08);
            border: 1px solid var(--border-blue);
            animation: fadeIn 0.4s ease;
        }

        .part-matches {
            max-height: 500px;
            overflow-y: auto;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .serial-matches-grid,
        .part-matches-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 12px;
        }

        /* ── Serial number predictive image suggestions ── */
        .serial-suggestions {
            display: none;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 12px;
            margin-top: 14px;
        }

        .serial-suggestions.visible {
            display: grid;
        }

        .serial-suggestion-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid var(--border-blue);
            border-radius: 12px;
            padding: 10px 8px 9px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
            color: var(--text-light);
            text-decoration: none;
        }

        .serial-suggestion-card:hover {
            transform: translateY(-4px) scale(1.04);
            border-color: var(--primary-blue);
            box-shadow: 0 10px 28px rgba(37, 99, 235, 0.3);
            background: rgba(15, 23, 42, 0.95);
            color: #fff;
        }

        .serial-suggestion-card img {
            width: 100%;
            max-height: 72px;
            object-fit: contain;
            border-radius: 6px;
            background: #fff;
            padding: 4px;
            margin-bottom: 7px;
        }

        .serial-suggestion-card-name {
            font-size: 12px;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 4px;
        }

        .serial-suggestion-card-hint {
            font-size: 10px;
            opacity: 0.45;
            font-weight: 400;
        }

        /* ── Serial number model result cards ── */
        .serial-model-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(15, 23, 42, 0.75);
            border: 1px solid var(--border-blue);
            border-radius: 14px;
            padding: 14px 10px 12px;
            text-align: center;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                background 0.25s ease;
        }

        .serial-model-card:hover {
            transform: translateY(-5px) scale(1.04);
            border-color: var(--primary-blue);
            box-shadow: 0 12px 32px rgba(37, 99, 235, 0.35);
            background: rgba(15, 23, 42, 0.95);
        }

        .serial-model-card img {
            width: 100%;
            max-height: 90px;
            object-fit: contain;
            border-radius: 8px;
            background: #fff;
            padding: 5px;
            margin-bottom: 8px;
        }

        .serial-match-no-img {
            font-size: 32px;
            margin-bottom: 8px;
            opacity: 0.4;
        }

        .serial-match-name {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.3;
            margin-bottom: 6px;
        }

        .serial-match-cta {
            font-size: 11px;
            font-weight: 600;
            color: var(--primary-blue-light);
            letter-spacing: 0.3px;
        }

        /* The selector and opening brace for this rule were MISSING — these declarations sat
           at the top level of the stylesheet with a bare `}` after them. CSS error recovery
           does not stop at that brace: it swallows everything up to the NEXT `{`, so the rule
           that followed (.part-match-card:hover) got consumed into an invalid prelude and was
           dropped as well. Confirmed in the browser via CSSOM: `.part-match-card img` was the
           ONLY surviving rule for these cards, so "Matching Parts" results in the part finder
           rendered with no card background, border, padding, or hover state at all.
           Selector restored from part-finder.php, which still carries the intact original.
           Ticket 2026-09-07_16-18-17_Russell. */
        .part-match-card {
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid var(--border-blue);
            border-radius: 12px;
            padding: 10px;
            text-align: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .part-match-card:hover {
            transform: translateY(-5px) scale(1.05);
            border-color: var(--primary-blue);
            box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
            background: rgba(15, 23, 42, 0.9);
        }

        .part-match-card img {
            max-width: 100%;
            max-height: 100px;
            object-fit: contain;
            border-radius: 8px;
            background: #fff;
            padding: 4px;
        }

        .part-match-link {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        .part-match-item-no {
            margin-top: 8px;
            font-size: 11px;
            color: var(--primary-blue-light);
            font-weight: 700;
        }

        .part-match-name {
            margin-top: 4px;
            font-size: 11px;
            color: var(--text-light);
            font-weight: 500;
        }

        /* ==================== FEATURES GRID ==================== */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 35px;
            margin-bottom: 60px;
        }

        .feature-card {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%);
            backdrop-filter: blur(25px);
            border-radius: 24px;
            padding: 45px 35px;
            border: 2px solid var(--border-blue);
            text-align: center;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
            opacity: 0;
            transition: all 0.6s ease;
            transform: rotate(0deg);
        }

        .feature-card:hover::before {
            opacity: 1;
            transform: rotate(180deg);
        }

        .feature-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
            transition: left 0.7s ease;
        }

        .feature-card:hover::after {
            left: 100%;
        }

        .feature-card:hover {
            transform: translateY(-12px) scale(1.03) rotateY(5deg);
            border-color: var(--primary-blue-light);
            box-shadow:
                0 25px 70px rgba(37, 99, 235, 0.35),
                0 10px 30px rgba(59, 130, 246, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.15),
                0 0 80px rgba(37, 99, 235, 0.3);
        }

        .feature-icon {
            font-size: 70px;
            margin-bottom: 25px;
            display: block;
            filter: drop-shadow(0 4px 15px rgba(37, 99, 235, 0.3));
        }

        .feature-card h3 {
            font-size: 1.5em;
            font-weight: 800;
            margin-bottom: 18px;
            color: var(--text-white);
            letter-spacing: -0.02em;
        }

        .feature-card p {
            color: var(--text-light);
            line-height: 1.8;
            font-size: 15px;
        }

        /* ==================== VIDEO SECTION ==================== */
        .video-container {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%);
            backdrop-filter: blur(25px);
            border-radius: 28px;
            padding: 50px;
            border: 2px solid var(--border-blue);
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(37, 99, 235, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.1);
            margin-bottom: 60px;
            position: relative;
            overflow: hidden;
        }

        .video-container::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #2563eb, #3b82f6, #60a5fa, #3b82f6, #2563eb);
            background-size: 300% 300%;
            animation: borderFlow 8s ease infinite;
            opacity: 0.3;
            z-index: -1;
            border-radius: 28px;
        }

        @keyframes borderFlow {

            0%,
            100% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }
        }

        .video-container h2 {
            color: var(--text-white);
            margin-bottom: 30px;
            font-size: 2em;
            font-weight: 800;
            text-align: center;
            letter-spacing: -0.02em;
        }

        .video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), 0 5px 20px rgba(37, 99, 235, 0.2);
            border: 2px solid rgba(37, 99, 235, 0.3);
            transition: all 0.4s ease;
        }

        .video-wrapper:hover {
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 10px 30px rgba(37, 99, 235, 0.4);
            border-color: rgba(37, 99, 235, 0.6);
            transform: scale(1.01);
        }

        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Click-to-load video facade (ticket 2026-09-07_16-18-17_Russell). Sits in exactly the
           same box the iframe used to, so the 16:9 wrapper above needs no change and the tile
           does not reflow when the real player replaces it on click. */
        .video-facade {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 0;
            border: none;
            background: #000;
            cursor: pointer;
            display: block;
            overflow: hidden;
        }

        .video-facade img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* The play button is drawn, not an image — one less request, and it stays sharp at
           any tile size. */
        .video-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 68px;
            height: 48px;
            border-radius: 14px;
            background: rgba(0, 0, 0, 0.72);
            transition: background 0.25s ease, transform 0.25s ease;
        }

        .video-play::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-40%, -50%);
            border-style: solid;
            border-width: 10px 0 10px 17px;
            border-color: transparent transparent transparent #fff;
        }

        .video-facade:hover .video-play,
        .video-facade:focus-visible .video-play {
            background: #2563eb;
            transform: translate(-50%, -50%) scale(1.08);
        }

        .video-facade:focus-visible {
            outline: 3px solid #60a5fa;
            outline-offset: 3px;
        }

        @media (prefers-reduced-motion: reduce) {
            .video-play { transition: none; }
        }

        .video-row {
            display: flex;
            gap: 20px;
        }

        .video-col {
            flex: 1;
            min-width: 0;
        }

        .video-col h2 {
            color: var(--text-white);
            margin-bottom: 16px;
            font-size: 1.15em;
            font-weight: 700;
            text-align: center;
            letter-spacing: -0.01em;
            line-height: 1.4;
            min-height: 4em;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 768px) {
            .video-row {
                flex-direction: column;
            }
        }

        /* ==================== CART SIDEBAR ==================== */
        #pf-cart-sidebar {
            position: fixed;
            top: calc(var(--nav-h, 122px) + 14px);
            bottom: 0;
            right: 0;
            width: 220px;
            height: auto;
            background: rgba(13, 17, 48, 0.98);
            backdrop-filter: blur(20px);
            border-left: 1px solid rgba(59, 130, 246, 0.25);
            box-shadow: -6px 0 30px rgba(0, 0, 0, 0.5);
            z-index: 9900;
            display: flex;
            flex-direction: column;
        }

        #pf-cart-header {
            padding: 16px;
            border-bottom: 1px solid rgba(59, 130, 246, 0.2);
        }

        #pf-cart-header h3 {
            color: #fff;
            font-size: 16px;
            font-weight: 700;
        }

        #pf-cart-items {
            flex: 1;
            overflow-y: auto;
            padding: 12px;
        }

        #pf-cart-items::-webkit-scrollbar {
            width: 6px;
        }

        #pf-cart-items::-webkit-scrollbar-thumb {
            background: rgba(59, 130, 246, 0.4);
            border-radius: 3px;
        }

        .pf-ci {
            display: flex;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            align-items: flex-start;
        }

        .pf-ci:last-child {
            border-bottom: none;
        }

        .pf-ci-img {
            width: 48px;
            height: 48px;
            border-radius: 6px;
            object-fit: contain;
            background: rgba(255, 255, 255, 0.06);
            flex-shrink: 0;
        }

        .pf-ci-img-placeholder {
            width: 48px;
            height: 48px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.06);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4b5563;
            font-size: 18px;
        }

        .pf-ci-info {
            flex: 1;
            min-width: 0;
        }

        .pf-ci-name {
            color: #e2e8f0;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .pf-ci-model {
            color: #64748b;
            font-size: 10px;
            margin-top: 2px;
        }

        .pf-ci-img-link {
            display: block;
            flex-shrink: 0;
            line-height: 0;
        }

        .pf-ci-name-link {
            color: inherit;
            text-decoration: none;
        }

        .pf-ci-name-link:hover {
            text-decoration: underline;
            text-decoration-color: rgba(147, 197, 253, 0.6);
        }

        .pf-ci-price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 6px;
        }

        .pf-qty-ctrl {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .pf-qty-btn {
            width: 22px;
            height: 22px;
            border-radius: 4px;
            border: 1px solid rgba(99, 130, 246, 0.5);
            background: rgba(59, 130, 246, 0.15);
            color: #93c5fd;
            font-size: 15px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: background 0.15s;
        }

        .pf-qty-btn:hover {
            background: rgba(59, 130, 246, 0.35);
        }

        .pf-qty-btn:active {
            background: rgba(59, 130, 246, 0.55);
        }

        .pf-qty-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .pf-ci-qty {
            color: #94a3b8;
            font-size: 11px;
            min-width: 32px;
            text-align: center;
        }

        .pf-ci-line {
            color: #60a5fa;
            font-size: 12px;
            font-weight: 700;
        }

        #pf-cart-empty {
            text-align: center;
            padding: 40px 20px;
            color: #4b5563;
        }

        #pf-cart-empty .pf-cart-empty-icon {
            font-size: 40px;
            display: block;
            margin-bottom: 10px;
        }

        #pf-cart-empty p {
            font-size: 13px;
        }

        #pf-cart-footer {
            padding: 14px 12px;
            border-top: 1px solid rgba(59, 130, 246, 0.2);
            flex-shrink: 0;
        }

        #pf-cart-subtotal {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        #pf-cart-subtotal .pf-cs-label {
            color: #94a3b8;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        #pf-cart-subtotal .pf-cs-amount {
            color: #fff;
            font-size: 16px;
            font-weight: 700;
        }

        #pf-cart-checkout {
            display: block;
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: #fff;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 700;
            text-align: center;
            text-decoration: none;
        }

        /* ==================== FOOTER ==================== */
        .footer {
            background: rgba(10, 14, 39, 0.95);
            backdrop-filter: blur(20px);
            border-top: 1px solid var(--border-blue);
            padding: 60px 30px 30px;
            margin-top: 80px;
        }

        .footer-content {
            max-width: 1600px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-section h3 {
            color: var(--text-white);
            font-size: 1.2em;
            margin-bottom: 20px;
            font-weight: 700;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section li {
            margin-bottom: 12px;
        }

        .footer-section a {
            color: var(--text-light);
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: 14px;
        }

        .footer-section a:hover {
            color: var(--primary-blue-light);
        }

        .footer-social {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }

        .footer-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(37, 99, 235, 0.2);
            border: 1px solid var(--border-blue);
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .footer-social a svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        .footer-social a:hover {
            background: var(--primary-blue);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid var(--border-blue);
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
        }

        /* ==================== MOBILE PHONE CARD (Row 1 right) ==================== */
        .mob-phone-card {
            display: none;          /* shown only on mobile via media query */
            flex-direction: column;
            align-items: flex-end;
            text-decoration: none;
            padding: 7px 12px;
            border-radius: 8px;
            background: rgba(37, 99, 235, 0.15);
            border: 1px solid rgba(37, 99, 235, 0.35);
            gap: 2px;
            transition: background 0.2s;
        }
        .mob-phone-card:hover { background: rgba(37, 99, 235, 0.26); }
        .mob-phone-main {
            color: #60a5fa;
            font-size: 15px;
            font-weight: 700;
            white-space: nowrap;
            letter-spacing: 0.3px;
        }
        .mob-phone-intl {
            color: rgba(255,255,255,0.55);
            font-size: 10.5px;
            white-space: nowrap;
        }

        /* ==================== MOBILE ROW 3: Menu + Cart ==================== */
        .mob-row3 {
            display: none;
            width: 100%;
            gap: 10px;
            padding: 0 14px 12px;
            box-sizing: border-box;
        }
        .mob-menu-btn {
            flex: 1;
            min-width: 0;
            height: 48px;
            padding: 0;
            background: linear-gradient(135deg, #dc2626, #b91c1c);
            border: none;
            border-radius: 10px;
            color: #fff;
            font-size: 16px;
            font-weight: 800;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: filter 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .mob-menu-btn:hover { filter: brightness(1.15); }
        .mob-cart-row3 {
            flex: 0 0 auto;
            width: 60px;
            height: 48px;
            padding: 0;
            background: linear-gradient(135deg, #16a34a, #15803d);
            border-radius: 10px;
            color: #fff;
            font-size: 22px;
            font-weight: 800;
            text-decoration: none;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            position: relative;
        }
        .mob-cart-row3 svg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .mob-cart-row3:hover { filter: brightness(1.15); }
        .mob-cart-row3.empty {
            background: linear-gradient(135deg, #6b7280, #4b5563);
            cursor: default;
            pointer-events: none;
            opacity: 0.6;
        }
        .mob-cart-badge {
            position: absolute;
            top: -6px;
            right: 4px;
            background: #ef4444;
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            min-width: 18px;
            height: 18px;
            border-radius: 9px;
            padding: 0 3px;
            display: none;
            align-items: center;
            justify-content: center;
        }

        /* ==================== MOBILE NAV DRAWER ==================== */
        .mob-nav-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 1998;
            backdrop-filter: blur(4px);
        }
        .mob-nav-overlay.open { display: block; }

        .mob-nav-drawer {
            position: fixed;
            top: 0;
            left: -320px;
            width: 300px;
            height: 100dvh;
            background: linear-gradient(180deg, rgba(10,14,39,0.99), rgba(15,23,42,0.98));
            border-right: 2px solid rgba(37,99,235,0.4);
            z-index: 1999;
            transition: left 0.35s cubic-bezier(0.4,0,0.2,1);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding-bottom: 30px;
        }
        .mob-nav-drawer.open { left: 0; }

        .mob-drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid rgba(37,99,235,0.3);
            flex-shrink: 0;
        }
        .mob-drawer-header img { height: 50px; width: auto; }
        .mob-drawer-close {
            width: 36px;
            height: 36px;
            border: none;
            background: rgba(37,99,235,0.2);
            border-radius: 8px;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .mob-drawer-close:hover { background: rgba(37,99,235,0.5); }

        .mob-drawer-phone {
            margin: 16px 20px 0;
            padding: 14px 16px;
            background: rgba(37,99,235,0.15);
            border: 1px solid rgba(59,130,246,0.3);
            border-radius: 12px;
            text-align: center;
        }
        .mob-drawer-phone a {
            display: block;
            color: #60a5fa;
            font-size: 18px;
            font-weight: 800;
            text-decoration: none;
            letter-spacing: 0.5px;
        }
        .mob-drawer-phone small {
            display: block;
            color: rgba(255,255,255,0.5);
            font-size: 12px;
            margin-top: 4px;
        }

        .mob-drawer-links {
            padding: 16px 20px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
        }
        .mob-drawer-links a,
        .mob-drawer-links button {
            display: block;
            width: 100%;
            padding: 13px 18px;
            color: #e2e8f0;
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
            border-radius: 10px;
            background: rgba(30,64,175,0.15);
            border: 1px solid rgba(59,130,246,0.2);
            text-align: left;
            cursor: pointer;
            transition: all 0.25s ease;
            letter-spacing: 0.3px;
        }
        .mob-drawer-links a:hover,
        .mob-drawer-links button:hover {
            background: rgba(37,99,235,0.35);
            border-color: rgba(96,165,250,0.5);
            color: #fff;
            transform: translateX(4px);
        }
        .mob-drawer-links a.drawer-repair {
            background: linear-gradient(135deg, rgba(220,38,38,0.4), rgba(239,68,68,0.3));
            border-color: rgba(239,68,68,0.4);
            color: #fca5a5;
        }
        .mob-drawer-links a.drawer-repair:hover {
            background: linear-gradient(135deg, rgba(220,38,38,0.6), rgba(239,68,68,0.5));
        }
        .mob-drawer-section-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.35);
            padding: 8px 4px 4px;
            font-weight: 600;
        }
        .mob-drawer-links a.drawer-sub {
            font-size: 13px;
            padding: 10px 18px 10px 30px;
            background: rgba(15,23,42,0.5);
            border-color: rgba(37,99,235,0.15);
            color: #94a3b8;
        }
        .mob-drawer-links a.drawer-sub:hover {
            color: #e2e8f0;
            background: rgba(37,99,235,0.2);
        }
        .mob-drawer-cart-link {
            margin: 0 20px 16px;
        }
        .mob-drawer-cart-link a {
            display: block;
            padding: 14px;
            text-align: center;
            background: linear-gradient(135deg, rgba(37,99,235,0.5), rgba(59,130,246,0.4));
            border: 1px solid rgba(96,165,250,0.4);
            border-radius: 12px;
            color: #fff;
            font-weight: 700;
            font-size: 15px;
            text-decoration: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .mob-drawer-cart-link a svg {
            width: 20px;
            height: 20px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .mob-drawer-cart-link a:hover {
            background: rgba(37,99,235,0.7);
        }

        /* ==================== MOBILE CART OVERLAY ==================== */
        .mob-cart-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            z-index: 1996;
            backdrop-filter: blur(4px);
        }
        .mob-cart-overlay.open { display: block; }
        .mob-cart-sheet {
            position: fixed;
            bottom: -100%;
            left: 0;
            right: 0;
            background: linear-gradient(180deg, rgba(10,14,39,0.99), rgba(15,23,42,0.98));
            border-top: 2px solid rgba(37,99,235,0.4);
            border-radius: 20px 20px 0 0;
            z-index: 1997;
            transition: bottom 0.35s cubic-bezier(0.4,0,0.2,1);
            max-height: 80dvh;
            display: flex;
            flex-direction: column;
        }
        .mob-cart-sheet.open { bottom: 0; }
        .mob-cart-sheet-handle {
            width: 40px;
            height: 4px;
            background: rgba(255,255,255,0.2);
            border-radius: 2px;
            margin: 12px auto 4px;
            flex-shrink: 0;
        }
        .mob-cart-sheet-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 20px 12px;
            border-bottom: 1px solid rgba(37,99,235,0.3);
            flex-shrink: 0;
        }
        .mob-cart-sheet-header h3 {
            color: #fff;
            font-size: 18px;
            margin: 0;
        }
        .mob-cart-sheet-close {
            width: 36px; height: 36px;
            border: none;
            background: rgba(37,99,235,0.2);
            border-radius: 8px;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .mob-cart-sheet-body {
            overflow-y: auto;
            flex: 1;
            padding: 12px 16px;
        }
        .mob-cart-sheet-footer {
            padding: 12px 16px 20px;
            border-top: 1px solid rgba(37,99,235,0.3);
            flex-shrink: 0;
        }
        .mob-cart-sheet-footer a {
            display: block;
            text-align: center;
            padding: 14px;
            background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-light));
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            border-radius: 12px;
            text-decoration: none;
        }

        /* ==================== RESPONSIVE ==================== */
        @media (max-width: 1400px) {
            .tiles-container { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 1200px) {
            body { padding-right: 20px; padding-left: 0; }
            #pf-cart-sidebar { display: none; }
            body { padding-right: 0; }
            .navbar-content { padding-right: 20px; }
            .nav-search { max-width: 680px; }
            .tiles-container { grid-template-columns: repeat(2, 1fr); }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .carousel-item { flex: 0 0 180px; }
            .info-fragrance-wrapper { gap: 24px; margin-bottom: 0; padding-bottom: 20px; }
            .did-you-know { padding: 25px; }
            .did-you-know-title { font-size: 1.5em; }
        }

        @media (max-width: 900px) {
            .logo-section img { height: 58px; }
            .nav-contact-group { display: none; }
            .nav-links a { font-size: 12px; padding: 6px 10px; }
            .nav-links { gap: 8px; justify-content: center; }
            .nav-search { max-width: 460px; }
            .global-search-results { min-width: unset; width: 100%; left: 0; right: 0; }
        }

        /* Mobile controls hidden on desktop */
        .mob-controls { display: none; }

        @media (max-width: 768px) {
            /* Disable expensive GPU layers on mobile */
            .particles { display: none; }
            .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
            .navbar.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }
            body::before { display: none; }

            /* Kill all animations and transitions on mobile */
            *, *::before, *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
                transition-delay: 0ms !important;
            }
            /* Keep only instant opacity reveals */
            .reveal { opacity: 1 !important; transform: none !important; }
            .reveal.active { opacity: 1 !important; transform: none !important; }
            .badge { animation: none !important; }
            .logo-section img { animation: none !important; filter: none !important; }
            .navbar { animation: none !important; }
            .scroll-progress { display: none; }
        }

        @media (max-width: 768px) {
            /* ── Navbar: wrap layout so logo+phone share row 1 ── */
            .navbar-content {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                padding: 0 !important;
            }
            /* Logo: left side of row 1, in normal flow */
            .logo-section {
                position: static;
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                padding: 8px 0 8px 14px;
            }
            .logo-section img { height: 48px; }
            /* navbar-row1: right side of row 1 (phone card); fills remaining space */
            .navbar-row1 {
                flex: 1 1 0;
                min-width: 0;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 8px 14px 8px 8px;
                box-sizing: border-box;
            }
            .nav-links { display: none; }
            .nav-contact { display: none; }
            /* Show mobile controls */
            .mob-controls {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .mob-phone-card { display: flex; }
            /* Search bar row: full-width break */
            .navbar-bottom { flex: 0 0 100%; border-top: none; padding: 0 14px 8px; box-sizing: border-box; }
            .navbar-bottom .nav-search { width: 100%; max-width: 100%; }
            .nav-quick-buttons { display: none; }
            .global-search-results { min-width: unset !important; left: 0; right: 0; width: 100%; }
            .mob-row3 { display: flex; flex: 0 0 100%; }

            /* Hero */
            .hero h1 { font-size: 2em; }
            .hero p { font-size: 0.95em; }
            .hero-badges { gap: 8px; flex-wrap: wrap; justify-content: center; }
            .badge { padding: 8px 14px; font-size: 12px; }

            /* Grids */
            .tiles-container { grid-template-columns: 1fr; }
            .features-grid { grid-template-columns: 1fr; }

            /* Fragrance */
            .info-fragrance-wrapper {
                gap: 20px;
                margin-bottom: 0;
                padding-bottom: 20px;
            }
            .did-you-know {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
                padding: 18px;
            }
            .did-you-know-title { font-size: 1.2em; white-space: normal; }
            .did-you-know-content { font-size: 0.95em; }
            .carousel-item { flex: 0 0 140px; }
            .carousel-item img { height: 110px; }
            .carousel-nav { width: 32px; height: 32px; font-size: 18px; }
            .fragrance-carousel-title { font-size: 1.1em; }

            /* Footer */
            .footer-content { grid-template-columns: repeat(2, 1fr); }

            /* Part finder tiles */
            .tile { padding: 20px 16px; }
            .tile h2 { font-size: 1.2em; }

            /* Main container */
            .main-container { padding: 20px 16px 20px; }
            .hero { padding-bottom: 10px; }
            .section-title { font-size: 1.6em; margin: 24px 0 16px; padding-bottom: 10px; }
            .video-container { padding: 20px; margin-bottom: 20px; }
            .features-grid { margin-bottom: 20px; gap: 16px; }
        }

        @media (max-width: 480px) {
            .hero h1 { font-size: 1.6em; }
            .footer-content { grid-template-columns: 1fr; }
            .badge { font-size: 11px; padding: 7px 12px; }
            .video-row { flex-direction: column; }
        }

/* ===========================================================================
   STATIC CONTENT PAGES — the shared layout for the customer-facing pages being
   converted one at a time (FAQ first). Ticket 2026-09-04_23-59-18_Russell.
   Uses the home page's OWN tokens above (--bg-dark, --bg-card, --primary-blue,
   --text-light, --border-blue) so a converted page is the same theme as the
   home page rather than a lookalike.
   =========================================================================== */
.faq-shell { background: var(--bg-dark); padding: 40px 20px 70px; min-height: 60vh; }
.faq-inner { max-width: 1080px; margin: 0 auto; }

.faq-crumb { font-size: 12.5px; color: #94a3b8; margin: 0 0 18px; }
.faq-crumb a { color: #94a3b8; text-decoration: none; }
.faq-crumb a:hover { color: var(--text-white); text-decoration: underline; }
.faq-crumb span { margin: 0 6px; opacity: .6; }

.faq-title {
  margin: 0 0 8px; font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1.15;
  background: linear-gradient(135deg, #60a5fa, #a78bfa 55%, #22d3ee);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.faq-sub { margin: 0 0 26px; color: #94a3b8; font-size: 15px; }
.faq-sub a { color: var(--primary-blue-light); }

.faq-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.faq-search {
  flex: 1 1 280px; min-width: 0; padding: 12px 15px; border-radius: 12px;
  background: rgba(15, 23, 42, .75); border: 1px solid var(--border-blue);
  color: var(--text-light); font-size: 14px; outline: 0;
}
.faq-search::placeholder { color: #64748b; }
.faq-search:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.faq-count { font-size: 12.5px; color: #94a3b8; white-space: nowrap; }

.faq-jump { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 26px; padding: 0; }
.faq-jump a {
  display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: rgba(15, 23, 42, .7); border: 1px solid var(--border-blue);
  color: #cbd5e1; text-decoration: none; transition: all .15s ease;
}
.faq-jump a:hover { border-color: var(--primary-blue); color: var(--text-white); }

.faq-cat { margin-bottom: 22px; scroll-margin-top: 140px; }
.faq-cat > h2 {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 10px; padding: 0 4px; font-size: 15px; font-weight: 700;
  color: var(--text-white); letter-spacing: .2px;
}
.faq-cat > h2 .n { font-size: 11px; font-weight: 700; color: #64748b; }

details.qa {
  background: var(--bg-card); border: 1px solid var(--border-blue);
  border-radius: 12px; margin-bottom: 8px; overflow: hidden;
  transition: border-color .15s ease;
}
details.qa:hover { border-color: rgba(37, 99, 235, .45); }
details.qa[open] { border-color: var(--primary-blue); }
details.qa > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 15px 18px 15px 44px; font-size: 14.5px; font-weight: 600; color: var(--text-white);
}
details.qa > summary::-webkit-details-marker { display: none; }
details.qa > summary:focus-visible { outline: 2px solid var(--primary-blue-light); outline-offset: -2px; }
details.qa > summary::before {
  content: ''; position: absolute; left: 18px; top: 21px; width: 7px; height: 7px;
  border-right: 2px solid var(--primary-blue-light); border-bottom: 2px solid var(--primary-blue-light);
  transform: rotate(-45deg); transition: transform .18s ease;
}
details.qa[open] > summary::before { transform: rotate(45deg); top: 19px; }

.qabody { padding: 0 18px 18px 44px; font-size: 14px; line-height: 1.75; color: #cbd5e1; }
.qabody p { margin: 0 0 11px; }
.qabody p:last-child { margin-bottom: 0; }
.qabody ul { margin: 0 0 11px; padding-left: 20px; }
.qabody li { margin: 4px 0; }
.qabody strong { color: var(--text-white); }
.qabody a { color: var(--primary-blue-light); text-decoration: underline; }
.qabody a:hover { color: #93c5fd; }

.rv-faq .faq-none:not([hidden]) { display: block; }   /* faq_list_next.tpl (2026-10-07): rv_faq.js shows the message by removing hidden, not with an inline style */
.faq-none {
  display: none; padding: 16px 18px; border-radius: 12px; color: #cbd5e1; font-size: 14px;
  background: rgba(15, 23, 42, .7); border: 1px solid var(--border-blue);
}

.faq-help {
  margin-top: 28px; padding: 22px 24px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(15, 23, 42, .7));
  border: 1px solid var(--border-blue);
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.faq-help h3 { margin: 0 0 4px; font-size: 16px; color: var(--text-white); }
.faq-help p { margin: 0; color: #94a3b8; font-size: 14px; }
.faq-help-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.faq-btn {
  display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  background: rgba(15, 23, 42, .8); border: 1px solid var(--border-blue); color: var(--text-light);
}
.faq-btn:hover { border-color: var(--primary-blue); color: var(--text-white); }
.faq-btn.primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-dark));
  border-color: transparent; color: #fff;
}
.faq-btn.primary:hover { color: #fff; box-shadow: 0 6px 20px rgba(37, 99, 235, .35); }

@media (max-width: 640px) {
  .faq-shell { padding: 26px 14px 50px; }
  details.qa > summary { padding-left: 38px; font-size: 14px; }
  .qabody { padding-left: 38px; }
  .faq-help { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   Shell pages WITHOUT the home page's cart sidebar.
   body carries `padding-right: 240px` to park #pf-cart-sidebar beside the
   content on the home page. Any other page using this shell has no sidebar, so
   that 240px is just dead space down the right-hand edge. Opt OUT with the
   class rather than changing the base rule, so index-v3.php (which does have
   the sidebar) is unaffected whenever it is pointed at this file.
   Ticket 2026-09-04_23-59-18_Russell. */
body.rv-nosidebar { padding-right: 0; }
@media (max-width: 1024px) { body.rv-nosidebar { padding-right: 0; } }

/* NOT FIXED HERE, ON PURPOSE. .nav-contact-group is position:absolute;right:0 and
   .navbar-row1 .nav-links is flex:unset, so the centered pills overlap the logo on the
   left and the phone block on the right. The LIVE HOME PAGE does exactly the same
   (measured 2026-09-05: 177px left overlap, 47px right), so "fix" it only on shell
   pages and the new pages stop matching the home page -- which is the one thing this
   conversion is for. Reported to Russell as a separate pre-existing navbar bug to fix
   once, in the shared shell, for every page at the same time.
   Ticket 2026-09-04_23-59-18_Russell. */

/* ── Navbar row 1: stop the centered menu running under the logo and the phone ──
 *
 * .logo-section and .nav-contact-group are BOTH position:absolute, so they sit
 * outside the row's flow and nothing reserves their space. .nav-links is the only
 * in-flow child and is centered across the FULL row width, so it slides underneath
 * both. Measured in Chrome on the live home page (nav-links is a constant 980px at
 * every width — it never shrinks):
 *
 *      width   over the logo   over the phone
 *      1024        301 px          171 px
 *      1280        173 px           43 px
 *      1366        130 px            0 px
 *      1440         93 px          clear
 *      1600         13 px          clear
 *      1920        clear           clear
 *
 * 1280 and 1366 are the two commonest laptop widths, so most visitors were seeing
 * the menu sitting on top of the logo.
 *
 * Fix: reserve the two absolute blocks' space as padding on the row, and let the
 * pills wrap to a second line when what is left is too narrow for all nine. The
 * logo is deliberately NOT shrunk — Russell asked for it to stay the same size at
 * all times (ticket 2026-08-01_19-06-09_Russell), and shrinking the pills enough to
 * fit 980px into 745px would have meant a ~24% cut.
 *
 * Bounded to 901-1620px on purpose: below 901 the mobile drawer replaces .nav-links
 * entirely, and above 1620 there is no overlap left to fix, so wide screens keep
 * exactly the layout they have today.
 * Ticket 2026-09-04_23-59-18_Russell. */
@media (min-width: 901px) and (max-width: 1620px) {
    .navbar-row1 { padding-left: 310px; padding-right: 190px; }
    .navbar-row1 .nav-links { flex-wrap: wrap; row-gap: 6px; }
}

/* Phones: iOS Safari zooms the page when a field under 16px is focused (home search, serial
   number, date code and model select were 15px; UI audit 2026-09-24). Desktop unchanged. */
@media (max-width: 768px) {
	input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* Interaction capability (R3 2026-09-27): visible keyboard focus + skip link + reduced motion for the
   shell pages (home, FAQ). Field borders alone were the only focus cue on the dark theme. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 2px;
}
.rv-skip {
    position: absolute;
    left: -10000px;
    top: 0;
    z-index: 100000;
    background: #fff;
    color: #0b3d91;
    padding: 10px 14px;
    font-weight: 700;
    border: 2px solid #0b3d91;
    border-radius: 6px;
}
.rv-skip:focus { left: 8px; top: 8px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .particles { display: none; }
}

/* ==================== MINI CART (key 'Mini Cart', 2026-10-03, ticket 2026-10-01_23-40-16_Claude) ====================
   The header's cart button (desktop: a quick-link pill with a count; phone: the round cart button, whose badge rv_minicart.js now fills on every page) and the panel that opens from it.
   Behavior: catalog/view/javascript/rv_minicart.js. The panel is appended to <body> and positioned with position:fixed from the button's own rectangle, so no overflow on the sticky
   navbar can clip it. */
.nav-quick-buttons .rv-mc-btn { position: relative; }
.nav-quick-buttons .rv-mc-btn.rv-mc-has { border-color: rgba(34, 197, 94, 0.55); background: rgba(34, 197, 94, 0.14); }
.rv-mc-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #16a34a; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0; line-height: 1; box-sizing: border-box; }
.rv-mc-n[hidden] { display: none; }
.rv-mc-panel { position: fixed; z-index: 10050; width: 360px; max-width: calc(100vw - 16px); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background: rgba(13, 17, 48, 0.99); color: #e7ecf3;
	border: 1px solid rgba(96, 165, 250, 0.35); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); font-family: inherit; font-size: 14px; line-height: 1.4; outline: none; }
.rv-mc-panel[hidden] { display: none; }
.rv-mc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(59, 130, 246, 0.2); }
.rv-mc-head b { font-size: 15px; }
.rv-mc-head span { flex: 1; color: #9fb0cc; font-size: 12.5px; }
.rv-mc-panel .rv-mc-head .rv-mc-x { margin: 0 0 0 auto; width: 30px; height: 30px; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: #9fb0cc; font-size: 22px; line-height: 1; cursor: pointer; transform: none; }   /* the site-wide button look (glow, gradient) is switched off here */
.rv-mc-panel .rv-mc-head .rv-mc-x:hover { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; transform: none; }
.rv-mc-list { overflow-y: auto; padding: 6px 14px; min-height: 0; }
.rv-mc-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.rv-mc-row:last-child { border-bottom: 0; }
.rv-mc-pic { flex: none; width: 44px; height: 44px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rv-mc-pic img { width: 44px; height: 44px; object-fit: contain; }
.rv-mc-pic:empty::before { content: "\1F4E6"; font-size: 22px; line-height: 1; opacity: .55; }   /* a part with no picture on file */
.rv-mc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rv-mc-name { color: #fff; font-weight: 600; text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
a.rv-mc-name:hover { text-decoration: underline; }
.rv-mc-meta { color: #9fb0cc; font-size: 12px; }
.rv-mc-line { flex: none; font-weight: 700; color: #fff; white-space: nowrap; }
.rv-mc-empty { margin: 0; padding: 16px 14px; color: #9fb0cc; }
.rv-mc-foot { padding: 10px 14px 14px; border-top: 1px solid rgba(59, 130, 246, 0.2); }
.rv-mc-sub { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }
.rv-mc-sub b { color: #fff; }
.rv-mc-go { display: flex; gap: 10px; padding: 0 14px 14px; }
.rv-mc-foot .rv-mc-go { padding: 0; }
.rv-mc-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.07); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; box-sizing: border-box; }
.rv-mc-btn:hover { background: rgba(255, 255, 255, 0.14); }
.rv-mc-btn.rv-mc-primary { background: linear-gradient(135deg, #16a34a, #15803d); border-color: transparent; }
.rv-mc-btn.rv-mc-primary:hover { filter: brightness(1.12); }
.rv-mc-panel a:focus-visible, .rv-mc-panel button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
/* the phone's round cart button is a button now as well as a link: show the focus ring, keep its look */
.mob-cart-row3:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .rv-mc-panel:not([hidden]) { animation: rvMcIn .14s ease-out; } @keyframes rvMcIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } }

/* Room for the fourth quick-link button (cart). The buttons are pinned to the right edge of the search row, and the search + YOUR CODE badge are centered in the WHOLE row, so a wider
   button group slid over the search box (by 85px at 1280 wide and 213px at 1024 already; the cart button added 93 more). From 1200px with the cart button present the row is laid
   out as a row: room for the 303px logo on the left, the badge, the search taking what is left, the buttons on the right, so nothing overlaps. Above 1759px there is room for the
   old centered look, which is kept. From 901 to 1199px there is no room for logo + badge + search + four labeled buttons (the old layout already tucked the search under the
   buttons there), so the cart button is icon-only there: the least extra overlap. Phones (<=900px) do not show this group at all. */
@media (min-width: 1200px) and (max-width: 1759px) {
	.navbar-bottom.rv-mc-row { justify-content: flex-start; padding-left: 330px; padding-right: 0; box-sizing: border-box; }
	.navbar-bottom.rv-mc-row .nav-quick-buttons { position: static; flex: none; margin-left: auto; }
	.navbar-bottom.rv-mc-row .nav-search { flex: 1 1 440px; width: auto; max-width: 440px; min-width: 120px; margin-right: 14px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
	.nav-quick-buttons .rv-mc-btn .rv-mc-lbl { display: none; }
	.nav-quick-buttons .rv-mc-btn { padding: 10px 12px; }
}

/* ===== rv-lite: calm mode for slow computers (2026-10-06) =====
   Only applies when rv_lite_motion.js has put class "rv-lite" on <html> (canary ?rvlite=1, see that file). It switches off the
   endless decorations measured to keep an old PC's CPU busy at idle, and the blur panels repainted under them. Same idea as the
   max-width:768px and prefers-reduced-motion blocks above, but targeted: spinners, progress bars and one-shot reveals still run
   so a click always looks like it registered. The home carousel keeps moving (only its blur is dropped). */
html.rv-lite *, html.rv-lite *::before, html.rv-lite *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.rv-lite button, html.rv-lite .btn { animation: none !important; }
html.rv-lite .logo-section img { animation: none !important; filter: none !important; }
html.rv-lite .badge, html.rv-lite .navbar, html.rv-lite .hero::before, html.rv-lite .video-container::before { animation: none !important; }
html.rv-lite .particles, html.rv-lite .particle, html.rv-lite body::before { display: none !important; }

/* Shared helpers that replaced inline styles in the shell and re-themed pages (2026-10-07, ticket 2026-10-03_14-52-21_Russell). */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#global-search-count { margin-left: 10px; }
.footer .footer-note { color: var(--text-light); font-size: 14px; margin-bottom: 15px; }

/* FOOTER 10/9 1:00 AM (Russell: "the data in the green box [Stay Connected] can be placed on the one line where the arrow is pointed, then the other 3 columns can shift over and look more centered"): Shop / Support / Company are
   three centered columns and Stay Connected is ONE centered line under them (heading, note, icons). On a tablet or phone the columns keep their stacked layout and the line wraps. */
@media (min-width: 769px) { .footer .footer-content { grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; column-gap: clamp(24px, 6vw, 80px); } }   /* minmax(0,..) + a gap that follows the window: the fixed 220 px minimum made the footer 10 px wider than an 800 px screen (found 10/9 3:10 AM) */
.footer .footer-section:last-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; }
.footer .footer-section:last-child h3, .footer .footer-section:last-child .footer-note, .footer .footer-section:last-child .footer-social { margin: 0; }