/* 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_tasting/style.css?178708339516815*/
/* =========================================================================
   catalog.element / vine_tasting — детальная страница дегустации
   Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, фрейм 493:12300 (1280×4373):
   баннер 493:12310, описание со слайдером 493:12311, материалы 493:12331,
   ведущие 1674:12275, образцы 493:12343, частное мероприятие 493:12350,
   галерея 493:12358, FAQ 493:12363, оплата 1674:17453.

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

/* Пояснение 1674:17454: кнопка «Записаться на дегустацию» прокручивает страницу
   к верхнему баннеру. Прокрутку делает обычный переход по якорю, плавность —
   отсюда. Правило живёт в стилях шаблона дегустации, то есть включается только
   на её страницах. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.vine-tasting {
	width: 100%;
	/* Контентная колонка макета — 1248px. */
	max-width: var(--vine-container);
	margin-inline: auto;
}

/* H1 493:12305: 1248×112, две строки по 56 при кегле 48; до баннера 16 */
.vine-tasting__title {
	margin: 0 0 var(--vine-gap);
}

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

/* Секции вложенных компонентов рисуют свои заголовки в 40px — на этой
   странице они тоже 48px (1863:10382 «Ведущий дегустации», 493:12363 «Часто
   задаваемые вопросы»). */
.vine-tasting .teachers .teachers__title,
.vine-tasting .faq .faq__title {
	font-size: var(--vine-fz-detail);
}

/* Пояснение 1863:10386: «На дегустациях планируется 1-2, максимум 3 ведущих».
   В макете при двух карточках каждая шириной 616 = (1248 − 16) / 2, при трёх —
   405,33 (скрытый слой 1674:12288). Шаблон teachers-list сделан для страницы
   курса, где карточек всегда три, и жёстко делит ряд на три; здесь разрешаем
   карточкам занимать ряд целиком. */
.vine-tasting .teachers .teachers__item {
	flex: 1 1 calc((100% - 2 * var(--vine-gap)) / 3);
	max-width: 100%;
}

/* Если секция вложенного компонента ничего не вывела, соседние разделители
   встали бы подряд — второй убираем. */
.vine-tasting .vine-divider + .vine-divider {
	display: none;
}

/* ========================================================== 1. ГЛАВНЫЙ БАННЕР */
/* 493:12310, 1248×523,85: фон-фото на всю площадь, поверх снизу полупрозрачная
   белая панель rgba(255,255,255,0.8).
   NB: в макете весь баннер экспортирован как <button>, хотя внутри селект, две
   кнопки и ссылка, — верстаем блоком. */
.vine-tasting-banner {
	position: relative;
	width: 100%;
	max-width: var(--vine-container);
	aspect-ratio: 1248 / 523.8519;
	overflow: hidden;
	scroll-margin-top: var(--vine-gap);
}

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

/* I493:12310;64:1309: панель прижата к низу, padding 8/16/16, шаг строк 8 */
.vine-tasting-banner__panel {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 8px var(--vine-side) var(--vine-side);
	background: var(--vine-color-overlay);
}

.vine-tasting-banner__badge {
	margin: 0 0 var(--vine-gap-sm);
	line-height: 0;
}

/* Бейдж макета — 24px по высоте; общий .vine-badge растёт до 26 от line-height */
.vine-tasting-banner__badge .vine-badge {
	height: 24px;
	align-items: center;
	line-height: 16px;
}

/* I493:12310;125:3907: три колонки по всей ширине панели, space-between */
.vine-tasting-banner__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--vine-gap) 32px;
}

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

.vine-tasting-banner__label,
.vine-tasting-banner__seats,
.vine-tasting-banner__line,
.vine-tasting-banner__contacts {
	margin: 0 0 var(--vine-gap-sm);
	font-size: var(--vine-fz-text);
	font-weight: 400;
	line-height: 21px;
}

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

/* «Выберите время» и «Осталось мест: 12» — Bold */
.vine-tasting-banner__label,
.vine-tasting-banner__seats {
	font-weight: 700;
}

