/* ==========================================================================
 * Shop filters — native shop/archive + faceted filter styles. Clean standalone
 * stylesheet for the native filter launch (FE Pro wpc- rules intentionally
 * omitted). Loaded after woocommerce.css by shop-filters.php, so it is the
 * authority for all .dr-shop / .dr-facet / .dr-cat / .dr-sfilter styles.
 * ========================================================================== */

/* ==========================================================================
   Shop Page Shared Styles
   ========================================================================== */

/* Hide any default breadcrumbs that appear before the shop layout */
.site-main > .woocommerce-breadcrumb,
.woocommerce > .woocommerce-breadcrumb {
    display: none;
}

/* Active Filters — inline in shop header */
.dr-active-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.dr-active-filters.is-hidden {
    display: none;
}

.dr-active-filters.is-visible {
    display: flex;
}

.dr-active-filters__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dr-slate-500);
    white-space: nowrap;
    padding-top: 0.375rem;
}

.dr-active-filters__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dr-active-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    background: var(--dr-primary-600);
    color: white;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.dr-active-filter__label {
    line-height: 1;
}

.dr-active-filter__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: background var(--dr-transition-fast);
}

.dr-active-filter__remove:hover {
    background: rgba(255, 255, 255, 0.3);
}

.dr-active-filter__remove .dr-icon {
    width: 12px;
    height: 12px;
}

/* Shop Products Grid */
.dr-shop-products {
    position: relative;
    min-height: 300px;
}

.dr-shop-products.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

.dr-shop-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    border-radius: 0.75rem;
}

.dr-shop-loading__spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--dr-slate-200);
    border-top-color: var(--dr-primary-600);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}




/* ==========================================================================
   Filter Everything Plugin - Nike-Style Sidebar Layout
   ========================================================================== */

/* Full-width shop wrapper */
.dr-shop-wrapper {
    width: 100%;
    background: var(--dr-slate-50);
    min-height: calc(100vh - var(--dr-header-height));
}

/* Remove container constraints for shop page */
.site-main:has(.dr-shop-wrapper),
.site-main .woocommerce:has(.dr-shop-wrapper) {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Shop Header Bar */
.dr-shop-wrapper .dr-shop-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.75rem 2rem 0.75rem 0;
    background: transparent;
    gap: 0.75rem;
}

.dr-shop-header__title {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    align-self: stretch; /* fill the row height, then center the heading text in it */
}

.dr-shop-header__heading {
    font-family: var(--dr-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dr-slate-900);
    margin: 0;
    line-height: 1.3;
}

.dr-shop-header__parent {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dr-slate-500);
    letter-spacing: 0.025em;
}

.dr-shop-header__count {
    font-weight: 400;
    color: var(--dr-slate-500);
}

/* Search heading hierarchy: a quiet "results for" label, the query TERM as the
   hero (a touch larger, bold, dark), then a smaller muted count. Sizes are em-
   relative to the heading so they ride the mobile heading-size overrides. The
   row baseline-aligns the text; the clear control centers on the line. */
.dr-shop-header__search {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem 0.4rem;
}
.dr-shop-header__search-label {
    font-size: 0.6em;
    font-weight: 500;
    color: var(--dr-slate-500);
}
.dr-shop-header__search-term {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--dr-slate-900);
    line-height: 1.1;
}
.dr-shop-header__search .dr-shop-header__count {
    font-size: 0.62em;
}
.dr-shop-header__search .dr-shop-header__clear-search {
    align-self: center;
}

/* Search-term clear button — appears next to the count on any search page,
   removing the query (keeping filter context in combo mode). */
