/* ==========================================================================
   NEXUS — Products sheet

   The dark ground and every shared component live in dark.css, which loads
   first. What remains here is only what the Products routes add: the product
   hero frame, the overview (introduction and application examples), the
   technical data band, the configuration strip, and the index's group cards.

   Loaded via `pageStyles: ["dark", "products"]`.
   ========================================================================== */

/* --- 1 · The product hero ------------------------------------------------
   Frame level 1 (DESIGN.md §0.6). Sized against the content column, capped in
   height, never full-bleed and never sized to the viewport. A 1600px source
   and an 800px source occupy the same rectangle, which is what makes ten
   product pages read as one set. */

.page--dark .product-hero {
  margin: 0 auto;
  max-inline-size: calc(var(--w-wide) + (var(--gutter) * 2));
  padding-inline: var(--gutter);
}
.page--dark .product-hero__frame {
  display: block;
  inline-size: min(100%, 900px);
  block-size: 500px;
  border-radius: var(--radius-dark-card);
  background: #101010;
}
.page--dark .product-hero__caption {
  display: block;
  margin-top: var(--s-4);
  color: var(--c-muted);
  font-size: var(--fs-body-sm);
  max-inline-size: 60ch;
}
@media (max-width: 767px) {
  /* A fixed stage at 390px leaves an empty box under a wide photograph. The
     stage becomes a ratio instead — same hierarchy, no void. */
  .page--dark .product-hero__frame { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; }
}

/* --- Overview: the introduction beside "Best suited for" -----------------
   Two blocks of the same weight, so `--grid-even` and `--gap-text`. A
   product with no list keeps the introduction at reading width on the left. */

.page--dark .prod-story {
  display: grid;
  gap: var(--s-7);
  margin-top: var(--s-6);
}
.page--dark .prod-story > * { min-width: 0; }
@media (min-width: 900px) {
  .page--dark .prod-story { grid-template-columns: var(--grid-even); column-gap: var(--gap-text); }
}
.page--dark .prod-story__block p {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 54ch;
}
.page--dark .prod-story__block .t-lead { color: var(--c-invert); font-size: var(--fs-lead); line-height: var(--lh-lead); }
@media (min-width: 900px) {
  .page--dark .prod-story--single { grid-template-columns: minmax(0, 1fr); }
}

/* --- Overview: application examples --------------------------------------
   One row per case: photograph left, text right from 768px; photograph above
   the text below that. The photograph takes the §0.6.4 3:2 evidence frame; a
   portrait photograph (the Dual Track bottles) takes a narrow 9:16 column
   instead, so both tracks stay in view and nothing is cropped into a strip.
   Rows are divided by the dark hairline, not boxed: the text is set on the
   black ground like the introduction above it. */

.page--dark .cases { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-7); }
.page--dark .case {
  display: grid;
  gap: var(--s-5);
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-line-dark);
}
.page--dark .case > * { min-width: 0; }
@media (min-width: 768px) {
  .page--dark .case { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-text); align-items: center; }
  .page--dark .case--portrait { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
}
.page--dark .case__media { margin: 0; }
.page--dark .case__frame { display: block; inline-size: 100%; aspect-ratio: var(--ratio-evidence); border-radius: var(--radius-dark-card); background: #101010; }
.page--dark .case--portrait .case__frame { aspect-ratio: 9 / 16; max-inline-size: 300px; }
.page--dark .case__text { display: grid; gap: var(--s-3); align-content: center; }
.page--dark .case__label {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
}
.page--dark .case__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-light); letter-spacing: -0.02em; line-height: 1.25; color: var(--c-invert); }
.page--dark .case__line { margin: 0; font-size: var(--fs-body); line-height: 1.65; color: var(--c-muted); max-width: 54ch; }
.page--dark .case__more { margin: var(--s-2) 0 0; }
.page--dark .case__more .link-arrow {
  font-size: var(--fs-body);
  border-bottom: 1px solid var(--c-line-dark);
  transition: color var(--dur-micro) var(--ease-state), border-color var(--dur-micro) var(--ease-state);
}
.page--dark .case__more .link-arrow .btn__arrow { color: var(--c-accent-on-dark); }
@media (hover: hover) and (pointer: fine) {
  .page--dark .case__more .link-arrow:hover { color: var(--c-accent-on-dark); border-bottom-color: var(--c-accent-on-dark); }
}

/* --- The Products index -------------------------------------------------- */

