/* ============================================================
   КОНЦЕПЦИЯ Б — «ТИХИЙ ВОЗДУХ» · v2 (выбранное направление)
   Темный кинозал, продукт в конусе света. Плоская Apple-система:
   сплошные кнопки без «выпуклости», радиусы 8–12px, стекло только
   в шапке-острове. Многостраничность: index → buy → config.
   ============================================================ */

@font-face {
  font-family: "Montserrat";
  src: url("shared/fonts/Montserrat-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Onder";
  src: url("shared/fonts/Onder-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}

:root {
  --bg: #04060a;
  --ink: #f2f5f8;
  --dim: rgba(242, 245, 248, 0.58);
  --faint: rgba(242, 245, 248, 0.35);
  --frost: #cfe9f8;
  --frost-solid: #d6ecfa;
  --frost-line: rgba(159, 208, 234, 0.75);
  --lamp: #ffe9c4;
  --glow: #ffe9c4; /* свечение (конусы света) — настраивается в CMS */
  /* ЕДИНОЕ СТЕКЛО: одна заливка и одно размытие на шапку, подвал и все плашки.
     Правится в CMS → Внешний вид → «Стекло» (осветление + размытие). */
  --glass-plaque: rgba(255, 255, 255, 0.1);
  /* заливка плашек = заливка стекла: одна ручка в CMS на весь сайт */
  --card: var(--glass-plaque);
  --card-2: rgba(255, 255, 255, 0.14);
  --hairline: rgba(255, 255, 255, 0.11);
  --hairline-soft: rgba(255, 255, 255, 0.07);
  --r-s: 4px;   /* кнопки, сегменты, поля — острее концепции В */
  --r-m: 6px;   /* карточки, ряды опций */
  --r-l: 9px;   /* шапка-остров */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Montserrat", system-ui, sans-serif;
  --disp: "Onder", var(--sans);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* ---- ЕДИНАЯ ТИПОГРАФИКА (правится в CMS → Внешний вид) ----
     Всего два размера на весь основной контент, чтобы был порядок:
     --text — весь основной текст блоков (описания, состав, опции, подвал);
     --head — заголовки внутри блоков (карточки, разделы, выноски).
     Мелкие подписи и заголовки страниц выводятся из них пропорционально. */
  --text: 14px;
  --head: 17px;
  --text-sm: calc(var(--text) - 1.5px); /* меты, подписи, мелкие строки */
  --text-lg: calc(var(--head) + 5px);   /* крупные заголовки карточек серий */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }

body {
  background: transparent; /* цвет держит html — под ним может лежать .page-bg */
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--base-size, 16.5px);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--frost); color: var(--bg); }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- шапка-остров (единственное «жидкое стекло») ---------- */

.island {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(1140px, calc(100vw - 36px));
  border-radius: var(--r-l);
  /* стекло как у нижних плашек — светлое, а не темная плита (запрос владельца) */
  background: var(--glass-plaque);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(var(--glass-blur, 15px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur, 15px)) saturate(1.3);
}
/* шапка: сам бар выше (запрос владельца — «увеличить шапку, не шрифты»);
   размеры текста и кнопок — как были, высоту держит крупный фавикон + паддинг */
.island .i-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 12px 12px 12px 22px;
  transition: padding 0.4s var(--ease);
  white-space: nowrap;
}
.island.shrunk .i-row { padding: 8px 9px 8px 18px; }
.island .logo {
  font-weight: 600; font-size: 14px; letter-spacing: 0.04em;
  text-decoration: none; margin-right: auto;
  display: inline-flex; align-items: center; gap: 10px;
}
/* значок-лого из CMS увеличен ×2 (задает высоту шапки) */
.island .logo .logo-ic { height: 52px; width: auto; max-width: 200px; display: block; }
.island a.link {
  /* размер пунктов меню правится в CMS → Внешний вид */
  font-size: var(--nav-size, 13px); color: var(--dim);
  text-decoration: none;
  padding: 8px 12px; border-radius: var(--r-s);
  transition: color 0.3s, background 0.3s;
  white-space: nowrap;
}
.island a.link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
.island a.link.cur { color: var(--ink); }
.island .sbtn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-s);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.3s, background 0.3s;
  margin: 0 4px;
}
.island .sbtn svg { width: 15px; height: 15px; }
.island .sbtn:last-child { margin-right: 0; }
.island .sbtn:hover, .island.searching .sbtn { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
/* поиск: шапка раскрывается вниз */
/* ---------- меню шапки: одна строка + «три полоски» ----------
   Пункты живут в .i-links одной строкой. Когда они перестают помещаться
   (много разделов или узкое окно), shared.js вешает на шапку .compact:
   строка прячется, появляется бургер, пункты уходят в выпадающую панель. */
.island .i-links { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.island.compact .i-links { display: none; }
.island .burger { display: none; }
.island.compact .burger { display: inline-flex; }
.island.menu-open .burger { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.island .i-menu {
  display: grid;
  padding: 6px 10px 12px;
  border-top: 1px solid var(--hairline-soft);
}
/* без этого правила display:grid перебивает атрибут hidden и панель
   висит раскрытой всегда (собственный display всегда сильнее hidden) */
.island .i-menu[hidden] { display: none; }
.island .i-menu a.link { padding: 11px 12px; font-size: var(--nav-size, 13px); }

.island .i-search {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--hairline-soft);
}
.island .i-search input {
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.island .s-res { display: grid; padding-top: 6px; }
.island .s-res a {
  font-size: 13.5px;
  color: var(--dim);
  text-decoration: none;
  padding: 9px 10px;
  border-radius: var(--r-s);
  transition: background 0.2s, color 0.2s;
}
.island .s-res a:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.island .s-empty { font-size: 13px; color: var(--faint); padding: 10px; }

/* ---------- кнопки: плоские, Apple ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* размер кнопок масштабируется --btn-user из CMS (Внешний вид → Размер кнопок) */
  --btn-scale: var(--btn-user, 1);
  padding: calc(15px * var(--btn-scale)) calc(30px * var(--btn-scale));
  border-radius: var(--r-s);
  border: none;
  font-family: var(--sans);
  font-size: calc(15px * var(--btn-scale));
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  color: #071018;
  background: var(--frost-solid);
  transition: background 0.25s, transform 0.25s var(--ease);
}
/* на мобильных кнопки заметно меньше (были огромные) */
@media (max-width: 680px) { :root { --btn-mobile: 0.8; } .btn { --btn-scale: calc(var(--btn-user, 1) * 0.8); } }
.btn:hover { background: color-mix(in srgb, var(--frost-solid) 80%, #fff); transform: translateY(-1px); }
.btn:active { transform: none; }
/* Вторая кнопка рядом с сиреневой — то же стекло, что у шапки и плашек,
   но НА 5% СВЕТЛЕЕ общего (--glass-btn): лежащая на плашке кнопка иначе
   сливается с ней в одно пятно (замечание владельца). Раньше здесь была
   темная подложка rgba(8,12,18,.55) — кнопка выглядела черной заплаткой. */
.btn.ghost {
  background: var(--glass-btn, rgba(255, 255, 255, 0.15));
  backdrop-filter: blur(var(--glass-blur, 15px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur, 15px)) saturate(1.3);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
/* при наведении просто светлеет — как все остальные кнопки сайта */
.btn.ghost:hover {
  background: var(--glass-btn-hover, rgba(255, 255, 255, 0.22));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
.btn.wide { width: 100%; }

/* ---------- СТЕКЛО ПО УМОЛЧАНИЮ: блюр получают ВСЕ плашки ----------
   Одно правило на весь сайт. Плашка — любой блок с полупрозрачной заливкой,
   лежащий поверх фона страницы: карточки, ряды опций, строки корзины, поля,
   степперы, выноски. Раньше список велся вручную и новые плашки оставались
   без блюра — теперь наоборот: блюр по умолчанию, отключается точечно.

   НОВАЯ ПЛАШКА получает стекло автоматически, если выполнено любое из:
     • в имени класса есть card / sheet / panel / plate / plaque / tile;
     • элементу добавлен класс .glass;
     • его селектор дописан в список ниже.
   Отключить стекло на конкретном элементе — класс .no-glass.
   Сила стекла (размытие + осветление) — CMS → Внешний вид → «Стекло». */
[class*="card"], [class*="sheet"], [class*="panel"], [class*="plate"],
[class*="plaque"], [class*="tile"], .glass,
.chip, .cut-notes article, .tease, .fact, .series-line, .b-stage .halo,
.b-summary, .b-exp, .calc-room, .g-opt, .seg, .info-types .t-row,
.cart-row, .cart-total, .cat-chips button, .stepper, .announce {
  backdrop-filter: blur(var(--glass-blur, 15px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur, 15px)) saturate(1.3);
}
/* Точечное отключение: блюр внутри блюра только мылит, а в CMS он не нужен.
   Кружки-свотчи RAL (.swl) в список выше НЕ входят: у них нет заливки, а на
   палитре из 53+ цветов это десятки лишних слоев компоновки и заметные тормоза. */
.no-glass,
.stepper input, .stepper button,
.cms-body [class*="card"], .cms-body [class*="panel"],
.cms-body [class*="sheet"], .cms-body [class*="tile"] {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- статья с вкладками (article.html) ----------
   Универсальная страница-статья: «Как это работает», «Документы
   и сертификаты», «Доставка и оплата». Содержимое собирается из блоков
   в CMS: текст, фото, видео, характеристики, документы. */
.art-wrap { max-width: 900px; }
.a-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 30px;
  border-bottom: 1px solid var(--hairline-soft);
}
.a-tabs button {
  font-family: var(--sans); font-size: var(--text); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--faint); background: transparent; border: none;
  padding: 12px 16px; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.a-tabs button:hover { color: var(--dim); }
.a-tabs button.cur { color: var(--ink); border-bottom-color: var(--frost); }

.a-body { margin-top: 30px; }
.a-text p { color: var(--dim); font-size: var(--text); line-height: 1.75; margin-bottom: 14px; }
.a-h3 { font-size: var(--head); font-weight: 600; margin: 34px 0 12px; }

.a-figure { margin: 26px 0; }
.a-figure img { width: 100%; border-radius: var(--r-m); }
.a-figure figcaption {
  margin-top: 10px; font-size: var(--text-sm); color: var(--faint); line-height: 1.5;
}
/* видео держит пропорцию 16:9 и не ломает верстку на телефоне */
.a-video { position: relative; padding-top: 56.25%; border-radius: var(--r-m); overflow: hidden; }
.a-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.a-specs { width: 100%; border-collapse: collapse; margin: 14px 0 24px; }
.a-specs th, .a-specs td {
  text-align: left; vertical-align: top;
  padding: 12px 14px; font-size: var(--text); font-weight: 400;
  border-bottom: 1px solid var(--hairline-soft);
}
.a-specs th { color: var(--faint); width: 42%; }
.a-specs td { color: var(--ink); }

.a-docs { list-style: none; margin: 14px 0 24px; display: grid; gap: 8px; }
.a-docs li a, .a-docs li > .d-name {
  display: block; padding: 14px 16px;
  border-radius: var(--r-m);
  background: var(--card);
  text-decoration: none; color: var(--ink); font-size: var(--text);
  transition: background 0.25s;
}
.a-docs li a { backdrop-filter: blur(var(--glass-blur, 15px)) saturate(1.3); }
.a-docs li a:hover { background: rgba(255, 255, 255, 0.16); }
.a-docs .d-note { display: block; margin-top: 4px; font-size: var(--text-sm); color: var(--faint); }
.a-cta { margin-top: 46px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 680px) {
  .a-tabs button { padding: 10px 11px; font-size: var(--text-sm); }
  .a-specs th { width: 45%; }
}

/* ---------- документ (политика, оферта и т.п.) ----------
   Длинный юридический текст: узкая колонка, крупная межстрочка, ясные
   заголовки разделов. Читаемость важнее плотности. */
.doc-wrap { max-width: 860px; }
.doc-meta { color: var(--faint); font-size: var(--text-sm); margin-top: 6px; }
.doc-body { margin-top: 34px; }
.doc-body h2 {
  font-size: var(--head);
  font-weight: 600;
  margin: 34px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-soft);
}
.doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.doc-body p { color: var(--dim); font-size: var(--text); line-height: 1.75; margin-bottom: 12px; }

/* ---------- НЕТ В НАЛИЧИИ ----------
   Позиция остается на полке, но приглушена вдвое и не выбирается; поверх —
   яркая подпись «Нет в наличии» (ее приглушать нельзя, иначе не прочитать).
   Флаг ставится в CMS → «Цены и наличие». Вторая галочка там же («Скрыть»)
   убирает позицию из разметки совсем — отдельного оформления не требует. */
.is-out {
  position: relative;
  cursor: not-allowed;
  pointer-events: none;
}
.is-out > *:not(.out-badge) { opacity: 0.5; }
.is-out .out-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(10, 13, 18, 0.82);
  border: 1px solid var(--hairline);
  border-radius: var(--r-s);
  padding: 4px 10px;
  pointer-events: none;
}
/* свотчи цвета мелкие — подпись ставим под кружком, а не поверх него */
.swl.is-out .out-badge {
  position: static;
  transform: none;
  display: block;
  margin-top: 4px;
  font-size: 9.5px; letter-spacing: 0.04em;
  padding: 2px 6px;
}
/* сегменты (длина, форма решетки) — подпись сбоку, места мало */
.seg .is-out .out-badge, .seg button.is-out .out-badge {
  font-size: 9.5px; padding: 2px 6px;
}
/* карточка серии или группы, которой нет в наличии: гасим фото и текст,
   но карточка остается кликабельной по «Подробнее» */
.series-out .ph, .series-out .body > *:not(.p-actions):not(.p-price) { opacity: 0.5; }
/* кнопка-заглушка вместо ссылки на конфигуратор */
.btn.disabled, .btn:disabled {
  background: rgba(255, 255, 255, 0.09);
  color: var(--faint);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}

/* ---------- hero ---------- */

.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 24px 9vh;
  overflow: hidden;
}
.cone {
  position: absolute;
  top: -12vh; left: 50%;
  width: 130vmin; height: 130vmin;
  transform: translateX(-50%);
  background: radial-gradient(closest-side at 50% 18%,
    color-mix(in srgb, var(--glow) 16%, transparent) 0%,
    color-mix(in srgb, var(--glow) 6%, transparent) 34%,
    transparent 68%);
  pointer-events: none;
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}
.hero .stage {
  position: relative;
  width: min(300px, 56vw);
  margin-bottom: 7vh;
  animation: float 11s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.hero .stage img {
  width: 100%;
  border-radius: var(--photo-radius, 10px);
  aspect-ratio: 1;
  object-fit: cover;
  transform: scale(var(--hero-img-scale, 1));
  filter: grayscale(1) brightness(1.04);
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.7);
}
.hero .stage::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: -13%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.85), transparent 70%);
  filter: blur(6px);
}
.particles { position: absolute; inset: 0; pointer-events: none; }
.particles i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--glow) 55%, transparent);
  animation: drift linear infinite;
  opacity: 0;
}
@keyframes drift {
  0% { transform: translate(0, 20px); opacity: 0; }
  15% { opacity: 0.7; }
  85% { opacity: 0.25; }
  100% { transform: translate(var(--dx, 30px), -55vh); opacity: 0; }
}
.hero h1 {
  font-family: var(--disp);
  font-weight: 400;
  font-size: calc(clamp(17px, 2.8vw, 37px) * var(--hero-scale, 1));
  line-height: 1.26;
  letter-spacing: 0.015em;
}
.hero h1 .frost-t { color: var(--frost); }
.hero .sub { margin-top: 22px; color: var(--dim); max-width: 46ch; font-size: var(--hero-sub-size, 17px); }
.hero .cta-row { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero .quiet-specs {
  margin-top: 56px;
  display: flex; gap: 34px; flex-wrap: wrap; justify-content: center;
  color: var(--faint); font-size: var(--specs-size, 13px); letter-spacing: 0.04em;
}
.hero .quiet-specs b { color: var(--dim); font-weight: 500; }

/* ---------- сцены ---------- */

.scene {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 15vh 32px;
}
.scene.center { text-align: center; }
.scene .whisper {
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 26px;
}
.scene h2 {
  font-weight: 200;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.14;
  max-width: 22ch;
  margin-inline: auto;
}
.scene h2 b { font-weight: 500; color: var(--frost); }
.scene .lede { margin: 24px auto 0; color: var(--dim); max-width: 52ch; font-size: calc(var(--text) + 2px); }

/* чипы преимуществ — плоские карточки */
.chips { margin-top: 58px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.chip {
  border-radius: var(--r-m);
  padding: 32px 28px;
  background: var(--card);
  text-align: left;
}
.chip { font-family: var(--chip-font, var(--sans)); }
.chip .big { font-weight: 200; font-size: var(--chip-big, 44px); line-height: 1; }
.chip .big sup { font-size: 0.4em; font-weight: 400; color: var(--dim); }
.chip h3 { font-size: var(--head); font-weight: 600; margin: 16px 0 8px; }
.chip p { font-size: var(--text); color: var(--dim); line-height: 1.6; }

/* ---------- scroll-scrub сториборд (заглушка под 3D/видео) ---------- */

.rig { height: 420vh; position: relative; }
.rig-sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 24px;
  text-align: center;
}
.rig-sticky .cone { top: -30vh; transition: opacity 0.3s linear; }
.rig-head {
  width: min(880px, 92vw);
  height: auto;
}
.rig-head .part { transition: none; } /* позиции двигает JS по прогрессу */
.rig-head .ln { stroke: #b9c6d2; fill: none; }
.rig-head .ln.frost { stroke: var(--frost); }
.rig-head .fillp { fill: rgba(207, 233, 248, 0.05); }
.rig-head .hatch { stroke: color-mix(in srgb, var(--glow) 55%, transparent); }
.rig-head text {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  fill: var(--faint);
}
.rig-head .plabel { opacity: 0; transition: opacity 0.5s; }
.rig-head .plabel.on { opacity: 1; }
.rig-air circle { fill: color-mix(in srgb, var(--glow) 75%, transparent); }

.rig-cap { position: relative; margin-top: 34px; min-height: 108px; width: min(620px, 90vw); }
.rig-cap .st {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.rig-cap .st.on { opacity: 1; transform: none; }
.rig-cap h3 { font-weight: 200; font-size: clamp(24px, 3.4vw, 38px); }
.rig-cap p { margin-top: 10px; color: var(--dim); font-size: var(--text); }
.rig-bar {
  margin-top: 18px;
  width: min(320px, 60vw);
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.rig-bar i { display: block; height: 100%; width: 0; background: var(--frost); }
.rig-note {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/* ---------- функциональная схема по паспорту Флагмана ---------- */

.cutwrap {
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, 0.02);
  padding: clamp(14px, 3vw, 36px);
  margin-top: 48px;
}
.cutwrap svg { width: 100%; height: auto; display: block; }
.cut-diagram { width: 100%; min-width: 0; }
.cutwrap .cut-mobile { display: none; }
.cut-places { display: flex; justify-content: space-between; gap: 20px; padding: 0 3%; margin-bottom: 6px; color: #d3d8e3; font-size: 23px; font-weight: 500; }
.cutwrap figcaption { max-width: 700px; margin: 18px auto 0; color: var(--dim); font-size: 13px; line-height: 1.6; text-align: center; }
.cut-wall { stroke: #9ca6b4; stroke-width: 1.6; stroke-opacity: .48; }
.cut-bricks { stroke-width: 1; stroke-opacity: .12; }
.cut-part { stroke: #dddfe8; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cut-sleeve { fill: rgba(190, 198, 255, .045); stroke: #b8c0d2; stroke-width: 1.5; }
.cut-wave { stroke-opacity: .5; stroke-width: 1; }
.cut-windows { stroke-opacity: .85; stroke-width: 1.6; stroke-linejoin: round; }
.cut-chain { stroke: #dddfe8; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .5 4; stroke-opacity: .65; }
.cut-air { stroke: url(#cutFlowShade); stroke-width: 2; stroke-linecap: round; }
.cut-labels { fill: #c5cad4; font-family: inherit; font-size: 15px; font-weight: 400; }
.cut-labels path {
  fill: none; stroke: #edf1ff; stroke-width: 1.8; stroke-opacity: 1;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px #04060a);
}
.cut-labels circle {
  fill: #edf1ff; stroke: #10141d; stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
@media (max-width: 680px) {
  .cutwrap { padding: 20px 12px; }
  .cutwrap .cut-desktop { display: none; }
  .cutwrap .cut-mobile { display: block; }
  .cut-mid { transform: matrix(.6287128713, 0, 0, 1, 87.62376238, 0); }
  .cut-head-end { transform: translateX(-150px); }
  .cut-part { stroke-width: 2.6; }
  .cut-air { stroke: url(#cutMobileFlowShade); stroke-width: 2.8; }
  .cut-labels { font-size: 25px; }
  .cut-labels path { stroke-width: 2; }
  .cut-labels circle { r: 5.5px; }
  .cut-places { font-size: 18px; margin-bottom: 12px; }
  .cutwrap figcaption { font-size: 12px; margin-top: 18px; }
}
/* Keep the requested drafting reveal on this figure, including reduced-motion
   mode; the owner's preference does not change animation on other sections. */
.cutwrap .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cutwrap.on .draw { animation: cut-trace 2.6s cubic-bezier(.4, 0, .2, 1) both; }
.cutwrap .fillfade, .cutwrap .lbl { opacity: 0; }
.cutwrap.on .fillfade { animation: cut-reveal 1.1s ease 1.1s both; }
.cutwrap.on .lbl { animation: cut-reveal .9s ease 1.5s both; }
@keyframes cut-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cut-reveal { from { opacity: 0; } to { opacity: 1; } }
.cut-notes {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.cut-notes article {
  border-radius: var(--r-m);
  background: var(--card);
  padding: 20px 20px 22px;
  text-align: left;
}
.cut-notes .no { font-family: var(--mono); font-size: 10px; color: var(--frost); letter-spacing: 0.2em; }
.cut-notes h3 { font-size: var(--head); font-weight: 600; margin: 9px 0 6px; }
.cut-notes p { font-size: var(--text); color: var(--dim); line-height: 1.55; }

/* ---------- комплектации: карточки по линиям ---------- */

.tier-row {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}
.tier-card {
  border-radius: var(--r-m);
  padding: 26px 24px;
  text-align: left;
  background: var(--card);
  border: 1px solid transparent; /* рамка только у .reco */
  display: flex;
  flex-direction: column;
}
.tier-card .lvl {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint); display: block; margin-bottom: 14px;
}
.tier-card h3 { font-size: var(--head); font-weight: 600; }
.tier-card p { font-size: var(--text); color: var(--dim); margin-top: 10px; line-height: 1.55; }
.tier-card.reco {
  background: rgba(207, 233, 248, 0.07);
  border: 1px solid var(--frost-line);
}
.tier-card.reco .lvl { color: var(--frost); }

/* тизер серий на лендинге */
.series-teaser {
  margin-top: 58px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tease {
  border-radius: var(--r-m);
  background: var(--card);
  padding: 24px 26px;
  text-align: left;
  text-decoration: none;
  transition: background 0.3s;
}
.tease:hover { background: var(--card-2); }
.tease h3 { font-size: var(--head); font-weight: 600; }
.tease .meta { font-size: var(--text-sm); color: var(--faint); margin-top: 5px; }
.tease .go-line { margin-top: 16px; font-size: var(--text-sm); font-weight: 500; color: var(--frost); }

/* ---------- страница BUY: выбор серии ---------- */

.buy-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 150px 32px 60px;
  text-align: center;
}
.buy-wrap h1 { font-weight: 200; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.12; }
.buy-wrap .lede { margin: 18px auto 0; color: var(--dim); max-width: 52ch; font-size: calc(var(--text) + 2px); }
.buy-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.b-card {
  border-radius: 8px;
  border: 1px solid transparent; /* рамка только у .reco */
  background: var(--card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 0.35s var(--ease);
}
.b-card:hover { transform: translateY(-4px); }
.b-card.reco { border-color: var(--frost-line); }
.b-card .ph {
  height: 250px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(90% 90% at 50% 15%, #10161e 0%, #070a0f 100%);
  position: relative;
  overflow: hidden;
}
.b-card .ph::before {
  content: "";
  position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 120%; aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 12%, transparent), transparent 70%);
}
.b-card .ph img { max-height: 82%; max-width: 76%; object-fit: contain; position: relative; border-radius: var(--r-s); }
.b-card .ph img.gs { filter: grayscale(1); border-radius: var(--photo-radius, 10px); }
.b-card .body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.b-card .tag {
  align-self: flex-start;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: #071018; background: var(--frost-solid);
  border-radius: 5px; padding: 5px 10px;
  margin-bottom: 13px;
}
.b-card h2 { font-size: var(--text-lg); font-weight: 600; }
.b-card .meta { font-size: var(--text-sm); color: var(--faint); margin-top: 6px; letter-spacing: 0.04em; }
.b-card p.blurb { font-size: var(--text); color: var(--dim); margin: 12px 0 18px; line-height: 1.6; flex: 1; }
.b-card ul.pts { list-style: none; margin-bottom: 22px; }
.b-card ul.pts li {
  font-size: var(--text); color: var(--dim);
  padding: 6px 0 6px 20px;
  border-top: 1px solid var(--hairline-soft);
  position: relative;
}
.b-card ul.pts li::before {
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--frost); border-bottom: 1.5px solid var(--frost);
  transform: rotate(-45deg);
}
.buy-note { margin-top: 26px; font-size: 13px; color: var(--faint); }

/* ---------- страница CONFIG: конфигуратор ---------- */

.builder {
  max-width: 1240px;
  margin: 0 auto;
  padding: 130px 32px 80px;
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(420px, 560px);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.builder > * { min-width: 0; }
.b-stage { position: sticky; top: 90px; }
.b-stage .halo {
  border-radius: 8px;
  padding: 38px 30px 42px;
  background:
    radial-gradient(80% 60% at 50% 10%, color-mix(in srgb, var(--glow) 8%, transparent), transparent 60%),
    var(--card);
  text-align: center;
}
.b-stage .halo img {
  width: min(320px, 70%);
  margin: 0 auto;
  border-radius: var(--r-m);
  transition: opacity 0.4s;
}
.b-stage .halo img.gs { filter: grayscale(1); border-radius: var(--photo-radius, 10px); aspect-ratio: 1; object-fit: cover; }
.b-summary {
  margin-top: 16px;
  border-radius: var(--r-m);
  padding: 22px 24px;
  background: var(--card);
}
.b-summary h4 {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint); font-weight: 500; margin-bottom: 12px;
}
.b-summary ul { list-style: none; }
.b-summary li {
  display: flex; justify-content: space-between; gap: 18px;
  font-size: var(--text); padding: 8px 0;
  border-top: 1px solid var(--hairline-soft);
}
.b-summary li:first-child { border-top: none; }
.b-summary li span:first-child { color: var(--faint); white-space: nowrap; }
.b-summary li span:last-child { text-align: right; }
.b-summary li.art span:last-child { color: var(--frost); font-weight: 500; }

.b-opts h1 { font-weight: 200; font-size: clamp(30px, 4vw, 44px); margin-bottom: 8px; line-height: 1.12; }
.b-opts > p.intro { color: var(--dim); margin-bottom: 38px; max-width: 46ch; font-size: calc(var(--text) + 2px); }
.b-group { margin-bottom: 42px; }
.b-group > h3 { font-size: var(--head); font-weight: 600; margin-bottom: 4px; }
.b-group > .hint { font-size: var(--text-sm); color: var(--faint); margin-bottom: 14px; }

/* ряд-опция: плоский, выбор — рамка + заливка */
.g-opt {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  border-radius: var(--r-m);
  padding: 16px 20px;
  margin-bottom: 9px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--card);
  border: 1px solid transparent; /* рамка — только при наведении и выборе */
  transition: border-color 0.25s, background 0.25s;
}
.g-opt:hover { border-color: var(--hairline); }
.g-opt.sel {
  border-color: var(--frost-line);
  background: rgba(207, 233, 248, 0.08);
  box-shadow: 0 0 0 1px var(--frost-line);
}
.g-opt .n { font-size: var(--text); font-weight: 500; display: block; }
.g-opt .d { font-size: var(--text-sm); color: var(--dim); display: block; margin-top: 3px; }
.g-opt .tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #071018; background: var(--frost-solid);
  border-radius: 5px; padding: 4px 10px; white-space: nowrap;
}

/* сегмент-контрол: выбранный — сплошная заливка */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-radius: var(--r-m);
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-soft);
  margin-bottom: 12px;
}
.seg button {
  font-family: var(--sans);
  font-size: var(--text);
  font-weight: 500;
  color: var(--dim);
  padding: 11px 8px;
  border: none;
  border-radius: var(--r-s);
  background: transparent;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s;
}
.seg button.sel { background: var(--frost-solid); color: #071018; font-weight: 600; }

/* свотчи (круглые — требование владельца) + подпись */
.b-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.b-sw {
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0;
  transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.b-sw:hover { transform: scale(1.12); }
.b-sw.sel { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--frost); }
.sw-caption {
  margin-top: 13px;
  min-height: 22px;
  font-size: 13.5px;
  color: var(--dim);
}
.sw-caption b { color: var(--ink); font-weight: 600; }

/* раскрывашка */
.b-exp {
  border-radius: var(--r-m);
  border: 1px dashed rgba(207, 233, 248, 0.3);
  padding: 16px 20px;
  margin-top: 12px;
}
.b-exp summary {
  list-style: none; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--frost);
  display: flex; align-items: center; gap: 10px;
}
.b-exp summary::-webkit-details-marker { display: none; }
.b-exp summary::before {
  content: "+";
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(207, 233, 248, 0.4);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: transform 0.3s var(--ease);
}
.b-exp[open] summary::before { content: "−"; }
.b-exp .body { margin-top: 16px; }
.b-exp .note { font-size: 12.5px; color: var(--faint); margin-top: 12px; }

input, textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-s);
  padding: 14px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.25s;
}
input:focus, textarea:focus { border-color: var(--frost-line); }
input::placeholder, textarea::placeholder { color: var(--faint); }
.mm-row { display: flex; align-items: center; gap: 12px; }
.mm-row span { font-size: 13px; color: var(--faint); white-space: nowrap; }

/* степпер */
.stepper {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-soft);
  overflow: hidden;
}
.stepper button {
  width: 52px; height: 48px;
  font-size: 21px;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.25s;
}
.stepper button:hover { background: rgba(255, 255, 255, 0.09); }
.stepper input {
  width: 68px;
  text-align: center;
  border: none; border-radius: 0;
  background: transparent;
  font-size: 17px; font-weight: 500;
  -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-inner-spin-button { display: none; }

/* форма заявки */
.lead-sheet {
  border-radius: 8px;
  padding: 28px;
  background: var(--card);
  display: grid;
  gap: 13px;
}
.lead-sheet .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.lead-sheet textarea { resize: vertical; min-height: 80px; }
.lead-sheet .check {
  display: flex; gap: 12px;
  font-size: 12.5px; color: var(--faint);
  cursor: pointer; line-height: 1.5; align-items: flex-start;
}
.lead-sheet .check input { width: auto; margin-top: 3px; accent-color: var(--frost); }
.lead-sheet .err { color: #f0b3b3; font-size: 13px; display: none; }
.lead-sheet .err.show { display: block; }
.ok-sheet {
  border-radius: 8px;
  padding: 46px 32px;
  text-align: center;
  background: rgba(207, 233, 248, 0.07);
  border: 1px solid var(--frost-line);
  display: none;
}
.ok-sheet.show { display: block; }
.ok-sheet h3 { font-weight: 200; font-size: 30px; margin-bottom: 12px; }
.ok-sheet p { color: var(--dim); max-width: 40ch; margin: 0 auto; }

/* ---------- калькулятор количества клапанов (конфигуратор) ---------- */
.kiv-calc { margin-top: 16px; }
.calc-disc {
  font-size: 12px; line-height: 1.5; color: var(--faint);
  border-left: 2px solid var(--frost-line);
  padding: 6px 0 6px 12px; margin-bottom: 16px;
}
.calc-rooms { display: grid; gap: 10px; }
.calc-room {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-m);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
}
/* название помещения — заголовок строки сверху */
.calc-room .cr-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.calc-room .cr-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.calc-room .cr-edit {
  background: transparent; border: none; cursor: pointer;
  color: var(--faint); font-size: 13px; padding: 2px 4px;
}
.calc-room .cr-edit:hover { color: var(--frost); }
.calc-room .cr-del {
  margin-left: auto;
  width: 28px; height: 28px; background: transparent;
  border: 1px solid var(--hairline-soft); border-radius: var(--r-s);
  color: #cf8d8d; font-size: 15px; cursor: pointer; line-height: 1;
}
.calc-room .cr-del:hover { border-color: #cf8d8d; }
.calc-room .cr-body {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.calc-room .cr-mode { padding: 9px 11px; font-size: 13.5px; flex: 0 0 auto; width: auto; }
.calc-room .cr-inputs { display: flex; align-items: center; gap: 8px; }
/* поле ввода с единицей измерения внутри (м / м²) — единица всегда видна */
.calc-room .cr-field {
  display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-s);
  padding-right: 10px;
}
.calc-room .cr-field input {
  width: 92px; padding: 9px 6px 9px 11px; font-size: 13.5px;
  background: transparent; border: none;
}
.calc-room .cr-field .cr-unit { font-size: 12.5px; color: var(--faint); }
.calc-room .cr-x { color: var(--faint); }
.calc-room .cr-out { font-size: 13px; color: var(--frost); white-space: nowrap; margin-left: auto; }
.calc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 16px; flex-wrap: wrap;
}
.calc-total { font-size: 16px; font-weight: 600; color: var(--ink); }
.calc-foot .btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 680px) {
  .calc-room .cr-body { gap: 8px; }
  .calc-room .cr-out { width: 100%; margin-left: 0; }
}

/* ---------- финал + футер ---------- */

.finale {
  text-align: center;
  padding: 20vh 24px;
  position: relative;
  overflow: hidden;
}
.finale .cone { top: auto; bottom: -50vh; opacity: 0.7; }
.finale h2 {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(16px, 2.4vw, 31px);
  line-height: 1.26;
}
.finale p { color: var(--dim); margin: 22px auto 36px; max-width: 44ch; }

footer {
  padding: 48px 32px 64px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 13px;
  color: var(--faint);
  max-width: 1200px;
  margin: 0 auto;
}
footer b { color: var(--dim); font-weight: 600; display: block; margin-bottom: 6px; }

/* ---------- появление ---------- */

.bloom {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px);
  transition: opacity var(--reveal-time, 600ms) var(--ease), transform var(--reveal-time, 600ms) var(--ease), filter var(--reveal-time, 600ms) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.bloom.on { opacity: 1; transform: none; filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .bloom { transition: none; opacity: 1; transform: none; filter: none; }
  .cone, .hero .stage, .particles i { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- адаптив ---------- */

@media (max-width: 1060px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .b-stage { position: static; }
  .chips, .series-teaser, .buy-grid { grid-template-columns: 1fr 1fr; }
  .tier-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  /* мобильная шапка: логотип + поиск/корзина/КУПИТЬ на 1-й строке,
     ВСЕ пункты меню переносятся отдельной строкой НИЖЕ.
     Порядок: логотип(0) · значки+кнопка(5) · ссылки(10, своя строка) */
  /* На мобильном пункты меню в строку не влезают — shared.js сам включает
     .compact и убирает их под «три полоски». Здесь только компактные размеры;
     переносов и order-хаков больше нет (была вторая строка с пунктами). */
  .island .i-row { padding: 8px 10px 8px 14px; }
  .island .logo { font-size: 16px; gap: 8px; }
  .island .logo .logo-ic { height: 34px; }
  .island .sbtn, .island .cart-btn { width: 38px; height: 38px; margin: 0 2px; }
  .island .sbtn svg { width: 17px; height: 17px; }
  .chips, .series-teaser, .tier-row, .buy-grid { grid-template-columns: 1fr; }
  .lead-sheet .duo { grid-template-columns: 1fr; }
  .scene { padding: 12vh 22px; }
  .rig { height: 380vh; }
  .buy-wrap { padding-top: 120px; }
  .builder { padding: 110px 22px 80px; }
}

:focus-visible { outline: 2px solid var(--frost); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   v3: цены, тайлы цветов с подписями, комплектующие, страницы
   компании, CMS
   ============================================================ */

/* строка выбранной серии в конфигураторе (вместо повторного выбора) */
.series-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--dim);
  margin-bottom: 30px;
  padding: 12px 16px;
  background: var(--card);
  border-radius: var(--r-m);
}
.series-line b { color: var(--ink); font-weight: 600; }
.series-line a { color: var(--frost); text-decoration: none; font-size: 13.5px; margin-left: auto; }
.series-line a:hover { text-decoration: underline; }

/* цены */
.o-price { font-size: var(--text); font-weight: 600; color: var(--ink); white-space: nowrap; }
.g-opt .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--hairline);
  margin-top: 10px; padding-top: 14px;
}
.total-row .t-label { font-size: 13px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.14em; }
.total-row .t-sum { font-size: 24px; font-weight: 600; color: var(--frost); }
.price-note { font-size: 11.5px; color: var(--faint); margin-top: 8px; }

/* круглые свотчи с постоянной подписью под кружком */
.sw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 18px 10px;
  margin-top: 16px;
}
.swl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
}
.swl .dot {
  display: block;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.swl:hover .dot { transform: scale(1.1); }
.swl.sel .dot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--frost); }
.swl .t-code {
  font-size: 11.5px; font-weight: 600;
  line-height: 1.3; text-align: center; display: block;
}
.swl .t-name {
  font-size: 10.5px; color: var(--faint);
  line-height: 1.3; text-align: center; display: block; margin-top: 2px;
}
.swl.sel .t-name { color: var(--dim); }

/* промо-плашка комплектующих */
.promo {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  border: 1px solid var(--frost-line);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(207, 233, 248, 0.09), var(--card) 62%);
  padding: 26px 30px;
  text-align: left;
}
.promo .ph {
  height: 160px;
  border-radius: var(--r-m);
  background: radial-gradient(ellipse at 50% 35%, rgba(205, 216, 235, .10), rgba(4, 6, 10, .24) 78%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.promo .ph img { max-height: 90%; max-width: 90%; object-fit: contain; }
.promo h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.25; }
.promo p { color: var(--dim); font-size: var(--text); margin-top: 10px; max-width: 52ch; }
.promo .from { margin-top: 12px; font-size: 17px; font-weight: 600; color: var(--frost); }
@media (max-width: 860px) {
  .promo { grid-template-columns: 1fr; }
  .promo .btn { justify-self: start; }
}

/* ---------- страница комплектующих ---------- */

.parts-wrap { max-width: 1200px; margin: 0 auto; padding: 150px 32px 60px; }
.parts-wrap h1 { font-weight: 200; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.12; text-align: center; }
.parts-wrap .lede { margin: 18px auto 0; color: var(--dim); max-width: 56ch; text-align: center; font-size: calc(var(--text) + 2px); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 36px; }
.cat-chips button {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  color: var(--dim);
  background: var(--card);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-s);
  padding: 10px 16px;
  cursor: pointer;
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.cat-chips button:hover { color: var(--ink); border-color: var(--hairline); }
.cat-chips button.sel { background: var(--frost-solid); color: #071018; font-weight: 600; border-color: transparent; }
.parts-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.p-card {
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.p-card .ph {
  height: 170px;
  background: radial-gradient(ellipse at 50% 35%, rgba(205, 216, 235, .10), rgba(4, 6, 10, .24) 78%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.p-card .ph img { width: 100%; height: 100%; object-fit: contain; }
.p-card .ph.none, .ph.none {
  background: repeating-linear-gradient(45deg, #0c1016 0 12px, #0e131a 12px 24px);
  color: var(--faint);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; line-height: 1.8;
}
/* превью цветов на карточке каталога */
.c-dots { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.c-dots i {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.c-dots span { font-size: 11px; color: var(--frost); margin-left: 4px; font-weight: 600; }
.p-card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.p-card h3 { font-size: var(--head); font-weight: 600; line-height: 1.35; }
.p-card p.desc { font-size: var(--text); color: var(--dim); margin-top: 8px; line-height: 1.55; flex: 1; }
.p-card .v-label { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.16em; margin-top: 14px; }
.p-card .v-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.p-card .v-chips button {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-s);
  padding: 7px 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.p-card .v-chips button.sel { background: var(--frost-solid); color: #071018; font-weight: 600; border-color: transparent; }
.p-card .p-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; gap: 10px;
}
.p-card .p-price { font-size: 19px; font-weight: 600; color: var(--frost); }
.p-card .btn { padding: 11px 18px; font-size: 13.5px; }

/* заявка на комплектующие */
.p-lead { max-width: 620px; margin: 60px auto 0; }
.p-lead h2 { font-weight: 200; font-size: clamp(26px, 3.4vw, 38px); text-align: center; margin-bottom: 8px; }
.p-lead .sel-item {
  font-size: 14px; color: var(--dim);
  text-align: center; margin-bottom: 22px;
}
.p-lead .sel-item b { color: var(--frost); font-weight: 600; }

/* ---------- страницы «О компании» / «Контакты» ---------- */

.page-wrap { max-width: 880px; margin: 0 auto; padding: 150px 32px 80px; }
.page-wrap h1 { font-weight: 200; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.12; }
.page-wrap .lede { margin-top: 16px; color: var(--dim); max-width: 58ch; font-size: calc(var(--text) + 2px); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.info-card {
  border-radius: 8px;
  background: var(--card);
  padding: 24px 26px;
}
.info-card.full { grid-column: 1 / -1; }
.info-card h3 { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); font-weight: 500; margin-bottom: 10px; }
.info-card .v { font-size: 18px; font-weight: 500; }
.info-card .v.big { font-size: 24px; font-weight: 200; }
.info-card p { font-size: var(--text); color: var(--dim); margin-top: 8px; line-height: 1.6; }
.info-card .todo { color: var(--faint); font-style: normal; font-size: 14.5px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.fact {
  border-radius: 8px;
  background: var(--card); padding: 22px 24px;
}
.fact b { font-size: 28px; font-weight: 200; display: block; }
.fact span { font-size: 13px; color: var(--dim); }

/* ---------- CMS (admin.html) ---------- */

.cms-wrap { max-width: 980px; margin: 0 auto; padding: 44px 28px 100px; }
.cms-wrap h1 { font-weight: 200; font-size: 34px; }
.cms-banner {
  margin-top: 14px;
  border: 1px solid rgba(255, 233, 196, 0.4);
  background: rgba(255, 233, 196, 0.07);
  border-radius: var(--r-m);
  padding: 14px 18px;
  font-size: 13.5px; color: var(--dim); line-height: 1.6;
}
.cms-banner b { color: var(--lamp); }
.cms-sec {
  margin-top: 34px;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--card);
  padding: 26px 28px;
}
.cms-sec h2 { font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.cms-sec .sub { font-size: 13px; color: var(--faint); margin-bottom: 18px; }
.cms-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 220px);
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--hairline-soft);
}
.cms-row:first-of-type { border-top: none; }
.cms-row label { font-size: 14px; color: var(--dim); }
.cms-row input, .cms-row textarea { padding: 10px 12px; font-size: 14px; }
.cms-row.wide { grid-template-columns: 1fr; }
.cms-actions {
  position: sticky; bottom: 0;
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 16px 0;
  background: linear-gradient(transparent, var(--bg) 30%);
  margin-top: 30px;
}
.cms-status { font-size: 13.5px; color: var(--frost); align-self: center; }

/* ---------- адаптив v3 ---------- */

@media (max-width: 900px) {
  .parts-grid { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .parts-grid { grid-template-columns: 1fr; }
  .island .logo { font-size: 13px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .cms-row { grid-template-columns: 1fr; }
}

/* ============================================================
   v5: корзина, футер-плашка с блюром, кнопка «вверх»,
   объявление, каталог групп, страница товара, 5 серий
   ============================================================ */

/* бейдж на иконке корзины */
.pill-badge {
  position: absolute; top: 2px; right: 0;
  background: #e8734a; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 999px; padding: 3px 5px;
}
.cart-btn { position: relative; text-decoration: none; }

/* кнопка «вверх» */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 46px; height: 46px;
  border-radius: var(--r-m);
  border: 1px solid var(--hairline);
  background: rgba(14, 18, 24, 0.6);
  color: var(--ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s, transform 0.35s var(--ease);
  transform: translateY(8px);
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { border-color: var(--frost-line); color: var(--frost); }

/* объявление */
.announce {
  position: fixed; top: 0; left: 0; right: 0; z-index: 65;
  background: var(--frost-solid); color: #071018;
  font-size: 13px; font-weight: 600; text-align: center;
  padding: 8px 16px;
}
.has-announce .island { top: 52px; }

/* ---------- футер-плашка с блюром ---------- */

.bigfoot { position: relative; margin-top: 80px; overflow: hidden; }
.bigfoot .bf-bg {
  position: absolute; inset: 0;
  background: var(--bf-img, none) center 30% / cover no-repeat;
  /* ч/б — только если включено в CMS; по умолчанию обои цветные */
  filter: grayscale(var(--bf-gray, 0)) blur(var(--bf-blur, 0px));
  transform: scale(1.06);
}
/* затемнение (сплошной темный слой) + виньетка по бокам — все из CMS */
.bigfoot .bf-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgb(0 0 0 / var(--bf-dim, 0.5)), rgb(0 0 0 / var(--bf-dim, 0.5))),
    linear-gradient(90deg, rgb(0 0 0 / var(--bf-vig, 0)) 0, transparent var(--bf-vig-w, 24%)),
    linear-gradient(-90deg, rgb(0 0 0 / var(--bf-vig, 0)) 0, transparent var(--bf-vig-w, 24%));
}
.bigfoot .bf-glass {
  position: relative;
  margin: clamp(10px, 2vw, 26px);
  border-radius: var(--r-l); /* углы как у остальных плашек */
  /* подвал — тем же светлым стеклом, что шапка и плашки */
  background: var(--glass-plaque);
  backdrop-filter: blur(var(--glass-blur, 15px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur, 15px)) saturate(1.3);
  padding: clamp(24px, 3.2vw, 42px);
}
.bf-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: clamp(22px, 3vw, 44px);
}
.bf-logo { font-weight: 700; font-size: 20px; letter-spacing: 0.03em; }
.bf-line { margin-top: 12px; font-size: var(--text-sm); color: var(--dim); line-height: 1.6; max-width: 34ch; }
.bf-soc { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.bf-soc .soc {
  font-size: 12.5px; font-weight: 600;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r-s);
  padding: 8px 14px;
  transition: border-color 0.25s, color 0.25s;
}
/* при наведении светлеет, а не обводится цветом: обводка выбивалась из
   поведения всех остальных кнопок сайта (замечание владельца) */
.bf-soc .soc:hover { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.bf-col { display: grid; gap: 9px; align-content: start; font-size: var(--text); }
.bf-col p {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; margin-bottom: 4px;
}
.bf-col a { color: var(--dim); text-decoration: none; transition: color 0.2s; }
.bf-col a:hover { color: var(--ink); }
.bf-col span { color: var(--dim); }
.bf-strong { color: var(--ink) !important; font-weight: 600; }
.bf-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--hairline-soft);
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: 18px;
  font-size: 12px; color: var(--faint);
}

/* ---------- каталог групп ---------- */

.buy-grid.five { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* кнопки карточки комплектующих — слева, естественной ширины (как везде) */
.p-card .p-actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-start; }
.p-card .p-actions .btn { flex: 0 0 auto; padding: 11px 16px; font-size: 13.5px; }

/* ---------- страница товара: «подробнее» ---------- */

.part-about {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px 70px;
}
.part-about .panel-about {
  border-radius: 8px;
  background: var(--card);
  padding: clamp(24px, 3.5vw, 44px);
}
.part-about h2 { font-weight: 300; font-size: clamp(24px, 3vw, 34px); margin-bottom: 16px; }
.part-about p { color: var(--dim); max-width: 72ch; line-height: 1.7; margin-top: 12px; }

/* ---------- корзина ---------- */

.cart-wrap { max-width: 880px; margin: 0 auto; padding: 140px 28px 70px; }
.cart-wrap h1 { font-weight: 200; font-size: clamp(30px, 4.4vw, 50px); }
.cart-empty {
  border: 1px dashed var(--hairline);
  border-radius: var(--r-m);
  padding: 44px 30px;
  text-align: center;
  color: var(--dim);
  margin-top: 30px;
}
.cart-list { margin-top: 30px; display: grid; gap: 10px; }
.cart-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 14px; align-items: center;
  border-radius: var(--r-m);
  background: var(--card);
  padding: 14px 18px;
}
.cart-row .c-label { font-size: 14px; line-height: 1.5; }
.cart-row { grid-template-columns: 56px 1fr auto auto auto; grid-template-areas: "thumb label stepper price del"; }
.cart-row > .c-thumb, .cart-row > .c-thumb-link { grid-area: thumb; }
.cart-row .c-label { grid-area: label; }
.cart-row .stepper { grid-area: stepper; }
.cart-row .c-price { grid-area: price; }
.cart-row .c-del { grid-area: del; }
.cart-row .c-thumb { display: block; width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-s); background: rgba(255,255,255,.04); }
.cart-row .c-label a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline-soft); }
.cart-row .c-label a:hover { color: var(--frost); border-color: var(--frost-line); }
.cart-row .c-code { display: block; margin-top: 3px; font-size: 12px; color: var(--faint); letter-spacing: .02em; }
.cart-tools { display: flex; justify-content: flex-end; margin-top: 10px; }
.cart-clear { background: none; border: 0; padding: 4px 0; color: var(--faint); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cart-clear:hover { color: #cf8d8d; }
/* заметная плашка: тот же оранжевый, что у счетчика корзины */
.cart-offer {
  margin-top: 12px; padding: 12px 16px;
  border-left: 3px solid #e8734a; border-radius: var(--r-m);
  background: rgba(232, 115, 74, .12);
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.cart-offer b { color: #f2a07f; font-weight: 600; }
.cart-row .c-price { font-weight: 600; white-space: nowrap; }
.cart-row .stepper { transform: scale(0.9); }
.cart-row .c-del {
  width: 34px; height: 34px;
  border: 1px solid var(--hairline-soft); border-radius: var(--r-s);
  background: transparent; color: #cf8d8d; font-size: 16px; cursor: pointer;
}
.cart-row .c-del:hover { border-color: #cf8d8d; }
.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 20px; padding: 16px 18px;
  border: 1px solid var(--frost-line); border-radius: var(--r-m);
  background: rgba(207, 233, 248, 0.06);
}
.cart-total b { font-size: 24px; color: var(--frost); }
.cart-form { margin-top: 34px; }
.cart-form h2 { font-weight: 300; font-size: 26px; margin-bottom: 16px; }

/* кнопки товара: в корзину / к оформлению */
.buy-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.buy-actions .btn { flex: 1; min-width: 170px; }
.added-note { font-size: 13px; color: #7dc98f; margin-top: 10px; min-height: 18px; }

@media (max-width: 1080px) { .bf-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .bf-top { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 48px 1fr auto; grid-template-areas: "thumb label del" "stepper stepper price"; gap: 10px 12px; padding: 12px 14px; }
  .cart-row .c-thumb { width: 48px; height: 48px; }
  .cart-row .stepper { justify-self: start; transform: scale(.85); transform-origin: left center; }
  .cart-row > .c-thumb, .cart-row > .c-thumb-link, .cart-row .c-del { align-self: start; }
}

/* ============================================================
   v6: help-поповеры, страница описания товара, иконки соцсетей,
   отключение анимаций из CMS
   ============================================================ */

.help-btn {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--faint);
  font-size: 12px; font-weight: 700; line-height: 1;
  cursor: pointer;
  vertical-align: 2px;
  margin-left: 8px;
  transition: color 0.2s, border-color 0.2s;
}
.help-btn:hover { color: var(--frost); border-color: var(--frost-line); }
.b-group { position: relative; }
.help-pop {
  position: absolute;
  z-index: 30;
  top: 34px; left: 0;
  width: min(360px, 92%);
  background: #10161e;
  border: 1px solid var(--frost-line);
  border-radius: var(--r-m);
  padding: 16px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.help-pop p { font-size: 13.5px; color: var(--dim); line-height: 1.6; }
.help-pop a {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--frost); text-decoration: none;
}
.help-pop a:hover { text-decoration: underline; }

/* страница описания товара */
.info-wrap { max-width: 980px; margin: 0 auto; padding: 150px 32px 70px; }
.info-hero {
  display: grid;
  grid-template-columns: minmax(220px, 380px) 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.info-hero .ph {
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, rgba(205, 216, 235, .10), rgba(4, 6, 10, .24) 78%);
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.info-hero .ph img { width: 100%; height: 320px; object-fit: contain; }
.info-hero h1 { font-weight: 200; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.12; }
.info-hero .lede { margin-top: 14px; color: var(--dim); font-size: calc(var(--text) + 2px); }
.info-hero .btn { margin-top: 24px; }
.info-body { margin-top: 44px; }
.info-body p { color: var(--dim); line-height: 1.75; max-width: 74ch; margin-top: 14px; font-size: 16px; }
.info-types { margin-top: 40px; display: grid; gap: 10px; }
.info-types .t-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  border-radius: var(--r-m);
  background: var(--card);
  padding: 14px 18px;
  font-size: 14.5px;
}
.info-types .t-row { font-size: var(--text); }
.info-types .t-row b { font-weight: 600; }
.info-types .t-row span { color: var(--frost); font-weight: 600; white-space: nowrap; }
@media (max-width: 720px) { .info-hero { grid-template-columns: 1fr; } }

/* иконки соцсетей */
.bf-soc .soc { display: inline-flex; align-items: center; gap: 8px; }
.bf-soc .soc svg { flex: none; }

/* анимации из CMS */
body.anim-off .cone, body.anim-off .particles i, body.anim-off .hero .stage,
body.anim-off .ticker .belt { animation: none !important; }
body.anim-off .bloom { transition: none; opacity: 1; transform: none; filter: none; }
body.anim-slow .bloom { transition-duration: var(--reveal-time, 3000ms); }

/* v7: компактные соцсети внизу футера, карты складов */
.bf-soc-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: clamp(20px, 3vw, 32px);
}
.bf-soc-row .soc { padding: 7px 12px; font-size: 12px; gap: 6px; }
.map-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 40px;
}
.map-card {
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.map-card h3 {
  font-size: 15px; font-weight: 600;
  padding: 16px 20px 4px;
}
.map-card .m-addr { font-size: 13px; color: var(--dim); padding: 0 20px 14px; }
.map-card .m-frame { position: relative; }
.map-card .m-frame iframe { display: block; width: 100%; height: 260px; border: 0; }
.map-card .m-map { width: 100%; height: 260px; }
.map-card .m-map .m-fallback {
  padding: 20px; font-size: 13px; color: var(--dim); text-align: center;
}
.map-card .m-open {
  display: block;
  font-size: 12.5px; color: var(--frost);
  text-decoration: none;
  padding: 10px 20px 14px;
}
.map-card .m-open:hover { text-decoration: underline; }
@media (max-width: 760px) { .map-grid { grid-template-columns: 1fr; } }

/* ---------- v8: фоновая картинка-текстура на всю страницу (CMS) ---------- */

.page-bg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--page-bg) center / cover no-repeat;
  filter: blur(var(--page-blur, 0px));
  transform: scale(1.08); /* прячем размытые края */
}
.page-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: rgb(0 0 0 / var(--page-dim, 0));
}

/* ---------- v9: 3D-hero — скролл-разлет клапана ----------
   Классы hero3d-on / hero3d-ready ставит hero3d.js только когда сцена
   готова; без них hero остается обычным экраном с фото (постер). */

/* +фаза фото в начале: добавили ~16% прокрутки, чтобы разлет не сжался */
.hero3d-on .hero-scroll { height: 350svh; }
.hero3d-on.hero-photo .hero-scroll { height: 405svh; }
.hero3d-on .hero {
  position: sticky; top: 0;
  height: 100svh; min-height: 0;
  /* заголовок сверху, кнопки снизу, между ними — зона 3D-модели (без наложений) */
  justify-content: space-between;
  padding: 92px 24px 4vh;
}
/* сцена — подложка на весь hero; заголовок над ней, кнопки под ней */
.hero3d-on .hero .stage {
  position: absolute; inset: 0;
  width: auto; margin: 0;
  animation: none;
  display: flex; align-items: center; justify-content: center;
}
/* верхний край: мягко гасит верхний конец цепочки. Низ отдан .h3d-scrim (размытие) */
.hero3d-on .hero .stage::after {
  content: ""; display: block;
  /* Сбрасываем ВСЕ от базового .hero .stage::after (эллиптическая тень под фото):
     height — иначе слой схлопывается в полоску сверху; border-radius/filter —
     иначе затемнение рисуется гигантским размытым эллипсом (темная «дуга»). */
  position: absolute; inset: 0; height: auto; z-index: 1; pointer-events: none;
  border-radius: 0; filter: none;
  background: linear-gradient(to bottom,
    rgb(4 6 10 / var(--h3d-top-dim, 0.5)) 0%,
    rgb(4 6 10 / calc(var(--h3d-top-dim, 0.5) * 0.44)) 15%,
    transparent var(--h3d-top-h, 32%));
}

/* ---------- НИЖНИЙ СКРИМ ПЕРВОГО ЭКРАНА: размытие вместо затемнения ----------
   Раньше низ кадра заливался почти черным до 54% высоты — «съедало» пол-экрана
   и портило вид (замечание владельца). Теперь низ РАЗМЫВАЕТСЯ: концы цепочки и
   фон уходят в нерезкость, кнопки и заголовок читаются, кадр остается светлым.

   Четыре слоя с нарастающим размытием и ступенчатыми масками дают прогрессивный
   блюр: у нижнего края — полная сила, к верху сходит на нет так же плавно, как
   раньше рассеивалось затемнение (без видимой границы «где начался блюр»).

   Ручки в CMS → Внешний вид → «Размытие низа первого экрана»:
     --h3d-scrim-h     высота слоя (% высоты экрана)
     --h3d-scrim-soft  мягкость края (0 — резкая граница, 1 — максимально рассеян)
     --h3d-scrim-blur  сила размытия у нижнего края, px
     --h3d-scrim-dim   доля затемнения у нижнего края (0 — совсем не затемнять) */
.h3d-scrim { display: none; }
.hero3d-on .h3d-scrim {
  display: block;
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--h3d-scrim-h, 46%);
  z-index: 1; pointer-events: none;
  /* граница «полной силы»: чем мягче край, тем короче плотное ядро */
  --core: calc(100% * (1 - var(--h3d-scrim-soft, 0.8)));
  --b: var(--h3d-scrim-blur, 16px);
}
.hero3d-on .h3d-scrim i { position: absolute; inset: 0; display: block; }
/* слои снизу вверх: сумма размытий = --b, каждый следующий обрывается раньше */
.hero3d-on .h3d-scrim i:nth-child(1) {
  backdrop-filter: blur(calc(var(--b) * 0.07));
  -webkit-backdrop-filter: blur(calc(var(--b) * 0.07));
  mask-image: linear-gradient(to top, #000 0, #000 var(--core), transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 var(--core), transparent 100%);
}
.hero3d-on .h3d-scrim i:nth-child(2) {
  backdrop-filter: blur(calc(var(--b) * 0.13));
  -webkit-backdrop-filter: blur(calc(var(--b) * 0.13));
  mask-image: linear-gradient(to top, #000 0, #000 calc(var(--core) * 0.72), transparent 78%);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 calc(var(--core) * 0.72), transparent 78%);
}
.hero3d-on .h3d-scrim i:nth-child(3) {
  backdrop-filter: blur(calc(var(--b) * 0.27));
  -webkit-backdrop-filter: blur(calc(var(--b) * 0.27));
  mask-image: linear-gradient(to top, #000 0, #000 calc(var(--core) * 0.44), transparent 54%);
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 calc(var(--core) * 0.44), transparent 54%);
}
.hero3d-on .h3d-scrim i:nth-child(4) {
  backdrop-filter: blur(calc(var(--b) * 0.53));
  -webkit-backdrop-filter: blur(calc(var(--b) * 0.53));
  mask-image: linear-gradient(to top, #000 0, transparent 30%);
  -webkit-mask-image: linear-gradient(to top, #000 0, transparent 30%);
}
/* легкое затемнение поверх размытия — та же рассеянность, отдельная ручка */
.hero3d-on .h3d-scrim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgb(4 6 10 / var(--h3d-scrim-dim, 0.34)) 0%,
    rgb(4 6 10 / calc(var(--h3d-scrim-dim, 0.34) * 0.4)) 40%,
    transparent 100%);
}
/* конус света гаснет, пока показывается фото (иначе подсвечивает снимок) */
.hero3d-on .hero .cone { opacity: var(--cone-op, 1); }
/* заголовок поверх фото: собственная тень вместо затемнения всего кадра */
.hero3d-on .hero h1 { text-shadow: 0 2px 26px rgba(4, 6, 10, 0.75), 0 1px 5px rgba(4, 6, 10, 0.5); }
.hero3d-on .hero > :not(.stage) { position: relative; z-index: 2; }
/* Отдельной радиальной подложки под кнопками НЕТ: поверх фото она читалась
   как темная клякса. Контраст кнопкам дает общий нижний скрим .stage::after. */
.hero3d-on .hero .cta-row { position: relative; }
/* декор (конус света, частицы) — вне потока, иначе толкают заголовок вниз */
.hero3d-on .hero .cone,
.hero3d-on .hero .particles { position: absolute; z-index: 0; }
/* заголовок сверху, крупный (hero-scale не применяем — своя шкала);
   чуть опущен от шапки. Кнопки — снизу (space-between). Первый экран:
   заголовок + модель + кнопки, все влезает без каши */
/* заголовок опущен ПОД корпус (к цепочке) — чтобы не перекрывал оголовок:
   margin-top:auto прижимает его к низу, прямо над кнопками */
.hero3d-on .hero h1 {
  font-size: clamp(19px, 2.9vw, 38px);
  line-height: 1.14;
  margin-top: auto;
  margin-bottom: 2.6vh;
}
/* подзаголовок и характеристики в 3D-режиме прячем — чтобы первый экран не
   превращался в кашу; главное на нем: заголовок, клапан, кнопки */
.hero3d-on .hero .sub,
.hero3d-on .hero .quiet-specs { display: none; }
.hero3d-on .hero .cta-row { margin: 0; }
@media (max-width: 680px) {
  /* мобильная шапка занимает 2 ряда — отступ под нее, иначе она перекрывает
     заголовок; кнопки не у самого низа — ближе к модели */
  .hero3d-on .hero { padding-top: 178px; padding-bottom: 13vh; }
  /* узкий экран: заголовок мельче и с большей межстрочкой (Onder широкий,
     переносится в 3 строки — иначе строки наезжают) */
  .hero3d-on .hero h1 { font-size: clamp(14px, 4.4vw, 20px); line-height: 1.32; }
}
.hero .stage canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  opacity: 0; transition: opacity 0.8s;
}
.hero3d-ready .hero .stage canvas { opacity: 1; }
/* ФОТО-ЗАСТАВКА первого экрана: интерьерное фото, из которого при скролле
   плавно проявляется 3D-рендер. Размер/позицию/прозрачность ведет hero3d.js —
   оголовок на фото и в рендере совпадает по размеру и месту в кадре.
   Сбрасываем все оформление постера (круг, ЧБ, тень) — тут фото во всю сцену. */
.hero3d-on .hero .stage img {
  position: absolute;
  top: 0; left: 0;
  width: auto; height: auto; max-width: none;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: fill;
  filter: none;
  box-shadow: none;
  animation: none;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
/* До загрузки 3D (класс hero-early ставит index.html) фото уже во весь экран:
   то же кадрирование cover, что потом задает hero3d.js, — без скачка. */
.hero-early .hero .stage img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 51.8% 0;
}
/* прозрачностью фото и канваса управляет скролл — CSS-переход только мешал бы */
.hero-photo .hero .stage canvas { transition: none; }
/* темная вуаль ПОД фото: гасит фон страницы, пока показывается фото —
   снимок «висит в темноте» (кинозал). Прозрачность ведет скролл (--photo-veil) */
.hero-photo .hero .stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: rgba(4, 6, 10, 0.94);
  opacity: var(--photo-veil, 0);
  pointer-events: none;
}
/* маску фото (стягивание к оголовку при переходе) задает hero3d.js покадрово */
/* плашки деталей: одна за раз. Якорь .h3d-lab — на самой детали (кружок),
   текст .lab-box висит над деталью, соединен линией-указателем */
.h3d-labels { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.h3d-lab {
  position: absolute; left: 0; top: 0;
  opacity: 0;
  transition: opacity 0.18s;
}
/* линия-указатель от детали вверх к тексту (длинная — плашка не касается модели) */
.h3d-lab::before {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 1.5px; height: 150px;
  transform: translate(-50%, -9px);
  background: linear-gradient(var(--frost-line), transparent);
}
/* кружок ровно на детали */
.h3d-lab::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--frost);
  background: rgba(207, 233, 248, 0.25);
  box-shadow: 0 0 10px var(--frost-line);
}
.h3d-lab .lab-box {
  position: absolute; left: 0; bottom: 158px;
  transform: translateX(-50%);
  background: rgba(10, 13, 18, 0.85);
  border: 1px solid var(--frost-line);
  border-radius: var(--r-s);
  padding: 9px 15px;
  font-size: 13px; line-height: 1.35;
  white-space: nowrap; text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.h3d-lab .lab-box b { display: block; font-weight: 600; }
.h3d-lab .lab-box span { display: block; color: var(--dim); font-size: 11.5px; }
@media (max-width: 680px) {
  .h3d-lab .lab-box { font-size: 12px; padding: 7px 12px; bottom: 118px; }
  .h3d-lab::before { height: 110px; }
}

/* Compact product photographs on the shared dark product stage. */
.b-stage .halo.has-kit-preview { padding: 0; overflow: hidden; border: 1px solid var(--hairline); }
.kit-preview { --kit-photo-size: clamp(112px, 12vw, 160px); padding: 16px; color: var(--ink); text-align: left; }
.kit-preview[hidden] { display: none; }
.kit-preview figure { margin: 0; min-width: 0; }
.b-stage .kit-preview img { display: block; width: min(100%, var(--kit-photo-size)); height: var(--kit-photo-size); margin: 0 auto 8px; border-radius: 0; object-fit: contain; transition: opacity .15s; }
.b-stage .halo img[hidden], .product-photo img[hidden] { display: none; }
.b-stage .kit-preview img[aria-busy="true"], .product-photo img[aria-busy="true"] { opacity: 0; }
.b-stage .kit-head img { height: auto; width: var(--kit-photo-size); padding: calc(var(--kit-photo-size) * .07); box-sizing: border-box; filter: drop-shadow(0 8px 12px rgba(0,0,0,.18)); }
.kit-preview figcaption { display: grid; gap: 5px; text-align: center; font-size: 12px; line-height: 1.5; }
.kit-preview figcaption b { font-weight: 600; }
.kit-preview figcaption span { color: var(--dim); }
.kit-components { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.kit-photo-note { font-size: 10px; line-height: 1.6; color: var(--dim); text-align: center; margin: 14px 0 0; }
.b-stage .halo.product-photo { padding: 24px; border: 1px solid var(--hairline); }
.b-stage .halo.product-photo img { display: block; width: 100%; height: 330px; border-radius: 0; object-fit: contain; }
.product-photo-note { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--dim); text-align: center; }
.b-card .ph.series-photo { height: 280px; padding: 18px 24px; }
.b-card .ph.series-photo img { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,.18)); }
.b-card[data-series="era"] .series-photo img, .b-card[data-series="pka"] .series-photo img { transform: scale(.82); }
@media (max-width: 700px) {
  .kit-preview { padding: 14px; }
  .kit-components { gap: 16px; }
  .kit-preview figcaption { font-size: 11px; }
  .b-stage .halo.product-photo img { height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .b-stage .kit-preview img { transition: none; } }

/* The same dark product stage on the series cards, catalog and configurators. */
.b-card .ph, .p-card .ph:not(.none), .promo .ph,
.info-hero .ph:not(.none), .b-stage .halo, .a-figure:has(> img) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(90% 90% at 50% 15%, #10161e 0%, #070a0f 100%);
}
.b-card .ph::before, .p-card .ph:not(.none)::before, .promo .ph::before,
.info-hero .ph:not(.none)::before, .b-stage .halo::before, .a-figure:has(> img)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%; left: 50%;
  transform: translateX(-50%);
  width: 120%; aspect-ratio: 1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 12%, transparent), transparent 70%);
  pointer-events: none;
}
/* A light veil links real documents without changing focus, scroll or layout.
   The owner explicitly requested this motion; CMS "off" still disables it. */
