/* Мобильная оболочка «Из Морозилки».
   Файл подключается как <link media="(max-width: 720px)">, поэтому
   собственных @media внутри нет: всё, что здесь написано, действует
   ровно до 720px и ни при какой ширине выше. Токены — из app.css.
   Разделы идут в порядке задач плана 2026-09-11-mobile-app-layout.md. */

/* ── 1. Каркас ─────────────────────────────────────────────── */

/* маркер для дымового теста: на мобильном виден, на десктопе нет */
html { --mobile-shell: 1; }

/* ── 2. Нижняя панель вкладок ──────────────────────────────── */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--edge);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  height: 56px;
  color: var(--muted); text-decoration: none;
  font-size: 11px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.tab__ico { position: relative; display: block; }
.tab svg { width: 24px; height: 24px; display: block; }
.tab__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tab.is-on { color: var(--accent); }
.tab:active { background: var(--surface-2); }
.tab__n {
  position: absolute; top: -6px; left: 12px;
  min-width: 18px; height: 18px; padding-inline: 5px;
  display: grid; place-items: center;
  background: var(--frost); color: var(--ink);
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* место под панель: перекрывает правило app.css
   html:not(.cart-empty) body { padding-bottom: 84px } */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
html:not(.cart-empty) body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

/* фиксированные элементы поднимаются над панелью */
.cart-fab, html:not(.cart-empty) .cart-fab.is-on { display: none; }
.toast { bottom: calc(56px + var(--s3) + env(safe-area-inset-bottom)); }
.cookie { bottom: calc(56px + var(--s3) + env(safe-area-inset-bottom)); z-index: 90; }

/* ── 3. Верх страницы и футер ──────────────────────────────── */

/* шапка остаётся на месте, но становится компактным верхом приложения:
   строка «логотип + адрес», под ней поиск во всю ширину. Избранное,
   заказы и вход ушли в панель вкладок, их кнопки-дубли скрыты. */
/* шапка липкая со сдвигом (владелец, 2026-10-08): строка «логотип + адрес»
   уезжает вверх, строка поиска остаётся под пальцем. top отрицательный ровно
   на высоту верхней строки: отступ 12 + кнопка адреса 36 + зазор 8 */
.hdr {
  position: sticky; top: -56px; z-index: 40;
  border-bottom: 0;
  transition: box-shadow 150ms cubic-bezier(.22, 1, .36, 1);
}
.is-scrolled .hdr { box-shadow: 0 1px 0 var(--edge), 0 6px 16px -10px rgba(15, 23, 42, .25); }
.hdr__inner {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "logo addr" "search search";
  gap: var(--s2) var(--s3);
  padding-block: var(--s3) var(--s2);
}
.hdr .logo { grid-area: logo; font-size: var(--fs-price); }
.hdr .addr { grid-area: addr; justify-self: end; min-width: 0; }
.hdr .search { grid-area: search; }
.hdr__inner > .hbtn--fav,
.hdr__inner > .hbtn--ord,
.hdr__inner > .hbtn--login { display: none; }
.hbtn--addr { height: 36px; border: 0; background: none; padding-inline: 0; color: var(--muted); }
.hbtn--addr b { font-weight: 500; }
.search input { height: 44px; border-radius: var(--r-pill); background: var(--surface-2); border-color: transparent; }

/* якоря не прячутся под прилипшим поиском: 44 + 8 снизу + запас */
html { scroll-padding-top: calc(52px + var(--s5)); }

/* кнопка «наверх» — над панелью вкладок, справа; под баннером cookie */
.totop {
  position: fixed; right: var(--s4); z-index: 70;
  bottom: calc(56px + var(--s3) + env(safe-area-inset-bottom));
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--edge); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .35);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.totop[hidden] { display: none; }
/* на товаре и в оформлении над вкладками стоит своя полоса с кнопкой — выше неё */
body:has(.prod__buy .prod__slot) .totop,
html:not(.cart-empty) body:has(.sum .btn) .totop { bottom: calc(56px + 64px + var(--s3) + env(safe-area-inset-bottom)); }
.totop:active { background: var(--surface-2); }
.totop svg { width: 20px; height: 20px; }

