/* Стили универсальной витрины точки. /pages/storefront/style.css */

.resto { max-width: 1100px; margin: 0 auto; padding: 28px 28px 80px; }

/* --- Шапка точки --- */
.resto__header {
    padding: 22px 24px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 20px; margin-bottom: 20px;
}
.resto__top { display: flex; align-items: center; gap: 20px; }
.resto__logo {
    position: relative; overflow: hidden;
    width: 88px; height: 88px; flex-shrink: 0; display: flex;
    align-items: center; justify-content: center; color: var(--ink);
    background: var(--wash); border-radius: 20px;
}
/* Эмодзи-логотип для направлений без своего SVG (аптека/цветы/детские/электр.). */
.resto__logo-emoji { font-size: 40px; line-height: 1; }
/* Фото точки поверх иконки-подложки (object-fit обрезает по квадрату логотипа) */
.resto__logo-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: inherit;
}
.resto__title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.resto__name { font-size: 30px; letter-spacing: -0.02em; color: var(--ink); }
.resto__status {
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--ink);
}
.resto__status.is-open { background: var(--flash-add); color: var(--surface); border-color: var(--flash-add); }
.resto__status.is-closed { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
/* Карточка продавца (исполнителя): иконка «i» + раскрывающийся попап (details). */
.seller { position: relative; }
.seller__btn {
    list-style: none; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    color: var(--ink-soft); border: 1.5px solid var(--line); background: var(--surface);
    transition: color 0.2s var(--ease-haptic), border-color 0.2s var(--ease-haptic);
}
.seller__btn::-webkit-details-marker { display: none; }
.seller__btn:hover { color: var(--ink); border-color: #d8d3c9; }
.seller[open] .seller__btn { color: var(--ink); border-color: var(--ink); }
.seller__card {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 30;
    width: min(340px, 86vw); padding: 18px 20px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.28);
}
.seller__title {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: 12px;
}
.seller__facts { display: grid; gap: 12px; }
.seller__facts dt { font-size: 12px; color: var(--ink-soft); margin-bottom: 2px; }
.seller__facts dd { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; }
/* Блоки внутри попапа «i» (часы работы + реквизиты) с тонким разделителем. */
.seller__block + .seller__block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.seller__hours { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.seller__hours-sub { font-size: 12px; font-weight: 400; color: var(--ink-soft); }

.resto__cuisine { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.resto__address {
    margin-top: 8px; font-size: 14px; color: var(--ink-soft);
    display: flex; align-items: center; gap: 6px;
}

/* Строка-таблица показателей: рейтинг | время доставки | мин. заказ.
   Крупное значение + подпись снизу, между блоками — вертикальные разделители. */
.resto__stats { margin-top: 16px; display: flex; align-items: stretch; gap: 18px; }
.resto__stat { display: flex; flex-direction: column; gap: 2px; }
.resto__stat-main {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.resto__stat-main svg { flex-shrink: 0; }
.resto__stat-sub { font-size: 13px; color: var(--ink-soft); }
.resto__stat-div { width: 1px; align-self: stretch; background: var(--line); flex-shrink: 0; }

/* Под таблицей: статус + кухня в ряд, адрес отдельной строкой. */
.resto__tags { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* --- Лента категорий --- */
/* --- Поиск по меню точки --- */
.resto__search { position: relative; margin: 6px 0 4px; }
.resto__search-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; color: var(--ink-soft); pointer-events: none;
}
.resto__search-input {
    width: 100%; padding: 13px 18px 13px 46px; font-size: 15px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px;
    transition: border-color 0.2s var(--ease-haptic);
}
.resto__search-input::placeholder { color: var(--ink-soft); }
.resto__search-input:focus { outline: none; border-color: var(--ink); }

.resto__cats {
    display: flex; gap: 10px; overflow-x: auto; padding: 10px 2px 18px; margin-bottom: 22px;
    scrollbar-width: thin; position: sticky; top: 68px; background: var(--bg); z-index: 10;
}
.cat-chip {
    flex: 0 0 auto; padding: 10px 20px; font-size: 14px; font-weight: 500;
    color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line);
    border-radius: 999px; cursor: pointer; white-space: nowrap;
    transition: color 0.2s var(--ease-haptic), background-color 0.2s var(--ease-haptic), border-color 0.2s var(--ease-haptic);
}
/* Только неактивный: иначе тёмный текст утопает в чёрном фоне активного чипа. */
.cat-chip:not(.cat-chip--active):hover { color: var(--ink); border-color: #d8d3c9; }
.cat-chip--active { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* --- Сетка блюд --- */
/* Базовая раскладка САМА гарантирует минимум 2 колонки на любой ширине, не
   полагаясь только на медиазапрос (на телефоне был 1 столбец-гигант, когда
   медиазапрос почему-то не применялся). Каждая колонка не уже 48% контейнера →
   две всегда помещаются; потолок 230px разрешает 3–4 колонки на десктопе. */
.dishes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(48%, 230px), 1fr)); gap: 18px; }
.dishes-grid__empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 48px 0; }

.dish-card { display: flex; flex-direction: column; gap: 6px; transition: transform 0.25s var(--ease-haptic); }
.dish-card:hover { transform: translateY(-4px) scale(1.01); }
.dish-card__media {
    position: relative; width: 100%; aspect-ratio: 1 / 1; display: flex;
    align-items: center; justify-content: center; background: var(--wash);
    border-radius: 16px; color: #c9c2b5; overflow: hidden;
}
/* Иконка-плейсхолдер — фоновый слой; фото блюда кладётся поверх (z-index: 1),
   кнопка-fab — выше всех (z-index: 2). Если onerror спрячет img, под ним
   останется иконка. */
/* Кликабельный слой-фото (открывает модалку). Заполняет media целиком; сброс
   стилей кнопки. Плейсхолдер/фото позиционируются относительно него. */
.dish-card__open {
    position: absolute; inset: 0; z-index: 1; padding: 0; border: none;
    background: transparent; cursor: pointer; color: inherit; display: block;
}
.dish-card__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.dish-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.dish-card__fab { position: absolute; right: 10px; bottom: 10px; z-index: 2; }
/* Сердечко избранного блюда — верхний правый угол медиа (fab «+» внизу справа,
   не пересекаются). Чуть компактнее карточного варианта. */
.fav-btn--dish { position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; }
.dish-card__head { display: flex; flex-direction: column; gap: 1px; padding: 0 4px; }
.dish-card__price { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.dish-card__name { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.dish-card__weight { font-size: 12px; color: var(--ink-soft); }

.add-control { display: inline-flex; }
.dish-card__add {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: var(--surface); color: var(--ink);
    font-size: 26px; font-weight: 400; line-height: 1; cursor: pointer;
    box-shadow: 0 4px 14px rgba(20,17,15,0.18);
    transition: background-color 0.25s var(--ease-haptic), color 0.25s var(--ease-haptic), transform 0.12s ease;
}
.dish-card__add:hover { transform: scale(1.07); }
.dish-card__add:active { background: var(--flash-add); color: var(--surface); transform: scale(0.92); }

.qty-ctl { display: flex; align-items: stretch; background: var(--surface); border-radius: 999px; overflow: hidden; box-shadow: 0 4px 14px rgba(20,17,15,0.18); }
.qty-ctl__btn {
    width: 42px; height: 46px; display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
    transition: background-color 0.25s var(--ease-haptic), color 0.25s var(--ease-haptic), transform 0.12s ease;
}
.qty-ctl__btn--plus:active { background: var(--flash-add); color: var(--surface); transform: scale(0.92); }
.qty-ctl__btn--minus:active { background: var(--flash-remove); color: var(--surface); transform: scale(0.92); }
.qty-ctl__value { min-width: 26px; padding: 0 2px; text-align: center; font-size: 16px; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: center; }

/* --- Диалог смены точки (в корзине товары другой точки) --- */
.sf-conflict {
    flex-direction: column; gap: 8px; align-items: stretch;
    background: var(--surface); border-radius: 14px; padding: 10px 12px;
    box-shadow: 0 6px 18px rgba(20,17,15,0.22); width: 200px;
}
.sf-conflict__text { font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.sf-conflict__actions { display: flex; gap: 8px; }
.sf-conflict__btn { flex: 1; border: none; border-radius: 9px; padding: 8px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.sf-conflict__btn--yes { background: var(--flash-remove); color: var(--surface); }
.sf-conflict__btn--no { background: var(--wash); color: var(--ink); }

#menu-region.htmx-swapping, .dishes-grid.htmx-swapping { opacity: 0.5; transition: opacity 0.1s ease; }

/* --- Модалка блюда (раскладка: фото + покупка + состав).
   Контейнер #dish-modal пуст, пока закрыта; фрагмент приходит по HTMX-клику на
   фото карточки. Десктоп — две колонки в строку; мобильный — bottom-sheet. --- */
.dish-modal__backdrop {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(20, 17, 15, 0.55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: dishModalFade 0.2s var(--ease-enter) both;
}
@keyframes dishModalFade { from { opacity: 0; } to { opacity: 1; } }
.dish-modal__card {
    position: relative; display: flex; overflow: hidden;
    width: min(860px, 100%); height: min(560px, calc(100vh - 48px));
    background: var(--surface); border-radius: 22px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
    animation: dishModalPop 0.26s var(--ease-haptic) both;
}
@keyframes dishModalPop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dish-modal__close {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.92);
    color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer;
    box-shadow: 0 4px 14px rgba(20, 17, 15, 0.18);
    transition: transform 0.12s var(--ease-haptic), background-color 0.2s var(--ease-haptic);
}
.dish-modal__close:hover { transform: scale(1.06); background: #fff; }
/* Карточка получает фокус при открытии — без видимой рамки (иначе она рисуется
   квадратом вокруг круглой ×). Клавиатурный фокус на самой × — аккуратное
   кольцо по кругу кнопки, а не квадрат (перекрывает глобальный radius:6px). */
.dish-modal__card:focus { outline: none; }
.dish-modal__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 50%; }

/* Левая колонка — крупное фото. contain на светлой подложке:
   фото не обрезается, под ним фоном — иконка-плейсхолдер на случай битой ссылки. */
.dish-modal__media {
    position: relative; flex: 1 1 50%; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: #c9c2b5; overflow: hidden;
}
.dish-modal__ph { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; }
.dish-modal__img {
    position: relative; z-index: 1; width: 100%; height: 100%;
    object-fit: contain; padding: 28px;
}

/* Правая колонка — закреплённая шапка покупки + прокручиваемое тело. */
.dish-modal__info { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; }
.dish-modal__header {
    flex: 0 0 auto; padding: 26px 26px 18px; border-bottom: 1px solid var(--line);
}
.dish-modal__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding-right: 40px; }
.dish-modal__name { font-size: 24px; line-height: 1.15; color: var(--ink); }
.dish-modal__weight { font-size: 14px; color: var(--ink-soft); font-weight: 500; }
/* Футер карточки — постоянная полоса покупки внизу: цена + «Добавить в корзину». */
.dish-modal__footer {
    flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
    padding: 16px 26px; border-top: 1px solid var(--line); background: var(--surface);
}
.dish-modal__price { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.dish-modal__buy-control { flex: 1 1 auto; min-width: 0; }

.dish-modal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 26px 26px; }
.dish-modal__section-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ink-soft); margin-bottom: 8px;
}
.dish-modal__composition { font-size: 14.5px; line-height: 1.55; color: var(--ink); white-space: pre-line; }
.dish-modal__composition--empty { color: var(--ink-soft); font-style: italic; }

/* Крупный пульт покупки в модалке (view='modal'). Кнопка «Добавить» и большой
   степпер тянутся на всю ширину строки покупки. */
.add-control--modal { display: block; width: 100%; }
.dish-modal__add {
    height: 44px; padding: 0 22px; border: none; border-radius: 12px;
    background: var(--ink); color: var(--surface);
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: transform 0.12s var(--ease-haptic), background-color 0.2s var(--ease-haptic);
}
.dish-modal__add:hover { transform: translateY(-1px); }
.dish-modal__add:active { transform: scale(0.99); }
/* Степпер в модалке компактный (не на всю строку): [−] N [+] прижат влево,
   рядом с ценой. add-control--modal не растягивает его. */
.add-control--modal .qty-ctl--lg { width: fit-content; }
.qty-ctl--lg { height: 44px; border-radius: 12px; box-shadow: none; background: var(--wash); }
.qty-ctl--lg .qty-ctl__btn { width: 44px; height: 44px; font-size: 22px; }
.qty-ctl--lg .qty-ctl__value { font-size: 17px; min-width: 40px; }

@media (max-width: 720px) {
    /* bottom-sheet: всё в столбик, карточка прижата к низу и сама прокручивается;
       шапка покупки липкая сверху. */
    .dish-modal__backdrop { padding: 0; align-items: flex-end; }
    .dish-modal__card {
        flex-direction: column; width: 100%; height: auto; max-height: 92vh;
        overflow-y: auto; border-radius: 22px 22px 0 0;
        animation: dishModalSheet 0.28s var(--ease-enter) both;
    }
    @keyframes dishModalSheet {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .dish-modal__media { flex: none; width: 100%; aspect-ratio: 4 / 3; border-radius: 22px 22px 0 0; }
    .dish-modal__img { padding: 20px; }
    .dish-modal__info { flex: none; }
    .dish-modal__header {
        position: sticky; top: 0; z-index: 2; background: var(--surface);
        padding: 18px 18px 16px;
    }
    .dish-modal__name { font-size: 21px; }
    .dish-modal__scroll { overflow: visible; padding: 16px 18px 22px; }
    /* CTA-полоса прилипает к низу, пока карточка прокручивается (bottom-sheet). */
    .dish-modal__footer { position: sticky; bottom: 0; z-index: 2; padding: 14px 18px; }
}

/* --- Раскладка «меню + боковая корзина» --- */
/* Сетка центрируется как единый блок; .resto внутри больше не центрирует себя
   и не задаёт свой потолок ширины — это делает обёртка (горизонтальные поля тоже
   переезжают на неё). */
/* Десктоп: меню тянется на всю ширину (до 1400px, дальше центрируется), корзина
   340px прижата к правому краю контента. На экранах ≤1400px контейнер занимает
   всю ширину окна, поэтому корзина оказывается у самого правого края экрана. */
.storefront-layout {
    max-width: 1400px; margin: 0 auto; padding: 0 28px;
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px;
    align-items: start;
}
.storefront-layout .resto { max-width: none; margin: 0; padding: 48px 0 80px; }

/* --- Боковая корзина (десктоп: закреплённая панель справа) --- */
.cart-aside { position: sticky; top: 88px; }
.cart-aside__panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    padding: 22px; display: flex; flex-direction: column; gap: 16px;
}
.cart-aside__title { font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
.cart-aside__vendor { margin-top: -8px; font-size: 13px; color: var(--ink-soft); }

.cart-aside__items {
    display: flex; flex-direction: column; gap: 6px;
    max-height: min(46vh, 420px); overflow-y: auto; scrollbar-width: thin;
    margin: 0 -6px; padding: 0 6px;
}
.ca-item {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center;
    gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.ca-item:last-child { border-bottom: none; }
.ca-item__info { min-width: 0; }
.ca-item__name {
    font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ca-item__price { margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
.ca-item__sum { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }

.ca-item__qty {
    display: inline-flex; align-items: center; background: var(--wash);
    border-radius: 999px; overflow: hidden;
}
.ca-qty__btn {
    width: 30px; height: 30px; border: none; background: transparent; color: var(--ink);
    font-size: 18px; line-height: 1; cursor: pointer;
    transition: background-color 0.25s var(--ease-haptic), color 0.25s var(--ease-haptic), transform 0.12s ease;
}
.ca-qty__btn--plus:active { background: var(--flash-add); color: var(--surface); transform: scale(0.9); }
.ca-qty__btn--minus:active { background: var(--flash-remove); color: var(--surface); transform: scale(0.9); }
.ca-qty__value { min-width: 22px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink); }

.cart-aside__summary { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ca-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); }
.ca-row--total {
    padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--line);
    font-size: 17px; font-weight: 700; color: var(--ink);
}
.cart-aside__note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.cart-aside__note--warn { color: var(--flash-remove); }

.cart-aside__checkout {
    display: flex; align-items: center; justify-content: center;
    padding: 14px 16px; border-radius: 14px; background: var(--ink); color: var(--surface);
    font-size: 15px; font-weight: 600; text-decoration: none;
    transition: transform 0.12s ease, opacity 0.2s ease;
}
.cart-aside__checkout:hover { transform: translateY(-1px); }
.cart-aside__checkout:active { transform: scale(0.98); }
.cart-aside__checkout.is-disabled { opacity: 0.45; pointer-events: none; }

/* Пустая корзина — дружелюбная заглушка. */
.cart-aside__panel--empty { align-items: center; text-align: center; padding: 32px 22px; }
.cart-aside__empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; }
.cart-aside__empty-ico { color: #c9c2b5; }
.cart-aside__empty-text { font-size: 15px; font-weight: 500; color: var(--ink-soft); line-height: 1.4; }

/* Мобильная плавающая плашка — скрыта на десктопе (показывается в медиа ниже). */
.cart-bar { display: none; }

/* На планшете/мобильном панель справа не помещается: одна колонка, корзина —
   плавающей плашкой снизу, ведёт на /cart. */
@media (max-width: 900px) {
    /* minmax(0, …), а не просто 1fr: иначе колонка раздувается до min-content
       контента (лента категорий, карточки) и вылезает за ширину экрана —
       появляется горизонтальная прокрутка, из-за неё на телефоне два блюда
       видно только при уменьшении масштаба. С min(0,…) колонка ужимается по
       экрану, сетка честно встаёт в 2 ряда. */
    .storefront-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .cart-aside__panel { display: none; }
    .cart-aside { position: static; }
    .cart-bar {
        position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
        display: flex; align-items: center; gap: 12px;
        padding: 14px 18px; border-radius: 16px; background: var(--ink); color: var(--surface);
        text-decoration: none; box-shadow: 0 12px 30px -8px rgba(20,17,15,0.45);
    }
    .cart-bar__count {
        flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 7px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--surface); color: var(--ink);
        border-radius: 999px; font-size: 13px; font-weight: 700;
    }
    .cart-bar__label { font-size: 15px; font-weight: 600; }
    .cart-bar__total { margin-left: auto; font-size: 15px; font-weight: 700; }
    /* Чтобы плашка не перекрывала последние карточки меню. */
    .storefront-layout .resto { padding: 32px 0 96px; }
    /* Кнопка поддержки (глобальный FAB, bottom:18px) на витрине налезала бы на
       плавающую плашку корзины — обе тёмные, сливались в одну полоску. Поднимаем
       FAB чуть над плашкой (без большого зазора). */
    .sup-fab { bottom: 76px; }
}

@media (max-width: 620px) {
    .storefront-layout { padding: 0 18px; }
    .resto { padding: 22px 18px 72px; }
    .resto__header { padding: 18px; }
    .resto__top { gap: 14px; }
    /* На мобильном фото заведения не показываем — только название и показатели. */
    .resto__logo { display: none; }
    .resto__name { font-size: 24px; }
    /* Строка-таблица плотнее, чтобы три показателя помещались по ширине. */
    .resto__stats { gap: 12px; }
    .resto__stat-main { font-size: 15px; }
    .resto__stat-sub { font-size: 12px; }
    /* На мобильном значок «i» стоит по центру шапки, поэтому привязка попапа к
       самому значку уводит окно за край. Привязываем его к карточке-шапке на всю
       её ширину (position:absolute от .resto__header) — попап всегда на экране,
       не зависит от положения значка. position:fixed тут не подходит: анимация
       появления страницы (transform на контейнере) делает fixed относительным
       не вьюпорта, а высокого контейнера, и окно уезжало далеко вниз. */
    .resto__header { position: relative; }
    .seller { position: static; }
    .seller__card {
        top: calc(100% + 8px); left: 0; right: 0; width: auto;
        max-height: 70vh; overflow-y: auto;
    }
    /* Тач-цели ≥44px: чипы-категории и кнопки количества удобнее пальцем. */
    .cat-chip { padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center; }

    /* Меню на мобильном — 2 блюда в ряд: фото меньше, помещается вдвое больше. */
    .dishes-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .dish-card__price { font-size: 15px; }
    .dish-card__name { font-size: 13px; }
    /* Кнопка-«+» и пульт количества компактнее под уменьшенную карточку. */
    .dish-card__add { width: 38px; height: 38px; font-size: 22px; }
    .qty-ctl__btn { width: 36px; height: 38px; font-size: 19px; }
    .dish-card__fab { right: 8px; bottom: 8px; }
}