/* ==========================================================================
   Шапка сайта (.header), разметка — template-parts/site-header.php.
   Mobile-first: база 375, затем min-width 1440 / 1820.

   Проверено по макету (инстанс Header на брейкпоинте 1024): на планшете
   строки пилюль ещё нет — там тот же drawer/гамбургер, что и на мобильном,
   просто с более широкой панелью. Строка пилюль с ховер-дропдаунами
   начинается только с 1440 (Laptop) — это подтверждено отдельными
   «Верхнее меню / ... / 1440 Laptop» фреймами в Figma.
   ========================================================================== */

/* Сценарий 2 (внутренние страницы): шапка сразу залита фоном и липнет к верху. */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-grey);
  transition: background-color var(--transition);
}

/* Сценарий 1 (главная): прозрачная шапка поверх hero, при скролле заливается
   фоном и переключается на «тёмный» вид. Класс .is-scrolled вешает menu.js.
   Тот же «раскрытый» вид принудительно включает .is-menu-open — пока открыто
   мобильное/планшетное меню, независимо от позиции скролла (аннотация Figma
   «Хедер в раскрытом виде по дефолту»). Это отдельный класс, потому что
   .is-scrolled принадлежит слушателю скролла и был бы им тут же снят. */
.header--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
}

.header--overlay.is-scrolled,
.header--overlay.is-menu-open {
  background-color: var(--color-grey);
}

/* Демо-модификатор (ui-kit): шапка остаётся в потоке страницы как образец. */
.header--static {
  position: relative;
}

/* Отступы шапки в макете фиксированные 20px на всех брейкпоинтах —
   не совпадают с --container-pad, поэтому перебиваем .container.
   z-index выше drawer/мега-панели (.header__nav — var(--z-menu)): сама шапка
   (лого, CTA, гамбургер) должна оставаться видимой и кликабельной поверх
   открытой панели, а не перекрываться ею — панели в макете начинаются
   ниже шапки (top: 84px), не поверх неё. */
.header__inner {
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  padding-inline: 20px;
}

/* --- Логотип --------------------------------------------------------------*/
/* z-index по той же причине, что и у .header__actions (см. комментарий там):
   drawer .header__nav — сосед логотипа внутри .header__inner и с z-index
   var(--z-menu) перекрывал бы его собой. */
.header__logo {
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.header__logo-img {
  width: auto;
  height: 30px;
}

.header__logo-img--light { display: none; }

/* Белый логотип — только пока шапка прозрачная (до скролла). */
.header--overlay:not(.is-scrolled):not(.is-menu-open) .header__logo-img--dark { display: none; }
.header--overlay:not(.is-scrolled):not(.is-menu-open) .header__logo-img--light { display: block; }

/* --- Кнопка-переключатель меню (сетка) ------------------------------------*/
.header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
  border-radius: var(--radius-control);
  color: var(--color-black);
  transition: background-color var(--transition);
}

.header--overlay:not(.is-scrolled):not(.is-menu-open) .header__toggle {
  background-color: var(--color-white-bg-opacity);
  color: var(--color-white);
}

/* Иконка переключается внутри той же кнопки (не отдельный крестик где-то
   ещё) — сетка по умолчанию, крестик когда меню открыто (aria-expanded
   ставит menu.js). Так и в макете: один и тот же «Icon menu Tablet» на
   разных состояниях показывает ep:menu либо tabler:cross. */
.header__toggle-icon { width: 24px; height: 24px; }
.header__toggle-icon--close { display: none; }
.header__toggle[aria-expanded="true"] .header__toggle-icon--menu { display: none; }
.header__toggle[aria-expanded="true"] .header__toggle-icon--close { display: block; }

/* z-index обязателен именно здесь: .header__nav (drawer/панель) — сосед
   .header__actions внутри одного стекинг-контекста (.header__inner создаёт
   свой собственный), и z-index на .header__inner сравнивает его только с
   ВНЕШНИМИ элементами (.header__backdrop), а не с .header__nav — тот как раз
   и перекрывал CTA/гамбургер, потому что его z-index (var(--z-menu)) больше,
   чем auto-шный z-index у .header__actions. */
