/* Bammat Shell — шапка.
 *
 * ПОЧЕМУ ЗДЕСЬ СТОЛЬКО `!important`. У Woodmart есть правило почти
 * на всё, что мы рисуем, — на любую кнопку, любую ссылку, любое поле
 * ввода, — и сила у него та же, что у нашего класса. Спор решает
 * порядок подключения файлов, а наш файл подключается рано и проигрывает.
 * Это уже стоило прилипшей кнопки «назад» 20 августа и серых кнопок
 * в окне отправки счёта тем же вечером. Метка ставится с первой строки,
 * а не после того, как владелец пришлёт снимок.
 *
 * ПОЧЕМУ СВОИ ПЕРЕМЕННЫЕ. Переменные темы (`--bgcolor-white-rgb`
 * и прочие) на наших собственных страницах не объявлены вовсе, и всё
 * правило целиком становится недействительным. Ровно так кнопка «назад»
 * выходила прозрачной поверх текста.
 */

:root {
	--bmsh-blue: #517dfc;
	--bmsh-blue-dark: #3f68e0;
	--bmsh-ink: #12141a;
	--bmsh-soft: #6b7280;
	--bmsh-line: #e6e8ee;
	--bmsh-bg: #ffffff;
	--bmsh-tint: #f3f6ff;
	--bmsh-green: #1a7f37;
	--bmsh-red: #b32d2e;
	--bmsh-amber: #b26a00;
	--bmsh-radius: 14px;
	--bmsh-shadow: 0 6px 24px rgba(18, 20, 26, .08);
}

/* ── общее для рядов шапки ───────────────────────────────────────── */

/*
 * `box-sizing` объявляем сами, а не надеемся на тему.
 *
 * Правило `*{box-sizing:border-box}` приходит из Woodmart, и на её
 * страницах наша вёрстка без него работает. А на наших собственных
 * страницах (слежение за заказом, «спасибо», счёт) файлов темы нет
 * вовсе — и поле поиска шириной 100 % плюс внутренние отступы плюс
 * рамка становится на 26 пикселей шире своего ряда. Найдено снимком
 * в браузере, по коду это не видно ни при каком чтении.
 *
 * Это ровно тот же класс ошибки, что «кнопка написана на переменных
 * Woodmart»: работает на одной странице — не значит работает.
 *
 * СПИСОК ИМЁН ЗДЕСЬ — ВТОРАЯ ПРАВДА, И ОНА УЖЕ РАЗОШЛАСЬ. Когда
 * приветствие переехало из `.bm-greet` в `.bm-hero`, список остался
 * прежним, и шапка немедленно стала на 28 пикселей шире экрана.
 * Ни ошибки, ни следа — поймал только снимок в браузере. Теперь
 * за совпадением следит `tests/26-shell.php`, раздел 6.
 */
.bm-hero, .bm-search, .bm-rail, .bm-storebar, .bm-slim, .bm-modal,
.bm-listbar, .bm-cartswitch, .bm-rail-host, .bm-menu,
.bm-toolbar-host, .bm-toolbar-bar,
.bm-hero *, .bm-search *, .bm-rail *, .bm-storebar *, .bm-slim *, .bm-modal *,
.bm-listbar *, .bm-cartswitch *, .bm-rail-host *, .bm-menu *, .bm-toolbar-host * {
	box-sizing: border-box !important;
}

/*
 * Атрибут `hidden` сам по себе на этом сайте не прячет.
 *
 * `[hidden]{display:none}` живёт в стилях БРАУЗЕРА, а любое авторское
 * правило с `display` бьёт браузерное независимо от веса селектора —
 * так устроен каскад. У Woodmart такие правила есть на кнопки, и наш
 * крестик «стереть» показывался при живом `hidden`: видно было
 * в браузере на настоящей разметке, по коду — никак.
 *
 * Поэтому всё, что мы прячем атрибутом, прячем и правилом.
 */
.bm-search__sheet[hidden],
.bm-search__clear[hidden],
.bm-toolbar-host[hidden] {
	display: none !important;
}

/*
 * Колонка под нашим блоком тянется на всю ширину ряда.
 *
 * Конструктор раздаёт колонкам ширину по содержимому, и приветствие
 * оказывалось узким столбиком посреди пустой полосы: 262 пикселя
 * из 1400 — измерено в браузере, по коду не видно ничего.
 *
 * `:has()` понимают все нынешние браузеры; там, где не поймут,
 * правило просто не применится, и вид останется прежним — то есть
 * не хуже, чем без него.
 */
.whb-column:has(> .bm-slot-greeting),
.whb-column:has(> .bm-slot-search),
.whb-column:has(> .bm-slot-rail),
.whb-column:has(> .bm-slot-storebar),
.whb-column:has(> .bm-slot-storesearch),
.whb-column:has(> .bm-slot-storerail),
.whb-column:has(> .bm-slot-slim) {
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: 100% !important;
}

/*
 * ШИРИНА: ПРИВЕТСТВИЕ — ВО ВЕСЬ ЭКРАН, ОСТАЛЬНОЕ — ПО ШИРИНЕ СТРАНИЦЫ.
 *
 * У приветствия свой живой фон, и он обязан заполнять экран целиком:
 * небо, обрезанное белыми полями по краям, выглядит картинкой в рамке,
 * а не небом.
 *
 * Все прочие ряды живут по ширине страницы — той самой, что задана
 * в настройках макета. Своего числа мы не пишем: макет владелец
 * меняет в теме, и наши «1400» разошлись бы с ним молча. Просто
 * не трогаем контейнер темы.
 */
