/*
Theme Name: BRINHILL Child
Theme URI: https://brinhill.ru/
Description: Дочерняя тема Storefront для магазина BRINHILL. Здесь живёт весь наш код: аналитика, сохранение источника рекламы, оформление. Родительскую тему не трогаем, чтобы её обновления ничего не ломали.
Author: Дмитрий
Template: storefront
Version: 1.0.0
Text Domain: brinhill-child
*/

/* ==========================================================================
   Шрифт заголовков

   Самохостится намеренно: подключение с fonts.googleapis.com — это лишний
   коннект на мобильных и передача IP посетителей третьей стороне.
   Взяты только два сабсета, кириллица и латиница, вес 600. Вместе 33 КБ.
   ========================================================================== */

@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/unbounded-600-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/unbounded-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ==========================================================================
   Палитра

   Тёплый песок — про дерево рукояти и разделочную доску.
   Тёмный тон уведён в тепло: чистый чёрный рядом с бежевым выглядит грязно.
   Акцент ровно один — цвет раскалённого металла. Второго акцента не будет:
   в магазине на десять товаров любой лишний цвет читается как шум.
   ========================================================================== */

:root {
	--bh-sand: #f4f1ec;
	--bh-sand-deep: #eae4da;
	--bh-ink: #17130f;
	--bh-ink-soft: #58504a;
	/* Затемнён с #8a837b: на белом тот давал контраст 3,7:1 — ниже нормы 4,5:1
	   для мелкого текста, Lighthouse ругался на подписи под отзывами.
	   Текущий — 5,5:1, и он всё ещё светлее основного текста, иерархия цела. */
	--bh-steel: #6f6862;
	--bh-line: #d8d1c5;
	--bh-forge: #c2410c;
	--bh-forge-deep: #9a3412;

	--bh-display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
	--bh-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

	/* Тень одна на весь сайт и почти незаметная. Кованая вещь лежит на столе,
	   а не парит в воздухе. */
	--bh-lift: 0 1px 2px rgba(23, 19, 15, .05), 0 10px 24px -12px rgba(23, 19, 15, .18);
}

/* ==========================================================================
   Основа
   ========================================================================== */

body {
	background: var(--bh-sand);
	color: var(--bh-ink);
	font-family: var(--bh-body);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.site-content,
.site-header,
.site-footer {
	background: transparent;
}

/* Поля форм наследуют шрифт страницы.

   Storefront задавал им Source Sans Pro с fonts.googleapis.com. Этот запрос
   мы сняли (inc/performance.php), и без этого правила поля откатились бы на
   резервный стек родительской темы — то есть отличались бы шрифтом от всего
   остального текста. Заметно на оформлении заказа, где полей два десятка. */
input,
select,
textarea,
optgroup {
	font-family: var(--bh-body);
}

h1, h2, h3,
.site-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
	font-family: var(--bh-display);
	font-weight: 600;
	letter-spacing: -.025em;
	/* Было 1.05. На крупном кегле такая плотность читалась, на компактном
	   строки слипались — заголовок товара в три строки выглядел кляксой. */
	line-height: 1.14;
	color: var(--bh-ink);
}

/*
   Кегли уменьшены по второй волне правок (05.09).

   Было: h1 до 3,75rem (60 px на широком экране), название товара тем же
   размером. На светлом фоне это давало страницу, которую клиент справедливо
   назвал «текстовой статьёй»: чёрного шрифта много, фотографий мало.

   Стало: заголовок заметно меньше кадра рядом с ним. Иерархия держится не
   размером букв, а контрастом «фото — текст». Текст при этом не мельче
   читаемого: минимум 1,75rem у h1 и 17 px у основного текста.
*/
h1 {
	font-size: clamp(1.75rem, 3.2vw, 2.6rem);
	margin-bottom: .5em;
}

.woocommerce div.product .product_title {
	font-size: clamp(1.4rem, 2.2vw, 1.85rem);
	margin-bottom: .4em;
}

h2 {
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
}

h3 {
	font-size: 1.15rem;
	letter-spacing: -.015em;
}

/* Надзаголовок: мелкий, разряженный, капслоком. Даёт ту самую разницу
   масштабов, без которой страница выглядит плоско. */
.bh-eyebrow {
	font-family: var(--bh-body);
	/* Было .72rem — 11,5 px. Детектор вёрстки справедливо считает это мелким
	   шрифтом: капслок с разрядкой на телефоне читается тяжело. .8rem = 12,8 px. */
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bh-steel);
	margin-bottom: 1rem;
	display: block;
}

