/*
 * posm.top — дизайн 3a «Akzent-крем».
 * Эталоны: mockups/design_handoff_posm_top/
 * Версия — POSM_CHILD_VER в functions.php, бампать при каждом деплое.
 *
 * Селекторы бьют по РЕАЛЬНОМУ DOM Impreza (.w-grid-item, .w-post-elm, .w-filter),
 * а не по разметке WooCommerce из хендоффа — каталог рендерит us_grid, не WC-цикл.
 */

/* ─────────────────────────── Токены ─────────────────────────── */
:root {
	--posm-bg: #F8F1E7;
	--posm-blue: #0F4C9C;
	--posm-blue-hover: #0A3A7C;
	--posm-blue-light: #E4ECF8;
	--posm-ink: #16202C;
	--posm-gray: #5B6B80;
	--posm-tan: #8C7B60;
	--posm-border: #DCD2C0;
	--posm-ph-1: #F5EFE4;
	--posm-ph-2: #EAE0D0;

	--posm-yellow: #FFC93C;

	--posm-font: 'Golos Text', system-ui, -apple-system, sans-serif;
	--posm-font-display: 'Piazzolla', Georgia, serif;
}

/*
 * Палитра Impreza. Тема задаёт `body { background: var(--color-content-bg-alt) }`
 * ПОСЛЕ нашего CSS и с той же специфичностью, поэтому перебить её селектором
 * `body {…}` невозможно — она всегда выигрывает по порядку. Правильная точка
 * входа — её собственные переменные: их же читают шапка, футер и кнопки.
 */
:root,
.l-canvas,
.l-section {
	--color-content-bg: var(--posm-bg);
	--color-content-bg-alt: var(--posm-bg);
	--color-content-bg-grad: var(--posm-bg);
	--color-content-primary: var(--posm-blue);
	--color-content-heading: var(--posm-ink);
	--color-content-text: var(--posm-ink);
	--color-content-faded: var(--posm-gray);
	--color-content-border: var(--posm-border);
	--color-content-link: var(--posm-blue);
	--color-content-link-hover: #2E6FE0;
}

/* ─────────────────────── Базовая типографика ─────────────────────── */
/*
 * `html body` (0,0,2), а не `body` (0,0,1): Impreza объявляет
 * `body{background:var(--color-content-bg-alt)}` позже с той же специфичностью
 * и выигрывает по порядку. Виден серый #EEE при оверскролле.
 */
html body {
	background: var(--posm-bg);
}

body {
	font-family: var(--posm-font);
	color: var(--posm-ink);
}

/* Impreza задаёт свой font-family заголовкам с более высокой специфичностью —
   бьём по её же классам, иначе Piazzolla не доедет. */
