/*
 * Theme "Godzone", the client's own storefront: the @font-face rules, then tokens and skins in @layer theme over
 * Erebor's foundation (assets/styles/storefront-tokens.css, assets/styles/storefront.css). What a theme may and may
 * not change is the storefront design manual's "Theming rules" (docs/design/storefront/, #theming).
 */

/* Montserrat: two faces, Latin and Latin Extended, over one file, which the layout preloads once (theme.yaml `font`). */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/montserrat-variable-latin-ce-f0JIeiE.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/montserrat-variable-latin-ce-f0JIeiE.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer theme {
    /* Tokens: Godzone's primitives, then Erebor's token contract set to Godzone's values, then the theme's own. */
    :root {
        /* ── PRIMITIVES — theme-own ── */
        /* Brand, the client's values. Whether the red is #E52424 or #F52328 is still to be confirmed. */
        --gz-brand-red: #e52424; /* RGB 229 · 36 · 36 */
        --gz-brand-cream: #fdf2e0; /* RGB 253 · 242 · 224 */
        /* Red. --gz-red-500 on cream is 4,11 : 1 — never text, only a surface under white text. */
        --gz-red-500: var(--gz-brand-red);
        --gz-red-700: #c11b1b; /* text, link, focus — 5,51 on cream / 6,10 on white */
        --gz-red-900: #8f1212; /* hover, active — 8,37 / 9,28 */
        /* Cream and surfaces */
        --gz-cream-100: var(--gz-brand-cream);
        --gz-cream-200: #f7ead4;
        --gz-cream-300: #e3d8c6;
        /* Warm neutrals — tuned to cream, not grey */
        --gz-ink-900: #1f1a17; /* 17,24 on white */
        --gz-ink-600: #5c524a; /* 7,61 */
        --gz-ink-400: #8c7e6b; /* 3,95 — boundary of an interactive element */
        --gz-white: #ffffff;
        /* State — `danger` deliberately has no shade of its own, it takes --gz-red-900 */
        --gz-green-800: #14512f;
        --gz-green-50: #eaf4ee;
        --gz-amber-800: #6b4600;
        --gz-amber-50: #fcf0d9;
        --gz-red-50: #fbe9e9;
        --gz-blue-800: #1b3a63;
        --gz-blue-50: #edf1f7;
        /* ── THE CONTRACT, SET TO OUR VALUES ── */
        /* paper and ink repeat theme.yaml as literals: Erebor's ThemeManifestTest reads them without resolving var(). */
        --color-paper: #ffffff;
        --color-sunken: var(--gz-cream-100); /* under photographs, quiet bands */
        /* The theme's default action colour; a shop's own primaryColor (Erebor's ShopTokens) outranks it. */
        --color-primary: var(--gz-red-500);
        /* white text 6,10 : 1 — ShopTokens emits no hover for white on red, so this one holds */
        --color-primary-hover: var(--gz-red-700);
        --color-ink: #1f1a17;
        --color-ink-muted: var(--gz-ink-600);
        --color-sale: var(--gz-red-700); /* red TEXT: link, sale price, discount badge — never `--color-primary` */
        --color-line: var(--gz-cream-300); /* DECORATIVE separation, carries no state */
        --color-line-strong: var(--gz-ink-400); /* boundary of an interactive element — 3 : 1 */
        --color-focus: var(--gz-ink-900); /* 3,78 even on brand red */
        --color-success: var(--gz-green-800);
        --color-success-soft: var(--gz-green-50); /* 8,31 */
        --color-warning: var(--gz-amber-800);
        --color-warning-soft: var(--gz-amber-50); /* 7,44 */
        --color-danger: var(--gz-red-900);
        --color-danger-soft: var(--gz-red-50); /* 7,92 */
        --color-info: var(--gz-blue-800);
        --color-info-soft: var(--gz-blue-50); /* 10,11 */
        --color-stock-in: var(--color-success);
        --color-stock-low: var(--color-warning);
        /* Shell regions: the tokens the foundation's utility bar, header and footer rules read. */
        --utility-ground: var(--gz-surface-warm-2); /* the announcement bar */
        --utility-ink: var(--color-ink-muted); /* 6,40 on the bar */
        --header-hover: var(--gz-surface-warm-3);
        --footer-ground: var(--color-paper); /* the footer is white with a line above it, not cream */
        /* A fallback of similar width, so `font-display: swap` does not reflow (CLS). */
        --font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
        /* The display role transcribes the GODZONESHOP wordmark: heavy capitals set tight (with --gz-display-lh). */
        --font-weight-display: 800;
        --tracking-display: -0.03em;
        --font-width-display: 100%; /* Montserrat has no width axis */
        --text-xs: 0.75rem; /* 12 — meta, VAT note (the base has 13) */
        --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem);
        --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
        --text-3xl: clamp(1.75rem, 1.35rem + 2vw, 2.25rem);
        --text-4xl: clamp(2.125rem, 1.4rem + 3.6vw, 3rem);
        --leading-tight: 1.15;
        --leading-body: 1.6;
        /* Shape, elevation, motion, media and components. */
        --radius-media: 0; /* photographs and full-bleed strips */
        --radius-control: 8px; /* buttons, fields, cards — `--radius-box` follows it in the base */
        --radius-panel: 16px;
        /* The shadow is WARM (derived from --gz-ink-900) — a black one would go grey on cream. */
        --shadow-overlay: 0 8px 24px rgb(31 26 23 / 0.12);
        --duration-base: 240ms;
        --media-ratio: 4 / 5;
        --button-weight: 600;
        /* Rhythm between sections; strips touch, the hero and the entries keep 32 px. */
        --section-gap: var(--space-7);
        /* Structural: the client's gutter steps 16 · 24 · 32 · 48 px (here and in the media queries below). */
        --gutter: var(--space-4);
        /* Every contract token not set above keeps the base's value, which is also Godzone's. */
        /* ── THEME-OWN TOKENS — no counterpart in the contract ── */
        --gz-surface-warm-2: var(--gz-cream-200); /* nested area, table head, row hover, skeleton */
        /* The header's hover step. */
        --gz-surface-warm-3: var(--gz-cream-300);
        --gz-surface-brand-active: var(--gz-red-900); /* white text 9,28 */
        --gz-surface-inverse: var(--gz-ink-900); /* white text 17,24 */
        --gz-surface-muted: var(--gz-ink-600); /* white text 7,61 */
        /* Over an image nothing turns at night, as the image does not: a dark scheme leaves these tokens alone. */
        --gz-surface-over-image: var(--gz-ink-900); /* white text 17,24 */
        --gz-surface-over-image-muted: var(--gz-ink-600); /* white text 7,61 */
        /* The caption band under text on a photo — ink-900 at 85 %; white text ≥ 5 : 1 even on a white photo. */
        --gz-surface-over-image-scrim: rgb(31 26 23 / 0.85);
        --gz-fg-brand-strong: var(--gz-red-900);
        --gz-fg-on-inverse: var(--gz-white);
        --gz-fg-over-image: var(--gz-white); /* on `--gz-surface-over-image*` — never turns either */
        /* The light pill on a photo (the model tag) — never turns either. */
        --gz-space-5: 1.25rem; /* 20 — the contract's ladder goes 16 · 24 */
        --gz-text-2xs: 0.6875rem; /* 11 — badge, all-caps label; below the contract's smallest step */
        --gz-track-heading: -0.01em;
        --gz-track-caps: 0.08em;
        --gz-display-lh: 0.92;
        --gz-radius-1: 4px; /* the badge — a raw radius in a skin is forbidden */
        --gz-border-2: 2px;
        --gz-shadow-1: 0 1px 2px rgb(31 26 23 / 0.08);
        --gz-shadow-3: 0 16px 48px rgb(31 26 23 / 0.16);
        /* Scrims: the drawer's through Erebor's own token, the invitation and the burned-in label as theme tokens. */
        --backdrop: rgb(31 26 23 / 0.4);
        --gz-scrim-label: rgb(0 0 0 / 0.22);
        /* ── Motion ── --gz-dur-4 is the product rail's move, for a script that scrolls the rail (the platform loads no
           theme JavaScript yet). */
        --gz-dur-2: 180ms;
        --gz-ease-out: cubic-bezier(0, 0, 0.2, 1);
        /* The room the mega menu panel may take under the header, computed from the header's height, until Erebor's
           `megamenu` controller measures it (`--megamenu-room`). */
        --gz-megamenu-room: calc(100dvh - var(--gz-header-height) - var(--space-5));
        /* Two steps between the contract's --z-* layers. */
        --gz-z-dropdown: calc(var(--z-header) + 1); /* search suggestions, mega menu, switcher */
        --gz-z-modal: calc(var(--z-overlay) + 1); /* modal, mini-cart, mobile menu, filters panel */
        /* The header's own height — `--header-height` is a structural 4rem, and the header is 56 px below `sm`. */
        --gz-header-height: 56px;
        --gz-announcement-bar-height: 34px;
        /* Hero stage: the graphic's height at full width (842 × 1191 on a phone, 2048 × 696 from 600 px), the controls'
           band under it, and how far the stage may grow past the graphic. */
        --gz-hero-natural: calc(100vw * 1191 / 842);
        --gz-hero-band: 92px;
        --gz-hero-max-scale: 1.6;
        /* The fold, computed: nothing on Erebor measures it. */
        --gz-hero-block: calc(100svh - var(--gz-announcement-bar-height) - var(--gz-header-height));
    }

    /* No announcement, no bar: its height drops out of the fold. */
    :root:not(:has(.utility-bar)) { --gz-announcement-bar-height: 0px; }

    @media (width >= 37.5rem) {
        :root { --gutter: var(--space-5); --gz-header-height: 64px; --gz-hero-natural: calc(100vw * 696 / 2048); }
    }

    @media (width >= 56.25rem) {
        :root {
            --gutter: var(--space-6);
            --section-gap: 5rem; /* 80 px */
        }
    }

    /* No step at 75rem: 40 px is off the ladder; 48 at 90rem is on it. */
    @media (width >= 90rem) {
        :root { --gutter: var(--space-7); }
    }

    @media (prefers-reduced-motion: reduce) {
        :root {
            --duration-quick: 1ms;
            --gz-dur-2: 1ms;
            --duration-base: 1ms;
        }
    }
}

/* ── skins ──
   Below this marker: component skins only, and colours only through tokens. */
