/* Product image container */
.product-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--surface-color);
}

    /* Product image */
    .product-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        cursor: pointer;
    }

/* Invisible clickable layer for details page */
.product-image-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    cursor: pointer;
}

/* Product card */
.product-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .product-box:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-md, 0 12px 28px rgba(0,0,0,0.12));
    }

.product-box-link {
    cursor: pointer;
}

/* Overlay */
.product-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.product-box:hover .product-overlay {
    opacity: 1;
}

/* Only real controls inside overlay should be clickable */
.product-overlay .product-quick-actions,
.product-overlay .quick-action-btn,
.product-overlay .add-to-cart-container,
.product-overlay .open-add-to-cart-modal {
    pointer-events: auto;
}

/* Keep quick actions positioned properly */
.product-quick-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
}

/* Keep add to cart positioned properly */
.add-to-cart-container {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    justify-content: center;
}

/* Buttons */
.quick-action-btn,
.open-add-to-cart-modal {
    cursor: pointer;
}

/* Product content layout */
.product-content {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    padding-top: 10px;
}

.product-details {
    height: auto;
    overflow: visible;
}

/* Product title */
.product-title {
    margin: 0 0 8px;
    height: auto;
    max-height: none;
    overflow: visible;
    white-space: normal;
    display: block;
    line-height: 1.35;
}

    .product-title a {
        display: block;
        line-height: 1.35;
        text-decoration: none;
        color: inherit;
        white-space: normal;
        overflow: visible;
    }

/* Product code */
.product-code {
    display: block;
    font-size: 12px;
    color: var(--muted-color);
    margin-bottom: 2px;
    white-space: normal;
    overflow: visible;
}

