@charset "UTF-8";
/* =====================================================================
   Баннер-слайдер на главной (.pm-hero) — шаблон shop/themes/balance/new.slider.html,
   подключается из него же с версией ?v=… (поднимайте её при правках этого файла).
   Самодостаточный блок: не использует legacy-классы .main_slider из shop.css
   (bxSlider), поэтому никаких !important. Кроссфейд и точки — чистый JS в шаблоне.

   Пропорции (место резервируется до загрузки картинок и JS — без CLS):
     >= 768px  — баннер целиком, 3:1 (оба баннера — 2172×724);
     480–767px — 2:1, кадр от левого края (логотипы и текст баннеров слева);
     < 480px   — 3:2, кадр от левого края, чтобы текст оставался читаемым.
   ===================================================================== */
/* Ширину и боковые поля задаёт класс темы .b-row (как у остальных блоков главной):
   1240 px, от 1400 px экрана — 1400 px, 1024 px на планшетах. */
.pm-hero {
	position: relative;
}
.pm-hero__track {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 1;
	background: #f3f1ee;
}
.pm-hero__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .9s ease-in-out;
}
/* Новый слайд проявляется поверх предыдущего, а предыдущий остаётся видимым
   под ним до конца анимации — поэтому между слайдами нет «провала» в фон. */
.pm-hero__slide.is-active {
	opacity: 1;
	z-index: 2;
}
.pm-hero__slide.is-prev {
	opacity: 1;
	z-index: 1;
	transition: none;
}
.pm-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0 50%;
}

/* Точки под баннером: полоса 44px есть в разметке сразу (без CLS), а видимой
   становится, когда JS добавит .is-ready. Кнопкам в шаблоне дан класс default-btn —
   штатное исключение темы из стилей button (иначе они красятся в цвет темы). */
.pm-hero__dots {
	display: flex;
	justify-content: center;
	height: 44px;
	visibility: hidden;
}
.pm-hero.is-ready .pm-hero__dots {
	visibility: visible;
}
.pm-hero__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.pm-hero__dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .28);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
	transition: background-color .3s, transform .3s;
}
.pm-hero__dot[aria-current="true"]::before {
	background: #3f9b3a;
	transform: scale(1.25);
}
.pm-hero__dot:focus {
	outline: none;
}
.pm-hero__dot:focus-visible {
	outline: 2px solid #3f9b3a;
	outline-offset: -8px;
}

@media (max-width: 767px) {
	.pm-hero__track {
		aspect-ratio: 2 / 1;
	}
}
@media (max-width: 479px) {
	.pm-hero__track {
		aspect-ratio: 3 / 2;
	}
}

/* Старые браузеры без aspect-ratio (Safari < 15): резерв высоты через padding-top */
@supports not (aspect-ratio: 1 / 1) {
	.pm-hero__track {
		height: 0;
		padding-top: 33.3334%;
	}
	@media (max-width: 767px) {
		.pm-hero__track { padding-top: 50%; }
	}
	@media (max-width: 479px) {
		.pm-hero__track { padding-top: 66.6667%; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.pm-hero__slide,
	.pm-hero__dot::before {
		transition: none;
	}
}