/*
 * Storefront foundation — structure and components.
 *
 * Reads tokens only (css/tokens.css). A raw colour, font or radius in this file is a defect: a theme could not
 * reach it. The exceptions are structural constants, which are the platform's (manual #layout).
 *
 * Layers (declared in tokens.css):  reset < tokens < base < layout < components < theme < utilities
 * A theme writes in `@layer theme` and so outranks every component rule without fighting specificity.
 * State is styled from the attribute that announces it (aria-current, aria-invalid, :checked, :disabled) —
 * a theme cannot paint a state a screen reader does not hear.
 */

/* ════════════════════════════════════════════════════════════════════════════════
   reset
   ════════════════════════════════════════════════════════════════════════════════ */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, fieldset { margin: 0; }
    ol, ul { padding: 0; }
    /* A list styled as no list keeps role="list": Safari drops list semantics with list-style: none. */
    ul[role="list"], ol[role="list"] { list-style: none; }
    fieldset { border: 0; padding: 0; min-inline-size: 0; }
    legend { padding: 0; }
    img, svg, video { display: block; max-inline-size: 100%; }
    img { block-size: auto; }
    input, button, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
    button { cursor: pointer; }
    table { border-collapse: collapse; }
    [hidden] { display: none !important; }

    /* Important in the first layer outranks important in every later one: no theme can switch motion back on. */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* ════════════════════════════════════════════════════════════════════════════════
   base
   ════════════════════════════════════════════════════════════════════════════════ */
@layer base {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-padding-block-start: calc(var(--header-height) + var(--space-4));
    }

    body {
        font-family: var(--font-body);
        font-stretch: var(--font-width-body);
        font-size: var(--text-md);
        line-height: var(--leading-body);
        letter-spacing: var(--tracking-body);
        color: var(--color-ink);
        background: var(--color-paper);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3, h4 {
        font-family: var(--font-display);
        font-weight: var(--font-weight-display);
        font-stretch: var(--font-width-display);
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-display);
        text-wrap: balance;
    }
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
    h4 { font-size: var(--text-lg); line-height: var(--leading-snug); }
    p, li, dd { text-wrap: pretty; }

    a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
    a:hover { text-decoration-thickness: 2px; }

    :focus-visible {
        outline: var(--focus-width) solid var(--color-focus);
        outline-offset: var(--focus-offset);
    }

    ::selection { background: var(--color-primary-soft); color: var(--color-ink); }

    strong, b { font-weight: var(--font-weight-bold); }
    small { font-size: var(--text-sm); }
    hr { border: 0; border-block-start: var(--border-width) solid var(--color-line); margin: 0; }
    data, .num, td.num { font-variant-numeric: tabular-nums; }

    .icon {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .icon--sm { inline-size: 1.125rem; block-size: 1.125rem; }
    .icon--filled { fill: currentColor; stroke: none; }
}

/* ════════════════════════════════════════════════════════════════════════════════
   layout — structural, not a theme's
   ════════════════════════════════════════════════════════════════════════════════ */
@layer layout {
    @media (width >= 48rem) { :root { --grid-columns: 8; } }
    @media (width >= 64rem) { :root { --grid-columns: 12; } }

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

    .l-grid {
        display: grid;
        grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
        column-gap: var(--grid-gap);
    }

    .l-main { padding-block-end: var(--section-gap); }
    .l-section { margin-block-start: var(--section-gap); }
    .l-section--tight { margin-block-start: var(--space-7); }

    .l-stack > * + * { margin-block-start: var(--stack-gap, var(--space-4)); }

    /* Page layouts: named areas on the 12-column grid, one column below the desktop breakpoint. */
    .l-plp, .l-pdp, .l-cart, .l-checkout, .l-confirmation, .l-account {
        display: grid;
        gap: var(--space-6) var(--grid-gap);
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    /* The checkout summary is the desktop twin of .summary-toggle: below 64rem the toggle shows it, this column does not. */
    @media (width < 64rem) { .l-checkout__summary { display: none; } }

    @media (width >= 64rem) {
        .l-plp { grid-template-columns: repeat(12, minmax(0, 1fr)); }
        .l-plp__filters { grid-column: 1 / span 3; position: sticky; top: var(--space-5); }
        .l-plp__results { grid-column: 4 / -1; }

        .l-pdp { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-7); }
        .l-pdp__gallery { grid-column: 1 / span 7; }
        .l-pdp__buybox { grid-column: 8 / -1; grid-row: 1 / span 2; position: sticky; top: var(--space-5); }
        .l-pdp__details { grid-column: 1 / span 7; }

        .l-cart { grid-template-columns: repeat(12, minmax(0, 1fr)); }
        .l-cart__lines { grid-column: 1 / span 8; }
        .l-cart__summary { grid-column: 9 / -1; position: sticky; top: var(--space-5); }

        .l-checkout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-7); }
        .l-checkout__form { grid-column: 1 / span 7; }
        .l-checkout__summary { grid-column: 8 / -1; position: sticky; top: var(--space-5); }

        .l-confirmation { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-7); }
        .l-confirmation__main { grid-column: 1 / span 7; }
        .l-confirmation__aside { grid-column: 8 / -1; }

        .l-account { grid-template-columns: repeat(12, minmax(0, 1fr)); }
        .l-account__nav { grid-column: 1 / span 3; }
        .l-account__content { grid-column: 4 / -1; }
    }

    @media (width >= 80rem) {
        .l-cart__lines { grid-column: 1 / span 8; }
        .l-checkout__form { grid-column: 1 / span 7; }
    }
}

/* ════════════════════════════════════════════════════════════════════════════════
   components
   ════════════════════════════════════════════════════════════════════════════════ */
