/* Мобильная шапка (версия B), часть «строка шапки»: зоны нажатия 44 px и фокус с клавиатуры. Полоса поиска под
   строкой — search-mobile.css. Всё под max-width: 991px — десктоп не меняется. */
@media screen and (max-width: 991px) {
  .header a:focus-visible, .header button:focus-visible { outline: 2px solid var(--et-red, #E20932); outline-offset: 2px; }
  .header__nav-burger { height: 44px; touch-action: manipulation; }
  .header__info-item--tel { width: 44px; height: 44px; padding: 0; touch-action: manipulation; }
  .header__info-item--tel::before { left: 14px; top: 14px; }
  .header__info-item--basket { min-height: 44px; }
  /* «Выход» (замок) вошедшего: зона 44x44 за счёт padding; сам замок (11x15) лежит в content-box, поэтому и background-origin, и
     background-clip — content-box: иначе в зоне вокруг замка видны соседние куски спрайта. Зона начинается сразу за корзиной и на неё
     не заходит (иначе нажатие по краю корзины выводило бы из аккаунта); замок — в 25 px от счётчика, как в теме. На 768–991 места
     хватает, строка на 14 px левее; на телефоне — ниже, через правый отступ корзины */
  .header__user-menu-item--log-out { box-sizing: content-box; width: 11px; height: 15px; padding: 14px 23px 15px 10px; margin: 0; top: 0; background-origin: content-box; background-clip: content-box; vertical-align: top; touch-action: manipulation; }
  .header__user-menu-item--profile-link { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; margin-left: 0; vertical-align: top; touch-action: manipulation; }
}
@media screen and (max-width: 767px) {
  /* «Вход» — только замок (текст скрыт темой, font-size 0): зона 44x44. Она шире самой ссылки (20 px): берёт правый отступ корзины
     (ниже) и 15 px поля шапки, место в строке и значок остаются прежними, соседи не сдвигаются. На 768–991 «Вход» —
     текст «Войти / или / зарегистрироваться»: там ни зоны, ни flex у меню (flex съедает пробелы между словами), строка как в теме */
  .header__user-menu { display: flex; align-items: center; }
  /* У корзины справа от счётчика 15 px пустого отступа: на телефоне он отдан зонам «Входа» и «Выхода» (корзина 70 → 56 px, счётчик
     на месте). Зоны начинаются за корзиной и на неё не заходят, значки и почта стоят там же, где в теме, строка не шире (иначе
     почта вошедшего уходила за край экрана на 360) */
  .header__info-item--basket { padding-right: 1px; }
  .header__user-menu-item--log-out { padding: 14px 9px 15px 24px; }
  .header__user-menu-item--login { display: inline-flex; width: 44px; height: 44px; padding: 0; margin: 0 -15px 0 5px; touch-action: manipulation; }
  .header__user-menu-item--login::before { left: 14px; top: 14px; }
  /* длинная почта вошедшего уходила за край экрана (так было и в теме): сжимается только почта, с многоточием; телефон, корзина и
     «Выход» не сжимаются (у телефона font-size 0 — без flex-shrink: 0 он сплющивался до 41 px) */
  .header__info { min-width: 0; }
  .header__info > *, .header__user-menu > * { flex-shrink: 0; }
  .header__info > .header__user-menu { flex-shrink: 1; min-width: 0; }
  .header__user-menu > .header__user-menu-item--profile-link { flex-shrink: 1; display: block; line-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* ссылка логотипа на телефоне; на 768–991 она пустая и раздувала бы шапку до 93 px (поправка ревью) */
  .logo__mob-short-link { display: inline-flex; align-items: center; min-width: 44px; height: 44px; }
  /* пустая ссылка полного логотипа (его содержимое скрыто) брала фокус без видимого кольца */
  .logo--with-mobile .logo__mob-link { display: none; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .logo--with-mobile .logo__mob-short-link { display: none; }
}
