:root {
            --font-sans: var(--ff-font-sans);
            --bg: #eef2f6;
            --surface: #ffffff;
            --surface-raised: #ffffff;
            --surface-muted: #f5f7fa;
            --surface-hover: #f8fafc;
            --page-surface-top: #f8fafc;
            --page-surface-mid: #eef2f6;
            --page-surface-bottom: #e9eef5;
            --text: var(--ff-color-text);
            --muted: var(--ff-color-text-muted);
            --border: var(--ff-color-border);
            --border-strong: var(--ff-color-border-strong);
            --accent: var(--ff-color-action);
            --accent-hover: var(--ff-color-action-hover);
            --accent-light: var(--ff-color-action-soft);
            --accent-ring: rgba(24, 95, 166, 0.18);
            --vehicle-card-price-color: var(--ff-color-price);
            --ford-navy: var(--ff-color-brand);
            --header-bg: rgba(255, 255, 255, 0.96);
            --header-fg: #111827;
            --header-muted: #64748b;
            --header-border: #d9e0ea;
            --header-row-min-height: 62px;
            --header-center-min-height: 36px;
            --header-control-height: 40px;
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 8px;
            --radius-xl: 8px;
            --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
            --shadow-sm: 0 4px 10px rgba(15, 23, 42, 0.07);
            --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08);
            --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.16);
            --ease-snappy: cubic-bezier(0.22, 1, 0.36, 1);
            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
            --duration-fast: 0.12s;
            --duration-normal: 0.18s;
            --panel-header-bg: #f8fafc;
        }
        * { box-sizing: border-box; }
        [hidden] { display: none !important; }
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: var(--font-sans);
            background: var(--page-surface-top);
            color: var(--text);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        button,
        input,
        select,
        textarea {
            font-family: var(--font-sans);
        }
        body { display: flex; }
        .page {
            min-height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            background:
                linear-gradient(180deg, var(--page-surface-top) 0%, var(--page-surface-mid) 48%, var(--page-surface-bottom) 100%);
        }
        .header {
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
            background: var(--header-bg);
            position: sticky;
            top: 0;
            z-index: 1100;
            border-bottom: 1px solid var(--header-border);
            box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 10px 26px rgba(15,23,42,0.06);
            backdrop-filter: blur(14px);
        }
        body.inventory-header-pinned:not(.vehicle-detail-open) .header {
            position: fixed;
            inset: 0 0 auto;
            width: 100%;
        }
        body.inventory-header-pinned.inventory-header-collapsible:not(.vehicle-detail-open) .header {
            transition: top 190ms cubic-bezier(0.2, 0, 0, 1), box-shadow 190ms ease;
        }
        body.inventory-header-pinned.inventory-header-collapsible.inventory-header-hidden:not(.vehicle-detail-open) .header {
            top: calc(-1 * var(--inventory-header-height, 67px));
            box-shadow: none;
        }
        body.inventory-header-pinned:not(.vehicle-detail-open) .page {
            padding-top: var(--inventory-header-height, var(--header-row-min-height));
        }
        /* Use a 3-column grid so the search/toggle are truly centered on the viewport */
        .header-row {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            background: var(--header-bg);
            padding: 10px 24px;
            column-gap: 20px;
            min-height: var(--header-row-min-height);
            box-sizing: border-box;
        }
        .header-lead {
            display: flex;
            flex-direction: column;
            gap: 0;
            min-width: 0;
            justify-self: start;
            align-self: center;
            position: relative;
        }
        .header-brand-row {
            display: flex;
            align-items: center;
            column-gap: 8px;
            height: var(--header-control-height);
            min-height: var(--header-control-height);
        }
        .header-lead.is-store-context { gap: 0; }
        .home-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            height: var(--header-control-height);
            font-size: 18px;
            font-weight: 720;
            color: var(--header-fg);
            text-decoration: none;
            cursor: pointer;
            transition: color var(--duration-fast) var(--ease-snappy);
            line-height: 1.2;
            user-select: none;
            letter-spacing: 0;
            align-self: center;
        }
        .home-button:hover { color: var(--accent); }
        .home-button:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
            border-radius: var(--radius-sm);
        }
        .home-button .home-logo {
            height: 26px;
            width: auto;
            display: block;
            flex: 0 0 auto;
        }
        .home-button .home-text {
            display: inline-block;
            letter-spacing: 0;
        }
        .home-counts {
            display: inline-flex;
            align-items: center;
        }
        .home-counts .filter-option-count {
            margin-left: 0;
            font-size: 12px;
            font-weight: 500;
            color: var(--header-muted);
        }
        .header-subtitle {
            position: absolute;
            left: 0;
            top: calc(100% + 6px);
            font-size: 12px;
            color: var(--muted);
            margin: 0;
            padding: 6px 10px;
            background: rgba(255,255,255,0.96);
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: 0 10px 26px rgba(0,0,0,0.10);
            opacity: 0;
            transform: translateY(-2px);
            pointer-events: none;
            transition: opacity 0.15s ease-out, transform 0.15s ease-out;
            white-space: nowrap;
            z-index: 20;
        }
        .home-button:hover + .header-subtitle,
        .home-button:focus-visible + .header-subtitle {
            opacity: 1;
            transform: translateY(0);
        }
        .header-center { display: flex; justify-content: center; justify-self: center; align-self: center; position: relative; z-index: 2; }
        .header-right { display: flex; align-items: center; gap: 8px; justify-self: end; justify-content: flex-end; align-self: center; }
        .stock-search-hint {
            width: 100%;
            max-width: 680px;
            text-align: center;
            font-size: 12px;
            color: var(--header-muted);
            margin: 0;
            min-height: 0;
        }
        .stock-search-hint:empty { display: none; }
        .stock-search {
            display: flex;
            align-items: stretch;
            flex: 1 1 auto;
            width: auto;
            min-width: 0;
            max-width: none;
            height: var(--header-control-height);
            min-height: var(--header-control-height);
            max-height: var(--header-control-height);
            position: relative;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 2px rgba(15,23,42,0.04);
            overflow: visible;
            box-sizing: border-box;
            transition: border-color var(--duration-fast) var(--ease-snappy), background var(--duration-fast) var(--ease-snappy);
        }
        .stock-search:focus-within {
            border-color: var(--accent);
            background: var(--surface);
            box-shadow: 0 0 0 3px var(--accent-ring);
        }
        .stock-search input {
            flex: 1;
            width: 100%;
            min-width: 0;
            padding: 0 14px;
            border: none;
            border-radius: 6px 0 0 6px;
            font: inherit;
            font-size: 15px;
            background: transparent;
            color: var(--text);
        }
        .stock-search input::placeholder { color: #6b7280; }
        .stock-search input:focus { outline: none; box-shadow: none; }
        .stock-search-submit {
            flex: 0 0 auto;
            width: 44px;
            border: none;
            border-left: 1px solid var(--border);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            background: var(--accent);
            color: #fff;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background var(--duration-fast) var(--ease-snappy);
        }
        .stock-search-submit:hover { background: var(--accent-hover); }
        .stock-search-submit:active { transform: scale(0.97); }
        .stock-search-submit svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; }
        @media (min-width: 901px) {
            .stock-search-submit { border-radius: 0 6px 6px 0; }
        }
        @media (max-width: 900px) {
            .stock-search-submit { border-radius: 0; }
            .qr-scan-button { border-radius: 0 6px 6px 0; }
        }

        .qr-scan-button {
            flex: 0 0 auto;
            width: 44px;
            border: none;
            border-left: 1px solid #d5d9e0;
            border-radius: 0;
            background: #fff;
            color: var(--accent);
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
        }
        .qr-scan-button svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .qr-scan-button:hover { background: var(--accent-light); color: var(--accent-hover); }
        .qr-scan-button:active { transform: scale(0.98); }
        .stock-search-dropdown {
            position: absolute;
            top: calc(100% + 6px);
            left: 0;
            right: 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            z-index: 1200;
            max-height: 320px;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 4px;
        }
        .stock-search-dropdown[hidden] { display: none; }
        .stock-search-intent {
            padding: 10px;
            margin-bottom: 4px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
            border-radius: 6px 6px 3px 3px;
        }
        .stock-search-intent-heading {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            color: var(--muted);
            font-size: 10px;
            font-weight: 750;
            letter-spacing: .07em;
            line-height: 1;
            text-transform: uppercase;
        }
        .stock-search-intent-check {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 999px;
            background: var(--accent);
            color: #fff;
            font-size: 10px;
            font-weight: 800;
        }
        .stock-search-intent-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .stock-search-intent-chip {
            display: inline-flex;
            align-items: center;
            min-width: 0;
            overflow: hidden;
            border: 1px solid #bfd6ee;
            border-radius: 7px;
            background: #fff;
            box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
            line-height: 1;
        }
        .stock-search-intent-type {
            align-self: stretch;
            display: inline-flex;
            align-items: center;
            padding: 6px 7px;
            background: #e8f2fd;
            color: #46657f;
            font-size: 9px;
            font-weight: 750;
            letter-spacing: .04em;
            text-transform: uppercase;
        }
        .stock-search-intent-value {
            min-width: 0;
            max-width: 190px;
            overflow: hidden;
            padding: 6px 8px;
            color: var(--text);
            font-size: 12px;
            font-weight: 650;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .stock-search-result {
            width: 100%;
            display: grid;
            grid-template-columns: 52px minmax(0, 1fr);
            gap: 8px;
            align-items: center;
            border: 0;
            background: transparent;
            border-radius: 6px;
            padding: 5px 6px;
            text-align: left;
            cursor: pointer;
        }
        .stock-search-result:hover,
        .stock-search-result:focus-visible {
            background: var(--accent-light);
            outline: none;
        }
        .stock-search-result-photo {
            width: 52px;
            height: 38px;
            border-radius: 5px;
            object-fit: cover;
            border: 1px solid var(--border);
            background: #f3f4f6;
        }
        .stock-search-result-main {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        .stock-search-result-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.25;
        }
        .stock-search-result-meta {
            font-size: 11px;
            color: var(--muted);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.25;
        }
        .stock-search-empty {
            font-size: 12px;
            color: var(--muted);
            padding: 6px 8px;
        }
        .stock-search-doc-actions {
            display: flex;
            gap: 6px;
            padding: 4px 4px 2px;
        }
        .stock-search-doc-btn {
            flex: 1;
            padding: 6px 8px;
            font-size: 12px;
            font-weight: 500;
            border-radius: 5px;
            border: 1px solid var(--border);
            background: var(--surface-muted);
            color: var(--text);
            cursor: pointer;
            transition: background 0.15s;
        }
        .stock-search-doc-btn:hover:not(:disabled) { background: #eef1f5; }
        .stock-search-doc-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
        .ford-doc-chooser-overlay {
            position: fixed;
            inset: 0;
            z-index: 10030;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            background: rgba(15, 23, 42, 0.54);
        }
        .ford-doc-chooser-backdrop {
            position: absolute;
            inset: 0;
            appearance: none;
            border: 0;
            padding: 0;
            background: transparent;
            cursor: default;
        }
        .ford-doc-chooser {
            position: relative;
            z-index: 1;
            width: min(360px, 100%);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--surface);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            pointer-events: auto;
        }
        .ford-doc-chooser-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding: 16px;
            border-bottom: 1px solid var(--border);
        }
        .ford-doc-chooser-header h3 {
            margin: 0;
            font-size: 17px;
            font-weight: 700;
            line-height: 1.2;
            color: var(--text);
        }
        .ford-doc-chooser-header p {
            margin: 4px 0 0;
            font-size: 12px;
            font-weight: 650;
            color: var(--muted);
            letter-spacing: 0;
            overflow-wrap: anywhere;
        }
        .ford-doc-chooser-close {
            width: 34px;
            height: 34px;
            flex: 0 0 auto;
            border: 0;
            border-radius: var(--radius-sm);
            background: transparent;
            color: var(--muted);
            font-size: 24px;
            line-height: 1;
            cursor: pointer;
        }
        .ford-doc-chooser-close:hover,
        .ford-doc-chooser-close:focus-visible {
            background: var(--surface-hover);
            color: var(--text);
            outline: none;
        }
        .ford-doc-chooser-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 16px;
        }
        .ford-doc-chooser-btn {
            min-height: 48px;
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-md);
            background: var(--surface-muted);
            color: var(--text);
            font: inherit;
            font-size: 15px;
            font-weight: 750;
            cursor: pointer;
            transition: background var(--duration-fast) var(--ease-snappy), border-color var(--duration-fast) var(--ease-snappy), color var(--duration-fast) var(--ease-snappy);
        }
        .ford-doc-chooser-btn:hover,
        .ford-doc-chooser-btn:focus-visible {
            border-color: var(--accent);
            background: var(--accent-light);
            color: var(--accent);
            outline: none;
        }
        .stock-search-section-label {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.03em;
            color: var(--muted);
            text-transform: uppercase;
            padding: 6px 8px 2px;
        }
        .stock-search-result.stock-search-query-result {
            display: grid;
            grid-template-columns: 92px minmax(0, 1fr);
            gap: 10px;
            align-items: center;
            padding: 8px;
            overflow: visible;
            min-height: 0;
        }
        .stock-search-result.stock-search-query-result .stock-search-result-photo {
            width: 92px;
            height: 64px;
            display: block;
            border-radius: 6px;
            border: 1px solid var(--border);
            object-fit: cover;
            background: #eef1f5;
        }
        .stock-search-result.stock-search-query-result .stock-search-result-main {
            padding: 0;
            gap: 2px;
            align-self: center;
        }
        .stock-search-result.stock-search-query-result .stock-search-result-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.35;
        }
        .stock-search-result.stock-search-recent-item {
            grid-template-columns: 52px minmax(0, 1fr) 32px;
        }
        .stock-search-result.stock-search-vehicle-result {
            grid-template-columns: 52px minmax(0, 1fr) 48px;
        }
        .stock-search-favorite-btn,
        .stock-search-favorite-spacer {
            width: 30px;
            height: 30px;
            justify-self: end;
        }
        .stock-search-sold-btn {
            width: auto;
            min-width: 44px;
            height: 30px;
            justify-self: end;
        }
        .stock-search-favorite-btn,
        .stock-search-sold-btn {
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--surface);
            color: var(--header-muted);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: border-color var(--duration-fast) var(--ease-snappy), background var(--duration-fast) var(--ease-snappy), color var(--duration-fast) var(--ease-snappy);
        }
        .stock-search-sold-btn {
            border-color: #fecaca;
            background: #dc2626;
            color: #fff;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.04em;
            line-height: 1;
            padding: 0 8px;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .stock-search-favorite-btn svg {
            width: 17px;
            height: 17px;
            pointer-events: none;
        }
        .stock-search-favorite-btn:hover,
        .stock-search-favorite-btn:focus-visible {
            border-color: var(--border-strong);
            background: var(--surface-hover);
            color: var(--text);
            outline: none;
        }
        .stock-search-sold-btn:hover,
        .stock-search-sold-btn:focus-visible {
            border-color: #b91c1c;
            background: #b91c1c;
            color: #fff;
            outline: none;
        }
        .stock-search-favorite-btn.bookmarked {
            color: #e11d48;
            background: #fff1f2;
            border-color: #fecdd3;
        }
        .stock-search-result-meta .stock-search-dealer-label {
            color: var(--text);
            font-weight: 500;
        }
        .stock-search-result-meta .dot-sep {
            opacity: 0.75;
            margin: 0 4px;
        }
        .header-center-stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: 100%;
            max-width: 720px;
            position: relative;
            z-index: 6;
        }
        .header-search-row {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
        }
        @media (min-width: 901px) {
            .header-center-stack { min-height: var(--header-center-min-height); }
            .header-search-row { min-height: var(--header-control-height); }
        }
        .header-slot-hidden {
            visibility: hidden;
            pointer-events: none;
            opacity: 0;
        }
        @media (max-width: 900px) {
            .stock-search.header-slot-hidden,
            .stock-search-hint.header-slot-hidden {
                display: none !important;
            }
            /* Inventory pages hide search — drop the reserved header-center column entirely */
            .header-center:has(.stock-search.header-slot-hidden) {
                display: none;
            }
        }

        /* Fairfield New/Used flip toggle — segment inside the search bar */
        .home-mode-toggle {
            flex: 0 0 auto;
            align-self: stretch;
            appearance: none;
            border: none;
            margin: 0;
            padding: 0 12px;
            min-width: 54px;
            height: auto;
            border-radius: 0;
            border-left: 1px solid var(--border);
            background: var(--surface);
            color: var(--text);
            font: inherit;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: normal;
            text-transform: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            box-shadow: none;
            transition: background var(--duration-fast) var(--ease-snappy), color var(--duration-fast) var(--ease-snappy);
        }
        .home-mode-toggle[data-mode="new"] {
            background: var(--accent-light);
            color: var(--accent);
        }
        .home-mode-toggle[data-mode="used"] {
            background: #fff7ed;
            color: #c2410c;
        }
        .home-mode-toggle[data-mode="new"]:hover {
            background: #e8f0fe;
            color: var(--accent-hover);
        }
        .home-mode-toggle[data-mode="used"]:hover {
            background: #ffedd5;
            color: #9a3412;
        }
        .home-mode-toggle:active { transform: scale(0.98); }
        .home-mode-toggle:focus-visible {
            outline: none;
            box-shadow: inset 0 0 0 2px var(--accent-ring);
            z-index: 1;
        }
        .home-mode-toggle.header-slot-hidden {
            width: 0;
            min-width: 0;
            height: 0;
            min-height: 0;
            margin: 0;
            padding: 0;
            border: none;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            box-shadow: none;
        }
        .home-mode-toggle-face {
            display: inline-flex;
            align-items: center;
        }
        .home-mode-label-used { display: none; }
        .home-mode-toggle[data-mode="used"] .home-mode-label-new { display: none; }
        .home-mode-toggle[data-mode="used"] .home-mode-label-used { display: inline; }
        .stock-search:has(.home-mode-toggle:not(.header-slot-hidden)) input {
            padding-right: 10px;
        }

        /* Avoid layout shifts while booting: keep header-right width reserved but invisible */
        .header-right.hidden { visibility: hidden; pointer-events: none; }
        .bookmarks-button {
            width: var(--header-control-height);
            height: var(--header-control-height);
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--header-muted);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: border-color var(--duration-fast) var(--ease-snappy), background var(--duration-fast) var(--ease-snappy), color var(--duration-fast) var(--ease-snappy);
            padding: 0;
            position: relative;
        }
        .header-icon-button {
            width: var(--header-control-height);
            height: var(--header-control-height);
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--header-muted);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: border-color var(--duration-fast) var(--ease-snappy), background var(--duration-fast) var(--ease-snappy), color var(--duration-fast) var(--ease-snappy);
            padding: 0;
        }
        .profile-button-wrap {
            position: relative;
            display: inline-flex;
        }
        .profile-button .avatar-initials {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }
        .profile-button:not(.is-authed) .avatar-initials {
            display: none;
        }
        .account-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            z-index: 1200;
        }
        .account-menu[hidden] {
            display: none;
        }
        .bookmarks-button.hidden { display: none; }
        .bookmarks-button svg {
            width: 22px;
            height: 22px;
            stroke-width: 1.6;
            stroke-linejoin: round;
            stroke-linecap: round;
        }
        .header-icon-button svg {
            width: 22px;
            height: 22px;
            stroke-width: 1.6;
            stroke-linejoin: round;
            stroke-linecap: round;
        }
        .db-button {
            width: auto;
            min-width: var(--header-control-height);
            min-height: var(--header-control-height);
            padding: 0 12px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-decoration: none;
            color: var(--header-fg);
        }
        .score-button {
            width: auto;
            min-width: var(--header-control-height);
            min-height: var(--header-control-height);
            padding: 0 12px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: var(--header-fg);
        }
        .drive-button {
            width: auto;
            min-width: var(--header-control-height);
            min-height: var(--header-control-height);
            padding: 0 12px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: var(--header-fg);
            text-decoration: none;
        }
        .bookmarks-button:hover,
        .header-icon-button:hover {
            border-color: var(--border-strong);
            background: var(--surface-hover);
            color: var(--text);
        }
        .bookmarks-button:active,
        .header-icon-button:active { background: var(--surface-muted); }
        .mobile-logout-button:hover { background: #dc2626; }
        .mobile-logout-button:active { transform: scale(0.99); }
        .mobile-logout-button.hidden { display: none !important; }
        .bookmarks-button.active,
        .bookmarks-button.has-count {
            border-color: rgba(225,29,72,0.28);
            color: #be123c;
        }
        .bookmarks-button .bookmark-count {
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(34%, -34%) rotate(5deg);
            min-width: 19px;
            height: 19px;
            border-radius: 999px;
            background: linear-gradient(135deg, #ff375f 0%, #ff6a3d 100%);
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5px;
            border: 1px solid rgba(255,255,255,0.82);
            box-shadow: 0 5px 12px rgba(225,29,72,0.24);
            letter-spacing: 0;
            pointer-events: none;
            transform-origin: center;
        }
        .bookmarks-clear-button {
            margin-left: 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--surface);
            padding: 8px 16px;
            font-size: 14px;
            color: var(--text);
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
        }
        .bookmarks-clear-button:hover {
            border-color: var(--accent);
        }
        .bookmarks-clear-button.hidden {
            display: none;
        }

        .status-view-button {
            height: 34px;
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid rgba(0,0,0,0.12);
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 0.1px;
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
            background: white;
        }
        .status-view-button:active { transform: translateY(0.5px); }
        .status-view-button.active {
            border-color: var(--accent);
            background: var(--accent-light);
            color: var(--accent);
        }
        .view-toggle-button {
            border: 1px solid var(--border);
            border-radius: 999px;
            background: white;
            padding: 8px 14px;
            font-size: 14px;
            color: var(--text);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: border-color 0.2s, background 0.2s, transform 0.2s;
            user-select: none;
        }
        .view-toggle-button:hover {
            border-color: var(--accent);
            background: var(--surface-hover);
        }
        .view-toggle-button.active {
            border-color: var(--accent);
            background: var(--accent-light);
        }
        .view-toggle-button:active {
            transform: translateY(0);
        }
        #view-toggle-icon {
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            background: #f3f4f6;
            color: #374151;
            letter-spacing: 0.02em;
        }
        .view-toggle-button.active #view-toggle-icon {
            background: var(--accent-light);
            color: var(--accent);
        }
        .view-toggle-button.hidden {
            display: none;
        }
        .sort { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
        .sort-select { border: none; background: transparent; font: inherit; color: var(--text); padding: 4px 0; cursor: pointer; }
        .main { flex: 1; display: flex; padding: 22px 28px 44px; gap: 20px; align-items: flex-start; position: relative; z-index: 1; }
        .main.homepage-main { padding: 20px 28px 44px; justify-content: center; }
        #main-content > .ff-site-sidebar--embedded { order: 1; }
        #main-content > #filters-sidebar { order: 2; }
        #main-content > .inventory { order: 3; }
        .filters {
            width: 264px;
            flex-shrink: 0;
            padding: 14px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            align-self: flex-start;
            position: sticky;
            top: 84px;
            max-height: calc(100vh - 104px);
            overflow-y: auto;
            box-shadow: var(--shadow-xs);
        }
        .filters.hidden { display: none; }
        /* Sort control lives above the filter stack (sidebar) */
        #filters-sidebar #sort-container {
            width: 100%;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border);
            gap: 12px;
            min-width: 0;
        }
        #filters-sidebar #sort-container > span {
            flex: 0 0 auto;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--muted);
        }
        #filters-sidebar #sort-container .sort-select {
            flex: 1 1 auto;
            min-width: 0;
            max-width: 168px;
            box-sizing: border-box;
            padding: 7px 24px 7px 10px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background-color: var(--surface);
            text-align: left;
        }
        /* Keep the filter list compact enough to scan without excessive scrolling. */
        .filter-section { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(217,224,234,0.82); }
        .filter-section:last-child { border-bottom: none; }
        .filter-title { font-size: 11px; font-weight: 760; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; }
        .filter-clear { font-size: 11px; color: var(--accent); cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 500; }
        .filter-clear:hover { text-decoration: underline; }
        /* Hide per-filter clear links (use the single "Clear all" control instead). */
        #filters-sidebar .filter-clear { display: none !important; }
        .filter-option {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0;
            padding: 3px 8px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            line-height: 1.25;
            cursor: pointer;
            transition: background var(--duration-fast) var(--ease-snappy), color var(--duration-fast) var(--ease-snappy);
        }
        .filter-option:hover { background: var(--surface-hover); }
        /* Custom checkbox visuals so we can show ✓ for include and ✕ for exclude */
        .filter-option input {
            -webkit-appearance: none;
            appearance: none;
            cursor: pointer;
            width: 15px;
            height: 15px;
            border: 1.5px solid #9ca3af;
            border-radius: 4px;
            background: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex-shrink: 0;
        }
        .filter-option input:checked {
            border-color: var(--accent);
            background: var(--accent);
        }
        .filter-option input:checked::after {
            content: '✓';
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -56%);
        }
        .filter-option-label { flex: 1; }
        .filter-option-text { }
        .filter-option-excluded .filter-option-label { opacity: 0.6; }
        .filter-option-excluded .filter-option-text { text-decoration: line-through; }
        /* Show a red ✕ inside the checkbox when excluded (even though it's unchecked) */
        .filter-option-excluded input {
            border-color: #dc2626;
            background: #fee2e2;
        }
        .filter-option-excluded input::after {
            content: '✕';
            color: #dc2626;
            font-size: 12px;
            font-weight: 800;
            line-height: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -55%);
        }
        .filter-option-count { font-size: 12px; color: var(--muted); margin-left: 6px; text-decoration: none; font-variant-numeric: tabular-nums; }
        .filter-option-desc { font-size: 11px; color: var(--muted); display: block; }
        /* Always show full option lists (no internal scrolling) */
        .filter-options-scroll { max-height: none; overflow: visible; }
        .price-range-inputs { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
        .range-filter { padding: 4px 0 10px; }
        .mileage-filter-select {
            width: 100%;
            font-size: 14px;
            padding: 8px 10px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            background: #fff;
            color: var(--text);
            cursor: pointer;
        }
        .year-range-dropdowns { padding: 4px 0 10px; }
        .mpg-range-dropdowns {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 4px 0 10px;
        }
        .year-filter-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            align-items: end;
        }
        .year-filter-field {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .year-filter-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }
        .range-filter-label-muted {
            font-size: 13px;
            color: var(--muted);
            padding: 4px 0;
        }
        .range-control {
            --range-thumb: 16px;
            --range-track-h: 4px;
            --range-inset: calc(var(--range-thumb) / 2);
            padding: 2px 0 0;
        }
        .range-control-values {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
        }
        .range-control-value {
            font-size: 13px;
            font-weight: 700;
            color: var(--text);
            font-variant-numeric: tabular-nums;
            line-height: 1.2;
        }
        .range-control-value-min { text-align: left; }
        .range-control-value-max { text-align: right; }
        .range-control-value-sep {
            font-size: 11px;
            font-weight: 500;
            color: var(--muted);
            text-transform: lowercase;
        }
        .range-control-track-area {
            position: relative;
            height: 36px;
            padding: 0 var(--range-inset);
        }
        .range-control-rail,
        .range-control-fill {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: var(--range-track-h);
            border-radius: 999px;
            pointer-events: none;
        }
        .range-control-rail {
            left: var(--range-inset);
            right: var(--range-inset);
            background: #d1d5db;
        }
        .range-control-fill {
            left: calc(var(--range-inset) + var(--range-lo, 0) * (100% - var(--range-thumb)) / 100);
            width: calc((var(--range-hi, 100) - var(--range-lo, 0)) * (100% - var(--range-thumb)) / 100);
            background: var(--accent);
        }
        .range-control-tick-marks {
            position: absolute;
            left: var(--range-inset);
            right: var(--range-inset);
            top: calc(50% + 5px);
            height: 5px;
            pointer-events: none;
        }
        .range-control-tick-mark {
            position: absolute;
            top: 0;
            width: 1px;
            height: 5px;
            background: #9ca3af;
            transform: translateX(-50%);
        }
        .range-control-tick-mark.is-labeled { height: 7px; background: #64748b; }
        .range-control-scale {
            position: relative;
            height: 14px;
            margin: 8px var(--range-inset) 0;
        }
        .range-control-scale-label {
            position: absolute;
            top: 0;
            transform: translateX(-50%);
            font-size: 10px;
            line-height: 1;
            color: #6b7280;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .range-control-scale-label.is-end-min {
            transform: translateX(0);
            font-weight: 600;
            color: var(--text);
        }
        .range-control-scale-label.is-end-max {
            transform: translateX(-100%);
            font-weight: 600;
            color: var(--text);
        }
        .range-control input[type="range"] {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 36px;
            margin: 0;
            background: none;
            pointer-events: none;
            -webkit-appearance: none;
            appearance: none;
        }
        .range-control input[type="range"]::-webkit-slider-runnable-track {
            height: var(--range-track-h);
            background: transparent;
            border: none;
        }
        .range-control input[type="range"]::-moz-range-track {
            height: var(--range-track-h);
            background: transparent;
            border: none;
        }
        .range-control input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            pointer-events: auto;
            width: var(--range-thumb);
            height: var(--range-thumb);
            margin-top: calc((var(--range-track-h) - var(--range-thumb)) / 2);
            border-radius: 50%;
            border: 2px solid var(--accent);
            background: #fff;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
            cursor: grab;
        }
        .range-control input[type="range"]::-moz-range-thumb {
            pointer-events: auto;
            width: var(--range-thumb);
            height: var(--range-thumb);
            border-radius: 50%;
            border: 2px solid var(--accent);
            background: #fff;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
            cursor: grab;
        }
        .range-control input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
        .range-control input[type="range"]:active::-moz-range-thumb { cursor: grabbing; }
        .range-control input[type="range"].dual-range-min { z-index: 3; }
        .range-control input[type="range"].dual-range-max { z-index: 4; }
        .price-input { width: 80px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; font: inherit; font-size: 12px; }
        .price-input:focus { outline: none; border-color: var(--accent); }
        .price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .price-input { -moz-appearance: textfield; }
        .active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; min-height: 0; }
        .active-filter-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--accent-light); border: 1px solid #b7d6fa; border-radius: var(--radius-sm); font-size: 12px; font-weight: 650; color: var(--accent); }
        .active-filter-tag-label { display: inline-flex; align-items: center; }
        .active-filter-tag--model-wordmark { min-height: 32px; }
        .active-filter-tag--model-wordmark .ford-model-wordmark--f150 { font-size: 20px; }
        .active-filter-tag--model-wordmark .ford-model-wordmark--super-duty { font-size: 10px; }
        .active-filter-tag--model-wordmark .ford-model-wordmark--bronco { font-size: 26px; }
        .active-filter-tag button { background: none; border: none; padding: 0; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; }
        .active-filter-tag.exclude-filter-tag { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
        .clear-all-filters { font-size: 12px; color: var(--accent); cursor: pointer; padding: 4px 10px; margin-left: auto; white-space: nowrap; }
        .clear-all-filters:hover { text-decoration: underline; }
        .inventory { flex: 1; min-width: 0; }
        .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
        .main:not(.homepage-main) .inventory {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            min-height: 200px;
        }
        .vehicle-detail.active .main.vehicle-detail-main .inventory {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            min-height: 0;
            box-shadow: none;
        }
        /* When showing bookmark comparison table, the grid layout constrains width; switch to full-width flow */
        .cards-grid.table-view { display: block; }
        /* Also ensure the table container spans the whole grid if grid layout is active for any reason */
        .cards-grid .comparison-table-container { grid-column: 1 / -1; }
        .card {
            background: var(--surface);
            border-radius: var(--radius-md);
            padding: 12px 12px 0;
            box-shadow: none;
            border: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: border-color var(--duration-fast) var(--ease-snappy), background var(--duration-fast) var(--ease-snappy), box-shadow var(--duration-fast) var(--ease-snappy), transform var(--duration-fast) var(--ease-snappy);
            position: relative;
            overflow: hidden;
        }
        .card.card-external-dealer {
            background: var(--surface);
            border-color: #c6d9ef;
        }
        .card.card-offsite-used {
            background: #dbeafe;
            border-color: #60a5fa;
        }
        .card:hover {
            border-color: var(--border-strong);
            background: var(--surface);
            box-shadow: var(--shadow-sm);
            transform: translateY(-1px);
        }
        .card.card-external-dealer:hover { background: #fbfdff; }
        .card.card-offsite-used:hover {
            background: #bfdbfe;
            border-color: #3b82f6;
        }
        .card-link {
            display: flex;
            flex-direction: column;
            gap: 9px;
            flex: 1;
            width: 100%;
            color: inherit;
            text-decoration: none;
            cursor: pointer;
        }
        .card-link[aria-hidden="true"] {
            cursor: default;
        }
        .card-link:hover {
            text-decoration: none;
        }
        .card-link:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 4px;
        }
        .card button:not(.bookmark-button):not(.vehicle-service-action-button):not(.sold-badge),
        .card .tag-clickable,
        .card .stock-clickable {
            position: relative;
            z-index: 2;
        }
        .card-image-placeholder { background: #eef2f7; border-radius: var(--radius-sm); margin: 0 0 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #98a2b3; font-size: 12px; height: 172px; position: relative; border: 1px solid rgba(217,224,234,0.78); }
        .card-image-placeholder.no-image { background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%); }
        .vehicle-photo-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            color: #98a2b3;
            font-size: 12px;
            font-weight: 600;
            line-height: 1.2;
            text-align: center;
            pointer-events: none;
        }
        .in-transit-badge {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            background: #fff7ed;
            border: 1px solid #fdba74;
            color: #9a3412;
            font-size: 11px;
            font-weight: 760;
            padding: 4px 8px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(15,23,42,0.12);
        }
        .card-image-placeholder > .available-badge {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            background: #ecfdf3;
            border: 1px solid #86d9a5;
            color: #166534;
            font-size: 11px;
            font-weight: 760;
            padding: 4px 8px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(15,23,42,0.10);
        }
        .detail-status-tag.available-badge {
            background: #ecfdf3;
            border-color: #86d9a5;
            color: #166534;
        }
        .in-plant-badge {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #1d4ed8;
        }
        .sold-badge {
            appearance: none;
            background: #fef2f2;
            border-color: #fca5a5;
            color: #b91c1c;
            cursor: pointer;
            font-family: inherit;
        }
        .sold-badge:hover {
            background: #fee2e2;
            border-color: #f87171;
            color: #991b1b;
        }
        .card-image-placeholder > .sold-badge {
            z-index: 6;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .card-image-placeholder img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: bottom center; transition: opacity 0.3s ease; position: absolute; top: 0; left: 0; }
        .card-image-placeholder img:not(.is-loaded) { opacity: 0; }
        .card-image-placeholder img.interior { opacity: 0; }
        @media (min-width: 901px) {
            .card.inventory-scroll-card .card-image-placeholder {
                margin: -12px -12px 2px;
                border-width: 0;
                border-radius: var(--radius-md) var(--radius-md) 0 0;
            }
        }
        @media (hover: hover) and (pointer: fine) {
            .card-image-placeholder.has-interior:not(.photo-hover-disabled):hover img.exterior { opacity: 0; }
            .card-image-placeholder.has-interior:not(.photo-hover-disabled):hover img.interior.is-loaded { opacity: 1; }
        }
        .card-image-placeholder {
            --card-control-inset: 8px;
            --card-control-size: 30px;
            --card-control-radius: 8px;
            --card-control-bg: rgba(255,255,255,0.48);
            --card-control-bg-hover: rgba(255,255,255,0.88);
            --card-control-border: rgba(0,0,0,0.10);
            --card-control-border-hover: rgba(0,0,0,0.18);
            --card-control-color: rgba(29, 29, 31, 0.72);
        }
        .card-photo-controls {
            position: absolute;
            inset: 0;
            z-index: 4;
            display: flex;
            align-items: center;
            justify-content: space-between;
            pointer-events: none;
        }
        .card-photo-control {
            width: var(--card-control-size);
            height: var(--card-control-size);
            border: 1px solid var(--card-control-border);
            border-radius: var(--card-control-radius);
            background: var(--card-control-bg);
            color: var(--card-control-color);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            line-height: 1;
            padding: 0 0 2px 0;
            pointer-events: auto;
        }
        .card-photo-control:hover { background: var(--card-control-bg-hover); border-color: var(--card-control-border-hover); color: var(--text); }
        .card-photo-prev { margin-left: var(--card-control-inset); }
        .card-photo-next { margin-right: var(--card-control-inset); }
        .bookmark-button,
        .detail-bookmark-button {
            position: absolute;
            top: var(--card-control-inset);
            right: var(--card-control-inset);
            width: var(--card-control-size);
            height: var(--card-control-size);
            border: 1px solid var(--card-control-border);
            border-radius: var(--card-control-radius);
            background: var(--card-control-bg);
            color: var(--card-control-color);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: border-color var(--duration-fast) var(--ease-snappy), background var(--duration-fast) var(--ease-snappy), color var(--duration-fast) var(--ease-snappy);
            z-index: 3;
            padding: 0;
            box-shadow: none;
        }
        .detail-bookmark-button {
            top: 12px;
            right: 12px;
            width: var(--header-control-height);
            height: var(--header-control-height);
            border-color: var(--border);
            border-radius: 10px;
            background: var(--surface);
            color: var(--header-muted);
            z-index: 5;
        }
        .bookmark-button svg,
        .detail-bookmark-button svg {
            width: 16px;
            height: 16px;
            stroke-width: 1.6;
            stroke-linejoin: round;
            stroke-linecap: round;
            pointer-events: none;
        }
        .detail-bookmark-button svg {
            width: 18px;
            height: 18px;
        }
        .bookmark-button:hover,
        .detail-bookmark-button:hover {
            border-color: var(--card-control-border-hover);
            background: var(--card-control-bg-hover);
            color: var(--text);
        }
        .detail-bookmark-button:hover {
            border-color: var(--border-strong);
            background: var(--surface-hover);
        }
        .bookmark-button.bookmarked,
        .detail-bookmark-button.bookmarked {
            color: #fff;
            background: rgba(225,29,72,0.90);
            border-color: rgba(225,29,72,0.96);
        }
        .detail-bookmark-button.bookmarked {
            color: #e11d48;
            background: #fff1f2;
            border-color: #fecdd3;
        }
        .bookmark-button.bookmarked:hover,
        .detail-bookmark-button.bookmarked:hover {
            color: #fff;
            background: rgba(190,18,60,0.96);
            border-color: rgba(190,18,60,1);
        }
        .detail-bookmark-button.bookmarked:hover {
            color: #be123c;
            background: #ffe4e6;
            border-color: #fda4af;
        }
        .vehicle-service-action-button {
            position: absolute;
            top: var(--card-control-inset);
            left: var(--card-control-inset);
            width: var(--card-control-size);
            height: var(--card-control-size);
            border: 1px solid var(--card-control-border);
            border-radius: var(--card-control-radius);
            background: var(--card-control-bg);
            color: #64748b;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: border-color var(--duration-fast) var(--ease-snappy), background var(--duration-fast) var(--ease-snappy), color var(--duration-fast) var(--ease-snappy);
            z-index: 3;
            padding: 0;
            box-shadow: none;
        }
        .vehicle-service-action-button svg {
            width: 16px;
            height: 16px;
            display: block;
            stroke-width: 1.8;
            stroke-linejoin: round;
            stroke-linecap: round;
            pointer-events: none;
        }
        .vehicle-service-action-button.is-clean {
            color: #16a34a;
            background: rgba(240, 253, 244, 0.72);
            border-color: rgba(34, 197, 94, 0.32);
            cursor: default;
        }
        .vehicle-service-action-button.is-clean:not(:disabled) {
            cursor: pointer;
        }
        .vehicle-service-action-button.is-unknown {
            color: #475569;
            background: rgba(248, 250, 252, 0.84);
            border-color: rgba(100, 116, 139, 0.34);
        }
        .vehicle-service-action-button.is-fsa {
            color: #fff;
            background: rgba(234, 88, 12, 0.92);
            border-color: rgba(234, 88, 12, 0.98);
        }
        .vehicle-service-action-button.is-recall {
            color: #fff;
            background: rgba(220, 38, 38, 0.92);
            border-color: rgba(220, 38, 38, 0.98);
        }
        .vehicle-service-action-button:disabled {
            opacity: 1;
        }
        .vehicle-service-action-button:not(:disabled):hover,
        .vehicle-service-action-button:not(:disabled):focus-visible {
            border-color: var(--card-control-border-hover);
            background: var(--card-control-bg-hover);
            outline: none;
        }
        .vehicle-service-action-button.is-fsa:not(:disabled):hover,
        .vehicle-service-action-button.is-fsa:not(:disabled):focus-visible {
            color: #c2410c;
            background: #fff7ed;
            border-color: #fdba74;
        }
        .vehicle-service-action-button.is-recall:not(:disabled):hover,
        .vehicle-service-action-button.is-recall:not(:disabled):focus-visible {
            color: #b91c1c;
            background: #fef2f2;
            border-color: #fca5a5;
        }
        .vehicle-age-badge {
            position: absolute;
            top: var(--card-control-inset);
            left: var(--card-control-inset);
            z-index: 3;
            padding: 4px 7px;
            border: 1px solid var(--ff-color-border-strong);
            border-radius: var(--ff-radius-sm);
            background: var(--ff-color-text);
            color: var(--ff-color-surface);
            font-size: 11px;
            font-weight: 760;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            letter-spacing: 0.02em;
            box-shadow: var(--shadow-xs);
            pointer-events: none;
        }
        html[data-inventory-view="customer"] .vehicle-age-badge {
            display: none !important;
        }
        .card-title { font-size: 15px; font-weight: 720; margin-bottom: 2px; line-height: 1.3; color: var(--text); }
        .card-subtitle {
            font-size: 11px;
            color: var(--muted);
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
        }
        .card-subtitle .card-dealer-label { color: var(--text); font-weight: 500; }
        .in-transit-badge.card-offsite-badge {
            color: #1e3a8a;
            background: #dbeafe;
            border: 1px solid #60a5fa;
            text-transform: none;
            letter-spacing: 0.01em;
        }
        .card-id-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
            font-variant-numeric: tabular-nums;
        }
        .card-id-label {
            color: #7c8797;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .card-id-value {
            color: var(--text);
            font-size: 11px;
            font-weight: 650;
        }
        .card-meta { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
        .card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
        .dealer-trade-card .card-link { flex: 0 0 auto; }
        .tag { font-size: 11px; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--surface-muted); border: 1px solid var(--border); color: #475569; transition: background var(--duration-fast) var(--ease-snappy), border-color var(--duration-fast) var(--ease-snappy), color var(--duration-fast) var(--ease-snappy); }
        /* Prevent unusually long chip text (e.g., interior materials) from blowing out card layout */
        .card-tags .tag { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
        .tag-equipment { background: var(--accent-light); border-color: #bfdbfe; color: var(--accent); }
        /* Chips carrying a data-source/confidence tooltip (e.g. fuel economy / EV range) */
        .tag-has-info { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; text-decoration-color: var(--border); }
        /* Clickable chip that links to its data source (fueleconomy.gov / window sticker) */
        a.tag.tag-link, a.tag.tag-link:visited { color: inherit; }
        .tag-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; text-decoration-color: var(--border); }
        .tag-link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); text-decoration-color: var(--accent); }
        .tag-clickable { cursor: pointer; }
        .tag-clickable:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.08); transform: translateY(-1px); }
        .tag-filter-active { background: var(--accent-light); border-color: #bfdbfe; color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 8px;
            margin: auto -12px 0;
            padding: 10px 12px 11px;
            border-top: 1px solid var(--border);
            background: linear-gradient(180deg, #fbfcfe 0%, #f6f8fb 100%);
        }
        /* Keep the title/identity and right-side price presentation in real
           grid columns so neither side clips the other. */
        .card-heading:has(> :is(.card-price-final, .vehicle-card-price-group)) {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-rows: auto auto;
            column-gap: 10px;
            align-items: center;
            padding-bottom: 11px;
        }
        .card-heading > :is(.card-price-final, .vehicle-card-price-group) {
            grid-column: 2;
            grid-row: 1 / 3;
            align-self: center;
        }
        .card-heading:has(> :is(.card-price-final, .vehicle-card-price-group)) > .card-title,
        .card-heading:has(> :is(.card-price-final, .vehicle-card-price-group)) > .card-subtitle {
            min-width: 0;
            grid-column: 1;
        }
        .vehicle-card-price-group {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            gap: 3px;
            margin-left: auto;
            text-align: right;
        }
        .vehicle-card-price-group > .card-price-final {
            margin-left: 0;
        }
        .vehicle-card-price-group .card-odometer {
            margin: 0;
            color: var(--text);
            font-size: 15px;
            font-weight: 780;
            font-variant-numeric: tabular-nums;
            line-height: 1.12;
            white-space: nowrap;
        }
        .vehicle-dol-stack {
            position: absolute;
            left: var(--card-control-inset);
            bottom: var(--card-control-inset);
            min-width: var(--card-control-size);
            min-height: var(--card-control-size);
            border: 1px solid var(--card-control-border);
            border-radius: var(--card-control-radius);
            background: var(--card-control-bg);
            z-index: 3;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 1px;
            color: var(--card-control-color);
            font-size: 10px;
            font-weight: 600;
            line-height: 1.15;
            letter-spacing: 0;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            padding: 4px 7px;
            box-shadow: none;
        }
        .card-price-pair {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 1px;
            line-height: 1.12;
        }
        .card-price-pair span {
            color: var(--muted);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .card-price-pair strong {
            color: var(--text);
            font-size: 15px;
            font-weight: 780;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .dealer-trade-price-link {
            margin: 0;
            padding: 2px 0;
            border: 0;
            border-radius: 4px;
            background: transparent;
            font: inherit;
            text-align: left;
            text-decoration: none;
            cursor: pointer;
        }
        .dealer-trade-price-link span,
        .dealer-trade-price-link strong { color: #075daf; }
        .dealer-trade-price-link:hover strong { text-decoration: underline; }
        .dealer-trade-price-link:focus-visible {
            outline: 2px solid #0b74de;
            outline-offset: 2px;
        }
        .card-price-invoice {
            align-items: flex-end;
            text-align: right;
        }
        .card-price-final {
            align-items: flex-end;
            margin-left: auto;
            text-align: right;
        }
        .card-price-final span,
        .card-price-final strong {
            color: var(--vehicle-card-price-color);
        }
        .vehicle-service-action-modal {
            width: min(560px, 96vw);
            max-height: min(86vh, 640px);
        }
        .vehicle-service-action-title-wrap {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .vehicle-service-action-subtitle {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .vehicle-service-action-body {
            gap: 10px;
            overflow: auto;
        }
        .vehicle-service-action-row {
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--surface);
            padding: 10px 12px;
        }
        .vehicle-service-action-row.is-fsa {
            border-color: #fdba74;
            background: #fff7ed;
        }
        .vehicle-service-action-row.is-recall {
            border-color: #fca5a5;
            background: #fef2f2;
        }
        .vehicle-service-action-row-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 5px;
        }
        .vehicle-service-action-code {
            color: var(--text);
            font-size: 13px;
            font-weight: 700;
        }
        .vehicle-service-action-type,
        .vehicle-service-action-meta {
            color: var(--muted);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .vehicle-service-action-desc {
            color: var(--text);
            font-size: 13px;
            line-height: 1.45;
        }
        .vehicle-service-action-meta {
            margin-top: 6px;
            text-transform: none;
            letter-spacing: 0;
        }
        .vehicle-service-action-empty {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.45;
            padding: 4px 2px;
        }
        .price { font-size: 14px; font-weight: 500; }
        .card-footer-used .price,
        .card-odometer { font-size: 16px; font-weight: 700; }
        .loading, .no-results { text-align: center; padding: 48px; color: var(--muted); }
        .loading {
            min-height: 220px;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--surface);
            font-size: 13px;
            font-weight: 650;
        }
        .cards-grid > .loading,
        .cards-grid > .no-results { grid-column: 1 / -1; }
        .dealer-trade-empty-state {
            display: flex;
            min-height: 240px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 9px;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background: var(--surface);
            box-shadow: var(--shadow-xs);
        }
        .dealer-trade-empty-state strong {
            color: var(--text);
            font-size: 17px;
            font-weight: 720;
        }
        .dealer-trade-empty-state span {
            max-width: 440px;
            line-height: 1.5;
        }
        .dealer-trade-button {
            display: inline-flex;
            min-height: 44px;
            align-items: center;
            justify-content: center;
            margin-top: 8px;
            padding: 0 18px;
            border: 1px solid var(--accent);
            border-radius: var(--radius-md);
            background: var(--accent);
            color: #fff;
            font: inherit;
            font-size: 13px;
            font-weight: 720;
            text-decoration: none;
            cursor: pointer;
            box-shadow: 0 7px 18px rgba(24, 95, 166, .18);
            transition: background var(--duration-fast) var(--ease-snappy), transform var(--duration-fast) var(--ease-snappy);
        }
        .dealer-trade-button:hover { background: var(--accent-hover); }
        .dealer-trade-button:active { transform: translateY(1px); }
        .dealer-trade-button:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
        .dealer-trade-results-banner {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 13px;
            border: 1px solid #bfd6ee;
            border-radius: var(--radius-md);
            background: #f3f8ff;
            color: var(--text);
        }
        .dealer-trade-results-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            flex: 0 0 30px;
            border-radius: 999px;
            background: var(--accent);
            color: #fff;
            font-size: 16px;
            font-weight: 800;
        }
        .dealer-trade-results-banner > span:last-child {
            display: flex;
            min-width: 0;
            flex-direction: column;
            gap: 2px;
        }
        .dealer-trade-results-banner strong { font-size: 13px; font-weight: 750; }
        .dealer-trade-results-banner small { color: var(--muted); font-size: 11px; line-height: 1.35; }
        /* Vehicle Detail View */
        .vehicle-detail { display: none !important; flex-direction: column; min-height: 100vh; }
        .vehicle-detail.active {
            display: flex !important;
            position: fixed;
            inset: 0;
            z-index: 1000;
            height: 100vh;
            overflow: hidden;
            background: var(--bg);
        }
        html.vehicle-detail-open,
        body.vehicle-detail-open { overflow: hidden; height: 100%; }
        body.vehicle-detail-open .page { overflow: hidden; height: 100%; }
        .vehicle-detail .vehicle-detail-main {
            flex: 1;
            min-height: 0;
            overflow: hidden;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 0;
            padding: 20px;
            background: transparent;
        }
        .product-switch {
            grid-column: 3;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            height: calc(var(--header-control-height) - 6px);
            margin-left: 10px;
            padding: 3px;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: color-mix(in srgb, var(--surface) 88%, var(--surface-muted));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(15,23,42,0.05);
            align-self: center;
        }
        .product-switch-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-width: 0;
            height: 100%;
            padding: 0 11px;
            border-radius: var(--radius-sm);
            color: var(--header-muted);
            font-size: 12px;
            font-weight: 760;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
            transition: color var(--duration-fast) var(--ease-snappy), background var(--duration-fast) var(--ease-snappy), box-shadow var(--duration-fast) var(--ease-snappy), transform var(--duration-fast) var(--ease-snappy);
        }
        .product-switch-link svg {
            width: 15px;
            height: 15px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex: 0 0 auto;
        }
        .product-switch-link:hover,
        .product-switch-link:focus-visible {
            color: var(--text);
            background: rgba(255,255,255,0.72);
        }
        .product-switch-link:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .product-switch-link:active {
            transform: scale(0.98);
        }
        .product-switch-link.is-active {
            color: var(--accent);
            background: var(--surface);
            box-shadow: 0 1px 3px rgba(15,23,42,0.12);
        }
        .vehicle-detail .vehicle-detail-main .inventory,
        .vehicle-detail .vehicle-detail-inventory {
            background: transparent;
            border: none;
            padding: 0;
            min-height: 0;
            height: auto;
            display: block;
            box-shadow: none;
            overflow: visible;
            width: fit-content;
            max-width: calc(100vw - 48px);
            margin: 0;
        }
        .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
        .vehicle-detail .detail-layout {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 0;
        }
        .vehicle-detail .detail-body {
            --detail-panel-width: 400px;
            --detail-column-gap: 14px;
            --detail-viewport-gutter: 48px;
            --detail-media-width: min(
                calc((100vh - 152px) * 4 / 3),
                calc(100vw - var(--detail-viewport-gutter) - var(--detail-panel-width) - var(--detail-column-gap))
            );
            position: relative;
            display: grid;
            grid-template-columns: var(--detail-media-width) var(--detail-panel-width);
            grid-template-rows: auto auto;
            column-gap: var(--detail-column-gap);
            row-gap: 10px;
            align-items: start;
            width: fit-content;
            max-width: calc(100vw - var(--detail-viewport-gutter));
        }
        .detail-media { position: sticky; top: 24px; min-width: 0; }
        .vehicle-detail .detail-hero {
            grid-column: 1;
            grid-row: 1;
            margin: 0;
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }
        .vehicle-detail .detail-thumbnails {
            grid-column: 1;
            grid-row: 2;
            margin-top: 0;
            width: 100%;
            max-width: 100%;
        }
        .detail-media-stack {
            display: flex;
            flex-direction: column;
            min-height: 0;
            min-width: 0;
            width: var(--detail-media-width);
            max-width: var(--detail-media-width);
            margin: 0;
            padding: 0;
            grid-column: 1;
            grid-row: 1 / -1;
        }
        .detail-hero { background: #f8fafc; border: 1px solid rgba(15,23,42,0.08); border-radius: var(--radius-md); overflow: hidden; position: relative; box-shadow: 0 12px 32px rgba(15,23,42,0.08); aspect-ratio: var(--detail-hero-aspect, 4/3); max-height: calc(100vh - 152px); }
        .detail-hero.no-image {
            background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
            border: 1px solid var(--border);
            box-shadow: 0 4px 20px rgba(15,23,42,0.05);
        }
        .detail-hero.no-image .vehicle-photo-placeholder {
            position: absolute;
            inset: 0;
            z-index: 1;
            font-size: 14px;
            color: #8a94a6;
        }
        .detail-hero img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: opacity 0.2s; display: block; }
        .vehicle-detail .back-button {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 6;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            width: fit-content;
            min-height: 34px;
            margin: 0;
            padding: 7px 10px;
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            background: var(--surface);
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
            color: var(--accent);
            cursor: pointer;
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.2;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
            white-space: nowrap;
        }
        .vehicle-detail .back-button:hover {
            background: var(--accent-light);
            border-color: #c7ddff;
        }
        .vehicle-detail .back-button:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }
        .vehicle-detail .back-button svg {
            width: 16px;
            height: 16px;
            flex: 0 0 auto;
        }
        .detail-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 8px; border: none; background: rgba(255,255,255,0.5); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.03); transition: all 0.2s; font-size: 20px; font-weight: 500; z-index: 2; touch-action: manipulation; user-select: none; }
        .detail-hero-nav:hover { background: rgba(255,255,255,0.7); color: var(--accent); transform: translateY(-50%) scale(1.02); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
        .detail-hero-nav.prev { left: 16px; }
        .detail-hero-nav.next { right: 16px; }
        @media (hover: hover) and (pointer: fine) {
            .card-photo-controls {
                opacity: 0;
            }
            .card-photo-control {
                pointer-events: none;
            }
            .card-image-placeholder:hover .card-photo-controls,
            .card-image-placeholder:focus-within .card-photo-controls {
                opacity: 1;
            }
            .card-image-placeholder:hover .card-photo-control,
            .card-image-placeholder:focus-within .card-photo-control {
                pointer-events: auto;
            }
        }
        @media (max-width: 900px) {
            .card-photo-controls,
            .detail-hero-nav,
            .vehicle-detail .back-button {
                display: none;
            }
        }
        .detail-thumbnails { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 8px; width: 100%; min-width: 0; }
        .vehicle-detail .detail-thumbnails { min-height: 53px; }
        .detail-media-stack .detail-hero { width: 100%; margin: 0; }
        .detail-thumbnails::-webkit-scrollbar { height: 4px; }
        .detail-thumbnails::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
        .detail-thumb { width: 60px; height: 45px; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s, opacity 0.2s; flex-shrink: 0; opacity: 0.6; }
        .detail-thumb:hover, .detail-thumb.active { opacity: 1; border-color: var(--accent); }
        .detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .detail-panel { padding: 0; }
        .vehicle-detail .detail-panel {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 14px;
            overflow-y: auto;
            overscroll-behavior: contain;
            height: calc(100vh - 40px);
            max-height: calc(100vh - 40px);
            grid-column: 2;
            grid-row: 1 / -1;
            align-self: start;
            margin: 0;
            width: var(--detail-panel-width);
            min-width: 0;
            box-sizing: border-box;
            box-shadow: 0 10px 28px rgba(15,23,42,0.08);
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }
        .vehicle-detail .detail-panel::-webkit-scrollbar { width: 8px; }
        .vehicle-detail .detail-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid var(--surface); }
        .detail-title { font-size: 22px; font-weight: 700; margin-bottom: 5px; line-height: 1.15; letter-spacing: 0; color: var(--text); }
        .detail-subtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.35; }
        .detail-dealer-label { color: var(--text); font-weight: 600; }
        .detail-subtitle-separator { color: var(--muted); }
        .vin-container.vin-glow .vin-clickable,
        .vin-prefix:hover { background-color: #e3f2fd; border-radius: 2px; }
        .vin-last8:hover { background-color: #e3f2fd; border-radius: 2px; }
        .vin-clickable { cursor: pointer; user-select: none; transition: background-color 0.2s; }
        .stock-clickable { cursor: pointer; user-select: none; transition: background-color 0.2s; }
        .stock-clickable:hover { background-color: #e3f2fd; border-radius: 2px; }
        .detail-stock-pill {
            color: var(--accent);
            font-weight: 700;
            border-radius: var(--radius-sm);
        }
        .detail-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
        .detail-tags .tag { font-size: 10px; padding: 4px 8px; font-weight: 650; }
        .detail-tags .detail-status-tag.in-transit-badge {
            position: static;
            transform: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: auto;
            height: auto;
            min-height: 0;
            box-shadow: none;
        }
        .detail-tags .detail-status-tag.sold-badge {
            background: #fef2f2;
            border-color: #fca5a5;
            color: #b91c1c;
            cursor: pointer;
        }
        .detail-tags .detail-status-tag.sold-badge:hover {
            background: #fee2e2;
            border-color: #f87171;
            color: #991b1b;
        }
        .detail-price-section { background: linear-gradient(180deg, #f8fafc 0%, #f3f6fa 100%); border-radius: var(--radius-md); padding: 12px; margin-bottom: 12px; border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.72); }
        .detail-price-breakdown { display: flex; flex-direction: column; gap: 5px; }
        .price-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 2px 0; }
        .price-label { font-size: 12px; color: #475569; }
        .price-value { font-size: 13px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
        .discount-line .price-label,
        .discount-line .price-value { color: #22c55e; } /* green for discounts */
        .discount-line.fee-line .price-label,
        .discount-line.fee-line .price-value { color: #475569; }
        .fee-line .price-label,
        .fee-line .price-value { color: #475569; }
        .discount-green { color: #22c55e; } /* same green as discounts */
        .card .vehicle-card-price,
        .card .vehicle-card-price strong { color: var(--vehicle-card-price-color); }
        .final-price { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
        .detail-price-breakdown.used-price-only .final-price,
        .detail-price-breakdown.single-price-only .final-price { margin-top: 0; padding-top: 0; border-top: 0; }
        .final-price .price-label { font-weight: 800; font-size: 13px; color: var(--text); }
        .final-price .price-value { font-weight: 850; font-size: 18px; color: var(--accent); }
        .detail-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
        .detail-cta button { min-width: 0; min-height: 40px; padding: 0 12px; border-radius: var(--radius-sm); border: none; font-size: 12px; font-weight: 750; line-height: 1.15; cursor: pointer; transition: background 0.2s, transform 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
        .detail-cta button:active { transform: scale(0.98); }
        .detail-cta button .carfax-logo { height: 20px; width: auto; min-width: 90px; max-width: 100%; vertical-align: middle; }
        .detail-cta .primary { background: var(--accent); color: #fff; }
        .detail-cta .primary:hover { background: var(--accent-hover); }
        .detail-cta .secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
        .detail-cta .secondary:hover { background: #f8f8f8; }
        .detail-cta #detail-contact { grid-column: 1 / -1; min-height: 44px; font-size: 13px; }
        /* Vehicle detail opens as one stable shell, then reveals all primary content together. */
        .vehicle-detail.is-loading .detail-hero {
            background: #e9eef5;
        }
        .vehicle-detail.is-loading .detail-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.72) 48%, transparent 100%);
            transform: translateX(-100%);
            animation: shimmer 1.45s var(--ease-out) infinite;
        }
        .vehicle-detail.is-loading .detail-hero img,
        .vehicle-detail.is-loading .detail-bookmark-button,
        .vehicle-detail.is-loading .detail-hero-nav,
        .vehicle-detail.is-loading .detail-thumbnails {
            visibility: hidden;
        }
        .vehicle-detail.is-loading .detail-title,
        .vehicle-detail.is-loading .detail-subtitle,
        .vehicle-detail.is-loading .detail-tags::before,
        .vehicle-detail.is-loading .price-label,
        .vehicle-detail.is-loading .price-value,
        .vehicle-detail.is-loading .detail-cta button {
            color: transparent !important;
            border-color: transparent !important;
            background: #e9eef5 !important;
            box-shadow: none !important;
        }
        .vehicle-detail.is-loading .detail-title {
            width: 76%;
            height: 25px;
            border-radius: 6px;
            overflow: hidden;
        }
        .vehicle-detail.is-loading .detail-subtitle {
            width: 58%;
            height: 14px;
            border-radius: 5px;
            margin: 8px 0 12px;
            background: #e9eef5;
        }
        .vehicle-detail.is-loading .detail-tags {
            min-height: 24px;
        }
        .vehicle-detail.is-loading .detail-tags::before {
            content: '';
            display: block;
            width: 46%;
            height: 22px;
            border-radius: 999px;
        }
        .vehicle-detail.is-loading .price-line {
            display: flex !important;
        }
        .vehicle-detail.is-loading .price-label,
        .vehicle-detail.is-loading .price-value {
            display: block;
            height: 12px;
            border-radius: 4px;
        }
        .vehicle-detail.is-loading .price-label { width: 34%; }
        .vehicle-detail.is-loading .price-value { width: 24%; }
        .vehicle-detail.is-loading .final-price .price-label,
        .vehicle-detail.is-loading .final-price .price-value { height: 17px; }
        .vehicle-detail.is-loading .detail-cta {
            min-height: 92px;
            pointer-events: none;
        }
        .vehicle-detail.is-loading .detail-cta #detail-contact,
        .vehicle-detail.is-loading .detail-cta #detail-sticker,
        .vehicle-detail.is-loading .detail-cta #detail-invoice {
            display: inline-flex !important;
        }
        .vehicle-detail.is-loading .detail-cta #detail-carfax {
            display: none !important;
        }
        .vehicle-detail.is-loading .detail-cta button::before {
            content: '';
            width: 54%;
            height: 11px;
            border-radius: 4px;
            background: rgba(255,255,255,.5);
        }
        .vehicle-detail.is-loading .detail-content-grid {
            opacity: .82;
        }
        .detail-content-grid { display: flex; flex-direction: column; gap: 0; }
        .detail-module {
            padding-top: 12px;
            margin-top: 12px;
            border-top: 1px solid var(--border);
        }
        .detail-module-title,
        .detail-equipment-title,
        .detail-towing-title,
        .detail-price-history-title {
            font-size: 11px;
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #475569;
        }
        .detail-module-title { margin-bottom: 8px; }
        .detail-equipment { background: transparent; border-radius: 0; padding-bottom: 0; margin-bottom: 0; border: 0; box-shadow: none; }
        .detail-equipment-title { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
        .detail-equipment-title svg { width: 14px; height: 14px; transition: transform 0.2s; }
        .detail-equipment-title.collapsed svg { transform: rotate(-90deg); }
        .detail-equipment-list { display: flex; flex-direction: column; gap: 4px; }
        .detail-equipment-list.collapsed { display: none; }
        .detail-equipment.is-loading,
        .detail-location.is-loading,
        .detail-towing.is-loading,
        .detail-price-history.is-loading {
            min-height: 116px;
        }
        .detail-location.is-loading .detail-location-map,
        .detail-price-history.is-loading .detail-price-history-canvas-wrap {
            position: relative;
            overflow: hidden;
            background: #edf0f4;
        }
        .detail-location.is-loading .detail-location-map::after,
        .detail-price-history.is-loading .detail-price-history-canvas-wrap::after {
            content: '';
            position: absolute;
            inset: 0;
            transform: translateX(-100%);
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
            animation: shimmer 1.25s infinite;
        }
        .detail-panel-skeleton {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .detail-skeleton-line {
            position: relative;
            overflow: hidden;
            display: block;
            height: 12px;
            border-radius: var(--radius-sm);
            background: #edf0f4;
        }
        .detail-skeleton-line::after {
            content: '';
            position: absolute;
            inset: 0;
            transform: translateX(-100%);
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
            animation: shimmer 1.25s infinite;
        }
        .detail-panel-skeleton .detail-skeleton-line:nth-child(1) { width: 86%; }
        .detail-panel-skeleton .detail-skeleton-line:nth-child(2) { width: 68%; }
        .detail-panel-skeleton .detail-skeleton-line:nth-child(3) { width: 76%; }
        .detail-panel-skeleton .detail-skeleton-line:nth-child(4) { width: 54%; }
        .detail-panel-skeleton .detail-skeleton-line:nth-child(5) { width: 72%; }
        .detail-equipment-item {
            font-size: 12px;
            color: var(--muted);
            padding: 5px 0;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }
        .detail-equipment-item-desc { flex: 1; min-width: 0; }
        .detail-equipment-item-cost {
            flex: 0 0 auto;
            text-align: right;
            white-space: nowrap;
            color: #4b5563;
            font-variant-numeric: tabular-nums;
        }
        .detail-equipment-item:last-child { border-bottom: none; }
        .detail-location { background: transparent; border-radius: 0; padding-bottom: 0; margin-bottom: 0; border: 0; box-shadow: none; }
        .detail-location-map { position: relative; width: 100%; height: 220px; border-radius: var(--radius-sm); background: #f5f5f5; margin-bottom: 4px; overflow: hidden; border: 1px solid #e5ebf2; }
        .detail-location-pending {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 20px;
            color: #475569;
            background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
            font-size: 13px;
            font-weight: 650;
            line-height: 1.25;
            text-align: center;
        }
        .detail-location-update {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1001;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-width: 74px;
            height: 32px;
            padding: 0 12px;
            border: 1px solid rgba(15,23,42,0.14);
            border-radius: 6px;
            background: rgba(255,255,255,0.94);
            color: var(--text);
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            box-shadow: 0 8px 18px rgba(15,23,42,0.16);
            cursor: pointer;
        }
        .detail-location-update:hover { border-color: rgba(37,99,235,0.35); color: var(--accent); }
        .detail-location-update:disabled { cursor: wait; opacity: 0.86; }
        .detail-location-update.is-success { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
        .detail-location-ring {
            position: absolute;
            top: 50px;
            right: 10px;
            z-index: 1001;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-width: 112px;
            height: 38px;
            padding: 0 16px;
            border: 1px solid rgba(20,184,166,0.28);
            border-radius: 8px;
            background: rgba(240,253,250,0.96);
            color: #0f766e;
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            box-shadow: 0 10px 22px rgba(15,23,42,0.18);
            cursor: pointer;
        }
        .detail-location-ring.is-primary-action {
            top: 10px;
        }
        .detail-location-ring:hover { border-color: rgba(13,148,136,0.45); color: #0f5f59; background: #fff; }
        .detail-location-ring:disabled { cursor: default; opacity: 0.88; }
        .detail-location-ring.is-error { color: #b91c1c; border-color: #fecaca; background: #fff7f7; }
        .detail-location-ring.is-success { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
        .detail-location-ring.is-disabled { color: #64748b; border-color: #e2e8f0; background: rgba(248,250,252,0.96); }
        .detail-location-update-spinner {
            display: inline-block;
            width: 11px;
            height: 11px;
            box-sizing: border-box;
            border-radius: 999px;
            border: 2px solid rgba(37,99,235,0.22);
            border-top-color: var(--accent);
            animation: spin 0.7s linear infinite;
            flex: 0 0 auto;
        }
        .detail-location-update.is-error { color: #b91c1c; border-color: #fecaca; }
        .leaflet-container .leaflet-control-zoom.leaflet-bar {
            display: grid;
            gap: 0;
            margin: 10px 0 0 10px;
            border: 1px solid rgba(15,23,42,0.14);
            border-radius: 10px;
            background: rgba(255,255,255,0.94);
            box-shadow: 0 10px 22px rgba(15,23,42,0.16);
            overflow: hidden;
            backdrop-filter: blur(8px);
        }
        .leaflet-container .leaflet-control-zoom.leaflet-bar a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 34px;
            box-sizing: border-box;
            border: 0;
            border-radius: 0 !important;
            background: transparent;
            color: var(--text);
            font-family: var(--ff-font-sans);
            font-size: 21px;
            font-weight: 750;
            line-height: 1;
            text-indent: 0;
            box-shadow: none;
            transition: background var(--duration-fast) var(--ease-snappy), color var(--duration-fast) var(--ease-snappy);
        }
        .leaflet-container .leaflet-control-zoom.leaflet-bar a:first-child,
        .leaflet-container .leaflet-control-zoom.leaflet-bar a:last-child {
            border-radius: 0 !important;
        }
        .leaflet-container .leaflet-control-zoom.leaflet-bar a + a {
            border-top: 1px solid rgba(15,23,42,0.11);
        }
        .leaflet-container .leaflet-control-zoom.leaflet-bar a:hover,
        .leaflet-container .leaflet-control-zoom.leaflet-bar a:focus {
            background: rgba(0,112,243,0.08);
            color: var(--accent);
        }
        .leaflet-container .leaflet-control-zoom.leaflet-bar a.leaflet-disabled {
            color: #94a3b8;
            background: rgba(248,250,252,0.64);
            box-shadow: none;
        }
        .dealer-map-marker-icon,
        .recovr-key-marker-icon {
            background: transparent;
            border: none;
        }
        .recovr-key-marker {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            padding: 0;
            border-radius: 999px;
            transform: translateZ(0);
            transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
        }
        .detail-location-map .detail-vehicle-marker {
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
        }
        .detail-location-map .detail-vehicle-marker .dealer-map-marker-dot {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-width: 2px;
            box-sizing: border-box;
            box-shadow: 0 0 0 6px rgba(0, 112, 243, 0.14), 0 5px 14px rgba(17, 24, 39, 0.24);
        }
        .detail-location-map .detail-vehicle-marker .dealer-map-marker-dot::after {
            content: "";
            width: 18px;
            height: 18px;
            background: #ffffff;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.5-4.5A2 2 0 0 1 8.4 5h7.2a2 2 0 0 1 1.9 1.5L19 11h1a1 1 0 0 1 1 1v6h-2v-2H5v2H3v-6a1 1 0 0 1 1-1h1Zm3.2-4-1.1 4h9.8l-1.1-4H8.2ZM7 14.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm10 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.5-4.5A2 2 0 0 1 8.4 5h7.2a2 2 0 0 1 1.9 1.5L19 11h1a1 1 0 0 1 1 1v6h-2v-2H5v2H3v-6a1 1 0 0 1 1-1h1Zm3.2-4-1.1 4h9.8l-1.1-4H8.2ZM7 14.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm10 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E") center / contain no-repeat;
        }
        .detail-vehicle-marker-icon:hover,
        .detail-vehicle-marker-icon:focus-visible,
        .detail-vehicle-marker-icon.leaflet-tooltip-open {
            z-index: 10 !important;
        }
        .detail-vehicle-marker-icon:hover .dealer-map-marker-dot,
        .detail-vehicle-marker-icon:focus-visible .dealer-map-marker-dot,
        .detail-vehicle-marker-icon.leaflet-tooltip-open .dealer-map-marker-dot {
            transform: translate(-50%, -50%) scale(1.16);
            box-shadow: 0 0 0 8px rgba(0, 112, 243, 0.2), 0 7px 18px rgba(17, 24, 39, 0.28);
        }
        .recovr-key-marker {
            border: 2px solid #ffffff;
            background: var(--accent);
            color: #ffffff;
            box-shadow: 0 8px 18px rgba(0,112,243,0.28), 0 0 0 1px rgba(0,112,243,0.22);
        }
        .recovr-key-marker-icon:hover .recovr-key-marker,
        .recovr-key-marker-icon.leaflet-tooltip-open .recovr-key-marker {
            transform: scale(1.14);
            box-shadow: 0 10px 24px rgba(0,112,243,0.34), 0 0 0 7px var(--accent-ring);
        }
        .recovr-key-marker-glyph {
            width: 18px;
            height: 18px;
            display: block;
            background: currentColor;
            -webkit-mask: url('/assets/icons/recovr-key.svg') center / contain no-repeat;
            mask: url('/assets/icons/recovr-key.svg') center / contain no-repeat;
        }
        .detail-location-map .leaflet-tooltip.detail-location-marker-label {
            padding: 0;
            border: 1px solid rgba(15, 23, 42, 0.12);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.96);
            color: #1d1d1f;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
            pointer-events: none;
        }
        .detail-location-map .leaflet-marker-pane {
            z-index: 650;
        }
        .detail-location-map .leaflet-tooltip-pane {
            z-index: 690;
        }
        .detail-location-label-layer {
            position: absolute;
            inset: 0;
            z-index: 690;
            pointer-events: none;
        }
        .detail-location-map .detail-location-floating-label {
            position: absolute;
            left: 0;
            top: 0;
            color: #1d1d1f;
            pointer-events: none;
            overflow: visible;
            will-change: transform;
            filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.14));
        }
        .detail-location-map .detail-location-floating-label .detail-location-marker-label-content {
            position: relative;
            z-index: 1;
            box-sizing: border-box;
            min-width: 104px;
            max-width: min(172px, calc(100vw - 48px));
            border: 1px solid rgba(15, 23, 42, 0.11);
            border-radius: 9px;
            background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
        }
        .detail-location-map .detail-location-marker-label-vehicle .detail-location-marker-label-content {
            border-color: rgba(0, 112, 243, 0.18);
        }
        .detail-location-map .detail-location-marker-label-key .detail-location-marker-label-content {
            border-color: rgba(13, 148, 136, 0.2);
        }
        .detail-location-marker-label-leader {
            position: absolute;
            left: 0;
            top: 0;
            width: var(--leader-width, 0);
            height: 2px;
            border-radius: 999px;
            background: rgba(71, 85, 105, 0.28);
            transform: translate(var(--leader-x, 0), var(--leader-y, 0)) rotate(var(--leader-angle, 0deg));
            transform-origin: left center;
        }
        .detail-location-map .detail-location-marker-label-key .detail-location-marker-label-leader {
            background: rgba(13, 148, 136, 0.35);
        }
        .detail-location-map .detail-location-marker-label-vehicle .detail-location-marker-label-leader {
            background: rgba(0, 112, 243, 0.32);
        }
        .detail-location-map .leaflet-tooltip.detail-location-marker-label::before {
            border-right-color: rgba(255, 255, 255, 0.96);
        }
        .detail-location-map .leaflet-tooltip-left.detail-location-marker-label::before {
            border-left-color: rgba(255, 255, 255, 0.96);
        }
        .detail-location-marker-label-content {
            display: grid;
            gap: 1px;
            min-width: 96px;
            max-width: 168px;
            padding: 7px 9px;
            line-height: 1.2;
            text-align: left;
            white-space: normal;
        }
        .detail-location-marker-label-primary {
            color: #111827;
            font-size: 12px;
            font-weight: 750;
            letter-spacing: 0;
        }
        .detail-location-marker-label-meta {
            color: #64748b;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0;
        }
        .detail-location-timestamp {
            margin: 6px 8px 4px;
            display: grid;
            gap: 5px;
            color: #86868b;
            font-size: 11px;
            font-weight: 400;
            line-height: 1.35;
            letter-spacing: 0;
            text-align: center;
            text-wrap: balance;
        }
        .detail-location-caption-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1px;
            min-width: 0;
        }
        .detail-location-caption-primary {
            color: #1d1d1f;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.3;
        }
        .detail-location-caption-meta {
            color: #86868b;
            font-size: 11px;
            font-weight: 400;
            line-height: 1.3;
        }
        .detail-towing { background: transparent; border-radius: 0; padding-bottom: 0; margin-bottom: 0; border: 0; box-shadow: none; }
        .detail-towing-title { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
        .detail-towing-subtitle { font-size: 11px; color: var(--muted); margin-top: -4px; margin-bottom: 10px; line-height: 1.35; }
        .detail-towing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
        .detail-towing-item { display: flex; flex-direction: column; gap: 2px; }
        .detail-towing-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
        .detail-towing-value { font-size: 12px; font-weight: 500; color: var(--text); }
        .detail-tow-badges { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
        .detail-tow-badge { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 10px; border-radius: var(--radius-sm); border: 1px solid #c7ddff; background: var(--accent-light); }
        .detail-tow-badge .tow-mode { font-size: 12px; font-weight: 600; color: var(--text); }
        .detail-tow-badge .tow-value { font-size: 14px; font-weight: 700; color: var(--text); }
        .detail-tow-badge .tow-page { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 8px; }
        @media (max-width: 600px) { .detail-towing-grid { grid-template-columns: 1fr; } }
        .detail-price-history { background: transparent; border-radius: 0; padding-bottom: 0; margin-bottom: 0; }
        .detail-price-history-title { margin-bottom: 8px; }
        .detail-price-history-canvas-wrap {
            position: relative;
            width: 100%;
            height: 188px;
            border-radius: 9px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)),
                radial-gradient(circle at 82% 20%, rgba(0,112,243,0.08), transparent 36%);
            overflow: visible;
        }
        .detail-price-history canvas {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 9px;
            touch-action: pan-y;
        }
        .detail-price-history-tooltip {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 3;
            min-width: 118px;
            max-width: min(178px, calc(100vw - 52px));
            box-sizing: border-box;
            padding: 8px 10px;
            border: 1px solid rgba(15, 23, 42, 0.11);
            border-radius: 9px;
            background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
            color: var(--text);
            box-shadow: 0 12px 28px rgba(15,23,42,0.18);
            pointer-events: none;
            line-height: 1.2;
            will-change: transform;
        }
        .detail-price-history-tooltip[hidden] {
            display: none;
        }
        .detail-price-history-tooltip-date {
            color: #475569;
            font-size: 10.5px;
            font-weight: 650;
            letter-spacing: 0;
            white-space: nowrap;
        }
        .detail-price-history-tooltip-price {
            margin-top: 2px;
            color: #0f172a;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: 0;
            white-space: nowrap;
        }
        .detail-price-history-tooltip-delta {
            margin-top: 3px;
            color: #64748b;
            font-size: 10.5px;
            font-weight: 650;
            letter-spacing: 0;
            white-space: nowrap;
        }
        .detail-price-history-tooltip-delta.is-down {
            color: #16a34a;
        }
        .detail-price-history-tooltip-delta.is-up {
            color: #b45309;
        }
        .detail-price-history-meta {
            font-size: 10px;
            color: var(--muted);
            margin-top: 6px;
            text-align: center;
        }
        /* Make Leaflet attribution smaller and less intrusive */
        .leaflet-control-attribution { font-size: 8px !important; background: rgba(255,255,255,0.7) !important; padding: 2px 4px !important; }
        @media (max-width: 1000px) {
            .vehicle-detail.active {
                display: block !important;
                position: fixed;
                inset: 0;
                height: 100vh;
                height: 100dvh;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            html.vehicle-detail-open,
            body.vehicle-detail-open { overflow: hidden; }
            .vehicle-detail .vehicle-detail-main {
                flex: none;
                overflow: visible;
                display: block;
                width: 100%;
                max-width: 100%;
                min-height: min-content;
                height: auto;
                padding: 12px 16px 24px;
                box-sizing: border-box;
            }
            .vehicle-detail .vehicle-detail-main .inventory,
            .vehicle-detail .vehicle-detail-inventory {
                width: 100%;
                max-width: 100%;
                height: auto;
                overflow: visible;
            }
            .detail-layout { grid-template-columns: 1fr; gap: 24px; }
            .vehicle-detail .detail-layout {
                display: block;
                width: 100%;
                max-width: 100%;
                height: auto;
                overflow: visible;
            }
            .vehicle-detail .detail-body {
                display: flex;
                flex-direction: column;
                gap: 12px;
                width: 100%;
                max-width: 100%;
                height: auto;
                overflow: visible;
            }
            .vehicle-detail .detail-media-stack {
                width: 100%;
                max-width: 100%;
            }
            .vehicle-detail .detail-hero {
                width: 100%;
                max-width: 100%;
            }
            .vehicle-detail .detail-thumbnails {
                width: 100%;
                max-width: 100%;
            }
            .vehicle-detail .detail-panel {
                width: 100%;
                max-width: 100%;
                height: auto;
                max-height: none;
                overflow: visible;
                min-height: 0;
                box-sizing: border-box;
            }
        }
        @media (max-width: 600px) {
            .detail-hero { aspect-ratio: 4/3; max-height: 40vh; }
            .detail-price-section {
                margin-bottom: 10px;
            }
            .detail-cta {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                column-gap: 8px;
                row-gap: 10px;
                margin-bottom: 10px;
            }
            .detail-cta button {
                width: 100%;
                min-width: 0;
                min-height: 44px;
                padding: 0 12px;
                border-radius: 10px;
                font-size: 14px;
                font-weight: 600;
                line-height: 1.15;
            }
            .detail-cta #detail-contact {
                grid-column: 1 / -1;
                min-height: 48px;
            }
            .detail-cta.secondary-count-1 .secondary,
            .detail-cta.secondary-count-3 #detail-carfax {
                grid-column: 1 / -1;
            }
        }
        /* Page transitions */
        .page-content { transition: opacity 0.15s ease-out; }
        .page-content.fade-out { opacity: 0; }
        .scroll-sentinel { height: 1px; grid-column: 1 / -1; }
        .load-more { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 72px; padding: 20px; grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
        .load-more-label { opacity: .8; }
        .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        /* Homepage model cards */
        .homepage-main .inventory { max-width: 1280px; width: 100%; margin: 0 auto; }
        .homepage-main .cards-grid { display: block; }
        .homepage-main .loading { display: flex; align-items: center; justify-content: center; gap: 12px; }
        .homepage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
        .homepage-grid.model-selector-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
        .console-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
        .console-page-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--text); line-height: 1.2; }
        .console-page-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--muted); font-weight: 400; }
        .console-panel {
            background: rgba(255,255,255,0.98);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-xs);
        }
        .console-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 16px;
            background: linear-gradient(180deg, #ffffff 0%, var(--panel-header-bg) 100%);
            border-bottom: 1px solid var(--border);
            min-height: 44px;
        }
        .console-panel-title {
            margin: 0;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #475569;
        }
        .console-panel-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
        .dealer-map-card, .dealer-list-card {
            background: rgba(255,255,255,0.98);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            box-shadow: none;
            overflow: hidden;
        }
        .dealer-map-card { padding: 0; height: clamp(360px, 48vh, 500px); min-height: 0; display: flex; flex-direction: column; }
        .dealer-map-card .console-panel-header { flex-shrink: 0; }
        .dealer-map-card .california-map { flex: 1; min-height: 0; }
        .dealer-map-reset {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 28px;
            min-width: 44px;
            padding: 0 10px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--muted);
            font: inherit;
            font-size: 12px;
            font-weight: 650;
            cursor: pointer;
        }
        .dealer-map-reset:hover,
        .dealer-map-reset:focus-visible {
            border-color: var(--border-strong);
            color: var(--text);
            background: var(--surface-hover);
            outline: none;
        }
        .dealer-list-card {
            padding: 0;
            height: clamp(360px, 48vh, 500px);
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
            background: var(--surface);
        }
        .dealer-list-card .console-panel-header { flex-shrink: 0; }
        .dealer-list-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 8px;
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
        }
        .california-map { width: 100%; height: 100%; min-height: 0; background: var(--surface-muted); }
        .california-map .leaflet-tile-pane { filter: saturate(0.5) contrast(0.94) brightness(1.03); }
        .california-map .leaflet-control-attribution { font-size: 10px; }
        .inventory-trends-modal {
            width: min(980px, 96vw);
            max-height: 88vh;
        }
        .inventory-trends-modal .status-list-body { padding: 12px 16px 16px; }
        .inventory-trends-content {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow: auto;
        }
        .inventory-trends-content.hidden { display: none; }
        .inventory-trends-loading.hidden { display: none; }
        .inventory-trends-loading {
            padding: 24px 0;
            text-align: center;
            color: var(--muted);
            font-size: 13px;
        }
        .inventory-trends-meta {
            font-size: 12px;
            color: var(--muted);
            padding: 0 2px 2px;
        }
        .inventory-trends-controls {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            align-self: flex-start;
            padding: 3px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface-muted);
        }
        .inventory-trends-interval-btn {
            min-height: 28px;
            padding: 4px 10px;
            border: 0;
            border-radius: var(--radius-sm);
            background: transparent;
            color: var(--muted);
            font: inherit;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }
        .inventory-trends-interval-btn:hover,
        .inventory-trends-interval-btn:focus-visible {
            color: var(--text);
            background: var(--surface);
        }
        .inventory-trends-interval-btn.is-active {
            color: #fff;
            background: var(--accent);
        }
        .inventory-trends-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }
        .inventory-trend-card {
            border: 1px solid var(--border);
            border-radius: var(--radius-md, 8px);
            padding: 10px 12px 8px;
            background: var(--surface);
        }
        .inventory-trend-card-selected {
            padding: 14px 16px 12px;
        }
        .inventory-trend-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
        }
        .inventory-trend-model {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
        }
        .inventory-trend-current {
            font-size: 16px;
            font-weight: 700;
            color: var(--text);
        }
        .inventory-trend-subhead {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 11px;
            color: var(--muted);
            margin-top: 2px;
        }
        .inventory-trend-delta.is-up { color: #16a34a; }
        .inventory-trend-delta.is-down { color: #dc2626; }
        .inventory-trend-delta.is-flat { color: var(--muted); }
        .inventory-trend-canvas-wrap {
            margin-top: 6px;
        }
        .inventory-trend-card-selected .inventory-trend-canvas-wrap {
            margin-top: 10px;
        }
        .inventory-trend-canvas-wrap canvas {
            display: block;
            width: 100%;
        }
        .inventory-trends-empty {
            margin: 12px 0;
            text-align: center;
            color: var(--muted);
            font-size: 13px;
        }
        @media (max-width: 820px) {
            .inventory-trends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 560px) {
            .inventory-trends-grid { grid-template-columns: 1fr; }
        }
        .leaflet-div-icon.dealer-map-marker-icon { background: transparent; border: none; }
        .dealer-map-marker {
            position: absolute;
            left: 0;
            top: 0;
            --dealer-region-color: var(--accent);
            --label-x: 18px;
            --label-y: -34px;
            --leader-x: 10px;
            --leader-y: -18px;
            --leader-rotate: -34deg;
            --leader-width: 22px;
            width: 14px;
            height: 14px;
            transform: translate(-50%, -50%);
            pointer-events: auto;
            cursor: pointer;
            z-index: 1;
            transition: opacity var(--duration-fast) var(--ease-snappy);
        }
        .dealer-map-marker-dot {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--dealer-region-color);
            border: 2px solid var(--surface);
            box-shadow: 0 0 0 5px color-mix(in srgb, var(--dealer-region-color) 16%, transparent), 0 2px 7px rgba(17, 24, 39, 0.24);
            transform: translate(-50%, -50%);
            transition: transform var(--duration-fast) var(--ease-snappy), box-shadow var(--duration-fast) var(--ease-snappy);
            z-index: 2;
        }
        .dealer-map-marker-label {
            position: absolute;
            left: 50%;
            top: 50%;
            min-width: max-content;
            max-width: 168px;
            transform: translate(var(--label-x), var(--label-y));
            border: 1px solid rgba(209, 213, 219, 0.92);
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.96);
            color: var(--text);
            font-weight: 650;
            font-size: 11px;
            letter-spacing: 0;
            line-height: 1.15;
            padding: 5px 8px 5px;
            box-shadow: 0 6px 18px rgba(17, 24, 39, 0.11);
            white-space: normal;
            text-align: left;
            opacity: 0;
            pointer-events: none;
            transition: border-color var(--duration-fast) var(--ease-snappy), background var(--duration-fast) var(--ease-snappy), box-shadow var(--duration-fast) var(--ease-snappy), transform var(--duration-fast) var(--ease-snappy);
            z-index: 3;
        }
        .dealer-map-marker-location {
            display: block;
            margin-top: 3px;
            color: var(--muted);
            font-size: 10px;
            font-weight: 600;
        }
        .dealer-map-marker-leader {
            position: absolute;
            left: 50%;
            top: 50%;
            width: var(--leader-width);
            height: 1px;
            background: rgba(107, 114, 128, 0.48);
            transform: translate(var(--leader-x), var(--leader-y)) rotate(var(--leader-rotate));
            transform-origin: left center;
            opacity: 0;
            pointer-events: none;
            z-index: 1;
        }
        .dealer-map-marker[data-label-placement="e"] { --label-x: 18px; --label-y: -13px; --leader-x: 7px; --leader-y: -2px; --leader-rotate: 0deg; --leader-width: 15px; }
        .dealer-map-marker[data-label-placement="w"] { --label-x: calc(-100% - 20px); --label-y: -13px; --leader-x: -7px; --leader-y: -2px; --leader-rotate: 180deg; --leader-width: 17px; }
        .dealer-map-marker[data-label-placement="ne"] { --label-x: 15px; --label-y: -44px; --leader-x: 7px; --leader-y: -8px; --leader-rotate: -38deg; --leader-width: 25px; }
        .dealer-map-marker[data-label-placement="nw"] { --label-x: calc(-100% - 17px); --label-y: -44px; --leader-x: -6px; --leader-y: -8px; --leader-rotate: 218deg; --leader-width: 25px; }
        .dealer-map-marker[data-label-placement="se"] { --label-x: 16px; --label-y: 14px; --leader-x: 7px; --leader-y: 6px; --leader-rotate: 34deg; --leader-width: 23px; }
        .dealer-map-marker[data-label-placement="sw"] { --label-x: calc(-100% - 17px); --label-y: 14px; --leader-x: -6px; --leader-y: 6px; --leader-rotate: 146deg; --leader-width: 23px; }
        .dealer-map-marker[data-label-placement="s"] { --label-x: -50%; --label-y: 17px; --leader-x: 0px; --leader-y: 7px; --leader-rotate: 90deg; --leader-width: 12px; }
        .dealer-map-marker-fairfield { --label-y: -17px; }
        .dealer-map-marker-dupratt_dixon { --label-y: -16px; }
        .dealer-map-marker-concord_ford { --label-y: -31px; }
        .dealer-map-marker-walnut_creek_ford { --label-y: 9px; }
        .dealer-map-marker-downtown_ford { --label-y: -33px; }
        .dealer-map-marker-elk_grove_ford { --label-y: 17px; }
        .dealer-map-marker-big_valley_ford { --label-y: 21px; }
        .dealer-map-marker-livermore_ford { --label-x: -42%; --label-y: 18px; }
        .dealer-map-marker-morgan_hill_ford { --label-x: -46%; --label-y: 18px; }
        .dealer-map-marker:hover,
        .dealer-map-marker:focus-within { z-index: 10; }
        .dealer-map-marker:hover .dealer-map-marker-dot,
        .dealer-map-marker:focus-within .dealer-map-marker-dot {
            transform: translate(-50%, -50%) scale(1.16);
            box-shadow: 0 0 0 6px color-mix(in srgb, var(--dealer-region-color) 24%, transparent), 0 4px 12px rgba(17, 24, 39, 0.28);
        }
        .dealer-map-marker:hover .dealer-map-marker-label,
        .dealer-map-marker:focus-within .dealer-map-marker-label {
            opacity: 1;
            border-color: color-mix(in srgb, var(--dealer-region-color) 52%, #ffffff);
            background: #fff;
            box-shadow: 0 10px 26px rgba(17, 24, 39, 0.16);
        }
        .dealer-map-marker:hover .dealer-map-marker-leader,
        .dealer-map-marker:focus-within .dealer-map-marker-leader {
            opacity: 1;
        }
        .california-map.has-active-region .dealer-map-marker:not(.is-active-region) {
            opacity: 0.28;
        }
        .california-map.has-active-region .dealer-map-marker.is-active-region .dealer-map-marker-dot {
            transform: translate(-50%, -50%) scale(1.12);
            box-shadow: 0 0 0 7px color-mix(in srgb, var(--dealer-region-color) 24%, transparent), 0 4px 12px rgba(17, 24, 39, 0.26);
        }
        @media (max-width: 700px) {
            .dealer-map-marker-label,
            .dealer-map-marker-leader {
                pointer-events: none;
            }
            .dealer-map-marker-label {
                max-width: 150px;
                transform: translate(-50%, -42px);
                text-align: center;
            }
            .dealer-map-marker:hover .dealer-map-marker-label,
            .dealer-map-marker:focus-within .dealer-map-marker-label,
            .dealer-map-marker:hover .dealer-map-marker-leader,
            .dealer-map-marker:focus-within .dealer-map-marker-leader {
                opacity: 1;
            }
        }
        .dealer-pin { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(62,106,225,0.28); background: rgba(255,255,255,0.96); color: var(--text); border-radius: 999px; padding: 9px 12px 9px 10px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 12px 26px rgba(16,24,40,0.12); transition: transform 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out; }
        .dealer-pin:hover, .dealer-pin:focus-visible { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 16px 34px rgba(62,106,225,0.18); outline: none; }
        .dealer-pin::before { content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 5px rgba(62,106,225,0.14); }
        .dealer-pin.fairfield { left: 46%; top: 38%; }
        .dealer-pin.dupratt { left: 42%; top: 46%; }
        .dealer-region {
            --region-color: var(--accent);
            border-bottom: 1px solid var(--border);
            background: var(--surface);
        }
        .dealer-region:last-child { border-bottom: none; }
        .statewide-dealer-key {
            display: grid;
            grid-template-columns: 8px minmax(0, 1fr);
            align-items: center;
            gap: 9px;
            min-height: 54px;
            padding: 9px 10px;
            border-top: 1px solid var(--border);
            background: var(--surface);
        }
        .statewide-dealer-key .dealer-region-heading {
            align-items: flex-start;
            flex-direction: column;
            gap: 2px;
        }
        .dealer-region[open] {
            background: #fff;
        }
        .dealer-region.is-map-active {
            box-shadow: inset 3px 0 0 var(--region-color);
        }
        .dealer-region-summary {
            list-style: none;
            display: grid;
            grid-template-columns: 8px minmax(0, 1fr) auto 10px;
            align-items: center;
            gap: 9px;
            min-height: 42px;
            padding: 8px 10px;
            cursor: pointer;
            color: var(--text);
        }
        .dealer-region-summary::-webkit-details-marker { display: none; }
        .dealer-region-summary::after {
            content: '';
            width: 6px;
            height: 6px;
            border-right: 1.5px solid var(--muted);
            border-bottom: 1.5px solid var(--muted);
            transform: rotate(45deg) translateY(-1px);
            transition: transform var(--duration-fast) var(--ease-snappy);
        }
        .dealer-region[open] .dealer-region-summary::after {
            transform: rotate(225deg) translateY(-1px);
        }
        .dealer-region-summary:hover,
        .dealer-region-summary:focus-visible {
            background: var(--surface-hover);
            outline: none;
        }
        .dealer-region-swatch {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--region-color);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--region-color) 14%, transparent);
        }
        .dealer-region-heading {
            display: flex;
            min-width: 0;
            align-items: baseline;
            gap: 8px;
        }
        .dealer-region-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 13px;
            font-weight: 700;
            color: var(--text);
        }
        .dealer-region-stores {
            flex: 0 0 auto;
            font-size: 11px;
            color: var(--muted);
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }
        .dealer-region-count.filter-option-count {
            min-width: 4ch;
            text-align: right;
            font-size: 12px;
            font-weight: 700;
            color: var(--text);
        }
        .dealer-region-list {
            display: grid;
            gap: 2px;
            padding: 0 6px 7px 27px;
        }
        .dealer-card-button {
            width: 100%;
            text-align: left;
            border: none;
            background: transparent;
            border-radius: 6px;
            padding: 7px 8px;
            cursor: pointer;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            min-height: 32px;
            transition: background var(--duration-fast) var(--ease-snappy);
        }
        .dealer-card-button:hover, .dealer-card-button:focus-visible {
            background: var(--surface-hover);
            outline: none;
        }
        .dealer-card-name {
            font-weight: 650;
            font-size: 12px;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 7px;
            min-width: 0;
            line-height: 1.2;
        }
        .dealer-card-name::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--region-color, #22c55e);
            flex: 0 0 auto;
        }
        .dealer-card-button > .filter-option-count {
            font-size: 12px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: var(--text);
            margin-left: 0;
            min-width: 3ch;
            text-align: right;
        }
        .dealer-card-button:hover > .filter-option-count,
        .dealer-card-button:focus-visible > .filter-option-count {
            color: var(--accent);
        }
        .dealer-card-note { color: var(--muted); font-size: 12px; }
        .dealer-inventory-heading { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
        .dealer-inventory-heading h2 { margin: 0; font-size: 28px; letter-spacing: -0.03em; }
        .dealer-inventory-heading p { margin: 4px 0 0; color: var(--muted); }
        .dealer-back-button { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 9px 13px; cursor: pointer; font: inherit; font-weight: 650; }
        .dealer-back-button:hover { border-color: var(--accent); color: var(--accent); }
        .model-card {
            background: var(--surface);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: none;
            border: 1px solid var(--border);
            cursor: pointer;
            transition: border-color var(--duration-fast) var(--ease-snappy), background var(--duration-fast) var(--ease-snappy), box-shadow var(--duration-fast) var(--ease-snappy), transform var(--duration-fast) var(--ease-snappy);
            position: relative;
        }
        .model-card:hover, .model-card:focus {
            border-color: var(--border-strong);
            background: var(--surface);
            box-shadow: var(--shadow-sm);
            transform: translateY(-1px);
            outline: none;
        }
        .model-card-image { height: 148px; background: linear-gradient(135deg, #f8fafc 0%, #e8eef6 100%); overflow: hidden; position: relative; border-bottom: 1px solid var(--border); }
        .model-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s; }
        .model-card-image.is-model-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 16px 8px;
            background: #fff;
        }
        .model-card-image.is-model-icon img { object-fit: contain; object-position: center; }
        .model-card-image.is-used-category-logo {
            gap: clamp(6px, 1.1vw, 14px);
            padding: 16px 12px;
        }
        .model-card-image.is-used-category-logo img {
            flex: 0 1 30%;
            width: auto;
            height: auto;
            max-width: 30%;
            max-height: 56px;
            object-fit: contain;
            transform: none;
        }
        .model-card-image.is-used-category-logo[data-logo-count="1"] img {
            flex-basis: auto;
            max-width: 76%;
            max-height: 68px;
        }
        .model-card:hover .model-card-image.is-used-category-logo img { transform: none; }
        .model-card:hover .model-card-image img { transform: scale(1.05); }
        .model-card-content { padding: 13px 14px; text-align: left; }
        .model-card--selector { display: flex; flex-direction: column; }
        .model-card--selector .model-card-image { flex: 0 0 104px; height: 104px; padding: 6px 10px 4px; }
        .model-card--selector .model-card-content {
            display: flex;
            flex: 1 1 auto;
            align-items: center;
            padding: 9px 11px;
            background: var(--model-group-tint, #fff);
        }
        .model-card--selector .model-card-title-row { width: 100%; }
        .model-card--selector .model-card-title { font-size: 14px; }
        .ford-model-wordmark {
            display: inline-flex;
            align-items: center;
            color: inherit;
            line-height: 1;
            white-space: nowrap;
            vertical-align: -.12em;
        }
        .ford-model-wordmark__asset {
            display: block;
            width: auto;
            height: 1em;
            max-width: 100%;
        }
        .ford-model-wordmark__text {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .ford-model-wordmark--f150 .ford-model-wordmark__asset { height: 1em; }
        .ford-model-wordmark--super-duty .ford-model-wordmark__asset { width: 10.5em; height: auto; }
        .ford-model-wordmark--bronco .ford-model-wordmark__asset { height: 1em; }
        .model-card-title.ford-model-wordmark--f150 { font-size: 18px !important; }
        .model-card-title.ford-model-wordmark--super-duty { font-size: 14px !important; }
        .model-card-title.ford-model-wordmark--bronco { font-size: 30px !important; }
        .filter-option .ford-model-wordmark--f150 { font-size: 16px; }
        .filter-option .ford-model-wordmark--super-duty { font-size: 12px; }
        .filter-option .ford-model-wordmark--bronco { font-size: 24px; }
        .card-model-name.ford-model-wordmark--f150 { font-size: 1.05em; }
        .card-model-name.ford-model-wordmark--bronco { font-size: 1.24em; }
        .detail-model-name.ford-model-wordmark--f150 { font-size: 1.08em; }
        .detail-model-name.ford-model-wordmark--bronco { font-size: 1.25em; }
        .ford-model-wordmark__asset {
            filter: none;
        }
        @media (forced-colors: active) {
            .ford-model-wordmark__asset { display: none; }
            .ford-model-wordmark__text {
                position: static;
                width: auto;
                height: auto;
                margin: 0;
                overflow: visible;
                clip: auto;
            }
        }
        .model-card--selector[data-model-group="trucks"] { --model-group-tint: #eaf2fb; }
        .model-card--selector[data-model-group="suvs"] { --model-group-tint: #eaf5f1; }
        .model-card--selector[data-model-group="cars-evs"] { --model-group-tint: #f0edfa; }
        .model-card--selector[data-model-group="commercial"] { --model-group-tint: #f8f0e7; }
        .model-card--selector .model-card-title-count {
            color: var(--muted);
            font-size: 12px;
            font-weight: 650;
        }
        .model-powertrain-tag {
            position: absolute;
            top: 5px;
            left: 7px;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            min-height: 18px;
            padding: 1px 5px;
            border: 1px solid currentColor;
            border-radius: 4px;
            background: rgba(255, 255, 255, .94);
            box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
            font-size: 9px;
            font-weight: 720;
            line-height: 1;
            white-space: nowrap;
        }
        .model-powertrain-tag--hybrid { color: #348429; }
        .model-powertrain-tag--electric { color: #0877bd; }
        .model-powertrain-symbol { display: inline-flex; align-items: center; justify-content: center; font-size: 8px; line-height: 1; }

        /* Touch devices can keep :hover state "stuck" after tap; disable hover-only UI there. */
        @media (hover: none), (pointer: coarse) {
            .home-button:hover + .header-subtitle {
                opacity: 0;
                transform: translateY(-2px);
            }
            .header-lead .home-button:hover + .header-subtitle {
                transform: translateX(-50%) translateY(-2px);
            }

            .card:hover,
            .model-card:hover,
            .status-list-grid .card:hover {
                transform: none;
                box-shadow: none;
            }

            .model-card:hover .model-card-image img,
            .stock-search-result:hover,
            .tag-clickable:hover,
            .bookmark-button:hover,
            .view-toggle-button:hover,
            .filter-clear:hover,
            .clear-all-filters:hover,
            .home-button:hover,
            .qr-scan-button:hover {
                transform: none;
                box-shadow: none;
                text-decoration: none;
                filter: none;
                border-color: inherit;
                background: inherit;
                color: inherit;
            }
        }
        .model-card-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
        .model-card-title { font-size: 16px; font-weight: 720; margin: 0; color: var(--text); }
        .model-card-title-count { margin-left: 0; } /* filter count style supplies spacing where used */
        /* Lightweight skeleton placeholders to prevent "jerky" first paint while inventory loads */
        .model-card.skeleton { cursor: default; min-height: 232px; contain: layout paint; }
        .model-card.model-card--selector.skeleton { min-height: 0; }
        .model-card.skeleton:hover, .model-card.skeleton:focus { transform: none; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
        .model-card.skeleton .model-card-image { background: #e9eef5; }
        .model-card.skeleton .model-card-image::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.72) 48%, transparent 100%);
            transform: translateX(-100%);
            animation: shimmer 1.45s var(--ease-out) infinite;
        }
        .model-card.skeleton .model-card-title,
        .model-card.skeleton .model-card-title-count {
            color: transparent;
            background: #e9eef5;
            border-radius: 6px;
            display: inline-block;
        }
        .model-card.skeleton .model-card-title { width: 120px; height: 18px; }
        .model-card.skeleton .model-card-title-count { width: 26px; height: 12px; }
        /* Inventory list skeleton cards — match final card layout to avoid bordered loading flash */
        .card.skeleton {
            pointer-events: none;
            cursor: default;
            overflow: hidden;
            min-height: 314px;
            contain: layout paint;
        }
        .card.skeleton:hover { border-color: var(--border); background: var(--surface); }
        .card.skeleton .card-image-placeholder.skeleton-shimmer {
            background: #e9eef5;
            position: relative;
            overflow: hidden;
        }
        .card.skeleton .card-image-placeholder.skeleton-shimmer::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.72) 48%, transparent 100%);
            transform: translateX(-100%);
            animation: shimmer 1.45s var(--ease-out) infinite;
        }
        .card.skeleton .skeleton-line {
            display: block;
            height: 12px;
            border-radius: 4px;
            background: #e9eef5;
            margin-bottom: 6px;
        }
        .card.skeleton .skeleton-title { width: 78%; height: 14px; }
        .card.skeleton .skeleton-subtitle { width: 52%; }
        .card.skeleton .skeleton-tag { width: 42px; height: 18px; margin-bottom: 0; display: inline-block; }
        .card.skeleton .skeleton-tag-short { width: 30px; }
        .card.skeleton .skeleton-meta { width: 64%; height: 10px; margin-top: 2px; }
        .card.skeleton .skeleton-price { width: 42%; height: 16px; margin-top: 4px; margin-bottom: 0; }
        .card.skeleton .skeleton-action { width: 28px; height: 28px; margin: 0 0 0 auto; border-radius: 50%; }
        .card.skeleton .card-footer { min-height: 34px; align-items: center; }

        @media (prefers-reduced-motion: reduce) {
            .skeleton::after,
            .skeleton-shimmer::after,
            .detail-skeleton-line::after,
            .image-loading::after { animation: none !important; transform: none !important; opacity: .35; }
            .loading-spinner { animation-duration: 1.6s !important; }
        }
        .score-modal {
            width: min(1240px, calc(100vw - 28px));
            height: min(84vh, 780px);
            max-height: min(84vh, 780px);
            border-radius: var(--radius-md);
        }
        .status-list-header.score-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 18px 8px;
            border-bottom: 0;
        }
        .score-title-wrap {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
        }
        .score-modal-toolbar {
            display: grid;
            grid-template-columns: minmax(190px, max-content) minmax(0, 1fr) auto;
            align-items: center;
            gap: 16px;
            padding: 6px 18px 14px;
            border-bottom: 1px solid var(--border);
            background: var(--surface);
        }
        .score-modal-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: 8px;
        }
        .score-month-selector {
            display: inline-flex;
            width: max-content;
            max-width: 100%;
            padding: 2px;
            gap: 2px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface-muted);
            overflow-x: auto;
            scrollbar-width: none;
        }
        .score-month-selector::-webkit-scrollbar {
            display: none;
        }
        .score-month-selector[hidden] {
            display: none;
        }
        .score-month-option {
            height: 34px;
            padding: 0 14px;
            border: 0;
            border-radius: calc(var(--radius-sm) - 2px);
            background: transparent;
            color: var(--muted);
            font: inherit;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
        }
        .score-month-option:hover,
        .score-month-option:focus-visible {
            color: var(--text);
            background: var(--surface-hover);
        }
        .score-month-option:focus-visible {
            outline: 2px solid var(--accent-ring);
            outline-offset: 1px;
        }
        .score-month-option.is-active {
            background: var(--surface);
            color: var(--text);
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
        }
        .score-month-option:disabled {
            opacity: 0.65;
            cursor: wait;
        }
        .score-modal-meta {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
            font-variant-numeric: tabular-nums;
            min-width: 0;
            text-align: center;
        }
        .score-modal-body {
            padding: 14px 16px 16px;
            overflow: hidden;
            min-height: 0;
        }
        .score-action-btn {
            height: 34px;
            padding: 0 13px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--accent);
            font: inherit;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            white-space: nowrap;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        }
        .score-action-btn[hidden] {
            display: none;
        }
        .score-action-btn:hover {
            border-color: var(--border-strong);
            background: #f8fbff;
        }
        .sold-vehicle-modal {
            width: min(420px, calc(100vw - 32px));
        }
        .sold-vehicle-body {
            gap: 12px;
        }
        .sold-vehicle-body p {
            margin: 0;
            color: var(--text);
            font-size: 14px;
            line-height: 1.5;
        }
        .sold-vehicle-desklog-link {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 34px;
            padding: 0 12px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--text);
            font-size: 12px;
            font-weight: 650;
            text-decoration: none;
        }
        .sold-vehicle-desklog-link:hover {
            border-color: var(--border-strong);
            background: var(--surface-hover);
        }
        .score-table-wrap {
            width: 100%;
            height: 100%;
            overflow: auto;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }
        .score-table {
            --score-group-header-height: 38px;
            min-width: 1400px;
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 12px;
            line-height: 1.25;
            color: var(--text);
        }
        .score-table th,
        .score-table td {
            padding: 9px 11px;
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            background: var(--surface);
            box-sizing: border-box;
            vertical-align: middle;
            white-space: nowrap;
        }
        .score-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f4f7fb;
            color: var(--muted);
            font-size: 11px;
            font-weight: 700;
            text-align: right;
        }
        .score-sort-btn {
            appearance: none;
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            font-size: inherit;
            font-weight: inherit;
            letter-spacing: 0;
            padding: 0;
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
            flex-wrap: wrap;
            cursor: pointer;
            text-align: right;
            white-space: nowrap;
            min-height: 26px;
        }
        .score-table th:first-child .score-sort-btn {
            justify-content: flex-start;
            text-align: left;
        }
        .score-sort-btn:hover,
        .score-sort-btn:focus-visible {
            color: var(--accent);
        }
        .score-sort-btn:focus-visible {
            outline: 2px solid var(--accent-ring);
            outline-offset: 2px;
            border-radius: 4px;
        }
        .score-sort-indicator {
            min-width: 10px;
            font-size: 11px;
            line-height: 1;
            color: #16803c;
        }
        .score-header-rate {
            flex: 0 0 100%;
            color: #16803c;
            font-size: 10px;
            font-weight: 800;
            line-height: 1.1;
        }
        .score-table th:first-child .score-header-rate {
            text-align: left;
        }
        .score-table thead tr:first-child th {
            top: 0;
            height: var(--score-group-header-height);
            color: var(--text);
        }
        .score-table thead tr:nth-child(2) th {
            top: var(--score-group-header-height);
        }
        .score-table th:first-child {
            position: sticky;
            left: 0;
            z-index: 3;
            min-width: 170px;
            text-align: left;
            color: var(--text);
            font-weight: 700;
            box-shadow: 1px 0 0 var(--border);
        }
        .score-table thead th:first-child {
            z-index: 4;
            background: #f4f7fb;
        }
        .score-table tbody tr:nth-child(even) td,
        .score-table tbody tr:nth-child(even) th {
            background: #fafbfc;
        }
        .score-table tbody tr:hover td,
        .score-table tbody tr:hover th {
            background: #f6f9ff;
        }
        .score-num,
        .score-money {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }
        .score-unit-cell {
            display: table-cell;
            text-align: right;
        }
        .score-live-bump {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 5px;
            vertical-align: baseline;
            color: #16803c;
            background: #e9f8ef;
            border: 1px solid #b8e6c7;
            border-radius: 999px;
            padding: 1px 6px;
            font-weight: 800;
        }
        .score-empty,
        .score-loading {
            min-height: 260px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
            justify-content: center;
            color: var(--muted);
            padding: 24px;
            text-align: center;
        }
        .score-signin-btn {
            min-height: 38px;
            padding: 0 14px;
            border: 1px solid var(--accent);
            border-radius: var(--radius-sm);
            background: var(--accent);
            color: #fff;
            font: inherit;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
        }
        .score-signin-btn:active { transform: scale(0.99); }
        @keyframes shimmer { to { transform: translateX(100%); } }
        @media (max-width: 900px) {
            :root { --header-row-min-height: 0px; --header-center-min-height: 0px; --header-control-height: 44px; }
            .header {
                padding: 0;
                gap: 0;
                background: rgba(255,255,255,0.98);
                box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 8px 22px rgba(15,23,42,0.08);
            }
            .header-row {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch;
                grid-template-columns: none;
                padding: 10px 16px 14px;
                gap: 10px;
                min-height: 0;
                position: relative;
            }
            .header-lead {
                margin-bottom: 0;
                align-items: center;
                justify-content: center;
                order: 1;
                width: 100%;
                padding: 0 46px;
            }
            .header-lead:not(.is-store-context) .header-brand-row {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                width: 100%;
                height: auto;
                min-height: 0;
                row-gap: 8px;
                grid-template-columns: unset;
            }
            .header-lead:not(.is-store-context) .home-button { justify-content: center; }
            /* Dealer/store: one centered brand cluster. */
            .header-lead.is-store-context .header-brand-row {
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                align-items: center;
                gap: 8px;
                width: max-content;
                max-width: 100%;
                height: auto;
                min-height: 0;
                margin: 0 auto;
                grid-template-columns: unset;
            }
            .header-lead.is-store-context .home-button {
                grid-column: unset;
                flex: 0 1 auto;
                min-width: 0;
                justify-content: flex-start;
                gap: 6px;
            }
            .header-lead.is-store-context .home-button .home-text {
                flex: 0 1 auto;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .header-lead.is-store-context .home-button .home-counts {
                flex: 0 0 auto;
            }
            .header-subtitle { left: 50%; transform: translateX(-50%) translateY(-2px); }
            .header-lead .home-button:hover + .header-subtitle,
            .header-lead .home-button:focus-visible + .header-subtitle { transform: translateX(-50%) translateY(0); }
            .home-button { font-size: 15px; }
            .home-button .home-logo { height: 22px; }
            .header-center { order: 2; width: 100%; }
            .header-center-stack { gap: 8px; max-width: none; }
            .header-search-row {
                flex-direction: row;
                align-items: stretch;
                gap: 0;
                flex-wrap: nowrap;
            }
            .home-mode-toggle {
                padding: 0 10px;
                min-width: 48px;
                font-size: 12px;
                flex-shrink: 0;
            }
            .stock-search-dropdown {
                left: 0;
                right: 0;
                width: 100%;
                max-width: none;
            }
            .header-right {
                position: absolute;
                top: calc(9px + env(safe-area-inset-top, 0px));
                right: 14px;
                order: unset;
                justify-content: flex-end;
                margin-left: 0;
                gap: 0;
                padding-top: 0;
                flex-wrap: nowrap;
                z-index: 4;
            }
            .header-right.hidden {
                visibility: hidden;
                pointer-events: none;
            }
            .profile-button-wrap {
                display: inline-flex;
            }
            #profile-button {
                width: 38px;
                height: 38px;
                border-radius: 12px;
                background: rgba(255,255,255,0.88);
                box-shadow: 0 1px 2px rgba(15,23,42,0.08);
            }
            .main { padding: 12px 16px 12px; flex-direction: column; gap: 8px; align-items: stretch; }
            .main:not(.homepage-main) {
                gap: 6px;
                padding: 8px 12px 12px;
            }
            .main:not(.homepage-main) .inventory {
                margin-top: 0;
                background: transparent;
                border: none;
                border-radius: 0;
                padding: 0;
                min-height: 0;
            }
            .main:not(.homepage-main) .cards-grid { gap: 10px; }
            .main:not(.homepage-main) .active-filters {
                margin: 0 0 8px;
                gap: 6px;
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 2px;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .main:not(.homepage-main) .active-filters::-webkit-scrollbar { display: none; }
            .main:not(.homepage-main) .active-filter-tag {
                border-radius: 6px;
                padding: 5px 10px;
                font-size: 12px;
                white-space: nowrap;
                flex: 0 0 auto;
            }
            .main.homepage-main { padding: 12px 16px 24px; }
            .console-page-title { font-size: 18px; }
            /* Mobile filters are handled via a drawer (see below), not horizontal scrolling */
            .filters { display: none; }
            .homepage-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .homepage-grid.model-selector-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
            .dealer-map-card { height: 320px; min-height: 0; padding: 0; }
            .california-map { min-height: 0; }
            .dealer-list-card { height: auto; max-height: none; padding: 0; }
            .dealer-list-body { max-height: none; overflow: visible; padding: 6px; }
            .dealer-region-summary { min-height: 40px; padding: 8px; }
            .dealer-region-list { padding: 0 4px 6px 22px; }
            .dealer-card-button { padding: 8px 7px; }
            .model-card-image { height: 96px; }
            .model-card-content { padding: 10px; }
            .model-card-title { font-size: 14px; }
            .model-card-title-row .filter-option-count { font-size: 11px; }
            .stock-search { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; gap: 0; }
            /* 16px+ avoids iOS focus zoom; viewport also locks pinch-zoom on mobile */
            .stock-search input { flex: 1; width: 100%; padding: 0 12px; font-size: 16px; border-radius: 6px 0 0 6px; }
            .stock-search-submit,
            .qr-scan-button {
                width: 44px;
                min-width: 44px;
                flex-shrink: 0;
                align-self: stretch;
            }
            .stock-search-submit { border-left: 1px solid rgba(255,255,255,0.28); border-radius: 0; }
            .qr-scan-button {
                display: flex;
                border-left: 1px solid #d5d9e0;
                border-radius: 0 6px 6px 0;
            }
            .price-input { font-size: 16px; }
            .header-row:has(.header-lead.is-store-context) {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch;
                gap: 12px;
                padding: 10px 16px 14px;
            }
            .header-row:has(.header-lead.is-store-context) .header-lead {
                order: 1;
                width: 100%;
                flex: 0 0 auto;
            }
            .header-row:has(.header-lead.is-store-context) .header-center {
                order: 2;
                width: 100%;
                flex: 0 0 auto;
                position: static;
            }
            .header-row:has(.header-lead.is-store-context) .header-right {
                order: 3;
            }
            .header-row:has(.header-lead.is-store-context) .header-brand-row {
                height: auto;
                min-height: 0;
            }
            .header-row:has(.header-lead.is-store-context) .home-button {
                white-space: nowrap;
                max-width: 100%;
                height: var(--header-control-height);
            }

            /* Inventory list cards (non-homepage): compact grid on tablets. */
            .main:not(.homepage-main) .cards-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }
            .main:not(.homepage-main) .card { padding: 10px 10px 0; gap: 9px; }
            .main:not(.homepage-main) .card-image-placeholder {
                height: 140px;
                margin: 0 0 2px;
            }
            .main:not(.homepage-main) .card-image-placeholder > .available-badge,
            .main:not(.homepage-main) .card-image-placeholder > .in-transit-badge,
            .main:not(.homepage-main) .card-image-placeholder > .sold-badge {
                top: 8px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 9px;
                padding: 3px 6px;
            }
            .main:not(.homepage-main) .card-image-placeholder.has-service-action-indicator > .available-badge,
            .main:not(.homepage-main) .card-image-placeholder.has-service-action-indicator > .in-transit-badge,
            .main:not(.homepage-main) .card-image-placeholder.has-service-action-indicator > .sold-badge {
                top: 8px;
                left: 50%;
            }
            .main:not(.homepage-main) .card-image-placeholder.has-service-action-indicator .vehicle-service-action-button {
                top: 8px;
                left: 8px;
            }
            .main:not(.homepage-main) .vehicle-age-badge {
                top: 8px;
                left: 8px;
                font-size: 9px;
                padding: 3px 6px;
            }
            .main:not(.homepage-main) .card-title { font-size: 14px; }
            .main:not(.homepage-main) .card-subtitle { font-size: 12px; }
            .main:not(.homepage-main) .card-footer {
                margin-left: -10px;
                margin-right: -10px;
                padding-left: 10px;
                padding-right: 10px;
            }
            .main:not(.homepage-main) .card-footer-used .price,
            .main:not(.homepage-main) .card-odometer { font-size: 15px; }
        }

        @media (max-width: 600px) {
            .main.homepage-main .homepage-grid.model-selector-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 8px;
                touch-action: pan-y;
            }
            .main.homepage-main .cards-grid.mobile-grid-two-up .homepage-grid.model-selector-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 10px;
            }
            .main.homepage-main .mobile-grid-two-up .model-card--selector .model-card-image {
                flex-basis: 104px;
                height: 104px;
                padding: 6px 10px 4px;
            }
            .main.homepage-main .mobile-grid-two-up .model-card--selector .model-card-content { padding: 9px 11px; }
            .main.homepage-main .mobile-grid-two-up .model-card--selector .model-card-title { font-size: 14px; }
            .main.homepage-main .mobile-grid-two-up .model-card--selector .ford-model-wordmark--f150 { font-size: 18px !important; }
            .main.homepage-main .mobile-grid-two-up .model-card--selector .ford-model-wordmark--super-duty { font-size: 11px !important; }
            .main.homepage-main .mobile-grid-two-up .model-card--selector .ford-model-wordmark--bronco { font-size: 28px !important; }
            .main.homepage-main .mobile-grid-two-up .model-card--selector .model-card-title-count { font-size: 11px; }

            .main:not(.homepage-main) .cards-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 7px;
                touch-action: pan-y;
            }
            .main:not(.homepage-main) {
                padding: 8px 8px 14px;
                gap: 8px;
            }
            .main:not(.homepage-main) .card {
                min-width: 0;
                padding: 6px 6px 0;
                gap: 5px;
                box-shadow: var(--shadow-xs);
            }
            .main:not(.homepage-main) .card-image-placeholder {
                height: clamp(78px, 23vw, 100px);
                margin: 0;
            }
            .main:not(.homepage-main) .card-image-placeholder > .available-badge,
            .main:not(.homepage-main) .card-image-placeholder > .in-transit-badge,
            .main:not(.homepage-main) .card-image-placeholder > .sold-badge {
                top: 8px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 8px;
                padding: 3px 5px;
            }
            .main:not(.homepage-main) .card-image-placeholder.has-service-action-indicator > .available-badge,
            .main:not(.homepage-main) .card-image-placeholder.has-service-action-indicator > .in-transit-badge,
            .main:not(.homepage-main) .card-image-placeholder.has-service-action-indicator > .sold-badge {
                top: 8px;
                left: 50%;
            }
            .main:not(.homepage-main) .card-image-placeholder.has-service-action-indicator .vehicle-service-action-button {
                top: 5px;
                left: 5px;
                width: 23px;
                height: 23px;
                border-radius: 6px;
            }
            .main:not(.homepage-main) .card-image-placeholder.has-service-action-indicator .vehicle-service-action-button svg {
                width: 14px;
                height: 14px;
            }
            .main:not(.homepage-main) .vehicle-age-badge {
                top: 5px;
                left: 5px;
                padding: 3px 5px;
                font-size: 8px;
            }
            .main:not(.homepage-main) .card-title {
                margin-bottom: 0;
                font-size: 12px;
                line-height: 1.2;
            }
            .main:not(.homepage-main) .card-subtitle {
                gap: 3px;
                overflow: hidden;
                font-size: 9px;
            }
            .main:not(.homepage-main) .card-id-chip {
                gap: 3px;
                padding: 0;
            }
            .main:not(.homepage-main) .card-id-label { font-size: 7px; }
            .main:not(.homepage-main) .card-id-value { font-size: 9px; }
            .main:not(.homepage-main) .card-tags {
                gap: 6px;
                margin-top: 0;
            }
            .main:not(.homepage-main) .card-tags .tag {
                max-width: 100%;
                padding: 2px 5px;
                font-size: 9px;
            }
            .main:not(.homepage-main) .card-footer {
                gap: 4px;
                margin-left: -6px;
                margin-right: -6px;
                padding: 7px 6px 8px;
            }
            .main:not(.homepage-main) .card-price-pair span { font-size: 7px; }
            .main:not(.homepage-main) .card-price-pair strong,
            .main:not(.homepage-main) .card-footer-used .price,
            .main:not(.homepage-main) .card-odometer {
                font-size: 12px;
            }
            .main:not(.homepage-main) .bookmark-button {
                top: 5px;
                right: 5px;
                width: 25px;
                height: 25px;
                border-radius: 7px;
            }
            .main:not(.homepage-main) .bookmark-button svg { width: 15px; height: 15px; }
            .main:not(.homepage-main) .cards-grid.mobile-grid-two-up {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
            }
            .main:not(.homepage-main) .mobile-grid-two-up .card {
                padding: 10px 10px 0;
                gap: 9px;
            }
            .main:not(.homepage-main) .mobile-grid-two-up .card-image-placeholder {
                height: clamp(132px, 37vw, 152px);
                margin: 0 0 2px;
            }
            .main:not(.homepage-main) .mobile-grid-two-up .card-title {
                margin-bottom: 2px;
                font-size: 14px;
                line-height: 1.25;
            }
            .main:not(.homepage-main) .mobile-grid-two-up .card-subtitle {
                gap: 5px;
                font-size: 11px;
            }
            .main:not(.homepage-main) .mobile-grid-two-up .card-id-label { font-size: 9px; }
            .main:not(.homepage-main) .mobile-grid-two-up .card-id-value { font-size: 11px; }
            .main:not(.homepage-main) .mobile-grid-two-up .card-tags .tag {
                padding: 3px 8px;
                font-size: 11px;
            }
            .main:not(.homepage-main) .mobile-grid-two-up .card-footer {
                gap: 8px;
                margin-left: -10px;
                margin-right: -10px;
                padding: 10px;
            }
            .main:not(.homepage-main) .mobile-grid-two-up .card-price-pair span { font-size: 9px; }
            .main:not(.homepage-main) .mobile-grid-two-up .card-price-pair strong,
            .main:not(.homepage-main) .mobile-grid-two-up .card-footer-used .price,
            .main:not(.homepage-main) .mobile-grid-two-up .card-odometer { font-size: 15px; }
            .main:not(.homepage-main) .mobile-grid-two-up .bookmark-button {
                top: 8px;
                right: 8px;
                width: 32px;
                height: 32px;
                border-radius: 9px;
            }
            .main:not(.homepage-main) .mobile-grid-two-up .bookmark-button svg { width: 18px; height: 18px; }
        }

        /* Mobile filter bar + drawer (common pattern) */
        .mobile-filter-bar { display: none; }
        @media (max-width: 900px) {
            .main:not(.homepage-main) .mobile-filter-bar { display: block; }
        }
        .mobile-filter-bar {
            position: sticky;
            top: 0;
            z-index: 50;
            background: transparent;
            padding: 4px 0 6px;
            margin-bottom: 0;
            align-self: stretch;
            width: 100%;
            box-sizing: border-box;
        }
        /* Full-bleed 50/50 controls on inventory (cancel main side padding) */
        @media (max-width: 900px) {
            .main:not(.homepage-main) .mobile-filter-bar {
                display: block;
                flex-shrink: 0;
                align-self: stretch;
                width: calc(100% + 24px);
                max-width: none;
                margin-left: -12px;
                margin-right: -12px;
                padding: 6px 12px 8px;
                box-sizing: border-box;
                background: linear-gradient(180deg, rgba(238,242,246,0.92) 0%, rgba(238,242,246,0.72) 100%);
                backdrop-filter: blur(10px);
                border-bottom: 1px solid rgba(217,224,234,0.7);
                top: var(--inventory-header-height, 60px);
                z-index: 1090;
                transition: top 190ms cubic-bezier(0.2, 0, 0, 1), box-shadow 190ms ease;
            }
            body.inventory-header-collapsible.inventory-header-hidden .main:not(.homepage-main) .mobile-filter-bar {
                top: 0;
                box-shadow: 0 5px 14px rgba(15,23,42,0.08);
            }
            .main:not(.homepage-main) .mobile-filter-bar-inner {
                display: flex;
                flex-direction: row;
                align-items: stretch;
                gap: 8px;
                width: 100%;
            }
            .main:not(.homepage-main) .mobile-filter-button {
                flex: 1 1 0;
                min-width: 0;
                width: auto;
                position: relative;
            }
            .main:not(.homepage-main) .mobile-filter-button {
                z-index: 2;
            }
        }
        @media (min-width: 901px) {
            body.inventory-header-pinned .header {
                top: 0 !important;
                transition: none !important;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            body.inventory-header-pinned.inventory-header-collapsible .header,
            .main:not(.homepage-main) .mobile-filter-bar {
                transition-duration: 1ms !important;
            }
        }
        .mobile-filter-bar-inner {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 8px;
            width: 100%;
            box-sizing: border-box;
        }
        .mobile-filter-button {
            width: 100%;
            min-width: 0;
            min-height: 48px;
            box-sizing: border-box;
            border: 1px solid rgba(174,185,200,0.9);
            border-radius: var(--radius-md);
            background: var(--surface);
            box-shadow: 0 1px 2px rgba(15,23,42,0.05), inset 0 1px 0 rgba(255,255,255,0.85);
            transition: border-color var(--duration-fast) var(--ease-snappy), box-shadow var(--duration-fast) var(--ease-snappy), background var(--duration-fast) var(--ease-snappy);
        }
        .mobile-filter-button:active {
            border-color: var(--border-strong);
            box-shadow: var(--shadow-sm);
        }
        .mobile-filter-button {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 3px;
            padding: 7px 12px;
            font: inherit;
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            cursor: pointer;
            user-select: none;
            touch-action: manipulation;
        }
        .mobile-filter-button:active { transform: scale(0.99); }
        .mobile-filter-button.is-active {
            border-color: #9ac4f5;
            background: var(--accent-light);
            box-shadow: inset 0 0 0 1px rgba(24,95,166,0.10);
        }
        .mobile-control-label {
            display: block;
            color: var(--muted);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            line-height: 1;
            text-transform: uppercase;
            pointer-events: none;
        }
        .mobile-filter-count {
            display: none;
            min-width: 0;
            height: auto;
            border-radius: 0;
            padding: 0;
            background: transparent;
            color: var(--accent);
            font-size: 13px;
            font-weight: 780;
            line-height: 1.15;
            align-items: center;
            justify-content: center;
        }
        .mobile-filter-button:not(.is-active)::after {
            content: "All";
            color: var(--text);
            font-size: 13px;
            font-weight: 780;
            line-height: 1.15;
        }
        #mobile-filters-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.55);
            z-index: 10010;
            display: none;
        }
        body.mobile-filters-open #mobile-filters-backdrop { display: block; }

        .mobile-filters-header { display: none; }
        @media (max-width: 900px) {
            body.mobile-filters-open { overflow: hidden; }
            /* Let the fixed drawer stack above the backdrop (main z-index:1 was trapping it). */
            body.mobile-filters-open #main-content {
                position: static;
                z-index: auto;
            }
            body.mobile-filters-open #filters-sidebar {
                display: block;
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                top: 18vh;
                max-height: 82vh;
                background: #fff;
                border-top-left-radius: 16px;
                border-top-right-radius: 16px;
                box-shadow: 0 -18px 50px rgba(0,0,0,0.20);
                padding: 0 16px 18px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                z-index: 10020;
                pointer-events: auto;
                width: 100%;
                max-width: none;
                box-sizing: border-box;
                padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
            }
            body.mobile-filters-open #filters-sidebar.filters {
                /* Override desktop sidebar sizing when used as a drawer */
                width: 100% !important;
                padding-right: 0 !important;
            }

            #filters-sidebar .mobile-filters-header {
                display: flex;
                position: sticky;
                top: 0;
                background: #fff;
                padding: 14px 0 12px;
                border-bottom: 1px solid var(--border);
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                z-index: 2;
            }
            #filters-sidebar .mobile-filters-header::before {
                content: '';
                position: absolute;
                left: 50%;
                top: 6px;
                transform: translateX(-50%);
                width: 44px;
                height: 4px;
                border-radius: 999px;
                background: #e5e7eb;
            }
            #filters-sidebar .mobile-filters-header { position: sticky; }
            .mobile-filters-title { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
            .mobile-filters-close {
                border: 1px solid var(--border);
                border-radius: 10px;
                background: #fff;
                padding: 8px 12px;
                font: inherit;
                font-size: 14px;
                cursor: pointer;
            }
            .mobile-filters-close:active { transform: scale(0.99); }

            /* In drawer, keep filters vertical (default desktop styling) */
            #filters-sidebar #sort-container { display: flex; }
            .filter-section { min-width: 0; }
        }
        .comparison-table-container {
            overflow-x: auto;
            width: 100%;
            margin: 20px 0;
        }
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            min-width: 800px;
        }
        .comparison-table th,
        .comparison-table td {
            padding: 12px 16px;
            text-align: left;
            border: 1px solid #e0e0e0;
            vertical-align: top;
        }
        .comparison-label-cell {
            background: #f8f9fa;
            font-weight: 600;
            color: var(--text);
            width: 150px;
            min-width: 150px;
            position: sticky;
            left: 0;
            z-index: 2;
            box-shadow: 2px 0 4px rgba(0,0,0,0.1);
        }
        .comparison-data-cell {
            min-width: 200px;
            background: white;
        }
        .comparison-data-cell.empty-cell {
            color: #999;
            font-style: italic;
        }
        .comparison-data-cell.no-equipment {
            color: #999;
            font-style: italic;
        }
        .comparison-vehicle-photo {
            width: 180px;
            height: 120px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid #ddd;
        }
        .comparison-equipment-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .comparison-equipment-item {
            font-size: 13px;
            color: var(--muted);
            padding: 2px 0;
            line-height: 1.3;
        }
        .comparison-equipment-item:not(:last-child)::after {
            content: '';
            display: block;
            height: 1px;
            background: #f0f0f0;
            margin-top: 4px;
        }
        /* Header row styling */
        .comparison-table tbody tr:first-child .comparison-label-cell {
            background: #e9ecef;
            font-weight: 700;
            font-size: 16px;
        }
        .comparison-table tbody tr:first-child .comparison-data-cell {
            background: #f8f9fa;
            font-weight: 600;
            font-size: 15px;
        }
        /* Photo row styling */
        .comparison-table tbody tr:nth-child(2) {
            background: #fafafa;
        }
        .comparison-table tbody tr:nth-child(2) .comparison-label-cell {
            background: #f8f9fa;
        }
        /* Alternate row colors for better readability */
        .comparison-table tbody tr:nth-child(odd) .comparison-data-cell {
            background: #ffffff;
        }
        .comparison-table tbody tr:nth-child(even) .comparison-data-cell {
            background: #f9f9f9;
        }
        /* Hover effect */
        .comparison-table tbody tr:hover .comparison-data-cell {
            background: #e3f2fd;
        }

        /* Odometer tag spacing (inherits general .tag styles) */
        .odometer-tag {
            margin-right: 4px;
            margin-bottom: 4px;
        }

        /* Used inventory cards: mileage opposite price (CarMax-style) */
        .card-odometer {
            color: var(--text);
            white-space: nowrap;
            flex-shrink: 0;
            margin-left: auto;
        }

        /* Mobile-only persistent quick actions (bottom-right) */
        .mobile-quick-actions {
            position: fixed;
            right: 16px;
            bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            z-index: 9999;
            display: none; /* enabled via media query */
            flex-direction: column;
            gap: 10px;
            pointer-events: none; /* only buttons are clickable */
        }
        .mobile-quick-actions button,
        .mobile-quick-actions a {
            pointer-events: auto;
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-md);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            text-decoration: none;
        }
        .mobile-quick-actions button:active,
        .mobile-quick-actions a:active { transform: scale(0.98); }
        .mobile-quick-actions button svg,
        .mobile-quick-actions a svg { width: 22px; height: 22px; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
        .mobile-quick-actions .mobile-qa-crm,
        .mobile-quick-actions .mobile-qa-score,
        .mobile-quick-actions .mobile-qa-drive {
            width: auto;
            min-width: 54px;
            padding: 0 10px;
            font-size: 12px;
            font-weight: 750;
            letter-spacing: 0.01em;
        }
        .mobile-quick-actions .hidden { display: none !important; }

        body.vehicle-detail-open .mobile-quick-actions {
            display: none !important;
        }
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
        @media (max-width: 900px) {
            .mobile-quick-actions { display: flex; }
        }
        @media (max-width: 600px) {
            .mobile-quick-actions {
                left: auto;
                right: 12px;
                bottom: calc(48px + env(safe-area-inset-bottom, 0px));
                flex-direction: row;
                justify-content: flex-end;
                align-items: center;
                gap: 6px;
                width: max-content;
                max-width: calc(100vw - 24px);
                padding: 4px;
                border: 1px solid rgba(217,224,234,0.88);
                border-radius: var(--radius-md);
                background: rgba(255,255,255,0.94);
                box-shadow: 0 14px 34px rgba(15,23,42,0.18);
                backdrop-filter: blur(14px);
                overflow-x: auto;
                pointer-events: auto;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }
            .mobile-quick-actions::-webkit-scrollbar { display: none; }
            .mobile-quick-actions button,
            .mobile-quick-actions a {
                width: 40px;
                height: 40px;
                box-shadow: none;
            }
            .mobile-quick-actions .mobile-qa-crm,
            .mobile-quick-actions .mobile-qa-score,
            .mobile-quick-actions .mobile-qa-drive {
                min-width: 50px;
                height: 40px;
                padding: 0 8px;
                font-size: 11px;
            }
        }
        @media (max-width: 600px) {
            .score-modal {
                width: calc(100vw - 16px);
                height: calc(100dvh - 24px);
                max-height: calc(100dvh - 24px);
            }
            .status-list-header.score-modal-header {
                padding: 14px 16px 6px;
            }
            .score-title-wrap {
                min-width: 0;
            }
            .score-modal-toolbar {
                grid-template-columns: 1fr;
                gap: 9px;
                padding: 8px 16px 12px;
            }
            .score-modal-actions {
                justify-content: flex-start;
                gap: 6px;
            }
            .score-month-selector {
                width: 100%;
            }
            .score-month-option {
                height: 32px;
                padding: 0 10px;
                font-size: 11px;
                flex: 1 0 auto;
            }
            .score-modal-meta {
                font-size: 11px;
                text-align: left;
                max-height: none;
                overflow: visible;
            }
            .score-action-btn {
                height: 32px;
                padding: 0 10px;
                font-size: 11px;
            }
            .score-modal-body {
                padding: 12px 12px 14px;
            }
            .score-table {
                --score-group-header-height: 42px;
                min-width: 1080px;
                font-size: 11px;
            }
            .score-table th,
            .score-table td {
                padding: 7px 8px;
            }
            .score-table thead tr:nth-child(2) th {
                height: 70px;
            }
            .score-table thead tr:nth-child(2) .score-sort-btn {
                min-height: 48px;
                gap: 2px 4px;
                align-content: center;
            }
            .score-sort-label {
                line-height: 1.15;
            }
            .score-table th:first-child {
                min-width: 126px;
                max-width: 126px;
                white-space: normal;
            }
            .score-header-rate {
                font-size: 9px;
                line-height: 1.05;
            }
        }
/* Lazy-loaded feature modals (map + QR scanner) */
#vehicle-map-overlay {
    position: fixed; inset: 0;
    background: rgba(17,24,39,0.76);
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.vehicle-map-modal {
    background: #fff;
    border-radius: 14px;
    width: min(1060px, 96vw);
    height: min(700px, 92vh);
    box-shadow: 0 24px 54px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vehicle-map-modal.dealer-network-modal {
    width: min(1220px, 96vw);
    height: min(760px, 92vh);
}
.vehicle-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
}
.vehicle-map-header h3 { margin: 0; font-size: 18px; font-weight: 650; }
.vehicle-map-title-block {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.vehicle-map-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.vehicle-map-badges span {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #eef2ff;
    color: #1e3a8a;
    font-size: 11px;
    font-weight: 750;
}
.vehicle-map-close {
    background: none; border: none;
    font-size: 28px; cursor: pointer;
    color: var(--muted);
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
}
.vehicle-map-close:hover { color: var(--text); background: #f3f4f6; }
.vehicle-map-body { flex: 1; display: flex; flex-direction: column; padding: 16px; gap: 10px; min-height: 0; }
.dealer-network-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.46fr);
    gap: 12px;
}
.dealer-network-modal .dealer-map-card,
.dealer-network-modal .dealer-list-card {
    height: 100%;
    min-height: 0;
}
.dealer-network-modal .dealer-list-card {
    border-color: var(--border);
}
.dealer-network-modal .dealer-card-button {
    scroll-margin-block: 8px;
}
@media (max-width: 600px) {
    .vehicle-map-header {
        align-items: flex-start;
        padding: 12px;
    }
    .vehicle-map-title-block {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
    .vehicle-map-badges span {
        height: 22px;
        font-size: 10px;
    }
    .vehicle-map-body {
        padding: 10px;
    }
    .vehicle-map-modal.dealer-network-modal {
        width: calc(100vw - 16px);
        height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px);
    }
    .dealer-network-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(260px, 1.25fr) minmax(180px, 0.75fr);
        gap: 8px;
    }
    .dealer-network-modal .dealer-region-summary {
        min-height: 38px;
        padding-block: 6px;
    }
}
/* Apple product-inspired material pass */
:root {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-raised: rgba(255, 255, 255, 0.86);
    --surface-muted: #f2f4f7;
    --surface-hover: rgba(255, 255, 255, 0.94);
    --page-surface-top: #fbfbfd;
    --page-surface-mid: #f5f5f7;
    --page-surface-bottom: #eceff3;
    --text: #1d1d1f;
    --muted: #6e6e73;
    --border: rgba(0, 0, 0, 0.11);
    --border-strong: rgba(0, 0, 0, 0.22);
    --accent: #0071e3;
    --accent-hover: #005bb5;
    --accent-light: rgba(0, 113, 227, 0.09);
    --accent-ring: rgba(0, 113, 227, 0.22);
    --ford-navy: #00095b;
    --header-bg: rgba(251, 251, 253, 0.76);
    --header-fg: #1d1d1f;
    --header-muted: #6e6e73;
    --header-border: rgba(0, 0, 0, 0.09);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 16px 42px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.16);
    --ease-snappy: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 0.13s;
    --duration-normal: 0.22s;
    --material-bg: rgba(255, 255, 255, 0.72);
    --material-bg-strong: rgba(255, 255, 255, 0.88);
    --material-border: rgba(255, 255, 255, 0.62);
    --panel-header-bg: rgba(255, 255, 255, 0.62);
    --apple-control-radius: var(--radius-md);
    --apple-inner-radius: var(--radius-sm);
    --control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 1px 2px rgba(0, 0, 0, 0.04);
    --control-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 8px 20px rgba(0, 0, 0, 0.08);
    --control-focus-ring: 0 0 0 4px var(--accent-ring);
}

