/**
 * WC Bricks Custom Filter — front-end styles.
 *
 * Design language: minimal, lots of whitespace, single accent color
 * (mustard gold) used for the slider track/handles and the primary
 * button. Override any CSS variable at the top of this file (or in
 * Bricks → Custom CSS) to match your brand.
 *
 * ALL typography is exposed as CSS variables — see the "Typography"
 * block in :root below. Override them in Bricks → Settings → Custom CSS
 * (with media queries for responsive control).
 */

:root {
        /* Color palette ------------------------------------------------------- */
        --wbcf-accent: #c9a55a;          /* mustard gold from the mockup */
        --wbcf-accent-dark: #b3914b;
        --wbcf-text: #111111;
        --wbcf-text-muted: #888888;
        --wbcf-border: #111111;
        --wbcf-border-soft: #e5e5e5;
        --wbcf-bg: #ffffff;
        --wbcf-tooltip-bg: #111111;
        --wbcf-tooltip-text: #ffffff;
        --wbcf-radius: 0;
        --wbcf-spacing-block: 28px;

        /* Layout -------------------------------------------------------------- */
        --wbcf-track-height: 2px;
        --wbcf-handle-size: 16px;
        --wbcf-swatch-size: 32px;
        --wbcf-swatch-gap: 12px;
        --wbcf-colors-max-height: 250px;
        --wbcf-size-select-height: 44px;
        --wbcf-button-height: 48px;

        /* ===================================================================== */
        /* TYPOGRAPHY                                                            */
        /* ===================================================================== */
        /* All filter text uses Barlow Condensed at 18px / weight 500 by default, */
        /* matching the brand typography the user set in Bricks Theme Styles.   */
        /* The size <select> is the only exception — it stays at 14px so the    */
        /* option list inside the dropdown does not look oversized.              */
        /*                                                                       */
        /* To make Bricks Theme Styles control the font instead, override the    */
        /* `--wbcf-*-font` variables in Bricks → Custom CSS:                    */
        /*                                                                       */
        /*   :root { --wbcf-title-font: inherit; --wbcf-label-font: inherit; ... */
        /*                                                                       */
        /* Responsive example (paste into Bricks Custom CSS):                   */
        /*                                                                       */
        /*   @media (max-width: 768px) {                                         */
        /*     :root {                                                          */
        /*       --wbcf-title-size: 16px;                                       */
        /*       --wbcf-label-size: 16px;                                       */
        /*     }                                                                */
        /*   }                                                                  */

        /* Shared typography token — single source of truth for the brand font. */
        --wbcf-font-family: 'Barlow Condensed', inherit;
        --wbcf-font-size: 18px;
        --wbcf-font-weight: 500;

        /* Top title — "FILTER BY" */
        --wbcf-title-font: var(--wbcf-font-family);
        --wbcf-title-size: var(--wbcf-font-size);
        --wbcf-title-weight: var(--wbcf-font-weight);
        --wbcf-title-spacing: 0.02em;       /* 2% of font size */
        --wbcf-title-transform: uppercase;
        --wbcf-title-line-height: 1.2;
        --wbcf-title-color: var(--wbcf-text);

        /* Section labels — "PRICE", "COLOR", "SIZE" */
        --wbcf-label-font: var(--wbcf-font-family);
        --wbcf-label-size: var(--wbcf-font-size);
        --wbcf-label-weight: var(--wbcf-font-weight);
        --wbcf-label-spacing: 0.02em;
        --wbcf-label-transform: uppercase;
        --wbcf-label-line-height: 1.2;
        --wbcf-label-color: var(--wbcf-text);
        --wbcf-label-margin: 0 0 14px;

        /* Price values (the numbers above the handles) */
        --wbcf-price-font: var(--wbcf-font-family);
        --wbcf-price-size: var(--wbcf-font-size);
        --wbcf-price-weight: var(--wbcf-font-weight);
        --wbcf-price-spacing: 0;
        --wbcf-price-transform: none;
        --wbcf-price-color: var(--wbcf-text);

        /* Size dropdown — the ONLY exception: 14px so the option list stays compact. */
        --wbcf-select-font: var(--wbcf-font-family);
        --wbcf-select-size: 14px;
        --wbcf-select-weight: var(--wbcf-font-weight);
        --wbcf-select-spacing: 0.06em;
        --wbcf-select-transform: uppercase;
        --wbcf-select-color: var(--wbcf-text);

        /* Color name tooltip (floating) */
        --wbcf-tooltip-font: var(--wbcf-font-family);
        --wbcf-tooltip-size: 14px;
        --wbcf-tooltip-weight: var(--wbcf-font-weight);
        --wbcf-tooltip-spacing: 0.04em;
        --wbcf-tooltip-transform: uppercase;
        --wbcf-tooltip-line-height: 1.4;

        /* Buttons (built-in fallback only — your Bricks buttons use their own styles) */
        --wbcf-button-font: var(--wbcf-font-family);
        --wbcf-button-size: var(--wbcf-font-size);
        --wbcf-button-weight: var(--wbcf-font-weight);
        --wbcf-button-spacing: 0.12em;
        --wbcf-button-transform: uppercase;
}