.bm-slot-greeting {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.whb-row:has(.bm-slot-greeting) > .container {
	width: 100% !important;
	max-width: 100% !important;
	padding-inline: 0 !important;
}

/* Лента категорий на главной: на телефоне во всю ширину (карточки
   должны уезжать за край — так видно, что ряд листается), на широком
   экране по ширине страницы, как всё остальное. */
@media (max-width: 1024px) {
	.bm-slot-rail {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.whb-row:has(.bm-slot-rail) > .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-inline: 0 !important;
	}
}

/*
 * ВЫСОТА РЯДА: ЧИСЛО ВЛАДЕЛЬЦА — ЭТО МИНИМУМ, А НЕ ПОТОЛОК.
 *
 * Тема ставит ряду жёсткое `height` из своей переменной. Отсюда две
 * беды сразу. Сверху: содержимое не растягивается на всю высоту —
 * шапка в 300 пикселей, а приветствие в ней в сто, и под ним белое
 * поле. Снизу: содержимое, которое выросло, вылезает наружу — на
 * витрине открываешь подкатегории, и второй с третьим рядом уезжают
 * из шапки.
 *
 * Числа владельца при этом остаются: они становятся минимальной
 * высотой. Спрашивать «на сколько увеличить» больше не нужно —
 * ряд растёт сам, когда содержимому тесно.
 */
.whb-row:has(.bm-slot-greeting) .whb-flex-row,
.whb-row:has(.bm-slot-search) .whb-flex-row,
.whb-row:has(.bm-slot-rail) .whb-flex-row,
.whb-row:has(.bm-slot-storebar) .whb-flex-row,
.whb-row:has(.bm-slot-storesearch) .whb-flex-row,
.whb-row:has(.bm-slot-storerail) .whb-flex-row,
.whb-row:has(.bm-slot-slim) .whb-flex-row {
	height: auto !important;
	max-height: none !important;
	padding-block: 0 !important;
	/* Тянем колонки на всю высоту ряда: иначе `height:100%` внутри
	   не от чего считать, и содержимое повисает по центру. */
	align-items: stretch !important;
}

.whb-row:has(.bm-slot-greeting) .whb-top-bar-inner,
.whb-row:has(.bm-slot-storebar) .whb-top-bar-inner,
.whb-row:has(.bm-slot-slim) .whb-top-bar-inner {
	min-height: var(--wd-top-bar-h) !important;
}

.whb-row:has(.bm-slot-search) .whb-general-header-inner,
.whb-row:has(.bm-slot-storesearch) .whb-general-header-inner,
.whb-row:has(.bm-slot-rail) .whb-general-header-inner {
	min-height: var(--wd-header-general-h) !important;
}

.whb-row:has(.bm-slot-rail) .whb-header-bottom-inner,
.whb-row:has(.bm-slot-storerail) .whb-header-bottom-inner {
	min-height: var(--wd-header-bottom-h) !important;
}

@media (max-width: 1024px) {
	/* На телефоне у темы другие переменные — берём их же, а не своё
	   число: своё разошлось бы с настройкой конструктора. */
	.whb-row:has(.bm-slot-greeting) .whb-top-bar-inner,
	.whb-row:has(.bm-slot-storebar) .whb-top-bar-inner,
	.whb-row:has(.bm-slot-slim) .whb-top-bar-inner {
		min-height: var(--wd-top-bar-sm-h) !important;
	}

	.whb-row:has(.bm-slot-search) .whb-general-header-inner,
	.whb-row:has(.bm-slot-storesearch) .whb-general-header-inner,
	.whb-row:has(.bm-slot-rail) .whb-general-header-inner {
		min-height: var(--wd-header-general-sm-h) !important;
	}

	.whb-row:has(.bm-slot-rail) .whb-header-bottom-inner,
	.whb-row:has(.bm-slot-storerail) .whb-header-bottom-inner {
		min-height: var(--wd-header-bottom-sm-h) !important;
	}
}

/*
 * Колонка тянется во всю высоту ряда — но `display` ей НЕ назначается.
 *
 * Здесь стояло `display:flex !important`, и оно перебивало правило
 * темы `.whb-hidden-lg{display:none}`: на широком экране показывались
 * ОБЕ копии шапки — настольная и мобильная, рядом, по половине экрана.
 * Своим узлам способ отображения задавать можно: их прячет не он,
 * а колонка над ними.
 */
.whb-column:has(> .bm-slot-greeting),
.whb-column:has(> .bm-slot-search),
.whb-column:has(> .bm-slot-rail),
.whb-column:has(> .bm-slot-storebar),
.whb-column:has(> .bm-slot-storesearch),
.whb-column:has(> .bm-slot-storerail),
.whb-column:has(> .bm-slot-slim) {
	align-self: stretch !important;
	height: auto !important;
	padding: 0 !important;
}

.bm-slot-greeting,
.bm-slot-search,
.bm-slot-rail,
.bm-slot-storebar,
.bm-slot-storesearch,
.bm-slot-storerail,
.bm-slot-slim {
	display: flex !important;
	align-items: center !important;
	flex: 1 1 auto !important;
	align-self: stretch !important;
	/* Растянутая колонка имеет определённую высоту, и проценты внутри
	   от неё считаются. Без этой строки блок был высотой с текст,
	   а под ним оставалось белое поле до конца ряда. */
	height: 100% !important;
}

/* Приветствие — единственное, что занимает ряд целиком: у него свой
   фон, и белая полоса под ним видна сразу. */
.bm-slot-greeting > .bm-hero {
	flex: 1 1 auto !important;
	align-self: stretch !important;
	height: auto !important;
	min-height: 100% !important;
}

/* Внутренний ряд конструктора добавляет свои поля сверху и снизу —
   от них оставалась белая щель над шапкой. */

/* Приветствие рисует свой фон от края до края — ряду под ним
   собственный фон и рамки не нужны. */
.whb-row:has(.bm-slot-greeting),
.whb-row:has(.bm-slot-storebar) {
	border: 0 !important;
	box-shadow: none !important;
}

/* Ряд рисует шорткод целиком — блок конструктора не должен добавлять
   к нему своих отступов и своей ширины. */
.bm-slot-greeting .wd-header-html,
.bm-slot-search .wd-header-html,
.bm-slot-rail .wd-header-html,
.bm-slot-storebar .wd-header-html,
.bm-slot-storesearch .wd-header-html,
.bm-slot-storerail .wd-header-html,
.bm-slot-slim .wd-header-html {
	width: 100% !important;
	margin: 0 !important;
}

/* ── 1. приветственная шапка главной ─────────────────────────────── */

/*
 * Занимает верхнюю треть экрана и меняется в течение дня. Ряд
 * в конструкторе задан высотой 200px; всё внутри считается от неё,
 * а не от числа пикселей на глаз.
 */
.bm-hero {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	align-items: stretch !important;
	gap: 8px !important;
	width: 100% !important;
	min-width: 0 !important;
	/* Своей высоты не задаём: её задал владелец в конструкторе,
	   и два числа в двух местах разошлись бы при первой же правке.
	   Наше дело — растянуться на то, что он назначил. */
	height: auto !important;
	min-height: 148px !important;
	padding: 14px 16px !important;
	overflow: hidden !important;
	/* Скругления снизу нет: владелец просил шапку во весь экран,
	   а скруглённый угол оставляет по краям белые уголки — те самые
	   «белые поля», которые мы и убираем. */
	border-radius: 0 !important;
	color: #fff !important;
	text-align: start !important;
}

/* ── небо ────────────────────────────────────────────────────────
   Фон живёт отдельным слоем под текстом: так его можно двигать
   и перекрашивать, не трогая ни строчки содержимого. Значение
   `data-sky` ставит браузер по ответу сервера — там же, где решается
   время суток и погода. */

.bm-hero__sky {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	background: linear-gradient(160deg, #6ea8fe 0%, #517dfc 55%, #3f68e0 100%) !important;
}

.bm-hero[data-sky="dawn"] .bm-hero__sky {
	background: linear-gradient(160deg, #ffd39b 0%, #ff9e7a 45%, #7f8fe8 100%) !important;
}

.bm-hero[data-sky="day"] .bm-hero__sky {
	background: linear-gradient(160deg, #7cc0ff 0%, #4f86f7 55%, #3f68e0 100%) !important;
}

.bm-hero[data-sky="dusk"] .bm-hero__sky {
	background: linear-gradient(160deg, #ff9a76 0%, #a06bd0 50%, #3b3f8f 100%) !important;
}

.bm-hero[data-sky="night"] .bm-hero__sky {
	background: linear-gradient(160deg, #24306b 0%, #182449 55%, #0f1730 100%) !important;
}

/* Пасмурно и туман — то же небо, только глуше: погода не должна
   перекрашивать шапку до неузнаваемости, она только оттеняет час. */
.bm-hero[data-wx="clouds"] .bm-hero__sky,
.bm-hero[data-wx="fog"] .bm-hero__sky {
	filter: saturate(.65) !important;
}

/* Солнце: медленное пятно света, которое обходит шапку по кругу. */
.bm-hero__glow {
	position: absolute !important;
	top: -40% !important;
	inset-inline-start: -10% !important;
	width: 70% !important;
	height: 180% !important;
	border-radius: 50% !important;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 65%) !important;
	animation: bm-hero-drift 26s ease-in-out infinite alternate !important;
}

/* Дождь и снег: наклонные полосы, бегущие сверху вниз. Один слой,
   а не сотня капель: сотня капель — это сотня узлов на каждой
   странице ради украшения. */
.bm-hero__drops {
	position: absolute !important;
	inset: -20% -10% !important;
	opacity: 0 !important;
	background-repeat: repeat !important;
	background-size: 22px 22px !important;
}

.bm-hero[data-wx="rain"] .bm-hero__drops,
.bm-hero[data-wx="storm"] .bm-hero__drops {
	opacity: .5 !important;
	background-image: repeating-linear-gradient(105deg, rgba(255, 255, 255, .55) 0 1px, rgba(255, 255, 255, 0) 1px 11px) !important;
	animation: bm-hero-rain 1.1s linear infinite !important;
}

.bm-hero[data-wx="snow"] .bm-hero__drops {
	/* Реже и мягче, чем просилось само: плотная сетка одинаковых точек
	   читается как узор в горошек, а не как снег. */
	opacity: .55 !important;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .85) 0 1.5px, rgba(255, 255, 255, 0) 2.2px),
		radial-gradient(circle at 68% 62%, rgba(255, 255, 255, .6) 0 1.2px, rgba(255, 255, 255, 0) 1.9px) !important;
	background-size: 74px 74px, 52px 52px !important;
	animation: bm-hero-snow 9s linear infinite !important;
}

/*
 * Солнце, луна и облака — настоящими фигурами, а не намёком градиента.
 *
 * Картинок здесь нет намеренно: каждая — это ещё один запрос, ещё один
 * адрес, который однажды переедет, и ещё один килобайт на каждой
 * загрузке главной. Круг с сиянием и полумесяц рисуются самим стилем
 * и весят ноль.
 */
.bm-hero__sun,
.bm-hero__moon {
	position: absolute !important;
	inset-inline-end: 12% !important;
	top: 14% !important;
	width: 54px !important;
	height: 54px !important;
	border-radius: 50% !important;
	opacity: 0 !important;
	transition: opacity .4s ease !important;
}

.bm-hero__sun {
	background: radial-gradient(circle at 50% 50%, #fff6d6 0%, #ffd76a 55%, rgba(255, 200, 70, 0) 72%) !important;
	box-shadow: 0 0 46px 18px rgba(255, 214, 110, .45) !important;
	animation: bm-hero-pulse 9s ease-in-out infinite alternate !important;
}

.bm-hero[data-sky="dawn"] .bm-hero__sun,
.bm-hero[data-sky="day"] .bm-hero__sun,
.bm-hero[data-sky="dusk"] .bm-hero__sun {
	opacity: 1 !important;
}

/* Полумесяц — круг с вырезом вторым кругом той же тени: одна фигура
   вместо картинки. */
.bm-hero__moon {
	background: radial-gradient(circle at 50% 50%, #f3f6ff 0%, #dfe6ff 60%, rgba(223, 230, 255, 0) 72%) !important;
	box-shadow: inset -14px 2px 0 -2px rgba(24, 36, 73, .92), 0 0 34px 10px rgba(200, 214, 255, .28) !important;
}

.bm-hero[data-sky="night"] .bm-hero__moon {
	opacity: 1 !important;
}

/* Пасмурно, туман, дождь и снег — облака заезжают поверх светила
   и медленно плывут. */
.bm-hero__clouds {
	position: absolute !important;
	inset: 0 !important;
	opacity: 0 !important;
	background-image:
		radial-gradient(38px 18px at 22% 26%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
		radial-gradient(52px 22px at 32% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 72%),
		radial-gradient(46px 20px at 72% 22%, rgba(255, 255, 255, .40), rgba(255, 255, 255, 0) 72%),
		radial-gradient(64px 26px at 84% 28%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 74%) !important;
	animation: bm-hero-clouds 40s linear infinite alternate !important;
}

.bm-hero[data-wx="clouds"] .bm-hero__clouds,
.bm-hero[data-wx="fog"] .bm-hero__clouds,
.bm-hero[data-wx="rain"] .bm-hero__clouds,
.bm-hero[data-wx="snow"] .bm-hero__clouds,
.bm-hero[data-wx="storm"] .bm-hero__clouds {
	opacity: 1 !important;
}

/* За плотными облаками светила не видно — иначе солнце светит сквозь
   ливень, и картинка спорит с текстом под ней. */
.bm-hero[data-wx="rain"] .bm-hero__sun,
.bm-hero[data-wx="storm"] .bm-hero__sun,
.bm-hero[data-wx="snow"] .bm-hero__sun,
.bm-hero[data-wx="fog"] .bm-hero__sun {
	opacity: .25 !important;
}

@keyframes bm-hero-pulse {
	from { transform: scale(1); }
	to   { transform: scale(1.06); }
}

@keyframes bm-hero-clouds {
	from { background-position: 0 0, 0 0, 0 0, 0 0; }
	to   { background-position: 60px 0, 40px 0, -50px 0, -30px 0; }
}

/* Ночь: редкие звёзды, которые еле заметно дышат. */
.bm-hero__stars {
	position: absolute !important;
	inset: 0 !important;
	opacity: 0 !important;
	background-image:
		radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .9) 0 1.2px, rgba(255, 255, 255, 0) 1.6px),
		radial-gradient(circle at 62% 16%, rgba(255, 255, 255, .8) 0 1px, rgba(255, 255, 255, 0) 1.4px),
		radial-gradient(circle at 84% 38%, rgba(255, 255, 255, .75) 0 1.1px, rgba(255, 255, 255, 0) 1.5px),
		radial-gradient(circle at 40% 62%, rgba(255, 255, 255, .6) 0 1px, rgba(255, 255, 255, 0) 1.4px) !important;
}

.bm-hero[data-sky="night"] .bm-hero__stars {
	opacity: 1 !important;
	animation: bm-hero-twinkle 6s ease-in-out infinite alternate !important;
}

/* Ночью солнечного пятна нет — вместо него холодная луна. */
.bm-hero[data-sky="night"] .bm-hero__glow {
	background: radial-gradient(circle at 50% 50%, rgba(196, 214, 255, .22), rgba(255, 255, 255, 0) 62%) !important;
}

@keyframes bm-hero-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(38%, 6%, 0); }
}

@keyframes bm-hero-rain {
	from { background-position: 0 0; }
	to   { background-position: -22px 22px; }
}

@keyframes bm-hero-snow {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 10px 74px, -8px 52px; }
}

@keyframes bm-hero-twinkle {
	from { opacity: .55; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	/* Движущийся фон во весь экран — ровно тот случай, ради которого
	   эта настройка существует. Цвет остаётся, движение уходит. */
	.bm-hero__glow,
	.bm-hero__drops,
	.bm-hero__stars,
	.bm-hero__sun,
	.bm-hero__clouds {
		animation: none !important;
	}
}

/* ── содержимое ──────────────────────────────────────────────────── */

.bm-hero__row,
.bm-hero__mid,
.bm-hero__addr {
	position: relative !important;
	z-index: 1 !important;
}

.bm-hero__row {
	display: flex !important;
	align-items: center !important;
	/* На телефоне «как это работает» и языки стоят справа сверху:
	   слева в этой строке ничего не осталось, а прижатые к левому краю
	   они спорили с приветствием под ними. */
	justify-content: flex-end !important;
	gap: 8px !important;
}

.bm-hero__chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	min-height: 0 !important;
	padding: 5px 10px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .18) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	backdrop-filter: blur(6px) !important;
}