/* «Мест не осталось» — красным */
.vine-tasting-banner__seats.is-sold-out {
	color: #FF0000;
}

/* Поле выбора сеанса. В макете ширина 209px подогнана ровно под строку
   «13 июля 2026 18:00» — держим её нижней границей, но даём полю расти под
   дату другой длины. Системную отрисовку возвращаем: отдельной иконки
   стрелки для селекта в шаблоне нет, а рисовать её нельзя. */
.vine-tasting-banner__select {
	min-width: 209px;
	max-width: 100%;
	-webkit-appearance: auto;
	appearance: auto;
}

/* Адрес и телефон одной строкой, зазор 16 (I493:12310;1615:10195) */
.vine-tasting-banner__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--vine-gap);
}

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

/* Цена 40px Bold, до кнопок 16 (I493:12310;1615:10249) */
.vine-tasting-banner__price {
	margin: 0 0 var(--vine-gap);
	font-size: var(--vine-fz-h1);
	font-weight: 700;
	line-height: 47px;
}

/* I493:12310;1615:10322: «В корзину» + зазор 32 + «В лист ожидания».
   На странице курса те же две кнопки стоят с зазором 64 — расхождение макета,
   здесь воспроизводим значение своей страницы. */
.vine-tasting-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--vine-gap-sm) 32px;
}

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

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

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

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

/* «Подробнее →» под колонками панели (I493:12310;64:1315) */
.vine-tasting-banner__more {
	margin: var(--vine-gap-sm) 0 0;
	line-height: 21px;
}

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

/* ================================================= 2. ОПИСАНИЕ + СЛАЙДЕР */
/* 493:12312: две колонки 616 + 616 с зазором 16 = 1248 */
.vine-tasting-about {
	scroll-margin-top: var(--vine-gap);
}

.vine-tasting-about__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vine-gap);
	align-items: start;
}

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

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

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

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

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

/* 493:12318: панель управления на 16px ниже кадра, высота 29.
   В макете стрелки отцентрованы по колонке 616, а кадр шириной 570 прижат
   влево — пагинация уезжает вправо на 23px. Это небрежность макета,
   центрируем по кадру. */
.vine-tasting-slider__controls {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--vine-gap);
	width: 570px;
	max-width: 100%;
	margin-top: var(--vine-gap);
	height: 29px;
}

/* Стрелки — текстовые символы на плашках #C4C4C4. Разный радиус (4 против 8)
   у «<» и «>» — из макета. */
.vine-tasting-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;
	color: var(--vine-color-text);
}

.vine-tasting-slider__arrow--prev {
	border-radius: 4px;
}

.vine-tasting-slider__arrow--next {
	border-radius: 8px;
}

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

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

/* ============================================================ 3. МАТЕРИАЛЫ */
/* 493:12322: две ссылки в строку с зазором 32 */
.vine-tasting-docs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vine-gap-sm) 32px;
	margin: 0;
}

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

/* =============================================== 4. ОБРАЗЦЫ ДЛЯ ДЕГУСТАЦИИ */
/* 493:12344: рамка 1px #000, padding 8, строки 18px/21 без дополнительных
   отступов — семь строк дают ровно 147 + 16 = 163 по макету. */
.vine-tasting-samples__box {
	border: 1px solid var(--vine-color-text);
	padding: var(--vine-pad-card);
}

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

/* ==================================================== 5. ЧАСТНОЕ МЕРОПРИЯТИЕ */
/* 1670:9989: плашка 1248×142, фон #C4C4C4, радиус 24, padding 24,
   содержимое по центру с шагом 12. */
.vine-tasting-private__plate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	border-radius: 24px;
	background: var(--vine-color-card);
}

.vine-tasting-private__text {
	width: 100%;
	margin: 0;
	font-size: var(--vine-fz-text);
	line-height: 21px;
}

/* Кнопка «Заказать» 102×40 — белая с рамкой (общий .vine-btn) */
.vine-tasting-private__order {
	height: var(--vine-field-h);
	padding: 0 12px;
	line-height: normal;
}

