/*
 * Декоративный слой: главная страница и текстовые разделы.
 *
 * Подключается везде, кроме каталога и карточки товара. В каталоге цвет даёт
 * сам товар, и градиенты за его спиной мешали бы сравнивать флаконы.
 *
 * Приём один на весь файл: белый фон остаётся белым, а цвет приходит
 * размытыми радиальными пятнами в цветах ароматов. Линейных градиентных
 * полос во всю ширину здесь нет намеренно — они превращают любую страницу
 * в одинаковый «баннер сверху».
 */

/* ------------------------------------------------------- Первый экран */

.wg-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(32px, 6vw, 72px) 0 clamp(40px, 6vw, 80px);
	background: var(--ground);
}

/* Поле из цветных пятен. Цвета взяты из палитры ароматов: яблоко, арбуз,
   лайм, морской бриз. Пятна размыты и приглушены — они читаются как
   отсвет от продукта, а не как отдельная картинка. */
.wg-hero__field {
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 130%;
	pointer-events: none;
	background:
		radial-gradient(38% 40% at 18% 22%, rgba(126, 211, 33, .20), transparent 70%),
		radial-gradient(34% 36% at 82% 14%, rgba(61, 191, 224, .22), transparent 70%),
		radial-gradient(30% 34% at 68% 76%, rgba(255, 94, 126, .16), transparent 70%),
		radial-gradient(28% 30% at 32% 82%, rgba(255, 162, 107, .16), transparent 70%);
	filter: blur(6px);
}

.wg-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.wg-hero h1 {
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 800;
	letter-spacing: -.035em;
	margin-bottom: 18px;
}

.wg-hero .wg-lead { max-width: 46ch; }

.wg-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 26px 0 24px;
}

.wg-hero__points {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--ink-soft);
}

.wg-hero__points li {
	display: flex;
	align-items: center;
	gap: 9px;
}

.wg-hero__points .wg-icon { color: var(--ok); flex: none; }

.wg-hero__media {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 320px;
}

.wg-hero__bottle {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 440px;
}

.wg-hero__bottle::before {
	content: "";
	position: absolute;
	inset: 12% 8% -4% 8%;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 60%, var(--dot, var(--cat-a)) 0%, transparent 68%);
	opacity: .3;
	filter: blur(10px);
}

.wg-hero__bottle img {
	position: relative;
	max-height: 460px;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: drop-shadow(0 24px 40px rgba(18, 21, 27, .14));
}

/* Квадратная картинка с линейкой — шире одного флакона. */
.wg-hero__bottle--lineup { max-width: 540px; }

/* Фон у фото не чисто белый — скругляем, чтобы читалось как карточка. */
.wg-hero__bottle--lineup img {
	max-height: 540px;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

/* Плашка «N позиций» — под нижним краем, а не поверх флаконов. */
.wg-hero__media:has(.wg-hero__bottle--lineup) .wg-hero__badge { bottom: -34px; }

.wg-hero__badge {
	position: absolute;
	right: 4%;
	bottom: 6%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow);
	font-size: 12px;
	line-height: 1.25;
	color: var(--ink-soft);
}

.wg-hero__badge b {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--ink);
}

/* ------------------------------------------------------- Преимущества */

.wg-features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.wg-feature {
	position: relative;
	padding: 22px 20px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	overflow: hidden;
}

/* Оттенок у каждой карточки свой: полоса из четырёх одинаковых плашек
   читается как таблица, а не как набор доводов. */
.wg-feature::before {
	content: "";
	position: absolute;
	inset: -60% 40% auto -30%;
	height: 140%;
	opacity: .1;
	pointer-events: none;
}

