/*
 * V6 skin (Stage 2, PROPOSED, 5 Nov 2026; owner's V6 brief: "premium B2B", matte black, charcoal, dark stone and
 * stainless). Loaded after site.css, jw.css and v3.css: it re-points their tokens, so every V5 page and tool takes the
 * V6 look without a template change (zero feature loss), and it adds the .v6-* components the new modules use.
 *
 * Same brand: the MCS mark, Oswald / Work Sans / JetBrains Mono, dark by default with the light theme, bronze kept as
 * the warm highlight. New: stainless (cool brushed steel) is the interactive colour; grounds are matte black, charcoal
 * and dark stone; light theme on warm stone instead of warm white.
 * Contrast (WCAG 2.1): every text token on every ground >= 4.9:1 in both themes (docs/v6-stage2/DESIGN-SYSTEM.md).
 * Design review gate: nothing here is live; the owner approves the look before Stage 3 builds pages on it.
 */

/* ---------------------------------------------------------------- 1. palette (fixed values) */
:root {
  --v6-black:      #0E0E0F;   /* matte black: page ground (dark) */
  --v6-black-2:    #151617;
  --v6-charcoal:   #1B1C1E;   /* cards (dark) */
  --v6-charcoal-2: #232528;
  --v6-stone-9:    #2B2824;   /* dark stone: feature bands */
  --v6-stone-7:    #4A453E;
  --v6-stone-3:    #CFC9BF;   /* light-theme rules */
  --v6-stone-2:    #E9E5DE;   /* light-theme band */
  --v6-stone-1:    #F4F2EE;   /* light-theme ground */
  --v6-steel-1:    #E4E7EA;
  --v6-steel-2:    #D3D7DA;   /* stainless button face */
  --v6-steel-3:    #C9CED3;   /* stainless text on dark */
  --v6-steel-5:    #8C939A;
  --v6-steel-7:    #4F565C;   /* stainless text on light */
  --v6-brushed:    linear-gradient(100deg, #A9AFB5 0%, #E6E9EB 22%, #B9BEC3 40%, #EEF0F1 58%, #A3AAB0 80%, #D6DADD 100%);
  --v6-bronze:     #C8973F;   /* the warm highlight on dark */
  --v6-bronze-ink: #7A561B;   /* the same on light, 5.3:1 or better */

  /* type, space, shape, motion */
  --v6-font-head: "Oswald", "Arial Narrow", sans-serif;
  --v6-font-body: "Work Sans", system-ui, sans-serif;
  --v6-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --v6-step--1: clamp(.82rem, .80rem + .1vw, .88rem);
  --v6-step-0:  clamp(1rem, .97rem + .15vw, 1.08rem);
  --v6-step-1:  clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
  --v6-step-2:  clamp(1.5rem, 1.3rem + .9vw, 2.05rem);
  --v6-step-3:  clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --v6-step-4:  clamp(2.4rem, 1.7rem + 3.2vw, 4.4rem);
  --v6-radius-s: 6px;
  --v6-radius:   10px;
  --v6-radius-l: 16px;
  --v6-ease: cubic-bezier(.2, .7, .2, 1);
  --v6-dur: 180ms;
  --v6-target: 44px;          /* smallest tap target */
}

/* ---------------------------------------------------------------- 2. themes: re-point the V5 tokens */
:root:not([data-theme="light"]), :root[data-theme="dark"] {
  --bg: var(--v6-black);        --bg-alt: var(--v6-black-2);
  --surface: var(--v6-charcoal); --surface-2: var(--v6-charcoal-2);
  --ink: #F1EEE8; --ink-2: #C4C2BC; --ink-3: #97958F;
  --rule: #3A3C40; --rule-2: #2C2E31;
  --accent: var(--v6-bronze); --accent-ink: #E3B563; --accent-wash: #2A2318;
  --inverse-bg: var(--v6-stone-9); --inverse-ink: #F1EEE8; --inverse-ink-2: #C4C2BC; --inverse-rule: #3D3933;
  --v6-steel: var(--v6-steel-3);
  --v6-band: var(--v6-stone-9);
  --v6-on-steel: var(--v6-black);
}
:root[data-theme="light"] {
  --bg: var(--v6-stone-1);  --bg-alt: var(--v6-stone-2);
  --surface: #FFFFFF;       --surface-2: #EFECE6;
  --ink: #141414; --ink-2: #33322F; --ink-3: #625F59;
  --rule: var(--v6-stone-3); --rule-2: #DEDAD3;
  --accent: var(--v6-bronze-ink); --accent-ink: var(--v6-bronze-ink); --accent-wash: #F0E9DD;
  --inverse-bg: var(--v6-black); --inverse-ink: #F1EEE8; --inverse-ink-2: #C4C2BC; --inverse-rule: #3A3C40;
  --v6-steel: var(--v6-steel-7);
  --v6-band: var(--v6-stone-2);
  --v6-on-steel: var(--v6-black);
}

/* ---------------------------------------------------------------- 3. components (new modules use these) */
.v6-eyebrow { font: 500 var(--v6-step--1)/1.3 var(--v6-font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--v6-steel); display: inline-flex; gap: 10px; align-items: center; }
.v6-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--v6-brushed); }
.v6-h1 { font: 600 var(--v6-step-4)/1.04 var(--v6-font-head); letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
.v6-h2 { font: 600 var(--v6-step-3)/1.08 var(--v6-font-head); text-transform: uppercase; margin: 0; }
.v6-h3 { font: 500 var(--v6-step-1)/1.2 var(--v6-font-head); margin: 0; }
.v6-lead { font: 400 var(--v6-step-1)/1.5 var(--v6-font-body); color: var(--ink-2); max-width: 60ch; }

/* buttons: equal blocks in a group, words inside (owner's phone rule) */
.v6-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--v6-target);
  padding: 0 22px; border-radius: var(--v6-radius); font: 600 var(--v6-step-0)/1 var(--v6-font-body); text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: transform var(--v6-dur) var(--v6-ease), box-shadow var(--v6-dur) var(--v6-ease); }
