/**
 * "La nostra selezione Rolex" slider.
 *
 * Reuses the theme's `eprt-section carousel-section` Swiper structure
 * (front.css / style.css + Swiper). A dedicated init (selezione-slider.js)
 * drives this slider, so the spacing (20px gap on desktop) is set there.
 * The rules below are scoped to `.rlx-slider-section` only, so other site
 * carousels are untouched.
 */

/* The slider swiper is marked `rlx-slider-swiper` (not `eprt-carousel`), so it
   needs the same flex sizing the theme applies to `.eprt-carousel`. */
.rlx-slider-section .eprt-carousel-shell-inner .swiper.rlx-slider-swiper {
	flex: 1 1 auto;
	overflow: hidden;
}

/* No side margin on the shell for this slider only. */
.rlx-slider-section .eprt-carousel-shell {
	margin: 0;
}

.rlx-slider-section .swiper-slide {
	height: auto;
	display: flex;
}

/* Let the reused catalogue card fill the Swiper slide. */
.rlx-slider-section .swiper-slide .rlx-single-product-item {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* Keep the pagination in normal flow (above the CTA) for this slider only.
   The theme positions `.swiper-pagination` absolutely (bottom: -30px), which
   pulls it out of flow and makes the CTA appear above it. */
.rlx-slider-section .swiper-pagination {
	position: static;
	bottom: auto !important;
	margin-top: 16px !important;
}

/* "Vedi tutto" CTA ------------------------------------------------------- */

.rlx-slider-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
}

.rlx-slider-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	border-radius: 999px;
	background: #127749;
	color: #fff !important;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.rlx-slider-cta:hover,
.rlx-slider-cta:focus {
	opacity: 0.7;
	color: #fff;
}

/* Mobile: remove the theme's 0 7% side padding for this slider only. */
@media screen and ( max-width: 641px ) {
	section.eprt-section.carousel-section.rlx-slider-section {
		padding: 0;
	}
}