/* 
   SpareBlaze CSS - Premium Auto Parts E-Commerce 
   Aesthetics: Clean Light Theme, Vibrant High-tech Accents, Sleek Design 
*/

:root {
    /* Colors */
    --color-bg-base: #f4f5f7;
    --color-bg-surface: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-primary: #e63900;
    --color-primary-hover: #cc3300;
    --color-primary-light: rgba(230, 57, 0, 0.1);
    --color-text-main: #111827;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-success: #059669;
    --color-warning: #d97706;
    --color-error: #dc2626;

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Layout & Shadows */
    --max-width: 1280px;
    --radius-sm: 10px;
    --radius-md: 10px;
    --radius-lg: 10px;
    --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-glow: 0 0 15px rgba(230, 57, 0, 0.4);

    /* Animation */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-base);
    color: var(--color-text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
select {
    font-family: inherit;
    border: none;
    outline: none;
    background: none;
}

button {
    cursor: pointer;
}

/* Typography Utilities */
.highlight {
    color: var(--color-primary);
}

.section-padding {
    padding: 5rem 1.5rem;
}

/* Inner-page section wrapper: keeps content aligned with nav/footer */
.section-padding>.categories-grid,
.section-padding>.products-grid,
.section-padding>.contact-container,
.section-padding>.content-section {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

.bg-darker {
    background-color: var(--color-bg-surface);
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.section-header p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

/* Components */
.badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    transition: all var(--transition-smooth);
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(230, 57, 0, 0.3);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn-primary:disabled {
    background-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secondary {
    background-color: white;
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background-color: var(--color-bg-base);
}

.hero-buttons .btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
}

.hero-buttons .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: white;
}

.w-100 {
    width: 100%;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    z-index: 100;
    transition: background var(--transition-smooth), box-shadow var(--transition-smooth);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.875rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-main);
    letter-spacing: -0.5px;
}

.logo img {
    height: 54px !important;
    width: auto !important;
    object-fit: contain !important;
}

.footer-brand .logo img {
    width: 190px !important;
    height: auto !important;
    max-width: 100%;
}

.search-container {
    flex: 1;
    max-width: 600px;
    display: flex;
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: relative;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-container:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    background: var(--color-bg-surface);
}

.search-category {
    border-right: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.02);
    position: relative;
    min-width: 160px;
    cursor: pointer;
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.dropdown-selected {
    padding: 0.8rem 1rem;
    color: var(--color-text-main);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.dropdown-selected i {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.search-category.active .dropdown-selected i {
    transform: rotate(180deg);
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: -1px;
    width: calc(100% + 2px);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-subtle);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-fast);
    z-index: 20;
    list-style: none;
    max-height: 250px;
    overflow-y: auto;
}

.search-category.active .dropdown-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-options li {
    padding: 0.8rem 1rem;
    color: var(--color-text-main);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.dropdown-options li:hover {
    background: var(--color-bg-base);
    color: var(--color-primary);
}

.search-container input {
    flex: 1;
    padding: 0.8rem 1rem;
    color: var(--color-text-main);
    font-size: 0.95rem;
    width: 100%;
}

.search-container input::placeholder {
    color: var(--color-text-muted);
}

.search-btn {
    padding: 0 1.2rem;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.search-btn:hover {
    color: var(--color-primary);
}

/* Search Dropdown Results */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    max-height: 300px;
    overflow-y: auto;
    z-index: 10;
    display: none;
    box-shadow: var(--shadow-subtle);
}

.search-results.active {
    display: block;
}

.search-result-item {
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.search-result-item:hover {
    background: var(--color-bg-base);
}

.search-result-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.search-result-info h4 {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.search-result-info p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-main);
    font-size: 1.2rem;
    transition: all var(--transition-fast);
}

.nav-icon-btn:hover {
    background: var(--color-bg-base);
    color: var(--color-primary);
}

.cart-btn {
    position: relative;
}

.cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--color-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-bg-surface);
}

.mobile-menu-btn {
    display: none;
    color: var(--color-text-main);
    font-size: 1.5rem;
}

.mobile-search {
    display: none;
    padding: 0.6rem 1rem;
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border);
    position: fixed;
    top: 70px;
    width: 100%;
    z-index: 98; /* above nav-categories (95) and other layers */
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.mobile-search-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.mobile-vehicle-select {
    flex-shrink: 0;
    width: 130px;
    padding: 0.55rem 1.75rem 0.55rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-base);
    color: var(--color-text-main);
    font-size: 0.82rem;
    font-family: var(--font-body);
    cursor: pointer;
    appearance: auto;
}

.mobile-search-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.mobile-search-wrap input {
    width: 100%;
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.55rem 2.4rem 0.55rem 0.8rem;
    color: var(--color-text-main);
    font-size: 0.9rem;
}

.mobile-search-btn {
    position: absolute;
    right: 0.7rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Mobile search results dropdown (uses shared .search-results styles) */
#mobile-search-results {
    position: static;
    margin-top: 0.4rem;
    border-radius: var(--radius-md);
    border-top: 1px solid var(--color-border);
}

/* ── Mobile Nav Menu (hamburger dropdown) ──────────────────────────────── */
.mobile-nav-menu {
    display: none;
    position: fixed;
    top: 128px; /* below navbar (~76px) + mobile-search (~52px) */
    left: 0;
    width: 100%;
    background: var(--color-bg-surface);
    border-bottom: 2px solid var(--color-border);
    z-index: 88;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    padding: 0.5rem 0 1rem;
}

.mobile-nav-menu.open {
    display: block;
}

.mobile-nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-menu ul li a {
    display: block;
    padding: 0.85rem 1.5rem;
    color: var(--color-text-main);
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mobile-nav-menu ul li a:hover,
.mobile-nav-menu ul li a:active {
    background: var(--color-bg-base);
    color: var(--color-primary);
}

.mobile-nav-menu .mobile-nav-header {
    padding: 0.75rem 1.5rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

/* Hamburger active state */
.mobile-menu-btn.active {
    color: var(--color-primary);
}

/* Secondary Navigation (Categories) */
.nav-categories {
    background: var(--color-bg-base);
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 0;
    margin-top: 76px;
    /* Offset for fixed top navbar */
    position: relative;
    z-index: 95;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.nav-categories .nav-container {
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0;
}

.all-categories-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0 1.5rem 0 0;
    background: transparent;
    color: var(--color-text-main);
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 0;
    border-right: 1px solid var(--color-border);
    line-height: 1;
    transition: color var(--transition-fast), background var(--transition-fast);
    margin-right: 1.5rem;
}

.all-categories-btn:hover {
    background: var(--color-bg-surface);
    color: var(--color-primary);
}

.category-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

@media (max-width: 768px) {
    .category-links {
        gap: 1.5rem;
    }
}

.category-links li {
    display: flex;
    align-items: center;
}

.category-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-main);
    white-space: nowrap;
    position: relative;
    display: inline-block;
    line-height: 1;
    padding: 0;
}

.category-links a:hover {
    color: var(--color-primary);
}

.category-links a.highlight {
    color: var(--color-primary);
    font-weight: 600;
}

/* ── Help Nav Dropdown ─────────────────────────────────────── */
.browse-parts-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 100%;
    background: none;
    border: none;
    border-left: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    transition: background 0.15s, color 0.15s;
}
.browse-parts-nav-btn:hover {
    background: rgba(230, 57, 0, 0.07);
}

/* help-nav-item lives directly inside .nav-container (sibling of
   .category-links), so it is NOT clipped by category-links' overflow-x:auto */
.help-nav-item {
    position: relative;
    flex-shrink: 0;
}

/* Invisible bridge covering the 4px gap between button and dropdown
   so the hover state is not lost when moving the mouse downward */
.help-nav-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 4px;
}

.help-nav-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary) !important;
    cursor: pointer;
    white-space: nowrap;
    padding: 0.3rem 0.8rem;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
    line-height: 1.4;
}

.help-nav-link:hover {
    background: var(--color-primary);
    color: #fff !important;
}

.help-chevron {
    font-size: 0.65rem;
    transition: transform 0.2s;
}

.help-nav-item:hover .help-chevron {
    transform: rotate(180deg);
}

.help-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;        /* flush with the button — no gap for the mouse to fall through */
    margin-top: 4px;  /* visual breathing room achieved via margin, not a hover-gap */
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    min-width: 210px;
    z-index: 200;
    padding: 0.4rem 0;
    flex-direction: column;
    overflow: hidden;
}

/* Shown via JS .open class (click/touch) OR CSS hover on desktop */
.help-nav-item.open .help-dropdown-menu,
.help-nav-item:hover .help-dropdown-menu {
    display: flex;
}

.help-dropdown-menu li {
    display: block;
    list-style: none;
}

.help-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-main) !important;
    white-space: nowrap;
    border-radius: 0;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
}

.help-dropdown-menu li:last-child a {
    border-bottom: none;
}

.help-dropdown-menu a:hover {
    background: var(--color-bg-base);
    color: var(--color-primary) !important;
}

.help-dropdown-menu a i {
    color: var(--color-primary);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Help Pages – shared layout styles ─────────────────────── */
.help-page-header {
    background: linear-gradient(135deg, var(--color-bg-base) 0%, #e2e8f0 100%);
    padding: 8rem 1.5rem 4rem;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.help-page-header h1 {
    font-size: 3.5rem;
    color: var(--color-text-main);
    margin-bottom: 1rem;
}

.help-page-header p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.help-breadcrumb {
    max-width: var(--max-width);
    margin: 0 auto 1.5rem;
    padding: 0 1.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.help-breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
}

.help-breadcrumb a:hover {
    text-decoration: underline;
}

/* ── Hero Section — main promo carousel + two mini promo carousels ───────────
   Was previously a single full-bleed slider filling almost the whole first
   viewport. Now a shorter 2-column grid: .hero-main (the same admin-managed
   #hero-slider carousel, just narrower) on the left, .hero-side (two
   independently-rotating .hero-mini carousels stacked) on the right, so
   the product sections below are reachable without much scrolling. Height
   budget is a little taller than a bare-minimum shrink would need — the
   mini cards need enough room to read as real feature cards (large image +
   a proper text panel), not a sliver squeezed beside the main carousel. */
.hero {
    position: relative;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    background: #111;
    color: white;
    margin-bottom: 0px;
    overflow: hidden;
}

@media (max-width: 992px) {
    .hero {
        min-height: 380px;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 0;
        margin-bottom: 20px;
    }
}

.hero-grid {
    flex: 1;
    display: grid;
    /* ~63% / ~37% — within the requested 60–65% / 35–40% split. */
    grid-template-columns: 1.7fr 1fr;
    gap: 14px;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 14px 20px;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .hero-grid { gap: 10px; padding: 10px 16px; }
}

@media (max-width: 768px) {
    .hero-grid {
        display: flex;
        flex-direction: column;
        padding: 10px 14px;
        gap: 8px;
    }
}

.hero-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow-subtle);
}

@media (max-width: 768px) {
    /* 240px used to be tight enough that the longest slide (badge + 2-line
       heading + 3-4 line paragraph + buttons + the reserved 46px for
       .hero-slider-nav) could exceed it — and .hero-main clips overflow
       for its rounded corners, so anything past 240px was silently cut
       off instead of wrapping into view. 320px plus the tighter type scale
       below (.hero h1/.hero p) comfortably fits that worst-case slide with
       margin to spare, verified by hand against the actual slide 1 copy in
       index.html, not just eyeballed. */
    .hero-main { height: 320px; flex-shrink: 0; }
}

@media (max-width: 480px) {
    /* Narrower still means each line holds fewer words, so line count (and
       required height) actually goes *up* as the viewport shrinks unless
       the type scale comes down too — this tier exists so a 320–375px
       phone doesn't need an even taller .hero-main than a 767px one. */
    .hero-main { height: 300px; }
}

.hero-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

@media (max-width: 992px) {
    .hero-side { gap: 10px; }
}

@media (max-width: 768px) {
    /* Side-by-side still works down to ~577px — two cards at roughly
       366px each (768px viewport) down to ~270px each (577px) is still
       enough room for the text|photo split inside .hero-mini to read
       comfortably. Below that (see the 576px tier) each card no longer
       has enough width to stay side-by-side without squeezing its text
       column down to a sliver — that's what was cramming/breaking the
       cards on phones, so they switch to full-width stacked instead. */
    .hero-side { flex-direction: row; height: 150px; flex-shrink: 0; }
}

.slider-container {
    position: absolute;
    inset: 0;
}

.slide, .hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Reserves room for .hero-slider-nav (the arrow/dots/arrow row) sitting
       below the content — see that block further down — so the vertically
       centered content above never overlaps it. */
    padding-bottom: 56px;
}

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

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 5;
    /* Higher than background but lower than content */
}

.hero-content {
    position: relative;
    z-index: 20;
    /* High z-index to ensure visibility above overlay */
    max-width: 92%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0 1.75rem;
    transform: translateX(-20px);
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;
}

.slide.active .hero-content, .hero-slide.active .hero-content {
    transform: translateX(0);
    opacity: 1;
    transition-delay: 0.3s;
}

.hero h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    letter-spacing: -0.5px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.hero p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 420px;
    margin: 0;
    /* Align left */
}

.hero-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* Align left */
}

.hero-content .btn {
    padding: 0.6rem 1.3rem;
    font-size: 0.85rem;
}

/* ── Main carousel nav row — arrow · dots · arrow ─────────────────────────
   Previously the arrows sat individually at top:50%/left/right, vertically
   centered over the slide — close enough to the (also vertically centered)
   heading/copy that a long headline could visually collide with them. Now
   grouped into one row, pinned to the bottom-left of the card (same inset
   as .hero-content's own padding, so it reads as intentionally aligned
   with the text above it), clear of the content entirely. */
.hero-slider-nav {
    position: absolute;
    left: 1.75rem;
    bottom: 16px;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-btn {
    position: static;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.slider-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.1);
}

.slider-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    /* Changed to semi-transparent white */
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--color-primary);
    transform: scale(1.3);
}

@media (max-width: 768px) {
    .hero-content { padding: 0 1.1rem; gap: 0.5rem; }
    .hero h1 { font-size: 1.5rem; line-height: 1.2; }
    .hero p { max-width: 100%; font-size: 0.86rem; line-height: 1.35; }
    .badge { padding: 0.3rem 0.8rem; font-size: 0.72rem; }
    .hero-content .btn { padding: 0.5rem 1.1rem; font-size: 0.8rem; }
    .hero-slide { padding-bottom: 44px; }
    .hero-slider-nav { left: 1.1rem; bottom: 10px; gap: 8px; }
    .slider-btn { width: 26px; height: 26px; font-size: 0.62rem; }
    .dot { width: 6px; height: 6px; }
}

@media (max-width: 480px) {
    /* Same reasoning as the .hero-main height tier above: less width per
       line means more lines unless type shrinks further too. */
    .hero-content { gap: 0.4rem; }
    .hero h1 { font-size: 1.3rem; }
    .hero p { font-size: 0.8rem; line-height: 1.3; }
}

/* ── Mini promo carousels (.hero-side) ────────────────────────────────────
   Redesigned as feature cards: a dedicated image zone on top (the actual
   product/lifestyle photo, shown with object-fit:contain so nothing important
   is cropped out — a neutral gradient backs it so square product shots don't
   look like they're floating in empty space) and a solid dark text panel
   below (same #1a1a2e→#0f3460 gradient used by the site's other dark promo
   panels, e.g. return-policy.html's CTA card) rather than the previous
   full-bleed image-with-dark-scrim treatment, which dimmed the photo itself
   to keep the overlaid text legible. Same crossfade-slide mechanism as the
   main carousel (.hero-mini-slide mirrors .hero-slide), driven by the same
   initCarousel() helper in script.js with its own root/dots ids —
   independent state and timers per carousel, so they never step on each
   other or the main one. Each slide is a single <a> (whole card is the CTA)
   rather than a nested button, to keep the markup valid and the tap target
   large on touch devices. */
.hero-mini {
    position: relative;
    flex: 1;
    min-height: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #1a1a2e;
    box-shadow: var(--shadow-subtle);
}

.hero-mini-track {
    position: absolute;
    inset: 0;
}

/* Two-part horizontal card: text + CTA on the left (.hero-mini-info), a
   large real product cutout on the right (.hero-mini-photo) — per the
   "Left = content, Right = product image" layout. Fixed dimensions come
   from .hero-mini's own box (bounded by .hero-side), never from the content,
   so a slide can never grow the card or get clipped by it; text sizing is
   tuned per-breakpoint below specifically so the CTA is always fully inside. */
.hero-mini-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0.7s;
}

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

