/* Набор 020: телефон (до 767px) — горизонтальный логотип (img/logo-h.png, выбирает <picture> в шапке),
   шапка ниже, поэтому адрес («Москва / Укажите адрес», его переносит под шапку js/media.js) — выше.
   Набор 022: адрес в одну строку (выбранный — не больше двух), отступы до слайдера меньше; в меню-гамбургере
   категории раскрыты сразу, меню шире, вторая колонка левее.
   Набор 025: в меню-гамбургере под категориями блюд — синяя линия цвета логотипа (#005EA9).
   Компьютер и планшет не меняются: всё только внутри @media. */
@media (max-width: 767px) {
  #app .site-header {
    padding-top: 12px;
    padding-bottom: 10px; }
  #app .site-header .site-logo {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 10px;
    line-height: 0; }
  #app .site-logo picture,
  #app .modal-menu__logo picture {
    display: block; }
  #app .site-header .site-humburger,
  #app .site-header #header_cart {
    flex-shrink: 0; }
  #app .site-header .site-logo img {
    width: 180px;
    max-width: calc(100vw - 164px);
    height: auto; }
  #app .modal-menu__logo img {
    width: 180px;
    height: auto; }
  /* адрес: значок меньше, «Москва» и адрес в строку; выбранный адрес уже начинается с города — «Москва» не повторяем */
  #app .site-main > .container > .site-map {
    margin: 2px 0 10px; }
  #app .site-main > .container > .site-map .site-map__icon {
    flex: 0 0 auto;
    margin-right: 8px;
    line-height: 0; }
  #app .site-main > .container > .site-map .site-map__icon svg {
    width: 20px;
    height: 21px; }
  #app .site-main > .container > .site-map .site-map__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    min-width: 0; }
  #app .site-main > .container > .site-map .site-map__current-address {
    max-width: none;
    min-width: 0; }
  #app .site-main > .container > .site-map .site-map__inner:has(.site-map__current-address:not(.d-none)) .site-map__city {
    display: none; }
  #app .site-main > .container > .site-map .site-map__address {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }
}
/* меню-гамбургер на телефоне: категории раскрыты сразу (js/scripts.js по нажатию на «Меню» сворачивает их и ставит
   .active — поэтому стрелка наоборот: без .active «свернуть», с .active «развернуть»); шире, вторая колонка левее */
@media (max-width: 586px) {
  #app .modal-menu {
    width: min(340px, 100vw); }
  #app .modal-menu__container {
    padding-left: 24px;
    padding-right: 20px; }
  #app .modal-menu__left ul {
    display: block; }
  #app .modal-menu__left .subtitle::after {
    transform: translateY(-50%) rotate(180deg); }
  #app .modal-menu__left .subtitle.active::after {
    transform: translateY(-50%); }
  #app #modal_menu .row > .col-7 {
    flex: 0 0 46%;
    max-width: 46%; }
  #app #modal_menu .row > .col-5 {
    flex: 0 0 54%;
    max-width: 54%;
    padding-left: 6px; }
}
/* меню-гамбургер в одну колонку (до 575px — там col-sm-6 встают друг под другом): линия под категориями блюд */
@media (max-width: 575px) {
  #app .modal-menu .modal-menu__left {
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 18px; }
  #app .modal-menu .modal-menu__left::after {
    content: "";
    position: absolute;
    left: calc(var(--bs-gutter-x, 24px) * .5);
    right: calc(var(--bs-gutter-x, 24px) * .5);
    bottom: 0;
    height: 2px;
    background: #005EA9; }
}