/* ==========================================================================
   Inmarknet storefront — "Sealed Box"
   Every product presented the way it arrives: matte board planes, navy
   sleeves, printed product lines, one printed seal for "genuine".
   Mobile-first. Tokens first; components below never invent raw values.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
    /* Board and ink */
    --paper: #ffffff;
    --board: #f2f5f8;
    --board-2: #e7ecf1;
    --rule: #d6dee6;
    --rule-strong: #aebccb;
    --ink: #06254a;
    --ink-2: #2a4360;
    --ink-3: #566a80;

    /* Sleeve (navy bands that wrap a section) */
    --sleeve: #06254a;
    --sleeve-2: #0b3160;
    --on-sleeve: #f5f8fb;
    --on-sleeve-2: rgba(245, 248, 251, .78);
    --on-sleeve-rule: rgba(245, 248, 251, .2);
    --on-sleeve-accent: #9dd1f2;
    --stage: #04080f; /* the dark studio ground behind campaign media */
    --scene-ground: #111311; /* matches the phone footage edges */

    /* Action: brand blue, reserved for what you can do */
    --action: #0a6bb5;
    --action-hover: #085c9c;
    --action-press: #064b81;
    --action-wash: #e8f2fa;

    /* Stock states */
    --ok: #17734a;
    --warn: #8a5300;
    --off: #566a80;
    --danger: #b42318;
    --danger-wash: #fbeceb;
    --deal: #b3261e;         /* promotions: sale prices and deal tags */
    --deal-wash: #fdf0ef;

    /* Process inks — only for the true colour of a consumable */
    --ink-cyan: #00a0dc;
    --ink-magenta: #d4007a;
    --ink-yellow: #f2c200;
    --ink-black: #1b1b1b;

    /* Type */
    --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --stretch-display: 116%;
    --stretch-label: 125%;
    --t-hero: clamp(2.5rem, 1.55rem + 4.1vw, 5.15rem);
    --t-1: clamp(2rem, 1.45rem + 2.4vw, 3.35rem);
    --t-2: clamp(1.55rem, 1.25rem + 1.3vw, 2.25rem);
    --t-3: 1.25rem;
    --t-4: 1.0625rem;
    --t-body: 1rem;
    --t-small: .875rem;
    --t-micro: .75rem;

    /* Space */
    --s-1: .25rem;
    --s-2: .5rem;
    --s-3: .75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --gutter: clamp(1rem, .55rem + 2.2vw, 3rem);
    --container: 88rem;
    --section: clamp(3.5rem, 2.4rem + 4.2vw, 7rem);

    /* Edges: die-cut board, restrained corners */
    --radius: 2px;
    --radius-2: 4px;
    --shadow-panel: 0 36px 60px -36px rgba(6, 37, 74, .45), 0 2px 0 rgba(6, 37, 74, .04);

    /* Motion */
    --dur-micro: 120ms;
    --dur-fast: 180ms;
    --dur-base: 260ms;
    --dur-slow: 420ms;
    --dur-cinematic: 700ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-enter: cubic-bezier(.05, .7, .1, 1);
    --ease-exit: cubic-bezier(.3, 0, .8, .15);
    --ease-emphasis: cubic-bezier(.16, 1, .3, 1);

    /* Layers */
    --z-header: 50;
    --z-mega: 60;
    --z-buybar: 70;
    --z-toast: 100;

    --strip-h: 2.25rem;
    --header-h: 4rem;
}

@media (min-width: 64rem) {
    :root { --header-h: 4.5rem; }
}

/* Lenis smooth scrolling (public/js/vendor/lenis.min.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + var(--s-4));
    scrollbar-color: var(--rule-strong) var(--board);
}
body {
    margin: 0;
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    caret-color: var(--action);
}
::selection { background: var(--ink); color: var(--paper); }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 {
    margin: 0;
    font-weight: 700;
    font-stretch: var(--stretch-display);
    letter-spacing: -.02em;
    line-height: 1.04;
    text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
address { font-style: normal; }
kbd { font: inherit; }
[hidden] { display: none !important; }
main:focus { outline: none; }

:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: var(--radius); }
.hero :focus-visible,
.business :focus-visible,
.svc-hero :focus-visible,
.svc-cta :focus-visible,
.footer-help :focus-visible,
.finder :focus-visible,
.auth__sleeve :focus-visible,
.welcome :focus-visible { outline-color: var(--on-sleeve-accent); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed; left: var(--s-4); top: var(--s-4); z-index: calc(var(--z-toast) + 1);
    padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--paper);
    font-weight: 600; text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
    width: min(var(--container), 100% - 2 * var(--gutter));
    margin-inline: auto;
}
.section { padding-block: var(--section); }

.icon { flex: none; }

/* Printed product line: the label language of a box side-panel */
.card__line, .buybox__line, .story__line, .mega__label, .palette__label,
.hero__maker, .svc__name, .error-page__code, .finder__form label, .finder__brands > p,
.page-body__aside h2, .footer-col h2, .spec-group h3, .pdp-overview__highlights h3 {
    font-size: var(--t-micro);
    font-weight: 600;
    font-stretch: var(--stretch-label);
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.35;
}

.section-head {
    display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
    gap: var(--s-4) var(--s-7); margin-bottom: var(--s-6);
}
.section-head h2 { font-size: var(--t-1); max-width: 22ch; }
.section-head > p { max-width: 38ch; color: var(--ink-3); }

.link-arrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-weight: 600; text-decoration: none; color: var(--action);
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow .icon { transition: transform var(--dur-fast) var(--ease-standard); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   3. Buttons and controls
   ------------------------------------------------------------------------- */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 3rem; padding: 0 var(--s-5);
    border: 1px solid transparent; border-radius: var(--radius);
    background: none; font-size: .9375rem; font-weight: 600; font-stretch: 105%;
    line-height: 1; text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                transform var(--dur-micro) var(--ease-standard);
}
.button:active { transform: translateY(1px); }
.button[disabled], .button[aria-busy="true"] { opacity: .6; cursor: progress; }
.button--block { width: 100%; }
.button--action { background: var(--action); color: var(--paper); }
.button--action:hover { background: var(--action-hover); }
.button--action:active { background: var(--action-press); }
.button--ink { background: var(--ink); color: var(--paper); }
.button--ink:hover { background: var(--sleeve-2); }
.button--outline { border-color: var(--rule-strong); color: var(--ink); background: var(--paper); }
.button--outline:hover { border-color: var(--ink); }
.button--ghost { color: var(--ink); padding-inline: var(--s-3); }
.button--ghost:hover { background: var(--board); }
.button--light { background: var(--paper); color: var(--ink); }
.button--light:hover { background: var(--board); }
.button--ghost-light { border-color: var(--on-sleeve-rule); color: var(--on-sleeve); }
.button--ghost-light:hover { border-color: var(--on-sleeve); }

.icon-button {
    display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
    border: 0; border-radius: var(--radius); background: none; color: var(--ink);
    transition: background-color var(--dur-fast) var(--ease-standard);
}
.icon-button:hover { background: var(--board); }
.icon-button--outline { border: 1px solid var(--rule); background: var(--paper); }
.icon-button--outline:hover { border-color: var(--ink); background: var(--paper); }
.icon-button[disabled] { opacity: .35; cursor: default; }

input[type="search"], input[type="number"], input[type="email"], select {
    min-height: 3rem; border: 1px solid var(--rule-strong); border-radius: var(--radius);
    background: var(--paper); padding: 0 var(--s-4);
}
input::placeholder { color: var(--ink-3); opacity: 1; }
input[type="search"]::-webkit-search-cancel-button { appearance: none; }
select {
    appearance: none; padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306254a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.1rem;
}

/* The genuine seal: printed in ink like a box's quality mark */
.seal { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; }
.seal--sm { width: 2.25rem; height: 2.25rem; }
.seal--md { width: 3.5rem; height: 3.5rem; }
.seal--lg { width: 5.25rem; height: 5.25rem; }
.seal__ring {
    position: absolute; inset: 0; border-radius: 50%; background: var(--paper);
    box-shadow: inset 0 0 0 1.5px var(--ink), inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--ink);
}
.seal__face {
    position: relative; display: grid; justify-items: center; gap: 1px; color: var(--ink);
    font-size: .5rem; font-weight: 700; font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase;
}
.seal--sm .seal__word { display: none; }
.seal--md .seal__face { font-size: .5rem; }
.seal--lg .seal__face { font-size: .5625rem; }

/* Stock band */
.stock {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--t-small); font-weight: 500; color: var(--ink-2);
}
.stock__mark { width: .5rem; height: .5rem; flex: none; border-radius: 50%; background: var(--off); }
.stock--in { color: var(--ok); }
.stock--in .stock__mark { background: var(--ok); box-shadow: 0 0 0 3px rgba(23, 115, 74, .14); }
.stock--restocking { color: var(--warn); }
.stock--restocking .stock__mark { background: var(--warn); }
.stock--out { color: var(--off); }
.stock--out .stock__mark { background: transparent; box-shadow: inset 0 0 0 1.5px var(--off); }

.skeleton { display: block; border-radius: var(--radius); background: linear-gradient(90deg, var(--board) 0 40%, var(--board-2) 50%, var(--board) 60% 100%) 0 0 / 300% 100%; animation: skeleton 1.2s linear infinite; }
.skeleton--row { height: 5.5rem; margin-bottom: var(--s-3); }
@keyframes skeleton { to { background-position: -150% 0; } }

/* -------------------------------------------------------------------------
   4. Service strip and masthead
   ------------------------------------------------------------------------- */
.service-strip { background: var(--board); border-bottom: 1px solid var(--rule); font-size: var(--t-micro); color: var(--ink-2); }
.service-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--strip-h); }
.service-strip p { display: flex; align-items: center; gap: var(--s-5); }
.service-strip span, .service-strip a { display: inline-flex; align-items: center; gap: var(--s-2); }
.service-strip a { text-decoration: none; }
.service-strip a:hover { color: var(--action); text-decoration: underline; }
.service-strip__wide, .service-strip__links { display: none !important; }
@media (min-width: 48rem) {
    .service-strip__wide, .service-strip__links { display: inline-flex !important; }
    .service-strip__wide::before { content: ""; width: 1px; height: .9rem; margin-right: var(--s-5); background: var(--rule-strong); }
}

.masthead {
    position: sticky; top: 0; z-index: var(--z-header);
    background: var(--paper); border-bottom: 1px solid var(--rule);
    transition: box-shadow var(--dur-base) var(--ease-standard);
}
.masthead.is-scrolled { box-shadow: 0 12px 24px -20px rgba(6, 37, 74, .4); }
.masthead__bar {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: var(--s-3); min-height: var(--header-h);
}
.masthead__menu { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: calc(-1 * var(--s-3)); border: 0; background: none; color: var(--ink); }
.masthead__logo { justify-self: start; display: block; }
.masthead__logo img { width: auto; height: 2.6rem; }
.masthead__tools { display: flex; align-items: center; gap: var(--s-1); }
.tool { position: relative; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.tool:hover { background: var(--board); }
.tool--account { display: none; }
.cart-count {
    position: absolute; top: .3rem; right: .2rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
    display: grid; place-items: center; border-radius: 999px; background: var(--action); color: var(--paper);
    font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.cart-count.is-bumped { animation: bump var(--dur-slow) var(--ease-emphasis); }
@keyframes bump { 40% { transform: scale(1.35); } }

.search-trigger {
    display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
    border: 0; border-radius: var(--radius); background: none; color: var(--ink);
}
.search-trigger__text, .search-trigger__key { display: none; }
.js .search-trigger { display: inline-grid; }
html:not(.js) .search-trigger { display: none; }

.primary-nav { display: none; }

@media (min-width: 64rem) {
    .masthead__bar { grid-template-columns: auto 1fr auto; gap: var(--s-6); }
    .masthead__menu { display: none; }
    .masthead__logo img { height: 3rem; }
    .tool--account { display: inline-grid; }
    .primary-nav { display: block; justify-self: start; }
    .primary-nav__list { display: flex; align-items: center; gap: var(--s-1); }
    .primary-nav__item { display: flex; align-items: center; }
    .primary-nav__link {
        display: inline-flex; align-items: center; min-height: var(--header-h); padding: 0 var(--s-2) 0 var(--s-3);
        font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--ink);
        box-shadow: inset 0 -2px 0 transparent; transition: box-shadow var(--dur-fast) var(--ease-standard), color var(--dur-fast);
    }
    .primary-nav__item > .primary-nav__link:only-child { padding-right: var(--s-3); }
    .primary-nav__link:hover, .primary-nav__item.is-open > .primary-nav__link { color: var(--action); box-shadow: inset 0 -2px 0 var(--action); }
    .primary-nav__toggle {
        display: inline-grid; place-items: center; width: 1.5rem; height: 1.75rem; margin-right: var(--s-2);
        padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--ink-3);
    }
    .primary-nav__toggle .icon { transition: transform var(--dur-base) var(--ease-standard); }
    .primary-nav__toggle[aria-expanded="true"] { color: var(--action); }
    .primary-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
    .search-trigger {
        display: inline-flex; align-items: center; gap: var(--s-3); width: clamp(13rem, 20vw, 21rem); height: 2.75rem;
        padding: 0 var(--s-2) 0 var(--s-4); margin-right: var(--s-2);
        border: 1px solid var(--rule); background: var(--board); color: var(--ink-3); text-align: left;
        transition: border-color var(--dur-fast) var(--ease-standard);
    }
    .js .search-trigger { display: inline-flex; }
    .search-trigger:hover { border-color: var(--rule-strong); }
    .search-trigger__text { display: block; flex: 1; overflow: hidden; font-size: var(--t-small); white-space: nowrap; text-overflow: ellipsis; }
    .search-trigger__key {
        display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--rule-strong);
        border-radius: var(--radius); background: var(--paper); font-size: var(--t-micro); color: var(--ink-2);
    }
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
    .search-trigger { width: 2.75rem; padding: 0; justify-content: center; border-color: transparent; background: none; }
    .search-trigger__text, .search-trigger__key { display: none; }
}

