.product-related {
  padding: 25px 0 60px;
  background: var(--color-solutions-bg);
  overflow: hidden;
}

/* Правки 2026-08-05, п.11.2: заголовок по центру. Пара кнопок в шапке
   на десктопе больше не показывается (стрелки уехали по бокам карточек,
   см. --side ниже), поэтому space-between тут центрировать уже нечему.
   В мобильном блоке внизу файла возвращается space-between/left — там
   шапка по-прежнему «заголовок + стрелки». */
.product-related__head {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: var(--content-width);
  margin: 0 auto 40px;
  padding: 0 var(--page-gutter);
}

.product-related__heading {
  --heading-gradient-angle: 130.86deg;
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

/* Пара кнопок в шапке осталась в DOM только ради мобильной раскладки: на
   390px гуттер трека всего 30px, кнопка 50px по бокам физически не
   помещается и налезала бы на карточку. На десктопе она скрыта, на
   мобильном включается обратно в блоке @media (max-width:599.98px) внизу
   файла. display:none убирает элемент и из дерева доступности, поэтому
   двух пар кнопок для скринридера одновременно не существует. */
.product-related__nav {
  display: none;
  flex-shrink: 0;
  gap: 10px;
}

/* «Назад» и «Вперёд» — одинаковые (правки 2026-08-05, п.6): обе белые с
   серой стрелкой и тенью, различаются только направлением стрелки. Раньше
   правая была акцентной красной с белой стрелкой (159:3989/3992 — два
   разных статичных SVG-ассета в макете); заказчик показал обе кнопки
   одинаковыми белыми, различие цветов ушло. Стиль общий со стрелками
   слайдера главной (.solutions-slider__nav) — те же токены. */
.product-related__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-slider-nav-arrow);
  box-shadow: var(--shadow-slider-nav);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Ховер: +10% от центра и стрелка краснеет за 0,2 с; тень не меняется. */
.product-related__nav-btn:hover {
  transform: scale(1.1);
  color: var(--color-accent);
}

/* Правки 2026-08-05, п.11.1: у боковых кнопок ховер обязан ПОВТОРИТЬ
   translateY(-50%), а не заменить его — иначе scale(1.1) из правила выше
   затирает центрирование и кнопка на наведении прыгает вниз на
   пол-высоты. Тот же приём, что у .solutions-slider__nav:hover. */
.product-related__nav-btn--side:hover {
  transform: translateY(-50%) scale(1.1);
}

.product-related__nav-btn .icon--chevron-arrow {
  width: 13px;
  height: 12px;
}

.product-related__nav-btn--next .icon--chevron-arrow {
  transform: scaleX(-1);
}

/* Правки 2026-08-05, п.11.1: стрелки — по бокам карточек, как у слайдера
   главной (.solutions-slider), а не в правом верхнем углу шапки.
   max-width обязателен: без него на ширинах >1700px кнопки считали бы
   свои left/right от всей секции и уехали бы за пределы контента.
   Вертикальный центр считается сам: у .product-related__viewport
   симметричные padding:65px 0 + margin:-65px auto, поэтому высота этой
   обёртки схлопывается ровно до высоты ряда карточек и top:50% попадает
   в их середину. Числа по горизонтали: у трека padding:0 75px, кнопка
   50px при left:12px занимает 12…62px — целиком в гуттере, до первой
   карточки остаётся 13px, наезда нет ни на одной ширине. */
.product-related__slider {
  position: relative;
  max-width: var(--bleed-width);
  margin: 0 auto;
}

.product-related__nav-btn--side {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.product-related__nav-btn--prev {
  left: 12px;
}

.product-related__nav-btn--next {
  right: 12px;
}

/* padding+отрицательный margin — запас под box-shadow карточек внутри
   overflow:hidden viewport (тот же приём, что у .solutions-slider__viewport). */
.product-related__viewport {
  width: 100%;
  max-width: var(--bleed-width);
  padding: 65px 0;
  margin: -65px auto;
  overflow: hidden;
}

/* Число 1700px = --bleed-width (var() нельзя в media query, тот же приём,
   что в product-samples.css). Фейд виден только когда viewport реально
   шире кэпа и по бокам трека есть настоящий зазор — на ноутбучных
   ширинах (<1700px) трек = 100% доступной ширины, обрезать нечего. */
@media (min-width: 1700px) {
  .product-related__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
    mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  }
}

