/* Start:/local/templates/vent_template/components/bitrix/catalog.element/element_config/style.css?17872148087619*/
.vnt-page {
  padding: 24px 0 90px;
  --brand: #007DFF;
  --brand-dark: #1e4ad6;
  --line: #e3e6ec;
  --line-strong: #c9cfd9;
  --text: #1c2230;
  --muted: #6c757d;
  --dark-bg: #0e1218;
  --code-green: #A8E879;
  --bg-soft: #f6f7f9;
  color: var(--text);
}
.vnt-lb__close {
    width: 32px;
    height: 32px;
}

.vnt-lb__nav {
    width: 32px;
    height: 32px;
    background-size: 26px;
}
/* ===== Configurator ===== */
.vnt-configurator { margin-bottom: 48px; 	font-family: "Montserrat";
}
.vnt-row {
	position: relative;
}
.vnt-props {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: min-content;
	grid-column-gap: 48px;
	grid-row-gap: 0px;
}
/* Позиции ячеек задаёт script.js: столбцы читаются сверху вниз (сначала левый,
   потом правый); правый столбец начинается с 3-й строки — верх занят «Кодом заказа» */

.vnt-prop { margin-bottom: 28px; }
.vnt-prop-label {
  font-size: 14px;
    font-weight: 500;
    color: #0C0C2D;
    margin-bottom: 20px;
}

.vnt-tiles { 
	display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px 16px;
		width:100%;
}
.vnt-tile {
      padding: 12px 13px 13px;
    border: 1px solid #CDCDD6;
    font-size: 14px;
    font-weight: 500;
    color: #0C0C2D;
    background: #fff;
    cursor: pointer;
		font-family: "Montserrat";
    -webkit-transition: all .3s;
    transition: all .3s;
}
.vnt-tile:hover:not(:disabled) {
  border-color: var(--brand);
  color: #fff;
	background:var(--brand);
}
.vnt-tile.active {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
  box-shadow: 0 1px 2px rgba(41, 98, 255, 0.18);
}
.vnt-tile.disabled, .vnt-tile:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--bg-soft);
  pointer-events: none;
	display: none;
}

.vnt-select {
  width: 100%;
  padding: 14px 44px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 0px;
	font-size: 16px;
	font-family: "Montserrat";
	font-weight: 500;
	color: #0C0C2D;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231c2230' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.vnt-select option {
  color: #333333;
  background-color: #ffffff;
  padding: 12px; /* Note: Ignored by some operating systems */
}
.vnt-select:focus { outline: none; border-color: var(--brand); }
.vnt-select:hover { border-color: var(--line-strong); }

.vnt-input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  font-size: 15px;
  color: var(--text);
  background-color: white;
  font-weight: 500;
  box-sizing: border-box;
}
.vnt-input:focus { outline: none; border-color: var(--brand); }
.vnt-input:hover { border-color: var(--line-strong); }
.vnt-input-hint {
  margin-top: 6px;
  font-size: 12px;
  color: #6a7280;
}

.vnt-code-box-absolute {
    position: absolute;
    top: 0;
    width: calc(50% - 24px);
    right: 0;
}
.vnt-code-box {
		background: #0C0C2D;
    padding: 24px 30px 33px;
    max-width: 100%;
}
.vnt-code-label {
		font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}
