/* LATVERA product template (lux/template.js; owner review 2026-09-25). Opt-in: every rule keys on the template's own
 * classes (lxs story · lxm system · lxg gallery · lxf ending), which only the opted-in routes render, so the other product
 * routes cannot read it. The resting state is complete: motion exists only as custom properties that bind() writes
 * (--lxs-hold, --lxm-enter, --lxf-enter, --lxg-shift) or inline transforms, each of which defaults to the at-rest value. */

/* ── Shared: a display line in its own mask ──────────────────────────────────────────────────────────────────────── */
#detailDialog .lux-detail .lx-line { display:block; overflow:hidden; padding:.06em 0 .12em; margin:-.06em 0 -.12em; }
#detailDialog .lux-detail .lx-line > span { display:block; }

/* ══ STORY: alternating pairs; with motion, the exchange (owner request 2026-09-26) ═════════════════════════════════
 * Same anatomy as the approved perspectives: two 8 px-inset rounded halves, title top-left, counter chips and a short
 * line of copy on the bottom row above the Close pill lane. At rest (no JS, reduced motion, publication, or a compact
 * view whose copy would not fit its stage) the pairs stand in flow, each complete. With motion bind() writes
 * data-lxs-mode="exchange" and data-lxs-stage (wide · column · row): one pinned stage above a short span of stations,
 * the panels moved by inline transforms only. */
#detailDialog .lux-detail .lxs { position:relative; }
#detailDialog .lux-detail .lxs-scenes { position:relative; isolation:isolate; }
#detailDialog .lux-detail .lxs-scene {
  position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:8px;
  box-sizing:border-box; height:calc(100svh - 16px); min-height:540px; margin:8px;
}
#detailDialog .lux-detail .lxs-panel {
  position:relative; min-width:0; min-height:0; margin:0; overflow:hidden; border-radius:var(--radius); background:var(--lux-panel);
}
#detailDialog .lux-detail .lxs-copy {
  display:flex; flex-direction:column; justify-content:space-between; gap:32px;
  padding:calc(50 * var(--lux-unit)) calc(var(--lux-edge) - 8px) 88px; color:var(--lux-cream);
}
#detailDialog .lux-detail .lxs-title {
  margin:0; font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.004em; font-weight:400; color:var(--lux-taupe);
}
#detailDialog .lux-detail .lxs-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
#detailDialog .lux-detail .lxs-count { flex:none; }
#detailDialog .lux-detail .lxs-text {
  flex:0 1 calc(430 * var(--lux-unit)); min-width:190px; margin:0;
  font-size:max(14px, calc(18 * var(--lux-unit))); line-height:1.32; letter-spacing:-.012em; color:var(--lux-cream); text-wrap:pretty;
}
#detailDialog .lux-detail .lxs-img {
  position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; transform-origin:50% 50%;
}
#detailDialog .lux-detail .lxs-scene--reverse .lxs-copy { grid-column:2; grid-row:1; }
#detailDialog .lux-detail .lxs-scene--reverse .lxs-visual { grid-column:1; grid-row:1; }

/* The exchange stage. Scenes after the first start hidden, so nothing flashes before the first paint. The heading lines
 * and the bottom row withdraw into masks: .lx-line for the title, the chips' and the copy's own boxes for the row. */
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] { height:calc(var(--lxs-h, 100svh) + var(--lxs-span, 0px)); }
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-scenes { position:sticky; top:0; height:var(--lxs-h, 100svh); overflow:hidden; }
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-scene { position:absolute; inset:8px; height:auto; min-height:0; margin:0; }
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-scene:not(:first-child) .lxs-panel { opacity:0; }
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-panel { transform-origin:50% 50%; backface-visibility:hidden; }
#detailDialog .lux-detail .lxs[data-lxs-moving] .lxs-panel,
#detailDialog .lux-detail .lxs[data-lxs-moving] .lxs-img { will-change:transform; }
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-count,
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-text { overflow:hidden; }
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-text > span { display:block; }

/* A real two-state view (VENTO: louvers open, then covered). At rest, without motion, the two states stand side by side,
 * each half labelled; in the exchange the second state is its own in-place step, closing from the roof down in the
 * same frame (bind() writes --lxs-hold), and the label follows the state that shows. */
#detailDialog .lux-detail .lxs-compare { position:absolute; inset:0; z-index:1; clip-path:inset(0 0 0 50%); }
#detailDialog .lux-detail .lxs-compare-line { position:absolute; z-index:2; top:0; bottom:0; left:50%; width:1px; background:rgba(244,239,231,.9); pointer-events:none; }
#detailDialog .lux-detail .lxs-states {
  position:absolute; z-index:3; left:calc(var(--lux-edge) - 8px); right:calc(var(--lux-edge) - 8px); top:calc(40 * var(--lux-unit));
  display:flex; justify-content:space-between; margin:0; color:var(--lux-cream); font-size:var(--lux-fs-small); pointer-events:none;
}
#detailDialog .lux-detail .lxs-states > span {
  padding:7px 14px; border-radius:999px; background:rgba(24,23,23,.74); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); line-height:1.2; color:var(--lux-cream);
}
/* the cover closes from the roof down, where the louvers are, so the change reads at once */
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-compare { clip-path:inset(0 0 calc((1 - var(--lxs-hold, 0)) * 100%) 0); }
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-compare-line { left:0; right:0; bottom:auto; top:calc(var(--lxs-hold, 0) * 100%); width:auto; height:1px; opacity:calc(min(var(--lxs-hold, 0), 1 - var(--lxs-hold, 0)) * 6); }
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-states { justify-content:flex-start; gap:18px; }
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-states > span { color:rgba(244,239,231,.62); transition:color .35s var(--lux-ease-ui); }
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-scene:not([data-lxs-state="1"]) .lxs-states > [data-lxs-state="0"],
#detailDialog .lux-detail .lxs[data-lxs-mode="exchange"] .lxs-scene[data-lxs-state="1"] .lxs-states > [data-lxs-state="1"] { color:var(--lux-cream); }
/* the pinned stage takes no native pan while a swipe can only mean a step (bind() writes data-lxs-touch); pinch zoom stays */
#detailDialog .lux-detail .lxs[data-lxs-touch] .lxs-scenes { touch-action:pinch-zoom; }

/* Compact stages (owner request 2026-09-27: phones get the exchange, not the static stack). The same 8 px inset stage
 * and 8 px gutter as the wide one, laid out for the view; the Close pill's lane (its bottom 72 px, centred) is kept
 * clear by the copy that sits at the bottom of the stage.
 *   column  a portrait view: the copy slot (bind() sizes --lxs-copy to the longest copy) above the photograph, then below
 *           it on the next scene, so every crossing travels vertically;
 *   row     a landscape view too short for the wide stage: the two halves, at the view's own scale. */
