/*
Theme Name: Enslaver Child
Theme URI: https://enslaver.ru
Description: Дочерняя тема интернет-магазина женских халатов на основе Storefront
Author: Enslaver
Template: storefront
Version: 2.0.0
Text Domain: enslaver-child
*/

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/cormorant-garamond-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/cormorant-garamond-500-cyrillic.woff2') format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/cormorant-garamond-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/cormorant-garamond-600-cyrillic.woff2') format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/golos-text-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/golos-text-400-cyrillic.woff2') format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/golos-text-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/golos-text-500-cyrillic.woff2') format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/golos-text-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/golos-text-600-cyrillic.woff2') format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/golos-text-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
	font-family: 'Golos Text';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/golos-text-700-cyrillic.woff2') format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
	--bg: #FFFFFF;
	--surface: #FFFFFF;
	--surface-2: #F2F1EE;
	--ink: #211D19;
	--ink-muted: #766F66;
	--line: #E6E3DC;
	--accent: #6E2430;
	--sale: #A8443F;
	--font-display: 'Cormorant Garamond', 'Times New Roman', serif;
	--font-body: 'Golos Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
}

/* Элементы форм не наследуют шрифт body: Storefront задаёт им собственный
   Source Sans Pro — кнопки и поля выбивались из типографики сайта (третья
   гарнитура рядом с Cormorant и Golos). Перебиваем тем же уровнем
   специфичности — наш файл грузится после родительского. */
button,
input,
select,
textarea,
.button {
	font-family: var(--font-body);
}

/* Радиокнопки и чекбоксы (способ оплаты на чекауте, согласия) браузер красит
   системным акцентом (фиолетовый/синий) — приводим к чернильному цвету сайта. */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--ink);
}

/* Точка-радио способа оплаты на чекауте — не настоящий input (он скрыт,
   accent-color на него не действует), а иконка Font Awesome на label::before
   (icons.css родительской темы), закрашенная фиолетовым WooCommerce.
   !important — источник фиолетового сидит в чужом CSS с непредсказуемым
   порядком печати; для одного псевдоэлемента это дешевле, чем гонка
   специфичностей. */
#payment .payment_methods li label::before {
	color: var(--ink) !important;
}

/* ---------- Контейнер сайта на всю ширину экрана (шапка/подвал/страницы) ----------
   У Storefront .col-full ограничена ~1150px верхним пределом. На ushatava.ru
   предела нет вообще — контент всегда тянется на всю ширину окна, с одним
   и тем же небольшим отступом от края независимо от размера монитора.
   Убираем предел полностью, оставляем только отступ по бокам.
   Помимо max-width, у Storefront на узких экранах (<66.4989em и <568px) есть
   СВОИ адаптивные margin-left/right на этом же .col-full (около 22-42px) —
   без явного обнуления они складываются поверх нашего padding и урезают
   ширину сильнее, чем задумано, на любом размере экрана уже. */
.col-full {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 40px;
	padding-right: 40px;
}
@media (max-width: 600px) {
	/* Фиксированный 40px-отступ рассчитан на десктоп — на экране телефона
	   он съедает заметную долю ширины и создаёт впечатление «сайт не на
	   весь экран». Сужаем отступ, не трогая десктоп. */
	.col-full {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ---------- Чекаут: узкая колонка, не во всю ширину экрана ----------
   Остальной сайт нарочно full-bleed (.col-full выше), но чекаут делался и
   утверждался как отдельный узкий макет (мокап через Artifact, ~640px) —
   на широком экране full-bleed растягивал форму и блоки на всю ширину окна,
   что не совпадало с утверждённым дизайном. Сужаем только на этой странице
   (body.woocommerce-checkout — включает и «Спасибо за заказ», у неё та же
   слим-шапка/подвал, см. enslaver-slim-chrome), не трогая .col-full нигде
   больше на сайте. max-width считается ДО padding (.col-full не задаёт
   box-sizing:border-box), поэтому итоговая читаемая ширина внутри отступов
   ровно 640px — как в макете. */
body.woocommerce-checkout #content.site-content > .col-full,
body.woocommerce-checkout .storefront-breadcrumb > .col-full {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

h1, h2, h3, h4, h5, h6,
.site-title {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--ink);
}

a {
	color: var(--ink);
}

a:hover {
	color: var(--accent);
}

.eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
a.eyebrow {
	text-decoration: none;
}
a.eyebrow:hover {
	color: var(--ink);
}

/* ---------- Buttons ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button.alt,
.enslaver-btn {
	background-color: var(--ink);
	color: var(--bg);
	border: 1px solid var(--ink);
	border-radius: 0;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 15px 28px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.enslaver-btn:hover {
	background-color: transparent;
	color: var(--ink);
}

/* ---------- Фокус-обводка ---------- */
/* Storefront красит фокус любых ссылок/кнопок/полей толстой фиолетовой
   рамкой WooCommerce (a:focus,...{outline:2px solid #7f54b3}) — она
   вспыхивала при каждом клике по ссылкам шапки. Разделяем два случая:
   при клике мышью обводки нет вовсе (:focus без :focus-visible), при
   обходе с клавиатуры (Tab) — тонкая чернильная рамка с воздухом, в
   цветах сайта; это сохраняет доступность для клавиатурной навигации.
   Текстовым полям — та же чернильная рамка вместо фиолетовой; поля с
   собственным оформлением фокуса (поиск в шапке, поля кабинета) имеют
   более специфичные правила и этим блоком не меняются. */
a:focus,
button:focus,
[type="submit"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus {
	outline: none;
}
a:focus-visible,
button:focus-visible,
[type="submit"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 1px solid var(--ink);
	outline-offset: 4px;
}
input:focus,
textarea:focus,
select:focus {
	outline: 1px solid var(--ink);
	outline-offset: 0;
}

/* ---------- Site branding / wordmark ---------- */
.enslaver-wordmark {
	display: inline-flex;
	align-items: center;
	color: var(--ink);
}
.enslaver-wordmark:hover {
	color: var(--ink);
}
.enslaver-wordmark:focus {
	outline: none;
}
.enslaver-wordmark:focus-visible {
	outline: 1px solid var(--ink);
	outline-offset: 4px;
}
.enslaver-wordmark-full {
	display: inline-block;
	height: 26px;
	width: auto;
	aspect-ratio: 2851 / 355;
	background-color: var(--ink);
	-webkit-mask: url('assets/wordmark.png?v=2') no-repeat center / contain;
	mask: url('assets/wordmark.png?v=2') no-repeat center / contain;
}

/* ---------- Skip-link (a11y "Перейти к навигации") ----------
   Storefront по умолчанию показывает эту ссылку по фокусу с клавиатуры
   (Tab) — стандартная WCAG-функция для скринридеров/клавиатурной
   навигации. По просьбе владельца отключена полностью: даже в
   переоформленном виде (полноширинная плашка сверху) она мешала —
   перекрывала контент и выглядела как визуальный баг. */
.skip-link.screen-reader-text {
	display: none !important;
}

/* ---------- New header layout (nav-group / logo / icons) ---------- */
.site-header {
	background: var(--bg);
	color: var(--ink);
	padding-top: 22px;
	padding-bottom: 22px;
	/* У Storefront margin-bottom под шапкой задан несколькими селекторами
	   с разной специфичностью на разные случаи (.home.blog .site-header,
	   .no-wc-breadcrumb .site-header и т.д.) — обычный .site-header их не
	   перебивает: та же ловушка с приоритетом правил, что и в других местах
	   темы. Сокращаем через !important, чтобы гарантированно выиграть во всех
	   случаях сразу, по образцу плотной раскладки на ushatava.ru (там контент
	   начинается сразу под шапкой). */
	margin-bottom: 0 !important;
}
/* Чекаут / «Спасибо за заказ» / корзина — упрощённые шапка и подвал
   (enslaver_child_slim_header() / enslaver_child_slim_footer() в
   inc/header-footer.php): логотип + ссылка «назад» сверху, строка с
   реквизитами и почтой снизу. */
.enslaver-slim-header {
	grid-template-columns: 1fr auto 1fr;
	/* Обычную шапку в .col-full заворачивает хук storefront_header_container —
	   на корзине/чекауте он снят вместе с остальными, и упрощённая шапка
	   рендерится прямо в .site-header, без боковых отступов контейнера.
	   Повторяем отступы .col-full здесь. */
	padding-left: 40px;
	padding-right: 40px;
}
@media (max-width: 600px) {
	.enslaver-slim-header {
		padding-left: 16px;
		padding-right: 16px;
	}
}
.enslaver-slim-back {
	justify-self: start;
	font-size: 12.5px;
	letter-spacing: 0.03em;
	color: var(--ink-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.enslaver-slim-back:hover {
	color: var(--ink);
}
.enslaver-slim-footline {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	border-top: 1px solid var(--line);
	padding: 18px 0;
	font-size: 12.5px;
	color: var(--ink-muted);
}
.enslaver-slim-footline a {
	color: var(--ink);
}
/* У Storefront подвал (.site-footer) серо-бежевый с крупными отступами под
   виджеты — для однострочного подвала оставляем белый фон и убираем лишнюю
   высоту. Разделитель — верхняя черта самой строки. */
.enslaver-slim-chrome .site-footer {
	background: var(--bg);
	padding: 0;
	margin-top: 40px;
}
@media (max-width: 600px) {
	/* На телефоне текст «Вернуться в корзину» рядом с логотипом не помещается —
	   оставляем только стрелку с достаточной областью нажатия. */
	.enslaver-slim-back {
		font-size: 16px;
	}
	.enslaver-slim-back .enslaver-slim-back-label {
		display: none;
	}
}
.enslaver-header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 16px;
	position: relative;
}
.enslaver-header-inner .enslaver-header-nav { justify-self: start; }
.enslaver-header-inner .site-branding {
	justify-self: center;
	float: none;
	width: auto;
	margin: 0;
}
.enslaver-header-inner .enslaver-header-icons { justify-self: end; }

.enslaver-header-nav {
	display: flex;
	align-items: center;
	gap: 16px;
}
.enslaver-nav-links {
	display: flex;
	gap: 28px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Явный font-size, а не унаследованные от body 16px: без этого невидимая
	   «строка» (line box) внутри каждого <li> считается по 16px (24px высотой)
	   вместо 13px самой ссылки (.enslaver-nav-links a) — ссылка выравнивается
	   по базовой линии этого более крупного шрифта и визуально сдвигается вниз
	   относительно кнопки города рядом (та без такого наследования). */
	font-size: 13px;
}
.enslaver-nav-links li {
	list-style: none;
}
.enslaver-nav-links a {
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}
/* Глобальный a:hover красит ссылки в винный var(--accent) — в шапке цвет
   по ховеру меняться не должен (по просьбе владельца, 2026-07-23), пункты
   выделяются только подчёркиванием. Явный color перебивает глобальное правило. */
.enslaver-nav-links a:hover {
	border-color: var(--ink);
	color: var(--ink);
}
/* Выпадающий список категорий у пункта «Каталог» (вложенные пункты меню,
   depth 2 в enslaver_child_header_nav_left()). Открывается и по наведению,
   и по клавиатурному фокусу (:focus-within) — без JS. */
.enslaver-nav-links > li {
	position: relative;
}
.enslaver-nav-links .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -20px;
	min-width: 250px;
	margin: 0;
	/* padding-top создаёт «мостик» между пунктом и списком — без него курсор
	   по пути вниз попадает в щель, :hover срывается и список схлопывается. */
	padding: 14px 0 0;
	list-style: none;
	z-index: 30;
}
.enslaver-nav-links > li:hover > .sub-menu,
.enslaver-nav-links > li:focus-within > .sub-menu {
	display: block;
}
.enslaver-nav-links .sub-menu li {
	background: var(--bg);
	border: 1px solid var(--line);
	border-top: none;
}
.enslaver-nav-links .sub-menu li:first-child {
	border-top: 1px solid var(--line);
}
.enslaver-nav-links .sub-menu a {
	display: block;
	padding: 12px 20px;
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 14px;
	border-bottom: none;
}
.enslaver-nav-links .sub-menu a:hover {
	background: var(--surface-2);
	color: var(--ink);
}

.enslaver-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: none;
	border: none;
	border-bottom: 1px solid transparent;
	padding: 0;
	cursor: pointer;
	position: relative;
	transition: border-color 0.2s ease;
}
/* Storefront/WP core красит :hover у любых <button> в серый фон (см. тот же
   комментарий у .enslaver-search-toggle) — на тач-устройствах тап по кнопке
   держит :hover, поэтому вместо серой заливки показываем подчёркивание, как
   у остальных пунктов шапки (border-bottom не влияет на inset:0 у ::before
   ниже — он считается от padding-бокса, а border снаружи него). */
.enslaver-menu-toggle:hover {
	background: none;
	border-color: var(--ink);
}
.enslaver-menu-toggle::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--ink);
	-webkit-mask: url('assets/menu-icon.svg') no-repeat center / contain;
	mask: url('assets/menu-icon.svg') no-repeat center / contain;
}

.enslaver-header-icons {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.enslaver-account-link {
	color: var(--ink);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}
.enslaver-account-link:hover {
	border-color: var(--ink);
	color: var(--ink);
}
.enslaver-search-toggle {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	cursor: pointer;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: border-color 0.2s ease;
}
/* Storefront/WP core глобально красят :hover у любых <button> в серый фон
   (button:hover { background-color: #d5d5d5 }) — эта кнопка попадает под
   правило, т.к. она <button>. Специфичность класса+:hover перебивает
   правило ядра, обнуляем фон и делаем подчёркивание как у .enslaver-nav-links,
   чтобы «Поиск» и «Аккаунт» выделялись одинаково с «О нас» / «Каталог». */
.enslaver-search-toggle:hover {
	background: none;
	border-color: var(--ink);
}
.enslaver-search-toggle-label {
	/* Лупа без подписи «Поиск» на всех разрешениях (по просьбе владельца,
	   2026-07-20) — тот же вид, что раньше был только на мобильной версии. */
	display: none;
}
.enslaver-search-toggle::before {
	content: '';
	display: block;
	width: 17px;
	height: 17px;
	background-color: var(--ink);
	-webkit-mask: url('assets/search-icon.svg') no-repeat center / contain;
	mask: url('assets/search-icon.svg') no-repeat center / contain;
}

/* Корзина: переиспользуем storefront_cart_link() (сохраняет AJAX-обновление
   счётчика через WooCommerce cart-fragments), оформляем поверх CSS-ом. */
.enslaver-cart-link-wrap a.cart-contents {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0;
	color: var(--ink);
	text-decoration: none;
	/* Тот же нижний бокс (3px + линия), что у «Поиск» и «Аккаунт» рядом:
	   без него при align-items:center корзина сидела чуть ниже соседей.
	   Заодно то же подчёркивание по ховеру, что у остальных пунктов шапки. */
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}
.enslaver-cart-link-wrap a.cart-contents:hover {
	border-color: var(--ink);
	color: var(--ink);
}
.enslaver-cart-link-wrap a.cart-contents::before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: url('assets/cart-icon.svg') no-repeat center / contain;
	mask: url('assets/cart-icon.svg') no-repeat center / contain;
}
.enslaver-cart-link-wrap a.cart-contents .count {
	order: -1;
	font-family: var(--font-body);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* Выпадающая панель поиска и мобильное меню — абсолютно спозиционированы
   относительно .site-header (у него уже есть position:relative в родительской теме). */
.enslaver-search-panel,
.enslaver-mobile-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--bg);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	z-index: 20;
}
.enslaver-search-panel:not([hidden]) {
	display: block;
}
.enslaver-mobile-menu:not([hidden]) {
	display: flex;
	flex-direction: column;
}
.enslaver-search-panel-inner {
	padding: 28px 2.617924em 32px;
}
.enslaver-search-panel-inner .widget_product_search {
	margin: 0;
}
.enslaver-search-panel-inner .widget_product_search form {
	position: relative;
}
/* Storefront рисует иконку лупы шрифтом Font Awesome (icons.css) — это чужой
   визуальный язык, во всей остальной шапке иконки — свои тонкие SVG-маски
   (тот же assets/search-icon.svg уже используется в .enslaver-search-toggle).
   Гасим иконку Storefront и рисуем свою тем же способом, чтобы поле поиска
   не выглядело вставкой из другого дизайна. */
.enslaver-search-panel-inner .widget_product_search form:not(.wp-block-search)::before {
	content: none !important;
}
.enslaver-search-panel-inner .widget_product_search form::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background-color: var(--ink-muted);
	-webkit-mask: url('assets/search-icon.svg') no-repeat center / contain;
	mask: url('assets/search-icon.svg') no-repeat center / contain;
	pointer-events: none;
}
.enslaver-search-panel-inner .widget_product_search form:not(.wp-block-search) input[type="search"] {
	padding-left: 30px;
}
.enslaver-search-panel-inner .search-field {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-body);
	font-size: 18px;
	border: none;
	border-bottom: 1px solid var(--ink);
	padding: 10px 0 10px 30px;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: var(--ink);
	transition: border-bottom-color 0.2s ease;
}
.enslaver-search-panel-inner .search-field::placeholder {
	color: var(--ink-muted);
}
.enslaver-search-panel-inner .search-field:focus {
	background: transparent;
	border-bottom-color: var(--ink);
	box-shadow: 0 1px 0 0 var(--ink);
}
.enslaver-mobile-menu-links {
	display: contents;
	list-style: none;
	margin: 0;
	padding: 0;
}
.enslaver-mobile-menu-links li {
	list-style: none;
}
.enslaver-mobile-menu-links a,
.enslaver-mobile-menu-link {
	display: block;
	padding: 15px 2.617924em;
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	border-top: 1px solid var(--line);
}
/* Как и в десктопной шапке, гасим глобальный винный a:hover — иначе тап
   по пункту на телефоне успевает мигнуть акцентным цветом. */