/* реквизиты — только на юридических и служебных страницах */
.foot { display: none; }
.foot--keep { display: block; }

/* ── 4. Главная ────────────────────────────────────────────── */

/* .col раскрывается в контейнер выше, чтобы категории встали между
   промо-лентой и полками: в разметке они лежат на разных уровнях. */
/* align-items: stretch обязателен. В app.css у .layout стоит align-items:
   start — при смене display на flex оно продолжает действовать, и в
   колоночном flex «start» означает «ширина по содержимому». Тогда промо,
   полки и чипы растягиваются до своей ленты (до 1448px), выносят страницу
   вбок, а сетка категорий считает три колонки от раздутой ширины. */
.layout {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--s5); padding-block: var(--s3) var(--s6);
}
.layout > .col { display: contents; }
.layout > .side { display: none; }

/* Порядок задаётся через `.layout > .col > X`, а не `.layout > X`.
   display: contents делает содержимое .col элементами flex-раскладки, но
   структуру документа не меняет, поэтому .promo остаётся потомком .col и
   под `.layout > .promo` не подходит. С таким селектором порядок получал
   один лишь блок категорий, а всё остальное сохраняло нулевой — и
   категории уезжали в самый низ страницы, под вопросы и ответы.
   Элемент без order считается нулевым, поэтому нумеруются все дети. */
.layout > .cat { order: 3; }

/* главная */
.layout > .col > .ptitle { order: 1; }
.layout > .col > .promo { order: 2; }
.layout > .col > .shelf { order: 4; }
.layout > .col > [data-cat-shelves] { order: 5; }
.layout > .col > .terms { order: 6; }
.layout > .col > .seo { order: 7; }

/* каталог: крошки и шапка выдачи, лента категорий, товары; текст
   о категории — под выдачей. Строка состояния («Ничего не нашлось») —
   под лентой, рядом с блоком пустой выдачи, а не над лентой */
.layout > .col > .crumbs { order: 1; }
.layout > .col > .chead { order: 2; }
.layout > .col > .chead__state { order: 4; }
/* подкатегории — сразу под лентой категорий (у ленты тоже 3, она раньше в документе) */
.layout > .col > .subchips { order: 3; margin-bottom: 0; }
.layout > .col > [data-cgrid] { order: 6; }
.layout > .col > .cmore-wrap { order: 7; }
.layout > .col > .noresult { order: 8; }
.layout > .col > .ctext { order: 9; }
/* страница каталога плотнее главной: между шапкой, лентой и сеткой 12px */
.layout--cat { gap: var(--s3); }

.ptitle h1 { font-size: 22px; letter-spacing: -.01em; }
.ptitle .caption { display: none; }

/* промо — горизонтальная лента карточек 280×140 */
.promo {
  display: flex; gap: var(--s3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--s4) * -1);
  padding-inline: var(--s4);
  scroll-padding-inline: var(--s4);
  scrollbar-width: none;
}
.promo::-webkit-scrollbar { display: none; }
.promo__tile {
  flex: 0 0 280px; min-height: 140px; height: 140px;
  padding: var(--s4); border-radius: var(--r-2);
  scroll-snap-align: start;
}
.promo__big { flex: 0 0 280px; min-height: 140px; height: 140px; grid-row: auto; }
.promo__lead { font-size: var(--fs-price); max-width: none; }
.promo__note { font-size: var(--fs-caption); max-width: none; }
.promo__thumbs { display: none; }

/* категории — сетка плиток 3 в ряд вместо горизонтальной ленты иконок */
.cat { position: static; margin-inline: 0; }
.cat__title { display: none; }
.cat__list {
  display: grid; grid-auto-flow: row;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  overflow: visible;
  padding-inline: 0;
}

