/* Start:/local/templates/vine/css/certificate-page.css?17872456539915*/
/* =========================================================================
   Страница «Подарочный сертификат» — /catalog/sertifikaty/
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 874:8551.

   Здесь лежат только те секции, которые рисует сама страница-сборка:
   H1, ряд рекламных баннеров, плашка преимуществ, шапка конструктора и
   блок покупки. Всё остальное на странице — шаблоны компонентов со своими
   style.css (cert-banners-slider, cert-banner-single, cert-template-picker,
   faq-accordion, course-reviews, sections-tiles) и общий слой конструктора
   css/cert-constructor.css. template_styles.css не правится.

   Вертикальный ритм страницы — 16px между блоками (координаты 874:8553:
   крошки 0, H1 32, баннеры 160, плашка 536, шапка 710/773, конструктор 831,
   блок покупки 1099, FAQ 1354, отзывы 1762, разделы 2535). Шаг даёт
   .vine-section из template_styles.css, поэтому в этом файле его нет.
   ========================================================================= */

/* --------------------------------------------------- КРОШКИ -> H1 (16px) */
/* 874:8555 крошки на y=0 высотой 16, 874:8556 H1 на y=32 — под крошками 16px.
   Отбивку задаёт .vine-breadcrumb-wrap (margin-bottom) в стилях самих крошек,
   но обёртка крошек несёт и класс .vine-container, а template_styles.css
   объявляет `.vine-container { margin: 0 auto }` ПОЗЖЕ в общем бандле —
   при равной специфичности (0,1,0) побеждает он и обнуляет margin-bottom.
   Перебиваем постранично селектором с .vine-main — (0,2,0).
   Проверено замером: crumbs.bottom -> h1.top = 16px. */
.vine-main .vine-breadcrumb-wrap {
	margin-bottom: var(--vine-gap, 16px);
}

/* ------------------------------------------------------------------ H1 */
/* 874:8556 — 1248×112: Roboto Regular 48px в две строки по 56.
   Селектор с .vine-main перебивает общее правило .vine-main h1 (40px). */
.vine-main .cert-h1 {
	max-width: var(--vine-container, 1248px);
	margin: 0;
	font-size: 48px;
	font-weight: 400;
	line-height: 56px;
}

/* -------------------------------------------------- РЕКЛАМНЫЕ БАННЕРЫ */
/* 1658:7178 — ряд 1248×360: карусель 752 + баннер юрлицам 480, зазор 16.
   Ширины задают сами шаблоны баннеров, здесь только ряд. */
.cert-banners {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
	max-width: var(--vine-container, 1248px);
}

/* -------------------------------------------------- ПЛАШКА ПРЕИМУЩЕСТВ */
/* 1658:7195 — 1248×158, серое поле #C4C4C4, поля 16, углы скруглены на 16.
   Заголовок 878×47 (40px Bold) на x=16/y=16, список 1216×63 на x=16/y=79 —
   три строки по 21. */
.cert-why {
	box-sizing: border-box;
	max-width: var(--vine-container, 1248px);
	padding: var(--vine-gap, 16px);
	border-radius: 16px;
	background: var(--vine-color-card, #C4C4C4);
}

.vine-main .cert-why__title {
	margin: 0 0 var(--vine-gap, 16px);
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 700;
	line-height: 47px;
}

/* 884:9097 — маркированный список 1216×63: точка у левого края текстового
   блока, сам текст пункта отбит на 27px.
   Селектор обязан быть с .vine-main: сброс `ul[class], ol[class]
   { list-style: none }` из template_styles.css имеет специфичность (0,2,0)
   и одного класса не пропускает — маркеры пропадали.
   Втяжку даёт padding-left у списка, маркер стоит вне пункта (outside),
   поэтому точка приходится ровно на отбивку. Проверено замером:
   li.left - ul.left = 27px, list-style-type = disc. */
.vine-main .cert-why__list {
	margin: 0;
	padding-left: 27px;
	list-style: disc outside;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
}

.vine-main .cert-why__list li {
	margin: 0;
}

/* ------------------------------------------------- ШАПКА КОНСТРУКТОРА */
/* 884:9099 — «Оформить сертификат» 431×47, Roboto Bold 40px;
   884:9102 — абзац 1248×42, две строки по 21. */
.vine-main .cert-intro__title {
	margin: 0 0 var(--vine-gap, 16px);
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 700;
	line-height: 47px;
}

.cert-intro__text {
	max-width: var(--vine-container, 1248px);
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
}

/* ------------------------------------------------------ БЛОК ПОКУПКИ */
/* 1670:9135 — 1248×226:
     ряд 1670:9134 (152): кнопка 608×152 и текст 608×147, зазор 32 (x=640);
     красный текст 1785:10926 на y=168 (152 + 16);
     строка ссылок 1670:9120 на y=205 (189 + 16), пункты x = 0 / 223 / 465. */
.cert-buy {
	max-width: var(--vine-container, 1248px);
}

.cert-buy__row {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

/* 1660:9538 — тёмная кнопка 608×152, надпись Roboto Bold 40px белым */
.vine-main .cert-buy__btn.vine-btn {
	flex: 0 0 608px;
	width: 608px;
	min-height: 152px;
	padding: 0;
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 700;
	line-height: 47px;
	white-space: normal;
}

/* 1670:9119 — описание 608×147, семь строк по 21 */
.cert-buy__text {
	flex: 0 1 608px;
	width: 608px;
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
}

.cert-buy__text p {
	margin: 0;
}

/* 1785:10926 — предупреждение 586×21, красное; в покое скрыто атрибутом */
.cert-buy__error {
	margin: var(--vine-gap, 16px) 0 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	color: #FF0000;
}

.cert-buy__error[hidden] {
	display: none;
}

/* 1670:9120 — три подписи в строку с зазором 16 */
.cert-buy__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vine-gap, 16px);
	margin: var(--vine-gap, 16px) 0 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
}

