/* =====================================================================
   Smart Product Filters — Frontend stylesheet
   ---------------------------------------------------------------------
   Generic, theme-able. Uses CSS custom properties so any site can
   override colors/fonts without modifying this file.
   
   Override variables in your theme's CSS:
   
     :root {
       --spf-color-primary: #1F2521;       (selected state, buttons)
       --spf-color-accent:  #B8935A;       (hover, active outline)
       --spf-color-text:    #4A4F4A;       (body text)
       --spf-color-mute:    #8A8E89;       (muted text, counts)
       --spf-color-line:    #E6E2D8;       (borders)
       --spf-color-bg:      #FFFFFF;       (input backgrounds)
       --spf-color-chip-bg: #E4EEE6;       (chip background)
       --spf-color-chip-border: #D5E5DC;
       --spf-radius:        2px;
       --spf-font:          inherit;       (filter fonts)
     }
   
   Sections:
     1.   Defaults (CSS variables)
     2.   Layout
     3.   Active chips
     4.   Filter group titles (collapsible)
     5.   Checkbox / Radio list
     6.   Pill group
     7.   Range buckets
     8.   Slider
     9.   Color swatches
    10.   Rating
    11.   Toggle (sale/featured/in-stock switch)
    12.   Search (SKU)
    13.   Result count
    14.   Loading state
    15.   Mobile drawer
    16.   Accessibility
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 — DEFAULTS
   --------------------------------------------------------------------- */
:root {
    --spf-color-primary: #1F2521;
    --spf-color-accent:  #B8935A;
    --spf-color-text:    #4A4F4A;
    --spf-color-mute:    #8A8E89;
    --spf-color-line:    #E6E2D8;
    --spf-color-bg:      #FFFFFF;
    --spf-color-chip-bg: #E4EEE6;
    --spf-color-chip-border: #D5E5DC;
    --spf-radius: 2px;
    --spf-font: inherit;
}

/* ---------------------------------------------------------------------
   2 — LAYOUT
   --------------------------------------------------------------------- */
.spf-group {
    font-family: var(--spf-font);
    font-size: 13px;
    color: var(--spf-color-text);
    /* Sticky+scrollable by default (v2.0.6).
       Padding gives breathing space while scrolling (v2.0.7). */
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 16px 4px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--spf-color-line) transparent;
}

.spf-group::-webkit-scrollbar {
    width: 6px;
}

.spf-group::-webkit-scrollbar-track {
    background: transparent;
}

.spf-group::-webkit-scrollbar-thumb {
    background: var(--spf-color-line);
    border-radius: 3px;
}

.spf-group::-webkit-scrollbar-thumb:hover {
    background: var(--spf-color-mute);
}

/* Escape hatch: add this class to disable sticky/scroll behavior */
.spf-group--no-sticky {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
}

/* v2.0.5/v2.0.6: Opt-in wrapper class kept for backwards compat.
   You can still wrap your filters in <div class="spf-filter-sidebar">…</div>
   but it's no longer required — .spf-group does it automatically now. */
.spf-filter-sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 16px 4px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--spf-color-line) transparent;
}

.spf-filter-sidebar::-webkit-scrollbar {
    width: 6px;
}

.spf-filter-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.spf-filter-sidebar::-webkit-scrollbar-thumb {
    background: var(--spf-color-line);
    border-radius: 3px;
}

.spf-filter-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--spf-color-mute);
}

.spf-filter {
    padding: 18px 0;
    border-bottom: 1px solid var(--spf-color-line);
}

.spf-filter:last-child {
    border-bottom: none;
}

.spf-filter__body {
    margin-top: 14px;
}

.spf-filter__body[hidden] {
    display: none;
}

/* When label is hidden, no top margin */
.spf-filter:not(:has(.spf-filter__title)) .spf-filter__body {
    margin-top: 0;
}

/* ---------------------------------------------------------------------
   3 — ACTIVE CHIPS
   --------------------------------------------------------------------- */
.spf-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    align-items: center;
}

.spf-active-chips:empty {
    display: none;
}

.spf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--spf-color-chip-bg);
    color: var(--spf-color-primary);
    border: 1px solid var(--spf-color-chip-border);
    border-radius: 20px;
    padding: 6px 10px 6px 14px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
    max-width: 100%;
    line-height: 1.4;
}