#detailDialog .lux-detail .lxs[data-lxs-stage="column"] .lxs-scene,
#detailDialog .lux-detail .lxs[data-lxs-stage="row"] .lxs-scene { display:grid; gap:8px; }
#detailDialog .lux-detail .lxs[data-lxs-stage="column"] .lxs-scene { grid-template-columns:minmax(0, 1fr); grid-template-rows:var(--lxs-copy, 36%) minmax(0, 1fr); }
#detailDialog .lux-detail .lxs[data-lxs-stage="column"] .lxs-scene--reverse { grid-template-rows:minmax(0, 1fr) var(--lxs-copy, 36%); }
#detailDialog .lux-detail .lxs[data-lxs-stage="column"] .lxs-copy { grid-column:1; grid-row:1; }
#detailDialog .lux-detail .lxs[data-lxs-stage="column"] .lxs-visual { grid-column:1; grid-row:2; }
#detailDialog .lux-detail .lxs[data-lxs-stage="column"] .lxs-scene--reverse .lxs-copy { grid-row:2; }
#detailDialog .lux-detail .lxs[data-lxs-stage="column"] .lxs-scene--reverse .lxs-visual { grid-row:1; }
#detailDialog .lux-detail .lxs[data-lxs-stage="row"] .lxs-scene { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr); }
#detailDialog .lux-detail .lxs:is([data-lxs-stage="column"], [data-lxs-stage="row"]) .lxs-visual { aspect-ratio:auto; }
#detailDialog .lux-detail .lxs:is([data-lxs-stage="column"], [data-lxs-stage="row"]) .lxs-copy { min-height:0; gap:24px; padding:22px 22px 22px; }
#detailDialog .lux-detail .lxs[data-lxs-stage="column"] .lxs-scene--reverse .lxs-copy,
#detailDialog .lux-detail .lxs[data-lxs-stage="row"] .lxs-copy { padding-bottom:72px; }
#detailDialog .lux-detail .lxs[data-lxs-stage="row"] .lxs-copy { padding-left:calc(var(--lux-edge) - 8px); padding-right:calc(var(--lux-edge) - 8px); }
/* a phone on its side: the title follows the half it sits in, not the phone rule's width (46 px at 667 px wide) */
#detailDialog .lux-detail .lxs[data-lxs-stage="row"] .lxs-title { font-size:clamp(23px, min(3.4vw, 6.4vh), 34px); }
#detailDialog .lux-detail .lxs:is([data-lxs-stage="column"], [data-lxs-stage="row"]) .lxs-panel { border-radius:28px; }

/* ══ SYSTEM: image-led material / system cards ═════════════════════════════════════════════════════════════════════ */
#detailDialog .lux-detail .lxm { padding:var(--lux-break) 0 0; }
#detailDialog .lux-detail .lxm-head {
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); align-items:end; gap:calc(40 * var(--lux-unit));
  padding:0 var(--lux-edge) calc(96 * var(--lux-unit));
}
#detailDialog .lux-detail .lxm-title {
  margin:0; font-size:max(34px, calc(84 * var(--lux-unit))); line-height:.98; letter-spacing:-.042em; font-weight:400; color:var(--lux-cream);
}
#detailDialog .lux-detail .lxm-lead {
  justify-self:end; max-width:21em; margin:0; font-size:var(--lux-fs-sub); line-height:1.16; letter-spacing:-.008em; color:var(--lux-taupe); text-wrap:pretty;
}
#detailDialog .lux-detail .lxm-cards { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; padding:0 8px; }
#detailDialog .lux-detail .lxm [data-lxm-card] {
  --lxm-enter:1;
  position:relative; display:flex; flex-direction:column; box-sizing:border-box; min-width:0; margin:0; padding:0;
  overflow:hidden; isolation:isolate; border-radius:var(--radius); background:var(--lux-panel); color:var(--lux-cream);
}
#detailDialog .lux-detail .lxm-media { position:relative; flex:none; margin:0; aspect-ratio:4/3; overflow:hidden; background:#221f1d; }
#detailDialog .lux-detail .lxm-img {
  position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover;
  transform-origin:50% 60%; transition:scale 1.2s cubic-bezier(.16,1,.3,1);
}
#detailDialog .lux-detail .lxm-face { padding:calc(36 * var(--lux-unit)) calc(var(--lux-edge) - 8px) 0; }
#detailDialog .lux-detail .lxm-name { margin:0; font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.01em; font-weight:400; color:var(--lux-cream); }
#detailDialog .lux-detail .lxm-summary {
  max-width:28em; margin:12px 0 0; font-size:max(15px, calc(22 * var(--lux-unit))); line-height:1.3; letter-spacing:-.01em; color:rgba(244,239,231,.82);
}
/* the disc and its label: one control ("+ Assembly & finishes"), a 44 px target */
#detailDialog .lux-detail .lxm-open {
  display:inline-flex; align-items:center; gap:14px; align-self:flex-start; min-height:44px; margin:22px calc(var(--lux-edge) - 8px) 0;
  padding:0; border:0; background:none; color:var(--lux-cream); font:inherit; font-size:max(14px, calc(20 * var(--lux-unit)));
  line-height:1.2; letter-spacing:-.01em; cursor:pointer;
}
#detailDialog .lux-detail .lxm-open[hidden] { display:none; }
#detailDialog .lux-detail .lxm-disc { flex:none; }
#detailDialog .lux-detail .lxm-disc::before, #detailDialog .lux-detail .lxm-disc::after { transition:transform .5s var(--lux-ease-ui); }
#detailDialog .lux-detail [data-lxm-card][data-open="true"] .lxm-disc { --lux-disc-turn:135deg; }
#detailDialog .lux-detail .lxm-open:focus-visible { outline:2px solid var(--lux-cream); outline-offset:6px; border-radius:999px; }
#detailDialog .lux-detail .lxm-panel { padding:20px calc(var(--lux-edge) - 8px) calc(40 * var(--lux-unit) + 12px); }
#detailDialog .lux-detail .lxm-panel-name { display:none; }
#detailDialog .lux-detail .lxm-facts { margin:0; }
#detailDialog .lux-detail .lxm-fact {
  display:grid; grid-template-columns:minmax(0, 9.5em) minmax(0, 1fr); gap:6px 20px; padding:14px 0; border-top:1px solid var(--lux-hair);
}
#detailDialog .lux-detail .lxm-fact:last-child { border-bottom:1px solid var(--lux-hair); }
#detailDialog .lux-detail .lxm-fact dt { margin:0; font-size:max(14px, calc(18 * var(--lux-unit))); line-height:1.35; color:var(--lux-taupe); }
#detailDialog .lux-detail .lxm-fact dd { margin:0; font-size:max(14px, calc(19 * var(--lux-unit))); line-height:1.38; letter-spacing:-.01em; color:var(--lux-cream); }
#detailDialog .lux-detail .lxm-pdf { margin-top:10px; font-size:max(14px, calc(18 * var(--lux-unit))); color:var(--lux-cream); }
#detailDialog .lux-detail .lxm .lux-materials-note { max-width:calc(640 * var(--lux-unit)); margin:calc(30 * var(--lux-unit)) var(--lux-edge) 0; color:var(--lux-taupe); }
@media (hover:hover) and (pointer:fine) {
  #detailDialog .lux-detail .lxm [data-lxm-card]:hover .lxm-img { scale:1.035; }
  #detailDialog .lux-detail .lxm-open:hover .lxm-disc { background:var(--lux-pill-hover); }
}

/* Armed (bind() ran), wider than a phone: the photograph fills the card; name, line and disc sit on its lower scrim
 * above the Close pill lane; the facts panel grows out of the disc's corner over the photograph. */