h1, h2,
.l-canvas h1,
.w-post-elm.post_title.us_custom_h1,
.posm-display {
	font-family: var(--posm-font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
}

/*
 * Impreza вешает на ВСЕ заголовки `h1..h6 { padding: 1.5rem 0 0 }` — 25.5px сверху.
 * В эталоне заголовки — это <div>, никакого паддинга у них нет, поэтому каждый наш
 * заголовок (hero H1, «Новинки», «Как это работает», «Каталог», «О сервисе»…)
 * съезжал вниз на 25px, и зазор под kicker'ом выглядел вдвое больше эталонного.
 */
.posm-hero-title,
.posm-sec-title,
.posm-catalog-title,
.posm-about-title,
.posm-info-title,
.w-post-elm.post_title {
	padding: 0;
}

/*
 * Заголовок «Каталог» — Piazzolla 42px (мобайл 26px).
 * Бьём именно по элементу us_post_title, а НЕ по `.l-main h1`: широкое правило
 * перехватывало и hero-H1 главной (специфичность выше, чем у .posm-hero-title),
 * и тот съезжал с 70px на 42px.
 */
.w-post-elm.post_title h1,
h1.w-post-elm.post_title {
	font-size: 42px;
	line-height: 1.1;
	margin-bottom: 22px;
}

@media (max-width: 600px) {
	.w-post-elm.post_title h1,
	h1.w-post-elm.post_title { font-size: 26px; }
}

/* ───────────────────────── Карточка товара ───────────────────────── */
/* Цельный белый блок; тень только на hover — без сдвигов макета. */
.w-grid-item .w-grid-item-h {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.w-grid-item .w-grid-item-h:hover {
	box-shadow: 0 10px 28px rgba(22, 32, 44, 0.13);
}

/* Фото — фиксированные 200px, чтобы низ карточек в ряду стоял на одной линии. */
.w-grid-item .w-post-elm.post_image {
	position: relative;
	height: 200px;
	margin: 0;
	background: linear-gradient(135deg, var(--posm-ph-1), var(--posm-ph-2));
}

.w-grid-item .w-post-elm.post_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Контентная часть тянется, чтобы панель заказа прижалась к низу. */
.w-grid-item .w-vwrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px 16px 16px;
	text-align: left;
}

/* Строка «вид · бренд» — две таксономии в hwrapper, разделитель рисуем сами. */
.w-grid-item .w-hwrapper {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-bottom: 5px;
}

.w-grid-item .w-post-elm.post_taxonomy {
	font-size: 12px;
	line-height: normal; /* эталон — normal; 1.3 давало строку на 1px выше */
	color: var(--posm-tan);
	margin: 0;
}

/* «·» только МЕЖДУ таксономиями: у товара без бренда хвостовая точка не повиснет. */
.w-grid-item .w-hwrapper .post_taxonomy + .post_taxonomy::before {
	content: '·';
	margin-right: 5px;
	color: var(--posm-tan);
}

.w-grid-item .w-post-elm.post_taxonomy a {
	color: inherit;
	text-decoration: none;
}

/*
 * Название — РОВНО две строки (15px × 1.35 × 2 ≈ 41px).
 * Фиксированная высота, а не line-clamp: иначе карточки с коротким названием
 * «подпрыгивают», и низы в ряду разъезжаются.
 */
.w-grid-item .w-post-elm.post_title {
	font-family: var(--posm-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	height: 41px;
	overflow: hidden;
	margin: 0;
	color: var(--posm-ink);
}

.w-grid-item .w-post-elm.post_title a {
	color: inherit;
	text-decoration: none;
}

/*
 * Цена.
 * line-height: normal — Impreza наследует базовый 30px, и строка цены становится
 * на 10px выше эталонной (33 вместо 23).
 * margin-bottom: 0 — Impreza вешает на элемент 0.7rem (11.9px), а в эталоне зазор
 * до панели заказа держит её же padding-top: 12px. Иначе карточка выше на 12px.
 */
.w-grid-item .w-post-elm.product_field {
	margin-bottom: 0;
}

.w-grid-item .w-post-elm.product_field .price,
.w-grid-item .price {
	font-size: 19px;
	font-weight: 800;
	line-height: normal;
	color: var(--posm-ink);
	margin-top: 10px;
	display: block;
}

/*
 * Товар со скидкой WooCommerce рендерит парой <del>старая</del><ins>новая</ins>.
 * В эталоне цена одна, поэтому старую уводим в мелкую зачёркнутую подпись,
 * а не прячем совсем: скрыть её — значит соврать о скидке.
 */
.w-grid-item .price del {
	font-size: 13px;
	font-weight: 500;
	color: var(--posm-gray);
	margin-right: 6px;
	opacity: 1;
}

.w-grid-item .price ins {
	text-decoration: none;
	font-size: 19px;
	font-weight: 800;
	color: var(--posm-ink);
	background: none;
}

/* Рейтинг звёздами в макете 3a не предусмотрен. */
.w-grid-item .star-rating,
.w-grid-item .w-post-elm.product_field.type_rating {
	display: none;
}

/* ──────────────────── Панель заказа: степпер + корзина ──────────────────── */
/* margin-top:auto прижимает панель к низу — цена и панель у всех карточек
   ряда встают на одну высоту, как в эталоне. */
.w-grid-item .w-btn-wrapper.woocommerce {
	margin-top: auto;
	width: 100%;
}

.posm-order {
	display: flex;
	gap: 10px;
	padding-top: 12px;
	width: 100%;
}

.posm-qty {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1.5px solid var(--posm-border);
	border-radius: 12px;
	height: 46px;
	padding: 0 5px;
	background: #fff;
}

.posm-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	/* flex:none — иначе flex-контейнер степпера сжимает кнопки (было 25.9px). */
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.posm-minus { color: var(--posm-tan); }
.posm-minus:hover { background: var(--posm-ph-1); color: var(--posm-ink); }

.posm-plus { color: var(--posm-blue); }
.posm-plus:hover { background: var(--posm-blue-light); }

/* Impreza жёстко стилизует поля ввода — сбрасываем до плоского числа. */
.posm-qty-input,
.posm-qty input[type="number"] {
	width: 100%;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	font-family: var(--posm-font);
	font-size: 15px;
	font-weight: 700;
	color: var(--posm-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}

.posm-qty-input:focus {
	outline: none;
	box-shadow: none;
}

.posm-qty-input::-webkit-outer-spin-button,
.posm-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/*
 * Кнопка-корзина: строгий квадрат 46×46, только иконка.
 * Селектор длинный намеренно: у якоря остаются классы WooCommerce
 * (.button.add_to_cart_button), а Impreza стилизует .w-btn/.button своими
 * padding/min-width/border-radius — короткий `.posm-cart` она перебивает
 * (получалось 64×46 и радиус 4.8px вместо 12).
 */
.w-grid-item .posm-order a.posm-cart,
a.posm-cart.button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	min-width: 46px;
	max-width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--posm-blue);
	color: #fff;
	transition: background-color 0.2s ease;
	font-size: 0; /* гасим текст, который WooCommerce кладёт внутрь якоря */
}

.w-grid-item .posm-order a.posm-cart:hover,
.w-grid-item .posm-order a.posm-cart:focus,
a.posm-cart.button:hover {
	background: var(--posm-blue-hover);
	color: #fff;
}

.posm-cart-icon { flex: none; }

/* WooCommerce дорисовывает «Просмотр корзины» после AJAX — в макете этого нет. */
.w-grid-item .added_to_cart { display: none; }

.posm-cart.loading { opacity: 0.6; pointer-events: none; }

/* Товар без цены: класть в корзину нечего — вместо степпера запрос. */
.posm-request {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	height: 46px;
	border: 1.5px solid var(--posm-ink);
	border-radius: 12px;
	color: var(--posm-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.posm-request:hover {
	background: var(--posm-ink);
	color: #fff;
}

/* ══════════════════════════ КОНТЕЙНЕР ══════════════════════════ */
/*
 * Эталон: карточка 1280px, боковые паддинги секций 44px → контент 1192px.
 * Impreza даёт контент 1140px, а боковой паддинг (42.5px) держит РОДИТЕЛЬ .l-section,
 * не .l-section-h. Поэтому паддинг задаём на .l-section, а на .l-section-h — только
 * ширину: иначе паддинги складываются и контент ужимается до 1107px.
 * padding-left/right, а не shorthand: в padding-top первой секции лежит отступ под
 * липкую шапку, shorthand его снесёт.
 */
.l-section {
	padding-left: 44px;
	padding-right: 44px;
}

/*
 * Вертикальный ритм. Impreza по умолчанию даёт 68px сверху и снизу каждой секции —
 * эталон задаёт свои значения поблочно, поэтому переопределяем адресно.
 * hero: 60/52 · каталог: 50/60 · лента: 16 (в .l-section-h, чтобы линии шли по контенту).
 */
.posm-hero-row {
	padding-top: 60px;
	padding-bottom: 52px;
}

.posm-strip-row {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * Вертикальные отступы секций лендинга — ровно из эталона (секция 4a):
 * Новинки 52/8 · Как это работает 56/8 · Инфоблоки 56/8 · О сервисе 56/60.
 * Impreza по умолчанию даёт 68/68, отчего блоки слипались.
 */
.posm-home-new   { padding-top: 52px; padding-bottom: 8px; }
.posm-how-row    { padding-top: 56px; padding-bottom: 8px; }
.posm-info-row   { padding-top: 56px; padding-bottom: 8px; }
.posm-about-row  { padding-top: 56px; padding-bottom: 60px; }

/*
 * Футер: верхний блок 48px, низ добирает сама юр. строка (её padding-bottom 24px).
 * Селектор с .l-section обязателен: секция несёт класс `height_medium`, который
 * даёт padding 68/68 и перебивает одиночный `.posm-footer-row` по порядку —
 * под юр. строкой оставалось 68px пустоты.
 */
.l-section.posm-footer-row {
	padding-top: 48px;
	padding-bottom: 0;
}

.woocommerce-shop .l-main .l-section,
.post-type-archive-product .l-main .l-section {
	padding-top: 50px;
	padding-bottom: 60px;
}

.l-section-h,
.l-subheader-h {
	max-width: 1192px;
	padding-left: 0;
	padding-right: 0;
}

/*
 * Ширина контента у Impreza — переменная --site-content-width (1140px из Theme
 * Options). Шапка читает ЕЁ через собственное правило .l-header .l-subheader-h
 * (0-2-0), которое бьёт наше .l-subheader-h (0-1-0) по специфичности: контент
 * и футер шли по 1192px, а логотип с корзиной — по 1140px, то есть были
 * вдвинуты внутрь на 26px с каждой стороны. Замерено: контент 44…1236,
 * шапка 70…1210.
 *
 * Поэтому правим саму переменную — одна точка правды на шапку, контент и футер,
 * вместо гонки селекторов.
 */
:root,
.l-canvas,
.l-header {
	--site-content-width: 1192px;
}

.l-header .l-subheader-h { max-width: 1192px; }

/*
 * Боковой паддинг шапки = паддинг секций (44px). У Impreza он 42.5px, и на
 * широких экранах разница не видна — края там задаёт max-width. А на ~1024
 * контейнер упирается в паддинг, и шапка оказывается на 1.5px шире контента.
 */
/*
 * Боковой отступ шапки обязан совпадать с отступом секций на ЛЮБОЙ ширине,
 * иначе логотип и корзина не стоят по краям контента. Секции Impreza: 44px,
 * а с ≤600px — 20px (проверено: на 601 ещё 44, на 390 уже 20).
 *
 * Отступ держит родитель (.l-subheader), а .l-subheader-h остаётся без паддинга
 * с max-width 1192 — иначе они складываются и шапка ужимается вдвое.
 */
.l-header .l-subheader {
	padding-left: 44px;
	padding-right: 44px;
}

@media (max-width: 600px) {
	.l-header .l-subheader {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (min-width: 900px) {
	/*
	 * Логотип — первым в левой ячейке.
	 *
	 * В планшетной раскладке Header Builder порядок элементов «меню, лого»: на
	 * телефоне это верно (сначала бургер, потом лого), но слой `tablets` у Impreza
	 * покрывает и ~1024, где меню уже горизонтальное (бургер включается только
	 * с 900px) — и логотип уезжал в середину шапки. Менять раскладку в билдере
	 * нельзя: она общая для 768 и 1024. Поэтому порядок правим ровно там, где меню
	 * развёрнуто в строку.
	 */
	.l-header .l-subheader-cell.at_left .w-image { order: -1; }
}

@media (max-width: 600px) {
	.l-section {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ═══════════════════════════ ШАПКА ═══════════════════════════ */
/*
 * Нижняя граница. Элемента `.w-header` в разметке Impreza НЕ СУЩЕСТВУЕТ —
 * правило висело в пустоту, и линии под шапкой не было вовсе.
 * Реальный элемент строки шапки — `.l-subheader.at_middle`.
 */
.l-header .l-subheader.at_middle {
	border-bottom: 1px solid rgba(15, 76, 156, 0.14);
}

/* Активный пункт — синий из палитры, а не ссылочный цвет Impreza (#277CEA). */
.l-header .w-nav-list.level_1 > .menu-item.current-menu-item > a,
.l-header .w-nav-list.level_1 > .menu-item.current_page_item > a {
	color: var(--posm-blue);
}

/* Лого + разделитель + подпись «TOP POSM / материалы для точек продаж». */
.l-header .w-image img {
	height: 34px;
	width: auto;
}

.l-header .w-text {
	font-size: 11px;
	line-height: 1.25;
	color: var(--posm-gray);
	border-left: 1px solid rgba(15, 76, 156, 0.2);
	padding-left: 12px;
	margin-left: 12px;
	white-space: pre-line; /* «TOP POSM» и подпись — двумя строками */
}

/* Меню в строку. */
.l-header .w-nav-list.level_1 > .menu-item > a {
	font-size: 14px;
	font-weight: 500;
	color: var(--posm-ink);
}

.l-header .w-nav-list.level_1 > .menu-item.current-menu-item > a,
.l-header .w-nav-list.level_1 > .menu-item > a:hover {
	color: var(--posm-blue);
}

/*
 * Корзина по хендоффу 2: квадратная кнопка-иконка 46×46, radius 14, БЕЗ слова
 * «Корзина», со счётчиком-бейджем в правом верхнем углу (жёлтый, обводка цветом
 * фона шапки). Ширина НИКОГДА не меняется — при 100+ выводится «99+» (posm.js).
 *
 * Раньше здесь была пилюля «Корзина · N»: она сжималась при открытии поиска и
 * росла от числа. Теперь геометрия фиксирована.
 */
.l-header .w-cart { flex: none; }

.l-header .w-cart .w-cart-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	min-width: 46px;
	padding: 0;
	background: var(--posm-blue);
	border-radius: 14px;
	font-size: 0;
	transition: background-color 0.2s ease;
}

.l-header .w-cart .w-cart-link:hover { background: var(--posm-blue-hover); }

/*
 * Глиф Font Awesome (Solid, 900) заменяем на контурный SVG из эталона.
 *
 * position: static — ОБЯЗАТЕЛЬНО. Impreza ставит .w-cart-icon в position:relative,
 * и тогда бейдж (position:absolute) считает top/right от иконки 20×20, а не от
 * кнопки 46×46 — и уезжает ВНУТРЬ кнопки, налезая на корзину.
 */
.l-header .w-cart .w-cart-icon {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.l-header .w-cart .w-cart-icon i {
	font-size: 0;
	width: 20px;
	height: 20px;
	line-height: 1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6h15l-1.7 8H8L6 3H3'/%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='18' cy='20' r='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

/*
 * Пустая корзина: КНОПКА остаётся (в этом и был баг — опция hide_empty её прятала,
 * и на телефоне посетителя корзины не было вовсе), а бейдж скрываем: Impreza
 * рендерит его с пустым содержимым, и он выглядел бы жёлтой точкой.
 */
.l-header .w-cart.empty .w-cart-quantity { display: none; }

/* Бейдж-счётчик. !important — Impreza ставит фон и цвет инлайн-стилем. */
.l-header .w-cart .w-cart-quantity {
	position: absolute !important;
	top: -7px;
	right: -9px;
	left: auto;
	background: var(--posm-yellow) !important;
	color: var(--posm-ink) !important;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	border-radius: 10px;
	padding: 4px 5px;
	min-width: 12px;
	width: auto;
	height: auto;
	text-align: center;
	border: 2px solid var(--posm-bg);
}

@media (max-width: 767px) {
	.l-header .w-cart .w-cart-link {
		width: 44px;
		height: 44px;
		min-width: 44px;
		border-radius: 13px;
	}

	.l-header .w-cart .w-cart-quantity {
		top: -6px;
		right: -8px;
		font-size: 10px;
		border-radius: 9px;
		padding: 3px 4px;
	}
}

.posm-footer .l-section-h {
	padding-top: 36px;
	padding-bottom: 36px;
}

.posm-footer-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.posm-footer-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Лого у нас цветное — в тёмном футере выбеливаем фильтром. */
.posm-footer-logo {
	height: 28px;
	width: auto;
	filter: brightness(0) invert(1);
}

.posm-footer-copy {
	font-size: 12px;
	opacity: 0.55;
}

.posm-footer-links {
	display: flex;
	gap: 24px;
	font-size: 13px;
}

.posm-footer-links a {
	color: #fff;
	opacity: 0.7;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.posm-footer-links a:hover { opacity: 1; color: #fff; }

@media (max-width: 600px) {
	.posm-footer-in { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════ ГЛАВНАЯ: HERO ═══════════════════════════ */
/* line-height: normal — эталонный kicker 16px высотой. С наследованными 30px
   строка раздувалась вдвое, и зазор до H1 визуально выглядел вдвое больше. */
.posm-kicker {
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--posm-blue);
	margin-bottom: 18px;
}

.posm-hero-title {
	font-family: var(--posm-font-display);
	font-size: 70px;
	line-height: 1.03;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--posm-ink);
	max-width: 1080px;
	margin: 0 0 42px;
}

.posm-hero-title span { color: var(--posm-blue); }

/* Зазор между H1 и колонками — 42px, как в эталоне. */
.posm-hero-cols { margin-top: 42px; }

/*
 * Синяя карточка: текст сверху, CTA снизу.
 * min-height 346px, а не 290: в эталоне НЕТ css-reset, там box-sizing: content-box,
 * и `min-height:290px` + padding 28×2 даёт итоговые 346. У нас border-box, поэтому
 * 290 включало бы паддинги, и колонка выходила на 54px ниже эталонной.
 */
.posm-hero-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	min-height: 346px;
	background: var(--posm-blue);
	border-radius: 18px;
	padding: 28px;
	color: #fff;
}

.posm-hero-card-text {
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

/* line-height: normal во всём hero — иначе элементы наследуют базовые 30px Impreza
   и разъезжаются (CTA 58 вместо 46, подпись 60 вместо 31). */
.posm-hero-cta {
	display: inline-block;
	background: #fff;
	color: var(--posm-blue);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	border-radius: 12px;
	padding: 14px 26px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.posm-hero-cta:hover { background: var(--posm-blue-light); color: var(--posm-blue); }

.posm-hero-note {
	font-size: 13px;
	line-height: normal;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 16px;
}

/*
 * Фото-колонки. Картинка позиционируется абсолютно и потому НЕ участвует в
 * расчёте высоты ряда: высоту задаёт синяя карточка, а фото подстраиваются.
 * Иначе (как было) фото 4:5 растягивали ряд до 461px, и карточка «висела».
 * Градиент-плейсхолдер из макета оставлен фоном — пока фото грузится, дыры нет.
 */
.posm-hero-photo .w-image,
.posm-hero-photo .w-image-h {
	position: relative;
	height: 100%;
	min-height: 290px;
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--posm-ph-1), var(--posm-ph-2));
}

.posm-hero-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * .posm-hero-cols — САМ является .g-cols (display:grid), а не его родителем.
 * columns_gap="1rem" отрендерился в 17px (root font-size = 17px), нужно ровно 16.
 */
.posm-hero-cols {
	gap: 16px;
	align-items: stretch;
}

.posm-hero-cols > div {
	display: flex;
	flex-direction: column;
}

.posm-hero-cols .vc_column-inner,
.posm-hero-cols .w-image {
	flex: 1;
}

/* ═══════════════════════ Лента категорий ═══════════════════════ */
.posm-strip-row .l-section-h {
	border-top: 1px solid rgba(15, 76, 156, 0.14);
	border-bottom: 1px solid rgba(15, 76, 156, 0.14);
	padding-top: 16px;
	padding-bottom: 16px;
}

.posm-strip {
	display: flex;
	align-items: center;
	gap: 40px;
	font-size: 13px;
	font-weight: 600;
	/* normal, а не наследованные 30px: иначе лента 64px вместо эталонных 50. */
	line-height: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--posm-gray);
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.posm-strip::-webkit-scrollbar { display: none; }
.posm-strip i { color: var(--posm-blue); font-style: normal; }
/* Плитки-виды — ссылки на каталог с включённым фильтром (?vid=slug). Выглядят
 * как прежние подписи (серый капс), при наведении — синие. */
.posm-strip a { color: inherit; text-decoration: none; transition: color 0.15s; }
.posm-strip a:hover { color: var(--posm-blue); }

/* ─── Логотип шапки: не сжимать в sticky-состоянии ───
 * Impreza сама генерирует «сжатие лого» при скролле (десктоп 34→30/35px,
 * моб ≤600px 26→20px) — из-за этого лого прыгает. Держим ту же высоту, что и
 * вверху страницы, на всех ширинах. Верхнее состояние: 34px (>899) / 26px (≤899). */
.l-header.sticky .ush_image_1 { height: 34px !important; }
@media (max-width: 899px) {
	.l-header.sticky .ush_image_1 { height: 26px !important; }
}

/* ═══════════════════ Секция каталога на главной ═══════════════════ */
.posm-section-title {
	font-family: var(--posm-font-display);
	font-size: 42px;
	font-weight: 600;
	color: var(--posm-ink);
	margin: 0 0 22px;
}

/*
 * Кнопка «Перейти в каталог» под новинками. Своя, а не [us_btn]: Impreza красит
 * .w-btn-label из своей стилевой системы поверх любого селектора, и надпись
 * выходила белой на кремовом фоне. Геометрия — как у «Показать ещё» из эталона.
 */
.posm-catalog-link {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.posm-outline-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1.5px solid var(--posm-ink);
	border-radius: 26px;
	padding: 14px 34px;
	color: var(--posm-ink);
	font-family: var(--posm-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.posm-outline-btn:hover {
	background: var(--posm-ink);
	color: #fff;
}

/*
 * Мобайл. Эталон (шаг 5 хендоффа): hero в одну колонку — kicker → H1 36px →
 * ПОДТЕКСТ обычным серым (никакой синей карточки) → синяя кнопка на всю ширину →
 * строка «400+ партнёров» по центру. Фото-колонки скрыты.
 */
@media (max-width: 600px) {
	.posm-kicker { font-size: 11px; letter-spacing: 0.12em; margin-bottom: 12px; }

	.posm-hero-title {
		font-size: 36px;
		line-height: 1.06;
		letter-spacing: -0.015em;
		margin-bottom: 0;
	}

	.posm-hero-cols { margin-top: 0; }

	/*
	 * Эталон мобайла: под hero остаётся ОДНО фото высотой 150px. Второе скрыто.
	 * Селектор с родителем обязателен: правило `.posm-hero-cols > div {display:flex}`
	 * имеет специфичность 0,2,0 и перебивает простое `.posm-hero-photo{display:none}`.
	 */
	.posm-hero-cols > .posm-hero-photo--2 { display: none; }

	.posm-hero-photo .w-image,
	.posm-hero-photo .w-image-h {
		height: 150px;
		min-height: 150px;
		border-radius: 14px;
		margin-top: 12px;
	}

	/* Синяя карточка на мобайле разбирается: остаётся обычный текст. */
	.posm-hero-card {
		min-height: 0;
		padding: 0;
		border-radius: 0;
		background: none;
		color: var(--posm-gray);
	}

	.posm-hero-card-text {
		font-size: 14px;
		line-height: 1.5;
		color: var(--posm-gray);
		margin-top: 12px;
	}

	/* Кнопка становится синей и на всю ширину. */
	.posm-hero-cta {
		display: block;
		width: 100%;
		text-align: center;
		padding: 16px;
		margin-top: 18px;
		background: var(--posm-blue);
		color: #fff;
	}

	.posm-hero-cta:hover { background: var(--posm-blue-hover); color: #fff; }

	.posm-hero-note {
		color: var(--posm-gray);
		text-align: center;
		font-size: 12px;
		margin-top: 10px;
	}

	.posm-section-title { font-size: 26px; }
}

/* ─────────────────────────── Сетка каталога ─────────────────────────── */
/*
 * Impreza строит сетку как `repeat(var(--columns,1), 1fr)`, поэтому число колонок
 * задаём ЕЁ переменной, а не grid-template-columns. Иначе десктоп-правило
 * перебивало, а мобильное — нет, и на телефоне каталог схлопывался в одну колонку.
 *
 * На 1280px Impreza сама роняет cols_4 до трёх (её брейкпоинт «ноутбуки»),
 * а эталон нарисован именно как 4 колонки при 1280 — поэтому форсируем.
 */
/*
 * Зазор. Impreza считает его как `gap: calc(var(--gap,0px) * 2)` — то есть
 * items_gap в шорткоде это ПОЛОВИНА зазора, и items_gap="16px" даёт 32px.
 * Плюс её правило `.w-grid.type_grid .w-grid-list` имеет ту же специфичность,
 * что и `.posm-grid .w-grid-list`, и выигрывает по порядку. Поэтому селектор
 * с классом .w-grid — он перебивает.
 */
.w-grid.posm-grid .w-grid-list {
	gap: 16px;
	align-items: stretch;
}

/* Брейкпоинты хендоффа 2: ≥1280 — 4 колонки, 768–1279 — 3, ≤767 — 2.
   Эталон нарисован на 1280 именно с четырьмя, поэтому граница 1280, а не 1281. */
@media (min-width: 1280px) {
	.w-grid.posm-grid .w-grid-list { --columns: 4; }
}

@media (min-width: 768px) and (max-width: 1279px) {
	.w-grid.posm-grid .w-grid-list { --columns: 3; }
}

@media (max-width: 767px) {
	.w-grid.posm-grid .w-grid-list {
		--columns: 2;
		gap: 12px;
	}
}

/* ──────────────────── Шапка каталога: «Каталог» + счётчик ──────────────────── */
.posm-catalog-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.posm-catalog-title {
	font-family: var(--posm-font-display);
	font-size: 42px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--posm-ink);
	margin: 0;
}

.posm-catalog-meta {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 14px;
	line-height: normal;
	color: var(--posm-gray);
	white-space: nowrap;
}

.posm-ordering { margin: 0; }

/* Голый select без обвеса: в эталоне это просто «Сначала популярные ▾». */
.posm-ordering select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	padding: 0 16px 0 0;
	margin: 0;
	height: auto;
	min-height: 0;
	box-shadow: none;
	font-family: var(--posm-font);
	font-size: 14px;
	line-height: normal;
	color: var(--posm-gray);
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--posm-gray) 50%),
		linear-gradient(135deg, var(--posm-gray) 50%, transparent 50%);
	background-position: right 5px center, right 0 center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.posm-ordering select:focus { outline: none; box-shadow: none; }

@media (max-width: 600px) {
	.posm-catalog-head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.posm-catalog-title { font-size: 26px; }
}

/* ───────────────────────── Поиск в шапке ───────────────────────── */
/*
 * Иконка. Impreza ставит Font Awesome Solid (font-weight 900) — жирную кляксу.
 * В эталоне это тонкий контурный SVG: 19×19, fill none, stroke #16202C,
 * stroke-width 2. Гасим глиф и рисуем ровно тот SVG фоном.
 */
.l-header .w-search-open i,
.l-header .w-search i.fas {
	font-size: 0;
	width: 19px;
	height: 19px;
	display: block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%2316202C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
}

/* Опенер по высоте выравниваем с пилюлей корзины. */
.l-header .w-search-open {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 39px;
	padding: 0 6px;
	color: var(--posm-ink);
}

/*
 * Impreza (layout_fullwidth) позиционирует форму absolute относительно
 * .l-subheader-h с left/right: -25.5px — чтобы перекрыть паддинги контейнера.
 * Запаса в 25.5px нет ни на телефоне, ни на планшете: форма вылезала за экран
 * (390: x=-8.5, width=407; 1024: x=-8, width=1041 → документ растягивался).
 * Прижимаем к контейнеру на ВСЕХ ширинах — правило не мобильное, поэтому и живёт
 * вне медиазапроса: в прошлый раз я запер его в @media и на планшете баг вернулся.
 */
.l-header .w-search.layout_fullwidth .w-search-form {
	left: 0;
	right: 0;
	width: auto;
}

/*
 * Поле поиска — штатный инпут Impreza по геометрии пилюли корзины,
 * а не «чиповый» дефолт.
 */
.l-header .w-search-form input[type="text"],
.l-header .w-search-form input[type="search"],
.l-header .w-form-row-field input {
	height: 39px;
	padding: 0 44px 0 18px;
	font-family: var(--posm-font);
	font-size: 14px;
	line-height: 39px;
	color: var(--posm-ink);
	border-radius: 24px;
	border: 1px solid rgba(15, 76, 156, 0.2);
	background: #fff;
	box-shadow: none;
}

.l-header .w-search-form input:focus {
	border-color: var(--posm-blue);
	box-shadow: none;
	outline: none;
}

/* ───────────────────────── Чипы фильтров ───────────────────────── */
/*
 * Impreza отдаёт фасеты как <label><input type=checkbox><span>значение</span>.
 * Прячем сам чекбокс и превращаем span в чип — так состояние :checked остаётся
 * нативным (доступность, клавиатура), а вид — из макета.
 */
.posm-chips {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 28px;
	background: none;
	border: 0;
	padding: 0;

	/*
	 * Impreza разносит фасеты через `.w-filter.layout_ver .w-filter-item {
	 * margin-bottom: var(--items-gap, 1.5em) }` — специфичность та же, что у нашего
	 * правила, но её CSS идёт позже и выигрывает. Поэтому гасим ЕЁ переменной,
	 * а вертикаль держим gap'ом списка (14px по эталону).
	 */
	--items-gap: 0px;
}

.posm-chips .w-filter-list {
	display: flex;
	flex-direction: column;
	/* Эталон: 14px между рядами чипов. */
	gap: 14px;
	padding: 0;
	background: none;
	border: 0;
}

/*
 * Impreza вешает на каждый фасет margin-bottom: 1.5rem (25.5px). Он складывается
 * с gap списка и разносит ряды на 38px вместо 14. Гасим — вертикаль держит gap.
 */
.posm-chips .w-filter-item { margin-bottom: 0; }

.posm-chips .w-filter-list-title,
.posm-chips .w-filter-list-closer,
.posm-chips .w-filter-item-title span {
	display: none;
}

/*
 * Impreza загоняет длинный фасет в горизонтальный скролл: `flex-wrap: nowrap`
 * + `overflow-x: auto`, причём с !important (селектор 0-3-0 его не перебил —
 * проверено). У «Подложки» 26 значений, и на десктопе они уезжали за экран:
 * замерено, последний чип стоял на x=3108 при ширине контента 1236, скроллбара
 * не видно — то есть большинство подложек нельзя было выбрать вообще.
 *
 * Отсюда !important: без него правило темы не снять. На десктопе чипы обязаны
 * переноситься по строкам (26 подложек = 3 строки), лента со скроллом остаётся
 * только на мобилке — см. медиазапрос в конце файла.
 */
.posm-chips .w-filter-item,
.posm-chips .w-filter-item.type_checkbox {
	display: flex;
	align-items: center;
	flex-wrap: wrap !important;
	gap: 10px;
	padding: 0;
	border: 0;
	overflow: visible !important;
}

/* Метка фасета: «БРЕНД:», «ПОДЛОЖКА:». */
.posm-chips .w-filter-item-title {
	padding: 0;
	margin: 0 4px 0 0;
	border: 0;
	background: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--posm-gray);
	pointer-events: none;
}

.posm-chips .w-filter-item-title::after { content: ':'; }

/* Первый ряд — тип товара: в эталоне идёт без метки. */
.posm-chips .w-filter-item[data-source="tax|pa_vid"] .w-filter-item-title {
	display: none;
}

.posm-chips .w-filter-item-content,
.posm-chips .w-filter-item-values {
	display: contents;
	max-height: none !important;
	overflow: visible;
}

.posm-chips .w-filter-item-value { display: block; }

.posm-chips .w-filter-item-value label {
	display: block;
	margin: 0;
	cursor: pointer;
}

.posm-chips .w-filter-item-value input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* line-height: normal, а не 1 — в эталоне чип 39px, с line-height:1 выходит 36. */
.posm-chips .w-filter-item-value-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 22px;
	padding: 10px 19px;
	font-size: 14px;
	line-height: normal;
	color: var(--posm-ink);
	border: 1px solid rgba(22, 32, 44, 0.25);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.posm-chips .w-filter-item-value-label:hover {
	border-color: var(--posm-ink);
}

/* Активный чип типа — чёрный. */
.posm-chips .w-filter-item[data-source="tax|pa_vid"] :checked + .w-filter-item-value-label {
	background: var(--posm-ink);
	border-color: var(--posm-ink);
	color: #fff;
	font-weight: 600;
}

/* Атрибуты (бренд, подложка): невыбранные — пунктир, выбранный — синий с «✕». */
.posm-chips .w-filter-item[data-source="tax|pa_tm"] .w-filter-item-value-label,
.posm-chips .w-filter-item[data-source="tax|pa_podlozhka"] .w-filter-item-value-label {
	border-style: dashed;
	border-color: rgba(22, 32, 44, 0.3);
	color: var(--posm-gray);
	border-radius: 18px;
	padding: 8px 16px;
	font-size: 13px;
}

.posm-chips .w-filter-item[data-source="tax|pa_tm"] :checked + .w-filter-item-value-label,
.posm-chips .w-filter-item[data-source="tax|pa_podlozhka"] :checked + .w-filter-item-value-label {
	background: var(--posm-blue);
	border-style: solid;
	border-color: var(--posm-blue);
	color: #fff;
	font-weight: 600;
}

.posm-chips .w-filter-item[data-source="tax|pa_tm"] :checked + .w-filter-item-value-label::after,
.posm-chips .w-filter-item[data-source="tax|pa_podlozhka"] :checked + .w-filter-item-value-label::after {
	content: '✕';
	font-size: 11px;
	line-height: 1;
}

/*
 * Порядок в ряду: метка → чипы. Impreza кладёт в DOM title → reset → значения,
 * поэтому reset без order встал бы между меткой и чипами.
 */
.posm-chips .w-filter-item-title { order: -2; }
.posm-chips .w-filter-item-reset { order: -1; }

/* Сброс фасета типа = чип «Все типы» из эталона. */
.posm-chips .w-filter-item[data-source="tax|pa_vid"] .w-filter-item-reset {
	display: inline-flex;
	align-items: center;
	border-radius: 22px;
	/* padding с !important: Impreza добавляет свой padding-bottom 10px, и чип
	   становится выше остальных в ряду. */
	padding: 10px 19px !important;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
	background: var(--posm-ink);
	color: #fff;
	/* Рамка прозрачная, а не отсутствует: иначе чип на 2px ниже соседей по ряду. */
	border: 1px solid transparent;
}

.posm-chips .w-filter-item[data-source="tax|pa_vid"] .w-filter-item-reset span { font-size: 0; }
.posm-chips .w-filter-item[data-source="tax|pa_vid"] .w-filter-item-reset span::before {
	content: 'Все типы';
	font-size: 14px;
}

/* У рядов атрибутов чипа «Все» в эталоне нет: снятый чип и есть «все». */
.posm-chips .w-filter-item[data-source="tax|pa_tm"] .w-filter-item-reset,
.posm-chips .w-filter-item[data-source="tax|pa_podlozhka"] .w-filter-item-reset {
	display: none;
}

/*
 * Подложка — 27 терминов. Вместо стены чипов на три ряда прокручиваем их в одну
 * строку: ряд остаётся высотой в один чип, как в эталоне.
 * (Правильное решение — сократить таксономию до 5-6 значимых подложек.)
 */
.posm-chips .w-filter-item[data-source="tax|pa_podlozhka"] {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 4px;
}

.posm-chips .w-filter-item[data-source="tax|pa_podlozhka"] .w-filter-item-value {
	flex: none;
}

/*
 * Кнопка «Показать ещё» — прозрачная, рамка 1.5px ink, по центру.
 * Эталон: 252×49, padding 14px 34px, radius 26px, 15px/600, margin-top 36px.
 * Селектор — .g-loadmore (не .w-grid-load-more): так её называет Impreza.
 */
.g-loadmore {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

/* Селектор с .us-btn-style_1: у Impreza правило `.w-btn.us-btn-style_1` той же
   специфичности, что и `.g-loadmore .w-btn`, но идёт позже и выигрывает —
   кнопка оставалась 16px/32px без рамки. */
.g-loadmore .w-btn.us-btn-style_1,
.g-loadmore button.w-btn {
	background: transparent;
	border: 1.5px solid var(--posm-ink);
	border-radius: 26px;
	padding: 14px 34px;
	color: var(--posm-ink);
	font-family: var(--posm-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 18px;
	min-height: 0;
	box-shadow: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.g-loadmore .w-btn.us-btn-style_1:hover,
.g-loadmore button.w-btn:hover {
	background: var(--posm-ink);
	color: #fff;
	border-color: var(--posm-ink);
}

/*
 * Цвет текста кнопки Impreza задаёт из своей стилевой системы (us-btn-style_1),
 * и он побеждает даже селектор 0,3,0 — надпись «Показать ещё» выходила белой
 * на кремовом фоне, то есть невидимой. Здесь !important оправдан: это цвет,
 * который тема навязывает поверх всего.
 */
.g-loadmore .w-btn.us-btn-style_1,
.g-loadmore .w-btn .w-btn-label {
	color: var(--posm-ink) !important;
	font-size: 15px;
	line-height: 18px;
}

.g-loadmore .w-btn.us-btn-style_1:hover,
.g-loadmore .w-btn:hover .w-btn-label {
	color: #fff !important;
}

/* Заливка кнопки у Impreza — псевдоэлемент ::before; гасим, иначе он перекрывает
   прозрачный фон из эталона. */
.g-loadmore .w-btn::before,
.g-loadmore .w-btn::after {
	display: none;
}

/* ───────────────────────────── Бейджи ───────────────────────────── */
.w-grid-item .w-post-elm.product_field.type_sale_badge {
	position: absolute;
	top: 12px;
	left: 12px;
	border-radius: 14px;
	padding: 5px 11px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	background: var(--posm-ink);
	color: #fff;
}

/* ───────────────────────────── Мобайл ───────────────────────────── */
@media (max-width: 600px) {
	.w-grid-item .w-grid-item-h { border-radius: 14px; }
	.w-grid-item .w-post-elm.post_image { height: 140px; }
	.w-grid-item .w-vwrapper { padding: 11px 12px 12px; }

	.w-grid-item .w-post-elm.post_taxonomy { font-size: 11px; }

	.w-grid-item .w-post-elm.post_title {
		font-size: 13px;
		line-height: 1.3;
		height: 34px;
	}

	.w-grid-item .w-post-elm.product_field .price,
	.w-grid-item .price { font-size: 15px; margin-top: 7px; }

	.posm-order { gap: 7px; padding-top: 9px; }

	/* Зоны нажатия ≥44px — палец, а не мышь. */
	.posm-qty { height: 44px; border-radius: 11px; padding: 0 3px; }
	.posm-qty-btn { width: 32px; height: 38px; border-radius: 8px; font-size: 18px; }

	/*
	 * Ровно 16px: при меньшем размере iOS зумит всю страницу на фокусе поля.
	 *
	 * Селектор обязан повторять базовый (.posm-qty input[type="number"], 0-1-1),
	 * иначе тот выигрывает по специфичности у одиночного .posm-qty-input (0-1-0)
	 * и поле остаётся 15px — медиазапрос на специфичность не влияет. Замерено.
	 */
	.posm-qty-input,
	.posm-qty input[type="number"] { font-size: 16px; }

	.posm-cart { width: 44px; height: 44px; border-radius: 11px; }
	.posm-request { height: 44px; border-radius: 11px; }

	/* «Сделать запрос» — тоже 44px: зона нажатия ≥44px по хендоффу. */
	.posm-request-btn {
		height: 44px;
		border-radius: 11px;
		font-size: 13px;
	}
}

/* ═══════════════════════ ХЕНДОФФ 2: КАРТОЧКА ═══════════════════════ */

/* Бейджи «Хит» / «Новинка» — на фото, absolute 12/12.
   Impreza не даёт хука на разметку фото, поэтому класс вешается на .w-grid-item
   (фильтр us_grid_item_class), а бейдж рисуется псевдоэлементом. */
.w-grid-item.posm-badge-hit .post_image::after,
.w-grid-item.posm-badge-new .post_image::after {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	border-radius: 14px;
	padding: 5px 11px;
	font-size: 11px;
	font-weight: 600;
	line-height: normal;
	color: #fff;
}

.w-grid-item.posm-badge-hit .post_image::after {
	content: 'Хит';
	background: var(--posm-ink);
}

.w-grid-item.posm-badge-new .post_image::after {
	content: 'Новинка';
	background: var(--posm-blue);
}

/* «Цена по запросу» — синим, на месте цены. */
.posm-price-request {
	display: block;
	font-size: 19px;
	font-weight: 800;
	line-height: normal;
	color: var(--posm-blue);
	margin-top: 10px;
}

/* Кнопка «Сделать запрос» — на всю ширину панели, высота та же 46px,
   поэтому карточка «по запросу» ровно такой же высоты, что обычная. */
.posm-order--request { gap: 0; }

.posm-request-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 46px;
	border: 1.5px solid var(--posm-blue);
	border-radius: 12px;
	background: none;
	color: var(--posm-blue);
	font-family: var(--posm-font);
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.posm-request-btn:hover {
	background: var(--posm-blue-light);
	color: var(--posm-blue);
}

.posm-request-btn svg { flex: none; }

/* ═══════════════════ ЛЕНДИНГ: заголовки секций ═══════════════════ */
.posm-sec-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}

.posm-sec-title {
	font-family: var(--posm-font-display);
	font-size: 42px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--posm-ink);
	margin: 0;
}

.posm-sec-title--solo { margin-bottom: 26px; }

.posm-sec-link {
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	color: var(--posm-blue);
	text-decoration: none;
	white-space: nowrap;
}

.posm-sec-link:hover { color: #2E6FE0; }

/* ═══════════════════ ЛЕНДИНГ: «Как это работает» ═══════════════════ */
.posm-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.posm-step {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
}

.posm-step-num {
	font-family: var(--posm-font-display);
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
	color: var(--posm-blue);
}

.posm-step-title {
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	color: var(--posm-ink);
	margin: 10px 0 7px;
}

.posm-step-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--posm-gray);
}

/* ═══════════════ ЛЕНДИНГ: менеджер + индивидуальные решения ═══════════════ */
.posm-info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: stretch;
}

.posm-info-card {
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	padding: 34px;
}

.posm-info-card--light { background: #fff; }
.posm-info-card--blue { background: var(--posm-blue); color: #fff; }

.posm-info-kicker {
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--posm-blue);
	margin-bottom: 12px;
}

.posm-info-card--blue .posm-info-kicker { color: var(--posm-yellow); }

.posm-info-title {
	font-family: var(--posm-font-display);
	font-size: 28px;
	line-height: 1.15;
	font-weight: 600;
	color: var(--posm-ink);
}

.posm-info-card--blue .posm-info-title { color: #fff; }

.posm-info-text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--posm-gray);
	margin-top: 12px;
}

.posm-info-card--blue .posm-info-text { color: rgba(255, 255, 255, 0.82); }

.posm-info-foot {
	margin-top: auto;
	padding-top: 20px;
}

.posm-info-link {
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	color: var(--posm-blue);
	border-bottom: 1.5px solid var(--posm-blue);
	padding-bottom: 2px;
	text-decoration: none;
}

.posm-info-card--blue .posm-info-link {
	color: var(--posm-yellow);
	border-bottom-color: var(--posm-yellow);
}

/* ═══════════════════════ ЛЕНДИНГ: «О сервисе» ═══════════════════════ */
.posm-about {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	background: var(--posm-ink);
	border-radius: 20px;
	padding: 44px;
	color: #fff;
}

.posm-about-kicker {
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--posm-yellow);
	margin-bottom: 14px;
}

.posm-about-title {
	font-family: var(--posm-font-display);
	font-size: 36px;
	line-height: 1.12;
	font-weight: 600;
	color: #fff;
	margin: 0;
}

.posm-about-text {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	margin-top: 18px;
}

.posm-about-btn {
	display: inline-block;
	background: var(--posm-yellow);
	color: var(--posm-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	border-radius: 12px;
	padding: 14px 26px;
	margin-top: 24px;
	text-decoration: none;
	transition: filter 0.2s ease;
}

.posm-about-btn:hover { filter: brightness(0.93); color: var(--posm-ink); }

.posm-about-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.posm-tile {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	padding: 20px;
}

.posm-tile-num {
	font-size: 26px;
	font-weight: 800;
	line-height: normal;
	color: var(--posm-yellow);
}

.posm-tile-label {
	font-size: 13px;
	line-height: normal;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 4px;
}

/* ═══════════════════════ ФУТЕР (хендофф 2) ═══════════════════════ */
.posm-footer { color: #fff; }

.posm-footer-cols {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 36px;
}

.posm-footer-logo {
	height: 30px;
	width: auto;
}

.posm-footer-about {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 14px;
	max-width: 280px;
}

.posm-footer-head {
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 14px;
}

.posm-footer-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	line-height: normal;
	color: rgba(255, 255, 255, 0.8);
}

.posm-footer-list a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.2s ease;
}

.posm-footer-list a:hover { color: #fff; }

.posm-footer-phone {
	font-size: 17px !important;
	font-weight: 700;
	color: #fff !important;
}

.posm-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 20px 0 24px;
	font-size: 12px;
	line-height: normal;
	color: rgba(255, 255, 255, 0.5);
}

.posm-footer-legal a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.posm-footer-legal a:hover { color: #fff; }

/* ═══════════════════════ Страница запроса ═══════════════════════ */
.posm-request-subject {
	background: #fff;
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 18px;
	font-size: 15px;
	color: var(--posm-ink);
}

/* ═══════════════════════ МОБАЙЛ (хендофф 2) ═══════════════════════ */
@media (max-width: 767px) {
	.posm-sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.posm-sec-title { font-size: 26px; }

	/* «Как это работает» — вертикальный список: номер слева, текст справа. */
	.posm-steps { grid-template-columns: 1fr; gap: 12px; }

	.posm-step {
		display: grid;
		grid-template-columns: 44px 1fr;
		column-gap: 14px;
		padding: 18px;
	}

	.posm-step-num { grid-row: span 2; font-size: 30px; }
	.posm-step-title { margin: 0 0 5px; }

	.posm-info { grid-template-columns: 1fr; }
	.posm-info-card { border-radius: 16px; padding: 24px; }
	.posm-info-title { font-size: 22px; }

	.posm-about {
		grid-template-columns: 1fr;
		gap: 24px;
		border-radius: 16px;
		padding: 26px;
	}

	.posm-about-title { font-size: 26px; }
	.posm-about-btn { display: block; text-align: center; }

	.posm-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
	.posm-footer-brand { grid-column: 1 / -1; }
	.posm-footer-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ═══════════════════ МОБИЛЬНАЯ ШАПКА (эталон 4a Мобайл) ═══════════════════ */
/*
 * Эталон: высота 60, padding 0 16px, gap 12 — бургер 22×22 → лого 26px →
 * распорка → корзина 44×44 с бейджем. Поиска на мобайле в макете НЕТ.
 */
@media (max-width: 899px) {
	.l-header .l-subheader.at_middle {
		height: 60px;
	}

	/* Отступы шапки задаются выше, одним правилом на все ширины (44px / 20px
	   с ≤600) — здесь их переопределять НЕЛЬЗЯ, иначе шапка снова разъедется
	   с контентом. */
	.l-header .l-subheader-h {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}

	/* Лого 26px (на десктопе 34) — иначе оно перекашивает 60px-шапку. */
	.l-header .w-image img {
		height: 26px;
		width: auto;
	}

	/* Бургер: контурные линии 22×22, как в эталоне, а не жирный глиф Impreza. */
	.l-header .w-nav-control {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		flex: none;
	}

	.l-header .w-nav-icon {
		width: 22px;
		height: 22px;
		font-size: 22px;
	}

	.l-header .w-nav-icon i,
	.l-header .w-nav-icon i::before,
	.l-header .w-nav-icon i::after {
		height: 2.2px;
		border-radius: 2px;
		background: var(--posm-ink);
	}

	/* Элементы шапки выравниваем по центру строки. */
	.l-header .l-subheader-cell {
		align-items: center;
	}

	/* Поиск на мобайле: лупа рядом с корзиной, зазор 12px. */
	.l-header .w-search {
		display: block;
		flex: none;
		margin-right: 12px;
	}

	.l-header .w-search-open {
		height: 44px;
		width: 32px;
		padding: 0;
	}

	.l-header .w-search-open i,
	.l-header .w-search i.fas {
		width: 22px;
		height: 22px;
		background-size: 22px 22px;
	}

	.l-header .w-search-form input[type="text"],
	.l-header .w-search-form input[type="search"] {
		box-sizing: border-box;
		width: 100%;
		height: 44px;
		line-height: 42px;
		font-size: 16px; /* <16px заставляет iOS зумить страницу при фокусе */
	}
}

/* ═══════════ МОБИЛЬНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ (эталон 4a Мобайл) ═══════════ */
/*
 * Эталон задаёт секциям свои мобильные паддинги:
 * hero 28/6 · Новинки 26/4 · Как это работает 22/4 · инфоблоки 22/4 · О сервисе 22/20.
 * У нас стояли десктопные (60/52, 52/8, 56/8), из-за чего под шапкой зияла дыра
 * почти вдвое больше эталонной.
 */
@media (max-width: 767px) {
	.posm-hero-row  { padding-top: 28px; padding-bottom: 6px; }
	.posm-strip-row { padding-top: 0; padding-bottom: 0; }
	.posm-home-new  { padding-top: 26px; padding-bottom: 4px; }
	.posm-how-row   { padding-top: 22px; padding-bottom: 4px; }
	.posm-info-row  { padding-top: 22px; padding-bottom: 4px; }
	.posm-about-row { padding-top: 22px; padding-bottom: 20px; }

	.l-section.posm-footer-row { padding-top: 28px; }

	/* Лента категорий на мобайле — компактнее. */
	.posm-strip-row .l-section-h {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* ═══════════════════ ХЕНДОФФ 3: СТРАНИЦА ТОВАРА (6a) ═══════════════════ */
/*
 * Эталоны: mockups/design_handoff_posm_top 3/screenshots/07-… и 08-…
 * Замерено по DOM эталона: контейнер 1280 + паддинг 44, сетка 560 / 1fr,
 * gap 40 → правая колонка ровно 592px.
 *
 * CSS хендоффа (code/custom.css) бьёт по разметке штатного WooCommerce
 * (div.product, .summary, form.cart, .woocommerce-product-gallery) — её на
 * posm.top нет: страницу рендерит Impreza-шаблон #222 нашими шорткодами
 * (inc/single-product.php). Числа взяты оттуда, селекторы — по нашему DOM.
 */

/* ─── Хлебные крошки (каталог + товар) ─── */
/*
 * Обычный строчный поток, а НЕ flex. На flex это уже ломалось: дети <li> при
 * `display:flex` блокифицируются, у ссылки и у <span> текущей страницы высота
 * строки считается по-разному, и последняя крошка съезжала вниз на 4.3px
 * относительно соседних. Крошки — это строка текста: у инлайна общая базовая
 * линия по определению, и переносы он делает сам.
 */
.posm-crumbs ol {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--posm-font);
	font-size: 13px;
	line-height: 1.5;
	color: var(--posm-tan);
}

.posm-crumbs li {
	display: inline;
}

/* Разделитель «/» — псевдоэлементом: в разметке его нет, он не должен
   попадать в микроразметку BreadcrumbList и в выдачу. */
.posm-crumbs li + li::before {
	content: "/";
	margin: 0 8px;
	color: var(--posm-border);
}

.posm-crumbs a {
	color: var(--posm-tan);
	text-decoration: none;
	transition: color 0.15s ease;
}

.posm-crumbs a:hover { color: var(--posm-blue); }

.posm-crumbs .posm-crumb-current { color: var(--posm-ink); }

/* ─── Сетка страницы ─── */
/*
 * Ширину контента здесь НЕ переопределяем: её задаёт общее правило
 * `.l-section-h, .l-subheader-h { max-width: 1192px }` — то же число, по которому
 * идут шапка, главная, каталог и футер. (1192 = контейнер макета 1280 минус
 * боковые паддинги 44.)
 *
 * Раньше здесь стоял max-width: 1280px, и это был баг: на окне РОВНО 1280 контент
 * упирался в паддинг секции и случайно совпадал с остальными страницами, а на
 * широком экране расходился — контент страницы товара выходил шире шапки
 * (логотип и корзина оказывались «внутри» контента), а карточки кросс-селла,
 * деля 1280 на 4 колонки, становились крупнее каталожных: 308px против 286px.
 * Проверять ширины нужно НЕ на 1280.
 */

/*
 * Колонки 560 / 1fr, gap 40 (замерено по DOM эталона: правая колонка = 592px).
 * Дробей WPBakery под 560/592 не существует, поэтому в шаблоне стоит 1/2 + 1/2,
 * а реальные ширины задаются здесь — только с ≥768px. Мобильную раскладку
 * (одна колонка) оставляем Impreza: её собственное правило строит колонки из
 * переменной --columns, и перебивать его грид-шаблоном значит воевать с темой.
 */
/*
 * Сетка 560/1fr — только с 1200px. На планшете (768–1199) фиксированные 560px
 * съедали почти весь контейнер: при 1024 правая колонка выходила 336px, а блок
 * заказа требует 412 (степпер 170 + зазор 12 + кнопка 230) — кнопка «В корзину»
 * вылезала за экран и растягивала документ на 54px. Проверять надо не только 1280.
 */
@media (min-width: 768px) and (max-width: 1199px) {
	.posm-pdp-cols > .l-section-h > .g-cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 28px;
	}

	/* Фото уже не квадрат 560 — высота фиксирована, contain держит пропорции. */
	.posm-gallery-viewport { height: 440px; }
}

@media (min-width: 1200px) {
	.posm-pdp-cols > .l-section-h > .g-cols {
		grid-template-columns: 560px 1fr;
		gap: 40px;
	}

}

/*
 * Sticky средствами CSS, а не опцией Impreza sticky="1": та вешает свой JS
 * и свой отступ сверху, здесь же нужен ровно top:24px из макета.
 * align-self:start обязателен — иначе колонка растянется на всю высоту грида
 * и «прилипать» будет нечему. Действует и на планшете — там тоже две колонки.
 */
@media (min-width: 768px) {
	.posm-pdp-col-gallery {
		position: sticky;
		top: 24px;
		align-self: start;
	}
}

/* ─── Галерея ─── */
/*
 * Одна лента на все размеры: scroll-snap даёт нативный свайп на телефоне,
 * миниатюры на десктопе просто скроллят её же. Высота контейнера фиксирована,
 * фото внутри — object-fit: contain, поэтому пропорции снимка не меняют
 * геометрию страницы (пункт приёмки хендоффа).
 */
.posm-gallery { position: relative; }

.posm-gallery-viewport {
	display: flex;
	width: 100%;
	height: 560px;
	background: #fff;
	border-radius: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.posm-gallery-viewport::-webkit-scrollbar { display: none; }

.posm-gallery-slide {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	scroll-snap-align: center;
}

.posm-gallery-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 24px;
	box-sizing: border-box;
}

.posm-gallery-slide--empty {
	background: linear-gradient(135deg, var(--posm-ph-1), var(--posm-ph-2));
	border-radius: 18px;
	font-size: 14px;
	color: var(--posm-tan);
}

.posm-pdp-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 5px 11px;
	border-radius: 14px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.posm-pdp-badge--hit { background: var(--posm-ink); }
.posm-pdp-badge--new { background: var(--posm-blue); }

.posm-gallery-thumbs {
	display: flex;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.posm-gallery-thumb {
	width: 76px;
	height: 76px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--posm-border);
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.posm-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.posm-gallery-thumb.is-active { border: 2px solid var(--posm-blue); }

.posm-gallery-dots { display: none; }

/* ─── Правая колонка ─── */
.posm-pdp-meta {
	font-family: var(--posm-font);
	font-size: 13px;
	color: var(--posm-tan);
}

/* Impreza добавляет h1..h6 { padding: 1.5rem 0 0 } — на заголовке товара
   это лишний отступ сверху, гасим адресно. */
.posm-pdp-title.w-post-elm.post_title,
.posm-pdp-title {
	margin: 6px 0 0;
	padding: 0;
	font-family: var(--posm-font-display);
	font-size: 38px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--posm-ink);
}

.posm-stock-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.posm-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border-radius: 16px;
	font-size: 13px;
	font-weight: 600;
}

.posm-stock--in { background: #E7F3EB; color: #1F7A43; }
.posm-stock--out { background: #FDF1E0; color: #A96A11; }

/* Точка перед «В наличии» — псевдоэлементом, чтобы не тащить символ в текст
   (скринридер читал бы «чёрный кружок»). */
.posm-stock--in::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.posm-stock-note {
	font-size: 13px;
	color: var(--posm-gray);
}

/* ─── Блок заказа ─── */
.posm-pdp-order {
	margin-top: 16px;
	padding: 22px;
	background: #fff;
	border-radius: 16px;
}

.posm-pdp-price {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.posm-pdp-amount,
.posm-pdp-amount .amount,
.posm-pdp-price .posm-price-request {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--posm-ink);
}

.posm-pdp-price .posm-price-request { color: var(--posm-blue); }

/*
 * Товар со скидкой: WooCommerce отдаёт <del>старая</del><ins>новая</ins>.
 * Те же правила, что для карточки каталога (.w-grid-item .price): старую цену
 * уводим в мелкую зачёркнутую подпись, у новой снимаем подчёркивание <ins>.
 */
.posm-pdp-amount del,
.posm-cross-price del {
	margin-right: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--posm-gray);
	opacity: 1;
}

.posm-cross-price del { font-size: 13px; }

.posm-pdp-amount ins,
.posm-cross-price ins {
	background: none;
	text-decoration: none;
	color: inherit;
	font-weight: 800;
}

.posm-pdp-price-note {
	font-size: 13px;
	color: var(--posm-gray);
}

/* Цена дублируется в липкой панели на мобилке; на десктопе строки нет. */
.posm-pdp-price-inline { display: none; }

/*
 * flex-wrap: wrap — предохранитель. Степпер (170) + кнопка (230) требуют 412px;
 * если колонка окажется уже (планшет, длинная локаль, будущая правка сетки),
 * кнопка обязана перенестись на строку ниже, а не вылезти за экран, растянув
 * документ по горизонтали.
 */
.posm-order--pdp {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
	padding-top: 0;
}

.posm-order--pdp .posm-qty {
	flex: none;
	width: 170px;
	height: 54px;
	padding: 0 6px;
	border-radius: 12px;
}

.posm-order--pdp .posm-qty-btn {
	width: 38px;
	height: 44px;
}

/* Кнопка «В корзину» — 230×54, НЕ на всю ширину (пункт приёмки). */
.posm-cart--wide {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: none;
	width: 230px;
	height: 54px;
	border-radius: 12px;
	background: var(--posm-blue);
	color: #fff;
	font-family: var(--posm-font);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.posm-cart--wide:hover { background: var(--posm-blue-hover); }

/*
 * Планшет: 230px — десктопное число, в узкую колонку (≈410px под контент) степпер
 * с кнопкой одной строкой не влезают, и кнопка переносилась вниз. Даём ей ужиматься.
 *
 * Блок стоит ЗДЕСЬ, после базовых правил кнопки и степпера: у него та же
 * специфичность, и объявленный выше по файлу медиазапрос проиграл бы базовому
 * `width: 230px` просто по порядку. Медиазапрос силы не добавляет.
 */
@media (min-width: 768px) and (max-width: 1199px) {
	.posm-cart--wide {
		width: auto;
		flex: 1 1 160px;
	}

	.posm-order--pdp .posm-qty { flex: none; width: 150px; }
}

.posm-pdp-order--request .posm-order--request { margin-top: 16px; }

.posm-service-line {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 14px;
	font-size: 13px;
	color: var(--posm-gray);
}

/* ─── Плитки логистики ─── */
.posm-logistics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 14px;
}

.posm-logistics-tile {
	padding: 14px 16px;
	background: #fff;
	border-radius: 12px;
}

.posm-logistics-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--posm-tan);
}

.posm-logistics-value {
	margin-top: 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--posm-ink);
}

/* ─── Характеристики и описание ─── */
.posm-pdp-h2 {
	margin: 0 0 12px;
	padding: 0; /* Impreza: h1..h6 { padding: 1.5rem 0 0 } */
	font-family: var(--posm-font);
	font-size: 17px;
	font-weight: 700;
	color: var(--posm-ink);
}

.posm-specs { margin-top: 26px; }

.posm-specs-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
	margin: 0;
}

.posm-spec {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--posm-border);
}

.posm-spec dt {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--posm-gray);
}

.posm-spec dd {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	text-align: right;
	color: var(--posm-ink);
}

.posm-specs-toggle { display: none; }

.posm-pdp-desc { margin-top: 26px; }

.posm-pdp-desc-body {
	max-width: 600px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--posm-gray);
}

.posm-pdp-desc-body p { margin: 0 0 10px; }

/* ─── «С этим товаром покупают» ─── */
.posm-cross { margin-top: 8px; }

.posm-cross-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.posm-cross-head h2 {
	margin: 0;
	padding: 0;
	font-family: var(--posm-font-display);
	font-size: 32px;
	font-weight: 600;
	color: var(--posm-ink);
}

.posm-cross-head a {
	font-size: 14px;
	font-weight: 600;
	color: var(--posm-blue);
	text-decoration: none;
	white-space: nowrap;
}

.posm-cross-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.posm-cross-item {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.posm-cross-item:hover { box-shadow: 0 10px 28px rgba(22, 32, 44, 0.13); }

/*
 * Фото 200px, как в карточке каталога и «Новинок» на главной. В хендоффе для
 * кросс-селла стоит 160px, но тогда одни и те же товары выглядят на разных
 * страницах разными по размеру — заказчик это заметил первым делом. Карточка
 * везде одна: 200px (моб. 140), скругление 16 (моб. 14).
 */
.posm-cross-photo {
	display: block;
	height: 200px;
	background: linear-gradient(135deg, var(--posm-ph-1), var(--posm-ph-2));
}

.posm-cross-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.posm-cross-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 14px 16px 16px;
}

.posm-cross-sub {
	font-size: 12px;
	color: var(--posm-tan);
}

.posm-cross-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 41px;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--posm-ink);
	text-decoration: none;
}

