/*
 * Bammat — вид всего сайта.
 *
 * Порядок: основа → раскладка → шапка и панель → общие детали
 * (кнопки, пилюли, ленты) → экраны → шторки → движение.
 *
 * Правила, выученные дорогой ценой и поэтому записанные здесь:
 *
 *  · `[hidden]` прячет только стилем браузера, а любое наше `display`
 *    его бьёт (22 августа крестик поиска показывался при живом `hidden`).
 *    Поэтому правило ниже с `!important`.
 *  · Круг задаётся четырьмя свойствами: `width/height` и `min-/max-`.
 *    Чужой `min-height` делал круг овалом (23 августа).
 *  · Ряд, который листается, разжимается с ДВУХ концов: родитель
 *    `min-width: 0`, ребёнок `flex: none`. Признак беды — `scrollWidth`,
 *    равный `clientWidth` там, где содержимое заведомо шире.
 *  · Центрируем полями, а не сдвигом: `transform` отнимает анимация.
 *  · Поля ввода — не меньше 16px, иначе Safari приближает страницу.
 */

/* ═══════════════════════════════════════════════════════════════════
 * 1. ОСНОВА
 * ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-padding-top: calc(var(--ba-bar-h) + 56px);
}

body {
	margin: 0;
	min-height: 100dvh;
	background: var(--ba-bg);
	color: var(--ba-ink);
	font: 400 var(--ba-fs-base)/1.45 var(--ba-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overscroll-behavior-y: none;
}

body.ba-v-cart,
body.ba-v-checkout,
body.ba-v-account,
body.ba-v-thanks { background: var(--ba-canvas); }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

button, a, [role="button"], label, summary {
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--ba-font-display);
	letter-spacing: var(--ba-track-tight);
	line-height: 1.15;
}

p { margin: 0; }

:focus { outline: none; }
:focus-visible {
	outline: 2.5px solid var(--ba-accent);
	outline-offset: 2px;
	border-radius: 8px;
}

::selection { background: var(--ba-accent-soft-2); }

.ba-i { width: 22px; height: 22px; flex: none; }

.ba-skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 100;
	padding: 10px 14px;
	background: var(--ba-ink);
	color: var(--ba-bg);
	border-radius: var(--ba-r-sm);
}
.ba-skip:focus { top: 12px; }

.ba-muted { color: var(--ba-ink-2); }

/*
 * Подписи для читалок экрана. Правило обязано быть в любой теме
 * WordPress: WooCommerce, Dokan и ядро печатают такие подписи в полях
 * количества, пагинации и формах. Без него 29 сентября в корзине поверх
 * числа стояло «BONI lait entier 50cl quantity», а в каталоге — «Posts
 * pagination».
 */
.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.screen-reader-text:focus {
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
}

/*
 * ДУБЛИ ИЗ ЯДРА, КОТОРЫЕ ТЕМА УЖЕ РИСУЕТ САМА.
 *
 * Ядро писалось под Woodmart и ставит поверх страницы свои кнопки:
 * плавающий язык «EN» справа (PART 38), ряд языков в конце страницы
 * (PART 38, `.bmlang-slot`) и круглую кнопку блокнота (PART 36).
 * У темы языки есть в меню и подвале, а блокнот открывается кнопкой
 * «Shopping list» на витрине — теми же функциями ядра. Две кнопки
 * одной вещи читаются как ошибка, а плавающая «EN» ложилась даже
 * поверх шторок.
 */
.bmlang--bar,
.bmlang-slot,
.bmgl-trigger--round { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
 * 2. РАСКЛАДКА
 * ═══════════════════════════════════════════════════════════════════ */

.ba-app { min-height: 100dvh; display: flex; flex-direction: column; }

.ba-main {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--ba-w);
	margin: 0 auto;
	padding: 0 var(--ba-g) calc(var(--ba-tab-h) + var(--ba-safe-b) + 32px);
}

/* Экраны во всю ширину: обложки и небо уходят за край, содержимое — нет. */
.ba-v-home .ba-main,
.ba-v-store .ba-main { max-width: none; padding-left: 0; padding-right: 0; }

.ba-v-home .ba-main > *:not(.ba-hero),
.ba-v-store .ba-shop,
.ba-v-store .ba-shero-card {
	max-width: var(--ba-w);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ba-g);
	padding-right: var(--ba-g);
}

.ba-v-checkout .ba-main { padding-bottom: calc(40px + var(--ba-safe-b)); }

/* ═══════════════════════════════════════════════════════════════════
 * 3. ШАПКА
 * ═══════════════════════════════════════════════════════════════════ */

.ba-bar {
	position: sticky;
	top: 0;
	z-index: 40;
	padding-top: var(--ba-safe-t);
	background: var(--ba-glass);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 1px 0 var(--ba-line);
	view-transition-name: ba-bar;
	transition: background-color var(--ba-d2) var(--ba-ease), box-shadow var(--ba-d2) var(--ba-ease);
}

.ba-bar-in {
	height: var(--ba-bar-h);
	max-width: var(--ba-w);
	margin: 0 auto;
	padding: 0 calc(var(--ba-g) - 6px);
	display: flex;
	align-items: center;
	gap: 8px;
}

.ba-bar-mid {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

.ba-bar-title {
	font: 700 var(--ba-fs-lg)/1.2 var(--ba-font-display);
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 4px;
	transition: opacity var(--ba-d2) var(--ba-ease), transform var(--ba-d2) var(--ba-ease);
}

.ba-bar-end { display: flex; align-items: center; gap: 4px; flex: none; }
/* «?» рядом с кабинетом — того же вида, что кнопка кабинета. */
.ba-help { color: inherit; overflow: visible; }

/*
 * Метка «New» под кнопкой «?», со стрелкой к ней (владелец, 8 октября).
 * Цвет — тот же, что у ярлыка акции: на любом небе шапки (ночь, рассвет,
 * день) он виден одинаково. По центру кнопки её держат поля, а не сдвиг:
 * появление анимируется, а анимация забирает `transform` целиком
 * (на этом 23 августа уезжала нижняя панель).
 * Шапка стала сплошной (прокрутили ниже обложки) — метка убирается:
 * под белой полосой она висела бы поверх списка магазинов.
 * Кому и сколько её показывать, решает `how.js`: неделю с первого показа
 * этому человеку.
 */
.ba-newtag {
	position: absolute;
	top: calc(100% + 3px);
	left: -30px;
	right: -30px;
	width: max-content;
	margin: 0 auto;
	padding: 3px 9px 4px;
	border-radius: 999px;
	background: var(--ba-promo);
	color: var(--ba-promo-ink);
	font: 800 11px/1.2 var(--ba-font);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
	animation: ba-newtag-in 0.5s var(--ba-ease) both;
}
.ba-newtag::before {
	content: "";
	position: absolute;
	bottom: calc(100% - 1px);
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-width: 0;
	border-bottom-color: var(--ba-promo);
}
.ba-newtag[hidden],
.ba-bar.is-solid .ba-newtag { display: none; }
@keyframes ba-newtag-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ba-newtag { animation: none; } }
.ba-bar-titles { display: grid; gap: 1px; min-width: 0; padding-left: 4px; }
.ba-bar-titles .ba-bar-title { padding-left: 0; }
.ba-bar-sub {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	overflow: hidden;
	color: var(--ba-ink-3);
	font: 600 var(--ba-fs-xs)/1.2 var(--ba-font);
	white-space: nowrap;
	transition: opacity var(--ba-d2) var(--ba-ease);
}
.ba-bar-sub [data-ba-state] { display: inline-flex; align-items: center; gap: 5px; }
.ba-bar--over:not(.is-solid) .ba-bar-sub { opacity: 0; }
/* Замок «оплата защищена» — `.ba-secure`, а не `.ba-lock`: тем же
   классом на <html> запирается прокрутка под шторкой, и весь текст
   без своего цвета становился зелёным, пока шторка открыта. */
.ba-secure {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	padding: 0 10px 0 8px;
	border-radius: var(--ba-r-pill);
	background: var(--ba-ok-soft, rgba(47, 191, 113, 0.12));
	color: var(--ba-ok);
	font-size: var(--ba-fs-xs);
	font-weight: 700;
}
.ba-secure .ba-i { width: 15px; height: 15px; }
html.ba-lock { overflow: hidden; }
/* Полоса прокрутки не исчезает под шторкой на компьютере — страница не дёргается вбок. */
@media (pointer: fine) { html { scrollbar-gutter: stable; } }

/*
 * Поверх обложки (магазин, товар): прозрачная, кнопки на белых кругах.
 * Прокрутили ниже обложки — скрипт ставит `.is-solid`, и полоса
 * становится обычной, а название магазина въезжает в середину.
 */
.ba-bar--over {
	position: fixed;
	left: 0;
	right: 0;
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.ba-bar--over .ba-bar-title { opacity: 0; transform: translateY(6px); }
.ba-bar--over .ba-iconbtn {
	background: rgba(255, 255, 255, 0.92);
	color: #101216;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}
.ba-bar--over.is-solid {
	background: var(--ba-glass);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 1px 0 var(--ba-line);
}
.ba-bar--over.is-solid .ba-bar-title { opacity: 1; transform: none; }
.ba-bar--over.is-solid .ba-iconbtn { background: transparent; color: var(--ba-ink); box-shadow: none; }

/* Кнопка-значок: круг четырьмя свойствами — см. шапку файла. */
.ba-iconbtn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	min-width: 42px;
	min-height: 42px;
	max-width: 42px;
	max-height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ba-ink);
	cursor: pointer;
	transition: transform var(--ba-d1) var(--ba-ease), background-color var(--ba-d2) var(--ba-ease);
}
.ba-iconbtn:hover { background: var(--ba-surface-2); }
.ba-iconbtn:active { transform: scale(0.9); }

.ba-cartbtn .ba-count {
	position: absolute;
	top: 3px;
	right: 1px;
}

/* Счётчик: всегда ВНУТРИ границ кнопки. */
.ba-count {
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--ba-accent);
	color: var(--ba-accent-ink);
	font: 700 11px/18px var(--ba-font);
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 2px var(--ba-bg);
}
.ba-count.is-bump { animation: ba-bump 420ms var(--ba-spring); }

/* ── Знак ────────────────────────────────────────────────────────── */
.ba-brand { display: inline-flex; align-items: center; padding: 0 6px; flex: none; }
.ba-logo { display: inline-flex; align-items: center; gap: 7px; }
.ba-logo-m {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--ba-accent);
	color: #fff;
	font: 800 19px/1 var(--ba-font-display);
	letter-spacing: -0.04em;
	padding-bottom: 2px;
}
.ba-logo-w {
	font: 800 20px/1 var(--ba-font-display);
	letter-spacing: -0.04em;
	color: var(--ba-ink);
}
.ba-v-home .ba-bar .ba-logo-w { display: none; }