/* Clean white background — same for every slide on both carousels. The
   previous design gave each of the 20 slides its own color-to-white
   gradient; the inconsistency between neighbouring slides (and between the
   two carousels) read as noisy rather than premium, so both cards now
   share one flat, consistent background instead. That also means text
   color no longer needs to switch per slide (some gradients needed white
   text, others navy, to stay readable against their own colors) — a
   single navy treatment is safely high-contrast against white everywhere,
   every time, which is simpler and more reliably legible than 20 solved
   variants ever was. */
.hero-mini-slide { background: #fff; }

.hero-mini-info {
    flex: 1 1 45%;
    min-width: 0;
    box-sizing: border-box;
    padding: 14px 4px 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

/* Fixed navy text — every card is plain white now, so there's no longer a
   need to solve a different text color per slide the way the old
   color→white gradients did. Navy-on-white is comfortably >13:1 contrast,
   far past the ~4.5:1 AA minimum for this text size, so it stays legible
   with plenty of margin at every breakpoint down to the smallest card. */
.hero-mini-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px 9px;
    margin-bottom: 4px;
    background: rgba(26, 26, 46, 0.08);
    border: 1px solid rgba(26, 26, 46, 0.2);
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1a1a2e;
}

/* Headings noticeably larger/bolder than before — a solid-color card has no
   legibility ceiling the way text-over-photo did, so there's room to push
   size and weight up. */
.hero-mini-info h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.12;
    letter-spacing: -0.3px;
    color: #1a1a2e;
}

.hero-mini-info p {
    font-size: 0.78rem;
    color: rgba(26, 26, 46, 0.68);
    margin: 3px 0 8px;
    line-height: 1.3;
}

.hero-mini-cta-btn {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.hero-mini-cta-btn i {
    font-size: 0.68rem;
    transition: transform var(--transition-fast);
}

.hero-mini-slide:hover .hero-mini-cta-btn {
    background: #c62e00;
    transform: translateY(-1px);
}

.hero-mini-slide:hover .hero-mini-cta-btn i {
    transform: translateX(3px);
}

.hero-mini-slide:active .hero-mini-cta-btn {
    transform: translateY(0) scale(0.97);
}

.hero-mini-photo {
    position: relative;
    flex: 0 0 55%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Generous, asymmetric padding — more on the right/bottom than the
       inner edge — so the product reads as "placed with room to breathe"
       in a spacious white area rather than pinned against the fading
       color. object-fit:contain on the img means this only ever shrinks
       the product to fit; it can never get clipped by the extra padding. */
    padding: 14px 22px 14px 8px;
    box-sizing: border-box;
}

.hero-mini-photo img {
    width: 100%;
    height: 100%;
    /* contain, not cover — shows the whole product (per the "avoid
       aggressive cropping" requirement) instead of trimming it to fill the
       box, and never distorts/stretches it. Source files are true
       alpha-transparent cutouts (frontend/public/images/products/cutouts/,
       background programmatically removed — see the comment above
       .hero-side in index.html), so the product sits directly on the card
       gradient with no blend-mode or opacity trick and no backing
       rectangle — full, undimmed clarity. The drop-shadow is float, not a
       fade: it's cast only from the product's own alpha silhouette. */
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
    transition: transform var(--transition-smooth);
}

.hero-mini-slide:hover .hero-mini-photo img {
    transform: scale(1.06);
}

/* Sits over .hero-mini-photo, which is now plain white — white dots alone
   would disappear against it, so they keep their own small frosted-dark
   chip behind them for contrast rather than relying on the card color. */
.hero-mini-dots {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(3px);
    border-radius: 999px;
}

.hero-mini-dots .dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.5);
}

.hero-mini-dots .dot.active {
    background: #fff;
    transform: scale(1.25);
}

@media (max-width: 992px) {
    .hero-mini-info { padding: 10px 4px 10px 14px; }
    .hero-mini-info h3 { font-size: 1.08rem; }
    .hero-mini-info p { font-size: 0.72rem; margin: 2px 0 6px; }
    .hero-mini-cta-btn { padding: 7px 13px; }
}

@media (max-width: 768px) {
    .hero-mini-info { flex-basis: 46%; padding: 8px 4px 8px 12px; gap: 1px; }
    .hero-mini-photo { flex-basis: 54%; padding: 8px 10px 8px 4px; }
    .hero-mini-info h3 { font-size: 0.9rem; }
    .hero-mini-info p { font-size: 0.62rem; margin: 1px 0 5px; }
    .hero-mini-cta-btn { font-size: 0.64rem; padding: 6px 11px; gap: 5px; }
    .hero-mini-cta-btn i { font-size: 0.6rem; }
    .hero-mini-badge { font-size: 0.54rem; padding: 2px 6px; margin-bottom: 2px; }
    .hero-mini-dots { top: 5px; right: 5px; }
}

/* Full viewport width per card instead of half, below ~577px — same
   46%/54% .hero-mini-info/-photo split as the 768px tier above, just
   applied to a card roughly twice as wide as the side-by-side layout
   gives it, which is what actually fixes phone-width cramping instead of
   fighting it with smaller and smaller type.
   BUG THIS FIXED: this block previously lived right after the *base*
   .hero-side rule, up near the top of the hero CSS — textually *before*
   the unconditional (non-media-query) `.hero-mini { flex:1; ... }` rule
   further down this file. Media queries add no specificity, so with two
   equal-specificity `.hero-mini` declarations the *later one in the
   file* wins regardless of which is inside an @media block — the later,
   unconditional `flex:1` rule was silently overriding this `height:150px`
   at every width, not just ≤576px. .hero-mini's own children
   (.hero-mini-track, .hero-mini-dots) are all position:absolute, so with
   no explicit height and .hero-side also at height:auto, both cards
   collapsed to 0 height instead of 150px — invisible, not just cramped.
   Moving this block below .hero-mini's base rule (any rule after this
   point is safe) fixes the cascade; nothing about the rule itself was
   wrong. */
@media (max-width: 576px) {
    .hero-side { flex-direction: column; height: auto; gap: 10px; }
    .hero-mini { flex: none; height: 150px; }
}

/* Very narrow phones: keep the SAME composition as every wider tier — text
   + CTA on the left, product on the right, horizontal left-to-right
   gradient — just scaled down a further, proportional step from the 768px
   tier's sizes rather than rearranged. An earlier version of this rule
   switched to a photo-on-top/text-below stack and turned the gradient 90°
   to vertical below 480px; that's deliberately reverted — the composition
   must stay "Left = content, Right = product" and the gradient must stay
   horizontal at every breakpoint, full stop. Since .hero-side already
   gives each card the FULL viewport width below 576px (see that block
   above), a 320px phone's card is only marginally narrower than the
   270px-per-card floor the 768px tier's side-by-side layout already
   handles at ~577px — so this only needs a modest trim, not a redesign,
   to keep a comfortable margin at the narrowest tested width. */
@media (max-width: 480px) {
    .hero-mini-info { padding: 7px 3px 7px 10px; gap: 1px; }
    .hero-mini-photo { padding: 7px 8px 7px 3px; }
    .hero-mini-badge { font-size: 0.5rem; padding: 2px 5px; margin-bottom: 1px; }
    .hero-mini-info h3 { font-size: 0.8rem; line-height: 1.15; }
    .hero-mini-info p { font-size: 0.58rem; margin: 1px 0 4px; line-height: 1.3; }
    .hero-mini-cta-btn { font-size: 0.58rem; padding: 5px 9px; gap: 4px; }
    .hero-mini-cta-btn i { font-size: 0.52rem; }
}

.hero-bottom-trust {
    position: relative;
    width: 100%;
    background: var(--color-bg-surface);
    padding: 2rem 0;
    /* Reduced height by 20% (from 2.5rem) */
    border-bottom: 1px solid var(--color-border);
    z-index: 5;
}

.hero-bottom-trust .trust-indicators {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

@media (max-width: 768px) {
    .hero-bottom-trust .trust-indicators {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-main);
    font-weight: 500;
}

.trust-item i {
    color: var(--color-primary);
    font-size: 1.35rem;
    /* Increased size by 50% from base text size */
}

/* Popular Car Makers */
.makers-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
}

.maker-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    color: var(--color-text-main);
    font-size: 0.95rem;
    /* min-height, not height — a longer brand name (or the same name
       wrapped to 2 lines on a narrow card) needs to be able to grow the
       card instead of being forced into a fixed box. A literal `height`
       here doesn't clip via overflow, but it does let a 2-line name spill
       past the card's own border/background and visually collide with
       the row of cards below it — indistinguishable from "cropped" to a
       user even though no pixels were technically cut. */
    min-height: 70px;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.maker-card:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(230, 57, 0, 0.1);
    transform: translateY(-2px);
}

.maker-card img {
    height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.maker-name {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: var(--color-text-main);
    text-align: center;
    line-height: 1.25;
    /* No white-space:nowrap and no text-overflow:ellipsis anywhere on this
       element — a long name is meant to wrap onto a second line, never get
       truncated. overflow-wrap is a safety net for the rare name with no
       natural break point (no space/hyphen) that's still wider than the
       card, so it wraps mid-word instead of forcing the card wider than
       its grid track and causing horizontal overflow. */
    overflow-wrap: break-word;
}

.maker-card--text:hover .maker-name {
    color: var(--color-primary);
}

.maker-card--skeleton {
    background: linear-gradient(90deg, var(--color-bg-surface) 25%, var(--color-border) 50%, var(--color-bg-surface) 75%);
    background-size: 200% 100%;
    animation: maker-skeleton-pulse 1.4s ease-in-out infinite;
    min-height: 52px;
    border-color: transparent;
}

@keyframes maker-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsive tiers for "Shop By Car Brands". The grid's own
   repeat(auto-fill, minmax(130px, 1fr)) already reduces the column count
   as the viewport narrows — at ~320-460px available width that naturally
   settles on 2 columns, at ~460-600px on 3, growing from there — so
   there's deliberately no column-count override below: a previous
   `grid-template-columns: repeat(3, 1fr)` rule at <=600px forced exactly
   3 columns even at 320px width (~83px per card), which is what was
   crushing brand names like "Maruti Suzuki" into a box too narrow and too
   short (`height:70px`, fixed) to hold them — the two bugs compounded.
   With .maker-card now min-height instead of height, auto-fill's own
   narrower-but-fewer columns is already the "reduce cards per row instead
   of shrinking text into nothing" behavior asked for; these tiers only
   trim gap/padding/font-size a further proportional step so cards stay
   comfortably spaced rather than just technically non-broken. */
@media (max-width: 768px) {
    .makers-grid { gap: 0.7rem; }
    .maker-card { padding: 0.8rem 0.4rem; min-height: 64px; }
    .maker-name { font-size: 0.85rem; }
}

@media (max-width: 480px) {
    .makers-grid { gap: 0.55rem; }
    .maker-card { padding: 0.7rem 0.35rem; min-height: 58px; }
    .maker-name { font-size: 0.78rem; }
}

.makers-grid.is-empty {
    display: none;
}

/* Products Carousel */
.products-carousel-section {
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
}

.products-carousel-section .section-title,
.top-categories-section .section-title,
.featured-products-section .section-title,
.why-spareblaze-section .section-title,
.testimonials-section .section-title {
    font-size: 2.5rem;
}

.products-carousel-section .section-desc,
.top-categories-section .section-desc,
.featured-products-section .section-desc,
.why-spareblaze-section .section-desc,
.testimonials-section .section-desc {
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .products-carousel-section .section-title,
    .top-categories-section .section-title,
    .featured-products-section .section-title,
    .why-spareblaze-section .section-title,
    .testimonials-section .section-title {
        font-size: 2rem;
    }
}

.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 1rem 0;
}

.carousel-container::before,
.carousel-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 10%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.carousel-container::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg-surface) 0%, transparent 100%);
}

.carousel-container::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg-surface) 0%, transparent 100%);
}

.carousel-track {
    display: flex;
    align-items: center;
    /* 23 brands * 2 for seamless loop. Each item is 200px wide */
    width: calc(200px * 46);
    animation: scroll-carousel 45s linear infinite;
}

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

.carousel-item {
    width: 200px;
    flex-shrink: 0;
    padding: 0 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Full color by default — logos used to start desaturated/dimmed
       (grayscale(100%) opacity(0.6)) and only reveal their real brand
       colors on hover, which reads as washed-out/untrustworthy on first
       glance and never resolves at all on touch devices with no hover. */
    transition: transform var(--transition-fast);
}

.carousel-item:hover {
    transform: scale(1.1);
    z-index: 5;
}

.carousel-item img {
    height: 60px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
}

@keyframes scroll-carousel {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Translate half the track width — --carousel-shift is set in JS to
           match the actual DB brand count, defaulting to 23 as a fallback. */
        transform: translateX(var(--carousel-shift, calc(-200px * 23)));
    }
}

/* Categories Grid */
.categories-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    /* Increased gap for better breathing room */
}

.category-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: var(--color-bg-surface);
    /* Reverted to white/surface */
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    perspective: 1000px;
    color: var(--color-text-main);
    /* Reverted to dark text */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    /* Geneorus padding */
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.placeholder-img {
    height: 200px;
    background: linear-gradient(45deg, #e5e7eb, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.placeholder-img::after {
    content: attr(data-text);
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.05);
    position: absolute;
    transform: rotate(-10deg) scale(1.5);
}

/* Icon-based category cards with 3D depth */
.cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    width: 120px;
    height: 120px;
    position: relative;
    transition: all 0.5s ease;
}

.cat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.cat-ic.logo img {
    height: 54px !important;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.cat-icon i {
    text-shadow: 0 4px 10px rgba(230, 57, 0, 0.2);
    /* Subtle glow for fallback icons */
    transition: transform 0.5s ease;
}

.category-card:hover .cat-icon img,
.category-card:hover .cat-icon i {
    transform: scale(1.1);
}

.cat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.cat-content h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-main);
    font-weight: 700;
}

.cat-action {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.7rem 1.6rem;
    background: var(--color-primary);
    /* Primary red background for button */
    border-radius: 50px;
    transition: all 0.3s ease;
    margin-top: 1.5rem;
    box-shadow: 0 4px 10px rgba(230, 57, 0, 0.2);
}

.category-card:hover .cat-action {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(230, 57, 0, 0.3);
    padding-right: 2rem;
}

.cat-action i {
    transition: transform 0.3s ease;
}

.category-card:hover .cat-action i {
    transform: translateX(4px);
}

/* Product Card */
/* Global definition for products-grid (used by homepage/search) */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 2rem;
}

/* .prod-grid is used by catalog pages (after-market, oem, etc.) */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

.product-img-wrap {
    height: 220px;
    position: relative;
    background: #fdfdfd;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

/* When a link wraps the image inside the card, make it fill the flex container
   so that max-height/max-width on the img resolve correctly. */
.product-img-wrap > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.product-img-wrap img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform var(--transition-smooth);
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.05);
}

/* "Image shown for illustrative purposes only" caption — used/refurbished
   listings only (see productImageDisclaimerHtml() in script.js). A frosted
   white backdrop guarantees the red text stays readable regardless of what
   colors are underneath it in the product photo, rather than relying on
   the photo happening to be light there. Pinned to the image wrap's own
   bottom edge (that wrap is already position:relative/overflow:hidden), so
   it never affects card height or pushes the info block below it, and
   text wraps naturally (no nowrap/ellipsis) if a narrower card needs 2 lines. */
.product-img-disclaimer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.9);
    color: #dc2626;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

@media (max-width: 480px) {
    .product-img-disclaimer { font-size: 0.6rem; padding: 3px 6px; }
}

.product-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--color-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    /* Modern pill shape */
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
    box-shadow: 0 4px 8px rgba(230, 57, 0, 0.3);
}

