/* Start:/local/templates/vine/components/bitrix/catalog/vine/style.min.css?1786716927684*/
.grid .bx_content_section{margin-bottom:15px}.grid .bx_sidebar{margin-bottom:15px}.grid2x1 .bx_content_section{float:left;width:66%;margin-bottom:15px}.grid2x1 .bx_sidebar{float:right;width:33%;margin-bottom:15px;padding-left:5%;box-sizing:border-box}@media(max-width:960px){.grid2x1 .bx_sidebar{padding-left:4%}}@media(max-width:640px){.grid2x1 .bx_content_section,.grid2x1 .bx_sidebar{width:100%;float:none}.grid2x1 .bx_sidebar{padding-left:3%}}@media(max-width:479px){.grid2x1 .bx_sidebar{padding-left:1%}}.catalog-block-header{font-size:14px;font-weight:bold;text-align:left;margin:5px 0;padding:5px 0;border-bottom:2px solid #d9dee6;border-bottom-color:var(--primary);color:#000}
/* End */


/* Start:/local/templates/vine/components/bitrix/catalog.element/vine_course/style.css?178708338314947*/
/* =========================================================================
   catalog.element / vine_course — детальная страница курса
   Очный курс 13:565 (баннер 66:1451, описание 66:2687, материалы 2023:9489,
   фотогалерея 69:3078) и онлайн-курс 493:11634 (баннер 493:11638,
   интерфейс курса 493:11736).

   Общий слой (.vine-container, .vine-btn, .vine-btn--disabled, .vine-badge,
   .vine-title-detail, .vine-field-date, .vine-scroller, .vine-divider,
   .vine-section) живёт в template_styles.css и здесь не переопределяется.
   Все размеры сняты с макета через get_metadata, не подобраны на глаз.
   ========================================================================= */

.vine-course {
	width: 100%;
	/* Контентная колонка макета — 1248px, как у баннера и всех секций. */
	max-width: var(--vine-container);
	margin-inline: auto;
}

/* H1 13:567: блок 924×56 на y=32, до баннера 16px */
.vine-course__title {
	margin: 0 0 var(--vine-gap);
}

/* ------------------------------------------------------------------ ЗАГОЛОВКИ */
/* Заголовки секций макета — 40px (блок 47px). Селектор с .vine-main нужен,
   чтобы перебить базовое правило .vine-main h2 (34px) из template_styles.css. */
.vine-course-title,
.vine-main .vine-course-title {
	margin: 0 0 var(--vine-gap);
	font-size: var(--vine-fz-h1);
	font-weight: 400;
	line-height: normal;
}

/* «Интерфейс курса» 493:11735 — единственный заголовок секции в 48px */
.vine-course-title--lg,
.vine-main .vine-course-title--lg {
	font-size: var(--vine-fz-detail);
}

/* ========================================================== 1. ГЛАВНЫЙ БАННЕР */
/* Инстанс 1248×523,85: фон-фото на всю площадь, поверх снизу полупрозрачная
   белая панель (rgba(255,255,255,0.8)). */
.vine-course-banner {
	position: relative;
	width: 100%;
	max-width: var(--vine-container);
	aspect-ratio: 1248 / 523.8519;
	overflow: hidden;
	border-radius: 0;
}

.vine-course-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Frame 343: очный — y=360, высота 164; онлайн — y=389, высота 135.
   Внутренние отступы: 16 по бокам, 8 сверху (бейдж на y=8), 16 снизу. */
.vine-course-banner__panel {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 8px var(--vine-side) var(--vine-side);
	background: var(--vine-color-overlay);
}

.vine-course-banner--offline .vine-course-banner__panel {
	min-height: 164px;
}

.vine-course-banner--online .vine-course-banner__panel {
	min-height: 135px;
}

/* Frame 374: бейдж 62×24 на y=8, следом Frame 377 на y=40 → зазор 8 */
.vine-course-banner__badge {
	margin: 0 0 var(--vine-gap-sm);
	line-height: 0;
}

/* Общий .vine-badge растёт до 26px от собственного line-height шрифта —
   в баннере высоту фиксируем по макету, не трогая сам общий класс. */
.vine-course-banner__badge .vine-badge {
	height: 24px;
	align-items: center;
	line-height: 16px;
}

.vine-course-banner__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* Frame 377 очного баннера: 1216 = 203 + 120 + 435 + 120 + 338 */
.vine-course-banner__cols--offline {
	gap: 24px 120px;
}

/* Frame 377 онлайн-баннера: 1203 = 547 + 64 + 419 + 64 + 109 */
.vine-course-banner__cols--online {
	gap: 24px 64px;
}

.vine-course-banner__col {
	flex: 0 0 auto;
	min-width: 0;
	max-width: 100%;
}

.vine-course-banner__col--pick {
	width: 203px;
}

.vine-course-banner--offline .vine-course-banner__col--info {
	width: 435px;
}

.vine-course-banner--offline .vine-course-banner__col--buy {
	width: 338px;
}

.vine-course-banner__col--access {
	width: 547px;
}

.vine-course-banner--online .vine-course-banner__col--info {
	width: 419px;
}

.vine-course-banner--online .vine-course-banner__col--buy {
	width: 109px;
}

/* Строки панели: кегль 18, строка 21px, шаг между строками 29 → зазор 8 */
.vine-course-banner__label,
.vine-course-banner__seats,
.vine-course-banner__line,
.vine-course-banner__contacts,
.vine-course-banner__access {
	margin: 0 0 var(--vine-gap-sm);
	font-size: var(--vine-fz-text);
	font-weight: 400;
	line-height: 21px;
}

.vine-course-banner__line:last-child,
.vine-course-banner__contacts:last-child {
	margin-bottom: 0;
}

/* «Выберите начало курса», «Осталось мест: 12», строка срока доступа — Bold */
.vine-course-banner__label,
.vine-course-banner__seats,
.vine-course-banner__access {
	font-weight: 700;
}

/* «Мест не осталось» — красным (макет, состояние 16:217) */
.vine-course-banner__seats.is-sold-out {
	color: #FF0000;
}

/* Поле выбора потока 139×40 (Frame 367). Базовый .vine-field-date снимает
   системную отрисовку — возвращаем её, чтобы у списка была штатная стрелка:
   отдельной иконки стрелки в /images/ нет, а рисовать её нельзя. */
.vine-course-banner__select {
	width: 139px;
	max-width: 100%;
	-webkit-appearance: auto;
	appearance: auto;
}

/* Адрес и телефон одной строкой: 279 + 16 + 140 (Frame 574) */
.vine-course-banner__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--vine-gap);
}