.posm-cross-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
}

.posm-cross-price {
	font-size: 19px;
	font-weight: 800;
	color: var(--posm-ink);
}

.posm-cross-price .posm-price-request {
	font-size: 15px;
	font-weight: 700;
	color: var(--posm-blue);
}

/* Быстрый «+» вместо степпера — по эталону: это доп. к уже собранному заказу. */
.posm-cross-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--posm-blue);
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.posm-cross-btn:hover { background: var(--posm-blue-hover); }

.posm-cross-btn--request {
	background: transparent;
	border: 1.5px solid var(--posm-blue);
	color: var(--posm-blue);
}

.posm-cross-btn--request:hover { background: var(--posm-blue-light); }

/* ─── Мобайл ─── */
@media (max-width: 767px) {
	/*
	 * На товаре мобильный эталон обрывает цепочку на виде: «Каталог / Буклет».
	 * Прячем только здесь: в каталоге текущая крошка — сам «Каталог», и без неё
	 * осталась бы одинокая «Главная».
	 */
	.single-product .posm-crumbs .posm-crumb-current { display: none; }

	/* Фото — фиксированные 320px на всю ширину, свайп + точки. */
	.posm-gallery-viewport {
		height: 320px;
		border-radius: 16px;
	}

	.posm-gallery-slide img { padding: 16px; }

	.posm-gallery-thumbs { display: none; }

	.posm-gallery-dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin-top: 10px;
	}

	.posm-gallery-dot {
		width: 6px;
		height: 6px;
		border-radius: 3px;
		background: var(--posm-border);
		transition: width 0.2s ease, background-color 0.2s ease;
	}

	.posm-gallery-dot.is-active {
		width: 18px;
		background: var(--posm-blue);
	}

	.posm-pdp-title,
	.posm-pdp-title.w-post-elm.post_title { font-size: 24px; }

	.posm-stock-row { flex-wrap: wrap; gap: 8px; }

	/*
	 * Липкая панель заказа снизу. В эталоне блока заказа в потоке НЕТ — цена,
	 * степпер и кнопка живут только в этой панели.
	 *
	 * Поэтому fixed, а не sticky: sticky оставляет блок в потоке, и между
	 * «наличием» и плитками появилась бы белая полоса, которой в макете нет.
	 * fixed выносит панель из потока и держит её видимой на всём скролле
	 * («панель заказа всегда видна» — пункт приёмки). Место под неё
	 * компенсируется паддингом страницы ниже.
	 */
	.posm-pdp-order {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 12px 16px;
		border-radius: 0;
		border-top: 1px solid var(--posm-border);
		box-shadow: 0 -6px 18px rgba(22, 32, 44, 0.08);
	}

	/* Хвост страницы не должен прятаться под панелью. */
	.single-product .l-main { padding-bottom: 86px; }

	/* Цена — одной строкой, без подписи «за 1 шт · с НДС» и без переносов. */
	.posm-pdp-price { flex: none; }
	.posm-pdp-price-note { display: none; }

	.posm-pdp-amount,
	.posm-pdp-amount .amount,
	.posm-pdp-price .posm-price-request {
		font-size: 19px;
		white-space: nowrap;
	}

	.posm-pdp-price .posm-price-request { font-size: 15px; }

	.posm-order--pdp {
		gap: 8px;
		margin: 0 0 0 auto;
	}

	.posm-order--pdp .posm-qty {
		width: 126px;
		height: 46px;
		border-radius: 11px;
	}

	.posm-order--pdp .posm-qty-btn { width: 32px; height: 40px; }

	/* Кнопка сжимается до иконки 46×46 — подпись скрыта, зона нажатия ≥44px. */
	.posm-cart--wide {
		width: 46px;
		height: 46px;
		gap: 0;
		border-radius: 11px;
	}

	.posm-cart--wide .posm-cart-label { display: none; }

	.posm-pdp-order--request { flex-wrap: wrap; }
	.posm-pdp-order--request .posm-order--request { flex: 1; margin: 0 0 0 auto; }
	.posm-pdp-order--request .posm-request-btn { height: 46px; }

	.posm-service-line { display: none; }

	.posm-logistics { gap: 8px; }
	.posm-logistics-tile { padding: 11px 13px; border-radius: 11px; }
	.posm-logistics-label { font-size: 10px; }
	.posm-logistics-value { font-size: 13px; }

	.posm-specs-list { grid-template-columns: 1fr; }

	/* Хвост характеристик прячем за кнопкой «Все характеристики ▾». */
	.posm-spec--extra { display: none; }
	.posm-specs.is-open .posm-spec--extra { display: flex; }

	.posm-specs-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 12px;
		padding: 0;
		background: none;
		border: 0;
		font-family: var(--posm-font);
		font-size: 14px;
		font-weight: 600;
		color: var(--posm-blue);
		cursor: pointer;
	}

	.posm-specs-toggle::after {
		content: "▾";
		font-size: 11px;
	}

	.posm-specs.is-open .posm-specs-toggle::after { content: "▴"; }

	.posm-cross-head h2 { font-size: 22px; }

	/*
	 * Сетка 2 колонки — как каталог и «Новинки» на мобильной главной.
	 * В хендоффе здесь горизонтальная лента карточек 200px, но она физически
	 * не влезает в 390px экран (карточки уезжают за край), и товар выглядит
	 * иначе, чем тот же товар на главной. Отступление от макета сознательное,
	 * по требованию заказчика.
	 */
	.posm-cross-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.posm-cross-item {
		width: auto;
		border-radius: 14px;
	}

	.posm-cross-photo { height: 140px; }
	.posm-cross-body { padding: 11px 12px 12px; }
	.posm-cross-sub { font-size: 11px; }
	.posm-cross-title { font-size: 13px; height: 34px; }
	.posm-cross-price { font-size: 15px; }
	.posm-cross-btn { width: 40px; height: 40px; border-radius: 11px; }
}

