@charset "UTF-8";
/*!
 * Буду буузы — бренд-оформление сайта
 * Патч к брендбуку v2.0 (17.09.2026)
 *
 * Подключается последним (enqueue priority 99), поэтому перекрывает
 * style.min.css темы estar и woocommerce.css простым порядком каскада.
 *
 * Структура:
 *   1. Переменные бренда и перекрытие переменных темы / ядра / WooCommerce
 *   2. База: фон, типографика, заголовки
 *   3. Ссылки
 *   4. Кнопки
 *   5. Формы
 *   6. Шапка и навигация
 *   7. Подвал
 *   8. WooCommerce: каталог, карточка товара, цена, бейджи, иконки состава
 *   9. WooCommerce: корзина, оформление заказа, оплата
 *  10. WooCommerce: уведомления и служебные плашки
 *  11. Блоки (Cart & Checkout Blocks, кнопки в контенте)
 *  12. Личный кабинет, хлебные крошки, пагинация
 *  13. Акценты бренда (Unbounded, Neucha)
 *  14. Доступность: фокус, контраст
 *
 * Жёсткие правила брендбука, которые здесь соблюдены:
 *   • чёрный и серый заменены шоколадом #33210F;
 *   • ссылки и мелкий текст — кирпич #A33F1B (контраст 5,83), не терракота;
 *   • мёд #F0A81E — только фон, текст на нём шоколад;
 *   • зелень #64734F — только «в наличии» / успех, не более 5–10 % площади;
 *   • кремовый на терракоте (4,27) — только для крупного текста, поэтому
 *     текст кнопок ≥ 19 px и жирный (порог WCAG для large text — 18,66 px bold).
 */

/* ==========================================================================
   1. Переменные
   ========================================================================== */

:root {
	/* --- палитра бренда --- */
	--bb-cream: #faf4e7;
	--bb-cream-deep: #f3ead7;
	--bb-terracotta: #c0522a;
	--bb-brick: #a33f1b;
	--bb-chocolate: #33210f;
	--bb-honey: #f0a81e;
	--bb-green: #64734f;
	--bb-line: #e7dcc6;
	--bb-muted: #7d6b57;
	--bb-error: #b3261e;
	--bb-surface: #fff;

	/* --- гарнитуры --- */
	--bb-font-head: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--bb-font-body: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--bb-font-accent: 'Unbounded', 'Rubik', sans-serif;
	--bb-font-hand: 'Neucha', 'Golos Text', cursive;

	/* --- перекрытие переменных темы estar --- */
	--font-sans: var(--bb-font-body);
	--color-accent: var(--bb-terracotta);
	--color-dark: var(--bb-chocolate);
	--color-base: var(--bb-chocolate);
	--color-gray: var(--bb-muted);
	--color-light: var(--bb-line);
	--color-lighter: var(--bb-cream-deep);
	--color-lightest: var(--bb-cream);

	/* --- перекрытие пресетов блоков ядра (--wp--preset--color--*) ---
	   Контент, свёрстанный блоками, уже ссылается на эти переменные,
	   поэтому существующие страницы перекрашиваются автоматически. */
	--wp--preset--color--black: var(--bb-chocolate);
	--wp--preset--color--accent: var(--bb-terracotta);
	--wp--preset--color--dark: var(--bb-chocolate);
	--wp--preset--color--base: var(--bb-chocolate);
	--wp--preset--color--gray: var(--bb-muted);
	--wp--preset--color--light: var(--bb-line);
	--wp--preset--color--lighter: var(--bb-cream-deep);
	--wp--preset--color--lightest: var(--bb-cream);
	--wp--preset--color--cream: var(--bb-cream);
	--wp--preset--color--terracotta: var(--bb-terracotta);
	--wp--preset--color--brick: var(--bb-brick);
	--wp--preset--color--chocolate: var(--bb-chocolate);
	--wp--preset--color--honey: var(--bb-honey);
	--wp--preset--color--green: var(--bb-green);
	--wp--preset--color--line: var(--bb-line);
	--wp--preset--color--muted: var(--bb-muted);

	/* --- перекрытие переменных WooCommerce --- */
	--woocommerce: var(--bb-terracotta);
	--wc-primary: var(--bb-terracotta);
	--wc-primary-text: var(--bb-cream);
	--wc-secondary: var(--bb-cream-deep);
	--wc-secondary-text: var(--bb-chocolate);
	--wc-highlight: var(--bb-brick);
	--wc-highligh-text: var(--bb-chocolate); /* опечатка в ядре WC, оставлена намеренно */
	--wc-content-bg: var(--bb-surface);
	--wc-subtext: var(--bb-muted);
	--wc-green: var(--bb-green);
	--wc-red: var(--bb-error);
	--wc-blue: var(--bb-brick);
	--wc-orange: var(--bb-honey);
	--wc-destructive: var(--bb-error);
	--wc-form-border-color: var(--bb-line);
	--wc-form-border-radius: 6px;
	--wc-form-border-width: 1px;
	--wc-form-color-background: var(--bb-surface);
	--wc-form-color-text: var(--bb-chocolate);
	--wc-separator-color: var(--bb-line);
	--wc-card-border-radius: 8px;

	/* --- тени: только шоколадные, без чёрного --- */
	--shadow-md: 0 4px 6px -1px rgba(51, 33, 15, 0.08), 0 2px 4px -1px rgba(51, 33, 15, 0.05);
	--shadow-lg: 0 10px 15px -3px rgba(51, 33, 15, 0.1), 0 4px 6px -2px rgba(51, 33, 15, 0.06);
}

/* ==========================================================================
   2. База: фон, типографика, заголовки
   ========================================================================== */