.spf-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.spf-chip:hover {
    background: var(--spf-color-chip-border);
}

.spf-chip__x {
    width: 14px;
    height: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .55;
    font-size: 14px;
    flex-shrink: 0;
}

.spf-chip:hover .spf-chip__x {
    opacity: 1;
}

.spf-clear-all {
    background: none;
    border: none;
    color: var(--spf-color-mute);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 8px;
    margin-left: auto;
}

.spf-clear-all:hover {
    color: var(--spf-color-accent);
}

/* ---------------------------------------------------------------------
   4 — FILTER GROUP TITLES (collapsible)
   --------------------------------------------------------------------- */
.spf-filter__title {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--spf-color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1.4;
}

.spf-filter__caret {
    width: 10px;
    height: 10px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.spf-filter__title[aria-expanded="false"] .spf-filter__caret {
    transform: rotate(-45deg);
}

/* When user has applied custom colors via admin (label_bg/label_color/label_border) */
.spf-filter__title--styled {
    /* Inline style provides bg/color/border + padding + border-radius */
    /* Override default flex spacing for styled labels */
    margin-bottom: 12px;
}

.spf-filter__title--styled:hover {
    filter: brightness(0.97);
}

/* ---------------------------------------------------------------------
   5 — CHECKBOX / RADIO LIST
   --------------------------------------------------------------------- */
.spf-checkbox-list,
.spf-radio-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spf-checkbox-item.is-disabled,
.spf-radio-item.is-disabled {
    opacity: .4;
    pointer-events: none;
}

.spf-checkbox,
.spf-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    user-select: none;
}

.spf-checkbox:hover .spf-checkbox__label,
.spf-radio:hover .spf-radio__label {
    color: var(--spf-color-primary);
}

.spf-checkbox input,
.spf-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.spf-checkbox__box {
    width: 14px;
    height: 14px;
    border: 1px solid var(--spf-color-mute);
    border-radius: 1px;
    flex-shrink: 0;
    position: relative;
    background: var(--spf-color-bg);
    transition: all .2s ease;
}

.spf-checkbox input:checked + .spf-checkbox__box {
    background: var(--spf-color-primary);
    border-color: var(--spf-color-primary);
}

.spf-checkbox input:checked + .spf-checkbox__box::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.spf-checkbox input:focus-visible + .spf-checkbox__box {
    outline: 2px solid var(--spf-color-accent);
    outline-offset: 2px;
}

.spf-radio__dot {
    width: 14px;
    height: 14px;
    border: 1px solid var(--spf-color-mute);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    background: var(--spf-color-bg);
    transition: all .2s ease;
}

.spf-radio input:checked + .spf-radio__dot {
    border-color: var(--spf-color-primary);
}

.spf-radio input:checked + .spf-radio__dot::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 6px;
    height: 6px;
    background: var(--spf-color-primary);
    border-radius: 50%;
}

.spf-radio input:focus-visible + .spf-radio__dot {
    outline: 2px solid var(--spf-color-accent);
    outline-offset: 2px;
}

.spf-checkbox__label,
.spf-radio__label {
    flex: 1;
    color: var(--spf-color-text);
}

.spf-checkbox__count,
.spf-radio__count {
    color: var(--spf-color-mute);
    font-size: 11px;
}

/* ---------------------------------------------------------------------
   6 — PILL GROUP
   --------------------------------------------------------------------- */
.spf-pill-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.spf-pill {
    flex: 1;
    min-width: 60px;
    padding: 8px 6px;
    border: 1px solid var(--spf-color-line);
    border-radius: var(--spf-radius);
    text-align: center;
    cursor: pointer;
    background: var(--spf-color-bg);
    transition: all .2s ease;
    font-size: 11px;
    font-weight: 400;
    color: var(--spf-color-text);
}

.spf-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.spf-pill:hover {
    border-color: var(--spf-color-primary);
}

.spf-pill.is-selected {
    background: var(--spf-color-primary);
    color: white;
    border-color: var(--spf-color-primary);
}