.vine-course-banner__phone {
	color: var(--vine-color-link);
	text-decoration: underline;
}

/* Цена очного баннера: 40px Bold, блок 47, до кнопок 16 (Frame 578 на y=63) */
.vine-course-banner__price {
	margin: 0 0 var(--vine-gap);
	font-size: var(--vine-fz-h1);
	font-weight: 700;
	line-height: 47px;
}

/* Цена онлайн-баннера: 18px Bold в левой колонке под сроком доступа */
.vine-course-banner__price--online {
	margin: 0;
	font-size: var(--vine-fz-text);
	line-height: 21px;
}

/* Frame 578: «В корзину» 109×40 + зазор 32 + «В лист ожидания» 197×40 */
.vine-course-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--vine-gap-sm) 32px;
}

.vine-course-banner__cart,
.vine-course-banner__waitlist {
	height: var(--vine-field-h);
	padding: 0 12px;
	line-height: normal;
}

.vine-course-banner__cart {
	width: 109px;
}

.vine-course-banner__waitlist {
	width: 197px;
}

/* Штатный catalog.product.subscribe рисует <span>, а не <button> —
   выравниваем его по кнопке макета. */
span.vine-course-banner__waitlist {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ================================================= 2. ОПИСАНИЕ + ГАЛЕРЕЯ-СЛАЙДЕР */
/* Frame 377 (66:1600): две колонки 616 + 616 с зазором 16 = 1248 */
.vine-course-about__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vine-gap);
	align-items: start;
}

.vine-course-about__detail,
.vine-course-about__detail p {
	margin: 0;
	font-size: var(--vine-fz-text);
	line-height: 21px;
}

.vine-course-about__detail p + p {
	margin-top: 21px;
}

/* Frame 376: описание на y=0, блок «для кого» на y=205 → зазор 16 */
.vine-course-about__forwhom,
.vine-course-about__notes {
	margin-top: var(--vine-gap);
}

.vine-course-about__forwhom-title {
	margin: 0;
	font-size: var(--vine-fz-text);
	font-weight: 700;
	line-height: 21px;
}

.vine-course-about__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Маркер 🔹 набран внутри самого текста пункта (свойство FOR_WHOM) */
.vine-course-about__list-item {
	font-size: var(--vine-fz-text);
	line-height: 21px;
}

