/**
 * De Hoeve Multipower B.V. - Products Catalog & Product Detail CSS
 *
 * Depends on: style.css (CSS variables, .btn, .container, etc.)
 * Covers:
 *   - .page-hero--products
 *   - .breadcrumb
 *   - .products-layout (sidebar + main)
 *   - .sidebar sections: type buttons, nav tree, brand filter
 *   - .products-active-filters chips
 *   - .products-toolbar / sort / mobile filter btn
 *   - .sidebar-overlay (mobile drawer)
 *   - .products-grid / .product-card (spec badges, type badge)
 *   - .products-pagination
 *   - .products-cta-strip
 *   - .product-hero (detail page)
 *   - .product-gallery
 *   - .product-info
 *   - .product-tabs-section
 *   - .product-specs-table
 *   - .product-documents-list
 *   - .related-products
 *   - .product-cta-strip
 *
 * @package DeHoeve
 * @version 2.0.0
 */

/* =============================================================================
   SCOPED BOX-SIZING
   Without this, every element with explicit padding has that padding added on
   top of its declared width. width:100% + padding = wider than 100%.
   Scoped to all components in this stylesheet to avoid conflicts with style.css.
   ============================================================================= */

.page-hero, .page-hero *,
.breadcrumb, .breadcrumb *,
.products-search-section, .products-search-section *,
.products-layout, .products-layout *,
.product-hero, .product-hero *,
.product-tabs-section, .product-tabs-section *,
.product-trust-bar, .product-trust-bar *,
.related-products, .related-products *,
.products-cta-strip, .products-cta-strip *,
.product-cta-strip, .product-cta-strip *,
.product-not-found, .product-not-found * {
    box-sizing: border-box;
}

/* =============================================================================
   PAGE HERO (shared by both pages)
   ============================================================================= */

.page-hero {
    background: var(--color-gray-900);
    padding: var(--spacing-12) 0 var(--spacing-10);
    border-bottom: 1px solid var(--color-gray-800);
}

.page-hero--products {
    background: linear-gradient(135deg, var(--color-gray-900) 0%, #1f1f1f 100%);
}

.page-hero-content {
    margin-top: var(--spacing-6);
}

.page-hero-title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 var(--spacing-4);
}

.page-hero-intro {
    font-size: var(--font-size-lg);
    color: var(--color-gray-300);
    max-width: 640px;
    line-height: 1.7;
}

/* Title + AI button row — H1 on the left, Product Expert Chat button on the right */
.page-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-6);
    flex-wrap: wrap;
}

.page-hero-text {
    flex: 1 1 0;
    min-width: 0;        /* permits long H1s (e.g. "VARTA Promotive Heavy Duty 12V 45Ah Startaccu")
                            to wrap rather than pushing the button onto its own row */
}

.page-hero-text .page-hero-title {
    margin-bottom: 0;    /* row layout — drop the bottom margin used by the title above the intro */
}

.page-hero-text .page-hero-intro {
    margin-top: var(--spacing-3);
}

.page-hero-ai-action {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .page-hero {
        padding: var(--spacing-8) 0 var(--spacing-6);
    }
    .page-hero-title {
        font-size: var(--font-size-3xl);
    }
    .page-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }
    .page-hero-ai-action {
        width: 100%;
    }
    .page-hero-ai-action .btn-ai-finder {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================================
   BREADCRUMB
   ============================================================================= */

.breadcrumb {
    margin-bottom: var(--spacing-4);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}

.breadcrumb-item a {
    color: var(--color-gray-400);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
    color: #ffffff;
}

/* Breadcrumb on white background (product detail page) */
.product-hero .breadcrumb-item {
    color: var(--color-gray-500);
}

.product-hero .breadcrumb-item a {
    color: var(--color-gray-500);
}

.product-hero .breadcrumb-item a:hover {
    color: var(--color-primary);
}

.product-hero .breadcrumb-item--active span {
    color: var(--color-gray-700);
}

.product-hero .breadcrumb-sep {
    color: var(--color-gray-300);
}

.breadcrumb-item--active span {
    color: var(--color-gray-200);
}

.breadcrumb-sep {
    margin: 0 var(--spacing-2);
    color: var(--color-gray-600);
}

/* Compress breadcrumb on very narrow viewports. A long chain like
   "Home / Products / Automotive & Transportation / Passenger Vehicles /
   Passenger Car" wraps to 3 lines at default sizing on a 320px phone,
   eating valuable above-the-fold space. Smaller font and tighter
   separator margin keep it to 1–2 lines without truncating any link. */
@media (max-width: 480px) {
    .breadcrumb-item {
        font-size: var(--font-size-xs);
    }
    .breadcrumb-sep {
        margin: 0 var(--spacing-1);
    }
}


/* =============================================================================
   PRODUCTS LAYOUT — sidebar + main
   ============================================================================= */

.products-layout {
    padding: var(--spacing-10) 0 var(--spacing-16);
    background: var(--color-gray-50);
}

.products-layout-inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-8);
    align-items: start;
}

@media (max-width: 1100px) {
    .products-layout-inner {
        grid-template-columns: 260px 1fr;
        gap: var(--spacing-6);
    }
}

/* On mobile the sidebar becomes a slide-in drawer */
@media (max-width: 860px) {
    .products-layout-inner {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   SIDEBAR OVERLAY (mobile)
   ============================================================================= */

.sidebar-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    background: rgba(0, 0, 0, 0.55);
    z-index: 9000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.sidebar-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

body.sidebar-open {
    overflow: hidden;
    /* iOS Safari: overflow:hidden alone does not prevent body scroll behind
       the fixed sidebar drawer. Use position:fixed — same pattern as
       body.menu-open in style.css. JS saves/restores scrollY on open/close. */
    position: fixed;
    width: 100%;
}

/* =============================================================================
   SIDEBAR
   ============================================================================= */

.products-sidebar {
    position: -webkit-sticky; /* iOS Safari ≤12 */
    position: sticky;
    top: calc(var(--header-height, 64px) + var(--header-top-height, 0px) + var(--spacing-6));
    max-height: calc(100vh - var(--header-height, 64px) - var(--header-top-height, 0px) - var(--spacing-12));
    overflow-y: auto;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300) transparent;
}

.products-sidebar::-webkit-scrollbar { width: 4px; }
.products-sidebar::-webkit-scrollbar-track { background: transparent; }
.products-sidebar::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 2px; }

/* Mobile: off-canvas slide-in */
@media (max-width: 860px) {
    .products-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        /* On 320px phones (Samsung Galaxy A series, older iPhones) 300px leaves
           only 20px of overlay visible — too narrow. Cap to always leave 48px exposed. */
        max-width: calc(100vw - 48px);
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
        /* iOS Safari: momentum (inertia) scrolling inside overflow containers
           requires -webkit-overflow-scrolling:touch. Without it the sidebar
           scroll stops dead on lift in all iOS in-app browsers. */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 9001;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    }
    .products-sidebar.is-open {
        transform: translateX(0);
    }
}

