/*
 * Siluette UI — компоненты шаблона страницы курса (пилот D-29).
 * Префикс su-cp-* («course page»). Не пересекается с каноном 0.4.1
 * (custom-list / course-includes-list / custom-accordion-*).
 *
 * КАНОН УТВЕРЖДЁН владельцем 21.08.2026. ИКОНКИ ЖИВУТ В CSS
 * (data-URI, по философии 0.4.1 «иконки добавятся сами»): разметка
 * товара остаётся чистой — <li><span>текст</span></li>, никаких
 * inline-SVG в описаниях. Исключение — стрелка пары галереи
 * (редкий элемент, inline SVG в разметке).
 *
 * Палитра: акцент — янтарь #F59E0B; галочки — зелёный #16A34A;
 * кнопки/ссылки-действия — фирменный зелёный кнопки «Купить» #3BB54A;
 * серые — Flowbite. «Ржавые» оттенки (#B45309, ранее #C45500) ЗАПРЕЩЕНЫ.
 *
 * ⚠️ ПРАВИЛО ЯНТАРЯ (0.7.1). Крупные янтарные ПЛОСКОСТИ — только
 * акцентная черта над заголовком секции. Она маркер структуры, и
 * работает лишь пока ни с чем не конкурирует.
 *
 * Проверено 25.08.2026: в зоне «Кому подойдёт» подряд шли черта →
 * три карточки с янтарной полосой сверху → янтарная честная строка →
 * снова черта. Владелец: «многое получается оранжевое». Полосу карточек
 * убрали, честную строку перекрасили в графит.
 *
 * Янтарём остаются только МЕЛКИЕ метки — кареты списка В, кружки шагов,
 * иконка вопроса FAQ, звёзды: они дают ритм, но не читаются как блок.
 * Новый янтарный фон или полосу вводить нельзя — сначала посмотреть,
 * что стоит рядом на странице.
 */

:root {
	--su-cp-accent: #F59E0B;
	--su-cp-accent-bg: #FFFBEB;
	--su-cp-green: #16A34A;
	--su-cp-green-btn: #3BB54A; /* фирменный зелёный кнопки «Купить» (stage, Shoptimizer) */
	--su-cp-green-btn-dark: #2FA23D;
	--su-cp-green-bg: #F0FDF4;
	--su-cp-red: #DC2626;
	--su-cp-red-bg: #FEF2F2;
	--su-cp-ink: #111827;
	--su-cp-body: #374151;
	--su-cp-muted: #6B7280;
	--su-cp-line: #E5E7EB;
	--su-cp-line-soft: #F3F4F6;
	--su-cp-bg: #F9FAFB;
	--su-cp-radius: 8px;
	--su-cp-radius-lg: 12px; /* только CTA — вид утверждён владельцем */

	/* ── Токены ритма (0.7.0). До них размеры были зашиты числами:
	      шесть значений line-height, пять интервалов списков, отступы
	      на пяти точечных правилах — владелец назвал итог «рваным».
	      Теперь шкала одна, и менять её можно в одном месте. ── */

	/* шрифты */
	--su-cp-fs-h2: 24px;
	--su-cp-fs-h3: 18px;
	--su-cp-fs-small: 14px;
	--su-cp-fs-micro: 13px;

	/* межстрочные: три вместо шести */
	--su-cp-lh-head: 1.3;  /* заголовки */
	--su-cp-lh-row: 1.45;  /* компактные строки: факты, уроки */
	--su-cp-lh-text: 1.55; /* весь остальной текст */

	/* отступы */
	--su-cp-sp-xs: 8px;
	--su-cp-sp-s: 12px;
	--su-cp-sp-m: 16px;
	--su-cp-sp-l: 24px;
	--su-cp-sp-xl: 28px;
	--su-cp-sp-sec: 28px; /* половина расстояния между секциями (шов ×2) */

	/* ⚙️ Вертикаль маркера списка — центр ПЕРВОЙ строки пункта.
	   Ставится в паре с `transform: translateY(-50%)`.

	   Так, а не «top: 13px». Прежние жёсткие пиксели были посчитаны
	   под десктопный кегль, и на мобильном, где тема уменьшает шрифт,
	   строка становится ниже, а маркер оставался на месте — тире
	   съезжало вниз относительно текста. Поймал владелец 25.08.2026.

	   Половина строки = 0.5em × межстрочный, и em берётся от шрифта
	   самого пункта. Поэтому формула верна при любом кегле и не
	   требует правок в @media. Многострочный пункт держит маркер
	   у первой строки, а не по центру всего блока — это правильно:
	   маркер отмечает начало пункта. */
	--su-cp-маркер-центр: calc(var(--su-cp-lh-text) * 0.5em);

	/* Интервал между пунктами списка. 14px, а не 8–10: пункты у нас
	   регулярно в две строки, а при lh 1.55 зазор МЕЖДУ СТРОКАМИ уже
	   около 9px. С прежними восемью пунктами список слипался в сплошной
	   текст — «Что понадобится» на D-29 (шесть материалов) поймал
	   владелец 25.08.2026. Правило: интервал списка ≈ полтора
	   межстрочных, иначе граница пункта не читается. */
	--su-cp-sp-list: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   СПИСОК А — галочки-результаты (блоки 1 сжато, 3 развёрнуто)
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--su-cp-sp-list);
}

.su-cp-checks__row {
	position: relative;
	padding-left: 28px;
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-text);
}