/* Mega navigation */
.mega {
    position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-mega);
    background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-panel);
    opacity: 0; transform: translateY(-6px);
    transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-enter);
}
.mega.is-open { opacity: 1; transform: none; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: var(--s-7); padding-block: var(--s-6) var(--s-7); }
.mega__label { color: var(--ink-3); margin-bottom: var(--s-3); }
.mega__list a, .mega__brands a {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 500;
}
.mega__list a:hover, .mega__brands a:hover { color: var(--action); }
.mega__count { color: var(--ink-3); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.mega__brands { columns: 2; column-gap: var(--s-6); }
.mega__brands li { break-inside: avoid; }
.mega__feature {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; min-height: 14rem;
    border: 1px solid var(--rule); background: var(--board); text-decoration: none;
}
.mega__feature img { width: 100%; height: 100%; object-fit: cover; }
.mega__feature img.mega__product { object-fit: contain; padding: var(--s-5); mix-blend-mode: multiply; }
.mega__feature-copy { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.mega__feature-copy strong { font-size: var(--t-2); font-stretch: var(--stretch-display); letter-spacing: -.02em; line-height: 1; }
.mega__feature-copy > span:not(.mega__feature-cta) { color: var(--ink-2); font-size: var(--t-small); }
.mega__feature-cta { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: auto; color: var(--action); font-weight: 600; }
.mega__feature:not(:has(img)) { grid-template-columns: 1fr; background: var(--sleeve); color: var(--on-sleeve); border-color: var(--sleeve); }
.mega__feature:not(:has(img)) .mega__feature-copy > span:not(.mega__feature-cta) { color: var(--on-sleeve-2); }
.mega__feature:not(:has(img)) .mega__feature-cta { color: var(--on-sleeve-accent); }

/* -------------------------------------------------------------------------
   5. Overlays: sheet, palette, drawer, quick view, lightbox, toast
   ------------------------------------------------------------------------- */
dialog { padding: 0; border: 0; color: var(--ink); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(6, 22, 42, .48); }
dialog[open] { animation: fade-in var(--dur-base) var(--ease-standard); }
dialog[open]::backdrop { animation: fade-in var(--dur-base) var(--ease-standard); }
@keyframes fade-in { from { opacity: 0; } }
html:has(dialog[open]) { overflow: hidden; }

/* Mobile navigation sheet */
.sheet--nav {
    width: 100%; height: 100%; margin: 0; inset: 0;
    display: none; flex-direction: column; background: var(--paper);
}
.sheet--nav[open] { display: flex; animation: sheet-in var(--dur-slow) var(--ease-enter); }
@keyframes sheet-in { from { transform: translateX(-8%); opacity: 0; } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--gutter); border-bottom: 1px solid var(--rule); }
.sheet__logo img { height: 2.4rem; width: auto; }
.sheet__search {
    display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) var(--gutter) var(--s-2);
    padding-left: var(--s-4); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--board);
}
.sheet__search input { flex: 1; min-width: 0; border: 0; background: transparent; padding-left: 0; }
.sheet__search:focus-within { border-color: var(--action); outline: 2px solid var(--action-wash); }
.sheet__search input:focus-visible { outline: none; }
.mobile-nav { flex: 1; overflow-y: auto; padding: 0 var(--gutter) var(--s-6); overscroll-behavior: contain; }
.mobile-nav__world { border-bottom: 1px solid var(--rule); }
.mobile-nav__world summary {
    display: flex; align-items: center; gap: var(--s-3); min-height: 3.75rem; list-style: none; cursor: pointer;
    font-size: var(--t-3); font-weight: 650; font-stretch: var(--stretch-display); letter-spacing: -.01em;
}
.mobile-nav__world summary::-webkit-details-marker { display: none; }
.mobile-nav__world summary > span:first-child { flex: 1; }
.mobile-nav__count { color: var(--ink-3); font-size: var(--t-small); font-weight: 500; font-stretch: 100%; font-variant-numeric: tabular-nums; }
.mobile-nav__world summary .icon { transition: transform var(--dur-base) var(--ease-standard); }
.mobile-nav__world[open] summary .icon { transform: rotate(180deg); }
.mobile-nav__world ul { padding-bottom: var(--s-3); }
.mobile-nav__world li a { display: flex; justify-content: space-between; padding: var(--s-3) 0 var(--s-3) var(--s-4); text-decoration: none; font-weight: 500; }
.mobile-nav__world li a span { color: var(--ink-3); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.mobile-nav__brands { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 0 var(--s-4) var(--s-4); }
.mobile-nav__brands a { padding: var(--s-1) var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius); font-size: var(--t-small); text-decoration: none; }
.mobile-nav__links { padding-top: var(--s-4); }
.mobile-nav__links a { display: block; padding: var(--s-3) 0; font-weight: 500; text-decoration: none; }
.sheet__foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.sheet__foot a { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 3.5rem; font-weight: 600; text-decoration: none; }
.sheet__foot a + a { border-left: 1px solid var(--rule); }

/* Search palette */
.palette {
    width: min(44rem, 100% - 1rem); margin: 0 auto; top: .5rem; position: fixed;
    max-height: calc(100dvh - 1rem); display: none; flex-direction: column;
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-2); box-shadow: var(--shadow-panel);
}
.palette[open] { display: flex; animation: palette-in var(--dur-base) var(--ease-enter); }
@keyframes palette-in { from { opacity: 0; transform: translateY(-8px) scale(.99); } }
@media (min-width: 48rem) { .palette { top: 9vh; max-height: 78vh; } }
.palette__form { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-3) 0 var(--s-5); border-bottom: 1px solid var(--rule); }
.palette__form input { flex: 1; min-width: 0; min-height: 4rem; border: 0; padding: 0; font-size: var(--t-4); background: transparent; }
.palette__form input:focus-visible { outline: none; }
.palette__close { border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--board); padding: var(--s-1) var(--s-2); font-size: var(--t-micro); color: var(--ink-2); }
.palette__body { overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4) var(--s-5) var(--s-5); }
.palette__label { color: var(--ink-3); margin: var(--s-3) 0 var(--s-2); }
.palette__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.palette__chips a, .palette__chips button {
    display: inline-flex; padding: var(--s-2) var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--paper); font-size: var(--t-small); font-weight: 500; text-decoration: none;
}
.palette__chips a:hover, .palette__chips button:hover { border-color: var(--ink); }
.palette__hint { margin-top: var(--s-5); color: var(--ink-3); font-size: var(--t-small); }
.palette__hint button { border: 0; background: var(--action-wash); color: var(--action-press); border-radius: var(--radius); padding: 0 var(--s-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.palette__group + .palette__group { margin-top: var(--s-4); }
.palette__option {
    display: grid; grid-template-columns: 3.25rem 1fr auto; align-items: center; gap: var(--s-3);
    padding: var(--s-2); margin-inline: calc(-1 * var(--s-2)); border-radius: var(--radius); text-decoration: none;
}
.palette__option--text { grid-template-columns: 1fr auto; min-height: 2.75rem; }
.palette__option[aria-selected="true"], .palette__option:hover { background: var(--board); }
.palette__option[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--action); }
.palette__thumb { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border: 1px solid var(--rule); background: var(--paper); }
.palette__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.palette__title { display: block; font-weight: 500; line-height: 1.3; }
.palette__title mark { background: none; color: var(--action); font-weight: 700; }
.palette__meta { display: block; color: var(--ink-3); font-size: var(--t-micro); }
.palette__price { font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.palette__all { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); text-decoration: none; font-weight: 600; color: var(--action); }
.palette__all[aria-selected="true"], .palette__all:hover { border-color: var(--action); background: var(--action-wash); }
.palette__empty { padding: var(--s-5) 0; color: var(--ink-2); }

/* Cart drawer: the box tray */
.drawer {
    position: fixed; inset: 0 0 0 auto; width: min(28rem, 100%); height: 100%; margin: 0;
    display: none; flex-direction: column; background: var(--paper);
}
.drawer[open] { display: flex; animation: drawer-in var(--dur-slow) var(--ease-enter); }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); }
.drawer__head h2 { font-size: var(--t-3); }
.drawer__head h2 span { color: var(--ink-3); font-weight: 500; font-stretch: 100%; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-5); overscroll-behavior: contain; }
.drawer__item {
    display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule);
}
.drawer__item.is-new { animation: settle var(--dur-slow) var(--ease-emphasis); }
@keyframes settle { from { transform: translateY(-10px); opacity: 0; } }
.drawer__thumb { width: 4.5rem; height: 4.5rem; border: 1px solid var(--rule); background: var(--paper); display: grid; place-items: center; }
.drawer__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.drawer__title { font-weight: 500; line-height: 1.3; font-size: var(--t-small); }
.drawer__title a { text-decoration: none; }
.drawer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); }
.drawer__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.drawer__remove { border: 0; background: none; padding: var(--s-1); color: var(--ink-3); font-size: var(--t-micro); text-decoration: underline; }
.drawer__remove:hover { color: var(--danger); }
.drawer__state { padding: var(--s-6) 0; text-align: center; }
.drawer__state h3 { font-size: var(--t-3); margin-bottom: var(--s-2); }
.drawer__state p { color: var(--ink-2); margin-bottom: var(--s-5); }
.drawer__foot { padding: var(--s-4) var(--s-5) max(var(--s-5), env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--board); }
.drawer__totals div { display: flex; justify-content: space-between; align-items: baseline; }
.drawer__totals dt { font-weight: 600; }
.drawer__totals dt span { color: var(--ink-3); font-weight: 400; font-size: var(--t-small); }
.drawer__totals dd { font-size: var(--t-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.drawer__note { margin: var(--s-2) 0 var(--s-4); color: var(--ink-2); font-size: var(--t-micro); }
.drawer__secondary { display: flex; justify-content: space-between; margin-top: var(--s-3); font-size: var(--t-small); }
.drawer__secondary a, .drawer__secondary button { border: 0; background: none; padding: var(--s-2) 0; color: var(--ink-2); text-decoration: underline; }

.stepper { display: inline-grid; grid-template-columns: 2.5rem 3rem 2.5rem; height: 2.75rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); }
.stepper button { display: grid; place-items: center; border: 0; background: none; color: var(--ink); }
.stepper button:hover { background: var(--board); }
.stepper button[disabled] { color: var(--rule-strong); cursor: default; background: none; }
.stepper input { width: 100%; min-height: 0; border: 0; border-inline: 1px solid var(--rule); border-radius: 0; padding: 0; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper--small { grid-template-columns: 2.25rem 2.5rem 2.25rem; height: 2.5rem; }

/* Quick view */
.quick {
    width: min(60rem, 100% - 1rem); max-height: calc(100dvh - 1rem); margin: auto; display: none; position: fixed; inset: 0;
    background: var(--paper); border-radius: var(--radius-2); box-shadow: var(--shadow-panel); overflow: auto;
}
.quick[open] { display: block; animation: palette-in var(--dur-slow) var(--ease-enter); }
.quick__close { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 1; background: var(--paper); }
.quick__grid { display: grid; gap: var(--s-5); padding: var(--s-5); }
.quick__well { display: grid; place-items: center; aspect-ratio: 1; background: var(--board); border: 1px solid var(--rule); }
.quick__well img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.quick__info { display: flex; flex-direction: column; gap: var(--s-4); }
.quick__title { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); font-stretch: 108%; line-height: 1.12; }
.quick__highlights { display: grid; gap: var(--s-2); color: var(--ink-2); font-size: var(--t-small); }
.quick__highlights li { padding-left: var(--s-4); position: relative; }
.quick__highlights li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: 1px; background: var(--ink-3); }
.quick__loading { padding: var(--s-6); }
@media (min-width: 48rem) { .quick__grid { grid-template-columns: 1fr 1fr; padding: var(--s-6); gap: var(--s-6); } }

