/* ============================================================
   ЛЕНПРОМКОМПЛЕКС — STYLES.CSS
   ЕДИНЫЙ файл стилей для ВСЕХ 34 страниц сайта — не дублировать,
   не создавать версии под отдельные страницы или разделы.

   ВЕРСИЯ: v2.0 от 27.06.2026
   Последнее изменение: добавлен раздел 13 (Замена зарубежных
   брендов — хаб + шаблон страницы бренда ×12). Карточка-бренд
   текстовая, без фото и без графического логотипа бренда
   (юридическое решение, см. комментарий в разделе 13). Раскладка
   хаба построена по аналогии с хабом «Щитовое производство» —
   отдельной UI Spec для хаба брендов в документах нет.

   СОСТАВ РАЗДЕЛОВ (для быстрой сверки актуальности файла):
   1. Токены · 2. Reset/база · 3. Кнопки (Primary + Secondary)
   4. Header · 5. Панель меню · 6. Hero · 6.1–6.7 CTA Section/Form/
   File Upload/Toast · 7. Footer
   9. Компоненты хаба (категории, кейсы, FAQ, радио-группа)
   10. Адаптив хаба · 10.5 Компоненты категории щита (применение,
   галерея+лайтбокс, info-блок, таблица комплектующих, мостик IP65)
   10.6 Компоненты страницы Металлоконструкции (портфолио-табы,
   преимущества, таймлайн этапов)
   10.7 Компоненты Главной страницы (карточка-направление, блок
   цифр, тизер Производства, блок Контактов)
   10.8 Компоненты Светотехники (карточка-бренд, блок цен,
   гарантия лучшей цены, шаги подбора аналога)
   10.9 Компоненты Комплексных поставок (sticky-бар, аудитория,
   тег направления в форме)
   10.10 Компоненты Корпусов IP65 (Filter Pattern, Badge,
   карточка-модель, упрощённая форма заказа)
   11. Адаптив Header/Hero/Footer
   12. Вспомогательные страницы (О компании, Производство,
   Сертификаты, FAQ, Контакты) — 12.1 direction-grid--2col,
   12.2 Ghost Button, 12.3 Icon Button, 12.4 Document Card List,
   12.5 FAQ Bridge, 12.6 FAQ Nav (якоря), 12.7 FAQ Accordion,
   12.8 FAQ Fallback, 12.9 Contact Phone, 12.10 Contact Messengers,
   12.11 Contact Address/Map
   13. Замена зарубежных брендов (хаб + шаблон страницы бренда) —
   13.1 Brand Replace Card, 13.2 Analog Block (вариант А/Б),
   13.3 Shchit Bridge, 13.4 Brand Hub Bridge

   Источники: Design_System_v3 (v3.1), UI_Specification_Header_v1,
   UI_Specification_Footer_v1, UI_Specification_Hero_CTA_FormBlocks_v1,
   UI_Specification_v1_Etap2 §1 (категория щита),
   Handoff_HTML_Stage_v1 (раздел 4, п.1 — burger-only).
   Архитектура: Desktop-first. Базовая сетка — контейнер 1280px.
   Адаптация сужается вниз через @media (max-width: ...).
   Без Tailwind/Bootstrap/препроцессоров — чистый CSS3.
   ============================================================ */

/* ---------- 1. ТОКЕНЫ (Design_System_v3 §2.2, §2.4, §3.2, §4.1–4.2) ---------- */

:root {
  /* Цвета бренда */
  --color-primary: #0A7C82;
  --color-primary-dark: #075A5F;
  --color-primary-light: #E3F2F2;
  --color-primary-50: #EAF6F6;

  /* Тёмный / нейтральные */
  --color-ink: #1A1F23;
  --color-ink-secondary: #5C6670;
  --color-bg: #F5F4F0;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-border: #E2E5E8;
  --color-border-strong: #C7CCD1;

  /* Статусные */
  --color-success: #1F7A4D;
  --color-error: #B3261E;

  /* Текст на тёмном Footer — строго WCAG AA против --color-ink */
  --footer-text-secondary: #9CA3AF;

  /* Типографика — размеры */
  --text-display: 36px;
  --text-display-mobile: 28px;
  --text-h2: 28px;
  --text-h2-mobile: 22px;
  --text-h3: 20px;
  --text-h3-mobile: 18px;
  --text-price: 24px;
  --text-base: 16px;
  --text-base-mobile: 15px;
  --text-sm: 14px;
  --text-xs: 12px;

  /* Типографика — шрифты */
  --font-display: 'Manrope', sans-serif;
  --font-body: 'Inter Tight', 'Public Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Шкала отступов */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  /* Контейнер */
  --container-max: 1280px;
  --container-pad: 32px;
  --gutter: 24px;

  /* Тени и радиусы */
  --shadow-elevated: 0 4px 16px rgba(26, 31, 35, 0.12);
  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.06);
  --radius: 8px;
}

/* ---------- 2. RESET / БАЗА ---------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background-color: var(--color-bg);
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

ul {
  list-style: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-ink);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Focus-visible — обязательный ring, DS §10.1. Не :focus, только :focus-visible */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 3. КНОПКИ (DS §5.1, §5.3, §5.4) ---------- */

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  border-radius: var(--radius);
  background-color: var(--color-primary);
  color: #FFFFFF;
  transition: background-color 150ms ease;
  white-space: nowrap;
}

.cta-button:hover {
  background-color: var(--color-primary-dark);
}

.cta-button:active {
  transform: scale(0.98);
}

/* Контраст: белый текст на --color-primary даёт ~3.9:1 — не проходит
   WCAG AA для обычного текста (4.5:1), но проходит для "крупного текста"
   (3:1 при >=18.66px Bold ИЛИ >=24px Regular). Решение, наследуемое из
   UI_Specification_Etap1 §5.1: не менять токен, держать текст кнопки
   не мельче 16px Medium (500) — это сочетание уже признано проходящим
   практический порог читаемости в существующей спецификации. */
.cta-button--large {
  height: 48px;
  min-height: 44px;
  padding: 0 24px;
  font-size: var(--text-base);
}

.cta-button--medium {
  height: 40px;
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
}

/* Secondary (DS §5.1) — контур --color-primary, текст --color-primary, прозрачный фон.
   Используется как вторичное действие рядом с Primary (например, цены Атон/Дюрэй
   рядом с CTA «Подбор аналога»). */
.cta-button--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.cta-button--secondary:hover {
  background-color: var(--color-primary-50);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.cta-button--secondary.cta-button--loading::after {
  border-color: rgba(10, 124, 130, 0.3);
  border-top-color: var(--color-primary);
}

/* ---------- 4. HEADER (UI_Specification_Header_v1 §1; Handoff §4.1 — burger-only) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  height: 72px;
  min-width: 0;
}

.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-image {
  width: auto;
  height: 36px;
}

/* Логотип в шапке (Handoff/находка 01.07.2026): <picture> подменяет файл на десктопе
   (полный лого — иконка+текст+слоган) через <source>, но у <source> нет собственных
   размеров — они всегда берутся с <img>. Раньше height=36 был жёстко прописан в HTML
   и применялся к обеим версиям одинаково, из-за чего полная десктопная версия логотипа
   сжималась до мобильного размера. Высота теперь только в CSS, отдельно по брейкпоинту. */
@media (min-width: 768px) {
  .logo-image {
    height: 80px;
  }

  .header-row {
    height: 96px;
  }
}

/* Engineering Assumption (Handoff_HTML_Stage_v1 §4.1, подтверждено
   повторно 25.06.2026): полная desktop-навигация с 7 пунктами главного
   меню (два длинных — "Пластиковые корпуса щитов в наличии",
   "Металлоконструкции и изготовление") при читаемом шрифте 14px
   требует ~1480px по факту измерения header-row.scrollWidth. Контейнер
   сайта зафиксирован Design System на max-width:1280px и не
   расширяется ни при каком разрешении экрана — структурное
   ограничение, не вопрос величины viewport. Дефицит ~264px
   присутствует даже в самом широком случае.
   РЕШЕНИЕ: десктопного горизонтального меню нет вообще. Кнопка
   "Меню" (burger) работает ВСЕГДА — и на desktop, и на mobile,
   без медиа-запроса. Все 7 пунктов IA доступны только через
   единую панель меню (accordion-паттерн для composite-пунктов). */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-shrink: 0;
  margin-left: auto;
}