.wg-feature[data-n="1"]::before { background: radial-gradient(circle at 30% 30%, #17c3e6, transparent 60%); }
.wg-feature[data-n="2"]::before { background: radial-gradient(circle at 30% 30%, #7ed321, transparent 60%); }
.wg-feature[data-n="3"]::before { background: radial-gradient(circle at 30% 30%, #ffa26b, transparent 60%); }
.wg-feature[data-n="4"]::before { background: radial-gradient(circle at 30% 30%, #ff5e7e, transparent 60%); }

.wg-feature__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: #fff;
	box-shadow: var(--shadow-sm);
	color: var(--action);
}

.wg-feature h3 {
	position: relative;
	font-size: 16px;
	margin: 0 0 6px;
}

.wg-feature p {
	position: relative;
	margin: 0;
	font-size: 14px;
	color: var(--ink-soft);
}

/* ------------------------------------------------ Плитки категорий */

.wg-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.wg-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	min-height: 200px;
	padding: 24px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.wg-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
	color: var(--ink);
}

.wg-tile__glow {
	position: absolute;
	inset: -30% -20% 20% -20%;
	background: radial-gradient(60% 70% at 70% 20%, var(--cat-a), transparent 70%),
	            radial-gradient(60% 70% at 20% 40%, var(--cat-b), transparent 70%);
	opacity: .16;
	transition: opacity .25s ease, transform .3s ease;
}

.wg-tile:hover .wg-tile__glow { opacity: .28; transform: scale(1.06); }

/* Фото флакона справа: белый фон снимка растворяется в плитке. */
.wg-tile--photo { min-height: 240px; }

/* Названия переносятся по-разному, поэтому текст — от верха плитки,
   а число товаров — внизу, на одной линии со стрелкой. */
.wg-tile--photo { align-items: stretch; }

.wg-tile--photo .wg-tile__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 52%;
}

.wg-tile--photo .wg-tile__body em { margin-top: auto; }

.wg-tile--photo .wg-tile__arrow { align-self: flex-end; }

/* Левее стрелки, вписано в высоту плитки. */
.wg-tile__photo {
	position: absolute;
	top: 16px;
	right: 64px;
	bottom: 16px;
	width: 30%;
	pointer-events: none;
}

.wg-tile__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	mix-blend-mode: multiply;
	transition: transform .3s ease;
}

.wg-tile:hover .wg-tile__photo img { transform: translateY(-4px) scale(1.03); }

/* Стрелка поверх фото, а не под ним. */
.wg-tile--photo .wg-tile__arrow { z-index: 1; }

.wg-tile__body {
	position: relative;
	display: grid;
	gap: 5px;
}

.wg-tile__body b {
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.wg-tile__body span { font-size: 14px; color: var(--ink-soft); }

.wg-tile__body em {
	font-style: normal;
	font-size: 12px;
	color: var(--ink-faint);
}

.wg-tile__arrow {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--shadow-sm);
	color: var(--action);
	transition: transform .2s ease;
}

.wg-tile:hover .wg-tile__arrow { transform: translateX(4px); }

/* ------------------------------------------------------- Ароматы */

.wg-scents { background: var(--surface); }

.wg-scents__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}

.wg-scent {
	position: relative;
	display: grid;
	gap: 2px;
	padding: 18px;
	border-radius: var(--radius);
	background: #fff;
	color: var(--ink);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.wg-scent:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
	color: var(--ink);
}

.wg-scent__blob {
	position: absolute;
	right: -18px;
	top: -18px;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--dot);
	opacity: .28;
	transition: transform .25s ease, opacity .25s ease;
}

.wg-scent:hover .wg-scent__blob { transform: scale(1.25); opacity: .4; }

.wg-scent b {
	position: relative;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
}

.wg-scent em {
	position: relative;
	font-style: normal;
	font-size: 12px;
	color: var(--ink-faint);
}

/* ----------------------------------------------------- Производство */

.wg-production__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.wg-production__media {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
}

/* -------------------------------------------------------- Заглушки */

.wg-ph {
	position: relative;
	margin: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(70% 80% at 30% 20%, color-mix(in srgb, var(--ph-tone, #17c3e6) 22%, transparent), transparent 70%),
		radial-gradient(60% 70% at 80% 80%, color-mix(in srgb, var(--ph-tone, #3b4fe0) 18%, transparent), transparent 70%),
		#fff;
	overflow: hidden;
}

.wg-ph__inner {
	display: grid;
	justify-items: center;
	gap: 8px;
	text-align: center;
	max-width: 42ch;
	color: var(--ink-soft);
}

.wg-ph__inner .wg-icon { color: var(--ink-faint); }

.wg-ph__inner b {
	font-family: var(--font-display);
	font-size: 15px;
	color: var(--ink);
}

.wg-ph__inner span {
	font-size: 12px;
	line-height: 1.45;
	color: var(--ink-faint);
}

.wg-ph__file {
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .75);
	color: var(--ink-soft);
	font-size: 11px;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* --------------------------------------------------------- Доставка */

.wg-delivery {
	display: grid;
	grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr) auto;
	gap: clamp(18px, 3vw, 36px);
	align-items: center;
	padding: clamp(22px, 3vw, 32px) clamp(22px, 3.5vw, 40px);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(40% 120% at 0% 50%, rgba(23, 195, 230, .16), transparent 70%),
		var(--action-soft);
	border: 1px solid color-mix(in srgb, var(--action) 14%, transparent);
}

.wg-delivery__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--action);
	color: #fff;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--action) 30%, transparent);
}

.wg-delivery__icon .wg-icon { width: 30px; height: 30px; }

.wg-delivery h2 { margin: 0 0 6px; font-size: clamp(21px, 2.2vw, 27px); text-wrap: balance; }

.wg-delivery p { margin: 0; color: var(--ink-soft); max-width: 46ch; }

.wg-delivery__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
}

.wg-delivery__list li { display: flex; align-items: center; gap: 9px; }

.wg-delivery__list .wg-icon { color: var(--action); flex: none; }

.wg-delivery__more { white-space: nowrap; background: #fff; }

/* --------------------------------------------------------- Оптовый */

.wg-wholesale__box {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(50% 90% at 88% 15%, rgba(23, 195, 230, .18), transparent 70%),
		radial-gradient(45% 80% at 8% 90%, rgba(59, 79, 224, .16), transparent 70%),
		var(--surface);
	border: 1px solid var(--line);
}

.wg-wholesale h2 { max-width: 20ch; }

.wg-wholesale p { color: var(--ink-soft); max-width: 52ch; }

.wg-wholesale__list {
	display: grid;
	gap: 9px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

.wg-wholesale__list li {
	display: flex;
	align-items: center;
	gap: 9px;
}

.wg-wholesale__list .wg-icon { color: var(--ok); flex: none; }

.wg-lead-form {
	padding: 26px;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
}

.wg-lead-form h3 { margin: 0 0 16px; font-size: 19px; }

.wg-lead-form__ok {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	margin-bottom: 14px;
	border-radius: var(--radius-sm);
	background: #edfaf1;
	color: #14713a;
	font-size: 14px;
}

.wg-lead-form__ok .wg-icon { color: var(--ok); flex: none; }

/* --------------------------------------------------------- Статьи */

.wg-articles__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.wg-article {
	position: relative;
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 26px 24px 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #fff;
	color: var(--ink);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.wg-article:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
	color: var(--ink);
}

.wg-article__glow {
	position: absolute;
	inset: -50% 50% auto -25%;
	height: 130%;
	opacity: .12;
	pointer-events: none;
}

.wg-article[data-n="1"] .wg-article__glow { background: radial-gradient(circle at 30% 30%, #3dbfe0, transparent 62%); }
.wg-article[data-n="2"] .wg-article__glow { background: radial-gradient(circle at 30% 30%, #ffd23f, transparent 62%); }
.wg-article[data-n="3"] .wg-article__glow { background: radial-gradient(circle at 30% 30%, #ff7bc7, transparent 62%); }

.wg-article h3 {
	position: relative;
	font-size: 18px;
	margin: 0;
}

.wg-article p {
	position: relative;
	margin: 0;
	font-size: 14px;
	color: var(--ink-soft);
}

.wg-article em {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: var(--action);
	margin-top: 4px;
}

/* FAQ-блок (.wg-faq-section__box) — в theme.css: он нужен и в каталоге,
   где этот файл не подключается. */

/* -------------------------------------------------- Текстовые блоки */

.wg-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
	margin: 26px 0;
	padding: 0;
	list-style: none;
}

.wg-facts > div {
	display: grid;
	gap: 4px;
	padding: 20px;
	border-radius: var(--radius);
	background:
		radial-gradient(80% 100% at 20% 0%, rgba(23, 195, 230, .12), transparent 70%),
		var(--surface);
	border: 1px solid var(--line);
}

.wg-facts strong {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
}

.wg-facts span { font-size: 13px; color: var(--ink-soft); }

.wg-contacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	margin: 24px 0;
}

.wg-contacts > div {
	padding: 22px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: #fff;
}

.wg-contacts h3 { font-size: 16px; margin: 0 0 6px; }
.wg-contacts p { margin: 0 0 8px; font-size: 14px; color: var(--ink-soft); }
.wg-contacts a { font-weight: 600; }

/* -------------------------------------------------- Адаптивность */

@media (max-width: 1000px) {
	.wg-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wg-tiles { grid-template-columns: minmax(0, 1fr); }
	.wg-articles__grid { grid-template-columns: minmax(0, 1fr); }
	.wg-production__grid,
	.wg-wholesale__box { grid-template-columns: minmax(0, 1fr); }
	.wg-production__media { grid-template-columns: 1fr 1fr; }
	.wg-delivery { grid-template-columns: auto minmax(0, 1fr); }
	.wg-delivery__list { grid-column: 2; }
	.wg-delivery__more { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
	.wg-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.wg-hero__media { order: -1; min-height: 240px; }
	.wg-hero__bottle img { max-height: 280px; }
	.wg-hero__badge { right: 0; bottom: 0; padding: 10px 14px; }
	.wg-hero__media:has(.wg-hero__bottle--lineup) .wg-hero__badge { bottom: 6px; right: 6px; }
	.wg-hero__badge b { font-size: 22px; }
	.wg-features { grid-template-columns: minmax(0, 1fr); }
	.wg-production__media { grid-template-columns: minmax(0, 1fr); }
	.wg-delivery { grid-template-columns: minmax(0, 1fr); }
	.wg-delivery__icon { width: 52px; height: 52px; }
	.wg-delivery__list,
	.wg-delivery__more { grid-column: auto; }
}

/* ============================================ Оформление внутренних страниц

   Задача — убрать «белую простыню»: страница должна читаться разделом,
   а не продолжением предыдущей. Цвет приходит переменными --cat-a/--cat-b
   из wg_page_colors(), поэтому новая страница получает оттенок записью
   в PHP, без правки этого файла.                                          */

.wg-page-hero {
	position: relative;
	overflow: hidden;
	padding: 28px 0 40px;
	border-bottom: 1px solid var(--line);
	background: var(--ground);
}

/* Два размытых пятна вместо плоской заливки: плашка под заголовком
   выглядит дёшево, а мягкое поле оставляет фон белым — как требует
   направление темы. */
.wg-page-hero__field {
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 360px;
	background:
		radial-gradient(45% 60% at 18% 45%, color-mix(in srgb, var(--cat-a) 40%, transparent), transparent 70%),
		radial-gradient(40% 55% at 78% 35%, color-mix(in srgb, var(--cat-b) 34%, transparent), transparent 70%);
	filter: blur(28px);
	pointer-events: none;
}

.wg-page-hero__inner { position: relative; }

.wg-page-hero__eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cat-b) 12%, #fff);
	color: color-mix(in srgb, var(--cat-b) 75%, var(--ink));
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.wg-page-hero h1 {
	margin: 0 0 12px;
	max-width: 20ch;
}

.wg-page-hero .wg-lead {
	max-width: 58ch;
	margin: 0;
	color: var(--ink-soft);
}

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

/* --------------------------------------------------- Секции в тексте */

/* Полоса другого фона разбивает длинный текст на главы: читатель видит,
   что раздел кончился, не вчитываясь. */
.wg-prose .wg-band {
	margin: 40px -24px;
	padding: 28px 24px;
	border-radius: var(--radius-lg);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--cat-a) 7%, #fff), #fff);
	border: 1px solid var(--line);
}

.wg-prose .wg-band > :first-child { margin-top: 0; }
.wg-prose .wg-band > :last-child { margin-bottom: 0; }

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

.wg-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
	margin: 24px 0;
	padding: 0;
	list-style: none;
}

/* Только карточки в текстах страниц. Класс .wg-card здесь был лишним:
   он же у товара в каталоге, и отступы с пятном в углу доставались
   товарным карточкам. */
.wg-cards li {
	position: relative;
	margin: 0;
	padding: 20px 20px 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	overflow: hidden;
}

/* Цветное пятно в углу — единственное украшение карточки. Оно же
   подсказывает, что карточки одной группы, а не случайный набор. */
.wg-cards li::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--cat-a) 45%, transparent), transparent 65%);
	opacity: .55;
	pointer-events: none;
}

.wg-cards li:nth-child(even)::before {
	background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--cat-b) 45%, transparent), transparent 65%);
}

.wg-cards b {
	position: relative;
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-display);
	font-size: 17px;
}

