/* ============================================================
 * BAMMAT — КОМПОНЕНТЫ
 * Кнопки, карточки, счётчик количества, чипсы категорий,
 * шторка корзины, всплывающие подсказки, скелетоны.
 * ========================================================== */

/* ── КНОПКИ ────────────────────────────────────────────────── */

.bmt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--bm-2);
	min-height: 48px;               /* 48px — палец попадает без промаха */
	padding: 0 var(--bm-5);
	border: none; border-radius: var(--bm-r-sm);
	background: var(--bm-blue); color: var(--bm-ink-on);
	font-size: var(--bm-t-md); font-weight: 700; line-height: 1;
	cursor: pointer; user-select: none;
	box-shadow: 0 4px 14px var(--bm-blue-ring);
	transition: transform var(--bm-fast) var(--bm-spring),
	            background var(--bm-fast) linear,
	            box-shadow var(--bm-fast) linear;
}
.bmt-btn:hover  { background: var(--bm-blue-dark); }
.bmt-btn:active { transform: scale(.96); background: var(--bm-blue-press); box-shadow: none; }
.bmt-btn[disabled], .bmt-btn.is-busy { opacity: .55; pointer-events: none; box-shadow: none; }

.bmt-btn--block { width: 100%; }
.bmt-btn--lg    { min-height: 54px; font-size: var(--bm-t-lg); border-radius: var(--bm-r); }
.bmt-btn--ghost {
	background: var(--bm-card); color: var(--bm-blue);
	border: 1.5px solid var(--bm-line-2); box-shadow: none;
}
.bmt-btn--ghost:hover  { background: var(--bm-blue-tint); border-color: var(--bm-blue); }
.bmt-btn--quiet { background: var(--bm-sunken); color: var(--bm-ink); box-shadow: none; }
.bmt-btn--danger { background: var(--bm-red); box-shadow: none; }

/* Крутилка внутри кнопки, пока идёт запрос. */
.bmt-btn.is-busy::after {
	content: ""; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid currentColor; border-top-color: transparent;
	animation: bmSpin .7s linear infinite;
}
@keyframes bmSpin { to { transform: rotate(360deg); } }

/* ── КАРТОЧКА ──────────────────────────────────────────────── */

.bmt-card {
	background: var(--bm-card);
	border-radius: var(--bm-r);
	box-shadow: var(--bm-sh);
	overflow: hidden;
}
.bmt-card--flat { box-shadow: none; border: 1px solid var(--bm-line); }
.bmt-card__pad  { padding: var(--bm-5); }

/* ── ЧИПСЫ КАТЕГОРИЙ ───────────────────────────────────────── */

.bmt-chip {
	display: inline-flex; align-items: center; gap: var(--bm-2);
	height: 38px; padding: 0 var(--bm-4);
	background: var(--bm-card); border: 1.5px solid var(--bm-line);
	border-radius: var(--bm-r-pill);
	font-size: var(--bm-t-sm); font-weight: 650; color: var(--bm-ink-2);
	white-space: nowrap; cursor: pointer;
	transition: transform var(--bm-fast) var(--bm-spring),
	            border-color var(--bm-fast) linear,
	            background var(--bm-fast) linear, color var(--bm-fast) linear;
}
.bmt-chip:active { transform: scale(.94); }
.bmt-chip.is-active {
	background: var(--bm-blue); border-color: var(--bm-blue); color: var(--bm-ink-on);
}
.bmt-chip__emoji { font-size: 16px; line-height: 1; }

/* ── КАРТОЧКА ТОВАРА ───────────────────────────────────────── */

.bmt-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--bm-3);
}
@media (min-width: 700px)  { .bmt-products { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--bm-4); } }

.bmt-product {
	position: relative;
	display: flex; flex-direction: column;
	background: var(--bm-card);
	border-radius: var(--bm-r);
	box-shadow: var(--bm-sh-sm);
	overflow: hidden;
	transition: transform var(--bm-fast) var(--bm-spring),
	            box-shadow var(--bm-fast) linear;
}
@media (hover: hover) {
	.bmt-product:hover { transform: translateY(-2px); box-shadow: var(--bm-sh); }
}

