/* =================================================================
   File:    inc/elementor/widgets/product-slider/style.css
   Purpose: Scoped CSS for the Product Slider widget.
   ================================================================= */

.liqui-product-slider { position: relative; padding-block: var(--space-3); }
.liqui-product-slider .swiper-wrapper { padding-block: var(--space-2); }

.liqui-product-slider__slide {
	height: auto;          /* match tallest card */
	display: flex;
}
.liqui-product-slider__slide .liqui-card { width: 100%; }

/* Arrows — glass pills outside the wrapper edge */
.liqui-product-slider__arrow {
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--glass-bg-strong);
	border: 1px solid var(--c-line);
	color: var(--c-ink);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter:         blur(10px);
}
.liqui-product-slider__arrow.swiper-button-disabled { opacity: 0.4; pointer-events: none; }
.liqui-product-slider__arrow::after { font-size: 16px; font-weight: 700; }

/* Dots — same style as hero, smaller */
.liqui-product-slider__dots {
	position: static !important;
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: var(--space-4);
}
.liqui-product-slider__dots .swiper-pagination-bullet {
	width: 6px; height: 6px;
	background: var(--c-line);
	opacity: 1;
	transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.liqui-product-slider__dots .swiper-pagination-bullet-active {
	width: 24px;
	background: var(--c-accent);
}