/* ═══════════════════════════════════════════════════════════════════════════
   Fabric Browse page — /fabric/browse/ (Step 3 of the Garment → Pattern →
   Fabric flow). Same sidebar+results layout idea as fabric-list.css's
   .page-list__body — below 1024px, the inline sidebar gives way to the same
   filter-toolbar__toggle + filter-panel__sheet pattern as the main Fabric
   List page (see browse-mobile-filters.html), just split into two
   independent tab buttons/sheets (Sub Pattern, Color) since this page only
   ever has those two groups.
   ═══════════════════════════════════════════════════════════════════════════ */

.browse-layout {
    padding-bottom: var(--space-16);
}

.browse-layout__sidebar {
    display: none;
}

/* Two toggle buttons, always side by side below 1024px — unlike
   .page-list__topbar (title + search + filters + sort, 4 items) this row
   only ever holds 1-2 pill buttons, so there's no case here where
   .page-list__topbar's own mid-width column-stack (769-1023px, tuned for
   that wider item mix) reads better than a plain 2-up grid; own rules
   rather than inheriting that breakpoint. Button look itself (color,
   radius, icon) is still 100% reused via .filter-toolbar__toggle. */
.browse-mobile-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.browse-mobile-toolbar .filter-toolbar__toggle {
    width: 100%;
    justify-content: center;
}

/* A leaf top-level pattern (e.g. Houndstooth) has no sub-patterns, so only
   the Color button renders — let it fill the row instead of sitting in
   half of .page-list__topbar's 2-column phone grid with an empty gap
   beside it. */
.browse-mobile-toolbar .filter-toolbar__toggle:only-child {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .browse-layout {
        display: grid;
        grid-template-columns: var(--width-sidebar) 1fr;
        gap: var(--space-12);
        align-items: start;
    }

    .browse-layout__sidebar {
        display: block;
        position: sticky;
        top: calc(var(--navbar-height) + var(--space-4));
        max-height: calc(100vh - var(--navbar-height) - var(--space-8));
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border-medium) transparent;
        padding-right: var(--space-2);
    }

    .browse-mobile-toolbar {
        display: none;
    }
}