/* Зона «header». Дословная выборка из sensey-landing/src/styles/base.css. Собрано tools/extract-zones.sh */
  .header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  color: var(--color-dark);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

  .header--overlay {
  color: var(--color-white);
}

  .header--menu-open {
  background: rgba(247, 244, 239, 0.98);
  color: var(--color-dark);
}

  .header--scrolled {
  background: rgba(247, 244, 239, 0.9);
  color: var(--color-dark);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px rgba(37, 37, 37, 0.08);
}

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

  .header__brand {
  display: inline-flex;
  align-items: center;
  width: clamp(150px, 15vw, 220px);
}

  .header__brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

  .header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

  .header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

  .header__actions--mobile {
  display: none;
}

  .header__utility-link {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

  .header__cart {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
}

  .header__link {
  position: relative;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

  .header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-base);
}

  .header__link:hover::after,
  .header__link--active::after {
  transform: scaleX(1);
  transform-origin: left;
}

  .header__toggle {
  display: none;
}

/*
 * Шапка переключается на узкую раскладку раньше остальной страницы: на 1000, а
 * не на 820, как всё прочее.
 *
 * Так пришлось сделать, потому что между 821 и ~1000 широкая шапка **не
 * помещается в свою ширину**. Замерено: на 821 логотип сжимался до 15 пикселей,
 * корзина до 29 — читалось это как поломка. Содержимого там больше, чем у любой
 * другой зоны: логотип, город, четыре пункта меню, кабинет, поиск и корзина в
 * одной строке.
 *
 * Число 1000 взято не на глаз: на 1024 (планшет в альбомной) широкая шапка
 * собирается нормально — логотип 154, корзина 42. Значит порог должен лежать
 * между 900 и 1024, и 1000 оставляет запас.
 *
 * Глобальные 820 при этом не трогаем: на них держится вся остальная раскладка,
 * и двигать их значит пересматривать выверенную вёрстку целиком. Шапка —
 * единственная зона, которой этой ширины не хватает.
 */
@media (max-width: 1000px) {
  /*
   * Отступы между частями шапки урезаны вдвое: на узком экране строку делят
   * логотип, город, корзина и бургер, и 24 пикселя между ними — это ровно та
   * ширина, которой потом не хватает логотипу. Он тут флексовый и молча
   * сжимается: заметить нехватку места по коду нельзя, видно только замером.
   */
  .header__inner {
    gap: 12px;
  }

  .header__toggle {
    position: relative;
    z-index: 2;
    display: inline-grid;
    gap: 6px;
    /* Бургер — крайний справа. В разметке он раньше корзины, потому что на
       широком экране за ним идёт меню; порядок правим здесь, а не перестановкой
       узлов, иначе сломается широкий экран. */
    order: 1;
  }

  .header__brand {
    width: 164px;
  }

  .header__toggle span {
    display: block;
    width: 32px;
    height: 2px;
    background: currentColor;
  }

  .header__nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    min-height: 100dvh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 18px;
    padding: 120px 24px 48px;
    background: #f7f4ef;
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--transition-base);
  }

  /*
   * В строке шапки остаётся одна корзина. Кабинет и поиск уходят в меню —
   * подписанными ссылками, а не значками: места на три значка нет, а из трёх
   * именно корзина обязана быть в одно касание и со счётчиком.
   */
  .header__actions--bar .header__utility-link,
  .header__actions--bar .header__search {
    display: none;
  }

  /* Корзина чуть меньше: каждый пиксель здесь снимается с логотипа */
  .header__cart {
    width: 38px;
    height: 38px;
  }

  .header__actions--mobile {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin-top: 20px;
  }

  .header__nav--open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  .header--menu-open {
    min-height: 100dvh;
    background: #f7f4ef;
  }

}