.bm-hero__chip:hover,
.bm-hero__chip:focus-visible {
	background: rgba(255, 255, 255, .3) !important;
	color: #fff !important;
}

.bm-hero__chip svg {
	width: 15px !important;
	height: 15px !important;
}

.bm-hero__mid {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-width: 0 !important;
	/* Приветствие прижато вниз, к самому ряду с адресом: сверху
	   остаётся небо, а текст и кнопки читаются одним блоком.
	   `margin-top:auto` — не «отступ», а «весь свободный воздух
	   отдать наверх»: он не зависит от того, сколько строк в тексте
	   и какой высоты ряд. */
	margin-top: auto !important;
}

/* Нижний ряд: «мои заказы» и адрес — две одинаковые кнопки. */
.bm-hero__foot {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	min-width: 0 !important;
	margin-top: 8px !important;
}

/*
 * РАЗМЕР ЗАДАН ФОРМУЛОЙ, А НЕ ЧИСЛОМ.
 *
 * Длина строки заранее неизвестна: имя бывает длинным, фраза про
 * погоду длиннее вопроса, а языков пять. Числом пикселей это
 * не выражается — `clamp()` держит размер между «читаемо» и «влезает»,
 * а обрезка по числу строк не даёт тексту выдавить адрес за край.
 */