html.page-motion::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 2147483000;
  background: #04060a;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--page-enter-time, 75ms) cubic-bezier(.22,.61,.36,1);
}
html.page-opening::after { opacity: 1; transition: none; }
html.page-leaving::after {
  opacity: 1;
  pointer-events: auto;
  transition-duration: var(--page-leave-time, 30ms);
  transition-timing-function: cubic-bezier(.4,0,.6,1);
}
html.page-motion-off::after { display: none; }
.b-card, .p-card { transition: transform .325s var(--ease), border-color .25s var(--ease); }
.b-stage .halo img, .b-stage .kit-preview img { transition: opacity var(--photo-fade-time, 160ms) var(--ease); }

/* Keep every phone intact, including in the shared footer. */
.phone-list { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.contact-phone { display: block; white-space: nowrap; color: inherit; text-decoration: none; }
a.contact-phone:hover { color: var(--frost); }
@media (max-width: 680px) {
  .info-card #cPhone { font-size: clamp(16px, 5vw, 24px); }
}

.island .s-res { background: rgba(4, 6, 10, .72); border-radius: var(--r-s); max-height: min(65vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.island .s-res a span, .island .s-res a small { display: block; }
.island .s-res a small { margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--faint); }

/* Air stays registered to the photograph, behind copy and controls. */
.hero .stage .hero-breath { position: absolute; inset: 0 0 auto; contain: paint; z-index: 2; pointer-events: none; overflow: hidden; }
.hero .stage .hero-breath[hidden] { display: none; }
.hero .stage .hero-breath canvas { display: block; opacity: 1; transition: none; }

/* Clip the glass backdrop to its rounded surface while the hero repaints. */
.hero-photo .island { overflow: hidden; isolation: isolate; }

/* Подсказка «Листайте» внизу первого экрана: команда не догадывалась, что
   главную можно прокручивать. Прячется, как только страницу сдвинули. */
.hero > .scroll-hint, .hero3d-on .hero > .scroll-hint {
  position: absolute; left: 50%; bottom: max(10px, 1.6vh); z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 6px 14px; border: 0; background: none; cursor: pointer;
  color: rgba(232, 240, 248, .82); font: inherit; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(4, 6, 10, .6);
  transition: opacity .35s ease, visibility .35s;
}
/* место под подсказку: кнопки первого экрана поднимаются на ее высоту */
@media (min-width: 681px) {
  .hero { padding-bottom: max(9vh, 86px); }
  .hero3d-on .hero { padding-bottom: calc(max(10px, 1.6vh) + 66px); }
}
.scroll-hint svg { animation: scroll-hint-bob 1.8s ease-in-out infinite; filter: drop-shadow(0 1px 6px rgba(4,6,10,.6)); }
.scroll-hint.gone { opacity: 0; visibility: hidden; }
@keyframes scroll-hint-bob { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-hint svg { animation: none; } }
body.anim-off .scroll-hint svg { animation: none; }

/* Полоса деталей комплекта под шапкой (config.js → initKitDock): только в
   одноколоночной раскладке, когда фото комплекта ушло вверх. Стекло — как у
   шапки; детали на светлых плашках, чтобы черная труба и темные решетки не
   терялись на темном фоне. */
.kit-dock {
  position: fixed; left: 50%; z-index: 55;
  width: min(1140px, calc(100vw - 36px));
  padding: 10px 10px 9px; border-radius: var(--r-l);
  /* тот же светлый тон, что у стекла шапки, но на плотной основе: содержимое
     страницы под полосой не просвечивает */
  background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)), rgba(18, 21, 28, .9);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(var(--glass-blur, 15px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur, 15px)) saturate(1.3);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .45);
  transform: translate(-50%, -10px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.kit-dock.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.kd-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kd-parts figure { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.kd-parts figure[hidden] { display: none; }
.kd-tile {
  width: 100%; max-width: 104px; aspect-ratio: 1;
  display: grid; place-items: center; padding: 7px; box-sizing: border-box;
  border-radius: 12px; background: linear-gradient(160deg, #eef1f4, #d6dce2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.kd-tile img { width: 100%; height: 100%; object-fit: contain; }
.kd-parts figcaption {
  width: 100%; text-align: center; font-size: 11px; line-height: 1.25; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kd-info {
  margin: 8px 0 0; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12px; line-height: 1.4; text-align: center; color: var(--ink);
}
.kd-info b { color: var(--frost); font-weight: 600; }
/* вариант полосы для одной позиции (страница комплектующей) */
.kd-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; }
.kd-row .kd-tile { max-width: 84px; }
.kd-text { display: grid; gap: 4px; min-width: 0; }
.kd-name { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kd-meta { font-size: 12px; line-height: 1.35; color: var(--dim); }
.kd-meta b { color: var(--frost); font-weight: 600; }
@media (min-width: 1061px) { .kit-dock { display: none; } }