/* ==========================================================================
   ARM-GARANT — шапка

   Макет: `Header bottom section` — нода 1:831 (1920×136),
          `Header top section`    — нода 1:567 (1840×37).
   Все размеры сняты из макета, а не подобраны на глаз.
   Мобильных экранов в макете нет: правила ниже 1600 px приняты вёрсткой
   и ждут согласования (см. «Дыры макета» в _figma/00-INDEX.md).
   ========================================================================== */

.site-header {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-bg);
}

/* --- Верхняя панель: 1920×136 -------------------------------------------
   В макете панель во всю ширину окна, её содержимое — от края до края
   с полем 40 px, без ограничения контейнером. Высота 136 = 72 (логотип)
   + 32 сверху + 32 снизу. */

/* Обводка у фрейма Figma рисуется внутрь и в 136 px уже входит. Обычный
   border добавил бы 137-й пиксель и сдвинул всё, что ниже, поэтому линия
   рисуется тенью. */
.header-bar {
  box-shadow: inset 0 -1px 0 var(--color-border-soft);
}

/* Тот же .container, что и у остальных секций: контент шапки не должен
   разъезжаться шире 1840 на мониторах больше 1920.
   Четыре группы разложены space-between, своего gap у контейнера нет:
   в макете группы занимают 154.8 + 724 + 375 + 120 = 1373.8, и свободные
   466.2 делятся на три зазора по 155.4. Если задать группе поиска
   flex-grow, зазоры разъедутся.
   Ширина групп в Figma «по содержимому», поэтому наши зазоры чуть шире
   макетных: Inter в Chrome набирает «Каталог» и телефон на 1–4 px уже,
   чем в Figma. Разница делится на три и даёт ≈2 px на зазор. */
.header-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-32);
}

/* --- Логотип ------------------------------------------------------------- */

.header-bar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-bar__logo-svg,
.header-bar__logo img {
  display: block;
  width: auto;
  height: 72px;
}

/* --- Кнопка «Каталог» + поиск -------------------------------------------- */

.header-bar__search {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}

.header-bar__catalog {
  gap: var(--space-24);
  min-height: 72px;
  padding: 8px 8px 8px var(--space-24);
  flex-shrink: 0;
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-24);
  line-height: var(--lh-tight);
}

/* Иконка каталога в макете нарисована четырьмя квадратами 9.884 px
   с обводкой 2 px и радиусом 2.5 px — это фигуры, а не файл. Повторяем
   сеткой, чтобы не тащить лишний SVG.
   Нода I1:831;1:4245;1:3905: центры квадратов стоят на ±7.06 от центра
   круга, вся сетка смещена на 0.5 px вниз — это даёт padding-top,
   а не отдельные координаты.
   Обводка в Figma по центру контура: у прямоугольника 9.884 видимый
   размер 9.884 + 2 = 11.884, зазор между соседними 2.24, вся сетка 26×26.
   CSS-border рисуется внутрь, поэтому размер клетки задаём уже видимый,
   а радиус — внешний: 2.5 контура + половина обводки = 3.5. */
.header-bar__catalog-icon {
  display: grid;
  grid-template-columns: repeat(2, 11.884px);
  grid-template-rows: repeat(2, 11.884px);
  gap: 2.24px;
  place-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  padding-top: 1px;
  border-radius: var(--radius-pill);
}

.header-bar__catalog-icon i {
  border: 2px solid currentColor;
  border-radius: 3.5px;
}

/* --- Поле поиска: 509×72, фон bg_white-grey ------------------------------
   Нода I1:831;1:4246 (`Search container`) — 509×72, ростом во весь
   `Search section`, то есть вровень с кнопкой «Каталог». Было 60: padding
   16 + строка 24 не добирают до 72, и поле висело на 6 px ниже кнопки. */

.header-search {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 509px;
  max-width: 100%;
  min-height: 72px;
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
}

.header-search__icon {
  display: flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
}

.header-search__icon svg { width: 24px; height: 24px; }

.header-search__input {
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-20);
  letter-spacing: var(--ls-20);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.header-search__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Крестик очистки в Chrome сбивает выравнивание относительно макета. */
.header-search__input::-webkit-search-cancel-button { display: none; }

/* --- Соцсети и телефон --------------------------------------------------- */

