/*
 * Шапка сайта.
 *
 * Тёмная плашка видна всегда, под ней раскрывается одна из трёх белых
 * панелей: разделы, каталог или поиск. Одновременно открыта ровно одна.
 *
 * Разметка общая для всех ширин. До 1024px в плашке стоят бургер, поиск,
 * логотип и иконки избранного с корзиной; выше — логотип, текстовая
 * навигация и подписи справа. Держать два набора разметки не стали:
 * они разошлись бы при первой же правке.
 */

/*
 * Закреплена сверху на любой ширине; липнет (остаётся видна) при скролле
 * вниз, прячется при скролле вверх — header-scroll.js переключает
 * .is-hidden по направлению скролла.
 */
.frk-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--frk-layout-gutter);

  /*
   * Поле вокруг плашки прозрачное: заказчик просил, чтобы контент был виден
   * вокруг неё, а не белая рамка. Клики сквозь поле уходят в контент.
   */
  pointer-events: none;
  transition: transform var(--frk-motion-base) var(--frk-motion-ease);
}

.frk-header > * {
  pointer-events: auto;
}

.frk-header.is-hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .frk-header {
    transition: none;
  }
}

/* --- Плашка ------------------------------------------------------------- */

.frk-header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--frk-space-sm);
  height: 66px;
  padding-inline: 12px;
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-inverse);
  color: var(--frk-color-text-inverse);
}

.frk-header__cluster {
  display: flex;
  align-items: center;
  gap: var(--frk-space-md);
}

.frk-header__logo {
  display: block;
  flex-shrink: 0;
}

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

/* --- Элементы навигации --------------------------------------------------- */

.frk-header__nav {
  display: flex;
  align-items: center;
  gap: var(--frk-space-md);
}

.frk-header__link {
  display: flex;
  align-items: center;
  gap: var(--frk-space-xs);
  font-family: var(--frk-font-ui);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  color: inherit;
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-header__link:hover,
.frk-header__link[aria-expanded="true"] {
  color: var(--frk-color-gold);
}

/* Пункт, чья панель сейчас открыта, набран плотнее — так в макете */
.frk-header__link[aria-expanded="true"] {
  font-weight: var(--frk-weight-medium);
}

.frk-header__icon-button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.frk-header__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* --- Счётчик избранного/корзины ------------------------------------------ */

/*
 * Кружок и цифра сверены по макету (node 2096:1809/1810/1811): 24×24,
 * белая заливка, тёмная цифра. Стоит в потоке сразу после иконки/подписи —
 * не поверх неё: зазор до иконки берёт общий gap .frk-header__link (8px,
 * --frk-space-xs), зазор между самими пунктами шапки (Избранное/Корзина/
 * Личный кабинет) не трогаем — он остаётся 24px (--frk-space-md).
 */
.frk-header__badge {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--frk-color-paper);
  color: var(--frk-color-ink);
  font-family: var(--frk-font-ui);
  font-size: 16px;
  font-weight: var(--frk-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.05em;
  font-variant-numeric: lining-nums tabular-nums;
}

.frk-header__badge[hidden] {
  display: none;
}

/*
 * Кнопка меню показывает две полосы в закрытом состоянии и крестик
 * в раскрытом. Обе иконки лежат в разметке и переключаются по aria-expanded —
 * состояние описано один раз и для глаза, и для скринридера.
 */
.frk-header__burger {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.frk-header__icon--burger {
  width: 24px;
  height: 10px;
}

.frk-header__icon--close {
  width: 18px;
  height: 18px;
}

.frk-header__burger[aria-expanded="false"] .frk-header__icon--close,
.frk-header__burger[aria-expanded="true"] .frk-header__icon--burger {
  display: none;
}

.frk-header__label {
  white-space: nowrap;
}

/* --- Панели --------------------------------------------------------------- */

.frk-header__panel {
  position: absolute;
  inset-inline: var(--frk-layout-gutter);
  top: var(--frk-layout-gutter);
  z-index: 1;
  padding-top: calc(66px + var(--frk-space-sm));
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface);
  color: var(--frk-color-text);
  transform-origin: top;
  animation: frk-panel-unfold var(--frk-motion-base) var(--frk-motion-ease);
}

.frk-header__panel[hidden] {
  display: none;
}

/*
 * Раскрытие по референсу заказчика (osmo.supply, multilevel navigation):
 * белая панель разворачивается вниз, пока содержимое ещё прозрачно, затем
 * проступает текст, а карточки товаров по очереди выезжают справа
 * и проявляются. Двигаются только transform и opacity.
 *
 * При переходе с одной открытой панели на другую (is-switch, header.js)
 * панель не сворачивается заново — меняется только содержимое.
 */
@keyframes frk-panel-unfold {
  from {
    transform: scaleY(0);
  }
}

@keyframes frk-panel-content-in {
  from {
    opacity: 0;
  }
}

@keyframes frk-panel-card-in {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
}

/* Только меню и каталог: в поиске карточки перерисовываются на каждый ввод и мигали бы */
[data-panel="menu"] .frk-menu-products__item,
[data-panel="catalog"] .frk-menu-products__item {
  animation: frk-panel-card-in var(--frk-motion-slow) var(--frk-motion-ease) 240ms both;
}

[data-panel] .frk-menu-products__item:nth-child(2) {
  animation-delay: 310ms;
}

[data-panel] .frk-menu-products__item:nth-child(3) {
  animation-delay: 380ms;
}

[data-panel] .frk-menu-products__item:nth-child(4) {
  animation-delay: 450ms;
}

.frk-header__panel.is-switch {
  animation: none;
}

/*
 * На десктопе разворачивается только подложка, а сама панель сразу занимает
 * всю высоту: иначе, пока она растёт, курсор, ведомый вниз с пункта шапки,
 * успевает выйти за её край, и панель закрывается. На тач-экранах панель
 * прокручивается, и подложка-псевдоэлемент уехала бы вместе с содержимым —
 * там раскрывается панель целиком.
 */
@media (min-width: 1024px) {
  .frk-header__panel {
    background: none;
    animation: none;
  }

  .frk-header__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--frk-color-surface);
    transform-origin: top;
    animation: frk-panel-unfold var(--frk-motion-base) var(--frk-motion-ease);
  }

  .frk-header__panel.is-switch::before {
    animation: none;
  }
}