body {
	background: var(--bb-cream);
	color: var(--bb-chocolate);
	font-family: var(--bb-font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Всё, что было чёрным или серым, — шоколад. */
body,
p,
li,
td,
th,
dd,
dt,
blockquote,
figcaption,
.entry-content,
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce-product-details__short-description {
	color: var(--bb-chocolate);
}

/* Заголовки — Rubik, шоколад. */
h1,
h2,
h3,
h4,
h5,
h6,
.site-title,
.woocommerce-loop-product__title,
.wc-block-grid__product-title,
.woocommerce div.product .product_title,
.woocommerce-products-header__title,
.entry-title {
	font-family: var(--bb-font-head);
	color: var(--bb-chocolate);
	letter-spacing: normal;
}

h1,
.woocommerce-products-header__title,
.entry-title {
	font-weight: 900;
	font-size: 32px;
	line-height: 1.15;
}

h2 {
	font-weight: 900;
	font-size: 24px;
	line-height: 1.2;
}

h3 {
	font-weight: 700;
	font-size: 20px;
	line-height: 1.25;
}

h4 {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
}

h5,
h6 {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.35;
}

@media screen and (min-width: 783px) {
	h1,
	.woocommerce-products-header__title,
	.entry-title {
		font-size: 36px;
	}

	h2 {
		font-size: 28px;
	}
}

/* Мелкий и второстепенный текст. */
small,
.woocommerce-result-count,
.woocommerce-breadcrumb,
.posted-on,
.entry-meta,
.price_slider_amount,
.site-description,
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a,
.woocommerce table.shop_table td small,
.cart-collaterals .cart_totals p small {
	color: var(--bb-muted);
	font-size: 14px;
}

.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a,
.woocommerce div.product .product_meta span {
	font-family: var(--bb-font-body);
}

/* Блоки: базовый размер основного текста. */
.entry-content,
.woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs .panel {
	font-family: var(--bb-font-body);
	font-size: 17px;
	line-height: 1.5;
}

/* Разделители. */
hr,
.wp-block-separator {
	color: var(--bb-line);
	border-color: var(--bb-line);
	background-color: var(--bb-line);
}

.wp-block-separator.has-alpha-channel-opacity {
	opacity: 1;
}

/* ==========================================================================
   3. Ссылки — кирпич
   ========================================================================== */

a {
	color: var(--bb-brick);
}

a:hover,
a:focus {
	color: var(--bb-chocolate);
}

/* Исключения: ссылки-обёртки, у которых есть собственный цвет. */
.custom-logo-link,
.custom-logo-link:hover,
.woocommerce-LoopProduct-link,
.woocommerce-LoopProduct-link:hover,
a.woocommerce-loop-product__link,
a.woocommerce-loop-product__link:hover {
	color: inherit;
	text-decoration: none;
}

/* Каталожные ссылки ведут на товар — кирпич уместен, но подчёркивание мешает сетке. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	color: var(--bb-chocolate);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--bb-brick);
}

/* ==========================================================================
   4. Кнопки
   ========================================================================== */

/* Основная кнопка: терракота, кремовый текст.
   Размер текста ≥ 19 px при жирном начертании — это порог WCAG «крупного
   текста» (18,66 px bold), при котором контраст 4,27 допустим. */
button,
input[type='button'],
input[type='submit'],
input[type='reset'],
.button,
.wp-block-button__link,
.wp-block-buttons .wp-block-button__link,
.wp-element-button,
.woocommerce .button.button.button.button,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
	background: var(--bb-terracotta);
	color: var(--bb-cream);
	border: 1px solid transparent;
	border-radius: 6px;
	font-family: var(--bb-font-head);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	padding: 12px 22px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

button:hover,
input[type='button']:hover,
input[type='submit']:hover,
input[type='reset']:hover,
.button:hover,
.wp-block-buttons .wp-block-button__link:hover,
.wp-element-button:hover,
.woocommerce .button.button.button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #payment #place_order:hover {
	background: var(--bb-brick);
	border-color: var(--bb-brick);
	color: var(--bb-cream);
	opacity: 1;
	text-decoration: none;
}

button:focus-visible,
input[type='submit']:focus-visible,
.button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--bb-chocolate);
	outline-offset: 2px;
}

/* Кнопки, которые тема гасит серым. */
button[disabled],
input[type='submit'][disabled],
button:disabled,
.woocommerce .button.button.button.button.disabled {
	background: var(--bb-muted);
	color: var(--bb-cream);
	opacity: 1;
	cursor: not-allowed;
}

/* Контурная кнопка (is-style-outline) — кирпич на кремовом. */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-buttons .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--bb-brick);
	border: 2px solid var(--bb-brick);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--bb-brick);
	color: var(--bb-cream);
}

/* Мелкие кнопки — кирпич (крем на терракоте для мелкого текста не проходит). */
.woocommerce .button.wc-forward,
.woocommerce a.added_to_cart,
.woocommerce .widget_shopping_cart .buttons a,
.woocommerce ul.products li.product .button {
	font-size: 17px;
	padding: 10px 18px;
}

.woocommerce a.added_to_cart {
	background: transparent;
	color: var(--bb-brick);
	border-color: var(--bb-line);
	text-transform: none;
}

.woocommerce a.added_to_cart:hover {
	background: var(--bb-cream-deep);
	color: var(--bb-chocolate);
	border-color: var(--bb-brick);
}

/* Карточка товара на телефоне: кнопка «В корзину» в одну строку.
   В две колонки на 360–414 px карточке остаётся ~137 px по внутренней
   ширине, а подпись при базовом `padding: 12px 22px` не помещается —
   «корзину» переносится, кнопка вырастает до ~92 px в три строки и
   раздувает карточку. Прижимаем текст в одну строку, растягиваем кнопку
   на всю ширину карточки и убираем лишние горизонтальные отступы:
   высота выходит ~48 px, то есть порог касания 44 px соблюдён.
   Размер и начертание (19 px / 700) не трогаем — это порог WCAG
   «крупного текста», при котором контраст кремовый/терракота 4,27 проходит;
   на мелком кегле тот же контраст AA уже не выполнялся бы.

   СОСТОЯНИЯ КНОПКИ. WooCommerce помечает нажатую кнопку классами
   `.loading` (идёт запрос) и `.added` (товар в корзине) и дописывает в
   `::after` иконку: спиннер `\e01c` и галочку `\e017`. Иконка встаёт в
   поток флекс-контейнера, то есть становится отдельным элементом флекса, и
   центрируется не подпись, а группа «подпись + иконка». В карточке 360 px
   (внутренняя ширина 135 px, подпись «В КОРЗИНУ» 112 px) галочке с
   отступом 0,53 em = 10 px места уже нет: подпись уезжает влево на 8 px
   (первая буква подрезается краем кнопки), а сама галочка обрезается
   справа — это видно на скриншоте заказчика.
   Тема усугубляет: на `.loading` она задаёт `padding-right: 36px`
   при нашем `padding-left: 10px` — подпись уезжает ещё на 13 px влево,
   а ядро гасит кнопку до `opacity: .25`, и она выглядит сломанной.

   Поэтому в мобильной карточке иконки из `::after` убираются совсем
   (`content: none`), отступы симметричные, а состояние читается заливкой
   кирпичом #A33F1B — «товар уже в корзине» (кремовый на кирпиче 5,83,
   проходит AA и на мелком кегле). Так подпись всегда по центру и никогда
   не обрезается — в том числе при системном увеличении шрифта.

   Ссылка «Просмотр корзины» (a.added_to_cart) появляется после AJAX-добавления
   рядом с кнопкой и уводится на отдельную строку под неё. Кегль 13 px вместо
   14: при 14 px строка занимала 129,6 px из 135 px внутренней ширины
   (запас 5,7 px) и ломалась на две строки при малейшем увеличении шрифта;
   при 13 px запас 14,9 px. Плюс `white-space: nowrap` — переноса не будет.
   Кегль ниже брендбуковского минимума 14 px, но это второстепенная ссылка,
   а пара кирпич/кремовый держит контраст 5,83.
   Высота 44 px — порог касания. */
