/* STR storefront — liquid glass. Brand blue from strtool.ru (#4043a4 / #2e3192 / #3b5bd6).
   Dark theme = that blue as the page. Light theme = strtool.ru paper + blue accents.
   Type: IBM Plex Sans + IBM Plex Mono (Cyrillic, technical, display=swap). */
:root {
  --str-blue: #4043a4;
  --str-blue-deep: #2e3192;
  --str-blue-ink: #1c1d68;
  --str-blue-bright: #3b5bd6;
  --str-blue-mist: #cfe1ff;
  --page-gutter: clamp(16px, 1.8vw, 40px);
  --max: calc(100% - 2 * var(--page-gutter));
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --display: "IBM Plex Sans", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-full: 999px;
  --motion-fast: 160ms;
  --easing-standard: cubic-bezier(0.32, 0.72, 0.21, 1);
  --ok: #2bb673;
  --danger: #d93b3b;
  --glass-blur: 28px;
  --glass-saturate: 1.55;
}

html, html[data-theme="dark"] {
  color-scheme: dark;
  --navy: #12143a;
  --navy-2: var(--str-blue-deep);
  --gold: var(--str-blue-mist);
  --gold-ink: var(--str-blue-mist);
  --gold-2: var(--str-blue-bright);
  --paper: #08091a;
  --card: rgba(22, 24, 58, 0.55);
  --ink: #f4f6ff;
  --muted: #b8bddc;
  --line: rgba(207, 225, 255, 0.16);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --color-bg: #08091a;
  --color-bg-soft: #10122e;
  --color-surface: rgba(18, 20, 48, 0.62);
  --color-surface-strong: #16183c;
  --color-text: #f4f6ff;
  --color-text-muted: #b8bddc;
  --color-text-faint: #8b91b8;
  --color-accent: #cfe1ff;
  --color-accent-soft: rgba(207, 225, 255, 0.12);
  --color-accent-strong: #ffffff;
  --color-on-accent: #0c0d22;
  --color-accent-2: #cfe1ff;
  --color-accent-2-soft: rgba(59, 91, 214, 0.22);
  --color-border: rgba(207, 225, 255, 0.14);
  --color-border-strong: rgba(207, 225, 255, 0.26);
  --color-focus-ring: rgba(207, 225, 255, 0.65);
  --shadow-card: 0 22px 56px rgba(0, 0, 0, 0.45);
  --shadow-section:
    0 14px 32px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.06);
  --glass-bg: rgba(16, 18, 48, 0.42);
  --glass-bg-elevated: rgba(22, 24, 62, 0.52);
  --glass-border: rgba(207, 225, 255, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.12);
  --glass-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
  --chip-border: 1px solid var(--glass-border);
  --chip-bg: color-mix(in srgb, var(--glass-bg-elevated) 28%, transparent);
  --chip-shadow: 0 1px 2px color-mix(in srgb, #000 28%, transparent);
  --chip-shadow-hover: 0 8px 22px color-mix(in srgb, #000 32%, transparent);
  --ui-radius-field: 8px;
  --ui-radius-panel: 12px;
  --ui-motion: 220ms;
  --field-bg: color-mix(in srgb, var(--color-surface-strong) 72%, transparent);
  --field-border: color-mix(in srgb, var(--glass-border) 90%, transparent);
  --field-shadow-in: inset 0 1px 2px color-mix(in srgb, #000 6%, transparent);
  --field-focus-ring: 0 0 0 3px color-mix(in srgb, var(--str-blue-bright) 16%, transparent);
  --field-focus-shadow: 0 8px 20px color-mix(in srgb, var(--str-blue) 10%, transparent);
  --panel-shadow:
    var(--shadow-card),
    inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
  --panel-shadow-soft:
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent),
    0 10px 28px color-mix(in srgb, #000 8%, transparent);
  --bg-page-image:
    radial-gradient(ellipse 80% 50% at 8% 0%, rgba(46, 49, 146, 0.28), transparent 55%),
    radial-gradient(ellipse 55% 40% at 92% 6%, rgba(64, 67, 164, 0.16), transparent 50%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(30, 32, 90, 0.35), transparent 55%),
    linear-gradient(165deg, #060714 0%, #0b0d22 40%, #10132e 72%, #14163a 100%);
  --hatch:
    repeating-linear-gradient(
      -32deg,
      transparent 0 11px,
      rgba(207, 225, 255, 0.035) 11px 12px
    );
  --hatch-tools: url("bg-stencils.png");
  --sku-sticky: #12143a;
  --media-fill: #10122e;
}

html[data-theme="light"] {
  color-scheme: light;
  --navy: var(--str-blue);
  --navy-2: var(--str-blue-deep);
  --gold: var(--str-blue);
  --gold-ink: var(--str-blue-deep);
  --gold-2: var(--str-blue-bright);
  --paper: #f2f2f2;
  --card: rgba(255, 255, 255, 0.78);
  --ink: #222328;
  --muted: #4a5568;
  --line: rgba(64, 67, 164, 0.16);
  --shadow: 0 18px 44px rgba(46, 49, 146, 0.12);
  --color-bg: #f2f2f2;
  --color-bg-soft: #f8f9fa;
  --color-surface: rgba(255, 255, 255, 0.78);
  --color-surface-strong: #ffffff;
  --color-text: #222328;
  --color-text-muted: #4a5568;
  --color-text-faint: #5b6573;
  --color-accent: var(--str-blue);
  --color-accent-soft: rgba(64, 67, 164, 0.12);
  --color-accent-strong: var(--str-blue-deep);
  --color-on-accent: #ffffff;
  --color-accent-2: var(--str-blue-bright);
  --color-accent-2-soft: rgba(59, 91, 214, 0.12);
  --color-border: rgba(64, 67, 164, 0.14);
  --color-border-strong: rgba(46, 49, 146, 0.28);
  --color-focus-ring: rgba(64, 67, 164, 0.55);
  --shadow-card: 0 18px 44px rgba(46, 49, 146, 0.12);
  --shadow-section:
    0 12px 28px rgba(46, 49, 146, 0.12),
    0 2px 8px rgba(28, 29, 104, 0.05);
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-elevated: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(64, 67, 164, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.95);
  --glass-blur: 24px;
  --glass-saturate: 1.35;
  --glass-shadow:
    0 4px 24px rgba(46, 49, 146, 0.10),
    0 1px 4px rgba(46, 49, 146, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(64, 67, 164, 0.06);
  --chip-border: 1px solid var(--glass-border);
  --chip-bg: color-mix(in srgb, var(--color-surface-strong) 55%, transparent);
  --chip-shadow: 0 1px 2px color-mix(in srgb, var(--str-blue) 10%, transparent);
  --chip-shadow-hover: 0 8px 20px color-mix(in srgb, var(--str-blue) 12%, transparent);
  --ui-radius-field: 8px;
  --ui-radius-panel: 12px;
  --ui-motion: 220ms;
  --field-bg: color-mix(in srgb, var(--color-surface-strong) 88%, #fff 12%);
  --field-border: color-mix(in srgb, var(--glass-border) 95%, transparent);
  --field-shadow-in: inset 0 1px 2px color-mix(in srgb, var(--str-blue) 5%, transparent);
  --field-focus-ring: 0 0 0 3px color-mix(in srgb, var(--str-blue-bright) 14%, transparent);
  --field-focus-shadow: 0 8px 22px color-mix(in srgb, var(--str-blue) 11%, transparent);
  --panel-shadow:
    var(--shadow-card),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --panel-shadow-soft:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 10px 28px color-mix(in srgb, var(--str-blue) 8%, transparent);
  --bg-page-image:
    radial-gradient(ellipse 85% 55% at 12% 6%, rgba(59, 91, 214, 0.12), transparent 52%),
    radial-gradient(ellipse 65% 45% at 90% 10%, rgba(64, 67, 164, 0.10), transparent 50%),
    radial-gradient(ellipse 50% 40% at 55% 92%, rgba(207, 225, 255, 0.55), transparent 55%),
    linear-gradient(160deg, #f5f6fb 0%, #eef0f8 45%, #e6e9f5 100%);
  --hatch:
    repeating-linear-gradient(
      -32deg,
      transparent 0 11px,
      rgba(64, 67, 164, 0.045) 11px 12px
    );
  --hatch-tools: url("bg-stencils.png");
  --sku-sticky: #ffffff;
  --media-fill: #e8eaf8;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .strip__item { animation: none; }
  .strip__item.is-here, .strip__item:hover { transform: none; }
  .strip__frame img { transform: none !important; }
  .mega-pane.is-on, .dir-panel.is-on, .mega-nav.is-open .mega-dir { animation: none !important; }
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
html { overflow-x: clip; max-width: 100%; }
body { max-width: 100%; }
.mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: none;
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  backdrop-filter: blur(28px) saturate(1.15);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
}
html.mega-open .mega-scrim { display: block; }
@media (prefers-reduced-transparency: reduce) {
  .mega-scrim {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  }
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--bg-page-image);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--hatch-tools);
  background-repeat: repeat;
  background-size: 980px auto;
  background-position: 8% -4%;
  pointer-events: none;
  opacity: 0.20;
  mix-blend-mode: multiply;
}
html[data-theme="dark"] body::after {
  opacity: 0.22;
  mix-blend-mode: screen;
  filter: invert(1) hue-rotate(200deg) saturate(0.35) brightness(1.15);
}

a { color: var(--color-accent-2); text-decoration: none; transition: color var(--motion-fast) var(--easing-standard); }
a:hover, a:focus-visible { color: color-mix(in srgb, var(--color-accent-2) 75%, white); }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.018em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 16px color-mix(in srgb, var(--color-text) 12%, transparent);
}
img { max-width: 100%; }
.wrap {
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin-inline: var(--page-gutter);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
[role="button"]:focus-visible, [role="tab"]:focus-visible, [role="link"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
table.data thead th:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--color-surface-strong); color: var(--gold);
  padding: 8px 12px; border-radius: var(--radius-sm); z-index: 50;
}
.skip:focus { left: 8px; }

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow), var(--shadow-card);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--glass-highlight) 60%, transparent), transparent);
  opacity: 0.45;
}

.topbar {
  position: relative;
  z-index: 21;
  background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
  border-bottom: 1px solid var(--glass-border);
  color: var(--color-text-muted);
  font-size: 13px;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}
.topbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; flex-wrap: wrap; }
.topbar a { color: var(--gold); }

header.site {
  background: transparent;
  border-bottom: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  position: sticky; top: 0; z-index: 22;
  overflow: visible;
}
.fxbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 7px var(--page-gutter);
  background: color-mix(in srgb, var(--color-surface-strong) 88%, transparent);
  border-bottom: 1px solid var(--glass-border);
  color: var(--color-text);
  font-size: 13px;
  letter-spacing: 0.01em;
}
.fxbar[hidden] { display: none; }
.fxbar time { font-variant-numeric: tabular-nums; font-weight: 600; }
.fxbar__date { color: var(--color-text-muted); }
.fxbar__rates { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.fxbar__rates b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fxbar__k { color: var(--color-text-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 4px; }
header.site::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  pointer-events: none;
}
header.site .wrap { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.logo {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-text);
  font-size: 20px;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.logo span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
nav.main { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; font-size: 14px; font-weight: 600; }
nav.main a {
  color: var(--color-text);
  padding: 7px 11px;
  border-radius: var(--ui-radius-field);
  position: relative;
  white-space: nowrap;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: color var(--motion-fast), background var(--motion-fast);
}
nav.main a:hover { color: var(--gold); background: var(--color-accent-soft); }
nav.main a.is-here {
  color: var(--gold);
  background: transparent;
  box-shadow: none;
}
nav.main a.is-here::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 3px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}

.search { margin-left: 0; display: flex; gap: 8px; flex: 0 0 auto; max-width: 420px; position: relative; }
.search__field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.search__lens {
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface-strong) 62%, transparent);
  color: var(--color-text);
  box-shadow: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.search__lens:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--glass-border)); }
.search--header {
  position: relative;
  z-index: 24;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  max-width: none;
  margin-left: 0;
  gap: 0;
}
.search--header .search__field {
  position: absolute;
  right: 0;
  top: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  justify-content: flex-end;
  transition: width .32s var(--easing-standard);
}
.search--header .search__lens {
  position: static;
  transform: none;
  order: 3;
  flex: 0 0 38px;
}
.search--header input {
  order: 1;
  width: 0;
  min-width: 0;
  flex: 1 1 auto;
  padding: 8px 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
}
.search--header:hover .search__field,
.search--header:focus-within .search__field,
.search--header.is-open .search__field {
  width: min(380px, calc(100vw - 96px));
  height: 38px;
}
.search--header:hover input,
.search--header:focus-within input,
.search--header.is-open input {
  width: auto;
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--color-surface-strong) 88%, transparent);
  box-shadow: none;
}
.search__clear {
  position: absolute;
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;
}
.search--header:hover .search__clear:not([hidden]),
.search--header:focus-within .search__clear:not([hidden]),
.search--header.is-open .search__clear:not([hidden]) {
  display: grid;
  place-items: center;
}
.search__clear:hover { color: var(--color-text); }
.search__kbd {
  display: none;
  position: static;
  order: 2;
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-muted);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-surface-strong) 78%, transparent);
  box-shadow: 0 1px 0 var(--glass-border);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .search--header {
    flex-basis: 68px;
    width: 68px;
  }
  .search--header .search__field {
    width: 68px;
  }
  .search--header .search__kbd {
    display: inline-flex;
  }
  .search--header:hover .search__kbd,
  .search--header:focus-within .search__kbd,
  .search--header.is-open .search__kbd {
    display: none;
  }
}
.search--page .search__field {
  width: 100%;
  gap: 8px;
}
.search--page input[type="search"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding-right: 12px;
}
.search--page .search__lens {
  position: static;
  transform: none;
}
.search-kbd-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.search-kbd-help kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  padding: 3px 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-surface-strong) 78%, transparent);
  box-shadow: 0 1px 0 var(--glass-border);
}
.search__suggest-more a {
  margin-top: 4px;
  border-top: 1px solid var(--glass-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  color: var(--color-text-muted);
}
.search__suggest {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 40;
  margin: 0; padding: 6px;
  list-style: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-elevated);
  box-shadow: var(--shadow-card);
  max-height: min(360px, 70vh);
  overflow: auto;
}
.search__suggest a {
  display: grid;
  grid-template-columns: minmax(5.5em, 7.5em) 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
}
.search__suggest [role="option"].is-on a,
.search__suggest a:hover { background: var(--color-accent-soft); }
.search__suggest .hit__sku { font-family: var(--mono); font-weight: 700; color: var(--gold); font-size: 12px; }
.search__suggest .hit__title { font-size: 13px; min-width: 0; }
.search--page { max-width: none; margin: 0 0 18px; width: 100%; }
.search--page .search__field { width: 100%; }
.search.search--header input[type="search"] {
  width: 0;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}
.search.search--header:hover input[type="search"],
.search.search--header:focus-within input[type="search"],
.search.search--header.is-open input[type="search"] {
  width: auto;
  max-width: none;
  opacity: 1;
  padding: 8px 28px 8px 12px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--color-surface-strong) 88%, transparent);
  box-shadow: none;
}
.search.search--page input[type="search"] {
  width: auto;
  flex: 1 1 auto;
  max-width: none;
  padding-right: 12px;
}
.search input[type="search"],
form.lead input:not([type=checkbox]):not([type=hidden]),
form.lead textarea,
form.lead select,
.cab-fields input,
.cab-fields textarea,
.cab-fields select,
.order-message textarea,
.table-mod__find input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--field-border);
  border-radius: var(--ui-radius-field);
  padding: 9px 11px;
  font: inherit;
  color: var(--color-text);
  background: var(--field-bg);
  box-shadow: var(--field-shadow-in);
  transition:
    border-color var(--ui-motion) var(--easing-standard),
    box-shadow var(--ui-motion) var(--easing-standard),
    background var(--ui-motion) var(--easing-standard);
}
.search input[type="search"]::placeholder,
form.lead input::placeholder,
form.lead textarea::placeholder,
.cab-fields input::placeholder,
.cab-fields textarea::placeholder,
.order-message textarea::placeholder { color: var(--color-text-faint); }
.search input[type="search"]:hover,
form.lead input:not([type=checkbox]):not([type=hidden]):hover,
form.lead textarea:hover,
form.lead select:hover,
.cab-fields input:hover,
.cab-fields textarea:hover,
.cab-fields select:hover,
.order-message textarea:hover,
.table-mod__find input:hover {
  border-color: color-mix(in srgb, var(--str-blue-bright) 28%, var(--glass-border));
}
.search input[type="search"]:focus,
form.lead input:not([type=checkbox]):not([type=hidden]):focus,
form.lead textarea:focus,
form.lead select:focus,
.cab-fields input:focus,
.cab-fields textarea:focus,
.cab-fields select:focus,
.order-message textarea:focus,
.table-mod__find input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--str-blue-bright) 55%, var(--glass-border));
  background: color-mix(in srgb, var(--color-surface-strong) 88%, #fff 8%);
  box-shadow: var(--field-shadow-in), var(--field-focus-ring);
}
.search input[type="search"]::placeholder { color: var(--color-text-faint); }

.search .search__go, .btn {
  border: 0;
  border-radius: var(--ui-radius-field);
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: var(--color-surface-strong);
  color: var(--color-text);
  transition:
    transform var(--ui-motion) var(--easing-standard),
    box-shadow var(--ui-motion) var(--easing-standard),
    background var(--ui-motion) var(--easing-standard),
    border-color var(--ui-motion) var(--easing-standard),
    color var(--motion-fast);
}
.search .search__go, .btn.gold {
  background: var(--str-blue);
  color: #fff;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--str-blue) 26%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}
.search .search__go:hover, .btn.gold:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px color-mix(in srgb, var(--str-blue) 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
}
.search .search__go:active, .btn.gold:active { transform: translateY(0); }
.search button.search__lens {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  padding: 0;
  background: color-mix(in srgb, var(--color-surface-strong) 62%, transparent);
  color: var(--color-text);
  font-weight: 500;
  box-shadow: none;
}
.search button.search__lens:hover {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--glass-border));
  box-shadow: none;
}
.btn.gold:focus-visible { outline-color: var(--str-blue-bright); }
.btn.ghost {
  background: color-mix(in srgb, var(--color-surface-strong) 55%, transparent);
  color: var(--color-text);
  border: 1px solid var(--field-border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}
.btn.ghost:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--str-blue-bright) 35%, var(--glass-border));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--str-blue) 10%, transparent);
}
.btn.wide { width: 100%; }

