/* ============================================================
 * BAMMAT — ОСНОВА
 * Сброс, каркас экрана, верхняя панель, нижние вкладки, переходы.
 * ========================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	/* Убирает серую вспышку при тапе — главный признак «это сайт, а не приложение». */
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	background: var(--bm-bg);
	color: var(--bm-ink);
	font-family: var(--bm-font);
	font-size: var(--bm-t-md);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	/* Горизонтальную прокрутку в WebView видно как «страница едет» — запрещаем. */
	overflow-x: hidden;
	overscroll-behavior-y: none;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--bm-blue); text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
	margin: 0;
	color: var(--bm-ink);
	line-height: 1.25;
	letter-spacing: -.02em;
	text-wrap: balance;
}
h1 { font-size: var(--bm-t-2xl); font-weight: 800; }
h2 { font-size: var(--bm-t-xl); font-weight: 750; }
h3 { font-size: var(--bm-t-lg); font-weight: 700; }
p  { margin: 0 0 var(--bm-4); }

/* Фокус виден только с клавиатуры: на телефоне рамка вокруг кнопки
   после тапа выглядит как баг. */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--bm-blue);
	outline-offset: 2px;
	border-radius: var(--bm-r-xs);
}

::selection { background: var(--bm-blue-tint); color: var(--bm-ink); }

/* ── КАРКАС ЭКРАНА ─────────────────────────────────────────── */

.bmt-shell {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.bmt-main {
	flex: 1 1 auto;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--bm-4) var(--bm-4)
	         calc(var(--bm-nav-h) + var(--bm-safe-b) + var(--bm-8));
}
@media (min-width: 900px) {
	/* На десктопе нижних вкладок нет — убираем запас под них. */
	.bmt-main { padding-bottom: var(--bm-12); padding-inline: var(--bm-6); }
}

.bmt-section { margin-bottom: var(--bm-8); }
.bmt-section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--bm-3); margin-bottom: var(--bm-4);
}
.bmt-section__more { font-size: var(--bm-t-sm); font-weight: 650; }

/* ── ПОЛОСА С ОБЕЩАНИЕМ СЕРВИСА ────────────────────────────
   Была в шапке Woodmart. Первое, что видит новый посетитель,
   поэтому стоит выше логотипа. */

.bmt-promo {
	background: var(--bm-blue);
	color: var(--bm-ink-on);
	padding: calc(var(--bm-safe-t) + 6px) var(--bm-4) 6px;
	text-align: center;
}
.bmt-promo span {
	font-size: var(--bm-t-xs);
	font-weight: 650;
	letter-spacing: -.005em;
}
/* Полоса уезжает вместе со страницей, липнет только шапка. */
.bmt-promo + .bmt-header { padding-top: 0; }

/* ── ВХОД ДЛЯ ГОСТЕЙ ───────────────────────────────────────── */

.bmt-login { width: auto; padding: 0 var(--bm-3); gap: var(--bm-1); }
.bmt-login__text { font-size: var(--bm-t-sm); font-weight: 650; }
@media (max-width: 480px) {
	/* На узком экране подпись не влезает рядом с адресом и корзиной. */
	.bmt-login__text { display: none; }
	.bmt-login { width: 40px; padding: 0; }
}

/* ── ВЕРХНЯЯ ПАНЕЛЬ ────────────────────────────────────────── */

.bmt-header {
	position: sticky; top: 0; z-index: var(--bm-z-header);
	padding-top: var(--bm-safe-t);
	background: color-mix(in srgb, var(--bm-card) 88%, transparent);
	/* Размытие под панелью — то, что на iOS читается как «системная» шапка. */
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--bm-fast) linear,
	            box-shadow var(--bm-fast) linear;
}
/* Граница появляется только когда под панель уехал контент. */
.bmt-header.is-stuck {
	border-bottom-color: var(--bm-line);
	box-shadow: 0 1px 12px rgba(19, 24, 38, .05);
}

