/* ========================================
   PRODUCT FILTER SIDEBAR — PREMIUM REDESIGN
   iBUY Design System:
   - Font: Plus Jakarta Sans (inherited)
   - Charcoal: #222 (primary UI elements)
   - Orange: #FF6B35 (hover accents, active states, price)
   - Background: #F5F5F5 / White
   - Shadows: subtle, 0.06–0.10 opacity

   IMPORTANT: This CSS ENHANCES Botble's default front-ecommerce.css.
   Botble's approach:
     - input { display: none }
     - label { padding-inline-start: 26px; position: relative }
     - label::after = checkbox box (absolute, inset-inline-start: 0)
     - label::before = checkmark SVG (absolute, inset-inline-start: 0)
   We override COLORS and SHAPES of ::before/::after, NOT their positioning.
   ======================================== */


/* ── 1. SIDEBAR WRAPPER ──────────────────────────────────────────────────── */

.bb-shop-sidebar {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06) !important;
    z-index: 90 !important;
    overflow: visible !important;
    display: block !important;
}


/* ── 2. STICKY / PARKED STATES (JS-driven) ───────────────────────────────── */

.bb-shop-sidebar.is-filter-sticky {
    position: fixed !important;
    top: 92px !important;
    height: calc(100vh - 108px) !important;
    overflow: hidden !important;
    z-index: 90 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important;
}

.bb-shop-sidebar.is-filter-parked {
    position: absolute !important;
    height: calc(100vh - 108px) !important;
    overflow: hidden !important;
    z-index: 90 !important;
    border-radius: 14px !important;
}

/* Inner form scrolls in sticky/parked states */
.bb-shop-sidebar.is-filter-sticky .bb-product-form-filter,
.bb-shop-sidebar.is-filter-parked .bb-product-form-filter {
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent !important;
}

.bb-shop-sidebar.is-filter-sticky .bb-product-form-filter::-webkit-scrollbar,
.bb-shop-sidebar.is-filter-parked .bb-product-form-filter::-webkit-scrollbar {
    width: 4px !important;
}

.bb-shop-sidebar.is-filter-sticky .bb-product-form-filter::-webkit-scrollbar-track,
.bb-shop-sidebar.is-filter-parked .bb-product-form-filter::-webkit-scrollbar-track {
    background: transparent !important;
}

.bb-shop-sidebar.is-filter-sticky .bb-product-form-filter::-webkit-scrollbar-thumb,
.bb-shop-sidebar.is-filter-parked .bb-product-form-filter::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
}

.bb-shop-sidebar.is-filter-sticky .bb-product-form-filter::-webkit-scrollbar-thumb:hover,
.bb-shop-sidebar.is-filter-parked .bb-product-form-filter::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.22) !important;
}


/* ── 3. FILTER SECTION BLOCKS ────────────────────────────────────────────── */

