/*
 * Reusable, opt-in carousel for the shared product-cluster sections. Added 2026-07-11.
 *
 * Every rule is scoped under .rnf-carousel / .rnf-carousel__track, so a normal .tiers grid
 * (any section NOT flagged as a carousel) is completely unaffected. Enqueued only where a
 * carousel is actually used (the /personal-care/ landing today). Progressive enhancement:
 * the track is a native horizontal scroller with CSS alone, so if portal-carousel.js never
 * runs the cards are still reachable by scroll and swipe. Arrow buttons are injected by the
 * JS; without JS they simply do not appear.
 *
 * @package rootsnfruits
 */

.rnf-carousel {
	position: relative;
}

/*
 * The track: a horizontal scroller holding the section's existing .tier cards. Native
 * overflow scrolling + touch swipe work with no JS. Loads AFTER portal-category.css (declared
 * as a dependency), so these layout rules win over the default .tiers grid for the flagged
 * section only. The cards' own visual styling (.tier) is not touched here.
 */
.rnf-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--rnf-carousel-gap, 1rem);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scroll-padding-inline-start: 0.25rem;
	padding-bottom: 0.5rem;
}

/*
 * Give each card an intrinsic width inside the scroller so flex does not squash it. This sets
 * layout width within the carousel context only; it does not restyle the card (colors,
 * padding, typography are unchanged, and this selector does not match cards outside a carousel).
 */
.rnf-carousel__track > .tier {
	flex: 0 0 auto;
	width: min(80vw, 320px);
	scroll-snap-align: start;
}

/* Arrow buttons (injected by portal-carousel.js). Reuse the site's arrow icon style. */
.rnf-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--rnf-border, rgba(0, 0, 0, 0.12));
	border-radius: 999px;
	background: var(--rnf-surface, #ffffff);
	color: inherit;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.rnf-carousel__arrow--prev {
	left: -8px;
}

.rnf-carousel__arrow--next {
	right: -8px;
}

/* Disabled at the start/end of the track: hidden and non-interactive, but still in the DOM. */
.rnf-carousel__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.rnf-carousel__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Respect reduced-motion: no smooth-scroll animation. */
@media (prefers-reduced-motion: reduce) {
	.rnf-carousel__track {
		scroll-behavior: auto;
	}
}