/* Start:/local/templates/vine/css/header.css?17864800952618*/
/* =========================================================================
   ШАПКА САЙТА
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 770:6324 «Шапка десктоп (узк.)»:
   страница 1280, шапка 68 (padding 10 сверху/снизу + ряд 48),
   контейнер 1248, боковые отступы 16.
   Логотип 18/21 Bold в две строки; блок иконок — шаг 40.
   Стили внутренностей меню/поиска/корзины лежат в style.css их шаблонов.
   ========================================================================= */

.vine-header {
	background: var(--vine-color-bg);
}

.vine-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 48px;
	padding: 10px 0;
}

/* -------------------------------------------------------------- ЛОГОТИП */
/* «Школа вина» / «AST» — две строки по центру, 18px Bold, чёрный, без подчёркивания */
.vine-header__logo {
	flex: 0 0 auto;
	display: block;
	font-weight: 700;
	font-size: var(--vine-fz-text);
	line-height: 21px;
	color: var(--vine-color-text);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.vine-header__logo:hover,
.vine-header__logo:focus {
	color: var(--vine-color-text);
	text-decoration: none;
}

.vine-header__logo-line {
	display: block;
}

/* ----------------------------------------------------------------- МЕНЮ */
.vine-header__nav {
	flex: 0 1 auto;
	min-width: 0;
}

/* --------------------------------------------------- ПОИСК / КОРЗИНА / ВХОД */
.vine-header__tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 40px;
}

/* Развёрнутый поиск (макет 1039:13433): меню прячется, строка поиска
   занимает освободившееся место */
.vine-header--search-open .vine-header__nav {
	display: none;
}

.vine-header--search-open .vine-header__tools {
	flex: 1 1 auto;
	min-width: 0;
}

/* ----------------------------------------------------------------- ВХОД */
.vine-header__user {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vine-header__user-name {
	font-size: var(--vine-fz-small);
	line-height: 16px;
	color: var(--vine-color-link);
	text-decoration: underline;
	white-space: nowrap;
}

.vine-header__auth {
	flex: 0 0 auto;
	display: block;
	width: 24px;
	height: 24px;
	text-decoration: none;
}

.vine-header__auth-icon {
	display: block;
	width: 24px;
	height: 24px;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/menu/vine-top/style.css?17864800981883*/
/* =========================================================================
   ВЕРХНЕЕ МЕНЮ (bitrix:menu / vine-top)
   Макет Figma 770:6324 — ряд пунктов 14/16, шаг 24, ссылки #0077FF подчёркнутые.
   Выпадающий список второго уровня — узлы 985:9821 и 985:9844:
   фон #E5E5E5, рамка 1px #777, пункт 18px, padding 8.
   ========================================================================= */

.vine-menu {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vine-menu__item {
	position: relative;
}

.vine-menu__link {
	display: inline-block;
	font-size: var(--vine-fz-small);
	line-height: 16px;
	color: var(--vine-color-link);
	text-decoration: underline;
	white-space: nowrap;
}

/* «>» у пунктов, у которых есть второй уровень */
.vine-menu__arrow {
	margin-left: 4px;
	text-decoration: none;
	display: inline-block;
}

/* ------------------------------------------------- ВЫПАДАЮЩИЙ СПИСОК */
.vine-menu__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	display: none;
	min-width: 250px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #E5E5E5;
	border: 1px solid var(--vine-color-line);
}

.vine-menu__item--parent:hover > .vine-menu__sub,
.vine-menu__item--parent:focus-within > .vine-menu__sub {
	display: block;
}

.vine-menu__subitem + .vine-menu__subitem {
	border-top: 1px solid var(--vine-color-line);
}

.vine-menu__sublink {
	display: block;
	padding: 8px;
	font-size: var(--vine-fz-text);
	line-height: normal;
	color: var(--vine-color-text);
	text-decoration: none;
}

.vine-menu__sublink:hover,
.vine-menu__sublink:focus,
.vine-menu__subitem--current > .vine-menu__sublink {
	color: var(--vine-color-text);
	text-decoration: underline;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/search.title/vine/style.css?17864801962589*/
/* =========================================================================
   ПОИСК В ШАПКЕ (bitrix:search.title / vine)
   Свёрнуто — лупа 24x24. Развёрнуто (макет 1355:9953 «Поисковая строка»):
   поле 32px, рамка 1px #000, плейсхолдер 18px #C4C4C4,
   через 8px кнопка-иконка 32x32, рамка 1px #000, радиус 5.
   ========================================================================= */

.vine-search {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	min-width: 0;
}

.vine-search__toggle {
	display: block;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
}

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

.vine-search__form {
	display: none;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
}

.vine-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 32px;
	padding: 0 4px;
	border: 1px solid var(--vine-color-text);
	border-radius: 0;
	background: var(--vine-color-bg);
	font-size: var(--vine-fz-text);
	line-height: normal;
	color: var(--vine-color-text);
}

.vine-search__input::placeholder {
	color: var(--vine-color-card);
	opacity: 1;
}

.vine-search__submit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--vine-color-text);
	border-radius: var(--vine-radius-btn);
	background: var(--vine-color-bg);
}

/* развёрнутое состояние: лупа-переключатель прячется, поле занимает строку */
.vine-header--search-open .vine-search {
	flex: 1 1 auto;
}

.vine-header--search-open .vine-search__toggle {
	display: none;
}

.vine-header--search-open .vine-search__form {
	display: flex;
}

/* Подсказки JCTitleSearch. Компонент вешает блок на <body> и позиционирует
   его сам, поэтому селектор глобальный — вложить его в .vine-search нельзя.
   Оформление — как у «Выпадающего списка» из макета. */
.title-search-result {
	z-index: 200;
	background: #E5E5E5;
	border: 1px solid var(--vine-color-line);
}

.title-search-result table {
	width: 100%;
}

.title-search-result td {
	padding: 8px;
	font-size: var(--vine-fz-small);
	line-height: normal;
}

.title-search-result a {
	color: var(--vine-color-link);
	text-decoration: underline;
}

