/* ============================================================
   ABSQURA SMART FILTERS v2 — Uses native WP sidebar
   ============================================================ */

/* ── LAYOUT — CSS grid on the WC section ──────────────────── */
/* JS adds .absqura-has-filters to the section when sidebar is present */
section.absqura-has-filters {
    display: grid;
    grid-template-columns: var(--absqura-sidebar-width, 260px) 1fr;
    gap: 0 40px;
    align-items: start;
}

.absqura-sidebar-area {
    grid-column: 1;
    grid-row: 1;
    padding-right: 8px;
}

.absqura-sidebar-area.is-sticky {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--abq-line, rgba(0,0,0,0.08)) transparent;
}

/* Everything else (products header, notices, listing-top bar, product
   grid, pagination, ...) gets wrapped into one container by filters.js
   (initSidebarLayout) so it's a single grid item in column 2 — this
   avoids each of those near-empty elements creating its own grid row,
   which previously made the tall sticky sidebar (spanning all rows)
   dump its whole height into row 1 and push the product grid far down
   the page with a large empty gap above it. */
.absqura-main-area {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

/* ── SIDEBAR WIDGET ──────────────────────────────────────── */
.widget_absqura_smart_filters {
    padding: 0;
}

.absqura-sidebar-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--abq-line, rgba(0,0,0,0.08));
}
.absqura-sidebar-heading .widget-title,
.absqura-sidebar-heading .absqura-sidebar-title {
    font-family: Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 20px;
    margin: 0; padding: 0; border: none;
}
/* Same !important requirement as .absqura-filter-header above — bare
   <button>, needs to override the sitewide global button rule. */