.hero { padding: 28px 0 8px; }
.hero .wrap { padding: 0; }
.hero__panel,
.hero .hero__inner {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.hero__panel::before,
.hero .hero__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--glass-highlight) 55%, transparent), transparent);
  opacity: 0.5;
}
.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.18;
  color: var(--color-text);
  max-width: none;
  text-wrap: balance;
}
.hero p { max-width: none; color: var(--color-text-muted); }
.hero__stage { display: grid; gap: 8px; margin: 0 0 16px; min-height: 7.5rem; }
.hero__name {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--color-text);
  text-wrap: balance;
}
.hero__name::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 2px;
  margin-top: 10px;
  background: var(--gold);
  border-radius: 2px;
}
.hero__fact {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.65;
  color: var(--color-text);
  max-width: none;
  text-align: start;
  text-wrap: pretty;
  hyphens: none;
  -webkit-hyphens: none;
}
.hero__num,
.hero__term {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.hero__num {
  font-family: var(--mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  padding: 0 0.22em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-accent-2) 18%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--gold) 65%, transparent);
}
.hero__term {
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
.hero__more {
  justify-self: start;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero__catalog {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-align: start;
  text-wrap: pretty;
  hyphens: none;
  -webkit-hyphens: none;
}
.hero__stage.is-in .hero__name,
.hero__stage.is-in .hero__fact {
  animation: heroRise 0.42s var(--easing-standard);
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__stage.is-in .hero__name,
  .hero__stage.is-in .hero__fact { animation: none; }
}
.hero .btn.ghost { color: var(--gold); }

.grid { display: grid; gap: 10px; }
.grid > * { min-width: 0; }
.cards-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
  gap: clamp(10px, 1vw, 16px);
}
.cards-3 > * { max-width: none; width: 100%; min-height: 0; height: auto; }

.card {
  background: color-mix(in srgb, var(--glass-bg) 72%, var(--color-surface));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--panel-shadow);
  color: inherit;
  text-decoration: none;
  display: block;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  transition:
    border-color var(--ui-motion) var(--easing-standard),
    background var(--ui-motion) var(--easing-standard),
    box-shadow var(--ui-motion) var(--easing-standard),
    transform var(--ui-motion) var(--easing-standard);
}
.card h2, .card h3 { margin: 0 0 6px; }
.card:hover {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--glass-border));
  background: color-mix(in srgb, var(--glass-bg-elevated) 80%, var(--color-surface));
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
  transform: translateY(-1px);
}
form.card:hover,
.order-form.card:hover,
.order-aside.card:hover,
.order-context.card:hover,
.cab-card:hover {
  transform: none;
}

.muted { color: var(--color-text-muted); }
.section { padding: 12px 0 18px; }
.section > .wrap {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-section);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  padding: clamp(12px, 1.2vw, 22px) clamp(14px, 1.6vw, 28px) clamp(20px, 2.1vw, 36px);
  position: relative;
}
.section:has(.sheet-stack) { padding: 8px 0 16px; }
.section:has(.sheet-stack) > .wrap {
  padding: 14px 18px 16px;
}
.section > .wrap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 28%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--glass-highlight) 40%, transparent), transparent);
  opacity: 0.4;
}

.crumbs { margin: 8px 0 6px; }
.path-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.path-strip ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.path-strip li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.path-strip li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1.5px solid color-mix(in srgb, var(--color-text-faint) 70%, transparent);
  border-right: 1.5px solid color-mix(in srgb, var(--color-text-faint) 70%, transparent);
  transform: rotate(45deg);
  opacity: 0.7;
  flex: 0 0 auto;
}
.path-chip {
  display: inline-flex;
  align-items: center;
  max-width: 18rem;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-muted);
  text-decoration: none;
  background: color-mix(in srgb, var(--color-surface-strong) 48%, transparent);
  border: 1px solid var(--glass-border);
  box-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.path-chip:hover {
  color: var(--color-text);
  background: var(--color-accent-soft);
  border-color: color-mix(in srgb, var(--gold) 28%, var(--glass-border));
}
.path-chip.is-here {
  color: var(--color-text);
  background: var(--color-accent-soft);
  border-color: color-mix(in srgb, var(--gold) 22%, var(--glass-border));
  cursor: default;
}
.site-map { display: grid; gap: 0; }
.site-map__h {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 3px;
}
.site-map__block {
  display: grid;
  grid-template-columns: 6.8rem minmax(0, 1fr);
  gap: 6px 14px;
  align-items: start;
  padding: 8px 0;
}
.site-map__block + .site-map__block {
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--glass-border));
}
.site-map__strip,
.site-map__codes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.site-map__strip .path-chip,
.site-map__codes .path-chip {
  display: inline-flex;
  justify-content: center;
  width: auto;
  max-width: none;
  min-height: 0;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.path-chip--code {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  border-style: dashed;
  background:
    var(--hatch),
    color-mix(in srgb, var(--color-surface-strong) 55%, transparent);
}
@media (max-width: 720px) {
  .site-map__block { grid-template-columns: 1fr; gap: 4px; padding: 7px 0; }
}

table.data {
  width: 100%;
  border-collapse: collapse;
  background: color-mix(in srgb, var(--glass-bg-elevated) 55%, transparent);
  font-size: 13px;
}
table.data th, table.data td {
  border: 1px solid var(--glass-border);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}
table.data th {
  background: var(--sku-sticky);
  color: var(--color-text-muted);
  font-weight: 700;
}
table.data thead tr:last-child th {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: 0 1px 0 var(--glass-border);
}
.th-hint-pop {
  position: fixed;
  z-index: 130;
  pointer-events: none;
  box-sizing: border-box;
  max-width: 36ch;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-surface-strong) 94%, #fff);
  border: 1px solid color-mix(in srgb, var(--gold) 18%, var(--glass-border));
  box-shadow:
    0 1px 0 var(--glass-highlight),
    0 8px 18px color-mix(in srgb, #000 28%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.th-hint-pop.is-on {
  opacity: 1;
  transform: none;
}
.th-hint-pop--wrap {
  white-space: pre-line;
  max-width: 42ch;
  overflow: visible;
  text-overflow: unset;
}
@media (prefers-reduced-motion: reduce) {
  .th-hint-pop { transition: none; }
}
th.col-sku, td.col-sku {
  position: sticky; left: 0; z-index: 2;
  background: var(--sku-sticky);
  font-weight: 600;
  min-width: 5.5em;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
thead th.col-sku { z-index: 4; }
th.col-sku.is-end, td.col-sku.is-end { left: auto; right: 0; }
td.col-num, th.col-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
table.data tr:hover td { background: var(--color-accent-soft); }
table.data a.sku { font-weight: 600; color: var(--gold); font-family: var(--mono); }

.sku-grid {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 12px;
  align-items: start;
}
.sku-grid::after { content: none; display: none; }
.sku-media {
  float: none;
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.sku-media.media-carousel {
  width: 100%;
  max-width: none;
}
.sku-media.media-carousel > figure.media,
.sku-media.media-carousel .media__frame,
.sku-media.media-carousel img {
  max-width: 100%;
  width: 100%;
}
.sku-copy {
  display: contents;
  position: static;
  z-index: auto;
  min-width: 0;
  width: auto;
  max-width: none;
}
.sku-copy > .sku-aside {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}
.sku-copy > h1,
.sku-copy > .lede,
.sku-copy > .sku-lineage,
.sku-copy > .sku-offer:not(.sku-offer--foot) {
  grid-column: 2;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin-top: 0;
}
.sku-copy > h1 { grid-row: 1; align-self: start; }
.sku-copy > .sku-offer--foot,
.sku-copy > section,
.sku-copy > .block,
.sku-copy > p:not(.lede):not(.sku-lineage) {
  grid-column: 1 / -1;
}
.sku-copy > * + * { margin-top: 14px; }
.sku-copy h1 { margin: 0; letter-spacing: -0.02em; font-size: clamp(1.35rem, 2vw, 1.85rem); }
.sku-copy > p { margin: 0; }
.sku-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin: 22px 0 6px;
  padding: 20px 22px 18px;
  border-radius: 18px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--gold) 16%, transparent), color-mix(in srgb, var(--gold) 4%, transparent) 55%);
  border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--glass-border));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--gold) 10%, transparent);
}
.sku-offer--foot {
  margin: 28px 0 8px;
  padding: 16px 20px;
  background: transparent;
  box-shadow: none;
  border-style: dashed;
}
.sku-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin: 0;
  line-height: 1;
}
.sku-price__main {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}
.sku-price__from {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.sku-price__num {
  font-size: clamp(36px, 4.8vw, 56px);
  font-weight: 650;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 0.92;
}
.sku-offer--foot .sku-price__num {
  font-size: clamp(28px, 3.2vw, 40px);
}
.sku-price__vat {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: 0.01em;
  opacity: 0.78;
}
.sku-price__ask {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sku-aside .sku-offer {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 14px 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.sku-aside .sku-offer .sku-price__num {
  font-size: clamp(28px, 2.8vw, 44px);
}
.sku-aside .sku-offer .cta-row {
  flex-wrap: wrap;
  max-width: 100%;
}
.sku-aside .lede,
.sku-aside .sku-lineage {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  text-align: start;
  text-wrap: pretty;
}
.sku-aside h1 { margin: 0; }
.sku-copy > *,
.sku-copy .block-desc,
.sku-copy .block,
.sku-copy .sku-spec,
.sku-copy .sku-ai,
.sku-copy .copy-pack,
.sku-copy .table-mod,
.sku-copy .table-scroll {
  min-width: 0;
  width: 100%;
  max-width: none;
}
.sku-copy .tech-dl:not(.tech-dl--axes) {
  width: 100%;
  max-width: 100%;
}
.sku-media .media--sku .media__frame,
.sku-media .media--sketch .media__frame {
  aspect-ratio: auto;
  width: fit-content;
  max-width: 300px;
  max-height: 210px;
}
.sku-media .sku-factory { margin: 0; max-width: 300px; }
.sku-media.media-carousel .sku-factory,
.sku-media.media-carousel .sku-factory .media__frame { max-width: none; }
a.sku-order { margin-left: 0.55rem; white-space: nowrap; font-size: 0.82rem; }
.sku-media .sku-factory img { width: 100%; height: auto; object-fit: contain; background: #fff; }
.sku-media .sku-factory figcaption { font-size: 12px; }
.sku-media .media--sku img,
.sku-media .media--sketch img {
  width: auto !important;
  height: auto !important;
  max-width: 300px !important;
  max-height: 210px !important;
  object-fit: contain;
}
.media--sketch { position: relative; }
.media--sketch .media__frame {
  background:
    radial-gradient(120% 80% at 50% 0%, #fffdf8 0%, #f3efe6 72%, #e7e1d4 100%);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--glass-border));
  box-shadow:
    inset 0 0 0 10px #f7f4ec,
    0 18px 40px color-mix(in srgb, #000 22%, transparent);
}
.media--sketch img {
  background: #f7f4ec;
  padding: 6px;
  box-sizing: border-box;
}
.media--sketch[data-zoom-sketch] { cursor: zoom-in; }
.media--sketch[data-zoom-sketch]:hover .media__frame {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--glass-border));
}
.sku-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 44px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #3a3428;
  background: color-mix(in srgb, #fff 82%, #e8d7a0);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 999px;
  padding: 4px 9px;
  pointer-events: none;
}
.dim-legend { margin: 0; display: grid; gap: 8px; }
.dim-legend:not(:has(dt)) { display: none; }
.dim-legend h2 {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin: 0; font-weight: 700;
}
.dim-legend .muted { margin: 0; font-size: 12px; }
.tech-dl--axes { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.tech-dl--axes div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.tech-dl--axes dt {
  display: grid;
  place-items: center;
  min-width: 2.4em;
  height: 1.7em;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.tech-dl--axes dd { margin: 0; font-size: 13px; }
dialog.sketch-zoom:not([open]) {
  display: none !important;
}
dialog.sketch-zoom {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f4f1ea;
  overflow: hidden;
}
dialog.sketch-zoom::backdrop {
  background: rgba(8, 10, 16, 0.62);
}
dialog.sketch-zoom img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(
    var(--zoom-max-w, calc(100vw - 64px)),
    calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
  );
  max-height: min(
    var(--zoom-max-h, calc(100dvh - 80px)),
    calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
  );
  object-fit: contain;
  object-position: center center;
  background: #0c0e14;
  border-radius: 12px;
}
dialog.sketch-zoom form {
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  z-index: 2;
  margin: 0;
}
dialog.sketch-zoom button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, #333);
  background: color-mix(in srgb, #fff 88%, var(--gold));
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.sketch {
  min-height: 280px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--str-blue) 18%, transparent), var(--media-fill));
  display: grid; place-items: center; text-align: center; padding: 24px; color: var(--color-text-muted);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip {
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none;
  color: var(--color-text);
  font-family: var(--mono);
}
.callout {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: start;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px dashed;
  background: color-mix(in srgb, var(--color-surface-strong) 55%, transparent);
}
.callout__mark { display: grid; place-items: center; padding-top: 1px; color: var(--gold); }
.callout__mark svg { display: block; width: 20px; height: 20px; }
.callout__body { min-width: 0; display: grid; gap: 4px; }
.callout__kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.callout__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
}
.callout__list {
  margin: 0;
  padding: 0 0 0 1.15em;
  display: grid;
  gap: 4px;
}
.callout__list li { margin: 0; font-size: 13px; line-height: 1.4; }
.callout-stack, .table-pack, .pack, .copy-pack, .sheet-stack {
  display: grid;
  gap: 10px;
  align-items: start;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.sheet-stack { gap: 14px; }
.pack--tables { gap: 14px; }
.pack--cards { gap: 10px; }
.pack--cards h2 {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin: 0; font-weight: 700;
}
.sheet-head { display: grid; gap: 12px; }
.sheet-head h1, .sheet-head .lede, .sheet-head .muted, .sheet-head .kicker { margin: 0; }
.callout--warning {
  background: color-mix(in srgb, #f5c518 28%, var(--color-surface));
  border-color: #d4a017;
  color: var(--color-text);
}
.callout--warning .callout__kicker { color: #8a6a00; }
.callout--caution {
  background: color-mix(in srgb, #f0a202 24%, var(--color-surface));
  border-color: #c67a00;
}
.callout--caution .callout__kicker { color: #8a4b00; }
.callout--important {
  background: color-mix(in srgb, #e8c35a 22%, var(--color-surface));
  border-color: color-mix(in srgb, var(--gold) 65%, #8a6a00);
}
.callout--important .callout__kicker { color: var(--gold); }
.callout--notice {
  background: color-mix(in srgb, #7eb6ff 18%, var(--color-surface));
  border-color: #4a8ad4;
}
.callout--notice .callout__kicker { color: #7eb6ff; }
.callout--note {
  background: color-mix(in srgb, var(--gold) 8%, var(--color-surface));
  border-color: color-mix(in srgb, var(--gold) 40%, var(--glass-border));
}
.callout--note .callout__kicker { color: var(--gold); }
.callout--tip {
  background: color-mix(in srgb, #8fd18a 16%, var(--color-surface));
  border-color: #4a9a4a;
}
.callout--legend {
  background: color-mix(in srgb, var(--color-accent-2) 14%, var(--color-surface));
  border-color: var(--color-accent-2);
}
.callout--footnote {
  background: color-mix(in srgb, var(--chip-bg) 80%, transparent);
  border-color: var(--color-text-faint);
  border-style: dotted;
}
.notes {
  background: color-mix(in srgb, var(--color-accent-soft) 55%, var(--chip-bg));
  border: 1px dashed var(--glass-border);
  border-left: 3px solid var(--gold);
  padding: 12px 14px;
  border-radius: 8px;
  margin: 10px 0;
  box-shadow: none;
}
.notes.is-imp { border-left-color: var(--danger); background: rgba(255, 107, 107, 0.12); }
.notes.is-legend { border-left-color: var(--color-accent-2); background: var(--color-accent-2-soft); }
.notes.is-foot { background: var(--chip-bg); border-left-color: var(--color-text-faint); }
.block { margin: 0; display: grid; gap: 12px; }
.block h2 {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin: 20px 0 10px; font-weight: 700;
  font-family: var(--sans);
  text-shadow: none;
}
.block-desc {
  max-width: none;
  width: 100%;
  min-width: 0;
  margin: 0 0 8px;
  padding: 18px 22px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--chip-bg) 88%, transparent);
}
.block > h2:first-child,
.block-desc > h2:first-child,
.text-group:first-child > h2,
.block-desc > .text-group:first-of-type > h2 {
  margin-top: 0;
}
.text-group > h2 { margin-bottom: 12px; }
.text-group + .text-group {
  margin-top: 26px;
}
.block-desc > .lede { margin: 0 0 10px; }
.block-desc .lede,
.block-desc .copy-pack,
.block-desc .table-scroll,
.sku-copy .lede,
.sku-copy .copy-pack {
  min-width: 0;
  width: 100%;
  max-width: none;
}
.block-desc .table-scroll > table.data:not(.std-table) {
  width: max-content;
  min-width: 0;
}
.block-desc > h2 {
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  font-weight: 700;
}
.block-desc .copy-pack p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  text-align: start;
  text-wrap: pretty;
  hyphens: none;
  -webkit-hyphens: none;
}
.block-desc .copy-pack p + p { margin-top: 12px; }
.block-desc .copy-pack p.std-cite {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.block-desc .copy-pack p.std-cite:first-child:not(.std-cite--ref) {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
}
.block-desc,
.block-desc .copy-pack,
.text-group {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.block-desc .copy-pack p.std-cite + p.std-cite {
  margin-top: 10px;
}
.block-desc .copy-pack p.std-cite--ref,
p.std-cite.std-cite--ref {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}
.block-desc .copy-pack p.std-cite--ref a {
  color: var(--color-text-faint);
  text-underline-offset: 2px;
}
.block-desc .copy-pack p.std-cite--ref a:hover {
  color: var(--color-text-muted);
}
.sku-copy > p.sku-lead,
.block-desc .copy-pack p.sku-lead {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}
.block-tech.block,
section.block-tech {
  margin: 0 0 16px;
}
.sku-ai.block {
  margin: 0 0 16px;
}
.sku-ai.block > .std-cite--ref {
  margin: 10px 0 0;
}
.dim-legend .legend-hint {
  margin: 0;
  font-size: 12px;
}
.block-desc .copy-pack a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.block-desc .copy-pack a:hover { color: var(--color-text); }

/* Линия между текстом и таблицей: плотная в середине, сходит на нет к краям. */
.block-desc .table-scroll,
section.block-tech,
section.sku-spec,
section.sku-ai,
.table-mod,
.fam-spec {
  margin-top: 18px;
}
.block-desc .table-scroll::before,
section.block-tech::before,
section.sku-spec::before,
section.sku-ai::before,
.table-mod::before,
.fam-spec::before {
  content: "";
  display: block;
  grid-column: 1 / -1;
  height: 1px;
  margin: 0 0 14px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--gold) 65%, var(--glass-border)) 14%,
    color-mix(in srgb, var(--gold) 65%, var(--glass-border)) 86%,
    transparent 100%
  );
}
.table-mod .table-scroll::before,
.fam-spec .table-scroll::before {
  content: none;
  margin: 0;
}
/* Tile grid — dim-legend axes, short codes only */
.tech-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 0; }
.tech-dl div {
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--color-surface-strong) 40%, transparent);
  box-shadow: none;
}
.tech-dl dt { font-size: 11px; font-weight: 800; color: var(--color-text-faint); text-transform: uppercase; }
.tech-dl dd { margin: 4px 0 0; font-weight: 600; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Spec pairs: label stays next to the value. Wide screens use two pair-columns. */
.tech-dl:not(.tech-dl--axes) {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100%;
  gap: 0 28px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--glass-bg-elevated) 55%, transparent);
}
.tech-dl:not(.tech-dl--axes) div {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content);
  justify-content: start;
  align-items: center;
  column-gap: 16px;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.tech-dl:not(.tech-dl--axes) div:last-child { border-bottom: none; }
.tech-dl:not(.tech-dl--axes) dt,
.tech-dl:not(.tech-dl--axes) dd {
  margin: 0;
  padding: 7px 12px;
  border: none;
  line-height: 1.35;
}
.tech-dl:not(.tech-dl--axes) dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
  background: transparent;
  max-width: 36ch;
}
.tech-dl:not(.tech-dl--axes) dd {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.tech-dl:not(.tech-dl--axes) div:hover {
  background: var(--color-accent-soft);
}
@media (min-width: 960px) {
  .tech-dl:not(.tech-dl--axes):has(> div:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
  }
  .tech-dl:not(.tech-dl--axes):has(> div:nth-child(2)) div:nth-child(odd) {
    border-right: 1px solid var(--glass-border);
  }
}
@media (max-width: 520px) {
  .tech-dl:not(.tech-dl--axes) div {
    grid-template-columns: 1fr;
  }
  .tech-dl:not(.tech-dl--axes) dt {
    padding-bottom: 2px;
  }
  .tech-dl:not(.tech-dl--axes) dd {
    padding-top: 0;
  }
}

@media (min-width: 960px) {
  table.data.std-table:not([data-grid]):not(:has(tr > :nth-child(3))) {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  table.data.std-table:not([data-grid]):not(:has(tr > :nth-child(3))) thead { display: none; }
  table.data.std-table:not([data-grid]):not(:has(tr > :nth-child(3))) tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
    width: 100%;
  }
  table.data.std-table:not([data-grid]):not(:has(tr > :nth-child(3))) tr {
    display: grid;
    grid-template-columns: max-content minmax(0, max-content);
    justify-content: start;
    column-gap: 16px;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
  }
  table.data.std-table:not([data-grid]):not(:has(tr > :nth-child(3))) td,
  table.data.std-table:not([data-grid]):not(:has(tr > :nth-child(3))) th {
    border: none;
    width: auto;
  }
}

/* Inserts 2025: callout without mark used to collapse into a 20px column. */
.callout:not(:has(.callout__mark)) {
  grid-template-columns: minmax(0, 1fr);
}
.geom-gallery,
.figure-pack,
.pack--figures .figure-pack,
.pack--figs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 168px));
  gap: 12px;
  align-items: start;
}
.geom-gallery .geom-card,
.geom-gallery .media,
.figure-pack .media,
.pack--figs .media {
  margin: 0;
  min-width: 0;
  max-width: 168px;
}
.geom-gallery .media__frame,
.figure-pack .media__frame,
.pack--figures .media__frame,
.pack--figs .media__frame {
  aspect-ratio: 1 / 1;
  max-height: 168px;
  background: #ecebe6;
}
.geom-gallery img,
.figure-pack img,
.pack--figures img,
.pack--figs img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 168px;
  object-fit: contain;
  background: #f3f1ec;
}
.geom-gallery figcaption,
.figure-pack figcaption,
.pack--figures figcaption,
.pack--figs figcaption {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-faint);
  text-align: center;
  line-height: 1.3;
}
.sheet-mod .geom-gallery,
.sheet-mod .pack--figures,
.sheet-mod .pack--figs,
.sheet-mod .figure-pack {
  grid-column: 1 / -1;
}
.sheet-mod .geom-gallery .media__frame,
.sheet-mod .figure-pack .media__frame,
.sheet-mod .pack--figures .media__frame,
.sheet-mod .pack--figs .media__frame {
  aspect-ratio: 1 / 1 !important;
  max-height: 160px;
}
.sheet-mod .geom-gallery figcaption,
.sheet-mod .figure-pack figcaption,
.sheet-mod .pack--figures figcaption,
.sheet-mod .pack--figs figcaption {
  display: block;
}