/* ── Адрес на главной ────────────────────────────────────────────── */
.ba-addr {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	max-width: 100%;
	padding: 4px 10px;
	border: 0;
	border-radius: var(--ba-r-sm);
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ba-d2) var(--ba-ease), transform var(--ba-d1) var(--ba-ease);
}
.ba-addr:hover { background: var(--ba-surface-2); }
.ba-addr:active { transform: scale(0.98); }
.ba-addr-k {
	font-size: var(--ba-fs-xs);
	font-weight: 600;
	color: var(--ba-ink-3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ba-addr-v {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	font: 700 var(--ba-fs-md)/1.25 var(--ba-font);
	color: var(--ba-ink);
}
.ba-addr-v > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ba-addr-chev { width: 18px; height: 18px; color: var(--ba-accent); }
.ba-addr.is-empty .ba-addr-v { color: var(--ba-accent); }

.ba-avatar .ba-avatar-l {
	position: absolute;
	inset: 5px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ba-accent);
	color: #fff;
	font: 700 14px/1 var(--ba-font);
}

/* ═══════════════════════════════════════════════════════════════════
 * 4. НИЖНЯЯ ПАНЕЛЬ
 * ═══════════════════════════════════════════════════════════════════ */

.ba-tabs {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	padding-bottom: var(--ba-safe-b);
	background: var(--ba-glass);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 -1px 0 var(--ba-line);
	view-transition-name: ba-tabs;
	transition: transform var(--ba-d3) var(--ba-ease-out);
}
.ba-tabs-in {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	height: var(--ba-tab-h);
	max-width: 560px;
	margin: 0 auto;
}
.ba-tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: var(--ba-ink-3);
	font: 600 11px/1 var(--ba-font);
	letter-spacing: 0.01em;
	transition: color var(--ba-d2) var(--ba-ease);
}
.ba-tab-i {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 30px;
	border-radius: 15px;
	transition: background-color var(--ba-d2) var(--ba-ease), transform var(--ba-d1) var(--ba-ease);
}
.ba-tab-i .ba-i { width: 23px; height: 23px; }
.ba-tab:active .ba-tab-i { transform: scale(0.88); }
.ba-tab.is-on { color: var(--ba-accent); }
.ba-tab.is-on .ba-tab-i { background: var(--ba-accent-soft); }
.ba-tab.is-on .ba-i { stroke-width: 2.1; }
.ba-tab .ba-count { position: absolute; top: -3px; right: 6px; }
.ba-tab-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }

/* Клавиатура открыта — панель уступает место (25 августа: она прыгала). */
.ba-kb .ba-tabs,
.ba-kb .ba-cartbar { transform: translateY(calc(100% + 40px)); }

/*
 * Большой экран: та же панель плавающей пилюлей по центру. Своей
 * второй навигации у широкого экрана нет — две навигации одного сайта
 * расходятся с первой правки.
 */
@media (min-width: 1024px) {
	.ba-tabs {
		left: 50%;
		right: auto;
		bottom: 18px;
		width: 460px;
		margin-left: -230px;
		border-radius: var(--ba-r-pill);
		padding: 0 8px;
		box-shadow: var(--ba-sh-3);
	}
	.ba-tab { flex-direction: row; gap: 6px; font-size: 13px; }
	.ba-tab-i { width: 34px; }
	.ba-tab-l { display: none; }
	.ba-tab.is-on .ba-tab-l { display: inline; }
	.ba-tabs-in { grid-template-columns: repeat(5, auto); justify-content: space-between; }
}

/* ── Полоса корзины магазина ─────────────────────────────────────── */
.ba-cartbar {
	position: fixed;
	z-index: 44;
	left: var(--ba-g);
	right: var(--ba-g);
	bottom: calc(var(--ba-tab-h) + var(--ba-safe-b) + 10px);
	max-width: 520px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 0 18px 0 10px;
	border-radius: var(--ba-r-lg);
	background: var(--ba-accent);
	color: var(--ba-accent-ink);
	box-shadow: var(--ba-sh-accent), var(--ba-sh-2);
	font-weight: 700;
	animation: ba-rise var(--ba-d3) var(--ba-ease-out);
	transition: transform var(--ba-d3) var(--ba-ease-out);
}
.ba-cartbar:active { transform: scale(0.98); }
.ba-cartbar-n {
	display: grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.2);
	font-variant-numeric: tabular-nums;
}
.ba-cartbar-l { flex: 1; }
.ba-cartbar-go { width: 20px; height: 20px; flex: none; }
@media (min-width: 1024px) { .ba-cartbar { bottom: 96px; } }

/* ═══════════════════════════════════════════════════════════════════
 * 5. ОБЩИЕ ДЕТАЛИ
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Кнопки ──────────────────────────────────────────────────────── */
.ba-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--ba-r-md);
	background: var(--ba-surface-2);
	color: var(--ba-ink);
	font: 700 var(--ba-fs-md)/1.2 var(--ba-font);
	letter-spacing: -0.005em;
	text-align: center;
	cursor: pointer;
	transition: transform var(--ba-d1) var(--ba-ease), background-color var(--ba-d2) var(--ba-ease), box-shadow var(--ba-d2) var(--ba-ease), opacity var(--ba-d2);
}
.ba-btn:active { transform: scale(0.97); }
.ba-btn .ba-i { width: 20px; height: 20px; }
.ba-btn--primary { background: var(--ba-accent); color: var(--ba-accent-ink); box-shadow: var(--ba-sh-accent); }
.ba-btn--primary:hover { background: var(--ba-accent-press); }
.ba-btn--soft { background: var(--ba-accent-soft); color: var(--ba-accent); }
.ba-btn--ghost { background: transparent; color: var(--ba-ink); box-shadow: inset 0 0 0 1.5px var(--ba-line-2); }
.ba-btn--muted { background: var(--ba-surface-2); color: var(--ba-ink-3); cursor: default; }
.ba-btn--block { display: flex; width: 100%; }
.ba-btn--lg { min-height: 56px; font-size: var(--ba-fs-lg); border-radius: var(--ba-r-lg); }
.ba-btn--sm { min-height: 38px; padding: 0 14px; font-size: var(--ba-fs-sm); border-radius: var(--ba-r-sm); }
.ba-btn--sm .ba-i { width: 17px; height: 17px; }
.ba-btn-sum { margin-left: auto; font-variant-numeric: tabular-nums; opacity: 0.92; }

/* ── Пилюля состояния ────────────────────────────────────────────── */
.ba-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--ba-r-pill);
	background: var(--ba-surface);
	color: var(--ba-ink);
	font: 700 var(--ba-fs-xs)/1 var(--ba-font);
	white-space: nowrap;
}
.ba-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ba-ink-3);
	flex: none;
}
[data-status="open"] .ba-dot { background: var(--ba-ok); box-shadow: 0 0 0 3px var(--ba-ok-soft); animation: ba-pulse 2.4s infinite; }
[data-status="last-orders"] .ba-dot { background: var(--ba-warn); box-shadow: 0 0 0 3px var(--ba-warn-soft); }
[data-status="orders-closed"] .ba-dot { background: var(--ba-warn); }
[data-status="closed"] .ba-dot { background: var(--ba-bad); }

/* ── Ярлыки ──────────────────────────────────────────────────────── */
.ba-tag {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 9px;
	border-radius: var(--ba-r-pill);
	background: var(--ba-surface-2);
	color: var(--ba-ink-2);
	font: 600 var(--ba-fs-xs)/1 var(--ba-font);
	white-space: nowrap;
}
.ba-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 22px;
	padding: 0 8px;
	border-radius: 8px;
	font: 800 11px/1 var(--ba-font);
	letter-spacing: 0.01em;
}
.ba-badge .ba-i { width: 13px; height: 13px; }
.ba-badge--promo { background: var(--ba-promo); color: var(--ba-promo-ink); }
.ba-badge--sale { background: var(--ba-promo); color: #fff; padding: 0 6px; }
.ba-badge--lg { top: 14px; left: 14px; height: 28px; padding: 0 12px; font-size: 13px; border-radius: 10px; }

/* ── Ленты «пилюль» ──────────────────────────────────────────────── */
.ba-chips {
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--ba-g);
}
.ba-chips::-webkit-scrollbar { display: none; }
.ba-chips-track {
	display: flex;
	gap: 8px;
	width: max-content;
	min-width: 100%;
	padding: 10px var(--ba-g);
}
.ba-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 15px;
	border: 0;
	border-radius: var(--ba-r-pill);
	background: var(--ba-surface-2);
	color: var(--ba-ink);
	font: 600 var(--ba-fs-sm)/1 var(--ba-font);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--ba-d2) var(--ba-ease), color var(--ba-d2) var(--ba-ease), transform var(--ba-d1) var(--ba-ease);
}
.ba-chip:active { transform: scale(0.95); }
/* Выбранная кнопка — цветом бренда, а не чёрным (владелец, 29 сентября):
   чёрная пилюля читалась как чужой элемент посреди синего сайта. */
/* Без тени: лента обрезает всё, что выходит за её край, и голубая тень
   выглядела отрезанной снизу (владелец, 29 сентября). */
.ba-chip.is-on { background: var(--ba-accent); color: var(--ba-accent-ink); box-shadow: none; }
.ba-chip .ba-i { width: 16px; height: 16px; }
/* «Wine and sparkling, beer, aperitifs and spirits, non-alcoholic drinks» —
   настоящее название отдела. Лента листается, но одна «пилюля» на полтора
   экрана прячет все соседние. Полное название — в заголовке ленты. */
.ba-depts .ba-chip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 38px; }
/* Высота строки — своя у каждого ряда: правило отделов (38px) доставалось
   и кнопкам подкатегорий высотой 32, и текст в них сидел ниже середины. */
/* Подписи полок — флексом по центру, а не высотой строки: у строчного
   блока текст садится по базовой линии шрифта, и на телефоне владельца
   он всё равно стоял не по центру кнопки (29 сентября, второй раз). */
.ba-depts .ba-chips--sub .ba-chip,
.ba-depts .ba-chips--sub3 .ba-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.15;
	text-align: center;
	max-width: none;
}
.ba-depts .ba-chip--deal { display: inline-flex; }
.ba-chip-e { font-size: 16px; line-height: 1; }
.ba-chip--deal { background: color-mix(in srgb, var(--ba-promo) 12%, transparent); color: var(--ba-promo); }
.ba-chip--deal.is-on { background: var(--ba-promo); color: #fff; }

/* ── Разделы ─────────────────────────────────────────────────────── */
.ba-sec { margin-top: 28px; }
.ba-sec-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.ba-h1 { font-size: var(--ba-fs-3xl); font-weight: 800; }
.ba-h2 { font-size: var(--ba-fs-xl); font-weight: 800; }
.ba-h2-n { color: var(--ba-ink-3); font-weight: 600; font-size: 0.8em; margin-left: 4px; }
.ba-sec-more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex: none;
	height: 32px;
	padding: 0 6px 0 12px;
	border-radius: var(--ba-r-pill);
	background: var(--ba-surface-2);
	color: var(--ba-ink);
	font: 700 var(--ba-fs-sm)/1 var(--ba-font);
	transition: transform var(--ba-d1) var(--ba-ease);
}
.ba-sec-more .ba-i { width: 16px; height: 16px; }
.ba-sec-more:active { transform: scale(0.94); }
.ba-page-h { padding: 18px 0 8px; }

/* ── Карусель ────────────────────────────────────────────────────── */
.ba-rail {
	min-width: 0;
	margin: 0 calc(var(--ba-g) * -1);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--ba-g);
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}
.ba-rail::-webkit-scrollbar { display: none; }
.ba-rail-track {
	display: flex;
	gap: 12px;
	width: max-content;
	padding: 2px var(--ba-g) 6px;
}
.ba-rail .ba-card {
	flex: none;
	width: clamp(140px, 40vw, 176px);
	scroll-snap-align: start;
}

/* ── Пустой экран ────────────────────────────────────────────────── */
.ba-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-width: 380px;
	margin: 0 auto;
	padding: 56px 16px;
	text-align: center;
}
.ba-empty-i {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin-bottom: 6px;
	border-radius: 26px;
	background: var(--ba-accent-soft);
	color: var(--ba-accent);
}
.ba-empty-i .ba-i { width: 34px; height: 34px; }
.ba-empty-t { font-size: var(--ba-fs-xl); font-weight: 800; }
.ba-empty-n { color: var(--ba-ink-2); margin-bottom: 10px; }