@layer theme {
    /* Neutraliser: `revert` hands the elements the foundation's reset and base style back to the browser's defaults,
       at zero specificity (`:where`), and the theme's own base below styles them from there. */
    /* ── reset layer ── */
    :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, fieldset) { margin: revert; }
    :where(ol, ul) { padding: revert; }
    :where(ul[role="list"], ol[role="list"]) { list-style: revert; }
    :where(fieldset) { border: revert; padding: revert; min-inline-size: revert; }
    :where(legend) { padding: revert; }
    :where(img, svg, video) { display: revert; max-inline-size: revert; }
    :where(img) { block-size: revert; }
    :where(input, button, select, textarea) { font: revert; color: revert; letter-spacing: revert; }
    :where(button) { cursor: revert; }
    :where(table) { border-collapse: revert; }

    /* Reduced motion: no transition anywhere. */
    @media (prefers-reduced-motion: reduce) {
        :where(*), ::before, ::after { transition-property: none; }
    }

    /* ── base layer ──
       Targets use `scroll-margin`; the foundation's scroll padding would add to it. */
    :where(html) { -webkit-text-size-adjust: revert; text-size-adjust: revert; scroll-padding-block-start: revert; }
    :where(body) {
        font-family: revert;
        font-stretch: revert;
        font-size: revert;
        line-height: revert;
        letter-spacing: revert;
        color: revert;
        background: revert;
        -webkit-font-smoothing: revert;
        text-rendering: revert;
    }
    :where(h1, h2, h3, h4) {
        font-family: revert;
        font-weight: revert;
        font-stretch: revert;
        font-size: revert;
        line-height: revert;
        letter-spacing: revert;
        text-wrap: revert;
    }
    :where(p, li, dd) { text-wrap: revert; }
    :where(a) { color: revert; text-underline-offset: revert; text-decoration-thickness: revert; }
    :where(a:hover) { text-decoration-thickness: revert; }
    :where(:focus-visible) { outline: revert; outline-offset: revert; }

    /* A pseudo-element cannot sit in `:where()`; `revert` gives back the browser's own highlight. */
    ::selection { background: revert; color: revert; }
    :where(strong, b) { font-weight: revert; }
    :where(small) { font-size: revert; }
    :where(hr) { border: revert; margin: revert; }
    :where(data, .num, td.num) { font-variant-numeric: revert; }

    /* Base — a short reset, the typographic roles, the layout primitives. */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
        margin: 0;
        font-family: var(--font-body);
        font-size: var(--text-md);
        line-height: var(--leading-body);
        color: var(--color-ink);
        background: var(--color-paper);
        overflow-x: hidden; /* never a horizontal scroll */
    }
    img { max-inline-size: 100%; block-size: auto; display: block; }

    /* ── Typographic roles ── */
    h1, h2, h3, h4 { margin: 0 0 var(--space-4); line-height: var(--leading-snug); font-weight: 700; }
    h1 { font-size: var(--text-3xl); letter-spacing: var(--gz-track-heading); }
    h2 { font-size: var(--text-2xl); letter-spacing: var(--gz-track-heading); }
    h3 { font-size: var(--text-xl); font-weight: 600; }
    p { margin: 0 0 var(--space-4); }

    /* The display role by class, not by tag: the outline sets the heading level, the role sets the look. */
    .gz-display, .page-head h1, .section-head__title, .cms-page__title {
        /* User input may wrap, never clip. */
        overflow-wrap: anywhere;
        font-weight: var(--font-weight-display);
        text-transform: uppercase;
        letter-spacing: var(--tracking-display);
        line-height: var(--gz-display-lh);
        margin: 0;
        text-wrap: balance;
    }
    .gz-display--section { font-size: var(--text-2xl); }
    .gz-display--page, .page-head h1, .cms-page__title { font-size: var(--text-3xl); }

    /* Meta role. */
    .gz-meta { color: var(--color-ink-muted); font-size: var(--text-sm); }
    .gz-caps {
        text-transform: uppercase;
        letter-spacing: var(--gz-track-caps);
        font-size: var(--gz-text-2xs);
        font-weight: 600;
        color: var(--color-ink-muted);
    }

    /* Line width is asked for by continuous text; a global limit would break rows and labels. */
    .gz-text, .prose {
        max-inline-size: 68ch; /* 60–75 characters */
    }
    .gz-text > :last-child { margin-block-end: 0; }
    /* A long address in the shop's text breaks, not the page (320 px). */
    .prose { overflow-wrap: anywhere; }

    /* ── Links in text ── */
    a {
        color: inherit;
        text-decoration-line: underline;
        text-decoration-thickness: 1px;
        text-decoration-color: var(--color-line-strong);
        text-underline-offset: 3px;
        transition: color var(--duration-quick) var(--ease-standard),
            text-decoration-color var(--duration-quick) var(--ease-standard);
    }
    a:not(.gz-button):hover { color: var(--color-sale); text-decoration-color: currentcolor; }
    a:not(.gz-button):active { color: var(--gz-fg-brand-strong); }

    /* ── Focus ──
       `:focus-visible`, never `outline: none` without a replacement. */
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: var(--gz-border-2) solid var(--color-focus);
        outline-offset: 2px;
        border-radius: var(--gz-radius-1);
    }
    /* A text field in focus has one frame, not two: its own border turns ink and a soft warm halo rings it, as the
       search field's does — the rule above would draw a second ring 2px outside the field's brown border. The ink border
       is the indicator (3:1 and more on paper and cream, WCAG 1.4.11); the outline stays, transparent, for forced colours,
       where a box-shadow is not drawn. A field in error keeps its red border and takes the halo in red. The quantity
       pill's input has no border of its own and keeps the rule above; the search field keeps its own. Under
       `.theme-godzone`, so it outranks the field rules' border colour below. */
    .theme-godzone :is(input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="range"], [type="color"], [type="file"], .quantity__input, .search-field__input), select, textarea):focus-visible {
        outline: var(--gz-border-2) solid transparent;
        outline-offset: 0;
        border-color: var(--color-ink);
        border-radius: var(--radius-control);
        box-shadow: 0 0 0 4px var(--gz-surface-warm-3);
    }
    .theme-godzone :is(input, select, textarea)[aria-invalid="true"]:focus-visible {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 4px var(--gz-red-50);
    }

    /* WCAG 2.2 · 2.4.11 — a focused element must not end up under the sticky header. */
    :where(a, button, input, select, textarea, summary, [tabindex]) {
        scroll-margin-block-start: calc(var(--gz-header-height) + var(--space-6));
        scroll-margin-block-end: var(--space-8);
    }

    /* Anchors clear the sticky header. */
    :where(section[id], article[id], details[id], .gz-gallery__item[id]) { scroll-margin-block-start: calc(var(--gz-header-height) + var(--space-4)); }
    /* The skip link is the base layout's `.skip-link`, as the shell is the platform's; `.gz-skip` names the same link. */
    .gz-skip, .skip-link {
        position: absolute;
        inset-inline-start: var(--space-4);
        inset-block-start: -4rem;
        z-index: var(--z-toast);
        background: var(--gz-surface-inverse);
        color: var(--gz-fg-on-inverse);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-control);
        font-weight: normal;
        transform: none; /* the base hides its link by a transform; here the offset hides it and focus slides it in */
        transition: top var(--duration-quick) var(--ease-standard);
    }
    .gz-skip:focus, .skip-link:focus { inset-block-start: var(--space-4); }
    /* `<main>` has no padding of its own: the page's last section keeps its distance to the footer, and the base's
       `.l-main` would add a section gap under every page. */
    .l-main { padding-block-end: 0; }
    /* A list that is its own container stays centred: the theme's `:where(… ol, ul …) { margin: revert }` gives a list the
       browser's margins back, and in the theme's layer that outranks `.l-container`'s `margin-inline: auto`, which would
       put a list such as the promises' row at the left edge above 1 440 px. */
    :where(ol, ul).l-container { margin-inline: auto; }

    /* ── Layout primitives ── */
    .gz-wrap { max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }

    /* 48 / 80 px; adjacent sections do not add up — the rhythm is the second one's top padding. */
    .gz-section, .cms-page { padding-block: var(--section-gap); }
    .gz-section + .gz-section { padding-block-start: 0; }

    /* The entry gap after the chrome, not the rhythm; not `:first-child`, as a hidden h1 may come
       first. */
    main > .gz-section:not(.gz-section--tight), main > .cms-page { padding-block-start: var(--space-6); }

    /* Restated: the sibling rules above are less specific. */
    main > .gz-section + .gz-section { padding-block-start: 0; }
    main > .gz-strip + .gz-section { padding-block-start: var(--section-gap); }

    /* Padding after a strip. */
    .gz-strip + .gz-section { padding-block-start: var(--section-gap); }

    /* Strips touch, except the entries 32 px under the hero. */
    .gz-strip { inline-size: 100%; }

    /* Heading left, actions right on one baseline; they wrap under it at 320 px. */
    .gz-section-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-2) var(--space-4);
        margin-block-end: var(--space-5);
    }
    .gz-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        align-items: center;
    }

    /* ── Announcement bar ── */
    .utility-bar {
        background: var(--gz-surface-warm-2);
        color: var(--color-ink-muted);
        font-size: var(--text-xs);
        font-weight: 700; /* bold, as the client asked */
        border-block-end: var(--border-width) solid var(--color-line);
    }
    .utility-bar__inner { justify-content: center; min-block-size: var(--gz-announcement-bar-height); }
    /* Never wraps: two lines would make the strip 48 px and move the chrome. */
    .utility-bar__message { margin: 0; white-space: nowrap; }
    /* A shop with more languages: the base's switch at every width. */
    .utility-bar__links { display: flex; margin: 0; padding: 0; list-style: none; }
    .utility-bar__links > li { display: flex; align-items: center; gap: var(--space-3); }
    .locale-switch .select {
        inline-size: auto;
        min-block-size: var(--gz-announcement-bar-height);
        padding-block: 0;
        padding-inline: 0 var(--space-6);
        color: inherit;
        background-color: transparent;
        border-color: transparent;
    }
    /* The bar is the shop's CMS region `announcement` (CNT-07): its container and section add no width limit, gutter
       or gap, so the bar runs edge to edge. */
    .cms-region--announcement > .l-container { max-inline-size: none; padding-inline: 0; }
    .cms-region--announcement .l-section { margin-block-start: 0; }

    /* ── Header ── */
    /* The base's ground, ink and line are the header tokens; the base header stops sticking from 64rem, this one never. */
    .site-header { position: sticky; anchor-name: --gz-header; }

    /* The live toasts (the add to the cart's confirmation among them) stand under the header at the end, beside the
       mini-cart where the eye checks after the add, not at the foot of the screen: anchored to the sticky header's
       bottom, wherever it sits; without anchor positioning, under the bar and the header as they stand at the top.
       The phone's width is the toast's own (min(24rem, the screen less the gutters)). */
    .toasts { inset: calc(var(--gz-announcement-bar-height) + var(--gz-header-height) + var(--space-3)) var(--gutter) auto auto; }
    @supports (anchor-name: --a) {
        .toasts { position-anchor: --gz-header; inset-block-start: calc(anchor(bottom) + var(--space-3)); }
    }
    @media (prefers-reduced-motion: no-preference) {
        .toasts:popover-open .toast { animation-name: gz-toast-in; }
    }
    @keyframes gz-toast-in { from { opacity: 0; transform: translateY(calc(-1 * var(--space-3))); } }

    /* 1fr auto 1fr: the menu stays centred whatever the brand and the icons weigh. */
    .site-header__inner {
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "brand nav actions";
        gap: 0;
        padding-block: 0;
        min-block-size: var(--gz-header-height);
    }

    /* Below 600 px the monogram, from 600 px the wordmark. */
    /* The monogram is 26 px; the link to the home page is a 44 px target like any other. */
    .brand { justify-content: center; min-inline-size: 44px; }
    .brand img { block-size: 26px; inline-size: auto; }

    /* The wordmark 14 px, 16 px from 900 px. */
    @media (width >= 37.5rem) {
        .brand img { block-size: 14px; }
    }

    @media (width >= 56.25rem) {
        .brand img { block-size: 16px; }
    }

    @media (width >= 37.5rem) {
        .brand__monogram { display: none; }
    }
    .brand__wordmark { display: none; }

    @media (width >= 37.5rem) {
        .brand__wordmark { display: block; }
    }

    /* ── Main navigation ── */
    /* In the header's row, not a strip of its own under it. */
    .primary-nav { grid-area: nav; border: 0; background: none; }

    @media (width >= 56.25rem) {
        .primary-nav { display: block; }
    }
    .primary-nav__list { margin: 0; padding: 0; list-style: none; flex-wrap: nowrap; column-gap: var(--space-4); }

    @media (width >= 75rem) {
        .primary-nav__list { column-gap: var(--space-5); }
    }

    /* The item (`li`) is not positioned, so the mega menu anchors to the header; the link is, for its cut. */
    /* Two type tiers: `--text-sm`, `--text-md` from 75rem. */
    .primary-nav__link {
        display: block;
        position: relative;
        color: var(--color-ink);
        text-decoration: none;
        font-weight: 700;
        font-size: var(--text-sm);
        letter-spacing: var(--gz-track-caps);
        text-transform: uppercase;
        padding-block: var(--space-3);
        /* Never wraps: an item on two lines ("About us") would grow the header from 46 to 69 px. */
        white-space: nowrap;
        min-block-size: 0;
        border: 0;
        margin: 0;
    }

    @media (width >= 75rem) {
        .primary-nav__link { font-size: var(--text-md); }
    }

    /* ── Signature: the diagonal cut ── */
    .primary-nav__link[aria-current]::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: var(--space-1);
        block-size: 2px;
        clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
        background: var(--color-primary);
    }

    /* The Sale item in red text: (0,2,1), the weight of the links' red hover above, so this later rule wins. */
    /* The logo's red (`--color-primary`), not the text red. */
    .primary-nav a.primary-nav__link--sale { color: var(--color-primary); }

    /* Keyboard focus shows the state's shape, muted; hover and an open panel show no line. */
    .primary-nav__link:focus-visible::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: var(--space-1);
        block-size: 2px;
        clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
        background: var(--color-line-strong);
    }
    .primary-nav__link[aria-current]:hover::after { background: var(--color-primary); }

    /* ── Mega menu ──
       The item's children, navigation only. The item is a `<details>`, one open at a time (the panels share a `name`):
       without a script it opens on a click or from the keyboard, with Erebor's `megamenu` controller also on hover; its
       arrow turns on [open]. */
    .gz-megamenu-item > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
    .gz-megamenu-item > summary::-webkit-details-marker { display: none; }
    .gz-megamenu-item[open] > summary .icon {
        transform: rotate(180deg);
        transition: transform var(--gz-dur-2) var(--ease-standard);
    }
    .gz-megamenu {
        /* Anchored to the sticky header, not the item, which stands behind the wordmark. */
        position: absolute;
        inset-inline: 0;
        inset-block-start: 100%;
        background: var(--color-paper);
        box-shadow: var(--shadow-overlay);
        /* The panel runs on from the header with no seam — no top border, the shadow only below. */
        clip-path: inset(0 0 -48px 0);
        z-index: var(--gz-z-dropdown);
    }
    .gz-megamenu[hidden] { display: none; }

    /* The panel's content (GZ-0145), in the header's width, so that it starts under the wordmark and ends under the
       icons: the category's name and line, its subcategories, its photo. Capped at the room under the header, which
       the controller measures, and scrolling inside past it. */
    .gz-megamenu__content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 20rem);
        align-items: start;
        column-gap: var(--space-8);
        padding-block: var(--space-6) var(--space-7);
        max-block-size: var(--megamenu-room, var(--gz-megamenu-room));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Below 1200 px the name and line stand over the subcategories, so that two columns of them keep one line each. */
    @media (width < 75rem) {
        .gz-megamenu__content {
            grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
            grid-template-areas: "intro photo" "links photo";
            column-gap: var(--space-7);
            row-gap: var(--space-5);
        }
        .gz-megamenu__intro { grid-area: intro; }
        .gz-megamenu__links { grid-area: links; }
        .gz-megamenu__photo { grid-area: photo; }
    }

    /* The category's name — the link to the whole category, the only way to the parent's listing — and its line. */
    .gz-megamenu__intro { display: grid; justify-items: start; gap: var(--space-2); }
    .gz-megamenu__all, .gz-megamenu__title {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
        color: var(--color-ink);
        font-size: var(--text-xl);
        font-weight: var(--font-weight-display);
        letter-spacing: var(--tracking-display);
        line-height: var(--gz-display-lh);
        text-decoration: none;
    }
    .gz-megamenu__all .icon { transition: translate var(--gz-dur-2) var(--gz-ease-out); }
    .gz-megamenu__all:hover { color: var(--color-sale); }
    .gz-megamenu__all:hover .icon { translate: var(--space-1) 0; }
    .gz-megamenu__line { margin: 0; color: var(--color-ink-muted); font-size: var(--text-sm); }

    /* The subcategories fill column by column, the columns balanced, the items' gaps equal;
       the template counts them (one for up to four items, two for up to ten, three for more). */
    .gz-megamenu__list {
        list-style: none;
        /* the first item's text level with the category's name: the links' own padding lifted off */
        margin: calc(-1 * var(--space-2)) 0 0;
        padding: 0;
        column-count: var(--gz-megamenu-columns, 1);
        column-gap: var(--space-8);
    }
    .gz-megamenu__list > li { break-inside: avoid; }
    .gz-megamenu__list a {
        display: inline-flex;
        align-items: baseline;
        gap: var(--space-2);
        color: var(--color-ink);
        font-size: var(--text-md);
        line-height: var(--leading-snug);
        text-decoration: none;
        padding-block: var(--space-2);
    }
    .gz-megamenu__list a:hover { color: var(--color-sale); text-decoration: underline; text-underline-offset: 3px; }
    /* A heading among the items (a menu item with no target): the item's size, not a link's colour. */
    .gz-megamenu__list span { display: inline-flex; padding-block: var(--space-1); font-size: var(--text-sm); font-weight: 600; }
    /* The heading's own items, set in under it, quieter. */
    .gz-megamenu__sublist { list-style: none; margin: 0; padding: 0 0 var(--space-2) var(--space-3); display: grid; }
    .gz-megamenu__sublist a { color: var(--color-ink-muted); font-size: var(--text-sm); padding-block: var(--space-1); }

    /* The category's photo, the homepage's, without its texts: the name and line stand at the panel's start. */
    .gz-megamenu__photo { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--color-sunken); }
    .gz-megamenu__photo img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        transition: transform var(--gz-dur-2) var(--ease-standard);
    }
    .gz-megamenu__photo:hover img { transform: scale(1.02); }

    /* A panel opens with a short fade from above. */
    .gz-megamenu-item[open] > .gz-megamenu { animation: gz-megamenu-in var(--gz-dur-2) var(--gz-ease-out); }
    @keyframes gz-megamenu-in {
        from { opacity: 0; translate: 0 calc(-1 * var(--space-1)); }
    }
    @media (prefers-reduced-motion: reduce) {
        .gz-megamenu-item[open] > .gz-megamenu { animation: none; }
        .gz-megamenu__photo:hover img, .gz-megamenu__all:hover .icon { transform: none; translate: none; }
    }

    /* ── Icon row ── */
    .site-header__actions { justify-self: end; gap: var(--space-1); }
    .gz-icon-button {
        display: grid;
        place-items: center;
        min-inline-size: 44px;
        min-block-size: 44px;
        background: none;
        border: 0;
        padding: 0;
        color: var(--color-ink);
        cursor: pointer;
        border-radius: var(--radius-control);
        text-decoration: none;
        position: relative;
    }
    .gz-icon-button:hover { background: var(--gz-surface-warm-2); }

    /* The base's icon buttons, Godzone's count pill. */
    /* The neutraliser reverts a button's colour to the browser's; the header's icon buttons inherit its ink again. */
    .site-header :is(.icon-button, .header-action) { color: inherit; border-radius: var(--radius-control); }
    .header-action__count {
        position: absolute;
        inset-block-start: 5px;
        inset-inline: auto 4px;
        background: var(--gz-surface-inverse);
        color: var(--gz-fg-on-inverse);
        font-size: var(--gz-text-2xs);
        font-weight: 700;
        line-height: 1;
        min-inline-size: 17px;
        block-size: 17px;
        display: grid;
        place-items: center;
        padding-inline: 4px;
        font-variant-numeric: normal;
    }

    /* ── Search overlay ── */
    .gz-search { display: none; }
    .gz-search[hidden] { display: none; }

    /* Drops in; instant under reduced motion. */
    .gz-search__sheet {
        position: relative;
        z-index: var(--gz-z-modal);
        max-block-size: 100%;
        overflow-y: auto;
        background: var(--color-paper);
        box-shadow: var(--gz-shadow-3);
        animation: gz-search-in var(--gz-dur-2) var(--gz-ease-out);
    }

    @keyframes gz-search-in {
        from { opacity: 0; transform: translateY(calc(-1 * var(--space-2))); }
    }

    @media (width >= 56.25rem) {
        .gz-search__sheet { border-end-start-radius: var(--radius-panel); border-end-end-radius: var(--radius-panel); }
    }
    .gz-search__bar {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-block-size: var(--gz-header-height);
        padding-block: var(--space-3);
    }

    .gz-search__end { display: flex; align-items: center; gap: var(--space-3); flex: none; }

    /* From 900 px the field takes the middle column. */
    @media (width >= 56.25rem) {
        .gz-search__bar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 48rem) minmax(0, 1fr);
            padding-block: var(--space-5) var(--space-3);
        }
        .gz-search__bar .gz-search__form { grid-column: 2; inline-size: 100%; }
        .gz-search__end { grid-column: 3; justify-self: end; }
    }
    .gz-search__form {
        position: relative;
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        max-inline-size: 48rem;
        margin-inline: auto;
    }
    .gz-search__magnifier {
        position: absolute;
        inset-inline-start: var(--gz-space-5);
        display: grid;
        place-items: center;
        color: var(--color-ink-muted);
        pointer-events: none;
    }

    /* One search field: the same pill in the header panel, the menu and the results page. */
    .search-field__input {
        flex: 1;
        min-inline-size: 0;
        /* The base's 100% / 48 px would change the panel's width at 320 px and the text's position. */
        inline-size: auto;
        block-size: auto;
        min-block-size: 56px;
        font: inherit;
        font-size: var(--text-lg);
        color: var(--color-ink);
        background: var(--gz-surface-warm-2);
        border: var(--border-width) solid transparent;
        border-radius: var(--radius-pill);
        /* Room for the magnifier on the left and the cross on the right. */
        padding-inline: calc(var(--gz-space-5) + var(--space-6)) var(--space-7);
        transition: background-color var(--duration-quick) var(--gz-ease-out), border-color var(--duration-quick) var(--gz-ease-out),
            box-shadow var(--duration-quick) var(--gz-ease-out);
    }
    .search-field__input::placeholder { color: var(--color-ink-muted); }
    /* A base search field with no magnifier at its left (the checkout's pickup point search, its button on the right)
       starts its text at the pill's own inset, not after the magnifier's room. */
    .search-field:not(:has([class*="__magnifier"])) > .search-field__input { padding-inline-start: var(--gz-space-5); }
    /* The pickup point's two ways in, the map's button and the list's, on one line and centred on each other: the
       list's quiet button sat on its own baseline, below the map's. */
    [data-controller~="pickup-map"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
    /* The pickup point block under the method list: a section gap above its heading, the heading close to its hint, the
       hint clear of the ways in, and the block's own end before the form's button. */
    fieldset[data-pickup-picker] { margin-block: var(--space-6) var(--space-5); }
    [data-pickup-picker] > legend { margin-block-end: var(--space-2); }
    [data-pickup-picker] > :is([data-pickup-chosen], [data-pickup-required]) { margin-block: 0 var(--space-4); }
    [data-pickup-picker] > [data-controller~="pickup-map"] { margin-block-end: var(--space-4); }

    /* On the phone a step smaller, so the placeholder fits — not below 16 px, or iOS zooms into the field. */
    @media (width < 37.5rem) {
        .search-field__input { font-size: var(--text-md); padding-inline-end: var(--space-6); }
    }
    .search-field__input:hover { background: var(--gz-surface-warm-3); }

    /* The browser's own cross would stand beside ours. */
    .search-field__input::-webkit-search-cancel-button { appearance: none; }

    .search-field__input:focus-visible {
        background: var(--color-paper);
        outline: var(--gz-border-2) solid var(--color-line-strong);
        outline-offset: 0;
        box-shadow: 0 0 0 calc(var(--gz-border-2) + var(--space-1)) var(--gz-surface-warm-2);
        border-radius: var(--radius-pill);
    }
    .gz-search__form:focus-within .gz-search__magnifier { color: var(--color-ink); }
    .gz-search__close {
        display: grid;
        place-items: center;
        flex: none;
        min-inline-size: 44px;
        min-block-size: 44px;
        background: none;
        border: 0;
        border-radius: var(--radius-pill);
        color: var(--color-ink);
        cursor: pointer;
        transition: background-color var(--duration-quick) var(--gz-ease-out);
    }
    .gz-search__close:hover { background: var(--gz-surface-warm-2); }

    /* The keyboard's way out, said where the pointer's is — only where there is a keyboard to speak of. */
    .gz-search__hint { display: none; }

    @media (width >= 56.25rem) {
        .gz-search__hint {
            display: inline-flex;
            flex: none;
            font-size: var(--gz-text-2xs);
            color: var(--color-ink-muted);
        }
    }
    .gz-search__hint kbd {
        font: inherit;
        font-weight: 600;
        padding: 2px var(--space-2);
        border: var(--border-width) solid var(--color-line);
        border-radius: var(--gz-radius-1);
    }

    /* The panel's content lines up under the field — one column, not the page's left edge. */
    .gz-search__body { padding-block: var(--gz-space-5) var(--space-6); }
    .gz-search__body > * { max-inline-size: 48rem; margin-inline: auto; }

    /* Quick chips: the shop's categories under the field. */
    .gz-search__quick[hidden] { display: none; }
    .gz-search__chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin: var(--space-3) 0 0;
        padding: 0;
        list-style: none;
    }
    .gz-search__chip {
        display: inline-flex;
        align-items: center;
        min-block-size: 44px;
        padding-inline: var(--gz-space-5);
        background: var(--gz-surface-warm-2);
        border: var(--border-width) solid transparent;
        border-radius: var(--radius-pill);
        color: var(--color-ink);
        font-size: var(--text-sm);
        font-weight: 600;
        text-decoration: none;
        transition: background-color var(--duration-quick) var(--gz-ease-out), color var(--duration-quick) var(--gz-ease-out);
    }
    a.gz-search__chip:is(:hover, :focus-visible) { background: var(--gz-surface-inverse); color: var(--gz-fg-on-inverse); }
    .gz-search-button { display: grid; }

    /* ── Mobile menu ── a popover drawer ("Overlays on Erebor" below). */
    @media (width >= 56.25rem) {
        .site-header__menu { display: none; }
    }

    /* Search first: a field in the search field's pill, not a second modal over the drawer and not a link that leaves
       the menu. */
    .gz-mobile-menu__search { margin-block-end: var(--space-2); }
    .gz-mobile-menu__search-row { position: relative; display: flex; align-items: center; }
    .gz-mobile-menu { list-style: none; margin: 0; padding: var(--space-2) 0; }
    .gz-mobile-menu__item { border-block-end: var(--border-width) solid var(--color-line); }

    /* The expandable item is a button: a link that expands lies to a screen reader. */
    .gz-mobile-menu__toggle, .gz-mobile-menu__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        inline-size: 100%;
        /* 48 px is a touch target, not aesthetics. */
        min-block-size: 48px;
        padding: var(--space-2) 0;
        background: none;
        border: 0;
        font: inherit;
        font-weight: 700;
        font-size: var(--text-lg);
        letter-spacing: var(--gz-track-heading);
        color: var(--color-ink);
        text-align: start;
        text-decoration: none;
        cursor: pointer;
    }
    .gz-mobile-menu__toggle:hover, .gz-mobile-menu__link:hover { color: var(--color-sale); }

    /* The header's Sale accent; two classes, or the shared rule wins. */
    .gz-mobile-menu__link.gz-mobile-menu__link--accent { color: var(--color-primary); } /* the logo's red */
    /* A branch is a `<details>` (no script), so its open state is `[open]`, not the prototype's `aria-expanded`. */
    .gz-mobile-menu__branch-group[open] > .gz-mobile-menu__toggle .icon {
        transform: rotate(180deg);
        transition: transform var(--gz-dur-2) var(--ease-standard);
    }
    .gz-mobile-menu__branch { padding-block-end: var(--space-3); }
    .gz-mobile-menu__branch[hidden] { display: none; }
    .gz-mobile-menu__branch a {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-3);
        min-block-size: 44px;
        padding: var(--space-2) 0 var(--space-2) var(--space-4);
        color: var(--color-ink);
        text-decoration: none;
        font-size: var(--text-md);
    }
    .gz-mobile-menu__branch a:hover { color: var(--color-sale); }
    .gz-mobile-menu__all { font-weight: 600; }
    .gz-mobile-menu__heading { display: flex; align-items: center; min-block-size: 44px; padding: var(--space-2) 0 var(--space-2) var(--space-4); font-weight: 600; }
    .gz-mobile-menu__branch a.gz-mobile-menu__leaf { padding-inline-start: var(--space-6); }
    .gz-mobile-menu__meta { margin-block-start: var(--space-5); display: grid; }
    .gz-mobile-menu__meta a {
        display: flex;
        align-items: center;
        min-block-size: 44px;
        color: var(--color-ink);
        text-decoration: none;
        font-size: var(--text-md);
        font-weight: 500;
    }
    .gz-mobile-menu__meta a:hover { color: var(--color-sale); }
    .gz-drawer__monogram { block-size: 26px; inline-size: auto; }

    /* ── Footer ── */
    .site-footer {
        /* Transparent: the base's opaque ground changes the text's antialiasing on the home page. */
        background: none;
        border-block-start: var(--border-width) solid var(--color-line);
        padding-block: 0 var(--space-7);
    }

    /* 1 / 2 / 3 / 5 columns. */
    .site-footer__columns { padding-block: var(--space-7) 0; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }

    @media (width >= 37.5rem) {
        .site-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (width >= 56.25rem) {
        .site-footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    /* Five columns: four left „Kontakt“ alone on a second row. */
    @media (width >= 75rem) {
        .site-footer__columns { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }

    /* 44 px targets. */
    .site-footer li a, .site-footer__contact a {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        min-block-size: 44px;
        min-inline-size: 44px;
        text-decoration-line: underline;
        text-decoration-color: transparent;
        text-decoration-thickness: var(--border-width);
        transition: text-decoration-color var(--gz-dur-2) var(--ease-standard),
            color var(--gz-dur-2) var(--ease-standard);
    }
    .site-footer li a:hover,
    .site-footer li a:focus-visible,
    .site-footer__contact a:hover,
    .site-footer__contact a:focus-visible {
        text-decoration-color: currentColor;
    }

    /* Contact links turn red on hover like links in text; without this `.site-footer a` wins over `a:hover`. */
    .site-footer__contact a:hover, .site-footer__contact a:focus-visible { color: var(--color-sale); }

    @media (prefers-reduced-motion: reduce) {
        .site-footer li a, .site-footer__contact a { transition: none; }
    }

    /* The base's contact is a grid of medium-weight links; Godzone's is lines of plain text. */
    .site-footer__contact { display: block; line-height: var(--leading-body); margin: 0; }
    .site-footer__contact a { font-weight: inherit; }
    .gz-footer__pickup { display: block; margin-block-start: var(--space-2); }

    /* Only Facebook and Instagram: the client's previous shop links no other network. */
    .gz-footer__social { display: flex; gap: var(--space-2); margin: 0; }
    .gz-footer__social a {
        display: grid;
        place-items: center;
        min-inline-size: 44px;
        min-block-size: 44px;
        border: var(--border-width) solid var(--color-line);
        border-radius: var(--radius-control);
        color: var(--color-ink);
    }
    .gz-footer__social a:hover { background: var(--color-sunken); color: var(--color-sale); }

    /* ── Newsletter ── */
    .gz-newsletter {
        background: var(--gz-surface-inverse);
        color: var(--gz-fg-on-inverse);
        /* Tighter on a phone, so the whole footer fits one screen (844 px at 390 px). */
        padding-block: var(--space-6);
    }

    @media (width >= 56.25rem) {
        .gz-newsletter { padding-block: var(--space-8); }
    }
    .gz-newsletter__wrap { display: grid; gap: var(--space-5); align-items: center; }

    @media (width >= 56.25rem) {
        .gz-newsletter__wrap { grid-template-columns: 1fr minmax(0, 420px); gap: var(--space-7); }
    }

    /* The heading in the display role — the same voice as the section headings of the page, in white. */
    .gz-newsletter__heading {
        margin: 0 0 var(--space-2);
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-display);
        text-transform: uppercase;
        letter-spacing: var(--tracking-display);
        line-height: var(--gz-display-lh);
        color: var(--gz-fg-on-inverse);
    }
    .gz-newsletter__description { margin: 0; color: var(--gz-fg-on-inverse); }
    .gz-newsletter__form { display: flex; flex-wrap: wrap; gap: var(--space-2); }

    /* `hidden` wins over `display: flex`. */
    .gz-newsletter__form[hidden] { display: none; }
    .gz-newsletter__form input {
        flex: 1 1 200px;
        min-inline-size: 0;
        min-block-size: 48px;
        font: inherit;
        color: var(--color-ink);
        background: var(--color-paper);
        border: var(--gz-border-2) solid var(--color-paper);
        border-radius: var(--radius-control);
        padding-inline: var(--space-3);
    }
    .gz-newsletter__form input::placeholder { color: var(--color-ink-muted); }

    /* Outline button on the dark band — the secondary button's line and text turn white. */
    .gz-newsletter__form .gz-button { color: var(--gz-fg-on-inverse); border-color: var(--gz-fg-on-inverse); }
    .gz-newsletter__form .gz-button:hover {
        background: var(--gz-fg-on-inverse);
        color: var(--color-ink);
        border-color: var(--gz-fg-on-inverse);
    }

    /* `.site-footer__column h2`, not `.site-footer h2`: the newsletter's heading is an h2 in the footer too. */
    .site-footer__column h2 {
        font-size: var(--gz-text-2xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: var(--gz-track-caps);
        color: var(--color-ink);
        margin: 0;
    }

    /* ── Link groups as <details> ── */
    /* The base's column is a grid spanning two of twelve tracks; Godzone's is a block in its own grid. */
    .site-footer__column { display: block; grid-column: auto; }
    .site-footer__column > .site-footer__heading { display: none; margin-block-end: var(--space-3); }
    .gz-footer__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        min-block-size: 44px; /* the row IS the 44 px target */
        list-style: none; /* the native marker; the chevron stands in for it */
        cursor: pointer;
    }
    .gz-footer__summary::-webkit-details-marker { display: none; }
    .gz-footer__summary svg {
        flex: none;
        color: var(--color-ink-muted);
        transition: transform var(--gz-dur-2) var(--ease-standard);
    }
    .gz-footer__summary:focus-visible { outline: var(--gz-border-2) solid var(--color-focus); outline-offset: 2px; }

    /* A column carries its content twice: open under the heading for the wide screen (`gz-footer__wide`) and in a closed
       `<details>` for the phone. Closing an open group below 600 px would take a script, and the platform loads no theme
       JavaScript yet; a closed group cannot be opened by CSS in every engine (WebKit keeps `::details-content` hidden) —
       so one copy shows at a time, and from 600 px the accordion is gone: nothing to click, focus or announce. */
    .gz-footer__wide { display: none; }
    @media (width >= 37.5rem) {
        .site-footer__column > .site-footer__heading, .gz-footer__wide { display: block; }
        .gz-footer__group { display: none; }
    }
    .gz-footer__group[open] > .gz-footer__summary svg { transform: rotate(180deg); }

    /* Below `sm` the groups are rows divided by lines, not columns divided by gaps. */
    @media (width < 37.5rem) {
        .site-footer__columns { gap: 0; }
        .site-footer__column { border-block-start: var(--border-width) solid var(--color-line); }
        .site-footer__column:last-child { border-block-end: var(--border-width) solid var(--color-line); }
        .gz-footer__group[open] { padding-block-end: var(--space-3); }
    }

    @media (prefers-reduced-motion: reduce) {
        .gz-footer__summary svg { transition: none; }
    }

    /* No gap: the padding is in the 44 px link. */
    .site-footer__links { padding: 0; margin: 0; list-style: none; }
    .site-footer a { color: var(--color-ink); text-underline-offset: 3px; }

    /* The legal row: identity, social, switcher. */
    .site-footer__legal { margin-block-start: var(--space-7); padding-block: var(--space-5) 0; font-size: var(--text-xs); justify-content: flex-start; row-gap: var(--space-2); }

    @media (width < 37.5rem) {
        .site-footer__legal { margin-block-start: var(--space-6); }
    }

    /* The legal links (withdrawal, the legal guarantee, cookie settings) share one row in one size and weight, each a
       44 px target; the identity takes the next row, the controls the one after. */
    .gz-footer__withdrawal, .gz-footer__consent { margin: 0; flex: 0 1 auto; font-size: var(--text-sm); font-weight: 600; }
    :is(.gz-footer__withdrawal, .gz-footer__consent) > :is(a, button) { display: inline-flex; align-items: center; min-block-size: var(--target-min); }
    /* The guarantee entry is a button (its popover's opener): this theme's reset reverts a button's font and colour, so
       it takes the row's and the underline of the links beside it. */
    .site-footer__legal .guarantee-entry {
        font: inherit;
        letter-spacing: inherit;
        color: var(--color-ink);
        text-decoration: underline 1px var(--color-line-strong);
        text-underline-offset: 3px;
    }
    .site-footer__legal .guarantee-entry:hover { color: var(--color-sale); text-decoration-color: currentcolor; }
    .gz-footer__identity { margin: 0; line-height: var(--leading-body); flex: 1 1 100%; }
    .gz-footer__social { margin-inline-end: auto; }

    /* The children's items stand apart — a display flag, not another kind of link. No separator line and no space above:
       the bold name alone sets them apart, at the same gap as the rest. */
    .gz-megamenu__item--apart > a { font-weight: 700; color: var(--color-ink); }

    /* Components: semantic tokens only, without exception. */
    /* ── Icons ── the base templates' `.icon` in Godzone's 1.5 px line. */
    .icon { flex: none; display: block; }
    .icon { stroke-width: 1.5; }

    /* ── Buttons ── */
    .gz-button, .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-block-size: 48px;
        padding: var(--space-3) var(--gz-space-5);
        font: inherit;
        font-weight: var(--button-weight); /* 600 in the token block */
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        border-radius: var(--radius-control);
        border: var(--gz-border-2) solid transparent;
        cursor: pointer;
        transition: background-color var(--duration-quick) var(--ease-standard),
            color var(--duration-quick) var(--ease-standard);
    }

    @media (width >= 56.25rem) {
        .gz-button, .button { min-block-size: 44px; padding: var(--space-3) var(--space-5); }
    }

    /* ONE full brand red per screen. */
    .gz-button--primary, .button--primary { background: var(--color-primary); color: var(--color-on-primary); }
    .gz-button--primary:hover, .button--primary:hover { background: var(--color-primary-hover); }
    .gz-button--primary:active, .button--primary:active { background: var(--gz-surface-brand-active); }
    .gz-button--secondary, .button--secondary {
        background: transparent;
        color: var(--color-ink);
        border-color: var(--color-line-strong);
    }
    .gz-button--secondary:hover, .button--secondary:hover { background: var(--color-sunken); border-color: var(--color-ink); }

    /* The dark alternative where the red is already spent. */
    .gz-button--dark { background: var(--gz-surface-inverse); color: var(--gz-fg-on-inverse); }
    .gz-button--dark:hover { background: var(--gz-surface-muted); }
    .gz-button--text {
        background: none;
        border: 0;
        color: var(--color-sale);
        min-block-size: 44px;
        padding-inline: var(--space-2);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .gz-button--text:hover { color: var(--gz-fg-brand-strong); }
    .gz-button--full, .button--block { inline-size: 100%; }
    .gz-button[disabled], .gz-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

    /* A text link with an icon — it does not compete with the action. */
    .gz-link-more {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--color-ink);
        font-size: var(--text-sm);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }
    .gz-link-more:hover { color: var(--color-sale); text-decoration: underline; text-underline-offset: 4px; }

    /* ── Forms ── the base form theme's markup (`.field`, `.choice`, `.alert`) in Godzone's look; the theme's own
       markup (`gz-field`, `gz-option`, `gz-notice`) shares each rule. A row is a block, not the foundation's grid: the
       label, the hint and the error set their own spacing. */
    .gz-field, .field { display: block; margin-block-end: var(--gz-space-5); }
    /* Erebor's base forms (account, panels, the checkout's steps): the stack's gap alone. */
    :is(.l-account__content, .panel-grid, .gz-checkout) .form-stack :is(.gz-field, .field) { margin-block-end: 0; }
    /* A checkbox row is its option card, which keeps the card's own rhythm. */
    .field:has(> .choice) { margin-block-end: 0; }
    .field > :where(:not(.choice)) { margin-block: 0; }
    /* A radio group: option cards under a label. */
    fieldset:is(.gz-field, .field) { border: 0; padding: 0; min-inline-size: 0; }
    fieldset:is(.gz-field, .field) > legend { padding: 0; }
    /* The checkout's groups — the addresses, the delivery and the payment choice — are fieldsets for their legend; the
       approved design draws them as plain sections under a heading (the prototype's checkout-delivery), never a box. */
    .gz-checkout fieldset { border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; }
    .field__optional { color: var(--color-ink-muted); font-size: var(--text-sm); font-weight: inherit; }
    .gz-field > label, .gz-field > legend, .field__label, .field > label:not(.choice) {
        display: block;
        font-size: var(--text-sm);
        font-weight: 600;
        margin-block-end: var(--space-2);
    }
    .gz-field input:not([type="radio"], [type="checkbox"]), .gz-field select, .gz-field textarea, .input, .select, .textarea {
        inline-size: 100%;
        min-block-size: 48px;
        font: inherit;
        color: var(--color-ink);
        padding: var(--space-3);
        background-color: var(--color-paper);
        border: var(--gz-border-2) solid var(--color-line-strong);
        border-radius: var(--radius-control);
    }
    /* An invalid field is framed red, once. The border colour above outranks the base's invalid rule, an earlier layer,
       which left the theme's brown border around the base's red inset line; focused, it takes its halo (above). After
       the rule above, which it ties with. */
    .theme-godzone :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-danger); box-shadow: none; }
    .gz-hint, .field__hint {
        display: block;
        font-size: var(--text-xs);
        color: var(--color-ink-muted);
        margin-block-start: var(--space-1);
    }
    .gz-field-error, .field__error {
        display: flex;
        gap: var(--space-2);
        align-items: flex-start;
        font-size: var(--text-sm);
        color: var(--color-danger);
        margin-block-start: var(--space-2);
    }

    /* ── Notices ── */
    .gz-notice, .alert {
        display: flex;
        gap: var(--space-3);
        align-items: flex-start;
        padding: var(--space-4);
        border-radius: var(--radius-control);
        margin-block-end: var(--gz-space-5);
    }
    :is(.gz-notice, .alert) p:last-child { margin-block-end: 0; }
    /* A flash reads as a notice: the base sets its sentence bold, which made a whole red sentence shout above the page. */
    .alert .alert__title { font-weight: inherit; }

    /* `hidden` must hide: `display: flex` beats `[hidden]`, and a notice such as the size warning starts hidden. */
    .gz-notice[hidden] { display: none; }
    .gz-notice--success, .alert--success { background: var(--color-success-soft); color: var(--color-success); }
    .gz-notice--caution, .alert--warning { background: var(--color-warning-soft); color: var(--color-warning); }
    .gz-notice--error, .alert--danger { background: var(--color-danger-soft); color: var(--color-danger); }
    .gz-notice--info { background: var(--color-info-soft); color: var(--color-info); }

    /* ── Badges ── */
    .gz-badges {
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-start: var(--space-2);
        display: flex;
        gap: var(--space-1);
        z-index: 1;
    }
    .gz-badge {
        font-size: var(--gz-text-2xs);
        font-weight: 700;
        letter-spacing: var(--gz-track-caps);
        text-transform: uppercase;
        padding: var(--space-1) var(--space-2);
        border-radius: var(--gz-radius-1);
        border: var(--gz-border-2) solid transparent;
    }

    /* The discount is red text in an outline, not a red area, so the button stays the strongest. */
    .gz-badge--discount { background: var(--color-paper); color: var(--color-sale); border-color: var(--color-sale); }

    /* ── Price block — one component, fixed order ── */
    /* A column, not the base's baseline row; tabular figures and no wrapping only on the figure itself. */
    .price { display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-variant-numeric: normal; }
    .price__current { font-size: var(--text-md); font-weight: 700; font-variant-numeric: tabular-nums; white-space: normal; }

    /* 16 px on the tile, not 20–22: a large price turns the grid into a price list; the detail keeps it large. */
    .price--detail .price__current { font-size: var(--text-xl); }
    .price__compare { font-size: var(--text-sm); color: var(--color-ink-muted); text-decoration: line-through; }
    .price__omnibus, .price__vat { font-size: var(--text-xs); color: var(--color-ink-muted); }
    /* the notes under a rate drawn by the base's macro, which ends its own block: the same column as inside `.price` */
    .price__notes { display: flex; flex-direction: column; gap: 2px; margin: 0; }

    /* 16 px: an assurance, not fine print; two steps under the price, as it also carries "sold out". */
    .gz-availability { font-size: var(--text-md); font-weight: 600; }
    .gz-availability--in-stock { color: var(--color-success); }
    .gz-availability--sold-out { color: var(--color-ink-muted); }

    /* Scarcity is a warning — the "Last pieces" badge's pair. */
    .gz-availability--last { color: var(--color-warning); }

    /* Before a size is chosen the line asks, it does not report. */
    .gz-availability--pick { color: var(--color-ink-muted); }

    /* Made to order is information, not stock: on the product page and on a cart line alike (#485). */
    .gz-availability--order, .gz-line__order { color: var(--color-info); }

    /* ── Variant switcher — Erebor's option tiles, Godzone's look ── */
    .option-group__options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .option-tile__label {
        min-inline-size: 48px;
        min-block-size: 48px;
        padding-inline: var(--space-3);
        font-weight: 600;
        font-variant-numeric: normal;
        color: var(--color-ink);
        border: var(--gz-border-2) solid var(--color-line-strong);
    }
    .option-tile:hover .option-tile__label { border-color: var(--color-ink); }
    .option-tile input:checked + .option-tile__label {
        background: var(--gz-surface-inverse);
        color: var(--gz-fg-on-inverse);
        border-color: var(--gz-surface-inverse);
        box-shadow: none;
    }
    .option-tile input:focus-visible + .option-tile__label { outline: var(--gz-border-2) solid var(--color-focus); outline-offset: 2px; }

    /* A sold-out variant is shown, not hidden — and stays struck when chosen. */
    /* While the sizes cost differently, each tile names its own price under the size (#632). */
    .option-tile__price { display: block; font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-snug); }
    .option-tile__label:has(.option-tile__price) { flex-direction: column; padding-block: var(--space-1); }

    .option-tile--unavailable input + .option-tile__label {
        border-style: dashed;
        text-decoration: line-through;
        color: var(--color-ink-muted);
    }

    .gz-drawer {
        position: fixed;
        z-index: var(--gz-z-modal);
        background: var(--color-paper);
        box-shadow: var(--shadow-overlay);
        display: flex;
        flex-direction: column;
        inset-inline-end: 0;
        inset-block: 0;
        inline-size: min(420px, 100%);
        transform: translateX(100%);
        /* `visibility` is part of the transition, otherwise the element would vanish before it slides in. */
        transition: transform var(--duration-base) var(--gz-ease-out), visibility var(--duration-base);
    }
    .gz-drawer:not(.gz-drawer--open) { visibility: hidden; }

    /* The menu panel comes from the inline end like every drawer, beside its button. */
    .gz-drawer--narrow { inline-size: min(340px, 88%); }
    .gz-drawer__head {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4) var(--gz-space-5);
        border-block-end: var(--border-width) solid var(--color-line);
    }
    .gz-drawer__heading { margin: 0; font-size: var(--text-lg); }
    .gz-drawer__close { margin-inline-start: auto; }
    .gz-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--gz-space-5); }

    /* On a phone a sheet drawer (the filters panel) rises from the bottom; the rule names the shape, not the content. */
    @media (width < 37.5rem) {
        .gz-drawer--sheet {
            inset-inline: 0;
            inset-block: auto 0;
            inline-size: 100%;
            max-block-size: 85vh;
            transform: translateY(100%);
            border-radius: var(--radius-panel) var(--radius-panel) 0 0;
        }
    }

    /* Under `reduce` the element does NOT slide — it appears. Shortening the duration is not enough. Only a closed
       drawer is taken out of sight: no open rule sets the opacity back, so an open one (`--open`, `:popover-open`) must
       never match here, or it opens transparent over its backdrop. */
    @media (prefers-reduced-motion: reduce) {
        .gz-drawer { transform: none; }
        .gz-drawer:not(.gz-drawer--open, :popover-open) { opacity: 0; visibility: hidden; }
    }

    /* ── Overlays on Erebor ──
       The drawers and the search panel are a `popover` their button opens, as the platform loads no theme JavaScript yet:
       open is `:popover-open`, the overlay the top layer's `::backdrop`, Esc and a click outside close it. The rules
       above for a class `--open`, an overlay element and the `hidden` attribute serve the same markup driven by a script.
       The UA's popover box (centred, bordered, padded, sized to fit) gives way to the drawer's own. */
    .gz-drawer[popover] {
        margin: 0;
        padding: 0;
        border: 0;
        inset-inline-start: auto;
        block-size: auto;
        color: var(--color-ink);
        overflow: hidden;
        transition: none; /* a visibility in transition keeps the close button's autofocus from taking focus */
    }
    .gz-drawer[popover]:popover-open { display: flex; transform: none; visibility: visible; }
    .gz-drawer[popover]::backdrop { background: var(--backdrop); }
    @media (width < 37.5rem) {
        .gz-drawer--sheet[popover] { inset-inline-start: 0; inset-block-start: auto; }
    }
    .gz-search[popover] {
        margin: 0;
        padding: 0;
        border: 0;
        inset: 0 0 auto;
        inline-size: 100%;
        max-inline-size: none;
        block-size: auto;
        max-block-size: 100dvh;
        background: transparent;
        overflow: visible;
    }
    .gz-search[popover]:popover-open { display: block; }
    .gz-search[popover]::backdrop { background: var(--backdrop); backdrop-filter: blur(6px); }
    @media (prefers-reduced-motion: no-preference) {
        .gz-drawer[popover]:popover-open { animation: gz-drawer-in var(--duration-base) var(--gz-ease-out); }
    }
    @media (prefers-reduced-motion: no-preference) and (width < 37.5rem) {
        .gz-drawer--sheet[popover]:popover-open { animation-name: gz-drawer-up; }
    }
    @keyframes gz-drawer-in { from { transform: translateX(100%); } }
    @keyframes gz-drawer-up { from { transform: translateY(100%); } }

    /* ── Pagination ── */
    .pagination { gap: var(--space-2); align-items: center; margin-block-start: var(--space-7); }
    .gz-page-link {
        display: inline-grid;
        place-items: center;
        min-inline-size: 44px;
        min-block-size: 44px;
        padding-inline: var(--space-2);
        border-radius: var(--radius-control);
        color: var(--color-ink);
        text-decoration: none;
        font-weight: 600;
        font-variant-numeric: normal; /* the base's `.pagination span` sets tabular figures */
    }
    .gz-page-link:hover { background: var(--color-sunken); }
    .gz-page-link--active { background: var(--gz-surface-inverse); color: var(--gz-fg-on-inverse); }

    /* ── Empty and error states ── */
    .empty-state {
        display: block; /* a block, not the base's grid that centres each child at its own width */
        text-align: center;
        padding-block: var(--space-8);
        max-inline-size: 46ch;
        margin-inline: auto;
    }
    .empty-state__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        justify-content: center;
        margin-block-start: var(--space-5);
    }

    /* ── Breadcrumbs ── */
    /* One line of caps, not the base's padded flex row of chevrons; every step shows on the phone too. */
    .breadcrumbs {
        padding-block: 0;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: var(--gz-track-caps);
        font-weight: 600;
        color: var(--color-ink-muted);
        margin-block-end: var(--space-4);
    }
    .breadcrumbs__list { display: block; margin: 0; padding: 0; list-style: none; }
    .breadcrumbs__item { display: inline; }
    .breadcrumbs__item + .breadcrumbs__item::before {
        display: inline;
        content: " › ";
        inline-size: auto;
        block-size: auto;
        margin: 0;
        border: 0;
        transform: none;
    }
    .breadcrumbs a { display: inline; padding-block: 0; }
    .breadcrumbs a::before { content: none; }

    /* Links inherit from the global `a` rule — a `color: inherit` here would tie with `a:hover` and win. */
    /* The product's own name is the last crumb; below `sm` the heading under it carries it alone. */
    @media (width < 37.5rem) {
        .breadcrumbs .breadcrumbs__item--current-wide { display: none; }
    }

    /* ── Select field ── */
    .gz-picker {
        appearance: none;
        font: inherit;
        color: var(--color-ink);
        background: var(--color-paper);
        border: var(--border-width) solid var(--color-line-strong);
        border-radius: var(--radius-control);
        /* 44 px, Erebor's target size (`--target-min`), stricter than WCAG's 24 px. */
        min-block-size: 44px;
        padding-inline: var(--space-3) var(--space-6);
        padding-block: var(--space-2);
        cursor: pointer;
        /* The arrow belongs to the field; without it the field reads as a text input. */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235C524A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-3) center;
    }
    .gz-picker:focus-visible { outline: var(--gz-border-2) solid var(--color-focus); outline-offset: 2px; }

    /* ══ HERO CAROUSEL ══
       Full-bleed; the next strip touches it. */
    .gz-hero { position: relative; background: var(--color-sunken); overflow: hidden; }

    /* ══ The stage ══ a scroll-snap row Erebor's cms-slider drives (assets/controllers/cms_slider_controller.js). */
    .gz-hero__strip {
        position: relative;
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        block-size: var(--gz-hero-block);
        min-block-size: calc(var(--gz-hero-natural) + var(--gz-hero-band));
        max-block-size: calc(var(--gz-hero-natural) * var(--gz-hero-max-scale) + var(--gz-hero-band));
    }
    .gz-hero__strip::-webkit-scrollbar { display: none; }
    .gz-hero__strip:focus-visible { outline: var(--gz-border-2) solid var(--color-focus); outline-offset: -4px; }
    .gz-hero__slide {
        position: relative;
        flex: 0 0 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* The band is padding, so the backdrop covers it and the controls never meet the graphic. */
    .gz-hero--controls .gz-hero__slide { padding-block-end: var(--gz-hero-band); }

    /* A link only when the target is known; the burned-in BUY label does not fake clickability. Positioned, so the
       graphic paints over the backdrop. */
    .gz-hero__area, .gz-hero__static { position: relative; display: block; inline-size: 100%; block-size: 100%; }
    .gz-hero__slide picture { display: block; inline-size: 100%; block-size: 100%; }

    /* The textless backdrop under the graphic fills the whole slide, band included, and `cover` crops it at the sides
       — never the graphic. */
    .gz-hero__slide .gz-hero__backdrop { position: absolute; inset: 0; }
    .gz-hero__slide .gz-hero__backdrop img { object-fit: cover; }

    /* `contain`: the text is part of the graphic, and cropping it crops a sentence. */
    .gz-hero__slide img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
        object-position: center;
    }
    .gz-hero__controls {
        position: absolute;
        inset-inline: 0;
        inset-block-end: var(--space-5);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
    }
    .gz-hero__controls[hidden] { display: none; }

    /* Ghost circles, no red: the red belongs to the action. */
    .gz-hero__button {
        display: grid;
        place-items: center;
        min-inline-size: 44px;
        min-block-size: 44px; /* the 44 px target */
        padding: 0;
        cursor: pointer;
        color: var(--color-ink);
        background: var(--color-paper);
        border: var(--border-width) solid var(--color-line-strong);
        border-radius: var(--radius-pill);
    }
    .gz-hero__button:hover { background: var(--gz-surface-warm-2); }
    .gz-hero__dots { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }

    /* Erebor's cms-slider dots, without the base's button look. */
    .gz-hero__dots .cms-slider__dot {
        min-inline-size: 44px;
        min-block-size: 44px; /* the 44 px target */
        padding: 0;
        cursor: pointer;
        background: none;
        border: 0;
        border-radius: 0;
        display: grid;
        place-items: center;
    }

    /* A 24 × 3 px bar in a 44 px target; the over-image pair, as the graphic stays light at night. */
    .gz-hero__dots .cms-slider__dot::before {
        content: "";
        inline-size: 24px;
        block-size: 3px;
        border-radius: var(--radius-pill);
        background: var(--gz-surface-over-image-muted);
        transition: background-color var(--duration-quick) var(--ease-standard),
            width var(--duration-quick) var(--ease-standard);
    }
    .gz-hero__dots .cms-slider__dot:hover::before { background: var(--gz-surface-over-image); }
    .gz-hero__dots .cms-slider__dot[aria-current="true"]::before { inline-size: 40px; background: var(--gz-surface-over-image); }

    @media (prefers-reduced-motion: reduce) {
        .gz-hero__dots .cms-slider__dot::before { transition: none; }
    }

    /* The campaign film and its first frame cover the whole slide, band included, as a backdrop does: it carries no
       words, so `cover` crops no sentence. Its button sits in the controls' row, at the end, above
       the controls' full-width box. */
    .gz-hero__film { position: static; }
    .gz-hero__film .gz-hero__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
    .gz-hero__film-toggle { position: absolute; z-index: 1; inset-inline-end: var(--space-5); inset-block-end: var(--space-5); }
    .gz-hero__film-toggle[hidden] { display: none; }

    /* ══ CATEGORY ENTRIES ══ */
    .gz-entries-strip { padding-block-start: var(--space-6); }

    /* Two columns; one below 600 px. */
    .gz-entries { display: grid; gap: var(--space-1); grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* On a phone the tiles stand one under the other, as the client wants. */
    @media (width < 37.5rem) {
        .gz-entries { grid-template-columns: minmax(0, 1fr); }
    }
    .gz-entry {
        position: relative;
        display: block;
        overflow: hidden;
        aspect-ratio: 3/2;
        background: var(--color-sunken);
        color: var(--color-ink);
        text-decoration: none;
    }
    .gz-entry img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        transition: transform var(--gz-dur-2) var(--ease-standard);
    }

    /* A scrim for the label burned into the photo. */
    .gz-entry::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--gz-scrim-label);
        pointer-events: none;
        transition: background-color var(--gz-dur-2) var(--ease-standard);
    }

    /* One hover reaction: the photo's slight zoom. */
    .gz-entry:hover img { transform: scale(1.02); }
    .gz-entry:focus-visible { outline: var(--gz-border-2) solid var(--color-focus); outline-offset: -4px; }

    /* The BUY pill. */
    .gz-entry__action {
        position: absolute;
        z-index: 1;
        inset-inline-end: var(--space-3);
        inset-block-end: var(--space-3);
        background: var(--gz-surface-inverse);
        color: var(--gz-fg-on-inverse);
        /* A step above the count. */
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: var(--gz-track-caps);
        text-transform: uppercase;
        padding: var(--space-2) var(--gz-space-5);
        border-radius: var(--radius-pill);
    }

    /* On the phone back to the count's size. */
    @media (width < 37.5rem) {
        .gz-entry__action { font-size: var(--gz-text-2xs); padding-inline: var(--space-4); }
    }

    @media (prefers-reduced-motion: reduce) {
        .gz-entry:hover img { transform: none; }
        .gz-entry::after { transition: none; }
    }

    /* ══ PRODUCT GRID ══ */
    /* Erebor's card region is an `li` in the base's `ol`, whose list padding and margin the foundation leaves (it takes
       the markers only) — here they go, so the grid starts at the gutter. */
    .product-grid { display: grid; gap: var(--space-5) var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; }

    @media (width >= 37.5rem) {
        .product-grid { column-gap: var(--space-4); }
    }

    @media (width >= 56.25rem) {
        .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (width >= 75rem) {
        .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    /* ── Curated product rail ──
       A rail, not a grid — the client's own carousel of twelve, four per row. */
    .gz-product-rail {
        display: grid;
        gap: var(--space-4);
        grid-auto-flow: column;
        /* The peek of the next tile is the only sign the rail scrolls. */
        grid-auto-columns: 72%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        /* `scroll-padding` too, or mandatory snapping scrolls the gutter away. */
        scroll-padding-inline: var(--gutter);
        padding-block-end: var(--space-2);
    }
    .gz-product-rail::-webkit-scrollbar { display: none; }
    .gz-product-rail > * { scroll-snap-align: start; }

    @media (width >= 37.5rem) {
        .gz-product-rail { grid-auto-columns: 42%; }
    }

    @media (width >= 56.25rem) {
        .gz-product-rail { grid-auto-columns: 30%; }
    }

    @media (width >= 75rem) {
        .gz-product-rail {
            /* Four visible and a bit of the fifth, four per row as on the client's previous shop. */
            grid-auto-columns: 23%;
            margin-inline: 0;
            padding-inline: 0;
            scroll-padding-inline: 0;
        }
    }

    /* In the category listing the grid stands next to the sidebar, so it has one column fewer. */
    @media (width >= 75rem) {
        .product-grid--listing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    /* ── Product tile — no frame and no shadow ── */
    /* The base's card is a grid with a gap and dims its photo under the pointer; Godzone's is a block. */
    .product-card { display: block; min-inline-size: 0; }
    .product-card__media {
        opacity: 1;
        position: relative;
        aspect-ratio: 4/5;
        overflow: hidden;
        /* A cut-out book cover stands on no surface (the prototype's CF-033); the card carries no item kind, so every
           tile is on white — a photograph covers the tile, only a cut-out shows it. */
        background: var(--color-paper);
        border-radius: var(--radius-media);
    }
    .product-card__media img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        transition: transform var(--gz-dur-2) var(--ease-standard);
    }
    .product-card:hover .product-card__media img { transform: scale(1.02); }

    /* Tighter leading. */
    .product-card__body { padding-block-start: var(--space-3); display: grid; gap: var(--space-1); }

    /* Tighter still on a phone. */
    @media (width < 37.5rem) {
        .product-card__body { padding-block-start: var(--space-2); }
    }

    /* The card's heading holds the link and has no look of its own: the link carries the name's type. */
    .product-card__title { margin: 0; font: inherit; letter-spacing: inherit; text-wrap: inherit; }

    /* Two lines tall, so the prices in a row line up. */
    .product-card__link {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding-block-start: 0.16em;
        min-block-size: 2.54em;
        font-size: var(--text-sm);
        font-weight: 500;
        line-height: 1.35;
        color: var(--color-ink);
        text-decoration: none;
    }

    @media (width >= 56.25rem) {
        .product-card__link { font-size: var(--text-md); }
    }

    /* The whole tile is one target — the link carries the name, the overlay extends the hit area to the photo. */
    .product-card__link::after { content: ""; position: absolute; inset: 0; }
    .product-card:hover .product-card__link { text-decoration: underline; text-underline-offset: 3px; }
    .product-card:focus-within {
        outline: var(--gz-border-2) solid var(--color-focus);
        outline-offset: 4px;
        border-radius: var(--gz-radius-1);
    }
    .product-card:focus-within a:focus-visible { outline: none; }

    @media (prefers-reduced-motion: reduce) {
        .product-card:hover .product-card__media img { transform: none; }
    }

    /* ══ SUPPORT ══ */
    .gz-home-support {
        display: grid;
        gap: var(--space-4);
        align-items: center;
        padding-block: var(--space-7);
        border-block-start: var(--border-width) solid var(--color-line);
    }

    @media (width >= 56.25rem) {
        .gz-home-support { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); }
    }
    .gz-home-support__mark {
        display: block;
        block-size: 56px;
        inline-size: auto;
        max-inline-size: none;
    }

    @media (width >= 56.25rem) {
        .gz-home-support__mark { block-size: 72px; }
    }
    .gz-home-support__text { max-inline-size: 40rem; }
    .gz-home-support__text .gz-text { margin-block-end: 0; }
    .gz-home-support__heading { margin-block-end: var(--space-2); }

    /* An outlined pill that fills with ink under the pointer. */
    .gz-home-support__action {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--color-ink);
        font-size: var(--text-sm);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        min-block-size: 44px;
        padding: var(--space-2) var(--gz-space-5);
        border: var(--border-width) solid var(--color-ink);
        border-radius: var(--radius-pill);
        transition: background-color var(--duration-quick) var(--gz-ease-out), color var(--duration-quick) var(--gz-ease-out);
    }
    .gz-home-support__action .icon { transition: transform var(--gz-dur-2) var(--gz-ease-out); }
    /* `a.` outweighs the global `a:not(.gz-button):hover` (0,2,1), which would paint the label red on the ink. */
    a.gz-home-support__action:is(:hover, :focus-visible, :active) {
        background: var(--gz-surface-inverse);
        color: var(--gz-fg-on-inverse);
        text-decoration: none;
    }
    a.gz-home-support__action:is(:hover, :focus-visible) .icon { transform: translateX(var(--space-1)); }

    @media (width >= 56.25rem) {
        .gz-home-support__action { justify-self: end; }
    }

    /* ══ TRUST STRIP ══ */
    /* The base's strip is ruled and its list 2 / 4 columns; Godzone's is a paper band of three. */
    .assurances { background: var(--color-paper); border-block: 0; padding-block: var(--space-7); }

    @media (width >= 56.25rem) {
        .assurances { padding-block: var(--space-8); }
    }
    /* The neutralizer returns a list's padding to the browser's, over `.l-container`'s gutter. */
    .assurances__list { margin-block: 0; padding: 0 var(--gutter); list-style: none; gap: var(--space-5); grid-template-columns: none; }

    @media (width >= 56.25rem) {
        .assurances__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
    }
    .assurances__item { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); }
    .gz-trust__icon {
        display: grid;
        place-items: center;
        inline-size: 44px;
        block-size: 44px;
        border: var(--border-width) solid var(--color-line-strong);
        border-radius: var(--radius-pill);
        color: var(--color-ink);
    }
    .gz-trust__label {
        margin: 0 0 var(--space-1);
        font-size: var(--text-md);
        font-weight: 600;
        line-height: var(--leading-tight);
    }
    .gz-trust__text {
        margin: 0;
        font-size: var(--text-sm);
        line-height: var(--leading-body);
        color: var(--color-ink-muted);
    }

    /* The strip's links have no colour of their own: the global `a` rule gives the red hover. */
    /* ══ CATEGORY LISTING ══ */
    .l-plp { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
    .l-plp__filters, .l-plp__results { grid-column: auto; } /* the theme's grid, not the base's spans */
    .l-plp__filters { position: static; }

    @media (width >= 75rem) {
        .l-plp { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
    }
    .page-head {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        flex-wrap: wrap;
        padding-block: 0;
        margin-block-end: var(--space-5);
    }

    /* The filters scroll with the listing; the sidebar shows from 75rem. */
    .gz-sidebar { display: none; }

    @media (width >= 75rem) {
        .gz-sidebar { display: block; }
    }
    .gz-sidebar__group + .gz-sidebar__group { margin-block-start: var(--space-6); }
    .gz-sidebar h2 {
        font-size: var(--gz-text-2xs);
        text-transform: uppercase;
        letter-spacing: var(--gz-track-caps);
        color: var(--color-ink-muted);
        margin-block-end: var(--space-3);
    }

    /* A facet the shop shows collapsed: its heading is the toggle, the chevron turns when it is open. */
    .gz-sidebar__group--collapsible > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        min-block-size: 44px;
        list-style: none;
        cursor: pointer;
    }
    .gz-sidebar__group--collapsible > summary::-webkit-details-marker { display: none; }
    .gz-sidebar__group--collapsible > summary > :is(h2, h3) { margin-block-end: 0; }
    .gz-sidebar__group--collapsible > summary .icon { transition: transform var(--duration-quick) var(--gz-ease-out); }
    .gz-sidebar__group--collapsible[open] > summary .icon { transform: rotate(180deg); }

    /* Links, not buttons. */
    .gz-sidebar__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0;
    }
    /* Eight options, the rest behind "Show more" — no scroll box of its own. */
    .gz-sidebar__more summary {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-block-size: 44px;
        list-style: none;
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--color-ink);
        cursor: pointer;
    }
    .gz-sidebar__more summary::-webkit-details-marker { display: none; }
    .gz-sidebar__more summary:hover { text-decoration: underline; text-underline-offset: 3px; }
    .gz-sidebar__more .icon { transition: transform var(--duration-quick) var(--gz-ease-out); }
    .gz-sidebar__more[open] > summary .icon { transform: rotate(180deg); }
    .gz-sidebar__more[open] > summary { display: none; }
    .gz-sidebar__list a {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        /* 44 px rows; the marker sits first, the count is pushed to the right edge. */
        min-block-size: 44px;
        padding-block: var(--space-1);
        padding-inline: var(--space-2);
        margin-inline: calc(var(--space-2) * -1);
        border-radius: var(--gz-radius-1);
        color: var(--color-ink);
        text-decoration: none;
        font-size: var(--text-sm);
    }
    .gz-sidebar__list a::before {
        content: "";
        flex: none;
        inline-size: 3px;
        block-size: 1.2em;
        border-radius: var(--gz-radius-1);
        background: transparent;
        transition: background-color var(--duration-quick) var(--ease-standard);
    }

    /* Surface and underline on hover: „this row“ and „this is a link“. */
    .gz-sidebar__list a:hover {
        background: var(--color-sunken);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .gz-sidebar__list a[aria-current="page"] { font-weight: 700; }
    .gz-sidebar__list a[aria-current="page"]::before { background: var(--color-ink); }

    /* The count at the edge in every list. */
    .gz-sidebar__list a span {
        margin-inline-start: auto;
        color: var(--color-ink-muted);
        font-variant-numeric: tabular-nums;
    }

    /* A single choice out of a set — size, sorting. */
    .gz-sidebar__list--choice a::before {
        inline-size: 14px;
        block-size: 14px;
        border: var(--border-width) solid var(--color-line-strong);
        border-radius: var(--radius-pill);
        background: var(--color-paper);
        transition: border-color var(--duration-quick) var(--ease-standard),
            background-color var(--duration-quick) var(--ease-standard);
    }
    .gz-sidebar__list--choice a:hover::before { border-color: var(--color-ink); }
    .gz-sidebar__list--choice a[aria-current="page"]::before {
        border-color: var(--color-ink);
        /* A filled marker with a surface-coloured ring — the radio idiom without an `<input>`. */
        background: var(--color-ink);
        box-shadow: inset 0 0 0 3px var(--color-paper);
    }

    /* Bar above the grid: it wraps, as its content needs 342 px of the 288 px a 320 px screen leaves. */
    .listing-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
        justify-content: space-between;
        margin-block-end: var(--space-5);
        padding-block-end: var(--space-4);
        border-block-end: var(--border-width) solid var(--color-line);
    }
    .listing-toolbar > form { margin-inline-start: auto; }

    /* `background-color`, not `background`: the shorthand would wipe the picker's arrow. */
    .listing-toolbar select {
        max-inline-size: 100%;
        min-inline-size: 0;
        min-block-size: 44px;
        font: inherit;
        font-size: var(--text-sm);
        color: var(--color-ink);
        background-color: var(--color-paper);
        border: var(--gz-border-2) solid var(--color-line-strong);
        border-radius: var(--radius-control);
        /* Room on the right for the picker's arrow. */
        padding-inline: var(--space-3) var(--space-6);
    }

    @media (width >= 75rem) {
        .listing-toolbar__filter-toggle { display: none; }
    }

    /* The filter panel is the same drawer from the bottom, a popover — a <dialog> would need a script. */
    .gz-filters-panel .gz-drawer__body { display: grid; gap: var(--space-5); }

    /* ══ PRODUCT DETAIL ══ */
    .l-pdp { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
    .l-pdp__gallery, .l-pdp__buybox { grid-column: auto; grid-row: auto; } /* the theme's grid, not the base's spans */
    .l-pdp__buybox { position: static; }

    @media (width >= 56.25rem) {
        .l-pdp {
            grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
            gap: var(--space-7);
            align-items: start;
        }
    }

    /* ── Gallery ──
       One photo at a time at every width: a `scroll-snap` rail the visitor swipes or scrolls. On a desktop the arrows
       over the photo's edges, the position in its corner and the thumbnails beside it; on a phone the bars on the photo.
       The platform's `gallery` controller moves the rail and marks where it is; without it the rail still scrolls and a
       thumbnail is a link to its photo. */
    .gz-gallery {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .gz-gallery::-webkit-scrollbar { display: none; }
    .gz-gallery__item {
        position: relative;
        aspect-ratio: 4/5;
        background: var(--color-sunken);
        overflow: hidden;
        scroll-snap-align: start;
    }
    .gz-gallery__item img { inline-size: 100%; block-size: 100%; object-fit: cover; }

    /* A book cover on the page: whole, on paper. */
    .gz-gallery--book .gz-gallery__item { background: var(--color-paper); }
    .gz-gallery--book .gz-gallery__item img { object-fit: contain; }

    /* A single photo takes its height from its ratio, capped: neither cropped nor letterboxed. */
    .gz-gallery--single .gz-gallery__item { aspect-ratio: auto; }
    .gz-gallery--single img { block-size: auto; max-block-size: 80vh; object-fit: contain; }

    /* Below 900 px the photo runs the full window width: with a full-width slide there is no gutter to keep. The frame
       bleeds, not the rail, so the rail, the badge and the bars share one box. */
    @media (width < 56.25rem) {
        .gz-gallery-frame { margin-inline: calc(var(--gutter) * -1); }
    }

    .gz-gallery-frame { position: relative; }

    /* The arrows: over the photo's edges on a desktop, shown while the gallery is hovered or holds the focus; faded at
       the first and the last photo. The controller shows them; without it they stay hidden. */
    .gz-gallery__arrow {
        position: absolute;
        inset-block-start: 50%;
        z-index: 1;
        display: grid;
        place-items: center;
        inline-size: 44px;
        block-size: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--color-paper);
        color: var(--color-ink);
        box-shadow: var(--gz-shadow-1);
        cursor: pointer;
        opacity: 0;
        translate: 0 -50%;
        transition: opacity var(--duration-quick) var(--ease-standard);
    }
    .gz-gallery__arrow--previous { inset-inline-start: var(--space-4); }
    .gz-gallery__arrow--next { inset-inline-end: var(--space-4); }
    .gz-gallery-frame:hover .gz-gallery__arrow,
    .gz-gallery-frame:focus-within .gz-gallery__arrow { opacity: 1; }
    .gz-gallery-frame:hover .gz-gallery__arrow[aria-disabled="true"],
    .gz-gallery-frame:focus-within .gz-gallery__arrow[aria-disabled="true"] { opacity: 0.35; cursor: default; }
    /* a wide touch screen has no hover to reveal them: always shown there */
    @media (hover: none) {
        .gz-gallery__arrow { opacity: 1; }
        .gz-gallery__arrow[aria-disabled="true"] { opacity: 0.35; }
    }

    /* The position, "2 / 5", in the photo's corner on a desktop. */
    .gz-gallery__counter {
        position: absolute;
        inset-block-end: var(--space-4);
        inset-inline-end: var(--space-4);
        z-index: 1;
        margin: 0;
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-pill);
        background: var(--gz-surface-over-image-scrim);
        color: var(--gz-fg-over-image);
        font-size: var(--text-xs);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
    }

    @media (width < 56.25rem) {
        .gz-gallery__arrow, .gz-gallery__counter { display: none; }
    }

    /* The hero's swipe bars on the photo, dark in both schemes; a phone's only, the desktop has the thumbnails. */
    .gz-gallery__dots {
        position: absolute;
        inset-inline: 0;
        inset-block-end: var(--space-3);
        display: flex;
        justify-content: center;
        gap: var(--space-1);
        pointer-events: none;
    }
    .gz-gallery__dot {
        inline-size: 24px;
        block-size: 3px;
        border-radius: var(--radius-pill);
        background: var(--gz-surface-over-image-muted);
        transition: background-color var(--duration-quick) var(--ease-standard),
            inline-size var(--duration-quick) var(--ease-standard);
    }
    .gz-gallery__dot--active { inline-size: 40px; background: var(--gz-surface-over-image); }

    /* The thumbnails, a desktop's only: a column beside the photo, the current one in full and outlined, the others
       dimmed. The photo is as tall as the window under the header allows, so the whole gallery — the photo, its arrows,
       its position and the thumbnails — fits in one view. It scrolls with the page: the client does not want one part
       of the page to stand while the other scrolls (CF-040). */
    .gz-gallery__thumbs { display: none; }

    @media (width >= 56.25rem) {
        .gz-gallery__dots { display: none; }
        .l-pdp__gallery:has(> .gz-gallery__thumbs) {
            display: grid;
            grid-template-columns: 76px auto;
            justify-content: start;
            gap: var(--space-3);
        }
        .l-pdp__gallery:has(> .gz-gallery__thumbs) .gz-gallery-frame {
            grid-column: 2;
            grid-row: 1;
            inline-size: min(100%, max(20rem, (100svh - var(--gz-header-height) - var(--space-5) * 2) * 4 / 5));
        }
        .gz-gallery__thumbs {
            grid-column: 1;
            grid-row: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            /* as tall as the photo, never taller: the row takes its height from the photo alone */
            block-size: 0;
            min-block-size: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: none;
        }
        .gz-gallery__thumbs::-webkit-scrollbar { display: none; }
        .gz-gallery__thumbs li { flex: none; }
        .gz-gallery__thumb {
            display: block;
            aspect-ratio: 4/5;
            border: var(--gz-border-2) solid transparent;
            background: var(--color-sunken);
            opacity: 0.55;
            overflow: hidden;
            transition: opacity var(--duration-quick) var(--ease-standard),
                border-color var(--duration-quick) var(--ease-standard);
        }
        .gz-gallery__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
        .gz-gallery__thumb:hover { opacity: 1; }
        /* the ring inside the thumbnail: the strip is a scroll container and would clip one drawn outside */
        .gz-gallery__thumb:focus-visible { opacity: 1; outline-offset: -2px; }
        .gz-gallery__thumb[aria-current="true"] { border-color: var(--color-ink); opacity: 1; }
        .gz-gallery__thumbs--book .gz-gallery__thumb { background: var(--color-paper); }
        .gz-gallery__thumbs--book .gz-gallery__thumb img { object-fit: contain; }
    }

    @media (prefers-reduced-motion: reduce) {
        .gz-gallery__dot, .gz-gallery__arrow, .gz-gallery__thumb { transition: none; }
    }

    /* ── Information column ── */
    .gz-detail__name {
        font-size: var(--text-2xl);
        font-weight: 700;
        letter-spacing: var(--gz-track-heading);
        line-height: 1.15;
        margin-block-end: var(--space-4);
    }

    /* The description gets its own line width and paragraph spacing. */
    .gz-description {
        margin-block-start: var(--space-6);
        padding-block-start: var(--space-5);
        border-block-start: var(--border-width) solid var(--color-line);
    }
    .gz-description h2 {
        font-size: var(--gz-text-2xs);
        text-transform: uppercase;
        letter-spacing: var(--gz-track-caps);
        color: var(--color-ink-muted);
        margin-block-end: var(--space-3);
    }
    .gz-description p { font-size: var(--text-sm); line-height: 1.7; }
    /* The short description and the description stand one after the other under the one heading. */
    .gz-description .prose + .prose { margin-block-start: var(--space-5); }
    /* A section heading drawn as a fieldset's legend (Erebor's checkout groups its fields) keeps the heading's box. */
    legend.gz-display { padding-inline: 0; }

    /* ── Sticky bar ── */
    .gz-sticky-bar {
        position: sticky;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: var(--z-sticky);
        background: var(--color-paper);
        border-block-start: var(--border-width) solid var(--color-line);
        box-shadow: var(--gz-shadow-1);
        /* Tighter at 320 px, or the amount truncates. */
        padding: var(--space-3);
        /* `visibility`, not `display`: the scroll-driven reveal below animates it. */
        display: flex;
        visibility: hidden;
        align-items: center;
        gap: var(--space-2);
    }

    @media (width >= 37.5rem) {
        .gz-sticky-bar { padding-inline: var(--gutter); gap: var(--space-4); }
    }

    /* The button may shrink, the amount may not. */
    .gz-sticky-bar .gz-button { margin-inline-start: auto; flex: 0 1 auto; min-inline-size: 0; }

    /* The bar shows once the action it stands in for has left the screen — never two brand-red surfaces at once. With no
       theme script, a scroll-driven animation does it: the action names a view timeline the page shares — the purchase
       box on the detail, the checkout form in the cart, the summary in the checkout — and the bar is visible only
       outside the action's pass through the viewport. A browser without scroll-driven animations keeps the bar hidden. */
    @supports (animation-timeline: view()) and (timeline-scope: none) {
        body { timeline-scope: --gz-action; }
        [data-region="pdp.purchase"], [data-form="checkout-start"], [data-region="checkout.summary"] { view-timeline: --gz-action block; }
        .gz-sticky-bar { animation: gz-sticky-reveal linear both; animation-timeline: --gz-action; animation-range: cover; }
    }
    @keyframes gz-sticky-reveal {
        0%, 100% { visibility: visible; }
        0.01%, 99.99% { visibility: hidden; }
    }

    /* One line. */
    .gz-sticky-bar__name {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* The bar in the chain: the product-name rule `.theme-godzone .gz-name__head` (0,2,0) comes later. `nowrap` on the
       parts too. */
    .gz-sticky-bar .gz-sticky-bar__name .gz-name__head, .gz-sticky-bar .gz-sticky-bar__name .gz-name__sub {
        display: inline;
        white-space: nowrap;
    }
    .gz-sticky-bar__name .gz-name__sub::before { content: " · "; }

    /* Shorter below 600 px; `aria-label` keeps the whole name. */
    .gz-sticky-bar__cta-short { display: inline; }
    .gz-sticky-bar__cta-full { display: none; }

    @media (width >= 37.5rem) {
        .gz-sticky-bar__cta-short { display: none; }
        .gz-sticky-bar__cta-full { display: inline; }
    }
    .gz-sticky-bar__label {
        min-inline-size: 0;
        font-size: var(--text-sm);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── Detail: option groups, add-ons, line info ── */
    .option-group { display: block; border: 0; padding: 0; margin: 0 0 var(--space-4); }
    .option-group__legend { padding: 0; margin-block-end: var(--space-2); font-size: var(--text-md); }
    /* the hint under the options is the smaller line, the legend above them the larger */
    .option-group .gz-availability--pick { font-size: var(--gz-text-2xs); }
    .gz-detail__addons { margin-block-start: var(--space-5); }
    .gz-line-info {
        display: flex;
        gap: var(--space-3);
        align-items: flex-start;
        font-size: var(--text-sm);
        color: var(--color-ink-muted);
        margin: 0;
    }
    /* The lines under the button, each with its icon (CF-087). */
    .gz-line-info--pair { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
    .gz-line-info--pair li { display: flex; gap: var(--space-3); align-items: center; }
    .gz-line-info .icon { flex: none; color: var(--color-ink); }

    /* The link inherits from the global `a` rule (colour, underline, hover) — no colour of its own. */
    /* An active filter: text and cross in an outline, not a red area. */
    .gz-active-filter {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-block-size: 36px;
        padding: 0 var(--space-3);
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--color-ink);
        text-decoration: none;
        border: var(--gz-border-2) solid var(--color-line-strong);
        border-radius: var(--radius-pill);
    }
    .gz-active-filter:hover { border-color: var(--color-ink); background: var(--color-sunken); }

    /* ── Two rails, one heading ── */
    .gz-railtabs {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-3);
        min-inline-size: 0;
    }

    /* The dispatch time stands right under the availability line — one step, not a section break. */

    /* The primary takes what is left; the asks stay in the row. */
    .gz-buy { display: flex; align-items: stretch; gap: var(--space-2); }
    .gz-buy__main { flex: 1 1 auto; }

    /* ── Newsletter band on the home page ──
       The support panel's place and rhythm, new content. */
    .gz-home-newsletter {
        background: var(--color-sunken);
        /* A hairline where the page ends and the cream band begins, through the semantic surface token. */
        border-block-start: var(--border-width) solid var(--gz-surface-warm-3);
    }
    .gz-home-newsletter__wrap { display: grid; gap: var(--space-5); padding-block: var(--space-7); }

    @media (width >= 56.25rem) {
        .gz-home-newsletter__wrap {
            /* `start`, not `center`, which drifts the columns 27 px apart; the text column is capped. */
            grid-template-columns: minmax(0, 34rem) minmax(0, 24rem);
            justify-content: space-between;
            align-items: start;
            gap: var(--space-8);
        }
    }
    .gz-home-newsletter__text .gz-display { margin-block-end: var(--space-3); }
    .gz-home-newsletter__text .gz-text {
        margin-block-end: 0;
        /* The sentence reads as a subtitle of the heading, not as body copy of the page. */
        max-inline-size: 38ch;
        color: var(--color-ink-muted);
        /* Two lines of even length instead of a long one and an orphan (the last two words of the sentence alone). */
        text-wrap: balance;
    }
    .gz-home-newsletter__form { display: grid; gap: var(--space-4); }

    .gz-home-newsletter__form .gz-button { min-block-size: 48px; }

    /* The client's line on an entry tile, in the meta voice. */
    .gz-entry__text {
        display: block;
        margin-block-start: var(--space-1);
        font-size: var(--text-sm);
        font-weight: 400;
        letter-spacing: normal;
        text-transform: none;
        color: var(--color-ink-muted);
    }

    /* ── The support line under the description ──
       One quiet muted line, as the client asked. */
    .gz-mission {
        margin-block-start: var(--space-5);
        padding-block-start: var(--space-4);
        border-block-start: var(--border-width) solid var(--color-line);
        max-inline-size: 60ch;
        font-size: var(--text-sm);
        color: var(--color-ink-muted);
        text-wrap: pretty;
    }

    /* ── Cart line ── */
    .gz-line {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: var(--space-4);
        padding-block: var(--space-4);
        border-block-end: var(--border-width) solid var(--color-line);
    }

    @media (width >= 56.25rem) {
        .gz-line { grid-template-columns: 112px minmax(0, 1fr); }
    }
    .gz-line__photo {
        aspect-ratio: 4/5;
        background: var(--color-sunken);
        border-radius: var(--gz-radius-1);
        overflow: hidden;
    }
    .gz-line__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
    /* No photo yet (the cart line carries none, #471): the monogram, faint, as the empty states show it, so the box
       reads as the shop's own and not as a picture that failed to load. A photo, once the line has one, replaces it. */
    .gz-line__photo:empty { display: grid; place-items: center; }
    .gz-line__photo:empty::after {
        content: "";
        inline-size: 38%;
        aspect-ratio: 56.41 / 58.72;
        background: url("images/godzone-monogram-RP9gvKY.svg") center/contain no-repeat;
        opacity: 0.12;
        filter: grayscale(1);
    }
    .gz-line__body { display: grid; gap: var(--space-2); align-content: start; }
    .gz-line__name {
        /* the cart line's heading (CART-65) keeps the line's type, not the display face of a heading */
        margin: 0;
        font-family: inherit;
        font-stretch: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        text-wrap: inherit;
        font-weight: 600;
        font-size: var(--text-sm);
        color: var(--color-ink);
        text-decoration: none;
    }

    /* Only a link underlines; the class also sits on the record's <strong>. */
    .gz-line__name:is(a):hover, .gz-line__name:is(a):focus-visible {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* Name and amount on one line: „what · how much“ is one statement. */
    .gz-line__top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-4);
    }
    .gz-line__top .gz-line__amount { font-size: var(--text-md); }
    .gz-line__bottom {
        display: flex;
        align-items: center;
        gap: var(--space-2) var(--space-4);
        flex-wrap: wrap;
        margin-block-start: var(--space-1);
    }

    /* The quantity as a pill: the base's stepper (`_quantity.html.twig`) in one hairline, two 44 px targets; its label
       is for a screen reader alone, since the design shows none. */
    .gz-line__quantity { display: flex; align-items: center; gap: var(--space-2); }
    .gz-line__quantity .quantity__label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .gz-line__quantity .quantity__control {
        grid-template-columns: 44px minmax(2.5ch, 4ch) auto 44px;
        border-width: var(--border-width);
        border-radius: var(--radius-pill);
    }
    .gz-line__quantity .quantity__step { min-inline-size: 44px; min-block-size: 44px; border-radius: var(--radius-pill); cursor: pointer; }
    .gz-line__quantity .quantity__input { block-size: 44px; text-align: center; font-weight: 600; }
    /* The design's "− count +": the unit stays out of the pill (Godzone sells pieces; the unit is in the step buttons'
       names and the field's hidden for a screen reader anyway), so on a phone the pill and "Odstrániť" share a row. */
    .gz-line__quantity .quantity__unit { display: none; }
    .gz-line__quantity .quantity__control { grid-template-columns: 44px minmax(2.5ch, 4ch) 44px; }

    /* ── Summary ── */
    .gz-summary { background: var(--color-sunken); padding: var(--gz-space-5); border-radius: var(--radius-control); }
    .gz-summary h2 {
        font-size: var(--gz-text-2xs);
        text-transform: uppercase;
        letter-spacing: var(--gz-track-caps);
        color: var(--color-ink-muted);
        margin-block-end: var(--space-4);
    }

    /* A component, not a descendant. */
    .gz-summary__breakdown {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--space-2) var(--space-4);
        margin: 0 0 var(--space-4);
    }
    .gz-summary__breakdown dt { color: var(--color-ink-muted); font-size: var(--text-sm); }
    .gz-summary__breakdown dd {
        margin: 0;
        text-align: end;
        font-variant-numeric: tabular-nums;
        font-size: var(--text-sm);
    }

    /* The row carries the total's emphasis; the dd needs no class. */
    .gz-summary__breakdown .gz-total, .gz-summary__breakdown .gz-total + dd {
        font-size: var(--text-lg);
        font-weight: 700;
    }
    .gz-two-column, .l-cart, .l-checkout, .l-confirmation { display: grid; gap: var(--space-6); }
    .l-cart__lines, .l-cart__summary, .l-checkout__form, .l-checkout__summary, .l-confirmation__main, .l-confirmation__aside { grid-column: auto; } /* the theme's grid, not the base's spans */
    .l-cart__summary, .l-checkout__summary { position: static; }
    /* The checkout's summary stays in view under the sticky header while the shopper fills the form, down to the end
       of the form's column; taller than the window, it scrolls in itself. The cart's scrolls with the cart. */
    @media (width >= 56.25rem) {
        .l-checkout__summary {
            position: sticky;
            inset-block-start: calc(var(--gz-header-height) + var(--space-5));
            max-block-size: calc(100dvh - var(--gz-header-height) - 2 * var(--space-5));
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin;
        }
    }
    .l-checkout__summary { display: block; }

    @media (width >= 56.25rem) {
        .gz-two-column, .l-cart, .l-checkout, .l-confirmation {
            grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
            gap: var(--space-7);
            align-items: start;
        }

        /* The summary scrolls with the cart: no sticky column. */
    }

    /* ── Option ── a shipping or payment choice. */
    .gz-option[hidden] { display: none; }
    .gz-option, .choice {
        display: flex;
        gap: var(--space-3);
        align-items: flex-start;
        padding: var(--space-4);
        margin-block-end: var(--space-3);
        border: var(--gz-border-2) solid var(--color-line-strong);
        border-radius: var(--radius-control);
        cursor: pointer;
    }
    :is(.gz-option, .choice):has(input:checked) { border-color: var(--color-ink); background: var(--color-sunken); }
    :is(.gz-option, .choice) input {
        margin-block-start: 4px;
        inline-size: 20px;
        block-size: 20px;
        flex: none;
        /* The native control's blue would be the checkout's one foreign colour. */
        accent-color: var(--color-ink);
    }
    .gz-option__body { min-inline-size: 0; }
    .gz-option__name { font-weight: 600; }
    /* The payment method's marks, pushed to the end of the row before the fee. */
    .gz-option__logos { display: flex; gap: var(--space-1); margin-inline-start: auto; flex: none; }
    .gz-option__logos + .gz-option__price { margin-inline-start: 0; }
    .gz-option__logos svg { display: block; }
    .gz-option__price {
        margin-inline-start: auto;
        font-weight: 700;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .gz-line__variant { margin: 0; font-size: var(--text-xs); }
    .gz-line__amount { font-variant-numeric: tabular-nums; white-space: nowrap; }

    /* Removing is quieter than buying: muted, red on hover and focus. */
    .gz-line__remove {
        padding-inline: 0;
        min-block-size: 44px; /* the 44 px target */
        font-size: var(--text-sm);
        color: var(--color-ink-muted);
    }
    .gz-line__remove:hover, .gz-line__remove:focus-visible { color: var(--color-danger); }
    .gz-notice--tight { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

    /* The summary's head: its title and, beside it, the way back to the cart. */
    .gz-summary__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
    .gz-summary__head h2 { margin: 0; }
    a.gz-summary__edit { flex: none; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); text-underline-offset: 3px; }
    a.gz-summary__edit:hover { color: var(--color-sale); }
    /* The lines one under another, a hairline between; a line's kind or author quieter than its name. */
    .gz-summary__line + .gz-summary__line { padding-block-start: var(--space-3); border-block-start: var(--border-width) solid var(--color-line); }
    .gz-summary__lines > .gz-summary__line { align-items: start; }
    .theme-godzone .gz-summary__line-name .gz-name__sub { font-size: var(--text-xs); color: var(--color-ink-muted); }
    .gz-summary__line-amount { font-weight: 700; white-space: nowrap; }
    /* The bold row speaks in ink, its label as its figure. */
    .gz-summary__breakdown dt.gz-total { color: var(--color-ink); }
    /* The facts under the summary: quiet, close to it. */
    .l-checkout__summary .gz-checkout-trust { margin-block-start: var(--space-4); padding-inline: var(--gz-space-5); }

    /* What is being bought, above the breakdown. */
    .gz-summary__lines {
        display: grid;
        gap: var(--space-3);
        margin: 0 0 var(--space-4);
        padding: 0 0 var(--space-4);
        list-style: none;
        border-block-end: var(--border-width) solid var(--color-line);
    }
    .gz-summary__line {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: var(--space-3);
        align-items: center;
        font-size: var(--text-sm);
    }
    .gz-summary__thumb {
        display: grid;
        place-items: center;
        aspect-ratio: 4/5;
        overflow: hidden;
        border-radius: var(--gz-radius-1);
        background: var(--color-paper);
        color: var(--color-ink-muted);
        font-weight: 700;
    }
    .gz-summary__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
    /* No photo yet (#471): the monogram, faint, as in the cart's line. */
    .gz-summary__thumb:empty::after {
        content: "";
        inline-size: 42%;
        aspect-ratio: 56.41 / 58.72;
        background: url("images/godzone-monogram-RP9gvKY.svg") center/contain no-repeat;
        opacity: 0.14;
        filter: grayscale(1);
    }
    .gz-summary__line-body { display: grid; gap: var(--space-1); min-inline-size: 0; }
    .gz-summary__line-body .gz-name__head, .gz-summary__line-body .gz-name__sub { display: block; }
    .gz-summary__line-body .gz-meta { font-size: var(--text-xs); }
    .gz-summary__line-name { font-weight: 600; overflow-wrap: anywhere; }
    .gz-summary__line-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

    /* Three quiet facts under the summary, each a link. */
    .gz-checkout-trust {
        display: grid;
        gap: var(--space-2);
        margin: var(--space-4) 0 0;
        padding: 0 var(--gz-space-5);
        list-style: none;
        font-size: var(--text-xs);
        color: var(--color-ink-muted);
    }
    .gz-checkout-trust li { display: flex; align-items: center; gap: var(--space-2); }
    .gz-checkout-trust .icon { flex: none; }

    /* No colour of its own: the global link rule paints it. */
    /* The summary's note. */
    .gz-summary__note { margin: var(--space-3) 0 0; text-align: center; font-size: var(--text-xs); }
    /* A primary button under a note stands apart from it: the cart's way to the checkout, the confirmation's online payment. */
    :is([data-form="checkout-start"], [data-pay-online]) { margin-block-start: var(--space-4); }
    /* The summary's figure first, its fine print small. The cart's subtotal is the figure the shopper checks, so it is
       set like a total; the notes on delivery, VAT and the total to come (the cart's and the checkout's) stand together
       under a hairline, in the small size, and the
       free-shipping band is an inset of its own on white, so the progress reads apart from the sums. */
    .gz-summary__breakdown { align-items: baseline; }
    [data-region="cart.summary"] .gz-summary__breakdown dt:first-of-type { color: var(--color-ink); font-weight: 600; }
    [data-region="cart.summary"] .gz-summary__breakdown [data-cart-subtotal] { font-size: var(--text-lg); font-weight: 700; }
    .gz-summary :is(.gz-summary__addon, [data-vat], [data-total-unavailable]) { margin-block: 0 var(--space-1); font-size: var(--text-xs); }
    .gz-summary :is(.gz-summary__addon, [data-vat], [data-total-unavailable]):not(:is(.gz-summary__addon, [data-vat], [data-total-unavailable]) + *) {
        padding-block-start: var(--space-3);
        border-block-start: var(--border-width) solid var(--color-line);
    }
    .gz-summary .shipping-progress {
        margin-block: var(--space-4);
        padding: var(--space-4);
        border-radius: var(--radius-control);
        background: var(--color-paper);
    }
    /* On a phone the band stands in the summary without a box of its own: the box's padding wrapped its sentence onto a
       second line and the two cost 54 px, which put the button on to the checkout under the fold at 390 × 844 with one item
       (851 px; the design's rule is the way forward above the fold, godzone-shop PT-136). */
    @media (width < 56.25rem) {
        .gz-summary .shipping-progress { padding: 0; background: none; }
    }

    /* A notice with content below it — its second shape. */
    .gz-notice--block { display: block; }
    .gz-notice--block > :last-child { margin-block-end: 0; }

    .gz-no-gap { margin: 0; }

    /* The results page's field. */
    .gz-search-form {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        margin-block-end: var(--space-6);
    }

    /* The page keeps the term here, with a submit button beside it; no cross, so less room on the right. */
    .gz-search-form .search-field__input { min-inline-size: 15rem; padding-inline-end: var(--space-4); }
    .gz-search-form__magnifier {
        position: absolute;
        inset-inline-start: var(--gz-space-5);
        block-size: 56px;
        display: grid;
        place-items: center;
        color: var(--color-ink-muted);
        pointer-events: none;
    }

    /* ── Free-shipping threshold ── */
    .shipping-progress {
        display: grid;
        gap: var(--space-2);
        margin-block: var(--space-4);
        font-size: var(--text-sm);
    }
    .shipping-progress__text {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
    }
    .shipping-progress__text .icon { flex: none; color: var(--color-success); }
    .shipping-progress__bar {
        block-size: 6px;
        overflow: hidden;
        border-radius: var(--radius-pill);
        background: var(--color-line);
        box-shadow: none;
    }
    .shipping-progress__fill {
        display: block;
        block-size: 100%;
        border-radius: inherit;
        background: var(--color-ink);
        transition: inline-size var(--duration-base) var(--ease-standard);
    }

    /* Cart base on the left, the threshold with the truck on the right — the two ends of the track. */
    .shipping-progress__scale {
        display: flex;
        justify-content: space-between;
        gap: var(--space-3);
        margin: 0;
        font-size: var(--gz-text-2xs);
        font-weight: 600;
        letter-spacing: var(--gz-track-caps);
        color: var(--color-ink-muted);
        font-variant-numeric: tabular-nums;
    }
    .shipping-progress__scale > span { display: inline-flex; align-items: center; gap: var(--space-1); }

    /* ── Delivery address ──
       ZIP and city side by side only from 900 px. */
    @media (width >= 56.25rem) {
        .gz-field-pair { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr; gap: var(--space-4); }
    }
    /* The second line, the region and the address's phone are out of sight while empty (the approved design asks for none
       of them). What travels is what is shown: a field the server marks empty stays hidden only while its input is empty
       and unfocused, so a saved entry's value the address book's controller writes, or the browser's autofill, shows it,
       and clearing it hides it again once the shopper leaves the field (review of !659, note 58277). */
    [data-quiet-field][data-quiet-empty]:has(input:placeholder-shown:not(:focus)) { display: none; }

    .gz-coupon { margin-block-start: var(--space-5); }

    /* The way back under the lines, a quiet link. */
    .gz-cart__back { margin: var(--space-6) 0 0; }

    /* A disclosure that looks like a control: an arrow and a hover underline. */
    .gz-coupon__toggle > summary {
        cursor: pointer;
        /* 44 px, the target minimum. */
        min-block-size: 44px;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-weight: 600;
        font-size: var(--text-sm);
        list-style: none; /* Safari draws its own triangle next to ours */
    }
    .gz-coupon__toggle > summary::-webkit-details-marker { display: none; }

    /* The arrow is the border: one element fewer, it rotates without JavaScript. */
    .gz-coupon__toggle > summary::after {
        content: "";
        inline-size: 7px;
        block-size: 7px;
        border-inline-end: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transition: transform var(--gz-dur-2) var(--ease-standard);
    }

    /* Keyboard gets the hover's affordance. */
    .gz-coupon__toggle > summary:hover, .gz-coupon__toggle > summary:focus-visible {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .gz-coupon__toggle[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
    .gz-coupon__form { display: grid; gap: var(--space-3); margin-block-start: var(--space-3); }

    @media (width >= 37.5rem) {
        .gz-coupon__form { grid-template-columns: 1fr auto; align-items: end; }
        .gz-coupon__form .gz-field { margin-block-end: 0; }
        .gz-coupon__form .gz-button { min-block-size: 48px; }
    }
    .gz-badge--coupon {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: var(--gz-surface-muted);
        /* White on the muted surface, 7,61 : 1. */
        color: var(--gz-fg-on-inverse);
        border: var(--border-width) solid var(--color-line-strong);
        border-radius: var(--radius-pill);
        font-size: var(--text-sm);
        font-weight: 600;
    }
    .gz-badge__remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* A real 44 × 44 px box, not an ::after. */
        inline-size: 44px;
        block-size: 44px;
        margin-block: -10px;
        margin-inline-end: -10px;
        position: relative;
        border: 0;
        background: none;
        color: inherit;
        cursor: pointer;
    }

    /* The discount is a negative movement in the total. */
    .gz-discount { color: var(--color-success); }

    /* ── Checkout as sections on one page ── */
    /* The bar's order button only while the summary section is open: it submits the form inside that section, whose
       required consents a closed section hides, so the browser could not point at an unticked one. */
    body:has(details#summary:not([open])) .gz-sticky-bar--order { display: none; }

    /* Two rows below 600 px. */
    @media (width < 37.5rem) {
        .gz-sticky-bar--order { flex-wrap: wrap; row-gap: var(--space-2); }
        .gz-sticky-bar--order .gz-sticky-bar__label {
            flex: 1 0 100%;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: var(--space-3);
        }
        .gz-sticky-bar--order .gz-sticky-bar__label br {
            display: none; /* caption and amount share the row; the break would stack them again */
        }
        .gz-sticky-bar--order .gz-button {
            flex: 1 0 100%;
            margin-inline-start: 0;
            padding-inline: var(--space-3); /* the same one-line fit as the button in the content */
        }
    }

    /* One line at 320 px for the statutory wording: the tighter padding only keeps it off the edge. */
    .gz-checkout .gz-button--full { padding-inline: var(--space-3); }

    /* A rule between sections, not a card. */
    .gz-step { border-block-start: var(--border-width) solid var(--color-line); }
    .gz-step:last-child { border-block-end: var(--border-width) solid var(--color-line); }
    .gz-step__head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: baseline;
        gap: var(--space-2) var(--space-3);
        /* The expander is a touch target — 44 px, the target minimum. */
        min-block-size: 44px;
        padding-block: var(--gz-space-5);
        cursor: pointer;
    }

    /* The native triangle is replaced by the step number; a second glyph would remain next to it. */
    .gz-step__head::marker, .gz-step__head::-webkit-details-marker { content: ""; display: none; }
    .gz-step__number {
        grid-row: span 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 28px;
        block-size: 28px;
        border-radius: var(--radius-pill);
        background: var(--gz-surface-muted);
        /* White on the muted surface, 7,61 : 1. */
        color: var(--gz-fg-on-inverse);
        font-size: var(--text-sm);
        font-weight: 700;
    }
    .gz-step__name { font-weight: 700; }

    /* The choice's summary in a collapsed section. */
    .gz-step__summary { grid-column: 2; color: var(--color-ink-muted); font-size: var(--text-sm); }
    .gz-step__body { padding-block-end: var(--space-6); }
    .gz-step[open] .gz-step__number { background: var(--color-primary); color: var(--color-on-primary); }

    /* An open section does not repeat its summary — the whole of it is below. */
    .gz-step[open] .gz-step__summary { display: none; }

    /* "Change" says the done head is clickable. */
    .gz-step__change {
        grid-column: 3;
        grid-row: span 2;
        align-self: center;
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        font-size: var(--gz-text-2xs);
        font-weight: 600;
        letter-spacing: var(--gz-track-caps);
        text-transform: uppercase;
        color: var(--color-ink-muted);
    }
    .gz-step__head:hover .gz-step__change { color: var(--color-ink); }
    .gz-step[open] .gz-step__change { display: none; }

    /* ── Two choices, the sign-in first (CF-093) ── */
    /* Two tiles one under the other at the head of the form: each one link, a round mark, its title with why under it,
       and an arrow. The sign-in's is filled red — the client's "dlaždica … vyplnená červenou" — its words white (4.56 : 1
       on the brand red), the guest's outlined. Neither gates the form (GZ-0071). */
    .gz-choice { display: grid; gap: var(--space-3); margin-block-end: var(--space-6); }
    a.gz-choice__tile {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
        border: var(--gz-border-2) solid var(--color-line-strong);
        border-radius: var(--radius-panel);
        background: var(--color-paper);
        color: var(--color-ink);
        text-decoration: none;
        transition: background-color var(--duration-quick) var(--ease-standard), border-color var(--duration-quick) var(--ease-standard);
    }
    a.gz-choice__tile:is(:hover, :focus-visible) { border-color: var(--color-ink); background: var(--color-sunken); color: var(--color-ink); }
    a.gz-choice__tile--primary { border-color: transparent; background: var(--color-primary); color: var(--color-on-primary); }
    a.gz-choice__tile--primary:is(:hover, :focus-visible) { border-color: transparent; background: var(--color-primary-hover); color: var(--color-on-primary); }
    .gz-choice__mark {
        display: grid;
        place-items: center;
        inline-size: 44px;
        block-size: 44px;
        border-radius: 50%;
        background: var(--color-sunken);
    }
    .gz-choice__tile--primary .gz-choice__mark { background: var(--color-paper); }
    .gz-choice__mark img { inline-size: 20px; block-size: auto; }
    .gz-choice__text { display: grid; gap: 2px; }
    .gz-choice__title { font-size: var(--text-md); font-weight: 700; line-height: var(--leading-tight); }
    .gz-choice__why { font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-muted); }
    .gz-choice__tile--primary .gz-choice__why { color: inherit; }
    .gz-choice__tile > .icon { transition: translate var(--duration-quick) var(--ease-standard); }
    a.gz-choice__tile:is(:hover, :focus-visible) > .icon { translate: var(--space-1) 0; }
    @media (prefers-reduced-motion: reduce) {
        .gz-choice__tile > .icon { transition: none; }
    }
    .gz-step__note {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 var(--space-2);
        margin: 0 0 var(--gz-space-5);
        font-size: var(--text-sm);
        color: var(--color-ink-muted);
    }

    /* "Sign in" is an offer on the side, not a second red. */
    .gz-step__note .gz-button--text {
        min-block-size: 0;
        padding: 0;
        font-size: inherit;
        color: var(--color-ink);
    }

    /* ── Stepper ── */
    .gz-steps { margin-block-end: var(--space-6); }
    .gz-steps__list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: var(--space-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .gz-steps__item { position: relative; min-inline-size: 0; }

    /* Centred between two circles, both 14 px in from their column edge. */
    .gz-steps__arrow {
        position: absolute;
        inset-block-start: calc(var(--space-2) + 14px);
        inset-inline-start: calc(-50% - var(--space-4) / 2 + 14px);
        display: grid;
        place-items: center;
        inline-size: 16px;
        block-size: 16px;
        translate: -50% -50%;
        color: var(--color-line-strong);
        pointer-events: none;
    }
    .gz-steps__item--done + .gz-steps__item .gz-steps__arrow { color: var(--color-ink); }
    /* A progress line instead of the arrows: from the circle before to this one, through the column gap, solid in ink
       once the step before it is done. */
    .gz-steps__arrow { display: none; }
    .gz-steps__item:not(:first-child)::before {
        content: "";
        position: absolute;
        inset-block-start: calc(var(--space-2) + 14px - 1px);
        inset-inline-start: calc(-100% - var(--space-4) + 28px + var(--space-2));
        inline-size: calc(100% + var(--space-4) - 28px - 2 * var(--space-2));
        block-size: 2px;
        border-radius: var(--radius-pill);
        background: var(--color-line);
    }
    .gz-steps__item--done + .gz-steps__item::before { background: var(--color-ink); }
    .gz-steps__step {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        /* A touch target here too — it is a link, not a caption. */
        min-block-size: 44px;
        padding-block: var(--space-2);
        color: var(--color-ink-muted);
        text-decoration: none;
    }
    .gz-steps__step:hover .gz-steps__label, .gz-steps__step:focus-visible .gz-steps__label {
        color: var(--color-ink);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .gz-steps__step[aria-current="step"] { color: var(--color-ink); }
    .gz-steps__step[aria-current="step"] .gz-steps__number {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-on-primary);
    }
    .gz-steps__step[aria-current="step"] .gz-steps__label { font-weight: 700; }
    .gz-steps__number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 28px;
        block-size: 28px;
        border: var(--border-width) solid var(--color-line-strong);
        border-radius: var(--radius-pill);
        background: var(--color-paper);
        color: var(--color-ink-muted);
        font-size: var(--text-sm);
        font-weight: 700;
    }
    .gz-steps__step--done .gz-steps__number {
        background: var(--gz-surface-inverse);
        border-color: var(--gz-surface-inverse);
        color: var(--gz-fg-on-inverse);
    }
    .gz-steps__label { font-size: var(--text-xs); font-weight: 600; }

    /* Headings inside a section are quieter than its header. */
    .gz-step__body .gz-display--section {
        font-size: var(--text-sm);
        letter-spacing: var(--gz-track-caps);
        color: var(--color-ink-muted);
    }

    /* Content pages — "About us" set from the client's copy: the home page's composition, one cream strip. */
    /* ══ CONTENT PAGES ══ Erebor's CMS page. */
    .cms-page__title { margin-block-end: 1.5rem; }
    .cms-page__title + .cms-section { margin-block-start: 0; }
    /* A section of the homepage that is one column is a full-width band: its blocks (Godzone's bands, each with its own
       wrap and rhythm) stand one under the other without the section's gap. On a system page the section and its column
       draw no box of their own, so the text sits in the notice as the notice's own lines. */
    .l-main > .cms-section--one { display: block; margin-block-start: 0; }
    .l-main > .cms-section--one > .cms-section__column > * + * { margin-block-start: 0; }
    .empty-state > .cms-section, .empty-state > .cms-section > .cms-section__column { display: contents; }
    /* CNT-73: a section or block the shop shows on some devices only stays hidden on the others. The foundation's rule
       (storefront-additions.css) sits in an earlier layer, which the `display` above would outrank, so it is said again
       here, after it. */
    @media (width < 48rem) { [data-devices]:not([data-devices~="mobile"]) { display: none; } }
    @media (48rem <= width < 64rem) { [data-devices]:not([data-devices~="tablet"]) { display: none; } }
    @media (width >= 64rem) { [data-devices]:not([data-devices~="desktop"]) { display: none; } }

    /* Account: one shell for seven screens; a record, not a sale — the only red pays a failed order. */
    /* ══ SHELL ══ */
    /* `minmax(0, 1fr)` and `min-width: 0`: the chip row would widen the phone column to ≈ 900 px. */
    .l-account { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

    @media (width >= 56.25rem) {
        .l-account { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
    }

    @media (width >= 75rem) {
        .l-account { grid-template-columns: 248px minmax(0, 1fr); }
    }

    /* The side column scrolls with the page. */
    .gz-account__side { min-inline-size: 0; }

    /* On a phone the greeting in the h1 says who is signed in. */
    .gz-account__identity { display: none; }

    @media (width >= 56.25rem) {
        .gz-account__identity {
            display: flex;
            gap: var(--space-3);
            align-items: center;
            padding-block-end: var(--gz-space-5);
            margin-block-end: var(--space-3);
            border-block-end: var(--border-width) solid var(--color-line);
        }
        .gz-account__identity > div { display: grid; min-inline-size: 0; }
        .gz-account__identity strong { font-size: var(--text-sm); }
        .gz-account__identity .gz-meta { font-size: var(--text-xs); overflow-wrap: anywhere; }
    }
    .gz-account__avatar {
        display: grid;
        place-items: center;
        flex: none;
        inline-size: 44px;
        block-size: 44px;
        border-radius: var(--radius-pill);
        background: var(--gz-surface-inverse);
        color: var(--gz-fg-on-inverse);
        font-weight: var(--font-weight-display);
        font-size: var(--text-lg);
    }

    /* Chips that bleed to the edges on a phone, so the row scrolls, not the page; a list from 900 px. */
    .account-nav {
        display: flex;
        gap: var(--space-2);
        list-style: none;
        border-block-start: 0;
        margin: 0 calc(-1 * var(--gutter));
        padding: 0 var(--gutter);
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--gutter);
    }
    .account-nav::-webkit-scrollbar { display: none; }
    .account-nav li { flex: none; scroll-snap-align: start; }

    @media (width >= 56.25rem) {
        .account-nav {
            display: grid;
            gap: var(--space-1);
            margin: 0;
            padding: 0;
            overflow: visible;
        }
    }

    /* One shape for the link and the sign-out button — the customer should not see two kinds of row. */
    .account-nav a, .account-nav button {
        display: inline-flex;
        align-items: center;
        min-block-size: 44px;
        padding: 0 var(--space-4);
        border: var(--border-width) solid var(--color-line-strong);
        border-radius: var(--radius-pill);
        background: var(--color-paper);
        color: var(--color-ink);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
    }
    .account-nav a:hover, .account-nav button:hover { background: var(--color-sunken); border-color: var(--color-ink); }
    .account-nav a[aria-current="page"] {
        background: var(--gz-surface-inverse);
        border-color: var(--gz-surface-inverse);
        color: var(--gz-fg-on-inverse);
    }

    @media (width >= 56.25rem) {
        .account-nav a, .account-nav button {
            display: flex;
            inline-size: 100%;
            padding: var(--space-3);
            border: 0;
            border-radius: var(--radius-control);
            background: none;
            text-align: start;
        }
        .account-nav a:hover, .account-nav button:hover { background: var(--color-sunken); }

        /* The open section. */
        .account-nav a[aria-current="page"] {
            background: var(--color-sunken);
            color: var(--color-ink);
            font-weight: 700;
            box-shadow: inset 3px 0 0 var(--color-ink);
        }
    }
    .account-nav__item--exit button { color: var(--color-ink-muted); }

    @media (width >= 56.25rem) {
        .account-nav__item--exit {
            margin-block-start: var(--space-3);
            padding-block-start: var(--space-3);
            border-block-start: var(--border-width) solid var(--color-line);
        }
    }
    .l-account__content { min-inline-size: 0; grid-column: auto; } /* the theme's grid, not the base's span */

    /* ── The account's own pages (overview, orders, an order, addresses) ── the approved design's `09/14` account. */
    .gz-account__head { display: grid; gap: var(--space-3); margin-block-end: var(--space-6); }
    .gz-account__head > h1 { margin: 0; }
    .gz-account__facts {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2) var(--space-3);
        margin: 0 0 var(--space-6);
        font-size: var(--text-sm);
        color: var(--color-ink-muted);
    }
    .gz-account__section { margin-block-start: var(--space-7); }
    .gz-account__cards { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }

    @media (width >= 37.5rem) {
        .gz-account__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (width >= 90rem) {
        .gz-account__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .gz-account__cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .gz-account__card {
        display: grid;
        align-content: start;
        gap: var(--space-2);
        min-inline-size: 0;
        padding: var(--gz-space-5);
        background: var(--color-sunken);
        border-radius: var(--radius-control);
    }
    .gz-account__card p, .gz-account__card address, .gz-account__card dl { margin: 0; }
    .gz-account__card address { font-style: normal; line-height: var(--leading-normal); }
    /* the way into the section sits at the card's foot, whatever the lines above it */
    .gz-account__card > .gz-link-more, .gz-account__card > .gz-account__card-action, .gz-account__card > .gz-account__card-actions {
        margin-block-start: auto;
        padding-block-start: var(--space-2);
    }
    .gz-account__card-label {
        margin: 0 0 var(--space-1);
        font-size: var(--gz-text-2xs);
        font-weight: 600;
        letter-spacing: var(--gz-track-caps);
        text-transform: uppercase;
        color: var(--color-ink-muted);
    }
    .gz-account__card-value { font-size: var(--text-xl); font-weight: 700; line-height: var(--leading-snug); overflow-wrap: anywhere; }
    .gz-account__card-facts { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-ink-muted); }
    .gz-account__card-facts div { display: flex; gap: var(--space-2); }
    .gz-account__card-facts dd { margin: 0; overflow-wrap: anywhere; }
    .gz-account__card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
    .gz-account__card .gz-button--text { color: var(--color-ink-muted); }
    .gz-account__card .gz-button--text:hover, .gz-account__card .gz-button--text:focus-visible { color: var(--color-ink); }
    .gz-account__statement { font-size: var(--text-sm); }
    .gz-account__statement > .disclosure__summary { font-size: var(--text-sm); font-weight: 600; }
    /* the consents given and an order's history: a quiet list, a line each */
    .gz-account__consents { display: grid; list-style: none; margin: 0; padding: 0; border-block-start: var(--border-width) solid var(--color-line); }
    .gz-account__consents li {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--space-1) var(--space-4);
        padding-block: var(--space-3);
        border-block-end: var(--border-width) solid var(--color-line);
        font-size: var(--text-sm);
    }
    /* A record, not a sale: the base forms' main button is dark in the account; paying an order keeps the red. */
    .gz-account .button--primary { background: var(--gz-surface-inverse); color: var(--gz-fg-on-inverse); }
    .gz-account .button--primary:hover { background: var(--gz-surface-muted); }
    .gz-account__empty { padding-block: var(--space-7); }

    /* The orders: a row per order, the whole row the link. */
    .gz-orders { list-style: none; margin: 0; padding: 0; border-block-start: var(--border-width) solid var(--color-line); }
    .gz-order {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2) var(--space-4);
        padding-block: var(--space-4);
        border-block-end: var(--border-width) solid var(--color-line);
        color: var(--color-ink);
        text-decoration: none;
    }
    .gz-order:hover .gz-order__body > strong, .gz-order:focus-visible .gz-order__body > strong { text-decoration: underline; text-underline-offset: 3px; }

    @media (width >= 37.5rem) {
        .gz-order { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--gz-space-5); }
    }
    .gz-order__body { display: grid; gap: var(--space-1); min-inline-size: 0; }
    .gz-order__body > strong { font-size: var(--text-md); }
    .gz-order__side {
        display: flex;
        flex-wrap: wrap; /* a long state wraps under the amount at 320 px */
        align-items: center;
        justify-content: space-between;
        gap: var(--space-1) var(--space-3);
    }

    @media (width >= 37.5rem) {
        .gz-order__side { flex-direction: column; align-items: flex-end; gap: var(--space-2); }
    }
    .gz-line__amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
    /* The order's state: the word carries it, the tone only repeats it — nothing here is red. */
    .gz-order-status {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-block-size: 24px;
        padding: 0 var(--space-3);
        border: var(--border-width) solid transparent;
        border-radius: var(--radius-pill);
        font-size: var(--gz-text-2xs);
        font-weight: 700;
        letter-spacing: var(--gz-track-caps);
        text-transform: uppercase;
        white-space: nowrap;
    }
    .gz-order-status::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: var(--radius-pill); background: currentColor; }
    .gz-order-status--delivered { background: var(--color-success-soft); color: var(--color-success); }
    .gz-order-status--accepted { background: var(--color-info-soft); color: var(--color-info); }
    .gz-order-status--cancelled { background: transparent; border-color: var(--color-line-strong); color: var(--color-ink-muted); }

    /* An order: the lines and their summary, "Doručenie a platba" beside them where there is room. */
    .l-order { display: grid; gap: var(--space-6); }

    @media (width >= 75rem) {
        .l-order { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: var(--space-7); align-items: start; }
    }
    .gz-order-lines { display: grid; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-5); padding: 0; }
    .gz-order-lines .gz-summary__line { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .gz-order-lines .gz-summary__thumb { background: var(--color-sunken); }
    .gz-order-detail__totals { padding-block-start: var(--space-4); border-block-start: var(--border-width) solid var(--color-line); }
    .l-order__main > .gz-account__card-label { margin-block-end: var(--space-4); }
    .l-order__aside .gz-account__card > h2.gz-account__card-label { margin-block-end: var(--space-3); font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
    .gz-order-detail__facts { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); font-size: var(--text-sm); }
    .gz-order-detail__facts dd { margin-inline-start: 0; }
    .gz-order-detail__facts dd + dt { margin-block-start: var(--space-3); }

    /* ── Erebor's own account pages ── the base markup under Godzone's frame. */
    .panel { padding: var(--gz-space-5); background: var(--color-sunken); border-color: transparent; border-radius: var(--radius-control); }
    .button--quiet { min-block-size: var(--target-min); padding-inline: 0; font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 3px; }
    .button--quiet:hover { color: var(--color-sale); }
    .alert { border-inline-start: 0; margin-block-end: 0; }
    .select { padding-inline-end: var(--space-7); }
    /* A base page's frame stands in `main` without Godzone's section around it. The flashes' box is an `.l-container`
       too, but not a page: under the section gap a flash stood 112 px above its page (the checkout's returning-guest
       notice). */
    main > .l-container:not(.flashes) { padding-block: var(--space-6) var(--section-gap); }
    /* The flashes take the page's entry gap under the chrome, above and below them, and the page under them starts
       without its own; after the rules above, which it outranks by order. */
    main > .flashes { padding-block: var(--space-6); }
    main > .flashes + :is(.gz-section, .cms-page, .l-container) { padding-block-start: 0; }
    .chip-list { list-style: none; padding: 0; }
    .data-table thead th, .facts dt { font-size: var(--gz-text-2xs); font-weight: 600; letter-spacing: var(--gz-track-caps); text-transform: uppercase; color: var(--color-ink-muted); }
    .facts dd { overflow-wrap: anywhere; } /* a long e-mail breaks at 320 px */
    /* Phone: the label over its value, as on the account cards. */
    @media (width < 37.5rem) {
        .facts { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); }
        .facts dd { margin-inline-start: 0; }
        .facts dd + dt { margin-block-start: var(--space-3); }
    }
    /* ── Pages for someone not signed in ── the base's `_guest` frame (the manual's Sign in): sign-in, registration, the
       password and verification pages, the withdrawal form, and the payment and document notices. The heading is
       centred and the narrow panel grid stands in the middle of the page, one panel under another on a phone. A panel
       holding a form is a white card lifted off the page; a panel that only tells or links is the quiet cream one, and
       beside a form's card it holds the monogram faintly in its corner, as the empty states do. A page of one panel is
       one narrower centred card. All of it reads the base's markup with `:has()`, so the frame and the pages stay the
       base's. */
    .l-container:has(> .panel-grid--narrow) > .page-head { justify-content: center; text-align: center; }
    .panel-grid--narrow { margin-inline: auto; align-items: start; }
    @media (width >= 48rem) {
        .panel-grid--narrow:has(> .panel:only-child) { grid-template-columns: minmax(0, 36rem); justify-content: center; }
    }
    .theme-godzone .panel-grid--narrow > .panel { border-radius: var(--radius-panel); }
    .theme-godzone .panel-grid--narrow > .panel > :last-child { margin-block-end: 0; }
    @media (width >= 56.25rem) {
        .theme-godzone .panel-grid--narrow > .panel { padding: var(--space-6); }
    }
    .theme-godzone .panel-grid--narrow > .panel:has(form) {
        background: var(--color-paper);
        border: var(--border-width) solid var(--color-line);
        box-shadow: var(--gz-shadow-1), var(--shadow-overlay);
    }
    /* A one-card page ends on its way back (the sign-in, the home page), centred under the card's button. */
    .panel-grid--narrow > .panel:only-child > p:last-child:has(> .button) { text-align: center; }
    /* A form's main button spans its card. */
    .theme-godzone .panel-grid--narrow form > .button--primary[type="submit"] { inline-size: 100%; }
    /* A tick in these forms ("remember me", the consents) is a plain checkbox, not an option card. */
    .theme-godzone .panel-grid--narrow :is(.choice, .choice:has(input:checked)) {
        margin: 0;
        padding: var(--space-2) 0;
        border: 0;
        background: none;
    }
    /* The cream panel: why an account helps as a list at the panel's edge, each icon in a white round; its buttons on
       white. */
    .theme-godzone .panel-grid--narrow .assurance-list { padding-inline-start: 0; gap: var(--space-4); }
    .theme-godzone .panel-grid--narrow .assurance-list li { align-items: center; }
    .theme-godzone .panel-grid--narrow .assurance-list .icon {
        box-sizing: content-box;
        padding: var(--space-2);
        border-radius: 50%;
        background: var(--color-paper);
    }
    .theme-godzone .panel-grid--narrow > .panel:not(:has(form)) .panel__actions > .button { flex: 1 1 auto; background: var(--color-paper); }
    .theme-godzone .panel-grid--narrow:has(> .panel form) > .panel:not(:has(form)) { position: relative; overflow: hidden; isolation: isolate; }
    .theme-godzone .panel-grid--narrow:has(> .panel form) > .panel:not(:has(form))::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset-inline-end: -5%;
        inset-block-start: -7%;
        inline-size: 30%;
        aspect-ratio: 56.41 / 58.72;
        background: url("images/godzone-monogram-RP9gvKY.svg") center/contain no-repeat;
        opacity: 0.07;
        filter: grayscale(1);
        pointer-events: none;
    }
    /* One column on a phone: the cream panel is as tall as its text, with no corner to spare. */
    @media (width < 48rem) {
        .theme-godzone .panel-grid--narrow:has(> .panel form) > .panel:not(:has(form))::after { display: none; }
    }
    /* The status line a provider's script fills (Konto's sign-in, registration and password pages): empty, it leaves no
       gap in the form; out of flow rather than hidden, so it stays in the accessibility tree and what the script writes
       into it is announced. */
    .theme-godzone .field__error[role="status"]:empty { position: absolute; }
    /* Konto's pages carry Godzone's monogram before their sign-in line and their title, so they read as Godzone's own
       account. */
    .theme-godzone :is([data-region="signin.external"][data-provider="firebase"] > h3, [data-region="register.external"][data-provider="firebase"] > .panel__title) {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
    .theme-godzone :is([data-region="signin.external"][data-provider="firebase"] > h3, [data-region="register.external"][data-provider="firebase"] > .panel__title)::before {
        content: "";
        flex: none;
        inline-size: max(1.25rem, 0.85em);
        aspect-ratio: 56.41 / 58.72;
        background: url("images/godzone-monogram-RP9gvKY.svg") center/contain no-repeat;
    }

    /* ── Sign-in ── the page under the frame above (`_signin_panels`): the theme's line under the heading; the two
       panels of the row's height with their actions at the foot, so the red sign-in and the guest panel's buttons stand
       on one line. */
    .gz-signin-lead {
        grid-column: 1 / -1;
        justify-self: center;
        max-inline-size: 40rem;
        margin: calc(-1 * var(--space-2)) 0 var(--space-2);
        font-size: var(--text-lg);
        text-align: center;
        text-wrap: balance;
        color: var(--color-ink-muted);
    }
    .panel-grid--narrow:has(> [data-region="signin.form"]) { align-items: stretch; }
    /* Konto's sign-in is the screen's one red (`GZ-0108`, as above the checkout's steps). The base draws a provider's
       button as the second action beside the shop's own form, which Godzone's page leaves out while Konto is offered
       (`GZ-0040`), so the theme gives it the primary look rather than changing the base's markup. */
    .theme-godzone [data-region="signin.external"][data-provider="firebase"] [type="submit"] {
        background: var(--color-primary);
        color: var(--color-on-primary);
        border-color: transparent;
    }
    .theme-godzone [data-region="signin.external"][data-provider="firebase"] [type="submit"]:hover { background: var(--color-primary-hover); }
    .theme-godzone [data-region="signin.external"][data-provider="firebase"] [type="submit"]:active { background: var(--gz-surface-brand-active); }
    /* In the sign-in form the button comes last, a password reset link above it as the prototype has "Zabudli ste
       heslo?"; the stack's gap stays the least space. */
    @media (width >= 48rem) {
        .theme-godzone :is([data-region="signin.form"], [data-region="signin.guest"]) { display: flex; flex-direction: column; gap: var(--space-4); }
        .theme-godzone :is([data-region="signin.form"], [data-region="signin.guest"]) > * { margin-block: 0; }
        .theme-godzone [data-region="signin.form"] > form { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-5); }
        .theme-godzone [data-region="signin.form"] > form > [type="submit"] { order: 2; margin-block-start: auto; }
        .theme-godzone [data-region="signin.form"] > form > [data-external-account-links] { order: 1; }
        .theme-godzone [data-region="signin.guest"] > .panel__actions { margin-block-start: auto; padding-block-start: var(--space-2); }
    }
    /* The provider's heading (Godzone Konto) is a line under the panel's title, not a second title. */
    .theme-godzone [data-region="signin.external"] > h3 { margin: 0; font-size: var(--text-md); font-weight: 600; color: var(--color-ink-muted); }
    .theme-godzone [data-external-account-links] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
    .theme-godzone [data-external-account-links] a { font-weight: var(--font-weight-medium); text-underline-offset: 3px; }
    .theme-godzone [data-external-account-links] a:hover { color: var(--color-sale); }
    /* Creating a Konto is the guest panel's "Vytvoriť účet", which leads to the same registration, so the sign-in
       panel keeps only the password reset, and no row when there is none. */
    .theme-godzone [data-external-account-links] > a[href*="/register/external/"] { display: none; }
    .theme-godzone [data-external-account-links]:not(:has(> a:not([href*="/register/external/"]))) { display: none; }

    /* ── Content pages ── a static page's CMS sections (the base's `_section`) drawn as the prototype drew *O nás*. A
       section of two columns 40/60 is a heading beside its text, the heading in the display face; a column that opens
       on one bold line reads it as its lead and the line under it as a quieter note; a row of photographs (banners in a
       section of two or three, the banner's figure face) runs from edge to edge, 4 px apart, each caption under its
       photograph; the banner alone (the support band) is the page's closing line on cream beside the monogram. Only
       the CMS's markup is read, so any page the client composes this way takes the same look. */
    @media (width >= 56.25rem) {
        .cms-page .cms-section--two_40_60 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-7); }
    }
    /* The page's title stands apart from a first section that has a heading of its own. */
    .cms-page__title + .cms-section--two_40_60 { margin-block-start: var(--space-7); }
    .cms-page .cms-section--two_40_60 > .cms-section__column:first-child .prose > h2:only-child {
        margin: 0;
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-display);
        line-height: var(--gz-display-lh);
        letter-spacing: var(--tracking-display);
        text-transform: uppercase;
        text-wrap: balance;
    }
    .cms-page .cms-section--two_40_60 > .cms-section__column:last-child .prose > p:first-child:has(> strong:only-child) {
        margin-block-end: var(--space-2);
        font-size: var(--text-xl);
        line-height: var(--leading-tight);
        text-wrap: balance;
    }
    .cms-page .cms-section--two_40_60 > .cms-section__column:last-child .prose > p:first-child:has(> strong:only-child) + p { font-size: var(--text-lg); color: var(--color-ink-muted); }
    .cms-page .cms-section:has(> .cms-section__column > .gz-figure) {
        margin-inline: calc(50% - 50vw);
        gap: var(--space-5) var(--space-1);
    }
    .gz-figure { margin: 0; }
    .gz-figure .cms-banner__image { display: block; block-size: auto; aspect-ratio: 3 / 2; background: var(--color-sunken); }
    .gz-figure .cms-banner__copy {
        position: static;
        max-inline-size: none;
        padding: var(--space-2) var(--space-3) 0;
        background: none;
        font-size: var(--text-sm);
        color: var(--color-ink-muted);
    }
    .gz-figure .cms-banner__headline { color: var(--color-ink); }
    .cms-page .gz-home-support {
        padding: var(--space-6);
        border: 0;
        border-radius: var(--radius-panel);
        background: var(--color-sunken);
    }
    @media (width >= 56.25rem) {
        .cms-page .gz-home-support { padding: var(--space-7); }
    }
    .cms-page .gz-home-support__heading {
        margin: 0;
        font-size: var(--text-xl);
        font-weight: 700;
        line-height: var(--leading-tight);
        letter-spacing: normal;
        text-transform: none;
        text-wrap: balance;
        color: var(--color-ink);
    }
    @media (width >= 56.25rem) {
        .cms-page .gz-home-support__heading { font-size: var(--text-2xl); }
    }

    /* ── Help pages ── the shipping, terms, withdrawal, complaints, privacy and contact pages (`gz-help`, the content page
       override): from 56.25rem the menu of the help pages stands left of the text and scrolls with the page (`GZ-0088`),
       the page itself marked; on a phone the menu is chips over the text, wrapped, so the current one is always in
       sight (a theme has no script to scroll a row to it). The text reads at
       its own measure: a page's first heading (the title restated, "Všeobecné obchodné podmienky") is its subtitle, each
       part after it opens under a thin rule, list markers are in the brand's text red. Two or more columns of text are
       cream cards (the contact page). */
    .gz-help__heading { margin: 0 0 var(--space-3); }
    .gz-help__links { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
    .gz-help__link {
        display: block;
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-control);
        color: var(--color-ink);
        text-decoration: none;
        white-space: nowrap;
    }
    .gz-help__link:hover { background: var(--color-sunken); }
    .gz-help__link[aria-current="page"] { background: var(--color-sunken); font-weight: 700; }
    @media (width < 56.25rem) {
        .gz-help__nav { margin-block: 0 var(--space-6); }
        .gz-help__heading { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
        .gz-help__links { flex-wrap: wrap; }
        .gz-help__link { padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-line-strong); border-radius: var(--radius-pill); font-size: var(--text-sm); }
        .gz-help__link[aria-current="page"] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
    }
    @media (width >= 56.25rem) {
        .gz-help { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--space-8); align-items: start; }
        .gz-help > :is(.breadcrumbs, .cms-page__title) { grid-column: 1 / -1; }
        .gz-help > .cms-page__title { margin-block-end: var(--space-6); }
        .gz-help__links { flex-direction: column; gap: var(--space-1); }
        .gz-help__link { margin-inline-start: calc(-1 * var(--space-4)); }
    }
    .gz-help__body > .cms-section:first-child { margin-block-start: 0; }
    .gz-help__body > .cms-section + .cms-section { margin-block-start: var(--grid-gap); }
    .gz-help__body .prose > h2:first-child {
        margin: 0 0 var(--space-5);
        font-size: var(--text-xl);
        font-weight: 600;
        color: var(--color-ink-muted);
    }
    .gz-help__body .cms-section--one .prose > h3 { margin-block: var(--space-6) var(--space-3); font-size: var(--text-lg); font-weight: 700; }
    .gz-help__body .cms-section--one .prose > h3:not(:first-child) {
        margin-block-start: var(--space-7);
        padding-block-start: var(--space-5);
        border-block-start: var(--border-width) solid var(--color-line);
    }
    .gz-help__body .cms-section--one .prose > h2:first-child + h3 { margin-block-start: 0; padding-block-start: 0; border: 0; }
    .gz-help__body .prose > h4 { margin-block: var(--space-5) var(--space-2); font-size: var(--text-md); font-weight: 700; }
    .gz-help__body .prose :is(ul, ol) { display: grid; gap: var(--space-2); margin-block: 0 var(--space-4); padding-inline-start: var(--space-5); }
    .gz-help__body .prose li::marker { color: var(--color-sale); }
    .gz-help__body .cms-section:not(.cms-section--one) > .cms-section__column > .cms-block--rich-text {
        block-size: 100%;
        padding: var(--space-5);
        border-radius: var(--radius-panel);
        background: var(--color-sunken);
    }
    .gz-help__body .cms-section:not(.cms-section--one) .prose > h3 { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
    .gz-help__body .cms-section:not(.cms-section--one) .prose > :last-child { margin-block-end: 0; }

    /* ── Order confirmation ── the checkout's look at its end: the thanks centred over a check, the order's number a tag;
       what comes next a line with its icon; the payment a white card like the checkout's steps, the amount and the
       reference set to be copied from, the bank's sentence under a hairline; the summary's facts quiet; the way back
       to the shop a button, not a third card. */
    .gz-confirm-hero {
        display: grid;
        justify-items: center;
        gap: var(--space-3);
        padding-block: var(--space-6) var(--space-7);
        text-align: center;
        border-block-end: var(--border-width) solid var(--color-line);
    }
    .gz-confirm-hero__mark {
        display: grid;
        place-items: center;
        inline-size: 72px;
        block-size: 72px;
        border-radius: 50%;
        background: var(--color-success-soft);
        color: var(--color-success);
        box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-success-soft) 50%, transparent);
    }
    .theme-godzone .gz-confirm-hero__mark .icon { inline-size: 36px; block-size: 36px; stroke-width: 2.25; }
    .gz-confirm-hero h1 { margin: 0; text-wrap: balance; }
    .gz-confirm-hero__number {
        margin: 0;
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-pill);
        background: var(--color-sunken);
        font-size: var(--text-sm);
        color: var(--color-ink-muted);
    }
    .gz-confirm-hero__number code { font-family: inherit; font-size: var(--text-md); font-weight: 700; letter-spacing: 0.04em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
    .gz-confirm-hero [data-gift-dropped] { max-inline-size: 40rem; margin: 0; color: var(--color-ink-muted); }
    .l-confirmation.gz-mt-8 { margin-block-start: var(--space-7); }
    .gz-confirm-next { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
    .gz-confirm-next li { display: flex; gap: var(--space-3); align-items: flex-start; }
    .gz-confirm-next .icon { flex: none; margin-block-start: 2px; color: var(--color-ink-muted); }
    .theme-godzone .gz-confirm-pay {
        padding: var(--space-5);
        border: var(--border-width) solid var(--color-line-strong);
        border-radius: var(--radius-panel);
        background: var(--color-paper);
        box-shadow: var(--gz-shadow-1), var(--shadow-overlay);
    }
    @media (width >= 37.5rem) {
        .theme-godzone .gz-confirm-pay { padding: var(--space-6); }
    }
    .gz-confirm-pay h2 { font-size: var(--text-xl); }
    .gz-confirm-pay .facts { align-items: baseline; }
    .gz-confirm-pay .facts dd { margin: 0; font-size: var(--text-md); }
    .gz-confirm-pay .facts dd.num { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
    .gz-confirm-pay .bank-transfer__code img { border-radius: var(--gz-radius-1); background: var(--color-paper); padding: var(--space-2); box-shadow: inset 0 0 0 var(--border-width) var(--color-line); box-sizing: content-box; }
    .gz-confirm-pay > .gz-meta { margin: var(--space-5) 0 0; padding-block-start: var(--space-4); border-block-start: var(--border-width) solid var(--color-line); }
    [data-region="confirmation.summary"] .facts { margin: var(--space-4) 0 0; padding-block-start: var(--space-4); border-block-start: var(--border-width) solid var(--color-line); }
    [data-region="confirmation.summary"] .facts dd { margin: 0; font-size: var(--text-sm); font-weight: 500; }
    .theme-godzone .gz-summary--continue { padding: 0; background: none; }
    .gz-summary--continue h2 { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

    /* ── Print ── */
    @page { margin: 20mm 14mm 14mm; }

    @media print {
        /* ── What paper does not need ──
           Navigation, offers and forms, and the account shell of the receipt. */
        .utility-bar,
        .site-header,
        .gz-skip,
        .skip-link,
        .gz-drawer,
        .gz-newsletter,
        .site-footer,
        .gz-sticky-bar,
        .gz-account__side,
        .breadcrumbs {
            display: none;
        }

        /* Actions, not containers: the account order detail's aside holds record content. */
        .gz-button, .gz-summary--continue { display: none; }

        /* The wordmark stays; later than the hide list, so block wins. */
        .site-header { display: block; }
        .site-header__inner > :not(.brand) { display: none; }

        /* ── Ink ── */
        body { background: #fff; color: #000; }
        .price { color: inherit; }

        /* A notice's frame is drawn on paper, or the order number floats. */
        .gz-notice { border: 1px solid #000; background: none; padding: 12pt; }

        /* ── Layout ── */
        .gz-two-column, .l-cart, .l-checkout, .l-confirmation { display: block; }

        /* The shell's 220px column would still hold its track. */
        .l-account { display: block; }
        .gz-wrap, .l-container { max-inline-size: none; margin: 0; padding: 0; }

        /* ── Page breaks ──
           Items, breakdown and methods stay whole. */
        .gz-line, .gz-summary__breakdown, .gz-summary__methods, .gz-notice { break-inside: avoid; }
        h1, h2, .gz-display { break-after: avoid; }
    }

    /* ══ REFINEMENTS ══ Rules over the components above. Most hang on the theme's body class `theme-godzone`, the
       `theme-{code}` the base layout sets on <body> (themes/base/templates/layout.html.twig): one class more weight than
       the rule each refines. */
    /* ── Product name: head (campaign / title) above sub (kind / author) ── */
    .theme-godzone .gz-name__head, .theme-godzone .gz-name__sub { display: block; }
    .theme-godzone .gz-name__head {
        font-weight: var(--font-weight-display);
        text-transform: uppercase;
        letter-spacing: var(--tracking-display);
        line-height: var(--gz-display-lh);
        color: var(--color-ink);
        text-wrap: balance;
    }
    .theme-godzone .gz-name__sub {
        font-weight: 400;
        color: var(--color-ink-muted);
        margin-block-start: var(--space-1);
    }

    /* Tile: head in base/lg, sub in sm; the two-line height stays so prices in a row share a baseline. */
    .theme-godzone .product-card__link {
        display: block;
        min-block-size: calc(var(--gz-display-lh) * 1.125rem + var(--space-1) + 1.18125rem);
    }
    .theme-godzone .product-card__link .gz-name__head { font-size: var(--text-md); }

    @media (width >= 56.25rem) {
        .theme-godzone .product-card__link .gz-name__head { font-size: var(--text-lg); }
    }
    .theme-godzone .product-card__link .gz-name__sub { font-size: var(--text-sm); }

    /* The price beside the kind. This heavier rule decides the tile's gap, so below 600 px it repeats the tighter one. */
    .theme-godzone .product-card__body { gap: var(--space-2); }

    @media (width < 37.5rem) {
        .theme-godzone .product-card__body { gap: var(--space-1); }
    }
    .theme-godzone .product-card .price__current { font-size: var(--text-md); }

    /* Cart line and mini-cart. */
    .theme-godzone .gz-line__name .gz-name__head { font-size: var(--text-sm); }
    .theme-godzone .gz-line__name .gz-name__sub { font-size: var(--text-xs); margin-block-start: 2px; }

    /* Detail: the head is the `h1` in the display role, the sub below it in sentence typesetting. */
    .theme-godzone .gz-detail__name .gz-name__head { font-size: var(--text-3xl); }
    .theme-godzone .gz-detail__name .gz-name__sub {
        font-size: var(--text-xl);
        font-weight: 500;
        color: var(--color-ink);
    }

    /* ── Entries: the label as text, not burned into the photo ── */
    .gz-entry--labelled {
        aspect-ratio: 3/2;
        background: var(--color-sunken);
    }
    .gz-entry--labelled::after { content: none; }
    .gz-entry--labelled .gz-entry__photo { position: absolute; inset: 0; overflow: hidden; }
    .gz-entry--labelled .gz-entry__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }

    /* The text inside the tile, on the caption band. */
    .gz-entry--labelled .gz-entry__strip {
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 1;
        display: grid;
        justify-items: start;
        gap: var(--space-2);
        padding: var(--space-4) var(--space-5) var(--space-5);
        background-color: var(--gz-surface-over-image-scrim);
    }
    /* The band fades into the photo above it instead of ending in a hard edge. */
    .gz-entry--labelled .gz-entry__strip::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: 100%;
        block-size: var(--space-7);
        background: linear-gradient(to top, var(--gz-surface-over-image-scrim), transparent);
        pointer-events: none;
    }
    .gz-entry--labelled .gz-entry__label {
        font-weight: var(--font-weight-display);
        text-transform: uppercase;
        letter-spacing: var(--tracking-display);
        line-height: var(--gz-display-lh);
        font-size: var(--text-lg);
        color: var(--gz-fg-over-image);
    }

    @media (width >= 56.25rem) {
        .gz-entry--labelled .gz-entry__label { font-size: var(--text-xl); }
    }
    .gz-entry--labelled .gz-entry__text { margin: 0; color: var(--gz-fg-over-image); }
    .gz-entry--labelled .gz-entry__action {
        position: static;
        margin-block-start: var(--space-1);
        background: var(--color-paper);
        color: var(--color-ink);
    }
    .gz-entry--labelled:hover .gz-entry__label { text-decoration: underline; text-underline-offset: 4px; }

    /* "Buy" under a pointer: the label steps aside for an arrow. */
    .gz-entry--labelled .gz-entry__action {
        /* Relative for the arrow; `inset: auto` keeps the pill's corner offsets above from shifting it by 12 px. */
        position: relative;
        inset: auto;
        overflow: hidden;
        transition: background-color var(--duration-quick) var(--gz-ease-out);
    }
    /* ── Icon sizes ──
       Erebor's `ui.icon(name, size)` (themes/base/templates/_ui.html.twig) sizes an icon by a modifier class,
       `icon--{size}`, over the base's 24 px `.icon`; the theme names the sizes its templates ask for and strokes every
       icon at 1.5. */
    .theme-godzone .icon { stroke-width: 1.5; }
    .icon--14 { inline-size: 0.875rem; block-size: 0.875rem; }
    .icon--16 { inline-size: 1rem; block-size: 1rem; }
    .icon--18 { inline-size: 1.125rem; block-size: 1.125rem; }
    .icon--20 { inline-size: 1.25rem; block-size: 1.25rem; }
    .icon--22 { inline-size: 1.375rem; block-size: 1.375rem; }
    .icon--32 { inline-size: 2rem; block-size: 2rem; }

    .gz-entry--labelled .gz-entry__action-text,
    .gz-entry--labelled .gz-entry__action .icon {
        display: block;
        transition: transform var(--gz-dur-2) var(--gz-ease-out), opacity var(--gz-dur-2) var(--gz-ease-out);
    }
    .gz-entry--labelled .gz-entry__action .icon {
        position: absolute;
        inset-inline-end: var(--space-2);
        inset-block-start: 50%;
        transform: translate(-8px, -50%);
        opacity: 0;
    }

    @media (hover: hover) {
        .gz-entry--labelled:is(:hover, :focus-visible) .gz-entry__action { background: var(--gz-surface-warm-2); }
        .gz-entry--labelled:is(:hover, :focus-visible) .gz-entry__action-text { transform: translateX(calc(-1 * var(--space-3))); }
        .gz-entry--labelled:is(:hover, :focus-visible) .gz-entry__action .icon { transform: translate(0, -50%); opacity: 1; }
    }

    /* ── Detail: item kind as eyebrow, facts as a table, not a sentence ── */
    .theme-godzone .gz-detail__kind { margin: 0 0 var(--space-2); }
    .theme-godzone .gz-facts {
        margin-block-start: var(--space-6);
        padding-block-start: var(--space-5);
        border-block-start: var(--border-width) solid var(--color-line);
    }
    .theme-godzone .gz-facts h2 {
        font-size: var(--gz-text-2xs);
        text-transform: uppercase;
        letter-spacing: var(--gz-track-caps);
        color: var(--color-ink-muted);
        margin-block-end: var(--space-3);
    }

    /* Bibliography and composition — a two-column definition, the label muted, the value full. */
    .theme-godzone .gz-facts__list {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        gap: var(--space-2) var(--space-4);
        margin: 0;
        font-size: var(--text-sm);
    }
    .theme-godzone .gz-facts__list dt { color: var(--color-ink-muted); }
    .theme-godzone .gz-facts__list dd { margin: 0; }

    /* Dimensions table — the size in the display role as a row header, the measurements tabular. */
    .theme-godzone .gz-facts__table {
        inline-size: 100%;
        border-collapse: collapse;
        font-size: var(--text-sm);
        font-variant-numeric: tabular-nums;
    }
    .theme-godzone .gz-facts__table th, .theme-godzone .gz-facts__table td {
        padding: var(--space-2) var(--space-3);
        text-align: start;
        border-block-end: var(--border-width) solid var(--color-line);
    }
    .theme-godzone .gz-facts__table thead th {
        font-size: var(--gz-text-2xs);
        text-transform: uppercase;
        letter-spacing: var(--gz-track-caps);
        color: var(--color-ink-muted);
        font-weight: 600;
    }
    .theme-godzone .gz-facts__table tbody th {
        font-weight: var(--font-weight-display);
        letter-spacing: var(--tracking-display);
    }
    .theme-godzone .gz-facts__table td {
        text-align: end;
        /* A measurement does not wrap — "45,5 cm" on two lines reads as two values. */
        white-space: nowrap;
    }

    /* The row of the chosen size — connects the table with the switcher, it is not decoration. */
    .theme-godzone .gz-facts__table tr[aria-current="true"] { background: var(--color-sunken); }

    /* A nowrap table scrolls inside the column instead of widening the page. */
    .theme-godzone .l-pdp > * { min-inline-size: 0; }
    .theme-godzone .gz-facts__wrap { overflow-x: auto; max-inline-size: 100%; }

    /* ── Size table disclosure ── */
    .theme-godzone .gz-disclosure__summary {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        /* 44 px: a bare summary is 358 × 26. */
        min-block-size: 44px;
        list-style: none;
        cursor: pointer;
    }
    .theme-godzone .gz-disclosure__summary::-webkit-details-marker { display: none; }
    .theme-godzone .gz-disclosure__summary svg {
        flex: none;
        color: var(--color-ink-muted);
        transition: transform var(--gz-dur-2) var(--ease-standard);
    }

    /* Keyboard gets the same affordance as the mouse — `hover` alone leaves it out. */
    .theme-godzone .gz-disclosure__summary:hover h2,
    .theme-godzone .gz-disclosure__summary:focus-visible h2 {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .theme-godzone .gz-disclosure__summary:focus-visible {
        outline: var(--gz-border-2) solid var(--color-focus);
        outline-offset: 2px;
    }
    .theme-godzone .gz-disclosure[open] > .gz-disclosure__summary svg { transform: rotate(180deg); }

    /* One block: switcher, the folded table and the material. */
    .theme-godzone .gz-facts--sizes { margin-block-start: var(--space-4); }

    /* Scoped like the rule it overrides (0,2,1), or it does nothing. */
    @media (prefers-reduced-motion: reduce) {
        .theme-godzone .gz-disclosure__summary svg { transition: none; }
    }

    /* A folded size table prints open. */
    @media print {
        .theme-godzone .gz-disclosure::details-content { content-visibility: visible; }
        .theme-godzone .gz-disclosure > *:not(summary) { display: block; }
        .theme-godzone .gz-disclosure__summary svg { display: none; }
    }

    /* ── Checkout: rhythm, not frames ── */
    .theme-godzone .gz-step__number { background: var(--gz-surface-inverse); color: var(--gz-fg-on-inverse); }
    /* ── Checkout: each step a card ── the open step lifted off the page, a done step's number in ink, a step not
       reached yet outlined and quiet — the states the progress above draws. */
    .theme-godzone .gz-checkout .gz-step {
        margin-block-end: var(--space-3);
        border: var(--border-width) solid var(--color-line);
        border-radius: var(--radius-panel);
        background: var(--color-paper);
        transition: border-color var(--duration-quick) var(--ease-standard), box-shadow var(--duration-quick) var(--ease-standard);
    }
    .theme-godzone .gz-checkout .gz-step[open] { border-color: var(--color-line-strong); box-shadow: var(--gz-shadow-1), var(--shadow-overlay); }
    .theme-godzone .gz-checkout .gz-step:not([open]):hover { border-color: var(--color-line-strong); }
    .theme-godzone .gz-checkout .gz-step__head { padding: var(--space-4); }
    .theme-godzone .gz-checkout .gz-step__body { padding: 0 var(--space-4) var(--space-5); }
    @media (width >= 37.5rem) {
        .theme-godzone .gz-checkout .gz-step__head { padding: var(--space-4) var(--space-5); }
        .theme-godzone .gz-checkout .gz-step__body { padding: 0 var(--space-5) var(--space-5); }
    }
    /* An open step shows no summary under its name, so its number sits on the name's row. */
    .theme-godzone .gz-step[open] .gz-step__number { grid-row: auto; }
    .theme-godzone .gz-step:not([open], .gz-step--done) .gz-step__number {
        background: var(--color-paper);
        color: var(--color-ink-muted);
        box-shadow: inset 0 0 0 var(--gz-border-2) var(--color-line-strong);
    }
    .theme-godzone .gz-step:not([open], .gz-step--done) .gz-step__name { color: var(--color-ink-muted); }
    /* A step's "continue" is dark (the template's `gz-step__next`): at its words' width from 37.5rem, full on a phone. */
    .gz-step__next { inline-size: 100%; }
    @media (width >= 37.5rem) {
        .gz-step__next { justify-self: start; inline-size: auto; min-inline-size: 16rem; }
    }
    /* Contact: the e-mail and the phone side by side from 37.5rem; whatever else the form holds spans the row. */
    @media (width >= 37.5rem) {
        .theme-godzone #contact .form-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
        .theme-godzone #contact .form-stack > :not(.field, .gz-field) { grid-column: 1 / -1; }
        .theme-godzone #contact .form-stack .input { max-inline-size: none; }
    }
    /* The review's lines take small thumbnails. From 56.25rem, where the summary beside the form shows the items with
       their pictures, they are a compact list without them — still right above the order's button, as the law asks of
       the items (the sticky summary leaves the window once the page scrolls past the form, the button still in it). */
    .theme-godzone #summary .gz-line { grid-template-columns: 56px minmax(0, 1fr); }
    @media (width >= 56.25rem) {
        .theme-godzone #summary .gz-review-lines .gz-line { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-3); }
        .gz-review-lines .gz-line__photo { display: none; }
        .gz-review-lines .gz-line__body { grid-template-columns: minmax(0, 1fr); gap: 2px; }
        .gz-review-lines .gz-line__bottom { margin: 0; }
        .gz-review-lines :is(.gz-line__variant, .gz-line__bottom .gz-meta) { font-size: var(--text-xs); }
    }
    .theme-godzone .gz-step__name {
        font-weight: var(--font-weight-display);
        text-transform: uppercase;
        letter-spacing: var(--tracking-display);
        font-size: var(--text-lg);
    }
    .theme-godzone .gz-step__head { align-items: center; }
    .theme-godzone :is(.gz-option, .choice) {
        border-width: var(--border-width);
        margin-block-end: var(--space-2);
        padding: var(--space-3) var(--space-4);
    }
    .theme-godzone :is(.gz-option, .choice):has(input:checked) {
        border-width: var(--gz-border-2);
        /* Compensation for the thicker border, so the chosen option does not jump by a pixel. */
        margin: -1px -1px calc(var(--space-2) - 1px);
    }
    .theme-godzone .gz-summary h2, .theme-godzone .gz-gift-block__heading {
        font-weight: var(--font-weight-display);
        letter-spacing: var(--tracking-display);
        font-size: var(--text-md);
        color: var(--color-ink);
    }

    /* ── Empty states: the monogram ── */
    .theme-godzone .gz-wrap:has(> .empty-state) {
        position: relative;
        overflow: hidden;
        min-block-size: 60vh;
        display: grid;
        align-content: center;
    }
    .theme-godzone .gz-wrap:has(> .empty-state)::before {
        content: "";
        position: absolute;
        inset-block: -10%;
        inset-inline-end: -18%;
        inline-size: 70vmin;
        background: url("images/godzone-monogram-RP9gvKY.svg") center/contain no-repeat;
        opacity: 0.07;
        filter: grayscale(1);
        pointer-events: none;
    }
    /* Under a flash (the cart emptied without JavaScript) the state follows it, not the window's middle 183 px below. */
    main > .flashes + .gz-wrap:has(> .empty-state) { align-content: start; }
    .theme-godzone .gz-wrap:has(> .empty-state) > .empty-state { position: relative; padding-block: var(--space-7); }
    .theme-godzone .gz-wrap:has(> .empty-state) .gz-display--page { font-size: var(--text-4xl); }

    /* ══ CATEGORY LISTING: refinements ══ */
    /* Closer to the header: the rhythm token is for a section after a section. */
    body.theme-godzone .gz-wrap.gz-section:has(> .l-plp) { padding-block-start: var(--space-5); }
    /* Under a flash the listing starts at once, as every page does (the flashes' rule is outranked by the one above). */
    main > .flashes + .gz-wrap.gz-section:has(> .l-plp) { padding-block-start: 0; }
    body.theme-godzone .page-head { margin-block-end: var(--space-3); }

    /* From 1 200 px the sidebar starts right under the head. */
    @media (width >= 75rem) {
        body.theme-godzone .page-head { margin-block-end: var(--space-5); }
    }

    /* The toolbar's min-content must not widen the column. */
    body.theme-godzone .l-plp { grid-template-columns: minmax(0, 1fr); }

    @media (width >= 75rem) {
        body.theme-godzone .l-plp { grid-template-columns: 220px minmax(0, 1fr); }
    }
    body.theme-godzone .l-plp > * { min-inline-size: 0; }

    /* ── Subcategory rail ── */
    body.theme-godzone .chip-list--scroll {
        display: flex;
        gap: var(--space-2);
        margin-block: 0 var(--space-3);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        padding-block: var(--space-1);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
        /* The right edge fades (a mask, no token), so the rail reads as continuing. */
        mask-image: linear-gradient(to right, #000 calc(100% - var(--space-6)), transparent);
    }
    body.theme-godzone .chip-list--scroll::-webkit-scrollbar { display: none; }

    @media (width >= 56.25rem) {
        body.theme-godzone .chip-list--scroll {
            flex-wrap: wrap;
            overflow: visible;
            margin-inline: 0;
            padding-inline: 0;
            margin-block-end: var(--space-4);
            mask-image: none;
        }
    }

    @media (width >= 75rem) {
        body.theme-godzone .chip-list--scroll { display: none; }
    }
    body.theme-godzone .chip--nav {
        flex: none;
        background: transparent;
        scroll-snap-align: start;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        /* Touch target 44 px; the chip is a real link, not a filter. */
        min-block-size: 44px;
        /* `space-3`: nine chips must fit one line at 1 440 px. */
        padding-inline: var(--space-3);
        border: var(--border-width) solid var(--color-line-strong);
        border-radius: var(--radius-pill);
        color: var(--color-ink);
        text-decoration: none;
        font-size: var(--text-sm);
        font-weight: 600;
        white-space: nowrap;
        transition: background-color var(--duration-quick) var(--ease-standard),
            border-color var(--duration-quick) var(--ease-standard);
    }
    body.theme-godzone .chip--nav:hover { background: var(--color-sunken); border-color: var(--color-line-strong); }

    /* The current branch is an inverse chip — colour plus `aria-current`, never colour alone. */
    body.theme-godzone .chip--nav[aria-current="page"] {
        background: var(--gz-surface-inverse);
        border-color: var(--gz-surface-inverse);
        color: var(--gz-fg-on-inverse);
    }

    /* Below `lg` the rail carries the branch, from `lg` the sidebar; the hook class keeps the two apart. */
    body.theme-godzone .gz-sidebar__group--categories { display: none; }

    @media (width >= 75rem) {
        body.theme-godzone .gz-sidebar__group--categories { display: block; }
    }

    /* ── Toolbar: one hierarchy, no hairline ──
       One row on every width. */
    body.theme-godzone .listing-toolbar {
        flex-wrap: nowrap;
        gap: var(--space-2);
        border-block-end: 0;
        padding-block-end: 0;
        margin-block-end: var(--space-4);
        /* A container, so the filter button reacts to the row's width, not the viewport's. */
        container-type: inline-size;
    }

    @media (width >= 37.5rem) {
        body.theme-godzone .listing-toolbar { gap: var(--space-3); }
    }

    /* The button gives up its word before the sort gives up its value. */
    @container (width < 430px) {
        body.theme-godzone .listing-toolbar__filter-label {
            position: absolute;
            inline-size: 1px;
            block-size: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
        }
    }

    /* One 2 px frame around the label and the select. */
    body.theme-godzone .listing-toolbar__sort {
        display: flex;
        /* `0 1 auto`: the frame shrinks to its content. */
        flex: 0 1 auto;
        flex-wrap: nowrap;
        min-inline-size: 0;
        align-items: center;
        gap: var(--space-2);
        margin-inline-start: auto;
        min-block-size: 48px;
        padding-inline: var(--space-3);
        border: var(--gz-border-2) solid var(--color-line-strong);
        border-radius: var(--radius-control);
        background: var(--color-paper);
    }
    body.theme-godzone .listing-toolbar__sort select { min-inline-size: 0; max-inline-size: 100%; }
    body.theme-godzone .listing-toolbar__label {
        flex: none;
        white-space: nowrap;
        position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; /* never visually hidden */
        font-size: var(--text-sm);
        color: var(--color-ink-muted);
    }

    /* The pair carries the frame and the ring, not the field. */
    body.theme-godzone .listing-toolbar__sort select {
        /* The 44 px target stays on the field. */
        min-block-size: 44px;
        border: 0;
        background-color: transparent;
        padding-inline-start: 0;
    }
    body.theme-godzone .listing-toolbar__sort select:focus-visible { outline: none; }
    body.theme-godzone .listing-toolbar__sort:focus-within {
        outline: var(--gz-border-2) solid var(--color-focus);
        outline-offset: 2px;
    }

    /* ── Cookie consent (#676) ── the base structure (storefront-additions.css) in Godzone's skin: the box and the
       dialog are raised sheets on the theme's modal layer, the dialog's head a hairline above the categories. */
    .consent-banner { z-index: var(--gz-z-modal); border-color: transparent; box-shadow: var(--gz-shadow-3); }
    .consent-modal { z-index: calc(var(--gz-z-modal) + 1); }
    .consent-modal__panel { gap: var(--gz-space-5); padding: var(--space-5) var(--gz-space-5); box-shadow: var(--gz-shadow-3); }
    .consent-banner__title,
    .consent-modal__title { font-family: var(--font-display); font-weight: var(--font-weight-display); }
    .consent-modal__toggle:focus-visible { outline: var(--gz-border-2) solid var(--color-focus); outline-offset: 2px; }
    /* the theme gives a role="list" back its markers and every link an underline; these are neither */
    .consent-modal__categories { list-style: none; padding: 0; }
    /* the close cross is the theme's icon button: a 44 px target with no frame, the cross centred and level with the title */
    .consent-modal__head { align-items: center; }
    .consent-modal__close {
        box-sizing: border-box;
        inline-size: var(--target-min);
        block-size: var(--target-min);
        padding: 0;
        border: 0;
        border-radius: var(--radius-control);
        background: transparent;
        font-size: var(--text-2xl);
        line-height: 1;
        text-decoration: none;
    }
    .consent-modal .consent-modal__close:is(:hover, :active) { background: var(--color-sunken); color: var(--color-ink); }

    /* Spacing utilities. */
    .gz-mt-2 { margin-block-start: 0.5rem; }
    .gz-mt-3 { margin-block-start: 0.75rem; }
    .gz-mt-4 { margin-block-start: 1rem; }
    .gz-mt-5 { margin-block-start: 1.25rem; }
    .gz-mt-6 { margin-block-start: 1.5rem; }
    .gz-mt-8 { margin-block-start: 2rem; }
    .gz-mb-0 { margin-block-end: 0; }
    .gz-mb-2 { margin-block-end: 0.5rem; }
    .gz-mb-3 { margin-block-end: 0.75rem; }
    .gz-mb-4 { margin-block-end: 1rem; }
    .gz-mb-6 { margin-block-end: 1.5rem; }
}