/*
Theme Name: Педагог-психолог
Description: Тема площадки «Социометрия Морено». Спокойная деловая вёрстка: белые карточки на светло-сером поле, чернильно-синий как основной цвет действия, охра для акцентов.
Author: ИП Барложецкая Н. Ф.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: pedpsy
*/

/* ——— Цвета и величины ———————————————————————————————————————————————

   Всё оформление собрано из этих переменных: поменяв их здесь, меняешь вид
   всей площадки разом. Тёмная тема переопределяет те же имена ниже. */

:root {
	--bg:          #F2F4F7;
	--surface:     #FFFFFF;
	--surface-2:   #E8EBF0;
	--ink:         #171B21;
	--muted:       #5C6470;
	--primary:     #33415C;
	--primary-ink: #F2F4F7;
	--accent:      #E2A33B;
	--accent-ink:  #211405;
	--ok:          #3F8C6E;
	--danger:      #C2503C;
	--ok-soft:     #E3F0E9;
	--line:        #DBE0E6;
	--shadow:      0 1px 2px rgba(23, 27, 33, .06), 0 10px 28px rgba(23, 27, 33, .06);

	--font-head: "Manrope", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;

	--wrap: 1080px;
	--radius: 10px;

	color-scheme: light;
}

/* Тёмная тема идёт за системной настройкой, но её можно перебить вручную,
   поставив на <html> атрибут data-theme. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:          #14171C;
		--surface:     #1B1F26;
		--surface-2:   #20242C;
		--ink:         #EDEFF3;
		--muted:       #9AA2AF;
		--primary:     #8CA3C6;
		--primary-ink: #14171C;
		--accent:      #E8B563;
		--accent-ink:  #211405;
		--ok:          #6FBF9E;
		--danger:      #E58B76;
		--ok-soft:     #1E2C26;
		--line:        #2C313A;
		--shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .4);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg:          #14171C;
	--surface:     #1B1F26;
	--surface-2:   #20242C;
	--ink:         #EDEFF3;
	--muted:       #9AA2AF;
	--primary:     #8CA3C6;
	--primary-ink: #14171C;
	--accent:      #E8B563;
	--ok:          #6FBF9E;
	--ok-soft:     #1E2C26;
	--line:        #2C313A;
	--shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .4);

	color-scheme: dark;
}

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

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

body {
	margin: 0;
	padding-inline: 20px;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
	margin: 0 0 14px;
}

h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: 21px; }
h3 { font-size: 16.5px; }

p { margin: 0 0 12px; }

.pedpsy-wrap { max-width: var(--wrap); margin: 0 auto; }

/* Технические подписи: адрес площадки, редакция документа, единицы измерения */
.pedpsy-mono {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .05em;
	color: var(--muted);
}

.pedpsy-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .05em;
	color: var(--ok);
	text-transform: uppercase;
	margin-bottom: 10px;
}

/* ——— Шапка ————————————————————————————————————————————————————————— */

/* Одна строка: название — меню — корзина и кабинет. Меню прижато к кнопкам,
   а не растянуто по ширине: так строка не рвётся, пока всё помещается. */
.site-header {
	display: flex;
	align-items: center;
	gap: 16px 28px;
	padding-block: 18px;
	border-bottom: 1px solid var(--line);
}

.site-brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; white-space: nowrap; }
.site-brand b { font-family: var(--font-head); font-weight: 600; font-size: 16px; }

