/* Product category filter: AJAX loading state + mobile side drawer (see assets/js/product-filter.js) */

.woocommerce-products-wrapper ul.products,
.woocommerce-products-wrapper .woocommerce-pagination,
.woocommerce-products-wrapper .woocommerce-no-products-found {
    transition: opacity .2s;
}
.woocommerce-products-wrapper.loading ul.products,
.woocommerce-products-wrapper.loading .woocommerce-pagination,
.woocommerce-products-wrapper.loading .woocommerce-no-products-found {
    opacity: .4;
    pointer-events: none;
}

.woocommerce-products-wrapper .woocommerce-products-filter .filter-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.woocommerce-products-wrapper .woocommerce-products-filter .filter-overlay,
.woocommerce-products-wrapper .woocommerce-products-filter .filter-close {
    display: none;
}

@media (max-width: 991.98px) {
    /* "overflow-x: hidden" on html/body (base/_base.scss) turns body into a scroll container,
       which breaks position: sticky. "clip" crops the same way without that side effect. */
    @supports (overflow-x: clip) {
        html,
        body {
            overflow-x: clip;
        }
    }

    /* Sticky "Filters" button */
    .woocommerce-products-wrapper .woocommerce-products-filter {
        position: -webkit-sticky;
        position: sticky;
        top: var(--filter-sticky-top, 0px);
        z-index: 100;
        transition: z-index 0s linear .3s;
    }
    /* Lift above the fixed header while the drawer is open. The header gets the max z-index
       from Customizer "Additional CSS"; the filter comes later in the DOM, so equal z-index wins. */
    .woocommerce-products-wrapper .woocommerce-products-filter.active {
        z-index: 2147483647;
        transition: none;
    }
    .woocommerce-products-wrapper .woocommerce-products-filter .filter-toggle {
        box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    }

    /* Side drawer */
    .woocommerce-products-wrapper .woocommerce-products-filter .form-products-filter,
    .woocommerce-products-wrapper .woocommerce-products-filter.active .form-products-filter {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 380px;
        height: 100%;
        background-color: #FFFFFF;
        z-index: 10001;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .3s ease, visibility 0s linear .3s;
    }
    .woocommerce-products-wrapper .woocommerce-products-filter.active .form-products-filter {
        transform: translateX(0);
        visibility: visible;
        transition: transform .3s ease, visibility 0s linear 0s;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .15);
    }
    .woocommerce-products-wrapper .woocommerce-products-filter .filter-top {
        display: flex;
        flex: 0 0 auto;
        padding: 15px 20px;
        border-bottom: 1px solid #f8f7f9;
    }
    .woocommerce-products-wrapper .woocommerce-products-filter .filter-top h2 {
        margin: 0;
    }
    .woocommerce-products-wrapper .woocommerce-products-filter .filter-attributes {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 20px;
    }
    .woocommerce-products-wrapper .woocommerce-products-filter .filter-bottom {
        flex: 0 0 auto;
        margin-top: 0;
        padding: 15px 20px;
        border-top: 1px solid #f8f7f9;
    }
    .woocommerce-products-wrapper .woocommerce-products-filter .filter-close {
        display: block;
    }
    .woocommerce-products-wrapper .woocommerce-products-filter .filter-close-icon {
        font-size: 32px;
        line-height: 1;
        padding: 0 5px;
        color: inherit;
        text-decoration: none;
    }
    .woocommerce-products-wrapper .woocommerce-products-filter .filter-close-button {
        width: 100%;
    }

    /* Overlay */
    .woocommerce-products-wrapper .woocommerce-products-filter .filter-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .4);
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility 0s linear .3s;
    }
    .woocommerce-products-wrapper .woocommerce-products-filter.active .filter-overlay {
        opacity: 1;
        visibility: visible;
        transition: opacity .3s, visibility 0s linear 0s;
    }

    body.filter-drawer-open {
        overflow: hidden;
    }
}