/* blocks.css — оформление блоков ниже первого экрана.
   Первый экран живёт в critical.css и здесь не трогается. */

/* =========================================================================
   Фото, растворяющееся в фоне страницы. Общий класс для трёх фотографий:
   складская площадка, склад (в блоке преимуществ) и установка крупным планом.
   Никаких рамок и теней — край изображения не должен читаться линией.
   ========================================================================= */

.ph {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* единая цветокоррекция под палитру сайта — для фото внутри карточки/контейнера */
  filter: saturate(.92) contrast(1.06) brightness(.82);
}

/* растворение всех четырёх краёв — для фото внутри карточки/контейнера.
   Для полноширинных фото (.ph--bleed) не используется: там растворение
   только по вертикали, см. ниже. */
.ph--fade img {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 82%, transparent 100%);
          mask-composite: intersect;
}

/* тёплый янтарный слой — привязывает кадр к акценту сайта.
   Для .ph--bleed этот слой ниже полностью заменяется затемняющим градиентом. */
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 12% 40%, rgba(255, 156, 49, .16), transparent 60%),
    linear-gradient(to top, var(--bg) 0, rgba(10, 13, 16, .35) 26%, transparent 62%);
  pointer-events: none;
}

/* зерно — то же, что в первом экране, чтобы фактура была общая.
   Прозрачность понижена под более светлые фото (.ph--bleed) — на них зерно
   заметнее, чем на прежних затемнённых кадрах. */
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/hero/grain.png") repeat;
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

/* =========================================================================
   Фото-подложка на всю ширину окна. Пробивает боковые отступы контейнера
   классическим приёмом margin: calc(50% - 50vw) — работает независимо от
   того, на какой глубине вложенности лежит элемент. html{overflow-x:clip}
   (уже объявлено в critical.css) не даёт этому породить горизонтальную
   прокрутку из-за ширины полосы прокрутки.
   ========================================================================= */

.ph--bleed {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  overflow: hidden;
  height: clamp(320px, 40vw, 620px);
  /* Боковые края уходят за экран сами — растворять их горизонтально
     не нужно и нельзя, это даст лишнее потемнение по бокам. Только вертикаль. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, #000 10%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%, #000 10%, #000 88%, transparent 100%);
}
@media (max-width: 700px) {
  .ph--bleed { height: clamp(260px, 62vw, 420px); }
}

.ph--bleed > img,
.ph--bleed picture,
.ph--bleed picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* Единая светлая цветокоррекция: понижение яркости больше не нужно —
   читаемость текста обеспечивает локальный градиент ниже, а не общее
   затемнение кадра. */
.ph--bleed > img,
.ph--bleed picture img {
  filter: saturate(1.02) contrast(1.04) brightness(1);
}

/* Текст лежит рядом с фото, а не поверх него (комплектация установки) —
   лёгкое притемнение только снизу. Используется только с ph--plain —
   боковой overlay «Складской программы» переехал в .yardshot__scrim
   (Промпт №30), общий .ph--bleed::after больше не нужен. */
.ph--bleed.ph--plain::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top, rgba(10, 13, 16, .45) 0%, rgba(10, 13, 16, 0) 30%);
  pointer-events: none;
}

/* =========================================================================
   Карточка: волосяная рамка из градиента вместо обычного бордера
   ========================================================================= */

.card {
  position: relative;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* волосяная рамка поверх кадра и пятна света */
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--hairline-2), transparent 42%, transparent 62%, var(--accent-dim));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@media (hover: hover) {
  .card:hover { background: var(--surface-2); transform: translateY(-2px); }
}

/* Стеклянная панель — для калькулятора и квиза */
.panel-glass {
  position: relative;
  border-radius: var(--radius-lg);
  background: rgba(16, 21, 26, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.panel-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--hairline-2), transparent 45%, transparent 60%, var(--accent-dim));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* =========================================================================
   Объекты: янтарная линия слева растёт сверху вниз
   ========================================================================= */

.object {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  transition: background-color .25s var(--ease);
  color: var(--text-muted);
  justify-content: center;
  min-height: 96px;
}
.object::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .3s var(--ease);
}
.object:focus-within::after { transform: scaleY(1); }
@media (hover: hover) {
  .object:hover { background: var(--surface-2); }
  .object:hover::after { transform: scaleY(1); }
}

/* =========================================================================
   Преимущества: крупная цифра контуром в янтаре
   ========================================================================= */

.advantage { padding: clamp(20px, 2.4vw, 32px); }
.advantage__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1;
  margin-bottom: var(--s-2);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  font-variant-numeric: tabular-nums;
}
.advantage__title { font-weight: 600; margin-bottom: var(--s-1); }
.advantage__text { color: var(--text-muted); font-size: var(--fs-small); }

/* Семь карточек: 4+3 на десктопе, без кривой дыры в последнем ряду.
   Общий .grid-cards (auto-fit) здесь не годится — число колонок плывёт
   вместе с шириной экрана и на 7 элементах может дать 6+1 или 5+2. */
#pochemu .grid-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  #pochemu .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  #pochemu .grid-cards { grid-template-columns: 1fr; }
}

/* =========================================================================
   Каталог
   ========================================================================= */

.filters { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-2); }
.filter {
  min-height: 44px;
  padding: 0 var(--s-2);
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
@media (hover: hover) {
  .filter:hover { border-color: var(--hairline-2); color: var(--text); }
}
.filter[aria-pressed="true"],
.filter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 500;
}

.catalog__count {
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.catalog__empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: clamp(32px, 5vw, 64px) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  text-align: center;
}
.catalog__empty[hidden] { display: none; }
.catalog__empty-title { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3); }

/* =========================================================================
   Карточка каталога: восемь строк, выровненных по всему ряду сетки.
   li и article — subgrid, поэтому картинка, тип объекта, заголовок,
   «Закроет», примечание, срок, цена и кнопка идут по одним линиям
   во всех карточках ряда, даже если текст разной длины.
   ========================================================================= */

.cards__item { display: flex; }
.cards__item > .card { display: flex; flex-direction: column; width: 100%; }

.grid-cards--catalog { grid-auto-rows: min-content; }
.grid-cards--catalog > .cards__item {
  grid-row: span 8;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: var(--s-2);
}
.grid-cards--catalog > .cards__item > .card--product {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: var(--s-2);
}
.card--product { --card-pad: clamp(16px, 1.8vw, 24px); }
.card--product > :not(.card-media) { padding-inline: var(--card-pad); }
.card--product > :last-child { padding-bottom: var(--card-pad); }
.card__offers { display: none; }