@media (min-width:701px) {
  #detailDialog .lux-detail .lxm[data-lxm-armed] [data-lxm-card] {
    height:calc(100svh - 16px); min-height:560px; max-height:1000px; justify-content:flex-end; padding:0 0 120px;
    border-radius:calc(var(--radius) + 70px * (1 - var(--lxm-enter)));
    transform:scale(calc(.94 + .06 * var(--lxm-enter))); transform-origin:50% 100%;
  }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-media { position:absolute; inset:0; z-index:0; aspect-ratio:auto; }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-media::after {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top, rgba(24,23,23,.86) 0%, rgba(24,23,23,.6) 24%, rgba(24,23,23,.12) 48%, rgba(24,23,23,0) 62%);
  }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-img { transform:scale(calc(1 + .18 * (1 - var(--lxm-enter)))); }
  #detailDialog .lux-detail .lxm[data-lxm-armed] :is(.lxm-face, .lxm-open) { position:relative; z-index:2; }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-face { padding-top:0; transition:opacity .4s var(--lux-ease-ui); }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-open { z-index:5; }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-panel {
    position:absolute; z-index:4; left:8px; bottom:calc(120px + 44px + 14px);
    box-sizing:border-box; width:min(calc(100% - 16px), max(360px, calc(560 * var(--lux-unit)))); max-height:calc(100% - 120px - 58px - 16px);
    overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
    padding:calc(40 * var(--lux-unit)) calc(var(--lux-edge) - 8px) calc(30 * var(--lux-unit));
    border-radius:var(--radius); background:var(--lux-panel); box-shadow:0 30px 80px rgba(0,0,0,.28);
    transform-origin:calc(var(--lux-edge) - 8px + 22px - 8px) calc(100% + 36px);
    transform:scale(.08); opacity:0; visibility:hidden;
    transition:transform .6s var(--lux-ease-panel), opacity .35s var(--lux-ease-ui), visibility 0s linear .6s, border-radius .6s var(--lux-ease-panel);
  }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-panel::-webkit-scrollbar { display:none; }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-panel > * { opacity:0; transition:opacity .3s var(--lux-ease-ui); }
  #detailDialog .lux-detail .lxm[data-lxm-armed] [data-open="true"] .lxm-panel {
    transform:none; opacity:1; visibility:visible; transition:transform .6s var(--lux-ease-panel), opacity .25s var(--lux-ease-ui), visibility 0s, border-radius .6s var(--lux-ease-panel);
  }
  #detailDialog .lux-detail .lxm[data-lxm-armed] [data-open="true"] .lxm-panel > * { opacity:1; transition:opacity .45s var(--lux-ease-ui) .28s; }
  #detailDialog .lux-detail .lxm[data-lxm-armed] [data-open="true"] .lxm-face { opacity:0; }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-panel-name {
    display:block; margin:0 0 calc(24 * var(--lux-unit)); font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.01em; color:var(--lux-cream); text-wrap:balance;
  }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-fact { grid-template-columns:minmax(0, 1fr); gap:4px; }
}
/* phone, armed: photograph, name and line in flow; the disc opens the facts below them */
@media (max-width:700px) {
  #detailDialog .lux-detail .lxm[data-lxm-armed] [data-lxm-card]:not([data-open="true"]) .lxm-panel { display:none; }
  #detailDialog .lux-detail .lxm[data-lxm-armed] [data-open="true"] .lxm-panel { animation:lxm-in .45s var(--lux-ease-out) both; }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-open { margin-bottom:18px; }
}
@keyframes lxm-in { from { opacity:0; transform:translateY(12px); } }

/* ══ SPREAD: the glass & enclosure technical spread (text-led; the record's one photograph is the opening card's) ═════
 * Title and lead on the left, the capabilities on the right: each an overview line with its verbatim spec rows behind
 * the "+" disc, opening in flow. Sized to its content, so a sparse record never leaves a void. */
#detailDialog .lux-detail .lxt { padding:var(--lux-break) 8px 0; }
#detailDialog .lux-detail .lxt-sheet {
  display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:calc(48 * var(--lux-unit)) calc(96 * var(--lux-unit)); box-sizing:border-box;
  padding:calc(64 * var(--lux-unit)) calc(var(--lux-edge) - 8px) calc(64 * var(--lux-unit)); border-radius:var(--radius); background:var(--lux-panel); color:var(--lux-cream);
}
#detailDialog .lux-detail .lxt-intro { display:flex; flex-direction:column; align-items:flex-start; gap:calc(30 * var(--lux-unit)); min-width:0; }
#detailDialog .lux-detail .lxt-kicker { margin:0; font-size:var(--lux-fs-small); line-height:1.3; color:var(--lux-taupe); }
#detailDialog .lux-detail .lxt-lead { max-width:22em; margin:0; font-size:var(--lux-fs-sub); line-height:1.18; letter-spacing:-.008em; color:var(--lux-taupe); text-wrap:pretty; }
#detailDialog .lux-detail .lxt-rows { display:flex; flex-direction:column; align-self:end; min-width:0; border-top:1px solid var(--lux-hair); }
#detailDialog .lux-detail .lxt-row { padding:calc(30 * var(--lux-unit)) 0 calc(26 * var(--lux-unit)); border-bottom:1px solid var(--lux-hair); }
#detailDialog .lux-detail .lxt-name { margin:0; font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.01em; font-weight:400; color:var(--lux-cream); }
#detailDialog .lux-detail .lxt-summary { max-width:30em; margin:12px 0 0; font-size:max(15px, calc(21 * var(--lux-unit))); line-height:1.32; letter-spacing:-.01em; color:rgba(244,239,231,.82); text-wrap:pretty; }
#detailDialog .lux-detail .lxt .lxm-open { margin:18px 0 0; }
#detailDialog .lux-detail .lxt .lxt-panel { padding:14px 0 2px; }
#detailDialog .lux-detail .lxt .lxm-fact { grid-template-columns:minmax(0, 10em) minmax(0, 1fr); }
#detailDialog .lux-detail .lxt[data-lxm-armed] [data-lxm-card]:not([data-open="true"]) .lxt-panel { display:none; }
#detailDialog .lux-detail .lxt[data-lxm-armed] [data-open="true"] .lxt-panel { animation:lxm-in .45s var(--lux-ease-out) both; }