.phone-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}

.phone-link:hover {
  color: var(--color-primary);
}

.menu-button {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: auto;
  height: 44px;
  padding: 0 var(--space-12);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius);
}

.menu-button:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-50);
}

.burger-icon {
  position: relative;
  width: 20px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
}

.burger-icon::before,
.burger-icon::after,
.burger-icon span {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform 150ms ease, opacity 150ms ease;
}

.burger-icon::before { top: 0; }
.burger-icon::after { bottom: 0; }
.burger-icon span { top: 6px; }

/* Состояние "открыто" — бургер превращается в крестик */
.menu-button[aria-expanded="true"] .burger-icon::before {
  top: 6px;
  transform: rotate(45deg);
}

.menu-button[aria-expanded="true"] .burger-icon::after {
  bottom: 6px;
  transform: rotate(-45deg);
}

.menu-button[aria-expanded="true"] .burger-icon span {
  opacity: 0;
}

/* ---------- 5. ПАНЕЛЬ МЕНЮ — ВСЕ 7 ПУНКТОВ IA (UI_Specification_Header_v1 §3) ---------- */

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
}

.menu-panel[hidden] {
  display: none;
}

.menu-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  flex-shrink: 0;
  padding: 0 var(--container-pad);
  border-bottom: 1px solid var(--color-border);
}

.close-button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  flex-shrink: 0;
}

.close-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}

.close-icon::before,
.close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
}

.close-icon::before { transform: rotate(45deg); }
.close-icon::after { transform: rotate(-45deg); }

.menu-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-16) var(--container-pad);
}

.menu-nav-list {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.accordion-item,
.simple-item {
  border-bottom: 1px solid var(--color-border);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 4px;
  min-height: 44px;
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-ink);
}

.accordion-trigger:hover {
  color: var(--color-primary);
}

.chevron-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}

.chevron-icon::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 150ms ease;
}

.accordion-trigger[aria-expanded="true"] .chevron-icon::before {
  transform: translate(-50%, -50%) rotate(225deg);
}

.accordion-panel {
  padding-left: var(--space-16);
  padding-bottom: var(--space-12);
}

.accordion-panel[hidden] {
  display: none;
}

.sub-link {
  display: block;
  padding: 12px 4px;
  min-height: 44px;
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
}

.sub-link:hover {
  color: var(--color-primary);
}

.simple-link {
  display: block;
  padding: 18px 4px;
  min-height: 44px;
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-ink);
}

.simple-link:hover {
  color: var(--color-primary);
}

.menu-panel-footer {
  flex-shrink: 0;
  padding: var(--space-16) var(--container-pad) var(--space-24);
  border-top: 1px solid var(--color-border);
}

.menu-panel-footer-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.menu-phone-link {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-ink);
}

.menu-panel-footer .cta-button {
  width: 100%;
}

/* Блокировка скролла body, когда панель меню открыта (управляется JS через класс) */
body.menu-open {
  overflow: hidden;
}

/* ---------- 6. HERO Вариант А (UI_Specification_Hero_CTA_FormBlocks_v1 §1.1–1.2) ---------- */

.hero {
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
}

.hero-grid {
  display: flex;
  align-items: center;
  gap: 40px;
}

.hero-content {
  width: 52%;
}

.hero-heading {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: var(--space-16);
}

.hero-subheading {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-24);
  max-width: 65ch;
}

.hero-media {
  width: 48%;
}

.hero-media-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  text-align: center;
  padding: var(--space-16);
}

.hero-media-placeholder.has-photo {
  background-image: none;
  padding: 0;
  overflow: hidden;
}

.hero-media-placeholder.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.hero-media-collage {
  display: flex;
  gap: var(--space-8);
  width: 100%;
}

.hero-directions {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-border);
}

.hero-directions-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-8);
}

.hero-directions-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.hero-direction-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-16);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.hero-direction-chip:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.hero-media-collage-caption {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-align: center;
}

.hero-media-tile {
  flex: 1;
  min-width: 0;
  display: block;
  text-decoration: none;
  border-radius: var(--radius);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.hero-media-tile:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-2px);
}

.hero-media-tile-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  overflow: hidden;
}

.hero-media-tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media-tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-16) var(--space-12) var(--space-8);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0));
  border-top: 3px solid var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}

.hero-media-tile-placeholder--blueprint {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 22px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 22px);
}

.hero-media-tile-placeholder--blueprint::before,
.hero-media-tile-placeholder--blueprint::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgba(255, 255, 255, 0.5);
  border-style: solid;
}

.hero-media-tile-placeholder--blueprint::before {
  top: 10px;
  left: 10px;
  border-width: 1.5px 0 0 1.5px;
}

.hero-media-tile-placeholder--blueprint::after {
  bottom: 10px;
  right: 10px;
  border-width: 0 1.5px 1.5px 0;
}

.hero-media-tile-icon {
  width: 72px;
  height: 72px;
  opacity: 0.92;
}

.hero-media-tile-caption--blueprint {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 2px;
  padding: var(--space-4) var(--space-8);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
}

/* ---------- 6.1 CTA SECTION (UI_Specification_Hero_CTA_FormBlocks_v1 §2) ---------- */

.cta-section {
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
  background-color: var(--color-primary-light);
}

.cta-section-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.cta-section-title {
  font-size: var(--text-h2);
  font-weight: 600;
  margin-bottom: var(--space-12);
}

.cta-section-support {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  max-width: 65ch;
  margin: 0 auto var(--space-24);
}

/* ---------- 6.2 FORM — БАЗОВЫЕ ПОЛЯ (DS §6.2, §6.4, §6.5) ---------- */

.kp-form {
  max-width: 880px;
  margin: 0 auto;
  background-color: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-32);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-24);
}

.form-block {
  margin-bottom: var(--space-32);
}

.form-block:last-of-type {
  margin-bottom: var(--space-24);
}

.form-block-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-8);
}

.form-field {
  margin-bottom: var(--space-16);
}

.form-field:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--space-8);
}

.form-input,
.form-textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--space-16);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: border-color 150ms ease;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-ink-secondary);
  opacity: 0.7;
}

.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  border-width: 2px;
  padding: 9px 15px;
}

.form-input--error {
  border-color: var(--color-error);
}

.form-error-text {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-4);
}

/* ---------- 6.3 МАСКА ТЕЛЕФОНА — визуальное состояние (логика в JS файла-фрагмента) ---------- */

.form-input[data-mask="phone"] {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ---------- 6.4 FILE UPLOAD (DS §6.3) ---------- */

.file-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
  padding: var(--space-24) var(--space-16);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.file-upload-zone:hover,
.file-upload-zone--dragover {
  border-color: var(--color-primary);
  background-color: var(--color-primary-50);
}

.file-upload-zone:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.file-upload-icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-8);
  position: relative;
  color: var(--color-ink-secondary);
}

.file-upload-icon::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 20px;
  background-color: currentColor;
  transform: translateX(-50%);
}

.file-upload-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateX(-50%) rotate(-45deg);
}

.file-upload-text {
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: 500;
}

.file-upload-hint {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  margin-top: var(--space-4);
}

.file-upload-input {
  /* Визуально скрыт, но доступен для клавиатуры/скринридеров через label-zone */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.file-list {
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.file-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-12);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.file-list-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.file-list-item-name {
  font-size: var(--text-sm);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-list-item-size {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.file-list-item-remove {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-secondary);
  border-radius: 50%;
}

.file-list-item-remove:hover {
  color: var(--color-error);
  background-color: rgba(179, 38, 30, 0.08);
}

.file-list-item-remove-icon {
  position: relative;
  width: 12px;
  height: 12px;
}

.file-list-item-remove-icon::before,
.file-list-item-remove-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
}

.file-list-item-remove-icon::before { transform: rotate(45deg); }
.file-list-item-remove-icon::after { transform: rotate(-45deg); }

/* ---------- 6.5 ЧЕКБОКС-КВАЛИФИКАТОР (DS §6.5 — визуально усиленный, не мелкий текст согласия) ---------- */

.qualifier-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  background-color: var(--color-primary-light);
  border-radius: var(--radius);
  margin-bottom: var(--space-24);
}