/* Запасной вариант там, где subgrid не поддержан: те же линии держим
   одинаковой минимальной высотой блоков. */
@supports not (grid-template-rows: subgrid) {
  .grid-cards--catalog > .cards__item { display: flex; }
  .grid-cards--catalog > .cards__item > .card--product {
    display: flex;
    flex-direction: column;
    row-gap: var(--s-2);
  }
  .card--product .card__objects { min-height: 2.8em; }
  .card--product .card__title { min-height: 2.4em; }
  .card--product .card__covers { min-height: 4.4em; }
  .card--product .card__note { min-height: 44px; }
  .card--product .card__price { margin-top: auto; }
}

/* Кадр товара. Пропорция 3:2 — ровно как сняты фотографии, иначе обрежется. */
.card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: clip;
  background: #0b0f13;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* мягкое затемнение снизу, чтобы бейдж мощности читался на любом кадре */
.card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(7, 10, 12, .72));
  pointer-events: none;
}

@media (hover: hover) {
  .card-media img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .card:hover .card-media img { transform: scale(1.035); }
}

/* Бейдж мощности лежит поверх кадра и поверх затемнения */
.card__badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  padding: 5px 12px;
  background: rgba(10, 13, 16, .72);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-small);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: clamp(16px, 1.8vw, 24px);
  flex: 1;
}
/* Заголовок карточки: слово «Дизель-генератор» не разрывается никогда.
   Дефис в нём заменён на неразрывный на этапе сборки, эти свойства страхуют. */
.card__title {
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.2;
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}
.card__text { color: var(--text-muted); font-size: var(--fs-small); }

/* Тип объекта — над заголовком, мелко и акцентом */
.card__objects {
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  color: var(--accent);
  letter-spacing: .02em;
}

/* Что закроет по нагрузке */
.card__covers { font-size: var(--fs-small); color: var(--text-muted); }
.card__covers b { color: var(--text); font-weight: 500; }

/* Примечание про источник бесперебойного питания: свёрнуто — одна строка,
   раскрывается без скриптов и с клавиатуры. */
.card__note { font-size: var(--fs-eyebrow); color: var(--text-muted); }
.card__note--empty { display: block; }
.card__note-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--accent-2);
  cursor: pointer;
  list-style: none;
}
.card__note-title::-webkit-details-marker { display: none; }
.card__note-title::before {
  content: "+";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.card__note[open] .card__note-title::before { content: "−"; }
.card__note-text {
  padding-left: var(--s-2);
  margin-top: 6px;
  border-left: 2px solid var(--accent-dim);
  line-height: 1.5;
}

.card__specs { margin: 0; display: grid; }
.card__spec {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: 10px;
  font-size: var(--fs-small);
  border-top: 1px solid var(--hairline);
}
.card__spec:last-child { border-bottom: 1px solid var(--hairline); }
.card__spec dt { color: var(--text-muted); flex: none; }
.card__spec dd { margin: 0; color: var(--text); text-align: right; }

.card__ship {
  font-size: var(--fs-small);
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
}
.card__ship::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.card__price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.card__actions { display: flex; flex-direction: column; gap: var(--s-1); }

/* мини-характеристики под ценой (напряжение и фазы, бак, масса) */
.card__minispecs {
  margin-top: 4px;
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Вся карточка — ссылка на страницу позиции: невидимый оверлей растянут
   на весь .card (уже position:relative), кнопка «Получить КП» лежит
   явным слоем выше и остаётся кликабельной отдельно. */
.card__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-2);
  font-size: var(--fs-small);
  text-decoration: none;
}
.card__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__actions .btn { position: relative; z-index: 1; }

/* Последняя плитка — без фотографии: вместо кадра пятно света */
.card--cta { justify-content: center; overflow: clip; }
.card--cta::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(420px, 90%);
  aspect-ratio: 1;
  left: 50%;
  top: -30%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 156, 49, .10), transparent 62%);
  filter: blur(24px);
  pointer-events: none;
}
.card--cta .card__body { gap: var(--s-2); justify-content: center; }

/* =========================================================================
   Как проходит сделка: вертикальная последовательность на любом экране
   ========================================================================= */

.process { display: block; }
.process__step {
  position: relative;
  padding-left: clamp(52px, 5vw, 76px);
  padding-bottom: clamp(24px, 3vw, 40px);
}
.process__step:last-child { padding-bottom: 0; }
/* соединительная линия: сверху янтарная, книзу гаснет до волосяной */
.process__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: clamp(19px, 1.85vw, 27px);
  top: clamp(40px, 3.7vw, 54px);
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--accent-dim), var(--hairline));
}
.process__num {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 3.7vw, 54px);
  aspect-ratio: 1;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-small);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  background: var(--bg);
}
.process__title { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 6px; }
.process__text { font-size: var(--fs-small); color: var(--text-muted); }

/* =========================================================================
   Документы: строки с волосяными разделителями
   ========================================================================= */

.docs { display: block; }
.docs__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-block: clamp(14px, 1.6vw, 20px);
  border-bottom: 1px solid var(--hairline);
  color: var(--text-muted);
}
.docs__item:first-child { border-top: 1px solid var(--hairline); }
.docs__icon { flex: none; width: 24px; height: 24px; color: var(--accent); }
.docs__name { flex: 1; color: var(--text); font-size: var(--fs-small); }
.docs__meta { flex: none; font-size: var(--fs-small); color: var(--text-muted); }

/* =========================================================================
   «Производство и склад» — большой фотоблок на главной (ПРОМПТ №67).
   Фото — верхняя широкая часть блока без рамки/тени/скругления, по ВСЕМ
   краям мягко растворяется в фон страницы: два псевдоэлемента с несколькими
   linear-gradient (без mask-image). ::before — общее лёгкое затемнение
   (~14%) + короткие переходы сверху и по бокам (~8%); ::after — нижний
   переход чуть глубже (~24%). Сам img не трогаем (без filter/opacity).
   Текст лежит ниже фото на чистом фоне страницы, не поверх изображения.
   ========================================================================= */

