/**
* WBW Product Filter — scoped brand overrides (v1.6.0 — SQUARER BUTTONS).
*
* Written 2026-04-25 against the full cascade documented in
* `_wip/memory-snapshot/reference_wbw_cascade_architecture.md`.
*
* v1.6.0 (Luis 2026-04-25 third pass):
* - Apply + Clear buttons: border-radius 6px → 4px (squarer, still
* readable as a button rather than a flat panel). Padding tightened
* 11px×26px → 10px×22px so the button feels less pill-like with the
* smaller radius. min-height 44px preserved (WCAG touch target).
* - Coordinated with the slider JS v1.6.0 typed-clamp fix that lives in
* trade-price-slider.js — no CSS impact from that change.
*
* v1.5.4 changes vs v1.5.3 (Luis 2026-04-25 second pass):
* - BUTTONS back to BRAND BLUE. v1.5.3 misread "modern" as "switch
* to dark pill"; Luis likes blue. Keep the modern stylings
* (16px radius, Roboto 500, padding, transitions, focus-visible,
* flex container) but recolour to Avada `--awb-color6` #1966af
* base + `#41aaf2` hover (Avada theme convention for blue buttons
* per `--button_gradient_top_color_hover`) + `#12508a` active.
* - ROW SPACING tightened. v1.5.3 li padding `5px 0` + line-height
* 1.4 made rows feel spaced-out. Reduced to `1px 0` + line-height
* 1.3 so the list reads compact without losing touch-target size.
* - Everything else from v1.5.3 preserved: duplicate-checkbox
* visually-hidden defense, ::after unchecked suppression, 20×20
* dark checkbox visual, #2b2b2b label text, 12px checkbox-to-text
* gap. Luis confirmed those work.
*
* v1.5.3 changes (kept):
* 1. DUPLICATE-CHECKBOX DEFENSE — belt-and-braces hide of the native
* via visually-hidden pattern
* (position:absolute; 1×1px; clip-path:inset(50%)) — beats any
* theme rule that might re-show the native input.
* 2. ::after SUPPRESSED ON UNCHECKED — explicit `:not(:checked) + label::after`
* guards against ancestor rules re-establishing `content:""`.
* 3. MODERN CHECKBOX — 20×20, 2px #2b2b2b border, 4px radius. Checked =
* solid #333333 with white rotated-corner tick.
* 4. READABLE LABELS — #2b2b2b (Avada --body_typography-color),
* Roboto 15px 400. Hover = #1966af brand blue.
* 5. FLEX ROW LAYOUT — `.wpfLiLabel` display:flex gap:12px align:center.
*
* Cascade reminder (top wins):
* 1. WBW free 3.1.6 `custom.woofilters.css` — paints ::before+::after on
* `.wpfCheckbox label`, hides the native input, uses `!important`.
* 2. WBW Pro — does NOT touch standard checkboxes.
* 3. Avada child `main.scss.css` — on `body.archive` forces 13×13 boxes
* and colours Apply #1966af + Clear #40407a (purple).
* 4. Our plugin — must beat all the above via `body.archive` prefix +
* `!important`.
*
* Load-bearing rules preserved:
* - Guest-hide cosmetic parity (html.mms-guest + :has() + fallback)
* - Avada z-index fix for floating panel (mobile slide-in)
* - @media print hide
* - Scope guard `:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"])`
* on every checkbox/label rule — protects the MMS noUiSlider overlay.
* DO NOT relax; regressed in v1.4.0 and v1.4.2.
*/
/* ════════════════════════════════════════════════════════════════════
* Load-bearing (non-branding) rules
* ════════════════════════════════════════════════════════════════════ */
/* ─── Avada z-index fix for floating panel (mobile slide-in) ─── */
.wpfFloating,
.wpfFloatingPanel { z-index: 100001 !important; }
.wpfFloatingOverlay { z-index: 100000 !important; }
/* ─── Print — hide the filter panel ─── */
@media print {
.wpfMainWrapper,
[class*="wpf-filter-"] { display: none !important; }
}
/* ════════════════════════════════════════════════════════════════════
* GUEST-HIDE — cosmetic parity with Source Security dfpricefilter v2.4.0
* ════════════════════════════════════════════════════════════════════
*
* Plugin has THREE guest-exfil defences (JS enqueue gate + AJAX strip
* + SQL `AND 1=0`). This block hides the COSMETIC leak: WBW renders
* wpfSearchNumber boxes bound to `_trade_price` for everyone.
*/
html.mms-guest .wpfFilterItem:has([data-get-attribute*="_trade_price"]),
html.mms-guest .wpfFilterBlock:has([data-get-attribute*="_trade_price"]) {
display: none !important;
}
html.mms-guest .wpfFilterWrapper[data-get-attribute*="_trade_price"] {
display: none !important;
}
html.mms-guest .mms-tpf-slider-wrap {
display: none !important;
}
/* ════════════════════════════════════════════════════════════════════
* DUPLICATE-CHECKBOX DEFENSE — visually-hidden native input
* ════════════════════════════════════════════════════════════════════
*
* WBW's own rule `.wpfCheckbox input[type="checkbox"] { display:none!important }`
* can be overridden by higher-specificity theme rules (Avada's form
* field styling system) or by browser autofill visualisations. When
* that happens the user sees TWO boxes: WBW's native input AND our
* ::before custom box sitting next to each other.
*
* This visually-hidden pattern keeps the input keyboard-accessible and
* in the DOM for screen readers, but renders nothing visible even if
* every earlier hide rule fails. 1×1px absolute with clip-path.
*/
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox input[type="checkbox"],
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox input[type="checkbox"] {
position: absolute !important;
opacity: 0 !important;
width: 1px !important;
height: 1px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
pointer-events: none !important;
-webkit-appearance: none !important;
appearance: none !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
/* ════════════════════════════════════════════════════════════════════
* CHECKBOX VISUAL — modern dark square, 20×20, 4px radius
* ════════════════════════════════════════════════════════════════════
*
* Target `.wpfCheckbox label::before` — WBW's own canvas. Every rule
* uses !important to match WBW + Avada cascade posture.
*
* Scope guard (on every rule) excludes the MMS trade-price slider.
*/
/* Label sized to 20×20, positioned for ::before absolute layout. */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox label,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox label {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
position: relative !important;
display: inline-block !important;
box-sizing: border-box !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
/* UNCHECKED ::before — white bg, 2px dark border, rounded. */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox label::before,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox label::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
display: block !important;
background: #ffffff !important;
background-color: #ffffff !important;
background-image: none !important;
background-size: auto !important;
border: 2px solid #2b2b2b !important;
border-radius: 4px !important;
box-sizing: border-box !important;
margin: 0 !important;
transform: none !important;
transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
/* Row hover — subtle fill tint on the ::before box. */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel:hover .wpfCheckbox label::before,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel:hover .wpfCheckbox label::before {
background-color: #f6f6f6 !important;
border-color: #333333 !important;
}
/* UNCHECKED ::after — suppress explicitly. WBW ships
`input + label::after { content:none!important }` which works but
only if the input is present as a sibling. Belt-and-braces: also
kill ::after on :not(:checked) — defeats any ancestor rule that
might re-establish content. */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox input[type="checkbox"]:not(:checked) + label::after,
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel:not(.wpfChecked) .wpfCheckbox label::after,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox input[type="checkbox"]:not(:checked) + label::after,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel:not(.wpfChecked) .wpfCheckbox label::after {
content: none !important;
display: none !important;
}
/* CHECKED ::before — swap to solid dark fill + matching border.
Covers both `:checked` (DOM truth) and `.wpfChecked` (WBW JS mirror). */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox input[type="checkbox"]:checked + label::before,
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel.wpfChecked .wpfCheckbox label::before,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox input[type="checkbox"]:checked + label::before,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel.wpfChecked .wpfCheckbox label::before {
background: #333333 !important;
background-color: #333333 !important;
background-image: none !important;
background-size: auto !important;
border-color: #333333 !important;
}
/* CHECKED ::after — white rotated-corner tick inside the dark box.
Dimensions tuned for 20×20 box with 2px border: 5px wide × 10px tall
rotated 45°, centred (left:7px top:3px). */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox input[type="checkbox"]:checked + label::after,
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel.wpfChecked .wpfCheckbox label::after,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckbox input[type="checkbox"]:checked + label::after,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel.wpfChecked .wpfCheckbox label::after {
content: "" !important;
position: absolute !important;
left: 6px !important;
top: 2px !important;
width: 5px !important;
height: 10px !important;
border: solid #ffffff !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
display: block !important;
}
/* ════════════════════════════════════════════════════════════════════
* ROW LAYOUT + ATTRIBUTE LABELS — dark, readable, spaced
* ════════════════════════════════════════════════════════════════════
*
* `.wpfLiLabel` becomes flex with 12px gap between the `.wpfCheckbox`
* span and the `.wpfDisplay` span. This guarantees a consistent
* checkbox-to-text gap regardless of WBW default margin or theme.
*
* `.wpfDisplay` / `.wpfValue` / `.wpfFilterTaxNameWrapper` painted
* #2b2b2b (Avada --body_typography-color) at 15px Roboto 400 — readable
* near-black instead of WBW's default soft grey ~13px.
*/
/* Row spacing — compact. v1.5.3 used 5px+5px which felt too spaced out;
v1.5.4 tightens to 1px+1px so the list reads like a dense control
panel without losing touch-target size (flex gap handles the vertical
centering between the 20×20 checkbox and 15px label). */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckboxHier ul li,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckboxHier ul li {
padding-top: 1px !important;
padding-bottom: 1px !important;
line-height: 1.3 !important;
margin: 0 !important;
}
/* Flex layout — checkbox + label with 12px gap. */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel {
display: flex !important;
align-items: center !important;
gap: 12px !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
}
/* Label text — near-black, 15px, Roboto — readable. */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfDisplay,
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfValue,
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfFilterTaxNameWrapper,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfDisplay,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfValue,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfFilterTaxNameWrapper {
color: #2b2b2b !important;
font-family: Roboto, Arial, Helvetica, sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Row hover — text accent (beat Avada's .archive li:hover span #a7144c magenta). */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel:hover .wpfDisplay,
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel:hover .wpfValue,
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel:hover .wpfFilterTaxNameWrapper,
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckboxHier ul li:hover span,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel:hover .wpfDisplay,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel:hover .wpfValue,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel:hover .wpfFilterTaxNameWrapper,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCheckboxHier ul li:hover span {
color: #1966af !important;
}
/* Checked row — slightly heavier weight on the label. */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel.wpfChecked .wpfDisplay,
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel.wpfChecked .wpfValue,
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel.wpfChecked .wpfFilterTaxNameWrapper,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel.wpfChecked .wpfDisplay,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel.wpfChecked .wpfValue,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfLiLabel.wpfChecked .wpfFilterTaxNameWrapper {
color: #1a1a1a !important;
font-weight: 500 !important;
}
/* Count badge — dimmed, smaller, space before. */
.wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCount,
body.archive .wpfFilterWrapper:not([data-filter-type="wpfSearchNumber"]):not([data-get-attribute*="_trade_price"]) .wpfCount {
color: #747474 !important;
font-size: 13px !important;
font-weight: 400 !important;
margin-left: 6px !important;
}
/* ════════════════════════════════════════════════════════════════════
* APPLY + CLEAR BUTTONS — brand blue, modern geometry (v1.5.4)
* ════════════════════════════════════════════════════════════════════
*
* Brand-blue per Avada `--awb-color6` (the theme's primary colour,
* used across the whole site for blue buttons). Hover matches Avada's
* own `--button_gradient_top_color_hover` = #41aaf2 lighter blue.
* Active = #12508a darker press.
*
* base bg #1966af (--awb-color6 primary brand blue)
* text #ffffff
* border #1966af
* radius 4px (v1.6.0 — squarer per Luis 2026-04-25 third pass.
* Was 16px pill (v1.5.4), then 6px (v1.5.5),
* now 4px reads as professional-square without
* crossing into corporate-rigid 0px territory.)
* hover bg #41aaf2 (--button_gradient_top_color_hover lighter blue)
* active bg #12508a (darker press state)
* font Roboto 500 14px (Avada body font family)
* padding 10px 22px (v1.6.0 — tightened from 11px×26px to feel less
* pill-like; visual weight preserved)
* min-height 44px (touch-target — WCAG 2.5.8 AA, unchanged)
* transition 200ms background/border; 100ms transform on press
*
* Avada's own `.archive .wpfClearButton { background: #40407a }`
* (purple) is overridden via `body.archive` + `!important`.
*/
/* Button container — flex layout for Apply + Clear side-by-side. */
.wpfMainWrapper .wpfFilterButtons,
body.archive .wpfFilterButtons {
display: flex !important;
gap: 10px !important;
flex-wrap: wrap !important;
align-items: center !important;
}
/* Base — both buttons identical brand blue pill. */
.wpfMainWrapper .wpfFilterButtons .wpfFilterButton.wpfButton,
.wpfMainWrapper .wpfFilterButtons .wpfClearButton.wpfButton,
body.archive .wpfFilterButtons .wpfFilterButton,
body.archive .wpfFilterButtons .wpfClearButton {
background: #1966af !important;
background-color: #1966af !important;
background-image: none !important;
color: #ffffff !important;
border: 1px solid #1966af !important;
border-color: #1966af !important;
border-radius: 4px !important;
font-family: Roboto, Arial, Helvetica, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: 0.01em !important;
padding: 10px 22px !important;
height: auto !important;
min-height: 44px !important;
text-transform: none !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease !important;
cursor: pointer !important;
}
/* Hover — Avada convention: lighter blue on hover. */
.wpfMainWrapper .wpfFilterButtons .wpfFilterButton.wpfButton:hover,
.wpfMainWrapper .wpfFilterButtons .wpfClearButton.wpfButton:hover,
body.archive .wpfFilterButtons button.wpfFilterButton.wpfButton:hover,
body.archive .wpfFilterButtons button.wpfClearButton.wpfButton:hover {
background: #41aaf2 !important;
background-color: #41aaf2 !important;
color: #ffffff !important;
border-color: #41aaf2 !important;
}
/* Active — darker press. */
.wpfMainWrapper .wpfFilterButtons .wpfFilterButton.wpfButton:active,
.wpfMainWrapper .wpfFilterButtons .wpfClearButton.wpfButton:active,
body.archive .wpfFilterButtons button.wpfFilterButton.wpfButton:active,
body.archive .wpfFilterButtons button.wpfClearButton.wpfButton:active {
transform: translateY(1px) !important;
background-color: #12508a !important;
border-color: #12508a !important;
}
/* Focus-visible — dark outline for accessibility against blue bg. */
.wpfMainWrapper .wpfFilterButtons .wpfFilterButton.wpfButton:focus-visible,
.wpfMainWrapper .wpfFilterButtons .wpfClearButton.wpfButton:focus-visible,
body.archive .wpfFilterButtons button.wpfFilterButton.wpfButton:focus-visible,
body.archive .wpfFilterButtons button.wpfClearButton.wpfButton:focus-visible {
outline: 2px solid #333333 !important;
outline-offset: 2px !important;
}
/* Optional differentiation — outlined Clear reads as secondary action.
Uncomment if Luis wants Clear visually distinct from Apply.
.wpfMainWrapper .wpfFilterButtons .wpfClearButton.wpfButton,
body.archive .wpfFilterButtons .wpfClearButton {
background: #ffffff !important;
background-color: #ffffff !important;
color: #1966af !important;
border: 1px solid #1966af !important;
}
.wpfMainWrapper .wpfFilterButtons .wpfClearButton.wpfButton:hover,
body.archive .wpfFilterButtons button.wpfClearButton.wpfButton:hover {
background-color: #f2f7fc !important;
color: #1966af !important;
border-color: #41aaf2 !important;
}
*/