/*
 * Страница плагина.
 *
 * Страница светлая, а сайт тёмный — и это не разнобой, а приём, который
 * на сайте уже был: у «Работ» и «Отзывов» тоже светлый холст. Держится
 * он на двух вещах. Первое: **первый экран тёмный** — шапка у нас
 * накладка и наверху прозрачная, белые надписи на светлом просто
 * исчезли бы. Второе: **подвал тоже тёмный**, и светлый холст оказыва-
 * ется зажат между двумя тёмными краями, то есть читается как разворот.
 *
 * **Разметку страницы даёт редактор, а не шаблон.** Поэтому правила
 * здесь написаны на теги внутри `.ssp__text`: заголовок — `h2`, список
 * возможностей — `ul`, перечень причин — `ol`, вопрос — `details`.
 * Редактор ничего не знает про наши классы, и знать не должен: человек
 * пишет текст, а оформление берёт на себя тема.
 *
 * Исключений из этого правила два, оба помечены классом в самом тексте:
 * `.ssp-note` — врезка-обещание, `.ssp-mark` — выделенные слова.
 *
 * Правила вложены в `.ssp` не для красоты: пока на сайте живёт кит
 * Elementor, `.elementor-kit-6 h2` перебивает одиночный селектор
 * и превращает любой заголовок в капс на сорок пикселей.
 */

.ssp {
	/* Светлая половина */
	--ssp-bg: #f7f7f7;
	--ssp-surface: #ffffff;
	--ssp-ink: #101418;
	--ssp-dim: #6b7780;
	--ssp-line: rgba(16, 20, 24, 0.1);

	/* Тёмная половина: первый экран и карточка цены */
	--ssp-dark: #0e0e0e;
	--ssp-dark-card: #171717;
	--ssp-dark-ink: #ffffff;
	--ssp-dark-muted: rgba(255, 255, 255, 0.66);

	--ssp-accent: #25cbc2;
	--ssp-accent-2: #1affd3;
	/* Тот же бирюзовый на белом читается едва-едва, поэтому для текста
	   берётся притемнённый: заливкам он не нужен, ссылкам обязателен. */
	--ssp-accent-ink: #0d8b84;

	background: var(--ssp-bg);
	color: var(--ssp-ink);
	display: block;
	font-family: "Gotham Pro", system-ui, -apple-system, sans-serif;
	/*
	 * Обрезка на всю страницу, а не на блоке отзывов. Витрина плагина
	 * раздвигается до краёв окна сама и считает своё отрицательное поле
	 * скриптом — при узкой полосе прокрутки она вылезала за окно
	 * и тянула страницу вбок. Здесь обрезать безопасно: край страницы
	 * и есть край окна. `clip`, а не `hidden`: он не делает из страницы
	 * область прокрутки и не ломает липкую карточку.
	 */
	overflow-x: clip;
}

.ssp .ssp__inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: calc(var(--ss-shell) + var(--ss-gutter) * 2);
	padding-inline: var(--ss-gutter);
}

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

/* Шапка лежит поверх страницы и места не занимает — поле под неё
   оставляем сами. Нижний край скруглён: так тёмная полоса читается
   как обложка, а не как оборванный фон. */
.ssp .ssp__hero {
	background: var(--ssp-dark);
	border-end-end-radius: clamp(20px, 2.4vw, 36px);
	border-end-start-radius: clamp(20px, 2.4vw, 36px);
	color: var(--ssp-dark-ink);
	padding-block: calc(var(--ss-header-h, 78px) + clamp(36px, 6vh, 76px)) clamp(40px, 7vh, 84px);
}

.ssp .ssp__inner--hero {
	align-items: center;
	display: grid;
	gap: clamp(24px, 3vw, 64px);
	grid-template-columns: minmax(0, 1fr) auto;
}

