/*
Reusable single-item-at-a-time product carousel (template-parts/product/
spotlight-carousel.php) -- one product card per slide, autoplaying and
looping. Uses the standard product card (product-card.css) for the slide
content; this file only owns the carousel chrome (heading, prev/next nav)
around it. Nav button look matches product-carousel.php's own (see
front-page.css) -- same pattern, different track.
*/

.spotlight-carousel__heading {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	margin-block-end: var(--space-4);
}

.spotlight-carousel__heading .icon {
	color: var(--color-primary);
}

.spotlight-carousel__viewport {
	position: relative;
	min-width: 0;
}

.spotlight-carousel__track {
	min-width: 0;
	overflow: hidden;
}

.spotlight-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	background: #fff;
	color: var(--color-ink);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	transition: opacity var(--transition-fast);
}

.spotlight-carousel__nav--prev {
	inset-inline-start: -14px;
}

.spotlight-carousel__nav--next {
	inset-inline-end: -14px;
}

/* rotate(90deg) on a down-chevron points left, rotate(-90deg) points right
   (CSS rotation is clockwise) -- same convention as the other carousels:
   prev (right side) points right, next (left side) points left. */
.spotlight-carousel__nav--prev .icon {
	transform: rotate(-90deg);
}

.spotlight-carousel__nav--next .icon {
	transform: rotate(90deg);
}

.spotlight-carousel__nav.swiper-button-disabled {
	opacity: 0.4;
	pointer-events: none;
}