/* Product name - full visible */
.product-name {
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.product-color-options {
    display: flex;
    flex-wrap: nowrap; /* ✅ keep everything in one row */
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    overflow: hidden; /* prevents breaking */
}

    .product-color-options .color-item {
        flex: 0 0 auto;
    }

    .product-color-options .color-more {
        flex: 0 0 auto;
        white-space: nowrap;
    }

/* Size grid */
.size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.size-option {
    margin: 0;
}

    .size-option .form-check-input {
        position: absolute;
        opacity: 0;
    }

.size-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    min-width: 70px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    background: var(--surface-color, #fff);
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.size-option .form-check-input:checked + .size-chip {
    border-color: var(--bs-primary, #0d6efd);
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    color: var(--accent-color);
    font-weight: 600;
}

.size-chip:hover {
    border-color: var(--bs-primary, #0d6efd);
}

.size-count {
    margin-left: 4px;
    opacity: 0.7;
}


/* Force product title and name to wrap fully */
.product-content,
.product-details,
.product-title,
.product-title a,
.product-title .product-code,
.product-title .product-name {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: unset !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* Keep title as block and allow multiple lines */
.product-title {
    display: block !important;
    margin: 0 0 8px !important;
    line-height: 1.35 !important;
}

    .product-title a {
        display: block !important;
        line-height: 1.35 !important;
    }

/* Code on its own line */
.product-code {
    display: block !important;
    font-size: 12px;
    color: var(--muted-color);
    margin-bottom: 4px;
}

/* Name on its own line and fully visible */
.product-name {
    display: block !important;
    line-height: 1.4 !important;
}

/* Keep card layout stable */
.product-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-content {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}


/* =========================
   Category tree - Smart hierarchy UI
========================= */
.category-tree {
    width: 100%;
    min-width: 0;
}

    .category-tree,
    .category-tree ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .category-tree .category-item {
            position: relative;
            margin-bottom: 6px;
            min-width: 0;
        }

        .category-tree .category-row {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            border-radius: 10px;
            padding: 6px 8px;
            border: 1px solid transparent;
            transition: background-color .18s ease, border-color .18s ease, color .18s ease;
        }

            .category-tree .category-row:hover {
                background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
            }

        .category-tree .category-link,
        .category-tree .subcategory-link {
            flex: 1 1 auto;
            display: block;
            min-width: 0;
            max-width: 100%;
            text-decoration: none;
            line-height: 1.4;
            white-space: normal;
            word-break: break-word;
            overflow-wrap: anywhere;
            color: var(--default-color);
            transition: color .18s ease, font-weight .18s ease;
        }

        .category-tree .category-link {
            font-size: 14px;
            font-weight: 650;
        }

        .category-tree .category-child > .category-row .category-link {
            font-size: 13.5px;
            font-weight: 500;
            color: color-mix(in srgb, var(--default-color), transparent 18%);
        }

        .category-tree .category-toggle-btn {
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            min-width: 24px;
            border: 0;
            border-radius: 50%;
            background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
            color: var(--accent-color);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            font-size: 12px;
            transition: all .18s ease;
        }

            .category-tree .category-toggle-btn:hover {
                background-color: var(--accent-color);
                color: var(--contrast-color);
            }

            .category-tree .category-toggle-btn:focus {
                outline: none;
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 78%);
            }

        .category-tree .category-children-wrap,
        .category-tree .category-featuregroups-wrap {
            position: relative;
            margin-top: 5px;
            margin-left: 15px;
            padding-left: 14px !important;
            border-left: 1px solid color-mix(in srgb, var(--accent-color), transparent 78%);
            min-width: 0;
        }

        /* Align tree dash with text */
        .category-tree .category-child::before {
            content: "";
            position: absolute;
            left: -14px;
            top: 50%; /* 👈 dynamic instead of fixed */
            transform: translateY(-50%); /* 👈 perfect vertical centering */
            width: 11px;
            height: 1px;
            background-color: color-mix(in srgb, var(--accent-color), transparent 72%);
        }

        .category-tree .is-expanded > .category-row {
            background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
        }

            .category-tree .is-expanded > .category-row .category-link {
                color: color-mix(in srgb, var(--default-color), transparent 5%);
            }

        .category-tree .is-active-parent > .category-row {
            background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
            border-color: color-mix(in srgb, var(--accent-color), transparent 82%);
        }

            .category-tree .is-active-parent > .category-row::before {
                content: "";
                position: absolute;
                left: 0;
                top: 7px;
                bottom: 7px;
                width: 3px;
                border-radius: 999px;
                background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
            }

            .category-tree .is-active-parent > .category-row .category-link {
                color: var(--accent-color);
                font-weight: 750;
            }

        .category-tree .is-active > .category-row,
        /* Clean single background for selected */
        .category-tree .category-item.is-active > .category-row,
        .category-tree .category-item.is-active-parent > .category-row {
            background: color-mix(in srgb, var(--accent-color), transparent 90%);
            border-radius: 10px;
            padding: 6px 8px;
        }

        /* Left accent line (very clean UX) */
        .category-tree .category-item.is-active > .category-row {
            border-left: var(--accent-color);
        }

        .category-tree .is-active > .category-row {
            border: 1px solid color-mix(in srgb, var(--accent-color), transparent 68%);
            box-shadow: inset 3px 0 0 var(--accent-color);
        }

            .category-tree .is-active > .category-row .category-link {
                color: var(--accent-color);
                font-weight: 800;
            }

        .category-tree .subcategory-link {
            position: relative;
            border-radius: 8px;
            padding: 6px 8px;
            font-size: 13.5px;
            font-weight: 500;
        }

            .category-tree .subcategory-link:hover {
                background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
                color: var(--accent-color);
            }

        .category-tree .category-item:last-child {
            margin-bottom: 0;
        }


        .category-tree .category-children-wrap.scrollable {
            max-height: 205px;
            overflow-y: scroll !important;
            overflow-x: hidden;
            padding-right: 6px;
        }

.category-children-wrap.scrollable::-webkit-scrollbar {
    width: 6px;
}

.category-children-wrap.scrollable::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-color), transparent 60%);
    border-radius: 6px;
}

.category-children-wrap.scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .filter-chip .chip-label {
        font-weight: 600;
        opacity: 0.7;
    }

    .filter-chip .chip-value {
        font-weight: 700;
    }

/* =========================
   Active Filters / Smart Theme UI
========================= */

.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--default-color);
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-md);
}

    .filter-chip:hover {
        border-color: var(--accent-color);
        background: color-mix(in srgb, var(--accent-color), var(--surface-color) 92%);
        color: var(--accent-color);
    }

    .filter-chip:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 75%);
    }

    .filter-chip span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: color-mix(in srgb, var(--accent-color), transparent 88%);
        color: var(--accent-color);
        font-size: 0.8rem;
        font-weight: 700;
    }