/* ----------------------------------------------------------------------- */
/* Container                                                                */
/* ----------------------------------------------------------------------- */

.wbcf-filter {
        /* Default to the brand font so every child element (including <select>
           options, which don't inherit font-family in some browsers) uses
           Barlow Condensed unless a more specific --wbcf-*-font overrides it. */
        font-family: var(--wbcf-font-family);
        font-size: var(--wbcf-font-size);
        font-weight: var(--wbcf-font-weight);
        color: var(--wbcf-text);
        background: var(--wbcf-bg);
}

.wbcf-filter__title {
        margin: 0 0 var(--wbcf-spacing-block);
        font-family: var(--wbcf-title-font);
        font-size: var(--wbcf-title-size);
        font-weight: var(--wbcf-title-weight);
        letter-spacing: var(--wbcf-title-spacing);
        text-transform: var(--wbcf-title-transform);
        line-height: var(--wbcf-title-line-height);
        color: var(--wbcf-title-color);
}

.wbcf-filter__group {
        border: 0;
        padding: 0;
        margin: 0 0 var(--wbcf-spacing-block);
        min-width: 0;
}

.wbcf-filter__group:last-of-type {
        margin-bottom: 0;
}

.wbcf-filter__label {
        display: block;
        padding: 0;
        margin: var(--wbcf-label-margin);
        font-family: var(--wbcf-label-font);
        font-size: var(--wbcf-label-size);
        font-weight: var(--wbcf-label-weight);
        letter-spacing: var(--wbcf-label-spacing);
        text-transform: var(--wbcf-label-transform);
        line-height: var(--wbcf-label-line-height);
        color: var(--wbcf-label-color);
}

/* ----------------------------------------------------------------------- */
/* Price slider                                                             */
/* ----------------------------------------------------------------------- */

.wbcf-price {
        display: block;
}

.wbcf-price__slider {
        position: relative;
        /* Reserve room above the track for the price labels. */
        padding-top: 28px;
        padding-bottom: 4px;
}

.wbcf-price__labels {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 24px;
        pointer-events: none;
}

.wbcf-price__label {
        position: absolute;
        top: 0;
        white-space: nowrap;
        font-family: var(--wbcf-price-font);
        font-size: var(--wbcf-price-size);
        font-weight: var(--wbcf-price-weight);
        letter-spacing: var(--wbcf-price-spacing);
        text-transform: var(--wbcf-price-transform);
        color: var(--wbcf-price-color);
        line-height: 1.2;
}

/* Min price label: pinned to the LEFT edge of the slider — left-aligned, */
/* does not move when the handle is dragged. Only the number updates.      */
.wbcf-price__label--min {
        left: 0;
        transform: translateX(0);
}

/* Max price label: pinned to the RIGHT edge of the slider — right-aligned, */
/* does not move when the handle is dragged. Only the number updates.         */
.wbcf-price__label--max {
        left: 100%;
        transform: translateX(-100%);
}

.wbcf-price__track {
        position: relative;
        height: var(--wbcf-track-height);
        width: 100%;
        background: var(--wbcf-border-soft);
        border-radius: 0;
        margin-top: 0;
        margin-bottom: calc(var(--wbcf-handle-size) / 2);
        cursor: pointer;
        --wbcf-range-left: 0%;
        --wbcf-range-right: 100%;
}

.wbcf-price__range {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--wbcf-range-left);
        right: calc(100% - var(--wbcf-range-right));
        background: var(--wbcf-accent);
}

.wbcf-price__handle {
        position: absolute;
        top: 50%;
        width: var(--wbcf-handle-size);
        height: var(--wbcf-handle-size);
        transform: translate(-50%, -50%);
        background: var(--wbcf-accent);
        border: 2px solid var(--wbcf-bg);
        border-radius: 50%;
        box-shadow: 0 0 0 1px var(--wbcf-accent);
        cursor: grab;
        touch-action: none;
        outline: none;
        transition: box-shadow .15s ease, transform .15s ease;
}