.bb-product-filter {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.bb-product-filter:last-child {
    border-bottom: none !important;
}

/* Accordion collapsed state */
.bb-product-filter.is-collapsed > .bb-product-filter-content {
    display: none !important;
}


/* ── 4. SECTION TITLES ───────────────────────────────────────────────────── */

.bb-product-filter-title {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0D0D0D !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 16px 40px 14px 30px !important;
    background: #ffffff !important;
    border-bottom: none !important;
    position: relative !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: color 0.15s ease !important;
}

.bb-product-filter-title:hover {
    color: #444 !important;
}

/* Dark left-mark bar (matches homepage section headers) */
.bb-product-filter-title::before {
    content: '' !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 16px !important;
    background: #222 !important;
    border-radius: 2px !important;
}

/* Chevron icon for accordion toggle */
.bb-product-filter-title::after {
    content: '' !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid #999 !important;
    border-bottom: 2px solid #999 !important;
    transform: translateY(-60%) rotate(45deg) !important;
    transition: transform 0.25s ease, border-color 0.15s ease !important;
    border-left: none !important;
    border-top: none !important;
    background: none !important;
}

.bb-product-filter-title:hover::after {
    border-color: #666 !important;
}

/* Rotate chevron when collapsed */
.bb-product-filter.is-collapsed > .bb-product-filter-title::after {
    transform: translateY(-30%) rotate(-45deg) !important;
}

/* Attribute section titles need the bar too */
.bb-product-filter-attribute-item .bb-product-filter-title {
    padding-left: 30px !important;
}

.bb-product-filter-attribute-item .bb-product-filter-title::before {
    content: '' !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 16px !important;
    background: #222 !important;
    border-radius: 2px !important;
}

.bb-product-filter-attributes .bb-product-filter-title {
    padding-left: 30px !important;
}


/* ── 5. FILTER CONTENT WRAPPER ───────────────────────────────────────────── */

.bb-product-filter-content {
    padding: 2px 18px 16px !important;
    background: #ffffff !important;
    overflow: visible !important;
    max-height: none !important;
}

/* Botble default sets max-height:700px + overflow-y:auto on content with lists;
   we keep the scrollbar inside sticky mode only */
.bb-product-filter-content:has(.bb-product-filter-items) {
    max-height: none !important;
    overflow-y: visible !important;
}


/* ── 6. FILTER LIST ──────────────────────────────────────────────────────── */

.bb-product-filter-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Nested sub-categories */
.bb-product-filter-items li .bb-product-filter-items {
    padding-inline-start: 14px !important;
    margin-top: 2px !important;
    border-left: 2px solid #f0f0f0 !important;
}


/* ── 7. FILTER LIST ITEM ─────────────────────────────────────────────────── */
/*
   Botble uses: li > input(hidden) + label(padding-left for checkbox area)
   We keep this model. The li is position:relative for the toggle button.
*/

.bb-product-filter-item {
    position: relative !important;
    padding-right: 20px !important;
    margin-bottom: 1px !important;
}

.bb-product-filter-items li {
    position: relative !important;
}

.bb-product-filter-items li:not(:last-child) {
    margin-bottom: 2px !important;
}


/* ── 8. INPUTS — remain hidden (Botble default: display:none) ────────────── */

.bb-product-filter-items li input[type="checkbox"],
.bb-product-filter-items li input[type="radio"] {
    display: none !important;
}


/* ── 9. LABELS — ENHANCE Botble's left-checkbox approach ─────────────────── */
/*
   Botble default: padding-inline-start: 26px, position: relative
   We enhance: better font, colors, hover states, transitions
   ::after = checkbox box (positioned absolute at left:0 by Botble)
   ::before = checkmark SVG (positioned absolute at left:0 by Botble)
*/

.bb-product-filter-items li label {
    color: #444 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    padding-inline-start: 28px !important;
    padding-inline-end: 4px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: color 0.18s ease, background 0.18s ease !important;
    display: block !important;
    margin: 0 -6px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    border-radius: 6px !important;
    padding-left: 34px !important;
    padding-right: 8px !important;
}

.bb-product-filter-items li label:hover {
    color: #222 !important;
    background: #f8f8f8 !important;
}

/* Checked label — subtle highlight */
.bb-product-filter-items li input[type="checkbox"]:checked ~ label,
.bb-product-filter-items li input[type="radio"]:checked ~ label {
    color: #222 !important;
    font-weight: 600 !important;
}


/* ── 10. CHECKBOX BOX (label::after) — Premium styled ────────────────────── */
/*
   Botble places this at inset-inline-start: 0, top: 2px, 16px × 16px
   We override colors, add rounded corners, smooth transitions
*/

.bb-product-filter-items.filter-checkbox .bb-product-filter-item label::after {
    border: 2px solid #d4d4d4 !important;
    border-radius: 4px !important;
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
    inset-inline-start: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Checkbox hover */
.bb-product-filter-items.filter-checkbox .bb-product-filter-item label:hover::after {
    border-color: #999 !important;
}

/* Checkbox checked — charcoal fill */
.bb-product-filter-items.filter-checkbox input[type="checkbox"]:checked ~ label::after,
.bb-product-filter-items.filter-checkbox input[type="radio"]:checked ~ label::after {
    background-color: #222 !important;
    border-color: #222 !important;
}


/* ── 11. CHECKMARK (label::before) — Premium styled ──────────────────────── */
/*
   Botble places this at inset-inline-start: 0, top: 2px, hidden until :checked
   We override the SVG to use white stroke on charcoal bg
*/

.bb-product-filter-items.filter-checkbox .bb-product-filter-item label::before {
    inset-inline-start: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    z-index: 3 !important;
}

.bb-product-filter-items.filter-checkbox input[type="checkbox"]:checked ~ label::before,
.bb-product-filter-items.filter-checkbox input[type="radio"]:checked ~ label::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="2.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>') !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* ── 12. VISUAL FILTER (Color/Size with swatches) ────────────────────────── */
/*
   HTML: input(hidden) → label → span.bb-product-attribute-swatch-display
   Layout: [checkbox 16px] [6px gap] [swatch 22px] [8px gap] [label text]
   Total left padding on label: 16 + 6 + 22 + 8 = 52px
   - label::after  = checkbox box at left:0
   - label::before = checkmark SVG at left:0 (shown on :checked)
   - swatch span   = absolute at left:24px (after checkbox + gap)
*/

/* Label: extra padding to fit checkbox + swatch
   Layout: [6px margin offset] [checkbox 16px @ left:6px] [6px gap] [swatch 22px @ left:28px] [8px gap] [text]
   Total padding-left on label: 6 + 16 + 6 + 22 + 8 = 58px */
.bb-product-filter-items.filter-visual .bb-product-filter-item label {
    padding-inline-start: 58px !important;
    padding-left: 58px !important;
}

/* Checkbox box via label::after */
.bb-product-filter-items.filter-visual .bb-product-filter-item label::after {
    content: '' !important;
    position: absolute !important;
    inset-inline-start: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #d4d4d4 !important;
    border-radius: 4px !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
    z-index: 2 !important;
}

/* Checkbox hover */
.bb-product-filter-items.filter-visual .bb-product-filter-item label:hover::after {
    border-color: #999 !important;
}

/* Checkbox checked — charcoal fill */
.bb-product-filter-items.filter-visual input[type="checkbox"]:checked ~ label::after,
.bb-product-filter-items.filter-visual input[type="radio"]:checked ~ label::after {
    background-color: #222 !important;
    border-color: #222 !important;
}

/* Checkmark SVG via label::before */
.bb-product-filter-items.filter-visual .bb-product-filter-item label::before {
    inset-inline-start: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    z-index: 3 !important;
}

.bb-product-filter-items.filter-visual input[type="checkbox"]:checked ~ label::before,
.bb-product-filter-items.filter-visual input[type="radio"]:checked ~ label::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="2.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>') !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Color swatch circle — positioned after the checkbox (left: 6px + 16px + 6px = 28px) */
.bb-product-filter-items.filter-visual .bb-product-filter-item .bb-product-attribute-swatch-display {
    border: 2px solid #e0e0e0 !important;
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    position: absolute !important;
    inset-inline-start: 28px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: all 0.2s ease !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
    z-index: 1 !important;
}

/* Swatch hover */
.bb-product-filter-items.filter-visual .bb-product-filter-item:hover .bb-product-attribute-swatch-display {
    border-color: #bbb !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 6px rgba(0, 0, 0, 0.1) !important;
}

/* Swatch checked — charcoal ring */
.bb-product-filter-items.filter-visual input[type="checkbox"]:checked ~ label ~ .bb-product-attribute-swatch-display {
    border-color: #222 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #222 !important;
}


/* ── 13. CATEGORY LINKS ──────────────────────────────────────────────────── */

.bb-product-filter-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #444 !important;
    text-decoration: none !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.bb-product-filter-link:hover {
    color: #FF6B35 !important;
    background: rgba(255, 107, 53, 0.05) !important;
    text-decoration: none !important;
}

.bb-product-filter-link.active {
    color: #FF6B35 !important;
    font-weight: 600 !important;
    background: rgba(255, 107, 53, 0.08) !important;
}

/* Link icons */
.bb-product-filter-link svg,
.bb-product-filter-link i {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    opacity: 0.5 !important;
    transition: opacity 0.2s ease !important;
}

.bb-product-filter-link:hover svg,
.bb-product-filter-link:hover i,
.bb-product-filter-link.active svg,
.bb-product-filter-link.active i {
    opacity: 0.8 !important;
}

.bb-product-filter-link img {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}


/* ── 14. CATEGORY TREE EXPAND/COLLAPSE BUTTON ────────────────────────────── */

.bb-product-filter-items li [data-bb-toggle="toggle-product-categories-tree"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background: #f5f5f5 !important;
    color: #888 !important;
    cursor: pointer !important;
    position: absolute !important;
    right: 0 !important;
    top: 4px !important;
    border-radius: 6px !important;
    z-index: 10 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

.bb-product-filter-items li [data-bb-toggle="toggle-product-categories-tree"]:hover {
    background: #eee !important;
    color: #555 !important;
}

/* Icon sizing */
.bb-product-filter-items li [data-bb-toggle="toggle-product-categories-tree"] i,
.bb-product-filter-items li [data-bb-toggle="toggle-product-categories-tree"] svg,
.bb-product-filter-items li [data-bb-toggle="toggle-product-categories-tree"] .icon {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
    line-height: 1 !important;
    color: inherit !important;
}

/* Active state — charcoal button */
.bb-product-filter-items li.active > [data-bb-toggle="toggle-product-categories-tree"],
.bb-product-filter-items li.open > [data-bb-toggle="toggle-product-categories-tree"] {
    background: #222 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Plus/minus icon swap */
.bb-product-filter-items li [data-bb-toggle="toggle-product-categories-tree"] svg:first-child,
.bb-product-filter-items li [data-bb-toggle="toggle-product-categories-tree"] [class*="ti-plus"] {
    display: inline-block !important;
}

.bb-product-filter-items li [data-bb-toggle="toggle-product-categories-tree"] svg:last-child,
.bb-product-filter-items li [data-bb-toggle="toggle-product-categories-tree"] [class*="ti-minus"] {
    display: none !important;
}

.bb-product-filter-items li.active > [data-bb-toggle="toggle-product-categories-tree"] svg:first-child,
.bb-product-filter-items li.open > [data-bb-toggle="toggle-product-categories-tree"] svg:first-child,
.bb-product-filter-items li.active > [data-bb-toggle="toggle-product-categories-tree"] [class*="ti-plus"],
.bb-product-filter-items li.open > [data-bb-toggle="toggle-product-categories-tree"] [class*="ti-plus"] {
    display: none !important;
}

.bb-product-filter-items li.active > [data-bb-toggle="toggle-product-categories-tree"] svg:last-child,
.bb-product-filter-items li.open > [data-bb-toggle="toggle-product-categories-tree"] svg:last-child,
.bb-product-filter-items li.active > [data-bb-toggle="toggle-product-categories-tree"] [class*="ti-minus"],
.bb-product-filter-items li.open > [data-bb-toggle="toggle-product-categories-tree"] [class*="ti-minus"] {
    display: inline-block !important;
}


/* ── 15. PRICE SLIDER ────────────────────────────────────────────────────── */

.bb-product-price-filter .ui-widget.ui-widget-content,
.bb-product-price-filter .ui-slider {
    height: 4px !important;
    background: #eee !important;
    border: none !important;
    border-radius: 4px !important;
    margin: 20px 0 14px !important;
    position: relative !important;
}

.bb-product-price-filter .ui-slider-range,
.bb-product-price-filter .ui-slider-horizontal .ui-slider-range {
    background: #FF6B35 !important;
    border-radius: 4px !important;
    height: 4px !important;
}

.bb-product-price-filter .ui-slider .ui-slider-handle {
    width: 20px !important;
    height: 20px !important;
    background: #ffffff !important;
    border: 2.5px solid #FF6B35 !important;
    border-radius: 50% !important;
    top: -8px !important;
    margin-left: -10px !important;
    cursor: grab !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    outline: none !important;
    /* No transition — it causes lag while dragging */
    transition: none !important;
    /* Required for smooth touch dragging */
    touch-action: none !important;
    -ms-touch-action: none !important;
}

.bb-product-price-filter .ui-slider .ui-slider-handle:hover {
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3) !important;
    border-color: #FF6B35 !important;
}

.bb-product-price-filter .ui-slider .ui-slider-handle:active,
.bb-product-price-filter .ui-slider .ui-slider-handle.ui-state-active {
    cursor: grabbing !important;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15), 0 2px 8px rgba(255, 107, 53, 0.3) !important;
    border-color: #FF6B35 !important;
}

.bb-product-price-filter .input-range-label,
.bb-product-price-filter-info .input-range-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.bb-product-price-filter .input-range-label .from,
.bb-product-price-filter .input-range-label .to {
    color: #FF6B35 !important;
    font-weight: 700 !important;
}

.bb-product-price-filter-info {
    padding: 0 !important;
}


/* ── 16. ATTRIBUTE SECTIONS SPACING ──────────────────────────────────────── */

.bb-product-filter .bb-product-filter-attribute-item {
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.bb-product-filter .bb-product-filter-attribute-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* On Sale section — single item, slightly tighter */
.bb-product-filter-attribute-item .bb-product-filter-content {
    padding-bottom: 14px !important;
}


/* ── 17. HIDDEN FIELDS ───────────────────────────────────────────────────── */

.bb-ecommerce-filter-hidden-fields {
    display: none !important;
}


/* ── 18. BACK LINK CHEVRON ───────────────────────────────────────────────── */

.bb-product-filter-link svg[class*="chevron-left"],
.bb-product-filter-link i[class*="chevron-left"] {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.6 !important;
}


/* ── 19. LAYOUT CONTAINER FIXES ──────────────────────────────────────────── */
/* Desktop (>=1200px): sidebar hidden by default, inline toggle via .filter-open
   Mobile/Tablet (<1200px): base theme's slide-in panel (translateX) — don't interfere */

.ps-layout__left-content {
    overflow: visible !important;
    padding: 0 !important;
}

/* --- DESKTOP ONLY (>=1200px): inline sidebar toggle --- */
/* backend.js toggles .active on .ps-layout__left.
   On desktop we override the base theme's fixed positioning
   and make it an inline flex column that expands/collapses. */
@media (min-width: 1200px) {
    .ps-layout--shop {
        display: flex !important;
        flex-wrap: nowrap !important;
        padding-left: 0 !important; /* override base 254px padding */
    }

    /* Default: sidebar collapsed inline */
    .ps-layout--shop .ps-layout__left {
        position: relative !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        max-height: none !important;
        z-index: 1 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        opacity: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease,
                    opacity 0.3s ease, padding 0.3s ease !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* Open state: .active toggled by backend.js */
    .ps-layout--shop .ps-layout__left.active {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        opacity: 1 !important;
        overflow: visible !important;
        padding: 0 16px 0 0 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    .ps-layout--shop .ps-layout__right {
        flex: 1 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        transition: max-width 0.3s ease !important;
    }

    .ps-layout--shop .ps-layout__left.active ~ .ps-layout__right {
        max-width: calc(100% - 276px) !important;
    }

    /* Hide the mobile close button & screen darken on desktop */
    .ps-layout--shop .ps-filter__header,
    .ps-layout--shop .screen-darken {
        display: none !important;
    }

    /* Reset the .ps-layout__left-container to flow naturally */
    .ps-layout--shop .ps-layout__left-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        overflow-y: auto !important;
    }
}

/* --- MOBILE / TABLET (<1200px): let base theme handle slide-in --- */
/* Base theme's product-filter-sidebar.css uses:
   position: fixed; transform: translateX(-100%) → .active { translateX(0) }
   We do NOT override position, transform, width, or z-index here. */
@media (max-width: 1199px) {
    .ps-layout--shop {
        padding-left: 0 !important; /* override base 254px padding */
    }

    .bb-shop-sidebar {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .bb-shop-sidebar.is-filter-sticky,
    .bb-shop-sidebar.is-filter-parked {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        overflow: visible !important;
        left: auto !important;
        width: auto !important;
        box-shadow: none !important;
    }

    .bb-shop-sidebar.is-filter-sticky .bb-product-form-filter,
    .bb-shop-sidebar.is-filter-parked .bb-product-form-filter {
        height: auto !important;
        overflow-y: visible !important;
    }

    .bb-product-filter-title::after {
        display: none !important;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT TOOLBAR — Premium flat bar
   ══════════════════════════════════════════════════════════════════════════ */

.shop-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%) !important;
    border-bottom: 1px solid #E8E8E8 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    padding: 0 !important;
    height: 48px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    position: relative !important;
}

/* ── Filter toggle button ── */
.shop-toolbar__filter {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid #E8E8E8 !important;
    padding: 0 20px !important;
    height: 100% !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    color: #444 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
}

.shop-toolbar__filter::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 20px !important;
    right: 20px !important;
    height: 2px !important;
    background: transparent !important;
    border-radius: 2px 2px 0 0 !important;
    transition: background 0.2s ease !important;
}

.shop-toolbar__filter:hover {
    color: #FF6B35 !important;
    background: transparent !important;
}

.shop-toolbar__filter:hover::after {
    background: #FF6B35 !important;
}

.shop-toolbar__filter i {
    font-size: 16px !important;
    color: #FF6B35 !important;
    transition: transform 0.2s ease !important;
}

.shop-toolbar__filter:hover i {
    transform: rotate(90deg) !important;
}

/* Active state when filter is open */
.ps-layout--shop .ps-layout__left.active ~ .ps-layout__right .shop-toolbar__filter,
.shop-toolbar__filter.is-active {
    color: #FF6B35 !important;
    background: #FFF8F5 !important;
}

.ps-layout--shop .ps-layout__left.active ~ .ps-layout__right .shop-toolbar__filter::after,
.shop-toolbar__filter.is-active::after {
    background: #FF6B35 !important;
}

.ps-layout--shop .ps-layout__left.active ~ .ps-layout__right .shop-toolbar__filter i,
.shop-toolbar__filter.is-active i {
    color: #FF6B35 !important;
    transform: rotate(90deg) !important;
}

/* ── Products found count ── */
.shop-toolbar__count {
    padding: 0 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #999 !important;
    white-space: nowrap !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 0.2px !important;
}

.shop-toolbar__count strong {
    color: #FF6B35 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    margin-right: 5px !important;
}

/* ── Right side (sort + grid/list) ── */
.shop-toolbar__right {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    height: 100% !important;
    gap: 0 !important;
}

/* ── Sort dropdown ── */
.shop-toolbar__right .ps-select-shop-sort + .select2-container {
    min-width: 170px !important;
}

.ps-select-shop-sort + .select2-container .select2-selection--single {
    background: transparent !important;
    border: none !important;
    border-left: 1px solid #E8E8E8 !important;
    border-radius: 0 !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #555 !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.ps-select-shop-sort + .select2-container .select2-selection--single:hover {
    color: #FF6B35 !important;
    background: #FFF8F5 !important;
}

.ps-select-shop-sort + .select2-container .select2-selection__rendered {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: inherit !important;
    padding: 0 !important;
    line-height: 48px !important;
}

.ps-select-shop-sort + .select2-container .select2-selection__arrow {
    height: 100% !important;
    right: 12px !important;
}

.ps-select-shop-sort + .select2-container .select2-selection__arrow b {
    border-color: #CCC transparent transparent transparent !important;
    transition: border-color 0.2s ease !important;
}

.ps-select-shop-sort + .select2-container:hover .select2-selection__arrow b {
    border-color: #FF6B35 transparent transparent transparent !important;
}

/* ── Grid / List toggle ── */
.shop-toolbar__layout {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 4px !important;
    height: 100% !important;
    border-left: 1px solid #E8E8E8 !important;
    gap: 2px !important;
}

.shop-toolbar__layout li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: #CCC !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.shop-toolbar__layout li a:hover {
    color: #FF6B35 !important;
    background: #FFF8F5 !important;
}

.shop-toolbar__layout li.active a {
    color: #fff !important;
    background: #FF6B35 !important;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3) !important;
}

.shop-toolbar__layout li a i {
    font-size: 15px !important;
}

/* ── Tablet ── */
@media (max-width: 991px) {
    .shop-toolbar__count {
        display: none !important;
    }
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .shop-toolbar {
        height: 42px !important;
    }

    .shop-toolbar__filter {
        padding: 0 14px !important;
        font-size: 11px !important;
        letter-spacing: 0.4px !important;
    }

    .shop-toolbar__filter i {
        font-size: 14px !important;
    }

    .shop-toolbar__layout {
        padding: 0 2px !important;
    }

    .shop-toolbar__layout li a {
        width: 32px !important;
        height: 32px !important;
    }

    .ps-select-shop-sort + .select2-container .select2-selection--single {
        height: 42px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    .ps-select-shop-sort + .select2-container .select2-selection__rendered {
        line-height: 42px !important;
        font-size: 12px !important;
    }
}