/* why: implements docs/design/design-spec.md v1.0 ("1A Instrument", dark), the frozen
   visual system for Crownprism's Demo Release, replacing the pastel/white
   visual pass this file held before. Reference mockups are the six
   reference files in docs/design/mockups/ - every exact value
   below (hex, px, grid-template) is read from docs/design/design-spec.md or measured
   directly out of those mockups, not invented here.

   The generated site has no running web server (ADR-0016) - each page is
   opened straight from disk, so this file is copied into site-output/ by
   StaticAssetCopier rather than served as a Spring static resource. */

/* ---------------------------------------------------------------------- */
/* 1. Tokens (design-spec.md §2, §3)                                      */
/* ---------------------------------------------------------------------- */

:root {
    /* Surfaces */
    --surface-page: #14120F;
    --surface-raised: #17140F;
    --surface-sunken: #171410;
    --surface-field: #191510;
    --surface-active: #1E1A14;

    /* Lines - three weights, all 1px, radius always 0 */
    --line-hair: #1F1A14;
    --line-soft: #251F19;
    --line-mid: #2A241C;
    --line-strong: #463D30;
    --line-control: #5C5346;

    /* Ink. #7E7566 and darker must never be used for text (absolute floor
       is --ink-floor). --ink-tertiary is not in design-spec.md's own token
       table - it is a real third muted step measured directly out of every
       mockup's search-placeholder and branch-count text and kept as its
       own value rather than folded into --ink-secondary, which it visibly
       is not. */
    --ink-primary: #EDE6DA;
    --ink-secondary: #B8AE9E;
    --ink-tertiary: #A89E8D;
    --ink-muted: #9A8F7E;
    --ink-floor: #8F8676;

    /* Brass - "Regal" scale. brass-200 is the one signal colour: cheapest
       row, example-price marking, active state, links. */
    --brass-100: #D9BC76;
    --brass-200: #C9A961;
    --brass-400: #A98B4E;
    --brass-600: #7C6738;
    --brass-800: #4A3F2E;
    --brass-line: #6B5A33;
    --state-na: #241F19;
    --state-na-border: #3A3227;

    /* Type. No font file ships with this repository - no font pipeline
       exists yet, the same honest gap StaticAssetCopier's own comment
       already names for product images. Named by family; an installed
       Instrument Sans / IBM Plex Mono renders as designed, anything else
       falls back to the browser's own sans/mono stack rather than silently
       becoming a third, undesigned typeface. */
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --page-max: 1440px;
    --page-margin: 40px;
}

* {
    box-sizing: border-box;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html {
    background: var(--surface-page);
    color-scheme: dark;
}

body {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink-primary);
    background: var(--surface-page);
    line-height: 1.55;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color-scheme: dark;
}

main {
    flex: 1 0 auto;
}

/* design-spec.md §3: tabular numerals on every number, without exception. */
.mono, .price, .price-lg, .price-list, .spec-value, .meta, .label-caps,
.breadcrumb, .count, input, button {
    font-variant-numeric: tabular-nums;
}

.container {
    max-width: calc(var(--page-max) - 2 * var(--page-margin));
    margin: 0 auto;
    padding: 0 var(--page-margin);
}

main.container {
    padding-top: 28px;
    padding-bottom: 72px;
}

h1, h2, h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--ink-primary);
    margin: 0;
}

h1 {
    font-size: 34px;
    letter-spacing: -0.025em;
    margin-bottom: 10px;
}

h1.product-h1 {
    font-size: 38px;
    letter-spacing: -0.028em;
    overflow-wrap: anywhere;
}

h2 {
    font-size: 20px;
    letter-spacing: -0.015em;
    margin: 32px 0 14px;
}

h3 {
    font-size: 15px;
}

p {
    margin: 0 0 12px;
    text-wrap: pretty;
}

a {
    color: var(--brass-200);
    text-decoration: none;
    border-bottom: 1px solid var(--brass-line);
}

a:hover, a:focus {
    color: var(--brass-100);
}

a.plain, .site-header__logo, .category-tile, .branch-tile, .leaf-row,
.product-row, .store-row, .search-result,
.retailer-card, .retailer-picker__pill, .retailer-products__thumb,
.retailer-products__name {
    border-bottom: none;
}

ul {
    padding-left: 1.1rem;
}

li {
    margin: 0.2rem 0;
}

/* ---------------------------------------------------------------------- */
/* 2. Header, mark, wordmark (design-spec.md §5, §6, §6.1)                */
/* ---------------------------------------------------------------------- */

.site-header {
    height: 72px;
    display: flex;
    align-items: center;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--line-mid);
}

.site-header__inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.site-header__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-primary);
}

.mark {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.mark__ray {
    position: absolute;
    left: 14.5px;
    bottom: 16px;
    width: 3px;
    background: var(--brass-200);
    transform-origin: bottom center;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.mark__ray:nth-child(1) { height: 15px; transform: rotate(0deg); }
.mark__ray:nth-child(2) { height: 14.1px; transform: rotate(25.714deg); }
.mark__ray:nth-child(3) { height: 13.65px; transform: rotate(51.429deg); }
.mark__ray:nth-child(4) { height: 12.75px; transform: rotate(77.143deg); }
.mark__ray:nth-child(5) { height: 14.55px; transform: rotate(102.857deg); }
.mark__ray:nth-child(6) { height: 15px; transform: rotate(128.571deg); }
.mark__ray:nth-child(7) { height: 14.1px; transform: rotate(154.286deg); }
.mark__ray:nth-child(8) { height: 13.65px; transform: rotate(180deg); }
.mark__ray:nth-child(9) { height: 12.75px; transform: rotate(205.714deg); }
.mark__ray:nth-child(10) { height: 14.55px; transform: rotate(231.429deg); }
.mark__ray:nth-child(11) { height: 15px; transform: rotate(257.143deg); }
.mark__ray:nth-child(12) { height: 14.1px; transform: rotate(282.857deg); }
.mark__ray:nth-child(13) { height: 13.65px; transform: rotate(308.571deg); }
.mark__ray:nth-child(14) { height: 12.75px; transform: rotate(334.286deg); }

.wordmark {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.17em;
    color: var(--ink-primary);
}

.wordmark__prism {
    color: var(--brass-200);
}

/* design-spec.md §6.1: the future login component is specified here, but
   no authentication or feature flag exists in the repository yet. Demo
   Release therefore produces no login markup at all. */
.login-button {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--brass-200);
    color: var(--brass-200);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.login-button:hover {
    background: var(--surface-active);
}

.site-header__end {
    display: flex;
    align-items: center;
    gap: 22px;
}

.site-header__search-wrap {
    position: relative;
    margin: 0;
}

.site-header__search {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 400px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    background: var(--surface-field);
}

.site-header__search-icon {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink-tertiary);
}

.site-header__search input {
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink-primary);
    font-family: var(--font-mono);
    font-size: 12px;
}

.site-header__search input::placeholder {
    color: var(--ink-tertiary);
}

.site-header__search-panel {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 22rem;
    overflow-y: auto;
    background: var(--surface-raised);
    border: 1px solid var(--line-strong);
}

.site-header__search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 10px 14px;
    color: var(--ink-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--line-hair);
    font-size: 13px;
}

.site-header__search-result:hover,
.site-header__search-result:focus,
.site-header__search-result--active {
    background: var(--surface-active);
}