.wg-cards p {
	position: relative;
	margin: 0;
	color: var(--ink-soft);
	font-size: 15px;
	line-height: 1.55;
}

/* Карточки с фото товара: флакон сверху, на белом поле карточки. */
.wg-cards--photo li { display: flex; flex-direction: column; text-align: center; }

.wg-cards__img {
	position: relative;
	display: block;
	height: 170px;
	margin: 0 0 16px;
}

.wg-cards__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .3s ease;
}

.wg-cards--photo li:hover .wg-cards__img img { transform: translateY(-4px) scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.wg-cards__img img { transition: none; }
}

/* На телефоне карточки в один столбец — флакон слева, чтобы не тянуть
   каждую на полэкрана. */
@media (max-width: 560px) {
	.wg-cards--photo li {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: 16px;
	}
	.wg-cards--photo li { text-align: left; }
	.wg-cards--photo .wg-cards__img { grid-row: 1 / 3; height: 120px; margin: 0; }
}

/* -------------------------------------------------------------- Шаги */

/* Номера здесь несут смысл: это последовательность этапов, а не
   декоративная нумерация карточек. Отступ и ширину списка сбрасываем
   с запасом по специфичности: правило .entry-content ol сдвигало
   карточки вправо, и на телефоне они вылезали за экран. */