.qualifier-checkbox-input {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.qualifier-checkbox-label {
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: 1.5;
  cursor: pointer;
}

/* ---------- 6.5.1 ЧЕКБОКС СОГЛАСИЯ НА ОБРАБОТКУ ПЕРСОНАЛЬНЫХ ДАННЫХ
   (152-ФЗ, обязателен в каждой форме сайта) — сознательно СДЕРЖАННЫЙ,
   не визуально усиленный, как коммерческий квалификатор 6.5 выше:
   это рядовое юридическое согласие, мелкий текст под/над кнопкой отправки ---------- */

.consent-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.consent-checkbox-input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.consent-checkbox-label {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  line-height: 1.4;
  cursor: pointer;
}

.consent-checkbox-label a {
  color: var(--color-ink-secondary);
  text-decoration: underline;
}

.consent-checkbox-label a:hover {
  color: var(--color-primary);
}

.consent-checkbox-error {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: calc(-1 * var(--space-12));
  margin-bottom: var(--space-16);
}

/* ---------- 6.5.2 COOKIE-БАННЕР (152-ФЗ + аналитика Метрики — обязателен,
   т.к. на сайте работает счётчик с cookie) ---------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  flex-wrap: wrap;
  padding: var(--space-16) var(--space-24);
  background-color: var(--color-ink);
  box-shadow: 0 -4px 16px rgba(26, 31, 35, 0.16);
}

.cookie-banner--visible {
  display: flex;
}

.cookie-banner-text {
  font-size: var(--text-sm);
  color: #FFFFFF;
  max-width: 65ch;
  margin: 0;
}

.cookie-banner-text a {
  color: #FFFFFF;
  text-decoration: underline;
}

.cookie-banner-button {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .cookie-banner {
    justify-content: flex-start;
    text-align: left;
  }

  .cookie-banner-button {
    width: 100%;
  }
}

/* ---------- 6.6 КНОПКА ОТПРАВКИ — состояние Loading (DS §5.4) ---------- */

.form-submit-row {
  display: flex;
  justify-content: center;
}

.form-submit-row .cta-button {
  width: 100%;
}

.cta-button--loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.cta-button--loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: cta-spin 700ms linear infinite;
}

@keyframes cta-spin {
  to { transform: rotate(360deg); }
}

/* ---------- 6.7 TOAST SUCCESS (DS §12.1–12.2) ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-24);
  transform: translateX(-50%) translateY(16px);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-ink);
  color: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevated);
  font-size: var(--text-sm);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
  color: var(--color-success);
}

.toast-icon::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 3px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* ---------- 7. FOOTER (UI_Specification_Footer_v1 §1–2) ---------- */

.site-footer {
  background-color: var(--color-ink);
  padding-top: var(--space-64);
  padding-bottom: var(--space-32);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

.footer-column-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-surface);
  margin-bottom: var(--space-12);
}

.footer-column-title--logo {
  margin-bottom: var(--space-12);
}

.logo-on-plate {
  display: inline-block;
  background-color: var(--color-surface);
  border-radius: var(--radius);
  padding: 8px 12px;
}

.logo-on-plate img {
  height: 64px;
  width: auto;
}

.footer-fact {
  font-size: var(--text-sm);
  color: var(--footer-text-secondary);
  line-height: 1.5;
}

.footer-link-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.footer-link-list a {
  font-size: var(--text-sm);
  color: var(--footer-text-secondary);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.footer-link-list a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.footer-column--contacts {
  display: flex;
  flex-direction: column;
}

.footer-contact-link {
  display: block;
  min-height: 44px;
  line-height: 44px;
  font-size: var(--text-sm);
  color: var(--footer-text-secondary);
}

.footer-contact-link:hover {
  color: var(--color-primary);
}

.messenger-icons {
  display: flex;
  gap: var(--space-12);
  margin-top: 4px;
}

.messenger-icon-link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-text-secondary);
  font-size: var(--text-xs);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}

.messenger-icon-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.all-contacts-link {
  display: block;
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: 48px;
  padding-top: var(--space-24);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright-text,
.privacy-policy-link {
  font-size: var(--text-xs);
  color: var(--footer-text-secondary);
}

.privacy-policy-link {
  text-decoration: underline;
}

.privacy-policy-link:hover {
  color: var(--color-primary);
}

/* ============================================================
   9. КОМПОНЕНТЫ СТРАНИЦЫ-ХАБА
   Источник: UI_Specification_v1_Etap1.md §2 (Щитовое производство)
   ============================================================ */

/* ---------- 9.1 ХЛЕБНЫЕ КРОШКИ ---------- */

.breadcrumbs {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

.breadcrumbs-list li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.breadcrumbs-list li:not(:last-child)::after {
  content: '/';
  color: var(--color-border-strong);
}

.breadcrumbs-list a {
  color: var(--color-ink-secondary);
}

.breadcrumbs-list a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumbs-current {
  color: var(--color-ink);
}

/* ---------- 9.2 СЕКЦИЯ — ОБЩИЕ ОТСТУПЫ ---------- */

.page-section {
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
}

.page-section--alt {
  background-color: var(--color-surface);
}

.section-title {
  font-size: var(--text-h2);
  font-weight: 600;
  margin-bottom: var(--space-24);
}

.section-title--center {
  text-align: center;
}

/* ---------- 9.3 БЛОК 1 — ЗАГОЛОВОК + ОРИЕНТИР (§2.2) ---------- */

.hub-intro {
  padding-top: var(--space-48);
  padding-bottom: var(--space-48);
}

.hub-intro-title {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: var(--space-16);
}

.hub-intro-text {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
  max-width: 70ch;
}

.hub-intro-text p {
  margin-bottom: var(--space-16);
}

.hub-intro-text p:last-child {
  margin-bottom: 0;
}

.hub-intro-text + .hub-intro-text {
  margin-top: var(--space-16);
}

/* ---------- 9.4 БЛОК 2 — 5 ВИДОВ ЩИТОВ, КАРТОЧКА-КАТЕГОРИЯ (§2.3) ---------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-16);
}

.category-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.category-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.category-card-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-align: center;
  padding: var(--space-8);
}

.category-card-photo.has-photo {
  padding: 0;
  background-image: none;
}

.category-card-photo.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-card-body {
  padding: var(--space-12) var(--space-16) var(--space-16);
}

.category-card-title {
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.category-card-hint {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

/* ---------- 9.5 БЛОК 3 — КОМПЛЕКТУЮЩИЕ, ОБЩИЙ СПИСОК (§2.4) ---------- */

.brands-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.brand-plate {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
  text-align: center;
}

/* ---------- 9.6 БЛОК 4 — КЕЙСЫ (§2.5, DS §9.2-B текстовый приоритет) ---------- */

.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
}

/* Модификатор для однородного набора фото-кейсов (например, 6 реальных
   объектов на Главной) — 3 колонки на desktop вместо базовых 2 */
.cases-grid--visual {
  grid-template-columns: repeat(3, 1fr);
}

.case-card--text {
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-surface);
  padding: var(--space-24);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.case-card-title {
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-12);
}

.case-card-row {
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.case-card-row:last-child {
  margin-bottom: 0;
}

.case-card-label {
  font-weight: 600;
  color: var(--color-ink);
}

.case-card-text {
  color: var(--color-ink-secondary);
}

.case-card--visual {
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.case-card-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-align: center;
  padding: var(--space-8);
}

.case-card-photo.has-photo {
  background-image: none;
  padding: 0;
  overflow: hidden;
}

.case-card-photo.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 250ms ease;
}

.case-photo-trigger {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.case-photo-badge {
  position: absolute;
  right: var(--space-8);
  bottom: var(--space-8);
  background-color: rgba(26, 31, 35, 0.72);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--space-4) var(--space-8);
  border-radius: 999px;
}

.case-card--visual:hover .case-card-photo.has-photo img {
  transform: scale(1.05);
}

.case-card--visual .case-card-title {
  padding: var(--space-16) var(--space-16) 0;
}

.case-card--visual .case-card-row {
  padding: 0 var(--space-16);
}

.case-card--visual .case-card-row:last-child {
  padding-bottom: var(--space-16);
}