.pshero {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
}
.pshero__photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  background: var(--bg);
}
.pshero__img {
  position: absolute;
  inset: 2px; /* картинка не касается края бокса — края гарантированно цвета фона */
  display: block;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  object-fit: cover;
  object-position: 50% 55%;
}
.pshero__photo::before,
.pshero__photo::after {
  content: "";
  position: absolute;
  inset: -1px; /* перекрываем субпиксельный «волосок» по краю фото */
  pointer-events: none;
}
.pshero__photo::before {
  z-index: 1;
  background:
    linear-gradient(to bottom, var(--bg) 0, var(--bg) 3px, rgba(10, 13, 16, 0) 8%),
    linear-gradient(to right,  var(--bg) 0, var(--bg) 3px, rgba(10, 13, 16, 0) 8%),
    linear-gradient(to left,   var(--bg) 0, var(--bg) 3px, rgba(10, 13, 16, 0) 8%),
    linear-gradient(rgba(10, 13, 16, .14), rgba(10, 13, 16, .14));
}
.pshero__photo::after {
  z-index: 2;
  background: linear-gradient(to top,
    var(--bg) 0,
    var(--bg) 3px,
    rgba(10, 13, 16, .6) 9%,
    rgba(10, 13, 16, 0) 24%);
}
/* то же зерно, что у фона страницы (body::before): без него непрозрачный
   прямоугольник фото на «зернистом» фоне даёт еле заметный контур по краю */
.pshero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: url(/hero/grain.png) 0 0 / 128px 128px;
  opacity: .5;
  mix-blend-mode: overlay;
}
.pshero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding-inline: clamp(0px, 1vw, 8px);
}
.pshero__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: #fff;
}
.pshero__subtitle {
  color: var(--text);
  font-size: var(--fs-lead);
  max-width: 62ch;
}
.pshero__text {
  color: var(--text-muted);
  font-size: var(--fs-body);
  max-width: 68ch;
}
.pshero__btn {
  margin-top: var(--s-1);
  width: 100%;
  pointer-events: none; /* клик обрабатывает вся ссылка .pshero */
}
@media (min-width: 700px) {
  .pshero__photo { aspect-ratio: 16 / 9; }
  .pshero__btn { width: auto; }
}
@media (min-width: 1100px) {
  .pshero__photo { aspect-ratio: 2 / 1; }
}

/* =========================================================================
   Фото склада в блоке преимуществ: широкая строка под сеткой карточек
   ========================================================================= */

.advantages__photo { margin-top: var(--s-5); }
/* Блок «Мировые лидеры» на главной (Промпт №60): баннер стоит первым,
   поэтому отступ нужен под ним, а не над ним, как у advantages__photo. */
#mirovye-lidery .hallshot { margin-bottom: var(--s-5); }
.advantages__caption {
  margin-top: var(--s-3);
  color: var(--text-muted);
  font-size: var(--fs-body);
  max-width: 70ch;
}

/* =========================================================================
   hallshot — светлый кадр склада со сшивкой в тёмный фон страницы
   только по краям (верх/низ/бока), середина кадра остаётся светлой.
   Промпт №30. Значения не пересчитываю — подобраны под --bg.
   ========================================================================= */
.hallshot {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}
.hallshot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  z-index: 0;
}

/* верх и низ: уходит в фон страницы */
.hallshot__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      #0a0d10 0%,
      rgba(10, 13, 16, .92) 6%,
      rgba(10, 13, 16, .45) 16%,
      rgba(10, 13, 16, 0) 30%),
    linear-gradient(to top,
      #0a0d10 0%,
      rgba(10, 13, 16, .94) 8%,
      rgba(10, 13, 16, .50) 18%,
      rgba(10, 13, 16, 0) 34%);
}

/* бока: чуть притемняем, чтобы кадр не обрывался вертикальной линией */
.hallshot__sides {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(10, 13, 16, .75) 0%, rgba(10, 13, 16, 0) 12%),
    linear-gradient(to left,  rgba(10, 13, 16, .75) 0%, rgba(10, 13, 16, 0) 12%);
}

/* =========================================================================
   Сервис и обслуживание: вступление → фото выезда → перечень работ
   ========================================================================= */

.svc__photo { margin-block: clamp(28px, 4vw, 48px); }

.svc__list {
  display: grid;
  gap: 0;
  margin: 0 0 var(--s-2);
  padding: 0;
  list-style: none;
}
.svc__list > li {
  padding-block: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--hairline);
}
.svc__list > li:first-child { border-top: 1px solid var(--hairline); }

.svc__item-title {
  position: relative;
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.svc__item-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.svc__item-text {
  margin: 0;
  padding-left: 18px;
  max-width: 68ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}

.svc__note {
  margin-top: var(--s-3);
  max-width: 72ch;
  font-size: var(--fs-eyebrow);
  line-height: 1.55;
  color: var(--text-muted);
}
.svc__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s-2);
  color: var(--accent);
  font-size: var(--fs-small);
  text-decoration: none;
}
.svc__link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 860px) {
  .svc__list { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); }
  .svc__list > li:nth-child(2) { border-top: 1px solid var(--hairline); }
  .svc__list > li:last-child { grid-column: 1 / -1; }
}


/* =========================================================================
   Страница мощности
   ========================================================================= */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
.table-scroll:focus-visible { outline: 2px solid var(--accent-2); }

/* Промпт №63: свой скроллбар прячем — «листайте дальше» показывает явный
   фейд-градиент (.specs-scroll::after ниже) и стрелка-маячок, а не голая
   полоса прокрутки снизу таблицы. */
.table-scroll,
.specs-compare {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.table-scroll::-webkit-scrollbar,
.specs-compare::-webkit-scrollbar {
  display: none;
}

.specs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.specs th,
.specs td {
  padding: var(--s-2);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--hairline);
}
.specs thead th {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.specs tbody th {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--accent);
}
.specs td { color: var(--text-muted); font-size: var(--fs-small); }
.specs tbody tr:last-child th,
.specs tbody tr:last-child td { border-bottom: 0; }