.v6-btn--steel { background: var(--v6-brushed); color: var(--v6-on-steel); border-color: #9AA1A7; }
.v6-btn--steel:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -10px rgba(0,0,0,.6); }
.v6-btn--line { background: transparent; color: var(--ink); border-color: var(--rule); }
.v6-btn--line:hover { border-color: var(--v6-steel); }
.v6-btn--bronze { background: var(--v6-bronze); color: var(--v6-black); }
.v6-btn:focus-visible, .v6-chip:focus-visible, .v6-field input:focus-visible, .v6-field select:focus-visible {
  outline: 2px solid var(--v6-steel); outline-offset: 2px; }
.v6-btn { text-align: center; line-height: 1.15; }
.v6-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
@media (max-width: 480px) { .v6-btn { padding-inline: 12px; } }

.v6-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-2); font: 500 var(--v6-step--1)/1 var(--v6-font-body); background: transparent; }
.v6-chip[aria-pressed="true"] { border-color: var(--v6-steel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--v6-steel); }

/* product card: picture first, the picture fills its box */
.v6-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule-2);
  border-radius: var(--v6-radius-l); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--v6-dur) var(--v6-ease), border-color var(--v6-dur) var(--v6-ease); }
.v6-card:hover { transform: translateY(-2px); border-color: var(--v6-steel); }
.v6-card__img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; background: var(--surface-2); }
.v6-card__body { padding: 16px 18px 18px; display: grid; gap: 6px; }
.v6-card__meta { font: 500 var(--v6-step--1)/1.3 var(--v6-font-mono); color: var(--ink-3); }

/* figures: number big, label below, both centred at the bottom of the tile (owner's phone rule) */
/* 2 per row, then all in one row: never a lone tile on its own row (owner's rule) - use 2, 4 or 6 tiles */
.v6-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-2);
  border: 1px solid var(--rule-2); border-radius: var(--v6-radius-l); overflow: hidden; }
@media (min-width: 760px) { .v6-stats { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; } }
.v6-stat { background: var(--surface); padding: 22px 16px; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; text-align: center; min-height: 120px; }
.v6-stat b { font: 600 var(--v6-step-3)/1 var(--v6-font-head); }
.v6-stat span { font: 400 var(--v6-step--1)/1.35 var(--v6-font-body); color: var(--ink-3); margin-top: 6px; }