/* I03/I09/I10: «Эскизы геометрий» / pack--media were unconstrained 800×500. */
.sheet-gallery {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
}
.sheet-gallery__title {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  font-weight: 700;
  font-family: var(--sans);
}
.sheet-gallery__grid,
.sheet-gallery:not(:has(> .sheet-gallery__grid)),
.block-gallery .pack--media,
.block-figs .pack--media,
.pack--media,
.fig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 168px));
  gap: 12px;
  align-items: start;
}
.sheet-gallery .media,
.sheet-gallery__grid .media,
.block-gallery .media,
.pack--media .media,
.fig-grid .media {
  margin: 0;
  min-width: 0;
  max-width: 168px;
}
.sheet-gallery .media:has(img),
.sheet-gallery__grid .media:has(img),
.geom-gallery .media:has(img),
.block-gallery .media:has(img),
.block-figs .media:has(img),
.pack--media .media:has(img),
.fig-grid .media:has(img),
.figure-pack .media:has(img),
.pack--figs .media:has(img) {
  cursor: zoom-in;
}
.sheet-gallery .media__frame,
.block-gallery .media__frame,
.pack--media .media__frame,
.fig-grid .media__frame {
  aspect-ratio: 1 / 1 !important;
  max-height: 168px;
  background: #ecebe6;
  box-shadow:
    inset 0 0 0 4px #f7f4ec,
    0 8px 18px color-mix(in srgb, #000 16%, transparent);
}
.sheet-gallery img,
.block-gallery img,
.pack--media img,
.fig-grid img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 168px;
  object-fit: contain;
  background: #f3f1ec;
}
.sheet-gallery figcaption,
.block-gallery figcaption,
.pack--media figcaption,
.fig-grid figcaption {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-faint);
  text-align: center;
  line-height: 1.3;
}
.sheet-gallery .sku-zoom-hint,
.block-gallery .sku-zoom-hint,
.pack--media .sku-zoom-hint,
.fig-grid .sku-zoom-hint,
.geom-gallery .sku-zoom-hint {
  display: none;
}

.pack--sheets {
  gap: 18px;
  padding: 12px 10px 14px;
  margin: 2px 0 0;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  box-shadow: inset 0 1px 10px color-mix(in srgb, #000 16%, transparent);
}
.pack--cards,
.pack--sheets,
.sheet-group {
  container-type: inline-size;
}
.pack--sheets > h2 {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin: 0; font-weight: 700;
  padding: 4px 0 8px;
}
.sheet-group {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
  border-radius: var(--radius-md);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-section);
}
.sheet-group + .sheet-group {
  border-top: 0;
}
.pack--cards:has(> .sheet-list),
.pack--cards:has(> .grid.cards-3) {
  gap: 12px;
}
.pack--cards .card--media,
.pack--cards > .grid.cards-3 > .card--media {
  overflow: visible;
  height: auto;
}
.pack--cards > .sheet-list,
.pack--cards > .grid.cards-3 {
  padding: 14px 16px 16px;
  border-radius: var(--radius-md);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-section);
}
.sheet-stack > .pack + .pack {
  border-top: 0;
  padding-top: 0;
  margin-top: 12px;
}
.dir-panel__head,
.dir-panel > .grid,
.dir-panel > .strip {
  box-shadow: var(--shadow-section);
}
.sheet-stack > * + * {
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--glass-border));
  padding-top: 14px;
  margin-top: 4px;
}
.sheet-group h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.sheet-group__lead {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-muted);
  max-width: none;
}
.sheet-row__lead {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chip--grade {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
}
.sheet-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  align-items: start;
}
.sheet-list > .sheet-row {
  min-width: 0;
  height: auto;
}
/* Навигация «с чего начать»: текстовые карточки, не сетка 56px|номер|текст.
   Селектор без `>` — ряды внутри .sheet-card-with-chips тоже не падают в колонку 56px. */
.sheet-list a.sheet-row,
.sheet-list .sheet-row.card--media,
.sheet-card-with-chips > a.sheet-row,
.sheet-row:not(:has(> .media)) {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 6px;
  padding: 12px 14px;
  min-height: 0;
  height: auto;
  overflow: visible;
}
.sheet-list a.sheet-row > div,
.sheet-list .sheet-row.card--media > div,
.sheet-row:not(:has(> .media)) > div {
  min-width: 0;
  width: 100%;
}
.sheet-list a.sheet-row h3,
.sheet-list .sheet-row.card--media h3,
.sheet-row:not(:has(> .media)) h3 {
  -webkit-line-clamp: unset;
  overflow: visible;
  display: block;
}
.sheet-list a.sheet-row .sheet-row__lead,
.sheet-list .sheet-row.card--media .sheet-row__lead,
.sheet-row:not(:has(> .media)) .sheet-row__lead {
  -webkit-line-clamp: unset;
  overflow: visible;
  display: block;
}
.sheet-list > .sheet-card-with-chips {
  display: grid;
  gap: 4px;
  min-width: 0;
  align-content: start;
}
.sheet-card-with-chips .card__chips {
  grid-template-columns: minmax(0, 1fr);
  padding: 0 8px 6px;
}
@container (max-width: 540px) {
  .sheet-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sheet-list { grid-template-columns: 1fr; }
  .contacts table.data th,
  .consult-aside table.data th { width: 7rem; }
}
.sheet-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 10px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  min-height: 42px;
}
.sheet-row h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sheet-row .pg { font-weight: 700; font-size: 12px; color: var(--gold); padding: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet-row ul { margin: 2px 0 0; padding-left: 16px; color: var(--color-text-muted); font-size: 12px; }
.topics { margin: 0; padding-left: 18px; color: var(--color-text-muted); }

form.lead label { display: block; font-size: 12px; font-weight: 650; margin: 0 0 4px; color: var(--color-text-muted); }
form.lead { position: relative; max-width: 42rem; }
form.lead.card,
.consult-form,
.cab-card {
  max-width: none;
  padding: 18px 20px 20px;
}
.consult-form { max-width: none; }
.consult-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 12px 24px;
  align-items: end;
  margin: 0 0 18px;
}
.consult-head h1 { margin: 0; letter-spacing: -0.02em; }
.consult-head__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-text-muted); }
.consult-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  gap: 18px;
  align-items: start;
}
.consult-form .cab-fields { margin: 0; gap: 10px 14px; }
.consult-form .cab-fields textarea { min-height: 5.75rem; resize: vertical; }
.consult-picked { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.consult-aside.card {
  padding: 16px 18px 18px;
  display: grid;
  gap: 10px;
  align-content: start;
  position: sticky;
  top: 72px;
  box-shadow: var(--panel-shadow);
}
.consult-aside h2 { margin: 0; font-size: 1.05rem; }
.consult-aside > .muted { margin: 0; font-size: 13px; line-height: 1.45; }
.consult-filters { display: grid; gap: 8px; }
.consult-filters__h {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}
.hatch-row { display: flex; flex-wrap: wrap; gap: 6px; }
.hatch-tag {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 6px 9px 7px;
  text-decoration: none;
  color: inherit;
  border: 1px dashed color-mix(in srgb, var(--str-blue) 38%, var(--glass-border));
  border-radius: 8px;
  background:
    var(--hatch),
    color-mix(in srgb, var(--color-surface-strong) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--str-blue) 8%, transparent);
}
.hatch-tag .kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--gold);
}
.hatch-tag strong {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.hatch-tag:hover {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 50%, var(--glass-border));
  background: var(--hatch), var(--color-accent-soft);
}
.hatch-tag.is-on {
  border-style: solid;
  border-color: color-mix(in srgb, var(--gold) 55%, var(--glass-border));
  background: var(--hatch), var(--color-accent-soft);
  color: var(--gold);
}
@media (max-width: 900px) {
  .consult-head, .consult-grid { grid-template-columns: 1fr; }
}

/* Order + cabinet — no glass shell on form pages */
.order-page.section > .wrap,
.cab.section > .wrap {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: clamp(12px, 1.2vw, 20px) clamp(14px, 1.6vw, 28px);
}
.order-page.section > .wrap::before,
.cab.section > .wrap::before {
  display: none;
}
.order-page .order-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: 8px 24px;
  align-items: end;
  margin: 0 0 18px;
  animation: order-rise 0.55s var(--easing-standard) both;
}
.order-page .order-head h1 { margin: 0; letter-spacing: -0.02em; }
.order-head__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 18px;
  align-items: start;
}
.order-form.card {
  max-width: none;
  margin: 0;
  padding: 18px 20px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  animation: order-rise 0.6s var(--easing-standard) 0.05s both;
}
.order-fieldset {
  margin: 0 0 14px;
  padding: 12px 14px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--ui-radius-panel);
  min-width: 0;
  background: color-mix(in srgb, var(--color-surface-strong) 65%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
}
.order-fieldset:focus-within {
  border-color: color-mix(in srgb, var(--str-blue-bright) 35%, var(--field-border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    0 0 0 2px color-mix(in srgb, var(--str-blue-bright) 12%, transparent);
}
.order-fieldset legend {
  padding: 0 4px;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
}
.order-form .cab-fields {
  gap: 8px 12px;
}
.order-form fieldset:first-of-type .cab-fields {
  grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 8.25rem);
}
.order-form fieldset:first-of-type .cab-fields label.is-wide {
  grid-column: 1;
}
.order-form fieldset:first-of-type .cab-fields label:not(.is-wide) {
  grid-column: 2;
  align-self: end;
}
html[data-theme="light"] .order-fieldset {
  background: color-mix(in srgb, var(--str-blue) 4%, #fff);
}
html[data-theme="light"] .order-form.card,
html[data-theme="light"] .order-aside.card {
  background: #fff;
}
.order-form .cab-fields label {
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text-muted);
}
/* Field chrome inherited from global .cab-fields input/textarea rules */
.order-message {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}
.order-message textarea {
  min-height: 4.25rem;
  max-height: 12rem;
  resize: vertical;
  line-height: 1.45;
}
.order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 2px;
}
.order-actions .btn {
  border-radius: var(--ui-radius-field);
  padding: 9px 16px;
  min-height: 40px;
}
.order-actions .btn.gold {
  min-width: 10.5rem;
}
.order-actions .btn.gold:hover {
  transform: translateY(-1px);
}
.order-actions .btn.ghost:hover {
  transform: none;
}
.order-context.card {
  margin: 0 0 14px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  border-radius: 12px;
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 color-mix(in srgb, var(--gold) 12%, transparent);
  animation: order-rise 0.55s var(--easing-standard) 0.02s both;
}
.order-context__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  justify-content: space-between;
}
.order-context__sku {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold);
  text-decoration: none;
  transition: color 180ms var(--easing-standard);
}
.order-context__sku:hover { color: var(--color-text); }
.order-context__title { margin: 0; font-size: 14px; line-height: 1.4; }
.order-context__meta { margin: 0; font-size: 12px; }
.order-context__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.order-context__list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.order-aside.card {
  padding: 16px 18px 18px;
  display: grid;
  gap: 10px;
  align-content: start;
  position: sticky;
  top: 72px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  animation: order-rise 0.65s var(--easing-standard) 0.12s both;
}
.order-aside h2 { margin: 0; font-size: 1.08rem; letter-spacing: -0.01em; }
.order-aside > .muted { margin: 0; font-size: 13px; line-height: 1.45; }
.order-aside.is-in {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--glass-border));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--ok) 10%, var(--color-surface)), var(--color-surface));
  box-shadow:
    var(--shadow-card),
    0 0 0 1px color-mix(in srgb, var(--ok) 22%, transparent);
}
.order-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.order-benefits li {
  margin: 0;
  padding: 7px 10px 7px 1.75rem;
  position: relative;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-text-muted);
  border-radius: var(--ui-radius-field);
  background: color-mix(in srgb, var(--color-surface-strong) 50%, transparent);
}
.order-benefits li:hover {
  background: var(--color-accent-soft);
}
.order-benefits li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--str-blue-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--str-blue-bright) 22%, transparent);
}
.order-cab-cta {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 18%, var(--glass-border));
}
.order-cab-cta .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  border-radius: var(--ui-radius-field);
}
.order-cab-cta .btn.gold {
  padding: 10px 16px;
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--str-blue) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
}
.order-cab-cta .btn.gold:hover {
  transform: translateY(-1px);
}
.order-cab-cta .btn.ghost {
  width: 100%;
}
.order-aside-flash {
  animation: order-flash 2.4s var(--easing-standard) both;
}
.order-form.is-done {
  padding: 22px 20px;
  animation: order-rise 0.45s var(--easing-standard) both;
}
.order-done { display: none; }
.order-form.is-done .order-done { display: grid; gap: 12px; }
.order-done .badge { justify-self: start; }
@keyframes order-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes order-flash {
  0%, 100% { opacity: 0; transform: translateY(-6px); }
  12%, 78% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .order-page .order-head,
  .order-form.card,
  .order-context.card,
  .order-aside.card,
  .order-form.is-done,
  .order-benefits li,
  .order-actions .btn {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
@media (max-width: 960px) {
  .order-page .order-head,
  .order-grid { grid-template-columns: 1fr; }
  .order-aside { position: static; }
}

.consent {
  display: block;
  position: relative;
  padding-left: calc(1.05rem + 10px);
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text-muted);
  cursor: pointer;
}
.consent input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  cursor: pointer;
}
.consent .consent__text {
  display: inline;
}
.consent a {
  font-size: inherit;
  font-weight: 600;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent--legal {
  font-size: 12px;
  line-height: 1.5;
}

/* Privacy policy document */
.policy-doc {
  max-width: 52rem;
  font-size: 14px;
  line-height: 1.55;
}
.policy-doc h1 { margin: 0 0 10px; font-size: 1.45rem; }
.policy-doc h2 { margin: 1.35rem 0 0.5rem; font-size: 1.05rem; }
.policy-doc h3 { margin: 0.85rem 0 0.35rem; font-size: 0.95rem; }
.policy-meta { margin: 0 0 1rem; font-size: 12px; }
.policy-box {
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--ui-radius-field);
  background: color-mix(in srgb, var(--color-surface-strong) 50%, transparent);
  margin: 0.5rem 0 1rem;
}
.policy-box p { margin: 0 0 6px; }
.policy-list { margin: 0.35rem 0 0.75rem; padding-left: 1.25rem; }
.policy-list li { margin: 0.25rem 0; }
.policy-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 12px;
}
.policy-table th,
.policy-table td {
  border: 1px solid var(--field-border);
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}
.policy-table th { background: color-mix(in srgb, var(--color-surface-strong) 60%, transparent); }
.policy-quote {
  margin: 0.5rem 0 1rem;
  padding: 10px 12px;
  border-left: 3px solid color-mix(in srgb, var(--gold) 55%, var(--glass-border));
  background: color-mix(in srgb, var(--color-surface-strong) 45%, transparent);
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .policy-table { display: block; overflow-x: auto; }
}
.hp { position: absolute; left: -9999px; }