.clear-all-btn {
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    transition: all 0.2s ease;
}

    .clear-all-btn:hover {
        background: var(--accent-color);
        color: var(--contrast-color);
        border-color: var(--accent-color);
    }

    .clear-all-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 75%);
    }

/* Widget containers */
.widget-item {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: calc(var(--radius-md) + 2px);
    box-shadow: var(--shadow-md);
    padding: 1rem;
}

.widget-title {
    color: var(--heading-color);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Search/filter inputs */
.brand-search .form-control,
#productSearch,
#priceMin,
#priceMax,
.min-price-input,
.max-price-input,
#sortBy,
#itemsPerPage {
    background: var(--surface-color);
    color: var(--default-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

    .brand-search .form-control::placeholder,
    #productSearch::placeholder,
    .min-price-input::placeholder,
    .max-price-input::placeholder {
        color: var(--muted-color);
    }

/* Checkbox rows */
.brand-item,
.size-option,
.color-option {
    border-radius: var(--radius-md);
    transition: background 0.2s ease, border-color 0.2s ease;
}

    .brand-item:hover,
    .size-option:hover,
    .color-option:hover {
        background: color-mix(in srgb, var(--accent-color), transparent 96%);
    }

    /* Brand label */
    .brand-item .form-check-label,
    .size-option .form-check-label {
        color: var(--default-color);
        cursor: pointer;
    }

.brand-count,
.size-count {
    color: var(--muted-color);
}

/* Checkbox / radio accents */
.form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.form-check-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 75%);
}

/* Size chips */
.size-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-color);
    transition: all 0.2s ease;
}

    .size-option input:checked + .size-chip,
    .size-chip:hover {
        border-color: var(--accent-color);
        background: color-mix(in srgb, var(--accent-color), transparent 92%);
        color: var(--accent-color);
    }

/* Color swatches */
.color-swatch {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--default-color), transparent 75%);
    display: inline-block;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.color-option input:checked + label .color-swatch,
.color-option label:hover .color-swatch {
    transform: scale(1.08);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 80%);
}

/* Apply buttons */
#applyBrands,
#applyColors,
#applySizes,
#applyPrice,
.search-btn {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
    border-radius: var(--radius-md);
}

    #applyBrands:hover,
    #applyColors:hover,
    #applySizes:hover,
    #applyPrice:hover,
    .search-btn:hover {
        background: var(--accent-variant);
        border-color: var(--accent-variant);
        color: var(--contrast-color);
    }

/* Secondary clear links/buttons */
#clearBrands,
#clearColors,
#clearSizes,
#resetPrice {
    color: var(--muted-color);
    text-decoration: none;
    font-weight: 500;
}

    #clearBrands:hover,
    #clearColors:hover,
    #clearSizes:hover,
    #resetPrice:hover {
        color: var(--accent-color);
    }

/* Price slider support */
.range-slider .slider-track {
    background: color-mix(in srgb, var(--default-color), transparent 88%);
}

.range-slider .slider-progress {
    background: var(--accent-color);
}

/* Responsive */
@media (max-width: 767.98px) {
    .active-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .active-filter-chips {
        width: 100%;
    }

    .clear-all-btn {
        width: 100%;
        justify-content: center;
    }
}

.product-variant-color {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

    .product-variant-color:hover {
        transform: scale(1.12);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 75%);
    }


.color-more {
    height: 18px;
    min-width: 26px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 65%);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.color-search {
    position: relative;
    margin-bottom: 10px;
}

    .color-search .form-control {
        height: 38px;
        padding-right: 2.2rem;
        border-radius: var(--radius-md);
    }

    .color-search i {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted-color);
        pointer-events: none;
    }

.color-list {
    display: block;
    max-height: 230px;
    overflow-y: auto;
    padding-right: 6px;
}

.color-item {
    padding: 4px 0;
    border-radius: var(--radius-md);
}

    .color-item .form-check {
        display: flex;
        align-items: center;
        min-height: 30px;
        margin: 0;
        padding-left: 0;
        gap: 8px;
    }

    .color-item .form-check-input {
        flex: 0 0 auto;
        margin: 0;
        position: static;
    }