a {
	color: var(--bh-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color .15s ease;
}

a:hover {
	color: var(--bh-forge);
}

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

   Скруглений нет нигде. Кованая вещь имеет грань, а не радиус 16 пикселей —
   и заодно это то, чем магазин не похож на любой другой шаблон.
   ========================================================================== */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 1.6em;
	border: 1px solid var(--bh-ink);
	border-radius: 0;
	background: transparent;
	color: var(--bh-ink);
	font-family: var(--bh-body);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	box-shadow: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce ul.products li.product .button:hover {
	background: var(--bh-ink);
	color: var(--bh-sand);
	border-color: var(--bh-ink);
}

/* Главное действие — заливка акцентом. Такая кнопка на странице одна. */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce div.product form.cart .single_add_to_cart_button {
	background: var(--bh-forge);
	border-color: var(--bh-forge);
	color: #fff;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--bh-forge-deep);
	border-color: var(--bh-forge-deep);
	color: #fff;
}

/* Видимый фокус с клавиатуры — не декоративный, а рабочий */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--bh-forge);
	outline-offset: 2px;
}

/* ==========================================================================
   Каталог

   Storefront по умолчанию центрирует название и цену — от этого любая витрина
   выглядит одинаково. Здесь всё по левому краю, цена крупная, кнопка внизу
   карточки, чтобы ряд читался колонками, а не набором открыток.
   ========================================================================== */

/*
   Storefront вешает на список товаров clearfix — ::before и ::after с
   display:table. В гриде псевдоэлементы становятся полноценными ячейками:
   ::before занимал первую клетку, и весь каталог съезжал на колонку вправо.
   Поймано замером getBoundingClientRect, на глаз это читается как «просто
   криво». При гриде очищать нечего, поэтому псевдоэлементы убираем.
*/
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1rem;
	margin: 0;
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	padding: 0;
	text-align: left;
}

.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: .9rem;
	border-radius: 0;
	background: var(--bh-sand-deep);
	box-shadow: none;
	transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.02);
}

/* Кадрируем сам снимок, а не двигаем карточку: витрина остаётся спокойной,
   товар при этом отзывается на курсор. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	overflow: hidden;
	display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	line-height: 1.25;
	margin: 0 0 .35rem;
	padding: 0;
	/* Две строки под название. Без этого у карточек с коротким и длинным
	   названием цена и кнопка расходятся по вертикали, и ряд выглядит рваным. */
	min-height: 2.5em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0 0 .9rem;
	font-family: var(--bh-display);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--bh-ink);
}

.woocommerce ul.products li.product .price del {
	font-family: var(--bh-body);
	font-size: .95rem;
	font-weight: 400;
	color: var(--bh-steel);
	margin-right: .4em;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--bh-forge);
}

/* Кнопки всех карточек ряда выравниваются по низу, даже если названия
   разной длины */
.woocommerce ul.products li.product .button {
	margin-top: auto;
	width: 100%;
}

.woocommerce span.onsale {
	top: .75rem;
	left: .75rem;
	right: auto;
	min-height: 0;
	min-width: 0;
	padding: .35em .7em;
	border-radius: 0;
	background: var(--bh-forge);
	color: #fff;
	font-family: var(--bh-body);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2.5rem 1.75rem;
	}
}