footer.site {
  margin: 10px var(--page-gutter) 22px;
  width: auto;
  background: color-mix(in srgb, var(--glass-bg) 88%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  padding: 12px 16px 22px;
  font-size: 12px;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
footer.site > .wrap { width: 100%; margin-inline: 0; }
footer.site a { color: inherit; }
footer.site a:hover { color: var(--gold); }
footer.site .site-map {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 1.2fr);
  gap: 0;
  align-items: stretch;
}
footer.site .site-map__block {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  padding: 6px 16px 10px 0;
  border-top: 0;
}
footer.site .site-map__block + .site-map__block {
  border-top: 0;
  border-left: 1px solid color-mix(in srgb, var(--gold) 34%, var(--glass-border));
  padding-left: 16px;
  padding-right: 0;
}
footer.site .site-map__h { padding-top: 0; }
footer.site .site-map__list {
  display: grid;
  gap: 3px;
  align-content: start;
}
footer.site .site-map__list a {
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
  color: inherit;
}
footer.site .site-map__list a:hover { color: var(--gold); }
footer.site .site-map__list--aux {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--glass-border));
}
footer.site .site-map__list--wide {
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
}
.site-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--glass-border));
}
.site-meta__card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px 12px;
  border: 1px dashed color-mix(in srgb, var(--str-blue) 32%, var(--glass-border));
  border-radius: 6px;
  background:
    var(--hatch),
    color-mix(in srgb, var(--color-surface-strong) 42%, transparent);
}
.site-meta__card--fams { grid-column: 1 / -1; }
.site-map__fams {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 8px 0 0;
  align-items: start;
}
.site-map__fam-g {
  display: grid;
  gap: 3px;
  min-width: 0;
  align-content: start;
}
.site-map__fam-g > .site-map__h {
  margin: 0 0 6px;
  text-decoration: none;
}
.site-map__fam-g > a:not(.site-map__h) {
  font-size: 10px;
  line-height: 1.25;
  text-decoration: none;
  color: inherit;
}
.site-map__fam-g > a:not(.site-map__h):hover { color: var(--gold); }
.site-meta__card p { margin: 0; font-size: 11px; line-height: 1.3; }
.site-meta__card .site-map__h { margin: 0 0 1px; }
.legal {
  font-size: 10px;
  opacity: .78;
  margin: 14px 0 0;
  padding-top: 12px;
  padding-bottom: 4px;
  border-top: 1px solid var(--glass-border);
  line-height: 1.45;
}
.contacts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: 14px;
  align-items: start;
}
.contacts-grid > *,
.consult-grid > *,
.consult-head > * {
  min-width: 0;
}
.contacts-head { margin: 0 0 12px; }
.contacts-main { display: grid; gap: 16px; }
.contacts-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.contact-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0.85rem 1rem 0.95rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--ui-radius-field, 10px);
  background: color-mix(in srgb, var(--glass-bg-elevated) 55%, transparent);
}
.contact-card__h {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 650;
  opacity: 0.62;
}
.contact-hit {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--danger);
  text-decoration: none;
}
.contact-hit:hover,
.contact-hit:focus-visible {
  color: color-mix(in srgb, var(--danger) 72%, #fff);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.contact-card__addr {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.4;
  font-weight: 550;
}
.contact-card__sub {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.contact-card__sub a { color: inherit; }
.contacts table.data,
.consult-aside table.data {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.contacts table.data th,
.consult-aside table.data th {
  width: 9.5rem;
}
.contacts table.data th,
.contacts table.data td,
.consult-aside table.data th,
.consult-aside table.data td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.req-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
@media (max-width: 900px) {
  .contacts-grid { grid-template-columns: 1fr; }
  .site-meta { grid-template-columns: 1fr; }
  footer.site .site-map { grid-template-columns: 1fr; }
  footer.site .site-map__block {
    padding: 0 0 8px;
  }
  footer.site .site-map__block + .site-map__block {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--gold) 34%, var(--glass-border));
    padding-top: 8px;
  }
  .site-map__fams { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
}
.mega { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }

.badge {
  display: inline-block;
  background: rgba(88, 214, 141, 0.16);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--glass-border));
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.place {
  border: 0;
  background: transparent;
  backdrop-filter: none;
}
.place .wrap {
  padding: 8px 12px 8px;
  margin-bottom: 6px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.place .kicker { margin: 0 0 2px; }
body:has(.place .kicker) .sheet-head .kicker {
  display: none;
}
.place .strip__head { margin: 0 0 2px; }
.place .strip__name { margin: 0; font-size: 13px; }
.place .strip__row { gap: 6px; }
.place .strip__track {
  grid-template-rows: auto;
  grid-auto-columns: minmax(7.2rem, 1fr);
  gap: 6px;
  padding: 4px 2px 8px;
}
.place .strip__item {
  grid-template-rows: 44px auto;
}
.place .strip__copy { padding: 4px 6px 5px; gap: 1px; }
.place .strip__copy strong { font-size: 11px; }
.place .strip__meta { display: none; }
.place .strip__badge { font-size: 10px; }
.place .strip__arrow { width: 28px; height: 28px; }
.place .siblings {
  grid-template-rows: auto;
  grid-auto-columns: minmax(7rem, 1fr);
  padding: 0 4px 4px;
  gap: 4px 6px;
}
.kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold);
  font-family: var(--sans);
  text-shadow: none;
}
.siblings-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  position: relative;
}
.siblings-wrap::before,
.siblings-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 4px;
  width: 28px;
  pointer-events: none;
  z-index: 1;
}
.siblings-wrap::before {
  left: 36px;
  background: linear-gradient(90deg, var(--glass-bg), transparent);
}
.siblings-wrap::after {
  right: 36px;
  background: linear-gradient(270deg, var(--glass-bg), transparent);
}
.siblings-wrap.is-start::before,
.siblings-wrap.is-end::after { opacity: 0; }
.siblings {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: minmax(10rem, 1fr);
  gap: 6px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--str-blue-mist) 45%, transparent) transparent;
}
.siblings:has(> :nth-child(2):last-child) {
  grid-template-rows: auto;
}
.siblings::-webkit-scrollbar { height: 4px; }
.siblings::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--str-blue-bright) 55%, transparent);
  border-radius: 4px;
}
.siblings__arrow {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--color-surface-strong) 62%, transparent);
  color: var(--color-text);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: border-color var(--motion-fast), color var(--motion-fast), opacity var(--motion-fast);
}
.siblings__arrow:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, var(--glass-border)); transform: none; }
.siblings__arrow:disabled { opacity: .28; cursor: default; transform: none; }
.chip-nav {
  flex: unset;
  min-width: 0;
  width: auto;
  scroll-snap-align: start;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.chip-nav:hover { color: var(--gold); background: var(--color-accent-soft); transform: none; box-shadow: none; }
.chip-nav.is-here {
  border-color: transparent;
  background: var(--color-accent-soft);
  color: var(--gold);
}

.strip-stack { display: grid; gap: 16px; }
.strip { --dir: var(--gold); }
.strip--fine { --dir: #7ea0ff; }
.strip--rough { --dir: #e0a46a; }
.strip--mvs { --dir: #5ec8c8; }
.strip--special { --dir: #b48cff; }
.strip--info { --dir: #9aa3c7; }
.strip__head { margin: 0 0 6px; }
.strip__name { margin: 2px 0 0; font-size: 14px; font-weight: 700; }
.strip__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  position: relative;
}
.strip__track {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(100%, 240px), 1fr);
  gap: 10px 12px;
  overflow-x: auto;
  min-width: 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 10px 6px 18px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--dir) 45%, transparent) transparent;
}
.strip__track:has(> :nth-child(2):last-child) {
  grid-template-rows: auto;
}
.strip:not(.is-plain):not(.is-start) .strip__track {
  mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 100%);
}
.strip:not(.is-plain):not(.is-end) .strip__track {
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.strip:not(.is-plain):not(.is-start):not(.is-end) .strip__track {
  mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.strip__track::-webkit-scrollbar { height: 4px; }
.strip__track::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--dir) 55%, transparent);
  border-radius: var(--radius-pill);
}
.strip__item {
  min-width: 0;
  max-width: none;
  width: auto;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: minmax(88px, 120px) auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface-strong);
  border: 1px solid var(--glass-border);
  box-shadow: none;
  transform: translateZ(0);
  animation: stripIn .42s var(--easing-standard) both;
  transition: transform .22s var(--easing-standard), box-shadow .22s, border-color .22s;
}
.strip__item:nth-child(1) { animation-delay: .03s; }
.strip__item:nth-child(2) { animation-delay: .06s; }
.strip__item:nth-child(3) { animation-delay: .09s; }
.strip__item:nth-child(4) { animation-delay: .12s; }
.strip__item:nth-child(5) { animation-delay: .15s; }
.strip__item:nth-child(n+6) { animation-delay: .18s; }
@keyframes stripIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.strip__item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--dir) 45%, var(--glass-border));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--dir) 16%, transparent);
}
.strip__item.is-here {
  transform: none;
  border-color: var(--dir);
  box-shadow: 0 0 0 1px var(--dir);
  z-index: 1;
}
.strip__item.is-here:hover { transform: translateY(-2px); }
.strip__frame {
  display: block;
  overflow: hidden;
  background: var(--media-fill);
}
.strip__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f3f1ec;
  transition: transform 9s ease;
}
.strip__item:hover .strip__frame img,
.strip__item.is-here .strip__frame img { transform: scale(1.1); }
.strip__copy {
  display: grid;
  gap: 2px;
  padding: 6px 8px 8px;
  border-top: 2px solid var(--dir);
}
.strip__copy strong {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 650;
}
.strip__meta {
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-muted);
}
.strip__badge {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--dir);
  font-family: var(--mono);
}
.strip__arrow {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--color-surface-strong) 62%, transparent);
  color: var(--color-text);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: border-color var(--motion-fast), color var(--motion-fast), opacity var(--motion-fast);
}
.strip__arrow:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, var(--glass-border)); transform: none; }
.strip__arrow:disabled { opacity: .28; cursor: default; transform: none; }
.strip.is-start .strip__arrow[data-strip-dir="-1"],
.strip.is-end .strip__arrow[data-strip-dir="1"] { opacity: .28; }
.strip.is-plain .strip__arrow { display: none; }
.strip.is-plain .strip__row { grid-template-columns: 1fr; }