.bmt-header__row {
	max-width: 1180px; margin: 0 auto;
	min-height: var(--bm-header-h);
	display: flex; align-items: center; gap: var(--bm-3);
	padding: var(--bm-2) var(--bm-4);
}

.bmt-logo { display: flex; align-items: center; gap: var(--bm-2); flex: 0 0 auto; }
.bmt-logo img { height: 26px; width: auto; }
.bmt-logo__text {
	font-size: var(--bm-t-lg); font-weight: 800;
	letter-spacing: -.03em; color: var(--bm-blue);
}

/* Кнопка адреса — на главной это самый нажимаемый элемент,
   поэтому она занимает всю свободную ширину. */
.bmt-address {
	flex: 1 1 auto; min-width: 0;
	display: flex; align-items: center; gap: var(--bm-2);
	padding: var(--bm-2) var(--bm-3);
	background: var(--bm-sunken); border: none;
	border-radius: var(--bm-r-pill);
	cursor: pointer; text-align: left;
	transition: transform var(--bm-fast) var(--bm-spring),
	            background var(--bm-fast) linear;
}
.bmt-address:active { transform: scale(.97); background: var(--bm-line); }
.bmt-address__label { font-size: 10px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--bm-ink-3); display: block; line-height: 1.2; }
.bmt-address__value { font-size: var(--bm-t-sm); font-weight: 650; color: var(--bm-ink);
	display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bmt-address__body { min-width: 0; flex: 1 1 auto; }

.bmt-iconbtn {
	flex: 0 0 auto;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: none; border-radius: var(--bm-r-pill);
	color: var(--bm-ink); cursor: pointer; position: relative;
	transition: transform var(--bm-fast) var(--bm-spring), background var(--bm-fast) linear;
}
.bmt-iconbtn:active { transform: scale(.88); background: var(--bm-sunken); }
.bmt-iconbtn svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
	stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ── ПОИСК ─────────────────────────────────────────────────── */

.bmt-search { padding: 0 var(--bm-4) var(--bm-3); max-width: 1180px; margin: 0 auto; }
.bmt-search__field {
	display: flex; align-items: center; gap: var(--bm-2);
	background: var(--bm-sunken);
	border: 1.5px solid transparent;
	border-radius: var(--bm-r-sm);
	padding: 0 var(--bm-3);
	height: 42px;
	transition: border-color var(--bm-fast) linear, background var(--bm-fast) linear;
}
.bmt-search__field:focus-within {
	background: var(--bm-card); border-color: var(--bm-blue);
	box-shadow: 0 0 0 4px var(--bm-blue-ring);
}
.bmt-search__field svg { width: 18px; height: 18px; flex: 0 0 auto;
	stroke: var(--bm-ink-3); fill: none; stroke-width: 2; }
.bmt-search__input {
	flex: 1 1 auto; min-width: 0;
	border: none; background: none; outline: none;
	/* 16px — ниже этого Safari на iOS зумит страницу при фокусе. */
	font-size: 16px; color: var(--bm-ink);
}
.bmt-search__input::placeholder { color: var(--bm-ink-3); }

/* ── НИЖНИЕ ВКЛАДКИ ────────────────────────────────────────── */

.bmt-nav {
	position: fixed; z-index: var(--bm-z-nav);
	left: 0; right: 0; bottom: 0;
	display: flex;
	padding: var(--bm-1) var(--bm-2) calc(var(--bm-1) + var(--bm-safe-b));
	background: color-mix(in srgb, var(--bm-card) 92%, transparent);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-top: 1px solid var(--bm-line);
	box-shadow: var(--bm-sh-nav);
}
@media (min-width: 900px) { .bmt-nav { display: none; } }

.bmt-nav__item {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 3px; padding: var(--bm-2) 0 var(--bm-1);
	color: var(--bm-ink-3); position: relative;
	transition: color var(--bm-fast) linear, transform var(--bm-fast) var(--bm-spring);
}
.bmt-nav__item:active { transform: scale(.9); }
.bmt-nav__item.is-active { color: var(--bm-blue); }
.bmt-nav__icon { width: 24px; height: 24px; position: relative; }
.bmt-nav__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none;
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bmt-nav__label { font-size: 10px; font-weight: 650; letter-spacing: -.01em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Активную вкладку подчёркивает точка, а не жирная линия —
   меньше визуального шума при пяти вкладках. */
.bmt-nav__item.is-active::after {
	content: ""; position: absolute; top: 2px;
	width: 4px; height: 4px; border-radius: 50%; background: var(--bm-blue);
}

.bmt-badge {
	position: absolute; top: -5px; right: -8px;
	min-width: 17px; height: 17px; padding: 0 4px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--bm-red); color: #fff;
	font-size: 10px; font-weight: 800; line-height: 1;
	border-radius: var(--bm-r-pill);
	box-shadow: 0 0 0 2px var(--bm-card);
	font-variant-numeric: tabular-nums;
}
.bmt-badge:empty, .bmt-badge[hidden] { display: none; }
.bmt-badge.is-bump { animation: bmBadgeBump .4s var(--bm-spring); }
@keyframes bmBadgeBump {
	0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); }
}