/* spec table: mono figures, no prices (V6 rule: no public price tables) */
.v6-spec { width: 100%; border-collapse: collapse; font: 400 var(--v6-step-0)/1.4 var(--v6-font-body); }
.v6-spec th, .v6-spec td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.v6-spec th { width: 38%; color: var(--ink-3); font-weight: 500; }
.v6-spec td { font-family: var(--v6-font-mono); font-size: var(--v6-step--1); overflow-wrap: anywhere; }
@media (max-width: 480px) { .v6-spec th { width: 34%; padding-inline: 6px; } .v6-spec td { padding-inline: 6px; } }

/* form fields (RFQ, samples) */
.v6-field { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.v6-field input, .v6-field select, .v6-field textarea { width: 100%; min-width: 0; }
.v6-field label { font: 500 var(--v6-step--1)/1.3 var(--v6-font-body); color: var(--ink-2); }
.v6-field input, .v6-field select, .v6-field textarea { min-height: var(--v6-target); padding: 10px 12px; border-radius: var(--v6-radius-s);
  border: 1px solid var(--rule); background: var(--bg); color: var(--ink); font: 400 var(--v6-step-0)/1.4 var(--v6-font-body); }
.v6-field small { color: var(--ink-3); }

/* status badges (enquiry, PI, sample, inspection) */
.v6-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font: 600 var(--v6-step--1)/1.2 var(--v6-font-mono); letter-spacing: .03em; border: 1px solid currentColor; }
.v6-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v6-badge--new { color: var(--v6-steel); }
.v6-badge--ok { color: var(--c-ok); }
.v6-badge--wait { color: var(--accent); }

.v6-band { background: var(--v6-band); border-block: 1px solid var(--rule-2); }

@media (prefers-reduced-motion: reduce) {
  .v6-btn, .v6-card { transition: none; }
  .v6-btn--steel:hover, .v6-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- 4. Stage 3 templates (PROPOSED, 5 Nov 2026) */
/* Button shape: APPROVED by the owner on 5 Nov 2026 (Phase 2 gate: "Approve, soft buttons"): the V6 soft rectangle,
   var(--v6-radius). 999px would be the pill (V3/V5 today). V5 buttons (.btn) and .v6-btn follow it together. Chips and
   badges stay round. */
:root { --v6-btn-radius: var(--v6-radius); }
.btn, .btn--block, .v6-btn { border-radius: var(--v6-btn-radius); }

/* product page: "On this page" jump links, sticky under the header; scrolls sideways inside itself on a phone */
.v6-onpage { position: sticky; top: var(--header-h, 64px); z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); border-block: 1px solid var(--rule-2); margin-top: var(--s-6, 32px); }
.v6-onpage__in { display: flex; gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: none; min-height: 48px;
  /* a soft fade at the right edge says "more this way" when the links run past the screen; the end padding lets the
     last link scroll clear of it */
  padding-right: 56px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.v6-onpage__in::-webkit-scrollbar { display: none; }
.v6-onpage__label { flex: none; font: 500 var(--v6-step--1)/1 var(--v6-font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--rule-2); }
.v6-onpage a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--ink-2);
  text-decoration: none; font: 500 var(--v6-step--1)/1 var(--v6-font-body); border-bottom: 2px solid transparent; }
.v6-onpage a:hover, .v6-onpage a:focus-visible { color: var(--ink); border-bottom-color: var(--v6-steel); }
@media (max-width: 480px) { .v6-onpage__label { display: none; } }
.pdp ~ * [id], .block[id] { scroll-margin-top: calc(var(--header-h, 64px) + 60px); }

/* range pages: the figure tiles keep figures and labels at the bottom centre (owner's phone rule), and a label of one
   line no longer drops its figure below the others (Profiles: "8 metals" sat 18 px lower than "19" and "18") */
/* Each tile spans two rows of the bar's grid (figure, label) and shares them with the tiles beside it (subgrid), so
   figures line up across a row whatever the labels' length, and the pair sits at the bottom of the tile. */
.statbar__grid { grid-auto-rows: auto; }
.statbar__grid .stat { grid-row: span 2; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr);
  row-gap: 6px; justify-content: stretch; justify-items: center; text-align: center; }