.fam-jump { position: relative; }
.nav-drop { position: relative; }
nav.main .nav-drop { display: flex; align-items: center; }
.nav-drop__btn {
  cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 7px 11px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: none;
  transition: color var(--motion-fast), background var(--motion-fast);
}
.nav-drop__btn:hover { color: var(--gold); background: var(--color-accent-soft); }
.nav-drop__btn i {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .28s var(--easing-standard);
}
.nav-drop.is-open .nav-drop__btn,
.nav-drop__btn.is-here {
  color: var(--gold);
  background: var(--color-accent-soft);
}
.nav-drop.is-open .nav-drop__btn i { transform: rotate(225deg) translateY(-1px); }
.nav-drop__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 36;
  min-width: 17.5rem;
  max-width: min(22rem, calc(100vw - 2 * var(--page-gutter)));
  padding: 8px;
  display: grid;
  gap: 2px;
  background: color-mix(in srgb, var(--color-surface-strong) 88%, var(--glass-bg-elevated));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-highlight);
}
.nav-drop--end .nav-drop__panel { left: auto; right: 0; }
.nav-drop__panel[hidden] { display: none; }
.nav-drop__panel a {
  white-space: normal;
  line-height: 1.3;
  padding: 8px 10px;
}
nav.main .mega-nav { position: relative; display: flex; align-items: center; }
.mega-nav__btn {
  cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 7px 11px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: none;
  transition: color var(--motion-fast), background var(--motion-fast);
}
.mega-nav__btn:hover { color: var(--gold); background: var(--color-accent-soft); }
.mega-nav__btn i {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .28s var(--easing-standard);
}
.mega-nav.is-open .mega-nav__btn,
.mega-nav__btn.is-here {
  color: var(--gold);
  background: var(--color-accent-soft);
  box-shadow: none;
}
.mega-nav.is-open .mega-nav__btn i { transform: rotate(225deg) translateY(-1px); }
.mega-nav__panel {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 40;
  width: min(90rem, calc(100vw - 2 * var(--page-gutter)));
  max-width: calc(100vw - 2 * var(--page-gutter));
  background: color-mix(in srgb, var(--color-surface-strong) 78%, var(--glass-bg-elevated));
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--glass-highlight);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity .28s var(--easing-standard),
    transform .32s var(--easing-standard),
    visibility .32s;
}
html[data-theme="light"] .mega-nav__panel {
  background: rgba(255, 255, 255, 0.94);
}
html:not([data-theme="light"]) .mega-nav__panel {
  background: rgba(16, 18, 48, 0.90);
}
.mega-nav__panel::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--hatch);
  opacity: .22;
  pointer-events: none;
}
.mega-nav.is-open .mega-nav__panel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}
.mega-nav__panel[hidden] { display: none; }
.mega-nav__head,
.mega-nav__body { position: relative; z-index: 1; }
.mega-nav__head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--glass-border);
}
.mega-nav__kicker {
  margin: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold);
}
.mega-nav__title { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.mega-nav__hint {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.mega-nav__all {
  font-size: 13px; font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.mega-nav__body {
  display: grid;
  grid-template-columns: minmax(200px, 0.95fr) minmax(210px, 1fr) minmax(220px, 1.15fr);
  min-height: 300px;
  max-height: min(70vh, 720px);
}
.mega-nav__col {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--str-blue-mist) 50%, transparent) transparent;
  mask-image: linear-gradient(#000, #000);
}
.mega-nav__col::-webkit-scrollbar { width: 6px; }
.mega-nav__col::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--str-blue-bright) 50%, transparent);
  border-radius: var(--radius-pill);
}
.mega-nav__col--dir,
.mega-nav__col--fam {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px 12px;
  border-right: 1px solid var(--glass-border);
  background: transparent;
}
.mega-nav__col--sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px 12px;
}
.mega-dir--fine, .dir-band--fine, .dir-tab--fine, .dir-panel--fine, .card--tone-fine, .dir-jump--fine { --dir: #7ea0ff; }
.mega-dir--rough, .dir-band--rough, .dir-tab--rough, .dir-panel--rough, .card--tone-rough, .dir-jump--rough { --dir: #e0a46a; }
.mega-dir--mvs, .dir-band--mvs, .dir-tab--mvs, .dir-panel--mvs, .card--tone-mvs, .dir-jump--mvs { --dir: #5ec8c8; }
.mega-dir--special, .dir-band--special, .dir-tab--special, .dir-panel--special, .card--tone-special, .dir-jump--special { --dir: #b48cff; }
.mega-dir--info, .dir-band--info, .dir-tab--info, .dir-panel--info, .card--tone-info, .dir-jump--info { --dir: #9aa3c7; }
.mega-dir, .mega-fam, .mega-sub {
  position: relative;
  display: grid;
  gap: 1px;
  padding: 8px 12px 8px 14px;
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  background: transparent;
  box-shadow: none;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.mega-dir strong, .mega-fam strong, .mega-sub strong {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
}
.mega-dir span, .mega-fam span, .mega-sub span, .mega-dir em, .mega-fam em {
  font-size: 11px; color: var(--color-text-muted); font-weight: 500;
}
.mega-dir em, .mega-fam em { font-style: normal; color: var(--gold); font-weight: 650; font-size: 11px; }
.mega-dir:hover, .mega-fam:hover, .mega-sub:hover {
  background: var(--color-accent-soft);
}
.mega-dir.is-on, .mega-fam.is-on, .mega-sub.is-here, .mega-fam--open {
  background: var(--color-accent-soft);
}
.mega-dir.is-on::before,
.mega-fam.is-on::before,
.mega-sub.is-here::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: var(--dir, var(--gold));
}
.mega-sub--all { margin-bottom: 2px; font-weight: 650; }
.mega-fam--open { margin-bottom: 2px; }
.mega-fam--open strong { color: var(--gold); }
.mega-nav__col-h {
  margin: 0 4px 8px;
  padding: 6px 8px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--color-surface-strong) 88%, transparent);
}
.mega-pane[hidden] { display: none; }
.mega-pane.is-on { animation: paneIn .28s var(--easing-standard); }
.mega-nav.is-open .mega-dir {
  animation: famIn .42s var(--easing-standard) both;
}
.mega-nav.is-open .mega-dir:nth-child(1) { animation-delay: .02s; }
.mega-nav.is-open .mega-dir:nth-child(2) { animation-delay: .06s; }
.mega-nav.is-open .mega-dir:nth-child(3) { animation-delay: .10s; }
.mega-nav.is-open .mega-dir:nth-child(4) { animation-delay: .14s; }
.mega-nav.is-open .mega-dir:nth-child(5) { animation-delay: .18s; }
@keyframes famIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes paneIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

footer .mega a {
  display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text);
}
footer .mega a:hover { background: var(--color-accent-soft); }
footer .mega span { font-size: 12px; color: var(--color-text-muted); font-weight: 500; }

.sheet-mod {
  --hero-stage: 300px;
  --hero-stage-h: 200px;
  display: grid;
  grid-template-columns: minmax(220px, var(--hero-stage)) minmax(0, 1fr);
  gap: 16px 28px;
  margin: 0;
  align-items: start;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 18px 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
}
.sheet-mod > .media,
.sheet-mod > .media-pair,
.sheet-mod > .media-carousel {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  width: auto;
  max-width: var(--hero-stage);
  min-width: 0;
}
.sheet-mod > .sheet-head {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.sheet-mod > .sheet-head {
  width: 100%;
  max-width: none;
}
.sheet-mod > .std-cite,
.sheet-mod > .block,
.sheet-mod > .block-desc,
.sheet-mod > .pack,
.sheet-mod > .table-mod,
.sheet-mod > .fam-spec,
.sheet-mod > .copy-pack,
.sheet-mod > .table-pack,
.sheet-mod > .tech-dl,
.sheet-mod > h2,
.sheet-mod > p,
.sheet-mod > .geom-gallery,
.sheet-mod > .fig-grid,
.sheet-mod > .sheet-gallery,
.sheet-mod > .figure-pack {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  max-width: none;
}
.sheet-mod > *:not(.media):not(.media-pair):not(.media-carousel):not(.sheet-head) {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: none;
}
.sheet-stack > .block-desc,
.sheet-stack > .block,
.sheet-stack > .pack,
.sheet-stack > .table-mod,
.sheet-stack > .sheet-pager {
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* Два ракурса продукта — один кадр, смена по клику / точкам, не столбик. */
.media-pair,
.media-carousel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: start;
  justify-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.media-carousel,
.media-pair.media-carousel {
  position: relative;
  align-items: start;
}
.media-pair > figure.media,
.media-carousel > figure.media {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  min-width: 0;
  min-height: 0;
  height: auto;
  width: 100%;
}
.media-pair:not(.is-ready) > figure.media:not(:first-of-type),
.media-pair > figure.media:not(.is-active),
.media-carousel:not(.is-ready) > figure.media:not(:first-of-type),
.media-carousel > figure.media:not(.is-active),
[data-gap-stills] .pack--media:has(> figure.media:nth-of-type(2)):not(.is-ready) > figure.media:not(:first-of-type) {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}
.media-pair:not(.is-ready) > figure.media:first-of-type,
.media-pair > figure.media.is-active,
.media-carousel:not(.is-ready) > figure.media:first-of-type,
.media-carousel > figure.media.is-active,
[data-gap-stills] .pack--media:has(> figure.media:nth-of-type(2)):not(.is-ready) > figure.media:first-of-type {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.media-pair > figure.media,
.media-carousel > figure.media {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .media-pair > figure.media,
  .media-carousel > figure.media { transition: none; }
}
.media-carousel__nav {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 6px 0 0;
  z-index: 2;
}
.media-carousel__arrow {
  width: 36px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  line-height: 0;
  cursor: pointer;
}
.media-carousel__arrow svg {
  display: block;
  width: 30px;
  height: 26px;
}
.media-carousel__arrow:hover svg,
.media-carousel__arrow:focus-visible svg {
  filter: drop-shadow(0 0 0.5px #8a7044);
}
.media-carousel__arrow:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.media-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 38%, var(--glass-border));
  cursor: pointer;
}
.media-carousel__dot.is-on {
  background: var(--gold);
}
.media-carousel__dot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.media-pair > figure.media,
.media-carousel > figure.media {
  position: relative;
  overflow: hidden;
}
.media-pair > figure.media figcaption,
.media-carousel > figure.media figcaption {
  display: none !important;
}
.media-carousel__cap {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
  width: 100%;
  margin: 0;
  padding: 4px 8px 0;
  min-height: 1.4em;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-muted);
}
.media-carousel__nav {
  min-height: 28px;
}
.block-gallery,
[data-gap-stills] {
  --media-stage: 280px;
  --media-stage-h: 210px;
  width: 100%;
  min-width: 0;
}
.block-gallery:has(> .pack--catalog) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 20px;
  align-items: start;
  justify-items: start;
}
.block-gallery:has(> .pack--catalog) > h2 {
  grid-column: 1 / -1;
  margin: 0 0 2px;
}
@media (min-width: 720px) {
  .block-gallery:has(> .pack--catalog) {
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
  }
}
@media (max-width: 719px) {
  .block-gallery,
  [data-gap-stills] {
    --media-stage: min(280px, 100%);
    --media-stage-h: 200px;
  }
}
.block-gallery .pack--catalog {
  max-width: min(100%, var(--media-stage));
  width: max-content;
  justify-self: start;
}
.pack--media.media-carousel,
.block-gallery .pack--media.media-carousel,
.block-gallery .pack--catalog.media-carousel,
[data-gap-stills] .pack--media:has(> figure.media:nth-of-type(2)),
[data-gap-stills].block-gallery .pack--media:has(> figure.media:nth-of-type(2)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  max-width: min(100%, var(--media-stage));
  width: max-content;
  height: auto;
  gap: 0;
  align-items: start;
  justify-self: start;
}
.block-gallery:not(:has(> .pack--catalog)) .pack--media.media-carousel,
.block-gallery:not(:has(> .pack--catalog)) [data-gap-stills] .pack--media,
[data-gap-stills]:not(:has(> .pack--catalog)) .pack--media {
  max-width: min(100%, var(--media-stage));
}
[data-gap-stills] .pack--media:not(.media-carousel) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: max-content;
  max-width: min(100%, var(--media-stage));
}
[data-gap-stills] .pack--media:not(.media-carousel) > .media {
  max-width: min(100%, var(--media-stage)) !important;
  width: auto;
}
.pack--media.media-carousel > .media,
.block-gallery .pack--media.media-carousel > .media,
.block-gallery .pack--catalog.media-carousel > .media,
[data-gap-stills] .pack--media:has(> figure.media:nth-of-type(2)) > .media,
[data-gap-stills].block-gallery .pack--media:has(> figure.media:nth-of-type(2)) > .media,
[data-gap-stills] .pack--media:not(.media-carousel) > .media {
  grid-column: 1;
  grid-row: 1;
  max-width: min(100%, var(--media-stage)) !important;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
}
.pack--media.media-carousel .media__frame,
.block-gallery .pack--media.media-carousel .media__frame,
[data-gap-stills] .pack--media:has(> figure.media:nth-of-type(2)) .media__frame,
[data-gap-stills].block-gallery .pack--media:has(> figure.media:nth-of-type(2)) .media__frame,
.block-gallery .pack--catalog .media__frame,
[data-gap-stills] .pack--media:not(.media-carousel) .media__frame {
  aspect-ratio: auto !important;
  width: fit-content;
  max-width: min(100%, var(--media-stage));
  max-height: var(--media-stage-h);
  height: auto !important;
  min-height: 0 !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f3f1ec;
}
.pack--media.media-carousel img,
.block-gallery .pack--media.media-carousel img,
[data-gap-stills] .pack--media:has(> figure.media:nth-of-type(2)) img,
[data-gap-stills].block-gallery .pack--media:has(> figure.media:nth-of-type(2)) img,
.block-gallery .pack--catalog img,
[data-gap-stills] .pack--media:not(.media-carousel) img {
  position: static;
  inset: auto;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, var(--media-stage)) !important;
  max-height: var(--media-stage-h) !important;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  background: #f3f1ec;
}
.block-gallery .pack--catalog .media--sketch .media__frame {
  box-shadow:
    inset 0 0 0 4px #f7f4ec,
    0 8px 18px color-mix(in srgb, #000 16%, transparent);
}
.block-gallery .pack--catalog .media--sketch img {
  padding: 0;
  background: #f7f4ec;
}
.sku-media.media-carousel {
  grid-template-rows: auto auto auto auto;
}
.sku-media.media-carousel > figure.media {
  grid-column: 1;
  grid-row: 1;
}
.sku-media.media-carousel > .media-carousel__nav {
  grid-row: 2;
}
.sku-media.media-carousel > .media-carousel__cap {
  grid-row: 3;
}
.sku-media.media-carousel > .dim-legend {
  grid-column: 1;
  grid-row: 4;
  position: relative;
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.block-desc > * {
  min-width: 0;
  max-width: 100%;
}
.sheet-mod > .media,
.sheet-mod > .media-pair,
.sheet-mod > .media-carousel {
  width: auto;
  max-width: var(--hero-stage);
  min-width: 0;
}
.sheet-mod > .media .media__frame,
.sheet-mod > .media-pair .media__frame,
.sheet-mod > .media-carousel .media__frame {
  width: fit-content;
  max-width: var(--hero-stage);
  max-height: var(--hero-stage-h);
  min-height: 0;
  aspect-ratio: auto !important;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sheet-mod > .media img,
.sheet-mod > .media-pair img,
.sheet-mod > .media-carousel img {
  width: auto !important;
  height: auto !important;
  max-width: var(--hero-stage) !important;
  max-height: var(--hero-stage-h) !important;
  object-fit: contain;
  object-position: center;
  background: #f3f1ec;
}
.sheet-mod figcaption,
.sheet-mod .media figcaption {
  display: none !important;
}
/* Кадр раздела не растягивается на всю страницу, пока его не открыли кликом. */
.fam-spec > figure.media,
section.block > figure.media {
  max-width: min(100%, 420px);
}
.fam-spec > figure.media img,
section.block > figure.media img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 420px) !important;
  max-height: min(360px, 42vh) !important;
  object-fit: contain;
}
.sheet-mod .sku-zoom-hint { display: none; }

/* Hero + gallery left; title + descriptions one right column. */
.sheet-cluster {
  --hero-stage: 100%;
  --hero-stage-h: min(52vh, 640px);
  --media-stage: 100%;
  --media-stage-h: min(280px, 34vh);
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr);
  grid-template-areas:
    "media aside"
    "copy copy";
  gap: 16px 28px;
  align-items: start;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 18px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  min-width: 0;
}
.sheet-cluster.sheet-cluster--gallery {
  grid-template-areas:
    "hero aside"
    "gallery aside"
    "copy copy";
}
.sheet-cluster > .sheet-mod {
  display: contents;
  --hero-stage: 100%;
  --hero-stage-h: min(360px, 42vh);
  --media-stage: 100%;
  --media-stage-h: min(280px, 34vh);
}
.sheet-cluster > .sheet-mod > .media,
.sheet-cluster > .sheet-mod > .media-pair,
.sheet-cluster > .sheet-mod > .media-carousel {
  grid-area: media;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-self: stretch;
}
.sheet-cluster.sheet-cluster--gallery > .sheet-mod > .media,
.sheet-cluster.sheet-cluster--gallery > .sheet-mod > .media-pair,
.sheet-cluster.sheet-cluster--gallery > .sheet-mod > .media-carousel {
  grid-area: hero;
}
.sheet-cluster > .sheet-cluster__gallery {
  --media-stage: 100%;
  --media-stage-h: min(280px, 34vh);
  grid-area: gallery;
  display: grid;
  gap: 12px;
  min-width: 0;
  width: 100%;
}
.sheet-cluster > .sheet-cluster__aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  width: 100%;
  align-self: stretch;
}
.sheet-cluster > .sheet-cluster__aside > .sheet-head {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
}
.sheet-cluster > .sheet-cluster__copy,
.sheet-cluster > .sheet-cluster__aside > .sheet-cluster__copy {
  grid-area: copy;
  flex: 1 1 auto;
  display: block;
  min-width: 0;
  width: 100%;
}
.sheet-cluster > .sheet-mod > .media .media__frame,
.sheet-cluster > .sheet-mod > .media-pair .media__frame,
.sheet-cluster > .sheet-mod > .media-carousel .media__frame {
  width: 100%;
  max-width: none;
  max-height: var(--hero-stage-h);
  height: auto;
}
.sheet-cluster > .sheet-mod > .media img,
.sheet-cluster > .sheet-mod > .media-pair img,
.sheet-cluster > .sheet-mod > .media-carousel img {
  max-width: 100% !important;
  max-height: var(--hero-stage-h) !important;
}
.sheet-cluster .block-gallery,
.sheet-cluster [data-gap-stills],
.sheet-cluster .sheet-cluster__gallery .block-gallery {
  --media-stage: 100%;
  --media-stage-h: min(280px, 34vh);
  width: 100%;
  max-width: none;
}
.sheet-cluster .block-gallery:has(> .pack--catalog) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  justify-items: stretch;
  align-items: start;
}
.sheet-cluster .block-gallery:has(> .pack--catalog) > h2,
.sheet-cluster .block-gallery > h2 {
  grid-column: 1 / -1;
  margin: 0;
}
.sheet-cluster .block-gallery .pack--media,
.sheet-cluster .block-gallery .pack--catalog,
.sheet-cluster .pack--media.media-carousel,
.sheet-cluster .block-gallery .pack--media.media-carousel,
.sheet-cluster .block-gallery .pack--catalog.media-carousel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: none;
  justify-self: stretch;
}
.sheet-cluster .block-gallery .media,
.sheet-cluster .block-gallery .pack--media .media,
.sheet-cluster .block-gallery .pack--catalog .media {
  max-width: none;
  width: 100%;
}
.sheet-cluster .block-gallery .media__frame,
.sheet-cluster .block-gallery .pack--media .media__frame,
.sheet-cluster .block-gallery .pack--catalog .media__frame,
.sheet-cluster .block-gallery .pack--media.media-carousel .media__frame,
.sheet-cluster .pack--media.media-carousel .media__frame {
  aspect-ratio: auto !important;
  width: 100%;
  max-width: none;
  max-height: var(--media-stage-h);
  height: auto;
}
.sheet-cluster .block-gallery img,
.sheet-cluster .block-gallery .pack--media img,
.sheet-cluster .block-gallery .pack--catalog img,
.sheet-cluster .block-gallery .pack--media.media-carousel img,
.sheet-cluster .pack--media.media-carousel img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: var(--media-stage-h) !important;
  object-fit: contain;
}
.sheet-cluster .sheet-cluster__copy .block,
.sheet-cluster .sheet-cluster__copy .block-desc,
.sheet-cluster .sheet-cluster__copy .copy-pack {
  width: 100%;
  max-width: none;
}
.sheet-stack > .sheet-cluster + * {
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--glass-border));
  padding-top: 14px;
  margin-top: 8px;
}
.sheet-mod figure.media:has(img),
.sku-media > figure.media:has(img),
.media-pair > figure.media:has(img),
.media-carousel > figure.media:has(img),
.pack--catalog figure.media:has(img) {
  cursor: zoom-in;
}
.sheet-mod figure.media:has(img):hover .media__frame,
.sku-media > figure.media:has(img):hover .media__frame,
.media-carousel > figure.media.is-active:hover .media__frame {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--glass-border));
}
.sheet-head { gap: 10px; align-content: start; }
.sheet-head h1 { font-size: clamp(18px, 2.1vw, 26px); margin: 0; line-height: 1.25; text-wrap: balance; }
.sheet-head,
.sheet-head h1,
.sheet-head .lede,
.sheet-head .sheet-aside,
.sheet-cluster__aside,
.block-desc,
.block-desc .copy-pack,
.fam-spec {
  min-width: 0;
  max-width: 100%;
}
.sheet-head h1,
.sheet-head .lede,
.sheet-head .sheet-aside,
.block-desc .copy-pack p {
  overflow-wrap: break-word;
}
.sheet-head .lede {
  margin: 12px 0 0;
  font-size: 1.125rem;
  line-height: 1.55;
  letter-spacing: 0.012em;
  color: var(--color-text);
  max-width: 100%;
  text-align: start;
  text-wrap: pretty;
  hyphens: none;
  -webkit-hyphens: none;
}
.sheet-head .sheet-aside {
  margin: 10px 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 100%;
  text-align: start;
  text-wrap: pretty;
  hyphens: none;
  -webkit-hyphens: none;
}
.spec-num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--gold) 55%, transparent);
}
.lede { font-size: 0.92rem; line-height: 1.45; max-width: none; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.about-page .cta-row:last-child,
.delivery-page .cta-row:last-child,
.faq-page .cta-row:last-child {
  margin-top: 1.1rem;
}
.home-dirs-more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--glass-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--gold) 6%, var(--color-surface-strong));
}
.home-dirs-more__btn {
  display: grid;
  justify-items: start;
  align-content: start;
  align-items: start;
  gap: 2px;
  min-height: 0;
  height: 100%;
  padding: 8px 12px 9px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface-strong);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--glass-border));
  border-radius: 8px;
  box-shadow: none;
  transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast);
}
.home-dirs-more__btn .kicker {
  margin: 0;
  font-size: 10px;
  color: var(--gold);
}
.home-dirs-more__btn strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.home-dirs-more__btn > span:last-child {
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-muted);
}
.home-dirs-more__btn:hover {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.home-dirs-more__btn:hover > span:last-child { color: inherit; }
.home-dirs-more__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
@media (max-width: 860px) {
  .home-dirs-more { grid-template-columns: 1fr; }
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(200px, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}
.hero .media-carousel,
.hero .media-pair,
.hero .media {
  width: 100%;
  max-width: 100%;
  justify-self: end;
}
.hero .media { margin: 0; }
.hero .media figcaption { color: var(--color-text-muted); }
.kicker--light { color: var(--gold); }

.media { margin: 0 0 8px; min-height: 0; }
.sheet-mod .media,
.sku-media .media { margin: 0; }
.media__frame {
  overflow: hidden;
  min-height: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background:
    repeating-linear-gradient(-32deg, transparent 0 10px, color-mix(in srgb, var(--str-blue-mist) 16%, transparent) 10px 11px),
    var(--media-fill);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.media img { display: block; width: 100%; height: auto; max-height: 100%; min-height: 0; object-fit: contain; }
.media:not(.is-stub) .media__frame { background: #ecebe6; }
.media:not(.is-stub) img { object-fit: contain; background: #f3f1ec; }
.media figcaption { margin-top: 6px; font-size: 12px; color: var(--color-text-faint); }
.media.is-stub .media__frame { background:
  repeating-linear-gradient(-32deg, transparent 0 10px, color-mix(in srgb, var(--str-blue) 14%, transparent) 10px 11px),
  var(--media-fill);
}
.media.is-missing-crop:not(:has(img)) { display: none; }
.media.is-compact {
  margin: 0;
  min-height: 0;
  overflow: hidden;
}
.media.is-compact .media__frame {
  min-height: 0;
  overflow: hidden;
}
.card--media {
  padding: 0; overflow: visible; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  min-width: 0; min-height: 0; height: auto;
}
.media img { max-width: 100%; min-width: 0; }
.card--media .media { margin: 0; min-height: 0; overflow: hidden; }
.card--media .media__frame { border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 0; }
.card--media .card__body {
  display: grid;
  gap: 2px;
  padding: 6px 8px 8px;
  flex: 1;
}
.card--media h3 { font-size: 13px; font-weight: 650; line-height: 1.25; }
.card--media h3, .card--media .muted { margin: 0; }
.card__lead {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.card__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 2px 0 0; align-content: start; }
.card__chips > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.card__main { color: inherit; text-decoration: none; min-width: 0; }
.card__main:hover h3 { color: var(--gold); }
.chip.chip--quiet {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.3;
  text-decoration: none;
  color: inherit;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  height: auto;
  background: color-mix(in srgb, var(--color-surface-strong) 70%, transparent);
}
a.chip.chip--quiet:hover {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--glass-border));
  background: var(--color-accent-soft);
}
.cards-3 > .card--media {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: stretch;
  height: auto;
  min-height: 92px;
  overflow: visible;
}
.cards-3 > .card--media > .card__main {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
}
.cards-3 > .card--media .media,
.cards-3 > .card--media .media__frame {
  width: 96px;
  height: 100%;
  min-height: 92px;
  max-height: none;
  aspect-ratio: auto !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  overflow: hidden;
}
.cards-3 > .card--media img {
  width: 96px;
  height: 100%;
  max-height: none;
  min-height: 92px;
  object-fit: cover;
}
.cards-3 > .card--media .card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px 10px;
  min-width: 0;
}
.cards-3 > .card--media h3 {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  min-height: 0;
}
.cards-3 > .card--media .card__lead {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  flex: 1 1 auto;
  min-height: 0;
}
.cards-3 > .card--media .muted {
  margin-top: auto;
  font-size: 12px;
}
.cards-3 > .card--media .card__chips {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0 12px 10px;
  max-height: none;
  overflow: visible;
}
.card__chips > :only-child { grid-column: 1 / -1; }

/* Home: 5 directions in two rows, photo on top so the block is readable */
.cards-3.cards-dirs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.cards-3.cards-dirs > * {
  grid-column: span 2;
}
.cards-3.cards-dirs > :nth-child(n + 4) {
  grid-column: span 3;
}
.cards-3.cards-dirs > .card--media {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  grid-template-rows: none;
  padding: 0;
  overflow: visible;
  min-height: 0;
  height: auto;
}
.cards-3.cards-dirs > .card--media > .card__main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: clamp(112px, 11vw, 168px) auto;
  flex: 1 1 auto;
}
.cards-3.cards-dirs > .card--media .media,
.cards-3.cards-dirs > .card--media .media__frame {
  width: 100%;
  height: clamp(112px, 11vw, 168px);
  min-height: 0;
  max-height: none;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.cards-3.cards-dirs > .card--media img {
  width: 100%;
  height: clamp(112px, 11vw, 168px);
  min-height: 0;
  max-height: none;
  object-fit: contain;
  object-position: center;
  background: #fff;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.cards-3.cards-dirs > .card--media .card__body {
  padding: 10px 12px 8px;
  gap: 5px;
}
.cards-3.cards-dirs > .card--media h3 {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  min-height: 0;
  font-size: 1.05rem;
}
.cards-3.cards-dirs > .card--media .card__lead {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  min-height: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text);
}
.cards-3.cards-dirs > .card--media .card__chips {
  grid-column: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: none;
  overflow: visible;
  padding: 6px 12px 12px;
  margin-top: auto;
  gap: 5px;
  border-top: 0;
  background: transparent;
}
.cards-3.cards-dirs .chip.chip--quiet {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  height: auto;
  min-height: 0;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  border: 0;
  box-shadow: 0 2px 8px color-mix(in srgb, #102028 14%, transparent);
}
.cards-3.cards-dirs > .card--media.card--tone-fine,
.cards-3.cards-dirs > .card--media.card--tone-rough,
.cards-3.cards-dirs > .card--media.card--tone-mvs,
.cards-3.cards-dirs > .card--media.card--tone-special,
.cards-3.cards-dirs > .card--media.card--tone-info {
  border: 0;
  border-left: 0;
  background: var(--color-surface, #fff);
  box-shadow:
    0 10px 28px color-mix(in srgb, #102028 12%, transparent),
    0 1px 2px color-mix(in srgb, #102028 6%, transparent);
}
html[data-theme="light"] .cards-3.cards-dirs > .card--media.card--tone-fine,
html[data-theme="light"] .cards-3.cards-dirs > .card--media.card--tone-rough,
html[data-theme="light"] .cards-3.cards-dirs > .card--media.card--tone-mvs,
html[data-theme="light"] .cards-3.cards-dirs > .card--media.card--tone-special,
html[data-theme="light"] .cards-3.cards-dirs > .card--media.card--tone-info {
  background: #fff;
  box-shadow:
    0 10px 28px color-mix(in srgb, #102028 12%, transparent),
    0 1px 2px color-mix(in srgb, #102028 6%, transparent);
}
.cards-3.cards-dirs .card--tone-fine nav.card__chips .chip.chip--quiet,
.cards-3.cards-dirs .card--tone-fine .chip.chip--quiet {
  background: #d4e2ff;
  color: #15203a;
}
.cards-3.cards-dirs .card--tone-rough nav.card__chips .chip.chip--quiet,
.cards-3.cards-dirs .card--tone-rough .chip.chip--quiet {
  background: #f6ddc6;
  color: #3a2410;
}
.cards-3.cards-dirs .card--tone-mvs nav.card__chips .chip.chip--quiet,
.cards-3.cards-dirs .card--tone-mvs .chip.chip--quiet {
  background: #c8ecec;
  color: #103032;
}
.cards-3.cards-dirs .card--tone-special nav.card__chips .chip.chip--quiet,
.cards-3.cards-dirs .card--tone-special .chip.chip--quiet {
  background: #e8d6ff;
  color: #2a1644;
}
.cards-3.cards-dirs .card--tone-info nav.card__chips .chip.chip--quiet,
.cards-3.cards-dirs .card--tone-info .chip.chip--quiet {
  background: #d8dce8;
  color: #1c2030;
}
html[data-theme="dark"] .cards-3.cards-dirs .card--tone-fine nav.card__chips .chip.chip--quiet,
html[data-theme="dark"] .cards-3.cards-dirs .card--tone-fine .chip.chip--quiet {
  background: #243056;
  color: #e4ecff;
}
html[data-theme="dark"] .cards-3.cards-dirs .card--tone-rough nav.card__chips .chip.chip--quiet,
html[data-theme="dark"] .cards-3.cards-dirs .card--tone-rough .chip.chip--quiet {
  background: #3a2a18;
  color: #f6e6d4;
}
html[data-theme="dark"] .cards-3.cards-dirs .card--tone-mvs nav.card__chips .chip.chip--quiet,
html[data-theme="dark"] .cards-3.cards-dirs .card--tone-mvs .chip.chip--quiet {
  background: #163636;
  color: #d4f4f4;
}
html[data-theme="dark"] .cards-3.cards-dirs .card--tone-special nav.card__chips .chip.chip--quiet,
html[data-theme="dark"] .cards-3.cards-dirs .card--tone-special .chip.chip--quiet {
  background: #2c2044;
  color: #f0e4ff;
}
html[data-theme="dark"] .cards-3.cards-dirs .card--tone-info nav.card__chips .chip.chip--quiet,
html[data-theme="dark"] .cards-3.cards-dirs .card--tone-info .chip.chip--quiet {
  background: #2a2e3c;
  color: #e4e8f4;
}
@media (max-width: 1100px) {
  .cards-3.cards-dirs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards-3.cards-dirs > *,
  .cards-3.cards-dirs > :nth-child(n + 4) {
    grid-column: auto;
  }
}
.chip--quiet {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0;
}
.card--tone-fine,
.card--tone-rough,
.card--tone-mvs,
.card--tone-special,
.card--tone-info {
  border-color: color-mix(in srgb, var(--dir) 55%, var(--glass-border));
  border-left: 3px solid color-mix(in srgb, var(--dir) 82%, var(--glass-border));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--dir) 22%, transparent), transparent 48%),
    color-mix(in srgb, var(--glass-bg) 78%, var(--color-surface));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    0 10px 22px color-mix(in srgb, var(--dir) 18%, transparent),
    var(--panel-shadow);
}
.card--tone-fine:hover,
.card--tone-rough:hover,
.card--tone-mvs:hover,
.card--tone-special:hover,
.card--tone-info:hover {
  border-color: color-mix(in srgb, var(--dir) 70%, var(--gold));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--dir) 30%, transparent), transparent 52%),
    color-mix(in srgb, var(--glass-bg-elevated) 84%, var(--color-surface));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 16px 32px color-mix(in srgb, var(--dir) 24%, transparent),
    var(--shadow-card);
}
.card--tone-fine nav.card__chips .chip.chip--quiet,
.card--tone-fine .chip.chip--quiet {
  background: #d4e2ff;
  border: 1px solid #5b82e8;
  color: #15203a;
}
.card--tone-rough nav.card__chips .chip.chip--quiet,
.card--tone-rough .chip.chip--quiet {
  background: #f6ddc6;
  border: 1px solid #c9843e;
  color: #3a2410;
}
.card--tone-mvs nav.card__chips .chip.chip--quiet,
.card--tone-mvs .chip.chip--quiet {
  background: #c8ecec;
  border: 1px solid #2ea3a3;
  color: #103032;
}
.card--tone-special nav.card__chips .chip.chip--quiet,
.card--tone-special .chip.chip--quiet {
  background: #e8d6ff;
  border: 1px solid #8a5ad4;
  color: #2a1644;
}
.card--tone-info nav.card__chips .chip.chip--quiet,
.card--tone-info .chip.chip--quiet {
  background: #d8dce8;
  border: 1px solid #6d7694;
  color: #1c2030;
}
html[data-theme="dark"] .card--tone-fine nav.card__chips .chip.chip--quiet,
html[data-theme="dark"] .card--tone-fine .chip.chip--quiet {
  background: #243056;
  border-color: #7ea0ff;
  color: #e4ecff;
}
html[data-theme="dark"] .card--tone-rough nav.card__chips .chip.chip--quiet,
html[data-theme="dark"] .card--tone-rough .chip.chip--quiet {
  background: #3a2a18;
  border-color: #e0a46a;
  color: #f6e6d4;
}
html[data-theme="dark"] .card--tone-mvs nav.card__chips .chip.chip--quiet,
html[data-theme="dark"] .card--tone-mvs .chip.chip--quiet {
  background: #163636;
  border-color: #5ec8c8;
  color: #d4f4f4;
}
html[data-theme="dark"] .card--tone-special nav.card__chips .chip.chip--quiet,
html[data-theme="dark"] .card--tone-special .chip.chip--quiet {
  background: #2c2044;
  border-color: #b48cff;
  color: #f0e4ff;
}
html[data-theme="dark"] .card--tone-info nav.card__chips .chip.chip--quiet,
html[data-theme="dark"] .card--tone-info .chip.chip--quiet {
  background: #2a2e3c;
  border-color: #9aa3c7;
  color: #e4e8f4;
}
.card--tone-fine a.chip.chip--quiet:hover,
.card--tone-rough a.chip.chip--quiet:hover,
.card--tone-mvs a.chip.chip--quiet:hover,
.card--tone-special a.chip.chip--quiet:hover,
.card--tone-info a.chip.chip--quiet:hover {
  filter: brightness(0.94);
  color: inherit;
}
html[data-theme="light"] .card--tone-fine,
html[data-theme="light"] .card--tone-rough,
html[data-theme="light"] .card--tone-mvs,
html[data-theme="light"] .card--tone-special,
html[data-theme="light"] .card--tone-info {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--dir) 20%, #fff), color-mix(in srgb, var(--dir) 7%, #fff) 62%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 80%, transparent),
    0 10px 24px color-mix(in srgb, var(--dir) 22%, transparent),
    0 1px 2px color-mix(in srgb, var(--str-blue) 8%, transparent);
}
.catalog-hub h1 { font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 6px; }
.catalog-hub .dir-stage {
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--glass-border));
  padding-top: 12px;
}
.dir-jump { border-left: 3px solid var(--dir, var(--gold)); }
.dir-band {
  scroll-margin-top: 88px;
  margin-top: 16px;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--dir, var(--gold));
}
.dir-band:first-of-type { margin-top: 10px; }
.dir-band__head h2 { margin: 0 0 4px; font-size: 1.15rem; }
.dir-band__head .lede { margin: 0 0 8px; max-width: none; font-size: 13px; }
.dir-stage {
  display: grid;
  grid-template-columns: minmax(200px, 0.24fr) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  margin-top: 12px;
}
.dir-stage__tabs,
.dir-stage__panels { min-width: 0; }
.dir-stage__panels { overflow: visible; padding-left: 14px; }
.dir-stage__tabs {
  display: grid;
  gap: 0;
  position: sticky;
  top: 72px;
  z-index: 5;
  padding-right: 12px;
  border-right: 1px solid color-mix(in srgb, var(--gold) 28%, var(--glass-border));
}
.dir-tab {
  display: grid;
  gap: 2px;
  padding: 10px 12px 10px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  border: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
  transition: background var(--motion-fast);
}
.dir-tab + .dir-tab {
  border-top: 1px solid color-mix(in srgb, var(--gold) 22%, var(--glass-border));
  border-radius: 0;
}
.dir-tab:first-child { border-radius: 6px 6px 0 0; }
.dir-tab:last-child { border-radius: 0 0 6px 6px; }
.dir-tab:first-child:last-child { border-radius: 6px; }
.dir-tab strong {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 650;
}
.dir-tab em {
  font-style: normal;
  font-size: 11px;
  font-weight: 650;
  font-family: var(--mono);
  color: var(--gold);
}
.dir-tab:hover {
  background: var(--color-accent-soft);
}
.dir-tab.is-on {
  background: var(--color-accent-soft);
  box-shadow: none;
  transform: none;
}
.dir-tab.is-on::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: var(--dir, var(--gold));
}
.dir-tab.is-on:focus-visible {
  outline: 2px solid var(--dir, var(--gold));
  outline-offset: 2px;
}
.dir-panel {
  display: grid;
  gap: 12px;
}
.dir-panel__head {
  display: grid;
  gap: 4px;
  margin-bottom: 0;
  min-height: 0;
  align-content: start;
  padding: 8px 10px 9px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--dir) 22%, var(--glass-border));
  border-left-width: 3px;
  border-left-color: var(--dir);
  background: color-mix(in srgb, var(--dir) 9%, var(--color-surface-strong));
}
.dir-panel > .strip {
  padding: 8px 8px 6px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--dir) 40%, var(--glass-border));
  background: color-mix(in srgb, var(--dir) 16%, var(--color-surface-strong));
}
.dir-panel > .grid {
  padding: 10px;
  overflow: visible;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--dir) 28%, var(--glass-border));
  background: color-mix(in srgb, var(--dir) 8%, var(--color-surface-strong));
}
.dir-panel > * + * {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.dir-panel__head h2 { margin: 0; min-height: 0; font-size: 1.12rem; }
.dir-panel__head .lede {
  margin: 0;
  max-width: none;
  width: 100%;
  font-size: 12px;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  min-height: 0;
}
.dir-panel .strip__name { display: none; }
.dir-panel .strip__head { margin: 0 0 4px; }
.dir-panel .strip__track {
  padding: 0;
  gap: 1px;
  grid-auto-columns: minmax(0, 1fr);
  background: color-mix(in srgb, var(--dir) 38%, var(--glass-border));
  border-radius: 6px;
  overflow: hidden;
}
.dir-panel .strip__item { grid-template-rows: 52px auto; border-radius: 0; border: 0; }
.dir-panel .strip__copy { padding: 4px 6px 5px; }
.dir-panel .strip__copy strong { font-size: 11px; }
.dir-panel .strip__meta { display: none; }
.dir-panel .strip__arrow { width: 26px; height: 26px; }
.dir-panel > .grid.cards-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.dir-panel > .grid.cards-3:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dir-panel > .grid.cards-3:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.dir-panel > .grid.cards-3 > .card--media {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--dir) 42%, var(--glass-border));
  border-radius: 8px;
  background: var(--color-surface-strong);
}
@supports (grid-template-rows: subgrid) {
  .dir-panel > .grid.cards-3 > .card--media {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    grid-row: span 2;
    height: auto;
  }
}
.dir-panel > .grid.cards-3 > .card--media > .card__main {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-column: auto;
  grid-row: 1;
  flex: 1 1 auto;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
}
.dir-panel > .grid.cards-3 > .card--media .media,
.dir-panel > .grid.cards-3 > .card--media .media__frame,
.dir-panel > .grid.cards-3 > .card--media img {
  width: 72px;
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  object-fit: cover;
  align-self: start;
  border-radius: 6px 0 0 0;
}
.dir-panel > .grid.cards-3 > .card--media .card__body {
  display: flex;
  flex-direction: column;
  padding: 6px 10px 6px;
  gap: 2px;
  min-width: 0;
  height: 100%;
}
.dir-panel > .grid.cards-3 > .card--media h3 {
  font-size: 13px;
  min-height: 0;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.dir-panel > .grid.cards-3 > .card--media .card__lead {
  font-size: 12px;
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.dir-panel > .grid.cards-3 > .card--media .muted {
  margin-top: 4px;
}
.dir-panel > .grid.cards-3 > .card--media .card__chips {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 6px 8px 8px;
  gap: 3px;
  grid-template-columns: 1fr;
  align-content: start;
  grid-row: 2;
}
.dir-panel .chip.chip--quiet {
  padding: 5px 8px;
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 650;
  white-space: normal;
  min-height: 34px;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}
.dir-panel__fams {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted);
  display: block;
  overflow: visible;
  min-height: 0;
}
.dir-stage .dir-panel:not(.is-on) { display: none; }
.dir-stage:not(.is-ready) { visibility: hidden; }
.dir-panel.is-on { animation: paneIn .32s var(--easing-standard); }
.card--hit a { display: grid; grid-template-columns: minmax(140px, 0.22fr) 1fr; gap: 12px; text-decoration: none; color: inherit; }
.card--hit img { width: 100%; height: 80px; object-fit: cover; border-radius: var(--radius-md); }
.search-page .lede { max-width: none; }
.search-history { display: grid; gap: 14px; margin-top: 8px; }
.search-history__block h2 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}
.search-history__list { display: flex; flex-wrap: wrap; gap: 8px; }
.search-history__clear { justify-self: start; }
.search-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.search-more { margin: 12px 0 0; }
.hits { display: grid; gap: 2px; }
.hits-modes { margin: 0 0 16px; }
button.path-chip {
  font: inherit;
  cursor: pointer;
  appearance: none;
}
.hit a {
  display: grid;
  grid-template-columns: minmax(6.5em, 8.5em) 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}