/* ============================================================== 6. ГАЛЕРЕЯ */
/* 493:12358: лента 3×570 + 2×16 = 1742 при контейнере 1248 — переполнение из
   макета воспроизводим прокруткой (утилита .vine-scroller). */
.vine-tasting-gallery__item {
	width: 570px;
}

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

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

/* ====================================================== 7. СПОСОБЫ ОПЛАТЫ */
/* 1674:17453: заголовок 48, логотип 200×42, абзац, «Подробнее →»,
   кнопка «Записаться на дегустацию» 252×40. Содержимое до кнопки лежит
   во включаемой области /include/payment-methods.php (общая со страницей курса). */
.vine-tasting-payment__logo {
	width: 200px;
	height: 42px;
	object-fit: contain;
}

.vine-tasting-payment .vine-course-payment__logo {
	width: 200px;
	height: 42px;
	object-fit: contain;
}

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

.vine-tasting-payment .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;
}

/* Кнопка стоит отдельной строкой под «Подробнее →» с отступом 16 (1674:17450).
   display:flex + width:fit-content, потому что соседняя ссылка — inline-block:
   при inline-flex кнопка встала бы с ней в одну строку. */
/* Двойной селектор: общий .vine-btn задаёт display:inline-flex и подключается
   позже шаблонных стилей — одиночным классом его не перебить. */
.vine-tasting .vine-tasting-payment__signup {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	height: var(--vine-field-h);
	margin-top: var(--vine-gap);
	padding: 0 12px;
	line-height: normal;
	text-decoration: none;
}

/* ---------------------------------------------------------------- АДАПТИВ */
/* Мобильных и планшетных раскладок в макете нет ни для одной секции.
   Ниже — только защита от горизонтальной прокрутки страницы. */
@media (max-width: 1279px) {
	.vine-tasting-banner__cols {
		gap: var(--vine-gap) 32px;
	}
}

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

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

	.vine-tasting-banner__panel {
		position: static;
	}

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

	.vine-tasting-slider__frame,
	.vine-tasting-slider__controls {
		width: 100%;
	}

	.vine-tasting-gallery__item,
	.vine-tasting-gallery__img {
		width: 80vw;
	}

	.vine-tasting-gallery__img {
		height: auto;
		aspect-ratio: 570 / 313;
	}
}

/* Баннер без фонового фото — см. тот же приём на странице курса: без фото
   пропорция оставляет пустое белое поле в пол-экрана. */
.vine-tasting-banner--no-image {
	aspect-ratio: auto;
}

.vine-tasting-banner--no-image .vine-tasting-banner__panel {
	position: static;
	padding-left: 0;
	padding-right: 0;
	background: 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/news.list/certificate/style.css?1786479947967*/
/* Сквозной блок «Сертификат в подарок». Макет Figma 2090:19128 (1248x256) */
.certificate {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 1248px;
	margin: 0 auto;
}

.certificate__item {
	display: flex;
	align-items: center;
	gap: 64px;
	width: 100%;
	min-height: 256px;
	border: 1px solid #000;
	border-radius: 24px;
	background: #FFF;
	overflow: hidden;
}

.certificate__image {
	flex-shrink: 0;
	display: block;
	width: 256px;
	height: 256px;
	border-radius: 24px;
	object-fit: cover;
}

.certificate__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.certificate__title {
	margin: 0;
	font-size: 40px;
	font-weight: 400;
	line-height: normal;
}

.certificate__text {
	font-size: 18px;
	line-height: normal;
}

.certificate__text p {
	margin: 0;
}

.certificate__link {
	align-self: flex-start;
	font-size: 18px;
	color: #0077FF;
	text-decoration: underline;
}

/* End */
/* /local/templates/vine/components/bitrix/catalog/vine/style.min.css?1786716927684 */
/* /local/templates/vine/components/bitrix/catalog.element/vine_tasting/style.css?178708339516815 */
/* /local/templates/vine/components/bitrix/news.list/faq-accordion/style.css?17867178372833 */
/* /local/templates/vine/components/bitrix/news.list/certificate/style.css?1786479947967 */