/*
 * PART 56 — количественные акции.
 *
 * !important с первой строки, а не после снимка от владельца: у Woodmart
 * есть правила на любой значок и на название товара в корзине, они той же
 * силы, что наши, и спор решает порядок файлов — а наш печатается
 * на `wp_head` рано. Правило проекта записано после прилипшей кнопки
 * «назад» и серых кнопок окна счёта; здесь оно соблюдено сразу.
 */

.bmpromo-badge {
	display: inline-block !important;
	margin: 0 0 6px !important;
	padding: 3px 8px !important;
	border-radius: 999px !important;
	background-color: var( --bm-promo, #ff2d6f ) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
}

/* В корзине подпись стоит своей строкой под названием: приклеенная
   к названию, она уезжает в его перенос и читается частью имени. */
.bmpromo-note {
	display: block !important;
	margin-top: 4px !important;
	color: #6b7280 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

/*
 * ВЗЯТАЯ СКИДКА — РОЗОВЫМ, А НЕ ЗЕЛЁНЫМ.
 *
 * Просьба владельца от 10 сентября, и она про правило: зелёный
 * на сайте означает «открыто» и «собрано», а не «дешевле». Всё,
 * что относится к акциям, носит один цвет — тогда человек узнаёт
 * скидку по цвету раньше, чем прочитает подпись.
 */
.bmpromo-note.is-on {
	color: var( --bm-promo-dark, #d1004f ) !important;
}

/* ── Цена со скидкой в мини-корзине ───────────────────────────────────
 *
 * Прежняя цена зачёркнута и приглушена, новая — розовым и жирнее:
 * человек сверяет глазами именно её. Без зачёркнутой рядом новая цена
 * ничего не сообщает — «1,33 €» это просто цена, а не выгода. */
.bmpromo-was {
	margin-inline-end: 5px !important;
	color: #98a0b3 !important;
	font-weight: 500 !important;
	text-decoration: line-through !important;
}

/*
 * ЦЕНУ КРАСИМ И ВНУТРИ, А НЕ ТОЛЬКО ОБЁРТКУ.
 *
 * `wc_price()` приносит свою разметку — сумма лежит в `<span
 * class="woocommerce-Price-amount">`, и тема красит ЕЁ своим синим.
 * Цвет, заданный обёртке, до неё не доходит: инлайн-цвет и правило
 * на потомке всегда бьют унаследованный. Ровно на этом 18 августа
 * стояли тёмные названия товаров в письмах с тёмной темой.
 *
 * Владелец так и описал: «сделайте и саму цену розовой, рядом с синей
 * зачёркнутой».
 */
.bmpromo-now,
.bmpromo-now .woocommerce-Price-amount,
.bmpromo-now .woocommerce-Price-currencySymbol,
.bmpromo-now bdi {
	color: var( --bm-promo-dark, #d1004f ) !important;
	font-weight: 800 !important;
	text-decoration: none !important;
}

/* ── Ярлык на плитке товара ────────────────────────────────────────────
 *
 * ХУК ПЕЧАТАЕТ ЕГО ВНУТРИ ССЫЛКИ НА КАРТИНКУ, а не рядом с ней:
 * у Woodmart `woocommerce_before_shop_loop_item_title` вызывается внутри
 * `<a class="wd-product-img-link">` в `.wd-product-thumb`. Обычный
 * `inline-block` встаёт ПЕРЕД картинкой и расталкивает плитку — ярлык
 * был выложен 5 сентября и не работал ни разу.
 *
 * Угол выбран не на вкус: слева сверху у темы свои ярлыки
 * (`.product-labels` — top 7px, inset-inline-start 7px), справа сверху
 * в режиме карусели встают кнопки действий (`wd-buttons wd-pos-r-t`).
 * Свободен нижний левый угол, и он свободен в обоих режимах.
 *
 * Опорой служит сама ссылка: у Woodmart `.wd-product-img-link` — это
 * `position:relative; display:block; width:100%`, то есть ровно рамка
 * картинки. Ярлык садится по её нижнему краю, а не по краю плитки,
 * и от высоты названия под картинкой не зависит.
 */
.bmpromo-badge--tile {
	position: absolute !important;
	inset-inline-start: 7px !important;
	bottom: 7px !important;
	z-index: 2 !important;
	margin: 0 !important;
	padding: 3px 7px !important;
	font-size: 11px !important;
	letter-spacing: .01em !important;

	/* Тень, а не рамка: под ярлыком бывает и белый фон упаковки,
	   и тёмная фотография, и на белом синяя таблетка без тени
	   сливается с плиткой. */
	box-shadow: 0 1px 2px rgba( 28, 35, 51, .1 ), 0 4px 10px rgba( 28, 35, 51, .16 ) !important;

	/*
	 * НА ТЕЛЕФОНЕ ЯРЛЫК ОБРЕЗАЛО, И ЗАПАСА ПО КРАЯМ ТУТ НЕ ХВАТИТ.
	 *
	 * «33,34% off from 18» в одну строку шире плитки, а у окна картинки
	 * стоит `overflow: hidden` — подпись обрывалась после слова «from».
	 *
	 * ПЕРЕНОС БЫЛ ПЕРВЫМ ЗАХОДОМ И ЗАБРАКОВАН: владелец не хочет две
	 * строки. Значит размер шрифта подобран так, чтобы САМАЯ ДЛИННАЯ
	 * подпись влезала в одну строку на самой узкой плитке, — и он один
	 * на все ярлыки, иначе соседние товары получили бы разный кегль.
	 */
	max-width: calc( 100% - 14px ) !important;
	white-space: nowrap !important;
}

/* ── Акция на странице товара ──────────────────────────────────────────
 *
 * Здесь есть место, которого нет на плитке, и тратится оно на ЦЕНУ
 * ШТУКИ: «−33,34 % от 3» — это условие, а решение человек принимает
 * по деньгам. Считает её та же функция, что и корзина.
 */
.bmpromo-offer {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin: 0 0 18px !important;
	padding: 11px 14px !important;
	border-radius: 14px !important;
	background-color: rgba( var( --bm-promo-rgb, 255, 45, 111 ), .1 ) !important;
}

.bmpromo-offer .bmpromo-badge {
	margin: 0 !important;
}

.bmpromo-offer__price {
	color: var( --bm-promo-dark, #d1004f ) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

/* Цена внутри фразы — тем же весом, что и ярлык: это то число, ради
   которого блок и показан. `wc_price()` приносит свою разметку, поэтому
   правило писано на её класс, а не на сам `<b>`. */
.bmpromo-offer__price b,
.bmpromo-offer__price .woocommerce-Price-amount {
	color: #1c2333 !important;
	font-size: 15px !important;
	font-weight: 800 !important;
}

/* ══════════════════════════════════════════════════════════════════════
 * ВИТРИНА АКЦИЙ (PART 57)
 *
 * Оформление того же языка, что у карточек блокнота: белая карточка,
 * радиус 16, та же двойная тень, тот же системный шрифт. Цвет — свой,
 * не акцент сайта: решение владельца от 10 сентября, «на сайте всё
 * слишком синее», и в синем ярлык акции читался как ещё одна кнопка.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Спрятанная карточка-заложник ──────────────────────────────────────
 *
 * Шаблон Dokan печатает контейнер сетки только внутри
 * `if ( have_posts() )`, поэтому на витрине акций в запросе остаётся
 * ровно один товар — ради самого контейнера. Его карточку и прячем.
 *
 * `display: none` на обёртке, а не на карточке: у Woodmart на карточку
 * висит своя анимация появления, и она возвращает ей видимость
 * наблюдателем при прокрутке. */
.bmpromo-loop-hidden {
	display: none !important;
}

/* ── Раздел одного отдела ──────────────────────────────────────────── */
.bmpromo-page {
	display: flex !important;
	flex-direction: column !important;
	gap: 26px !important;
}

.bmpromo-sec {
	margin: 0 !important;
}

/* Шапка раздела: название слева, «See all» справа, обе по центру
   высоты. Полоса под ними отделяет раздел от сетки — без неё название
   отдела читалось как подпись к первой карточке. */
.bmpromo-sec__head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	margin: 0 0 14px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid #eceef3 !important;
}

/* `min-width: 0` — иначе длинное название отдела не даёт шапке сжаться
   и она растягивает раздел за край экрана. Цепочку разжимаем целиком,
   а не в том узле, где заметили: этим 23 и 24 августа дважды болели
   лента отделов и полоса корзин. */
.bmpromo-sec__name {
	min-width: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	color: #1c2333 !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	letter-spacing: -.015em !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	text-transform: none !important;
}

/* «See all 84» — кнопка, а не ссылка словами: на витрине акций это
   единственный способ увидеть отдел целиком, и текстовая ссылка среди
   карточек товара его не обещает. Цвет акции, а не акцента сайта:
   кнопка принадлежит акциям. */
.bmpromo-sec__all {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 14px !important;
	border: 1.5px solid rgba( var( --bm-promo-rgb, 255, 45, 111 ), .35 ) !important;
	border-radius: 999px !important;
	background-color: rgba( var( --bm-promo-rgb, 255, 45, 111 ), .07 ) !important;
	color: var( --bm-promo-dark, #d1004f ) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: background-color .18s ease, border-color .18s ease !important;
}

.bmpromo-sec__all:hover,
.bmpromo-sec__all:focus {
	border-color: var( --bm-promo, #ff2d6f ) !important;
	background-color: var( --bm-promo, #ff2d6f ) !important;
	color: #fff !important;
}

/* Стрелка отдельным знаком, а не внутри фразы: она не переводится
   и не должна уезжать вместе с текстом, когда в другом языке порядок
   слов другой. */
.bmpromo-sec__arrow {
	font-size: 14px !important;
	line-height: 1 !important;
}

/* ── Сетка раздела: ровно три ряда ─────────────────────────────────────
 *
 * Число колонок задаём мы, а не тема: у её сетки колонки зависят
 * от настроек магазина, и «три ряда» при чужом числе колонок
 * превращалось бы то в два, то в четыре.
 *
 * Сервер печатает двенадцать карточек — три ряда по четыре. На узких
 * экранах колонок меньше, и лишние карточки гасятся по номеру: сколько
 * колонок сейчас на экране, знает только браузер, а «максимум три
 * ряда» обязано выполняться на каждом.
 */
.bmpromo-sec__grid ul.products {
	display: grid !important;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) ) !important;
	gap: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Карточка не должна растягивать колонку под своё содержимое: без
   `min-width: 0` длинное название товара расширяет ячейку, и сетка
   уезжает за край экрана. */
.bmpromo-sec__grid ul.products > * {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* Пагинация и заголовок чужого блока сеток внутри раздела не нужны:
   раздел — это витрина отдела, а не его страница. */
.bmpromo-sec__grid .woocommerce-pagination,
.bmpromo-sec__grid .wd-products-element > .title-wrapper {
	display: none !important;
}

@media (max-width: 1024px) {
	.bmpromo-sec__grid ul.products {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
	}

	.bmpromo-sec__grid ul.products > *:nth-child(n+10) {
		display: none !important;
	}
}

@media (max-width: 699px) {
	.bmpromo-sec__grid ul.products {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
		gap: 10px !important;
	}

	.bmpromo-sec__grid ul.products > *:nth-child(n+7) {
		display: none !important;
	}

	.bmpromo-sec__head {
		gap: 10px !important;
	}

	.bmpromo-sec__all {
		padding: 7px 11px !important;
		font-size: 12px !important;
	}
}

/* ══ Плитка «Акции» в ленте отделов ══════════════════════════════════
 *
 * ЗАМЕТНАЯ, НО НЕ ВЫБРАННАЯ. Выбранный отдел лента красит сама,
 * и покрасить «Акции» тем же способом значило бы соврать, что человек
 * уже в них. Поэтому у плитки своя розовая рамка и бледная заливка,
 * а подсветка выбранного остаётся за лентой.
 *
 * ПУЛЬСАЦИИ БОЛЬШЕ НЕТ — просьба владельца от 10 сентября. Идея была
 * в том, чтобы плитка позвала взгляд; на живом сайте она оказалась
 * навязчивой, а рамка цветом, которого больше нигде в ленте нет,
 * выделяет плитку и без движения.
 * ════════════════════════════════════════════════════════════════════ */

/*
 * РАМКА — ВНУТРЕННЯЯ, А НЕ КОЛЬЦО СНАРУЖИ.
 *
 * Здесь стояло `box-shadow: 0 0 0 2px`, то есть кольцо ЗА пределами
 * плитки, и лента его обрезала сверху и снизу — владелец прислал
 * снимок 10 сентября. У плитки уже есть `border: 2px solid transparent`
 * (store.css), которым лента красит выбранный отдел; ей и красим.
 * Тогда рамка физически не может выйти за плитку и обрезать её нечем.
 */
.unified-category-item--promo .unified-category-content {
	position: relative !important;
	border-color: var( --bm-promo, #ff2d6f ) !important;
	background-color: rgba( var( --bm-promo-rgb, 255, 45, 111 ), .08 ) !important;
}

.unified-category-item--promo .unified-category-name,
.unified-category-item--promo .unified-category-link {
	color: var( --bm-promo-dark, #d1004f ) !important;
	font-weight: 800 !important;
}

/* Выбранные «Акции» перестают звать: рамка ровная, заливка плотнее. */
.unified-category-item--promo.active .unified-category-content,
.unified-category-item--promo.parent-active .unified-category-content {
	border-color: var( --bm-promo, #ff2d6f ) !important;
	background-color: rgba( var( --bm-promo-rgb, 255, 45, 111 ), .16 ) !important;
}

/*
 * РЯД ПОДКАТЕГОРИЙ ВНУТРИ АКЦИЙ — ТОЖЕ РОЗОВЫЙ.
 *
 * Просьба владельца: «чтобы всё, что относится к акциям, было
 * розовым». Ряд рисует лента своим же кодом (`renderSubRow`) — мы
 * не заводим второй, — а цвет выбранного берём по признаку, который
 * ставит сервер на `<body>`: на любой странице `?bm_promo=…` подкатегория
 * это отдел с акциями, а не обычный отдел.
 */
body.bm-deals .unified-subcategory-tag.active {
	border-color: var( --bm-promo, #ff2d6f ) !important;
	background-color: rgba( var( --bm-promo-rgb, 255, 45, 111 ), .12 ) !important;
	color: var( --bm-promo-dark, #d1004f ) !important;
}

body.bm-deals .unified-subcategory-tag:hover {
	border-color: rgba( var( --bm-promo-rgb, 255, 45, 111 ), .5 ) !important;
	color: var( --bm-promo-dark, #d1004f ) !important;
}

/* Мельче и плотнее на узких экранах: там плитка вдвое уже, и та же
   подпись занимала бы две строки из трёх. */
@media (max-width: 699px) {
	.bmpromo-badge--tile {
		inset-inline-start: 5px !important;
		bottom: 5px !important;
		padding: 2px 5px !important;
		font-size: 9px !important;
		line-height: 1.3 !important;
		letter-spacing: 0 !important;
		max-width: calc( 100% - 10px ) !important;
	}
}