/* ============================================================
   ABSQURA SMART FILTERS — Mobile
   ============================================================ */
@media (max-width: 768px) {
    /* The desktop sidebar must never render (or be interactive) on mobile — the
       drawer is a clone of its markup, so leaving both live would mean two sets
       of same-named filter inputs on the page and corrupted combined selections. */
    .absqura-sidebar-area {
        display: none !important;
    }

    /* The two-column grid (sidebar-width | 1fr) still reserves the sidebar's
       track even though the sidebar itself is display:none — grid tracks are
       defined by the parent regardless of whether a child occupies them. That
       left a blank ~260px gap pushing the whole product grid over on mobile.
       Drop back to normal block flow so products use the full width. */
    section.absqura-has-filters {
        display: block;
    }

    /* The native WooCommerce sort dropdown is redundant with our Sort drawer on
       mobile — showing both is confusing (two disconnected sort controls). Our
       drawer reads/writes the same underlying select, so hiding it here loses
       no functionality. */
    .woocommerce-ordering {
        display: none !important;
    }

    /* Category/shop archive titles ("T-Shirts", "Shop All", ...) are dropped on
       mobile — the Filters/Sort bar now sits directly under the header instead.
       The title renders as a standalone h1 outside the (empty) .woocommerce-products-header
       wrapper, so both need hiding. */
    .woocommerce-products-header,
    .woocommerce-products-header__title {
        display: none !important;
    }

    /* Trigger bar — plain text+icon labels, not solid buttons (per user
       request 2026-07-22: match reference's link-style Filter/Sort row,
       no button backgrounds/padding, no forced equal-width gap). */
    .absqura-mobile-trigger-wrap {
        display: flex; align-items: center; justify-content: flex-start;
        gap: 24px;
        position: sticky; top: 0; left: 0; right: 0;
        z-index: 500; padding: 14px 16px;
        background: var(--abq-bg, #fff);
        border-bottom: 1px solid var(--abq-line, rgba(0,0,0,0.08));
    }

    /* !important needed: the sitewide `button { background: var(--abq-primary)
       !important }` base style in design-system.css otherwise wins over this
       (these render as real <button> elements). */
    .absqura-mobile-filter-btn, .absqura-mobile-sort-btn {
        display: flex; align-items: center; justify-content: flex-start;
        gap: 6px; flex: 0 0 auto; padding: 0 !important; height: auto !important;
        background: transparent !important; color: var(--abq-ink, #0e0e0e) !important;
        border: none !important;
        border-radius: 0 !important;
        font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.06em;
        cursor: pointer;
    }
    .absqura-mobile-filter-btn:hover, .absqura-mobile-sort-btn:hover { color: var(--abq-gold-text, #9e8148); background: transparent; }
    .absqura-mobile-sort-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }

    .absqura-mobile-filter-count {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 20px; height: 20px; padding: 0 6px;
        background: var(--abq-gold, #c8a96e); color: var(--abq-ink, #0e0e0e);
        font-size: 11px; font-weight: 700; border-radius: 10px;
    }


    /* Drawer */
    .absqura-mobile-drawer { display: none; }
    .absqura-mobile-drawer.is-open { display: block; }

    .absqura-drawer-backdrop {
        position: fixed; inset: 0;
        background: rgba(14,14,14,0.5); z-index: 100001;
    }
    /* Fixed 2026-07-22: was max-height:85vh, leaving the top ~15% of the
       screen (the site header) visibly dimmed by the backdrop behind the
       panel — read as an unintended dark bar over the header/category
       area. Full-height panel means the backdrop is never actually
       visible; the header is fully covered instead of half-dimmed. */
    .absqura-drawer-panel {
        position: fixed; top: 0; bottom: 0; left: 0; right: 0;
        height: 100dvh; background: var(--abq-bg, #fff);
        border-radius: 0; z-index: 100002;
        display: flex; flex-direction: column;
        animation: absquraSlideUp 0.3s cubic-bezier(0.22,1,0.36,1);
    }
    .absqura-drawer-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 20px 20px 16px; border-bottom: 1px solid var(--abq-line, rgba(0,0,0,0.08));
    }
    .absqura-drawer-title {
        font-family: Georgia, serif; font-size: 18px; font-weight: 300;
        font-style: italic; margin: 0;
    }
    /* User report 2026-07-23: rendered as a solid black square with a
       white X, not the intended subtle circle — the base (non-hover)
       background rule lacked !important, so the sitewide global
       `button { background: var(--abq-primary) !important }` rule won
       for the default state (the same class of bug already fixed
       elsewhere in this plugin for hover states). */
    .absqura-drawer-close {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; background: none !important;
        border: 1px solid var(--abq-line, rgba(0,0,0,0.08)) !important;
        border-radius: 50%; cursor: pointer;
        color: var(--abq-ink, #0e0e0e) !important;
    }
    /* !important needed — same sitewide button:hover gold-fill leak
       confirmed via CDP 2026-07-22 (bare <button>, close X icon). */
    .absqura-drawer-close:hover,
    .absqura-drawer-close:focus,
    .absqura-drawer-close:active {
        background: none !important;
        border-color: var(--abq-line, rgba(0,0,0,0.08)) !important;
        color: var(--abq-ink, #0e0e0e) !important;
    }
    .absqura-drawer-body { flex: 1; overflow-y: auto; padding: 0 20px; }
    .absqura-drawer-footer {
        display: flex; gap: 12px; padding: 16px 20px;
        border-top: 1px solid var(--abq-line, rgba(0,0,0,0.08));
    }
    /* User report 2026-07-23: didn't match the theme's shared CTA look —
       measured 52px tall / 13px font vs. the 46px / 12px used everywhere
       else (Add to Cart, Place Order, etc.). Switched to the same shared
       tokens so this button matches those exactly instead of its own
       hardcoded values. */
    .absqura-btn {
        flex: 1; padding: 0 14px; border: none; border-radius: var(--abq-btn-radius, var(--abq-radius, 0px));
        height: var(--abq-btn-height, 46px); display: flex; align-items: center; justify-content: center;
        font-family: var(--abq-btn-font-family, 'DM Sans', sans-serif);
        font-size: var(--abq-btn-font-size, 12px); font-weight: var(--abq-btn-font-weight, 600);
        text-transform: uppercase; letter-spacing: var(--abq-btn-letter-spacing, 0.08em); text-align: center;
        cursor: pointer;
    }
    .absqura-btn-primary { background: var(--abq-ink, #0e0e0e); color: #fff; flex: 2; }
    /* Primary intentionally keeps the sitewide gold CTA-hover treatment
       (matches Add to Cart/Place Order elsewhere). Outline (Cancel) was
       inheriting that same solid-gold fill via the same sitewide
       button:hover leak, making Cancel and Apply look identical on hover —
       given its own, more subdued hover instead. Fixed 2026-07-22. */
    .absqura-btn-outline { background: transparent; color: var(--abq-ink, #0e0e0e); border: 1px solid var(--abq-line, rgba(0,0,0,0.08)); }
    .absqura-btn-outline:hover,
    .absqura-btn-outline:focus,
    .absqura-btn-outline:active {
        background: var(--abq-soft, #f0ede6) !important;
        color: var(--abq-ink, #0e0e0e) !important;
        border-color: var(--abq-line, rgba(0,0,0,0.08)) !important;
    }
    .absqura-btn-text { flex: 0 0 auto; background: transparent; color: var(--abq-ink, #0e0e0e); text-decoration: underline; padding: 14px 4px; }

    /* Sort drawer */
    .absqura-sort-list { list-style: none; margin: 0; padding: 8px 0; }
    /* !important needed: these are bare <button> elements, so the sitewide
       global `button { background: var(--abq-primary) !important; color:
       #fff !important }` rule was winning over this plain `background:
       none`, rendering every sort option as a solid black bar with white
       text. Same class of bug as .absqura-filter-header, fixed 2026-07-22. */
    .absqura-sort-option {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 16px 4px; border: none !important; background: none !important;
        font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--abq-ink, #0e0e0e) !important;
        border-bottom: 1px solid var(--abq-line, rgba(0,0,0,0.06));
        cursor: pointer; text-align: left;
        height: auto !important; min-height: 0 !important;
    }
    /* The base rule's !important alone still lost to the sitewide
       `button:hover{background:gold!important}` rule on hover/focus/active
       — pseudo-class selectors are more specific than a plain class
       selector, so !important vs !important ties are broken by
       specificity. Needs its own pseudo-class-matched override. */
    .absqura-sort-option:hover,
    .absqura-sort-option:focus,
    .absqura-sort-option:active {
        background: none !important;
        color: var(--abq-ink, #0e0e0e) !important;
    }
    .absqura-sort-check { opacity: 0; }
    .absqura-sort-option.is-selected { font-weight: 600; color: var(--abq-gold, #c8a96e) !important; }
    .absqura-sort-option.is-selected:hover,
    .absqura-sort-option.is-selected:focus,
    .absqura-sort-option.is-selected:active {
        color: var(--abq-gold, #c8a96e) !important;
    }
    .absqura-sort-option.is-selected .absqura-sort-check { opacity: 1; }

    /* Touch targets */
    .absqura-filter-option { padding: 12px 14px; min-height: 48px; }
    .absqura-filter-checkbox { width: 20px; height: 20px; }
    .absqura-filter-header { padding: 16px 0; }

    @keyframes absquraSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    body.absqura-drawer-open { overflow: hidden; }
}