/* ═══════════════════════════════════════════════════════════════
   ekinex.ru - дизайн-система
   Белая бумага, чёрная шапка, один голубой акцент #009DE0.
   Сетка своя (Grid/Flex), каркасов нет. Кривая одна на весь сайт.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper: #fbfbfa;
  --ink: #101114;
  --mute: #6c7076;
  --warn: #9a3412;      /* пометка «снимается с производства» */
  --line: #e7e7e4;
  --line-soft: #f0f0ed;
  --black: #0c0d0e;
  --black-soft: #141517;
  --chalk: #f4f4f2;
  --chalk-mute: #9ea1a6;
  --accent: #009de0;
  --accent-deep: #0079ad;
  /* акцент на тёмном фоне: на чёрном #009de0 читается тускло */
  --accent-light: #7ecdf0;
  --accent-pale: #cfe9f7;
  --sans: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shell: 1360px;
  --px: clamp(20px, 4vw, 64px);
  --header-h: 64px;
}

/* ── шкала кеглей: ступени вместо россыпи близких значений ──
   Замер по рендеру 30.08.2026 нашёл в диапазоне 11-18px одиннадцать
   разных кеглей. Ступени ниже покрывают все роли мелкого текста;
   новое правило берёт ступень, а не пишет своё число. */
:root {
  --t-micro: 11px;
  --t-meta: 12px;
  --t-caption: 13px;
  --t-small: 14px;
  --t-secondary: 15px;
  --t-medium: 16px;
  --t-body: 17px;
  --t-large: 18px;
  --t-xl: 20px;
  --t-2xl: 24px;
}

/* ── шкала заголовков: три ступени на все страницы ──
   --t-hero - шапка с фотографией во весь экран,
   --t-title - заголовок страницы без фотографии (тёмная плашка,
   каталог, форма заявки: роль одна, и кегль теперь тоже),
   --t-section - заголовок крупного раздела внутри страницы. */
:root {
  --t-hero: clamp(40px, 6.4vw, 92px);
  --t-title: clamp(34px, 4.9vw, 72px);
  --t-section: clamp(27px, 3.4vw, 46px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-h);
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; padding: 0; }

.shell {
  max-width: var(--shell); margin-inline: auto; padding-inline: var(--px);
}

/* ── типографика ─────────────────────────────────────────────── */
.display {
  font-size: clamp(38px, 5.6vw, 78px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.h2 {
  font-size: clamp(27px, 3.4vw, 46px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.h3 {
  font-size: clamp(20px, 2vw, 25px); font-weight: 500; line-height: 1.3;
}
.lede {
  font-size: clamp(17px, 1.5vw, 20px); color: var(--mute); max-width: 56ch;
}
.kicker {
  font-size: var(--t-meta); font-weight: 600;
  letter-spacing: 0.18em; text-transform: none;
  color: var(--accent-deep);   /* #009de0 на светлом давал контраст 2,94 (ревью 25.09.2026) */
}
.foot-label {
  /* подпись колонки подвала */
  font-size: var(--t-meta); letter-spacing: 0.14em; margin-top: 0;
}
.h1-page {
  /* заголовок страницы каталога: мельче главного экрана, крупнее раздела */
  font-size: var(--t-title); font-weight: 300;
  line-height: 1.1; letter-spacing: -0.012em;
}
.art {
  /* артикул, код отделки */
  font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.1em; color: var(--mute);
}

/* ── шапка ───────────────────────────────────────────────────── */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  background: var(--black);
  display: flex; align-items: center; gap: clamp(20px, 3vw, 48px);
  padding-inline: var(--px);
}
.top .brand {
  display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none;
}
.top .brand img {
  height: 26px; width: auto; flex: none;
  transition: transform 0.45s var(--ease);
}
.top .brand .mark {
  position: relative; display: inline-flex;
}
.top .brand:hover img {
  transform: scale(1.05);
}
.top .brand .shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask-image: url(/static/img/logo-ekinex-white.svg);
  -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  mask-image: url(/static/img/logo-ekinex-white.svg);
  mask-size: contain; mask-repeat: no-repeat; mask-position: center;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.95) 48%, var(--accent) 52%, transparent 68%);
  background-size: 240% 100%; background-position: -130% 0;
}
.top .brand:hover .shine {
  animation: brand-shine 0.9s cubic-bezier(0.16,1,0.3,1);
}
@keyframes brand-shine {
  0% { background-position: -130% 0; opacity: 1; }
  100% { background-position: 130% 0; opacity: 0; }
}
.top .brand .ru {
  font-size: var(--t-meta); font-weight: 500; letter-spacing: 0.14em;
  color: var(--chalk-mute); white-space: nowrap;
  border-left: 1px solid rgba(255,255,255,0.18); padding-left: 14px;
}
nav.primary { display: flex; gap: clamp(18px, 2.4vw, 38px); margin-left: auto; }
nav.primary > a, nav.primary > button {
  position: relative;
  font-size: var(--t-secondary); font-weight: 400; color: var(--chalk);
  text-decoration: none; padding: 20px 0;
  transition: color 0.3s var(--ease);
}
nav.primary > a::after, nav.primary > button::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 14px;
  height: 1px; background: var(--accent);
  transition: right 0.45s var(--ease);
}
nav.primary > a:hover::after, nav.primary > button:hover::after,
nav.primary > button[aria-expanded="true"]::after { right: 0; }
nav.primary > a:hover, nav.primary > button:hover,
nav.primary > button[aria-expanded="true"] { color: #fff; }

/* ── мега-меню: чёрное продолжение шапки ─────────────────────── */
.mega {
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 49;
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0s linear 0.32s;
}
.mega.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.mega {
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.mega-inner {
  max-width: var(--shell); margin-inline: auto; padding: clamp(28px, 3.4vw, 48px) var(--px);
  display: grid; grid-template-columns: 1fr 1fr minmax(280px, 380px);
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.mega h4 {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chalk-mute); margin-bottom: 16px;
}
.mega h4 a { color: var(--chalk-mute); text-decoration: none;
             transition: color 0.25s var(--ease); }
.mega h4 a:hover { color: #fff; }
.mega-col { border-left: 1px solid rgba(255,255,255,0.07);
            padding-left: clamp(20px, 2.4vw, 40px); }
.mega-col:first-child { border-left: 0; padding-left: 0; }
.mega ul {
  display: grid; gap: 4px;
}
.mega ul a {
  display: inline-block;
  font-size: var(--t-small); font-weight: 400; color: var(--chalk-mute);
  text-decoration: none; padding: 4px 0; line-height: 1.5;
  transition: color 0.25s var(--ease), transform 0.35s var(--ease);
}
.mega ul a:hover {
  color: #fff; transform: translateX(6px);
  color: #fff;
}
.mega ul a .note {
  font-size: var(--t-meta); color: var(--chalk-mute); margin-left: 10px;
}
.mega-preview {
  flex: 0 0 clamp(220px, 20vw, 300px);
  border-left: 1px solid rgba(255,255,255,0.08); padding-left: clamp(24px, 3vw, 48px);
}
.mega-preview .frame {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: var(--black-soft); overflow: hidden;
}
.mega-preview img {
  max-width: 78%; max-height: 78%; width: auto; object-fit: contain;
  transition: opacity 0.3s var(--ease);
}
.mega-preview figcaption {
  font-size: var(--t-caption); color: var(--chalk-mute); margin-top: 12px;
}

/* мега-меню с превью: колонки рядом, ширина списка держится по числу групп (--n),
   а не тянется на всю строку - иначе перед картинкой остаётся пустая полоса */
.mega--has-preview .mega-inner { display: flex; align-items: flex-start;
                                  gap: clamp(28px, 4vw, 56px); }
.mega--has-preview .mega-cols { flex: 1 1 auto; min-width: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(28px, 4vw, 56px); align-content: start;
  max-width: calc(var(--n, 4) * 230px); }
.mega-col h4[data-prev-img] { cursor: default; }
@media (max-width: 1240px) {
  .mega-preview { display: none; }
  .mega--has-preview .mega-inner { display: block; }
  .mega--has-preview .mega-cols { max-width: none; }
}


/* ── Демонстрационные материалы: перечень с артикулами и ценами ──────
   Строка вместо плитки: снимок, состав и колонка кодов с ценой рядом, чтобы
   позиции сравнивались взглядом сверху вниз, как в прайсе. */
.dm-yakorya {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: var(--t-small); color: var(--mute);
}
.dm-yakorya a { color: inherit; text-decoration: none;
                border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.dm-yakorya a:hover { color: var(--ink); border-color: var(--ink); }

.dm-gruppa h2 { margin-bottom: clamp(18px, 2.4vh, 28px); }

.dm-spisok { border-top: 1px solid var(--line); }
.dm-poz {
  display: grid; align-items: start;
  grid-template-columns: clamp(150px, 16vw, 220px) minmax(0, 1fr) minmax(0, 260px);
  gap: clamp(18px, 2.4vw, 36px);
  padding: clamp(20px, 2.6vh, 30px) 0;
  border-bottom: 1px solid var(--line);
}
.dm-foto { display: block; background: var(--paper); overflow: hidden; }
.dm-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.dm-telo h3 { font-size: clamp(17px, 1.4vw, 21px); font-weight: 500;
              line-height: 1.25; margin: 0 0 8px; }
.dm-telo h3 a { color: inherit; text-decoration: none;
                border-bottom: 1px solid transparent; }
.dm-telo h3 a:hover { border-color: var(--accent); }
.dm-sostav { margin: 0; font-size: var(--t-small); line-height: 1.6; }
.dm-pometka { margin: 8px 0 0; font-size: var(--t-caption); color: var(--warn); }

.dm-kody { margin: 0; display: grid; grid-template-columns: 1fr auto;
           gap: 6px clamp(12px, 1.4vw, 22px); align-content: start; }
.dm-kody dt { font-size: var(--t-caption); letter-spacing: 0.02em; }
.dm-kody dd { margin: 0; font-size: var(--t-small); white-space: nowrap;
              text-align: right; }
.dm-var { display: block; color: var(--mute); letter-spacing: 0; }
.dm-net { color: var(--mute); }

.dm-snoska { font-size: var(--t-caption); color: var(--mute); max-width: 70ch; }

@media (max-width: 900px) {
  .dm-poz { grid-template-columns: clamp(110px, 30vw, 160px) minmax(0, 1fr);
            gap: 16px 20px; }
  .dm-kody { grid-column: 1 / -1; }
}


/* нумерованный список юридического документа: строки длинные, нужен воздух */
.pd-spisok { max-width: 78ch; margin: clamp(22px, 3vh, 34px) 0; padding-left: 1.4em; }
.pd-spisok li { margin-bottom: clamp(12px, 1.6vh, 18px); line-height: 1.65; }


/* реквизиты владельца сайта: строка мелким кеглем над служебной строкой */
.foot-rekvizity { border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: clamp(20px, 3vh, 32px); padding-top: clamp(16px, 2vh, 22px); }
.foot-rekvizity p { margin: 0; max-width: 90ch;
  font-size: var(--t-caption); line-height: 1.7; color: var(--chalk-mute); }
.foot-rekvizity a { color: inherit; }
.foot-meta a { color: inherit; }

/* ── бургер и мобильное меню ─────────────────────────────────── */
.burger {
  display: none; margin-left: auto; width: 44px; height: 44px; position: relative;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 1.6px;
  background: var(--chalk); transition: transform 0.35s var(--ease), opacity 0.25s;
}
.burger span {
  top: 21px;
}
.burger span::before {
  top: -7px; left: 0; right: 0;
}
.burger span::after {
  top: 7px; left: 0; right: 0;
}
.burger[aria-expanded="true"] span {
  transform: rotate(45deg);
}
.burger[aria-expanded="true"] span::before {
  transform: rotate(-90deg) translateX(-7px);
}
.burger[aria-expanded="true"] span::after {
  opacity: 0;
}

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 48;
  background: var(--black); padding: 32px var(--px);
  display: none; flex-direction: column; gap: 2px; overflow-y: auto;
}
.mobile-menu[aria-hidden="false"] {
  display: flex;
}
.mobile-menu a {
  display: block; font-size: var(--t-2xl); font-weight: 300; color: var(--chalk);
  text-decoration: none; padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu .grp {
  font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.16em;
  color: var(--chalk-mute); margin: 26px 0 8px;
}

/* ── hero ────────────────────────────────────────────────────── */
.hero {
  position: relative; margin-top: calc(-1 * var(--header-h));
  min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  background: var(--black); color: var(--chalk);
  overflow: hidden;
}
.hero .bg {
  position: absolute; inset: 0;
}
.hero .bg img, .hero .bg video {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.68;
}

/* ── полноэкранное слайд-шоу главной ─────────────────────────── */
.hero--full {
  height: 100svh; min-height: 620px;
  display: block; padding: 0;
}
.hero--full .hero-slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 1.8s var(--ease);
}
.hero--full .hero-slide.is-on {
  opacity: 1; pointer-events: auto;
}
.hero--full .hero-slide > img,
.hero--full .hero-slide > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero--full .hero-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,13,14,0.42) 0%, rgba(12,13,14,0) 40%, rgba(12,13,14,0.72) 100%);
}
.hero--full .hero-slide .hero-cap {
  /* .hero .shell ниже по файлу имеет ту же специфичность из двух классов -
  здесь три класса, чтобы absolute не перебивался его relative */
  position: absolute; left: 0; right: 0; bottom: clamp(56px, 11vh, 116px);
  top: auto; z-index: 1; width: 100%; padding-block: 0;
}
.hero--full .hero-cap .display {
  color: #fff; max-width: 17ch; margin-top: 14px;
  /* полноэкранный кадр: подпись компактнее, чтобы не спорить с фото */
  font-size: clamp(30px, 4.2vw, 58px);
}
.hero--full .hero-cap .lede {
  color: rgba(244,244,242,0.85); margin-top: 16px;
}
.hero--full .hero-cap .kicker {
  color: var(--accent-pale);
}
/* стрелки слайдера - тонкие шевроны по краям, как у производителя */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 56px; height: 56px;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.75);
  transition: color 0.25s var(--ease), transform 0.3s var(--ease);
}
.hero-arrow:hover {
  color: #fff;
}
.hero-arrow svg {
  width: 26px; height: 26px;
}
.hero-arrow--prev {
  left: clamp(6px, 1.6vw, 28px);
}
.hero-arrow--next {
  right: clamp(6px, 1.6vw, 28px);
}
.hero-arrow--prev:hover {
  transform: translateY(-50%) translateX(-3px);
}
.hero-arrow--next:hover {
  transform: translateY(-50%) translateX(3px);
}
@media (max-width: 720px) { .hero-arrow { width: 44px; height: 44px; } }