/* Lightbox */
.lightbox { width: 100%; height: 100%; margin: 0; inset: 0; display: none; place-items: center; background: var(--paper); position: fixed; }
.lightbox[open] { display: grid; }
.lightbox__frame img { max-width: min(92vw, 70rem); max-height: 88vh; object-fit: contain; }
.lightbox__close { position: absolute; top: var(--s-4); right: var(--s-4); }

/* Toast */
.toast {
    position: fixed; left: 50%; bottom: max(var(--s-5), env(safe-area-inset-bottom)); z-index: var(--z-toast);
    transform: translateX(-50%); padding: var(--s-3) var(--s-5); max-width: calc(100% - 2rem);
    background: var(--ink); color: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-panel);
    font-size: var(--t-small); font-weight: 500;
}
.toast.is-error { background: var(--danger); }

/* -------------------------------------------------------------------------
   6. Breadcrumbs, heads, prose
   ------------------------------------------------------------------------- */
.crumbs { padding-block: var(--s-4); font-size: var(--t-small); color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--rule-strong); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--action); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink-2); max-width: 40ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.listing-head, .page-head { background: var(--board); border-block: 1px solid var(--rule); }
.listing-head__grid, .page-head__grid { display: grid; gap: var(--s-4); padding-block: var(--s-6) var(--s-7); }
.listing-head h1, .page-head h1 { font-size: var(--t-1); max-width: 18ch; }
.listing-head__intro, .page-head__intro { max-width: 62ch; color: var(--ink-2); font-size: var(--t-4); }
.listing-head__count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.listing-head__count strong { color: var(--ink); }
@media (min-width: 64rem) {
    .listing-head__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: end; gap: var(--s-7); }
    .page-head__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--s-8); }
}
.listing-head--search h1 { font-size: var(--t-2); max-width: none; overflow-wrap: anywhere; }
@media (min-width: 64rem) { .listing-head--search .listing-head__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }

.search-form {
    display: flex; align-items: center; gap: var(--s-3); padding-left: var(--s-4);
    border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper);
}
.search-form:focus-within { border-color: var(--action); outline: 3px solid var(--action-wash); }
.search-form input { flex: 1; min-width: 0; border: 0; padding-left: 0; background: transparent; }
.search-form input:focus-visible { outline: none; }
.search-form .button { margin: .25rem; min-height: 2.5rem; }

.prose { max-width: 68ch; font-size: var(--t-4); line-height: 1.7; color: var(--ink-2); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { color: var(--ink); font-size: var(--t-2); margin-bottom: var(--s-3); }
.prose section + section { margin-top: var(--s-7); }
.prose a { color: var(--action); }

/* -------------------------------------------------------------------------
   7. Homepage — scroll scenes (campaign hero, phones)
   A scene is a full-bleed stage. While JavaScript draws its frame sequence
   to a canvas, the stage pins for the scroll distance; Lenis eases wheel
   scrolling, touch stays native. Without JavaScript, under reduced motion
   or Save-Data, it is a still.
   ------------------------------------------------------------------------- */
:root { --stage-h: clamp(34rem, calc(100svh - var(--header-h)), 62rem); }

/* .scrub is set on <html> before first paint (layout head script), so the
   pinned height never shifts the page after load. */
.scrub [data-scrub] { height: calc(var(--stage-h) + var(--scrub-distance, 80vh)); }
.scrub [data-scrub] [data-scrub-stage] { position: sticky; top: var(--header-h); }
/* Frames are drawn to the canvas with cover fit; object-position here is
   read by the script as the framing of each scene. */
.scrub-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-position: 50% 50%; opacity: 0; transition: opacity var(--dur-base) linear; }
.scrub-canvas.is-ready { opacity: 1; }

/* The campaign hero: studio footage edge to edge, type set over it. */
.hero { --scrub-distance: 140vh; position: relative; background: var(--stage); color: var(--on-sleeve); }
.hero__stage { position: relative; height: var(--stage-h); overflow: hidden; }
.hero__media { position: absolute; inset: 0; background: var(--stage); }
.hero__picture, .hero__picture img { width: 100%; height: 100%; }
.hero__picture img, .hero .scrub-canvas { object-fit: cover; object-position: 55% 62%; }
/* Phones and tablets: type on the dark ground above, footage below it,
   fading in through a mask so the product never sits under the words. */
.hero__media { top: 46%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32%); mask-image: linear-gradient(180deg, transparent 0, #000 32%); }
.hero__media::after {
    /* Legibility for the maker's line at the foot of the scene. */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(4, 8, 15, .75) 0%, rgba(4, 8, 15, 0) 32%);
}
.hero__content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-7) var(--s-6); }
.hero h1 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.03em; max-width: 12ch; }
.hero h1 em { font-style: normal; font-weight: 300; color: var(--on-sleeve); }
.hero__lead { margin-top: var(--s-5); max-width: 40ch; color: var(--on-sleeve-2); font-size: var(--t-4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__maker { max-width: 30rem; color: var(--on-sleeve-2); padding-top: var(--s-4); border-top: 1px solid var(--on-sleeve-rule); }

/* "Scroll to open": only while scrubbing, gone once the scene starts moving. */
.scrub-cue {
    position: absolute; left: 50%; bottom: var(--s-5); z-index: 1; display: none; flex-direction: column; align-items: center; gap: var(--s-2);
    transform: translateX(-50%); color: var(--on-sleeve-2); font-size: var(--t-micro); font-weight: 600; font-stretch: var(--stretch-label); letter-spacing: .08em; text-transform: uppercase;
    opacity: calc(1 - var(--progress, 0) * 10); transition: opacity var(--dur-fast) linear;
}
.scrub-cue::after { content: ""; width: 1px; height: 2.25rem; background: linear-gradient(var(--on-sleeve-2), transparent); transform-origin: top; animation: cue 1.6s var(--ease-standard) infinite; }
.scrub .scrub-cue { display: flex; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (min-width: 64rem) {
    /* Desktop: the footage plane starts a fifth of the way in and fades out of
       the dark ground, so the opening laptop stays clear of the headline. */
    .hero__media { top: 0; left: 22%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
    .hero__picture img, .hero .scrub-canvas { object-position: 50% 55%; }
    .hero__media::after { background: linear-gradient(0deg, rgba(4, 8, 15, .55) 0%, rgba(4, 8, 15, 0) 28%); }
    .hero__content { padding-block: var(--s-8) var(--s-7); }
    .scrub-cue { left: auto; right: max(var(--gutter), (100vw - var(--container)) / 2); transform: none; }
}

/* Promises: a paper strip directly under the scene. */
.hero__panel { background: var(--paper); border-bottom: 1px solid var(--rule); }
.hero__panel-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding-block: var(--s-5); }
.hero__seal { width: 4.25rem; height: 4.25rem; }
.hero__seal .seal__face { font-size: .5rem; }
.hero__promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); width: 100%; }
.hero__promises div { padding-left: var(--s-4); border-left: 1px solid var(--rule-strong); }
.hero__promises dt { font-weight: 650; font-size: var(--t-small); }
.hero__promises dd { color: var(--ink-2); font-size: var(--t-small); }
@media (min-width: 48rem) { .hero__panel-inner { flex-direction: row; align-items: center; gap: var(--s-5); } }
@media (min-width: 64rem) {
    .hero__seal { width: 5.25rem; height: 5.25rem; }
    .hero__seal .seal__face { font-size: .5625rem; }
    .hero__promises { flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The type arrives once; the footage only moves when the visitor scrolls. */
@media (prefers-reduced-motion: no-preference) {
    .js .hero__copy { animation: rise var(--dur-cinematic) var(--ease-emphasis) 80ms both; }
    .js .hero__maker { animation: rise var(--dur-slow) var(--ease-enter) 360ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* Phones scene: a boxed phone whose lid lifts as the page scrolls. */
.scene { --scrub-distance: 150vh; background: var(--scene-ground); color: var(--on-sleeve); }
.scene__stage { display: flex; align-items: center; padding-block: var(--section); }
.scene__grid { display: grid; gap: var(--s-7); align-items: center; }
.scene h2 { font-size: var(--t-1); max-width: 14ch; }
.scene__copy > p { margin-top: var(--s-4); max-width: 44ch; color: var(--on-sleeve-2); font-size: var(--t-4); }
.scene__brands { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-6) 0; }
.scene__brands a {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--s-3);
    border: 1px solid var(--on-sleeve-rule); border-radius: var(--radius); font-weight: 600; text-decoration: none;
    transition: background-color var(--dur-fast), color var(--dur-fast);
}
.scene__brands a:hover { background: var(--paper); color: var(--ink); }
.scene__copy > .button { margin-top: var(--s-2); }
.scene :focus-visible { outline-color: var(--on-sleeve-accent); }
.scene__media { position: relative; justify-self: center; width: min(100%, 22rem); aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius); background: var(--scene-ground); }
.scene__picture, .scene__picture img { width: 100%; height: 100%; }
.scene__picture img { object-fit: cover; }
/* Pinned on large screens only; phones scrub as the scene passes through. */
@media (min-width: 64rem) {
    .scrub .scene .scene__stage { height: var(--stage-h); padding-block: var(--s-6); }
    .scene__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); width: min(var(--container), 100% - 2 * var(--gutter)); }
    .scene__media { width: auto; height: calc(var(--stage-h) - 2 * var(--s-7)); max-height: 46rem; }
}
@media (max-width: 63.99rem) {
    .scrub [data-scrub].scene { height: auto; }
    .scrub [data-scrub].scene [data-scrub-stage] { position: static; }
}

@media (max-width: 29.99rem) {
    .hero__actions .button, .svc-hero__actions .button, .business__actions .button,
    .footer-help__actions .button, .svc-cta__actions .button, .story__actions .button { flex: 1 1 100%; }
}

/* -------------------------------------------------------------------------
   8. Departments — mixed-scale editorial tiles
   ------------------------------------------------------------------------- */
.departments__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.department {
    position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 14rem;
    border: 1px solid var(--rule); background: var(--board); text-decoration: none; isolation: isolate;
}
.department--computers, .department--accessories, .department--networking { grid-column: 1 / -1; }
.department--computers { min-height: 20rem; }
/* Bands: product on the left, copy on the right. */
@media (min-width: 48rem) {
    .department--networking, .department--accessories { flex-direction: row; min-height: 15rem; }
    :is(.department--networking, .department--accessories) .department__well { flex: 1 1 50%; padding: var(--s-5); }
    :is(.department--networking, .department--accessories) .department__copy { flex: 1 1 50%; align-self: end; padding: var(--s-6); }
    :is(.department--networking, .department--accessories) .department__name { font-size: var(--t-2); }
}
.department__well { position: relative; flex: 1; display: block; overflow: hidden; min-height: 7rem; }
.department__picture, .department__picture img { width: 100%; height: 100%; }
.department__picture img { transition: transform var(--dur-slow) var(--ease-emphasis); }
.department--product .department__well { display: flex; padding: var(--s-5) var(--s-5) 0; }
.department--product .department__picture { flex: 1; }
.department--product .department__picture { display: block; width: 100%; height: 100%; }
.department--product .department__picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Catalogue photos carry white margins; scale the subject up to fill its well. */
.department--product:hover .department__picture img { transform: translateY(-6px); }
.department--product .department__picture { position: relative; min-height: 9rem; }
.department--cutout .department__well { padding: var(--s-4) var(--s-4) 0; }
.department--cutout .department__picture img { object-fit: contain; filter: drop-shadow(0 18px 18px rgba(6, 37, 74, .18)); }
.department__copy { position: relative; display: grid; gap: var(--s-1); padding: var(--s-4); margin-top: auto; }
.department__name { font-size: var(--t-3); font-weight: 700; font-stretch: var(--stretch-display); letter-spacing: -.02em; line-height: 1.05; }
.department__summary { color: var(--ink-2); font-size: var(--t-small); }
.department__meta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-2); color: var(--ink-3); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.department__go { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink); background: var(--paper); transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.department:hover .department__go, .department:focus-visible .department__go { background: var(--action); border-color: var(--action); color: var(--paper); }
.department--cutout:hover .department__picture img { transform: translateY(-6px) scale(1.02); }
.department--plain { min-height: 0; background: var(--sleeve); border-color: var(--sleeve); color: var(--on-sleeve); }
.department--plain .department__summary, .department--plain .department__meta { color: var(--on-sleeve-2); }
.department--plain .department__copy { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-1) var(--s-6); padding: var(--s-5); }
.department--plain .department__name, .department--plain .department__summary { grid-column: 1; }
.department--plain .department__meta { margin: 0; gap: var(--s-4); grid-row: 1 / span 2; grid-column: 2; }
.department--plain .department__go { background: transparent; color: var(--on-sleeve); border-color: var(--on-sleeve-rule); }
.department--plain:hover .department__go { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (min-width: 48rem) {
    .departments__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(14rem, auto); gap: var(--s-4); }
    .department--computers { grid-column: 1 / -1; min-height: 24rem; }
    .department--printing { grid-column: 1 / span 6; }
    .department--phones { grid-column: 7 / span 6; }
    .department--accessories, .department--networking { grid-column: 1 / -1; grid-row: auto; }
    .department--computers .department__name { font-size: var(--t-1); }
}
@media (min-width: 64rem) {
    .departments__grid { grid-auto-rows: minmax(15rem, auto); }
    /* Computers leads at double height; Printing and Phones are square;
       Accessories runs as a band beneath them. */
    .department--computers { grid-column: 1 / span 6; grid-row: span 2; min-height: 34rem; }
    .department--printing { grid-column: 7 / span 3; }
    .department--phones { grid-column: 10 / span 3; }
    .department--accessories { grid-column: 7 / span 6; }
}