.power-link a {
  display: grid;
  gap: 4px;
  min-height: var(--tap);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .25s var(--ease);
}
@media (hover: hover) {
  .power-link a:hover { border-color: var(--accent); }
}
.power-link__hint { font-size: var(--fs-small); color: var(--text-muted); }
.power-link__power {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Калькулятор
   ========================================================================= */

.calc { padding: clamp(20px, 2.4vw, 34px); }
.calc__list {
  display: grid;
  gap: var(--s-1);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.calc__item {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px;
  border-radius: var(--r-btn);
}
@media (hover: hover) {
  .calc__item:hover { background: var(--surface-2); }
}
.calc__pick {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 var(--s-1);
  cursor: pointer;
}
.calc__box { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.calc__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.calc__kvt {
  font-size: var(--fs-small);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__qty { display: flex; align-items: center; gap: 4px; flex: none; }
.calc__qty-label { font-size: var(--fs-eyebrow); color: var(--text-muted); }
.calc__qty-input {
  width: 68px;
  min-height: var(--tap);
  padding: 0 var(--s-1);
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
}

.calc__result,
.calc__over {
  margin-top: var(--s-3);
  padding: clamp(18px, 2vw, 28px);
  background: var(--bg);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
}
.calc__result[hidden], .calc__over[hidden] { display: none; }

.calc__line { color: var(--text-muted); }
.calc__line + .calc__line { margin-top: 6px; }
.calc__line b {
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* третья строка — главная: крупно и янтарём */
.calc__line--main {
  margin-top: var(--s-2);
  color: var(--text);
  font-size: var(--fs-lead);
}
.calc__line--main b {
  color: var(--accent);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  vertical-align: -.08em;
}
.calc__model { color: var(--accent-2); font-size: var(--fs-small); white-space: nowrap; }

.calc__explain {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 78ch;
}
.calc__bigger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  margin-top: var(--s-3);
}
.calc__bigger-note { font-size: var(--fs-small); color: var(--text-muted); }
.calc__bigger .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-2); }
.calc__disclaimer {
  margin-top: var(--s-3);
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  max-width: 78ch;
}

.calc__empty { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--text-muted); }
.calc__empty[hidden] { display: none; }
.form--calc { margin-top: var(--s-3); }

/* =========================================================================
   Квиз
   ========================================================================= */

.quiz { padding: clamp(20px, 2.4vw, 34px); }
.quiz__progress { margin-bottom: var(--s-3); }
.quiz__bar { height: 4px; background: var(--bg); border-radius: var(--r-pill); overflow: hidden; }
.quiz__bar-fill {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width .3s var(--ease);
}
.quiz__counter { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--text-muted); }

.quiz__step { border: 0; margin: 0; padding: 0; }
.quiz__step + .quiz__step { margin-top: var(--s-5); }
.quiz.is-stepped .quiz__step { display: none; }
.quiz.is-stepped .quiz__step.is-current { display: block; margin-top: 0; }

.quiz__question {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  padding: 0;
  margin-bottom: var(--s-2);
}
.quiz__options { display: grid; gap: var(--s-1); }
.quiz__option {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap);
  padding: var(--s-1) var(--s-2);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: border-color .25s var(--ease);
}
@media (hover: hover) {
  .quiz__option:hover { border-color: var(--hairline-2); }
}
.quiz__radio { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.quiz__radio:checked + .quiz__option-text { color: var(--accent-2); }
.quiz__option:has(.quiz__radio:checked) { border-color: var(--accent); }
.quiz__nav { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.quiz__nav .btn { flex: 1; }

/* =========================================================================
   Формы
   ========================================================================= */

.form { display: grid; gap: var(--s-2); }
.form__title { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3); }
.form__note { font-size: var(--fs-small); color: var(--text-muted); }
.form__note a { color: var(--text); font-variant-numeric: tabular-nums; }
/* вторичные действия — текстовой ссылкой, а не второй кнопкой */
.link-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-2);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent-dim);
}

.field { display: grid; gap: 6px; }
.field__label { font-size: var(--fs-small); color: var(--text-muted); }
.field__input {
  width: 100%;
  min-height: var(--tap);
  padding: 12px var(--s-2);
  font-family: inherit;
  font-size: 16px; /* меньше 16px — Safari на iPhone зажимает масштаб */
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field__input::placeholder { color: var(--text-muted); }
/* видимая обводка при фокусе — это доступность, а не украшение */
.field__input:focus,
.field__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.field__input--area { min-height: 96px; resize: vertical; }
select.field__input { appearance: none; cursor: pointer; padding-right: var(--s-4); }

/* Подсказка под полем и текст ошибки — каждый под своим полем */
.field-hint { font-size: var(--fs-eyebrow); color: var(--text-muted); }
.field__error { font-size: var(--fs-small); color: var(--accent-2); }
.field.is-error .field__input { border-color: var(--accent-2); }
.field.is-error .field-hint { display: none; }

.consent { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: flex-start; }
.consent__box { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.consent__text { flex: 1; min-width: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); cursor: pointer; }
.consent__text a { color: var(--text); }
.consent.is-error .consent__text { color: var(--accent-2); }

.form-success {
  display: grid;
  gap: var(--s-2);
  padding: clamp(24px, 3vw, 40px) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  text-align: center;
}
.form-success__title { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-h3); }
.form-success__text { color: var(--text-muted); font-size: var(--fs-small); }
.form-success__phone {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--accent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Подвал
   ========================================================================= */

.footer { background: var(--footer-bg); border-top: 1px solid var(--hairline); }
/* Тот же лок-ап знак+слово, что в шапке, но приглушённый: белый знак
   с прозрачностью — подвал тёмный (var(--footer-bg)), оранжевый на нём
   был бы слишком ярким акцентом для второстепенного места. */
.footer__logo {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: var(--s-1);
}
.footer__logo-mark { display: block; flex: none; opacity: .85; }
.footer__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.footer__col p { margin-bottom: var(--s-1); color: var(--text-muted); font-size: var(--fs-small); }
/* ссылки в подвале стоят отдельными строками, поэтому им нужна полная площадь нажатия */
.footer__col p > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
}
.footer__phone {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--text) !important;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.footer__tagline, .footer__legal { color: var(--text-muted) !important; }
.footer__bottom p { font-size: var(--fs-small); color: var(--text-muted); }
.footer__disclaimer { max-width: 70ch; }

/* Ссылки на гео-страницы под основными колонками подвала */
.footer__regions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  border-top: 1px solid var(--hairline);
}
.footer__regions-title { font-size: var(--fs-small); color: var(--text-muted); }
.footer__regions-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.footer__regions-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.footer__regions-links a:hover { color: var(--text); }

/* =========================================================================
   Окна и плавающие элементы
   ========================================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--page-pad);
}
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(6, 8, 10, .74); }
.modal__window {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  overflow-y: auto;
  display: grid;
  gap: var(--s-2);
  padding: clamp(24px, 3vw, 40px) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.modal__close {
  position: absolute;
  top: var(--s-1);
  right: var(--s-1);
  width: 44px;
  height: 44px;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-btn);
  cursor: pointer;
}
.modal__close:hover { color: var(--text); background: var(--surface-2); }
.modal__title { font-size: var(--fs-h3); padding-right: var(--s-5); }
.modal__lead { color: var(--text-muted); font-size: var(--fs-small); }

/* Промпт №60: на iOS Safari backdrop-filter на position:fixed-элементе
   даёт известный глюк композитинга — панель визуально «отрывается» от низа
   и съезжает при инерционном скролле. Убрали blur, оставили твёрдый
   полупрозрачный фон (он и раньше был почти непрозрачным, .92). Проверка
   предков .floats (body, html) на transform/filter/contain/backdrop-filter,
   которые ломают containing block для fixed, — ничего такого не нашлось
   (у body только position:relative и overflow-x:clip — по спецификации
   ни то, ни другое на fixed не влияет), так что дело было именно в blur. */