.color-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--default-color);
    line-height: 1.2;
}

.color-swatch {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.color-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.color-code,
.color-name {
    font-size: 0.9rem;
    font-weight: 400;
    color: inherit;
    line-height: 1.2;
}

.color-name {
    display: none;
}

.color-count {
    margin-left: 4px;
    color: var(--muted-color);
    font-size: 0.85rem;
    white-space: nowrap;
}

.color-item:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 96%);
}


.color-group-title {
    display: flex;
    align-items: center;
    width: 100%;
    clear: both;
    grid-column: 1 / -1;
    margin: 10px 0 5px;
    padding: 0;
    white-space: nowrap;
}

    .color-group-title span {
        display: block;
        width: 100%;
        font-size: 11px;
        font-weight: 700;
        color: var(--muted-color);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--border-color);
    }

    .color-group-title:first-child {
        margin-top: 0;
    }


.size-search {
    position: relative;
}

    .size-search .form-control {
        padding-right: 2.2rem;
        background: var(--surface-color);
        color: var(--default-color);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
    }

    .size-search i {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--muted-color);
        pointer-events: none;
    }

.size-list {
    max-height: 230px;
    overflow-y: auto;
    padding-right: 4px;
}

.size-item {
    border-radius: var(--radius-md);
    transition: background 0.2s ease;
}

    .size-item:hover {
        background: color-mix(in srgb, var(--accent-color), transparent 96%);
    }

    .size-item .form-check {
        margin: 0;
        padding: 0.35rem 0.25rem 0.35rem 1.5rem;
    }

    .size-item .form-check-label {
        width: 100%;
        color: var(--default-color);
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 400;
    }

.size-count {
    color: var(--muted-color);
    margin-left: 4px;
}

.product-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
}

.product-thumb {
    position: relative;
}

.product-cart-row {
    margin-top: 8px;
}