.title-search-separator {
	display: none;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/sale.basket.basket.line/vine/style.css?1786480107481*/
/* =========================================================================
   КОРЗИНА В ШАПКЕ (bitrix:sale.basket.basket.line / vine)
   Макет Figma 770:6324 — иконка 24x24 без счётчика.
   ========================================================================= */

.vine-basket {
	flex: 0 0 auto;
	display: block;
	width: 24px;
	height: 24px;
	text-decoration: none;
}

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

/* End */


/* Start:/local/templates/vine/components/bitrix/breadcrumb/vine/style.css?17867171322423*/
/* ====================================================== ХЛЕБНЫЕ КРОШКИ
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 14:157 (строка 535×16, x=16, y=0).
   H1 страницы в макете начинается на y=32 — значит под крошками 16px.
   Общий слой (.vine-container, токены цветов и кеглей) — в template_styles.css.
   ==================================================================== */

.vine-breadcrumb-wrap {
	margin-bottom: var(--vine-gap); /* 16px до H1, шаг сетки макета */
}

.vine-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;       /* длинное название курса переносится, а не рвёт сетку */
	align-items: flex-start; /* в макете items-start: верхние кромки на одной линии */
	gap: 11px;             /* шаг между пунктами и разделителями из макета */
	margin: 0;
	padding: 0;
	list-style: none;
}

.vine-breadcrumb__item {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 11px;             /* тот же шаг между разделителем и текстом пункта */
	min-width: 0;
}

/* разделитель «|»: Roboto Bold 12px, #AEAEAE (цвет разделителей крошек из макета) */
.vine-breadcrumb__sep {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	font-style: normal;
	line-height: normal;
	color: #AEAEAE;
	-webkit-user-select: none;
	user-select: none;
}

