/* Pelicula35; "Analog care. Timeless quality."
   Brand identity: Minolta blue + sunset orange + film red on warm paper,
   Lab black ink. The signature is the descending blue/orange/red stripe and
   the blue circle mark with its white exposure bars. Clean, high-contrast,
   Swiss-lab typography: bold grotesque headlines, spaced mono labels. */

:root {
    --paper: #f4f1e6;        /* warm paper; page ground */
    --paper-2: #ece7d5;      /* deeper paper; inset panels */
    --card: #ffffff;         /* photo-paper white; cards & sleeves */
    --field-bg: #ffffff;     /* form input background */

    --ink: #111111;          /* lab black; text & headlines */
    --ink-deep: #000000;

    /* Film base. Deliberately NOT theme-swapped: a strip of film is dark
       whatever the page around it is doing, and reel headers and the lightbox
       read as film rather than as page furniture. */
    --film-base: #14120e;
    --film-ink: #f2efe6;

    /* The stage a PRODUCT PHOTOGRAPH stands on. Unlike --film-base this one
       follows the theme: a black rectangle inside a warm paper card read as a
       dark-mode fragment, not as film. Light gets a pale blue-tinted paper;
       dark keeps the film-dark ground, where the cutouts glow. The glow and
       the shadow travel as tokens too, because a highlight that lifts a dark
       stage would dirty a pale one. */
    --film-stage: #e9edf2;
    --film-stage-glow: rgba(0, 95, 151, 0.06);
    --film-stage-shadow: rgba(24, 32, 40, 0.28);

    /* Perforations, drawn as the rounded vertical slots they actually are.
       A gradient can only make ovals, so this is a data-URI so the shape is
       right; --perf-* let a rail set its own scale. */
    --perf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10'%3E%3Crect x='6' y='1' width='5' height='8' rx='1.6' fill='%23f2efe6' fill-opacity='0.55'/%3E%3C/svg%3E");
    --perf-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='13'%3E%3Crect x='7' y='2' width='5' height='9' rx='1.7' fill='%23f2efe6' fill-opacity='0.5'/%3E%3C/svg%3E");
    --rebate: #16130d;       /* near-black; headings / values (compat name) */
    --muted: #6a655c;        /* secondary text */
    --faint: #9a9488;        /* tertiary text */

    --blue: #005f97;         /* Minolta blue; primary accent (matches logo) */
    /* Link colour. Separate from --blue because the brand blue is chosen to sit
       on warm paper; on the near-black dark ground it fails contrast badly, and
       every legal page was rendering links in it. */
    --link: #005f97;
    --link-hover: #003f66;
    --blue-deep: #004a75;
    /* A wash rather than a flat colour: laid over warm paper it stays warm,
       where a mixed cool blue (#eef3fb) reads grey against it. Used for the
       selected state of the configurator's chips. */
    --blue-tint: rgba(0, 95, 151, 0.09);
    --orange: #ff6a00;       /* sunset orange */
    --red: #e60012;          /* film red */

    /* accent aliases used throughout the components */
    --neg: var(--blue);
    --neg-deep: var(--blue-deep);
    /* the three brand stripes (kept under the old dye names for compat) */
    --dye-c: #005f97;        /* blue */
    --dye-m: #e60012;        /* red; also the error colour */
    --dye-y: #ff6a00;        /* orange */

    --line: rgba(17, 17, 17, 0.12);
    --line-strong: rgba(17, 17, 17, 0.22);
    --hole: #f4f1e6;

    --panel: rgba(255, 255, 255, 0.92);
    --panel-solid: #ffffff;

    --shadow: 0 18px 44px rgba(17, 17, 17, 0.10);
    --shadow-soft: 0 8px 22px rgba(17, 17, 17, 0.06);
    --radius: 6px;
    --container: 1180px;
    --rail: 6px;             /* height of the brand stripe band */

    --font-display: "Cal Sans", "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* shared brand stripe; three separated colour bars (blue / orange / red)
       at the bottom edge of cards. Gaps are the surface colour (opaque, so
       content never shows through); defaults to --card, override --stripe-gap
       on paper-ground surfaces (legal hero, footer). */
    /* Percentage stops, NOT pixels: the bars scale to whatever --stripe-h is.
       The original stops were fixed pixels sized for a 21px stripe, and the
       day the height changed, every stripe on the site silently became one
       blue line with the orange and red cut off below the edge. Same
       proportions as the original (5:3:5:3:5). */
    --stripe: linear-gradient(180deg,
        var(--blue)   0   24%, var(--stripe-gap, var(--card)) 24% 38%,
        var(--orange) 38% 62%, var(--stripe-gap, var(--card)) 62% 76%,
        var(--red)    76% 100%);
    /* The tricolour stripe is the brand's signature, at its full size. A
       review argued it down to 9px as "too decorative"; the owner overruled
       that on 2026-08-12 -- the stripes stay, full weight. The percentage
       stops above mean this height can change without ever again cutting
       the bars off. */
    --stripe-h: 21px;

    /* retro multi-line stripe; the page rail. Gaps are opaque --paper so the
       fixed rail never lets scrolling content show through. */
    --rail-lines: linear-gradient(180deg,
        var(--blue)   0    4px, var(--paper) 4px 7px,
        var(--orange) 7px  11px, var(--paper) 11px 14px,
        var(--red)    14px 18px);
    --rail-h: 18px;
}

/* --------------------------------------------------------------------------
   Dark mode; the brand's "logo on Lab Black" world.
   Applied when the OS prefers dark (unless the visitor forced light), and
   whenever the visitor explicitly picks dark via the header toggle. Tokens
   only; every component is styled through them, so nothing else changes.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #14120e;
        --paper-2: #1e1a15;
        --card: #1d1a15;
        --field-bg: #100e0b;

        --ink: #f2efe6;
        --ink-deep: #ffffff;
        --rebate: #f6f3ea;
        --muted: rgba(242, 239, 230, 0.64);
        --faint: rgba(242, 239, 230, 0.40);

        /* brand colours stay true; only the hover blue lightens for dark */
        --blue: #005f97;
        --blue-deep: #3399cc;
        /* The brand blue is unreadable on this ground, so links lift to a
           lightened version of it rather than staying "on brand" and illegible. */
        --link: #5aa9dc;
        --link-hover: #8fc8ea;
        --orange: #ff6a00;
        --red: #e60012;

        --dye-c: #005f97;
        --dye-m: #e60012;
        --dye-y: #ff6a00;

        --line: rgba(242, 239, 230, 0.14);
        --line-strong: rgba(242, 239, 230, 0.26);
        --hole: #14120e;

        --panel: rgba(29, 26, 21, 0.94);
        --panel-solid: #1d1a15;

        --film-stage: #14120e;
        --film-stage-glow: rgba(242, 239, 230, 0.10);
        --film-stage-shadow: rgba(0, 0, 0, 0.55);

        --shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
        --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.40);
    }
}

:root[data-theme="dark"] {
    --paper: #14120e;
    --paper-2: #1e1a15;
    --card: #1d1a15;
        --field-bg: #100e0b;

    --ink: #f2efe6;
    --ink-deep: #ffffff;
    --rebate: #f6f3ea;
    --muted: rgba(242, 239, 230, 0.64);
    --faint: rgba(242, 239, 230, 0.40);

    /* brand colours stay true; only the hover blue lightens for dark */
    --blue: #005f97;
    --blue-deep: #3399cc;
    /* The brand blue is unreadable on this ground, so links lift to a
       lightened version of it rather than staying "on brand" and illegible. */
    --link: #5aa9dc;
    --link-hover: #8fc8ea;
    --orange: #ff6a00;
    --red: #e60012;

    --dye-c: #005f97;
    --dye-m: #e60012;
    --dye-y: #ff6a00;

    --line: rgba(242, 239, 230, 0.14);
    --line-strong: rgba(242, 239, 230, 0.26);
    --hole: #14120e;

    --panel: rgba(29, 26, 21, 0.94);
    --panel-solid: #1d1a15;

    --film-stage: #14120e;
    --film-stage-glow: rgba(242, 239, 230, 0.10);
    --film-stage-shadow: rgba(0, 0, 0, 0.55);

    --shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
    --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.40);
}

* { box-sizing: border-box; }

/* `hidden` means hidden.
 *
 * The browser's own rule is `[hidden] { display: none }`, at the very bottom of
 * the cascade, so ANY class that sets a display beats it. This stylesheet sets
 * display on nearly everything, so `el.hidden = true` had been quietly failing
 * all over the site and was being patched one selector at a time -- there are
 * half a dozen `.thing[hidden] { display: none }` rules further down, each
 * written the day somebody noticed another thing not hiding.
 *
 * The ones nobody had noticed yet: an add-on that does not apply to the chosen
 * service stayed on screen, right under a comment in configurator.js saying it
 * must never be seen, and the account offer's collapsed panes never collapsed.
 *
 * !important because that is the only weight that beats a class, and because
 * there is no case in this codebase where hidden is set and something is still
 * meant to be visible.
 */
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

/* Reserve the scrollbar gutter so locking scroll (menu open) never shifts the
   header or content sideways. */
html { scrollbar-gutter: stable; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Links with no component rule of their own used to fall back to the
   browser's default link blue, which the dark palette never overrides:
   near-black blue on Lab Black, unreadable (first seen on the account
   panels' note links). Element-level, so any classed rule still wins. */
a { color: var(--link); }

/* --------------------------------------------------------------------------
   Signature: the brand stripe frames the viewport top and bottom.
   -------------------------------------------------------------------------- */
.filmstrip {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 6;
    pointer-events: none;
}

.filmstrip__rail {
    position: fixed;
    left: 0;
    right: 0;
}

/* One rail, at the top of the page; a retro stack of thin brand lines. */
.filmstrip__rail--top {
    top: 0;
    height: var(--rail-h);
    background: var(--rail-lines);
}

/* Surfaces that sit on the paper ground (not a white card): the stripe gaps
   should be paper so they read as spacing, not white slivers. */
.legal-hero,
.site-footer { --stripe-gap: var(--paper); }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.site-shell {
    /* The shell's horizontal padding, as a token, so anything that needs to
       bleed to the screen edge can cancel exactly this much instead of
       guessing. Kept in step by the breakpoint below. */
    --page-pad: 22px;

    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: calc(var(--rail-h) + 30px) var(--page-pad) 30px;
}

.site-header,
.site-footer,
.hero-card,
.legal-page,
.page {
    width: min(var(--container), 100%);
    margin-left: auto;
    margin-right: auto;
}

.site-header {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 6px 0 30px;
}

.site-header__controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* --------------------------------------------------------------------------
   Brand; blue circle mark with white exposure bars + wordmark
   -------------------------------------------------------------------------- */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    color: inherit;
}

.brand-lockup__logo {
    display: block;
    max-height: 50px;
    max-width: 220px;
    width: auto;
}

/* Light/dark logo variants; mirror the theme-token selector logic so the
   right Perfex logo shows for system preference AND the manual theme toggle.
   The dark variant is the same dark-ink artwork, so we overlay it white; it
   only ever renders on a dark ground, giving a crisp reversed lockup. */
.brand-lockup__logo--dark { display: none; filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-lockup__logo--light { display: none; }
    :root:not([data-theme="light"]) .brand-lockup__logo--dark { display: block; }
}
:root[data-theme="dark"] .brand-lockup__logo--light { display: none; }
:root[data-theme="dark"] .brand-lockup__logo--dark { display: block; }
:root[data-theme="light"] .brand-lockup__logo--light { display: block; }
:root[data-theme="light"] .brand-lockup__logo--dark { display: none; }

.brand-lockup__mark {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ink);
    overflow: hidden;
    flex: none;
}

/* a strip of 35mm film crossing the circle: a light band ... */
.brand-lockup__mark::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 16px;
    transform: translateY(-50%);
    background:
        /* perforation rows, top and bottom of the band */
        repeating-linear-gradient(90deg, transparent 0 2px, var(--ink) 2px 3.4px, transparent 3.4px 5px) left top / 100% 2px no-repeat,
        repeating-linear-gradient(90deg, transparent 0 2px, var(--ink) 2px 3.4px, transparent 3.4px 5px) left bottom / 100% 2px no-repeat,
        /* the light film base */
        var(--paper);
}

/* ... with the film frames sitting between the perforations */
.brand-lockup__mark::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 7px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, var(--ink) 0 2.6px, transparent 2.6px 6.4px);
}

.brand-lockup__text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 25px;
    letter-spacing: -0.015em;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.08);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.nav-toggle:hover { border-color: var(--blue); }
.nav-toggle:focus-visible {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 95, 151, 0.20);
}

.nav-toggle__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    transition: transform 0.24s ease, opacity 0.24s ease;
}

.nav-toggle__icon { position: relative; }

.nav-toggle__icon::before,
.nav-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__icon::before { top: -5px; }
.nav-toggle__icon::after { top: 5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-5px) rotate(-45deg); }

.site-nav-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.site-nav__item,
.lang-switcher__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 4px;
    color: var(--muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: color 0.2s ease, background 0.2s ease;
}

.site-nav__item::before {
    content: "";
    position: absolute;
    left: 10px;
    bottom: 6px;
    width: 0;
    height: 2px;
    background: var(--blue);
    transition: width 0.22s ease;
}

.site-nav__item:hover { color: var(--ink); }
.site-nav__item:hover::before { width: calc(100% - 20px); }

.site-nav__item.is-active {
    color: var(--ink);
    background: rgba(0, 95, 151, 0.09);
}
.site-nav__item.is-active::before { width: calc(100% - 20px); }

.site-nav__item--disabled { opacity: 0.5; }

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
    border-left: 1px solid var(--line);
}

.lang-switcher__item {
    border: 1px solid var(--line-strong);
    min-height: 34px;
    padding: 0 11px;
}

.lang-switcher__item:hover,
.lang-switcher__item.is-active {
    color: #ffffff;
    background: var(--blue);
    border-color: var(--blue);
}

/* theme toggle; cycles System → Light → Dark, grouped with the language switch */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.theme-toggle:hover {
    color: var(--blue);
    border-color: var(--blue);
}

.theme-toggle:focus-visible {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 95, 151, 0.20);
}

.theme-toggle__icon { display: none; }
.theme-toggle__icon svg { display: block; width: 17px; height: 17px; }

.theme-toggle[data-theme-state="system"] .theme-toggle__icon--system,
.theme-toggle[data-theme-state="light"] .theme-toggle__icon--light,
.theme-toggle[data-theme-state="dark"] .theme-toggle__icon--dark { display: block; }

/* --------------------------------------------------------------------------
   Desktop nav; dropdown groups + icon controls; hamburger only below 900px
   -------------------------------------------------------------------------- */
.nav-toggle { display: none; }              /* desktop hides it; the media query below shows it */
.site-nav { flex-wrap: wrap; row-gap: 2px; }

.site-nav__group { position: relative; }

.site-nav__toggle {
    background: none;
    border: 0;
    gap: 7px;
    cursor: pointer;
}

.site-nav__caret {
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.22s ease;
    opacity: 0.65;
}
.site-nav__group:hover .site-nav__caret,
.site-nav__group:focus-within .site-nav__caret,
.site-nav__toggle[aria-expanded="true"] .site-nav__caret {
    transform: translateY(1px) rotate(-135deg);
}

/* An open group is the active navigation context. This matters when the
   visitor opens Services from another page: the current-page treatment must
   not make the dropdown look as though it belongs to Products or About. */
.site-nav__group:hover > .site-nav__toggle,
.site-nav__group:focus-within > .site-nav__toggle,
.site-nav__toggle[aria-expanded="true"] {
    color: var(--ink);
    background: rgba(0, 95, 151, 0.09);
}
.site-nav__group:hover > .site-nav__toggle::before,
.site-nav__group:focus-within > .site-nav__toggle::before,
.site-nav__toggle[aria-expanded="true"]::before {
    width: calc(100% - 20px);
}
.site-nav:has(.site-nav__group:hover) > .site-nav__item.is-active,
.site-nav:has(.site-nav__group:focus-within) > .site-nav__item.is-active,
.site-nav:has(.site-nav__toggle[aria-expanded="true"]) > .site-nav__item.is-active {
    color: var(--muted);
    background: transparent;
}
.site-nav:has(.site-nav__group:hover) > .site-nav__item.is-active::before,
.site-nav:has(.site-nav__group:focus-within) > .site-nav__item.is-active::before,
.site-nav:has(.site-nav__toggle[aria-expanded="true"]) > .site-nav__item.is-active::before {
    width: 0;
}

.site-nav__menu {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(17, 17, 17, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 20;
}
/* invisible bridge across the gap so the panel doesn't drop while the cursor travels */
.site-nav__menu::before {
    content: "";
    position: absolute;
    inset: -11px 0 auto 0;
    height: 11px;
}
.site-nav__group:hover .site-nav__menu,
.site-nav__group:focus-within .site-nav__menu,
.site-nav__toggle[aria-expanded="true"] + .site-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.site-nav__sub {
    display: block;
    padding: 9px 12px;
    border-radius: 5px;
    color: var(--muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease;
}
.site-nav__sub:hover { color: var(--ink); background: rgba(0, 95, 151, 0.09); }
.site-nav__sub.is-active { color: var(--blue); background: rgba(0, 95, 151, 0.09); }

/* Services are split by purpose before they are split by action: learn about
   film, order film; then learn about prints, order prints. */
.site-nav__section {
    display: block;
    padding: 7px 12px 3px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}
.site-nav__section--separated {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.site-nav__sub--cta {
    color: var(--blue);
}
.site-nav__sub--cta::after {
    content: ' \2192';
    display: inline-block;
    transition: transform 0.18s ease;
}
.site-nav__sub--cta:hover::after,
.site-nav__sub--cta:focus-visible::after { transform: translateX(3px); }

/* The Services dropdown has two jobs, so it gets two unmistakable regions.
   The labels, accent edges and copy do the separating; colour never carries
   meaning by itself. This only affects desktop -- mobile keeps its compact,
   vertically stacked navigation. */
.site-nav__menu--services {
    width: min(640px, calc(100vw - 32px));
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
}

/* The menu is wider than its trigger, so a small tab-shaped connector makes
   its ownership unmistakable even while it extends below neighbouring links. */
.site-nav__menu--services::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 48px;
    width: 13px;
    height: 13px;
    border-top: 1px solid var(--line-strong);
    border-left: 1px solid var(--line-strong);
    background: var(--card);
    transform: rotate(45deg);
}

.site-nav__service-panel {
    --service-accent: var(--blue);
    --service-on-accent: #fff;
    flex: 1 1 0;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--service-accent);
    border-radius: 6px;
    background: var(--paper-2);
}

/* Accents come from the Menu Manager rows now: blue, orange, or none. */
.site-nav__service-panel--accent-orange {
    --service-accent: var(--orange);
    --service-on-accent: #17140f;
}

.site-nav__service-panel--accent-none {
    --service-accent: var(--muted);
    --service-on-accent: #fff;
}

.site-nav__service-panel.is-active {
    border-color: var(--service-accent);
    box-shadow: inset 0 0 0 1px var(--service-accent);
    background: color-mix(in srgb, var(--service-accent) 7%, var(--paper-2));
}

.site-nav__service-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 88px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.site-nav__service-media {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
}

.site-nav__service-media img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* The mixed-film artwork is a taller, denser composition than the square
   print box. A slightly smaller footprint gives both headings the same visual
   starting weight without changing the shared column geometry. */
.site-nav__service-panel--accent-blue .site-nav__service-media {
    width: 54px;
    height: 54px;
    margin-right: 6px;
}

.site-nav__service-copy { display: grid; gap: 4px; min-width: 0; }

.site-nav__service-title {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.site-nav__service-summary {
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.35;
}

.site-nav__service-links {
    display: grid;
    gap: 3px;
    padding-top: 9px;
}

.site-nav__service-panel .site-nav__sub {
    padding: 8px 9px;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
    white-space: normal;
}

.site-nav__service-panel .site-nav__sub:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--service-accent) 9%, transparent);
}

.site-nav__service-panel .site-nav__sub.is-active {
    color: var(--ink);
    background: color-mix(in srgb, var(--service-accent) 12%, transparent);
}

/* Verb-led copy does most of the work; the trailing arrow completes the
   affordance without giving this supporting destination button weight. */
.site-nav__service-panel .site-nav__sub:not(.site-nav__sub--cta) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.site-nav__service-panel .site-nav__sub:not(.site-nav__sub--cta)::after {
    content: '\2192';
    flex: 0 0 auto;
    color: var(--service-accent);
    transition: transform 0.18s ease;
}

.site-nav__service-panel .site-nav__sub:not(.site-nav__sub--cta):hover::after,
.site-nav__service-panel .site-nav__sub:not(.site-nav__sub--cta):focus-visible::after {
    transform: translateX(3px);
}

/* Ordering is the primary action inside each panel. It is a compact action
   row rather than a large marketing button: unmistakably clickable, but still
   proportionate to a navigation menu. The arrow sits at the far edge so the
   two CTAs scan as parallel choices even when their labels differ in length. */
.site-nav__service-panel .site-nav__sub--cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 3px;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--service-accent) 52%, var(--line));
    background: color-mix(in srgb, var(--service-accent) 10%, var(--paper-2));
    color: var(--ink);
    font-weight: 700;
}

.site-nav__service-panel .site-nav__sub--cta::after {
    margin-left: auto;
    color: var(--service-accent);
}

.site-nav__service-panel .site-nav__sub--cta:hover,
.site-nav__service-panel .site-nav__sub--cta.is-active {
    border-color: var(--service-accent);
    background: var(--service-accent);
    color: var(--service-on-accent);
}

.site-nav__service-panel .site-nav__sub--cta:hover::after,
.site-nav__service-panel .site-nav__sub--cta.is-active::after {
    color: currentColor;
}

/* icon controls (account now; cart scaffolded) */
.header-icons { display: flex; align-items: center; gap: 8px; }
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.icon-btn:hover { color: var(--blue); border-color: var(--blue); }
.icon-btn:focus-visible {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 95, 151, 0.20);
}
.icon-btn svg { display: block; width: 19px; height: 19px; }
.icon-btn[hidden] { display: none; }

/* mobile overlay; grouped sections.
   A group's HEADER is a full-size top-level item (matches Home/Products/Contact);
   its children are a compact, secondary submenu indented beneath it. */
.nav-group {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1vh, 12px);
}
/* The header is a disclosure button dressed as its sibling links: full button
   reset, then the chevron carries the open/closed state. */
.nav-group__head {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
}
.nav-group__head .nav-link__text::after { display: none; }  /* header isn't a link; no hover underline */

.nav-group__chev {
    flex: 0 0 auto;
    align-self: center;   /* the parent aligns children by baseline, which an
                             empty box does not have */
    width: 11px;
    height: 11px;
    margin-left: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);            /* points down: "there is more here" */
    transform-origin: center;
    transition: transform 0.22s ease;
    opacity: 0.55;
}
.nav-group__head[aria-expanded="true"] .nav-group__chev {
    transform: rotate(225deg);           /* points up */
}
@media (prefers-reduced-motion: reduce) {
    .nav-group__chev { transition: none; }
}

/* The static group head: Services keeps its numbered place in the sequence
   but is a heading, not a disclosure — its cards are always visible. */
.nav-group__head--static { cursor: default; }

/* ---------------------------------------------------------------------------
 * Service cards in the overlay. Two compact cards, one per service family:
 * thumbnail, dominant title, one-line summary, then the two ways in — the
 * outlined informational link and the filled CTA. Content is managed in the
 * Menu Manager; the accent is a restrained top rule, never the text colour,
 * because blue text is not allowed to be the only signal of anything.
 */
.nav-svc {
    display: grid;
    gap: 12px;
    padding-left: 18px;
    margin-left: 5px;
    border-left: 2px solid var(--line);
    max-width: 420px;
}

.nav-svc__card {
    position: relative;
    padding: 14px 14px 12px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--svc-accent, var(--line));
    background: var(--panel-solid);
}

.nav-svc__card--accent-blue   { --svc-accent: var(--blue); }
.nav-svc__card--accent-orange { --svc-accent: var(--orange); }

/* Where the visitor already is: surface and border, not blue text. */
.nav-svc__card.is-current {
    border-color: color-mix(in srgb, var(--svc-accent, var(--ink)) 45%, var(--line));
    background: color-mix(in srgb, var(--svc-accent, var(--ink)) 6%, var(--panel-solid));
}

.nav-svc__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.nav-svc__media {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
}

.nav-svc__media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.nav-svc__copy { display: grid; gap: 3px; min-width: 0; }

.nav-svc__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
}

.nav-svc__summary {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

.nav-svc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nav-svc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    flex: 1 1 auto;
}

.nav-svc__btn:hover,
.nav-svc__btn:focus-visible { border-color: var(--ink); }
.nav-svc__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.nav-svc__btn:active { transform: translateY(1px); }

/* One consistent, high-contrast filled treatment for the CTA. */
.nav-svc__btn--cta {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    font-weight: 700;
}

.nav-svc__btn--cta:hover,
.nav-svc__btn--cta:focus-visible {
    background: color-mix(in srgb, var(--ink) 86%, var(--paper));
}

/* Mobile navigation uses a two-level deck. The primary destinations remain
   short and scannable; groups move into a dedicated view instead of expanding
   into the list and pushing every destination down the screen. */
.nav-mobile-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(22px, 4vh, 48px) 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform 0.42s cubic-bezier(0.72, 0, 0.22, 1), opacity 0.28s ease, visibility 0s linear 0.42s;
}

.nav-mobile-view--root {
    justify-content: center;
    gap: clamp(4px, 1vh, 12px);
    transform: translateX(0);
}

.nav-mobile-view--child {
    justify-content: flex-start;
    gap: 20px;
    visibility: hidden;
    opacity: 0;
    transform: translateX(104%);
}

.nav-overlay__nav.is-drilled .nav-mobile-view--root {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-34%);
    transition-delay: 0s, 0s, 0.42s;
}

.nav-mobile-view--child.is-active {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s;
}

/* Language and contact are global utilities on the primary menu. Removing
   them from a drilled view gives short phone screens enough room for the
   actual service choices, while Back returns them immediately. */
.nav-overlay__nav.is-drilled ~ .lang-switcher--overlay,
.nav-overlay__nav.is-drilled ~ .nav-overlay__foot { display: none; }

.nav-mobile-entry {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.nav-mobile-entry__arrow {
    margin-left: 10px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: clamp(18px, 3vw, 26px);
    font-weight: 400;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.nav-mobile-entry:hover .nav-mobile-entry__arrow,
.nav-mobile-entry:focus-visible .nav-mobile-entry__arrow {
    color: var(--blue);
    transform: translateX(5px);
}

.nav-mobile-back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 9px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}
.nav-mobile-back:hover,
.nav-mobile-back:focus-visible { border-color: var(--blue); color: var(--blue); outline: none; }

.nav-mobile-heading { max-width: 620px; }
.nav-mobile-heading__label {
    display: block;
    margin-bottom: 6px;
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.nav-mobile-heading h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(38px, 8vw, 58px);
    line-height: 0.95;
    letter-spacing: -0.035em;
}
.nav-mobile-heading p { max-width: 52ch; margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.nav-mobile-view--child .nav-svc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 820px;
    margin: 0;
    padding: 0;
    border-left: 0;
}

.nav-mobile-destinations {
    display: grid;
    width: min(100%, 620px);
    border-top: 1px solid var(--line);
}
.nav-mobile-destination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 58px;
    padding: 9px 3px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(19px, 4vw, 26px);
    font-weight: 650;
    text-decoration: none;
}
.nav-mobile-destination span:last-child { color: var(--muted); transition: transform 0.2s ease; }
.nav-mobile-destination:hover,
.nav-mobile-destination:focus-visible,
.nav-mobile-destination.is-active { color: var(--blue); outline: none; }
.nav-mobile-destination:hover span:last-child,
.nav-mobile-destination:focus-visible span:last-child { transform: translateX(5px); }

@media (max-width: 620px) {
    .nav-mobile-view--child .nav-svc { grid-template-columns: 1fr; }
    .nav-mobile-view--child { gap: 16px; }
    .nav-svc__card { padding: 12px; }
    .nav-svc__head { margin-bottom: 9px; }
    .nav-svc__media { width: 52px; height: 52px; }
    .nav-svc__summary { font-size: 12px; }
    .nav-svc__btn { min-height: 40px; padding: 7px 11px; font-size: 13px; }
}

@media (max-height: 700px) and (max-width: 900px) {
    .nav-mobile-view { padding-block: 15px; }
    .nav-mobile-view--child { gap: 11px; }
    .nav-mobile-heading p { margin-top: 6px; line-height: 1.38; }
    .nav-mobile-view--child .nav-svc { gap: 8px; }
    .nav-svc__card { padding-block: 10px; }
}

@media (min-width: 901px) {
    /* The overlay is a phone/tablet surface; the desktop dropdown has its own
       panels. Nothing to do — the overlay itself is hidden above 900px. */
    .nav-svc { max-width: 480px; }
}

.nav-group__items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.9vh, 9px);
    padding-left: 18px;
    margin-left: 5px;
    border-left: 2px solid var(--line);
}
.nav-sub {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(17px, 3.5vw, 21px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.nav-sub:hover,
.nav-sub:focus-visible,
.nav-sub.is-active { color: var(--blue); }

/* The overlay keeps the same information architecture. Section labels are
   intentionally small; the destinations remain the things one can press. */
.nav-subsection {
    display: block;
    margin-top: 2px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: clamp(10px, 2.2vw, 12px);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.25;
    text-transform: uppercase;
}
.nav-subsection--separated {
    align-self: stretch;
    margin-top: clamp(8px, 1.4vh, 15px);
    padding-top: clamp(10px, 1.5vh, 16px);
    border-top: 1px solid var(--line);
}
.nav-sub--cta {
    color: var(--blue);
}
.nav-sub--cta::after {
    content: ' \2192';
    display: inline-block;
    transition: transform 0.2s ease;
}
.nav-sub--cta:hover::after,
.nav-sub--cta:focus-visible::after { transform: translateX(4px); }

@media (max-width: 900px) {
    .site-nav { display: none; }
    .nav-toggle { display: inline-flex; }
}
/* language switcher lives in the header on desktop, inside the overlay on mobile */
.lang-switcher--overlay {
    border-left: 0;
    padding-left: 0;
    margin-top: clamp(10px, 2vh, 20px);
}

/* phones: tighten the header; hamburger becomes icon-only (aria-label carries the name),
   and the language switch moves into the overlay so brand + account + menu always fit */
@media (max-width: 560px) {
    .site-header { gap: 10px; }
    .site-header__controls { gap: 10px; }
    .nav-toggle { padding: 0 13px; gap: 0; }
    .nav-toggle__label { display: none; }
    .site-header__controls .lang-switcher { display: none; }
}

/* At 320px the controls ran two pixels past the right edge -- every page,
   since the header is shared -- which is exactly the width of the slack
   taken out here. Measured, not guessed: brand + account + cart + menu now
   fit at 320 with room to spare. */
@media (max-width: 360px) {
    .site-header { gap: 6px; }
    .site-header__controls { gap: 6px; }
    .nav-toggle { padding: 0 10px; }
}

/* --------------------------------------------------------------------------
   Full-screen navigation overlay (all viewport widths)
   -------------------------------------------------------------------------- */
html.nav-locked,
html.nav-locked body { overflow: hidden; }

.nav-overlay {
    position: fixed;
    inset: 0;
    /* The open menu is the highest non-modal surface — above the docked cart
       bar (110) and the header. It was 60, and a visitor with a cart saw the
       cart bar floating over their own navigation. */
    z-index: 150;
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, visibility 0s linear 0.30s;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.12s ease;
}

.nav-overlay__rail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--rail-h);
    background: var(--rail-lines);
    z-index: 3;
}

.nav-overlay__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100%;
    /* Mirror the shell exactly: the shell pads 22px and centres a container
       inside it, so we do the same here (rather than centre the container and
       pad inside it); that keeps the logo and controls at the same x as the
       site header. The extra right padding reserves the scrollbar gutter the
       locked page keeps, so nothing shifts sideways on open. */
    padding: calc(var(--rail-h) + 36px) calc(22px + var(--sbw, 0px)) 46px 22px;
    display: flex;
    flex-direction: column;
}

/* bar, nav and foot share the site header's centred container width so the
   logo (left) and controls (right) line up between header and overlay */
.nav-overlay__bar,
.nav-overlay__nav,
.nav-overlay__foot {
    width: min(var(--container), 100%);
    margin-inline: auto;
}

/* small static 3-bar brand stripe that settles at the bottom of the open menu */
.nav-overlay__botrail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--stripe-h);
    background: var(--stripe);
    --stripe-gap: var(--paper);
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.nav-overlay.is-open .nav-overlay__botrail {
    opacity: 1;
    transition-delay: 0.55s;
}
.nav-overlay.is-closing .nav-overlay__botrail {
    opacity: 0;
    transition: opacity 0.15s ease;
    transition-delay: 0s;
}