/* -------------------------------------------------------------------------
   9. Toner finder — a navy sleeve with a printed label
   ------------------------------------------------------------------------- */
.finder { padding-block: var(--section); background: var(--sleeve); color: var(--on-sleeve); }
.finder__grid { display: grid; gap: var(--s-7); }
.finder h2 { font-size: var(--t-1); max-width: 14ch; }
.finder__intro > p { margin-top: var(--s-4); max-width: 46ch; color: var(--on-sleeve-2); font-size: var(--t-4); }
.finder__form { margin-top: var(--s-6); }
.finder__form label { display: block; margin-bottom: var(--s-2); color: var(--on-sleeve-2); }
.finder__field { display: flex; align-items: center; gap: var(--s-3); padding-left: var(--s-4); background: var(--paper); color: var(--ink); border-radius: var(--radius); }
.finder__field:focus-within { outline: 3px solid var(--on-sleeve-accent); outline-offset: 2px; }
.finder__field input { flex: 1; min-width: 0; min-height: 3.5rem; border: 0; padding: 0; font-size: var(--t-4); background: transparent; }
.finder__field input:focus-visible { outline: none; }
.finder__field .button { margin: .3rem; min-height: 2.9rem; }
.finder__help { margin-top: var(--s-2); color: var(--on-sleeve-2); font-size: var(--t-micro); }
.finder__brands { margin-top: var(--s-6); }
.finder__brands > p { color: var(--on-sleeve-2); margin-bottom: var(--s-3); }
.finder__brands ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.finder__brands a {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.5rem; padding: 0 var(--s-3);
    border: 1px solid var(--on-sleeve-rule); border-radius: var(--radius); text-decoration: none; font-weight: 600;
    transition: background-color var(--dur-fast), color var(--dur-fast);
}
.finder__brands a span { color: var(--on-sleeve-2); font-weight: 400; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.finder__brands a:hover { background: var(--paper); color: var(--ink); }
.finder__brands a:hover span { color: var(--ink-3); }
.finder__panel { display: grid; align-content: start; gap: var(--s-5); }
.finder__results { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: var(--s-3) var(--s-4) var(--s-4); }
.finder__results .palette__all { margin-top: var(--s-3); }
.finder__guide { margin: 0; display: grid; gap: var(--s-6); align-items: center; }
.finder__guide figcaption { color: var(--on-sleeve-2); font-size: var(--t-small); max-width: 40ch; }
.finder__guide figcaption strong { display: block; margin-bottom: var(--s-1); color: var(--on-sleeve); font-size: var(--t-4); }
.finder__guide b { color: var(--on-sleeve); }
.label-mock {
    position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-4); width: min(100%, 21rem);
    padding: var(--s-5) var(--s-5) var(--s-4); background: var(--paper); color: var(--ink); border-radius: var(--radius);
    box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .6); transform: rotate(-2deg);
}
.label-mock__brand { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--t-micro); font-weight: 600; font-stretch: var(--stretch-label); letter-spacing: .08em; text-transform: uppercase; }
.label-mock__code { font-size: 3.25rem; font-weight: 800; font-stretch: var(--stretch-display); letter-spacing: -.03em; line-height: 1; justify-self: start; box-shadow: inset 0 -.3em 0 rgba(10, 107, 181, .2); }
.label-mock__part { align-self: end; font-size: var(--t-4); font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: inset 0 -.4em 0 rgba(10, 107, 181, .2); }
.label-mock__ink { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--t-small); }
.label-mock__ink i { width: .75rem; height: .75rem; border-radius: 50%; background: var(--swatch, var(--ink-black)); }
.label-mock__ink--cyan { --swatch: var(--ink-cyan); }
.label-mock__ink--magenta { --swatch: var(--ink-magenta); }
.label-mock__ink--yellow { --swatch: var(--ink-yellow); }
@media (min-width: 48rem) { .finder__guide { grid-template-columns: auto 1fr; } }
@media (min-width: 64rem) {
    .finder__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: var(--s-9); align-items: start; }
    .finder__guide { grid-template-columns: 1fr; padding-top: var(--s-6); }
}
@media (min-width: 80rem) { .finder__guide { grid-template-columns: auto 1fr; } }

/* -------------------------------------------------------------------------
   10. Product card — the "lift out" signature
   ------------------------------------------------------------------------- */
.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card__well {
    position: relative; aspect-ratio: 1; overflow: hidden; isolation: isolate;
    background: var(--board); border: 1px solid var(--rule); border-radius: var(--radius);
    box-shadow: inset 0 2px 5px -2px rgba(6, 37, 74, .14);
}
.card__well::after {
    /* The product's shadow on the board; it widens as the product lifts out. */
    content: ""; position: absolute; left: 22%; right: 22%; bottom: 6%; height: 7%; z-index: -1;
    background: radial-gradient(closest-side, rgba(6, 37, 74, .2), transparent);
    opacity: .45; transition: transform var(--dur-slow) var(--ease-emphasis), opacity var(--dur-slow);
}
.card__media { position: absolute; inset: 0; display: block; }
.card__img {
    position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply;
    transition: transform var(--dur-slow) var(--ease-emphasis), opacity var(--dur-base) var(--ease-standard);
}
.card__img--alt { opacity: 0; }
.card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-weight: 700; font-stretch: var(--stretch-label); letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-small); }
.card__ink {
    position: absolute; top: var(--s-2); left: var(--s-2); z-index: 1; display: inline-flex; align-items: center; gap: var(--s-1);
    padding: .15rem .45rem .15rem .3rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
    font-size: var(--t-micro); font-weight: 600;
}
.card__ink::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--swatch); }
.card__ink--cyan { --swatch: var(--ink-cyan); }
.card__ink--magenta { --swatch: var(--ink-magenta); }
.card__ink--yellow { --swatch: var(--ink-yellow); }
.card__ink--black { --swatch: var(--ink-black); }
.card__actions { position: absolute; right: var(--s-2); bottom: var(--s-2); z-index: 1; display: flex; gap: var(--s-1); }
.card__action {
    position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0;
    border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink);
    font-size: var(--t-small); font-weight: 600; white-space: nowrap;
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.card__action > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card__action:hover { border-color: var(--ink); }
.card__action--add { background: var(--action); border-color: var(--action); color: var(--paper); }
.card__action--add:hover { background: var(--action-hover); border-color: var(--action-hover); }
.card__action[aria-busy="true"] { opacity: .6; }
html:not(.js) .card__actions { display: none; }
/* Save for later: a bookmark printed on the well's corner, always reachable by touch. */
.card__save {
    position: absolute; top: var(--s-1); right: var(--s-1); z-index: 1; display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--ink-2);
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.card__save:hover { color: var(--ink); background: var(--paper); }
.card__save[aria-pressed="true"], .save-toggle[aria-pressed="true"] { color: var(--ink); }
.card__save[aria-pressed="true"] svg path, .save-toggle[aria-pressed="true"] svg path { fill: currentColor; }
.card__save.is-bumped svg, .save-toggle.is-bumped svg { animation: save-press var(--dur-slow) var(--ease-emphasis); }
@keyframes save-press { 40% { transform: scale(.8); } }
html:not(.js) .card__save, html:not(.js) .save-toggle { display: none; }
.card__body { display: flex; flex: 1; flex-direction: column; gap: .3rem; padding-top: var(--s-3); }
.card__line { color: var(--ink-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card__title { font-size: .9375rem; font-weight: 600; font-stretch: 100%; letter-spacing: -.005em; line-height: 1.32; }
.card__title a { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__title a:hover { color: var(--action); }
.card__title a:focus-visible { outline: none; text-decoration: underline; }
.card:has(.card__title a:focus-visible) .card__well { outline: 2px solid var(--action); outline-offset: 2px; }
.card__config { color: var(--ink-2); font-size: var(--t-micro); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card__foot { display: grid; gap: .2rem; margin-top: auto; padding-top: var(--s-2); }
.card__price { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.card__price span { margin-left: .4rem; color: var(--ink-3); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0; }
.card .stock { font-size: var(--t-micro); }
/* Promotions: a printed tag on the well, the sale price in the deal colour,
   and the base price crossed out beside it. */
.card__deal {
    position: absolute; left: var(--s-2); bottom: var(--s-2); z-index: 1; padding: .2rem .5rem;
    border-radius: var(--radius); background: var(--deal); color: var(--paper);
    font-size: var(--t-micro); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.card__deal--code, .card__deal--offer { background: var(--paper); color: var(--deal); border: 1px solid currentColor; }
.card__price--sale { color: var(--deal); }
.card__price s { margin-left: .45rem; color: var(--ink-3); font-size: var(--t-micro); font-weight: 500; }
.card__price--sale > span:last-child { margin-left: .35rem; }
.card__offer { color: var(--deal); font-size: var(--t-micro); font-weight: 600; }
.card--unavailable .card__img { filter: grayscale(1); opacity: .5; }

@media (hover: hover) and (pointer: fine) {
    .card__actions { left: var(--s-2); justify-content: flex-end; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-enter); }
    .card:hover .card__actions, .card:focus-within .card__actions { opacity: 1; transform: none; }
    .card__action { width: auto; padding: 0 var(--s-3); display: inline-flex; gap: .35rem; }
    .card__action > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .card:hover .card__img { transform: translateY(-5%) scale(1.03); }
    .card:hover .card__well::after { opacity: 1; transform: scaleX(1.25); }
    .card:hover .card__img--alt { opacity: 1; }
    .card:hover .card__img:has(+ .card__img--alt) { opacity: 0; }
}

/* Grids and rails */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); }
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); } }
@media (min-width: 80rem) { .grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rail-section .section-head { margin-bottom: var(--s-5); }
.rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: max(var(--gutter), (100% - var(--container)) / 2); }
.rail::-webkit-scrollbar { display: none; }
.rail__track { display: flex; gap: var(--s-4); width: max-content; padding-inline: max(var(--gutter), (100vw - var(--container)) / 2); padding-bottom: var(--s-2); }
.rail__item { width: clamp(13.5rem, 60vw, 18rem); scroll-snap-align: start; }
.rail.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.rail.is-dragging a, .rail.is-dragging button { pointer-events: none; }
.section-head--rail { align-items: center; }
.rail-controls { display: none; gap: var(--s-2); }
@media (min-width: 64rem) {
    .rail-controls { display: flex; }
    .rail__item { width: calc((min(var(--container), 100vw - 2 * var(--gutter)) - 3 * var(--s-4)) / 4.3); }
}

/* -------------------------------------------------------------------------
   11. Product story, business, trust, journal
   ------------------------------------------------------------------------- */