.site-header__search-result__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header__search-result__kind {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-muted);
}

.site-header__search-empty {
    margin: 0;
    padding: 10px 14px;
    color: var(--ink-muted);
    font-size: 13px;
}

/* ---------------------------------------------------------------------- */
/* 3. Breadcrumbs (design-spec.md §6.1)                                   */
/* ---------------------------------------------------------------------- */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px var(--page-margin);
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.09em;
    overflow: hidden;
    white-space: nowrap;
}

.breadcrumb__link {
    color: var(--brass-200);
    border-bottom: 1px solid var(--brass-line);
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb__sep {
    color: var(--ink-muted);
    flex-shrink: 0;
}

.breadcrumb__current {
    color: var(--ink-primary);
    border-bottom: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------- */
/* 4. Home hero, search, category register + panel (design-spec.md §6)   */
/* ---------------------------------------------------------------------- */

/* Startsidan: två centrerade block med egna bredder, ingen hero
   (home-v6.dc.html 8A: header -> centrerat sökblock -> centrerat register
   -> panel -> footer, inget rubrikblock). */
.home-search {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 56px var(--page-margin) 0;
    position: relative;
}

.home-register {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px var(--page-margin) 0;
}

.home-search__field {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 80px;
    padding: 0 22px;
    border: 1px solid var(--line-strong);
    background: var(--surface-field);
}

.home-search__icon {
    font-family: var(--font-mono);
    font-size: 22px;
    color: var(--ink-tertiary);
}

.home-search__field input {
    flex: 1;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink-primary);
    font-family: var(--font-mono);
    font-size: 17px;
}

.home-search__field input::placeholder {
    color: var(--ink-tertiary);
}

.spectrum-band {
    display: flex;
    gap: 2px;
    height: 2px;
    margin-top: -1px;
}

.spectrum-band span:nth-child(1) { flex: 2; background: var(--brass-200); }
.spectrum-band span:nth-child(2) { flex: 3; background: var(--brass-400); }
.spectrum-band span:nth-child(3) { flex: 5; background: var(--brass-800); }
.spectrum-band span:nth-child(4) { flex: 14; background: transparent; }

.home-search__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 13px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-secondary);
}

.home-search__stat {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

/* Category register: seven top-level tiles, always all visible
   (design-spec.md §6.2). */
.category-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--line-strong);
}

.category-tile,
.branch-tile,
.leaf-row {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 20px 16px;
    border-right: 1px solid var(--line-soft);
    color: inherit;
    text-align: left;
    background: none;
}

.category-tile:last-child {
    border-right: none;
}

.category-tile__icon {
    display: flex;
    align-items: flex-end;
    height: 40px;
}

.category-tile__icon svg {
    width: 100%;
    height: 100%;
}

.category-tile__name {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.category-tile__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    margin-top: 3px;
}

/* State C/B: ready, real link, brass icon line, cream name. */
a.category-tile,
a.branch-tile,
a.leaf-row {
    cursor: pointer;
}

a.category-tile:hover,
a.branch-tile:hover {
    background: var(--surface-field);
}

a.category-tile .category-tile__icon,
a.branch-tile .branch-tile__icon,
.leaf-row--ready .leaf-row__icon {
    color: var(--brass-200);
}

a.category-tile .category-tile__name,
a.branch-tile .branch-tile__name,
.leaf-row--ready .leaf-row__name {
    color: var(--ink-primary);
}

a.category-tile .category-tile__meta,
a.branch-tile .branch-tile__meta {
    color: var(--ink-tertiary);
}

a.category-tile .category-tile__meta--priced,
a.branch-tile .branch-tile__meta--priced,
.leaf-row--ready .leaf-row__meta--priced {
    color: var(--brass-200);
}

/* State A: not ready. Inert on purpose - no cursor, no hover, no href in
   the markup at all (design-spec.md §6.2: "en besökare ska inte kunna
   upptäcka den som klickbar ens av misstag"). */
.category-tile--not-ready .category-tile__icon,
.branch-tile--not-ready .branch-tile__icon,
.leaf-row--not-ready .leaf-row__icon {
    color: #6A6052;
}

.category-tile--not-ready .category-tile__name,
.category-tile--not-ready .category-tile__meta,
.branch-tile--not-ready .branch-tile__name,
.branch-tile--not-ready .branch-tile__meta,
.leaf-row--not-ready .leaf-row__name,
.leaf-row--not-ready .leaf-row__meta {
    color: var(--ink-muted);
}

/* The register tile whose category the panel below is currently showing -
   the visual link between register and panel (home-v6.dc.html 8A). */
.category-tile--active {
    background: var(--surface-field);
    border-bottom: 3px solid var(--brass-200);
}

/* The row under the register, closing the home page's own content
   (design-spec.md §3.8/8A). */
.home-register__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.home-register__foot a {
    letter-spacing: 0.06em;
    color: var(--brass-200);
    border-bottom: 1px solid var(--brass-line);
}

/* The swapping panel below the register - one panel, never stacked levels
   (design-spec.md §6: "en enda panel som byter innehåll — aldrig staplade
   nivåer"). Populated from window.CROWNPRISM_CATEGORY_TREE by the script
   at the foot of home.html; JavaScript off degrades to no panel at all -
   every branch and product-bearing leaf still has its own full page,
   reachable by following the register tile's own link. */
.category-panel {
    border: 1px solid var(--line-strong);
    border-top: none;
    background: var(--surface-field);
    min-width: 0;
    max-width: 100%;
}

.category-panel__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--line-soft);
    min-width: 0;
}

.category-panel__back {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--brass-200);
    color: var(--brass-200);
    cursor: pointer;
    font-family: var(--font-mono);
    background: none;
}

.category-panel__back:hover {
    /* design-spec.md §3.8/8A: a darker hover than --surface-active, not
       the same token every other control hover uses. */
    background: #221D16;
}

.category-panel__back-arrow {
    font-size: 13px;
}

.category-panel__back-label {
    font-size: 11px;
    letter-spacing: 0.08em;
}

.category-panel__crumb {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 9px;
}

.category-panel__crumb-root {
    color: var(--brass-200);
    border-bottom: 1px solid var(--brass-line);
    cursor: pointer;
    background: none;
}

.category-panel__crumb-root--plain {
    color: var(--ink-primary);
    border-bottom: none;
    cursor: default;
}

.category-panel__crumb-sep {
    color: var(--ink-muted);
}

.category-panel__crumb-leaf {
    color: var(--ink-primary);
}

.category-panel__count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    min-width: 0;
}

.category-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.branch-tile,
.leaf-row {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-hair);
    gap: 13px;
    flex-direction: row;
    align-items: center;
}

.branch-tile__icon,
.leaf-row__icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 36px;
    height: 32px;
    flex-shrink: 0;
}

.branch-tile__icon svg,
.leaf-row__icon svg {
    width: 100%;
    height: 100%;
}

.branch-tile__name,
.leaf-row__name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.branch-tile__meta,
.leaf-row__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    white-space: nowrap;
}

.branch-tile__arrow {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--brass-200);
}

.leaf-row {
    justify-content: space-between;
    /* 8A lines up name and count on the baseline, not centred. */
    align-items: baseline;
}

/* Level shown inside the panel: only one of {branches, leaves} at a time. */
.category-panel__level[hidden] {
    display: none;
}

/* B empty-state note under Hem-shaped panels (design-spec.md §14). */
.category-panel__note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 20px;
}

