/* ============================================================
   STATIONERY PAGE OVERRIDES
   Loaded AFTER the shared book CSS. Purpose:
     1) Remove the left sidebar / filter menu on this page only.
     2) Let the product grid use the full content width.
     3) Show 4 cards per row on desktop (responsive below).
   The product cards themselves keep the exact styling from
   book-grid-v2.css — nothing about the card is changed here.
   ============================================================ */

/* ---- 1. Hide the left menu (kept in DOM for the shared JS) ---- */
.srbs-sidebar,
.srbs-sidebar-backdrop {
    display: none !important;
}

/* Any mobile "Filter" button the shared JS may inject to open the
   drawer — there is no drawer on this page, so hide it. */
.srbs-filter-btn,
.srbs-mobile-filter,
.srbs-filter-toggle,
#filterToggle,
#mobileFilterBtn,
.srbs-filter-button {
    display: none !important;
}

/* ---- 2. Single-column layout, full-width content ---- */
.srbs-layout {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.srbs-content {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
}

/* ---- 3. Grid: 4 per row on desktop ---- */
.srbs-content .srbs-books-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
}

/* Large tablets / small laptops: 3 across */
@media (max-width: 1199.98px) {
    .srbs-content .srbs-books-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablets: 2 across */
@media (max-width: 991.98px) {
    .srbs-content .srbs-books-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Phones: 2 across (matches the books pages' compact grid) */
@media (max-width: 575.98px) {
    .srbs-content .srbs-books-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
}