@media (min-width: 1100px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Карточка товара
   ========================================================================== */

.woocommerce div.product div.images img {
	border-radius: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	height: auto;
}

/*
   Фото на карточке крупнее.

   Storefront делит верх карточки пополам: 48 % под галерею, 48 % под текст.
   При контейнере 1130 px это давало снимок 416 px — меньше, чем плитка
   в каталоге на широком экране. Магазин, где товар показан мелко, а название
   набрано крупно, и читается как статья о товаре, а не как витрина.

   55/41 — снимок около 620 px. Больше отдать нельзя: справа должны помещаться
   цена, краткое описание и кнопка, не переползая в три строки.
*/
/*
   Селекторы повторяют селекторы Storefront один в один. Короткий вариант
   `.woocommerce div.product div.images` проигрывал по весу: в woocommerce.css
   темы ширина задана как `.storefront-full-width-content.single-product
   div.product .woocommerce-product-gallery`, и это четыре класса против трёх.
   Поймано замером — правило было в стилях, а ширина оставалась 442 px.

   ⚠️ ЗАЗОР МЕЖДУ КОЛОНКАМИ ЗАДАЁМ САМИ.

   Первая версия ставила 55 % и 41 % и молча ломала страницу. У галереи
   Storefront держит собственный `margin-right: 4.348%`, и в сумме выходило
   100,35 % — на четыре пикселя шире контейнера. Правый столбец при этом
   не сжимается, а как плавающий блок ПАДАЕТ вниз: получалось фото, а под ним
   со сдвигом вправо название, цена и кнопка. Ровно то, что заметил клиент.

   Поэтому зазор прописан явно, а сумма 55 + 4 + 40 = 99 % оставляет запас
   на округления. И проверять теперь надо не ширину колонок, а их координату
   Y: если у галереи и у summary она разная — колонка упала.
*/
@media (min-width: 768px) {
	.single-product div.product .images,
	.single-product div.product .woocommerce-product-gallery,
	.storefront-full-width-content.single-product div.product .images,
	.storefront-full-width-content.single-product div.product .woocommerce-product-gallery {
		width: 55%;
		margin-right: 4%;
	}

	.single-product div.product .summary,
	.storefront-full-width-content.single-product div.product .summary {
		width: 40%;
	}
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--bh-display);
	/* Было до 2,5rem. Цена оставалась самой крупной строкой на странице,
	   и вместе с названием давала два «чёрных пятна» подряд. */
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	font-weight: 600;
	letter-spacing: -.025em;
	color: var(--bh-ink);
	margin-bottom: .35rem;
}

/* Доставка включена в цену — сказать это прямо под ценой, а не прятать
   на отдельной странице. Снимает главное возражение до нажатия кнопки. */
.woocommerce div.product p.price::after {
	content: 'Доставка по России включена в цену';
	display: block;
	margin-top: .5rem;
	font-family: var(--bh-body);
	font-size: .85rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--bh-ink-soft);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: stretch;
	margin: 1.75rem 0;
}

/* Кнопка покупки занимает всю оставшуюся ширину: это главное действие
   страницы, а не ещё одна кнопка в ряду */
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 200px;
}

.woocommerce div.product form.cart .quantity {
	flex: 0 0 auto;
	margin: 0;
}

.woocommerce div.product form.cart .quantity input.qty {
	min-height: 48px;
	border: 1px solid var(--bh-line);
	border-radius: 0;
	background: #fff;
	font-size: 1rem;
}

/* ==========================================================================
   Карточка товара: широкий блок содержимого

   Вкладки «Описание / Детали» убраны в inc/layout.php. Storefront ставил
   список вкладок в отдельную колонку слева, и под ним оставалась пустая треть
   экрана, а характеристики прятались за второй вкладкой. Теперь разделы идут
   подряд одной колонкой — ничего не скрыто и нажимать ничего не нужно.
   ========================================================================== */

.bh-details {
	clear: both;
	padding-top: 2.5rem;
	margin-bottom: 3rem;
	border-top: 1px solid var(--bh-line);
}

.bh-details__block + .bh-details__block {
	margin-top: 2.75rem;
}

.bh-details__title {
	margin-bottom: 1rem;
}

/* Мера строки. Без неё на широком экране описание растягивается на всю
   ширину контейнера, и глаз теряет начало следующей строки. */
.bh-details__text {
	max-width: 68ch;
	color: var(--bh-ink-soft);
}

.bh-details__text > :last-child {
	margin-bottom: 0;
}

/* Подзаголовки внутри описания — клиент набирает их в админке обычным
   стилем «Заголовок 3». Правило нужно, чтобы структурированное описание
   выглядело так же аккуратно, как остальной шаблон. */
.bh-details__text h3 {
	margin: 2rem 0 .6rem;
	color: var(--bh-ink);
}

.bh-details__text h3:first-child {
	margin-top: 0;
}

.bh-details__more {
	margin-top: 1.2rem;
	font-size: .95rem;
}

/*
   Характеристики парами, а не таблицей в две ячейки на всю ширину: у таблицы
   между свойством и значением оставалось полметра пустоты. На широком экране
   пары идут в две колонки, на телефоне — в одну.
*/
.bh-specs {
	margin: 0;
	max-width: 72ch;
	border-top: 1px solid var(--bh-line);
}

.bh-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .7em 0;
	border-bottom: 1px solid var(--bh-line);
}

.bh-specs dt {
	color: var(--bh-ink-soft);
	font-weight: 400;
	margin: 0;
}

.bh-specs dd {
	margin: 0;
	text-align: right;
	font-weight: 600;
}