.site-nav { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.site-nav li { list-style: none; position: relative; }
.site-nav a,
.site-nav-toggle { font-size: 13.5px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > .site-nav-toggle,
.site-nav-toggle:hover,
.site-nav-toggle:focus-visible,
.site-nav .is-open > .site-nav-toggle { color: var(--ink); }

.site-nav-toggle {
	display: inline-flex; align-items: center; gap: 5px;
	background: none; border: 0; padding: 0; cursor: pointer;
	font-family: inherit; line-height: inherit;
}
.site-nav-toggle svg { transition: transform .15s ease; }
.site-nav .is-open > .site-nav-toggle svg { transform: rotate(180deg); }

/* Раскрытый список: наведением на компьютере, нажатием и фокусом — везде.
   Прозрачная полоса сверху (padding) не даёт списку закрыться, пока мышь
   переходит к нему с заголовка. */
.site-nav .sub-menu {
	position: absolute; top: 100%; left: -14px; z-index: 20;
	min-width: 240px; margin: 0; padding: 10px 0 0;
	list-style: none;
	visibility: hidden; opacity: 0; transform: translateY(-4px);
	transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.site-nav .sub-menu::before {
	content: ""; position: absolute; inset: 10px 0 0; z-index: -1;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: var(--shadow);
}
.site-nav .sub-menu li:first-child { padding-top: 6px; }
.site-nav .sub-menu li:last-child { padding-bottom: 6px; }
.site-nav .sub-menu a { display: block; padding: 9px 14px; font-size: 14px; color: var(--ink); }
.site-nav .sub-menu a:hover,
.site-nav .sub-menu a:focus-visible { background: var(--bg); }
.site-nav .sub-menu .current-menu-item > a { font-weight: 600; }

.site-nav .is-open > .sub-menu,
.site-nav li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (hover: hover) {
	.site-nav li:hover > .sub-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}

/* Адрес рядом с названием — первое, чем можно пожертвовать ради одной строки */
@media (max-width: 1140px) {
	.site-brand .pedpsy-mono { display: none; }
}

/* Уже не помещается в строку — меню уходит вниз отдельным рядом */
@media (max-width: 900px) {
	.site-header { flex-wrap: wrap; }
	.site-header .site-actions { margin-left: auto; }
	.site-nav { order: 3; flex-basis: 100%; margin-left: 0; gap: 20px; flex-wrap: wrap; row-gap: 10px; }
	/* В ряду под шапкой «Документы» стоит у правого края: список, выровненный
	   по левому краю пункта, уходил за экран и давал прокрутку вбок */
	.site-nav .sub-menu { left: auto; right: -14px; }
}

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

/* Кнопка, поставленная в редакторе блоком WordPress, по умолчанию круглая
   и тёмно-серая — на странице она смотрится деталью с чужого сайта.
   Приводим её к тому же виду, что и кнопки шаблона. */
.pedpsy-btn,
.pedpsy-btn-ghost,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 6px;
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: opacity .15s ease;
}

.pedpsy-btn,
.wp-block-button__link { background: var(--primary); color: var(--primary-ink); }
.pedpsy-btn:hover,
.wp-block-button__link:hover { opacity: .9; }

.pedpsy-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.pedpsy-btn-ghost:hover { border-color: var(--muted); }

.pedpsy-btn-small { padding: 8px 14px; font-size: 14px; }

/* ——— Карточки и панели ————————————————————————————————————————————— */

.pedpsy-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 20px;
}

.pedpsy-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

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

/* ——— Подвал ———————————————————————————————————————————————————————— */

.site-footer {
	border-top: 1px solid var(--line);
	padding-block: 26px 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--muted);
}

.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer a { text-decoration: none; color: var(--muted); }
.site-footer a:hover { color: var(--ink); }

/* ——— Содержимое страниц ——————————————————————————————————————————— */

.page-body {
	padding-block: 36px;
	max-width: 72ch;
}