html,
body {
    background: var(--page-surface-mid);
}

.page {
    background: linear-gradient(180deg, var(--page-surface-top) 0%, var(--page-surface-mid) 38%, var(--page-surface-mid) 100%);
}

.header {
    background: var(--header-bg);
    border-bottom-color: var(--header-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.header-row {
    background: transparent;
}

.home-button,
.product-switch-link,
.stock-search input,
.header-icon-button,
.bookmarks-button,
.home-mode-toggle,
.dealer-map-reset,
.dealer-card-button,
.filter-option,
.mobile-quick-actions button,
.mobile-quick-actions a,
.view-toggle-button,
.status-view-button,
.detail-cta button,
.card,
.model-card {
    -webkit-tap-highlight-color: transparent;
}

.stock-search,
.product-switch,
.header-icon-button,
.bookmarks-button,
.filters,
.console-panel,
.dealer-map-card,
.dealer-list-card,
.model-card,
.card,
.vehicle-detail .detail-panel,
.detail-hero,
.stock-search-dropdown,
.account-menu {
    background: var(--material-bg);
    border-color: var(--border);
    box-shadow: inset 0 1px 0 var(--material-border), var(--shadow-xs);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
}

.stock-search-dropdown {
    background: var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), var(--shadow-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.stock-search {
    border-radius: var(--apple-control-radius);
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    overflow: visible;
    transition:
        border-color var(--duration-fast) var(--ease-snappy),
        background var(--duration-fast) var(--ease-snappy),
        box-shadow var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
}

.stock-search:focus-within {
    background: var(--material-bg-strong);
    border-color: rgba(0, 113, 227, 0.32);
    box-shadow: var(--control-focus-ring), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.stock-search input {
    color: var(--text);
    font-size: 15px;
}

.stock-search input::placeholder {
    color: #86868b;
}

.stock-search-submit,
.qr-scan-button,
.home-mode-toggle {
    transition:
        background var(--duration-fast) var(--ease-snappy),
        border-color var(--duration-fast) var(--ease-snappy),
        box-shadow var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
    touch-action: manipulation;
}

.stock-search-submit {
    background: var(--accent);
    border-radius: 0 var(--apple-control-radius) var(--apple-control-radius) 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.stock-search-submit:hover {
    background: var(--accent-hover);
}

.stock-search-submit:focus-visible,
.qr-scan-button:focus-visible,
.home-mode-toggle:focus-visible {
    outline: none;
    box-shadow: var(--control-focus-ring), inset 0 1px 0 rgba(255, 255, 255, 0.36);
    z-index: 1;
}

.qr-scan-button {
    background: rgba(255, 255, 255, 0.62);
    color: #1d1d1f;
}

.qr-scan-button:hover {
    background: rgba(0, 113, 227, 0.08);
    color: #0066cc;
}

.home-mode-toggle[data-mode="new"] {
    background: rgba(0, 113, 227, 0.10);
    color: #0066cc;
}

.home-mode-toggle[data-mode="used"] {
    background: rgba(255, 149, 0, 0.12);
    color: #b25a00;
}

.home-mode-toggle:hover {
    background: rgba(0, 113, 227, 0.08);
    color: #0066cc;
}

.product-switch {
    border-radius: var(--apple-control-radius);
    background: rgba(255, 255, 255, 0.54);
    padding: 3px;
}

.product-switch-link {
    border-radius: var(--apple-inner-radius);
}

.product-switch-link:hover,
.product-switch-link:focus-visible,
.product-switch-link.is-active {
    background: rgba(255, 255, 255, 0.92);
}

.header-icon-button,
.bookmarks-button {
    border-radius: var(--apple-control-radius);
    box-shadow: var(--control-shadow);
    text-decoration: none;
    touch-action: manipulation;
    transition:
        background var(--duration-fast) var(--ease-snappy),
        border-color var(--duration-fast) var(--ease-snappy),
        box-shadow var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
}

.header-icon-button:hover,
.bookmarks-button:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--border-strong);
    box-shadow: var(--control-shadow-hover);
    color: var(--text);
    transform: translateY(-1px);
}

.header-icon-button:focus-visible,
.bookmarks-button:focus-visible,
.dealer-map-reset:focus-visible,
.dealer-card-button:focus-visible,
.mobile-quick-actions button:focus-visible,
.mobile-quick-actions a:focus-visible,
.view-toggle-button:focus-visible,
.status-view-button:focus-visible,
.detail-cta button:focus-visible {
    outline: none;
    border-color: rgba(0, 113, 227, 0.34);
    box-shadow: var(--control-focus-ring), var(--control-shadow);
}

.header-icon-button:active,
.bookmarks-button:active,
.dealer-map-reset:active,
.dealer-card-button:active,
.mobile-quick-actions button:active,
.mobile-quick-actions a:active,
.view-toggle-button:active,
.status-view-button:active,
.stock-search-result:active,
.filter-option:active,
.active-filter-tag button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--control-shadow);
}

.main.homepage-main {
    min-height: calc(100vh - var(--header-row-min-height));
    padding: clamp(8px, 1vw, 14px) clamp(16px, 3vw, 38px) 48px;
    align-items: flex-start;
    isolation: isolate;
    overflow-x: clip;
    overflow-y: visible;
}

.main.homepage-main::before,
.main.homepage-main::after {
    display: none;
}

.main.homepage-main::before {
    top: -148px;
    left: 0;
    right: 0;
    height: 650px;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(251, 251, 253, 0.98) 0%, rgba(251, 251, 253, 0.88) 31%, rgba(251, 251, 253, 0.24) 62%, rgba(251, 251, 253, 0.72) 100%),
        linear-gradient(180deg, rgba(251, 251, 253, 0) 48%, var(--page-surface-mid) 96%);
    opacity: 0.96;
}

