/* Header — шапка сайта (Figma: библиотека «Shop: Components», сет
   «Header (Redesign)» 5758:30043; ноды сняты из файла главной
   dtoQqDWPH4y3kno7blcDcl, где шапка стоит инстансом).

   ОСИ СЕТА. Breakpoint (320 / 576 / 768 / 1024 / 1280 / «1920 >») ×
   Opened (True / False) × Variant (Default / Products / Cart / Checkout) —
   30 вариантов. Собран Variant=Default, Opened=False на ТРЁХ активных точках
   проекта (grid.css: base / 768 / 1280):
       base    ← Figma 320  (инстанс 5822:97029, мастер 5758:31232)
       tablet  ← Figma 768  (инстанс 5822:97837, мастер 5758:31106)
       desktop ← Figma 1280 (инстанс 5822:98683, мастер 5758:31050)
   Opened=True (раскрытое меню каталога) и Variant=Products/Cart/Checkout НЕ
   собраны: их мастера — remote-компоненты библиотеки, ноды которой недоступны
   ни в файле главной, ни в Shop/Components (MI2pse3AB2kUEI5bXJ4GDR), поэтому
   эталон для пиксельной сверки снять нечем. См. notes в blocks.json.

   АДАПТИВ. Переключение — только @container через мост grid.css
   (.bp-container / .bp-scope): реплики фреймов имеют собственную ширину, и
   @media сработал бы от ширины ОКНА compare.mjs (1280×720), подменив раскладку
   во всех репликах разом. Своих чисел точек перелома блок не содержит — только
   флаги --bp-tablet / --bp-desktop (0/1) и арифметику на них.

   ДВЕ ВЕТКИ НИЖНЕЙ СТРОКИ. В Figma Main Section на 320/768 и на 1280 — разные
   ноды с разным составом: ниже десктопа это [кнопка][логотип по центру][кнопка]
   (ни каталога, ни поиска, ни корзины — навигация уезжает в TabBar внизу
   страницы), на десктопе — [логотип][Catalog][поиск][Request][24/7][корзина].
   Порядком и флагами одну в другую не превратить (логотип меняет и позицию, и
   роль), поэтому веток две, и они гасят друг друга через --below-desktop /
   --only-desktop из grid.css. Логотип в компактной ветке центрируется absolute —
   ровно как в макете: кнопки по краям разной ширины, и auto-margin поставил бы
   логотип в центр ПРОМЕЖУТКА, а не контейнера. */

/* Заливки у шапки НЕТ — так в Figma (fills: [] и у самой ноды, и у Top, и у Main
   Section; цветная только полоса-объявление). Фон ей даёт страница: на десктопе
   она белая, на 320/768 под шапку заходит градиент hero. Поэтому фон здесь не
   задаём, а showcase-реплики снимаются на прозрачном фоне (compare.mjs видит
   прозрачный эталон и снимает рендер с omitBackground). */
.header {
  font-family: var(--font-family-base);
  /* Inter Variable сужает глифы осью opsz против статического Inter в Figma. */
  font-optical-sizing: none;
}

.header__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ==== Header Message — полоса-объявление ==================================
   Локальный элемент: в Figma это отдельный компонент (3286:43908), но нужен
   только внутри шапки. Крестик — готовая кнопка button (ghost + overlay: белая
   иконка на цветной заливке). overflow: hidden — как overflow-clip у ноды: на
   320 кнопка (32px) выше самой полосы (24px) и обязана обрезаться. */
.header__message {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-inline: var(--spacing-32);
  padding-block: calc(
    var(--spacing-4) + var(--bp-tablet) * (var(--spacing-8) - var(--spacing-4))
  );
  background: var(--color-information-500);
}

/* Кегль: 12/16 на мобиле → 14/20 с планшета. Переключение арифметикой на
   токенах шкалы, сырых px и своих @container в блоке нет. */
.header__message-text {
  margin: 0;
  color: var(--color-gray-0);
  text-align: center;
  font-size: calc(
    var(--text-body-12m-size) +
    var(--bp-tablet) * (var(--text-body-14m-size) - var(--text-body-12m-size))
  );
  line-height: calc(
    var(--text-body-12m-line-height) +
    var(--bp-tablet) * (var(--text-body-14m-line-height) - var(--text-body-12m-line-height))
  );
  font-weight: var(--text-body-14m-weight);
}

/* right: 0 на мобиле, 2px с планшета (так в макете) — позиционный сдвиг,
   не токен (прецедент: вылет nav-стрелок в product-carousel). */
.header__message-close {
  position: absolute;
  top: 50%;
  right: calc(var(--bp-tablet) * 2px);
  transform: translateY(-50%);
}

/* ==== Top — строка языка/валюты, Trustpilot и служебных ссылок ============
   Trustpilot стоит в потоке по центру (он есть на всех точках и задаёт высоту
   строки), а группы по краям — absolute: в Figma они прижаты к полям, а центр
   строки не зависит от их ширины. Ниже десктопа групп нет вовсе. */
.header__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: calc(
    var(--spacing-20) + var(--bp-desktop) * (var(--spacing-32) * 2 - var(--spacing-20))
  );
  padding-block: calc(
    var(--spacing-4) +
    var(--bp-tablet) * (var(--spacing-8) - var(--spacing-4)) +
    var(--bp-desktop) * (var(--spacing-12) - var(--spacing-8))
  );
}