/* Signature: the three brand stripes flash down the screen on open and the
   menu is drawn in behind them (a tri-colour curtain wipe). */
.nav-sweep {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

/* the three stripes travel together as one compact band, and fully exit */
.nav-sweep__band {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2.4vh;
    transform: translateY(-72vh);
    will-change: transform;
}

.nav-sweep__bar { height: 10.5vh; }
.nav-sweep__bar--blue { background: var(--blue); }
.nav-sweep__bar--orange { background: var(--orange); }
.nav-sweep__bar--red { background: var(--red); }

.nav-overlay.is-open .nav-sweep__band {
    animation: nav-sweep-down 0.95s cubic-bezier(0.5, 0.02, 0.3, 1) forwards;
}

@keyframes nav-sweep-down {
    from { transform: translateY(-72vh); }
    to { transform: translateY(150vh); }
}

.nav-overlay__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 8px;
}


.nav-close {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.nav-close:hover { border-color: var(--red); color: var(--red); }
.nav-close:focus-visible {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 95, 151, 0.20);
}

.nav-close__icon { position: relative; width: 14px; height: 14px; }
.nav-close__icon::before,
.nav-close__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
}
.nav-close__icon::before { transform: translateY(-50%) rotate(45deg); }
.nav-close__icon::after { transform: translateY(-50%) rotate(-45deg); }

.nav-overlay__nav {
    flex: 1 1 auto;
    position: relative;
    min-height: clamp(440px, 64vh, 680px);
    overflow: hidden;
}

.nav-link {
    display: inline-flex;
    align-items: baseline;
    gap: clamp(12px, 2vw, 22px);
    width: fit-content;
    max-width: 100%;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 5.4vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.2s ease;
}

.nav-overlay.is-open .nav-link {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 34ms + 330ms);
}

/* closing: the stripes wipe back UP like window blinds, and the menu lifts away
   bottom-first to follow the rising band. */
.nav-overlay.is-closing .nav-sweep__band {
    animation: nav-sweep-up 0.72s cubic-bezier(0.5, 0.02, 0.3, 1) forwards;
}

.nav-overlay.is-closing .nav-link {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    transition-delay: calc((9 - var(--i, 0)) * 22ms);
}

.nav-overlay.is-closing .nav-overlay__foot {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    transition-delay: 0s;
}

@keyframes nav-sweep-up {
    from { transform: translateY(150vh); }
    to { transform: translateY(-72vh); }
}

.nav-link__index {
    flex: none;
    font-family: var(--font-mono);
    font-size: clamp(10px, 1.2vw, 13px);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--muted);
    transform: translateY(-0.55em);
    transition: color 0.2s ease;
}

.nav-link__text { position: relative; }
.nav-link__text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.08em;
    width: 0;
    height: 3px;
    background: var(--blue);
    transition: width 0.28s ease;
}

.nav-link:hover,
.nav-link:focus-visible { color: var(--blue); outline: none; }
.nav-link:hover .nav-link__index,
.nav-link:focus-visible .nav-link__index { color: var(--blue); }
.nav-link:hover .nav-link__text::after,
.nav-link:focus-visible .nav-link__text::after { width: 100%; }

.nav-link.is-active { color: var(--blue); }
.nav-link.is-active .nav-link__index { color: var(--blue); }
.nav-link.is-active .nav-link__text::after { width: 100%; }

.nav-link--disabled { color: var(--muted); opacity: 0.45; }

.nav-overlay__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.nav-overlay.is-open .nav-overlay__foot {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 34ms + 360ms);
}

.nav-overlay__foot-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.nav-overlay__foot .lang-switcher { padding-left: 0; border-left: 0; }

.nav-overlay__contact {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-overlay__contact:hover { color: var(--blue); border-color: var(--blue); }

/* language switcher now lives permanently in the header; drop its divider */
.site-header__controls .lang-switcher { padding-left: 0; border-left: 0; }

/* theme toggle now lives in the footer */
.site-footer__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}
.site-footer__controls-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

/* very narrow screens: keep just the menu icon to make room for the switcher */
@media (max-width: 480px) {
    .nav-toggle__label { display: none; }
    .nav-toggle { padding: 0 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-sweep { display: none; }
    .nav-overlay,
    .nav-link,
    .nav-overlay__foot { transition-delay: 0s !important; transform: none !important; }
    .nav-overlay.is-open .nav-link,
    .nav-overlay.is-open .nav-overlay__foot { opacity: 1; }
    .nav-mobile-view { transition: none; }
}

@media (max-width: 620px) {
    .nav-overlay__contact { width: 100%; margin-left: 0; }
    .nav-close__label { display: none; }
}

/* --------------------------------------------------------------------------
   Home; the exposed frame
   -------------------------------------------------------------------------- */
.landing {
    position: relative;
    min-height: calc(100vh - 260px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* a soft Minolta-blue glow behind the frame */
.landing__sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(70vw, 720px);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(0, 95, 151, 0.14) 0%,
        rgba(255, 106, 0, 0.06) 42%,
        transparent 68%);
    filter: blur(8px);
    pointer-events: none;
}

/* a run of film frames along the base of the stage */
.landing__grid {
    position: absolute;
    inset: auto 0 -14px;
    height: 54px;
    background:
        repeating-linear-gradient(90deg,
            transparent 0 6px,
            rgba(17, 17, 17, 0.10) 6px 8px,
            transparent 8px 128px),
        repeating-linear-gradient(90deg,
            rgba(17, 17, 17, 0.04) 0 118px,
            transparent 118px 128px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    opacity: 0.7;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.hero-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: 30px;
    padding: 44px 38px 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: develop 0.9s ease both;
}

/* the brand stripe across the top edge; the signature */
.hero-card::before,
.page-hero::before,
.legal-hero::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--stripe-h);
    background: var(--stripe);
}

.hero-card::after {
    content: "36A  \25BA  01";
    position: absolute;
    top: 18px;
    right: 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--blue);
    pointer-events: none;
}

.hero-copy { position: relative; }

.hero-copy__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: rgba(0, 95, 151, 0.05);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero-copy__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 12px 2px rgba(0, 95, 151, 0.55);
    animation: safelight 2.6s ease-in-out infinite;
}

.hero-copy__title {
    margin: 24px 0 16px;
    max-width: 15ch;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(42px, 5.6vw, 76px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}

.hero-copy__lede,
.info-panel p,
.info-list li {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.62;
}

.hero-copy__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.hero-tag {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-tag:nth-child(1) { border-left: 3px solid var(--blue); }
.hero-tag:nth-child(2) { border-left: 3px solid var(--orange); }
.hero-tag:nth-child(3) { border-left: 3px solid var(--red); }

.hero-panels {
    align-self: end;
    display: grid;
    gap: 16px;
    max-width: 360px;
    justify-self: end;
}

.info-panel {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-2);
}

.info-panel h2 {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
}

.info-list { margin: 0; padding-left: 18px; }

.info-panel a { color: var(--blue); text-decoration-color: rgba(0, 95, 151, 0.4); }
.info-panel a:hover { color: var(--ink); }

/* portal status pill */
.portal-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.portal-state__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 4px;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    background: rgba(0, 95, 151, 0.10);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.portal-state__pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 10px rgba(0, 95, 151, 0.6);
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.legal-page { position: relative; z-index: 1; }

.legal-hero,
.legal-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.legal-hero {
    padding: 38px 36px 34px;
    margin-bottom: 18px;
    animation: develop 0.7s ease both;
}

.legal-hero h1 {
    margin: 18px 0 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}

.legal-hero p,
.legal-section p,
.legal-list li {
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.72;
}

.legal-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 4px;
    border: 1px solid var(--line-strong);
    background: rgba(0, 95, 151, 0.05);
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.legal-card {
    padding: 36px;
    animation: develop 0.85s ease both;
}

.legal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    gap: 26px;
}

.legal-content { display: grid; gap: 24px; }

.legal-section {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.legal-section:last-child { padding-bottom: 0; border-bottom: 0; }

.legal-section h2 {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
}

.legal-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

.legal-aside { display: grid; gap: 16px; align-content: start; }

.legal-aside a,
.legal-section a,
.legal-aside a {
    color: var(--link);
    text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
    text-underline-offset: 2px;
}

.legal-aside a:hover,
.legal-section a:hover { color: var(--link-hover); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    z-index: 2;
    margin-top: 56px;
    padding-top: 30px;
    /* The nav grid's fractional tracks round a single pixel past the page
       edge in a narrow band around 880px, which is enough for a horizontal
       scrollbar on platforms that show one. clip, not hidden: nothing
       legitimate ever extends past the footer's edge, and clip cannot
       create a scroll context. */
    overflow-x: clip;
}

.site-footer::before {
    content: "";
    display: block;
    height: var(--stripe-h);
    margin-bottom: 30px;
    border-radius: 2px;
    background: var(--stripe);
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(240px, 1.2fr) minmax(0, 2fr);
    gap: 36px;
    padding-bottom: 28px;
}

.site-footer__brand {
    display: grid;
    gap: 14px;
    align-content: start;
}

.site-footer__tagline {
    margin: 0;
    max-width: 34ch;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px;
}

.site-footer__col {
    display: grid;
    gap: 10px;
    align-content: start;
}

.site-footer__heading {
    margin: 0 0 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blue);
}

.site-footer__link {
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer__link:hover { color: var(--ink); }
.site-footer__link--static { color: var(--faint); }

.site-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Content pages; shared building blocks
   -------------------------------------------------------------------------- */
.page { position: relative; z-index: 1; }

.page-hero {
    position: relative;
    padding: 40px 38px 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    animation: develop 0.7s ease both;
}

/* The film page's hero: copy left, working visual right. The right column
   exists because the old hero was a white rectangle with an empty half; this
   one puts the film itself there, with the three things that happen to it.
   No bottom stripe here -- the composition is the brand moment. */
.page-hero--split {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    gap: 20px 44px;
    align-items: center;
    padding: 32px 38px calc(var(--stripe-h) + 22px);
}
.page-hero--split .page-hero__copy { min-width: 0; }

.page-hero__reassure {
    margin: 12px 0 0;
    font-size: 0.88rem;
    color: var(--faint);
}

.hero-film {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
}
.hero-film__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 230px;
    padding: 20px;
    background:
        radial-gradient(ellipse at 50% 45%, var(--film-stage-glow), transparent 68%),
        var(--film-stage);
    border-bottom: 1px solid var(--line);
}
.hero-film__stage img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px var(--film-stage-shadow));
}
.hero-film__steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 0;
    padding: 12px 16px;
    list-style: none;
}
.hero-film__steps li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.hero-film__steps svg { width: 18px; height: 18px; color: var(--link); flex: 0 0 auto; }
/* The order of events, drawn between them. */
.hero-film__steps li + li::before {
    content: '\2192';
    margin-right: 6px;
    color: var(--faint);
}

@media (max-width: 880px) {
    .page-hero--split { grid-template-columns: minmax(0, 1fr); padding: 26px 24px; }
    .hero-film__stage { height: 150px; padding: 12px; }
}

.page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
}

.page-hero__frame {
    padding-right: 12px;
    border-right: 1px solid var(--line-strong);
    color: var(--muted);
}

.page-hero__title {
    margin: 18px 0 14px;
    max-width: 20ch;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(38px, 5.2vw, 68px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}

.page-hero__lede {
    margin: 0;
    max-width: 62ch;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.62;
    color: var(--muted);
}

/* The way from reading to ordering, offered where the reading starts. */
.page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* The order page's header: a heading for a task, not an advertisement. The
   default hero is a 68px-headline billboard, and on a page whose whole job
   is the workflow below, that was 300px of white with an empty right half
   before any work could start. This is a strip: half the padding, a title
   two steps down, the lede running wide instead of wrapping at half width,
   and bottom padding that clears the brand stripe (6px once did not, and
   overflow:hidden ate the backlink). */
.page-hero--compact {
    padding: 24px 30px calc(var(--stripe-h) + 16px);
}
.page-hero--compact .page-hero__title {
    margin: 10px 0 8px;
    max-width: none;
    font-size: clamp(26px, 3vw, 38px);
}
.page-hero--compact .page-hero__lede {
    font-size: 15px;
    max-width: 78ch;
}
.page-hero--compact .page-hero__backlink { margin-top: 8px; }

/* On the dedicated order page the configurator's own section heading
   ("Configure & add to cart") repeats what the h1 just said, so the panel
   starts sooner. The print page keeps it: there the panel sits mid-page and
   needs introducing. Scoped by :has, which this stylesheet already relies on. */
.page-order .section:has(#configurator) > .section__head { display: none; }
.page-order .section:has(#configurator) { margin-top: 26px; }

.page-hero__backlink { margin: 12px 0 0; font-size: 0.95rem; }
.page-hero__backlink a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-hero__backlink a:hover { color: var(--link-hover); }

/* A service card that IS the link. The whole surface presses: hover lifts,
   focus rings, active settles, and the action line inside is a caption of
   the same link rather than a second target. */
.card--service {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.card--service:hover {
    border-color: var(--blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}
.card--service:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}
.card--service:active { transform: translateY(0); }
.card--service:hover .card__cta { text-decoration: underline; text-underline-offset: 3px; }

.card__cta {
    display: inline-block;
    margin-top: 12px;
    color: var(--link);
    font-weight: 600;
    text-decoration: none;
}

.section { margin-top: 40px; }

.section__head {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
}

.section__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
}

.section__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.section__intro {
    margin: 0;
    max-width: 62ch;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.62;
    color: var(--muted);
}

/* hero call-to-action buttons */
.hero-copy__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* a "view all" style link under a section */
.section__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

.section__link::after {
    content: "\2192";
    transition: transform 0.2s ease;
}

.section__link:hover { color: var(--blue-deep); }
.section__link:hover::after { transform: translateX(4px); }

/* a compact facts strip */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--line);
    overflow: hidden;
}

.stat {
    display: grid;
    gap: 4px;
    padding: 20px 22px;
    background: var(--card);
}

.stat__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.stat__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

/* card grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.card {
    position: relative;
    padding: 22px 22px 24px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

/* the three brand stripe colours cycle across the cards */
.card:nth-child(3n + 1) { border-top-color: var(--blue); }
.card:nth-child(3n + 2) { border-top-color: var(--orange); }
.card:nth-child(3n + 3) { border-top-color: var(--red); }

.card__label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
}

.card__title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* Title links read as the heading, not as a blue anchor (unreadable on dark) */
.card__title a {
    color: inherit;
    text-decoration: none;
}
.card__title a:hover,
.card__title a:focus {
    color: var(--blue-deep);
    text-decoration: underline;
}

.card__body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.card__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 14px 0 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.card__price s {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--faint);
}

.card__stock {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.card__stock--out { color: var(--red); }

/* product cards keep price + stock pinned to the bottom */
.card--product {
    display: flex;
    flex-direction: column;
}
/* display:flex above overrides the UA [hidden] rule, so filtered-out cards
   would still render; restore hiding with matching specificity. */
.card--product[hidden] { display: none; }

.card--product .card__body { flex: 1 1 auto; }

.card__media {
    margin: calc(var(--card-pad, 1.5rem) * -1) calc(var(--card-pad, 1.5rem) * -1) 1rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-2, #ece4d2);
    border-radius: 10px 10px 0 0;
}
.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-specs {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: 0.85rem;
    border-top: 1px solid var(--line, #e3dcc9);
}
.product-specs__row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line, #e3dcc9);
}
.product-specs__label { color: var(--muted); }
.product-specs__value { font-weight: 600; text-align: right; }

/* product card actions row (listing quick-add + view) */
.card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.75rem;
    flex-wrap: wrap;
}
.card__buy { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
/* floating "added" pill sits above the button; absolute so it never reflows the card */
.card__added {
    position: absolute; left: 50%; bottom: calc(100% + 8px);
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.34rem 0.62rem; border-radius: 999px; white-space: nowrap;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
    color: #fff; background: var(--blue); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    opacity: 0; transform: translate(-50%, 6px) scale(0.9);
    pointer-events: none; z-index: 3;
}
.card__added::before { content: "\2713"; font-weight: 800; } /* ✓ */
.card__buy.is-added .card__added { animation: cart-note 1.9s ease forwards; }
.card__link { font-size: 0.85rem; font-weight: 600; color: var(--blue); white-space: nowrap; }

/* shared add-to-cart feedback: button spring + header badge bump */
.btn.is-added { animation: cart-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.icon-btn__badge.is-bumped { animation: badge-bump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes cart-pop {
    0% { transform: scale(1); }
    35% { transform: scale(0.9); }
    70% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@keyframes cart-note {
    0% { opacity: 0; transform: translate(-50%, 6px) scale(0.9); }
    12% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    82% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -4px) scale(0.96); }
}
@keyframes badge-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.45); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .btn.is-added, .icon-btn__badge.is-bumped, .card__buy.is-added .card__added { animation: none; }
    .card__buy.is-added .card__added { opacity: 1; transform: translate(-50%, 0); }
}
.btn--sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; }

/* breadcrumb */
.breadcrumb { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--blue); font-weight: 600; }
.breadcrumb__sep { opacity: 0.5; }

/* product detail: gallery + buy box side by side */
.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    margin-bottom: 3rem;
}
@media (max-width: 760px) { .product-detail { grid-template-columns: 1fr; gap: 1.75rem; } }

.product-gallery__main {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: var(--paper-2, #ece4d2);
    border: 1px solid var(--line, #e3dcc9);
    cursor: zoom-in;
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.product-gallery__main:hover img { transform: scale(1.03); }
.product-gallery__main--empty { aspect-ratio: 1 / 1; }
.product-gallery__zoom {
    position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(17, 17, 17, 0.62); color: #fff;
    opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.product-gallery__zoom svg { width: 20px; height: 20px; }
.product-gallery__main:hover .product-gallery__zoom,
.product-gallery__main:focus-visible .product-gallery__zoom { opacity: 1; transform: translateY(0); }
.product-gallery__count { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--muted); font-family: var(--font-mono); }

/* feel tags; pills + storefront filter */
.feel-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.feel-pill {
    display: inline-flex; align-items: center; padding: 0.32rem 0.72rem;
    border-radius: 999px; border: 1px solid var(--line); background: var(--paper);
    font-size: 0.8rem; font-weight: 600; color: var(--ink, inherit); cursor: pointer;
    text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.feel-pill:hover { border-color: var(--blue); color: var(--blue); }
.feel-pill--btn { font: inherit; font-size: 0.8rem; font-weight: 600; }
.feel-pill.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.product-feel { margin: 0 0 1.25rem; }
.product-feel__label {
    display: block; margin-bottom: 0.45rem; font-family: var(--font-mono);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.feel-filter {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.85rem;
    margin: 0 0 2rem; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
}
.feel-filter__label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.feel-filter__clear { border: 0; background: none; color: var(--blue); font-size: 0.82rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* film facts strip (detail page) */
.film-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 1rem; }
.film-facts__item { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0.22rem 0.5rem; }

/* shop-together CTA banner */
.shop-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 1.25rem; padding: 1.1rem 1.4rem; border-radius: 14px; background: var(--blue); color: #fff; }
.shop-cta__title { margin: 0; font-size: 1.15rem; }
.shop-cta__lede { margin: 0.2rem 0 0; font-size: 0.9rem; opacity: 0.9; }
.shop-cta__btn { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; color: var(--blue); border-color: #fff; }
.shop-cta__btn:hover { background: rgba(255,255,255,0.9); }

/* products toolbar */
.products-toolbar { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1rem; }
.products-toolbar__btn { display: inline-flex; align-items: center; gap: 0.45rem; }
.products-toolbar__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 0.7rem; font-weight: 700; font-family: var(--font-mono); }
.products-toolbar__count[hidden] { display: none; }
.products-toolbar__results { font-size: 0.82rem; color: var(--muted); font-family: var(--font-mono); }

/* filter drawer */
html.drawer-lock { overflow: hidden; }
.drawer-scrim { position: fixed; inset: 0; z-index: 190; background: rgba(10,9,7,0.5); }
.filter-drawer { position: fixed; top: 0; left: 0; z-index: 195; width: min(360px, 90vw); height: 100%; background: var(--panel-solid); border-right: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 8px 0 30px rgba(0,0,0,0.12); }
.filter-drawer.is-open { transform: translateX(0); }
.filter-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); }
.filter-drawer__title { margin: 0; font-size: 1.05rem; }
.filter-drawer__close { border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
.filter-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.25rem; }
.filter-drawer__foot { display: flex; gap: 0.6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.filter-drawer__foot .btn { flex: 1; }
.drawer-facet { padding: 0.5rem 0 0.9rem; border-bottom: 1px solid var(--line); }
.drawer-facet:last-child { border-bottom: 0; }
.drawer-facet__title { margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.drawer-facet__hint { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--blue); }
.drawer-facet__opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-check { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.32rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.82rem; cursor: pointer; user-select: none; }
.filter-check input { margin: 0; }
.filter-check:has(input:checked) { background: var(--blue); border-color: var(--blue); color: #fff; }
.price-range { width: 100%; }

/* film finder (shop together) modal */
.finder { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.finder[hidden] { display: none; }
.finder__scrim { position: absolute; inset: 0; background: rgba(10,9,7,0.76); backdrop-filter: blur(4px); }
.finder__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(760px, 96vw);
    max-height: min(90dvh, 780px);
    overflow: hidden;
    border: 1px solid #111;
    border-radius: 2px;
    background: var(--card);
    color: var(--ink);
    box-shadow: 14px 18px 0 rgba(0,0,0,0.2), 0 28px 90px rgba(0,0,0,0.34);
}
.finder__dialog:focus { outline: none; }
.finder__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 27px 34px 24px;
    background: #111;
    color: #f7f3e8;
}
.finder__eyebrow,
.finder__counter {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.finder__eyebrow { margin-bottom: 7px; color: #61b9eb; }
.finder__counter { padding-right: 36px; color: #aaa69e; white-space: nowrap; }
.finder__title { margin: 0; font-family: var(--font-display); font-size: clamp(29px, 4vw, 42px); line-height: 0.95; letter-spacing: -0.035em; }
.finder__close {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #4c4a45;
    border-radius: 50%;
    background: transparent;
    color: #f7f3e8;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.finder__close:hover { border-color: #f7f3e8; }
.finder__progress { flex: 0 0 5px; height: 5px; background: var(--line); overflow: hidden; }
.finder__progress span { display: block; height: 100%; width: 0; background: var(--orange); transition: width 0.35s ease; }
.finder__stage { min-height: 330px; overflow-y: auto; padding: clamp(26px, 5vw, 42px); scrollbar-color: var(--line-strong) transparent; }
.finder-intro__body { max-width: 590px; margin: 0 0 28px; font-family: var(--font-display); font-size: clamp(21px, 3vw, 29px); font-weight: 650; line-height: 1.18; }
.finder-intro__facts { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.finder-intro__facts span { display: flex; align-items: center; gap: 13px; padding: 17px 10px 17px 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.finder-intro__facts span + span { padding-left: 20px; border-left: 1px solid var(--line); }
.finder-intro__facts b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--blue); }
.finder-intro__start { min-width: 220px; justify-content: space-between; }
.finder-step__q { max-width: 600px; margin: 0 0 7px; font-family: var(--font-display); font-size: clamp(25px, 4vw, 36px); line-height: 1.02; letter-spacing: -0.025em; }
.finder-step__help { margin: 0 0 24px; color: var(--muted); font-size: 0.9rem; }
.finder-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 30px; }
.finder-opt {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 61px;
    padding: 10px 15px;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.finder-opt:hover { border-color: var(--blue); transform: translateY(-1px); }
.finder-opt.is-sel { background: var(--blue); border-color: var(--blue); color: #fff; }
.finder-opt__no { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--faint); }
.finder-opt.is-sel .finder-opt__no { color: rgba(255,255,255,0.68); }
.finder-opt__label { font-weight: 700; font-size: 0.94rem; line-height: 1.2; }
.finder-opt__mark { opacity: 0; font-size: 13px; }
.finder-opt.is-sel .finder-opt__mark { opacity: 1; }
.finder-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.finder-results__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 30px; }
.finder-card { display: grid; grid-template-columns: 92px 1fr; min-height: 116px; border: 1px solid var(--line-strong); border-radius: 0; overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.finder-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.finder-card__img { display: block; background: var(--paper-2, #ece4d2); }
.finder-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.finder-card__body { min-width: 0; padding: 13px 14px; display: flex; flex-direction: column; gap: 5px; }
.finder-card__rank { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.finder-card__name { font-size: 0.9rem; font-weight: 700; line-height: 1.2; }
.finder-card__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; }
.finder-card__price { font-family: var(--font-mono); font-size: 0.78rem; color: var(--blue); font-weight: 700; }
.finder-card__view { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
@media (max-width: 560px) {
    .shop-cta { flex-direction: column; align-items: flex-start; }
    .finder { align-items: flex-end; padding: 8px; }
    .finder__dialog { width: 100%; max-height: calc(100dvh - 16px); box-shadow: 7px 8px 0 rgba(0,0,0,0.22); }
    .finder__head { align-items: flex-start; padding: 23px 20px 20px; }
    .finder__counter { padding: 4px 34px 0 0; white-space: normal; text-align: right; }
    .finder__stage { min-height: 0; padding: 25px 20px 28px; }
    .finder-intro__facts,
    .finder-opts,
    .finder-results__grid { grid-template-columns: 1fr; }
    .finder-intro__facts span + span { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
    .finder-intro__start { width: 100%; }
    .finder-card { grid-template-columns: 78px 1fr; min-height: 100px; }
}

/* dedicated gallery grid section */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; }
.gallery-grid__item {
    padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
    background: var(--paper-2, #ece4d2); cursor: zoom-in; aspect-ratio: 1 / 1;
}
.gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.gallery-grid__item:hover img { transform: scale(1.05); }

/* full-screen lightbox */
html.lightbox-lock { overflow: hidden; }
.lightbox {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center;
    background: rgba(10, 9, 7, 0.92); padding: 3.5rem 1rem;
}
.lightbox.is-open { display: flex; }
.lightbox__stage { margin: 0; max-width: min(1100px, 92vw); max-height: 86vh; display: flex; }
.lightbox__img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.lightbox__close, .lightbox__nav {
    position: absolute; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background 0.15s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__close { top: 1.1rem; right: 1.1rem; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; line-height: 1; }
.lightbox__nav--prev { left: 1.1rem; }
.lightbox__nav--next { right: 1.1rem; }
.lightbox__counter {
    position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em;
}
@media (max-width: 600px) {
    .lightbox__nav { width: 42px; height: 42px; font-size: 1.6rem; }
    .lightbox__nav--prev { left: 0.4rem; }
    .lightbox__nav--next { right: 0.4rem; }
}

.product-buy__category { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.product-buy__utilities { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.product-action { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.product-action svg { width: 15px; height: 15px; }
.product-action:hover { border-color: var(--blue); color: var(--blue); }
.product-action.is-noted { border-color: var(--red); color: var(--red); }
.product-buy__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0.25rem 0 0.75rem; }
.product-buy__price { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 1rem; }
.product-buy__price-now { font-size: 1.8rem; font-weight: 700; color: var(--blue); }
.product-buy__price-was { color: var(--muted); }
.product-buy__lede { color: var(--ink, #2a2a2a); margin: 0 0 1rem; }
.product-buy__stock { font-size: 0.9rem; font-weight: 600; margin: 0 0 1.25rem; }
.product-buy__stock.is-in { color: #2e7d32; }
.product-buy__stock.is-out { color: #b23b2e; }
.product-buy__form { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.product-buy__qty { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.product-buy__qty input { width: 72px; padding: 0.5rem; border: 1px solid var(--line, #e3dcc9); border-radius: 8px; }
.product-buy__added { width: 100%; margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--blue); }
.product-buy__added a { font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.product-buy__added a:hover { text-decoration-thickness: 2px; }
.product-buy__sku { margin-top: 1rem; font-size: 0.8rem; color: var(--muted); }

/* ---- Back-in-stock notify ---- */
.is-hidden { display: none !important; }
.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;
}
.product-detail.is-out .product-gallery { opacity: 0.55; filter: grayscale(0.4); }
.product-notify {
    margin-top: 0.5rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line);
    border-radius: 12px; background: var(--paper);
}
.product-notify__lede { margin: 0 0 0.85rem; font-size: 0.92rem; color: var(--muted); }
.product-notify__form { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.product-notify__field { flex: 1 1 220px; min-width: 0; }
.product-notify__field .field__input { width: 100%; }
.product-notify__email { font-weight: 600; }
.product-notify__msg { margin: 0 0 0.75rem; font-size: 0.9rem; font-weight: 600; }
.product-notify__msg.is-err { color: #b23b2e; }
.product-notify__done { width: 100%; margin: 0; font-size: 0.92rem; font-weight: 600; color: #2e7d32; }

/* out-of-stock product cards read as muted */
.card--product.is-out .card__media,
.card--product.is-out .card__title,
.card--product.is-out .card__body,
.card--product.is-out .card__price { opacity: 0.5; filter: grayscale(0.35); }
.card--product.is-out .card__media { pointer-events: none; }

.product-info { display: grid; gap: 2rem; }
.product-info .prose { line-height: 1.7; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line, #e3dcc9); vertical-align: top; }
.spec-table th { width: 40%; color: var(--muted); font-weight: 600; }

/* numbered process; a real sequence: film moves through it in order */
.process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.process__step {
    padding: 22px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.process__num {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--blue);
}

.process__title {
    margin: 10px 0 8px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.process__body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.58;
    color: var(--muted);
}

/* event list */
.event-list {
    display: grid;
    border-top: 1px solid var(--line);
}

.event {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.event__date {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--blue);
}

.event__title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.event__meta {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}

.event__tag {
    align-self: center;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

/* forms; used by account (login/register) and contact */
.field { display: grid; gap: 6px; }

.field__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.field__input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--field-bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
}

.field__input::placeholder { color: var(--faint); }

.field__input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 95, 151, 0.18);
}

textarea.field__input { resize: vertical; min-height: 132px; }

.turnstile-field {
    width: 100%;
    margin: 0;
    min-height: 0;
}
.turnstile-field .cf-turnstile { width: 100%; }
.turnstile-field:empty { display: none; }

/* honeypot; kept out of view and off the tab order */
.hp-field {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.field__input--error {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.16);
}

.form-alert {
    margin-bottom: 16px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
}

.form-alert--success {
    border-left-color: var(--blue);
    background: rgba(0, 95, 151, 0.08);
}

.form-alert--error {
    border-left-color: var(--red);
    background: rgba(230, 0, 18, 0.07);
}

.field__hint {
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--muted);
}

.account-logout {
    margin-top: 20px;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    /* A right-hand fade that only shows while there is more to scroll to.
       Pure CSS: the gradient is pinned to the scroll container's right edge and
       vanishes once scrolled to the end. */
    background:
        linear-gradient(to right, var(--card) 30%, rgba(0, 0, 0, 0)) left / 24px 100% no-repeat local,
        linear-gradient(to left, var(--card) 30%, rgba(0, 0, 0, 0)) right / 24px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(17, 17, 17, 0.14), rgba(0, 0, 0, 0)) left / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(17, 17, 17, 0.14), rgba(0, 0, 0, 0)) right / 12px 100% no-repeat scroll;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
}

.data-table th,
.data-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.data-table th {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.data-table td {
    font-variant-numeric: tabular-nums;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
}

.btn--primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn[aria-disabled="true"],
.btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* notice banner; e.g. "portal in development" */
.notice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-top: 22px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    background: rgba(0, 95, 151, 0.06);
}

.notice__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
}

.notice p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}

/* auth (login / register) */
.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.auth-card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.auth-card__title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.auth-card__note {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}

.auth-card form { display: grid; gap: 14px; }

.auth-card .btn { margin-top: 4px; width: 100%; }

.auth-note { margin-top: 18px; color: var(--muted); }

/* --------------------------------------------------------------------------
   My Account dashboard
   -------------------------------------------------------------------------- */
.account-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 32px 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.account-topbar__identity {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.account-topbar__avatar {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 68px;
    width: 68px;
    height: 68px;
    border: 1px solid rgba(0, 95, 151, 0.35);
    border-radius: 50%;
    background:
        linear-gradient(135deg, rgba(0, 95, 151, 0.16), rgba(0, 95, 151, 0.04)),
        var(--paper);
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--blue);
    box-shadow: inset 0 0 0 6px var(--card);
}

.account-topbar__avatar::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 7px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--card);
    border-radius: 50%;
    background: var(--blue);
}

.account-topbar__avatar.has-photo { overflow: hidden; }
.account-topbar__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.account-topbar::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--stripe-h);
    background: var(--stripe);
}

.account-topbar__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
}

.account-topbar__title {
    margin: 8px 0 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: -0.02em;
    color: var(--ink);
}

.account-topbar__email {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--muted);
}

.account-topbar__meta,
.account-topbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.account-topbar__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 106, 0, 0.28);
    border-radius: 999px;
    background: rgba(255, 106, 0, 0.08);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orange);
}

.account-topbar__status svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-topbar__status.is-verified {
    border-color: rgba(0, 95, 151, 0.24);
    background: rgba(0, 95, 151, 0.07);
    color: var(--blue);
}

.account-topbar__actions form { margin: 0; }

.account-newsletter-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    margin-top: 18px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    background: var(--blue-tint);
    box-shadow: var(--shadow-soft);
}

.account-newsletter-offer__eyebrow {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue);
}

.account-newsletter-offer h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    color: var(--ink);
}

.account-newsletter-offer p {
    max-width: 68ch;
    margin: 6px 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.account-newsletter-offer__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.account-newsletter-offer__actions form { margin: 0; }

.account-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 26px;
    margin-top: 22px;
    align-items: start;
}

.account-nav {
    position: sticky;
    top: calc(var(--header-h, 80px) + 18px);
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-content: start;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.account-nav__group {
    display: grid;
    gap: 4px;
}

.account-nav__group-title {
    display: block;
    padding: 0 11px 7px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
}

.account-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 43px;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.account-nav__item:hover {
    color: var(--ink);
    background: var(--paper);
    transform: translateX(2px);
}

.account-nav__icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--faint);
}

.account-nav__item.is-active {
    color: var(--blue);
    background: var(--blue-tint);
    border-color: rgba(0, 95, 151, 0.26);
    box-shadow: none;
    transform: none;
}

.account-nav__item.is-active .account-nav__icon { color: var(--blue); }

.account-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.account-view-header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 17px;
    align-items: center;
    padding: 7px 4px 5px;
}

.account-view-header__mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--blue);
}

.account-view-header__mark svg { width: 24px; height: 24px; }

.account-view-header__eyebrow {
    display: block;
    margin-bottom: 3px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue);
}

.account-view-header__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.account-view-header__intro {
    max-width: 68ch;
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

.account-panel {
    padding: 28px 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.account-main > .account-panel,
.account-main > .panel,
.account-profile-grid > .account-panel {
    position: relative;
    overflow: hidden;
}

.account-main > .account-panel::before,
.account-main > .panel::before,
.account-profile-grid > .account-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--blue) 0 42%, var(--orange) 42% 72%, var(--red) 72% 100%);
    opacity: 0.72;
}