.frk-header__panel-inner {
  display: grid;
  gap: var(--frk-space-lg);
  padding: var(--frk-space-sm) 12px var(--frk-space-lg);
  animation: frk-panel-content-in var(--frk-motion-base) var(--frk-motion-ease) 160ms both;
}

@media (prefers-reduced-motion: reduce) {
  .frk-header__panel,
  .frk-header__panel::before,
  .frk-header__panel-inner,
  [data-panel] .frk-menu-products__item {
    animation: none;
  }
}

/* Поиск занимает левую часть панели, карточки — правую */
.frk-header__panel[data-panel="search"] .frk-header__panel-inner {
  align-items: start;
}

/* --- Кабинет в меню ------------------------------------------------------- */

/*
 * До десктопа ссылки на кабинет в плашке нет, её место — первая строка меню
 * (2820:22318, 2820:22205): гостю «Личный кабинет», вошедшему — его имя.
 * Ширина по содержимому: пустое поле справа от имени ссылкой быть не должно.
 * min-width: 0 — иначе длинное имя целиком распирает колонку сетки панели
 * и многоточие не наступает.
 */
.frk-menu-account {
  display: inline-flex;
  align-items: center;
  gap: var(--frk-space-xs);
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-menu-account:hover {
  color: var(--frk-color-gold);
}

/* Штрих выходит за квадрат 20×20 на 0.75px, как в макете, — поля возвращают строке размер квадрата */
.frk-menu-account__icon {
  flex-shrink: 0;
  width: 21.5px;
  height: 21.5px;
  margin: -0.75px;
  background: currentColor;
  -webkit-mask: url(../images/icons/account-line.svg) center / contain no-repeat;
  mask: url(../images/icons/account-line.svg) center / contain no-repeat;
}

/* Длинное имя — одной строкой с многоточием */
.frk-menu-account__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Списки разделов ------------------------------------------------------ */

.frk-menu-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--frk-space-2xs);
}