.wg-steps,
.entry-content .wg-steps {
	counter-reset: wg-step;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	max-width: none;
	margin: 24px 0;
	padding: 0;
	list-style: none;
}

.wg-steps li {
	position: relative;
	margin: 0;
	padding: 18px 20px 18px 66px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
}

.wg-steps li::before {
	counter-increment: wg-step;
	content: counter(wg-step);
	position: absolute;
	top: 16px;
	left: 18px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--cat-a), var(--cat-b));
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
}

.wg-steps b {
	display: block;
	margin-bottom: 4px;
	font-family: var(--font-display);
	font-size: 16px;
}

.wg-steps p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 15px;
}

/* ------------------------------------------------------------ Врезка */

.wg-note {
	position: relative;
	margin: 28px 0;
	padding: 18px 22px 18px 24px;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--cat-a) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--cat-a) 25%, var(--line));
}

.wg-note::before {
	content: '';
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, var(--cat-a), var(--cat-b));
}

.wg-note > :first-child { margin-top: 0; }
.wg-note > :last-child { margin-bottom: 0; }

.wg-note b { font-family: var(--font-display); }

/* --------------------------------------------- Текст рядом с картинкой */

.wg-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: center;
	margin: 32px 0;
}

.wg-split > div > :first-child { margin-top: 0; }
.wg-split > div > :last-child { margin-bottom: 0; }