.account-panel__title {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.account-panel__subtitle {
    margin: 30px 0 16px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.stat-card {
    display: grid;
    gap: 6px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.stat-card__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Only rendered when something is actually owed, so it can afford to be the
   one card that draws the eye. */
.stat-card--due {
    border-color: rgba(0, 95, 151, 0.35);
    background: rgba(0, 95, 151, 0.06);
}
.stat-card--due .stat-card__value { color: var(--blue); }

.stat-card__note {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--muted);
}

/* Two cards should sit side by side rather than stretch to half a screen
   each, which is what auto-fit does when there is nothing else to place. */
.stat-cards--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stat-card__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.account-quicklinks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.account-empty {
    margin: 0;
    padding: 28px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    text-align: center;
    font-family: var(--font-body);
    color: var(--muted);
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge--good { background: rgba(0, 95, 151, 0.12); color: var(--blue); }
.badge--warn { background: rgba(255, 106, 0, 0.14); color: var(--orange); }
.badge--bad { background: rgba(230, 0, 18, 0.12); color: var(--red); }
.badge--muted { background: rgba(128, 128, 128, 0.18); color: var(--muted); }

.download-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.download-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.download-item__name {
    display: block;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.download-item__meta {
    display: block;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.account-form {
    display: grid;
    gap: 16px;
    max-width: 620px;
}

.account-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.account-form__note {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

.account-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    gap: 18px;
    align-items: start;
}

.account-profile-grid .account-form { max-width: none; }
.account-profile-grid .form-row { grid-template-columns: 1fr; }
.account-profile-grid .account-panel__title { margin-bottom: 8px; }
.account-profile-grid .account-panel__intro { margin: 0 0 20px; }
.account-profile-grid > .account-panel:only-child { grid-column: 1 / -1; max-width: 760px; }
.account-main--profile > .account-panel--danger { margin-top: 0; }

/* The photo is identity, not a third form competing for a grid column. Give it
   one compact full-width row, then let contact details and email sit as the
   two actual settings forms beneath it. */
.account-profile-grid > .avatar-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
    grid-template-areas:
        "avatar-title avatar-control"
        "avatar-intro avatar-control";
    column-gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.avatar-panel > .account-panel__title {
    grid-area: avatar-title;
    align-self: end;
}

.avatar-panel > .account-panel__intro {
    grid-area: avatar-intro;
    align-self: start;
}

.avatar-panel > .avatar-row {
    grid-area: avatar-control;
    min-height: 92px;
    padding-left: clamp(24px, 4vw, 46px);
    border-left: 1px solid var(--line);
}

/* On installations where email verification is unavailable, there is no
   change-email panel to occupy the second column. Let the remaining contact
   form use the row instead of leaving a false empty slot. */
.account-profile-grid > .avatar-panel + .account-panel:last-child {
    grid-column: 1 / -1;
}

.account-empty-state {
    display: grid;
    justify-items: center;
    padding: clamp(32px, 6vw, 58px) 24px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 50% 0, rgba(0, 95, 151, 0.08), transparent 42%),
        var(--paper);
    text-align: center;
}

.account-empty-state__mark {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 95, 151, 0.28);
    border-radius: 50%;
    background: var(--card);
    color: var(--blue);
}

.account-empty-state__mark--heart { color: var(--red); border-color: rgba(230, 0, 18, 0.24); }
.account-empty-state__mark svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-empty-state h3,
.account-empty-state h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 21px;
    color: var(--ink);
}

.account-empty-state p {
    max-width: 52ch;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

.account-empty-state__actions {
    display: flex;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.account-empty-state--compact {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    gap: 14px;
    padding: 18px;
    text-align: left;
}

.account-empty-state--compact .account-empty-state__mark {
    width: 44px;
    height: 44px;
    margin: 0;
}

.account-empty-state--compact .account-empty-state__mark svg { width: 20px; height: 20px; }
.account-empty-state--compact h4 { font-size: 17px; }

.account-main--security {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.account-main--security > .account-view-header,
.account-main--security > .account-verify,
.account-main--security > .account-panel {
    grid-column: 1 / -1;
}

.account-main--security > .panel {
    height: 100%;
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.account-main--security > .account-panel > .account-panel__subtitle:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.account-type {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.account-type .field__label { margin-bottom: 6px; width: 100%; }

.radio-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--muted);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }

.radio-pill:has(input:checked) {
    border-color: var(--blue);
    color: var(--ink);
    background: rgba(0, 95, 151, 0.07);
    box-shadow: inset 0 0 0 1px var(--blue);
}

/* company fields reveal only when "company" is selected */
.account-company-fields { display: none; }
.billing-form:has(input[name="account_type"][value="company"]:checked) .account-company-fields { display: block; }

select.field__input {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: right 16px center, right 11px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

@media (max-width: 780px) {
    .account-newsletter-offer {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
    }

    .account-shell {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 16px;
    }

    /* Seven items wrapped into a ragged block three rows deep, which is most of
       a phone screen spent on navigation before any content. One swipeable row
       instead, the way a phone shows sections everywhere else.

       It bleeds to the screen edges so the strip reads as scrollable rather
       than as a box that happens to be cut off, and the mask fades whatever is
       half-visible at each end. */
    .account-nav {
        position: static;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        margin: 0 calc(var(--page-pad, 16px) * -1);
        padding: 2px var(--page-pad, 16px) 4px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        mask-image: linear-gradient(90deg,
            transparent 0, #000 var(--page-pad, 16px),
            #000 calc(100% - var(--page-pad, 16px)), transparent 100%);
    }
    .account-nav::-webkit-scrollbar { display: none; }

    .account-nav__group { display: contents; }
    .account-nav__group-title { display: none; }

    .account-nav__item {
        flex: 0 0 auto;
        scroll-snap-align: center;
        min-height: 42px;
        padding: 9px 13px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--card);
        /* 11px because these are uppercase and tracked; at 12 the longer ones
           push the strip wider than it needs to be. */
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    .account-nav__item:hover { transform: none; }
    .account-nav__icon { width: 16px; height: 16px; flex-basis: 16px; }

    /* The desktop state is a left border, which means nothing on a pill. */
    .account-nav__item.is-active {
        border-left-width: 1px;
        border-color: var(--blue);
        background: var(--blue);
        color: #fff;
        box-shadow: none;
    }

    /* The brand stripe already runs across the top of every page. Repeating it
       under the welcome card puts two of them within a thumb's width of each
       other on a phone, which reads as decoration rather than as a signature.
       Kept on desktop, where the card is one element among many. */
    .account-topbar::before { display: none; }
    .account-topbar {
        padding: 20px 22px;
        gap: 12px;
    }
    .account-topbar__identity { gap: 13px; }
    .account-topbar__avatar {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
        font-size: 13px;
        box-shadow: inset 0 0 0 4px var(--card);
    }
    .account-topbar__avatar::after { width: 8px; height: 8px; bottom: 4px; }
    .account-topbar__title { font-size: clamp(1.3rem, 5.4vw, 1.7rem); }
    .account-topbar__meta { gap: 6px; }
    .account-topbar__email { width: 100%; font-size: 13px; overflow-wrap: anywhere; }
    .account-topbar__actions { width: 100%; display: grid; grid-template-columns: 1fr auto; }
    .account-topbar__actions .btn { width: 100%; }
    .account-panel { padding: 20px 18px; }

    .account-view-header {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 13px;
        padding: 4px 1px;
    }
    .account-view-header__mark { width: 44px; height: 44px; }
    .account-view-header__mark svg { width: 20px; height: 20px; }
    .account-view-header__intro { font-size: 13px; }

    .account-profile-grid,
    .account-main--security { grid-template-columns: 1fr; }
    .account-profile-grid > .avatar-panel {
        grid-template-columns: 1fr;
        grid-template-areas: "avatar-title" "avatar-intro" "avatar-control";
    }
    .avatar-panel > .avatar-row {
        min-height: 0;
        padding: 18px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    .account-main--security > * { grid-column: 1 !important; }
    .account-main--security > .panel { padding: 20px 18px; }

    .account-form__actions { align-items: stretch; flex-direction: column; }
    .account-form__actions .btn { width: 100%; }

    .account-empty-state { padding: 34px 18px; }
    .account-empty-state__actions { display: grid; width: 100%; }
    .account-empty-state__actions .btn { width: 100%; }

    /* 150px minimums forced two tall columns of mostly empty box. These are a
       number and a word; they do not need twenty pixels of padding on a phone. */
    .stat-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .stat-card { padding: 14px 14px 12px; gap: 3px; }
    .stat-card__value { font-size: 26px; }
    .stat-card__label { font-size: 10px; letter-spacing: 0.1em; }

    /* Odd one out spans the row rather than leaving a gap beside it. */
    .stat-cards > .stat-card--due:last-child { grid-column: 1 / -1; }

    .account-quicklinks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .account-quicklinks .btn { width: 100%; }
    .account-quicklinks .btn:first-child { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .account-topbar__status { display: none; }
    .account-empty-state--compact { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
    .account-nav { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Security / two-factor
   -------------------------------------------------------------------------- */
.auth-grid--single {
    grid-template-columns: minmax(0, 460px);
    justify-content: center;
}

.twofa-status { margin: 0 0 16px; }

.twofa-setup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.twofa-qr {
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    line-height: 0;
}

.twofa-qr svg { display: block; width: 196px; height: 196px; }

.twofa-setup__body { display: grid; gap: 6px; }

.twofa-steps {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
}

.twofa-key {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--ink);
    word-break: break-all;
}

.twofa-setup__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.twofa-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}

.recovery-box {
    margin: 0 0 22px;
    padding: 20px;
    border: 1px solid var(--blue);
    border-radius: var(--radius);
    background: rgba(0, 95, 151, 0.06);
}

.recovery-box__title {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
}

.recovery-box__note {
    margin: 6px 0 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--muted);
}

.recovery-codes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--ink);
}

.recovery-codes li {
    padding: 8px 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 4px;
    text-align: center;
}

@media (max-width: 620px) {
    .twofa-setup { grid-template-columns: 1fr; }
    .twofa-qr { justify-self: start; }
}

/* contact */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 22px;
}

.info-rows { display: grid; gap: 16px; }

.info-row { display: grid; gap: 3px; }

.info-row__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
}

.info-row__value {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
}

.info-row__value a { color: var(--ink); text-decoration-color: var(--line-strong); }
.info-row__value a:hover { color: var(--blue); }

.contact-form { display: grid; gap: 14px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* call-to-action band; a bold Minolta-blue block */
/* Rapid service feature (film page). Carries the brand stripe on its top edge
   so it reads as a signature panel rather than another price card. Built on
   --card rather than a fixed dark ground so it inverts correctly with theme. */
/* A callout, not another hero: one accent edge instead of the tricolour
   banner, callout-sized type, and a quiet action. Rush service is a fact
   worth knowing, not the page's second act. */
.rapid {
    position: relative;
    margin-top: 34px;
    padding: 22px 26px 24px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius);
    background: var(--card);
}
.rapid__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
}
.rapid__title {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    line-height: 1.15;
    text-wrap: balance;
    color: var(--ink);
}
.rapid__lede {
    margin: 10px 0 0;
    max-width: 54ch;
    color: var(--muted);
}
.rapid__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 26px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}
.rapid__fact {
    padding-top: 12px;
    border-top: 2px solid var(--blue);
}
.rapid__fact-label {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink);
}
.rapid__fact-body {
    display: block;
    margin-top: 4px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted);
}
.rapid__cta { margin-top: 26px; }

@media (max-width: 760px) {
    .rapid { padding-left: 20px; padding-right: 20px; }
    .rapid__facts { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------------------------------------------------------------------------
 * Homepage, August 2026 direction: editorial hero with a real service
 * composition, a connected four-route selector, the three ordering paths,
 * live Updates and shelf features, and one strong blue band for rhythm.
 * The old landing/hero-card/stat styles below serve other legacy uses and
 * can be swept once no page references them.
 */
.home-hero {
    display: grid;
    grid-template-columns: 11fr 9fr;
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
    padding: clamp(18px, 3.5vh, 40px) 0 clamp(24px, 4vh, 48px);
}

.home-hero__eyebrow {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.home-hero__title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(38px, 5.4vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.home-hero__lede {
    margin: 0 0 22px;
    max-width: 52ch;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.6;
    color: var(--muted);
}

.home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.home-hero__reassure {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--faint);
}

/* The bench: a committed deep-blue photographic surface in both themes, with
   the lab's own notation. The canisters are the subject; the print box
   supports. No unexplained black rectangles; the surface IS the explanation. */
.home-hero__stage { min-width: 0; }

.home-hero__bench {
    position: relative;
    aspect-ratio: 5 / 4;
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 44px),
        linear-gradient(155deg, #0d3b5c 0%, #005f97 78%, #12699f 100%);
    border: 1px solid color-mix(in srgb, var(--blue) 55%, var(--line));
    overflow: hidden;
}

.home-hero__subject {
    width: min(52%, 240px);
    height: auto;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
}

.home-hero__support {
    position: absolute;
    right: 8%;
    bottom: 7%;
    width: min(28%, 130px);
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3));
}

.home-hero__frame-note,
.home-hero__formats {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
}

.home-hero__frame-note { top: 12px; left: 14px; }
.home-hero__formats { bottom: 12px; left: 14px; }

.home-hero__reg {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.home-hero__reg--tl { top: 10px; right: 12px; border-width: 1px 1px 0 0; }
.home-hero__reg--br { bottom: 10px; right: 12px; border-width: 0 1px 1px 0; }

/* ------------------------------------------------------- journey routes -- */
.home-routes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    background: var(--panel-solid);
    margin-bottom: clamp(36px, 6vh, 64px);
}

.home-route {
    --route-accent: var(--line);
    position: relative;
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 20px 18px 16px;
    border-top: 3px solid var(--route-accent);
    text-decoration: none;
    color: var(--ink);
    min-height: 128px;
}

.home-route + .home-route { border-left: 1px solid var(--line); }

.home-route--blue   { --route-accent: var(--blue); }
.home-route--orange { --route-accent: var(--orange); }
.home-route--red    { --route-accent: var(--red); }
.home-route--none   { --route-accent: var(--ink); }

.home-route:hover,
.home-route:focus-visible { background: color-mix(in srgb, var(--route-accent) 6%, var(--panel-solid)); }
.home-route:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.home-route__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
}

.home-route__desc { font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.home-route__go {
    position: absolute;
    right: 14px;
    bottom: 10px;
    font-size: 18px;
    color: var(--route-accent);
    transition: transform 0.18s ease;
}

.home-route:hover .home-route__go { transform: translateX(3px); }

/* ------------------------------------------------------ the three paths -- */
.home-paths__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.home-path {
    position: relative;
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 18px 18px 34px;
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    background: var(--paper-2);
}

.home-path:hover,
.home-path:focus-visible { border-color: var(--blue); }
.home-path:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.home-path__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.home-path__desc { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.home-path__go { position: absolute; right: 14px; bottom: 10px; color: var(--blue); transition: transform 0.18s ease; }
.home-path:hover .home-path__go { transform: translateX(3px); }

/* -------------------------------------------------------- from the lab -- */
.home-lab__grid { display: grid; gap: 20px; }
.home-lab__grid--pictured { grid-template-columns: 7fr 5fr; align-items: start; }

.home-lab__media {
    display: block;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.home-lab__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.home-lab__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}

.home-lab__type { color: var(--link); }

.home-lab__feature-title { margin: 6px 0 8px; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; }
.home-lab__feature-title a { color: var(--ink); text-decoration: none; }
.home-lab__feature-title a:hover { text-decoration: underline; }
.home-lab__excerpt { margin: 0; max-width: 60ch; color: var(--muted); line-height: 1.6; }

.home-lab__rest { display: grid; gap: 14px; align-content: start; }
.home-lab__item { padding: 12px 0; border-top: 1px solid var(--line); }
.home-lab__item-title { margin: 4px 0 0; font-size: 16.5px; line-height: 1.35; }
.home-lab__item-title a { color: var(--ink); text-decoration: none; }
.home-lab__item-title a:hover { text-decoration: underline; }

.home-lab__evergreen { display: flex; flex-wrap: wrap; gap: 18px; }

/* ------------------------------------------------------------ the shelf -- */
.home-shelf__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.home-shelf__card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    background: var(--panel-solid);
    text-decoration: none;
    color: var(--ink);
}

.home-shelf__card:hover,
.home-shelf__card:focus-visible { border-color: var(--blue); }
.home-shelf__card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* A light product surface in both themes: transparent product art must never
   sit on an unexplained black rectangle. */
.home-shelf__media {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--paper-2);
    border: 1px solid var(--line);
}

.home-shelf__media img { max-width: 72%; max-height: 82%; width: auto; height: auto; object-fit: contain; }

.home-shelf__name { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; }
.home-shelf__price { font-family: var(--font-mono); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.home-shelf__from { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); }

/* -------------------------------------------------------- email updates -- */
.home-signal {
    margin: clamp(36px, 6vh, 64px) 0;
    background: linear-gradient(150deg, #0d3b5c, #005f97);
    border: 1px solid color-mix(in srgb, var(--blue) 60%, var(--line));
}

.home-signal__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: clamp(24px, 4vh, 40px) clamp(20px, 4vw, 44px);
}

.home-signal__title { margin: 0 0 6px; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); color: #fff; }
.home-signal__lede { margin: 0; max-width: 58ch; color: rgba(255, 255, 255, 0.82); line-height: 1.55; }
.home-signal__btn { background: #fff; color: #0d3b5c; border-color: #fff; }
.home-signal__btn:hover { background: rgba(255, 255, 255, 0.9); color: #0d3b5c; }

.cta-band__eyebrow {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* ---------------------------------------------------------------------------
 * Updates by email: a real signup page in the site's language. The form on
 * the left; the lab-bench panel on the right saying what actually arrives;
 * the confirm / unsubscribe / dead-link landings as their own small moments.
 */
.upd-hero {
    display: grid;
    grid-template-columns: 11fr 9fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    padding: clamp(18px, 3.5vh, 40px) 0 clamp(28px, 5vh, 56px);
}

.upd-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.upd-hero__title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.upd-hero__lede {
    margin: 0 0 22px;
    max-width: 50ch;
    font-size: clamp(15.5px, 1.4vw, 17.5px);
    line-height: 1.6;
    color: var(--muted);
}

.upd-form { display: grid; gap: 14px; max-width: 440px; }
.upd-form__submit { justify-self: start; min-width: 200px; }

.upd-form__consent {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--faint);
}

.upd-form__consent a { color: var(--link); }

.upd-note {
    max-width: 440px;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    background: var(--paper-2);
    font-size: 14.5px;
    line-height: 1.55;
}

.upd-note strong { display: block; margin-bottom: 2px; }
.upd-note--ok { border-left-color: #3a9c5d; }
.upd-note--error { border-left-color: var(--red); }

/* The bench: same deep-blue surface and notation as the homepage hero. */
.upd-hero__panel {
    position: relative;
    padding: clamp(22px, 3vw, 34px) clamp(20px, 2.6vw, 30px) 18px;
    background:
        repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 44px),
        linear-gradient(155deg, #0d3b5c 0%, #005f97 78%, #12699f 100%);
    border: 1px solid color-mix(in srgb, var(--blue) 55%, var(--line));
    color: #fff;
}

.upd-hero__panel-note {
    position: absolute;
    top: 12px;
    right: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.upd-hero__panel-title {
    margin: 0 0 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.upd-expect { list-style: none; margin: 0; padding: 0; }

.upd-expect__row {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.upd-expect__num {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    padding-top: 3px;
}

.upd-expect__body { display: grid; gap: 2px; }
.upd-expect__title { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; }
.upd-expect__desc { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }

.upd-hero__panel-foot {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.66);
}

.upd-hero__reg {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.upd-hero__reg--tl { top: 10px; left: 12px; border-width: 1px 0 0 1px; }
.upd-hero__reg--br { bottom: 10px; right: 12px; border-width: 0 1px 1px 0; }

/* Confirm / unsubscribe / dead-link landings: one centred moment each. */
.upd-state {
    max-width: 560px;
    margin: clamp(32px, 8vh, 88px) auto;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    background: var(--panel-solid);
    text-align: center;
}

.upd-state__frame {
    display: block;
    margin-bottom: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
}

.upd-state__mark {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
}

.upd-state__mark--ok { color: #3a9c5d; border-color: color-mix(in srgb, #3a9c5d 45%, var(--line)); }

.upd-state__title { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); }
.upd-state__body { margin: 0 0 20px; color: var(--muted); line-height: 1.6; }
.upd-state__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

@media (max-width: 900px) {
    .upd-hero { grid-template-columns: 1fr; }
    .upd-form, .upd-note { max-width: none; }
    .upd-form__submit { justify-self: stretch; }
}

/* ---------------------------------------------------------------------------
 * The shop, August redesign: a directory of editorial department entrances,
 * department catalogues in a compact stock list, and search in the same
 * presentation. Rules, spacing and scale carry the structure, with no tile
 * grids, no card shadows.
 */
.shop-head { padding: clamp(18px, 3vh, 34px) 0 clamp(24px, 4vh, 42px); }
.shop-head--directory {
    display: grid;
    grid-template-columns: minmax(210px, 0.62fr) minmax(320px, 1.38fr);
    gap: clamp(24px, 5vw, 74px);
    align-items: end;
    padding-bottom: clamp(28px, 4vw, 46px);
    border-bottom: 4px solid var(--ink);
}
.shop-head__copy,
.shop-head__actions { min-width: 0; }

.shop-head__label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--link);
}

.shop-head__title {
    max-width: 9ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(48px, 7vw, 82px);
    line-height: 0.85;
    letter-spacing: -0.05em;
}

.shop-head__intro { margin: 0; max-width: 44ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.shop-head__meta { margin: 12px 0 0; color: var(--muted); font-size: 14px; }

.shop-head__actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(290px, 0.85fr);
    gap: 0;
    margin-top: clamp(4px, 1vw, 14px);
    border: 1px solid var(--line-strong);
}

.shop-search { position: relative; display: block; width: 100%; }
.shop-search--feature {
    display: grid;
    grid-template-columns: minmax(150px, 0.56fr) minmax(220px, 1fr);
    align-items: center;
    gap: 7px 25px;
    min-height: 150px;
    padding: 25px 29px;
    background: var(--card);
}
.shop-search__label {
    align-self: end;
    font-family: var(--font-display);
    font-size: clamp(19px, 2.3vw, 27px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
}
.shop-search__help { align-self: start; grid-row: 2; color: var(--muted); font-size: 12px; line-height: 1.4; }
.shop-search__control { position: relative; grid-column: 2; grid-row: 1 / 3; display: flex; align-items: stretch; }
.shop-search__input {
    width: 100%;
    min-height: 48px;
    padding: 0 15px;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    background: var(--card);
    color: var(--ink);
    font-size: 15px;
}
.shop-search__input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.shop-search__button {
    flex: 0 0 auto;
    min-width: 92px;
    padding: 0 17px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}
.shop-search__button:hover { background: var(--blue); border-color: var(--blue); }
.shop-search__submit {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.shop-head__finder {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 150px;
    padding: 25px 29px;
    overflow: hidden;
    border: 0;
    border-left: 1px solid #0d4b6f;
    border-top: 5px solid var(--orange);
    background: var(--blue);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease;
}
.shop-head__finder::after {
    content: '';
    position: absolute;
    right: -34px;
    bottom: -52px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
}
.shop-head__finder:hover { background: #064f79; }
.shop-head__finder:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.shop-head__finder-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.shop-head__finder-label {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}
.shop-head__finder-arrow { position: relative; z-index: 1; font-size: 24px; line-height: 0.7; transition: transform 0.18s ease; }
.shop-head__finder:hover .shop-head__finder-arrow { transform: translateX(4px); }
.shop-head__finder-title { max-width: 15ch; font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 29px); line-height: 1; letter-spacing: -0.025em; }
.shop-head__finder-body { position: relative; z-index: 1; max-width: 39ch; color: rgba(255,255,255,0.8); font-size: 12px; line-height: 1.4; }

/* Department index: plain typographic links, deliberately unboxed. */
.shop-index {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
    padding: 0;
    margin-top: -34px;
    margin-bottom: 0;
    border: 0;
}

.shop-index__link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
}
.shop-index__link:hover { color: var(--ink); text-decoration-color: currentColor; }
.shop-index__count {
    margin-left: 7px;
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--faint);
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

/* Department entrances reproduce the approved console prototype: artwork,
 * identity and sample stock form one connected editorial band. */
.dept {
    --dept-accent: var(--blue);
    display: grid;
    grid-template-columns: minmax(245px, 0.72fr) minmax(260px, 0.68fr) minmax(300px, 1fr);
    min-height: 330px;
    border-bottom: 1px solid var(--line-strong);
    background: var(--card);
    overflow: hidden;
}
.shop-index + .dept { border-top: 1px solid var(--line-strong); }
.dept--flip { background: var(--paper-2); }
.dept--flip .dept__art { order: 3; border-right: 0; border-left: 1px solid var(--line); }
.dept--flip .dept__body { order: 1; }
.dept--flip .dept__stock { order: 2; border-left: 0; }

.dept__art {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 330px;
    padding: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--dept-accent) 10%, var(--paper-2));
    border-right: 1px solid var(--line);
}
.dept__art::after {
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: var(--dept-accent);
    content: '';
}
.dept__art img { width: 82%; height: 270px; padding: 22px; object-fit: contain; }

.dept__mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(76px, 10vw, 145px);
    letter-spacing: -0.07em;
    line-height: 0.75;
    color: color-mix(in srgb, var(--dept-accent) 75%, var(--ink));
}

.dept__no {
    display: block;
    margin-bottom: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dept-accent);
    font-variant-numeric: tabular-nums;
}

.dept__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(28px, 4vw, 48px);
}
.dept__title {
    max-width: 8ch;
    margin: 10px 0 0;
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 62px);
    letter-spacing: -0.045em;
    line-height: 0.87;
}
.dept__action { display: grid; gap: 20px; }
.dept__desc { margin: 0; max-width: 34ch; color: var(--muted); font-size: 13px; line-height: 1.55; }
.dept__browse { width: fit-content; }

.dept__stock {
    display: grid;
    gap: 0;
    align-content: center;
    padding: clamp(24px, 4vw, 44px);
    border-left: 1px solid var(--line);
}
.dept__stock-label {
    margin-bottom: 11px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dept__sample {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 13px;
    align-items: center;
    min-height: 68px;
    padding: 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
}
.dept__sample:hover .dept__sample-name { text-decoration: underline; }

.dept__sample-media {
    display: grid;
    place-items: center;
    width: 44px;
    height: 52px;
    background: transparent;
    border: 0;
}
.dept__sample-media img { width: 44px; height: 52px; padding: 3px; object-fit: contain; }

.dept__sample-name { overflow: hidden; font-size: 13px; font-weight: 700; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.dept__sample-price { font-family: var(--font-mono); font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.dept__more {
    display: block;
    margin-top: 13px;
    padding-top: 0;
    border-top: 0;
    font-size: 11px;
    color: var(--muted);
}

/* Department catalogue head. Compact enough to stay a catalogue page, but
   composed as one object so the category art belongs to the introduction. */
.dept-head {
    position: relative;
    margin-top: clamp(14px, 3vh, 28px);
    padding: 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    overflow: hidden;
}
.dept-head::after {
    position: absolute;
    right: -60px;
    bottom: -100px;
    width: 310px;
    height: 310px;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
    border-radius: 50%;
    content: '';
    pointer-events: none;
}
.dept-head__back {
    position: absolute;
    z-index: 2;
    top: 22px;
    left: clamp(22px, 4vw, 48px);
    margin: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.dept-head__back a { color: var(--muted); text-decoration: none; }
.dept-head__back a:hover { color: var(--ink); text-decoration: underline; }

.dept-head__row {
    display: grid;
    grid-template-columns: minmax(240px, 0.7fr) minmax(360px, 1.3fr);
    min-height: 310px;
    gap: 0;
    align-items: stretch;
}
.dept-head__art {
    display: grid;
    place-items: center;
    aspect-ratio: auto;
    background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 13%, var(--paper)), var(--paper-2));
    border: 0;
    border-right: 1px solid var(--line);
}
.dept-head__art img {
    width: 78%;
    height: 240px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.12));
}
.dept-head__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 62px clamp(32px, 6vw, 78px) 46px;
    background: var(--card);
}
.dept-head__title {
    max-width: 12ch;
    margin: 0 0 13px;
    font-family: var(--font-display);
    font-size: clamp(42px, 5.6vw, 70px);
    letter-spacing: -0.045em;
    line-height: 0.94;
}
.dept-head__desc { margin: 0 0 18px; max-width: 48ch; color: var(--muted); font-size: 15px; line-height: 1.65; }
.dept-head__count {
    width: fit-content;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid var(--line);
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.dept-help {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin: 14px 0 18px;
    padding: 18px 20px;
    border: 1px solid color-mix(in srgb, var(--blue) 48%, var(--line));
    background: color-mix(in srgb, var(--blue) 7%, var(--panel-solid));
}
.dept-help__label {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--link);
}
.dept-help__title { margin: 0 0 4px; font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
.dept-help__body { margin: 0; max-width: 66ch; color: var(--muted); font-size: 13px; line-height: 1.5; }
.dept-help__button { white-space: nowrap; }

/* Filter pills: URL-addressable links, state shown by fill not colour alone. */
.dept-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    align-items: start;
    padding: 18px 0;
    margin-bottom: 10px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.dept-filters__set {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.dept-filters__label {
    padding-top: 7px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
}
.dept-filters__group { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.dept-filters__pill {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink);
    text-decoration: none;
}
.dept-filters__pill:hover { border-color: var(--ink); }
.dept-filters__pill.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dept-filters__results {
    grid-column: 1 / -1;
    justify-self: end;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--faint);
}
.dept-sort {
    display: grid;
    grid-template-columns: 82px minmax(170px, 1fr);
    gap: 10px;
    align-items: center;
}
.dept-sort .dept-filters__label { padding-top: 0; }
.dept-sort__select {
    width: 100%;
    min-height: 38px;
    padding: 6px 34px 6px 11px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--panel-solid);
    color: var(--ink);
    font: inherit;
}
.dept-sort__select:focus { outline: 2px solid var(--blue); outline-offset: -1px; }

/* The stock list. */
.stock-list { list-style: none; margin: 0; padding: 0; }

.stock-row {
    display: grid;
    grid-template-columns: 34px 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.stock-row--out .stock-row__name { color: var(--muted); }

.stock-row__num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.stock-row__media {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: var(--paper-2);
    border: 1px solid var(--line);
}
.stock-row__media img { max-width: 84%; max-height: 84%; object-fit: contain; }
.stock-row__mark { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--blue); }