.spf-pill.is-disabled {
    opacity: .4;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   7 — RANGE BUCKETS
   --------------------------------------------------------------------- */
.spf-range-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spf-range-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--spf-color-line);
    border-radius: var(--spf-radius);
    cursor: pointer;
    background: var(--spf-color-bg);
    font-size: 13px;
    color: var(--spf-color-text);
    transition: all .2s ease;
}

.spf-range-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.spf-range-item:hover {
    border-color: var(--spf-color-primary);
}

.spf-range-item.is-selected {
    background: var(--spf-color-primary);
    color: white;
    border-color: var(--spf-color-primary);
}

/* ---------------------------------------------------------------------
   8 — SLIDER (price + numeric)
   --------------------------------------------------------------------- */
.spf-slider__track {
    position: relative;
    height: 32px;
    margin: 4px 0 14px;
}

.spf-slider__track::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 14px;
    height: 2px;
    background: var(--spf-color-line);
}

.spf-slider__range {
    position: absolute;
    top: 14px;
    height: 2px;
    background: var(--spf-color-primary);
    pointer-events: none;
}

.spf-slider__handle {
    position: absolute;
    top: 8px;
    width: 14px;
    height: 14px;
    background: var(--spf-color-bg);
    border: 1px solid var(--spf-color-primary);
    border-radius: 50%;
    transform: translateX(-50%);
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
    touch-action: none;
}

.spf-slider__handle:active {
    cursor: grabbing;
}

.spf-slider__handle:focus-visible {
    outline: 2px solid var(--spf-color-accent);
    outline-offset: 2px;
}

.spf-slider__inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spf-slider__field {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.spf-slider__currency {
    font-size: 12px;
    color: var(--spf-color-mute);
}

.spf-slider__input {
    width: 100%;
    background: var(--spf-color-bg);
    border: 1px solid var(--spf-color-line);
    border-radius: var(--spf-radius);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 12px;
    color: var(--spf-color-primary);
}

.spf-slider__input:focus {
    outline: none;
    border-color: var(--spf-color-primary);
}

.spf-slider__separator {
    color: var(--spf-color-mute);
}

.spf-slider__input::-webkit-outer-spin-button,
.spf-slider__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.spf-slider__input { -moz-appearance: textfield; }

/* ---------------------------------------------------------------------
   9 — COLOR SWATCHES
   --------------------------------------------------------------------- */
.spf-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.spf-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .2s ease;
    position: relative;
}

.spf-swatch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.spf-swatch__circle {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, .5),
        inset -1px -1px 2px rgba(0, 0, 0, .15);
}

.spf-swatch:hover {
    border-color: var(--spf-color-mute);
}

.spf-swatch.is-selected {
    border-color: var(--spf-color-primary);
}

.spf-swatch.is-disabled {
    opacity: .35;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   10 — RATING
   --------------------------------------------------------------------- */
.spf-rating-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spf-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.spf-rating input { display: none; }

.spf-rating__stars {
    color: var(--spf-color-accent);
    letter-spacing: 1px;
    font-size: 14px;
}

.spf-rating__text {
    font-size: 12px;
    color: var(--spf-color-text);
}

.spf-rating input:checked ~ .spf-rating__text {
    color: var(--spf-color-primary);
    font-weight: 500;
}

/* ---------------------------------------------------------------------
   11 — TOGGLE (Sale/Featured/In-stock switch)
   --------------------------------------------------------------------- */
.spf-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.spf-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.spf-toggle__track {
    width: 40px;
    height: 22px;
    background: var(--spf-color-line);
    border-radius: 11px;
    position: relative;
    transition: background .25s ease;
    flex-shrink: 0;
}

.spf-toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--spf-color-bg);
    border-radius: 50%;
    transition: transform .25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.spf-toggle input:checked + .spf-toggle__track {
    background: var(--spf-color-primary);
}

.spf-toggle input:checked + .spf-toggle__track .spf-toggle__thumb {
    transform: translateX(18px);
}

.spf-toggle input:focus-visible + .spf-toggle__track {
    outline: 2px solid var(--spf-color-accent);
    outline-offset: 2px;
}

.spf-toggle__text {
    font-size: 13px;
    color: var(--spf-color-text);
}

.spf-toggle__on,
.spf-toggle__off {
    display: none;
}