.page--dark .family-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-7) var(--gap-media);
  grid-template-columns: minmax(0, 1fr);
}
.page--dark .family-grid > * { min-width: 0; }
@media (min-width: 820px) { .page--dark .family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page--dark .family__link { display: block; text-decoration: none; color: inherit; }
.page--dark .family__frame {
  display: block;
  inline-size: 100%;
  aspect-ratio: var(--ratio-card);
  overflow: hidden;
  border-radius: var(--radius-dark-card);
  background: #101010;
}
.page--dark .family__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.page--dark .family__name {
  display: block;
  margin-top: var(--s-4);
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  letter-spacing: -0.02em;
  border-bottom: 1px solid transparent;
  inline-size: fit-content;
}
.page--dark .family__link:hover .family__name { border-bottom-color: var(--c-accent-on-dark); }
.page--dark .family__line { margin: var(--s-3) 0 0; color: var(--c-muted); font-size: var(--fs-body-sm); line-height: 1.55; max-width: 36ch; }
.page--dark .family__typical {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line-dark);
  display: grid;
  gap: var(--s-2);
}
.page--dark .family__typical .t-body-sm { color: var(--c-muted); line-height: 1.55; }
.page--dark .family__variants {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--c-line-dark);
  display: grid;
  gap: var(--s-2);
}
.page--dark .family__variants li { display: grid; gap: 2px; }
.page--dark .family__variants a { color: var(--c-invert); text-decoration: none; border-bottom: 1px solid transparent; justify-self: start; }
.page--dark .family__variants a:hover { border-bottom-color: var(--c-accent-on-dark); }

/* The selection aid: production need on the left, the product on the right.
   Same rule as the Projects selector — one column at mobile, at full reading
   size, because density is never bought by shrinking the text. */
.page--dark .selection-list { display: grid; gap: 0; margin: var(--s-6) 0 0; }
.page--dark .selection-row {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-top: 1px solid var(--c-line-dark);
}
.page--dark .selection-row:last-child { border-bottom: 1px solid var(--c-line-dark); }
@media (min-width: 820px) {
  .page--dark .selection-row { grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr); gap: var(--s-5); align-items: start; }
}
.page--dark .selection-row dt { font-size: var(--fs-body); line-height: 1.55; color: var(--c-invert); }
.page--dark .selection-row dd { margin: 0; display: grid; gap: var(--s-2); }
.page--dark .selection-row__answer { color: var(--c-invert); text-decoration: none; border-bottom: 1px solid var(--c-line-dark); justify-self: start; }
.page--dark .selection-row__answer:hover { border-bottom-color: var(--c-accent-on-dark); }

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 767px) {
  .page--dark .section { padding-block: 40px; }
  .page--dark .heading-block h2,
  .page--dark .section-head h2 { font-size: 1.75rem; line-height: 1.15; max-width: 24ch; }
  .page--dark .prod-story { gap: var(--s-6); margin-top: var(--s-5); }
  .page--dark .cases { margin-top: var(--s-7); gap: var(--s-6); }
  .page--dark .case { padding-top: var(--s-6); gap: var(--s-4); }
  .page--dark .application-grid { gap: var(--s-6) var(--gap-media); }
  .page--dark .variant__text { padding: var(--s-5); }
}

/* ==========================================================================
   Technical data — every product page (tabbed on Unit Load, 12 Sep 2026;
   one panel on the others, 13 Sep 2026)
   ==========================================================================

   Markup: site/_includes/product-details.njk. Behaviour:
   site/scripts/product-details.js, loaded only where there are tabs. One panel
   (`.dtabs--single`) uses the same group rail and rows with no controls.

   It sits on the page's single inverted band, so its palette is the band's:
   ink text, #5C5C5C metadata (6.0:1), #C9C9C9 hairlines. Brand blue is 3.4:1 on
   this ground, so it is used for the selected-tab bar and the "most used" bar
   — shapes, never text (WCAG 1.4.11 asks 3:1 of those).

   Every group is a two-column row: its name on a narrow left rail, its content
   on the right. That rail is what keeps five tabs of different material — rows,
   a width scale, drawings, photographs, videos, a file — reading as one sheet.
   ========================================================================== */

.page--dark .pdetail__note { margin: calc(var(--s-5) * -1) 0 var(--s-7); color: var(--c-muted); }

/* --- Controls ------------------------------------------------------------- */