.header-bar__contact {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  flex-shrink: 0;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.social-icons__link {
  display: block;
  width: 60px;
  height: 60px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.social-icons__link svg { width: 100%; height: 100%; }
.social-icons__link:hover { transform: scale(1.05); }

/* Фрейм `Social icons container` (нода I1:831;1:4250) в макете жёстко
   135 px, а сами кружки занимают 128 (60 + 8 + 60) и прижаты влево.
   Оставшиеся 7 px — часть отбивки до телефона: визуально между WhatsApp
   и номером 31 px, а не 24. Без этой ширины телефон уезжает влево.
   Только в шапке и подвале: в hero и форме заявки тот же блок 120 px
   (модификатор .social-icons--56). */
.header-bar__contact .social-icons { width: 135px; }

.header-phone {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.header-phone__number {
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-24);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.header-phone__hours {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-16);
  line-height: var(--lh-tight);
  color: var(--color-success);
}

/* --- Корзина и профиль: два круга 56×56 ---------------------------------- */

.header-bar__user {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-invert);
  transition: background var(--dur-fast) var(--ease-out);
}

.icon-button svg { width: 32px; height: 32px; }
.icon-button:hover { background: var(--color-brand-hover); }

/* Иконка профиля (нода I1:831;1:4260) нарисована не во весь квадрат 32:
   круг 24 с обводкой 2 занимает 26×26 и стоит по центру. У выгруженного
   icon-user.svg viewBox как раз 26 — растянутый до 32 он давал круг
   29.5 вместо 24. Показываем в натуральную величину: 26 по центру
   кнопки 56 — это и есть макетные 15 px от края. */
.icon-button svg.icon-button__glyph--user { width: 26px; height: 26px; }

/* --- Нижняя строка: адрес и меню, 1840×37 -------------------------------
   В макете строка начинается на y = 153 при высоте панели 136 — зазор
   17 px сверху. Снизу у шапки отступа НЕТ: `Header top section` (1:567)
   заканчивается на 190, и на экранах входа шапка целиком обёрнута
   фреймом `Frame 2087326332` ровно 1920×190 (нода 1:3083).
   Зазор до контента у каждой страницы свой и принадлежит ей, а не шапке:
   32 у страниц с крошками (10 экранов, `Frame 1171275442` на y = 222),
   25 у каталога (`Content section` на y = 215), 17 у главной
   (`Menu section` 1:580 на y = 207). Пока шапка забирала эти 17 себе,
   каждая страница считала свой отступ как «макетный минус 17». */

.header-nav {
  padding-block: 17px 0;
}

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

.header-nav__address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-4);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-24);
  line-height: var(--lh-tight);
}

/* Пин в шапке синий (нода 1:569), в подвале — белый (I1:830;1:4124).
   Иконка одна и та же, поэтому в файле currentColor, а цвет задаётся
   здесь и в footer.css. Раньше #4867BF был зашит в сам SVG, и в подвале
   пин уходил синим по тёмно-синему. */
.header-nav__pin {
  display: flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-brand);
}

.header-nav__pin svg { width: 24px; height: 24px; }

.site-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 48px;
}

.site-menu a {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-20);
  line-height: var(--lh-tight);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-menu a:hover { color: var(--color-brand); }

/* Активный пункт: синий текст и точка 9 px слева. У остальных пунктов
   точки в макете нет, и места она не занимает. */
.site-menu .current-menu-item > a,
.site-menu .current_page_item > a,
.site-menu .current-menu-ancestor > a {
  color: var(--color-brand);
}