@media (min-width: 768px) {
	.bh-specs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 3rem;
		max-width: none;
		border-top: 0;
	}

	.bh-specs__row {
		border-top: 1px solid var(--bh-line);
		border-bottom: 0;
	}
}

/* ==========================================================================
   Формы, корзина, оформление заказа
   ========================================================================== */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	min-height: 48px;
	padding: .7em .85em;
	border: 1px solid var(--bh-line);
	border-radius: 0;
	background: #fff;
	font-family: var(--bh-body);
	font-size: 1rem;
	color: var(--bh-ink);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--bh-ink);
	outline: none;
	box-shadow: 0 0 0 3px rgba(194, 65, 12, .12);
}

.woocommerce-checkout #payment,
.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
	border-radius: 0;
	background: #fff;
	border: 1px solid var(--bh-line);
}

/* Кнопка плагина Ozon дублировала «Оформить заказ» — см. inc/ozon-checkout.php.
   !important обязателен: плагин пишет ей style="display:block" прямо в разметку. */
.woocommerce .cart_totals .ozonpay-checkout-btn {
	display: none !important;
}

.woocommerce .cart_totals .bh-ozon-hint {
	margin: .4em 0 0;
	font-size: .875em;
	color: var(--bh-ink);
}

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

/* Обязательное поле и согласие на обработку данных должны быть заметны */
.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: var(--bh-forge);
}

.woocommerce form .form-row .required {
	color: var(--bh-forge);
	text-decoration: none;
}

/* ==========================================================================
   Уведомления
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin-bottom: 1rem;
	padding: 1em 1.25em;
	border-radius: 0;
	border-top: 0;
	border-left: 3px solid var(--bh-ink);
	background: var(--bh-sand-deep);
	color: var(--bh-ink);
	box-shadow: none;
}

.woocommerce-error {
	border-left-color: var(--bh-forge);
}

/* ==========================================================================
   Cookie-уведомление
   ========================================================================== */

/* Баннер прячется атрибутом hidden из JS. Без этого правила display:flex ниже
   перебивает браузерное [hidden]{display:none}, и после «Отклонить» плашка
   оставалась висеть внизу экрана навсегда. Поймано замером computed style. */
.brinhill-cookie[hidden] {
	display: none;
}

.brinhill-cookie {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	gap: .75em 1em;
	align-items: center;
	justify-content: center;
	padding: 1em 1.25em;
	background: var(--bh-ink);
	color: var(--bh-sand);
	font-size: .85rem;
	line-height: 1.45;
	box-shadow: var(--bh-lift);
}

.brinhill-cookie__text {
	max-width: 78ch;
}

.brinhill-cookie__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}