.enslaver-mobile-menu-links a:hover,
.enslaver-mobile-menu-link:hover {
	color: var(--ink);
}
/* Вложенные категории под «Каталогом» (depth 2): видны сразу, отступом,
   строчными — читаются как содержимое раздела, а не отдельные пункты. */
.enslaver-mobile-menu-links .sub-menu {
	display: contents;
	list-style: none;
	margin: 0;
	padding: 0;
}
.enslaver-mobile-menu-links .sub-menu a {
	padding: 11px 2.617924em 11px 3.8em;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0.01em;
	color: var(--ink-muted);
	border-top: none;
}
.enslaver-mobile-menu-links .sub-menu li:last-child a {
	padding-bottom: 16px;
}
.enslaver-mobile-menu-links .sub-menu a:hover {
	color: var(--ink-muted);
}

@media (max-width: 880px) {
	.enslaver-nav-links { display: none; }
	.enslaver-menu-toggle { display: inline-flex; }
	.enslaver-account-link { display: none; }
	/* Город сжимаем до иконки-пина — иначе текст («МОСКВА» и т.п.) раздувает
	   левую колонку .enslaver-header-nav шире правой (там на мобильном только
	   иконка поиска + корзина), grid-template-columns: 1fr auto 1fr в
	   .enslaver-header-inner теряет симметрию, и лого с корзиной уезжают от
	   центра/за край экрана. */
	.enslaver-city-toggle__name { display: none; }
	.enslaver-city-toggle { gap: 0; }
}

/* ---------- Cart icon in header (older stockist markup, kept for the
   checkout/cart pages that intentionally still use the default Storefront
   header — see is_checkout()/is_cart() in inc/header-footer.php) ---------- */
.site-header-cart a.cart-contents::before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 6px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask: url('assets/cart-icon.svg') no-repeat center / contain;
	mask: url('assets/cart-icon.svg') no-repeat center / contain;
}

/* ---------- Full-bleed section breakout (parent theme wraps content in a
   width-constrained .col-full, but these bands should span the full viewport) ---------- */
.enslaver-newsletter {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* ---------- Category tiles (homepage) ----------
   Навигация по категориям, нарочно отличная от товарных карточек
   (.enslaver-card: подпись ПОД фото мелким капслуком): здесь название
   лежит ПОВЕРХ фото — засечковым шрифтом на тёмном градиенте у нижнего
   края кадра. Кадр 4/5 — чуть ниже товарных 3/4, ощутимый gap между
   плитками (у товарной сетки — почти слитные 2px). */
.enslaver-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.enslaver-cat-card {
	display: block;
	-webkit-tap-highlight-color: transparent;
}
.enslaver-cat-frame {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--surface-2);
	overflow: hidden;
}
.enslaver-cat-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.enslaver-cat-card:hover .enslaver-cat-frame img {
	transform: scale(1.035);
}
/* Градиент — отдельным слоем поверх фото, чтобы белый текст читался
   даже на светлых студийных снимках. */
.enslaver-cat-frame::after {
	content: '';
	position: absolute;
	inset: 55% 0 0;
	background: linear-gradient(to bottom, transparent, rgba(33, 29, 25, 0.55));
	transition: opacity 0.3s ease;
}
.enslaver-cat-name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 0 16px 18px;
	text-align: center;
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}
/* Тонкая линия-подчёркивание, вырастающая из центра по ховеру, —
   вместо смены цвета (на фото винный акцент не читался бы). */
.enslaver-cat-name::after {
	content: '';
	display: block;
	width: 0;
	height: 1px;
	margin: 8px auto 0;
	background: #fff;
	transition: width 0.3s ease;
}
.enslaver-cat-card:hover .enslaver-cat-name::after {
	width: 44px;
}
@media (max-width: 600px) {
	.enslaver-cats {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.enslaver-cat-name {
		font-size: 17px;
		padding: 0 10px 12px;
	}
}

/* ---------- Homepage hero ---------- */
.enslaver-hero {
	display: grid;
	/* Было 0.4fr/1.6fr; ширину баннера сократили на 1/10 (1.6 → 1.44),
	   освободившиеся 0.16fr отдали текстовой колонке, чтобы текст доходил
	   почти до баннера, а не оставлял пустой промежуток. */
	grid-template-columns: 0.56fr 1.44fr;
	gap: 40px;
	align-items: center;
	/* Без верхнего отступа: карусель начинается вплотную к шапке. */
	margin: 0 0 64px;
}
.enslaver-hero-copy { max-width: 100%; }
.enslaver-hero h1 {
	font-size: 46px;
	line-height: 1.1;
	margin: 18px 0 22px;
}
.enslaver-hero p.lede {
	font-size: 16px;
	color: var(--ink-muted);
	max-width: 50ch;
	margin: 0 0 30px;
}
.enslaver-hero-meta {
	margin-top: 26px;
	display: flex;
	gap: 22px;
	font-size: 12.5px;
	color: var(--ink-muted);
	flex-wrap: wrap;
}
.enslaver-hero-frame {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface-2);
	/* Продолжаем фото до самого края экрана — компенсируем правый отступ .col-full. */
	margin-right: -40px;
}
.enslaver-hero-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Карусель баннера на главной ---------- */
.enslaver-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease;
}
.enslaver-hero-slide.is-active {
	opacity: 1;
}
.enslaver-hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.enslaver-hero-dots {
	position: absolute;
	left: 22px;
	bottom: 22px;
	z-index: 2;
	display: flex;
	gap: 8px;
}
.enslaver-hero-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.enslaver-hero-dot.is-active {
	background: #fff;
}

/* ---------- Section heads ---------- */
.enslaver-section {
	margin: 70px 0;
}
.enslaver-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 36px;
	gap: 20px;
	flex-wrap: wrap;
}
.enslaver-section-head h2 {
	font-size: 30px;
}
.enslaver-see-all {
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
}

/* ---------- Product grid & card ---------- */
.enslaver-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px 2px;
}
.enslaver-card { position: relative; }
.enslaver-card-frame {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--surface-2);
	overflow: hidden;
	margin-bottom: 14px;
}
.enslaver-card-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.enslaver-card:hover .enslaver-card-frame img {
	transform: scale(1.035);
}
/* Лента кадров внутри карточки: нативная горизонтальная прокрутка со
   scroll-snap — на телефоне фото листаются свайпом, не открывая товар
   (assets/card-carousel.js только подсвечивает активную точку). */
.enslaver-card-slides {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.enslaver-card-slides::-webkit-scrollbar { display: none; }
.enslaver-card-slides img {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
/* На устройствах с мышью листание в карточке отключено (горизонтальный жест
   трэкпада цеплялся бы за карточки при обычном скролле страницы) — там, как
   и раньше, видно первое фото, остальное — на странице товара. */
@media (hover: hover) and (pointer: fine) {
	.enslaver-card-slides { overflow-x: hidden; }
}
.enslaver-card-dots {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 9px;
	transform: translateX(-50%);
	gap: 5px;
	pointer-events: none;
}
.enslaver-card-dots i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(33, 29, 25, 0.25);
	transition: background-color 0.2s ease;
}
.enslaver-card-dots i.is-active {
	background: rgba(33, 29, 25, 0.85);
}
/* Точки-индикатор — только на сенсорных экранах: на десктопе листания нет,
   и точки только обещали бы то, чего нельзя сделать. */
@media (hover: none), (pointer: coarse) {
	.enslaver-card-dots { display: flex; }
}
.enslaver-card-name {
	font-size: 14px;
	margin-bottom: 6px;
	color: var(--ink);
}
.enslaver-card-price {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	display: flex;
	gap: 9px;
	align-items: baseline;
	flex-wrap: wrap;
}
.enslaver-card-price .now { font-weight: 600; }
.enslaver-card-price .was { color: var(--ink-muted); text-decoration: line-through; font-size: 13px; }
.enslaver-card-price .off { color: var(--sale); font-size: 12.5px; }
.enslaver-swatches { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.enslaver-swatch { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); display: inline-block; }
.enslaver-swatch-more { font-size: 11px; color: var(--ink-muted); margin-left: 2px; }

/* ---------- Распроданный цвет: карточка в каталоге ---------- */
.enslaver-card--oos .enslaver-card-frame img {
	filter: grayscale(1);
	opacity: 0.55;
}
.enslaver-card--oos:hover .enslaver-card-frame img { transform: none; }
.enslaver-card--oos .enslaver-card-name { color: var(--ink-muted); }
.enslaver-card--oos .enslaver-card-price .now {
	color: var(--ink-muted);
	font-weight: 400;
}
/* Плашка приподнята над нижним краем, чтобы не накрывать точки-индикатор
   листания фото (.enslaver-card-dots, bottom: 9px). */
.enslaver-card-oos-badge {
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink-muted);
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
}

@media (max-width: 600px) {
	/* Карточки товаров на телефоне растягиваем до самого края экрана
	   (как в референсе конкурента) — сетка выходит за .col-full тем же
	   приёмом, что и .enslaver-newsletter. Текст названия/цены под фото
	   остаётся с небольшим отступом, чтобы не прилипал к краю. */
	.enslaver-grid {
		width: 100vw;
		position: relative;
		left: 50%;
		margin-left: -50vw;
		gap: 20px 1px;
	}
	.enslaver-card-name,
	.enslaver-card-price,
	.enslaver-swatches {
		padding: 0 6px;
	}
}

/* ---------- Advantages / ritual section ---------- */
.enslaver-advantages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}
.enslaver-advantage { text-align: center; padding: 1.5rem; }
.enslaver-advantage__icon { font-size: 1.8rem; margin-bottom: 0.6rem; }
.enslaver-advantage__title { font-size: 1rem; margin: 0 0 0.4rem; font-family: var(--font-display); }
.enslaver-advantage__text { font-size: 0.9rem; color: var(--ink-muted); margin: 0; }

.enslaver-ritual {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 72px;
	align-items: center;
	margin: 70px 0;
}
.enslaver-ritual-frame { aspect-ratio: 4/5; overflow: hidden; background: var(--surface-2); }
.enslaver-ritual-frame img { width: 100%; height: 100%; object-fit: cover; }
.enslaver-ritual-copy h2 { font-size: 34px; margin: 16px 0 20px; max-width: 24ch; }
.enslaver-ritual-copy p { font-size: 16px; color: var(--ink-muted); max-width: 60ch; margin: 0 0 16px; }

/* ---------- Categories on homepage ---------- */
.enslaver-categories {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
}
.enslaver-category {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--surface-2);
	aspect-ratio: 3 / 4;
}
.enslaver-category img { width: 100%; height: 100%; object-fit: cover; }
.enslaver-category__label {
	position: absolute;
	inset: auto 0 0 0;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ink);
	padding: 12px 14px;
	font-size: 13px;
	text-align: center;
}

/* ---------- Newsletter ---------- */
.enslaver-newsletter {
	background: var(--surface-2);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 60px 0;
	margin-top: 70px;
}
.enslaver-newsletter-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}
.enslaver-newsletter h3 { font-size: 24px; margin: 0 0 10px; }
.enslaver-newsletter p { color: var(--ink-muted); font-size: 14px; margin: 0; }
.enslaver-n-form { display: flex; flex-direction: column; gap: 14px; padding-top: 3px; }
.enslaver-n-input-row { display: flex; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.enslaver-n-input-row input {
	flex: 1; border: none; background: transparent; font-family: inherit;
	font-size: 15px; color: var(--ink); outline: none;
	box-shadow: none; padding: 0; border-radius: 0;
}
.enslaver-n-input-row button {
	background: none; border: none; font-size: 13px; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--ink); font-weight: 600;
}
.enslaver-n-consent { font-size: 12px; color: var(--ink-muted); margin: 0; }
.enslaver-n-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.enslaver-n-message { font-size: 13px; min-height: 16px; margin: 0; }
.enslaver-n-message.is-error { color: var(--sale); }
.enslaver-n-message.is-success { color: #3C8C4A; font-weight: 600; }

/* ---------- Всплывающее уведомление об успешной отправке письма подписки ---------- */
.enslaver-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(100% - 40px);
	padding: 16px 22px;
	background: var(--bg);
	border: 1px solid var(--line);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	color: var(--ink);
	font-size: 14px;
	line-height: 1.4;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 12px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.enslaver-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.enslaver-toast-icon { flex-shrink: 0; display: flex; }

/* ---------- Страница-заглушка подтверждения / отписки от рассылки ---------- */
.enslaver-newsletter-notice { padding: 90px 0; text-align: center; }
.enslaver-newsletter-notice h1 { font-size: 32px; margin-bottom: 14px; }
.enslaver-newsletter-notice p { color: var(--ink-muted); margin-bottom: 28px; }

/* ---------- Footer grid (brand / Покупателям / О компании / Информация) ---------- */
.site-footer {
	background: var(--bg);
	color: var(--ink);
}
.site-footer a {
	color: var(--ink);
	text-decoration: none;
}
.site-footer a:focus {
	outline: none;
}
.site-footer a:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}
.enslaver-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 3fr;
	gap: 32px;
	padding-bottom: 50px;
}
.enslaver-footer-brand .enslaver-wordmark-full {
	height: 22px;
}
.enslaver-footer-brand p {
	color: var(--ink-muted);
	font-size: 13px;
	max-width: 30ch;
	margin-top: 14px;
}
.enslaver-footer-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.enslaver-footer-columns > li {
	list-style: none;
}
/* Пункты верхнего уровня меню — заголовки колонок, не настоящие ссылки
   (их href="#" нужен только потому, что у пунктов меню WordPress всегда
   должна быть ссылка). */
.enslaver-footer-columns > li > a {
	display: block;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 16px;
	font-weight: 600;
	font-family: var(--font-body);
	pointer-events: none;
}
.enslaver-footer-columns .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.enslaver-footer-columns .sub-menu li {
	list-style: none;
}
.enslaver-footer-columns .sub-menu a {
	display: block;
	font-size: 13.5px;
	padding: 5px 0;
	color: var(--ink);
}
.enslaver-footer-columns .sub-menu a:hover {
	color: var(--accent);
}
.site-info.col-full {
	border-top: 1px solid var(--line);
	padding-top: 22px;
	padding-bottom: 22px;
	font-size: 12px;
	color: var(--ink-muted);
}
.site-info.col-full p {
	margin: 0;
}
.site-info.col-full p + p {
	margin-top: 4px;
}
@media (max-width: 880px) {
	.enslaver-footer-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.enslaver-footer-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Breadcrumb / page head (catalog, product) ---------- */
.enslaver-breadcrumb {
	font-size: 12.5px;
	color: var(--ink-muted);
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin: 10px 0 0;
}
.enslaver-breadcrumb a:hover { color: var(--ink); }
.enslaver-breadcrumb .sep { opacity: 0.5; }
.enslaver-breadcrumb .current { color: var(--ink); }
.enslaver-page-head { margin: 18px 0 0; }
.enslaver-page-head h1 { font-size: 34px; }

/* Текстовые страницы (Контакты, О нас, Оферта, Политика и т.п.) — без
   ограничения ширины строки получались во всю ширину контейнера и разной
   длины от секции к секции («рвано»). Держим комфортную для чтения ширину,
   как и в других текстовых блоках темы (см. .enslaver-ritual-copy p).
   Корзина и оформление заказа — тоже post_type=page, но там блок
   WooCommerce (wp-block-woocommerce-cart), а не читаемый текст: узкая
   колонка 68ch там ломает раскладку — блок корзины рассчитан на полную
   ширину (storefront-full-width-content), и Storefront считает свои
   отрицательные margin у .alignwide исходя из этой полной ширины; если
   сама entry-content уже сужена нами до 68ch, эти margin "выталкивают"
   таблицу корзины за левый край экрана. Поэтому явно исключаем эти
   страницы. */
body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .entry-content {
	max-width: 68ch;
}
/* Заголовки «Корзина» и «Оформление заказа»: Storefront центрирует их и
   добавляет гигантский нижний отступ ~6em (правило
   .storefront-full-width-content.woocommerce-cart .entry-header в
   woocommerce.css родительской темы, специфичность 0-3-0 — обычный
   .woocommerce-cart .entry-header его не перебивает). Все остальные H1
   сайта левые — выравниваем и эти.
   padding-bottom обнулён (был 1.4em) — под H1 сразу идёт заголовок «Ваш
   заказ», у которого уже есть свой отступ сверху 32px (общее правило
   центрирования заголовков ниже); эта padding добавлялась ПОВЕРХ него,
   давая непропорционально большой зазор (заодно margin-bottom:0 на самом H1
   ниже — гасим дефолтный браузерный отступ у h1, тоже складывавшийся сюда
   же, margin ребёнка не схлопывается с padding родителя). Теперь зазор под
   H1 держится на одном источнике — margin-top заголовка секции, как между
   остальными разделами чекаута. */
.storefront-full-width-content.woocommerce-cart .entry-header,
.storefront-full-width-content.woocommerce-checkout .entry-header {
	text-align: left;
	padding: 0;
}
.storefront-full-width-content.woocommerce-cart .entry-header h1,
.storefront-full-width-content.woocommerce-checkout .entry-header h1 {
	margin-bottom: 0;
}

.woocommerce-products-header__title.page-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 34px;
	margin: 18px 0 0;
}