.bm-hero__hi {
	margin: 0 !important;
	font-size: clamp(21px, 6.4vw, 32px) !important;
	font-weight: 800 !important;
	line-height: 1.14 !important;
	letter-spacing: -.01em !important;
	color: #fff !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	overflow-wrap: anywhere !important;
}

.bm-hero__sub {
	margin: 0 !important;
	font-size: clamp(13px, 3.5vw, 16px) !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: rgba(255, 255, 255, .92) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	overflow-wrap: anywhere !important;
}

/* Адрес — одна строка, всегда. Длинный обрезается многоточием,
   а не выталкивает шапку за край экрана. */
.bm-hero__addr {
	min-width: 0 !important;
	padding: 7px 12px !important;
	font-size: 13px !important;
}

/* «Мои заказы» — та же кнопка, что и адрес: цвет, размер, шрифт.
   Разный вид у соседних кнопок читается как «вот эта главная». */
.bm-hero__acc {
	flex: 0 0 auto !important;
	padding: 7px 12px !important;
	font-size: 13px !important;
}

.bm-hero__addr-text {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	min-width: 0 !important;
}

.bm-hero__pin,
.bm-hero__chev {
	flex: 0 0 auto !important;
}

.bm-hero__chev {
	width: 16px !important;
	height: 16px !important;
}