.page--dark .dtabs__list {
  display: flex;
  gap: var(--s-6);
  border-bottom: 1px solid #C9C9C9;
  margin-bottom: var(--s-7);
}
/* An author display value beats the user-agent [hidden] rule. */
.page--dark .dtabs__list[hidden],
.page--dark .dtabs__panel[hidden],
.page--dark .dtabs__title[hidden],
.page--dark .dtabs__body[hidden] { display: none; }

.page--dark .dtabs__tab,
.page--dark .dtabs__toggle {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  font-family: var(--font-sans);
  color: var(--c-muted);
  cursor: pointer;
  text-align: left;
}
.page--dark .dtabs__tab {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-4) 0 calc(var(--s-4) - 1px);
  margin-bottom: -1px;
  font-size: var(--fs-body);
  letter-spacing: -0.01em;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.page--dark .dtabs__tab { transition: color var(--dur-micro) var(--ease-state), border-color var(--dur-micro) var(--ease-state); }
@media (hover: hover) and (pointer: fine) {
  /* Brand blue #0089B9 is 3.4:1 on this band — enough for a bar, not for
     text — so hover gives the bar and the text stays ink. */
  .page--dark .dtabs__tab:hover { color: var(--c-ink); border-bottom-color: var(--c-blue); }
  .page--dark .dtabs__toggle:hover { text-decoration: underline; text-decoration-color: var(--c-blue); text-underline-offset: 5px; }
  .page--dark .dtabs__toggle:hover .dtabs__icon { color: var(--c-blue); }
}
/* Five labels need about 1,015px at 32px spacing, and the content column at
   1024px is 928px, so the last tab ran 50px off the page. Between 1024 and
   1279px the spacing tightens and the ordinal numbers (a decoration; the
   label names the tab) are dropped. The label size does not change. */
@media (max-width: 1279px) {
  .page--dark .dtabs__list { gap: var(--s-5); }
  .page--dark .dtabs__tab .dtabs__num { display: none; }
}
.page--dark .dtabs__tab[aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-blue); }

.page--dark .dtabs__num {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-muted);
}

/* The dark ground's focus ring is the bright blue, 2.4:1 on this band. Here it
   is ink: the ring's job is to be seen, not to be on brand. */
.page--dark .pdetail button:focus-visible,
.page--dark .pdetail a:focus-visible,
.page--dark .pdetail [tabindex]:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}
.page--dark .dtabs__tab:focus-visible { outline-offset: 2px; }

/* --- Panels --------------------------------------------------------------- */

/* Without JavaScript the five panels simply follow one another. */
.page--dark .dtabs__panel + .dtabs__panel { margin-top: var(--s-9); }
.page--dark .dtabs.is-enhanced .dtabs__panel + .dtabs__panel { margin-top: 0; }

.page--dark .dtabs__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--c-ink);
  margin: 0 0 var(--s-6);
}

/* No rule between groups: the rows inside already carry hairlines, and a
   second line 30px below the last row read as a double rule. Groups are
   separated by space and by the name on the rail. */
.page--dark .dgroup {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-7) 0;
}
.page--dark .dgroup:first-child { padding-top: 0; }
.page--dark .dgroup > * { min-width: 0; }
/* A figure group with no title of its own belongs to the group above it. */
.page--dark .dgroup--untitled { padding-top: var(--s-5); }
@media (min-width: 1024px) {
  .page--dark .dgroup { grid-template-columns: minmax(0, 0.26fr) minmax(0, 0.74fr); column-gap: var(--gap-text); }
}
.page--dark .dgroup__title {
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--c-ink);
  margin: 0;
  padding-top: var(--s-4);  /* on the first row's text line, not above it */
}
.page--dark .dgroup__caption { margin-top: var(--s-4); max-width: 68ch; }
.page--dark .dgroup__caption--lead { margin: 0 0 var(--s-5); padding-top: var(--s-4); }

/* Spec rows inside the panel: the group rail already names the category. */
@media (min-width: 720px) {
  .page--dark .dtabs .spec-row { grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr); }
}
/* Reading comfort (13 Sep 2026). Nothing is made smaller to save height:
   - row labels go from 12px to 13px mono, the size at which an uppercase
     label is read rather than deciphered;
   - the value keeps body size on a 1.55 line;
   - the supporting sentence under a value (condition, limit, warranty term)
     takes 15px on a 1.6 line, set 6px below the value so it reads as belonging
     to it, and stops at 60ch so a long condition does not run the full rail. */