.su-cp-checks__row::before {
	content: '';
	position: absolute;
	left: 0;
	top: var(--su-cp-маркер-центр);
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316A34A'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════
   СПИСОК Б — «Курс содержит» (блок 1, колонка покупки): рамка-группа
   без разделителей; материалы — только количеством. Иконка строки —
   модификатором: --video / --play / --file / --clock / --inf / --award
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-facts {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--su-cp-line);
	border-radius: var(--su-cp-radius);
	overflow: hidden;
}

.su-cp-facts__row {
	position: relative;
	padding: 10px 14px 10px 40px;
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-row);
}

.su-cp-facts__row::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background-repeat: no-repeat;
	background-size: contain;
}

.su-cp-facts__row--video::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath d='M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

.su-cp-facts__row--play::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/%3E%3C/svg%3E");
}

.su-cp-facts__row--file::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath fill-rule='evenodd' d='M4.5 0h4L13 4.5v10A1.5 1.5 0 0 1 11.5 16h-7A1.5 1.5 0 0 1 3 14.5v-13A1.5 1.5 0 0 1 4.5 0zm.5 5.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm0 2.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6zm0 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4z'/%3E%3C/svg%3E");
}

.su-cp-facts__row--clock::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
}

.su-cp-facts__row--inf::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='4.7' cy='8' r='2.6' fill='none' stroke='%236B7280' stroke-width='1.5'/%3E%3Ccircle cx='11.3' cy='8' r='2.6' fill='none' stroke='%236B7280' stroke-width='1.5'/%3E%3C/svg%3E");
}

.su-cp-facts__row--award::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3E%3Ccircle cx='8' cy='5.5' r='4'/%3E%3Cpath d='M6.3 9.2 5 15l3-1.8L11 15 9.7 9.2a5 5 0 0 1-3.4 0z'/%3E%3C/svg%3E");
}

.su-cp-facts__b {
	font-weight: 600;
	color: var(--su-cp-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   СПИСОК В — факт + выгода через тире (блок 5), янтарная ▸
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-ben {
	display: grid;
	gap: var(--su-cp-sp-list);
	margin: 0;
	padding: 0;
	list-style: none;
}

.su-cp-ben__row {
	position: relative;
	padding-left: 28px;
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-text);
}

.su-cp-ben__row::before {
	content: '';
	position: absolute;
	left: 2px;
	top: var(--su-cp-маркер-центр);
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F59E0B'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5z'/%3E%3C/svg%3E");
}

.su-cp-ben__lead {
	font-weight: 600;
	color: var(--su-cp-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   СПИСОК Г — простой маркированный с тире
   (требования блока 5, акции блока 11)
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-plain {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--su-cp-sp-list);
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-text);
}

.su-cp-plain__row {
	position: relative;
	padding-left: 26px;
}

/* Зелёная галочка в кружке (0.7.4, замена серого тире).
   От галочки списка А отличается кружком: списки не должны читаться
   одинаково — А это результаты курса, Г это перечень вещей. */
.su-cp-plain__row::before {
	content: '';
	position: absolute;
	left: 0;
	top: var(--su-cp-маркер-центр);
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316A34A'%3E%3Cpath d='M16 8A8 8 0 1 1 8 0a8 8 0 0 1 8 8ZM6.793 11.207l4.5-4.5-.707-.707-3.793 3.793-1.646-1.646-.707.707Z' transform='translate(0.3 0.3) scale(0.96)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════
   СПИСОК Д — нумерованные шаги (блок 2 «доступ», блок 7 «метод»)
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--su-cp-sp-list);
	counter-reset: su-cp-step;
}

.su-cp-steps__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	counter-increment: su-cp-step;
}

/* номер — счётчиком CSS: в разметке пустой <span class="su-cp-steps__num"></span> */
.su-cp-steps__num {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--su-cp-ink);
	background: var(--su-cp-accent-bg);
	border: 1px solid var(--su-cp-accent);
	margin-top: 1px;
}

.su-cp-steps__num::before {
	content: counter(su-cp-step);
}

.su-cp-steps__text {
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-text);
	padding-top: 3px;
}

.su-cp-steps__text b {
	color: var(--su-cp-ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   СПИСОК Е — «До / После» (блок 7), тонированные карточки
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.su-cp-compare__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.su-cp-compare__title--before {
	color: var(--su-cp-red);
}

.su-cp-compare__title--after {
	color: var(--su-cp-green);
}

.su-cp-compare__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 16px;
	list-style: none;
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-text);
	border-radius: var(--su-cp-radius);
}

.su-cp-compare__col--before {
	background: var(--su-cp-red-bg);
}

.su-cp-compare__col--after {
	background: var(--su-cp-green-bg);
}

.su-cp-compare__row {
	position: relative;
	padding-left: 26px;
}

.su-cp-compare__row::before {
	content: '';
	position: absolute;
	left: 0;
	top: var(--su-cp-маркер-центр);
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-size: contain;
}

.su-cp-compare__col--before .su-cp-compare__row::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23DC2626'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.354 10.646-0.707.707L8 8.707l-2.647 2.646-.707-.707L7.293 8 4.646 5.354l.707-.707L8 7.293l2.646-2.647.707.707L8.707 8l2.647 2.646Z'/%3E%3C/svg%3E");
}

.su-cp-compare__col--after .su-cp-compare__row::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316A34A'%3E%3Cpath d='M16 8A8 8 0 1 1 8 0a8 8 0 0 1 8 8ZM6.793 11.207l4.5-4.5-.707-.707-3.793 3.793-1.646-1.646-.707.707Z' transform='translate(0.3 0.3) scale(0.96)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════
   СПИСОК Ж — строка урока, точечный лидер (внутри аккордеона)
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-lessons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.su-cp-lesson {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 7px 0;
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-row);
}