.main.homepage-main::after {
    inset: auto -12% -26% -12%;
    height: 52%;
    z-index: 0;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0));
}

.homepage-main .inventory {
    position: relative;
    z-index: 1;
    max-width: 1420px;
}

.homepage-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.console-panel,
.dealer-map-card,
.dealer-list-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--control-shadow);
}

.console-panel-header {
    background: rgba(255, 255, 255, 0.70);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.console-panel-title,
.filter-title,
.detail-module-title,
.detail-equipment-title,
.detail-towing-title,
.detail-price-history-title,
.year-filter-label,
.card-price-pair span,
.card-id-label {
    letter-spacing: 0.04em;
}

.dealer-card-button {
    transition:
        background var(--duration-fast) var(--ease-snappy),
        box-shadow var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
    touch-action: manipulation;
}

.dealer-card-button:hover,
.dealer-card-button:focus-visible {
    background: rgba(0, 113, 227, 0.06);
    color: var(--text);
}

.dealer-map-reset {
    box-shadow: var(--control-shadow);
    transition:
        background var(--duration-fast) var(--ease-snappy),
        border-color var(--duration-fast) var(--ease-snappy),
        box-shadow var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
}

.filters {
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-sm);
}

.filter-section {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.filter-option {
    transition:
        background var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
}

.filter-option:hover {
    background: rgba(255, 255, 255, 0.72);
}

.filter-option input,
.mileage-filter-select,
.sort-select,
#filters-sidebar #sort-container .sort-select {
    border-color: rgba(0, 0, 0, 0.14);
    background-color: rgba(255, 255, 255, 0.82);
}