.page-body table { border-collapse: collapse; margin: 10px 0 16px; font-size: 13.5px; width: 100%; }
/* Таблица целей в политике на телефоне шире экрана — прокручивается сама, а не вся страница */
@media (max-width: 700px) {
	.page-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.page-body th {
	text-align: left;
	padding: 6px 16px 6px 0;
	border-bottom: 1.5px solid var(--line);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
}
.page-body td { padding: 6px 16px 6px 0; border-bottom: 1px solid var(--line); }

.page-body code {
	font-family: var(--font-mono);
	font-size: 12.5px;
	background: var(--surface-2);
	padding: 1px 5px;
	border-radius: 4px;
}

.page-body pre {
	font-family: var(--font-mono);
	font-size: 12.5px;
	background: var(--surface-2);
	padding: 14px 16px;
	border-radius: 8px;
	white-space: pre-wrap;
	line-height: 1.6;
}

.page-body ul, .page-body ol { padding-left: 20px; }
.page-body li { margin-bottom: 6px; }

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

.hero {
	padding-block: 52px 34px;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 36px;
	align-items: center;
	border-bottom: 1px solid var(--line);
}

@media (max-width: 760px) {
	.hero { grid-template-columns: 1fr; padding-block: 34px 26px; }
}

.hero-lead { color: var(--muted); font-size: 15.5px; max-width: 60ch; margin-bottom: 22px; }
.hero-lead p:last-child { margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-more { margin: 16px 0 0; font-size: 14.5px; }
.hero-more a { color: var(--primary); font-weight: 600; }

.graph-card { display: flex; flex-direction: column; gap: 14px; }
.graph-card img { display: block; width: 100%; height: auto; }
.graph-title { font-size: 18px; margin-bottom: 2px; }
.graph-note { color: var(--muted); font-size: 12px; margin: 0; }

.graph-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
}

.graph-legend .dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: middle;
}

/* Три факта одной полосой: сетка из зазоров в цвет рамки рисует разделители
   без лишней разметки. */
.facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	margin-block: 34px;
}

@media (max-width: 700px) { .facts { grid-template-columns: 1fr; } }

.fact { background: var(--surface); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.fact b { font-family: var(--font-head); font-size: 15px; }
.fact span { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* Тарифы выкладываем гибким рядом, а не сеткой: в сетке карточка, которой
   не хватило места в строке, прижимается к левому краю и оставляет справа
   дыру. Здесь неполный ряд встаёт по центру — при любом числе тарифов. */
.tariffs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-bottom: 40px;
}
.tariffs > * {
	flex: 1 1 240px;
	max-width: 352px;
}

/* На узком экране карточка занимает всю ширину: поля по бокам ни к чему */
@media (max-width: 640px) {
	.tariffs > * { max-width: none; }
}

.tariff { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tariff-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 15px;
	margin: 0;
}

/* Какой тариф берут чаще: подсказка, а не реклама — потому мелко и без восклицаний */
.tariff-badge {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--accent-ink);
	background: var(--accent);
	border-radius: 99px;
	padding: 3px 9px;
	white-space: nowrap;
}

/* Выделенную карточку обводим тем же акцентом, что и метку */
.tariff-featured { border-color: var(--accent); }

/* Цена набирается Sora: её цифры выше и уже обычных, и сумма читается
   как число, а не как слово. Знак рубля в Sora не нарисован — его даёт
   Inter, и он выходит ниже цифр. Этим и держится вид из макета. */
