/* LATVERA lux catalog views (B13, lane D): #catalog, ?category=outdoor|glass|facade|aluminum, ?family=f1…f6.
 * CSS-first over the untouched catalog-experience.js markup, so the publication documents (/catalog/, /collections/*) get
 * the same grammar. Archetype: the reference "Choose" opener + its menu list with one image card
 * (ref:journey/desktop/frames/008_y1800.jpg, ref:journey/extra/desktop/00-menu/02-settled.jpg; R3 §2.3; GRAMMAR §8.12).
 * Every selector sits under #detailDialog .lv-catalog (GRAMMAR §0) — never a bare .lv-product (the homepage contact).
 * Nothing here removes a provenance line or a supplier attribution (GRAMMAR §6 (a); truth.mjs (5)): texts that leave the
 * visual layer only as chrome are listed in _lux/checks/removed-strings.json (B13). */

/* ── Root and container ───────────────────────────────────────────────────────────────────────────────────────────── */
#detailDialog #detailContent:has(> .lv-catalog) { padding:0; }
#detailDialog .lv-catalog {
  --lv-dialog-top:0px;
  --lux-cat-card:calc(var(--lux-w, 100vw) * .3);
  padding:var(--lux-close) 0 0;
  color:var(--lux-cream);
}
/* Publication documents (/catalog/, /collections/*) keep their site bar; it takes the page's one text edge (32 / 1408 at
 * 1440, re-measured for audit D-m5) and 44 px targets for its links (MASTER §3.7; they measured 21 px). */
html[data-publication="true"] #detailDialog:has(.lv-catalog) .detail-top { padding-inline:var(--lux-edge); }
html[data-publication="true"] #detailDialog:has(.lv-catalog) .detail-top :is(a, button) { display:inline-flex; align-items:center; min-height:44px; }
/* The route heading receives programmatic focus (app.js:601); a heading is not a control, so it draws no ring. */
#detailDialog .lv-catalog #detailTitle:focus-visible { outline:none; box-shadow:none; }

/* ── Opener: note (eyebrow sentence) → 50u → the mega headline → counts (GRAMMAR §4 opener anatomy) ──────────────── */
#detailDialog .lv-catalog .lv-catalog-header {
  display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:0 var(--lux-edge); margin:0;
}
#detailDialog .lv-catalog .lv-catalog-header > div { display:contents; }
#detailDialog .lv-catalog .lv-catalog-header .lv-eyebrow { display:none; }
#detailDialog .lv-catalog .lv-catalog-intro > p {
  order:-1; max-width:calc(700 * var(--lux-unit)); margin:0 0 calc(50 * var(--lux-unit));
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream);
}
#detailDialog .lv-catalog .lv-catalog-header #detailTitle {
  margin:0; font-size:var(--lux-fs-mega); line-height:.94; letter-spacing:-.06em; font-weight:400; color:var(--lux-cream);
}
/* The aluminum view without a family: its note is the heading, word for word ("Architecture, in profile.",
 * catalog-experience.js:6 notes.aluminum = the :88 title), so the eyebrow slot would repeat the headline right under it.
 * The note leaves (audit D2-M4; removed-strings.json B13, duplicate, movedTo #detailTitle); on a family view the note is
 * the family's description and stays. CSS, so the publication document /collections/aluminum/ reads the same. */
#detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=aluminum"]):not(:has([data-lv-family] option[selected])) .lv-catalog-intro > p {
  display:none;
}
#detailDialog .lv-catalog .lv-catalog-counts {
  display:flex; flex-wrap:wrap; gap:4px 24px; margin-top:calc(40 * var(--lux-unit));
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
#detailDialog .lv-catalog .lv-catalog-counts strong {
  display:inline; margin-right:.3em; font:inherit; letter-spacing:inherit; color:var(--lux-cream);
}
/* Category views show their own count in the tab; the whole-catalog counts stay for screen readers only (they carry the
 * "ASAŞ aluminum models" attribution, which never leaves the document). */
