/*
Theme Name: WPMarkets
Theme URI: https://wpmarkets.ru/
Author: WPMarkets.Ru
Author URI: https://wpmarkets.ru/
Description: Тема маркетплейса WPMarkets.Ru — магазина тем, плагинов и готовых решений для WordPress с ИИ внутри. Лёгкая, без сборщиков и внешних зависимостей.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpmarkets
Tags: e-commerce, custom-menu, custom-logo, translation-ready, block-styles, wide-blocks

Правки визуального редактора дописываются в конец файла, в собственный
помеченный блок — содержимое темы они не трогают.
*/

/* ==========================================================================
   1. Токены
   ========================================================================== */

:root {
	--bg: #ffffff;
	--surface: #f5f6f8;
	--text: #111111;
	--muted: #6b7280;
	--accent: #2547d6;
	--accent-dark: #1c37a8;
	--accent-soft: #eef2ff;
	--accent-text: #ffffff;
	--line: #e5e7eb;
	--radius: 8px;
	--radius-lg: 16px;
	--radius-xl: 24px;

	--font-headline: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;

	--lh-tight: 1.15;
	--lh-heading: 1.25;
	--lh-body: 1.5;
	--lh-relaxed: 1.6;

	--ls-tight: -0.02em;

	/* Внешняя ширина контейнера. Полезная ширина содержимого получается
	   на два поля меньше — 1200px, по ней и выстроены все блоки: шапка,
	   первый экран, блок ИИ, сетки и подвал. */
	--container: 1240px;
	--gutter: 20px;

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
	--shadow-md: 0 10px 25px rgba(37, 71, 214, 0.08);
	--shadow-lg: 0 8px 20px rgba(37, 71, 214, 0.25);
}

/* ==========================================================================
   2. База
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: var(--lh-body);
	/* Сглаживание не трогаем. `-webkit-font-smoothing: antialiased`
	   отключает субпиксельное сглаживание, и на Windows текст становится
	   тоньше и мутнее — особенно заметно на полужирных надписях меню. */
}

img {
	max-width: 100%;
	height: auto;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-headline);
	color: var(--text);
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-tight);
	margin: 0 0 16px;
}

/* Ссылка «пропустить к содержимому» — видна только при переходе с клавиатуры. */
.wpm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--accent);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--radius) 0;
	text-decoration: none;
}

.wpm-skip-link:focus {
	left: 0;
}

.wpm-container {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* Только вертикальные отступы: сокращённая запись `padding: 48px 0`
   обнуляла бы боковые у элемента, на котором стоят оба класса разом
   (`wpm-container wpm-section`) — и содержимое прижималось к краю экрана
   на узких экранах, где поля контейнера единственное, что их создаёт. */
.wpm-section {
	padding-top: 48px;
	padding-bottom: 48px;
}

.wpm-section--tight {
	padding-top: 24px;
	padding-bottom: 24px;
}

.wpm-section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.wpm-section-head h2 {
	font-size: 28px;
	font-weight: var(--fw-bold);
	margin: 0;
}

.wpm-section-title-center {
	text-align: center;
	font-size: 28px;
	font-weight: var(--fw-bold);
	margin: 0 0 40px;
}

.wpm-muted {
	color: var(--muted);
}

/* ==========================================================================
   2.1. Появление при прокрутке
   ========================================================================== */

/* Элементы всплывают снизу, когда доезжают до экрана. Движение нарочно
   неспешное (0.9с) и с затуханием к концу — быстрое появление читается
   как рывок, а не как анимация.
   Класс ставит скрипт: если он не отработал, содержимое остаётся видимым,
   а не пропадает навсегда. */
.wpm-reveal.is-armed {
	opacity: 0;
	transform: translateY(22px);
}

.wpm-reveal.is-armed.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Тем, кто отключил анимацию в системе, ничего не двигаем: для части
   людей это причина головокружения, а не украшение. */
@media (prefers-reduced-motion: reduce) {
	.wpm-reveal.is-armed,
	.wpm-reveal.is-armed.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   3. Кнопки и ссылки
   ========================================================================== */

.wpm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 15px;
	padding: 14px 28px;
	border-radius: 12px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wpm-btn:hover {
	transform: translateY(-1px);
}

.wpm-btn--primary {
	background: var(--accent);
	color: var(--accent-text);
	box-shadow: var(--shadow-lg);
}

.wpm-btn--primary:hover {
	background: var(--accent-dark);
	color: var(--accent-text);
}

.wpm-btn--white {
	background: #fff;
	color: var(--accent);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	border-radius: 24px;
	padding: 12px 24px;
	font-size: 14px;
}

.wpm-btn--outline {
	background: transparent;
	color: var(--accent);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 8px 24px;
	font-size: 14px;
}

.wpm-btn--outline:hover {
	background: var(--accent-soft);
	color: var(--accent);
}

.wpm-link-arrow {
	color: var(--accent);
	text-decoration: none;
	font-size: 14px;
	font-weight: var(--fw-semibold);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wpm-link-arrow:hover {
	text-decoration: underline;
}

.wpm-icon {
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
	vertical-align: middle;
}

/* ==========================================================================
   4. Шапка
   ========================================================================== */

/* Страница — колонка на всю высоту окна, чтобы подвал на коротких
   страницах прижимался к низу, а не висел посреди пустого экрана. */
.wpm-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wpm-page > main {
	flex: 1 0 auto;
}

.wpm-page > .wpm-footer-outer {
	flex-shrink: 0;
}

.wpm-topbar {
	background: var(--text);
	color: #fff;
	font-size: 13px;
}

.wpm-topbar-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 9px var(--gutter);
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	justify-content: center;
}

.wpm-topbar span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	opacity: 0.92;
}

.wpm-topbar .wpm-icon {
	color: #8fa6ff;
}

/* Шапка липнет к верху: в каталоге и длинных статьях иначе приходится
   мотать наверх ради меню и корзины.
   Подложка серая, а карточка на ней белая — контраст создаёт именно
   она. С прозрачной подложкой белая карточка на белом фоне сливается,
   и шапка перестаёт читаться как отдельный слой. */
.wpm-header-holder {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 12px var(--gutter);
	background: var(--surface);
	transition: box-shadow 0.2s ease;
}

.wpm-header-holder.is-stuck {
	box-shadow: 0 6px 24px rgba(17, 17, 17, 0.07);
}

/* Ширина как у остальных блоков страницы, иначе карточка шапки шире их
   на боковые поля контейнера и края не сходятся. */
.wpm-header {
	max-width: calc(var(--container) - var(--gutter) * 2);
	margin: 0 auto;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 12px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	box-shadow: var(--shadow-sm);
	flex-wrap: wrap;
}

.wpm-header-left {
	display: flex;
	align-items: center;
	gap: 32px;
	min-width: 0;
}

.wpm-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-family: var(--font-headline);
	font-size: 21px;
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-tight);
	color: var(--text);
	line-height: 1;
	white-space: nowrap;
}

.wpm-logo-mark {
	flex-shrink: 0;
	display: block;
}

.wpm-logo-text {
	display: inline-block;
}

.wpm-logo b {
	font-weight: inherit;
	color: var(--accent);
}

.wpm-logo img {
	max-height: 36px;
	width: auto;
}

.wpm-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
	align-items: center;
}

.wpm-nav a {
	color: var(--text);
	text-decoration: none;
	font-size: 14px;
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

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

/* Текущий раздел подчёркнут: без этого в каталоге непонятно, где ты. */
.wpm-nav .current-menu-item > a,
.wpm-nav .current-menu-parent > a,
.wpm-nav .current-menu-ancestor > a,
.wpm-nav .current_page_item > a {
	color: var(--accent);
	position: relative;
}

/*
 * Подчёркивание текущего раздела рисуем через ::before, а не ::after.
 * У пункта с подменю ::after уже занят уголком, и оба правила ложились
 * на один псевдоэлемент: свойства смешивались, и вместо черты выходил
 * повёрнутый квадрат — заметный ромбик под «Плагинами».
 */
.wpm-nav .current-menu-item > a::before,
.wpm-nav .current-menu-parent > a::before,
.wpm-nav .current-menu-ancestor > a::before,
.wpm-nav .current_page_item > a::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

/* Подменю: раскрывается и по наведению, и по фокусу с клавиатуры. */
.wpm-nav li {
	position: relative;
}

/* Уголок у пунктов с подменю: без него не видно, что за пунктом что-то
   есть, и раскрытие находят случайно. */
.wpm-nav .menu-item-has-children > a,
.wpm-nav .wpm-has-mega > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.wpm-nav .menu-item-has-children > a::after,
.wpm-nav .wpm-has-mega > a::after {
	content: '';
	width: 6px;
	height: 6px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translate(-2px, -1px);
	opacity: 0.55;
	transition: transform 0.15s ease;
}

.wpm-nav .menu-item-has-children:hover > a::after,
.wpm-nav .wpm-has-mega:hover > a::after {
	transform: rotate(225deg) translate(-1px, -2px);
	opacity: 1;
}

/* Мостик между пунктом и выпадающим списком: без него курсор проходит
   зазор, наведение теряется, и меню схлопывается по дороге. */
.wpm-nav .menu-item-has-children > .sub-menu::before,
.wpm-nav .wpm-has-mega > .sub-menu::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

.wpm-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -12px;
	min-width: 234px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 8px;
	box-shadow: 0 18px 40px rgba(17, 17, 17, 0.13);
	flex-direction: column;
	/* Пункты во всю ширину панели. Базовое правило меню центрирует их
	   (`align-items: center`), и в вертикальном списке это давало разную
	   ширину строк и рваный левый край. */
	align-items: stretch;
	justify-content: flex-start;
	gap: 2px;
	z-index: 50;
}