.su-cp-lesson__t {
	flex: 0 1 auto;
	min-width: 0;
}

.su-cp-lesson__lead {
	flex: 1 1 auto;
	min-width: 24px;
	border-bottom: 1px dotted var(--su-cp-line);
	transform: translateY(-4px);
}

.su-cp-lesson__dur {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--su-cp-body);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Описание урока — второй строкой, во всю ширину.
 *
 * ⚠️ ГРАБЛЯ, стоившая поломки вёрстки 25.08.2026. Здесь стояло
 * `flex: 0 0 100%` вместе с `max-width: 68ch` — и этого достаточно,
 * чтобы перенос перестал работать.
 *
 * Почему: раскладывая flex по строкам, браузер берёт не базис, а
 * базис, УЖЕ ОБРЕЗАННЫЙ по max-width. То есть «100%» превращалось
 * в 68ch, а 68ch на широком экране прекрасно помещаются в остаток
 * строки рядом с названием и временем — и описание вставало
 * за длительностью, в одну строку с ней.
 *
 * На мобильном 68ch шире экрана, обрезка не срабатывала, и там всё
 * выглядело правильно — из-за этого поломку и не заметили сразу.
 *
 * Лечение: `min-width: 100%` — минимум применяется ПОСЛЕ максимума
 * и гарантирует собственную строку при любой ширине. Читаемую длину
 * строки держим отступом справа, а не шириной блока: он на перенос
 * не влияет.
 *
 * Правило на будущее: у flex-элемента с базисом 100% не должно быть
 * max-width. Нужна и полная ширина, и предел строки — предел даёт
 * padding, не width.
 */
.su-cp-lesson__d {
	flex: 0 0 100%;
	min-width: 100%;
	padding-right: max(0px, 100% - 68ch);
	margin: 2px 0 0;
	font-size: 14px;
	line-height: var(--su-cp-lh-text);
	color: var(--su-cp-muted, #6B7280);
}

/* ═══════════════════════════════════════════════════════════════════════
   АККОРДЕОН — программа (вложенность любой глубины) и FAQ.
   Индикаторы — псевдоэлементами шапки (в разметке их НЕТ):
   корень — шеврон (шеврон справа), вложенные уровни — карет ▸;
   FAQ (--gray) — иконка-вопрос слева.
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-acc {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.su-cp-acc__item {
	background: #fff;
	border: 1px solid var(--su-cp-line);
	border-radius: var(--su-cp-radius);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.su-cp-acc__item.is-open {
	box-shadow: 0 1px 3px rgba(17, 24, 39, 0.07);
}

.su-cp-acc__head {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 44px 14px 16px; /* справа место под индикатор-::after */
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--su-cp-ink);
	transition: background-color 0.2s ease;
	position: relative;
}

.su-cp-acc__head:hover {
	background: var(--su-cp-bg);
}

.su-cp-acc__t {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	font-size: 16px;
	line-height: var(--su-cp-lh-head);
}

.su-cp-acc__meta {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--su-cp-muted);
	white-space: nowrap;
}

/* Шеврон — ТОЛЬКО на корневом уровне. Поворот — у СОБСТВЕННОЙ шапки
   пункта (селектор «> .su-cp-acc__head»), не у потомков (грабля №42) */
.su-cp-acc__head::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}

.su-cp-acc__item.is-open > .su-cp-acc__head::after {
	transform: translateY(-50%) rotate(180deg);
}

/* Панель: 0fr → 1fr. Вложенные аккордеоны раскрываются корректно
   на любой глубине — родительская дорожка авто-подстраивается. */
.su-cp-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.su-cp-acc__item.is-open > .su-cp-acc__panel {
	grid-template-rows: 1fr;
}

.su-cp-acc__body {
	overflow: hidden;
	min-height: 0;
}

.su-cp-acc__inner {
	padding: 2px 16px 16px;
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-text);
}

.su-cp-acc__inner > :last-child {
	margin-bottom: 0;
}

/* Продающий абзац внутри модуля (перед уроками). Отступ после него
   даёт правило ритма `.su-cp-acc__inner > * + *`, своего нет. */
.su-cp-acc__intro {
	margin: 0;
}

/* ── Вложенность: уровни разведены чередованием фонов и типографикой.
      Корень (модули) — белые карточки, шеврон;
      уровень 2 (темы) — серая подложка, карет;
      уровень 3 — снова белые; уровень 4 — снова серые, компактные.
      ЯКОРЬ ГЛУБИНЫ — .su-cp-acc__inner (тело раскрытого пункта):
      корневые пункты в него не попадают никогда (грабля №42). ── */

/* уровень 2+. Отступ сверху даёт правило ритма `__inner > * + *`. */
.su-cp-acc__inner .su-cp-acc {
	gap: 6px;
}

/* уровень 2: серая подложка, компактнее, КАРЕТ вместо шеврона */
.su-cp-acc__inner .su-cp-acc > .su-cp-acc__item {
	background: var(--su-cp-bg);
	border-color: var(--su-cp-line-soft);
}

.su-cp-acc__inner .su-cp-acc__head {
	padding: 10px 34px 10px 12px;
}

.su-cp-acc__inner .su-cp-acc__head:hover {
	background: var(--su-cp-line-soft);
}

.su-cp-acc__inner .su-cp-acc__head::after {
	right: 10px;
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5z'/%3E%3C/svg%3E");
}