.stock-row__body { display: grid; gap: 2px; min-width: 0; }
.stock-row__cat {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}
.stock-row__name { font-weight: 600; font-size: 15.5px; color: var(--ink); text-decoration: none; }
.stock-row__name:hover { text-decoration: underline; }
.stock-row__meta { font-size: 12.5px; color: var(--muted); }

.stock-row__flag {
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--link);
}
.stock-row__out {
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--red);
}

.stock-row__price { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock-row__from { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin-right: 4px; }

.stock-more { margin: 20px 0 0; text-align: center; }

/* Search results -----------------------------------------------------------
   Search is a small catalogue, not a utility list. Departments provide the
   hierarchy, the sidebar narrows it, and products retain the gallery-caption
   treatment used elsewhere in the shop. */
.search-head {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(380px, 1.18fr);
    gap: clamp(28px, 6vw, 88px);
    align-items: end;
    padding: clamp(26px, 5vw, 62px) 0 clamp(28px, 4vw, 46px);
    border-bottom: 4px solid var(--ink);
}
.search-head__title {
    max-width: 12ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(42px, 6vw, 72px);
    line-height: 0.92;
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
}
.search-head__meta {
    margin: 12px 0 0;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.search-head__form { display: flex; align-items: stretch; }
.search-head__input {
    min-width: 0;
    width: 100%;
    min-height: 56px;
    padding: 0 17px;
    border: 1px solid var(--line-strong);
    border-right: 0;
    border-radius: 0;
    background: var(--card);
    color: var(--ink);
    font: inherit;
}
.search-head__input:focus { position: relative; z-index: 1; outline: 2px solid var(--blue); outline-offset: -1px; }
.search-head__submit {
    flex: 0 0 auto;
    min-width: 108px;
    padding: 0 20px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.search-head__submit:hover { border-color: var(--blue); background: var(--blue); }

.search-layout {
    display: grid;
    grid-template-columns: minmax(205px, 245px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 58px);
    align-items: start;
    margin-top: clamp(26px, 4vw, 48px);
}
.search-layout--empty { grid-template-columns: minmax(0, 1fr); }
.search-sidebar { position: sticky; top: calc(var(--header-h, 74px) + 22px); }
.search-filters { border-top: 3px solid var(--ink); }
.search-filters__summary { display: none; }
.search-filters__body { display: block; }
.search-filter-set { padding: 18px 0; border-bottom: 1px solid var(--line); }
.search-filter-set h2 {
    margin: 0 0 9px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.search-filter-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -8px;
    padding: 7px 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.25;
    text-decoration: none;
}
.search-filter-option:hover { color: var(--ink); background: var(--paper-2); }
.search-filter-option.is-active {
    color: var(--ink);
    background: color-mix(in srgb, var(--blue) 8%, transparent);
    box-shadow: inset 3px 0 0 var(--blue);
    font-weight: 700;
}
.search-filter-option b {
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.search-filters__clear {
    display: inline-block;
    margin-top: 18px;
    color: var(--red);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.search-results { min-width: 0; }
.search-active {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 30px;
}
.search-active > span {
    margin-right: 3px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.search-active a {
    padding: 7px 9px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--ink);
    font-size: 11px;
    text-decoration: none;
}
.search-active a:hover { border-color: var(--red); color: var(--red); }

.search-group + .search-group { margin-top: clamp(48px, 7vw, 82px); }
.search-group__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 13px;
    border-bottom: 3px solid var(--ink);
}
.search-group__head span {
    display: block;
    margin-bottom: 4px;
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.search-group__head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(27px, 3vw, 39px); line-height: 1; }
.search-group__head h2 a { color: inherit; text-decoration: none; }
.search-group__head h2 a:hover { color: var(--blue); }
.search-group__head > b {
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.search-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 20px; }
.search-result { position: relative; min-width: 0; padding-bottom: 15px; border-bottom: 1px solid var(--line-strong); }
.search-result.is-out { opacity: 0.64; }
.search-result__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--paper-2);
}
.search-result__media::after {
    position: absolute;
    right: 12px;
    bottom: 11px;
    left: 12px;
    height: 3px;
    background: var(--stripe);
    content: '';
}
.search-result__media img { width: 80%; height: 80%; object-fit: contain; transition: transform 0.25s ease; }
.search-result:hover .search-result__media img { transform: translateY(-4px) scale(1.02); }
.search-result__media.is-edge-fitted img,
.search-result:hover .search-result__media.is-edge-fitted img { transform: none; }
.search-result__mark { font-family: var(--font-display); font-size: 64px; color: var(--muted); }
.search-result__featured {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 8px;
    background: #111;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.search-result__caption { display: grid; gap: 6px; padding-top: 14px; }
.search-result__facts {
    min-height: 14px;
    overflow: hidden;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.search-result__name {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.search-result__name:hover { color: var(--blue); }
.search-result__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 2px; }
.search-result__price { color: var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 700; white-space: nowrap; }
.search-result__price small { margin-right: 4px; color: var(--faint); font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; }
.search-result__view { color: var(--blue); font-family: var(--font-mono); font-size: 7px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.search-result__stock { font-family: var(--font-mono); font-size: 7px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.search-result__stock.is-in { color: #2e7d32; }
.search-result__stock.is-out { color: var(--red); }
.search-result__wish { top: 10px; right: 10px; width: 34px; height: 34px; }
.search-result__wish svg { width: 16px; height: 16px; }

.search-empty {
    display: grid;
    justify-items: center;
    padding: clamp(48px, 9vw, 96px) 24px;
    border: 1px dashed var(--line-strong);
    background: var(--paper-2);
    text-align: center;
}
.search-empty > span { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); font-family: var(--font-display); font-size: 28px; }
.search-empty h2 { margin: 18px 0 7px; font-family: var(--font-display); font-size: 29px; }
.search-empty p { max-width: 48ch; margin: 0 0 20px; color: var(--muted); line-height: 1.55; }

@media (max-width: 1040px) {
    .search-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .search-head { grid-template-columns: 1fr; gap: 22px; }
    .search-head__title { max-width: none; }
    .search-layout { grid-template-columns: 1fr; gap: 26px; }
    .search-sidebar { position: static; }
    .search-filters { border: 1px solid var(--line-strong); background: var(--card); }
    .search-filters__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        padding: 0 15px;
        cursor: pointer;
        color: var(--ink);
        font-family: var(--font-mono);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.11em;
        list-style: none;
        text-transform: uppercase;
    }
    .search-filters__summary::-webkit-details-marker { display: none; }
    .search-filters__summary span:last-child { color: var(--blue); font-size: 13px; }
    .search-filters__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; padding: 0 15px 16px; border-top: 1px solid var(--line); }
    .search-filters:not([open]) > .search-filters__body { display: none; }
    .search-filters__clear { grid-column: 1 / -1; }
    .search-group + .search-group { margin-top: 48px; }
}

@media (max-width: 520px) {
    .search-head__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .search-head__submit { min-width: 82px; padding: 0 13px; }
    .search-filters__body { grid-template-columns: 1fr; }
    .search-filters__clear { grid-column: auto; }
    .search-result-grid { grid-template-columns: 1fr; }
    .search-group__head { align-items: start; }
}

/* Visual catalogue for non-film products. The media fields form one continuous
   wall and the information sits underneath like a gallery caption, avoiding a
   dashboard of independent boxes. */
.product-wall-section { margin-top: clamp(28px, 4vw, 52px); }
.product-wall__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(24px, 3vw, 36px);
    padding-bottom: 16px;
    border-bottom: 3px solid var(--ink);
}
.product-wall__eyebrow,
.product-wall__count {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.product-wall__eyebrow { display: block; margin-bottom: 6px; color: var(--blue); }
.product-wall__head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -0.025em;
}
.product-wall__count { color: var(--faint); }

.product-wall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(34px, 4.2vw, 62px) clamp(18px, 2.5vw, 34px);
}
.product-wall--count-1 { grid-template-columns: minmax(260px, 430px); }
.product-wall--count-2 { grid-template-columns: repeat(2, minmax(260px, 410px)); }

.product-wall__item {
    position: relative;
    display: grid;
    grid-template-rows: clamp(260px, 26vw, 340px) auto;
    gap: 17px;
    min-width: 0;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--line-strong);
}
.product-wall__item::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: var(--blue);
    content: '';
    transition: width 0.28s ease;
}
.product-wall__item:hover::after { width: 100%; }
.product-wall__item.is-out { opacity: 0.62; }

.product-wall__number {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 28px;
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.product-wall__media {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 1px solid var(--line);
    background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 7%, var(--paper)), var(--paper-2));
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.22s ease;
}
.product-wall__item:nth-child(3n + 2) .product-wall__media {
    background: linear-gradient(150deg, color-mix(in srgb, var(--orange) 12%, var(--paper)), var(--paper-2));
}
.product-wall__item:nth-child(3n) .product-wall__media {
    background: linear-gradient(150deg, color-mix(in srgb, var(--red) 5%, var(--paper)), var(--paper-2));
}
.product-wall__item:hover .product-wall__media { border-color: var(--blue); }
.product-wall__media::after {
    position: absolute;
    right: 16px;
    bottom: 14px;
    left: 16px;
    height: 3px;
    background: var(--stripe);
    content: '';
    opacity: 0.72;
}
.product-wall__media img {
    width: 78%;
    height: 76%;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.13));
    transition: transform 0.28s ease;
}
.product-wall__item:hover .product-wall__media img { transform: translateY(-5px) scale(1.025); }
.product-wall__media.is-edge-fitted img,
.product-wall__item:hover .product-wall__media.is-edge-fitted img { transform: none; }
.product-wall__mark { font-family: var(--font-display); font-size: 74px; font-weight: 700; color: var(--muted); }

.product-wall__featured,
.product-wall__gallery-count {
    position: absolute;
    top: 12px;
    padding: 6px 8px;
    background: #111;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.product-wall__featured { left: 54px; }
.product-wall__gallery-count { right: 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line); }

.product-wall__caption {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}
.product-wall__copy { display: grid; gap: 6px; min-width: 0; }
.product-wall__meta {
    min-height: 14px;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.45;
    text-transform: uppercase;
}
.product-wall__name {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.55vw, 21px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.018em;
    color: var(--ink);
    text-decoration: none;
}
.product-wall__name:hover { color: var(--blue); }
.product-wall__view {
    margin-top: 3px;
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.product-wall__price {
    padding-top: 1px;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
}
.product-wall__price small { display: block; margin-bottom: 3px; color: var(--faint); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; }
.product-wall__wish { top: 12px; }
.product-wall__item:has(.product-wall__gallery-count) .product-wall__wish { top: 52px; }

@media (prefers-reduced-motion: reduce) {
    .product-wall__item::after,
    .product-wall__media img { transition: none; }
    .product-wall__item:hover .product-wall__media img { transform: none; }
}

@media (max-width: 980px) {
    .shop-head--directory { grid-template-columns: minmax(180px, 0.6fr) 1fr; }
    .shop-head__actions { grid-template-columns: 1fr; }
    .shop-head__finder { border-top: 1px solid #0d4b6f; border-left: 5px solid var(--orange); }
    .dept { grid-template-columns: minmax(220px, 0.7fr) minmax(280px, 1.3fr); }
    .dept__art { min-height: 290px; }
    .dept__art img { height: 236px; }
    .dept__stock { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }
    .dept--flip .dept__art { order: 2; border-left: 1px solid var(--line); }
    .dept--flip .dept__body { order: 1; }
    .dept--flip .dept__stock { order: 3; }
    .dept-filters { grid-template-columns: 1fr; }
    .dept-head__row { grid-template-columns: minmax(190px, 0.6fr) minmax(320px, 1.4fr); }
    .dept-head__art img { height: 210px; }
    .product-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .shop-head--directory { grid-template-columns: 1fr; gap: 20px; }
    .shop-head__title { max-width: none; font-size: 58px; }
    .shop-head__actions { grid-column: auto; grid-template-columns: 1fr; }
    .shop-search--feature { grid-template-columns: 1fr; min-height: 0; padding: 22px 20px; }
    .shop-search__label,
    .shop-search__help,
    .shop-search__control { grid-column: auto; grid-row: auto; }
    .shop-search__control { margin-top: 8px; }
    .shop-search__button { min-width: 78px; padding: 0 12px; }
    .shop-head__finder { min-height: 164px; padding: 23px 20px; }
    .shop-index { margin-top: -18px; gap: 8px 18px; }
    .dept { grid-template-columns: 1fr; }
    .dept__art,
    .dept--flip .dept__art { order: 1; min-height: 230px; border: 0; border-bottom: 1px solid var(--line); }
    .dept__art img { height: 220px; }
    .dept__body,
    .dept--flip .dept__body { order: 2; }
    .dept__stock,
    .dept--flip .dept__stock { order: 3; }
    .dept__title { font-size: 48px; }
    .dept__browse { display: block; text-align: center; }
    .dept__stock { grid-column: auto; }
    .dept-head__back { position: static; padding: 18px 18px 0; background: var(--card); }
    .dept-head__row { grid-template-columns: 1fr; min-height: 0; }
    .dept-head__art {
        order: 2;
        min-height: 200px;
        max-width: none;
        border: 0;
        border-top: 1px solid var(--line);
    }
    .dept-head__art img { width: 66%; height: 180px; }
    .dept-head__body { order: 1; padding: 30px 18px 28px; }
    .dept-head__title { font-size: clamp(36px, 12vw, 52px); }
    .dept-head__desc { font-size: 14px; }
    .shop-search { max-width: none; }
    .dept-help { grid-template-columns: 1fr; }
    .dept-help__button { width: 100%; text-align: center; }
    .stock-row { grid-template-columns: 48px 1fr auto; }
    .stock-row__num { display: none; }
    .stock-row__media { width: 48px; height: 48px; }
    .dept-filters__set { grid-template-columns: 1fr; gap: 5px; }
    .dept-sort { grid-template-columns: 1fr; gap: 5px; }
    .dept-filters__label { padding-top: 0; }
    .dept-filters__results { justify-self: start; }
    .product-wall__head { align-items: start; flex-direction: column; gap: 7px; }
    .product-wall,
    .product-wall--count-2 { grid-template-columns: 1fr; }
    .product-wall__item { grid-template-rows: min(92vw, 360px) auto; }
    .product-wall__media img { width: 72%; height: 72%; }
}

/* Film-category shelf ------------------------------------------------------
   Film is comparison-led, so categories explicitly marked as film use a
   visual grid. Other departments retain the compact stock list. */
.film-catalog {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.film-tile {
    position: relative;
    min-width: 0;
    border: 1px solid var(--line-strong);
    background: var(--card);
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.film-tile:hover { border-color: var(--blue); transform: translateY(-3px); }
.film-tile.is-out { background: color-mix(in srgb, var(--card) 78%, var(--paper)); }

.film-tile__open { display: flex; min-height: 100%; flex-direction: column; color: inherit; text-decoration: none; }
.film-tile__open:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.film-tile__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1.22 / 1;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--paper-2);
}
.film-tile__media::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue) 0 33.333%, var(--orange) 33.333% 66.666%, var(--red) 66.666%);
}
.film-tile__media img { width: 82%; height: 82%; object-fit: contain; transition: transform 0.28s ease; }
.film-tile:hover .film-tile__media img { transform: scale(1.035); }
.film-tile__media.is-edge-fitted img,
.film-tile:hover .film-tile__media.is-edge-fitted img { transform: none; }
.film-tile.is-out .film-tile__media img { opacity: 0.54; filter: grayscale(0.65); }
.film-tile__mark { font-family: var(--font-display); font-size: 70px; font-weight: 700; color: var(--muted); }
.film-tile__featured,
.film-tile__gallery-count {
    position: absolute;
    top: 12px;
    padding: 6px 8px;
    background: #111;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.film-tile__featured { left: 12px; }
.film-tile__gallery-count { right: 12px; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink); border: 1px solid var(--line); }

.film-tile__body { display: flex; flex: 1; flex-direction: column; padding: 18px; }
.film-tile__name { max-width: 17ch; font-family: var(--font-display); font-size: clamp(20px, 2vw, 27px); font-weight: 700; line-height: 1.02; letter-spacing: -0.025em; }
.film-tile__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.film-tile__fact { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 9px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.film-tile__fact small { overflow: hidden; color: var(--faint); font-family: var(--font-mono); font-size: 7px; font-weight: 700; letter-spacing: 0.11em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.film-tile__fact b { overflow: hidden; font-size: 12px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.film-tile__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; }
.film-tile__price { display: flex; align-items: baseline; gap: 5px; color: var(--blue); font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.film-tile__price small { color: var(--faint); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; }
.film-tile__view { color: var(--ink); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.film-tile__stock { margin-top: 7px; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.film-tile__stock.is-in { color: #2e7d32; }
.film-tile__stock.is-out { color: var(--red); }

.film-wish {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.film-tile:has(.film-tile__gallery-count) .film-wish { top: 54px; }
.film-wish svg { width: 18px; height: 18px; }
.film-wish:hover { border-color: var(--red); color: var(--red); }
.film-wish.is-noted { color: var(--red); transform: scale(1.14); }

/* Film quick view --------------------------------------------------------- */
html.film-quick-lock { overflow: hidden; }
.film-quick { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 18px; }
.film-quick[hidden] { display: none; }
.film-quick__scrim { position: absolute; inset: 0; background: rgba(10, 9, 7, 0.94); backdrop-filter: blur(7px); }
.film-quick__dialog {
    position: relative;
    z-index: 1;
    width: min(1160px, 96vw);
    max-height: min(94dvh, 1120px);
    overflow: auto;
    border: 1px solid #111;
    background: var(--card);
    box-shadow: 14px 18px 0 rgba(0,0,0,0.22), 0 30px 100px rgba(0,0,0,0.4);
    scrollbar-color: var(--line-strong) transparent;
}
.film-quick__dialog:focus { outline: none; }
.film-quick__close {
    position: sticky;
    z-index: 5;
    top: 14px;
    float: right;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 14px 14px -52px 0;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    font-size: 24px;
    cursor: pointer;
}
.film-quick__close:hover { border-color: var(--red); color: var(--red); }
.film-quick__layout { display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(420px, 1.04fr); min-height: 680px; }
.film-quick__visual { min-width: 0; padding: 34px; background: var(--paper-2); border-right: 1px solid var(--line); }
.film-quick__gallery { position: sticky; top: 34px; }
.film-quick__stage { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; background: color-mix(in srgb, var(--card) 55%, var(--paper-2)); }
.film-quick__stage img { width: 88%; height: 88%; object-fit: contain; }
.film-quick__gallery-nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    transform: translateY(-50%);
    cursor: pointer;
}
.film-quick__gallery-nav.is-prev { left: 12px; }
.film-quick__gallery-nav.is-next { right: 12px; }
.film-quick__gallery-index { position: absolute; right: 12px; bottom: 10px; padding: 5px 7px; background: #111; color: #fff; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; }
.film-quick__gallery-open { position: absolute; left: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,0.45); background: rgba(17,17,17,0.88); color: #fff; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; cursor: zoom-in; }
.film-quick__gallery-open:hover { border-color: #fff; background: #111; }
.film-quick__gallery-open svg { width: 16px; height: 16px; }
.film-quick__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 7px; margin-top: 9px; }
.film-quick__thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 3px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.film-quick__thumb.is-active { border: 2px solid var(--blue); }
.film-quick__thumb img { width: 100%; height: 100%; object-fit: contain; }
.film-quick__empty { min-height: 460px; background: var(--paper-2); }

.film-quick__info { min-width: 0; padding: 34px clamp(28px, 4vw, 52px) 48px; }
.film-quick__actions { display: flex; flex-wrap: wrap; gap: 7px; padding-right: 46px; margin-bottom: 28px; }
.film-quick__utility { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.film-quick__utility:hover { border-color: var(--blue); color: var(--blue); }
.film-quick__utility.is-noted { border-color: var(--red); color: var(--red); }
.film-quick__utility svg { width: 14px; height: 14px; }
.film-quick__eyebrow,
.film-quick__section-label,
.film-quick__variation-label { display: block; color: var(--blue); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.film-quick__info h2 { max-width: 15ch; margin: 6px 0 12px; font-family: var(--font-display); font-size: clamp(34px, 4vw, 53px); line-height: 0.96; letter-spacing: -0.04em; }
.film-quick__lede { max-width: 52ch; margin: 0 0 18px; color: var(--muted); line-height: 1.55; }
.film-quick__facts { display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 0 0 15px; list-style: none; }
.film-quick__facts li { padding: 6px 8px; border: 1px solid var(--line); background: var(--paper); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.film-quick__feel { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.film-quick__feel > span { padding-top: 6px; color: var(--faint); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.film-quick__feel > div { display: flex; flex-wrap: wrap; gap: 5px; }
.film-quick__feel b { padding: 5px 8px; border-radius: 999px; background: var(--paper-2); font-size: 11px; }
.film-quick__options { margin: 22px 0; }
.film-quick__section-label { margin-bottom: 8px; color: var(--faint); }
.film-quick__variation-label { margin: 12px 0 6px; }
.film-quick__variation-label.is-expired { color: var(--orange); }
.film-quick__variations { display: grid; gap: 6px; }
.film-quick__variation { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 9px 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.film-quick__variation span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.film-quick__variation b { font-size: 13px; }
.film-quick__variation small { color: var(--orange); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; }
.film-quick__variation strong { color: var(--blue); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.film-quick__variation:hover { border-color: var(--blue); }
.film-quick__variation.is-selected { border-color: var(--blue); box-shadow: inset 4px 0 0 var(--blue); background: color-mix(in srgb, var(--blue) 7%, var(--paper)); }
.film-quick__variation.is-out { opacity: 0.48; cursor: not-allowed; }
.film-quick__purchase { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 5px 18px; margin: 22px 0 18px; padding: 18px; border: 1px solid var(--line-strong); background: var(--paper-2); }
.film-quick__price { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--blue); font-family: var(--font-mono); font-size: 21px; font-weight: 700; }
.film-quick__price small { color: var(--faint); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; }
.film-quick__stock { grid-column: 2; grid-row: 1; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.film-quick__stock.is-in { color: #2e7d32; }
.film-quick__stock.is-out { color: var(--red); }
.film-quick__cart { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 10px; margin-top: 9px; }
.film-quick__cart label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.film-quick__cart input[type="number"] { width: 68px; min-height: 43px; padding: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.film-quick__cart .btn { justify-self: stretch; }
.film-quick__cart p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--blue); font-size: 12px; }
.film-quick__cart p a { color: inherit; font-weight: 700; }
.film-quick__full { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; }
.film-quick__full:hover { color: var(--blue); }
.film-quick__details { display: grid; gap: 24px; margin-top: 30px; }
.film-quick__details h3 { margin: 0 0 9px; font-family: var(--font-display); font-size: 21px; }
.film-quick__prose p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.film-quick__specs dl { margin: 0; }
.film-quick__specs dl div { display: grid; grid-template-columns: minmax(100px, 0.65fr) 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.film-quick__specs dt { color: var(--faint); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.film-quick__specs dd { margin: 0; font-size: 12px; font-weight: 600; }
.film-gallery-lightbox { z-index: 1200; background: rgba(10, 9, 7, 0.97); }

@media (max-width: 980px) {
    .film-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .film-quick__layout { grid-template-columns: minmax(0, 0.8fr) minmax(380px, 1.2fr); }
    .film-quick__visual { padding: 24px; }
}

@media (max-width: 680px) {
    .film-catalog { grid-template-columns: 1fr; gap: 9px; }
    .film-tile__open { display: grid; grid-template-columns: 128px 1fr; }
    .film-tile__media { aspect-ratio: auto; min-height: 190px; border-right: 1px solid var(--line); border-bottom: 0; }
    .film-tile__media img { width: 88%; height: 82%; }
    .film-tile__body { padding: 15px; }
    .film-tile__name { font-size: 21px; }
    .film-tile__facts { margin-top: 12px; }
    .film-tile__fact { padding: 7px; }
    .film-tile__foot { padding-top: 13px; }
    .film-tile__view { display: none; }
    .film-wish { top: 9px; right: 9px; }
    .film-tile:has(.film-tile__gallery-count) .film-wish { top: 9px; }
    .film-tile__gallery-count { display: none; }

    .film-quick { align-items: end; padding: 7px; }
    .film-quick__dialog { width: 100%; max-height: calc(100dvh - 14px); box-shadow: 7px 8px 0 rgba(0,0,0,0.22); }
    .film-quick__layout { grid-template-columns: 1fr; }
    .film-quick__visual { padding: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
    .film-quick__gallery { position: static; }
    .film-quick__stage { aspect-ratio: 1.28 / 1; }
    .film-quick__thumbs { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
    .film-quick__info { padding: 23px 18px 32px; }
    .film-quick__actions { margin-bottom: 20px; }
    .film-quick__info h2 { font-size: 37px; }
}

@media (max-width: 420px) {
    .film-tile__open { grid-template-columns: 112px 1fr; }
    .film-tile__facts { grid-template-columns: 1fr 1fr; }
    .film-tile__fact:nth-child(n+3) { display: none; }
    .film-tile__price { font-size: 12px; }
}

/* ------------------------------------------------------------ responsive - */
@media (max-width: 980px) {
    .home-hero { grid-template-columns: 1fr; }
    .home-routes { grid-template-columns: 1fr 1fr; }
    .home-route + .home-route { border-left: 0; }
    .home-route:nth-child(even) { border-left: 1px solid var(--line); }
    .home-route:nth-child(n+3) { box-shadow: 0 -1px 0 var(--line); }
    .home-paths__grid { grid-template-columns: 1fr; }
    .home-lab__grid--pictured { grid-template-columns: 1fr; }
    .home-shelf__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .home-hero__actions .btn { flex: 1 1 100%; text-align: center; }
    .home-routes { grid-template-columns: 1fr; }
    .home-route:nth-child(even) { border-left: 0; }
    .home-route { min-height: 0; padding-bottom: 20px; }
    .home-shelf__grid { grid-template-columns: 1fr; }
    .home-signal__btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .home-route__go, .home-path__go { transition: none; }
    .home-route:hover .home-route__go, .home-path:hover .home-path__go { transform: none; }
}

.cta-band {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 24px;
    margin-top: 34px;
    padding: 30px 32px;
    border: 1px solid var(--blue);
    border-radius: var(--radius);
    background: var(--blue);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.cta-band::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--orange) 0 50%, var(--red) 50% 100%);
}

/* The promise under the question, on the film page's band: what happens after
   the button, in one sentence. White at 85%, because it supports the heading
   rather than competing with it. */
.cta-band__lede {
    flex: 1 1 100%;
    order: 1;
    margin: -6px 0 0;
    max-width: 52ch;
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}
.cta-band__actions { order: 2; }

.cta-band__title {
    margin: 0;
    max-width: 20ch;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 3.2vw, 36px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cta-band .btn--primary,
.cta-band .btn {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--blue);
}

.cta-band .btn--primary:hover,
.cta-band .btn:hover {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(255, 255, 255, 0.86);
    color: var(--blue-deep);
}

.cta-band .btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.65);
    color: #ffffff;
}

.cta-band .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes develop {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes safelight {
    0%, 100% { opacity: 1; box-shadow: 0 0 12px 2px rgba(0, 95, 151, 0.55); }
    50%      { opacity: 0.55; box-shadow: 0 0 6px 1px rgba(0, 95, 151, 0.3); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .hero-card {
        grid-template-columns: 1fr;
        padding: 30px 24px 28px;
        gap: 20px;
    }

    .hero-panels {
        max-width: none;
        justify-self: stretch;
    }

    .legal-card,
    .legal-hero { padding: 28px 26px; }

    .legal-grid { grid-template-columns: 1fr; }

    .portal-state {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-copy__lede,
    .info-panel p,
    .info-list li { font-size: 16px; }
}

@media (max-width: 680px) {
    .site-shell { --page-pad: 16px; }

    /* keep the overlay's horizontal inset in step with the shell */
    .nav-overlay__inner {
        padding-left: 16px;
        padding-right: calc(16px + var(--sbw, 0px));
    }

    .site-header { padding-bottom: 22px; }

    .landing {
        min-height: calc(100vh - 200px);
        align-items: flex-start;
        padding-top: 4vh;
    }

    .hero-card::after { top: 12px; right: 14px; font-size: 10px; }

    .hero-copy__title { max-width: 100%; font-size: clamp(38px, 12vw, 60px); }

    .hero-tag { width: 100%; }

    .legal-hero h1 { font-size: clamp(30px, 11vw, 44px); }

    .brand-lockup__logo { max-height: 42px; max-width: 170px; }
    .brand-lockup__text { font-size: 22px; }

    .site-footer__top { grid-template-columns: 1fr; gap: 28px; }
    .site-footer__bar { font-size: 10px; letter-spacing: 0.12em; }
}

@media (max-width: 980px) {
    .auth-grid,
    .contact-grid { grid-template-columns: 1fr; }

    .process { grid-template-columns: repeat(2, 1fr); }

    .cta-band {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 680px) {
    .page-hero { padding: 28px 24px; }

    .process { grid-template-columns: 1fr; }

    .event {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 16px 0;
    }

    .event__tag { justify-self: start; }

    .form-row { grid-template-columns: 1fr; }

    .cta-band { padding: 26px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Order status & tracking
   ============================================================ */
.status-wrap { max-width: 760px; margin: 0 auto; }
.status-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.status-form .field { flex: 1 1 260px; margin: 0; }
.status-form__input {
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.status-hint, .status-notfound { color: var(--muted); font-size: 0.92rem; }
.status-notfound { color: var(--red); }

.order-list { display: flex; flex-direction: column; gap: 18px; }

.order-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    padding-bottom: 8px;
}
.order-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--stripe-h);
    background: var(--stripe);
}
.order-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}
.order-card__foot {
    display: flex;
    justify-content: flex-end;
    padding: 12px 22px 18px;
    border-top: 1px solid var(--line);
}
.order-card__foot .btn { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Fulfilment recap on a customer order card; what they chose, and while we
   are still waiting for the film, where to send it. */
.order-ff {
    padding: 14px 22px 16px;
    border-top: 1px solid var(--line);
}
.order-ff__action {
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}
.order-ff__address {
    display: block;
    margin-top: 4px;
    font-weight: 600;
}
.order-ff__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    margin: 0;
}
.order-ff__row { min-width: 0; }
.order-ff__row dt {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.order-ff__row dd {
    margin: 2px 0 0;
    font-size: 0.9rem;
}

/* Live search suggestions: cards under any form marked data-suggest. */
.suggest-anchor { position: relative; }
.suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
    overflow: hidden;
    max-height: min(430px, 60vh);
    overflow-y: auto;
}
.suggest__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--line);
}
.suggest__item:hover,
.suggest__item.is-active { background: var(--paper-2); }
.suggest__item--out { opacity: 0.62; }
.suggest__thumb {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
}
.suggest__thumb--blank { display: inline-block; }
.suggest__body { min-width: 0; flex: 1; }
.suggest__name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.suggest__meta {
    display: block;
    font-size: 0.76rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.suggest__price {
    flex: 0 0 auto;
    text-align: right;
    font-weight: 600;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}
.suggest__from {
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--muted);
}
.suggest__stock {
    display: block;
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--red);
}
.suggest__all {
    display: block;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    background: var(--paper);
}
.suggest__all:hover,
.suggest__all.is-active { background: var(--paper-2); }
.suggest__empty {
    margin: 0;
    padding: 14px 12px;
    font-size: 0.85rem;
    color: var(--muted);
}

/* The hero search sits between the CTAs and the reassure line. */
.home-hero__search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    max-width: 440px;
    padding: 4px 4px 4px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.home-hero__search:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 95, 151, 0.14);
}
.home-hero__search-icon { flex: 0 0 auto; color: var(--muted); }
.home-hero__search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.92rem;
    color: inherit;
    padding: 8px 0;
    outline: none;
}
.home-hero__search-go {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    font: 600 0.86rem/1 inherit;
    font-family: inherit;
    background: var(--blue);
    color: #fff;
    cursor: pointer;
}
.home-hero__search .suggest {
    border-radius: 16px;
    top: calc(100% + 8px);
}

/* Send-your-film block: dispatch sheet + AWB hand-off on mail-in orders. */
.order-send {
    margin: 4px 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper-2, var(--paper));
}
.order-send__title {
    margin: 0 0 8px;
    font-size: 0.95rem;
}
.order-send__steps {
    margin: 0 0 12px;
    padding-left: 20px;
    font-size: 0.86rem;
    line-height: 1.5;
}
.order-send__steps li { margin-bottom: 3px; }
.order-send__actions { margin-bottom: 12px; }
.order-send__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.order-send__field {
    flex: 1 1 220px;
    margin: 0;
}
.order-send__note {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}
.order-send__sent {
    margin: 4px 0 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blue);
}

/* Accessible label hidden visually but kept for screen readers. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}
.data-table__actions { text-align: right; white-space: nowrap; }
.order-card__ref { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.order-card__code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
    margin-left: 10px;
}
.order-card__meta { display: flex; align-items: center; gap: 10px; }
.order-card__date { color: var(--faint); font-size: 0.82rem; }

.order-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
}
.order-badge.is-good { color: #0a7d33; border-color: rgba(10, 125, 51, 0.4); }
.order-badge.is-info { color: var(--blue); border-color: rgba(0, 95, 151, 0.4); }
.order-badge.is-warn { color: #9a6a00; border-color: rgba(154, 106, 0, 0.4); }
.order-badge.is-muted { color: var(--muted); }

.order-job { padding: 20px 22px 22px; border-top: 1px solid var(--line); }
.order-job:first-of-type { border-top: 0; }
.order-job__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.order-job__title { font-weight: 600; font-size: 1.05rem; }
.order-job__qty { color: var(--muted); font-weight: 400; }
.order-job__group {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 3px;
}
.order-job__now {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blue);
    background: rgba(0, 95, 151, 0.10);
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.order-progress {
    height: 6px;
    background: rgba(128, 128, 128, 0.22);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}
.order-progress > span { display: block; height: 100%; background: var(--blue); border-radius: 6px; }

/* Vertical progress timeline; never cramped, reads like order tracking. */
.order-stepper {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.order-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding-bottom: 16px;
}
.order-step:last-child { padding-bottom: 0; }
/* connector running down to the next dot */
.order-step::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 15px;
    bottom: -1px;
    width: 2px;
    background: var(--line);
}
.order-step:last-child::before { display: none; }
.order-step__dot {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--line-strong);
}
.order-step__label {
    font-size: 0.94rem;
    line-height: 1.3;
    color: var(--muted);
}
/* completed steps: filled dot + check, ink label */
.order-step--done .order-step__dot { background: var(--blue); border-color: var(--blue); }
.order-step--done::before { background: var(--blue); }
.order-step--done .order-step__label { color: var(--ink); }
.order-step--done .order-step__dot::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.5px;
    width: 3px;
    height: 6px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* current step: ringed dot, bold ink label */
.order-step--current .order-step__dot {
    background: var(--card);
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(0, 95, 151, 0.18);
}
.order-step--current .order-step__label {
    color: var(--ink);
    font-weight: 700;
    font-size: 1rem;
}

.order-history { margin-top: 14px; }
.order-history summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--muted);
    font-family: var(--font-mono);
}
.order-history__list { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.order-history__list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 0.85rem;
}
.order-history__note { color: var(--muted); }
.order-history__date { color: var(--faint); font-size: 0.78rem; white-space: nowrap; }

.account-subtitle {
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 26px 0 12px;
}

@media (max-width: 540px) {
    .order-history__list li { flex-direction: column; gap: 2px; }
}

/* ---- Service catalog pages (Film / Print) --------------------------------- */
.price-tables {
    display: grid;
    /* 300px let three tables share a 1300px row, which gave each four-column
       matrix ~380px: the 110 column slid under the edge fade and read as
       clipped. 460px is what the widest matrix actually needs, so a row only
       takes as many tables as can show EVERY column -- three on a wide
       monitor, two on a laptop, one on anything smaller. Sideways scrolling
       is not a fallback a price list is allowed. */
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: 18px;
    align-items: start;
}

/* Two-up leaves the odd third table half a row; full width reads as chosen. */
.price-tables > .price-table:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Below the auto-fit minimum the grid would overflow rather than wrap, so
   hand over to one column before that -- the same point where the rows
   restack into label/value pairs anyway. */
@media (max-width: 880px) {
    .price-tables { grid-template-columns: minmax(0, 1fr); }
    .price-tables > .price-table:last-child:nth-child(odd) { grid-column: auto; }
}

.price-table {
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    /* Grid items default to min-width:auto, so a table wider than the track
       pushed the track wider instead of letting .table-scroll scroll. On a
       phone that ran the card past the viewport and clipped the last column
       with no scrollbar to suggest there was more. */
    min-width: 0;
}
.price-tables > .price-table:nth-child(3n + 2) { border-top-color: var(--orange); }
.price-tables > .price-table:nth-child(3n + 3) { border-top-color: var(--red); }

/* The title row doubles as the disclosure control (the group is a <details>).
   The default marker is replaced with a chevron that reports the state, and
   the border sits on the summary so a closed card does not end on a rule. */
.price-table__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}
.price-table__summary::-webkit-details-marker { display: none; }
.price-table__summary:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.price-table[open] > .price-table__summary { border-bottom: 1px solid var(--line); }

.price-table__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.price-table__chev { flex: 0 0 auto; color: var(--muted); transition: transform 0.15s ease; }
.price-table[open] > .price-table__summary .price-table__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .price-table__chev { transition: none; } }

.price-table .data-table th,
.price-table .data-table td { padding: 11px 18px; }

.price-matrix th[scope="row"] {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
}

.price-matrix__price {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}
.price-matrix thead .price-matrix__price { color: var(--muted); font-weight: 400; }

/* Upgrades and add-ons support the decision; they do not compete with it.
   Same content, less furniture: the cards lose their box and sit on the page
   as ruled lists, and the headings step down a size. */
.section--support .section__title { font-size: clamp(1.15rem, 2vw, 1.45rem); }
.section--support .section__intro { font-size: 0.95rem; }
.section--support .card {
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 16px 2px 0;
}

.price-tables__foot {
    margin: 16px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--faint);
}

/* upgrade / add-on lists */
.option-card { display: flex; flex-direction: column; }

.option-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.option-list__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.option-list__row:first-child { border-top: none; padding-top: 2px; }

.option-list__name {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
}

/* An add-on with its explanation: the name becomes a small heading and the
   description sits under it, with the price aligned to the first line rather
   than drifting to the middle of the paragraph. */
.option-list__row--described { align-items: baseline; }
.option-list__row--described .option-list__name {
    display: grid;
    gap: 3px;
    font-weight: 600;
    min-width: 0;
}
.option-list__desc {
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--muted);
    max-width: 58ch;
}

.option-list__price {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--blue);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.option-card__note {
    margin: 14px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--faint);
}

.tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 3px;
    background: rgba(0, 95, 151, 0.10);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
    vertical-align: middle;
}
.tag--muted { background: rgba(17, 17, 17, 0.06); color: var(--muted); }

@media (max-width: 560px) {
    .price-tables { grid-template-columns: 1fr; }
}

/* ============================================================================
   Checkout (Stripe Payment Element); token-driven, dark-theme aware.
   ========================================================================= */
/* Fulfilment choices at checkout ---------------------------------------- */

/* The markup shipped without any of this, so the browser's own fieldset and
   inline labels were showing: a boxed legend and every option run together
   into one paragraph. Styled to the same language as .var-option, which is the
   site's existing "pick one of these" row. */
.ff-group {
    /* min-width:0 because a fieldset refuses to shrink inside a flex or grid
       parent otherwise, and this one sits in the checkout column. */
    min-width: 0;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

.ff-group__title {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.ff-group__note {
    margin: -4px 0 12px;
    font-size: 0.88rem;
    color: var(--muted);
}

.ff-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    margin: 0 0 8px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ff-option:last-child { margin-bottom: 0; }
.ff-option:hover { border-color: var(--line-strong); }

/* The native control is kept, sized up and tinted. It stays reachable by
   keyboard and reads correctly to a screen reader, which a div dressed up as a
   radio does not. */
.ff-option input[type="radio"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--blue);
    cursor: inherit;
}

/* Sits between the radio and the text, on the same 24-unit grid as every other
   icon on the site. Inherits colour, so the selected row tints it for free. */
.ff-option__icon {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: var(--muted);
    transition: color 0.15s ease;
}
.ff-option:has(input:checked) .ff-option__icon { color: var(--blue); }

.ff-option__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Both were inline spans, which is what ran the options together. */
.ff-option__label {
    display: block;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
}
.ff-option__note {
    display: block;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--muted);
}

.ff-option:has(input:checked) {
    border-color: var(--blue);
    box-shadow: inset 0 0 0 1px var(--blue);
    background: rgba(0, 95, 151, 0.06);
}
.ff-option:has(input:focus-visible) {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.ff-option--disabled,
.ff-option:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}
.ff-option--disabled:hover { border-color: var(--line); }

/* The address block reuses .field, so it only needs spacing here. */
.ff-group .field + .field,
.ff-group .form-row { margin-top: 12px; }

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
}
@media (min-width: 820px) {
    .checkout-grid { grid-template-columns: 5fr 7fr; align-items: start; }
    .checkout-summary { position: sticky; top: 1.5rem; }
}
.checkout-wrap { max-width: 720px; margin: 0 auto; }
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
}
.checkout-summary__title,
.complete-lead { margin: 0 0 1rem; }
.checkout-line {
    display: flex; justify-content: space-between; gap: 1rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.checkout-line__qty { display: block; color: var(--muted); font-size: 0.85em; margin-top: 0.15rem; }
.checkout-line__amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.checkout-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 1rem; font-size: 1.1rem;
}
.checkout-total strong { font-size: 1.35rem; color: var(--blue); font-variant-numeric: tabular-nums; }
.checkout-fields { display: grid; gap: 0.85rem; margin-bottom: 1.25rem; }
.checkout-payingas { margin: 0 0 1.25rem; color: var(--muted); }
.checkout-element { margin: 0.5rem 0 1rem; }
.checkout-savecard { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; color: var(--muted); cursor: pointer; }
.checkout-error {
    margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: var(--radius);
    background: rgba(180, 40, 40, 0.10); border: 1px solid rgba(180, 40, 40, 0.35); color: #b42828;
}
.checkout-btn { width: 100%; justify-content: center; }
.checkout-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.checkout-secure { margin: 0.85rem 0 0; text-align: center; color: var(--muted); font-size: 0.85rem; }

.complete-card { text-align: center; padding: 2rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--line); }
.complete-card--ok { background: rgba(0, 95, 151, 0.06); }
.complete-ref { margin: 0.5rem 0 1.5rem; font-variant-numeric: tabular-nums; }
.complete-spinner {
    width: 34px; height: 34px; margin: 1rem auto 0;
    border: 3px solid var(--line); border-top-color: var(--blue); border-radius: 50%;
    animation: ck-spin 0.8s linear infinite;
}
@keyframes ck-spin { to { transform: rotate(360deg); } }

/* ---- Saved cards (portal payment methods) ---- */
.card-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; }
.card-list__item {
    display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
    padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.card-list__brand { font-weight: 600; }
.card-list__num { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.card-list__exp { color: var(--muted); font-size: 0.85rem; }
.card-list__remove { margin-left: auto; }
.btn--sm { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.card-add { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.card-add__title { margin: 0 0 0.75rem; }
.account-empty { color: var(--muted); }

/* ---- System-mode (coming soon / maintenance) info panel ---- */
.info-panel__slogan {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.15;
    color: var(--ink);
}
.info-panel__label {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}
.info-panel__contact { margin: 0; }

/* ---- Cart ---- */
.icon-btn--cart { position: relative; }
.icon-btn__badge {
    position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px;
    padding: 0 4px; border-radius: 9px; background: var(--blue); color: #fff;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 17px;
    text-align: center;
}
.cart-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 960px; margin: 0 auto; }
@media (min-width: 820px) { .cart-grid { grid-template-columns: 7fr 5fr; align-items: start; } .cart-summary { position: sticky; top: 1.5rem; } }
.cart-empty { max-width: 640px; margin: 0 auto; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.cart-line {
    display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 0.85rem;
    padding: 0.85rem 0; border-bottom: 1px solid var(--line);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line__media {
    width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--line); background: var(--paper); flex: none;
}
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line__media--empty { border: 0; background: none; }
.cart-line__desc { margin: 0; font-weight: 500; }
.cart-line__unit { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.85rem; }
.cart-line__qty { margin: 0; }
.cart-qty-input { width: 64px; text-align: center; }
.cart-line__total { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.cart-line__x {
    border: 0; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1;
    cursor: pointer; padding: 0 0.25rem;
}
.cart-line__x:hover { color: var(--red); }
.cart-summary .checkout-btn { margin-top: 0.75rem; display: block; text-align: center; }

/* ---- Service configurator ---- */
.cfg { display: grid; gap: 1.25rem; }
.cfg__fields { display: grid; gap: 1.25rem; }
.cfg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.85rem; }
.cfg-field { display: grid; gap: 0.35rem; }
.cfg-field__label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cfg-field--qty { max-width: 110px; }
.cfg-field.is-disabled { opacity: 0.4; }
.cfg-block { padding-top: 1rem; border-top: 1px solid var(--line); }
.cfg-block__title { margin: 0 0 0.75rem; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); }
.cfg-addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem; }
.cfg-addon { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.cfg-addon.is-disabled { opacity: 0.4; cursor: not-allowed; }
.cfg-addon__name { flex: 1; }
.cfg-addon__price { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
/* The summary card. It used to be a flat full-bleed strip with a rule above it
   and the two ends of the row pushed as far apart as the panel is wide, which
   at 1180px reads as two unrelated things rather than one summary. Now it is a
   card on its own surface with the price and the actions sitting together. */
.cfg__bar { padding-top: 1.1rem; }

.cfg__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 18px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.cfg__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55rem; }
.cfg__price-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cfg__price-value { font-size: 1.6rem; line-height: 1.1; color: var(--blue); font-variant-numeric: tabular-nums; }
.cfg__price-unit {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.cfg__price-unit[hidden] { display: none; }

.cfg__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cfg__note { margin: 10px 0 0; color: var(--muted); }
.cfg__note a { color: var(--blue); font-weight: 600; }

/* ---- Variation picker (product detail) ---- */
.var-picker { margin: 1.25rem 0; }
.var-picker__label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: .55rem; }
.var-options { display: flex; flex-direction: column; gap: .5rem; }
.var-option { position: relative; display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.var-option:hover { border-color: var(--line-strong); }
.var-option input { position: absolute; opacity: 0; pointer-events: none; }
.var-option__name { font-weight: 600; color: var(--ink); }
.var-option__price { margin-left: auto; font-weight: 600; text-align: right; color: var(--ink); white-space: nowrap; }
.var-option__price small { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }
.var-option.is-selected { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: rgba(0, 95, 151, 0.05); }
.var-option.is-out { opacity: .55; cursor: not-allowed; }
.var-option.is-out .var-option__price { text-decoration: line-through; }
.var-option__out { margin-left: auto; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--red); }
.var-option.is-out .var-option__price { margin-left: .5rem; }

/* ---- Expired ("past best-by") clearance section on the product page ---- */
.expired-block { margin: 1.5rem 0 0.5rem; padding: 1.05rem 1.1rem; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: rgba(255, 106, 0, 0.05); }
.expired-block__title { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; }
.expired-block__body { margin: 0 0 .9rem; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.expired-block .var-options { gap: .5rem; }
.var-option--exp.is-selected { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); background: rgba(255, 106, 0, 0.07); }
.expired-badge { display: inline-block; margin-left: .5rem; padding: .1rem .45rem; border-radius: 5px; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--orange); background: rgba(255, 106, 0, 0.14); vertical-align: middle; white-space: nowrap; }
.product-buy.is-expired-pick [data-price-now]::after { content: ""; }
/* Expired quick-filter chip */
.feel-pill--exp { display: inline-flex; align-items: center; gap: .4rem; }
.feel-pill--exp .exp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); display: inline-block; }
.feel-pill--exp.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
.feel-pill--exp.is-active .exp-dot { background: #fff; }

/* ---- Card variation note ("available individually or in packs") ---- */
.card__note { margin: -0.35rem 0 0.25rem; font-size: 0.75rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Cookie consent banner + legal table (GDPR layer; GA loads only on consent)
   -------------------------------------------------------------------------- */

.cookie-consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1200;
    padding: 16px;
    display: none;
}

.cookie-consent--open {
    display: block;
}

.cookie-consent__card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
}

.cookie-consent__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin: 0 0 6px;
}

.cookie-consent__body {
    margin: 0 0 14px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.cookie-consent__body a {
    color: var(--blue);
    text-decoration: underline;
}

.cookie-consent__prefs {
    border-top: 1px solid var(--line);
    margin-bottom: 14px;
}

.cookie-consent__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.cookie-consent__row p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--muted, #6a655c);
}

.cookie-consent__locked {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted, #6a655c);
    white-space: nowrap;
}

.cookie-consent__toggle {
    width: 20px;
    height: 20px;
    accent-color: var(--blue);
    flex-shrink: 0;
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 560px) {
    .cookie-consent {
        padding: 8px;
    }

    .cookie-consent__actions .btn {
        flex: 1 1 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .cookie-consent--open .cookie-consent__card {
        animation: cookie-rise 180ms ease-out;
    }

    @keyframes cookie-rise {
        from { transform: translateY(12px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }
}

/* Legal cookie table */
.legal-table-wrap {
    overflow-x: auto;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.legal-table th {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--muted, #6a655c);
    border-bottom: 1px solid var(--line-strong);
    padding: 8px 12px 8px 0;
}

.legal-table td {
    border-bottom: 1px solid var(--line);
    padding: 10px 12px 10px 0;
    vertical-align: top;
}

.legal-table code {
    font-family: var(--font-mono);
    font-size: 0.85em;
}

.legal-note {
    font-size: 0.85rem;
    color: var(--muted, #6a655c);
}

/* [hidden] must beat the .btn display rule inside the consent card */
.cookie-consent [hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Client portal; sign in / create account.
   Split layout: an ink brand panel beside a single form card. Only one form
   is shown at a time (tabs), which is the whole point: the old side-by-side
   pair made both look like work.
   -------------------------------------------------------------------------- */

.page-account--auth {
    padding-top: clamp(12px, 2vw, 24px);
}

.auth-split {
    display: grid;
    grid-template-columns: minmax(390px, 0.9fr) minmax(500px, 1.1fr);
    gap: 0;
    border: 1px solid var(--line-strong);
    overflow: hidden;
    background: var(--panel-solid);
    box-shadow: 0 24px 70px rgba(17, 17, 17, 0.14);
}

/* ---------------------------------------------------------- brand panel - */

.auth-brand {
    background: #211f1b;
    color: #f4f1e6;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid rgba(244, 241, 230, 0.15);
}

.auth-brand::before {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(244, 241, 230, 0.1);
    pointer-events: none;
    content: '';
}

.auth-brand__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr) auto auto;
    min-height: 100%;
    padding: clamp(36px, 4vw, 58px);
}

.auth-brand__copy {
    position: relative;
    z-index: 2;
}

.auth-brand__stripe {
    display: block;
    width: 92px;
    height: 16px;
    margin-bottom: 24px;
    background: linear-gradient(180deg,
        #005f97 0 4px, transparent 4px 6px,
        #ff6a00 6px 10px, transparent 10px 12px,
        #e60012 12px 16px);
}

.auth-brand__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244, 241, 230, 0.55);
    margin: 0 0 10px;
}

.auth-brand__title {
    font-family: var(--font-display);
    max-width: 10ch;
    font-size: clamp(2.35rem, 4vw, 4.35rem);
    line-height: 0.91;
    letter-spacing: -0.045em;
    margin: 0 0 14px;
    color: #f4f1e6;
}

.auth-brand__lede {
    color: rgba(244, 241, 230, 0.72);
    font-size: 0.93rem;
    line-height: 1.5;
    margin: 0 0 30px;
    max-width: 36ch;
}

.auth-brand__visual {
    position: relative;
    min-height: 220px;
    margin: 8px -20px 16px;
    overflow: hidden;
}

.auth-brand__visual::after {
    position: absolute;
    inset: auto 3% 8% 1%;
    height: 1px;
    background: rgba(244, 241, 230, 0.18);
    content: '';
}

.auth-brand__visual img {
    position: absolute;
    z-index: 2;
    right: 2%;
    bottom: 1px;
    width: min(58%, 280px);
    max-height: 98%;
    object-fit: contain;
    object-position: bottom right;
    filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.45));
}

.auth-brand__frame {
    position: absolute;
    left: 1%;
    bottom: -0.12em;
    color: rgba(244, 241, 230, 0.055);
    font-family: var(--font-display);
    font-size: clamp(9rem, 18vw, 16rem);
    font-weight: 700;
    line-height: 0.72;
    letter-spacing: -0.08em;
}

.auth-brand__sprockets {
    position: absolute;
    inset: 8px 0 auto;
    height: 11px;
    opacity: 0.16;
    background: repeating-linear-gradient(90deg, #f4f1e6 0 16px, transparent 16px 29px);
}

.auth-brand__list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(244, 241, 230, 0.16);
    border-bottom: 1px solid rgba(244, 241, 230, 0.16);
}

.auth-brand__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    min-width: 0;
    padding: 15px 10px;
}
.auth-brand__item + .auth-brand__item { border-left: 1px solid rgba(244, 241, 230, 0.16); }

.auth-brand__item-no {
    color: #3399cc;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
}

.auth-brand__item-label {
    font-family: var(--font-mono);
    display: block;
    font-size: 0.54rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 241, 230, 0.45);
}

.auth-brand__item-title {
    display: block;
    margin-top: 4px;
    color: #f4f1e6;
    font-size: 0.78rem;
    line-height: 1.25;
}

.auth-brand__sign {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(244, 241, 230, 0.4);
    margin: 0;
}
.auth-brand__sign span { width: 22px; height: 1px; background: #ff6a00; }

/* ------------------------------------------------------------ form side - */

.auth-panel {
    display: flex;
    align-items: flex-start;
    background: var(--panel-solid);
}

.auth-panel__inner {
    padding: clamp(34px, 4vw, 56px) clamp(30px, 5vw, 68px) 42px;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

.auth-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line-strong);
    margin-bottom: 34px;
}

.auth-tab {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 13px 12px 12px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted, #6a655c);
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}
.auth-tab + .auth-tab { border-left: 1px solid var(--line-strong); }
.auth-tab::before { position: absolute; inset: -1px -1px auto; height: 4px; background: transparent; content: ''; }

.auth-tab:hover {
    color: var(--ink, #111);
}

.auth-tab--active {
    background: color-mix(in srgb, var(--blue) 7%, var(--panel-solid));
    color: var(--ink, #111);
    box-shadow: none;
}
.auth-tab--active::before { background: var(--blue); }

.auth-pane {
    display: none;
}

.auth-pane--active {
    display: block;
}

.auth-pane__head { margin-bottom: 22px; }
.auth-pane__head > span {
    display: block;
    margin-bottom: 8px;
    color: var(--blue-deep);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.auth-pane__head h2 {
    margin: 0 0 9px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.3vw, 3.25rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
}
.auth-pane__head p { margin: 0; max-width: 42ch; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }

.auth-panel__note {
    color: var(--muted, #6a655c);
    font-size: 0.92rem;
    margin: 0 0 20px;
}

.btn--block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Provider sign-in, above the email/password form on the account page. The
   Google button itself is drawn by Google's own script, so nothing here styles
   its internals; only the space around it and the divider beneath. */
/* Sign-in buttons -------------------------------------------------------- */

/* One set of metrics for both, so they cannot drift apart. Google renders its
   own button and will not take our CSS, so instead the slot defines the size
   and social.js tells GIS to render at exactly that width. Everything here is
   matched to what Google draws for size:"large": 40px tall, 4px corners,
   sentence case, logo left. */
.social-auth {
    --social-w: 400px;
    --social-h: 40px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

/* The slot Google draws into. Fixed height so the column does not jump while
   GIS is still loading, and no overflow:hidden -- clipping a sign-in button is
   worse than letting it size itself. */
.social-auth__slot {
    width: min(var(--social-w), 100%);
    min-height: var(--social-h);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
}
.social-auth__slot > div { display: flex; justify-content: center; width: 100%; max-width: 100%; }

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(var(--social-w), 100%);
    height: var(--social-h);
    padding: 0 16px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    /* The global .btn is uppercase mono with wide tracking, which turns
       "Continue with Facebook" into two cramped lines beside Google's sentence
       case. Meta's own guidance is sentence case too. */
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    margin-inline: auto;
}
.social-btn__icon { flex: none; }

/* Neutral rather than a block of Meta blue. Two saturated vendor colours
   stacked read as two pasted-in widgets; a shared shell with the mark in brand
   colour reads as one control repeated. Meta's guidance allows the mark on a
   neutral button, and it sits properly beside Google's outline style. */
.social-btn--facebook {
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--ink);
}
.social-btn--facebook .social-btn__icon { color: #1877F2; }
.social-btn--facebook:hover,
.social-btn--facebook:focus-visible {
    border-color: #1877F2;
    background: rgba(24, 119, 242, 0.06);
    color: var(--ink);
}
.social-btn--facebook:focus-visible { outline: 2px solid #1877F2; outline-offset: 2px; }

.social-auth__noscript {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;
}

.social-auth__disclosure {
    margin: 2px 0 0;
    max-width: min(var(--social-w), 100%);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
}
.social-auth__disclosure a { color: var(--blue-deep); font-weight: 600; text-underline-offset: 3px; }
.social-auth__disclosure a:hover { color: var(--blue); }

.auth-newsletter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin: 2px 0 5px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    background: var(--card);
    background: color-mix(in srgb, var(--paper) 62%, transparent);
    color: var(--ink);
    font-size: 0.84rem;
    line-height: 1.4;
    cursor: pointer;
}
.auth-newsletter input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--blue);
    cursor: inherit;
}
.auth-newsletter strong { font-weight: 650; }
.auth-newsletter__hint {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.social-auth__or {
    position: relative;
    align-self: stretch;
    text-align: center;
    margin: 8px 0 0;
}
.social-auth__or::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
}
.social-auth__or span {
    position: relative;
    padding: 0 12px;
    background: var(--card);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Connected accounts, on the security view. */
.social-linked { list-style: none; margin: 0; padding: 0; }
.social-linked__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.social-linked__row:last-child { border-bottom: 0; }
.social-linked__who { min-width: 0; }
.social-linked__provider { display: block; font-weight: 600; }
.social-linked__meta { display: block; font-size: 0.85rem; color: var(--muted); }

.auth-panel__switch {
    margin: 18px 0 0;
    font-size: 0.9rem;
    color: var(--muted, #6a655c);
    text-align: center;
}

.auth-panel__switch a {
    color: var(--blue-deep);
    font-weight: 600;
}

.auth-register__legal {
    margin: 3px 0 13px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--muted, #6a655c);
    text-align: center;
}
.auth-register__legal a {
    color: var(--blue-deep);
    font-weight: 600;
    text-underline-offset: 3px;
}
.auth-register__legal a:hover { color: var(--blue); }

.auth-proof {
    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 2.2fr);
    margin-top: 18px;
    border: 1px solid var(--line-strong);
    background: var(--panel-solid);
}
.auth-proof__head { padding: 27px 30px; border-right: 1px solid var(--line); }
.auth-proof__head span,
.auth-proof__item > span { color: var(--blue-deep); font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.auth-proof__head h2 { max-width: 12ch; margin: 7px 0 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.35rem); line-height: 1; letter-spacing: -0.035em; }
.auth-proof__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auth-proof__item { padding: 27px 25px; }
.auth-proof__item + .auth-proof__item { border-left: 1px solid var(--line); }
.auth-proof__item h3 { margin: 8px 0 5px; font-size: 0.95rem; }
.auth-proof__item p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.48; }

@media (max-width: 900px) {
    .auth-split {
        grid-template-columns: 1fr;
    }

    .auth-brand { border-right: 0; border-bottom: 1px solid rgba(244, 241, 230, 0.15); }

    .auth-brand__inner {
        grid-template-columns: minmax(0, 1.2fr) minmax(190px, 0.8fr);
        grid-template-rows: auto auto auto;
        gap: 14px 24px;
        padding: 36px 40px;
    }

    .auth-brand__copy { grid-column: 1; }
    .auth-brand__visual { grid-column: 2; grid-row: 1 / 3; min-height: 260px; margin: 0; }
    .auth-brand__visual img { width: 90%; right: 2%; }
    .auth-brand__frame { font-size: 12rem; }
    .auth-brand__list { grid-column: 1; margin-bottom: 5px; }
    .auth-brand__sign { grid-column: 1 / -1; }

    .auth-brand__lede {
        margin-bottom: 22px;
    }

    .auth-panel__inner {
        padding: 36px 32px;
    }

    .auth-proof { grid-template-columns: 1fr; }
    .auth-proof__head { border-right: 0; border-bottom: 1px solid var(--line); }
    .auth-proof__head h2 { max-width: none; }
}

/* Breathing room between stacked fields in the auth card */
.auth-panel .field {
    margin-bottom: 16px;
}

.auth-panel .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.auth-panel .form-row .field {
    margin-bottom: 16px;
}

.auth-panel .field__hint {
    display: block;
    margin-top: 4px;
}

@media (max-width: 480px) {
    .page-account--auth { padding-left: 0; padding-right: 0; }
    .auth-brand::before { inset: 8px; }
    .auth-brand__inner { display: block; padding: 34px 26px 28px; }
    .auth-brand__title { max-width: 8ch; font-size: 2.55rem; }
    .auth-brand__lede { max-width: 30ch; }
    .auth-brand__visual { min-height: 190px; margin: 4px -8px 10px; }
    .auth-brand__visual img { width: 54%; }
    .auth-brand__frame { font-size: 9.5rem; }
    .auth-brand__list { margin-bottom: 22px; }
    .auth-brand__item { display: block; padding: 12px 7px; }
    .auth-brand__item-no { display: block; margin-bottom: 6px; }
    .auth-brand__item-label { display: none; }
    .auth-brand__item-title { font-size: 0.7rem; }
    .auth-panel__inner { padding: 28px 20px 30px; }
    .auth-tabs { margin-bottom: 28px; }
    .auth-pane__head h2 { font-size: 2.25rem; }
    .auth-panel .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-proof { margin-top: 10px; }
    .auth-proof__head { padding: 24px 22px; }
    .auth-proof__items { grid-template-columns: 1fr; }
    .auth-proof__item { padding: 20px 22px; }
    .auth-proof__item + .auth-proof__item { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------- downloads --- */
/* Customer deliverable gallery. Selection is progressive: the bar is hidden
   until JS reveals it, so a no-JS visitor sees plain per-file links instead of
   a button that would do nothing. */
.page-download { padding-bottom: 40px; }

.dl-head { margin: 8px 0 22px; }
.dl-head__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
}
.dl-head__title {
    margin: 6px 0 6px;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    line-height: 1.1;
}
.dl-head__meta { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* The lab's personal line, same words as the email carried. A quiet quoted
   block: the blue rule marks it as a human aside, not another panel. */
.dl-note {
    margin: 18px 0 4px;
    padding: 10px 18px;
    border-left: 3px solid var(--blue);
}
.dl-note__label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--blue);
}
.dl-note__text { margin: 0; font-size: 1.02rem; line-height: 1.6; }  /* newlines arrive as <br> from nl2br */

/* ---------------------------------------------------------------------------
 * Form errors that explain themselves. The summary is focused after an
 * unsuccessful submission (role="alert", tabindex="-1"), each item links to
 * its field, and every invalid field carries its own message — colour is
 * never the only signal.
 */
.form-errors {
    margin: 0 0 18px;
    padding: 14px 18px;
    border: 1px solid var(--red);
    border-left-width: 4px;
    background: color-mix(in srgb, var(--red) 7%, var(--panel-solid));
}
.form-errors:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.form-errors__title { margin: 0 0 6px; font-weight: 700; }
.form-errors__list { margin: 0; padding-left: 18px; }
.form-errors__list a { color: inherit; text-decoration: underline; }

.field__error {
    display: block;
    margin-top: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--red);
}

/* Info-only fulfilment groups (the digital-print files note). */
.ff-group--info .ff-group__note { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
 * Wishlist. Saved state fills the heart; colour is never the only signal —
 * the label swaps to "On your wishlist" and aria-pressed follows.
 */
[data-wishlist].is-saved svg { fill: var(--red); stroke: var(--red); }
[data-wishlist].is-saved { color: var(--red); }

/* The international phone control: dial-code select + national number. */
.phone-field { display: flex; gap: 8px; }
.phone-field__cc { flex: 0 0 auto; width: auto; min-width: 118px; }
.phone-field__num { flex: 1 1 auto; min-width: 0; }

/* Linking another provider from the Security panel. */
.social-link-add { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.social-link-add__label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}
.social-auth--inline { max-width: 360px; }

/* Passkeys: the Security panel list and the login button's status line. */
.passkey-list { list-style: none; margin: 0 0 16px; padding: 0; }

.passkey-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.passkey-item__mark {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--blue);
}

.passkey-item__body { display: grid; gap: 2px; min-width: 0; }
.passkey-item__label { font-weight: 600; }
.passkey-item__meta { font-size: 12.5px; color: var(--muted); }

.passkey-none { margin-bottom: 14px; }

.passkey-login { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.passkey-status {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.passkey-status.is-error { color: var(--red); font-weight: 600; }

/* The guest prompt: one small centred moment, not a page hijack. */
.wish-prompt { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 18px; }
.wish-prompt[hidden] { display: none; }
.wish-prompt__scrim { position: absolute; inset: 0; background: rgba(10, 9, 7, 0.6); }

.wish-prompt__panel {
    position: relative;
    display: grid;
    gap: 10px;
    justify-items: center;
    max-width: 380px;
    padding: 28px 26px 22px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--red);
    background: var(--panel-solid);
    text-align: center;
}

.wish-prompt__mark {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--red);
}
.wish-prompt__mark svg { width: 22px; height: 22px; }

.wish-prompt__title { margin: 0; font-family: var(--font-display); font-size: 22px; }
.wish-prompt__body { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.wish-prompt__cta { width: 100%; text-align: center; }

.wish-prompt__later {
    padding: 6px;
    border: 0;
    background: none;
    font-size: 13px;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}
.wish-prompt__later:hover { color: var(--ink); }
.wish-prompt__later:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.wish-list { list-style: none; margin: 0; padding: 0; }

.wish-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.wish-item--out .wish-item__name { color: var(--muted); }

.wish-item__media {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: var(--paper-2);
    border: 1px solid var(--line);
}
.wish-item__media img { max-width: 84%; max-height: 84%; object-fit: contain; }

.wish-item__body { display: grid; gap: 2px; min-width: 0; }
.wish-item__cat {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}
.wish-item__name { font-weight: 600; color: var(--ink); text-decoration: none; }
.wish-item__name:hover { text-decoration: underline; }
.wish-item__meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wish-item__out { color: var(--red); text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; }

@media (max-width: 560px) {
    .wish-item { grid-template-columns: 48px 1fr; }
    .wish-item__remove { grid-column: 2; justify-self: start; }
}

/* The RAW add-on: one quiet row, not another gallery. There is nothing to
   preview — the pictures show the roll. Sits inside the first reel, between
   its header strip and its thumbnails. */
.dl-raw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    background: var(--panel-solid);
}

.dl-reel .dl-raw { margin: 0 0 18px; }
.dl-raw__copy { display: grid; gap: 3px; min-width: 0; }
.dl-raw__title { font-weight: 700; }
.dl-raw__meta { color: var(--muted); font-size: 0.92rem; font-variant-numeric: tabular-nums; }

.dl-bar {
    position: sticky;
    /* Below the brand rail, not under it. The rail is fixed at the top of the
       viewport, so a bar that sticks to 0 parks itself behind the stripes. */
    top: calc(var(--rail-h) + 8px);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
}
.dl-bar__left { display: flex; align-items: center; gap: 14px; }

/* Had no rule at all, so the two buttons sat against each other with nothing
   between them. */
.dl-bar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dl-bar__toggle { display: none; }

.dl-bar__count { font-size: 0.88rem; color: var(--muted); }
.dl-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.92rem;
    /* The label is the target as well as the box, so it needs to be worth
       aiming at with a thumb. */
    min-height: 24px;
}
.dl-check input { width: 18px; height: 18px; accent-color: var(--blue); cursor: inherit; }