.ssp .ssp__label {
	align-items: center;
	color: var(--ssp-accent);
	display: inline-flex;
	font-size: 13px;
	gap: 8px;
	letter-spacing: 0.1em;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.ssp .ssp__label::before {
	background: var(--ssp-accent);
	block-size: 1px;
	content: "";
	display: inline-block;
	inline-size: 24px;
}

.ssp .ssp__title {
	color: var(--ssp-dark-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h1);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
	max-width: 18ch;
	text-transform: none;
}

.ssp .ssp__podzag {
	color: var(--ssp-dark-muted);
	font-size: var(--ss-lead);
	line-height: 1.45;
	margin: clamp(14px, 2vh, 20px) 0 0;
	max-width: 44ch;
}

/*
 * Знак плагина в первом экране — крупно и без рамки: это лицо товара.
 *
 * Коробка квадратная, знак вписан. Знаки у плагинов разной формы:
 * у Elementor квадрат, у WP Rocket — высокая «W». Задай мы только
 * ширину, «W» вытянула бы первый экран вдвое, а в карточке цены
 * встала бы башней рядом с ценой.
 */
.ssp .ssp__hero-logo {
	block-size: clamp(120px, 13vw, 190px);
	border-radius: clamp(18px, 2vw, 28px);
	display: block;
	inline-size: clamp(120px, 13vw, 190px);
	object-fit: contain;
}

/* ------------------------------------------------------------- карточка цены */

/*
 * Едет вместе с чтением. Липким сделано именно это, а не оглавление:
 * оглавление читают один раз в начале, а цена с кнопкой нужны в тот
 * момент, когда человек дочитал про nulled-версии и решился. Чтобы
 * карточка действительно ехала, липким должен быть элемент внутри
 * колонки во всю высоту текста — сама колонка `.ssp__rail`.
 *
 * Карточка тёмная на светлой странице: здесь она единственное действие,
 * и отделять её от текста надо цветом, а не рамкой.
 */
.ssp .ssp__rail {
	block-size: 100%;
}

/*
 * Собрана так же, как белая строка покупки внизу: подпись отдельной
 * строкой сверху, под ней слева знак, справа цена со сроком, кнопка
 * во всю ширину. Одна карточка товара в двух видах — тёмная у текста
 * и светлая в конце чтения; составлены они одинаково, поэтому вторая
 * читается как та же, а не как новая.
 *
 * Места назначены явно: иначе сетка разложит пять элементов по-своему.
 */
.ssp .ssp__buy {
	align-items: center;
	background: var(--ssp-dark-card);
	border-radius: 24px;
	color: var(--ssp-dark-ink);
	column-gap: 14px;
	display: grid;
	grid-template-areas:
		"label label"
		"logo  text"
		"cta   cta";
	grid-template-columns: auto minmax(0, 1fr);
	inset-block-start: calc(var(--ss-header-h, 78px) + 16px);
	padding: clamp(22px, 2.2vw, 28px);
	position: sticky;
	row-gap: 2px;
	text-align: start;
}

/* Подпись относится к карточке целиком, а не к цене: рядом со знаком
   она читалась как название товара. */
.ssp .ssp__buy-label {
	color: var(--ssp-dark-muted);
	font-size: 13px;
	grid-area: label;
	letter-spacing: 0.08em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

/* Знак товара в карточке: без него карточка была ценником без имени,
   а тут её видно всё время, пока человек читает. */
.ssp .ssp__logo {
	align-self: center;
	block-size: 56px;
	border-radius: 14px;
	display: block;
	grid-area: logo;
	inline-size: 56px;
	margin: 0;
	object-fit: contain;
}

.ssp .ssp__buy-text {
	grid-area: text;
	min-inline-size: 0;
}

.ssp .ssp__price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0;
}

.ssp .ssp__price-now {
	color: var(--ssp-dark-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(28px, 2.6vw, 38px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* Цена на официальном сайте — довод, а не цена: зачёркнута и приглушена,
   чтобы её не приняли за нашу. */
.ssp .ssp__price-was {
	color: var(--ssp-dark-muted);
	font-size: 17px;
	text-decoration: line-through;
}

.ssp .ssp__srok {
	color: var(--ssp-dark-muted);
	font-size: var(--ss-small);
	margin: 2px 0 0;
}

.ssp .ssp__cta {
	align-items: center;
	background: linear-gradient(90deg, var(--ssp-accent-2), var(--ssp-accent));
	border-radius: 999px;
	color: #0b0b0b;
	display: inline-flex;
	font-size: 15px;
	font-weight: 500;
	gap: 10px;
	grid-area: cta;
	inline-size: 100%;
	justify-content: center;
	margin-block-start: clamp(16px, 2.4vh, 22px);
	min-block-size: 54px;
	padding-inline: 28px;
	text-decoration: none;
	transition: transform 0.2s ease;
}

/*
 * Строка покупки в конце чтения. Кнопка во всю ширину с ценой внутри
 * выглядела рекламной полосой — глаз проскакивал её как баннер.
 * Карточка товара честнее: знак, название, цена и кнопка обычного
 * размера, то же самое, что в липкой карточке справа.
 */
.ssp .ssp__buybar {
	align-items: center;
	background: var(--ssp-surface);
	border: 1px solid var(--ssp-line);
	border-radius: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(14px, 1.6vw, 20px);
	margin-block-start: clamp(32px, 5vh, 56px);
	padding: clamp(16px, 1.8vw, 22px);
}

.ssp .ssp__buybar-logo {
	block-size: 56px;
	border-radius: 12px;
	display: block;
	flex: none;
	inline-size: 56px;
	object-fit: contain;
}

.ssp .ssp__buybar-text {
	margin-inline-end: auto;
	min-inline-size: 0;
}

.ssp .ssp__buybar-name {
	color: var(--ssp-ink);
	font-size: var(--ss-h4);
	font-weight: 600;
	margin: 0;
}

.ssp .ssp__buybar-price {
	align-items: baseline;
	color: var(--ssp-ink);
	display: flex;
	flex-wrap: wrap;
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 500;
	gap: 10px;
	letter-spacing: -0.02em;
	margin: 6px 0 0;
}

.ssp .ssp__buybar-srok {
	color: var(--ssp-dim);
	font-family: "Gotham Pro", system-ui, sans-serif;
	font-size: var(--ss-small);
	font-weight: 400;
	letter-spacing: 0;
}

.ssp .ssp__cta--bar {
	inline-size: auto;
	margin-block-start: 0;
	min-block-size: 54px;
	padding-inline: 32px;
}

/* --------------------------------------------------------------- раскладка */

.ssp .ssp__body {
	align-items: start;
	display: grid;
	gap: clamp(24px, 3vw, 56px);
	grid-template-columns: minmax(0, 1fr) 330px;
	padding-block: clamp(32px, 5vh, 56px) clamp(40px, 7vh, 80px);
}

/* Оглавление собирает шаблон из заголовков самой страницы — в отличие
   от виджета конструктора, который рисовался скриптом. Стоит статично
   в начале текста: его читают один раз. */
.ssp .ssp__toc {
	border-block-end: 1px solid var(--ssp-line);
	margin-block-end: clamp(26px, 3.6vh, 40px);
	padding-block-end: clamp(18px, 2.4vh, 26px);
}

.ssp .ssp__toc-title {
	color: var(--ssp-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h3);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 clamp(14px, 2vh, 20px);
	text-transform: none;
}

.ssp .ssp__toc-list {
	counter-reset: ssp-toc;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ssp .ssp__toc-list li {
	margin: 0;
}

/* Пункты оглавления — пилюли: так они читаются как ссылки, а не как
   ещё один список внутри страницы, полной списков. */
.ssp .ssp__toc-list a {
	background: var(--ssp-surface);
	border: 1px solid var(--ssp-line);
	border-radius: 999px;
	color: var(--ssp-ink);
	display: inline-flex;
	font-size: var(--ss-text);
	line-height: 1.25;
	padding: 12px 20px;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.ssp .ssp__toc-list a::before {
	color: var(--ssp-accent-ink);
	content: counter(ssp-toc) ".";
	counter-increment: ssp-toc;
	font-weight: 600;
	margin-inline-end: 8px;
}

/* ------------------------------------------------------------ текст страницы

   Дальше — разметка родного редактора. Никаких своих классов: человек
   пишет заголовок, абзац и список, а как это выглядит, решает тема. */

.ssp .ssp__text {
	color: var(--ssp-ink);
	font-size: var(--ss-text);
	line-height: 1.65;
}

.ssp .ssp__text h2 {
	color: var(--ssp-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h2);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: clamp(40px, 6vh, 68px) 0 clamp(16px, 2.2vh, 24px);
	scroll-margin-block-start: calc(var(--ss-header-h, 78px) + 20px);
	text-transform: none;
}

.ssp .ssp__text > h2:first-child {
	margin-block-start: 0;
}

.ssp .ssp__text h3 {
	color: var(--ssp-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h3);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: clamp(24px, 3vh, 36px) 0 12px;
	text-transform: none;
}

.ssp .ssp__text p {
	margin: 0 0 1em;
}

.ssp .ssp__text p:last-child {
	margin-block-end: 0;
}

.ssp .ssp__text a {
	border-block-end: 1px solid rgba(13, 139, 132, 0.35);
	color: var(--ssp-accent-ink);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.ssp .ssp__text strong {
	color: var(--ssp-ink);
	font-weight: 600;
}

/*
 * Выделенные слова. В конструкторе они были покрашены инлайном — тем
 * самым зелёным от прошлого редизайна; при переносе цвет заменён
 * классом, и теперь выделение красит тема. Правило на инлайновый цвет
 * оставлено рядом: редактор тоже умеет красить текст, и такая правка
 * не должна выпадать из палитры.
 */
.ssp .ssp__text .ssp-mark,
.ssp .ssp__text [style*="color"] {
	color: var(--ssp-accent-ink) !important;
}

/* ---------------------------------------------------- список возможностей

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

.ssp .ssp__text > ul {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: clamp(18px, 2.6vh, 26px) 0;
	padding: 0;
}

.ssp .ssp__text > ul > li {
	align-items: center;
	background: var(--ssp-surface);
	border: 1px solid var(--ssp-line);
	border-radius: 14px;
	color: var(--ssp-ink);
	display: flex;
	gap: 14px;
	line-height: 1.4;
	margin: 0;
	min-block-size: 64px;
	padding: 12px 18px;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

/* Галочка в кружке, а не уголок сбоку: в списке из двадцати пунктов
   глазу нужен якорь. Рисуется контуром со скруглёнными концами —
   картинкой прямо в стиле, без сетевого запроса. Двумя полосками её
   уже пробовали: на повороте у них торчали углы. */
.ssp .ssp__text > ul > li::before {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3 3 6.2-6.6' fill='none' stroke='%230d8b84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% / 17px 17px,
		rgba(37, 203, 194, 0.14);
	block-size: 32px;
	border-radius: 50%;
	content: "";
	flex: none;
	inline-size: 32px;
}

/* ------------------------------------------------------- плюсы и минусы

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

.ssp .ssp__text ul.ssp-plus,
.ssp .ssp__text ul.ssp-minus {
	display: block;
	list-style: none;
	margin: 10px 0;
	padding: 0;
}

.ssp .ssp__text ul.ssp-plus li,
.ssp .ssp__text ul.ssp-minus li {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	min-block-size: 0;
	padding: 0;
	display: flex;
	gap: 12px;
	line-height: 1.45;
	margin: 0;
}

.ssp .ssp__text ul.ssp-plus li::before,
.ssp .ssp__text ul.ssp-minus li::before {
	block-size: 26px;
	border-radius: 50%;
	content: "";
	flex: none;
	inline-size: 26px;
}

/* Плюс и минус нарисованы полосками, а не буквой: у знака «минус»
   в наборе нет пары к плюсу той же ширины, и рядом они выглядели
   разнокалиберно. */
.ssp .ssp__text ul.ssp-plus li::before {
	background:
		linear-gradient(var(--ssp-accent-ink), var(--ssp-accent-ink)) no-repeat 50% / 11px 2px,
		linear-gradient(var(--ssp-accent-ink), var(--ssp-accent-ink)) no-repeat 50% / 2px 11px,
		rgba(37, 203, 194, 0.14);
}

.ssp .ssp__text ul.ssp-minus li::before {
	background:
		linear-gradient(var(--ssp-dim), var(--ssp-dim)) no-repeat 50% / 11px 2px,
		rgba(16, 20, 24, 0.07);
}

/* ------------------------------------------------------- перечень причин

   Обычный `ol`: там, где у перечня есть порядок, галочки врут — они
   говорят «всё это хорошо», а речь о причинах не делать. Номера рисует
   браузер, мы красим маркер. */

/*
 * Номер рисуем счётчиком, а не маркером браузера, и это не вкусовщина.
 * Маркер живёт СНАРУЖИ содержимого пункта — в поле слева, — и любой
 * предок с обрезкой его срежет. У ответа на вопрос обрезка есть
 * и нужна: иначе он вылезал бы за карточку, пока едет. На телефоне
 * заказчика от номеров осталась половина цифры, в headless при этом
 * всё было цело — в разных движках маркер встаёт по-разному.
 *
 * Счётчик рисуется внутри пункта, и срезать его нечем. Заодно номера
 * выглядят одинаково везде: и в тексте, и в ответе, и во врезке.
 */
.ssp .ssp__text ol {
	counter-reset: ssp-nomer;
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: clamp(16px, 2.4vh, 24px) 0;
	padding-inline-start: 0;
}

.ssp .ssp__text ol > li {
	counter-increment: ssp-nomer;
	margin: 0;
	padding-inline-start: 1.9em;
	position: relative;
}

.ssp .ssp__text ol > li::before {
	color: var(--ssp-accent-ink);
	content: counter(ssp-nomer) ".";
	font-weight: 600;
	inset-inline-start: 0;
	position: absolute;
}

/* Точки маркированных списков внутри вопросов и врезок красим тем же
   цветом: там маркер браузера остаётся, но он узкий и не срезается. */
.ssp .ssp__text ul li::marker {
	color: var(--ssp-accent-ink);
	font-weight: 600;
}

/* Списки внутри вопросов и врезок — обычные, без плиток. */
.ssp .ssp__text details ul,
.ssp .ssp__text .ssp-note ul {
	margin: 0 0 1em;
	padding-inline-start: 1.4em;
}

/* Нумерованный там же — теснее к тексту вокруг, чем в основном потоке. */
.ssp .ssp__text details ol,
.ssp .ssp__text .ssp-note ol {
	gap: 8px;
	margin: 0 0 1em;
}

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

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

.ssp .ssp__text .ssp-note {
	background: rgba(37, 203, 194, 0.09);
	border: 1px solid rgba(37, 203, 194, 0.32);
	border-radius: 20px;
	color: var(--ssp-ink);
	column-gap: clamp(14px, 1.6vw, 22px);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	margin-block: clamp(26px, 3.6vh, 40px);
	padding: clamp(20px, 2.2vw, 28px);
	row-gap: 0;
}

/* Знак — та же галочка в круге, что у списка возможностей, только
   крупнее и залитая: повторённый приём читается как система. */
.ssp .ssp__text .ssp-note::before {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3 3 6.2-6.6' fill='none' stroke='%230b0b0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50% / 24px 24px,
		var(--ssp-accent);
	block-size: 46px;
	border-radius: 50%;
	content: "";
	grid-row: 1 / span 2;
	inline-size: 46px;
}

/* Места назначены явно: три элемента на две колонки сетка раскладывает
   по-своему — заголовок уезжал в колонку знака и растягивал её,
   а страница ехала вбок. */
.ssp .ssp__text .ssp-note > * {
	grid-column: 2;
	min-inline-size: 0;
}

.ssp .ssp__text .ssp-note__title {
	color: var(--ssp-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h4);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
}

/*
 * Верхний просвет у абзаца съеден нарочно: между заголовком и текстом
 * оставалось пять пикселей поля, а глазу мерещилось двадцать — так
 * работает межстрочное расстояние, половина его добавляется над первой
 * строкой. Отрицательное поле убирает именно эту половину.
 */
.ssp .ssp__text .ssp-note > p {
	margin-block-start: -5px;
}

/* ------------------------------------------------------------------ вопросы

   Обычный блок «Детали» из редактора: раскрытие, клавиатура и чтение
   с экрана достались от браузера даром. Движение добавляет `plugin.js`,
   и без него гармошка просто открывается мгновенно. */

.ssp .ssp__text details {
	background: var(--ssp-surface);
	border-radius: 16px;
	margin-block: 8px;
	padding-inline: clamp(16px, 1.8vw, 24px);
}

.ssp .ssp__text details:first-of-type {
	margin-block-start: clamp(18px, 2.6vh, 26px);
}

/* Нижнее поле у последнего: следующий блок текста прилипал к карточке
   вплотную и читался как её часть. */
.ssp .ssp__text details:last-of-type {
	margin-block-end: clamp(32px, 4.6vh, 52px);
}

.ssp .ssp__text summary {
	align-items: center;
	color: var(--ssp-ink);
	cursor: pointer;
	display: flex;
	font-size: var(--ss-h4);
	font-weight: 500;
	gap: 16px;
	justify-content: space-between;
	line-height: 1.35;
	list-style: none;
	padding-block: 20px;
}

.ssp .ssp__text summary::-webkit-details-marker {
	display: none;
}

/* Плюс нарисован псевдоэлементом: своего узла у блока «Детали» нет,
   а лишний span в тексте — это то, что автор однажды сотрёт. */
.ssp .ssp__text summary::after {
	background:
		linear-gradient(var(--ssp-accent-ink), var(--ssp-accent-ink)) no-repeat 50% 50% / 12px 2px,
		linear-gradient(var(--ssp-accent-ink), var(--ssp-accent-ink)) no-repeat 50% 50% / 2px 12px,
		rgba(37, 203, 194, 0.12);
	block-size: 30px;
	border-radius: 50%;
	content: "";
	flex: none;
	inline-size: 30px;
	transition: transform 0.2s ease;
}

.ssp .ssp__text details[open] summary::after {
	transform: rotate(45deg);
}

.ssp .ssp__text .ssp__faq-a {
	border-block-start: 1px solid var(--ssp-line);
	/* Во время раскрытия ответ едет снизу вверх и не должен вылезать
	   за карточку. */
	overflow: hidden;
	padding-block: 16px 22px;
	padding-inline-end: 46px;
}

/* ------------------------------------------------------------- витрина

   Страница раздела: три карточки товара в ряд. Карточка светлая на
   светлом — отделена не цветом, а рамкой и полем: цветом на этой
   странице отделено только действие. */

.ssp .ssp__vitrina {
	display: grid;
	gap: clamp(14px, 1.6vw, 20px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-block: clamp(32px, 5vh, 56px);
}

/* Колонкой, а не сеткой: цену надо прижать к низу карточки, а для этого
   ей нужен `margin-block-start: auto`, и работает он во flex. Тексты
   у плагинов разной длины, и без этого цифры стояли лесенкой. */
.ssp .sspv {
	background: var(--ssp-surface);
	border: 1px solid var(--ssp-line);
	border-radius: 22px;
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.2vw, 28px);
}

.ssp .sspv__logo {
	block-size: 56px;
	border-radius: 14px;
	display: block;
	inline-size: 56px;
	margin-block-end: 16px;
	object-fit: contain;
}

.ssp .sspv__name {
	color: var(--ssp-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: var(--ss-h3);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 10px;
	text-transform: none;
}

.ssp .sspv__name a {
	color: inherit;
	text-decoration: none;
}

.ssp .sspv__anons {
	color: var(--ssp-dim);
	line-height: 1.5;
	margin: 0 0 18px;
}

/* Цена прижата к низу карточки: тексты у плагинов разной длины,
   и без этого цифры стояли лесенкой. */
.ssp .sspv__price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0;
	margin-block-start: auto;
}

.ssp .sspv__price-now {
	color: var(--ssp-ink);
	font-family: "Unbounded", system-ui, sans-serif;
	font-size: clamp(26px, 2.2vw, 32px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
}

.ssp .sspv__price-was {
	color: var(--ssp-dim);
	font-size: 16px;
	text-decoration: line-through;
}

.ssp .sspv__srok {
	color: var(--ssp-dim);
	font-size: var(--ss-small);
}

.ssp .sspv__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-block-start: 18px;
}

.ssp .sspv__actions .ssp__cta {
	inline-size: auto;
	margin-block-start: 0;
	min-block-size: 48px;
}

/* «Подробнее» — не вторая кнопка, а ссылка: действие на карточке одно,
   и спорить с ним нечему. */
.ssp .sspv__more {
	border-block-end: 1px solid rgba(13, 139, 132, 0.35);
	color: var(--ssp-accent-ink);
	font-size: var(--ss-small);
	text-decoration: none;
}

/* На витрине текста под карточками может не быть вовсе — тогда и поля
   сверху не нужно. */
.ssp .ssp__body--odna {
	grid-template-columns: minmax(0, 1fr);
	padding-block-start: 0;
}

/* --------------------------------------------------------------- отзывы */

/*
 * Блок отзывов приезжает со своими цветами — тёмными, как везде.
 * Здесь холст светлый, поэтому переопределяем его переменные, а не
 * правила: блок остаётся одним на весь сайт.
 */
.ssp .ssp__reviews {
	padding-block-end: clamp(28px, 4vh, 48px);
}

/* Строка покупки идёт последней, после отзывов, и закрывает страницу:
   нижнее поле держит она, а не блок отзывов. */
.ssp .ssp__final {
	padding-block-end: clamp(48px, 8vh, 96px);
}

.ssp .ssp__final .ssp__buybar {
	margin-block-start: 0;
}

.ssp .ssp__reviews .ssr {
	/*
	 * Переменные витрины плагина отзывов. В его настройках карточка
	 * покрашена в #f7f7f7 — под тёмный сайт это правильно, а на нашей
	 * светлой странице ровно тот же цвет, и карточки просто исчезали:
	 * не пропадали, а сливались с холстом. Поэтому здесь белый.
	 */
	--ss-card-bg: var(--ssp-surface);
	--ss-card-border: 1px solid var(--ssp-line);

	--ssr-card: var(--ssp-surface);
	--ssr-ink: var(--ssp-ink);
	--ssr-muted: var(--ssp-ink);
	--ssr-dim: var(--ssp-dim);
	--ssr-line: var(--ssp-line);

	color: var(--ssp-ink);
}

/* ------------------------------------------------------------- наведение

   Цвет подписи на наведении держим сами: кит Elementor красит любую
   ссылку правилом `.elementor-kit-6 a:hover` в акцент, и на бирюзовой
   кнопке подпись от этого сливалась с заливкой. */

.ssp a:hover,
.ssp a:focus-visible {
	color: inherit;
}

.ssp .ssp__cta:hover,
.ssp .ssp__cta:focus-visible {
	color: #0b0b0b;
}

/* Только там, где мышь настоящая: на сенсорном экране :hover прилипает
   к последнему нажатому и держится до следующего касания. */
@media (hover: hover) {
	.ssp .ssp__cta:hover {
		transform: translateY(-2px);
	}

	.ssp .ssp__text > ul > li:hover {
		border-color: rgba(37, 203, 194, 0.5);
		transform: translateY(-1px);
	}

	.ssp .ssp__toc-list a:hover {
		border-color: var(--ssp-accent);
		color: var(--ssp-accent-ink);
	}

	.ssp .ssp__text a:hover {
		border-block-end-color: var(--ssp-accent-ink);
		color: var(--ssp-accent-ink);
	}
}

.ssp a:focus-visible,
.ssp summary:focus-visible {
	outline: 2px solid var(--ssp-accent-ink);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ssp .ssp__cta,
	.ssp .ssp__text summary::after {
		transition: none;
	}
}

/* ---------------------------------------------------------- уже 1024 */

/* Смена режима — там же, где у контента Elementor. */
@media (max-width: 1024px) {
	/* Колонки нет — карточка встаёт над текстом, сразу под заголовком:
	   там же, где её ищут глазами на узком экране. */
	.ssp .ssp__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.ssp .ssp__rail {
		block-size: auto;
		order: -1;
	}

	.ssp .ssp__buy {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 14px clamp(16px, 2vw, 28px);
		position: static;
		text-align: start;
	}

	.ssp .ssp__buy-label,
	.ssp .ssp__logo {
		display: none;
	}

	.ssp .ssp__price {
		justify-content: flex-start;
		margin-inline-end: auto;
	}

	.ssp .ssp__srok {
		margin: 0;
	}

	.ssp .ssp__cta {
		inline-size: auto;
		margin-block-start: 0;
	}

	.ssp .ssp__hero-logo {
		inline-size: clamp(88px, 12vw, 120px);
	}

	.ssp .ssp__vitrina {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ----------------------------------------------------------- уже 767 */

@media (max-width: 767px) {
	/* Поля страницы на телефоне вдвое меньше общих двадцати: экран узкий,
	   и каждые десять пикселей идут тексту, а не пустоте. */
	.ssp {
		--ss-gutter: 10px;
	}

	.ssp .ssp__inner--hero {
		gap: 24px;
		grid-template-columns: minmax(0, 1fr);
	}

	.ssp .ssp__vitrina {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Знак с первого экрана уезжает в карточку цены: там он стоит рядом
	   с ценой и кнопкой — как в строке покупки внизу. Два знака подряд
	   на узком экране были бы повторением. */
	.ssp .ssp__hero-logo {
		display: none;
	}

	.ssp .ssp__title,
	.ssp .ssp__podzag {
		max-width: none;
	}

	/*
	 * Карточка цены собрана ровно так же, как белая строка покупки внизу:
	 * подпись строкой сверху, слева знак, справа цена со сроком, кнопка
	 * во всю ширину под ними. Места назначены явно — иначе сетка разложит
	 * пять элементов по-своему.
	 */
	.ssp .ssp__buy {
		align-items: center;
		column-gap: 14px;
		display: grid;
		grid-template-areas:
			"label label"
			"logo  text"
			"cta   cta";
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: 2px;
		text-align: start;
	}

	.ssp .ssp__logo {
		align-self: center;
		display: block;
		grid-area: logo;
		inline-size: 56px;
		margin: 0;
	}

	/* Подпись — отдельной строкой над всем: она относится к карточке
	   целиком, а не к цене, и рядом со знаком читалась как его название. */
	.ssp .ssp__buy-label {
		display: block;
		grid-area: label;
		margin: 0 0 10px;
	}

	.ssp .ssp__buy-text {
		grid-area: text;
		min-inline-size: 0;
	}

	.ssp .ssp__price {
		justify-content: flex-start;
	}

	.ssp .ssp__srok {
		margin: 2px 0 0;
	}

	.ssp .ssp__cta {
		grid-area: cta;
		inline-size: 100%;
		margin-block-start: 14px;
	}

	/* Строка покупки — тоже по левому краю: та же карточка товара. */
	.ssp .ssp__buybar {
		text-align: start;
	}

	.ssp .ssp__buybar-text {
		inline-size: calc(100% - 70px);
	}

	.ssp .ssp__buybar-price {
		justify-content: flex-start;
	}

	.ssp .ssp__cta--bar {
		inline-size: 100%;
	}

	.ssp .ssp__text > ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.ssp .ssp__text .ssp__faq-a {
		padding-inline-end: 0;
	}
}