.absqura-toggle-all {
    flex-shrink: 0; background: none !important; border: none !important; cursor: pointer;
    height: auto !important; min-height: 0 !important;
    font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--abq-gold-text, #9e8148) !important;
}
.absqura-toggle-all:hover { color: var(--abq-ink, #0e0e0e); }

/* Same !important requirement as .absqura-toggle-all above — bare
   <button>, needs to override the sitewide global button rule. This is
   the "Reset" button in the sidebar heading (distinct from
   .absqura-desktop-apply-bar .absqura-btn-text, the manual-apply-mode
   footer button, which is styled separately below). */
.absqura-sidebar-heading-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.absqura-sidebar-heading-actions .absqura-btn-text {
    background: none !important; border: none !important; cursor: pointer;
    height: auto !important; min-height: 0 !important; padding: 0 !important;
    font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--abq-gold-text, #9e8148) !important;
    text-decoration: none !important;
}
.absqura-sidebar-heading-actions .absqura-btn-text:hover { color: var(--abq-ink, #0e0e0e) !important; }

/* Manual apply mode bar */
.absqura-desktop-apply-bar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px; padding-bottom: 20px;
    border-bottom: 1px solid var(--abq-line, rgba(0,0,0,0.08));
}
.absqura-desktop-apply-bar .absqura-btn {
    padding: 10px 16px; border: none; border-radius: var(--abq-radius, 4px);
    font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
}
.absqura-desktop-apply-bar .absqura-btn-primary { background: var(--abq-ink, #0e0e0e); color: #fff; flex: 1; }
.absqura-desktop-apply-bar .absqura-btn-text {
    background: none; color: var(--abq-muted, #6b6b6b); text-decoration: underline;
    font-family: 'DM Sans', sans-serif; font-size: 12px; cursor: pointer; border: none;
}

/* Search inside a long option list */
.absqura-filter-search {
    display: block; width: 100%; margin-bottom: 10px; padding: 8px 10px;
    border: 1px solid var(--abq-line, rgba(0,0,0,0.08)); border-radius: var(--abq-radius, 4px);
    font-family: 'DM Sans', sans-serif; font-size: 16px;
    background: var(--abq-bg, #fff); color: var(--abq-ink, #0e0e0e);
}
.absqura-filter-search:focus { outline: none; border-color: var(--abq-gold, #c8a96e); }

/* Flat filter style — no collapse affordance */
.absqura-style-flat .absqura-filter-header { cursor: default; }
.absqura-style-flat .absqura-filter-chevron { display: none; }

/* ── FILTER GROUP ─────────────────────────────────────────── */
.absqura-filter-group {
    border-bottom: 1px solid var(--abq-line, rgba(0,0,0,0.08));
}

/* !important needed on background/border/height/display: this is a bare
   <button> (an accordion disclosure trigger, not a CTA), and the sitewide
   global `button{}` rule forces a solid CTA look (black fill, fixed
   height) onto every button tag unless overridden here explicitly.
   Found/fixed 2026-07-22 during a sitewide button-consistency pass. */
.absqura-filter-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 0;
    background: none !important;
    border: none !important;
    border-bottom: 1px solid var(--abq-line, rgba(0,0,0,0.08)) !important;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--abq-ink, #0e0e0e) !important;
}

.absqura-filter-header:hover { color: var(--abq-gold-text, #9e8148); }

.absqura-filter-label { display: flex; align-items: center; gap: 8px; }

.absqura-filter-chevron { transition: transform 0.25s ease; flex-shrink: 0; }
.absqura-filter-group.is-open .absqura-filter-chevron { transform: rotate(180deg); }

.absqura-filter-body { display: none; padding: 0 0 14px; }
.absqura-filter-group.is-open .absqura-filter-body { display: block; }

/* ── CHECKBOX OPTIONS ─────────────────────────────────────── */
.absqura-filter-options { display: flex; flex-direction: column; gap: 2px; }

.absqura-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: var(--abq-radius, 4px);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: var(--abq-text, #333);
    cursor: pointer;
    transition: background 0.2s ease;
}
.absqura-filter-option:hover { background: var(--abq-soft, #f0ede6); }

.absqura-filter-checkbox {
    width: 16px; height: 16px;
    border: 1.5px solid var(--abq-line, rgba(0,0,0,0.08));
    border-radius: 0;
    appearance: none; -webkit-appearance: none;
    cursor: pointer; position: relative; flex-shrink: 0;
    transition: all 0.2s ease;
}
.absqura-filter-checkbox:checked { background: var(--abq-ink, #0e0e0e); border-color: var(--abq-ink, #0e0e0e); }
.absqura-filter-checkbox:checked::after {
    content: ''; position: absolute; top: 2px; left: 5px;
    width: 4px; height: 7px;
    border: solid #fff; border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.absqura-filter-checkbox:focus-visible { outline: 2px solid var(--abq-gold, #c8a96e); outline-offset: 2px; }

.absqura-filter-option-label { flex: 1; }
.absqura-filter-option-count { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--abq-muted, #6b6b6b); }

/* Locked category on a category page — always checked, can't be unchecked. */
.absqura-filter-option-locked { cursor: default; }
.absqura-filter-option-locked:hover { background: none; }
.absqura-filter-option-locked .absqura-filter-checkbox:disabled {
    cursor: default; opacity: 1;
    background: var(--abq-gold, #c8a96e); border-color: var(--abq-gold, #c8a96e);
}
.absqura-filter-option-locked .absqura-filter-option-label { font-weight: 600; }

/* ── LOCKED CATEGORY CHIP ─────────────────────────────────── */
.absqura-active-category { margin-bottom: 12px; }

.absqura-chip-locked {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--abq-ink, #0e0e0e);
    color: #fff;
    border-radius: var(--abq-radius, 4px);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: default;
    opacity: 0.85;
}

/* ── PRICE RANGE ──────────────────────────────────────────── */
.absqura-filter-range { padding: 8px 0; }

.absqura-range-display {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
    font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500;
    color: var(--abq-ink, #0e0e0e);
}
.absqura-range-sep { color: var(--abq-muted, #6b6b6b); padding: 0 8px; }

.absqura-range-track { position: relative; height: 36px; display: flex; align-items: center; }

.absqura-range-fill {
    position: absolute; height: 3px;
    background: var(--abq-ink, #0e0e0e); border-radius: 2px;
    pointer-events: none; z-index: 1;
}

.absqura-range-input {
    position: absolute; width: 100%; height: 3px;
    background: none; pointer-events: none;
    appearance: none; -webkit-appearance: none; outline: none;
}
.absqura-range-input::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px;
    background: var(--abq-ink, #0e0e0e);
    border: 3px solid #fff; border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer; pointer-events: all;
}
.absqura-range-input::-moz-range-thumb {
    width: 18px; height: 18px;
    background: var(--abq-ink, #0e0e0e);
    border: 3px solid #fff; border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer; pointer-events: all;
}

/* ── TOGGLE SWITCH ────────────────────────────────────────── */
.absqura-filter-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }

.absqura-toggle-switch {
    position: relative; width: 36px; height: 20px;
    background: var(--abq-line, rgba(0,0,0,0.08));
    border-radius: 10px; transition: background 0.25s ease; flex-shrink: 0;
}
.absqura-toggle-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; background: var(--abq-bg, #fff);
    border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.25s ease;
}
.absqura-toggle-input:checked + .absqura-toggle-switch { background: var(--abq-gold, #c8a96e); }
.absqura-toggle-input:checked + .absqura-toggle-switch::after { transform: translateX(16px); }

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

.absqura-toggle-label {
    font-family: 'DM Sans', sans-serif; font-size: 13px;
    color: var(--abq-text, #333); display: flex; align-items: center; gap: 6px;
}

/* ── RATING STARS ─────────────────────────────────────────── */
.absqura-rating-option { padding: 6px 10px; }
.absqura-stars { display: flex; align-items: center; gap: 1px; }
.absqura-star { color: var(--abq-line, rgba(0,0,0,0.08)); }
.absqura-star.is-filled { color: var(--abq-gold, #c8a96e); }

/* ── ACTIVE CHIPS ─────────────────────────────────────────── */
.absqura-chips-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 24px; flex-wrap: wrap;
}

.absqura-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--abq-soft, #f0ede6);
    border: 1px solid var(--abq-line, rgba(0,0,0,0.08));
    border-radius: var(--abq-radius, 4px);
    font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
    color: var(--abq-text, #333); text-decoration: none;
    transition: all 0.2s ease;
}
.absqura-chip:hover { border-color: var(--abq-ink, #0e0e0e); background: var(--abq-bg, #fff); }

.absqura-chip-remove { opacity: 0.4; }
.absqura-chip:hover .absqura-chip-remove { opacity: 1; }

.absqura-chip-clear {
    color: var(--abq-gold-text, #9e8148);
    border-color: transparent; background: none;
    text-decoration: underline; text-underline-offset: 2px;
}
.absqura-chip-clear:hover { color: var(--abq-ink, #0e0e0e); background: none; border-color: transparent; }

/* ── NO RESULTS ───────────────────────────────────────────── */
.absqura-no-results {
    text-align: center; padding: 64px 24px;
    font-family: Georgia, serif; font-size: 18px; font-style: italic;
    color: var(--abq-muted, #6b6b6b);
}

/* ── MOBILE TRIGGER + DRAWERS ─────────────────────────────────
   Base state hides all of it outside the mobile breakpoint. The mobile
   media query (filters-mobile.css) re-enables the trigger bar and handles
   .is-open. Without this, the drawer markup (which lives in wp_footer on
   every viewport) renders as unstyled block content at the bottom of the
   page on desktop/tablet. */
.absqura-mobile-trigger-wrap,
.absqura-mobile-drawer,
.absqura-sort-drawer { display: none; }

/* ── LOADING ──────────────────────────────────────────────── */
.absqura-loading { position: relative; pointer-events: none; opacity: 0.6; }
.absqura-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 24px; height: 24px; margin: -12px 0 0 -12px;
    border: 2px solid var(--abq-line, rgba(0,0,0,0.08));
    border-top-color: var(--abq-gold, #c8a96e);
    border-radius: 50%; animation: absquraSpin 0.6s linear infinite;
}
@keyframes absquraSpin { to { transform: rotate(360deg); } }

.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; }