/* ===========================================================================
   base.css — structural stylesheet for the document shell.

   Layout and flow only. NO COLOURS, NO HEX VALUES: every colour in this project
   resolves from tokens.css via var(--*), and the visual layer lives in
   components.css. The split is the point, not tidiness — gate G4 requires this
   page to stay readable and in correct semantic order with the component
   stylesheet removed, and that is only checkable while structure and skin are
   two separate files.

   The type FAMILY is here rather than in components.css deliberately: a font
   stack is not a colour, and the fallback document has to be readable in the
   right typeface too. It resolves from a token like everything else.
   =========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: var(--text-body);
}

img,
picture,
svg {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

h1,
h2,
h3 {
    line-height: 1.1;
    overflow-wrap: break-word;
}

/* Keyboard users reach the content without walking the navigation. */
.skip-link {
    position: absolute;
    left: -100vw;
    top: 0;
}

.skip-link:focus {
    left: 0;
    padding: 0.5rem 1rem;
}

/* The measure. One value, so a full-bleed band and the content inside it line up
   without either having to know about the other. */
.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 48px 0;
}

@media (max-width: 640px) {
    .section {
        padding: 34px 0;
    }
}

/* The header bar's own band. The footer used to share this rule and this
   value; since SWEB-185 it is four columns rather than one line of links and
   sets its own vertical room in components.css, so it is no longer listed
   here — a 14px footer would have crushed the column band. */
.site-header .wrap {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* No padding on <main>: a page may run a band edge to edge, and the band's own
   .wrap supplies the gutter. Pages that are one column of text keep their
   padding on .page instead, so they are unaffected by that. */
.site-main {
    flex: 1 1 auto;
    padding: 0;
}

.page {
    max-width: 46rem;
    padding: 1rem 1.25rem 3rem;
}

.pagehead .wrap {
    padding-top: 30px;
    padding-bottom: 34px;
}

/* A list of cards is still a list. The bullets and the indent come off here
   because that is structure; everything that makes a card look like a card is in
   the skin. */
.product-list {
    list-style: none;
    margin: 0;
    padding: 0;
}