.category-panel__note-mark {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--brass-200);
}

.category-panel__note-text {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--ink-muted);
    max-width: 780px;
}

.category-panel__note-text strong {
    color: var(--ink-primary);
    font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* 5. Category branch pages (design-spec.md §6.2, §14)                    */
/* ---------------------------------------------------------------------- */

.branch-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line-strong);
    margin-top: 12px;
}

.branch-grid .branch-tile,
.branch-grid .leaf-row {
    border-right: 1px solid var(--line-hair);
}

/* ---------------------------------------------------------------------- */
/* 6. Category listing: form factor row, filter rail, product row (§11/12) */
/* ---------------------------------------------------------------------- */

.category-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 22px var(--page-margin);
}

.category-head h1 {
    margin: 0;
}

.category-counts {
    display: flex;
    border: 1px solid var(--line-strong);
}

.category-counts__cell {
    padding: 11px 16px;
    border-right: 1px solid var(--line-mid);
}

.category-counts__cell:last-child {
    border-right: none;
}

.category-counts__label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

.category-counts__n {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.category-branch-content {
    padding: 0 var(--page-margin) 40px;
}

.form-factor-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 var(--page-margin) 22px;
}

.form-factor-row__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

.form-factor-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    background: none;
    cursor: pointer;
    user-select: none;
}

.form-factor-pill:hover {
    background: var(--surface-active);
}

.form-factor-pill__box {
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--line-control);
    background: none;
    flex-shrink: 0;
}

.form-factor-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-factor-pill:has(input:checked) {
    border-color: var(--brass-200);
    background: var(--surface-active);
}

.form-factor-pill:has(input:checked) .form-factor-pill__box {
    border-color: var(--brass-200);
    background: var(--brass-200);
}

.form-factor-pill__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-secondary);
}

.form-factor-pill:has(input:checked) .form-factor-pill__label {
    color: var(--ink-primary);
}

.form-factor-pill__count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.form-factor-pill:has(input:checked) .form-factor-pill__count {
    color: var(--brass-200);
}

.clear-filters {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--brass-200);
    border-bottom: 1px solid var(--brass-line);
    cursor: pointer;
    background: none;
}

.listing {
    display: grid;
    grid-template-columns: 300px 1fr;
    border-top: 1px solid var(--line-mid);
}

.filter-bar {
    display: none;
}

.filter-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    background: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--ink-secondary);
}

.filter-toggle:hover,
.filter-toggle[aria-expanded="true"] {
    border-color: var(--brass-200);
    background: var(--surface-active);
    color: var(--brass-200);
}

.facets {
    background: var(--surface-sunken);
    border-right: 1px solid var(--line-mid);
}

.facets__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line-soft);
}

.facets__head-label {
    font-size: 15px;
    font-weight: 600;
}

.facets__head-active {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.facet-group {
    border-bottom: 1px solid var(--line-soft);
}

.facet-group__label {
    padding: 14px 20px 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--brass-200);
}

.facet {
    padding: 10px 20px 14px;
}

.facet__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-primary);
    margin-bottom: 8px;
}

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

.facet__option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.facet__option-box {
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--line-control);
    flex-shrink: 0;
}

.facet__option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.facet__option:has(input:checked) .facet__option-box {
    border-color: var(--brass-200);
    background: var(--brass-200);
}

.facet__option-label {
    flex: 1;
    font-size: 13px;
    color: var(--ink-secondary);
}

.facet__option:has(input:checked) .facet__option-label {
    color: var(--ink-primary);
}

.facet__option-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.facet-shared {
    padding: 16px 20px 22px;
}

.facet-shared__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
}

.facet-shared__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
}

.facet-shared__row-label {
    color: var(--ink-muted);
}

.facet-shared__row-value {
    font-family: var(--font-mono);
    color: var(--ink-secondary);
    text-align: right;
}

.facet-shared__hint {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.6;
    color: var(--ink-floor);
}

.listing__results {
    min-width: 0;
}

.listing__sort {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line-soft);
}

.listing__count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-secondary);
}

.sort-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-controls__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
}

.sort-pill {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    background: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-secondary);
}

.sort-pill:hover {
    background: var(--surface-active);
}

.sort-pill--active {
    border-color: var(--brass-200);
    background: var(--surface-active);
    color: var(--brass-200);
}

.product-row__head,
.product-row {
    display: grid;
    grid-template-columns: 56px 1fr 300px 150px;
    align-items: center;
    gap: 16px;
    padding: 9px 24px;
}

.product-row__head {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line-mid);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

.product-row__head-price {
    text-align: right;
}

.product-row {
    padding: 14px 24px;
    border-bottom: 1px solid var(--line-hair);
    border-left: 3px solid transparent;
    color: inherit;
    text-decoration: none;
}

.product-row:hover {
    background: var(--surface-field);
}

.product-row--cheapest {
    border-left-color: var(--brass-200);
}

.product-row__compare {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--line-strong);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--line-control);
    cursor: pointer;
    background: none;
}

.product-row__compare--checked {
    border-color: var(--brass-200);
    background: var(--brass-200);
    color: var(--surface-page);
}

.product-row__thumb {
    display: block;
    height: 48px;
    background: repeating-linear-gradient(135deg, #221D17 0 3px, #1A1612 3px 6px);
    border: 1px solid var(--line-mid);
}

.product-row__thumb[src] {
    width: 100%;
    object-fit: contain;
    background: var(--surface-page);
}

.product-row__name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-primary);
}

.product-row__path {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 2px;
}

.product-row__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.spec-chip {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 8px;
    border: 1px solid var(--state-na-border);
    color: var(--ink-secondary);
}

.spec-chip--matched {
    border-color: var(--brass-200);
    color: var(--ink-primary);
}

.product-row__price {
    text-align: right;
}

.price-list {
    display: block;
    font-family: var(--font-mono);
    font-size: 19px;
    font-weight: 600;
}

.price-note {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--brass-200);
    margin-top: 2px;
}

.price-note--muted {
    color: var(--ink-muted);
}

.price-missing {
    display: block;
    color: var(--ink-muted);
    font-size: 13px;
}

.category-price-footnote {
    margin-top: 0;
    padding: 18px 24px 26px;
}

.compare-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px var(--page-margin);
    border-top: 1px solid var(--brass-200);
    background: var(--surface-active);
}

.compare-bar__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--brass-200);
}

.compare-bar__chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.compare-bar__chip {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    background: var(--surface-field);
    font-size: 13px;
    font-weight: 600;
}

.compare-bar__chip button {
    background: none;
    border: none;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    cursor: pointer;
}

.compare-bar__hint {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.compare-bar__action {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 18px;
    border: 1px solid var(--brass-200);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    background: none;
    color: var(--ink-muted);
    cursor: not-allowed;
}

.compare-bar__action--ready {
    background: var(--brass-200);
    color: var(--surface-page);
    cursor: pointer;
}

/* Empty states (design-spec.md §14) */
.empty-state {
    padding: 56px 40px 40px;
}

.empty-state--centered {
    text-align: center;
    padding: 56px 24px;
}

.empty-state__title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.018em;
    max-width: 620px;
}

.empty-state--centered .empty-state__title {
    font-size: 17px;
    max-width: none;
}

.empty-state__body {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-secondary);
    max-width: 620px;
}