/* ---------- Pagination ---------- */
nav.woocommerce-pagination {
	margin: 40px 0 10px;
	text-align: center;
}
nav.woocommerce-pagination ul.page-numbers {
	list-style: none;
	display: inline-flex;
	gap: 6px;
	padding: 0;
	margin: 0;
}
nav.woocommerce-pagination .page-numbers li a,
nav.woocommerce-pagination .page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 13px;
}
nav.woocommerce-pagination .page-numbers li span.current {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}

/*
 * Основной вертикальный отступ между хлебными крошками и строкой фильтров
 * на самом деле не отсюда — его даёт обёртка Storefront .storefront-breadcrumb
 * (padding 16px сверху/снизу + margin-bottom ~26px), см. переопределение ниже.
 */
.enslaver-filter-bar {
	padding: 14px 0 16px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--line);
}
.enslaver-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.enslaver-sort-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.enslaver-sort-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 400;
	padding: 8px 28px 8px 10px;
	width: 100%;
	cursor: pointer;
}
.enslaver-sort-wrap .chev {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(calc(-50% - 2px));
	font-size: 10px;
	color: var(--ink-muted);
	pointer-events: none;
}

/* Кнопка-переключатель размера/цвета/цены — визуально как сортировка */
.enslaver-dropdown { position: relative; }
.enslaver-dropdown-toggle {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
	border: 1px solid var(--line); background: var(--bg); color: var(--ink);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 400;
	padding: 8px 12px;
	cursor: pointer;
}
.enslaver-dropdown-toggle .chev { font-size: 10px; color: var(--ink-muted); position: relative; top: -2px; }
.enslaver-dropdown.is-open .enslaver-dropdown-toggle { border-color: var(--ink); }

/* Фильтр реально сужает выборку — отличаем от «выбрано всё/ничего» инверсией цвета,
   как у нажатой кнопки, чтобы было видно без открытия дропдауна. */
.enslaver-dropdown-toggle.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}
.enslaver-dropdown-toggle.is-active .chev {
	color: var(--bg);
}

/*
 * Storefront печатает крошки в отдельной обёртке .storefront-breadcrumb
 * с большим встроенным отступом снизу (padding 16px + margin-bottom ~26px) —
 * из-за этого между "Главная > Магазин" и строкой фильтров получался
 * неоправданно большой зазор. Оставляем обычный отступ сверху (от шапки),
 * сильно уменьшаем снизу. !important нужен: storefront/assets/css/woocommerce/
 * woocommerce.css грузится ПОСЛЕ style.css дочерней темы и своей сокращённой
 * записью margin/padding перебивает это же правило без него.
 */
.storefront-breadcrumb {
	padding-bottom: 0 !important;
	margin-bottom: 6px !important;
}

/*
 * Мобильная версия: сокращаем отступ между шапкой и крошками (тот же
 * .storefront-breadcrumb, но сверху — padding-top тоже её собственный,
 * 16px по умолчанию от Storefront) и гарантируем раскладку строки фильтров
 * в 2 уровня: сортировка на всю ширину (а не просто «сама по себе» с пустым
 * местом справа), фильтры размера/цвета/цены — уже следующей строкой одним
 * блоком. Раньше это визуально получалось само по себе только из-за случайной
 * узкой ширины контентной колонки — не гарантировано на других шириных экрана,
 * поэтому фиксируем явно через flex-basis.
 */
@media (max-width: 880px) {
	.storefront-breadcrumb {
		padding-top: 6px !important;
	}
	.enslaver-sort-wrap {
		flex: 1 1 100%;
		width: 100%;
	}
	.enslaver-dropdown {
		flex: 1 1 0;
		min-width: 0;
	}
	.enslaver-dropdown-toggle {
		width: 100%;
	}
}

.enslaver-dropdown-actions {
	display: flex;
	flex-shrink: 0;
	gap: 14px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}
.enslaver-dropdown-action {
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font-body);
	font-size: 11.5px;
	color: var(--ink-muted);
	text-decoration: underline;
	cursor: pointer;
}
.enslaver-dropdown-action:hover { color: var(--ink); }

.enslaver-dropdown-apply-wrap {
	flex-shrink: 0;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}
.enslaver-dropdown-apply {
	width: 100%;
	background: var(--ink);
	color: var(--bg);
	border: 1px solid var(--ink);
	padding: 10px 12px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}
.enslaver-dropdown-apply:hover {
	background: #fff;
	color: #000;
	border-color: #000;
}

.enslaver-dropdown-panel {
	display: none;
	flex-direction: column;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	min-width: 220px;
	max-height: 320px;
	background: var(--bg);
	border: 1px solid var(--line);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	padding: 10px;
}
.enslaver-dropdown.is-open .enslaver-dropdown-panel { display: flex; }

/* Список чекбоксов — единственная скроллящаяся часть дропдауна: «Отметить
   все»/«Очистить выбор» сверху и «Применить» снизу остаются на месте и не
   уезжают за пределы видимости даже у длинных списков (напр. «Цвет»). */
.enslaver-dropdown-options {
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
}

.enslaver-dropdown-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 6px;
	font-size: 13px;
	color: var(--ink);
	cursor: pointer;
	white-space: nowrap;
}
.enslaver-dropdown-option:hover { background: var(--surface-2); }
.enslaver-dropdown-option-count { margin-left: auto; color: var(--ink-muted); font-size: 12px; }
.enslaver-swatch-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--line);
	flex-shrink: 0;
}

/* ---------- Breadcrumb (WooCommerce default, restyled) ---------- */
.woocommerce-breadcrumb {
	font-size: 12.5px;
	color: var(--ink-muted);
	margin: 10px 0 0;
}
.woocommerce-breadcrumb a {
	color: var(--ink-muted);
}
.woocommerce-breadcrumb a:hover {
	color: var(--ink);
}

/* ---------- Product page: gallery + info ---------- */
/* Сетка карточки: слева галерея и под ней полное описание (той же ширины),
   справа — покупка + раскрывающиеся секции на обе строки (колонка липкая).
   Так длинное описание заполняет пустоту под фото, а не вытягивает правую
   колонку. На мобильном порядок областей другой — см. media query ниже. */
.enslaver-product {
	display: grid;
	/* minmax(0, ...) обязательно: без него min-content содержимого (например,
	   горизонтальная лента миниатюр на мобильном — 11 × 64px ≈ 800px) раздувает
	   колонку шире экрана, и весь контент обрезается справа. */
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
	/* auto 1fr: правая колонка (покупка + раскрытые секции) обычно выше
	   левой, и без явных строк сетка распределяла её «лишнюю» высоту между
	   строками левой колонки — между галереей и описанием возникала огромная
	   дыра. Со строками auto/1fr описание прижато к галерее, а весь остаток
	   высоты уходит в самый низ, под текст. */
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"gallery info"
		"desc    info";
	align-items: start;
	column-gap: 64px;
	row-gap: 32px;
	margin: 22px 0 40px;
}
.enslaver-product .enslaver-product-info,
.enslaver-product .enslaver-gallery {
	float: none;
	width: auto;
}
.enslaver-product > .enslaver-gallery { grid-area: gallery; }
.enslaver-product > .enslaver-product-info { grid-area: info; }
.enslaver-product > .enslaver-p-description { grid-area: desc; }
.enslaver-p-description h3 {
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 14px;
}
.enslaver-p-description p {
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0 0 14px;
	max-width: 72ch;
}
.enslaver-gallery {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 12px;
	align-content: start;
}
/* Колонка миниатюр НЕ участвует в расчёте высоты сетки: лента миниатюр
   позиционируется абсолютно внутри рейла, поэтому высоту ряда задаёт только
   главное фото, а рейл растягивается ровно до неё. Если миниатюр больше,
   чем помещается, — работает прокрутка (колесо мыши / стрелки рейла). */
.enslaver-gallery-rail-wrap {
	position: relative;
}
.enslaver-gallery-thumbs {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Без scroll-behavior: smooth — с ним программная прокрутка
	   (кнопки-стрелки рейла, scrollIntoView активной миниатюры)
	   может молча не выполняться. */
}
.enslaver-gallery-thumbs::-webkit-scrollbar { display: none; }
.enslaver-gallery-thumbs .g-thumb {
	flex: 0 0 auto;
	display: block;
	width: 100%;
	aspect-ratio: 3/4;
	overflow: hidden;
	background: var(--surface-2);
	border: 1px solid transparent;
	padding: 0;
	cursor: pointer;
}
.enslaver-gallery-thumbs .g-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.enslaver-gallery-thumbs .g-thumb:hover { border-color: var(--line); }
.enslaver-gallery-thumbs .g-thumb.is-active { border-color: var(--ink); }
.enslaver-rail-btn {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bg);
	border: 1px solid var(--line);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	padding: 0;
	transition: border-color 0.15s ease;
}
.enslaver-rail-btn:hover { border-color: var(--ink-muted); }
.enslaver-rail-btn svg { width: 14px; height: 14px; display: block; }
.enslaver-rail-btn.is-up { top: -2px; }
.enslaver-rail-btn.is-down { bottom: -2px; }
.enslaver-rail-btn[hidden] { display: none; }

.enslaver-gallery-main-wrap {
	position: relative;
}
.enslaver-gallery-main.g-frame { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--surface-2); touch-action: pan-y; }
.enslaver-gallery-main.g-frame img,
.enslaver-gallery-main.g-frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Видео с WB вертикальное (9:16), рамка галереи — 3:4: с cover ролик
   обрезается сверху и снизу (модель без головы). contain вписывает ролик
   целиком, поля по бокам закрывает фон рамки (--surface-2). */
.enslaver-gallery-main.g-frame video {
	object-fit: contain;
}
.enslaver-gallery-main.g-frame img.hidden,
.enslaver-gallery-main.g-frame video[hidden] { display: none; }
/* Пока догружается фото выбранного кадра: затемняем текущий кадр и крутим
   спиннер — вместо показа старого фото под уже переключившейся миниатюрой
   (см. goTo() в assets/product-gallery.js). */
.enslaver-gallery-main.g-frame img,
.enslaver-gallery-main.g-frame video { transition: opacity 0.15s ease; }
.enslaver-gallery-main.g-frame.is-loading img,
.enslaver-gallery-main.g-frame.is-loading video { opacity: 0.35; }
.enslaver-gallery-main.g-frame::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 2px solid var(--line);
	border-top-color: var(--ink);
	border-radius: 50%;
	opacity: 0;
	z-index: 1;
	pointer-events: none;
}
.enslaver-gallery-main.g-frame.is-loading::before {
	opacity: 1;
	animation: enslaver-gallery-spin 0.8s linear infinite;
}
@keyframes enslaver-gallery-spin {
	to { transform: rotate(360deg); }
}
.enslaver-gallery-thumbs .g-thumb-video { position: relative; }
.enslaver-gallery-thumbs .g-thumb-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	color: #fff;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
	pointer-events: none;
}
.enslaver-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--bg);
	border: 1px solid var(--line);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	opacity: 0;
	z-index: 2;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.enslaver-nav-btn svg { width: 16px; height: 16px; display: block; }
.enslaver-nav-btn:hover { border-color: var(--ink-muted); }
.enslaver-nav-btn.is-prev { left: 14px; }
.enslaver-nav-btn.is-next { right: 14px; }
@media (hover: hover) and (pointer: fine) {
	.enslaver-gallery-main-wrap:hover .enslaver-nav-btn { opacity: 1; }
}
.enslaver-gallery-counter {
	position: absolute;
	right: 12px;
	bottom: 12px;
	font-size: 11px;
	color: var(--ink-muted);
	background: var(--bg);
	border: 1px solid var(--line);
	padding: 4px 10px;
	font-variant-numeric: tabular-nums;
}

.enslaver-product-info { position: sticky; top: 20px; align-self: start; }
/* Storefront для .summary задаёт процентную ширину и большой нижний отступ
   (наследие его float-вёрстки) — из-за этого правая колонка занимала лишь
   часть своей grid-колонки, была прижата влево, а под ней возникал лишний
   зазор перед описанием. ВАЖНО: его правило живёт в woocommerce.css, который
   подключается ПОСЛЕ нашего файла, а самый сильный его вариант —
   `.storefront-full-width-content.single-product div.product .summary`
   (4 класса). Наш селектор из 5 классов перебивает его независимо от
   порядка подключения файлов. */
.single-product div.product .enslaver-product-info.summary.entry-summary {
	width: auto;
	max-width: none;
	margin-bottom: 0;
}
.enslaver-product-info .p-title { font-size: 30px; margin: 10px 0 16px; }
.enslaver-p-price {
	display: flex; align-items: baseline; gap: 12px;
	font-variant-numeric: tabular-nums; margin-bottom: 20px; flex-wrap: wrap;
}
.enslaver-p-price .now { font-size: 24px; font-weight: 600; }
.enslaver-p-price .was { font-size: 16px; color: var(--ink-muted); text-decoration: line-through; }
.enslaver-p-price .off { font-size: 13px; color: var(--sale); font-weight: 600; }
/* «Экономия N ₽» — та же плашка, что в корзине у строки товара. */
.enslaver-p-price .save { font-size: 12px; color: var(--ink-muted); background: var(--surface-2); padding: 3px 9px; }
.enslaver-p-price .save .woocommerce-Price-amount { font-size: inherit; color: inherit; font-weight: 400; }
.enslaver-p-block { margin-bottom: 24px; }
.enslaver-p-label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.enslaver-feature-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.enslaver-feature-tag {
	font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--ink-muted); border: 1px solid var(--line); padding: 7px 11px;
}
.enslaver-p-shipnote { font-size: 12.5px; color: var(--ink-muted); margin: 10px 0 26px; }
.enslaver-p-meta { font-size: 12.5px; color: var(--ink-muted); line-height: 1.9; margin-bottom: 26px; }
.enslaver-p-meta b { color: var(--ink); font-weight: 500; }

/* ---------- WooCommerce native variation form (restyled, not replaced) ---------- */
.enslaver-product-info table.variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 18px;
}
.enslaver-product-info table.variations tr {
	display: block;
	margin-bottom: 14px;
}
.enslaver-product-info table.variations th.label {
	display: block;
	text-align: left;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 600;
	padding: 0 0 8px;
}
/* td.value — relative, чтобы нарисовать поверх select свою стрелку (::after):
   системная appearance-стрелка убрана, а внутрь select псевдоэлемент не
   вставить. Ссылка reset_variations в этой же ячейке скрыта ниже. */
.enslaver-product-info table.variations td.value {
	display: block;
	padding: 0;
	position: relative;
}
.enslaver-product-info table.variations td.value::after {
	content: '';
	position: absolute;
	right: 17px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--ink);
	border-bottom: 1.5px solid var(--ink);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
.enslaver-product-info table.variations select {
	width: 100%;
	max-width: none;
	height: 52px;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 14px;
	padding: 0 44px 0 16px;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease;
}
.enslaver-product-info table.variations select:hover {
	border-color: var(--ink-muted);
}
/* WooCommerce ограничивает селекты вариаций правилом
   .single-product div.product table.variations select { max-width:70% }
   (специфичность 0-3-3) — select становился ýже своей ячейки, и наша
   стрелка (::after на td.value) висела в пустоте правее поля. Перебиваем
   селектором с тем же префиксом (0-4-3). */
.single-product div.product .enslaver-product-info table.variations select {
	max-width: none;
}
.enslaver-product-info .woocommerce-variation-price,
.enslaver-product-info .woocommerce-variation-availability {
	display: none;
}
.enslaver-product-info .reset_variations {
	display: none;
}
.enslaver-product-info .single_add_to_cart_button {
	width: auto;
	flex: 1;
	margin-top: 0;
	/* Одна высота с select размера и степпером количества. */
	height: 52px;
	padding-top: 0;
	padding-bottom: 0;
}
.enslaver-product-info .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-top: 4px;
}
.single-product div.product .enslaver-product-info .woocommerce-variation-add-to-cart::before,
.single-product div.product .enslaver-product-info .woocommerce-variation-add-to-cart::after {
	content: none;
}
/* Количество — рамка на обёртке .quantity, внутри голое поле и кнопки «−»/«+»
   (их добавляет assets/product-qty-stepper.js; без JS в рамке остаётся одно
   поле — выглядит как раньше, просто аккуратнее). Тот же рисунок степпера,
   что .enslaver-checkout-qty на чекауте. */