.bottombar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(10, 13, 16, .96);
  border-top: 1px solid var(--hairline);
  /* Промпт №63: на iOS Safari fixed-элемент иногда отстаёт от контента
     в момент инерционной прокрутки/сворачивания адресной строки —
     собственный composited-слой убирает этот эффект. Позиционирование
     (position/inset) не трогаем, только это. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Иконка-плитка в стиле iOS: закруглённый квадрат + подпись под ним.
   Позвонить/Подбор — тонкие контурные значки цвета подписи (currentColor,
   поэтому у «Позвонить» они забирают акцентный цвет из --bottombar__item--main
   автоматически); Заявка/Телеграм/MAX — свои цветные squircle-иконки
   из assets/images/*.svg, каждая уже со своим фирменным градиентом. */
.bottombar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
  padding: 6px 2px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-muted);
  text-decoration: none;
  border-right: 1px solid var(--hairline);
}
.bottombar__item:last-child { border-right: 0; }
.bottombar__item--main { color: var(--accent); font-weight: 500; }
.bottombar__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}
.bottombar__icon { display: block; flex: none; }
.bottombar__icon--app { border-radius: 22%; } /* на случай если картинка ещё не загрузилась */

@media (min-width: 768px) {
  .bottombar { display: none; }
}

/* =========================================================================
   Страница позиции: /dizel-generator-<мощность>-kvt/
   ========================================================================= */

/* Хлебные крошки */
.breadcrumbs { padding-top: var(--s-3); }
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.breadcrumbs__list a { color: var(--text-muted); text-decoration: none; }
.breadcrumbs__list a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs__list li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--hairline-2); }
.breadcrumbs__list li[aria-current] { color: var(--text); }

/* Первый экран позиции: фото + цена/кнопки */
.product-hero__subtitle {
  margin-top: var(--s-2);
  font-size: var(--fs-lead);
  color: var(--text-muted);
}
.product-hero__objects {
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.product-hero__grid { margin-top: var(--s-5); align-items: start; }
.product-seo-text { font-size: var(--fs-body); line-height: var(--lh-text); color: var(--text-muted); }
.product-hero__photo { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); }
/* нет фото у позиции — нейтральная плашка вместо пустоты или битой картинки */
.product-hero__photo--empty { background: var(--surface); border: 1px dashed var(--hairline-2); }
.product-hero__price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.product-hero__price-note { margin-top: var(--s-1); }
.product-hero__config { font-size: var(--fs-small); color: var(--text-muted); }
.product-hero__disclaimer {
  margin-top: 4px;
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
  max-width: 52ch;
}
.product-hero__actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }

/* Под ценой: что входит в цену и что закроет — раньше это были отдельные
   секции ниже по странице, теперь человек видит их сразу рядом с ценой. */
.product-hero__included { margin-top: var(--s-3); }
.product-hero__sub {
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}
.product-hero__inc-list { display: grid; gap: 6px; }
.product-hero__inc-list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text);
}
.product-hero__inc-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* «Что закроет» — выделено плашкой, чтобы читалось как отдельный факт
   об объекте, а не сливалось со списком комплектации выше. */
.product-hero__covers {
  margin-top: var(--s-3);
  padding: var(--s-2);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.product-hero__covers-text {
  font-size: var(--fs-small);
  line-height: var(--lh-text);
  color: var(--text);
}

/* Список «оплачивается отдельно» без второй колонки — в две колонки на
   широком экране, чтобы не растягивался в длинный столбик. */
@media (min-width: 700px) {
  .included__list--wide { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
}

.product-hero__actions .btn { width: 100%; }

/* Что входит в цену: два списка, галочки слева приглушённые, плюсы справа акцентные */
.included__title {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.included__list { display: grid; gap: 8px; }
.included__list li {
  position: relative;
  padding-left: 26px;
  color: var(--text);
  font-size: var(--fs-small);
}
.included__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-head);
  font-weight: 700;
}
.included__list--in li::before { content: "✓"; color: var(--text-muted); }
.included__list--out li::before { content: "+"; color: var(--accent); }

/* Исполнения */
.enclosures { display: grid; gap: var(--s-2); }
.enclosures__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.enclosures__text { color: var(--text-muted); font-size: var(--fs-small); }
.enclosures__text b { color: var(--text); font-weight: 500; }
.enclosures__price {
  flex: none;
  color: var(--accent-2);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Характеристики: пять групп, в каждой — таблица в две колонки */
.specs-group + .specs-group { margin-top: var(--s-4); }
.specs-group__title {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--s-1);
}
.specs-group__table { margin: 0; display: grid; }
.specs-group__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-small);
}
.specs-group__row dt { margin: 0; color: var(--text-muted); flex: none; }
.specs-group__row dd { margin: 0; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

/* Сравнительная таблица двигателей (ПРОМПТ №61): «Общие» — тот же список,
   что и раньше, но уже не на всю ширину широкого контейнера страницы
   позиции (см. product-specs.html, теперь section использует .container,
   а не .container--narrow — иначе таблицам сравнения было бы тесно). */
.specs-basic { max-width: 640px; }
.specs-basic + .specs-compare,
.specs-compare + .specs-compare,
.specs-compare + .specs-basic { margin-top: var(--s-4); }

/* Строка-параметр слева — не заголовок-цифра, как в .specs на странице
   мощности, а обычная подпись: тот же вид, что у .specs-group__row dt. */
.specs--compare tbody th {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-align: left;
  white-space: normal;
  min-width: 200px;
  max-width: 260px;
}
.specs--compare thead th:first-child { min-width: 200px; }
.specs--compare td { white-space: normal; min-width: 160px; }

/* Промпт №62: первая колонка (названия параметров) закреплена при
   горизонтальной прокрутке — иначе на телефоне непонятно, к чему
   относится цифра во второй и следующих колонках. Свой непрозрачный
   фон обязателен (иначе сквозь sticky-ячейку просвечивают уехавшие
   вбок соседние колонки), плюс тень справа — граница между закреплённой
   колонкой и тем, что уехало под неё. */
.specs--compare thead th:first-child,
.specs--compare tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 4px 0 8px -4px rgba(0, 0, 0, .45);
}
.specs--compare thead th:first-child { z-index: 2; }