.tariff-price {
	font-family: 'Sora', var(--font-head);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.tariff-price .woocommerce-Price-currencySymbol {
	font-family: 'Inter', sans-serif;
	font-weight: 500;
}
.tariff-price del { font-size: 16px; color: var(--muted); font-weight: 400; }
.tariff-desc { font-size: 13px; color: var(--muted); }
.tariff .pedpsy-btn { margin-top: auto; }

.front-content { padding-top: 0; }

/* Подвал: реквизиты слева, документы справа; на узком экране — друг под другом */
.footer-seller p { margin: 0 0 8px; }
.footer-seller p:last-child { margin-bottom: 0; }
.footer-docs { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
/* «Настройки cookies» — действие, а не переход, но выглядит как соседние ссылки */
.footer-link-button {
	padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px;
}

/* Вопрос о статистике посещений: карточка внизу, не перекрывает страницу целиком */
.pedpsy-consent {
	position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100;
	max-width: 560px; padding: 16px 18px;
	background: var(--surface); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
	font-size: 14px; line-height: 1.5;
}
.pedpsy-consent[hidden] { display: none; }
.pedpsy-consent p { margin: 0 0 12px; }
.pedpsy-consent__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tariff-used { margin-top: auto; font-size: 13px; color: var(--muted); }


/* Корзина и вход в шапке */
.site-actions { display: flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; }


/* Строка с номером редакции документа: служебная пометка, а не часть текста */
.doc-rev {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--muted);
	margin: 0 0 22px;
}

/* ——— Страница тарифов ————————————————————————————————————————————————— */

/* Шире текстовой колонки: три платных пакета должны встать в один ряд.
   Заголовок и вопросы держат ширину строки сами. */
.page-body.tariffs-page { max-width: var(--wrap); }

.tariffs-head { margin-bottom: 26px; }
.tariffs-head h1 { margin: 0 0 10px; }
.tariffs-head .lead { color: var(--muted); max-width: 62ch; margin: 0; line-height: 1.7; }

/* Карточки здесь выше витринных: в них помещается полное описание */
.tariffs-full .tariff { padding: 22px; gap: 12px; }
.tariffs-full .tariff-desc { line-height: 1.6; }
.tariffs-full .tariff-desc p { margin: 0 0 8px; }
.tariffs-full .tariff-desc p:last-child { margin-bottom: 0; }

/* Префикс .tariffs перебивает общий отступ списков .page-body ul */
.tariffs .tariff-facts { list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--muted); }
.tariff-facts li { margin-bottom: 3px; }
.tariff-facts b { color: var(--ink); font-family: var(--font-head); }

.tariffs-common { margin-bottom: 40px; }
.tariffs-common h2, .tariffs-faq h2 { font-size: 21px; margin: 0 0 16px; }

.tariffs-faq { margin-bottom: 48px; max-width: 68ch; }
.tariffs-faq h3 { font-family: var(--font-head); font-size: 15.5px; margin: 22px 0 6px; }
.tariffs-faq p { margin: 0; color: var(--muted); line-height: 1.7; }

/* Путь к пробной обработке — строкой под пакетами, а не карточкой в их ряду */
.tariffs-trial { margin: -24px 0 40px; text-align: center; font-size: 14.5px; color: var(--muted); }

/* Ссылка на полное описание тарифа: карточка даёт суть, страница — подробности */
.tariff-more { margin: 0; font-size: 13.5px; }
.tariff-more a { color: var(--muted); }
.tariff-more a:hover { color: var(--primary); }

/* Значок корзины в шапке: иконка и охряной кружок с числом в углу.
   Размер как у соседней кнопки «Войти», чтобы шапка не прыгала. */
.site-cart-slot { display: inline-flex; }
.site-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--ink);
	transition: border-color .15s ease;
}
.site-cart:hover { border-color: var(--muted); }
.site-cart:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.site-cart-icon { width: 21px; height: 21px; }
.site-cart-count {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 99px;
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	line-height: 19px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--bg);
}

/* ——— Форма обратной связи ————————————————————————————————————————————— */

.pedpsy-feedback {
	margin-top: 36px;
	padding: 26px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	max-width: 640px;
}
.pedpsy-feedback h2 { margin: 0 0 18px; }

.pedpsy-feedback-form { display: flex; flex-direction: column; gap: 6px; }
.pedpsy-feedback-form label { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.pedpsy-feedback-optional { font-size: 12px; opacity: .8; }

.pedpsy-feedback-form input[type=email],
.pedpsy-feedback-form input[type=text],
.pedpsy-feedback-form select,
.pedpsy-feedback-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink);
	font: 15px/1.5 var(--font-body);
}
.pedpsy-feedback-form textarea { resize: vertical; min-height: 130px; }
.pedpsy-feedback-form :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.pedpsy-feedback-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 14px !important;
	font-size: 13px !important;
	line-height: 1.55;
}
.pedpsy-feedback-consent input { margin-top: 3px; flex: none; }