.active-filter-tag,
.tag-equipment,
.tag-filter-active {
    background: rgba(0, 113, 227, 0.09);
    border-color: rgba(0, 113, 227, 0.20);
    color: #0066cc;
}

.clear-all-filters,
.filter-clear {
    color: #0066cc;
}

.card,
.model-card {
    background: rgba(255, 255, 255, 0.84);
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow: var(--control-shadow);
    transition:
        border-color var(--duration-normal) var(--ease-snappy),
        background var(--duration-normal) var(--ease-snappy),
        box-shadow var(--duration-normal) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
}

.card:hover,
.model-card:hover,
.model-card:focus {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: var(--control-shadow-hover);
    transform: translateY(-1px);
}

.model-card:active {
    transform: scale(0.992);
}

.card-image-placeholder,
.model-card-image {
    background: linear-gradient(135deg, #f7f8fa 0%, #e9edf3 100%);
    border-color: rgba(0, 0, 0, 0.08);
}

.model-card-image {
    height: 156px;
    color: transparent;
    font-size: 0;
}

.model-card-image img {
    color: transparent;
    font-size: 0;
    transition: transform 420ms var(--ease-out), opacity 220ms var(--ease-out);
}

.model-card:hover .model-card-image img {
    transform: scale(1.02);
}

.model-card-content {
    background: rgba(255, 255, 255, 0.82);
}

.model-card-title,
.card-title {
    color: #1d1d1f;
    letter-spacing: 0;
}

.model-card-title-count,
.dealer-card-button > .filter-option-count {
    color: #6e6e73;
}

.card-footer {
    border-top-color: rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.56);
}

