.woo-filter-container {
    display: flex;
    flex-direction: column;
    font-family: var(--e-global-typography-text-font-family, sans-serif);
    direction: rtl; /* RTL Support for Hebrew UI */
}
.mono-font {
    /* Deliberately no !important: this is only a sensible fallback font
       stack. An !important here would permanently block the real fix -
       Elementor's per-widget Typography group controls ({{WRAPPER}} .class
       selectors) - from ever being able to override it, no matter what's
       set in the Style tab. */
    font-family: monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

/* Accordion Structuring & Dividers */
.filter-group-wrapper {
    border-bottom: 1.4px solid var(--e-global-color-accent, #eee);
    display: flex;
    flex-direction: column;
}
.filter-accordion-header {
    display: flex;
    flex-direction: row-reverse; /* title on the right, chevron on the left (RTL default) */
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    cursor: pointer;
    user-select: none;
}
.filter-accordion-header:focus-visible {
    outline: 2px solid var(--e-global-color-primary, #111);
    outline-offset: 2px;
}
.filter-header-ltr-yes .filter-accordion-header {
    flex-direction: row; /* manual override: chevron right, title left */
}
.filter-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--e-global-typography-primary-font-family, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--e-global-color-primary, #111);
    margin: 0;
    text-transform: uppercase;
}
.header-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 10px;
    background-color: var(--e-global-color-primary, #111);
    color: #fff;
    font-family: monospace;
    text-transform: none;
    letter-spacing: 0;
}
.accordion-chevron {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease;
    color: var(--e-global-color-text, #888);
}
.accordion-chevron svg {
    width: 14px;
    height: 14px;
}

/* Accordion Open/Closed States - jQuery's slideDown/slideUp drive the
   animation directly (see script.js), matching Elementor's own native
   Accordion widget. display is intentionally NOT gated by accordion-open/
   closed here - it's controlled solely by jQuery's own inline style
   (cleared/set by slideDown/slideUp), starting from the inline
   display:none the PHP template renders for closed sections. Gating
   display via this class too would make jQuery see the element as already
   shown and skip the animation entirely. */
.filter-accordion-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* NOT center: while the box is still shorter than its content mid-animation, centering shows only the vertically-centered middle slice of the content, so the top row visually climbs upward as the box grows - reads as content "rising" into the panel opening downward. Top-aligned reveals top-to-bottom in sync with the growing box instead. */
}
.filter-group-wrapper.accordion-open .filter-accordion-content {
    min-height: 40px; /* fixed - stops a near-empty box from ever looking cramped */
    padding-bottom: 12px; /* fixed spacing below content, before the divider */
}
.filter-accordion-content.js-animating {
    min-height: 0 !important; /* min-height can't itself be animated - if left active while jQuery moves `height` through low values, it clamps the box at this floor for the early frames, then "catches up" once the animated height crosses it. Suppressed only while a slide animation is actually in flight (added/removed in script.js); the resting state above still applies once settled. */
}
.filter-group-wrapper.accordion-open .accordion-chevron {
    transform: rotate(180deg);
}

/* Color Swatches Selection */
.color-swatches-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.swatch-item-btn {
    position: relative;
    flex: 0 0 auto; /* fully pin flex sizing - a plain flex-shrink:0 alone still left width susceptible to shrink pressure below a certain size */
    display: block;
    box-sizing: border-box; /* thicker border on .active shrinks the fill slightly instead of growing the whole swatch outward */
    width: 30px;
    height: 30px;
    min-width: 0;
    min-height: 0;
    padding: 2px; /* fallback default - the real control is Style > Color Swatches > "Gap between Frame and Color" */
    border-radius: 50%;
    border: 2px solid var(--e-global-color-accent, #ddd);
    background: none;
    cursor: pointer;
    transition: none; /* instant selection feedback, deliberately no transition here */
}
/* Selection state = the frame itself gets thicker (border-width increases),
   NOT a separate outline/ring - an outline (offset outside the element's own
   box) was the earlier approach and is exactly what looked like "an extra
   ring appearing outside the boundaries" - removed entirely. */
.swatch-item-btn.active {
    border-width: 4px; /* fallback default - the real control is Style > Color Swatches > "Selected Frame Width" */
    border-color: var(--e-global-color-primary, #111); /* fallback default - the real control is "Selected Frame Color" */
}
.swatch-item-btn.active:focus,
.swatch-item-btn.active:hover {
    /* The :not(.active) rule below never applies once a swatch IS selected
       (that's the whole point of excluding .active there) - but clicking a
       swatch adds .active in the same instant, and it's still a real
       <button> matching reset.css's [type=button]:focus rule, which was
       never canceled for this specific state. Only background-color needs
       fixing here - border stays governed by .active above, untouched.
       :hover added alongside :focus (2026-08-15) - a selected swatch that
       loses focus (tab away, click elsewhere) but is still moused-over
       hits reset.css's plain button:hover with nothing here to cancel it -
       reproduced on every color, not just one, confirming it's this gap
       and not something swatch-specific. */
    background-color: transparent !important;
}
.swatch-item-btn:not(.active):not(.oos):hover,
.swatch-item-btn:not(.active):not(.oos):focus {
    /* :focus included alongside :hover - reset.css's generic button rule
       covers both, and a mouse click leaves a real <button> in :focus
       state even after the mouse moves away (unlike :hover, which ends
       immediately) - without this, that lingering focus state alone was
       enough to show the reset's pink, with no hover or click actually in
       progress. */
    border-color: var(--e-global-color-text, #999); /* fallback default - the real control is Style > Accordion Headers & Dividers > "Hover Color" */
    /* Hello Elementor's reset.css has a generic button:hover/[type=button]:hover
       rule giving EVERY native <button> a pink background-color site-wide -
       this is a real <button> element so it matches. Nothing here was
       claiming background-color before, so that generic rule won by
       default. !important cancels it back to none - matches the same
       precedent already used for swatch_size elsewhere in this widget for
       identical external-CSS-interference reasons. */
    background-color: transparent !important;
}
.swatch-fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    /* Added 2026-09-08: contains the optional .swatch-icon texture image
       below - same pattern already proven in the PDP color swatches
       (mark-vance-variations-selector/style.css). Absent entirely when no
       icon is set - the background-color above is the whole visual then,
       unchanged from before this feature existed. */
    position: relative;
    overflow: hidden;
}
.swatch-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.swatch-item-btn:focus-visible {
    /* box-shadow instead of outline for swatches specifically - a keyboard
       focus ring is legitimate/expected, but should look different from the
       "thicker frame" selection cue and shouldn't render outside the
       element's own box the way an outline does. */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--e-global-color-primary, #111);
}
.size-item-btn:focus-visible,
.sort-radio-row:focus-visible {
    outline: 2px solid var(--e-global-color-primary, #111);
    outline-offset: 2px;
}
.swatch-item-btn.oos {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}
.swatch-item-btn.oos::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(to top left, transparent 47%, var(--e-global-color-text, #888) 49%, var(--e-global-color-text, #888) 51%, transparent 53%);
}

/* Size buttons */
.size-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.size-item-btn {
    width: 46px;
    height: 40px;
    background-color: #fff;
    color: var(--e-global-color-primary, #111);
    border: 1.4px solid var(--e-global-color-accent, #ccc);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
}
.size-item-btn.active:focus {
    /* Same gap as the swatch fix above: the :not(.active) hover/focus rule
       below never applies once .active is set, so reset.css's
       [type=button]:focus (background-color:#c36) was never canceled for
       an active size button that's also focused right after being
       clicked. Re-asserting .active's own real background-color here
       (not a neutral value, since a size button's active state genuinely
       is a solid fill) with !important is enough to win over the reset. */
    background-color: var(--e-global-color-primary, #111) !important;
}
.size-item-btn.active {
    background-color: var(--e-global-color-primary, #111);
    color: #fff;
    border-color: var(--e-global-color-primary, #111);
}
.size-item-btn:not(.active):not(.oos):hover,
.size-item-btn:not(.active):not(.oos):focus {
    /* Fills the whole button (like .active does), not just the border -
       previews the selected look. No !important: this selector's own
       specificity (1 class + 2 :not() + 1 pseudo-class) already beats
       reset.css's [type=button]:hover/:focus comfortably without it -
       adding it anyway (an earlier round's mistake) blocked Elementor's
       own "Hover Color" control output, which is never !important, from
       ever winning regardless of what's configured. :focus included
       alongside :hover for the same reason as swatches above - a mouse
       click leaves the button in :focus state after the mouse moves away.
       No forced text color here (confirmed live: Elementor's generated CSS
       for a Global-Color-bound value applied that same color to ALL three
       properties here, including color, even though this file only wrote
       {{VALUE}} for background/border - text and background became
       literally the same color, making the text invisible). Leaving color
       alone keeps it at its real resting value, which already has strong
       contrast against any realistic hover color. */
    background-color: var(--e-global-color-primary, #111); /* fallback default - the real control is Style > Accordion Headers & Dividers > "Hover Color" */
    border-color: var(--e-global-color-primary, #111);
}
.size-item-btn.oos {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: line-through;
}

/* Radio List Sort (Explicitly RTL) */
.sort-radio-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    direction: rtl;
}
.sort-radio-row {
    display: flex;
    align-items: center;
    flex-direction: row-reverse; /* Put dot on the right side for RTL */
    justify-content: flex-end;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.sort-radio-row:hover {
    background-color: var(--e-global-color-accent, #f5f5f5);
}
.sort-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.4px solid var(--e-global-color-text, #aaa);
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    transition: border-color 0.25s ease;
}
.sort-dot::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.25s ease;
}
.sort-radio-row.active .sort-dot {
    border-color: var(--e-global-color-primary, #111);
}
.sort-radio-row.active .sort-dot::after {
    background-color: var(--e-global-color-primary, #111);
}
.sort-label {
    font-size: 13px;
    color: var(--e-global-color-primary, #111);
}

/* Dual Range Price Track - forced LTR: native range inputs mirror themselves
   (min renders on the right, max on the left) under an RTL ancestor, which
   put the two thumbs and the JS-computed fill bar out of sync with each
   other ("empties out backwards" when dragging). A slider's min-to-max
   physical layout isn't a reading-direction thing, so it's pinned to LTR
   regardless of the page's RTL context - matches the min/max math in
   updatePriceTrackFill() in script.js, which assumes left=min/right=max. */
.price-slider-container {
    position: relative;
    min-height: 40px; /* NOT a fixed height: .price-slider-labels below is normal-flow and needs room to render fully - a fixed height ignored it, so the outer accordion box (which sizes itself from this container's own box) under-measured and clipped the labels via its own overflow:hidden */
    padding-top: 15px;
    direction: ltr;
}
/* Two stacked bars: a thin pale base spanning the full range (the "cut off"
   portions read as thinner and lighter), and a thicker dark fill sized to
   just the currently-selected min-max range, positioned live by JS via
   --range-min-pct/--range-max-pct custom properties. */
.dual-range-track {
    position: absolute;
    top: 21px;
    height: 2px;
    left: 0;
    right: 0;
    background-color: var(--e-global-color-accent, #eee);
    opacity: 0.6;
    border-radius: 2px;
    z-index: 1;
}
.dual-range-track-fill {
    position: absolute;
    top: 20px;
    height: 4px;
    background-color: var(--e-global-color-primary, #111);
    border-radius: 2px;
    z-index: 1;
    left: var(--range-min-pct, 0%);
    right: calc(100% - var(--range-max-pct, 100%));
}
.price-slider {
    position: absolute;
    width: 100%;
    height: 16px; /* matches the thumb's own height so it renders vertically centered on the track, not offset */
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    top: 14px; /* (container top 20px track-fill center) - (16px thumb / 2) */
    left: 0;
    margin: 0;
    z-index: 2;
}
.price-slider::-webkit-slider-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--e-global-color-primary, #111);
    cursor: pointer;
    -webkit-appearance: none;
    pointer-events: auto;
}
.price-slider::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--e-global-color-primary, #111);
    cursor: pointer;
    pointer-events: auto;
    border: none;
}

.price-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--e-global-color-text, #666);
    margin-top: 28px;
    /* LTR, matching .price-slider-container above (the slider itself is
       forced LTR - min-thumb left, max-thumb right). This row previously
       had direction:rtl, which put the first DOM child ("Min") on the
       right and "Max" on the left - opposite of where the thumbs actually
       are. */
    direction: ltr;
}

/* Active filter chips row */
.active-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.active-filters-row:empty {
    display: none;
}
.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--e-global-color-accent, #ccc);
    border-radius: 20px;
    font-size: 11px;
    color: var(--e-global-color-primary, #111);
    background: none;
    cursor: pointer;
}
.woo-filter-container .active-filter-chip:hover,
.woo-filter-container .active-filter-chip:focus {
    /* This exact selector ties in specificity with reset.css's
       [type=button]:hover, so !important was used to force a win - but
       that also permanently blocked Elementor's own "Hover Color" control
       output (never !important) from ever taking effect. Scoping under the
       widget's own root container instead adds real specificity (a
       legitimate ancestor, not a hack) - enough to beat the reset, but
       still less than Elementor's wrapper-prefixed generated selector, so
       a configured Hover Color still correctly wins. :focus included
       alongside :hover for the same lingering-mouse-click-focus reason as
       swatches/size buttons. */
    background-color: var(--e-global-color-accent, #f5f5f5); /* fallback default - the real control is Style > Accordion Headers & Dividers > "Hover Color" */
}
.active-filter-chip .chip-remove {
    font-size: 13px;
    line-height: 1;
}

/* Clear-all chip - visually distinct from real filter chips (no border/pill
   shape, just underlined text) since it's an action, not a filter value.
   Always rendered last in .active-filters-row by script.js. */
.clear-all-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 4px;
    border: none;
    background: none;
    font-size: 11px;
    color: var(--e-global-color-text, #888);
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}
.clear-all-chip:hover,
.clear-all-chip:focus {
    /* No hover/focus effect wanted here at all - matches the resting state
       exactly. Still needs !important: without it, reset.css's generic
       [type=button]:hover/:focus rule (background-color:#c36; color:#fff)
       wins a specificity tie against this and the pink comes back, even
       though visually nothing here is "trying" to change. */
    background-color: transparent !important;
    color: var(--e-global-color-text, #888) !important;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    /* .filter-accordion-content itself no longer has a CSS transition -
       jQuery drives that animation directly in script.js, which checks
       this same media query and uses a duration of 0 instead. */
    .accordion-chevron,
    .size-item-btn,
    .sort-dot,
    .sort-dot::after,
    .sort-radio-row,
    .clear-all-chip {
        transition: none !important;
    }
}