/************************************ 1024px *************************************/

@media (min-width: 0px) and (max-width: 1024px) {}





/************************************ 768px **************************************/

@media (min-width: 0px) and (max-width: 768px) {


    /***********
    show title above filters for mobile,
    show filter-button,
    *********/

    .products-wrapper h1.products-title {
        display: none;
    }

    .show-mobile {
        display: block;
    }

    .active-facets.show-mobile {
        display: flex;
    }

    

    /***************** adjust filters wrapper to full-width ************/

    .products {
        flex-direction: column;
    }

    .filters-wrapper {
        width: 100%;
        margin: 0;
        margin-bottom: 24px;
    }

    .products-wrapper {
        width: 100%
    }

    /************* hide filters to the left, slide in from left *************/

    #filters {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 75%;
        min-width: 272px;
        background: #fff;
        box-shadow: 0 2px 6px 0 rgba(38, 82, 104, 0.10), 0 8px 24px 0 rgba(22, 60, 92, 0.26);
        padding: 48px 0;
        left: -100%;
        transition: 0.35s ease;
        z-index: 999;
    }

    #filters.filters-toggle {
        left: 0;
    }

    /********************** filter overlay bg ********************/

    .filters-overlay-background.filters-toggle {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(154, 171, 179, 0.40);
        transition: 0.35s ease;
        z-index: 999;
    }

    /********************* scrollable filters *****************/

    .filters-content {
        height: 100%;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        padding: 16px 12px 0 12px;
    }

    /************* no max-height for filters, to prevent double scroll ***********/

    .filter-panel {
        max-height: none;
    }

    .filter ul.facets-list {
        max-height: none;
    }

    
    /*************** filters-heading, footer ********************/
    .filters-heading {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 12px 12px 12px 44px;
        font-size: 16px;
        color: #003247;
        letter-spacing: -0.45px;
        line-height: 24px;
        font-weight: 600;
        background: #fff url(/assets/icons/icon-filter-darkgrey-16.svg) 12px center no-repeat;
        border-bottom: 1px solid #C7D2D9;
    }

    .filters-heading .close-icon {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 48px;
        background: transparent url(/assets/icons/icon-cancel-darkgrey-16.svg) center center no-repeat;
    }

    .filters-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 12px;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: -0.45px;
        text-align: center;
        line-height: 24px;
        font-weight: 600;
        background: #0092D2;
    }


}