.header__actions {
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

/* --- CTA-кнопка (Онлайн-подбор) в шапке ------------------------------------
   Ниже 1024 скрыта, появляется с 1024 — уже на планшете рядом с гамбургером
   (см. инстанс Header/1024 в макете). Строка пилюль появляется позже, с 1440
   (см. общий комментарий вверху файла). Стилизуется здесь, чтобы шапка
   была самодостаточной. */
.header__cta {
  display: none;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: 20px;
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--color-white);
  white-space: nowrap;
  background-color: var(--color-orange);
  border-radius: var(--radius-control);
  transition: background-color var(--transition);
}

.header__cta:hover { background-color: var(--accent-hover); }

/* --- Навигация как выезжающая панель (drawer) ниже 1024 --------------------
   На всю ширину (в макете панель занимает весь экран, а не узкую боковую
   плашку) — сама шапка при открытом меню форсированно залита фоном
   (header.classList.add('is-menu-open') в menu.js), поэтому контент панели
   просто начинается ниже неё (padding-top), не перекрывая её собой.

   Боковых отступов у самой панели НЕТ: в макете (Подменю / 375) секции идут
   встык к краям экрана и каждая держит свои 20px внутри — лента табов, колонки
   меню и серая плашка. Общий padding-inline здесь давал бы двойной отступ 40px,
   а серая плашка переставала бы быть на всю ширину.

   Начинается панель СТРОГО под шапкой (top: 84px), а не inset:0 с отступом
   сверху: иначе её белый фон закрывал бы серую полосу шапки (#EEEFF1 в
   макете «Header / 375 / Opened»), которая рисуется ниже по стеку. */
.header__nav {
  position: fixed;
  top: 84px;           /* высота шапки: 20 + 44 (кнопка) + 20 */
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-white-bg);
  transform: translateX(100%);
  transition: transform var(--transition);
}

.header__nav.is-open { transform: translateX(0); }

.header__menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  font-size: var(--fs-s);
  color: var(--color-black);
  text-align: left;
  border-radius: var(--radius-control);
  transition: background-color var(--transition), color var(--transition);
}

.header__link:hover { background-color: var(--color-light-grey); }

.header__link--catalog { font-weight: 700; }

.header__link-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
}

/* Шеврон у «О компании» / «Сервис» — крутится при открытой панели. */
.header__link-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: auto;
  transition: transform var(--transition);
}

.header__item.is-open .header__link-chevron { transform: rotate(180deg); }

/* --- Затемнение под панелью -----------------------------------------------
   Только с 1024, где панель плавающая («Затемнение» в макете 54:4543).
   На мобильном его быть не должно: drawer и так непрозрачный и занимает весь
   экран, а сам backdrop — потомок .header и рисуется ПОВЕРХ её собственного
   фона (фон элемента идёт ниже всех позиционированных детей). Из-за этого
   серая полоса шапки притемнялась, а лежащие выше по стеку логотип и кнопка
   (z-index --z-menu + 1) — нет. */
.header__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-header);
  visibility: hidden;
  opacity: 0;
  background-color: rgba(15, 15, 15, 0.24);
  transition: opacity var(--transition), visibility var(--transition);
}

.header__backdrop.is-open {
  visibility: visible;
  opacity: 1;
}

/* ==========================================================================
   Выпадающие панели («О компании» / «Сервис») и мега-меню каталога.
   Ниже 1024 — разворачиваются по месту (аккордеон внутри drawer);
   с 1024 — плавающие карточки под пилюлей (JS переключает .is-open).
   ========================================================================== */
.header__panel { display: none; }
.header__item.is-open > .header__panel { display: block; }

/* Ниже 1440 у каталога нет отдельной пилюли — в шапке в макете виден только
   гамбургер (проверено по инстансам Header/1024 и Header/375), а каталог
   (табы + колонки) показывается сразу, как только открылось меню, без
   дополнительного клика. Остальные пункты меню (О компании/Объекты/Сервис/
   Контакты/Наш бренд Gradera) на этой ширине тоже не отдельные пилюли —
   на мобильном они в .header__mega-nav, на планшете — в сетке 2×2
   .header__mega-secondary (обе — внутри каталога). Выше 1440 всё возвращается
   к обычным пилюлям (см. блок @media (min-width: 1025px)). */