.product-related__track {
  display: flex;
  gap: 10px;
  max-width: var(--bleed-width);
  margin: 0 auto;
  padding: 0 75px;
  list-style: none;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

.product-related__item {
  flex: 0 0 315px;
  width: 315px;
}

/* Правки 2026-08-05, п.12: красные плашки-характеристики у всех карточек
   карусели — на одном уровне. Было: плашка идёт в потоке сразу за
   заголовком и описанием, поэтому её высота следует за числом строк
   заголовка (1 строка «Оборудование 1» против 4 «Картонажные машины
   периодического действия» = 96px разницы) — плашки «плясали».
   Механизм: <li> трека и так растягиваются по самому высокому
   (align-items:stretch по умолчанию), height:100% заставляет карточку
   заполнить <li>, flex:1 отдаёт «голове» весь избыток, а margin-top:auto
   прижимает плашку к её низу. Уровень получается ровно по самой нижней
   плашке — той, что подвинул самый объёмный текст, — и пересчитывается
   сам при смене текстов в админке.
   min-height:264px десктопной .product-card__head здесь снимается
   намеренно: это число посчитано под каталожную сетку и добавило бы под
   выровненными плашками мёртвый зазор.
   На каталог не расширять: такая же плашка есть в сетке /catalog/, но
   та страница уже принята и заказчиком не упоминалась — поэтому скоуп
   на .product-related, а не глобально в product-card.css. */
.product-related .product-card {
  height: 100%;
}

.product-related .product-card__head {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
}

/* align-self обязателен: став flex-элементом колонки, плашка иначе
   растянется по ширине карточки (stretch по умолчанию) — а она должна
   хватать текст. Раньше эту роль играл display:inline-block, у flex-
   элемента он не работает. */
.product-related .product-card__badge {
  margin-top: auto;
  align-self: flex-start;
}

/*
  Мобильная адаптация (600px,
  база 390px). Мобильный Figma показывает стрелки навигации на самой
  странице — правило ниже идёт ПОСЛЕ базового в файле и переопределяет
  display:none у шапочной пары кнопок обратно на flex; боковая пара,
  наоборот, гасится здесь же (правило переехало сюда из @media
  (max-width:960px), снесённого в правках 2026-08-05, п.18, этап 2 —
  раньше «на узком десктопе стрелок нет» задевало и телефон). Карточка — 330px (не 315,
  своё мобильное число из
  Figma), initRelatedSlider (main.js) меряет реальную ширину карточки+gap
  через getBoundingClientRect на каждый шаг, а не хардкодит 315 — иначе
  резиновая мобильная ширина (formula min(330px, calc(330/390*100vw)))
  на экранах уже 390px сбивала бы позицию трека.
*/
@media (max-width: 599.98px) {
  /* padding-top 79, не 25: у карточки CTA выше есть свой нижний инсет 10px
     (.product-cta.cta-card{padding-bottom}), поэтому реальный зазор был
     10+25=35px против 89px на всех остальных стыках секций этой страницы
     (.product-dimensions/.product-samples padding-top:89). 79+10 = те же
     89px, ритм страницы восстановлен. */
  .product-related {
    padding: min(79px, calc(79 / 390 * 100vw)) 0 min(60px, calc(60 / 390 * 100vw));
  }

  /* justify-content/text-align возвращаются к исходным (правки
     2026-08-05, п.11.2): на мобильном шапка — это по-прежнему пара
     «заголовок слева + стрелки справа», центрирование десктопа сюда
     протекать не должно. */
  .product-related__head {
    justify-content: space-between;
    text-align: left;
    max-width: none;
    margin-bottom: min(30px, calc(30 / 390 * 100vw));
    padding: 0 min(30px, calc(30 / 390 * 100vw));
  }

  .product-related__heading {
    font-size: min(32px, calc(32 / 390 * 100vw));
    line-height: min(46px, calc(46 / 390 * 100vw));
    overflow-wrap: break-word;
  }

  .product-related__nav {
    display: flex;
    gap: min(10px, calc(10 / 390 * 100vw));
  }

  .product-related__nav-btn {
    width: min(50px, calc(50 / 390 * 100vw));
    height: min(50px, calc(50 / 390 * 100vw));
  }

  /* Боковая пара — только для ПК-раскладки: на 390px гуттер трека 30px,
     кнопка 50px по бокам налезала бы на карточку (см. комментарий у
     .product-related__nav вверху файла). Своего display у --side нет,
     он наследует flex от .product-related__nav-btn, поэтому гасим явно. */
  .product-related__nav-btn--side {
    display: none;
  }

  /* touch-action:pan-y — на том же элементе, на котором висит обработчик
     жеста (правки 2026-08-05, п.19.1: раньше стояло на треке, а слушатель
     всегда был на viewport). Браузеру явно разрешена только вертикальная
     жестовая прокрутка, горизонтальную обрабатывает JS. Важно именно
     здесь: у viewport сверху и снизу padding:65px, трека там нет, и
     горизонтальный жест, начатый в этих полосах, браузер раньше забирал
     себе и присылал pointercancel. Треку своё правило не нужно —
     эффективное значение считается пересечением со всеми предками. */
  .product-related__viewport {
    max-width: none;
    padding: min(65px, calc(65 / 390 * 100vw)) 0;
    margin: min(-65px, calc(-65 / 390 * 100vw)) auto;
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      black min(30px, calc(30 / 390 * 100vw)),
      black calc(100% - min(30px, calc(30 / 390 * 100vw))),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      black min(30px, calc(30 / 390 * 100vw)),
      black calc(100% - min(30px, calc(30 / 390 * 100vw))),
      transparent
    );
  }

  .product-related__track {
    max-width: none;
    gap: min(10px, calc(10 / 390 * 100vw));
    padding: 0 min(30px, calc(30 / 390 * 100vw));
  }

  .product-related__item {
    flex: 0 0 min(330px, calc(330 / 390 * 100vw));
    width: min(330px, calc(330 / 390 * 100vw));
  }

  /* Выравнивание карточек карусели по высоте (height:100% на карточке +
     flex:1 0 auto на «голове») переехало в базовую часть файла — см.
     .product-related .product-card / __head выше (правки 2026-08-05, п.12,
     там же и разбор про min-height:264px и скоуп на карусель). Здесь
     эти же две строки стояли дублем и удалены, чтобы не было двух
     источников правды. Базовое правило действует на всех ширинах,
     мобильное поведение не изменилось. */
}

/* Правки 2026-08-05, п.10 — причина та же, что у п.2 в
   solutions-slider.css, см. подробный разбор там. Коротко: трек едет
   исключительно CSS-переходом (.product-related__track выше), глобальное
   правило base.css под @media prefers-reduced-motion обнуляет
   длительность у всего на странице, и карточки начинают меняться
   мгновенно. Автопрокрутки здесь нет, движение запускает только сам
   пользователь, поэтому под reduce-motion не отключаем его совсем, а
   укорачиваем. */
@media (prefers-reduced-motion: reduce) {
  .product-related__track {
    transition-duration: 0.25s !important;
  }
}

/* Правки 2026-08-05, п.11.3: трек тянется за зажатой мышью. Пока идёт
   жест — курсор «хватает», выделение текста подавлено, иначе вместо
   перетаскивания тянется выделение по карточкам. Класс вешает/снимает
   main.js на время жеста. Селектор с потомками (0,2,0) нужен, чтобы
   перебить cursor:pointer у ссылок карточек. */
.product-related__track.is-dragging,
.product-related__track.is-dragging * {
  cursor: grabbing;
  user-select: none;
}