.page--dark .dtabs .t-spec-key {
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--c-muted);
}
.page--dark .dtabs .spec-row { padding-block: var(--s-4); }
.page--dark .dtabs .spec-row dd { max-width: 62ch; font-size: var(--fs-body); line-height: 1.55; color: var(--c-ink); }
.page--dark .dtabs .spec-row .t-caption {
  margin-top: 6px;
  max-width: 60ch;
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.page--dark .dtabs .dgroup__title { font-size: 0.8125rem; letter-spacing: 0.03em; }
.page--dark .pdetail__note { max-width: 64ch; font-size: var(--fs-body); line-height: 1.6; }

/* --- Width scale ---------------------------------------------------------- */

.page--dark .widths {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid #C9C9C9;
  border-bottom: 1px solid #C9C9C9;
}
.page--dark .widths__item {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3) var(--s-4) 0;
  border-top: 3px solid transparent;
  margin-top: -2px;
}
.page--dark .widths__item + .widths__item { padding-left: var(--s-3); border-left: 1px solid #DCDCDC; }
.page--dark .widths__item--on { border-top-color: var(--c-blue); }
.page--dark .widths__value {
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  font-weight: var(--fw-light);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.page--dark .widths__unit { font-size: var(--fs-body-sm); letter-spacing: 0; color: var(--c-muted); }
.page--dark .widths__tag {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  min-block-size: 1.5em;
}
.page--dark .widths__item--on .widths__tag { color: var(--c-ink); }
.page--dark .widths__value { white-space: nowrap; }
/* 768–1279px: seven cells in the tab rail were ~90px, so "165 mm" and
   "NARROW TRACK" wrapped unevenly (measured at 1024). Four per row instead,
   at the same type size. */
@media (min-width: 768px) and (max-width: 1279px) {
  .page--dark .widths { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 0; }
  .page--dark .widths__item { border-bottom: 1px solid #C9C9C9; }
  .page--dark .widths__item:nth-child(4n + 1) { border-left: 0; }
  /* The "most used" bar runs down the left of its own cell, as at mobile: a
     bar along the top sat on the row line and read as belonging to the cell
     above. */
  .page--dark .widths__item, .page--dark .widths__item + .widths__item { margin-top: 0; border-top: 0; padding-left: var(--s-4); }
  .page--dark .widths .widths__item--on { box-shadow: inset 3px 0 0 var(--c-blue); }
}

/* --- The compact configuration strip (config-list.njk) --------------------
   Owner instruction, 13 Sep 2026: A–H explain one thing — inlet and outlet
   direction — so they are a small strip, not a showcase. Eight across on
   desktop, four across in two rows on mobile. No card and no second letter:
   each drawing prints its own. The white stage stays, because the drawings
   have a white ground. The artwork is never cropped and never drawn past its
   200px (§0.8.5); a click opens it at 200px (config-zoom.js).

   Measured: at 1440px each drawing is about 110px in the tab rail and 150px on
   the family page; at 390px about 78px — the letter and the direction of the
   inlet and outlet bars stay readable, and the dialog shows the full 200px. */
.page--dark .config-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  max-inline-size: 1280px;
}
@media (min-width: 720px) { .page--dark .config-strip { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.page--dark .config-strip > * { min-width: 0; }
.page--dark .config-strip__item {
  display: block;
  max-inline-size: 200px;
  aspect-ratio: 1 / 1;
  padding: 8%;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #D6D6D6;
  border-radius: var(--radius-dark-ui);
  cursor: zoom-in;
  transition: border-color var(--dur-micro) var(--ease-state);
}
.page--dark .config-strip__item img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
/* A wide drawing (Curve A–F, 806 x 380) takes two cells: at one cell its arrow
   would be about 20px tall. Its strip has six cells on desktop, so the set
   reads three + three; two across on mobile (owner, 13 Sep 2026). */
.page--dark .config-strip__cell--wide { grid-column: span 2; }
@media (min-width: 720px) { .page--dark .config-strip--wide { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.page--dark .config-strip__item--wide { max-inline-size: 420px; aspect-ratio: 806 / 380; padding: 4%; }
@media (hover: hover) and (pointer: fine) {
  .page--dark .config-strip__item:hover { border-color: var(--c-blue); }
}
.page--dark .band--invert .config-strip__item { border-color: #D6D6D6; }

/* The dialog: the drawing at its own 200px, its letter, and a close button. */
.config-zoom {
  max-inline-size: calc(100vw - 32px);
  padding: var(--s-5);
  border: 0;
  border-radius: var(--radius-dark-card);
  background: #FFFFFF;
  color: var(--c-ink);
  text-align: center;
}
.config-zoom::backdrop { background: rgba(0, 0, 0, 0.72); }
.config-zoom__title { margin: 0 0 var(--s-3); font-family: var(--font-label); font-size: var(--fs-body-sm); letter-spacing: var(--ls-eyebrow); }
/* Its own size (width and height set by config-zoom.js), narrowed to fit the
   screen, never enlarged. */
.config-zoom__img { display: block; max-inline-size: 100%; block-size: auto; margin: 0 auto; }
.config-zoom__close {
  margin-top: var(--s-4);
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-dark-ui);
  background: var(--c-ink);
  color: #FFFFFF;
  font: inherit;
  font-size: var(--fs-body-sm);
  cursor: pointer;
}
.config-zoom__close:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }

/* On the Spiral family page the strip is its own short section on the black
   ground: a heading at section-label weight and one sentence. */
.page--dark .config-compact { padding-block: var(--s-8); }
.page--dark .config-compact__heading {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.page--dark .config-compact__note { margin: var(--s-2) 0 var(--s-5); color: var(--c-muted); font-size: var(--fs-body); line-height: 1.55; max-width: 60ch; }
.page--dark .config-compact .config-strip__item { border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .page--dark .config-compact .config-strip__item:hover { border-color: var(--c-accent-on-dark); box-shadow: 0 0 0 1px var(--c-accent-on-dark); }
}

/* --- Spiral family page: Powered / Gravity groups ------------------------- */
.page--dark .drive-group + .drive-group { margin-top: var(--s-9); }
.page--dark .drive-group__head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.page--dark .drive-group__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-light); letter-spacing: -0.02em; line-height: 1.25; }
.page--dark .drive-group__note { margin: 0; color: var(--c-muted); font-size: var(--fs-body); line-height: 1.55; }

/* --- Equipment: standard beside options ----------------------------------- */

.page--dark .equip { display: grid; gap: var(--s-6) var(--gap-text); }
.page--dark .equip > * { min-width: 0; }
@media (min-width: 1280px) { .page--dark .equip { grid-template-columns: var(--grid-even); } }
.page--dark .equip__label {
  margin: 0 0 var(--s-3);
  padding-top: var(--s-4);
  font-size: var(--fs-body);
  color: var(--c-ink);
}
@media (min-width: 720px) {
  .page--dark .equip .spec-row { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
}

/* --- Figures ---------------------------------------------------------------
   Frame level 2 (DESIGN.md §0.6.4): 3:2, never as tall as the hero. A render on
   a white ground is contained on a white stage; a photograph is covered. A
   legacy web-sized image is shown at no more than its own size. */
.page--dark .dfigs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6) var(--gap-media); }
.page--dark .dfigs > * { min-width: 0; }
/* One photograph on its own takes one column of the two-up grid, not the whole
   rail: at full width the lubrication photograph ran 900 x 600, larger than
   the hero it supports. */
@media (min-width: 720px) {
  .page--dark .dfigs { grid-template-columns: var(--grid-even); }
}
.page--dark .dfig { margin: 0; }
/* A legacy image shown at its natural size is not squeezed into half the rail. */
.page--dark .dfigs > li:has(.dfig--natural) { grid-column: 1 / -1; }
.page--dark .dfig__frame { display: block; inline-size: 100%; aspect-ratio: var(--ratio-evidence); background: #FFFFFF; }
.page--dark .dfig figcaption { margin-top: var(--s-3); }
.page--dark .dfig--natural img {
  display: block;
  inline-size: 100%;
  max-inline-size: 600px;
  block-size: auto;
  background: #FFFFFF;
  border-radius: var(--radius-dark-card);
}

/* --- Videos (product page) ------------------------------------------------
   The videos are the shared component in dark.css; this adds only the label
   spacing. */
.page--dark .prod-media .t-label { margin-bottom: var(--s-5); }

/* --- Page head without a breadcrumb trail ---------------------------------
   Product pages render no trail (the header's Products menu does that job),
   which took about 50px off the top. The heading block closes up by the same
   amount instead of leaving the gap where the trail was. */
.page--dark .page-head--flush { padding-top: var(--s-7); }
@media (max-width: 767px) { .page--dark .page-head--flush { padding-top: var(--s-6); } }

/* --- "View all spiral conveyors" ------------------------------------------
   One line where the sibling cards were. Quiet, on the black ground, between
   the detail band and the enquiry. */
.page--dark .prod-family-link { margin: 0 auto; padding-block: var(--s-7); }
.page--dark .prod-family-link .link-arrow { font-size: var(--fs-body); }
.page--dark .prod-family-link .link-arrow .btn__arrow { color: var(--c-accent-on-dark); }
.page--dark .prod-family-link .link-arrow {
  border-bottom: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease-state), border-color var(--dur-micro) var(--ease-state);
}
@media (hover: hover) and (pointer: fine) {
  .page--dark .prod-family-link .link-arrow:hover { color: var(--c-accent-on-dark); border-bottom-color: var(--c-accent-on-dark); }
}

/* --- The compact enquiry ---------------------------------------------------
   One heading, one paragraph, one button. The statement scale (64px) and the
   stacked measure were built for a closing call on long pages; here the band is
   a short last step, so the heading takes the section scale and the button sits
   beside the words on desktop. */
.page--dark .closing-cta--compact { padding-block: var(--s-8); }
.page--dark .closing-cta--compact .closing-cta__inner { display: grid; gap: var(--s-6); align-items: end; max-width: none; }
@media (min-width: 1024px) {
  .page--dark .closing-cta--compact .closing-cta__inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap-text); }
}
.page--dark .closing-cta--compact h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.1;
  max-width: 22ch;
}
.page--dark .closing-cta--compact .t-lead { margin-top: var(--s-4); max-width: 60ch; }
.page--dark .closing-cta--compact .closing-cta__action { margin: 0; }
@media (max-width: 767px) {
  .page--dark .closing-cta--compact { padding-block: var(--s-7); }
}