.hit__match,
.search__suggest .hit__match {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
  align-self: center;
}
.hit a:hover, .hit a:focus-visible, .hit a.is-on {
  background: var(--color-accent-soft);
  border-color: var(--glass-border);
}
.hit__sku {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--gold);
  padding-top: 2px;
}
.hit__body { min-width: 0; }
.hit__body strong { font-size: 15px; font-weight: 650; }
.hits-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.hits-kinds .chip.is-on {
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);
}
.hits-meta { min-height: 1.4em; margin: 0 0 10px; }
mark {
  background: color-mix(in srgb, var(--gold) 28%, transparent);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}
.sheet-row.card--media {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 0 10px;
  height: auto;
  min-height: 42px;
  padding: 2px 8px 2px 2px;
  border-radius: 6px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sheet-row.card--media > * {
  min-width: 0;
  min-height: 0;
}
.sheet-row.card--media > .pg,
.sheet-row.card--media > div {
  grid-column: 2;
}
.sheet-row.card--media .media,
.sheet-row.card--media .media__frame {
  width: 56px;
  height: 42px;
  max-width: 56px;
  max-height: 42px;
  aspect-ratio: 4 / 3 !important;
  border-radius: 4px !important;
  overflow: hidden;
  flex: 0 0 56px;
}
.sheet-row.card--media img {
  width: 56px !important;
  height: 42px !important;
  max-width: 56px !important;
  max-height: 42px !important;
  object-fit: cover;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}
.sheet-group .sheet-row.card--media,
.pack--cards > .sheet-list > .sheet-row.card--media {
  background: color-mix(in srgb, var(--color-bg-soft) 55%, var(--color-surface-strong));
  box-shadow: 0 1px 2px color-mix(in srgb, #000 7%, transparent);
}
.sheet-row.card--media {
  overflow: visible;
}
.sheet-row.card--media:hover,
.sheet-row.card--media:focus-visible,
.sheet-row.card--media.is-peek {
  z-index: 7;
  background: color-mix(in srgb, var(--color-accent-soft) 70%, var(--color-surface-strong));
  border-color: color-mix(in srgb, var(--gold) 40%, var(--glass-border));
}
.sheet-row.card--media:hover .media img,
.sheet-row.card--media:focus-visible .media img {
  transform: scale(1.06);
}

.sheet-peek {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transform-origin: left center;
  transition: opacity 160ms var(--easing-standard), transform 160ms var(--easing-standard);
  width: min(360px, 44vw);
  max-width: calc(100vw - 24px);
}
.sheet-peek.is-on {
  opacity: 1;
  transform: none;
}
.sheet-peek.is-left {
  transform-origin: right center;
}
.sheet-peek figure {
  margin: 0;
  padding: 6px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-surface-strong) 92%, #fff);
  border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--glass-border));
  box-shadow:
    0 1px 0 var(--glass-highlight),
    0 18px 44px color-mix(in srgb, var(--str-blue-ink) 16%, transparent);
}
.sheet-peek img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(420px, 56vh);
  object-fit: contain;
  background:
    repeating-linear-gradient(-32deg, transparent 0 10px, color-mix(in srgb, var(--str-blue-mist) 12%, transparent) 10px 11px),
    #f4f2ec;
  border-radius: 8px;
}
.sheet-peek figcaption {
  margin: 6px 4px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-peek figcaption em {
  font-style: normal;
  color: var(--gold);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
@media (hover: none), (pointer: coarse) {
  .sheet-peek { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-peek,
  .sheet-row.card--media img { transition: none; }
}

.table-mod--toc .table-mod__units { display: none; }
.table-mod--toc table.data { font-size: 13px; }
.table-mod--toc table.data td { color: var(--color-text-muted); }
.table-mod--chart .table-mod__bar { padding: 6px 10px; }
.table-mod--chart table.data { font-size: 13px; }
.table-mod--chart table.data td:first-child,
.table-mod--chart table.data th:first-child {
  font-family: var(--mono);
  font-weight: 700;
  white-space: nowrap;
}
.table-mod--chart table.data thead th {
  background: color-mix(in srgb, var(--color-text) 5.5%, var(--color-surface-strong));
}
.table-mod--chart table.data tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
}
.table-mod--chart table.data tbody tr:hover td {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

/* ISO 513 — original hues, very light fills */
:root {
  --iso-p: #4a7ec8;
  --iso-m: #c9b24a;
  --iso-k: #c45a52;
  --iso-n: #4aaa6e;
  --iso-s: #c8844a;
  --iso-h: #8b8d98;
}
.iso-legend {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
}
.iso-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  font-family: var(--mono);
}
.iso-key--p { background: color-mix(in srgb, var(--iso-p) 16%, transparent); color: color-mix(in srgb, var(--iso-p) 55%, var(--color-text)); }
.iso-key--m { background: color-mix(in srgb, var(--iso-m) 18%, transparent); color: color-mix(in srgb, var(--iso-m) 50%, var(--color-text)); }
.iso-key--k { background: color-mix(in srgb, var(--iso-k) 16%, transparent); color: color-mix(in srgb, var(--iso-k) 55%, var(--color-text)); }
.iso-key--n { background: color-mix(in srgb, var(--iso-n) 16%, transparent); color: color-mix(in srgb, var(--iso-n) 50%, var(--color-text)); }
.iso-key--s { background: color-mix(in srgb, var(--iso-s) 18%, transparent); color: color-mix(in srgb, var(--iso-s) 52%, var(--color-text)); }
.iso-key--h { background: color-mix(in srgb, var(--iso-h) 18%, transparent); color: color-mix(in srgb, var(--iso-h) 45%, var(--color-text)); }
td.iso-key { width: 2.4em; text-align: center; }

.grade-chart { width: 100%; border-collapse: collapse; }
.grade-chart thead th { cursor: default; }
.grade-chart thead th::after { content: none !important; }
.grade-chart .grade-chart__name {
  vertical-align: top;
  padding-top: 10px;
  white-space: nowrap;
}
.grade-chart .grade-chart__name strong { display: block; font-size: 13px; }
.grade-chart .grade-chart__name em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  color: var(--color-text-muted);
}
.grade-chart .grade-chart__desc {
  vertical-align: top;
  font-family: var(--sans);
  font-weight: 400;
  white-space: normal;
  max-width: 28em;
}
.grade-chart .grade-chart__desc ul {
  margin: 0;
  padding-left: 1.1em;
}
.grade-chart .grade-chart__desc li { margin: 0 0 2px; }
.grade-chart tr.is-odd td,
.grade-chart tr.is-odd th {
  background: color-mix(in srgb, var(--color-text) 3.5%, transparent);
}
.grade-chart tr.is-first td,
.grade-chart tr.is-first th {
  border-top: 1px solid var(--glass-border);
}
.iso-scale-h { min-width: 280px; }
.iso-scale {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--color-text-muted);
  letter-spacing: 0;
}
.iso-scale span { text-align: center; }
.iso-track {
  position: relative;
  height: 16px;
  min-width: 240px;
}
.iso-track__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
.iso-track__grid span {
  border-left: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.iso-bar {
  position: absolute;
  top: 3px;
  height: 10px;
  border-radius: 2px;
  left: calc((var(--iso-a) - 5) / 35 * 100%);
  width: calc((var(--iso-b) - var(--iso-a)) / 35 * 100%);
}
.iso-bar--p { background: color-mix(in srgb, var(--iso-p) 22%, transparent); }
.iso-bar--m { background: color-mix(in srgb, var(--iso-m) 24%, transparent); }
.iso-bar--k { background: color-mix(in srgb, var(--iso-k) 22%, transparent); }
.iso-bar--n { background: color-mix(in srgb, var(--iso-n) 22%, transparent); }
.iso-bar--s { background: color-mix(in srgb, var(--iso-s) 24%, transparent); }
.iso-bar--h { background: color-mix(in srgb, var(--iso-h) 22%, transparent); }

.app-marks {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  font-size: 11px;
  white-space: nowrap;
}
.iso-track,
section.dim-legend dt,
.picto-tip {
  cursor: help;
}
span.picto-tip {
  display: inline;
}
.app-mark { display: inline-block; font-style: normal; opacity: 0.72; }
.app-mark--ext { opacity: 0.38; }
thead th.col-app {
  padding: 2px 4px;
  vertical-align: middle;
  font-size: 11px;
}

th.col-grade--hw, td.col-grade--hw { background: color-mix(in srgb, var(--iso-h) 10%, transparent); }
th.col-grade--hc, td.col-grade--hc { background: color-mix(in srgb, var(--iso-p) 10%, transparent); }
th.col-grade--ht, td.col-grade--ht { background: color-mix(in srgb, var(--iso-m) 12%, transparent); }
th.col-grade--tc, td.col-grade--tc { background: color-mix(in srgb, var(--iso-s) 10%, transparent); }
th.col-grade--bn, td.col-grade--bn { background: color-mix(in srgb, var(--iso-h) 12%, transparent); }
th.col-grade--bc, td.col-grade--bc { background: color-mix(in srgb, var(--iso-p) 8%, transparent); }
th.col-grade--cn, td.col-grade--cn { background: color-mix(in srgb, var(--iso-k) 10%, transparent); }
th.col-grade--dp, td.col-grade--dp { background: color-mix(in srgb, var(--iso-n) 10%, transparent); }
th.col-geo, td.col-geo {
  font-family: var(--mono);
  font-weight: 650;
  text-align: center;
  min-width: 4.4rem;
  letter-spacing: 0.02em;
}
table.data tr.is-geo-start td,
table.data tr.is-geo-start th {
  border-top: 1px solid color-mix(in srgb, var(--gold) 28%, var(--glass-border));
}
th.col-grp--carbide { background: color-mix(in srgb, var(--iso-p) 10%, transparent); }
th.col-grp--cbn { background: color-mix(in srgb, var(--iso-h) 11%, transparent); }
th.col-grp--pcd { background: color-mix(in srgb, var(--iso-n) 11%, transparent); }
.sheet-stack, .pack, .pack--tables, .table-pack, .table-mod, .section > .wrap {
  min-width: 0;
  max-width: 100%;
}
.wrap.sheet-stack {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.table-mod {
  margin: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  overflow: visible;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.table-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  align-items: end;
  padding: 5px 10px 6px;
  border-bottom: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--glass-bg-elevated) 78%, var(--color-surface-strong));
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  position: sticky;
  top: 62px;
  z-index: 8;
}
.table-filters > label,
.table-filters > .rng-lab,
.table-filters > .table-mod__find {
  flex: 1 1 9.5rem;
  min-width: 8.5rem;
  max-width: none;
}
.table-filters label {
  display: grid;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-text-muted);
}
.table-filters select,
.table-filters input[type="search"],
.table-filters .table-mod__find input {
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 24px;
  padding: 1px 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  border: var(--chip-border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-surface-strong) 70%, transparent);
}
.table-filters__reset {
  height: 24px;
  padding: 0 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}