#detailDialog .lv-catalog:has(.lv-catalog-tab.is-active) .lv-catalog-counts {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── Controls: a row of collection links, then the underline search field; nothing is pinned ──────────────────────── */
#detailDialog .lv-catalog .lv-catalog-controls {
  position:static; z-index:auto; margin-top:calc(100 * var(--lux-unit)); padding:0 var(--lux-edge); border:0; background:none;
}
#detailDialog .lv-catalog .lv-catalog-tabs { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 calc(50 * var(--lux-unit)); }
#detailDialog .lv-catalog .lv-catalog-tab {
  position:relative; display:inline-block; min-height:44px; padding:8px 0; border:0; border-radius:0; background:none;
  font-size:var(--lux-fs-sub); line-height:1.12; letter-spacing:-.006em; color:var(--lux-taupe);
  transition:color .3s var(--lux-ease-ui);
}
#detailDialog .lv-catalog .lv-catalog-tab > span {
  margin-left:.35em; font-size:var(--lux-fs-small); letter-spacing:-.015em; color:inherit;
}
#detailDialog .lv-catalog .lv-catalog-tab > span::before { content:"("; }
#detailDialog .lv-catalog .lv-catalog-tab > span::after { content:")"; }
#detailDialog .lv-catalog .lv-catalog-tab.is-active { color:var(--lux-cream); background:none; }
/* The active tab's count repeats its group heading's in another format ("Outdoor (5)" over "(LATVERA · 05)"): the heading
 * keeps the count, the tab keeps it for screen readers only (audit D2-m7 c). */
#detailDialog .lv-catalog .lv-catalog-tab.is-active > span {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
#detailDialog .lv-catalog .lv-catalog-tab.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:6px; height:1px; background:var(--lux-cream);
}
#detailDialog .lv-catalog .lv-catalog-tools {
  display:flex; flex-wrap:wrap; align-items:center; gap:16px calc(50 * var(--lux-unit)); margin-top:calc(40 * var(--lux-unit));
}
#detailDialog .lv-catalog .lv-search {
  position:relative; flex:0 1 calc(760 * var(--lux-unit)); min-width:min(100%, 440px); max-width:none; gap:12px;
  border-bottom:1px solid var(--lux-taupe);
}
#detailDialog .lv-catalog .lv-search::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--lux-cream);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .3s var(--lux-ease-fill); pointer-events:none;
}
#detailDialog .lv-catalog .lv-search:focus-within::after { transform:scaleX(1); }
#detailDialog .lv-catalog .lv-search > span[aria-hidden] { display:none; }
#detailDialog .lv-catalog .lv-search input {
  -webkit-appearance:none; appearance:none; min-height:44px; padding:8px 0; text-overflow:ellipsis;
  font-size:var(--lux-fs-sub); line-height:1.12; letter-spacing:-.006em; color:var(--lux-cream);
}
#detailDialog .lv-catalog .lv-search input::placeholder { color:var(--lux-taupe); opacity:1; }
/* One indicator for the whole field (audit D2-m2): the cream line grows along the underline (:focus-within above) and the
 * ring wraps the field — input and submit arrow — at the field's own square corners, never the input alone. The native
 * search-cancel glyph is a loose icon (GRAMMAR §5.3); "Clear search ×" already clears the query. */
