/* Mark Vence - filter panel (845) + sticky filter bar (119). 1.16.0 (1.13.0, D-90; 1.16.0 VP-FIX lane C, D-115).
 *
 * Design: mock v4 (D-90 16.1g) - group name Navy 12/600, selected values
 * #636976 12/400 (5.51:1) -> Navy + underline on hover; options = underlined
 * text / colour rectangles, no boxes; hover on a SELECTED option fades it to
 * #3F4F64 (Navy 80%) in 200 ms, like our filled buttons (13.1).
 *
 * Specificity contract (G4A lane A adds `.elementor-kit-6 button` (0,1,1) and
 * its :hover/:focus (0,2,1) site-wide): every button here is styled through
 * `.<root> button.<class>` = (0,2,1) at rest and (0,3,1) for :hover/:focus, so
 * neither the kit rule nor Hello's reset `[type=button]:hover/:focus` (0,2,0)
 * can repaint it. Elementor's own Style-tab output ({{WRAPPER}} ... = (0,3,0)+
 * with the document class) still wins where a control is set.
 */
.woo-filter-container,
.mv-woofs-bar {
    --mv-woofs-ink: var(--e-global-color-primary, #16233D);
    --mv-woofs-muted: var(--e-global-color-5e183c4, #636976);
    --mv-woofs-fade: #3F4F64;
    --mv-woofs-bg: #FFFFFF;
    --mv-woofs-hair: #ECEAE6;
    --mv-woofs-dur: 200ms;
    --mv-woofs-ease: cubic-bezier(0.35, 0, 0.15, 1);
    --mv-woofs-sw-w: 38px;
    --mv-woofs-sw-h: 19px;
    --mv-woofs-size-w: 32px;
}

/* ---------- shared button reset (beats kit + Hello reset, see header) ---------- */
.woo-filter-container button:is(.swatch-item-btn, .size-item-btn, .filter-value-token, .filter-group-clear, .filter-accordion-header, .active-filter-chip, .clear-all-chip),
.mv-woofs-bar button:is(.mv-woofs-chip, .mv-woofs-bar-btn, .mv-woofs-sort-option, .mv-woofs-clear) {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--mv-woofs-ink);
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    text-decoration: none;
    line-height: inherit;
    min-height: 0;
    width: auto;
    cursor: pointer;
    text-align: start;
}
.woo-filter-container button:is(.swatch-item-btn, .size-item-btn, .filter-value-token, .filter-group-clear, .filter-accordion-header, .active-filter-chip, .clear-all-chip):is(:hover, :focus, :active),
.mv-woofs-bar button:is(.mv-woofs-chip, .mv-woofs-bar-btn, .mv-woofs-sort-option, .mv-woofs-clear):is(:hover, :focus, :active) {
    background: transparent;
    box-shadow: none;
}
.woo-filter-container :is(button, [role="radio"]):focus-visible,
.mv-woofs-bar button:focus-visible {
    outline: 2px solid var(--mv-woofs-ink);
    outline-offset: 2px;
}
.woo-filter-container [hidden],
.mv-woofs-bar [hidden],
.mv-woofs-bar[hidden] {
    display: none !important;
}
/* An empty chips row takes no space in the sticky bar. */
.elementor-widget-mv_woofs_bar:has(> .mv-woofs-bar[hidden]) {
    display: none;
}

/* underline helper (mock .u): transparent until hover / selected */
.woo-filter-container .mv-u,
.mv-woofs-bar .mv-u {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--mv-woofs-dur) var(--mv-woofs-ease), color var(--mv-woofs-dur) var(--mv-woofs-ease);
}

/* ---------- panel ---------- */
.woo-filter-container {
    display: flex;
    flex-direction: column;
    font-family: var(--e-global-typography-text-font-family, sans-serif);
    direction: rtl;
    color: var(--mv-woofs-ink);
}
.woo-filter-container .filter-group-wrapper {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--mv-woofs-hair);
}
.woo-filter-container .filter-group-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 48px;
}
.woo-filter-container .filter-group-title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mv-woofs-ink);
}
.woo-filter-container .filter-group-values {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: var(--mv-woofs-muted);
}
.woo-filter-container button.filter-value-token {
    display: inline-block;
    min-width: 24px;
    min-height: 24px;
    line-height: 24px;
    padding-inline-end: 4px;
    color: var(--mv-woofs-muted);
    font-variant-numeric: tabular-nums;
    transition: color var(--mv-woofs-dur) var(--mv-woofs-ease);
}
.woo-filter-container button.filter-value-token span {
    unicode-bidi: isolate;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--mv-woofs-dur) var(--mv-woofs-ease);
}
.woo-filter-container button.filter-value-token:hover {
    color: var(--mv-woofs-ink);
}
.woo-filter-container button.filter-value-token:hover span {
    text-decoration-color: var(--mv-woofs-ink);
}
.woo-filter-container .filter-value-sep {
    font-style: normal;
}
.woo-filter-container button.filter-group-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    color: var(--mv-woofs-muted);
    transition: color var(--mv-woofs-dur) var(--mv-woofs-ease);
}
.woo-filter-container button.filter-group-clear:hover {
    color: var(--mv-woofs-ink);
}
.woo-filter-container button.filter-group-clear svg {
    width: 12px;
    height: 12px;
}
.woo-filter-container .filter-accordion-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 4px 0 24px;
}
.woo-filter-container .filter-accordion-content.js-animating {
    min-height: 0 !important; /* min-height can't animate; suppressed only mid-slide (script.js) */
}