/* ─── Чипы фильтров на мобилке: лента с горизонтальным скроллом ─── */
/*
 * На десктопе чипы переносятся по строкам (см. .posm-chips .w-filter-item выше),
 * на телефоне эталон требует ленту: 26 подложек в столбик съели бы весь экран.
 * Лента идёт от края до края — отсюда отрицательные поля на ширину паддинга.
 */
@media (max-width: 767px) {
	.posm-chips .w-filter-item,
	.posm-chips .w-filter-item.type_checkbox {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		scrollbar-width: none;
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.posm-chips .w-filter-item::-webkit-scrollbar { display: none; }

	/* Метка фасета не должна сжиматься под напором чипов. */
	.posm-chips .w-filter-item-title { flex: none; }

	.posm-chips .w-filter-item-value { flex: none; }
}

/* ────────────────────────────────────────────────────────────────────────
 * Модалка «Сделать запрос» + скин Gravity Forms
 *
 * Каркас .posm-modal — общий: переиспользуется формой запроса и (позже)
 * модалкой авторизации. GF-скин scoped и на модалку, и на форму в контенте
 * страницы /zapros/ (.posm-request-form).
 * ──────────────────────────────────────────────────────────────────────── */

.posm-modal[hidden] { display: none !important; }

.posm-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

body.posm-modal-open { overflow: hidden; }

.posm-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(22, 32, 44, 0.55);
	backdrop-filter: blur(2px);
}

