/* ==========================================================================
   УЮТСИБ — стеновые панели, прямые поставки с заводов Китая
   Основная таблица стилей
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Переменные и базовые сбросы
   -------------------------------------------------------------------------- */
:root {
  /* Палитра снята с референса: инлайновые стили его страницы дают
     #000 для заголовков, #222 для тёмных блоков, #f5f5f5 для светлых,
     #939393 для вторичного текста и #d7d7d7 для текста на тёмном. */
  --ink: #000000;
  --ink-soft: #333333;       /* 12.6:1 на белом */
  --muted: #939393;          /* достаточно для подписей, не для абзацев */
  --muted-strong: #6e6e6e;   /* там, где серый несёт смысл: 5.1:1 */
  --bg: #ffffff;
  --bg-alt: #f5f5f5;
  --sand: #ebebeb;
  --line: #ebebeb;
  --line-dark: rgba(255, 255, 255, 0.14);
  --white: #ffffff;
  --accent: #000000;
  --accent-h: #222222;
  --accent-soft: #f5f5f5;
  --accent-on-dark: #ffffff;
  --on-dark: #d7d7d7;        /* 10.4:1 на --dark */
  --on-dark-quiet: #a1a1a1;  /* 5.6:1 на --dark */
  --dark: #222222;
  --black: #000000;
  --nav: #ffffff;
  --nav-ink: #000000;
  --nav-active: #000000;
  --nav-active-h: #333333;

  /* Типографика. Разрядки нет нигде: на референсе letter-spacing
     не встречается ни разу, а веса держатся в диапазоне 400–700. */
  --font: "Inter", "Segoe UI", Arial, sans-serif;
  --tr-title: 0em;
  --tr-micro: 0em;
  --measure: 68ch;
  --fs-h1: clamp(28px, 3vw, 42px);
  --fs-h2: clamp(25px, 2.5vw, 36px);
  --fs-h3: clamp(18px, 1.5vw, 20px);
  --fs-micro: 13px;

  /* Сетка. Колодец 1200 — как у референса на 1440. */
  --container: 1200px;
  --gutter: 20px;

  /* Скругления — опорный приём всей вёрстки референса */
  --radius: 10px;
  --radius-lg: 16px;
  --radius-card: 24px;
  --radius-pill: 100px;

  /* Прочее */
  --header-h: 88px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.12);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

/* Заголовки нормального веса и без разрядки — как на референсе.
   Прошлый заход ставил вес 300 и разрядку 0.03em; на самом сайте-образце
   ни того, ни другого нет. */
h1, h2 {
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}

img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, figcaption { margin: 0; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* Поверхности браузера тоже часть дизайна */
::selection { background: var(--accent); color: #fff; }
:root { accent-color: var(--accent); caret-color: var(--accent); }

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

/* Первое, что получает фокус на странице: позволяет с клавиатуры перескочить
   верхнюю строку, шапку и всё меню — иначе до содержимого нужно два десятка
   нажатий Tab на каждой странице. Видна только когда на ней фокус. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }
main:focus { outline: none; }
.section--dark :focus-visible,
.section--black :focus-visible,
.hero :focus-visible,
.footer :focus-visible { outline-color: var(--accent-on-dark); }

* { scrollbar-width: thin; scrollbar-color: var(--sand) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--sand);
  border-radius: 10px;
  border: 3px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--nav); }

/* --------------------------------------------------------------------------
   2. Сетка и служебные классы
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--narrow { max-width: 940px; }

/* Страница целиком белая, а блоки лежат на ней скруглёнными карточками —
   это главный приём референса. Поэтому фон и радиус живут не на секции,
   а на её контейнере: разметку менять не пришлось. */
.section { padding: clamp(36px, 4vw, 56px) 0; }
.section--tight { padding: clamp(28px, 3vw, 40px) 0; }

.section--dark > .container,
.section--black > .container,
.section--alt > .container {
  border-radius: var(--radius-card);
  padding-top: clamp(44px, 5vw, 76px);
  padding-bottom: clamp(44px, 5vw, 76px);
  padding-left: clamp(24px, 3.4vw, 56px);
  padding-right: clamp(24px, 3.4vw, 56px);
}
.section--dark { color: var(--on-dark); }
.section--dark > .container { background: var(--dark); }
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--alt > .container { background: var(--bg-alt); }

.section-title b { font-weight: 600; }
.section--dark .section-title b,
.section--black .section-title b { font-weight: 400; }

.section-lead {
  margin-top: 18px;
  max-width: 720px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted-strong);
}
.section--dark .section-lead { color: var(--on-dark); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.4vw, 46px);
}
/* Референс выравнивает заголовки секций по левому краю даже там, где
   блок центрирован; модификатор оставляем в разметке, но гасим. */
.section-head--center {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.section-head--center .section-lead { margin-left: 0; margin-right: 0; }

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

/* --------------------------------------------------------------------------
   3. Кнопки
   -------------------------------------------------------------------------- */
/* Кнопки-пилюли строчными буквами — как на референсе. Ни капса,
   ни разрядки, ни теней; отклик один — смена заливки. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 34px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
  white-space: nowrap;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-h); border-color: var(--accent-h); }

.btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--accent-h); border-color: var(--accent-h); }

/* Поверх фотографии: рамка достаточно плотная, чтобы читаться на любом кадре */
.btn--ghost {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn--block { width: 100%; }
.btn--sm { min-height: 44px; padding: 11px 24px; font-size: 15px; }

/* «Каталог →» у референса — обычная строчная надпись со стрелкой,
   без подчёркивания и капса. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  transition: opacity 0.3s var(--ease);
}
.link-more svg { transition: transform 0.3s var(--ease); }
.link-more:hover { opacity: 0.6; }
.link-more:hover svg { transform: translateX(6px); }
.section--dark .link-more,
.section--black .link-more,
.footer .link-more { color: #fff; }

/* --------------------------------------------------------------------------
   4. Шапка
   Одна строка вместо трёх ярусов. Верхняя строка удалена целиком: часы,
   адрес и почта из неё дословно повторялись в подвале, а переключатель
   языков переехал в правую группу. Полоса меню перестала быть отдельным
   ярусом — пункты встали на ту же линию, что логотип и контакты.
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  transition: box-shadow 0.3s var(--ease);
}
/* Шапка идёт от края до края окна, содержимое ниже остаётся в колодце 1320.
   Тонкая полоса во всю ширину держит воздух лучше, чем центрированная. */
/* Шапка референса живёт в том же колодце, что и блоки, и не имеет
   ни фоновой полосы, ни разделительной линии — она просто на белом. */
.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 30px);
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 var(--gutter);
}
/* Единственный отклик на прокрутку — волосяная тень под линией. */
.header.is-stuck { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07); }