.enslaver-product-info .quantity {
	display: flex;
	align-items: center;
	margin: 0;
	height: 52px;
	border: 1px solid var(--line);
	background: var(--bg);
}
.enslaver-product-info .quantity .qty {
	box-sizing: border-box;
	width: 40px;
	height: 100%;
	border: 0;
	/* Storefront рисует полям ввода внутреннюю тень (inset box-shadow) —
	   внутри рамки степпера она выглядит лишней линией над цифрой. */
	box-shadow: none;
	background: none;
	padding: 0;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}
/* Родные крутилки number-поля убраны — их роль выполняют кнопки степпера. */
.enslaver-product-info .quantity .qty::-webkit-outer-spin-button,
.enslaver-product-info .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.enslaver-pq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease, opacity 0.15s ease;
}
.enslaver-pq-btn:hover:not(:disabled) {
	background: none;
	color: var(--accent);
}
.enslaver-pq-btn:disabled {
	opacity: 0.3;
	cursor: default;
}
.enslaver-product-info form.cart {
	margin-bottom: 6px;
}
.enslaver-product-info form.cart:not(.variations_form) {
	display: flex;
	align-items: stretch;
	gap: 10px;
}
.single-product div.product .enslaver-product-info form.cart:not(.variations_form)::before,
.single-product div.product .enslaver-product-info form.cart:not(.variations_form)::after {
	content: none;
}

/* ---------- Color swatches (photos) replacing the native "Цвет" dropdown ----------
   Штатный <select> цвета в table.variations остаётся в DOM (нужен вариационной
   JS-логике WooCommerce), просто скрываем его строку через :has(), когда у
   товара больше одного цвета и мы рендерим свои фото-свотчи вместо неё
   (см. .enslaver-has-color-swatches в content-single-product.php). */
.enslaver-product-info.enslaver-has-color-swatches table.variations tr:has(select[data-attribute_name="attribute_pa_cvet"]) {
	display: none;
}
.enslaver-color-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.enslaver-color-swatch {
	display: block;
	width: 52px;
	height: 68px;
	overflow: hidden;
	background: var(--surface-2);
	border: 1px solid var(--line);
	transition: border-color 0.2s ease;
}
.enslaver-color-swatch img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.enslaver-color-swatch:hover {
	border-color: var(--ink-muted);
}
.enslaver-color-swatch.is-active {
	border-color: var(--ink);
	border-width: 1px;
}

/* ---------- Распроданный цвет: свотч и сообщение на странице товара ---------- */
.enslaver-color-swatch.is-oos { position: relative; }
.enslaver-color-swatch.is-oos img {
	filter: grayscale(1);
	opacity: 0.5;
}
.enslaver-color-swatch-oos-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.85);
	color: var(--ink-muted);
	font-size: 10px;
	line-height: 1.5;
	text-align: center;
	pointer-events: none;
}
/* Штатный блок наличия у вариаций спрятан выше (он дублировал очевидное
   «В наличии»), но для распроданной вариации сообщение как раз нужно —
   показываем блок обратно, только когда внутри «Нет в наличии». */
.enslaver-product-info .woocommerce-variation-availability:has(p.out-of-stock) {
	display: block;
	margin-bottom: 12px;
}
.woocommerce-variation-availability p.stock.out-of-stock {
	border: 1px solid var(--line);
	padding: 12px 16px;
	color: var(--sale);
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

/* ---------- Accordion (product tabs) ---------- */
.enslaver-accordion { border-top: 1px solid var(--line); }
.enslaver-accordion-item { border-bottom: 1px solid var(--line); }
.enslaver-accordion-item summary {
	display: flex; justify-content: space-between; align-items: center;
	padding: 16px 1px; font-size: 14px; cursor: pointer; list-style: none;
	font-family: var(--font-body); color: var(--ink);
}
.enslaver-accordion-item summary::-webkit-details-marker { display: none; }
.enslaver-accordion-item summary .chev { font-size: 12px; color: var(--ink-muted); transition: transform 0.2s ease; }
.enslaver-accordion-item[open] summary .chev { transform: rotate(180deg); }
.enslaver-accordion-body { padding: 0 1px 18px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.65; }
.enslaver-accordion-body table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.enslaver-accordion-body th,
.enslaver-accordion-body td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.enslaver-accordion-body th { color: var(--ink); font-weight: 600; }

/* legacy: size table / care tab content (from Этап 2) */
.enslaver-size-table table {
	width: 100%;
	border-collapse: collapse;
}
.enslaver-size-table th,
.enslaver-size-table td {
	border: 1px solid var(--line);
	padding: 0.5rem 0.75rem;
	text-align: center;
}

/* Плавающая панель "sticky add to cart" (родительская тема Storefront) — наш
   JS (assets/sticky-add-to-cart.js) прячет всю панель целиком, когда товар
   уже в корзине. !important нужен, чтобы гарантированно перебить keyframe-
   анимацию появления при скролле (--slideInDown), которую вешает чужой
   скрипт родительской темы. */
.storefront-sticky-add-to-cart.enslaver-sticky-hide {
	display: none !important;
}

/* Автоподсказка адреса на чекауте (assets/address-suggest.js, DaData) */
.enslaver-address-suggest {
	display: none;
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: none;
	max-height: 260px;
	overflow-y: auto;
}
.enslaver-address-suggest__item {
	padding: 9px 12px;
	font-size: 13.5px;
	color: var(--ink);
	cursor: pointer;
}
.enslaver-address-suggest__item:hover {
	background: var(--surface-2);
}

/* Населённый пункт/область/индекс на чекауте автозаполняются JS из подсказки
   DaData (assets/address-suggest.js) — визуально прячем их с !important,
   т.к. штатный JS WooCommerce (address-i18n.js) может заново показать поле
   "Область/район" при смене страны поверх любых других способов скрытия.
   "Крыло, подъезд, этаж" (address_2) сюда же — отдельная строка адреса
   покупателю не нужна, помещается в основной "Адрес". Страна тоже скрыта —
   продажи только по России, значение всегда 'RU' (см.
   default_checkout_billing_country в inc/checkout-address-fields.php),
   показывать однозначный выбор покупателю незачем. */
#billing_city_field,
#billing_state_field,
#billing_postcode_field,
#billing_address_2_field,
#billing_country_field {
	display: none !important;
}

/* Заголовок "Детали" (стандартный WooCommerce "Additional information") над
   полем примечания к заказу — убираем подпись и сокращаем отступ сверху,
   раз секция теперь состоит из одного необязательного поля. */
.woocommerce-additional-fields h3 {
	display: none !important;
}
.woocommerce-additional-fields {
	margin-top: 0 !important;
}

@media (max-width: 880px) {
	.enslaver-hero { grid-template-columns: 1fr; }
	.enslaver-hero-frame { order: -1; margin-right: 0; }
	.enslaver-ritual { grid-template-columns: 1fr; }
	.enslaver-ritual-frame { order: -1; }
	.enslaver-grid { grid-template-columns: repeat(2, 1fr); }
	/* Хиты продаж на главной: десктоп — 2 строки по 4 (8 карточек),
	   мобильный — 2 колонки, оставляем только 6 карточек (3 строки). */
	.enslaver-section-hits .enslaver-grid .enslaver-card:nth-child(n+7) {
		display: none;
	}
	.enslaver-newsletter-row { grid-template-columns: 1fr; }
	/* Мобильный: одна колонка, описание — в самом низу, после всех
	   раскрывающихся секций (Характеристики, Отзывы и т.д.). */
	.enslaver-product {
		grid-template-columns: minmax(0, 1fr);
		/* Сбрасываем десктопные auto/1fr — на мобильном три строки,
		   каждая по содержимому. */
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"gallery"
			"info"
			"desc";
		row-gap: 34px;
	}
	.enslaver-product-info { position: static; }
	.enslaver-gallery { grid-template-columns: minmax(0, 1fr); }
	.enslaver-gallery-rail-wrap { max-height: none; order: 2; min-width: 0; }
	/* На мобильном миниатюры — горизонтальная лента под фото, в обычном
	   потоке (десктопное absolute здесь схлопнуло бы рейл в ноль). */
	.enslaver-gallery-thumbs {
		position: static;
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.enslaver-gallery-thumbs .g-thumb { flex: 0 0 64px; width: 64px; }
	.enslaver-rail-btn { display: none; }
	/* Главное фото не выше экрана телефона: ограничиваем ширину кадра так,
	   чтобы при пропорции 3:4 высота не превышала ~78% высоты вьюпорта
	   (остальное — шапка и хлебные крошки). Кадр центрируется. */
	.enslaver-gallery-main-wrap {
		order: 1;
		width: 100%;
		max-width: calc(78vh * 0.75);
		max-width: calc(78svh * 0.75);
		margin: 0 auto;
	}
}

/* ============================================================
   SEO-описание категории — текстовый блок под товарами каталога
   ============================================================ */
.enslaver-category-description {
	max-width: 46em;
	margin: 48px auto 24px;
	color: var(--ink-muted);
	font-size: 0.9rem;
	line-height: 1.7;
}
.enslaver-category-description h2 {
	font-family: var(--font-display);
	color: var(--ink);
	font-size: 1.25rem;
	margin: 1.4em 0 0.5em;
}
.enslaver-category-description p {
	margin: 0 0 0.9em;
}
/* Тот же блок на главной: без верхнего зазора архива, отступы секции главной. */
.enslaver-home-seo {
	margin: 70px auto;
}

/* ============================================================
   FAQ — вопросы и ответы (карточка товара + категория)
   ============================================================ */
.enslaver-faq-list {
	margin: 0;
}
.enslaver-faq-list dt {
	font-weight: 600;
	color: var(--ink);
	margin: 1.1em 0 0.3em;
}
.enslaver-faq-list dt:first-child {
	margin-top: 0;
}
.enslaver-faq-list dd {
	margin: 0;
	color: var(--ink-muted);
}
.enslaver-category-faq {
	margin-top: 0;
	padding-top: 0;
}
.enslaver-category-faq .enslaver-faq-list dd {
	font-size: 0.9rem;
	line-height: 1.7;
}

/* ============================================================
   Личный кабинет («Мой аккаунт»)
   ============================================================ */
/* Раскладка: меню слева, содержимое справа. У Storefront колонки собраны
   на float с процентными ширинами — переводим на flex, чтобы управлять
   зазором и шириной. flex-wrap нужен из-за уведомлений WooCommerce
   («Изменения сохранены» и т.п.): они печатаются ПЕРВЫМ ребёнком того же
   .woocommerce-контейнера, что и колонки, — без переноса уведомление
   встало бы в один ряд с меню. Только для залогиненных: у гостя на этом
   же URL форма входа, ей две колонки не нужны. */
.woocommerce-account.logged-in .entry-content > .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px 72px;
}

/* Отступ между хлебными крошками и содержимым кабинета — как между
   крошками и линией шапки. Общее правило темы (.storefront-breadcrumb ниже)
   срезает нижний отступ крошек почти в ноль — это подогнано под каталог,
   где сразу под крошками строка фильтров. В кабинете возвращаем снизу тот
   же порядок, что у крошек сверху (родной padding Storefront 1.41575em),
   с небольшим запасом — по просьбе владельца низ чуть просторнее верха. */
body.woocommerce-account .storefront-breadcrumb {
	padding-bottom: 2em !important;
	margin-bottom: 0 !important;
}
.woocommerce-account.logged-in .entry-content > .woocommerce > .woocommerce-message,
.woocommerce-account.logged-in .entry-content > .woocommerce > .woocommerce-error,
.woocommerce-account.logged-in .entry-content > .woocommerce > .woocommerce-info {
	flex: 0 0 100%;
	width: 100%;
}
/* ============================================================
   Таблица «Оформленные заказы» — редизайн под стиль сайта.
   Разметка родная (WooCommerce/Storefront), состав и вывод ячеек —
   inc/my-account.php (столбец «Количество товара», плашка статуса
   .enslaver-order-status, «Итого» без приписки о количестве товара).
   Тут — только оформление и адаптив.
   ============================================================ */

/* Кнопка «Подробнее»: убираем значок глаза, который Storefront
   пририсовывает через Font Awesome (icons.css,
   .my_account_orders .button.view::after) — по просьбе владельца; паддинг
   уменьшен под высоту строки таблицы/карточки (родной — 15px 28px). */
.my_account_orders .button.view::after {
	content: none !important;
	margin-left: 0 !important;
}
.my_account_orders .button.view {
	padding: 10px 22px !important;
	font-size: 12px !important;
}

/* Статус — рамка-тег вместо голого текста (тот же язык, что у
   .enslaver-feature-tag на карточке товара: рамка var(--line), без
   скругления — сайт нигде не скругляет углы). Красный контур для
   отменён/не оплачен/возврат, залитый тёмный — для «Выполнен». */
.enslaver-order-status {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 6px 12px;
	border: 1px solid var(--line);
	color: var(--ink-muted);
	white-space: nowrap;
}
.enslaver-order-status.is-negative {
	color: var(--sale);
	border-color: var(--sale);
}
.enslaver-order-status.is-positive {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

/* ---------- Десктоп/планшет (>=768px): обычная таблица ---------- */
@media (min-width: 768px) {
	.my_account_orders {
		border-collapse: collapse;
	}
	.my_account_orders thead th {
		font-family: var(--font-body);
		font-size: 12px;
		font-weight: 600 !important;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--ink-muted);
		border: 0 !important;
		border-bottom: 1px solid var(--line) !important;
		padding: 14px 12px !important;
		text-align: center !important;
		vertical-align: middle;
	}
	.my_account_orders tbody tr,
	.my_account_orders tbody th,
	.my_account_orders tbody td {
		background: transparent !important; /* гасим зебру Storefront (tr:nth-child(2n) td) */
	}
	.my_account_orders tbody th,
	.my_account_orders tbody td {
		border: 0 !important;
		border-bottom: 1px solid var(--line) !important;
		padding: 18px 12px !important;
		text-align: center !important;
		vertical-align: middle;
		font-size: 14px;
	}
	.my_account_orders .woocommerce-orders-table__cell-order-number {
		font-weight: 600;
	}
	.my_account_orders .woocommerce-orders-table__cell-order-number a {
		text-decoration: none;
	}
	.my_account_orders .woocommerce-orders-table__cell-order-number a:hover {
		text-decoration: underline;
	}
	.my_account_orders .woocommerce-orders-table__cell-order-total {
		font-weight: 600;
		white-space: nowrap;
	}
}

/* ---------- Мобильный (<768px): карточки вместо таблицы ---------- */
@media (max-width: 767px) {
	.my_account_orders,
	.my_account_orders tbody {
		display: block;
		width: 100%;
	}
	.my_account_orders thead {
		display: none;
	}
	.my_account_orders tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 16px;
		row-gap: 10px;
		border: 1px solid var(--line);
		padding: 18px;
		margin-bottom: 14px;
	}
	.my_account_orders tbody tr,
	.my_account_orders tbody th,
	.my_account_orders tbody td {
		background: transparent !important; /* гасим зебру Storefront */
	}
	.my_account_orders tbody th,
	.my_account_orders tbody td {
		display: block;
		flex: 1 1 100%;
		padding: 0 !important;
		border: 0 !important;
		text-align: left;
		clear: none;
		font-size: 14px;
	}

	/* Заказ — крупным номером первой строкой карточки. Storefront
	   безусловно прячет ЛЮБОЙ <th> в теле адаптивной таблицы
	   (table.shop_table_responsive tbody th{display:none}, woocommerce.css)
	   до min-width:768px — а эта ячейка в шаблоне WooCommerce как раз
	   <th scope="row">, а не <td>. Возвращаем видимость. */
	.my_account_orders tbody th.woocommerce-orders-table__cell-order-number {
		display: block !important;
		font-size: 16px;
		font-weight: 600;
	}
	.my_account_orders tbody th.woocommerce-orders-table__cell-order-number a {
		text-decoration: none;
		color: var(--ink);
	}

	/* Дата + Статус — вторая строка карточки, пополам. */
	.my_account_orders .woocommerce-orders-table__cell-order-date,
	.my_account_orders .woocommerce-orders-table__cell-order-status {
		flex-basis: calc(50% - 8px);
	}
	.my_account_orders .woocommerce-orders-table__cell-order-status {
		text-align: right;
	}
	.my_account_orders .woocommerce-orders-table__cell-order-status::before {
		content: none !important; /* плашка статуса говорит сама за себя, без ярлыка «Статус:» */
	}

	/* Количество + Итого — третья строка карточки, пополам. */
	.my_account_orders .woocommerce-orders-table__cell-order-quantity,
	.my_account_orders .woocommerce-orders-table__cell-order-total {
		flex-basis: calc(50% - 8px);
	}
	.my_account_orders .woocommerce-orders-table__cell-order-total {
		text-align: right;
		font-weight: 600;
	}

	/* Действия — последней строкой, кнопка справа, без ярлыка «Действия:». */
	.my_account_orders .woocommerce-orders-table__cell-order-actions {
		text-align: right;
		margin-top: 4px;
	}
	.my_account_orders .woocommerce-orders-table__cell-order-actions::before {
		content: none !important;
	}
}