@layer components {

    /* ── Skip link ──────────────────────────────────────────────────────────── */
    .skip-link {
        position: absolute;
        inset-inline-start: var(--space-4);
        inset-block-start: var(--space-2);
        z-index: var(--z-toast);
        padding: var(--space-3) var(--space-4);
        background: var(--color-ink);
        color: var(--color-paper);
        border-radius: var(--radius-control);
        font-weight: var(--font-weight-bold);
        transform: translateY(-200%);
    }
    .skip-link:focus { transform: none; }

    /* ── Utility bar ────────────────────────────────────────────────────────── */
    .utility-bar {
        background: var(--utility-ground);
        font-size: var(--text-sm);
        color: var(--utility-ink);
    }
    .utility-bar__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-5);
        min-block-size: 2.25rem;
    }
    .utility-bar__message { display: flex; align-items: center; gap: var(--space-2); }
    /* The bar's links are as tall as the bar: the ring goes inside, or the page edge and the header clip it. */
    .utility-bar :focus-visible { outline-color: var(--utility-focus); outline-offset: calc(-1 * var(--focus-width)); }
    .utility-bar__links { display: none; align-items: center; gap: var(--space-5); margin-inline-start: auto; }
    .utility-bar__links a { text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 2.25rem; padding-inline: var(--space-1); }
    .utility-bar__links a:hover { text-decoration: underline; }
    @media (width >= 64rem) {
        .utility-bar__inner { justify-content: flex-start; }
        .utility-bar__links { display: flex; }
    }

    /* ── Site header ────────────────────────────────────────────────────────── */
    .site-header {
        background: var(--header-ground);
        color: var(--header-ink);
        border-block-end: var(--border-width) solid var(--header-line);
        position: sticky;
        top: 0;
        z-index: var(--z-header);
    }
    .site-header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "menu brand actions" "search search search";
        align-items: center;
        column-gap: var(--space-2);
        row-gap: var(--space-2);
        padding-block: var(--space-2) var(--space-3);
    }
    .site-header__menu { grid-area: menu; }
    .site-header__brand { grid-area: brand; justify-self: start; }
    .site-header__search { grid-area: search; }
    .site-header__actions { grid-area: actions; display: flex; align-items: center; gap: var(--space-1); }

    @media (width >= 64rem) {
        .site-header { position: static; }
        .site-header__inner {
            grid-template-columns: minmax(10rem, 1fr) minmax(0, 2.2fr) minmax(10rem, 1fr);
            grid-template-areas: "brand search actions";
            column-gap: var(--space-6);
            min-block-size: 5rem;
            padding-block: var(--space-3);
        }
        .site-header .site-header__menu { display: none; }
        .site-header__actions { justify-self: end; gap: var(--space-2); }
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-block-size: var(--target-min);
        color: inherit;
        text-decoration: none;
        font-family: var(--font-display);
        font-weight: var(--font-weight-display);
        font-size: var(--text-xl);
        letter-spacing: var(--tracking-display);
    }
    .brand__mark { inline-size: 1.75rem; block-size: 1.75rem; }

    .header-action {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-inline-size: var(--target-min);
        min-block-size: var(--target-min);
        padding-inline: var(--space-2);
        border: 0;
        border-radius: var(--radius-control);
        background: transparent;
        color: inherit;
        text-decoration: none;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        white-space: nowrap;
        justify-content: center;
    }
    .header-action:hover { background: var(--header-hover); }
    .site-header .icon-button { color: inherit; }
    .site-header :focus-visible, .primary-nav :focus-visible, .checkout-header :focus-visible { outline-color: var(--header-focus); }
    .site-header .icon-button:hover { background: var(--header-hover); }
    /* Below the desktop the label is hidden visually, never removed: it is the link's accessible name. */
    @media (width < 64rem) {
        .header-action__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    }
    .header-action__count {
        position: absolute;
        inset-block-start: 0.2rem;
        inset-inline-start: 1.55rem;
        min-inline-size: 1.25rem;
        block-size: 1.25rem;
        padding-inline: 0.3rem;
        border-radius: var(--radius-pill);
        background: var(--color-primary);
        color: var(--color-on-primary);
        font-size: 0.75rem;
        font-weight: var(--font-weight-bold);
        line-height: 1.25rem;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    @media (width >= 64rem) {
        .header-action__count { position: static; }
    }

    /* ── Search ─────────────────────────────────────────────────────────────── */
    .search-field { position: relative; display: flex; }
    .search-field__input {
        inline-size: 100%;
        block-size: var(--control-height);
        padding-inline: var(--space-4) calc(var(--target-min) + var(--space-2));
        border: var(--border-width-control) solid var(--color-line-strong);
        border-radius: var(--radius-control);
        background: var(--color-paper);
        font-size: var(--text-md);
    }
    .search-field__input::placeholder { color: var(--color-ink-muted); opacity: 1; }
    .search-field__submit {
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        inline-size: var(--target-min);
        display: grid;
        place-items: center;
        border: 0;
        background: transparent;
        color: var(--color-ink);
        border-radius: 0 var(--radius-control) var(--radius-control) 0;
    }
    .search-field--large .search-field__input { block-size: var(--button-height); font-size: var(--text-lg); }
    .search-field--large .search-field__submit { inline-size: var(--button-height); }

    /* ── Primary navigation ─────────────────────────────────────────────────── */
    .primary-nav { display: none; border-block-end: var(--border-width) solid var(--header-line); background: var(--header-ground); color: var(--header-ink); }
    @media (width >= 64rem) { .primary-nav { display: block; } }
    .primary-nav__list { display: flex; flex-wrap: wrap; column-gap: var(--space-5); list-style: none; }
    .primary-nav__link {
        display: inline-flex;
        align-items: center;
        min-block-size: 3rem;
        text-decoration: none;
        font-weight: var(--font-weight-medium);
        border-block-end: 2px solid transparent;
        margin-block-end: -1px;
    }
    .primary-nav__link:hover { border-block-end-color: var(--color-line-strong); }
    .primary-nav__link[aria-current] { border-block-end-color: var(--header-selected); }
    .primary-nav__link--sale { color: var(--color-sale); }
    .primary-nav .primary-nav__link--sale { color: var(--header-sale); }

    /* Mobile navigation lives in a drawer; the same list, stacked. */
    .drawer-nav { list-style: none; }
    .drawer-nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-block-size: 3.25rem;
        padding-inline: var(--space-1);
        border-block-end: var(--border-width) solid var(--color-line);
        text-decoration: none;
        font-size: var(--text-lg);
        font-weight: var(--font-weight-medium);
    }
    /* The current link is marked by a bar and weight, not by colour alone. */
    .drawer-nav__link[aria-current] { box-shadow: inset 3px 0 0 var(--color-selected); padding-inline-start: var(--space-3); font-weight: var(--font-weight-bold); }

    /* ── Breadcrumbs ────────────────────────────────────────────────────────── */
    .breadcrumbs { padding-block: var(--space-4); font-size: var(--text-sm); }
    .breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); list-style: none; color: var(--color-ink-muted); }
    .breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--space-2); }
    .breadcrumbs__item + .breadcrumbs__item::before {
        content: "";
        inline-size: 0.4rem;
        block-size: 0.4rem;
        border-block-start: 1.5px solid currentColor;
        border-inline-end: 1.5px solid currentColor;
        transform: rotate(45deg);
        margin-inline-end: var(--space-1);
    }
    .breadcrumbs a { color: var(--color-ink); display: inline-block; padding-block: var(--space-2); }
    .breadcrumbs [aria-current] { color: var(--color-ink-muted); }
    /* On a phone only the parent shows, as a way back — the full trail stays in the markup and the JSON-LD. */
    @media (width < 48rem) {
        .breadcrumbs__item { display: none; }
        .breadcrumbs__item:nth-last-child(2) { display: inline-flex; }
        .breadcrumbs__item:nth-last-child(2)::before { display: none; }
        .breadcrumbs__item:nth-last-child(2) a::before { content: "‹ "; }
    }

    /* ── Page heading ───────────────────────────────────────────────────────── */
    .page-head { display: grid; gap: var(--space-3); padding-block: var(--space-6); }
    .breadcrumbs + .page-head { padding-block-start: var(--space-2); }
    /* In a layout with a side column the heading aligns with the column's top. */
    .l-account__content > .page-head:first-child { padding-block-start: 0; }
    .page-head__lead { max-inline-size: var(--measure); color: var(--color-ink-muted); font-size: var(--text-lg); }
    .page-head__meta { color: var(--color-ink-muted); font-size: var(--text-sm); }
    /* a brand's landing page: its logo above the heading, never wider than the measure (W2-32) */
    .page-head__media img { max-block-size: 4rem; inline-size: auto; }

    .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-5); }
    .section-head__title { font-size: var(--text-2xl); }
    .section-head__link { font-weight: var(--font-weight-medium); white-space: nowrap; }

    /* ── Buttons ────────────────────────────────────────────────────────────── */
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-block-size: var(--control-height);
        padding: var(--space-2) var(--space-5);
        border: var(--border-width-control) solid transparent;
        border-radius: var(--radius-control);
        font-weight: var(--button-weight);
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        transition: background-color var(--duration-quick) var(--ease-standard), border-color var(--duration-quick) var(--ease-standard);
    }
    .button--primary {
        min-block-size: var(--button-height);
        background: var(--color-primary);
        color: var(--color-on-primary);
    }
    .button--primary:hover { background: var(--color-primary-hover); }
    .button--secondary {
        background: var(--color-paper);
        color: var(--color-ink);
        border-color: var(--color-line-strong);
    }
    .button--secondary:hover { border-color: var(--color-ink); background: var(--color-sunken); }
    /* No side padding: a quiet button sits on the text edge like a link; its height still meets the target. */
    .button--quiet {
        min-block-size: var(--target-min);
        padding-inline: 0;
        background: transparent;
        color: var(--color-ink);
        font-weight: var(--font-weight-medium);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }
    .button--quiet:hover { text-decoration-thickness: 2px; }
    .button--block { inline-size: 100%; }
    .button--large { min-block-size: 3.5rem; font-size: var(--text-lg); }
    .button:disabled, .button[aria-disabled="true"] {
        background: var(--color-sunken);
        color: var(--color-ink-muted);
        border-color: var(--color-line);
        cursor: not-allowed;
    }
    /* Busy keeps its width: the label stays in the flow, hidden, under the spinner. */
    .button[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
    .button[aria-busy="true"]::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        inline-size: 1.25rem;
        block-size: 1.25rem;
        border: 2px solid var(--color-on-primary);
        border-inline-end-color: transparent;
        border-radius: 50%;
        animation: spin 700ms linear infinite;
    }
    @keyframes spin { to { transform: rotate(1turn); } }

    .icon-button {
        display: inline-grid;
        place-items: center;
        inline-size: var(--target-min);
        block-size: var(--target-min);
        border: 0;
        border-radius: var(--radius-control);
        background: transparent;
        color: var(--color-ink);
    }
    .icon-button:hover { background: var(--color-sunken); }

    .text-link { color: var(--color-ink); font-weight: var(--font-weight-medium); }

    /* ── Form fields ────────────────────────────────────────────────────────── */
    .field { display: grid; gap: var(--space-2); align-content: start; }
    .field__label { font-weight: var(--font-weight-medium); }
    .field__optional { font-weight: var(--font-weight-regular); color: var(--color-ink-muted); }
    .field__hint { font-size: var(--text-sm); color: var(--color-ink-muted); }
    .field__error {
        display: flex;
        gap: var(--space-2);
        align-items: flex-start;
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-danger);
    }

    .input, .select, .textarea {
        inline-size: 100%;
        min-block-size: var(--control-height);
        padding: var(--space-2) var(--space-3);
        border: var(--border-width-control) solid var(--color-line-strong);
        border-radius: var(--radius-control);
        background: var(--color-paper);
        font-size: var(--text-md);
        color: var(--color-ink);
    }
    .textarea { min-block-size: 7rem; resize: vertical; border-radius: var(--radius-box); }
    .select {
        appearance: none;
        padding-inline-end: var(--space-7);
        background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
        background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
        background-size: 0.35rem 0.35rem;
        background-repeat: no-repeat;
    }
    .input:hover, .select:hover, .textarea:hover { border-color: var(--color-ink); }
    .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
        border-color: var(--color-danger);
        box-shadow: inset 0 0 0 1px var(--color-danger);
    }
    .input:disabled { background: var(--color-sunken); color: var(--color-ink-muted); }
    /* Width follows the answer: a postcode field is not as wide as a street. */
    .input--short { max-inline-size: 9rem; }
    .input--medium { max-inline-size: 18rem; }

    .field-row { display: grid; gap: var(--space-4); }
    @media (width >= 48rem) {
        .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .field-row--postcode { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
    }

    .form-stack { display: grid; gap: var(--space-5); }

    /* Checkbox and radio: the native control, sized for a finger, never a painted imitation. */
    .choice {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-1) var(--space-3);
        align-items: start;
        min-block-size: var(--target-min);
        padding-block: var(--space-2);
        cursor: pointer;
    }
    .choice input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--color-selected); }
    .choice__hint { grid-column: 2; font-size: var(--text-sm); color: var(--color-ink-muted); }
    .choice__count { color: var(--color-ink-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

    /* A choice card: one option among a few, each with a consequence (delivery, payment). */
    .choice-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: var(--space-1) var(--space-3);
        align-items: start;
        padding: var(--space-4);
        border: var(--border-width-control) solid var(--color-line-strong);
        border-radius: var(--radius-box);
        background: var(--color-paper);
        cursor: pointer;
    }
    .choice-card + .choice-card { margin-block-start: var(--space-2); }
    .choice-card input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--color-selected); }
    .choice-card__title { font-weight: var(--font-weight-bold); }
    .choice-card__detail { grid-column: 2; font-size: var(--text-sm); color: var(--color-ink-muted); }
    .choice-card__price { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .choice-card__price--free { color: var(--color-success); }
    .choice-card:hover { border-color: var(--color-ink); }
    .choice-card:has(input:checked) { border-color: var(--color-selected); box-shadow: inset 0 0 0 1px var(--color-selected); background: var(--color-primary-soft); }
    .choice-card:has(input:disabled) { cursor: not-allowed; color: var(--color-ink-muted); background: var(--color-sunken); }
    .choice-card:has(:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
    .choice-card :focus-visible { outline: none; }

    /* ── Quantity stepper ───────────────────────────────────────────────────── */
    .quantity { display: grid; gap: var(--space-2); }
    .quantity__label { font-weight: var(--font-weight-medium); }
    .quantity__control {
        display: inline-grid;
        grid-template-columns: var(--target-min) minmax(2.5rem, 5.5rem) auto var(--target-min);
        align-items: center;
        inline-size: fit-content;
        max-inline-size: 100%;
        border: var(--border-width-control) solid var(--color-line-strong);
        border-radius: var(--radius-control);
        background: var(--color-paper);
    }
    .quantity__step {
        display: grid;
        place-items: center;
        block-size: var(--target-min);
        border: 0;
        background: transparent;
        color: var(--color-ink);
        border-radius: var(--radius-control);
    }
    .quantity__step:hover { background: var(--color-sunken); }
    .quantity__step:disabled { color: var(--color-line-strong); cursor: not-allowed; background: transparent; }
    .quantity__input {
        inline-size: 100%;
        block-size: var(--target-min);
        border: 0;
        background: transparent;
        text-align: end;
        font-weight: var(--font-weight-bold);
        font-variant-numeric: tabular-nums;
        -moz-appearance: textfield;
        appearance: textfield;
    }
    .quantity__input::-webkit-inner-spin-button, .quantity__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .quantity__unit { padding-inline: var(--space-1) var(--space-2); color: var(--color-ink-muted); }
    .quantity__hint { font-size: var(--text-sm); color: var(--color-ink-muted); }
    .quantity--compact .quantity__control { grid-template-columns: var(--target-min) 3.5rem auto var(--target-min); }

    /* ── Price ──────────────────────────────────────────────────────────────── */
    .price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); color: var(--color-price); font-variant-numeric: tabular-nums; }
    .price__current { font-weight: var(--font-weight-bold); font-size: var(--text-lg); white-space: nowrap; }
    .price__per { font-weight: var(--font-weight-regular); color: var(--color-ink-muted); font-size: 0.85em; margin-inline-start: 0.2em; }
    .price__from { font-weight: var(--font-weight-regular); font-size: var(--text-sm); color: var(--color-ink-muted); }
    .price__compare { color: var(--color-ink-muted); font-size: var(--text-sm); white-space: nowrap; }
    .price__compare-label { color: var(--color-ink-muted); font-size: var(--text-xs); }
    .price--sale .price__current { color: var(--color-sale); }
    .price--large .price__current { font-size: var(--text-3xl); letter-spacing: var(--tracking-display); line-height: 1.1; }
    .price--large .price__compare { font-size: var(--text-md); }
    .price--on-request .price__current { font-size: var(--text-md); }
    .price-notes { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }

    /* ── Badge ──────────────────────────────────────────────────────────────── */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        min-block-size: 1.5rem;
        padding-inline: var(--space-2);
        border-radius: var(--radius-pill);
        background: var(--color-paper);
        color: var(--color-ink);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        line-height: 1;
        white-space: nowrap;
    }
    .badge--sale { background: var(--color-sale); color: var(--color-on-sale); }
    .badge--new { background: var(--color-ink); color: var(--color-paper); }
    .badge--neutral { background: var(--color-sunken); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line); }
    .badge--success { background: var(--color-success-soft); color: var(--color-success); }
    .badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
    .badge--info { background: var(--color-info-soft); color: var(--color-info); }
    .badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }

    /* ── Stock ──────────────────────────────────────────────────────────────── */
    .stock { display: inline-flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
    .stock::before {
        content: "";
        flex: none;
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-radius: var(--radius-swatch);
        background: currentColor;
        transform: translateY(-0.05em);
    }
    .stock--in { color: var(--color-stock-in); }
    .stock--low { color: var(--color-stock-low); }
    .stock--out { color: var(--color-stock-out); }
    .stock--out::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
    .stock--backorder { color: var(--color-info); }

    /* ── Media frame ────────────────────────────────────────────────────────── */
    .media {
        display: block;
        position: relative;
        aspect-ratio: var(--media-ratio);
        overflow: hidden;
        border-radius: var(--radius-media);
        background: var(--color-sunken);
    }
    .media > img, .media > .media__fill { inline-size: 100%; block-size: 100%; object-fit: var(--media-fit); }
    .media--wide { aspect-ratio: 16 / 9; }
    .media--hero { aspect-ratio: 3 / 2; }
    @media (width >= 64rem) { .media--hero { aspect-ratio: 5 / 4; } }

    /* ── Product card ───────────────────────────────────────────────────────── */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--grid-gap);
        list-style: none;
    }
    @media (width >= 48rem) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (width >= 80rem) { .product-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media (width >= 64rem) { .product-grid--full { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

    /* On a phone a "row" of products scrolls sideways and shows a sliver of the next card. */
    .product-rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(9.5rem, 40%);
        gap: var(--grid-gap);
        margin-inline: calc(-1 * var(--gutter));
        padding-inline: var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        padding-block-end: var(--space-4);
        list-style: none;
    }
    .product-rail > * { scroll-snap-align: start; }
    @media (width >= 64rem) {
        .product-rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; }
    }

    .product-card { position: relative; display: grid; gap: var(--card-gap); align-content: start; }
    .product-card__media { transition: opacity var(--duration-base) var(--ease-standard); }
    .product-card__badges { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-1); z-index: 1; }
    .product-card__body { display: grid; gap: var(--space-1); }
    .product-card__title { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--font-weight-medium); letter-spacing: 0; line-height: var(--leading-snug); }
    .product-card__link { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    /* The whole card is one link: the title's link stretches over it; nothing else in the card is a link. */
    .product-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
    .product-card__link:focus-visible { outline: none; }
    /* The focused card rises above its neighbours, so a theme that sets cards edge to edge cannot paint over the ring. */
    .product-card:has(.product-card__link:focus-visible) { z-index: 3; outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--space-1); border-radius: var(--radius-media); }
    .product-card:hover .product-card__link { text-decoration: underline; }
    .product-card:hover .product-card__media { opacity: 0.92; }
    .product-card__meta { font-size: var(--text-sm); color: var(--color-ink-muted); }
    .product-card__price { margin-block-start: var(--space-1); }
    .product-card__swatches { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-ink-muted); }
    .product-card__swatch { inline-size: 0.875rem; block-size: 0.875rem; border-radius: var(--radius-swatch); background: var(--swatch); box-shadow: inset 0 0 0 1px var(--color-swatch-edge); }
    /* A secondary action on a card (quick add) sits above the stretched link. */
    .product-card__action { position: relative; z-index: 2; justify-self: start; }

    /* ── Listing toolbar, filters, chips ────────────────────────────────────── */
    .listing-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3) var(--space-4);
        padding-block-end: var(--space-4);
        margin-block-end: var(--space-5);
        border-block-end: var(--border-width) solid var(--color-line);
    }
    .listing-toolbar__count { color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
    .listing-toolbar__sort { display: flex; align-items: center; gap: var(--space-2); }
    .listing-toolbar__sort .select { inline-size: auto; }
    .listing-toolbar__filter-toggle { display: inline-flex; }
    /* Phone: count on its own line, then filter and sort side by side, each half the width. The sort label is hidden
       visually only — the options name themselves ("Od najlacnejších"). */
    @media (width < 64rem) {
        .listing-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .listing-toolbar__count { grid-column: 1 / -1; font-size: var(--text-sm); }
        .listing-toolbar__sort label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
        .listing-toolbar__sort .select { inline-size: 100%; }
    }
    @media (width >= 64rem) { .listing-toolbar__filter-toggle { display: none; } }

    .filters { display: grid; align-content: start; }
    .filters__title { font-size: var(--text-lg); font-family: var(--font-body); letter-spacing: 0; padding-block-end: var(--space-3); }
    .filters__group { border-block-start: var(--border-width) solid var(--color-line); }
    .filters__group:last-of-type { border-block-end: var(--border-width) solid var(--color-line); }
    .filters__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-block-size: 3.25rem;
        font-weight: var(--font-weight-bold);
        cursor: pointer;
        list-style: none;
    }
    .filters__summary::-webkit-details-marker { display: none; }
    .filters__summary .icon { transition: transform var(--duration-quick) var(--ease-standard); }
    .filters__group[open] .filters__summary .icon { transform: rotate(180deg); }
    .filters__options { display: grid; padding-block-end: var(--space-3); list-style: none; }
    .filters__swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block-end: var(--space-4); list-style: none; }
    .filters__range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); padding-block-end: var(--space-4); }
    .filters__actions { display: grid; gap: var(--space-2); padding-block-start: var(--space-4); }

    .chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin-block-end: var(--space-5); }
    .chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-block-size: var(--target-min);
        padding-inline: var(--space-3) var(--space-2);
        border: var(--border-width) solid var(--color-line-strong);
        border-radius: var(--radius-pill);
        background: var(--color-paper);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        text-decoration: none;
        white-space: nowrap;
        color: var(--color-ink);
    }
    .chip:hover { border-color: var(--color-ink); }
    .chip .icon { inline-size: 1rem; block-size: 1rem; }
    .chip--nav { padding-inline: var(--space-4); }
    .chip--nav[aria-current] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
    .chip-list--scroll { flex-wrap: nowrap; overflow-x: auto; padding-block-end: var(--space-2); scrollbar-width: thin; }
    .chip-list--scroll .chip { flex: none; }

    /* ── Pagination & load more ─────────────────────────────────────────────── */
    .load-more { display: grid; justify-items: center; gap: var(--space-3); margin-block-start: var(--space-7); text-align: center; }
    .load-more__progress { color: var(--color-ink-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
    .load-more__bar { inline-size: min(16rem, 100%); block-size: 0.25rem; border-radius: var(--radius-pill); background: var(--color-line); overflow: hidden; }
    .load-more__bar span { display: block; block-size: 100%; inline-size: var(--progress); background: var(--color-ink); }
    .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); list-style: none; margin-block-start: var(--space-4); }
    .pagination a, .pagination span {
        display: inline-grid;
        place-items: center;
        min-inline-size: var(--target-min);
        min-block-size: var(--target-min);
        padding-inline: var(--space-2);
        border-radius: var(--radius-control);
        text-decoration: none;
        font-variant-numeric: tabular-nums;
    }
    .pagination a:hover { background: var(--color-sunken); }
    .pagination [aria-current] { background: var(--color-ink); color: var(--color-paper); font-weight: var(--font-weight-bold); }

    /* ── Gallery ────────────────────────────────────────────────────────────── */
    .gallery { display: grid; gap: var(--space-3); }
    .gallery__stage { position: relative; }
    .gallery__slides {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        list-style: none;
        border-radius: var(--radius-media);
    }
    .gallery__slides::-webkit-scrollbar { display: none; }
    .gallery__slides > li { scroll-snap-align: start; }
    .gallery__counter {
        position: absolute;
        inset-block-end: var(--space-3);
        inset-inline-end: var(--space-3);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-pill);
        background: var(--color-paper);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        font-variant-numeric: tabular-nums;
    }
    .gallery__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); list-style: none; }
    .gallery__thumb {
        display: block;
        inline-size: 100%;
        padding: 0;
        border: 0;
        border-radius: var(--radius-media);
        background: none;
        box-shadow: 0 0 0 1px var(--color-line);
    }
    .gallery__thumb[aria-current] { box-shadow: 0 0 0 2px var(--color-ink); }
    @media (width >= 64rem) {
        .gallery { grid-template-columns: 5rem minmax(0, 1fr); align-items: start; }
        .gallery__thumbs { grid-template-columns: 1fr; grid-row: 1; }
        .gallery__counter { display: none; }
    }

    /* ── Buy box ────────────────────────────────────────────────────────────── */
    .buybox { display: grid; gap: var(--space-5); }
    .buybox__head { display: grid; gap: var(--space-2); }
    .buybox__title { font-size: var(--text-3xl); }
    .buybox__brand { color: var(--color-ink-muted); font-size: var(--text-sm); }
    .buybox__summary { color: var(--color-ink-muted); max-inline-size: var(--measure); }
    /* the product's brand logo beside its name (W2-32) */
    .buybox__brand-logo { max-block-size: 1.5rem; inline-size: auto; }
    .buybox__rating { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
    .buybox__pricing { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-block: var(--border-width) solid var(--color-line); }
    .buybox__purchase { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
    @media (width >= 30rem) { .buybox__purchase { grid-template-columns: auto minmax(0, 1fr); align-items: end; } }
    .buybox__purchase .button--primary { min-block-size: var(--button-height); }
    .buybox__secondary { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
    .buybox__sku { font-size: var(--text-sm); color: var(--color-ink-muted); }

    .option-group { display: grid; gap: var(--space-3); }
    .option-group__legend { font-weight: var(--font-weight-medium); margin-block-end: var(--space-3); }
    .option-group__value { font-weight: var(--font-weight-regular); color: var(--color-ink-muted); }
    .option-group__options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .option-group__help { font-size: var(--text-sm); }

    .option-tile { position: relative; }
    .option-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
    .option-tile__label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 3.5rem;
        min-block-size: var(--control-height);
        padding-inline: var(--space-4);
        border: var(--border-width-control) solid var(--color-line-strong);
        border-radius: var(--radius-control);
        background: var(--color-paper);
        font-weight: var(--font-weight-medium);
        font-variant-numeric: tabular-nums;
    }
    .option-tile:hover .option-tile__label { border-color: var(--color-ink); }
    .option-tile input:checked + .option-tile__label { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); background: var(--color-sunken); }
    .option-tile input:focus-visible + .option-tile__label { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
    /* Unavailable stays visible and selectable to learn why — struck, not hidden. */
    .option-tile--unavailable .option-tile__label { color: var(--color-ink-muted); border-style: dashed; text-decoration: line-through; }

    .swatch-option { position: relative; }
    .swatch-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
    .swatch-option__chip {
        display: block;
        inline-size: var(--target-min);
        block-size: var(--target-min);
        border-radius: var(--radius-swatch);
        background: var(--swatch);
        box-shadow: inset 0 0 0 1px var(--color-swatch-edge);
        border: 3px solid var(--color-paper);
        outline: 1px solid transparent;
    }
    .swatch-option:hover .swatch-option__chip { outline-color: var(--color-line-strong); }
    .swatch-option input:checked + .swatch-option__chip { outline: 2px solid var(--color-ink); }
    .swatch-option input:focus-visible + .swatch-option__chip { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
    .swatch-option--unavailable .swatch-option__chip { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--color-ink-muted) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), var(--swatch); opacity: 0.55; }

    .assurance-list { display: grid; gap: var(--space-3); list-style: none; font-size: var(--text-sm); }
    .assurance-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
    .assurance-list strong { display: block; font-size: var(--text-md); }
    .assurance-list .icon { color: var(--color-ink); }

    /* Mobile only: the purchase follows the reader once the buy box has scrolled away. */
    .sticky-buy {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: var(--z-sticky);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
        background: var(--color-surface);
        box-shadow: var(--shadow-sticky);
    }
    .sticky-buy__name { font-size: var(--text-sm); color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    @media (width >= 64rem) { .sticky-buy { display: none; } }

    /* ── Disclosure (PDP sections, FAQ) ─────────────────────────────────────── */
    .disclosure { border-block-start: var(--border-width) solid var(--color-line); }
    .disclosure:last-child { border-block-end: var(--border-width) solid var(--color-line); }
    .disclosure__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        min-block-size: 3.75rem;
        font-family: var(--font-display);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-lg);
        cursor: pointer;
        list-style: none;
    }
    .disclosure__summary::-webkit-details-marker { display: none; }
    .disclosure__summary .icon { transition: transform var(--duration-quick) var(--ease-standard); }
    .disclosure[open] > .disclosure__summary .icon { transform: rotate(45deg); }
    .disclosure__body { padding-block-end: var(--space-6); }

    /* ── Rich text from the catalog ─────────────────────────────────────────── */
    .prose { max-inline-size: var(--measure); }
    .prose > * + * { margin-block-start: var(--space-4); }
    .prose h2, .prose h3 { margin-block-start: var(--space-6); font-size: var(--text-xl); }
    .prose ul, .prose ol { padding-inline-start: var(--space-5); }
    .prose li + li { margin-block-start: var(--space-1); }

    .spec-table { inline-size: 100%; max-inline-size: 40rem; font-size: var(--text-sm); }
    .spec-table th, .spec-table td { padding: var(--space-3) var(--space-2); text-align: start; vertical-align: top; border-block-end: var(--border-width) solid var(--color-line); }
    .spec-table th { inline-size: 40%; font-weight: var(--font-weight-medium); color: var(--color-ink-muted); }

    /* ── Rating (module-owned data, foundation-owned look) ──────────────────── */
    .rating { display: inline-flex; align-items: center; gap: var(--space-2); }
    .rating__stars { display: inline-flex; color: var(--color-ink); }
    .rating__stars .icon { inline-size: 1rem; block-size: 1rem; }
    .rating__stars .icon--empty { color: var(--color-line-strong); }

    /* ── Cart line ──────────────────────────────────────────────────────────── */
    .cart-lines { list-style: none; border-block-start: var(--border-width) solid var(--color-line); }
    .cart-line {
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        grid-template-areas: "media info" "media quantity" "notice notice" "total total" "actions actions";
        gap: var(--space-3) var(--space-4);
        padding-block: var(--space-5);
        border-block-end: var(--border-width) solid var(--color-line);
    }
    .cart-line__media { grid-area: media; }
    .cart-line__info { grid-area: info; display: grid; gap: var(--space-1); align-content: start; }
    .cart-line__title { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--font-weight-bold); letter-spacing: 0; }
    .cart-line__title a { text-decoration: none; }
    .cart-line__title a:hover { text-decoration: underline; }
    .cart-line__variant, .cart-line__unit-price { font-size: var(--text-sm); color: var(--color-ink-muted); }
    /* A promotion's reduction on the line (CART-19, W3-02): named, with its figure in the sale colour */
    .cart-line__adjustment { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
    .cart-line__adjustment .price--sale { color: var(--color-sale); }
    .cart-line__quantity { grid-area: quantity; }
    .cart-line__total { grid-area: total; display: flex; justify-content: space-between; align-items: baseline; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
    .cart-line__total-label { font-weight: var(--font-weight-regular); color: var(--color-ink-muted); font-size: var(--text-sm); }
    .cart-line__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
    /* A blocker sits right under the line's quantity, full width, so a phone does not squeeze it into one column. */
    .cart-line__notice { grid-area: notice; }
    .cart-line--saved { opacity: 0.85; }
    @media (width >= 48rem) {
        .cart-line {
            grid-template-columns: 7.5rem minmax(0, 1fr) auto 8rem;
            grid-template-areas: "media info quantity total" "media notice notice notice" "media actions actions actions";
            align-items: start;
        }
        .cart-line__total { flex-direction: column; align-items: flex-end; gap: var(--space-1); }
        .cart-line__actions { align-self: end; }
    }

    /* ── Order summary ──────────────────────────────────────────────────────── */
    .order-summary {
        display: grid;
        gap: var(--space-4);
        padding: var(--space-5);
        border-radius: var(--radius-panel);
        background: var(--color-sunken);
    }
    .order-summary__title { font-size: var(--text-xl); }
    .order-summary__rows { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); font-variant-numeric: tabular-nums; }
    .order-summary__rows dt { color: var(--color-ink); }
    .order-summary__rows dd { text-align: end; font-weight: var(--font-weight-medium); }
    .order-summary__rows .is-discount { color: var(--color-sale); }
    /* a promotion's reduction beside the line it reduced (W3-02) */
    .order-summary__item .is-discount { display: block; color: var(--color-sale); }
    .order-summary__total {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        gap: var(--space-1) var(--space-4);
        padding-block-start: var(--space-4);
        border-block-start: var(--border-width) solid var(--color-line-strong);
    }
    .order-summary__total dt { font-weight: var(--font-weight-bold); font-size: var(--text-lg); }
    .order-summary__total dd { font-weight: var(--font-weight-bold); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display); }
    .order-summary__vat { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-ink-muted); }
    .order-summary__items { display: grid; gap: var(--space-3); list-style: none; }
    .order-summary__item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
    .order-summary__item-media { position: relative; }
    .order-summary__item-qty {
        position: absolute;
        inset-block-start: -0.4rem;
        inset-inline-end: -0.4rem;
        min-inline-size: 1.4rem;
        block-size: 1.4rem;
        padding-inline: 0.3rem;
        border-radius: var(--radius-pill);
        background: var(--color-ink-muted);
        color: var(--color-paper);
        font-size: 0.72rem;
        line-height: 1.4rem;
        text-align: center;
        font-weight: var(--font-weight-bold);
    }
    .order-summary__item-name { font-weight: var(--font-weight-medium); }
    .order-summary__item-detail { display: block; color: var(--color-ink-muted); }
    .order-summary__item-price { font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }

    /* A mobile checkout shows the summary as a disclosure above the form, collapsed, with the total in its label. */
    .summary-toggle { border-block: var(--border-width) solid var(--color-line); background: var(--color-sunken); }
    .summary-toggle__summary { display: flex; align-items: center; justify-content: space-between; min-block-size: 3.5rem; font-weight: var(--font-weight-medium); cursor: pointer; list-style: none; }
    .summary-toggle__summary::-webkit-details-marker { display: none; }
    .summary-toggle__total { font-weight: var(--font-weight-bold); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
    .summary-toggle__label { display: inline-flex; align-items: center; gap: var(--space-2); }
    .summary-toggle__label .icon { transition: transform var(--duration-quick) var(--ease-standard); }
    .summary-toggle[open] .summary-toggle__label .icon { transform: rotate(180deg); }
    .summary-toggle .order-summary { padding: 0 var(--gutter) var(--space-5); border-radius: 0; background: transparent; }
    @media (width >= 64rem) { .summary-toggle { display: none; } }

    .shipping-progress { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
    .shipping-progress__bar { block-size: 0.375rem; border-radius: var(--radius-pill); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-line); overflow: hidden; }
    .shipping-progress__bar span { display: block; block-size: 100%; inline-size: var(--progress); background: var(--color-success); border-radius: inherit; }
    /* CART-60's mini-cart slot: the nudge under the header's cart, one short line */
    .site-header__actions .shipping-progress { gap: var(--space-1); max-inline-size: 12rem; font-size: var(--text-xs); color: var(--color-ink-muted); }

    .coupon > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--target-min); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; list-style: none; }
    .coupon > summary::-webkit-details-marker { display: none; }
    .coupon__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding-block-start: var(--space-2); }

    .payment-methods { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
    .payment-methods li {
        display: inline-flex;
        align-items: center;
        min-block-size: 1.75rem;
        padding-inline: var(--space-2);
        border: var(--border-width) solid var(--color-line-strong);
        border-radius: var(--radius-control);
        background: var(--color-paper);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-bold);
        color: var(--color-ink);
    }

    /* ── Checkout ───────────────────────────────────────────────────────────── */
    .checkout-header { border-block-end: var(--border-width) solid var(--header-line); background: var(--header-ground); color: var(--header-ink); }
    .checkout-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: 4.5rem; }
    .checkout-header__secure { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--header-ink-muted); }
    .checkout-header__help { display: none; font-size: var(--text-sm); }
    @media (width >= 48rem) { .checkout-header__help { display: inline-flex; align-items: center; gap: var(--space-2); } }

    /* Numbered, because it is a sequence the buyer walks. */
    .steps { display: flex; gap: var(--space-2); list-style: none; counter-reset: step; font-size: var(--text-sm); margin-block: var(--space-5); }
    .steps__item { flex: 1; display: grid; gap: var(--space-2); align-content: start; counter-increment: step; color: var(--color-ink-muted); }
    .steps__item::before { content: ""; block-size: 0.25rem; border-radius: var(--radius-pill); background: var(--color-line); }
    .steps__item--done { color: var(--color-ink); }
    .steps__item--done::before, .steps__item[aria-current]::before { background: var(--color-ink); }
    .steps__item[aria-current] { color: var(--color-ink); font-weight: var(--font-weight-bold); }
    .steps__label::before { content: counter(step) ". "; }
    .steps__meta { display: block; font-size: var(--text-xs); font-weight: var(--font-weight-regular); color: var(--color-ink-muted); }
    /* Four or more steps (an order's states) do not fit a phone side by side: they stack, the bar becomes a mark. */
    @media (width < 48rem) {
        .steps--stack { flex-direction: column; gap: var(--space-2); }
        .steps--stack .steps__item { grid-template-columns: var(--space-5) minmax(0, 1fr); align-items: center; gap: var(--space-3); }
    }

    .checkout-section { padding-block: var(--space-6); border-block-end: var(--border-width) solid var(--color-line); }
    .checkout-section:first-child { padding-block-start: 0; }
    .checkout-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-5); }
    .checkout-section__title { font-size: var(--text-xl); }
    .checkout-section--done .checkout-section__head { margin-block-end: var(--space-2); }
    .checkout-section--done .checkout-section__title::after {
        content: "";
        display: inline-block;
        inline-size: 0.5rem;
        block-size: 0.9rem;
        margin-inline-start: var(--space-3);
        border-inline-end: 2.5px solid var(--color-success);
        border-block-end: 2.5px solid var(--color-success);
        transform: rotate(45deg) translateY(-0.2em);
    }
    .checkout-section__recap { color: var(--color-ink-muted); font-size: var(--text-sm); line-height: var(--leading-body); }
    .checkout-section--upcoming .checkout-section__title { color: var(--color-ink-muted); }
    .checkout-submit { display: grid; gap: var(--space-3); margin-block-start: var(--space-5); }
    .form-stack > .checkout-submit { margin-block-start: 0; }
    /* The legend of a fieldset inside a checkout section (delivery method, address, payment method): one step below
       the section title, so an address group does not read as one more field. */
    .form-legend { font-size: var(--text-lg); font-weight: var(--font-weight-bold); line-height: var(--leading-snug); margin-block-end: var(--space-3); }

    /* Bank-transfer details beside their PAY by square code. The code stays square whatever --media-ratio says and sits
       on paper with a quiet zone and an edge, because a banking app has to read it on any theme's ground. */
    .bank-transfer { display: grid; gap: var(--space-5); align-items: start; }
    @media (width >= 48rem) { .bank-transfer { grid-template-columns: minmax(0, 1fr) auto; } }
    /* The figure is as wide as its code (the 176 px image) and no wider: its caption wraps under the code instead of
       widening the column and squeezing the facts beside it (#367). */
    .bank-transfer__code { display: grid; gap: var(--space-2); justify-items: center; inline-size: 176px; max-inline-size: 100%; font-size: var(--text-sm); color: var(--color-ink-muted); text-align: center; }
    .bank-transfer__qr {
        inline-size: 9rem;
        aspect-ratio: 1;
        padding: var(--space-3);
        border: var(--border-width-control) solid var(--color-line-strong);
        border-radius: var(--radius-box);
        background: var(--color-paper);
    }
    .checkout-submit__legal { font-size: var(--text-sm); color: var(--color-ink-muted); }

    /* ── Alerts & toasts ────────────────────────────────────────────────────── */
    .alert {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-1) var(--space-3);
        padding: var(--space-4);
        border-radius: var(--radius-panel);
        border-inline-start: 4px solid currentColor;
        background: var(--color-info-soft);
        color: var(--color-info);
    }
    .alert__title { font-weight: var(--font-weight-bold); }
    .alert__body { grid-column: 2; color: var(--color-ink); }
    .alert--success { background: var(--color-success-soft); color: var(--color-success); }
    .alert--warning { background: var(--color-warning-soft); color: var(--color-warning); }
    .alert--danger { background: var(--color-danger-soft); color: var(--color-danger); }

    /* ── Drawer (popover-based: opens without JavaScript, Esc closes, focus returns) ─ */
    .drawer {
        position: fixed;
        inset: 0 auto 0 0;
        inline-size: min(26rem, 92vw);
        block-size: 100dvh;
        max-block-size: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: var(--color-surface);
        color: var(--color-ink);
        box-shadow: var(--shadow-overlay);
        overflow: auto;
    }
    .drawer--end { inset: 0 0 0 auto; }
    .drawer::backdrop { background: var(--backdrop); }
    .drawer:popover-open { display: grid; grid-template-rows: auto 1fr auto; }
    .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); border-block-end: var(--border-width) solid var(--color-line); }
    .drawer__title { font-size: var(--text-xl); }
    .drawer__body { padding: var(--space-5); overflow: auto; }
    .drawer__foot { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-block-start: var(--border-width) solid var(--color-line); }
    @media (prefers-reduced-motion: no-preference) {
        .drawer:popover-open { animation: drawer-in var(--duration-base) var(--ease-standard); }
        .drawer--end:popover-open { animation-name: drawer-in-end; }
    }
    @keyframes drawer-in { from { transform: translateX(-100%); } }
    @keyframes drawer-in-end { from { transform: translateX(100%); } }

    /* On the desktop the filter drawer is simply the sidebar: same markup, no top layer. */
    @media (width >= 64rem) {
        .drawer--sidebar, .drawer--sidebar:popover-open {
            position: static;
            display: block;
            inline-size: auto;
            block-size: auto;
            box-shadow: none;
            overflow: visible;
            background: transparent;
            animation: none;
        }
        .drawer--sidebar .drawer__head { padding: 0 0 var(--space-3); border: 0; }
        .drawer--sidebar .drawer__head .icon-button, .drawer--sidebar .drawer__foot { display: none; }
        .drawer--sidebar .drawer__title { font-size: var(--text-lg); }
        .drawer--sidebar .drawer__body { padding: 0; overflow: visible; }
    }

    /* The add-to-cart confirmation: says what was added, offers the cart, never redirects. */
    .cart-toast {
        position: fixed;
        inset: auto var(--gutter) var(--space-5) auto;
        inline-size: min(24rem, calc(100vw - 2 * var(--gutter)));
        /* the content's height: Safari (26.5) sizes the popover's own `height: fit-content` to the viewport here */
        block-size: auto;
        margin: 0;
        padding: var(--space-5);
        border: 0;
        border-radius: var(--radius-panel);
        background: var(--color-surface);
        color: var(--color-ink);
        box-shadow: var(--shadow-overlay);
    }
    .cart-toast:popover-open { display: grid; gap: var(--space-4); }
    .cart-toast__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--color-success); font-weight: var(--font-weight-bold); }
    .cart-toast__title { display: inline-flex; align-items: center; gap: var(--space-2); }
    .cart-toast__item { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
    .cart-toast__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

    /* ── Empty state ────────────────────────────────────────────────────────── */
    .empty-state { display: grid; justify-items: center; gap: var(--space-4); max-inline-size: 32rem; margin-inline: auto; padding-block: var(--space-8); text-align: center; }
    .empty-state__title { font-size: var(--text-2xl); }
    .empty-state__body { color: var(--color-ink-muted); }
    /* .empty-state centres its children at their own width; a search field and a chip row take the full width. */
    .empty-state__search { justify-self: stretch; }
    .empty-state__chips { justify-content: center; margin-block-end: 0; }

    /* ── Home ───────────────────────────────────────────────────────────────── */
    .hero { display: grid; gap: var(--space-5); align-items: center; padding-block-start: var(--space-4); }
    .hero__content { display: grid; gap: var(--space-4); justify-items: start; max-inline-size: 34rem; }
    .hero__title { font-size: var(--text-4xl); }
    .hero__lead { font-size: var(--text-lg); color: var(--color-ink-muted); }
    .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
    @media (width >= 64rem) {
        .hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); padding-block-start: var(--space-6); }
        .hero__content { grid-column: 1 / span 5; grid-row: 1; }
        .hero__media { grid-column: 6 / -1; grid-row: 1; }
    }

    .category-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--grid-gap); list-style: none; }
    @media (width >= 48rem) { .category-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (width >= 64rem) { .category-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
    .category-tile { position: relative; display: grid; gap: var(--space-3); }
    .category-tile__link { font-weight: var(--font-weight-bold); text-decoration: none; }
    .category-tile__link::after { content: ""; position: absolute; inset: 0; }
    .category-tile:hover .category-tile__link { text-decoration: underline; }
    .category-tile:has(:focus-visible) { z-index: 3; outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--space-1); border-radius: var(--radius-media); }
    .category-tile__link:focus-visible { outline: none; }
    .category-tile__count { display: block; font-weight: var(--font-weight-regular); font-size: var(--text-sm); color: var(--color-ink-muted); }

    .feature-band { display: grid; gap: var(--space-5); align-items: center; padding: var(--space-5); border-radius: var(--radius-panel); background: var(--color-sunken); }
    .feature-band__content { display: grid; gap: var(--space-3); justify-items: start; max-inline-size: 30rem; }
    .feature-band__title { font-size: var(--text-2xl); }
    @media (width >= 64rem) {
        .feature-band { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); padding: var(--space-6); }
        .feature-band__media { grid-column: 1 / span 6; }
        .feature-band__content { grid-column: 8 / -1; }
    }

    /* ── Assurances (the promise strip above the footer) ────────────────────── */
    .assurances { border-block: var(--border-width) solid var(--color-line); }
    .assurances__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--grid-gap); padding-block: var(--space-6); list-style: none; font-size: var(--text-sm); }
    @media (width >= 64rem) { .assurances__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .assurances__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); align-items: start; }
    .assurances__item strong { font-size: var(--text-md); }
    .assurances__item span { grid-column: 2; color: var(--color-ink-muted); }

    /* ── Footer ─────────────────────────────────────────────────────────────── */
    .site-footer { background: var(--footer-ground); color: var(--footer-ink); font-size: var(--text-sm); }
    .site-footer__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--grid-gap); padding-block: var(--space-7); }
    @media (width >= 64rem) { .site-footer__columns { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
    .site-footer__column { display: grid; gap: var(--space-3); align-content: start; }
    .site-footer__column--wide { grid-column: 1 / -1; }
    @media (width >= 64rem) {
        .site-footer__column { grid-column: span 2; }
        .site-footer__column--wide { grid-column: span 4; }
    }
    .site-footer__heading { font-family: var(--font-body); font-size: var(--text-md); letter-spacing: 0; font-weight: var(--font-weight-bold); }
    .site-footer__links { display: grid; list-style: none; }
    .site-footer__links a { display: inline-flex; align-items: center; min-block-size: 2rem; text-decoration: none; }
    .site-footer__links a:hover { text-decoration: underline; }
    .site-footer__contact { display: grid; gap: var(--space-2); font-style: normal; }
    .site-footer__contact a { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 2rem; font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
    .site-footer__column { min-inline-size: 0; }
    .site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); border-block-start: var(--border-width) solid var(--color-line); color: var(--color-ink-muted); }
    .site-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); list-style: none; }
    .site-footer__legal-links a { color: var(--footer-ink); }

    .newsletter { display: grid; gap: var(--space-3); }
    .newsletter__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }

    .locale-switch { display: inline-flex; align-items: center; gap: var(--space-1); }
    .locale-switch .select { color: inherit; min-block-size: 2.25rem; padding-block: 0; padding-inline: 0 var(--space-6); border-color: transparent; background-color: transparent; font-size: var(--text-sm); inline-size: auto; background-position: calc(100% - 0.95rem) 50%, calc(100% - 0.6rem) 50%; }
    .locale-switch .select:hover { border-color: transparent; text-decoration: underline; }
    /* The open list is the system's popup on a light ground, whatever the bar's ink: its options keep the page ink. */
    .locale-switch .select option { color: var(--color-ink); background: var(--color-paper); }

    /* ── Account ────────────────────────────────────────────────────────────── */
    .account-nav { display: grid; list-style: none; border-block-start: var(--border-width) solid var(--color-line); }
    .account-nav a { display: flex; align-items: center; gap: var(--space-3); min-block-size: 3rem; padding-inline: var(--space-2); border-block-end: var(--border-width) solid var(--color-line); text-decoration: none; font-weight: var(--font-weight-medium); }
    .account-nav a:hover { background: var(--color-sunken); }
    .account-nav a[aria-current] { box-shadow: inset 3px 0 0 var(--color-selected); background: var(--color-sunken); }
    /* Below the desktop the same list is a row of pills that scrolls sideways (read as local navigation, like
       .chip--nav), so six full-width rows do not push the page's own content off the first screen. */
    @media (width < 64rem) {
        .account-nav { display: flex; gap: var(--space-2); overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-block-end: var(--space-2); border-block-start: 0; scrollbar-width: thin; }
        .account-nav li { flex: none; }
        .account-nav a { gap: var(--space-2); min-block-size: var(--target-min); padding-inline: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-line-strong); border-radius: var(--radius-pill); font-size: var(--text-sm); white-space: nowrap; }
        .account-nav a[aria-current] { box-shadow: none; background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
        .account-nav .icon { inline-size: 1.125rem; block-size: 1.125rem; }
    }

    .data-table { inline-size: 100%; font-size: var(--text-sm); }
    .data-table th, .data-table td { padding: var(--space-3) var(--space-3); text-align: start; border-block-end: var(--border-width) solid var(--color-line); vertical-align: middle; }
    .data-table thead th { font-weight: var(--font-weight-medium); color: var(--color-ink-muted); border-block-end-color: var(--color-line-strong); }
    .data-table .num { text-align: end; }
    .table-scroll { overflow-x: auto; }
    /* Row actions ("Kúpiť znova", "Detail") at the row's end, so "Detail" lines up down the column. */
    .data-table .data-table__actions { text-align: end; white-space: nowrap; }
    .data-table__actions > * + * { margin-inline-start: var(--space-4); }
    /* Below 48rem each row stacks into one item: cells pair up two to a line, actions on a line of their own. The
       column headers stay for assistive technology, hidden visually. Changing a table's display drops its semantics
       in WebKit, so the markup carries explicit roles (table, rowgroup, row, columnheader, rowheader, cell). */
    @media (width < 48rem) {
        .data-table--stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
        .data-table--stack, .data-table--stack tbody { display: block; }
        .data-table--stack tbody { border-block-start: var(--border-width) solid var(--color-line); }
        .data-table--stack tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-4); border-block-end: var(--border-width) solid var(--color-line); }
        .data-table--stack tbody :is(th, td) { display: block; padding: 0; border: 0; }
        .data-table--stack tbody :is(th, td):nth-child(even) { text-align: end; }
        .data-table--stack tbody .data-table__actions { grid-column: 1 / -1; }
    }

    .panel { padding: var(--space-5); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-panel); background: var(--color-surface); }
    .panel__title { font-size: var(--text-lg); margin-block-end: var(--space-3); }
    .panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-5); }
    @media (width < 48rem) { .panel__actions > .button { flex: 1 1 100%; } }
    .panel-grid { display: grid; gap: var(--grid-gap); }
    /* A page whose content is a form or two (sign in, registration) is narrower than the container. */
    .panel-grid--narrow { max-inline-size: 60rem; }
    /* A password with a worded show/hide toggle beside it: a word leaves room for a longer translation. */
    .password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
    @media (width >= 48rem) { .panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

    /* ── Definition list (order details, addresses) ─────────────────────────── */
    .facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); }
    .facts dt { color: var(--color-ink-muted); }
    .facts dd { font-weight: var(--font-weight-medium); }
}

/* ════════════════════════════════════════════════════════════════════════════════
   utilities — few, and only these
   ════════════════════════════════════════════════════════════════════════════════ */
@layer utilities {
    .visually-hidden:not(:focus):not(:active) {
        position: absolute !important;
        inline-size: 1px !important;
        block-size: 1px !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }
    .muted { color: var(--color-ink-muted); }
    .nowrap { white-space: nowrap; }
}