.site-header {
  background: var(--color-dark-section);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-lg);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--color-text-inverse);
  text-decoration: none;
}
.logo__mark {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
/* .logo is display:flex, so a bare "MULTIGON" text node and .logo__accent would
   otherwise become two separate flex items with the .logo gap between them —
   wrapping both in .logo__text makes "MULTIGONLAB" one flex item (icon | text),
   no gap in the middle of the word. 20.07.2026. */
.logo__text {}
.logo__accent { color: var(--color-primary-hover); }
/* Тема: без этого лого наследует общий a:hover (01-atoms.css) — оранжевый
   цвет текста + подчёркивание при наведении. По просьбе — лого не реагирует
   на hover вовсе, "LAB" всегда остаётся зелёным (.logo__accent), а
   "MULTIGON"/иконка — как в обычном состоянии (белый), без подчёркивания.
   .logo:hover (2 класса) специфичнее a:hover (1 тег+псевдокласс), поэтому
   выигрывает независимо от порядка подключения файлов. 16.07.2026. */
.logo:hover { color: var(--color-text-inverse); text-decoration: none; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav a {
  color: var(--color-text-inverse);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav a.is-active {
  color: var(--color-primary-hover);
  border-bottom-color: var(--color-primary-hover);
}
.nav a:hover:not(.is-active) { color: var(--color-accent-amber); text-decoration: underline; }

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-inverse);
  background: transparent;
  border: none;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,.08); }

/* Wishlist-иконка в шапке (16.07.2026) — .icon-btn + счётчик-бейдж поверх,
   заполняется JS из localStorage (site.js, модуль "Wishlist"). */
.header-wishlist-btn { position: relative; text-decoration: none; }
.header-wishlist-btn__count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-full);
  background: #E0554F;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ---------- Header search (тема, не в статичном референсе) ----------
   Раньше — просто иконка-заглушка без формы. Теперь настоящая <form
   role="search"> (header.php): по клику на иконку поле плавно
   "выезжает" (max-width 0 -> 220px), лупа остаётся кнопкой submit —
   пока поле закрыто, JS (site.js) перехватывает клик и просто открывает
   поле; когда поле уже открыто, клик/Enter отправляют форму как обычно
   (GET ?s=... — стандартный поиск WordPress). 16.07.2026. */