/* sort = the one collapsible group */
.woo-filter-container button.filter-accordion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
}
.woo-filter-container .filter-group-current {
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: var(--mv-woofs-muted);
}
.woo-filter-container .accordion-chevron {
    display: inline-flex;
    margin-inline-start: auto;
    color: var(--mv-woofs-muted);
    transition: transform 300ms var(--mv-woofs-ease);
}
.woo-filter-container .accordion-chevron svg {
    width: 20px;
    height: 20px;
}
.woo-filter-container .filter-group-wrapper.accordion-open .accordion-chevron {
    transform: rotate(180deg);
}
.woo-filter-container .sort-radio-rows {
    display: flex;
    flex-direction: column;
}
.woo-filter-container .sort-radio-row {
    display: flex;
    align-items: center;
    min-height: 32px;
    cursor: pointer;
}
.woo-filter-container .sort-label {
    font-size: 14px;
    color: var(--mv-woofs-ink);
}
.woo-filter-container .sort-radio-row:hover .mv-u,
.woo-filter-container .sort-radio-row.active .mv-u {
    text-decoration-color: var(--mv-woofs-ink);
}
.woo-filter-container .sort-radio-row.active:hover .sort-label {
    color: var(--mv-woofs-fade);
}
.woo-filter-container .sort-radio-row.active:hover .mv-u {
    text-decoration-color: var(--mv-woofs-fade);
}

/* colour: rectangle + underline bar (selected / hover) */
.woo-filter-container .color-swatches-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}
.woo-filter-container button.swatch-item-btn {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--mv-woofs-sw-w);
    height: calc(var(--mv-woofs-sw-h) + 5px);
}
.woo-filter-container .swatch-fill {
    position: relative;
    display: block;
    width: 100%;
    height: var(--mv-woofs-sw-h);
    overflow: hidden;
    pointer-events: none;
    transition: opacity var(--mv-woofs-dur) var(--mv-woofs-ease);
}
.woo-filter-container .swatch-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
/* Light colours (white, cream, light blue) keep a 1px #636976 inset edge so they stay visible on
   white (13.4 / F127, WCAG 1.4.11). Fallback here; the Style-tab "Light Swatch Line" controls override. */