.wpm-nav .sub-menu li {
	display: block;
	width: 100%;
}

.wpm-nav li:hover > .sub-menu,
.wpm-nav li:focus-within > .sub-menu {
	display: flex;
}

.wpm-nav .sub-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: 9px;
	margin: 0;
	text-align: left;
}

/* Пункт со значком: иконка и текст в одну строку, значок не сжимается
   при длинном названии. */
.wpm-nav .sub-menu .wpm-submenu-icon > a {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

.wpm-nav .sub-menu .wpm-submenu-icon > a .wpm-icon {
	flex-shrink: 0;
	color: var(--accent);
	opacity: 0.85;
}

.wpm-nav .sub-menu .wpm-submenu-icon > a:hover .wpm-icon {
	opacity: 1;
}

.wpm-nav .sub-menu a:hover {
	background: var(--accent-soft);
	color: var(--accent);
}

/* --- Витрина за пунктом «Плагины» --- */

/* Панель привязана к левому краю пункта, а не отцентрована по нему:
   «Плагины» стоит в начале меню, и центрированная панель шириной 760px
   уезжала за левый край экрана. */
.wpm-nav .wpm-mega {
	left: -12px;
	width: min(760px, calc(100vw - 48px));
	padding: 0;
	border-radius: 16px;
	overflow: hidden;
}

/* Все правила ниже идут с префиксом `.wpm-nav` намеренно: базовые
   `.wpm-nav ul` (горизонтальный флекс с `gap: 20px` и центрированием) и
   `.wpm-nav .sub-menu a` специфичнее одиночных классов и перебивали их —
   категории выстраивались по центру с промежутками в 20px, а карточки
   товаров разъезжались по вертикали. */
.wpm-nav .wpm-mega-inner {
	display: grid;
	grid-template-columns: 236px 1fr;
	gap: 0;
	align-items: stretch;
}

.wpm-nav .wpm-mega-cats {
	list-style: none;
	margin: 0;
	padding: 12px 8px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 1px;
	background: var(--surface);
	border-right: 1px solid var(--line);
}

.wpm-nav .wpm-mega-cats li {
	display: block;
}

.wpm-nav .wpm-mega-cats a {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	padding: 9px 12px;
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: var(--text);
	text-align: left;
	border-radius: 8px;
	white-space: normal;
}

/* Число товаров в разделе: сразу видно, где искать, а где раздел только
   заводится. Прижато вправо, чтобы не разрывать название. */
.wpm-nav .wpm-mega-cats .wpm-mega-count {
	margin-left: auto;
	font-size: 12px;
	font-weight: var(--fw-regular, 400);
	color: var(--muted);
}

.wpm-nav .wpm-mega-cats .current-menu-item > a {
	color: var(--accent);
}

.wpm-nav .wpm-mega-products {
	padding: 12px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 2px;
}

/* Селектор включает `.sub-menu a`, потому что базовое правило для ссылок
   подменю задаёт `display: block` и специфичнее одного класса — карточка
   разваливалась в столбик вместо строки. */
.wpm-nav .sub-menu a.wpm-mega-product {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	margin: 0;
	border-radius: 10px;
	text-decoration: none;
	color: var(--text);
	white-space: normal;
}

.wpm-nav .sub-menu a.wpm-mega-product:hover {
	background: var(--accent-soft);
	color: var(--text);
}

.wpm-nav .wpm-mega-product img,
.wpm-nav .wpm-mega-letter {
	width: 46px;
	height: 46px;
	min-width: 46px;
	border-radius: 9px;
	object-fit: cover;
	flex-shrink: 0;
	margin: 0;
}

.wpm-mega-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #eef2fe 0%, #dbe4ff 100%);
	font-family: var(--font-headline);
	font-weight: var(--fw-extrabold);
	font-size: 20px;
	color: var(--accent);
}

.wpm-mega-product-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wpm-mega-product-body strong {
	font-family: var(--font-headline);
	font-size: 15px;
	font-weight: var(--fw-bold);
	line-height: 1.25;
}

.wpm-mega-product-body > span {
	font-size: 13px;
	color: var(--muted);
}

.wpm-mega-product-body .price {
	font-size: 13px;
	color: var(--muted);
}

.wpm-nav .sub-menu a.wpm-mega-all {
	display: block;
	margin: 8px 0 0;
	padding: 11px;
	text-align: center;
	border-radius: 10px;
	background: var(--accent);
	color: #fff !important;
	font-size: 14px;
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.wpm-nav .sub-menu a.wpm-mega-all:hover {
	background: var(--accent-dark);
	color: #fff !important;
}

.wpm-header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.wpm-iconbtn {
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	text-decoration: none;
	position: relative;
}

.wpm-iconbtn:hover {
	color: var(--accent);
}

.wpm-cart-count {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--accent);
	color: #fff;
	font-size: 10px;
	font-weight: var(--fw-bold);
	line-height: 17px;
	text-align: center;
}

/* --- Панель входа --- */

.wpm-account {
	position: relative;
}

.wpm-account-toggle {
	gap: 7px;
}

.wpm-account-panel {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 12px);
	width: 320px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 44px rgba(17, 17, 17, 0.16);
	padding: 20px;
	z-index: 130;
}

.wpm-account-panel.is-open {
	display: block;
}

/* Уголок к кнопке: без него панель выглядит оторванной от того, что её
   вызвало. */
.wpm-account-panel::before {
	content: '';
	position: absolute;
	top: -7px;
	right: 26px;
	width: 12px;
	height: 12px;
	background: var(--bg);
	border-left: 1px solid var(--line);
	border-top: 1px solid var(--line);
	transform: rotate(45deg);
}

.wpm-account-head {
	margin-bottom: 16px;
}

.wpm-account-head strong {
	display: block;
	font-family: var(--font-headline);
	font-size: 16px;
	margin-bottom: 3px;
}

.wpm-account-head span {
	display: block;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.4;
}

.wpm-account-panel p {
	margin: 0 0 12px;
}

.wpm-account-panel label {
	display: block;
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--muted);
	margin-bottom: 5px;
}

.wpm-account-panel input[type='text'],
.wpm-account-panel input[type='password'] {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 11px 13px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text);
	background: var(--bg);
}

.wpm-account-panel input[type='text']:focus,
.wpm-account-panel input[type='password']:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(37, 71, 214, 0.12);
}

.wpm-account-panel .login-remember label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--text);
	font-weight: var(--fw-regular);
	margin: 0;
}

.wpm-account-panel .login-submit input[type='submit'] {
	width: 100%;
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 12px 20px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	cursor: pointer;
}

.wpm-account-panel .login-submit input[type='submit']:hover {
	background: var(--accent-dark);
}

.wpm-account-foot {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 13px;
}

.wpm-account-foot a {
	color: var(--muted);
	text-decoration: none;
}

.wpm-account-foot a:hover {
	color: var(--accent);
}

.wpm-account-links {
	display: flex;
	flex-direction: column;
}

.wpm-account-links a {
	padding: 10px 12px;
	margin: 0 -12px;
	border-radius: 8px;
	color: var(--text);
	text-decoration: none;
	font-size: 14px;
	font-weight: var(--fw-medium);
}

.wpm-account-links a:hover {
	background: var(--accent-soft);
	color: var(--accent);
}

/* «Выйти» отделяем чертой, но саму ссылку оставляем такой же скруглённой,
   как соседние: раньше она теряла скругление при наведении и выбивалась
   из ряда. Черту рисует отступ-разделитель у контейнера, а не рамка на
   самой ссылке. */
.wpm-account-links .wpm-account-logout {
	margin-top: 8px;
	padding-top: 10px;
	color: var(--muted);
	position: relative;
}

.wpm-account-links .wpm-account-logout::before {
	content: '';
	position: absolute;
	top: 0;
	left: 12px;
	right: 12px;
	height: 1px;
	background: var(--line);
}

.wpm-account-links .wpm-account-logout:hover {
	background: #fee2e2;
	color: #b91c1c;
}

.wpm-burger {
	display: none;
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
	color: var(--text);
}

/* Крестик показываем только когда меню открыто — иначе кнопка не
   сообщает, что именно она сейчас сделает. */
.wpm-burger .wpm-burger-close,
.wpm-burger[aria-expanded='true'] .wpm-burger-open {
	display: none;
}

.wpm-burger[aria-expanded='true'] .wpm-burger-close {
	display: inline-flex;
}

/* Строка поиска в шапке — раскрывается кнопкой, чтобы не занимать место.
   Это последний элемент внутри карточки шапки: он раздвигает её вниз, а
   не всплывает отдельно. */
.wpm-header-search {
	display: none;
	flex-basis: 100%;
	order: 10;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.wpm-header-search.is-open {
	display: block;
}

.wpm-search-form {
	display: flex;
	gap: 8px;
}

.wpm-search-form input[type='search'] {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 10px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text);
}

.wpm-search-form input[type='search']:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(37, 71, 214, 0.12);
}