.empty-state--centered .empty-state__body {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state__subheading {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin-top: 36px;
}

.empty-state__footnote {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 14px;
}

.empty-state__footnote-mark {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--brass-200);
}

.empty-state__footnote-text {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--ink-muted);
    max-width: 780px;
}

.button-outline {
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin-top: 18px;
    padding: 0 16px;
    border: 1px solid var(--brass-200);
    color: var(--brass-200);
    cursor: pointer;
    background: none;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.button-outline:hover {
    background: var(--surface-active);
}

/* ---------------------------------------------------------------------- */
/* 7. Product page (design-spec.md §8, §9, §10, §12, §13)                 */
/* ---------------------------------------------------------------------- */

.product-header {
    display: grid;
    grid-template-columns: 620px 1fr;
    gap: 44px;
    padding: 34px var(--page-margin) 38px;
    align-items: start;
    max-width: 100%;
}

.product-header__media,
.product-header__text {
    min-width: 0;
    max-width: 100%;
}

.product-header__media {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-header__image {
    height: 520px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line-mid);
    background: repeating-linear-gradient(135deg, #221D17 0 5px, #1A1612 5px 10px);
    display: flex;
    align-items: flex-end;
    padding: 18px;
}

.product-header__image--photo {
    padding: 0;
    background: var(--surface-page);
    align-items: stretch;
}

.product-header__image--photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-header__attribution {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-muted);
    margin: 0;
}

.product-header__placeholder-caption {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--ink-floor);
    margin: 0;
}

.product-header__meta {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-secondary);
    margin-top: 8px;
}

/* Example-price marking (design-spec.md §9). Per-value, never a
   page-level banner or yellow warning box. */
.example-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--brass-200);
    text-transform: uppercase;
}

.example-disclosure {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 0 16px 13px;
}

.example-disclosure__mark {
    color: var(--brass-200);
    font-family: var(--font-mono);
    font-size: 11px;
}

.example-disclosure__text {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--ink-muted);
}

/* Variant selection - zero JS, as before: radio, chip and panel are
   siblings so sibling selectors alone show the checked panel. */
.variants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 var(--page-margin);
}

.variants__heading {
    order: 0;
    flex: 1 0 100%;
    font-size: 14px;
    color: var(--ink-muted);
    margin: 0 0 4px;
}

.variant-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.variant-chip {
    order: 1;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-secondary);
    cursor: pointer;
    user-select: none;
}

.variant-radio:checked + .variant-chip {
    border-color: var(--brass-200);
    background: var(--surface-active);
    color: var(--ink-primary);
}

.variant-radio:focus-visible + .variant-chip {
    outline: 2px solid var(--brass-200);
    outline-offset: 2px;
}

.variant-panel {
    order: 2;
    flex: 1 0 100%;
    display: none;
    margin-top: 20px;
    padding: 0 var(--page-margin) 40px;
}

.variant-radio:checked + .variant-chip + .variant-panel {
    display: block;
}

/* Offer matrix (design-spec.md §10) */
.offer-matrix {
    border: 1px solid var(--line-strong);
    min-width: 0;
    max-width: 100%;
}

.offer-matrix__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.offer-matrix__head {
    display: grid;
    grid-template-columns: 1fr 132px 116px 118px 18px;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line-mid);
}

.offer-matrix__head-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

.offer-matrix__terms {
    display: flex;
}

.offer-matrix__term-label {
    box-sizing: border-box;
    width: 33px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    line-height: 1.2;
    color: var(--ink-muted);
    text-align: center;
    overflow: hidden;
}

.offer-row {
    border-bottom: 1px solid var(--line-hair);
    border-left: 3px solid transparent;
}

.offer-row--cheapest {
    border-left-color: var(--brass-200);
}

.offer-row__summary {
    display: grid;
    grid-template-columns: 1fr 132px 116px 118px 18px;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
}

.offer-row__summary:hover {
    background: var(--surface-field);
}

.offer-row__name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-primary);
}

.offer-row__dots {
    display: flex;
}

.dot {
    width: 9px;
    height: 9px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.dot--value { background: var(--brass-200); }
.dot--absent { background: var(--brass-400); }
.dot--unknown { background: var(--brass-800); }
.dot--na { background: var(--state-na); border: 1px solid var(--state-na-border); }

.offer-row__dot-cell {
    box-sizing: border-box;
    width: 33px;
    display: flex;
    justify-content: center;
}

.offer-row__price {
    text-align: right;
}

.offer-row__price-value {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.offer-row__delta {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    margin-top: 2px;
}

.offer-row__delta--cheapest {
    color: var(--brass-200);
}

.offer-row__go {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border: 1px solid var(--brass-200);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--brass-200);
}

.offer-row--cheapest .offer-row__go {
    background: var(--brass-200);
    color: var(--surface-page);
}

.offer-row__go--missing {
    border: none;
    background: none;
    color: var(--ink-muted);
    cursor: default;
    pointer-events: none;
}

.offer-row--cheapest .offer-row__go--missing {
    background: none;
    color: var(--ink-floor);
}

.offer-row__caret {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-floor);
    text-align: right;
}

.offer-row__terms {
    display: flex;
    border-top: 1px solid var(--line-hair);
    background: var(--surface-sunken);
}

.offer-row__terms[hidden] {
    display: none;
}

.offer-row__term {
    box-sizing: border-box;
    width: 25%;
    padding: 10px 16px;
    border-right: 1px solid var(--line-hair);
}

.offer-row__term-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

.offer-row__term-value {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-secondary);
}

.offer-matrix__more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line-hair);
    cursor: pointer;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--brass-200);
}

.offer-matrix__more[hidden] {
    display: none;
}

.offer-matrix__more:hover {
    background: var(--surface-field);
}

.offer-matrix__legend {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 11px 16px;
    flex-wrap: wrap;
}

.offer-matrix__legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-muted);
}

.offer-matrix__legend-item .dot {
    width: 7px;
    height: 7px;
}

.offer-matrix__legend-hint {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-muted);
}

/* No price for this variant (design-spec.md §14) */
.no-price-box {
    border: 1px dashed var(--line-control);
    padding: 24px;
}

.no-price-box__title {
    font-size: 19px;
    font-weight: 600;
}

.no-price-box__body {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-secondary);
    max-width: 470px;
}

.no-price-box__retailers {
    display: flex;
    margin-top: 18px;
    border-top: 1px solid var(--line-mid);
}

.no-price-box__retailer {
    box-sizing: border-box;
    width: 33.333%;
    padding: 11px 0;
}

.no-price-box__retailer-name {
    font-size: 13px;
    font-weight: 600;
}

.no-price-box__retailer-status {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 3px;
}

/* Key specs */
.key-specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 14px 24px;
    margin: 0 0 28px;
    padding: 0 var(--page-margin);
}

.key-spec {
    border-top: 1px solid var(--line-mid);
    padding-top: 8px;
}

.key-spec__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin: 0 0 3px;
    overflow-wrap: anywhere;
}

.key-spec__value {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-primary);
    overflow-wrap: anywhere;
}

.key-spec__state {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 5px 0 0;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
}

.key-spec--unknown .key-spec__value {
    color: var(--ink-muted);
    font-style: italic;
}

.key-spec--na .key-spec__value {
    color: var(--ink-floor);
}

/* Value-state specification rows (design-spec.md §8) - the single most
   important component: four states, four distinct forms. */
.spec-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 var(--page-margin) 10px;
}

.spec-controls__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
}