.statbar__grid .stat__n { align-self: end; }
.statbar__grid .stat__l { align-self: start; }

/* product cards in range and index grids: one setting for the picture shape. V5 uses 3 / 4 (tall); V6 proposes 4 / 5,
   so a range shows more products per screen while the photograph still fills the card */
:root { --v6-card-ratio: 4 / 5; }
.product-grid .card__media { aspect-ratio: var(--v6-card-ratio); }

/* specification tables on product, metal and finish pages: figures in mono, like .v6-spec */
.spectable td { font-family: var(--v6-font-mono); font-size: var(--v6-step--1); overflow-wrap: anywhere; }
.spectable th { color: var(--ink-3); font-weight: 500; }

/* ---------------------------------------------------------------- 5. Stage 6 features (PROPOSED, 5 Nov 2026) */
/* F8 application discovery and F3 metal-and-finish library: rows of choices. Each choice is a 44 px tap target with
   its words inside (owner's phone rule); the number after it is how many products it opens. Colours follow the band
   the section sits on (inherit), so the same rows read on the plain ground and on a dark band in both themes. */
.v6-find { display: grid; gap: 0; border-top: 1px solid var(--rule-2); }
.v6-find__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 20px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--rule-2); }
@media (max-width: 640px) { .v6-find__row { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.v6-find__label { font: 500 var(--v6-step--1)/1.3 var(--v6-font-mono); letter-spacing: .08em; text-transform: uppercase;
  padding-top: 13px; opacity: .85; }
@media (max-width: 640px) { .v6-find__label { padding-top: 0; } }
.v6-find__opts, .v6-fm__finishes { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.v6-find__opt { display: inline-flex; align-items: center; gap: 8px; min-height: var(--v6-target); max-width: 100%;
  padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule); color: inherit; text-decoration: none;
  font: 500 var(--v6-step--1)/1.2 var(--v6-font-body); background: transparent;
  transition: border-color var(--v6-dur) var(--v6-ease), box-shadow var(--v6-dur) var(--v6-ease); }
.v6-find__opt:hover, .v6-find__opt:focus-visible { border-color: var(--v6-steel); box-shadow: inset 0 0 0 1px var(--v6-steel); }
.v6-find__opt:focus-visible { outline: 2px solid var(--v6-steel); outline-offset: 2px; }
.v6-find__opt small { font: 500 .8em/1 var(--v6-font-mono); opacity: .8; }
.v6-find__ctas { margin-top: var(--s-6); }

/* F3: one row per metal: its name, the finishes it is offered in, what it is not offered in, a sample request */
.v6-fm { display: grid; border-top: 1px solid var(--rule-2); }
.v6-fm__row { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 10px 24px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--rule-2); }
.v6-fm__metal { display: grid; gap: 2px; min-width: 0; }
.v6-fm__name { display: inline-flex; align-items: center; min-height: var(--v6-target); color: inherit; text-decoration: none;
  font: 600 var(--v6-step-1)/1.1 var(--v6-font-head); text-transform: uppercase; }
.v6-fm__name:hover, .v6-fm__name:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.v6-fm__label { font: 400 var(--v6-step--1)/1.35 var(--v6-font-body); opacity: .85; }
.v6-fm__sw { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 1px solid rgba(128, 128, 128, .45); }
.v6-fm__not, .v6-fm__none { flex-basis: 100%; margin: 4px 0 0; font: 400 var(--v6-step--1)/1.4 var(--v6-font-body); opacity: .85; }
.v6-fm__sample { align-self: center; min-height: var(--v6-target); display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 900px) {
  .v6-fm__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .v6-fm__sample { justify-self: start; white-space: normal; }
}

/* F9 knowledge centre: each topic card lists its pages, one 44 px row each, with the kind (Guide, Page, Tool, Q&A) */
.v6-kt { display: flex; flex-direction: column; }
.v6-kt__links { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--rule-2); }
.v6-kt__links a { display: flex; gap: 12px; align-items: center; min-height: var(--v6-target); padding: 8px 0; color: inherit;
  text-decoration: none; border-bottom: 1px solid var(--rule-2); font: 500 var(--v6-step--1)/1.35 var(--v6-font-body); }