/* ══ PLATE: an ASAŞ model's technical plate — its figures verbatim, formats, and its real section drawing if it has one ═ */
#detailDialog .lux-detail .lxp { display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; margin:var(--lux-break) 8px 0; }
#detailDialog .lux-detail .lxp--pair { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
#detailDialog .lux-detail .lxp-sheet {
  display:flex; flex-direction:column; gap:calc(44 * var(--lux-unit)); min-width:0; box-sizing:border-box;
  padding:calc(54 * var(--lux-unit)) calc(var(--lux-edge) - 8px) calc(50 * var(--lux-unit)); border-radius:var(--radius); background:var(--lux-panel); color:var(--lux-cream);
}
#detailDialog .lux-detail .lxp-head { display:flex; justify-content:space-between; align-items:baseline; gap:24px; }
#detailDialog .lux-detail .lxp-title { margin:0; font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.01em; font-weight:400; color:var(--lux-taupe); }
#detailDialog .lux-detail .lxp-code { margin:0; font-size:var(--lux-fs-small); color:rgba(244,239,231,.82); white-space:nowrap; }
#detailDialog .lux-detail .lxp-sentence { max-width:24em; margin:0; font-size:var(--lux-fs-sub); line-height:1.15; letter-spacing:-.01em; color:var(--lux-cream); text-wrap:balance; }
#detailDialog .lux-detail .lxp-request { margin:0; font-size:var(--lux-fs-sub); line-height:1.2; color:var(--lux-cream); }
#detailDialog .lux-detail .lxp-figures { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 calc(36 * var(--lux-unit)); margin:0; }
#detailDialog .lux-detail .lxp-figures:is([style*="--n:1"]) { grid-template-columns:minmax(0, 1fr); }
#detailDialog .lux-detail .lxp-figures:is([style*="--n:2"], [style*="--n:4"]), #detailDialog .lux-detail .lxp--pair .lxp-figures { grid-template-columns:repeat(2, minmax(0, 1fr)); }
#detailDialog .lux-detail .lxp--pair .lxp-figures[style*="--n:1"] { grid-template-columns:minmax(0, 1fr); }
#detailDialog .lux-detail .lxp-figure { min-width:0; padding:calc(20 * var(--lux-unit)) 0 calc(26 * var(--lux-unit)); border-top:1px solid var(--lux-hair); }
#detailDialog .lux-detail .lxp-figure dt { margin:0 0 10px; font-size:var(--lux-fs-small); line-height:1.3; color:var(--lux-taupe); }
#detailDialog .lux-detail .lxp-figure dd { margin:0; line-height:1; letter-spacing:-.035em; color:var(--lux-cream); overflow-wrap:anywhere; }
#detailDialog .lux-detail .lxp-figure--xl dd { font-size:clamp(40px, calc(96 * var(--lux-unit)), 90px); white-space:nowrap; }
#detailDialog .lux-detail .lxp--pair .lxp-figure--xl dd { font-size:clamp(36px, calc(76 * var(--lux-unit)), 72px); }
#detailDialog .lux-detail .lxp-figure--l dd { font-size:clamp(28px, calc(58 * var(--lux-unit)), 54px); line-height:1.04; }
#detailDialog .lux-detail :is(.lxp-figure--m, .lxp-figure--text) dd { font-size:clamp(20px, calc(34 * var(--lux-unit)), 34px); line-height:1.16; letter-spacing:-.015em; }
#detailDialog .lux-detail .lxp-unit { margin:0 .1em; font-size:.42em; letter-spacing:0; color:var(--lux-taupe); }
#detailDialog .lux-detail .lxp-keep { white-space:nowrap; }
#detailDialog .lux-detail :is(.lxp-figure--m, .lxp-figure--text) .lxp-unit { font-size:.62em; }
#detailDialog .lux-detail .lxp-label { margin:0 0 14px; font-size:var(--lux-fs-small); line-height:1.3; color:var(--lux-taupe); }
#detailDialog .lux-detail .lxp-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
#detailDialog .lux-detail .lxp-chips li {
  padding:9px 15px; border:1px solid rgba(244,239,231,.34); border-radius:999px; font-size:max(13px, calc(17 * var(--lux-unit))); line-height:1.2; color:var(--lux-cream);
}
#detailDialog .lux-detail .lxp-note { margin:auto 0 0; font-size:var(--lux-fs-small); line-height:1.35; color:var(--lux-taupe); }
/* the six real section drawings: dimensioned CAD on white, set whole on the studio ground and opened full size */
#detailDialog .lux-detail .lxp-drawing {
  position:relative; display:flex; flex-direction:column; min-width:0; min-height:clamp(560px, 86svh, 900px); box-sizing:border-box;
  padding:calc(50 * var(--lux-unit)) calc(var(--lux-edge) - 8px) calc(40 * var(--lux-unit)); overflow:hidden; border-radius:var(--radius);
  background:#ebe6de; color:var(--ink); text-decoration:none;
}
#detailDialog .lux-detail .lxp-drawing-label { font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.01em; }
#detailDialog .lux-detail .lxp-drawing-frame { display:grid; place-items:center; flex:1; min-height:0; padding:24px 0 8px; }
#detailDialog .lux-detail .lxp-drawing-frame img { display:block; width:auto; height:auto; max-width:min(100%, 720px); max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
#detailDialog .lux-detail .lxp-drawing-arrow {
  position:absolute; top:calc(44 * var(--lux-unit)); right:calc(var(--lux-edge) - 8px); display:grid; place-items:center; box-sizing:border-box; width:48px; height:48px;
  border:1px solid rgba(42,39,36,.45); border-radius:50%; font-size:18px; line-height:1; transition:background-color .3s var(--lux-ease-ui), color .3s var(--lux-ease-ui), transform .45s var(--lux-ease-out);
}
#detailDialog .lux-detail .lxp-drawing:focus-visible { outline:2px solid var(--lux-cream); outline-offset:3px; }
@media (hover:hover) and (pointer:fine) {
  #detailDialog .lux-detail .lxp-drawing:hover .lxp-drawing-arrow { background:var(--ink); color:var(--lux-cream); transform:rotate(45deg); }
}

/* ══ STUDIO CARD: an ASAŞ model opens on its own render — the white-canvas render on a warm studio ground, whole ════════ */
#detailDialog .lux-detail .lux-card--object .lux-card-media { background:#ebe6de; }
#detailDialog .lux-detail .lux-card--object .lux-card-img { box-sizing:border-box; padding:9% 20% 11%; object-fit:contain; mix-blend-mode:multiply; }
#detailDialog .lux-detail .lux-card--object .lux-card-media::after,
#detailDialog .lux-detail .lux-card--object .lux-card-media::before { display:none; }
#detailDialog .lux-detail .lux-card--object :is(.lux-card-name, .lux-card-caption) { color:var(--ink); }
#detailDialog .lux-detail .lux-card--object .lux-sheet-toggle { background:var(--ink); color:var(--lux-cream); }

/* ══ GALLERY: the rounded mixed proportions the owner liked; slow drift + drag in bind(), a native row without it ═══ */
#detailDialog .lux-detail .lxg { position:relative; padding:var(--lux-break) 0 0; }
#detailDialog .lux-detail .lxg-head {
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:0 var(--lux-edge) clamp(24px, calc(44 * var(--lux-unit)), 44px);
}
#detailDialog .lux-detail .lxg-title { margin:0; }
#detailDialog .lux-detail .lxg-tools { display:flex; align-items:center; gap:18px; flex:none; }
#detailDialog .lux-detail .lxg-all { font-size:max(15px, calc(20 * var(--lux-unit))); color:var(--lux-cream); white-space:nowrap; }
#detailDialog .lux-detail .lxg-toggle {
  display:grid; place-items:center; box-sizing:border-box; width:44px; height:44px; padding:0; border:1px solid rgba(244,239,231,.4);
  border-radius:50%; background:transparent; color:var(--lux-cream); cursor:pointer; transition:background-color .25s var(--lux-ease-ui), border-color .25s var(--lux-ease-ui);
}
#detailDialog .lux-detail .lxg-toggle[hidden] { display:none; }
#detailDialog .lux-detail .lxg-toggle > span { display:block; box-sizing:border-box; width:11px; height:13px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
#detailDialog .lux-detail .lxg[data-lxg-paused="true"] .lxg-toggle > span {
  width:0; height:0; margin-left:3px; border-left:11px solid currentColor; border-right:0; border-top:7px solid transparent; border-bottom:7px solid transparent;
}
#detailDialog .lux-detail .lxg-toggle:focus-visible { outline:2px solid var(--lux-cream); outline-offset:3px; }
@media (hover:hover) and (pointer:fine) { #detailDialog .lux-detail .lxg-toggle:hover { border-color:var(--lux-cream); background:rgba(244,239,231,.08); } }
/* .pg (product-gallery.css) is only the viewer's hook here: its gallery-page padding does not apply */
#detailDialog .lux-detail .lxg-viewport.pg {
  position:relative; padding:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; color:inherit;
}
#detailDialog .lux-detail .lxg-viewport::-webkit-scrollbar { display:none; }
#detailDialog .lux-detail .lxg-row {
  display:flex; align-items:center; gap:clamp(8px, .8vw, 16px); width:max-content; margin:0; padding:10px var(--lux-edge); list-style:none;
}
#detailDialog .lux-detail .lxg-item { flex:none; margin:0; padding:0; }
#detailDialog .lux-detail .lxg-card {
  position:relative; display:block; overflow:hidden; box-sizing:border-box; width:clamp(240px, 26vw, 520px); aspect-ratio:4/5;
  margin:0; padding:0; border:0; border-radius:clamp(20px, 2.35vw, 45px); background:#2a2724; color:inherit;
  cursor:zoom-in; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; -webkit-tap-highlight-color:transparent;
}
#detailDialog .lux-detail .lxg-item--wide .lxg-card { width:clamp(320px, 40vw, 780px); aspect-ratio:3/2; }
#detailDialog .lux-detail .lxg-item--square .lxg-card { width:clamp(220px, 22vw, 440px); aspect-ratio:1/1; }
#detailDialog .lux-detail .lxg-card img {
  display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; pointer-events:none;
  translate:var(--lxg-shift, 0px) 0; scale:1.12; transition:scale 1.1s cubic-bezier(.16,1,.3,1);
  -webkit-user-drag:none;
}
/* the ring is drawn above the photograph: the image's translate/scale gives it its own layer, which paints over an
 * inset outline on the button (both engines) */
