/* Верх сайта — «вариант B, доработанный» (артборд TopNav, пункт 2).
   Файл подключается САМИМ partials/header.html, поэтому шапка одинакова на
   главной и на остальных страницах: раньше разметка и стили жили в двух местах
   и каждый раз расходились. Стили заключены в .az-hdr2 — старые правила
   site.css и инлайновые правила главной перебиваются по специфичности. */

/* Сайт светлый, своей тёмной темы нет. Samsung Internet («Тёмная тема для
   сайтов») и Chrome Android (Auto Dark Theme) перекрашивают такие страницы
   сами: 30.09.2026 владелец увидел на Galaxy чёрный фон, невидимый логотип и
   рыжие кнопки. `only light` на корне — стандартный запрет перекраски; блок
   prefers-color-scheme: dark нужен Samsung: он считает сайт «знающим о тёмной
   теме» по наличию такого правила. Файл подключён на всех страницах. */
:root { color-scheme: only light; }
@media (prefers-color-scheme: dark) { :root { color-scheme: only light; } }

.az-hdr2 { --hdr-green: #3F5239; --hdr-sand: #F6F1E7; --hdr-hair: #E8E3DA; }
/* Своя обёртка по ширине: у главной класса .container нет, там .wrap */
.az-hdr2 .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 768px) { .az-hdr2 .container { padding: 0 14px; } }