/* полки — горизонтальные скроллеры, край следующей карточки виден */
.shelf { margin-bottom: 0; }
.shelf__head { margin-bottom: var(--s3); }
.shelf__head h2 { font-size: var(--fs-price); }
.shelf__more { font-size: var(--fs-caption); min-height: 32px; }
.shelf .grid {
  display: flex; gap: var(--s3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--s4) * -1);
  padding-inline: var(--s4);
  scroll-padding-inline: var(--s4);
  scrollbar-width: none;
}
.shelf .grid::-webkit-scrollbar { display: none; }
.shelf .grid > .card, .shelf .grid > .skel { flex: 0 0 150px; scroll-snap-align: start; }

[data-cat-shelves] { display: flex; flex-direction: column; gap: var(--s5); }

/* условия доставки: на десктопе две колонки 1fr/1.2fr, на телефоне — одна */
.terms { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s5); }

/* ── 5. Карточка товара ────────────────────────────────────── */

.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }

.card {
  padding: var(--s2);
  border: 0;
  transition: none;
}
.card__media { margin-bottom: var(--s2); padding: var(--s2); }
.card__name { font-size: var(--fs-caption); line-height: 1.25; }
.card__meta { margin-top: 0; font-size: 12px; }
.card__foot { margin-top: var(--s2); }

.card__badge { font-size: 12px; }
.card .fav { top: -2px; right: -2px; }   /* кнопка 44px, видимый кружок 24px в 8px от угла */

/* кнопка-цена в карточке шириной ~154px: поля и зазоры ужаты, чтобы
   «+ 1 299 ₽ 1 529 ₽» вставало в одну строку */
.padd { gap: var(--s1); padding-inline: var(--s2); }

/* на тач-экране нет наведения: подсветка карточки и синяя заливка кнопки
   залипали бы после касания — кнопка остаётся светлой, отклик даёт нажатие */
.card:hover { border-color: transparent; box-shadow: none; transform: none; }
.card:hover .card__name { text-decoration: none; }
.card:hover .card__media img { transform: none; }
.padd:hover, .card:hover .padd { background: var(--surface-2); color: var(--ink); }
.padd:hover s, .card:hover .padd s { color: var(--muted); }
.padd:active { background: var(--edge); color: var(--ink); }

/* заглушки до отрисовки: те же габариты, что у карточки */
.skel::before { aspect-ratio: 1 / 1; }
.skel::after { height: 96px; }

/* ── 6. Плитки категорий ───────────────────────────────────── */

.cat__list li { min-width: 0; }
/* Фолбэк без фото: paintCats рисует обычную ссылку ленты, а ей app.css в
   блоке max-width:999px даёт white-space: nowrap — в трёхколоночной сетке
   длинное название не переносится и вылезает за свою ячейку. На проде так
   документ уезжал вбок на 88px. Плитке .ctile это правило уже отменено,
   но фолбэк до неё не доходит. */
.cat__list .cat__link { white-space: normal; min-width: 0; }
.ctile {
  display: grid; gap: var(--s2);
  padding: 0; background: none; border-radius: 0;
  white-space: normal;
  font-size: var(--fs-caption); line-height: 1.2;
  color: var(--ink); text-decoration: none;
}
/* height: auto обязателен. У <img> стоят атрибуты width/height 720 — они
   приходят в стили как presentational hint, то есть как заданная высота.
   Пока height задан, aspect-ratio его не пересчитывает, и плитка выходит
   ростом 720px при ширине колонки 114px. */
.ctile__img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-1); background: var(--surface-2);
  display: block;
}
.ctile__t { display: block; text-align: center; }
/* иконка показывается только как фолбэк на непришедшее фото */
.ctile .cat__ico { display: none; }
.ctile--ico .cat__ico {
  display: grid; place-items: center;
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  border-radius: var(--r-1); background: var(--surface-2); color: var(--muted);
}
.ctile--ico .cat__ico svg { width: 32px; height: 32px; }
.ctile[aria-current="page"] { background: none; color: var(--accent); }
.ctile[aria-current="page"] .cat__ico { background: var(--surface-2); color: var(--accent); }

/* каталог: «Показать ещё» во всю ширину */
.cmore-wrap .btn { width: 100%; min-width: 0; height: 48px; }
/* шапка выдачи: заголовок и сортировка в строку, длинное имя категории
   отправляет сортировку под себя — текст выбора встаёт на левый край */