.logo { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo__mark { width: 40px; height: 40px; border-radius: 8px; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
}
.logo__tag {
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- меню в той же строке --- */
/* auto-поля с обеих сторон ставят меню по центру шапки и одновременно
   отжимают правую группу к краю: отдельный margin-left: auto не нужен. */
.navbar { margin: 0 auto; min-width: 0; }
.navbar__list { display: flex; align-items: center; }
.navbar__item { position: static; display: flex; }
.navbar__link {
  --pad: clamp(6px, 0.7vw, 14px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--header-h);
  padding: 0 var(--pad);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
  transition: opacity 0.3s var(--ease);
}
.navbar__link:hover { opacity: 0.55; }
.navbar__item--catalog .navbar__link { font-weight: 500; }
/* Меню сплошь текстовое: иконка у «Каталога» выбивалась из строки */
.navbar__item--catalog .navbar__link > svg { display: none; }
.navbar__item.is-active .navbar__link { font-weight: 500; }

/* --- правая группа --- */
.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 18px);
  flex-shrink: 0;
}

/* Переключатель языков в шапке — без рамки и заливки, чтобы не утяжелять
   полосу; в мобильном меню он остаётся кнопочным. */
.header__actions .lang {
  border: 0;
  padding: 0;
  background: transparent;
  gap: 0;
}
.header__actions .lang__btn { padding: 7px 9px; font-size: 13px; letter-spacing: 0; }
.header__actions .lang__btn.is-active {
  background: var(--bg-alt);
  color: var(--ink);
  border-radius: var(--radius-pill);
}

/* Кнопка звонка. На широком экране не нужна: рядом стоит номер целиком
   и кнопка заявки. Появляется там, где их прячут. */
.header__call { display: none; }
.header__socials { display: flex; gap: 8px; }
.header__socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 0;
  background: var(--bg-alt);
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.header__socials a:hover { background: var(--ink); color: #fff; }
.header__phone {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.header__phone:hover { opacity: 0.6; }

/* --- мегаменю --- */
.mega {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.28s var(--ease);
  pointer-events: none;
}
.navbar__item--catalog:hover .mega,
.navbar__item--catalog:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.mega__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 290px;
  gap: 36px;
  padding: 40px var(--gutter) 44px;
  max-width: var(--container);
  margin: 0 auto;
}
.mega__title {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.mega__links li + li { margin-top: 11px; }
.mega__links a {
  font-size: 14px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Растёт через scaleX, а не через width: ширина пересчитывает макет
   на каждом кадре. Тот же приём, что у полоски на карточке категории. */
.mega__links a::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.mega__links a:hover { color: var(--ink); }
.mega__links a:hover::before { transform: scaleX(1); }

.mega__promo {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  color: #fff;
}
.mega__promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega__promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.85));
}
.mega__promo > div { position: relative; z-index: 2; }
.mega__promo strong {
  display: block;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mega__promo span { font-size: 13px; opacity: 0.85; }

/* --- бургер --- */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  /* Именно flex-центрирование по обеим осям: place-items — свойство grid,
     и по главной оси оно не работало, полоски висели у верхнего края. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 20px;
  height: 1.8px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.burger.is-open span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* --- мобильное меню --- */
/* Тёмная панель справа, а слева остаётся притемнённая полоска страницы —
   так меню выглядит у образца. Отдельной подложки в разметке нет, поэтому
   и затемнение, и панель рисует один градиент: элемент занимает весь экран,
   а содержимое отступает вправо на ширину этой полоски. */
.mobile-nav {
  --mnav-gap: 20%;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.5) 0 var(--mnav-gap),
    var(--dark) var(--mnav-gap) 100%);
  color: var(--on-dark);
  transform: translateX(100%);
  transition: transform 0.42s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__head,
.mobile-nav__body,
.mobile-nav__foot { padding-left: calc(var(--mnav-gap) + var(--gutter)); }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 18px;
  padding-right: var(--gutter);
  padding-bottom: 10px;
  background: transparent;
}
/* Логотип внутри меню лишний: он и так виден в полоске страницы слева. */
.mobile-nav__head .logo { display: none; }
.mobile-nav__close {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
}
.mobile-nav__body { padding-top: 8px; padding-right: var(--gutter); padding-bottom: 24px; flex: 1; }
.m-item { border-bottom: 0; }
.m-item__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 8px 0;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  text-align: left;
}
.m-item__link svg { transition: transform 0.3s var(--ease); color: var(--on-dark-quiet); }
.m-item.is-open .m-item__link svg { transform: rotate(180deg); }
/* Раскрывается ровно на высоту содержимого: числа, до которого «должно
   хватить», в CSS нет. Список категорий приходит из базы и может вырасти. */
.m-item__sub {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s var(--ease);
}
.m-item__sub > * { min-height: 0; }
.m-item.is-open .m-item__sub { grid-template-rows: 1fr; }
.m-item__sub ul {
  padding: 0 0 0 14px;
  transition: padding 0.4s var(--ease);
}
.m-item.is-open .m-item__sub ul { padding: 2px 0 16px 14px; }
.m-item__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  color: var(--on-dark);
}
.mobile-nav__foot {
  padding-top: 24px;
  padding-right: var(--gutter);
  padding-bottom: 40px;
  display: grid;
  gap: 14px;
  background: transparent;
}
.mobile-nav__phone {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.mobile-nav__socials { display: flex; gap: 10px; margin: 4px 0 6px; }
/* Кнопка заявки внутри меню была чёрной на тёмной панели — читалась
   как пятно. На тёмном она белая, как и остальные действия на снимках. */
.mobile-nav__foot .btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--dark);
}
.mobile-nav__foot .btn--primary:hover {
  background: var(--on-dark);
  border-color: var(--on-dark);
}

.mobile-nav__socials a {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0;
  color: var(--dark);
  background: #fff;
}

/* --------------------------------------------------------------------------
   5. Главный экран
   -------------------------------------------------------------------------- */
/* Главный экран у референса — не полоса во всю ширину, а скруглённая
   карточка внутри колодца, с текстом по левому краю. */