.header-search { display: flex; align-items: center; }
.header-search__form { display: flex; align-items: center; }
.header-search__input {
  width: 0;
  min-width: 0;
  padding: 0;
  margin-right: 0;
  border: none;
  outline: none;
  background: rgba(255,255,255,.08);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--fs-small);
  font-family: var(--font-body);
  opacity: 0;
  transition: width .25s ease, opacity .2s ease, padding .25s ease, margin-right .25s ease;
}
.header-search__input::placeholder { color: #9AA0AA; }
/* input[type="search"] в Chromium/WebKit рисует нативную кнопку очистки
   (крестик) системным синим цветом — такого синего в палитре сайта нет
   вообще. Перекрашиваем через SVG-маску в акцентный оранжевый (23.07.2026,
   по прямому запросу) — надёжнее, чем полагаться на accent-color, т.к.
   работает независимо от того, учитывает ли конкретная версия браузера
   accent-color для этой конкретной псевдо-кнопки.
   Крестик — маска из двух ЛИНИЙ (stroke, round linecap), а не заливка
   готовым path материал-иконки: тот вариант (закрытый полигон) на таком
   маленьком размере (14px) растеризовался неровно — один луч Xбледнел/
   пропадал в верхнем правом углу. Линии тем же stroke-style, что и
   остальные SVG-иконки сайта (header-search__btn ниже), рендерятся
   симметрично на любом размере. */
.header-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  cursor: pointer;
  background-color: var(--color-accent-amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.header-search.is-open .header-search__input {
  width: 220px;
  opacity: 1;
  padding: 8px 14px;
  margin-right: var(--space-2);
}

/* ---------- Footer (упрощённая версия — 15.07.2026) ---------- */
.site-footer {
  background: var(--color-dark-section);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  color: var(--color-text-inverse);
}
.footer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.footer-brand-simple .logo { margin-bottom: var(--space-2); }
/* Align with the logo's text start (icon width + .logo gap), not the icon's
   left edge, so "All rights reserved." / "Multigonlab.com" line up under the
   "M" of "MultigonLab" rather than under the mark icon. 20.07.2026. */
.footer-copy {
  color: #8A8F98;
  font-size: var(--fs-caption);
  margin: var(--space-2) 0 2px;
  margin-left: calc(32px + var(--space-2));
}
.footer-site-link {
  display: block;
  color: var(--color-accent-amber);
  text-decoration: none;
  font-size: var(--fs-caption);
  font-weight: 600;
  margin-left: calc(32px + var(--space-2));
}
.footer-site-link:hover { text-decoration: underline; }

.footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 auto;
}
.footer-social img { display: block; height: 24px; width: auto; }
.footer-social a { opacity: 0.85; }
.footer-social a:hover { opacity: 1; }

.footer-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 6px;
}
.footer-nav a {
  color: #B7BBC2;
  text-decoration: none;
  font-size: var(--fs-body);
}
.footer-nav a:hover { color: var(--color-accent-amber); text-decoration: underline; }
.footer-nav a.is-active { color: var(--color-text-inverse); font-weight: 700; }
.footer-nav-sep { color: #454B56; }
/* ==========================================================================
   Адаптив шапки (02.08.2026) — первый блок мобильной вёрстки.

   До этого дня в теме был ровно один @media-запрос (tokens.css, размеры
   заголовков), а макет вообще не адаптировался: при 375px страница
   расползалась до 1270px с горизонтальной прокруткой, из них .nav занимала
   466px. Здесь закрывается именно шапка.

   Брейкпоинт 900px посчитан, а не выбран на глаз: логотип (~200) + шесть
   пунктов меню (466) + две иконки (72) + зазоры + паддинги страницы дают
   примерно 820px, ниже этого шапка перестаёт помещаться в одну строку.

   Всё лежит внутри @media, десктопная шапка не затронута ни одним правилом.
   ========================================================================== */

/* Бургер: на десктопе его нет вовсе (display:none), а не «спрятан прозрачным» —
   иначе он ловил бы клики поверх меню. */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 900px) {

  /* Закрытая панель меню стоит за правым краем экрана (translateX(100%)) и
     этим сама расширяет область прокрутки — документ становится шире
     вьюпорта, хотя ни один видимый элемент из него не выходит. Здесь
     overflow-x не маскирует кривую вёрстку, а именно подрезает заведомо
     уведённый за край элемент: проверено, что после сборки сеток ни одного
     блока шире экрана на странице не осталось.
     На html И на body сразу — в Safari на iOS правило только на одном из
     них применяется непредсказуемо. */
  html, body { overflow-x: hidden; }

  .site-header {
    /* Порядок на мобильном: логотип | поиск | избранное | бургер.
       flex-order вместо перестановки в разметке — чтобы десктопный
       DOM-порядок (и порядок обхода с клавиатуры) остался прежним. */
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }
  .logo        { order: 1; margin-right: auto; font-size: var(--fs-body-lg); }
  .header-search { order: 2; }
  .header-wishlist-btn { order: 3; }
  .nav-toggle  { order: 4; }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;               /* 44px — минимальная цель для пальца */
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-inverse);
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-toggle__box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
  }
  .nav-toggle__bar {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }
  /* Открытое состояние: верхняя и нижняя полоски сходятся в крестик,
     средняя гаснет. 7px — половина расстояния между крайними полосками
     (высота 16px минус 2px толщины), то есть ровно центр коробки. */
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Меню — панель, выезжающая справа.
     position:fixed, а не absolute внутри шапки: панель должна занимать всю
     высоту экрана независимо от того, где шапка оказалась при прокрутке. */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: min(320px, 85vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--space-8) + var(--space-4)) var(--space-5) var(--space-6);
    background: var(--color-dark-section);
    box-shadow: -8px 0 32px rgba(0,0,0,.35);
    overflow-y: auto;
    /* Закрытая панель именно уезжает за край, а не display:none — иначе
       не было бы анимации, и фокус мог бы попасть внутрь скрытого меню.
       visibility снимает её с обхода и с кликов, пока она за экраном. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .26s ease, visibility 0s linear .26s;
  }
  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .26s ease, visibility 0s;
  }

  .nav a {
    padding: var(--space-4) 0;
    font-size: var(--fs-body-lg);
    border-bottom: 1px solid rgba(255,255,255,.10);
    border-left: 2px solid transparent;   /* нижняя подчёркивающая линия десктопа тут не к месту */
    padding-left: var(--space-3);
  }
  .nav a:last-child { border-bottom: none; }
  .nav a.is-active {
    border-bottom-color: rgba(255,255,255,.10);
    border-left-color: var(--color-primary-hover);
    background: rgba(255,255,255,.04);
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;                 /* ниже панели (60), выше всей страницы */
    background: rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;        /* прозрачная подложка не должна перехватывать клики */
    transition: opacity .26s ease;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
  /* Тот самый «hidden против собственного display» из истории проекта:
     .nav-backdrop (0,1,0) и UA-правило [hidden] (0,1,0) равны по
     специфичности, авторское идёт позже и побеждает — атрибут hidden сам по
     себе элемент бы не спрятал. Поэтому override явный. */
  .nav-backdrop[hidden] { display: none; }

  /* Пока меню открыто, страница под ним не должна прокручиваться. */
  body.mg-nav-open { overflow: hidden; }

  /* Футер на телефоне сведён к минимуму (02.08.2026, по прямому решению):
     остаются логотип, строка об авторских правах и адрес сайта. Иконки
     соцсетей и дублирующее нижнее меню убраны — навигация уже есть в
     бургере, а повторять её внизу на маленьком экране незачем.
     display:none, а не перенос по строкам: строка из шести ссылок с
     разделителями давала 412px при экране 375 и была последним источником
     горизонтальной прокрутки на главной. */
  .footer-row { flex-direction: column; align-items: center; text-align: center; }
  .footer-nav { display: none; }
  .footer-social { display: none; }
  /* Отступ был рассчитан на выравнивание под текстом логотипа в строку —
     в колонке по центру он только сдвигает подпись вбок. */
  .footer-copy, .footer-site-link { margin-left: 0; }
  .footer-brand-simple { display: flex; flex-direction: column; align-items: center; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .nav, .nav-backdrop, .nav-toggle__bar { transition: none; }
}