.su-cp-acc__inner .su-cp-acc__item.is-open > .su-cp-acc__head::after {
	transform: translateY(-50%) rotate(90deg);
}

.su-cp-acc__inner .su-cp-acc__t {
	font-size: 15px;
	font-weight: 600;
}

.su-cp-acc__inner .su-cp-acc__meta {
	font-size: 12px;
}

.su-cp-acc__inner .su-cp-acc__inner {
	padding: 2px 12px 12px;
}

/* уровень 3: снова белый — возвращает контраст после серого */
.su-cp-acc__inner .su-cp-acc__inner .su-cp-acc > .su-cp-acc__item {
	background: #fff;
	border-color: var(--su-cp-line);
}

.su-cp-acc__inner .su-cp-acc__inner .su-cp-acc__head {
	padding: 8px 32px 8px 12px;
}

.su-cp-acc__inner .su-cp-acc__inner .su-cp-acc__head:hover {
	background: var(--su-cp-bg);
}

.su-cp-acc__inner .su-cp-acc__inner .su-cp-acc__t {
	font-size: 14px;
	font-weight: 500;
}

/* уровень 4: снова серый, компактный */
.su-cp-acc__inner .su-cp-acc__inner .su-cp-acc__inner .su-cp-acc > .su-cp-acc__item {
	background: var(--su-cp-bg);
}

.su-cp-acc__inner .su-cp-acc__inner .su-cp-acc__inner .su-cp-acc__t {
	font-size: 13px;
	font-weight: 500;
}

/* FAQ: серая шапка + иконка-вопрос слева (::before, в разметке нет) */
.su-cp-acc--gray .su-cp-acc__head {
	padding-left: 44px;
	background: var(--su-cp-bg);
}

.su-cp-acc--gray .su-cp-acc__head::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F59E0B'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z'/%3E%3C/svg%3E");
}

.su-cp-acc--gray .su-cp-acc__item.is-open > .su-cp-acc__head {
	background: var(--su-cp-line-soft);
}

/* ═════════════════════════ RU/UK: заголовки секций (обвязка) ═════════
 *
 * С 0.7.0 у обвязки НЕТ собственных внешних отступов: весь вертикальный
 * ритм задаёт одна система правил секции (см. «Ритм страницы» внизу
 * файла). До этого h3 носил свой margin-top 24px, конфликтовавший
 * с правилом соседства 28px, а lead держался на хаке −6px. */

.su-cp-h2 {
	font-size: var(--su-cp-fs-h2);
	font-weight: 700;
	color: var(--su-cp-ink);
	margin: 0;
	line-height: var(--su-cp-lh-head);
}

/* Акцентная черта над заголовком секции — якорь начала темы (решение
   владельца 25.08.2026). Янтарь: это цвет разметки страницы (кружки
   шагов, кареты, звёзды); зелёный остаётся цветом действия. */
.su-cp-h2::before {
	content: '';
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--su-cp-accent);
	margin-bottom: 10px;
}

.su-cp-h3 {
	font-size: var(--su-cp-fs-h3);
	font-weight: 700;
	color: var(--su-cp-ink);
	margin: 0;
	line-height: var(--su-cp-lh-head);
}

.su-cp-lead {
	color: var(--su-cp-muted);
	margin: 0;
	line-height: var(--su-cp-lh-text);
}

.su-cp-p {
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-text);
	margin: 0;
}

/* Подзаголовок-оффер (0.7.3) — вторая половина связки «название курса +
   оффер». Выводится мета-полем сразу под названием, ДО цены: между
   половинами связки не должно быть ничего. Крупнее основного текста,
   но легче заголовка — это подпись к названию, а не новый заголовок. */
.su-cp-offer {
	margin: 6px 0 14px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--su-cp-body);
	max-width: 60ch;
}

@media (max-width: 640px) {
	.su-cp-offer {
		font-size: 16px;
		margin: 4px 0 12px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   К1 — гибкая карточка (блок 4 «кому подойдёт», блок 14 «похожие»);
   обложка связанного курса — ВЕРТИКАЛЬНАЯ 5:6 (как товары 500×600)
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
}

/* Сетка «как в магазине» для похожих курсов (блок 14): масштаб витрины
   категории темы — 4 карточки в ряд на десктопе, 2 на мобильном */
.su-cp-cards--shop {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Верхней янтарной полосы у карточки НЕТ с 0.7.1 — см. правило янтаря
   внизу файла: три карточки подряд давали три оранжевые плоскости между
   чертой заголовка и честной строкой, и вся зона «Кому подойдёт»
   читалась как оранжевая. Карточку держит рамка и белый фон; акцент
   у карточек-ссылок остаётся на hover — там он отклик на действие. */
.su-cp-card {
	border: 1px solid var(--su-cp-line);
	border-radius: var(--su-cp-radius);
	padding: 18px;
	background: #fff;
}

.su-cp-card__t {
	font-size: 16px;
	font-weight: 700;
	color: var(--su-cp-ink);
	margin: 0 0 8px;
}

.su-cp-card__d {
	margin: 0;
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-text);
	font-size: 15px;
}

/* карточка-ссылка на другой курс */
a.su-cp-card {
	display: block;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

a.su-cp-card:hover {
	border-color: var(--su-cp-accent);
	box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
	transform: translateY(-2px);
}

.su-cp-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 12px;
	background: var(--su-cp-line-soft);
}

.su-cp-card__more {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--su-cp-green-btn);
}