@media screen and (max-width: 640px) {
	.woocommerce ul.products li.product .button.button {
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		min-height: 44px;
		padding: 12px 10px;
	}

	/* «В процессе»: симметричные отступы, без спиннера, без затухания. */
	.woocommerce ul.products li.product .button.button.loading,
	.woocommerce ul.products li.product .button.button.loading:hover {
		background: var(--bb-brick);
		border-color: var(--bb-brick);
		color: var(--bb-cream);
		opacity: 1;
		padding: 12px 10px;
	}

	.woocommerce ul.products li.product .button.button.loading::after {
		content: none;
	}

	/* «Добавлено»: кирпич = «уже в корзине», галочку убираем. */
	.woocommerce ul.products li.product .button.button.added,
	.woocommerce ul.products li.product .button.button.added:hover {
		background: var(--bb-brick);
		border-color: var(--bb-brick);
		color: var(--bb-cream);
	}

	.woocommerce ul.products li.product .button.button.added::after {
		content: none;
	}

	.woocommerce ul.products li.product a.added_to_cart {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		min-height: 44px;
		margin: 8px 0 0;
		padding: 8px 0;
		font-size: 13px;
		line-height: 1.3;
		letter-spacing: -0.01em;
		white-space: nowrap;
		text-align: center;
	}

	/* «Просмотр корзины» в системном сообщении на странице товара:
	   ядро отдаёт кнопке внутри плашки `float: right` (правило
	   `.woocommerce-message .button`), ей достаётся 248 px при
	   `padding: 12px 22px` — подпись 215,7 px не влезает и ломается
	   на две строки («Просмотр» / «корзины», скриншот заказчика).
	   Снимаем обтекание, растягиваем по ширине плашки и поджимаем отступы:
	   запас 20 px.
	   Специфичность поднята до (0,6,0) намеренно: `padding: 12px 22px`
	   из базового правила кнопок весит (0,5,0) и перебивал бы наш отступ
	   независимо от порядка в файле. */
	.woocommerce .woocommerce-message .button.button.button.wc-forward,
	.woocommerce .woocommerce-info .button.button.button.wc-forward,
	.woocommerce-page .woocommerce-message .button.button.button.wc-forward {
		float: none;
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin: 12px 0 0;
		padding: 12px 6px;
		text-align: center;
		white-space: nowrap;
	}
}

/* Очень узкие экраны (320–359 px): карточка ~142 px, внутренняя ширина
   ~116 px. Убираем горизонтальные отступы полностью и поджимаем трекинг,
   иначе подпись (112 px) выйдет за края кнопки. Ссылке «Просмотр корзины»
   на такой ширине нужен меньший кегль: 13 px занимают 120 px. */
@media screen and (max-width: 359px) {
	.woocommerce ul.products li.product .button.button,
	.woocommerce ul.products li.product .button.button.loading {
		padding: 12px 0;
	}

	.woocommerce ul.products li.product a.added_to_cart {
		font-size: 12px;
	}
}

/* ==========================================================================
   5. Формы
   ========================================================================== */

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='date'],
textarea,
select,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
	background-color: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: 6px;
	color: var(--bb-chocolate);
	font-family: var(--bb-font-body);
	font-size: 16px;
}

input:focus,
textarea:focus,
select:focus,
.select2-container--focus .select2-selection--single {
	border-color: var(--bb-brick);
	outline: 2px solid rgba(163, 63, 27, 0.25);
	outline-offset: 0;
}

::placeholder,
.select2-container .select2-selection--single .select2-selection__placeholder {
	color: var(--bb-muted);
	opacity: 1;
}

/* Ошибка валидации — единственное место для #B3261E. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-selection,
.woocommerce form .form-row.woocommerce-invalid label,
.woocommerce ul.woocommerce-error li,
.woocommerce .coupon-error-notice {
	border-color: var(--bb-error);
	color: var(--bb-error);
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
	border-color: var(--bb-green);
}

.woocommerce form .form-row label {
	color: var(--bb-chocolate);
	font-family: var(--bb-font-body);
}

.woocommerce form .form-row .required {
	color: var(--bb-brick);
}

/* Нативные чекбоксы и радиокнопки браузер рисует системным синим —
   аудит цветов этого не видит, потому что это не CSS-цвет.
   `accent-color` переводит их в бренд. */
input[type='checkbox'],
input[type='radio'],
input[type='range'],
progress {
	accent-color: var(--bb-terracotta);
}

/* Выделение текста: мёд как фон, шоколад как текст (мёд фоном разрешён). */
::selection {
	background-color: var(--bb-honey);
	color: var(--bb-chocolate);
}

/* ==========================================================================
   6. Шапка и навигация
   ========================================================================== */

.header,
.header-bottom {
	background: var(--bb-cream);
	border-bottom: 1px solid var(--bb-line);
}

.header-inner {
	/* 12px + встроенное охранное поле SVG = ~19 px вокруг логотипа. */
	padding-top: 12px;
	padding-bottom: 12px;
}

