/* ------------------------------------------------------------------ *
 * Переработанный первый экран главной (ТЗ «Переработка первого экрана»).
 * Макет: «Редизайн ПЭ главной ПК/МУ. Вариант 1» (Figma), баннер 1600x800.
 * ------------------------------------------------------------------ */

/* Отступ между шапкой и баннером (п.6 и п.17 ТЗ).
   .wrapper1.front_page баннеру не предок, поэтому селектор с body:
   на МУ тема задаёт .wraps > .wrapper_inner.front { padding-top: 24px }. */
body .wraps > .wrapper_inner.front {
	padding-top: 0;
}

/* --- Блок баннера: во всю ширину экрана, но не шире 1600px -------- */
:root {
	--fs-vw: calc(100vw - var(--fs-sbw, 0px));
}
.fs-banner {
	width: var(--fs-vw);
	max-width: var(--fs-vw);
	margin: 0 calc((100% - var(--fs-vw)) / 2) 30px;
	padding: 0;
	overflow: hidden;
}
.fs-banner .flexslider {
	width: 100%;
	max-width: 1600px;
	height: auto;
	margin: 0 auto;
	position: relative;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.fs-banner .flexslider .slides > li,
.fs-banner .flexslider .slides > li td:not(.bg) {
	height: auto;
}

/* --- Слайд: пропорция 1600x800 ----------------------------------- */
/* Селектор с запасом по специфичности: тема задаёт body .flexslider li { padding: 0 }.
   Высота считается от ширины окна, а не в процентах: процент здесь разрешался бы
   относительно ширины ul.slides, которую flexslider делает кратной числу слайдов. */
body .fs-banner .flexslider .slides > li.fs-banner__slide {
	position: relative;
	display: block;
	width: 100%;
	height: calc(var(--fs-vw, 100vw) / 2); /* 800 / 1600 */
	max-height: 800px;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
.fs-banner__slide.wurl {
	cursor: pointer;
}
.fs-banner__slide > .target {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
}

/* --- Подложка: видео или изображение ----------------------------- */
.fs-banner__media {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
.fs-banner__video,
.fs-banner__img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	object-position: center center;
}
.fs-banner__video {
	object-fit: cover;
}
/* Изображение баннера не растягивается и не обрезается: меньше контейнера —
   выводится в исходном размере по центру, больше — вписывается целиком (п.18 ТЗ). */
.fs-banner__img {
	object-fit: scale-down;
}
.fs-banner__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0.5;
}

/* --- Контентная область ------------------------------------------ */
.fs-banner__inner {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}
.fs-banner__content {
	position: absolute;
	top: 30%; /* 240 / 800 */
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	max-width: 1440px;
	text-align: center;
	font-family: "IBM Plex Sans", "Open Sans", Arial, sans-serif;
	color: #ffffff;
}
.fs-banner__title {
	margin: 0 0 8.3333%; /* 120 / 1440 */
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: #ffffff;
}
.fs-banner__subtitles {
	margin: 0 0 3.4722%; /* 50 / 1440 */
}
.fs-banner__subtitle {
	display: block;
	text-transform: uppercase;
	color: #ffffff;
}
.fs-banner__subtitle--first {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}
.fs-banner__subtitle--second {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
}

/* --- Кнопка ------------------------------------------------------- */
.fs-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 300px;
	min-height: 42px;
	padding: 10px 40px;
	border-radius: 10px;
	background: #ffffff;
	color: #153360;
	font-family: "IBM Plex Sans", "Open Sans", Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.fs-banner__btn:hover,
.fs-banner__btn:focus {
	background: #153360;
	color: #ffffff;
	text-decoration: none;
}
.fs-banner__btn-icon {
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	color: inherit;
}
.fs-banner__btn-icon svg {
	display: block;
	width: 8px;
	height: 10px;
}

/* --- Дотсы -------------------------------------------------------- */
body .fs-banner .flexslider .flex-control-nav {
	position: absolute;
	right: 0;
	top: auto; /* тема задаёт .flexslider .flex-control-nav { top: -41px } */
	bottom: 7.5%; /* 60 / 800 */
	left: 0;
	height: auto;
	z-index: 4;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
	text-align: center;
	opacity: 1;
}
body .fs-banner .flexslider .flex-control-nav li {
	display: inline-block;
	margin: 0 5px; /* расстояние между дотсами 10px */
	padding: 0;
	vertical-align: middle;
}
body .fs-banner .flexslider .flex-control-nav li a,
body .fs-banner .flexslider .flex-control-paging li a {
	box-sizing: border-box;
	display: block;
	width: 15px;
	height: 15px;
	padding: 0;
	border: 3px solid #ffffff;
	border-radius: 50%;
	background: none;
	background-image: none;
	box-shadow: none;
	cursor: pointer;
	font-size: 0;
	transition: background-color 0.2s ease;
}
body .fs-banner .flexslider .flex-control-nav li a:hover,
body .fs-banner .flexslider .flex-control-paging li a:hover,
body .fs-banner .flexslider .flex-control-paging li a.flex-active {
	background: #ffffff;
	background-image: none;
}

/* Перелистывание перетаскиванием мышью (п.14 ТЗ) */
.fs-banner .flexslider {
	cursor: grab;
}
.fs-banner .flexslider.fs-banner--dragging {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}
.fs-banner .flexslider.fs-banner--dragging .fs-banner__slide > .target {
	pointer-events: none;
}

/* На светлых слайдах (старые баннеры картинками) дотсы тёмные */
body .fs-banner .flexslider .flex-control-nav.fs-nav-dark li a {
	border-color: #153360;
}
body .fs-banner .flexslider .flex-control-nav.fs-nav-dark li a:hover,
body .fs-banner .flexslider .flex-control-nav.fs-nav-dark li a.flex-active {
	background: #153360;
}

/* Стрелки переключения слайдов не выводятся */
.fs-banner .flex-direction-nav {
	display: none;
}

/* --- Планшеты ----------------------------------------------------- */
@media (max-width: 1439px) {
	.fs-banner__title { font-size: 36px; }
	.fs-banner__btn { min-width: 280px; }
}
@media (max-width: 1199px) {
	.fs-banner__title { font-size: 30px; }
	.fs-banner__subtitle--first { font-size: 15px; }
	.fs-banner__btn { min-width: 260px; min-height: 40px; }
	body .fs-banner .flexslider .flex-control-nav li a,
	body .fs-banner .flexslider .flex-control-paging li a { width: 12px; height: 12px; }
}
@media (max-width: 991px) {
	.fs-banner__title { font-size: 26px; }
	.fs-banner__subtitle--first { font-size: 14px; }
	.fs-banner__btn { min-width: 240px; }
}

/* --- Мобильная версия (макет «Редизайн ПЭ главной МУ. Вариант 1») -- */
@media (max-width: 767px) {
	.fs-banner {
		margin-bottom: 20px;
	}
	body .fs-banner .flexslider .slides > li.fs-banner__slide {
		height: calc(var(--fs-vw, 100vw) * 608 / 768);
		max-height: 608px;
	}
	.fs-banner__content {
		top: 10.5%;   /* 30 / 285 */
		bottom: 21%;  /* 60 / 285 */
		left: 15px;
		right: 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: auto;
		max-width: none;
		transform: none;
		text-align: left;
	}
	.fs-banner__title {
		margin: 0;
		font-size: 26px;
	}
	/* В мобильной версии выводятся только заголовок и кнопка */
	.fs-banner__subtitles {
		display: none;
	}
	.fs-banner__bottom {
		width: 100%;
	}
	.fs-banner__btn {
		display: flex;
		width: 100%;
		min-width: 0;
		min-height: 40px;
		padding: 10px 20px;
	}
	/* Дотсы на мобильных выводятся так же, как на ПК (п.11 ТЗ):
	   в теме блок скрыт, поэтому нужен !important. */
	body .fs-banner .flexslider .flex-control-nav {
		display: block !important;
		bottom: 7%; /* 20 / 285 */
	}
	body .fs-banner .flexslider .flex-control-nav li a,
	body .fs-banner .flexslider .flex-control-paging li a {
		width: 12px;
		height: 12px;
	}
}

/* ------------------------------------------------------------------ *
 * Блок «Действуют специальные условия для оптовых клиентов» (п.9 ТЗ):
 * ширина блока 1440px, контейнер «Бесплатная доставка» — 240px.
 * ------------------------------------------------------------------ */
.fs-tizers,
.fs-tizers__title {
	--fs-tw: min(1440px, calc(100vw - var(--fs-sbw, 0px) - 30px));
	box-sizing: border-box;
	width: var(--fs-tw);
	max-width: none;
	margin-left: calc((100% - var(--fs-tw)) / 2);
	margin-right: calc((100% - var(--fs-tw)) / 2);
}
.fs-tizers__title {
	text-align: left;
}
.fs-tizers .fs-tizers__row {
	width: 100%;
}
/* Верхний и нижний отступы блока — 30px (п.15 ТЗ). */
body .fs-tizers {
	padding-top: 30px;
	padding-bottom: 30px;
}
/* «Бесплатная доставка при заказе:» — без переноса строки (п.16 ТЗ). */
.fs-tizers .fs-tizers__nowrap {
	white-space: nowrap;
}