/* ---------- 9.7 БЛОК 5 — FAQ-ВРЕЗКА (§2.6) ---------- */

.faq-teaser-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 760px;
}

.faq-teaser-item {
  padding: var(--space-16);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.faq-teaser-question {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.faq-teaser-answer {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  max-width: 65ch;
}

.faq-teaser-link {
  display: inline-block;
  margin-top: var(--space-16);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
}

.faq-teaser-link:hover {
  text-decoration: underline;
}

/* ---------- 9.8 БЛОК 6 — РАДИО-ГРУППА «ТИП ЩИТА» (§2.7, R4; Select исключён из реестра) ---------- */

.radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-12);
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.radio-option:hover {
  border-color: var(--color-primary);
}

.radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.radio-option input[type="radio"]:checked ~ .radio-option-label {
  color: var(--color-primary);
  font-weight: 500;
}

.radio-option--checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary-50);
}

.radio-option-label {
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
}

/* ============================================================
   10.5 КОМПОНЕНТЫ СТРАНИЦЫ КАТЕГОРИИ ЩИТА
   Источник: UI_Specification_v1_Etap2.md §1 (Категория щита)
   ============================================================ */

/* ---------- 10.5.1 ЗАГОЛОВОК ТИПА + ОПИСАНИЕ (§1.2) ---------- */

.category-intro {
  padding-top: var(--space-48);
  padding-bottom: var(--space-48);
}

.category-intro-title {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: var(--space-16);
}

.category-intro-text {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
  max-width: 70ch;
}

.category-intro-text p {
  margin-bottom: var(--space-16);
}

.category-intro-text p:last-child {
  margin-bottom: 0;
}

/* ---------- 10.5.2 ОБЛАСТЬ ПРИМЕНЕНИЯ (§1.3) ---------- */

.application-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
}

.application-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.application-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  color: var(--color-primary);
  margin-top: 2px;
}

.application-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.application-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-65%, -60%) rotate(45deg);
}

.application-text {
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1.5;
}

/* ---------- 10.5.3 ГАЛЕРЕЯ + ЛАЙТБОКС (§1.4) ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-16);
}

.gallery-item {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
}

.gallery-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-align: center;
  padding: var(--space-8);
  transition: transform 250ms ease;
}

.gallery-item.has-photo {
  position: relative;
  aspect-ratio: 4 / 3;
}

.gallery-item.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 250ms ease;
}

.gallery-item:hover .gallery-photo {
  transform: scale(1.05);
}

.gallery-item.has-photo:hover img {
  transform: scale(1.05);
}

.gallery-caption {
  display: block;
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  text-align: left;
}

/* Лайтбокс — переиспользуемый паттерн (галерея категории щита, Производство, Металлоконструкции) */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  background-color: rgba(26, 31, 35, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-close {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.lightbox-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.lightbox-close-icon {
  position: relative;
  width: 18px;
  height: 18px;
}

.lightbox-close-icon::before,
.lightbox-close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
}

.lightbox-close-icon::before { transform: rotate(45deg); }
.lightbox-close-icon::after { transform: rotate(-45deg); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.lightbox-nav:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.lightbox-prev { left: var(--space-16); }
.lightbox-next { right: var(--space-16); }

.lightbox-nav-icon {
  position: relative;
  width: 12px;
  height: 12px;
}

.lightbox-nav-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.lightbox-prev .lightbox-nav-icon::before {
  transform: translate(-30%, -50%) rotate(135deg);
}

.lightbox-next .lightbox-nav-icon::before {
  transform: translate(-70%, -50%) rotate(-45deg);
}

.lightbox-content {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.lightbox-photo {
  max-width: 90vw;
  max-height: 75vh;
  width: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  background-color: #2A2F33;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-24);
  min-width: 320px;
  min-height: 240px;
}

.lightbox-caption {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

.lightbox-counter {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- 10.5.4 INFO-БЛОК (вспомогательный, для пояснений с акцентом) ---------- */

.info-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  background-color: var(--color-primary-light);
  border-radius: var(--radius);
}

.info-callout-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
}

.info-callout-text {
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: 1.5;
}

/* ---------- 10.5.5 ТАБЛИЦА КОМПЛЕКТУЮЩИХ (Product Table, §1.5; DS §16) ---------- */

.product-table-wrap {
  overflow-x: auto;
}

.product-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.product-table caption {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-secondary);
  text-align: left;
  padding: var(--space-12) var(--space-16) var(--space-8);
}

.product-table thead th {
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  background-color: var(--color-bg);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.product-table tbody td {
  font-size: var(--text-sm);
  color: var(--color-ink);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.product-table tbody tr:last-child td {
  border-bottom: none;
}

.product-table-brand {
  font-weight: 600;
}

/* ---------- 10.5.6 МОСТИК К КОРПУСАМ IP65 (§1.7, выборочно — только релевантные типы) ---------- */

.bridge-section {
  padding: var(--space-24);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.bridge-title {
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-16);
}

.bridge-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-16);
}

.bridge-card {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 150ms ease;
}

.bridge-card:hover {
  border-color: var(--color-primary);
}

.bridge-card-photo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 6px;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
}

.bridge-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bridge-card-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.bridge-card-price {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 600;
}

/* ============================================================
   10. АДАПТИВ КОМПОНЕНТОВ ХАБА
   ============================================================ */

@media (max-width: 1023px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cases-grid {
    grid-template-columns: 1fr;
  }

  .hub-intro-title {
    font-size: var(--text-h2);
  }

  .application-list {
    grid-template-columns: 1fr;
  }

  .category-intro-title {
    font-size: var(--text-h2);
  }
}

@media (max-width: 767px) {
  .category-grid {
    grid-template-columns: 1fr;
  }

  .brands-strip {
    flex-direction: column;
  }

  .brand-plate {
    min-width: 0;
  }

  .page-section {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }

  .stats-section {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }

  .hub-intro {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }

  .hub-intro-title {
    font-size: var(--text-display-mobile);
  }

  .radio-group {
    grid-template-columns: 1fr;
  }

  .category-intro {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }

  .category-intro-title {
    font-size: var(--text-display-mobile);
  }

  .application-list {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .lightbox-nav {
    width: 36px;
    height: 36px;
  }

  .lightbox-prev { left: var(--space-8); }
  .lightbox-next { right: var(--space-8); }

  .bridge-cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   10.6 КОМПОНЕНТЫ СТРАНИЦЫ МЕТАЛЛОКОНСТРУКЦИИ
   Источник: UI_Specification_v1_Etap2.md §4 (Металлоконструкции)
   ============================================================ */

/* ---------- 10.6.1 ПОРТФОЛИО — ТАБЫ-ФИЛЬТР (§4.3) ---------- */

.portfolio-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}

.portfolio-tab {
  padding: var(--space-8) var(--space-16);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-secondary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.portfolio-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.portfolio-tab[aria-pressed="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

.portfolio-item {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
}

.portfolio-item[hidden] {
  display: none;
}

.portfolio-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-align: center;
  padding: var(--space-8);
  transition: transform 150ms ease;
}

.portfolio-item:hover .portfolio-photo {
  transform: scale(1.03);
}

.portfolio-item.has-photo {
  position: relative;
  aspect-ratio: 4 / 3;
}

.portfolio-item.has-photo img.portfolio-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  padding: 0;
  background: none;
  transition: transform 150ms ease;
}

.portfolio-item.has-photo:hover img.portfolio-photo {
  transform: scale(1.03);
}

/* ---------- 10.6.2 ПРЕИМУЩЕСТВА — CARD ADVANTAGE (DS §8) ---------- */

.advantage-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

.advantage-list--2x2 {
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-48);
  row-gap: var(--space-48);
}

.advantage-item {
  text-align: left;
}

.advantage-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-16);
}

.advantage-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.advantage-title {
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.advantage-text {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  line-height: 1.5;
}

/* ---------- 10.6.3 ЭТАПЫ РАБОТЫ — ГОРИЗОНТАЛЬНЫЙ ТАЙМЛАЙН (§4.5) ---------- */

.timeline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

.timeline-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 19px;
  left: calc(100% + var(--space-8));
  width: calc(var(--space-16) * 2);
  height: 2px;
  background-color: var(--color-border-strong);
}