#detailDialog .lux-detail .lxg-card::after {
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 0 transparent;
}
#detailDialog .lux-detail .lxg-card:focus-visible { outline:none; }
#detailDialog .lux-detail .lxg-card:focus-visible::after { box-shadow:inset 0 0 0 3px var(--lux-cream), inset 0 0 0 6px rgba(24,23,23,.55); }
@media (hover:hover) and (pointer:fine) { #detailDialog .lux-detail .lxg-card:hover img { scale:1.17; } }
/* drift (bind(), motion on): the transform owns the position; a vertical gesture always belongs to the page */
#detailDialog .lux-detail .lxg[data-lxg-mode="drift"] .lxg-viewport.pg { overflow:hidden; overflow:clip; touch-action:pan-y; cursor:grab; }
#detailDialog .lux-detail .lxg[data-lxg-mode="drift"] .lxg-row { will-change:transform; }
#detailDialog .lux-detail .lxg[data-lxg-mode="drift"] .lxg-card { cursor:inherit; }
#detailDialog .lux-detail .lxg[data-lxg-dragging] .lxg-viewport.pg { cursor:grabbing; }
/* manual (reduced motion, no GSAP, publication): a still row that scrolls, swipes and snaps gently */
#detailDialog .lux-detail .lxg:not([data-lxg-mode="drift"]) .lxg-viewport.pg { scroll-snap-type:x proximity; }
#detailDialog .lux-detail .lxg:not([data-lxg-mode="drift"]) .lxg-item { scroll-snap-align:start; scroll-margin-left:var(--lux-edge); }

/* ══ ENDING (rollout revision 2026-09-25; the earlier card + footer grid was rejected) ════════════════════════════════
 * ONE closing pair (photograph | invitation panel), the technical material behind one disclosure that grows over the
 * photograph, then one calm onward row (next item | its collection). The panel sits right of the centred Close pill at
 * every desktop width; its content never needs the pill's lane. */
#detailDialog .lux-detail .lxf { padding:var(--lux-break) 0 max(112px, calc(132 * var(--lux-unit))); }
#detailDialog .lux-detail .lxf-pair {
  --lxf-enter:1;
  position:relative; display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows:clamp(600px, calc(100svh - 16px), 1060px) auto; gap:8px; margin:0 8px;
}
#detailDialog .lux-detail .lxf-media {
  position:relative; grid-column:1; grid-row:1; min-width:0; margin:0; overflow:hidden; isolation:isolate;
  border-radius:calc(var(--radius) + 64px * (1 - var(--lxf-enter))); background:#221f1d;
}
#detailDialog .lux-detail .lxf-img {
  position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover;
  transform:scale(calc(1 + .14 * (1 - var(--lxf-enter))));
}
/* a supplier's own render on its studio ground: contained and whole, never cropped or stretched */
#detailDialog .lux-detail .lxf-media--object { background:#ebe6de; }
#detailDialog .lux-detail .lxf-media--object .lxf-img { box-sizing:border-box; padding:9% 11%; object-fit:contain; mix-blend-mode:multiply; }
#detailDialog .lux-detail .lxf-panel {
  position:relative; grid-column:2; grid-row:1; display:flex; flex-direction:column; min-width:0; min-height:0; box-sizing:border-box;
  padding:calc(50 * var(--lux-unit)) calc(var(--lux-edge) - 8px) calc(34 * var(--lux-unit));
  overflow:hidden; border-radius:calc(var(--radius) + 64px * (1 - var(--lxf-enter))); background:var(--lux-panel); color:var(--lux-cream);
}
#detailDialog .lux-detail .lxf-kicker { display:flex; flex-direction:column; gap:6px; margin:0; }
#detailDialog .lux-detail .lxf-kicker-name { font-size:var(--lux-fs-sub); line-height:1.1; letter-spacing:-.012em; color:var(--lux-cream); }
#detailDialog .lux-detail .lxf-kicker-kind { font-size:var(--lux-fs-small); line-height:1.3; color:var(--lux-taupe); }
#detailDialog .lux-detail .lxf-invite { display:flex; flex-direction:column; align-items:flex-start; gap:calc(36 * var(--lux-unit)); margin-top:auto; padding-top:32px; }
#detailDialog .lux-detail .lxf-title {
  margin:0; font-size:clamp(50px, calc(112 * var(--lux-unit)), 120px); line-height:.94; letter-spacing:-.046em; font-weight:400; color:var(--lux-cream); text-wrap:balance;
}
#detailDialog .lux-detail .lxf-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
#detailDialog .lux-detail .lxf-cta {
  display:inline-flex; align-items:center; gap:18px; box-sizing:border-box; height:60px; padding:0 8px 0 26px; border:0; border-radius:999px;
  background:var(--lux-cream); color:var(--ink); font:inherit; font-size:17px; line-height:1; letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  transition:background-color .25s var(--lux-ease-ui);
}
#detailDialog .lux-detail .lxf-cta-disc {
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--lux-cream); font-size:18px; line-height:1;
  transition:transform .5s var(--lux-ease-ui);
}
#detailDialog .lux-detail .lxf-cta:focus-visible { outline:2px solid var(--lux-cream); outline-offset:4px; }
/* quiet resources: one hairline list, one size, the arrow as the only ornament */
#detailDialog .lux-detail .lxf-resources-nav { margin-top:calc(64 * var(--lux-unit)); padding-top:calc(22 * var(--lux-unit)); border-top:1px solid var(--lux-hair); }
#detailDialog .lux-detail .lxf-links { display:flex; flex-direction:column; align-items:flex-start; }
#detailDialog .lux-detail .lxf .lxf-link {
  display:inline-flex; align-items:center; gap:12px; box-sizing:border-box; min-height:44px; margin:0; padding:4px 0;
  border:0; background:none; color:var(--lux-cream); font:inherit;
  font-size:var(--lux-fs-sub); line-height:1.15; letter-spacing:-.012em; text-align:left; text-decoration:none; cursor:pointer;
  transition:color .25s var(--lux-ease-ui);
}
#detailDialog .lux-detail .lxf .lxf-link[hidden] { display:none; }
#detailDialog .lux-detail .lxf-link-meta { margin-left:.45em; color:var(--lux-taupe); }
#detailDialog .lux-detail .lxf-link-arrow { flex:none; color:var(--lux-taupe); transition:transform .45s var(--lux-ease-out), color .25s var(--lux-ease-ui); }
#detailDialog .lux-detail .lxf .lxf-disc { flex:none; width:32px; height:32px; }
#detailDialog .lux-detail .lxf .lxf-disc::before, #detailDialog .lux-detail .lxf .lxf-disc::after { width:12px; transition:transform .5s var(--lux-ease-ui); }
#detailDialog .lux-detail .lxf[data-lxf-tech="open"] .lxf-tech-open .lxf-disc { --lux-disc-turn:135deg; }
#detailDialog .lux-detail .lxf .lxf-link:focus-visible { outline:2px solid var(--lux-cream); outline-offset:2px; }
@media (hover:hover) and (pointer:fine) {
  #detailDialog .lux-detail .lxf-cta:hover { background:var(--lux-pill-hover); }
  #detailDialog .lux-detail .lxf-cta:hover .lxf-cta-disc { transform:rotate(45deg); }
  #detailDialog .lux-detail .lxf .lxf-link:hover { color:var(--lux-taupe); }
  #detailDialog .lux-detail .lxf .lxf-link:hover .lxf-link-arrow { transform:translate(2px, -2px); }
  #detailDialog .lux-detail .lxf .lxf-link:hover .lxf-disc { background:var(--lux-pill-hover); }
}
/* arrival: the pair opens out of rounder corners; the headline rises through its masks; the rest follows */
#detailDialog .lux-detail .lxf-pair .lxf-title .lx-line > span { transform:translateY(calc(108% * (1 - clamp(0, (var(--lxf-enter) - .5 - var(--l, 0) * .08) * 3, 1)))); }
#detailDialog .lux-detail .lxf-pair :is(.lxf-kicker, .lxf-actions, .lxf-resources-nav) { opacity:clamp(0, (var(--lxf-enter) - .38) * 2.6, 1); }