.posm-modal-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 24px 60px -20px rgba(22, 32, 44, 0.45);
	padding: 30px 30px 28px;
}

.posm-modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 34px;
	height: 34px;
	border: 0;
	background: none;
	font-size: 30px;
	line-height: 1;
	color: var(--posm-gray);
	cursor: pointer;
	border-radius: 8px;
}

.posm-modal-close:hover { color: var(--posm-ink); background: var(--posm-ph-1); }

.posm-modal-title {
	font-family: var(--posm-font-display);
	font-size: 24px;
	line-height: 1.15;
	color: var(--posm-ink);
	margin: 0 0 8px;
}

.posm-modal-sub {
	font-size: 14px;
	line-height: 1.45;
	color: var(--posm-gray);
	margin: 0 0 4px;
}

.posm-modal-product {
	margin-top: 12px;
	padding: 10px 14px;
	background: var(--posm-blue-light);
	border-radius: 10px;
	font-size: 14px;
	color: var(--posm-ink);
}

.posm-modal-body { margin-top: 18px; }

/* GF-скин: инпуты 16px (иначе iOS зумит страницу при фокусе), палитра posm. */
.posm-modal .gform_wrapper,
.posm-request-form .gform_wrapper { margin: 0; }

.posm-modal .gform_wrapper .gfield,
.posm-request-form .gform_wrapper .gfield { margin-bottom: 14px; }