#detailDialog .lv-catalog .lv-search input:focus-visible { outline:none; box-shadow:none; }
#detailDialog .lv-catalog .lv-search:has(input:focus-visible) {
  outline:2px solid var(--cream); outline-offset:3px; box-shadow:0 0 0 5px var(--ground); border-radius:0;
}
#detailDialog .lv-catalog .lv-search input::-webkit-search-cancel-button,
#detailDialog .lv-catalog .lv-search input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; display:none; }
/* Submit: the text arrow at the end of the field, at the field's own size (GRAMMAR §5.3: a text arrow in a label). */
#detailDialog .lv-catalog .lv-search button {
  display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:0;
  background:none; color:var(--lux-cream); font-size:var(--lux-fs-sub); line-height:1; transition:color .3s var(--lux-ease-ui);
}
#detailDialog .lv-catalog .lv-all-link {
  position:relative; display:inline-flex; align-items:center; min-height:44px; margin-left:auto;
  font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-taupe); text-decoration:none;
}
#detailDialog .lv-catalog .lv-all-link.is-active { color:var(--lux-cream); text-decoration:none; }
#detailDialog .lv-catalog .lv-all-link::after {
  content:""; position:absolute; left:0; right:0; bottom:12px; height:1px; background:currentColor;
  transform-origin:0 50%; transition:transform .6s var(--lux-ease-out);
}
/* Aluminum family filter: an underline field in the small role; the loose line icon goes (GRAMMAR §5.3). */
#detailDialog .lv-catalog .lv-family-select { min-width:0; max-width:calc(420 * var(--lux-unit)); gap:0; }
#detailDialog .lv-catalog .lv-family-select > .lv-line-icon { display:none; }
#detailDialog .lv-catalog .lv-family-select select {
  min-height:44px; padding:8px 24px 8px 0; border:0; border-bottom:1px solid var(--lux-taupe); border-radius:0;
  background-color:var(--lux-ground); color:var(--lux-cream);
  font-size:var(--lux-fs-small); letter-spacing:-.015em;
}
/* The results line stays a live region; it is shown only while a search is active (then it is feedback, not chrome). */
#detailDialog .lv-catalog .lv-results-summary {
  display:flex; flex-wrap:wrap; align-items:center; gap:0 24px; min-height:0; margin:0; padding:0 var(--lux-edge);
  font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
#detailDialog .lv-catalog .lv-results-summary > p {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
#detailDialog .lv-catalog .lv-results-summary:has([data-lv-clear]) { margin-top:calc(30 * var(--lux-unit)); }
#detailDialog .lv-catalog .lv-results-summary:has([data-lv-clear]) > p {
  position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; white-space:normal;
}
#detailDialog .lv-catalog .lv-results-note { display:none; }
#detailDialog .lv-catalog .lv-results-summary .lv-text-link {
  position:relative; min-height:44px; padding:0; font-size:var(--lux-fs-small); letter-spacing:-.015em;
  color:var(--lux-cream); text-decoration:none;
}

/* ── Layout: the index (≈ 60 %) and one image card (30vw) at the 8 px frame, the menu archetype ──────────────────── */
#detailDialog .lv-catalog .lv-catalog-layout {
  display:grid; grid-template-columns:minmax(0, 1fr) var(--lux-cat-card); column-gap:calc(140 * var(--lux-unit)); align-items:start;
  margin-top:calc(100 * var(--lux-unit)); padding:0 8px 0 var(--lux-edge);
}
#detailDialog .lv-catalog .lv-product-index { grid-column:1; grid-row:1; min-width:0; }
#detailDialog .lv-catalog .lv-supplier-note {
  max-width:calc(700 * var(--lux-unit)); margin:0 0 calc(60 * var(--lux-unit));
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-taupe);
}