.table-filters__reset:hover {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--glass-border));
  background: var(--color-accent-soft);
}
.table-filters__fams {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--color-text-muted);
}
.table-filters__chip {
  height: 22px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.table-filters__chip.is-on {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--gold) 35%, var(--glass-border));
  background: color-mix(in srgb, var(--color-accent-soft) 80%, transparent);
}
.table-filters__actions {
  display: flex;
  gap: 4px;
  align-items: end;
  margin-left: auto;
}
.table-filters__expand,
.table-filters__more {
  height: 24px;
  padding: 0 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-surface-strong) 70%, transparent);
  cursor: pointer;
}
.table-filters__expand:hover,
.table-filters__more:hover {
  border-color: color-mix(in srgb, var(--gold) 40%, var(--glass-border));
}
.table-filters__more { display: none; }
.table-filters select option:disabled {
  color: var(--color-text-faint);
}
.rng-lab { min-width: 9.5rem; max-width: none; flex: 1 1 12rem; }
.rng-lab__cap {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: 1px 6px;
  align-items: baseline;
}
.rng-lab__val {
  grid-column: 1 / -1;
  font-weight: 600;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}
.rng {
  --rng-h: 20px;
  --rng-thumb: 14px;
  --rng-icon: none;
  position: relative;
  height: var(--rng-h);
  --a: 0%;
  --b: 100%;
}
.rng--mill {
  --rng-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M23.79,11.5L30.64,12.73L30.64,19.27L23.79,20.5L26.15,27.04L20.49,30.31L16.0,25.0L11.51,30.31L5.85,27.04L8.21,20.5L1.36,19.27L1.36,12.73L8.21,11.5L5.85,4.96L11.51,1.69L16.0,7.0L20.49,1.69L26.15,4.96ZM19.2,16a3.2,3.2 0 1 1 -6.4,0a3.2,3.2 0 1 1 6.4,0z'/%3E%3C/svg%3E");
}
.rng--insert {
  --rng-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M16,2 L29.5,16 L16,30 L2.5,16Z M16,12.3a3.7,3.7 0 1 0 0,7.4a3.7,3.7 0 1 0 0-7.4z'/%3E%3C/svg%3E");
}
.rng--insert-s {
  --rng-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M7,7h18v18H7z M16,12.3a3.7,3.7 0 1 0 0,7.4a3.7,3.7 0 1 0 0-7.4z'/%3E%3C/svg%3E");
}
.rng__rail {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 9px;
  height: 2px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--color-text) 16%, transparent);
  pointer-events: none;
}
.rng__fill {
  position: absolute;
  left: var(--a);
  right: calc(100% - var(--b));
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--gold) 70%, var(--str-blue-bright));
}
.rng__in {
  position: absolute;
  inset: 0;
  width: 100%;
  height: var(--rng-h);
  margin: 0;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  touch-action: none;
}
.rng__in--lo { z-index: 2; }
.rng__in--hi { z-index: 3; }
.rng__in::-webkit-slider-runnable-track { height: var(--rng-h); background: none; }
.rng__in::-moz-range-track { height: var(--rng-h); background: none; border: 0; }
.rng__in::-webkit-slider-thumb {
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  width: var(--rng-thumb);
  height: var(--rng-thumb);
  margin-top: calc((var(--rng-h) - var(--rng-thumb)) / 2);
  border: 0;
  border-radius: 0;
  background-color: var(--gold);
  background-image: none;
  box-shadow: none;
  cursor: grab;
  -webkit-mask: var(--rng-icon) center / contain no-repeat;
  mask: var(--rng-icon) center / contain no-repeat;
}
.rng__in::-moz-range-thumb {
  pointer-events: auto;
  width: var(--rng-thumb);
  height: var(--rng-thumb);
  border: 0;
  border-radius: 0;
  background-color: var(--gold);
  background-image: none;
  box-shadow: none;
  cursor: grab;
  mask: var(--rng-icon) center / contain no-repeat;
}
html[data-theme="light"] .rng__in::-webkit-slider-thumb,
html[data-theme="light"] .rng__in::-moz-range-thumb {
  background-color: var(--str-blue);
}
.rng__in:active::-webkit-slider-thumb,
.rng__in:active::-moz-range-thumb { cursor: grabbing; }
.rng__in:focus-visible::-webkit-slider-thumb,
.rng__in:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
dialog.table-fs {
  display: none;
}
.table-view-tools {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  grid-column: 2;
  grid-row: 1;
  z-index: 2;
  flex: 0 0 auto;
}
.table-view-btn {
  height: 32px;
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--glass-border));
  border-radius: 8px;
  background: var(--color-surface-strong);
  cursor: pointer;
  white-space: nowrap;
}
.table-view-btn:hover,
.table-view-btn:focus-visible {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--glass-border));
  background: var(--color-accent-soft);
  color: var(--gold);
}
body.is-table-sheet {
  overflow: hidden;
}
body.is-table-sheet .topbar,
body.is-table-sheet header.site,
body.is-table-sheet footer.site,
body.is-table-sheet .skip {
  display: none !important;
}
.table-mod.is-sheet-on {
  position: fixed;
  inset: 0;
  z-index: 120;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-bg);
  box-shadow: none;
  overflow: auto;
}
.table-mod.is-sheet-on .table-filters { top: 0; }
.table-mod.is-sheet-on .table-scroll {
  flex: 1 1 auto;
  max-height: none;
  height: auto;
  min-height: 40vh;
  border-radius: 0;
}
.table-mod.is-sheet-on:fullscreen,
.table-mod.is-sheet-on:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  overflow: auto;
}
td.col-grade.is-empty {
  color: transparent;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    color-mix(in srgb, var(--color-text) 3%, transparent) 4px,
    color-mix(in srgb, var(--color-text) 3%, transparent) 5px
  );
}
table.data.hide-fam-cermet .col-grade--ht,
table.data.hide-fam-cermet .col-grade--tc,
table.data.hide-fam-cermet .col-grp--cermet,
table.data.hide-fam-carbide .col-grade--hw,
table.data.hide-fam-carbide .col-grade--hc,
table.data.hide-fam-carbide .col-grp--carbide,
table.data.hide-fam-cbn .col-grade--bn,
table.data.hide-fam-cbn .col-grade--bc,
table.data.hide-fam-cbn .col-grp--cbn,
table.data.hide-fam-pcd .col-grade--dp,
table.data.hide-fam-pcd .col-grp--pcd {
  display: none;
}
.table-mod__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 12px 8px;
}
.sheet-stack .table-mod__bar { padding: 6px 10px 6px; gap: 6px 10px; }
.sheet-stack .table-filters { padding: 4px 8px 6px; gap: 4px 8px; }
.sheet-stack .tech-dl:not(.tech-dl--axes) {
  max-width: none;
  width: 100%;
}
.sheet-stack .block { gap: 6px; }
.table-mod__bar > .table-mod__title {
  grid-column: 1;
  grid-row: 1;
}
.table-mod__bar > .table-mod__find,
.table-mod__bar > .table-mod__units,
.table-mod__bar > .table-mod__note,
.table-mod__bar > .iso-legend,
.table-mod__bar > [data-grid-count] {
  grid-column: 1 / -1;
}
.table-mod__bar h2, .table-mod__title { margin: 0; font-size: 14px; font-weight: 700; }
table.data caption {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.table-mod__find { font-size: 11px; font-weight: 700; display: grid; gap: 2px; }
.table-mod__find input { margin-left: 0; padding: 2px 8px; min-width: 8rem; height: 24px; }
.table-mod__units,
.table-mod__note,
.sku-units {
  flex: 1 0 100%;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-text-muted);
}
.sku-units { margin: 0 0 10px; }
.table-scroll {
  overflow-x: auto;
  overflow-y: clip;
  max-height: none;
  width: 100%;
  max-width: 100%;
  background: color-mix(in srgb, var(--glass-bg) 40%, transparent);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: auto;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.table-scroll > table.data {
  width: max-content;
  min-width: 0;
}
table.data[data-grid] {
  display: table;
  width: max-content;
  min-width: 100%;
}
.block-desc .table-scroll > table.data,
.copy-pack .table-scroll > table.data,
.table-mod--legend .table-scroll > table.data,
table.data.legend-table {
  width: max-content;
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 960px) {
  table.data.std-table:not([data-grid]) {
    width: 100%;
    max-width: 100%;
  }
  table.data.std-table:not([data-grid]) tbody {
    width: 100%;
  }
}
table.data.std-table:not([data-grid]) th,
table.data.std-table:not([data-grid]) td {
  width: auto;
  white-space: normal;
}
.table-mod--legend table.data thead th::after,
table.data.legend-table thead th::after {
  content: none !important;
}
.sheet-stack .table-mod,
.sheet-stack .table-scroll,
.sku-copy .table-mod,
.sku-copy .table-scroll {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
th.col-grade, td.col-grade {
  font-size: 11px;
  padding: 6px 5px;
}
table.data thead tr:not(:last-child) th {
  cursor: default;
  user-select: none;
  white-space: nowrap;
  pointer-events: none;
}
/* ISO-полосы и треугольники ▼/▽ живут не в последней строке thead — без auto hover/title не работают. */
table.data thead tr:not(:last-child) th.col-app,
table.data thead tr:not(:last-child) th.picto-tip,
table.data thead tr:not(:last-child) th.iso-band__lab,
table.data thead tr.iso-band th:not(.is-gap) {
  pointer-events: auto;
  cursor: help;
}
table.data thead tr:not(:last-child) th::after { content: none; }
table.data thead tr:last-child th { cursor: pointer; user-select: none; }
table.data[data-grid] thead tr:last-child th:not(.is-gap)::after {
  content: " ↕";
  opacity: 0.35;
  font-weight: 500;
}
.block-desc table.data thead tr:last-child th,
table.data:not([data-grid]) thead tr:last-child th {
  cursor: default;
  user-select: auto;
}
.block-desc table.data thead tr:last-child th::after,
table.data:not([data-grid]) thead tr:last-child th::after {
  content: none !important;
}
table.data thead tr:last-child th:empty,
table.data thead tr:last-child th.is-gap {
  cursor: default;
  pointer-events: none;
}
table.data thead tr:last-child th:empty::after {
  content: none !important;
}
table.data[data-grid] thead th[data-sort-dir="asc"]::after { content: " ↑"; opacity: 1; }
table.data[data-grid] thead th[data-sort-dir="desc"]::after { content: " ↓"; opacity: 1; }
table.data:has(thead .col-app) thead th::after,
table.data thead th.col-grade::after,
table.data thead th.col-app::after {
  content: none !important;
}
table.data thead th.is-gap {
  cursor: default;
  pointer-events: none;
  padding: 0;
  border-color: transparent;
  background: transparent;
}
table.data:has(thead .col-app) thead th.is-gap {
  background: var(--sku-sticky);
  border-color: var(--glass-border);
}
table.data:has(thead .col-app) thead tr:last-child th {
  position: static;
  box-shadow: none;
}
table.data tbody tr[data-sku] { cursor: pointer; }
table.data tr:hover td.col-sku,
table.data tr.is-on td.col-sku { background: var(--sku-sticky); }
table.data tr.is-on td { outline: 1px solid var(--gold); background: var(--color-accent-soft); }

.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}
.tool-btn {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--color-surface-strong) 62%, transparent);
  color: var(--color-text);
  border-radius: var(--radius-full);
  text-decoration: none;
  overflow: visible;
}
.tool-btn:hover, .tool-btn.is-here { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--glass-border)); }
.tool-btn:focus-visible { outline: 2px solid var(--str-blue-bright); outline-offset: 2px; }
.tool-btn svg { display: block; }
.tool-btn__n {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--str-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-family: var(--mono);
}
.tool-btn__n[hidden] { display: none; }