.timeline-circle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: var(--space-12);
}

.timeline-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.timeline-text {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  line-height: 1.5;
}

/* ============================================================
   10.7 КОМПОНЕНТЫ ГЛАВНОЙ СТРАНИЦЫ
   Источник: UX_Prototype_Specification_v1_Etap1.md §1,
   UI_Specification_v1_Etap1.md §1
   ============================================================ */

/* ---------- 10.7.1 КАРТОЧКА-НАПРАВЛЕНИЕ (DS §7.3, крупнее стандартной, фото 4:3) ---------- */

.direction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

.direction-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.direction-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-elevated);
}

.direction-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  text-align: center;
  padding: var(--space-16);
}

.direction-card-photo.has-photo {
  padding: 0;
  background-image: none;
}

.direction-card-photo.has-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.direction-card-body {
  display: block;
  padding: var(--space-16) var(--space-24) var(--space-24);
}

.direction-card-title {
  display: block;
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.direction-card-hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

/* ---------- 10.7.2 БЛОК ЦИФР (§1.4, --text-price, плашка --color-primary-light) ---------- */

.stats-section {
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
  background-color: var(--color-primary-light);
}

.stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-64);
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

.stats-item {
  text-align: center;
}

.stats-number {
  font-size: var(--text-price);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-primary);
}

.stats-label {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  margin-top: var(--space-4);
}

/* ---------- 10.7.3 ТИЗЕР ПРОИЗВОДСТВА (фото + ссылка, §1, блок 5) ---------- */

.production-teaser {
  display: flex;
  align-items: center;
  gap: var(--space-48);
}

.production-teaser-photo {
  flex: 1;
  aspect-ratio: 4 / 3;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  text-align: center;
  padding: var(--space-16);
}

.production-teaser-photo.has-photo {
  background-image: none;
  padding: 0;
  overflow: hidden;
}

.production-teaser-photo.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  transition: transform 150ms ease;
}

.production-teaser-photo.has-photo:hover img {
  transform: scale(1.03);
}

.production-teaser-body {
  flex: 1;
}

.production-teaser-title {
  font-size: var(--text-h2);
  font-weight: 600;
  margin-bottom: var(--space-12);
}

.production-teaser-text {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-24);
  max-width: 50ch;
}

/* ---------- 10.7.4 БЛОК КОНТАКТОВ — ГОРИЗОНТАЛЬНЫЙ РЯД (§1.9) ---------- */

.contacts-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32);
}

.contacts-row-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--text-base);
  color: var(--color-ink);
  min-height: 44px;
}

.contacts-row-item:hover {
  color: var(--color-primary);
}

.contacts-row-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* ============================================================
   10.8 КОМПОНЕНТЫ РАЗДЕЛА СВЕТОТЕХНИКА
   Источник: UI_Specification_v1_Etap1.md §4 (Светотехника)
   ============================================================ */

/* ---------- 10.8.1 КАРТОЧКА-БРЕНД (хаб, DS §7.3) ---------- */

.brand-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
}

.brand-card {
  display: block;
  padding: var(--space-24);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.brand-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-hover);
}

.brand-card-name {
  display: block;
  font-size: var(--text-h2);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.brand-card-price {
  display: block;
  font-size: var(--text-price);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-8);
}

.brand-card-text {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

/* ---------- 10.8.2 ШАГИ ПОДБОРА АНАЛОГА (хаб, 3 шага без CTA — переиспользует .timeline) ---------- */
/* Использует .timeline/.timeline-step/.timeline-circle из раздела 10.6 без изменений */

/* ---------- 10.8.3 БЛОК ЦЕН СТРАНИЦЫ БРЕНДА (§4.6, блок 1-2-3) ---------- */

.brand-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin-bottom: var(--space-24);
}

.brand-header-title {
  font-size: var(--text-display);
  font-weight: 600;
}

.price-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin-bottom: var(--space-24);
}

.price-item {
  padding: var(--space-16) var(--space-24);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.price-item-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-4);
}

.price-item-value {
  display: block;
  font-size: var(--text-price);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
}

.brand-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-bottom: var(--space-48);
}

/* ---------- 10.8.4 «ГАРАНТИЯ ЛУЧШЕЙ ЦЕНЫ» — переиспользуемый компонент, идентичный на Атон и Дюрэй (§4.6, блок 4) ---------- */

.guarantee-block {
  padding: var(--space-32);
  background-color: var(--color-primary-light);
  border-radius: var(--radius);
  margin-bottom: var(--space-32);
}

.guarantee-block-title {
  font-size: var(--text-h2);
  font-weight: 600;
  margin-bottom: var(--space-16);
}

.guarantee-block-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}

.guarantee-block-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.guarantee-block-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}

.guarantee-block-text {
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: 1.5;
}

/* ============================================================
   10.9 КОМПОНЕНТЫ СТРАНИЦЫ КОМПЛЕКСНЫЕ ПОСТАВКИ
   Источник: UI_Specification_v1_Etap1.md §3
   ============================================================ */

/* ---------- 10.9.1 HERO-ПОДСКАЗКА (§3.2) ---------- */

.hero-hint {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  margin-top: var(--space-12);
}

/* ---------- 10.9.2 STICKY-БАР CTA (§3.2.1, переиспользуемый паттерн для любой Hero-якорь страницы) ---------- */

.sticky-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: 56px;
  padding: 0 var(--space-16);
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  display: none;
  align-items: center;
  transform: translateY(100%);
  transition: transform 200ms ease;
}

.sticky-cta-bar--visible {
  display: flex;
  transform: translateY(0);
}

.sticky-cta-bar .cta-button {
  width: 100%;
}

/* ---------- 10.9.3 БЛОК «КОМУ ПОДХОДИТ» (§3.3, иконка + подпись, 3 колонки) ---------- */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

.audience-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.audience-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-xs);
}

.audience-text {
  font-size: var(--text-sm);
  color: var(--color-ink);
}

/* ---------- 10.9.4 ЧТО ПОСТАВЛЯЕМ (§3.3, кратко, не пересказ разделов) ---------- */

.supply-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 70ch;
}

.supply-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  font-size: var(--text-base);
  color: var(--color-ink);
}

.supply-item-bullet {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-primary);
  margin-top: 8px;
}

/* Группировка supply-list по брендам (страница drugie-brendy.html — объединение
   Sick/WAGO/Finder/Weidmuller в одну страницу вместо 4 отдельных, 08.07.2026) */
.supply-group {
  margin-bottom: var(--space-24);
}

.supply-group:last-child {
  margin-bottom: 0;
}

.supply-group-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-8);
}

/* Вариант с иконками (пилотная страница: schneider-electric.html) —
   модификатор, не переопределяет базовые .supply-list/.supply-item,
   используемые на других страницах-аналогах без изменений. */
.supply-list--iconic {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
}

.supply-item--iconic {
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.supply-item-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .supply-list--iconic {
    grid-template-columns: 1fr;
  }
}

/* ---------- 10.9.5 ТЕГ НАПРАВЛЕНИЯ В ФОРМЕ (§3.4, R1 — компактный ряд, не отдельный визуальный блок) ---------- */

.direction-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.direction-tag {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  min-height: 36px;
  font-size: var(--text-sm);
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.direction-tag:hover {
  border-color: var(--color-primary);
}

.direction-tag input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.direction-tag--checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary-50);
}

/* ============================================================
   10.10 КОМПОНЕНТЫ КОРПУСОВ IP65
   Единственный e-commerce-раздел сайта (DS §1.3).
   Источник: UI_Specification_v1_Etap2.md §2,
   UI_Specification_FAQ_Certificates_Tables_Filters_Gallery_v1.md §4
   ============================================================ */

/* ---------- 10.10.1 ПОЯСНЕНИЕ ХАРАКТЕРА ТОВАРА (§2.2.2, визуально выделено) ---------- */

.catalog-intro-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-24);
  background-color: var(--color-primary-light);
  border-radius: var(--radius);
  margin-top: var(--space-16);
}