.bookmark-button,
.detail-bookmark-button,
.vehicle-service-action-button,
.card-photo-control,
.detail-hero-nav {
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    transition:
        border-color var(--duration-fast) var(--ease-snappy),
        background var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
}

.bookmark-button:active,
.detail-bookmark-button:active,
.vehicle-service-action-button:not(:disabled):active,
.card-photo-control:active,
.detail-hero-nav:active,
.detail-cta button:active {
    transform: scale(0.97);
}

.detail-hero-nav:hover {
    transform: translateY(-50%) scale(1.03);
}

.vehicle-detail.active {
    background:
        radial-gradient(circle at 12% -8%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 34rem),
        var(--bg);
}

.vehicle-detail .detail-panel,
.detail-price-section {
    background: rgba(255, 255, 255, 0.86);
}

.detail-hero {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

.detail-cta button {
    transition:
        background var(--duration-fast) var(--ease-snappy),
        border-color var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
}

.detail-cta .primary {
    background: var(--accent);
}

.detail-cta .primary:hover {
    background: var(--accent-hover);
}

.detail-cta .secondary {
    background: rgba(255, 255, 255, 0.74);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header,
    .stock-search,
    .product-switch,
    .header-icon-button,
    .bookmarks-button,
    .filters,
    .console-panel,
    .dealer-map-card,
    .dealer-list-card,
    .model-card,
    .card,
    .vehicle-detail .detail-panel,
    .detail-hero,
    .stock-search-dropdown,
    .account-menu {
        background: #ffffff;
    }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    :root {
        --header-bg: #ffffff;
        --material-bg: #ffffff;
        --material-bg-strong: #ffffff;
        --border: rgba(0, 0, 0, 0.22);
    }

    .header,
    .stock-search,
    .product-switch,
    .header-icon-button,
    .bookmarks-button,
    .filters,
    .console-panel,
    .dealer-map-card,
    .dealer-list-card,
    .model-card,
    .card,
    .vehicle-detail .detail-panel,
    .detail-hero,
    .stock-search-dropdown,
    .account-menu {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #ffffff;
    }

    .main.homepage-main::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card,
    .model-card,
    .model-card-image img,
    .page-content,
    .header-icon-button,
    .bookmarks-button,
    .stock-search-submit,
    .qr-scan-button,
    .home-mode-toggle,
    .detail-hero-nav,
    .bookmark-button,
    .detail-bookmark-button,
    .vehicle-service-action-button,
    .filter-option,
    .dealer-card-button {
        transition-duration: 80ms !important;
        animation: none !important;
    }

    .card:hover,
    .model-card:hover,
    .model-card:focus,
    .model-card:hover .model-card-image img {
        transform: none;
    }
}

@media (max-width: 900px) {
    .main.homepage-main {
        padding: 8px 12px 34px;
        justify-content: flex-start;
        min-height: 0;
    }

    .main.homepage-main::before,
    .main.homepage-main::after {
        display: none;
    }

    .homepage-grid {
        gap: 10px;
    }

    .model-card {
        background: rgba(255, 255, 255, 0.90);
    }

    .stock-search {
        border-radius: var(--apple-control-radius);
    }

    .stock-search-submit {
        border-radius: 0;
    }

    .qr-scan-button {
        border-radius: 0 var(--apple-control-radius) var(--apple-control-radius) 0;
    }

    .mobile-quick-actions button,
    .mobile-quick-actions a {
        transition:
            background var(--duration-fast) var(--ease-snappy),
            border-color var(--duration-fast) var(--ease-snappy),
            box-shadow var(--duration-fast) var(--ease-snappy),
            color var(--duration-fast) var(--ease-snappy),
            transform var(--duration-fast) var(--ease-snappy);
    }

    .mobile-quick-actions button:hover,
    .mobile-quick-actions a:hover {
        background: rgba(255, 255, 255, 0.92);
        border-color: var(--border-strong);
        color: var(--text);
    }
}

/* Desktop inventory shell. Shared workspace navigation is owned by
   site-sidebar.css; this block only lays out the inventory header and filters. */
.inventory-sidebar-back {
    display: none;
}

@media (min-width: 901px) {
    :root {
        --desktop-sidebar-width: 264px;
    }

    .header-row {
        grid-template-columns: var(--desktop-sidebar-width) minmax(0, 1fr) var(--desktop-sidebar-width);
        column-gap: 0;
        padding: 0;
    }

    .header-lead {
        width: 100%;
        min-height: var(--header-row-min-height);
        padding: 10px 24px;
        justify-self: stretch;
        align-self: stretch;
        border-right: 1px solid var(--header-border);
    }

    .header-center {
        width: 100%;
        min-width: 0;
        padding: 10px 24px;
    }

    .header-search-row {
        justify-content: center;
    }

    .header-right > :not(.profile-button-wrap) {
        display: none !important;
    }

    .header-right {
        width: 100%;
        gap: 0;
        padding: 10px 24px;
        justify-self: stretch;
    }

    #main-content,
    .main.homepage-main {
        gap: 0;
        padding: 0;
        justify-content: flex-start;
    }

    #main-content > .inventory {
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 22px 28px 44px;
    }

    #filters-sidebar.filters {
        width: var(--desktop-sidebar-width);
        flex: 0 0 var(--desktop-sidebar-width);
        align-self: flex-start;
        position: sticky;
        top: var(--header-row-min-height);
        height: calc(100vh - var(--header-row-min-height));
        max-height: calc(100vh - var(--header-row-min-height));
        overflow-y: auto;
        padding: 18px 14px;
        border: 0;
        border-right: 1px solid var(--header-border);
        border-radius: 0;
        background: #f8f9fb;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
    }

    .inventory-sidebar-back {
        min-width: 0;
        min-height: 40px;
        border: 0;
        border-radius: 4px;
        color: var(--text);
        text-decoration: none;
        font-size: 14px;
        font-weight: 560;
        line-height: 1.2;
        transition:
            background var(--duration-fast) var(--ease-snappy),
            border-color var(--duration-fast) var(--ease-snappy),
            color var(--duration-fast) var(--ease-snappy),
            transform var(--duration-fast) var(--ease-snappy);
    }

    .inventory-sidebar-back:hover {
        background: #eef0f3;
        color: var(--text);
    }

    .inventory-sidebar-back:focus-visible {
        outline: none;
        border-color: rgba(0, 113, 227, 0.34);
        box-shadow: 0 0 0 3px var(--accent-ring);
    }

    .inventory-sidebar-back:active {
        transform: scale(0.985);
    }

    .inventory-sidebar-back svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    #filters-sidebar:not(.hidden) {
        animation: workspace-sidebar-enter var(--duration-normal) var(--ease-out) both;
    }

    .inventory-sidebar-back {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 44px;
        margin: -4px 0 14px;
        padding: 8px 4px 12px;
        border: 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        font-weight: 650;
    }

    #filters-sidebar #sort-container .sort-select,
    #filters-sidebar .mileage-filter-select,
    #filters-sidebar .filter-option {
        border-radius: 4px;
    }

    @keyframes workspace-sidebar-enter {
        from { opacity: 0; transform: translateX(-6px); }
        to { opacity: 1; transform: translateX(0); }
    }
}