/* ==========================================================================
   5. Главная: hero
   ========================================================================== */

/* Поля те же, что у контейнера, — иначе первый экран и блок ИИ шире
   остальных блоков на боковые отступы, и края страницы не сходятся. */
.wpm-hero {
	padding: 32px var(--gutter);
	display: flex;
	justify-content: center;
}

/* Фон совпадает с фоном картинки первого экрана (#F1EFFE, взят пипеткой
   из самого файла) — иначе её прямоугольные края видны на подложке, и
   она читается как вставленная картинка, а не часть экрана.
   Если картинку заменят на другую — цвет надо пересверить. */
.wpm-hero-inner {
	background: #f1effe;
	border-radius: var(--radius-xl);
	padding: 48px 40px;
	width: 100%;
	max-width: calc(var(--container) - var(--gutter) * 2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

/* Текст занимает меньшую долю, чем картинка. Картинка широкая (примерно
   3:2), а колонка под неё была почти квадратной — при вписывании
   оставались полосы сверху и снизу, и рисунок казался мелким. Отдаём ей
   больше ширины: так она становится крупнее, а блок не растёт в высоту. */
/* Текст всегда верхним слоем: тогда любая его часть может выходить за
   свою колонку на область картинки, не рискуя оказаться под ней. */
.wpm-hero-content {
	flex: 1 1 340px;
	max-width: 430px;
	/* Без этого колонка не может стать уже своего содержимого, а строка
	   фактов задана как `max-content` — её длина становилась минимальной
	   шириной колонки, и картинка переносилась вниз задолго до реальной
	   нехватки места. */
	min-width: 0;
	position: relative;
	z-index: 2;
}

.wpm-hero-title {
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	margin: 0 0 20px;
}

.wpm-hero-title span {
	color: var(--accent);
}

.wpm-hero-lead {
	font-size: 16px;
	line-height: var(--lh-body);
	margin: 0 0 24px;
	opacity: 0.9;
}

.wpm-flag-note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--muted);
	margin-bottom: 32px;
}

.wpm-hero-cta {
	margin-bottom: 40px;
}

/* Строка фактов шире текстовой колонки: три подписи в 430px не помещались
   и последняя переносилась. Выпускаем её вправо — слева от картинки всё
   равно пустой фон, накладываться не на что. */
.wpm-hero-features {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	width: max-content;
	max-width: 620px;
	position: relative;
	z-index: 2;
	font-size: 13px;
	color: var(--muted);
	font-weight: var(--fw-medium);
}

.wpm-hero-features > div {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Картинка занимает правую часть первого экрана целиком — от верхнего
   края блока до нижнего. Отрицательные поля вытягивают колонку за
   внутренние отступы блока, иначе картинка висела бы в нём с воздухом
   по краям и читалась как вставка, а не как часть экрана. */
.wpm-hero-visual {
	flex: 1 1 640px;
	align-self: stretch;
	display: flex;
	min-width: 300px;
	min-height: 340px;
	margin: -48px -40px -48px 0;
	border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

/* Вписываем целиком, а не заполняем: пропорции картинки шире колонки, и
   `cover` срезал ноутбук с корзиной по краям. Свободного места по бокам
   не видно — фон блока совпадает с фоном самой картинки. */
.wpm-hero-visual img {
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
	object-fit: contain;
	object-position: center right;
}

/* ==========================================================================
   6. Главная: карточки каталога
   ========================================================================== */

.wpm-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

/* Белая карточка с заметной рамкой вместо серой заливки: на светлой
   странице серое на белом почти не читается как отдельный объект. */
.wpm-card {
	background: var(--bg);
	border: 1px solid #dfe3ee;
	border-radius: 14px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.wpm-card:hover {
	transform: translateY(-3px);
	border-color: rgba(37, 71, 214, 0.35);
	box-shadow: 0 14px 32px rgba(37, 71, 214, 0.13);
}

/* Секция «Наши продукты» лежит на сером фоне — там карточки, наоборот,
   должны быть чисто белыми без серой примеси. */
.wpm-section--surface {
	background: var(--surface);
}

.wpm-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	background: var(--accent-soft);
	color: var(--accent);
}

.wpm-card-icon--green {
	background: #34d399;
	color: #fff;
}

.wpm-card-icon--orange {
	background: #fb923c;
	color: #fff;
}

.wpm-card-icon .wpm-icon {
	width: 1.5em;
	height: 1.5em;
}

.wpm-card h3 {
	font-size: 18px;
	font-weight: var(--fw-bold);
	line-height: 1.3;
	margin: 0 0 8px;
}

.wpm-card p {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.4;
	margin: 0 0 24px;
	flex-grow: 1;
}

/* ==========================================================================
   7. Главная: блок про ИИ
   ========================================================================== */

.wpm-ai {
	padding: 40px var(--gutter);
}

/* Текст слева, картинка справа — она занимает правую часть блока целиком
   и уходит под текст. Картинка панорамная (примерно 7:3): в отдельной
   колонке она была бы вдвое уже и подписи внутри неё стали бы
   нечитаемыми, поэтому она позиционируется поверх всей правой части.
   Слева у самой картинки пусто, так что текст ложится на чистый фон.

   Фон совпадает с фоном картинки (#EAEDFC, снят пипеткой по её углам и
   краям — он ровный), поэтому границ у неё не видно. При замене картинки
   цвет надо пересверить: у прежней версии тут был градиент. */
.wpm-ai-inner {
	max-width: calc(var(--container) - var(--gutter) * 2);
	margin: 0 auto;
	background: #eaedfc;
	border-radius: var(--radius-xl);
	padding: 48px 40px;
	display: flex;
	align-items: center;
	min-height: 380px;
	position: relative;
	overflow: hidden;
}

.wpm-ai-content {
	flex: 1 1 340px;
	max-width: 430px;
	min-width: 0;
	position: relative;
	z-index: 2;
}

.wpm-pill {
	display: inline-block;
	background: rgba(37, 71, 214, 0.1);
	color: var(--accent);
	font-size: 13px;
	font-weight: var(--fw-semibold);
	padding: 4px 12px;
	border-radius: 12px;
	margin-bottom: 16px;
}

.wpm-ai-content h2 {
	font-size: 32px;
	font-weight: var(--fw-extrabold);
	margin: 0 0 16px;
}

.wpm-ai-content p {
	font-size: 15px;
	line-height: var(--lh-relaxed);
	color: var(--muted);
	margin: 0 0 32px;
}

.wpm-ai-visual {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 74%;
	margin: 0;
	min-height: 0;
	display: flex;
	z-index: 1;
	/* Картинка не должна перехватывать клик по кнопке под ней. */
	pointer-events: none;
}

/* Заполняем область по ширине, лишнее сверху и снизу обрезается: при
   вписывании целиком картинка (3:2) занимала бы лишь часть отведённой
   ей полосы и выглядела мелкой.

   Окно кадра смещено выше середины (38% вместо 50%) — так видна более
   верхняя часть картинки, и её содержимое опускается к центру блока.
   Правится здесь, перезаливать файл для этого не нужно. */
.wpm-ai-visual img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 0;
	object-fit: cover;
	object-position: center 38%;
}

.wpm-float {
	position: absolute;
	background: #fff;
	padding: 10px 16px;
	border-radius: var(--radius-lg);
	font-size: 13px;
	font-weight: var(--fw-medium);
	line-height: 1.3;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: var(--shadow-md);
	z-index: 3;
}

.wpm-float--1 { top: 10%; left: 0; }
.wpm-float--2 { top: 5%; right: 5%; }
.wpm-float--3 { bottom: 5%; left: 10%; }
.wpm-float--4 { bottom: 15%; right: 0; }

/* ==========================================================================
   8. Главная: преимущества и цифры
   ========================================================================== */

.wpm-advantages {
	background: var(--bg);
	padding: 48px 0;
}

.wpm-adv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin-bottom: 40px;
}

.wpm-adv {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.wpm-adv-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--accent-soft);
	color: var(--accent);
}

.wpm-adv-icon--green {
	background: #e6f7ed;
	color: #10b981;
}

.wpm-adv h3 {
	font-size: 16px;
	font-weight: var(--fw-bold);
	margin: 0 0 6px;
}

.wpm-adv p {
	font-size: 13px;
	line-height: var(--lh-body);
	color: var(--muted);
	margin: 0;
}

/* Плотнее фон и заметнее рамка: прежние #f5f7ff на белом почти не
   читались, и блок терялся между секциями. */
.wpm-stats {
	background: #eaeefc;
	border-radius: var(--radius-lg);
	padding: 34px 24px;
	border: 1px solid #d5ddfa;
}

.wpm-stats .wpm-stat + .wpm-stat {
	position: relative;
}

/* Тонкие разделители между цифрами — четыре показателя подряд без них
   читаются одной полосой. */
.wpm-stats .wpm-stat + .wpm-stat::before {
	content: '';
	position: absolute;
	left: -12px;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: #cdd6f7;
}

.wpm-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	text-align: center;
}

.wpm-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wpm-stat-value {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 8px;
	font-family: var(--font-headline);
	font-size: 28px;
	font-weight: var(--fw-extrabold);
	color: var(--accent);
	/* Моноширинные цифры: пока счётчик набирает число, разная ширина
	   знаков дёргала бы строку из стороны в сторону. */
	font-variant-numeric: tabular-nums;
}