.header__item:not(.header__item--catalog) { display: none; }
.header__item--catalog > .header__link { display: none; }
.header__nav.is-open .header__panel--mega { display: block; }

/* Простой список ссылок (О компании / Сервис). Видимая карточка — вложенный
   .header__panel-card: сама панель (.header__panel--simple) с 1024 становится
   прозрачным «мостиком» без зазора в хитбоксе (см. блок ниже) — иначе курсор,
   двигаясь от пилюли к панели, на мгновение попадает в пустую зону и mouseleave
   срабатывает раньше, чем наведение доходит до дропдауна. */
.header__panel--simple { margin-top: 4px; }

.header__panel-card {
  padding: 8px;
  background-color: var(--color-light-grey);
  border-radius: var(--radius-md);
}

.header__panel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header__panel-link {
  display: block;
  padding: 10px 12px;
  font-size: var(--fs-s);
  color: var(--text-muted);
  border-radius: var(--radius-control);
  transition: background-color var(--transition), color var(--transition);
}

.header__panel-link:hover {
  color: var(--color-black);
  background-color: var(--color-white);
}

/* --- Мега-меню каталога ----------------------------------------------------
   Ниже 1024: категории — горизонтальная прокручиваемая лента (табы-фильтр),
   колонки — сразу под ней (первая всегда открыта, остальные — аккордеон).
   Каталог тут не за отдельным тогглом: панель показывается сразу при
   открытии гамбургер-меню (см. .header__nav.is-open .header__panel--mega
   ниже) — «Насосные станции» в макете вообще не отдельная пилюля на этой
   ширине. С 1024: два столбца — список категорий слева, колонки активной
   категории справа (Figma). */
.header__mega {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Лента табов-фильтров: по макету скроллится слева направо, полосу прокрутки
   при этом не показываем — она перекрывала бы нижний край пилюль. */
.header__mega-categories {
  display: flex;
  gap: 4px;
  padding: 12px 20px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.header__mega-categories::-webkit-scrollbar { display: none; }

.header__mega-category {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 44px;
  overflow: hidden;
  background-color: var(--color-grey);
  border-radius: 10px;
  color: var(--color-dark-blue);
  transition: background-color var(--transition), color var(--transition);
}

.header__mega-category.is-active {
  background-color: var(--color-orange);
  color: var(--color-white);
}

.header__mega-category-img {
  display: flex;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 2px;
}

.header__mega-category-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
}

/* 160 = 140 (ширина текстового блока в макете) + 8 слева + 12 справа:
   box-sizing у нас border-box, поэтому паддинги входят в width.
   Вертикальных паддингов нет намеренно: высоту задаёт сама пилюля (44px),
   а текст в две строки центрируется в ней — с padding-block:16px вторая
   строка вылезала за пределы и обрезалась overflow:hidden. */
.header__mega-category-title {
  display: flex;
  align-items: center;
  width: 160px;
  padding-inline: 8px 12px;
  font-size: var(--fs-3xs);
  font-weight: 700;
  line-height: normal;
}

/* Сетка 2×2 «Объекты/О компании/Контакты/Сервис» внутри каталога — существует
   только на планшете (1024–1439), см. общий блок для этого диапазона ниже.
   На остальных брейкпоинтах у этих пунктов свои отдельные пилюли/панели. */
.header__mega-secondary { display: none; }

.header__mega-category--plain {
  justify-content: flex-start;
  color: var(--color-black);
}

.header__mega-category-arrow {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: auto 16px auto 0;
  transform: rotate(90deg);
}

.header__mega-promo { flex: 0 0 auto; }

/* Копия внутри .header__mega-categories: в макете на мобильном промо живёт
   не здесь, а в .header__mega-nav (см. ниже) — эта копия появляется только
   с 1024 (там своего .header__mega-nav уже нет, промо снова в категориях). */
.header__mega-promo--categories { display: none; }

/* Эта копия — ссылка целиком (href на страницу бренда): ховер карточки
   подсвечивает её кнопку «Подробнее». */
a.header__mega-promo { color: inherit; text-decoration: none; }
a.header__mega-promo:hover .btn--stroke { border-bottom-color: currentColor; }
a.header__mega-promo:active .btn--stroke { color: var(--accent-hover); border-bottom-color: currentColor; }

/* Промо-карточка GRADERA — компонент .promo (ui-kit.css) с модификатором,
   у которого (в отличие от .promo--gradera в подвале) фон-фото видно
   на всех брейкпоинтах, включая мобильный.

   В меню это уменьшенный инстанс «Промо в хедер»: отступы 20/16, заголовок и
   подпись 16px в колонку шириной 176, кнопка прижата к низу, высота 173.
   Одинаково и на 375 («Подменю / 375»), и на 1024 («Подменю / Главный экран»,
   там карточка 408×173) — поэтому правила действуют до 1439 включительно.
   С 1440 промо остаётся крупным, как в ui-kit. */
.promo--menu {
  position: relative;
  min-height: 173px;
  background-color: #000100;
}

@media (max-width: 1439px) {
  .promo--menu { padding: 16px 20px; }

  .promo--menu .promo__content {
    flex: 1 1 auto;
    gap: 8px;
    padding: 0;
  }

  .promo--menu .promo__title {
    font-size: var(--fs-xs);
    line-height: normal;
    text-transform: none;
  }

  .promo--menu .promo__text {
    max-width: 176px;
    font-size: var(--fs-xs);
    line-height: normal;
    color: var(--color-light-grey);
  }

  /* Кнопка прижата к низу карточки — margin-top:8px из ui-kit тут не нужен. */
  .promo--menu .btn--stroke { margin-top: auto; }
}

.promo--menu::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, #000100 0%, #000100 25%, rgba(0, 1, 0, 0.5) 55%, rgba(0, 1, 0, 0.1) 85%),
    var(--img-promo-gradera) right center / cover no-repeat;
}