/* На телефоне колонка подписей сама по себе меньше половины экрана —
   у следующей (первой с цифрами) остаётся «краешек», выглядывающий
   из-за правого края: видно, что дальше есть ещё, без специальных
   расчётов ширины. */
@media (max-width: 480px) {
  .specs--compare thead th:first-child,
  .specs--compare tbody th { min-width: 132px; max-width: 148px; }
  .specs--compare td { min-width: 148px; }
}

/* Обёртка для «краешка»-подсказки (см. .specs-scroll__hint) — сама не
   скроллится, поэтому стрелка держится у правого края таблицы, а не
   уезжает вместе с содержимым. */
.specs-scroll { position: relative; }

/* Промпт №63: явный фейд-подсказка справа — псевдоэлемент поверх таблицы
   (не часть скроллящегося контента, поэтому не уезжает вбок), тёмный,
   под цвет карточки (--surface), не белый. Пропадает, когда докрутили
   до конца (.is-end — ставит specs-scroll.js) или когда прокрутка вообще
   не нужна (весь ряд помещается на экране — тот же класс с самого начала). */
.specs-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(90deg, transparent, var(--surface) 82%);
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s var(--ease);
  z-index: 2;
}
.specs-scroll.is-end::after { opacity: 0; }

.specs-scroll__hint {
  display: none;
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 3;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-soft);
  pointer-events: none;
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity .3s var(--ease);
}
.specs-scroll.is-scrolled .specs-scroll__hint { opacity: 0; }
@media (max-width: 767px) {
  .specs-scroll__hint { display: flex; }
}

/* Расчёт мощности — переход к калькулятору на главной */
.product-calc { text-align: center; }
.product-calc__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--accent);
  font-size: var(--fs-lead);
  font-weight: 500;
  text-decoration: none;
}
.product-calc__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Доставка и монтаж — простые списки */
.delivery-list, .install-steps { display: grid; gap: 8px; }
.delivery-list li, .install-steps li {
  position: relative;
  padding-left: 22px;
  color: var(--text-muted);
}
.install-steps { counter-reset: step; margin-bottom: var(--s-4); }
.install-steps li { counter-increment: step; }
.install-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 12px;
  color: var(--accent);
}
.delivery-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Соседние мощности */
.neighbour-card {
  display: grid;
  gap: 6px;
  text-decoration: none;
  color: var(--text);
}
.neighbour-card__photo { aspect-ratio: 3 / 2; border-radius: var(--radius); }
.neighbour-card__photo--empty { background: var(--surface); border: 1px dashed var(--hairline-2); }
.neighbour-card__power {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.neighbour-card__objects { font-size: var(--fs-eyebrow); color: var(--text-muted); }
.neighbour-card__price { font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .neighbour-card:hover .neighbour-card__power { color: var(--accent-2); }
}

/* Вопросы */
.faq-list { display: grid; gap: var(--s-1); }
.faq-item {
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.faq-item__q {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after { content: "+"; margin-left: auto; color: var(--accent); }
.faq-item[open] .faq-item__q::after { content: "−"; }
.faq-item__a { margin-top: var(--s-1); color: var(--text-muted); font-size: var(--fs-small); }

/* Три исполнения: переключатель на главной.
   Свой контейнер той же ширины, что у остальных секций, но с 1320px —
   без вложенного .container--narrow, из-за которого блок был вдвое уже. */
#ispolneniya .container {
  max-width: 1320px;
  padding-inline: 24px;
}
@media (max-width: 700px) {
  #ispolneniya .container { padding-inline: 16px; }
}
.ispolneniya__tabs {
  display: flex;
  gap: var(--s-1);
  margin-top: var(--s-4);
}
.ispolneniya__tab {
  flex: 1 1 0;
  height: 48px;
  padding: 0 var(--s-2);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.ispolneniya__tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
@media (max-width: 560px) {
  .ispolneniya__tabs { flex-direction: column; }
  .ispolneniya__tab { width: 100%; }
}

.ispolneniya__card {
  width: 100%;
  margin-top: var(--s-3);
  /* Раньше была своя сплошная подложка (var(--surface)) — фото стояло
     вплотную к её краю без отступа, поэтому растворение фото упиралось
     в такую же ровную плашку и всё равно читалось прямой границей.
     Подложку убрали: карточка сидит прямо на фоне секции, и градиент
     у фото (.ph--fade ниже) гаснет уже в настоящий фон страницы. */
  background: transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ispolneniya__panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.ispolneniya__panel[hidden] { display: none; }
@media (min-width: 901px) {
  .ispolneniya__panel {
    /* 1.2fr:1fr при контейнере 1320/паддингах 24/gap 40 давал 672px (< 720px
       из проверки). 3fr:2fr держит те же контейнер/паддинги/gap и даёт
       ~739px на 1440px-окне, с запасом выше порога. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 40px;
    align-items: stretch;
  }
}
/* Фото искажать/растягивать нельзя (колёса на шасси станут овальными) —
   .ispolneniya__photo держит родные пропорции (object-fit:contain).
   Пустоту под фото закрывает не картинка, а контент: мини-таблица
   характеристик, бейджи и CTA — вместе они и выравнивают колонку с текстом.
   .ispolneniya__media — flex-колонка на всю высоту строки грида,
   CTA внизу через margin-top:auto добирает остаток, если он есть. */
.ispolneniya__media {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
@media (min-width: 901px) {
  .ispolneniya__media { height: 100%; }
}

.ispolneniya__photo.ph { background: transparent; }
.ispolneniya__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

.ispolneniya__specs {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-3);
}
.ispolneniya__specs-title {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--s-1);
}
.ispolneniya__specs .specs-group__table { font-size: var(--fs-small); }
.ispolneniya__specs .specs-group__row:last-child { border-bottom: none; }

.ispolneniya__badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-1);
}
@media (min-width: 560px) {
  .ispolneniya__badges { grid-template-columns: repeat(4, 1fr); }
}
.ispolneniya__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
}
.ispolneniya__badge-icon { flex: none; color: var(--accent); }

.ispolneniya__minicta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.ispolneniya__minicta p { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }

.ispolneniya__body { padding: var(--s-4) var(--s-3); }
.ispolneniya__heading { font-size: var(--fs-h3); margin-bottom: var(--s-1); }
.ispolneniya__text { color: var(--text-muted); max-width: 46ch; }
.ispolneniya__sub {
  margin-top: var(--s-3);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--text);
}
.ispolneniya__list {
  margin-top: var(--s-1);
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-small);
  padding-left: 1.1em;
}
.ispolneniya__list li { list-style: disc; }
.ispolneniya__note {
  margin-top: var(--s-3);
  font-size: 13px;
  color: var(--text-muted);
}

