/* =====================================================================
   Woo Custom Filter – filter.css  v1.6.2
   Colours & labels managed via WooCommerce → Filter Settings
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Fallback variables (overridden by inline CSS from WP Admin) ── */
.wcf-filter-bar {
    --wcf-surface:      #5b5e54;
    --wcf-bg:           #4a4d44;
    --wcf-border:       #737668;
    --wcf-text:         #ffffff;
    --wcf-muted:        #c8cbbf;
    --wcf-gold:         #C9A96E;
    --wcf-swatch-size:  36px;
    --wcf-radius:       8px;
    --wcf-label-color:  #c8cbbf;
    --wcf-label-size:   13px;
    --wcf-shadow:       0 4px 24px rgba(0,0,0,.25);
    --wcf-font:         'DM Sans', sans-serif;
    --wcf-ease:         0.22s cubic-bezier(0.4,0,0.2,1);
}

/* =====================================================================
   RESET
   ===================================================================== */
.wcf-filter-bar, .wcf-filter-bar * { box-sizing: border-box; }

/* =====================================================================
   FILTER BAR SHELL
   ===================================================================== */
.wcf-filter-bar {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    padding:        20px;
    margin-bottom:  24px;
    width:          100%;
    background:     var(--wcf-surface);
    border:         1px solid var(--wcf-border);
    border-radius:  var(--wcf-radius);
    box-shadow:     var(--wcf-shadow);
    font-family:    var(--wcf-font);
    position:       relative;
}

/* Gold top rule */
.wcf-filter-bar::before {
    content:       '';
    position:      absolute;
    top:0; left:0; right:0;
    height:        3px;
    background:    linear-gradient(90deg, var(--wcf-gold), #e8c98a, var(--wcf-gold));
    border-radius: var(--wcf-radius) var(--wcf-radius) 0 0;
    pointer-events: none;
}

/* ── Group + label ───────────────────────────────────────────────── */
.wcf-group { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.wcf-label {
    font-size:      var(--wcf-label-size);
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--wcf-label-color);
    display:        block;
}

/* =====================================================================
   COLOUR SECTION
   ===================================================================== */
.wcf-colour-group {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    align-items:    center;
}

.wcf-colour-swatches {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    width:          100%;
    align-items:    center;
}

/* ── "All" pill — standalone full-width row ─────────────────────── */
.wcf-all-row {
    width:           100%;
    display:         flex;
    justify-content: center;
}

.wcf-pill-all {
    width:           100%;
    max-width:       100%;
    padding:         10px 20px;
    height:          44px;
    border-radius:   24px;
    font-family:     var(--wcf-font);
    font-size:       14px;
    font-weight:     500;
    color:           var(--wcf-text);
    background:      rgba(255,255,255,.1);
    cursor:          pointer;
    outline:         none;
    white-space:     nowrap;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--wcf-ease), color var(--wcf-ease);
    border:          3px solid transparent;
    background-clip: padding-box;
    position:        relative;
}