.header-sticky .header,
.header-sticky.menu-bottom .header-bottom {
	background: var(--bb-cream);
	border-bottom: 1px solid var(--bb-line);
}

/* Логотип: вектор, пропорции не ломаются, охранное поле сбоку. */
.custom-logo-picture {
	display: block;
}

.custom-logo-link {
	display: inline-block;
	margin-right: 16px;
	margin-left: 0;
	line-height: 0;
}

.custom-logo {
	display: block;
	width: 300px;
	height: auto;
	max-width: 100%;
}

@media screen and (max-width: 640px) {
	.custom-logo {
		width: 240px;
		/* Пропорция logo-horizontal-short.svg (viewBox 2621.8 × 436.5):
		   задаёт высоту до загрузки файла, чтобы не было скачка вёрстки. */
		aspect-ratio: 2621.8 / 436.5;
	}
}

.site-title,
.site-title a {
	font-family: var(--bb-font-head);
	color: var(--bb-chocolate);
}

.site-description {
	color: var(--bb-muted);
	font-family: var(--bb-font-body);
}

.header-icon {
	color: var(--bb-chocolate);
}

.header-icon:hover {
	color: var(--bb-brick);
	opacity: 1;
}

/* Навигация: шоколад, hover и активный пункт — кирпич. */
.nav a,
.nav .menu-text a,
.nav .menu-text,
.nav ul li a {
	color: var(--bb-chocolate);
	font-family: var(--bb-font-body);
	font-weight: 500;
}

.nav li:hover > a,
.nav li:hover > .menu-text,
.nav li:hover > .menu-text > a,
.nav li:hover > .menu-text > .sub-menu-toggle,
.nav .menu-text a:hover {
	color: var(--bb-brick);
}

.nav .current-menu-item > a,
.nav .current-menu-item > .menu-text,
.nav .current-menu-ancestor > .menu-text,
.nav .current-menu-ancestor > a {
	color: var(--bb-brick);
}

.nav .sub-menu,
.nav .menu > li > .sub-menu {
	background: var(--bb-cream);
	border: 1px solid var(--bb-line);
}

.nav .sub-menu a {
	color: var(--bb-chocolate);
}

/* Последний пункт меню — плашка-кнопка. Мелкая кнопка → кирпич. */
.header-highlight-last-item .nav .menu > li:last-child > a {
	background: var(--bb-brick);
	color: var(--bb-cream);
	border-radius: 6px;
}

.header-highlight-last-item .nav .menu > li:last-child > a:hover {
	background: var(--bb-chocolate);
	color: var(--bb-cream);
	opacity: 1;
}

/* ==========================================================================
   7. Подвал
   ========================================================================== */

.footer,
.footer-widgets {
	background: var(--bb-cream);
	border-top: 1px solid var(--bb-line);
	color: var(--bb-chocolate);
}

.footer-widgets .widget-title {
	font-family: var(--bb-font-head);
	color: var(--bb-chocolate);
}

.footer a {
	color: var(--bb-brick);
}

.footer a:hover {
	color: var(--bb-chocolate);
}

.site-info {
	background: var(--bb-cream);
	border-top: 1px solid var(--bb-line);
	color: var(--bb-muted);
	font-family: var(--bb-font-body);
}

/* ==========================================================================
   8. WooCommerce: каталог, карточка товара, цена, бейджи
   ========================================================================== */

/* --- карточка товара --- */
.woocommerce ul.products li.product {
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: 8px;
	padding: 12px;
	overflow: hidden;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--bb-brick);
	box-shadow: var(--shadow-md);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bb-font-head);
	font-weight: 700;
	color: var(--bb-chocolate);
}

.woocommerce ul.products li.product .product-weight,
.woocommerce ul.products li.product .weight {
	color: var(--bb-muted);
}

/* --- цена: Rubik Bold, кирпич --- */
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price,
.woocommerce ul.products li.product .price {
	color: var(--bb-brick);
	font-family: var(--bb-font-head);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.1;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--bb-brick);
	font-family: var(--bb-font-head);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.1;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del,