/* ── Заглушки загрузки ───────────────────────────────────────────── */
.ba-skel .ba-card-img,
.ba-skel .ba-card-b i {
	background: linear-gradient(90deg, var(--ba-surface-2) 0%, var(--ba-surface-3) 50%, var(--ba-surface-2) 100%);
	background-size: 200% 100%;
	animation: ba-shimmer 1.3s linear infinite;
}
/*
 * МЕРЦАНИЕ — ТОЛЬКО ТАМ, ГДЕ ПРАВДА ГРУЗИТСЯ (владелец, 30 сентября:
 * «шторка тянется рывками»). У каждого ряда витрины, до которого человек
 * ещё не долистал, стоят четыре заглушки, и все мерцали всегда — десятки
 * бесконечных анимаций `background-position`. Это свойство видеокарте
 * не отдаётся: браузер пересчитывал стили и перерисовывал каждый кадр,
 * даже под закрытой шторкой, и шторке доставался остаток процессора.
 * Замер на живой витрине: 120 пересчётов стилей за 2 секунды покоя.
 * Теперь ряд, который ещё не начал грузиться, стоит серым; мерцание
 * включает `is-loading`, который ставит скрипт подгрузки.
 */
.ba-sec--lazy:not(.is-loading) .ba-skel .ba-card-img,
.ba-sec--lazy:not(.is-loading) .ba-skel .ba-card-b i { animation: none; }
/*
 * Под открытой шторкой страницу не видно — и двигаться ей незачем:
 * заглушки и небо главной стоят, пока шторка открыта.
 *
 * Класс `ba-paused` ставит скрипт ПРЯМО НА эти узлы (`pauseBehind()`),
 * а не на `<html>`. Правило вида «`html.ba-lock` … любой потомок» 2.4.1
 * заставляло браузер при открытии и закрытии шторки пересчитать стили
 * ВСЕЙ страницы — ровно в тот кадр, когда шторка трогается с места.
 *
 * У неба правила ядра с `!important` и селекторами в три класса
 * (`.bmsky[data-t=night] .bmsky__stars`) — простое правило им проигрывало.
 * `:is(*, #ba-x)` весит как `id`.
 */
.ba-paused.ba-skel .ba-card-img,
.ba-paused.ba-skel .ba-card-b i,
.ba-paused.bmsky:is(*, #ba-x),
.ba-paused.bmsky :is(*, #ba-x) { animation-play-state: paused !important; }
.ba-skel .ba-card-b { display: grid; gap: 6px; padding-top: 10px; }
.ba-skel .ba-card-b i { display: block; height: 12px; border-radius: 6px; }
.ba-skel .ba-card-b i:last-child { width: 60%; }

.ba-spin {
	display: inline-block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2.5px solid var(--ba-surface-3);
	border-top-color: var(--ba-accent);
	animation: ba-rot 0.8s linear infinite;
}
.ba-more { display: flex; justify-content: center; padding: 24px 0; }

/* ═══════════════════════════════════════════════════════════════════
 * 6. ГЛАВНАЯ
 * ═══════════════════════════════════════════════════════════════════ */

/*
 * Небо — картинка ядра (`.bmsky`, sky.css) во весь верх. Мы задаём ему
 * место, а не вид. Высота — МИНИМУМ, а не потолок: 23 августа жёсткая
 * высота не давала ряду вырасти, и содержимое уезжало из шапки.
 */
.ba-hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(260px, 52vw, 380px);
	margin-top: calc(var(--ba-bar-h) * -1 - var(--ba-safe-t));
	padding: calc(var(--ba-bar-h) + var(--ba-safe-t) + 24px) var(--ba-g) 26px;
	display: flex;
	align-items: flex-end;
	background: #1d2a52;
	color: #fff;
	overflow: hidden;
	border-radius: 0 0 var(--ba-r-xl) var(--ba-r-xl);
}
.ba-hero-sky { position: absolute; inset: 0; z-index: -1; }
.ba-hero-sky .bmsky { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
.ba-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(8, 12, 28, 0.35) 0%, rgba(8, 12, 28, 0) 38%, rgba(8, 12, 28, 0.55) 100%);
	pointer-events: none;
}
.ba-hero-in { width: 100%; max-width: var(--ba-w); margin: 0 auto; }
/* Новый посетитель: общая фраза проявляется вместе с ответом, а не
   сменяется на глазах (первый кадр — `bma_home_hero_first_frame()`). */
.ba-hero [data-ba-hello], .ba-hero [data-ba-hello-sub] { transition: opacity 0.35s var(--ba-ease); }
.ba-hero.is-waiting [data-ba-hello], .ba-hero.is-waiting [data-ba-hello-sub] { opacity: 0; }
/* ГЛАВНАЯ ПОКАЗЫВАЕТСЯ ОДНИМ КАДРОМ. Отметку `ba-pre` ставит скрипт
   головы (`bma_home_boot_head()`), снимает скрипт у `#ba-ready` — когда
   разобрана вся видимая часть, до нижней панели включительно. Нужна
   браузеру, который рисует страницу на полпути загрузки и просьбу
   `rel="expect"` не понимает; у остальных она снимается раньше, чем
   им разрешат рисовать. */
html.ba-pre .ba-app { opacity: 0; }

/* Синяя кромка неба ядра (`sky.css`: в приложении верх шапки красился
   под цвет полосы часов) — снята по просьбе владельца 30 сентября. */
html.bm-in-app body .bmsky::after { content: none !important; display: none !important; }

.ba-hero-k {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	padding: 5px 10px;
	border-radius: var(--ba-r-pill);
	background: rgba(255, 255, 255, 0.18);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font: 700 var(--ba-fs-xs)/1 var(--ba-font);
}
.ba-hero-t {
	max-width: 18ch;
	font-size: clamp(28px, 7.4vw, 44px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
	text-wrap: balance;
}
.ba-hero-s {
	max-width: 34ch;
	margin-top: 8px;
	font-size: var(--ba-fs-md);
	line-height: 1.4;
	opacity: 0.92;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
	text-wrap: pretty;
}
.ba-hero-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 520px;
	height: 52px;
	margin-top: 18px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--ba-r-md);
	background: rgba(255, 255, 255, 0.96);
	color: #555c6b;
	font: 600 var(--ba-fs-md)/1 var(--ba-font);
	text-align: left;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	transition: transform var(--ba-d1) var(--ba-ease);
}
.ba-hero-search:active { transform: scale(0.98); }
.ba-hero-search .ba-i { color: #101216; }

/* На главной шапка лежит поверх неба и темнеет при прокрутке. */
.ba-v-home .ba-bar:not(.is-solid) {
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: #fff;
}
.ba-v-home .ba-bar:not(.is-solid) .ba-addr-k { color: rgba(255, 255, 255, 0.75); }
.ba-v-home .ba-bar:not(.is-solid) .ba-addr-v,
.ba-v-home .ba-bar:not(.is-solid) .ba-iconbtn,
.ba-v-home .ba-bar:not(.is-solid) .ba-addr-chev { color: #fff; }
.ba-v-home .ba-bar:not(.is-solid) .ba-addr:hover,
.ba-v-home .ba-bar:not(.is-solid) .ba-iconbtn:hover { background: rgba(255, 255, 255, 0.14); }
.ba-v-home .ba-bar { position: fixed; left: 0; right: 0; }
.ba-v-home .ba-hero { margin-top: 0; }

.ba-chips--home { margin-top: 6px; }
/* Поле у ленты своё (внутри дорожки), второе от раздела давало
   ступеньку между «пилюлями» и заголовком под ними. */
.ba-v-home .ba-main > .ba-chips--home { padding-left: 0; padding-right: 0; }

.ba-chips--home .ba-chips-track { padding-top: 16px; }

/* ── Магазины ────────────────────────────────────────────────────── */
.ba-stores {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px 18px;
}
@media (min-width: 600px) { .ba-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ba-stores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ba-store {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: var(--ba-r-lg);
	overflow: hidden;
	background: var(--ba-surface);
	box-shadow: 0 0 0 1px var(--ba-line), var(--ba-sh-2);
	transition: transform var(--ba-d2) var(--ba-ease), box-shadow var(--ba-d2) var(--ba-ease);
}
.ba-store:active { transform: scale(0.985); }
@media (hover: hover) { .ba-store:hover { box-shadow: 0 0 0 1px var(--ba-line), var(--ba-sh-3); } }
.ba-store.is-hidden { display: none; }
/* Дальше радиуса поиска, выбранного в окне адреса (app.js, `farCheck`). */
.ba-store.is-far { display: none; }
.ba-store.is-far { opacity: 0.55; }

.ba-store-cover {
	position: relative;
	display: block;
	aspect-ratio: 16 / 7.4;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ba-accent-soft-2), var(--ba-surface-2));
}
.ba-store-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ba-ease-out);
}
@media (hover: hover) { .ba-store:hover .ba-store-cover img { transform: scale(1.04); } }
.ba-store-state {
	position: absolute;
	top: 10px;
	left: 10px;
	box-shadow: var(--ba-sh-1);
	background: rgba(255, 255, 255, 0.95);
	color: #101216;
}
.ba-store[data-status="closed"] .ba-store-cover img { filter: saturate(0.4) brightness(0.92); }
/* Пока состояние не посчитано, плашки и строки времени НЕ ВИДНО —
   вместо слова «Loading», которое через долю секунды сменялось на
   «Open» (владелец, 1 октября: «get rid of this blinking»). Место под
   них занято, карточка не прыгает; посчитали — проявились, все разом
   и одинаково: плашка, минуты и число магазинов у заголовка. Отметку
   `data-status` ставит `paintStatus()` в `app.js`. */
.ba-store-state, .ba-store-eta, .ba-h2-n { transition: opacity 180ms var(--ba-ease); }
.ba-store-state:not([data-status]) { opacity: 0; }
.ba-store-eta:has([data-ba-eta]:empty), .ba-h2-n:empty { opacity: 0; }

/* Знак стоит на краю фото, половиной на нём — так карточка читается
   одним целым, а не фото с подписью где-то под ним. */
