/* Page-level layout. Replaces the Bootstrap grid. */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.stack > * + * { margin-top: var(--sp-4); }

.page-main {
    display: block;
    min-height: 50vh;
    /* Room for the sticky mobile CTA so it never covers the last row. */
    padding-bottom: calc(var(--sp-7) + env(safe-area-inset-bottom));
}

@media (min-width: 48rem) {
    .page-main { padding-bottom: var(--sp-7); }
}

/* ---------- Listing page: filter rail + results ---------- */

/* Mobile: one column. The category rail is a drawer (see components.css),
   so it is taken out of flow entirely and must not reserve space. */
.listing {
    display: block;
    padding-block: var(--sp-4) var(--sp-7);
}

.listing__title {
    font-size: var(--step-3);
    margin-bottom: var(--sp-4);
}

.listing__layout {
    display: block;
}

@media (min-width: 64rem) {
    .listing__layout {
        display: grid;
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
        gap: var(--sp-6);
        align-items: start;
    }

    /* Desktop rail can be collapsed by the user; JS toggles this class. */
    .listing__layout.is-rail-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .listing__layout.is-rail-collapsed .listing__rail {
        display: none;
    }
}

/* ---------- Product detail ---------- */

.product-detail {
    padding-block: var(--sp-4) var(--sp-6);
}

.product-detail__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
}

@media (min-width: 64rem) {
    .product-detail__top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--sp-7);
        align-items: start;
    }
}

/* ---------- Generic section rhythm ---------- */

.section {
    padding-block: var(--sp-6);
}

.section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.section__title {
    font-size: var(--step-2);
}