/* 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/news.list/teachers-list/style.css?17867172055774*/
/* =========================================================================
   Преподаватели — bitrix:news.list / teachers-list
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y: 1861:10291 (заголовок), 66:2699
   (сетка карточек), 1617:10422 (кнопка), 75:3415 (должность, слой скрыт).

   Размеры из макета:
     секция      — колонка, шаг 16px;
     заголовок   — 40px Regular;
     карточка    — 405,33 (три в ряд при контейнере 1248 и зазоре 16),
                   рамка 1px #000, padding 8px, внутренний шаг 10px,
                   содержимое по центру, высота карточек в ряду общая;
     фото        — 270×220 (в разметке отдаётся ×2 под retina);
     ФИО         — 18px Bold, по центру, перенос после фамилии;
     должность   — 14px Regular, по левому краю;
     описание    — 18px Regular, три строки с многоточием;
     «Подробнее» — 18px, #0077FF, подчёркнутая;
     кнопка      — 188×40, белая с рамкой (общий класс .vine-btn).
   ========================================================================= */

.teachers {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
}

/* двойной класс — чтобы перебить общее правило .vine-main h2 базового слоя */
.teachers .teachers__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;
}

/* ------------------------------------------------------------------ СЕТКА */
/* три карточки в ряд: (1248 − 2×16) / 3 = 405,33 */
.teachers__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--vine-gap, 16px);
	width: 100%;
}