/* ── Полоса сверху: три факта пилюлями и часы работы ── */
.az-hdr2 .az-topbar { background: var(--hdr-green); }
.az-hdr2 .az-topbar > .container {
  min-height: 44px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px;
}
.az-hdr2 .az-tb__pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 13px; border-radius: 999px;
  background: rgba(255, 253, 249, 0.12); border: 1px solid rgba(255, 253, 249, 0.2);
  color: #FFFDF9; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  text-decoration: none;
}
.az-hdr2 a.az-tb__pill:hover { background: rgba(255, 253, 249, 0.2); }
.az-hdr2 .az-tb__pill--hot {
  background: #FFFDF9; color: var(--hdr-green); border-color: #FFFDF9; font-weight: 700;
}
.az-hdr2 a.az-tb__pill--hot:hover { background: #fff; }
.az-hdr2 .az-tb__pill img { width: 14px; height: 14px; display: block; }
.az-hdr2 .az-tb__plain { color: #C9D6C1; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* ── Строка с логотипом, поиском, телефоном и корзиной ── */
.az-hdr2 .az-head { background: #FFFDF9; border-bottom: 1px solid var(--hdr-hair); }
.az-hdr2 .az-head__row {
  min-height: 74px; display: flex; align-items: center; gap: 20px;
}
.az-hdr2 .az-head__logo { display: inline-flex; align-items: center; flex: none; }
.az-hdr2 .az-head__logo img { height: 44px; width: auto; display: block; }
.az-hdr2 .az-head__search {
  flex: 1; min-width: 0; height: 46px; border-radius: 12px;
  background: var(--hdr-sand); border: 1px solid transparent;
  display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px;
}
.az-hdr2 .az-head__search { position: relative; }
.az-hdr2 .az-head__search:focus-within { border-color: #5C7355; background: #fff; }
.az-hdr2 .az-head__search > svg { width: 18px; height: 18px; stroke: #6E6E64; flex: none; }
.az-hdr2 .az-head__search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 14px; color: #2B2B26;
}
.az-hdr2 .az-head__search input::placeholder { color: #6E6E64; opacity: 1; transition: opacity .25s ease; }
/* Примеры запросов сменяют друг друга (site.js::initSearchHints) — гаснут и
   загораются, а не прыгают. Искра на лупе — знак, что поиск понимает не только
   названия. Мигает редко и мягко, при «меньше движения» стоит. */
.az-hdr2 .az-head__search input.is-ph-out::placeholder { opacity: 0; }
.az-hdr2 .az-head__search > svg { overflow: visible; }
.az-hdr2 .az-head__search .az-spark {
  fill: #C8963E; transform-origin: 19.5px 5px; transform-box: view-box;
  animation: azSpark 4.5s ease-in-out infinite;
}
@keyframes azSpark {
  0%, 70%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  80% { transform: scale(1.35) rotate(45deg); opacity: .75; }
}
@media (prefers-reduced-motion: reduce) { .az-hdr2 .az-head__search .az-spark { animation: none; } }
/* «Tab» / «Вставить» сразу за примером — подставить его в поле. Прячется
   visibility, а не display: скрипт меряет её ширину, пока она не видна.
   Селектор сильнее общих правил кнопки поиска (зелёная «Найти», на телефоне
   display:none). */
.az-hdr2 .az-head__search .az-ph-take {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px;
  border: 1px solid #D8D2C4; border-bottom-width: 2px; border-radius: 6px;
  background: #fff; color: #5C7355; font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1;
  cursor: pointer; visibility: hidden; pointer-events: none; white-space: nowrap;
}
.az-hdr2 .az-head__search .az-ph-take.is-on { visibility: visible; pointer-events: auto; }
.az-hdr2 .az-head__search .az-ph-take:hover { background: #F3F6F0; }
/* На телефоне «Вставить» длиннее «Tab» и съедал «Например:» у подсказки —
   кнопку ужимаем, чтобы пометка «пример» оставалась видна. */
@media (pointer: coarse) {
  .az-hdr2 .az-head__search .az-ph-take { padding: 0 5px; font-size: 10.5px; }
}
.az-hdr2 .az-head__search button {
  flex: none; height: 34px; padding: 0 16px; border: 0; border-radius: 9px;
  background: #5C7355; color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.az-hdr2 .az-head__search button:hover { background: #4C6146; }

/* Плашка «работаем и в выходные»: точка дышит, вокруг раз в 2,8 с расходится
   тихая волна. Амплитуда маленькая — это не мигание. */
.az-hdr2 .az-wknd {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 34px; padding: 0 13px; border-radius: 999px;
  background: #E9F0E4; color: var(--hdr-green);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  animation: azWkndWave 2.8s ease-out infinite;
}
.az-hdr2 .az-wknd i {
  width: 8px; height: 8px; border-radius: 999px; background: #4C9A63;
  font-style: normal; flex: none; animation: azWkndDot 1.9s ease-in-out infinite;
}
@keyframes azWkndDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .75; } }
@keyframes azWkndWave {
  0% { box-shadow: 0 0 0 0 rgba(76, 154, 99, .38); }
  70% { box-shadow: 0 0 0 11px rgba(76, 154, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 154, 99, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .az-hdr2 .az-wknd, .az-hdr2 .az-wknd i { animation: none; }
}
/* Закрыто (site.js :: initWorkHours): зелёная пульсирующая точка обещает, что
   нам можно звонить прямо сейчас, — ночью это неправда. Гасим и точку, и волну. */
.az-hdr2 .az-wknd.is-off {
  background: #F0F0EC; color: #6E6E64; animation: none;
}
.az-hdr2 .az-wknd.is-off i { background: #B7B7AD; animation: none; }
/* «· сегодня до 22:00» site.js дописывает для старой шапки, где плашка жила и
   на телефоне. Здесь плашка на телефоне скрыта, а на компе хвост не нужен.
   Правило стояло только в site.css, которого нет на главной: там плашка
   выходила на 120 px шире, поле поиска — уже, и при переходе главная ↔
   остальные страницы плашка прыгала (владелец 24.09.2026). */
.az-hdr2 .head-wknd__today { display: none; }

.az-hdr2 .az-head__phone { text-align: right; line-height: 1.2; flex: none; }
.az-hdr2 .az-head__phone b { font-size: 18px; font-weight: 800; display: block; letter-spacing: -0.01em; }
.az-hdr2 .az-head__phone b a { color: inherit; text-decoration: none; }
.az-hdr2 .az-head__phone span { font-size: 12px; color: var(--hdr-green); font-weight: 700; }
.az-hdr2 .az-head__cart {
  width: 46px; height: 46px; border-radius: 12px; background: var(--hdr-sand);
  display: flex; align-items: center; justify-content: center; flex: none; position: relative;
}
.az-hdr2 .az-head__cart:hover { background: #EFE8DA; }
.az-hdr2 .az-head__cart .az-cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  border-radius: 999px; background: #E2795B; color: #fff;
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.az-hdr2 .az-head__cart .az-cart-count:empty { display: none; }

/* ── Меню: кнопки со значками, всё выровнено влево ── */
.az-hdr2 .cats-nav {
  min-height: 60px; display: flex; align-items: center; gap: 8px;
  justify-content: space-between; overflow: visible; border: 0; padding: 9px 0;
  flex-wrap: wrap;
}
/* Меню на всю ширину контейнера (владелец 08.09, пункт 3): пункты делят ряд
   поровну, «домой» остаётся квадратом слева. */
@media (min-width: 1101px) {
  .az-hdr2 .cats-nav > a:not(.az-nav__home), .az-hdr2 .cats-nav > .cats-nav__cat { flex: 1 1 0; min-width: 0; }
  .az-hdr2 .cats-nav > a:not(.az-nav__home), .az-hdr2 .cats-nav > .cats-nav__cat > a { justify-content: center; }
  .az-hdr2 .cats-nav > .cats-nav__cat > a { width: 100%; }
}
.az-hdr2 .cats-nav > a,
.az-hdr2 .cats-nav > .cats-nav__cat > a {
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 15px; border-radius: 11px;
  font-size: 14.5px; font-weight: 700; color: #2B2B26;
  border: 1px solid #E4DECE; background: #fff; text-decoration: none;
  opacity: 1; white-space: nowrap;
}
.az-hdr2 .cats-nav > a::after,
.az-hdr2 .cats-nav > .cats-nav__cat > a::after { content: none !important; }
.az-hdr2 .cats-nav > a:hover,
.az-hdr2 .cats-nav > .cats-nav__cat > a:hover { border-color: #5C7355; background: #F1F6EE; color: #2B2B26; }
.az-hdr2 .cats-nav > a img, .az-hdr2 .cats-nav > a svg, .az-hdr2 .cats-nav > .cats-nav__cat > a img { width: 21px; height: 21px; display: block; flex: none; }
.az-hdr2 .cats-nav > a.active, .az-hdr2 .cats-nav > .cats-nav__cat > a.active { background: var(--hdr-green); color: #fff; border-color: var(--hdr-green); }
.az-hdr2 .cats-nav > a.active img, .az-hdr2 .cats-nav > .cats-nav__cat > a.active img { filter: brightness(0) invert(1); }
.az-hdr2 .cats-nav > a.az-nav__hot { background: #FDEDE8; color: #C7522F; border-color: #F4CDBF; }
/* Активный «Быстрый подбор» — коралловый с белым значком; раньше активное
   состояние красило значок в белый на розовом, и он пропадал (пункт 4). */
.az-hdr2 .cats-nav > a.az-nav__hot:hover { background: #FBE0D7; }
.az-hdr2 .cats-nav > a.az-nav__hot:hover img, .az-hdr2 .cats-nav > a.az-nav__hot:active img { filter: none; }
.az-hdr2 .cats-nav > a.az-nav__hot.active { background: #C7522F; color: #fff; border-color: #C7522F; }
.az-hdr2 .cats-nav > a.az-nav__hot.active img { filter: brightness(0) invert(1); }
.az-hdr2 .cats-nav > a.az-nav__home { padding: 0 12px; }
.az-hdr2 .cats-nav > a.az-nav__home svg { stroke: #5C7355; }
.az-hdr2 .cats-nav__cat { position: relative; display: inline-flex; }
/* «Кровати» и «Коляски» — чипы только для телефона (см. комментарий в
   partials/header.html). На компе их прячем: ряд там полон, а категории
   раскрывает мегаменю под «Каталогом». */
.az-hdr2 .cats-nav > a.az-nav__mcat { display: none; }

/* Мобильные элементы связи в шапке — только на узких экранах */
.az-hdr2 .head-call, .az-hdr2 .head-msgr { display: none; }

@media (max-width: 1240px) {
  .az-hdr2 .az-tb__pill--wide { display: none; }
}
@media (max-width: 1100px) {
  .az-hdr2 .az-wknd { display: none; }
  .az-hdr2 .cats-nav > a, .az-hdr2 .cats-nav > .cats-nav__cat > a { font-size: 13.5px; padding: 0 12px; gap: 7px; }
}
@media (max-width: 980px) {
  .az-hdr2 .az-head__phone { display: none; }
  .az-hdr2 .az-topbar > .container { justify-content: center; }
  .az-hdr2 .az-tb__pill:not(.az-tb__pill--hot), .az-hdr2 .az-tb__plain { display: none; }
}
@media (max-width: 768px) {
  /* Телефон: логотип, связь и корзина в один ряд, поиск строкой ниже,
     меню — лентой чипов (артборд TopNav, мобильная шапка). */
  .az-hdr2 .az-head__row { min-height: 56px; gap: 8px; flex-wrap: wrap; padding: 8px 0; }
  .az-hdr2 .az-head__logo img { height: 34px; }
  .az-hdr2 .az-head__search { order: 10; flex: 1 0 100%; height: 42px; }
  .az-hdr2 .az-head__search button { display: none; }
  .az-hdr2 .head-call, .az-hdr2 .head-msgr { display: inline-flex; align-items: center; gap: 6px; }
  /* Связь стоит ПО ЦЕНТРУ свободного места между логотипом и корзиной
     (владелец 17.09.2026). Одного margin-left:auto мало: он прижимал бы группу
     вправо к корзине. Два auto по краям делят свободное место поровну. */
  .az-hdr2 .head-call { margin-left: auto; }
  .az-hdr2 .head-msgr { margin-right: auto; }
  .az-hdr2 .head-call, .az-hdr2 .head-msgr a {
    width: 36px; height: 36px; border-radius: 10px; background: var(--hdr-sand);
    display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--hdr-green);
  }
  .az-hdr2 .head-msgr a svg { width: 18px; height: 18px; fill: var(--hdr-green); }
  .az-hdr2 .az-head__cart { width: 40px; height: 40px; }
  .az-hdr2 .cats-nav {
    min-height: 0; padding: 0 0 10px; gap: 7px;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .az-hdr2 .cats-nav::-webkit-scrollbar { display: none; }
  .az-hdr2 .cats-nav > a, .az-hdr2 .cats-nav > .cats-nav__cat > a { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
  .az-hdr2 .cats-nav > a img, .az-hdr2 .cats-nav > a svg, .az-hdr2 .cats-nav > .cats-nav__cat > a img { width: 18px; height: 18px; }
}
@media (max-width: 430px) {
  .az-hdr2 .az-head__logo img { height: 30px; }
  .az-hdr2 .head-call, .az-hdr2 .head-msgr a { width: 32px; height: 32px; }
  .az-hdr2 .az-head__cart { width: 36px; height: 36px; }
}

/* Выпадающий каталог внутри меню оформляется стилями страницы —
   кнопочный вид на него не распространяется (селекторы с «>»). */

/* ── Полоса сверху, шестой круг 09.09: слева «Доставка по всей России», СФР и
   «В наличии» (блик проходит раз в 5,4 с), правило бесплатной доставки —
   справа; часы работы — под номером телефона ── */
@media (min-width: 981px) {
  /* владелец 09.09: распределить равномерно по ширине полосы */
  .az-hdr2 .az-topbar > .container { justify-content: space-between; gap: 10px; }
}
.az-hdr2 .az-tb__pill svg { width: 15px; height: 15px; display: block; flex: none; }
.az-hdr2 .az-tb__pill--live {
  position: relative; overflow: hidden; isolation: isolate;
  background: rgba(255, 253, 249, 0.17); border-color: rgba(255, 253, 249, 0.45);
}
.az-hdr2 a.az-tb__pill--live:hover { background: rgba(255, 253, 249, 0.26); }
.az-hdr2 .az-tb__pill--live::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: 0; width: 42%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-170%) skewX(-14deg); pointer-events: none;
  animation: azTbShine 5.4s ease-in-out infinite;
}
@keyframes azTbShine {
  0% { transform: translateX(-170%) skewX(-14deg); }
  24% { transform: translateX(360%) skewX(-14deg); }
  100% { transform: translateX(360%) skewX(-14deg); }
}
@media (prefers-reduced-motion: reduce) { .az-hdr2 .az-tb__pill--live::after { display: none; } }
.az-hdr2 .az-head__phone span { display: block; white-space: nowrap; }

/* ── Телефон: сообщения полосы крутятся по одному (assets/js/topbar.js).
   Без JS остаётся прежнее поведение — видна пилюля СФР. ── */
@media (max-width: 980px) {
  .az-hdr2 .az-topbar > .container.is-rot { justify-content: center; }
  .az-hdr2 .az-topbar > .container.is-rot > * { display: none; }
  .az-hdr2 .az-topbar > .container.is-rot > .is-on {
    display: inline-flex; max-width: 100%; opacity: 1; transition: opacity .32s ease;
  }
  .az-hdr2 .az-topbar > .container.is-rot > .is-on.is-fade { opacity: 0; }
  .az-hdr2 .az-tb__pill { font-size: 12px; padding: 0 11px; max-width: 100%; overflow: hidden; }
  .az-hdr2 .az-tb__pill > span { overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .az-hdr2 .az-topbar > .container.is-rot > .is-on { transition: none; }
}

/* Бургер раскрывает меню колонкой (правила .cats-nav.is-open в site.css).
   Они писались под старую шапку, где контейнер был с отступом 24 px, и
   тянут margin: 0 -24px; у новой шапки на телефоне отступ 14 px — из-за
   этого раскрытое меню уезжало за правый край экрана (385 px при 375). */
@media (max-width: 768px) {
  .az-hdr2 .cats-nav.is-open { padding: 4px 14px 10px; margin: 0 -14px; overflow-x: visible; }
}

/* ── Телефон, девятый круг 09.09 (замечания владельца по бою) ──────────── */
@media (max-width: 768px) {
  /* Корзина прижата к правому краю, рядом с бургером (владелец 18.09.2026).
     Раньше у неё стоял margin-right: auto, и свободное место ряда делилось на
     три части — значок висел посреди пустоты: замер на планшете дал 123 px до
     бургера при 744 и 154 px до края при 768, где бургера нет. Своих auto-полей
     у корзины больше нет; по центру связь держат два auto самой группы (выше),
     а корзина с бургером стоят у правого края. На телефонах уже 420 px так было
     и раньше — там margin-right обнулялся отдельным правилом. */

  /* Раскрытое бургером меню. Пункты были разной ширины: у «Каталога» ссылка
     лежит внутри span и сжималась по тексту, остальные тянулись на всю строку;
     «Домой» стоял пустой плашкой с одним значком. */
  .az-hdr2 .cats-nav.is-open { gap: 8px; padding: 8px 14px 12px; margin: 0 -14px; }
  .az-hdr2 .cats-nav.is-open > a,
  .az-hdr2 .cats-nav.is-open > .cats-nav__cat,
  .az-hdr2 .cats-nav.is-open > .cats-nav__cat > a { width: 100%; }
  .az-hdr2 .cats-nav.is-open > a,
  .az-hdr2 .cats-nav.is-open > .cats-nav__cat > a {
    height: 46px; min-height: 46px; padding: 0 14px; gap: 10px;
    justify-content: flex-start; border: 1px solid #E4DECE; border-radius: 11px;
    font-size: 14.5px;
  }
  .az-hdr2 .cats-nav.is-open .az-nav__home span { display: inline; }

  /* Пара «доставка по России + в наличии» должна уместиться в строку полосы.
     Слово «товаров» тут прятали 09.09: вдвоём пилюли переваливали за край на
     пару пикселей и число обрезалось многоточием. Но на телефоне из-за этого
     читалось «546 в наличии» — владелец 16.09 попросил ту же формулировку, что
     на широком экране. Шрифт пары мельче на полпункта, и пара целиком влезает
     с 348 px (замер на бою: при 360 остаётся 12 px, при 375 — 27 px).
     Наличие больше не сжимается (flex: 0 0 auto): если на чужом устройстве
     шрифт окажется шире, многоточие достанется доставке, а число уцелеет.
     Ниже 360 px слово прячем по-прежнему — там не помещается ничто. */
  .az-hdr2 .az-topbar > .container.is-rot { gap: 6px; }
  .az-hdr2 .az-topbar > .container.is-rot > .az-tb__pill--dlv.is-on,
  .az-hdr2 .az-topbar > .container.is-rot > .az-tb__pill--live.is-on {
    font-size: 11px; padding: 0 8px; gap: 5px; min-width: 0; flex: 0 1 auto;
  }
  .az-hdr2 .az-topbar > .container.is-rot > .az-tb__pill--live.is-on { flex: 0 0 auto; }
}


/* Лента чипов: край перестаёт выглядеть обрывом (14.09).
   Полоса прокрутки у .cats-nav скрыта, поэтому обрезанный край читался как сломанная
   вёрстка — с iPhone замерено 803 px содержимого в 402 px окна, 4 пункта из 7 целиком
   за экраном. Маска растворяет правый край: видно, что лента едет дальше. scroll-snap
   доводит прокрутку до границы чипа, чтобы слово не резалось посередине.
   Раскрытое меню (.is-open) не трогаем — там overflow: visible и своя раскладка. */
@media (max-width: 768px) {
  .az-hdr2 .cats-nav:not(.is-open) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 2px;
  }
  .az-hdr2 .cats-nav:not(.is-open) > a,
  .az-hdr2 .cats-nav:not(.is-open) > .cats-nav__cat { scroll-snap-align: start; }
}

/* Полоса сверху не дёргается на старте (14.09).
   До инициализации topbar.js была видна длинная пилюля СФР — на телефоне она вставала
   в две строки (полоса 72 px), а скрипт тут же показывал первым слотом пару коротких
   «Доставка» + «В наличии» (44 px). Страница подпрыгивала на 28 px при каждом заходе,
   на всех 23 страницах замера. Приводим начальное состояние к первому слоту ротации:
   те же две пилюли и те же размеры, что выставит скрипт — менять ему нечего. */
@media (max-width: 980px) {
  .az-hdr2 .az-topbar > .container:not(.is-rot) { justify-content: center; }
  .az-hdr2 .az-topbar > .container:not(.is-rot) > * { display: none; }
  .az-hdr2 .az-topbar > .container:not(.is-rot) > .az-tb__pill--dlv,
  .az-hdr2 .az-topbar > .container:not(.is-rot) > .az-tb__pill--live {
    display: inline-flex; max-width: 100%;
  }
}
@media (max-width: 768px) {
  /* Близнец правил выше: начальное состояние обязано совпадать с первым слотом
     ротации до пикселя, иначе полоса подпрыгивает в момент старта скрипта. */
  .az-hdr2 .az-topbar > .container:not(.is-rot) { gap: 6px; }
  .az-hdr2 .az-topbar > .container:not(.is-rot) > .az-tb__pill--dlv,
  .az-hdr2 .az-topbar > .container:not(.is-rot) > .az-tb__pill--live {
    font-size: 11px; padding: 0 8px; gap: 5px; min-width: 0; flex: 0 1 auto;
  }
  .az-hdr2 .az-topbar > .container:not(.is-rot) > .az-tb__pill--live { flex: 0 0 auto; }
}

/* Совсем узкие экраны (старые iPhone SE, 320 px): пара со словом «товаров» не
   влезает ни при каком шрифте — слово убираем, остаётся «546 в наличии». */
@media (max-width: 359px) {
  .az-hdr2 .az-topbar > .container.is-rot > .az-tb__pill--live.is-on .az-tb__w,
  .az-hdr2 .az-topbar > .container:not(.is-rot) > .az-tb__pill--live .az-tb__w { display: none; }
}

/* Лента навигации: все пункты видны, два ряда (решение владельца 14.09).
   Была горизонтальная прокрутка, прятавшая 49 % пунктов (906 px содержимого в 412 px
   окна, 4 чипа из 7 за краем). Теперь переносим по строкам и показываем всё.
   Чтобы уложиться в ДВА ряда, а не в три, чипы компактнее: без иконок, мельче шрифт
   и отступы. Маска и scroll-snap отключены — обрезанного края больше нет.
   Раскрытое бургер-меню (.is-open) живёт по своим правилам, его не трогаем. */
@media (max-width: 768px) {
  .az-hdr2 .cats-nav:not(.is-open) {
    flex-wrap: wrap;
    overflow-x: visible;
    -webkit-mask-image: none;
            mask-image: none;
    scroll-snap-type: none;
    justify-content: flex-start;
    gap: 6px;
  }
  .az-hdr2 .cats-nav:not(.is-open) > a img,
  .az-hdr2 .cats-nav:not(.is-open) > a svg,
  .az-hdr2 .cats-nav:not(.is-open) > .cats-nav__cat > a img,
  .az-hdr2 .cats-nav:not(.is-open) > .cats-nav__cat > a svg { display: none; }
  /* Ряды заполняются целиком (владелец 17.09.2026: «панель кривая, всё в
     разнобой»). Перенос по ширине оставлял второй ряд полупустым — 137 px из
     384 на Fold 7 и 3+4 на iPhone. flex-grow растягивает чипы по ширине СВОЕЙ
     строки, и оба ряда встают вровень. Сжатие запрещено (flex-shrink 0): подписи
     неразрывные, ужатый чип обрезал бы слово, а перенос строк flex сделает сам. */
  .az-hdr2 .cats-nav:not(.is-open) > a,
  .az-hdr2 .cats-nav:not(.is-open) > .cats-nav__cat { flex: 1 0 auto; }
  /* Подпись — строго по центру кнопки. Чипы растянуты по ширине строки, а
     текст в них по умолчанию прижат к левому краю: у широкой кнопки справа
     оставалась пустота, и ряд выглядел неаккуратно (владелец 17.09.2026). */
  .az-hdr2 .cats-nav:not(.is-open) > a,
  .az-hdr2 .cats-nav:not(.is-open) > .cats-nav__cat > a { justify-content: center; }
  .az-hdr2 .cats-nav:not(.is-open) > .cats-nav__cat > a { width: 100%; }
  /* «На главную» прячем на ВСЕХ телефонах, а не только уже 420 px: чип дублирует
     логотип, а из-за того, что он есть на одних страницах и нет на других, меню
     переносилось по-разному и выглядело сломанным. Заодно это место для двух
     категорий ниже. */
  .az-hdr2 .cats-nav:not(.is-open) > a.az-nav__home { display: none; }
  .az-hdr2 .cats-nav > a.az-nav__mcat { display: inline-flex; }
  .az-hdr2 .cats-nav:not(.is-open) > a,
  .az-hdr2 .cats-nav:not(.is-open) > .cats-nav__cat > a {
    height: 32px; padding: 0 10px; font-size: 12.5px; gap: 0;
  }
}

/* Узкие телефоны: лента в два ряда, а не в три (14.09).
   На 360 px семи пунктам не хватало полутора десятков пикселей: 677 px чипов против
   664 доступных (два ряда по 332). Верх страницы раздувался до 309 px — сорок процентов
   экрана. Ужимаем отступы и шрифт ещё на шаг; ниже 420 px иконок в чипах всё равно нет. */
@media (max-width: 420px) {
  .az-hdr2 .cats-nav:not(.is-open) { gap: 5px; }
  .az-hdr2 .cats-nav:not(.is-open) > a,
  .az-hdr2 .cats-nav:not(.is-open) > .cats-nav__cat > a {
    height: 30px; padding: 0 8px; font-size: 12px;
  }
}

/* Узкие телефоны: на главную ведёт логотип, а не отдельный чип (14.09).
   Семи пунктам на 360 px не хватало пары пикселей, «Контакты» срывались на третий ряд,
   и верх страницы занимал 301 px из 800 — тридцать восемь процентов экрана. Убираем
   чип «На главную»: он дублирует логотип в той же шапке. Остальные шесть встают в два
   ряда. На 440 px и шире все семь помещаются в два ряда и этот блок не действует. */
/* Ниже 400 px восьми чипам нужен третий ряд: шапка вырастает до 252 px из 800.
   Два ряда тут дороже двух ссылок (решение 14.09 — верх страницы не должен
   съедать треть экрана), поэтому на самых узких телефонах категорий в меню нет.
   Пустоты во втором ряду там всё равно не будет: чипы растягиваются по строке. */
@media (max-width: 399px) {
  .az-hdr2 .cats-nav > a.az-nav__mcat { display: none; }
}
/* Не влезли в два ряда на любой ширине — прячет topbar.js::fitMcat (стенд №37) */
.az-hdr2 .cats-nav.no-mcat:not(.is-open) > a.az-nav__mcat { display: none; }

@media (max-width: 420px) {
  .az-hdr2 .cats-nav:not(.is-open) > a.az-nav__home { display: none; }
  .az-hdr2 .cats-nav:not(.is-open) { gap: 4px; }
  .az-hdr2 .cats-nav:not(.is-open) > a,
  .az-hdr2 .cats-nav:not(.is-open) > .cats-nav__cat > a { padding: 0 7px; }
}

/* Узкие телефоны: логотип, связь, корзина и бургер — в один ряд (14.09).
   Ряду требовалось 412 px (логотип 100 + звонок 36 + мессенджеры 120 + корзина 40 +
   бургер 44 + зазоры 32 + авторазгон 40), доступно 332 — бургер срывался на отдельную
   строку, а ряд иконок обрезался справа. Ужимаем на шаг и убираем авторазгон: 296 из 332. */
@media (max-width: 420px) {
  .az-hdr2 .az-head__row { gap: 5px; }
  .az-hdr2 .az-head__logo img { height: 27px; }
  .az-hdr2 .head-msgr a { width: 30px; height: 30px; margin-left: 0; margin-right: 0; }
  .az-hdr2 .head-call { width: 30px; height: 30px; }
  .az-hdr2 .head-msgr { gap: 5px; }
  /* Корзину вправо двигают auto-поля самой группы связи (см. выше), своего
     margin-left:auto ей больше не нужно — он съедал всё свободное место и
     прибивал связь к логотипу. Обнулять margin-right тут тоже больше незачем:
     с 18.09.2026 корзина стоит у правого края на всей ширине до 768 px. */
  .az-hdr2 .az-head__cart { width: 34px; height: 34px; }
  .az-hdr2 .burger { width: 36px; }
}

/* Старые iPhone SE, 320 px: шапка в ту же высоту, что на 360–390 (30.09.2026).
   Ряду выше нужно 299 px из 292 — бургер срывался на свою строку (ряд 138 px
   вместо 99), а меню вставало в три ряда. Полная шапка выходила 291 px — больше
   половины экрана 568, сжатая 138. Кнопка «В корзину», прокрученная к верху
   экрана, оказывалась под шапкой: автотест Playwright на 320 px не мог по ней
   кликнуть (перехватывала .cats-nav). Ужимаем зазоры, логотип и бургер на шаг —
   ряд 285 px, — а чипы меню на полшага: два ряда. Итог — 217 / 98 px, как на
   360. Поля контейнера не трогаем: раскрытое меню держится за них (margin −14). */
@media (max-width: 359px) {
  .az-hdr2 .az-head__row { gap: 4px; }
  .az-hdr2 .az-head__logo img { height: 25px; }
  .az-hdr2 .head-msgr { gap: 4px; }
  .az-hdr2 .burger { width: 34px; }
  .az-hdr2 .cats-nav:not(.is-open) > a,
  .az-hdr2 .cats-nav:not(.is-open) > .cats-nav__cat > a { padding: 0 5px; font-size: 11.5px; }
}

/* Подсказка видов ТСР под поиском шапки. Правила жили только в site.css, а
   главная его не подключает — там «Вид ТСР по вашему коду» выпадал голым
   текстом (владелец 23.09.2026, после подстановки 07-01-01 по Tab). Шапка
   везёт свой header.css на каждую страницу, поэтому и оформление её
   подсказки — здесь. Значения те же, что в site.css. */
.az-hdr2 .search-dd .tsr-sugg { border-top: 0; }
.az-hdr2 .search-dd .tsr-sugg__head {
  padding: .45rem .85rem .2rem; font-size: .72rem; letter-spacing: .3px;
  text-transform: uppercase; color: #6E6E64;
}
.az-hdr2 .search-dd .tsr-sugg__item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .5rem .85rem; background: none; border: 0; border-radius: 0; cursor: pointer;
  text-align: left; font-size: .88rem; color: inherit; text-decoration: none;
}
.az-hdr2 .search-dd .tsr-sugg__item:hover, .az-hdr2 .search-dd .tsr-sugg__item:focus { background: rgba(95,163,99,.1); }
.az-hdr2 .search-dd .tsr-sugg__code {
  flex-shrink: 0; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #fff; background: #6b9e87; border-radius: 4px; padding: 1px 6px; font-size: .8rem;
}
.az-hdr2 .search-dd .tsr-sugg__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-hdr2 .search-dd .tsr-sugg__count { flex-shrink: 0; color: #6E6E64; font-size: .78rem; }

/* ── Телефон: шапка сжимается при прокрутке вниз (Замечания 20, п. 1.1;
   решение владельца 24.09.2026, вариант А) ──
   Полная липкая шапка — 218 px, треть экрана. Прокрутили вниз — полоса сверху
   и меню уходят, остаются логотип, связь, корзина и поиск (~99 px); вверх или
   у верха страницы — снова полная. Первый экран и решение 14.09 «меню в два
   ряда, видно всё» не меняются. Высота шапки в потоке постоянна: шапку
   сдвигаем (transform) и обрезаем (clip-path), поэтому страница не прыгает.
   Классы и размеры (--az-cut-top, --az-cut-bottom, --az-cmp-h) ставит
   assets/js/topbar.js. Без JS шапка прежняя.
   С 30.09.2026 то же на планшете и раскрытом Fold (до 1100 px): там полная
   шапка — 229 px, на Fold 7 (984×1092) четверть экрана; сжатая — строка с
   логотипом и поиском (~75 px). Порог тот же, что у matchMedia в topbar.js. */
@media (max-width: 1100px) {
  .az-sticky.az-hdr2.az-cmp-ready {
    transition: transform .22s ease, clip-path .22s ease, -webkit-clip-path .22s ease;
  }
  /* Нулевая обрезка — стартовая точка перехода. У полной шапки обрезки нет
     вовсе: подсказки поиска выпадают ниже её края. */
  .az-sticky.az-hdr2.az-cmp-clip { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
  .az-sticky.az-hdr2.is-compact {
    transform: translateY(calc(-1 * var(--az-cut-top, 44px)));
    -webkit-clip-path: inset(var(--az-cut-top, 44px) 0 var(--az-cut-bottom, 75px) 0);
            clip-path: inset(var(--az-cut-top, 44px) 0 var(--az-cut-bottom, 75px) 0);
  }
  /* Край сжатой шапки — та же волосяная линия, что под полной */
  .az-sticky.az-hdr2.is-compact .az-head {
    background: linear-gradient(var(--hdr-hair), var(--hdr-hair)) 0 calc(var(--az-cmp-h, 99px) - 1px) / 100% 1px no-repeat, #FFFDF9;
  }
  /* Плавно вместе со строкой фильтров каталога (стенд №47, 28.09.2026).
     Прогресс сжатия — одно число --az-hdr-p на <html>: topbar.js регистрирует
     его как <number> (класс az-hdrp), сжатие — класс az-hdr-cmp, переход идёт
     по самому числу. Сдвиг и обрезка шапки здесь и видимый край --az-hdr-edge
     (topbar.js; top липкой строки, components.css .mbar) считаются от него в
     одном пересчёте стилей — строка не отстаёт от шапки ни на кадр, а при
     развороте на полпути оба возвращаются по одному числу. Прежние переходы
     по transform/clip-path выключены; без registerProperty работают они. */
  html.az-hdrp .az-sticky.az-hdr2.az-cmp-ready { transition: none; }
  html.az-hdrp .az-sticky.az-hdr2.az-cmp-clip {
    transform: translateY(calc(-1 * var(--az-cut-top, 44px) * var(--az-hdr-p, 0)));
    -webkit-clip-path: inset(calc(var(--az-cut-top, 44px) * var(--az-hdr-p, 0)) 0 calc(var(--az-cut-bottom, 75px) * var(--az-hdr-p, 0)) 0);
            clip-path: inset(calc(var(--az-cut-top, 44px) * var(--az-hdr-p, 0)) 0 calc(var(--az-cut-bottom, 75px) * var(--az-hdr-p, 0)) 0);
  }
  html.az-hdrp.az-cmp-ready { transition: --az-hdr-p .22s ease; }
  html.az-hdrp.az-hdr-cmp { --az-hdr-p: 1; }
}
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  .az-sticky.az-hdr2.az-cmp-ready { transition: none; }
  html.az-hdrp.az-cmp-ready { transition: none; }
}

/* ── Якоря — под нижний край шапки, на любой ширине ──
   Видимую высоту липкой шапки topbar.js кладёт в --az-hdr-vis и ставит на
   <html> класс az-hdr-on: на ПК это полная высота (179 px при 1280, шапка не
   сжимается), на телефоне — полная или сжатая. До 25.09.2026 правило жило
   только в телефонном блоке, и на ПК /contacts#requisites уводил заголовок
   раздела под шапку. Страницы меряют шапку сами (articles.js и glossary.js →
   --az-sticky-h, sfr-certificates → --head-h) — полную и не всегда вовремя;
   !important перебивает их инлайновое значение, код страниц не трогаем:
   якоря и липкие ленты разделов встают под видимый край шапки.
   az-cmp-on — класс прежнего topbar.js: пока браузер держит его в кеше,
   телефон работает как раньше. */
html.az-hdr-on,
html.az-cmp-on {
  --az-sticky-h: var(--az-hdr-vis) !important;
  --head-h: var(--az-hdr-vis) !important;
}
/* Якорь без своего отступа (на страницах без components.css его нет вовсе)
   не уходит под шапку. Нулевая специфичность: свои правила страниц сильнее. */
:where(html.az-hdr-on [id]:target, html.az-cmp-on [id]:target) { scroll-margin-top: calc(var(--az-hdr-vis) + 14px); }
/* Кнопки покупки на карточке, прокрученные к себе (фокус с клавиатуры,
   scrollIntoView, автотест), встают под видимый край шапки и над cookie-баннером
   (его высоту site.js кладёт в --az-cookiebar-h, 0 — когда баннера нет).
   30.09.2026: Playwright на iPhone SE (320×568) не кликал «В корзину» — при
   выравнивании «по верху» кнопку закрывала шапка, «по низу» — баннер cookie.
   Только блок покупки: у кнопок во внутренних прокрутках (списки подсказок)
   такой отступ уводил бы список. Нулевая специфичность — свои правила сильнее. */
:where(html.az-hdr-on, html.az-cmp-on) :where(.product-actions) :where(button, a[href]) {
  scroll-margin-top: calc(var(--az-hdr-vis, 0px) + 12px);
  scroll-margin-bottom: calc(var(--az-cookiebar-h, 0px) + 12px);
}

/* ── Телефон: шкала заголовков (Замечания 20, п. 1.1, вариант Б; владелец
   24.09.2026: «надо делать шрифт меньше») ──
   h1 информационных страниц на телефоне был 34 px — нижняя граница clamp() из
   site.css, рассчитанная на планшет, и самый крупный заголовок на сайте.
   Одно правило на все инфо-страницы: h1 34 → 24, лид 16–17 → 15, крошки
   14 → 12,5, h1 каталога 28 → 22. Карточка (20) и подбор (22–24) уже в норме.
   Правила здесь, а не в site.css: header.css приходит на каждую страницу. */
@media (max-width: 480px) {
  .info-hero { padding-top: 14px; }
  .breadcrumbs { font-size: 12.5px; margin-bottom: 8px; }
  .info-page__title { font-size: 24px; line-height: 1.15; letter-spacing: -.015em; }
  .dlv-hero .info-page__title { margin-top: 2px; }
  .dlv-hero__sub, .info-page__subtitle { font-size: 15px; line-height: 1.5; margin-top: 8px; }
  body:not(.catalog-landing) .catalog-header h1 { font-size: 22px; line-height: 1.15; }
  /* Баннер-карусель «Доставки», «Оплаты», «Контактов» и «Сертификатов СФР» */
  .dlv-banner { margin-top: 14px; }
  .dlv-banner__slide { padding: 12px 14px; }
  .dlv-banner__t { font-size: 12.5px; }
}

/* ── Значки меню — тонкий контур (владелец 27.09.2026: «более схематичные,
   аккуратные: жирного у нас нигде нет, а значки закрашенные; при нажатии
   становятся белыми — выглядит отвратительно»). Контур currentColor: у
   активной кнопки — белая линия, а не залитый белый силуэт. Восьмой пункт —
   «О нас» (partials/header.html). ── */
.az-hdr2 .cats-nav svg.nav-i { width: 20px; height: 20px; display: block; flex: none; color: #5C7355; }
.az-hdr2 .cats-nav > a.az-nav__home svg.nav-i { stroke: currentColor; }
.az-hdr2 .cats-nav > a.active svg.nav-i,
.az-hdr2 .cats-nav > .cats-nav__cat > a.active svg.nav-i { color: #fff; }
.az-hdr2 .cats-nav > a.az-nav__hot svg.nav-i { color: #C7522F; }
.az-hdr2 .cats-nav > a.az-nav__hot.active svg.nav-i { color: #fff; }
/* Восемь пунктов в ряд — плотнее (контейнер один на все ширины компьютера) */
@media (min-width: 1101px) {
  .az-hdr2 .cats-nav { gap: 6px; }
  .az-hdr2 .cats-nav > a, .az-hdr2 .cats-nav > .cats-nav__cat > a { padding: 0 10px; gap: 7px; font-size: 13.5px; }
}
@media (min-width: 1101px) and (max-width: 1240px) {
  .az-hdr2 .cats-nav > a:not(.az-nav__home) svg.nav-i,
  .az-hdr2 .cats-nav > .cats-nav__cat > a svg.nav-i { display: none; }
}

/* ── Планшет и раскрытый Galaxy Z Fold: 769–1100 px (владелец 30.09.2026:
   «сайт плохо адаптирован под планшеты и телефоны типа Fold 7») ──
   Восемь пунктов меню в ряд здесь не помещаются, а flex-перенос со
   space-between растягивал второй ряд: «Оплата … О нас … Контакты» на iPad
   820 px, одинокие «Контакты» на Fold 7 (984 и 1092 px). Сетка 4×2: клетки
   равные, пункты по центру, высота меню постоянна на всей полосе ширин.
   Пункты — 44 px, шрифт 14 px: планшетом чаще пользуются пожилые.
   Остальное для этой полосы — assets/css/tablet.css. */
@media (min-width: 769px) and (max-width: 1100px) {
  .az-hdr2 .cats-nav {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px; min-height: 0; padding: 10px 0 12px;
  }
  .az-hdr2 .cats-nav > a, .az-hdr2 .cats-nav > .cats-nav__cat { min-width: 0; }
  .az-hdr2 .cats-nav > .cats-nav__cat > a { width: 100%; }
  .az-hdr2 .cats-nav > a, .az-hdr2 .cats-nav > .cats-nav__cat > a {
    justify-content: center; height: 44px; padding: 0 10px; gap: 8px; font-size: 14px;
  }
  .az-hdr2 .cats-nav > a.az-nav__home { padding: 0 10px; }
  /* Поле поиска — 16 px: читается с планшета, и iPad не приближает страницу
     при касании поля (он делает это для шрифта мельче 16 px). */
  .az-hdr2 .az-head__search input { font-size: 16px; }
}

/* Карточка товара на телефоне — без лишней шапки (владелец 30.09.2026, по образцу
   Ozon: фото, цена и кнопка на первом экране). Полоса акций, поиск и меню-чипы
   скрыты; логотип, связь, корзина и бургер остаются. Корзина — то же в cart.css. */
@media (max-width: 767px) {
  body.page-product .az-topbar,
  body.page-product #siteHeader .cats-nav,
  body.page-product #siteHeader .az-head__search { display: none !important; }
}