.bm-hero__tools {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	min-width: 0 !important;
}

/* Переключатель языков приезжает из PART 38 готовым узлом — здесь
   только место под него и цвет под нашим небом. */
.bm-hero__lang .bmlang-top__now,
.bm-hero__lang .bmlang__now {
	padding: 5px 10px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .18) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	/* Названия языков — как их пишут на самом языке: English, Français,
	   Lëtzebuergesch. Тема переводит их в верхний регистр, и получалось
	   ENGLISH, FRANÇAIS — крик там, где просто список. */
	text-transform: none !important;
	letter-spacing: 0 !important;
	backdrop-filter: blur(6px) !important;
}

.bm-hero__lang .bmlang-top__item,
.bm-hero__lang .bmlang__item {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

@media (min-width: 769px) {
	/*
	 * На широком экране кнопки уходят в правую колонку, а вся левая
	 * половина остаётся приветствию — владелец просил именно так,
	 * и это правильно: чем шире экран, тем нелепее одна строка текста
	 * поперёк всей полосы.
	 */
	.bm-hero__row {
		position: absolute !important;
		top: 14px !important;
		inset-inline-end: 18px !important;
		z-index: 2 !important;
		flex-direction: column !important;
		align-items: flex-end !important;
		gap: 10px !important;
	}

	/* Текст не должен подлезать под правую колонку с кнопками. */
	.bm-hero__mid {
		max-width: 62% !important;
	}

	.bm-hero__foot {
		max-width: 78% !important;
	}

	/* Солнце и луна отходят от правого края: там теперь кнопки,
	   и светило вылезало прямо под «Мои заказы». */
	.bm-hero__sun,
	.bm-hero__moon {
		inset-inline-end: 32% !important;
		width: 64px !important;
		height: 64px !important;
	}

	.bm-hero__hi {
		font-size: clamp(26px, 2.4vw, 38px) !important;
	}
}

/* ── список покупок вместо поиска на витрине ─────────────────────── */

.bm-listbar {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 42px !important;
	padding: 0 14px !important;
	border: 1px solid var(--bmsh-line) !important;
	border-radius: 999px !important;
	background: var(--bmsh-tint) !important;
	box-shadow: none !important;
	color: var(--bmsh-ink) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: start !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
}

.bm-listbar__ico {
	flex: 0 0 auto !important;
	font-size: 16px !important;
}

/* Бегущие примеры: «Milk… Bread… Eggs…». Меняются плавно — резкая
   подмена слова читается как ошибка отрисовки, а не как подсказка. */
.bm-listbar__text {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	opacity: 1 !important;
	transform: translateY(0) !important;
	transition: opacity .2s ease, transform .2s ease !important;
}

.bm-listbar__text.is-out {
	opacity: 0 !important;
	transform: translateY(-6px) !important;
}

/* ── переключатель корзин в шапке корзины ────────────────────────── */

.bm-cartswitch {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	min-width: 0 !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
}

.bm-cartswitch::-webkit-scrollbar {
	display: none !important;
}

/* Вкладки рисует PART 5 — мы их только переносим. Здесь ровно то,
   что меняется от переезда: они больше не в карточке, а в шапке. */
.bm-cartswitch .bm8-cart-tabs {
	display: flex !important;
	gap: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-wrap: nowrap !important;
}

/* Карточка «Ваши корзины» на самой странице больше не нужна:
   переключатель переехал в шапку, и два одинаковых ряда вкладок
   на одном экране читаются как ошибка. */
body.bm-shell-hdr--cart .bm8-carts-header {
	display: none !important;
}

/* ── место для карусели отделов из PART 7 ────────────────────────── */

.bm-rail-host {
	width: 100% !important;
	min-width: 0 !important;
}

/* Карусель приезжает своей разметкой и своими стилями (store.css).
   Наше дело — вписать её в ряд шапки: у неё был тёмный фон липкой
   полосы, у нас белый ряд. */
.bm-rail-host .unified-navigation-section {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

/* ── окно «как это работает» ─────────────────────────────────────── */

.bm-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	display: flex !important;
	align-items: flex-end !important;
	justify-content: center !important;
}

.bm-modal[hidden] {
	display: none !important;
}

.bm-modal__scrim {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(10, 12, 20, .55) !important;
}

.bm-modal__panel {
	position: relative !important;
	z-index: 1 !important;
	width: min(680px, 100%) !important;
	max-height: 86vh !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	padding-bottom: 8px !important;
	border-radius: 20px 20px 0 0 !important;
	background: var(--bmsh-bg) !important;
	box-shadow: 0 -10px 40px rgba(18, 20, 26, .28) !important;
}

@media (min-width: 769px) {
	.bm-modal {
		align-items: center !important;
	}

	.bm-modal__panel {
		border-radius: 20px !important;
	}
}

.bm-modal__head {
	position: sticky !important;
	top: 0 !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	padding: 14px 16px 10px !important;
	background: var(--bmsh-bg) !important;
}

.bm-modal__title {
	margin: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--bmsh-ink) !important;
}