.posm-modal .gform_wrapper .gfield_label,
.posm-request-form .gform_wrapper .gfield_label {
	font-family: var(--posm-font);
	font-weight: 600;
	font-size: 14px;
	color: var(--posm-ink);
	margin-bottom: 6px;
}

.posm-modal .gform_wrapper .gfield_required,
.posm-request-form .gform_wrapper .gfield_required { color: #D6403A; }

.posm-modal .gform_wrapper input[type="text"],
.posm-modal .gform_wrapper input[type="email"],
.posm-modal .gform_wrapper input[type="tel"],
.posm-modal .gform_wrapper textarea,
.posm-request-form .gform_wrapper input[type="text"],
.posm-request-form .gform_wrapper input[type="email"],
.posm-request-form .gform_wrapper input[type="tel"],
.posm-request-form .gform_wrapper textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid var(--posm-border);
	border-radius: 10px;
	background: #fff;
	font-family: var(--posm-font);
	font-size: 16px;
	line-height: 1.3;
	color: var(--posm-ink);
	transition: border-color .15s, box-shadow .15s;
}

.posm-modal .gform_wrapper textarea,
.posm-request-form .gform_wrapper textarea { min-height: 96px; resize: vertical; }

.posm-modal .gform_wrapper input:focus,
.posm-modal .gform_wrapper textarea:focus,
.posm-request-form .gform_wrapper input:focus,
.posm-request-form .gform_wrapper textarea:focus {
	border-color: var(--posm-blue);
	box-shadow: 0 0 0 3px var(--posm-blue-light);
	outline: none;
}