.hero {
  position: relative;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 12px auto 0;
  border-radius: var(--radius-card);
  min-height: min(62vh, 560px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: #fff;
  overflow: hidden;
  padding: clamp(40px, 5vw, 72px) 0;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: heroZoom 20s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.25) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__content { max-width: 760px; margin: 0; }
/* Заголовок держится на затемнении кадра, а не на тени под буквами:
   тень в 28px размывала тонкое начертание и съедала разрядку. */
/* Единственное место, где референс набирает капсом и жирным */
.hero__title {
  font-size: clamp(26px, 3.1vw, 42px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.hero__text {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.2vw, 17px);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
}
.hero__actions {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.hero__actions .btn { min-width: 200px; }
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.hero__scroll i {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent);
  animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --------------------------------------------------------------------------
   6. Полоса преимуществ
   -------------------------------------------------------------------------- */
.usp {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.usp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.usp__item {
  padding: 48px 36px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border-right: 1px solid var(--line);
}
.usp__item:last-child { border-right: 0; }
/* Кружок-подложка под иконкой убран: в этой палитре он читался как
   серое пятно и спорил с волосяными разделителями. */
.usp__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.usp__item h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 8px;
}
.usp__item p { font-size: 15px; color: var(--muted-strong); line-height: 1.5; }

/* --------------------------------------------------------------------------
   7. Коллекции пород
   -------------------------------------------------------------------------- */
.collections { position: relative; }
.collections__watermark {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: clamp(64px, 10vw, 168px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  opacity: 0.045;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.collections__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.collection {
  border-radius: var(--radius-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 460px;
  padding: 44px 26px 30px;
  text-align: center;
  color: #fff;
  isolation: isolate;
}
.collection__img { position: absolute; inset: 0; z-index: -2; }
.collection__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.collection::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.82) 100%);
  transition: background 0.5s var(--ease);
}
.collection:hover .collection__img img { transform: scale(1.07); }
.collection:hover::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.34) 45%, rgba(0, 0, 0, 0.88) 100%);
}
.collection__body { display: block; }
.collection__name {
  display: block;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  text-indent: 0.2em;
}
.collection__wood {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
}
.collection__desc {
  display: block;
  margin: 8px auto 0;
  max-width: 30ch;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}
.collection__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.collection__price {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-on-dark);
  font-variant-numeric: tabular-nums;
}
.collection__more {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.25s var(--ease);
}
.collection:hover .collection__more { color: var(--accent-on-dark); }
.collection__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 6px 13px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  border-radius: 0;
}

.swipe-hint { display: none; }

/* --------------------------------------------------------------------------
   8. Категории продукции
   -------------------------------------------------------------------------- */
.cats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
/* Карточка раздела — кадр фактуры целиком, название и цена поверх
   затемнения, стрелка в углу. Иконка и описание остаются в разметке,
   но скрыты: текст никуда не делся, его просто не видно поверх фото. */
/* Карточка раздела по образцу референса: широкий скруглённый кадр,
   а подпись — под ним на белом, названием слева и стрелкой справа.
   Текст поверх фото, как было в прошлом заходе, у образца не встречается. */
.cat {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "media media"
    "title arrow"
    "price arrow";
  align-items: center;
  column-gap: 20px;
  padding: 0;
  background: transparent;
}
.cat__media {
  grid-area: media;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  margin-bottom: 16px;
}
.cat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.cat:hover .cat__media img { transform: scale(1.05); }
.cat__icon, .cat p { display: none; }
.cat h3 {
  grid-area: title;
  color: var(--ink);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.cat__from {
  grid-area: price;
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--muted-strong);
}
.cat__from b { color: var(--ink); font-weight: 500; }
/* Стрелка — как «Каталог →» у референса: тонкая, у правого края подписи */
.cat__arrow {
  grid-area: arrow;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Белый кружок, а не серый: карточки стоят на светло-сером блоке,
     и серая заливка на нём просто исчезала. */
  background: var(--white);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.cat:hover .cat__arrow { background: var(--ink); color: #fff; }

/* --------------------------------------------------------------------------
   9. Разделы «о компании» / сплит
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(36px, 5vw, 84px);
}
.split--reverse .split__media { order: 2; }
.split__media {
  border-radius: var(--radius-lg);
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__badge {
  position: absolute;
  right: 26px;
  bottom: 26px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.split__badge strong {
  display: block;
  font-size: 34px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}
.split__badge span {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.split__body p { color: var(--ink-soft); }
.split__body .section-lead { max-width: none; }

.checklist { margin-top: 30px; display: grid; gap: 14px; }
.checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink-soft);
}
.checklist svg { flex-shrink: 0; margin-top: 4px; color: var(--accent); }

.signature {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
}
.signature__ava {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.signature b { display: block; color: var(--ink); font-size: 14px; }
.signature span { font-size: 12.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   10. Этапы работы
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  counter-reset: step;
}
/* Вариант на четыре шага. Объявлен здесь, а не в конце файла: иначе он
   перебивал бы медиазапросы ниже и держал четыре колонки на телефоне. */
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.step {
  position: relative;
  padding: 0 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.step:last-child { border-right: 1px solid rgba(255, 255, 255, 0.12); }
.step__num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent-on-dark);
  margin-bottom: 22px;
  display: block;
}
.step h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 10px;
}
.step p { font-size: 13.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.55); }
.step__time {
  margin-top: 16px;
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  padding: 5px 12px;
}