.ba-store-b {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0 14px 14px;
}
.ba-store-logo {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex: none;
	margin-top: -22px;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 3px var(--ba-surface), var(--ba-sh-2);
	font: 800 22px/1 var(--ba-font-display);
	color: var(--ba-accent);
}
.ba-store-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ba-store-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 10px; }
.ba-store-n {
	font: 750 var(--ba-fs-lg)/1.2 var(--ba-font-display);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ba-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ba-store-m {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	color: var(--ba-ink-2);
	font-size: var(--ba-fs-sm);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.ba-store-m > span:empty, .ba-store-m > [hidden] { display: none; }
.ba-store-eta { display: inline-flex; align-items: center; gap: 5px; color: var(--ba-ink); font-weight: 700; }
.ba-store-eta .ba-i { width: 16px; height: 16px; color: var(--ba-accent); }
.ba-store-km::before { content: "·"; margin-right: 12px; color: var(--ba-ink-3); }
.ba-store-r { display: inline-flex; align-items: center; gap: 3px; }
.ba-store-r .ba-i { width: 14px; height: 14px; color: #f5b301; }
.ba-store-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/*
 * Карточка «вы заказываете для работы» — вид у ядра (`company.css`),
 * здесь только место. Пока браузер её не заполнил, её нет вовсе:
 * пустая обёртка с отступом сдвинула бы всё под собой в момент появления.
 */
.ba-company:has(> .bm-company[hidden]) { display: none; }
.ba-company .bm-company { margin: 0; }
.ba-company--home { margin-top: 16px; }
.ba-company--store { margin-top: 14px; }

/*
 * «Принимаем карты питания» (ядро, PART 63; рисовалка — `bma_meal_note_html()`).
 * Два вида одной вещи: строка под итогом корзины и заметка над способами
 * оплаты. В корзине — тёплый «янтарный» знак на спокойной подложке:
 * новость, а не предупреждение. На главной — метка «New» у кнопки «?»
 * и карточка в шторке (`.ba-newtag`, `.ba-how-card--new`).
 *
 * НА КАССЕ ЗАМЕТКА РОЗОВАЯ (владелец, 11 октября: «чтобы было заметнее»).
 * Серая подложка сливалась с серыми карточками способов оплаты под ней,
 * и человек с картой питания проходил мимо. Розовый — тот же, что у метки
 * «New» и карточки-новости в шторке (`--ba-promo`): одна новость одним
 * цветом на всех трёх экранах. Подложка и обводка считаются ОТ него
 * и от поверхности темы — в тёмной теме заметка остаётся розовой,
 * а не светлым пятном.
 */
.ba-meal { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; color: var(--ba-ink); font: inherit; text-align: left; }
.ba-meal > .ba-i-meal { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 10px; border-radius: 13px; background: color-mix(in srgb, var(--ba-warn, #f59e0b) 18%, var(--ba-surface)); color: color-mix(in srgb, var(--ba-warn, #f59e0b) 62%, var(--ba-ink)); }
.ba-meal-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ba-meal-t b { font-size: var(--ba-fs-md); font-weight: 750; }
.ba-meal-t > span { font-size: var(--ba-fs-sm); line-height: 1.35; color: var(--ba-ink-2); overflow-wrap: anywhere; }
.ba-meal-b { font-weight: 650; color: var(--ba-ink) !important; }

.ba-meal--pay {
	margin: 0 0 12px;
	padding: 12px;
	border-radius: var(--ba-r-md, 14px);
	background: color-mix(in srgb, var(--ba-promo) 9%, var(--ba-surface));
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ba-promo) 42%, transparent);
}
.ba-meal--pay > .ba-i-meal { background: var(--ba-promo); color: var(--ba-promo-ink); }
.ba-meal--pay .ba-meal-t b { color: color-mix(in srgb, var(--ba-promo) 80%, var(--ba-ink)); }

.ba-meal--line { gap: 8px; margin-top: 10px; font-size: var(--ba-fs-sm); color: var(--ba-ink-2); }
.ba-meal--line > .ba-i-meal { width: 16px; height: 16px; padding: 5px; border-radius: 9px; }
.ba-meal--line .ba-meal-b { font-weight: 600; }

/* «Укажите адрес» — одна кнопка во всю ширину над списком магазинов. */
.ba-nudge {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0 0 16px;
	padding: 14px;
	border: 0;
	border-radius: var(--ba-r-lg);
	background: var(--ba-accent-soft);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ba-accent) 28%, transparent);
	color: var(--ba-ink);
	text-align: left;
	font: inherit;
	cursor: pointer;
	animation: ba-nudge-in 0.4s var(--ba-ease-out) both;
}
.ba-nudge[hidden] { display: none; }
.ba-nudge:active { transform: scale(0.99); }
@keyframes ba-nudge-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ba-nudge-i {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--ba-accent);
	color: #fff;
}
.ba-nudge-i .ba-i { width: 22px; height: 22px; }
.ba-nudge-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ba-nudge-t strong { font-size: var(--ba-fs-md); font-weight: 750; }
.ba-nudge-t span { font-size: var(--ba-fs-sm); line-height: 1.35; color: var(--ba-ink-2); }
.ba-nudge-go {
	flex: none;
	padding: 9px 14px;
	border-radius: var(--ba-r-pill);
	background: var(--ba-accent);
	color: #fff;
	font-size: var(--ba-fs-sm);
	font-weight: 700;
}

.ba-stores-none {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 40px 16px;
	text-align: center;
	color: var(--ba-ink-2);
}
.ba-stores-none .ba-i { width: 32px; height: 32px; color: var(--ba-accent); }
/* Две кнопки пустого списка: «сообщите, когда откроетесь» и «сменить адрес». */
.ba-stores-none-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ba-stores-none-go .ba-btn[hidden] { display: none; }
.ba-stores-none-go .ba-btn .ba-i { width: 18px; height: 18px; color: inherit; }

.ba-how .ba-sec-h { margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════════════
 * 7. МАГАЗИН
 * ═══════════════════════════════════════════════════════════════════ */

.ba-shero { position: relative; }

/*
 * ОБЛОЖКА СТОИТ, КАРТОЧКА НАЕЗЖАЕТ НА НЕЁ (владелец, 29 сентября).
 * Липкая она только внутри `.ba-shero-wrap` (обложка + карточка):
 * накрыла карточка — обложка уезжает вместе с ней. До 30 сентября
 * она стояла под всей витриной, и на iPhone при быстрой прокрутке
 * просвечивала в щелях над и под лентой отделов — слой витрины
 * не успевал дорисоваться поверх. Пока карточка её закрывает, обложка
 * чуть темнеет и приближается (где браузер умеет анимацию от прокрутки).
 */
.ba-v-store .ba-shero-cover { position: sticky; top: 0; z-index: 0; }
.ba-v-store .ba-shero,
/*
 * `flow-root` — против щели над лентой отделов (владелец, 30 сентября:
 * «при прокрутке между кнопками и лентой видно картинку»). У ленты
 * `margin-top: 12px`, и без своего контекста блок магазина отдавал этот
 * отступ наружу (схлопывание полей): фон магазина начинался на 12 px
 * ниже, чем кончалась шапка, и в щели была видна прилипшая обложка.
 */
.ba-v-store .ba-shop { position: relative; z-index: 1; display: flow-root; background: var(--ba-bg); }
.ba-v-store .ba-shero { background: transparent; }
@supports (animation-timeline: scroll()) {
	.ba-v-store .ba-shero-cover img {
		animation: ba-cover-sink linear both;
		animation-timeline: scroll(root);
		animation-range: 0 320px;
	}
}
@keyframes ba-cover-sink { to { transform: scale(1.08); filter: brightness(0.7); } }

.ba-shero-cover {
	position: relative;
	height: clamp(150px, 38vw, 280px);
	background: linear-gradient(135deg, var(--ba-accent), color-mix(in srgb, var(--ba-accent) 55%, #0b1a4a));
	overflow: hidden;
}
.ba-shero-cover img { width: 100%; height: 100%; object-fit: cover; }
.ba-shero-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 45%);
}

/*
 * Карточка магазина наезжает на обложку скруглённым краем — как лист,
 * выдвинутый поверх фото. Знак стоит В СТРОКЕ с названием, а не висит
 * отдельной белой подложкой на краю (29 сентября владелец увидел, что
 * подложка налезает на карточку и выглядит ошибкой).
 */
.ba-v-store .ba-shero-card {
	position: relative;
	z-index: 1;
	margin-top: -22px;
	padding-top: 18px;
	padding-bottom: 4px;
	border-radius: var(--ba-r-xl) var(--ba-r-xl) 0 0;
	background: var(--ba-bg);
}
@media (min-width: 1244px) {
	.ba-v-store .ba-shero-card { border-radius: var(--ba-r-xl); margin-top: -40px; box-shadow: var(--ba-sh-2); padding-bottom: 16px; }
}
.ba-shero-row { display: flex; align-items: center; gap: 14px; }
.ba-shero-tt { display: grid; gap: 6px; min-width: 0; }
.ba-shero-n {
	font-size: clamp(22px, 5.6vw, 32px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-wrap: balance;
}
.ba-shero-m {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	color: var(--ba-ink-2);
	font-size: var(--ba-fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.ba-shero-state { background: var(--ba-surface-2); }
.ba-shero-eta, .ba-shero-r { display: inline-flex; align-items: center; gap: 5px; color: var(--ba-ink); }
.ba-shero-eta .ba-i, .ba-shero-r .ba-i { width: 17px; height: 17px; }
.ba-shero-r .ba-i { color: #f5b301; }
.ba-shero-note {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: var(--ba-r-sm);
	/* Нейтральная подложка: это пояснение, а не тревога. Цвет «warn»
	   берётся из настройки оранжевого и на живом сайте выходил лиловым. */
	background: var(--ba-surface-2);
	color: var(--ba-ink);
	font-size: var(--ba-fs-sm);
	font-weight: 500;
}
.ba-shero-a { display: flex; align-items: center; gap: 5px; margin: -2px 0 0; color: var(--ba-ink-3); font-size: var(--ba-fs-xs); font-weight: 500; line-height: 1.3; }
.ba-shero-a .ba-i { width: 14px; height: 14px; flex: none; }
.ba-shero-a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Три действия магазина — поровну в ряд, помощник выделен. */
.ba-shero-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.ba-act {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	height: 44px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--ba-r-md);
	background: var(--ba-surface-2);
	color: var(--ba-ink);
	font: 700 var(--ba-fs-sm)/1 var(--ba-font);
	cursor: pointer;
	transition: transform var(--ba-d1) var(--ba-ease), background-color var(--ba-d2);
}
.ba-act span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-act .ba-i { width: 18px; height: 18px; flex: none; }
.ba-act:active { transform: scale(0.96); }
.ba-act--ai {
	background: linear-gradient(120deg, var(--ba-accent), color-mix(in srgb, var(--ba-accent) 55%, #b34dff));
	color: #fff;
	box-shadow: var(--ba-sh-accent);
}

/*
 * Лента отделов — липкая прямо под шапкой. Шапка витрины фиксирована
 * (лежит поверх обложки), поэтому высоту её берём переменной, а не
 * мерим: одна мерка на всё — 23 августа их было две, и первый ряд
 * товаров прятался под шапкой.
 */
.ba-depts {
	position: sticky;
	top: calc(var(--ba-bar-h) + var(--ba-safe-t));
	z-index: 30;
	margin: 12px calc(var(--ba-g) * -1) 0;
	background: var(--ba-glass);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	transition: box-shadow var(--ba-d2) var(--ba-ease);
}
.ba-depts.is-stuck { box-shadow: 0 1px 0 var(--ba-line), 0 8px 16px -12px rgba(0, 0, 0, 0.2); }
.ba-chips--sub .ba-chips-track { padding-top: 0; }
.ba-chips--sub .ba-chip { height: 32px; padding: 0 12px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ba-line-2); font-size: var(--ba-fs-xs); }
.ba-chips--sub .ba-chip.is-on { background: var(--ba-accent-soft); color: var(--ba-accent); box-shadow: inset 0 0 0 1.5px var(--ba-accent); }

/* Ряд под «Deals» — цветом акций, как сама кнопка «Deals». */
.ba-chips--sub.is-deals .ba-chip { color: var(--ba-promo); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ba-promo) 35%, transparent); background: color-mix(in srgb, var(--ba-promo) 7%, transparent); }
.ba-chips--sub.is-deals .ba-chip.is-on { background: var(--ba-promo); color: #fff; box-shadow: none; }
.ba-chip-n { margin-left: 6px; padding: 1px 6px; border-radius: 9px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: 10px; font-weight: 800; line-height: 1.5; }

/* Третий ряд — полки полок: тише второго, чтобы три ряда читались
   ступенями, а не тремя одинаковыми полосами кнопок. */
.ba-chips--sub3 .ba-chips-track { padding-top: 0; gap: 4px; }
.ba-chips--sub3 .ba-chip { height: 28px; padding: 0 10px; background: transparent; color: var(--ba-ink-2); font-size: var(--ba-fs-xs); font-weight: 600; box-shadow: none; }
.ba-chips--sub3 .ba-chip.is-on { background: var(--ba-surface-2); color: var(--ba-ink); box-shadow: inset 0 -2px 0 var(--ba-accent); border-radius: 8px; }

/*
 * Новые полки въезжают на своё место, а не выскакивают (владелец,
 * 2 октября: «clean and nice smooth»). Ряд при смене отдела — каждый раз
 * НОВЫЙ узел (`freshChips` в app.js), поэтому анимация играет сама
 * и запускать её скриптом не нужно.
 *
 * Едет дорожка, а не сама лента: сдвинь ленту — и вместе с ней уедет
 * её край, за которым пилюли обязаны прятаться.
 *
 * Без `both`: доигравшая анимация с удержанием оставляет дорожке сдвиг
 * навсегда — пусть и нулевой, — а с ним отдельный слой внутри ленты.
 * Кончилась — и следа от неё нет.
 */
.ba-chips--sub .ba-chips-track,
.ba-chips--sub3 .ba-chips-track { animation: ba-chips-in var(--ba-d3) var(--ba-ease-out); }
@keyframes ba-chips-in { from { opacity: 0; transform: translateX(18px); } }

.ba-shop-body { min-height: 60vh; transition: opacity var(--ba-d2) var(--ba-ease); }
.ba-shop-body.is-loading { opacity: 0.4; pointer-events: none; }
.ba-shop-body > .ba-sec:first-child { margin-top: 18px; }
.ba-shop-body > [data-ba-goods] { margin-top: 18px; }

/* ═══════════════════════════════════════════════════════════════════
 * 8. ТОВАРЫ
 * ═══════════════════════════════════════════════════════════════════ */

.ba-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 12px;
}
@media (min-width: 520px) { .ba-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .ba-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; } }
@media (min-width: 1100px) { .ba-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.ba-card { position: relative; min-width: 0; display: flex; flex-direction: column; }
.ba-card-img {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: var(--ba-r-md);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--ba-line);
	overflow: hidden;
	transition: transform var(--ba-d1) var(--ba-ease);
}
.ba-card-img:active { transform: scale(0.97); }
.ba-card-img img {
	width: 100%;
	height: 100%;
	padding: 10%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
/* Фото товаров сняты на белом — в тёмной теме подложка остаётся светлой. */
:root[data-theme="dark"] .ba-card-img,
:root[data-theme="dark"] .ba-pd-img { background: #f4f5f8; }
@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] .ba-card-img,
	:root[data-theme="system"] .ba-pd-img { background: #f4f5f8; }
}
.ba-card-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ba-ink-3); background: var(--ba-surface-2); }
.ba-card-noimg .ba-i { width: 30px; height: 30px; }

.ba-card-b { display: flex; flex-direction: column; gap: 2px; padding: 9px 2px 0; }
.ba-card-p {
	font: 750 var(--ba-fs-md)/1.2 var(--ba-font);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ba-ink);
}
.ba-card-p del { color: var(--ba-ink-3); font-weight: 500; font-size: 0.86em; margin-right: 4px; }
.ba-card-p ins { text-decoration: none; color: var(--ba-promo); }
.ba-card-p small { font-weight: 500; color: var(--ba-ink-3); }
.ba-card-n {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--ba-ink-2);
	font-size: var(--ba-fs-sm);
	line-height: 1.3;
}
.ba-card-out { color: var(--ba-bad); font-size: var(--ba-fs-xs); font-weight: 700; margin-top: 2px; }
.ba-card.is-out .ba-card-img img { opacity: 0.45; filter: grayscale(1); }