/* Согласие — чекбокс в строку с текстом. */
.posm-modal .gform_wrapper .gfield--type-checkbox .gfield_label,
.posm-request-form .gform_wrapper .gfield--type-checkbox .gfield_label { display: none; }

.posm-modal .gform_wrapper .gchoice,
.posm-request-form .gform_wrapper .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--posm-gray);
}

.posm-modal .gform_wrapper .gchoice label,
.posm-request-form .gform_wrapper .gchoice label { font-size: 13px; color: var(--posm-gray); }

/* Кнопка отправки — синяя, как основные CTA. */
.posm-modal .gform_wrapper .gform_footer input[type="submit"],
.posm-modal .gform_wrapper .gform_footer button,
.posm-request-form .gform_wrapper .gform_footer input[type="submit"],
.posm-request-form .gform_wrapper .gform_footer button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 13px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--posm-blue);
	color: #fff;
	font-family: var(--posm-font);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background .15s;
}

.posm-modal .gform_wrapper .gform_footer input[type="submit"]:hover,
.posm-request-form .gform_wrapper .gform_footer input[type="submit"]:hover { background: var(--posm-blue-hover); }

/* Валидация/подтверждение GF. */
.posm-modal .gform_wrapper .validation_message,
.posm-request-form .gform_wrapper .validation_message { color: #D6403A; font-size: 13px; margin-top: 4px; }

.posm-modal .gform_confirmation_message,
.posm-request-form .gform_confirmation_message {
	padding: 16px 18px;
	background: var(--posm-blue-light);
	border-radius: 12px;
	color: var(--posm-ink);
	font-size: 15px;
	line-height: 1.5;
}

@media (max-width: 480px) {
	.posm-modal-dialog { padding: 26px 20px 24px; border-radius: 16px; }
	.posm-modal-title { font-size: 21px; }
}

/* ────────────────────────────────────────────────────────────────────────
 * 404 (child 404.php)
 * ──────────────────────────────────────────────────────────────────────── */

.posm-404 {
	max-width: 640px;
	margin: 0 auto;
	padding: 40px 0 20px;
	text-align: center;
}

.posm-404-code {
	font-family: var(--posm-font-display);
	font-size: 120px;
	line-height: 1;
	font-weight: 600;
	color: var(--posm-blue);
	letter-spacing: -0.02em;
}

.posm-404-title {
	font-family: var(--posm-font-display);
	font-size: 32px;
	line-height: 1.15;
	color: var(--posm-ink);
	margin: 12px 0 10px;
}

.posm-404-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--posm-gray);
	margin: 0 auto 26px;
	max-width: 460px;
}