.header__mega-columns { display: flex; flex-direction: column; padding-bottom: 8px; }

/* Колонки идут встык: вертикальные отступы держит сам .header__mega-column
   (20 сверху / 22 снизу), дополнительного gap в макете нет. */
.header__mega-columnset {
  display: none;
  flex-direction: column;
  gap: 0;
}

.header__mega-columnset.is-active { display: flex; }

.header__mega-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 20px 22px;
}

.header__mega-column-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: normal;
  color: var(--color-black);
  text-align: left;
  background: none;
}

.header__mega-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform var(--transition);
}

.header__mega-column-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.header__mega-column-links a {
  display: block;
  padding: 2px;   /* «Button Mobile» из макета — у пункта свой внутренний отступ */
  font-size: var(--fs-xs);
  line-height: normal;
  color: var(--text-muted);
  transition: color var(--transition);
}

.header__mega-column-links a:hover { color: var(--color-black); }

/* На мобильном «По отрасли» / «По бренду» свёрнуты по умолчанию (аккордеон);
   с 1024 разворачиваются полностью и шеврон не нужен (см. блок ниже). */
.header__mega-column--collapsible .header__mega-column-links { display: none; }
.header__mega-column--collapsible.is-open .header__mega-column-links { display: flex; }
.header__mega-column--collapsible.is-open .header__mega-chevron { transform: rotate(180deg); }

/* --- «О компании / Сервис / Контакты / Объекты» + промо — мобильный блок --
   Только ниже 1024 (см. .header__mega-secondary — планшетная сетка 2×2
   заменяет этот блок с 1024). Серая плашка с белыми карточками, «О компании»
   и «Сервис» разворачивают вложенный список, «Контакты»/«Объекты» — прямые
   ссылки, промо статично (последний элемент той же плашки). */
.header__mega-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
  background-color: var(--color-grey);
  border-radius: 10px;
}

/* Собственные 8px сверху/снизу у карточки — в макете текстовый блок внутри
   отбит от её краёв (12/14 + 8), поэтому свёрнутая карточка выше строки. */