a.su-cp-card:hover .su-cp-card__more {
	text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════
   К3 — карточка отзыва (блок 10). Звёзды — двумя слоями фона:
   серые 5 + янтарная маска шириной N×20% (--5 = все, --4 = четыре)
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.su-cp-review {
	border: 1px solid var(--su-cp-line);
	border-radius: var(--su-cp-radius);
	padding: 18px;
	background: #fff;
}

.su-cp-review__stars {
	position: relative;
	width: 80px;
	height: 16px;
	margin-bottom: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D1D5DB'%3E%3Cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 16px 16px;
}

.su-cp-review__stars::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F59E0B'%3E%3Cpath d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 16px 16px;
}

.su-cp-stars--5::before {
	width: 100%;
}

.su-cp-stars--4::before {
	width: 80%;
}

.su-cp-stars--3::before {
	width: 60%;
}

.su-cp-review__text {
	margin: 0 0 12px;
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-text);
	font-size: 15px;
}

.su-cp-review__meta {
	font-size: 13px;
	color: var(--su-cp-muted);
}

.su-cp-review__meta b {
	color: var(--su-cp-ink);
}

/* опциональная работа ученика в карточке отзыва */
.su-cp-review__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 12px;
	background: var(--su-cp-line-soft);
}

/* ═══════════════════════════════════════════════════════════════════════
   К4 — финальный CTA (блок 13): светлая карточка, точечный лидер
   (колонки по ЛЕВОМУ краю), кнопка — зелёная кнопки сайта
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-cta {
	border-radius: var(--su-cp-radius-lg);
	padding: 28px 24px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--su-cp-line);
}

.su-cp-cta__t {
	font-size: var(--su-cp-fs-h2);
	font-weight: 700;
	margin: 0 0 16px;
	line-height: var(--su-cp-lh-head);
	color: var(--su-cp-ink);
}

/* Факты: сетка общая на весь список (пункты display:contents) —
   подпись и значение по ЛЕВОМУ краю своих колонок, точки между ними.
   Разметка: <span>подпись</span><i class="su-cp-cta__lead"></i><b>знач</b> */
.su-cp-cta__facts {
	list-style: none;
	margin: 0 auto 20px;
	padding: 0;
	max-width: 480px;
	font-size: 15px;
	display: grid;
	grid-template-columns: auto 1fr max-content;
	gap: 10px 10px;
	align-items: baseline;
}

.su-cp-cta__facts li {
	display: contents;
}

.su-cp-cta__facts span,
.su-cp-cta__facts b {
	text-align: left;
}

.su-cp-cta__facts b {
	font-weight: 600;
}

.su-cp-cta__lead {
	border-bottom: 1px dotted var(--su-cp-line);
	transform: translateY(-4px);
	min-width: 24px;
}

.su-cp-cta__btn {
	display: inline-block;
	padding: 13px 32px;
	border-radius: var(--su-cp-radius);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	background: var(--su-cp-green-btn);
	color: #fff;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.su-cp-cta__btn:hover {
	background: var(--su-cp-green-btn-dark);
}

.su-cp-cta__btn:active {
	transform: translateY(1px);
}

.su-cp-cta__micro {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--su-cp-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   Г — галерея пар «первая → итоговая» (блок 10; стрелка — inline SVG
   в разметке пары, единственное исключение правила «иконки в CSS»)
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-gallery {
	display: grid;
	gap: 16px;
}

.su-cp-gallery--pairs {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.su-cp-gallery img {
	width: 100%;
	object-fit: cover;
	border-radius: var(--su-cp-radius);
}

.su-cp-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	margin: 0;
}

.su-cp-pair img {
	aspect-ratio: 1 / 1;
}

.su-cp-pair__arrow {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--su-cp-accent);
}

.su-cp-pair__cap {
	grid-column: 1 / -1;
	text-align: center;
	font-size: 13px;
	color: var(--su-cp-muted);
	margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   К2 — блок автора (блок 9; на пилотной странице D-29 отключён, в
   каноне остаётся): карточка с круглым аватаром
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-author {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	border: 1px solid var(--su-cp-line);
	border-radius: var(--su-cp-radius);
	padding: 20px;
	background: #fff;
}

.su-cp-author__photo {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 50%;
	background: var(--su-cp-line-soft);
}

.su-cp-author__name {
	font-size: 18px;
	font-weight: 700;
	color: var(--su-cp-ink);
	margin: 0 0 2px;
}

.su-cp-author__role {
	font-size: 14px;
	color: var(--su-cp-muted);
	margin: 0 0 10px;
}

.su-cp-author__bio {
	margin: 0;
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-text);
}

/* ═══════════════════════════════════════════════════════════════════════
   Плейсхолдер-заглушка (стенд/наполнение): только вид, размеры задаёт
   контекст (карточка курса, отзыв)
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--su-cp-line-soft), var(--su-cp-line));
	color: #9CA3AF;
	font-size: 13px;
	border-radius: 6px;
}

.su-cp-card .su-cp-ph {
	width: 100%;
	aspect-ratio: 5 / 6;
	margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Т2 — честная строка ограничений (блок 4): плашка с графитовой полосой
   ═══════════════════════════════════════════════════════════════════ */

/* Графит, а не янтарь (0.7.1). Честная строка — это уточнение «чего
   курс не даёт», а не предупреждение: она идёт сразу после трёх
   карточек «подойдёт вам, вам и вам» и читается как оговорка. Янтарём
   она спорила с чертой заголовка и кричала громче, чем стоит.
   Для настоящих предупреждений есть коллаут su-cp-co--note. */
