/* Слайд-баннер «Главного экрана» (inc/banner-slide.php), макеты «Бронь производства на зиму»:
   ПК 1920×635, телефон 1080×1200. Размеры — в единицах макета: на ПК 1 ед. = 1px (--k),
   на телефоне 1 ед. = 1px при ширине экрана 360 (--m).
   Высоту слайда задаёт сам слайдер (.main_slider .slide: 600px, до 1310px — 460px,
   до 575px — по самому высокому слайду); баннер встаёт в неё по центру. */

.zb {
	--k: 1px;
	--zb-left: calc(var(--k) * 105);
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	overflow: hidden;
	background: #1d1d1f;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
}

.zb *,
.zb *::before,
.zb *::after {
	box-sizing: border-box;
}

/* Затемнение фото слева, под карточкой. */
.zb::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(8, 5, 4, .92) 0%, rgba(8, 5, 4, .78) 25%, rgba(8, 5, 4, .4) 50%, rgba(8, 5, 4, 0) 68%),
		linear-gradient(180deg, rgba(8, 5, 4, .6) 0%, rgba(8, 5, 4, 0) 40%);
	pointer-events: none;
}

.main_slider .slide .zb__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: 50% 80%;
}

.zb__in {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: calc(1710px + var(--zb-left) * 2);
	margin: 0 auto;
	padding: 0 var(--zb-left);
}

.zb__card {
	width: calc(var(--k) * 1047);
	padding: calc(var(--k) * 37.5) calc(var(--k) * 80) calc(var(--k) * 23);
	border-radius: calc(var(--k) * 30);
	background: linear-gradient(130deg, #ee1a40 0%, #ee1a40 62%, #a20a26 100%);
}

.zb__title {
	margin: 0;
	font-weight: 800;
	font-size: calc(var(--k) * 49);
	line-height: calc(var(--k) * 58);
	letter-spacing: calc(var(--k) * .35);
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

.zb__text {
	margin: calc(var(--k) * 18.5) 0 0;
	max-width: calc(var(--k) * 840);
	font-weight: 500;
	font-size: max(13px, calc(var(--k) * 24));
	line-height: 1.3;
	letter-spacing: calc(var(--k) * .5);
	color: #fff;
}

.zb__feat {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: calc(var(--k) * 869);
	margin: calc(var(--k) * 27) 0 0;
	padding: 0;
	list-style: none;
}

.zb__feat li {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zb__feat li::before {
	display: none;
}

.main_slider .slide .zb__ico {
	display: block;
	width: auto;
	max-width: none;
	height: calc(var(--k) * 95);
	margin: 0;
	object-fit: contain;
}

.zb__feat span {
	display: block;
	margin-top: calc(var(--k) * 8);
	font-weight: 800;
	font-size: max(8px, calc(var(--k) * 11));
	line-height: 1.18;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	color: #fff;
}

.zb__btns {
	display: flex;
	gap: calc(var(--k) * 21);
	margin: calc(var(--k) * 21) 0 0 calc(var(--k) * 80);
}

.zb__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--k) * 424);
	height: calc(var(--k) * 65);
	min-height: 44px;
	margin: 0;
	padding: 0 10px calc(var(--k) * 2);
	border: 0;
	border-radius: calc(var(--k) * 12);
	background: #fff;
	font-family: inherit;
	font-weight: 500;
	font-size: max(13px, calc(var(--k) * 24.5));
	line-height: 1.2;
	color: #1d1d1f;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.zb__btn--red {
	color: #ee1a40;
}

.zb__btn:hover,
.zb__btn:focus-visible {
	background: #f9edef;
	color: #1d1d1f;
}

.zb__btn--red:hover,
.zb__btn--red:focus-visible {
	color: #cc2040;
}

.zb__t-m {
	display: none;
}

/* Слайдер 460px: баннер ужимается целиком, по краям место под стрелки. */
@media (max-width: 1310px) {
	.zb {
		--k: min(.84px, calc((100vw - 144px) / 1047));
		--zb-left: max(72px, calc(var(--k) * 105));
	}
}

/* Узкий слайдер: короткий текст кнопки заявки, подписи преимуществ
   переносятся в своих колонках. */
@media (max-width: 767px) {
	.zb__t-pc {
		display: none;
	}

	.zb__t-m {
		display: inline;
	}

	.zb__feat {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 6px;
	}

	.zb__feat span {
		white-space: normal;
	}
}