.posm-404-search {
	display: flex;
	gap: 8px;
	max-width: 480px;
	margin: 0 auto 22px;
}

.posm-404-search input[type="search"] {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid var(--posm-border);
	border-radius: 12px;
	background: #fff;
	font-family: var(--posm-font);
	font-size: 16px;
	color: var(--posm-ink);
}

.posm-404-search input[type="search"]:focus {
	border-color: var(--posm-blue);
	box-shadow: 0 0 0 3px var(--posm-blue-light);
	outline: none;
}

.posm-404-search button {
	flex: none;
	padding: 12px 22px;
	border: 0;
	border-radius: 12px;
	background: var(--posm-blue);
	color: #fff;
	font-family: var(--posm-font);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}

.posm-404-search button:hover { background: var(--posm-blue-hover); }

.posm-404-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.posm-404-btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 26px;
	border-radius: 12px;
	border: 1px solid var(--posm-border);
	background: #fff;
	color: var(--posm-ink);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}

.posm-404-btn:hover { border-color: var(--posm-blue); color: var(--posm-blue); }

.posm-404-btn--primary {
	background: var(--posm-blue);
	border-color: var(--posm-blue);
	color: #fff;
}

.posm-404-btn--primary:hover { background: var(--posm-blue-hover); border-color: var(--posm-blue-hover); color: #fff; }

.posm-404-vids {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	justify-content: center;
	align-items: center;
	font-size: 14px;
}

.posm-404-vids-label { color: var(--posm-gray); }

.posm-404-vids a {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--posm-blue-light);
	color: var(--posm-blue);
	text-decoration: none;
	font-weight: 500;
}

.posm-404-vids a:hover { background: var(--posm-blue); color: #fff; }

@media (max-width: 480px) {
	.posm-404-code { font-size: 88px; }
	.posm-404-title { font-size: 26px; }
	.posm-404-search { flex-direction: column; }
	.posm-404-search button { width: 100%; }
}

/* ────────────────────────────────────────────────────────────────────────
 * Пункт меню «Личный кабинет» (вместо иконки в шапке; стиль как vykras).
 * User-иконка перед текстом — CSS-маской, красится текущим цветом пункта.
 * ──────────────────────────────────────────────────────────────────────── */

.posm-account-item > a,
.posm-account-item > .w-nav-anchor { display: inline-flex; align-items: center; gap: 8px; }

.posm-account-item > a .w-nav-title::before,
.posm-account-item > .w-nav-anchor .w-nav-title::before,
.posm-account-item > a::before {
	content: '';
	width: 18px;
	height: 18px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
}

/* .w-nav-title есть — иконку добавляет только он, чтобы не задвоить. */
.posm-account-item > a:has(.w-nav-title)::before,
.posm-account-item > .w-nav-anchor:has(.w-nav-title)::before { content: none; }

/* Мобильный drawer: отделяем пункт линией сверху, как vykras. */
@media (max-width: 899px) {
	.posm-account-item {
		margin-top: 12px;
		padding-top: 6px;
		border-top: 1px solid var(--posm-border);
	}
}

/* Кабинет — один пункт, разный вид по брейкпоинтам:
 *   десктоп — иконка-человечек слева от корзины (.posm-account, инжектит main.js);
 *   бургер  — тот же пункт словом «Личный кабинет» (.posm-account-item).
 * Поэтому на десктопе прячем текстовый пункт, а иконку — на мобиле. */
@media (min-width: 900px) {
	.posm-account-item { display: none; }
}

.posm-account {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--posm-ink);
	margin-right: 14px;
	transition: color 0.15s;
}
.posm-account:hover { color: var(--posm-blue); }

@media (max-width: 899px) {
	.posm-account { display: none; }
}

/* ────────────────────────────────────────────────────────────────────────
 * GF-формы компактнее: orbital-тема ставит большой row-gap между полями,
 * из-за чего форма растягивается. Жмём grid-gap и убираем margin у .gfield.
 * Действует и в модалке запроса, и на /zapros/, и в контактах (.posm-request-form).
 * ──────────────────────────────────────────────────────────────────────── */

.posm-modal .gform_wrapper .gform_fields,
.posm-request-form .gform_wrapper .gform_fields {
	grid-row-gap: 12px !important;
	row-gap: 12px !important;
}

.posm-modal .gform_wrapper .gfield,
.posm-request-form .gform_wrapper .gfield {
	margin: 0 !important;
	padding: 0 !important;
}

.posm-modal .gform_wrapper .gfield_label,
.posm-request-form .gform_wrapper .gfield_label {
	margin-bottom: 5px !important;
}

.posm-modal .gform_wrapper .ginput_container,
.posm-request-form .gform_wrapper .ginput_container {
	margin-top: 0 !important;
}

.posm-modal .gform_wrapper .gform_footer,
.posm-request-form .gform_wrapper .gform_footer {
	margin: 16px 0 0 !important;
	padding: 0 !important;
}

.posm-modal .gform_wrapper .gfield--type-checkbox,
.posm-request-form .gform_wrapper .gfield--type-checkbox {
	margin-top: 2px !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Служебные страницы — единый layout как у каталога: ПОЛНАЯ ширина контента
 * (наследуется от .l-section-h, ~1192px), крошки того же компонента .posm-crumbs,
 * тот же верхний зазор ~50px от шапки. Раньше контакты были уже (980px), /zapros/
 * ещё уже (640px), крошки — другой компонент на другой высоте. Теперь всё едино.
 * ──────────────────────────────────────────────────────────────────────── */

.posm-svc { /* без max-width — ширина контента = как на каталоге */ }

.posm-svc .posm-crumbs { margin-bottom: 18px; }

.posm-svc-title {
	font-family: var(--posm-font-display);
	font-size: 40px;
	line-height: 1.1;
	color: var(--posm-ink);
	margin: 0 0 12px;
}

.posm-svc-lead {
	font-size: 17px;
	line-height: 1.5;
	color: var(--posm-gray);
	margin: 0 0 26px;
	max-width: 620px;
}

/* Форма запроса — читаемой ширины (не на всю страницу), слева. */
.posm-svc-form { max-width: 560px; }

/* Текстовые служебные страницы (оферта, доставка и т.п.) — читаемая колонка. */
.posm-svc-body { max-width: 760px; font-size: 16px; line-height: 1.65; color: var(--posm-ink); }
.posm-svc-body h2 { font-family: var(--posm-font-display); font-size: 26px; margin: 28px 0 12px; }
.posm-svc-body h2:first-child { margin-top: 0; }
.posm-svc-body h3 { font-size: 18px; font-weight: 600; margin: 22px 0 8px; }
.posm-svc-body p { margin: 0 0 14px; }
.posm-svc-body ul { margin: 0 0 16px; padding: 0; list-style: none; }
.posm-svc-body li { position: relative; padding-left: 22px; margin: 0 0 10px; }
.posm-svc-body li::before {
	content: ""; position: absolute; left: 4px; top: 10px;
	width: 6px; height: 6px; border-radius: 50%; background: var(--posm-blue);
}
.posm-svc-body a { color: var(--posm-blue); text-decoration: underline; text-underline-offset: 2px; }
.posm-svc-body a:hover { color: var(--posm-blue-hover); }
.posm-svc-body strong { font-weight: 600; color: var(--posm-ink); }

/* Титлбар Impreza на служебных страницах не нужен. */
.posm-svc-page .l-titlebar { display: none; }

@media (max-width: 560px) {
	.posm-svc-title { font-size: 30px; }
}

/* Шапка Impreza — position:fixed (80px десктоп / 60px мобайл, из build-header.sh),
 * перекрывает верх контента. Верхний padding секции служебной страницы даёт
 * КЛИРЕНС шапки + видимый зазор 50px до крошки (как на каталоге). Итог: крошка
 * на той же высоте, что на каталоге/товаре. */
.posm-svc-page .l-main > .l-section,
.posm-contacts-page .l-main > .l-section {
	padding-top: 0 !important;
}
.posm-svc-page .l-main > .l-section > .l-section-h,
.posm-contacts-page .l-main > .l-section > .l-section-h {
	padding-top: 100px !important; /* 80 шапка + 20 зазор (как skotovody) */
}

@media (max-width: 899px) {
	.posm-svc-page .l-main > .l-section > .l-section-h,
	.posm-contacts-page .l-main > .l-section > .l-section-h {
		padding-top: 80px !important; /* 60 шапка + 20 зазор */
	}
}

/* Каталог и товар: крошка тоже на 20px от шапки (было 50 и 34 — разнобой).
 * Секция уже даёт клиренс шапки через .l-section-h (80px); её собственный
 * верхний padding = видимый зазор до крошки. Ставим 20px везде. */
.post-type-archive-product .l-main > .l-section:first-of-type,
.woocommerce-shop .l-main > .l-section:first-of-type,
.single-product .l-main > .l-section:first-of-type {
	padding-top: 20px !important;
}