.dl-progress { margin-bottom: 18px; }
.dl-progress__bar {
    height: 6px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
}
.dl-progress__bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--blue);
    transition: width 0.3s ease;
}
.dl-progress__label { margin: 8px 0 0; font-size: 0.86rem; color: var(--muted); }

/* Gallery -------------------------------------------------------------- */

/* Justified rows, grouped per roll.
   Each tile declares its own --ar (width/height). flex-basis is that ratio
   times a target row height, and flex-grow is the ratio again, so a row that
   wraps distributes its slack in proportion and every frame in it lands at the
   same height. No JavaScript, and no reflow after the images load, because the
   shape is known before anything is fetched.
   The ::after absorbs the last row's leftover space so a short final row is
   left at its natural size rather than stretched into a banner. */
.dl-reel { margin: 0 0 34px; }
.dl-reel:last-of-type { margin-bottom: 0; }

.dl-reel__head {
    /* 346:492, so the width follows the height exactly. */
    --can-h: 64px;
    --can-w: 45px;
    --perf-h: 9px;

    /* The film leaves the body of the can, and the body is not centred on the
       canister: it runs y=87..457 of a 492 viewBox, so its middle sits at
       55.3% rather than 50%. The cap and shoulder above it are taller than the
       base below. Lifting the can by that difference puts its mouth on the
       strip instead of a little above it. */
    --can-mouth-drop: 0.0528;

    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Indented by half the can, so the can's left half sits in the gutter and
       the strip begins at its centre line -- the film reads as coming out of
       the middle of the can rather than being parked against its side. */
    margin: 0 0 18px calc(var(--can-w) / 2);
    /* Vertical padding clears the perforation rows rather than sitting between
       them, which is what makes the strip tall enough to read as film. */
    padding: calc(var(--perf-h) + 4px) 14px calc(var(--perf-h) + 4px)
             calc(var(--can-w) / 2 + 14px);
    border-radius: var(--radius);
    background: var(--film-base);
    color: var(--film-ink);
    /* No overflow:hidden: the can is taller than the strip on purpose. */
}

/* Perforations along both edges, where film actually has them, instead of a
   single row running through the middle of the label. Same slots as the
   lightbox rail. */
.dl-reel__head::before,
.dl-reel__head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--perf-h);
    background-image: var(--perf);
    background-size: 17px 100%;
    background-repeat: repeat-x;
    pointer-events: none;
}
.dl-reel__head::before { top: 0; }
.dl-reel__head::after { bottom: 0; }

/* The can the strip comes out of.
 *
 * This replaces the three dyes that used to run down the leading edge. They
 * were the brand signature turned on its side; the can carries the same three
 * dyes as its label, so nothing is lost and the strip now reads as film spooling
 * out of something rather than as a bar with a coloured end.
 *
 * Lifted off the strip rather than matching it. The source asset fills the body
 * with the same near-black as this header, which would leave the can invisible
 * against it -- only the stripes would show. A lighter body reads as metal
 * catching light, which is also what a canister actually looks like. */
.dl-reel__can {
    /* Taken out of the flex flow and hung over the strip's leading edge. As a
       flex child it could only ever sit inside the bar, which is the opposite
       of what a can does. Being a child of the header it paints over the
       header's own background, so the strip disappears behind it. */
    position: absolute;
    left: calc(var(--can-w) / -2);
    top: 50%;
    /* Centred on the strip, then lifted so it is the can's mouth on the centre
       line rather than the midpoint of the whole canister. */
    transform: translateY(calc(-50% - var(--can-h) * var(--can-mouth-drop)));
    width: var(--can-w);
    height: var(--can-h);
    /* ::after paints after the element's children, so without this the bottom
       row of perforations would be drawn across the can. */
    z-index: 2;
}
.dl-reel__can-body { fill: #3b332a; }
.dl-reel__can-c { fill: var(--dye-c); }
.dl-reel__can-y { fill: var(--dye-y); }
.dl-reel__can-m { fill: var(--dye-m); }

.dl-reel__label {
    flex: none;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* Same reasoning as the lightbox: the reel header is film base in both
       themes, so it needs the dark-ground blue unconditionally. */
    color: #3399cc;
}
.dl-reel__id {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}
.dl-reel__count {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
}

.dl-grid {
    --dl-row: 208px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dl-grid::after {
    content: '';
    flex-grow: 1000000;
}

.dl-item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * var(--dl-row));
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dl-item.is-picked { box-shadow: 0 0 0 2px var(--blue); }

.dl-item__pick { position: absolute; top: 8px; left: 8px; z-index: 2; cursor: pointer; }
.dl-item__pick input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }

.dl-item__box {
    display: block;
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    border-radius: 4px;
    background: rgba(17, 17, 17, 0.45);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.dl-item__pick input:checked + .dl-item__box {
    background: var(--blue);
    border-color: var(--blue);
}
.dl-item__pick input:checked + .dl-item__box::after {
    content: "";
    display: block;
    width: 6px;
    height: 11px;
    margin: 2px auto 0;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.dl-item__pick input:focus-visible + .dl-item__box { outline: 2px solid var(--blue); outline-offset: 2px; }

.dl-item__media {
    position: relative;
    aspect-ratio: var(--ar, 1.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--film-base);
}
/* contain, not cover: the tile is already the frame's shape, so nothing is cut. */
.dl-item__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dl-item__ext { font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); }

/* The per-file link sits over the image so it costs no row height. */
.dl-item__get {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(20, 26, 33, 0.62);
    color: #fff;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.dl-item__get::before {
    content: '';
    width: 11px;
    height: 11px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(-45deg);
}
.dl-item__get-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.dl-item:hover .dl-item__get,
.dl-item__get:focus-visible { opacity: 1; }
.dl-item__get:hover { background: var(--blue); }

/* Rebate printing: frame number left, size right, in mono. */
.dl-item__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px 7px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}
.dl-item__frame { color: var(--blue); font-weight: 700; }
.dl-item__size { color: var(--muted); flex: none; }

@media (max-width: 720px) {
    /* A drawer at the bottom rather than a block at the top.
     *
     * Stuck to the top it cost a tenth of the screen before a single photograph
     * appeared, and it sat at the far end of the page from the thumb holding
     * the phone. Collapsed it is now one row carrying the action almost
     * everyone wants; the selection controls open on top of it. */
    .dl-bar {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 10px var(--page-pad, 16px)
                 calc(10px + env(safe-area-inset-bottom, 0px));
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        box-shadow: 0 -6px 22px rgba(10, 9, 7, 0.28);
    }

    .dl-bar__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 34px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--muted);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        cursor: pointer;
        order: -1;
    }
    .dl-bar__toggle svg { transition: transform 0.18s ease; }
    .dl-bar.is-open .dl-bar__toggle svg { transform: rotate(180deg); }

    /* Closed: just the primary action. Open: everything, above it. */
    .dl-bar__left { display: none; }
    .dl-bar.is-open .dl-bar__left {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 2px 0 12px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 12px;
    }

    .dl-bar__right { flex-direction: column; gap: 8px; }
    .dl-bar__right .btn {
        width: 100%;
        min-height: 46px;
        padding-block: 0;
    }
    .dl-bar__right .btn--ghost { display: none; }
    .dl-bar.is-open .dl-bar__right .btn--ghost { display: inline-flex; }

    .dl-check { font-size: 0.95rem; }
    .dl-check input { width: 20px; height: 20px; }

    /* So the last row of frames is not sitting under the drawer. */
    .page-download { padding-bottom: 104px; }

    .dl-grid { --dl-row: 132px; gap: 7px; }
    .dl-reel__count { display: none; }
    .dl-reel__head { --can-h: 56px; --can-w: 39px; --perf-h: 7px; margin-bottom: 16px; }
}
@media (min-width: 1400px) {
    .dl-grid { --dl-row: 240px; }
}

/* A touch device has no hover, so the per-file link is always visible. */
@media (hover: none) {
    .dl-item__get { opacity: 1; }
}


@media (max-width: 620px) {
    .dl-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}

/* Scan deliveries in the account area. */
.deliverable-list { list-style: none; margin: 0 0 20px; padding: 0; }
.deliverable-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.deliverable-item:last-child { border-bottom: 0; }
.deliverable-item__body { min-width: 0; }
.deliverable-item__title { display: block; font-weight: 600; }
.deliverable-item__meta { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--muted); }

/* Rolls within one order. Ready rolls link to their own page; ones still in the
   lab are shown but not clickable, so nothing a customer is waiting for looks
   like it has been lost. */
.dl-head__roll {
    display: inline-block;
    margin-left: 10px;
    font-family: var(--font-mono);
    font-size: 0.5em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    vertical-align: middle;
}
.dl-rolls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}
.dl-roll a,
.dl-roll > span {
    display: block;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    text-decoration: none;
    color: inherit;
}
.dl-roll.is-current > a,
.dl-roll.is-current > span { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.dl-roll.is-waiting > span { opacity: 0.62; }
.dl-roll__no {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.86rem;
}
.dl-roll__state { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--muted); }

/* -------------------------------------------------------- lightbox ------ */
/* Full-screen preview. Uses dvh so mobile browser chrome appearing and
   disappearing does not crop the image or the caption. */
body.lb-open { overflow: hidden; }

/* Lightbox: a frame on the light table, with the roll along the bottom ----- */

.lb {
    /* #3399cc is the brand's own dark-ground blue -- the value --blue-deep
       takes when the theme goes dark. Written literally rather than as
       var(--blue-deep) because this surface is always dark: in light theme
       that token is #004a75, which would be navy on near-black. */
    --lb-accent: #3399cc;

    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 16px 12px;
    background: rgba(10, 9, 7, 0.96);
    overscroll-behavior: contain;
}
.lb[hidden] { display: none; }

/* The page rail, carried onto the lightbox so a full-screen surface still
   reads as part of the site. Gaps are the lightbox ground rather than --paper,
   which the global token assumes. */
.lb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    background: linear-gradient(180deg,
        var(--dye-c) 0    4px, #0a0907 4px  7px,
        var(--dye-y) 7px  11px, #0a0907 11px 14px,
        var(--dye-m) 14px 18px);
    pointer-events: none;
}

.lb__viewer {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}
.lb__img {
    max-width: min(100%, 1600px);
    max-height: 100%;
    object-fit: contain;
    border-radius: 2px;
    background: var(--film-base);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.lb__img.is-loaded { opacity: 1; }

/* Edge printing, the way a roll is marked along its rebate. */
.lb__edge {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: rgba(242, 239, 230, 0.55);
}
.lb__edge-roll {
    color: var(--film-ink);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.lb__edge-roll:empty { display: none; }
.lb__edge-frame {
    color: var(--lb-accent);
    font-weight: 700;
}
.lb__edge-frame::before { content: '\00b7'; margin-right: 12px; color: rgba(244, 241, 230, 0.3); }
.lb__edge-roll:empty + .lb__edge-frame::before { content: none; }
.lb__edge-name {
    max-width: min(46vw, 420px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb__dl {
    color: #fff;
    background: var(--blue);
    border-radius: 3px;
    padding: 5px 12px;
    text-decoration: none;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
}
.lb__dl:hover { filter: brightness(1.12); }
.lb__dl:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 2px; }

/* The strip. Perforations are drawn top and bottom of the rail itself rather
   than around every frame, which would fight the photographs. */
.lb__strip {
    flex: none;
    position: relative;
    width: 100%;
    padding: 10px 0;
    background: var(--film-base);
    border-radius: 3px;
    overflow: hidden;
}
.lb__strip[hidden] { display: none; }
.lb__strip::before,
.lb__strip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    pointer-events: none;
    background-image: var(--perf);
    background-size: 17px 100%;
    background-repeat: repeat-x;
}
.lb__strip::before { top: 0; }
.lb__strip::after { bottom: 0; }

.lb__track {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0 50%;          /* lets the first and last frame reach the centre */
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.lb__track::-webkit-scrollbar { display: none; }

.lb__cell {
    position: relative;
    flex: none;
    height: 58px;
    width: calc(58px * var(--ar, 1.5));
    cursor: pointer;
    opacity: 0.42;
    outline: 1px solid transparent;
    transition: opacity 0.15s ease, outline-color 0.15s ease;
}
.lb__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb__cell:hover { opacity: 0.8; }
.lb__cell.is-current { opacity: 1; outline-color: var(--lb-accent); outline-width: 2px; }

/* Where one roll ends and the next begins. */
.lb__cell.is-roll-start { margin-left: 26px; }
.lb__cell.is-roll-start::before {
    content: '';
    position: absolute;
    left: -15px;
    top: -10px;
    bottom: -10px;
    width: 1px;
    background: rgba(244, 241, 230, 0.28);
}

.lb__cell-no {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 3px;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.05em;
    color: rgba(244, 241, 230, 0.85);
    background: rgba(10, 9, 7, 0.6);
}

.lb__close,
.lb__nav {
    position: absolute;
    border: 0;
    color: rgba(244, 241, 230, 0.9);
    background: rgba(244, 241, 230, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.lb__close:hover, .lb__nav:hover { background: rgba(244, 241, 230, 0.24); }
.lb__close:focus-visible, .lb__nav:focus-visible { outline: 2px solid var(--lb-accent); outline-offset: 2px; }

.lb__close {
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.6rem;
}
.lb__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.8rem;
}
.lb__nav--prev { left: 6px; }
.lb__nav--next { right: 6px; }
.lb__nav[hidden] { display: none; }

.lb__counter {
    position: absolute;
    top: 30px;
    left: 20px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: rgba(244, 241, 230, 0.6);
}

@media (max-width: 720px) {
    .lb { padding: 54px 8px 8px; gap: 8px; }
    .lb__cell { height: 44px; width: calc(44px * var(--ar, 1.5)); }
    .lb__edge-name { display: none; }
    .lb__nav { width: 40px; height: 40px; }
}

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

.dl-item__media.is-clickable { cursor: zoom-in; }
.dl-item__media.is-clickable:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
    .lb__close, .lb__nav { transition: none; }
}

/* ── Article page ─────────────────────────────────────────────────────────
   A single Update. The body is block markup from the editor, styled by
   blocks.css; what follows is the page around it, plus the few places our
   type needs to win over the block stylesheet's defaults. */

.event__link {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--blue), var(--blue));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size 0.25s ease, color 0.2s ease;
}

.event__link:hover,
.event__link:focus-visible {
    color: var(--blue);
    background-size: 100% 1px;
}

.post__meta {
    margin: 12px 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.post__meta-sep {
    margin: 0 8px;
    color: var(--line-strong);
}

.post__cover {
    margin: 0 0 32px;
}

.post__cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Article measure. Reading length beats full width, and the block stylesheet
   has no opinion about it because a WordPress theme normally supplies one. */
.post__body {
    max-width: 68ch;
}

.post__body > * {
    margin-block: 0 1.25em;
}

.post__body h2,
.post__body h3,
.post__body h4 {
    margin-block: 1.8em 0.6em;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
}

.post__body h2 { font-size: 26px; }
.post__body h3 { font-size: 21px; }
.post__body h4 { font-size: 18px; }

.post__body p,
.post__body li {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
}

.post__body a {
    color: var(--blue);
}

.post__body figure,
.post__body img {
    max-width: 100%;
    height: auto;
}

.post__body .wp-block-quote,
.post__body .wp-block-pullquote {
    margin-block: 1.8em;
    padding-left: 20px;
    border-left: 3px solid var(--blue);
    font-style: normal;
}

.post__body .wp-block-quote p {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.5;
}

.post__body .wp-block-code {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper-2, #f7f6f3);
    font-family: var(--font-mono);
    font-size: 14px;
    overflow-x: auto;
}

/* Tables and other wide block content scroll inside themselves rather than
   pushing the page sideways. */
.post__body .wp-block-table {
    overflow-x: auto;
}

.post__body .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 15px;
}

.post__body .wp-block-table td,
.post__body .wp-block-table th {
    padding: 10px 12px;
    border: 1px solid var(--line);
    text-align: left;
}

.post__back {
    margin: 40px 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.post__back a {
    color: var(--blue);
    text-decoration: none;
}

.post__back a:hover {
    text-decoration: underline;
}

/* ── Service configurator ──────────────────────────────────────────────────
   Choices are buttons, not dropdowns. A dropdown hides its options until
   asked and leaves no room for a price or an icon; there are only a handful of
   each here, and seeing them at once is the point. Supersedes the .cfg-row /
   .cfg-field rules above. */

.cfg-step {
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
}

.cfg-step:first-child {
    padding-top: 0;
    border-top: 0;
}

.cfg-step__head { margin-bottom: 0.85rem; }

.cfg-step__title {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blue);
}

.cfg-step__hint {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.cfg-label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.cfg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* The service choice earns more room than the rest: everything else on the
   page depends on which one is picked. */
.cfg-chips--cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.7rem;
}

.cfg-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.cfg-chip--card {
    align-items: flex-start;
    padding: 0.95rem 1rem;
}

.cfg-chip:hover { border-color: var(--blue); }

/* The input is the state; hiding it visually keeps keyboard and screen-reader
   behaviour intact, which a div with a click handler would not. */
.cfg-chip__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.cfg-chip:has(.cfg-chip__input:checked) {
    border-color: var(--blue);
    background: var(--blue-tint);
    box-shadow: inset 0 0 0 1px var(--blue);
}

/* Focus lands on the hidden input, so the ring has to be drawn on the label. */
.cfg-chip:has(.cfg-chip__input:focus-visible) {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.cfg-chip__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--blue);
}

.cfg-chip__icon svg {
    width: 22px;
    height: 22px;
}

.cfg-chip--card .cfg-chip__icon svg {
    width: 26px;
    height: 26px;
}

.cfg-chip__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cfg-chip__name {
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.cfg-chip__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cfg-chip--toggle .cfg-chip__icon { opacity: 0.5; }
.cfg-chip--toggle:has(.cfg-chip__input:checked) .cfg-chip__icon { opacity: 1; }

.cfg-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.1rem;
    align-items: start;
}

.cfg-pair__col--qty { max-width: 190px; }

/* The all-at-once route can describe several films before touching the cart.
   Every film remains expanded and editable: bulk customers need to compare
   the rows at a glance, and an opaque "Edit" swap made the active row unclear. */
.cfg-film-drafts {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.cfg-film-drafts[hidden] { display: none; }

.cfg-film-draft {
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--panel-solid);
}

.cfg-film-draft__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cfg-film-draft__name {
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cfg-film-draft__price {
    margin-left: auto;
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cfg-film-draft__remove {
    border: 0;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    color: var(--faint);
}

.cfg-film-draft__remove:hover { color: var(--red); background: var(--panel); }
.cfg-film-draft__remove:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.cfg-film-draft__addons {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.cfg-film-draft__addons[hidden] { display: none; }

.cfg-film-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0 0;
    padding: 10px 12px 0;
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--panel-solid);
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cfg-film-active__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: -7px -5px -3px 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--faint);
    cursor: pointer;
}

.cfg-film-active__remove:hover { color: var(--red); background: var(--panel); }
.cfg-film-active__remove:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.cfg-film-active[hidden] { display: none; }

.cfg-film-active:not([hidden]) + .cfg-pair {
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--panel-solid);
}

.cfg--wizard .cfg-film-drafts,
.cfg--wizard .cfg-film-active,
.cfg--send .cfg-film-drafts,
.cfg--send .cfg-film-active { display: none; }

.cfg-optgroup + .cfg-optgroup { margin-top: 1rem; }

/* Quantity: a roll or a handful, never a list to scroll. */
.cfg-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
}

.cfg-stepper__btn {
    width: 38px;
    border: 0;
    background: none;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--blue);
    cursor: pointer;
}

.cfg-stepper__btn:hover { background: var(--blue-tint); }

.cfg-stepper__input {
    width: 56px;
    border: 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    padding: 0.5rem 0;
    background: none;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    text-align: center;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.cfg-stepper__input::-webkit-outer-spin-button,
.cfg-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Adding to the cart is the point of the page, so the bar holding it stays put
   while the options above are worked through. */
/* Adding to the cart is the point of the page, so the card holding it stays put
   while the options above are worked through. The fade is on the sticky wrapper
   rather than the card, so the card keeps its own edges instead of dissolving
   into the page at its bottom. */
.cfg__bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 0.5rem;
    padding: 1rem 0 0.9rem;
    /* Fades to the PANEL's colour, not the page's. --paper is the page ground
       (#14120e in dark, #f4f1e6 in light) but this bar sits inside .panel,
       which is --panel-solid (#1d1a15 / #ffffff). Fading to --paper painted a
       strip of the wrong surface across the panel, visible as a darker band
       above and below the price card. */
    background: linear-gradient(to top, var(--panel-solid) 78%, transparent);
}

.cfg__add { min-width: 170px; font-weight: 700; }
.cfg__again { font-weight: 600; }
.cfg__again[disabled] { opacity: 0.45; cursor: not-allowed; }
.cfg__again.is-busy, .cfg__add.is-busy { opacity: 0.6; cursor: progress; }

.cfg__add.is-busy { opacity: 0.6; cursor: progress; }

.cfg.is-unavailable .cfg__price-value { color: var(--muted); font-size: 1.05rem; }

@media (max-width: 640px) {
    .cfg-chips--cards { grid-template-columns: 1fr; }
    /* One row: the total on the left, Add on the right. The bar was three
       stacked full-width rows -- a quarter of a phone screen floating over
       the form it summarises. "Add another film" moves into the normal flow
       below the bar (configurator.js relocates the button itself). */
    .cfg__bar-inner { padding: 10px 14px; gap: 10px; flex-wrap: nowrap; }
    .cfg__price { flex: 0 1 auto; min-width: 0; }
    .cfg__price-value { font-size: 1.3rem; }
    .cfg__actions { flex: 0 0 auto; margin-left: auto; }
    .cfg__add { min-width: 0; }
}

/* The narrowest phones: the label goes (a number beside "Add to cart" needs
   no caption), the number and the button slim sideways only -- the button
   keeps its full height, because 44px of tap target is not negotiable. */
@media (max-width: 360px) {
    .cfg__price-label { display: none; }
    .cfg__price-value { font-size: 1.1rem; }
    .cfg__add { padding-left: 14px; padding-right: 14px; font-size: 12px; }
}

/* The relocated button, sitting under the bar as an ordinary secondary
   action. Hidden outside the full form: guided and send have their own
   actions, and this one belongs to the form's flow alone. */
.cfg__again--inline {
    display: block;
    width: 100%;
    margin-top: 10px;
}
.cfg--wizard .cfg__again--inline,
.cfg--send .cfg__again--inline { display: none; }

.cfg__multi-hint {
    max-width: 76ch;
    margin: 2px 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--muted);
}
.cfg--wizard .cfg__multi-hint,
.cfg--send .cfg__multi-hint { display: none; }

/* ── Cart drawer ───────────────────────────────────────────────────────────
   Adding something used to bump a number on a header icon. The drawer answers
   "where did that go?" in place, without navigating away from the page the
   reader was working on. */

.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 120;
    visibility: hidden;
    pointer-events: none;
}

.cart-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.cart-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.42);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.cart-drawer.is-open .cart-drawer__scrim { opacity: 1; }

.cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(400px, 92vw);
    height: 100%;
    background: var(--paper);
    border-left: 1px solid var(--line-strong);
    box-shadow: -6px 0 28px rgba(17, 17, 17, 0.16);
    transform: translateX(100%);
    transition: transform 0.22s ease;
}

.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    .cart-drawer__scrim,
    .cart-drawer__panel { transition: none; }
}

.cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.cart-drawer__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
}

.cart-drawer__count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 11px;
    background: var(--blue);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.cart-drawer__close {
    border: 0;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

.cart-drawer__close:hover { color: var(--ink); }

.cart-drawer__lines {
    flex: 1 1 auto;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    overflow-y: auto;
}

.cart-drawer__line {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.cart-drawer__media {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper-2);
}

.cart-drawer__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-drawer__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cart-drawer__name {
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--ink);
}

.cart-drawer__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cart-drawer__price {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.cart-drawer__empty,
.cart-drawer__error {
    margin: 0;
    padding: 2rem 1.25rem;
    color: var(--muted);
    text-align: center;
}

.cart-drawer__dropped {
    margin: 0;
    padding: 0.7rem 1.25rem;
    background: rgba(184, 68, 58, 0.08);
    color: #8d3229;
    font-size: 0.88rem;
}

.cart-drawer__foot {
    flex: 0 0 auto;
    display: grid;
    gap: 0.7rem;
    padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-strong);
    background: var(--paper-2);
}

.cart-drawer__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.cart-drawer__total strong {
    font-size: 1.35rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
}

.cart-drawer__go { width: 100%; text-align: center; }

.cart-drawer__link {
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted);
}

/* The page behind should not scroll while the drawer is over it. */
body.has-drawer-open { overflow: hidden; }

.cart-drawer__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px dashed var(--line-strong);
    color: var(--muted);
    opacity: 0.6;
}

.cart-drawer__media--empty svg { width: 22px; height: 22px; }

/* Checkout summary doubling as the cart: quantities are editable until the
   payment step, at which point the lines go read-only so the figure on the
   button cannot drift from the intent behind it. */

.checkout-line--editable .checkout-line__desc { gap: 0.4rem; }

.checkout-line__edit {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.checkout-line__qtyinput {
    width: 56px;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-align: center;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.checkout-line__apply {
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: none;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
}

.checkout-line__apply:hover { border-color: var(--blue); color: var(--blue); }

.checkout-line__remove {
    padding: 0 0.4rem;
    border: 0;
    background: none;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

.checkout-line__remove:hover { color: #b8443a; }

/* ---------------------------------------------------------------------------
 * Closing an account.
 *
 * Styled to slow the reader down rather than to alarm them. The red is a border
 * and a button, never a fill behind text: a panel washed in red reads as an
 * error that has already happened, and nothing here has happened yet.
 * ------------------------------------------------------------------------- */

.form-alert--info {
    border-left-color: var(--orange);
    background: rgba(255, 106, 0, 0.07);
}

.section--narrow {
    max-width: 780px;
    margin-inline: auto;
}

.account-panel--danger {
    margin-top: 26px;
    border-color: rgba(230, 0, 18, 0.35);
    border-left: 3px solid var(--red);
}

.account-panel__intro,
.account-panel__note {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.account-panel__note { margin-top: 14px; font-size: 14px; }

.erase-summary {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
}

/* A dash rather than a bullet: these two lines are a pair of statements, not
   a list of steps, and a bullet implies an order they do not have. */
.erase-summary li { padding-left: 18px; position: relative; }
.erase-summary li::before {
    content: "; ";
    position: absolute;
    left: 0;
    color: var(--faint);
}

.btn--danger {
    background: var(--red);
    border-color: var(--red);
    color: #ffffff;
}

.btn--danger:hover {
    background: #c1000f;
    border-color: #c1000f;
    color: #ffffff;
}

/* ---- the confirmation page --------------------------------------------- */

.danger-confirm {
    padding: 34px 36px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--red);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.danger-confirm--done { border-top-color: var(--blue); }

.danger-confirm__eyebrow {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
}

.danger-confirm__title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.danger-confirm__lede {
    margin: 0 0 26px;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
}

/* The photographs. Given the loudest treatment on the page because it is the
   only loss here that nobody can reverse afterwards by any means. */
.danger-confirm__warn {
    margin-bottom: 26px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 106, 0, 0.4);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius);
    background: rgba(255, 106, 0, 0.06);
}

.danger-confirm__warn-title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
}

.danger-confirm__warn p {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}

.danger-confirm__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.danger-confirm__col {
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.danger-confirm__col h2 {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.danger-confirm__col--gone h2 { color: var(--red); }
.danger-confirm__col--kept h2 { color: var(--blue); }

.danger-confirm__col ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 7px;
}

.danger-confirm__col li,
.danger-confirm__col p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
}

.danger-confirm__col p { margin: 0 0 10px; }

.danger-confirm__why {
    font-size: 13px !important;
    color: var(--muted) !important;
}

.danger-confirm__act {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.danger-confirm__code {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--muted);
}

.danger-confirm__code code {
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.12em;
    color: var(--ink);
}

@media (max-width: 640px) {
    .danger-confirm { padding: 26px 20px; }
    .danger-confirm__title { font-size: 24px; }
}

/* Checkout consent tick. Given its own weight rather than being a small grey
   line: it is the moment the customer accepts the terms and, on a service
   order, asks us to start work; which is what ends their 14-day right. A
   control that carries that should not look like fine print. */
.checkout-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 22px 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    cursor: pointer;
}

.checkout-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--blue);
    cursor: pointer;
}

.checkout-consent--error {
    border-color: rgba(230, 0, 18, 0.45);
    border-left-color: var(--red);
    background: rgba(230, 0, 18, 0.05);
}

.checkout-consent a { color: var(--blue); }

/* --------------------------------------------------------------------------
   Legal page contents list.
   
   The numbering comes from the section headings themselves ("1. Who you are
   dealing with"), which are what people quote when they refer to a clause. The
   <ol> is kept for semantics but its markers are suppressed, because rendering
   both gave "1. 1. Who you are dealing with".
   -------------------------------------------------------------------------- */

.legal-toc {
    margin: 0 0 34px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    background: var(--paper);
}

.legal-toc h2 {
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.legal-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;                 /* headings already carry the numbers */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 6px 26px;
}

.legal-toc li { margin: 0; }

.legal-toc a {
    display: block;
    padding: 4px 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
    color: var(--link);
    border-bottom-color: color-mix(in srgb, var(--link) 45%, transparent);
}

/* The heading a contents link jumps to should not land under the sticky
   header, and should be obvious for a moment once it does. */
.legal-section[id] { scroll-margin-top: 90px; }

@media (max-width: 640px) {
    .legal-toc { padding: 18px 18px; }
    .legal-toc ol { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   FAQ.
   
   Built on <details>/<summary>, so the open/close behaviour, keyboard support
   and screen-reader semantics come from the browser. The only thing worth
   styling away is the default disclosure triangle, replaced with a mark that
   rotates; and the rotation is dropped entirely for anyone who has asked for
   reduced motion.
   -------------------------------------------------------------------------- */

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
}

.faq-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.faq-jump a {
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.faq-jump a:hover,
.faq-jump a:focus-visible {
    border-color: var(--blue);
    color: var(--link);
}

.faq-groups { display: grid; gap: 34px; }

.faq-group__title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.faq-group[id] { scroll-margin-top: 90px; }

.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    margin-bottom: 10px;
}

.faq-item[open] { border-color: var(--line-strong); }

.faq-item__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
    list-style: none;                 /* Firefox */
}