.hero-scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 2; width: 26px; height: 42px;
  border: 1.5px solid rgba(255,255,255,0.55); border-radius: 999px;
  display: block;
}
.hero-scroll span {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 7px;
  margin-left: -1.5px; border-radius: 2px; background: rgba(255,255,255,0.8);
  animation: scroll-hint 2.2s var(--ease) infinite;
}
@keyframes scroll-hint {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll span { animation: none; } }
.hero .bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,13,14,0.55) 0%, rgba(12,13,14,0.1) 45%, rgba(12,13,14,0.82) 100%);
}
.hero .shell {
  position: relative; z-index: 1; width: 100%; padding-block: clamp(48px, 8vh, 96px);
}
.hero .kicker {
  color: var(--accent-pale);
}
.hero h1 {
  color: #fff; max-width: 15ch; margin-top: 14px;
}
.hero .lede {
  color: rgba(244,244,242,0.85); margin-top: 20px;
}
.hero-actions {
  display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-secondary); font-weight: 500; text-decoration: none;
  padding: 15px 30px; border-radius: 0;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn-primary {
  background: var(--accent); color: #fff;
}
.btn-primary:hover {
  background: var(--accent-deep);
}
.btn-ghost {
  border: 1px solid rgba(255,255,255,0.4); color: var(--chalk);
}
.btn-ghost:hover {
  border-color: #fff; color: #fff;
}
.btn-dark {
  border: 1px solid var(--ink); color: var(--ink);
}
.btn-dark:hover {
  background: var(--ink); color: var(--chalk);
}

/* ── секции ──────────────────────────────────────────────────── */
.blk {
  padding-block: clamp(64px, 9vh, 128px);
}
.blk--pb0 { padding-bottom: 0; }
.blk--pt0 { padding-top: 0; }
.blk .kicker + .h2, .blk .kicker + h1 {
  margin-top: 14px;
}
.blk .h2 + .lede {
  margin-top: 18px;
}
.sec-head {
  max-width: 900px;
}

/* факты марки */
.facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: clamp(36px, 5vh, 56px); border-block: 1px solid var(--line);
}
.fact {
  background: var(--paper); padding: 30px 28px 34px;
}
.fact .h3 {
  font-weight: 400;
}
.fact p {
  color: var(--mute); font-size: var(--t-secondary); margin-top: 10px;
}

/* серии */
.series-card {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 64px);
  align-items: center; margin-top: clamp(36px, 5vh, 56px);
}
.series-card .pic {
  overflow: hidden;
}
.series-card .pic img {
  transition: transform 0.8s var(--ease);
}
.series-card:hover .pic img {
  transform: scale(1.025);
}
.series-card .h2 {
  font-weight: 300;
}
.series-card .lede {
  margin-top: 14px;
}
.series-note {
  color: var(--mute); font-size: var(--t-secondary); margin-top: clamp(28px, 4vh, 40px); border-top: 1px solid var(--line); padding-top: 18px;
}

/* палитра отделок */
.swatches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin-top: clamp(36px, 5vh, 52px);
}
.swatch {
  text-align: left;
}
.swatch .chip {
  aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line);
  display: grid; place-items: center; background: #fff;
  transition: border-color 0.3s var(--ease), transform 0.45s var(--ease);
}
.swatch .chip img {
  width: 100%; height: 100%; object-fit: cover;
}
.swatch:hover .chip {
  border-color: var(--ink); transform: translateY(-3px);
}
.swatch.is-active .chip {
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.swatch figcaption {
  font-size: var(--t-caption); color: var(--mute); margin-top: 8px;
}
.swatch .art {
  display: block; color: var(--ink);
}

/* тёмная секция (проектировщикам) */
.dark {
  background: var(--black); color: var(--chalk);
  position: relative;
}
.dark .lede {
  color: var(--chalk-mute);
}
.dark .kicker {
  color: var(--accent-light);
}
.tool-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.1); margin-top: clamp(36px, 5vh, 56px); border-block: 1px solid rgba(255,255,255,0.1);
}
.tool {
  background: var(--black); padding: 30px 28px 36px;
  text-decoration: none; display: block;
  transition: background-color 0.35s var(--ease);
}
.tool:hover {
  background: var(--black-soft);
}
.tool .h3 {
  color: #fff; font-weight: 400;
}
.tool p {
  color: var(--chalk-mute); font-size: var(--t-secondary); margin-top: 10px;
}
.tool .go {
  display: inline-block; margin-top: 18px; font-size: var(--t-caption); color: var(--accent-light);
}

/* галерея интерьеров */
.gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: clamp(36px, 5vh, 56px);
}
.gallery figure {
  overflow: hidden; position: relative; aspect-ratio: 16/9;
}
.gallery img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease);
}
.gallery figure:hover img {
  transform: scale(1.03);
}
.gallery figcaption {
  position: absolute; left: 16px; bottom: 12px;
  font-size: var(--t-meta); letter-spacing: 0.08em; color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* конфигуратор изделия (категория) */
.configurator {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 80px);
  align-items: start; margin-top: clamp(36px, 5vh, 56px);
}
.configurator .stage {
  position: sticky; top: calc(var(--header-h) + 24px);
  background: #fff; border: 1px solid var(--line);
  aspect-ratio: 1; display: grid; place-items: center; padding: 8%;
}
.configurator .stage img {
  max-height: 100%; width: auto; object-fit: contain; transition: opacity 0.35s var(--ease);
}
.configurator .stage .cap {
  position: absolute; left: 20px; bottom: 16px; font-size: var(--t-meta); color: var(--mute); letter-spacing: 0.08em;
}
.conf-group + .conf-group {
  margin-top: 34px;
}
.conf-group h3 {
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.14em; color: var(--mute); margin-bottom: 14px;
}

/* FAQ */
.faq-wrap {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: start;
  margin-top: clamp(30px, 4vh, 44px);
}
.faq-wrap .faq-side {
  position: sticky; top: calc(var(--header-h) + 32px);
}
.faq-wrap .faq-side .h2 {
  margin-bottom: 12px;
}
.faq-wrap .faq-side p {
  color: var(--mute); max-width: 30ch;
}
.faq {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  all: unset; cursor: pointer; box-sizing: border-box; width: 100%;
  display: flex; align-items: center; gap: 18px; padding: 20px 2px;
}
.faq-ic {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--mute);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.45s var(--ease);
}
.faq-ic svg {
  width: 16px; height: 16px;
}
.faq-q:hover .faq-ic {
  border-color: var(--accent); color: var(--accent); transform: scale(1.08);
}
.faq-item.is-open .faq-ic {
  background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(360deg);
}
.faq-q .q {
  flex: 1; font-size: clamp(16px, 1.3vw, 18.5px); font-weight: 400; text-align: left;
}
.faq-q .tog {
  flex: none; width: 20px; height: 20px; position: relative;
}
.faq-q .tog::before, .faq-q .tog::after {
  content: ""; position: absolute; background: var(--mute);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), opacity 0.3s;
}
.faq-q .tog::before {
  left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%);
}
.faq-q .tog::after {
  top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%);
}
.faq-item.is-open .tog::after {
  opacity: 0; transform: translateX(-50%) rotate(90deg);
}
.faq-item.is-open .tog::before {
  background: var(--accent);
}
.faq .a-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16,1,0.3,1);
}
.faq-item.is-open .a-wrap {
  grid-template-rows: 1fr;
}
.faq .a-inner {
  overflow: hidden;
}
.faq .a {
  padding: 0 2px 22px 50px; color: var(--mute); max-width: 60ch;
}
@media (max-width: 900px) {
  .faq-wrap {
    grid-template-columns: 1fr;
  }
  .faq-wrap .faq-side {
    position: static;
  }
}

/* контакты */
.contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: clamp(36px, 5vh, 52px);
}
.contact-grid .k {
  font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.14em; color: var(--mute); margin-bottom: 8px;
}
.contact-grid .v {
  font-size: clamp(17px, 1.6vw, 20px);
}
.contact-grid a {
  text-decoration-color: var(--accent); text-underline-offset: 4px;
}

/* ── подвал ──────────────────────────────────────────────────── */
footer.site { background: var(--black); color: var(--chalk-mute); padding: clamp(44px, 6vh, 72px) var(--px) 40px; }
.foot-inner {
  max-width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; gap: 32px;
}
footer.site img { height: 22px; width: auto; }
footer.site .col p { font-size: var(--t-small); margin-top: 14px; max-width: 44ch; line-height: 1.7; }
footer.site .countries { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; font-size: var(--t-caption); }
footer.site a { color: var(--chalk-mute); text-decoration: none; transition: color 0.25s; }
footer.site a:hover { color: var(--chalk); }
.foot-meta {
  border-top: 1px solid rgba(255,255,255,0.1); margin-top: 34px; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--t-caption); max-width: var(--shell); margin-inline: auto;
}

/* ── хлебные крошки ──────────────────────────────────────────── */
.crumbs {
  font-size: var(--t-caption); color: var(--mute); padding-top: 26px;
}
.crumbs a {
  color: var(--mute); text-decoration: none;
}
.crumbs a:hover {
  color: var(--ink);
}
.crumbs span {
  margin-inline: 8px; color: var(--line);
}