.dr-shop-header__clear-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.375rem;
    border-radius: 9999px;
    color: var(--dr-slate-500);
    background: var(--dr-slate-100, #f1f5f9);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    vertical-align: middle;
}
.dr-shop-header__clear-search:hover,
.dr-shop-header__clear-search:focus-visible {
    background: var(--dr-slate-200, #e2e8f0);
    color: var(--dr-slate-900, #0f172a);
}
.dr-shop-header__clear-search .dr-icon {
    width: 1.125rem;
    height: 1.125rem;
}
@media (max-width: 1024px) {
    .dr-shop-header__clear-search {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* No-products empty state: removable chip list for combo search+filter. */
.dr-no-products__removals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}
.dr-no-products__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    background: var(--dr-slate-100, #f1f5f9);
    color: var(--dr-slate-700, #334155);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.dr-no-products__chip:hover,
.dr-no-products__chip:focus-visible {
    background: var(--dr-slate-200, #e2e8f0);
    color: var(--dr-slate-900, #0f172a);
}
.dr-no-products__chip .dr-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.dr-shop-header__actions {
    display: none;
}

/* Sort dropdown in header (hidden native select, used by JS) */
.dr-shop-header__sort .woocommerce-ordering {
    margin: 0;
}

.dr-shop-header__sort .orderby {
    padding: 0.5rem 2.25rem 0.5rem 0;
    background: transparent;
    border: none;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--dr-slate-700);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
}

.dr-shop-header__sort .orderby:focus {
    outline: none;
}

/* Sort Button + Dropdown - Visible at all sizes */
.dr-sort-mobile {
    display: block;
    position: relative;
}

.dr-sort-mobile__btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.5rem;
    box-sizing: border-box;
    padding: 0 1.1rem;
    background: transparent;
    border: 1px solid var(--dr-slate-300);
    border-radius: 2rem;
    font-family: var(--dr-font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    color: var(--dr-slate-700);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.dr-sort-mobile__btn:hover {
    border-color: var(--dr-slate-900);
    color: var(--dr-slate-900);
}

.dr-sort-mobile__btn .dr-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.dr-sort-mobile__btn .dr-icon:last-child {
    width: 12px;
    height: 12px;
    margin-left: -0.125rem;
    transition: transform 0.15s ease;
}

.dr-sort-mobile__btn[aria-expanded="true"] .dr-icon:last-child {
    transform: rotate(180deg);
}

/* Dropdown menu */
.dr-sort-mobile__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    min-width: 10rem;
    padding: 0.25rem 0;
    margin: 0;
    list-style: none;
    background: white;
    border: 1px solid var(--dr-slate-200);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: var(--dr-z-dropdown, 100);
}

.dr-sort-mobile__dropdown.is-open {
    display: block;
}

.dr-sort-mobile__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dr-slate-600);
    cursor: pointer;
    transition: background 0.1s ease;
}

.dr-sort-mobile__option:hover {
    background: var(--dr-slate-50);
    color: var(--dr-slate-900);
}

.dr-sort-mobile__option--active {
    color: var(--dr-slate-900);
    font-weight: 600;
}

.dr-sort-mobile__option .dr-icon {
    width: 14px;
    height: 14px;
    color: var(--dr-slate-900);
}


/* Filter Toggle - Visible at all sizes */
.dr-shop-header__filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    box-sizing: border-box;
    padding: 0 1.1rem;
    background: transparent;
    border: 1px solid var(--dr-slate-300);
    border-radius: 2rem;
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 500;
    color: var(--dr-slate-700);
    cursor: pointer;
    transition: all 0.15s ease;
}

.dr-shop-header__filter-toggle:hover {
    border-color: var(--dr-slate-900);
    color: var(--dr-slate-900);
}

.dr-shop-header__filter-toggle .dr-icon {
    width: 16px;
    height: 16px;
}

.dr-shop-header__filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: var(--dr-primary-600, #052460);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

/* ==========================================================================
   Shop Layout — Sidebar + Product Grid
   ========================================================================== */

.dr-shop-layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) 1fr;
    gap: 0 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 0 3rem 1.5rem;
    align-items: start;
}

.dr-shop-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Sidebar — desktop: sticky in grid; mobile: slide-out drawer */
.dr-shop-sidebar {
    /* Non-sticky, natural flow: the sidebar is a stack of card sections, not a
       scroll container. No position:sticky, no max-height/overflow. */
    align-self: start;
    min-width: 220px;
    padding: 0;
    margin: 1rem 0 0;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.dr-shop-sidebar::-webkit-scrollbar {
    width: 4px;
}

.dr-shop-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.dr-shop-sidebar::-webkit-scrollbar-thumb {
    background: var(--dr-slate-300);
    border-radius: 2px;
}

.dr-shop-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--dr-slate-400);
}

/* Each facet section is its own rounded card (reference-style). */
.dr-shop-sidebar .widget {
    background: #fff;
    border: 1px solid var(--dr-slate-200, #e2e8f0);
    border-radius: 14px;
    padding: 0.7rem 0.95rem;
    margin: 0;
    box-shadow: 0 1px 2px rgba(5, 36, 96, 0.03);
}
.dr-shop-sidebar .widgettitle,
.dr-shop-sidebar .dr-collapsible__toggle {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dr-slate-500, #64748b);
    margin: 0 0 0.6rem;
}
/* Collapsed section: no wasted space below the header. */
.dr-shop-sidebar .dr-collapsible:not(.dr-collapsible--open) .dr-collapsible__toggle {
    margin-bottom: 0;
}

.dr-shop-sidebar__header {
    display: none;
}

.dr-shop-sidebar__backdrop {
    display: none;
}

/* Sidebar close button (mobile drawer) */
.dr-shop-sidebar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-height: 36px;
    flex-shrink: 0;
    aspect-ratio: 1;
    background: transparent;
    border: 1px solid var(--dr-slate-200);
    border-radius: 50%;
    color: var(--dr-slate-500);
    cursor: pointer;
    transition: all var(--dr-transition-fast);
    padding: 0;
}

.dr-shop-sidebar__close:hover {
    background: var(--dr-slate-100);
    color: var(--dr-slate-800);
}

.dr-shop-sidebar__close svg {
    width: 18px;
    height: 18px;
}

.dr-shop-sidebar__title {
    font-family: var(--dr-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dr-slate-900);
    margin: 0;
}

/* Scroll lock when filter drawer is open on mobile */
body.filter-sidebar-open {
    overflow: hidden;
}

/* Smaller sidebar on small desktops */
@media (min-width: 1024px) and (max-width: 1279px) {
    .dr-shop-layout {
        grid-template-columns: minmax(220px, 240px) 1fr;
    }
}

/* Desktop: hide filter toggle + drawer chrome */
@media (min-width: 1024px) {
    .dr-shop-header__filter-toggle {
        display: none;
    }
}

/* Mobile: sidebar becomes slide-out drawer */
.dr-shop-sidebar__footer { display: none; }

/* ==========================================================================
   Mobile filter drawer — built FOR mobile, not the desktop sidebar ported into
   a narrow panel. Full-height panel offset below the admin bar; sticky header +
   footer around a scrolling body of flush, divided sections (no card borders
   jammed against the edges). Applied filters ride directly under the header.
   ========================================================================== */
@media (max-width: 1023px) {
    .dr-shop-layout {
        grid-template-columns: 1fr;
        padding: 0 1.5rem 3rem;
    }
    .dr-shop-right { grid-column: 1; }

    .dr-shop-sidebar {
        position: fixed;
        top: env(safe-area-inset-top, 0px);
        left: 0;
        /* Explicit height (not top+bottom+auto) so the panel is a reliable scroll
           container on mobile browsers. dvh handles the collapsing address bar. */
        height: calc(100vh - env(safe-area-inset-top, 0px));
        height: calc(100dvh - env(safe-area-inset-top, 0px));
        width: min(92vw, 420px);
        min-width: 0;
        max-height: none;
        z-index: 1000;
        /* Flex column so the footer can pin to the drawer bottom (margin-top:auto)
           even when the content is short, instead of floating mid-panel. */
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0;
        background: #fff;
        border: none;
        border-radius: 0;
        box-shadow: 6px 0 28px rgba(5, 36, 96, 0.16);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .dr-shop-sidebar.is-open { transform: translateX(0); visibility: visible; }

    /* Clear the WP admin bar (admins only) with a STABLE offset — not the
       scroll-dependent --dr-sticky-adminbar, which zeroes out and drops the
       drawer under the bar. The bar is 32px at 783-1023px, 46px at <=782px. */
    body.admin-bar .dr-shop-sidebar {
        top: 32px;
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
    }
    .dr-shop-sidebar::-webkit-scrollbar { width: 0; height: 0; }

    /* Sticky header — Filters title + close, always visible while scrolling */
    .dr-shop-sidebar__header {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 3;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 0.85rem 1.25rem;
        background: #fff;
        border-bottom: 1px solid var(--dr-slate-200);
    }
    .dr-shop-sidebar__title {
        margin: 0;
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--dr-slate-900);
    }
    .dr-shop-sidebar__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: var(--dr-slate-100);
        color: var(--dr-slate-600);
        cursor: pointer;
    }
    .dr-shop-sidebar__close svg { width: 18px; height: 18px; }

    /* Body sections: flush full-width rows with a divider + real side gutters,
       NOT individual bordered cards crammed against the panel edges. */
    .dr-shop-sidebar .widget,
    .dr-shop-sidebar > .dr-sfilters {
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 0.7rem 1.25rem;
        border-bottom: 1px solid var(--dr-slate-100);
    }
    .dr-shop-sidebar .dr-collapsible__toggle {
        min-height: 44px;
        padding: 0.5rem 0;
        font-size: 0.82rem;
    }
    /* Section chevrons get the same round-button treatment + position as the
       category chevrons, so every section's chevron lines up. */
    .dr-shop-sidebar .dr-collapsible__toggle svg {
        width: 16px;
        height: 16px;
        padding: 12px;
        box-sizing: content-box;
        flex: 0 0 auto;
        background: var(--dr-slate-50);
        border-radius: 50%;
        color: var(--dr-slate-500);
    }
    .dr-shop-sidebar .dr-collapsible:not(.dr-collapsible--open) .dr-collapsible__toggle {
        margin: 0;
    }

    /* Category drilldown on mobile: group header is the full-width toggle (chevron in
       its own round button); options are comfortable full-height selectable rows. */
    .dr-shop-sidebar .dr-cat-group {
        min-height: 48px;
        gap: 0.5rem;
        padding: 0.5rem 0;
    }
    .dr-shop-sidebar .dr-cat-group__chevron {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--dr-slate-50);
        color: var(--dr-slate-500);
    }
    .dr-shop-sidebar .dr-cat-group:active .dr-cat-group__chevron { background: var(--dr-slate-100); }
    .dr-shop-sidebar .dr-cat-group__chevron svg { width: 16px; height: 16px; }
    .dr-shop-sidebar .dr-cat-option {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Price has its own apply/clear on desktop; on mobile the footer is the single
       apply, so hide them (the inputs stay; the footer reads them). */
    .dr-shop-sidebar .dr-price-filter__apply,
    .dr-shop-sidebar .dr-price-filter__clear {
        display: none;
    }

    /* Applied-filters band sits right under the header, tinted so it reads as state */
    .dr-shop-sidebar > .dr-sfilters {
        background: var(--dr-slate-50);
        border-bottom: 1px solid var(--dr-slate-200);
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }

    /* Footer — Clear all + Apply. margin-top:auto pins it to the drawer bottom when
       content is short; sticky keeps it in view while scrolling a tall filter list. */
    .dr-shop-sidebar__footer {
        display: flex;
        position: sticky;
        bottom: 0;
        margin-top: auto;
        flex-shrink: 0;
        z-index: 3;
        align-items: center;
        gap: 0.75rem;
        margin: 0;
        padding: 0.8rem 1.25rem;
        padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--dr-slate-200);
    }
    .dr-shop-sidebar__footer-clear {
        flex: 0 0 auto;
        padding: 0.65rem 0.25rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--dr-slate-500);
        text-decoration: none;
    }
    .dr-shop-sidebar__footer-clear:hover { color: var(--dr-slate-800); }
    .dr-shop-sidebar__footer-done {
        flex: 1 1 auto;
        padding: 0.8rem 1rem;
        background: var(--dr-primary-600, #052460);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
    }
    .dr-shop-sidebar__footer-done:active { background: var(--dr-primary-700, #041d50); }

    /* Backdrop */
    .dr-shop-sidebar__backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(5, 36, 96, 0.35);
        z-index: 999;
    }
    .dr-shop-sidebar__backdrop.is-open { display: block; }
}

/* WP admin bar grows to 46px at <=782px — bump the drawer offset to match. */
@media (max-width: 782px) {
    body.admin-bar .dr-shop-sidebar {
        top: 46px;
        height: calc(100vh - 46px);
        height: calc(100dvh - 46px);
    }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.dr-shop-right > .woocommerce-pagination {
    display: flex;
    justify-content: center;
    padding: 2rem 2rem 3rem;
    border-top: 1px solid var(--dr-slate-200);
}

@media (max-width: 1023px) {
    .dr-shop-right > .woocommerce-pagination {
        padding: 1.5rem 0 2rem;
    }
}

.woocommerce-pagination ul.page-numbers {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: auto;
}

.woocommerce-pagination .page-numbers li {
    margin: 0;
}

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dr-slate-600);
    text-decoration: none;
    transition: all var(--dr-transition-fast);
}