.bmt-product__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--bm-card);
	display: flex; align-items: center; justify-content: center;
	padding: var(--bm-3);
}
.bmt-product__media img {
	width: 100%; height: 100%;
	object-fit: contain;
	transition: transform var(--bm-mid) var(--bm-ease);
}
@media (hover: hover) { .bmt-product:hover .bmt-product__media img { transform: scale(1.04); } }

.bmt-product__body {
	padding: 0 var(--bm-3) var(--bm-3);
	display: flex; flex-direction: column; gap: var(--bm-1);
	flex: 1 1 auto;
}
.bmt-product__price {
	font-size: var(--bm-t-lg); font-weight: 800; color: var(--bm-ink);
	letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.bmt-product__unit { font-size: var(--bm-t-xs); color: var(--bm-ink-3); }
.bmt-product__title {
	font-size: var(--bm-t-sm); font-weight: 500; color: var(--bm-ink-2);
	line-height: 1.35;
	/* Две строки максимум — иначе сетка карточек «прыгает». */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.bmt-product__link { position: absolute; inset: 0; z-index: 1; }

/* Кнопка добавления поверх картинки, как в Instacart. */
.bmt-product__add {
	position: absolute; right: var(--bm-2); bottom: var(--bm-2); z-index: 2;
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--bm-card); color: var(--bm-blue);
	border: 1.5px solid var(--bm-line-2); border-radius: var(--bm-r-pill);
	box-shadow: var(--bm-sh-sm); cursor: pointer;
	transition: transform var(--bm-fast) var(--bm-spring),
	            background var(--bm-fast) linear, color var(--bm-fast) linear;
}
.bmt-product__add:active { transform: scale(.85); }
.bmt-product__add svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.bmt-product__add.is-added { background: var(--bm-blue); color: var(--bm-ink-on); border-color: var(--bm-blue); }

/* Бейджи на карточке */
.bmt-product__flags { position: absolute; top: var(--bm-2); left: var(--bm-2); z-index: 2;
	display: flex; flex-direction: column; gap: var(--bm-1); align-items: flex-start; }
.bmt-flag {
	padding: 3px 8px; border-radius: var(--bm-r-xs);
	font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
}
.bmt-flag--sale  { background: var(--bm-red); color: #fff; }
.bmt-flag--new   { background: var(--bm-green); color: #fff; }
.bmt-flag--out   { background: var(--bm-sunken); color: var(--bm-ink-3); }

.bmt-product.is-out .bmt-product__media { opacity: .45; }
.bmt-product.is-out .bmt-product__add   { display: none; }

/* ── СЧЁТЧИК КОЛИЧЕСТВА ────────────────────────────────────
   Появляется на месте кнопки «+» после первого добавления.
   Ключевой момент ощущения: товар добавляется без ухода со страницы. */

.bmt-stepper {
	position: absolute; right: var(--bm-2); bottom: var(--bm-2); z-index: 3;
	display: none; align-items: center; gap: 0;
	background: var(--bm-blue); border-radius: var(--bm-r-pill);
	box-shadow: 0 4px 14px var(--bm-blue-ring);
	animation: bmStepperIn var(--bm-mid) var(--bm-spring) both;
}
.bmt-product.has-qty .bmt-stepper { display: inline-flex; }
.bmt-product.has-qty .bmt-product__add { display: none; }
@keyframes bmStepperIn { from { transform: scale(.6); opacity: 0; } }

.bmt-stepper__btn {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: none; color: var(--bm-ink-on);
	cursor: pointer; border-radius: var(--bm-r-pill);
	transition: transform var(--bm-fast) var(--bm-spring), background var(--bm-fast) linear;
}
.bmt-stepper__btn:active { transform: scale(.82); background: rgba(255,255,255,.18); }
.bmt-stepper__btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.6; }
.bmt-stepper__val {
	min-width: 22px; text-align: center;
	color: var(--bm-ink-on); font-size: var(--bm-t-sm); font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* ── КАРТОЧКА МАГАЗИНА ─────────────────────────────────────── */

.bmt-stores { display: grid; grid-template-columns: 1fr; gap: var(--bm-3); }
@media (min-width: 620px) { .bmt-stores { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }

.bmt-store {
	position: relative; display: block;
	background: var(--bm-card); border-radius: var(--bm-r);
	box-shadow: var(--bm-sh-sm); overflow: hidden;
	transition: transform var(--bm-fast) var(--bm-spring), box-shadow var(--bm-fast) linear;
}
.bmt-store:active { transform: scale(.985); }
@media (hover: hover) { .bmt-store:hover { box-shadow: var(--bm-sh); } }

.bmt-store__cover { aspect-ratio: 16 / 7; background: var(--bm-sunken); position: relative; }
.bmt-store__cover img { width: 100%; height: 100%; object-fit: cover; }
.bmt-store__logo {
	position: absolute; left: var(--bm-4); bottom: calc(var(--bm-4) * -1);
	width: 54px; height: 54px; border-radius: var(--bm-r-sm);
	background: var(--bm-card); box-shadow: var(--bm-sh);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bmt-store__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.bmt-store__body { padding: calc(var(--bm-6) + var(--bm-1)) var(--bm-4) var(--bm-4); }
.bmt-store__name { font-size: var(--bm-t-lg); font-weight: 750; color: var(--bm-ink); }
.bmt-store__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--bm-2);
	margin-top: var(--bm-1); font-size: var(--bm-t-sm); color: var(--bm-ink-2);
}
.bmt-store__meta > *:not(:last-child)::after {
	content: "·"; margin-left: var(--bm-2); color: var(--bm-ink-3);
}
.bmt-store.is-closed .bmt-store__cover { filter: grayscale(1); opacity: .6; }

.bmt-pill {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 9px; border-radius: var(--bm-r-pill);
	font-size: var(--bm-t-xs); font-weight: 700;
	background: var(--bm-blue-tint); color: var(--bm-blue-dark);
}
.bmt-pill--open   { background: var(--bm-green-tint); color: var(--bm-green); }
.bmt-pill--closed { background: var(--bm-sunken);     color: var(--bm-ink-3); }
.bmt-pill--soon   { background: var(--bm-amber-tint); color: var(--bm-amber); }
.bmt-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── ШТОРКА КОРЗИНЫ ────────────────────────────────────────
   На телефоне выезжает снизу, на десктопе — справа. */

.bmt-scrim {
	position: fixed; inset: 0; z-index: var(--bm-z-scrim);
	background: var(--bm-scrim);
	opacity: 0; pointer-events: none;
	transition: opacity var(--bm-mid) var(--bm-ease);
	backdrop-filter: blur(2px);
}
.bmt-scrim.is-open { opacity: 1; pointer-events: auto; }

.bmt-sheet {
	position: fixed; z-index: var(--bm-z-sheet);
	left: 0; right: 0; bottom: 0;
	max-height: 88dvh;
	display: flex; flex-direction: column;
	background: var(--bm-card);
	border-radius: var(--bm-r-xl) var(--bm-r-xl) 0 0;
	box-shadow: var(--bm-sh-lift);
	transform: translateY(101%);
	transition: transform var(--bm-slow) var(--bm-ease);
	padding-bottom: var(--bm-safe-b);
}
.bmt-sheet.is-open { transform: translateY(0); }

@media (min-width: 900px) {
	.bmt-sheet {
		left: auto; top: 0; bottom: 0; width: 440px; max-height: none;
		border-radius: 0;
		transform: translateX(101%);
	}
	.bmt-sheet.is-open { transform: translateX(0); }
}

/* Полоска-ручка сверху: сигнал «это можно смахнуть». */
.bmt-sheet__grip {
	width: 40px; height: 4px; border-radius: 2px;
	background: var(--bm-line-2);
	margin: var(--bm-2) auto var(--bm-1);
	flex: 0 0 auto;
}
@media (min-width: 900px) { .bmt-sheet__grip { display: none; } }

.bmt-sheet__head {
	display: flex; align-items: center; justify-content: space-between; gap: var(--bm-3);
	padding: var(--bm-3) var(--bm-5);
	border-bottom: 1px solid var(--bm-line); flex: 0 0 auto;
}
.bmt-sheet__title { font-size: var(--bm-t-lg); font-weight: 750; }
.bmt-sheet__body  { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
	padding: var(--bm-4) var(--bm-5); }
.bmt-sheet__foot  { flex: 0 0 auto; padding: var(--bm-4) var(--bm-5);
	border-top: 1px solid var(--bm-line); background: var(--bm-card);
	display: flex; flex-direction: column; gap: var(--bm-3); }

/* ── СТРОКА ТОВАРА В КОРЗИНЕ ───────────────────────────────── */

.bmt-line { display: flex; gap: var(--bm-3); padding: var(--bm-3) 0;
	border-bottom: 1px solid var(--bm-line); }
.bmt-line:last-child { border-bottom: none; }
.bmt-line__thumb { width: 56px; height: 56px; flex: 0 0 auto;
	border-radius: var(--bm-r-xs); background: var(--bm-sunken); overflow: hidden;
	display: flex; align-items: center; justify-content: center; }
.bmt-line__thumb img { width: 100%; height: 100%; object-fit: contain; }
.bmt-line__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bmt-line__name { font-size: var(--bm-t-sm); font-weight: 600; color: var(--bm-ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bmt-line__meta { font-size: var(--bm-t-xs); color: var(--bm-ink-3); }
.bmt-line__price { font-weight: 750; color: var(--bm-ink); font-variant-numeric: tabular-nums;
	white-space: nowrap; }

/* Счётчик в корзине — контрастный, на светлом фоне */
.bmt-qty {
	display: inline-flex; align-items: center;
	background: var(--bm-sunken); border-radius: var(--bm-r-pill); padding: 2px;
}
.bmt-qty__btn { width: 30px; height: 30px; border: none; background: var(--bm-card);
	border-radius: var(--bm-r-pill); color: var(--bm-blue); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: var(--bm-sh-sm);
	transition: transform var(--bm-fast) var(--bm-spring); }
.bmt-qty__btn:active { transform: scale(.85); }
.bmt-qty__btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.6; }
.bmt-qty__val { min-width: 30px; text-align: center; font-size: var(--bm-t-sm); font-weight: 700;
	font-variant-numeric: tabular-nums; }

/* ── ИТОГИ ─────────────────────────────────────────────────── */

.bmt-row { display: flex; align-items: center; justify-content: space-between;
	gap: var(--bm-3); padding: var(--bm-2) 0; font-size: var(--bm-t-sm); color: var(--bm-ink-2); }
.bmt-row__val { color: var(--bm-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.bmt-row--total { padding-top: var(--bm-3); margin-top: var(--bm-2);
	border-top: 1px solid var(--bm-line); align-items: baseline; }
.bmt-row--total .bmt-row__lbl { font-size: var(--bm-t-md); font-weight: 750; color: var(--bm-ink); }
.bmt-row--total .bmt-row__val { font-size: var(--bm-t-2xl); font-weight: 800; letter-spacing: -.03em; }

/* ── ПЛАВАЮЩАЯ ПАНЕЛЬ «ПЕРЕЙТИ В КОРЗИНУ» ──────────────────
   Появляется на витрине магазина, когда в корзине что-то есть. */

.bmt-cartbar {
	position: fixed; z-index: calc(var(--bm-z-nav) - 1);
	left: var(--bm-3); right: var(--bm-3);
	bottom: calc(var(--bm-nav-h) + var(--bm-safe-b) + var(--bm-2));
	display: flex; align-items: center; justify-content: space-between; gap: var(--bm-3);
	padding: var(--bm-3) var(--bm-4);
	background: var(--bm-blue); color: var(--bm-ink-on);
	border-radius: var(--bm-r); box-shadow: 0 8px 28px var(--bm-blue-ring);
	transform: translateY(calc(100% + var(--bm-nav-h) + var(--bm-safe-b) + var(--bm-4)));
	transition: transform var(--bm-slow) var(--bm-spring);
	cursor: pointer;
}
.bmt-cartbar.is-visible { transform: translateY(0); }
.bmt-cartbar:active { transform: translateY(0) scale(.98); }
.bmt-cartbar__count { font-size: var(--bm-t-sm); font-weight: 650; opacity: .9; }
.bmt-cartbar__total { font-size: var(--bm-t-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .bmt-cartbar { display: none; } }

/* ── ВСПЛЫВАЮЩИЕ ПОДСКАЗКИ ─────────────────────────────────── */

.bmt-toasts {
	position: fixed; z-index: var(--bm-z-toast);
	left: 50%; transform: translateX(-50%);
	bottom: calc(var(--bm-nav-h) + var(--bm-safe-b) + var(--bm-4));
	display: flex; flex-direction: column; gap: var(--bm-2);
	width: min(420px, calc(100vw - var(--bm-8)));
	pointer-events: none;
}
.bmt-toast {
	display: flex; align-items: center; gap: var(--bm-3);
	padding: var(--bm-3) var(--bm-4);
	background: var(--bm-ink); color: var(--bm-card);
	border-radius: var(--bm-r-sm); box-shadow: var(--bm-sh-lift);
	font-size: var(--bm-t-sm); font-weight: 600;
	animation: bmToastIn var(--bm-mid) var(--bm-spring) both;
	pointer-events: auto;
}
.bmt-toast.is-out { animation: bmToastOut var(--bm-fast) var(--bm-ease) both; }
.bmt-toast--ok  { background: var(--bm-green); color: #fff; }
.bmt-toast--err { background: var(--bm-red);   color: #fff; }
@keyframes bmToastIn  { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes bmToastOut { to   { opacity: 0; transform: translateY(8px)  scale(.98); } }

/* ── СКЕЛЕТОНЫ ─────────────────────────────────────────────
   Показываем форму будущего контента вместо крутилки — экран
   не «пустеет», и ожидание ощущается короче. */

.bmt-skel {
	background: linear-gradient(100deg,
		var(--bm-sunken) 30%, var(--bm-line) 50%, var(--bm-sunken) 70%);
	background-size: 220% 100%;
	animation: bmShimmer 1.4s linear infinite;
	border-radius: var(--bm-r-xs);
}
@keyframes bmShimmer { to { background-position: -120% 0; } }
.bmt-skel--card  { aspect-ratio: 3 / 4; border-radius: var(--bm-r); }
.bmt-skel--line  { height: 12px; }
.bmt-skel--title { height: 18px; width: 60%; }

/* ── ПУСТЫЕ СОСТОЯНИЯ ──────────────────────────────────────── */

.bmt-empty { text-align: center; padding: var(--bm-12) var(--bm-5);
	display: flex; flex-direction: column; align-items: center; gap: var(--bm-3); }
.bmt-empty__icon { width: 72px; height: 72px; border-radius: var(--bm-r-lg);
	background: var(--bm-blue-tint); display: flex; align-items: center; justify-content: center;
	font-size: 32px; }
.bmt-empty__title { font-size: var(--bm-t-xl); font-weight: 750; }
.bmt-empty p { color: var(--bm-ink-2); margin: 0; max-width: 34ch; }

/* ── ЛЕНТА ЗАГРУЗКИ СВЕРХУ ─────────────────────────────────
   Тонкая полоска при переходе — вместо белого экрана ожидания. */

.bmt-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 2.5px;
	z-index: calc(var(--bm-z-toast) + 1);
	background: var(--bm-blue);
	transform: scaleX(0); transform-origin: 0 50%;
	opacity: 0; pointer-events: none;
}
.bmt-progress.is-loading { opacity: 1; animation: bmProgress 1.6s var(--bm-ease) forwards; }
@keyframes bmProgress {
	0% { transform: scaleX(0); } 60% { transform: scaleX(.75); } 100% { transform: scaleX(.92); }
}