.pedpsy-feedback-form .pedpsy-btn { margin-top: 16px; align-self: flex-start; }

/* Ловушка для ботов: не display:none — такие поля многие боты пропускают,
   а уведённое за край экрана поле они видят и заполняют */
.pedpsy-feedback-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pedpsy-feedback-note { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.pedpsy-feedback-note p { margin: 0 0 4px; }
.pedpsy-feedback-note p:last-child { margin-bottom: 0; }
.pedpsy-feedback-note.is-ok { background: var(--ok-soft); color: var(--ok); }
.pedpsy-feedback-note.is-error {
	background: color-mix(in srgb, var(--danger) 10%, var(--surface));
	color: var(--danger);
}

/* ——— Магазин материалов ——————————————————————————————————————————————
 *
 * Та же система, что у тарифов: белые карточки, цена набрана Sora,
 * подписи моноширинным. Материал отличается обложкой — его выбирают
 * глазами, поэтому картинка идёт первой. */

.shop-page { max-width: var(--wrap); }

.materials { display: grid; gap: 18px; margin-bottom: 8px; }

.material-card {
	display: grid;
	grid-template-columns: minmax(200px, 300px) 1fr;
	gap: 26px;
	padding: 22px;
	align-items: start;
}
@media (max-width: 700px) {
	.material-card { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
}

.material-cover { display: block; line-height: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.material-cover img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .3s ease; }
.material-cover:hover img { transform: scale(1.02); }

.material-card-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.material-card-body .pedpsy-eyebrow { margin: 0; }
.material-card-title { font-size: 20px; margin: 0; }
.material-card-title a { text-decoration: none; }
.material-card-title a:hover { color: var(--primary); }
.material-card-desc { font-size: 14px; color: var(--muted); line-height: 1.6; }
.material-card-desc p { margin: 0 0 8px; }
.material-card-desc p:last-child { margin-bottom: 0; }

/* Префикс .materials перебивает общий отступ списков .page-body ul */
.materials .material-card-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.materials .material-card-facts li { margin: 0; }
.material-card-facts b { color: var(--ink); font-family: var(--font-head); }

.material-card-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.material-card-buy .tariff-price { margin-right: auto; }

.shop-empty { color: var(--muted); }
.shop-facts { margin-top: 30px; }

/* ——— Страница материала ——————————————————————————————————————————— */

.material-page { padding-block: 26px 48px; }

.material-crumbs { display: flex; gap: 8px; margin-bottom: 20px; font-size: 11.5px; }
.material-crumbs a { color: var(--muted); }
.material-crumbs a:hover { color: var(--primary); }

.material-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}
@media (max-width: 820px) { .material-hero { grid-template-columns: 1fr; gap: 24px; } }

.material-gallery { display: flex; flex-direction: column; gap: 10px; }
.material-gallery-main {
	line-height: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
	box-shadow: var(--shadow);
	aspect-ratio: 1;
}
.material-gallery-main img { width: 100%; height: 100%; object-fit: contain; }

.material-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.material-thumb {
	width: 64px;
	height: 64px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--surface);
	cursor: pointer;
	line-height: 0;
	opacity: .75;
	transition: opacity .15s ease, border-color .15s ease;
}
.material-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.material-thumb:hover { opacity: 1; }
.material-thumb.is-active { opacity: 1; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.material-summary h1 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 14px; }
.material-lead { color: var(--muted); font-size: 15px; line-height: 1.7; }
.material-lead p { margin: 0 0 10px; }

.material-buy { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.material-buy .tariff-price { font-size: 30px; }
.material-buy-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.material-buy-actions .pedpsy-btn { flex: 1 1 160px; }
/* WooCommerce после добавления в корзину ставит рядом ссылку «Просмотр корзины» */
.material-buy-actions .added_to_cart { align-self: center; font-size: 13.5px; color: var(--primary); }
.material-buy-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* Цифры комплекта: те же разделённые плашки, что на главной, но крупное число сверху */
.material-facts { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) { .material-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .material-facts { grid-template-columns: 1fr; } }
.material-fact-value {
	font-family: 'Sora', var(--font-head) !important;
	font-size: 26px !important;
	line-height: 1.1;
	color: var(--primary);
}

.material-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	align-items: start;
}
@media (max-width: 900px) { .material-body { grid-template-columns: 1fr; gap: 28px; } }