/* ── появление при прокрутке ─────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .bg video { display: none; }
}

/* ── отзывчивость ────────────────────────────────────────────── */
@media (max-width: 860px) {
  nav.primary { display: none; }
  .burger { display: block; }
  .mega { display: none; }
  .mega-inner { grid-template-columns: 1fr; }
  .facts, .tool-list { grid-template-columns: 1fr; }
  .series-card, .configurator { grid-template-columns: 1fr; }
  .configurator .stage { position: static; }
  .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .gallery { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .top .brand .ru { display: none; }
  .swatches { grid-template-columns: repeat(3, 1fr); }
}

/* ── кнопка звука (машинерия витрин, характер ekinex) ────────── */
.sndbtn {
  position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px);
  z-index: 60;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  background: rgba(12, 13, 14, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(244, 244, 242, 0.6);
  font-family: inherit; font-size: var(--t-micro); letter-spacing: 0.16em;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sndbtn:hover {
  color: var(--chalk); border-color: rgba(0, 157, 224, 0.5);
}
.sndbtn.is-on {
  color: var(--accent-light); border-color: rgba(0, 157, 224, 0.6);
}
.sndbtn__bars {
  display: flex; align-items: flex-end; gap: 2px; height: 11px;
}
.sndbtn__bars i {
  width: 2px; height: 3px; background: currentColor;
}
.sndbtn.is-on .sndbtn__bars i {
  animation: sndBar 1.1s var(--ease) infinite alternate;
}
.sndbtn.is-on .sndbtn__bars i:nth-child(2) {
  animation-delay: 0.18s;
}
.sndbtn.is-on .sndbtn__bars i:nth-child(3) {
  animation-delay: 0.36s;
}
.sndbtn.is-on .sndbtn__bars i:nth-child(4) {
  animation-delay: 0.54s;
}
@keyframes sndBar { from { height: 3px; } to { height: 11px; } }
@media (max-width: 560px) { .sndbtn__t { display: none; } .sndbtn { padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .sndbtn.is-on .sndbtn__bars i { animation: none; height: 8px; } }


/* ── кинолента Made in Italy: подлинные кадры фабрики ────────── */
.filmband {
  position: relative; overflow: hidden; background: var(--black);
}
.filmband video {
  width: 100%; height: min(62vh, 560px); object-fit: cover; display: block; opacity: 0.85;
}
.filmband::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,13,14,0.72) 0%, rgba(12,13,14,0.15) 55%, rgba(12,13,14,0.05) 100%);
}
.filmband .cap {
  position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 56px); z-index: 1;
}
.filmband .cap .display {
  color: #fff; font-size: clamp(30px, 4vw, 56px);
}
.filmband .cap .lede {
  color: rgba(244,244,242,0.82); margin-top: 12px;
}
.filmband .cap .kicker {
  color: var(--accent-pale);
}

/* ── отделки: свотчи + живое видео ───────────────────────────── */
.finishes-grid {
  display: grid; grid-template-columns: 1fr minmax(320px, 46%); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(36px, 5vh, 52px);
}
.finishes-grid .swatches {
  margin-top: 0;
}
.finishes-video {
  overflow: hidden; border: 1px solid var(--line);
}
.finishes-video video {
  width: 100%; display: block;
}
@media (max-width: 1080px) { .finishes-grid { grid-template-columns: 1fr; } }