@media (prefers-reduced-motion: reduce) {
    #filters-sidebar:not(.hidden) {
        animation: none;
    }
}

@media (hover: none), (pointer: coarse) {
    .header-icon-button:hover,
    .bookmarks-button:hover,
    .dealer-map-reset:hover,
    .mobile-quick-actions button:hover,
    .mobile-quick-actions a:hover {
        transform: none;
        box-shadow: var(--control-shadow);
    }

    .stock-search-submit:hover {
        background: var(--accent);
        color: #fff;
    }

    .qr-scan-button:hover {
        background: rgba(255, 255, 255, 0.62);
        color: #1d1d1f;
    }

    .card:hover,
    .model-card:hover,
    .model-card:focus {
        transform: none;
        box-shadow: var(--control-shadow);
    }
}

@media (max-width: 560px) {
    .homepage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .model-card-image {
        height: 104px;
    }

    .homepage-grid.model-selector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .model-card--selector .model-card-image { flex-basis: 72px; height: 72px; padding: 5px 6px 3px; }
    .model-card--selector .model-card-content { padding: 7px 8px; }
    .model-card--selector .model-card-title-row { align-items: center; }
    .model-card--selector .model-card-title { font-size: 12px; line-height: 1.1; }
    .model-card--selector .ford-model-wordmark--f150 { font-size: 15px !important; }
    .model-card--selector .ford-model-wordmark--super-duty { font-size: 9px !important; }
    .model-card--selector .ford-model-wordmark--bronco { font-size: 24px !important; }
    .model-card--selector .model-card-title-count { font-size: 10px; }
    .model-powertrain-tag { top: 4px; left: 4px; min-height: 15px; padding: 1px 3px; gap: 2px; font-size: 7px; }
    .model-powertrain-symbol { font-size: 7px; }

    .model-card-content {
        padding: 10px;
    }

    .model-card-title {
        font-size: 14px;
        line-height: 1.18;
    }
}