/* пункт-ссылка: Roboto Regular 14px, #0077FF, подчёркнутая */
.vine-breadcrumb__link {
	font-size: var(--vine-fz-small); /* 14px */
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	color: var(--vine-color-link);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

.vine-breadcrumb__link:hover,
.vine-breadcrumb__link:focus {
	color: var(--vine-color-link);
	text-decoration: underline;
}

.vine-breadcrumb__link:focus-visible {
	outline: 2px solid var(--vine-color-link);
	outline-offset: 2px;
}

/* текущая страница: Roboto Bold 14px, чёрный, без ссылки */
.vine-breadcrumb__current {
	font-size: var(--vine-fz-small); /* 14px */
	font-weight: 700;
	font-style: normal;
	line-height: normal;
	color: var(--vine-color-text);
}

/* End */


/* Start:/local/templates/vine/components/bitrix/menu/vine-footer/style.css?17864797971983*/
/* Подвал, макет 493:13277 (1280x321).
   Каркас подвала лежит здесь, потому что footer.php своего css-файла не имеет,
   а меню подвала выводится на каждой странице — значит, этот style.css подключён всегда. */

/* --- КАРКАС ПОДВАЛА --- */
.vine-footer{
	max-width:1280px;
	margin:24px auto;
	padding:40px 16px 13px;
	display:flex;
	flex-direction:column;
	gap:16px;
	background:#fff;
	font-family:"Roboto",system-ui,sans-serif;
	color:#000;
}
.vine-footer__divider{
	width:100%;
	margin:8px 0;
	border:none;
	border-top:1px solid #C4C4C4;
}
.vine-footer__cols{
	display:flex;
	gap:8px;
	align-items:flex-start;
}
.vine-footer__col{
	flex:0 0 306px;
	max-width:306px;
	display:flex;
	flex-direction:column;
	gap:8px;
}

/* --- ЮРИДИЧЕСКАЯ СТРОКА (включаемая область /include/footer_requisites.php) --- */
.vine-footer__legal{
	display:flex;
	flex-wrap:wrap;
	gap:32px;
	justify-content:center;
	width:100%;
}
.footer-legal__item{
	font-size:12px;
	font-weight:700;
	line-height:normal;
	color:#777;
}
.footer-legal__link{
	color:#777;
	text-decoration:underline;
}

/* --- МЕНЮ ПОДВАЛА --- */
.footer-menu{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.footer-menu__title{
	margin:0;
	font-size:12px;
	font-weight:700;
	line-height:normal;
	color:#000;
}
.footer-menu__list{
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	flex-direction:column;
	gap:8px;
}
.footer-menu__item{
	margin:0;
}
.footer-menu__item--strong{
	margin-top:16px; /* 8px gap + 16px = отбивка 24px из макета */
}
.footer-menu__link{
	font-size:12px;
	font-weight:400;
	line-height:normal;
	color:#0077FF;
	text-decoration:underline;
}
.footer-menu__link--strong{
	font-weight:700;
}

@media(max-width:1279px){
	.vine-footer__cols{flex-wrap:wrap}
	.vine-footer__col{flex:1 1 45%;max-width:none}
}

/* End */


/* Start:/local/templates/vine/components/bitrix/news.list/footer-offices/style.css?1786479799980*/
/* Подвал, колонка «Остаёмся на связи» — офисы из ИБ 7 (макет 493:13277) */

.footer-contacts{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.footer-contacts__title{
	margin:0;
	font-size:12px;
	font-weight:700;
	line-height:normal;
	color:#000;
}
.footer-contacts__list{
	display:flex;
	gap:32px;
	align-items:flex-start;
}
.footer-contacts__office{
	display:flex;
	flex-direction:column;
	gap:16px;
}
.footer-contacts__info{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.footer-contacts__city{
	font-size:12px;
	font-weight:400;
	line-height:normal;
	color:#000;
}
.footer-contacts__link{
	font-size:12px;
	font-weight:400;
	line-height:normal;
	color:#0077FF;
	text-decoration:underline;
}
.footer-contacts__social{
	display:flex;
	gap:8px;
	align-items:flex-start;
}
.footer-contacts__social-link{
	display:block;
	width:24px;
	height:24px;
}
.footer-contacts__social-icon{
	display:block;
	width:24px;
	height:24px;
}

/* End */


/* Start:/local/templates/vine/components/bitrix/subscribe.edit/vine/style.css?17864798021092*/
/* Подвал, подписка на рассылку (макет 493:13277 — кнопка «Подписаться на рассылку») */

.footer-subscribe{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.footer-subscribe__form{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:8px;
	margin:0;
}
.footer-subscribe__input{
	width:100%;
	padding:4px;
	border:1px solid #000;
	border-radius:5px;
	background:#fff;
	font-family:inherit;
	font-size:12px;
	line-height:normal;
	color:#000;
}
.footer-subscribe__input::placeholder{
	color:#C4C4C4;
}
.footer-subscribe__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:4px;
	border:1px solid #000;
	border-radius:5px;
	background:#151515;
	font-family:inherit;
	font-size:12px;
	font-weight:400;
	line-height:normal;
	color:#fff;
	text-align:center;
	white-space:nowrap;
	cursor:pointer;
}
.footer-subscribe__btn:hover{
	background:#000;
}
.footer-subscribe__message{
	margin:0;
	font-size:12px;
	line-height:normal;
	color:#000;
}
.footer-subscribe__message--error{
	color:#c00;
}

/* End */


/* Start:/local/templates/vine/css/contacts-modal.css?17873146455499*/
/* =========================================================================
   ОБОЛОЧКА МОДАЛКИ «Контакты — Город» (макет 2023:13109).

   Здесь только каркас окна: подложка, само окно 1280x986, кнопка закрытия,
   шапка с ней и служебное скрытие неактивных панелей городов.
   Содержимое (заголовок, вкладки, панель офиса, карта, карусель
   сотрудников) размечает и оформляет шаблон компонента
   news.list/contacts-city — его классы в этом файле не описаны.

   Разметку подложки и окна строит на лету js/contacts-modal.js вокруг
   контейнера [data-contacts-modal], который уже стоит на странице.

   Габариты макета (узел 2023:13109):
     окно            1280 x 986, белое, padding 16, без рамки и скругления;
     кнопка закрытия 2063:17660 — 32x32, рамка 1px #000, радиус 5,
                     иконка 24x24, отступы сверху и справа по 16;
     контент         2023:13111 — 1248 x 912, начинается на y=58,
                     то есть 16 (padding) + 32 (кнопка) + 10 (зазор).

   ВНЕ МАКЕТА: затемнённой подложки в макете нет — сделана
   rgba(0, 0, 0, 0.4), это решение вёрстки, а не значение из Figma.
   ========================================================================= */

/* ------------------------------------------------------------- подложка */

.contacts-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: auto;
	padding: 16px 0;
	background: rgba(0, 0, 0, 0.4);
}

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

/* Пока окно открыто, страница под ним не прокручивается.
   Класс вешает скрипт на <html> и <body>. */
.contacts-modal__body-lock {
	overflow: hidden;
}

/* ----------------------------------------------------------------- окно */

.contacts-modal__window {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 1280px;
	max-width: 100%;
	min-height: 986px;
	margin: auto;
	padding: 16px;
	background: var(--vine-color-bg, #FFFFFF);
	font-family: var(--vine-font, "Roboto", "Helvetica Neue", Arial, sans-serif);
	font-size: var(--vine-fz-text, 18px);
	line-height: normal;
	color: var(--vine-color-text, #000000);
}

/* Шапка 32px: в макете в ней только кнопка закрытия, прижатая вправо. */
.contacts-modal__head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	height: 32px;
}

.contacts-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;
}

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

/* До того как скрипт обернёт контейнер в окно, он не должен мелькать в
   потоке страницы: класс contacts-modal__content ставит на него скрипт. */
[data-contacts-modal]:not(.contacts-modal__content) {
	display: none;
}

/* Контейнер [data-contacts-modal] — фрейм 2023:13111 1248x912.
   Ширину и внутренние отступы задаёт скрипт этим классом, чтобы шаблон
   контента не зависел от того, чем его обернули. */
.contacts-modal__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	padding: 0 16px;
}

/* --------------------------------------------- переключение городов */
/* Активную вкладку и панель отмечает классом is-active скрипт, а рисует их
   style.css шаблона contacts-city. Здесь только скрытие неактивных панелей:
   без него все города показались бы разом. Правило намеренно не назначает
   display активной панели — её раскладку задаёт шаблон. */

[data-city-panel]:not(.is-active) {
	display: none;
}

/* -------------------------------------------------------------- узкий экран */
/* В макете мобильных состояний модалки нет. Ниже 1312px (1280 окна + 2x16
   подложки) окно занимает всю доступную ширину, а жёсткая высота снимается,
   чтобы содержимое не обрезалось. */

@media (max-width: 1311px) {
	.contacts-modal {
		padding: 16px;
	}

	.contacts-modal__window {
		width: 100%;
		min-height: 0;
	}
}

@media (max-width: 640px) {
	.contacts-modal {
		padding: 8px;
	}

	.contacts-modal__window {
		padding: 8px;
	}

	.contacts-modal__content {
		padding: 0;
	}
}

/* End */


/* Start:/local/templates/vine/css/auth-modal.css?17875132357399*/
/* =========================================================================
   Окно входа по номеру телефона — три шага одного окна.
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y:
     18:591  «Введите номер телефона»  344×330
     18:642  «Введите код»             344×593
     20:521  «Вход выполнен»           344×296

   Общее у всех трёх: белое окно шириной 344, padding 16, крестик 32×32
   у правого края, содержимое колонкой с шагом 24. Высота не фиксируется —
   она набирается содержимым шага и в макете у каждого шага своя.

   Оболочку (затемнение, центрирование, крестик) держит css/contacts-modal.css,
   здесь только размер окна и его содержимое.
   ========================================================================= */

.contacts-modal__window--auth {
	box-sizing: border-box;
	width: 344px;
	max-width: 100%;
	padding: 16px;
	background: #FFFFFF;
}

.auth-modal__step {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	margin-top: 8px;
}

/* Заголовок 34px Regular. Пишем с .vine-main, иначе общее правило проекта
   для заголовков перебьёт кегль — эта грабля в проекте ловилась трижды.
   Тег выбран <p>, а не <h2>, по той же причине. */
.vine-main .auth-modal__title,
.auth-modal__title {
	margin: 0;
	width: 100%;
	font-size: 34px;
	font-weight: 400;
	line-height: normal;
	color: #000000;
	text-align: center;
}

/* На шаге «Введите код» заголовок в макете прижат к левому краю набора,
   а не растянут по ширине (18:645 — hug content по центру). */
.auth-modal__title--code {
	text-align: center;
}

/* ------------------------------------------------------- поле телефона */

.auth-modal__field {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	height: 32px;
	padding: 0 8px;
	background: #FFFFFF;
	border: 1px solid #000000;
	overflow: hidden;
}

.auth-modal__input {
	width: 100%;
	border: 0;
	padding: 0;
	background: transparent;
	font-family: inherit;
	font-size: 18px;
	line-height: normal;
	color: #000000;
}

.auth-modal__input::placeholder {
	color: #C4C4C4;
}

/* ---------------------------------------------------------- код 4 поля */

/* Набор 18:670: в макете четыре поля по 60×32 с шагом 24. Полей по факту
   шесть — столько цифр в коде, который выдаёт ядро (см. комментарий в
   include/auth-modal.php), поэтому шаг уменьшен до 8: шесть полей по 60 с
   шагом 24 не влезают в рабочую ширину окна 312. Ширина полей не
   фиксируется, они делят строку поровну. */
.auth-modal__code {
	display: flex;
	gap: 8px;
	width: 100%;
}

.auth-modal__code-input {
	box-sizing: border-box;
	flex: 1 0 0;
	min-width: 0;
	height: 32px;
	padding: 0 8px;
	background: #FFFFFF;
	border: 1px solid #000000;
	font-family: inherit;
	font-size: 18px;
	line-height: normal;
	color: #000000;
	text-align: center;
}

/* -------------------------------------------------------------- тексты */

.auth-modal__hint,
.auth-modal__terms,
.auth-modal__timer {
	margin: 0;
	width: 100%;
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	color: #000000;
}

.auth-modal__terms a {
	color: #0077FF;
	text-decoration: underline;
}

/* Ошибка 18:869 и 18:673 — красный текст 18px в потоке, без иконки. */
.auth-modal__error {
	margin: 0;
	width: 100%;
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	color: #FF0000;
}

/* Строка кода на стенде: SMS не отправляется, и код показывается тут.
   Оформление намеренно служебное — это не часть макета. */
.auth-modal__debug {
	margin: 16px 0 0;
	padding: 8px;
	border: 1px dashed #777777;
	font-size: 14px;
	line-height: normal;
	color: #777777;
	text-align: center;
}

/* -------------------------------------------------------------- кнопки */

/* Обе активные кнопки — общая тёмная кнопка проекта; из макета берём только
   ширину: «Получить код» 140×40, «Перейти к оформлению» 227×40. */
.auth-modal__submit {
	min-width: 140px;
	min-height: 40px;
}

.auth-modal__next {
	min-width: 227px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* «Получить новый код» (18:647) нарисована неактивной: пока идёт отсчёт —
   фон #E5E5E5, рамка и текст #777777. Активной она становится, когда
   отсчёт закончился, и тогда выглядит как обычная белая кнопка проекта. */
.auth-modal__resend {
	min-width: 199px;
	min-height: 40px;
}

.auth-modal__resend[disabled] {
	background: #E5E5E5;
	border-color: #777777;
	color: #777777;
	cursor: default;
}

/* Шаг «Вход выполнен» в макете — заголовок и кнопка по центру с шагом 24
   и пустыми строками сверху и снизу; пустые строки не переносим. */
.auth-modal__step--done {
	padding: 24px 0;
}

/* ------------------------------------------------- вход по почте (328:4495) */

/* «Далее» 77×40, «Закрыть» 97×40 — ширины из макета. */
.auth-modal__next-btn {
	min-width: 77px;
	min-height: 40px;
}

.auth-modal__close-btn {
	min-width: 97px;
	min-height: 40px;
}

.auth-modal__social-title {
	margin: 0;
	width: 100%;
	font-size: 18px;
	line-height: normal;
	color: #000000;
}

/* Три кнопки 113×40 колонкой с шагом 16 (1043:14960), по центру окна. */
.auth-modal__social {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.auth-modal__social-btn {
	min-width: 113px;
	min-height: 40px;
}

/* Провайдеры не подключены — кнопки неактивны. Оформление неактивной кнопки
   то же, что у «Получить новый код»: серый фон и серая рамка. */
.auth-modal__social-btn[disabled] {
	background: #E5E5E5;
	border-color: #777777;
	color: #777777;
	cursor: default;
}

/* «Назад» (328:4524) — это ссылка по виду: синий подчёркнутый текст 18px,
   но по сути кнопка, поэтому кнопка без фона и рамки. */
.auth-modal__back {
	align-self: flex-start;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 18px;
	line-height: normal;
	color: #0077FF;
	text-decoration: underline;
	cursor: pointer;
}

/* End */


/* Start:/local/templates/vine/css/consent.css?17875153232987*/
/* =========================================================================
   Сквозные окна согласия.
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y:
     493:11424  «Подтверждение возраста» — окно 344×302, padding 16, gap 24:
                «18+» 48px Bold по центру, текст 312×126, кнопка 136×40
     493:11430  «Cookie» — плашка 496×144, padding 16: текст 306 слева,
                кнопка «Принять» 97×40 справа, ниже ссылка 265×21

   Затемнение и центрирование у возрастного окна свои, а не от
   contacts-modal: то окно обязано закрываться крестиком и Escape, а это —
   нет (в макете крестик скрыт, выйти можно только кнопкой).
   ========================================================================= */

.consent[hidden] {
	display: none;
}

/* ------------------------------------------------ подтверждение возраста */

.consent--age {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.5);
}

.consent__window--age {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	width: 344px;
	max-width: 100%;
	padding: 16px;
	background: #FFFFFF;
}

.consent__age-title {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: normal;
	color: #000000;
}

.consent__text {
	margin: 0;
	width: 100%;
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	color: #000000;
}

.consent__age-button {
	min-width: 136px;
	min-height: 40px;
}

/* --------------------------------------------------------- плашка cookie */

/* Места на экране макет не задаёт — ставим в левый нижний угол с отступом 16
   (решение наше, обосновано в include/consent-modals.php). */
.consent--cookie {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 999;
}

.consent__window--cookie {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 496px;
	max-width: calc(100vw - 32px);
	padding: 16px;
	background: #FFFFFF;
	border: 1px solid #000000;
}

/* Текст и кнопка в одну строку: в макете кнопка стоит справа от текста
   (x=341 при тексте шириной 306), выровнена по его первой строке. */
.consent__cookie-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
}

.consent__text--cookie {
	max-width: 306px;
}

.consent__cookie-button {
	flex: 0 0 auto;
	min-width: 97px;
	min-height: 40px;
}

.consent__link {
	font-size: 18px;
	line-height: normal;
	color: #0077FF;
	text-decoration: underline;
}

/* End */


/* Start:/local/templates/vine/template_styles.css?178724600031162*/
/* =========================================================================
   ШКОЛА ВИНА AST — БАЗОВЫЙ СЛОЙ ШАБЛОНА vine
   Только общие вещи: шрифт, сброс, токены, сетка, типографика, ссылки,
   кнопка, бейдж, разделитель, вертикальный ритм секций главной.
   Стили конкретных секций живут в style.css шаблонов компонентов.
   Все размеры сняты из макета Figma HA2Vx4dnWPRDdb6SL7tM3y, фрейм 493:13148.
   ========================================================================= */

/* ------------------------------------------------------------------ ШРИФТ */
/* Roboto: Regular 400, Bold 700, Italic 400 — три начертания из макета.
   Подключаем через @font-face (а не @import), чтобы правила пережили
   объединение CSS Битриксом. Сначала пробуем локально установленный шрифт,
   затем вариативный woff2 (кириллица + латиница). */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: local("Roboto"), local("Roboto Regular"),
		url("https://fonts.gstatic.com/s/roboto/v51/KFOBCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbQuYoPsOC-chym82_D9n7ufFffE.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: local("Roboto"), local("Roboto Regular"),
		url("https://fonts.gstatic.com/s/roboto/v51/KFOBCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbQuYoPsOC-chym82_D9n6ufF.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: local("Roboto Italic"),
		url("https://fonts.gstatic.com/s/roboto/v51/KFOKCnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmOClHrs6ljXfMMLoHQuAz-k2Qn.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: local("Roboto Italic"),
		url("https://fonts.gstatic.com/s/roboto/v51/KFOKCnqEu92Fr1Mu53ZEC9_Vu3r1gIhOszmOClHrs6ljXfMMLoHQuAj-kw.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ ТОКЕНЫ */
:root {
	/* цвета макета */
	--vine-color-text: #000000;
	--vine-color-bg: #FFFFFF;
	--vine-color-link: #0077FF;
	--vine-color-badge: #FFFF00;
	--vine-color-card: #C4C4C4;
	--vine-color-line: #777777;
	--vine-color-btn: #151515;
	--vine-color-btn-text: #FFFFFF;
	--vine-color-overlay: rgba(255, 255, 255, 0.8);

	/* типографика */
	--vine-font: "Roboto", "Helvetica Neue", Arial, sans-serif;
	--vine-fz-h1: 40px;   /* заголовок секции: «Полезные материалы» */
	--vine-fz-h2: 34px;   /* подзаголовок: «Очные», «Онлайн» */
	--vine-fz-h3: 28px;   /* заголовок крупной карточки */
	--vine-fz-h4: 24px;   /* заголовок баннера / карточки-плитки */
	--vine-fz-text: 18px; /* основной текст, ссылки, кнопки */
	--vine-fz-price: 16px;/* цена (Bold) */
	--vine-fz-small: 14px;/* дата, бейдж (Italic) */

	/* сетка и отступы */
	--vine-page: 1280px;  /* ширина страницы */
	--vine-container: 1248px; /* ширина контента */
	--vine-side: 16px;    /* боковые отступы страницы */
	--vine-gap: 16px;     /* базовый шаг: между секциями, колонками, карточками */
	--vine-gap-sm: 8px;   /* мелкий шаг: внутри карточки */
	--vine-pad-card: 8px; /* внутренний отступ карточки */
	--vine-radius: 8px;   /* скругление карточки */
	--vine-radius-btn: 5px;
	--vine-radius-badge: 4px;
}

/* ------------------------------------------------------------------ СБРОС */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--vine-color-bg);
	color: var(--vine-color-text);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	font-weight: 400;
	line-height: normal; /* в макете у всех текстов leading: normal */
	font-variation-settings: "wdth" 100;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
}

ul[class],
ol[class] {
	list-style: none;
}

img, svg, video {
	max-width: 100%;
	display: block;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

table {
	border-collapse: collapse;
}

/* ------------------------------------------------------------ КОНТЕЙНЕР */
/* страница 1280, боковые отступы 16 → контент ровно 1248 */
.vine-container {
	width: 100%;
	max-width: var(--vine-page);
	margin: 0 auto;
	padding: 0 var(--vine-side);
}

/* область основного контента: 10px до шапки и до подвала (из макета) */
.vine-main {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* ---------------------------------------------------------- ТИПОГРАФИКА */
/* Шкала снята из макета: 40 / 34 / 28 / 24 / 18 / 16 / 14 */
.vine-h1,
.vine-main h1 {
	font-size: var(--vine-fz-h1);
	font-weight: 400;
}

.vine-h2,
.vine-main h2 {
	font-size: var(--vine-fz-h2);
	font-weight: 400;
}

.vine-h3,
.vine-main h3 {
	font-size: var(--vine-fz-h3);
	font-weight: 700;
}

.vine-h4,
.vine-main h4 {
	font-size: var(--vine-fz-h4);
	font-weight: 400;
}

.vine-text {
	font-size: var(--vine-fz-text);
	font-weight: 400;
}

.vine-text--bold {
	font-weight: 700;
}

.vine-price {
	font-size: var(--vine-fz-price);
	font-weight: 700;
}

.vine-small {
	font-size: var(--vine-fz-small);
	font-weight: 400;
	font-style: italic;
}

/* длинные заголовки и описания переносятся, а не рвут сетку */
.vine-h1, .vine-h2, .vine-h3, .vine-h4,
.vine-text, .vine-small,
.vine-main p {
	word-break: break-word;
}

/* --------------------------------------------------------------- ССЫЛКИ */
a {
	color: var(--vine-color-link);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

a:hover,
a:focus {
	color: var(--vine-color-link);
	text-decoration: underline;
}

/* ссылка-заголовок: цвет текста, подчёркивание только по наведению */
.vine-link-plain {
	color: inherit;
	text-decoration: none;
}

.vine-link-plain:hover,
.vine-link-plain:focus {
	color: inherit;
	text-decoration: underline;
}

/* --------------------------------------------------------------- КНОПКА */
/* из макета: padding 9px 12px 10px, рамка 1px #000, радиус 5px, текст 18px */
.vine-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 12px 10px;
	border: 1px solid var(--vine-color-text);
	border-radius: var(--vine-radius-btn);
	background: var(--vine-color-bg);
	color: var(--vine-color-text);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	font-weight: 400;
	line-height: normal;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

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

/* тёмная кнопка («Отправить») */
.vine-btn--dark {
	background: var(--vine-color-btn);
	color: var(--vine-color-btn-text);
}

.vine-btn--dark:hover,
.vine-btn--dark:focus {
	color: var(--vine-color-btn-text);
}

/* --------------------------------------------------------------- БЕЙДЖ */
/* «новинка»: жёлтый фон, рамка 1px #000, радиус 4px, padding 4px, 14px italic */
.vine-badge {
	display: inline-flex;
	align-items: flex-start;
	padding: 4px;
	border: 1px solid var(--vine-color-text);
	border-radius: var(--vine-radius-badge);
	background: var(--vine-color-badge);
	color: var(--vine-color-text);
	font-size: var(--vine-fz-small);
	font-style: italic;
	font-weight: 400;
	line-height: normal;
	white-space: nowrap;
}

/* ---------------------------------------------------- РАЗДЕЛИТЕЛЬ СЕКЦИЙ */
/* В макете (1660:9088, 1660:9229, 1660:9370) отбивка вокруг линии симметрична:
   16px воздуха + 8px поля + линия 1px #777 + 8px поля + 16px воздуха.
   Сама рамка разделителя — 16px высотой (8 + линия + 8), внешние 16px даёт
   собственный margin. Раньше здесь стоял margin: 0, воздух приходил только
   сверху — из margin-bottom предыдущей секции, — и отбивка выходила 24/8. */
.vine-divider {
	display: block;
	width: 100%;
	height: 16px;
	margin: var(--vine-gap) 0;
	padding: 8px 0;
	border: 0;
	background: none;
}

.vine-divider::before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: var(--vine-color-line);
}

/* Голый <hr> из контента (DETAIL_TEXT статьи и т.п.) тоже рисуем линией макета.
   :not(.vine-divider) обязателен: без него это правило (специфичность 0,1,1)
   перебивало .vine-divider (0,1,0) и сплющивало разделитель до 1px, из-за чего
   приходилось держать компенсирующее правило .vine-main hr.vine-divider —
   а оно, будучи специфичнее всех, глушило и постановочные переопределения
   разделителя в style.css шаблонов компонентов. */
.vine-main hr:not(.vine-divider) {
	height: 1px;
	margin: 8px 0;
	border: 0;
	background: var(--vine-color-line);
}

/* ------------------------------------------------- ВЕРТИКАЛЬНЫЙ РИТМ */
/* По координатам макета все блоки главной идут с шагом 16px:
   баннер → текст → каталог → материалы → отзывы → форма.
   Разделитель добавляет ещё 16px с каждой стороны (16 + 16 линия + 16).
   Соседние вертикальные margin'ы в обычном потоке схлопываются, поэтому
   16px секции и 16px разделителя дают ровно 16px, а не 32. Отдельного
   правила «.vine-section + .vine-divider { margin-top: 0 }» здесь больше нет:
   оно обнуляло воздух под разделителем и давало несимметричные 24/8. */
.vine-section {
	margin: 0 0 var(--vine-gap);
}

.vine-section:last-child {
	margin-bottom: 0;
}

/* шапка секции: заголовок 40px + ссылка «посмотреть все» 40px, зазор 16px,
   до контента секции — 16px */
.vine-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--vine-gap);
	margin: 0 0 var(--vine-gap);
}

.vine-section__title {
	font-size: var(--vine-fz-h1);
	font-weight: 400;
	color: var(--vine-color-text);
}

.vine-section__all {
	font-size: var(--vine-fz-h1);
	color: var(--vine-color-link);
	text-decoration: underline;
	white-space: nowrap;
}

/* подзаголовок группы («Очные» + «посмотреть все») — 34px */
.vine-subhead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--vine-gap);
	margin: 0 0 var(--vine-gap);
}

.vine-subhead__title {
	font-size: var(--vine-fz-h2);
	font-weight: 400;
	color: var(--vine-color-text);
}

.vine-subhead__all {
	font-size: var(--vine-fz-h2);
	color: var(--vine-color-link);
	text-decoration: underline;
	white-space: nowrap;
}

/* ------------------------------------------------------ ХЕЛПЕРЫ СЕТКИ */
/* Общая заготовка карточки: фон #C4C4C4, padding 8px, радиус 8px, шаг 16px.
   Конкретную раскладку карточек агенты описывают в своих style.css. */
.vine-card {
	background: var(--vine-color-card);
	border-radius: var(--vine-radius);
	padding: var(--vine-pad-card);
}

.vine-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------- АДАПТИВ */
@media (max-width: 1024px) {
	:root {
		--vine-fz-h1: 32px;
		--vine-fz-h2: 28px;
		--vine-fz-h3: 24px;
	}
}

@media (max-width: 640px) {
	:root {
		--vine-fz-h1: 26px;
		--vine-fz-h2: 22px;
		--vine-fz-h3: 20px;
		--vine-fz-h4: 20px;
		--vine-fz-text: 16px;
	}
}

/* ------------------------------ ШТАТНЫЕ КОМПОНЕНТЫ БИТРИКСА (глобально) */
/* Кнопки корзины/оформления — в цвет макета, а не ярко-синие по умолчанию */
.btn-primary,
.basket-btn-checkout,
.basket-coupon-block-coupon-btn,
.basket-item-amount-btn-plus,
.basket-item-amount-btn-minus {
	background-color: var(--vine-color-btn) !important;
	border-color: var(--vine-color-btn) !important;
	color: var(--vine-color-btn-text) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.basket-btn-checkout:hover,
.basket-btn-checkout:focus {
	background-color: #000 !important;
	border-color: #000 !important;
	color: var(--vine-color-btn-text) !important;
}

.btn-link {
	color: var(--vine-color-btn) !important;
}

/* =========================================================================
   ДЕТАЛЬНЫЕ СТРАНИЦЫ: КУРС / ЗАНЯТИЕ / ОНЛАЙН-КУРС — ОБЩИЙ СЛОЙ
   Добавлено 2026-08-14, этап Э4 по [[course-page-spec]] (раздел 1, 5.1, 6)
   и [[course-page-variants]] (3.2, 3.3, 3.4).
   Блок только ДОБАВЛЯЕТ: ни одно правило выше не изменено и не удалено.
   Стили конкретных секций по-прежнему живут в style.css своих шаблонов.
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, фреймы 13:565, 68:2734, 493:11634.
   ========================================================================= */

/* --------------------------------------------- ТОКЕНЫ ДЕТАЛЬНЫХ СТРАНИЦ */
/* Отдельный :root — базовый набор токенов выше остаётся как есть. */
:root {
	/* типографика детальной: 48px H1 страницы, 34px заголовок встречи
	   (course-page-spec, раздел 1: «48px H1, 40px заголовки секций,
	   34px заголовки встреч, 18px основной текст, 14px метки») */
	--vine-fz-detail: 48px;
	--vine-fz-lesson: 34px;

	/* disabled-состояние: фон #E5E5E5, рамка и текст #777777 */
	--vine-color-disabled-bg: #E5E5E5;
	--vine-color-disabled: #777777;

	/* поле выбора даты в баннере и в блоке-встрече: 139×40 */
	--vine-field-h: 40px;

	/* чёрная полоса слева у цитаты отзыва */
	--vine-quote-bar: 5px;
}

/* ------------------------------------ ТИПОГРАФИКА ДЕТАЛЬНОЙ СТРАНИЦЫ */
/* Второй селектор нужен, чтобы перебить .vine-main h1 / h2 из базового
   слоя (там 40px и 34px по шкале главной), не трогая сами те правила. */
.vine-title-detail,
.vine-main .vine-title-detail {
	font-size: var(--vine-fz-detail);
	font-weight: 400;
}

/* заголовок встречи в «Модулях курса» (16:202 / 16:203 / 16:217) */
.vine-title-lesson,
.vine-main .vine-title-lesson {
	font-size: var(--vine-fz-lesson);
	font-weight: 400;
}

/* ---------------------------------------------------- DISABLED-КНОПКА */
/* «В корзину» до выбора даты и при нулевом остатке: фон #E5E5E5,
   рамка и текст #777777 (course-page-spec, раздел 6). Модификатор идёт
   после .vine-btn--dark по исходнику, поэтому перекрывает и тёмную кнопку. */
.vine-btn--disabled,
.vine-btn:disabled,
.vine-btn[disabled],
.vine-btn[aria-disabled="true"] {
	background: var(--vine-color-disabled-bg);
	border-color: var(--vine-color-disabled);
	color: var(--vine-color-disabled);
	cursor: default;
	pointer-events: none;
}

.vine-btn--disabled:hover,
.vine-btn--disabled:focus,
.vine-btn:disabled:hover,
.vine-btn:disabled:focus,
.vine-btn[disabled]:hover,
.vine-btn[disabled]:focus,
.vine-btn[aria-disabled="true"]:hover,
.vine-btn[aria-disabled="true"]:focus {
	background: var(--vine-color-disabled-bg);
	border-color: var(--vine-color-disabled);
	color: var(--vine-color-disabled);
	text-decoration: none;
}

/* ------------------------------------------------------- ПСЕВДОССЫЛКА */
/* Вопрос FAQ — не ссылка, а переключатель аккордеона: текст с пунктирным
   подчёркиванием толщиной 7% (course-page-spec, раздел 6). Цвет в макете
   отдельно не задан, поэтому наследуется от контекста; модификатор
   --link нужен там, где псевдоссылка должна быть синей. */
.vine-pseudo-link {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 0.07em;
	text-decoration-skip-ink: none;
}

.vine-pseudo-link:hover,
.vine-pseudo-link:focus {
	color: inherit;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline;
	text-decoration-style: dotted;
}

.vine-pseudo-link--link,
.vine-pseudo-link--link:hover,
.vine-pseudo-link--link:focus {
	color: var(--vine-color-link);
}

/* ---------------------------------------------------- ЦИТАТА ОТЗЫВА */
/* Roboto Italic 18px, чёрная черта слева 5px, отступ до текста 16px
   (course-page-variants, раздел 3.3). Подпись автора — 18px без курсива. */
.vine-quote {
	margin: 0;
	padding-left: var(--vine-gap);
	border-left: var(--vine-quote-bar) solid var(--vine-color-text);
	color: var(--vine-color-text);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	font-style: italic;
	font-weight: 400;
	line-height: normal;
}

.vine-quote__author {
	display: block;
	font-size: var(--vine-fz-text);
	font-style: normal;
	font-weight: 400;
}

/* ------------------------------------------------- ПОЛЕ ВЫБОРА ДАТЫ */
/* Высота 40px, рамка 1px #000, белый фон. Ширина у поля своя в каждой
   секции (в макете 139px) — задаётся в style.css шаблона, не здесь.
   Стрелка — икона icon-arrow-down.svg, её ставит шаблон секции. */
.vine-field-date {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vine-gap-sm);
	height: var(--vine-field-h);
	padding: 0 var(--vine-gap-sm);
	border: 1px solid var(--vine-color-text);
	border-radius: 0;
	background: var(--vine-color-bg);
	color: var(--vine-color-text);
	font-family: var(--vine-font);
	font-size: var(--vine-fz-text);
	font-weight: 400;
	line-height: normal;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.vine-field-date option {
	color: var(--vine-color-text);
}

/* «Мест не осталось»: рамка и текст #777777, фон остаётся белым */
.vine-field-date--disabled,
.vine-field-date:disabled,
.vine-field-date[disabled],
.vine-field-date[aria-disabled="true"] {
	border-color: var(--vine-color-disabled);
	color: var(--vine-color-disabled);
	background: var(--vine-color-bg);
	cursor: default;
}

/* -------------------------------------------- ГОРИЗОНТАЛЬНАЯ ЛЕНТА */
/* Утилита переполняющейся ленты: фотогалерея (1742px в контейнере 1248),
   «Интерфейс курса» (1717px) и кросс-сейл (2048px). Управляющих элементов
   в макете нет — листание только прокруткой, поэтому скроллбар скрыт,
   а обрезанная краем карточка служит указанием на прокрутку. */
.vine-scroller {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--vine-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* старый Edge/IE */
}

/* WebKit/Blink: полностью убираем полосу прокрутки */
.vine-scroller::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.vine-scroller__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
	.vine-scroller {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------- РАЗДЕЛИТЕЛЬ: СОВМЕСТИМОСТЬ */
/* Правило .vine-main hr.vine-divider здесь больше не нужно и удалено:
   конфликт с .vine-main hr снят на месте — селектором :not(.vine-divider).
   Разделитель целиком описан выше классом .vine-divider, а страницам и
   шаблонам компонентов достаточно двух классов, чтобы его переопределить
   (так работают .course-modules__list > .vine-divider и
   .private-detail .private-detail__divider). */

/* ---------------------------- АДАПТИВ ТОЛЬКО ДЛЯ НОВЫХ КЕГЛЕЙ */
/* Мобильных раскладок в макете нет ни для одной секции детальной страницы;
   шаг шкалы взят такой же, как у базовых --vine-fz-h1 / --vine-fz-h2. */
@media (max-width: 1024px) {
	:root {
		--vine-fz-detail: 38px;
		--vine-fz-lesson: 28px;
	}
}

@media (max-width: 640px) {
	:root {
		--vine-fz-detail: 30px;
		--vine-fz-lesson: 22px;
	}
}

/* ------------------------------------------------------------------
   Штатный атрибут hidden должен прятать элемент всегда.
   Браузерное правило [hidden]{display:none} слабее любого правила
   с классом, поэтому .course-modules__group{display:flex} его перебивал
   и на карточке встречи разом были видны все состояния кнопок.
   ------------------------------------------------------------------ */
[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Баннер-заголовок раздела: 1248×88, картинка-заливка и белый заголовок 48px.
   Одинаков у «Полезных материалов» (960:12749) и «Новостей» (960:12762) —
   в макете это один и тот же кадр, поэтому правило живёт в общем слое, а не
   дублируется в двух шаблонах. Затемняющей подложки в макете нет: кадр
   подобран по яркости, чтобы белый текст лёг на тёмную часть фотографии.
   --------------------------------------------------------------------------- */

.vine-page-banner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--vine-container);
	min-height: 88px;
	padding: var(--vine-side);
	background-color: var(--vine-color-btn);
	background-image: url("/upload/figma/materials-banner.png");
	background-repeat: no-repeat;
	background-position: center 75%;
	background-size: cover;
}

.vine-main .vine-page-banner__title {
	margin: 0;
	font-family: var(--vine-font);
	font-size: 48px;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-bg);
}
/* ---------------------------------------------------------------------------
   Страница «Частные мероприятия» (макет 605:11701). Это лендинг, а не
   компонент, поэтому его блоки живут в общем слое. Карточки-форматы,
   галерея и лента дегустаций — в style.css своих шаблонов.
   --------------------------------------------------------------------------- */

.vine-main .vine-private-title {
	margin: 0;
	font-family: var(--vine-font);
	font-size: 48px;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
}

.vine-private-banner {
	width: 100%;
	max-width: var(--vine-container);
}

.vine-private-banner__img {
	display: block;
	width: 100%;
	height: auto;
	/* 1248 × 523,85 из макета */
	aspect-ratio: 405 / 170;
	object-fit: cover;
}

.vine-private-intro {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: var(--vine-container);
	font-size: var(--vine-fz-text);
	line-height: normal;
}

.vine-private-intro__text p {
	margin: 0 0 21px;
}

.vine-private-intro__text p:last-child {
	margin-bottom: 0;
}

.vine-private-intro__text ul {
	margin: 0 0 21px;
	padding-inline-start: 27px;
}

.vine-private-intro__links {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 0;
}

.vine-private-intro__links a {
	font-size: var(--vine-fz-text);
	color: var(--vine-color-link);
	text-decoration: underline;
	text-underline-position: from-font;
}

/* плашка преимуществ 605:11719 — фон rgba(222,227,255,.44), радиус 15 */
.vine-private-benefits {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--vine-container);
	padding: 32px 8px;
	border-radius: 15px;
	background: rgba(222, 227, 255, 0.44);
	text-align: center;
}

.vine-private-benefits p {
	margin: 0;
	font-size: 24px;
	line-height: 38px;
	color: var(--vine-color-text);
}

/* блок заявки 605:11757 */
.vine-private-request {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	max-width: var(--vine-container);
}

.vine-private-request__lead {
	margin: 0;
	font-size: var(--vine-fz-text);
	font-weight: 700;
	line-height: normal;
}

.vine-private-request__btn {
	min-width: 274px;
	min-height: 62px;
	padding: 9px 12px 10px;
	border: 1px solid var(--vine-color-text);
	border-radius: var(--vine-radius-btn);
	background: var(--vine-color-btn);
	font-family: var(--vine-font);
	font-size: 32px;
	line-height: normal;
	color: var(--vine-color-btn-text);
	cursor: pointer;
}

.vine-private-request__note {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
}

.vine-private-request__link {
	font-size: var(--vine-fz-text);
	color: var(--vine-color-link);
	text-decoration: underline;
	text-underline-position: from-font;
}

/* контакты 605:11769…605:11774 */
.vine-private-contacts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	max-width: var(--vine-container);
}