.woocommerce-pagination a.page-numbers:hover {
    background: var(--dr-slate-100);
    color: var(--dr-slate-900);
}

.woocommerce-pagination span.page-numbers.current {
    background: var(--dr-slate-900);
    color: white;
    font-weight: 600;
}

.woocommerce-pagination a.prev,
.woocommerce-pagination a.next {
    background: var(--dr-slate-900);
    color: white;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
}

.woocommerce-pagination a.prev svg,
.woocommerce-pagination a.next svg {
    display: block;
}

.woocommerce-pagination a.prev:hover,
.woocommerce-pagination a.next:hover {
    background: var(--dr-slate-700);
    color: white;
}

.woocommerce-pagination span.dots {
    color: var(--dr-slate-400);
}

@media (max-width: 480px) {
    .woocommerce-pagination .page-numbers li:not(:first-child):not(:last-child):not(:has(.current)) {
        display: none;
    }

    .woocommerce-pagination .page-numbers li:has(.current),
    .woocommerce-pagination .page-numbers li:has(.current) + li,
    .woocommerce-pagination .page-numbers li:has(.prev),
    .woocommerce-pagination .page-numbers li:has(.next) {
        display: list-item;
    }
}

/* ==========================================================================
   Category Drilldown Navigation (PHP-rendered)
   ========================================================================== */