.woocommerce ul.products li.product .price del,
.woocommerce .price del {
	color: var(--bb-muted);
	opacity: 1;
	font-weight: 400;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
.woocommerce ul.products li.product .price ins,
.woocommerce .price ins {
	background: transparent;
	color: var(--bb-brick);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce .price .from,
.woocommerce-Price-currencySymbol {
	color: inherit;
}

/* --- наличие --- */
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock,
.woocommerce div.product .stock,
.woocommerce div.product .in-stock {
	color: var(--bb-green);
	font-family: var(--bb-font-body);
}

.woocommerce div.product .out-of-stock {
	color: var(--bb-muted);
	font-family: var(--bb-font-body);
}

/* --- скидочный бейдж (onsale): мёд + шоколадный текст --- */
.woocommerce span.onsale {
	background-color: var(--bb-honey);
	color: var(--bb-chocolate);
	font-family: var(--bb-font-head);
	font-weight: 700;
	border-radius: 6px;
	min-height: 0;
	min-width: 0;
	width: auto;
	height: auto;
	line-height: 1.2;
	padding: 6px 10px;
	font-size: 14px;
	text-transform: uppercase;
}

.woocommerce ul.products li.product .onsale {
	margin: 8px 8px 0 0;
}

/* Текст бейджа («%» вместо «Скидка») правится не здесь, а фильтром
 * woocommerce_sale_flash в includes/class-brand-woo.php — чтобы корректный
 * текст был и в разметке, и в дереве доступности. */

/* --- бейдж «Закончилось» (плагин woo-out-of-stock-badge) ---
   Перебиваем инлайн-стиль плагина более высокой специфичностью. */
.woocommerce ul.products li.product .wcosb-out-of-stock-badge,
.wcosb-out-of-stock-badge {
	background-color: var(--bb-chocolate);
	color: var(--bb-cream);
	font-family: var(--bb-font-head);
	font-weight: 700;
	font-size: 15px;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(51, 33, 15, 0.3);
}

/* --- «Нет в наличии» из штатного механизма WC --- */
.woocommerce ul.products li.product .wc-block-grid__product-onsale,
.wc-block-grid__product-price .wc-block-grid__product-price__value,
.wc-block-grid__product-price {
	color: var(--bb-brick);
}

.wc-block-grid__product-image .wc-block-grid__product-onsale.wc-block-grid__product-onsale--alignright {
	background: var(--bb-honey);
	color: var(--bb-chocolate);
}

.wc-block-grid__product-title {
	color: var(--bb-chocolate);
}

.wc-block-grid__product-title a {
	color: inherit;
}

/* --- сортировка и счётчик --- */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
	background-color: var(--bb-surface);
	border: 1px solid var(--bb-line);
	color: var(--bb-chocolate);
}

.woocommerce .woocommerce-result-count {
	color: var(--bb-muted);
}

/* --- вес товара --- */
.woocommerce .product-weight,
.woocommerce-product-weight,
.wc-product-weight-display {
	color: var(--bb-muted);
	font-family: var(--bb-font-body);
}

/* --- количество --- */
.woocommerce .quantity .qty {
	border: 1px solid var(--bb-line);
	color: var(--bb-chocolate);
	font-family: var(--bb-font-body);
}

/* --- состав блюда: иконки бренда вместо эмодзи ---

   Бейджи поверх фото рисует отдельный плагин `dish-composition-icons`:
   он берёт теги товара и печатает
       <div class="dish-composition-overlay">
           <span class="comp-icon" title="Говядина">🐄</span> …
       </div>
   Эмодзи не годятся: их рисует устройство посетителя (у Apple, Google и
   Samsung один символ выглядит по-разному), в цвета бренда их не покрасить,
   а скринридер читает их как слова и повторяет состав, который рядом и так
   написан текстом. Ядро WordPress вдобавок подменяет символ картинкой
   с s.w.org — это внешний запрос на каждый бейдж.

   Скрипт-замена живёт в includes/class-brand-composition-icons.php: фильтр
   `dish_composition_icons_map` отдаёт вместо эмодзи
       <i class="bb-ci bb-ci--<slug>"></i>
   где <slug> — ярлык тега товара (govyadina, svinina, kuricza, baranina,
   syr, goryachee, zamorozka, ostroe, zelen). Здесь подставляется картинка.

   Белый круглый бейдж остаётся как есть — его задаёт стиль плагина
   (48 px в каталоге, 56 px на странице товара, 40 px до 768 px), меняется
   только содержимое. Иконка занимает 66 % диаметра и вписывается по
   `contain`: не растягивается и не обрезается при любом размере круга.

   Почему 66, а не 60: при 60 % между рисунком и краем круга оставалось
   слишком много белого, и иконка «терялась» в бейдже. При 66 % самый
   широкий рисунок (снежинка, 81 % viewBox) занимает 54 % диаметра круга —
   до края остаётся 23 % диаметра, то есть рисунок не касается края и не
   обрезается ни на 40 px, ни на 48 px, ни на 56 px.

   Три иконки получают индивидуальный размер: их рисунок занимает во
   viewBox заметно меньше места, чем у остальных, и при общем 66 % они
   выглядели бы легче остальных. Поправка рассчитана по фактически занятой
   площади (замер альфа-канала SVG, 256 × 256):
     • баранья морда — самый компактный рисунок: 68 % viewBox против 74–81 %
       у остальных → 70 %;
     • лист зелени — самая разрежённая: 18 % закрашенных пикселей против
       24–34 % у остальных → 71 %;
     • перец — самый узкий: 43 % viewBox по ширине против 55–77 % → 69 %.
   Итоговый разброс 66–71 % выравнивает визуальный вес, а не создаёт
   разнобой: разница между крайними — 5 п. п. при одинаковом центрировании. */
.dish-composition-overlay .comp-icon .bb-ci {
	display: block;
	flex: 0 0 auto;
	width: 66%;
	height: 66%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Точечные поправки размера. Селекторы той же специфичности, что и базовый,
   но идут позже — поэтому перекрывают его. */
.dish-composition-overlay .comp-icon .bb-ci--baranina {
	width: 70%;
	height: 70%;
}

.dish-composition-overlay .comp-icon .bb-ci--zelen {
	width: 71%;
	height: 71%;
}

.dish-composition-overlay .comp-icon .bb-ci--ostroe {
	width: 69%;
	height: 69%;
}

.dish-composition-overlay .comp-icon .bb-ci--govyadina {
	background-image: url('../img/icons/icon-govyadina.svg');
}

.dish-composition-overlay .comp-icon .bb-ci--svinina {
	background-image: url('../img/icons/icon-svinina.svg');
}

.dish-composition-overlay .comp-icon .bb-ci--kuricza {
	background-image: url('../img/icons/icon-kurica.svg');
}

.dish-composition-overlay .comp-icon .bb-ci--baranina {
	background-image: url('../img/icons/icon-baranina.svg');
}

.dish-composition-overlay .comp-icon .bb-ci--syr {
	background-image: url('../img/icons/icon-syr.svg');
}

.dish-composition-overlay .comp-icon .bb-ci--goryachee {
	background-image: url('../img/icons/icon-goryachee.svg');
}

.dish-composition-overlay .comp-icon .bb-ci--zamorozka {
	background-image: url('../img/icons/icon-zamorozka.svg');
}

.dish-composition-overlay .comp-icon .bb-ci--ostroe {
	background-image: url('../img/icons/icon-ostroe.svg');
}

.dish-composition-overlay .comp-icon .bb-ci--zelen {
	background-image: url('../img/icons/icon-zelen.svg');
}

/* ==========================================================================
   9. WooCommerce: корзина, оформление заказа, оплата
   ========================================================================== */

.woocommerce table.shop_table {
	border: 1px solid var(--bb-line);
	border-radius: 8px;
	background: var(--bb-surface);
}

.woocommerce table.shop_table th {
	background: var(--bb-cream-deep);
	color: var(--bb-chocolate);
	font-family: var(--bb-font-head);
	font-weight: 700;
	border-bottom: 1px solid var(--bb-line);
}

.woocommerce table.shop_table td {
	border-top: 1px solid var(--bb-line);
	color: var(--bb-chocolate);
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	border-top: 1px solid var(--bb-line);
	color: var(--bb-chocolate);
}

.woocommerce table.cart td.actions .coupon .input-text {
	border: 1px solid var(--bb-line);
	background: var(--bb-surface);
	color: var(--bb-chocolate);
}

/* Крестик «удалить товар» — это ссылка, значит кирпич.
   Ядро красит его в --wc-red; #B3261E по брендбуку зарезервирован
   под валидацию форм, поэтому уводим в кирпич. */
.woocommerce table.shop_table a.remove,
.woocommerce table.cart a.remove,
.woocommerce a.remove {
	color: var(--bb-brick);
	background: transparent;
}

.woocommerce table.shop_table a.remove:hover,
.woocommerce table.cart a.remove:hover,
.woocommerce a.remove:hover {
	color: var(--bb-chocolate);
	background: var(--bb-cream-deep);
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
	background: var(--bb-surface);
	border: 1px solid var(--bb-line);
	border-radius: 8px;
	padding: 20px;
}

.woocommerce .cart-collaterals .cart_totals h2 {
	font-family: var(--bb-font-head);
	font-weight: 900;
}

#add_payment_method .cart-collaterals .cart_totals .discount td,
.woocommerce-cart .cart-collaterals .cart_totals .discount td,
.woocommerce-checkout .cart-collaterals .cart_totals .discount td {
	color: var(--bb-brick);
}

/* --- оформление заказа --- */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	border: 1px solid var(--bb-line);
	background: var(--bb-surface);
	border-radius: 8px;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: transparent;
}

.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	background: var(--bb-surface);
}