.product-info {
    padding: 1.2rem;
    /* Refined padding */
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-brand {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    /* More spaced for premium feel */
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.product-title {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-main);
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-compatibility {
    font-size: 0.85rem;
    color: var(--color-success);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.product-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 1rem;
}

.product-actions .btn {
    width: 100% !important;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.7rem !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.view-details-btn {
    background: transparent;
    color: var(--color-text-main);
    border: 1.5px solid var(--color-border) !important;
}

.view-details-btn:hover {
    background: var(--color-text-main);
    color: white;
    border-color: var(--color-text-main) !important;
}

.product-price {
    font-size: 1.35rem;
    /* Larger price */
    font-weight: 800;
    /* Bolder */
    color: var(--color-primary);
    /* Primary color for price */
    margin-bottom: 0.75rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.product-price span {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-weight: 400;
}

.add-cart-btn {
    background: var(--color-primary);
    color: white;
    border: none;
}

.add-cart-btn.added {
    background: var(--color-success);
    color: white;
}

.add-cart-btn:hover:not(.added) {
    background: #c7320a;
    transform: translateY(-1px);
}

/* Testimonials */
.testimonials-section {
    background: var(--color-bg-base);
}

.testimonials-carousel {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

.testimonials-viewport {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.testimonials-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 2.5rem 3rem;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--color-border);
    text-align: center;
}

.testimonial-text {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--color-text-main);
    margin-bottom: 1.5rem;
    font-style: italic;
}

.testimonial-author {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.95rem;
}

.testimonials-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--shadow-subtle);
    transition: all var(--transition-fast);
    color: var(--color-text-main);
}

.testimonials-btn.prev { left: -22px; }
.testimonials-btn.next { right: -22px; }

.testimonials-btn:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

.testimonials-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.testimonials-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.testimonials-dots .dot.active {
    background: var(--color-primary);
    width: 24px;
    border-radius: 4px;
}

@media (max-width: 992px) {
    .testimonials-carousel {
        max-width: 640px;
    }
}

@media (max-width: 768px) {
    /* Side padding widened to clear the 44px-wide arrows (kept at full size
       intentionally — see .testimonials-btn) now inset at 0.25rem instead of
       sitting outside the card; the old 1.5rem padding let the arrows
       overlap the quote text. */
    .testimonial-card {
        padding: 2rem 3.25rem;
    }

    .testimonial-text {
        font-size: 0.95rem;
    }

    .testimonials-btn.prev { left: 0.25rem; }
    .testimonials-btn.next { right: 0.25rem; }
}

/* CTA Banner */
/* The Unsplash URL previously had no width cap, so it served a 5.8 MB original
   (2.5 MB of it pure waste per PageSpeed). It sits under a 95%-opaque gradient
   and is barely visible, so w=1400/q=45 is indistinguishable and ~40x smaller. */
.cta-banner {
    background: linear-gradient(to right, rgba(230, 57, 0, 0.95), rgba(200, 40, 0, 0.95)), url('https://images.unsplash.com/photo-1625047509248-ec889cbff17f?auto=format&fit=crop&w=1400&q=45') center/cover;
    padding: 5rem 1.5rem;
    text-align: center;
    color: white;
}

.cta-content {
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-content p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.cta-content .btn-primary {
    background: white;
    color: var(--color-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cta-content .btn-primary:hover {
    background: var(--color-bg-base);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Footer - Keeps Dark Theme for contrast */
footer {
    background: #111827;
    padding-top: 5rem;
    color: #f3f4f6;
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr) 1.3fr;
    gap: 2.5rem 2rem;
}

.footer-brand .logo {
    color: white;
}

.footer-brand p {
    color: #9ca3af;
    margin: 1.5rem 0;
    max-width: 280px;
    font-size: 0.9rem;
    line-height: 1.6;
}

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

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1f2937;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 1px solid #374151;
}

.social-links a:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.footer-links h3,
.footer-contact h3 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

.footer-links h3::after,
.footer-contact h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--color-primary);
}

.footer-links ul li {
    margin-bottom: 0.8rem;
}

.footer-links ul a {
    color: #9ca3af;
}

.footer-links ul a:hover {
    color: white;
    padding-left: 5px;
}

.footer-contact p {
    color: #9ca3af;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.payment-title {
    margin-top: 2rem;
}

.payment-icons {
    display: flex;
    gap: 1rem;
    font-size: 1.5rem;
    color: #9ca3af;
    align-items: center;
}

.payment-icons .upi-text {
    font-size: 1rem;
    font-weight: 700;
    font-style: italic;
    border: 1px solid;
    padding: 2px 4px;
    border-radius: 3px;
}

.payment-icons .payu-text {
    font-size: 1rem;
    font-weight: 700;
    color: #002970;
    background: #f5f5f5;
    border-radius: 3px;
    padding: 2px 5px;
}

.footer-bottom {
    text-align: center;
    padding: 1.5rem;
    border-top: 1px solid #1f2937;
    color: #9ca3af;
    font-size: 0.9rem;
    background: #030712;
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 4.75rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
    box-shadow: 0 4px 14px rgba(230, 57, 0, 0.35);
}
.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scroll-to-top:hover {
    background: #c43100;
}
.scroll-to-top i {
    font-size: 1rem;
}

/* Hide Tidio chat widget when cart is open */
body.cart-open #tidio-chat,
body.cart-open #tidio-chat-code,
body.cart-open #tidio-chat-iframe,
body.cart-open [id^="tidio"],
body.cart-open [id*="tidio"],
body.cart-open [class*="tidio"],
body.cart-open tidio-chat,
body.cart-open iframe[src*="tidio"],
body.cart-open iframe[src*="tidiochat"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Move Tidio "Chat with us" widget to the bottom-LEFT and raised so it clears the page bottom */
#tidio-chat {
    left: 20px !important;
    right: auto !important;
    bottom: 80px !important;
}

#tidio-chat-code {
    left: 0 !important;
    right: auto !important;
    bottom: 80px !important;
}

/* Cart Sidebar Container */
.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 2147483645;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-smooth);
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: var(--color-bg-surface);
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
    transition: right var(--transition-smooth);
    border-left: 1px solid var(--color-border);
}

.cart-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.cart-sidebar.active {
    right: 0;
}

.cart-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
}

.close-btn {
    color: var(--color-text-muted);
    font-size: 1.2rem;
    /* The icon glyph alone renders a ~15x24px hit box — too small for a
       reliable tap target. Padding expands the clickable area without
       changing the visible icon size. */
    padding: 10px;
    margin: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.close-btn:hover {
    color: var(--color-text-main);
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.empty-cart-msg {
    text-align: center;
    color: var(--color-text-muted);
    margin-top: 2rem;
}

/* Single Cart Item */
.cart-item {
    display: flex;
    gap: 1rem;
    background: var(--color-bg-surface);
    padding: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.cart-item-img {
    width: 70px;
    height: 70px;
    background: var(--color-bg-base);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
}

.cart-item-img i {
    font-size: 2rem;
    color: var(--color-text-muted);
}

.cart-item-details {
    flex: 1;
}

.cart-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.cart-item-price {
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.cart-item-mrp {
    color: var(--color-text-muted);
    font-weight: 400;
    text-decoration: line-through;
    font-size: 0.8rem;
    margin-left: 0.3rem;
}

.cart-item-discount {
    color: #059669;
    font-weight: 600;
    font-size: 0.78rem;
    margin-left: 0.3rem;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-bg-base);
    padding: 0.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.qty-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
}

.qty-btn:hover {
    background: var(--color-bg-elevated);
    border-color: var(--color-text-muted);
}

.remove-btn {
    color: var(--color-error);
    font-size: 0.85rem;
}

.cart-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--color-border);
    background: #fdfdfd;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.cart-mrp-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.3rem;
}

.cart-savings-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 600;
    color: #059669;
    margin-bottom: 0.6rem;
}

.checkout-trust {
    text-align: center;
    color: var(--color-success);
    font-size: 0.85rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

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

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

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* Responsive */
@media (max-width: 992px) {
    .search-container {
        display: none;
    }

    .mobile-search,
    .mobile-menu-btn {
        display: flex;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Category bar is hidden on mobile; category links live in the hamburger menu */
    .nav-categories {
        display: none;
    }

    /*
     * nav-categories was in the document flow (margin-top: 76px) and provided
     * vertical offset so page content started below the fixed navbar.
     * Now that it is hidden, we must push first-level page content down ourselves
     * to clear both the fixed navbar (~76px) and the fixed mobile-search (~52px).
     *
     * .page-header already has padding-top: 8rem (128px) which is sufficient.
     * The hero slider (index.html) has no such offset, so we add it here.
     * .breadcrumbs and .brand-hero are the first elements on brand/product pages
     * and also need the same clearance.
     */
    .hero {
        margin-top: 128px;
    }

    /* brand.html / product.html: breadcrumbs is the topmost element. The 9rem
       value here was sized for an old nav layout with a separate fixed
       mobile-search bar stacked under the navbar; the current unified nav
       (nav-loader.js) is a single sticky bar that already occupies its own
       space in normal flow, so no extra clearance is needed — this was
       leaving a ~140px blank gap above the breadcrumb on every mobile page
       that renders one. Just a small comfortable gap now. */
    .breadcrumbs {
        padding-top: 1.5rem !important;
    }

    /* brand.html: brand-hero sits directly below breadcrumbs on mobile so it
       doesn't need full clearance, but needs enough top breathing room. */
    .brand-hero {
        padding-top: 1.5rem !important;
    }

    .footer-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    /* Hide prev/next arrows on mobile — swipe to navigate */
    .slider-btn {
        display: none !important;
    }

    /* Tighten hero content so text & buttons don't overlap */
    .hero-content {
        gap: 0.8rem;
        padding: 1.25rem 1.25rem 0;
        margin-left: 0;
        max-width: 100%;
    }

    .slide, .hero-slide {
        align-items: center;
        padding-top: 1.5rem;
        padding-bottom: 80px; /* room for dots */
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .footer-container {
        grid-template-columns: 1fr;
    }
}

/* ─── Internal Page Layout QA ─────────────────────────── */

/* Ensure the page-header on inner pages clears both fixed bars.
   On mobile: navbar ~74-82px + mobile-search ~57px = ~131px → 9rem (144px) safe. */
.page-header {
    padding-top: 9rem;
}

/* Constrain page-header / page-hero text to match nav & footer width */
.page-header>*,
.page-hero>* {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

/* Consistent catalog layout alignment */
.layout-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    max-width: var(--max-width);
    margin: 0 auto;
    /* Top kept small — .page-hero already carries its own 40px bottom
       padding (see the shared page-hero header rule), so a full 3rem here
       on top of that stacked into an oversized gap before the sidebar/grid
       ever appeared. Bottom stays generous for breathing room before the
       footer. */
    padding: 1.5rem 1.5rem 3rem;
    align-items: start;
    /* No overflow:hidden here (deliberately removed) — .sidebar-filters is
       `position: sticky`, and per spec a sticky element's containing block
       is the nearest ancestor with non-visible overflow. With overflow:hidden
       set here, THIS container became that ancestor instead of the
       viewport, which made the sidebar render offset by roughly its own
       `top: 130px` even at rest (page unscrolled) — not actual clipping,
       but visually identical to one: a large gap opening up above the
       "Your Vehicle" card while the product grid column stayed put. The
       min-width:0 rule below already covers the "children escaping via
       unbreakable content" grid gotcha this overflow was originally for. */
}

/* Grid children must be allowed to shrink below their content size */
.layout-container>* {
    min-width: 0;
}

@media (max-width: 992px) {
    .layout-container {
        grid-template-columns: 1fr;
    }
}

.sidebar-filters {
    width: 100%;
    min-width: 0;
    position: sticky;
    top: 130px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}
/* Matches the +24px .nav-menu-bar .nav-container height increase at
   >=1100px (see that rule's comment) — this offset assumes the navbar's
   total height, so it has to grow by the same delta or the sticky sidebar
   would start 24px too high and overlap the taller navbar on scroll. */
@media (min-width: 1100px) {
    .sidebar-filters {
        top: 154px;
    }
}

.filter-group {
    margin-bottom: 1.5rem;
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-group h4 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-main);
    cursor: pointer;
}

/* Ensure the main content column (containing the product grid) also shrinks */
.layout-container main {
    min-width: 0;
    overflow: hidden;
}

/* Product grid inside inner pages should be full-width of their grid cell */
.layout-container .products-grid,
.layout-container .prod-grid {
    max-width: 100%;
    margin: 0;
    min-width: 0;
    width: 100%;
}

/* Uniform product card link styling for catalog cards */
.prod-grid .product-card .add-cart-btn {
    display: flex;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

/* Page hero spacing fix for pages with two fixed bars */
.page-hero {
    padding-top: 9rem;
}

/* Footer category heading consistent margin */
.footer-links h3:not(:first-child),
.footer-contact h3.payment-title {
    margin-top: 1.5rem;
}

/* Chat Widget Styles */
.chat-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    font-family: var(--font-main);
    background: transparent;
}

.chat-button {
    width: 60px;
    height: 60px;
    background: #25d366;
    /* WhatsApp Green */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-smooth);
    position: relative;
    border: none;
}

.chat-button:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.chat-button .unread-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 12px;
    height: 12px;
    background: var(--color-primary);
    border-radius: 50%;
    border: 2px solid white;
}

.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 320px;
    /* navbar ~76px + widget bottom 30px + window offset 80px + 34px breathing room = 220px */
    max-height: calc(100vh - 220px);
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