.spf-toggle input:checked ~ .spf-toggle__text .spf-toggle__on,
.spf-toggle input:not(:checked) ~ .spf-toggle__text .spf-toggle__off {
    display: inline;
}

/* ---------------------------------------------------------------------
   12 — SEARCH (SKU search input)
   --------------------------------------------------------------------- */
.spf-search {
    position: relative;
    display: flex;
    align-items: center;
}

.spf-search__icon {
    position: absolute;
    left: 12px;
    color: var(--spf-color-mute);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.spf-search__input {
    width: 100%;
    background: var(--spf-color-bg);
    border: 1px solid var(--spf-color-line);
    border-radius: var(--spf-radius);
    padding: 10px 32px 10px 36px;
    font-family: inherit;
    font-size: 13px;
    color: var(--spf-color-primary);
    -webkit-appearance: none;
}

.spf-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.spf-search__input:focus {
    outline: none;
    border-color: var(--spf-color-primary);
}

.spf-search__input::placeholder {
    color: var(--spf-color-mute);
}

.spf-search__clear {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    color: var(--spf-color-mute);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .15s ease;
}

.spf-search__clear:hover {
    background: var(--spf-color-line);
    color: var(--spf-color-primary);
}

/* ---------------------------------------------------------------------
   13 — RESULTS COUNT
   --------------------------------------------------------------------- */
.spf-results-count {
    font-family: inherit;
    font-size: 13px;
    color: var(--spf-color-text);
}

.spf-results-count strong {
    color: var(--spf-color-primary);
    font-weight: 500;
}

/* ---------------------------------------------------------------------
   14 — LOADING STATE
   --------------------------------------------------------------------- */
.spf-is-loading .products,
.spf-is-loading .elementor-loop-container {
    opacity: .55;
    transition: opacity .2s ease;
    pointer-events: none;
}

.spf-is-loading .spf-group {
    opacity: .8;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .spf-is-loading .products,
    .spf-is-loading .elementor-loop-container {
        transition: none;
    }
}

/* ---------------------------------------------------------------------
   15 — MOBILE DRAWER (opt-in)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .spf-drawer {
        position: fixed;
        top: 0; left: -100%;
        width: 88%;
        max-width: 360px;
        height: 100vh;
        background: var(--spf-color-bg);
        padding: 24px;
        box-shadow: 0 0 24px rgba(0,0,0,.15);
        overflow-y: auto;
        transition: left .3s ease;
        z-index: 999;
    }

    .spf-drawer.is-open {
        left: 0;
    }

    .spf-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
        z-index: 998;
    }

    .spf-drawer.is-open + .spf-drawer-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---------------------------------------------------------------------
   16 — ACCESSIBILITY
   --------------------------------------------------------------------- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.spf-error {
    background: #fef0f0;
    border: 1px solid #f5c2c0;
    color: #8b1a17;
    padding: 12px 16px;
    border-radius: var(--spf-radius);
    font-size: 13px;
}

.spf-empty {
    color: var(--spf-color-mute);
    font-size: 12px;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────
   v2.0.6 — Product badges (New + Sale stacking)
   Injected by JS (Elementor) or PHP (standard WC loops).
   ───────────────────────────────────────────────────────────────── */

/* Container holds badges in a vertical stack with consistent spacing.
   JS injects the container if it doesn't exist; PHP fallback wraps too. */
.spf-badges-stack {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
    max-width: calc(100% - 24px);
}

.spf-product-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
    /* bg/color set inline via JS or PHP */
}

/* When New badge is OUTSIDE a stack container (legacy fallback), still works */
.spf-product-badge:not(.spf-badges-stack > *) {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 9;
}

/* When the WC sale badge gets moved into our stack container, neutralize
   its default absolute positioning so the flex layout takes over */