.wg-split--flip > figure { order: -1; }

/* Фото товара на белом фоне рядом с текстом — без рамки, флакон
   сливается с фоном страницы. */
.wg-split__photo { display: block; height: 340px; }

.wg-split__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .3s ease;
}

.wg-split__photo:hover img { transform: translateY(-4px) scale(1.02); }

@media (max-width: 720px) {
	.wg-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.wg-split--flip > figure { order: 0; }
	.wg-split__photo { height: 260px; }
	.wg-prose .wg-band { margin-left: -16px; margin-right: -16px; padding: 22px 16px; }
	.wg-page-hero h1 { max-width: none; }
}

/* ------------------------------------------------------- Оглавление */

.wg-toc {
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.wg-toc b {
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-display);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ink-faint);
}

.wg-toc ol {
	margin: 0;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.5;
}

.wg-toc li { margin-bottom: 8px; }

.wg-toc a {
	color: var(--ink-soft);
	text-decoration: none;
}

.wg-toc a:hover {
	color: var(--action);
	text-decoration: underline;
}

/* Правовой документ читают выборочно, поэтому заголовки в нём
   заметнее обычного, а строка короче. */
.wg-prose--legal h2 {
	scroll-margin-top: calc(var(--header-h) + 20px);
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 21px;
}

.wg-prose--legal h2:first-child { padding-top: 0; border-top: 0; }
.wg-prose--legal p { max-width: 74ch; }

.wg-legal__date {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--ink-soft);
	font-size: 13px;
}

/* ------------------------------------------------- Обложки статей */

.wg-article-cover {
	margin: 8px 0 28px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--surface);
}

.wg-article-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wg-prose .wg-ph { margin: 24px 0 28px; }

/* Фото в карточке статьи — когда загружено «изображение записи». */
.wg-article__img {
	position: relative;
	display: block;
	margin: -26px -24px 6px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--surface);
}

.wg-article__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.wg-article:hover .wg-article__img img { transform: scale(1.03); }

.wg-lead-form__error {
	padding: 12px 14px;
	margin: 0 0 14px;
	border-radius: var(--radius-sm);
	background: var(--price-soft);
	color: #9b1239;
	font-size: 14px;
}

/* Поле-ловушка для роботов (wg_lead_spam): вне экрана, а не display:none —
   часть роботов пропускает скрытые поля, но заполняет «видимые». */
.wg-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}