.spec-filter {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid var(--line-strong);
    background: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-secondary);
}

.spec-filter:hover {
    background: var(--surface-active);
}

.spec-filter--active {
    border-color: var(--brass-200);
    background: var(--surface-active);
    color: var(--brass-200);
}

.spec-row {
    display: grid;
    grid-template-columns: 1fr 200px 130px 18px;
    align-items: baseline;
    gap: 14px;
    padding: 11px var(--page-margin);
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--line-hair);
    background: none;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
}

.spec-row:hover {
    background: var(--surface-field);
}

.spec-row[hidden] {
    display: none;
}

.spec-row--diff {
    border-left-color: var(--brass-200);
}

.spec-row__label {
    font-size: 14px;
    color: var(--ink-secondary);
}

.spec-row__value {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
}

.spec-row__value--value,
.spec-row__value--absent {
    color: var(--ink-primary);
    font-style: normal;
}

.spec-row__value--unknown {
    color: var(--ink-muted);
    font-style: italic;
}

.spec-row__value--na {
    color: var(--ink-floor);
    font-style: normal;
}

.spec-row__state {
    display: flex;
    align-items: center;
    gap: 7px;
}

.spec-row__state-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
}

.spec-row__caret {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-floor);
    text-align: right;
}

.spec-row__caret-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.spec-detail {
    padding: 4px var(--page-margin) 15px calc(var(--page-margin) + 3px);
    background: var(--surface-sunken);
}

.spec-detail[hidden] {
    display: none;
}

.spec-detail__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    padding: 6px 0 0;
}

.spec-detail__row:first-child {
    padding-top: 9px;
}

.spec-detail__key {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

.spec-detail__value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-secondary);
}

a.spec-detail__value {
    color: var(--brass-200);
}

.spec-detail__value--missing {
    color: var(--ink-muted);
}

.spec-detail__meaning {
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-secondary);
}

.spec-group__label {
    margin: 18px 0 8px;
    padding: 0 16px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--brass-200);
}

.spec-group__label:first-child {
    margin-top: 0;
}

.spec-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

/* Butiker (design-spec.md §12, product page stores list). Superseded on the
   product page itself by .offers-head below (task 0044) - kept because
   retailer.html still uses .stores/.stores__heading for its own carried-
   products list. */
.stores {
    padding: 0 var(--page-margin) 20px;
}

.stores__heading {
    font-size: 14px;
    color: var(--ink-muted);
    margin: 0 0 10px;
}

/* ---------------------------------------------------------------------- */
/* 7A. Product page, 13A port (product-production-handoff.md, task 0044)  */
/* ---------------------------------------------------------------------- */

.product-header__eyebrow {
    margin: 0 0 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

/* Variant selection - zero JS: radio, cell and panel stay siblings so a
   plain sibling selector shows the checked one's offer panel. Replaces the
   earlier pill-shaped .variant-chip with a ruled strip of equal cells
   (design-spec.md §3.2). */
.variant-strip__label {
    margin: 24px 0 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

.variant-strip {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--line-strong);
    min-width: 0;
    max-width: 100%;
}

.variant-cell {
    order: 1;
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    padding: 13px 16px;
    border-right: 1px solid var(--line-mid);
    border-bottom: 3px solid transparent;
    cursor: pointer;
    user-select: none;
}

.variant-cell:hover {
    background: var(--surface-field);
}

.variant-radio:checked + .variant-cell {
    background: var(--surface-field);
    border-bottom-color: var(--brass-200);
}

.variant-radio:focus-visible + .variant-cell {
    outline: 2px solid var(--brass-200);
    outline-offset: 2px;
}

.variant-cell__name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-secondary);
    overflow-wrap: anywhere;
}

.variant-radio:checked + .variant-cell .variant-cell__name {
    color: var(--ink-primary);
}

.variant-cell__meta {
    display: block;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.variant-radio:checked + .variant-cell + .variant-panel {
    display: block;
}

/* The older .variant-panel rule still pads with --page-margin so the
   previous chip-and-container layout could sit full-bleed. The 13A strip
   already lives inside .product-header's own 40px padding, so that extra
   inset would push the offer matrix off the right column. */
.variant-strip .variant-panel {
    margin-top: 0;
    padding: 0;
}

.product-header h1 {
    margin-bottom: 0;
}

.offer-matrix__controls[hidden],
.spec-controls[hidden] {
    display: none;
}

.offers-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 26px 0 10px;
}

.offers-head__title {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.offers-head__heading {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.offers-head__count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

/* Without offer.url anywhere in the register (product-production-handoff.md
   §6.5 - true of every offer in the database today), the "TILL BUTIK"
   column has nothing to render and is dropped rather than left as a dead
   118px gap; the retailer name link already reaches the store page. */
.offer-matrix--no-url .offer-matrix__head,
.offer-matrix--no-url .offer-row__summary {
    grid-template-columns: 1fr 192px 116px 18px;
}

/* 13A specifies 33px term cells in a 132px track, but IBM Plex Mono 8px
   cannot fit BETALSÄTT / ÖPPET KÖP in 33px without colliding. Widen the
   track so the four header labels stay readable while the dots still sit
   in equal cells that line up across rows. */
.offer-matrix__head,
.offer-row__summary {
    grid-template-columns: 1fr 192px 116px 118px 18px;
}

.offer-matrix__term-label,
.offer-row__dot-cell {
    width: 48px;
}

/* Full-width specification section (design-spec.md §8/§9). One panel per
   variant, switched by the page's own :has() rules (see product-family.html)
   rather than a sibling selector, since this section is not a sibling of
   the variant radios. */
.spec-section {
    border-top: 1px solid var(--line-mid);
}

.spec-panel {
    display: none;
}

.spec-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px var(--page-margin);
    border-bottom: 1px solid var(--line-soft);
}

.spec-section__title-group {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.spec-section__title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.spec-section__count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.spec-section__head .spec-controls {
    padding: 0;
}

.spec-row__state .dot {
    width: 8px;
    height: 8px;
}

.js-offer-row[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------- */
/* 8. Retailer pages (design-spec.md §15)                                 */
/* ---------------------------------------------------------------------- */

.stores-index-head {
    padding: 22px var(--page-margin);
}

.stores-index-head h1 {
    margin-bottom: 8px;
}

.stores-index-head__lede {
    margin: 0;
    color: var(--ink-secondary);
}

.retailer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0;
    border: 1px solid var(--line-strong);
    margin: 0 var(--page-margin) 40px;
}

.retailer-card {
    display: block;
    padding: 16px 18px;
    border-right: 1px solid var(--line-hair);
    border-bottom: 1px solid var(--line-hair);
    color: inherit;
}

.retailer-card:hover {
    background: var(--surface-field);
}

.retailer-card__name {
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--ink-primary);
}

.retailer-card__kind {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    margin: 0;
}

.marketplace-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--brass-400);
    background: var(--surface-active);
}

.marketplace-notice__mark {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--brass-200);
}

.marketplace-notice__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-primary);
    margin: 0;
}

.marketplace-notice__body {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-secondary);
    max-width: 560px;
}

.breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px var(--page-margin);
    border-bottom: 1px solid var(--line-soft);
}

.breadcrumb--inline {
    padding: 0;
    border-bottom: none;
    min-width: 0;
}

.retailer-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.retailer-picker__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-floor);
}

.retailer-picker__pill {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--ink-secondary);
}

