/*
 * Layout primitives shared by the sections of the migrated surface.
 *
 * These replace Foundation's .row / .column / .large-N grid on this page. They
 * are not a grid system: there is one container, one section stack and one
 * edge-to-edge escape hatch, each with more than one consumer. Anything that
 * only one section needs lives in that section's file.
 */

/* Matches Foundation's .row (1000px) and .column (15px) so the migrated
   content sits on the same measure as the header, navigation and footer. */
.shop-container {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--shop-container) + var(--shop-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--shop-gutter);
}

/* A column of independent sections: the gap between them is the section
   rhythm, owned here once rather than by a margin on each section. Its
   children keep no outer margins of their own, so nothing doubles up; its
   padding is the same gap to whatever sits above and below the stack. Flex,
   not grid: a grid's auto column would size to a scrolling row's content. */
.shop-stack {
    display: flex;
    flex-direction: column;
    gap: var(--shop-rhythm-section);
    padding-block: var(--shop-rhythm-section);
}

/* Two stacks in a row read as one: the first one's padding is already the
   gap between them, so the second does not add its own. (The overview's
   promotions stack, homepage only, directly above #web-shop.) */
.shop-stack + .shop-stack {
    padding-block-start: 0;
}

/* Section heading ------------------------------------------------------------
   The uppercase heading with a short rule beneath it, used by the promotions
   row and the category grid. The stock section's header is a different
   treatment entirely — eyebrow, sentence-case title, subtitle — and lives with
   that component rather than being forced through a modifier here. */
.shop-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--shop-space-2) var(--shop-space-4);
    margin-block-end: var(--shop-rhythm-heading);
}

.shop-section__title {
    color: var(--shop-ink);
    font-size: var(--shop-text-lg);
    font-weight: var(--shop-weight-bold);
    line-height: 1.1;
    letter-spacing: var(--shop-tracking-caps);
    text-transform: uppercase;
}

.shop-section__divider {
    display: block;
    width: 40px;
    height: 3px;
    margin-block-start: 6px;
    border-radius: 2px;
    background: var(--shop-divider-accent);
}

.shop-section__action {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    gap: var(--shop-space-2);
    color: var(--shop-accent);
    font-size: var(--shop-text-sm);
    font-weight: var(--shop-weight-bold);
    text-decoration: none;
    transition: gap var(--shop-duration) var(--shop-ease);
}

.shop-section__action:hover,
.shop-section__action:focus {
    gap: var(--shop-space-3);
    color: var(--shop-accent-strong);
    text-decoration: none;
}

@media (min-width: 640px) {
    .shop-section__title {
        font-size: var(--shop-text-xl);
    }

    .shop-section__action {
        font-size: var(--shop-text-control);
    }
}

@media (min-width: 1024px) {
    .shop-section__title {
        font-size: var(--shop-text-2xl);
    }
}

/* Reading measure -------------------------------------------------------------
   The width a column of running text is held to on a content page, start
   aligned so it shares its left edge with the title above it and the grid
   below it. The whole column - headings, lists, tables - takes it, so there is
   no ragged edge between prose and the rest. (The homepage's editorial text
   runs the full container: it sits under a full-width catalogue, not in a
   reading page.) */
.shop-measure {
    max-width: 40rem;
}

/* Edge-to-edge scroller ------------------------------------------------------
   A horizontally scrolling row has to reach the screen edge, or the last card
   stops short of it and stops reading as "there is more". Cancelling the
   container's padding and re-applying it inside keeps the first card aligned
   with the heading while the row itself runs to the edge. Above the container's
   full width there is nothing to cancel.

   The scroll-padding matters as much as the padding: without it a row with
   scroll-snap snaps its first card to the scroller's own edge on load,
   scrolling the gutter away and leaving that card flush with the screen. */
.shop-bleed {
    margin-inline: calc(var(--shop-gutter) * -1);
    padding-inline: var(--shop-gutter);
    scroll-padding-inline: var(--shop-gutter);
}

@media (min-width: 1024px) {
    .shop-bleed {
        margin-inline: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }
}