/*
 * «+», который раскрывается в счётчик.
 *
 * Стоит в правом нижнем углу фото. В свёрнутом виде виден один «+»;
 * в раскрытом — «−», число и «+». Ширина меняется плавно, а числу
 * дано место цифрами одной ширины: иначе «9 → 10» дёргал бы кнопку.
 */
.ba-card { container-type: inline-size; }
.ba-step {
	display: flex;
	align-items: center;
	height: 38px;
	border-radius: var(--ba-r-pill);
	background: var(--ba-surface);
	color: var(--ba-ink);
	box-shadow: 0 0 0 1px var(--ba-line), 0 4px 14px -4px rgba(16, 18, 22, 0.28);
	transition: background-color var(--ba-d2) var(--ba-ease), color var(--ba-d2) var(--ba-ease), box-shadow var(--ba-d2) var(--ba-ease);
}
/* Фото квадратное, значит его высота равна ширине карточки — `100cqw`. */
.ba-card > .ba-step {
	position: absolute;
	z-index: 3;
	right: 8px;
	top: calc(100cqw - 46px);
}

.ba-step-b {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-width: 38px;
	min-height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: transform var(--ba-d1) var(--ba-ease);
}
.ba-step-b .ba-i { width: 20px; height: 20px; stroke-width: 2.2; }
.ba-step-b:active { transform: scale(0.84); }
.ba-step-n {
	min-width: 0;
	max-width: 0;
	overflow: hidden;
	font: 800 var(--ba-fs-md)/1 var(--ba-font);
	font-variant-numeric: tabular-nums;
	text-align: center;
	transition: max-width var(--ba-d2) var(--ba-ease), min-width var(--ba-d2) var(--ba-ease);
}
.ba-step-minus { max-width: 0; min-width: 0; width: 0; overflow: hidden; opacity: 0; transition: all var(--ba-d2) var(--ba-ease); }
/* Нейтральная тень, а не голубая: счётчик стоит на карточке в ленте, и край ленты резал голубое свечение. */
.ba-step.is-on { background: var(--ba-accent); color: var(--ba-accent-ink); box-shadow: 0 2px 8px -2px rgba(16, 18, 22, 0.28); }
.ba-step.is-on .ba-step-minus { max-width: 38px; min-width: 38px; width: 38px; opacity: 1; }
.ba-step.is-on .ba-step-n { max-width: 36px; min-width: 22px; }
.ba-step.is-busy { opacity: 0.85; }
.ba-step.is-pop { animation: ba-bump 360ms var(--ba-spring); }

/* Большой счётчик: страница и шторка товара. */
.ba-step--lg {
	position: static;
	margin: 0;
	width: 100%;
	height: 56px;
	justify-content: space-between;
	border-radius: var(--ba-r-lg);
	background: var(--ba-accent);
	color: var(--ba-accent-ink);
	box-shadow: var(--ba-sh-accent);
}
.ba-step--lg .ba-step-b { width: 56px; height: 56px; min-width: 56px; min-height: 56px; }
.ba-step--lg .ba-step-plus { flex: 1; width: auto; max-width: none; border-radius: var(--ba-r-lg); display: flex; gap: 8px; justify-content: center; font: 700 var(--ba-fs-lg)/1 var(--ba-font); }
.ba-step--lg.is-on .ba-step-plus { flex: none; width: 56px; }
/* Свёрнутый «−» у большой кнопки держал 56 px слева (правило размера
   большой кнопки сильнее правила «спрятать»), и «Add to cart» уезжал
   вправо от центра — 29 сентября. */
.ba-step--lg:not(.is-on) .ba-step-minus,
.ba-step--lg:not(.is-on) .ba-step-n { width: 0; min-width: 0; max-width: 0; padding: 0; }
.ba-step--lg:not(.is-on) .ba-step-plus { width: 100%; }
.ba-step--lg.is-on .ba-step-l { display: none; }
.ba-step--lg.is-on .ba-step-minus { max-width: 56px; min-width: 56px; width: 56px; }
.ba-step--lg .ba-step-n { font-size: var(--ba-fs-xl); }
.ba-step--lg.is-on .ba-step-n { max-width: 80px; min-width: 60px; flex: 1; }

