/* Mobile / tablet: use overlay up to 980px */
@media (max-width: 980px) {

    body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container {
        padding-top: 30px !important;

    }
    /* Make the content area a flex container so we can re-order its children */
    #content-area {
        display: flex;
        flex-direction: column;
    }

    /* Move the sidebar (with the filter button) above #left-area */
    #content-area #sidebar {
        order: -1; /* sidebar first */
    }
    #content-area #sidebar .widget_block {
        width: 140px;
    }

    #content-area #sidebar .widget_block,
    button.wc-block-product-filters__close-overlay {
        margin-bottom: 0;
        border-radius: 5px;
        background-color: #e0e0e0;
        padding: 7px 5px;
        font-size: 16px;
        font-weight: 500;
    }


    #content-area #sidebar .widget_block:hover,
    button.wc-block-product-filters__close-overlay:hover {
        cursor: pointer;
        background-color: #e9e9e9;
    }

    button.wc-block-product-filters__open-overlay:hover,
    button.wc-block-product-filters__close-overlay:hover{
        cursor: pointer;
    }


    #content-area #left-area {
        order: 0;  /* products second */
    }

    /* Re-enable the mobile controls (desktop CSS hides these) */
    .wc-block-product-filters .wc-block-product-filters__open-overlay,
    .wc-block-product-filters .wc-block-product-filters__overlay-footer,
    .wc-block-product-filters .wc-block-product-filters__overlay-header,
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__open-overlay,
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-footer,
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-header {
        display: flex !important;
    }

    /* Put the overlay back into fixed, off-canvas mode (desktop CSS makes it a sidebar) */
    .wc-block-product-filters .wc-block-product-filters__overlay,
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
        position: fixed !important;
        inset: 0 !important;
        top: var(--top-padding);
        background-color: transparent;
        pointer-events: none;
        transition: background-color .5s;
    }

    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay {
        background-color: rgba(95, 95, 95, .35);
        pointer-events: auto;
        z-index: 999999;
    }

    .wc-block-product-filters .wc-block-product-filters__overlay-wrapper,
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-wrapper {
        height: 100% !important;
        width: 100% !important;
    }

    .wc-block-product-filters .wc-block-product-filters__overlay-dialog,
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
        background-color: #fff;
        position: absolute !important;
        inset: 0;
        max-height: 100%;
        transform: translateY(100vh) !important;
        transition: none;
    }

    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-dialog {
        transform: translateY(0) !important;
        transition: transform .5s;
    }

    .wc-block-product-filters .wc-block-product-filters__overlay-content,
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: var(--wc-product-filter-block-spacing, var(--wp--style--block-gap, 1.2rem));
        overflow-y: scroll !important;
        padding: 0 var(--wp--preset--spacing--40) !important;
    }

    .wc-block-product-filters .wc-block-product-filters__overlay-content .wp-block-group {
        display: block;
    }

    .wc-block-product-filters .wc-block-product-filters__overlay-content .wp-block-group > div {
        margin: 20px 0;
    }

}

/* Mobile: allow filters to wrap into multiple rows */
@media (max-width: 980px) {

    /* The overlay content container must allow wrapping */
    .wc-block-product-filters .wc-block-product-filters__overlay-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start;
        gap: 1rem; /* optional */
    }

    /* These should stay full-width (search, sort, heading, chips) */
    .wc-block-product-filters .wc-block-product-filters__overlay-content > form,
    .wc-block-product-filters .wc-block-product-filters__overlay-content > .woocommerce,
    .wc-block-product-filters .wc-block-product-filters__overlay-content > h2,
    .wc-block-product-filters .wc-block-product-filters__overlay-content > .wp-block-woocommerce-product-filter-active {
        flex: 0 0 100% !important;
    }

    /* All filter blocks get half-width → forces wrapping to next line */
    .wc-block-product-filters .wc-block-product-filters__overlay-content > .wp-block-woocommerce-product-filter-price,
    .wc-block-product-filters .wc-block-product-filters__overlay-content > .wp-block-woocommerce-product-filter-attribute {
        flex: 0 0 30% !important;
        box-sizing: border-box;
        border-top: 1px solid black;
        padding-top: 7px;

    }

    /* Shrink price slider inside its half-width card */
    .wc-block-product-filters .wp-block-woocommerce-product-filter-price-slider .wc-block-product-filter-price-slider__content {
        max-width: 90%;
        margin: 0 auto;
    }
}

/* Desktop: only from 981px and up should it behave like a sidebar */
@media (min-width: 981px) {
    .et_left_sidebar #sidebar {
        order: 0; /* restore Divi default */
    }
    .wc-block-product-filters,
    .wc-block-product-filters.is-overlay-opened {
        display: flex !important;
    }

    .wc-block-product-filters .wc-block-product-filters__open-overlay,
    .wc-block-product-filters .wc-block-product-filters__overlay-footer,
    .wc-block-product-filters .wc-block-product-filters__overlay-header,
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__open-overlay,
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-footer,
    .wc-block-product-filters.is-overlay-opened .wc-block-product-filters__overlay-header {
        display: none !important;
    }
}