/* ── Index rows (GRAMMAR §8.12): number, name taupe → cream, the category in brackets; hairlines, no thumbnails ────── */
#detailDialog .lv-catalog .lv-index-group { margin:0 0 calc(100 * var(--lux-unit)); }
#detailDialog .lv-catalog .lv-index-group:last-child { margin-bottom:0; }
#detailDialog .lv-catalog .lv-group-heading {
  display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:baseline; gap:4px 12px; padding:0 0 calc(24 * var(--lux-unit));
}
#detailDialog .lv-catalog .lv-group-heading h3 {
  margin:0; font-size:var(--lux-fs-sub); line-height:1.12; letter-spacing:-.006em; font-weight:400; color:var(--lux-cream);
}
#detailDialog .lv-catalog .lv-group-heading p {
  margin:0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; text-transform:none; color:var(--lux-taupe);
}
#detailDialog .lv-catalog .lv-group-heading p::before { content:"("; }
#detailDialog .lv-catalog .lv-group-heading p::after { content:")"; }
/* The aria-hidden slash is drawn as "·": (LATVERA · 05), (ASAŞ aluminum · 19) — the words are the existing text. */
#detailDialog .lv-catalog .lv-group-heading p > span { padding:0; font-size:0; }
#detailDialog .lv-catalog .lv-group-heading p > span::before { content:"·"; font-size:var(--lux-fs-small); }
#detailDialog .lv-catalog .lv-index-row {
  display:grid; grid-template-columns:calc(80 * var(--lux-unit)) minmax(0, 1fr) auto; align-items:baseline; gap:0 16px;
  width:100%; min-height:44px; padding:calc(24 * var(--lux-unit)) 0; border:0; border-top:1px solid var(--lux-hair);
  background:none; color:var(--lux-taupe); transition:none;
}
#detailDialog .lv-catalog .lv-index-row:is(:hover, :focus-visible, .is-previewed) { padding-inline:0; background:none; }
#detailDialog .lv-catalog .lv-index-row:focus-visible { outline-offset:3px; }
#detailDialog .lv-catalog .lv-index-number {
  align-self:baseline; padding:0; font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
#detailDialog .lv-catalog .lv-index-copy { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; min-width:0; }
#detailDialog .lv-catalog .lv-index-name {
  display:block; font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.004em; font-weight:400; color:var(--lux-taupe);
  overflow-wrap:anywhere; transition:color .3s var(--lux-ease-ui);
}
#detailDialog .lv-catalog .lv-index-row:is(:focus-visible, .is-previewed, [aria-current]) .lv-index-name { color:var(--lux-cream); }
#detailDialog .lv-catalog .lv-index-type {
  display:inline-block; margin:0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em;
  text-transform:none; color:var(--lux-taupe);
}
#detailDialog .lv-catalog .lv-index-type::before { content:"("; }
#detailDialog .lv-catalog .lv-index-type::after { content:")"; }
/* Sentence case only on LATVERA rows, which hold the all-caps data category; ASAŞ rows hold modelName, never re-cased.
 * The opening bracket floats: an inline ::before "(" would itself become the ::first-letter (Chromium 153 and WebKit 26.5,
 * measured), leaving "(louvered roof system)". */
#detailDialog .lv-catalog .lv-index-row:not([data-product^="asas-"]) .lv-index-type { text-transform:lowercase; }
#detailDialog .lv-catalog .lv-index-row:not([data-product^="asas-"]) .lv-index-type::before { float:left; }
#detailDialog .lv-catalog .lv-index-row:not([data-product^="asas-"]) .lv-index-type::first-letter { text-transform:uppercase; }
#detailDialog .lv-catalog .lv-index-thumb { display:none; }
#detailDialog .lv-catalog .lv-index-arrow {
  align-self:center; font-size:19px; line-height:1; color:var(--lux-cream); opacity:0; transition:opacity .3s var(--lux-ease-ui);
}
/* The arrow is a hover / focus cue only (B13); .is-previewed also follows the reading line (lux/routes.js), where it only
 * turns the name cream, the row whose image the card shows. */
#detailDialog .lv-catalog .lv-index-row:focus-visible .lv-index-arrow { opacity:1; }
/* Outdoor, glass and facade views carry a handful of systems: their names stand at the name role (B13). */
#detailDialog .lv-catalog:has(.lv-catalog-tab.is-active):not(:has(.lv-supplier-note)) .lv-index-name {
  font-size:var(--lux-fs-name); line-height:.93; letter-spacing:-.055em;
}
#detailDialog .lv-catalog:has(.lv-catalog-tab.is-active):not(:has(.lv-supplier-note)) .lv-index-row {
  padding:calc(30 * var(--lux-unit)) 0;
}