/* ============================================================
   Страница одного заказа (/my-account/view-order/N/) — таблица
   «Информация о заказе». Разметка — переопределённый шаблон
   woocommerce/order/order-details.php (классы enslaver-order-row* на
   каждой строке — оттуда), тут только оформление.
   ============================================================ */
.woocommerce-order-details__title {
	font-size: 22px;
	margin: 0 0 20px;
}
.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--line);
	margin-bottom: 40px;
}
.enslaver-order-row {
	border-bottom: 1px solid var(--line);
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: 16px 12px 16px 0;
	text-align: left;
	vertical-align: top;
	font-size: 14px;
	font-weight: 400;
	background: transparent !important; /* гасим зебру WooCommerce/Storefront */
}
.woocommerce-table--order-details th {
	width: 44%;
	max-width: 220px;
	padding-left: 12px; /* тот же отступ от края таблицы, что справа у значений */
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.woocommerce-table--order-details td {
	color: var(--ink);
}

/* Стоимость товара / Доставка / Итого / Способ оплаты — сумма справа,
   моноширинные цифры для ровного столбца, граница-разделитель перед
   первой строкой блока (отделяет от анкетных данных выше). */
.enslaver-order-row--money td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.enslaver-order-row--totals-start {
	border-top: 1px solid var(--line);
}
.enslaver-order-row--grand-total th,
.enslaver-order-row--grand-total td {
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
}

@media (max-width: 480px) {
	.woocommerce-table--order-details,
	.woocommerce-table--order-details tbody {
		display: block;
	}
	.enslaver-order-row {
		display: block;
		padding: 14px 0;
	}
	.woocommerce-table--order-details th,
	.woocommerce-table--order-details td {
		display: block;
		width: auto;
		max-width: none;
		padding: 0;
	}
	.woocommerce-table--order-details th {
		margin-bottom: 4px;
	}
	.enslaver-order-row--money td {
		text-align: left;
	}
	.enslaver-order-row--totals-start {
		border-top: 0;
		margin-top: 10px;
		padding-top: 14px;
		box-shadow: 0 -1px 0 var(--line);
	}
}
.woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	flex: 0 0 190px;
}
.woocommerce-MyAccount-content {
	float: none;
	width: auto;
	flex: 1 1 460px;
	max-width: 680px;
}

/* Меню кабинета — в языке шапки сайта: тонкий текст верхним регистром,
   активный пункт подчёркнут. Иконки Storefront (шрифт Font Awesome,
   ::before/::after у ссылок) гасим — во всей теме иконки только свои. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-MyAccount-navigation li {
	margin: 0 0 16px;
	border: none;
}
.woocommerce-MyAccount-navigation li a {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink-muted);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
	color: var(--ink);
}
.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--ink);
	border-color: var(--ink);
}
.woocommerce-MyAccount-navigation li a::before,
.woocommerce-MyAccount-navigation li a::after {
	content: none !important;
	display: none !important;
}

/* Заголовки внутри кабинета («Адрес доставки», «Смена пароля») — как
   на остальных страницах: антиква Cormorant. У Storefront legend оформлен
   серой плашкой-«вкладкой», а fieldset обведён рамкой — убираем и то и
   другое, оставляем тонкую линию-отбивку сверху. */
.woocommerce-MyAccount-content h2 {
	font-size: 28px;
	margin-bottom: 0.8em;
}
.woocommerce-MyAccount-content fieldset {
	background: none;
	border: none;
	border-top: 1px solid var(--line);
	border-radius: 0;
	margin: 2.2em 0 0;
	padding: 1.6em 0 0;
}
.woocommerce-MyAccount-content fieldset legend {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 24px;
	color: var(--ink);
	background: none;
	padding: 0 0 0.4em;
	margin: 0;
	float: left;
	width: 100%;
}
.woocommerce-MyAccount-content label {
	font-size: 14px;
	font-weight: 500;
}
.woocommerce-MyAccount-content .input-text {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink);
}
.woocommerce-MyAccount-content .input-text:focus {
	background: var(--bg);
	border-color: var(--ink);
	outline: none;
}

/* Карточка адреса в разделе «Адрес» */
.woocommerce-MyAccount-content address {
	border: none;
	padding: 0;
	font-style: normal;
	color: var(--ink-muted);
	line-height: 1.7;
}
/* Кнопка «Добавить/Изменить адрес доставки» под текстом адреса (сама кнопка
   уже чёрная — общие правила кнопок темы, шаблон my-address.php даёт ей
   класс .button) — только отбивка от текста. */
.woocommerce-MyAccount-content .woocommerce-Address a.edit {
	display: inline-block;
	margin-top: 20px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	font-family: var(--font-display);
	font-weight: 500;
}

/* Таблица заказов */
.woocommerce-MyAccount-content table.shop_table {
	border: none;
	border-radius: 0;
	font-size: 14px;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
	border-color: var(--line);
}

/* Уведомления WooCommerce НА ВСЁМ САЙТЕ («Товар добавлен в корзину»,
   «Заказов ещё не создано», «Изменения сохранены» и т.п.). У Storefront это
   цветные плашки — синяя/зелёная/красная с белым текстом и иконкой шрифтом
   Font Awesome; зелёный/синий/фиолетовый не из палитры сайта и выбиваются.
   Переводим в палитру: спокойная плашка цвета поверхности, текст чернильный,
   без иконки. Кнопка внутри («Просмотр корзины») уже чёрная — её красят
   общие правила кнопок темы. Ошибке оставляем красную метку слева, чтобы
   отличалась от обычного сообщения. Раньше блок был ограничен кабинетом
   (.woocommerce-account) — распространён на весь сайт по итогам дизайн-аудита. */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	background: var(--surface-2);
	color: var(--ink);
	border: none;
	border-radius: 0;
	padding: 22px 28px;
	font-size: 15px;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	content: none !important;
	display: none !important;
}
.woocommerce-error {
	border-left: 2px solid var(--sale);
}
.woocommerce-info a:not(.button),
.woocommerce-message a:not(.button),
.woocommerce-error a:not(.button) {
	color: var(--ink);
}
.woocommerce-info .button,
.woocommerce-message .button {
	margin-left: 24px;
}

/* У кнопки внутри уведомления («Оформить заказ») родной Storefront ставит
   border-left-color: rgba(255,255,255,.25) !important — рассчитан на цветной
   (синий/зелёный) фон стандартной плашки WooCommerce, на нашей светло-серой
   (--surface-2) эта грань не видна, прямоугольник кнопки выглядит "открытым"
   слева. !important у Storefront обязывает перебивать тем же — обычная
   специфичность/порядок подключения тут бессильны. Прячем грань в состоянии
   покоя и показываем в цвете чернил при наведении — рамка "замыкается" как
   акцент на ховере, а не безжизненная недорисованная линия постоянно. */
.woocommerce-info .button,
.woocommerce-message .button {
	border-left-color: transparent !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-left-color 0.2s ease;
}
.woocommerce-info .button:hover,
.woocommerce-message .button:hover {
	border-left-color: var(--ink) !important;
}

/* WooCommerce переносит фокус на уведомление после добавления товара
   (доступность: скринридер зачитывает сообщение) — браузер рисует вокруг
   плашки родное синее кольцо фокуса, которое выглядит как чужая синяя рамка
   не из палитры сайта. Само сообщение некликабельно, кольцо на нём смысла
   не несёт — убираем; фокус с клавиатуры на кнопке «Просмотр корзины»
   остаётся подсвеченным её собственными стилями. */
.woocommerce-info:focus,
.woocommerce-message:focus,
.woocommerce-error:focus,
.wc-block-components-notice-banner:focus {
	outline: none;
}

/* Те же уведомления, но в новой блочной разметке WooCommerce
   (.wc-block-components-notice-banner — цветная рамка, скругления, иконка) —
   приводим к той же спокойной плашке, что и классические уведомления выше. */
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error {
	background: var(--surface-2);
	color: var(--ink);
	border: none;
	border-radius: 0;
	padding: 22px 28px;
	font-size: 15px;
}
.wc-block-components-notice-banner > svg {
	display: none;
}
.wc-block-components-notice-banner.is-error {
	border-left: 2px solid var(--sale);
}

/* ---------- Оформление заказа: единая страница корзины+чекаута ----------
   Разметка — переопределённые шаблоны woocommerce/checkout/review-order.php
   и form-checkout.php. Корневой .enslaver-review-order несёт класс
   .woocommerce-checkout-review-order-table: WooCommerce перерисовывает его
   AJAX-ом целиком при каждом пересчёте, разметка приходит та же — селекторы
   работают и после перерисовки. Никаких таблиц для раскладки: с ячейками
   двухколоночной таблицы уже навоевались (см. git history), товары — flex. */
.enslaver-review-order {
	background: var(--surface-2);
	padding: 6px 24px 20px;
}
.enslaver-review-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}
.enslaver-checkout-item-thumb {
	flex: 0 0 64px;
}
.enslaver-checkout-item-thumb img {
	display: block;
	width: 100%;
	height: auto;
}
/* Фото и название — ссылка на карточку товара (woocommerce/checkout/review-order.php).
   Сбрасываем стандартное подчёркивание/синий цвет ссылки — выглядит как
   раньше (обычный текст/картинка), кликабельность даёт только курсор и лёгкое
   подчёркивание названия по наведению. */
.enslaver-checkout-item-thumb a {
	display: block;
}
.enslaver-checkout-item-name a {
	color: inherit;
	/* !important — родная типографика Storefront подчёркивает ссылки в
	   контенте своим правилом, которое грузится ПОСЛЕ style.css и выигрывает
	   при равной специфичности (та же особенность каскада, что и в других
	   местах темы, см. соседние комментарии про порядок родителя/потомка). */
	text-decoration: none !important;
}
.enslaver-checkout-item-name a:hover {
	text-decoration: underline !important;
}
.enslaver-review-item-info {
	flex: 1 1 auto;
	min-width: 0;
}
.enslaver-checkout-item-name {
	font-size: 14px;
	line-height: 1.5;
}
.enslaver-review-item-info dl.variation {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--ink-muted);
}
/* Правый столбец позиции, по правому краю, сверху вниз: цена, степпер
   количества, «Убрать». Цена крупнее строки товара (14px) — ей полагается
   читаться первой и с одного взгляда, тот же приём, что у цены в карточке
   товара (.enslaver-card-price .now). Зазор одинаковый между всеми тремя
   строками (цена→степпер, степпер→«Убрать») — единый gap на родителе, без
   отдельного margin у «Убрать» (было раньше, владелец попросил сравнять). */
.enslaver-review-item-controls {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}
.enslaver-review-item-price {
	font-size: 18px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	white-space: nowrap;
}
.enslaver-checkout-qty {
	display: flex;
	align-items: center;
	gap: 8px;
}
/* «Итого (без доставки)» под товарами в «Ваш заказ» + строки скидок/сборов,
   если появятся (купоны, сборы). Полный «Товары» / «Доставка» / «Итого» —
   отдельным блоком над кнопкой «Оплатить заказ» (см. .enslaver-payment-lines
   ниже) — сумма товаров сознательно показана в обоих местах. */
.enslaver-review-lines {
	padding: 12px 0 4px;
}
.enslaver-review-line {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 4px 0;
	font-size: 14px;
}
.enslaver-review-line.cart-subtotal {
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
}
/* Сумма (второй span строки, подпись «Итого (без доставки):» — первый) —
   тем же размером и с тем же tabular-nums, что цена товара выше
   (.enslaver-review-item-price), чтобы денежные суммы в блоке читались
   одним визуальным весом. Подпись оставлена меньше — она текст, не число. */
.enslaver-review-line.cart-subtotal > span:last-child {
	font-size: 18px;
	font-variant-numeric: tabular-nums;
}
/* Блок «Способ доставки» — в форме, сразу под заголовком «Доставка» (хук
   woocommerce_before_checkout_billing_form, см. inc/checkout-cart.php).
   Внутри — штатные строки <tr> из cart/cart-shipping.php (в них
   встраивается виджет ПВЗ СДЭК), поэтому таблица остаётся, но ярлык пакета
   («Доставка») прячем — у блока уже есть свой заголовок. Сам блок теперь
   просто отступ-обёртка: рамку и фон рисует сегментированный переключатель
   способов доставки (ul#shipping_method) ниже. */
.enslaver-shipping-block {
	/* Было margin: 4px 0 16px — верхний отступ убран (даёт его теперь
	   заголовок «Доставка», см. общее правило центрирования заголовков
	   ниже). Нижний — см. media-правило ниже: на ≥768px нужен отрицательный
	   отступ, на более узких экранах — нет (см. его комментарий). */
	margin: 0;
}
/* На ≥768px (родной breakpoint Storefront, где родитель меняет масштаб
   шрифта у html/body) сетка .woocommerce-billing-fields зачем-то считает
   на одну неявную grid-строку больше между этим блоком и полем «Адрес» —
   реальный зазор получается 32px вместо обычных row-gap:16px (в 2 раза
   больше, чем, например, между «Имя получателя» и «Телефон»). Компенсируем
   отрицательным отступом, выравнивая с остальными полями формы. ТОЛЬКО на
   этой ширине: ниже 768px этой лишней строки нет вообще — тот же
   отрицательный отступ там утапливал бы поле «Адрес» вплотную под цену
   доставки (было — прежде, чем отступ ограничили media-правилом). */
@media (min-width: 768px) {
	.enslaver-shipping-block {
		margin-bottom: -16px;
	}
}
/* Строка «Расчёт для города: …» над способами доставки — откуда взялась
   цена, если поле «Адрес» ещё пустое (город на этот момент из cookie
   геолокации, см. inc/geo-city.php). */
.enslaver-shipping-city-note {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--ink-muted);
}
.enslaver-shipping-city-note b {
	color: var(--ink);
	font-weight: 600;
}
.enslaver-shipping-city-edit {
	margin-left: 4px;
	padding: 0;
	background: none;
	border: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}
/* Storefront/WP core красят :hover у любых <button> в серый фон — та же
   грабля, что и у .enslaver-search-toggle/.enslaver-city-toggle. */
.enslaver-shipping-city-edit:hover {
	background: none;
}
/* Поле «Адрес» — обычное поле формы (см. общий стиль полей ниже), НЕ особая
   серая карточка: оно физически стоит в обычном месте формы
   (.woocommerce-billing-fields__field-wrapper), просто первое по порядку
   (billing_address_1 priority=5, см. inc/checkout-address-fields.php).
   Скрытие поля для ПВЗ (JS: .hide(), assets/checkout-shipping.js) само
   освобождает его место в сетке — соседние строки просто поднимаются. */
.woocommerce-billing-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 14px;
	row-gap: 16px;
}
.woocommerce-billing-fields__field-wrapper {
	display: contents;
}
.woocommerce-billing-fields__field-wrapper .form-row {
	margin: 0;
}
/* form-row-wide/-first/-last — штатные классы WooCommerce (обычно решают
   раскладку через float, см. woocommerce.css Storefront); в grid-контексте
   float игнорируется, поэтому раскладку колонок задаём сами тем же смыслом:
   -wide на всю ширину, -first/-last — в паре (Имя/Фамилия, Телефон/Email). */
.enslaver-shipping-block,
.enslaver-contacts-heading,
.woocommerce-billing-fields > h3,
.woocommerce-billing-fields__field-wrapper > .form-row-wide {
	/* .woocommerce-billing-fields > h3 («Доставка») — без этого элемент без
	   заданной колонки авто-размещался в grid только в ПЕРВУЮ колонку
	   (половина ширины ряда), и text-align:center (см. правило ниже)
	   центрировал текст внутри этой узкой половины, а не по-настоящему
	   по центру блока — визуально выглядело как «не по центру». */
	grid-column: 1 / -1;
}
.woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-billing-fields__field-wrapper > .form-row-last {
	/* min-width:0 обязателен: у грид-ячейки он по умолчанию auto, то есть
	   не может стать уже своего контента. Длинная надпись без пробелов для
	   переноса («ФАМИЛИЯ», «ПОЛУЧАТЕЛЯ» и т.п. на узких экранах) раздвигала
	   бы свою колонку шире соседней вместо честных 50/50 — из-за этого поля
	   ввода в паре выходили разного размера (жалоба со скриншота с телефона:
	   Имя/Фамилия/Email мельче Телефона). */
	min-width: 0;
	/* НАСТОЯЩАЯ причина того же перекоса (эта — глубже min-width): у
	   Storefront woocommerce.css есть родное правило
	   .col2-set .form-row-first/.form-row-last{width:44.44%} (расчитано на
	   старую float-раскладку, где оба поля были в ОДНОЙ строке шириной
	   100%). Наш grid уже кладёт каждое поле в СВОЮ колонку (100% =
	   половина ряда), поэтому 44.44% Storefront схлопывает поле ещё вдвое
	   поверх этого — Имя/Фамилия/Email становятся заметно уже, чем Телефон
	   (у него класс form-row-wide, это правило на него не действует).
	   Файл Storefront грузится ПОСЛЕ style.css дочерней темы и при равной
	   специфичности селектора выигрывает — тот же паттерн, что и в других
	   местах темы (см. .enslaver-header-cart и т.п.), лечится так же. */
	width: 100% !important;
}
.woocommerce-billing-fields__field-wrapper > .form-row-first {
	grid-column: 1;
}
.woocommerce-billing-fields__field-wrapper > .form-row-last {
	grid-column: 2;
}
/* Порядок строк держим через CSS order, а не только через DOM-порядок:
   штатный скрипт WooCommerce address-i18n.js после загрузки страницы САМ
   пересобирает и переставляет поля по приоритетам локали (см. комментарий
   в inc/checkout-address-fields.php) — DOM-позиция полей после этого
   момента не гарантирована. Наши «Контакты»/сноска вставляются JS-ом
   (assets/checkout-shipping.js) один раз при загрузке и тоже могут
   оказаться не на своём месте относительно полей после этой перестройки —
   order гарантирует видимый порядок независимо от того, в каком порядке
   элементы реально лежат в DOM. */