.ispolneniya__foot {
  margin-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-size: 14px;
  color: var(--text-muted);
}

/* Решения по типу объекта: категории-табы + карточка типового решения.
   Фото — постановочные визуализации, не фотоотчёты (см. projects.json). */
.projects__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-4);
}
.projects__tab {
  height: 44px;
  padding: 0 var(--s-2);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-text);
  font-size: 14px;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.projects__tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.projects__card {
  margin-top: var(--s-3);
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.projects__panel {
  display: grid;
  grid-template-columns: 1fr;
}
.projects__panel[hidden] { display: none; }
@media (min-width: 901px) {
  .projects__panel { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; }
}

/* width:100% обязателен явно: без него grid-item с align-items:stretch
   считает ширину из растянутой по строке высоты через aspect-ratio —
   получается шире своей колонки и наезжает на текст справа. */
.projects__photo { width: 100%; aspect-ratio: 3 / 2; }
.projects__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Серая заглушка вместо фото — пока объекта нет, ready:false в projects.json */
.projects__photo--placeholder {
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 12px, var(--bg) 12px 24px);
}

.projects__body {
  padding: var(--s-4) var(--s-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.projects__label {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent-2);
  margin-bottom: var(--s-1);
}
.projects__heading { font-size: var(--fs-h3); margin-bottom: var(--s-1); }
.projects__params {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--accent);
  margin-bottom: var(--s-2);
}
.projects__sub { margin-top: var(--s-2); font-family: var(--font-head); font-weight: 700; font-size: var(--fs-small); color: var(--text); }
.projects__text { color: var(--text-muted); }
.projects__body .btn { margin-top: var(--s-3); align-self: flex-start; }
.projects__soon {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}

/* Доставка и разгрузка — отдельная врезка под карточкой, общая для всех
   категорий, не переключается табами. */
.projects__dostavka {
  margin-top: var(--s-3);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
@media (min-width: 640px) {
  .projects__dostavka { grid-template-columns: 220px 1fr; align-items: center; }
}
.projects__dostavka-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
}
.projects__dostavka-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.projects__dostavka-title { font-size: var(--fs-body); margin-bottom: 6px; }

/* Мини-галерея контейнерного исполнения: сетка 2:1 — большое фото сверху
   на всю ширину, под ним две поменьше по 50%. Статичная, без клика —
   выбрал вариант попроще и понадёжнее вместо лайтбокса на трёх кадрах. */
.ispolneniya__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}
.ispolneniya__gallery-item {
  display: block;
  margin: 0;
}
.ispolneniya__gallery-item--big { grid-column: 1 / -1; }
.ispolneniya__gallery-item picture {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}
.ispolneniya__gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ispolneniya__gallery-caption {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-eyebrow);
  color: var(--text-muted);
}
.ispolneniya__gallery-note {
  margin-top: var(--s-2);
  font-size: 13px;
  color: var(--text-muted);
}

/* fix: hidden cards must stay hidden - display:flex on .cards__item overrode the hidden attribute */
.cards__item[hidden],
.grid-cards--catalog > .cards__item[hidden] { display: none !important; }

/* =========================================================================
   Виджет «Мелания» (виртуальный помощник) — всплывающий чат в правом нижнем углу.
   Иконка сидит всегда (в правом нижнем углу, над нижней панелью
   на телефоне), окно раскрывается по клику или само через 25 сек
   (assets/js/widget-alina.js). Модального затемнения нет — страница
   остаётся кликабельной и со скроллом при открытом чате.
   ========================================================================= */

.alina { position: relative; z-index: 55; }

/* Тот же приём, что у .bottombar выше (Промпт №60): жёсткий inset вместо
   отдельных top/right/bottom/left, никакого backdrop-filter (его тут и не
   было — фон уже сплошной, --accent), чтобы виджет не «гулял» вместе с
   панелью на iOS Safari. Кнопка не на самом краю, а выше .bottombar —
   поэтому bottom не 0, а высота панели + отступ. */
.alina__launcher {
  position: fixed;
  inset: auto max(16px, env(safe-area-inset-right)) calc(64px + max(16px, env(safe-area-inset-bottom))) auto;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow);
  /* Промпт №63: тот же приём, что у .bottombar — собственный composited-слой
     против «отставания» fixed-элемента на iOS Safari. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  cursor: pointer;
}
@media (hover: hover) {
  .alina__launcher:hover { background: var(--accent-2); }
}
@media (min-width: 768px) {
  .alina__launcher { bottom: max(24px, env(safe-area-inset-bottom)); }
}

.alina__avatar {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
}
.alina__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alina__avatar--head {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent);
}

.alina__dot {
  position: absolute;
  top: 2px; right: 2px;
  width: 14px; height: 14px;
  background: #3ddc73;
  border: 2px solid var(--bg);
  border-radius: 50%;
}
.alina__dot--inline {
  position: static;
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 5px;
  border: 0;
  vertical-align: middle;
}

/* окно чата */
.alina__panel {
  position: fixed;
  inset: auto max(16px, env(safe-area-inset-right)) calc(128px + max(16px, env(safe-area-inset-bottom))) auto;
  z-index: 55;
  width: min(360px, calc(100vw - 32px));
  max-height: min(520px, calc(100dvh - 160px));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: alinaIn .28s var(--ease);
}
.alina__panel[hidden] { display: none; }

@keyframes alinaIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.alina__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
}
.alina__who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.alina__name { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.alina__onlinetext { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; }

.alina__close {
  flex: none;
  width: 44px; height: 44px;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-btn);
  cursor: pointer;
}
.alina__close:hover { color: var(--text); background: var(--surface); }

.alina__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.alina__msg { max-width: 85%; }
.alina__msg-name { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.alina__bubble {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
  padding: var(--s-2);
  font-size: var(--fs-small);
  line-height: var(--lh-text);
  color: var(--text);
  white-space: pre-wrap;
}

/* Реплика пользователя — справа, акцентный фон (живой чат, ПРОМПТ №48) */
.alina__msg--user { align-self: flex-end; text-align: right; }
.alina__msg--user .alina__msg-name { text-align: right; }
.alina__msg--user .alina__bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: #14100a;
  border-radius: var(--radius) var(--radius) 4px var(--radius);
}