.wpm-stat-label {
	font-size: 14px;
	font-weight: var(--fw-medium);
}

/* ==========================================================================
   9. Главная: отзывы
   ========================================================================== */

.wpm-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}

.wpm-review {
	background: var(--surface);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.wpm-stars {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	color: #fbbf24;
}

.wpm-review p {
	font-size: 14px;
	line-height: var(--lh-relaxed);
	margin: 0 0 24px;
}

.wpm-review-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.wpm-review-author img,
.wpm-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--accent-soft);
	flex-shrink: 0;
}

.wpm-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-headline);
	font-weight: var(--fw-bold);
	font-size: 18px;
	color: var(--accent);
}

.wpm-review-name {
	font-family: var(--font-headline);
	font-weight: var(--fw-bold);
	font-size: 15px;
	display: block;
}

.wpm-review-role {
	font-size: 13px;
	color: var(--muted);
}

/* ==========================================================================
   10. Главная: CTA
   ========================================================================== */

.wpm-cta-inner {
	background: linear-gradient(90deg, #142279 0%, #1e3bb3 50%, #284ee5 100%);
	border-radius: 20px;
	padding: 36px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	box-shadow: 0 10px 30px rgba(25, 45, 140, 0.15);
}

.wpm-cta-text {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 1 1 480px;
}

.wpm-cta-icon {
	width: 72px;
	height: 72px;
	min-width: 72px;
	background: linear-gradient(135deg, #3d62ff 0%, #2143d4 100%);
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
	color: #fff;
}

.wpm-cta-icon .wpm-icon {
	width: 2em;
	height: 2em;
}

.wpm-cta-inner h2 {
	font-size: 24px;
	font-weight: var(--fw-bold);
	color: #fff;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}

.wpm-cta-inner p {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	line-height: 1.4;
}

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

/* Ширину задаёт контейнер-обёртка — сам подвал занимает её целиком.
   Раньше он центрировался собственным `max-width` и оказывался шире
   блоков выше на боковые поля контейнера. */
.wpm-footer {
	background: #171f2c;
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 40px 48px 24px;
	margin: 40px 0 24px;
}

.wpm-footer-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 32px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wpm-footer-brand {
	flex: 1 1 240px;
	max-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wpm-footer .wpm-logo {
	color: #fff;
	font-size: 19px;
	line-height: 32px;
}

.wpm-footer .wpm-logo b {
	color: #8fa6ff;
}

.wpm-footer-brand p {
	margin: 0;
	color: #9ca3af;
	font-size: 13px;
	line-height: 1.5;
}

.wpm-footer .wpm-flag-note {
	color: #d1d5db;
	margin-bottom: 0;
}

.wpm-socials {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wpm-social {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.wpm-footer-col {
	flex: 1 1 140px;
}

/* Все заголовки колонок подвала разом. Раньше правило висело только на
   .wpm-footer-col, и заголовок блока подписки оставался тёмным по общему
   правилу для h1–h6 — то есть почти невидимым на тёмной подложке. */
.wpm-footer h4 {
	font-size: 15px;
	font-weight: var(--fw-semibold);
	margin: 0 0 16px;
	color: #fff;
}

.wpm-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 13px;
	color: #9ca3af;
}

.wpm-footer-col a {
	color: inherit;
	text-decoration: none;
}

.wpm-footer-col a:hover {
	color: #fff;
}

.wpm-subscribe {
	flex: 1 1 220px;
	max-width: 280px;
}

.wpm-subscribe p {
	margin: 0 0 16px;
	color: #9ca3af;
	font-size: 13px;
	line-height: 1.4;
}

.wpm-subscribe form {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--radius);
	padding: 4px 4px 4px 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.wpm-subscribe input {
	background: transparent;
	border: none;
	outline: none;
	color: #fff;
	font-size: 13px;
	width: 100%;
	font-family: var(--font-body);
}

.wpm-subscribe input::placeholder {
	color: #9ca3af;
}

.wpm-subscribe button {
	background: var(--accent);
	border: none;
	border-radius: 6px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	color: #fff;
}

.wpm-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24px;
	font-size: 13px;
	color: #6b7280;
	flex-wrap: wrap;
	gap: 16px;
}

.wpm-pay {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wpm-pay-item {
	display: inline-flex;
	line-height: 0;
}

.wpm-pay-item svg {
	display: block;
	height: 26px;
	width: auto;
}

/* ==========================================================================
   12. Внутренние страницы и записи
   ========================================================================== */

/* Шапка внутренней страницы на той же подложке, что первый экран главной:
   иначе переход с главной ощущается как переход на другой сайт. */
.wpm-page-hero {
	background: linear-gradient(135deg, #eef2fe 0%, #e8eeff 100%);
	padding: 40px 0 44px;
	margin-bottom: 0;
}

.wpm-page-hero h1 {
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	margin: 0;
	max-width: 20ch;
}

.wpm-page-hero-lead {
	font-size: 16px;
	line-height: var(--lh-body);
	color: var(--muted);
	margin: 14px 0 0;
	max-width: 66ch;
}

.wpm-page-hero .wpm-breadcrumbs {
	margin-bottom: 14px;
}

.wpm-page-hero .wpm-post-meta--hero {
	margin: 14px 0 0;
}

.wpm-search-form--hero {
	max-width: 520px;
	margin-top: 20px;
}

/* Карточка вокруг текста: колонка в 800px посреди белого листа читается
   как незакончённая страница, а на подложке — как документ. */
/* Карточка занимает всю ширину контейнера — вровень с первым экраном, блоком
   призыва и подвалом. Раньше она была 860 px по центру: сама по себе выглядела
   аккуратно, но на странице её края не совпадали ни с чем, и страница читалась
   как собранная из кусков.

   Длину строки ограничиваем не карточкой, а текстом внутри — правило ниже. */
.wpm-content.wpm-content--card {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 36px 40px;
	box-shadow: var(--shadow-sm);
	max-width: none;
	margin: 0;
}

/* Мера строки внутри карточки. 760 px при 16 px кегля — это примерно 90
   знаков, верхняя граница читаемого. Ограничиваем только текст: таблицы,
   картинки и врезки должны занимать всю ширину. */
.wpm-content--card > p,
.wpm-content--card > ul,
.wpm-content--card > ol,
.wpm-content--card > h2,
.wpm-content--card > h3,
.wpm-content--card > blockquote {
	max-width: 760px;
}

.wpm-content--card > *:first-child {
	margin-top: 0;
}

.wpm-content--card > *:last-child {
	margin-bottom: 0;
}

.wpm-page-thumb {
	max-width: 860px;
	margin: 0 auto 24px;
}

.wpm-page-thumb img {
	width: 100%;
	border-radius: var(--radius-lg);
}

.wpm-postnav {
	max-width: 860px;
	margin: 24px auto 0;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
}

.wpm-postnav-next {
	text-align: right;
}

/* Полоса с призывом в конце внутренней страницы. */
.wpm-strip {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 26px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.wpm-strip h2 {
	font-size: 20px;
	margin: 0 0 4px;
}

.wpm-strip p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

.wpm-breadcrumbs {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 12px;
}

.wpm-breadcrumbs a {
	color: var(--muted);
	text-decoration: none;
}

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

.wpm-content {
	max-width: 800px;
	font-size: 16px;
	line-height: var(--lh-relaxed);
}

.wpm-content--wide {
	max-width: none;
}

.wpm-content h2 {
	font-size: 24px;
	margin: 32px 0 12px;
}

.wpm-content h3 {
	font-size: 19px;
	margin: 24px 0 10px;
}

.wpm-content ul,
.wpm-content ol {
	padding-left: 22px;
}

.wpm-content li + li {
	margin-top: 6px;
}

.wpm-content img {
	border-radius: 12px;
}

.wpm-content blockquote {
	margin: 24px 0;
	padding: 16px 20px;
	border-left: 3px solid var(--accent);
	background: var(--surface);
	border-radius: 0 12px 12px 0;
}

.wpm-content code {
	background: var(--surface);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}

.wpm-content pre {
	background: #171f2c;
	color: #e5e7eb;
	padding: 16px;
	border-radius: 12px;
	overflow-x: auto;
}

.wpm-content pre code {
	background: none;
	padding: 0;
	color: inherit;
}

.wpm-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
}

.wpm-content th,
.wpm-content td {
	border: 1px solid var(--line);
	padding: 10px 12px;
	text-align: left;
}

.wpm-content th {
	background: var(--surface);
	font-family: var(--font-headline);
}

/* Список записей блога */
.wpm-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}

.wpm-post-card {
	background: var(--surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.wpm-post-card img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.wpm-post-card-body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.wpm-post-card h2 {
	font-size: 18px;
	margin: 0 0 8px;
}

.wpm-post-card h2 a {
	color: var(--text);
	text-decoration: none;
}

.wpm-post-card h2 a:hover {
	color: var(--accent);
}

.wpm-post-meta {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 10px;
}

.wpm-post-card p {
	font-size: 14px;
	color: var(--muted);
	margin: 0 0 20px;
	flex-grow: 1;
}

.wpm-pagination {
	margin-top: 32px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.wpm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid var(--line);
	text-decoration: none;
	color: var(--text);
	font-size: 14px;
	font-weight: var(--fw-medium);
}

.wpm-pagination .page-numbers.current,
.wpm-pagination .page-numbers:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* Пустой результат / 404 */
.wpm-empty {
	text-align: center;
	padding: 64px 20px;
}

.wpm-empty h1 {
	font-size: clamp(2rem, 6vw, 4rem);
	margin-bottom: 8px;
}

.wpm-empty p {
	color: var(--muted);
	margin: 0 auto 28px;
	max-width: 520px;
}

/* ==========================================================================
   13. WooCommerce
   ========================================================================== */

/* Переключатель категорий каталога. */
.wpm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.wpm-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(37, 71, 214, 0.14);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: var(--text);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wpm-chip span {
	font-size: 12px;
	font-weight: var(--fw-semibold);
	color: var(--muted);
	background: rgba(17, 17, 17, 0.06);
	border-radius: 999px;
	padding: 1px 7px;
	min-width: 20px;
	text-align: center;
}

.wpm-chip:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.wpm-chip.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.wpm-chip.is-active span {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* Панель над сеткой: сортировка прижата вправо. */
.woocommerce .woocommerce-ordering {
	float: none !important;
	margin: 0 0 22px !important;
	display: flex;
	justify-content: flex-end;
}

.woocommerce .woocommerce-ordering select {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 9px 14px;
	font-family: var(--font-body);
	font-size: 14px;
	background: var(--bg);
	color: var(--text);
	cursor: pointer;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	clear: both;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 18px 18px 22px;
	text-align: left;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
	border-color: rgba(37, 71, 214, 0.35);
	box-shadow: 0 14px 32px rgba(37, 71, 214, 0.12);
}

/* WooCommerce оборачивает картинку, категорию, название и описание в одну
   ссылку. Без этого растягивание описания не работает — flex-grow действует
   только на прямых детей, а прямой ребёнок карточки один: эта ссылка.
   Из-за чего кнопки в карточках с разной длиной описания не выравнивались. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	text-decoration: none;
	color: inherit;
}

/* Обложки товаров рисуются квадратными (1254x1254), и надписи на них
   доходят почти до краёв. Прежние 4/3 с object-fit: cover срезали верх и
   низ вместе с названием продукта — «НАЛАДКА», «Поискович», «Примерка»
   обрезались. Показываем в том же соотношении, в каком нарисованы. */
.woocommerce ul.products li.product a img {
	border-radius: 12px;
	margin: 0 0 16px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
}

/* Заглушка вместо картинки — первая буква названия, а не перечёркнутый
   прямоугольник WooCommerce, который читается как ошибка загрузки. */
.wpm-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	margin-bottom: 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, #eef2fe 0%, #dbe4ff 100%);
	font-family: var(--font-headline);
	font-size: 56px;
	font-weight: var(--fw-extrabold);
	color: var(--accent);
	opacity: 0.85;
}

.wpm-loop-cat {
	display: block;
	font-size: 12px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 6px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-headline);
	font-size: 19px !important;
	font-weight: var(--fw-bold);
	padding: 0 !important;
	margin: 0 0 8px !important;
	line-height: 1.25;
}

.wpm-loop-excerpt {
	font-size: 14px;
	line-height: 1.45;
	color: var(--muted);
	margin: 0 0 16px;
	flex-grow: 1;
}

.woocommerce ul.products li.product .price {
	color: var(--text) !important;
	font-family: var(--font-headline);
	font-size: 20px;
	font-weight: var(--fw-extrabold);
	margin: 0 0 16px !important;
	display: block;
}

.wpm-price-from {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--muted);
	text-transform: lowercase;
}

/* «Бесплатно» вместо цены: слово должно читаться как условие, а не
   теряться серым, поэтому берёт зелёный акцент, как плашка free. */
.wpm-price-free {
	color: #059669;
	font-weight: var(--fw-bold, 700);
}

.woocommerce ul.products li.product .price del {
	color: var(--muted) !important;
	font-weight: var(--fw-regular);
	font-size: 14px;
}

.wpm-loop-btn {
	align-self: flex-start;
	padding: 11px 22px;
	font-size: 14px;
	box-shadow: none;
}

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

.wpm-badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.wpm-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--accent-soft);
	border-radius: 999px;
	padding: 5px 12px;
}

.wpm-badge--free {
	color: #067a55;
	background: #e6f7ed;
	text-transform: none;
	letter-spacing: 0;
}

.wpm-tariffs {
	margin: 4px 0 20px;
}

.wpm-tariffs-head {
	margin-bottom: 12px;
}

.wpm-tariffs-head strong {
	display: block;
	font-family: var(--font-headline);
	font-size: 17px;
}

.wpm-tariffs-head span {
	display: block;
	font-size: 13px;
	color: var(--muted);
	margin-top: 2px;
}

.wpm-tariffs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
}

.wpm-tariff {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	background: var(--bg);
	border: 2px solid var(--line);
	border-radius: 14px;
	padding: 16px 14px 14px;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-body);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpm-tariff:hover {
	border-color: rgba(37, 71, 214, 0.4);
}

.wpm-tariff.is-selected {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(37, 71, 214, 0.1);
}

.wpm-tariff-flag {
	position: absolute;
	top: -10px;
	left: 12px;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	font-weight: var(--fw-semibold);
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
}

.wpm-tariff-sites {
	font-family: var(--font-headline);
	font-size: 34px;
	font-weight: var(--fw-extrabold);
	line-height: 1;
	color: var(--text);
}

.wpm-tariff-word {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 8px;
}

.wpm-tariff-price {
	font-family: var(--font-headline);
	font-size: 17px;
	font-weight: var(--fw-bold);
	color: var(--text);
}

.wpm-tariff-price small {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--fw-regular);
	color: var(--muted);
}

.wpm-tariff-per {
	font-size: 12px;
	color: #067a55;
	font-weight: var(--fw-semibold);
	margin-top: 2px;
}

/* Выпадающий список тарифов прячем: он остаётся в форме и по-прежнему
   отвечает за цену и корзину, но два органа управления одним и тем же
   сбивают с толку — человек не понимает, где на самом деле выбирать.
   Прячем не через `display:none`, а уводя за пределы экрана: скрытые
   поля браузер исключает из формы, и WooCommerce перестал бы видеть
   выбранную вариацию.

   Класс вешает JS: если он не отработал, список остаётся видимым и
   товар можно купить как обычно. */
.wpm-tariffs-live .woocommerce-variation-add-to-cart ~ .variations,
.wpm-tariffs-live .variations {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.woocommerce div.product form.cart .variations {
	margin-bottom: 12px;
}

.woocommerce div.product form.cart .variations th {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--muted);
	font-weight: var(--fw-medium);
}

.woocommerce div.product form.cart .variations select {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 9px 12px;
	font-family: var(--font-body);
	font-size: 14px;
	min-width: 200px;
}

/* Сброс выбора: WooCommerce показывает ссылку «Очистить» рядом со
   списком — раз списка не видно, ссылку тоже убираем. */
.wpm-tariffs-live .reset_variations {
	display: none !important;
}

.wpm-facts {
	list-style: none;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wpm-facts li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 14px;
	color: var(--muted);
}

.wpm-facts .wpm-icon {
	color: var(--accent);
	margin-top: 2px;
}

.wpm-facts strong {
	display: block;
	color: var(--text);
	font-family: var(--font-headline);
	font-size: 15px;
	margin-bottom: 1px;
}

.wpm-notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.wpm-note {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 26px 28px;
}

.wpm-note h2 {
	font-size: 19px;
	margin: 0 0 10px;
}

.wpm-note p {
	font-size: 14px;
	line-height: var(--lh-relaxed);
	color: var(--muted);
	margin: 0 0 10px;
}

.wpm-note p:last-child {
	margin-bottom: 0;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--accent);
	color: #fff;
	border-radius: 10px;
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: 14px;
	padding: 11px 20px;
	line-height: 1.2;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--accent-dark);
	color: #fff;
}