#billing_address_1_field { order: 1; }
.enslaver-contacts-heading { order: 2; }
#billing_first_name_field { order: 3; }
#billing_last_name_field { order: 4; }
#billing_phone_field { order: 5; }
#billing_email_field { order: 6; }
/* Пара Телефон/Email по колонкам — через ID, а не только через класс
   form-row-first/-last (inc/checkout-address-fields.php): на практике
   billing_phone на боевом сайте всё равно приходит с form-row-wide
   (что-то ещё в цепочке фильтров WooCommerce переопределяет класс уже
   после нашего), а ID-селектор специфичнее .form-row-wide и не зависит от
   того, чей класс победит. */
#billing_phone_field {
	grid-column: 1;
	min-width: 0;
	width: 100% !important;
}
#billing_email_field {
	grid-column: 2;
	min-width: 0;
	width: 100% !important;
}
@media (max-width: 600px) {
	.woocommerce-billing-fields {
		column-gap: 10px;
	}
}
/* Зазор между рядом «Телефон/Email» и полем «Примечание к заказу» —
   «Примечание» физически лежит в ДРУГОМ контейнере (.woocommerce-additional-
   fields, col-2 формы, а не в этом гриде — см. комментарий про #order_comments_field
   ниже), поэтому его отделяет не row-gap:16px этого грида, а собственный
   WooCommerce-дефолт .col-1{margin-bottom:~25.9px} — на глаз заметно больше,
   чем 16px между Имя/Фамилия и Телефон/Email. Сводим к тем же 16px, чтобы
   весь блок «Контакты» читался одним ритмом. */
#customer_details .col-1 {
	margin-bottom: 16px;
}
/* Тем же приёмом — сам WooCommerce-дефолт #order_comments_field{margin-bottom}
   (~22.65px, крупнее 16px) на зазор до сноски про звёздочку под ним. */
#order_comments_field {
	margin-bottom: 16px;
}
/* «Контакты» — заголовок вставляется JS-ом перед полем «Имя получателя»
   (assets/checkout-shipping.js): между «Адрес» и остальными полями формы
   нет хука WooCommerce, а переопределять весь form-billing.php ради одного
   заголовка — лишний риск для чекаута. Тот же приём — для сноски про
   звёздочку: вставляется под полем «Примечание к заказу» (#order_comments_field,
   отдельный блок «Детали» формы, col-2), не в этой сетке — .enslaver-required-note
   ниже в grid-column не участвует. */
/* «Ваш заказ» / «Доставка» / «Контакты» / «Оплата» — по центру. Отступ ДО
   заголовка (между предыдущим блоком и следующим заголовком) — 32px, для
   разделения секций. Отступ ПОСЛЕ — 6px, как между хлебными крошками и
   «Оформление заказа» (см. .woocommerce-breadcrumb margin-bottom выше и
   .entry-header h1 — тот же зазор, по просьбе владельца день в день после
   редизайна). Раньше у каждого заголовка был свой случайный отступ из
   разных мест (0, 14px, 8px сверху/0 снизу, margin-top:36px у обёртки
   «Оплаты» и т.д.) — теперь только этот один блок отвечает за отступы,
   конфликтующие margin у соседних элементов обнулены точечно (см.
   .enslaver-shipping-block, .enslaver-checkout-payment-wrap). */
#order_review_heading,
.woocommerce-billing-fields > h3,
.enslaver-contacts-heading,
.enslaver-payment-heading {
	text-align: center;
	margin: 32px 0 6px;
}
/* «Доставка» и «Контакты» — единственные из четырёх заголовков, что стоят
   ВНУТРИ .woocommerce-billing-fields (грид с row-gap:16px, см. ниже) —
   их margin-bottom складывается с этим row-gap, а не заменяет его (грид не
   схлопывает margin своих элементов). Итоговый зазор был 6px+16px=22px
   вместо 6px, как у «Ваш заказ»/«Оплата» вне этого грида. Компенсируем
   отрицательным margin-bottom: 16px row-gap - 10px = 6px, тот же зазор
   для всех четырёх заголовков. */
.woocommerce-billing-fields > h3,
.enslaver-contacts-heading {
	margin-bottom: -10px;
}
.enslaver-required-note {
	font-size: 12px;
	color: var(--ink-muted);
	/* margin-top:16px — тот же зазор, что между рядами полей выше
	   (.woocommerce-billing-fields row-gap и #order_comments_field ниже);
	   на практике побеждает больший из двух схлопнувшихся margin (это и
	   #order_comments_field{margin-bottom:16px} по соседству), так что
	   реальный зазор держится ровно 16px, а не искусственно завышен. */
	margin: 16px 0 0;
}
.enslaver-required-note .required-mark {
	color: var(--sale);
	margin-right: 3px;
}
/* Мягкая подсказка «не забудьте квартиру» под полем «Адрес» — не ошибка,
   просто напоминание (assets/checkout-shipping.js, checkAddressUnitHint()),
   поэтому приглушённый цвет и мелкий кегль, как у остальных ненавязчивых
   подсказок формы (.enslaver-required-note), а не цвет ошибки. */
.enslaver-address-unit-hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--ink-muted);
}
/* Единый стиль полей формы на чекауте (адрес, имя/фамилия, телефон, email,
   примечание) — было: серый фон по умолчанию Storefront/WooCommerce без
   рамки (looked disabled), теперь белое поле с тонкой рамкой в цвет темы и
   надписанной сверху меткой, как в остальных формах сайта. */
.woocommerce-billing-fields__field-wrapper label,
.woocommerce-additional-fields__field-wrapper label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 7px;
}
.woocommerce-billing-fields__field-wrapper .required,
.woocommerce-additional-fields__field-wrapper .required {
	color: var(--sale);
	text-decoration: none;
}
.woocommerce-billing-fields__field-wrapper .input-text,
.woocommerce-billing-fields__field-wrapper select,
.woocommerce-additional-fields__field-wrapper .input-text,
.woocommerce-additional-fields__field-wrapper textarea {
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink);
	transition: border-color 0.15s;
}
.woocommerce-billing-fields__field-wrapper .input-text:focus,
.woocommerce-billing-fields__field-wrapper select:focus,
.woocommerce-additional-fields__field-wrapper .input-text:focus,
.woocommerce-additional-fields__field-wrapper textarea:focus {
	background: var(--surface);
	border-color: var(--ink);
	outline: none;
	box-shadow: none;
}
.woocommerce-additional-fields__field-wrapper textarea {
	resize: vertical;
	min-height: 64px;
}
.enslaver-shipping-table {
	width: 100%;
	margin: 0;
	border: none;
	background: none;
}
.enslaver-shipping-table th {
	display: none;
}
.enslaver-shipping-table td {
	width: 100%;
	padding: 0;
	border: none;
	background: none;
}
/* Способы доставки — единый прямоугольник, разделённый на равные сегменты
   (курьер / ПВЗ): ul — grid с общей рамкой, li — display:contents (сам не
   рисует бокс, его дети становятся элементами той же сетки), label — сам
   сегмент. Так .open-pvz-btn/.cdek-office-info плагина СДЭК (печатаются
   ПОСЛЕ label внутри того же li, разметка плагина, здесь недоступна) можно
   растянуть на всю ширину отдельными строками снизу, не трогая их DOM.
   Radio-инпут визуально скрыт, но кликабелен через <label for="…">. */
.enslaver-shipping-table ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	/* Фиксированные 2 колонки, а не auto-fit: с auto-fit при малом числе
	   вариантов (сейчас их ровно 2 — курьер/ПВЗ) грид создал бы лишние
	   пустые колонки-треки на широком экране вместо ровно двух половин.
	   Если тарифов станет больше двух, третий и далее просто перенесутся
	   на следующую строку той же сетки. */
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--line);
}
.enslaver-shipping-table ul#shipping_method li {
	display: contents;
}
.enslaver-shipping-table ul#shipping_method input[type="radio"] {
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	opacity: 0;
}
.enslaver-shipping-table ul#shipping_method label {
	grid-row: 1;
	/* margin:0 обязателен: без явного сброса браузер считает label дочерним
	   элементом инпута с margin-right:.334em из Storefront (ul#shipping_method
	   input{margin-right:...}) — на practике это сдвигало саму подсветку
	   выбранного сегмента вправо на ~5-6px, и рамка не доходила до левого
	   края блока. */
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px 16px 14px;
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s;
}
.enslaver-shipping-table ul#shipping_method label .woocommerce-Price-amount {
	display: block;
	margin-top: 10px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.enslaver-shipping-table ul#shipping_method li:not(:last-child) label {
	border-right: 1px solid var(--line);
}
.enslaver-shipping-table ul#shipping_method li:has(input:checked) label {
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px var(--ink);
}
/* Раньше кнопка и адрес пункта стояли В ОДНОЙ ячейке (grid-row:2 у обоих) —
   грид разрешает элементам перекрываться, и непрозрачная чёрная кнопка
   («Выбрать ПВЗ», background: var(--ink)) полностью закрывала адрес под
   собой. Разводим по отдельным строкам: сначала адрес (если пункт уже
   выбран — плагин печатает .cdek-office-info только в этом случае), кнопка
   всегда следующей строкой под ним. Когда пункт ещё не выбран,
   .cdek-office-info в DOM просто нет — пустая строка 2 не занимает места
   (авто-высота грида), кнопка съезжает туда сама. */
.enslaver-shipping-table ul#shipping_method .cdek-office-info {
	grid-column: 1 / -1;
	grid-row: 2;
	/* margin-top:0 и border-radius:0 перебивают родные стили плагина СДЭК
	   (cdek-checkout-map.css: .cdek-office-info{margin-top:7px;border-radius:6px})
	   — без этого плашка адреса физически не примыкает к цене (7px зазора,
	   сквозь который виден фон страницы) и выглядит отдельной скруглённой
	   фигурой, а не продолжением рамки выбранного тарифа. */
	margin-top: 0;
	border-radius: 0;
	padding: 14px 16px;
	border-top: 1px solid var(--line);
	font-size: 13.5px;
}
/* Пока выбранный тариф — «до ПВЗ», чёрная рамка-подсветка выбранного сегмента
   (li:has(input:checked) label выше) обрывалась сразу под ценой — серая
   плашка с адресом пункта под ней визуально «плавала» отдельно, без рамки.
   Продолжаем ту же рамку вниз по адресной плашке: левая/правая/нижняя грани —
   box-shadow (как и у label, не border — не влияет на box-sizing и высоту),
   верхняя грань — перекрашиваем уже существующий border-top в тот же цвет,
   чтобы стык с нижним краем label не читался как двойная линия разных
   оттенков. */
.enslaver-shipping-table ul#shipping_method li:has(input:checked) .cdek-office-info {
	border-top-color: var(--ink);
	box-shadow: inset 1px 0 0 var(--ink), inset -1px 0 0 var(--ink), inset 0 -1px 0 var(--ink);
}
/* Кнопка «Выбрать ПВЗ» (плагин СДЭК) — родная разметка плагина рисует
   зелёную кнопку своими стилями (cdek-checkout-map.css:
   .open-pvz-btn{background-color:#2ea44f;border-radius:6px;...}) прямо на
   div.open-pvz-btn, а не на вложенной <a> — прежний стиль трогал только
   ссылку и не перебивал фон/рамку/скругление самого блока. Полностью
   сбрасываем и оформляем как обычную кнопку сайта (см. .woocommerce a.button
   в начале файла). grid-row:3 — строкой НИЖЕ .cdek-office-info (выше), не
   поверх неё. */
.enslaver-shipping-table ul#shipping_method .open-pvz-btn {
	grid-column: 1 / -1;
	grid-row: 3;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 15px 16px;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.enslaver-shipping-table ul#shipping_method .open-pvz-btn:hover {
	background-color: transparent;
}
.enslaver-shipping-table ul#shipping_method .open-pvz-btn a {
	display: block;
	color: var(--bg);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease;
}
.enslaver-shipping-table ul#shipping_method .open-pvz-btn:hover a {
	color: var(--ink);
}
/* Звёздочка «выбор пункта обязателен» — вставляется JS-ом
   (assets/checkout-shipping.js) только пока выбран тариф со складской
   доставкой (тогда и появляется сам .open-pvz-btn, см. плагин СДЭК). */
.enslaver-shipping-table ul#shipping_method .open-pvz-btn .required {
	color: var(--sale);
	margin-left: 3px;
}
/* Итог заказа — крупно и явно, над кнопкой «Оплатить заказ» */
.enslaver-review-grand-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
}
.enslaver-grand-total-amount {
	font-size: 22px;
	font-weight: 700;
	white-space: nowrap;
}
.enslaver-payment-total {
	padding: 14px 0 18px;
	margin-top: 4px;
	border-top: 1px solid var(--line);
}
/* margin-top НЕ ставим (было 18px): родитель — штатный WooCommerce
   <p class="form-row place-order"> с непустым padding (22.65px со всех
   сторон), margin ребёнка сквозь такой padding не схлопывается, а
   складывается с ним — верхний отступ блока итогов оказывался 22.65+18=
   40.65px против чистых 22.65px снизу под текстом о персональных данных
   (у него margin-bottom:0). Без своего margin-top верхний и нижний отступы
   внутри серого блока совпадают.
   padding-top тоже обнулён: класс .enslaver-review-lines (общий с блоком
   «Ваш заказ» выше) сам несёт padding:12px 0 4px — это ВТОРОЙ источник той
   же асимметрии, невидимый по границе элемента (граница после margin:0
   сходится верно), но видимый по факту — текст «Товары» отрисовывается на
   12px ниже границы блока, а «политика конфиденциальности» ничем не
   отделена от нижнего края снаружи. Итого без этой правки было 22.65+12=
   34.65px сверху против 22.65px снизу. */
.enslaver-payment-lines {
	margin-top: 0;
	padding-top: 0;
}
/* Текст о персональных данных — под кнопкой, мельче и приглушённо */
.enslaver-checkout-payment-wrap .woocommerce-privacy-policy-text {
	margin: 16px 0 0;
}
.enslaver-checkout-payment-wrap .woocommerce-privacy-policy-text p {
	margin-bottom: 0;
	font-size: 13px;
	color: var(--ink-muted);
}
/* На широких экранах Storefront сам разводит #order_review_heading/
   #order_review и #customer_details float-ами в две колонки (сайдбар
   справа от формы) — так «Ваш заказ» оказывается СБОКУ от «Доставки», а не
   НАД ней. Отменяем эти float-ы: блок «Ваш заказ» и так уже первый в DOM
   (form-checkout.php), поэтому без float-ов он просто встаёт на всю ширину
   над формой. */
@media (min-width: 769px) {
	#order_review_heading,
	#order_review,
	#customer_details {
		float: none;
		width: 100%;
		clear: both;
	}
}

/* Оплата — внизу формы на всю ширину. Оформление — заметная карточка:
   заголовок «Оплата», способ оплаты белой плашкой с рамкой на сером фоне
   (в тон блоку «Способ доставки»), подпись жирнее, рядом пиктограмма
   банковской карты и логотипы МИР/СБП (inc/checkout-payment.php). */
.enslaver-checkout-payment-wrap {
	/* margin-top раньше был 36px — теперь отступ над заголовком «Оплата»
	   даёт сам заголовок (общее правило центрирования выше), а не обёртка. */
	clear: both;
}
/* Размер не задаём — заголовок должен совпадать с «Доставка», а тот
   рендерится стандартным h3 темы (Cormorant ~26px). Отступы — в общем
   правиле центрирования заголовков выше. */
/* Отступы вокруг белой карточки — на самой карточке (li), а не на ul:
   Storefront зануляет padding списка с !important
   (#payment .payment_methods { padding: 0 !important }). Левый отступ
   карточки Storefront тоже зануляет своим #payment .payment_methods li
   {margin-left:0} — у него есть ID в селекторе, специфичнее наших двух
   классов, побеждает независимо от порядка подключения файлов. Раз слева
   всё равно будет 0 — делаем и margin-right:0, чтобы карточка была той же
   ширины, что «Ваш заказ»/поля формы/итоги, а не уже их на 18px. */