/* ── зерно на тёмных поверхностях: 0.04, статичное ───────────── */
.hero::before, .dark::before, .filmband::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ── выбор мелодии: виден только при включённом звуке ────────── */
.sndtheme {
  position: fixed; right: clamp(16px, 2vw, 28px); bottom: calc(clamp(16px, 2vw, 28px) + 46px);
  z-index: 60;
  display: none;
  padding: 8px 13px;
  background: rgba(12, 13, 14, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(244, 244, 242, 0.6);
  font-family: inherit; font-size: var(--t-micro); letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sndtheme:hover {
  color: var(--chalk); border-color: rgba(0, 157, 224, 0.5);
}
body:has(.sndbtn.is-on) .sndtheme { display: block; }

/* пояснение под группой отделок в конфигураторе */
.conf-note {
  color: var(--mute); font-size: var(--t-small); line-height: 1.55; margin-top: 14px;
}

/* ── Где купить: партнёры по городам ─────────────────────────────── */
.p-region {
  margin-top: clamp(34px, 5vh, 52px);
}
.p-region .h2 {
  font-size: clamp(20px, 2vw, 26px);
}
.p-list {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px 28px;
}
.p-list li {
  padding: 12px 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.p-name {
  font-size: var(--t-medium); text-decoration-color: var(--accent); text-underline-offset: 4px;
}
.p-tel {
  color: var(--mute); font-size: var(--t-small); text-decoration: none;
}
.p-tel:hover {
  color: var(--ink);
}
.p-note {
  color: var(--mute); font-size: var(--t-meta); letter-spacing: 0.06em;
}

/* ── Каталог оборудования: карточки серий, категорий, решений ─────── */
.ecards {
  display: grid; gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: clamp(30px, 4vh, 44px);
}
.ecards--big {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Ровный последний ряд: колонок столько, чтобы карточки разделились без
   дыры. Пять встают в строку, шесть - двумя тройками. Семь ровно не делится,
   там 4+3 и дыра в одну карточку - это терпимо. Ниже 1200 точек всё
   возвращается к общему правилу выше. */
@media (min-width: 1200px) {
  .ecards:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ecards:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ecard {
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  border: 1px solid var(--line); text-decoration: none; color: inherit;
  background: var(--paper);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.ecard:hover {
  border-color: var(--accent); transform: translateY(-2px);
}
.ecard .pic {
  display: block; overflow: hidden; background: var(--ink);
  aspect-ratio: 4 / 3;
}
.ecards--big .ecard .pic {
  aspect-ratio: 16 / 10;
}
.ecard .pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s var(--ease);
}
.ecard:hover .pic img {
  transform: scale(1.03);
}
.ecard .c-name {
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.25;
}
.ecard .c-note {
  color: var(--mute); font-size: var(--t-small); line-height: 1.5;
}

/* Крупный кадр на обзорной странице серии или решения */
.hero-shot {
  margin: clamp(30px, 4vh, 44px) 0 0;
}
.hero-shot img {
  width: auto; max-width: 100%; max-height: 56vh;
  height: auto; display: block; margin-inline: auto;
}

/* Две развилки на главной: настенное и системное */
.two-ways {
  display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: clamp(30px, 4vh, 44px);
}
.way {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  color: var(--chalk); background: var(--ink); min-height: clamp(280px, 34vw, 420px);
}
.way img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.62;
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}
.way:hover img {
  transform: scale(1.04); opacity: 0.72;
}
.way .txt {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  justify-content: flex-end; height: 100%; min-height: inherit;
  padding: clamp(22px, 3vw, 38px);
  background: linear-gradient(180deg, rgba(12,13,14,0) 40%, rgba(12,13,14,0.78) 100%);
}
.way .h2 {
  color: var(--chalk); margin: 0 0 8px;
}
.way p {
  color: rgba(244,244,242,0.78); font-size: var(--t-secondary); line-height: 1.55; margin: 0;
}

/* ── Текст страниц каталога ───────────────────────────────────────── */
.page-text {
  max-width: 720px; margin-top: clamp(30px, 4vh, 44px);
}
.page-text p {
  font-size: clamp(16px, 1.55vw, 18.5px); line-height: 1.65;
  color: var(--ink); margin: 0 0 1em;
}
.page-text p:last-child {
  margin-bottom: 0;
}
.page-text .h2 {
  margin-bottom: 14px;
}
.plain-list {
  list-style: none; padding: 0; margin: 0;
}
.plain-list li {
  padding: 10px 0; border-top: 1px solid var(--line);
  font-size: var(--t-medium); line-height: 1.55;
}


/* ── полоса серий настенного оборудования (раскладка ekinex.com) ── */
.wallrow {
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: #0a0a0a; margin: 0; min-height: calc(100vh - var(--hdr, 64px));
}
.wallcol {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(24px, 5vh, 60px);
  padding: clamp(30px, 6vh, 70px) clamp(6px, 1vw, 18px);
  text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #131313 0%, #080808 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.06);
  transition: background .55s cubic-bezier(0.16,1,0.3,1);
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(22px, 4vh, 46px);
  padding: clamp(44px, 8vh, 96px) clamp(6px, 1vw, 18px);
  min-height: clamp(380px, 62vh, 700px);
  text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #121212 0%, #090909 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.06);
  transition: background .55s cubic-bezier(0.16,1,0.3,1);
}
.wallcol:last-child {
  box-shadow: none;
  box-shadow: none;
}
.wallcol:hover {
  background: linear-gradient(180deg, #1b1b1b 0%, #0d0d0d 100%);
  background: linear-gradient(180deg, #1b1b1b 0%, #0e0e0e 100%);
}
.wallcol .ph {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; width: 100%;
  display: flex; align-items: center; justify-content: center;
  width: 100%; flex: 1 1 auto;
}
.wallcol .ph img {
  max-width: 100%; max-height: 46vh; width: auto; height: auto;
  object-fit: contain;
  transition: transform .6s cubic-bezier(0.16,1,0.3,1);
}
.wallcol:hover .ph img {
  transform: scale(1.045);
}
.wallcol .nm {
  font-size: clamp(13px, 1.05vw, 17px); letter-spacing: .16em;
  text-transform: uppercase; text-align: center;
  font-size: clamp(14px, 1.1vw, 19px); letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; text-align: center;
}
@media (max-width: 1080px) {
  .wallrow { grid-template-columns: repeat(3, 1fr); min-height: 0; }
  .wallcol { min-height: 46vh; }
}
@media (max-width: 620px) {
  .wallrow { grid-template-columns: repeat(2, 1fr); }
  .wallcol { min-height: 38vh; }
  .wallcol .ph img { max-height: 26vh; }
}




.wallcol img {
  width: min(84%, 200px); height: auto; display: block;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,0.65));
  transition: transform .6s cubic-bezier(0.16,1,0.3,1);
}


.wallcol:hover img {
  transform: translateY(-7px) scale(1.03);
}
@media (max-width: 1100px) { .wallrow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .wallrow { grid-template-columns: repeat(2, 1fr); }
                             .wallcol { min-height: 300px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ── страницы серий: раскладка ekinex.com ── */
.serie-top {
  background: #0a0a0a; color: #fff;
  padding: clamp(28px, 4vh, 46px) 0 clamp(44px, 7vh, 84px);
}
.serie-top .crumbs {
  color: rgba(255,255,255,0.45); margin-bottom: clamp(28px, 5vh, 60px);
}
.serie-top .crumbs a {
  color: rgba(255,255,255,0.65);
}
.serie-top .crumbs a:hover {
  color: #fff;
}
.serie-name {
  font-size: clamp(38px, 6vw, 84px); line-height: 1.02; font-weight: 300;
  letter-spacing: -0.01em; margin: 0;
}
.serie-motto {
  font-size: clamp(19px, 2.1vw, 30px); line-height: 1.25; font-weight: 300;
  color: rgba(255,255,255,0.9); margin: clamp(14px, 2vh, 22px) 0 0;
  max-width: 24ch;
}
.serie-text {
  color: rgba(244,244,242,0.7); max-width: 70ch; line-height: 1.65;
  margin: clamp(18px, 2.6vh, 28px) 0 0;
}

.serie-lines {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: #0a0a0a;
}
.serie-lines figure {
  margin: 0; position: relative;
}
.serie-lines img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4 / 3;
}
.serie-lines figcaption {
  position: absolute; left: clamp(16px, 2vw, 28px);
  bottom: clamp(14px, 2vh, 24px); color: #fff;
  font-size: clamp(13px, 1.1vw, 16px); letter-spacing: 0.06em;
  text-transform: uppercase;
}

.serie-note {
  color: var(--mute); font-size: var(--t-secondary); line-height: 1.7;
  margin-top: clamp(30px, 4vh, 46px); max-width: 76ch;
}


/* ── панели меню: содержание производителя, подача наша ── */

.mega-col h4 {
  margin-bottom: 16px;
  font-size: clamp(16px, 1.25vw, 19px); font-weight: 700;
  letter-spacing: 0; text-transform: none; color: #fff;
  margin-bottom: 14px;
}
.mega-col h4 a {
  color: var(--chalk-mute); text-decoration: none;
  transition: color 0.25s var(--ease);
  color: #fff;
}
.mega-col h4 a:hover {
  color: #fff;
}
.mega ul li {
  list-style: none;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.mega .mega-rule {
  border: 0; height: 1px; background: rgba(255,255,255,0.1);
  margin: 16px 0;
}
.mega ul a.out .arr {
  font-size: var(--t-micro); margin-left: 7px; opacity: 0.5;
  transition: opacity 0.25s var(--ease);
}
.mega ul a.out:hover .arr {
  opacity: 0.9;
}

/* пункты проявляются по очереди */

.mega.is-open ul li {
  opacity: 1; transform: none;
  transition-delay: calc(60ms + var(--i, 0) * 26ms);
}
@media (prefers-reduced-motion: reduce) {
  .mega ul li { opacity: 1; transform: none; transition: none; }
  .mega.is-open ul li { transition-delay: 0s; }
}

/* списки внутри группы встают рядом: панель не растёт вниз */
.mega-lists {
  display: grid; gap: clamp(18px, 2.2vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
}


@media (max-width: 1100px) { .mega-inner { grid-template-columns: 1fr; } }

/* мобильное меню: группы свёрнуты */
.mobile-menu .m-grp {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu .m-grp summary {
  list-style: none; cursor: pointer;
  padding: 15px 0; font-size: var(--t-large); color: #fff; display: flex;
  align-items: center; justify-content: space-between;
}
.mobile-menu .m-grp summary::-webkit-details-marker {
  display: none;
}
.mobile-menu .m-grp summary::after {
  content: "+"; font-size: var(--t-xl);
  color: var(--chalk-mute); transition: transform 0.3s var(--ease);
}
.mobile-menu .m-grp[open] summary::after {
  content: "–";
}
.mobile-menu .m-grp a {
  display: block; padding: 9px 0 9px 14px;
  font-size: var(--t-medium); color: var(--chalk); text-decoration: none;
}
.mobile-menu .m-grp .m-all {
  color: var(--chalk-mute); font-size: var(--t-small);
}
.mobile-menu .m-plain {
  display: block; padding: 15px 0; font-size: var(--t-large);
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}


/* ── сетка категорий: значки производителя ── */
.catgrid {
  display: grid; gap: clamp(18px, 2.2vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: clamp(30px, 4vh, 46px);
  grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 30%, 420px), 1fr));
  align-items: start;
}
/* больше трёх в ряд не ставим: у производителя тоже три */

.catcard {
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; gap: 14px;
  padding: clamp(22px, 2vw, 32px) clamp(20px, 1.8vw, 30px);
  border: 1px solid rgba(0, 0, 0, 0.11); background: transparent;
  transition: border-color .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.catcard:hover {
  border-color: rgba(0, 0, 0, 0.28);
}
a.catcard { text-decoration: none; color: inherit; }
.catcard .ic {
  display: flex; align-items: center; justify-content: flex-start;
  height: 64px; width: 100%;
}
.catcard .ic img {
  max-height: 64px; max-width: 96px; width: auto; height: auto;
  display: block; object-fit: contain;
}
.catcard h2, .catcard h3 {
  font-size: clamp(15px, 1.05vw, 18px); letter-spacing: 0.01em;
  text-transform: none; font-weight: 500; line-height: 1.35; margin: 0;
}
.catcard .ser {
  color: var(--mute); font-size: var(--t-small); line-height: 1.6; margin: 0;
}
.btn-cat {
  display: inline-block; margin-top: 4px; padding: 10px 22px;
  background: var(--ink); color: #fff; text-decoration: none;
  font-size: var(--t-caption); letter-spacing: 0.02em;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.btn-cat:hover {
  background: var(--accent); transform: translateY(-1px);
}
@media (max-width: 640px) { .catgrid { grid-template-columns: repeat(2, 1fr); } }


/* ── полноэкранная шапка страницы решения (как у производителя) ── */
.hero-solution {
  position: relative; min-height: min(88vh, 900px);
  display: grid; align-items: end; overflow: hidden;
  background: #0a0a0a;
}
.hero-solution video, .hero-solution img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero-solution::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.15) 45%,
  rgba(10,10,10,0.82) 100%);
}
.hero-solution .cap {
  position: relative; z-index: 2; color: #fff;
  padding-bottom: clamp(58px, 11vh, 130px);
}
.hero-solution .cap .kicker {
  color: var(--accent-pale);
}
.hero-solution .cap h1 {
  font-size: var(--t-hero); line-height: 1.02;
  font-weight: 300; letter-spacing: -0.01em; margin: 10px 0 0;
}
.hero-solution .cap .motto {
  font-size: clamp(18px, 2vw, 28px); font-weight: 300;
  color: rgba(255,255,255,0.88); margin: 14px 0 0; max-width: 26ch;
}
.hero-solution .scroll-hint {
  position: absolute; z-index: 2; left: 50%;
  transform: translateX(-50%); bottom: 22px; font-size: var(--t-meta);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
@media (prefers-reduced-motion: reduce) { .hero-solution video { display: none; } }

.hero-solution .video-dl {
  position: absolute; z-index: 2; right: var(--px); bottom: 76px;
  font-size: var(--t-meta); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero-solution .video-dl:hover { color: #fff; border-color: rgba(255,255,255,0.8); }
@media (max-width: 640px) { .hero-solution .video-dl { display: none; } }


/* ── сетка изделий на странице категории ── */
.prodgrid {
  display: grid; gap: clamp(22px, 2.8vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: clamp(30px, 4vh, 46px);
  justify-content: center;
}
.prodcard {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px;
  max-width: 340px; margin-inline: auto; width: 100%;
}
.prodcard .pr {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1; background: var(--paper-2, #f2f2f0);
}
.prodcard .pr img {
  max-width: 78%; max-height: 78%; width: auto; height: auto;
  object-fit: contain; display: block;
}
.prodcard h2 {
  font-size: clamp(14px, 1.05vw, 16px); font-weight: 600;
  line-height: 1.4; margin: 0;
}
.prodcard .vers {
  color: var(--mute); font-size: var(--t-meta); margin: 0;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.amb-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: #0a0a0a;
}
.amb-row figure {
  margin: 0;
}
.amb-row img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4 / 3;
}
@media (max-width: 640px) { .prodgrid { grid-template-columns: repeat(2, 1fr); } }

/* одно изделие в категории не должно растягиваться на всю ширину */




/* ── внутренние страницы решений: текст и снимок парами ── */
.hero-solution--mid {
  min-height: min(58vh, 620px);
}
.sol-flow {
  display: grid; gap: clamp(40px, 6vh, 88px);
  margin-top: clamp(30px, 4vh, 50px);
}
.sol-block {
  display: grid; gap: clamp(24px, 3vw, 54px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.sol-block--flip .sol-txt {
  order: 2;
}
.sol-block .sol-txt p {
  color: var(--mute); line-height: 1.75; margin: 14px 0 0;
}
.sol-pic {
  margin: 0;
}
.sol-pic img {
  width: 100%; height: auto; display: block;
}
@media (max-width: 860px) {
  .sol-block { grid-template-columns: 1fr; }
  .sol-block--flip .sol-txt { order: 0; }
}


/* ── верх страницы серии и категории: по центру, как у производителя ── */
.top-center {
  text-align: center; padding-bottom: clamp(26px, 3.5vh, 44px);
  padding-top: clamp(60px, 12vh, 130px);
}
.top-center .crumbs {
  justify-content: center; margin-bottom: clamp(24px, 4vh, 44px);
}
.top-name {
  font-size: var(--t-title); line-height: 1.05; font-weight: 300;
  letter-spacing: -0.01em; margin: 0;
}
.top-motto {
  font-size: clamp(18px, 1.9vw, 26px); font-weight: 400; color: var(--ink);
  margin: clamp(10px, 1.6vh, 18px) 0 0;
}
.top-motto a { color: inherit; text-decoration-color: var(--accent, currentColor); text-underline-offset: 5px; transition: opacity .3s var(--ease); }
.top-motto a:hover { opacity: .7; }
.top-text {
  color: var(--mute); line-height: 1.75; max-width: 82ch;
  margin: clamp(16px, 2.4vh, 26px) auto 0;
}
.lenta {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr);
  overflow-x: auto; scroll-snap-type: x mandatory; background: #0a0a0a;
}
.lenta figure {
  margin: 0; position: relative; scroll-snap-align: start;
}
.lenta img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 16 / 10;
}
.lenta figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(14px, 2vh, 22px) clamp(16px, 2vw, 26px); color: #fff;
  font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.75) 100%);
}
@media (max-width: 640px) { .lenta { grid-auto-columns: 86%; } }

/* заголовок группы в меню крупнее пунктов, как у производителя */






/* ── заявка ── */
.zayavka-shell {
  max-width: 820px;
}
.zayavka {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(24px, 3vh, 36px);
}
.zayavka .pole {
  display: flex; flex-direction: column; gap: 8px;
}
.zayavka .pole[hidden] {
  display: none;
}
.zayavka .pole--wide {
  grid-column: 1 / -1;
}
.zayavka label {
  font-size: var(--t-small); color: var(--mute);
}
.zayavka input[type=text], .zayavka input[type=tel], .zayavka select,
.zayavka textarea {
  font: inherit; font-size: var(--t-medium); color: var(--ink); background: #fff;
  border: 1px solid rgba(0,0,0,0.16); border-radius: 2px;
  padding: 13px 14px; width: 100%;
  transition: border-color .3s var(--ease);
}
.zayavka input:focus, .zayavka select:focus, .zayavka textarea:focus {
  outline: none; border-color: var(--accent);
}
.zayavka .soglasie label {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-small); color: var(--mute);
}
.btn-send {
  display: inline-block; padding: 15px 34px; background: var(--ink);
  color: #fff; border: 0; font: inherit; font-size: var(--t-secondary); cursor: pointer;
  transition: background .35s var(--ease);
}
.btn-send:hover {
  background: var(--accent);
}
.btn-send[disabled] {
  opacity: 0.6; cursor: default;
}
.otvet {
  margin: 14px 0 0; color: var(--mute); font-size: var(--t-secondary); min-height: 1.2em;
}
@media (max-width: 640px) { .zayavka { grid-template-columns: 1fr; } }

/* переключатель Для себя / Для интеграторов над формой заявки */
.zayavka-mode {
  display: flex; border: 1px solid rgba(0,0,0,0.16);
  width: fit-content; overflow: hidden; margin-bottom: 4px;
}
.zayavka-mode-opt {
  position: relative; cursor: pointer; padding: 12px 22px;
  font-size: var(--t-small); color: var(--mute); user-select: none;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.zayavka-mode-opt input { position: absolute; opacity: 0; pointer-events: none; }
.zayavka-mode-opt:first-child { border-right: 1px solid rgba(0,0,0,0.16); }
.zayavka-mode-opt.is-active { background: var(--ink); color: #fff; }
@media (max-width: 640px) {
  .zayavka-mode { width: 100%; }
  .zayavka-mode-opt { flex: 1; text-align: center; }
}


/* ── таблица совместимости подрозетников ── */
.compat-tools {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
#compat-poisk {
  font: inherit; font-size: var(--t-secondary); padding: 11px 14px; width: min(360px, 100%);
  border: 1px solid rgba(0,0,0,0.16); border-radius: 2px;
}
#compat-poisk:focus {
  outline: none; border-color: var(--accent);
}
.compat-schet {
  color: var(--mute); font-size: var(--t-small);
}
.compat-wrap {
  overflow-x: auto;
}
table.compat { border-collapse: collapse; font-size: var(--t-caption); min-width: 1100px; }
table.compat th, table.compat td { border: 1px solid rgba(0,0,0,0.1);
  padding: 8px 10px; text-align: center; white-space: nowrap; }
table.compat thead th { background: var(--ink); color: #fff; font-weight: 600;
  position: sticky; top: 0; }
table.compat tbody tr:nth-child(even) { background: rgba(0,0,0,0.03); }
table.compat img { max-height: 40px; width: auto; }


/* крупный снимок во всю ширину между блоками текста */
.polosa {
  margin: clamp(30px, 5vh, 64px) 0;
  max-width: var(--shell); margin-inline: auto; padding-inline: var(--px);
  text-align: center;
}
.polosa img {
  width: 100%; height: auto; display: block;
  max-width: min(900px, 100%); max-height: 62vh; width: auto; height: auto;
  margin-inline: auto; object-fit: contain;
}
/* снимок изделий по центру и в разумном размере, как у производителя */



/* интерьерные кадры во всю ширину, снимки изделий - по центру */
.polosa--wide {
  max-width: none; margin-inline: 0; padding-inline: 0;
}
.polosa--wide img {
  max-width: 100%; max-height: none; width: 100%;
}

/* кадр видеоролика на странице базы видео: ведёт на скачивание файла */
a.polosa { display: block; }
.polosa-video { position: relative; }
/* ролик проигрывается на месте: раньше плашка с иконкой «плей» вела на
   скачивание файла, что сбивало с толку (исправлено 22.08.2026) */
.polosa-video video { width: 100%; height: auto; display: block; }
.polosa-video figcaption { margin-top: 10px; text-align: center; font-size: var(--t-small); }
.polosa-video figcaption a { color: var(--mute, #6c7076); }
.polosa-video .play-ic {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(10,10,10,0.5); display: grid; place-items: center;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.polosa-video .play-ic::after {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-style: solid; border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent #fff;
}
.polosa-video:hover .play-ic { background: rgba(10,10,10,0.72); transform: translate(-50%, -50%) scale(1.08); }
.polosa--center {
  max-width: var(--shell); margin-inline: auto; padding-inline: var(--px);
  text-align: center;
}
.polosa--center img {
  max-width: min(820px, 100%); max-height: 60vh; width: auto;
  margin-inline: auto; object-fit: contain;
  max-width: 1500px; margin: 0 auto;
}

/* ── перенесённый текст: заголовки, абзацы, перечни ── */
.blk.tekst .shell {
  max-width: 900px;
}
.blk.tekst .top-motto {
  text-align: left; font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 400; margin: clamp(26px, 4vh, 44px) 0 0;
}
.blk.tekst .top-text {
  text-align: left; margin: clamp(12px, 1.8vh, 20px) 0 0;
  max-width: none;
}
.perechen {
  list-style: none; margin: clamp(14px, 2vh, 22px) 0 0; padding: 0;
  display: grid; gap: 10px;
}
.perechen li {
  position: relative; padding-left: 26px; color: var(--mute);
  line-height: 1.7;
}
.perechen li::before {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 7px; height: 1px; background: var(--accent);
}


/* сетка «снимок - подпись»: так эти пары показывает производитель */
.gal {
  display: grid; gap: clamp(16px, 2.2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.galcard {
  margin: 0;
}
.galcard img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 2px;
}
.galcard figcaption {
  margin-top: 12px; font-size: var(--t-secondary); letter-spacing: .02em;
  color: var(--mute);
}


/* витрина реализованных объектов: снимок, название, город */
.obgrid {
  display: grid; gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.obcard {
  margin: 0;
}
a.obcard { text-decoration: none; color: inherit; display: block; }
.obcard img {
  width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block;
}
.obcard figcaption {
  margin-top: 12px; display: flex; flex-direction: column; gap: 3px;
}
.obcard figcaption b {
  font-weight: 500; letter-spacing: .01em;
}
.obcard figcaption span {
  font-size: var(--t-small); color: var(--mute);
}


/* подписи к схеме: два столбца, как в таблице у производителя */
.legenda {
  list-style: none; padding: 0; margin: 18px 0 0;
  columns: 2; column-gap: clamp(24px, 4vw, 56px);
}
.legenda li {
  break-inside: avoid; margin: 0 0 8px; padding-left: 0;
  font-size: var(--t-secondary); line-height: 1.55;
}
@media (max-width: 700px) { .legenda { columns: 1; } }


/* серия снимков одного изделия: у производителя карусель, у нас спокойная сетка */
.snimki {
  display: grid; gap: clamp(14px, 1.8vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.snimki img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block;
  background: var(--tile, #f4f3f0); padding: 10px;
}
@media (max-width: 560px) { .snimki { grid-template-columns: repeat(2, 1fr); } }


@media (max-width: 1000px) {
  nav.primary { gap: 8px; }
  nav.primary > * { font-size: var(--t-caption); letter-spacing: 0; }
}


/* шапка на ноутбуке: пункты ужимаются, но остаются на виду */
@media (max-width: 1320px) {
  header.top .brand .ru { display: none; }
  nav.primary { gap: clamp(12px, 1.6vw, 22px); }
  nav.primary > * { font-size: var(--t-secondary); }
}
@media (max-width: 1120px) {
  header.top { padding-left: 18px; padding-right: 18px; }
  header.top .brand img { height: 22px; }
  nav.primary { gap: 12px; }
  nav.primary > * { font-size: var(--t-caption); letter-spacing: 0; }
}
@media (max-width: 940px) {
  nav.primary { gap: 9px; }
  nav.primary > * { font-size: var(--t-meta); }
}
/* колонки выпадающего меню держим рядом, пока хватает ширины */
@media (min-width: 861px) and (max-width: 1120px) {
  .mega-inner { grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: clamp(16px, 2vw, 30px); }
  .mega-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega ul a { font-size: var(--t-small); }
}


/* карусель снимков изделия - как у производителя: крупный кадр и стрелки по краям */
.karusel-blk .shell {
  max-width: 1400px;
}
.karusel {
  position: relative;
}
.kar-lenta {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; gap: 0; scrollbar-width: none;
}
.kar-lenta::-webkit-scrollbar {
  display: none;
}
.kar-lenta figure {
  flex: 0 0 100%; margin: 0; scroll-snap-align: center;
}
.kar-lenta img {
  width: 100%; height: clamp(280px, 52vh, 620px); object-fit: contain;
  display: block;
}
.kar-strelka {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border: 0; background: transparent;
  color: var(--ink, #1b1c1a); font-size: 40px; line-height: 1;
  cursor: pointer; opacity: .45; z-index: 2;
  transition: opacity .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.kar-strelka:hover {
  opacity: .9;
}
.kar-nazad {
  left: -6px;
}
.kar-vpered {
  right: -6px;
}
@media (max-width: 720px) { .kar-strelka { width: 40px; font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .kar-lenta { scroll-behavior: auto; } }


/* таблицы артикулов производителя: широкие, поэтому прокручиваются внутри себя */
.tabl-obertka {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: clamp(18px, 2.4vh, 30px) 0;
}
.tabl {
  border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--t-small);
}
.tabl th, .tabl td {
  padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.tabl th {
  font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  font-size: var(--t-meta); color: var(--mute);
  border-bottom-color: rgba(0,0,0,0.18); white-space: nowrap;
}
.tabl tbody tr:hover {
  background: rgba(0,0,0,0.025);
}


/* страница без кадра в шапке: надзаголовок сверху, имя страницы крупно */

.nadzag {
  font-size: var(--t-meta); letter-spacing: .2em; text-transform: uppercase;
  color: var(--mute); margin: 0 0 14px;
}
.top-center .top-name {
  margin: 0;
}

/* пронумерованный перечень производителя */
.numlist {
  counter-reset: пункт; list-style: none; padding: 0;
  margin: clamp(18px, 2.4vh, 30px) 0; max-width: 900px;
}
.numlist li {
  counter-increment: пункт; position: relative;
  padding-left: 52px; margin-bottom: 16px; line-height: 1.6;
}
.numlist li::before {
  content: counter(пункт); position: absolute; left: 0; top: 1px;
  font-size: var(--t-caption); letter-spacing: .06em;
  color: var(--mute);
}


/* пара и тройка снимков в ряд во всю ширину - так их ставит производитель */
.ryad {
  display: grid; gap: clamp(10px, 1.2vw, 20px);
  margin: clamp(18px, 2.6vh, 34px) 0; padding: 0 clamp(10px, 1.2vw, 20px);
}
.ryad--2 {
  grid-template-columns: repeat(2, 1fr);
}
.ryad--3 {
  grid-template-columns: repeat(3, 1fr);
}
.ryad figure {
  margin: 0;
}
.ryad img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 3 / 2;
}
@media (max-width: 760px) {
  .ryad--2, .ryad--3 { grid-template-columns: 1fr; }
}

/* одиночный снимок: у них он идёт почти во всю ширину окна */



/* плитки на узком экране */
@media (max-width: 900px) { .catgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .catgrid { grid-template-columns: 1fr; } }


/* четыре в ряд на узком экране становятся двумя, потом одним */
.ryad--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .ryad--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ryad--4 { grid-template-columns: 1fr; } }


/* кикер на телефоне: 12 пунктов читаются тяжело */
@media (max-width: 620px) { .kicker, .nadzag { font-size: var(--t-caption); } }


/* в карточке видно начало, остальное раскрывается */
.ser-more {
  margin-top: 10px;
}
.ser-more summary {
  cursor: pointer; font-size: var(--t-caption); letter-spacing: .02em;
  color: var(--ink, #1b1c1a); list-style: none;
}
.ser-more summary::-webkit-details-marker {
  display: none;
}
.ser-more summary::after {
  content: " →";
}
.ser-more[open] summary::after {
  content: " ↑";
}
.ser-more p {
  margin: 10px 0 0; font-size: var(--t-small); line-height: 1.6;
  color: var(--mute);
}



/* мобильные огрехи, найденные обходом всех страниц */
@media (max-width: 620px) {
  /* подпись первого экрана не должна выходить за край */
  .hero-solution .cap { max-width: 100%; box-sizing: border-box;
                        padding-left: 18px; padding-right: 18px; }
  .hero-solution .cap .kicker, .hero-solution .cap h1,
  .hero-solution .cap .motto { max-width: 100%; overflow-wrap: anywhere; }
  /* широкие таблицы прокручиваются внутри себя, а не тянут страницу */
  table.compat, table.tabl { display: block; overflow-x: auto;
                             max-width: 100%; }
  .kicker, .nadzag { font-size: var(--t-caption); }
  main img, main video { max-width: 100%; height: auto; }
}


/* стрелки карусели на узком экране не должны торчать за край страницы */
@media (max-width: 620px) {
  .karusel { overflow: hidden; }
  .kar-nazad { left: 0; }
  .kar-vpered { right: 0; }
  .kar-strelka { width: 34px; height: 44px; font-size: 26px;
                 background: rgba(255,255,255,0.72); }
}


/* логотипы и значки: мелкий ряд, а не крупные полосы */
.znachki { display: flex; flex-wrap: wrap; align-items: center;
           justify-content: center; gap: clamp(24px, 4vw, 60px);
           margin: clamp(20px, 3vh, 40px) 0; }
.znachki img { height: clamp(42px, 4vw, 62px); width: auto; max-width: 180px;
               object-fit: contain; display: block; }


/* вертикальный кадр не должен висеть узкой полосой посреди пустого поля */
.polosa img { max-height: none; width: min(100%, 1000px);
              margin-left: auto; margin-right: auto; }
.polosa--wide img { width: 100%; max-height: none; }
.ryad img { aspect-ratio: auto; max-height: 68vh; }

/* образцы отделки: небольшие плитки с подписью, а не полотна во весь экран */
.obraztsy { display: grid; gap: clamp(14px, 1.6vw, 22px);
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            max-width: var(--shell); margin: clamp(20px, 3vh, 36px) auto;
            padding-inline: var(--px); box-sizing: border-box; }
.obraztsy figure { margin: 0; }
.obraztsy img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.obraztsy figcaption { margin-top: 8px; font-size: var(--t-caption); line-height: 1.4;
                       color: var(--mute, #6c7076); }
@media (max-width: 620px) {
  .obraztsy { grid-template-columns: repeat(2, 1fr); }
}


/* отделки на главной: имя группы слева, компактные образцы справа */
.otd-vse { display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 30px);
           margin-top: clamp(24px, 3.6vh, 40px); }
.otd-gruppa { display: grid; grid-template-columns: clamp(150px, 16vw, 210px) 1fr;
              gap: clamp(16px, 2vw, 30px); align-items: start;
              border-top: 1px solid var(--line-soft); padding-top: clamp(14px, 2vh, 22px); }
.otd-gruppa h3 { font-size: var(--t-secondary); font-weight: 500; letter-spacing: .02em; margin: 0; }
.otd-gruppa h3 span { display: block; color: var(--mute, #6c7076);
                      font-weight: 400; font-size: var(--t-caption); margin-top: 4px; }
.otd-gruppa .obraztsy { margin: 0;
  /* min-width: 0 обязателен: без него ячейка грида считает ширину по
     содержимому, и на телефоне тринадцать квадратиков растягивали страницу
     до 1376px вместо 390 - появлялась горизонтальная прокрутка */
  min-width: 0;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.otd-gruppa .obraztsy figcaption { font-size: var(--t-caption); margin-top: 6px;
                                   line-height: 1.35; }
@media (max-width: 700px) { .otd-gruppa { grid-template-columns: 1fr; } }


/* кадр в ряду не обрезаем: у нас пропорции исходников разные */
.ryad img { height: auto; aspect-ratio: auto; object-fit: contain; max-height: 70vh; }
.ryad { align-items: start; }


/* кадр по центру шире: узкая колонка посреди пустого поля читается плохо */
.polosa--center img { width: min(100%, 1000px); height: auto; margin: 0 auto; }
.polosa--center { display: flex; justify-content: center; }


/* плотнее по вертикали: между блоками было слишком много пустоты */
.blk { padding-top: clamp(28px, 4vh, 56px); padding-bottom: clamp(28px, 4vh, 56px); }
.top-center { padding-top: clamp(40px, 7vh, 80px); padding-bottom: clamp(10px, 1.5vh, 18px); }
.blk.tekst { padding-top: clamp(20px, 3vh, 40px); }
.polosa { margin-block: clamp(20px, 3vh, 40px); }


/* не режем кадры в сетках: пропорции у снимков разные */
.galcard img { aspect-ratio: auto; object-fit: contain; max-height: 46vh; background: transparent; }
.obcard img { aspect-ratio: 8/5; object-fit: cover; }


/* предел высоты кадра: снимок не должен занимать два экрана */
.polosa img { max-height: 620px; width: auto; max-width: min(100%, 1100px); }
.polosa--wide img { width: 100%; max-width: none; max-height: 680px; object-fit: cover; }
.ryad img { max-height: 340px; }
.ryad--2 img, .ryad--3 img { max-height: 460px; }
.galcard img { max-height: 320px; }


/* первый экран без фотографии: тёмный, компактный, с акцентной чертой */
.hero-tekst { background: var(--black, #0c0d0e); color: #fff;
              min-height: min(38vh, 380px); display: flex; align-items: center;
              padding: clamp(48px, 7vh, 88px) 0; }
.hero-tekst h1 { font-size: var(--t-title); line-height: 1.02;
                 font-weight: 300; margin: 0; letter-spacing: -0.01em; }
.hero-tekst h1::after { content: ""; display: block; width: 56px; height: 2px;
                        background: var(--accent); margin-top: 26px; }
.hero-tekst .nadzag { color: rgba(255,255,255,0.55); margin-bottom: 18px; }


/* нумерованный перечень как у производителя: крупный номер, линии, контраст */
.numlist { max-width: 1100px; margin: clamp(24px, 4vh, 44px) auto; }
.numlist li { display: grid; grid-template-columns: clamp(56px, 7vw, 104px) 1fr;
  align-items: baseline; gap: clamp(14px, 2vw, 30px); padding: clamp(16px, 2.4vh, 26px) 0;
  margin: 0; border-top: 1px solid var(--line, #e7e7e4); color: var(--ink, #101114);
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; }
.numlist li:last-child { border-bottom: 1px solid var(--line, #e7e7e4); }
.numlist li::before { content: counter(пункт); position: static;
  font-size: clamp(30px, 3.6vw, 54px); line-height: 1; font-weight: 300;
  color: var(--ink, #101114); letter-spacing: -0.02em; }
.perechen li, .legenda li { color: var(--ink, #101114); }


/* пронумерованный пункт: крупный номер слева, линия сверху - как у производителя */
.blk.tekst .punkt, .punkt { display: grid; grid-template-columns: clamp(56px, 7vw, 104px) 1fr;
         align-items: baseline; gap: clamp(14px, 2vw, 30px);
         border-top: 1px solid var(--line, #e7e7e4);
         padding-top: clamp(18px, 2.6vh, 30px); margin: clamp(26px, 4vh, 46px) 0 14px;
         font-size: clamp(17px, 1.35vw, 22px); font-weight: 500; line-height: 1.35;
         text-align: left; color: var(--ink, #101114); }
.punkt span { font-size: clamp(30px, 3.6vw, 54px); font-weight: 300; line-height: 1;
              letter-spacing: -0.02em; }
.punkt + .top-text { margin-left: clamp(70px, 9vw, 134px); }

/* причины: пары «иконка + абзац» внутри пронумерованного пункта -
   несколько подпунктов в сетку карточек, один - строкой рядом с иконкой.
   Карточки в сетке сворачиваются (как FAQ) - иначе при длинных абзацах
   ряд получается неровным и тяжёлым для чтения */
.prichiny {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin: clamp(16px, 2.4vh, 26px) 0 0 clamp(70px, 9vw, 134px);
  align-items: start;
}
.prichina {
  border: 1px solid rgba(0, 0, 0, 0.11);
  background: transparent;
  padding: clamp(18px, 1.7vw, 26px) clamp(16px, 1.5vw, 24px);
  transition: border-color .45s var(--ease);
}
.prichina:hover, .prichina.is-open { border-color: rgba(0, 0, 0, 0.28); }
.prichina-q {
  all: unset; cursor: pointer; box-sizing: border-box; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.prichina-q img {
  width: auto; height: 56px; max-width: 96px;
  display: block; object-fit: contain;
}
.prichina-q .tog { flex: none; width: 18px; height: 18px; position: relative; }
.prichina-q .tog::before, .prichina-q .tog::after {
  content: ""; position: absolute; background: var(--mute);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), opacity 0.3s;
}
.prichina-q .tog::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.prichina-q .tog::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.prichina.is-open .prichina-q .tog::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.prichina.is-open .prichina-q .tog::before { background: var(--accent); }
.prichina .a-wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16,1,0.3,1);
}
.prichina.is-open .a-wrap { grid-template-rows: 1fr; }
.prichina .a-inner { overflow: hidden; }
.prichina .a-inner p {
  margin: 14px 0 0; color: var(--mute);
  font-size: var(--t-small); line-height: 1.65;
}
.prichina--solo {
  border: 0; padding: 0;
  display: flex; flex-direction: row; align-items: flex-start;
  gap: clamp(18px, 2vw, 28px);
  margin: clamp(16px, 2.4vh, 26px) 0 0 clamp(70px, 9vw, 134px);
  max-width: 92ch;
}
.prichina--solo img { height: 64px; flex: 0 0 auto; width: auto; object-fit: contain; }
.prichina--solo p { margin: 0; color: var(--mute); font-size: inherit; line-height: 1.75; }
.prichina--solo:hover { border: 0; }
@media (max-width: 900px) {
  .prichiny { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .prichiny { grid-template-columns: 1fr; margin-left: 0; gap: 12px; }
  .prichina-q img { height: 44px; max-width: 60px; }
  .prichina--solo { margin-left: 0; border: 0; padding: 0; }
  .prichina--solo img { height: 44px; }
}


/* карточка в ряду: кадр, подпись жирным, текст - как у производителя */
.ryad figcaption { display: block; margin-top: 12px; text-align: center;
                   font-size: var(--t-small); line-height: 1.55; }
.ryad figcaption b { display: block; font-weight: 500; font-size: var(--t-medium);
                     margin-bottom: 6px; color: var(--ink, #101114); }
.ryad figcaption span { display: block; color: var(--mute, #6c7076); }
.ryad--1 { max-width: 1100px; margin-left: auto; margin-right: auto; }


/* вертикальный кадр на подложке: иначе он висит узкой колонкой в пустом поле */
.polosa--vert { background: var(--chalk, #f4f4f2); display: flex;
                justify-content: center; padding: clamp(26px, 4vh, 52px) 20px;
                margin: clamp(20px, 3vh, 40px) 0; }
.polosa--vert img { max-height: 560px; width: auto; max-width: 100%; }

/* обложка каталога ведёт на скачивание PDF - явная подпись-кнопка снизу */
a.polosa-doc { display: block; text-decoration: none; color: inherit; }
a.polosa-doc .polosa--vert { transition: background 0.3s var(--ease); flex-direction: column; align-items: center; }
a.polosa-doc:hover .polosa--vert { background: var(--paper, #ececea); }
a.polosa-doc figcaption {
  text-align: center; margin-top: clamp(14px, 2vh, 22px);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink, #101114); border: 1px solid var(--line, #d8d7d3);
  border-radius: 999px; padding: 10px 22px; display: inline-block;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
a.polosa-doc:hover figcaption { background: var(--ink, #101114); color: var(--paper, #fff); }


/* ── заявка: одна кнопка, два пути ───────────────────────────── */
.z-knopka { position: relative; display: flex; align-items: center;
            margin-left: clamp(4px, 0.8vw, 12px); }
.btn-zayavka { border: 1px solid rgba(255,255,255,0.35); color: #fff;
               padding: 9px 18px; font-size: var(--t-small); letter-spacing: 0.02em;
               text-decoration: none; white-space: nowrap;
               transition: background 0.35s var(--ease), border-color 0.35s var(--ease); }
.btn-zayavka:hover { background: var(--accent); border-color: var(--accent); }
@media (max-width: 1100px) { .z-knopka { display: none; } }


/* тонкое движение карточек */
.catcard { transition: transform 0.5s var(--ease), border-color 0.45s var(--ease),
                       box-shadow 0.5s var(--ease); }
.catcard:hover { transform: translateY(-3px);
                 box-shadow: 0 14px 34px rgba(16,17,20,0.07); }
.obcard, .galcard { overflow: hidden; }
.obcard img, .galcard img { transition: transform 0.8s var(--ease); }
.obcard:hover img, .galcard:hover img { transform: scale(1.03); }


/* растянутый логотип-строка: маленьким по центру, а не полосой */
.polosa--logo { display: flex; justify-content: center;
                margin: clamp(16px, 2.6vh, 32px) 0; }
.polosa--logo img { max-width: min(320px, 60%); height: auto; }


/* длинный перечень коротких пунктов: колонками, а не простынёй */
.perechen--cols { columns: 3; column-gap: clamp(24px, 3vw, 48px); }
.perechen--cols li { break-inside: avoid; }
@media (max-width: 900px) { .perechen--cols { columns: 2; } }
@media (max-width: 620px) { .perechen--cols { columns: 1; } }


/* нижняя плашка страницы: спокойная строка над подвалом */
.serie-note { border-top: 1px solid var(--line); padding-top: 22px;
              font-size: var(--t-small); line-height: 1.7; color: var(--mute);
              max-width: 72ch; }
.serie-note a { color: var(--ink); text-decoration: underline;
                text-decoration-color: var(--accent-light);
                text-underline-offset: 3px;
                transition: text-decoration-color 0.3s var(--ease); }
.serie-note a:hover { text-decoration-color: var(--accent); }


/* главная: тонкие линии между смысловыми блоками */
body.home main > .blk + .blk { border-top: 1px solid var(--line-soft); }


/* раздел с одной колонкой: компактная выпадашка под кнопкой, а не пустая полоса */
.mega--compact { left: var(--mega-left, 50%); right: auto;
                 width: max-content; min-width: 280px; max-width: 400px;
                 border: 1px solid rgba(255,255,255,0.08); }
.mega--compact .mega-inner { display: block;
                             padding: 20px 26px 22px; }
.mega--compact .mega-col { border-left: 0; padding-left: 0; }

/* мелкие пиктограммы и бейджи (не схемы!) - компактный показ; класс ставится
   по реальному viewBox файла; двойной класс, чтобы перебить поздние .polosa img */
.polosa.polosa--znak img {
  max-height: 220px; max-width: min(360px, 100%); width: auto;
}

/* панель в два яруса (Оборудование): сверху настенное и системное крупно, под
   ними пять решений в один ряд. Так панель повторяет деление, по которому
   устроен весь сайт, а не рассыпает семь равных колонок на 4+3. */
.mega--yarusy .mega-inner { display: block; }
/* верхний ярус: главные группы и картинка рядом. Картинке своя полоса, в общую
   сетку колонок она не входит - иначе снова съест половину ширины */
.mega--yarusy .mega-verh { display: flex; align-items: flex-start;
  gap: clamp(28px, 4vw, 56px); }
.mega--yarusy .mega-verh .mega-cols--glavnye { flex: 1 1 auto; min-width: 0; }
.mega--yarusy .mega-preview { flex: 0 0 clamp(240px, 19vw, 330px); }
.mega--yarusy .mega-cols { display: grid; max-width: none;
  gap: clamp(28px, 4vw, 56px); align-content: start; }
.mega-cols--glavnye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-cols--glavnye .mega-col h4 { font-size: clamp(18px, 1.5vw, 22px); }
/* списки главных групп идут одним столбцом: набор пунктов тот же, что и в
   остальных группах, и названия вроде «Модули входов и выходов» стоят в
   строку, а не ломаются пополам */
.mega-cols--glavnye .mega-lists { grid-template-columns: minmax(0, 1fr); }
.mega-cols--prochie { grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 34px);
  margin-top: clamp(24px, 3vh, 40px); padding-top: clamp(22px, 3vh, 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 1100px) {
  .mega-cols--glavnye { grid-template-columns: 1fr; }
  .mega-cols--prochie { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

/* широкая панель (8 групп Оборудования): плотнее, 4 группы в ряд - панель в 2 ряда */
.mega-inner--wide .mega-cols {
  gap: clamp(16px, 1.8vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* ── ВОССТАНОВЛЕНИЕ после перезаписи main.css устаревшей копией (dafc9e9):
   три блока, стёртых вместе с раскладкой меню. Текст дословно из версии
   30c5d10 (до регрессии). ── */

/* финальный баннер: фото с надписью поверх, как у производителя */
.banner-final { position: relative; overflow: hidden;
                min-height: clamp(260px, 38vh, 420px);
                display: flex; align-items: center; justify-content: center;
                margin-top: clamp(28px, 4vh, 56px); }
.banner-final img { position: absolute; inset: 0; width: 100%; height: 100%;
                    object-fit: cover; }
.banner-final::after { content: ""; position: absolute; inset: 0;
                       background: rgba(10, 11, 12, 0.45); }
.banner-final h2 { position: relative; z-index: 1; color: #fff;
                   font-size: clamp(24px, 2.6vw, 40px); font-weight: 300;
                   text-align: center; max-width: 26ch; padding: 0 20px;
                   margin: 0; }

/* каталог изделий (комплекты, наборы): фото сверху, значок и название под ним */
.kt-setka { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kt-karta { padding: 0; overflow: hidden; align-items: stretch; }
.kt-karta .kt-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
                     display: block; }
.kt-karta .ic { margin: 18px 0 0 20px; height: 34px; }
.kt-karta .ic img { max-height: 34px; }
.kt-karta h2 { margin: 10px 20px 20px; }

/* живое превью в меню: кадр заполняет рамку и плавно проявляется */
.mega-preview img { width: 100%; height: 100%; max-width: none; max-height: none;
                    object-fit: cover; display: block;
                    opacity: 0; transform: scale(1.04);
                    transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); }
.mega-preview img.is-shown { opacity: 1; transform: scale(1); }
.mega-preview figcaption { font-size: var(--t-caption); color: var(--chalk-mute); margin-top: 12px;
                           line-height: 1.5; min-height: 2.6em; }

/* карточка каталога может быть ссылкой - без подчёркивания и смены цвета */
a.kt-karta { text-decoration: none; color: inherit; }

/* первый экран с фото товара на белом фоне: показываем товар целиком,
   а не растягиваем мелкий кадр на весь экран с обрезкой */
.hero-solution--tovar { background: #101114; }
.hero-solution--tovar img {
  width: auto; height: auto;
  max-width: min(760px, 74vw); max-height: 58vh;
  object-fit: contain;
  inset: auto; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
}
.hero-solution--tovar::after {
  background: linear-gradient(180deg, rgba(16,17,20,0.30) 0%, rgba(16,17,20,0.10) 40%,
  rgba(16,17,20,0.88) 100%);
}
@media (max-width: 700px) {
  .hero-solution--tovar img { max-width: 84vw; max-height: 42vh; top: 38%; }
}

/* ── выравнивание кадров: подложка и ячейка облегают картинку ──
   было: вертикальный кадр 326px стоял на подложке во всю ширину экрана
   (1265px) - вокруг оставалось пустое поле в три четверти экрана. */
.polosa--vert {
  width: fit-content; max-width: min(100%, var(--shell));
  margin-inline: auto;
  padding: clamp(26px, 4vh, 52px) clamp(30px, 5vw, 90px);
}

/* ряд из двух кадров: ячейка не шире самого кадра, пара стоит по центру */
.ryad--2 {
  max-width: min(100%, 1100px); margin-inline: auto;
  justify-items: center;
}
.ryad--2 figure { width: fit-content; max-width: 100%; }

/* ряд из трёх и четырёх: то же, чуть шире */
.ryad--3, .ryad--4 { justify-items: center; }
.ryad--3 figure, .ryad--4 figure { width: fit-content; max-width: 100%; }

/* библиотека символов клавиш: значков много и они простые - плотная сетка
   мелкими плитками, а не четыре огромные рамки в ряд */
.simvoly .ryad--4 {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  max-width: var(--shell); margin-inline: auto;
}
.simvoly .ryad--4 img { max-height: 120px; }
.simvoly .ryad--4 figcaption { font-size: var(--t-meta); line-height: 1.35; margin-top: 8px; }
@media (max-width: 620px) {
  .simvoly .ryad--4 { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .simvoly .ryad--4 img { max-height: 92px; }
}


/* пояснение к изделию под подписью карточки */
.galcard-desc { margin: 6px 0 0; font-size: var(--t-small); line-height: 1.45;
                color: var(--muted, #6d6f6c); opacity: .85; }


/* перечень документов производителя: список ссылок на скачивание */
.dok-spisok { list-style: none; margin: clamp(14px, 2vh, 24px) 0 0;
              padding: 0; display: grid; gap: 10px; }
.dok-spisok li { padding-left: 18px; position: relative; }
.dok-spisok li::before { content: "\2193"; position: absolute; left: 0;
                         opacity: .5; }
.dok-spisok a { color: inherit; }


/* Текст сразу под обложкой документа относится к ней: название каталога на
   странице документации, версия и вес файла на карточке товара. До 28.08 у
   этого блока был симметричный отступ (49 сверху, 72 снизу), из-за чего
   подпись читалась как заголовок к СЛЕДУЮЩЕЙ обложке, и весь перечень
   каталогов выглядел съехавшим на один документ. Прижимаем к своей обложке. */
a.polosa-doc .polosa--vert { margin-bottom: 0; }
a.polosa-doc + .blk.tekst { padding-top: 12px; }
a.polosa-doc + .blk.tekst > .shell > :first-child { margin-top: 0; }

/* Но на карточке товара в том же блоке лежит ещё и заголовок СЛЕДУЮЩЕГО
   документа - после версии и веса файла. Его, наоборот, отодвигаем вниз,
   к его собственной обложке. Заголовок, стоящий в блоке первым (страница
   документации), это правило не задевает. */
a.polosa-doc + .blk.tekst .top-text + .top-motto { margin-top: clamp(60px, 8vh, 96px); }

/* Тот же заголовок с другой стороны: блок, который заканчивается заголовком,
   открывает документ под собой - значит и прижат должен быть к нему, а не
   висеть ровно посередине между двумя обложками. */
.blk.tekst:has(> .shell > .top-motto:last-child) + a.polosa-doc .polosa--vert { margin-top: 14px; }


/* ── каталоги документов: сетка карточек ─────────────────────────
   У производителя шесть обложек идут колонкой во всю ширину - шесть экранов
   прокрутки ради шести файлов. Здесь то же содержимое в сетке по три в ряд:
   обложка, название, описание и кнопка держатся одной карточкой, и связь
   «обложка - её название» больше не зависит от отступов. */
.dokgrid {
  display: grid; gap: clamp(18px, 2.2vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 28%, 380px), 1fr));
  margin-top: clamp(24px, 3.5vh, 44px);
  align-items: stretch;
}

a.dokcard {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(18px, 1.6vw, 26px);
  border: 1px solid rgba(0, 0, 0, 0.11);
  text-decoration: none; color: inherit;
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
a.dokcard:hover { border-color: rgba(0, 0, 0, 0.28); transform: translateY(-2px); }

.dokcard-oblozhka {
  display: flex; align-items: center; justify-content: center;
  background: var(--chalk, #f4f4f2);
  padding: clamp(18px, 2vw, 30px);
  aspect-ratio: 4 / 3;
}
.dokcard-oblozhka img {
  max-height: 100%; max-width: 100%; width: auto; height: auto;
  display: block; object-fit: contain;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  transition: transform .5s var(--ease);
}
a.dokcard:hover .dokcard-oblozhka img { transform: translateY(-3px) scale(1.02); }

.dokcard h2 {
  font-size: clamp(17px, 1.2vw, 21px); font-weight: 500; line-height: 1.3;
  letter-spacing: 0.01em; text-transform: none; margin: 0;
}
.dokcard p {
  margin: 0; color: var(--mute, #6c7076);
  font-size: var(--t-secondary); line-height: 1.55;
}
/* описание тянет карточку по высоте, кнопка у всех прижата к низу */
.dokcard p { flex: 1 1 auto; }

.dokcard-knopka {
  align-self: flex-start; margin-top: 4px;
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 10px 22px;
  border: 1px solid var(--line, #d8d7d3); border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease);
}
a.dokcard:hover .dokcard-knopka {
  background: var(--ink, #101114); color: var(--paper, #fff);
  border-color: var(--ink, #101114);
}

@media (max-width: 900px) {
  .dokgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dokgrid { grid-template-columns: 1fr; }
  /* в одну колонку квадратная обложка занимает пол-экрана: держим ей высоту */
  .dokcard-oblozhka { aspect-ratio: auto; height: 200px; padding: 16px; }
}


/* ── возможности Delégo: раскладушка ──────────────────────────────
   Четырнадцать возможностей и четыре раздела переехали сюда со своих страниц
   (28.08.2026, решение Кирилла: в меню остаются только «Сервер» и «Панель»).
   Лентой это 22 страницы А4, поэтому список свёрнут: видны названия, текст
   раскрывается по нажатию. Работает на <details>, без скриптов. */
.vozm-spisok { border-top: 1px solid var(--line, #d8d7d3); }

.vozm { border-bottom: 1px solid var(--line, #d8d7d3); }
.vozm > summary {
  list-style: none; cursor: pointer; padding: clamp(16px, 1.8vh, 24px) 34px
  clamp(16px, 1.8vh, 24px) 0; position: relative;
  font-size: clamp(17px, 1.2vw, 21px); font-weight: 500; line-height: 1.3;
  transition: color .3s var(--ease);
}
.vozm > summary::-webkit-details-marker { display: none; }
.vozm > summary:hover { color: var(--mute, #6c7076); }
/* плюс, который превращается в минус */
.vozm > summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center/14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 14px no-repeat;
  transform: translateY(-50%); transition: transform .35s var(--ease);
}
.vozm[open] > summary::after {
  background: linear-gradient(currentColor, currentColor) center/14px 1px no-repeat;
}

.vozm-telo { padding-bottom: clamp(14px, 2vh, 26px); }
/* внутри раскладушки блоки идут вплотную: свои отступы у них уже не нужны */
.vozm-telo .blk { padding-top: 0; padding-bottom: clamp(10px, 1.4vh, 18px); }
/* .blk.tekst .shell и .top-motto заданы выше и по специфичности сильнее -
   поэтому здесь тот же вес селектора, иначе внутренний заголовок выходит
   крупнее названия самой раскладушки, а текст встаёт с лишним отступом */
.vozm-telo .blk.tekst .shell { max-width: none; padding-inline: 0; }
.vozm-telo .blk.tekst .top-motto { font-size: clamp(15px, 1vw, 17px);
                                   font-weight: 500; margin: 18px 0 0; }
.vozm-telo .blk.tekst .top-motto:first-child { margin-top: 0; }
.vozm-telo .polosa, .vozm-telo .polosa--center { margin-block: clamp(14px, 2vh, 22px); }
.vozm-telo .polosa img, .vozm-telo .polosa--center img { width: 100%; max-width: 760px; height: auto; }
.vozm-telo .ryad { margin-top: clamp(14px, 2vh, 22px); }

/* ── вкладки: типы затенения на странице управления шторами ──
   Без JavaScript видны все части подряд, скрипт добавляет .is-gotovo
   и превращает их в переключатель. */
.vkladki-shapka { display: none; }
.vkladki.is-gotovo .vkladki-shapka {
  display: flex; flex-wrap: wrap; gap: 4px 28px;
  border-bottom: 1px solid var(--line, #d8d7d3); margin-bottom: 34px;
}
.vkladka {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: clamp(15px, 1.05vw, 17px); color: var(--mute, #6c7076);
  padding: 0 0 14px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.vkladka:hover { color: var(--ink, #16181c); }
.vkladka[aria-selected="true"] {
  color: var(--ink, #16181c); border-bottom-color: var(--ink, #16181c);
}
.vkladki.is-gotovo .vkladka-telo[hidden] { display: none; }
.vkladka-telo > .top-motto:first-child { margin-top: 0; }
.vkladki.is-gotovo .vkladka-telo > .top-motto:first-child { display: none; }
@media (max-width: 700px) {
  .vkladki.is-gotovo .vkladki-shapka { gap: 4px 18px; }
}


/* ── поиск: поле в шапке и страница результатов ─────────────────────
   Шапка идёт двумя строками: сверху логотип, поле и кнопка заявки,
   снизу меню. Поле стоит видимым, а не за лупой: по сайту ищут с
   артикулом в руке, и лишний шаг здесь стоит дороже, чем место в шапке.
   Кегли только ступенями --t-*, цвета только переменными. */

/* Шапка одной строкой: логотип, меню, поле поиска, кнопка заявки.
   Порядок задан order, потому что в разметке поле идёт перед меню. */
nav.primary { order: 2; }
.poisk-shapka { order: 3; }
.poisk-shapka + .z-knopka { order: 4; }

/* В покое поле узкое и не спорит с меню, при наборе раздвигается влево:
   места в строке ровно столько, сколько нужно в эту минуту. */
.poisk-shapka {
  position: relative; display: flex; align-items: center;
  width: 150px; height: 34px; flex: none;
  background: #17191b; border: 1px solid #2a2d30; border-radius: 2px;
  padding-inline: 12px; gap: 9px;
  transition: width .28s var(--ease), border-color .25s var(--ease);
}
.poisk-shapka:focus-within { border-color: var(--accent); }
/* Поле раздвигается при наборе только там, где в строке есть запас.
   На экранах уже 1700 px расширение выдавливало кнопку заявки за край,
   поэтому там поле стоит на месте, а раскрывается только список подсказок. */
@media (min-width: 1700px) {
  .poisk-shapka:focus-within { width: 360px; }
}
/* пункты меню не переносятся по словам: перенос ломал строку шапки */
nav.primary > a, nav.primary > button { white-space: nowrap; }

/* Поле заняло место, которого в строке не было: до 1600 px убираем подпись
   у логотипа и сближаем пункты меню, иначе кнопка заявки уходит за край. */
@media (max-width: 1600px) {
  .top .brand .ru { display: none; }
  nav.primary { gap: clamp(14px, 1.5vw, 24px); }
  .top { gap: clamp(14px, 1.6vw, 26px); }
}
.poisk-shapka + .z-knopka { flex: none; }
.poisk-lupa { width: 16px; height: 16px; flex: none; color: var(--chalk-mute); }
.poisk-shapka input {
  flex: 1; min-width: 0; background: none; border: 0; color: var(--chalk);
  font-family: var(--sans); font-size: var(--t-secondary); padding: 0;
}
.poisk-shapka input::placeholder {
  color: var(--chalk-mute); text-overflow: ellipsis;
}
.poisk-shapka input:focus { outline: none; }
.poisk-shapka input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }



/* подсказки: светлый лист под чёрной шапкой */
/* список шире поля: в 150 px названия не читаются */
.poisk-podskazki {
  position: absolute; top: calc(100% + 6px); right: -1px; z-index: 60;
  width: max(100%, 420px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
  max-height: 70vh; overflow-y: auto;
}
.poisk-podskazki[hidden] { display: none; }
.pk-stroka {
  display: block; padding: 11px 16px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.pk-stroka:last-child { border-bottom: 0; }
.pk-stroka:hover, .pk-stroka.is-vybran { background: var(--chalk); }
/* название в подсказке - не больше двух строк: подписи галерей бывают
   длинными, и без ограничения список превращается в стену текста */
.pk-stroka-zag { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: var(--t-small); line-height: 1.35; }
.pk-stroka-kod { display: block; font-size: var(--t-meta); color: var(--mute); margin-top: 2px; }
.pk-stroka-razdel { display: block; font-size: var(--t-micro); color: var(--mute);
  text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.pk-stroka--vse { font-size: var(--t-small); color: var(--accent-deep); background: var(--chalk); }
.pk-pusto { padding: 14px 16px; font-size: var(--t-small); color: var(--mute); }

/* страница результатов */
.pk-shapka { padding: clamp(50px, 9vh, 100px) 0 0; }
.pk-schet { color: var(--mute); font-size: var(--t-medium); margin-top: 14px; max-width: 760px; }
.pk-forma { display: flex; gap: 12px; margin-top: 26px; max-width: 620px; }
.pk-forma input {
  flex: 1; font-family: var(--sans); font-size: var(--t-medium);
  padding: 12px 16px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); border-radius: 2px;
}
.pk-forma input:focus { outline: none; border-color: var(--accent); }
.pk-forma button {
  font-family: var(--sans); font-size: var(--t-medium); cursor: pointer;
  padding: 12px 26px; border: 0; background: var(--accent); color: #fff;
  border-radius: 2px;
}
.pk-forma button:hover { background: var(--accent-deep); }
.pk-filtr-obertka { margin-top: 20px; display: flex; align-items: center; gap: 12px;
  font-size: var(--t-small); color: var(--mute); }
.pk-filtr-obertka select {
  font-family: var(--sans); font-size: var(--t-small); padding: 8px 12px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}

.pk-vydacha { display: grid; gap: 34px 46px; margin-top: 44px; }
@media (min-width: 860px) { .pk-vydacha { grid-template-columns: 1fr 1fr; } }

.pk-karta { display: grid; grid-template-columns: 132px 1fr; gap: 20px;
  align-items: start; border-top: 1px solid var(--line); padding-top: 22px; }
.pk-foto { display: block; }
.pk-foto img { width: 132px; height: 92px; object-fit: cover; display: block; }
.pk-net { display: block; width: 132px; height: 92px; background: var(--chalk); }
.pk-tip { font-size: var(--t-meta); color: var(--mute); text-transform: uppercase;
  letter-spacing: .06em; }
.pk-kod { font-size: var(--t-caption); color: var(--ink); margin-top: 4px; }
.pk-zag { font-size: var(--t-large); margin: 6px 0 0; line-height: 1.25; }
.pk-zag a { color: var(--accent-deep); text-decoration: none; }
.pk-zag a:hover { text-decoration: underline; }
.pk-opis { font-size: var(--t-small); color: var(--mute); margin-top: 8px; line-height: 1.5; }
.pk-knopka { display: inline-block; margin-top: 14px; padding: 9px 20px;
  background: var(--black); color: #fff; text-decoration: none;
  font-size: var(--t-small); border-radius: 2px; }
.pk-knopka:hover { background: var(--accent-deep); }
/* вторая кнопка позиции без своей страницы: раздел серии, как у производителя */
.pk-knopka--vtoraya { background: transparent; color: var(--ink); border: 1px solid var(--ink); margin-left: 8px; }
.pk-knopka--vtoraya:hover { background: var(--ink); color: #fff; }

/* телефон и планшет: меню в бургере, поле остаётся видимым и растягивается */
@media (max-width: 1080px) {
  /* Меню в бургере: поле занимает освободившееся место, бургер уходит
     вправо. Без этого он оставался посреди шапки, между полем и логотипом. */
  .poisk-shapka { width: auto; flex: 1; min-width: 0; margin-inline: 14px; }
  .poisk-shapka:focus-within { width: auto; }
  .burger { order: 5; }
}
@media (max-width: 560px) {
  /* логотип уступает место полю: на телефоне поиск важнее размера знака */
  .top .brand img { height: 20px; }
  .top { gap: 10px; }
  .poisk-shapka { height: 36px; padding-inline: 10px; margin-inline: 4px; }
  /* Список шире экрана вылезал за левый край: на телефоне ведём его от
     края до края, привязав к окну, а не к узкому полю. */
  .poisk-podskazki {
    position: fixed; top: calc(var(--header-h) - 2px);
    left: 8px; right: 8px; width: auto; max-height: calc(100vh - var(--header-h) - 16px);
  }
  .poisk-shapka input { font-size: var(--t-small); }
  .pk-karta { grid-template-columns: 84px 1fr; gap: 14px; }
  .pk-foto img, .pk-net { width: 84px; height: 62px; }
  .pk-forma { flex-direction: column; }
}

/* Позиция каталога: снимка у неё нет и не будет - в прайсе только код и
   описание. Пустое место под фото читалось как незагрузившаяся картинка,
   поэтому такая карточка идёт в одну колонку. */
.pk-karta--bez-foto { grid-template-columns: 1fr; }
.pk-opis--tiho { color: var(--mute); font-size: 0.9em; }
/* Статус у производителя: снимается или снят с производства. Пометка
   ставится на странице (таблица, подпись) и в карточке выдачи. */
.pk-status { color: var(--warn); font-size: 0.9em; margin: 6px 0 0; }
.pk-status--tiho { color: var(--mute); }
.snyat { display: inline-block; color: var(--warn); font-size: 0.85em; white-space: nowrap; }

/* Список отделок внутри карточки группы: два десятка исполнений одного
   изделия занимали выдачу отдельными строками, теперь раскрываются здесь */
.pk-otdelki { margin: 10px 0 14px; font-size: 0.9em; }
.pk-otdelki summary { cursor: pointer; color: var(--sinij, #0a84c1); }
.pk-otdelki summary:hover { text-decoration: underline; }
.pk-otdelki ul { margin: 10px 0 0; padding-left: 18px;
  max-height: 260px; overflow-y: auto; }
.pk-otdelki li { margin: 3px 0; color: var(--mute); }
.pk-otdelki li b { color: inherit; font-weight: 600; }

/* ── вопросы и ответы, глоссарий (25.09.2026) ─────────────────────
   Вопрос - та же раскладушка .vozm, что у возможностей Delégo: видно
   вопрос, ответ раскрывается по нажатию, без скриптов. */
.faq-oglavlenie { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: clamp(24px, 3vh, 40px); }
.faq-oglavlenie a { color: var(--mute, #6c7076); font-size: var(--t-small); }
.faq-oglavlenie a:hover { color: var(--ink, #1b1c1a); }
.faq-razdel { margin-top: clamp(32px, 5vh, 56px); scroll-margin-top: 100px; }
.faq-razdel:first-of-type { margin-top: 0; }
.faq-razdel h2 { font-size: clamp(20px, 1.6vw, 26px); font-weight: 400; margin: 0 0 8px; }
.otvet { max-width: 820px; }
.otvet p, .otvet li { font-size: var(--t-small); line-height: 1.65; }
.otvet p { margin: 0 0 12px; }
.otvet ul, .otvet ol { margin: 0 0 12px; padding-left: 1.2em; }
.otvet a, .glossarij a { text-decoration: underline; text-underline-offset: 3px; }
.glossarij { max-width: 860px; margin: 0; }
.glossarij dt { font-weight: 500; font-size: clamp(16px, 1.1vw, 18px); margin-top: 22px; }
.glossarij dt:first-child { margin-top: 0; }
.glossarij dt span { color: var(--mute, #6c7076); font-weight: 400; font-size: var(--t-small); margin-left: 8px; }
.glossarij dd { margin: 4px 0 0; font-size: var(--t-small); line-height: 1.6; color: var(--mute, #6c7076); }

/* ── доступность (ревью 25.09.2026) ────────────────────────────────
   Видимого фокуса для клавиатуры не было вовсе, ссылки «к содержимому» тоже. */
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.dark :focus-visible, .top :focus-visible, footer.site :focus-visible,
.hero :focus-visible, .hero-solution :focus-visible { outline-color: var(--accent-light); }
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 1000; padding: 10px 16px;
  background: var(--paper, #fafaf8); color: var(--ink, #1b1c1a); font-size: var(--t-small);
}
.skip:focus { top: 12px; }