.vnt-code {
  font-size: 24px;
    font-weight: 600;
    color: #A8E879;
    color: #A8E879;
    max-width: 95%;
    margin-bottom: 50px;
}
.vnt-actions { display: flex; gap: 24px; }
.vnt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
	text-decoration: underline;
  text-transform: uppercase;
	font-family: "Montserrat";
  transition: all 0.15s;
}
.vnt-btn::before {
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.vnt-btn-copy::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3e%3crect x='9' y='9' width='13' height='13' rx='2'/%3e%3cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3e%3c/svg%3e");
}
.vnt-btn-add::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3e%3cpath d='M9 11l3 3L22 4'/%3e%3cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3e%3c/svg%3e");
}
.vnt-btn:hover:not(:disabled) { color:#A8E879; }
.vnt-btn:disabled { opacity: 0.35; cursor: not-allowed; }


.vnt-warn {
  padding: 20px;
  background: #fff9e6;
  border-left: 4px solid #f5a623;
  margin: 20px 0;
  border-radius: 4px;
}
@media (max-width: 900px) {
  .vnt-row { grid-template-columns: 1fr; gap: 24px; }
	.vnt-code-box-absolute {
			position: fixed;
			bottom: 0;
			width: 100%;
			right: 0;
			left: 0;
			top: initial;
			border-radius: 16px 16px 0 0;
			overflow: hidden;
			z-index: 9;
	}
	.vnt-code-label {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 12px;
	}
	.vnt-code {
			font-size: 16px;
			font-weight: 600;
			color: #A8E879;
			max-width: 95%;
			margin-bottom: 12px;
	}
	.vnt-btn {
			font-size: 12px;
        font-weight: 600;
        border: 1px solid #fff;
        border-radius: 25px;
        text-decoration: none;
        padding: 12px 10px;
        width: 100%;
        /* text-align: center; */
        margin: 0 10%;
        justify-content: center;
	}
	.vnt-btn.vnt-btn-copy {
		display: none;
	}
	.vnt-props {
    display: block;
	}
	.vnt-code-box {
			background: #0C0C2D;
			padding: 24px 25px;
			max-width: 100%;
			text-align: center;
	}
	.vnt-actions {
			justify-content: center;
			align-items: center;
	}
}

/* ==== Чекбоксы конфигуратора (ui=checkbox), стиль как .custom-checkbox из референса клиента ==== */
.vnt-checks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vnt-check {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 500;
    color: #0C0C2D;
}
.vnt-check-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.vnt-check-label {
    display: inline-flex;
    align-items: center;
}
.vnt-check-label::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #CDCDD6;
    border-radius: 0;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}
.vnt-check-input:checked + .vnt-check-label::before {
    border-color: #0b76ef;
    background-color: #0b76ef;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
.vnt-check-input:not(:disabled):not(:checked) + .vnt-check-label:hover::before {
    border-color: #007DFF;
}
.vnt-check-input:not(:disabled):active + .vnt-check-label::before {
    background-color: #007DFF;
    border-color: #007DFF;
}
.vnt-check.disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* End */


/* Start:/local/templates/vent_template/css/gallery-lightbox.css?17872153946880*/
/*
 * Полноэкранный просмотр изображений карточки товара.
 *
 * Подложка светлая: фотографии товаров — PNG с прозрачным фоном, на тёмной
 * подложке светлая графика теряется. Палитра и стрелки повторяют слайдер карточки
 * (#EFFAFF / #D6F2FF, шеврон #0C0C2D), поэтому просмотр выглядит частью сайта.
 */

/* Подсказка, что картинку можно открыть */
.gallery-top .swiper-slide img {
    cursor: zoom-in;
}

.vnt-lb {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity .22s ease;
    -webkit-tap-highlight-color: transparent;
}

.vnt-lb--open {
    display: block;
}

.vnt-lb--visible {
    opacity: 1;
}

.vnt-lb__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #EFFAFF;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/*
 * Слайдер просмотра.
 *
 * Селекторы намеренно двойные (.vnt-lb .vnt-lb__…): у шаблона сайта есть общее
 * правило `.swiper-container { height: 331px }`, оно грузится после этого файла и
 * при одинаковой специфичности перебивало высоту просмотра — картинка обрезалась
 * полосой в 331 px. Двойной селектор выигрывает независимо от порядка подключения.
 */
.vnt-lb .vnt-lb__swiper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    margin: 0;
}

