/**
 * Scherzo custom product filters ([scherzo_filters]).
 * Faceted sidebar: collapsible groups of checkboxes for categories, composers
 * and attributes. Instrument Sans + brand red, flat/square inputs to match the
 * rest of the store. Pairs with the Elementor Products widget it filters.
 */

.scherzo-filters {
    font-family: "Instrument Sans", sans-serif;
    color: #202020;
}

/* ---- Top bar: result count + clear ---- */
.scherzo-filters__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 6px;
}
.scherzo-filters__count {
    font-size: 13px;
    color: #9C9C9C;
}
.scherzo-filters__clear {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0;
    font: inherit;
    font-size: 13px;
    color: #9B090D !important;
    text-decoration: underline;
    cursor: pointer;
}
.scherzo-filters__clear:hover { color: #8B0000 !important; }

/* ---- Facet group ---- */
.scherzo-filters__group {
    border-bottom: 1px solid #EFEFEF;
}
.scherzo-filters__group:last-child { border-bottom: 0; }
/* No options left after cross-filtering → hide heading and all. */
.scherzo-filters__group.is-empty { display: none; }

.scherzo-filters__heading {
    padding: 0px 0 15px;
    font-size: 22px;
    line-height: 1.3;
    color: #202020;
}

/* ---- Group body ---- */
.scherzo-filters__body {
    padding: 0 0 14px;
}

.scherzo-filters__search {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    color: #202020;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 0;
}
.scherzo-filters__search:focus {
    outline: none;
    border-color: #9C9C9C;
}

.scherzo-filters__options {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}
/* Slim scrollbar for long lists (composers). */
.scherzo-filters__options::-webkit-scrollbar { width: 6px; }
.scherzo-filters__options::-webkit-scrollbar-thumb { background: #E5E5E5; }

.scherzo-filters__option { margin: 0; }
/* Hidden by the option search, or by cross-filter availability. */
.scherzo-filters__option.is-filtered-out,
.scherzo-filters__option.is-unavailable { display: none; }
.scherzo-filters__option > label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #676767;
    cursor: pointer;
}
.scherzo-filters__option > label:hover { color: #202020; }

/* Square, brand-red checkbox without relying on theme button styles. */
.scherzo-filters__checkbox {
    flex: 0 0 auto;
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    background: #fff;
    border: 1px solid #979797 !important;
    border-radius: 0;
    cursor: pointer;
    position: relative;
}
.scherzo-filters__checkbox:checked {
    background: #9B090D;
    border-color: #9B090D !important;
}
.scherzo-filters__checkbox:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.scherzo-filters__checkbox:focus-visible {
    outline: 2px solid #9B090D;
    outline-offset: 2px;
}

/* Empty state injected into the products grid. */
.scherzo-filters__empty {
    list-style: none;
    width: 100%;
    padding: 0px 0;
    color: #202020;
    font-family: "Instrument Sans", sans-serif;
    font-size: 20px;
}

/* AJAX pagination — inherits the theme's .woocommerce-pagination styling;
   just give it breathing room and a clickable cursor. */
.scherzo-filters__pagination {
    margin-top: 24px;
}
.scherzo-filters__pagination a.page-numbers { cursor: pointer; }

/* ===== Responsive ===== */
@media (max-width: 1199px) {
    .scherzo-filters__heading { font-size: 20px; padding: 0px 0 12px; }
    .scherzo-filters__empty { font-size: 18px;}
}
@media (max-width: 1024px) {
    .scherzo-filters__heading { font-size: 17px; padding: 0px 0 12px; }
    .scherzo-filters__option > label { font-size: 15px; }
        .scherzo-filters__empty { font-size: 17px;}
}
@media (max-width: 600px) {
    .scherzo-filters__heading { font-size: 16px; padding: 0px 0 10px; }
    .scherzo-filters__option > label { font-size: 15px; padding: 8px 0; }
    .scherzo-filters__checkbox { width: 20px; height: 20px; }
    .scherzo-filters__checkbox:checked::after { left: 6px; top: 2px; }
    .scherzo-filters__empty { font-size: 16px;}
}

/* ===== Mobile filter drawer (≤767px) ===== */
/* Trigger — a fixed icon tab on the left edge, a little above centre, so it's
   always reachable. Hardened with !important because the theme styles every
   <button> brand-red on its own. */
.scherzo-ff-trigger {
    position: fixed;
    left: 0;
    top: 38%;
    z-index: 99997;
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    color: #fff !important;
    background: #9B090D !important;
    border: 0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
    cursor: pointer;
}
.scherzo-ff-trigger:hover { background: #8B0000 !important; }
.scherzo-ff-trigger svg { display: block; }
.scherzo-ff-trigger__count { display: none; }
.scherzo-ff-trigger__count.has {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #fff;
    color: #9B090D;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.scherzo-ff-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    z-index: 99998;
}
.scherzo-ff-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 86%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    background: #fff;
    transform: translateX(-100%);
    transition: transform .28s ease;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    z-index: 99999;
}
body.scherzo-ff-open { overflow: hidden; }
body.scherzo-ff-open .scherzo-ff-overlay { opacity: 1; visibility: visible; }
body.scherzo-ff-open .scherzo-ff-drawer { transform: translateX(0); }

.scherzo-ff-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #EFEFEF;
    font-family: "Instrument Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #202020;
}
.scherzo-ff-drawer__close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 -8px 0 0;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: "Instrument Sans", sans-serif;
    font-size: 28px !important;
    font-weight: 400;
    line-height: 1 !important;
    color: #202020 !important;
    cursor: pointer;
    transition: color .15s ease;
}
.scherzo-ff-drawer__close:hover { color: #9B090D !important; }
.scherzo-ff-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px;
}
.scherzo-ff-drawer__foot {
    padding: 16px 20px;
    border-top: 1px solid #EFEFEF;
}
.scherzo-ff-drawer__apply {
    width: 100%;
    padding: 14px;
    background: #9B090D !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: "Instrument Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.scherzo-ff-drawer__apply:hover { background: #8B0000 !important; }

/* Inside the drawer the facets + category tree fill the width. */
.scherzo-ff-drawer .scherzo-filters,
.scherzo-ff-drawer .scherzo-cat-tree { margin: 0 0 10px; }

@media (max-width: 767px) {
    body.scherzo-ff-trigger-on .scherzo-ff-trigger { display: flex; }
    /* Hide the tab while the drawer is open (Show results / × / backdrop close it). */
    body.scherzo-ff-trigger-on.scherzo-ff-open .scherzo-ff-trigger { display: none; }
}
/* Belt-and-braces: never show the mobile chrome on desktop. */
@media (min-width: 768px) {
    .scherzo-ff-trigger,
    .scherzo-ff-drawer,
    .scherzo-ff-overlay { display: none !important; }
}