#qr-scan-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 10020;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.qr-scan-modal {
    background: var(--surface);
    border-radius: 12px;
    width: min(480px, 96vw);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.qr-scan-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 24px 0; margin-bottom: 16px;
}
.qr-scan-header h3 { margin: 0; font-size: 20px; font-weight: 600; }
.qr-scan-close {
    background: none; border: none; font-size: 28px; cursor: pointer;
    color: var(--muted); padding: 0; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
}
.qr-scan-close:hover { color: var(--text); }
.qr-scan-content { padding: 0 24px 24px; text-align: center; }
#qr-video {
    width: 100%; max-width: 400px; border-radius: 8px;
    border: 2px solid var(--border);
}
.qr-scan-instructions { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* Unified Apple-style controls across inventory, modals, and utility surfaces. */
:root {
    --control-bg: rgba(255, 255, 255, 0.82);
    --control-bg-hover: rgba(255, 255, 255, 0.96);
    --control-press-bg: rgba(242, 244, 247, 0.96);
    --control-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 2px rgba(0, 113, 227, 0.12);
    --control-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 18px rgba(0, 113, 227, 0.18);
}

.header-icon-button,
.bookmarks-button,
.product-switch-link,
.home-mode-toggle,
.qr-scan-button,
.dealer-map-reset,
.mobile-filter-button,
.mobile-filters-close,
.mobile-quick-actions button,
.mobile-quick-actions a,
.vehicle-detail .back-button,
.detail-cta .secondary,
.detail-bookmark-button,
.bookmark-button,
.card-photo-control,
.vehicle-service-action-button:not(.is-clean):not(:disabled),
.status-list-close,
.status-list-clear-btn,
.bookmarks-clear-button,
.score-action-btn,
.inventory-trends-interval-btn,
.score-month-option,
.feedback-close,
.feedback-cancel,
.vehicle-map-close,
.qr-scan-close,
.dealer-back-button,
.view-toggle-button,
.status-view-button,
.stock-search-doc-btn,
.stock-search-favorite-btn,
.stock-search-sold-btn {
    border-radius: var(--apple-control-radius, var(--radius-md));
    box-shadow: var(--control-shadow);
    transition:
        background var(--duration-fast) var(--ease-snappy),
        border-color var(--duration-fast) var(--ease-snappy),
        box-shadow var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.header-icon-button:hover,
.bookmarks-button:hover,
.product-switch-link:hover,
.qr-scan-button:hover,
.dealer-map-reset:hover,
.mobile-filter-button:hover,
.mobile-filters-close:hover,
.mobile-quick-actions button:hover,
.mobile-quick-actions a:hover,
.vehicle-detail .back-button:hover,
.detail-cta .secondary:hover,
.detail-bookmark-button:hover,
.bookmark-button:hover,
.card-photo-control:hover,
.vehicle-service-action-button:not(.is-clean):not(:disabled):hover,
.status-list-close:hover,
.status-list-clear-btn:hover,
.bookmarks-clear-button:hover,
.score-action-btn:hover,
.inventory-trends-interval-btn:hover,
.score-month-option:hover,
.feedback-close:hover,
.feedback-cancel:hover,
.vehicle-map-close:hover,
.qr-scan-close:hover,
.dealer-back-button:hover,
.view-toggle-button:hover,
.status-view-button:hover,
.stock-search-doc-btn:hover:not(:disabled),
.stock-search-favorite-btn:hover,
.stock-search-sold-btn:hover {
    background: var(--control-bg-hover);
    border-color: var(--border-strong);
    box-shadow: var(--control-shadow-hover);
    color: var(--text);
    text-decoration: none;
    transform: translateY(-1px);
}

.header-icon-button:focus-visible,
.bookmarks-button:focus-visible,
.product-switch-link:focus-visible,
.home-mode-toggle:focus-visible,
.stock-search-submit:focus-visible,
.qr-scan-button:focus-visible,
.dealer-map-reset:focus-visible,
.dealer-card-button:focus-visible,
.mobile-filter-button:focus-visible,
.mobile-filters-close:focus-visible,
.mobile-quick-actions button:focus-visible,
.mobile-quick-actions a:focus-visible,
.vehicle-detail .back-button:focus-visible,
.detail-cta button:focus-visible,
.detail-bookmark-button:focus-visible,
.bookmark-button:focus-visible,
.card-photo-control:focus-visible,
.vehicle-service-action-button:not(.is-clean):not(:disabled):focus-visible,
.status-list-close:focus-visible,
.status-list-clear-btn:focus-visible,
.bookmarks-clear-button:focus-visible,
.score-action-btn:focus-visible,
.inventory-trends-interval-btn:focus-visible,
.score-month-option:focus-visible,
.feedback-close:focus-visible,
.feedback-cancel:focus-visible,
.feedback-submit:focus-visible,
.vehicle-map-close:focus-visible,
.qr-scan-close:focus-visible,
.dealer-back-button:focus-visible,
.view-toggle-button:focus-visible,
.status-view-button:focus-visible,
.stock-search-doc-btn:focus-visible,
.stock-search-favorite-btn:focus-visible,
.stock-search-sold-btn:focus-visible {
    outline: none;
    border-color: rgba(0, 113, 227, 0.36);
    box-shadow: var(--control-focus-ring), var(--control-shadow);
}

.stock-search-submit,
.detail-cta .primary,
.score-signin-btn,
.feedback-submit {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: var(--control-primary-shadow);
    transition:
        background var(--duration-fast) var(--ease-snappy),
        border-color var(--duration-fast) var(--ease-snappy),
        box-shadow var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
}

.stock-search-submit:hover,
.detail-cta .primary:hover,
.score-signin-btn:hover,
.feedback-submit:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
    box-shadow: var(--control-primary-shadow-hover);
}

.header-icon-button:active,
.bookmarks-button:active,
.product-switch-link:active,
.home-mode-toggle:active,
.stock-search-submit:active,
.qr-scan-button:active,
.dealer-map-reset:active,
.dealer-card-button:active,
.mobile-filter-button:active,
.mobile-filters-close:active,
.mobile-quick-actions button:active,
.mobile-quick-actions a:active,
.vehicle-detail .back-button:active,
.detail-cta button:active,
.detail-bookmark-button:active,
.bookmark-button:active,
.card-photo-control:active,
.vehicle-service-action-button:not(.is-clean):not(:disabled):active,
.status-list-close:active,
.status-list-clear-btn:active,
.bookmarks-clear-button:active,
.score-action-btn:active,
.inventory-trends-interval-btn:active,
.score-month-option:active,
.score-signin-btn:active,
.feedback-close:active,
.feedback-cancel:active,
.feedback-submit:active:not(:disabled),
.vehicle-map-close:active,
.qr-scan-close:active,
.dealer-back-button:active,
.view-toggle-button:active,
.status-view-button:active,
.stock-search-doc-btn:active:not(:disabled),
.stock-search-favorite-btn:active,
.stock-search-sold-btn:active {
    box-shadow: var(--control-shadow);
    transform: translateY(0) scale(0.98);
}

.detail-hero-nav {
    border-radius: var(--apple-control-radius, var(--radius-md));
    box-shadow: var(--control-shadow);
    transition:
        background var(--duration-fast) var(--ease-snappy),
        border-color var(--duration-fast) var(--ease-snappy),
        box-shadow var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
}

.detail-hero-nav:hover,
.detail-hero-nav:focus-visible {
    background: var(--control-bg-hover);
    border-color: var(--border-strong);
    box-shadow: var(--control-shadow-hover);
    color: var(--text);
    outline: none;
    transform: translateY(-50%) scale(1.015);
}

.detail-hero-nav:active {
    transform: translateY(-50%) scale(0.98);
}

.home-mode-toggle[data-mode="used"] {
    background: rgba(255, 149, 0, 0.12);
    color: #b25a00;
}

.home-mode-toggle[data-mode="used"]:hover {
    background: rgba(255, 149, 0, 0.18);
    color: #8a4300;
}

.bookmarks-button.active,
.bookmarks-button.has-count,
.detail-bookmark-button.bookmarked,
.bookmark-button.bookmarked {
    box-shadow: var(--control-shadow);
}

.stock-search-result,
.stock-search-query-result,
.dealer-card-button,
.filter-option,
.tag-clickable,
.active-filter-tag button {
    transition:
        background var(--duration-fast) var(--ease-snappy),
        border-color var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy),
        transform var(--duration-fast) var(--ease-snappy);
    -webkit-tap-highlight-color: transparent;
}