/* ── The one image card: follows hover and focus (catalog-experience.js:225-236); provenance kept on the card ─────── */
#detailDialog .lv-catalog .lv-preview {
  grid-column:2; grid-row:1; position:sticky; top:8px; display:grid; grid-template-columns:minmax(0, 1fr); min-width:0; padding:0;
}
#detailDialog .lv-catalog .lv-preview-button {
  grid-area:1 / 1; display:block; width:100%; border-radius:var(--radius); overflow:hidden; background:var(--lux-panel);
}
#detailDialog .lv-catalog .lv-preview-button:focus-visible { outline-offset:-10px; }
#detailDialog .lv-catalog .lv-preview-media { aspect-ratio:.8; background:var(--lux-panel); }
#detailDialog .lv-catalog .lv-preview-image { border-radius:0; }
/* Every photograph fills its frame (GRAMMAR §6: never contain on a coloured box) — also VERSA's saved frames, whose every
 * edge stays one click away in the gallery viewer (gallery-navigation.css keeps contain for this card; overridden here). */
#detailDialog .lv-catalog .lv-preview-button:not(.lv-preview-button--supplier) .lv-preview-image { object-fit:cover; }
#detailDialog .lv-catalog .lv-preview-media::after {
  content:""; position:absolute; inset:0; z-index:2; background:var(--lux-scrim-bottom); pointer-events:none;
}
#detailDialog .lv-catalog .lv-preview-open,
#detailDialog .lv-catalog .lv-preview-hint,
#detailDialog .lv-catalog .lv-preview-mark,
#detailDialog .lv-catalog .lv-preview-caption h3 { display:none; }
#detailDialog .lv-catalog .lv-preview > .lv-provenance {
  grid-area:1 / 1; align-self:end; position:relative; z-index:3; margin:0; padding:0 24px 22px; pointer-events:none;
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream);
}
#detailDialog .lv-catalog .lv-preview-caption { display:block; padding:calc(20 * var(--lux-unit)) 0 0; }
#detailDialog .lv-catalog .lv-preview-caption > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
/* The brand line is the one eyebrow kept: brackets, no case change — "(LATVERA / Outdoor)", "(ASAŞ / Supplier model)". */
#detailDialog .lv-catalog .lv-preview-caption .lv-eyebrow,
#detailDialog .lv-catalog .lv-preview-caption [data-lv-preview-description] {
  display:block; margin:0; max-width:none; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em;
  text-transform:none; color:var(--lux-taupe);
}
#detailDialog .lv-catalog .lv-preview-caption .lv-eyebrow::before { content:"("; }
#detailDialog .lv-catalog .lv-preview-caption .lv-eyebrow::after { content:")"; }
/* A supplier product visual is a white cut: it sits on its cream tile, multiplied (the ASAŞ route thumbnail, OD-10),
 * centred in the dark card; the fallback under it is only shown when the image fails, as before. */
#detailDialog .lv-catalog .lv-preview-button--supplier { display:grid; place-items:center; aspect-ratio:.8; }
#detailDialog .lv-catalog .lv-preview-button--supplier .lv-preview-media {
  width:66%; aspect-ratio:4 / 3; border-radius:var(--lux-r-nested); background:#f4efe7;
}
#detailDialog .lv-catalog .lv-preview-button--supplier .lv-preview-media::after { content:none; }
#detailDialog .lv-catalog .lv-preview-button--supplier .lv-preview-image { object-fit:contain; padding:6%; mix-blend-mode:multiply; }
#detailDialog .lv-catalog .lv-preview-button--supplier .lv-preview-media:not(.has-image-error) > .lv-image-fallback { clip-path:inset(50%); }
#detailDialog .lv-catalog .lv-preview-button--supplier + .lv-preview-caption + .lv-provenance { color:var(--lux-taupe); }

/* Facade view: one system, so the card grows to the whole right half — a full-height house card (SP-K2-06). */
#detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=facade"]) .lv-catalog-layout {
  grid-template-columns:minmax(0, 1fr) calc(var(--lux-w, 100vw) / 2 - 8px); column-gap:calc(60 * var(--lux-unit));
}
#detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=facade"]) .lv-preview-media {
  aspect-ratio:auto; height:calc(100svh - 16px);
}
/* One row beside a full-height card left a viewport of empty ground on the left (audit D2-m7 d). Above 1000 px the view is
 * one grid: the opener, the controls and the results line across, then the row and — beneath it, in the left column — the
 * closing statement, whose last line meets the card's bottom edge, while the card holds the right half. */
