/* Мобильная шапка и меню (до 1022px): логотип слева, бургер справа, меню выезжает справа,
   аккуратная кнопка закрытия. Открытие/закрытие — app.js шаблона (класс .opened). */
@media (max-width: 1022px) {
  .app-header__top-right { justify-content: space-between; }
  .app-header__logo--mobile { order: 1; flex: 1 1 auto; text-align: left; margin: 0; }
  .app-header__burger { order: 2; flex: 0 0 auto; display: flex; justify-content: flex-end; }
  .app-header__burger-button { margin-right: -5px; }

  .mobile-box__inner {
    width: min(320px, 86vw); margin-left: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
    box-shadow: -12px 0 32px rgba(0, 0, 0, .12);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .mobile-box.opened .mobile-box__inner { transform: translateX(0); }
  .mobile-box__head { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }

  /* кнопка закрытия: мягкий круг без рамки, тонкий крестик */
  .mobile-box__close {
    position: static; width: 36px; height: 36px; flex: 0 0 36px;
    border: 0; border-radius: 50%; background: #f1f3f2; cursor: pointer; position: relative;
    transition: background-color .2s ease;
  }
  .mobile-box__close:hover, .mobile-box__close:focus-visible { background: #e3e8e5; outline: none; }
  .mobile-box__close::before, .mobile-box__close::after {
    width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: #272727; border-radius: 1px;
  }
}
@media (prefers-reduced-motion: reduce) { .mobile-box__inner { transition: none; } }

/* переключатель региона под телефоном в меню — по левому краю, как телефон */
@media (max-width: 1022px) {
  .mobile-box .mobile-box__phone > div { align-items: flex-start; }
  /* в шаблоне у кнопки float: right (так задумано для шапки на десктопе) — в меню отменяем */
  .mobile-box .region-switcher__current { float: none; }
}