.site-menu .current-menu-item > a::before,
.site-menu .current_page_item > a::before,
.site-menu .current-menu-ancestor > a::before {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

/* --- Ниже 1920 px ---------------------------------------------------------
   Макет нарисован только под 1920. Правила ниже — решение вёрстки:
   поиск сжимается, шапка не ломается. Согласовать с дизайнером. */

@media (max-width: 1700px) {
  .header-bar__inner { gap: var(--space-24); }
  .header-bar__search { flex: 1 1 auto; }
  .header-search { width: 100%; }
  .site-menu { gap: var(--space-32); }
}

@media (max-width: 1280px) {
  .header-bar__inner { flex-wrap: wrap; }
  .header-bar__search { order: 3; flex-basis: 100%; }
  .header-nav__address { font-size: var(--fs-20); }
}

/* Ниже 900 px макета нет вообще — мобильная шапка принята вёрсткой.
   Раскладка: строка «логотип + четыре круглые кнопки» (телефон, корзина,
   кабинет, бургер), под ней «Каталог + поиск» во всю ширину. Соцсети,
   номер с часами, адрес и меню переезжают в бургер-панель — см. блок
   .mobile-menu ниже. */
@media (max-width: 900px) {
  .header-bar__inner {
    flex-wrap: wrap;
    gap: var(--space-12) var(--space-16);
    padding-block: var(--space-12);
  }

  .header-bar__logo-svg,
  .header-bar__logo img { height: 40px; }

  /* Номер, часы и соцсети живут в бургер-панели. */
  .header-bar__contact { display: none; }

  .header-bar__user { margin-left: auto; }

  .icon-button { width: 44px; height: 44px; }
  .icon-button svg { width: 24px; height: 24px; }
  .icon-button svg.icon-button__glyph--user { width: 22px; height: 22px; }

  /* Каталог + поиск отдельной строкой во всю ширину. */
  .header-bar__search {
    order: 3;
    flex-basis: 100%;
    gap: var(--space-8);
  }

  .header-bar__catalog {
    min-height: 48px;
    padding: 4px 4px 4px var(--space-16);
    font-size: var(--fs-16);
    gap: var(--space-8);
  }

  /* Сетка 2×2 внутри иконки фиксированная (26×26) — круг 40 её вмещает. */
  .header-bar__catalog-icon {
    width: 40px;
    height: 40px;
    padding-top: 0;
  }

  .header-search {
    min-height: 48px;
    padding: var(--space-8) var(--space-16);
  }

  .header-search__icon,
  .header-search__icon svg { width: 20px; height: 20px; }

  .header-search__input { font-size: var(--fs-16); }

  /* Адрес и меню нижней строки — в бургер-панели. */
  .header-nav { display: none; }
}

/* --- Плавающая шапка при прокрутке вверх -----------------------------------
   Только на телефоне: после первого экрана шапка уезжает вместе со
   страницей, а при прокрутке вверх выезжает сверху — меню и поиск всегда
   в одном жесте. Классы ставит initStickyHeader в main.js: is-fixed —
   шапка вынута из потока и спрятана за верхним краем, is-shown — выехала.
   В показанном состоянии transform именно none, а не translateY(0):
   любой другой transform делает шапку containing block'ом для
   position: fixed, и панель бургер-меню внутри неё ломается. */
@media (max-width: 900px) {
  .site-header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .site-header.is-fixed.is-shown { transform: none; }
}

/* --- Бургер и мобильная панель ---------------------------------------------
   В макете мобильной версии нет — панель принята вёрсткой. До открытия
   стоит с атрибутом hidden, кнопка-бургер видна только ниже 900 px, так
   что на десктопе этот блок не существует. Скролл страницы под открытой
   панелью запирает body.menu-open (класс ставит main.js). */

.burger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-invert);
  transition: background var(--dur-fast) var(--ease-out);
}

.burger:hover { background: var(--color-brand-hover); }

.burger__lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}

.burger__lines i {
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

/* Звонок и бургер — только на узких экранах: десктопная шапка макетная,
   в ней этих кнопок нет. Прячем через min-width, а не базовым правилом:
   базовое стояло бы в каскаде после мобильного блока и перебивало его. */
@media (min-width: 901px) {
  .burger,
  .header-bar__phone-mini { display: none; }
}

body.menu-open { overflow: hidden; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

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

/* Кнопка-бургер ниже 900 px не показывается, но страховка не лишняя:
   растянутое до десктопа окно с открытой панелью залипало бы затемнением. */
@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 21, 52, .55);
  animation: ag-menu-fade var(--dur-base) var(--ease-out);
}

.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: min(360px, calc(100% - 48px));
  padding: var(--space-24) var(--space-24) var(--space-32);
  background: var(--color-bg);
  overflow-y: auto;
  animation: ag-menu-slide var(--dur-base) var(--ease-out);
}

@keyframes ag-menu-fade { from { opacity: 0; } }
@keyframes ag-menu-slide { from { transform: translateX(100%); } }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu__title {
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-24);
  line-height: var(--lh-tight);
}

/* Крестик рисуется псевдоэлементами: отдельной иконки закрытия в наборе
   макета нет, а тащить новый SVG ради двух чёрточек незачем. */
.mobile-menu__close {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-soft);
}

.mobile-menu__close::before,
.mobile-menu__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-text);
}

.mobile-menu__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-menu__list {
  display: flex;
  flex-direction: column;
}

.mobile-menu__list a {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-20);
  line-height: var(--lh-tight);
}

/* Активный пункт — как в настольном меню: синий и с точкой. */
.mobile-menu__list .current-menu-item > a,
.mobile-menu__list .current_page_item > a,
.mobile-menu__list .current-menu-ancestor > a {
  color: var(--color-brand);
}

.mobile-menu__list .current-menu-item > a::before,
.mobile-menu__list .current_page_item > a::before,
.mobile-menu__list .current-menu-ancestor > a::before {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.mobile-menu__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: auto;
}

.mobile-menu__address {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--fs-16);
  letter-spacing: var(--ls-16);
  line-height: var(--lh-loose);
}

.mobile-menu__phone-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mobile-menu__phone {
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-24);
  line-height: var(--lh-tight);
}

.mobile-menu__hours {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-14);
  color: var(--color-success);
}

.mobile-menu .social-icons__link { width: 48px; height: 48px; }

/* --- Бейдж корзины ---------------------------------------------------------
   В макете иконка без счётчика; бейдж появляется только когда корзина не
   пуста — AJAX-добавлению нужен видимый отклик в шапке. */

.icon-button--cart { position: relative; }

.icon-button__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: 2px solid var(--color-brand);
  color: var(--color-brand);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1;
}

.icon-button__badge[hidden] { display: none; }