/* 
   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 / Slider */
.hero {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    background: #111;
    color: white;
    margin-bottom: 0px;
    overflow: hidden;
}

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

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

.slider-container {
    position: relative;
    width: 100%;
    flex-grow: 1;
    /* Ensure it fills the flex container */
    min-height: 0;
    /* Important for flex children height calculation */
    overflow: hidden;
}

.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;
    padding-bottom: 60px;
}

.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: 800px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 0 1.5rem;
    margin-left: max(5%, calc((100vw - var(--max-width)) / 2 + 1.5rem));
    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(3rem, 5vw, 4.5rem);
    letter-spacing: -1px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

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

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

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

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

.prev-btn {
    left: 2rem;
}

.next-btn {
    right: 2rem;
}

.slider-dots {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8rem;
    z-index: 30;
}

.dot {
    width: 10px;
    height: 10px;
    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);
}

.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;
    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;
}

.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; }
}

.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;
    transition: transform var(--transition-fast), filter var(--transition-fast);
    filter: grayscale(100%) opacity(0.6);
}

.carousel-item:hover {
    transform: scale(1.1);
    filter: grayscale(0%) opacity(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);
}

.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;
    padding: 3rem 1.5rem;
    align-items: start;
    /* Prevent children from escaping the container */
    overflow: hidden;
}

/* 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;
}

.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;
}

/* Makers grid tablet responsive fix */
@media (max-width: 600px) {
    .makers-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 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;
    }
}

@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-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);
}

.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: underline; }

/* 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: underline;
    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); text-decoration: underline; }

/* 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 {
    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
   ============================================================ */
.container { max-width: 1200px; 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: 36px; margin-bottom: 8px; }
.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: underline;
}

.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; }
.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; }

/* 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;
}

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

.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: underline; }

.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) {
  /* Hide the search bar from the mobile topbar (row 1) — the vehicle chip
     no longer needs hiding here since it now lives in the row-2 drawer
     alongside the other nav links, not the topbar. */
  .nav-search-wrap {
    display: none !important;
  }

  .nav-hamburger-btn { display: flex; }

  /* With the search bar hidden there's no flex:1 element left to push
     .nav-actions to the right edge — space it out explicitly. */
  .nav-top .nav-container {
    justify-content: space-between;
  }

  /* 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;
  }
  .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; }

  /* 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;
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
    font-size: 15px;
    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; }