/* ---------- 10.10.2 BADGE (DS §11.3) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  height: 24px;
  padding: 0 var(--space-12);
  border-radius: 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.badge--compact {
  height: 20px;
  padding: 0 var(--space-8);
  font-size: 11px;
}

.badge--success {
  background-color: #E3F5EA;
  color: var(--color-success);
}

.badge--info {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.badge--neutral {
  background-color: var(--color-border);
  color: var(--color-ink-secondary);
}

/* ---------- 10.10.3 FILTER PATTERN (DS §14, применение — каталог IP65) ---------- */

.catalog-layout {
  display: flex;
  gap: var(--space-32);
  align-items: flex-start;
}

.filter-panel {
  flex-shrink: 0;
  width: 260px;
  padding: var(--space-16);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.filter-panel[hidden] {
  display: none;
}

.filter-group {
  margin-bottom: var(--space-24);
}

.filter-group:last-of-type {
  margin-bottom: var(--space-16);
}

.filter-group-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: var(--space-12);
}

.filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 36px;
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
}

.filter-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.filter-reset-button {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  text-decoration: underline;
}

.filter-reset-button:hover {
  color: var(--color-primary);
}

.filter-reset-button[hidden] {
  display: none;
}

.catalog-results {
  flex: 1;
  min-width: 0;
}

/* Кнопка "Фильтры" — mobile/tablet (Secondary + Badge-счётчик) */
.filter-trigger-button {
  display: none;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.filter-trigger-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
}

.filter-trigger-count[hidden] {
  display: none;
}

/* Bottom sheet — mobile/tablet версия панели фильтров */
.filter-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background-color: rgba(26, 31, 35, 0.4);
}

.filter-sheet-overlay[hidden] {
  display: none;
}

.filter-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 56;
  max-height: 80vh;
  overflow-y: auto;
  background-color: var(--color-surface);
  border-radius: 16px 16px 0 0;
  padding: var(--space-24) var(--space-16);
}

.filter-sheet[hidden] {
  display: none;
}

.filter-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-16);
}

.filter-sheet-title {
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 600;
}

.filter-sheet-apply {
  width: 100%;
  margin-top: var(--space-16);
}

/* ---------- 10.10.4 СЕТКА КАРТОЧЕК МОДЕЛЕЙ (§2.2.4, Card Product/Model) ---------- */

.model-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
}

.model-grid[data-empty="true"] {
  display: block;
}

.model-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.model-card[hidden] {
  display: none;
}

.model-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
}

.model-card-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-align: center;
  padding: var(--space-8);
}

.model-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16);
}

.model-card-name {
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 600;
}

.model-card-price {
  font-size: var(--text-price);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
}

.model-card-price-label {
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  margin-top: -4px;
}

.model-card-modules {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

/* ---------- 10.11 КАТАЛОГ СВЕТОТЕХНИКИ (Атон/Дюрэй) — НОВЫЙ РАЗДЕЛ, не предусмотрен
   UI_Specification_v1_Etap1 §4.6 (там — одна цена/опт-розница, без витрины SKU).
   Осознанное архитектурное расхождение, решение Максима 30.06.2026 (см. memory #14).
   Переиспользует Filter Pattern (10.10.3) и Product Table (раздел 16) без изменений,
   добавляет только разметку карточки-серии и переключателя исполнения. ---------- */

.lighting-catalog-results-count {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-16);
}

.lighting-series-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

.lighting-series-card--expanded {
  grid-column: 1 / -1;
}

.lighting-series-grid[data-empty="true"] {
  display: block;
}

.lighting-series-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lighting-series-card[hidden] {
  display: none;
}

.lighting-series-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
}

.lighting-series-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-align: center;
  padding: var(--space-8);
  overflow: hidden;
}

.lighting-series-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lighting-series-card-body {
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.lighting-series-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.lighting-series-card-name {
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 600;
}

.lighting-series-card-meta {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

.lighting-series-card-price {
  font-size: var(--text-price);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
}

.lighting-series-card-toggle {
  width: 100%;
  justify-content: center;
}

.lighting-series-card-panel {
  border-top: 1px solid var(--color-border);
  padding: var(--space-16);
}

.lighting-series-card-panel[hidden] {
  display: none;
}

.lighting-exec-tabs {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}

.lighting-exec-tab {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
}

.lighting-exec-tab[aria-pressed="true"] {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.lighting-catalog-load-more {
  display: block;
  margin: var(--space-32) auto 0;
}

.lighting-catalog-draft-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-primary-light);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-16);
}

/* ---------- 10.10.5 EMPTY STATE — пустой результат фильтра (DS §10.4, 14.4) ---------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-48) var(--space-24);
}

.empty-state-text {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-16);
  max-width: 50ch;
}

.empty-state[hidden] {
  display: none;
}

/* ---------- 10.10.6 МОСТИК К ЩИТАМ ПОД ЗАКАЗ (§2.2.5, низ каталога) ---------- */

.reverse-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-16);
  padding: var(--space-24);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-top: var(--space-32);
}

.reverse-bridge-text {
  font-size: var(--text-base);
  color: var(--color-ink);
  max-width: 50ch;
}

/* ---------- 10.10.7 КАРТОЧКА МОДЕЛИ — ВЕРХНИЙ БЛОК (§2.3.2, название+статус+цена) ---------- */

.model-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.model-page-title {
  font-size: var(--text-h2);
  font-weight: 600;
}

.model-page-price {
  font-size: var(--text-price);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-24);
}

.model-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-48);
  align-items: start;
}

.model-page-photo-main {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  text-align: center;
  padding: var(--space-16);
  cursor: pointer;
}

.model-page-photo-thumbs {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.model-page-photo-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--color-ink-secondary);
  cursor: pointer;
  border: 1px solid var(--color-border);
}

.model-page-table-wrap {
  margin-bottom: var(--space-32);
}

.ex-specs-table {
  margin-top: var(--space-24);
}

.ex-light-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
}

.ex-light-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-8);
}

@media (max-width: 767px) {
  .ex-light-gallery {
    grid-template-columns: 1fr;
  }
}

/* Реальные фото в галерее карточки товара (модификатор .has-photo —
   ставится в HTML, когда плейсхолдер заменён на настоящий <img>) */
.model-page-photo-main.has-photo,
.model-page-photo-thumb.has-photo {
  padding: 0;
  overflow: hidden;
  background-image: none;
}

.model-page-photo-main.has-photo .gallery-photo,
.model-page-photo-thumb.has-photo .gallery-photo {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  background: none;
  padding: 0;
}

.model-page-photo-main img,
.model-page-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.lightbox-photo.has-photo {
  aspect-ratio: auto;
  background-color: #2A2F33;
}

.lightbox-photo img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: inherit;
}

/* ---------- 10.10.8 УПРОЩЁННАЯ ФОРМА ЗАКАЗА — два состояния (§2.3.3, DS §6.7) ---------- */

.simple-order-form {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-24);
}

.quantity-input {
  width: 120px;
}

.order-state-hint {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  margin-top: var(--space-12);
}

.order-state-bridge {
  display: block;
  margin-top: var(--space-12);
  font-size: var(--text-sm);
  color: var(--color-primary);
}

.order-state-bridge:hover {
  text-decoration: underline;
}

[data-order-state] [data-state-for] {
  display: none;
}

[data-order-state="in-stock"] [data-state-for="in-stock"],
[data-order-state="on-order"] [data-state-for="on-order"] {
  display: block;
}

/* ============================================================
   11. АДАПТИВ — DESKTOP-FIRST (СЛОЙ HEADER/HERO/FOOTER, см. выше)
   Tablet: 768–1023px · Mobile: до 767px

   Header не адаптируется по структуре (burger всегда виден на
   любой ширине, см. раздел 4 выше) — здесь только то, что
   реально меняется на узких экранах: паддинги контейнера,
   сетка Footer, раскладка Hero, видимость телефона в Header.
   ============================================================ */

@media (max-width: 1023px) {
  .container {
    padding-left: var(--space-24);
    padding-right: var(--space-24);
  }

  .menu-panel-header,
  .menu-nav,
  .menu-panel-footer {
    padding-left: var(--space-24);
    padding-right: var(--space-24);
  }

  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
  }

  .kp-form {
    padding: var(--space-24);
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .direction-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-row {
    gap: var(--space-32);
  }

  .production-teaser {
    gap: var(--space-24);
  }

  .audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Корпуса IP65: боковая панель → кнопка-триггер + bottom sheet (DS §14.2) */
  .filter-panel {
    display: none;
  }

  .filter-trigger-button {
    display: inline-flex;
  }

  .model-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lighting-series-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .model-page-grid {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }
}