/* «Мелания печатает…» — три точки, пока ждём ответ GigaChat */
.alina__typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 2px;
}
.alina__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: alinaTypingDot 1.2s infinite ease-in-out;
}
.alina__typing span:nth-child(2) { animation-delay: .2s; }
.alina__typing span:nth-child(3) { animation-delay: .4s; }
@keyframes alinaTypingDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.alina__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.alina__chip {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  cursor: pointer;
}
.alina__chip:hover { border-color: var(--accent); color: var(--accent-2); }

.alina__form {
  flex: none;
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--s-2);
}
.alina__inputrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.alina__input-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.alina__input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--s-2);
  font-size: var(--fs-small);
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-btn);
}
.alina__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.alina__inputrow.is-error .alina__input { border-color: #e0554f; }
.alina__inputrow .field__error { flex-basis: 100%; color: #e0554f; font-size: 12px; margin: 0; }

.alina__submit {
  flex: none;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: #14100a;
  background: var(--accent);
  border: 0;
  border-radius: var(--r-btn);
  cursor: pointer;
}
.alina__submit:hover { background: var(--accent-2); }

.alina__contact-note { font-size: 12px; color: var(--text-muted); margin: 0; }

/* Кнопка-переключатель под строкой ввода — открывает форму телефона */
.alina__contact-toggle {
  align-self: flex-start;
  padding: 2px 0;
  font-size: 12px;
  color: var(--text-muted);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.alina__contact-toggle:hover { color: var(--accent-2); }

/* Форма «оставить телефон» — появляется по кнопке выше, отдельная от
   строки ввода сообщения (ту ведёт GigaChat, эту — forms.js, как раньше) */
.alina__leadform {
  flex: none;
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--s-2);
}
.alina__leadform[hidden] { display: none; }

/* мобильные экраны: окно на всю ширину, не перекрывает нижнюю панель сайта */
@media (max-width: 767px) {
  .alina__panel {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: calc(64px + 8px + env(safe-area-inset-bottom));
    max-height: min(70dvh, 560px);
  }
}

/* Короткая заметная оговорка про доплаты — сразу под «Входит в цену»,
   в блоке цены на первом экране. Не оранжевая: акцент должен остаться
   у кнопки «Получить расчёт под объект», не у этой строки. */
.product-hero__extra-note {
  margin-top: var(--s-2);
  padding: 10px var(--s-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
  color: var(--text-muted);
}

/* Ловушка для ботов (honeypot) — обычное поле формы, спрятанное за
   пределами экрана. От людей скрыто визуально и из доступности,
   боты, заполняющие все поля подряд, его не отличают от настоящего. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Иллюстрация на странице исполнения (кожух/АВР/контейнер) */
/* Фото на странице исполнения (кожух/АВР/контейнер) — оформлено как .card
   (тот же радиус и тень) и растворяется по краям в фоне страницы тем же
   приёмом, что и .ph::after выше: снизу и по бокам — мягкий переход в var(--bg),
   чтобы светлый кадр не читался чужеродной плашкой на тёмной странице. */
.enclosure-figure {
  position: relative;
  overflow: hidden;
  margin: var(--s-4) 0;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}
.enclosure-figure img { display: block; width: 100%; height: auto; }
.enclosure-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 72%, var(--bg) 100%),
    linear-gradient(to right, rgba(10, 13, 16, .3) 0%, transparent 14%, transparent 86%, rgba(10, 13, 16, .3) 100%);
  pointer-events: none;
}

/* =========================================================================
   Раздел «Мировые лидеры» (ПРОМПТ №59) — бренды дизель-генераторов.
   Сетка — .grid-cards--wide (уже есть, 4 колонки на десктопе, 1 на телефоне),
   карточка — тот же .card/.card-media, что у каталога: градиент под название
   уже даёт .card-media::after, отдельного затемнения на фото не добавляем.
   ========================================================================= */

.card--brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.card--brand .card-media { aspect-ratio: 4 / 3; }
.card__body--brand { gap: var(--s-1); }
.card__text--power {
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Первый экран страницы бренда: фото и текст — раздельные панели (тот же
   приём, что у «Складской программы», sklad.html/.yardshot), а не наложение. */
.brandhero {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.brandhero__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.brandhero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brandhero__body {
  padding: clamp(24px, 6vw, 40px);
}
@media (min-width: 900px) {
  .brandhero { flex-direction: row; align-items: stretch; }
  .brandhero__photo { flex: 1 1 50%; aspect-ratio: auto; }
  .brandhero__body {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 4vw, 64px);
  }
}

/* Блок фактов о бренде: год / страна / двигатели / мощность */
.brandfacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--s-3);
}
.brandfacts__item {
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.brandfacts__label {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}
.brandfacts__value {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
}

/* =========================================================================
   Галерея «Производство и склад» (ПРОМПТ №66) — карточки фото по 7 разделам.
   ========================================================================= */

.pgal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--gap);
}
.pgal__item { display: flex; }
.pgal__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
  cursor: zoom-in;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
@media (hover: hover) {
  .pgal__link:hover { transform: translateY(-2px); background: var(--surface-2); }
  .pgal__link:hover .pgal__img { transform: scale(1.04); }
  .pgal__link:hover .pgal__zoom { opacity: 1; }
}
.pgal__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.pgal__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
/* затемнение только нижней части карточки под подпись — сам файл фото
   не трогаем, подпись и бейдж лежат уже на этом слое */
.pgal__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(to top, rgba(10, 13, 16, .88), rgba(10, 13, 16, 0));
  pointer-events: none;
}
.pgal__zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 13, 16, .6);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  opacity: .7;
  transition: opacity .25s var(--ease);
}
.pgal__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(10, 13, 16, .72);
  border: 1px solid var(--hairline-2);
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: .02em;
}
.pgal__caption {
  position: absolute;
  inset: auto 12px 10px 12px;
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.3;
}

/* =========================================================================
   Лайтбокс — увеличение фото по клику, без перехода на отдельный URL.
   ========================================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(7, 9, 11, .92);
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.lightbox__img { display: block; max-width: 100%; max-height: 78vh; border-radius: var(--radius); object-fit: contain; }
.lightbox__caption { color: var(--text-muted); font-size: var(--fs-small); text-align: center; max-width: 70ch; }
.lightbox__close,
.lightbox__nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(16, 21, 26, .8);
  border: 1px solid var(--hairline-2);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close { top: clamp(12px, 3vw, 24px); right: clamp(12px, 3vw, 24px); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: clamp(8px, 2vw, 24px); }
.lightbox__nav--next { right: clamp(8px, 2vw, 24px); }
.lightbox__nav[hidden] { display: none; }
@media (hover: hover) {
  .lightbox__close:hover,
  .lightbox__nav:hover { background: var(--surface-2); }
}