/* Скелетоны блоков, подгружаемых лениво после начала прокрутки:
   «Другие модели бренда» (brand_slider_placeholder.php) и «Вы смотрели недавно» (viewed_products_placeholder.php) */

.lazy-skeleton {
	pointer-events: none;
	user-select: none;
}

/* swiper ещё не инициализирован — держим слайды в ряд и не даём им сжиматься */
.lazy-skeleton .swiper-wrapper {
	display: flex;
}

.lazy-skeleton .swiper-slide {
	flex-shrink: 0;
}

/* у блока «Вы смотрели» ширину слайда задаёт только swiper — повторяем его slidesPerView/spaceBetween */
.lazy-skeleton--viewed .swiper-slide {
	width: calc((100% - 20px) / 2);
	margin-right: 20px;
}

@media (min-width: 577px) {
	.lazy-skeleton--viewed .swiper-slide {
		width: calc((100% - 40px) / 3);
	}
}

@media (min-width: 992px) {
	.lazy-skeleton--viewed .swiper-slide {
		width: calc((100% - 60px) / 4);
	}
}

@media (min-width: 1350px) {
	.lazy-skeleton--viewed .swiper-slide {
		width: calc((100% - 100px) / 6);
	}
}

.lazy-skeleton__stub,
.lazy-skeleton .product-item-image-slider-slide-container,
.lazy-skeleton .product_item__title,
.lazy-skeleton .product-item-price-old span,
.lazy-skeleton .product-item-price-current span {
	background: #edeef0;
	color: transparent;
	animation: lazy-skeleton-pulse 1.4s ease-in-out infinite;
}

.lazy-skeleton .product_item__title {
	display: block;
	width: 70%;
	margin: 0 auto;
}

/* белый градиент-обрезка текста в скелетоне не нужна */
.lazy-skeleton .product_item__title:after {
	display: none;
}

.lazy-skeleton .product-item-price-old span,
.lazy-skeleton .product-item-price-current span {
	width: 56px;
	text-decoration: none;
}

.lazy-skeleton__stub--brand {
	display: block;
	width: 60%;
	height: 20px;
	margin: 0 auto;
}

@keyframes lazy-skeleton-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: .55;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lazy-skeleton__stub,
	.lazy-skeleton .product-item-image-slider-slide-container,
	.lazy-skeleton .product_item__title,
	.lazy-skeleton .product-item-price-old span,
	.lazy-skeleton .product-item-price-current span {
		animation: none;
	}
}