/* Safari and Chrome draw their own marker via this pseudo-element. */
.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
    border-radius: var(--radius);
}

/* A plus that becomes a minus. Drawn with borders rather than glyphs so it
   stays crisp at any zoom and inherits the text colour. */
.faq-item__mark {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 5px;
}

.faq-item__mark::before,
.faq-item__mark::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    background: var(--muted);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-item__mark::after { transform: rotate(90deg); }
.faq-item[open] .faq-item__mark::after { transform: rotate(0deg); opacity: 0; }

.faq-item__a {
    padding: 0 20px 18px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
}

.faq-item__a p { margin: 0 0 12px; }
.faq-item__a p:last-child { margin-bottom: 0; }

.faq-contact {
    padding: 26px 28px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    background: var(--paper);
}

.faq-contact__title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--ink);
}

.faq-contact p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.faq-contact__act {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .faq-item__mark::before,
    .faq-item__mark::after { transition: none; }
}

@media (max-width: 640px) {
    .faq-item__q { padding: 14px 16px; font-size: 15px; }
    .faq-item__a { padding: 0 16px 16px; }
    .faq-contact { padding: 20px 18px; }
}

/* --------------------------------------------------------------------------
   "I'm not sure what film I have".
   
   The note inside the configurator and the guide below it. Styled as help
   rather than as a warning: choosing "not sure" is a legitimate answer, not a
   mistake to be corrected, so nothing here is red.
   -------------------------------------------------------------------------- */

.cfg-unsure {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
}

.cfg-unsure p { margin: 0 0 10px; }

.cfg-unsure__link {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.cfg-unsure__link:hover { color: var(--link-hover); }

/* ---- the guide --------------------------------------------------------- */

.film-id {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.film-id[open] { border-color: var(--line-strong); }

.film-id__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ink);
    list-style: none;
}

.film-id__summary::-webkit-details-marker { display: none; }

.film-id__summary:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
    border-radius: var(--radius);
}

.film-id__mark {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.film-id__mark::before,
.film-id__mark::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    background: var(--muted);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.film-id__mark::after { transform: rotate(90deg); }
.film-id[open] .film-id__mark::after { transform: rotate(0deg); opacity: 0; }

.film-id__body { padding: 0 22px 22px; }

.film-id__lede {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.film-id__steps {
    margin: 0;
    padding: 0 0 0 22px;
    display: grid;
    gap: 22px;
}

.film-id__steps h3 {
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.film-id__steps p {
    margin: 0 0 10px;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.film-id__marks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.film-id__marks li {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}

.film-id__marks code {
    display: inline-block;
    min-width: 62px;
    margin-right: 8px;
    padding: 3px 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--paper);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink);
    text-align: center;
}

.film-id__stocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.film-id__stock {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.film-id__stock-name {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
}

.film-id__stock-list {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}

.film-id__fallback {
    margin: 22px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--blue);
    background: var(--paper);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    .film-id__mark::before,
    .film-id__mark::after { transition: none; }
}

@media (max-width: 640px) {
    .film-id__summary { padding: 15px 16px; font-size: 17px; }
    .film-id__body { padding: 0 16px 18px; }
    .film-id__steps { padding-left: 18px; }
}

/* --------------------------------------------------------------------------
   Price matrix on a phone.
   
   Four columns of prices do not fit at 390px. It used to scroll sideways, but
   an overlay scrollbar that appears only mid-gesture is not an affordance:
   the last column simply looked cut off. Below 700px each row becomes its own
   block with the column heading beside each price, so nothing is hidden and
   nothing has to be discovered.
   -------------------------------------------------------------------------- */

/* 880px, matching the breakpoint that folds the groups: between the old 700px
   and the fold, an opened group was still a matrix in a sideways scroller,
   which is exactly the thing this block exists to prevent. */
@media (max-width: 880px) {
    .price-matrix,
    .price-matrix tbody,
    .price-matrix tr,
    .price-matrix th,
    .price-matrix td { display: block; }

    /* The header row carries the column names, which are now repeated against
       each price. Hidden accessibly rather than removed: screen readers still
       get the table semantics from the markup. */
    .price-matrix thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .price-matrix tbody tr {
        padding: 4px 0 10px;
        border-bottom: 1px solid var(--line);
    }

    .price-matrix tbody tr:last-child { border-bottom: 0; }

    .price-matrix th[scope="row"] {
        padding: 10px 18px 4px;
        font-size: 15px;
    }

    .price-matrix td.price-matrix__price {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        padding: 5px 18px;
        text-align: left;
    }

    /* Only when there is a heading to show: the single-column tables (scan
       only) have no per-column label and should stay a plain price. */
    .price-matrix td.price-matrix__price[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 400;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
    }

    /* Nothing to scroll any more: the scroll REGION goes, not just its edge
       shading. A live overflow container under restacked rows could still
       grow a scrollbar from zoom, large text or longer Romanian labels, and
       a price list must never ask for sideways reading. */
    .table-scroll { overflow-x: visible; background: none; }
}

/* --------------------------------------------------------------------------
   Where the process is printed: the two illustrations in the film guide.
   
   The artwork has a transparent background so it sits on either theme without
   a plate behind it. Side by side on a wide screen, stacked on a phone, and
   capped in height so a tall 120 box cannot push the rest of the guide off the
   fold.
   -------------------------------------------------------------------------- */

.film-id__shots {
    margin: 20px 0 4px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Two rows, not a flex column: the grid stretches both panels to the height of
   the taller one, and a flex column would then leave the shorter drawing stuck
   at the top with dead space beneath it and the two captions at different
   heights. `1fr auto` gives the artwork all the leftover space to centre
   itself in and pins the caption to the bottom edge, so the captions line up
   with each other whatever the drawings' proportions. */
.film-id__shot {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.film-id__shot img {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    align-self: center;
}

.film-id__shot figcaption {
    align-self: end;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
    text-align: center;
}

/* Spans both columns: it qualifies the pair, not either one. */
.film-id__shots-note {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--faint);
}

/* One per row below the two-column breakpoint. The drawings carry small
   printed wording, so they get more height on a phone, not less: a shrunk
   illustration of some text is worth nothing. */
/* One per row below the two-column breakpoint, and the figure steps back out
   of the numbered list's indent to claim the full width of the panel. On a
   phone the illustration is the whole point of the step, and the printed
   wording on a shrunk drawing is unreadable, so every pixel of width counts:
   the padding goes down and the height cap goes up rather than the reverse. */
@media (max-width: 640px) {
    .film-id__shots {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-left: -18px;             /* cancels .film-id__steps padding-left */
        margin-right: -2px;
    }
    .film-id__shot { padding: 10px; }
    .film-id__shot img { max-width: 100%; max-height: 440px; }
}

/* --------------------------------------------------------------------------
   Film name search, inside step 3 of the identification guide.
   
   Sits above the printed stock lists and is styled to read as a tool rather
   than as more prose: a labelled field, then results that answer in one line
   each. Results are keyboard reachable and the container is aria-live, so a
   screen reader hears the answer without hunting for it.
   -------------------------------------------------------------------------- */

.film-search {
    margin: 14px 0 20px;
}

.film-search__label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
}

.film-search__field { position: relative; }

.film-search__input {
    width: 100%;
    padding: 11px 13px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    background: var(--field-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.film-search__input:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
    border-color: var(--blue);
}

/* The browser's own clear button is a native affordance worth keeping, but it
   inherits none of the field's colours in dark mode. */
.film-search__input::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.6); }

/* A quiet pulse on the field rather than a spinner: the request is one small
   query and a spinner would flash for longer than the wait. */
.film-search.is-loading .film-search__input { border-color: var(--blue); }

.film-search__results:empty { display: none; }

.film-search__msg {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--faint);
}

.film-search__list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.film-search__hit {
    display: grid;
    gap: 6px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.film-search__hit-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.film-search__hit-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}

.film-search__hit-process {
    flex: none;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blue);
    border: 1px solid var(--line);
    border-radius: 3px;
}

/* A process we cannot run today. Still named, because it is the truth about
   their film, but visibly not an instruction to go and pick it. */
.film-search__hit-process--ask {
    color: var(--faint);
    border-style: dashed;
}

.film-search__hit-meta {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--faint);
}

.film-search__use {
    justify-self: start;
    margin-top: 2px;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blue);
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    cursor: pointer;
}

.film-search__use:hover { color: var(--ink); }

.film-search__use:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .film-search { margin-left: -18px; }      /* matches .film-id__shots */
    .film-search__hit-main { gap: 6px; }
}

/* --------------------------------------------------------------------------
   Adding more than one kind of film in a single order.
   
   The hint sits under the Add button from the start, because the problem it
   solves is that nobody knew a second film was allowed. The list appears only
   once something is in the order, and is the confirmation that used to be the
   drawer: same evidence, without covering the configurator you are about to
   use again.
   -------------------------------------------------------------------------- */

.cfg-multi {
    margin: 14px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}

.cfg-multi[hidden] { display: none; }

.cfg-multi__title {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
}

.cfg-multi__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.cfg-multi__line {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
}

/* Removing a line. Quiet until wanted, and it turns red rather than growing,
   so the row does not reflow under the pointer on the way to clicking it. */
.cfg-multi__remove {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--faint);
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.cfg-multi__remove:hover { color: var(--red); border-color: var(--line); }
.cfg-multi__remove[disabled] { opacity: 0.4; cursor: progress; }

.cfg-multi__remove:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
}

.cfg-multi__qty {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    font-variant-numeric: tabular-nums;
}

.cfg-multi__desc { color: var(--ink); }

.cfg-multi__price {
    font-variant-numeric: tabular-nums;
    color: var(--faint);
    white-space: nowrap;
}

.cfg-multi__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.cfg-multi__total {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.cfg-multi__go { flex: none; }

@media (max-width: 640px) {
    /* Quantity and remove keep their columns; the price drops under the
       description rather than squeezing it to nothing. */
    .cfg-multi__line { grid-template-columns: auto 1fr auto; }
    .cfg-multi__price { grid-column: 2; }
    .cfg-multi__remove { grid-column: 3; grid-row: 1; }
    .cfg-multi__go { width: 100%; }
}

/* --------------------------------------------------------------------------
   "Not sure what film you have?"; the modal.
   
   Replaces the open panel that used to sit between the configurator and the
   prices. Kept deliberately narrow: the opening view is a short choice, and a
   dialog that fills the screen to hold four lines reads as heavier than the
   decision it is asking for. The panel scrolls inside itself so the guide view,
   which is genuinely long, never scrolls the page behind it.
   -------------------------------------------------------------------------- */

.film-modal {
    position: fixed;
    inset: 0;
    /* Above the cookie consent bar (1200), which is the top of the existing
       stack. The 200 this started on collided with the cart drawer and left
       the consent bar painting over the dialog's own controls. */
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.film-modal[hidden] { display: none; }

.film-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 160ms ease;
}

.film-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 680px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    background: var(--panel-solid);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.film-modal.is-open .film-modal__scrim { opacity: 1; }

.film-modal.is-open .film-modal__panel {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .film-modal__scrim,
    .film-modal__panel { transition: none; }
    .film-modal__panel { transform: none; }
}

/* Sticky so the title and the way out stay reachable while reading the guide
   view, which is longer than the panel. */
.film-modal__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--panel-solid);
    border-bottom: 1px solid var(--line);
}

.film-modal__title {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: var(--ink);
}

.film-modal__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--faint);
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.film-modal__close:hover { color: var(--ink); border-color: var(--ink); }

.film-modal__close:focus-visible,
.film-modal__more:focus-visible,
.film-modal__back:focus-visible,
.film-format-guide__choice:focus-visible,
.film-pick__btn:focus-visible,
.cfg-help:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.film-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 18px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.film-modal__scroll-cue {
    position: absolute;
    z-index: 2;
    right: 1px;
    bottom: 1px;
    left: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 58px;
    padding: 24px 16px 9px;
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(to bottom, transparent, var(--panel-solid) 55%);
    pointer-events: none;
}

.film-modal__scroll-cue[hidden] { display: none; }
.film-modal__scroll-cue svg { flex: none; }

.film-modal__view > :first-child { margin-top: 0; }

.film-modal__lede {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--faint);
}

/* Opened about a roll whose size is already settled (the wizard always is),
   the guide drops its shape-matching step: offering to identify a format that
   is already identified is noise, and the selection would go nowhere. With
   one step gone the numbering goes too, and the lede that promised two steps
   swaps for the one that promises one. */
.film-modal__lede--known { display: none; }
.film-modal--fmt-known .film-modal__lede--full { display: none; }
.film-modal--fmt-known .film-modal__lede--known { display: block; }
.film-modal--fmt-known .film-format-guide { display: none; }
.film-modal--fmt-known .film-modal__stepnum { display: none; }

.film-modal__h {
    margin: 20px 0 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
}

.film-modal__body p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
}

/* Physical format comes first because it is the easiest fact to answer by
   sight. These are the same illustrations used by guided ordering, so the
   helper and the form never teach different silhouettes. */
.film-format-guide {
    margin: 0 0 14px;
}

.film-process-guide {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.film-process-guide > .film-modal__h {
    margin-bottom: 9px;
}

.film-format-guide__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
}

.film-format-guide__head .film-modal__h { margin: 0; }
.film-format-guide__head p {
    max-width: 42ch;
    margin: 0;
    color: var(--faint);
    font-size: 12.5px;
    line-height: 1.45;
    text-align: right;
}

.film-format-guide__choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.film-format-guide__choice {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-2);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.film-format-guide__choice:hover { border-color: var(--blue); }
.film-format-guide__choice[aria-pressed="true"] {
    border-color: var(--blue);
    background: var(--blue-tint);
    box-shadow: inset 0 0 0 1px var(--blue);
}

.film-format-guide__art {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
}

.film-format-guide__art img {
    display: block;
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.film-format-guide__choice strong {
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.2;
}

@media (max-width: 560px) {
    .film-format-guide__head { display: block; }
    .film-format-guide__head p { margin-top: 5px; text-align: left; }
    .film-format-guide__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .film-format-guide__choice {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 8px 5px 9px;
        text-align: center;
    }
    .film-format-guide__art,
    .film-format-guide__art img { width: 58px; height: 58px; }
    .film-format-guide__choice strong { font-size: 13px; }
}

/* ---- naming your own process ---- */

.film-pick {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.film-pick__btn {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 12px;
    width: 100%;
    padding: 11px 13px;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.film-pick__btn:hover { border-color: var(--blue); }

.film-pick__code {
    flex: none;
    min-width: 52px;
    padding: 3px 7px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: var(--blue);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 3px;
}

.film-pick__desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink);
}

/* ---- the two links out of the opening view ---- */

.film-modal__more,
.film-modal__back {
    display: inline-block;
    margin: 18px 0 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blue);
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    cursor: pointer;
}

.film-modal__back { margin: 0 0 18px; }

.film-modal__more:hover,
.film-modal__back:hover { color: var(--ink); }

.film-modal__fallback {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 13px !important;
    line-height: 1.55;
    color: var(--faint) !important;
}

/* The trigger, under the process chips in the configurator. */
.cfg-help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 13px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--blue);
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cfg-help svg { flex: none; }
.cfg-help:hover { border-color: var(--blue); }

/* Page cannot scroll behind an open dialog. */
body.has-film-modal { overflow: hidden; }

/* Inside the modal the illustrations are the guide view's payload, so they get
   the width; the search sits in a narrow panel and needs no negative margin. */
.film-modal .film-id__shots { margin-left: 0; margin-right: 0; }
.film-modal .film-search { margin-left: 0; }

@media (max-width: 640px) {
    .film-modal { padding: 0; align-items: flex-end; }

    /* Full width and anchored to the bottom: on a phone a centred card with
       margins wastes the only dimension the guide needs. */
    .film-modal__panel {
        max-width: none;
        max-height: 92vh;
        border-radius: var(--radius) var(--radius) 0 0;
        border-bottom: 0;
    }

    .film-modal__head { padding: 14px 16px; }
    .film-modal__body { padding: 14px 16px 24px; }
    .film-pick__btn { grid-template-columns: 1fr; gap: 6px; }
    .film-pick__code { justify-self: start; }
}

/* --------------------------------------------------------------------------
   The illustration card at the top of the film modal.
   
   The drawings used to sit behind a text link, which made the most useful thing
   in the guide the hardest to reach. They lead now: small, side by side, and
   the whole card is the button into the detailed view where they appear full
   size. A picture of where to look answers the question faster than the
   paragraph explaining it.
   -------------------------------------------------------------------------- */

.film-hint {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 14px;
    text-align: left;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.film-hint:hover { border-color: var(--blue); }

.film-hint__shots {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.film-hint__shots img {
    display: block;
    width: auto;
    height: 76px;
    max-width: 76px;
    object-fit: contain;
}

.film-hint__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.film-hint__text strong {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}

.film-hint__text span {
    font-size: 13px;
    line-height: 1.45;
    color: var(--faint);
}

@media (max-width: 480px) {
    .film-hint { gap: 12px; padding: 11px 12px; }
    .film-hint__shots img { height: 62px; max-width: 62px; }
    .film-hint__text strong { font-size: 14px; }
    .film-hint__text span { font-size: 12.5px; }
}

/* Retired with the <details> the guide used to live in: .film-id,
   .film-id__summary, .film-id__mark, .film-id__body, .film-id__lede,
   .film-id__steps, .film-id__marks and .film-id__fallback are no longer
   emitted by any template. Left in place for one pass rather than deleted
   blind, so the removal can be checked on its own. .film-id__shots,
   .film-id__shot and .film-id__stock* ARE still used, inside the modal. */

/* Removing a line from the drawer. Same control as the one in the configurator
   list, so the gesture is the same wherever the cart is shown. */
.cart-drawer__remove {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 6px;
    padding: 0;
    color: var(--faint);
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.cart-drawer__remove:hover { color: var(--red); border-color: var(--line); }
.cart-drawer__remove[disabled] { opacity: 0.4; cursor: progress; }

.cart-drawer__remove:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
}

/* Quantity nudges beside each line's count. "One fewer" exists for the
   double-pressed Add button: identical configs stack into one line, and until
   these arrived the only exit was deleting the whole line, wanted roll and
   all. Minus disables at one; removal stays the explicit cross beside it. */
.cart-drawer__qty {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cart-drawer__step {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: none;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.cart-drawer__step:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.cart-drawer__step:disabled { opacity: 0.35; cursor: default; }
.cart-drawer__step:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ---------------------------------------------------------------------------
 * The cart bar; a strip docked along the bottom that exists exactly when the
 * cart does.
 *
 * A bar rather than a pill so an add cannot be missed: it slides up the first
 * time something lands, flashes its "Added to cart" state and bumps the count
 * on every one after that. Compact on purpose; count, total, the way in.
 * It sits under the side drawer (z 120) and hides while the drawer is open,
 * since it would otherwise underline the very panel it opens. */
:root { --cart-bar-h: 54px; }

.cart-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    display: block;
    background: var(--panel-solid);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.14);
    color: var(--ink);
    text-decoration: none;
    transform: translateY(105%);
    transition: transform 0.28s ease;
}

.cart-bar.is-in { transform: none; }
.cart-bar:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }

.cart-bar__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 1180px;
    margin: 0 auto;
    min-height: var(--cart-bar-h);
    padding: 8px 20px calc(8px + env(safe-area-inset-bottom, 0px));
    font-weight: 700;
    font-size: 15px;
}

.cart-bar__media {
    position: relative;
    display: inline-flex;
    color: var(--blue);
}

.cart-bar__count {
    position: absolute;
    top: -7px;
    right: -10px;
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.cart-bar__total { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The confirmation. Hidden until the script flashes it after an add; sits in
   the middle so the total on its left and the way-on at the right hold still. */
.cart-bar__added {
    display: none;
    color: var(--blue);
    font-weight: 600;
    white-space: nowrap;
}

.cart-bar.is-added .cart-bar__added { display: inline; animation: cartbar-added 0.3s ease; }
.cart-bar.is-added .cart-bar__count { animation: cartbar-bump 0.3s ease; }

@keyframes cartbar-added {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes cartbar-bump {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.cart-bar__go {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
    white-space: nowrap;
}

.cart-bar__chev { font-size: 19px; line-height: 1; }
.cart-bar:hover .cart-bar__go { text-decoration: underline; }

/* The page has to make room, or the bar sits over its last lines; and the
   configurator's own sticky price bar has to come to rest above this one
   rather than beneath it. */
body.has-cart-bar { padding-bottom: calc(var(--cart-bar-h) + env(safe-area-inset-bottom, 0px)); }
body.has-cart-bar .cfg__bar { bottom: calc(var(--cart-bar-h) + env(safe-area-inset-bottom, 0px)); }

body.has-drawer-open .cart-bar { visibility: hidden; }
/* And never over the open navigation: the menu is the one surface that must
   outrank every piece of fixed site UI while it is up. */
html.nav-locked .cart-bar { visibility: hidden; }

@media (max-width: 480px) {
    .cart-bar__inner { gap: 10px; padding-left: 14px; padding-right: 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .cart-bar { transition: none; }
    .cart-bar.is-added .cart-bar__added,
    .cart-bar.is-added .cart-bar__count { animation: none; }
}

/* ---------------------------------------------------------------------------
 * The account offer; beside the checkout form, and again on the confirmation.
 *
 * Styled as an aside, deliberately. It is an offer, not a step: it carries the
 * blue rule and the blue wash the site already uses for "this is worth reading"
 * rather than the card treatment the form itself has, so nobody reads it as
 * something they have to get past before they can pay.
 *
 * The accent is --link, not --blue. They are the same colour on paper; on the
 * dark ground the brand blue fails contrast badly (which is why --link exists
 * at all), and a 3px rule and a set of icons drawn in it would go dim exactly
 * where the panel most needs to read as deliberate. The wash stays --blue-tint,
 * a translucent blue over whatever the surface is, so it warms on paper and
 * stays subtle on black rather than becoming a grey block.
 * ------------------------------------------------------------------------- */

.acct-offer {
    display: grid;
    gap: 14px;
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--link);
    border-radius: var(--radius);
    background: var(--blue-tint);
}

/* On the confirmation page it is the only thing on screen asking for anything,
   and it sits on the page ground rather than inside a panel, so it becomes a
   card in its own right. */
.acct-offer--done {
    margin: 1.5rem 0 0;
    padding: 22px 24px;
    background: var(--card);
    box-shadow: var(--shadow-soft);
}

.acct-offer__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.acct-offer__icon {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--link);
}

.acct-offer__headtext { min-width: 0; }

.acct-offer__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}

.acct-offer__lede {
    margin: 5px 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted);
}

.acct-offer__choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The open one reads as pressed. Without this the two buttons look identical
   whichever pane is showing, which is the sort of thing you only notice as a
   vague feeling that the page is not responding to you. */
.acct-offer__choice .btn.is-open {
    border-color: var(--link);
    color: var(--link);
}
.acct-offer__choice .btn--primary.is-open {
    background: var(--blue-deep);
    border-color: var(--blue-deep);
    color: #ffffff;
}

.acct-offer__pane {
    display: grid;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.acct-offer__panetitle {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.acct-offer__perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.acct-offer__perk {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--muted);
}

.acct-offer__icon--tick {
    width: 15px;
    height: 15px;
    margin-top: 4px;
    stroke-width: 2.2;
}

.acct-offer__form {
    display: grid;
    gap: 14px;
}

.acct-offer__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
}

.acct-offer__check input {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--blue);
    cursor: inherit;
}

.acct-offer__checknote {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted);
}

.acct-offer__foot {
    margin: 0;
    font-size: 0.85rem;
}

.acct-offer__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.acct-offer__link:hover { color: var(--link-hover); }

.acct-offer__done {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.acct-offer__done > div { min-width: 0; flex: 1 1 260px; }

/* Password reveal. The button is placed inside a wrapper around the input
   rather than in the .field grid itself: the field is a stack of label, input
   and hint rows, and an absolutely-positioned child of it centres on all three
   together, which puts the button over the hint. */
.acct-offer__pwwrap {
    position: relative;
    display: block;
}

.acct-offer__pwwrap .field__input { padding-right: 68px; }

.acct-offer__reveal {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    padding: 5px 8px;
    border: 0;
    border-radius: 3px;
    background: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}
.acct-offer__reveal:hover { color: var(--ink); }
.acct-offer__reveal:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
}

/* The one-line version on the payment step: a reminder and a way back, not a
   second copy of the panel. See pages/checkout.php for why it links rather
   than posting. */
.checkout-signin {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--link);
    border-radius: var(--radius);
    background: var(--blue-tint);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted);
}

.checkout-signin .acct-offer__icon {
    width: 19px;
    height: 19px;
    margin-top: 1px;
}

@media (max-width: 560px) {
    .acct-offer { padding: 14px 15px; }
    .acct-offer--done { padding: 18px 16px; }
    .acct-offer__choice .btn { flex: 1 1 auto; }
    .acct-offer .form-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * "Confirm your email address"; the account page prompt.
 *
 * Deliberately not styled as a warning. Nothing is wrong: the account works,
 * orders work, payment works. One thing is waiting, and a red banner over an
 * account that is functioning perfectly teaches people to ignore red banners.
 * So it takes the same blue rule the account offer uses for "worth reading".
 * ------------------------------------------------------------------------- */

.account-verify {
    display: grid;
    gap: 14px;
    justify-items: start;
    border-left: 3px solid var(--link);
    background: var(--blue-tint);
}

.account-verify__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.account-verify .account-panel__title { margin: 0; }
.account-verify .account-panel__intro { margin: 6px 0 0; }
.account-verify .account-panel__note { margin: 0; font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
 * "Send it in and we will price it after"; the unpriced submission.
 *
 * Given the same panel treatment as the configurator above it rather than being
 * set apart as a fallback. It is not a lesser route: for a 120 back with no
 * marking on it, it is the only honest one, and a section that looks like a
 * consolation prize would be read as one.
 * ------------------------------------------------------------------------- */

.sf {
    display: grid;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

/* Explanation and promise share the first row. The old layout stacked both
   paragraphs and the numbered list into the form's narrow left column, making
   customers read a wall of copy before the first control while half the panel
   stayed empty. */
.sf__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 28px 42px;
    align-items: start;
    padding: 26px 28px;
    background: var(--paper-2);
}

.sf__intro-copy { display: grid; gap: 13px; }

.sf__lede {
    margin: 0;
    max-width: 66ch;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--ink);
}

/* Supporting context, not a warning or a system notice. The intro already has
   its own surface, so a second tinted box and blue rule only add false urgency. */
.sf__visit {
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    background: none;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted);
}

/* Numbered because it genuinely is a sequence: send, we price, you decide.
   The one place on this page where a numbered list encodes something true. */
.sf__how {
    counter-reset: sf-how;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--ink);
}

.sf__how li {
    counter-increment: sf-how;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-solid);
}

.sf__how li::before {
    content: counter(sf-how, decimal-leading-zero);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue-tint);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--link);
}

.sf__form {
    display: grid;
    gap: 0;
    max-width: none;
    border-top: 1px solid var(--line);
}

.sf .form-alert { margin: 20px 28px 0; }

.sf__step {
    padding: 26px 28px 28px;
    border-bottom: 1px solid var(--line);
}

.sf__step-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.sf__step-index {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 24px;
    margin-top: 1px;
    border: 1px solid var(--blue);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--blue);
}

.sf__step-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.22rem;
    line-height: 1.15;
    color: var(--ink);
}

.sf__step-hint {
    margin: 4px 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--muted);
}

.sf__step-body { margin-left: 48px; }
.sf__form .ff-group { margin-bottom: 0; }

.sf__option-grid {
    display: grid;
    gap: 10px;
}

.sf__option-grid--service { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf__option-grid--intake { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sf__option-grid .ff-option {
    height: 100%;
    margin: 0;
    border-radius: var(--radius);
}

.sf__service-choice .ff-option { align-items: center; }

.sf__custom-option {
    grid-column: 1 / -1;
    border-style: dashed;
    background: var(--blue-tint);
}

.sf__request {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper-2);
}

.sf__request textarea {
    min-height: 140px;
    background: var(--panel-solid);
    line-height: 1.55;
    resize: vertical;
}

.sf__film-meta {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    max-width: none;
    margin-top: 18px;
}

.sf__format-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.sf__format-choice .field__label {
    display: block;
    width: 100%;
    padding: 0;
}

.sf__format-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.sf__format-option {
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    padding: 9px 10px;
    text-align: center;
}

.sf__format-option .cfg-chip__name {
    overflow-wrap: anywhere;
}

/* The identification guide already belongs to the film configurator; this is
   its missing doorway from the unpriced form. It is deliberately a helpful
   secondary card, not another primary CTA competing with submission. */
.sf__identify {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--blue-tint);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.sf__identify:hover { border-color: var(--blue); }
.sf__identify:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.sf__identify-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid var(--blue);
    border-radius: 50%;
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
}

.sf__identify-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sf__identify-copy strong { font-size: 0.9rem; line-height: 1.25; }
.sf__identify-copy span { font-size: 0.8rem; line-height: 1.35; color: var(--muted); }
.sf__identify-arrow { flex: 0 0 auto; margin-left: auto; color: var(--blue); }

.sf__identified {
    margin: 9px 0 0;
    padding: 9px 11px;
    border-left: 3px solid var(--blue);
    background: var(--blue-tint);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink);
}

.sf__intake-note {
    margin: 12px 0 0;
    padding-left: 12px;
    border-left: 2px solid var(--orange);
    line-height: 1.5;
}

.sf__contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.sf__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 14px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--field-bg);
}
.sf__identity-label {
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.sf__identity strong { color: var(--ink); }
.sf__identity > span:not(.sf__identity-label) { font-size: 0.86rem; color: var(--muted); }
.sf__identity-change { grid-column: 3; grid-row: 1 / span 2; align-self: center; }

.sf__finish {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
    gap: 24px;
    align-items: center;
    padding: 22px 28px 26px;
    background: var(--paper-2);
}

.sf__finish-consent { min-width: 0; }
.sf__finish .checkout-consent { margin: 0; }

.sf__actions {
    display: grid;
    gap: 8px;
    justify-items: end;
    text-align: right;
}

.sf__submit { justify-self: start; }

.sf__note {
    margin: 0;
    max-width: 44ch;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted);
}

@media (max-width: 900px) {
    .sf__intro { grid-template-columns: minmax(0, 1fr); }
    .sf__how { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sf__how li { grid-template-columns: 1fr; align-content: start; }
    .sf__option-grid--intake { grid-template-columns: minmax(0, 1fr); }
    .sf__contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf__contact-grid .field:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .sf__intro,
    .sf__step,
    .sf__finish { padding-left: 16px; padding-right: 16px; }
    .sf__how { grid-template-columns: minmax(0, 1fr); }
    .sf__how li { grid-template-columns: 30px minmax(0, 1fr); }
    .sf__step-body { margin-left: 0; }
    .sf__option-grid--service,
    .sf__form .form-row,
    .sf__contact-grid { grid-template-columns: minmax(0, 1fr); }
    .sf__format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf__format-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .sf__contact-grid .field:last-child { grid-column: auto; }
    .sf__identity { grid-template-columns: minmax(0, 1fr); }
    .sf__identity-label,
    .sf__identity-change { grid-column: 1; grid-row: auto; }
    .sf__identity-change { justify-self: start; margin-top: 4px; }
    .sf__finish { grid-template-columns: minmax(0, 1fr); }
    .sf__actions { justify-items: stretch; text-align: left; }
    .sf__submit { justify-self: stretch; text-align: center; }
}

/* ---------------------------------------------------------------------------
 * Guided mode; one question at a time.
 *
 * The same controls the full form uses, shown alone. So nothing here restyles a
 * chip or a stepper: it only removes the surrounding block's chrome, which was
 * built to separate five questions from each other and has nothing to separate
 * when there is one.
 * ------------------------------------------------------------------------- */

.cfg-wiz {
    display: grid;
    gap: 10px;
    margin: 0 0 22px;
}

.cfg-wiz__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cfg-wiz__count {
    flex: none;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.cfg-wiz__track {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}

.cfg-wiz__fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--link);
    transition: width 260ms ease;
}

.cfg-wiz__title {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--ink);
    text-wrap: balance;
}

.cfg-wiz__hint {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--muted);
    max-width: 56ch;
}

/* One step can now ask more than one thing about one size -- how many, what
   kind, anything unusual -- so the slot is a stack rather than a single
   control. */
.cfg-wiz__slot {
    display: grid;
    gap: 20px;
}
.cfg-wiz__slot:empty { display: none; }

/* ---- a step about one size --------------------------------------------- */

/* ---- the film step as a workspace --------------------------------------
   Two columns on desktop: the identification cards take the wide left side,
   because naming the film is the decision; the photograph and the quantity
   share one bordered panel on the right, because "which film" and "how much
   of it" are one thought about one object. Physical oddities run underneath
   as a full-width strip. The point of all of it is that the photograph works
   for a living instead of floating between the questions. */