.stock-search-result:hover,
.stock-search-result:focus-visible,
.stock-search-query-result:hover,
.stock-search-query-result:focus-visible,
.dealer-card-button:hover,
.dealer-card-button:focus-visible,
.filter-option:hover,
.tag-clickable:hover,
.active-filter-tag button:hover {
    background: rgba(0, 113, 227, 0.07);
    color: var(--text);
    outline: none;
}

button:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

.feedback-submit:disabled,
.stock-search-doc-btn:disabled {
    background: var(--surface-muted);
    border-color: var(--border);
    color: var(--muted);
    box-shadow: none;
}

@media (hover: none), (pointer: coarse) {
    .header-icon-button:hover,
    .bookmarks-button:hover,
    .product-switch-link:hover,
    .dealer-map-reset:hover,
    .mobile-filter-button:hover,
    .mobile-filters-close:hover,
    .mobile-quick-actions button:hover,
    .mobile-quick-actions a:hover,
    .vehicle-detail .back-button:hover,
    .detail-cta .secondary:hover,
    .detail-bookmark-button:hover,
    .bookmark-button:hover,
    .card-photo-control:hover,
    .status-list-close:hover,
    .status-list-clear-btn:hover,
    .score-action-btn:hover,
    .inventory-trends-interval-btn:hover,
    .score-month-option:hover,
    .feedback-close:hover,
    .feedback-cancel:hover,
    .vehicle-map-close:hover,
    .qr-scan-close:hover,
    .dealer-back-button:hover,
    .view-toggle-button:hover,
    .status-view-button:hover,
    .stock-search-favorite-btn:hover,
    .stock-search-sold-btn:hover {
        background: var(--control-bg);
        box-shadow: var(--control-shadow);
        transform: none;
    }

    .stock-search-submit:hover,
    .detail-cta .primary:hover,
    .score-signin-btn:hover,
    .feedback-submit:hover:not(:disabled) {
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: var(--control-primary-shadow);
        transform: none;
    }
}

/* Fairfield New/Used toggle exception: keep this as the original square search-bar segment. */
.stock-search .home-mode-toggle {
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition:
        background var(--duration-fast) var(--ease-snappy),
        color var(--duration-fast) var(--ease-snappy);
}

.stock-search .home-mode-toggle:hover {
    box-shadow: none;
    transform: none;
}

.stock-search .home-mode-toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent-ring);
    z-index: 1;
}

.stock-search .home-mode-toggle:active {
    box-shadow: none;
    transform: scale(0.98);
}

.stock-search .home-mode-toggle[data-mode="new"] {
    background: rgba(0, 113, 227, 0.10);
    color: #0066cc;
}

.stock-search .home-mode-toggle[data-mode="used"] {
    background: rgba(255, 149, 0, 0.12);
    color: #b25a00;
}

.stock-search .home-mode-toggle[data-mode="new"]:hover {
    background: rgba(0, 113, 227, 0.08);
    color: #0066cc;
}

.stock-search .home-mode-toggle[data-mode="used"]:hover {
    background: rgba(255, 149, 0, 0.12);
    color: #b25a00;
}

/* Keep search-bar utility segments visually aligned with the top menu controls. */
.stock-search .stock-search-submit,
.stock-search .qr-scan-button {
    background: rgba(255, 255, 255, 0.62);
    border-left-color: var(--border);
    color: #1d1d1f;
    box-shadow: none;
}

.stock-search .stock-search-submit:hover,
.stock-search .qr-scan-button:hover {
    background: rgba(0, 113, 227, 0.08);
    border-left-color: var(--border-strong);
    color: #0066cc;
    box-shadow: none;
    transform: none;
}

.stock-search .stock-search-submit:focus-visible,
.stock-search .qr-scan-button:focus-visible {
    box-shadow: var(--control-focus-ring);
}

.stock-search .stock-search-submit:active,
.stock-search .qr-scan-button:active {
    background: var(--control-press-bg);
    box-shadow: none;
    transform: scale(0.98);
}

@media (hover: none), (pointer: coarse) {
    .stock-search .stock-search-submit:hover,
    .stock-search .qr-scan-button:hover {
        background: rgba(255, 255, 255, 0.62);
        border-left-color: var(--border);
        color: #1d1d1f;
        box-shadow: none;
        transform: none;
    }
}

@media (max-width: 900px) {
    :root {
        --duration-fast: 0.08s;
        --duration-normal: 0.14s;
        --ff-mobile-top-bar-height: 59px;
        --ff-mobile-bottom-bar-height: 64px;
    }

    .stock-search input,
    .header-search-row .stock-search input {
        align-self: stretch;
        height: auto;
        min-height: 100%;
        margin: 0;
        box-sizing: border-box;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 16px;
        line-height: 1.25;
        -webkit-appearance: none;
        appearance: none;
        caret-color: #0071e3;
        clip-path: inset(0 round 6px 0 0 6px);
    }
}

@media (max-width: 380px) {
    .header-lead:not(.is-store-context) .home-counts {
        display: none;
    }
}

.mobile-tab-icon {
    display: none;
}

.mobile-only-tab {
    display: none;
}

.mobile-back-button {
    display: none;
}