/**
 * VYRO Product Discovery & Recommendations Stylesheet
 *
 * Styles for recommendation sections, scroll-snap carousel tracks, recently-viewed shelf,
 * and responsive product discovery cards.
 *
 * @package Vyro
 * @since   1.0.0 (Phase 11)
 */

/* ==========================================================================
   1. RECOMMENDATION SECTIONS
   ========================================================================== */
.vyro-recommendation-section {
	position: relative;
	overflow: hidden;
}

.vyro-upsells-section,
.vyro-cross-sells-section {
	border-top: 1px solid var(--vyro-color-border);
}

/* ==========================================================================
   2. SCROLL-SNAP CAROUSEL
   ========================================================================== */
.vyro-recommendation-carousel {
	position: relative;
	width: 100%;
}

.vyro-recommendation-carousel__track {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.vyro-recommendation-carousel__track::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Blink */
}

.vyro-recommendation-carousel__slide {
	transition: transform var(--vyro-motion-fast);
}

.vyro-carousel-prev,
.vyro-carousel-next {
	cursor: pointer;
	border-radius: var(--vyro-radius-full, 9999px);
	transition: background-color var(--vyro-motion-fast), color var(--vyro-motion-fast), transform var(--vyro-motion-fast);
}

.vyro-carousel-prev:hover,
.vyro-carousel-next:hover {
	background-color: var(--vyro-color-surface-soft);
	color: var(--vyro-color-accent);
}

.vyro-carousel-prev:active,
.vyro-carousel-next:active {
	transform: scale(0.92);
}

/* ==========================================================================
   3. RECENTLY VIEWED SHELF
   ========================================================================== */
.vyro-recently-viewed {
	transition: opacity var(--vyro-motion-normal);
}

/* ==========================================================================
   4. REDUCED MOTION SAFEGUARDS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.vyro-recommendation-carousel__track {
		scroll-behavior: auto !important;
	}
	.vyro-carousel-prev,
	.vyro-carousel-next,
	.vyro-recommendation-carousel__slide {
		transition: none !important;
		transform: none !important;
	}
}