.vine-private-contacts__lead {
	margin: 0;
	font-size: var(--vine-fz-text);
	font-weight: 700;
	line-height: normal;
}

.vine-private-contacts__line {
	margin: 0;
	font-size: var(--vine-fz-text);
	line-height: normal;
}

.vine-private-contacts__line a {
	color: var(--vine-color-link);
	text-decoration: underline;
	text-underline-position: from-font;
}

.vine-private-contacts__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 234px;
	min-height: 40px;
	padding: 9px 12px 10px;
	border: 1px solid var(--vine-color-text);
	border-radius: var(--vine-radius-btn);
	background: var(--vine-color-btn);
	font-size: var(--vine-fz-text);
	line-height: normal;
	color: var(--vine-color-btn-text);
	text-decoration: none;
}

/* способы оплаты 605:11776…605:11781 */
.vine-private-payment {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	max-width: var(--vine-container);
}

.vine-main .vine-private-payment__title {
	margin: 0;
	font-family: var(--vine-font);
	font-size: 48px;
	font-weight: 400;
	line-height: normal;
	color: var(--vine-color-text);
}

@media (max-width: 900px) {
	.vine-main .vine-private-title,
	.vine-main .vine-private-payment__title {
		font-size: var(--vine-fz-h1);
	}

	.vine-private-request__btn {
		min-width: 0;
		width: 100%;
		font-size: var(--vine-fz-h4);
	}
}

/* End */
/* /local/templates/vine/css/header.css?17864800952618 */
/* /local/templates/vine/components/bitrix/menu/vine-top/style.css?17864800981883 */
/* /local/templates/vine/components/bitrix/search.title/vine/style.css?17864801962589 */
/* /local/templates/vine/components/bitrix/sale.basket.basket.line/vine/style.css?1786480107481 */
/* /local/templates/vine/components/bitrix/breadcrumb/vine/style.css?17867171322423 */
/* /local/templates/vine/components/bitrix/menu/vine-footer/style.css?17864797971983 */
/* /local/templates/vine/components/bitrix/news.list/footer-offices/style.css?1786479799980 */
/* /local/templates/vine/components/bitrix/subscribe.edit/vine/style.css?17864798021092 */
/* /local/templates/vine/css/contacts-modal.css?17873146455499 */
/* /local/templates/vine/css/auth-modal.css?17875132357399 */
/* /local/templates/vine/css/consent.css?17875153232987 */
/* /local/templates/vine/template_styles.css?178724600031162 */