/* The technical region. Unarmed (publication, no script): in flow under the pair, every disclosure readable. */
#detailDialog .lux-detail .lxf-tech {
  grid-column:1 / -1; grid-row:2; box-sizing:border-box; padding:calc(56 * var(--lux-unit)) calc(var(--lux-edge) - 8px) calc(40 * var(--lux-unit));
  border-radius:var(--radius); background:var(--lux-panel); color:var(--lux-cream);
}
#detailDialog .lux-detail .lxf-tech-head { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 0 calc(22 * var(--lux-unit)); }
#detailDialog .lux-detail .lxf-tech-title { margin:0; font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.01em; font-weight:400; color:var(--lux-cream); text-wrap:balance; }
#detailDialog .lux-detail.lux-detail--tpl:focus { outline:none; }
#detailDialog .lux-detail .lxf-tech-close { flex:none; --lux-disc-turn:45deg; }
#detailDialog .lux-detail .lxf-tech-close[hidden] { display:none; }
#detailDialog .lux-detail .lxf .lxf-resources { margin:0; }
#detailDialog .lux-detail .lxf .lxf-resources .lv-disclosure summary { min-height:56px; font-size:max(15px, calc(20 * var(--lux-unit))); line-height:1.25; letter-spacing:-.01em; }
#detailDialog .lux-detail .lxf .lxf-resources .lv-disclosure summary > .lv-summary-toggle { flex-basis:32px; width:32px; height:32px; }
#detailDialog .lux-detail .lxf .lxf-resources .lv-facts h4,
#detailDialog .lux-detail .lxf .lxf-resources :is(.lv-facts p, .lv-disclosure-copy) { font-size:max(14px, calc(18 * var(--lux-unit))); line-height:1.42; }
#detailDialog .lux-detail .lxf .lxf-note { max-width:46em; margin:calc(26 * var(--lux-unit)) 0 0; color:var(--lux-taupe); }
/* Armed, wider than 1000 px: the region grows out of the photograph's lower right corner, toward its disclosure,
 * above the Close pill's lane; it scrolls on its own and the page underneath never moves. */
@media (min-width:1001px) {
  #detailDialog .lux-detail .lxf[data-lxf-tech] .lxf-tech {
    position:relative; z-index:4; grid-column:1; grid-row:1; align-self:end; justify-self:end;
    width:min(calc(100% - 16px), max(400px, calc(620 * var(--lux-unit)))); max-height:calc(100% - 104px - 8px); margin:0 8px 104px;
    overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; box-shadow:0 30px 80px rgba(0,0,0,.34);
    padding:calc(40 * var(--lux-unit)) calc(var(--lux-edge) - 8px) calc(30 * var(--lux-unit));
    transform-origin:100% 100%; transform:scale(.06); opacity:0; visibility:hidden;
    transition:transform .6s var(--lux-ease-panel), opacity .3s var(--lux-ease-ui), visibility 0s linear .6s;
  }
  #detailDialog .lux-detail .lxf[data-lxf-tech] .lxf-tech > * { opacity:0; transition:opacity .25s var(--lux-ease-ui); }
  #detailDialog .lux-detail .lxf[data-lxf-tech="open"] .lxf-tech { transform:none; opacity:1; visibility:visible; transition:transform .6s var(--lux-ease-panel), opacity .25s var(--lux-ease-ui), visibility 0s; }
  #detailDialog .lux-detail .lxf[data-lxf-tech="open"] .lxf-tech > * { opacity:1; transition:opacity .45s var(--lux-ease-ui) .26s; }
  #detailDialog .lux-detail .lxf[data-lxf-tech] .lxf-pair { grid-template-rows:clamp(600px, calc(100svh - 16px), 1060px); }
}

