/*
 * Панель SHOP и мобильный drawer.
 *
 * Оба слоя печатает `inc/header-menu.php` в подвале, поведение — в
 * `assets/js/header-menu.js`. Здесь только вид и положение.
 *
 * Язык тот же, что у витрины: прописные с широким трекингом у подписей,
 * тонкие линии, острые углы, вес несёт размер, а не насыщенность.
 */

/* ---------- панель SHOP ---------- */

/* Высоту шапки пишет `assets/js/header-height.js` в `--header-h`. Панель
   встаёт ровно под ней и во всю ширину окна: это не выпадающий список, а
   полка. */
.mit-menu-panel {
  position: fixed;
  top: var(--header-h, 66px);
  right: 0;
  left: 0;
  /* Выше содержимого страницы, но ниже шторки мини-корзины (9999) и
     drawer'а. Девятисот не хватало: герой на главной перекрывал панель —
     у полноэкранных блоков свои слои. */
  z-index: var(--mit-z-menu, 9990);
  background: var(--wp--preset--color--base, #f9f9f9);
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

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

.mit-menu-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

body.admin-bar .mit-menu-panel {
  top: calc(var(--header-h, 66px) + 32px);
}

/* Колонок три, плюс промо-плитка четвёртой, если она задана. Раскладку
   считает `auto-fit`, а не жёсткий шаблон: пустая плитка иначе оставляла бы
   в панели зияющую четверть. */
.mit-menu-panel__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 2.5rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 2.5vw 2.5rem;
}

.mit-menu__title {
  display: block;
  margin-bottom: 1rem;
  color: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.5;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.mit-menu__title:hover {
  opacity: 1;
}

.mit-menu__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mit-menu__link {
  color: inherit;
  font-size: 13px;
  text-decoration: none;
}

a.mit-menu__link:hover {
  text-decoration: underline;
}

/* Коллекции: имя длинное (координаты), поэтому оно уходит на строку ниже
   отступом. Плоский вид — режим `flat` в `mit_sf_menu_collections_mode()`. */
.mit-menu__item_group > .mit-menu__link {
  opacity: 0.5;
}

.mit-menu__sub {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(17, 17, 17, 0.18);
}

.mit-menu__browse {
  display: inline-block;
  margin-top: 1.25rem;
  color: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.5;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.mit-menu__browse:hover {
  opacity: 1;
}

/* Плитка шире колонки со ссылками: это картинка, ей нужен размер. */
.mit-menu-panel__inner:has(.mit-menu__promo) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
}

.mit-menu__promo {
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  padding: 1rem;
  background-color: rgba(17, 17, 17, 0.06);
  background-position: center;
  background-size: cover;
  color: inherit;
  text-decoration: none;
}

.mit-menu__promo span {
  padding: 0.5rem 0.75rem;
  background: #fff;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Под открытой панелью меню шапки должно быть читаемым: над герой-фото оно
   приглушено, а на фоне панели ему приглушаться незачем. То же и с
   подложкой самой шапки. */
html.mit-menu-panel-open .wp-site-blocks > header.wp-block-template-part > .wp-block-group {
  background-color: var(--wp--preset--color--base, #f9f9f9) !important;
}

html.mit-menu-panel-open body[class*="mit-hero-top"] .wp-site-blocks > header.wp-block-template-part nav.uc-header__navigation_desktop {
  opacity: 1;
  visibility: visible;
}

/* Шеврон у пункта SHOP — цель для пальца.
   Сам значок 12×12 рисует ядро, его трогать незачем: увеличиваем только
   область нажатия, невидимым слоем поверх. Слой растёт ВПРАВО, в пустое
   место между пунктами, а не влево на буквы «Shop» — иначе он воровал бы
   клики у самой ссылки. По высоте берём все 44px: вертикально место есть.
   Ревью 12.08, находка M-1; замер до правки — 7.2×7.2px при рекомендованных
   44×44. */
.mit-menu-trigger .wp-block-navigation-submenu__toggle {
  position: relative;
}

.mit-menu-trigger .wp-block-navigation-submenu__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  left: -4px;
  height: 44px;
  transform: translateY(-50%);
}

/* ---------- мобильный drawer ---------- */

.mit-menu-burger {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.mit-menu-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--mit-z-menu-full, 10001);
  background: rgba(17, 17, 17, 0.25);
  opacity: 0;
  transition: opacity 0.2s ease;
}

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

.mit-menu-drawer.is-open {
  opacity: 1;
}

.mit-menu-drawer__panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 26rem);
  height: 100%;
  margin-left: auto;
  background: #fff;
  transform: translateX(2rem);
  transition: transform 0.2s ease;
}

.mit-menu-drawer.is-open .mit-menu-drawer__panel {
  transform: translateX(0);
}

.mit-menu-drawer__head {
  display: flex;
  align-items: center;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(17, 17, 17, 0.18);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mit-menu-drawer__close {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
}

.mit-menu-drawer__close:hover {
  opacity: 1;
}

.mit-menu-drawer__body {
  flex: 1;
  overflow-y: auto;
}

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

.mit-menu-screen__head {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid rgba(17, 17, 17, 0.18);
}

.mit-menu-screen__back {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.mit-menu-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Строка узнаётся по снимку быстрее, чем по слову, — поэтому у разделов
   стоит предметная съёмка из настроек категории. Нет съёмки — остаётся
   ровный серый прямоугольник, чтобы строки не разъезжались. */
.mit-menu-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

.mit-menu-row__photo {
  flex: none;
  width: 44px;
  height: 58px;
  background-color: rgba(17, 17, 17, 0.06);
  background-position: center;
  background-size: cover;
}

.mit-menu-row__link {
  flex: 1;
  padding: 0.6rem 0;
  color: inherit;
  font-size: 14px;
  text-decoration: none;
}

.mit-menu-row__more {
  flex: none;
  padding: 0.6rem 0.4rem;
  border: 0;
  background: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: 0.45;
  cursor: pointer;
}

.mit-menu-row__more:hover {
  opacity: 1;
}

.mit-menu-drawer__promo {
  display: flex;
  align-items: flex-end;
  height: 8rem;
  margin: 1rem 1.25rem;
  padding: 0.75rem;
  background-color: rgba(17, 17, 17, 0.06);
  background-position: center;
  background-size: cover;
  color: inherit;
  text-decoration: none;
}

.mit-menu-drawer__promo span {
  padding: 0.4rem 0.6rem;
  background: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mit-menu-drawer__service {
  display: grid;
  gap: 0.7rem;
  padding: 1.25rem;
}

.mit-menu-drawer__service-link {
  color: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.6;
  text-decoration: none;
  text-transform: uppercase;
}

.mit-menu-drawer__service-link:hover {
  opacity: 1;
}

/* Блокировка прокрутки — на `<html>`: на iOS `overflow: hidden` у `body`
   прокрутку не останавливает. */
html.mit-menu-locked {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mit-menu-panel,
  .mit-menu-drawer,
  .mit-menu-drawer__panel {
    transition: none;
  }
}

/* Подразделы в drawer лежат под подзаголовком своего раздела — так же, как
   колонками на десктопе. Подзаголовок кликабелен: он ведёт в сам раздел. */
.mit-menu-group__title {
  display: block;
  padding: 1.25rem 1.25rem 0.6rem;
  color: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.5;
  text-decoration: none;
  text-transform: uppercase;
}

/* Строка «All Clothing» — та же строка списка, только без снимка: она про
   раздел целиком, а не про вещь. */
.mit-menu-row_all .mit-menu-row__link {
  padding-left: 0;
}