@media (min-width:1001px) {
  #detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=facade"]):has(> .lv-catalog-layout) {
    display:grid; grid-template-columns:minmax(0, 1fr) calc(var(--lux-w, 100vw) / 2 - 8px); column-gap:calc(60 * var(--lux-unit)); align-items:start;
  }
  #detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=facade"]):has(> .lv-catalog-layout) > :is(.lv-catalog-header, .lv-catalog-controls, .lv-results-summary) { grid-column:1 / -1; }
  #detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=facade"]):has(> .lv-catalog-layout) > .lv-catalog-layout { display:contents; }
  #detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=facade"]):has(> .lv-catalog-layout) .lv-product-index {
    grid-column:1; grid-row:4; margin-top:calc(100 * var(--lux-unit)); padding-left:var(--lux-edge);
  }
  #detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=facade"]):has(> .lv-catalog-layout) .lv-preview {
    grid-column:2; grid-row:4 / span 2; margin:calc(100 * var(--lux-unit)) 8px calc(var(--lux-close) + 72px) 0;
  }
  #detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=facade"]):has(> .lv-catalog-layout) > .lv-catalog-footer {
    grid-column:1; grid-row:5; align-self:stretch; grid-template-columns:minmax(0, 1fr); align-content:end; padding-right:0;
  }
}

/* Aluminum and family views: white cut images only, so no image card — the preview is hidden entirely (B13, SP-A02;
 * D-M1: the earlier cream tile was a light surface outside the studio stage, GRAMMAR §2). The supplier attribution stays
 * visible in .lv-supplier-note and in every "(ASAŞ aluminum · n)" group heading. The preview's brand line and its
 * "Supplier product visual" label described the image this rule stops showing, so they leave with it: listed in
 * _lux/checks/removed-strings.json B13, with the GRAMMAR §6(a) vs B13 conflict flagged for the integrator. */
#detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=aluminum"]) .lv-preview { display:none; }
/* …and no card column either (audit D2-M4): the index takes the full measure between the two text edges, instead of ending
 * at 895 of 1440 beside 540 px of empty ground. */
@media (min-width:1001px) {
  #detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=aluminum"]) .lv-catalog-layout {
    grid-template-columns:minmax(0, 1fr); padding:0 var(--lux-edge);
  }
}

/* ── Footer: the closing statement — "Start with your space." at the name role, the couplet and the pill at 50 %, in the
 * opener rhythm (--lux-break above, --lux-close + the pill lane below; GRAMMAR §4), no rule, no kicker. No empty screen
 * before it (D-M3: a 100svh block left up to two viewports of black after the last row). */
#detailDialog .lv-catalog .lv-catalog-footer {
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:end; gap:40px 0;
  box-sizing:border-box; margin:0; padding:var(--lux-break) var(--lux-edge) calc(var(--lux-close) + 72px);
  border:0;
}
#detailDialog .lv-catalog .lv-catalog-footer .lv-eyebrow { display:none; }
#detailDialog .lv-catalog .lv-catalog-footer h3 {
  margin:0; font-size:var(--lux-fs-name); line-height:.93; letter-spacing:-.055em; font-weight:400; color:var(--lux-cream);
}
#detailDialog .lv-catalog .lv-catalog-footer > div:last-child {
  display:flex; flex-direction:column; align-items:flex-start; gap:calc(30 * var(--lux-unit)); padding:0;
}
#detailDialog .lv-catalog .lv-catalog-footer > div > p:not(.lv-eyebrow) {
  margin:0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
#detailDialog .lv-catalog .lv-catalog-footer .lv-text-link { display:inline-flex; margin:0; }