/* ── ДЕСКТОПНОЕ МЕНЮ ───────────────────────────────────────── */

.bmt-topnav { display: none; }
@media (min-width: 900px) {
	.bmt-topnav { display: flex; align-items: center; gap: var(--bm-1); }
	.bmt-topnav a {
		padding: var(--bm-2) var(--bm-4); border-radius: var(--bm-r-pill);
		font-size: var(--bm-t-sm); font-weight: 650; color: var(--bm-ink-2);
		transition: background var(--bm-fast) linear, color var(--bm-fast) linear;
	}
	.bmt-topnav a:hover { background: var(--bm-sunken); color: var(--bm-ink); }
	.bmt-topnav a[aria-current="page"] { background: var(--bm-blue-tint); color: var(--bm-blue-dark); }
}

/* ── ПЕРЕХОДЫ МЕЖДУ ЭКРАНАМИ ───────────────────────────────
   В приложении экраны въезжают, а не моргают белым. Там, где браузер
   умеет View Transitions (Safari 18+, Chrome), берём его; где нет —
   работает запасная анимация появления из bmt-main. */

@view-transition { navigation: auto; }

::view-transition-old(root) {
	animation: bmFadeOut var(--bm-mid) var(--bm-ease) both;
}
::view-transition-new(root) {
	animation: bmSlideIn var(--bm-mid) var(--bm-ease) both;
}
@keyframes bmFadeOut { to { opacity: 0; transform: translateX(-14px); } }
@keyframes bmSlideIn { from { opacity: 0; transform: translateX(18px); } }

/* Запасной вариант: контент проявляется при загрузке страницы. */
@supports not (view-transition-name: none) {
	.bmt-main { animation: bmEnter var(--bm-mid) var(--bm-ease) both; }
	@keyframes bmEnter { from { opacity: 0; transform: translateY(8px); } }
}

/* Панели не должны участвовать в переходе — иначе они «мигают». */
.bmt-header { view-transition-name: bmt-header; }
.bmt-nav    { view-transition-name: bmt-nav; }
::view-transition-group(bmt-header),
::view-transition-group(bmt-nav) { animation: none; }

/* ── УВАЖЕНИЕ К НАСТРОЙКАМ ДОСТУПНОСТИ ─────────────────────── */

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

/* ── СЛУЖЕБНОЕ ─────────────────────────────────────────────── */

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	white-space: nowrap;
}
.bmt-scroll-x {
	display: flex; gap: var(--bm-2);
	overflow-x: auto; scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin-inline: calc(var(--bm-4) * -1);
	padding-inline: var(--bm-4);
}
.bmt-scroll-x::-webkit-scrollbar { display: none; }
.bmt-scroll-x > * { scroll-snap-align: start; flex: 0 0 auto; }