.header__dropdowns,
.header__top-actions {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: var(--only-desktop);
  align-items: center;
}

.header__dropdowns {
  left: calc(var(--spacing-32) * 2);
  gap: var(--spacing-16);
}

.header__top-actions {
  right: calc(var(--spacing-32) * 2);
  gap: var(--spacing-24);
}

/* Select Link — облегчённый аналог select (в Figma компонент 3286:44376).
   Пока нужен только здесь → локальный элемент; понадобится второму блоку —
   повышается в components/ по правилу CLAUDE.md. */
.header__select-link,
.header__profile {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.header__select-link { color: var(--color-gray-900); }
.header__profile     { color: var(--color-accent-400); text-decoration: none; }

/* Компонент link берёт цвета состояний переменными на самом элементе — здесь
   набор Primary / Medium из макета (тот же, что в independed-reviews). */
.header__link {
  --link-c: var(--color-accent-400);
  --link-h: var(--color-accent-600);
  --link-a: var(--color-accent-400);
}

.header__select-link svg,
.header__profile svg {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.header__select-link:hover,
.header__profile:hover { color: var(--color-accent-400); }
.header__select-link:active,
.header__profile:active { color: var(--color-accent-600); }

.header__select-link:focus-visible,
.header__profile:focus-visible,
.header__trust:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
  border-radius: var(--radius-4);
}

/* Trustpilot: одна залитая звезда 12px + строка. Компонент independed-rate
   здесь не подходит — он рисует шкалу из пяти звёзд, а в макете звезда одна. */
.header__trust {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  color: var(--color-gray-900);
  text-decoration: none;
}

.header__trust-star {
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--color-positive-400);
}

/* Кегль: 12/16 до десктопа → 14/20 на десктопе. */
.header__trust-text {
  margin: 0;
  font-size: calc(
    var(--text-body-12m-size) +
    var(--bp-desktop) * (var(--text-body-14m-size) - var(--text-body-12m-size))
  );
  line-height: calc(
    var(--text-body-12m-line-height) +
    var(--bp-desktop) * (var(--text-body-14m-line-height) - var(--text-body-12m-line-height))
  );
  font-weight: var(--text-body-14m-weight);
  white-space: nowrap;
}

/* ==== Main Section — логотип, поиск и действия ============================
   Верхняя линия — inset box-shadow, а не border: stroke в Figma лежит ВНУТРИ
   рамки и не раздвигает габарит (высоты нод 96/132/160 сходятся только так). */
.header__main {
  box-shadow: inset 0 1px 0 var(--color-gray-50);
  padding-inline: calc(
    var(--spacing-16) + var(--bp-desktop) * (var(--spacing-32) * 2 - var(--spacing-16))
  );
  padding-block: calc(
    var(--spacing-8) +
    var(--bp-tablet) * (var(--spacing-16) - var(--spacing-8)) +
    var(--bp-desktop) * (var(--spacing-20) - var(--spacing-16))
  );
}

/* ---- ветка «ниже десктопа»: кнопка — логотип — кнопка ---- */
.header__bar--compact {
  position: relative;
  display: var(--below-desktop);
  align-items: center;
  justify-content: space-between;
}

.header__logo--compact {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Логотип: 20px на мобиле → 24px на планшете (на десктопе компонент даёт 32). */
.header__logo--compact svg {
  height: calc(20px + var(--bp-tablet) * 4px);
}

/* Компактные кнопки: на 320 это квадрат-иконка (padding 8), на 768 — кнопка с
   подписью (padding 6/12). Локальный модификатор под префиксом блока: в Figma
   это разные ноды одного компонента (Icon Only=True/False), а класс
   .btn--icon-only через @container не переключить. */
.header__bar--compact .btn {
  padding-block: calc(
    var(--spacing-8) + var(--bp-tablet) * (var(--spacing-6) - var(--spacing-8))
  );
  padding-inline: calc(
    var(--spacing-8) + var(--bp-tablet) * (var(--spacing-12) - var(--spacing-8))
  );
}

/* Иконка чата есть только на 320 (на 768 у кнопки «Request service» её нет),
   подписи — только с планшета. */
.header__icon-mobile { display: var(--only-mobile); }
.header__label-tablet { display: var(--only-tablet); }

/* ---- ветка десктопа ---- */
.header__bar--desktop {
  display: var(--only-desktop);
  align-items: center;
  gap: var(--spacing-32);
}

.header__bar--desktop > .header__logo { flex-shrink: 0; }

.header__actions {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.header__buttons {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-left: auto;
}

/* Поле поиска — компонент input в «плоском» виде шапки: заливка gray-25 вместо
   gray-0, без внешней тени, padding-block 8 (высота 40 = высоте кнопок md).
   Локальный модификатор под префиксом блока, стили компонента не тронуты. */
.header__search {
  flex: 1 0 0;
  min-width: 0;
}

.header__search .input__field {
  padding-block: var(--spacing-8);
  background: var(--color-gray-25);
  box-shadow: inset 0 0 0 1px var(--color-gray-100);
}

/* Корзина: счётчик висит на углу кнопки. -9px — позиционный вылет из макета
   (как right:-20 у nav-стрелок карусели), не подменённый токен. */
.header__cart { position: relative; }

.header__cart-counter {
  position: absolute;
  top: -9px;
  right: -9px;
}