/* --- нейтральные «сиреневые» обводки и подложки ядра WooCommerce ---
   woocommerce.css и woocommerce-layout.css содержат захардкоженные
   #e9e6ed, #cfc8d8, #e1dde7, #dcd7e2 (производные от старого фиолетового
   бренда WC). Переменными они не перекрываются, поэтому перечисляем точечно. */

.woocommerce .cart-collaterals .cart_totals table tr td,
.woocommerce .cart-collaterals .cart_totals table tr th,
#add_payment_method .cart-collaterals .cart_totals tr td,
#add_payment_method .cart-collaterals .cart_totals tr th,
.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
	border-top-color: var(--bb-line);
}

.woocommerce .widget_shopping_cart .total,
.woocommerce.widget_shopping_cart .total {
	border-top-color: var(--bb-line);
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
	background: var(--bb-cream-deep);
	border-color: var(--bb-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	box-shadow: 2px 2px 0 var(--bb-cream-deep);
}

.woocommerce-order-withdrawal-content__review-row:not(:last-child) {
	border-bottom-color: var(--bb-line);
}

.woocommerce .woocommerce-customer-details address,
.woocommerce ul.order_details,
.woocommerce ul.order_details li {
	border-color: var(--bb-line);
}

.woocommerce ul.order_details li {
	color: var(--bb-chocolate);
}

.woocommerce ul.order_details li strong {
	color: var(--bb-chocolate);
}

/* Заглушки disabled-кнопок ядра: #e9e6ed → плотный кремовый. */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) .button.disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) .button:disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:disabled {
	background-color: var(--bb-muted);
	color: var(--bb-cream);
}

/* --- блок оплаты: фиолетовая заливка ядра → плотная кремовая --- */
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: var(--bb-cream-deep);
	border: 1px solid var(--bb-line);
	border-radius: 8px;
}

#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--bb-line);
}

#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	background-color: var(--bb-surface);
	color: var(--bb-chocolate);
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--bb-surface);
}

/* --- плашка «Условия и зоны доставки» и прочие кнопки на страницах WC --- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	font-family: var(--bb-font-body);
}

/* ==========================================================================
   10. WooCommerce: уведомления и служебные плашки
   ========================================================================== */

/* Плашка-объявление сверху (woocommerce-store-notice / demo_store).
   Терракота здесь не годится: текст в плашке мелкий, крем на терракоте
   даёт 4,27 — ниже нормы 4,5. Поэтому кирпич (5,83).

   ВАЖНО: ядро WooCommerce ставит плашке `position:absolute; top:0`. Плашка
   при этом ложится ПОВЕРХ шапки и закрывает логотип (в этой теме так и было —
   из-под плашки выглядывал только низ старого логотипа 300×100).
   Плашка — первый элемент в <body>, поэтому `position:static` возвращает её
   в поток: она встаёт сверху и сама отодвигает шапку, без JS и без магических
   отступов под переменную высоту (текст объявления правится в админке). */
.woocommerce-store-notice,
p.demo_store {
	position: static;
	background-color: var(--bb-brick);
	color: var(--bb-cream);
	font-family: var(--bb-font-body);
	box-shadow: 0 1px 1em rgba(51, 33, 15, 0.2);
}

.woocommerce-store-notice a,
p.demo_store a {
	color: var(--bb-cream);
	text-decoration: underline;
}

.woocommerce-store-notice a:hover,
p.demo_store a:hover {
	color: var(--bb-cream);
	text-decoration: none;
}

/* На узких экранах объявление переносится в 3–4 строки и съедает
   пол-экрана — уменьшаем кегль и отбивку. */
@media screen and (max-width: 640px) {
	.woocommerce-store-notice,
	p.demo_store {
		font-size: 14px;
		line-height: 1.4;
		padding: 10px 12px;
	}
}

/* Системные сообщения. */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	background-color: var(--bb-surface);
	color: var(--bb-chocolate);
	border-top: 3px solid var(--bb-line);
	border-radius: 0 0 8px 8px;
	font-family: var(--bb-font-body);
}

.woocommerce-message {
	border-top-color: var(--bb-green);
}

.woocommerce-message::before {
	color: var(--bb-green);
}

.woocommerce-info {
	border-top-color: var(--bb-brick);
}

.woocommerce-info::before {
	color: var(--bb-brick);
}

.woocommerce-error {
	border-top-color: var(--bb-error);
}

.woocommerce-error::before {
	color: var(--bb-error);
}

.woocommerce-message a,
.woocommerce-info a {
	color: var(--bb-brick);
}

/* Звёзды рейтинга: пустые — обводка, заполненные — кирпич.
   Мёд как цвет текста брендбук запрещает, поэтому не используем. */
.woocommerce .star-rating::before,
.woocommerce .star-rating {
	color: var(--bb-line);
}