.cfg-wiz__filmwork {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px 30px;
    align-items: start;
}

.cfg-wiz__filmmain {
    display: grid;
    gap: 20px;
    min-width: 0;
}

/* Scan-only asks nothing on the left, so the panel lies down into one
   horizontal card rather than guarding an empty column. */
.cfg-wiz__filmwork--bare { grid-template-columns: minmax(0, 1fr); }
.cfg-wiz__filmwork--bare .cfg-wiz__filmpanel {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: center;
    max-width: 620px;
}
.cfg-wiz__filmwork--bare .cfg-wiz__filmhero {
    height: 100%;
    min-height: 150px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
}
/* In the horizontal card the hero has no fixed height, so max-height: 100%
   resolves against nothing and the photograph sets the row at its natural
   size. An explicit cap keeps the card a card. */
.cfg-wiz__filmwork--bare .cfg-wiz__filmhero img { max-height: 170px; }

/* The summary panel: photograph above, quantity below, one border around
   both. Deliberately no caption -- the step heading has already said
   "Your 35mm", and the image beside the number explains the pairing better
   than another label would. */
.cfg-wiz__filmpanel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
}

.cfg-wiz__filmhero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    padding: 16px;
    background:
        radial-gradient(ellipse at 50% 45%, var(--film-stage-glow), transparent 68%),
        var(--film-stage);
    border-bottom: 1px solid var(--line);
}
.cfg-wiz__filmhero img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px var(--film-stage-shadow));
}

.cfg-wiz__filmpanel .cfg-wiz__block--qty { padding: 14px 16px 16px; }

/* Five or six kinds make a balanced grid in the wide column, not one long
   ribbon or a tower of cards. Six tracks rather than three columns, so an odd
   count can still fill its rows: six cards sit 3 + 3 (each spanning two
   tracks), and with five the last two widen to three tracks each -- 3 + 2
   with no empty cell staring back. The :nth-child pair below is that one
   arithmetic fact about a five-card grid, not layout-by-position. */
.cfg-wiz__filmmain .cfg-wiz__choice--proc {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}
.cfg-wiz__filmmain .cfg-wiz__choice--proc > .cfg-wiz__opt { grid-column: span 2; }
.cfg-wiz__filmmain .cfg-wiz__choice--proc > .cfg-wiz__opt:nth-child(4):nth-last-child(2),
.cfg-wiz__filmmain .cfg-wiz__choice--proc > .cfg-wiz__opt:nth-child(5):last-child {
    grid-column: span 3;
}

/* The physical strip: label and hint on the left, the toggles on the right,
   ruled off from the workspace because it is an afterthought by design. */
.cfg-wiz__block--physical {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label chips"
        "hint  chips";
    column-gap: 28px;
    row-gap: 2px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.cfg-wiz__block--physical .cfg-wiz__blocklabel { grid-area: label; align-self: end; }
.cfg-wiz__block--physical .cfg-wiz__blockhint  { grid-area: hint;  align-self: start; }
.cfg-wiz__block--physical .cfg-chips           { grid-area: chips; margin-top: 0; }

@media (max-width: 880px) {
    /* One column, summary card first: on a phone the photograph and the
       count become a compact horizontal card, and the identification grid
       follows. The photograph stays secondary to the controls. */
    .cfg-wiz__filmwork { grid-template-columns: minmax(0, 1fr); gap: 16px; }

    .cfg-wiz__filmpanel,
    .cfg-wiz__filmwork--bare .cfg-wiz__filmpanel {
        order: -1;
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        align-items: center;
        max-width: none;
    }
    .cfg-wiz__filmhero,
    .cfg-wiz__filmwork--bare .cfg-wiz__filmhero {
        height: 100%;
        min-height: 112px;
        padding: 10px;
        border-bottom: 0;
        border-right: 1px solid var(--line);
    }
    .cfg-wiz__filmhero img,
    .cfg-wiz__filmwork--bare .cfg-wiz__filmhero img { max-height: 110px; }
    .cfg-wiz__filmpanel .cfg-wiz__block--qty { padding: 12px 14px; }

    .cfg-wiz__filmmain .cfg-wiz__choice--proc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Every desktop span reset by NAME. The plain `> .cfg-wiz__opt` reset
       loses on specificity to the two :nth-child span-3 selectors above, so
       cards four and five kept span 3 inside a two-column grid -- implicit
       tracks appeared, and the measured columns came out `0px 0px 288px`
       with 34px cards overlapping. Same selectors, inside the later media
       block, so nothing survives on a technicality. */
    .cfg-wiz__filmmain .cfg-wiz__choice--proc > .cfg-wiz__opt,
    .cfg-wiz__filmmain .cfg-wiz__choice--proc > .cfg-wiz__opt:nth-child(4):nth-last-child(2),
    .cfg-wiz__filmmain .cfg-wiz__choice--proc > .cfg-wiz__opt:nth-child(5):last-child {
        grid-column: auto;
        min-width: 0;
    }
    /* An odd card out spans the row, so "I am not sure" reads as deliberate
       rather than stranded. After the resets, so it wins on order. */
    .cfg-wiz__filmmain .cfg-wiz__choice--proc > .cfg-wiz__opt:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .cfg-wiz__block--physical {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "label" "hint" "chips";
    }
    .cfg-wiz__block--physical .cfg-chips { margin-top: 8px; }
}

@media (max-width: 350px) {
    .cfg-wiz__filmmain .cfg-wiz__choice--proc { grid-template-columns: minmax(0, 1fr); }
    .cfg-wiz__filmmain .cfg-wiz__choice--proc > .cfg-wiz__opt,
    .cfg-wiz__filmmain .cfg-wiz__choice--proc > .cfg-wiz__opt:nth-child(4):nth-last-child(2),
    .cfg-wiz__filmmain .cfg-wiz__choice--proc > .cfg-wiz__opt:nth-child(5):last-child,
    .cfg-wiz__filmmain .cfg-wiz__choice--proc > .cfg-wiz__opt:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* Each thing the step asks. A label rather than a heading, because the heading
   is the step's own title and two levels of heading inside one question reads
   as two questions. */
.cfg-wiz__block { display: grid; gap: 2px; }

.cfg-wiz__blocklabel {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}
.cfg-wiz__blockhint {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted);
    max-width: 56ch;
}
.cfg-wiz__block .cfg-wiz__choice,
.cfg-wiz__block .cfg-chips { margin-top: 8px; }

/* A number, not a field to write an address in. Left to its own devices the
   stepper filled the panel and put a single digit in the middle of it. */
.cfg-wiz__block > .cfg-stepper--lg { max-width: 190px; }
.cfg-wiz__block .cfg-wiz__link { margin-top: 8px; justify-self: start; }

/* ---- more than one kind within one size -------------------------------- */

.cfg-wiz__split {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.cfg-wiz__splitrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--field-bg);
}
.cfg-wiz__splitname {
    flex: 1 1 auto;      /* hugs its badge; the stepper stays on the far edge */
    font-size: 0.95rem;
    color: var(--ink);
}
.cfg-wiz__splitrow .cfg-stepper--lg { margin: 0; flex: 0 0 auto; }

/* The reconciliation. Stated whichever way it comes out, because "all three
   accounted for" is the confirmation that makes the running count worth
   reading at all. */
.cfg-wiz__splitcount {
    margin: 10px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.cfg-wiz__splitcount.is-short { color: var(--red); }

/* ---- the running total -------------------------------------------------- */

/* Guided mode does not use the configurator's price bar: that bar shows what
   the form is holding, and the form holds one line while a guided pass can
   describe four. */
.cfg-wiz__total {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}
.cfg-wiz__totallabel {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.cfg-wiz__totalvalue {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--link);
    font-variant-numeric: tabular-nums;
}

.cfg-wiz__nav {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 6px;
}
.cfg-wiz__next { margin-left: auto; }
.cfg-wiz__next.is-busy { opacity: 0.6; pointer-events: none; }

.cfg-wiz__note {
    margin: 0;
    font-size: 0.9rem;
    color: var(--red);
}

/* The two-answer questions. Same card chip as the service choice, so a choice
   made here and a choice made there look like the same kind of act. */
.cfg-wiz__choice { margin: 4px 0 0; }
.cfg-wiz__opt { cursor: pointer; text-align: left; }
.cfg-wiz__opt:hover { border-color: var(--link); }

/* The opening question's cards carry the service glyphs -- the same drawings
   the full form puts beside these names, sized up and given a tile, because
   here they are doing the fast half of the explaining. The tile keeps the
   three glyphs the same visual weight even though the drawings themselves
   are different shapes. */
.cfg-wiz__svcicon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: calc(var(--radius) - 2px);
    background: var(--blue-tint);
    color: var(--link);
}
.cfg-wiz__svcicon svg {
    width: 30px;
    height: 30px;
}
.cfg-wiz__opt.is-chosen .cfg-wiz__svcicon {
    background: var(--blue);
    /* Literal white, like .btn--primary: --paper is near-black in dark mode,
       which would sink the glyph into the blue. */
    color: #ffffff;
}

/* Room for the tile: these three cards read as icon + a short paragraph. */
.cfg-wiz__choice--svc .cfg-wiz__opt {
    gap: 14px;
    align-items: center;
}

/* ---- the kind question, dressed as the box it is asking about ----------
   Film boxes print the process code in a small rectangle -- "C-41" on every
   colour negative box, "E-6" on slide film -- and the customer answering this
   question is holding one. So each card leads with that code in that
   rectangle, at a size you match by eye, and the words underneath become the
   caption rather than the content. */
.cfg-wiz__choice--proc .cfg-wiz__opt {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.cfg-wiz__proccode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 7px 12px;
    border: 2px solid var(--ink);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--ink);
    background: var(--paper);
}

.cfg-wiz__opt.is-chosen .cfg-wiz__proccode {
    border-color: var(--link);
    color: var(--link);
}

/* "A mix of these": two markings overlapping, because that is what the answer
   means. Drawn, not written -- MIX is not printed on any box. */
.cfg-wiz__proccode--mix {
    position: relative;
    border: 0;
    padding: 7px 0;
    min-width: 64px;
    background: none;
}
.cfg-wiz__proccode--mix i {
    display: block;
    width: 34px;
    height: 26px;
    border: 2px solid var(--ink);
    border-radius: 4px;
    background: var(--paper);
}
.cfg-wiz__proccode--mix i + i {
    margin-left: -14px;
    transform: translateY(5px);
}
.cfg-wiz__opt.is-chosen .cfg-wiz__proccode--mix i { border-color: var(--link); }

/* The same marking, small, labelling each row of the split. */
.cfg-wiz__splitrow .cfg-wiz__proccode {
    min-width: 52px;
    padding: 4px 8px;
    font-size: 0.85rem;
    flex: 0 0 auto;
}

@media (max-width: 560px) {
    .cfg-wiz__proccode { min-width: 56px; font-size: 0.95rem; }
}

@media (max-width: 560px) {
    .cfg-wiz__svcicon { width: 44px; height: 44px; }
    .cfg-wiz__svcicon svg { width: 26px; height: 26px; }
}

.cfg-stepper--lg { margin: 4px 0 0; }
.cfg-stepper--lg .cfg-stepper__input { font-size: 1.15rem; }

.cfg-wiz__left {
    margin: 8px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.cfg-wiz__done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.cfg-wiz__donetext { margin: 0; flex: 1 1 100%; color: var(--muted); }

/* ---------------------------------------------------------------------------
 * The two ways in, offered before anything else.
 *
 * This replaced a small underlined link at the BOTTOM of the panel saying
 * "show all options at once". Somebody who has shot film for twenty years would
 * work through the whole guided flow without ever learning the form existed,
 * because the only mention of it sat below the price, past the point they had
 * already finished. An alternative nobody can see is not an alternative.
 *
 * Presented as a choice rather than a toggle: both named, both explained in a
 * line, the active one unmistakable. Guided remains the default because the
 * page is written for somebody holding their first roll.
 * ------------------------------------------------------------------------- */

.cfg-modes {
    display: grid;
    /* Three ways in, equal weight: guided, the full form, and sending the film
       without configuring anything. The third is a real route, not a footnote
       under the page, which is exactly the mistake the mode chooser was built
       to fix for the form. */
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 0 22px;
}

.cfg-modes__heading {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.15;
    color: var(--ink);
}

/* Three across needs real width; below it the notes wrap into ribbons. */
@media (max-width: 760px) {
    .cfg-modes { grid-template-columns: 1fr; gap: 8px; }
}

/* Once answered, the method chooser becomes a compact reversible summary. */
.cfg-modes-mini {
    display: none;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.cfg-modes-mini__label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.cfg--started .cfg-modes { display: none; }
.cfg--started .cfg-modes-mini { display: flex; }

/* On the initial method step, no service or form controls compete with the
   three routes. Direct ?mode= links skip this class and enter their route. */
.cfg--choosing .cfg-wiz,
.cfg--choosing .cfg__fields,
.cfg--choosing .cfg__bar,
.cfg--choosing .cfg__note,
.cfg--choosing .cfg-multi,
.cfg--choosing .cfg__multi-hint { display: none; }

/* In send mode the configurator's own machinery leaves the stage: the panel
   keeps only the chooser, and the send-film section right below it becomes
   the content. Display, not [hidden], because the wizard sets hidden on these
   for its own reasons and the two must not fight. */
.cfg--send .cfg__fields,
.cfg--send .cfg__bar,
.cfg--send .cfg__note,
.cfg--send .cfg-multi { display: none; }

.cfg-modes__opt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.cfg-modes__opt:hover { border-color: var(--link); }
.cfg-modes__opt:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.cfg-modes__opt.is-active {
    border-color: var(--link);
    box-shadow: inset 0 0 0 1px var(--link);
    background: var(--blue-tint);
    cursor: default;
}

.cfg-modes__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}
.cfg-modes__opt.is-active .cfg-modes__title { color: var(--link); }

.cfg-modes__note {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--muted);
}

.cfg-draft-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 18px;
    margin: -6px 0 18px;
    padding: 10px 13px;
    border-left: 3px solid var(--link);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--blue-tint);
    font-size: 0.88rem;
    color: var(--ink);
}

@media (max-width: 560px) {
    .cfg-modes { grid-template-columns: 1fr; gap: 8px; }
    .cfg-modes__opt { padding: 11px 13px; }
}

/* The nav half, below the fields, ruled off from the questions so Back and
   Next read as the frame of the step rather than another row of it. */
.cfg-wiz--foot {
    margin: 0;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

/* In guided mode the block headings and the two-column film row are describing
   a layout that is not on screen, and the rule that separated one block from
   the next has nothing left to separate. */
.cfg--wizard .cfg-step__head { display: none; }
.cfg--wizard .cfg-step {
    margin: 0;
    padding-top: 0;
    border-top: 0;
}
.cfg--wizard .cfg-pair { display: block; }
.cfg--wizard .cfg-label { display: none; }
.cfg--wizard .cfg-optgroup > .cfg-label { display: none; }

/* The bar belongs to the full form and stays down in guided mode: it shows the
   price of the one line the form is holding, and a guided pass can describe
   several. The running total lives in the wizard's own footer instead. Kept
   unpinned so that nothing sticky is left over if it is ever shown here. */
.cfg--wizard .cfg__bar { position: static; }

/* Arrived here from "I am not sure what I have". A moment of emphasis so the
   section they were sent to is obviously the one that answered them. */
#send-film.is-called .sf {
    border-color: var(--link);
    box-shadow: 0 0 0 3px rgba(0, 95, 151, 0.12);
}

@media (max-width: 560px) {
    .cfg-wiz__title { font-size: 1.15rem; }
    .cfg-wiz__nav .btn { flex: 1 1 auto; justify-content: center; }
}

/* Came back from the identification guide none the wiser. Not styled as a
   failure: for a 120 back with no marking on it this is simply the right route,
   so it reads as the next step rather than as a consolation. */
.cfg-wiz__stuck {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.cfg-wiz__stucktext {
    flex: 1 1 100%;
    margin: 0 0 4px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink);
    max-width: 58ch;
}

/* What a second film group inherits, stated before anything is asked. */
.cfg-wiz__carried {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0 0;
    padding: 8px 12px;
    border-left: 2px solid var(--link);
    background: var(--blue-tint);
    border-radius: 0 4px 4px 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--muted);
}
.cfg-wiz__carriedtext { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------------------
 * Guided mode, second iteration: named stages, a pre-add review, and questions
 * that cannot be skipped by accident.
 *
 * The stage list replaces a numbered counter. The route genuinely changes shape
 * as you answer (a development-only order has no scan questions), so a total
 * computed up front had to move afterwards, and "7 of 8" becoming "5 of 5"
 * reads as a fault rather than as progress. Four named stages cannot move.
 * ------------------------------------------------------------------------- */

.cfg-wiz__stages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

.cfg-wiz__stage {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

/* The separator is drawn, not typed, so it never lands at the start of a
   wrapped row the way a literal character would. */
.cfg-wiz__stage + .cfg-wiz__stage::before {
    content: "";
    width: 14px;
    height: 1px;
    background: var(--line-strong);
}

.cfg-wiz__stage.is-done { color: var(--muted); }
.cfg-wiz__stage.is-here { color: var(--link); }

.cfg-wiz__substep {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--link);
}

.cfg-wiz__needs {
    margin-left: auto;
    margin-right: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.cfg-wiz__nav .cfg-wiz__next { margin-left: 0; }
.cfg-wiz__nav .cfg-wiz__back + .cfg-wiz__needs { margin-left: auto; }
.cfg-wiz__nav > .cfg-wiz__next:first-child,
.cfg-wiz__needs[hidden] + .cfg-wiz__next { margin-left: auto; }

/* A card the customer has actually chosen, as opposed to one merely
   pre-selected. The distinction is the whole point of requiring an answer. */
.cfg-wiz__opt.is-chosen {
    border-color: var(--link);
    box-shadow: inset 0 0 0 1px var(--link);
}

.cfg-wiz__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--link);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.cfg-wiz__link:hover { color: var(--link-hover); }

/* ---- the review, before anything reaches the cart ---------------------- */

.cfg-wiz__review {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--link);
    border-radius: var(--radius);
    background: var(--blue-tint);
}

.cfg-wiz__reviewlist {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink);
}
/* One row per cart line, priced. It used to be a plain list of sentences with
   a single total under it, which was honest while a guided pass was one line;
   a pass that adds three needs to show what each of the three costs, or the
   total is a number the customer has to take on trust. */
.cfg-wiz__reviewline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
}
.cfg-wiz__reviewdesc { min-width: 0; }
.cfg-wiz__reviewprice {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.cfg-wiz__reviewsvc { margin: 0; font-weight: 600; }
.cfg-wiz__reviewheading { margin: 0; font-weight: 600; color: var(--ink); }
.cfg-wiz__reviewscan { margin: 0; font-size: 0.92rem; color: var(--muted); }
.cfg-wiz__reviewsection {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.cfg-wiz__reviewtotal {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--link);
    font-variant-numeric: tabular-nums;
}
.cfg-wiz__reviewtotallabel {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.cfg-wiz__reviewactions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- and after the server has confirmed it ----------------------------- */

.cfg-wiz__addedlist {
    flex: 1 1 100%;
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cfg-wiz__addedline {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    font-size: 0.98rem;
}
.cfg-wiz__addedtotal {
    flex: 1 1 100%;
    margin: 4px 0 0;
    font-size: 0.95rem;
    color: var(--muted);
}
.cfg-wiz__addedprice {
    color: var(--link);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .cfg-wiz__needs { flex: 1 1 100%; margin: 0 0 6px; }
    .cfg-wiz__reviewactions .btn { flex: 1 1 auto; justify-content: center; }
}

.cfg-wiz__with-example {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}
.cfg-wiz__with-example > .cfg-wiz__opt { min-width: 0; }

/* A value the wizard filled in on the customer's behalf, marked briefly so it
   does not read as something they typed and forgot. */
.is-prefilled {
    animation: p35-prefill 2.6s ease-out;
}
.is-prefilled.ff-option { border-color: var(--link); }
@keyframes p35-prefill {
    0%, 60% { box-shadow: 0 0 0 3px rgba(0, 95, 151, 0.18); }
    100%    { box-shadow: 0 0 0 3px rgba(0, 95, 151, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .is-prefilled { animation: none; box-shadow: 0 0 0 3px rgba(0, 95, 151, 0.18); }
}

/* ---------------------------------------------------------------------------
 * Picking a format by looking at it.
 *
 * Three photographs instead of three identical buttons reading 35mm, 120 and
 * 110. Somebody holding a roll can match it by eye, which is both faster and
 * surer than reading a number they may never have had a reason to learn. It is
 * also the question where a beginner is most likely to be wrong while feeling
 * certain, because "120" sounds like it ought to be bigger than "35".
 *
 * The images are cutouts on a transparent ground, and they sit on
 * --film-stage: pale blue-tinted paper in light mode, the film-dark ground in
 * dark. (They USED to sit on the un-themed --film-base, which put a black
 * rectangle in the middle of the light theme's warm paper -- reviewed and
 * rejected 2026-08-12.)
 * ------------------------------------------------------------------------- */

.cfg-wiz__choice--art {
    display: grid;
    /* Capped, not stretched. auto-fit with a 1fr maximum let three cards fill
       the whole panel on a wide screen, which left each roll floating in a
       great field of empty dark. These are product tiles: they want to be the
       size of the product. */
    /* Every real format is directly selectable. Three stable columns make the
       choices easy to compare and do not change size as selections change. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 780px;
    gap: 14px;
}

@media (max-width: 900px) {
    .cfg-wiz__choice--art { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cfg-wiz__choice--art .cfg-wiz__opt {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.cfg-wiz__art {
    display: flex;
    align-items: center;
    justify-content: center;
    /* One box for all three, so a tall canister and a flat cartridge are shown
       at something close to their real relative sizes rather than each being
       blown up to fill its own card. */
    height: 210px;
    padding: 18px;
    background:
        radial-gradient(ellipse at 50% 45%, var(--film-stage-glow), transparent 68%),
        var(--film-stage);
    border-bottom: 1px solid var(--line);
}

.cfg-wiz__art img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px var(--film-stage-shadow));
    transition: transform 220ms ease;
}

/* The label is the whole of the caption now: the photograph says what the
   thing looks like far better than a sentence did, so the sentence has gone
   and what is left reads as the face of a button. */
.cfg-wiz__choice--art .cfg-chip__body {
    padding: 13px 12px 15px;
    text-align: center;
    align-items: center;
}

.cfg-wiz__choice--art .cfg-chip__name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
    text-wrap: balance;
}

/* A small lift on hover, and a larger one once chosen. Enough to feel like
   picking something up, not enough to be a performance. */
.cfg-wiz__choice--art .cfg-wiz__opt:hover .cfg-wiz__art img { transform: translateY(-3px) scale(1.03); }
.cfg-wiz__choice--art .cfg-wiz__opt.is-chosen .cfg-wiz__art img { transform: translateY(-2px) scale(1.05); }

.cfg-wiz__choice--art .cfg-wiz__opt.is-chosen .cfg-wiz__art {
    background:
        radial-gradient(ellipse at 50% 45%, rgba(90, 169, 220, 0.22), transparent 70%),
        var(--film-stage);
}

@media (prefers-reduced-motion: reduce) {
    .cfg-wiz__art img { transition: none; }
    .cfg-wiz__choice--art .cfg-wiz__opt:hover .cfg-wiz__art img,
    .cfg-wiz__choice--art .cfg-wiz__opt.is-chosen .cfg-wiz__art img { transform: none; }
}

@media (max-width: 560px) {
    /* Two across rather than one: three formats side by side is the comparison
       being asked for, and a single column turns it into three separate
       questions. */
    .cfg-wiz__choice--art { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cfg-wiz__art { height: 150px; padding: 12px; }
    .cfg-wiz__choice--art .cfg-chip__name { font-size: 0.95rem; }
}

/* On a guided card the second line is a sentence, not a price.
 *
 * .cfg-chip__meta is mono with tabular figures because in the full form it
 * carries "+ 5.00 RON", where the digits want to line up. The wizard reuses the
 * same slot for an explanation -- "We develop your film and send you
 * downloadable scans" -- and a paragraph of tabular monospace reads like a
 * receipt. */
.cfg-wiz__opt .cfg-chip__meta {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.45;
    font-variant-numeric: normal;
    letter-spacing: 0;
    text-transform: none;
}

/* Chosen and focused must not look alike.
 *
 * The browser's default focus ring on a card is a blue outline, which on a
 * picture-card is indistinguishable from "this one is selected" -- and since
 * focus lands on the first option when a step opens, the first card appeared
 * chosen while the page said "choose one to continue". That is the same
 * contradiction the required-answers work removed, arriving by another route.
 *
 * So chosen carries a mark, not just a colour. A ring can be mistaken for
 * focus; a tick cannot be mistaken for anything.
 */
.cfg-wiz__opt { position: relative; }

.cfg-wiz__opt.is-chosen::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--link);
    /* The tick is drawn, not typed: a glyph would depend on a font that may not
       have loaded, and this sits over a photograph where a missing character
       would read as a blue dot with no meaning. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Focus sits OUTSIDE the card, where a selection ring never is. */
.cfg-wiz__opt:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 3px;
}

/* ---- profile photo -------------------------------------------------------
   The avatar panel on the account Profile view, and the crop dialog
   avatar-crop.js opens. The photo is always presented as a circle, here and
   everywhere else, which is exactly what the crop guide previews. */

.avatar-row { display: flex; align-items: center; gap: 20px; }

.avatar-circle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border: 1px solid var(--line);
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper-2);
}
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }

.avatar-circle__initials {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.avatar-actions { display: grid; gap: 8px; justify-items: start; }
.avatar-actions__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.avatar-status { margin: 0; font-size: 13px; color: var(--ink); min-height: 1.2em; }
.avatar-status--error { color: var(--red); }

.avatar-crop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 18px; }
.avatar-crop__scrim { position: absolute; inset: 0; background: rgba(10, 9, 7, 0.6); }

.avatar-crop__panel {
    position: relative;
    display: grid;
    gap: 10px;
    justify-items: center;
    max-width: 420px;
    width: 100%;
    padding: 26px 24px 20px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    background: var(--panel-solid);
    text-align: center;
}

.avatar-crop__title { margin: 0; font-family: var(--font-display); font-size: 22px; }
.avatar-crop__hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

.avatar-crop__stage { display: grid; place-items: center; }
.avatar-crop__stage canvas {
    display: block;
    max-width: 100%;
    background: var(--paper-2);
    cursor: grab;
    touch-action: none; /* the canvas pans and pinches; the page must not */
}
.avatar-crop__stage canvas:active { cursor: grabbing; }
.avatar-crop__stage canvas:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.avatar-crop__zoom { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; }
.avatar-crop__zoom input[type="range"] { flex: 1; accent-color: var(--blue); }
.avatar-crop__zoom-mark { font-size: 17px; line-height: 1; color: var(--muted); user-select: none; }

.avatar-crop__actions { display: flex; justify-content: center; gap: 10px; margin-top: 4px; }

/* The dialog is the whole interaction; stop the page scrolling under it. */
html.avatar-crop-open, html.avatar-crop-open body { overflow: hidden; }

/* ---- configurator example images -----------------------------------------
   "See example" on any upgrade/add-on chip that carries one, and the overlay
   that shows the photograph full size. The preview is a sibling of the
   selectable label so both remain valid, independent controls. */

.cfg-chip-with-example {
    position: relative;
    display: flex;
    min-width: 0;
}

.cfg-chip-with-example > .cfg-chip {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 7.5rem;
}

.cfg-chip__example {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0.7rem;
    transform: translateY(-50%);
    padding: 3px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--link);
    cursor: zoom-in;
    white-space: nowrap;
}
.cfg-chip__example:hover { border-color: var(--link); }
.cfg-chip__example:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (max-width: 520px) {
    .cfg-chip-with-example > .cfg-chip { padding-right: 0.9rem; padding-bottom: 2.4rem; }
    .cfg-chip__example { top: auto; right: 0.7rem; bottom: 0.55rem; transform: none; }
}

.cfg-exlb { position: fixed; inset: 0; z-index: 1100; }
.cfg-exlb__scrim { position: absolute; inset: 0; background: rgba(8, 8, 9, 0.92); }

/* An inspection stage, not a boxed dialog: the photograph floats on Lab
   Black at its own shape, the toolbar is a floating strip, and nothing
   imposes an aspect ratio. Deliberately one look in both themes — this is
   how photographs are judged. */
.cfg-exlb__stage { position: absolute; inset: 0; display: grid; }

.cfg-exlb__viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none; /* the viewer owns panning and double-tap */
}
.cfg-exlb__viewport:focus-visible { outline: 2px solid #5aa9dc; outline-offset: -4px; }

.cfg-exlb__img {
    max-width: min(96vw, 100%);
    max-height: min(88vh, 100%);
    object-fit: contain;
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.65);
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}
.cfg-exlb.is-loading .cfg-exlb__img { opacity: 0; }
.cfg-exlb__loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 26px;
    color: #f6f3ea;
    animation: cfg-exlb-pulse 1s ease-in-out infinite;
}
.cfg-exlb.is-loading .cfg-exlb__loading { display: flex; }
@keyframes cfg-exlb-pulse { 50% { opacity: 0.35; } }

/* 100%: true pixels, panned by transform; the img escapes the flexbox flow. */
.cfg-exlb.is-actual .cfg-exlb__viewport { display: block; }
.cfg-exlb.is-actual .cfg-exlb__img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    cursor: grab;
    will-change: transform;
    box-shadow: none;
}
.cfg-exlb.is-actual .cfg-exlb__img:active { cursor: grabbing; }

.cfg-exlb__bar {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    max-width: calc(100vw - 24px);
    padding: 8px 12px 8px 18px;
    border-radius: 999px;
    background: rgba(20, 18, 14, 0.88);
    border: 1px solid rgba(246, 243, 234, 0.16);
    backdrop-filter: blur(6px);
}
.cfg-exlb__title { margin: 0; font-size: 14.5px; font-weight: 600; color: #f6f3ea; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-exlb__level { font-size: 12.5px; font-variant-numeric: tabular-nums; color: rgba(246, 243, 234, 0.65); }
.cfg-exlb__zoom {
    padding: 5px 12px;
    border: 1px solid rgba(246, 243, 234, 0.3);
    border-radius: 999px;
    background: none;
    color: #f6f3ea;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: zoom-in;
}
.cfg-exlb.is-actual .cfg-exlb__zoom { cursor: zoom-out; background: rgba(246, 243, 234, 0.14); }
.cfg-exlb__zoom:hover { border-color: #f6f3ea; }
.cfg-exlb__zoom:focus-visible { outline: 2px solid #5aa9dc; outline-offset: 2px; }
.cfg-exlb__original { font-size: 12.5px; color: #8fc8ea; white-space: nowrap; }

.cfg-exlb__close {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: rgba(246, 243, 234, 0.12);
    color: #f6f3ea;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.cfg-exlb__close:hover { background: rgba(246, 243, 234, 0.24); }
.cfg-exlb__close:focus-visible { outline: 2px solid #5aa9dc; outline-offset: 2px; }

.cfg-exlb__hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    margin: 0;
    max-width: min(92vw, 560px);
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(20, 18, 14, 0.82);
    font-size: 12.5px;
    text-align: center;
    color: rgba(246, 243, 234, 0.78);
}

html.cfg-example-open,
html.cfg-example-open body { overflow: hidden; }

@media (max-width: 560px) {
    .cfg-exlb__bar { top: 8px; padding: 6px 10px 6px 14px; }
    .cfg-exlb__title { max-width: 52vw; }
    .cfg-exlb__original { display: none; } /* tiny screens: the gesture is the tool */
    .cfg-exlb__hint { bottom: 10px; }
}

/* ---- wizard review actions + resume ---------------------------------------
   Complete Order and Add another film live in the footer bar beside Back,
   where every other wizard decision was made. The resume card leads the
   method picker when an unfinished order is waiting. */

.cfg-wiz__navright { display: flex; gap: 10px; margin-left: auto; }
.cfg-wiz__navright[hidden] { display: none; }
.cfg-wiz__complete.is-busy { opacity: 0.6; pointer-events: none; }

/* The unfinished-order prompt: asked the moment somebody steps back into
   ordering with a draft waiting. Continue is primary; starting over is the
   quiet, deliberate option underneath. */
.cfg-resume { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 18px; }
.cfg-resume__scrim { position: absolute; inset: 0; background: rgba(10, 9, 7, 0.6); }
.cfg-resume__panel {
    position: relative;
    display: grid;
    gap: 10px;
    justify-items: center;
    max-width: 400px;
    padding: 28px 26px 18px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--blue);
    background: var(--panel-solid);
    text-align: center;
}
.cfg-resume__title { margin: 0; font-family: var(--font-display); font-size: 21px; }
.cfg-resume__body { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cfg-resume__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.cfg-resume__restart {
    padding: 6px;
    border: 0;
    background: none;
    font-size: 13px;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}
.cfg-resume__restart:hover { color: var(--red); }
.cfg-resume__restart:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }