/*
 * The store's design system, extracted from the Claude Design mockups
 * (Simrig webshop expansion — Checkout, Configurator, Order Status, Shop).
 *
 * A plain static file on purpose: served by Apache with no build step, versioned
 * by the ?v= stamp the layout appends. Tokens first — every page works from
 * these, so a retune here restyles the whole store.
 */

:root {
    /* Ink */
    --ink: #141414;
    --ink-soft: #4a4a4a;
    --ink-body: #5d5d5d;
    --ink-quiet: #6e6e6e;
    --ink-mute: #5d5d5d;
    --ink-faint: #9a9a9a;

    /* Surfaces */
    --paper: #fff;
    --paper-dim: #fafafa;
    --paper-head: #f8f8f8;

    /* Lines */
    --line: #e6e6e6;
    --line-soft: #f2f2f2;
    --line-card: #ededed;
    --line-strong: #cfcfcf;
    --frame: #dcd9d5;

    /* Amber — attention, money, "action needed" */
    --accent: #f5a623;
    --accent-ink: #b8770c;
    --accent-deep: #7a4f05;

    /* Quiet informational notes. */
    --note-bg: #fafafa;

    /* Radio and checkbox controls: black dots, whatever the card around them
       highlights with. */
    --radio-accent: #000000;
    --accent-bg: #fffaf0;
    --accent-line: #f0e2c4;

    /* The deeper amber tint of the standing banners and inline notes. */
    --note-bg: #fff8ea;
    --note-line: #f0dcae;
    --accent-tag: #fdf3e2;

    /* Green — good news */
    --ok: #157f3c;
    --ok-deep: #136433;
    --ok-bg: #e9f6ec;

    /* Brand slash */
    --brand-a: #e6007e;
    --brand-b: #e30613;

    --font: "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: ui-monospace, Menlo, Consolas, monospace;

    --shadow-sheet: 0 18px 40px -28px rgba(0, 0, 0, .35);

    /* The content width every band holds to. Same as the documentation's. */
    --sheet-w: 1180px;
}

/* ---- Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

/* Always reserve the scrollbar: short pages and long pages keep the same
   width, so navigating between them never shifts the layout sideways. */
html { overflow-y: scroll; }

/* An open modal owns the screen — the page behind it must not scroll. Covers
   the configurator overlay and the Stripe payment dialog alike. The gutter
   stays reserved, so freezing does not shift the layout either. */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }

body {
    margin: 0;
    background: var(--paper);
    font-family: var(--font);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover { color: var(--accent-ink); }

/* Obfuscated contact links (ContactGuard): --cg-w holds the decoded width so
   the label-to-address reveal doesn't reflow the line around it. */
a.cg { display: inline-block; min-width: var(--cg-w, auto); }

h1, h2, h3, p { margin: 0; }

/* ---- The bands ----------------------------------------------------------- */

/* The page is a stack of bands edge to edge — VAT bar, header, main, footer,
   plus the no-shipping notice when it shows — each painting its own background across the full viewport, with the
   content held to the sheet width inside it. Nothing floats on a canvas: the
   main band takes whatever height the footer leaves, so a short page still
   ends in the footer at the bottom of the window. Same construction as the
   documentation's .docs-band. */
.store-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.store-band > * {
    max-width: var(--sheet-w);
    margin: 0 auto;
}

/* Positioned: the phone drawer's panel hangs from this band's bottom edge. */
.store-band-header {
    position: relative;
    background: var(--paper-head);
    border-bottom: 1px solid var(--line);
}

/* Cart and checkout: the pages paint themselves #fbfbfb, and the band wears
   the same tone so it reaches the viewport edge. */
.store-band-main.is-dim { background: #fbfbfb; }

.store-band-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.store-band-main > main {
    flex: 1;
    width: 100%;
}

.store-band-footer {
    background: var(--paper-dim);
    border-top: 1px solid var(--line);
}

/* ---- Header -------------------------------------------------------------- */

/* A grid rather than a row of boxes: the three parts are placed explicitly, so
   the menu can be sent to a second row when the first gets tight without the
   others rearranging themselves around it. */
.store-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 24px;
    row-gap: 12px;
    /* Same horizontal inset as the page sections below, so the logo and the
       content left-align. */
    padding: 16px 40px;
}

.store-header > .brand { grid-column: 1; grid-row: 1; }
.store-header > .store-nav { grid-column: 2; grid-row: 1; justify-self: start; }
.store-header > .store-head-right { grid-column: 3; grid-row: 1; justify-self: end; }

/* The real logo, not a redrawing of it. */
.brand { display: flex; text-decoration: none; }

/* Matches the documentation theme's own .brand-logo, so the logo is the same
   size either side of the boundary. max-width defeats any inherited img rule. */
.brand-logo {
    flex: none;
    display: block;
    height: 36px;
    width: auto;
    max-width: none;
}

/* The three doors of the top row. One level of weight per row: the door we
   are behind is the bold one wearing the accent underline. */
.store-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.store-nav a {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    font: 600 16px/1 var(--font);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.store-nav a:hover { border-bottom-color: var(--line-strong); }

/* Where we are: bold, and the accent underline. */
.store-nav a[aria-current="page"] {
    font-weight: 700;
    border-bottom-color: var(--accent);
}

/* The burger drawer — the phone's alternative to the second row. A
   <details>: the summary is the burger, the panel drops below the header
   band, and the places inside are rows, the same list one under the other.
   Everything here is display:none until the 720px block turns it on. */
.store-drawer { display: none; position: static; }

.store-drawer > summary {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 6px 6px 6px 0;
    cursor: pointer;
}

.store-drawer > summary::-webkit-details-marker { display: none; }

.drawer-burger { position: relative; display: block; width: 24px; height: 24px; }

.drawer-burger i {
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--ink);
}

.drawer-burger i:nth-child(1) { top: 5px; }
.drawer-burger i:nth-child(2) { top: 11px; }
.drawer-burger i:nth-child(3) { top: 17px; }

/* Open, the burger is the ×. */
.store-drawer[open] .drawer-burger i:nth-child(1) { top: 11px; transform: rotate(45deg); }
.store-drawer[open] .drawer-burger i:nth-child(2) { opacity: 0; }
.store-drawer[open] .drawer-burger i:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* The panel hangs from the header band, full width, over the page. */
.store-drawer-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .35);
}

/* One row per place, tall enough for a thumb; the page we are on is the
   bold one wearing the accent edge. */
.store-drawer-panel a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line-card);
    font: 600 16px/1 var(--font);
    color: var(--ink);
    text-decoration: none;
}

.store-drawer-panel a:last-child { border-bottom: 0; }

.store-drawer-panel a[aria-current="page"] {
    font-weight: 700;
    border-left: 3px solid var(--accent);
    padding-left: 15px;
}

/* The second row — every place, on every page: the site's map under the
   three doors, plain text on white, the page we are on weighted. A phone
   folds it into the drawer. */
.store-band-subnav { background: var(--paper); border-bottom: 1px solid var(--line-card); }

.store-subnav {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 40px;
}

.store-subnav a {
    font: 400 14px/1 var(--font);
    color: var(--ink-body);
    text-decoration: none;
    white-space: nowrap;
}

.store-subnav a:hover { color: var(--ink); }

.store-subnav a[aria-current="page"] { font-weight: 600; color: var(--ink); }

/* Stretch, not center: the tallest control sets the row and the others adopt
   it — see .btn-cart, which drops its vertical padding so the count badge can
   never inflate it past the row, and carries the chip's height as a min-height
   instead, because checkout and the region panel render it without the chip. */
.store-head-right {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

/* ---- Footer -------------------------------------------------------------- */

.store-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    justify-content: space-between;
    padding: 22px 36px;
    font: 400 12px/1.6 var(--font);
    color: var(--ink-mute);
}

/* ---- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 13px 20px;
    font: 600 14px/1 var(--font);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    background: none;
}

/* The text input, formalized from the configurator's field: quiet gray at
   rest, the amber ring marking the active field on focus — never a yellow
   border at rest. .cfg-field and .co-field spell the same look with their
   own sizes; new fields wear this class instead of a new spelling. */
.input {
    padding: 13px 14px;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    font: 400 15px/1.4 var(--font);
    color: var(--ink);
}

.input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.input.is-invalid { border-color: #c0392b; }

.btn-primary {
    background: var(--ink);
    color: #fff;
}

.btn-primary:hover { color: var(--accent); background: #000; }
/* A door held shut — the cart's checkout while a line cannot be ordered. */
.btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }
.rail-note { margin: 10px 0 0; font: 400 13px/1.45 var(--font); color: var(--ink-quiet); }

.btn-secondary { border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { color: var(--accent-ink); }

.btn-ghost { border-color: var(--line-strong); color: #333; }
.btn-ghost:hover { color: var(--accent-ink); }

/* ---- Badges -------------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: 4px 10px;
    font: 700 11px/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.badge-warn { background: var(--accent-tag); color: var(--accent-deep); }

.badge-ok { background: var(--ok-bg); color: var(--ok-deep); }

/* ---- Building blocks ----------------------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--paper);
}

/* The amber "action needed" panel — How to pay, and its relatives. */
.panel-accent {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px;
    border: 2px solid var(--accent);
    background: var(--accent-bg);
}

/* Label-over-value cell, monospace value — payment details, references. */
.kv {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0; /* it is a <dl>, which browsers otherwise indent */
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--accent-line);
}

.kv dt {
    font: 600 11px/1 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0;
}

.kv dd {
    font: 600 15px/1.4 var(--mono);
    color: var(--ink);
    margin: 0;
}

.eyebrow {
    font: 600 12px/1 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* ---- Region chip ----------------------------------------------------------- */

/* Country, language and VAT display in one control, stating the answer the
   region panel exists to change. It replaced a black bar carrying a select of
   every country on earth — the panel owns that list now. */

.region-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    font: 400 15px/1 var(--font);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.region-chip:hover { border-color: var(--ink); }

.region-chip-code {
    font: 700 12px/1 var(--mono);
    letter-spacing: .06em;
}

.region-chip-rule {
    width: 1px;
    height: 13px;
    background: var(--line-strong);
}

.region-chip-vat { color: var(--ink-body); }

.region-chip-caret { color: var(--accent); font-size: 11px; }

/* ---- Standing banners ------------------------------------------------------ */

/* A standing condition about the visitor — we cannot ship where they are, or
   prices are business prices — worn above the chrome, not among the page's
   own messages: it was true before the page said anything. Mockup 1b's strip:
   cream band, amber label, and the one action that ends the condition on the
   right. */
.store-band-standing { background: var(--note-bg); border-bottom: 1px solid var(--note-line); }

.standing-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 40px;
}

.standing-banner-lead {
    display: flex;
    gap: 12px;
    margin: 0;
    font: 400 14px/1.5 var(--font);
    color: #3a3a3a;
}

.standing-banner-label {
    font: 700 13px/1.5 var(--font);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--accent-ink);
    white-space: nowrap;
}

/* One class for both shapes the action takes, so a link and a button in this
   strip read identically. */
.standing-banner-action {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: 600 14px/1.5 var(--font);
    color: var(--accent-ink);
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Checkout's step rail as a band: the band owns the white and the rule edge
   to edge; the rail inside is a normal band child held to the sheet, so it
   sheds the border .cfg-tabs carries for its in-card life. */
.store-band-rail { background: var(--paper); border-bottom: 1px solid var(--line-card); }

.store-band-rail .cfg-tabs { border-bottom: 0; }

/* The notice bands @yield('notices') mounts under the header: the band owns
   the color and the rule so both run edge to edge; the strip inside is a
   normal band child, held to the sheet. */
.store-band-ok { background: var(--ok-bg); border-bottom: 1px solid #cfe6d5; }

.store-band-warn { background: var(--accent-bg); border-bottom: 1px solid var(--accent-line); }

.store-band-problem { background: #fdecea; border-bottom: 1px solid #efc7c3; }

/* ---- Header cart badge ---------------------------------------------------- */

/* Sized to sit level with the region chip. No vertical padding — the 18px
   count badge must fit inside without inflating the row — so the chip's height
   (9px padding ×2 + 15px line + 1px border ×2) rides along as a min-height,
   which is what holds the row up on the pages that omit the chip. */
.btn-cart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    font-size: 15px;
    min-height: 35px;
}

.cart-count {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--ink);
    font: 700 12px/18px var(--font);
    text-align: center;
}

/* ---- Catalog --------------------------------------------------------------- */

/* Top padding matches .site-page and .home-section — crossing between the
   shop and the site must not make the first thing on screen jump. */
.catalog {
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding: 48px 40px;
}

.catalog-intro { display: flex; flex-direction: column; gap: 10px; }

.catalog-intro h1 { font: 700 34px/1.1 var(--font); }

.catalog-intro p {
    max-width: 640px;
    font: 400 15px/1.55 var(--font);
    color: var(--ink-body);
}

.motion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.motion-card, .accessory-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    background: var(--paper);
}

.card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: block;
}

.card-media.is-wide { aspect-ratio: 16 / 11; }

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, #f1f1f1 0 10px, #e7e7e7 10px 20px);
}

/* The main gallery image invites the zoom once the lightbox is wired. */
.gallery-main img.is-zoomable { cursor: zoom-in; }

.stock-flag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 9px;
    border-radius: 2px;
    background: var(--ok);
    color: #fff;
    font: 600 12px/1 var(--font);
}

.stock-flag.is-backorder { background: var(--accent-ink); }
.stock-flag.is-off { background: var(--ink-mute); }

.card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px 20px;
    flex: 1;
}

.card-grow { flex: 1; }

.card-body h3 { font: 700 19px/1.2 var(--font); }

.accessory-card .card-body h3 { font-size: 15px; line-height: 1.3; }

.card-sub {
    font: italic 400 14px/1.45 var(--font);
    color: var(--ink-quiet);
    margin-top: 4px;
}

.accessory-card .card-sub { font-size: 13px; }

.card-price { display: flex; flex-direction: column; gap: 2px; }

.card-price strong { font: 700 20px/1 var(--font); }

.card-price span { font: 400 12px/1.3 var(--font); color: var(--ink-mute); }

.card-bullets {
    margin: 0;
    padding: 4px 0 0;
    border-top: 1px solid #eee;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-bullets li {
    display: flex;
    gap: 8px;
    font: 400 13px/1.4 var(--font);
    color: var(--ink-soft);
}

.card-bullets li::before { content: "—"; color: var(--accent); }

.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.card-meta strong { font: 700 16px/1 var(--font); }

.stock-note { font: 600 11px/1 var(--font); color: var(--ok); }

.stock-note.is-backorder { color: #9a3a3a; }
.stock-note.is-off { color: var(--ink-mute); }

.card-actions { display: flex; gap: 8px; margin-top: 6px; }

.card-actions form { flex: 1; display: flex; }

/* Flexed and centered: when a translated label wraps the row taller, the
   shorter sibling's text stays vertically centered rather than top-hung. */
.card-actions .btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-actions .btn-ghost { flex: none; }

.accessories {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.accessories-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* Alone on a category page the section is the page: no divider against a
   motion grid that is not there. */
.accessories.is-page { border-top: 0; padding-top: 0; }

.accessories-head h1,
.accessories-head h2 { font: 700 28px/1.1 var(--font); }

.accessories-head p {
    font: 400 15px/1.5 var(--font);
    color: var(--ink-body);
    margin-top: 6px;
}

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    font: 400 13px/1 var(--font);
    color: #333;
    text-decoration: none;
}

.chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 600;
}

.accessory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ---- Product page ---------------------------------------------------------- */

/* Same first-element height as the catalog and the site pages: the crumb
   stands where their kickers do. */
.product-page {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 48px 40px;
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 40px;
    align-items: start;
}

.gallery { display: flex; flex-direction: column; gap: 12px; }

.gallery-main {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.gallery-main img, .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-main .media-placeholder { height: 100%; }

.thumb-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    display: block;
}

.thumb.is-selected { border: 2px solid var(--ink); }

.buybox {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 26px;
    border: 1px solid #e0e0e0;
    background: var(--paper);
}

.buybox-head { display: flex; flex-direction: column; gap: 8px; }

.buybox-head h1 { font: 700 32px/1.1 var(--font); }

.buy-flags { display: flex; align-items: center; gap: 10px; }

.stock-chip {
    padding: 4px 9px;
    border-radius: 2px;
    background: var(--ok);
    color: #fff;
    font: 600 12px/1 var(--font);
}

.stock-chip.is-backorder { background: var(--accent-ink); }

.stock-chip.is-off { background: var(--ink-mute); }

.buy-lead { font: 400 13px/1 var(--font); color: var(--ink-quiet); }

.buy-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ececec;
}

.buy-price strong { font: 700 30px/1 var(--font); }

.buy-price span { font: 400 13px/1 var(--font); color: var(--ink-quiet); }

.buy-form { display: flex; gap: 12px; align-items: stretch; }

.qty-field {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line-strong);
    padding: 0 12px;
    font: 400 13px/1 var(--font);
    color: var(--ink-quiet);
}

.qty-field input {
    width: 52px;
    border: 0;
    font: 600 15px/1 var(--font);
    text-align: center;
    outline: none;
}

.btn-buy { flex: 1; font-size: 16px; padding: 15px 10px; }

/* The save button is wrapped in a form, so the form takes the place the
   checkout link would hold and hands the full width down to its button. */
.cart-save { display: flex; }

.buy-note { font: 400 13px/1.5 var(--font); color: var(--ink-quiet); margin-top: -8px; }

/* Under the hero's sentence: what ships with the system and what does not. */
.buy-included { font: 400 13px/1.5 var(--font); color: var(--ink-quiet); }

.trust-list {
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid #ececec;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font: 400 13px/1.4 var(--font);
    color: var(--ink-soft);
}


.prose {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.prose p { font: 400 16px/1.65 var(--font); color: #3f3f3f; }

.prose h2 { font: 700 22px/1.2 var(--font); margin-top: 12px; }

.box-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.box-list li {
    display: flex;
    gap: 10px;
    font: 400 14px/1.5 var(--font);
    color: #3f3f3f;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line-soft);
}

.box-list strong { min-width: 32px; }

/* Mockup 1b: the in_the_box-tagged image beside the list. Without a shot the
   split is just the list, unchanged. */
.box-split.has-shot {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 20px;
    align-items: start;
}

.box-shot { width: 100%; display: block; border: 1px solid #e0e0e0; }

/* The portrait assembly film, sized by its own height so the split's first
   column takes exactly the width it needs. */
.product-video { height: 380px; width: auto; display: block; border-radius: 10px; }

/* The two flags under the words: a small mark, not a picture. The hairline
   keeps the Swedish flag's blue off the dim panel's grey. */
.tested-flags {
    display: block;
    width: 93px;
    height: auto;
    margin-top: 2px;
    border: 1px solid var(--line-card);
}

/* ---- Product page: reviews (1b) -------------------------------------------- */

.reviews { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; }

.reviews-head { display: flex; flex-direction: column; gap: 6px; }

.reviews-head h2 { font: 700 22px/1.2 var(--font); }

.reviews-head p { font: 400 14px/1.55 var(--font); color: var(--ink-body); text-wrap: pretty; max-width: 640px; }

.review-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ---- Product page: composed sections and the aside ------------------------ */

/* The lower half is a column of sections, with an aside beside it when the
   template supplies one. One class for the whole lower half: the sections
   run down it in a single column, under a rule that separates them from the
   buy box above. */
.product-body {
    display: flex;
    flex-direction: column;
    gap: 50px;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* The mounting cards keep the size they have in a column rather than growing
   into half-page squares. */
.product-body .home-mount-cards { grid-template-columns: repeat(2, minmax(0, 400px)); }

/* A measure, not a width: prose is unreadable across a full page, and every
   section on this page is prose or close enough — the card grids are sized
   to fit it rather than the other way round. */
.product-section { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }

.product-section h2 { font: 700 22px/1.2 var(--font); }

.product-section h2.is-lead { font-size: 24px; }

/* A section on its own dimmed panel, the way .home-section.is-dim reads on
   the marketing pages. */
.product-section.is-dim {
    padding: 28px;
    background: var(--paper-dim);
    border-radius: 10px;
}

/* Two columns where the left takes the width it needs and the right takes
   what is left: a media column beside its words. Declared after
   .product-section on purpose — a section is a stack by default and these
   two carry the same weight, so the one further down decides. The second
   column keeps the stack the section would have given it. */
.split-auto {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.split-auto > :last-child { display: flex; flex-direction: column; gap: 14px; }

/* Its even twin: two columns of the same width, for a pair of things that
   rank equally. Same reason it is declared here — a section is a stack
   until something further down the file says otherwise. */
.split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* 2a: the three numbers that matter, under the opening prose. */
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }

.stat-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--paper-dim); }

.stat-tile strong { font: 700 26px/1 var(--font); }

.stat-tile span { font: 400 13px/1.35 var(--font); color: var(--ink-quiet); }

/* 2a: the specification, a Markdown table in the copy slot, with its
   footnotes as the list after it. */
.prose table { width: 100%; border: 1px solid var(--line); border-collapse: collapse; }

.prose thead { display: none; }

.prose tbody tr:nth-child(even) { background: var(--paper-dim); }

.prose td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); font: 400 14px/1.45 var(--font); vertical-align: top; text-wrap: pretty; }

.prose td:first-child { width: 190px; font-weight: 600; color: #3f3f3f; }

.prose ol, .prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

.prose li { font: 400 14px/1.55 var(--font); color: var(--ink-body); }

.prose table + ol li { font-size: 12.5px; color: var(--ink-mute); }

/* The shared bands (supported simulators) sit in the column at the
   sections' scale, not the home page's. */
.product-section .home-section-head h2 { font-size: 22px; }

.product-section .home-section-head p { font-size: 14px; }

.product-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.aside-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border: 1px solid #e0e0e0;
    background: var(--paper);
}

.aside-card.is-dim { background: var(--paper-dim); border-color: var(--line-card); }

.aside-card h3 { font: 700 17px/1.2 var(--font); }

.aside-card h4 { margin: 0; font: 700 14px/1.3 var(--font); }

.aside-card p, .aside-card li { font: 400 13.5px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.aside-figure { display: block; width: 100%; height: auto; }

/* A titled paragraph inside a card; ruled ones stack like a list. */
.aside-block { display: flex; flex-direction: column; gap: 5px; }

.aside-block.is-ruled { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }

.aside-card .btn { align-self: flex-start; }

.aside-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 4px; }

.aside-link { font: 600 13.5px/1.3 var(--font); }

/* The guide rows, this page's own system on the accent bar. */
.guide-rows { display: flex; flex-direction: column; gap: 8px; }

.guide-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    background: var(--paper);
    border-left: 2px solid var(--line-strong);
}

.guide-row.is-this { border-left-color: var(--accent); }

.guide-row strong { font: 700 13px/1 var(--font); }

.guide-row span { font: 400 13px/1.5 var(--font); color: var(--ink-body); text-wrap: pretty; }

/* The FAQ: native disclosure, no script, the answers Markdown. */
.faq { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; border-top: 1px solid var(--line); }

.faq h2 { font: 700 22px/1.2 var(--font); }

.faq-list { display: flex; flex-direction: column; max-width: 760px; border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    font: 600 15px/1.4 var(--font);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after { content: '+'; flex: 0 0 auto; color: var(--ink-mute); font-weight: 400; }

.faq-item[open] summary::after { content: '−'; }

.faq-answer { display: flex; flex-direction: column; gap: 10px; padding: 0 0 16px; }

.faq-answer p, .faq-answer li { font: 400 14.5px/1.6 var(--font); color: var(--ink-body); }

.faq-more { font: 400 14px/1.5 var(--font); color: var(--ink-body); }

/* The card wears the news video card's manners: ink border on hover, and
   the shared .news-play plate (defined with the news article styles) that
   turns accent when the card is hovered. */
.review-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    background: var(--paper);
    text-decoration: none;
    color: inherit;
}

.review-card:hover { border-color: var(--ink); }

.review-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--ink);
    overflow: hidden;
}

.review-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.review-lang {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 3px 7px;
    background: var(--accent);
    color: var(--ink);
    font: 700 11px/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.review-body { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px; }

.review-channel { font: 700 14px/1.3 var(--font); }

.review-blurb { font: 400 13px/1.5 var(--font); color: var(--ink-body); text-wrap: pretty; }

/* ---- Cart page ------------------------------------------------------------- */

.cart-page {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    align-items: start;
    padding: 34px 40px 48px;
    background: #fbfbfb;
}

/* Page-level notices, in the strip the catalog's "Added to your cart" takes:
   first thing inside the page, across the full width of the grid. */
/* Rides in a notice band under the header, like the catalog's added strip. */
.cart-notice {
    padding: 12px 40px;
    font: 400 14px/1.5 var(--font);
    color: var(--accent-deep);
}

.cart-notice strong { display: block; font: 600 14px/1.4 var(--font); }
.cart-notice-abandon { margin-top: 6px; }

.cart-notice.is-problem { color: #7f1d1a; }

/* The base .cart-notice ink is the warn band's amber; the green "added"
   strip speaks in the ok band's own greens. */
.cart-notice.is-ok { color: #2c5b3c; }
.cart-notice.is-ok strong { color: var(--ok-deep); }

.cart-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    background: var(--paper);
    border: 1px solid var(--line);
}

.cart-empty { gap: 14px; align-items: flex-start; }

.cart-empty h1, .cart-head h1 { font: 700 32px/1.1 var(--font); }

.cart-empty p { font: 400 15px/1.5 var(--font); color: var(--ink-body); }

.cart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.cart-meta { font: 400 14px/1 var(--font); color: var(--ink-quiet); }

/* The cart list is the page, not a panel on it: the chrome comes from each
   item card instead. Scoped to the cart page — checkout reuses .cart-panel
   and keeps its frame. */
.cart-page .cart-panel {
    border: 0;
    padding: 0;
    background: transparent;
}

/* The 1f bundle cards — one bordered block per line. */

.bundle-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e2e2;
    background: var(--paper);
}

.bundle-top {
    display: flex;
    gap: 18px;
    padding: 20px;
    align-items: flex-start;
}

.bundle-media {
    width: 92px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid var(--line-card);
    flex: none;
}

.bundle-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bundle-media .media-placeholder { height: 100%; }

.bundle-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }

.bundle-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.bundle-head h3 { font: 700 19px/1.2 var(--font); }

.bundle-head strong { font: 700 19px/1 var(--font); white-space: nowrap; }

.line-sub { font: italic 400 14px/1.45 var(--font); color: var(--ink-quiet); }

.bundle-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* The line's name is the way back to its product page — a link, not dressed as one. */
.bundle-head h3 a { color: inherit; text-decoration: none; }
.bundle-head h3 a:hover { text-decoration: underline; }

/* View product / Remove wrap as one unit, never one on each side of a break,
   and always at the right edge — the auto margin holds on a wrapped line,
   where a flex spacer would not. */
.bundle-actions { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; margin-left: auto; }

.bundle-link, .link-danger { font: 400 13px/1 var(--font); }

.link-danger {
    background: none;
    border: 0;
    padding: 0;
    color: #9a3a3a;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.link-danger:hover { color: #7c2626; }

.stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    background: var(--ok-bg);
    font: 600 12px/1 var(--font);
    color: var(--ok-deep);
}

.stock-pill.is-backorder {
    background: var(--accent-tag);
    color: var(--accent-deep);
}

.stock-pill.is-off {
    background: var(--ink-mute);
    color: #fff;
}

/* Indented past the media, like the mockup: the details belong to the product. */
.bundle-lower {
    display: flex;
    flex-direction: column;
    padding: 0 20px 14px 130px;
}

.bundle-lower .line-config { margin-bottom: 12px; margin-top: 0; }

.box-expand summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
    font: 600 13px/1 var(--font);
    color: var(--ink-body);
    cursor: pointer;
    list-style: none;
}

.box-expand summary::-webkit-details-marker { display: none; }

.box-expand summary::after { content: "▼"; color: var(--accent); font-size: 11px; }

.box-expand[open] summary::after { content: "▲"; }

.box-expand-lines {
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
    font: italic 400 13px/1.7 var(--font);
    color: var(--ink-quiet);
}

/* Who put what in the box: a small upright heading per contributor. */
.box-expand-head {
    margin-top: 10px;
    font: 600 11px/1.6 var(--font);
    font-style: normal;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.box-expand-head:first-child { margin-top: 2px; }

/* The question an answer belongs to, quieter than the answer. */
.line-option-group { color: var(--ink-quiet); }

.line-config {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--paper-dim);
    border-left: 2px solid var(--accent);
}

.line-config-title {
    font: 600 11px/1 var(--font);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.line-option {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font: 400 13px/1.4 var(--font);
    color: #3f3f3f;
}

.line-config-note { font: 400 12px/1.45 var(--font); color: var(--ink-mute); }

.line-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    width: fit-content;
    background: var(--paper);
}

.line-qty button, .line-qty .qty-cap {
    padding: 0 11px;
    font: 400 16px/38px var(--font);
    color: var(--ink-body);
    background: none;
    border: 0;
    cursor: pointer;
}

.line-qty .qty-cap { color: var(--line-strong); cursor: default; }

.line-qty .qty-value {
    width: 30px;
    text-align: center;
    font: 600 14px/38px var(--font);
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
}

.line-price {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: right;
}

.line-price strong { font: 700 17px/1 var(--font); }

.line-price span { font: 400 12px/1.3 var(--font); color: var(--ink-mute); }

.line-remove button {
    background: none;
    border: 0;
    font: 400 18px/1 var(--font);
    color: var(--ink-faint);
    cursor: pointer;
    padding: 8px 4px 0;
}

.line-remove button:hover { color: #9a3a3a; }

.cart-foot { font: 600 14px/1 var(--font); padding-top: 4px; }

.cart-rail { display: flex; flex-direction: column; gap: 24px; }

.rail-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    background: var(--paper);
    border: 1px solid var(--line);
}

.rail-card h2 { font: 700 30px/1.1 var(--font); }

.rail-card h3 { font: 700 24px/1.1 var(--font); }

.rail-rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
}

.rail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font: 400 15px/1.3 var(--font);
}

.rail-row.is-total { font-weight: 700; }

/* The Documents card on the status page: one row per booked document —
   name and amount on the first line, its facts under the name, the
   download at the end. The card's own list, not the rail's, since a
   document has three things to say and a rail row holds two. */
.doc-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
}

.doc-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: baseline;
    font: 400 15px/1.3 var(--font);
}

.doc-row .doc-amount { font-variant-numeric: tabular-nums; }

.doc-row .doc-meta { grid-column: 1 / -1; }

.doc-row .doc-link { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }

.rail-trust {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
}

.rail-trust-title { font: 600 13px/1.3 var(--font); }

.rail-trust-body { font: 400 13px/1.45 var(--font); color: var(--ink-body); }

.rail-when {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 400 14px/1.5 var(--font);
    color: #3f3f3f;
}

/* ---- Configurator ----------------------------------------------------------- */

/* Standalone — the configurator and the region panel as pages — the card is a
   bordered panel behind the gutter every store page keeps, so its internal
   dividers end at an edge the eye can see rather than running the width of
   the sheet. The floating-card look belongs to the overlay, which strips the
   border and restores its own frame via .cfg-dialog. */
.cfg-page { background: var(--paper); padding: 34px 40px 48px; }

.cfg-card {
    background: var(--paper);
    border: 1px solid var(--line);
}

.cfg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 32px 20px;
    border-bottom: 1px solid #ececec;
}

.cfg-head h1 { font: 700 26px/1.1 var(--font); margin-top: 6px; }

.cfg-close {
    font: 400 22px/1 var(--font);
    color: var(--ink-mute);
    text-decoration: none;
    padding-top: 4px;
}

.cfg-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 32px;
    border-bottom: 1px solid #ececec;
    background: var(--paper);
}

.cfg-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 12px 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font: 400 14px/1 var(--font);
    color: var(--ink-faint);
    text-decoration: none;
    white-space: nowrap;
}

.cfg-tab-dot {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background: #e0e0e0;
    color: #fff;
    font: 700 12px/22px var(--font);
    text-align: center;
}

.cfg-tab.is-locked { opacity: .45; cursor: default; }

.cfg-tab.is-done { color: var(--ink-soft); font-weight: 600; }

.cfg-tab.is-done .cfg-tab-dot { background: var(--ink); }

.cfg-tab.is-current {
    color: var(--ink);
    font-weight: 700;
    border-bottom-color: var(--accent);
}

.cfg-tab.is-current .cfg-tab-dot { background: var(--accent); color: var(--ink); }

.cfg-grid {
    display: grid;
    grid-template-columns: 1fr 372px;
}

.cfg-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 32px 32px;
}

.cfg-error {
    padding: 12px 16px;
    background: #fdecec;
    color: #9a3a3a;
    font: 600 14px/1.4 var(--font);
}

/* The way forward when a rig doesn't fit the chosen system: the sibling
   systems that do, one button each, under the refusal banner. */