/* Онлайн-курс: две жирные строки под описанием (493:11644, 493:11645) */
.vine-course-about__note {
	margin: 0;
	font-size: var(--vine-fz-text);
	font-weight: 700;
	line-height: 21px;
}

/* Frame 381: кадр 570×313 у левого края правой колонки */
.vine-course-slider__frame {
	position: relative;
	width: 570px;
	max-width: 100%;
	aspect-ratio: 570 / 313;
	overflow: hidden;
	background: var(--vine-color-card);
}

.vine-course-slider__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

/* Frame 382: панель управления на y=329 (кадр 313 + зазор 16), высота 29,
   элементы отцентрованы по колонке 616: «<» 26×29, счётчик 28×21, «>» 26×29 */
.vine-course-slider__controls {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--vine-gap);
	margin-top: var(--vine-gap);
	height: 29px;
}

/* Стрелки — текстовые символы на плашках #C4C4C4. Разный радиус (4 против 8)
   и разный цвет — из макета, это не ошибка вёрстки. */
.vine-course-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 29px;
	padding: 0;
	border: 0;
	background: var(--vine-color-card);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	line-height: normal;
}

.vine-course-slider__arrow--prev {
	border-radius: 4px;
	color: var(--vine-color-text);
}

.vine-course-slider__arrow--next {
	border-radius: 8px;
	color: var(--vine-color-text);
}

/* Первый кадр: «назад» визуально неактивна (#777777) */
.vine-course-slider__arrow.is-inactive {
	color: var(--vine-color-disabled);
}

.vine-course-slider__counter {
	margin-top: 4px;
	font-size: var(--vine-fz-text);
	line-height: 21px;
}

/* ============================================================ 3. МАТЕРИАЛЫ */
/* Frame 666: заголовок 47, зазор 16, строка ссылок 21; зазор между ссылками 32 */
.vine-course-docs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vine-gap-sm) 32px;
	margin: 0;
}

.vine-course-docs__link {
	color: var(--vine-color-link);
	font-size: var(--vine-fz-text);
	line-height: 21px;
	text-decoration: underline;
}

/* ================================== 4–5. ФОТОГАЛЕРЕЯ И ИНТЕРФЕЙС КУРСА (ленты) */
/* Обе ленты шире контейнера 1248: фотогалерея 3×570 + 2×16 = 1742,
   «Интерфейс курса» — 1717. Переполнение из макета воспроизводим прокруткой
   (утилита .vine-scroller из общего слоя). */
.vine-course-gallery__item,
.vine-course-ui__item {
	width: 570px;
}

.vine-course-gallery__img,
.vine-course-ui__img {
	width: 570px;
	height: 313px;
	max-width: none;
	object-fit: cover;
	background: var(--vine-color-card);
}

.vine-course-gallery__list:focus-visible,
.vine-course-ui__list:focus-visible {
	outline: 2px solid var(--vine-color-link);
	outline-offset: 2px;
}

/* ====================================================== 6. СПОСОБЫ ОПЛАТЫ */
/* Логотип 200×42, под ним абзац про рассрочку и «Подробнее →».
   Сам контент лежит во включаемой области /include/payment-methods.php. */
.vine-course-payment__logo {
	width: 200px;
	height: 42px;
	object-fit: contain;
}

.vine-course-payment__text {
	margin: var(--vine-gap) 0 0;
	font-size: var(--vine-fz-text);
	line-height: 21px;
}

.vine-course-payment__more {
	display: inline-block;
	margin-top: 4px;
	color: var(--vine-color-link);
	font-size: var(--vine-fz-text);
	line-height: 21px;
	text-decoration: underline;
}

/* ---------------------------------------------------------------- АДАПТИВ */
/* Мобильных и планшетных раскладок в макете нет ни для одной секции.
   Ниже — только защита от горизонтальной прокрутки страницы: фиксированные
   ширины колонок баннера снимаются, панель уходит в обычный поток. */
@media (max-width: 1279px) {
	.vine-course-banner__col--pick,
	.vine-course-banner__col--access,
	.vine-course-banner--offline .vine-course-banner__col--info,
	.vine-course-banner--offline .vine-course-banner__col--buy,
	.vine-course-banner--online .vine-course-banner__col--info,
	.vine-course-banner--online .vine-course-banner__col--buy {
		width: auto;
	}

	.vine-course-banner__cols--offline,
	.vine-course-banner__cols--online {
		gap: 16px 64px;
	}
}