.product-cart-pill {
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 0;
    background: var(--accent-color);
    color: var(--contrast-color);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

    .product-cart-pill:hover {
        background: var(--accent-variant);
    }

/* Make card full height */
.product-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Content takes remaining space */
.product-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* This pushes the button to the bottom */
.product-cart-row {
    margin-top: auto; /* 🔥 key line */
    padding-top: 10px;
}


/* =========================================================
   Mobile Amazon-style Products UX
   Desktop remains unchanged
========================================================= */

@media (max-width: 991.98px) {

    /* ===== Page Title ===== */
    .page-title {
        padding: 18px 0;
    }

        .page-title h1 {
            font-size: 28px;
            margin-bottom: 6px;
        }

    /* ===== Hide Sidebar ===== */
    .sidebar {
        display: none !important;
    }

    /* ===== Full Width Content ===== */
    .product-main-content {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* ===== Sticky Header (Amazon style) ===== */
    .category-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--surface-color, #fff);
        padding: 10px 0 8px;
        border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
        box-shadow: var(--shadow-md);
    }

        /* Hide desktop filters */
        .category-header .filter-container {
            margin-bottom: 0 !important;
        }

            .category-header .filter-container > .row > .col-md-6,
            .category-header .filter-container > .row > .col-md-3 {
                display: none !important;
            }

    /* ===== Mobile Toolbar ===== */
    .mobile-product-toolbar {
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 0 4px;
        margin-bottom: 8px;
    }

    .mobile-toolbar-btn,
    .mobile-toolbar-select {
        height: 42px;
        border: 1px solid color-mix(in srgb, var(--default-color), transparent 78%);
        background: var(--surface-color, #fff);
        color: var(--default-color);
        border-radius: 999px;
        padding: 0 14px;
        font-weight: 600;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        white-space: nowrap;
    }

    .mobile-toolbar-btn {
        flex: 1;
    }

    .mobile-toolbar-select {
        width: 76px;
        appearance: auto;
    }

    /* ===== Active Filters (Horizontal Scroll) ===== */
    .mobile-active-filter-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 4px 2px;
        -webkit-overflow-scrolling: touch;
    }

        .mobile-active-filter-scroll::-webkit-scrollbar {
            display: none;
        }

    .mobile-active-filter-chips {
        display: flex;
        gap: 8px;
        min-height: 36px;
        align-items: center;
        white-space: nowrap;
    }

        .mobile-active-filter-chips .filter-chip {
            flex: 0 0 auto;
            border-radius: 999px;
            padding: 7px 12px;
            font-size: 13px;
            background: color-mix(in srgb, var(--accent-color), transparent 92%);
            border: 1px solid color-mix(in srgb, var(--accent-color), transparent 65%);
            color: var(--default-color);
        }

    /* Hide desktop chips */
    #activeFilterChips {
        display: none !important;
    }

    #clearAllFilters {
        display: none !important;
    }

    /* ===== Products Layout ===== */
    #category-product-list {
        padding-top: 14px;
    }

    #productList {
        margin-left: 0;
        margin-right: 0;
    }

        #productList > [class*="col-"] {
            padding-left: 6px;
            padding-right: 6px;
        }

    /* ===== Drawer Overlay ===== */
    .mobile-filters-overlay {
        position: fixed;
        inset: 0;
        background: color-mix(in srgb, var(--default-color), transparent 58%);
        z-index: 1998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.22s ease, visibility 0.22s ease;
    }

        .mobile-filters-overlay.open {
            opacity: 1;
            visibility: visible;
        }

    /* ===== Drawer ===== */
    .mobile-filters-drawer {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(92vw, 430px);
        height: 100dvh;
        background: var(--surface-color, #fff);
        z-index: 1999;
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-md);
        transition: right 0.28s ease;
    }

        .mobile-filters-drawer.open {
            right: 0;
        }

    /* ===== Drawer Header ===== */
    .mobile-drawer-header {
        height: 60px;
        padding: 0 18px;
        border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
    }

    .mobile-drawer-close {
        width: 38px;
        height: 38px;
        border: 0;
        background: color-mix(in srgb, var(--default-color), transparent 94%);
        border-radius: 50%;
        color: var(--default-color);
    }

    /* ===== Drawer Body ===== */
    .mobile-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 14px;
        background: color-mix(in srgb, var(--default-color), transparent 97%);
    }

        .mobile-drawer-body .widget-item {
            display: block !important;
            background: var(--surface-color, #fff);
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 14px;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
        }

    /* ===== Drawer Footer ===== */
    .mobile-drawer-footer {
        padding: 12px 14px;
        border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
        background: var(--surface-color, #fff);
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 10px;
    }

    /* Prevent scroll when open */
    body.mobile-filter-open {
        overflow: hidden;
    }

    /* ===== Fix overlap with main menu ===== */
    body.mobile-nav-active .category-header,
    body.mobile-menu-active .category-header,
    body.menu-open .category-header,
    body.nav-open .category-header {
        z-index: 1 !important;
    }

    .mobile-sort-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: -100%;
        z-index: 1999;
        background: var(--surface-color, #fff);
        border-radius: 22px 22px 0 0;
        box-shadow: var(--shadow-md);
        transition: bottom 0.28s ease;
        padding-bottom: env(safe-area-inset-bottom);
    }

        .mobile-sort-sheet.open {
            bottom: 0;
        }

    .mobile-sort-header {
        height: 58px;
        padding: 0 18px;
        border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
    }

    .mobile-sort-option {
        width: 100%;
        border: 0;
        background: transparent;
        text-align: left;
        padding: 16px 20px;
        font-size: 16px;
        color: var(--default-color);
        border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
    }

        .mobile-sort-option.active {
            font-weight: 700;
            color: var(--accent-color);
            background: color-mix(in srgb, var(--accent-color), transparent 94%);
        }

    .category-header {
        top: var(--mobile-header-offset, 0px) !important;
        z-index: 50;
    }

    /* ===== Make filter lists scrollable ===== */
    .mobile-drawer-body .brand-list,
    .mobile-drawer-body .color-list,
    .mobile-drawer-body .size-list {
        max-height: 260px;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 6px;
    }

        /* ===== Show scrollbar clearly (important UX) ===== */
        .mobile-drawer-body .brand-list::-webkit-scrollbar,
        .mobile-drawer-body .color-list::-webkit-scrollbar,
        .mobile-drawer-body .size-list::-webkit-scrollbar {
            width: 6px;
        }

        .mobile-drawer-body .brand-list::-webkit-scrollbar-thumb,
        .mobile-drawer-body .color-list::-webkit-scrollbar-thumb,
        .mobile-drawer-body .size-list::-webkit-scrollbar-thumb {
            background: color-mix(in srgb, var(--default-color), transparent 60%);
            border-radius: 10px;
        }

        .mobile-drawer-body .brand-list::-webkit-scrollbar-track,
        .mobile-drawer-body .color-list::-webkit-scrollbar-track,
        .mobile-drawer-body .size-list::-webkit-scrollbar-track {
            background: transparent;
        }

    /* ===== Firefox support ===== */
    .mobile-drawer-body .brand-list,
    .mobile-drawer-body .color-list,
    .mobile-drawer-body .size-list {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--default-color), transparent 60%) transparent;
    }

    /* remove unused white space under mobile filter bar */
    .category-header {
        padding-bottom: 6px !important;
    }

        .category-header .container {
            padding-bottom: 0 !important;
        }

        .category-header .filter-container {
            display: none !important;
        }

    .mobile-active-filter-scroll {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .mobile-active-filter-chips {
        min-height: 0 !important;
        padding-bottom: 4px;
    }

        .mobile-active-filter-chips:empty {
            display: none !important;
        }

    /* Amazon-style 2-column product grid on mobile */
    #productList {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px !important;
        margin: 0 !important;
    }

        #productList > [class*="col-"] {
            width: 100% !important;
            max-width: 100% !important;
            flex: none !important;
            padding: 0 !important;
        }

    .product-box {
        height: 100%;
        border-radius: 14px;
    }

    .product-thumb {
        aspect-ratio: 1 / 1;
        height: auto !important;
    }

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

    .product-content {
        padding: 10px !important;
    }

    .product-title {
        font-size: 13px !important;
        line-height: 1.35;
    }

    .product-price {
        font-size: 15px !important;
    }
}