.chat-window.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.chat-header {
    background: linear-gradient(135deg, #128c7e 0%, #25d366 100%);
    padding: 1.5rem;
    color: white;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.chat-header img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.chat-header-info h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.chat-header-info span {
    font-size: 0.8rem;
    opacity: 0.9;
}

.chat-body {
    padding: 1.5rem;
    background: #f0f2f5;
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    background-size: 300px auto; /* tile the pattern naturally instead of stretching */
    min-height: 120px;
    max-height: 220px; /* cap body height so it doesn't greedily fill the window and appear as a large grey block */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-msg {
    background: white;
    padding: 0.8rem 1rem;
    border-radius: 0 15px 15px 15px;
    font-size: 0.9rem;
    color: var(--color-text-main);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    max-width: 85%;
    position: relative;
    animation: slideInUp 0.3s ease;
}

.chat-msg::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent white transparent transparent;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: #919191;
    border-radius: 50%;
    display: inline-block;
    animation: typing 1s infinite alternate;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    from {
        transform: translateY(0);
        opacity: 0.3;
    }

    to {
        transform: translateY(-5px);
        opacity: 1;
    }
}

.chat-footer {
    padding: 1rem;
    background: var(--color-bg-surface);
    flex-shrink: 0;
}

.btn-chat-connect {
    width: 100%;
    padding: 0.8rem;
    background: #25d366;
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-chat-connect:hover {
    background: #128c7e;
}

/* ── Floating buttons: mobile alignment ──────────────────────────────────── */
/* scroll-to-top mirrors the WA button bottom so they sit level on opposite sides.
   chat-widget stacks below scroll-to-top to avoid overlap. */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 2.25rem;
        right: 1rem;
    }

    /* Chat widget sits below scroll-to-top — no overlap */
    .chat-widget {
        bottom: 0.5rem;
        right: 1rem;
    }
}

/* Absolute Final Mobile Layout Overrides for Catalog/Search & Global Overflow */
@media (max-width: 768px) {
    body {
        width: 100% !important;
        overflow-x: hidden !important;
        /* position: relative removed — it creates a stacking/compositing context
           that causes position:fixed elements (navbar, mobile-search) to trigger
           visible jitter on load on iOS Safari and Android Chrome. overflow-x
           hidden is sufficient to prevent horizontal scroll. */
    }

    .nav-container {
        padding: 0.8rem 1rem !important;
        gap: 1rem !important;
    }

    .logo img {
        height: 48px !important;
    }

    /* With 48px logo the navbar is ~74px tall; push mobile-search down */
    .mobile-search {
        top: 74px;
    }

    /* Mobile nav-menu must start below navbar + mobile-search */
    .mobile-nav-menu {
        top: 120px;
    }

    /* Adjust hero to clear taller nav stack */
    .hero {
        margin-top: 120px !important;
    }

    .footer-brand .logo img {
        width: 145px !important;
        height: auto !important;
    }

    .nav-actions {
        gap: 0.8rem !important;
    }

    .nav-icon-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }

    .layout-container {
        display: flex !important;
        flex-direction: column !important;
        padding: 1.5rem 1rem !important;
        gap: 1.5rem !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .sidebar-filters {
        width: 100% !important;
        position: static !important;
        margin-bottom: 1rem !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .products-grid,
    .prod-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* FORCED SINGLE COLUMN */
        width: 100% !important;
        max-width: 100% !important;
        gap: 1.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .product-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .page-header {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        word-wrap: break-word !important;
    }

    .search-results-meta {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        padding: 0 0.5rem !important;
    }

    html {
        overflow-x: hidden !important;
    }

    .product-title {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .fitment-table {
        min-width: 0 !important;
    }

    .breadcrumbs {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .info-table td {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ── Mobile filter drawer (search results page) ───────────────────────────
   Turns .sidebar-filters into a slide-in-from-the-right off-canvas panel on
   mobile/tablet, triggered by a "Filters" button in .catalog-header, instead
   of the old behaviour above (stacked inline ahead of the product grid,
   forcing a long scroll before any product was visible). Scoped entirely
   behind `body:has(#mobile-filters-btn)` — only search.html has that
   trigger button today — so the other listing pages sharing
   .sidebar-filters/.layout-container keep their existing mobile behaviour
   completely untouched. !important is required to outrank the "Absolute
   Final Mobile Layout Overrides" block directly above, which forces
   .sidebar-filters to position:static below 768px; :has() gives this
   selector far higher specificity regardless, so it wins either way. */
.mobile-filters-btn,
.mobile-filters-badge,
.sidebar-filters-mobile-head,
.sidebar-filters-mobile-foot,
.mobile-filters-overlay {
    display: none;
}

body.mobile-filters-locked {
    overflow: hidden;
}

@media (max-width: 992px) {
    body:has(#mobile-filters-btn) .mobile-filters-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: var(--color-bg-surface, #fff);
        border: 1.5px solid var(--color-border, #e2e8f0);
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        font-family: inherit;
        color: var(--color-text-main, #1e293b);
        cursor: pointer;
    }
    body:has(#mobile-filters-btn) .mobile-filters-btn:hover {
        border-color: var(--color-primary, #e63900);
        color: var(--color-primary, #e63900);
    }
    body:has(#mobile-filters-btn) .mobile-filters-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        background: var(--color-primary, #e63900);
        color: #fff;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

    body:has(#mobile-filters-btn) .sidebar-filters {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0 !important;
        width: 86vw !important;
        max-width: 380px !important;
        height: 100vh !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: -6px 0 28px rgba(0, 0, 0, 0.18);
        z-index: 300;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    body:has(#mobile-filters-btn) .sidebar-filters.mobile-open {
        transform: translateX(0);
    }

    body:has(#mobile-filters-btn) .sidebar-filters-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px;
        border-bottom: 1px solid var(--color-border, #e2e8f0);
        flex-shrink: 0;
    }
    body:has(#mobile-filters-btn) .sidebar-filters-mobile-head h3 {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--color-text-main, #1e293b);
    }
    body:has(#mobile-filters-btn) .sidebar-filters-mobile-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: #f3f4f6;
        color: #374151;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }
    body:has(#mobile-filters-btn) .sidebar-filters-mobile-close:hover {
        background: #fee2e2;
        color: #dc2626;
    }

    body:has(#mobile-filters-btn) .sidebar-filters-body {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem 20px;
    }

    body:has(#mobile-filters-btn) .sidebar-filters-mobile-foot {
        display: block;
        padding: 14px 20px;
        border-top: 1px solid var(--color-border, #e2e8f0);
        flex-shrink: 0;
        background: var(--color-bg-surface, #fff);
    }
    body:has(#mobile-filters-btn) .mobile-filters-apply-btn {
        width: 100%;
        padding: 14px;
        border: none;
        border-radius: 10px;
        background: var(--color-primary, #e63900);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
    }

    body:has(#mobile-filters-btn) .mobile-filters-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 290;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    body:has(#mobile-filters-btn) .mobile-filters-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 350px) {
    .nav-container {
        padding: 0.8rem 0.5rem !important;
        gap: 0.5rem !important;
    }

    .logo img {
        height: 40px !important;
    }

    .footer-brand .logo img {
        width: 120px !important;
        height: auto !important;
    }
}

@media (max-width: 480px) {
    .scroll-to-top {
        bottom: 0.25rem;
        right: 1rem;
    }

    /* Hide chat widget on very small screens — WA button covers this */
    .chat-widget {
        display: none;
    }

    .chat-window {
        width: calc(100vw - 40px);
        bottom: 70px;
        max-height: calc(100vh - 200px);
    }

    .wa-float-btn {
        bottom: 0.25rem !important;
    }
}

/* ─── Checkout Modal Styles ─────────────────────────── */
.checkout-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
}

.checkout-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.checkout-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 90%;
    max-width: 500px;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.checkout-modal.active {
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible;
}

.checkout-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checkout-header h3 {
    font-size: 1.25rem;
    margin: 0;
}

.close-btn {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.close-btn:hover {
    color: var(--color-error);
}

.checkout-body {
    padding: 1.5rem;
    overflow-y: auto;
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group .required {
    color: var(--color-error);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    background: var(--color-bg-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: none;
    background: var(--color-bg-surface);
}

.form-group.has-error input,
.form-group.has-error textarea {
    border-color: var(--color-error);
    background: rgba(220, 38, 38, 0.05);
}

.error-msg {
    color: var(--color-error);
    font-size: 0.8rem;
    margin-top: 0.3rem;
    display: none;
}

.form-group.has-error .error-msg {
    display: block;
}

.checkout-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-base);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.checkout-amount-display {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--color-text-muted);
}

.checkout-amount-display span {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-main);
    display: block;
}

.payment-methods-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    align-items: center;
}

.payment-methods-icons span {
    font-size: 0.8rem;
    font-weight: 500;
}

/* ── WhatsApp Float Button ─────────────────────────────────── */
.wa-float-btn {
    position: fixed;
    left: 1.25rem;
    bottom: 4.75rem;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
    z-index: 998;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.wa-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6);
}

.wa-float-btn i {
    font-size: 1.75rem;
    color: #fff;
    line-height: 1;
}

/* Animated pulse ring */
.wa-float-btn::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid rgba(37, 211, 102, 0.5);
    animation: wa-pulse 2.2s ease-out infinite;
    pointer-events: none;
}

@keyframes wa-pulse {
    0%   { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Tooltip label that appears to the right of the button */
.wa-float-btn .wa-tooltip {
    position: absolute;
    left: calc(100% + 0.65rem);
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: #128C7E;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    font-family: var(--font-family-base, inherit);
}

.wa-float-btn:hover .wa-tooltip {
    opacity: 1;
}

@media (max-width: 768px) {
    .wa-float-btn {
        width: 50px;
        height: 50px;
        left: 0.75rem;
        bottom: 2.25rem;
    }

    .wa-float-btn i {
        font-size: 1.5rem;
    }

    /* Hide tooltip on touch devices — no hover state */
    .wa-float-btn .wa-tooltip {
        display: none;
    }

    /* ── Product Detail Page – mobile image box fix ─────────────────────────
       The inline <style> blocks in product.html and all legacy static product
       pages set .main-image-box { height: 450px } without a media query.
       Because those <style> blocks are parsed after this external sheet, we
       need !important to ensure the mobile values win in the cascade.
    ────────────────────────────────────────────────────────────────────────── */
    .main-image-box {
        height: 280px !important;
        padding: 1rem !important;
    }

    /* Tighten the two-column → one-column product overview gap on mobile */
    .product-overview-container {
        gap: 1.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Vehicle Selector — Phase 11
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Vehicle Hero section ─────────────────────────────────────────────────── */
.vehicle-hero {
    position: relative;
    background: url('../public/images/slider-brake-pad.jpg') center / cover no-repeat;
    background-color: #000;
    padding: 4rem 1.5rem;
    text-align: left;
}

.vh-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.vh-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
}

.vh-title {
    font-size: clamp(1.4rem, 3.6vw, 3.25rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    color: #fff;
    max-width: 100%;
    margin: 0 0 1.75rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.vh-title-accent {
    color: var(--color-primary);
}

.vh-sub {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin: 0 0 1.6rem;
}

/* ── 3-step selector row ──────────────────────────────────────────────────── */
.hero-selector {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.hero-selector .form-group {
    flex: 1 1 190px;
    min-width: 170px;
    max-width: 230px;
    margin-bottom: 0;
}

/* Labels stay in the DOM for screen readers, but are visually replaced by
   each dropdown's own placeholder text ("Select Make", etc.) to match the
   compact row layout. */
.hero-selector .form-group > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Custom dropdown (trigger button + option list) — replaces the native
   <select> so the open option list is a normal DOM element that stays
   within the layout at any screen size, instead of an OS-rendered popup
   that CSS can't resize, reposition, or contain. Same component/markup
   used for every vehicle-search instance on the site (homepage hero,
   "Select Your Vehicle" modal, sidebar) so the dropdown look/interaction
   is identical everywhere. */
.qs-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.qs-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-body);
    color: #111827;
    background-color: #fff;
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.qs-select-trigger .qs-select-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qs-select-trigger .qs-select-value.placeholder {
    color: #6b7280;
}

.qs-select-trigger i {
    flex-shrink: 0;
    font-size: 12px;
    color: #6b7280;
    transition: transform var(--transition-fast);
}

.qs-select.open .qs-select-trigger {
    box-shadow: 0 0 0 3px rgba(230, 57, 0, 0.35);
}

.qs-select.open .qs-select-trigger i {
    transform: rotate(180deg);
}

/* "Type Partnumber or Name" — a real text input sitting in the same
   .hero-selector row as the Make/Model/Year/Engine dropdowns, styled to
   match .qs-select-trigger (height, radius, colors) since there's no
   option list for it to open. */
.hero-text-input {
    display: block;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-body);
    color: #111827;
    background-color: #fff;
    /* type="search" (chosen to opt out of Chrome's address-book autofill —
       see vehicle-selector.js _buildTextField) ships its own native search
       icon/clear-button chrome in WebKit/Blink; strip it back to a plain
       text-input look. */
    -webkit-appearance: none;
    appearance: none;
}
.hero-text-input::-webkit-search-decoration,
.hero-text-input::-webkit-search-cancel-button,
.hero-text-input::-webkit-search-results-button,
.hero-text-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.hero-text-input::placeholder { color: #6b7280; }
.hero-text-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(230, 57, 0, 0.35);
}

/* A free-text field benefits from more typing room than a fixed-option
   dropdown — same height/styling as its siblings, just a wider share of
   the row on desktop. Still just a .form-group, so it wraps to full width
   at the same breakpoints as the dropdowns beside it. */
.hero-selector .form-group--text {
    flex: 2 1 240px;
    max-width: 360px;
}

.qs-select-trigger:disabled {
    background-color: #d1d5db;
    color: #6b7280;
    cursor: default;
}

/* Base/pre-open state only — before the panel is ever opened it's still
   nested inside .qs-select (position:absolute here is a harmless default
   since opacity:0/visibility:hidden keep it invisible either way). On first
   open, _positionDropdown() in vehicle-selector.js portals it to a direct
   child of <body> and switches it to `position:fixed` with an explicit
   inline top/bottom/left/width computed from the trigger's real on-screen
   rect — escaping both any ancestor's overflow:hidden clipping AND, just as
   important, any ancestor's own stacking context (e.g. .vh-inner's
   position:relative + z-index:1, which used to trap this panel below the
   sticky navbar even when its computed position was on-screen — the panel
   simply painted *behind* the navbar, indistinguishable from being
   clipped). The z-index below only matters once portaled: it must outrank
   the navbar (100) and the vehicle-chooser modal overlay (1000). */
.qs-select-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-subtle);
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-fast);
    z-index: 2000;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.qs-select-options::-webkit-scrollbar { width: 6px; }
.qs-select-options::-webkit-scrollbar-track { background: transparent; }
.qs-select-options::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 3px;
}
.qs-select-options::-webkit-scrollbar-thumb:hover { background-color: #9ca3af; }

/* Direct classes on the panel itself, not `.qs-select.open .qs-select-options`
   descendant selectors — once portaled to <body> it's no longer a CSS
   descendant of its trigger's .qs-select wrapper, so a descendant combinator
   would silently stop matching after the first open. JS toggles these same
   classes on both the wrapper (for the trigger's own focus-ring/chevron
   styling) and the panel (for its own visibility/transform) in tandem. */
.qs-select-options.qs-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Viewport-collision fallback — applied by _positionDropdown() in
   vehicle-selector.js when there isn't enough room below the trigger (e.g.
   a picker near the bottom of the screen, or inside a scrollable modal) but
   there is enough above it. max-height is also set inline per-open to
   whatever space is actually available, so the list is always fully
   visible and scrollable rather than clipped by the viewport edge. */
.qs-select-options.qs-drop-up {
    transform: translateY(8px);
}
.qs-select-options.qs-drop-up.qs-open {
    transform: translateY(0);
}

.qs-select-options li {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: #111827;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.qs-select-options li:hover,
.qs-select-options li.active {
    background: var(--color-bg-base);
    color: var(--color-primary);
}

.qs-select-options li.qs-empty {
    color: #6b7280;
    cursor: default;
}

.qs-select-options li.qs-empty:hover {
    background: none;
    color: #6b7280;
}

.btn-find {
    height: 52px;
    padding: 0 26px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-heading);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.btn-find:hover:not(:disabled) { background: var(--color-primary-hover); }

/* Solid mid-grey rather than translucent white — the previous rgba(255,255,255,.15)
   was nearly invisible against the hero's black background, making the button
   look like it wasn't there at all until enabled. A solid grey reads clearly
   as "disabled" against both the dark hero and the light chooser modal. */
.btn-find:disabled {
    background: #9ca3af;
    color: #ffffff;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Popular makes pills ──────────────────────────────────────────────────── */
.popular-makes {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 1.4rem;
}

.pop-lbl {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-right: 2px;
}

.make-pill {
    border: 1.5px solid var(--color-border);
    background: var(--color-bg-base);
    color: var(--color-text-main);
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.make-pill:hover,
.make-pill--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ── Welcome-back state ───────────────────────────────────────────────────── */
.hero-welcome {
    max-width: 620px;
}

.hw-text {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.hw-text strong { color: #fff; }

.hw-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.hw-change {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 42px;
    padding: 0 16px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hw-change:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* ── Topbar vehicle chip ──────────────────────────────────────────────────── */
/* Selected-vehicle state: a compact multi-action badge (label + Change + ×
   + garage dropdown), so it keeps its own pill treatment. */
.vc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-primary-light);
    border: 1.5px solid rgba(230, 57, 0, 0.2);
    border-radius: 20px;
    padding: 4px 10px 4px 8px;
    cursor: default;
    position: relative;
    white-space: nowrap;
    max-width: 300px;
}

.vc-ico { font-size: 14px; flex-shrink: 0; }

.vc-lbl {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-primary);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vc-sep {
    width: 1px;
    height: 12px;
    background: rgba(230, 57, 0, 0.25);
    flex-shrink: 0;
}

.vc-btn {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 3px;
    font-family: var(--font-body);
}

.vc-btn:hover { text-decoration: none; }

/* Empty state ("Select your car"): a single-purpose nav item, so it drops the
   pill/badge treatment above entirely and matches .nav-menu-link exactly —
   same size/weight, and hover tints the whole button, not just the text. */
.vc-empty {
    background: none;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    gap: 6px;
    transition: background 0.12s, color 0.12s;
}

.vc-empty:hover { background: #fff1ee; }

.vc-empty .vc-ico { font-size: 15px; }

.vc-empty .vc-btn {
    font-size: 13.5px;
    font-weight: 700;
    color: #374151;
    padding: 0;
}

.vc-empty:hover .vc-btn { color: #e63900; text-decoration: none; }

.vc-x {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 13px;
    padding: 0 2px;
}

.vc-x:hover { color: var(--color-error); text-decoration: none; }

/* Garage dropdown */
.vc-garage {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 210;
    padding: 6px 0;
}

.vc:hover .vc-garage { display: block; }

.vc-garage-title {
    padding: 5px 12px 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}

.vc-gi {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--color-text-main);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
}

.vc-gi:hover { background: var(--color-bg-base); color: var(--color-primary); }

/* ── Chooser modal ────────────────────────────────────────────────────────── */
.vs-ov {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.vs-modal {
    background: var(--color-bg-surface);
    border-radius: 14px;
    width: 100%;
    max-width: 540px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    border-top: 4px solid var(--color-primary);
}

.vs-mhd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--color-border);
}

.vs-mhd h3 { color: var(--color-text-main); font-size: 1rem; font-weight: 700; }

.vs-mclose {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-bg-base);
    border: none;
    color: var(--color-text-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
}

.vs-mclose:hover { background: var(--color-primary-light); color: var(--color-primary); }

.vs-mbd { padding: 16px 20px 20px; }

.hero-selector--modal {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 1rem;
    gap: 10px;
}

/* Base .hero-selector .form-group sets `flex: 1 1 190px` for the horizontal
   homepage/topbar layout, where the 190px flex-basis controls preferred
   WIDTH. Once the modal switches to a column flex-direction, that same
   flex-basis instead controls preferred HEIGHT — with flex-grow:1 and no
   fixed container height, each dropdown would stretch to fill the modal
   (the huge stacked boxes bug). Reset flex-grow/shrink/basis here so
   height stays at the explicit 52px from the base rule. */
.hero-selector--modal .form-group {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}
.hero-selector--modal .btn-find  { width: 100%; justify-content: center; }

/* The modal is now a light surface (to match the site), so the dropdown
   trigger needs a visible border/tint instead of relying on contrast against
   a dark background. */
.hero-selector--modal .qs-select-trigger {
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
}

/* ── Fitment chip (product page) ──────────────────────────────────────────── */
.fitment-chip-wrap { margin-bottom: 0.5rem; }

.fitment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.fitment-chip--fits {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.fitment-chip--unknown {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ── Sidebar vehicle filter (search page) ─────────────────────────────────── */
.sidebar-vs-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    background: var(--color-primary-light);
    border: 1.5px dashed rgba(230, 57, 0, 0.3);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    font-family: var(--font-body);
}

.sidebar-vs-btn:hover { background: rgba(230, 57, 0, 0.13); }

.sidebar-vehicle-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.sidebar-vehicle-actions { display: flex; gap: 10px; }

.sidebar-vehicle-actions button {
    font-size: 12px;
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    font-family: var(--font-body);
}

.sidebar-vehicle-actions button:hover { color: var(--color-primary); }

/* ── Mobile overrides ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .vehicle-hero {
        padding: 2.5rem 1.25rem;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 100%),
            url('../public/images/slider-brake-pad.jpg') right center / cover no-repeat;
    }

    .vh-title { font-size: clamp(1rem, 6vw, 1.6rem); max-width: 100%; }
    .vh-sub   { margin-bottom: 1.4rem; }

    .hero-selector {
        flex-direction: column;
        align-items: stretch;
    }

    /* Base .hero-selector .form-group sets `flex: 1 1 190px` for the desktop
       horizontal row, where the 190px flex-basis controls preferred WIDTH.
       Once flex-direction switches to column here, that same flex-basis
       controls preferred HEIGHT instead — leaving a ~140px empty gap under
       every field. Same fix already applied to .hero-selector--modal. */
    .hero-selector .form-group {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .btn-find  { width: 100%; justify-content: center; }

    /* The chip now lives in the mobile drawer (full-width row) rather than a
       cramped topbar, so it no longer needs to collapse its label away. */
    .vc { max-width: 100%; }

    .vs-modal { border-radius: 12px; }
}

/* ─── Phase 12: Fitment Section (product.html) ──────────────────────────── */

.fitment-section { }

.fitment-brand-group {
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.fitment-brand-header {
    background: var(--color-bg-base);
    padding: .5rem 1rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--color-text-main);
    border-bottom: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.fitment-model-group {
    border-bottom: 1px solid var(--color-border);
}
.fitment-model-group:last-child { border-bottom: none; }

.fitment-model-header {
    padding: .4rem 1rem;
    font-weight: 600;
    font-size: .85rem;
    color: var(--color-text-main);
    background: rgba(0,0,0,.02);
    border-bottom: 1px solid var(--color-border);
}

.fitment-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem 1rem .4rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    flex-wrap: wrap;
}
.fitment-row:last-child { border-bottom: none; }

.fitment-gen {
    font-size: .85rem;
    color: var(--color-text-main);
    min-width: 140px;
}

.fitment-year {
    font-size: .8rem;
    color: var(--color-text-muted);
    min-width: 80px;
    font-variant-numeric: tabular-nums;
}

.fitment-engine {
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(230, 57, 0, .08);
    border: 1px solid rgba(230, 57, 0, .2);
    border-radius: 4px;
    padding: 1px 7px;
    white-space: nowrap;
}

.fitment-fuels { display: flex; gap: 4px; flex-wrap: wrap; }

.fuel-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
    border: 1.5px solid;
    line-height: 1.4;
}

.fitment-notes {
    font-size: .78rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-left: auto;
}

.fitment-disclaimer {
    font-size: .78rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: .75rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--color-border);
}

/* Product card fitment chips (search/catalog pages) */
.card-fitment-chip {
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: .35rem;
    display: inline-block;
}
.card-fitment-chip--fits    { background: #dcfce7; color: #15803d; }
.card-fitment-chip--no      { background: #fee2e2; color: #b91c1c; }
.card-fitment-chip--unknown { background: #fef9c3; color: #854d0e; }

/* Admin fitment add panel */
.fitment-admin-add {
    background: var(--color-bg-alt, #f8f9fa);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-top: .75rem;
}

/* ─── Phase 13: Part Number Search ─────────────────────────────────────────── */

/* Part number badge on product cards */
.part-number-badge {
    display: inline-block;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    background: #f3f4f6;
    color: #374151;
    padding: 2px 6px;
    border-radius: 3px;
    margin-bottom: .3rem;
    border: 1px solid #e5e7eb;
    letter-spacing: .02em;
}

/* Search hint below search input */
.search-hint {
    position: absolute;
    bottom: -22px;
    left: 0;
    font-size: 12px;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

/* Comparison block — multi-brand same part layout */
.comparison-block {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff;
}
.comparison-header {
    background: #f9fafb;
    padding: 14px 18px;
    font-weight: 600;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
}
.comparison-pn {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .78rem;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 4px;
    color: #374151;
    border: 1px solid #e5e7eb;
    font-weight: 500;
}
.comparison-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid #f3f4f6;
    gap: 1rem;
    flex-wrap: wrap;
}
.comparison-brand { font-weight: 600; min-width: 100px; }
.comparison-price { color: var(--color-primary); font-weight: 700; font-size: 1.05rem; }
.comparison-type  { font-size: .82rem; color: var(--color-text-muted); flex: 1; }

/* Part numbers section on product detail page */
.pn-mono {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .9rem;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #e5e7eb;
}

/* Copy button */
.copy-btn {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: .72rem;
    font-weight: 600;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    color: #6b7280;
    transition: all .15s;
    vertical-align: middle;
}
.copy-btn:hover { background: #f3f4f6; border-color: #9ca3af; color: #374151; }
.copy-btn--success { background: #dcfce7; border-color: #86efac; color: #15803d; }

@media (max-width: 768px) {
    .comparison-row { flex-direction: column; align-items: flex-start; }
    .search-hint { bottom: -20px; font-size: 11px; }
}

/* ── Phase 16: Trust & Conversion ─────────────────────────────────────────── */

/* Delivery estimate */
.delivery-widget {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
    margin: 16px 0;
    background: #fafafa;
}
.delivery-result {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: #059669;
}
.delivery-compact {
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 3px;
}

/* Stock signals */
.stock-critical { color: #dc2626; font-weight: 600; font-size: 13px; }
.stock-low      { color: #d97706; font-size: 13px; }
.stock-out      { color: #dc2626; font-weight: 600; }

/* Trust badges */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12.5px;
    background: #f9fafb;
    color: #374151;
    white-space: nowrap;
}

/* Reviews */
.review-aggregate {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
}
.star-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 4px;
}
.star-bar-fill {
    background: #fbbf24;
    height: 6px;
    border-radius: 3px;
}
.review-card {
    border-bottom: 1px solid #f3f4f6;
    padding: 16px 0;
}
.review-card:last-child { border-bottom: none; }
.review-stars {
    color: #fbbf24;
    letter-spacing: 2px;
}
.review-meta {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}
.star-input span { transition: color .1s; }
.star-input span:hover { color: #fbbf24; }
.rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 1px 6px;
    margin-bottom: 4px;
}

/* ── Star rating (product cards + PDP chip) ──────────────────────────────────
   Built by starRatingHtml() in script.js. Empty stars are the same glyph in a
   muted colour so the row keeps a constant width regardless of score. */
/* Size is set on the wrapper so callers can scale the whole row with one
   inline font-size; the stars themselves inherit it. */
.star-rate-wrap {
    display: inline-flex;
    gap: 1px;
    line-height: 1;
    letter-spacing: 0;
    font-size: 12px;
}
.star-rate {
    color: #d6d3d1;
    font-size: inherit;
}
.star-rate--full { color: #f59e0b; }

/* Half star: an amber copy clipped to the left half, layered over the grey one. */
.star-rate--half {
    position: relative;
    color: #d6d3d1;
}
.star-rate--half::before {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
    color: #f59e0b;
}

/* ── Recently Viewed ──────────────────────────────────────────────────────── */
.rv2-section { padding: 0.5rem 0 1rem; }

.rv2-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.25rem;
}

.rv2-sub {
    font-size: 13.5px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.rv2-clear {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 6px 4px;
    transition: color var(--transition-fast);
    white-space: nowrap;
}
.rv2-clear:hover { color: var(--color-primary); }

/* Carousel — a horizontally scrolling row of the site's standard .product-card,
   with .rv2-card fixing each card's width so they line up in a track instead
   of stretching in a grid. */
.rv2-carousel { position: relative; }

.rv2-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 4px 12px;
    scrollbar-width: none;
}
.rv2-track::-webkit-scrollbar { display: none; }

.rv2-track .rv2-card {
    flex: 0 0 240px;
    width: 240px;
    scroll-snap-align: start;
}

.rv2-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-subtle);
    transition: all var(--transition-fast);
    z-index: 5;
    font-size: 0.85rem;
}
.rv2-arrow:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.rv2-arrow--prev { left: -14px; }
.rv2-arrow--next { right: -14px; }

/* Quick View — icon button that fades in over the image on hover */
.rv2-qv-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
    box-shadow: var(--shadow-subtle);
}
.rv2-card:hover .rv2-qv-btn,
.rv2-qv-btn:focus-visible {
    opacity: 1;
    transform: translateY(0);
}
.rv2-qv-btn:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Availability badge */
.rv2-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 0.75rem;
    width: fit-content;
}
.rv2-badge--in  { background: rgba(5, 150, 105, 0.1); color: var(--color-success); }
.rv2-badge--low { background: rgba(217, 119, 6, 0.1); color: var(--color-warning); }
.rv2-badge--out { background: rgba(220, 38, 38, 0.1); color: var(--color-error); }

/* Empty state */
.rv2-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--color-bg-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}
.rv2-empty-icon {
    font-size: 2rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}
.rv2-empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin-bottom: 0.35rem;
}
.rv2-empty-sub {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    max-width: 420px;
    margin: 0 auto 1.25rem;
}

/* Quick View modal */
.rv2-qv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-smooth);
}
.rv2-qv-overlay.open { opacity: 1; visibility: visible; }

.rv2-qv-modal {
    position: relative;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
    transform: scale(0.96);
    transition: transform var(--transition-smooth);
}
.rv2-qv-overlay.open .rv2-qv-modal { transform: scale(1); }

.rv2-qv-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-bg-base);
    color: var(--color-text-main);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background var(--transition-fast);
}
.rv2-qv-close:hover { background: var(--color-border); }

.rv2-qv-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.rv2-qv-img {
    position: relative;
    background: #fdfdfd;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    border-right: 1px solid var(--color-border);
}
.rv2-qv-img img { max-width: 100%; max-height: 260px; object-fit: contain; }

.rv2-qv-info { padding: 2rem; }
.rv2-qv-info h3 { font-size: 1.3rem; font-weight: 700; margin: 0.25rem 0 0.75rem; line-height: 1.35; }

.rv2-qv-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.25rem; }
.rv2-qv-actions .btn { width: 100%; justify-content: center; }

@media (max-width: 768px) {
    .trust-badges { gap: 6px; }
    .trust-badge  { font-size: 11.5px; padding: 5px 9px; }
    .review-aggregate { flex-direction: column; gap: 12px; }

    .rv2-track .rv2-card { flex-basis: 190px; width: 190px; }
    .rv2-arrow { display: none; }
    .rv2-qv-body { grid-template-columns: 1fr; }
    .rv2-qv-img { border-right: none; border-bottom: 1px solid var(--color-border); padding: 1.75rem; }
    .rv2-qv-info { padding: 1.5rem; }
}

/* ── Maintenance Kit vehicle picker (maintenance-kit-picker.js) ──────────────── */
/* Shared by the Maintenance Service Kit page and its categories.html card. */
.mk-picker {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}

.mk-picker-fields.hero-selector {
    justify-content: center;
}

.mk-picker-results { margin-top: 1.5rem; }

/* "Showing kits/parts for X" summary chip shown inside a vehicle picker once a
   model is selected (integrated mode — picker patches window.ProductFilters
   instead of rendering its own results). Clear button resets picker + filters.
   Shared by maintenance-kit-picker.js and discontinued-vehicle-picker.js. */
.mk-selected-vehicle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding: 10px 16px;
    background: #fff1ee;
    border: 1px solid rgba(230, 57, 0, 0.25);
    border-radius: var(--radius-md);
    font-size: 13.5px;
    color: var(--color-text-main);
}
.mk-selected-vehicle i { color: var(--color-primary); margin-right: 6px; }
.mk-selected-vehicle .mk-selected-year { color: var(--color-text-muted); font-weight: 400; }
.mk-clear-vehicle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.mk-clear-vehicle:hover { background: #fff; color: var(--color-primary); border-color: var(--color-primary); }

.mk-loading {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.mk-loading i { margin-right: 0.5rem; color: var(--color-primary); }

.mk-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

.mk-empty { border-style: solid; }

/* Promo framing when this widget sits inside categories.html's card grid,
   spanning the full grid width so it stands out from the plain category
   cards around it instead of looking like one more tile. */
.mk-promo-card {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #fff7f5 0%, #ffece6 100%);
    border: 1px solid #ffd0be;
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}
.mk-promo-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
.mk-promo-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.mk-promo-head h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.15rem; }
.mk-promo-head p { font-size: 0.87rem; color: var(--color-text-muted); }
.mk-promo-card .mk-picker { background: var(--color-bg-surface); }

/* Common-components-in-a-kit informational grid */
.mk-components-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.mk-component-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-align: left;
    transition: box-shadow 0.2s, transform 0.2s;
}
/* Cards double as links to that component's category (element is an <a> on
   pages where it's clickable — see maintenance-service-kit.html). */
a.mk-component-card { display: block; text-decoration: none; color: inherit; }
.mk-component-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}
.mk-component-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-base); }
.mk-component-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-component-body { padding: 1rem 1.1rem 1.25rem; }
.mk-component-name { font-weight: 700; font-size: 0.92rem; margin-bottom: 0.3rem; }
.mk-component-desc { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.5; }

@media (max-width: 992px) {
    .mk-components-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .mk-picker { padding: 1.25rem; }
    .mk-promo-card { padding: 1.25rem; }
    .mk-promo-head { align-items: flex-start; }
    .mk-results-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
}

@media (max-width: 480px) {
    .mk-components-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Kit Builder (kit-builder.js) ──────────────────────────────────────────── */

.kb-prompt, .kb-loading {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    background: var(--color-bg-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}
.kb-prompt i, .kb-loading i { margin-right: 0.5rem; color: var(--color-primary); }

.kb-intro {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff1ee;
    border: 1px solid rgba(230, 57, 0, 0.2);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 13.5px;
    color: var(--color-text-main);
    margin-bottom: 1.25rem;
}
.kb-intro i { color: var(--color-primary); flex-shrink: 0; }

.kb-rows { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }

.kb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    transition: opacity 0.15s;
}
.kb-row--off { opacity: 0.55; }

.kb-check { flex: 0 0 auto; display: flex; }
.kb-check-input { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }

.kb-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-base); }
.kb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kb-info { flex: 1 1 200px; min-width: 0; }
.kb-slot-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--color-primary); margin-bottom: 2px; }
.kb-slot-label i { margin-right: 4px; }
.kb-title { display: block; font-size: 14px; font-weight: 600; color: var(--color-text-main); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-title:hover { color: var(--color-primary); }
.kb-desc { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kb-swap { flex: 0 0 190px; min-width: 0; }
.kb-swap-select { width: 100%; }
.kb-swap-select .qs-select-trigger { height: 38px; border: 1px solid var(--color-border); font-size: 12.5px; padding: 0 12px; }
.kb-single-brand { font-size: 12.5px; color: var(--color-text-muted); }

.kb-qty { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.kb-qty-btn {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--color-border); background: var(--color-bg-base);
    color: var(--color-text-main); font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.kb-qty-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.kb-qty-val { min-width: 16px; text-align: center; font-weight: 600; font-size: 13.5px; }

.kb-line-price { flex: 0 0 auto; font-weight: 700; font-size: 14.5px; color: var(--color-text-main); margin-left: auto; text-align: right; min-width: 80px; }

/* Per-item add-to-cart inside a kit row. Same toggleCartItem() behaviour as
   the .add-cart-btn on standard product cards, sized down for the row. */
.kb-row-cart { flex: 0 0 auto; }
.kb-add-one {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
    min-width: 122px;
    padding: 0 14px; height: 34px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kb-add-one:hover:not(:disabled) { background: var(--color-primary); color: #fff; }
.kb-add-one.added { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.kb-add-one:disabled { cursor: not-allowed; }

.kb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.kb-total { font-size: 15px; color: var(--color-text-main); }
.kb-total strong { font-size: 1.3rem; color: var(--color-primary); margin-left: 6px; }
.kb-add-btn { padding: 0.75rem 1.75rem; font-size: 0.95rem; }

@media (max-width: 768px) {
    .kb-info { flex: 1 1 calc(100% - 90px); }
    .kb-swap { flex: 1 1 100%; order: 5; margin-top: 4px; }
    .kb-qty { order: 6; }
    .kb-line-price { order: 7; }
    .kb-row-cart { order: 8; flex: 1 1 100%; margin-top: 6px; }
    .kb-add-one { width: 100%; }
}

/* ─── Phase 17 — Search Quality ─────────────────────────────────────────────── */

/* Autocomplete dropdown */
.search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1200;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
}

.sg-hint {
    padding: 8px 14px;
    font-size: 12px;
    color: var(--color-primary);
    background: #fff5f0;
    border-bottom: 1px solid #ffe5d5;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    text-decoration: none;
    color: var(--color-text-main);
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}
.sg-item:hover, .sg-item:focus { background: #f8f8f8; outline: none; }

.sg-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 6px;
    background: #f5f5f5;
    flex-shrink: 0;
}

.sg-info { flex: 1; min-width: 0; }
.sg-title { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-title mark { background: #fff2cc; color: inherit; border-radius: 2px; }
.sg-pn { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.sg-price { font-size: 13px; font-weight: 600; color: var(--color-primary); white-space: nowrap; }

.sg-all {
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--color-primary);
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    background: #fafafa;
}
.sg-all:hover { background: #f0f0f0; }

/* OEM match signal on cards */
.pn-match-signal {
    font-size: 11.5px;
    color: var(--color-primary);
    background: #fff5f0;
    border: 1px solid #ffe0d0;
    border-radius: 4px;
    padding: 3px 7px;
    margin-top: 4px;
    display: inline-block;
}

/* "Did you mean" block on search page */
.did-you-mean {
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--color-text-muted);
}
.did-you-mean a { color: var(--color-primary); text-decoration: underline; }

/* Category page search input */
.cat-search-wrap { max-width: 380px; margin: 0 auto; }
.cat-search-input {
    width: 100%;
    padding: 10px 16px;
    border: 1.5px solid var(--color-border);
    border-radius: 50px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
}
.cat-search-input:focus { border-color: var(--color-primary); }

@media (max-width: 768px) {
    .search-suggestions { border-radius: 0 0 10px 10px; }
    .sg-img { width: 36px; height: 36px; }
}

/* ── Product not found ────────────────────────────────────────────────── */
.product-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    max-width: var(--max-width);
    margin: 0 auto;
}
.product-not-found h2 {
    font-size: 1.75rem;
    margin: 1rem 0 0.5rem;
    font-family: var(--font-heading);
}
.product-not-found p { color: var(--color-text-muted); margin-bottom: 1.5rem; }

/* ── Specifications table ─────────────────────────────────────────────── */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th,
.spec-table td {
    padding: 0.9rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.spec-table th { color: var(--color-text-muted); font-weight: 500; width: 35%; background: var(--color-bg-base); }
.spec-table td { width: 65%; }
.spec-table tr:nth-child(even) td { background: #fafafa; }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: none; }

/* ── Gallery placeholder ──────────────────────────────────────────────── */
.gallery-placeholder {
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    aspect-ratio: 1;
    width: 100%;
    font-size: 3rem;
    color: #9ca3af;
}

@media (max-width: 768px) {
    .product-not-found { padding: 40px 16px; }
}

/* ── Active filter chips ──────────────────────────────────── */
.active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.6rem 0 0.8rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.8rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--color-primary-light, #fff1ee);
    color: var(--color-primary);
    border: 1px solid var(--color-primary-light, #ffd6cc);
    border-radius: 20px;
    padding: 0.25rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.filter-chip:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ── Dynamic filter lists ─────────────────────────────────── */
.filter-dynamic-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.filter-loading {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    padding: 0.25rem 0;
}

/* ── Clear filters button ─────────────────────────────────── */
.filter-clear-btn {
    display: block;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.filter-clear-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ── Sidebar vehicle label ────────────────────────────────── */
.sidebar-vehicle-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-main);
    margin-bottom: 0.4rem;
}

.sidebar-vehicle-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.sidebar-vehicle-actions button {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: border-color 0.15s, color 0.15s;
}

.sidebar-vehicle-actions button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ── Load More button ─────────────────────────────────────── */
.btn-outline {
    display: block;
    /* margin: 2rem auto; */
    padding: 0.75rem 2.5rem;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-outline:hover {
    background: var(--color-primary);
    color: #fff;
}

@media (max-width: 768px) {
    .active-chips { padding: 0.4rem 0 0.6rem; }
    .filter-dynamic-list { max-height: 150px; }
}

/* ── Inline checkout auth ─────────────────────────────────────────────────── */

.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-family: var(--font-body);
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.auth-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

.form-error {
    color: var(--color-error);
    font-size: 13px;
    padding: 8px 12px;
    background: #fef2f2;
    border-radius: 5px;
    border: 1px solid #fca5a5;
    margin-bottom: 12px;
}

#inline-login-form .btn-full,
#inline-register-form .btn-full,
.btn-full {
    width: 100%;
    margin-top: 4px;
}

#inline-login-form .form-group,
#inline-register-form .form-group {
    margin-bottom: 14px;
}

#inline-login-form label,
#inline-register-form label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 5px;
}

#inline-login-form input,
#inline-register-form input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

#inline-login-form input:focus,
#inline-register-form input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(230,57,0,0.08);
}

/* ── Login page ──────────────────────────────────────────────────────────── */

.login-page-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-base);
    padding: 20px;
}

.login-card {
    background: white;
    border-radius: 12px;
    padding: 36px 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo img { height: 36px; }

@media (max-width: 460px) {
    .login-card { padding: 24px 16px; }
}

/* ─── Checkout 3-step flow ─────────────────────────────────────────────────── */
.checkout-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 20px; }
.checkout-step { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-muted); }
.checkout-step.active { color: var(--color-primary); font-weight: 600; }
.checkout-step.done { color: var(--color-success); }
.checkout-step-num { width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.checkout-step.done .checkout-step-num { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.checkout-step-line { flex: 1; height: 1px; background: var(--color-border); margin: 0 8px; max-width: 48px; }

.co-step { animation: coFadeIn 0.18s ease; }
@keyframes coFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.co-addr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.co-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); margin-top: 8px; cursor: pointer; }
.co-checkbox-label input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-primary); }
/* Terms & Conditions consent — wraps to two lines, so align to the top of the box
   instead of centring, and keep the links visually distinct from the label text.
   Rendered as a div (not a label) so the inline policy links don't toggle the box. */
.co-terms-label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--color-text-muted); text-align: left; margin: 4px 0 6px; line-height: 1.5; }
.co-terms-label input { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; cursor: pointer; accent-color: var(--color-primary); }
.co-terms-label a { color: var(--color-primary); text-decoration: underline; font-weight: 500; }
.co-terms-label a:hover { text-decoration: none; }
#co-err-terms { color: var(--color-danger, #dc2626); font-size: 12.5px; min-height: 16px; margin-bottom: 4px; text-align: left; }
#co-pay-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.co-add-addr-toggle { background: none; border: 1px dashed var(--color-border); color: var(--color-primary); padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; margin-top: 8px; margin-bottom: 2px; transition: background 0.15s, border-color 0.15s; }
.co-add-addr-toggle:hover { background: var(--color-primary-light); border-color: var(--color-primary); }

.co-section-heading { font-size: 14px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.co-items { border-top: 1px solid var(--color-border); }
.co-item-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.co-item-name { color: var(--color-text-main); flex: 1; padding-right: 8px; }
.co-item-price { font-weight: 600; flex-shrink: 0; }
.co-item-mrp { font-weight: 400; text-decoration: line-through; color: var(--color-text-muted); margin-left: 6px; font-size: 12.5px; }
.co-item-discount { font-weight: 600; color: #059669; margin-left: 6px; font-size: 12px; }
.co-summary-totals { margin-top: 6px; }
.co-total-row { display: flex; justify-content: space-between; font-size: 14px; padding: 5px 0; color: var(--color-text-muted); }
.co-savings-row { color: #059669; font-weight: 600; }
.co-grand-total { font-size: 16px; font-weight: 700; color: var(--color-text-main); border-top: 2px solid var(--color-border); margin-top: 4px; padding-top: 8px; }
.co-delivery-box { margin-top: 16px; padding: 12px 14px; background: #f8f9fa; border-radius: 8px; border: 1px solid var(--color-border); font-size: 13px; }
.co-delivery-addr { margin-top: 4px; color: var(--color-text-muted); line-height: 1.5; }
.co-step-actions { display: flex; gap: 10px; margin-top: 20px; }
.co-step-actions .btn-outline { flex: 0 0 auto; }
.co-step-actions .btn-primary { flex: 1; }
.co-payment-info { text-align: center; padding: 8px 0 4px; }
.btn-lg { padding: 14px 24px; font-size: 1.05rem; }

/* ─── Address cards (used in checkout + addresses page) ────────────────────── */
.address-card { border: 2px solid var(--color-border); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s; margin-bottom: 10px; position: relative; }
.address-card:hover { border-color: var(--color-primary); }
.address-card.selected { border-color: var(--color-primary); background: rgba(230,57,0,0.04); }
.address-card .address-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px; }
.address-card .address-name { font-weight: 600; margin-bottom: 2px; }
.address-card .address-line { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.address-selected-check { position: absolute; top: 12px; right: 12px; color: var(--color-primary); font-size: 18px; display: none; }
.address-card.selected .address-selected-check { display: block; }
.address-default-badge { position: absolute; top: 12px; right: 12px; background: #ecfdf5; color: var(--color-success); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.address-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn-sm { padding: 5px 12px; font-size: 12.5px; border-radius: 6px; }
.btn-outline { background: none; border: 1px solid var(--color-border); color: var(--color-text-main); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: border-color 0.15s, background 0.15s; }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.btn-outline.btn-sm { padding: 5px 10px; }
.btn-danger-outline { background: none; border: 1px solid #fca5a5; color: var(--color-error); padding: 5px 10px; border-radius: 6px; font-size: 12.5px; cursor: pointer; transition: background 0.15s; }
.btn-danger-outline:hover { background: #fef2f2; }

/* ─── Order cards ──────────────────────────────────────────────────────────── */
.order-card { border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.order-card-head { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; background: #fafafa; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; gap: 8px; }
.order-card-body { padding: 14px 18px; }
.order-card-body.hidden { display: none; }
.order-id { font-weight: 700; font-size: 14px; font-family: monospace; }
.order-date { font-size: 13px; color: var(--color-text-muted); }
.order-meta { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.order-status-badge { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.status-pending { background: #fffbeb; color: #b45309; }
.status-confirmed,.status-processing { background: #eff6ff; color: #1d4ed8; }
.status-shipped { background: #f5f3ff; color: #7c3aed; }
.status-delivered { background: #ecfdf5; color: var(--color-success); }
.status-cancelled { background: #fef2f2; color: var(--color-error); }
.status-refunded { background: #f3f4f6; color: #6b7280; }
.order-thumb-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.order-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-border); background: #f3f4f6; }
.order-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.order-detail-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 13px; }
.order-detail-item { display: flex; justify-content: space-between; padding: 4px 0; color: var(--color-text-muted); }
.order-tracking-chip { display: inline-flex; align-items: center; gap: 6px; background: #f5f3ff; color: #7c3aed; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-top: 6px; }

/* ─── Account page ─────────────────────────────────────────────────────────── */
.account-nav-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.account-nav-card { background: white; border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; text-align: center; text-decoration: none; color: var(--color-text-main); transition: box-shadow 0.15s, border-color 0.15s; display: block; }
.account-nav-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(230,57,0,0.08); }
.account-nav-card .anc-icon { font-size: 2rem; margin-bottom: 10px; }
.account-nav-card .anc-label { font-weight: 600; font-size: 15px; }
.account-nav-card .anc-sub { font-size: 12.5px; color: var(--color-text-muted); margin-top: 4px; }
.profile-card { background: white; border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.profile-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.profile-name { font-weight: 700; font-size: 1.1rem; }
.profile-meta { font-size: 13px; color: var(--color-text-muted); margin-top: 3px; }
.page-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.page-header-row h1 { font-size: 1.5rem; margin: 0; }
/* .account-wrap { max-width: 700px; margin: 0 auto; padding: 32px 16px; } */
.account-wrap {
  padding-top: 100px;
  max-width: 860px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.empty-state { text-align: center; padding: 48px 16px; color: var(--color-text-muted); }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 12px; }
.empty-state h3 { font-size: 1.1rem; color: var(--color-text-main); margin-bottom: 8px; }
.page-nav-link { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: 14px; text-decoration: none; margin-bottom: 16px; }
.page-nav-link:hover { color: var(--color-primary); }

/* ─── Address/password page modal ──────────────────────────────────────────── */
.addr-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: none; }
.addr-modal-overlay.active { display: flex; align-items: center; justify-content: center; padding: 16px; }
.addr-modal { background: #fff; border-radius: 12px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.18); }
.addr-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--color-border); }
.addr-modal-head h3 { margin: 0; font-size: 1.1rem; }
.addr-modal-body { padding: 20px; }
.addr-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--color-border); }

/* ─── Password page ────────────────────────────────────────────────────────── */
.cp-card { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 28px 24px; max-width: 440px; margin: 0 auto; }
.cp-hint { font-size: 12.5px; color: var(--color-text-muted); margin-top: 6px; }
.form-success { background: #ecfdf5; border: 1px solid #6ee7b7; border-radius: 8px; padding: 10px 14px; font-size: 13.5px; color: var(--color-success); display: none; margin-bottom: 14px; }

/* ─── btn-full ─────────────────────────────────────────────────────────────── */
.btn-full { width: 100%; }

@media (max-width: 768px) {
    .account-nav-cards { grid-template-columns: 1fr 1fr; }
    .checkout-steps { font-size: 11px; }
    .co-addr-form-grid { grid-template-columns: 1fr; gap: 0; }
    .co-step-actions { flex-direction: column; }
    .co-step-actions .btn-outline { order: 2; }
    .co-step-actions .btn-primary { order: 1; }
    .order-card-head { flex-direction: column; align-items: flex-start; }
}
/* Checkout modal step action buttons */
#co-continue-1,
#co-continue-2,
#co-pay-btn {
  width: 100%;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
}

.co-step-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.co-step-actions .btn {
  flex: 1;
  padding: 11px 16px;
  font-size: 14px;
}

/* ── Image dropzone (admin product form) ──────────────────────────────────── */
.img-dropzone {
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.img-dropzone:hover,
.img-dropzone.drag-over { border-color: #e63900; background: #fff1ee; }
.img-dropzone-icon { font-size: 2rem; margin-bottom: 8px; color: #9ca3af; }
.img-dropzone-text { font-size: 13.5px; color: #6b7280; }

.img-thumb-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; min-height: 20px; }
.img-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  cursor: grab;
  transition: opacity 0.15s;
}
.img-thumb img { width: 100%; height: 100%; object-fit: cover; }
.img-thumb-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.img-thumb.uploading { opacity: 0.5; pointer-events: none; }
.img-thumb.dragging  { opacity: 0.3; border: 2px dashed #e63900; }

/* ── Fitment table (admin) ────────────────────────────────────────────────── */
.fitment-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px; }
.fitment-table th {
  text-align: left;
  padding: 7px 10px;
  background: #f9fafb;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}
.fitment-table td { padding: 9px 10px; border-bottom: 1px solid #f3f4f6; }
.fitment-table tr:last-child td { border-bottom: none; }
.fitment-table tr:hover td { background: #fafafa; }
.fitment-progress { font-size: 13px; color: #6b7280; padding: 8px 0; }

/* ── MOQ badge (product cards + detail) ──────────────────────────────────── */
.moq-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

/* ── Checkout totals ──────────────────────────────────────────────────────── */
.co-total-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid #f3f4f6;
}
.co-total-row:last-child { border-bottom: none; }
.co-total-final {
  font-weight: 700;
  font-size: 16px;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 2px solid #e5e7eb;
  border-bottom: none;
}
.co-promo-hint {
  font-size: 12px;
  color: #059669;
  background: #ecfdf5;
  padding: 6px 10px;
  border-radius: 5px;
  margin: 4px 0;
  text-align: center;
}

/* ── Admin Settings page ──────────────────────────────────────────────────── */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
}
.setting-row:last-child { border-bottom: none; }
.setting-label { color: #374151; }
.setting-input-wrap { display: flex; align-items: center; gap: 8px; }
.setting-input {
  width: 100px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  text-align: right;
  font-family: inherit;
}

/* ============================================================
   HOMEPAGE REVAMP — Layout Utilities
   ============================================================ */
/* Unified with --max-width (1280px, same as .hero-grid and every other
   var(--max-width) section) — this used to be a hardcoded 1200px, 80px
   narrower than the hero above it, so every section using .container (trust
   bar, product/category grids, CTA banner, testimonials — 8 sections on the
   homepage alone) had its left/right edges sit ~40px inboard of the hero's,
   a visible margin mismatch running down the page. */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

.section-block { padding: 52px 0; }
.section-alt { background: #f9fafb; }

.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.section-head.centered { flex-direction: column; text-align: center; gap: 8px; }
.section-title { font-size: clamp(20px, 2.5vw, 26px); font-weight: 700; color: #111827; letter-spacing: -0.3px; }
.section-desc { font-size: 15px; color: #6b7280; max-width: 480px; }
.section-link { font-size: 13.5px; font-weight: 600; color: #e63900; text-decoration: none; white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .section-block { padding: 36px 0; }
  .section-head { margin-bottom: 20px; }
}


/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    padding: 18px 0;
}

.trust-bar-grid {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.trust-bar .trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 160px;
    background: none;
    padding: 0;
    border: none;
}

.trust-bar .trust-icon { font-size: 22px; flex-shrink: 0; }
.trust-title { font-size: 13.5px; font-weight: 600; color: #111827; }
.trust-sub { font-size: 12px; color: #6b7280; }

@media (max-width: 768px) {
    .trust-bar-grid { justify-content: flex-start; gap: 14px; }
    .trust-bar .trust-item { min-width: 140px; }
}

/* ============================================================
   SHOP BY CATEGORY GRID
   ============================================================ */
.category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.category-grid .category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: #374151;
    transition: all 0.15s;
    text-align: center;
    /* reset old .category-card styles */
    min-height: unset;
    width: unset;
}

.category-grid .category-card:hover {
    border-color: #e63900;
    box-shadow: 0 4px 16px rgba(230, 57, 0, 0.08);
    transform: translateY(-2px);
    color: #111827;
}

.category-card-icon {
    font-size: 72px;
    margin-bottom: 12px;
    transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    /* This card stacks icon-over-name (not side-by-side like the Part
       Category rows), so there's no text beside it to lean away from —
       left/right stay centred since the 12px side padding is symmetric.
       The origin sits below-centre instead, biasing growth upward into the
       card's roomier 20px top padding and away from the name text just
       12px below, which is the tighter of the two directions. */
    transform-origin: center 65%;
}
/* 72px is already large relative to this card's 12px side padding, so the
   safe headroom here is smaller than the Part Category list — 1.28x is
   about the ceiling before the icon's own horizontal growth (unaffected by
   the vertical bias above) would reach the card's edge. */
.category-grid .category-card:hover .category-card-icon {
    transform: scale(1.28);
}
.category-card-name { font-size: 12.5px; font-weight: 500; line-height: 1.3; }

@media (max-width: 992px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .category-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 480px)  { .category-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   WHY SPAREBLAZE
   ============================================================ */
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.why-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px 20px;
}

.why-icon { font-size: 32px; margin-bottom: 12px; }
.why-title { font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.why-desc { font-size: 13.5px; color: #6b7280; line-height: 1.6; }

@media (max-width: 992px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .why-grid { grid-template-columns: 1fr; } }

.setting-input:focus { outline: none; border-color: #e63900; }
.setting-saved { color: #059669; font-size: 14px; }
/* ── Categories page ──────────────────────────────────────────── */
.cats-page { min-height: 100vh; background: #f3f4f6; padding-bottom: 60px; }

.cats-header {
    background: linear-gradient(135deg, #0f1117 0%, #1a1d23 100%);
    padding: 48px 0 40px;
    margin-bottom: 36px;
}
.cats-title { font-size: clamp(22px,3vw,34px); font-weight: 800; color: white; margin-bottom: 8px; }
.cats-sub   { font-size: 15px; color: #9ca3af; margin-bottom: 16px; }

.cats-vehicle-ctx {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(5,150,105,0.15);
    border: 1px solid rgba(5,150,105,0.3);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #6ee7b7;
    margin-top: 8px;
    flex-wrap: wrap;
}
.cats-vc-change, .cats-vc-clear {
    color: #6ee7b7; font-size: 12px; cursor: pointer; text-decoration: none;
}

.cats-section { margin-bottom: 48px; }
.cats-section-head { margin-bottom: 20px; }
.cats-section-title { font-size: 20px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.cats-section-sub   { font-size: 13px; color: #6b7280; }

.cats-loading {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 48px; color: #6b7280; font-size: 14px;
}

/* Part category grid */
.part-cats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.part-cat-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.part-cat-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-color: #e63900;
}

.part-cat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    text-decoration: none;
    color: #111827;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s;
}
.part-cat-header:hover { background: #fff5f2; }

.part-cat-icon {
    font-size: 24px;
    flex-shrink: 0;
    display: inline-block;
    /* Origin sits right-of-centre (not dead centre) so scaling grows mostly
       leftward into the card's own 16px padding, and only a little
       rightward toward the 12px gap before the name text — the icon reads
       as "zooming toward the left" instead of growing evenly in both
       directions and crowding the label. */
    transform-origin: 62% center;
    transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}
/* Icons are small at rest for a compact grid, so on hover they scale up in
   place — a transform (not a font-size change) so nothing reflows and
   neighbouring text/cards never shift. The 1.85x factor plus the
   left-biased transform-origin above is deliberately tuned so growth stays
   inside the 16px card padding / 12px text gap on every side, without
   clipping or overlapping the label. */
.part-cat-header:hover .part-cat-icon { transform: scale(1.85); }

.part-cat-info  { flex: 1; }
.part-cat-name  { font-weight: 600; font-size: 14.5px; display: block; }
.part-cat-count { font-size: 11.5px; color: #9ca3af; }
.part-cat-arrow { font-size: 11px; color: #9ca3af; flex-shrink: 0; }

.part-cat-children { display: flex; flex-direction: column; padding: 4px 0; }
.part-cat-child {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 16px 7px 20px;
    font-size: 13px; color: #374151; text-decoration: none;
    transition: background 0.12s, color 0.12s;
    border-bottom: 1px solid #f9fafb;
}
.part-cat-child:last-child { border-bottom: none; }
.part-cat-child:hover { background: #fff5f2; color: #e63900; }
.part-cat-child-icon {
    font-size: 13px;
    display: inline-block;
    /* Same left-biased growth as .part-cat-icon above, scaled to this row's
       tighter 8px text gap / 20px left padding. Vertical room (7px padding)
       is the real ceiling on how large this one can safely get — the
       horizontal bias doesn't help there, so this scale factor is not
       pushed any further even though there's still horizontal headroom. */
    transform-origin: 65% center;
    transition: transform var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}
.part-cat-child:hover .part-cat-child-icon { transform: scale(1.95); }

/* Nesting marker on sub-sub-categories and deeper. Level-1 children keep the
   flush look they've always had; only levels below get the tick. Sized down and
   muted so it reads as structure, not as another icon competing with the real
   category icon that follows it. */
.part-cat-child-tick {
    color: #c3c8d0;
    font-size: 11px;
    line-height: 1;
    margin-right: -2px;
    flex-shrink: 0;
}
.part-cat-child:hover .part-cat-child-tick { color: #f0a68e; }

/* Type category grid */
.type-cats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.type-cat-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 22px 16px;
    text-decoration: none;
    color: #374151;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.type-cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }

.type-cat-oem:hover         { border-color: #059669; }
.type-cat-aftermarket:hover { border-color: #2563eb; }
.type-cat-used:hover        { border-color: #d97706; }
.type-cat-refurbished:hover { border-color: #7c3aed; }
.type-cat-wholesale:hover   { border-color: #0891b2; }

.type-cat-icon { font-size: 28px; }
.type-cat-name { font-size: 15px; font-weight: 700; color: #111827; }
.type-cat-desc { font-size: 12px; color: #6b7280; line-height: 1.5; flex: 1; }
.type-cat-cta  { font-size: 12.5px; font-weight: 600; color: #e63900; margin-top: 4px; }

@media (max-width: 992px) {
    .part-cats-grid { grid-template-columns: repeat(2, 1fr); }
    .type-cats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .part-cats-grid { grid-template-columns: 1fr; }
    .type-cats-grid { grid-template-columns: repeat(2, 1fr); }
    .cats-header    { padding: 32px 0 28px; }
}
@media (max-width: 480px) {
    .type-cats-grid { grid-template-columns: 1fr; }
}

/* ── Shared page hero header (listing pages & search) ─────────── */
.page-hero {
    background: linear-gradient(135deg, #0f1117 0%, #1a1d23 100%) !important;
    padding: 40px 0 36px !important;
    margin-bottom: 0;
    border-bottom: none !important;
    text-align: left !important;
}

.page-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-hero-title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: white !important;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.page-hero-sub {
    font-size: 14px;
    color: #9ca3af !important;
    margin: 0;
}

.page-hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #6b7280;
    margin-bottom: 12px;
}

.page-hero-breadcrumb a { color: #9ca3af; text-decoration: none; }
.page-hero-breadcrumb a:hover { color: white; }
.page-hero-breadcrumb span { color: #4b5563; }

@media (max-width: 768px) {
    .page-hero { padding: 28px 0 24px !important; }
}

/* ── Unified Navbar (nav-loader.js) ─────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 1px 0 #e5e7eb;
}

/* Row 1 */
.nav-top { border-bottom: 1px solid #f3f4f6; }

.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 68px;
}

.logo { flex-shrink: 0; text-decoration: none; display: flex; align-items: center; }
.logo-text { font-size: 1.4rem; font-weight: 800; color: var(--color-primary, #e63900); }

/* Search */
.nav-search-wrap { flex: 1; min-width: 0; max-width: 680px; }
.nav-search-form {
  display: flex;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  /* No overflow:hidden here — it would clip the .qs-select-options popover
     that opens below the brand dropdown. The pill shape is preserved
     instead by rounding the outer corners of the first/last children
     directly (see .nav-brand-select .qs-select-trigger and .nav-search-btn
     below). */
  background: #f9fafb;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.nav-search-form:focus-within {
  border-color: #e63900;
  background: white;
  box-shadow: 0 0 0 3px rgba(230,57,0,0.08);
}

/* Custom dropdown (button + option list) replacing the native <select> —
   same .qs-select component used by the "Find Parts For Your Car" widget,
   just compact-styled to sit flush inside the pill-shaped search bar. */
.nav-brand-select {
  flex-shrink: 0;
  min-width: 130px;
  max-width: 160px;
}

.nav-brand-select .form-group {
  margin-bottom: 0;
}

.nav-brand-select .form-group > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.nav-brand-select .qs-select-trigger {
  height: 44px;
  padding: 0 26px 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  background: transparent;
  border-radius: 999px 0 0 999px;
  /* Thin vertical divider between the dropdown and the search input,
     without the heavy filled/bordered look the old design had. */
  border-right: 1px solid #e5e7eb;
}

.nav-brand-select .qs-select-trigger i {
  font-size: 11px;
}

.nav-search-input-wrap { flex: 1; position: relative; }
.nav-search-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 0 14px;
  height: 44px;
  font-size: 14px;
  color: #111827;
  background: transparent;
  font-family: inherit;
}

.nav-search-btn {
  padding: 0 18px;
  height: 44px;
  background: transparent;
  color: #6b7280;
  border: none;
  border-radius: 0 999px 999px 0;
  cursor: pointer;
  font-size: 15px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.nav-search-btn:hover { color: #e63900; }

/* Right actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #374151;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.nav-icon-btn:hover { background: #f3f4f6; color: #e63900; }

/* ─── Nav Auth Widget (Login / Welcome) ──────────────────────────────── */
.nav-auth {
  display: flex;
  align-items: center;
}

.nav-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #e63900;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.12s, transform 0.12s;
}
.nav-login-btn:hover { background: #c62e00; transform: translateY(-1px); }

.nav-welcome {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.nav-welcome-icon { color: #e63900; font-size: 15px; }

.nav-welcome-text {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-logout-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 12px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.nav-logout-btn:hover { background: #fef2f2; color: #dc2626; }

/* JS toggles .logged-in on #nav-auth-widget */
#nav-auth-widget.logged-in .nav-login-btn { display: none; }
#nav-auth-widget.logged-in .nav-welcome { display: flex; }

@media (max-width: 992px) {
  .nav-auth { display: none; }
}

.mobile-nav-auth { display: none; }

.cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #e63900;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* Row 2 — menu bar */
.nav-menu-bar {
  background: white;
  border-top: 1px solid #f3f4f6;
}

.nav-menu-bar .nav-container {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Taller at >=1100px so the enlarged Maveli badge (.celebration-slot above)
   has the vertical room to actually render bigger — see the comment there.
   The other things this row holds ("All Categories", the nav-menu-right
   links) are all short single-line text/buttons that just re-center in the
   extra height, so this doesn't visibly change them beyond that. Every
   sticky element whose offset assumes this row's height (.pdp-buybox /
   .pdp-tabbar in product.html, .sidebar-filters below) has a matching
   +24px correction under this same breakpoint — keep those in sync if this
   value changes again. */
@media (min-width: 1100px) {
  .nav-menu-bar .nav-container {
    height: 68px;
  }
}

.nav-menu-left, .nav-menu-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Always a row — .nav-menu-left itself switches to a column stack inside
   the mobile drawer (see the ≤768px rule below), but "All Categories" and
   the celebration slot beside it should stay paired side by side there too,
   not stack on top of each other. */
.nav-left-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* ── Celebration/event placeholder ─────────────────────────────────────────
   A small reusable slot beside "All Categories" for seasonal theming (today:
   Onam). This rule only sizes/positions the slot itself — swap
   the .celebration-content--* block in nav-loader.js for a different theme
   without touching anything here. Sized to roughly match .nav-menu-btn's
   own height (~30px) so it reads as a natural pair, not an add-on. */
.celebration-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 34px;
  padding: 1px 2px;
  box-sizing: border-box;
  /* No border/background/overflow-clip — the flag sits directly on the
     navbar rather than inside a visible chip/badge box, which reads as
     more natural and leaves the full slot for the flag art itself (it
     also grew a little, now that it isn't losing space to a border and
     padding). No overflow:hidden either: the flag's per-strip ripple and
     drop-shadow bleed a fraction of a pixel past the SVG's own box at
     their peak, and clipping that flush against an edge looked harsher
     than letting it breathe — there's nothing here to clip against now. */
}
/* At >=1100px there's comfortably 250px+ of clear gap between this slot and
   the right-hand nav links (measured — the tight zone is only ~993-1030px,
   well below this breakpoint), so Maveli gets to roughly double in on-screen
   size here. .celebration-maveli is `height:100%; width:auto` — its
   rendered size is driven entirely by this box's HEIGHT (width just follows
   the SVG's own aspect ratio) — so the +24px .nav-menu-bar .nav-container
   height increase below is what actually does the enlarging; this rule just
   gives the taller row enough width to fit the wider umbrella+bust
   composition. Gated behind this breakpoint on purpose: it leaves the
   993-1099px range (where the horizontal gap is genuinely tight) completely
   untouched, at zero risk, rather than trying to thread a precise fit
   through it. */
@media (min-width: 1100px) {
  .celebration-slot {
    width: 100px;
    height: 64px;
    padding: 2px 4px;
  }
}

.celebration-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Mobile fallback — see the markup comment in nav-loader.js for why this
   duplicate exists. Hidden above 768px, where the row-2 .celebration-slot
   is already visible inline next to "All Categories". */
.celebration-strip {
  display: none;
}
@media (max-width: 768px) {
  .celebration-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 4px 14px;
    box-sizing: border-box;
    background: white;
    border-top: 1px solid #f3f4f6;
    /* Normal document flow — NOT position:absolute. This replaced an
       overlay wedge that got reported twice for covering real hero-slide
       content (a badge, then a heading) — different slides place text
       close enough to the navbar that no overlay size was ever safe. A
       normal-flow strip takes its own fixed ~44px and pushes the hero down
       by that instead of layering over it, so there's nothing left for it
       to cut off, regardless of what any given slide's content looks like.
       Sits inside <nav> after .nav-menu-bar (which is display:none at this
       width unless its mobile drawer is open — see the ≤768px rule further
       down — so it takes no space here), reading as a slim strip directly
       under row 1. */
  }
  /* .celebration-content's own base rule sets width:100% (correct for its
     other, single-child placements) — that would otherwise have it claim
     the whole strip and squeeze the label out. It only needs to be as wide
     as the image itself here. */
  .celebration-strip .celebration-content {
    width: auto;
    flex: 0 0 auto;
  }
  .celebration-strip-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted, #64748b);
    white-space: nowrap;
  }
}

/* Onam theme — King Maveli (Mahabali) */
.celebration-content--onam {
  gap: 0;
}
/* A plain <img> (a supplied illustration, not hand-drawn SVG) — height:100%
   plus width:auto scales it proportionally off its own intrinsic aspect
   ratio, same as the SVG artwork this replaced. Its canvas is a near-tight
   crop already (verified — only a few px of white margin on any side), so
   no object-fit/cropping is needed to fill the box well. The image's own
   background is white, which matches .nav-menu-bar's white background
   exactly on desktop and sits inside the white leading edge of the mobile
   corner wedge's fade-to-transparent gradient — so no transparency/cutout
   was needed for either placement. */
.celebration-maveli {
  height: 100%;
  width: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.18));
  animation: sbMaveliBob 2.6s ease-in-out infinite;
}
/* Containment for admin-uploaded event artwork.
   .celebration-maveli sizes off HEIGHT alone (height:100%; width:auto), which is
   correct for the bundled illustration — its aspect ratio was chosen against
   this slot. An image uploaded from the admin panel has no such guarantee: a
   wide banner would render at height:100% and simply overflow sideways into the
   nav links (the 993–1099px range has very little slack, per the note above).
   Scoped to .celebration-content--dynamic, a class only added by JS when it
   actually swaps in an uploaded image, so the shipped Onam artwork renders
   pixel-for-pixel as before. object-fit:contain letterboxes rather than crops,
   so no part of a festival graphic is ever cut off. */
.celebration-content--dynamic .celebration-maveli {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* A gentle welcoming nod rather than the flag's fabric-in-the-wind ripple —
   pivoted from the bottom, so it reads as a small bow/greeting rather than
   the whole image tilting off-balance. It renders at only tens of px tall
   on screen, so a couple of degrees is already the right visual scale;
   screen-pixel-sized amplitudes would be imperceptible. */
@keyframes sbMaveliBob {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%      { transform: rotate(-2.5deg) translateY(-0.4px); }
}
@media (prefers-reduced-motion: reduce) {
  .celebration-maveli { animation: none; }
}

.nav-menu-link {
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: #374151;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-menu-link:hover, .nav-menu-link.active { color: #e63900; background: #fff1ee; }

.nav-menu-btn {
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: white;
  background: #e63900;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.12s;
}
.nav-menu-btn:hover { background: #c73200; }

.nav-browse-parts { font-weight: 600; color: #1d4ed8; }
.nav-browse-parts:hover { background: #eff6ff; color: #1d4ed8; }

/* Help / Specialty Parts dropdown */
.nav-help-wrap { position: relative; }
.help-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  /* Right-anchored, not left-anchored: this trigger sits near the right end
     of the nav bar, so a left-anchored 250px-wide panel ran past the
     viewport's right edge (clipped by body{overflow-x:hidden} rather than
     scrolling) at common laptop widths — confirmed overflowing by 18-61px
     at 1024-1366px wide. Anchoring to the trigger's right edge instead
     keeps the whole panel on-screen regardless of viewport width. */
  right: 0;
  background: white;
  border: 1px solid #f0f1f3;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.12);
  z-index: 200;
  min-width: 250px;
  max-width: calc(100vw - 24px);
  padding: 10px;
  display: none;
}
.help-dropdown.open { display: block; }
.help-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.12s, color 0.12s;
}
.help-item i {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff1ee;
  color: #e63900;
  font-size: 14px;
}
.help-item:hover { background: #f9fafb; color: #e63900; }

/* Mobile */
@media (max-width: 992px) {
  .nav-brand-select { display: none; }
  .nav-menu-link:not(.nav-browse-parts):not(.nav-help-btn) { display: none; }
}

@media (max-width: 768px) {
  .nav-container { padding: 0 12px; gap: 10px; height: 60px; }
  .nav-search-wrap { max-width: none; }
  .nav-menu-bar .nav-container { height: 40px; }
  .nav-all-cats { display: none; }
}

/* ── CSV Product Upload (Admin) ── */
.upload-page { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }

.up-header { display: flex; align-items: center; gap: 16px; padding: 16px 0 24px; border-bottom: 1px solid var(--color-border); margin-bottom: 24px; }
.up-back { color: var(--color-text-muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.up-back:hover { color: var(--color-primary); }
.up-title { font-family: var(--font-heading); font-size: 20px; font-weight: 700; flex: 1; }
.up-signout { margin-left: auto; }

.up-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); padding: 24px; margin-bottom: 20px; }
.up-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.up-card h2 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.up-card-sub { color: var(--color-text-muted); font-size: 13px; margin-bottom: 16px; }

.up-forbidden { max-width: 480px; margin: 80px auto; text-align: center; }
.up-forbidden h2 { margin-bottom: 8px; }
.up-forbidden p { color: var(--color-text-muted); margin-bottom: 20px; }

.sample-btn { background: transparent; border: 1.5px solid var(--color-primary); color: var(--color-primary); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--transition-fast); white-space: nowrap; }
.sample-btn:hover { background: var(--color-primary-light); }

.drop-zone { border: 2px dashed var(--color-border); border-radius: var(--radius-md); padding: 3rem 1.5rem; text-align: center; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); }
.drop-zone.drag-over { border-color: var(--color-primary); background: var(--color-primary-light); }
.drop-zone-title { font-size: 14px; color: var(--color-text-main); margin-bottom: 16px; }
.drop-zone-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 12px; }

.file-selected { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 10px 14px; background: var(--color-bg-base); border-radius: var(--radius-sm); font-size: 13px; }
.upload-page .btn-ghost { background: transparent; border: none; color: var(--color-error); font-size: 13px; font-weight: 600; cursor: pointer; }
.upload-page .btn-ghost:hover { text-decoration: none; }

.up-help { margin-top: 20px; font-size: 13px; }
.up-help summary { cursor: pointer; color: var(--color-text-muted); font-weight: 600; }
.up-help-scroll { overflow-x: auto; margin-top: 12px; }
.up-help-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 640px; }
.up-help-table th, .up-help-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--color-border); }
.up-help-table th { color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .5px; }
.up-help-note { margin-top: 12px; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.6; }
.up-help-note .mono { font-family: monospace; color: var(--color-text-main); }

.mapping-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.75rem 1rem; align-items: center; }
.mapping-label { font-size: 13px; font-weight: 600; color: var(--color-text-main); }
.mapping-grid select { padding: 8px 10px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--color-bg-surface); color: var(--color-text-main); }
.mapping-grid select:focus { outline: none; border-color: var(--color-primary); }

.up-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.up-actions-split { justify-content: space-between; }

.up-table-scroll { overflow-x: auto; }
.preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.preview-table th, .preview-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.preview-table th { color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .5px; background: var(--color-bg-base); }
.preview-table tr:nth-child(even) td { background: #fafafa; }
.preview-table tr.error td { background: #fff0f0; border-left: 3px solid var(--color-error); }

.validity-summary { margin-top: 12px; font-size: 13px; }
.validity-summary .vs-warn { color: var(--color-warning); font-weight: 600; margin-bottom: 4px; }
.validity-summary .vs-ok { color: var(--color-success); font-weight: 600; }

.progress-bar { height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; margin-top: 16px; }
.progress-fill { height: 100%; width: 0%; background: var(--color-primary); transition: width 0.2s ease; }

.result-summary { margin-top: 20px; padding: 1rem; border-radius: var(--radius-sm); font-size: 13px; }
.result-summary.result-success { background: rgba(5, 150, 105, 0.08); border-left: 3px solid var(--color-success); }
.result-summary.result-error { background: rgba(220, 38, 38, 0.08); border-left: 3px solid var(--color-error); }
.up-error-details { margin-top: 10px; }
.up-error-details summary { cursor: pointer; font-weight: 600; }

.mono { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12px; }

@media (max-width: 768px) {
  .upload-page { padding: 16px 12px 40px; }
  .mapping-grid { grid-template-columns: 1fr; }
  .up-card-head { flex-direction: column; align-items: flex-start; }
}

/* ── Product grid skeleton loader ── */
.sb-skel-card { pointer-events: none; }
.sb-skel-block {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
  background-size: 400% 100%;
  animation: sb-shimmer 1.4s ease infinite;
  border-radius: 4px;
}
.sb-skel-img { height: 200px; border-radius: 8px; }
.sb-skel-line { height: 12px; margin: 0.5rem 0; width: 40%; }
.sb-skel-title { height: 16px; margin: 0.4rem 0; }
.sb-skel-title-short { height: 16px; margin: 0.4rem 0; width: 70%; }
.sb-skel-price { height: 22px; margin: 0.8rem 0; width: 35%; }

@keyframes sb-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-skel-block { animation: none; }
}

/* ── Unified Navbar (nav-loader.js) — mobile hamburger + drawer ──────────────
   The Phase 20 navbar is `position: sticky` (occupies normal document flow),
   unlike the legacy navbar it replaced which was `position: fixed`. The old
   `.hero { margin-top: 128px }` mobile rule above was compensating for that
   legacy fixed navbar + a `.mobile-search` bar that no longer exists in the
   current markup — it now just adds a blank gap under the sticky navbar. */
@media (max-width: 768px) {
  .hero {
    margin-top: 0 !important;
  }
}

.nav-hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  /* The mobile drawer (.nav-menu-bar.mobile-open) is position:fixed from
     top:0, so it covers this same header row once open — without its own
     stacking order, this button (the only thing that morphs into a visible
     "X" to close it) would be rendered UNDER the drawer panel and become
     unclickable, leaving touch users with no obvious way to close the menu
     (tapping the dark overlay strip beside the drawer, or Escape, aren't
     discoverable on a touchscreen). Both siblings share .navbar's own
     stacking context, so a plain z-index above the drawer's 200 is enough.
     Confirmed via automated click-through testing. */
  position: relative;
  z-index: 201;
}
.nav-hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: #374151;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-hamburger-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger-btn.active span:nth-child(2) { opacity: 0; }
.nav-hamburger-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* z-index here is compared against .navbar (z-index:100), NOT against
   .nav-menu-bar's internal z-index:200 — the overlay is a direct child of
   <body> (appended by setupMobileDrawer()) while the drawer lives inside
   <nav class="navbar">, which establishes its own stacking context
   (position:sticky + z-index). That traps the drawer's z-index:200 so it
   can only out-rank *siblings inside* .navbar, never a sibling of .navbar
   itself. With the overlay at 199 > navbar's 100, the overlay painted over
   the whole navbar — including the open drawer — making every link inside
   it (After Market, Login, All Categories, the vehicle chip, everything)
   unclickable. Keeping this below 100 lets it sit behind the navbar/drawer
   while still covering ordinary page content behind it. */
#nav-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
}
#nav-drawer-overlay.open { display: block; }

@media (max-width: 768px) {
  .nav-hamburger-btn { display: flex; }

  /* Row 1 wraps to two lines on mobile instead of hiding the search bar —
     hamburger/logo/actions (order 1-3) stay on the first line via explicit
     order + .nav-actions' own margin-left:auto (not justify-content, which
     would spread all three across the row including the logo); the search
     form (order 4, flex-basis 100%) is forced onto its own full-width
     second line since nothing fits beside it once it claims the whole
     width. .nav-brand-select (the "Select Make" dropdown inside the form)
     is already display:none at <=992px, so the second line is just the
     input + submit button — no extra pruning needed. */
  .nav-top .nav-container {
    flex-wrap: wrap;
    height: auto;
    /* !important needed here to outrank the older "Absolute Final Mobile
       Layout Overrides" block further down (≤768px: padding/gap 0.8rem
       1rem !important; ≤350px: 0.8rem 0.5rem !important) — both target the
       bare .nav-container class with !important of their own, which beats
       plain specificity regardless of source order. .nav-top .nav-container
       is more specific, so adding !important here lets it win outright
       instead of only on ties, giving one consistent tight value across
       every mobile width instead of that block's shrinking-by-breakpoint
       gap. */
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  .nav-hamburger-btn { order: 1; }
  .nav-top .logo { order: 2; }
  .nav-top .nav-actions { order: 3; margin-left: auto; }
  .nav-search-wrap {
    display: block;
    order: 4;
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }
  /* Prevents iOS Safari's automatic zoom-on-focus, which otherwise fires
     on any text input under 16px — jarring the very first time a mobile
     visitor taps to search. */
  .nav-search-input { font-size: 16px; }

  /* Turn row 2 (category links + Help) into a slide-in drawer on mobile */
  .nav-menu-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 82vw;
    max-width: 320px;
    height: 100vh;
    background: white;
    border-top: none;
    flex-direction: column;
    padding: 76px 0 24px;
    z-index: 200;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .nav-menu-bar.mobile-open {
    display: flex;
    transform: translateX(0);
  }

  .nav-menu-bar .nav-container {
    display: flex;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 0 8px;
  }

  .nav-menu-left,
  .nav-menu-right {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .mobile-nav-auth {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
  }
  .mobile-nav-auth .nav-login-btn {
    justify-content: center;
    background: #e63900;
    color: #fff;
    border-radius: 8px;
  }
  /* These five use the #mobile-nav-auth ID (not the .mobile-nav-auth class)
     specifically to outrank the generic ".nav-menu-link:not():not(){display:
     flex}" rule below — every auth button also carries .nav-menu-link, and a
     class-only selector here (0,3,0 specificity) ties that generic rule's
     own (0,3,0) and loses on source order, which made Login/Account/Logout
     all render permanently visible regardless of .logged-in. An ID prefix
     (1,x,0) always outranks any class-only selector, tie or not. The
     desktop equivalent already does this via #nav-auth-widget — this just
     matches that pattern. */
  #mobile-nav-auth.logged-in .nav-login-btn { display: none; }
  #mobile-nav-auth .mobile-nav-welcome { display: none; }
  #mobile-nav-auth.logged-in .mobile-nav-welcome { display: flex; }
  #mobile-nav-auth .mobile-nav-logout-btn { display: none; color: #dc2626; justify-content: flex-start; }
  #mobile-nav-auth.logged-in .mobile-nav-logout-btn { display: flex; }
  .mobile-nav-auth .mobile-nav-logout-btn:hover { background: #fef2f2; color: #dc2626; }

  /* Overrule the ≤992px rule that hides these links — inside the open drawer
     every link should be visible regardless of viewport width. */
  .nav-menu-link:not(.nav-browse-parts):not(.nav-help-btn) {
    display: flex;
  }

  .nav-menu-link { padding: 12px 14px; font-size: 15px; }

  /* All Categories kept its desktop pill padding/height here, which put its
     icon+text out of step with the plain nav links below it in the drawer.
     Match their padding/font-size and stretch full-width so both share the
     same left edge instead of the pill floating narrower and misaligned. */
  .nav-all-cats {
    display: flex;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    padding: 12px 14px;
    font-size: 15px;
  }

  .nav-left-row {
    margin-bottom: 4px;
  }

  .nav-help-wrap { width: 100%; }
  .help-dropdown {
    position: static;
    display: block;
    box-shadow: none;
    border: none;
    padding: 0 0 0 14px;
    min-width: 0;
  }
  .help-dropdown:not(.open) { display: none; }
}

/* ── Right-side "info" drawer (nav-loader.js) — About/Quick Links/Shop By
   Type/Help & Support/Policies menu, triggered by #nav-info-btn
   (top-right). Available at every breakpoint, not just mobile — same
   trigger, same drawer, same open/close/accordion behaviour everywhere;
   only the panel width adapts (narrower on phones, a fixed 400px — matching
   .cart-sidebar's width so the two right-side panels feel like one family
   — on tablet/desktop). Sibling of .navbar (not nested inside it), so its
   z-index compares directly against .navbar's 100 — same reasoning as
   #nav-drawer-overlay above. */
.nav-info-btn { display: flex; }

.info-drawer {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: white;
  flex-direction: column;
  z-index: 200;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.info-drawer.open { transform: translateX(0); }

@media (max-width: 768px) {
  .info-drawer {
    width: 82vw;
    max-width: 320px;
  }
}

.info-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #f0f1f3;
  flex-shrink: 0;
}
.info-drawer-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}
.info-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.12s, color 0.12s;
}
.info-drawer-close:hover { background: #fef2f2; color: #dc2626; }

.info-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 24px;
}

.info-drawer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.info-drawer-link:hover { background: #fff1ee; color: #e63900; }
.info-drawer-link i { width: 18px; text-align: center; color: #e63900; }

.info-acc { border-bottom: 1px solid #f3f4f6; }
.info-acc:last-child { border-bottom: none; }

.info-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #1f2937;
  text-align: left;
}
.info-acc-head span { display: flex; align-items: center; gap: 10px; }
.info-acc-head span i { width: 18px; text-align: center; color: #e63900; }
.info-acc-caret { font-size: 12px; color: #9ca3af; transition: transform 0.2s ease; flex-shrink: 0; }
.info-acc.open .info-acc-caret { transform: rotate(180deg); }

.info-acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.info-acc.open .info-acc-panel { max-height: 400px; }

.info-acc-link {
  display: block;
  padding: 11px 12px 11px 40px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.info-acc-link:hover { background: #f9fafb; color: #e63900; }

/* z-index reasoning mirrors #nav-drawer-overlay: kept below .navbar's 100
   so it sits behind the navbar/drawer while still dimming page content. */
#info-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
}
#info-drawer-overlay.open { display: block; }