.material-desc { max-width: 70ch; line-height: 1.7; }
.material-desc h2 { font-size: 21px; margin: 34px 0 12px; }
.material-desc h2:first-child { margin-top: 0; }
.material-desc h3 { font-size: 16px; margin: 22px 0 8px; }
.material-desc ul, .material-desc ol { padding-left: 20px; margin: 0 0 14px; }
.material-desc li { margin-bottom: 6px; }
.material-desc li::marker { color: var(--accent); }

/* Честная оговорка перед покупкой: охряная плашка, как предупреждение в программе */
.material-note {
	background: color-mix(in srgb, var(--accent) 16%, var(--surface));
	border-left: 3px solid var(--accent);
	border-radius: 8px;
	padding: 16px 18px;
	margin: 26px 0 0;
}
.material-note h2 { font-size: 16px; margin: 0 0 6px !important; }
.material-note p { margin: 0; font-size: 14px; }

.material-aside { position: sticky; top: 20px; }
@media (max-width: 900px) { .material-aside { position: static; } }

.material-contents h2 { font-size: 16px; margin: 0 0 12px; }
.material-contents ol { list-style: none; margin: 0 0 18px; padding: 0; font-size: 13.5px; }
.material-contents li { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); line-height: 1.45; }
.material-contents li:first-child { border-top: none; }
.material-contents li .pedpsy-mono { color: var(--accent); padding-top: 2px; }
.material-contents-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.material-contents-buy .tariff-price { font-size: 22px; }

/* ——— «Как работает программа» ——————————————————————————————————————— */

.how-page { padding-block: 44px 56px; }
.how-head { max-width: 760px; margin-bottom: 36px; }
.how-head h1 { margin: 6px 0 12px; }
.how-head .lead { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 0; }

.how-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 44px; }
.how-step {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: 36px;
	align-items: start;
	padding-top: 36px;
	border-top: 1px solid var(--line);
}
.how-step:first-child { border-top: none; padding-top: 0; }
/* снимки чередуются по сторонам — страница читается как путь, а не как лента */
.how-step:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.how-step:nth-child(even) .how-text { order: 2; }
.how-text { position: sticky; top: 24px; }
.how-num {
	display: inline-grid; place-items: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--primary); color: var(--primary-ink);
	font: 600 14px/1 var(--font-head);
	margin-bottom: 10px;
}
.how-text h2 { margin: 0 0 10px; }
.how-text p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0; }
.how-shot {
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	background: #fff;
}
.how-shot picture { display: block; }
.how-shot img { display: block; width: 100%; height: auto; }
/* страница отчёта выше экрана: показываем верх, целиком — по щелчку */
.how-shot.is-tall { max-height: 620px; position: relative; }
.how-shot.is-tall::after {
	content: "Открыть целиком"; position: absolute; left: 0; right: 0; bottom: 0;
	padding: 48px 16px 14px; text-align: center; font: 600 13px/1 var(--font-head); color: var(--primary);
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%);
}
.how-shot:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

.how-facts { margin-top: 52px; }
.how-cta { margin-top: 28px; padding: 26px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.how-cta h2 { margin: 0; }

@media (max-width: 820px) {
	.how-page { padding-block: 30px 40px; }
	.how-step { grid-template-columns: 1fr; gap: 16px; }
	.how-step:nth-child(even) { grid-template-columns: 1fr; }
	.how-step:nth-child(even) .how-text { order: 0; }
	.how-shot.is-tall { max-height: 460px; }
	.how-text { position: static; }
}