/* Телефон: макет 1080×1200 при ширине 360. */
@media (max-width: 575px) {
	/* Все слайды — по самому высокому (просьба 16.10.2026): дорожка slick — flex,
	   слайды тянутся по высоте. У товара красная плашка доходит до низа, кнопки
	   встают вниз; у баннера карточка — по центру фото. */
	.main_slider .slick-track {
		display: flex;
	}

	.main_slider .slick-track::before,
	.main_slider .slick-track::after {
		display: none;
	}

	.main_slider .slick-slide {
		float: none;
		flex-shrink: 0;
		height: auto;
	}

	.main_slider .slide:not(.zb-slide) {
		display: flex;
		flex-direction: column;
	}

	.main_slider .slide:not(.zb-slide) > img {
		flex-shrink: 0;
	}

	.main_slider .slide:not(.zb-slide) .container,
	.main_slider .slide:not(.zb-slide) .content {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
	}

	.main_slider .slide:not(.zb-slide) .content .btns {
		margin-top: auto;
	}

	/* В flex отступ последнего пункта списка не схлопывается с отступом списка —
	   иначе под характеристиками стало бы на 8px больше, чем было. */
	.main_slider .slide:not(.zb-slide) .content ul {
		margin-bottom: 8px;
	}

	.main_slider .zb-slide {
		display: flex;
	}

	.zb {
		--m: min(calc(100vw / 360), 1.6px);
		flex: 1 1 auto;
		flex-direction: column;
		justify-content: center;
		height: auto;
		padding: calc(var(--m) * 65) 0 calc(var(--m) * 16);
	}

	.zb::before {
		display: none;
	}

	.main_slider .slide .zb__bg img {
		height: 100%;
		object-position: 51.5% 0;
	}

	.zb__in {
		width: calc(100% - var(--m) * 26.6);
		max-width: calc(var(--m) * 333.4);
		padding: 0;
	}

	.zb__card {
		width: auto;
		padding: calc(var(--m) * 19) calc(var(--m) * 19) calc(var(--m) * 16.6);
		border-radius: calc(var(--m) * 14);
		background: linear-gradient(137deg, #ee1b44 0%, #e21740 45%, #b70e30 100%);
	}

	.zb__title {
		font-size: calc(var(--m) * 24);
		line-height: calc(var(--m) * 26);
		letter-spacing: calc(var(--m) * .3);
		white-space: normal;
	}

	.zb__br {
		display: none;
	}

	.zb__text {
		margin-top: calc(var(--m) * 8.3);
		max-width: none;
		letter-spacing: 0;
		font-size: calc(var(--m) * 12);
		line-height: calc(var(--m) * 16.3);
	}

	.zb__feat {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 0;
		width: auto;
		margin-top: calc(var(--m) * 15.9);
	}

	.main_slider .slide .zb__ico {
		height: calc(var(--m) * 32.4);
	}

	.zb__feat span {
		margin-top: calc(var(--m) * 6.4);
		font-size: calc(var(--m) * 7);
		line-height: calc(var(--m) * 8.3);
		white-space: normal;
	}

	.zb__btns {
		gap: calc(var(--m) * 6.7);
		margin: calc(var(--m) * 14) 0 0;
	}

	.zb__btn {
		position: relative;
		flex: 1 1 0;
		width: auto;
		height: calc(var(--m) * 37.3);
		min-height: 0;
		padding: calc(var(--m) * 1.4) 6px 0;
		border-radius: calc(var(--m) * 7);
		font-size: calc(var(--m) * 11.2);
	}

	/* Зона нажатия не меньше 44px по высоте, вид кнопки как в макете. */
	.zb__btn::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: max(44px, 100%);
		transform: translateY(-50%);
	}

	/* Пока виден баннер, стрелки слайдера — над карточкой, а не поверх заголовка:
	   на своём месте (130px), если фото над карточкой хватает, иначе посередине
	   промежутка (класс и --zb-arrow-top ставит js/banner-slide.js; у стрелок slick
	   сдвиг на половину своей высоты вверх). */
	.main_slider.zb-active.custom_arrows .slick-arrow.slick-prev,
	.main_slider.zb-active.custom_arrows .slick-arrow.slick-next {
		top: var(--zb-arrow-top, calc(min(calc(100vw / 360), 1.6px) * 65 / 2));
	}
}