/* ── Подробности товара ──────────────────────────────────────────── */
.ba-pd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.ba-pd-img {
	position: relative;
	aspect-ratio: 1;
	max-height: 56vh;
	margin: 0 auto;
	width: 100%;
	border-radius: var(--ba-r-xl);
	background: #fff;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px var(--ba-line);
}
.ba-pd-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.ba-pd-b { display: grid; gap: 8px; }
.ba-pd-store {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-self: start;
	height: 30px;
	padding: 0 10px 0 8px;
	border-radius: var(--ba-r-pill);
	background: var(--ba-surface-2);
	color: var(--ba-ink-2);
	font: 700 var(--ba-fs-xs)/1 var(--ba-font);
}
.ba-pd-store .ba-i { width: 15px; height: 15px; }
.ba-pd-n { font-size: var(--ba-fs-2xl); font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.ba-pd-p { font: 800 var(--ba-fs-xl)/1.2 var(--ba-font); font-variant-numeric: tabular-nums; }
.ba-pd-p del { color: var(--ba-ink-3); font-weight: 500; font-size: 0.75em; margin-right: 6px; }
.ba-pd-p ins { text-decoration: none; color: var(--ba-promo); }

/*
 * Акция «от N штук» под ценой (ядро печатает два куска: условие и цену
 * штуки). Условие — тем же ярлыком, что на фотографии товара; цена —
 * тем же цветом, словами: это вторая цена товара, а не оговорка.
 * До 8 октября куски стояли вплотную, серым: «50% off from 216,47 € each…».
 *
 * `!important` — не против чужой темы, а против СВОЕГО ядра: на полной
 * странице товара приезжает его `promo.css`, написанный под прежний облик
 * (розовая подложка с отступами, число тёмным), и там всё помечено важным.
 * В окне товара этого файла нет вовсе. Без пометок один и тот же блок
 * выглядел бы по-разному на двух экранах; побеждаем точностью селектора.
 */
.ba-pd-promo { margin-top: 2px; }
.ba-pd-promo .bmpromo-offer {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}
.ba-pd-promo .bmpromo-badge {
	flex: none;
	display: inline-flex !important;
	align-items: center;
	height: 22px;
	margin: 0 !important;
	padding: 0 8px !important;
	border-radius: 7px !important;
	background-color: var(--ba-promo) !important;
	color: var(--ba-promo-ink) !important;
	font: 750 var(--ba-fs-xs)/1 var(--ba-font) !important;
	white-space: nowrap !important;
}
.ba-pd-promo .bmpromo-offer__price {
	min-width: 0;
	color: var(--ba-promo) !important;
	font-size: var(--ba-fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}
.ba-pd-promo .bmpromo-offer__price b,
.ba-pd-promo .bmpromo-offer__price .woocommerce-Price-amount {
	color: inherit !important;
	font-size: var(--ba-fs-md) !important;
	font-weight: 800 !important;
	font-variant-numeric: tabular-nums;
}
.ba-pd-d { color: var(--ba-ink-2); }
.ba-pd-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ba-pd-extra { display: grid; gap: 8px; font-size: var(--ba-fs-sm); color: var(--ba-ink-2); }
.ba-pd-extra > * { margin: 0 !important; }
.ba-pd-buy {
	position: sticky;
	bottom: calc(var(--ba-tab-h) + var(--ba-safe-b) + 10px);
	z-index: 5;
	padding-top: 8px;
}
.ba-product-page { padding-top: calc(var(--ba-bar-h) + var(--ba-safe-t) + 8px); }
@media (min-width: 900px) {
	.ba-product-page .ba-pd {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-areas: "img b" "img buy";
		align-items: start;
		gap: 24px 40px;
		padding-top: 24px;
	}
	.ba-product-page .ba-pd-img { grid-area: img; }
	.ba-product-page .ba-pd-b { grid-area: b; }
	.ba-product-page .ba-pd-buy { grid-area: buy; position: static; }
}

/* ── Выдача поиска по магазинам ──────────────────────────────────── */
.ba-result-store {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font: 800 var(--ba-fs-lg)/1.2 var(--ba-font-display);
	letter-spacing: -0.015em;
}
.ba-result-store small { color: var(--ba-ink-3); font: 600 var(--ba-fs-sm)/1 var(--ba-font); }
.ba-result-store > .ba-i:first-child { color: var(--ba-accent); }
.ba-result-store > .ba-i:last-child { margin-left: auto; color: var(--ba-ink-3); width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════════════════════════
 * 9. ШТОРКИ
 * ═══════════════════════════════════════════════════════════════════ */

.ba-scrim {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--ba-scrim);
	opacity: 0;
	transition: opacity var(--ba-d3) var(--ba-ease);
}
.ba-scrim.is-on { opacity: 1; }

.ba-sheet {
	position: fixed;
	z-index: 70;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	max-height: min(92dvh, 900px);
	padding-bottom: var(--ba-safe-b);
	border-radius: var(--ba-r-xl) var(--ba-r-xl) 0 0;
	background: var(--ba-surface);
	box-shadow: var(--ba-sh-3);
	transform: translateY(105%);
	transition: transform var(--ba-d3) var(--ba-ease-out);
	will-change: transform;
	overscroll-behavior: contain;
}
.ba-sheet.is-on { transform: translateY(0); }

/*
 * ДВИЖЕНИЕ ШТОРОК — ПРЕЖНЕЕ, БЫСТРОЕ (владелец, 30 сентября: «шторка
 * едет медленно и рывками, верните как было»). 29 сентября открытие
 * растянули до 520 мс кривой iOS — на телефоне владельца это читалось
 * как медлительность, а не как плавность. Вернули 380 мс с торможением
 * в обе стороны.
 *
 * Рывки при этом лечились не длительностью: во время въезда внутри
 * шторки мерцала заглушка (её слой перерисовывался каждый кадр), а класс
 * блокировки прокрутки заставлял пересчитать стили всей страницы. Обе
 * причины убраны — см. `.ba-cart-skel` в `cart.css` и `pauseBehind()`
 * в `app.js`. Слой шторки собран заранее (`contain`, `backface-visibility`):
 * браузер двигает готовую картинку.
 */
.ba-sheet {
	transition: transform var(--ba-d3) var(--ba-ease-out);
	contain: layout paint;
	backface-visibility: hidden;
}
.ba-sheet.is-on { transition: transform var(--ba-d3) var(--ba-ease-out); }
.ba-sheet.is-dragging { transition: none !important; }
/* Брошенная пальцем шторка уходит с торможением: разгон с середины пути
   выглядел бы как задержка перед падением. Затемнение — тем же ритмом. */
.ba-sheet.is-flung { transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.ba-scrim.is-dragging { transition: none !important; }
/* За ручку и заголовок шторку только тянут — прокручивать там нечего,
   и браузер не тратит первое движение на попытку прокрутки. */
.ba-sheet .ba-grab, .ba-sheet .ba-sheet-h { touch-action: none; }
.ba-scrim, .ba-scrim.is-on { transition: opacity var(--ba-d3) var(--ba-ease); }
@media (prefers-reduced-motion: reduce) {
	.ba-sheet, .ba-sheet.is-on, .ba-scrim, .ba-scrim.is-on { transition-duration: 1ms; }
}

/*
 * КЛАВИАТУРА ОТКРЫТА — ШТОРКА СТОИТ НАД НЕЙ, А НЕ ПОД НЕЙ.
 * `--ba-kb` и `--ba-vvh` ставит `app.js` по видимой части экрана.
 * Без этого список покупок печатали вслепую: поле уходило под клавиатуру.
 */
.ba-kb .ba-sheet:not(.ba-sheet--search) {
	bottom: var(--ba-kb, 0px);
	max-height: calc(var(--ba-vvh, 100dvh) - 12px);
	padding-bottom: 0;
	transition: transform var(--ba-d3) var(--ba-ease-out), bottom var(--ba-d2) var(--ba-ease-out);
}
.ba-sheet.is-dragging { transition: none; }
.ba-grab {
	flex: none;
	width: 40px;
	height: 5px;
	margin: 8px auto 4px;
	border-radius: 3px;
	background: var(--ba-line-2);
	cursor: grab;
}
.ba-sheet-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 8px var(--ba-g) 24px;
}
.ba-sheet-x { position: absolute; top: 12px; right: 12px; z-index: 3; background: var(--ba-surface-2); }

.ba-sheet--full {
	top: 0;
	max-height: none;
	border-radius: 0;
	padding-top: var(--ba-safe-t);
	transform: translateY(24px);
	opacity: 0;
	pointer-events: none;
	transition: transform var(--ba-d3) var(--ba-ease-out), opacity var(--ba-d2) var(--ba-ease);
}
.ba-sheet--full.is-on { transform: none; opacity: 1; pointer-events: auto; }

/*
 * ШТОРКА ТОВАРА НЕ ЕЗДИТ И НЕ ЛИСТАЕТСЯ (владелец, 29 сентября: «её
 * можно двигать вбок и вверх-вниз, а всё должно помещаться на экран —
 * картинку можно сделать меньше»).
 *
 * Высота шторки — своя, по видимой части экрана; внутри колонка,
 * где КАРТИНКА забирает остаток и сжимается первой (до 120 px),
 * а название, цена и кнопка стоят целиком. Жесты браузера на шторке
 * выключены (`touch-action: none`) — смахивание вниз остаётся нашим
 * (`app.js`), а сдвигать её вбок или листать больше нечем.
 * Длинное описание, если оно есть, листается само внутри себя.
 */
.ba-sheet--product {
	height: min(calc(var(--ba-vvh, 100dvh) - 28px), 820px);
	overflow: hidden;
	touch-action: none;
	overscroll-behavior: none;
}
.ba-sheet--product .ba-sheet-scroll {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 4px var(--ba-g) 14px;
}
.ba-sheet--product .ba-pd { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
.ba-sheet--product .ba-pd-img { flex: 1 1 0; min-height: 120px; max-height: 44vh; height: auto; aspect-ratio: auto; border-radius: var(--ba-r-lg); }
.ba-sheet--product .ba-pd-img img { padding: 6%; }
.ba-sheet--product .ba-pd-b { flex: 0 1 auto; min-height: 0; gap: 6px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.ba-sheet--product .ba-pd-n { font-size: var(--ba-fs-xl); line-height: 1.2; }
.ba-sheet--product .ba-pd-p { font-size: var(--ba-fs-lg); }
.ba-sheet--product .ba-pd-d { font-size: var(--ba-fs-sm); line-height: 1.45; }
.ba-sheet--product .ba-pd-d p { margin: 0; }
.ba-sheet--product .ba-pd-buy { position: static; flex: none; padding: 0; background: none; }
.ba-sheet--product .ba-sheet-x { box-shadow: var(--ba-sh-1); }
@media (min-width: 760px) {
	.ba-sheet--product { height: min(86dvh, 780px); }
}

@media (min-width: 760px) {
	.ba-sheet:not(.ba-sheet--full):not(.ba-sheet--search) {
		left: 50%;
		right: auto;
		bottom: 50%;
		width: min(560px, calc(100vw - 48px));
		margin-left: calc(min(560px, calc(100vw - 48px)) / -2);
		border-radius: var(--ba-r-xl);
		transform: translateY(calc(50% + 40px)) scale(0.98);
		opacity: 0;
		pointer-events: none;
		transition: transform 260ms cubic-bezier(0.4, 0, 0.8, 0.4), opacity 200ms ease;
		max-height: min(86dvh, 860px);
	}
	.ba-sheet:not(.ba-sheet--full):not(.ba-sheet--search).is-on { transform: translateY(50%); opacity: 1; pointer-events: auto; transition: transform 440ms cubic-bezier(0.32, 0.72, 0, 1), opacity 260ms ease; }
	.ba-sheet:not(.ba-sheet--full):not(.ba-sheet--search) .ba-grab { visibility: hidden; }
	.ba-sheet--full { left: 50%; width: min(760px, 100vw); margin-left: calc(min(760px, 100vw) / -2); box-shadow: var(--ba-sh-3); }
}

/* ── Поиск ───────────────────────────────────────────────────────── */
.ba-search {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px calc(var(--ba-g) - 6px) 8px;
}
.ba-search-field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 6px 0 14px;
	border-radius: var(--ba-r-md);
	background: var(--ba-surface-2);
	color: var(--ba-ink-3);
	transition: box-shadow var(--ba-d2) var(--ba-ease);
}
.ba-search-field:focus-within { box-shadow: 0 0 0 2px var(--ba-accent); color: var(--ba-accent); }
.ba-search-field input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--ba-ink);
	font: 500 16px/1 var(--ba-font);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.ba-search-field input::-webkit-search-cancel-button { display: none; }
.ba-search-x {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ba-surface-3);
	color: var(--ba-ink-2);
	cursor: pointer;
}
.ba-search-x .ba-i { width: 16px; height: 16px; }
.ba-search-scope { padding: 0 var(--ba-g) 6px; }
.ba-search-scope .ba-chip { height: 32px; font-size: var(--ba-fs-xs); }
.ba-recent { display: flex; flex-wrap: wrap; gap: 8px; }
.ba-recent-h { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 12px; color: var(--ba-ink-3); font-size: var(--ba-fs-sm); font-weight: 700; }
.ba-recent-h button { border: 0; background: none; color: var(--ba-accent); font-weight: 700; cursor: pointer; }

/* ── Меню ────────────────────────────────────────────────────────── */
.ba-menu { display: grid; gap: 16px; padding-top: 4px; }
.ba-menu-me {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-radius: var(--ba-r-lg);
	background: var(--ba-surface-2);
	transition: transform var(--ba-d1) var(--ba-ease);
}
.ba-menu-me:active { transform: scale(0.98); }
.ba-menu-av {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 50%;
	background: var(--ba-accent-soft);
	color: var(--ba-accent);
}
.ba-menu-av [data-ba-initial] {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ba-accent);
	color: #fff;
	font: 800 19px/1 var(--ba-font);
}
.ba-menu-me-t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ba-menu-me-t b { font-size: var(--ba-fs-lg); }
.ba-menu-me-t small { color: var(--ba-ink-2); font-size: var(--ba-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ba-list {
	display: grid;
	border-radius: var(--ba-r-lg);
	background: var(--ba-surface);
	box-shadow: inset 0 0 0 1px var(--ba-line);
	overflow: hidden;
}
.ba-row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 0 14px;
	font-weight: 600;
	transition: background-color var(--ba-d1) var(--ba-ease);
}
.ba-row + .ba-row { box-shadow: 0 -1px 0 var(--ba-line); }
.ba-row:active { background: var(--ba-surface-2); }
.ba-row-i { color: var(--ba-ink-2); display: grid; }
.ba-row-t { flex: 1; min-width: 0; }
.ba-row-chev { width: 18px; height: 18px; color: var(--ba-ink-3); }

.ba-menu-h { margin: 4px 2px -6px; color: var(--ba-ink-3); font: 800 11px/1.2 var(--ba-font); letter-spacing: 0.06em; text-transform: uppercase; }
.ba-seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	padding: 4px;
	border-radius: var(--ba-r-md);
	background: var(--ba-surface-2);
}
.ba-seg-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--ba-ink-2);
	font: 700 var(--ba-fs-sm)/1 var(--ba-font);
	cursor: pointer;
	transition: background-color var(--ba-d2), color var(--ba-d2), box-shadow var(--ba-d2);
}
.ba-seg-i .ba-i { width: 17px; height: 17px; }
.ba-seg-i.is-on { background: var(--ba-surface); color: var(--ba-ink); box-shadow: var(--ba-sh-1); }
.ba-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.ba-lang {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 14px;
	border-radius: var(--ba-r-pill);
	background: var(--ba-surface-2);
	font: 600 var(--ba-fs-sm)/1 var(--ba-font);
}
.ba-lang.is-on { background: var(--ba-ink); color: var(--ba-bg); }