.su-cp-note {
	color: var(--su-cp-body);
	background: var(--su-cp-bg);
	border-left: 4px solid var(--su-cp-muted);
	border-radius: 0 var(--su-cp-radius) var(--su-cp-radius) 0;
	padding: 12px 16px;
	line-height: var(--su-cp-lh-text);
}

@media (max-width: 768px) {
	.su-cp-cards--shop {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ — единый контентный брейкпоинт 640px (сетки — 768px выше).
   До 0.7.0 переопределения были разбросаны по пяти @media в разных
   местах файла, на двух разных порогах (640/767); мобильной шкалы
   заголовков не было вовсе — h2 оставался 24px.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	:root {
		--su-cp-fs-h2: 21px;
		--su-cp-fs-h3: 17px;
		--su-cp-sp-sec: 22px;
	}

	.su-cp-compare {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.su-cp-gallery--pairs {
		grid-template-columns: 1fr;
	}

	.su-cp-cta {
		padding: 22px 16px;
	}

	.su-cp-cta__t {
		font-size: 20px;
	}

	.su-cp-acc__t {
		font-size: 15px;
	}

	.su-cp-acc__meta {
		display: none;
	}

	.su-cp-lesson__d {
		font-size: var(--su-cp-fs-micro);
	}

	.su-cp-author {
		flex-direction: column;
		gap: 14px;
	}

	.su-cp-co {
		padding: 12px 12px 12px 42px;
	}

	.su-cp-co::before {
		left: 11px;
		top: 13px;
		width: 19px;
		height: 19px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   КОЛЛАУТЫ — смысловые плашки-выноски (su-cp-co). Единый скелет:
   тонированный фон + цветная полоса слева + иконка (CSS, data-URI).
   Семантика задаётся модификатором (цвет + иконка), содержимое —
   заголовок (опц.) + абзацы + список (опц.). СЕРИЯ НА КОНКУРСЕ
   21.08: варианты на стенде preview/callouts-bench.html, в канон
   попадут выбранные владельцем.
   ═══════════════════════════════════════════════════════════════════ */

.su-cp-co {
	--co: #374151;      /* акцент: полоса + иконка */
	--co-bg: #F9FAFB;   /* тонированный фон */
	position: relative;
	padding: 14px 16px 14px 48px;
	border-left: 4px solid var(--co);
	border-radius: 0 var(--su-cp-radius) var(--su-cp-radius) 0;
	background: var(--co-bg);
	color: var(--su-cp-body);
	line-height: var(--su-cp-lh-text);
}

.su-cp-co::before {
	content: '';
	position: absolute;
	left: 13px;
	top: 15px;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-size: contain;
}

.su-cp-co__t {
	font-weight: 700;
	font-size: 15px;
	color: var(--su-cp-ink);
	margin: 0 0 4px;
}

.su-cp-co__tx {
	margin: 0 0 8px;
}

.su-cp-co__tx:last-child {
	margin-bottom: 0;
}

.su-cp-co__list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 10px; /* внутри коллаута пункты короткие — плотнее общего */
}

.su-cp-co__list li {
	position: relative;
	padding-left: 16px;
}

.su-cp-co__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: var(--su-cp-маркер-центр);
	transform: translateY(-50%);
	width: 8px;
	height: 2px;
	border-radius: 1px;
	background: var(--su-cp-muted);
}

/* ── Язык и формат курса ── */

/* Флаг Украины: курс переведён/озвучен на украинском */
.su-cp-co--ua {
	--co: #0057B7;
	--co-bg: #EFF6FF;
}

.su-cp-co--ua::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='8' rx='2' fill='%230057B7'/%3E%3Crect y='8' width='16' height='8' rx='2' fill='%23FFD700'/%3E%3C/svg%3E");
}

/* Другой язык (глобус): язык указывается в заголовке/тексте */
.su-cp-co--lang {
	--co: #2563EB;
	--co-bg: #EFF6FF;
}

.su-cp-co--lang::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%232563EB' stroke-width='1.6'/%3E%3Cellipse cx='8' cy='8' rx='3' ry='6.5' fill='none' stroke='%232563EB' stroke-width='1.3'/%3E%3Cpath d='M1.5 8h13' stroke='%232563EB' stroke-width='1.3'/%3E%3C/svg%3E");
}

/* Самостоятельное изучение (книга): без обратной связи с преподавателем */
.su-cp-co--solo {
	--co: #2563EB;
	--co-bg: #EFF6FF;
}

.su-cp-co--solo::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232563EB'%3E%3Cpath d='M8.7 3.6C7 2.4 4.6 2.3 2.4 3v9.6c2.2-.7 4.6-.6 6.3.6 1.7-1.2 4.1-1.3 6.3-.6V3c-2.2-.7-4.6-.6-6.3.6zm-.7 8.4c-1.4-.8-3.2-.9-4.6-.4V4.3c1.4-.5 3.2-.4 4.6.4v7.3zm1.4-7.3c1.4-.8 3.2-.9 4.6-.4v7.3c-1.4-.5-3.2-.4-4.6.4V4.7z'/%3E%3C/svg%3E");
}

/* Доступ (замок): когда/как открывается доступ */
.su-cp-co--access {
	--co: #2563EB;
	--co-bg: #EFF6FF;
}

.su-cp-co--access::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232563EB'%3E%3Cpath fill-rule='evenodd' d='M4 7V5.5a4 4 0 0 1 8 0V7h.5A1.5 1.5 0 0 1 14 8.5v5A1.5 1.5 0 0 1 12.5 15h-9A1.5 1.5 0 0 1 2 13.5v-5A1.5 1.5 0 0 1 3.5 7H4zm1.5 0h5V5.5a2.5 2.5 0 0 0-5 0V7z'/%3E%3C/svg%3E");
}