.brinhill-cookie a {
	color: var(--bh-sand);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.brinhill-cookie a:hover {
	color: #fff;
}

.brinhill-cookie button {
	min-height: 44px;
	padding: 0 1.4em;
	border: 1px solid var(--bh-sand);
	border-radius: 0;
	background: transparent;
	color: var(--bh-sand);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.brinhill-cookie button:hover {
	background: var(--bh-sand);
	color: var(--bh-ink);
}

.brinhill-cookie button.brinhill-cookie-accept {
	background: var(--bh-forge);
	border-color: var(--bh-forge);
	color: #fff;
}

.brinhill-cookie button.brinhill-cookie-accept:hover {
	background: var(--bh-forge-deep);
	border-color: var(--bh-forge-deep);
}

/* ==========================================================================
   Мелочи, которые видно только на телефоне
   ========================================================================== */

@media (max-width: 480px) {
	body {
		font-size: 16px;
	}

	.woocommerce ul.products {
		gap: 1.25rem .75rem;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: .92rem;
	}

	.woocommerce ul.products li.product .price {
		font-size: 1.15rem;
	}
}

/* Если человек попросил систему убрать анимации — убираем */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   Главная
   ========================================================================== */

/* Заголовок страницы на главной не выводим: оффер уже стоит первой строкой
   внутри самой страницы, иначе «BRINHILL» печатается дважды подряд. */
body.home .entry-header,
body.home .page-title {
	display: none;
}

/*
   Первый экран: текст и фотография товара.

   Было: только заголовок в 60 px и абзац на светлом фоне — страница читалась
   как информационная, а не как магазин. Стало: снимок такого же веса, что и
   текст, заголовок компактнее.

   Порядок на телефоне обратный порядку в разметке: сначала фотография, потом
   заголовок. В разметке первым идёт текст — так H1 остаётся в начале документа
   и для поиска, и для читалки с экрана.
*/
.bh-hero {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 3.5rem;
}

.bh-hero__media {
	order: -1;
	min-width: 0;
}

/* Страховка от пустого абзаца. Редактор WordPress иногда оставляет <p></p>
   между блоками; в сетке он стал бы полноценной ячейкой и развалил бы две
   колонки на три. */
.bh-hero > p:empty {
	display: none;
}

.bh-hero__img {
	display: block;
	width: 100%;
	height: auto;
	/* 4:3 на телефоне вместо квадрата: квадрат съедал экран целиком,
	   и кнопка «Смотреть каталог» уходила под сгиб. Замерено на 390 px. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--bh-sand-deep);
}

.bh-hero h1 {
	margin-bottom: .45em;
}

.bh-hero__lead {
	max-width: 46ch;
	font-size: 1.05rem;
	color: var(--bh-ink-soft);
	margin-bottom: 1.5rem;
}

.bh-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.5rem;
	margin: 0 0 1.25rem;
}

.bh-hero__note {
	margin: 0;
	font-size: .85rem;
	color: var(--bh-steel);
}

/*
   Первый экран на телефоне должен помещаться целиком — вместе с кнопкой.

   Замер на 390×844 до правки: шапка 127 px, дальше 68 px пустоты (отступ
   Storefront), фото, заголовок, и кнопка «Смотреть каталог» уходила на
   отметку 829 px. Это ниже честной высоты экрана телефона (около 745 px
   с адресной строкой браузера) — то есть главного действия страницы
   посетитель с рекламы не видел.

   Убрано 86 px: пустота над первым экраном, пропорция кадра и отступы.
*/
@media (max-width: 767px) {
	/* 68 px пустоты под шапкой — это margin-bottom самой Storefront (замер:
	   67,77 px). На широком экране такой воздух уместен, на телефоне он
	   съедает пятую часть первого экрана. Правим там, где это дороже всего:
	   на главной и в карточке товара. */
	/* Селектор для главной повторяет селектор Storefront слово в слово.
	   Короткий `body.home .site-header` проигрывал по весу: у родительской
	   темы там четыре класса вместе с :not(). Проверено замером — правило
	   было в CSSOM, а отступ оставался 67,77 px. */
	.home.page:not(.page-template-template-homepage) .site-header,
	body.single-product .site-header {
		margin-bottom: 1.5rem;
	}

	.bh-hero {
		gap: 1.25rem;
	}

	.bh-hero__img {
		aspect-ratio: 3 / 2;
	}

	.bh-hero__lead {
		margin-bottom: 1rem;
	}
}

@media (min-width: 768px) {
	.bh-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: 3.5rem;
		align-items: center;
		margin-bottom: 4.5rem;
	}

	.bh-hero__media {
		order: 0;
	}

	.bh-hero__img {
		aspect-ratio: 1 / 1;
	}
}

/* Одинаковое расстояние между разделами главной.

   До этого зазор задавал нижний отступ предыдущего блока, и он был у всех
   разный: после витрины товаров заголовок «Почему BRINHILL» прилипал к нижнему
   ряду карточек, а после отзывов зияла двойная дыра. Замерено на 1440 px. */
body.home .entry-content > h2,
body.home .entry-content > .bh-section-head {
	margin-top: 4rem;
}

/* Заголовок раздела и ссылка «весь каталог» в одну строку: экономит
   вертикаль и связывает ссылку с разделом, а не с блоком выше. */
.bh-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-bottom: 1.5rem;
}

.bh-section-head h2 {
	margin: 0;
}

.bh-section-head a {
	font-size: .95rem;
	white-space: nowrap;
}

.bh-advantages {
	display: grid;
	gap: 1.75rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-bottom: 3rem;
	counter-reset: bh-adv;
}

/* Нумерация вместо иконок: иконок в материалах нет, а рисованный набор
   «на глазок» выглядел бы чужеродно рядом с фотографиями товара. Тонкая
   линия сверху и номер дают ритм и не добавляют ни одного килобайта. */
.bh-advantage {
	padding-top: 1rem;
	border-top: 1px solid var(--bh-line);
}

.bh-advantage h3::before {
	counter-increment: bh-adv;
	content: counter(bh-adv, decimal-leading-zero);
	display: block;
	margin-bottom: .7rem;
	font-family: var(--bh-body);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--bh-forge);
}

