/**
 * Mobile filter drawer + responsive card grid.
 * Sidebar relocation is JS-driven (see mobile-filter.js); no CSS-based hide.
 */

#ps-filter-fab,
#ps-filter-drawer {
    display: none;
}

@media (max-width: 900px) {
    /* Collapse layout to single column. The sidebar JS-moves into the drawer. */
    .ps-collection-layout,
    .ps-search-layout,
    .ps-prop-layout {
        grid-template-columns: 1fr !important;
    }

    /* 2-column grid for Booqable products. Multiple selectors for robustness.
       minmax(0, 1fr) — not 1fr — so each track can shrink below its content's
       intrinsic min-width. Plain 1fr resolves to minmax(auto, 1fr), and that
       auto floor lets an uncapped product image push the column past the
       viewport. minmax(0, ...) removes that floor. */
    .booqable-product-list-grid,
    .booqable-product-list .booqable-product-list-grid,
    .booqable-component .booqable-product-list-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    /* Force individual cards to fit their grid cell — no overflow. */
    .booqable-product-list-grid .booqable-product {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Cap images so an oversized source can't set the track's min-content
       width. Without this, a large product photo blows the column out
       regardless of the grid definition. */
    .booqable-product-list-grid .booqable-product img,
    .ps-search-grid img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Container shouldn't push the grid wider than the viewport. */
    .booqable-product-list,
    .booqable-component,
    .ps-collection-list,
    .ps-search-results {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Our own card grid (search results). Same minmax(0,1fr) reasoning. */
    .ps-search-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .booqable-product-name,
    .ps-card-name {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    .booqable-product-price,
    .ps-card-price {
        font-size: 11px !important;
    }

    /* ─── Floating filter button ─── */
    #ps-filter-fab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: fixed;
        bottom: 24px;
        left: 16px;
        z-index: 9998;
        padding: 14px;
        background: #3C2050;
        color: #C9B8E8;
        border: 1px solid #6B4E8A;
        border-radius: 999px;
        font-family: 'Syne', sans-serif;
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }
    #ps-filter-fab:active { background: #2A1540; }
    #ps-filter-fab svg { display: block; }

    /* ─── Off-canvas drawer ─── */
    #ps-filter-drawer {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99999;
        pointer-events: none;
    }
    .ps-filter-drawer-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .ps-filter-drawer-panel {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 360px;
        background: #2A1540;
        box-shadow: 4px 0 24px rgba(0,0,0,0.4);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        display: flex;
        flex-direction: column;
        font-family: 'Syne', sans-serif;
    }
    #ps-filter-drawer.active { pointer-events: auto; }
    #ps-filter-drawer.active .ps-filter-drawer-backdrop { opacity: 1; }
    #ps-filter-drawer.active .ps-filter-drawer-panel { transform: translateX(0); }

    .ps-filter-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: #3C2050;
        color: #C9B8E8;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 13px;
        font-weight: 500;
        border-bottom: 1px solid #6B4E8A;
    }
    .ps-filter-drawer-close {
        background: transparent;
        border: none;
        color: #C9B8E8;
        font-size: 20px;
        padding: 4px 8px;
        cursor: pointer;
        line-height: 1;
    }
    .ps-filter-drawer-close:active { color: #E8706A; }

    .ps-filter-drawer-content {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        -webkit-overflow-scrolling: touch;
    }
}