.woocommerce div.product .product_title {
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: var(--fw-extrabold);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--text);
	font-family: var(--font-headline);
	font-size: 26px;
	font-weight: var(--fw-extrabold);
}

/* --- Вкладки товара --- */

/* Стандартные вкладки WooCommerce нарисованы «папками» со скруглениями,
   псевдоэлементами-загибами и рамкой снизу — приём из середины 2000-х,
   который на современной странице выглядит инородно. Разбираем всё это
   и собираем ровный ряд кнопок. */
.woocommerce div.product .woocommerce-tabs {
	margin-top: 8px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 5px !important;
	margin: 0 0 28px !important;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	list-style: none;
}

/* Загибы «папок» и общая линия под вкладками. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none !important;
	display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 11px 20px !important;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: var(--fw-semibold) !important;
	color: var(--muted) !important;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
	background: rgba(37, 71, 214, 0.07) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
	color: var(--accent) !important;
}

/* Цвет задан явно, а не переменной: в сокращённом `background` значение
   `var()` вычисляется позже остального, и при конфликте с `!important`
   от соседнего правила браузер откатывал свойство к прозрачному —
   активная вкладка теряла подложку. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background-color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(17, 17, 17, 0.07) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--text) !important;
}

/* Заголовок «Описание» внутри вкладки дублирует саму вкладку. */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin-bottom: 0 !important;
	padding: 0;
	font-size: 16px;
	line-height: var(--lh-relaxed);
	max-width: 860px;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: 24px;
	margin: 32px 0 12px;
}