/* --------------------------------------------------------------------------
   11. Галерея проектов
   -------------------------------------------------------------------------- */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 232px;
  gap: 16px;
}
.gallery__item {
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: var(--bg-alt);
}
.gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.gallery__item:hover img { transform: scale(1.07); }
.gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
  color: #fff;
  transform: translateY(10px);
  opacity: 0;
  transition: all 0.4s var(--ease);
}
.gallery__item:hover .gallery__cap { transform: translateY(0); opacity: 1; }
.gallery__cap b {
  display: block;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gallery__cap span { font-size: 12.5px; opacity: 0.72; }
.gallery__zoom {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: grid; place-items: center;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.35s var(--ease);
}
.gallery__item:hover .gallery__zoom { opacity: 1; transform: scale(1); }

/* Лайтбокс */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.94);
  display: grid;
  place-items: center;
  padding: 40px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.lightbox__cap {
  margin-top: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  transition: all 0.28s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: #fff; color: var(--ink); border-color: #fff; }
.lightbox__close { top: 26px; right: 26px; }
.lightbox__nav--prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 26px; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   12. Породы дерева
   -------------------------------------------------------------------------- */
.species {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.species__item { text-align: center; }
.species__swatch {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.species__swatch img { width: 100%; height: 100%; object-fit: cover; }
.species__item:hover .species__swatch {
  transform: translateY(-8px) scale(1.03);
  box-shadow: var(--shadow-md);
}
.species__item h3 {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.species__item p { margin-top: 6px; font-size: 12.5px; color: var(--muted); }

/* --------------------------------------------------------------------------
   13. Отзывы
   -------------------------------------------------------------------------- */
.reviews { position: relative; }
.reviews__track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.review {
  border-radius: var(--radius-card);
  flex: 0 0 calc((100% - 52px) / 3);
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.review:hover { border-color: var(--ink); }
.review__stars { display: flex; gap: 4px; color: var(--ink); }
.review__text { font-size: 15px; line-height: 1.75; color: var(--ink-soft); flex: 1; }
.review__author { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.review__ava {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-weight: 600;
}
.review__author b { display: block; color: var(--ink); font-size: 14px; }
.review__author span { font-size: 12.5px; color: var(--muted); }

.slider-nav { display: flex; gap: 10px; }
.slider-nav button {
  width: 48px; height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  background: var(--white);
  transition: all 0.28s var(--ease);
}
.slider-nav button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 0;
  text-align: left;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 400;
  color: var(--ink);
  transition: opacity 0.3s var(--ease);
}
.faq__q:hover { opacity: 0.6; }
/* Плюс без круглой рамки: в этой палитре обводка читалась как ещё одна
   линия-разделитель и спорила с той, что делит вопросы. */
.faq__ic {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--white);
  display: grid; place-items: center;
  color: var(--ink);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease),
              color 0.3s var(--ease);
}
.faq__item.is-open .faq__ic { background: var(--ink); color: #fff; }
.faq__ic svg { width: 20px; height: 20px; }
.faq__item.is-open .faq__ic { transform: rotate(45deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.42s var(--ease);
}
.faq__a > * { min-height: 0; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  padding: 0 80px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  transition: padding-bottom 0.42s var(--ease);
}
.faq__item.is-open .faq__a p { padding-bottom: 34px; }

/* --------------------------------------------------------------------------
   15. Форма заявки / CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  /* Снизу отступ обязателен: без него скруглённая карточка упирается
     в подвал вплотную и выглядит приклеенной. */
  margin: 0 auto clamp(36px, 4vw, 56px);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: #fff;
  padding: clamp(44px, 5vw, 76px) 0;
}
.cta__bg { position: absolute; inset: 0; z-index: 0; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.7));
}
.cta__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.cta h2 { color: #fff; }
/* У этого абзаца не было ни одного правила: он лип к заголовку вплотную. */
.cta__lead {
  margin-top: 24px;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.8;
  color: var(--on-dark);
}
.cta .cta__contact b { display: block; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 0.02em; }
.cta__contact span { font-size: 12.5px; color: rgba(255, 255, 255, 0.5); }

/* Телефон и почта в блоке контактов — главные ссылки страницы, а по высоте
   были 22px. Ниже нормы на размер цели и просто неудобно пальцем. */
.cta__contact b a,
.contact-item b a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
}

.form-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: clamp(30px, 3.2vw, 44px);
  color: var(--ink-soft);
}
.form-card h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 10px;
}
.form-card > p { font-size: 14px; color: var(--muted); margin-bottom: 34px; }

.field { margin-bottom: 26px; position: relative; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-strong);
  margin-bottom: 8px;
}
/* Поля в скруглённой рамке — как в формах референса. */
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  transition: border-color 0.3s var(--ease);
}
.field textarea { min-height: 104px; resize: vertical; border-radius: var(--radius); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--ink);
}
.field.has-error input,
.field.has-error textarea { border-color: #c8553d; }
.field__err {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #c8553d;
}
.field.has-error .field__err { display: block; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 6px 0 22px;
  cursor: pointer;
}
.check input { display: none; }
.check__box {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1px solid var(--line);
  border-radius: 5px;
  display: grid; place-items: center;
  margin-top: 2px;
  transition: all 0.22s var(--ease);
  background: var(--bg);
}
.check__box svg { opacity: 0; transform: scale(0.6); transition: all 0.22s var(--ease); color: #fff; }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check a { color: var(--ink); text-decoration: underline; }
.check.has-error .check__box { border-color: #c8553d; }

.form-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.form-success {
  display: none;
  padding: 44px 20px;
  text-align: center;
}
.form-success.is-visible { display: block; }
.form-success__ic {
  width: 68px; height: 68px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid; place-items: center;
}
.form-success h3 { margin-bottom: 10px; }
.form-success p { font-size: 14px; color: var(--muted); }
form.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   16. Подвал
   -------------------------------------------------------------------------- */
.footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: clamp(52px, 6vw, 84px) 0 56px;
}
.footer .logo__name { color: #fff; }
.footer .logo__tag { color: var(--on-dark); }
.footer__about { margin-top: 22px; max-width: 320px; line-height: 1.7; font-size: 13.5px; }
.footer__socials { margin-top: 26px; display: flex; gap: 12px; }
.footer__socials a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid; place-items: center;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.28s var(--ease);
}
.footer__socials a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px); }
.footer__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 22px;
}
.footer__links li + li { margin-top: 12px; }
.footer__links a { font-size: 13.5px; }
.footer__links a:hover { color: #fff; }
.footer__contact { display: grid; gap: 16px; }
.footer__contact b { display: block; color: #fff; font-size: 17px; font-weight: 500; }
.footer__contact small { font-size: 12.5px; color: var(--on-dark); }
.footer__pay { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.footer__pay span {
  padding: 7px 14px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 26px 0 34px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--on-dark);
}
.footer__bottom a:hover { color: #fff; }
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   17. Модальное окно
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }
.modal__box {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-card);
  width: min(520px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  transform: translateY(16px);
  transition: transform 0.36s var(--ease);
}
.modal.is-open .modal__box { transform: translateY(0); }
.modal__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted);
  z-index: 3;
  transition: all 0.25s var(--ease);
}
.modal__close:hover { background: var(--bg-alt); color: var(--ink); }