/* Rainbow border */
.wcf-pill-all::before {
    content:       '';
    position:      absolute;
    inset:         -3px;
    border-radius: 27px;
    background:    linear-gradient(90deg,
                       #d1230d, #F97316, #EAB308,
                       #22C55E, #3B82F6, #A855F7,
                       #EC4899, #d1230d);
    z-index:       -1;
    pointer-events: none;
}

.wcf-pill-all:hover         { background: rgba(255,255,255,.18); }
.wcf-pill-all.is-active     { background: rgba(255,255,255,.95); color: var(--wcf-surface); font-weight: 600; }

/* ── Swatch circles row ──────────────────────────────────────────── */
.wcf-swatches-row {
    display:         flex;
    flex-wrap:       wrap;
    gap:             10px;
    justify-content: center;
    width:           100%;
}

.wcf-swatch {
    flex-shrink:    0;
    width:          var(--wcf-swatch-size);
    height:         var(--wcf-swatch-size);
    min-width:      44px;
    min-height:     44px;
    border-radius:  50%;
    border:         2px solid transparent;
    background:     var(--wcf-bg);
    cursor:         pointer;
    padding:        0;
    outline:        none;
    font-family:    var(--wcf-font);
    font-size:      10px;
    font-weight:    500;
    color:          var(--wcf-text);
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    transition:     transform var(--wcf-ease), border-color var(--wcf-ease), box-shadow var(--wcf-ease);
}
.wcf-swatch:hover,
.wcf-swatch:focus-visible  { transform: scale(1.1);  box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.wcf-swatch.is-active      { border-color: #fff; box-shadow: 0 0 0 3px #fff; transform: scale(1.08); }
.wcf-swatch[style*="#F5F5F5"] { border-color: var(--wcf-border) !important; }

/* =====================================================================
   PILLS ROW — 2×2 grid on mobile, flex on desktop
   ===================================================================== */
.wcf-pills-group {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;  /* left-align children incl. reset button */
    gap:            12px;
}

.wcf-pills-row {
    display:         grid;
    grid-template-columns: 1fr 1fr;
    gap:             8px;
    width:           100%;
}

.wcf-pill-divider { display: none; }

/* ── Shared pill ─────────────────────────────────────────────────── */
.wcf-pill {
    padding:         11px 12px;
    border:          1.5px solid rgba(255,255,255,.3);
    border-radius:   24px;
    font-family:     var(--wcf-font);
    font-size:       13px;
    font-weight:     400;
    color:           #e8e8e0;
    background:      transparent;
    cursor:          pointer;
    white-space:     nowrap;
    outline:         none;
    text-align:      center;
    min-height:      44px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--wcf-ease), color var(--wcf-ease), border-color var(--wcf-ease);
}
.wcf-pill:hover,
.wcf-pill:focus-visible { border-color: #fff; color: #fff; }
.wcf-pill.is-active     { background: #fff !important; color: var(--wcf-surface) !important; border-color: #fff !important; font-weight: 500; }

/* Series pills */
.wcf-pill--series              { border-color: rgba(201,169,110,.5); color: #e8d9b8; }
.wcf-pill--series:hover,
.wcf-pill--series:focus-visible { border-color: var(--wcf-gold); color: var(--wcf-gold); }
.wcf-pill--series.is-active    { background: var(--wcf-gold) !important; color: #2c2a27 !important; border-color: var(--wcf-gold) !important; font-weight: 600; }

/* =====================================================================
   IN STOCK TOGGLE — inline with pills, slightly larger
   ===================================================================== */
.wcf-toggle-label,
.wcf-toggle-inline {
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    cursor:         pointer;
    user-select:    none;
    min-height:     46px;
    padding:        0 4px;
    /* Prevent grid/flex parent from squashing the click area */
    width:          auto;
    flex-shrink:    0;
    /* Grid: span its own cell properly on mobile */
    grid-column:    span 2;  /* span both columns so it sits on its own row */
}

.wcf-toggle-input    { position: absolute; opacity: 0; width: 0; height: 0; }

.wcf-toggle-track {
    position:      relative;
    display:       inline-flex;
    width:         52px; height: 30px;
    border-radius: 15px;
    background:    var(--wcf-border);
    flex-shrink:   0;
    transition:    background var(--wcf-ease);
}
.wcf-toggle-thumb {
    position:      absolute;
    top: 4px; left: 4px;
    width:         22px; height: 22px;
    border-radius: 50%;
    background:    #fff;
    box-shadow:    0 1px 4px rgba(0,0,0,.25);
    transition:    transform var(--wcf-ease);
}
.wcf-toggle-input:checked ~ .wcf-toggle-track                   { background: var(--wcf-gold); }
.wcf-toggle-input:checked ~ .wcf-toggle-track .wcf-toggle-thumb { transform: translateX(22px); }
.wcf-toggle-input:focus-visible ~ .wcf-toggle-track             { outline: 2px solid var(--wcf-gold); outline-offset: 2px; }

.wcf-toggle-text {
    font-family: var(--wcf-font);
    font-size:   15px;
    font-weight: 500;
    color:       var(--wcf-text);
    white-space: nowrap;
}

/* =====================================================================
   CLEAR FILTERS — left-aligned under Series One pill
   ===================================================================== */
.wcf-reset {
    display:       none;
    width:         auto;        /* shrink to content, not full width */
    align-self:    flex-start;  /* left-align within pills-group flex column */
    padding:       10px 20px;
    border:        1.5px solid rgba(255,180,180,.5);
    border-radius: 24px;
    background:    transparent;
    color:         #ffb3b3;
    font-family:   var(--wcf-font);
    font-size:     13px;
    font-weight:   500;
    cursor:        pointer;
    text-align:    center;
    min-height:    44px;
    outline:       none;
    transition:    background var(--wcf-ease), color var(--wcf-ease),
                   border-color var(--wcf-ease);
}
.wcf-reset.is-visible        { display: inline-flex; align-items: center; }
.wcf-reset:hover,
.wcf-reset:focus-visible     { background: #C0585A; color: #fff; border-color: #C0585A; }

/* =====================================================================
   LOADING + NO RESULTS
   ===================================================================== */
.wcf-filter-bar.is-loading::after {
    content: ''; position: absolute; inset: 0; border-radius: var(--wcf-radius);
    background: rgba(91,94,84,.6); backdrop-filter: blur(2px); pointer-events: all; z-index: 10;
}
.wcf-no-results { color: #e8e8e0; padding: 32px 16px; text-align: center; font-family: var(--wcf-font); font-size: 15px; width: 100%; }
.wcf-no-results a { color: var(--wcf-gold); }

/* =====================================================================
   METALLIC SWATCHES
   ===================================================================== */
.wcf-swatch--metallic:hover,
.wcf-swatch--metallic:focus-visible { transform: scale(1.12); box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.35); }
.wcf-swatch--metallic.is-active     { border-color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,0.25); transform: scale(1.1); }
.wcf-swatch[data-value="gold"].is-active   { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #b8860b; }
.wcf-swatch[data-value="silver"].is-active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #888; }

/* =====================================================================
   TABLET  600px+
   ===================================================================== */
@media (min-width: 600px) {
    .wcf-filter-bar { padding: 22px; gap: 24px; }

    .wcf-pills-row { grid-template-columns: 1fr 1fr; gap: 8px; }

    /* On tablet, toggle spans both columns so it sits on its own row cleanly */
    .wcf-toggle-label,
    .wcf-toggle-inline { grid-column: span 2; }

    .wcf-pill-divider {
        display:    inline-block;
        width:      1px; height: 28px;
        background: rgba(255,255,255,.2);
        flex-shrink: 0; margin: 0 4px;
    }

    .wcf-swatch--all { font-size: 14px; }
}

/* =====================================================================
   DESKTOP  900px+  —  side-by-side: colour left | pills+stock right
   ===================================================================== */
@media (min-width: 900px) {
    .wcf-filter-bar {
        flex-direction: row;
        align-items:    flex-start;
        gap:            32px;
        padding:        24px 28px;
    }

    .wcf-colour-group {
        flex:      0 0 220px;
        width:     220px;
        min-width: 180px;
        max-width: 240px;
    }

    .wcf-pills-group {
        flex:           1;
        align-items:    flex-start;  /* keep reset left-aligned */
    }

    .wcf-pills-row {
        display:     flex;
        flex-wrap:   wrap;
        align-items: center;
        gap:         10px;
        width:       100%;
    }

    /* On desktop the toggle is in a flex row — undo the mobile grid-column span */
    .wcf-toggle-label,
    .wcf-toggle-inline {
        grid-column: auto;
    }

    .wcf-pill { padding: 10px 18px; font-size: 13.5px; min-height: 44px; }

    .wcf-pill-divider {
        display:    inline-block;
        width:      1px; height: 28px;
        background: rgba(255,255,255,.2);
        margin:     0 4px;
    }

    .wcf-swatches-row { justify-content: center; }
    .wcf-pill-all     { width: 100%; font-size: 14px; }
    .wcf-reset        { width: auto; align-self: center; padding: 9px 20px; min-height: 40px; }
}

/* =====================================================================
   LARGE DESKTOP  1200px+
   ===================================================================== */
@media (min-width: 1200px) {
    .wcf-filter-bar   { gap: 40px; padding: 24px 36px; }
    .wcf-colour-group { flex: 0 0 240px; max-width: 260px; }
}