.story { border-top: 1px solid var(--rule); }
.story__grid { display: grid; gap: var(--s-6); }
.story__well { display: grid; place-items: center; aspect-ratio: 1; background: var(--board); border: 1px solid var(--rule); }
.story__well img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; }
.story__copy { display: flex; flex-direction: column; gap: var(--s-4); }
.story__line { color: var(--ink-3); }
.story h2 { font-size: var(--t-2); font-stretch: 108%; line-height: 1.1; }
.story__lead { color: var(--ink-2); font-size: var(--t-4); max-width: 54ch; }
.story__buy { display: grid; gap: var(--s-4); margin-top: var(--s-2); }
.story__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (min-width: 64rem) { .story__grid { grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; } }

/* The spec side-panel: a printed table with a heavier top rule */
.spec-panel { border-top: 2px solid var(--ink); }
.spec-panel div { display: grid; grid-template-columns: minmax(7rem, .7fr) 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.spec-panel dt { color: var(--ink-3); font-size: var(--t-small); }
.spec-panel dd { font-weight: 600; font-size: var(--t-small); }
.spec-panel--compact div { padding: var(--s-2) 0; }

.price-block { display: grid; gap: .15rem; }
.price-block__value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.price-block__vat { color: var(--ink-2); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.price-block__vat strong { color: var(--ink); }
.price-block--large .price-block__value { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); }
.price-block--sale .price-block__value { color: var(--deal); }
.price-block__value s { color: var(--ink-3); font-size: .5em; font-weight: 500; letter-spacing: 0; vertical-align: middle; }
.deal-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); padding: var(--s-3); background: var(--deal-wash); border-radius: var(--radius); color: var(--ink-2); font-size: var(--t-small); }
.deal-note__tag { padding: .1rem .45rem; border-radius: var(--radius); background: var(--deal); color: var(--paper); font-size: var(--t-micro); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.deal-note strong { color: var(--deal); letter-spacing: .04em; }

.business { padding-block: var(--section); background: var(--sleeve); color: var(--on-sleeve); }
.business__grid { display: grid; gap: var(--s-7); }
.business h2 { font-size: var(--t-1); max-width: 18ch; }
.business__intro > p { margin-top: var(--s-4); max-width: 46ch; color: var(--on-sleeve-2); font-size: var(--t-4); }
.business__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.business__list { display: grid; border-top: 1px solid var(--on-sleeve-rule); }
.business__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--on-sleeve-rule); color: var(--on-sleeve-2); }
.business__list .icon { color: var(--on-sleeve-2); margin-top: .15rem; }
.business__list strong { display: block; color: var(--on-sleeve); font-weight: 650; }
@media (min-width: 48rem) { .business__list { grid-template-columns: 1fr 1fr; column-gap: var(--s-6); } }
@media (min-width: 64rem) { .business__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-9); align-items: start; } }

.trust { padding-block: var(--s-8); }
.trust__grid { display: grid; gap: var(--s-5); }
.trust h2 { font-size: var(--t-3); }
.trust__list { display: grid; gap: var(--s-4); }
.trust__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); color: var(--ink-2); font-size: var(--t-small); }
.trust__list .icon { color: var(--action); }
.trust__list strong { display: block; color: var(--ink); font-size: var(--t-body); }
@media (min-width: 48rem) { .trust__list { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); } }
@media (min-width: 64rem) { .trust__grid { grid-template-columns: 13rem 1fr; } .trust__list { grid-template-columns: repeat(4, 1fr); } }

.journal-strip { background: var(--board); border-top: 1px solid var(--rule); }
.journal-strip__grid, .journal__grid { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .journal-strip__grid, .journal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: var(--paper); border: 1px solid var(--rule); }
.post-card h2, .post-card h3 { font-size: var(--t-3); }
.post-card a { text-decoration: none; }
.post-card a:hover { color: var(--action); }
.post-card > p { color: var(--ink-2); font-size: var(--t-small); }
.post-card > .post-card__meta { margin-top: auto; color: var(--ink-3); font-size: var(--t-micro); }
.post-card__media { display: block; margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-2); aspect-ratio: 16 / 10; overflow: hidden; background: var(--board); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) { .post-card--lead { grid-column: span 2; grid-row: span 2; } .post-card--lead h2 { font-size: var(--t-2); } }

/* -------------------------------------------------------------------------
   12. Listing: filters, results, chips, empty, pager
   ------------------------------------------------------------------------- */
.listing { padding-block: var(--s-6) var(--section); }
.listing__layout { display: grid; gap: var(--s-6); }
.listing__main { min-width: 0; }
@media (min-width: 64rem) { .listing__layout { grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--s-7); align-items: start; } }

.filters { background: var(--paper); }
.filters__head { display: none; }
.filters__form { display: grid; }
.facet { margin: 0; padding: var(--s-4) 0; border: 0; border-top: 1px solid var(--rule); min-width: 0; }
.facet legend { float: left; width: 100%; margin-bottom: var(--s-3); padding: 0; font-weight: 650; font-size: var(--t-small); }
.facet legend span { color: var(--ink-3); font-weight: 400; }
.facet__options { clear: both; display: grid; gap: .1rem; }
.facet__options--scroll { max-height: 15.5rem; overflow-y: auto; padding-right: var(--s-2); scrollbar-width: thin; }
.option { display: flex; align-items: center; gap: var(--s-3); min-height: 2.25rem; cursor: pointer; font-size: var(--t-small); }
.option input {
    appearance: none; flex: none; width: 1.125rem; height: 1.125rem; margin: 0; border: 1.5px solid var(--rule-strong); border-radius: 50%;
    background: var(--paper); transition: box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast);
}
.option input:checked { border-color: var(--action); box-shadow: inset 0 0 0 4px var(--action); }
.option:hover input:not(:checked) { border-color: var(--ink); }
.option input:checked + span { font-weight: 600; }
.facet__range { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.facet__range label { display: grid; gap: var(--s-1); font-size: var(--t-micro); color: var(--ink-3); }
.facet__range input { width: 100%; min-height: 2.75rem; padding: 0 var(--s-3); font-variant-numeric: tabular-nums; }
.filters__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.filters__clear { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); }
.filters__apply { flex: 1; }
@media (min-width: 64rem) {
    .filters { position: sticky; top: calc(var(--header-h) + var(--s-4)); max-height: calc(100vh - var(--header-h) - var(--s-6)); overflow-y: auto; scrollbar-width: thin; padding-right: var(--s-2); }
    .js .filters__apply { display: none; }
    .js .filters__foot:not(:has(.filters__clear:not([hidden]))) { display: none; }
}
/* Phones and tablets: a bottom sheet once JavaScript is running. */
@media (max-width: 63.99rem) {
    .js .filters {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-buybar) + 1);
        max-height: 86dvh; display: flex; flex-direction: column; border-radius: var(--radius-2) var(--radius-2) 0 0;
        box-shadow: var(--shadow-panel); transform: translateY(102%); visibility: hidden;
        transition: transform var(--dur-slow) var(--ease-enter), visibility 0s linear var(--dur-slow);
    }
    .js .filters.is-open { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-enter), visibility 0s; }
    .js .filters__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--rule); }
    .js .filters__head h2 { font-size: var(--t-3); }
    .js .filters__form { flex: 1; overflow-y: auto; padding: 0 var(--s-5); overscroll-behavior: contain; }
    .js .facet:first-child { border-top: 0; }
    .js .filters__foot { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--s-5)); padding: var(--s-3) var(--s-5) max(var(--s-3), env(safe-area-inset-bottom)); background: var(--paper); }
    .filters-backdrop { position: fixed; inset: 0; z-index: var(--z-buybar); background: rgba(6, 22, 42, .48); animation: fade-in var(--dur-base) var(--ease-standard); }
    html:not(.js) .filters { padding: 0 var(--s-4); border: 1px solid var(--rule); }
}

.results__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule); }
.results__count { flex: 1 1 12rem; color: var(--ink-2); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.results__count strong { color: var(--ink); font-size: var(--t-body); }
.results__filters { min-height: 2.75rem; padding: 0 var(--s-4); }
html:not(.js) .results__filters { display: none; }
.results__badge { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: var(--action); color: var(--paper); font-size: var(--t-micro); }
@media (min-width: 64rem) { .results__filters { display: none; } }
.sort { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--ink-3); }
.sort select { min-height: 2.75rem; font-size: var(--t-small); color: var(--ink); }
.results[aria-busy="true"] .grid { opacity: .45; transition: opacity var(--dur-fast); }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: calc(-1 * var(--s-2)) 0 var(--s-5); }
.chip {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.25rem; padding: 0 var(--s-3);
    border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--board);
    font-size: var(--t-small); font-weight: 500; text-decoration: none;
}
.chip:hover { border-color: var(--ink); }
.chips__clear { font-size: var(--t-small); font-weight: 600; color: var(--ink-2); margin-left: var(--s-2); }

.empty { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-5); text-align: center; border: 1px dashed var(--rule-strong); background: var(--board); }
.empty h2 { font-size: var(--t-2); }
.empty p { max-width: 46ch; color: var(--ink-2); }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-3); }
.empty--quiet { border-style: solid; }
/* The unlit state: an opened, empty box drawn in outline. */
.empty__mark { position: relative; width: 3.5rem; height: 2.6rem; margin-bottom: var(--s-3); border: 1.5px solid var(--rule-strong); border-top: 0; }
.empty__mark::before, .empty__mark::after { content: ""; position: absolute; top: -1px; width: 55%; height: 1.5px; background: var(--rule-strong); }
.empty__mark::before { left: -12%; transform: rotate(-24deg); transform-origin: right center; }
.empty__mark::after { right: -12%; transform: rotate(24deg); transform-origin: left center; }

.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); margin-top: var(--s-8); }
.pager__step { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 2.75rem; font-weight: 600; text-decoration: none; justify-self: start; }
.pager__step--next { justify-self: end; }
.pager__step:hover { color: var(--action); }
.pager__pages { display: flex; gap: var(--s-1); }
.pager__pages a, .pager__pages span { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; border-radius: var(--radius); text-decoration: none; font-variant-numeric: tabular-nums; }
.pager__pages a:hover { background: var(--board); }
.pager__pages [aria-current="page"] { background: var(--ink); color: var(--paper); font-weight: 700; }
@media (max-width: 29.99rem) {
    .pager { grid-template-columns: auto auto; justify-content: space-between; }
    .pager__pages { display: none; }
}

/* -------------------------------------------------------------------------
   13. Product page
   ------------------------------------------------------------------------- */
.pdp { padding-bottom: var(--s-7); }
.pdp__grid { display: grid; gap: var(--s-6); }
@media (min-width: 64rem) { .pdp__grid { grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .88fr); gap: var(--s-8); align-items: start; } }

.gallery { min-width: 0; }
.gallery__stage { position: relative; background: var(--board); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.gallery__stage--empty { aspect-ratio: 1; display: grid; place-items: center; color: var(--ink-3); font-weight: 700; font-stretch: var(--stretch-label); letter-spacing: .1em; text-transform: uppercase; }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: center; display: grid; place-items: center; overflow: hidden; }
.gallery__slide img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--dur-slow) var(--ease-emphasis); }
.gallery.is-zooming .gallery__slide img { transition: transform var(--dur-fast) linear; transform: scale(2); cursor: zoom-out; }
.gallery__expand {
    position: absolute; top: var(--s-3); right: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 2.5rem; padding: 0 var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); font-size: var(--t-small); font-weight: 600;
}
.gallery__expand span { display: none; }
@media (min-width: 48rem) { .gallery__expand span { display: inline; } }
.gallery__counter { position: absolute; left: var(--s-3); bottom: var(--s-3); padding: .15rem .5rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); font-size: var(--t-micro); font-variant-numeric: tabular-nums; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
.gallery__thumbs button { display: grid; place-items: center; aspect-ratio: 1; width: 100%; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--board); }
.gallery__thumbs img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (min-width: 64rem) {
    .gallery { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
    .gallery__counter { display: none; }
    .gallery__stage { cursor: zoom-in; }
}

.buybox { display: flex; flex-direction: column; gap: var(--s-4); }
@media (min-width: 64rem) { .buybox { position: sticky; top: calc(var(--header-h) + var(--s-4)); } }
.buybox__line { color: var(--ink-3); }
.buybox__line a { text-decoration: none; }
.buybox__line a:hover { color: var(--action); text-decoration: underline; }
.buybox h1 { font-size: clamp(1.55rem, 1.2rem + 1.25vw, 2.2rem); font-stretch: 108%; line-height: 1.12; letter-spacing: -.02em; }
.buybox__stock { font-size: var(--t-small); }
.buy { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-block: 1px solid var(--rule); }
.buy .stepper { height: 3rem; }
.buy__now { grid-column: 1 / -1; }
.buy__note { grid-column: 1 / -1; font-size: var(--t-small); color: var(--ink-2); }
.buy--unavailable { display: grid; gap: var(--s-3); grid-template-columns: 1fr; color: var(--ink-2); }
.buy--unavailable .button { justify-self: start; }
.buy--compact { border: 0; padding: 0; }
.facts { display: grid; gap: var(--s-3); }
.facts li { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--s-3); align-items: start; color: var(--ink-2); font-size: var(--t-small); }
.facts li > .icon { justify-self: center; color: var(--ink); margin-top: .1rem; }
.facts strong { display: block; color: var(--ink); font-weight: 650; }
.buybox__business { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--board); border: 1px solid var(--rule); font-size: var(--t-small); color: var(--ink-2); }
.buybox__business a { color: var(--action); font-weight: 600; }