.header__mega-nav-item {
  padding-block: 8px;
  background-color: var(--color-white-bg);
  border-radius: 10px;
  overflow: hidden;
}

.header__mega-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: normal;
  color: var(--color-dark-blue);
  text-align: left;
  background: none;
}

.header__mega-nav-item.is-open .header__mega-chevron { transform: rotate(180deg); }

.header__mega-nav-list {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 8px 20px 16px;
}

.header__mega-nav-item.is-open .header__mega-nav-list { display: flex; }

.header__mega-nav-list a {
  display: block;
  padding: 2px;
  font-size: var(--fs-xs);
  line-height: normal;
  color: var(--text-muted);
  transition: color var(--transition);
}

.header__mega-nav-list a:hover { color: var(--color-black); }

/* ==========================================================================
   С 1024: CTA появляется в самой шапке (рядом с гамбургером); мобильный блок
   .header__mega-nav больше не нужен — промо возвращается в .header__mega-categories
   (там уже есть сетка 2×2 на планшете / список категорий на десктопе).
   ========================================================================== */
@media (min-width: 768px) {
  .header__cta { display: inline-flex; }
  .header__mega-nav { display: none; }
  .header__mega-promo--categories { display: block; }
  .header__backdrop { display: block; }

  /* Заливка шапки на время открытого меню — только мобильная история: там
     drawer занимает весь экран и шапка становится его частью. С 1024 меню —
     плавающая панель над затемнённой страницей, и в макете (54:4543) шапка
     над ней остаётся прозрачной: белый логотип, оранжевый CTA и белый крестик
     поверх hero. Поэтому здесь действие .is-menu-open отменяем. */
  .header--overlay.is-menu-open:not(.is-scrolled) { background-color: transparent; }
  .header--overlay.is-menu-open:not(.is-scrolled) .header__logo-img--dark { display: none; }
  .header--overlay.is-menu-open:not(.is-scrolled) .header__logo-img--light { display: block; }
}

/* ==========================================================================
   Планшет 1024–1439: в шапке нет отдельных пилюль (проверено по инстансу
   Header — там только лого, CTA и гамбургер), весь навигационный контент
   объединён в одну широкую центрированную панель под шапкой (не боковой
   drawer): каталог станций + сетка 2×2 «Объекты/О компании/Контакты/Сервис»
   слева, колонки активного раздела справа (список, а не грид — как на
   мобильном; это не переопределяем, унаследовано от базовых стилей).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1439px) {
  .header__nav {
    inset: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: visible;
    background: none;
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
  }

  .header__nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .header__menu { height: 100%; }
  .header__item--catalog { position: relative; height: 100%; }

  /* Показ панели (display) — общее правило .header__nav.is-open
     .header__panel--mega выше; здесь только позиционирование под планшет. */
  /* Панель фиксированной высоты: в макете 984×658 при экране 768 (top 84,
     снизу остаётся 26) — отсюда 110px по вертикали. Скроллится не вся панель,
     а только колонки справа (см. .header__mega-columns). */
  .header__panel--mega {
    position: absolute;
    top: 84px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 40px);
    height: calc(100vh - 110px);
    padding-top: 0;
    overflow: hidden;
  }

  /* Тени у панели в макете нет — она лежит на затемнённой странице. */
  .header__mega {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    height: 100%;
    padding: 10px;
    background-color: var(--color-white-bg);
    border-radius: 10px;
  }

  .header__mega-categories {
    flex-direction: column;
    flex: 0 0 auto;
    width: 418px;
    gap: 5px;
    padding: 5px;
    overflow-y: auto;
    background-color: var(--color-grey);
    border-radius: 10px;
  }

  /* Здесь серая плашка — это сам контейнер списка, поэтому неактивные разделы
     в макете белые (#FEFEFE), а не серые как на мобильном (там наоборот:
     плашки лежат на белом фоне панели). */
  .header__mega-category {
    width: 100%;
    height: auto;
    background-color: var(--color-white-bg);
  }

  .header__mega-category.is-active { background-color: var(--color-orange); }

  .header__mega-category-img {
    width: 60px;
    height: 60px;
    padding: 5px;
  }

  .header__mega-category-title {
    width: auto;
    flex: 1 1 auto;
    padding: 16px 20px;
    font-size: var(--fs-xs);
  }

  .header__mega-category-arrow { margin-right: 20px; }

  /* Сетка 2×2 «Объекты/О компании/Контакты/Сервис» — только здесь. Без
     картинки, поэтому центрируем текст по высоте 60px вместо паддинга. */
  .header__mega-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .header__mega-secondary .header__mega-category {
    height: 60px;
    align-items: center;
  }

  .header__mega-secondary .header__mega-category-title {
    flex: 1 1 auto;
    padding: 0 20px;
  }

  .header__mega-columns {
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
    scrollbar-width: thin;             /* Firefox: тонкий скроллбар */
    scrollbar-color: #666 transparent;
  }

  /* Тонкий скруглённый скроллбар (Chromium/WebKit) — «Scroll bal» в макете */
  .header__mega-columns::-webkit-scrollbar { width: 16px; }
  .header__mega-columns::-webkit-scrollbar-track { background: transparent; }
  .header__mega-columns::-webkit-scrollbar-thumb {
    background-color: #666;
    border: 4px solid transparent;
    border-radius: var(--radius-full);
    background-clip: padding-box;
  }

  .header__mega-column-title {
    font-size: var(--fs-s);   /* 18 на 1024 */
    line-height: 22px;
  }

  .header__mega-column { padding: 20px 30px 30px; }

  .promo--menu { width: 100%; }

  /* «По отрасли» / «По бренду» тут разворачиваются сразу, без аккордеона —
     в макете (инстанс Header/1024) нет ни шевронов, ни кликабельного тоггла. */
  .header__mega-column--collapsible .header__mega-column-links { display: flex; }
  .header__mega-chevron { display: none; }
  .header__mega-column-title { pointer-events: none; }
}