.wbcf-price__handle--min {
        left: var(--wbcf-range-left);
}

.wbcf-price__handle--max {
        left: var(--wbcf-range-right);
}

.wbcf-price__handle:hover,
.wbcf-price__handle:focus-visible,
.wbcf-price__handle.is-dragging {
        box-shadow: 0 0 0 1px var(--wbcf-accent), 0 0 0 6px rgba(201, 165, 90, 0.18);
}

.wbcf-price__handle.is-dragging {
        cursor: grabbing;
}

/* ----------------------------------------------------------------------- */
/* Colors                                                                   */
/* ----------------------------------------------------------------------- */

.wbcf-colors {
        display: flex;
        flex-wrap: wrap;
        gap: var(--wbcf-swatch-gap);
        max-height: var(--wbcf-colors-max-height);
        overflow-y: auto;
        overflow-x: hidden;
        /* Symmetric padding so the first column's selected-ring (3px box-shadow)
           and hover-scale (1.08x ≈ 1.3px growth on each side) are NOT clipped
           by overflow-x:hidden on the left side. Same on the right for the
           last column. 6px > 3px ring + 1.3px scale = comfortable margin. */
        padding: 6px 6px 6px 6px;

        scrollbar-width: thin;
        scrollbar-color: var(--wbcf-border-soft) transparent;
}

.wbcf-colors::-webkit-scrollbar {
        width: 6px;
}

.wbcf-colors::-webkit-scrollbar-track {
        background: transparent;
}

.wbcf-colors::-webkit-scrollbar-thumb {
        background: var(--wbcf-border-soft);
        border-radius: 3px;
}

.wbcf-colors::-webkit-scrollbar-thumb:hover {
        background: var(--wbcf-text-muted);
}

.wbcf-colors__item {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        width: var(--wbcf-swatch-size);
        height: var(--wbcf-swatch-size);
}

.wbcf-colors__item input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
}

.wbcf-colors__swatch {
        width: var(--wbcf-swatch-size);
        height: var(--wbcf-swatch-size);
        border-radius: 50%;
        border: 1px solid var(--wbcf-border-soft);
        display: inline-block;
        background-size: cover;
        background-position: center;
        transition: transform .15s ease, box-shadow .15s ease;
}

.wbcf-colors__item:hover .wbcf-colors__swatch {
        transform: scale(1.08);
}

.wbcf-colors__item.is-selected .wbcf-colors__swatch {
        box-shadow: 0 0 0 2px var(--wbcf-bg), 0 0 0 3px var(--wbcf-text);
}

.wbcf-colors__item input:focus-visible + .wbcf-colors__swatch {
        box-shadow: 0 0 0 2px var(--wbcf-bg), 0 0 0 3px var(--wbcf-accent);
}

/* The inline color name is hidden visually — replaced by a JS-managed    */
/* floating tooltip (see .wbcf-colors__floating-tooltip below) that is     */
/* NOT clipped by the scroll container.                                    */
.wbcf-colors__name {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
}

/* The floating tooltip — appended to <body> by JS so it is never clipped. */
.wbcf-colors__floating-tooltip {
        position: fixed;
        z-index: 99999;
        max-width: 240px;
        padding: 5px 9px;
        background: var(--wbcf-tooltip-bg);
        color: var(--wbcf-tooltip-text);
        font-family: var(--wbcf-tooltip-font);
        font-size: var(--wbcf-tooltip-size);
        font-weight: var(--wbcf-tooltip-weight);
        letter-spacing: var(--wbcf-tooltip-spacing);
        text-transform: var(--wbcf-tooltip-transform);
        line-height: var(--wbcf-tooltip-line-height);
        white-space: nowrap;
        border-radius: 2px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .12s ease;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.wbcf-colors__floating-tooltip.is-visible {
        opacity: 1;
        visibility: visible;
}

.wbcf-colors__floating-tooltip::after {
        content: '';
        position: absolute;
        /* --wbcf-arrow-left is set by JS so the arrow keeps pointing at the
           swatch even when the tooltip itself is clamped to the viewport
           edge. Falls back to 50% (centered) when JS has not run yet. */
        left: var(--wbcf-arrow-left, 50%);
        transform: translateX(-50%);
        border: 4px solid transparent;
}

.wbcf-colors__floating-tooltip[data-placement="above"]::after {
        top: 100%;
        border-top-color: var(--wbcf-tooltip-bg);
}

.wbcf-colors__floating-tooltip[data-placement="below"]::after {
        bottom: 100%;
        border-bottom-color: var(--wbcf-tooltip-bg);
}

/* ----------------------------------------------------------------------- */
/* Size select                                                              */
/* ----------------------------------------------------------------------- */

.wbcf-size {
        position: relative;
}

.wbcf-size__select {
        width: 100%;
        height: var(--wbcf-size-select-height);
        padding: 0 36px 0 14px;
        font-family: var(--wbcf-select-font);
        font-size: var(--wbcf-select-size);
        font-weight: var(--wbcf-select-weight);
        letter-spacing: var(--wbcf-select-spacing);
        text-transform: var(--wbcf-select-transform);
        color: var(--wbcf-select-color);
        background: var(--wbcf-bg);
        border: 1px solid var(--wbcf-border);
        border-radius: var(--wbcf-radius);
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        cursor: pointer;
        outline: none;
        transition: border-color .15s ease;
}

.wbcf-size__select:hover {
        border-color: var(--wbcf-accent);
}

.wbcf-size__select:focus-visible {
        border-color: var(--wbcf-accent);
        box-shadow: 0 0 0 3px rgba(201, 165, 90, 0.15);
}

/* <option> elements do not inherit font-family from <select> in some
   browsers (notably Windows Chrome / Edge). Force the brand font there
   too so the open dropdown list matches the rest of the filter. */
.wbcf-size__select option {
        font-family: var(--wbcf-select-font);
        font-size: var(--wbcf-select-size);
        font-weight: var(--wbcf-select-weight);
        color: var(--wbcf-select-color);
}

.wbcf-size__chevron {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--wbcf-text);
        pointer-events: none;
        display: inline-flex;
}