.bm-modal__x {
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--bmsh-tint) !important;
	box-shadow: none !important;
	color: var(--bmsh-ink) !important;
	font-size: 20px !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

.bm-modal__body {
	padding: 0 6px !important;
}

/*
 * Карточки в окне — прямоугольники со скруглением, а не пилюли.
 *
 * Компактный вид рисуется в ядре (PART 9), и там пилюля уместна:
 * лента на всю ширину страницы. В окне карточка стоит рядом
 * с себе подобными, и квадрат читается как карточка, а овал —
 * как кнопка, которую надо нажать один раз.
 */
.bm-modal .bammat-ec-card {
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 104px !important;
	height: 104px !important;
	padding: 10px !important;
	border-radius: 16px !important;
	text-align: center !important;
}

.bm-modal .bammat-ec-card-emoji {
	font-size: 30px !important;
}

.bm-modal .bammat-ec-card-title {
	font-size: 12px !important;
	line-height: 1.2 !important;
	white-space: normal !important;
}

.bm-modal .bammat-ec-carousel {
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 4px 10px 14px !important;
}

.bm-modal .bammat-ec-wrap {
	overflow: visible !important;
}

/* ── 2. поиск ────────────────────────────────────────────────────── */

.bm-search {
	position: relative !important;
	width: 100% !important;
	min-width: 0 !important;
}

.bm-search__form {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100% !important;
	height: 42px !important;
	padding: 0 12px !important;
	border: 1px solid var(--bmsh-line) !important;
	border-radius: 999px !important;
	background: var(--bmsh-tint) !important;
}

.bm-search.is-open .bm-search__form {
	border-color: var(--bmsh-blue) !important;
	background: var(--bmsh-bg) !important;
}

.bm-search__ico {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	color: var(--bmsh-soft) !important;
}

.bm-search__ico svg {
	width: 18px !important;
	height: 18px !important;
}

.bm-search__input {
	flex: 1 1 auto !important;
	/* Ширина элемента сетки по умолчанию равна ширине содержимого,
	   и поле не даёт ряду сжаться. Ровно на этом в кабинете клиента
	   карточка вырастала шире экрана. */
	min-width: 0 !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--bmsh-ink) !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
}

.bm-search__input:focus {
	outline: none !important;
	box-shadow: none !important;
}

.bm-search__input::-webkit-search-cancel-button {
	display: none !important;
}

.bm-search__clear {
	flex: 0 0 auto !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(18, 20, 26, .08) !important;
	color: var(--bmsh-ink) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer !important;
}

.bm-search__sheet {
	position: absolute !important;
	inset-inline: 0 !important;
	top: calc(100% + 8px) !important;
	z-index: 400 !important;
	max-height: min(62vh, 520px) !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	padding: 6px !important;
	border: 1px solid var(--bmsh-line) !important;
	border-radius: var(--bmsh-radius) !important;
	background: var(--bmsh-bg) !important;
	box-shadow: var(--bmsh-shadow) !important;
}