/* ── Внимание и предупреждения ── */

/* «Обратите внимание» (лампочка, янтарь) */
.su-cp-co--note {
	--co: #F59E0B;
	--co-bg: #FFFBEB;
}

.su-cp-co--note::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F59E0B'%3E%3Cpath d='M8 1a5 5 0 0 0-3 9v1.2c0 .4.3.8.8.8h4.4c.5 0 .8-.4.8-.8V10a5 5 0 0 0-3-9zM6 13.5h4v1a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-1z'/%3E%3C/svg%3E");
}

/* Важное предупреждение (треугольник, красный) */
.su-cp-co--danger {
	--co: #DC2626;
	--co-bg: #FEF2F2;
}

.su-cp-co--danger::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23DC2626' d='M8.98 1.57a1.13 1.13 0 0 0-1.96 0L.17 13.23c-.46.78.09 1.77.98 1.77h13.7c.89 0 1.44-.99.98-1.77L8.98 1.57z'/%3E%3Cpath fill='%23FEF2F2' d='M8 5c.54 0 .95.46.9 1l-.35 3.5a.55.55 0 0 1-1.1 0L7.1 6A.9.9 0 0 1 8 5zm0 6.2a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

/* ── Деньги и покупки ── */

/* Дополнительные расходы (кошелёк, зелёный) */
.su-cp-co--money {
	--co: #16A34A;
	--co-bg: #F0FDF4;
}

.su-cp-co--money::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316A34A'%3E%3Cpath fill-rule='evenodd' d='M1 4.5A2.5 2.5 0 0 1 3.5 2h8A1.5 1.5 0 0 1 13 3.5V5h.5A1.5 1.5 0 0 1 15 6.5v6A1.5 1.5 0 0 1 13.5 14h-10A2.5 2.5 0 0 1 1 11.5v-7zm11.5 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
}

/* Бонус/подарок (янтарь) */
.su-cp-co--gift {
	--co: #F59E0B;
	--co-bg: #FFFBEB;
}

.su-cp-co--gift::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23F59E0B' d='M1.5 4h13v2.2h-13zM3 7.5h10V14H3z'/%3E%3Cpath fill='%23FFFBEB' d='M7 4h2v10H7z'/%3E%3Cpath fill='%23F59E0B' d='M5.2 1.6a1.6 1.6 0 0 0-1.4 2.4h2.8a1.6 1.6 0 0 0-1.4-2.4zm5.6 0a1.6 1.6 0 0 0-1.4 2.4h2.8a1.6 1.6 0 0 0-1.4-2.4z'/%3E%3C/svg%3E");
}

/* Дедлайн/ограничение по времени (часы, янтарь) */
.su-cp-co--time {
	--co: #F59E0B;
	--co-bg: #FFFBEB;
}

.su-cp-co--time::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F59E0B'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
}

/* ── Инструменты и техника ── */

/* Софт/инструменты курса (код, графит) — часто со списком внутри */
.su-cp-co--tools {
	--co: #374151;
	--co-bg: #F9FAFB;
}

.su-cp-co--tools::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23374151'%3E%3Cpath d='M4.5 4 1 8l3.5 4 .81-.71L2.52 8l2.79-3.29L4.5 4zm7 0-.81.71L13.48 8l-2.79 3.29.81.71L15 8l-3.5-4zM9.3 2.5l-2.9 11 .97.26 2.9-11-.97-.26z'/%3E%3C/svg%3E");
}

/* Технические требования (ноутбук, графит) */
.su-cp-co--devices {
	--co: #374151;
	--co-bg: #F9FAFB;
}

.su-cp-co--devices::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23374151'%3E%3Cpath d='M3 3.5A1.5 1.5 0 0 1 4.5 2h7A1.5 1.5 0 0 1 13 3.5V11H3V3.5zM1.5 12h13l1 1.5H.5l1-1.5z'/%3E%3C/svg%3E");
}

/* ── Доверие ── */

/* Позитивная новость (галочка, зелёный) */
.su-cp-co--ok {
	--co: #16A34A;
	--co-bg: #F0FDF4;
}

.su-cp-co--ok::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2316A34A'%3E%3Cpath d='M16 8A8 8 0 1 1 8 0a8 8 0 0 1 8 8zM6.79 11.21l4.5-4.5-.71-.71-3.79 3.8-1.64-1.65-.71.7z' transform='translate(0.3 0.3) scale(0.96)'/%3E%3C/svg%3E");
}

/* Обновления включены (круговая стрелка, синий) */
.su-cp-co--update {
	--co: #2563EB;
	--co-bg: #EFF6FF;
}

.su-cp-co--update::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232563EB' stroke-width='1.8' d='M13.5 8A5.5 5.5 0 1 1 8 2.5'/%3E%3Cpath fill='%232563EB' d='m13.9 3.2 1.6 3.6-3.7-.9z'/%3E%3C/svg%3E");
}

/* Цитата автора (кавычка, графит) */
.su-cp-co--quote {
	--co: #374151;
	--co-bg: #F9FAFB;
}

.su-cp-co--quote::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23374151'%3E%3Cpath d='M3 4h4v4.5c0 2.5-1.3 3.9-3.6 4.3l-.4-1.6c1.3-.3 2-1 2-2.2V7.6H3V4zm6.5 0h4v4.5c0 2.5-1.3 3.9-3.6 4.3l-.4-1.6c1.3-.3 2-1 2-2.2V7.6h-2V4z'/%3E%3C/svg%3E");
}