/* ── Сообщения ───────────────────────────────────────────────────── */
.ba-toasts {
	position: fixed;
	z-index: 90;
	left: 0;
	right: 0;
	bottom: calc(var(--ba-tab-h) + var(--ba-safe-b) + 76px);
	display: grid;
	justify-items: center;
	gap: 8px;
	pointer-events: none;
	padding: 0 var(--ba-g);
}
.ba-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 480px;
	padding: 12px 16px;
	border-radius: var(--ba-r-md);
	background: var(--ba-ink);
	color: var(--ba-bg);
	font-weight: 600;
	font-size: var(--ba-fs-sm);
	box-shadow: var(--ba-sh-3);
	pointer-events: auto;
	animation: ba-toast-in var(--ba-d3) var(--ba-spring);
}
.ba-toast.is-out { animation: ba-toast-out var(--ba-d2) var(--ba-ease) forwards; }
.ba-toast button { border: 0; background: none; color: var(--ba-accent-soft-2); color: #9db6ff; font-weight: 800; cursor: pointer; padding: 0; }
.ba-toast.is-bad { background: var(--ba-bad); color: #fff; }

.ba-progress {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--ba-accent);
	box-shadow: 0 0 10px var(--ba-accent);
	opacity: 0;
	transition: width 1.6s var(--ba-ease-out), opacity var(--ba-d2);
	pointer-events: none;
}
.ba-progress.is-on { opacity: 1; width: 78%; }
.ba-progress.is-done { opacity: 0; width: 100%; transition: width var(--ba-d2), opacity var(--ba-d3) 120ms; }

/* ═══════════════════════════════════════════════════════════════════
 * 10. СТРАНИЦЫ И ПОДВАЛ
 * ═══════════════════════════════════════════════════════════════════ */

.ba-page { max-width: 760px; margin: 0 auto; padding-top: 20px; }
.ba-page-title { margin-bottom: 18px; }

.ba-rich { font-size: var(--ba-fs-base); line-height: 1.65; color: var(--ba-ink); overflow-wrap: anywhere; }
.ba-rich > * + * { margin-top: 1em; }
.ba-rich h2 { font-size: var(--ba-fs-2xl); margin-top: 1.6em; }
.ba-rich h3 { font-size: var(--ba-fs-xl); margin-top: 1.4em; }
.ba-rich a { color: var(--ba-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ba-rich ul, .ba-rich ol { padding-left: 1.3em; }
.ba-rich img { border-radius: var(--ba-r-md); }
.ba-rich table { width: 100%; border-collapse: collapse; }
.ba-rich td, .ba-rich th { padding: 10px; border-bottom: 1px solid var(--ba-line); text-align: left; }
.ba-rich svg:not([width]):not(.ba-i) { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; }
.ba-rich blockquote { margin: 0; padding: 14px 18px; border-radius: var(--ba-r-md); background: var(--ba-surface-2); }

/* Подвала нет (30 сентября) — его ссылки мелко в конце меню. */
.ba-menu-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--ba-line);
	color: var(--ba-ink-3);
	font-size: var(--ba-fs-xs, 12px);
}
.ba-menu-legal a { color: var(--ba-ink-2); font-weight: 600; }
.ba-menu-legal span { flex-basis: 100%; }

/* Полоса «View cart» стоит над панелью — низ страницы не прячется под неё. */
.ba-app:has(.ba-cartbar:not([hidden])) .ba-main { padding-bottom: calc(var(--ba-tab-h) + var(--ba-safe-b) + 96px); }

/* Формы вне кассы (контакты, лист ожидания) — те же поля, что на кассе. */
.ba-main input[type="text"], .ba-main input[type="email"], .ba-main input[type="tel"], .ba-main input[type="password"],
.ba-main input[type="number"], .ba-main input[type="url"], .ba-main input[type="search"]:not([data-ba-search-input]),
.ba-main select, .ba-main textarea, .ba-input {
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	border: 1.5px solid var(--ba-line-2);
	border-radius: var(--ba-r-sm);
	background: var(--ba-surface);
	color: var(--ba-ink);
	font: 500 16px/1.3 var(--ba-font);
	transition: border-color var(--ba-d2) var(--ba-ease), box-shadow var(--ba-d2) var(--ba-ease);
	-webkit-appearance: none;
	appearance: none;
}
.ba-main textarea { min-height: 96px; resize: vertical; }
.ba-main input:focus, .ba-main select:focus, .ba-main textarea:focus, .ba-input:focus {
	border-color: var(--ba-accent);
	box-shadow: 0 0 0 4px var(--ba-accent-soft);
	outline: none;
}
.ba-main select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238a909d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 40px;
}
.ba-main button[type="submit"]:not(.ba-btn):not(.ba-iconbtn),
.ba-main input[type="submit"] {
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--ba-r-md);
	background: var(--ba-accent);
	color: var(--ba-accent-ink);
	font: 700 var(--ba-fs-md)/1 var(--ba-font);
	cursor: pointer;
	box-shadow: var(--ba-sh-accent);
	transition: transform var(--ba-d1) var(--ba-ease), background-color var(--ba-d2);
}
.ba-main button[type="submit"]:not(.ba-btn):not(.ba-iconbtn):active,
.ba-main input[type="submit"]:active { transform: scale(0.97); }

/* Страницы пагинации каталога. */
.navigation.pagination { margin-top: 28px; }
.nav-links { display: flex; justify-content: center; gap: 6px; }
.page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: var(--ba-r-sm);
	background: var(--ba-surface-2);
	font-weight: 700;
}
.page-numbers.current { background: var(--ba-ink); color: var(--ba-bg); }
.page-numbers .ba-i { width: 18px; height: 18px; }

/* Кнопка «назад» PART 50 — у нас своя в шапке. Метку `bm-in-app` PART 50
   ставит по-прежнему: по ней PART 52 открывает отправку счёта на почту. */
.webview-back-button { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
 * 11. ДВИЖЕНИЕ
 * ═══════════════════════════════════════════════════════════════════ */

/*
 * ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ ДЕЛАЕТ БРАУЗЕР.
 *
 * Страницы — настоящие, каждая со своими скриптами (у городских страниц
 * и кассы их много, и подменять разметку скриптом значило бы оставить
 * их без обработчиков — тихо). Браузер сам снимает старый кадр и плавно
 * меняет его на новый, а шапка и панель, названные одинаково на обеих
 * страницах, остаются стоять на месте. Карточка магазина превращается
 * в его обложку, фото товара — в фото на странице товара (имена ставит
 * скрипт в момент перехода).
 *
 * Где браузер не умеет (старые Safari), переход обычный — ничего
 * не ломается.
 */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 280ms;
	animation-timing-function: var(--ba-ease-out);
}
::view-transition-old(root) { animation-name: ba-vt-out; }
::view-transition-new(root) { animation-name: ba-vt-in; }

html:active-view-transition-type(back)::view-transition-old(root) { animation-name: ba-vt-out-back; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: ba-vt-in-back; }
html:active-view-transition-type(tab)::view-transition-old(root) { animation-name: ba-fade-out; animation-duration: 160ms; }
html:active-view-transition-type(tab)::view-transition-new(root) { animation-name: ba-fade-in; animation-duration: 200ms; }

::view-transition-group(ba-hero-img) {
	animation-duration: 420ms;
	animation-timing-function: var(--ba-ease-out);
}
::view-transition-old(ba-hero-img),
::view-transition-new(ba-hero-img) { height: 100%; object-fit: cover; overflow: clip; }

/*
 * КАРТОЧКА МАГАЗИНА — СВОИМ СЛОЕМ НАД ОБЛОЖКОЙ (владелец, 11 октября).
 *
 * Общую картинку перехода браузер рисует поверх снимка страницы, то есть
 * поверх верха карточки, который на обложку наезжает: этот верх появлялся
 * только в конце перехода, и граница шла ровно по нижнему краю обложки.
 * Карточка названа (`ba-hero-over`, имя ставит `nameShared()`), её слой
 * идёт после слоя обложки — как на самой странице.
 *
 * Двигается она ТАК ЖЕ, как страница, частью которой была: те же ключевые
 * кадры и та же длительность, что у `root`. Сдвиг у страницы задан
 * в процентах ЕЁ ширины, а у слоя карточки процент считался бы от ширины
 * карточки — на широком экране она уже окна, и карточка ехала бы медленнее
 * остальной страницы. Поэтому здесь сдвиг в `vw`.
 */
::view-transition-group(ba-hero-over) { animation: none; }
::view-transition-old(ba-hero-over),
::view-transition-new(ba-hero-over) {
	animation-duration: 280ms;
	animation-timing-function: var(--ba-ease-out);
	mix-blend-mode: normal;
}
::view-transition-old(ba-hero-over) { animation-name: ba-vt-over-out; }
::view-transition-new(ba-hero-over) { animation-name: ba-vt-over-in; }
html:active-view-transition-type(back)::view-transition-old(ba-hero-over) { animation-name: ba-vt-over-out-back; }
html:active-view-transition-type(back)::view-transition-new(ba-hero-over) { animation-name: ba-vt-over-in-back; }
html:active-view-transition-type(tab)::view-transition-old(ba-hero-over) { animation-name: ba-fade-out; animation-duration: 160ms; }
html:active-view-transition-type(tab)::view-transition-new(ba-hero-over) { animation-name: ba-fade-in; animation-duration: 200ms; }

@keyframes ba-vt-over-out { to { opacity: 0; transform: translateX(-6vw); } }
@keyframes ba-vt-over-in { from { opacity: 0; transform: translateX(10vw); } }
@keyframes ba-vt-over-out-back { to { opacity: 0; transform: translateX(8vw); } }
@keyframes ba-vt-over-in-back { from { opacity: 0; transform: translateX(-6vw); } }

@keyframes ba-vt-out { to { opacity: 0; transform: translateX(-6%); } }
@keyframes ba-vt-in { from { opacity: 0; transform: translateX(10%); } }
@keyframes ba-vt-out-back { to { opacity: 0; transform: translateX(8%); } }
@keyframes ba-vt-in-back { from { opacity: 0; transform: translateX(-6%); } }
@keyframes ba-fade-out { to { opacity: 0; } }
@keyframes ba-fade-in { from { opacity: 0; } }
@keyframes ba-bump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes ba-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--ba-ok-soft); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes ba-shimmer { to { background-position: -200% 0; } }
@keyframes ba-rot { to { transform: rotate(360deg); } }
@keyframes ba-rise { from { transform: translateY(24px); opacity: 0; } }
@keyframes ba-toast-in { from { transform: translateY(16px) scale(0.96); opacity: 0; } }
@keyframes ba-toast-out { to { transform: translateY(8px); opacity: 0; } }
@keyframes ba-appear { from { opacity: 0; transform: translateY(8px); } }

/* Новые карточки (подгрузка, смена отдела) — появляются, а не выскакивают. */
.ba-in { animation: ba-appear var(--ba-d3) var(--ba-ease-out) both; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
	@view-transition { navigation: none; }
}

/*
 * Ленты мышью (компьютер). Пока тянут — привязка к карточкам снята:
 * иначе браузер дёргал бы ленту к ближайшей карточке на каждом движении.
 * Курсор-«рука» — только там, где мышь, и только у того, что листается.
 */