.chead { flex-wrap: wrap; row-gap: 0; }
.chead h1 { flex: 1 1 auto; }
.chead__sort { margin-left: calc(var(--s3) * -1); }
.sel--text select { height: 44px; }

/* категории на странице каталога — одной лентой над выдачей, а не сеткой
   плиток 3×3: сетка занимала весь первый экран, и товары начинались под
   сгибом (верх выдачи на 925px при высоте экрана 844). Плитка — пилюля
   с круглым кадром; край ленты растворяется — видно, что она листается */
.layout--cat .cat__list {
  display: flex; gap: var(--s2);
  overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--s6)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--s6)), transparent);
}
.layout--cat .cat__list::-webkit-scrollbar { display: none; }
.layout--cat .cat__list li { flex: none; }
.layout--cat .cat__list .cat__link {
  display: flex; align-items: center; gap: var(--s2);
  height: 44px; padding: 0 var(--s4) 0 var(--s1);
  background: var(--surface); border-radius: var(--r-pill);
  white-space: nowrap; font-size: var(--fs-caption); font-weight: 500;
}
/* та же вырезка на пастельной подложке, что в левой колонке десктопа */
.layout--cat .cat__ph { width: 36px; height: 36px; border-radius: var(--r-pill); }
.layout--cat .cat__ph img { width: 42px; height: 42px; }
.layout--cat .cat__list .cat__link[aria-current="page"] { background: var(--ink); color: var(--on-dark); }
.ctext { font-size: var(--fs-caption); }

/* ── 7. Страница товара ────────────────────────────────────── */

.prod {
  display: block;
  padding-block: 0 calc(64px + var(--s5));
  margin-inline: calc(var(--s4) * -1);
}
[data-prod] { min-height: 0; }
.prod__media {
  aspect-ratio: 1 / 1; border-radius: 0;
  margin-bottom: var(--s4);
}
.prod__side { padding-inline: var(--s4); display: flex; flex-direction: column; }
.prod h1 { font-size: 20px; order: 2; }
.prod__unit { margin-top: var(--s1); order: 3; }

.pback {
  position: absolute; z-index: 2; top: var(--s3); left: var(--s4);
  width: 40px; height: 40px; border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--sh-1);
}
.pback svg { width: 20px; height: 20px; }

/* цена над названием, покупка уехала в прилипшую полосу */
.prod__buy {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-top: 0; margin-bottom: var(--s2);
  padding-block: 0; border: 0;
  order: 1;
}
.prod__price { font-size: 24px; }
.prod__buy .fav--big { margin-left: auto; align-self: center; }

.prod__buy .prod__slot {
  position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom));
  z-index: 75;
  height: 64px; padding: var(--s3) var(--s4);
  background: var(--surface); box-shadow: var(--sh-1);
  display: flex; align-items: center;
}
.prod__buy .prod__slot .card__add,
.prod__buy .prod__slot .stepper { width: 100%; height: 48px; }
.prod__buy .prod__slot .stepper { grid-template-columns: 48px minmax(24px, 1fr) 48px; }
.prod__buy .prod__slot .stepper button { width: 48px; height: 48px; }

.pfold { order: 4; border-bottom: 1px solid var(--edge); }
.pfold > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; font-weight: 500;
}
.pfold > summary::-webkit-details-marker { display: none; }
.pfold > summary::after {
  content: ""; width: 8px; height: 8px; margin-right: var(--s2);
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  rotate: 45deg; translate: 0 -2px;
}
.pfold[open] > summary::after { rotate: -135deg; translate: 0 2px; }
.pfold > p { padding-bottom: var(--s4); color: var(--muted); }

.prod__facts { order: 5; margin-top: var(--s4); }
.prod__facts > div { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); }
.shelf--also { padding-bottom: var(--s5); }

/* ── 8. Корзина и оформление ───────────────────────────────── */