.teachers__item {
	display: flex;
	flex: 0 0 calc((100% - 2 * var(--vine-gap, 16px)) / 3);
	max-width: calc((100% - 2 * var(--vine-gap, 16px)) / 3);
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: var(--vine-pad-card, 8px);
	border: 1px solid var(--vine-color-text, #000000);
	background: var(--vine-color-bg, #FFFFFF);
}

/* ---------------------------------------------------------------- КАРТОЧКА */
.teachers__photo {
	flex: 0 0 auto;
	width: 270px;
	max-width: 100%;
	height: 220px;
	overflow: hidden;
}

.teachers__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.teachers .teachers__name {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 700;
	line-height: normal;
	text-align: center;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.teachers__position {
	width: 100%;
	margin: 0;
	font-size: var(--vine-fz-small, 14px);
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

/* описание в макете обрывается многоточием на третьей строке */
.teachers__text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 100%;
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.teachers__link {
	width: 100%;
	font-size: var(--vine-fz-text, 18px);
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
	word-break: break-word;
}

/* ----------------------------------------------------- РАСКРЫТИЕ СПИСКА */
/* Пояснение 1617:10425: кнопка не ведёт на страницу, а разворачивает весь
   список преподавателей курса здесь же. Разметка содержит всех, лишние
   карточки скрыты, кнопка их показывает и после этого исчезает.
   Класс .teachers--js ставит script.js: пока скрипт не отработал, скрывать
   карточки нельзя — иначе без JS часть преподавателей пропала бы совсем. */
.teachers__more {
	display: none;
	min-width: 188px;
}

.teachers--js .teachers__item--rest {
	display: none;
}

.teachers--js .teachers__more {
	display: inline-flex;
}

.teachers--js.teachers--expanded .teachers__item--rest {
	display: flex;
}

.teachers--js.teachers--expanded .teachers__more {
	display: none;
}

/* карточка, на которую после раскрытия уводится фокус, рамку не рисует
   поверх макета — оставляем штатный контур браузера только с клавиатуры */
.teachers__item:focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------- АДАПТИВ */
/* Мобильных раскладок в макете нет: сетка просто перестраивается,
   чтобы карточка 405px не ломала колонку на узком экране. */
@media (max-width: 1024px) {
	.teachers__item {
		flex-basis: calc((100% - var(--vine-gap, 16px)) / 2);
		max-width: calc((100% - var(--vine-gap, 16px)) / 2);
	}
}

@media (max-width: 640px) {
	.teachers__item {
		flex-basis: 100%;
		max-width: 100%;
	}

	.teachers__more {
		width: 100%;
	}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/course-result-document/style.css?17867172161883*/
/* =========================================================================
   По окончании вы получите — bitrix:news.list / course-result-document
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 2008:17883 (Frame 661).

   Размеры из макета:
     секция    — колонка, шаг 16px между заголовком и текстом;
     заголовок — 40px Regular;
     блок      — 18px Regular во всю ширину контейнера;
     первая строка — маркер-ромб + название документа Bold;
     абзацы описания идут вплотную, без отбивок (leading normal).
   ========================================================================= */

.result-doc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
}

/* двойной класс — чтобы перебить общее правило .vine-main h2 базового слоя */
.result-doc .result-doc__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;
}

.result-doc__body {
	width: 100%;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text, #000000);
	word-break: break-word;
}

.result-doc__name {
	margin: 0;
	font-weight: 400;
}

.result-doc__name b {
	font-weight: 700;
}

/* абзацы описания приходят из PREVIEW_TEXT — в макете между ними
   нет вертикальных отступов, строки идут подряд */
.result-doc__text,
.result-doc__text p,
.result-doc__text ul,
.result-doc__text ol {
	margin: 0;
}

.result-doc__text ul,
.result-doc__text ol {
	padding-left: 27px;
}

/* 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 */


/* Start:/local/templates/vine/components/bitrix/catalog.section/cross-sell/style.css?17867174014219*/
/* =========================================================================
   Блок «Слушатели, записавшиеся на этот курс, также смотрели…».
   Макет: Figma HA2Vx4dnWPRDdb6SL7tM3y, заголовок 493:11774, лента 493:11775
   (страница онлайн-курса 493:11634).

   Координаты макета:
     заголовок 48px  y = 5306,07, ширина 1248, до ленты 16px;
     лента 493:11775 y = 5434,07, ширина контейнера 1248,
       карточки x = 0 / 516 / 1032 / 1548 → 4 × 500 + 3 × 16 = 2048px,
       переполнение 800px, видно 2,5 карточки (прокрутка, .vine-scroller);
     карточка 493:11776: картинка 152×152, gap 16, колонка 332px,
       вертикальный шаг строк колонки 8px (0 / 55 / 79 / 171 / 200 …).

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

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

/* 48px берётся из .vine-title-detail общего слоя, здесь только отступ до ленты */
.cross-sell__title {
	margin: 0 0 var(--vine-gap, 16px);
}

/* Лента переполняет контейнер — так в макете; карточка у правого края
   подрезана, это и есть указание на прокрутку. */
.cross-sell__lane {
	/* фокус-рамка не должна прилипать к карточкам */
	outline-offset: 2px;
}

.cross-sell__item {
	width: 500px;
}

.cross-sell-card {
	display: flex;
	align-items: flex-start;
	gap: var(--vine-gap, 16px);
	width: 500px;
}

.cross-sell-card__thumb {
	flex: 0 0 152px;
	width: 152px;
	height: 152px;
	overflow: hidden;
	/* плейсхолдер макета, когда картинки у элемента нет */
	background: var(--vine-color-card, #C4C4C4);
}

.cross-sell-card__pic {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cross-sell-card__body {
	display: flex;
	flex: 0 0 332px;
	flex-direction: column;
	gap: var(--vine-gap-sm, 8px);
	width: 332px;
	min-width: 0;
}

/* Заголовок карточки — 40px Regular, не ссылка (ссылка в карточке одна —
   «Подробнее →»). Второй селектор перебивает .vine-main h3 (28px Bold). */
.cross-sell-card__title,
.vine-main .cross-sell-card__title {
	margin: 0;
	font-size: var(--vine-fz-h1, 40px);
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
}

/* Метка типа: 14px Italic (свойство TYPE_LABEL) */
.cross-sell-card__type {
	margin: 0;
	font-size: var(--vine-fz-small, 14px);
	font-style: italic;
	font-weight: 400;
	line-height: normal;
}

.cross-sell-card__announce,
.cross-sell-card__date,
.cross-sell-card__place {
	margin: 0;
	font-size: var(--vine-fz-text, 18px);
	font-weight: 400;
	line-height: normal;
	word-break: break-word;
}

.cross-sell-card__announce p {
	margin: 0;
}

.cross-sell-card__more {
	align-self: flex-start;
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	white-space: nowrap;
}

.cross-sell-card__more:hover,
.cross-sell-card__more:focus {
	color: var(--vine-color-link, #0077FF);
	text-decoration: underline;
}

/* Мобильных раскладок в макете нет. Ниже — только защита от карточки шире
   экрана: она сжимается до ширины вьюпорта, пропорции колонок сохраняются. */
@media (max-width: 560px) {
	.cross-sell__item,
	.cross-sell-card {
		width: calc(100vw - 2 * var(--vine-side, 16px));
		max-width: 500px;
	}

	.cross-sell-card__body {
		flex: 1 1 auto;
		width: auto;
	}
}

/* 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/news.list/teachers-list/style.css?17867172055774 */
/* /local/templates/vine/components/bitrix/news.list/course-result-document/style.css?17867172161883 */
/* /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 */
/* /local/templates/vine/components/bitrix/catalog.section/cross-sell/style.css?17867174014219 */