/* background/border/padding-bottom с !important — Storefront и ядро WooCommerce
   перебивают наши классы правилами с ID в селекторе (специфичнее любого класса):
   - фон: инлайновый <style> ядра WC в <head>
     (#payment .payment_methods > li:not(.woocommerce-notice){background:#f5f5f5});
   - нижняя грань рамки И padding-bottom обнуляются ОДНИМ правилом Storefront
     #payment .payment_methods li:last-child:not(.woocommerce-notice)
     {padding-bottom:0; border-bottom:0} — наш способ оплаты единственный
     (=last-child). border перебит через border:1px solid !important выше,
     но padding-bottom отдельно не был указан — карточка оставалась с 20px
     сверху и 0 снизу, контент прижимался к нижнему краю. */
.enslaver-checkout-payment-wrap li.wc_payment_method {
	background: var(--surface) !important;
	border: 1px solid var(--line) !important;
	border-radius: 0;
	margin: 16px 0;
	padding: 20px;
	padding-bottom: 20px !important;
	transition: border-color 0.15s;
}
/* Способ выбран — это должно ЧИТАТЬСЯ (способ один и всегда отмечен, но без
   явного сигнала непонятно, что он выбран): чернильная рамка + залитый
   кружок слева с галочкой ВМЕСТО пиктограммы карты (см. .enslaver-pay-icon
   ниже). Тот же приём, что у выбранного сегмента доставки выше
   (li:has(input:checked)). */
.enslaver-checkout-payment-wrap li.wc_payment_method:has(input:checked) {
	border-color: var(--ink) !important;
	box-shadow: inset 0 0 0 1px var(--ink);
}
/* Штатная точка-радио WooCommerce (label::before, глиф Font Awesome) не
   нужна — «выбранность» показывают рамка и галочка справа, а точка перед
   текстом только шумела бы. Селектор повторяет специфичность правила
   icons.css Storefront (#payment .payment_methods > .wc_payment_method >
   label::before — 1 ID + 2 класса), плюс !important: у equal-specificity
   правила порядок печати непредсказуем (родительский icons.css и наш файл),
   а тут дешевле не гадать. */
#payment .payment_methods > .wc_payment_method > label::before {
	display: none !important;
	content: none !important;
}
/* Иконка карты слева в кружке, текст, логотипы платёжных систем — одной
   гибкой строкой; на узком экране переносятся, каждый начинает со своей
   строки. DOM-порядок из inc/checkout-payment.php — текст, потом иконка,
   потом логотипы (WooCommerce печатает HTML шлюза ПОСЛЕ текста метки,
   переставить в разметке нельзя) — визуальный порядок «иконка → текст →
   логотипы» держится на order. */
.enslaver-checkout-payment-wrap .wc_payment_method > label {
	/* display/padding — у Storefront #payment .payment_methods li label
	   {display:block;padding:1.41575em} тоже с ID, тоже побеждает без
	   !important (тот же паттерн, что и background/margin-left выше). */
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 16px;
	row-gap: 10px;
	padding: 0 !important;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
}
.enslaver-pay-icon {
	order: -1;
	flex: 0 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--line);
}
.enslaver-pay-icon img {
	width: 18px;
	height: auto;
}
.enslaver-pay-logos {
	order: 1;
	flex: 0 0 auto;
}
/* Способ выбран (на практике — всегда): кружок с пиктограммой карты
   заливается чернильным цветом, картинка карты прячется, а на её месте
   через ::after встаёт белая галочка. Кружок и так стоит первым в строке
   (order:-1 выше), поэтому «способ выбран» читается сразу, без отдельного
   значка сбоку — раньше галочка дублировала эту иконку отдельным кружком
   у правого края label, теперь она встроена в ту же пиктограмму. */
.enslaver-checkout-payment-wrap li.wc_payment_method:has(input:checked) .enslaver-pay-icon {
	background: var(--ink);
	border-color: var(--ink);
}
.enslaver-checkout-payment-wrap li.wc_payment_method:has(input:checked) .enslaver-pay-icon img {
	visibility: hidden;
}
.enslaver-checkout-payment-wrap li.wc_payment_method:has(input:checked) .enslaver-pay-icon::after {
	content: "✓";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bg);
	font-size: 15px;
	line-height: 1;
}
@media (max-width: 600px) {
	.enslaver-review-order {
		padding: 2px 16px 16px;
	}
	.enslaver-checkout-item-thumb {
		flex-basis: 56px;
	}
}
.enslaver-checkout-qty button {
	margin: 0;
	padding: 0;
	border-radius: 0;
}
.enslaver-qty-minus,
.enslaver-qty-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.enslaver-qty-minus:not(:disabled):hover,
.enslaver-qty-plus:not(:disabled):hover {
	border-color: var(--ink);
}
.enslaver-checkout-qty button:disabled {
	opacity: 0.35;
	cursor: default;
}
.enslaver-qty-count {
	min-width: 24px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}
.enslaver-qty-stock-msg {
	display: block;
	font-size: 12px;
	color: #d32f2f;
	text-align: right;
	max-width: 200px;
}
.enslaver-qty-stock-msg:empty {
	display: none;
}
.enslaver-review-item-controls .enslaver-qty-remove {
	/* padding:0 обязателен: браузерный default-паддинг у <button> (у Chrome/
	   Safari не 0) не даёт тексту дойти до истинного правого края кнопки —
	   align-items:flex-end родителя выравнивает САМ БОКС кнопки по правому
	   краю колонки, а text-align:right внутри бокса с паддингом всё равно
	   оставляет зазор. Без этого «УБРАТЬ» выглядело чуть левее цены/степпера
	   над ним, хотя формально уже было text-align:right. */
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ink-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-align: right;
	cursor: pointer;
}
.enslaver-review-item-controls .enslaver-qty-remove:hover {
	color: var(--ink);
}
/* Пока летит AJAX смены количества (до штатной блокировки update_checkout) —
   приглушаем управление и не даём накликать повторно. */
.woocommerce-checkout-review-order-table.enslaver-qty-busy .enslaver-review-item-controls {
	opacity: 0.5;
	pointer-events: none;
}

/* Логотипы платёжных систем (МИР, СБП) у способа оплаты на чекауте —
   см. inc/checkout-payment.php. Позиция внутри строки (order, flex-shrink) —
   в правиле .enslaver-pay-logos рядом с .enslaver-pay-icon выше по файлу. */
.enslaver-pay-logos {
	display: flex;
	align-items: center;
	gap: 14px;
}
.enslaver-pay-logos img {
	display: block;
	height: 22px;
	width: auto;
}
/* Знак СБП — вертикальной пропорции, на одной высоте с широким «МИР»
   выглядит вдвое мельче; выравниваем на глаз, а не по пикселям. */
.enslaver-pay-logos img[alt="СБП"] {
	height: 30px;
}

/* Гость: форма входа — узкой колонкой по центру */
.woocommerce-account:not(.logged-in) .entry-content > .woocommerce {
	max-width: 420px;
	margin: 0 auto;
}
.woocommerce-account:not(.logged-in) form.woocommerce-form-login {
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

@media (max-width: 768px) {
	/* На телефоне колонки не помещаются рядом: меню — горизонтальной
	   строкой с переносом, содержимое под ним. */
	.woocommerce-account.logged-in .entry-content > .woocommerce {
		display: block;
	}
	.woocommerce-MyAccount-navigation {
		margin-bottom: 30px;
	}
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 22px;
	}
	.woocommerce-MyAccount-navigation li {
		margin: 0;
	}
}

/* ---------- Форма обратной связи (страница «Контакты») ---------- */
.enslaver-contact-form {
	max-width: 680px;
	margin-top: 8px;
}
.enslaver-contact-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.enslaver-contact-form input[type="text"],
.enslaver-contact-form input[type="email"],
.enslaver-contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
}
.enslaver-contact-form textarea {
	resize: vertical;
}
/* Honeypot-поле прячем именно отступом за экран, а не display:none —
   примитивные боты пропускают невидимые через display поля, а поле,
   «видимое» для DOM, заполняют охотнее. */
.enslaver-contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.enslaver-contact-form__notice {
	padding: 14px 18px;
	border: 1px solid var(--line);
	background: var(--surface-2);
}
.enslaver-contact-form__notice--error {
	border-color: var(--sale);
	color: var(--sale);
}
.enslaver-contact-form__req {
	color: var(--sale);
}
.enslaver-contact-form__note {
	font-size: 13px;
	color: var(--ink-muted);
}
.enslaver-contact-form input[type="file"] {
	width: 100%;
	padding: 10px 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink-muted);
}
.enslaver-contact-form input[type="file"]::file-selector-button {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 9px 16px;
	margin-right: 14px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.enslaver-contact-form input[type="file"]::file-selector-button:hover {
	background: var(--ink);
	color: var(--bg);
}
.enslaver-contact-form__hint {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--ink-muted);
}
/* При работающем JS нативную подпись «файлов: N» прячем — имена выбранных
   файлов показывает наш список ниже. Кнопке выбора цвет задан отдельно,
   поэтому прозрачным становится только текст подписи. */
.enslaver-contact-form input[type="file"].enslaver-contact-form__input--js {
	color: transparent;
}
.enslaver-contact-form__files {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}
.enslaver-contact-form__files li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.enslaver-contact-form__file-name {
	/* Страховка к JS-сокращению имени: если и укороченное не влезло,
	   браузер дорежет многоточием, без переноса на вторую строку. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--ink);
}
/* Storefront глобально красит фон любых <button> — держим крестик
   прозрачным и в покое, и на hover. */
.enslaver-contact-form__file-remove,
.enslaver-contact-form__file-remove:hover,
.enslaver-contact-form__file-remove:focus {
	background: transparent;
	border: none;
	padding: 0 6px;
	margin-left: auto;
	color: var(--sale);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.enslaver-contact-form__file-remove:hover {
	color: var(--accent);
}

/* ---------- Город покупателя (inc/geo-city.php, assets/geo-city.js) ---------- */

/* Кнопка города в шапке */
.enslaver-city-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
	/* Не 1 — иначе строка города ниже и площе, чем у .enslaver-nav-links a
	   рядом (те наследуют line-height:1.5 от body, город раньше переопределял
	   его на 1, отсюда видимое несовпадение по высоте с «Каталог»/«О нас»). */
	line-height: 1.5;
}
.enslaver-city-toggle__pin {
	width: 14px;
	height: 14px;
	flex: none;
	fill: currentColor;
}
.enslaver-city-toggle__name {
	/* Подчёркивание — псевдоэлементом с абсолютным позиционированием, а не
	   padding-bottom+border-bottom на самом элементе: этот span — flex-ребёнок
	   .enslaver-city-toggle, и padding/border у flex-детей ВХОДЯТ в высоту
	   (в отличие от .enslaver-nav-links a — там <a> не сам flex-элемент, а
	   вложен в li, поэтому его padding/border на высоту не влияют). Раньше
	   из-за этого блок города был на 4px выше line-height и «гулял» по
	   вертикали относительно «Каталог»/«О нас» рядом (box-sizing тут не
	   помогает — он не действует без явного height). */
	position: relative;
}
.enslaver-city-toggle__name::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background-color: transparent;
	transition: background-color 0.2s ease;
}
/* Storefront/WP core красят :hover у любых <button> в серый фон — та же
   грабля, что и у .enslaver-search-toggle выше, город тоже <button>. */
.enslaver-city-toggle:hover {
	background: none;
}
.enslaver-city-toggle:hover .enslaver-city-toggle__name::after {
	background-color: var(--ink);
}
/* Пока город не выбран — приглушённая надпись «Выберите город». */
.enslaver-city-toggle:not(.is-set) {
	color: var(--ink-muted);
}

/* Плашка первого захода — «тост» снизу по центру */
.enslaver-geo-banner {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 1000;
	transform: translate(-50%, 16px);
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: calc(100vw - 32px);
	padding: 14px 16px 14px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: 0 8px 30px rgba(33, 29, 25, 0.14);
}
.enslaver-geo-banner.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}
.enslaver-geo-banner__text {
	font-size: 14px;
	color: var(--ink);
}
.enslaver-geo-banner__text b {
	font-weight: 600;
}
.enslaver-geo-banner__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}
.enslaver-geo-banner__btn {
	font-family: var(--font-body);
	font-size: 13px;
	white-space: nowrap;
	padding: 8px 14px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.enslaver-geo-banner__btn:hover {
	border-color: var(--ink);
}
.enslaver-geo-banner__btn--primary {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}
.enslaver-geo-banner__btn--primary:hover {
	background: var(--accent);
	border-color: var(--accent);
}
.enslaver-geo-banner__close {
	flex: none;
	background: none;
	border: none;
	padding: 0 2px;
	color: var(--ink-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.enslaver-geo-banner__close:hover {
	color: var(--ink);
}

/* Окно выбора города */
body.enslaver-geo-open {
	overflow: hidden;
}
.enslaver-geo-modal {
	position: fixed;
	inset: 0;
	z-index: 1001;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 16px 16px;
	background: rgba(33, 29, 25, 0.45);
}
.enslaver-geo-modal__box {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: 0 12px 40px rgba(33, 29, 25, 0.2);
	padding: 24px;
}
.enslaver-geo-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	padding: 4px;
	color: var(--ink-muted);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.enslaver-geo-modal__close:hover {
	color: var(--ink);
}
.enslaver-geo-modal__title {
	margin: 0 0 14px;
	font-family: var(--font-display);
	font-size: 24px;
	color: var(--ink);
}
.enslaver-geo-modal__input {
	width: 100%;
	padding: 11px 12px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line);
}
.enslaver-geo-modal__input:focus {
	outline: none;
	border-color: var(--ink);
}
.enslaver-geo-modal__list {
	margin-top: 8px;
	max-height: 320px;
	overflow-y: auto;
}
.enslaver-geo-modal__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 1px solid var(--line);
	padding: 11px 4px;
	cursor: pointer;
}
.enslaver-geo-modal__item:last-child {
	border-bottom: none;
}
.enslaver-geo-modal__item:hover {
	background: var(--surface-2);
}
.enslaver-geo-modal__item-city {
	font-size: 15px;
	color: var(--ink);
}
.enslaver-geo-modal__item-region {
	font-size: 12.5px;
	color: var(--ink-muted);
}

@media (max-width: 600px) {
	.enslaver-geo-banner {
		flex-wrap: wrap;
		left: 12px;
		right: 12px;
		bottom: 12px;
		transform: translateY(16px);
		max-width: none;
	}
	.enslaver-geo-banner.is-visible {
		transform: translateY(0);
	}
	.enslaver-geo-banner__actions {
		flex: 1 1 100%;
	}
	.enslaver-geo-banner__btn {
		flex: 1 1 auto;
	}
}

/* ---------- Страница «Доставка и оплата» (page-dostavka-i-oplata.php) ----------
   Сайт full-bleed (.col-full без предела ширины), но текстовая сервисная
   страница на всю ширину монитора нечитаема — ограничиваем колонку, как
   сделано у чекаута. CTA-полоса наоборот пробивается на весь экран тем же
   приёмом 100vw, что .enslaver-newsletter. */
.enslaver-dp {
	max-width: 1140px;
	margin: 0 auto;
}

.enslaver-dp-intro {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
	padding: 24px 0 10px;
}
.enslaver-dp-intro h1 {
	font-size: 52px;
	line-height: 1.08;
	margin: 14px 0 18px;
}
.enslaver-dp-lede {
	font-size: 17px;
	color: var(--ink-muted);
	max-width: 52ch;
	margin: 0 0 30px;
}
.enslaver-dp-intro-frame {
	background: var(--surface-2);
	overflow: hidden;
}
.enslaver-dp-intro-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3/2;
	display: block;
}

.enslaver-dp-facts {
	display: grid;
	gap: 14px;
	border-top: 1px solid var(--line);
	padding-top: 26px;
}
.enslaver-dp-fact {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.enslaver-dp-fact svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--accent);
}
.enslaver-dp-fact b {
	display: block;
	font-weight: 600;
	font-size: 15px;
}
.enslaver-dp-fact span {
	font-size: 14px;
	color: var(--ink-muted);
}

.enslaver-dp-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.enslaver-dp-step {
	background: var(--bg);
	padding: 26px 22px 30px;
}
.enslaver-dp-step-num {
	font-family: var(--font-display);
	font-size: 40px;
	line-height: 1;
	color: var(--accent);
	display: block;
	margin-bottom: 14px;
}
.enslaver-dp-step h3 {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 8px;
}
.enslaver-dp-step p {
	font-size: 14px;
	color: var(--ink-muted);
	margin: 0;
}