/* The collection pill (GRAMMAR §8.1) and the underline link (§8.4) on the legacy classes of this view. */
#detailDialog .lv-catalog .lv-button {
  --lux-focus-r:999px;
  display:inline-flex; align-items:center; justify-content:flex-start; gap:12px; box-sizing:border-box; width:auto; height:48px; min-height:0;
  padding:12px 18px; border:0; border-radius:999px; background:var(--lux-cream); color:var(--ink);
  font-size:var(--lux-fs-pill); line-height:1.25; letter-spacing:0; white-space:nowrap; transition:background-color .2s var(--ease);
}
#detailDialog .lv-catalog .lv-button:focus-visible { border-radius:999px; }
#detailDialog .lv-catalog .lv-button > span:not(.lv-sr) { font-size:19px; line-height:1; transition:transform .2s var(--ease); }
#detailDialog .lv-catalog .lv-catalog-footer .lv-text-link,
#detailDialog .lv-catalog .lv-empty .lv-text-link {
  position:relative; gap:.35em; min-height:44px; padding:0; font-size:var(--lux-fs-small); letter-spacing:-.015em;
  color:var(--lux-cream); text-decoration:none;
}
#detailDialog .lv-catalog :is(.lv-catalog-footer, .lv-results-summary, .lv-empty) .lv-text-link::after {
  content:""; position:absolute; left:0; right:0; bottom:12px; height:1px; background:currentColor;
  transform-origin:0 50%; transition:transform .6s var(--lux-ease-out);
}

/* ── Empty search result ───────────────────────────────────────────────────────────────────────────────────────────── */
#detailDialog .lv-catalog .lv-empty { grid-column:1 / -1; padding:calc(140 * var(--lux-unit)) var(--lux-edge) 0; text-align:left; }
#detailDialog .lv-catalog .lv-empty > span[aria-hidden] { display:none; }
#detailDialog .lv-catalog .lv-empty h3 {
  margin:0; font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.004em; font-weight:400; color:var(--lux-cream);
}
#detailDialog .lv-catalog .lv-empty p {
  max-width:calc(700 * var(--lux-unit)); margin:calc(20 * var(--lux-unit)) 0 calc(40 * var(--lux-unit));
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-taupe);
}

/* ── Hover (fine pointer only) ─────────────────────────────────────────────────────────────────────────────────────── */
@media (hover:hover) and (pointer:fine) {
  #detailDialog .lv-catalog .lv-catalog-tab:hover { color:var(--lux-cream); border-color:transparent; }
  #detailDialog .lv-catalog .lv-index-row:hover .lv-index-name { color:var(--lux-cream); }
  #detailDialog .lv-catalog .lv-index-row:hover .lv-index-arrow { opacity:1; }
  #detailDialog .lv-catalog .lv-button:hover { background:var(--lux-pill-hover); border-color:transparent; }
  #detailDialog .lv-catalog .lv-search button:hover { color:var(--lux-taupe); }
  #detailDialog .lv-catalog .lv-button:hover > span:not(.lv-sr) { transform:translate(2px, -2px); }
  :where(html.is-motion) #detailDialog .lv-catalog :is(.lv-all-link, .lv-text-link):hover::after { transform-origin:100% 50%; transform:scaleX(0); }
}

/* ── Density step (≤ 1000): the card above the list at 100 % × 40svh ───────────────────────────────────────────────── */
@media (max-width:1000px) {
  #detailDialog .lv-catalog .lv-catalog-layout { grid-template-columns:minmax(0, 1fr); row-gap:calc(60 * var(--lux-unit)); padding:0 8px; }
  #detailDialog .lv-catalog .lv-preview { grid-column:1; grid-row:1; position:static; }
  #detailDialog .lv-catalog .lv-product-index { grid-column:1; grid-row:2; padding:0 calc(var(--lux-edge) - 8px); }
  #detailDialog .lv-catalog .lv-preview-media,
  #detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=facade"]) .lv-preview-media { aspect-ratio:auto; height:40svh; }
  #detailDialog .lv-catalog .lv-preview-button--supplier { aspect-ratio:auto; height:40svh; }
  #detailDialog .lv-catalog .lv-preview-button--supplier .lv-preview-media { width:auto; height:70%; }
  #detailDialog .lv-catalog .lv-preview-caption { padding-inline:calc(var(--lux-edge) - 8px); }
  #detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=facade"]) .lv-catalog-layout { grid-template-columns:minmax(0, 1fr); }
  #detailDialog .lv-catalog .lv-catalog-footer { grid-template-columns:minmax(0, 1fr); }
}