/* ==========================================================================
   С 1440: меню — строка пилюль, выпадающие панели («О компании» / «Сервис»,
   мега-меню каталога) — плавающие карточки, открываются наведением (JS).
   ========================================================================== */
@media (min-width: 1025px) {
  .header__toggle,
  .header__backdrop { display: none; }

  .header__nav {
    position: static;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: auto;
    padding: 0;
    overflow: visible;
    background: none;
    transform: none;
  }

  .header__menu {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  /* Возврат к обычным пилюлям: ниже 1440 у каталога и остальных пунктов
     свои встроенные варианты внутри мега-панели (.header__mega-nav /
     .header__mega-secondary), сами пилюли/тоггл там скрыты (см. базовые
     стили) — с 1440 показываем их снова. */
  /* Тот же :not(), что и в базовом правиле — иначе специфичность :not()
     (выше, чем у голого .header__item) не даст этому сбросу победить. */
  .header__item:not(.header__item--catalog) { display: block; }
  .header__item { position: relative; }
  .header__item--catalog > .header__link { display: flex; }

  .header__link {
    width: auto;
    min-height: 44px;
    padding: 0 20px;
    font-size: var(--fs-xs);
    background-color: var(--color-white);
  }

  .header__link:hover { background-color: var(--color-light-grey); }

  .header--overlay:not(.is-scrolled) .header__link {
    color: var(--color-white);
    background-color: var(--color-white-bg-opacity);
  }

  .header--overlay:not(.is-scrolled) .header__link:hover {
    background-color: rgba(254, 254, 254, 0.35);
  }

  /* Пилюля с открытым (по наведению) дропдауном/мега-меню заливается
     оранжевым — как CTA, а не просто слегка темнее фоном. Так в макете:
     аннотации «на ховер появляется дропдаун/подменю» стоят именно на пилюлях
     с bg-[#f57c00] в раскрытом состоянии («О компании», «Насосные станции»),
     остальные пилюли остаются в дефолтном виде. */
  .header__item.is-open > .header__link,
  .header--overlay:not(.is-scrolled) .header__item.is-open > .header__link {
    background-color: var(--color-orange);
    color: var(--color-white);
  }

  /* Плавающие панели вместо разворота по месту. Сама панель (.header__panel--*)
     без зазора: top:100% вплотную к пилюле, а зазор до видимой карточки —
     padding-top на этом же (наводимом) элементе, чтобы хитбокс был непрерывным
     от пилюли до карточки (курсор не «выпадает» из наведённой области). */
  .header__panel--simple {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-menu);
    width: max-content;
    min-width: 240px;
    max-width: 320px;
    margin-top: 0;
    padding-top: 8px;
  }

  .header__panel-card {
    padding: 24px;
    background-color: var(--color-white-bg);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 48px rgba(15, 15, 15, 0.16);
  }

  .header__panel-list { gap: 20px; }
  .header__panel-link { padding: 2px; font-size: var(--fs-xs); }
  .header__panel-link:hover { background: none; }

  .header__panel--mega {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-menu);
    width: min(984px, calc(100vw - 2 * var(--container-pad)));
    padding-top: 8px;
  }

  .header__mega {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    margin-top: 0;
    padding: 10px;
    background-color: var(--color-white-bg);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 48px rgba(15, 15, 15, 0.16);
  }

  .header__mega-categories {
    flex-direction: column;
    flex: 0 0 auto;
    width: 298px;
    gap: 5px;
    padding: 5px;
    overflow: visible;
    background-color: var(--color-grey);
    border-radius: var(--radius-md);
  }

  .header__mega-category {
    align-items: stretch;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
  }

  .header__mega-category-img {
    width: 74px;
    height: 74px;
    padding: 5px;
  }

  .header__mega-category-title {
    display: flex;
    align-items: center;
    width: auto;
    flex: 1 1 auto;
    padding: 16px 20px;
    font-size: 16px;
  }

  /* Колонки ссылок — настоящая 2-колоночная сетка (Figma): при 3 группах
     (По типу / По отрасли / По бренду у «Насосных станций») третья группа
     автоматически уходит под первую (grid auto-flow), при 2 группах —
     обе встают в один ряд. Раньше здесь был flex-wrap, из-за которого
     одиночная группа на второй строке растягивалась на всю ширину —
     не совпадало с макетом. */
  .header__mega-columns {
    flex: 1 1 0;
    min-width: 0;
  }

  .header__mega-columnset {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;   /* здесь это уже настоящий межколоночный жёлоб сетки */
    padding: 20px 0;
    overflow-y: auto;
  }

  .header__mega-columnset.is-active { display: grid; }

  .header__mega-column {
    min-width: 0;
    padding: 20px 30px;
    gap: 16px;
  }

  /* 18/22 — тот же компонент «Menu column», что и на 1024 (макет 54:4543);
     отдельного макета 1440 под рукой не было, размер взят оттуда же. */
  .header__mega-column-title {
    font-size: 18px;
    line-height: 22px;
    pointer-events: none;
  }

  .header__mega-chevron { display: none; }

  /* На планшете/десктопе колонки не сворачиваются — показываем целиком */
  .header__mega-column--collapsible .header__mega-column-links { display: flex; }

  .promo--menu { width: 100%; min-height: 173px; }
}

/* ==========================================================================
   Десктоп ≥1820: увеличенные размеры (пилюли 56, логотип 56, текст 20,
   мега-меню — полноразмерная версия макета 1920)
   ========================================================================== */
@media (min-width: 1441px) {
  .header__logo-img { height: 56px; }

  .header__link {
    min-height: 56px;
    font-size: var(--fs-xs); /* на 1920 XS = 20px */
  }

  .header__cta {
    height: 56px;
    padding-inline: 24px;
    font-size: var(--fs-xs);
  }

  .header__link-icon { width: 18px; height: 18px; }

  .header__panel--mega { width: min(1294px, calc(100vw - 2 * var(--container-pad))); }

  .header__mega-categories { width: 391px; }

  .header__mega-category-img { width: 87px; height: 88px; }

  .header__mega-category-title { padding: 16px 20px; font-size: 20px; }

  .header__mega-column { padding: 20px 40px; gap: 20px; }

  .header__mega-column-title { font-size: 24px; }

  .header__mega-column-links a { font-size: 20px; }

  .promo--menu { min-height: 199px; }
}