/* the onward row: the next item (photograph) beside its collection (panel); the only thing after the invitation */
#detailDialog .lux-detail .lxf-onward {
  display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); gap:8px; height:clamp(220px, 32svh, 360px); margin:8px 8px 0;
}
/* no next item (CONTOUR): one compact strip, never a tall empty panel */
#detailDialog .lux-detail .lxf-onward--single { grid-template-columns:minmax(0, 1fr); height:auto; }
#detailDialog .lux-detail .lxf-onward--single .lxf-collection { min-height:0; align-items:center; padding-top:calc(34 * var(--lux-unit)); padding-bottom:calc(34 * var(--lux-unit)); }
#detailDialog .lux-detail :is(.lxf-next, .lxf-collection) {
  --lxf-rise:1;
  position:relative; display:flex; align-items:flex-end; min-width:0; box-sizing:border-box; overflow:hidden; isolation:isolate;
  padding:calc(36 * var(--lux-unit)) calc(var(--lux-edge) - 8px); border-radius:var(--radius); color:var(--lux-cream); text-decoration:none;
  transform:translateY(calc(56px * (1 - var(--lxf-rise)))); opacity:clamp(0, .25 + var(--lxf-rise), 1);
}
#detailDialog .lux-detail .lxf-collection { background:var(--lux-panel); }
#detailDialog .lux-detail .lxf-next-media { position:absolute; inset:0; z-index:-1; background:#221f1d; }
#detailDialog .lux-detail .lxf-next-media img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; transition:scale 1.1s cubic-bezier(.16,1,.3,1); }
#detailDialog .lux-detail .lxf-next-media::after {
  content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(24,23,23,.82), rgba(24,23,23,.34) 48%, rgba(24,23,23,.08) 78%), linear-gradient(to right, rgba(24,23,23,.36), rgba(24,23,23,0) 55%);
}
/* a supplier's next model: its render on a studio tile inside the panel, whole */
#detailDialog .lux-detail .lxf-next--object { background:var(--lux-panel); }
#detailDialog .lux-detail .lxf-next--object .lxf-next-media { inset:8px 8px 8px auto; width:min(46%, 460px); border-radius:var(--lux-r-nested); overflow:hidden; background:#ebe6de; }
#detailDialog .lux-detail .lxf-next--object .lxf-next-media img { box-sizing:border-box; padding:8%; object-fit:contain; mix-blend-mode:multiply; }
#detailDialog .lux-detail .lxf-next--object .lxf-next-media::after { display:none; }
#detailDialog .lux-detail .lxf-next--object .lxf-onward-arrow { right:calc(min(46%, 460px) + 24px); }
#detailDialog .lux-detail .lxf-next--object .lxf-onward-text { max-width:calc(100% - min(46%, 460px) - 40px); }
#detailDialog .lux-detail .lxf-next--object .lxf-onward-kind { text-wrap:balance; }
#detailDialog .lux-detail .lxf-onward-text { display:flex; flex-direction:column; gap:8px; min-width:0; }
#detailDialog .lux-detail .lxf-label { display:block; margin:0; font-size:var(--lux-fs-small); line-height:1.3; color:var(--lux-taupe); }
#detailDialog .lux-detail .lxf-next .lxf-label { color:rgba(244,239,231,.84); }
#detailDialog .lux-detail .lxf-onward-name { font-size:clamp(36px, calc(88 * var(--lux-unit)), 96px); line-height:.94; letter-spacing:-.045em; overflow-wrap:anywhere; }
#detailDialog .lux-detail .lxf-collection .lxf-onward-name { font-size:clamp(28px, calc(56 * var(--lux-unit)), 64px); line-height:1; letter-spacing:-.03em; }
#detailDialog .lux-detail .lxf-onward-kind { font-size:var(--lux-fs-small); line-height:1.3; color:rgba(244,239,231,.84); }
#detailDialog .lux-detail .lxf-collection-text { max-width:30em; margin-top:6px; color:var(--lux-taupe); text-wrap:pretty; }
#detailDialog .lux-detail .lxf-count { margin-left:.18em; font-size:.36em; letter-spacing:0; vertical-align:super; color:var(--lux-taupe); }
#detailDialog .lux-detail .lxf-onward-arrow {
  position:absolute; right:calc(var(--lux-edge) - 8px); top:calc(30 * var(--lux-unit)); display:grid; place-items:center; box-sizing:border-box; width:48px; height:48px;
  border:1px solid rgba(244,239,231,.5); border-radius:50%; font-size:18px; line-height:1; transition:background-color .3s var(--lux-ease-ui), color .3s var(--lux-ease-ui), transform .45s var(--lux-ease-out);
}
#detailDialog .lux-detail .lxf-next:not(.lxf-next--object) .lxf-onward-arrow { background:rgba(24,23,23,.38); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#detailDialog .lux-detail :is(.lxf-next, .lxf-collection):focus-visible { outline:2px solid var(--lux-cream); outline-offset:-6px; }
@media (hover:hover) and (pointer:fine) {
  #detailDialog .lux-detail .lxf-next:hover .lxf-next-media img { scale:1.05; }
  #detailDialog .lux-detail :is(.lxf-next, .lxf-collection):hover .lxf-onward-arrow { background:var(--lux-cream); color:var(--ink); border-color:var(--lux-cream); transform:rotate(45deg); }
}

/* ── Density step ────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1000px) {
  #detailDialog .lux-detail .lxm-head { grid-template-columns:minmax(0, 1fr); }
  #detailDialog .lux-detail .lxm-lead { justify-self:start; }
  #detailDialog .lux-detail .lxm-cards { grid-template-columns:minmax(0, 1fr); }
}

/* ── Phone ≤700: stacked pairs in flow, copy first (as CONTOUR's perspectives), then the photograph ─────────────── */
@media (max-width:700px) {
  #detailDialog .lux-detail .lxs-scene { display:flex; flex-direction:column; gap:4px; height:auto; min-height:0; margin:8px 8px 28px; }
  #detailDialog .lux-detail .lxs-panel { border-radius:28px; }
  #detailDialog .lux-detail .lxs-copy { min-height:250px; gap:36px; padding:24px 24px 26px; }
  #detailDialog .lux-detail .lxs-title { font-size:clamp(29px, 7.8vw, 46px); }
  #detailDialog .lux-detail .lxs-foot { gap:20px; }
  #detailDialog .lux-detail .lxs-text { flex:0 1 220px; min-width:0; font-size:14px; }
  #detailDialog .lux-detail .lxs-visual { aspect-ratio:4/5; }

  #detailDialog .lux-detail .lxm { padding-top:100px; }
  #detailDialog .lux-detail .lxm-head { gap:18px; padding:0 24px 36px; }
  #detailDialog .lux-detail .lxm-title { font-size:clamp(34px, 9.6vw, 46px); }
  #detailDialog .lux-detail .lxm-lead { font-size:18px; }
  #detailDialog .lux-detail .lxm [data-lxm-card] { border-radius:28px; }
  #detailDialog .lux-detail .lxm-media { aspect-ratio:4/5; }
  #detailDialog .lux-detail .lxm-face { padding:24px 20px 0; }
  #detailDialog .lux-detail .lxm-name { font-size:26px; }
  #detailDialog .lux-detail .lxm-summary { font-size:16px; }
  #detailDialog .lux-detail .lxm-open { margin:20px 20px 0; font-size:15px; }
  #detailDialog .lux-detail .lxm-panel { padding:6px 20px 24px; }
  #detailDialog .lux-detail .lxm-fact { grid-template-columns:minmax(0, 1fr); gap:4px; }
  #detailDialog .lux-detail .lxm .lux-materials-note { margin:24px 24px 0; max-width:none; }

  #detailDialog .lux-detail .lxg { padding-top:100px; }
  #detailDialog .lux-detail .lxg-head { flex-wrap:wrap; align-items:flex-end; padding:0 24px 22px; }
  #detailDialog .lux-detail .lxg-tools { gap:14px; }
  #detailDialog .lux-detail .lxg-row { padding:8px 16px; gap:8px; }
  #detailDialog .lux-detail .lxg-card, #detailDialog .lux-detail .lxg-item--wide .lxg-card, #detailDialog .lux-detail .lxg-item--square .lxg-card { border-radius:26px; }
  #detailDialog .lux-detail .lxg-card { width:72vw; aspect-ratio:4/5; }
  #detailDialog .lux-detail .lxg-item--wide .lxg-card { width:86vw; aspect-ratio:4/3; }
  #detailDialog .lux-detail .lxg-item--square .lxg-card { width:64vw; aspect-ratio:1/1; }

}
/* ── Short landscape (wider than a phone, under 600 px tall; the story stack is off here): no pair, card or closing
 *    card is taller than the view it sits in, so no copy lands in the Close pill's lane ───────────────────────────── */