.retailer-picker__pill:hover {
    background: var(--surface-active);
    color: var(--ink-secondary);
}

.retailer-picker__pill--current,
.retailer-picker__pill--current:hover {
    border-color: var(--brass-200);
    background: var(--surface-active);
    color: var(--brass-200);
}

.retailer-head {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    padding: 32px var(--page-margin) 30px;
    align-items: start;
}

.retailer-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.retailer-identity__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 8px;
    color: var(--ink-floor);
    background: repeating-linear-gradient(135deg, #221D17 0 4px, #1A1612 4px 8px);
}

.retailer-identity__kind {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

.retailer-identity h1 {
    margin: 5px 0 0;
}

.retailer-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line-strong);
    margin-top: 24px;
}

.retailer-facts .key-spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 18px;
    border-right: 1px solid var(--line-hair);
    border-bottom: 1px solid var(--line-hair);
    border-top: none;
}

.retailer-facts .key-spec__label {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--ink-secondary);
    letter-spacing: normal;
    flex-shrink: 0;
    white-space: nowrap;
}

.retailer-facts .key-spec__value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

.retailer-facts .key-spec__value a {
    overflow-wrap: anywhere;
}

.retailer-facts .key-spec__value--missing {
    font-style: italic;
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-weight: 400;
}

.org-number-note {
    margin-top: 9px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.6;
    color: var(--ink-floor);
}

.retailer-set {
    margin-top: 26px;
}

.retailer-set-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line-strong);
    margin-top: 26px;
}

.retailer-set-block {
    box-sizing: border-box;
    border-right: 1px solid var(--line-hair);
}

.retailer-set-block:last-child {
    border-right: none;
}

.retailer-set-block--panel {
    border: 1px solid var(--line-strong);
}

.retailer-set-block__head .dot {
    width: 8px;
    height: 8px;
}

.retailer-set-block__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line-hair);
}

.retailer-set-block__title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-primary);
}

.retailer-set-block__state {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
}

.retailer-set-block__item {
    padding: 10px 18px;
    border-bottom: 1px solid var(--line-hair);
    font-size: 13px;
    color: var(--ink-primary);
    margin: 0;
}

.retailer-set-block__empty {
    padding: 16px 18px;
}

.retailer-set-block__empty-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-primary);
}

.retailer-set-block__empty-title--unchecked {
    color: var(--ink-muted);
}

.retailer-set-block__empty-body {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-muted);
}

.store-location {
    padding: 11px 18px;
    border-bottom: 1px solid var(--line-hair);
}

.store-location__name {
    margin: 0;
    font-weight: 600;
    color: var(--ink-primary);
}

.store-location__address {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    margin: 2px 0 0;
}

.retailer-products {
    border-top: 1px solid var(--line-mid);
}

.retailer-products__intro {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 18px var(--page-margin);
    border-bottom: 1px solid var(--line-soft);
}

.retailer-products__title-group {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.retailer-products__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.retailer-products__count,
.retailer-products__provenance {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.retailer-products__head,
.retailer-products__row {
    display: grid;
    grid-template-columns: 56px 1fr 260px 150px 140px;
    align-items: center;
    gap: 16px;
    padding: 13px var(--page-margin);
}

.retailer-products__head {
    padding: 9px var(--page-margin);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line-mid);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

.retailer-products__head-right {
    text-align: right;
}

.retailer-products__row {
    border-bottom: 1px solid var(--line-hair);
    border-left: 3px solid transparent;
    color: inherit;
    text-decoration: none;
}

.retailer-products__row:hover {
    background: var(--surface-field);
}

.retailer-products__row--cheapest {
    border-left-color: var(--brass-200);
}

.retailer-products__thumb {
    display: block;
    height: 46px;
}

.retailer-products__name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-primary);
}

.retailer-products__price-wrap {
    text-align: right;
}

.retailer-products__price {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.retailer-products__price-wrap .example-badge {
    margin-top: 2px;
}

.retailer-products__footnote {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 14px var(--page-margin) 20px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--ink-muted);
}

.retailer-products__footnote-mark {
    color: var(--brass-200);
}

.empty-state--retailer-products {
    padding: 44px var(--page-margin);
}

.empty-state--retailer-products .empty-state__title {
    font-size: 17px;
}

.retailer-products__variant {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-secondary);
}

.retailer-products__delta {
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: right;
    color: var(--ink-muted);
}

.retailer-products__delta--cheapest {
    color: var(--brass-200);
}

/* ---------------------------------------------------------------------- */
/* 9. Search page (design-spec.md §16)                                    */
/* ---------------------------------------------------------------------- */

.search-hero {
    display: flex;
    justify-content: center;
    padding: 40px var(--page-margin) 0;
}

.search-field-wrap {
    width: 100%;
    max-width: 900px;
    position: relative;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 80px;
    padding: 0 20px;
    border: 1px solid var(--line-strong);
    background: var(--surface-field);
}

.search-field--active {
    border-color: var(--brass-200);
}

.search-field__icon {
    font-family: var(--font-mono);
    font-size: 20px;
    color: var(--ink-tertiary);
    flex-shrink: 0;
}

.search-field input {
    flex: 1;
    min-width: 0;
    height: 40px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink-primary);
    font-family: var(--font-mono);
    font-size: 16px;
}

.search-field input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.search-field__clear {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink-muted);
    cursor: pointer;
    padding: 0 4px;
    background: none;
    border: none;
    flex-shrink: 0;
}

.search-field__enter {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ink-floor);
    border: 1px solid var(--state-na-border);
    padding: 3px 7px;
    flex-shrink: 0;
}

.search-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 1px);
    z-index: 5;
    border: 1px solid var(--line-strong);
    background: var(--surface-raised);
}

.search-suggest[hidden] {
    display: none;
}

.search-suggest__group {
    border-bottom: 1px solid var(--line-hair);
}

.search-suggest__group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 9px 18px;
    background: #1A1612;
}

.search-suggest__group-name {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--brass-200);
}

.search-suggest__group-count {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-muted);
}

.search-suggest__item {
    display: grid;
    grid-template-columns: 1fr 240px 130px;
    align-items: baseline;
    gap: 16px;
    padding: 11px 18px;
    border: none;
    border-top: 1px solid var(--line-hair);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    background: none;
    font: inherit;
    text-align: left;
    width: 100%;
}

.search-suggest__item:hover,
.search-suggest__item--active {
    background: var(--surface-active);
}

.search-suggest__item-name {
    font-size: 14px;
    font-weight: 600;
}

.search-suggest__item-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.search-suggest__item-tail {
    font-family: var(--font-mono);
    font-size: 11px;
    text-align: right;
}

.search-suggest__item-tail--muted {
    color: var(--ink-muted);
}

.search-suggest__item-tail--brass {
    color: var(--brass-200);
}

.search-suggest__empty {
    padding: 18px;
}

.search-suggest__empty-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.search-suggest__empty-meta {
    margin: 5px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.search-idle,
.search-zero {
    display: flex;
    justify-content: center;
    padding: 48px var(--page-margin) 0;
}

.search-zero {
    margin-top: 34px;
    border-top: 1px solid var(--line-mid);
    padding: 56px var(--page-margin);
}

.search-hero[hidden],
.search-idle[hidden],
.search-zero[hidden],
.search-results[hidden],
.search-groups[hidden],
.search-attr-badge[hidden] {
    display: none;
}

.search-idle__inner {
    width: 100%;
    max-width: 900px;
}

.search-scope-label,
.search-try-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin: 0;
}