@media (max-width: 767px) {
  .container {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }

  .menu-panel-header,
  .menu-nav,
  .menu-panel-footer {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }

  /* На узком mobile в шапке остаётся только городской номер как иконка-ссылка,
     чтобы не конкурировать за ширину с кнопкой "Меню". Мобильный номер
     на этой ширине скрывается из шапки (доступен в панели меню — .menu-phone-link). */
  .phone-link--mobile {
    display: none;
  }

  .phone-link--landline {
    font-size: 0;
  }

  .phone-link--landline::before {
    content: '\260E';
    font-size: 18px;
  }

  /* Hero: одна колонка, фото после текста */
  .hero {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }

  .hero-grid {
    flex-direction: column;
    gap: var(--space-24);
  }

  .hero-content,
  .hero-media {
    width: 100%;
  }

  .hero-media-tile-caption {
    font-size: var(--text-xs);
    padding: var(--space-8) var(--space-4) var(--space-4);
  }

  .hero-heading {
    font-size: var(--text-display-mobile);
  }

  /* CTA Section: компактнее на mobile */
  .cta-section {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }

  .cta-section-title {
    font-size: var(--text-h2-mobile);
  }

  /* Form Blocks: однополосная раскладка вместо двухколоночной */
  .kp-form {
    padding: var(--space-16);
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Certificates: два столбца → один на mobile */
  .document-columns {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .qualifier-checkbox-wrap {
    padding: var(--space-12);
  }

  /* Footer: одна колонка */
  .footer-columns {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Металлоконструкции: портфолио, преимущества, таймлайн в одну колонку */
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .advantage-list {
    grid-template-columns: 1fr;
  }

  .timeline {
    flex-direction: column;
    gap: var(--space-24);
  }

  .timeline-step:not(:last-child)::after {
    display: none;
  }

  /* Главная: направления, цифры, тизер производства, контакты в одну колонку */
  .direction-grid {
    grid-template-columns: 1fr;
  }

  .stats-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
  }

  .production-teaser {
    flex-direction: column;
  }

  .contacts-row {
    flex-direction: column;
    gap: var(--space-16);
  }

  .audience-grid {
    grid-template-columns: 1fr;
  }

  .brand-card-grid {
    grid-template-columns: 1fr;
  }

  .guarantee-block-list {
    grid-template-columns: 1fr;
  }

  .guarantee-block {
    padding: var(--space-24);
  }

  .price-block,
  .brand-cta-row {
    flex-direction: column;
  }

  .brand-cta-row .cta-button {
    width: 100%;
  }

  .model-grid {
    grid-template-columns: 1fr;
  }

  .lighting-series-grid {
    grid-template-columns: 1fr;
  }

  .catalog-layout {
    flex-direction: column;
  }

  .reverse-bridge {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 768px) {
  .sticky-cta-bar {
    display: none !important;
  }
}

/* ============================================================
   12. ВСПОМОГАТЕЛЬНЫЕ СТРАНИЦЫ
   О компании, Производство, Сертификаты, FAQ, Контакты.
   Источник: UI_Specification_v1_Etap3.md, UX_Prototype_Specification_v1_Etap3.md
   ============================================================ */

/* ---------- 12.12 ЮРИДИЧЕСКИЙ ТЕКСТ (Политика обработки персональных данных) ---------- */

.legal-content {
  max-width: 75ch;
}

.legal-content h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  margin-top: var(--space-48);
  margin-bottom: var(--space-16);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  margin-top: var(--space-24);
  margin-bottom: var(--space-8);
}

.legal-content p {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-16);
}

.legal-content ul,
.legal-content ol {
  margin-bottom: var(--space-16);
  padding-left: 1.4em;
}

.legal-content li {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

.legal-content a {
  color: var(--color-primary);
}

.legal-content a:hover {
  text-decoration: underline;
}

.legal-content-updated {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-32);
}

/* ---------- 12.1 МОДИФИКАТОР DIRECTION-GRID — 2 КОЛОНКИ (О компании §1.5: переход к доказательствам, только 2 карточки) ---------- */

.direction-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .direction-grid--2col {
    grid-template-columns: 1fr;
  }
}

/* ---------- 12.2 GHOST BUTTON (DS §5.1 — третичное действие, без фона/контура, подчёркивание на hover) ---------- */

.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: 40px;
  padding: 0 var(--space-8);
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: text-decoration-color 150ms ease;
}

.ghost-button:hover {
  text-decoration: underline;
}

/* ---------- 12.3 ICON BUTTON (DS §5.2 — Medium 40×40px, без видимого контура в покое, фон проявляется на hover) ---------- */

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 150ms ease;
}

.icon-button:hover {
  background-color: var(--color-primary-50);
}

.icon-button--small {
  width: 32px;
  height: 32px;
}

.icon-download-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.icon-download-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ---------- 12.4 CERTIFICATE LIST — DOCUMENT CARD (DS §7.3, Карточка-документ; UI_Specification_FAQ_Certificates §2) ---------- */

.document-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
  align-items: start;
  max-width: 1000px;
}

.document-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 800px;
}

.document-card {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.document-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
}

.document-card-body {
  flex: 1;
  min-width: 0;
}

.document-card-title {
  display: block;
  font-size: var(--text-h3);
  font-weight: 600;
}

.document-card-meta {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  margin-top: var(--space-4);
}

@media (max-width: 767px) {
  .document-card {
    padding: var(--space-16);
  }

  .document-card-title {
    font-size: var(--text-h3-mobile);
  }
}

/* ---------- 12.5 FAQ BRIDGE (Сертификаты §3.3 — текст + Ghost-кнопка, мостик на /faq/#dokumenty) ---------- */

.faq-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  flex-wrap: wrap;
}

.faq-bridge-text {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
  max-width: 60ch;
}

@media (max-width: 767px) {
  .faq-bridge {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- 12.6 FAQ — ЯКОРЯ-НАВИГАТОР (UI Spec Этап 3 §4.2, sticky под Header, scroll-spy) ---------- */

.faq-nav {
  position: sticky;
  top: 72px;
  z-index: 20;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.faq-nav-list {
  display: flex;
  gap: var(--space-8);
  overflow-x: auto;
  padding: var(--space-12) 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.faq-nav-list::-webkit-scrollbar {
  display: none;
}

.faq-nav-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--space-16);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.faq-nav-link:hover {
  border-color: var(--color-border-strong);
}

.faq-nav-link--active {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- 12.7 FAQ — ТЕМА И АККОРДЕОН ВОПРОСОВ (UI Spec Этап 3 §4.3) ---------- */

.faq-topic {
  scroll-margin-top: 140px;
}

.faq-topic:not(:last-child) {
  margin-bottom: var(--space-64);
}

.faq-question-list {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-16);
}

.faq-question {
  border-bottom: 1px solid var(--color-border);
}

.faq-question-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  text-align: left;
  padding: var(--space-16) 0;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-ink);
}

@media (max-width: 767px) {
  .faq-question-trigger {
    font-size: var(--text-h3-mobile);
  }
}

.faq-question-trigger:hover {
  color: var(--color-primary);
}

.faq-question-trigger .chevron-icon {
  margin-top: 4px;
}

.faq-question-trigger[aria-expanded="true"] .chevron-icon::before {
  transform: translate(-50%, -50%) rotate(225deg);
}

.faq-answer {
  padding-bottom: var(--space-16);
  max-width: 70ch;
}

.faq-answer p {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
}

.faq-answer[hidden] {
  display: none;
}

/* ---------- 12.8 FAQ — МОСТИК «НЕ НАШЛИ ОТВЕТ?» (UI Spec Этап 3 §4.4) ---------- */

.faq-fallback {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
}

.faq-fallback-text {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-24);
}