/* Общая информация (i, синий) */
.su-cp-co--info {
	--co: #2563EB;
	--co-bg: #EFF6FF;
}

.su-cp-co--info::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232563EB'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.342-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
}

/* ═════════════════════════ Ритм страницы (0.7.0) ════════════════════════
 *
 * До 0.7.0 воздух держался на пяти точечных правилах соседства: любая
 * пара блоков вне этих пяти (коллаут + коллаут, шаги + абзац) слипалась
 * вплотную — владелец назвал итог «рваным». Теперь отступ даёт ОДНО
 * правило всем парам прямых детей секции, а исключения — только для
 * заголовков.
 *
 * ⚠️ `.su-cp-sec` обязан оставаться обычным block. Сделать его grid или
 * flex — значит выключить схлопывание марджинов, и все внутренние
 * отступы разом удвоятся.
 */

.su-cp-sec > * + * {
	margin-top: var(--su-cp-sp-m);
}

/* Заголовок ближе к своему содержимому, чем к чужому (закон близости) */
.su-cp-sec > .su-cp-h2 + * {
	margin-top: 14px;
}

.su-cp-sec > .su-cp-h2 + .su-cp-lead {
	margin-top: 8px;
}

.su-cp-sec > * + .su-cp-h3 {
	margin-top: var(--su-cp-sp-xl);
}

.su-cp-sec > .su-cp-h3 + * {
	margin-top: 10px;
}

/* Между секциями — шов: тонкая линия и равный воздух с обеих сторон
   (28 + 28 = прежние 52px, но глазу есть за что зацепиться).
   Решение владельца 25.08.2026. */
.su-cp-sec + .su-cp-sec {
	border-top: 1px solid var(--su-cp-line);
	padding-top: var(--su-cp-sp-sec);
	margin-top: var(--su-cp-sp-sec);
}

/* Тот же ритм внутри тел аккордеона: до 0.7.0 пары там не получали
   отступа вовсе (правила секции действуют только на её прямых детей). */
.su-cp-acc__inner > * + * {
	margin-top: var(--su-cp-sp-s);
}

/* И в кратком описании над кнопкой: наши блоки лежат там в обёртке темы,
   а не в секции, и после обнуления margin у .su-cp-p остались бы без
   воздуха вовсе. */
.woocommerce-product-details__short-description > * + * {
	margin-top: var(--su-cp-sp-s);
}

/* ═════════════════════════ Блок под кнопкой покупки (0.6.0) ═════════════
 *
 * «Курс содержит», условия оплаты и честная строка ограничений стоят
 * ПОД кнопкой — там, где их ищут (так у Udemy и Domestika). Выводит их
 * хук плагина из меты `_su_cp_undercart`, а не краткое описание:
 * краткое тема печатает над кнопкой.
 */

.su-cp-undercart {
	margin-top: 22px;
}

.su-cp-undercart > * + * {
	margin-top: var(--su-cp-sp-m);
}

/* ═════════════ Соседи описания на пилотных страницах (0.7.0) ════════════
 *
 * Этот файл грузится ТОЛЬКО на товарах с метой _su_course_page=1, поэтому
 * правила ниже не задевают остальной магазин. Чужие файлы (accordion.css,
 * siluette-reviews) не трогаем — «один плагин — одна тема»; здесь только
 * согласование вида НА пилотной странице. Специфичность взята с запасом:
 * порядок печати стилей (алфавит плагинов) хрупок.
 */

/* Заголовки соседних блоков — по канону секций: размер, чернила, черта */
h2.silr-heading,
.up-sells.products > h2,
section.related.products > h2 {
	font-size: var(--su-cp-fs-h2);
	font-weight: 700;
	color: var(--su-cp-ink);
	line-height: var(--su-cp-lh-head);
}

h2.silr-heading::before,
.up-sells.products > h2::before,
section.related.products > h2::before {
	content: '';
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--su-cp-accent);
	margin-bottom: 10px;
}

/* Панель отзывов отделена от описания тем же швом, что секции между
   собой: блок комментариев — отдельная тема, а не хвост описания. */
#cgkit-tab-reviews {
	border-top: 1px solid var(--su-cp-line);
	padding-top: var(--su-cp-sp-sec);
	margin-top: var(--su-cp-sp-sec);
}

/* Аккордеон магазина «Как купить» (канон 0.4.1, зона под кнопкой) на
   пилотной странице стоит рядом с su-cp-acc — сводим самые заметные
   расхождения: вес заголовка, синие ссылки, синее выделение. */
.custom-accordion-wrapper .accordion-title {
	font-weight: 700;
	color: var(--su-cp-ink);
}

.custom-accordion-wrapper .faq-content a {
	color: #15803D; /* тот же зелёный, что у ссылок зоны покупки */
}

.custom-accordion-wrapper .faq-content .faq-highlight {
	border-left-color: var(--su-cp-accent);
	background-color: var(--su-cp-accent-bg);
}

/* ═════════════════════════ Слоты вставок (0.7.0) ════════════════════════
 *
 * Владелец добавляет свои блоки (бандлы, похожие товары, любой шорткод)
 * через поле в админке товара; плагин ставит их на место маркеров
 * <!-- su-slot:... --> в описании. Обёртка — та же секция, поэтому шов
 * и ритм вставка получает автоматически. Здесь только страховка от
 * расползания витринных сеток WooCommerce внутри колонки описания.
 */

.su-cp-slot ul.products {
	margin-bottom: 0;
}