/* Одна колонка, состав заказа впереди формы доставки: на телефоне сначала
   проверяют, что положили, и только потом заполняют адрес.

   Контейнером раскладки становится сам <main>, а не .checkout. Причина:
   заголовок «Куда везти» лежит в разметке над всем блоком оформления и
   называет форму доставки, а форма на телефоне уезжает под вход и состав
   заказа — заголовок остаётся стоять над чужим содержимым. Внутри .checkout
   его не подвинуть: он ей не ребёнок, а сосед. display: contents распускает
   .checkout, её дети попадают в одну flex-раскладку с заголовком, и order
   расставляет всех пятерых. Селекторы при этом пишутся через реальную
   вложенность (main > .checkout > X): структуру документа contents не меняет.

   Пустая корзина сюда не попадает: .cart-empty .checkout из app.css
   специфичнее и скрывает блок целиком, остаются крошки, «Корзина пуста»
   и заглушка — в исходном порядке. */
main[data-checkout] {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--s4);
  padding-block: var(--s3) calc(56px + var(--s5));
}
.checkout { display: contents; }
main[data-checkout] > .crumbs { order: 1; }
main[data-checkout] > .checkout > #co-login { order: 2; }
main[data-checkout] > .checkout > .sum { order: 3; }
main[data-checkout] > [data-ch-title] { order: 4; }
main[data-checkout] > .checkout > form.form { order: 5; }
main[data-checkout] > .voidcart { order: 6; }
[data-ch-title] { font-size: 22px; }
/* у гостя форма доставки скрыта гейтом входа, и заголовок остался бы висеть
   последней строкой ни над чем; вернётся вместе с формой. Пустая корзина —
   исключение: там тот же элемент говорит «Корзина пуста» и относится к
   заглушке, а не к форме */
.co-gate:not(.cart-empty) [data-ch-title] { display: none; }

.fset { padding: var(--s4); border-radius: var(--r-1); }
.fset legend { font-size: var(--fs-price); margin-bottom: var(--s3); }
.field input, .field textarea, .sel select { height: 48px; }
.field textarea { height: auto; }
/* только кнопки-действия формы: «Применить» в строке промокода
   остаётся рядом с полем и под правило не попадает */
.form > .btn, .form > p > .btn, .form [data-form] > .btn { width: 100%; height: 48px; }
.promo-row .btn { height: 48px; }
.field--promo label { font-size: var(--fs-caption); }

/* позиции заказа — те же строки корзины, что в правой колонке каталога;
   счётчик под палец — 44px */
.sum__list { gap: var(--s4); margin-bottom: var(--s4); }
.crow .stepper--sm { height: 44px; grid-template-columns: 44px minmax(24px, auto) 44px; }
.crow .stepper--sm button { height: 44px; width: 44px; }

/* Итог остаётся в потоке: позиции надо видеть и править. Прилипшей
   полосой становится только кнопка оплаты — её подпись уже содержит
   сумму («Оформить за 1 240 ₽»), так что отдельная строка итога внизу
   была бы повтором. */
[data-sum] { min-height: 0; }
.sum { padding: var(--s4); border-radius: var(--r-1); }
.sum__in { position: static; display: contents; }
.sum .total { margin-top: var(--s3); }
.sum .total b { font-size: var(--fs-title); }
.sum .caption { margin-top: var(--s2); }

.sum .btn {
  position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom));
  z-index: 75;
  width: auto; height: 56px;
  border-radius: 0;
  box-shadow: var(--sh-2);
}
/* кнопка оформления — скруглённая, с полями по краям, а не синяя полоса
   во всю ширину (владелец, 2026-10-08) */
.sum .btn {
  left: var(--s4); right: var(--s4); bottom: calc(56px + var(--s2) + env(safe-area-inset-bottom));
  height: 52px; border-radius: var(--r-pill);
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .35);
}
/* гость: у формы входа своя «Войти» — вторая кнопка внизу только дублирует её */
.co-gate .sum .btn { display: none; }

/* пустая корзина */
/* обе заглушки на десктопе двухколоночные, и правая колонка задана в
   пикселях (320px / 1.2fr) — на 390px это гарантированный вынос вбок */