/* ── Phone (≤ 700): fixed px tree; the image card leaves, the first row sits in the first viewport ─────────────────── */
@media (max-width:700px) {
  #detailDialog .lv-catalog { padding:var(--lux-close) 0 0; }
  #detailDialog .lv-catalog .lv-catalog-intro > p { max-width:none; margin-bottom:30px; }
  /* Two lines, as on desktop (catalog-experience.css:215 folds the heading to one line at ≤ 540 px). */
  #detailDialog .lv-catalog .lv-catalog-header #detailTitle br { display:inline; }
  /* The hint reads whole at 390 in the small role (228 px of a 286 px field; at the field's sub role it was cut to
   * "Search by system, model or…", audit D2-m7 b); typed text keeps the sub role. At 320 it still ends in an ellipsis. */
  #detailDialog .lv-catalog .lv-search input::placeholder { font-size:var(--lux-fs-small); letter-spacing:-.015em; }
  /* Phone roles only (GRAMMAR §3.1, D-m3): mega (17vw) on every view whose heading words fit; "Architecture," would cross
   * the edge at 17vw, so the aluminum and family views set their heading at the name role. */
  #detailDialog .lv-catalog:has(.lv-catalog-tab.is-active[data-catalog-route^="#catalog?category=aluminum"]) .lv-catalog-header #detailTitle {
    font-size:var(--lux-fs-name); line-height:.93; letter-spacing:-.055em;
  }
  #detailDialog .lv-catalog .lv-catalog-counts { margin-top:20px; }
  #detailDialog .lv-catalog .lv-catalog-controls { margin-top:40px; }
  #detailDialog .lv-catalog .lv-catalog-tabs { gap:0 24px; }
  #detailDialog .lv-catalog .lv-catalog-tools { margin-top:12px; gap:4px 24px; }
  #detailDialog .lv-catalog .lv-search { flex:1 1 100%; }
  #detailDialog .lv-catalog .lv-all-link { margin-left:0; }
  #detailDialog .lv-catalog .lv-family-select { flex:1 1 100%; max-width:none; }
  #detailDialog .lv-catalog .lv-family-select select { width:100%; }
  #detailDialog .lv-catalog .lv-catalog-layout { display:block; margin-top:48px; padding:0 var(--lux-edge); }
  #detailDialog .lv-catalog .lv-product-index { padding:0; }
  #detailDialog .lv-catalog .lv-preview { display:none; }
  #detailDialog .lv-catalog .lv-supplier-note { max-width:none; margin-bottom:32px; }
  #detailDialog .lv-catalog .lv-index-group { margin-bottom:56px; }
  #detailDialog .lv-catalog .lv-group-heading { padding-bottom:16px; }
  #detailDialog .lv-catalog .lv-index-row { grid-template-columns:36px minmax(0, 1fr); padding:16px 0; }
  #detailDialog .lv-catalog .lv-index-arrow { display:none; }
  #detailDialog .lv-catalog:has(.lv-catalog-tab.is-active):not(:has(.lv-supplier-note)) .lv-index-row { padding:18px 0; }
  #detailDialog .lv-catalog .lv-catalog-footer { gap:24px; padding:var(--lux-break) var(--lux-edge) 132px; }
  #detailDialog .lv-catalog .lv-catalog-footer > div:last-child { gap:20px; }
  #detailDialog .lv-catalog .lv-empty { padding:80px var(--lux-edge) 0; }
  #detailDialog .lv-catalog .lv-empty p { max-width:none; margin:16px 0 30px; }
}