/* --- Accordion: below 1024px, script present ------------------------------ */

.page--dark .dtabs:not(.is-enhanced) .dtabs__toggle { display: none; }

@media (max-width: 1023px) {
  .page--dark .dtabs.is-enhanced .dtabs__panel { border-top: 1px solid #C9C9C9; }
  .page--dark .dtabs.is-enhanced .dtabs__panel:last-child { border-bottom: 1px solid #C9C9C9; }
  .page--dark .dtabs.is-enhanced .dtabs__title { margin: 0; font-size: inherit; }
  .page--dark .dtabs__toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
    inline-size: 100%;
    min-block-size: 56px;
    padding: var(--s-4) 0;
    font-size: var(--fs-lead);
    font-weight: var(--fw-light);
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--c-ink);
  }
  .page--dark .dtabs__icon { position: relative; inline-size: 16px; block-size: 16px; }
  .page--dark .dtabs__icon::before,
  .page--dark .dtabs__icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    inline-size: 16px;
    block-size: 2px;
    background: currentColor;
  }
  .page--dark .dtabs__icon::after { transform: rotate(90deg); }
  .page--dark .dtabs__toggle[aria-expanded="true"] .dtabs__icon::after { transform: none; }
  .page--dark .dtabs.is-enhanced .dtabs__body { padding-bottom: var(--s-6); }
}

@media (max-width: 767px) {
  .page--dark .pdetail__note { margin: calc(var(--s-3) * -1) 0 var(--s-6); }
  .page--dark .dgroup { padding-top: var(--s-6); gap: var(--s-2); }
  .page--dark .dgroup__title,
  .page--dark .dgroup__caption--lead,
  .page--dark .equip__label { padding-top: 0; }
  .page--dark .dtabs.is-enhanced .dgroup:first-child { padding-top: var(--s-3); }
  /* The scale becomes a list. Seven cells across 350px wrapped the unit under
     every value, and a two-column grid left 600 mm alone on a half-width row.
     One row per width, value left, tag right; "most used" is a blue bar at the
     start of the row as well as the words. */
  .page--dark .widths { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .page--dark .widths__item,
  .page--dark .widths__item + .widths__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    margin: 0;
    padding: var(--s-3) 0 var(--s-3) var(--s-4);
    border: 0;
    border-top: 1px solid #C9C9C9;
    box-shadow: none;
  }
  .page--dark .widths .widths__item--on { box-shadow: inset 3px 0 0 var(--c-blue); }
  .page--dark .widths__tag { min-block-size: 0; }
}