.sidebar-inner {
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

@media (max-width: 860px) {
    .sidebar-inner {
        border-radius: 0;
        border: none;
        min-height: 100%;
        padding-bottom: var(--spacing-10);
    }
}

/* Mobile close button */
.sidebar-mobile-close {
    display: none;
    width: 100%;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-gray-900);
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #ffffff;
    font-family: var(--font-family);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.sidebar-mobile-close i {
    margin-left: auto;
    font-size: var(--font-size-base);
}

@media (max-width: 860px) {
    .sidebar-mobile-close {
        display: flex;
    }
}

/* =============================================================================
   SIDEBAR SECTIONS
   Each section is a clearly delimited filter group
   ============================================================================= */

.sidebar-section {
    padding: var(--spacing-5) var(--spacing-5) var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
}

.sidebar-section:last-of-type {
    border-bottom: none;
}

.sidebar-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--spacing-3);
}

.sidebar-section-title i {
    font-size: 11px;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Active dot indicator */
.sidebar-section-active-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    margin-left: auto;
    flex-shrink: 0;
    animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(0.8); }
}

/* =============================================================================
   PRODUCT TYPE BUTTONS
   ============================================================================= */

.sidebar-type-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-type-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius);
    border: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* eliminates 300ms tap delay on mobile */
    -webkit-user-select: none;
    user-select: none;
}

@media (hover: hover) {
    .sidebar-type-btn:hover {
        background: #fff;
        border-color: var(--color-gray-300);
        color: var(--color-primary);
        transform: translateX(2px);
    }
}

.sidebar-type-btn.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
    font-weight: 600;
}

.sidebar-type-btn.is-active:hover {
    background: #8e1c1d;
    border-color: #8e1c1d;
    color: #ffffff;
    transform: none;
}

.sidebar-type-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-type-count {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: inherit;
    opacity: 0.65;
    flex-shrink: 0;
    background: rgba(0,0,0,0.07);
    padding: 1px 6px;
    border-radius: 10px;
    line-height: 1.6;
    min-width: 28px;
    text-align: center;
    transition: opacity var(--transition-fast);
}

.sidebar-type-btn.is-active .sidebar-type-count {
    background: rgba(255,255,255,0.22);
    opacity: 1;
}

/* =============================================================================
   SIDEBAR NAV TREE (segment → category → application)
   ============================================================================= */

.sidebar-nav-list,
.sidebar-nav-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav-sublist {
    padding-left: var(--spacing-3);
    margin-top: 2px;
    border-left: 2px solid var(--color-gray-100);
}

.sidebar-nav-sublist--apps {
    padding-left: var(--spacing-3);
    border-left-color: rgba(161,33,34,0.2);
}

.sidebar-nav-item {
    margin-bottom: 2px;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), padding-left var(--transition-fast);
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
}

.sidebar-nav-link:hover {
    background: var(--color-gray-100);
    color: var(--color-primary);
}

.sidebar-nav-link--active {
    background: rgba(161,33,34,0.08);
    color: var(--color-accent);
    font-weight: 600;
}

.sidebar-nav-link--active:hover {
    background: rgba(161,33,34,0.12);
    color: var(--color-accent);
}

.sidebar-nav-link--segment {
    font-weight: 600;
    color: var(--color-gray-800);
}

.sidebar-nav-link--category {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.sidebar-nav-link--application {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.sidebar-nav-link--application.sidebar-nav-link--active {
    color: var(--color-accent);
}

/* =============================================================================
   BRAND FILTER LIST
   ============================================================================= */

.sidebar-brand-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sidebar-brand-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: 7px var(--spacing-3);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        padding-left var(--transition-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

@media (hover: hover) {
    .sidebar-brand-item:hover {
        background: var(--color-gray-100);
        color: var(--color-primary);
        padding-left: calc(var(--spacing-3) + 3px);
    }
}

.sidebar-brand-item.is-active {
    background: rgba(161,33,34,0.08);
    color: var(--color-accent);
    font-weight: 600;
}

.sidebar-brand-item.is-active:hover {
    background: rgba(161,33,34,0.13);
    padding-left: var(--spacing-3);
}

.sidebar-brand-item.is-active .sidebar-brand-name::before {
    content: '✓  ';
    font-weight: 700;
}

.sidebar-brand-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-brand-count {
    font-size: 11px;
    color: var(--color-gray-400);
    font-weight: 500;
    flex-shrink: 0;
}

.sidebar-brand-item.is-active .sidebar-brand-count {
    color: rgba(161,33,34,0.6);
}

.sidebar-brand-overflow {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sidebar-brand-more {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: none;
    border-radius: var(--radius);
    background: none;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-accent);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family);
    transition: background var(--transition-fast);
    margin-top: 2px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.sidebar-brand-more:hover {
    background: var(--color-gray-100);
}

/* =============================================================================
   SIDEBAR CTA
   ============================================================================= */

.sidebar-cta {
    margin: 0;
    padding: var(--spacing-5);
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-100);
}

.sidebar-cta-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 var(--spacing-1);
}

.sidebar-cta-text {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    line-height: 1.6;
    margin: 0 0 var(--spacing-4);
}

.btn-sm {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
    height: auto;
    min-height: unset;
}

/* =============================================================================
   MOBILE DRAWER — STICKY "VIEW N RESULTS" CTA
   Hidden on desktop where the count is always visible in .products-toolbar.
   On the mobile drawer (max-width: 860px) the user cannot see the toolbar
   while filtering, so this footer keeps the live count and a clear "tap to
   view" path always one finger away. The count is updated after every AJAX
   swap by swapResults() so multi-filter sessions get continuous feedback.
   Tapping closes the drawer and the user sees the updated grid.

   IMPLEMENTATION NOTE — why position:fixed, not position:sticky:
   iOS Safari has a long-standing bug where position:sticky inside a
   position:fixed parent fails silently (sticky element scrolls with
   content instead of pinning to viewport edge). The mobile drawer
   .products-sidebar is position:fixed, so a sticky child would not pin
   reliably on iPhones. position:fixed on the CTA itself, scoped to the
   .is-open drawer state, works on every browser including iOS Safari,
   Samsung Internet, and the Facebook/Instagram in-app webviews that
   B2B users hit when colleagues share links.
   ============================================================================= */

.sidebar-mobile-results-cta {
    display: none;
}

@media (max-width: 860px) {
    /* The CTA is rendered as a child of .products-sidebar in markup, but
       on mobile we promote it to a viewport-fixed element so it pins
       reliably. We only show it when the drawer is open — when the
       drawer is closed, the CTA must not appear floating on the page. */
    .products-sidebar.is-open .sidebar-mobile-results-cta {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Match the drawer width — drawer is max 300px or calc(100vw - 48px),
           whichever is smaller (line 245-248). The CTA needs to align with
           the drawer, not span the whole viewport (the unused right area
           is the dimmed overlay). */
        width: calc(100vw - 48px);
        max-width: 300px;
        background: #ffffff;
        border-top: 1px solid var(--color-gray-200);
        padding: var(--spacing-3) var(--spacing-4);
        /* Below the dim overlay (z-index 9000) but above the drawer
           content (drawer is z-index 9001, CTA must be above its content
           but it lives inside the drawer so it inherits stacking context).
           Setting explicit z-index keeps it predictable across browsers. */
        z-index: 9002;
        /* iOS safe-area inset for phones with home indicator (notched
           iPhones). Adds bottom padding equal to the home-bar height so
           the CTA isn't covered by the system gesture area. */
        padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    /* When the CTA is fixed and overlaps drawer content, the last filter
       section (sidebar-cta with the Contact button) would sit underneath
       it. Reserve enough scroll padding inside the drawer so all content
       remains reachable. 52px CTA + 24px padding above + 24px below +
       safe-area = ~120px buffer. */
    .products-sidebar.is-open .sidebar-inner {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }
}

.sidebar-mobile-results-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
    height: 52px;
    background: var(--color-accent);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background var(--transition-fast);
    /* iOS Safari otherwise renders native button chrome (rounded corners,
       gradient highlight, system font) overriding all of the above. The
       same reset is applied to .products-sort-select for the same reason. */
    -webkit-appearance: none;
    appearance: none;
}

.sidebar-mobile-results-btn:active {
    background: var(--color-accent-hover);
}

.sidebar-mobile-results-count {
    font-variant-numeric: tabular-nums;
}

.sidebar-mobile-results-btn i {
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-1);
}

/* =============================================================================
   PRODUCTS MAIN — the right column
   ============================================================================= */

.products-main {
    min-width: 0; /* Prevent grid blowout */
}

/* =============================================================================
   ACTIVE FILTER CHIPS
   Shown above the toolbar when any filter is active
   ============================================================================= */

.products-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
    min-width: 0;    /* flex child in products-main column */
    max-width: 100%; /* hard ceiling — filter chips never escape the column */
}

.products-active-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    flex-shrink: 0;
    margin-right: 2px;
}

.products-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px var(--spacing-3);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-primary);
    /* white-space:nowrap removed — it made the entire chip one unbreakable unit,
       forcing long filter labels (e.g. "Automotive & Transportation › Two-Wheeler › Motorcycle")
       to push the chip — and the entire page — wider than the viewport on mobile.
       The label truncation is now handled per-element on .chip-label below. */
    max-width: 100%; /* chip never exceeds the width of its flex container */
    min-width: 0;    /* flex item safety */
    overflow: hidden; /* clip any content that exceeds max-width */
}

.products-filter-chip i {
    font-size: 10px;
    color: var(--color-gray-500);
    flex-shrink: 0; /* icon always visible — never compressed by text */
}

/* Chip label text — truncates with ellipsis when the chip is too wide.
   The icon and chip-remove button are flex-shrink:0, so only this text shrinks. */
.chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--color-gray-300);
    border-radius: 50%;
    color: var(--color-gray-600);
    text-decoration: none;
    margin-left: 2px;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.chip-remove i { font-size: 8px; }

.chip-remove:hover {
    background: var(--color-accent);
    color: #ffffff;
}

.products-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--radius);
    transition: background var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.products-clear-filters:hover {
    background: rgba(161,33,34,0.08);
}

.products-clear-filters i { font-size: 10px; }

/* =============================================================================
   PRODUCTS TOOLBAR (count + sort + mobile filter btn)
   ============================================================================= */

.products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
}

.products-result-count {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: 0;
}

.products-result-count strong {
    font-weight: 700;
    color: var(--color-primary);
}

.products-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* Mobile filter button — hidden on desktop */
.products-mobile-filter-btn {
    display: none;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    min-height: 44px;
    background: var(--color-gray-900);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-family);
    transition: background var(--transition-fast);
    white-space: nowrap;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.products-mobile-filter-btn:hover {
    background: #1a1a1a;
}

.products-mobile-filter-btn i {
    font-size: 13px;
}

.mobile-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    margin-left: 2px;
    line-height: 1;
}

@media (max-width: 860px) {
    .products-mobile-filter-btn {
        display: inline-flex;
    }
}

.products-sort {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.products-sort-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    white-space: nowrap;
}

.products-sort-select {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-primary);
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    padding: var(--spacing-2) var(--spacing-3);
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition-fast);
    /* iOS Safari renders its native OS select widget without these,
       overriding all custom border, border-radius, font, and padding. */
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.products-sort-select:focus {
    border-color: var(--color-accent);
}

@media (max-width: 480px) {
    .products-toolbar {
        flex-wrap: wrap;
    }
    .products-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* =============================================================================
   PRODUCT GRID
   ============================================================================= */

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

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

@media (max-width: 580px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }
}

/* =============================================================================
   PRODUCT CARD — redesigned for B2B scannability
   ============================================================================= */

.product-card {
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition:
        box-shadow var(--transition),
        border-color var(--transition),
        transform var(--transition);
    display: flex;
    min-width: 0; /* grid item safety: forces card to respect the 1fr track width */
}

/* Guard hover effects with (hover:hover) so they don't fire on touch devices.
   On touch, :hover triggers on first tap and stays, leaving cards permanently raised. */
@media (hover: hover) {
    .product-card:hover {
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        border-color: var(--color-gray-300);
        transform: translateY(-3px);
    }
    .product-card:hover .product-card-image img {
        transform: scale(1.05);
    }
    .product-card:hover .product-card-footer {
        background: rgba(161,33,34,0.04);
    }
    .product-card:hover .product-card-spec {
        background: var(--color-gray-50);
        border-color: var(--color-gray-300);
    }
    .product-card:hover .product-card-cta i {
        transform: translateX(4px);
    }
}

.product-card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent; /* suppress iOS/Android blue flash on tap */
}

/* Card image area */
.product-card-image {
    width: 100%;
    /* Fallback for iOS Safari <15 / browsers that don't support aspect-ratio:
       min-height keeps the image area visible; aspect-ratio overrides it when supported. */
    min-height: 160px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--color-gray-100);
    position: relative;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--spacing-4);
    transition: transform 0.4s ease;
}


.product-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-gray-100) 0%, var(--color-gray-50) 100%);
}

.product-card-image-placeholder span {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-gray-400);
    text-align: center;
    padding: var(--spacing-4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Type badge overlay on image */
.product-card-type-badge {
    position: absolute;
    top: var(--spacing-2);
    left: var(--spacing-2);
    padding: 3px 8px;
    background: rgba(0,0,0,0.68);
    color: rgba(255,255,255,0.9);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
    line-height: 1.4;
    -webkit-backdrop-filter: blur(4px); /* Safari / WKWebView in-app browsers */
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* Card body */
.product-card-body {
    flex: 1;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0; /* flex child: prevent body from pushing card wider than the grid track */
}

.product-card-brand {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.product-card-name {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
    margin: var(--spacing-1) 0;
    /* 3-line clamp — keeps grid uniform */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%; /* prevent long product names escaping the card body */
    word-break: break-word;
}

/* Spec badges row — voltage, capacity */
.product-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--spacing-2);
    min-width: 0; /* prevent spec badges from driving card body width */
}

.product-card-spec {
    display: inline-block;
    padding: 3px 8px;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-gray-700);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}


/* SKU code */
.product-card-sku {
    font-size: 11px;
    font-family: 'Courier New', Courier, monospace;
    color: var(--color-gray-400);
    margin-top: auto;
    padding-top: var(--spacing-2);
    letter-spacing: 0.02em;
}

/* Card footer */
.product-card-footer {
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
    transition: background var(--transition-fast);
}


.product-card-cta {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.product-card-cta i {
    transition: transform var(--transition-fast);
    font-size: 11px;
}


/* =============================================================================
   EMPTY STATE
   ============================================================================= */

.products-empty {
    text-align: center;
    padding: var(--spacing-20) var(--spacing-8);
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
}

.products-empty-icon {
    font-size: 3rem;
    color: var(--color-gray-300);
    margin-bottom: var(--spacing-4);
    display: block;
}

.products-empty-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 var(--spacing-3);
}

.products-empty-hint {
    font-size: var(--font-size-base);
    color: var(--color-gray-500);
    margin: 0 0 var(--spacing-8);
}

.products-empty-actions {
    display: flex;
    gap: var(--spacing-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* =============================================================================
   PAGINATION
   ============================================================================= */

.products-pagination {
    margin-top: var(--spacing-10);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
}

.pagination-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-item { display: flex; }

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--spacing-3);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    text-decoration: none;
    border: 1px solid var(--color-gray-200);
    background: #ffffff;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.pagination-link i { font-size: 10px; }

.pagination-link:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-300);
    color: var(--color-primary);
}

.pagination-link--current {
    background: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
    font-weight: 700;
}

.pagination-link--disabled {
    opacity: 0.38;
    pointer-events: none;
    cursor: not-allowed;
}

.pagination-item--ellipsis span {
    border: none;
    background: none;
    color: var(--color-gray-400);
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
}

.pagination-info {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}


/* =============================================================================
   CTA STRIPS (products list + product detail)
   ============================================================================= */

.products-cta-strip,
.product-cta-strip {
    background: var(--color-gray-900);
    padding: var(--spacing-16) 0;
}

.products-cta-strip-inner,
.product-cta-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
}

.products-cta-strip-title,
.product-cta-strip-title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 var(--spacing-2);
}

.products-cta-strip-desc,
.product-cta-strip-desc {
    font-size: var(--font-size-base);
    color: var(--color-gray-400);
    margin: 0;
    max-width: 540px;
}

.products-cta-strip-actions,
.product-cta-strip-actions {
    display: flex;
    gap: var(--spacing-3);
    flex-shrink: 0;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .products-cta-strip-inner,
    .product-cta-strip-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =============================================================================
   PRODUCT HERO (detail page)
   ============================================================================= */

.product-hero {
    background: #ffffff;
    padding: var(--spacing-10) 0 var(--spacing-12);
    border-bottom: 1px solid var(--color-gray-200);
}

.product-hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: start;
    margin-top: var(--spacing-6);
}

/* Grid children: min-width:auto (browser default) lets content drive width past
   the grid track. min-width:0 forces children to respect the 1fr boundary. */
.product-hero-layout > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .product-hero-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
}

/* =============================================================================
   PRODUCT GALLERY
   ============================================================================= */

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.product-gallery-main {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
    /* Fallback for browsers that do not support aspect-ratio
       (iOS Safari < 15, Android Chrome < 88).
       Without this, the container collapses to 0 height when
       aspect-ratio is unrecognised, making the gallery invisible. */
    min-height: 240px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: var(--spacing-6);
    transition: transform var(--transition-slow);
}

@media (hover: hover) {
    .product-gallery-main:hover .product-gallery-main-img {
        transform: scale(1.03);
    }
}

.product-gallery-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--color-gray-100);
    border-radius: var(--radius-lg);
    min-height: 280px;
}

.product-gallery-placeholder span {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-400);
    text-align: center;
    padding: var(--spacing-8);
}

/* Thumbnails */
.product-gallery-thumbs {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.product-gallery-thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid var(--color-gray-200);
    background: #ffffff;
    cursor: pointer;
    padding: 0;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

@media (hover: hover) {
    .product-gallery-thumb:hover {
        border-color: var(--color-gray-400);
        transform: translateY(-1px);
    }
}

.product-gallery-thumb.active {
    border-color: var(--color-accent);
}

.product-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

/* Transport labels */
.product-transport-labels {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
}

.transport-labels-heading {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.transport-labels-strip {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.transport-label-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* =============================================================================
   PRODUCT INFO (detail page right column)
   ============================================================================= */

.product-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    color: var(--color-primary);
    min-width: 0; /* grid child safety */
}

.product-info-brand {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--spacing-1) var(--spacing-3);
    background: rgba(161,33,34,0.08);
    border-radius: var(--radius-full);
    border: 1px solid rgba(161,33,34,0.2);
    align-self: flex-start;
}

.product-info-name {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.15;
    margin: 0;
}

.product-info-sku {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin: 0;
}

.product-info-sku-label {
    font-weight: 500;
}

.product-info-sku code {
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    background: var(--color-gray-100);
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-sm);
}

.product-info-short-desc {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: 1.7;
    margin: 0;
}

/* USP list */
.product-info-usps {
    list-style: none;
    margin: 0;
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
}

.product-info-usp {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

.product-info-usp::before {
    content: '✓';
    color: var(--color-accent);
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
    width: 16px;
    height: 16px;
    background: rgba(161,33,34,0.08);
    border-radius: 50%;
    /* display:flex on ::before is unreliable in older Android WebView and Samsung
       Internet. Using inline-block + line-height + text-align achieves identical
       visual result with universal browser support. */
    display: inline-block;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

/* Key specs grid */
.product-key-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--color-gray-200);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.product-key-spec-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #ffffff;
    padding: var(--spacing-3) var(--spacing-4);
    transition: background var(--transition-fast);
    min-width: 0; /* grid child: prevent content from escaping 1fr track */
    overflow: hidden; /* clip any unexpectedly long spec value */
}

.product-key-spec-item:hover {
    background: var(--color-gray-50);
}

/* When the last item is alone in its row, span both columns */
.product-key-spec-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.product-key-spec-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-key-spec-value {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-primary);
    overflow-wrap: break-word; /* long spec values (e.g. chemistry names) wrap rather than overflow */
    word-break: break-word;
}

/* Applications tags */
.product-applications {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    min-width: 0; /* flex child safety */
}

.product-applications-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    padding-top: 5px;
}

.product-applications-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    flex: 1;      /* fill remaining space after the label */
    min-width: 0; /* allow shrinking so tags wrap rather than overflow */
}

.product-application-tag {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    padding: var(--spacing-1) var(--spacing-3);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.product-application-tag:hover {
    background: var(--color-gray-200);
    color: var(--color-primary);
}

/* CTA row */
.product-info-cta {
    margin-top: var(--spacing-4);
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.btn-product-webshop {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.btn-product-inquiry {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    /* Override global btn-outline which assumes dark background */
    color: var(--color-primary) !important;
    border-color: var(--color-gray-300) !important;
}

.btn-product-inquiry:hover {
    background: var(--color-gray-100) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-gray-400) !important;
}

.btn-product-datasheet {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    /* Override global btn-outline which assumes dark background */
    color: var(--color-primary) !important;
    border-color: var(--color-gray-300) !important;
}

.btn-product-datasheet:hover {
    background: var(--color-gray-100) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-gray-400) !important;
}

/* =============================================================================
   PRODUCT TABS SECTION
   ============================================================================= */

.product-tabs-section {
    padding: var(--spacing-12) 0;
    background: #ffffff;
    border-bottom: 1px solid var(--color-gray-200);
}

/* Tab nav */
.product-tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-gray-200);
    margin-bottom: var(--spacing-8);
    /* FIX: Hide horizontal scrollbar while preserving scroll behavior on narrow viewports */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE / Edge legacy */
}

.product-tabs-nav::-webkit-scrollbar {
    display: none;                  /* Chrome / Safari / Edge */
}

.product-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-500);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

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

.product-tab-btn.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-full);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.product-tab-btn.active .tab-badge {
    background: rgba(161,33,34,0.1);
    color: var(--color-accent);
}

/* Tab panels */
.product-tab-panel {
    display: block;
}

.product-tab-panel[hidden] {
    display: none;
}

/* =============================================================================
   PRODUCT SPECS TABLE
   ============================================================================= */

.product-specs-table-wrap {
    overflow-x: auto;
    /* Ensure no horizontal scrollbar appears unless truly needed */
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300) transparent;
}

.product-specs-table-wrap::-webkit-scrollbar {
    height: 4px;
}

.product-specs-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.product-specs-table-wrap::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
}

.product-specs-table {
    width: 100%;
    max-width: 760px;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.product-spec-row {
    border-bottom: 1px solid var(--color-gray-100);
    transition: background var(--transition-fast);
}

.product-spec-row:last-child {
    border-bottom: none;
}

.product-spec-row:hover {
    background: rgba(161,33,34,0.025);
}

.product-spec-label {
    width: 40%;
    padding: var(--spacing-3) var(--spacing-5);
    font-weight: 600;
    color: var(--color-gray-600);
    text-align: left;
    vertical-align: middle;
    background: var(--color-gray-50);
    border-right: 1px solid var(--color-gray-100);
    position: relative;
}

/* Subtle left accent stripe on core spec rows */
.product-spec-row:not(.product-spec-row--type-specific) .product-spec-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    background: var(--color-accent);
    border-radius: 0 2px 2px 0;
    opacity: 0.5;
}

.product-spec-value {
    padding: var(--spacing-3) var(--spacing-5);
    color: var(--color-primary);
    font-weight: 600;
    vertical-align: middle;
}

.product-spec-row--type-specific .product-spec-label {
    background: #ffffff;
    color: var(--color-gray-500);
    font-weight: 500;
}

.product-spec-row--type-specific .product-spec-value {
    font-weight: 500;
    color: var(--color-gray-700);
}

/* =============================================================================
   PRODUCT LONG DESCRIPTION
   ============================================================================= */

.product-long-description {
    max-width: 760px;
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-gray-700);
}

.product-long-description p {
    margin-bottom: var(--spacing-4);
}

.product-long-description h2,
.product-long-description h3 {
    font-weight: 700;
    color: var(--color-primary);
    margin: var(--spacing-8) 0 var(--spacing-4);
}

.product-long-description h2 {
    font-size: var(--font-size-xl);
}

.product-long-description h3 {
    font-size: var(--font-size-lg);
}

.product-long-description ul,
.product-long-description ol {
    padding-left: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.product-long-description li {
    margin-bottom: var(--spacing-2);
}

.product-long-description strong {
    color: var(--color-primary);
    font-weight: 700;
}

/* =============================================================================
   PRODUCT DOCUMENTS LIST
   ============================================================================= */

.product-documents-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    max-width: 760px;
}

.product-document-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-5);
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

@media (hover: hover) {
    .product-document-item:hover {
        border-color: var(--color-accent);
        box-shadow: 0 4px 12px rgba(161,33,34,0.08);
        transform: translateX(3px);
    }
}

/* Document icon wrapper */
.product-document-item > .fa-solid {
    font-size: 1.375rem;
    color: var(--color-accent);
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(161,33,34,0.06);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 44px;
}

.product-document-info {
    flex: 1;
    min-width: 0; /* flex child: long document names can drive item wider than viewport */
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.product-document-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word; /* long filenames wrap instead of forcing horizontal scroll */
}

.product-document-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.product-document-type {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.product-document-version {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

.product-document-lang {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-accent);
    background: rgba(161,33,34,0.08);
    border-radius: var(--radius-sm);
    padding: 1px var(--spacing-2);
    align-self: flex-start;
    letter-spacing: 0.04em;
}

.product-document-download {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.product-document-download:hover {
    background: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
}

@media (max-width: 540px) {
    .product-document-item {
        flex-wrap: wrap;
    }
    .product-document-download {
        margin-left: calc(44px + var(--spacing-4));
        width: auto;
    }
}

/* =============================================================================
   PRODUCT DETAIL — Extra small screen fixes (≤ 480 px)
   Addresses: invisible/off-screen CTA buttons, oversized product name,
   tight padding, and spec table overflow on phones narrower than 480 px.
   ============================================================================= */

@media (max-width: 480px) {

    /* Reduce hero section padding so more content is visible above the fold */
    .product-hero {
        padding: var(--spacing-6) 0 var(--spacing-8);
    }

    /* Scale down the product name to fit narrow viewports without wrapping badly */
    .product-info-name {
        font-size: var(--font-size-2xl); /* 1.5 rem instead of 2 rem */
    }

    /* Stack CTA buttons vertically and make them full-width for easy tapping */
    .product-info-cta {
        flex-direction: column;
    }

    .product-info-cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* Reduce gallery main min-height on very small screens */
    .product-gallery-main {
        min-height: 180px;
    }

    /* Spec table: prevent label column from forcing horizontal scroll.
       word-break allows long spec names (e.g. 'Reserve Capacity (min)') to wrap
       instead of pushing the table wider than the viewport. */
    .product-spec-label {
        width: 45%;
        word-break: break-word;
        white-space: normal;
    }

    .product-spec-value {
        word-break: break-word;
    }

    /* Tighten spec cell padding so more rows are visible without scrolling */
    .product-spec-label,
    .product-spec-value {
        padding: var(--spacing-2) var(--spacing-3);
    }

    /* Reduce product tabs nav padding so all tabs stay on one scrollable row */
    .product-tab-btn {
        padding: var(--spacing-3) var(--spacing-4);
        font-size: var(--font-size-xs);
    }

    /* Related products: 1 column on very small phones */
    .related-products-grid.products-grid {
        grid-template-columns: 1fr;
    }

    /* CTA strip: tighten padding */
    .product-cta-strip {
        padding: var(--spacing-10) 0;
    }

    .product-cta-strip-actions {
        flex-direction: column;
        width: 100%;
    }

    .product-cta-strip-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================================
   PRODUCT TRUST BAR
   A horizontal strip of B2B trust signals placed between tabs and related products.
   Add <section class="product-trust-bar"> to product.php after .product-tabs-section.
   ============================================================================= */

.product-trust-bar {
    background: var(--color-gray-900);
    border-top: 1px solid var(--color-gray-800);
    border-bottom: 1px solid var(--color-gray-800);
    padding: var(--spacing-8) 0;
}

.product-trust-bar-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
    align-items: center;
}

.product-trust-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.product-trust-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(161,33,34,0.12);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    font-size: 1.125rem;
}

.product-trust-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* flex child: prevent long trust text from pushing layout */
}

.product-trust-item-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.product-trust-item-desc {
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .product-trust-bar-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .product-trust-bar-inner {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   RELATED PRODUCTS
   ============================================================================= */

.related-products {
    padding: var(--spacing-16) 0;
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
}

.related-products-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.related-products-title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
    position: relative;
    padding-bottom: var(--spacing-3);
}

.related-products-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--color-accent);
    border-radius: var(--radius-full);
}