/* отступы задаёт gap раскладки <main>; собственные поля заглушки к нему
   прибавлялись бы вторым интервалом */
.cart-empty .voidcart { grid-template-columns: minmax(0, 1fr); padding: var(--s5) var(--s4); margin-block: 0; }

/* строка категории в пустой корзине: кадр вместо значка, значок — фолбэк */
.voidcat__img {
  width: 40px; height: auto; aspect-ratio: 1 / 1; flex: none;
  object-fit: cover; border-radius: var(--r-1); background: var(--surface-2);
}
.voidcat .cat__ico { display: none; }
.voidcat--ico .cat__ico { display: grid; }
.cart-empty .sum { display: none; }
.voidcart__lead { font-size: var(--fs-price); }
.voidcart__go .btn { width: 100%; height: 48px; }
.voidcart__cats { min-height: 0; }

/* вход перед оформлением: интервал до следующего блока даёт gap раскладки */
#co-login .btn { width: 100%; height: 48px; }

/* ── 9. Профиль, избранное, заказы ─────────────────────────── */

.pagehead { margin-bottom: var(--s4); }
.pagehead h1 { font-size: 22px; }
/* h2 берёт --fs-title 24px и на телефоне выходил крупнее заголовка страницы
   (22px) — подзаголовок блока читался главнее того, чему подчинён */
.pagehead h2 { font-size: 20px; }
.void { padding: var(--s6) var(--s4); }
.void .btn { width: 100%; height: 48px; }
.void__lead { font-size: var(--fs-price); }

/* список строк кабинета */
.mlist { display: grid; background: var(--surface); border-radius: var(--r-1); margin-top: var(--s4); }
.mlist__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 56px; padding-inline: var(--s4);
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--edge);
}
.mlist__row:last-child { border-bottom: 0; }
.mlist__row::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-top: 2px solid var(--muted); border-right: 2px solid var(--muted);
  rotate: 45deg;
}
.mlist__row:active { background: var(--surface-2); }

/* формы кабинета и входа — во всю ширину, поля 48px */
[data-acc-step] form .btn, [data-acc-step] .field input { width: 100%; height: 48px; }
.pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.pagehead .btn { flex: none; width: auto; height: 36px; padding-inline: var(--s3); font-size: var(--fs-caption); }
[data-acc-step] .fgrid { grid-template-columns: minmax(0, 1fr); }
.acc-danger { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }

/* заказы */
.orders { gap: var(--s3); padding-bottom: var(--s4); min-height: 0; }
.order { padding: var(--s4); border-radius: var(--r-1); }
.order__id { font-size: var(--fs-body); }
.order__item { grid-template-columns: 40px minmax(0, 1fr) auto; }
.order__facts > div { grid-template-columns: 88px minmax(0, 1fr); }
.order__foot { flex-direction: column; align-items: stretch; gap: var(--s3); }
.order__foot .btn { width: 100%; height: 48px; }

/* избранное — та же сетка карточек, что и в каталоге (задача 5) */
[data-favgrid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* горизонтальные ленты листаются только вбок: при overflow-x: auto браузер
   сам ставит overflow-y: auto, и карточки, чуть выше ленты, ездили за пальцем
   вверх-вниз при свайпе наискось. Вертикальный жест уходит странице */
.promo, .shelf .grid, .layout--cat .cat__list, .subchips:not([hidden]) {
  overflow-y: hidden; overscroll-behavior-x: contain;
}

/* хлебные крошки на телефоне не показываем: путь «Главная / …» дублирует
   таб-бар и кнопку «назад» и перегружает первый экран. Разметка
   BreadcrumbList для поисковиков остаётся в JSON-LD */
.crumbs { display: none; }

/* открыта клавиатура: нижние полосы (вкладки, «Купить», «Оформить», «наверх»)
   iOS поднимает над клавиатурой, и они висят обрезком посреди экрана.
   Пока печатают — прячем (владелец, 2026-10-08) */
.kb-open .tabbar,
.kb-open .totop,
.kb-open .prod__buy .prod__slot,
.kb-open .sum .btn { display: none; }
.kb-open body { padding-bottom: 0; }