/* UNIFIED SIDEBAR COLLAPSIBILITY FIX */
/* Ensures ALL sidebar filters are collapsible on mobile AND tablet (768px-1200px) */

/* DEBUG HELPER - DISABLED for production */
/* Debug styling removed to fix visual appearance */

/* Mobile range - ALL sidebar sections hidden by default */
@media (max-width: 767.98px) {
    .sidebar .listbox {
        display: none !important;
    }

    .sidebar .block.block-newsletter .listbox {
        display: block !important;
    }

    /* Mobile main titles with grey-black background */
    .sidebar .block .title.main-title {
        background: var(--grey-black) url("../images/toggle-down-arrow.png") no-repeat right center !important;
        color: #fff !important;
    }

    /* Mobile expanded state for main titles */
    .sidebar .block .title.main-title.arrow-up-down {
        background: var(--grey-black) url("../images/toggle-up-arrow.png") no-repeat right center !important;
        color: #fff !important;
    }
}

/* CRITICAL FIX: Bridge the 768px gap - Extend mobile behavior */
@media (min-width: 768px) and (max-width: 1200px) {
    /* Force ALL sidebar content hidden by default - extending mobile behavior */
    /* SIMPLIFIED: Use only display for easier JavaScript control */
    .sidebar .listbox,
    .sidebar .block .listbox,
    .sidebar .block .filter-content,
    .box-shadow-wrapper .listbox,
    .box-shadow-wrapper .filter-content,
    /* Additional specific selectors for problematic containers */
    .block-category-navigation .listbox,
    .block-recently-viewed-products .listbox {
        display: none !important;
    }

    /* Allow JavaScript inline styles to override CSS */
    .sidebar .listbox[style*="display: block"],
    .sidebar .block .listbox[style*="display: block"],
    .sidebar .block .filter-content[style*="display: block"],
    .box-shadow-wrapper .listbox[style*="display: block"],
    .box-shadow-wrapper .filter-content[style*="display: block"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Exception: Newsletter signup should remain visible */
    .sidebar .block.block-newsletter .listbox {
        display: block !important;
    }

    /* Force ALL sidebar titles to be clickable - extending mobile behavior */
    .sidebar .title,
    .sidebar .block .title,
    .box-shadow-wrapper .title,
    .box-shadow-wrapper .block .title {
        background: url("../images/toggle-down-arrow.png") no-repeat var(--red) right center !important;
        font-size: 16px !important;
        padding: 15px !important;
        padding-right: 60px !important;
        cursor: pointer !important;
        border-bottom: 1px solid #ddd !important;
        box-shadow: 0 -3px 5px #aaaaaa !important;
        -moz-box-shadow: 0 -3px 5px #aaa !important;
        -webkit-box-shadow: 0 -3px 5px #aaaaaa !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Main titles (Categories, Recently Viewed) with grey-black background */
    .sidebar .block .title.main-title,
    .block.box-shadow-wrapper .title.main-title {
        background: var(--grey-black) url("../images/toggle-down-arrow.png") no-repeat right center !important;
        color: #fff !important;
        font-size: 16px !important;
        padding: 15px !important;
        padding-right: 60px !important;
        cursor: pointer !important;
        border-bottom: 1px solid #ddd !important;
        box-shadow: 0 -3px 5px #aaaaaa !important;
        -moz-box-shadow: 0 -3px 5px #aaa !important;
        -webkit-box-shadow: 0 -3px 5px #aaaaaa !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Force expanded state styling - extending mobile behavior */
    .sidebar .title.arrow-up-down,
    .sidebar .block .title.arrow-up-down,
    .box-shadow-wrapper .title.arrow-up-down,
    .box-shadow-wrapper .block .title.arrow-up-down {
        background: url("../images/toggle-up-arrow.png") no-repeat var(--red) right center !important;
    }

    /* Expanded state for main titles with grey-black background */
    .sidebar .block .title.main-title.arrow-up-down,
    .block.box-shadow-wrapper .title.main-title.arrow-up-down {
        background: var(--grey-black) url("../images/toggle-up-arrow.png") no-repeat right center !important;
        color: #fff !important;
    }
}

/* Layout fixes for tablet range */
@media (min-width: 768px) and (max-width: 1200px) {
    /* Reset sidebar blocks to single column for better mobile-like behavior */
    .sidebar .block {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        margin-bottom: 10px !important;
        clear: both !important;
    }

    /* Reset box-shadow-wrapper to single column as well */
    .box-shadow-wrapper {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        margin-bottom: 10px !important;
        clear: both !important;
    }

    /* Ensure proper spacing and styling for listbox content */
    .sidebar .block .listbox,
    .box-shadow-wrapper .listbox {
        border: 1px solid #ddd !important;
        background: #fff !important;
        margin-top: 0 !important;
        border-top: none !important;
    }

    /* Ensure sidebar container behaves properly */
    .side-2,
    .sidebar {
        clear: both !important;
        width: 100% !important;
    }
}

/* Desktop range (1201px+) - Grey-black main titles */
@media (min-width: 1201px) {
    /* Desktop main titles with grey-black background */
    .sidebar .block .title.main-title {
        background: var(--grey-black) !important;
        color: #fff !important;
    }

    /* Desktop expanded state for main titles (if collapsible behavior is enabled) */
    .sidebar .block .title.main-title.arrow-up-down {
        background: var(--grey-black) !important;
        color: #fff !important;
    }
}