.search-try-label {
    margin-top: 32px;
    display: block;
}

.search-scope {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line-strong);
    margin-top: 12px;
}

.search-scope__item {
    box-sizing: border-box;
    padding: 16px 18px;
    border-right: 1px solid var(--line-hair);
}

.search-scope__item:last-child {
    border-right: none;
}

.search-scope__n {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 500;
    margin: 0;
}

.search-scope__label {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 600;
}

.search-scope__note {
    margin: 3px 0 0;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.5;
    color: var(--ink-muted);
}

.search-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.search-zero .search-examples {
    justify-content: center;
}

.search-example-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    cursor: pointer;
    background: none;
    color: inherit;
    text-decoration: none;
}

.search-example-chip:hover {
    background: var(--surface-active);
}

.search-example-chip__q {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-primary);
}

.search-example-chip__note {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-muted);
}

.search-zero__inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.search-zero__title {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0;
}

.search-zero__body {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-secondary);
}

.search-results {
    margin-top: 34px;
    border-top: 1px solid var(--line-mid);
}

.search-results__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px var(--page-margin);
    border-bottom: 1px solid var(--line-soft);
}

.search-results__title-group {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.search-results__title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.search-results__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.search-attr-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 13px;
    border: 1px solid var(--brass-200);
    background: var(--surface-active);
}

.search-attr-badge .dot {
    width: 8px;
    height: 8px;
}

.search-attr-badge__text {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--brass-200);
}

.search-result-row__head,
.search-result-row {
    display: grid;
    grid-template-columns: 56px 1fr 300px 130px 150px;
    align-items: center;
    gap: 16px;
    padding: 13px var(--page-margin);
}

.search-result-row__head {
    padding: 9px var(--page-margin);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line-mid);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
}

.search-result-row__head-price {
    text-align: right;
}

.search-result-row {
    border-bottom: 1px solid var(--line-hair);
    border-left: 3px solid transparent;
    color: inherit;
    text-decoration: none;
}

.search-result-row:hover {
    background: var(--surface-field);
}

.search-result-row--priced {
    border-left-color: var(--brass-200);
}

.search-result-row__thumb {
    display: block;
    height: 46px;
}

.search-result-row__thumb[src] {
    width: 100%;
    object-fit: contain;
    border: 1px solid var(--line-mid);
    background: var(--surface-page);
}

.search-result-row__name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.search-result-row__path {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    margin-top: 2px;
}

.search-result-row__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.search-result-row__match {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-secondary);
}

.search-result-row__match--stacked {
    display: none;
    margin-top: 4px;
    color: var(--ink-muted);
}

.search-result-row__price {
    text-align: right;
}

.search-result-row__price-value {
    font-size: 17px;
}

.search-result-row__price-value--muted {
    color: var(--ink-muted);
}

.search-groups {
    margin: 0 var(--page-margin) 28px;
    border: 1px solid var(--line-strong);
    background: var(--surface-raised);
}

.search-groups .search-suggest__item {
    width: 100%;
}

.search-noscript {
    padding: 40px var(--page-margin);
    max-width: 640px;
}

.search-noscript p {
    margin: 0;
    color: var(--ink-secondary);
}

.search-results__footnote {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 14px var(--page-margin) 20px;
}

/* ---------------------------------------------------------------------- */
/* 10. Shared placeholders, footer                                        */
/* ---------------------------------------------------------------------- */

.image-placeholder {
    background: repeating-linear-gradient(135deg, #221D17 0 3px, #1A1612 3px 6px);
    border: 1px solid var(--line-mid);
}

.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--line-mid);
    background: var(--surface-raised);
    flex-shrink: 0;
}

.site-footer .container {
    padding-top: 18px;
    padding-bottom: 18px;
}

.site-footer__text {
    margin: 0;
    color: var(--ink-muted);
    font-size: 12px;
}

.site-footer__text a {
    color: var(--brass-200);
}

/* fragments/footer.html's "footer-home" fragment (design-spec.md §3.9/8A) -
   a modifier on the shared .site-footer rather than a rewrite of it, since
   category/product/retailer/search pages still render the plain "footer"
   fragment above and must keep its plate-and-sentence look until each of
   those screens has its own visual port (production handoff §2.3). */
.site-footer--home {
    margin-top: auto;
    background: none;
    border-top: 1px solid var(--line-soft);
}

.site-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    padding: 18px var(--page-margin);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 22px;
    letter-spacing: 0.06em;
    color: var(--ink-secondary);
}

.site-footer__links a {
    color: var(--ink-secondary);
    border-bottom: 1px solid #332C23;
}

/* ---------------------------------------------------------------------- */
/* 11. Responsive (design-spec.md §17)                                    */
/* ---------------------------------------------------------------------- */