.woocommerce .star-rating span::before {
	color: var(--bb-brick);
}

.woocommerce p.stars a {
	color: var(--bb-brick);
}

/* ==========================================================================
   11. Блоки (Cart & Checkout Blocks, кнопки в контенте)
   ========================================================================== */

/* Кнопки в контенте: ядро ставит #32373c + #fff инлайном — перебиваем. */
.wp-block-buttons .wp-block-button__link,
.wp-block-button .wp-block-button__link,
.wp-block-buttons .wp-element-button {
	background-color: var(--bb-terracotta);
	color: var(--bb-cream);
	border-radius: 6px;
}

.wp-block-buttons .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover {
	background-color: var(--bb-brick);
	color: var(--bb-cream);
}

/* --- Cart & Checkout Blocks (фича сейчас выключена, но CSS готов) --- */
.wc-block-cart,
.wc-block-checkout,
.wc-block-components-sidebar,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wc-block-primary-color: var(--bb-terracotta);
	--wc-block-content-bg: var(--bb-surface);
	color: var(--bb-chocolate);
	font-family: var(--bb-font-body);
}

.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--bb-terracotta);
	color: var(--bb-cream);
	border-radius: 6px;
	font-family: var(--bb-font-head);
	font-weight: 700;
	text-transform: uppercase;
}

.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--bb-brick);
	color: var(--bb-cream);
}

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select,
.wc-block-components-address-form input {
	background-color: var(--bb-surface);
	border-color: var(--bb-line);
	color: var(--bb-chocolate);
}

.wc-block-components-title,
.wc-block-cart__totals-title {
	font-family: var(--bb-font-head);
	color: var(--bb-chocolate);
}

.wc-block-components-product-price,
.wc-block-cart-item__total {
	color: var(--bb-brick);
	font-family: var(--bb-font-head);
}

.wc-block-components-order-summary,
.wc-block-cart__main,
.wc-block-components-sidebar-layout {
	background-color: transparent;
}

/* Пагинация блоков. */
.wc-block-pagination-page:hover,
.wc-block-pagination-page--active[disabled],
.wc-block-pagination-page--active[disabled]:focus,
.wc-block-pagination-page--active[disabled]:hover {
	background: var(--bb-brick);
	color: var(--bb-cream);
}

/* ==========================================================================
   12. Личный кабинет, хлебные крошки, пагинация
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	color: var(--bb-brick);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--bb-chocolate);
}

.woocommerce-MyAccount-content {
	color: var(--bb-chocolate);
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb {
	color: var(--bb-muted);
	font-family: var(--bb-font-body);
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb a {
	color: var(--bb-muted);
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--bb-brick);
}

.page-numbers,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.grid-card .page-numbers {
	background: var(--bb-surface);
	color: var(--bb-chocolate);
	border: 1px solid var(--bb-line);
	border-radius: 6px;
}

.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--bb-cream-deep);
	color: var(--bb-brick);
	border-color: var(--bb-brick);
}

.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--bb-brick);
	color: var(--bb-cream);
	border-color: var(--bb-brick);
}

/* Вкладки карточки товара. */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: var(--bb-cream-deep);
	border-color: var(--bb-line);
	color: var(--bb-chocolate);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background-color: var(--bb-surface);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--bb-chocolate);
	font-family: var(--bb-font-head);
	font-weight: 700;
}

/* Кнопки «Отмена»/«Вернуться» и прочие плоские действия. */
.woocommerce .button.wc-backward {
	background: transparent;
	color: var(--bb-brick);
	border: 2px solid var(--bb-brick);
}

.woocommerce .button.wc-backward:hover {
	background: var(--bb-brick);
	color: var(--bb-cream);
}

/* ==========================================================================
   12.1 Сторонние плагины витрины: добираем цвета, которые они задают
        инлайном или в собственных файлах стилей
   ========================================================================== */

/* Корень документа: у <html> остаётся чёрный из браузерных стилей. */
html {
	color: var(--bb-chocolate);
}

/* Счётчик в иконке корзины (тема estar) — кремовый вместо белого. */
.cart-badge {
	background-color: var(--bb-brick);
	color: var(--bb-cream);
}

/* MetaSlider: подпись слайда. Ядро плагина задаёт чёрную подложку с
   прозрачностью 0,7 и белый текст — переводим на шоколад/кремовый. */
.metaslider .caption-wrap,
.metaslider .caption-wrap .caption,
.metaslider .flexslider .caption-wrap {
	background-color: var(--bb-chocolate);
	color: var(--bb-cream);
}

.metaslider .caption-wrap a {
	color: var(--bb-cream);
	text-decoration: underline;
}

/* MetaSlider/FlexSlider: точки пагинации слайдера. Плагин задаёт
   rgba(0,0,0,.5) и rgba(0,0,0,.9) — это «серый вместо шоколада».
   Текст внутри точек скрыт (text-indent 9999px), поэтому цвет фона
   меняем свободно. */
.metaslider .flex-control-paging li a,
.metaslider .flex-control-nav li a {
	background-color: var(--bb-line);
}

.metaslider .flex-control-paging li a.flex-active,
.metaslider .flex-control-nav li a.flex-active {
	background-color: var(--bb-brick);
}

/* Стрелки слайдера. */
.metaslider .flex-direction-nav a,
.flex-direction-nav a {
	color: var(--bb-chocolate);
}

.metaslider .flex-direction-nav a:hover,
.flex-direction-nav a:hover {
	color: var(--bb-brick);
}

/* Плагин «Отображение веса товара» (wc-product-weight-display) печатает
   цвет прямо в атрибуте style="#777" / "#666" — такое перебивается только
   !important. Правку самого плагина не делаем: он боевой, а цвет здесь
   закрывается точечно и не потеряется при его обновлении. */
.woocommerce ul.products li.product .product-weight-loop,
.woocommerce div.product .product-weight-single,
.product-weight-loop,
.product-weight-single {
	color: var(--bb-muted) !important;
}

/* Плагин «Закончилось» (woo-out-of-stock-badge) печатает <style> в wp_head
   уже после стилей — нужна повышенная специфичность. */
.woocommerce ul.products li.product span.wcosb-out-of-stock-badge {
	background-color: var(--bb-chocolate);
	color: var(--bb-cream);
}