.vnt-lb .vnt-lb__slide {
    width: 100%;
    height: 100%;
    /* картинка шире контейнера — прозрачные поля уходят за край */
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

/*
 * Картинка занимает почти весь экран: коробка тянется на 94vw × 92vh, изображение
 * вписывается в неё с сохранением пропорций. Ограничение в пикселях не даёт
 * растянуть исходник (1180×850) до мыла на очень больших мониторах.
 */
.vnt-lb .vnt-lb__zoom {
    width: 90vw;
    height: 88vh;
    max-width: 1600px;
    max-height: 1050px;
    margin: 0 auto;
}

.vnt-lb .vnt-lb__zoom > img {
    position: relative;   /* left/top сдвигают кадр к центру товара */
    /* .swiper-zoom-container — флекс-контейнер: без этого он ужал бы кадр обратно */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    cursor: zoom-in;
}

.vnt-lb .swiper-slide-zoomed .vnt-lb__zoom > img {
    cursor: move;
    cursor: grab;
}

/* Кнопки: белые кружки со стрелкой сайта */
.vnt-lb__close,
.vnt-lb__nav {
    position: absolute;
    z-index: 2;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    box-shadow: 0 4px 18px rgba(12, 12, 45, .12);
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.vnt-lb__close:hover,
.vnt-lb__nav:hover {
    background-color: #D6F2FF;
    box-shadow: 0 6px 22px rgba(12, 12, 45, .18);
}

.vnt-lb__close:focus-visible,
.vnt-lb__nav:focus-visible {
    outline: none;
    outline-offset: 3px;
}

.vnt-lb__close {
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 4L16 16M16 4L4 16' stroke='%230C0C2D' stroke-width='1.5'/%3E%3C/svg%3E");
}

.vnt-lb__nav {
    top: 50%;
    width: 36px;
    height: 36px;
		background-size: 24px;
    margin-top: -28px;
    /* тот же шеврон, что у стрелок слайдера карточки */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30' fill='none'%3E%3Cpath d='M27.5 21L15.5 9L3.5 21' stroke='%230C0C2D' stroke-width='1.5'/%3E%3C/svg%3E");
}

.vnt-lb__nav--prev {
    left: 24px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.vnt-lb__nav--next {
    right: 24px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.vnt-lb__nav.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

/* Одно изображение — листать нечего */
.vnt-lb--single .vnt-lb__nav,
.vnt-lb--single .vnt-lb__counter {
    display: none;
}

.vnt-lb__counter {
    position: absolute;
    top: 30px;
    left: 24px;
    z-index: 2;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 4px 18px rgba(12, 12, 45, .1);
    color: #0C0C2D;
    font-size: 15px;
    line-height: 1.2;
}

.vnt-lb__current {
    font-weight: 600;
}

/* Страница под просмотром не должна прокручиваться */
body.vnt-lb-lock {
    overflow: hidden;
}

@media (max-width: 1024px) {
    .vnt-lb__nav {
        width: 44px;
        height: 44px;
        margin-top: -22px;
        background-size: 24px 24px;
    }

    .vnt-lb__nav--prev {
        left: 10px;
    }

    .vnt-lb__nav--next {
        right: 10px;
    }

    .vnt-lb__close {
        top: 12px;
        right: 12px;
        width: 42px;
        height: 42px;
        background-size: 18px 18px;
    }

    .vnt-lb__counter {
        top: 16px;
        left: 12px;
        padding: 6px 12px;
        font-size: 13px;
    }

    .vnt-lb .vnt-lb__zoom {
        width: 96vw;
        height: 74vh;
    }
}

@media (max-width: 640px) {
    .vnt-lb .vnt-lb__zoom {
        height: 68vh;
    }
}

/* Пользователь просил не анимировать интерфейс — уважаем настройку системы */
@media (prefers-reduced-motion: reduce) {
    .vnt-lb,
    .vnt-lb__close,
    .vnt-lb__nav {
        transition: none;
    }
}

/* End */
/* /local/templates/vent_template/components/bitrix/catalog.element/element_config/style.css?17872148087619 */
/* /local/templates/vent_template/css/gallery-lightbox.css?17872153946880 */