.spf-badges-stack .onsale,
.spf-badges-stack .woocommerce-onsale {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   v2.0.9 — Mobile bottom sheet (no DOM manipulation)
   The filter group stays in its original DOM position at all times.
   Only CSS repositions its wrapper (.spf-mobile-panel) into a fixed
   overlay on mobile when .spf-open is added to .spf-mobile-wrapper.
   ───────────────────────────────────────────────────────────────── */

/* Desktop default: wrapper is transparent, panel renders inline as if
   the mobile scaffolding wasn't there. Trigger + chrome + backdrop are
   all hidden. This preserves the exact v2.0.7 desktop behaviour. */
.spf-mobile-trigger,
.spf-mobile-backdrop,
.spf-mobile-panel__chrome-top,
.spf-mobile-panel__footer {
    display: none;
}

.spf-mobile-panel {
    /* Desktop: renders inline like a plain div wrapping .spf-group */
    display: block;
    position: static;
    background: transparent;
    max-height: none;
    overflow: visible;
    transform: none;
}

.spf-mobile-panel__body {
    padding: 0;
}

/* Mobile: below 782px, activate the sheet UI */
@media (max-width: 782px) {

    /* Hide the panel inline until the sheet is opened.
       The filter group DOM is still there — just visually hidden. */
    .spf-mobile-panel {
        display: none;
    }

    /* Show the trigger button in the inline flow */
    .spf-mobile-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: var(--spf-color-text, #1F2521);
        color: var(--spf-color-bg, #F9F5EE);
        border: none;
        border-radius: var(--spf-radius, 4px);
        font-family: var(--spf-font, inherit);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
    }

    .spf-mobile-trigger:active {
        transform: scale(0.98);
    }

    .spf-mobile-trigger__icon {
        flex-shrink: 0;
    }

    .spf-mobile-trigger__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        background: var(--spf-color-accent, #B8935A);
        color: var(--spf-color-bg, #F9F5EE);
        border-radius: 10px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0;
    }

    /* ── Open state: .spf-open is added to .spf-mobile-wrapper by JS ── */

    /* Backdrop */
    .spf-mobile-wrapper.spf-open .spf-mobile-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(31, 37, 33, 0.5);
        z-index: 99998;
        animation: spf-fade-in 260ms cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-tap-highlight-color: transparent;
    }

    /* Panel — fixed to bottom, scrollable body */
    .spf-mobile-wrapper.spf-open .spf-mobile-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 85vh;
        max-height: 85dvh;
        z-index: 99999;
        background: var(--spf-color-bg, #F9F5EE);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
        padding-bottom: env(safe-area-inset-bottom, 0);
        animation: spf-slide-up 280ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Chrome */
    .spf-mobile-wrapper.spf-open .spf-mobile-panel__chrome-top {
        display: block;
        flex-shrink: 0;
    }

    .spf-mobile-panel__handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 10px 0 6px;
        background: transparent;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
    }

    .spf-mobile-panel__handle-bar {
        display: block;
        width: 40px;
        height: 4px;
        background: var(--spf-color-line, #E6E2D8);
        border-radius: 2px;
    }

    .spf-mobile-panel__header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 6px 20px 16px;
        border-bottom: 1px solid var(--spf-color-line, #E6E2D8);
    }

    .spf-mobile-panel__title {
        flex: 1;
        margin: 0;
        font-family: var(--spf-font-serif, var(--spf-font, Georgia, serif));
        font-size: 20px;
        font-weight: 500;
        color: var(--spf-color-text, #1F2521);
        letter-spacing: 0.02em;
    }

    .spf-mobile-panel__clear {
        background: transparent;
        border: none;
        color: var(--spf-color-accent, #8F7142);
        font-family: var(--spf-font, inherit);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        padding: 4px 8px;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
    }

    .spf-mobile-panel__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: var(--spf-color-line, #E6E2D8);
        border: none;
        color: var(--spf-color-text, #1F2521);
        cursor: pointer;
        border-radius: 50%;
        padding: 0;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
        transition: background-color 150ms ease;
    }

    .spf-mobile-panel__close svg {
        width: 22px;
        height: 22px;
        stroke-width: 2;
    }

    .spf-mobile-panel__close:hover {
        background: var(--spf-color-text, #1F2521);
        color: var(--spf-color-bg, #F9F5EE);
    }

    /* v2.0.17: Hide the standalone chip-strip Clear-all inside the mobile
       sheet. The sheet header already has its own Clear-all button, so
       both would show side by side. */
    .spf-mobile-panel .spf-clear-all {
        display: none !important;
    }

    /* Body */
    .spf-mobile-wrapper.spf-open .spf-mobile-panel__body {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 8px 20px 20px;
        scrollbar-width: thin;
        scrollbar-color: var(--spf-color-line, #E6E2D8) transparent;
    }

    .spf-mobile-panel__body::-webkit-scrollbar {
        width: 6px;
    }

    .spf-mobile-panel__body::-webkit-scrollbar-thumb {
        background: var(--spf-color-line, #E6E2D8);
        border-radius: 3px;
    }

    /* Neutralize the sticky-scroll on .spf-group when it's inside the sheet.
       The .spf-mobile-panel__body handles scrolling; .spf-group should be flat. */
    .spf-mobile-wrapper.spf-open .spf-mobile-panel .spf-group {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0;
        top: auto;
    }

    /* Footer */
    .spf-mobile-wrapper.spf-open .spf-mobile-panel__footer {
        display: block;
        flex-shrink: 0;
        padding: 12px 20px 16px;
        border-top: 1px solid var(--spf-color-line, #E6E2D8);
        background: var(--spf-color-bg, #F9F5EE);
    }

    .spf-mobile-panel__apply {
        width: 100%;
        padding: 16px;
        background: var(--spf-color-text, #1F2521);
        color: var(--spf-color-bg, #F9F5EE);
        border: none;
        border-radius: var(--spf-radius, 4px);
        font-family: var(--spf-font, inherit);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
    }

    .spf-mobile-panel__apply:active {
        transform: scale(0.99);
    }
}

/* Body scroll lock */
body.spf-sheet-open {
    overflow: hidden;
}

/* Animations */
@keyframes spf-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes spf-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .spf-mobile-wrapper.spf-open .spf-mobile-backdrop,
    .spf-mobile-wrapper.spf-open .spf-mobile-panel {
        animation: none;
    }
}

/* ─────────────────────────────────────────────────────────────────
   v2.0.11 — Number-range widget (replaces drag slider)
   Two number inputs + Apply button. No handles, no track, no snap.
   Class `.spf-slider` is retained on the outer wrapper for backwards
   CSS compatibility but the old .spf-slider__track / __handle rules
   simply match nothing in this markup.
   ───────────────────────────────────────────────────────────────── */

.spf-nrange {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.spf-nrange__inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.spf-nrange__field {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--spf-color-bg, #fff);
    border: 1px solid var(--spf-color-line, #E6E2D8);
    border-radius: var(--spf-radius, 4px);
    padding: 0 8px;
    min-width: 0;
    transition: border-color 150ms ease;
}

.spf-nrange__field:focus-within {
    border-color: var(--spf-color-primary, #1F2521);
}

.spf-nrange__currency {
    font-size: 11px;
    color: var(--spf-color-mute, #8A8E89);
    font-weight: 500;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    line-height: 1;
}

.spf-nrange__input {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    padding: 8px 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--spf-color-text, #1F2521);
    outline: none;
    /* Suppress the browser default number spinner arrows visually — the
       arrows are still keyboard-accessible via up/down keys. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.spf-nrange__input::-webkit-outer-spin-button,
.spf-nrange__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.spf-nrange__input::placeholder {
    color: var(--spf-color-mute, #B0B0B0);
    opacity: 1;
}

.spf-nrange__separator {
    color: var(--spf-color-mute, #8A8E89);
    font-size: 13px;
    flex-shrink: 0;
}

.spf-nrange__apply {
    align-self: flex-start;
    padding: 8px 18px;
    background: var(--spf-color-text, #1F2521);
    color: var(--spf-color-bg, #F9F5EE);
    border: none;
    border-radius: var(--spf-radius, 4px);
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1;
    transition: background-color 150ms ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.spf-nrange__apply:hover {
    background: var(--spf-color-accent, #8F7142);
}

.spf-nrange__apply:active {
    transform: scale(0.98);
}

.spf-nrange__reset {
    align-self: flex-start;
    padding: 4px 0;
    background: transparent;
    color: var(--spf-color-mute, #8A8E89);
    border: none;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    text-decoration: underline;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.spf-nrange__reset:hover {
    color: var(--spf-color-text, #1F2521);
}

/* ─────────────────────────────────────────────────────────────────
   v2.0.16 — Dual-handle range widget (minimal / flat)
   No shadows, no gold fill by default, no gradient area around track.
   Just a thin line with two circular thumbs.
   ───────────────────────────────────────────────────────────────── */

.spf-dualrange {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 0 10px;
    contain: layout style;
}

/* ── NUMBER INPUT ROW ── */
.spf-dualrange__fields {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.spf-dualrange__field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.spf-dualrange__label {
    font-size: 10px;
    color: var(--spf-color-mute, #8A8E89);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.spf-dualrange__input-wrap {
    display: flex;
    align-items: stretch;
    position: relative;
}

.spf-dualrange__number {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    background: var(--spf-color-bg, #fff);
    border: 1px solid var(--spf-color-line, #E6E2D8);
    border-radius: var(--spf-radius, 4px);
    font-family: inherit;
    font-size: 14px;
    color: var(--spf-color-text, #1F2521);
    outline: none;
    padding: 9px 32px 9px 12px;
    height: 38px;
    box-sizing: border-box;
    transition: border-color 150ms ease;
    -moz-appearance: textfield;
    appearance: textfield;
}

.spf-dualrange__number:focus {
    border-color: var(--spf-color-text, #1F2521);
}

.spf-dualrange__number::-webkit-outer-spin-button,
.spf-dualrange__number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.spf-dualrange__suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--spf-color-mute, #8A8E89);
    pointer-events: none;
    line-height: 1;
}

.spf-dualrange__separator {
    color: var(--spf-color-line, #E6E2D8);
    font-size: 13px;
    padding-bottom: 12px;
    flex-shrink: 0;
    user-select: none;
}

/* ── SLIDER ROW ── minimal flat look ── */

.spf-dualrange__track-wrap {
    position: relative;
    height: 20px;
    margin: 6px 10px 0;
    box-sizing: border-box;
    isolation: isolate;
}

/* Thin plain track line */
.spf-dualrange__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--spf-color-text, #1F2521);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

/* Fill between handles — subtle darker line, no gold */
.spf-dualrange__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 100%;
    background: var(--spf-color-text, #1F2521);
    pointer-events: none;
    z-index: 2;
}

/* The range inputs — collapsed to zero height, only thumbs paint */
.spf-dualrange__slider {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    pointer-events: none;
    margin: 0;
    padding: 0;
    outline: none;
    z-index: 3;
    box-sizing: border-box;
}

/* WebKit thumb — flat, no shadow, hollow circle */
.spf-dualrange__slider::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
    height: 0;
}

.spf-dualrange__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--spf-color-bg, #fff);
    border: 1.5px solid var(--spf-color-text, #1F2521);
    margin-top: -7px;
    cursor: grab;
    box-shadow: none;
    transition: transform 100ms ease;
    box-sizing: border-box;
}

.spf-dualrange__slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.spf-dualrange__slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--spf-color-accent, #8F7142);
    outline-offset: 2px;
}

/* Firefox thumb */
.spf-dualrange__slider::-moz-range-track {
    background: transparent;
    border: none;
    height: 0;
}

.spf-dualrange__slider::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--spf-color-bg, #fff);
    border: 1.5px solid var(--spf-color-text, #1F2521);
    cursor: grab;
    box-shadow: none;
    transition: transform 100ms ease;
    box-sizing: border-box;
}

.spf-dualrange__slider::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.spf-dualrange__slider:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--spf-color-accent, #8F7142);
    outline-offset: 2px;
}

/* ── ACTIONS ROW ── */
.spf-dualrange__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.spf-dualrange__apply {
    padding: 10px 22px;
    background: var(--spf-color-text, #1F2521);
    color: var(--spf-color-bg, #F9F5EE);
    border: none;
    border-radius: var(--spf-radius, 4px);
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1;
    transition: background-color 150ms ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.spf-dualrange__apply:hover {
    background: var(--spf-color-accent, #8F7142);
}

.spf-dualrange__reset {
    background: transparent;
    color: var(--spf-color-mute, #8A8E89);
    border: none;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.12em;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 4px 0;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    transition: color 150ms ease;
}

.spf-dualrange__reset:hover {
    color: var(--spf-color-text, #1F2521);
}