.woocommerce div.product .woocommerce-tabs .panel h3 {
	font-size: 19px;
	margin: 24px 0 10px;
}

.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol {
	padding-left: 22px;
}

.woocommerce div.product .woocommerce-tabs .panel li + li {
	margin-top: 6px;
}

.woocommerce div.product .woocommerce-tabs .panel code {
	background: var(--surface);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
	border-top-color: var(--accent);
	border-radius: 12px;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
	color: var(--accent);
}

.woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 16px;
}

.woocommerce-breadcrumb a {
	color: var(--muted);
	text-decoration: none;
}

/* --- Пустая корзина --- */

/* Стандартная пустая корзина — серая плашка с восклицательным знаком и
   кнопкой «Вернуться в магазин». Выглядит как сообщение об ошибке, хотя
   ничего не сломалось. */
.woocommerce .cart-empty,
.woocommerce .wc-empty-cart-message {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: var(--font-headline);
	font-size: 22px;
	font-weight: var(--fw-bold);
	color: var(--text);
	text-align: center;
}

.woocommerce .cart-empty::before,
.woocommerce .wc-empty-cart-message::before {
	content: none !important;
}

/* Кнопка «Вернуться в магазин» выводится шаблоном пустой корзины ВНЕ
   хука `woocommerce_cart_is_empty`, поэтому убрать её действием нельзя,
   а свою кнопку мы уже показали — иначе их две подряд. */
.woocommerce .return-to-shop {
	display: none;
}

.wpm-cart-empty {
	max-width: 560px;
	margin: 0 auto;
	padding: 48px 24px 56px;
	text-align: center;
}

.wpm-cart-empty-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: 20px;
	background: var(--accent-soft);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wpm-cart-empty-icon .wpm-icon {
	width: 2em;
	height: 2em;
}

.wpm-cart-empty p {
	color: var(--muted);
	margin: 10px 0 0;
}

/* ==========================================================================
   14. Адаптив
   ========================================================================== */

/* Когда текст и картинка перестают помещаться в строку, картинка не
   падает вниз отдельным блоком, а уходит за текст: остаётся справа и
   растворяется влево маской. Иначе на ноутбуке и телефоне первый экран
   растягивался вдвое, а картинка превращалась в довесок под кнопкой.

   Порог посчитан, а не подобран на глаз: колонки просят 340 + 640 и 40
   между ними, плюс по 40 внутренних отступов блока и 20 полей страницы —
   в строку они перестают помещаться примерно на 1140px. При меньшем
   пороге оставалась полоса ширин, где перенос уже случился, а наложение
   ещё не включилось. */
@media (max-width: 1140px) {
	/* Картинка тут абсолютная и высоту блока не задаёт — её задаёт текст.
	   Нижняя граница нужна лишь как страховка на случай очень короткого
	   заголовка, поэтому она заметно меньше фактической высоты. */
	.wpm-hero-inner {
		position: relative;
		overflow: hidden;
		min-height: 360px;
	}

	/* Подложка цвета фона поверх картинки: одной маски на изображении
	   мало — она лишь делает его полупрозрачным, и рисунок продолжает
	   проступать сквозь текст. Слой заливки гарантирует чистый фон под
	   заголовком и растворяется вправо, открывая картинку. */
	.wpm-hero-inner::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(
			to right,
			#f1effe 0%,
			#f1effe 34%,
			rgba(241, 239, 254, 0.92) 50%,
			rgba(241, 239, 254, 0.55) 68%,
			rgba(241, 239, 254, 0) 85%
		);
	}

	.wpm-hero-content {
		position: relative;
		z-index: 2;
		/* Текст держим в левой части: во всю ширину он уезжал на плотную
		   часть картинки и переставал читаться. */
		flex: 1 1 100%;
		max-width: 62%;
	}

	.wpm-hero-visual {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: 66%;
		min-width: 0;
		min-height: 0;
		margin: 0;
		border-radius: 0;
		z-index: 1;
		/* Приглушаем: за текстом картинка работает как фон, а не как
		   самостоятельная иллюстрация. */
		opacity: 0.7;
		/* Клики по картинке не должны перехватывать кнопку под ней. */
		pointer-events: none;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
		mask-image: linear-gradient(to right, transparent 0%, #000 45%);
	}

	.wpm-hero-visual img {
		height: 100%;
		object-fit: cover;
		object-position: center right;
	}
}

@media (max-width: 1180px) {
	/* Полосу с выгодами на узком экране прячем: три подписи переносятся
	   в три строки и съедают весь первый экран. */
	.wpm-topbar {
		display: none;
	}

	/* Та же схема, что на десктопе: серая подложка и белая скруглённая
	   карточка на ней. Раньше подложка была прозрачной, и при прокрутке
	   сквозь неё просвечивал контент — вот что выглядело неопрятно, а не
	   сама карточка. */
	.wpm-header-holder {
		padding: 10px var(--gutter);
		background: var(--surface);
	}

	.wpm-header-holder.is-stuck {
		box-shadow: 0 4px 18px rgba(17, 17, 17, 0.08);
	}

	.wpm-header {
		padding: 10px 14px;
	}

	.wpm-burger {
		display: flex;
	}

	/* Меню выпадает панелью ПОД шапкой, а не растягивает саму карточку
	   шапки: при десяти пунктах она вырастала на пол-экрана и разъезжалась.
	   Позиционируется от .wpm-header-holder — он sticky, то есть считается
	   позиционированным предком. */
	.wpm-nav {
		display: none;
		position: absolute;
		left: 12px;
		right: 12px;
		top: 100%;
		margin-top: 2px;
		background: var(--bg);
		border: 1px solid var(--line);
		border-radius: 14px;
		box-shadow: 0 18px 40px rgba(17, 17, 17, 0.14);
		padding: 10px 8px;
		max-height: calc(100vh - 110px);
		overflow-y: auto;
		z-index: 120;
	}

	.wpm-nav.is-open {
		display: block;
	}

	.wpm-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.wpm-nav > ul > li + li {
		border-top: 1px solid var(--line);
	}

	.wpm-nav a {
		display: block;
		padding: 12px 10px;
		font-size: 15px;
		border-radius: 8px;
	}

	.wpm-nav > ul > li > a {
		font-weight: var(--fw-semibold);
	}

	/* Пока меню открыто, страница под ним не должна ехать. */
	body.wpm-nav-open {
		overflow: hidden;
	}

	/* На узком экране подменю всегда раскрыто: наведения нет, а прятать
	   разделы за нажатием значит требовать два касания вместо одного.
	   Отделяем их чертой и отступом — иначе десять пунктов читаются
	   одним плоским списком без всякой иерархии. */
	.wpm-nav .sub-menu {
		display: flex;
		position: static;
		border: none;
		border-left: 2px solid var(--accent-soft);
		box-shadow: none;
		padding: 0 0 8px 12px;
		margin: 0 0 4px 12px;
		background: none;
		min-width: 0;
	}

	.wpm-nav .sub-menu a {
		font-size: 14px;
		font-weight: var(--fw-regular);
		color: var(--muted);
		padding: 9px 10px;
	}

	.wpm-nav .sub-menu a:hover {
		color: var(--accent);
	}

	/* Витрина «Плагинов» на телефоне сворачивается в обычный список
	   разделов. Двухколоночная сетка в 236px + карточки товаров на экране
	   в 390px не помещаются, а сами товары в меню тут лишние: до каталога
	   один шаг, и три карточки только удлиняют список, который и так
	   приходится листать. */
	.wpm-nav .wpm-mega {
		width: auto;
		left: 0;
		border-radius: 0;
		overflow: visible;
	}

	.wpm-nav .wpm-mega-inner {
		display: block;
	}

	.wpm-nav .wpm-mega-cats {
		background: none;
		border-right: none;
		padding: 0;
	}

	.wpm-nav .wpm-mega-products {
		display: none;
	}

	.wpm-nav .menu-item-has-children > a::after {
		display: none;
	}

	.wpm-header-left {
		gap: 12px;
	}
}