.v6-kt__links a:hover span:last-child, .v6-kt__links a:focus-visible span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.v6-kt__kind { flex: none; width: 44px; font: 500 .7rem/1.3 var(--v6-font-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .v6-find__opt { transition: none; } }

/* ---------------------------------------------------------------- 6. contrast fixes found by the V5 checks on V6 */
/* unit converter's swap button (5 Nov 2026 light-theme check: 2.94:1): on the light theme the accent is the dark
   bronze, so the arrow turns white (6.4:1); the dark theme keeps the near-black arrow on the light bronze */
:root[data-theme="light"] .uc__swapbtn { color: #FFFFFF; }

/* ---------------------------------------------------------------- 7. shell polish (Phase 2, 5 Nov 2026, PROPOSED) */
/* search panel: the hint line is a <p>, so it took site.css's 68ch reading width and its divider stopped at about
   444 px of the 760 px panel (the same on V5) */
.srch__hint { max-width: none; }
/* footer: the column headings (h2.h4) had no space under them, so "Products" sat on its first link while the links
   below keep an 8 px rhythm */
.footer__col > h2 { margin: 0 0 var(--s-4); }
/* forms: an invalid field showed only a 1 px colour change, faint on the dark theme; a second 1 px ring (no layout
   shift) makes it visible, and the message under the field still says what is wrong (not colour alone) */
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { box-shadow: 0 0 0 1px var(--err); }
/* phone drawer: the new Search row (Header.tsx) uses the menu-row look; its magnifier sits where the other rows'
   chevrons sit, in the same accent colour */
.mnav__search svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
/* search results: each row is one link, so the browser underlined both the title and the grey kind line (two gold
   rules per row, heavy on a phone). The row's hover / focus background already marks it; the title alone underlines */
.srch__item { text-decoration: none; }
.srch__item:hover .srch__t, .srch__item:focus-visible .srch__t { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- 8. catalogue discovery (Phase 3, 5 Nov 2026, PROPOSED) */
/* each product card on /products carries two small actions under it: Compare (up to three) and Add to enquiry (the
   visitor's own selection = the enquiry basket); they sit side by side and wrap on a narrow card */
.card-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.card-acts .cmp-btn[data-basket-add][aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
/* "My selection only" (toolbar) waits hidden until the basket holds something; .cat__quick's inline-flex would
   otherwise beat the hidden attribute */
.cat__quick[hidden] { display: none; }
/* P3-4: a card the filters take out gets the hidden attribute, but v3.css gives `.product-grid > li` display: grid,
   which beats it, so the count said "2 of 85" while all 85 cards stayed on screen (V3 code, also on V5) */
.product-grid > li[hidden] { display: none; }
/* ---------------------------------------------------------------- 9. feasibility checker (Phase 6 F6, 6 Nov 2026) */
/* "Can your part be made?" on /sections: four fields in a 2 x 2 grid (one column on a phone), the work as tick
   boxes, then one line per process; the text inputs take the select's look so the row reads as one form */
/* sized by the card's own width (auto-fit gave 3 + 1, a lone field, in the 1440 layout: full check 6 Nov) */
.jw .feas { container-type: inline-size; }
.feas__grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: end; }
@container (min-width: 460px) { .feas__grid { grid-template-columns: 1fr 1fr; } }
.jw .feas .lab__field input:not([type]), .jw .feas .lab__field input[inputmode] { min-height: 44px; width: 100%; min-width: 0; padding: 8px 10px; background: var(--card); color: var(--fg); border: 1px solid var(--line-2); border-radius: var(--jw-radius); font: 500 .95rem/1.2 var(--f-body, inherit); }
.feas__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.feas__want { display: flex; flex-wrap: wrap; gap: 8px 18px; border: 0; padding: 0; margin: 0; }
.feas__want legend { margin-bottom: 6px; }
.feas__want label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.feas__want input { width: 18px; height: 18px; accent-color: var(--jw-accent); }
.feas__out { display: grid; gap: 10px; }
.feas__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feas__list li { padding: 10px 12px; border-left: 3px solid var(--line-2); background: color-mix(in srgb, var(--fg) 4%, transparent); }
.feas__list li.uc__ok { border-left-color: var(--jw-accent); }
.feas__list li.uc__warn { border-left-color: #c2410c; }
.feas__note { font-size: .9rem; color: var(--fg-2); margin: 0; }

/* V-grooving vs normal bending on every range page (6 Nov 2026): text and table beside the three real step photos */
.vgr__grid { display: grid; gap: var(--s-7, 40px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .vgr__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.vgr__where { font-size: 1.05rem; line-height: 1.6; margin: 0 0 var(--s-5, 20px); }
.vgr__table thead th { font-family: var(--v6-font-mono, inherit); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--rule-2); }
.vgr__table thead th:last-child { color: var(--accent-ink, #b08d57); }
.vgr__table th[scope="row"] { width: 22%; padding-right: 12px; }
.vgr__table td { padding-right: 12px; font-family: inherit; }
.vgr__table td:last-child { color: var(--ink); }
.table-scroll table.vgr__table { min-width: 560px; }
.vgr__normal { margin: var(--s-5, 20px) 0 0; color: var(--ink-2); }
.vgr__normal .label { display: block; margin-bottom: 4px; }
.vgr__links { margin-top: var(--s-5, 20px); align-items: center; }
.vgr__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4, 16px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vgr__steps .shot img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; height: auto; }
.vgr__steps figcaption { font-size: .85rem; line-height: 1.45; }
.vgr__steps figcaption .label { display: block; color: var(--accent-ink, #b08d57); }
@media (max-width: 640px) {
  .vgr__steps { grid-template-columns: minmax(0, 1fr); }
  .vgr__steps .shot img { aspect-ratio: 4 / 3; }
  .table-scroll table.vgr__table { min-width: 0; }
  .vgr__table thead { display: none; }
  .vgr__table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
  .vgr__table th[scope="row"], .vgr__table td { display: block; width: auto; padding: 0; border: 0; }
  .vgr__table td:nth-of-type(1)::before { content: "Normal bending: "; color: var(--ink-3); }
  .vgr__table td:nth-of-type(2)::before { content: "V-grooved: "; color: var(--accent-ink, #b08d57); }
}

/* Menu pictures (6 Nov 2026): one real photograph above each menu column, small and wide, so the lists stay short */
.mega__pic { display: block; overflow: hidden; border-radius: var(--radius); margin-bottom: var(--s-4, 16px); background: var(--bg-2, #1b1d20); }
.mega__col > .mega__pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s var(--ease, ease); }
.mega__pic:hover img { transform: scale(1.04); }
.mega__feature > .mega__pic { margin-bottom: 0; }
.mega__feature > .mega__pic img { aspect-ratio: 16 / 10; }
@media (prefers-reduced-motion: reduce) { .mega__pic:hover img { transform: none; } }

/* metal page: its own swatch plate beside the "Specifying" table (6 Nov 2026) */
.metal-spec { display: grid; gap: var(--s-6, 32px); align-items: start; }
@media (min-width: 900px) { .metal-spec { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.metal-spec__plate { margin: 0; }
.metal-spec__plate img { display: block; width: 100%; height: auto; border-radius: 2px; border: 1px solid var(--rule); }
.metal-spec__plate figcaption { margin-top: 10px; font: 400 var(--v6-step--1)/1.45 var(--v6-font-body); color: var(--ink-3); }

/* Vibration and Hammered finishes (8 Nov 2026): their swatch chips (the matrix on /finishes, the finish lists) */
.sw-vibration { background: repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.22) 0 1px, rgba(0,0,0,.06) 1px 3px), linear-gradient(150deg, #d2d4d6, #9fa3a7 55%, #c8cbce); }
.sw-hammered { background: radial-gradient(circle at 25% 30%, #f4f5f6 0 14%, transparent 15%), radial-gradient(circle at 70% 35%, #eef0f1 0 13%, transparent 14%), radial-gradient(circle at 45% 75%, #f1f2f3 0 14%, transparent 15%), linear-gradient(160deg, #8d9196, #c3c6c9 50%, #6f7378); }

/* Gallery as its own menu item (8 Nov 2026): seven items between 1100 and 1279 px need a little less space each */
@media (min-width: 1100px) and (max-width: 1279px) { .header .nav__link { padding-inline: 5px; letter-spacing: .04em; } .header .header__actions { gap: 2px; } }