/* Адреса этих трёх пунктов в макете не заданы (вопрос В11), сами адреса
   правит контент-менеджер во включаемой области include/buy-block.php.
   Вид — как у ссылок макета: #0077FF, сплошное подчёркивание.
   .cert-buy__link оставлен для обратной совместимости с прежней разметкой. */
.cert-buy__links a,
.cert-buy__link {
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
	text-underline-position: from-font;
}

.cert-buy__links a:hover,
.cert-buy__links a:focus {
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
}

.cert-buy__links a:focus-visible {
	outline: 2px solid var(--vine-color-link, #0077FF);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ FAQ */
/* 1660:9078 — блок FAQ 1248×360: заголовок 1660:9079 — 640×56 на y=32
   (то есть 48px/56), список 1660:9080 на y=104, то есть от верха заголовка
   до верха списка 72px = 56 + шаг 16 у .faq.
   Общий шаблон news.list/faq-accordion правится по всему проекту и задаёт
   `.faq .faq__title { font-size: var(--vine-fz-h1, 40px) }` — там 40px.
   Трогать общий шаблон нельзя, поэтому переопределяем постранично.
   Специфичность: у шаблона (0,2,0), у нас (0,3,0) — этого хватает и чтобы
   перебить .vine-h2/.vine-main h2 (0,1,1) из template_styles.css.
   line-height задаём числом: при `normal` строка выходит 58px и отбивка
   списка становится 74 вместо макетных 72. */
.vine-main .faq .faq__title {
	font-size: 48px;
	line-height: 56px;
}

/* --------------------------------------------------------- УЗКИЙ ЭКРАН */
/* Мобильной раскладки в макете нет: ниже ширины контейнера ряды переносятся,
   фиксированные 608 и 752/480 отдаются потоку. */
@media (max-width: 1279px) {
	.cert-banners {
		flex-wrap: wrap;
	}

	.cert-buy__row {
		flex-wrap: wrap;
		gap: var(--vine-gap, 16px);
	}

	.vine-main .cert-buy__btn.vine-btn,
	.cert-buy__text {
		flex: 1 1 100%;
		width: 100%;
	}
}

@media (max-width: 599px) {
	.vine-main .cert-h1 {
		font-size: var(--vine-fz-h1, 40px);
		line-height: 47px;
	}

	.vine-main .cert-why__title,
	.vine-main .cert-intro__title,
	.vine-main .cert-buy__btn.vine-btn {
		font-size: var(--vine-fz-h2, 34px);
		line-height: 40px;
	}

	/* на узком экране заголовок FAQ возвращается к общему кеглю секции,
	   как и остальные заголовки страницы */
	.vine-main .faq .faq__title {
		font-size: var(--vine-fz-h1, 40px);
		line-height: normal;
	}
}

/* End */


/* Start:/local/templates/vine/css/cert-constructor.css?178724148818327*/
/* =========================================================================
   КОНСТРУКТОР ПОДАРОЧНОГО СЕРТИФИКАТА И МОДАЛКИ МАСТЕРА ПОКУПКИ
   Страница /catalog/sertifikaty/ — пп. 4 и 5 [[certificate-page-spec]].
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узлы:
     1785:10909 — секция конструктора 1251×252
     1785:10913 — серая панель 636×252 (фон #C4C4C4, radius 8, padding 8, gap 64)
     1785:10632 — левая колонка 212×236, шаг строк 8
     1785:10907 — правая колонка 344×212, шаг строк 16
     1785:10910 — кнопка «Выбрать оформление» 583×252
     1229:6621 — окно выбора шаблона 732×826 (сетка 3×2 карточек 212×300, зазор 16)
     1234:6112 — окно «Кому предназначен сертификат?» 557,67×595 (состояние «Другу»)
     1665:10870 — то же окно, состояние «Себе» 557,67×497 (разница 98px = блок почты дарителя)
     1868:10434 — окно без выбора получателя 557,67×464
     1663:9648 — окно юрлиц 557,67×588
     1234:6058 — окно проверки 557,67×510

   Все размеры — числами из макета. Ширины окон дробные (557,67) — так в макете.
   Высоты окон в макете сняты с состояния, где РАЗОМ показаны все тексты ошибок;
   в спокойной форме ошибки скрыты и окна ниже (об этом прямо сказано в п. 5
   спецификации). Поэтому высоты не фиксируются, фиксируется всё остальное.

   Подключается со страницы:
     $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . '/css/cert-constructor.css');

   template_styles.css НЕ ТРОГАЕТСЯ. Отсюда берутся его токены: --vine-color-*,
   --vine-font, --vine-fz-*, --vine-radius*, --vine-gap*, и классы .vine-btn,
   .vine-btn--dark, .vine-btn--disabled.
   ========================================================================= */

/* Иконки лежат в папке шаблона выбора оформления — там их положил агент
   ассетов (см. отчёт по ассетам):
   /local/templates/vine/components/bitrix/news.list/cert-template-picker/images/
   Ссылки на них ниже — абсолютные: файл склеивается Битриксом в общий бандл,
   а относительные пути при склейке хрупкие. */
.vine-cert {
	--cert-error: #FF0000;
}

/* ============================================================== КОНСТРУКТОР */

/* 1785:10909 — ряд «панель + кнопка», зазор 32 (668 − 636).
   Габарит макета 1251 при контейнере 1248: кнопка тянется, панель — нет,
   поэтому на боевой ширине кнопка получается 580 вместо 583. */
.vine-cert-ctor {
	display: flex;
	align-items: stretch;
	gap: 32px;
	width: 100%;
	max-width: 1251px;
}

/* 1785:10913 — серая панель 636×252 */
.vine-cert-ctor__panel {
	display: flex;
	flex: 0 0 636px;
	gap: 64px;
	min-height: 252px;
	padding: var(--vine-pad-card, 8px);
	border-radius: var(--vine-radius, 8px);
	background: var(--vine-color-card, #C4C4C4);
}

/* 1785:10632 — левая колонка 212 шириной, шаг строк 8 */
.vine-cert-ctor__col--left {
	display: flex;
	flex: 0 0 212px;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
	width: 212px;
}

/* 1785:10907 — правая колонка 344 шириной, шаг строк 16 */
.vine-cert-ctor__col--right {
	display: flex;
	flex: 0 0 344px;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
	width: 344px;
}

.vine-cert-ctor__label {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
}

/* 1785:10910 — «Выбрать оформление»: белая кнопка 583×252, Roboto Bold 40px.
   Селектор с двумя классами, чтобы перебить кегль .vine-btn (18px). */
.vine-cert-ctor__design.vine-btn {
	flex: 1 1 583px;
	min-height: 252px;
	max-width: 583px;
	padding: 8px;
	font-size: 40px;
	font-weight: 700;
	line-height: normal;
	white-space: normal;
	cursor: pointer;
}

/* ============================================ РАДИОКНОПКИ И ФЛАЖКИ (24×24) */
/* Иконки — экспорт из макета (I1785:10634;9:1323, 1229:6576, I1871:10633;9:1320).
   Перекрасить <img> нельзя, поэтому вставляем фоном; системная отрисовка снята. */
.vine-cert-radio {
	display: flex;
	align-items: center;
	gap: var(--vine-gap-sm, 8px);
	min-height: 24px;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	cursor: pointer;
}

.vine-cert-radio__box {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: url("/local/templates/vine/components/bitrix/news.list/cert-template-picker/images/icon-radio.svg") no-repeat center / 24px 24px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.vine-cert-radio__box:checked {
	background-image: url("/local/templates/vine/components/bitrix/news.list/cert-template-picker/images/icon-radio-checked.svg");
}

.vine-cert-radio__box--square {
	background-image: url("/local/templates/vine/components/bitrix/news.list/cert-template-picker/images/icon-checkbox-square.svg");
}

.vine-cert-radio__box--square:checked {
	background-image: url("/local/templates/vine/components/bitrix/news.list/cert-template-picker/images/icon-checkbox-square-checked.svg");
}

.vine-cert-radio__box:focus-visible {
	outline: 2px solid var(--vine-color-link, #0077FF);
	outline-offset: 2px;
}

/* 1665:10864 — «Другу» / «Себе» в одну строку, зазор 24 (105 − 81) */
.vine-cert-radio-row {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 24px;
}

/* ==================================================== ПОЛЯ ВВОДА И СЕЛЕКТЫ */
/* Из макета: поле 344×32, рамка 1px #000 без скругления, текст 18px,
   плейсхолдер #C4C4C4; комментарий 344×128. */
.vine-cert-field,
.vine-cert-textarea {
	width: 344px;
	max-width: 100%;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 0;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	color: var(--vine-color-text, #000000);
}

.vine-cert-field {
	height: 32px;
	padding: 0 8px;
}

.vine-cert-textarea {
	height: 128px;
	padding: 5px 8px;
	resize: vertical;
}

.vine-cert-field::placeholder,
.vine-cert-textarea::placeholder {
	color: var(--vine-color-card, #C4C4C4);
	opacity: 1;
}

/* Поле суммы блокируется, пока в селекте не выбрано «Ввести свою сумму» */
.vine-cert-field:disabled {
	background: var(--vine-color-disabled-bg, #E5E5E5);
	color: var(--vine-color-disabled, #777777);
	cursor: default;
}

/* 1785:10890 — селект 344×32 со стрелкой 24×24 у правого края */
.vine-cert-select {
	width: 344px;
	max-width: 100%;
	height: 32px;
	padding: 0 36px 0 8px;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 0;
	background: var(--vine-color-bg, #FFFFFF) url("/local/templates/vine/components/bitrix/news.list/cert-template-picker/images/icon-select-arrow.svg") no-repeat right 4px center;
	background-size: 24px 24px;
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	color: var(--vine-color-text, #000000);
	-webkit-appearance: none;
	appearance: none;
}

/* ================================================== ТЕКСТЫ ОШИБОК И ХИНТЫ */
/* Красный #FF0000, 18px — как в макете. Скрыты, пока валидация не сработала. */
.vine-cert-error {
	margin: 0;
	color: var(--cert-error, #FF0000);
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
}

.vine-cert-error[hidden] {
	display: none;
}

/* 1868:10486, 1868:10479, 1871:10644 — подсказки 14px цветом #777777 */
.vine-cert-hint {
	margin: 0;
	color: var(--vine-color-line, #777777);
	font-size: var(--vine-fz-small, 14px);
	font-style: normal;
	line-height: 14px;
}

/* Подпись и её хинт идут вплотную (1868:10490: 21 + 14 без зазора) */
.vine-cert-labelbox {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ================================================================ МОДАЛКИ */
/* Механизм и оформление подложки повторяют form.result.new/private_event.
   Правила продублированы намеренно: тот style.css подключается только вместе
   со своим компонентом, а на странице сертификатов его нет. Значения
   совпадают до числа, класс тот же — если оба файла всё-таки окажутся на
   одной странице, правила не конфликтуют. */
.vine-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: auto;
	padding: 32px 16px;
	background: rgba(0, 0, 0, 0.5);
}

.vine-modal[hidden] {
	display: none;
}

.vine-modal__window {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
	width: 557.67px;
	max-width: 100%;
	margin: auto;
	padding: 32px;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 16px;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	color: var(--vine-color-text, #000000);
}

.vine-modal__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.vine-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: var(--vine-radius-btn, 5px);
	background: var(--vine-color-bg, #FFFFFF);
	cursor: pointer;
}

.vine-modal__close img {
	display: block;
	width: 24px;
	height: 24px;
}

/* 1229:6621 — окно выбора оформления шире остальных: 732.
   734, а не 732: в макете рамка нарисована поверх фрейма и в его ширину не
   входит, а в CSS при box-sizing:border-box рамка 1px съедает содержимое.
   Даём +2, чтобы внутренняя ширина совпала с макетными 668 и сетка
   3×212 + 2×16 встала без переполнения. */
.vine-cert-modal__window--picker {
	width: 734px;
}

/* 1234:6162 / 1234:6158 / 1663:9660 / 1234:6167 — строка кнопок высотой 40.
   Главная кнопка прижата вправо, «Назад» — к левому краю. */
.vine-cert-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--vine-gap, 16px);
	width: 100%;
	min-height: 40px;
}

.vine-cert-actions__back {
	margin-right: auto;
}

/* Кнопки макета ровно 40px высотой. Базовый .vine-btn с padding 9/10 даёт
   42,33 — прижимаем высотой и боковым padding-ом, как это сделано у кнопки
   «Заказать» в form.result.new/private_event. Ширины при этом совпадают с
   макетом сами: «Назад» 77, «Готово» 82, «Поменять оформление» 221,
   «Отправить в корзину» 203. */
.vine-cert-actions .vine-btn,
.vine-cert-review__row > .vine-btn {
	height: var(--vine-field-h, 40px);
	padding: 0 12px;
	line-height: normal;
}

/* 1234:6164 — «Готово» стоит по центру строки (x 293 при ширине 668) */
.vine-cert-actions--center {
	justify-content: center;
}

/* ================================================= СЕТКА ВЫБОРА ОФОРМЛЕНИЯ */
/* 1231:6029 — 668×616: три колонки по 212, зазор 16 по обеим осям */
.vine-cert-grid {
	display: grid;
	grid-template-columns: repeat(3, 212px);
	gap: var(--vine-gap, 16px);
	width: 668px;
	max-width: 100%;
}

/* Карточка 212×300 (1237:6439 и соседи).
   Разметку карточек отдаёт шаблон news.list/cert-template-picker;
   контракт разметки описан в отчёте агента конструктора. */
.vine-cert-card {
	position: relative;
	display: block;
	flex: 0 0 212px;
	width: 212px;
	height: 300px;
	padding: 0;
	border: 1px solid var(--vine-color-text, #000000);
	background: var(--vine-color-bg, #FFFFFF);
	cursor: pointer;
}

/* Исходники шаблонов квадратные 1024×1024, плитка макета 212×300 —
   кадрируем по центру (замечание агента ассетов). */
.vine-cert-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 1229:6576 — круглый переключатель 24×24, отступ 8 от верхнего левого угла */
.vine-cert-card__toggle {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 24px;
	height: 24px;
	background: url("/local/templates/vine/components/bitrix/news.list/cert-template-picker/images/icon-toggle-circle.svg") no-repeat center / 24px 24px;
	pointer-events: none;
}

.vine-cert-card.is-selected .vine-cert-card__toggle {
	background-image: url("/local/templates/vine/components/bitrix/news.list/cert-template-picker/images/icon-toggle-circle-checked.svg");
}

/* «Посмотреть» — белая кнопка ~126×35 по центру карточки (замер по рендеру
   макета 1229:6621: 4x-кроп карточки Cert 2). */
.vine-cert-card__view.vine-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 7px 10px;
	transform: translate(-50%, -50%);
}

/* ========================================================= ОКНО ПРОВЕРКИ */
/* 1786:10930 — 441×300: превью 212×300 и кнопка «Поменять оформление»
   221×40 справа от него с зазором 8, прижатая к верхнему краю. */
.vine-cert-review__row {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap-sm, 8px);
	width: 441px;
	max-width: 100%;
}

.vine-cert-review__sum {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
}

/* ====================================================== СЧЁТЧИК 139×32 */
/* 1665:10833 «Выбор числа». Разметка и числа те же, что у счётчика гостей
   в form.result.new/private_event (макет 1670:9951) — там же и объяснение,
   зачем align-self. Правила продублированы по той же причине, что и подложка. */
.vine-counter {
	display: inline-flex;
	align-self: flex-start;
	align-items: stretch;
	width: fit-content;
	height: 32px;
}

.vine-counter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 37px;
	padding: 0 12px;
	border: 1px solid var(--vine-color-text, #000000);
	background: var(--vine-color-btn, #151515);
	color: var(--vine-color-btn-text, #FFFFFF);
	font-family: var(--vine-font);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.vine-counter__btn--minus {
	border-radius: var(--vine-radius-btn, 5px) 0 0 var(--vine-radius-btn, 5px);
	font-size: 32px;
}

.vine-counter__btn--plus {
	border-radius: 0 var(--vine-radius-btn, 5px) var(--vine-radius-btn, 5px) 0;
	font-size: 24px;
}

.vine-counter__value {
	width: 64px;
	border: 1px solid var(--vine-color-text, #000000);
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	text-align: center;
	color: var(--vine-color-text, #000000);
}

/* ============================================ БЛОКИ, КОТОРЫЕ ПРЯЧЕТ СКРИПТ */
/* Блок почты дарителя (только «Другу»), ветки мастера, скрытые кнопки «Назад» */
.vine-cert[hidden],
.vine-cert-block[hidden],
.vine-cert-actions__back[hidden] {
	display: none;
}

/* Пока JS не отработал, окна уже скрыты атрибутом hidden в разметке —
   отдельного правила «до инициализации» не требуется. */

/* ================================================================ АДАПТИВ */
@media (max-width: 1279px) {
	.vine-cert-ctor {
		flex-wrap: wrap;
	}

	.vine-cert-ctor__design.vine-btn {
		flex: 1 1 100%;
		max-width: 100%;
		min-height: 120px;
		font-size: var(--vine-fz-h1, 40px);
	}
}

@media (max-width: 767px) {
	.vine-cert-ctor__panel {
		flex: 1 1 100%;
		flex-wrap: wrap;
		gap: var(--vine-gap, 16px);
		min-height: 0;
	}

	.vine-cert-ctor__col--left,
	.vine-cert-ctor__col--right {
		flex: 1 1 100%;
		width: 100%;
	}

	.vine-cert-field,
	.vine-cert-textarea,
	.vine-cert-select {
		width: 100%;
	}

	.vine-cert-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.vine-cert-card {
		width: 100%;
	}

	.vine-cert-review__row {
		flex-wrap: wrap;
		width: 100%;
	}
}

@media (max-width: 599px) {
	.vine-modal__window {
		padding: 16px;
	}

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

	.vine-cert-ctor__design.vine-btn {
		font-size: var(--vine-fz-h3, 28px);
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/cert-banners-slider/style.css?17872406856092*/
/* =========================================================================
   Карусель рекламных баннеров для физлиц (страница подарочного сертификата).
   Макет: Figma HA2Vx4dnWPRDdb6SL7tM3y, страница 874:8551.

   Числа из макета:
     блок 1658:7194 ....... 752 x 360, фон #C4C4C4, border-radius 16;
     ряд  1658:7178 ....... 1248 x 360, gap 16 (зазор до баннера юрлицам —
                            задаёт страница-сборка, не этот файл);
     пагинация 1658:7193 .. 121 x 21, x = 315,5 → по центру блока
                            (315,5 + 60,5 = 376 = 752 / 2);
                            y = 315, низ 336 → 24px от низа блока;
                            буллеты x = 0 / 29 / 56 / 83 / 110,
                            ширины 13 / 11 / 11 / 11 / 11 → шаг 16.

   Буллеты дизайнер набрал буквами: активный — Bold «О» 18px, остальные —
   Regular «о» 18px, цвет чёрный. Вектора кружка в макете нет, поэтому здесь
   CSS-кружки: 13px с обводкой 2px (жирная «О») и 11px с обводкой 1px
   (обычная «о»), заливки нет — у глифа её тоже нет.

   Прокрутка, скрытый скроллбар и scroll-snap приходят из общего слоя
   (.vine-scroller / .vine-scroller__item) — здесь не дублируются, только
   снимается базовый gap: слайд занимает всю ленту, зазора между слайдами
   в макете нет.
   ========================================================================= */

.cert-banners-slider {
	position: relative;
	width: 100%;
	/* ограничение по ширине у корня секции; центрирование даёт .vine-container
	   на самой странице */
	max-width: 752px;
	font-family: var(--vine-font, "Roboto", "Helvetica Neue", Arial, sans-serif);
	color: var(--vine-color-text, #000000);
}

/* Селекторы ниже намеренно писаны через родителя: в бандле Битрикса
   template_styles.css идёт ПОСЛЕ style.css компонента, поэтому при равной
   специфичности выигрывают правила общего слоя (.vine-scroller,
   .vine-scroller__item). Одного класса здесь мало — проверено замером. */
.cert-banners-slider .cert-banners-slider__track {
	/* .vine-scroller уже даёт flex + overflow-x + scroll-snap.
	   Базовый gap 16px здесь не нужен: слайд равен ширине ленты, зазора
	   между слайдами в макете нет. */
	gap: 0;
	border-radius: 16px;
}

.cert-banners-slider .cert-banners-slider__track:focus-visible {
	outline: 2px solid var(--vine-color-link, #0077FF);
	outline-offset: 2px;
}

.cert-banners-slider .cert-banners-slider__slide {
	/* .vine-scroller__item даёт flex: 0 0 auto — переопределяем на «во всю
	   ленту»: пять слайдов дают scrollWidth 5 x 752 при видимых 752,
	   переполнение заведомо есть и карусель живая. Ужимать слайд под
	   контейнер нельзя — тогда листать будет нечего. */
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	height: 360px;
}

.cert-banners-slider__face {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 16px;
	/* серое поле макета видно, пока грузится картинка, и остаётся фоном
	   баннера без изображения */
	background: var(--vine-color-card, #C4C4C4);
	color: inherit;
	text-decoration: none;
}

.cert-banners-slider__pic {
	display: block;
	width: 100%;
	height: 100%;
	/* базовый слой ограничивает картинки шириной контейнера — здесь мешает */
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Подпись баннера без картинки: кегль, начертание, цвет и позиция — те же,
   что у надписи внутри плейсхолдера макета (Roboto Regular 18px, чёрный,
   по центру блока). */
.cert-banners-slider__caption {
	padding: 0 24px;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	text-align: center;
}

/* ------------------------------------------------------------- ПАГИНАЦИЯ */
.cert-banners-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 21px;
	margin: 0;
	padding: 0;
	z-index: 2;
}

.cert-banners-slider__dot {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	padding: 0;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.cert-banners-slider__dot--active {
	width: 13px;
	height: 13px;
	border-width: 2px;
}

.cert-banners-slider__dot:focus-visible {
	outline: 2px solid var(--vine-color-link, #0077FF);
	outline-offset: 2px;
}

/* ----------------------------------------------------------------- АДАПТИВ */
/* Мобильной раскладки у секции в макете нет. Ниже ширины блока сохраняем
   макетную пропорцию 752:360 вместо фиксированной высоты. */
@media (max-width: 800px) {
	.cert-banners-slider .cert-banners-slider__slide {
		height: auto;
		aspect-ratio: 752 / 360;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/cert-banner-single/style.css?17872405082789*/
/* =========================================================================
   Одиночный рекламный баннер для юрлиц (страница подарочного сертификата).
   Макет: Figma HA2Vx4dnWPRDdb6SL7tM3y, страница 874:8551.

   Числа из макета:
     блок 1658:7176 ... 480 x 360, фон #C4C4C4, border-radius 16,
                        x = 768 внутри ряда 1658:7178 (1248 x 360, gap 16);
     надпись .......... Roboto Regular 18px, чёрный, по центру блока.

   Зазор 16px до карусели физлицам задаёт страница-сборка (ряд 752 + 16 + 480
   = 1248), а не этот файл.
   ========================================================================= */

.cert-banner-single {
	width: 100%;
	/* ограничение по ширине у корня секции; центрирование даёт .vine-container
	   на самой странице */
	max-width: 480px;
	font-family: var(--vine-font, "Roboto", "Helvetica Neue", Arial, sans-serif);
	color: var(--vine-color-text, #000000);
}

.cert-banner-single__face {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 360px;
	overflow: hidden;
	border-radius: 16px;
	/* серое поле макета видно, пока грузится картинка, и остаётся фоном
	   баннера без изображения */
	background: var(--vine-color-card, #C4C4C4);
	color: inherit;
	text-decoration: none;
}

.cert-banner-single__face:focus-visible {
	outline: 2px solid var(--vine-color-link, #0077FF);
	outline-offset: 2px;
}

.cert-banner-single__pic {
	display: block;
	width: 100%;
	height: 100%;
	/* базовый слой ограничивает картинки шириной контейнера — здесь мешает */
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Подпись баннера без картинки: кегль, начертание, цвет и позиция — те же,
   что у надписи внутри плейсхолдера макета. */
.cert-banner-single__caption {
	padding: 0 24px;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	text-align: center;
}

/* ----------------------------------------------------------------- АДАПТИВ */
/* Мобильной раскладки у секции в макете нет. Ниже ширины блока сохраняем
   макетную пропорцию 480:360 вместо фиксированной высоты. */
@media (max-width: 520px) {
	.cert-banner-single__face {
		height: auto;
		aspect-ratio: 480 / 360;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/cert-template-picker/style.css?17872407968938*/
/* =========================================================================
   news.list / cert-template-picker — выбор оформления сертификата
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 1229:6621 (окно 732×826).

   Числа из макета:
   окно 732 ширина, padding 32, шаг строк 8, рамка 1px #000, радиус 16;
   крестик 32×32 (белый, рамка, радиус 5), иконка 24×24;
   подпись и все тексты 18px;
   сетка 3×2, зазор 16 по обеим осям, карточка 212×300 с рамкой 1px;
   переключатель 24×24 в углу карточки (левый 9, верхний 9);
   кнопка «Посмотреть» 129×40 по центру карточки, верх 127
   (в макете левый 41,5 при ширине карточки 212 — то же самое, что центр);
   кнопка «Готово» на #151515, padding 9/12/10, радиус 5, по центру строки.
   Проверка высоты: 32+32+8+21+8+616+8+21+8+40+32 = 826 — сходится с макетом.
   ========================================================================= */

/* --------------------------------------------------------------- ПОДЛОЖКА */
/* Те же правила, что у form.result.new/private_event: механизм модальных окон
   в проекте общий, но на странице сертификатов той формы нет — значит,
   подложку должен принести этот шаблон. Правила совпадают дословно,
   поэтому порядок подключения файлов ничего не меняет. */
.vine-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: auto;
	padding: 32px 16px;
	background: rgba(0, 0, 0, 0.5);
}

.vine-modal[hidden] {
	display: none;
}

.vine-modal__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.vine-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: var(--vine-radius-btn, 5px);
	background: var(--vine-color-bg, #FFFFFF);
	cursor: pointer;
}

.vine-modal__close img {
	display: block;
	width: 24px;
	height: 24px;
}

/* ------------------------------------------------------------------- ОКНО */
/* 1229:6621 — 732 ширина; своё имя класса, а не .vine-modal__window:
   у общего окна ширина 557,67, и два правила с одинаковой специфичностью
   зависели бы от порядка подключения файлов. */
.cert-picker {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
	width: 732px;
	max-width: 100%;
	margin: auto;
	padding: 32px;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: 16px;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font, "Roboto", Arial, sans-serif);
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	color: var(--vine-color-text, #000000);
}

/* 1229:6572 */
.cert-picker__label {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
}

/* ------------------------------------------------------------------ СЕТКА */
/* 1231:6029 — три колонки по 212, зазор 16: 3×212 + 2×16 = 668 = 732 − 2×32 */
.cert-picker__grid {
	display: grid;
	grid-template-columns: repeat(3, 212px);
	gap: 16px;
	justify-content: start;
}

/* ---------------------------------------------------------------- КАРТОЧКА */
.cert-picker__card {
	position: relative;
	width: 212px;
	height: 300px;
	overflow: hidden;
	border: 1px solid var(--vine-color-text, #000000);
	background: var(--vine-color-bg, #FFFFFF);
}

/* Исходник 1024×1024, карточка 212×300 — кадрируем по центру */
.cert-picker__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Радиокнопка: настоящая, но невидимая — лежит ровно под переключателем,
   чтобы фокус с клавиатуры попадал туда, где нарисован кружок.
   8px, а не макетные 9: absolute отсчитывается от padding-box, то есть
   уже внутри рамки карточки 1px — 8 + 1 = макетные 9 от края карточки. */
.cert-picker__radio {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 3;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

/* Клик по карточке = выбор шаблона (в макете кликабельна вся карточка) */
.cert-picker__hit {
	position: absolute;
	inset: 0;
	z-index: 1;
	cursor: pointer;
}

/* Название шаблона — только для скринридера: в макете подписи нет */
.cert-picker__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 1229:6576 — переключатель 24×24 в углу (макетные 9;9 = 8 + рамка карточки),
   обе иконки из images/ (перекрасить <img src="*.svg"> нельзя,
   поэтому состояния — два отдельных файла) */
.cert-picker__mark {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	display: block;
	width: 24px;
	height: 24px;
	pointer-events: none;
}

.cert-picker__mark img {
	display: block;
	width: 24px;
	height: 24px;
}

/* Селектор из двух классов намеренно: правило .cert-picker__mark img выше
   специфичнее одиночного класса и оставляло бы галочку видимой на всех
   карточках. */
.cert-picker__mark .cert-picker__mark-on {
	display: none;
}

.cert-picker__radio:checked ~ .cert-picker__mark .cert-picker__mark-off {
	display: none;
}

.cert-picker__radio:checked ~ .cert-picker__mark .cert-picker__mark-on {
	display: block;
}

.cert-picker__radio:focus-visible ~ .cert-picker__mark {
	outline: 2px solid var(--vine-color-link, #0077FF);
	outline-offset: 2px;
}

/* 1237:6445 — «Посмотреть»: макетный верх 127 (126 + рамка карточки 1px),
   по центру карточки */
.cert-picker__view {
	position: absolute;
	top: 126px;
	left: 50%;
	z-index: 4;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 9px 12px 10px;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: var(--vine-radius-btn, 5px);
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font, "Roboto", Arial, sans-serif);
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	text-align: center;
	white-space: nowrap;
	color: var(--vine-color-text, #000000);
	text-decoration: none;
	cursor: pointer;
}

/* ------------------------------------------------------------ ОШИБКА И НИЗ */
/* 1229:6594 — красный текст 18px */
.cert-picker__error {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	line-height: 21px;
	color: #FF0000;
}

.cert-picker__error[hidden] {
	display: none;
}

/* 1234:6162 — строка кнопок по центру, зазор 8 */
.cert-picker__actions {
	display: flex;
	gap: var(--vine-gap-sm, 8px);
	align-items: flex-start;
	justify-content: center;
	width: 100%;
}

/* 1234:6164 — «Готово» */
.cert-picker__done {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	padding: 9px 12px 10px;
	border: 1px solid var(--vine-color-text, #000000);
	border-radius: var(--vine-radius-btn, 5px);
	background: var(--vine-color-btn, #151515);
	font-family: var(--vine-font, "Roboto", Arial, sans-serif);
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	text-align: center;
	white-space: nowrap;
	color: var(--vine-color-btn-text, #FFFFFF);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* --------------------------------------------------------------- УЗКИЙ ЭКРАН */
/* Карточка остаётся макетной 212×300, в ряд помещается сколько влезет */
@media (max-width: 799px) {
	.cert-picker__grid {
		grid-template-columns: repeat(auto-fit, 212px);
		justify-content: center;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/faq-accordion/style.css?17867178372833*/
/* =========================================================================
   Часто задаваемые вопросы — bitrix:news.list / faq-accordion
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 1894:8503 (1248×356).

   Из макета: заголовок 40px; вопрос 18px, цвет #0077FF, подчёркивание
   пунктирное; ответ 18px, цвет #000000; шаг между вопросами 16px,
   от вопроса до ответа 8px; иконок-переключателей нет.
   Пунктир, сброс кнопки и цвет ссылки берём из общего слоя
   (.vine-pseudo-link / .vine-pseudo-link--link в template_styles.css).
   ========================================================================= */

.faq {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

/* двойной класс — перебить .vine-main h2 (34px) из базового слоя */
.faq .faq__title {
	margin: 0;
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

.faq__item {
	margin: 0;
}

/* -------------------------------------------------------------- ВОПРОС */
/* Сброс кнопки и пунктир уже в .vine-pseudo-link; здесь только кегль,
   перенос длинных вопросов и зона клика по всей строке. */
.faq .faq__question {
	display: inline;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
}

/* Вопрос без ответа: цвет и кегль как в макете, но без пунктира и без
   курсора-руки — раскрывать нечего, обещать интерактив нельзя. */
.faq .faq__question--plain {
	display: block;
	margin: 0;
	color: var(--vine-color-link, #0077FF);
	text-decoration: none;
	cursor: auto;
}

/* фокус с клавиатуры виден — в макете состояний фокуса нет,
   поэтому берём системную рамку, а не свой цвет */
.faq .faq__question[data-faq-toggle]:focus-visible {
	outline: 2px solid var(--vine-color-text, #000000);
	outline-offset: 2px;
}

/* -------------------------------------------------------------- ОТВЕТ */
.faq__answer {
	margin: var(--vine-gap-sm, 8px) 0 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.faq__answer p {
	margin: 0 0 var(--vine-gap-sm, 8px);
}

.faq__answer p:last-child {
	margin-bottom: 0;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/course-reviews/style.css?17867178453611*/
/* =========================================================================
   Отзывы на детальной — bitrix:news.list / course-reviews
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 1641:11136 (очный курс),
   он же 960:12354 «Другие отзывы» на онлайн-курсе.

   Из макета: заголовок 40px; цитата Roboto Italic 18px с чёрной чертой
   слева 5px и отступом 16px; подпись «— Имя, возраст» 18px без курсива;
   шаг между отзывами 16px, внутри отзыва 8px; кнопка «Показать ещё»
   143×40; строка «Вы посмотрели все отзывы» 18px; ссылка «Оставить отзыв»
   18px синяя подчёркнутая.

   Черта, курсив и подпись живут в общем слое (.vine-quote,
   .vine-quote__author), кнопка — .vine-btn. Здесь только раскладка секции.
   ========================================================================= */

.course-reviews {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

/* двойной класс — перебить .vine-main h2 (34px) из базового слоя */
.course-reviews .course-reviews__title {
	margin: 0;
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

/* ------------------------------------------------------------- СПИСОК */
.course-reviews__list {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

/* .vine-quote даёт черту, отступ и курсив; здесь — только внутренний шаг */
.course-reviews__item {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
}

.course-reviews__quote {
	margin: 0;
	font: inherit;
	color: inherit;
	word-break: break-word;
}

.course-reviews__quote p {
	margin: 0 0 var(--vine-gap-sm, 8px);
}

.course-reviews__quote p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------- ПОДВАЛ */
/* Кнопка, строка «всё» и ссылка идут друг под другом с шагом 16px.
   В макете кнопка и строка нарисованы одновременно, но это два состояния
   одного места — лишнее скрыто атрибутом hidden. */
.course-reviews__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
}

.course-reviews__foot > [hidden] {
	display: none;
}

/* «Показать ещё» — 143×40 из макета: ширина набирается текстом 18px
   и полями .vine-btn, поэтому фиксируем минимумы, а не жёсткий размер */
.course-reviews__more {
	min-width: 143px;
	min-height: 40px;
}

.course-reviews__more[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

.course-reviews__end {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

.course-reviews__add {
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
}

/* ------------------------------------------------------------- ФОРМА */
.course-reviews__form {
	margin: 0;
}

.course-reviews__form[hidden] {
	display: none;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/sections-tiles/style.css?1787240270970*/
/* Сквозной блок «Разделы». Макет Figma 2023:12774: мозаика 1248x322 из плиток 400x149, зазор 24 */
.sections-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 149px);
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 24px;
	max-width: 1248px;
	margin: 0 auto;
}

.sections-tiles__cell {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 64px 16px;
	border: 1px solid #000;
	border-radius: 24px;
	background: #FFF;
	overflow: hidden;
	text-decoration: none;
}

.sections-tiles__caption {
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	color: #000;
	text-align: center;
	word-break: break-word;
}

.sections-tiles__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 24px;
	object-fit: cover;
}

/* End */
/* /local/templates/vine/css/certificate-page.css?17872456539915 */
/* /local/templates/vine/css/cert-constructor.css?178724148818327 */
/* /local/templates/vine/components/bitrix/news.list/cert-banners-slider/style.css?17872406856092 */
/* /local/templates/vine/components/bitrix/news.list/cert-banner-single/style.css?17872405082789 */
/* /local/templates/vine/components/bitrix/news.list/cert-template-picker/style.css?17872407968938 */
/* /local/templates/vine/components/bitrix/news.list/faq-accordion/style.css?17867178372833 */
/* /local/templates/vine/components/bitrix/news.list/course-reviews/style.css?17867178453611 */
/* /local/templates/vine/components/bitrix/news.list/sections-tiles/style.css?1787240270970 */