.woo-filter-container button.swatch-item-btn.mv-swatch--light .swatch-fill {
    box-shadow: inset 0 0 0 1px var(--mv-woofs-light-ring, var(--e-global-color-5e183c4, #636976));
}
.woo-filter-container button.swatch-item-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: transparent;
    transition: background-color var(--mv-woofs-dur) var(--mv-woofs-ease);
}
.woo-filter-container button.swatch-item-btn:hover::after,
.woo-filter-container button.swatch-item-btn.active::after {
    background: var(--mv-woofs-ink);
}
.woo-filter-container button.swatch-item-btn.active:hover::after {
    background: var(--mv-woofs-fade);
}
.woo-filter-container button.swatch-item-btn.active:hover .swatch-fill {
    opacity: 0.75;
}

/* sizes: underlined text, no box; sold-out = muted + line-through */
.woo-filter-container .size-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.woo-filter-container button.size-item-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--mv-woofs-size-w);
    height: 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mv-woofs-ink);
    font-variant-numeric: tabular-nums;
    transition: color var(--mv-woofs-dur) var(--mv-woofs-ease);
}
.woo-filter-container button.size-item-btn:hover .mv-u,
.woo-filter-container button.size-item-btn.active .mv-u {
    text-decoration-color: var(--mv-woofs-ink);
}
.woo-filter-container button.size-item-btn.active:hover {
    color: var(--mv-woofs-fade);
}
.woo-filter-container button.size-item-btn.active:hover .mv-u {
    text-decoration-color: var(--mv-woofs-fade);
}
.woo-filter-container button.size-item-btn[aria-disabled="true"] {
    color: var(--mv-woofs-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    cursor: not-allowed;
}
.woo-filter-container button.size-item-btn[aria-disabled="true"]:hover .mv-u {
    text-decoration-color: transparent;
}

/* price (off on 845 since 1.13.0; kept working for the switch) */
.woo-filter-container .price-slider-container { position: relative; min-height: 40px; padding-top: 15px; direction: ltr; }
.woo-filter-container .dual-range-track { position: absolute; top: 21px; height: 2px; left: 0; right: 0; background-color: var(--mv-woofs-hair); z-index: 1; }
.woo-filter-container .dual-range-track-fill { position: absolute; top: 20px; height: 4px; background-color: var(--mv-woofs-ink); z-index: 1; left: var(--range-min-pct, 0%); right: calc(100% - var(--range-max-pct, 100%)); }
.woo-filter-container .price-slider { position: absolute; width: 100%; height: 16px; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; top: 14px; left: 0; margin: 0; z-index: 2; }
.woo-filter-container .price-slider::-webkit-slider-thumb { height: 16px; width: 16px; border-radius: 50%; background: var(--mv-woofs-ink); cursor: pointer; -webkit-appearance: none; pointer-events: auto; }
.woo-filter-container .price-slider::-moz-range-thumb { height: 16px; width: 16px; border-radius: 50%; background: var(--mv-woofs-ink); cursor: pointer; pointer-events: auto; border: none; }
.woo-filter-container .price-slider-labels { display: flex; justify-content: space-between; font-size: 12px; margin-top: 28px; direction: ltr; }

/* legacy chips inside the panel ("Show chips inside the panel") */
.woo-filter-container .active-filters-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.woo-filter-container .active-filters-row:empty { display: none; }
.woo-filter-container button.active-filter-chip,
.mv-woofs-bar button.mv-woofs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--mv-woofs-ink);
    background: var(--mv-woofs-bg);
    color: var(--mv-woofs-ink);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: color var(--mv-woofs-dur) var(--mv-woofs-ease), border-color var(--mv-woofs-dur) var(--mv-woofs-ease);
}
.woo-filter-container button.active-filter-chip:hover,
.mv-woofs-bar button.mv-woofs-chip:hover {
    color: var(--mv-woofs-fade);
    border-color: var(--mv-woofs-fade);
    background: var(--mv-woofs-bg);
}
.mv-woofs-bar button.mv-woofs-chip svg {
    width: 12px;
    height: 12px;
    flex: none;
}
.woo-filter-container button.clear-all-chip,
.mv-woofs-bar button.mv-woofs-clear {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: var(--mv-woofs-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.woo-filter-container button.clear-all-chip:hover,
.mv-woofs-bar button.mv-woofs-clear:hover {
    text-decoration-thickness: 2px;
}

/* ---------- sticky bar ---------- */
.mv-woofs-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    direction: rtl;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    color: var(--mv-woofs-ink);
}
.mv-woofs-bar--chips {
    width: 100%;
    padding-top: 12px;
}
.mv-woofs-bar--controls {
    gap: 24px;
    min-height: 48px;
    flex-wrap: nowrap;
}
.mv-woofs-sort {
    position: relative;
}
.mv-woofs-bar button.mv-woofs-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: inherit;
    font-weight: inherit;
    color: var(--mv-woofs-ink);
}
.mv-woofs-bar button.mv-woofs-bar-btn svg {
    width: 12px;
    height: 12px;
    transition: transform 300ms var(--mv-woofs-ease);
}
.mv-woofs-bar button.mv-woofs-bar-btn[aria-expanded="true"] svg {
    transform: rotate(45deg);
}
.mv-woofs-sort-list {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 8px 16px;
    background: var(--mv-woofs-bg);
    border: 1px solid var(--mv-woofs-hair);
}
.mv-woofs-bar button.mv-woofs-sort-option {
    display: flex;
    align-items: center;
    min-height: 32px;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}
.mv-woofs-bar button.mv-woofs-sort-option:hover .mv-u,
.mv-woofs-bar button.mv-woofs-sort-option[aria-checked="true"] .mv-u {
    text-decoration-color: var(--mv-woofs-ink);
}
.mv-woofs-bar button.mv-woofs-sort-option[aria-checked="true"]:hover {
    color: var(--mv-woofs-fade);
}
.mv-woofs-bar button.mv-woofs-sort-option[aria-checked="true"]:hover .mv-u {
    text-decoration-color: var(--mv-woofs-fade);
}
.mv-woofs-count {
    /* VP-FIX lane C (audit 06 #12/#22-#24, D-115): bar widget count_position; unset = 0px (as before) */
    margin-inline-start: var(--mv-woofs-count-ms, 0px);
    color: var(--mv-woofs-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    min-width: 4em; /* reserves room: the number arrives from the footer data after load */
}
.mv-woofs-bar button.mv-woofs-clear {
    /* VP-FIX lane C (audit 06 #12/#22-#24, D-115): bar widget count_position; unset = auto (as before) */
    margin-inline-start: var(--mv-woofs-clear-ms, auto);
}

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

@media (prefers-reduced-motion: reduce) {
    .woo-filter-container *,
    .woo-filter-container *::after,
    .mv-woofs-bar *,
    .mv-woofs-bar *::after {
        transition: none !important;
    }
}