/* --------------------------------------------------------------------------
   18. Внутренние страницы
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 12px auto 0;
  border-radius: var(--radius-card);
  padding: clamp(44px, 5vw, 76px) 0;
  background: var(--dark);
  color: #fff;
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; opacity: 0.34; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.45));
}
.page-hero__inner { position: relative; z-index: 3; }
.page-hero h1 {
  color: #fff;
  font-size: clamp(26px, 3.1vw, 42px);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.page-hero p { margin-top: 18px; max-width: 620px; color: rgba(255, 255, 255, 0.66); }

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-dark-quiet);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.crumbs a:hover { color: #fff; }
.page-hero p { color: var(--on-dark); }

/* Крошки шли строкой в 20px — ниже нормы WCAG 2.2 на размер цели (24x24).
   Растягиваем только по вертикали: строка на месте, попасть можно. */
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}
.crumbs span { opacity: 0.5; }

/* Каталог */
.catalog-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 42px;
  align-items: start;
}
/* Панель фильтров без коробки: на белом фоне рамка вокруг колонки
   спорила с волосяными разделителями внутри неё. */
.filters {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--bg-alt);
  border-radius: var(--radius-card);
  padding: 30px 26px;
}
.filters__group + .filters__group { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.filters__title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 16px;
}
.filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 5px 0;
  transition: color 0.22s var(--ease);
}
.filter-opt:hover { color: var(--ink); }
.filter-opt input { accent-color: var(--accent); width: 16px; height: 16px; }
.filter-opt small { margin-left: auto; color: var(--muted); font-size: 12px; }

.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.catalog-toolbar__count { font-size: 13.5px; color: var(--muted); }
.catalog-toolbar select {
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
}

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
/* Карточка без рамки и подъёма: её границу задаёт кадр, а откликом
   на наведение служит наезд самой фотографии. */