.enslaver-dp-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.enslaver-dp-card {
	border: 1px solid var(--line);
	padding: 30px 30px 26px;
	background: var(--bg);
}
.enslaver-dp-card-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--surface-2);
	color: var(--ink-muted);
	padding: 5px 10px;
	margin-bottom: 16px;
}
.enslaver-dp-card h3 {
	font-size: 25px;
	margin: 0 0 6px;
}
.enslaver-dp-card-sub {
	font-size: 14px;
	color: var(--ink-muted);
	margin: 0 0 20px;
}
.enslaver-dp-card-rows {
	border-top: 1px solid var(--line);
	margin: 0;
}
.enslaver-dp-card-row {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.enslaver-dp-card-row dt {
	color: var(--ink-muted);
	margin: 0;
	font-weight: 400;
}
.enslaver-dp-card-row dd {
	margin: 0;
	text-align: right;
	font-weight: 500;
	max-width: 60%;
}
.enslaver-dp-card ul {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
}
.enslaver-dp-card ul li {
	font-size: 14px;
	color: var(--ink-muted);
	padding-left: 18px;
	position: relative;
}
.enslaver-dp-card ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 1px;
	background: var(--accent);
}

.enslaver-dp-note {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: var(--surface-2);
	padding: 24px 28px;
	margin-top: 24px;
}
.enslaver-dp-note svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--accent);
}
.enslaver-dp-note p {
	margin: 0;
	font-size: 14.5px;
}
.enslaver-dp-note p + p {
	margin-top: 8px;
}
.enslaver-dp-note b {
	font-weight: 600;
}

.enslaver-dp-pay-logos {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 20px;
}
.enslaver-dp-pay-chip {
	border: 1px solid var(--line);
	padding: 8px 14px;
	height: 40px;
	display: flex;
	align-items: center;
}
.enslaver-dp-pay-chip img {
	height: 18px;
	width: auto;
	display: block;
}

.enslaver-dp-faq {
	max-width: 760px;
}
.enslaver-dp-faq details {
	border-bottom: 1px solid var(--line);
}
.enslaver-dp-faq details:first-of-type {
	border-top: 1px solid var(--line);
}
.enslaver-dp-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 20px 36px 20px 0;
	font-size: 16px;
	font-weight: 500;
	position: relative;
}
.enslaver-dp-faq summary::-webkit-details-marker {
	display: none;
}
.enslaver-dp-faq summary::after {
	content: '+';
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-display);
	font-size: 26px;
	color: var(--ink-muted);
}
.enslaver-dp-faq details[open] summary::after {
	content: '−';
	color: var(--accent);
}
.enslaver-dp-faq details p {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--ink-muted);
	max-width: 64ch;
}

.enslaver-dp-cta {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--surface-2);
	text-align: center;
	padding: 64px 24px;
	margin-top: 40px;
}
.enslaver-dp-cta h2 {
	font-size: 34px;
	margin: 12px 0;
}
.enslaver-dp-cta p {
	color: var(--ink-muted);
	margin: 0 auto 28px;
	max-width: 46ch;
}

@media (max-width: 860px) {
	.enslaver-dp-intro {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.enslaver-dp-intro h1 {
		font-size: 38px;
	}
	.enslaver-dp-steps {
		grid-template-columns: 1fr 1fr;
	}
	.enslaver-dp-cards {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.enslaver-dp-steps {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Страница 404 (404.php)
   ========================================================================== */

.enslaver-nf {
	margin: 48px 0 84px;
	text-align: center;
}
.enslaver-nf-code {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 0.9;
	font-size: clamp(120px, 20vw, 216px);
	letter-spacing: 0.04em;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.enslaver-nf-code span {
	color: var(--accent);
	font-style: italic;
}
.enslaver-nf h1 {
	font-size: 38px;
	margin: 18px 0 0;
}
.enslaver-nf-copy {
	font-size: 15.5px;
	color: var(--ink-muted);
	max-width: 52ch;
	margin: 16px auto 0;
	line-height: 1.7;
}
.enslaver-nf-copy a {
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
}

.enslaver-nf-search {
	display: flex;
	gap: 0;
	max-width: 460px;
	margin: 40px auto 0;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 9px;
	text-align: left;
}
/* Storefront красит input/button своими правилами (фон, тень, отступы) —
   возвращаем полю поиска вид тонкой строки, как у формы рассылки. */
.enslaver-nf-search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink);
	outline: none;
	padding: 0 2px;
}
.enslaver-nf-search input[type="search"]::placeholder {
	color: var(--ink-muted);
}
.enslaver-nf-search button[type="submit"] {
	background: none;
	border: none;
	box-shadow: none;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	font-weight: 600;
	padding: 0 2px;
	cursor: pointer;
}
.enslaver-nf-search button[type="submit"]:hover {
	background: none;
	color: var(--accent);
}

.enslaver-nf-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	align-items: center;
	margin-top: 36px;
	flex-wrap: wrap;
}
.enslaver-btn--ghost,
.enslaver-btn.enslaver-btn--ghost {
	background-color: transparent;
	color: var(--ink);
	border-color: var(--line);
}
.enslaver-btn.enslaver-btn--ghost:hover {
	border-color: var(--ink);
	background-color: transparent;
}

.enslaver-nf-cats {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
}
.enslaver-nf-cats .eyebrow {
	display: block;
	margin-bottom: 18px;
}
.enslaver-nf-cat-row {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.enslaver-nf-cat {
	border: 1px solid var(--line);
	padding: 11px 18px;
	font-size: 13px;
	color: var(--ink);
	transition: border-color 0.2s ease;
}
.enslaver-nf-cat:hover {
	border-color: var(--ink);
}

.enslaver-nf-rescue {
	margin-top: 0;
}

@media (max-width: 660px) {
	.enslaver-nf h1 {
		font-size: 30px;
	}
	.enslaver-nf-actions .enslaver-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* ---------- Страница «Оферта» (page-oferta.php) ----------
   Юридический документ: узкая читаемая колонка, оглавление с якорями,
   реквизиты таблицей. Переиспользует контейнер .enslaver-dp и .enslaver-dp-cta. */
.enslaver-of-head {
	padding: 24px 0 8px;
	max-width: 820px;
}
.enslaver-of-head h1 {
	font-size: 52px;
	line-height: 1.08;
	margin: 14px 0 18px;
}
.enslaver-of-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 0;
	border-top: 1px solid var(--line);
	padding-top: 18px;
	font-size: 13px;
	color: var(--ink-muted);
}
.enslaver-of-meta span {
	padding-right: 14px;
	margin-right: 14px;
	border-right: 1px solid var(--line);
}
.enslaver-of-meta span:last-child {
	border-right: 0;
	padding-right: 0;
	margin-right: 0;
}

.enslaver-of-toc {
	border: 1px solid var(--line);
	padding: 26px 30px 30px;
	margin: 26px 0 10px;
	max-width: 820px;
}
.enslaver-of-toc ol {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 40px;
	counter-reset: of-toc;
}
.enslaver-of-toc li {
	counter-increment: of-toc;
	font-size: 14px;
	padding: 5px 0;
	break-inside: avoid;
}
.enslaver-of-toc li::before {
	content: counter(of-toc) '.';
	display: inline-block;
	min-width: 26px;
	color: var(--accent);
	font-family: var(--font-display);
	font-size: 16px;
}
.enslaver-of-toc a {
	text-decoration: none;
	color: var(--ink);
}
.enslaver-of-toc a:hover {
	color: var(--accent);
}

.enslaver-of-doc {
	max-width: 820px;
	padding-bottom: 10px;
}
.enslaver-of-doc h2 {
	font-size: 30px;
	margin: 46px 0 16px;
	scroll-margin-top: 90px;
}
.enslaver-of-doc p {
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 14px;
}
.enslaver-of-doc ul {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.enslaver-of-doc ul li {
	font-size: 15px;
	line-height: 1.7;
	padding-left: 18px;
	position: relative;
}
.enslaver-of-doc ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12px;
	width: 6px;
	height: 1px;
	background: var(--accent);
}
.enslaver-of-doc ul li b {
	font-weight: 600;
}
.enslaver-of-doc a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.enslaver-of-req {
	border: 1px solid var(--line);
	margin: 20px 0 0;
	padding: 8px 30px;
	background: var(--bg);
}
.enslaver-of-req > div {
	display: flex;
	gap: 24px;
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14.5px;
}
.enslaver-of-req > div:last-child {
	border-bottom: 0;
}
.enslaver-of-req dt {
	flex: 0 0 110px;
	color: var(--ink-muted);
	font-weight: 400;
	margin: 0;
}
.enslaver-of-req dd {
	margin: 0;
	font-weight: 500;
}

@media (max-width: 860px) {
	.enslaver-of-head h1 {
		font-size: 38px;
	}
	.enslaver-of-toc ol {
		columns: 1;
	}
	.enslaver-of-req > div {
		flex-direction: column;
		gap: 2px;
	}
}

/* ============================================================
   Страница «О нас» (page-o-nas.php). Переиспользует .enslaver-dp
   (контейнер 1140px), .enslaver-ritual, .eyebrow, .enslaver-btn и
   .enslaver-dp-cta (полоса на 100vw). Текст владельца, заголовков
   нет — крупные фразы набраны .enslaver-ab-lead (Cormorant).
   ============================================================ */

.enslaver-ab-intro {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
	padding: 24px 0 10px;
}
.enslaver-ab-intro h1 {
	font-size: 44px;
	line-height: 1.1;
	margin: 14px 0 18px;
	max-width: 19ch;
}
.enslaver-ab-lede {
	font-size: 17px;
	color: var(--ink-muted);
	max-width: 52ch;
}
.enslaver-ab-intro-frame {
	background: var(--surface-2);
	overflow: hidden;
}
.enslaver-ab-intro-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3/4;
}

.enslaver-ab .enslaver-ab-lead {
	font-family: var(--font-display);
	font-size: 30px;
	line-height: 1.25;
	color: var(--ink);
	max-width: 24ch;
	margin: 0 0 18px;
	text-wrap: balance;
}

/* Зеркальная секция: текст слева, фото справа */
.enslaver-ab-flip {
	grid-template-columns: 1.15fr 0.85fr;
}
.enslaver-ab-flip .enslaver-ritual-frame {
	order: 2;
}

/* Полоса-манифест на всю ширину (приём .enslaver-dp-cta) */
.enslaver-ab-strip {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	/* Только longhand-отступы: сокращённый margin затёр бы -50vw (грабля первого деплоя) */
	margin-top: 80px;
	margin-bottom: 80px;
	margin-left: -50vw;
	margin-right: -50vw;
	background: var(--surface-2);
	text-align: center;
	padding: 74px 24px;
}
.enslaver-ab-strip .enslaver-ab-lead,
.enslaver-ab-name .enslaver-ab-lead {
	font-size: 34px;
	max-width: 28ch;
}
.enslaver-ab-strip .enslaver-ab-lead {
	margin: 0 auto 18px;
}
.enslaver-ab-strip p:not(.enslaver-ab-lead) {
	color: var(--ink-muted);
	margin: 0 auto;
	max-width: 56ch;
}

/* Текстовая секция «покорительница» */
.enslaver-ab-name {
	max-width: 820px;
	margin: 80px auto;
	padding: 0 24px;
}
.enslaver-ab-name .enslaver-ab-lead {
	line-height: 1.2;
	margin: 0 0 20px;
}
.enslaver-ab-name p:not(.enslaver-ab-lead) {
	font-size: 16px;
	color: var(--ink-muted);
	max-width: 60ch;
	margin: 0 0 16px;
}

/* CTA: логотип-надпись + кнопка (фон и 100vw даёт .enslaver-dp-cta) */
.enslaver-ab-cta-mark {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: 0.32em;
	padding-left: 0.32em;
	margin-bottom: 26px;
	display: block;
	color: var(--ink);
}
.enslaver-ab-cta p {
	margin-bottom: 0;
}

@media (max-width: 860px) {
	.enslaver-ab-intro {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-top: 16px;
	}
	.enslaver-ab-intro h1 {
		font-size: 32px;
	}
	.enslaver-ab-flip {
		grid-template-columns: 1fr;
	}
	.enslaver-ab-flip .enslaver-ritual-frame {
		order: -1;
	}
	/* Секция с синим халатом: на мобильном текст НАД фото
	   (перебивает общее правило .enslaver-ritual-frame { order:-1 }) */
	.enslaver-ab .enslaver-ritual:not(.enslaver-ab-flip) .enslaver-ritual-frame {
		order: 2;
	}
	.enslaver-ab .enslaver-ab-lead {
		font-size: 26px;
	}
	.enslaver-ab-strip {
		padding: 54px 20px;
		margin-top: 56px;
		margin-bottom: 56px;
	}
	.enslaver-ab-strip .enslaver-ab-lead,
	.enslaver-ab-name .enslaver-ab-lead {
		font-size: 28px;
	}
	.enslaver-ab-name {
		margin: 56px auto;
	}
}

/* ============================================================
   Блог: лента (/blog/) и статья — паттерн инфостраниц
   ============================================================ */
.enslaver-blog-intro {
	max-width: 640px;
	margin: 48px 0 56px;
}
.enslaver-blog-intro h1 {
	font-size: 44px;
	margin: 10px 0 16px;
}
.enslaver-blog-lede {
	color: var(--ink-muted);
	line-height: 1.7;
}
.enslaver-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 28px;
}
.enslaver-post-card a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.enslaver-post-frame {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--surface-2);
	margin-bottom: 16px;
}
.enslaver-post-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.enslaver-post-card a:hover .enslaver-post-frame img {
	transform: scale(1.03);
}
.enslaver-post-card time {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.enslaver-post-card h2 {
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.25;
	margin: 8px 0 10px;
}
.enslaver-post-card p {
	color: var(--ink-muted);
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0 0 12px;
}
.enslaver-post-more {
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
}
.enslaver-blog-empty {
	color: var(--ink-muted);
	max-width: 46em;
	margin-bottom: 24px;
}
.enslaver-blog-pagination {
	margin: 56px 0 24px;
}
.enslaver-blog-pagination .nav-links {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.enslaver-blog-pagination .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
}
.enslaver-blog-pagination .page-numbers.current {
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}

/* --- Статья --- */
.enslaver-article-head {
	max-width: 720px;
	margin: 48px auto 28px;
	text-align: center;
}
.enslaver-article-head h1 {
	font-size: 42px;
	line-height: 1.15;
	margin: 10px 0 14px;
}
.enslaver-article-meta {
	color: var(--ink-muted);
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	display: flex;
	gap: 10px;
	justify-content: center;
}
.enslaver-article-cover {
	max-width: 860px;
	margin: 0 auto 40px;
}
.enslaver-article-cover img {
	width: 100%;
	height: auto;
	display: block;
}
.enslaver-article-body {
	max-width: 46em;
	margin: 0 auto;
	line-height: 1.75;
}
.enslaver-article-body p {
	margin: 0 0 1.1em;
}
.enslaver-article-body h2 {
	font-family: var(--font-display);
	font-size: 28px;
	margin: 1.6em 0 0.6em;
}
.enslaver-article-body h3 {
	font-size: 19px;
	margin: 1.4em 0 0.5em;
}
.enslaver-article-body ul,
.enslaver-article-body ol {
	margin: 0 0 1.1em 1.3em;
}
.enslaver-article-body li {
	margin-bottom: 0.4em;
}
.enslaver-article-body img {
	max-width: 100%;
	height: auto;
	margin: 1.4em 0;
}
.enslaver-article-body blockquote {
	border-left: 2px solid var(--accent);
	margin: 1.4em 0;
	padding: 4px 0 4px 20px;
	color: var(--ink-muted);
	font-style: italic;
}
.enslaver-article-body a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.enslaver-article-nav {
	max-width: 46em;
	margin: 48px auto 8px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 0.9rem;
}
.enslaver-article-back {
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 13px;
}
.enslaver-article-adjacent {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	color: var(--ink-muted);
}

@media (max-width: 960px) {
	.enslaver-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.enslaver-blog-grid {
		grid-template-columns: 1fr;
	}
	.enslaver-blog-intro h1 {
		font-size: 34px;
	}
	.enslaver-article-head h1 {
		font-size: 30px;
	}
}

/* ---------- Плашка об использовании cookie (assets/cookie-notice.js) ---------- */

/* Полоса снизу во всю ширину. z-index выше плашки города (1000) и баннера
   push-подписки (9990) — она появляется первой и остальные ждут своей очереди,
   но если что-то всё же покажется одновременно, cookie-плашка остаётся
   доступной для клика. */
.enslaver-cookie-notice {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9995;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	padding: 16px 24px;
	background: var(--surface);
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 32px rgba(33, 29, 25, 0.08);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.enslaver-cookie-notice.is-visible {
	opacity: 1;
	transform: none;
}

.enslaver-cookie-notice__text {
	margin: 0;
	max-width: 760px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-muted);
}

.enslaver-cookie-notice__text a {
	color: var(--accent);
	text-decoration: underline;
}

.enslaver-cookie-notice__accept {
	flex: none;
	padding: 13px 28px;
	background: var(--ink);
	color: #fff;
	border: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.enslaver-cookie-notice__accept:hover {
	opacity: 0.85;
}

@media (max-width: 600px) {
	.enslaver-cookie-notice {
		gap: 14px;
		padding: 16px;
		text-align: left;
	}
	.enslaver-cookie-notice__text {
		font-size: 12px;
	}
	.enslaver-cookie-notice__accept {
		width: 100%;
		padding: 14px 20px;
	}
}