/* Плагин «Скидка вместо распродажи» / штатный onsale. */
.woocommerce ul.products li.product span.onsale,
.woocommerce span.onsale {
	background-color: var(--bb-honey);
	color: var(--bb-chocolate);
}

/* ==========================================================================
   12.2 Трекер заказов (budu-buzy-order-tracker) — только оформление
        Сам плагин не трогаем: он собран на CSS-переменных `--bbt-*`,
        поэтому перекрашивается переопределением значений.
        Префикс `html` нужен из-за порядка загрузки: tracker.css плагин
        печатает <link> прямо в разметке страницы «спасибо», то есть ПОСЛЕ
        brand.css. Специфичность (0,2,0) против (0,1,0) решает вопрос.
   ========================================================================== */

html .bbt-tracker {
	--bbt-primary: var(--bb-terracotta);
	--bbt-primary-dark: var(--bb-brick);
	--bbt-success: var(--bb-green);
	--bbt-warning: var(--bb-honey);
	--bbt-danger: var(--bb-error);
	--bbt-gray: var(--bb-muted);
	--bbt-light: var(--bb-line);
	--bbt-dark: var(--bb-chocolate);
	--bbt-radius: 6px;
	--bbt-shadow: 0 4px 20px rgba(51, 33, 15, 0.08);
	font-family: var(--bb-font-body);
	color: var(--bb-chocolate);
}

html .bbt-tracker .bbt-tracker-header,
html .bbt-tracker .bbt-status-text {
	font-family: var(--bb-font-head);
	color: var(--bb-chocolate);
}

/* Брендбук не использует градиенты как приём — прогресс делаем плоским. */
html .bbt-tracker .bbt-progress-fill {
	background: var(--bb-terracotta);
}

html .bbt-tracker .bbt-current-status {
	background: var(--bb-cream-deep);
}

html .bbt-tracker .bbt-progress-bar,
html .bbt-tracker .bbt-step-dot {
	background: var(--bb-line);
	color: var(--bb-chocolate);
}

html .bbt-tracker .bbt-step-active .bbt-step-dot,
html .bbt-tracker .bbt-step-current .bbt-step-dot {
	background: var(--bb-terracotta);
	color: var(--bb-cream);
	box-shadow: none;
}

/* Ключевые кадры плагина заданы с «оранжевым» свечением и перебиваются
   только по порядку в документе, поэтому подменяем имя анимации. */
html .bbt-tracker .bbt-step-current .bbt-step-dot {
	animation-name: bb-step-pulse;
}

html .bbt-tracker .bbt-current-status.bbt-status-updated {
	animation-name: bb-status-flash;
}

html .bbt-tracker .bbt-total {
	border-top-color: var(--bb-terracotta);
	color: var(--bb-brick);
	font-family: var(--bb-font-head);
}

html .bbt-tracker .bbt-info-row {
	border-bottom-color: var(--bb-line);
}

html .bbt-tracker .bbt-push-btn,
html .bbt-search-wrap .bbt-search-btn {
	background: var(--bb-terracotta);
	color: var(--bb-cream);
	border-radius: 6px;
	font-family: var(--bb-font-head);
	font-weight: 700;
}

html .bbt-tracker .bbt-push-btn:hover,
html .bbt-search-wrap .bbt-search-btn:hover {
	background: var(--bb-brick);
	box-shadow: none;
	transform: none;
}

html .bbt-search-wrap .bbt-phone-input {
	background: var(--bb-surface);
	border-color: var(--bb-line);
	color: var(--bb-chocolate);
}

html .bbt-search-wrap .bbt-phone-input:focus {
	border-color: var(--bb-brick);
}

html .bbt-search-wrap .bbt-search-error {
	background: var(--bb-cream-deep);
	border: 1px solid var(--bb-error);
	color: var(--bb-error);
}

@keyframes bb-step-pulse {
	0%, 100% { box-shadow: 0 4px 16px rgba(192, 82, 42, 0.35); }
	50% { box-shadow: 0 4px 24px rgba(192, 82, 42, 0.55); }
}

@keyframes bb-status-flash {
	0%, 100% { background: var(--bb-cream-deep); }
	50% { background: var(--bb-line); transform: scale(1.02); }
}

/* ==========================================================================
   13. Акценты бренда
   ========================================================================== */
/* Unbounded — только крупные акцентные заголовки промо-блоков.
   В интерфейсе не используется: брендбук прямо запрещает Unbounded в тексте. */
.bb-accent-font,
.bb-hero-title {
	font-family: var(--bb-font-accent);
	font-weight: 900;
	line-height: 1.1;
}

/* Neucha — рукописные акценты, не для интерфейса, цен и адресов. */
.bb-hand,
.bb-handnote {
	font-family: var(--bb-font-hand);
	font-weight: 400;
	line-height: 1.2;
}

/* Плашка-бейдж: мёд как фон, шоколад как текст. */
.bb-badge {
	display: inline-block;
	background: var(--bb-honey);
	color: var(--bb-chocolate);
	font-family: var(--bb-font-head);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	padding: 4px 10px;
	border-radius: 4px;
	text-transform: uppercase;
}

/* ==========================================================================
   14. Доступность
   ========================================================================== */

/* Фокус. Точечная рамка вокруг нажатой кнопки — это `*:focus{outline:1px
   dotted}` из `style.min.css` темы: браузер ставит `:focus` в том числе
   после клика мышью (`:focus-visible` — только при навигации с клавиатуры).
   У кнопки «В корзину» после добавления товара это читалось как сломанная
   штриховая рамка (скриншот заказчика), поэтому для «мышиного» фокуса
   обводку гасим, а клавиатуре оставляем кольцо бренда по `:focus-visible`.
   Селектор `*:focus:not(:focus-visible)` весит больше темы (0,2,0 против
   0,1,0) и не зависит от порядка загрузки стилей. */
*:focus:not(:focus-visible) {
	outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--bb-chocolate);
	outline-offset: 2px;
}

.screen-reader-text:focus {
	background-color: var(--bb-cream);
	color: var(--bb-chocolate);
	border: 2px solid var(--bb-brick);
	box-shadow: none;
}

/* Отключаем анимацию по предпочтениям системы. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}