.bh-advantage h3 {
	margin-bottom: .4em;
}

.bh-advantage p {
	color: var(--bh-ink-soft);
	margin: 0;
}

.bh-reviews {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin-bottom: 2rem;
}

.bh-review {
	margin: 0;
	padding: 1.4rem 1.5rem;
	background: #fff;
	border-left: 3px solid var(--bh-forge);
	font-style: normal;
}

.bh-review p {
	margin: 0 0 .8em;
}

.bh-review footer {
	font-size: .85rem;
	color: var(--bh-steel);
}


/* ==========================================================================
   Нижние закреплённые панели на телефоне
   ========================================================================== */

/*
   Storefront держит внизу экрана свою панель (аккаунт, поиск, корзина)
   с position:fixed, но отступа под неё не даёт. Из-за этого подвал сайта —
   копирайт и ссылка на политику обработки данных — уезжал под панель
   и был недоступен. Поймано замером: bottom подвала оказался ниже top панели.

   Наш cookie-баннер тоже прижат к низу, поэтому на телефоне он поднимается
   над панелью, иначе два закреплённых блока лежали бы друг на друге.
*/
@media (max-width: 767px) {
	body.woocommerce-active,
	body.woocommerce {
		padding-bottom: 72px;
	}

	.brinhill-cookie {
		bottom: 69px;
	}

	/* 43px у Storefront — на пиксель меньше минимальной тач-цели.
	   Мелочь, но именно этой кнопкой на телефоне открывают всё меню. */
	.menu-toggle {
		min-height: 44px;
	}

	/* На телефоне баннер вместе с панелью Storefront съедал треть экрана —
	   каталога было почти не видно. Поджимаем отступы и кегль: текст тот же,
	   высота меньше примерно на треть. */
	.brinhill-cookie {
		padding: .8em 1em;
		gap: .6em .8em;
		font-size: .78rem;
		line-height: 1.4;
	}

	.brinhill-cookie button {
		min-height: 44px;
		padding: 0 1.1em;
	}
}


/* ==========================================================================
   Блоки главной: оплата и доставка, вопросы, контакты

   По ТЗ сайт одностраничный — покупатель с рекламы должен получить ответы,
   не уходя со страницы. Отдельные страницы остаются, на них ведут ссылки.
   ========================================================================== */

.bh-facts {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin-bottom: 1.2rem;
}

.bh-fact {
	padding: 1.3rem 1.4rem;
	background: #fff;
	border: 1px solid var(--bh-line);
	border-radius: 4px;
}

.bh-fact h3 {
	margin-bottom: .4em;
	font-size: 1.05rem;
}

.bh-fact p {
	margin: 0;
	color: var(--bh-ink-soft);
}

/* Вопросы на <details>: раскрываются без единой строки JS, работают
   с клавиатуры и попадают в поиск вместе со страницей. */
.bh-faq {
	margin-bottom: 1.2rem;
	border-top: 1px solid var(--bh-line);
}

.bh-faq details {
	border-bottom: 1px solid var(--bh-line);
}

.bh-faq summary {
	position: relative;
	padding: 1rem 2.2rem 1rem 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.bh-faq summary::-webkit-details-marker {
	display: none;
}

/* Знак «плюс» из двух линий: без иконочного шрифта и без картинки. */
.bh-faq summary::after {
	content: '+';
	position: absolute;
	right: .4rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--bh-forge);
	transition: transform .18s ease;
}

.bh-faq details[open] summary::after {
	content: '\2212';
}

.bh-faq summary:hover,
.bh-faq summary:focus-visible {
	color: var(--bh-forge-deep);
}

.bh-faq details p {
	margin: 0 0 1rem;
	padding-right: 2.2rem;
	color: var(--bh-ink-soft);
	max-width: 62ch;
}

.bh-contacts__line {
	margin: 0 0 .35em;
	font-size: 1.1rem;
}

.bh-contacts__legal {
	color: var(--bh-steel);
	font-size: .9rem;
	line-height: 1.6;
}

/* Краткое описание товара в каталоге ровно в две строки.

   Обрезка по знакам в PHP не гарантирует высоту: на узком экране те же
   90 знаков дают три-четыре строки, и кнопки «В корзину» в соседних карточках
   встают на разной высоте. line-clamp режет по строкам, min-height держит
   место там, где описание пустое. */
.bh-loop-excerpt {
	margin: 0 0 .6em;
	color: var(--bh-ink-soft);
	font-size: .85rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.9em;
}