@media (max-width: 1023px) {
	.vine-course-banner {
		aspect-ratio: auto;
	}

	.vine-course-banner__bg {
		position: static;
		height: auto;
		aspect-ratio: 1248 / 523.8519;
	}

	.vine-course-banner__panel {
		position: static;
		min-height: 0;
	}

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

	.vine-course-slider__frame {
		width: 100%;
	}

	.vine-course-gallery__item,
	.vine-course-ui__item,
	.vine-course-gallery__img,
	.vine-course-ui__img {
		width: 80vw;
	}

	.vine-course-gallery__img,
	.vine-course-ui__img {
		height: auto;
		aspect-ratio: 570 / 313;
	}
}

/* Баннер без фонового фото. Пропорция 1248×523,85 держит площадь под фото;
   если фото не залито, на странице остаётся белое поле в пол-экрана и она
   выглядит несвёрстанной. Тогда панель перестаёт быть наложением и сама
   задаёт высоту блока. */
.vine-course-banner--no-image {
	aspect-ratio: auto;
}

.vine-course-banner--no-image .vine-course-banner__panel {
	position: static;
	padding-left: 0;
	padding-right: 0;
	background: none;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/catalog.section/course-modules/style.css?17867314049468*/
/* =========================================================================
   Блок «Модули курса» — занятия курса с выбором сеанса.
   Макет: Figma HA2Vx4dnWPRDdb6SL7tM3y.
     66:2716   заголовок «Модули курса», 40px, высота строки 47, y = 1935,85
     16:664    лента карточек, y = 1998,85, ширина 1248, высота 1533
     16:202    состояние «Можно купить»       1248×479
     16:659    разделитель (Линия)            1248×16, y = 495
     16:203    состояние «Уже в корзине»      1248×479, y = 527
     16:661    разделитель                    1248×16, y = 1022
     16:217    состояние «Мест не осталось»   1248×479, y = 1054
     493:11690 та же лента на онлайн-курсе (карточки 315 и 344)

   Внутренняя сетка карточки (координаты из 16:202, шаг между строками 8px):
      0   заголовок 34px, блок 80 (две строки)
     88   описание 18px, блок 63 (три строки)
    159   «Подробнее →», 18px, ширина 116
    188   «Начало: 13 июля 2026»                 187
    217   «Длительность занятия: 2,5 часа»       270
    246   расписание                             410
    275   «Место проведения: …»                  447
    304   «Выберите дату посещения», Bold 18px   230
    333   поле выбора даты, высота 40 (ширина по содержимому, в макете 159)
    381   «Осталось мест: 12», Bold 18px         157
    410   цена, Bold 18px                         64
    439   ряд кнопок, высота 40:
            «В корзину» 109×40 на x=0, «В лист ожидания» 197×40 на x=173 (зазор 64)
            в состоянии «Уже в корзине»: счётчик 139×32 + «Корзина» 96×40
            (зазор 8), лист ожидания на x=307

   Кнопки, бейджи, поле даты, disabled-состояние и разделитель берутся из
   общего слоя template_styles.css (.vine-btn, .vine-btn--dark,
   .vine-btn--disabled, .vine-field-date, .vine-field-date--disabled,
   .vine-title-lesson, .vine-divider) и здесь не переопределяются.
   ========================================================================= */

.course-modules {
	font-family: var(--vine-font, "Roboto", "Helvetica Neue", Arial, sans-serif);
	color: var(--vine-color-text, #000000);
}

/* Заголовок секции 40px. Второй селектор нужен, чтобы перебить .vine-main h2
   (34px по шкале главной), не трогая само то правило. */
.course-modules__title,
.vine-main .course-modules__title {
	margin: 0 0 var(--vine-gap, 16px);
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 400;
	line-height: normal;
}

/* Шаг между карточками 527 = 479 + 16 + разделитель 16 + 16. */
.course-modules__list {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap, 16px);
}

.course-modules__list > .vine-divider {
	margin: 0;
}

/* Внутри карточки все строки идут с шагом 8px. */
.course-modules__item {
	display: flex;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
	margin: 0;
}

.course-modules__name,
.vine-main .course-modules__name {
	margin: 0;
	font-size: var(--vine-fz-lesson, 34px);
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
}

.course-modules__desc {
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
}

.course-modules__desc p {
	margin: 0;
}

.course-modules__more-wrap {
	margin: 0;
}

/* «Подробнее →»: стрелка — текстовый символ макета, не иконка. */
.course-modules__more {
	font-size: var(--vine-fz-text, 18px);
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
	text-decoration-skip-ink: none;
}

.course-modules__line {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
}

/* «Выберите дату посещения» — Bold 18px (68:3043) */
.course-modules__pick {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 700;
	line-height: normal;
}

.course-modules__field {
	margin: 0;
}

/* Поле выбора даты 40px (1780:10308: padding-left 8, padding-right 4,
   зазор до стрелки 8, ширина по содержимому — в макете 159).
   Базовый .vine-field-date снимает системную отрисовку — возвращаем её,
   чтобы у списка была штатная стрелка: отдельной иконки стрелки
   в /local/templates/vine/images/ нет, а рисовать её нельзя.
   Так же сделано в баннере catalog.element/vine_course. */
.course-modules__date {
	max-width: 100%;
	padding: 0 4px 0 8px;
	-webkit-appearance: auto;
	appearance: auto;
}

/* «Осталось мест: 12» / «…на выбранную дату: 7» — Bold 18px */
.course-modules__seats,
.course-modules__enrolled {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 700;
	line-height: normal;
}

/* «Мест не осталось» — красным (16:217) */
.course-modules__seats--sold-out {
	color: #FF0000;
}

.course-modules__price {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 700;
	line-height: normal;
}

/* Ряд кнопок: зазор 64 между основной кнопкой и листом ожидания
   (Frame 567: «В корзину» x=0, «В лист ожидания» x=173 при ширине 109). */
.course-modules__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 64px;
	min-height: var(--vine-field-h, 40px);
}