.cfg-rig-conflict {
    padding: 14px 16px;
    background: var(--note-bg);
    border: 1px solid var(--note-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.cfg-rig-conflict p { margin: 0; font: 400 14px/1.5 var(--font); color: #7a5b1f; }

.cfg-intro h2 { font: 700 30px/1.1 var(--font); }

.cfg-intro p {
    max-width: 560px;
    font: 400 15px/1.6 var(--font);
    color: var(--ink-body);
    margin-top: 8px;
}

.cfg-main form { display: flex; flex-direction: column; gap: 18px; }

/* Full width like the choice steps — a narrower text step reads as a
   different, lesser kind of question. */
.cfg-field { display: flex; flex-direction: column; gap: 7px; width: 100%; }

.cfg-field-error { font: 600 13px/1.4 var(--font); color: #b3261e; }

/* ---- The rig search (2a) --------------------------------------------------- */

.rig-search { position: relative; width: 100%; }

/* The matches sit in the flow under the field, not floated over the page:
   the configurator is a scrolling dialog, and a floated list is clipped at
   its edge the moment it is longer than the space left below the field.
   In the flow, the dialog grows and scrolls with the list instead. */
.rig-results {
    margin-top: 2px;
    background: var(--paper);
    border: 1px solid #d8d8d8;
    box-shadow: 0 22px 40px -24px rgba(0, 0, 0, .35);
}

.rig-results-header {
    padding: 9px 16px;
    font: 600 11px/1 var(--font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border-bottom: 1px solid #f0f0f0;
}

.rig-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid #f4f4f4;
    background: var(--paper);
    text-align: left;
    cursor: pointer;
}

.rig-result:hover, .rig-result:focus-visible { background: var(--paper-dim); }

.rig-result-body { display: flex; flex-direction: column; gap: 3px; }

.rig-result-name { font: 600 15px/1.2 var(--font); color: var(--ink); }

.rig-result-spec { font: 400 12px/1.3 var(--font); color: #6e6e6e; }

.rig-result-tag {
    font: 600 11px/1 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
}

.rig-result-tag.is-attention { color: var(--accent-ink); }

.rig-result-manual {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    background: var(--paper);
    font: 400 13px/1.4 var(--font);
    color: var(--ink);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rig-result-manual:hover { background: var(--paper-dim); }

/* The four common-rig cards. */
.rig-popular { display: flex; flex-direction: column; gap: 10px; }

.rig-popular-title {
    font: 600 12px/1 var(--font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.rig-popular-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rig-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid #d8d8d8;
    background: var(--paper);
    text-align: left;
    cursor: pointer;
}

.rig-card:hover, .rig-card:focus-visible {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.rig-card-name { font: 600 14px/1.25 var(--font); color: var(--ink); }

.rig-card-spec { font: 400 12px/1.45 var(--font); color: #6e6e6e; }

.rig-popular-note { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

/* The what-to-measure drawing, folded until asked for. */
.cfg-measure-help summary {
    font: 600 14px/1.3 var(--font);
    color: var(--accent-ink);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cfg-measure-help[open] summary { margin-bottom: 12px; }

.cfg-measure-help img {
    display: block;
    max-width: min(660px, 100%);
    height: auto;
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 8px;
}

.cfg-field-label { font: 700 15px/1 var(--font); }

.cfg-field input,
.cfg-field textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid #d8d8d8;
    font: 400 16px/1 var(--font);
}

.cfg-field textarea { line-height: 1.5; resize: vertical; }

/* The mockup's amber ring marks the active field, not "required". */
.cfg-field input:focus,
.cfg-field textarea:focus {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    outline: none;
}

.cfg-choices { display: flex; flex-direction: column; gap: 8px; }

.cfg-choice {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
}

.cfg-choice:has(input:checked) {
    border: 2px solid var(--accent);
    background: var(--accent-bg);
    padding: 11px 15px;
}

.cfg-choice.is-blocked { opacity: .5; cursor: not-allowed; }

.cfg-choice input { accent-color: var(--radio-accent); }

.cfg-choice-thumb {
    width: 44px;
    height: 44px;
    flex: none;
    overflow: hidden;
    background: repeating-linear-gradient(135deg, #f1f1f1 0 6px, #e7e7e7 6px 12px);
}

/* The checker means "no image yet". A real image replaces it — a transparent
   PNG must sit on plain paper, not on the placeholder pattern. */
.cfg-choice-thumb:has(img) { background: var(--paper); }

.cfg-choice-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cfg-choice-body { display: flex; flex-direction: column; gap: 3px; flex: 1; }

.cfg-choice-name { font: 700 15px/1.2 var(--font); }

.cfg-choice-sub { font: italic 400 13px/1.35 var(--font); color: var(--ink-quiet); }

.cfg-choice-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.cfg-choice-price { font: 600 14px/1 var(--font); white-space: nowrap; }

.cfg-choice-selected { font: 600 12px/1 var(--font); color: var(--accent-ink); }

.cfg-nav { display: flex; gap: 12px; align-items: stretch; padding-top: 4px; }

/* More specific than `.cfg-main form`, which would otherwise stack this column. */
.cfg-main form.cfg-add {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    padding-top: 4px;
}

.cfg-add .qty-field {
    flex: none;
    border: 1px solid var(--line-strong);
    padding: 0 8px;
}

.cfg-add .qty-field input {
    width: 44px;
    border: 0;
    font: 600 15px/1 var(--font);
    text-align: center;
    outline: none;
}

.cfg-back {
    display: flex;
    align-items: center;
    padding: 0 22px;
    background: var(--line-soft);
    color: var(--ink-body);
    font: 400 16px/1 var(--font);
    text-decoration: none;
}

.cfg-next { flex: 1; font-size: 16px; }

.cfg-keep { font: 400 13px/1.5 var(--font); color: var(--ink-mute); max-width: 560px; }

/* The review itself uses the checkout's rv-blocks; this label style survives
   for the rail and the product page's in-cart panel. */
.cfg-review-key {
    font: 600 12px/1 var(--font);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.cfg-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px;
    background: var(--paper-dim);
    border-left: 1px solid #ececec;
}

.cfg-rail h2 { font: 700 22px/1.1 var(--font); }

.cfg-rail-product {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.cfg-rail-product img, .cfg-rail-product .media-placeholder {
    width: 56px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    flex: none;
}

.cfg-rail-name { font: 700 16px/1.2 var(--font); }

.cfg-rail-sub { font: italic 400 12px/1.5 var(--font); color: var(--ink-quiet); }

.cfg-rail-price { font: 600 14px/1 var(--font); margin-top: 2px; }

.cfg-rail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #f0f0f0;
    font: 400 14px/1.35 var(--font);
}

.cfg-rail-row .is-pending { color: var(--ink-faint); }

.cfg-rail-row > div { display: flex; flex-direction: column; gap: 2px; }

.cfg-measure-note {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    background: var(--accent-bg);
    border-left: 2px solid var(--accent);
    font: 400 13px/1.5 var(--font);
    color: var(--ink-body);
}

.cfg-measure-note strong { font: 600 13px/1.3 var(--font); color: var(--ink); }

.cfg-rail-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: 700 17px/1 var(--font);
    padding-top: 4px;
}

.cfg-rail-vat { font: 400 12px/1.5 var(--font); color: var(--ink-mute); }

/* The overlay the enhancement script mounts the card into — the mockup's
   dialog-over-the-blurred-page treatment, with the live page behind it. */
.cfg-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    width: min(1060px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    overflow: auto;
    margin-top: 52px;
}

.cfg-dialog::backdrop {
    background: rgba(20, 20, 20, .55);
    backdrop-filter: blur(1.5px);
}

.cfg-dialog .cfg-card {
    max-width: none;
    border: 0;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55);
}

/* ---- Configured confirmation (2f) ------------------------------------------ */

/* Rides in the ok notice band — the color and the rule are the band's. */
.configured-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 40px;
    flex-wrap: wrap;
}

.configured-banner-text { flex: 1; min-width: 240px; }

.configured-banner-text strong {
    display: block;
    font: 700 16px/1.2 var(--font);
    color: var(--ok-deep);
}

.configured-banner-text span { font: 400 14px/1.5 var(--font); color: #2c5b3c; }

.configured-banner .btn-secondary { border-color: var(--ok-deep); color: var(--ok-deep); }

.in-cart-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--paper-dim);
    border-left: 2px solid var(--accent);
}

.in-cart-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.in-cart-panel .cfg-review-key { font-size: 12px; }

.in-cart-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: 400 13px/1.5 var(--font);
    color: #3f3f3f;
}

.separate-note { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

/* ---- Checkout (3a–3g) ------------------------------------------------------ */

/* The same rail width as the cart page: the order summary must not change
   size on the way from one to the other. */
.checkout-page {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    align-items: start;
    padding: 34px 40px 48px;
    background: #fbfbfb;
}

/* The panel borrows the configurator's head and tab bar; give them its rhythm
   without the cfg-card frame. */
.co-panel { gap: 0; padding: 0; }

.co-panel .cfg-head { padding: 24px 30px 20px; }

/* The page-level step rail under the chrome: same inset as the header. */
.co-steps { padding: 0 40px; }

.co-intro {
    font: 400 15px/1.6 var(--font);
    color: var(--ink-body);
    padding: 22px 30px 0;
    max-width: 640px;
}

.co-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 30px 30px;
}

.co-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.co-field { display: flex; flex-direction: column; gap: 6px; }

.co-field.is-wide { grid-column: 1 / -1; }

.co-label {
    font: 600 12px/1.3 var(--font);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}

.co-label em { color: var(--accent-deep); font-style: normal; }

.co-field input, .co-field select {
    width: 100%;
    padding: 12px 14px;
    font: 400 15px/1.4 var(--font);
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    outline: none;
}

.co-field input:focus, .co-field select:focus {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.co-hint { font: 400 12.5px/1.5 var(--font); color: var(--ink-body); }

.co-error { font: 600 13px/1.4 var(--font); color: #b3261e; }

.co-alert {
    margin: 20px 30px 0;
    padding: 14px 16px;
    border: 1px solid #e5b4b0;
    background: #fdf1f0;
    font: 600 14px/1.5 var(--font);
    color: #b3261e;
}


.co-question { padding-top: 2px; }

/* Payment methods and the buyer-type pair: bordered radio cards. */
.co-methods { display: flex; flex-direction: column; gap: 12px; }

.method-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    cursor: pointer;
}

/* Selected: the same amber treatment as the configurator's choice cards. */
.method-card:has(input:checked) {
    border: 2px solid var(--accent);
    background: var(--accent-bg);
    padding: 17px 19px;
}

.method-card.is-disabled { opacity: .55; cursor: default; }

.method-card input { margin-top: 3px; accent-color: var(--radio-accent); }

.method-body { display: flex; flex-direction: column; gap: 5px; }

.method-name { font: 700 15px/1.3 var(--font); color: var(--ink); }

.method-sub { font: 400 13.5px/1.55 var(--font); color: var(--ink-body); }

.method-terms { font: 600 12.5px/1.5 var(--font); color: var(--ink-soft); }

/* The company notice under the methods: the contact page's document box
   (.contact-docs) in the store's small running size, in the page's own
   ink. */
.co-company-note {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
    background: var(--paper-dim);
    border: 1px solid #e0e0e0;
    font: 400 13.5px/1.55 var(--font);
}

.co-company-note strong { font: 600 13.5px/1.3 var(--font); }

/* Company details concern companies: hidden while "a private person" is the
   checked answer, reacting to the radio in pure CSS. Guarded so a browser
   without :has() shows the fields rather than locking companies out. */
@supports selector(:has(input)) {
    .co-form:not(:has(input[name="buyer"][value="company"]:checked)) #company-fields {
        display: none;
    }
}

.panel-accent-title { font: 700 14px/1.3 var(--font); color: var(--ink); }

.panel-accent p { font: 400 13.5px/1.6 var(--font); color: var(--ink-body); }

/* The VIES verdict badge next to the VAT-number label. */
.vat-badge {
    padding: 3px 8px;
    font: 700 11px/1.2 var(--font);
    letter-spacing: .03em;
    text-transform: none;
}

.vat-badge.is-valid { background: var(--ok-bg); color: var(--ok-deep); }

.vat-badge.is-invalid { background: #fdf1f0; color: #b3261e; }

.vat-badge.is-pending { background: var(--accent-tag); color: var(--accent-deep); }

/* Review: one bordered block per fact, keyed by an uppercase label. */
.rv-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 30px 0;
}

/* Inside the configurator the step column already carries the padding. */
.cfg-main .rv-blocks { padding: 0; }

/* Price and Change stacked at the block's right edge. */
.rv-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.rv-side .rv-change { padding-top: 0; }

.rv-price { font: 600 14px/1.3 var(--font); }

.rv-block {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 16px 20px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
}

/* The packing list block holds the expander alone: no key column to align
   against, and the summary's own rule would sit on top of the block's border. */
.rv-block-box { display: block; padding-top: 0; padding-bottom: 0; }

/* The summary is this block's key, so it wears .rv-key's type rather than the
   cart's: in the review it is one label in a column of labels. */
.rv-block-box .box-expand summary {
    border-top: 0;
    font: 600 11px/1.4 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rv-key {
    flex: 0 0 150px;
    font: 600 11px/1.4 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-body);
    padding-top: 3px;
}

.rv-value {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font: 400 14.5px/1.5 var(--font);
    color: var(--ink);
}

/* No muted ink anywhere on the checkout: the review's
   second lines and the field hints read in the body ink. */
.rv-muted { color: var(--ink-body); }

.rv-change {
    font: 600 13px/1.3 var(--font);
    color: var(--ink);
    text-decoration: underline;
    white-space: nowrap;
    padding-top: 3px;
}

.co-terms {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 20px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    font: 400 14.5px/1.5 var(--font);
    color: var(--ink);
    cursor: pointer;
}

.co-terms input { margin-top: 3px; accent-color: var(--radio-accent); }

.co-place-note { max-width: 560px; }

/* The rail's order lines: small thumb, name, line total. */
/* No border of its own: the totals block below draws the dividing rule. */
.co-rail-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 14px;
}

.co-rail-line { display: flex; gap: 12px; align-items: center; }

.co-rail-thumb {
    flex: 0 0 52px;
    height: 52px;
    background: #f1f1f1;
    overflow: hidden;
}

.co-rail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.co-rail-name { flex: 1; font: 600 13.5px/1.4 var(--font); color: var(--ink); }

.co-rail-price { font: 600 13.5px/1.4 var(--font); color: var(--ink); white-space: nowrap; }

.co-rail-panel { padding: 18px 20px; gap: 8px; }

/* ---- Order status (4a–4c) --------------------------------------------------- */

/* One surface: the page IS the sheet, framed by the shop chrome — no floating
   bordered panel inside it. */
.status-page {
    display: flex;
    flex-direction: column;
    background: var(--paper);
}

/* Rides in a notice band; the band brings the color, the strip the text. */
.status-banner {
    padding: 16px 36px;
    font: 600 15px/1.5 var(--font);
    color: var(--ok-deep);
}

.status-panel {
    display: flex;
    flex-direction: column;
}

.status-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 34px 36px 26px;
}

.status-head-main { display: flex; flex-direction: column; gap: 9px; }

.status-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font: 600 12px/1 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.status-head h1 { font: 700 34px/1.1 var(--font); }

.status-head p { max-width: 620px; font: 400 16px/1.6 var(--font); color: var(--ink-body); }

.badge-mute { background: #ececec; color: #3f3f3f; }

.status-aside {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    flex: none;
    text-align: right;
}

.status-aside-label { font: 400 13px/1 var(--font); color: var(--ink-mute); }

.status-aside-value { font: 700 22px/1.1 var(--font); }

.status-aside-note { font: 600 13px/1.3 var(--font); color: var(--accent-deep); }

.status-aside-note.is-late { color: #b3261e; }

/* The four-dot progress strip. */
.status-timeline { display: flex; padding: 0 36px 30px; }

.tl-step { display: flex; flex-direction: column; gap: 10px; flex: 1; }

.tl-track { display: flex; align-items: center; }

.tl-dot { width: 14px; height: 14px; border-radius: 7px; background: #e0e0e0; flex: none; }

.tl-bar { height: 2px; flex: 1; background: #e6e6e6; }

.tl-step.is-done .tl-dot, .tl-step.is-done .tl-bar { background: var(--ok-deep); }

.tl-step.is-now .tl-dot { background: var(--accent); }

.tl-label { font: 400 14px/1.3 var(--font); color: var(--ink-faint); padding-right: 20px; }

.tl-when { font: 400 12px/1.4 var(--font); color: var(--ink-mute); padding-right: 20px; }

.tl-step.is-done .tl-label { font-weight: 600; color: var(--ink-body); }

.tl-step.is-now .tl-label { font-weight: 700; color: var(--ink); }

.status-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 28px;
    align-items: start;
    padding: 0 36px 40px;
}

.status-main, .status-rail { display: flex; flex-direction: column; gap: 20px; }

.status-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.status-card.is-quiet { border: 0; background: #fafafa; }

.status-card h2 { font: 700 22px/1.1 var(--font); }

.status-card h3 { font: 700 20px/1.1 var(--font); }

.status-address { font: 400 14px/1.6 var(--font); color: var(--ink); }

/* Darker than the shared --ink-mute: these are sentences to read, not labels. */
.status-muted { font: 400 13px/1.55 var(--font); color: #454545; }

/* The amber How-to-pay panel. */
.pay-panel { gap: 16px; }

.pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.pay-head h2 { font: 700 24px/1.1 var(--font); }

/* Neutral by default — the Tracking card shares the header layout. Only the
   amber How-to-pay panel tints its meta line. */
.pay-due { font: 400 13px/1 var(--font); color: #6e6e6e; }

.pay-panel .pay-due { color: #7a5b1f; }

.pay-kv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0;
}

.pay-kv-grid .kv.is-wide { grid-column: span 2; }

.kv-big dd { font-size: 22px; line-height: 1.1; }

.kv-hint { font: 400 12px/1.4 var(--font); color: #7a5b1f; }

/* A grid cell holding a kv box with help text under it. */
.kv-cell { display: flex; flex-direction: column; gap: 6px; }

.kv-cell.is-wide { grid-column: span 2; }

.kv-cell .kv { flex: 1; }

/* One help color for the whole amber panel — same as .pay-due and .pay-note. */
.kv-help { font: 400 12px/1.5 var(--font); color: #7a5b1f; padding: 0 2px; }

/* Height-matching spacer: a cell whose neighbour has help text renders the
   same text invisibly, so the boxes above stay level. */
.kv-help.is-ghost { visibility: hidden; }

.pay-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Doubled up to outrank `.panel-accent p`, which would gray this out. */
.pay-panel .pay-note, .pay-note { font: 400 13px/1.55 var(--font); color: #7a5b1f; max-width: 560px; }

/* The over-the-ceiling card attempt, under "How to pay": a quiet gray
   aside — the warning lives in the words, not in an amber alarm. */
.card-anyway {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--paper-dim);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.card-anyway-text { font: 400 13px/1.55 var(--font); color: #5d5d5d; max-width: 560px; }
.card-anyway-text strong { display: block; color: var(--ink); font-weight: 700; }
.card-anyway .btn { flex: none; }

/* Tracking parcels. */
.parcel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: #fafafa;
}

.parcel-name { font: 700 14px/1.2 var(--font); }

.parcel-tracking { font: 400 13px/1.4 var(--mono); color: #6e6e6e; }

/* Order lines on the status card. */
.status-lines { display: flex; flex-direction: column; gap: 12px; }

.status-line {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}

/* The totals block below draws its own top rule — a border here too would
   double the line under the last item. */
.status-line:last-child { border-bottom: 0; padding-bottom: 0; }

.status-line-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }

.status-line-name { font: 700 14px/1.25 var(--font); }

.status-line-sub { font: italic 400 12px/1.45 var(--font); color: #6e6e6e; }

.status-line-opt { font: 400 12px/1.5 var(--font); color: #3f3f3f; padding-top: 3px; }

/* The question as a small label line above its answer. */
.status-line-opt > span { display: block; color: var(--ink-mute); }

.status-line-price { font: 400 13px/1.3 var(--font); color: var(--ink-body); white-space: nowrap; }

.rail-row.is-reverse div { color: var(--accent-deep); }

.status-banner.is-warn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: #7a4f05;
}

.status-banner.is-warn strong { display: block; }

/* The embedded Stripe overlay. Stripe's form sets its own height inside. */
.pay-dialog {
    width: min(460px, 94vw);
    border: 1px solid var(--frame);
    padding: 0;
    box-shadow: var(--shadow-sheet);
}

.pay-dialog::backdrop { background: rgba(20, 20, 20, .55); backdrop-filter: blur(3px); }

.pay-dialog-close {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 1;
    border: 0;
    background: none;
    font: 400 22px/1 var(--font);
    color: var(--ink-mute);
    cursor: pointer;
}

.pay-dialog-mount { min-height: 480px; padding: 28px 8px 8px; }

/* ---- Print ----------------------------------------------------------------- */

/* A printed page is a record, not an interface: the chrome's pickers, every
   button, and the payment overlay go; the facts stay. The bank cells keep
   their borders, so they survive browsers that skip background colors. */
/* ---- Region panel ---------------------------------------------------------- */

/* Almost nothing here: the panel wears the configurator's shell (.cfg-page,
   .cfg-card, .cfg-head, .cfg-close, .cfg-main, .cfg-choice, .cfg-nav, .cfg-keep)
   and checkout's fields (.co-field, .co-label, .co-hint). What follows is only
   what those two do not already answer. */

/* In-page the panel fills the gutter's width — the framing itself is
   .cfg-page's, shared with the configurator — and the two pickers share a
   row, as do the two price cards. In the 760px dialog everything returns to
   one column — that dialog is the width the stacked layout was drawn for, so
   it needs no cap of its own on the card. */
.rg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }

.rg-dialog .rg-grid { grid-template-columns: 1fr; }

/* What the chosen country means for prices, stated under the two selects. A
   note about the answer, so it reads like the closing line rather than a
   third field. */
.rg-prices { margin: 0; color: var(--muted-ink); font-size: 13px; line-height: 1.5; }

/* The overlay is .cfg-dialog with one thing changed — see region-overlay.js,
   which mounts the card into both classes. */
.rg-dialog { width: min(760px, calc(100vw - 32px)); }

/* ---- The marketing pages ------------------------------------------------- */

/* Mockup 1a: the pages around the shop, in the shop's own chrome and tokens.
   The home page is a stack of sections inside the main band — motion first,
   then proof, then products — closed by the full site footer. */

.site-footer-band { background: var(--ink); }

.site-footer { padding: 44px 40px 26px; }

.site-footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.2fr;
    gap: 28px;
}

.site-footer-col { display: flex; flex-direction: column; gap: 8px; }

.site-footer-head {
    font: 700 14px/1 var(--font);
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.site-footer-col a,
.site-footer-col span {
    font: 400 14px/1.5 var(--font);
    color: #b9b4ae;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.site-footer-col .site-footer-head { font: 700 14px/1 var(--font); color: #fff; }

.site-footer-col a:hover { color: var(--accent); }

.site-footer-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #2b2b2b;
    font: 400 13px/1.6 var(--font);
    color: var(--ink-mute);
}

/* ---- Home: hero ----------------------------------------------------------- */

.home-hero { position: relative; overflow: hidden; background: var(--ink); }

.home-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: .8;
}

.home-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
    padding: 96px 40px;
}

.home-hero-eyebrow {
    font: 600 12px/1 var(--mono);
    letter-spacing: .2em;
    color: var(--accent);
}

.home-hero h1 { font: 700 54px/1.05 var(--font); color: #fff; letter-spacing: -.02em; }

.home-hero p { font: 400 18px/1.6 var(--font); color: #e4e1dd; text-wrap: pretty; }

.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.btn-accent {
    padding: 16px 26px;
    font-size: 16px;
    font-weight: 700;
    background: var(--accent);
    color: var(--ink);
}

/* Re-assert the ink: the global a:hover (a pseudo-class outranking the lone
   class) would otherwise paint the label accent-on-amber. */
.btn-accent:hover { background: #e59b16; color: var(--ink); }

.btn-outline-light {
    padding: 16px 26px;
    font-size: 16px;
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.btn-outline-light:hover { border-color: #fff; color: #fff; }

.home-hero-trust { margin-top: 10px; font: 400 14px/1.5 var(--font); color: #b9b4ae; }

/* ---- Home: sections ------------------------------------------------------- */

.home-section {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 48px 40px;
    border-bottom: 1px solid var(--line-card);
}

.home-section.is-dim { background: var(--paper-dim); }

.home-section-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }

.home-section-head h2 { font: 700 30px/1.15 var(--font); }

.home-section-head p { font: 400 15px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.home-axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.home-axis-card { display: flex; flex-direction: column; border: 1px solid #e0e0e0; background: var(--paper); }

.home-axis-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    background: var(--ink);
}

.home-axis-body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }

.home-axis-body h3 { font: 700 22px/1 var(--font); letter-spacing: .06em; }

.home-axis-sub { font: italic 400 14px/1.4 var(--font); color: var(--ink-quiet); }

.home-axis-body p { font: 400 14px/1.6 var(--font); color: var(--ink-soft); text-wrap: pretty; }

/* ---- Home: products ------------------------------------------------------- */

.home-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.home-product-card { display: flex; flex-direction: column; border: 1px solid #e0e0e0; background: var(--paper); }

.home-product-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }

.home-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.home-product-media .media-placeholder { height: 100%; }

.home-product-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px; }

.home-product-body h3 { font: 700 22px/1.2 var(--font); }

.home-product-price { display: flex; flex-direction: column; gap: 2px; }

.home-product-price strong { font: 700 20px/1 var(--font); }

.home-product-price span { font: 400 12px/1 var(--font); color: var(--ink-mute); }

/* Three lines per card: what it is, who it is for, what it carries. */
.home-product-points {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 10px 0 0 18px;
    border-top: 1px solid var(--line-card);
    font: 400 13px/1.4 var(--font);
    color: var(--ink-soft);
    text-wrap: pretty;
}

.home-product-points li::marker { color: var(--ink-mute); }

.home-product-body .btn { margin-top: 6px; }

/* ---- Home: tech specs and performance ------------------------------------- */

.home-specswrap {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    border-bottom: 1px solid var(--line-card);
}

/* min-width 0: a grid child's auto minimum would let the table push the
   whole column wide instead of scrolling inside its own frame. */
.home-specs { display: flex; flex-direction: column; gap: 18px; padding: 48px 40px; min-width: 0; }

.home-specs h2 { font: 700 30px/1.15 var(--font); letter-spacing: .02em; }

.home-specs > p { max-width: 520px; font: 400 15px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.home-specs-table { border: 1px solid #e0e0e0; overflow-x: auto; }

.home-specs-table table { width: 100%; border-collapse: collapse; }

/* The label column is the one that would rather grow than wrap, and the three
   readings pay for it. Capped on the whole column, not on the header alone:
   that cell is empty, so under auto table layout the body labels are what set
   the width and a cap on the header binds nothing. */
.home-specs-table tr > *:first-child { max-width: 110px; }

.home-specs-table thead th {
    padding: 11px 16px;
    background: var(--paper-head);
    border-bottom: 1px solid var(--line);
    font: 600 12px/1 var(--font);
    letter-spacing: .06em;
    color: var(--ink-quiet);
    text-align: left;
}

.home-specs-table tbody th,
.home-specs-table tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--line-soft);
    font: 400 13px/1.45 var(--font);
    color: #333;
    text-align: left;
    vertical-align: top;
}

.home-specs-table tbody th { font-weight: 600; }

.home-specs-table small { font-size: 11px; color: var(--ink-mute); }

.home-specs-note { padding: 12px 16px; font: 400 12px/1.6 var(--font); color: var(--ink-mute); }

.home-perf {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 48px 40px;
    background: var(--ink);
}

.home-perf h2 { font: 700 22px/1 var(--font); color: #fff; letter-spacing: .06em; }

.home-perf > p { font: 400 14px/1.6 var(--font); color: #b9b4ae; }

.home-perf-stats { display: flex; flex-direction: column; gap: 20px; }

.home-perf-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 18px;
    border-bottom: 1px solid #2b2b2b;
}

.home-perf-upto { font: 400 12px/1 var(--font); color: var(--ink-mute); }

.home-perf-value { font: 700 44px/1 var(--font); color: var(--accent); letter-spacing: -.02em; }

.home-perf-label { font: 600 14px/1 var(--font); color: #e4e1dd; }

/* ---- Home: software, simulators, guide, mounting -------------------------- */

.home-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 48px 40px;
    border-bottom: 1px solid var(--line-card);
}

.home-duo-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid #e0e0e0; }

.home-duo-slash { width: 34px; height: 3px; background: var(--accent); }

.home-duo-kicker { font: 400 13px/1 var(--font); color: var(--ink-mute); }

.home-duo-card h3 { font: 700 22px/1.2 var(--font); }

.home-duo-card p { font: 400 14px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.home-duo-card a { margin-top: 6px; font: 600 14px/1 var(--font); align-self: flex-start; }

.home-sims { display: flex; flex-wrap: wrap; gap: 8px; }

.home-sim {
    padding: 7px 12px;
    background: var(--paper);
    border: 1px solid #e0e0e0;
    font: 400 13px/1 var(--font);
    color: #333;
}

a.home-sim.is-more {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.home-guidewrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 48px 40px;
    border-bottom: 1px solid var(--line-card);
}

.home-guide,
.home-mounts { display: flex; flex-direction: column; gap: 16px; }

.home-guide h2,
.home-mounts h2 { font: 700 26px/1.2 var(--font); }

.home-guide > p,
.home-mounts > p { font: 400 15px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.home-guide-rows { display: flex; flex-direction: column; gap: 10px; }

.home-guide-row {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    background: var(--paper);
    font: 400 14px/1.5 var(--font);
    color: var(--ink-soft);
    text-wrap: pretty;
}

.home-guide-tier { min-width: 38px; font: 700 15px/1.5 var(--font); color: var(--accent-ink); }

.home-guide-note { font: 400 13px/1.5 var(--font); color: var(--ink-mute); text-wrap: pretty; }

.home-doclink { margin-top: 4px; font: 600 14px/1 var(--font); align-self: flex-start; }

/* The compatibility helper — the download page's quiet gray box shape. */
.home-compat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    padding: 20px 22px;
    background: var(--paper-dim);
}

.home-compat h3 { font: 700 16px/1.2 var(--font); }

.home-compat p { font: 400 14px/1.55 var(--font); color: var(--ink-body); text-wrap: pretty; }

.home-compat .btn { align-self: flex-start; }

.home-mount-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.home-mount-card { display: flex; flex-direction: column; border: 1px solid #e0e0e0; background: var(--paper); }

.home-mount-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 130px;
    object-fit: contain;
    padding: 10px;
}

.home-mount-body { display: flex; flex-direction: column; gap: 6px; padding: 16px; }

.home-mount-body h3 { font: 700 16px/1.25 var(--font); }

.home-mount-body p { font: 400 13px/1.5 var(--font); color: var(--ink-body); text-wrap: pretty; }

/* ---- Home: newsletter ------------------------------------------------------ */

/* The band paints the amber, edge to edge; the section inside holds to the
   sheet width like every other band's content. */
/* The door out — the page's two questions, answered, become its two ways on. */
.home-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 40px;
    text-align: center;
    background: var(--paper-dim);
}

.home-final h2 { font: 700 30px/1.15 var(--font); }

.home-final p { max-width: 560px; font: 400 15px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.home-final .home-hero-actions { justify-content: center; }

.home-newsletter-band { background: var(--accent); }

.home-newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    padding: 36px 40px;
}

.home-newsletter h2 { font: 700 24px/1.2 var(--font); }

/* Mockup 1a's #3a2c0c — near-ink brown, not the lighter accent-deep: the
   sentence has to hold its own on the amber. */
.home-newsletter p { margin-top: 6px; font: 400 15px/1.5 var(--font); color: #3a2c0c; }

.home-newsletter form { display: flex; flex-wrap: wrap; gap: 10px; }

/* An .input sized for the band: one line tall, side by side with its button. */
.home-newsletter input {
    width: 300px;
    max-width: 100%;
    height: 46px;
    padding: 0 14px;
}

.home-newsletter .btn { padding: 15px 24px; font-size: 15px; font-weight: 700; }

/* ---- Site pages: resellers, about, contact -------------------------------- */

/* The shared frame for the simpler marketing pages: kicker, title, intro,
   then the page's own sections. is-flush drops the outer padding for pages
   whose first section paints its own background to the sheet edge. */
/* Top padding matches .home-section, so the first thing on screen sits at
   the same height whether a page opens with a section or a sheet. */
.site-page { display: flex; flex-direction: column; gap: 36px; padding: 48px 40px; }

.site-page.is-flush { gap: 0; padding: 0; }

.site-head { display: flex; flex-direction: column; gap: 14px; max-width: 700px; }

.site-kicker { font: 400 13px/1 var(--font); color: var(--ink-mute); }

.site-head h1 { font: 700 36px/1.1 var(--font); }

.site-head p { font: 400 16px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.site-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 6px; }

/* ---- Shared site blocks ---------------------------------------------------- */

/* The page head strip — the kicker or breadcrumb as a page section of its
   own, mounted first in <main>, above the page container. This is the ONE
   place the first element's position lives; the containers below hand over
   their top padding, so every page's opening line sits at the same height. */
.page-head { padding: 48px 40px 14px; }

.page-head + .site-page,
.page-head + .catalog,
.page-head + .product-page { padding-top: 0; }

.page-head + .prod-page > section:first-child { padding-top: 0; }

/* A section head with an action beside it, baseline-aligned. */
.section-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}

/* Two columns, text beside media — the split the marketing sections share.
   Declared after .home-section so on a shared element the grid wins over
   the section's own flex. */
.site-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.site-split-text { display: flex; flex-direction: column; gap: 16px; }

.site-split-text h1 { font: 700 36px/1.1 var(--font); }

.site-split-text h2 { font: 700 30px/1.15 var(--font); }

.site-split-text > p { font: 400 15px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.site-split-shot { display: flex; flex-direction: column; justify-content: center; }

.site-split-shot figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }

.site-split-shot img { width: 100%; height: auto; display: block; border: 1px solid #e0e0e0; }

.site-split-shot figcaption { font: italic 400 13px/1.5 var(--font); color: var(--ink-mute); }

/* The amber aside — the standing banners' tone, in a box. */
.site-note {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--note-bg);
    border: 1px solid var(--note-line);
    font: 400 14px/1.5 var(--font);
}

.site-note strong {
    font: 700 13px/1.5 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #b8770c;
    white-space: nowrap;
}

/* ---- Support landing (Documentation mockup 1a) ----------------------------- */

.support-section { display: flex; flex-direction: column; gap: 16px; }

.support-section h2 { font: 700 22px/1 var(--font); }

.support-intro { max-width: 620px; font: 400 14px/1.55 var(--font); color: var(--ink-body); }

.support-aside { font: 400 14px/1 var(--font); color: var(--ink-mute); }

.support-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* The manuals table — the download page's file list, grown a column. */
.support-manuals { border: 1px solid #e0e0e0; overflow-x: auto; }

.support-manuals-head,
.support-manual {
    display: grid;
    grid-template-columns: 160px 1fr 170px;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    min-width: 640px;
}

.support-manuals-head {
    padding: 11px 18px;
    background: #f8f8f8;
    border-bottom: 1px solid #e6e6e6;
    font: 600 12px/1 var(--font);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6e6e6e;
}

.support-manual { border-bottom: 1px solid #f1f1f1; }

.support-manual:last-child { border-bottom: 0; }

.support-manual:nth-child(odd) { background: #fafafa; }

.support-manual-product { font: 600 15px/1 var(--font); }

.support-manual-langs { font: 400 14px/1.6 var(--font); color: var(--ink-soft); }

.support-manual-langs span { margin: 0 3px; color: var(--ink-mute); }

.support-manual-serial { font: 400 13px/1.4 ui-monospace, Menlo, monospace; color: var(--ink-mute); }

/* The rig escape — the mockup's amber-flagged strip, not a full-bleed band:
   the question belongs to the page, not between pages. */
.support-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    background: #f8f8f8;
    border-left: 3px solid var(--accent);
}

.support-callout > div { display: flex; flex-direction: column; gap: 5px; }

.support-callout h2 { font: 700 17px/1.3 var(--font); }

.support-callout p { font: 400 14px/1.5 var(--font); color: var(--ink-body); text-wrap: pretty; }

.support-callout .btn { flex-shrink: 0; white-space: nowrap; }

/* ---- Terms and conditions -------------------------------------------------- */

.terms-body { max-width: 760px; font: 400 15px/1.7 var(--font); color: #2c2c2c; }

.terms-body p { margin: 0 0 1.1em; }

.terms-body h2 { font: 700 22px/1.25 var(--font); margin: 1.8em 0 .6em; }

.terms-body h2:first-child { margin-top: 0; }

.terms-body h3 { font: 700 17px/1.3 var(--font); margin: 1.5em 0 .5em; }

.terms-body h4 { font: 700 15px/1.4 var(--font); margin: 1.3em 0 .4em; }

.terms-body ul,
.terms-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }

.terms-body li { margin-bottom: .35em; }

.terms-body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line-soft); }

/* The release notes are folded behind their own heading: the summary carries
   the section's h2 weight, so the page reads as if the heading were one,
   with the expander's caret after it. */
.scc-notes summary {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 30px/1.15 var(--font);
    cursor: pointer;
    list-style: none;
}

.scc-notes summary::-webkit-details-marker { display: none; }

.scc-notes summary::after { content: "▼"; color: var(--accent); font-size: 15px; }

.scc-notes[open] summary::after { content: "▲"; }

.scc-notes .scc-changelog { margin-top: 22px; }

/* The release notes wear the same prose block as the terms — both are a
   rendered Markdown file — and add the version headings' rhythm: one release
   per h2, its date under it, its areas as h3. */
.scc-changelog h2 { padding-top: .8em; border-top: 1px solid var(--line-soft); }

.scc-changelog h2:first-child { padding-top: 0; border-top: 0; }

.scc-changelog em { color: var(--ink-mute); }

/* ---- Resellers ------------------------------------------------------------ */

.reseller-groups { display: flex; flex-direction: column; gap: 26px; }

.reseller-group {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 24px;
    align-items: start;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line-soft);
}

.reseller-country h2 { font: 700 18px/1.2 var(--font); }

.reseller-count { margin-top: 4px; font: 400 13px/1 var(--font); color: var(--ink-mute); }

.reseller-tiles { display: flex; flex-wrap: wrap; gap: 16px; }

.reseller-tile {
    display: flex;
    flex-direction: column;
    width: 288px;
    border: 1px solid #e0e0e0;
    background: var(--paper);
    text-decoration: none;
}

.reseller-tile:hover { border-color: var(--ink); color: inherit; }

.reseller-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
    padding: 10px;
    background: var(--paper);
}

.reseller-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.reseller-tile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid var(--line-card);
}

.reseller-name { font: 600 13px/1.3 var(--font); color: var(--ink-soft); }

.reseller-visit { font: 600 12px/1 var(--font); color: var(--accent-ink); white-space: nowrap; }

.reseller-become {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 22px 26px;
    background: var(--paper-dim);
    border: 1px solid #e0e0e0;
}

.reseller-become h2 { font: 700 18px/1.2 var(--font); }

.reseller-become p { margin-top: 4px; font: 400 14px/1.5 var(--font); color: var(--ink-body); }

/* ---- About ---------------------------------------------------------------- */

.about-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    border-bottom: 1px solid var(--line-card);
}

.about-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 56px 40px;
}

/* The home hero's eyebrow, on paper instead of on dark. */
.home-hero-eyebrow.is-ink { color: var(--accent-ink); }

.about-hero-text h1 { font: 700 40px/1.1 var(--font); letter-spacing: -.01em; }

.about-started { font: 400 17px/1.6 var(--font); color: #3a3a3a; }

.about-goal {
    margin: 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--accent);
    font: italic 600 20px/1.5 var(--font);
}

.about-result { font: 400 15px/1.65 var(--font); color: var(--ink-body); text-wrap: pretty; }

.about-hero-media { position: relative; min-height: 420px; overflow: hidden; background: var(--accent); }

.about-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 48px 40px;
    border-bottom: 1px solid var(--line-card);
}

.about-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid #e0e0e0; }

.about-card h2 { font: 700 19px/1.25 var(--font); }

.about-card p { font: 400 14px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.about-close { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px 40px; }

.about-details { display: flex; flex-direction: column; gap: 14px; }

.about-details h2 { font: 700 22px/1.2 var(--font); }

.about-details-rows { border: 1px solid #e0e0e0; }

.about-details-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    font: 400 14px/1.5 var(--font);
    color: #222;
}

.about-details-key { color: var(--ink-mute); }

.about-cta {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 14px;
    padding: 26px;
    background: var(--ink);
}

.about-cta h2 { font: 700 22px/1.25 var(--font); color: #fff; }

.about-cta p { font: 400 14px/1.6 var(--font); color: #b9b4ae; }

/* ---- Contact -------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; }

.contact-form { display: flex; flex-direction: column; gap: 18px; }

.contact-form h2,
.contact-aside h2 { font: 700 21px/1.2 var(--font); }

.contact-form form { display: flex; flex-direction: column; gap: 16px; }

.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.contact-field { display: flex; flex-direction: column; gap: 7px; }

.contact-label { font: 600 13px/1 var(--font); color: #333; }

/* The fields themselves are .input; only the textarea's shape is local. */
.contact-field textarea { resize: vertical; line-height: 1.6; }

.contact-error { font: 400 12px/1.4 var(--font); color: #c0392b; }

/* Off the page, not display:none — the bots that matter skip invisible
   fields less often than absent ones. */
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-send { display: flex; align-items: center; gap: 14px; }

.contact-send span { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

.contact-aside { display: flex; flex-direction: column; gap: 16px; }

.contact-rows { border: 1px solid #e0e0e0; }

.contact-channel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.contact-channel-key {
    font: 600 12px/1 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.contact-channel a { font: 400 15px/1.5 var(--font); text-decoration: none; }

.contact-channel a:hover { color: var(--accent-ink); }

.contact-channel-note { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

.contact-docs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: var(--paper-dim);
    border: 1px solid #e0e0e0;
}

.contact-docs h3 { font: 700 16px/1.25 var(--font); }

.contact-docs p { font: 400 14px/1.6 var(--font); color: var(--ink-body); }

.contact-docs a { font: 600 14px/1 var(--font); align-self: flex-start; }

.contact-social { display: flex; gap: 10px; }

.contact-social a {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--line-strong);
    font: 600 13px/1 var(--font);
    text-align: center;
    text-decoration: none;
}

.contact-social a:hover { border-color: var(--ink); color: inherit; }

/* ---- News ------------------------------------------------------------------ */

/* The tag chips belong to the head above them, not the list below. */
.news-filter { margin-top: -14px; }

.news-featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    border: 1px solid #e0e0e0;
    background: var(--paper);
}

.news-featured-media {
    position: relative;
    display: block;
    min-height: 340px;
    overflow: hidden;
    background: var(--ink);
}

.news-featured-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-featured-flag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 5px 11px;
    background: var(--accent);
    color: var(--ink);
    font: 700 12px/1 var(--font);
}

.news-featured-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    padding: 40px;
}

.news-featured-body h2 { font: 700 30px/1.2 var(--font); text-wrap: pretty; }

.news-featured-body h2 a { text-decoration: none; }

.news-featured-body p { font: 400 15px/1.65 var(--font); color: var(--ink-body); text-wrap: pretty; }

.news-meta { font: 400 13px/1.4 var(--font); color: var(--ink-mute); }

.news-tag {
    display: inline-block;
    padding: 3px 8px;
    margin-right: 4px;
    background: var(--accent-tag);
    color: var(--accent-ink);
    font: 700 11px/1.4 var(--font);
    letter-spacing: .04em;
}

.news-years { display: flex; flex-direction: column; gap: 26px; }

.news-year { display: flex; flex-direction: column; gap: 14px; }

.news-year-head { display: flex; align-items: center; gap: 14px; }

.news-year-head h2 { font: 700 20px/1 var(--font); }

.news-year-rule { flex: 1; height: 1px; background: var(--line); }

.news-year-count { font: 400 13px/1 var(--font); color: var(--ink-mute); }

.news-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.news-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    background: var(--paper);
}

.news-card h3 { font: 700 17px/1.3 var(--font); text-wrap: pretty; }

.news-card h3 a { text-decoration: none; }

.news-card h3 a:hover { color: var(--accent-ink); }

.news-card p { font: 400 13px/1.55 var(--font); color: var(--ink-body); text-wrap: pretty; }

.news-card-author { margin-top: auto; font: 400 12px/1 var(--font); color: var(--ink-mute); }

.news-older { display: flex; justify-content: center; padding-top: 6px; }

/* ---- News: the article page ------------------------------------------------ */

.news-article { max-width: 760px; }

.news-article-head { display: flex; flex-direction: column; gap: 12px; }

.news-back { font: 600 14px/1 var(--font); text-decoration: none; color: var(--ink-body); }

.news-back:hover { color: var(--ink); }

.news-article-head h1 { font: 700 34px/1.15 var(--font); letter-spacing: -.01em; text-wrap: pretty; }

/* Authored Markdown: give the rendered tags the article voice. */
.news-article-body { font: 400 16px/1.7 var(--font); color: #2c2c2c; }

.news-article-body p { margin: 0 0 1.1em; }

.news-article-body h2 { font: 700 24px/1.25 var(--font); margin: 1.6em 0 .6em; }

.news-article-body h3 { font: 700 19px/1.3 var(--font); margin: 1.4em 0 .5em; }

.news-article-body ul,
.news-article-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }

.news-article-body li { margin-bottom: .35em; }

.news-article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.4em 0;
    border: 1px solid var(--line-card);
}

.news-article-body blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--accent);
    color: var(--ink-body);
}

/* A linked image that points at YouTube is a video — a bordered card in the
   reseller tiles' mould: preview with the play badge, then a labelled row. */
.news-article-body .news-video {
    display: block;
    margin: 1.4em 0;
    border: 1px solid #e0e0e0;
    background: var(--paper);
    text-decoration: none;
}

.news-article-body .news-video:hover { border-color: var(--ink); }

.news-video-media { position: relative; display: block; }

.news-article-body .news-video img { display: block; width: 100%; margin: 0; border: 0; }

.news-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 44px;
    border-radius: 10px;
    background: rgba(20, 20, 20, .85);
    color: #fff;
    font-size: 16px;
    text-indent: 3px;
}

.news-video:hover .news-play,
.review-card:hover .news-play { background: var(--accent); color: var(--ink); }

.news-video-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid var(--line-card);
    font: 600 13px/1.3 var(--font);
    color: var(--ink-soft);
}

.news-video-arrow { font: 600 12px/1 var(--font); color: var(--accent-ink); }

/* The Markdown image title, shown instead of hoarded in a tooltip. */
.news-caption {
    display: block;
    margin: -15px 0 1.4em;
    font: 400 13px/1.5 var(--font);
    color: var(--ink-mute);
    text-align: center;
}

.news-video .news-caption { margin-bottom: 0; }

/* Links that leave the site wear the arrow the reseller tiles wear. */
.news-article-body a[target="_blank"]:not(.news-video)::after {
    content: " ↗";
    font-size: .85em;
    color: var(--accent-ink);
}

@media print {
    .store-head-right,
    .store-nav,
    .store-drawer,
    .store-band-subnav,
    .store-footer nav,
    .btn,
    .pay-actions,
    .rv-change,
    .pay-dialog,
    .cfg-close { display: none !important; }

    .status-grid { grid-template-columns: 1fr; }
    .checkout-page, .cart-page { grid-template-columns: 1fr; }

    .status-card, .pay-panel, .bundle-card, .rv-block, .rail-card { break-inside: avoid; }

    /* The order status page on paper: the record and nothing that only
       makes sense on a screen — the banner that says what just happened,
       the footer — on white, in one column, the panel and each line kept
       whole across a page break, and the page's own margins let go so the
       printer's do the framing. */
    .status-banner, .store-footer { display: none !important; }
    .status-page { padding: 0; max-width: none; }
    .status-panel { border: 0; box-shadow: none; }
    /* Kept whole: the blocks small enough to be worth moving to the next
       page rather than splitting. Not .status-panel — it is the page, taller
       than a sheet, and asking the printer not to break it only buys an
       empty first page. */
    .status-lines, .status-line, .status-address, .status-timeline { break-inside: avoid; }
    body { background: #fff; color: #000; }

    a { color: inherit; text-decoration: none; }
}

/* ---- The product pages (2a–2c) --------------------------------------------- */

/* 2a: the overview borrows the home page's section rhythm, its product cards
   and the shared site blocks; only the feature tiles and the amber band are
   its own. */

.prod-software-features { display: flex; flex-direction: column; gap: 10px; }

.prod-feature { display: flex; gap: 14px; padding: 14px 16px; border: 1px solid #e0e0e0; background: var(--paper); }

.prod-feature-bar { flex: 0 0 3px; background: var(--accent); }

.prod-feature h3 { font: 700 15px/1.3 var(--font); }

.prod-feature p { margin-top: 4px; font: 400 13px/1.55 var(--font); color: var(--ink-body); text-wrap: pretty; }

.prod-software-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }

/* The one amber moment on the page — mockup 2a's compatibility band, on the
   layout's coda mount: the band owns the color so it runs edge to edge, the
   strip inside is a normal band child, held to the sheet. */
.prod-cta-band { background: var(--accent); }

.prod-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 32px 40px;
}

.prod-cta h2 { font: 700 22px/1.2 var(--font); color: var(--ink); }

.prod-cta p { margin-top: 5px; font: 400 15px/1.5 var(--font); color: #3a2c0c; }

.prod-cta-actions { display: flex; gap: 10px; }

.prod-cta-actions .btn { white-space: nowrap; }

/* 2b: SIMRIG Control Center. */

/* The lede outranks the split's own paragraph rule, not just follows it. */
.site-split-text p.scc-lede { font-size: 16px; color: var(--ink-soft); }

.scc-actions { display: flex; align-items: center; gap: 12px; }

.scc-col { display: flex; flex-direction: column; gap: 14px; }

.scc-col h2 { font: 700 26px/1.2 var(--font); }

.scc-col p { font: 400 14px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.scc-req { border: 1px solid #e0e0e0; background: var(--paper); }

.scc-req-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
    font: 400 14px/1.4 var(--font);
}

.scc-req-row:last-child { border-bottom: 0; }

.scc-req-key { font: 600 14px/1.4 var(--font); color: var(--ink-quiet); }

.scc-doclink { font: 600 14px/1 var(--font); align-self: flex-start; }

/* 2c: the download page. The form reuses the contact form's fields. */

.dl-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }

.dl-main { display: flex; flex-direction: column; gap: 20px; }

.dl-gate {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px;
    border: 1px solid var(--line-card);
    background: var(--paper-dim);
}

.dl-gate h2 { font: 700 19px/1.2 var(--font); }

.dl-gate form { display: flex; flex-direction: column; gap: 16px; }

.dl-hint { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

.dl-send { display: flex; align-items: center; gap: 14px; }

.dl-send span { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

.dl-serial { padding-top: 16px; border-top: 1px solid var(--line-soft); }

.dl-files { border: 1px solid #e0e0e0; }

.dl-files-head {
    display: grid;
    grid-template-columns: 1fr 130px;
    padding: 11px 18px;
    background: var(--paper-dim);
    border-bottom: 1px solid var(--line-soft);
    font: 600 12px/1 var(--font);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}

.dl-file {
    display: grid;
    grid-template-columns: 1fr 130px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
}

.dl-file-name { font: 600 15px/1.2 var(--font); }

.dl-file-note { margin-top: 3px; font: 400 13px/1.4 var(--font); color: var(--ink-mute); }

.dl-file-version { font: 400 14px/1.4 var(--mono); }

.dl-files-foot { padding: 12px 18px; font: 400 12px/1.6 var(--font); color: var(--ink-mute); }

.dl-privacy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    background: var(--paper-dim);
    border-left: 3px solid var(--accent);
}

.dl-privacy h3 { font: 700 15px/1.3 var(--font); }

.dl-privacy p { font: 400 14px/1.55 var(--font); color: var(--ink-body); text-wrap: pretty; }

.dl-aside { display: flex; flex-direction: column; gap: 12px; }

.dl-aside h2 { font: 700 19px/1.2 var(--font); }

.dl-aside > p { font: 400 14px/1.6 var(--font); color: var(--ink-body); }

.dl-label,
.dl-photo { width: 100%; height: auto; display: block; border: 1px solid #e0e0e0; }

/* The older systems' note carries the label under its sentence, in the
   column beside the flag. The label is a diagram of one strip, so it keeps
   its own height and sits at the sentence's left edge rather than stretching
   to the note's width. */
.dl-note-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }

.dl-label { width: auto; max-width: 100%; max-height: 45px; }

.dl-photo { max-width: 505px; }

.dl-help { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--paper-dim); margin-top: 8px; }

.dl-help h3 { font: 700 16px/1.2 var(--font); }

.dl-help p { font: 400 14px/1.55 var(--font); color: var(--ink-body); }

.dl-help .btn { align-self: flex-start; }

/* ---- Small screens -------------------------------------------------------- */

@media (max-width: 1000px) {
    /* The home page narrows in the same steps as the catalog. */
    .home-axes { grid-template-columns: 1fr; }
    /* Three, two, one — the same steps .motion-grid takes, because these are
       the same cards. Going straight to one column here left the front page
       showing a single product where the shop still showed two. */
    .home-products { grid-template-columns: repeat(2, 1fr); }
    .home-specswrap { grid-template-columns: 1fr; }
    .home-duo { grid-template-columns: 1fr; }
    .home-guidewrap { grid-template-columns: 1fr; }
    .home-hero h1 { font-size: 42px; }
    .site-split { grid-template-columns: 1fr; }
    .prod-cta { flex-direction: column; align-items: flex-start; }
    .dl-grid { grid-template-columns: 1fr; }
    .box-split.has-shot { grid-template-columns: 1fr; }
    .split-auto, .split-even { grid-template-columns: 1fr; }
    .product-section.is-dim { padding: 20px; }
    .product-video { height: auto; width: 100%; max-width: 240px; aspect-ratio: 9 / 16; object-fit: cover; }
    .review-cards { grid-template-columns: 1fr; }
    .stat-tiles { grid-template-columns: 1fr; }
    .about-hero { grid-template-columns: 1fr; }
    .about-cards { grid-template-columns: 1fr; }
    .about-close { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .news-featured { grid-template-columns: 1fr; }
    .news-featured-media { min-height: 220px; }
    .news-cards { grid-template-columns: 1fr; }
    .motion-grid { grid-template-columns: repeat(2, 1fr); }
    .accessory-grid { grid-template-columns: repeat(2, 1fr); }
    .support-cards { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: 1fr; }
    .cart-page { grid-template-columns: 1fr; }
    .checkout-page { grid-template-columns: 1fr; }
    .status-grid { grid-template-columns: 1fr; }
    .status-timeline { flex-wrap: wrap; gap: 14px 0; }
    .tl-step { flex: 1 1 40%; }
    .cfg-grid { grid-template-columns: 1fr; }
    .cfg-rail { border-left: 0; border-top: 1px solid #ececec; }
}

/* The header folds into the burger below 800px — the four doors stop
   fitting beside the logo, the chip and the cart before the page itself
   narrows. store-header.js watches the same width. */
@media (max-width: 800px) {
    .store-header { padding: 12px 16px; grid-template-columns: auto auto 1fr; column-gap: 14px; }

    /* Neither row survives a phone — the burger drawer replaces both,
       every place one under the other. */
    .store-header > .store-nav { display: none; }
    .store-header > .store-drawer { display: block; grid-column: 1; grid-row: 1; }
    .store-header > .brand { grid-column: 2; }
    .store-header > .store-head-right { grid-column: 3; }
    .store-band-subnav { display: none; }

    /* The header follows the thumb: stuck to the top of the viewport, slid
       off it by the distance the page has scrolled down and back on by the
       distance it has scrolled up. store-header.js writes --head-shift as
       the finger moves; without it the band simply stays put. The drawer's
       panel hangs from the band, so it rides along. */
    .store-band-header {
        position: sticky;
        top: 0;
        z-index: 20;
        transform: translateY(calc(-1 * var(--head-shift, 0px)));
    }
    /* Left half in, half out when the finger lifts, it finishes the move. */
    .store-band-header.is-settling { transition: transform .18s ease-out; }
    @media (prefers-reduced-motion: reduce) {
        .store-band-header.is-settling { transition: none; }
    }
}

@media (max-width: 720px) {
    .store-footer { padding: 18px 16px; }
    .page-head { padding: 32px 16px 14px; }
    .standing-banner { padding: 12px 16px; flex-wrap: wrap; gap: 6px 24px; }
    .standing-banner-lead { flex-wrap: wrap; gap: 2px 12px; }
    /* One line on a phone: the sentence carries the condition by itself, so
       the label steps aside. */
    .standing-banner-label { display: none; }
    .catalog { padding: 32px 16px 40px; }
    .home-hero-inner { padding: 56px 16px; }
    /* On a phone the rig sits behind the words, not beside them: fainter,
       so the headline reads. */
    .home-hero-bg { opacity: .2; }
    .home-hero h1 { font-size: 34px; }
    .home-hero p { font-size: 16px; }
    .home-section { padding: 32px 16px; }
    .home-specs { padding: 32px 16px; }
    .home-perf { padding: 32px 16px; }
    .home-duo { padding: 32px 16px; }
    .home-guidewrap { padding: 32px 16px; }
    .home-mount-cards { grid-template-columns: 1fr; }
    /* The product page's two-up rule is more specific than the line above and
       would keep two columns on a phone, cutting each card to half a screen
       and setting the body text one or two words to the line. One column
       here too, so the drawing and its paragraph read as they do on the
       front page. */
    .product-body .home-mount-cards { grid-template-columns: 1fr; }
    .home-mount-card { flex-direction: row; }
    .home-newsletter { padding: 28px 16px; }
    .home-newsletter form { width: 100%; }
    .home-newsletter input { flex: 1; width: auto; }
    /* Same first-element height as .home-section here too. */
    .site-page { padding: 32px 16px 40px; }
    .reseller-group { grid-template-columns: 1fr; gap: 12px; }
    .reseller-tile { width: 100%; }
    .about-hero-text { padding: 32px 16px; }
    .about-hero-media { min-height: 240px; }
    .about-cards { padding: 32px 16px; }
    .about-close { padding: 32px 16px; }
    .contact-row { grid-template-columns: 1fr; }
    .site-footer { padding: 28px 16px 20px; }
    .site-footer-cols { grid-template-columns: 1fr 1fr; }
    .motion-grid { grid-template-columns: 1fr; }
    .home-products { grid-template-columns: 1fr; }
    .accessory-grid { grid-template-columns: 1fr; }
    .support-cards { grid-template-columns: 1fr; }
    .support-callout { flex-direction: column; align-items: flex-start; }
    .product-page { padding: 32px 16px 40px; }
    .cart-page { padding: 20px 16px 40px; }
    /* No box-in-box on a phone: the page is the surface, the panel dissolves,
       and content sits one 16px inset from the edge. */
    .checkout-page { padding: 0 0 32px; background: var(--paper); }
    .checkout-page .cart-panel { border: 0; padding: 0; }
    .co-panel .cfg-head { padding: 18px 16px 16px; }
    .co-intro { padding: 16px 16px 0; }
    .co-form { padding: 16px 16px 24px; }
    .co-panel .rv-blocks { padding: 16px 16px 0; }
    .checkout-page > .cart-rail { padding: 0 16px; }
    /* The standalone configurator and region pages get the same dissolve:
       gutter and card border go, the card is the page, content one 16px
       inset from the edge. */
    .cfg-page { padding: 0 0 32px; }
    .cfg-card { border: 0; }
    .cfg-head { padding: 18px 16px 14px; }
    .cfg-tabs { padding: 0 16px; }
    .rig-popular-grid { grid-template-columns: 1fr; }
    .cfg-main { padding: 20px 16px 24px; }
    .cfg-rail { padding: 20px 16px; }
    .status-head { flex-direction: column; padding: 20px 16px; }
    .status-banner { padding: 14px 16px; }
    .configured-banner { padding: 16px; }
    /* The message alone on a phone: the header's cart button is already on
       screen, and "keep shopping" describes doing nothing. */
    .configured-banner .btn { display: none; }
    .cart-notice { padding: 12px 16px; }
    /* The 4c mobile frames stack the actions full width. */
    .pay-actions { flex-direction: column; }
    .pay-actions .btn { width: 100%; }
    .co-steps { padding: 0 16px; }
    .status-aside { align-items: flex-start; text-align: left; }
    .status-timeline { padding: 0 16px 20px; }
    .status-grid { padding: 0 16px 24px; }
    .pay-kv-grid { grid-template-columns: 1fr; }
    /* Without this, a span-2 cell forces a phantom second column back into
       the collapsed grid and everything cramps into half the width. */
    .pay-kv-grid .kv-cell.is-wide,
    .pay-kv-grid .kv.is-wide { grid-column: auto; }
    /* The ghost help only levels boxes that sit side by side — in one column
       it is nothing but a blank gap. */
    .kv-help.is-ghost { display: none; }
    /* On a phone the configurator overlay is the page: edge to edge, full
       height, no floating margins. dvh tracks the browser bar. */
    .cfg-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
    }
    .cfg-dialog .cfg-card { min-height: 100dvh; box-shadow: none; }
    /* The overlay covers the phone edge to edge, so the dimmed page behind it
       shows only while it scrolls. White instead: the dialog reads as the
       page it has become, not as a sheet over a darkened one. */
    .cfg-dialog::backdrop { background: white; backdrop-filter: none; }
    /* The chip carries three facts and a phone has room for exactly one —
       mockup 1d shows the bare code beside the cart, and in the longer
       locales (sv "inkl. moms" + "Varukorg", nl worse) anything more pushes
       the whole page past the viewport and it pans sideways. The code is
       what the prices follow; VAT basis and language live one tap away in
       the panel. */
    .region-chip-lang, .region-chip-vat, .region-chip-rule { display: none; }
    .region-chip { padding: 8px 11px; gap: 7px; font-size: 14px; }
    /* Mockup 1d's proportions for the rest of the bar: a 28px logo and a
       13px cart label, so the row fits 375px with the longest labels. */
    .brand-logo { height: 28px; }
    .store-head-right { gap: 10px; }
    /* min-height: the compacted chip's height, kept in step for the
       chip-less pages. */
    .btn-cart { padding: 0 12px; gap: 8px; font-size: 13px; min-height: 32px; }
    /* A phone is one column whether the panel is a page or a dialog. */
    .rg-grid { grid-template-columns: 1fr; }
    .co-grid { grid-template-columns: 1fr; }
    /* Stacked, not wrapped: the fixed key column and the Change link fight
       for width on a phone and land somewhere different in every block.
       Change stays pinned top-right, out of the stacking. */
    .rv-block { flex-direction: column; gap: 6px; position: relative; }
    .rv-key { flex: none; padding-top: 0; padding-right: 72px; }
    .rv-change { position: absolute; top: 16px; right: 20px; padding-top: 0; }
    .rv-side { flex-direction: row; align-items: center; gap: 14px; }
    .cart-panel { padding: 18px 14px; }
    .bundle-top { gap: 12px; padding: 14px; }
    .bundle-media { width: 64px; }
    .bundle-lower { padding: 0 14px 12px 14px; }
}