/* Clean Header Layout */
.filter-container {
    padding: 20px 24px;
}

    /* Align everything nicely */
    .filter-container .row {
        align-items: center;
    }

/* Search input */
#productSearch {
    height: 48px;
}

.search-btn {
    width: 52px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dropdowns */
#sortBy,
#itemsPerPage {
    height: 48px;
}

/* Better spacing */
.active-filters {
    width: 100%;
}

.product-controls {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

    .product-controls select {
        height: 48px;
        min-width: 110px;
    }

#sortBy {
    min-width: 180px;
}

#itemsPerPage {
    min-width: 120px;
}

/* Brand Filter - Final Fix */
.brand-filter-widget .brand-initials {
    display: none !important;
}

.brand-filter-widget .brand-logo-failed .brand-initials {
    display: flex !important;
}

.brand-filter-widget .brand-option {
    display: grid !important;
    grid-template-columns: 18px 40px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 64px;
    padding: 10px 12px !important;
    overflow: hidden;
}

.brand-filter-widget .brand-logo-wrap {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.brand-filter-widget .brand-logo {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
}

.brand-filter-widget .brand-info {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.brand-filter-widget .brand-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.brand-filter-widget .brand-count {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    color: var(--muted-color) !important;
    white-space: nowrap !important;
}

.product-size-options {
    margin-top: 6px;
}

    /* Fix +25 color wrapping */
    .product-color-options .color-more,
    .product-size-options .size-more {
        flex: 0 0 auto;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

/* Color +more */
.product-color-options .color-more {
    min-width: 34px;
    height: 18px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 65%);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Amazon-style compact size chips */
.product-variant-size {
    flex: 0 1 auto;
    max-width: 100%;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    background: var(--surface-color); /* ✅ theme */
    border: 1px solid var(--border-color); /* ✅ theme */
    color: var(--default-color); /* ✅ theme */

    font-size: 11px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
}

    .product-variant-size:hover {
        border-color: var(--accent-color); /* ✅ theme */
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color), transparent 75%);
        color: var(--accent-color); /* ✅ theme */
        background: color-mix(in srgb, var(--accent-color), transparent 94%);
    }


.product-size-options .size-more {
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
    color: var(--accent-color);
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
}