.theme-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--color-surface-strong) 62%, transparent);
  color: var(--color-text);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: none;
  overflow: hidden;
}
.theme-toggle:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--glass-border)); }
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  display: none;
}
html:not([data-theme="light"]) .theme-toggle .theme-toggle__sun { display: block; }
html[data-theme="light"] .theme-toggle .theme-toggle__moon { display: block; }

.cab .lede { max-width: none; }
.cab-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: 8px 24px;
  align-items: end;
  margin: 0 0 14px;
}
.cab-head h1 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -0.02em; }
.cab-head .kicker { margin: 0 0 4px; }
.cab-head__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted);
}
.cab form.lead { max-width: none; }
.cab-enter {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.7fr);
  gap: 14px;
  align-items: start;
}
.cab-auth-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}
.cab-card--compact {
  padding: 14px 18px 16px;
}
.cab-fields--single {
  grid-template-columns: 1fr;
}
.cab-card {
  margin: 0;
  padding: 18px 20px 20px;
}
.cab-card h2 { margin: 0 0 6px; font-size: 1.05rem; }
.cab-card > .muted { margin: 0 0 14px; font-size: 13px; line-height: 1.45; }
.cab-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.cab-fields label {
  display: grid;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--color-text-muted);
}
.cab-fields .is-wide { grid-column: 1 / -1; }
.cab-aside.card {
  padding: 16px 18px;
  display: grid;
  gap: 10px;
  align-content: start;
  box-shadow: var(--panel-shadow);
}
.cab-aside h2 { margin: 0; font-size: 14px; }
.cab-aside h2.cab-aside__sub { margin: 14px 0 0; }
.cab-aside .order-benefits { margin: 8px 0 10px; }
.cab-aside .muted { margin: 0; font-size: 13px; }
.cab-aside__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cab-aside__list a { color: inherit; text-decoration: none; font-weight: 650; }
.cab-aside__list a:hover { color: var(--gold); }
.cab-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.cab-stat {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--ui-radius-field);
  background: color-mix(in srgb, var(--color-surface-strong) 55%, transparent);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  box-shadow: var(--panel-shadow-soft);
  transition:
    border-color var(--ui-motion) var(--easing-standard),
    background var(--ui-motion) var(--easing-standard),
    box-shadow var(--ui-motion) var(--easing-standard),
    transform var(--ui-motion) var(--easing-standard);
}
.cab-stat:hover {
  border-color: color-mix(in srgb, var(--gold) 40%, var(--glass-border));
  background: var(--color-accent-soft);
  color: var(--gold);
  transform: translateY(-1px);
  box-shadow: var(--field-focus-shadow);
}
.cab-stat strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.cab-stat span {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 650;
}
.cab-stat:hover span { color: inherit; }
.cab-who {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  margin: 0 0 12px;
}
.cab-who strong { font-size: 15px; }
.cab-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid var(--field-border);
  border-radius: var(--ui-radius-panel);
  background: color-mix(in srgb, var(--color-surface-strong) 40%, transparent);
  box-shadow: var(--panel-shadow-soft);
}
.cab-tabs a,
.cab-tabs button {
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--ui-radius-field);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--ui-motion) var(--easing-standard),
    color var(--ui-motion) var(--easing-standard),
    box-shadow var(--ui-motion) var(--easing-standard);
}
.cab-tabs a:hover,
.cab-tabs button:hover {
  background: var(--color-accent-soft);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent);
}
.cab-tabs a.is-on,
.cab-tabs button.is-on {
  background: var(--color-accent-soft);
  color: var(--gold);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent),
    0 4px 12px color-mix(in srgb, var(--str-blue) 8%, transparent);
}
.cab-tabs em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  opacity: .7;
  margin-left: 4px;
}
.cab-panel h2 { margin: 0 0 10px; font-size: 1.05rem; }
.cab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  align-items: start;
}
.cab-grid h2 { margin: 0 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.cab-grid .lead { margin: 0; }
.cab-list { display: grid; gap: 8px; }
.cab-row {
  display: grid;
  grid-template-columns: minmax(6em, 9em) minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--ui-radius-field);
  border: 1px solid var(--field-border);
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--color-surface-strong) 48%, transparent);
  box-shadow: var(--panel-shadow-soft);
  transition:
    border-color var(--ui-motion) var(--easing-standard),
    background var(--ui-motion) var(--easing-standard),
    box-shadow var(--ui-motion) var(--easing-standard),
    transform var(--ui-motion) var(--easing-standard);
}
.cab-row:hover {
  background: var(--color-accent-soft);
  border-color: color-mix(in srgb, var(--str-blue-bright) 28%, var(--glass-border));
  box-shadow: var(--field-focus-shadow);
  transform: translateY(-1px);
}
.cab-row strong { font-size: 13px; }
.cab-row .sku, .cab-row__sku { font-family: var(--mono); font-weight: 650; font-size: 13px; }
.cab-row .muted { margin: 2px 0 0; font-size: 12px; }
.btn.gold.is-in { filter: saturate(.85); }
.cab-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cab-qty button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--field-border);
  border-radius: var(--ui-radius-field);
  background: color-mix(in srgb, var(--color-surface-strong) 55%, transparent);
  color: inherit;
  cursor: pointer;
  box-shadow: var(--field-shadow-in);
  transition:
    border-color var(--ui-motion) var(--easing-standard),
    background var(--ui-motion) var(--easing-standard),
    transform var(--ui-motion) var(--easing-standard);
}
.cab-qty button:hover {
  border-color: color-mix(in srgb, var(--str-blue-bright) 35%, var(--glass-border));
  background: var(--color-accent-soft);
  transform: translateY(-1px);
}
.cab-qty input {
  width: 3.2em;
  text-align: center;
  border-radius: var(--ui-radius-field);
  padding: 4px 6px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  box-shadow: var(--field-shadow-in);
  font: inherit;
}
.cab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
@media (max-width: 1100px) {
  .cab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cab-head, .cab-enter, .cab-fields, .cab-grid { grid-template-columns: 1fr; }
  .cab-fields .is-wide { grid-column: auto; }
}
@media (max-width: 800px) {
  .cab-row { grid-template-columns: 1fr auto; }
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .logo { text-shadow: none; }
html[data-theme="light"] .mega-dir strong,
html[data-theme="light"] .mega-fam strong,
html[data-theme="light"] .mega-sub strong { color: #1c1d68; }
html[data-theme="light"] .mega-dir span,
html[data-theme="light"] .mega-fam span,
html[data-theme="light"] .mega-sub span { color: #4a4f6a; }
html[data-theme="light"] .strip__copy strong { color: #1c1d68; }
html[data-theme="light"] .strip__item {
  background: #fff;
}

.siblings-wrap.is-plain { grid-template-columns: 1fr; }
.siblings-wrap.is-plain .siblings__arrow,
.siblings-wrap.is-plain::before,
.siblings-wrap.is-plain::after { display: none; }

@media (prefers-reduced-transparency: reduce) {
  body::after { display: none; }
  header.site, header.site::before, .card, .place .wrap, .table-mod, .section > .wrap, footer.site,
  .hero .hero__inner, .mega-nav__panel {
    background: var(--color-surface-strong);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (max-width: 800px), (hover: none) and (pointer: coarse) {
  .card, .section > .wrap {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-surface-strong);
  }
}
@media (max-width: 800px) {
  .sku-grid { grid-template-columns: 1fr; }
  .sku-media, .sku-media.media-carousel {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 16px;
    grid-column: 1;
    grid-row: auto;
    z-index: auto;
  }
  .sku-copy > .sku-aside,
  .sku-copy > h1,
  .sku-copy > .lede,
  .sku-copy > .sku-lineage,
  .sku-copy > .sku-offer:not(.sku-offer--foot) {
    grid-column: 1;
    grid-row: auto;
  }
  .sku-copy { z-index: auto; }
  .sku-zoom-hint { bottom: 12px; }
  .dir-stage__tabs {
    position: static;
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 28%, var(--glass-border));
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .dir-stage__panels { padding-left: 0; }
  .dir-panel > .grid.cards-3,
  .dir-panel > .grid.cards-3:has(> :nth-child(3):last-child) {
    grid-template-columns: 1fr;
  }
  .cards-3 > .card--media {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 80px;
  }
  .cards-3 > .card--media > .card__main {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .cards-3 > .card--media .media,
  .cards-3 > .card--media .media__frame,
  .cards-3 > .card--media img {
    width: 72px;
    min-height: 80px;
  }
  .cards-3.cards-dirs {
    grid-template-columns: 1fr;
  }
  .cards-3.cards-dirs > *,
  .cards-3.cards-dirs > :nth-child(n + 4) {
    grid-column: auto;
  }
  .cards-3.cards-dirs > .card--media {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    min-height: 0;
  }
  .cards-3.cards-dirs > .card--media > .card__main {
    grid-template-columns: 1fr;
    grid-template-rows: 110px auto;
  }
  .cards-3.cards-dirs > .card--media .media,
  .cards-3.cards-dirs > .card--media .media__frame,
  .cards-3.cards-dirs > .card--media img {
    width: 100%;
    height: 110px;
    min-height: 110px;
    max-height: 110px;
    object-fit: contain;
    object-position: center;
    background: #fff;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }
  .sheet-row:has(> .media),
  .sheet-row.card--media:has(> .media) {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .sheet-row:has(> .media):has(> .pg),
  .sheet-row.card--media:has(> .media):has(> .pg) {
    grid-template-columns: 48px max-content minmax(0, 1fr);
  }
  .sheet-list a.sheet-row,
  .sheet-list .sheet-row.card--media,
  .sheet-card-with-chips > a.sheet-row,
  .sheet-row:not(:has(> .media)) {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  .sheet-row.card--media .media,
  .sheet-row.card--media .media__frame,
  .sheet-row.card--media img {
    width: 48px !important;
    height: 36px !important;
    max-width: 48px !important;
    max-height: 36px !important;
    border-radius: 4px !important;
  }
  .sheet-list a.sheet-row .media,
  .sheet-list a.sheet-row .media__frame,
  .sheet-list a.sheet-row img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
  }
  .sheet-mod { grid-template-columns: 1fr; }
  .sheet-cluster,
  .sheet-cluster.sheet-cluster--gallery {
    --hero-stage-h: min(320px, 46vh);
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "hero"
      "gallery"
      "copy";
  }
  .sheet-cluster > .sheet-cluster__aside {
    display: contents;
  }
  .sheet-cluster .sheet-head {
    grid-area: head;
  }
  .sheet-cluster .sheet-cluster__copy {
    grid-area: copy;
  }
  .sheet-cluster > .sheet-mod > .media,
  .sheet-cluster > .sheet-mod > .media-pair,
  .sheet-cluster > .sheet-mod > .media-carousel {
    grid-area: hero;
    width: auto;
    max-width: none;
  }
  .sheet-cluster .block-gallery:has(> .pack--catalog) {
    grid-template-columns: 1fr;
  }
  .sheet-mod > .media,
  .sheet-mod > .media-pair,
  .sheet-mod > .media-carousel,
  .sheet-mod > .sheet-head {
    grid-column: 1;
    grid-row: auto;
    width: auto;
    max-width: min(100%, var(--hero-stage, 300px));
    min-width: 0;
  }
  .sheet-mod > .sheet-head {
    width: 100%;
    max-width: none;
  }
  .sheet-mod > .media .media__frame,
  .sheet-mod > .media-pair .media__frame,
  .sheet-mod > .media-carousel .media__frame {
    width: fit-content;
    max-width: min(100%, var(--hero-stage, 300px));
    max-height: var(--hero-stage-h, 200px);
    aspect-ratio: auto !important;
  }
  .sheet-mod > .media img,
  .sheet-mod > .media-pair img,
  .sheet-mod > .media-carousel img {
    width: auto !important;
    height: auto !important;
    max-width: min(100%, var(--hero-stage, 300px)) !important;
    max-height: var(--hero-stage-h, 200px) !important;
  }
  header.site .wrap { flex-wrap: wrap; }
  nav.main { flex-wrap: wrap; flex: 1 1 100%; }
  .header-tools { margin-left: 0; flex: 1 1 100%; justify-content: flex-end; }
  .search { margin-left: 0; max-width: none; width: auto; flex: 1 1 auto; }
  .search--header {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
  }
  .search--header .search__field {
    position: relative;
    right: auto;
    width: 100%;
    height: auto;
    justify-content: stretch;
  }
  .search--header .search__lens {
    position: static;
    transform: none;
    order: 0;
    flex: 0 0 38px;
  }
  .search__clear { right: 8px; display: grid; place-items: center; }
  .search--header input {
    width: auto; opacity: 1; pointer-events: auto;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--color-surface-strong) 88%, transparent);
    box-shadow: none;
  }
  .search--header .search__kbd { display: none !important; }
  .hit a { grid-template-columns: minmax(5.5em, 7em) 1fr auto; gap: 10px; }
  .card--hit a { grid-template-columns: 1fr; }
  .hero .hero__inner { padding: 22px 18px; }
  .mega-nav { width: auto; }
  .mega-nav.is-open .mega-nav__panel {
    position: absolute;
    left: 0; right: auto;
    width: min(90rem, calc(100vw - 24px));
    top: calc(100% + 8px);
    transform-origin: top left;
  }
  .mega-nav__body {
    grid-template-columns: 1fr;
    max-height: min(72vh, 620px);
  }
  .mega-nav__col--dir,
  .mega-nav__col--fam {
    display: grid;
    border-right: 0;
    border-bottom: 1px solid var(--glass-border);
  }
  .mega-dir, .mega-fam { min-width: 0; }
  .mega-nav.is-open .mega-dir { animation: none; }
  .table-filters {
    top: 0;
    gap: 5px;
    padding: 5px 8px 6px;
  }
  .table-filters__more { display: inline-flex; align-items: center; }
  .table-filters:not(.is-open) > label:nth-of-type(n + 3) { display: none; }
  .table-filters:not(.is-open) > .table-filters__fams { display: none; }
  .rng-lab, .table-filters select, .table-filters input[type="search"], .table-mod__find {
    min-width: 0;
    max-width: none;
    flex: 1 1 calc(50% - 8px);
  }
  .table-filters__actions { margin-left: 0; flex: 1 1 100%; }
  .table-scroll { max-height: none; }
  .table-mod__bar { padding: 8px 10px; }
  .table-mod__title { font-size: 13px; }
}

/* FAQ accordion */
.faq-page .lede { max-width: 52rem; }
.faq-toc { flex-wrap: wrap; gap: 8px; margin: 0 0 1.25rem; }
.faq-list { display: grid; gap: 8px; margin: 0 0 1.75rem; }
.faq-item {
  border: 1px solid var(--line, rgba(16, 36, 58, 0.12));
  border-radius: var(--ui-radius-field, 10px);
  background: color-mix(in srgb, var(--panel, #fff) 92%, transparent);
  padding: 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.85rem 1.05rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-weight: 500;
  opacity: 0.55;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item__a { padding: 0 1.05rem 0.95rem; font-size: 0.92rem; line-height: 1.55; max-width: 48rem; }
.faq-item__a p { margin: 0 0 0.65em; }
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-page h2 { font-size: 1.08rem; margin: 1.4rem 0 0.65rem; scroll-margin-top: 5.5rem; }

.about-page .lede { max-width: 52rem; }
.about-page h2 { font-size: 1.08rem; margin: 1.45rem 0 0.55rem; }
.about-points { margin: 0 0 1rem; padding-left: 1.2rem; max-width: 48rem; }
.about-points li { margin: 0.25rem 0; }
.about-industries, .about-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.about-industries li {
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(16, 36, 58, 0.12));
}
.about-brands a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 10rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--ui-radius-field, 10px);
  border: 1px solid var(--line, rgba(16, 36, 58, 0.12));
  text-decoration: none;
}
.about-brands a span { font-size: 0.8rem; opacity: 0.75; }

.delivery-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: 8px;
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  max-width: 52rem;
}
.delivery-facts li {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line, rgba(16, 36, 58, 0.12));
  border-radius: var(--ui-radius-field, 10px);
  font-size: 0.88rem;
  line-height: 1.4;
}
.delivery-facts strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 0.2rem;
}
.delivery-page .delivery-ways { margin: 0.85rem 0 1.35rem; }
.delivery-page .delivery-ways .card {
  padding: 1rem 1.05rem 1.1rem;
}
.delivery-way__n {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 650;
  opacity: 0.45;
}
.delivery-page .delivery-ways h3 { margin-bottom: 0.45rem; }
.std-page .table-scroll {
  overflow-x: auto;
  margin: 0.7rem 0 1.1rem;
  max-width: 100%;
}
.std-page .std-table { font-size: 0.86rem; }
.std-page .std-table th { white-space: nowrap; }
.std-page .std-char { font-size: 0.82rem; }
.std-page h2 { scroll-margin-top: 5.5rem; }
.std-legend { margin-bottom: 1.2rem; }
.std-page .std-traps,
.std-page #std-traps { scroll-margin-top: 5.5rem; }
.block-use {
  margin: 0 0 1.35rem;
}
.block-use h2 { font-size: 1.05rem; margin: 0 0 0.45rem; }
.sku-lineage {
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0.35rem 0 0.9rem;
}
.fam-spec {
  margin: 0 0 1.4rem;
  width: 100%;
  max-width: none;
  min-width: 0;
}
.fam-spec h2 {
  font-size: 1.05rem;
  margin: 0 0 0.6rem;
}
.fam-spec .table-scroll,
.fam-spec__table { width: 100%; max-width: none; }
.fam-spec__table { font-size: 0.84rem; }
.fam-spec__table th:first-child { white-space: nowrap; }
.karta-page .karta-list {
  margin: 0 0 1.2rem;
  padding-left: 1.15rem;
  line-height: 1.45;
}
.karta-page .karta-list a { text-decoration: none; }
.karta-page .karta-list a:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover,
  .btn:hover,
  .cab-row:hover,
  .cab-stat:hover,
  .cab-tabs a:hover,
  .cab-tabs button:hover,
  .cab-qty button:hover {
    transform: none !important;
  }
}

/* Site guide: floating hint, legend under crumbs, gold focus ring */
#site-guide {
  position: fixed;
  z-index: 80;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(12, 14, 36, 0.88);
  color: #f4f6ff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
}
#site-guide[hidden] {
  display: none !important;
}
html[data-theme="light"] #site-guide {
  background: rgba(255, 255, 255, 0.94);
  color: #222328;
  box-shadow: 0 12px 28px rgba(46, 49, 146, 0.16);
}
.site-guide__what,
.site-guide__why {
  display: block;
}
.site-guide__what {
  font-weight: 650;
}
.site-guide__why {
  margin-top: 2px;
  font-weight: 400;
  color: color-mix(in srgb, currentColor 72%, transparent);
}
.site-legend {
  margin: 0 0 12px;
  max-width: 72ch;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
header [data-site-guide],
.topbar [data-site-guide],
nav.main [data-site-guide],
nav.crumbs [data-site-guide] {
  outline: none;
}