.bm-sr__group + .bm-sr__group {
	margin-top: 6px !important;
	padding-top: 6px !important;
	border-top: 1px solid var(--bmsh-line) !important;
}

.bm-sr__title {
	margin: 0 0 4px !important;
	padding: 0 8px !important;
	color: var(--bmsh-soft) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
}

.bm-sr__item {
	display: flex !important;
	align-items: center !important;
	/* Тема выравнивает содержимое кнопок по центру, и строки выдачи
	   собирались в столбик посреди пустой карточки. `text-align`
	   тут бессилен: раскладку держит флекс, а не текст. */
	justify-content: flex-start !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 8px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--bmsh-ink) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	text-align: start !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
}

.bm-sr__item:hover,
.bm-sr__item:focus-visible {
	background: var(--bmsh-tint) !important;
}

.bm-sr__img {
	flex: 0 0 auto !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 8px !important;
	object-fit: cover !important;
	background: var(--bmsh-tint) !important;
}

.bm-sr__text {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	min-width: 0 !important;
	text-align: start !important;
}

.bm-sr__name {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.bm-sr__meta {
	color: var(--bmsh-soft) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}

.bm-sr__empty {
	margin: 0 !important;
	padding: 14px 10px !important;
	color: var(--bmsh-soft) !important;
	font-size: 13px !important;
	text-align: center !important;
}

/* ── 3. ленты категорий ──────────────────────────────────────────── */

.bm-rail {
	display: flex !important;
	justify-content: flex-start !important;
	/* Жест по горизонтали — ленте, по вертикали — странице. Без этого
	   тема местами перехватывает касание, и лента не двигается вовсе. */
	touch-action: pan-x pan-y !important;
	cursor: grab !important;
	gap: 8px !important;
	width: 100% !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
	padding: 2px 0 !important;
}

.bm-rail::-webkit-scrollbar {
	display: none !important;
}

.bm-rail.is-dragging {
	cursor: grabbing !important;
	scroll-behavior: auto !important;
	user-select: none !important;
}

.bm-rail__item {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 7px 12px !important;
	border: 1px solid var(--bmsh-line) !important;
	border-radius: 999px !important;
	background: var(--bmsh-bg) !important;
	box-shadow: none !important;
	color: var(--bmsh-ink) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
}

.bm-rail__item.is-active {
	border-color: var(--bmsh-blue) !important;
	background: var(--bmsh-blue) !important;
	color: #fff !important;
}

.bm-rail__ico {
	font-size: 15px !important;
	line-height: 1 !important;
}

/*
 * Остатки прежней шапки в нашем ряду.
 *
 * В верхней полосе всех трёх шапок с прошлой жизни остался блок
 * «social» — иконки «поделиться». Он делит ряд с нашим блоком
 * и отнимает у него ширину. Владелец его в конструкторе не нашёл,
 * а искать по чужой админке дороже, чем закрыть стилем: ряд, в котором
 * стоит наша шапка, принадлежит ей целиком.
 */
.whb-flex-row:has(.bm-slot-greeting) .wd-social-icons,
.whb-flex-row:has(.bm-slot-storebar) .wd-social-icons,
.whb-flex-row:has(.bm-slot-slim) .wd-social-icons {
	display: none !important;
}

/* Пока наша лента на месте, карусель категорий из PART 4 не нужна:
   две одинаковые ленты об одном и том же на одном экране читаются
   как ошибка страницы. Прячем, а не удаляем — нажатия мы передаём
   именно ей. */
body.bm-shell-hdr--home .grocery-mobile-filter {
	display: none !important;
}

/* ── 4. полоса магазина ──────────────────────────────────────────── */

.bm-storebar {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: start !important;
	gap: 10px !important;
	width: 100% !important;
	min-width: 0 !important;
	color: var(--bmsh-ink) !important;
}

.bm-storebar__back,
.bm-storebar__list {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border: 1px solid var(--bmsh-line) !important;
	border-radius: 50% !important;
	background: var(--bmsh-bg) !important;
	box-shadow: none !important;
	color: var(--bmsh-ink) !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

.bm-storebar__back svg {
	width: 20px !important;
	height: 20px !important;
}

.bm-storebar__logo {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	overflow: hidden !important;
	border-radius: 12px !important;
	background: var(--bmsh-tint) !important;
}

.bm-storebar__logo img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.bm-storebar__initials {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--bmsh-soft) !important;
}

.bm-storebar__text {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.bm-storebar__name {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

.bm-storebar__meta {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	min-width: 0 !important;
	color: var(--bmsh-soft) !important;
	font-size: 12px !important;
	line-height: 1.3 !important;
}

.bm-storebar__state {
	font-weight: 600 !important;
}

.bm-storebar__state.is-open {
	color: var(--bmsh-green) !important;
}

/* «Открыт, но приём на сегодня закрыт» — это не «закрыто», и красным
   его красить нельзя: красный означает закрытый магазин. */
.bm-storebar__state.is-later {
	color: var(--bmsh-soft) !important;
}

.bm-storebar__state.is-last {
	color: var(--bmsh-amber) !important;
}

.bm-storebar__state.is-closed {
	color: var(--bmsh-red) !important;
}

.bm-storebar__eta {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

/* Своя полоса магазина из PART 7 прячется только там, где ей есть
   замена, — то есть когда шапка магазина действительно назначена. */
body.bm-shell-hdr--store .bammat-store-bar-root {
	display: none !important;
}

/* Плавающая кнопка блокнота (PART 36) — вторая такая же: своя
   у полосы магазина уже есть, и она стоит на месте, а не висит
   поверх товаров. Прячем ровно там, где наша кнопка правда есть. */
body.bm-shell-hdr--store .bmgl-trigger--round {
	display: none !important;
}

/* ── 5. узкая шапка ──────────────────────────────────────────────── */

.bm-slim {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: start !important;
	gap: 10px !important;
	width: 100% !important;
	min-width: 0 !important;
}

.bm-slim__back,
.bm-slim__cart {
	flex: 0 0 auto !important;
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--bmsh-tint) !important;
	box-shadow: none !important;
	color: var(--bmsh-ink) !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

.bm-slim__back svg,
.bm-slim__cart svg {
	width: 20px !important;
	height: 20px !important;
}

.bm-slim__logo {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	text-decoration: none !important;
}

.bm-slim__logo img {
	width: 28px !important;
	height: 28px !important;
	border-radius: 8px !important;
}

.bm-slim__word {
	color: var(--bmsh-blue) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
}

.bm-slim__title {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	color: var(--bmsh-ink) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

.bm-slim__count {
	position: absolute !important;
	top: -2px !important;
	inset-inline-end: -2px !important;
	min-width: 16px !important;
	height: 16px !important;
	border-radius: 8px !important;
	background: var(--bmsh-blue) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 16px !important;
	text-align: center !important;
}

/* ── телефон ─────────────────────────────────────────────────────── */

@media (max-width: 768.98px) {
	/* Порог взят у темы (768.98px). Своё число оставило бы полосу
	   ширины, где не работает ни её раскладка, ни наша, — этот урок
	   уже получен на кнопках в «Моих заказах». */
	.bm-greet__line {
		white-space: normal !important;
		font-size: 14px !important;
	}

	.bm-search__sheet {
		max-height: min(70vh, 460px) !important;
	}

	.bm-storebar__back {
		width: 32px !important;
		height: 32px !important;
	}
}

/* ── 6. кнопка «в корзину» на карточке товара ────────────────────── */

/*
 * ЗНАК ВМЕСТО СЛОВ.
 *
 * «Add to cart» по-английски укладывается в строку, а по-немецки
 * («In den Warenkorb») и по-французски («Ajouter au panier») — нет,
 * и кнопка раздувалась, пока не влезет. На карточке товара это
 * половина её высоты: подпись, цена и счётчик количества жмутся
 * в остаток.
 *
 * Знак решает это раз и навсегда: он одинаков во всех пяти языках
 * и не растёт от перевода. Подпись не удалена, а спрятана размером
 * шрифта — она остаётся в разметке для читалок экрана, а `aria-label`
 * у ссылки WooCommerce печатает сам («Add to cart: "название"»).
 *
 * Значок — фоном, а не псевдоэлементом: у темы на `::before`
 * и `::after` этой же кнопки висит крутилка загрузки, и спорить
 * с ней за одно место значит однажды потерять признак «идёт
 * добавление».
 */
/* Кнопка стоит ПОД счётчиком и ровно его ширины: два элемента одной
   ширины читаются как одна вещь, а кнопка сбоку сжимала счётчик
   до нечитаемого. */
body.bm-shell .wd-add-btn {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 6px !important;
}

body.bm-shell .wd-add-btn > .quantity {
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

body.bm-shell .wd-add-btn > .add_to_cart_button {
	width: 100% !important;
	min-width: 0 !important;
	height: 40px !important;
	padding: 0 !important;
	border-radius: 12px !important;
	font-size: 0 !important;
	line-height: 0 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 10.3a1.3 1.3 0 0 0 1.3 1h7.6a1.3 1.3 0 0 0 1.3-1L19 8H6'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.3' fill='%23ffffff' stroke='none'/%3E%3Ccircle cx='16.5' cy='19.5' r='1.3' fill='%23ffffff' stroke='none'/%3E%3Cpath d='M17 2.6v4.2M19.1 4.7h-4.2'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 21px 21px !important;
}

/*
 * У ТЕМЫ ТУТ СВОЙ ЗНАЧОК, И ОН БЫЛ ВТОРЫМ.
 *
 * `.wd-add-btn-replace` — это «кнопка с подменой»: подпись лежит
 * в `<span>`, а под ней спрятан значок в `::before`, и при наведении
 * они меняются местами. Наш значок фоном оказывался третьим слоем:
 * в покое он налезал на спрятанный, при наведении — на выехавший.
 *
 * Гасим чужой значок и запрещаем подмену. Крутилку загрузки
 * (`::after`) не трогаем: без неё нажатие выглядит как «ничего
 * не произошло», а это самая частая жалоба на любую кнопку.
 */
body.bm-shell .wd-add-btn-replace > .add_to_cart_button::before {
	content: none !important;
	display: none !important;
}

body.bm-shell .wd-add-btn-replace > .add_to_cart_button > span,
body.bm-shell .wd-add-btn-replace > .add_to_cart_button:hover > span {
	/* Подпись остаётся в разметке для читалок экрана, но не занимает
	   места и не выезжает при наведении. */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	transform: none !important;
	opacity: 0 !important;
}

body.bm-shell .wd-add-btn > .add_to_cart_button::after {
	font-size: 15px !important;
	line-height: 1 !important;
}

/* Ссылка «просмотр корзины», которую WooCommerce дописывает после
   добавления, на карточке лишняя: корзина и так в панели снизу. */
body.bm-shell ul.products .added_to_cart {
	display: none !important;
}