@media (min-width:701px) and (max-height:600px) {
  #detailDialog .lux-detail .lxs-scene { display:flex; flex-direction:column; gap:4px; height:auto; min-height:0; margin:8px 8px 24px; }
  #detailDialog .lux-detail .lxs-copy { min-height:0; gap:32px; padding:28px calc(var(--lux-edge) - 8px) 28px; }
  #detailDialog .lux-detail .lxs-visual { aspect-ratio:16/10; }
  #detailDialog .lux-detail .lxm[data-lxm-armed] [data-lxm-card] { height:calc(100svh - 16px); min-height:0; padding-bottom:88px; }
  #detailDialog .lux-detail .lxm[data-lxm-armed] .lxm-panel {
    bottom:calc(88px + 44px + 10px); max-height:calc(100% - 88px - 54px - 16px); scrollbar-width:thin;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 28px), transparent); mask-image:linear-gradient(#000 calc(100% - 28px), transparent);
  }
  #detailDialog .lux-detail .lxp-drawing { min-height:calc(100svh - 16px); }
}
/* ── Spread, plate: one column below 1000 px ─────────────────────────────────────────────────────────────────────── */
@media (max-width:1000px) {
  #detailDialog .lux-detail .lxt-sheet { grid-template-columns:minmax(0, 1fr); }
  #detailDialog .lux-detail .lxt-rows { align-self:stretch; }
  #detailDialog .lux-detail .lxp--pair { grid-template-columns:minmax(0, 1fr); }
  #detailDialog .lux-detail .lxp-drawing { min-height:clamp(360px, 70vw, 620px); }
}
@media (max-width:700px) {
  #detailDialog .lux-detail .lxs-states { left:18px; right:18px; top:16px; }
  #detailDialog .lux-detail .lxt { padding:100px 8px 0; }
  #detailDialog .lux-detail .lxt-sheet { gap:32px; padding:28px 20px 24px; border-radius:28px; }
  #detailDialog .lux-detail .lxt-name { font-size:26px; }
  #detailDialog .lux-detail .lxt-summary { font-size:16px; }
  #detailDialog .lux-detail .lxt .lxm-fact { grid-template-columns:minmax(0, 1fr); gap:4px; }
  #detailDialog .lux-detail .lxp { margin-top:100px; }
  #detailDialog .lux-detail .lxp-sheet { gap:28px; padding:26px 20px 26px; border-radius:28px; }
  #detailDialog .lux-detail .lxp-head { flex-wrap:wrap; }
  #detailDialog .lux-detail .lxp-figures, #detailDialog .lux-detail .lxp-figures:is([style*="--n:1"]) { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 18px; }
  #detailDialog .lux-detail .lxp-figure--xl dd { font-size:clamp(34px, 10vw, 44px); white-space:normal; }
  #detailDialog .lux-detail .lxp-figure--wide, #detailDialog .lux-detail .lxp-figure--l { grid-column:1 / -1; }
  #detailDialog .lux-detail .lxp-figure--l dd { font-size:clamp(24px, 7vw, 30px); }
  #detailDialog .lux-detail .lxp-figure:is(.lxp-figure--m, .lxp-figure--text) { grid-column:1 / -1; }
  #detailDialog .lux-detail .lxp-drawing { min-height:340px; padding:24px 20px 20px; border-radius:28px; }
  #detailDialog .lux-detail .lux-card--product.lux-card--object .lux-card-media { height:min(64vw, 260px); }
  #detailDialog .lux-detail .lux-card--object .lux-card-img { padding:2% 6%; }
}

/* ── Ending, tablet and phone: the pair stacks (photograph, then the panel); the technical region opens in flow ─── */
@media (max-width:1000px) {
  #detailDialog .lux-detail .lxf-pair { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto; gap:4px; }
  #detailDialog .lux-detail .lxf-media { grid-column:1; grid-row:auto; aspect-ratio:16/10; }
  #detailDialog .lux-detail .lxf-panel { grid-column:1; grid-row:auto; padding:32px calc(var(--lux-edge) - 8px) 24px; }
  #detailDialog .lux-detail .lxf-invite { margin-top:56px; padding-top:0; }
  #detailDialog .lux-detail .lxf-tech { grid-column:1; grid-row:auto; }
  #detailDialog .lux-detail .lxf[data-lxf-tech="closed"] .lxf-tech { display:none; }
  #detailDialog .lux-detail .lxf[data-lxf-tech="open"] .lxf-tech { animation:lxm-in .45s var(--lux-ease-out) both; }
  #detailDialog .lux-detail .lxf-tech-close { display:none; }
  #detailDialog .lux-detail .lxf-onward { grid-template-columns:minmax(0, 1fr); height:auto; }
  #detailDialog .lux-detail .lxf-next { min-height:clamp(260px, 52vw, 420px); }
  #detailDialog .lux-detail .lxf-collection { min-height:180px; }
}
@media (max-width:700px) {
  #detailDialog .lux-detail .lxf { padding:100px 0 124px; }
  #detailDialog .lux-detail .lxf-media, #detailDialog .lux-detail .lxf-panel, #detailDialog .lux-detail .lxf-tech,
  #detailDialog .lux-detail :is(.lxf-next, .lxf-collection) { border-radius:calc(28px + 50px * (1 - var(--lxf-enter, 1))); }
  #detailDialog .lux-detail :is(.lxf-next, .lxf-collection) { border-radius:28px; padding:22px 20px; }
  #detailDialog .lux-detail .lxf-media { aspect-ratio:4/5; }
  #detailDialog .lux-detail .lxf-media--object { aspect-ratio:4/3; }
  #detailDialog .lux-detail .lxf-panel { padding:24px 20px 14px; }
  #detailDialog .lux-detail .lxf-kicker-name { font-size:20px; }
  #detailDialog .lux-detail .lxf-invite { margin-top:48px; gap:22px; }
  #detailDialog .lux-detail .lxf-title { font-size:clamp(44px, 13vw, 62px); }
  #detailDialog .lux-detail .lxf-cta { height:56px; font-size:16px; padding-left:22px; }
  #detailDialog .lux-detail .lxf-resources-nav { margin-top:40px; }
  #detailDialog .lux-detail .lxf .lxf-link { font-size:20px; min-height:44px; }
  #detailDialog .lux-detail .lxf-tech { padding:24px 20px 26px; }
  #detailDialog .lux-detail .lxf-next { min-height:0; aspect-ratio:4/3; }
  #detailDialog .lux-detail .lxf-next--object { aspect-ratio:auto; min-height:0; align-items:flex-start; flex-direction:column; justify-content:flex-end; padding-top:calc(8px + 150px + 22px); }
  #detailDialog .lux-detail .lxf-next--object .lxf-next-media { inset:8px 8px auto 8px; width:auto; height:150px; }
  #detailDialog .lux-detail .lxf-next--object .lxf-onward-text { max-width:none; }
  #detailDialog .lux-detail .lxf-next--object .lxf-onward-arrow { top:20px; right:20px; bottom:auto; border-color:transparent; background:var(--ink); color:var(--lux-cream); }
  #detailDialog .lux-detail .lxf-onward-name { font-size:clamp(34px, 11vw, 48px); }
  #detailDialog .lux-detail .lxf-collection .lxf-onward-name { font-size:26px; }
  #detailDialog .lux-detail .lxf-onward-arrow { right:16px; top:16px; width:44px; height:44px; }
}
/* short landscape, wider than a phone: the pair never asks for more height than the view gives it */
@media (min-width:1001px) and (max-height:600px) {
  #detailDialog .lux-detail .lxf-pair, #detailDialog .lux-detail .lxf[data-lxf-tech] .lxf-pair { grid-template-rows:minmax(calc(100svh - 16px), auto) auto; }
  #detailDialog .lux-detail .lxf[data-lxf-tech] .lxf-tech { margin-bottom:88px; max-height:calc(100% - 96px); }
}
@media (prefers-reduced-motion:reduce) {
  #detailDialog .lux-detail :is(.lxm-img, .lxg-card img, .lxf-next-media img, .lxf-onward-arrow, .lxf-link-arrow) { transition:none; }
}