.ba-grabbing { scroll-snap-type: none !important; scroll-behavior: auto !important; cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.ba-grabbing * { cursor: grabbing !important; }
@media (pointer: fine) {
	.ba-rail, .ba-chips, .ba-cart-stores, .ba-slot-days, .ba-tips, .ba-gifts, .ba-perks-steps, .ba-wel-langs, .ba-accnav ul { cursor: grab; }
	.ba-rail img, .ba-cart-stores img { -webkit-user-drag: none; user-select: none; }
}

/*
 * Закрытый магазин: вместо минут — первое окно доставки («Tomorrow ·
 * 09:00 – 10:00»). Значок часов вместо велосипеда: это не «едем»,
 * а «когда можем привезти».
 */
.is-slot [data-ba-eta-wrap] > .ba-i { display: none; }
.is-slot [data-ba-eta-wrap]::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--ba-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.is-slot [data-ba-eta] { color: var(--ba-accent); }
.ba-shero.is-slot .ba-shero-eta { font-weight: 700; }

/* Упаковка на карточке раздела «Запаситесь»: «+» кладёт её целиком,
   и цена упаковки стоит под ценой штуки — до нажатия, а не в корзине. */
.ba-card-pack { display: block; margin-top: 2px; color: var(--ba-accent); font-size: var(--ba-fs-xs, 12px); font-weight: 700; line-height: 1.3; }

/* ═══════════════════════════════════════════════════════════════════
 * 22. «ЕДА» — РЕСТОРАНЫ (ядро, PART 68; разметка — inc/food.php)
 * ═══════════════════════════════════════════════════════════════════ */

/*
 * Переключатель «Продукты / Еда» — сегмент во всю ширину под приветствием.
 * Обёртка получает поля экрана от общего правила главной, сам сегмент —
 * внутри неё: иначе серая подложка легла бы от края до края.
 */
.ba-vert { margin-top: 14px; }
.ba-vert-in {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	max-width: 460px;
	padding: 4px;
	border-radius: var(--ba-r-lg);
	background: var(--ba-surface-2);
}
.ba-vert-o {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	height: 46px;
	border-radius: 16px;
	color: var(--ba-ink-2);
	font: 750 var(--ba-fs-md)/1 var(--ba-font);
	transition: background-color var(--ba-d2) var(--ba-ease), color var(--ba-d2) var(--ba-ease), box-shadow var(--ba-d2) var(--ba-ease);
}
.ba-vert-o span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-vert-e { font-size: 18px; line-height: 1; }
.ba-vert-o.is-on { background: var(--ba-surface); color: var(--ba-ink); box-shadow: var(--ba-sh-1); }
.ba-vert-o:active { transform: scale(0.98); }
.ba-chips--home[hidden] { display: none; }

/* Карточки обоих разделов на странице; чужой раздел прячет стиль, а не скрипт —
   первый кадр верен и без него. */
.ba-stores[data-ba-vertical="food"] > .ba-store:not([data-vertical="food"]),
.ba-stores[data-ba-vertical="grocery"] > .ba-store[data-vertical="food"] { display: none; }

/* ── Меню ─────────────────────────────────────────────────────────── */
/* Имена — `ba-rmenu-*`: `.ba-menu` и `.ba-menu-h` заняты боковым меню сайта,
   и заголовок раздела меню приезжал его мелкой серой подписью. */
.ba-rmenu { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: 12px; }
/* Якорь раздела встаёт ПОД шапку и липкую ленту разделов, а не под них. */
.ba-rmenu-sec { padding-top: 24px; scroll-margin-top: calc(var(--ba-bar-h) + var(--ba-safe-t) + 62px); }
.ba-rmenu-h { margin: 0 0 2px; }
.ba-dishes { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
	.ba-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}

/*
 * Блюдо строкой: текст слева, фото справа, «+» на углу фото.
 * Колонка текста — `minmax(0, 1fr)`: длинное название без пробелов
 * не раздвигает строку шире экрана.
 */
.ba-dish {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid var(--ba-line);
}
.ba-dish.is-out { opacity: 0.55; }
.ba-dish-b { display: grid; gap: 4px; min-width: 0; align-content: start; color: inherit; }
.ba-dish-n { color: var(--ba-ink); font: 700 var(--ba-fs-base)/1.3 var(--ba-font); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ba-dish-i { margin-left: 6px; font-size: 14px; }
.ba-dish-d {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--ba-ink-2);
	font-size: var(--ba-fs-sm);
	line-height: 1.4;
}
.ba-dish-p { margin-top: 2px; color: var(--ba-ink); font: 750 var(--ba-fs-md)/1.3 var(--ba-font); font-variant-numeric: tabular-nums; }
.ba-dish-p del { color: var(--ba-ink-3); font-weight: 500; font-size: 0.85em; margin-right: 6px; }
.ba-dish-p ins { text-decoration: none; color: var(--ba-promo); }
.ba-dish-p em { font-style: normal; font-weight: 600; color: var(--ba-ink-3); }
.ba-dish-m { position: relative; flex: none; width: 108px; height: 108px; }
.ba-dish-img { display: block; width: 100%; height: 100%; border-radius: var(--ba-r-md); overflow: hidden; background: var(--ba-surface-2); }
.ba-dish-img img { width: 100%; height: 100%; object-fit: cover; }
.ba-dish-m > .ba-step { position: absolute; right: 6px; bottom: 6px; z-index: 2; }
/* Без фото — только «+», по центру строки. */
.ba-dish.is-noimg .ba-dish-m { width: auto; height: auto; align-self: center; }
.ba-dish.is-noimg .ba-dish-m > .ba-step { position: static; }

/* «+» у блюда с опциями: открывает окно; в кружке — сколько его в корзине. */
.ba-step--open { position: relative; padding: 0; border: 0; cursor: pointer; font: inherit; }
.ba-step--open .ba-step-b { pointer-events: none; }
.ba-step--open .ba-step-c {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--ba-r-pill);
	background: var(--ba-accent);
	color: var(--ba-accent-ink);
	font: 800 11px/20px var(--ba-font);
	font-variant-numeric: tabular-nums;
	text-align: center;
	box-shadow: 0 0 0 2px var(--ba-surface);
}
.ba-step--open .ba-step-c[hidden] { display: none; }
/* Число уже в кружке — саму кнопку в цвет действия не красим: это не счётчик. */
.ba-step--open.is-on { background: var(--ba-surface); color: var(--ba-ink); box-shadow: 0 0 0 1px var(--ba-line), 0 4px 14px -4px rgba(16, 18, 22, 0.28); }

/* ── Окно блюда ───────────────────────────────────────────────────── */
.ba-dish-all { margin: 2px 0 0; color: var(--ba-ink-2); font-size: var(--ba-fs-sm); line-height: 1.4; }
.ba-dish-all b { color: var(--ba-ink); font-weight: 700; }

/*
 * ОКНО БЛЮДА ЛИСТАЕТСЯ ЦЕЛИКОМ. Окно товара не листается вовсе (29 сентября):
 * всё помещается на экран, фото сжимается. У блюда так нельзя — в нём
 * опции, и их бывает три экрана. Поэтому листается сама карточка блюда,
 * фото — невысокой полосой, а ряд «количество + добавить» стоит у нижнего
 * края окна, что бы ни было над ним.
 */
.ba-sheet--product .ba-pd--dish {
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow-y: auto;
	touch-action: pan-y;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/*
	 * Листаемая часть доходит до самого низа окна (нижний отступ окна — 14px —
	 * забран обратно), а отступ под кнопкой отдан ряду с кнопкой. Иначе
	 * прилипший ряд вставал на 2px выше края прокрутки, и в щели под кнопкой
	 * проезжал текст опций — измерено: низ ряда 828, низ прокрутки 830.
	 */
	margin-bottom: -14px;
	padding-bottom: 0;
}
.ba-sheet--product .ba-pd--dish .ba-opts-buy { padding-bottom: 14px; }
.ba-sheet--product .ba-pd--dish .ba-pd-img { flex: none; height: clamp(140px, 26vh, 240px); min-height: 0; max-height: none; }
.ba-sheet--product .ba-pd--dish .ba-pd-img img { padding: 0; object-fit: cover; }
.ba-sheet--product .ba-pd--dish .ba-pd-b { flex: none; overflow: visible; }
/* Форма тянется до низа окна: тогда ряд с кнопкой прилипает к нему и у блюда без опций. */
.ba-sheet--product .ba-pd--dish .ba-pd-buy--dish { flex: 1 0 auto; display: flex; flex-direction: column; }
.ba-sheet--product .ba-pd--dish .ba-opts { flex: 1 0 auto; }

.ba-pd-buy--dish { position: static; padding-top: 0; }
.ba-opts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ba-opt { display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
.ba-opt-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 0 0 6px;
	color: var(--ba-ink);
	font: 800 var(--ba-fs-md)/1.3 var(--ba-font);
}
.ba-opt-h span { min-width: 0; overflow-wrap: anywhere; }
.ba-opt-h small {
	flex: none;
	padding: 4px 9px;
	border-radius: var(--ba-r-pill);
	background: var(--ba-surface-2);
	color: var(--ba-ink-2);
	font: 650 var(--ba-fs-xs)/1 var(--ba-font);
	white-space: nowrap;
}
.ba-opt-h small.is-need { background: var(--ba-warn-soft); color: var(--ba-ink); }
.ba-opt.is-ok .ba-opt-h small.is-need { background: var(--ba-ok-soft); color: color-mix(in srgb, var(--ba-ok) 70%, var(--ba-ink)); }
.ba-opt-i {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 50px;
	margin: 0;
	padding: 8px 0;
	border-top: 1px solid var(--ba-line);
	cursor: pointer;
}
/* Отметка — настоящая и крупная: подушечка пальца, а не красивое число. */
.ba-main .ba-opt-i input, .ba-sheet .ba-opt-i input, .ba-opt-i input {
	flex: none;
	width: 22px;
	height: 22px;
	min-height: 0;
	margin: 0;
	padding: 0;
	accent-color: var(--ba-accent);
}
.ba-opt-n { flex: 1; min-width: 0; color: var(--ba-ink); font-weight: 600; overflow-wrap: anywhere; }
.ba-opt-p { flex: none; color: var(--ba-ink-2); font-size: var(--ba-fs-sm); font-variant-numeric: tabular-nums; }
/* Список полон — неотмеченное гаснет: «лишнее не засчитается» видно, а не молчит. */
.ba-opt-i:has(input:disabled) { opacity: 0.42; cursor: default; }
.ba-opt.is-missing { animation: ba-shake 420ms var(--ba-ease); }
.ba-opt.is-missing .ba-opt-h small { background: var(--ba-bad-soft); color: var(--ba-bad); }
.ba-opt-note { display: grid; gap: 6px; margin: 0; }
.ba-opt-note > span { color: var(--ba-ink-2); font: 700 var(--ba-fs-sm)/1.3 var(--ba-font); }
.ba-opt-note .ba-input { width: 100%; }

/* Ряд «количество + добавить» — у нижнего края: окна блюда или экрана. */
.ba-opts-buy {
	position: sticky;
	bottom: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding: 10px 0 2px;
	/* Затухание — только в верхнем отступе; ниже ряд сплошной, под ним ничего не просвечивает. */
	background: linear-gradient(180deg, transparent, var(--ba-surface) 10px);
}
.ba-product-page .ba-opts-buy { bottom: calc(var(--ba-tab-h) + var(--ba-safe-b) + 10px); background: linear-gradient(180deg, transparent, var(--ba-bg) 10px); }
.ba-opts-buy .ba-qs { flex: none; height: 56px; padding: 0 6px; border-radius: var(--ba-r-lg); background: var(--ba-surface-2); }
.ba-opts-add { flex: 1; min-width: 0; justify-content: flex-start; }
.ba-opts-add.is-off { opacity: 0.55; }
.ba-opts-add.is-loading { pointer-events: none; opacity: 0.75; }
.ba-opts-why { order: 9; margin: 0; color: var(--ba-bad); font: 650 var(--ba-fs-sm)/1.35 var(--ba-font); }
.ba-opts-why[hidden] { display: none; }

/* Что выбрано — под названием строки корзины. */
.ba-line-o { display: block; color: var(--ba-ink-2); font-size: var(--ba-fs-xs); line-height: 1.35; overflow-wrap: anywhere; }
.ba-line-o--note { font-style: italic; }