.frk-menu-column__title {
  margin-bottom: 20px;
  font-size: var(--frk-size-ui-sm);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-menu-column__list {
  display: grid;
  gap: var(--frk-space-sm);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-menu-column__list a {
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-menu-column__list a:hover {
  color: var(--frk-color-gold);
}

/* --- Товары в панели ------------------------------------------------------ */

.frk-menu-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--frk-space-2xs);

  /* Выезжающая справа карточка не выходит за панель и не даёт горизонтальной прокрутки */
  overflow-x: clip;
}

/* --- Поиск ---------------------------------------------------------------- */

.frk-search {
  display: grid;
  gap: 12px;
  align-content: start;
  max-width: 612px;
}

/*
 * Недавние запросы. Список хранит до десяти строк и прокручивается:
 * без ограничения по высоте он отжимал бы выдачу за нижний край панели.
 */
.frk-search__history {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  max-height: 128px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.frk-search__history-item {
  display: flex;
  align-items: center;
  gap: var(--frk-space-2xs);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  transition: color var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-search__history-item:hover {
  color: var(--frk-color-gold);
}

.frk-search__history-item img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Итог выдачи и переход на страницу результатов */
.frk-search__result {
  display: grid;
  justify-items: start;
  gap: var(--frk-space-sm);
  margin-top: var(--frk-space-lg);
}

.frk-search__count {
  font-family: var(--frk-font-title);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-display-lg);
  line-height: 1.1;
  letter-spacing: var(--frk-tracking-serif);
}

/* Подсказка под «Нет совпадений» — те же слова и кегль, что на странице поиска (search.css) */
.frk-search__hint {
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
  color: rgb(19 18 18 / 60%);
}

/*
 * Пока запрос не введён, показывать нечего. Правило нужно явно: сетка
 * объявлена классом, и её display перебивает атрибут hidden. Внутри выдачи
 * счётчик, подсказка и кнопка включаются по-разному в трёх состояниях.
 */
.frk-search__result[hidden],
.frk-search__result [hidden],
.frk-search__history[hidden],
.frk-menu-products[hidden] {
  display: none;
}

.frk-search__label {
  font-size: var(--frk-size-ui-sm);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-search__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--frk-space-sm);
  border-radius: var(--frk-radius);
  background: var(--frk-color-surface-muted);
}

.frk-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  font-family: var(--frk-font-ui);
  font-weight: var(--frk-weight-light);
  font-size: var(--frk-size-ui-lg);
  line-height: var(--frk-leading-base);
  letter-spacing: var(--frk-tracking-ui);
}

.frk-search__input::placeholder {
  color: var(--frk-color-ink);
  opacity: 0.5;
}

.frk-search__input:focus {
  outline: none;
}

/*
 * В макете у поля нет рамки, поэтому фокус показываем затемнением подложки:
 * обводка видна, но не спорит с плоской заливкой.
 */
.frk-search__field:focus-within {
  background: #ebebeb;
}

/* Системный крестик Safari и Chrome дублировал бы нашу кнопку очистки */
.frk-search__input::-webkit-search-cancel-button {
  appearance: none;
}

.frk-search__clear,
.frk-search__submit {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: opacity var(--frk-motion-fast) var(--frk-motion-ease);
}

.frk-search__clear:hover,
.frk-search__submit:hover {
  opacity: 0.6;
}

.frk-search__clear[hidden] {
  display: none;
}

/* ========================================================================= *
 * До десктопа: в плашке только иконки
 * ========================================================================= */