.course-modules__primary {
	display: flex;
	align-items: center;
}

.course-modules__group {
	display: flex;
	align-items: center;
}

/* Счётчик 139×32 и кнопка «Корзина» 96×40, зазор 8 (Frame 352) */
.course-modules__group--basket {
	gap: var(--vine-gap-sm, 8px);
}

.course-modules__counter {
	display: flex;
	align-items: stretch;
	width: 139px;
	height: 32px;
}

/* «−» и «+» — тёмные кнопки со скруглением 5px по внешним углам
   (I18:933;9:2941 и I18:933;9:2943), белый жирный текст. */
.course-modules__counter-btn {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	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: inherit;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.course-modules__counter-btn:hover,
.course-modules__counter-btn:focus {
	color: var(--vine-color-btn-text, #FFFFFF);
	text-decoration: none;
}

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

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

.course-modules__counter-btn:disabled,
.course-modules__counter-btn[aria-disabled="true"] {
	background: var(--vine-color-disabled-bg, #E5E5E5);
	border-color: var(--vine-color-disabled, #777777);
	color: var(--vine-color-disabled, #777777);
	cursor: default;
	pointer-events: none;
}

/* Поле числа 64×32, белое, рамка 1px (I18:933;9:2942) */
.course-modules__counter-value {
	display: flex;
	flex: 0 0 64px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--vine-color-text, #000000);
	background: var(--vine-color-bg, #FFFFFF);
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
}

/* «В лист ожидания» — 197×40 (1278:7296). Ширину держим по макету: слева
   в макете стоит иконка «Плюс» 24×24 (2022:9545), но её SVG в шаблоне нет,
   а рисовать иконки нельзя — без неё кнопка стала бы уже макета. */
.course-modules__btn-waitlist {
	min-width: 197px;
}

/* Ошибка записи на сеанс — текстом под кнопками. */
.course-modules__error {
	margin: 0;
	color: #FF0000;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
}

/* Мобильных раскладок в макете нет ни для одной секции детальной страницы.
   Ниже — только защита от горизонтальной прокрутки на узких экранах. */
@media (max-width: 720px) {
	.course-modules__actions {
		gap: var(--vine-gap, 16px);
	}
}

@media (max-width: 480px) {
	.course-modules__actions {
		flex-direction: column;
		align-items: flex-start;
	}

	.course-modules__btn-waitlist {
		min-width: 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/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 */
/* /local/templates/vine/components/bitrix/catalog/vine/style.min.css?1786716927684 */
/* /local/templates/vine/components/bitrix/catalog.element/vine_course/style.css?178708338314947 */
/* /local/templates/vine/components/bitrix/catalog.section/course-modules/style.css?17867314049468 */
/* /local/templates/vine/components/bitrix/news.list/course-reviews/style.css?17867178453611 */
/* /local/templates/vine/components/bitrix/news.list/faq-accordion/style.css?17867178372833 */