/* More Filters drawer — black / white / orange (FruitShop brand) */

.mf-drawer--ref .mf-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #0a0a0a;
    border-bottom: 3px solid #ff6b00;
    flex-shrink: 0;
}

.mf-drawer--ref .mf-header-top {
    display: contents;
}

.mf-drawer--ref .mf-title {
    order: 1;
    color: #ffffff;
    font-family: 'Figtree', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.mf-drawer--ref .mf-search-wrap {
    order: 2;
    flex: 1;
    min-width: 0;
}

.mf-drawer--ref .mf-search {
    height: 34px;
    background: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.78rem;
    color: #1a1a1a;
    box-shadow: none;
}

.mf-drawer--ref .mf-search::placeholder {
    color: #888;
}

.mf-drawer--ref .mf-search:focus {
    border-color: #ff6b00;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.25);
}

.mf-drawer--ref .mf-search-icon {
    color: #888;
}

.mf-drawer--ref .mf-close {
    order: 3;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ffffff;
    flex-shrink: 0;
}

.mf-drawer--ref .mf-close:hover {
    background: rgba(255, 107, 0, 0.2);
    border-color: rgba(255, 107, 0, 0.4);
    color: #fff;
}

/* Active filter chips */
.mf-drawer--ref .mf-active-chips {
    padding: 10px 14px 8px;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e3;
    gap: 8px;
}

.mf-drawer--ref .mf-chip {
    background: #ff6b00;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 10px 5px 12px;
    border-radius: 999px;
}

.mf-drawer--ref .mf-chip:hover {
    background: #c94e00;
}

/* Accordion list */
.mf-drawer--ref .mf-body {
    background: #f7f7f5;
}

.mf-drawer--ref .mf-section {
    border-bottom: 1px solid #e5e5e3;
    margin: 0;
}

.mf-drawer--ref .mf-section-head {
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: #ffffff;
    font-family: 'Figtree', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    color: #1a1a1a;
    border: none;
}

.mf-drawer--ref .mf-section-head:hover {
    background: #fff4ec;
}

.mf-drawer--ref .mf-section-head .mf-chev {
    order: -1;
    color: #ff6b00;
    transform: rotate(-90deg);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.mf-drawer--ref .mf-section--open .mf-section-head .mf-chev {
    transform: rotate(0deg);
}

.mf-drawer--ref .mf-section--open .mf-section-head {
    background: #fff4ec;
    color: #1a1a1a;
}

.mf-drawer--ref .mf-section-head-left {
    flex: 1;
}

.mf-drawer--ref .mf-section-badge {
    background: #ff6b00;
    color: #fff;
    font-size: 0.62rem;
}

.mf-drawer--ref .mf-section-body {
    background: #ffffff;
    padding: 14px 16px 16px;
    border-top: 1px solid #eeeeec;
}

/* Checkboxes & chips inside drawer */
.mf-drawer--ref .mf-check-item--on .mf-checkbox {
    background: #ff6b00;
    border-color: #ff6b00;
}

.mf-drawer--ref .mf-chip-opt--on {
    background: #ff6b00;
    border-color: #ff6b00;
    color: #fff;
}

.mf-drawer--ref .mf-chip-opt:hover {
    border-color: #ff6b00;
    color: #ff6b00;
}

/* Footer */
.mf-drawer--ref .mf-footer {
    padding: 14px 16px;
    background: #ffffff;
    border-top: 1px solid #e5e5e3;
}

.mf-drawer--ref .mf-clear-btn {
    color: #1a1a1a;
    font-weight: 700;
}

.mf-drawer--ref .mf-clear-btn:hover {
    color: #ff6b00;
}

.mf-drawer--ref .mf-apply-btn {
    background: linear-gradient(135deg, #ff6b00, #ff8c33);
    border-radius: 10px;
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
}

.mf-drawer--ref .mf-apply-btn:hover {
    background: linear-gradient(135deg, #c94e00, #ff6b00);
}

/* Drawer panel */
.mf-drawer--ref.mf-drawer {
    width: min(420px, 100vw);
    background: #ffffff;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.22);
}

.mf-backdrop--ref.mf-backdrop--open {
    background: rgba(0, 0, 0, 0.55);
}

@media (max-width: 600px) {
    .mf-drawer--ref.mf-drawer {
        width: 100vw;
        border-radius: 0;
    }
}

/* Prefer mf sidebar over legacy bottom filter sheet on mobile */
@media (max-width: 900px) {
    #plFilterDrawer.pl-filter-drawer,
    #plDrawerOverlay.pl-filter-drawer-overlay {
        display: none !important;
    }
}