.product {
  background: transparent;
  display: flex;
  flex-direction: column;
}
.product__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.product:hover .product__media img { transform: scale(1.06); }
.product__badge {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
}
.product__body { padding: 22px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product__cat { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.product h3 { font-size: 18px; font-weight: 500; letter-spacing: 0; }
.product__spec { font-size: 13px; color: var(--muted); flex: 1; }
.product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.product__price {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.25;
}
.product__price small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.product__foot .btn { min-height: 42px; padding: 10px 20px; font-size: 15px; }
.product.is-hidden { display: none; }

.empty-state {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--muted-strong);
  background: var(--bg-alt);
  border-radius: var(--radius-card);
}

/* Карточки-инфо */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.info-card {
  background: var(--bg-alt);
  border: 0;
  border-radius: var(--radius-card);
  padding: 38px 32px;
  transition: background 0.35s var(--ease);
}
.info-card:hover { background: var(--sand); }
.info-card__ic {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.info-card h3 { font-size: 19px; font-weight: 500; letter-spacing: 0; margin-bottom: 12px; }
.info-card p { font-size: 14px; color: var(--muted); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 38px 26px;
  text-align: center;
}
.stat strong {
  display: block;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}
.stat span {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.contact-block { display: grid; gap: 26px; }
.contact-item { display: flex; gap: 18px; align-items: flex-start; }
.contact-item__ic {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
}
.contact-item h3 { font-size: 15px; letter-spacing: 0; color: var(--muted-strong); margin-bottom: 6px; font-weight: 400; }
.contact-item b { font-size: 18px; color: var(--ink); font-weight: 500; }
.contact-item p { font-size: 14px; color: var(--muted); margin: 4px 0 0; }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 380px;
  position: relative;
  background: var(--bg-alt);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.map-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px;
  color: var(--muted);
  font-size: 14px;
}

.prose { max-width: 820px; }
.prose h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 44px 0 16px; letter-spacing: 0.02em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; margin: 30px 0 12px; }
.prose p { font-size: 15.5px; color: var(--ink-soft); }
.prose ul { margin: 16px 0; display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; font-size: 15px; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
/* Таблица держится на горизонтальных линиях: полная сетка из рамок
   выглядела тяжелее всего остального на странице. */
.prose table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15px; }
.prose th, .prose td {
  padding: 18px 20px 18px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prose th {
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  border-bottom-color: var(--ink);
  padding-bottom: 14px;
}
.prose tr:last-child td { border-bottom: 0; }

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

/* --------------------------------------------------------------------------
   19. Плавающие элементы
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 70;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all 0.32s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-h); }

/* --------------------------------------------------------------------------
   20. Анимации появления
   -------------------------------------------------------------------------- */
/* Появление блоков при прокрутке.

   Прячем содержимое только под классом .js, который ставит boot.js в <head>.
   Если скрипт не загрузился или упал, класса нет — и страница видна целиком,
   а не остаётся пустой. Раньше opacity: 0 стоял безусловно, и любая осечка
   в JS прятала 75 блоков главной.

   will-change здесь не нужен: прозрачность и сдвиг браузер и так отдаёт
   композитору, а подсказка висела на всех блоках навсегда, включая давно
   показанные, и держала лишние слои. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Блоки показываем сразу, без въезда: содержимое на месте с первого кадра. */
  .js .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* Не 0.01ms: полностью мгновенная смена состояния лишает кнопки и поля
       отклика на действие. 80мс — это не движение, но отклик заметен. */
    transition-duration: 0.08s !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Нижняя панель действий на телефоне. Объявлена до адаптива: ниже
   медиазапрос включает её на узких экранах, и правило с той же
   специфичностью, стоящее после него, снова бы её погасило. */
.action-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  grid-template-columns: 1fr 1.3fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

/* --------------------------------------------------------------------------
   21. Адаптив
   Ноутбук 1280-1440, планшет, телефон. Точки выбраны там, где ломается макет.
   -------------------------------------------------------------------------- */

/* --- Ноутбук: 1366x768 и подобные. Контейнер уже, воздуха меньше --- */
@media (max-width: 1440px) {
  :root { --container: 1180px; --gutter: 22px; }
  .mega__inner { grid-template-columns: repeat(3, 1fr) 240px; gap: 28px; }
}

@media (max-width: 1280px) {
  :root { --container: 100%; }
  .navbar__link { padding: 0 13px; font-size: 12.5px; }
  .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
  .footer__col--hide-lg { display: none; }
}

/* --- Низкий экран ноутбука: герой не должен занимать весь экран --- */
@media (max-height: 820px) and (min-width: 1025px) {
  .hero { min-height: 480px; padding: 72px 0 80px; }
  .section { padding: clamp(56px, 6vw, 88px) 0; }
}

/* Лестница сокращений шапки. Меню из семи пунктов в одну строку с логотипом
   и контактами целиком помещается только на очень широком экране, поэтому
   элементы уходят по одному, от наименее нужного к самому нужному. */
/* Колодец шапки зафиксирован (1340), поэтому сокращения срабатывают
   не от ширины окна, а сразу: строчные пункты в 16px занимают втрое
   больше места, чем прежний капс в 11px. */
@media (min-width: 1151px) {
  .navbar__item--optional { display: none; }
}

@media (max-width: 1700px) {
  .mega__promo { display: none; }
  .mega__inner { grid-template-columns: repeat(3, 1fr); }
}

/* Соцсети показываем только там, где для них действительно есть место:
   строчное меню в 16px съедает ту ширину, где раньше стоял капс в 11px.
   Ниже 1700 они остаются в подвале и в мобильном меню. */
@media (max-width: 1700px) {
  .header__socials { display: none; }
}

@media (min-width: 1701px) {
  .header__inner { max-width: 1500px; }
}

@media (min-width: 1151px) {
  /* «Ассортимент» — якорь внутри «О компании», в меню он дублируется */
  .navbar__item--optional2 { display: none; }
}

@media (max-width: 1400px) {
  .navbar__link { font-size: 15px; }
}

@media (max-width: 1200px) {
  /* Номер целиком уступает место круглой кнопке звонка */
  .header__phone { display: none; }
  .header__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    background: var(--white);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .header__call:active { background: var(--accent-soft); border-color: var(--ink); }
}

/* --- Планшет --- */
/* Ниже этой ширины строка перестаёт вмещать меню без ущерба контактам,
   поэтому навигация целиком уходит в бургер — там она полная, вместе
   с языками, телефоном, соцсетями и кнопкой заявки. */
@media (max-width: 1150px) {
  :root { --header-h: 66px; }
  .navbar { display: none; }
  /* Языки уезжают в мобильное меню, где для них полноценные тач-цели.
     Кнопка заявки остаётся: места после ухода меню хватает с запасом. */
  .header__actions .lang { display: none; }
  .burger { display: flex; }

  /* Единственное действие, доступное в шапке телефона, не открывая меню.
     Для цеха звонок — главный способ связи, прятать его в меню нельзя. */
  .header__call { width: 44px; height: 44px; }
  .header__inner { gap: 14px; }

  /* У образца логотип стоит слева, а бургер — справа, у большого пальца.
     В разметке бургер идёт первым, поэтому переставляем их порядком flex,
     не трогая порядок чтения для клавиатуры и читалки экрана. */
  .logo { order: 1; margin-right: auto; }
  .header__actions { order: 2; }
  .burger { order: 3; }
}

@media (max-width: 1024px) {
  .header__cta { display: none; }

  .usp__grid { grid-template-columns: repeat(2, 1fr); }
  .usp__item:nth-child(2n) { border-right: 0; }
  .usp__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .collections__grid { grid-template-columns: repeat(2, 1fr); }
  .collections__watermark { font-size: clamp(56px, 9vw, 110px); }
  .cats__grid { grid-template-columns: repeat(2, 1fr); }
  .steps, .steps--4 { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .step:last-child { border-right: 0; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; }
  .gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .species { grid-template-columns: repeat(3, 1fr); }
  .review { flex: 0 0 calc((100% - 26px) / 2); }
  .cta__inner { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .products { grid-template-columns: repeat(2, 1fr); }
  .catalog-layout { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer__col--hide-lg { display: block; }
}

/* --- Телефон --- */
@media (max-width: 720px) {
  :root { --gutter: 18px; }
  body { font-size: 16px; padding-bottom: 68px; }  /* место под панель действий */

  .logo__mark { width: 38px; height: 38px; }
  .logo__name { font-size: 17px; letter-spacing: 0.18em; }
  .logo__tag { display: none; }

  .hero { min-height: 0; padding: 56px 0 72px; }
  .hero__title { font-size: clamp(27px, 8vw, 36px); }
  .hero__text { font-size: 15.5px; margin-top: 18px; }
  .hero__actions { margin-top: 28px; gap: 10px; }
  .hero__actions .btn { width: 100%; min-width: 0; }
  .hero__scroll { display: none; }

  .section { padding: 52px 0; }
  .section-head { margin-bottom: 28px; }
  .section-title { font-size: clamp(23px, 6.4vw, 30px); }

  .usp__grid { grid-template-columns: 1fr; }
  .usp__item { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 4px; }
  .usp__item:last-child { border-bottom: 0; }

  /* Коллекции — карусель вбок вместо простыни на 2500px */
  .collections__watermark { display: none; }
  .collections__grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 6px;
  }
  .collections__grid::-webkit-scrollbar { display: none; }
  .collection {
    flex: 0 0 82%;
    scroll-snap-align: center;
    min-height: 400px;
    padding: 34px 20px 26px;
  }
  .swipe-hint {
    display: block;
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-dark);
  }

  .cats__grid { grid-template-columns: 1fr; }
  .steps, .steps--4 { grid-template-columns: 1fr; }
  .step { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 24px 0 0; }
  .step:last-child { border-right: 0; }
  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  .gallery__item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .species { grid-template-columns: repeat(2, 1fr); }
  .review { flex: 0 0 86%; }
  .field-row { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .products { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr; }
  .footer { padding-bottom: 68px; }
  .split__badge { right: 14px; bottom: 14px; padding: 14px 18px; }
  .split__badge strong { font-size: 26px; }
  .lightbox__nav { width: 46px; height: 46px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .faq__a p { padding-right: 0; }
  .faq__q { min-height: 60px; }
  .to-top { display: none; }
  .action-bar { display: grid; }
}

/* --- Сенсорный ввод: ничего не прятать за hover --- */
@media (hover: none) {
  .collection__foot,
  .gallery__cap { opacity: 1; transform: none; }
  .collection:hover .collection__img img,
  .product:hover, .info-card:hover, .review:hover { transform: none; }
  .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   22. Утилиты
   Заменяют inline-стили: строгий CSP запрещает style="..." в разметке.
   -------------------------------------------------------------------------- */
.u-note { font-size: 13px; color: var(--muted); }
.u-small { font-size: 14px; }
.u-small-15 { font-size: 15px; }
.u-muted-14 { font-size: 14px; color: var(--muted); }
.u-muted-135 { font-size: 13.5px; color: var(--muted); }
.u-accent { color: var(--accent); }
.u-ink { color: var(--ink-soft); }
.u-maxw-420 { max-width: 420px; }
.u-maxw-none { max-width: none; }
.u-mt-14 { margin-top: 14px; }
.u-mt-26 { margin-top: 26px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-24 { margin-bottom: 24px; }
.u-hidden { display: none !important; }

/* Заголовок раздела для читалок: на экране его нет, в оглавлении страницы есть.
   Нужен там, где раздел узнаётся по виду, но текстового заголовка не имеет.
   display: none не годится — такой заголовок читалка тоже пропустит. */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.u-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.crumbs b { font-weight: 500; color: rgba(255, 255, 255, 0.9); }

/* Ловушка для ботов: настоящий пользователь этого поля не видит */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Сообщение об ошибке отправки формы */
.form-error {
  border-radius: var(--radius);
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #e0b4a8;
  border-radius: var(--radius);
  background: #fdf3f1;
  color: #a8412a;
  font-size: 13px;
}
.form-error.is-visible { display: block; }

/* --------------------------------------------------------------------------
   23. Новые компоненты редизайна
   -------------------------------------------------------------------------- */

/* Секция на чёрном — как блок коллекций у референса */
/* Фон живёт на контейнере, а не на секции: иначе чёрное растекается
   во всю ширину окна вместо скруглённой карточки. */
.section--black { color: var(--on-dark); }
.section--black > .container {
  background: var(--black);
  /* Водяной знак шире колодца — обрезаем по карточке */
  overflow: hidden;
}
.section--black h2,
.section--black h3 { color: #fff; }
.section--black .section-lead { color: var(--on-dark); }

.section-foot { margin-top: clamp(32px, 4vw, 52px); text-align: center; }

/* Белая кнопка на тёмном фоне */
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: var(--on-dark); border-color: var(--on-dark); }

/* Счётчики в тексте блока «о компании» */
.stat-row--inline {
  margin-top: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}
.stat-row--inline .stat {
  background: transparent;
  padding: 0;
  text-align: left;
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
.stat-row--inline .stat:first-child { border-left: 0; padding-left: 0; }
.stat-row--inline .stat strong { font-size: clamp(24px, 2.4vw, 32px); }
.stat-row--inline .stat span { margin-top: 6px; font-size: 10.5px; }

/* Цены и числа — табличные цифры, чтобы не «прыгали» */
.product__price, .cat__from, .stat strong, .hero__fact strong,
.contact-item b, .footer__contact b { font-variant-numeric: tabular-nums; }

/* Мера строки для длинных текстов */
.section-lead, .prose p, .split__body p { max-width: var(--measure); }
.section-head--center .section-lead { margin-left: auto; margin-right: auto; }

.action-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 56px;
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.action-bar__btn--primary { background: var(--accent); color: #fff; }
.action-bar__btn:active { opacity: 0.75; }

/* Фильтры каталога: на телефоне сворачиваются */
.filters__toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.filters__toggle svg { transition: transform 0.3s var(--ease); color: var(--accent); }
.filters__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.filters__count {
  margin-left: auto;
  margin-right: 12px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  display: none;
  place-items: center;
}
.filters__count.is-visible { display: grid; }

/* Тач-цели не меньше 44px */
.filter-opt { min-height: 44px; }
.filter-opt input { width: 18px; height: 18px; }
.footer__links a, .mega__links a { display: inline-flex; align-items: center; }

@media (max-width: 1024px) {
  .filters { padding: 0; border: 0; background: transparent; }
  .filters__toggle { display: flex; }
  .filters__panel {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.4s var(--ease);
    background: var(--white);
    border-radius: var(--radius);
  }
  /* Отступы живут на внутренней обёртке: на самой панели они не дали бы
     ей схлопнуться в ноль и оставили бы белую полосу в закрытом виде. */
  .filters__panel > * { min-height: 0; }
  .filters.is-open .filters__panel {
    grid-template-rows: 1fr;
    border: 1px solid var(--line);
    border-top: 0;
    margin-top: -1px;
  }
  .filters.is-open .filters__inner { padding: 22px 18px; }
  .filters__group:first-child { margin-top: 0; }
}

@media (max-width: 720px) {
  .stat-row--inline { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .stat-row--inline .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .footer__links a, .mega__links a { min-height: 40px; }
}

/* --------------------------------------------------------------------------
   24. Правки по результатам замеров на реальном мобильном вьюпорте
   -------------------------------------------------------------------------- */

/* Ловушка для ботов не должна считаться интерактивным элементом */
.hp-field input,
.hp-field label { width: 1px !important; height: 1px !important; font-size: 1px; }

/* Крестик модалки — полноценная тач-цель */
.modal__close { width: 44px; height: 44px; }

@media (max-width: 720px) {
  /* Телефон в шапке не помещался и растягивал страницу до 451px при экране 390 */
  .header__phone { display: none; }

  /* Логотип и ссылки подвала — не меньше 40px по высоте */
  .logo__mark { width: 40px; height: 40px; }
  .footer__legal a,
  .footer__bottom a,
  .footer__contact a,
  .footer__legal { gap: 4px 22px; }

  /* Ссылка «Показать всё» и подобные внутри списков */
  .m-item__sub a { min-height: 48px; }
}

/* --------------------------------------------------------------------------
   Страница изделия (/product/12)
   -------------------------------------------------------------------------- */
.page-hero--slim { padding: 62px 0 54px; }

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}

.pdp__main {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.pdp__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__main .product__badge { top: 16px; left: 16px; }

.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.pdp__thumb {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__thumb:hover { transform: translateY(-2px); }
.pdp__thumb.is-active { border-color: var(--accent); }

.pdp__info .product__cat { display: block; margin-bottom: 10px; }
.pdp__info h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: var(--tr-title); }

.pdp__price {
  margin: 20px 0 24px;
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.pdp__price small {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.pdp__desc { max-width: var(--measure); }
.pdp__desc p { margin: 0 0 14px; }
.pdp__desc p:last-child { margin-bottom: 0; }

.pdp__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 22px;
  margin: 26px 0 30px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.pdp__meta dt { color: var(--muted); }
.pdp__meta dd { margin: 0; color: var(--ink); font-weight: 500; }

.pdp__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp__note { margin-top: 18px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: 30px; }
  .pdp__price { font-size: 26px; }
}

@media (max-width: 560px) {
  .pdp__thumbs { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .pdp__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Переключатель языка в верхней строке
   -------------------------------------------------------------------------- */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.lang__btn {
  padding: 5px 11px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
  line-height: 1.4;
}
.lang__btn:hover { color: var(--ink); }
.lang__btn.is-active {
  background: var(--accent);
  color: #fff;
}
.lang__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* В мобильном меню — тот же переключатель: в шапке на планшетах
   и телефонах он скрыт, и кнопка в ней недоступна. */
.lang--mobile {
  justify-self: start;
  margin-bottom: 4px;
  border-color: var(--line-dark);
  background: transparent;
}
.lang--mobile .lang__btn { color: var(--on-dark-quiet); }
.lang--mobile .lang__btn:hover { color: #fff; }
.lang--mobile .lang__btn.is-active { background: #fff; color: var(--dark); }
.mobile-nav__foot .u-note { color: var(--on-dark-quiet); }
.lang--mobile .lang__btn {
  /* Полноценная тач-цель: было 35px по высоте, палец промахивался мимо
     соседнего языка. 44px — минимум, ниже которого попадание становится
     делом удачи. */
  min-height: 44px;
  padding: 0 16px;
  font-size: 12px;
}

/* ==========================================================================
   Сенсорный экран
   ==========================================================================

   На телефоне нет наведения: касание включает :hover, и карточка не только
   дёргается, но и остаётся в этом состоянии, пока не тронешь другое место.
   Поэтому все эффекты с движением включаем только там, где есть настоящий
   указатель. Проверяем возможность ввода, а не ширину экрана: у планшета
   в альбомной ориентации экран широкий, а палец всё тот же.
   -------------------------------------------------------------------------- */

@media (hover: none) {
  /* Карточки не приподнимаются и не масштабируются от касания */
  .product:hover,
  .info-card:hover,
  .review:hover,
  .pdp__thumb:hover,
  .btn:hover,
  .btn--primary:hover,
  .btn--dark:hover,
  .btn--light:hover {
    transform: none;
    box-shadow: inherit;
  }

  .collection:hover .collection__img img,
  .product:hover .product__media img,
  .gallery__item:hover img {
    transform: none;
  }

  .link-more:hover svg { transform: none; }
  .cat:hover .cat__media img { transform: none; }
  .species__item:hover .species__swatch { transform: none; }

  /* Затемнение поверх карточки коллекции меняться от касания не должно */
  .collection:hover::after { background: inherit; }

  /* Подпись к фото на телефоне видна сразу, а не по наведению */
  .gallery__item .gallery__cap { transform: none; opacity: 1; }
  .gallery__item .gallery__zoom { display: none; }

  /* Тень у карточки — постоянная, а не появляющаяся */
  .product, .info-card, .review { box-shadow: var(--shadow-sm); }
}

/* --------------------------------------------------------------------------
   Свайп по каруселям
   -------------------------------------------------------------------------- */

.collections__grid,
.cats__grid,
.reviews__track,
.products--swipe {
  /* Палец, доехавший до края ленты, не должен тянуть за собой страницу
     и не должен срабатывать как жест «назад» в браузере. */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Картинку внутри ссылки браузер норовит «взять и потащить» — при свайпе
   это срывает прокрутку. */
.collection img,
.cat img,
.product__media img {
  -webkit-user-drag: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Разделы каталога на телефоне — столбиком во всю ширину, как у образца
   -------------------------------------------------------------------------- */

.swipe-hint--dark { color: var(--muted); }

@media (max-width: 720px) {
  .cats__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
  }
  /* Лента вбок осталась от прежней вёрстки, где карточка была текстовой
     плиткой. С кадром сверху и подписью снизу она ломалась: заданная ленте
     пропорция растягивала карточку целиком, отрывая цену от названия
     и подвешивая стрелку посреди снимка. */
  .cat { aspect-ratio: auto; }
  .cat__media { aspect-ratio: 16 / 10; margin-bottom: 14px; }
  .cat h3 { font-size: 18px; }
  .cat__from { font-size: 14px; }

  /* Подсказка про свайп больше не нужна: листать нечего. */
  .swipe-hint--dark { display: none; }
}

/* ==========================================================================
   Ленты крутятся только вбок
   ==========================================================================

   При overflow-x: auto спецификация CSS делает вторую ось тоже
   прокручиваемой — overflow-y сам становится auto. Внутри ленты набегало
   20–22 пикселя запаса (от анимации появления карточек), и палец,
   которым хотели пролистать страницу вниз, сначала утаскивал ленту вбок
   и вниз. Ощущалось как «товары ездят сами по себе».
   -------------------------------------------------------------------------- */

.collections__grid,
.cats__grid,
.reviews__track,
.products--swipe {
  /* Вертикально лента не двигается вообще: гасим вторую ось, которую
     спецификация включила сама. Этого достаточно — вертикальному жесту
     внутри ленты нечего прокручивать, и он уходит странице.

     touch-action: pan-x здесь ставить нельзя: он запрещает вертикальный
     жест целиком, и страница перестаёт листаться пальцем поверх ленты. */
  overflow-y: hidden;
}

/* Карточки внутри ленты не должны въезжать снизу: именно этот сдвиг
   и создавал вертикальный запас, за который цеплялся палец.
   Появление им не нужно — их и так не видно, пока не долистаешь. */
.collections__grid > .reveal,
.cats__grid > .reveal,
.reviews__track > .reveal {
  transform: none;
}

/* На узкой карточке плашка «Премиум» и название вставали на одной высоте
   и почти сталкивались — опускаем заголовок ниже плашки. */
@media (max-width: 720px) {
  .collection { padding-top: 64px; }
}

/* --------------------------------------------------------------------------
   СТРАНИЦА НЕ НАЙДЕНА
   -------------------------------------------------------------------------- */

/* Содержимого на странице немного: обычные отступы раздела оставляли
   между заголовком и кнопками полтора пустых экрана. */
.section--nf { padding-top: 56px; padding-bottom: 72px; }
.nf { text-align: center; }
.nf__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.nf__note {
  margin: 30px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.nf__note a {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
.nf__note a:hover { color: var(--accent-h); }

@media (max-width: 560px) {
  /* В столбик кнопки шире и попадать по ним проще, чем по половинкам строки */
  .nf__actions { flex-direction: column; }
  .nf__actions .btn { width: 100%; }
}