.dr-drilldown-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Drilldown link items */
.dr-drilldown-link {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.25rem 0.375rem 0.75rem;
    margin: 1px 0;
    border-radius: 0.375rem;
    text-decoration: none;
    color: var(--dr-slate-700);
    cursor: pointer;
    transition: all 0.15s ease;
}

.dr-drilldown-link:hover {
    background: rgba(66, 77, 91, 0.06);
    color: var(--dr-slate-900);
}

.dr-drilldown-link__name {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
}

.dr-drilldown-link__count {
    font-size: 0.75rem;
    color: var(--dr-slate-400);
    margin-left: 0.375rem;
    font-weight: 400;
}

/* Condition: inline button pair (New | Used) */
.dr-btn-group {
    display: flex;
    gap: 0.5rem;
}
.dr-btn-toggle {
    flex: 1 1 0;
    text-align: center;
    padding: 0.5rem 0.5rem;
    border: 1px solid var(--dr-slate-300, #cbd5e1);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dr-slate-700, #334155);
    text-decoration: none;
    background: #fff;
    transition: all 0.15s ease;
}
.dr-btn-toggle:hover {
    border-color: var(--dr-primary-600, #052460);
    color: var(--dr-primary-600, #052460);
}
.dr-btn-toggle--active {
    background: var(--dr-primary-600, #052460);
    border-color: var(--dr-primary-600, #052460);
    color: #fff;
}
/* No hover restyle while active — the generic :hover turns text navy, which vanishes
   against the navy active fill. Keep the active look on hover. */
.dr-btn-toggle--active:hover {
    color: #fff;
    border-color: var(--dr-primary-600, #052460);
}

/* Specials / In Stock Only: checkbox-style toggle links */
.dr-checkbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.dr-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.25rem;
    text-decoration: none;
    color: var(--dr-slate-700, #334155);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}
.dr-checkbox__box {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid var(--dr-slate-300, #cbd5e1);
    border-radius: 0.3rem;
    background: #fff;
    position: relative;
    transition: all 0.15s ease;
}
.dr-checkbox:hover .dr-checkbox__box {
    border-color: var(--dr-primary-600, #052460);
}
.dr-checkbox--on .dr-checkbox__box {
    background: var(--dr-primary-600, #052460);
    border-color: var(--dr-primary-600, #052460);
}
.dr-checkbox--on .dr-checkbox__box::after {
    content: "";
    position: absolute;
    left: 0.32rem;
    top: 0.14rem;
    width: 0.3rem;
    height: 0.55rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.dr-checkbox--on {
    color: var(--dr-primary-700, #041d4d);
    font-weight: 600;
}

/* Specials / In Stock: render as iOS-style toggle switches (reference look). */
.dr-toggles-filter-widget .dr-checkbox {
    justify-content: flex-start;
    gap: 0.6rem;
}
.dr-toggles-filter-widget .dr-checkbox__box {
    width: 2.15rem;
    height: 1.25rem;
    border-radius: 999px;
    border: none;
    background: var(--dr-slate-300, #cbd5e1);
}
.dr-toggles-filter-widget .dr-checkbox__box::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.95rem;
    height: 0.95rem;
    border: none;
    border-radius: 50%;
    background: #fff;
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}
.dr-toggles-filter-widget .dr-checkbox--on .dr-checkbox__box {
    background: var(--dr-primary-600, #052460);
}
.dr-toggles-filter-widget .dr-checkbox--on .dr-checkbox__box::after {
    transform: translateX(0.9rem);
}

/* Category filter — a single-select facet group. Top-level names are GROUP TOGGLES
   (expand/collapse, never links); the selectable options (All X + each subcategory)
   live inside the dropdown and read like facet rows with a full-width highlight. One
   category is active at a time; a pending (tapped, pre-Apply) choice takes the
   highlight, stepping the server-active one back until Apply commits. */
.dr-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Top-level group header = a toggle button. No navigation. */
.dr-cat-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    padding: 0.4rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dr-slate-700, #334155);
    text-align: left;
}
.dr-cat-group:hover { color: var(--dr-primary-600, #052460); }
.dr-cat-item--open > .dr-cat-group {
    font-weight: 700;
    color: var(--dr-slate-900, #0f172a);
}
.dr-cat-group__label { flex: 0 1 auto; min-width: 0; }
/* Selected option shown on the COLLAPSED group header (mirrors the facet "X selected"
   badge). Hidden while the group is open or when there's no selection. */
.dr-cat-group__selected {
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dr-cat-group__selected:empty { display: none; }
.dr-cat-item--open > .dr-cat-group .dr-cat-group__selected { display: none; }
.dr-cat-group__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--dr-slate-400, #94a3b8);
}
.dr-cat-group__chevron svg { width: 1rem; height: 1rem; transition: transform 0.15s ease; }
.dr-cat-item--open > .dr-cat-group .dr-cat-group__chevron svg { transform: rotate(180deg); }

/* Options container — NO horizontal padding, so an option's highlight spans the full
   width (the padding lives on the option itself, letting the fill extend past the label). */
.dr-cat-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
}
.dr-cat-item--open > .dr-cat-sublist {
    max-height: none;
    padding-bottom: 0.25rem;
}

/* Selectable option (All X, a subcategory, or a childless top-level) = facet-style row. */
.dr-cat-option {
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--dr-slate-600, #475569);
    text-decoration: none;
}
.dr-cat-option--solo {
    font-size: 0.85rem;
    color: var(--dr-slate-700, #334155);
}
.dr-cat-option:hover {
    background: var(--dr-slate-50, #f8fafc);
    color: var(--dr-primary-600, #052460);
}
/* Selected (active archive) or pending (tapped, pre-Apply): full-width tinted fill
   that extends past the label on both sides. */
.dr-cat-option--active,
.dr-cat-option--pending {
    background: var(--dr-primary-50, #eaf0fa);
    color: var(--dr-primary-600, #052460);
    font-weight: 700;
}
/* While a pending choice is staged, it owns the highlight and the server-active option
   steps back — so the selection visibly MOVES to the new pick. */
.dr-category-drilldown-widget.dr-cat-has-pending .dr-cat-option--active:not(.dr-cat-option--pending) {
    background: none;
    color: var(--dr-slate-600, #475569);
    font-weight: 500;
}

/* Category section label. */
.dr-cat-head-browse { display: block; }

/* Progressive category selector — tier dropdowns (top-level, then subcategory, then type). */
#dr-filter-dynamic { transition: opacity 0.15s ease; }
/* The swap wrapper holds the category selector + its facets as siblings, so the
   sidebar's flex gap can't reach between them — give the wrapper the same column
   gap on desktop so those cards don't touch. (Mobile keeps flush divider sections.) */
@media (min-width: 1024px) {
    #dr-filter-dynamic {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
    }
}
.dr-filter-dynamic--loading { opacity: 0.5; pointer-events: none; }
.dr-category-drilldown-widget .dr-cat-head { margin-bottom: 0.6rem; }
.dr-cat-tiers { display: flex; flex-direction: column; gap: 0.5rem; }
.dr-cat-tier { margin: 0; }
/* Match the site's canonical form-field styling (slate-50 fill, slate-200 border,
   0.5rem radius, sans face) with a navy brand focus ring — not browser-default selects. */
.dr-cat-select {
    width: 100%;
    padding: 0.8rem 2.5rem 0.8rem 1rem;
    font-family: var(--dr-font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--dr-slate-900, #0f172a);
    background-color: var(--dr-slate-50, #f8fafc);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    border: 1px solid var(--dr-slate-200, #e2e8f0);
    border-radius: 0.5rem;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
/* Keep the open dropdown's options readable — the selected/highlighted option gets
   white text on navy instead of the browser-default blue-on-blue. */
.dr-cat-select option {
    color: var(--dr-slate-900, #0f172a);
    background-color: #fff;
}
.dr-cat-select option:checked {
    color: #fff;
    background-color: var(--dr-primary-600, #052460);
}
.dr-cat-select:hover { border-color: var(--dr-slate-300, #cbd5e1); }
.dr-cat-select:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--dr-primary-600, #052460);
    box-shadow: 0 0 0 3px rgba(5, 36, 96, 0.12);
}
/* Desktop: tighter height (mobile keeps the roomier tap-target size above). */
@media (min-width: 1024px) {
    .dr-cat-select {
        padding: 0.5rem 2.25rem 0.5rem 0.85rem;
        font-size: 0.9rem;
    }
}

/* Drill-in takeover at EVERY level: opening a group hides its sibling groups (and the
   "All X" of the open branch stays, in .dr-cat-all). So selecting Pistols shows pistol
   types instead of Rifles/Shotguns; the open branch's chevrons collapse back out. */
.dr-cat-list:has(.dr-cat-item--open) > .dr-cat-item:not(.dr-cat-item--open),
.dr-cat-sublist:has(.dr-cat-item--open) > .dr-cat-item:not(.dr-cat-item--open) { display: none; }
/* Deeper levels step in slightly so the open breadcrumb reads as a hierarchy. */
.dr-cat-sublist .dr-cat-sublist { padding-left: 0.6rem; }

/* Fade the options down only on user interaction (JS adds .dr-cat-fade on open). */
.dr-cat-item--open > .dr-cat-sublist.dr-cat-fade {
    animation: drCatFadeDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}
@keyframes drCatFadeDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .dr-cat-item--open > .dr-cat-sublist.dr-cat-fade { animation: none; }
}

.dr-drilldown-link__chevron {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--dr-slate-400);
    border-bottom: 1.5px solid var(--dr-slate-400);
    transform: rotate(-45deg);
    margin-left: auto;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
}

.dr-drilldown-link:hover .dr-drilldown-link__chevron {
    border-color: var(--dr-slate-600);
}

/* Back link */
.dr-drilldown-back {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    color: var(--dr-slate-500);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.dr-drilldown-back:hover {
    background: rgba(66, 77, 91, 0.06);
    color: var(--dr-slate-700);
}

.dr-drilldown-back::before {
    content: '';
    width: 6px;
    height: 6px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* FE Pro widgets are not rendered — custom filter UI handles everything */

/* Brand search input */
.dr-brand-search {
    width: 100%;
    padding: 0.4375rem 0.625rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--dr-slate-200, #e2e8f0);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: var(--dr-slate-700);
    background: #fff;
    outline: none;
    transition: border-color 0.15s ease;
}

.dr-brand-search:focus {
    border-color: var(--dr-primary-500, #052460);
}

.dr-brand-search::placeholder {
    color: var(--dr-slate-400);
}

/* Brand list — scrollable when long */
/* Collapsible filter sections */
.dr-collapsible__toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

/* Collapsed-section selection indicator: multi facets show a count pill, single
   facets (range buckets, price) show the chosen value. Hidden while open. */
.dr-facet-selected {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    color: var(--dr-primary-700, #041d50);
}
.dr-facet-selected--count {
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.32rem;
    justify-content: center;
    background: var(--dr-primary-600, #052460);
    color: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
}
.dr-facet-selected--value {
    max-width: 9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dr-collapsible--open .dr-facet-selected { display: none; }

.dr-collapsible__toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.dr-collapsible--open .dr-collapsible__toggle svg {
    transform: rotate(180deg);
}

.dr-collapsible__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.dr-collapsible--open .dr-collapsible__body {
    max-height: 500px;
}

.dr-brand-list,
.dr-caliber-list,
.dr-facet-list {
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dr-slate-300) transparent;
    /* room so the last row clears the body's rounded clip */
    padding-bottom: 0.25rem;
}
/* Thin, styled scrollbar on WebKit/Blink (Windows Chrome/Edge default to a
   chunky ~17px inset bar that eats layout; scrollbar-width:thin covers Firefox
   and new Chrome only). Keeps the inner facet-list scroll unobtrusive on PC. */
.dr-brand-list::-webkit-scrollbar,
.dr-caliber-list::-webkit-scrollbar,
.dr-facet-list::-webkit-scrollbar { width: 6px; height: 6px; }
.dr-brand-list::-webkit-scrollbar-track,
.dr-caliber-list::-webkit-scrollbar-track,
.dr-facet-list::-webkit-scrollbar-track { background: transparent; }
.dr-brand-list::-webkit-scrollbar-thumb,
.dr-caliber-list::-webkit-scrollbar-thumb,
.dr-facet-list::-webkit-scrollbar-thumb {
    background: var(--dr-slate-300, #cbd5e1);
    border-radius: 3px;
}
.dr-brand-list::-webkit-scrollbar-thumb:hover,
.dr-caliber-list::-webkit-scrollbar-thumb:hover,
.dr-facet-list::-webkit-scrollbar-thumb:hover { background: var(--dr-slate-400, #94a3b8); }

/* ---- Multi-select facet rows (checkbox, no full-bar highlight) ---- */
.dr-facet-check-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.dr-facet-check {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 1.5px solid var(--dr-slate-300, #cbd5e1);
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.dr-facet-check-link.is-checked .dr-facet-check {
    background: var(--dr-primary-600, #052460);
    border-color: var(--dr-primary-600, #052460);
}
.dr-facet-check-link.is-checked .dr-facet-check::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.dr-facet-check-link.is-checked .dr-drilldown-link__name {
    color: var(--dr-primary-700, #041d50);
    font-weight: 600;
}
/* Multi-select rows must not take the single-select navy fill. */
.dr-facet-check-link,
.dr-facet-check-link.is-checked {
    background: transparent !important;
    color: inherit !important;
}
.dr-facet-check-link:hover { background: var(--dr-slate-50, #f8fafc) !important; }

/* Price filter */
.dr-price-filter__inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.dr-price-filter__field {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    border: 1px solid var(--dr-slate-300, #cbd5e1);
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dr-price-filter__field:focus-within {
    border-color: var(--dr-primary-600, #052460);
    box-shadow: 0 0 0 2px rgba(5, 36, 96, 0.12);
}

/* Currency sign pinned inside the field, static while digits flow after it. */
.dr-price-filter__currency {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--dr-slate-400);
    pointer-events: none;
}

.dr-price-filter__field input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 0.8125rem;
    padding: 0.45rem 0.55rem 0.45rem 1.35rem;
    background: transparent;
    color: var(--dr-slate-900);
    -moz-appearance: textfield;
}

/* Range facet (barrel length, mag capacity): no currency prefix; unit on the right. */
.dr-range-filter__field input {
    padding-left: 0.55rem;
    padding-right: 1.5rem;
}
.dr-range-filter__unit {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--dr-slate-400);
    pointer-events: none;
}

.dr-price-filter__field input::-webkit-inner-spin-button,
.dr-price-filter__field input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dr-price-filter__sep {
    color: var(--dr-slate-400);
    font-size: 0.875rem;
}

.dr-price-filter__apply {
    width: 100%;
    padding: 0.5rem;
    background: var(--dr-primary-600, #052460);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.dr-price-filter__apply:hover {
    background: var(--dr-primary-700, #041d50);
}

.dr-price-filter__clear {
    display: block;
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--dr-slate-500);
    text-decoration: none;
}

.dr-price-filter__clear:hover {
    color: var(--dr-primary-600);
}

/* ---- Sidebar active-filters bar (removable chips, top of sidebar) ----
   Distinct prefix (dr-sfilters) so it never collides with the FE-Pro / search
   combo-mode `.dr-active-filters` chip styles defined earlier in this file. */
.dr-sfilters {
    display: block;
    margin-bottom: 0.25rem;
}
.dr-sfilters__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.dr-sfilters__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dr-slate-500, #64748b);
    white-space: nowrap;
}
.dr-sfilters__clear {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dr-primary-600, #052460);
    text-decoration: none;
    white-space: nowrap;
}
.dr-sfilters__clear:hover { text-decoration: underline; }
.dr-sfilters__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.35rem;
    margin-top: 0.5rem;
    min-width: 0;
}
.dr-sfilters__group-label {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dr-slate-400, #94a3b8);
    white-space: nowrap;
}
.dr-sfilters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
}
.dr-sfilter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.2rem 0.4rem 0.2rem 0.6rem;
    background: var(--dr-primary-600, #052460);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.25;
    text-decoration: none;
    transition: background 0.15s ease;
}
.dr-sfilter-chip__text {
    overflow-wrap: anywhere;
}
.dr-sfilter-chip:hover { background: var(--dr-primary-700, #041d50); color: #fff; }
.dr-sfilter-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.7;
    flex: 0 0 auto;
    margin-top: -1px;
}
.dr-sfilter-chip:hover .dr-sfilter-chip__x { opacity: 1; }

/* Active item in drilldown */
.dr-drilldown-link--active {
    background: var(--dr-primary-600, #052460);
    color: #fff !important;
}

.dr-drilldown-link--active:hover {
    background: var(--dr-primary-700, #041d50);
    color: #fff !important;
}

.dr-drilldown-link--active .dr-drilldown-link__name {
    font-weight: 600;
    color: #fff;
}

.dr-drilldown-link--active .dr-drilldown-link__count {
    color: rgba(255, 255, 255, 0.7);
}

.dr-shop-sidebar .noUi-handle::before,
.dr-shop-sidebar .noUi-handle::after {
    display: none;
}

/* Hide default widget wrappers if empty */
.dr-shop-sidebar .widget:empty {
    display: none;
}

/* Price filter slider */
.dr-shop-sidebar .price_slider_wrapper {
    padding: 0.5rem 0;
}

.dr-shop-sidebar .price_slider {
    background: var(--dr-slate-200);
    height: 4px;
    border-radius: 2px;
}

.dr-shop-sidebar .ui-slider-range {
    background: var(--dr-primary-600);
}

.dr-shop-sidebar .ui-slider-handle {
    background: var(--dr-primary-600);
    border: 2px solid white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: -6px;
    cursor: pointer;
}

.dr-shop-sidebar .price_slider_amount {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
}

.dr-shop-sidebar .price_slider_amount .price_label {
    font-size: 0.8125rem;
    color: var(--dr-slate-600);
    flex: 1;
}

.dr-shop-sidebar .price_slider_amount .button {
    background: var(--dr-slate-900);
    color: white;
    border: none;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background var(--dr-transition-fast);
}

.dr-shop-sidebar .price_slider_amount .button:hover {
    background: var(--dr-slate-800);
}

/* No Products Found */
.dr-no-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    min-height: calc(100vh - var(--dr-header-height, 120px) - 200px);
}

.dr-no-products > .dr-icon,
.dr-no-products > svg {
    width: 3rem;
    height: 3rem;
    color: var(--dr-slate-300);
    margin-bottom: 1.25rem;
}

.dr-no-products__title {
    font-family: var(--dr-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dr-slate-700);
    margin: 0 0 0.5rem;
}

.dr-no-products__text {
    font-size: 0.875rem;
    color: var(--dr-slate-500);
    margin: 0 0 1.5rem;
}

.dr-no-products__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    color: var(--dr-slate-700);
    font-size: 0.8125rem;
    font-weight: 600;
    border: 1.5px solid var(--dr-slate-300);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all var(--dr-transition-fast);
}

.dr-no-products__btn:hover {
    background: var(--dr-slate-100);
    border-color: var(--dr-slate-400);
    color: var(--dr-slate-900);
}

.dr-no-products__btn .dr-icon,
.dr-no-products__btn svg {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Main Content Area */
.dr-shop-wrapper .dr-shop-main {
    padding: 1.5rem 2rem 1.5rem 0;
    min-width: 0;
    background: transparent;
}

/* Products Grid */
.dr-shop-wrapper .dr-shop-products .products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 1.25rem !important;
}

/* Ensure full width chain from site-main down */
.site-main,
.site-main > .woocommerce,
.dr-shop-wrapper,
.dr-shop-layout,
.dr-shop-main,
.dr-shop-products {
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
}


/* Tablet/Mobile Responsive */
/* Larger sort + filter buttons on desktop/tablet */
@media (min-width: 769px) {
    .dr-sort-mobile__btn,
    .dr-shop-header__filter-toggle {
        height: 2.375rem;
        padding: 0 1rem;
        font-size: 0.875rem;
        gap: 0.5rem;
    }

    .dr-sort-mobile__btn .dr-icon {
        width: 16px;
        height: 16px;
    }

    .dr-sort-mobile__btn .dr-icon:last-child {
        width: 14px;
        height: 14px;
    }

    .dr-shop-header__filter-toggle .dr-icon {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 1024px) {
    .dr-shop-wrapper .dr-shop-header {
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: end;
        padding: 1rem 1.5rem;
        gap: 0.5rem;
    }

    .dr-shop-header__title {
        grid-column: 1;
        grid-row: 1;
    }

    .dr-sort-mobile {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .dr-shop-header__filter-toggle {
        grid-column: 3;
        grid-row: 1;
    }

    .dr-shop-wrapper .dr-shop-main {
        padding: 1rem 0;
    }

}

@media (max-width: 768px) {
    .dr-shop-layout {
        padding: 1rem 1rem 2rem;
    }

    .dr-shop-header {
        margin-bottom: 0.5rem;
    }

    .dr-shop-wrapper .dr-shop-header {
        padding: 0.5rem 0;
    }

    .dr-shop-wrapper .dr-shop-header__heading {
        font-size: 1.25rem;
    }

    .dr-shop-wrapper .dr-shop-header__actions {
        gap: 1rem;
    }

    .dr-shop-header__filter-toggle,
    .dr-sort-mobile__btn {
        min-height: auto;
    }

    .dr-shop-wrapper .dr-shop-products .products {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

}

@media (max-width: 425px) {
    .dr-shop-wrapper .dr-shop-header {
        grid-template-columns: 1fr 1fr;
    }

    .dr-shop-header__title {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .dr-sort-mobile {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .dr-sort-mobile__dropdown {
        right: auto;
        left: 0;
    }

    .dr-shop-header__filter-toggle {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
}

@media (max-width: 480px) {
    .dr-shop-wrapper .dr-shop-products .products {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 375px) {
    .dr-shop-layout {
        padding: 0.75rem 0.75rem 2rem;
    }

    .dr-shop-wrapper .dr-shop-main {
        padding: 0.5rem 0;
    }

    .dr-shop-wrapper .dr-shop-header__heading {
        font-size: 1.125rem;
    }
}