@media (max-width: 768px) {
	.wpm-hero-inner {
		padding: 32px 20px;
	}

	.wpm-ai-inner {
		padding: 32px 20px;
		min-height: 340px;
	}

	/* На узком экране текст идёт во всю ширину, поэтому картинка уходит
	   в фон сильнее — иначе подписи внутри неё спорят с текстом. */
	.wpm-ai-content {
		max-width: 100%;
	}

	.wpm-ai-visual {
		width: 92%;
		opacity: 0.5;
	}

	.wpm-page-hero {
		padding: 28px 0 32px;
	}

	.wpm-section {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	/* Шапка в одну строку: логотип слева, действия справа. Двумя рядами
	   она съедала треть первого экрана. Поиск при этом должен переноситься
	   вниз, а не сжимать логотип, — поэтому не `nowrap`, а запрет переноса
	   только для двух групп. */
	.wpm-header-left,
	.wpm-header-actions {
		flex-wrap: nowrap;
	}

	.wpm-header-search .wpm-search-form {
		gap: 6px;
	}

	.wpm-header-search .wpm-btn {
		padding: 10px 16px;
		font-size: 14px;
	}

	/* Размеры подобраны замером: на экране 390px внутри карточки шапки
	   остаётся 299px, а логотип со знаком и четыре кнопки просили 315 —
	   и группа переносилась на вторую строку. */
	.wpm-header {
		gap: 10px;
	}

	.wpm-header .wpm-logo {
		font-size: 16px;
		gap: 8px;
	}

	.wpm-header .wpm-logo-mark {
		width: 28px;
		height: 28px;
	}

	.wpm-header-actions {
		gap: 4px;
	}

	/* Кнопка входа на телефоне — такой же значок, как поиск и корзина:
	   рамка и поля вокруг съедали место, которого не хватало. */
	.wpm-header-actions .wpm-account-toggle {
		border: none;
		padding: 6px;
		background: none;
	}

	/* Панель входа на узком экране — во всю ширину под шапкой, как меню:
	   окно в 320px, привязанное к правому краю, на телефоне вылезает. */
	.wpm-account {
		position: static;
	}

	.wpm-account-panel {
		left: 12px;
		right: 12px;
		width: auto;
		top: 100%;
		margin-top: 2px;
		max-height: calc(100vh - 110px);
		overflow-y: auto;
	}

	.wpm-account-panel::before {
		display: none;
	}

	.wpm-header-holder.is-stuck .wpm-account-panel {
		left: 0;
		right: 0;
		border-radius: 0 0 14px 14px;
		margin-top: 0;
	}

	/* Подпись на кнопке скрываем — остаётся значок, места на телефоне мало. */
	.wpm-account-toggle span {
		display: none;
	}

	.wpm-account-toggle {
		padding: 8px 10px;
	}

	/* Картинка товара во всю ширину карточки, но с полями страницы. */
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary {
		width: 100% !important;
		float: none !important;
		margin-bottom: 20px !important;
	}

	/* Сортировка на всю ширину: узкий список, прижатый к правому краю,
	   на телефоне выглядит обрезком. */
	.woocommerce .woocommerce-ordering select {
		width: 100%;
	}

	.woocommerce .woocommerce-ordering {
		display: block;
	}

	.wpm-content--card {
		padding: 24px 20px;
	}

	.wpm-strip {
		padding: 22px 20px;
	}

	/* Боковых полей нет — их даёт контейнер-обёртка, как и блокам выше. */
	.wpm-footer {
		padding: 32px 20px 20px;
		margin: 24px 0;
		border-radius: 12px;
	}

	.wpm-cta-inner {
		padding: 28px 20px;
	}

	.wpm-cta-text {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.wpm-ai-visual {
		min-height: 0;
	}

	/* Плавающие подписи на узком экране мешают картинке — ставим их в поток. */
	.wpm-float {
		position: static;
		box-shadow: none;
		border: 1px solid var(--line);
	}

	.wpm-ai-visual {
		flex-direction: column;
		gap: 10px;
	}
}

/* Узкие телефоны — iPhone SE, Galaxy S8 и подобные 360px. На них шапка
   всё ещё разъезжалась на две строки: замер показал нехватку 4 пикселей,
   поэтому ужимаем знак и надпись ещё немного. */
@media (max-width: 380px) {
	.wpm-header {
		gap: 8px;
	}

	.wpm-header .wpm-logo {
		font-size: 15px;
		gap: 6px;
	}

	.wpm-header .wpm-logo-mark {
		width: 26px;
		height: 26px;
	}

	.wpm-header-actions {
		gap: 2px;
	}

	.wpm-header-actions .wpm-iconbtn,
	.wpm-header-actions .wpm-burger {
		padding: 5px;
	}
}

/* Телефон: места для двух слоёв рядом уже нет — текст занимает всю
   ширину, картинка уходит в фон сильнее.
   Порог именно 600, а не 768: планшет шириной ровно 768 ловил бы это
   правило и текст ложился прямо на ноутбук. */
@media (max-width: 600px) {
	.wpm-hero-content {
		max-width: 100%;
	}

	/* На телефоне выпускать строку за колонку некуда — возвращаем перенос. */
	.wpm-hero-features {
		width: auto;
		max-width: 100%;
	}

	.wpm-hero-visual {
		width: 96%;
		opacity: 0.55;
	}

	/* На телефоне текст идёт во всю ширину, поэтому заливка держится
	   плотнее и открывает картинку только у правого края. */
	.wpm-hero-inner::after {
		background: linear-gradient(
			to right,
			#f1effe 0%,
			rgba(241, 239, 254, 0.94) 45%,
			rgba(241, 239, 254, 0.7) 70%,
			rgba(241, 239, 254, 0.25) 92%
		);
	}
}

@media (max-width: 480px) {
	/* Боковые поля везде одинаковые — иначе шапка, первый экран и
	   остальные блоки встают по разным линиям. */
	.wpm-hero {
		padding: 16px var(--gutter);
	}

	.wpm-hero-features {
		gap: 12px;
	}
}

/* Обложка товара в блоке «Наши продукты» на главной.
   Соотношение задавалось инлайном как 16/10, и квадратные обложки
   (1254×1254) обрезались сверху и снизу вместе с названием продукта — та же
   ошибка, что была в каталоге. Показываем в том соотношении, в каком
   обложки нарисованы. */
.wpm-card-thumb {
	display: block;
	width: 100%;
	margin-bottom: 16px;
}

.wpm-card-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
}

/* ==========================================================================
   Личный кабинет покупателя (WooCommerce → «Мой аккаунт»)

   До этого тема не знала о кабинете НИЧЕГО: ни одного правила, ни одного
   своего шаблона. WooCommerce отдавал разметку, а показывалась она голым
   маркированным списком ссылок — рядом с оформленным каталогом это выглядело
   чужой страницей.

   Здесь кабинет приводится к языку витрины: те же радиусы, та же палитра,
   те же карточки. Ничего не переопределяем в логике — только внешний вид.
   ========================================================================== */

/* Раскладка вешается на СВОЙ контейнер из myaccount/my-account.php.
   Раньше правило висело на .woocommerce — а тема кладёт содержимое в
   узкую карточку, и две колонки в неё не помещались: меню и содержимое
   вставали друг под другом и жались к середине. */
.wpm-account-page {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

@media (max-width: 782px) {
	.wpm-account-page {
		grid-template-columns: 1fr;
	}
}

/* Боковое меню — карточкой, как всё остальное на сайте. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 8px;
	background: var(--surface);
	border-radius: var(--radius-lg);
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 14px;
	border-radius: var(--radius);
	color: var(--text);
	text-decoration: none;
	font-weight: var(--fw-medium);
	font-size: 15px;
	transition: background .15s ease, color .15s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--accent-soft);
	color: var(--accent);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--accent);
	color: var(--accent-text);
}

/* Выход отделяем: это не раздел, а действие. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 6px;
	border-top: 1px solid var(--line);
	padding-top: 6px;
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--muted);
}

.woocommerce-MyAccount-content {
	min-width: 0;
}

.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
	margin-top: 0;
}

/* Таблицы заказов, ключей и загрузок. */
.woocommerce-MyAccount-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.woocommerce-MyAccount-content table th,
.woocommerce-MyAccount-content table td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.woocommerce-MyAccount-content table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--muted);
	font-weight: var(--fw-semibold);
}

.woocommerce-MyAccount-content table tr:last-child td {
	border-bottom: none;
}

/* Кнопки внутри кабинета — как на витрине. */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
	display: inline-block;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--accent-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--fw-semibold);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
	background: var(--accent-dark);
}

/* Формы адреса и анкеты. */
.woocommerce-MyAccount-content .woocommerce-form-row label,
.woocommerce-MyAccount-content .form-row label {
	display: block;
	margin-bottom: 4px;
	font-weight: var(--fw-semibold);
	font-size: 14px;
}

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select {
	width: 100%;
	max-width: 460px;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 15px;
	background: var(--bg);
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Уведомления WooCommerce. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	padding: 14px 16px;
	border-radius: var(--radius);
	margin-bottom: 18px;
	font-size: 15px;
}

.woocommerce-message {
	background: #ecfdf5;
	color: #065f46;
}

.woocommerce-info {
	background: var(--accent-soft);
	color: var(--accent-dark);
}

.woocommerce-error {
	background: #fef2f2;
	color: #991b1b;
}

/* Плитки на главной кабинета — собственный шаблон dashboard.php. */
.wpm-account-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	margin: 20px 0 28px;
}

.wpm-account-card {
	display: block;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--text);
	transition: border-color .15s ease, transform .15s ease;
}

.wpm-account-card:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}

.wpm-account-card-val {
	font-family: var(--font-headline);
	font-size: 26px;
	font-weight: var(--fw-extrabold);
	line-height: 1.1;
}

.wpm-account-card-label {
	font-size: 13px;
	color: var(--muted);
	margin-top: 4px;
}

/* Кабинету тесно в текстовой карточке: она рассчитана на строку в 80 знаков
   (860 px), а здесь две колонки и таблицы заказов. Расширяем — но только на
   странице кабинета, чтобы обычные страницы остались читаемыми. */
/* Порядок этих двух правил важен, и я его уже один раз перепутал.

   Селекторы одного веса (два класса), поэтому побеждает тот, что ниже. Пока
   `max-width: none` стоял последним, он снимал ограничение с той же карточки,
   и она растягивалась во все 1200 px контейнера — текст тянулся через всю
   страницу и выбивался из ритма остального сайта. Сначала снимаем ограничение
   с `.wpm-content`, потом задаём своё — не наоборот. */
.woocommerce-account .wpm-content {
	max-width: none;
}