.faq-fallback-actions {
  display: flex;
  gap: var(--space-16);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- 12.9 КОНТАКТЫ — ТЕЛЕФОН (UI Spec Этап 3 §5.2, крупный номер + click-to-call + кнопка-дублёр mobile) ---------- */

.contact-phone-block {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  flex-wrap: wrap;
}

.contact-phone-link {
  font-size: var(--text-display);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}

.contact-phone-link:hover {
  color: var(--color-primary);
}

.contact-phone-link--email {
  font-size: var(--text-h2);
}

.contact-phone-link--secondary {
  font-size: var(--text-h2);
  color: var(--color-ink-secondary);
}

.contact-email-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32);
}

.contact-email-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-email-note {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

.contact-call-button {
  display: none;
}

@media (max-width: 767px) {
  .contact-phone-link {
    font-size: var(--text-display-mobile);
  }

  .contact-call-button {
    display: inline-flex;
  }
}

/* ---------- 12.10 КОНТАКТЫ — МЕССЕНДЖЕРЫ (UI Spec Этап 3 §5.3, светлый фон, с подписью под иконкой) ---------- */

.contact-messenger-row {
  display: flex;
  gap: var(--space-24);
}

.contact-messenger-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
  color: var(--color-ink);
}

.contact-messenger-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.contact-messenger-item:hover .contact-messenger-icon {
  border-color: var(--color-primary);
  background-color: var(--color-primary-50);
}

.contact-messenger-label {
  font-size: var(--text-sm);
}

/* ---------- 12.11 КОНТАКТЫ — АДРЕС И КАРТА (UI Spec Этап 3 §5.5, карта обязательна — РЕШЕНО) ---------- */

.contact-plashka {
  background-color: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-32);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.contact-plashka-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-plashka-title {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-8);
}

.contact-plashka-text {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
}

.contact-plashka-phone {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}

.contact-plashka-phone:hover {
  color: var(--color-primary);
}

.contact-plashka-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

@media (max-width: 767px) {
  .contact-plashka {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-24);
  }

  .contact-plashka-actions {
    width: 100%;
  }

  .contact-plashka-actions .cta-button {
    width: 100%;
    justify-content: center;
  }
}

.contact-address-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
  align-items: start;
}

.contact-address-text p {
  font-size: var(--text-base);
  margin-bottom: var(--space-8);
}

.contact-map-placeholder {
  aspect-ratio: 4 / 3;
  background-color: var(--color-border);
  background-image: linear-gradient(135deg, var(--color-primary-light), var(--color-border));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
  text-align: center;
  padding: var(--space-16);
}

.contact-map-embed {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}

.contact-map-embed iframe {
  display: block;
  border: 0;
}

@media (max-width: 767px) {
  .contact-address-block {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   13. ЗАМЕНА ЗАРУБЕЖНЫХ БРЕНДОВ (ХАБ + ШАБЛОН СТРАНИЦЫ БРЕНДА ×12)
   Источник: UI_Specification_v1_Etap2.md §3 (шаблон страницы бренда),
   IA_Lenpromkompleks.md §3.17 (хаб — нет отдельной UI Spec для хаба,
   раскладка построена по аналогии с хабом «Щитовое производство»,
   тот же тип хаба — маршрутизатор на N подстраниц одной технической
   категории, без комплектующих/кейсов/FAQ-врезки — это не упомянуто
   для этого хаба ни в одном документе).
   ============================================================ */

/* ---------- 13.1 ХАБ — КАРТОЧКА-БРЕНД (текстовая, без фото и без графического логотипа —
   юридическое решение UI Spec Этап 2 §3.2: чужой товарный знак рядом с собственным
   коммерческим предложением создаёт риск ложного впечатления об официальном партнёрстве) ---------- */

.brand-replace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-16);
}

.brand-replace-card {
  display: block;
  padding: var(--space-24);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.brand-replace-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-hover);
}

.brand-replace-card-name {
  display: block;
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.brand-replace-card-hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

/* ---------- 13.2 СТРАНИЦА БРЕНДА — ЧЕМ ЗАМЕНЯЕМ (§3.4, вариант А/Б по наличию конкретного продукта) ---------- */

.brand-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
}

@media (max-width: 767px) {
  .brand-category-grid {
    grid-template-columns: 1fr;
  }
}

.brand-analog-block {
  padding: var(--space-24);
  background-color: var(--color-primary-light);
  border-radius: var(--radius);
}

.brand-analog-block--process {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.brand-analog-title {
  font-size: var(--text-h3);
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.brand-analog-text {
  font-size: var(--text-base);
  color: var(--color-ink-secondary);
}

/* ---------- 13.3 СТРАНИЦА БРЕНДА — МОСТИК НА ТИП ЩИТА (§3.5, перед формой) ---------- */

.shchit-bridge {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.shchit-bridge-text {
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

.shchit-bridge-actions,
.cta-button-group {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}

/* ---------- 13.4 СТРАНИЦА БРЕНДА — МОСТИК НА ХАБ (§3.7, низ страницы, после формы) ---------- */

.brand-hub-bridge {
  text-align: center;
}

.brand-hub-bridge .faq-bridge-text {
  margin-bottom: var(--space-8);
}


/* ===== 15. СПИСОК НА КП (плавающий виджет, Атон/DURAY) ===== */

.kp-list-root {
  position: fixed;
  left: var(--space-24);
  bottom: var(--space-24);
  z-index: 890;
}

.kp-list-pill {
  height: 56px;
  padding: 0 20px 0 16px;
  border-radius: 28px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  box-shadow: var(--shadow-elevated);
  transition: background 0.15s ease;
  font-family: var(--font-body);
}
.kp-list-pill:hover { background: var(--color-primary-dark); }

.kp-list-pill-icon {
  font-size: 18px;
  line-height: 1;
}

.kp-list-pill-label {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.kp-list-pill-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kp-list-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 31, 35, 0.4);
  z-index: 940;
}
.kp-list-overlay[hidden] { display: none; }

.kp-list-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 80vh;
  background: var(--color-surface);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-elevated);
  z-index: 950;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kp-list-drawer[hidden] { display: none; }

@media (min-width: 768px) {
  .kp-list-drawer {
    left: auto;
    right: var(--space-24);
    bottom: 96px;
    width: 400px;
    max-width: calc(100vw - var(--space-32));
    max-height: calc(100vh - 140px);
    border-radius: var(--radius);
  }
}

.kp-list-drawer-header {
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-12) var(--space-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}

.kp-list-drawer-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.kp-list-drawer-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-4);
}

.kp-list-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.kp-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}
.kp-list-item:last-child { border-bottom: none; padding-bottom: 0; }

.kp-list-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.kp-list-item-brand {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kp-list-item-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

.kp-list-item-price {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-ink-secondary);
}

.kp-list-item-controls {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.kp-list-qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kp-list-qty-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.kp-list-qty-value {
  min-width: 20px;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
}

.kp-list-remove-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--color-ink-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  margin-left: var(--space-4);
}
.kp-list-remove-btn:hover { color: var(--color-error); }

.kp-list-empty {
  padding: var(--space-24) var(--space-16);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-secondary);
}

.kp-list-drawer-footer {
  padding: var(--space-16);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.kp-list-send-button {
  width: 100%;
}
.kp-list-send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Кнопка «В список» в таблице вариантов (product-table) */
.kp-add-btn {
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.kp-add-btn:hover { background: var(--color-primary-50); }
.kp-add-btn--added {
  border-color: var(--color-success);
  color: var(--color-success);
  background: transparent;
}

/* Карточка направления без фото (напр. «Взрывозащищённое оборудование» —
   ждём фото) — центрируем контент вертикально, вместо текста вверху и
   пустоты внизу, плюс лёгкий фирменный фон для визуального веса */
.direction-card--no-photo {
  justify-content: center;
  background-color: var(--color-primary-50);
}
.direction-card--no-photo .direction-card-body {
  padding: var(--space-32) var(--space-24);
  text-align: center;
}

/* ===== 16. ВТОРАЯ ТОЧКА ВХОДА К ФОРМЕ (лёгкий CTA в середине длинных страниц) ===== */

.inline-cta {
  padding: var(--space-32) 0;
}

.inline-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  background-color: var(--color-primary-50);
  border-radius: var(--radius);
  padding: var(--space-24) var(--space-32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  flex-wrap: wrap;
}

.inline-cta-text {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  margin: 0;
  flex: 1;
  min-width: 220px;
}

.inline-cta-inner .cta-button {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .inline-cta-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}