@media (max-width: 1279px) {
    :root {
        --page-margin: 24px;
    }

    .category-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .category-panel__grid,
    .branch-grid,
    .search-scope {
        grid-template-columns: repeat(4, 1fr);
    }

    .key-specs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1023px) {
    .listing {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
    }

    .listing__sort {
        flex-wrap: wrap;
        padding-left: var(--page-margin);
        padding-right: var(--page-margin);
    }

    .offer-matrix--no-url .offer-matrix__head,
    .offer-matrix--no-url .offer-row__summary {
        grid-template-columns: minmax(0, 1fr) minmax(0, 192px) minmax(0, 100px);
    }

    .filter-bar {
        display: flex;
        align-items: center;
        padding: 12px var(--page-margin);
        border-top: 1px solid var(--line-mid);
    }

    .listing:not(.listing--filters-open) .facets {
        display: none;
    }

    .facets {
        border-right: none;
        border-bottom: 1px solid var(--line-mid);
    }

    .listing--filters-open .facets {
        display: block;
    }

    .offer-matrix__head,
    .offer-row__summary {
        grid-template-columns: 1fr 192px 100px;
    }

    .offer-row__go,
    .offer-row__caret {
        display: none;
    }

    .offer-row__summary {
        cursor: pointer;
    }

    .product-header {
        grid-template-columns: 1fr;
    }

    .product-header__image {
        height: 360px;
        width: 100%;
        max-width: 100%;
    }

    .retailer-head {
        grid-template-columns: 1fr;
    }

    .retailer-products__head,
    .retailer-products__row {
        grid-template-columns: 56px 1fr 150px;
    }

    .retailer-products__variant,
    .retailer-products__variant-head,
    .retailer-products__delta,
    .retailer-products__delta-head {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .listing--filters-open .facets {
        position: absolute;
        z-index: 6;
        top: 0;
        left: 0;
        width: min(320px, 100%);
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        border: 1px solid var(--line-strong);
        border-bottom: 1px solid var(--line-strong);
    }
}

@media (max-width: 767px) {
    .category-grid,
    .branch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* design-spec.md v1.6: opened homepage panel is compact full-width
       rows. Root .category-grid stays two columns; .branch-grid is
       unchanged. */
    .category-panel__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #category-panel .branch-tile,
    #category-panel .leaf-row {
        display: grid;
        align-items: center;
        column-gap: 10px;
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        padding: 10px 16px;
        box-sizing: border-box;
    }

    #category-panel .branch-tile {
        grid-template-columns: 36px minmax(128px, 1fr) auto 12px;
    }

    #category-panel .leaf-row {
        grid-template-columns: 36px minmax(128px, 1fr) auto;
    }

    /* Named tracks, not auto-placement: a missing icon node must not
       put the name into the 36 px first column (review findings 1–2).
       Column 1 stays empty; do not paint a placeholder glyph. */
    #category-panel .branch-tile__icon,
    #category-panel .leaf-row__icon {
        grid-column: 1;
        width: 36px;
        height: 32px;
        flex-shrink: 0;
    }

    #category-panel .branch-tile__name,
    #category-panel .leaf-row__name {
        grid-column: 2;
        justify-self: stretch;
        min-width: 128px;
        width: auto;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-height: 1.3;
    }

    #category-panel .branch-tile__meta,
    #category-panel .leaf-row__meta {
        grid-column: 3;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        text-align: right;
        max-width: 90px;
    }

    #category-panel .branch-tile__arrow {
        grid-column: 4;
        justify-self: end;
        flex-shrink: 0;
    }

    .search-scope {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-results__head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .product-row,
    .product-row__head,
    .search-result-row,
    .search-result-row__head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 150px);
        min-width: 0;
        padding-left: var(--page-margin);
        padding-right: var(--page-margin);
    }

    .listing__sort {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
    }

    .sort-controls {
        flex-wrap: wrap;
        min-width: 0;
    }

    .spec-section__head {
        flex-wrap: wrap;
        min-width: 0;
    }

    .spec-controls {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }

    .spec-filter {
        height: 44px;
    }

    .key-specs {
        grid-template-columns: minmax(0, 1fr);
    }

    .no-price-box__retailers {
        flex-wrap: wrap;
    }

    .no-price-box__retailer {
        width: 100%;
    }

    .search-suggest__item {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .search-suggest__item-tail {
        text-align: left;
    }

    .category-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .category-counts {
        width: 100%;
    }

    .category-counts__cell {
        flex: 1;
        min-width: 0;
    }

    .form-factor-row {
        flex-wrap: wrap;
    }

    .product-row__compare,
    .product-row__thumb,
    .product-row__head span:first-child,
    .product-row__head span:nth-child(3),
    .search-result-row__thumb,
    .search-result-row__match--col,
    .search-result-row__head span:first-child,
    .search-result-row__head span:nth-child(3),
    .search-result-row__head span:nth-child(4) {
        display: none;
    }

    .product-row__identity {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .product-row__price {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .product-row__specs {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 8px;
        min-width: 0;
        flex-wrap: wrap;
    }

    .search-result-row__identity {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .search-result-row__price {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .search-result-row__specs {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 8px;
        min-width: 0;
    }

    .search-result-row__match--stacked {
        display: block;
    }

    .offer-matrix__head {
        display: none;
    }

    .offer-row__summary,
    .offer-matrix--no-url .offer-row__summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .offer-row__dots {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .offer-row__go,
    .offer-row__caret {
        display: flex;
    }

    .offer-row__go {
        height: 44px;
        width: fit-content;
        padding: 0 14px;
        justify-self: start;
    }

    .offer-row__caret {
        min-height: 44px;
        align-items: center;
        justify-content: flex-end;
    }

    .offer-row__terms {
        flex-wrap: wrap;
    }

    .offer-row__term {
        width: 50%;
    }

    .offer-matrix__controls {
        flex-wrap: wrap;
        min-width: 0;
    }

    .variant-cell {
        flex: 1 1 calc(50% - 1px);
        min-width: 0;
    }

    /* product-production-handoff.md §8: the one responsive rule design-
       spec.md's own section 11 does not already cover - the specification
       row's 1fr 200px 130px 18px grid overflows a 375px viewport. Two rows
       instead: label and value share the first, state and caret the
       second. */
    .spec-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        row-gap: 6px;
    }

    .spec-row__label {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .spec-row__value {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .spec-row__state {
        grid-column: 1;
        grid-row: 2;
    }

    .spec-row__caret-button {
        grid-column: 2;
        grid-row: 2;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .site-header__inner {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .site-header__end,
    .site-header__search-wrap {
        width: 100%;
        min-width: 0;
    }

    .site-header__search {
        width: 100%;
        max-width: 100%;
        height: 44px;
        box-sizing: border-box;
    }

    .site-header {
        height: auto;
        padding: 12px 0;
    }

    .home-search,
    .home-register,
    .search-field-wrap {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .home-search__field,
    .search-field {
        padding: 0 12px;
        gap: 10px;
        min-width: 0;
    }

    .home-search__field input,
    .search-field input {
        min-width: 0;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .home-search__icon,
    .search-field__icon {
        font-size: 16px;
    }

    .breadcrumb {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow: hidden;
        min-width: 0;
    }

    .breadcrumb__link {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .breadcrumb__current {
        flex: 0 0 auto;
        overflow: visible;
        text-overflow: unset;
        white-space: nowrap;
        max-width: none;
    }

    .category-panel__crumb,
    .category-panel__count {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .branch-tile__meta,
    .leaf-row__meta {
        white-space: normal;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 16px;
    }

    .site-footer__links {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
    }

    .category-tile, .branch-tile, .leaf-row, .form-factor-pill,
    .facet__option, .sort-pill, .spec-filter, .button-outline,
    .search-example-chip, .search-suggest__item, .search-result-row,
    .retailer-picker__pill, .retailer-card, .filter-toggle,
    .category-panel__back, .offer-row__go, .spec-row__caret-button {
        min-height: 44px;
    }

    .category-panel__back {
        height: 44px;
    }

    .sort-pill {
        height: 44px;
    }

    .retailer-facts,
    .retailer-set-grid {
        grid-template-columns: 1fr;
    }

    .retailer-set-block {
        border-right: none;
        border-bottom: 1px solid var(--line-hair);
    }

    .breadcrumb-bar {
        flex-wrap: wrap;
        row-gap: 10px;
        min-width: 0;
    }

    .retailer-picker {
        flex-shrink: 1;
        min-width: 0;
        max-width: 100%;
    }

    .retailer-picker__pill {
        height: 44px;
    }

    .retailer-facts a {
        min-height: 0;
    }

    .retailer-facts .key-spec__label {
        white-space: normal;
    }

    .retailer-products__head,
    .retailer-products__row {
        grid-template-columns: minmax(0, 1fr) 120px;
    }

    .retailer-products__thumb {
        display: none;
    }

    .prose a[href^="mailto:"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* The generated header search is an input.site-header__search, not a
   wrapper. Height is 44 px (design-spec.md §4 / v1.5); a 36 px
   compatibility rule must not win. */
input.site-header__search {
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--line-strong);
    background: var(--surface-field);
    color: var(--ink-primary);
    font-family: var(--font-sans);
    box-sizing: border-box;
}

.product-card__image-placeholder { height: 48px; background: repeating-linear-gradient(135deg, #221D17 0 3px, #1A1612 3px 6px); border: 1px solid var(--line-mid); }
.store__example { display: block; color: var(--brass-200); font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.store-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line-strong); }
.store { display: grid; grid-template-columns: 1fr 116px; gap: 16px; align-items: center; min-height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--line-hair); }
.store--cheapest { border-left: 3px solid var(--brass-200); }
.store__name { color: var(--ink-primary); font-weight: 600; }
.store__price { font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.store__price-wrap { text-align: right; }

@media (max-width: 767px) {
    .store { grid-template-columns: 1fr; }
}