.related-products-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    transition: gap var(--transition-fast);
}

.related-products-link:hover {
    gap: var(--spacing-2);
}

.related-products-link::after {
    content: '→';
}

.related-products-grid {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
    .related-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .related-products-grid {
        grid-template-columns: 1fr;
    }
    .related-products-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =============================================================================
   PRODUCT CTA STRIP — Commercial conversion section
   ============================================================================= */

.product-cta-strip {
    background: var(--color-gray-900);
    padding: var(--spacing-16) 0;
    position: relative;
    overflow: hidden;
}

/* Subtle background pattern for depth */
.product-cta-strip::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    background:
        radial-gradient(ellipse 60% 80% at 0% 50%, rgba(161,33,34,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 100% 50%, rgba(161,33,34,0.06) 0%, transparent 60%);
    pointer-events: none;
}

.product-cta-strip .container {
    position: relative;
    z-index: 1;
}

.product-cta-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
}

.product-cta-strip-text {
    flex: 1;
}

.product-cta-strip-eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-3);
}

.product-cta-strip-title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 var(--spacing-3);
    line-height: 1.2;
}

.product-cta-strip-desc {
    font-size: var(--font-size-base);
    color: var(--color-gray-400);
    margin: 0;
    max-width: 500px;
    line-height: 1.7;
}

.product-cta-strip-actions {
    display: flex;
    gap: var(--spacing-3);
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 768px) {
    .product-cta-strip-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .product-cta-strip-actions {
        width: 100%;
    }
    .product-cta-strip-actions .btn {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }
}

/* =============================================================================
   PRODUCT NOT FOUND
   ============================================================================= */

.product-not-found {
    padding: var(--spacing-24) 0;
    text-align: center;
}

.product-not-found h1 {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--spacing-4);
}

.product-not-found p {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-8);
}

/* =============================================================================
   RESPONSIVE FINAL TOUCHES
   ============================================================================= */

@media (max-width: 768px) {
    .product-key-specs {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-tabs-nav {
        gap: 0;
    }
    .product-tab-btn {
        padding: var(--spacing-3) var(--spacing-4);
    }
    .product-specs-table {
        max-width: 100%;
    }
    .product-specs-table .product-spec-label {
        width: 45%;
    }
}

@media (max-width: 480px) {
    .product-info-name {
        font-size: var(--font-size-2xl);
    }
    .product-key-specs {
        grid-template-columns: 1fr;
    }
    .product-info-cta {
        flex-direction: column;
    }
    .product-info-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================================================
   PRODUCT SEARCH BAR — full-width prominent search
   ============================================================================= */

.products-search-section {
    background: #ffffff;
    padding: var(--spacing-5) 0 var(--spacing-6);
}

/* Relative wrapper so dropdown can be positioned to it */
.products-search-wrap {
    position: relative;
}

/* The search bar itself */
.products-search-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    background: #ffffff;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    padding: 0 var(--spacing-4);
    /* min-height instead of height: with Dynamic Type / large accessibility fonts
       on iOS, a fixed height clips the input text. min-height allows it to grow. */
    min-height: 56px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.products-search-bar:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(161, 33, 34, 0.08);
}

.products-search-icon {
    font-size: 1.125rem;
    color: var(--color-gray-400);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.products-search-bar:focus-within .products-search-icon {
    color: var(--color-accent);
}

.products-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-primary);
    min-width: 0;
    height: 100%;
    /* iOS Safari adds its own rounded inset styling to text inputs */
    -webkit-appearance: none;
    appearance: none;
}

.products-search-input::placeholder {
    color: var(--color-gray-400);
}

/* Spinner (CSS animation, no extra assets) */
.products-search-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: searchSpin 0.6s linear infinite;
    flex-shrink: 0;
}

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

.products-search-bar.is-loading .products-search-spinner {
    display: block;
}

/* Clear button */
.products-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
    padding: 0;
}

.products-search-clear:hover {
    background: var(--color-gray-200);
    color: var(--color-primary);
}

/* ── Dropdown ─────────────────────────────────────────────────────────────── */

.products-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    z-index: 200;
    overflow: hidden;
    max-height: 440px;
    overflow-y: auto;
}

.products-search-dropdown[hidden] {
    display: none;
}

/* Results header */
.search-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid var(--color-gray-100);
}

.search-results-count {
    background: var(--color-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
}

/* Individual result item */
.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-gray-50);
    transition: background var(--transition-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.is-active {
    background: var(--color-gray-50);
}

/* Thumbnail */
.search-result-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
}

.search-result-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.search-result-thumb .fa-solid {
    font-size: 1.25rem;
    color: var(--color-gray-300);
}

/* Result text content */
.search-result-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-result-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.6875rem;
    color: var(--color-gray-400);
    line-height: 1.3;
}

.search-result-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.search-result-meta {
    font-size: 0.6875rem;
    color: var(--color-gray-500);
    line-height: 1.3;
}

/* Arrow icon */
.search-result-arrow {
    font-size: 0.75rem;
    color: var(--color-gray-300);
    flex-shrink: 0;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.search-result-item:hover .search-result-arrow,
.search-result-item.is-active .search-result-arrow {
    color: var(--color-accent);
    transform: translateX(2px);
}

/* Highlight match */
mark.search-hl {
    background: rgba(161, 33, 34, 0.1);
    color: var(--color-accent);
    font-weight: 700;
    border-radius: 2px;
    padding: 0 2px;
}

/* Empty / error state */
.search-empty {
    padding: var(--spacing-10) var(--spacing-6);
    text-align: center;
    color: var(--color-gray-400);
}

.search-empty .fa-solid {
    font-size: 2rem;
    margin-bottom: var(--spacing-3);
    display: block;
    opacity: 0.5;
}

.search-empty p {
    font-size: var(--font-size-sm);
    margin: 0;
    color: var(--color-gray-500);
}

.search-empty--error .fa-solid {
    color: var(--color-accent);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .products-search-section {
        padding: var(--spacing-4) 0;
    }
    .products-search-bar {
        min-height: 48px;
    }
    /* DO NOT drop below 16px — iOS Safari zooms the entire viewport when
       a user taps an input with font-size < 16px, then they have to pinch
       to zoom back out. The visual sm-vs-base difference is one pixel;
       the broken-feeling zoom is intolerable. The search input keeps the
       base size on mobile by inheritance from the default rule above. */
}


/* =============================================================================
   PRODUCT TAXONOMY TAGS — Segment / Category / Application
   On white .product-hero background.
   ============================================================================= */

.product-taxonomy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding-top: var(--spacing-2);
    min-width: 0;    /* flex child: prevent driving parent wider than viewport */
    max-width: 100%; /* hard ceiling so tags can never escape the column */
}

.product-taxonomy-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    min-width: 0; /* prevent flex item from driving parent wider */
}

.product-taxonomy-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    min-width: 80px;
}

.product-taxonomy-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    flex: 1;       /* fill remaining row width after the label */
    min-width: 0;  /* CRITICAL: allows the div to shrink below its content width
                      so tags wrap instead of forcing the row — and page — wider */
}

.product-tax-tag {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}

.product-tax-tag--segment {
    color: var(--color-gray-700);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
}

.product-tax-tag--segment:hover {
    background: var(--color-gray-200);
    color: var(--color-primary);
}

.product-tax-tag--category {
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
}

.product-tax-tag--category:hover {
    background: var(--color-gray-200);
    color: var(--color-primary);
}

.product-tax-tag--application {
    color: var(--color-accent);
    background: rgba(161, 33, 34, 0.06);
    border: 1px solid rgba(161, 33, 34, 0.2);
}

.product-tax-tag--application:hover {
    background: rgba(161, 33, 34, 0.12);
    color: var(--color-accent);
}

/* =============================================================================
   FLEX GAP FALLBACKS — Safari < 14.1 / iOS < 14.5 / older WKWebView in-app browsers
   flex gap is not supported. @supports not (gap: 1px) provides margin-based
   fallbacks for the most layout-critical flex containers.
   ============================================================================= */

@supports not (gap: 1px) {
    /* Sidebar section title icon + text */
    .sidebar-section-title > * + * { margin-left: var(--spacing-2); }

    /* Sidebar type buttons */
    .sidebar-type-list > * + * { margin-top: 4px; }
    .sidebar-type-btn > * + * { margin-left: var(--spacing-2); }

    /* Brand list */
    .sidebar-brand-list > * + * { margin-top: 3px; }
    .sidebar-brand-item > * + * { margin-left: var(--spacing-2); }
    .sidebar-brand-overflow > * + * { margin-top: 3px; }

    /* Active filter chips */
    .products-active-filters > * + * { margin-left: var(--spacing-2); margin-top: var(--spacing-2); }

    /* Toolbar */
    .products-toolbar > * + * { margin-left: var(--spacing-3); }
    .products-toolbar-right > * + * { margin-left: var(--spacing-3); }
    .products-sort > * + * { margin-left: var(--spacing-2); }

    /* Product grid */
    .products-grid { gap: 0; }
    .products-grid > * { margin-bottom: var(--spacing-5); }
    @media (max-width: 580px) {
        .products-grid > * { margin-bottom: var(--spacing-3); }
    }

    /* Product card body */
    .product-card-body > * + * { margin-top: var(--spacing-1); }
    .product-card-specs > * { margin-right: 4px; margin-bottom: 4px; }
    .product-card-cta > * + * { margin-left: var(--spacing-2); }

    /* Empty state actions */
    .products-empty-actions > * + * { margin-left: var(--spacing-3); }

    /* Pagination */
    .pagination-list > * + * { margin-left: var(--spacing-1); }

    /* Product info */
    .product-info > * + * { margin-top: var(--spacing-4); }
    .product-info-cta > * + * { margin-left: var(--spacing-3); }

    /* Gallery */
    .product-gallery > * + * { margin-top: var(--spacing-4); }
    .product-gallery-thumbs > * + * { margin-left: var(--spacing-2); }

    /* Transport labels */
    .product-transport-labels > * + * { margin-left: var(--spacing-3); }
    .transport-labels-strip > * + * { margin-left: var(--spacing-2); }

    /* Taxonomy tags */
    .product-taxonomy > * + * { margin-top: var(--spacing-2); }
    .product-taxonomy-row > * + * { margin-left: var(--spacing-3); }
    .product-taxonomy-tags > * { margin-right: var(--spacing-2); margin-bottom: var(--spacing-2); }
    .product-applications > * + * { margin-left: var(--spacing-3); }
    .product-applications-list > * { margin-right: var(--spacing-2); margin-bottom: var(--spacing-2); }

    /* Documents */
    .product-document-item > * + * { margin-left: var(--spacing-4); }
    .product-document-meta > * + * { margin-left: var(--spacing-2); }
    .product-document-info > * + * { margin-top: 3px; }

    /* Trust bar */
    .product-trust-item > * + * { margin-left: var(--spacing-3); }
    .product-trust-item-text > * + * { margin-top: 2px; }

    /* Related products header */
    .related-products-header > * + * { margin-left: var(--spacing-6); }

    /* CTA strips */
    .products-cta-strip-inner > * + *,
    .product-cta-strip-inner > * + * { margin-left: var(--spacing-8); }
    .products-cta-strip-actions > * + *,
    .product-cta-strip-actions > * + * { margin-left: var(--spacing-3); }

    /* Search result */
    .search-result-item > * + * { margin-left: var(--spacing-3); }
    .search-result-body > * + * { margin-top: 2px; }
}

/* =============================================================================
   SIDEBAR RANGE-FILTER SECTIONS
   Voltage class slider (ticks) + Capacity Ah + Length/Width/Height
   Mobile-first, cross-browser (Chrome/Safari/Firefox/Edge/Samsung Internet).
   Append this block to products-page.css.
   ============================================================================= */

/* Section wrapper — same base as .sidebar-section, with small header tweaks */
.sidebar-section--range .sidebar-section-title {
    align-items: center;
}

/* Hidden state when scope has no usable data (≤1 distinct value / MIN=MAX) */
.sidebar-section--range[hidden] { display: none; }

/* Header-right action (reset) */
.sidebar-range-reset {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent);
    background: none;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    transition: background var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.sidebar-range-reset:hover {
    background: rgba(161, 33, 34, 0.08);
}
.sidebar-range-reset[hidden] {
    display: none;
}

/* Current-selection readout shown inline on slider header row */
.sidebar-range-readout {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    gap: var(--spacing-2);
}

.sidebar-range-readout-label {
    color: var(--color-gray-500);
    font-weight: 500;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* =============================================================================
   THE SLIDER ITSELF
   Custom dual-thumb implementation (absolutely positioned divs, no native
   <input type=range> — needed for dual-thumb + consistent styling across
   browsers).
   ============================================================================= */

.sidebar-range {
    position: relative;
    height: 44px;            /* enough room for thumbs + tick labels */
    margin: 4px 11px 0;      /* 11px = half-thumb, so thumbs align with edges */
    touch-action: pan-y;     /* allow vertical scroll on phone, horizontal drag stays with JS */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Voltage variant needs extra height for tick labels below the track */
.sidebar-range--ticks {
    height: 58px;
}

.sidebar-range-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: 2px;
}

.sidebar-range-fill {
    position: absolute;
    top: 20px;
    height: 4px;
    background: var(--color-accent);
    border-radius: 2px;
    pointer-events: none;
    transition: left 150ms ease, width 150ms ease;
}

/* While the user is dragging, disable the transition so the fill tracks 1:1 */
.sidebar-range.is-dragging .sidebar-range-fill {
    transition: none;
}

/* =============================================================================
   THUMBS
   20px visual, 44px hit area via ::after pseudo (mobile accessibility).
   ============================================================================= */

.sidebar-range-thumb {
    position: absolute;
    top: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--color-accent);
    transform: translateX(-50%);
    cursor: grab;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    z-index: 2;
    transition: box-shadow 150ms ease, transform 150ms ease;
}

/* Enlarge touch/click target without enlarging the visual dot */
.sidebar-range-thumb::after {
    content: "";
    position: absolute;
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    border-radius: 50%;
}

.sidebar-range-thumb:hover {
    box-shadow: 0 0 0 6px rgba(161, 33, 34, 0.14);
}

.sidebar-range-thumb:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(161, 33, 34, 0.35);
}

.sidebar-range-thumb:active,
.sidebar-range.is-dragging .sidebar-range-thumb--active {
    cursor: grabbing;
    box-shadow: 0 0 0 8px rgba(161, 33, 34, 0.18);
}

.sidebar-range-thumb--min { /* left thumb — nudges right on z-stack when overlapping */ }
.sidebar-range-thumb--max { /* right thumb — sits on top when thumbs touch */ }

/* =============================================================================
   TICKS (voltage class markers)
   ============================================================================= */

.sidebar-range-ticks {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    pointer-events: none;
}

.sidebar-range-tick {
    position: absolute;
    top: 16px;
    width: 2px;
    height: 12px;
    background: var(--color-gray-300);
    border-radius: 1px;
    transform: translateX(-50%);
    transition: background var(--transition-fast);
}

.sidebar-range-tick.is-active {
    background: var(--color-accent);
}

.sidebar-range-tick-label {
    position: absolute;
    top: 34px;
    font-size: 10px;
    font-weight: 500;
    color: var(--color-gray-500);
    transform: translateX(-50%);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: color var(--transition-fast), font-weight var(--transition-fast);
    letter-spacing: 0;
}

.sidebar-range-tick-label.is-active {
    color: var(--color-primary);
    font-weight: 700;
}

/* =============================================================================
   NUMBER INPUT BOXES
   Used beneath continuous sliders (capacity + dimensions) for precise entry.
   ============================================================================= */

.sidebar-range-inputs {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

.sidebar-range-input-box {
    flex: 1;
    min-width: 0;
}

.sidebar-range-input-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
}

.sidebar-range-input {
    width: 100%;
    height: 34px;
    padding: 0 var(--spacing-2);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    color: var(--color-primary);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    background: #ffffff;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
}

.sidebar-range-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(161, 33, 34, 0.14);
}

/* Hide native number-input spinners (Chrome/Safari/Edge + Firefox) */
.sidebar-range-input::-webkit-outer-spin-button,
.sidebar-range-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =============================================================================
   DIMENSIONS GROUP
   Three sub-sliders (L / W / H) stacked inside the single Dimensions section.
   ============================================================================= */

.sidebar-dimensions-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.sidebar-dimension-item + .sidebar-dimension-item {
    padding-top: var(--spacing-4);
    border-top: 1px dashed var(--color-gray-100);
}

.sidebar-dimension-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-2);
    gap: var(--spacing-2);
}

.sidebar-dimension-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
}

.sidebar-dimension-value {
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* =============================================================================
   LOADING STATE
   Applied to .products-main while a filter fetch is in flight.
   ============================================================================= */

.products-main {
    position: relative;
}

/* NOTE — Anchor scroll behaviour for #results is now handled by the global
   `html { scroll-padding-top: calc(...) }` rule in style.css v2.1, which
   reserves header-height + 16px of breathing room above any fragment-link
   target. Previously this file declared `#results { scroll-margin-top: 80px }`,
   but with the global rule in place the two values are additive per CSS
   Scroll Snap spec, producing 132 + 80 = 212px of offset — far more than
   the 80px design intent. Relying on the global rule alone gives the
   correct ~16px breathing room.

   Heads-up for the JS deployment: the AJAX-side keepResultsVisible()
   helper in products.js was tuned to the old 80px convention. After this
   CSS change, that helper should be reviewed to match the new ~16px
   convention, or it will introduce an offset that double-counts. */

.products-main.is-loading .products-grid,
.products-main.is-loading .products-pagination {
    opacity: 0.45;
    transition: opacity 120ms ease;
    pointer-events: none;
}

.products-main.is-loading::before {
    content: "";
    position: absolute;
    top: 6px;
    right: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: products-filter-spin 700ms linear infinite;
    z-index: 4;
}

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

/* =============================================================================
   FILTER CHIP ADDITIONS
   Spec-value chips (voltage / cap / dims) re-use existing .products-filter-chip
   styling — no extra rules needed. This block defines only the removal visuals
   for the "this filter is active" dot on the new section titles.
   ============================================================================= */

.sidebar-section--range .sidebar-section-active-dot {
    margin-right: var(--spacing-2);
}

/* =============================================================================
   TOUCH-DEVICE ADJUSTMENTS
   Slightly larger thumbs on coarse pointers for better tap-accuracy feedback.
   (Hit area is already 44px via ::after — this is visual only.)
   ============================================================================= */

@media (hover: none) and (pointer: coarse) {
    .sidebar-range-thumb {
        width: 22px;
        height: 22px;
        top: 11px;
    }

    /* Filter-chip remove button — at 16×16 on desktop the X is a precise
       cursor target, but on touch it sits well under the iOS 44pt /
       Material 48dp guidance and users mis-tap repeatedly. Bump the
       visual size to 28×28 with a 12px icon on coarse pointers so the
       hit area is large enough for a thumb without dominating the chip
       layout. The chip itself grows by a couple of pixels in height,
       which is fine — it sits on a single line and wraps to a new line
       with the rest. */
    .chip-remove {
        width: 28px;
        height: 28px;
        margin-left: var(--spacing-1);
    }
    .chip-remove i { font-size: 12px; }

    /* Tap-target bump for the four most-tapped sidebar control families.
       Desktop padding (8–12px vertical) gives ~32px-tall hit areas — fine
       for a mouse, but well below the 44pt iOS / 48dp Material guideline
       on a finger. We bump only vertical padding so horizontal layout
       (count badges, brand-name truncation, alignment) stays untouched.
       Each control reaches ~46px tall — enough that adjacent items don't
       get hit by accident on small phones. */
    .sidebar-type-btn,
    .sidebar-brand-item,
    .sidebar-nav-link {
        padding-top: var(--spacing-3);
        padding-bottom: var(--spacing-3);
    }

    /* Slider numeric inputs go from 34px → 44px on coarse pointers so a
       finger can land in them without scaling-zoom-to-tap on iOS Safari. */
    .sidebar-range-input {
        height: 44px;
        font-size: var(--font-size-base);
    }

    /* Clear-all-filters action: 20px desktop height is fine for a cursor
       but a finger needs more. The desktop visual rhythm is preserved
       (this only fires on touch); 36px is generous enough to tap reliably
       in the chip row without competing visually with primary controls. */
    .products-clear-filters {
        padding: var(--spacing-2) var(--spacing-3);
        min-height: 36px;
    }
}

/* =============================================================================
   MOBILE SIDEBAR — slider width inside drawer
   The drawer is narrower on phones; tighten side margins so the track uses
   the full usable width.
   ============================================================================= */

@media (max-width: 768px) {
    .sidebar-range {
        margin-left: 11px;
        margin-right: 11px;
    }
    .sidebar-range-tick-label {
        font-size: 10px;
    }
    /* Avoid tick labels colliding on narrow phones: stagger every second one */
    .sidebar-range-tick-label.is-stagger {
        top: 46px;
    }
    .sidebar-range--ticks {
        height: 64px;
    }
}

/* =============================================================================
   REDUCED MOTION — disable slider fill transition for users who prefer it
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .sidebar-range-fill,
    .sidebar-range-thumb,
    .sidebar-range-tick,
    .sidebar-range-tick-label {
        transition: none !important;
    }
    @keyframes products-filter-spin { to { transform: rotate(360deg); } }
}