.pdp-details { padding-bottom: var(--s-4); }
.pdp-block { display: grid; gap: var(--s-4); padding-block: var(--s-7); border-top: 1px solid var(--rule); }
.pdp-block > h2 { font-size: var(--t-3); }
@media (min-width: 64rem) { .pdp-block { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-7); } }
.pdp-overview { display: grid; gap: var(--s-6); }
.pdp-overview__text { max-width: 70ch; color: var(--ink-2); font-size: var(--t-4); line-height: 1.7; }
.pdp-overview__highlights h3 { color: var(--ink-3); margin-bottom: var(--s-3); }
.product-highlights { display: grid; gap: var(--s-2); }
.product-highlights li { position: relative; padding-left: var(--s-5); color: var(--ink-2); }
.product-highlights li::before { content: ""; position: absolute; left: 0; top: .72em; width: .6rem; height: 1.5px; background: var(--action); }
@media (min-width: 80rem) { .pdp-overview:has(.pdp-overview__highlights) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-8); } }
.spec-groups { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .spec-groups { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-7); } }
.spec-group h3 { color: var(--ink-3); padding-bottom: var(--s-2); border-bottom: 2px solid var(--ink); }
.product-specifications div { display: grid; grid-template-columns: minmax(7rem, .8fr) 1.2fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.product-specifications dt { color: var(--ink-3); font-size: var(--t-small); }
.product-specifications dd { font-weight: 600; font-size: var(--t-small); overflow-wrap: anywhere; }
.spec-groups__note { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--t-small); }
.spec-groups__note a { color: var(--action); }
.pdp-delivery { display: grid; gap: var(--s-3); color: var(--ink-2); max-width: 70ch; }
.pdp-delivery strong { color: var(--ink); }
.pdp-delivery__links { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-2); }
.pdp-delivery__links a { color: var(--action); font-weight: 600; }

.recent { padding-top: 0; }
.recent__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-3); }
.recent__item { display: grid; grid-template-columns: 4rem 1fr; gap: var(--s-3); align-items: center; padding: var(--s-2); border: 1px solid var(--rule); text-decoration: none; }
.recent__item:hover { border-color: var(--ink); }
.recent__item img { width: 4rem; height: 4rem; object-fit: contain; background: var(--board); mix-blend-mode: multiply; }
.recent__item span { font-size: var(--t-small); font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent__item small { display: block; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Sticky purchase bar on phones once the main button leaves the screen */
.buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-buybar);
    padding: var(--s-3) var(--gutter) max(var(--s-3), env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--rule); box-shadow: 0 -16px 30px -24px rgba(6, 37, 74, .5);
    transform: translateY(110%); transition: transform var(--dur-base) var(--ease-enter);
}
.buybar.is-visible { transform: none; }
.buybar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.buybar__price { display: grid; line-height: 1.15; }
.buybar__price span { font-size: var(--t-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.buybar__price small { color: var(--ink-3); font-size: var(--t-micro); }
.buybar .button { flex: 0 1 12rem; }
@media (min-width: 64rem) { .buybar { display: none; } }

/* -------------------------------------------------------------------------
   14. Content pages, FAQs, services, journal article
   ------------------------------------------------------------------------- */
.page-body { display: grid; gap: var(--s-7); padding-block: var(--s-8) var(--section); }
@media (min-width: 64rem) { .page-body { grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--s-9); } }
.page-body__aside { align-self: start; padding: var(--s-5); border: 1px solid var(--rule); background: var(--board); }
@media (min-width: 64rem) { .page-body__aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.page-body__aside h2 { color: var(--ink-3); margin-bottom: var(--s-3); }
.page-body__aside address, .footer-brand address { display: grid; gap: var(--s-2); font-size: var(--t-small); color: var(--ink-2); }
.page-body__aside address > *, .footer-brand address > * { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; }
.page-body__aside address a:hover, .footer-brand address a:hover { color: var(--action); text-decoration: underline; }
.values { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .values { grid-template-columns: 1fr 1fr; } }
.values li { padding: var(--s-5); border: 1px solid var(--rule); border-top: 2px solid var(--ink); }
.values h2 { font-size: var(--t-3); margin-bottom: var(--s-2); }
.faq { border-top: 2px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 3.75rem; padding: var(--s-3) 0;
    color: var(--ink); font-weight: 600; list-style: none; cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { transition: transform var(--dur-base) var(--ease-standard); }
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__item p { padding-bottom: var(--s-5); }

.svc-hero { background: var(--sleeve); color: var(--on-sleeve); padding-block: var(--s-8) var(--s-7); }
.svc-hero__grid { display: grid; gap: var(--s-7); }
.svc-hero h1 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.03em; max-width: 12ch; }
.svc-hero h1 em { font-style: normal; font-weight: 300; color: var(--on-sleeve); }
.svc-hero__intro { margin-top: var(--s-5); max-width: 50ch; color: var(--on-sleeve-2); font-size: var(--t-4); }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.svc-facts { display: grid; gap: var(--s-2); align-self: end; padding-top: var(--s-4); border-top: 1px solid var(--on-sleeve-rule); color: var(--on-sleeve-2); }
.svc-facts strong { color: var(--on-sleeve); font-variant-numeric: tabular-nums; }
.svc-capabilities { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-7); }
.svc-capabilities li { padding: var(--s-1) var(--s-3); border: 1px solid var(--on-sleeve-rule); border-radius: var(--radius); color: var(--on-sleeve-2); font-size: var(--t-small); }
@media (min-width: 64rem) { .svc-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-9); } }
.svc-statement__grid { display: grid; gap: var(--s-5); }
.svc-statement h2 { font-size: var(--t-1); max-width: 14ch; }
.svc-statement p { max-width: 58ch; color: var(--ink-2); font-size: var(--t-4); margin-bottom: var(--s-5); }
@media (min-width: 64rem) { .svc-statement__grid { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }
.svc-deck { padding-bottom: var(--section); }
.svc-jump { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.svc-jump a { padding: var(--s-2) var(--s-3); border: 1px solid var(--rule); border-radius: var(--radius); font-size: var(--t-small); font-weight: 600; text-decoration: none; }
.svc-jump a:hover { border-color: var(--ink); }
.svc { padding-top: var(--s-6); margin-top: var(--s-6); border-top: 2px solid var(--ink); }
.svc__banner img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 48rem) { .svc__banner img { aspect-ratio: 21 / 9; } }
.svc__grid { display: grid; gap: var(--s-6); padding-top: var(--s-6); }
.svc__name { color: var(--ink-3); margin-bottom: var(--s-4); }
.svc__intro h3 { font-size: var(--t-2); margin: var(--s-2) 0 var(--s-4); }
.svc__intro > p:not(.svc__name) { color: var(--ink-2); margin-bottom: var(--s-5); max-width: 52ch; }
.svc__features { display: grid; gap: 0 var(--s-6); align-content: start; }
.svc__features li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: var(--t-small); }
.svc__features strong { display: block; color: var(--ink); font-size: var(--t-body); }
@media (min-width: 64rem) { .svc__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-9); } .svc__features { grid-template-columns: 1fr 1fr; } }
.svc-process { background: var(--board); border-block: 1px solid var(--rule); }
.steps { display: grid; gap: var(--s-4); counter-reset: step; }
.steps li { counter-increment: step; padding: var(--s-5); background: var(--paper); border: 1px solid var(--rule); }
.steps li::before { content: counter(step); display: block; margin-bottom: var(--s-5); font-size: var(--t-2); font-weight: 700; font-stretch: var(--stretch-display); color: var(--action); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--t-4); margin-bottom: var(--s-2); }
.steps p { color: var(--ink-2); font-size: var(--t-small); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.svc-cta { background: var(--sleeve); color: var(--on-sleeve); padding-block: var(--section); }
.svc-cta__inner { display: grid; gap: var(--s-4); justify-items: start; }
.svc-cta h2 { font-size: var(--t-1); }
.svc-cta p { max-width: 52ch; color: var(--on-sleeve-2); font-size: var(--t-4); }
.svc-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }

.article__head { display: grid; gap: var(--s-4); padding-block: var(--s-6) var(--s-6); max-width: 52rem; margin-left: max(var(--gutter), (100vw - var(--container)) / 2); }
.article__head h1 { font-size: var(--t-1); }
.article__lead { color: var(--ink-2); font-size: var(--t-3); line-height: 1.45; font-weight: 400; }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--ink-3); font-size: var(--t-small); }
.article__figure { margin-block: 0 var(--s-6); }
.article__figure img { width: 100%; max-height: 34rem; object-fit: cover; }
.article__body { padding-bottom: var(--section); margin-left: 0; }
@media (min-width: 64rem) { .article__body { margin-left: calc(100% / 12); } }

/* -------------------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--board); border-top: 1px solid var(--rule); }
.footer-help { background: var(--sleeve); color: var(--on-sleeve); }
.footer-help__inner { display: grid; gap: var(--s-4); padding-block: var(--s-8); }
.footer-help h2 { font-size: var(--t-1); }
.footer-help p { max-width: 50ch; color: var(--on-sleeve-2); font-size: var(--t-4); }
.footer-help__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
@media (min-width: 64rem) { .footer-help__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-4) var(--s-9); } .footer-help__actions { grid-column: 2; } .footer-help h2 { grid-row: span 2; } }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-5); padding-block: var(--s-8) var(--s-7); }
.footer-brand { grid-column: 1 / -1; display: grid; gap: var(--s-4); max-width: 26rem; }
.footer-brand__logo img { height: 3rem; width: auto; }
.footer-brand > p { color: var(--ink-2); font-size: var(--t-small); }
.footer-col h2 { color: var(--ink-3); margin-bottom: var(--s-3); }
.footer-col li a { display: inline-block; padding: var(--s-1) 0; font-size: var(--t-small); text-decoration: none; }
.footer-col li a:hover { color: var(--action); text-decoration: underline; }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); } .footer-brand { grid-column: auto; } }
.footer-proof { display: grid; gap: var(--s-3); padding-block: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--t-small); color: var(--ink-2); }
.footer-proof p { display: flex; align-items: center; gap: var(--s-3); }
.footer-proof .icon { color: var(--ink); margin-inline: .5rem; }
@media (min-width: 64rem) { .footer-proof { grid-template-columns: repeat(3, auto); justify-content: space-between; } }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); padding-block: var(--s-5) var(--s-7); border-top: 1px solid var(--rule); font-size: var(--t-micro); color: var(--ink-3); }
.footer-base a { color: var(--ink-2); }
body:has(.buybar) .footer-base { padding-bottom: 6rem; }
@media (min-width: 64rem) { body:has(.buybar) .footer-base { padding-bottom: var(--s-7); } }

/* -------------------------------------------------------------------------
   16. Error pages
   ------------------------------------------------------------------------- */
.error-page { background: var(--board); }
.error-page__bar { padding: var(--s-4) var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule); }
.error-page__bar img { height: 2.6rem; width: auto; }
.error-page__main { display: grid; gap: var(--s-4); justify-items: start; width: min(40rem, 100% - 2 * var(--gutter)); margin: var(--s-9) auto; }
.error-page__code { color: var(--ink-3); }
.error-page h1 { font-size: var(--t-1); }
.error-page__main > p:not(.error-page__code) { color: var(--ink-2); font-size: var(--t-4); }
.error-page .search-form { width: 100%; }
.error-page__links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.error-page__links a { display: inline-flex; padding: var(--s-2) var(--s-3); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); font-weight: 600; text-decoration: none; }

