.ap-filter-toolbar {
    width: 100%;
    margin: 0 0 1rem;
}
.ap-filter-open {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid #222;
    background: #fff;
    color: #111;
    padding: .55rem 1rem;
    min-height: 44px;
    border-radius: 6px;
    font-size: 1rem;
}
.ap-filter-count {
    display: inline-flex;
    min-width: 1.4rem;
    height: 1.4rem;
    align-items: center;
    justify-content: center;
    background: #c62828;
    color: #fff;
    border-radius: 999px;
    font-size: .8rem;
}
.ap-filter-backdrop {
    display: none;
}
.ap-filter-close {
    min-height: 44px;
    min-width: 44px;
    margin: .5rem .5rem .75rem auto;
    display: none;
}
.ap-pending-specs {
    background: #fff8e1;
    border: 1px solid #ffe082;
    padding: .75rem 1rem;
    margin: .75rem 0;
    border-radius: 6px;
}

@media (max-width: 991.98px) {
    .ap-filter-backdrop.is-on {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 3490;
    }
    .product-aside#apFilterDrawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(92vw, 380px);
        max-width: 100%;
        margin: 0;
        z-index: 3500;
        background: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(110%);
        transition: transform .25s ease;
        box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
        padding: .5rem .75rem 2rem;
    }
    .product-aside#apFilterDrawer.is-open {
        transform: translateX(0);
    }
    .ap-filter-close {
        display: block;
    }
    body.ap-filter-locked {
        overflow: hidden;
        touch-action: none;
    }
}

@media (min-width: 992px) {
    .ap-filter-toolbar,
    .ap-filter-backdrop,
    .ap-filter-close {
        display: none !important;
    }
    .product-aside#apFilterDrawer {
        position: static;
        transform: none;
        box-shadow: none;
        overflow: visible;
    }
}