/* Карточка кабинета тянется во всю ширину контейнера — как первый экран
   страницы и как блок с призывом под ней. Ограничение в 1000 px выглядело
   аккуратно само по себе, но на странице карточка оказывалась уже соседних
   блоков, и края не сходились по вертикали.

   Длину строки при этом ограничиваем не карточкой, а самим текстом — ниже. */
.woocommerce-account .wpm-content--card {
	max-width: none;
	padding: 32px;
}

/* Пустая обёртка для сообщений WooCommerce печатает её всегда, даже когда
   сообщений нет. С нашими рамками и отступами она превращалась в пустую
   полосу над заголовком раздела. */
.woocommerce-notices-wrapper:empty {
	display: none;
}

/* Верх правой колонки должен совпадать с верхом меню.

   У темы есть правило, обнуляющее отступ первого элемента карточки, но здесь
   заголовок лежит на два уровня глубже: content → .wpm-cab → h2, и правило до
   него не достаёт. Свой отступ в 32 px он приносит от `.wpm-content h2`, и
   колонка начиналась ниже меню.

   Через цепочку `> *:first-child` это не лечится, я уже попробовал: первым
   ребёнком колонки идёт скрытая обёртка сообщений, а `.wpm-cab` оказывается
   вторым — цепочка обрывается на невидимом блоке. Поэтому целимся в сам
   заголовок: `h2:first-child` — это заголовок, стоящий первым у своего
   родителя, на какой бы глубине тот ни лежал. */
.woocommerce-account .woocommerce-MyAccount-content > *:first-child,
.woocommerce-account .woocommerce-MyAccount-content h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content h3:first-child,
.woocommerce-account .woocommerce-MyAccount-content p:first-child {
	margin-top: 0;
}

/* Мера строки. Карточка широкая ради таблиц заказов и ключей, но абзац в
   660 px читается, а в 900 — уже нет. Ограничиваем только текст: таблицы,
   плитки и формы должны занимать всю ширину. */
.woocommerce-account .woocommerce-MyAccount-content > p,
.woocommerce-account .woocommerce-MyAccount-content > ul,
.woocommerce-account .woocommerce-MyAccount-content > ol,
.woocommerce-account .woocommerce-MyAccount-content .wpm-cab > p,
.woocommerce-account .woocommerce-MyAccount-content .wpm-cab > ul {
	max-width: 680px;
}

/* --------------------------------------------------------------------------
   Гасим раскладку WooCommerce внутри нашей сетки.

   woocommerce-layout.css задаёт кабинету свои колонки:
     .woocommerce-account .woocommerce-MyAccount-navigation { float:left; width:30% }
     .woocommerce-account .woocommerce-MyAccount-content   { float:right; width:68% }

   В гриде float игнорируется, а вот ширина в процентах — нет: меню
   становилось 30% от своей колонки, то есть 75 px вместо 250, и текст в нём
   рвался по слогам. Именно это было видно на живой странице, а в моих
   проверках — нет, потому что я подключал только стиль темы и не подключал
   стили WooCommerce. Проверять раскладку без них бессмысленно.

   Селектор с > : гасим только прямых детей нашей обёртки, чужие блоки внутри
   содержимого не трогаем. -------------------------------------------------- */
.wpm-account-page > .woocommerce-MyAccount-navigation,
.wpm-account-page > .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	max-width: none;
}

/* Размер текста как на остальном сайте: WooCommerce задаёт свой, и кабинет
   выглядел крупнее соседних страниц. */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
	font-size: 16px;
	line-height: var(--lh-body);
}

.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-size: 24px;
}

.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: 18px;
}

.woocommerce-account .woocommerce-MyAccount-content p {
	font-size: 16px;
}

/* --------------------------------------------------------------------------
   Внутренности кабинета.

   Раскладку починили выше, но внутри разделов до сих пор виден «голый»
   WooCommerce: плашки с толстой рамкой и значком из его собственного шрифта
   (шрифт тема не грузит, поэтому вместо иконки в текст налезал посторонний
   символ), кнопки со своей геометрией, таблицы с чужими рамками. На фоне
   остального сайта это выглядит как вставка из другого магазина. Приводим
   всё к токенам темы.
   -------------------------------------------------------------------------- */

/* Плашки: «Заказов ещё не создано», «Подтвердите адрес», ошибки форм. */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-top: 1px solid var(--line);
	border-radius: 12px;
	background: var(--surface);
	color: var(--text);
	font-size: 15px;
	line-height: var(--lh-body);
	list-style: none;
}

/* Два псевдоэлемента разом:

   ::before — значок из шрифта WooCommerce. Шрифт тема не грузит, и вместо
   иконки на текст налезал посторонний символ.

   ::after — клирфикс (`content:""; display:table`). Он был безобиден, пока
   плашка была блоком, но во флексе пустой псевдоэлемент становится обычным
   элементом флекса и занимает место наравне с текстом. */
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-message::after,
.woocommerce-account .woocommerce-info::after,
.woocommerce-account .woocommerce-error::after {
	content: none;
}

/* В разметке WooCommerce кнопка стоит перед текстом — она рассчитана на
   float:right. Флекс порядок разметки уважает, поэтому кнопка оказывалась
   слева от сообщения. Возвращаем её вправо. */
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button {
	order: 2;
	margin-left: auto;
}

.woocommerce-account .woocommerce-message {
	background: var(--accent-soft);
	border-color: rgba(37, 71, 214, 0.18);
}

.woocommerce-account .woocommerce-error {
	background: #fef2f2;
	border-color: #fecaca;
}

.woocommerce-account .woocommerce-error li {
	margin: 0;
}

/* Кнопки — геометрия .wpm-btn--primary, но без подскока на наведении:
   в таблицах и плашках они стоят плотно, и движение читается как дёрганье. */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	float: none;
	margin: 0;
	padding: 11px 22px;
	border: none;
	border-radius: 10px;
	background: var(--accent);
	color: var(--accent-text);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
	background: var(--accent-dark);
	color: var(--accent-text);
}

/* Второстепенное действие в строке таблицы не должно спорить с основным. */
.woocommerce-account .woocommerce-orders-table .button,
.woocommerce-account .woocommerce-MyAccount-content .button.view {
	padding: 8px 16px;
	font-size: 14px;
	background: #fff;
	color: var(--accent);
	border: 1px solid var(--line);
}

.woocommerce-account .woocommerce-orders-table .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button.view:hover {
	background: var(--accent-soft);
	color: var(--accent);
}

/* Таблицы: заказы, загрузки, ключи, состав заказа. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin: 0 0 24px;
	border: 1px solid var(--line);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 15px;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 14px 16px;
	text-align: left;
	border: none;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	background: var(--surface);
	font-size: 13px;
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot td {
	background: var(--surface);
	font-weight: var(--fw-semibold);
}

/* Формы: данные аккаунта, адреса, смена пароля. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row,
.woocommerce-account .woocommerce-MyAccount-content .form-row {
	display: block;
	float: none;
	width: 100%;
	max-width: 520px;
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-content label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: var(--text);
}

.woocommerce-account .woocommerce-MyAccount-content .input-text,
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text);
}

.woocommerce-account .woocommerce-MyAccount-content .input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.woocommerce-account .woocommerce-MyAccount-content fieldset {
	margin: 28px 0 20px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 12px;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	padding: 0 8px;
	font-size: 15px;
	font-weight: var(--fw-semibold);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form__label-for-checkbox input {
	width: auto;
}

/* Адреса WooCommerce ставит в две плавающие колонки по 47%. Внутри нашей
   колонки это разъезжается — переводим на сетку.

   Ровно две колонки, а не auto-fit: адресов всегда два — платёжный и
   доставки, — и auto-fit нарезал третью, лишнюю. */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

/* Клирфикс `.col2-set::before/::after` в гриде превращается в две пустые
   ячейки: первая занимала колонку, и оба адреса съезжали вправо. */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
	content: none;
}

@media (max-width: 640px) {
	.woocommerce-account .woocommerce-Addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
	float: none;
	width: auto;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 12px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
	margin: 0 0 10px;
	font-size: 17px;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	color: var(--muted);
	font-size: 15px;
}

/* Постраничная навигация по заказам. */
.woocommerce-account .woocommerce-pagination .button {
	background: #fff;
	color: var(--accent);
	border: 1px solid var(--line);
}

/* На узком экране кабинет складывается в одну колонку. */
@media (max-width: 782px) {
	.wpm-account-page {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.woocommerce-account .wpm-content--card {
		padding: 20px;
	}
}

/* Подпись под полем: WooCommerce печатает её курсивом в размер основного
   текста, и она спорит с самим полем. Делаем пояснением, а не абзацем. */
.woocommerce-account .woocommerce-MyAccount-content .description,
.woocommerce-account .woocommerce-MyAccount-content span.description,
.woocommerce-account .woocommerce-MyAccount-content em {
	display: block;
	max-width: 520px;
	margin-top: 6px;
	font-style: normal;
	font-size: 13px;
	color: var(--muted);
}

/* Блок смены пароля тянулся во всю ширину при полях в 520 px.

   Исключаем группы реквизитов партнёра: они раскладываются в две колонки и
   должны занимать всю ширину. Без `:not()` это правило зажимало их до 560 px,
   и справа оставалась пустая половина. */
.woocommerce-account .woocommerce-MyAccount-content fieldset:not(.wpm-cab-fields) {
	max-width: 560px;
}