/* -------------------------------------------------------------------------
   18. Forms, sign-in and the customer account
   The account belongs to the shop: board page heads, ruled tables and
   panels, one navy sleeve on the sign-in pages. Never a dashboard.
   ------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) {
    .form__row { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
    .form__row--3 { grid-template-columns: 1.15fr 1.15fr .7fr; }
}
.form--panel { max-width: 44rem; padding: var(--s-5); border: 1px solid var(--rule); background: var(--paper); }
@media (min-width: 48rem) { .form--panel { padding: var(--s-6); } }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.form__note { color: var(--ink-3); font-size: var(--t-small); }

.field { position: relative; display: grid; gap: var(--s-2); align-content: start; }
.field__label { color: var(--ink); font-size: var(--t-small); font-weight: 600; line-height: 1.3; }
.field__optional { color: var(--ink-3); font-weight: 400; }
.field__hint { margin-top: -.15rem; color: var(--ink-3); font-size: var(--t-small); }
.field__control { position: relative; }
.field__input {
    width: 100%; min-height: 3rem; padding: 0 var(--s-4);
    border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper);
    font-size: 1rem; /* 16px: phones never zoom into the field */
    transition: border-color var(--dur-fast) var(--ease-standard), outline-color var(--dur-fast) var(--ease-standard);
}
.field__input:hover { border-color: var(--ink-3); }
.field__input:focus { border-color: var(--action); outline: 3px solid var(--action-wash); outline-offset: 0; }
.field__input--area { min-height: 6rem; padding-block: var(--s-3); line-height: 1.5; resize: vertical; }
.field__input[readonly] { background: var(--board); color: var(--ink-2); }
.field__select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306254a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.1rem; }
.field--invalid .field__input { border-color: var(--danger); }
.field--invalid .field__input:focus { outline-color: var(--danger-wash); }
.field__error { display: flex; align-items: flex-start; gap: var(--s-2); color: var(--danger); font-size: var(--t-small); font-weight: 500; }
.field__error .icon { margin-top: .15rem; }
.field__control--password .field__input { padding-right: 3.25rem; }
.field__toggle {
    position: absolute; top: 1px; right: 1px; bottom: 1px; display: grid; place-items: center; width: 2.9rem;
    border: 0; border-radius: var(--radius); background: none; color: var(--ink-2);
}
.field__toggle:hover { color: var(--ink); background: var(--board); }
.field__aside-link { position: absolute; top: 0; right: 0; font-size: var(--t-small); font-weight: 600; color: var(--action); text-decoration: none; line-height: 1.3; }
.field__aside-link:hover { text-decoration: underline; }
.field__status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); color: var(--ink-3); font-size: var(--t-small); }
.field__status .icon { color: var(--ok); }
.field__inline-button { padding: 0; border: 0; background: none; color: var(--action); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
[data-collapsible] { display: none; }
html:not(.js) [data-collapsible], [data-collapsible].is-open { display: block; }

.check { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); color: var(--ink-2); font-size: var(--t-small); line-height: 1.45; cursor: pointer; }
.check input { position: absolute; top: 0; left: 0; width: 1.25rem; height: 1.25rem; margin: 0; opacity: 0; }
.check__box {
    display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; margin-top: .05rem;
    border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); color: var(--paper);
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.check:hover .check__box { border-color: var(--ink); }
.check input:checked + .check__box { background: var(--action); border-color: var(--action); }
.check input:not(:checked) + .check__box .icon { visibility: hidden; }
.check input:focus-visible + .check__box { outline: 2px solid var(--action); outline-offset: 2px; }
.field--invalid .check__box { border-color: var(--danger); }
.check a { color: var(--action); font-weight: 600; }

.button[aria-busy="true"]::before {
    content: ""; width: 1rem; height: 1rem; flex: none; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.notice {
    display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4);
    border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--paper); color: var(--ink); font-size: var(--t-small);
}
.notice > .icon { margin-top: .1rem; color: var(--ok); }
.notice--error { border-color: var(--danger); background: var(--danger-wash); }
.notice--error > .icon { color: var(--danger); }
.notice--info > .icon { color: var(--ink); }

/* Password strength: honest to the server's rules, never a gamified score. */
.strength { display: grid; gap: var(--s-1); }
.strength__bar { height: 3px; background: var(--board-2); border-radius: var(--radius); overflow: hidden; }
.strength__bar span { display: block; height: 100%; transform: scaleX(var(--strength, 0)); transform-origin: left; background: var(--strength-tone, var(--danger)); transition: transform var(--dur-base) var(--ease-standard), background-color var(--dur-base); }
.strength__label { color: var(--ink-3); font-size: var(--t-micro); font-weight: 600; }
.rules { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.rules li { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ink-3); font-size: var(--t-small); transition: color var(--dur-fast); }
.rules .icon { opacity: .3; transition: opacity var(--dur-fast); }
.rules .is-met { color: var(--ok); }
.rules .is-met .icon { opacity: 1; }

/* Sign-in pages: form on paper, the account's value on a navy sleeve. */
.auth { border-bottom: 1px solid var(--rule); }
.auth__grid { display: grid; }
.auth__main { width: min(28rem, 100%); padding-block: var(--s-6) var(--s-8); }
.auth__back { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ink-2); font-size: var(--t-small); font-weight: 600; text-decoration: none; }
.auth__back:hover { color: var(--action); }
.auth__title { margin-top: var(--s-6); font-size: var(--t-1); }
.auth__lead { margin: var(--s-3) 0 var(--s-6); color: var(--ink-2); font-size: var(--t-4); max-width: 40ch; }
.auth__notice { margin-bottom: var(--s-5); }
.auth__switch { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); color: var(--ink-2); }
.auth__switch a { color: var(--action); font-weight: 600; }
.auth__sleeve {
    display: grid; gap: var(--s-6); align-content: center;
    margin-inline: calc(-1 * var(--gutter)); padding: var(--s-7) var(--gutter);
    background: var(--sleeve); color: var(--on-sleeve);
}
.auth__sleeve-title { font-size: var(--t-2); max-width: 16ch; }
.auth__benefits { display: grid; gap: var(--s-4); }
.auth__benefits li { display: flex; gap: var(--s-3); color: var(--on-sleeve-2); }
.auth__benefits .icon { margin-top: .1rem; color: var(--on-sleeve-accent); }
.auth__benefits strong { color: var(--on-sleeve); font-weight: 600; }
.auth__promises { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--on-sleeve-rule); }
.auth__promises dt { font-size: var(--t-small); font-weight: 600; }
.auth__promises dd { color: var(--on-sleeve-2); font-size: var(--t-micro); }
@media (min-width: 64rem) {
    .auth__grid {
        width: 100%; max-width: none; margin: 0;
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 38%);
        min-height: calc(100svh - var(--header-h) - var(--strip-h));
    }
    .auth__main { justify-self: center; align-self: center; width: min(28rem, 100% - 2 * var(--gutter)); padding-block: var(--s-8); }
    .auth__sleeve { margin: 0; padding: var(--s-8) max(var(--gutter), (100vw - var(--container)) / 2) var(--s-8) var(--s-8); }
}

/* Sign-in stays focused: no second navy band straight under the sleeve. */
main:has(> .auth) ~ .site-footer .footer-help { display: none; }

/* Account shell */
.account-head { background: var(--board); border-bottom: 1px solid var(--rule); }
.account-head__inner { padding-block: var(--s-5) var(--s-6); }
.account-head__title { margin-top: var(--s-3); font-size: var(--t-1); overflow-wrap: anywhere; }
.account-head__lead { margin-top: var(--s-2); color: var(--ink-2); overflow-wrap: anywhere; }
/* minmax(0, 1fr): the scrolling tab row must never widen the page. */
.account__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding-block: 0 var(--section); }
.account-nav { min-width: 0; }
.receipt__items th[scope="row"] { overflow-wrap: anywhere; }
@media (max-width: 29.99rem) { .receipt__items th, .receipt__items td { padding-inline: var(--s-2); } .receipt__items thead th:nth-child(3), .receipt__items tbody td:nth-child(3) { display: none; } }
.account__main { min-width: 0; }
.account__notice { margin-bottom: var(--s-5); }
.account-nav { margin-inline: calc(-1 * var(--gutter)); border-bottom: 1px solid var(--rule); }
.account-nav__list { display: flex; gap: var(--s-1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.account-nav__list::-webkit-scrollbar { display: none; }
.account-nav__link {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: 3rem; padding: 0 var(--s-3);
    color: var(--ink-2); font-size: var(--t-small); font-weight: 600; text-decoration: none; white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent; transition: color var(--dur-fast), box-shadow var(--dur-fast);
}
.account-nav__link:hover { color: var(--ink); }
.account-nav__link.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--action); }
.account-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.account-foot__signout, .account-foot__staff {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding: 0;
    border: 0; background: none; color: var(--ink-2); font-size: var(--t-small); font-weight: 600; text-decoration: none;
}
.account-foot__signout:hover { color: var(--danger); }
.account-foot__staff:hover { color: var(--action); }
@media (min-width: 64rem) {
    .account__grid { grid-template-columns: 14.5rem minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 var(--s-8); padding-top: var(--s-7); }
    .account-nav { grid-column: 1; grid-row: 1; margin: 0; border: 0; border-top: 2px solid var(--ink); }
    .account-nav__list { display: grid; gap: 0; padding: 0; overflow: visible; }
    .account-nav__link { display: flex; padding: 0 var(--s-3); border-bottom: 1px solid var(--rule); box-shadow: none; white-space: normal; }
    .account-nav__link.is-active { background: var(--board); box-shadow: inset 2px 0 0 var(--action); }
    .account__main { grid-column: 2; grid-row: 1 / span 2; }
    .account-foot { grid-column: 1; grid-row: 2; align-self: start; display: grid; justify-content: start; gap: 0; padding-top: var(--s-4); border: 0; }
}

.account-block { display: grid; gap: var(--s-4); align-content: start; }
.account-block + .account-block, .account-block + .account-split, .account-split + .account-actions { margin-top: var(--s-7); }
.account-split > .account-block, .order-detail__aside > .account-block { margin-top: 0; }
.account-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.account-block__title { font-size: var(--t-3); }
.account-block__text { color: var(--ink-2); font-size: var(--t-small); }
.account-block--panel { padding: var(--s-5); border: 1px solid var(--rule); background: var(--paper); }
.account-split { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .account-split { grid-template-columns: 1fr 1fr; } }
.account-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.account-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--s-5); }
.account-count { margin-bottom: var(--s-4); color: var(--ink-3); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.account-back { margin-top: var(--s-7); }
.link-arrow--back:hover .icon { transform: translateX(-3px); }
.account-contact { display: grid; gap: var(--s-2); }
.account-contact a { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.account-contact a:hover { color: var(--action); text-decoration: underline; }

.welcome { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); padding: var(--s-5) var(--s-6); background: var(--sleeve); color: var(--on-sleeve); }
.welcome__title { font-size: var(--t-2); }
.welcome p { color: var(--on-sleeve-2); }
.welcome__steps { display: grid; gap: var(--s-2); counter-reset: welcome; color: var(--on-sleeve-2); }
.welcome__steps li { counter-increment: welcome; display: flex; gap: var(--s-3); }
.welcome__steps li::before { content: counter(welcome); color: var(--on-sleeve-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.welcome__steps a { color: var(--on-sleeve); font-weight: 600; }
.welcome__icon { display: inline; vertical-align: -.2em; }

.verify-band { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); padding: var(--s-4) var(--s-5); border: 1px solid var(--rule); background: var(--board); }
.verify-band__title { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.verify-band__title::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--warn); }
.verify-band p:not(.verify-band__title) { color: var(--ink-2); font-size: var(--t-small); overflow-wrap: anywhere; }
@media (min-width: 48rem) { .verify-band { grid-template-columns: 1fr auto; align-items: center; gap: var(--s-6); } }

.latest-order { display: grid; gap: var(--s-5); padding: var(--s-5); border: 1px solid var(--rule); border-top: 2px solid var(--ink); }
.latest-order__number { color: var(--ink-3); font-size: var(--t-micro); font-weight: 600; font-stretch: var(--stretch-label); letter-spacing: .08em; text-transform: uppercase; }
.latest-order__status { margin-top: var(--s-2); font-size: var(--t-3); }
.latest-order__detail { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--t-small); }
.latest-order__facts { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); }
.latest-order__facts dt { color: var(--ink-3); font-size: var(--t-micro); }
.latest-order__facts dd { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 64rem) {
    .latest-order { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-7); }
}

.tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
@media (min-width: 48rem) { .tally { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tally a { display: grid; gap: var(--s-1); padding: var(--s-5); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-decoration: none; transition: background-color var(--dur-fast); }
.tally a:hover { background: var(--board); }
.tally__count { font-size: var(--t-2); font-weight: 700; font-stretch: var(--stretch-display); font-variant-numeric: tabular-nums; line-height: 1; }
.tally__label { color: var(--ink-2); font-size: var(--t-small); }

.order-status { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); font-weight: 600; }
.order-status__mark { width: .5rem; height: .5rem; flex: none; border-radius: 50%; background: var(--ink); }
.order-status--ok { color: var(--ok); }
.order-status--ok .order-status__mark { background: var(--ok); box-shadow: 0 0 0 3px rgba(23, 115, 74, .14); }
.order-status--warn { color: var(--warn); }
.order-status--warn .order-status__mark { background: var(--warn); }
.order-status--muted { color: var(--ink-3); }
.order-status--muted .order-status__mark { background: transparent; box-shadow: inset 0 0 0 1.5px var(--off); }
.pay-state { font-size: var(--t-small); color: var(--ink-2); }
.pay-state--ok { color: var(--ok); font-weight: 600; }
.pay-state--warn { color: var(--warn); font-weight: 600; }
.pay-state--muted { color: var(--ink-3); }

/* Ledgers: printed tables with a heavy ink head rule. */
.ledger { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); font-size: var(--t-small); }
.ledger thead th { padding: var(--s-3); color: var(--ink-3); font-size: var(--t-micro); font-weight: 600; font-stretch: var(--stretch-label); letter-spacing: .08em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--rule); }
.ledger tbody th, .ledger tbody td { padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.ledger tbody th { font-weight: 600; }
.ledger tbody th a { text-decoration: none; }
.ledger tbody th a:hover { color: var(--action); text-decoration: underline; }
.ledger .ledger__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .ledger__action { text-align: right; white-space: nowrap; }
.ledger thead th:first-child, .ledger tbody th { padding-left: 0; }
.ledger thead th:last-child, .ledger tbody td:last-child { padding-right: 0; }
.ledger--list { display: none; }
.order-cards { display: grid; gap: var(--s-3); }
@media (min-width: 48rem) { .ledger--list { display: table; } .order-cards { display: none; } }
.order-card__link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); padding: var(--s-4); border: 1px solid var(--rule); text-decoration: none; transition: border-color var(--dur-fast); }
.order-card__link:hover { border-color: var(--ink); }
.order-card__number { font-weight: 700; overflow-wrap: anywhere; }
.order-card__total { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.order-card__status { grid-column: 1 / -1; }
.order-card__meta { grid-column: 1 / -1; color: var(--ink-3); font-size: var(--t-small); }
.order-card__cta { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); color: var(--action); font-size: var(--t-small); font-weight: 600; }

/* Order detail */
.order-detail { display: grid; gap: var(--s-6); }
.order-detail__main { min-width: 0; }
.order-detail__aside { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 64rem) { .order-detail { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--s-7); } }
.order-state { display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--board); border: 1px solid var(--rule); border-top: 2px solid var(--ink); }
.order-state--ok .order-state__title { color: var(--ok); }
.order-state--warn .order-state__title { color: var(--warn); }
.order-state--muted .order-state__title { color: var(--ink-3); }
.order-state__label { color: var(--ink-3); font-size: var(--t-micro); font-weight: 600; font-stretch: var(--stretch-label); letter-spacing: .08em; text-transform: uppercase; }
.order-state__title { font-size: var(--t-2); }
.order-state__detail { color: var(--ink-2); }
.order-state__tracking { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); font-size: var(--t-small); }
.order-state + .account-block { margin-top: var(--s-7); }

.timeline { display: grid; }
.timeline__step { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--s-3); padding-bottom: var(--s-5); }
.timeline__step:not(:last-child)::before { content: ""; position: absolute; left: calc(.625rem - .5px); top: 1.5rem; bottom: .25rem; width: 1px; background: var(--rule-strong); }
.timeline__step--done:not(:last-child)::before { background: var(--ink); }
.timeline__mark { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: .1rem; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--paper); }
.timeline__step--done .timeline__mark { background: var(--ink); box-shadow: none; }
.timeline__step--current .timeline__mark { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 5px var(--paper), inset 0 0 0 10px var(--ink); }
.timeline__label { font-weight: 600; }
.timeline__step--upcoming .timeline__label { color: var(--ink-3); font-weight: 400; }
.timeline__at { color: var(--ink-3); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.timeline__detail { margin-top: var(--s-1); color: var(--ink-2); font-size: var(--t-small); }

.line-items { border-top: 2px solid var(--ink); }
.line-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.line-item__well { position: relative; aspect-ratio: 1; background: var(--board); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.line-item__well img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.line-item__body { display: grid; gap: .2rem; min-width: 0; }
.line-item__title { font-weight: 600; line-height: 1.35; }
.line-item__title a { text-decoration: none; }
.line-item__title a:hover { color: var(--action); text-decoration: underline; }
.line-item__qty { color: var(--ink-3); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.line-item__total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.totals { display: grid; max-width: 26rem; margin-left: auto; }
.totals > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-small); }
.totals dt { color: var(--ink-2); }
.totals dt span { margin-left: var(--s-1); color: var(--ink-3); font-size: var(--t-micro); }
.totals dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.totals .totals__grand { border-bottom: 0; font-size: var(--t-4); }
.totals .totals__grand dt, .totals .totals__grand dd { color: var(--ink); font-weight: 700; }
.totals .totals__discount dd { color: var(--ok); }

.kv { display: grid; }
.kv > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-small); }
.kv dt { color: var(--ink-3); }
.kv dd { font-weight: 600; text-align: right; }
.kv__code { font-size: var(--t-micro); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.address-lines { display: grid; gap: 2px; color: var(--ink-2); font-size: var(--t-small); overflow-wrap: anywhere; }
.address-lines strong, .address-lines__name { color: var(--ink); font-weight: 600; }

.account-empty { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-5); border: 1px dashed var(--rule-strong); text-align: center; }
.account-empty__mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink-3); }
.account-empty__title { font-size: var(--t-3); }
.account-empty p { max-width: 42ch; color: var(--ink-2); }
.account-empty .button { margin-top: var(--s-2); }

.saved-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); }
@media (min-width: 48rem) { .saved-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); } }
.saved-grid__item { display: grid; grid-template-rows: 1fr auto; gap: var(--s-3); }
.saved-grid__actions { display: grid; gap: var(--s-1); }
.saved-grid__actions .button { min-height: 2.75rem; padding-inline: var(--s-3); font-size: var(--t-small); }

.address-grid { display: grid; gap: var(--s-4); }
@media (min-width: 48rem) { .address-grid { grid-template-columns: 1fr 1fr; } }
.address-card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border: 1px solid var(--rule); }
.address-card--default { border-top: 2px solid var(--ink); }
.address-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.address-card__label { color: var(--ink-3); font-size: var(--t-micro); font-weight: 600; font-stretch: var(--stretch-label); letter-spacing: .08em; text-transform: uppercase; }
.address-card__badge { padding: .1rem var(--s-2); border: 1px solid var(--ink); border-radius: var(--radius); font-size: var(--t-micro); font-weight: 600; }
.address-card__notes { color: var(--ink-3); font-size: var(--t-small); }
.address-card__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.address-card__actions .button { min-height: 2.5rem; padding-inline: var(--s-3); font-size: var(--t-small); }
.address-card__remove:hover { color: var(--danger); }

.device-panel { display: grid; gap: var(--s-4); }

.save-toggle { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: var(--t-small); font-weight: 600; }
.save-toggle:hover { color: var(--ink); }

/* Receipts: a document you can keep. */
.receipt-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.receipt { display: grid; gap: var(--s-6); max-width: 52rem; padding: var(--s-5); border: 1px solid var(--rule); background: var(--paper); }
@media (min-width: 48rem) { .receipt { padding: var(--s-7); } }
.receipt__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 2px solid var(--ink); }
.receipt__head img { height: 2.75rem; width: auto; }
.receipt__id { text-align: right; }
.receipt__title { font-size: var(--t-2); }
.receipt__number { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.receipt__parties { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .receipt__parties { grid-template-columns: 1fr 1fr 1.1fr; } }
.receipt__label { margin-bottom: var(--s-2); color: var(--ink-3); font-size: var(--t-micro); font-weight: 600; font-stretch: var(--stretch-label); letter-spacing: .08em; text-transform: uppercase; }
.receipt__brand { display: block; color: var(--ink-3); font-size: var(--t-micro); font-weight: 400; }
.receipt__totals { width: 100%; }
.receipt__delivery { font-size: var(--t-small); color: var(--ink-2); }
.receipt__foot { padding-top: var(--s-4); border-top: 1px solid var(--rule); color: var(--ink-3); font-size: var(--t-small); }

@media print {
    .service-strip, .masthead, .site-footer, .account-head, .account-nav, .account-foot, .receipt-tools,
    .skip-link, .verify-band, .account__notice, dialog, .toast { display: none !important; }
    body { background: #fff; }
    .account__grid { display: block; padding: 0; }
    .receipt { max-width: none; padding: 0; border: 0; }
    .ledger--list { display: table; }
    .order-cards { display: none; }
}

/* -------------------------------------------------------------------------
   17. Motion policy
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    .skeleton { animation: none; }
    .card:hover .card__img, .department:hover .department__picture img { transform: none; }
}

/* -------------------------------------------------------------------------
   Floating deals card — one campaign, unobtrusive, always dismissible
   ------------------------------------------------------------------------- */
.promo {
    --promo-z: calc(var(--z-buybar) - 1);
    position: fixed; right: var(--gutter); bottom: max(var(--s-5), env(safe-area-inset-bottom)); z-index: var(--promo-z);
    display: grid; justify-items: end; max-width: min(22rem, calc(100vw - 2 * var(--gutter)));
}
body:has(.buybar.is-visible) .promo { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
.promo__pill {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; padding: 0 var(--s-4) 0 var(--s-3);
    border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow-panel);
    font-size: var(--t-small); font-weight: 700; cursor: pointer;
}
.promo__pill:hover { background: var(--sleeve-2); }
.promo__pill-badge { padding: .1rem .45rem; border-radius: 999px; background: var(--deal); font-size: var(--t-micro); letter-spacing: .02em; text-transform: uppercase; }
.promo__panel {
    width: 100%; padding: var(--s-4); display: grid; gap: var(--s-2);
    background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--deal); border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
}
.promo.is-open .promo__pill { display: none; }
.promo__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.promo__badge { padding: .15rem .5rem; border-radius: var(--radius); background: var(--deal); color: var(--paper); font-size: var(--t-micro); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.promo__controls { display: flex; margin-right: calc(-1 * var(--s-2)); }
.promo__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--ink-3); cursor: pointer; }
.promo__icon:hover { color: var(--ink); background: var(--board); }
.promo__headline { font-size: var(--t-3); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.promo__body { color: var(--ink-2); font-size: var(--t-small); }
.promo__code { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-2); font-size: var(--t-small); }
.promo__code button {
    display: inline-flex; align-items: center; gap: var(--s-1); padding: .2rem .55rem; cursor: pointer;
    border: 1px dashed var(--deal); border-radius: var(--radius); background: var(--deal-wash); color: var(--deal);
}
.promo__code strong { letter-spacing: .06em; }
.promo__ends { display: flex; align-items: center; gap: var(--s-1); color: var(--ink-3); font-size: var(--t-micro); font-weight: 600; }
.promo__cta { margin-top: var(--s-1); justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
    .promo.is-open .promo__panel { animation: promo-rise var(--dur-base) var(--ease-enter); }
    @keyframes promo-rise { from { opacity: 0; transform: translateY(.75rem); } }
}
@media print { .promo { display: none !important; } }

/* -------------------------------------------------------------------------
   Deals page
   ------------------------------------------------------------------------- */
.deals-head__eyebrow { display: inline-flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-2); color: var(--deal); font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.deals-head__ends { color: var(--deal); font-weight: 600; }
.deals-head__code { max-width: 46rem; margin-bottom: var(--s-6); }
.deal-campaigns { padding-top: var(--s-6); }
.deal-campaigns ul { display: grid; gap: var(--s-3); }
@media (min-width: 48rem) { .deal-campaigns ul { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } }
.deal-campaign {
    display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4) var(--s-5);
    background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--deal); border-radius: var(--radius);
}
.deal-campaign__badge { justify-self: start; padding: .15rem .5rem; border-radius: var(--radius); background: var(--deal); color: var(--paper); font-size: var(--t-micro); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.deal-campaign__title { font-size: var(--t-4); font-weight: 700; }
.deal-campaign__body { color: var(--ink-2); font-size: var(--t-small); }
.deal-campaign__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); color: var(--ink-3); font-size: var(--t-micro); }
.deal-campaign__meta strong { color: var(--deal); letter-spacing: .05em; }
.deal-campaign__link { display: inline-flex; align-items: center; gap: var(--s-1); justify-self: start; color: var(--action); font-size: var(--t-small); font-weight: 600; text-decoration: none; }
.deal-campaign__link:hover { text-decoration: underline; }
.deals-bar .sort select { max-width: 14rem; }