/* AUTO108 v4 — Swiper-карусель товаров (.v4-prod-carousel)
 * Используется в блоках «Популярные товары» и «Новинки» на Главной.
 * Базовые стили Swiper загружаются из /local/templates/auto108_v2/css/swiper.css.
 */

.v4-prod-carousel, .v4-cats-carousel {
	position: relative;
	padding: 8px 0 0;
	margin: 0;
	overflow: visible;        /* чтобы навигация не обрезалась */
}

/* Слайды карусели — это <a class="swiper-slide v1-prod">, наследуют
 * базовые стили карточки из popular_products.css и design.css.
 * Swiper сам выставит width:auto на основе slidesPerView, но
 * принудительно даём min-height чтобы все карточки выровнялись. */
.v4-prod-carousel .swiper-slide.v1-prod,
.v4-cats-carousel .swiper-slide.v1-cat {
	height: auto;            /* swiper-slide иначе ограничивает высоту */
	display: flex;
	flex-direction: column;
}

/* Стрелки навигации */
.v4-carousel-arrow {
	position: absolute;
	top: calc(50% - 36px);    /* немного выше центра, не на цене */
	width: 44px;
	height: 44px;
	background: #fff;
	border: 1px solid var(--c-border, #e2e8f0);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text, #0c1320);
	cursor: pointer;
	z-index: 10;
	box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, .09));
	transition: transform var(--dur-fast, 150ms) var(--ease-out, ease), border-color var(--dur-fast, 150ms) var(--ease-out, ease);
}
.v4-carousel-arrow:hover {
	transform: scale(1.05);
	border-color: var(--c-primary, #238EE3);
	color: var(--c-primary, #238EE3);
}
.v4-carousel-arrow.swiper-button-disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}
.v4-carousel-arrow.swiper-button-prev { left: -22px; }
.v4-carousel-arrow.swiper-button-next { right: -22px; }

/* Swiper по умолчанию рисует свои стрелки через ::after — отменяем */
.v4-prod-carousel .swiper-button-prev::after,
.v4-prod-carousel .swiper-button-next::after,
.v4-cats-carousel .swiper-button-prev::after,
.v4-cats-carousel .swiper-button-next::after {
	content: none;
}

/* Пагинация (точки) — в обычном потоке под swiper-wrapper, чтобы не
 * накладывалась на карточки. Сам контейнер pagination становится
 * position:relative с фиксированной высотой, а внутренний
 * .swiper-pagination-bullets-dynamic остаётся в absolute (как ждёт
 * Swiper: left:50% + translateX(-50%) — это и даёт центрирование). */
.v4-prod-carousel .swiper-pagination,
.v4-cats-carousel .swiper-pagination {
	position: relative;
	margin-top: 20px;
	height: 14px;
	text-align: center;
	line-height: 1;
}
.v4-prod-carousel .swiper-pagination-bullet,
.v4-cats-carousel .swiper-pagination-bullet {
	width: 6px;
	height: 6px;
	background: var(--c-text, #0c1320);
	opacity: .25;
	margin: 0 4px !important;
	transition: opacity var(--dur-fast, 150ms) var(--ease-out, ease), transform var(--dur-fast, 150ms) var(--ease-out, ease);
}
.v4-prod-carousel .swiper-pagination-bullet-active,
.v4-cats-carousel .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--c-primary, #238EE3);
	transform: scale(1.3);
}

/* На мобильной — стрелки прячем, остаётся свайп + пагинация */
@media (max-width: 767px) {
	.v4-carousel-arrow { display: none; }
	.v4-prod-carousel, .v4-cats-carousel { padding-top: 0; }
	.v4-prod-carousel .swiper-pagination,
	.v4-cats-carousel .swiper-pagination { margin-top: 10px; }
}

/* Заголовок секции с действием в правом верхнем углу — у нас используется
 * .sec-head, стили в design.css. Карусель завернём в обёртку для отступов. */
.v4-section {
	margin-top: 48px;
}
.v4-section:first-child {
	margin-top: 0;
}