/* ----------------------------------------------------------------------- */
/* Native button classes (used by Bricks buttons with class wbcf-apply     */
/* or wbcf-clear). These provide default mustard-gold / outline styling    */
/* — override freely in the Bricks editor.                                  */
/* ----------------------------------------------------------------------- */

.wbcf-apply,
.apply {
        background: var(--wbcf-accent);
        color: #ffffff;
        border: 1px solid var(--wbcf-accent);
        font-family: var(--wbcf-button-font);
        font-size: var(--wbcf-button-size);
        font-weight: var(--wbcf-button-weight);
        letter-spacing: var(--wbcf-button-spacing);
        text-transform: var(--wbcf-button-transform);
}

.wbcf-apply:hover,
.apply:hover {
        background: var(--wbcf-accent-dark);
        border-color: var(--wbcf-accent-dark);
}

.wbcf-clear,
.clear {
        background: transparent;
        color: var(--wbcf-text);
        border: 1px solid var(--wbcf-border);
        font-family: var(--wbcf-button-font);
        font-size: var(--wbcf-button-size);
        font-weight: var(--wbcf-button-weight);
        letter-spacing: var(--wbcf-button-spacing);
        text-transform: var(--wbcf-button-transform);
}

.wbcf-clear:hover,
.clear:hover {
        background: var(--wbcf-text);
        color: var(--wbcf-bg);
}

/* ----------------------------------------------------------------------- */
/* Fallback buttons (used only with show_buttons="1" attribute).            */
/* ----------------------------------------------------------------------- */

.wbcf-filter__buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: var(--wbcf-spacing-block);
}

.wbcf-btn {
        width: 100%;
        height: var(--wbcf-button-height);
        font-family: var(--wbcf-button-font);
        font-size: var(--wbcf-button-size);
        font-weight: var(--wbcf-button-weight);
        letter-spacing: var(--wbcf-button-spacing);
        text-transform: var(--wbcf-button-transform);
        cursor: pointer;
        border-radius: var(--wbcf-radius);
        transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.wbcf-btn--apply {
        background: var(--wbcf-accent);
        color: #ffffff;
        border: 1px solid var(--wbcf-accent);
}

.wbcf-btn--apply:hover {
        background: var(--wbcf-accent-dark);
        border-color: var(--wbcf-accent-dark);
}

.wbcf-btn--clear {
        background: transparent;
        color: var(--wbcf-text);
        border: 1px solid var(--wbcf-border);
}

.wbcf-btn--clear:hover {
        background: var(--wbcf-text);
        color: var(--wbcf-bg);
}

/* ----------------------------------------------------------------------- */
/* Admin column swatch                                                       */
/* ----------------------------------------------------------------------- */

.wbcf-col-swatch {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ----------------------------------------------------------------------- */
/* Mobile adjustments                                                       */
/* ----------------------------------------------------------------------- */

@media (max-width: 600px) {
        :root {
                --wbcf-spacing-block: 22px;
                --wbcf-swatch-size: 36px;
        }
}