@media (max-width: 1023px) {
  .frk-header__nav,
  .frk-header__link--account,
  .frk-header__label {
    display: none;
  }

  .frk-header__cluster--actions {
    gap: var(--frk-space-sm);
  }

  /*
   * Меню по макету (2820:22318): строка кабинета в 24px под плашкой
   * (16 поля панели и 8 здесь), от неё до разделов и от разделов
   * до карточек — тоже по 24
   */
  [data-panel="menu"] .frk-header__panel-inner {
    gap: var(--frk-space-md);
    padding-top: var(--frk-space-xs);
  }

  /*
   * Страница под открытой панелью заблокирована от скролла (.frk-menu-open),
   * а у самой панели предела высоты не было — контент (разделы + превью
   * товаров) мог оказаться выше экрана, и низ становился недостижим. Отступ
   * снизу зеркалит верхний (var(--frk-layout-gutter), как и inset-inline
   * панели), дальше панель прокручивается сама.
   */
  .frk-header__panel {
    max-height: calc(100vh - 2 * var(--frk-layout-gutter));
    max-height: calc(100dvh - 2 * var(--frk-layout-gutter));
    overflow-y: auto;
  }

  /*
   * Панели «Меню» и «Каталог» не содержат текстовых полей — им безопасно
   * взять более точную высоту через --frk-vh (viewport-height.js,
   * window.visualViewport), она чинит гэп, который на части реальных
   * устройств Safari остаётся даже с dvh. Панель поиска (#panel-search) —
   * тоже .frk-header__panel, но с текстовым полем: --frk-vh реагирует на
   * экранную клавиатуру (visualViewport.height уменьшается, dvh — нет,
   * так и задумано в спецификации), поэтому её сюда сознательно не
   * включаем — панель бы схлопывалась в момент фокуса в поле, пряча
   * «Показать все» и часть результатов.
   */
  .frk-header__panel[data-panel="menu"],
  .frk-header__panel[data-panel="catalog"] {
    max-height: calc(var(--frk-vh, 100dvh) - 2 * var(--frk-layout-gutter));
  }
}

/* ========================================================================= *
 * Планшет
 * ========================================================================= */

@media (min-width: 768px) {
  .frk-header__bar {
    height: 64px;
    padding-inline: var(--frk-space-sm);
  }

  .frk-header__panel {
    padding-top: calc(64px + var(--frk-space-sm));
  }

  /* Плашка стала на 2px ниже (64px вместо 66px) — пересчитываем отступ под fixed-шапку */
  html {
    --frk-header-offset: calc(64px + 2 * var(--frk-layout-gutter));
  }

  .frk-header__panel-inner {
    padding-inline: 12px;
  }

  .frk-menu-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
 * Третий товар показываем только когда для него есть место. Скрываем именно
 * в узком диапазоне, а не переключаем display туда-обратно: иначе правило
 * перебьёт тип отображения карточки и сломает пропорции изображения.
 */
@media (max-width: 767px) {
  .frk-menu-products__item:nth-child(n + 3) {
    display: none;
  }
}

/* ========================================================================= *
 * Десктоп: текстовая навигация вместо бургера
 * ========================================================================= */

@media (min-width: 1024px) {
  .frk-header__bar {
    justify-content: flex-start;
    gap: var(--frk-space-lg);
  }

  .frk-header__logo img {
    height: 31px;
  }

  /*
   * Бургер и поиск, стоящие на узких экранах слева от логотипа, здесь
   * не нужны: их роль играют пункты «Меню» и «Каталог» с иконкой поиска.
   */
  .frk-header__cluster--compact,
  .frk-header__cluster--actions .frk-header__icon {
    display: none;
  }

  /* Кабинет здесь — в плашке, строка в меню не нужна */
  .frk-menu-account {
    display: none;
  }

  .frk-header__cluster--actions {
    margin-left: auto;
  }

  .frk-header__panel-inner {
    grid-template-columns: repeat(var(--frk-layout-columns), minmax(0, 1fr));
    gap: var(--frk-layout-gap);
    padding-bottom: var(--frk-space-2xl);
  }

  /*
   * Списки начинаются ровно под словом «Меню» в плашке: ширина логотипа
   * плюс отступ до навигации. Привязка к сетке колонок дала бы 159 пикселей
   * вместо 174 и заметный сдвиг относительно макета.
   */
  .frk-menu-columns {
    grid-column: 1 / span 6;
    grid-template-columns: minmax(0, 1fr);
    margin-left: calc(122px + var(--frk-space-lg));
  }

  .frk-menu-column__title {
    display: none;
  }

  /*
   * На десктопе кнопка «Меню» показывает только служебные разделы:
   * категории каталога открываются соседним пунктом.
   */
  [data-panel="menu"] .frk-menu-column--catalog {
    display: none;
  }

  .frk-menu-products {
    grid-column: 7 / span 6;
  }

  /* Поиск, в отличие от разделов, прижат к левому краю панели — так в макете */
  .frk-search {
    grid-column: 1 / span 6;
  }
}

/* На мобильном при раскрытой панели страница под ней не прокручивается */
.frk-menu-open {
  overflow: hidden;
}

@media (min-width: 1024px) {
  .frk-menu-open {
    overflow: visible;
  }
}