/**
 * SwiftFind recommendations widget styles.
 *
 * Responsive horizontal carousel with scroll-snap, accessible focus states, and
 * reserved space (fixed item/track height) to avoid layout shift while loading.
 * Skeletons shimmer only when motion is allowed.
 */
.wvn-search-recs {
	margin: 2rem 0;
	--sf-recs-item-w: 180px;
	--sf-recs-item-h: 280px;
}
.wvn-search-recs__title {
	font-size: 1.25rem;
	margin: 0 0 1rem;
}
.wvn-search-recs__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.wvn-search-recs__track {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0 0 0.5rem;
	scroll-snap-type: x mandatory;
	/* Reserve height up-front so hydration causes no layout shift. */
	min-height: var(--sf-recs-item-h);
}
.wvn-search-recs__item {
	flex: 0 0 var(--sf-recs-item-w);
	width: var(--sf-recs-item-w);
	scroll-snap-align: start;
}
.wvn-search-recs__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	padding: 0.75rem;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.wvn-search-recs__link:hover,
.wvn-search-recs__link:focus-visible {
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.1 );
	transform: translateY( -2px );
	outline: none;
}
.wvn-search-recs__link:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}
.wvn-search-recs__img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 8px;
	background: #f3f4f6;
}
.wvn-search-recs__name {
	font-size: 0.92rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wvn-search-recs__price {
	font-weight: 700;
	margin-top: auto;
}
.wvn-search-recs__state {
	color: #6b7280;
	font-size: 0.9rem;
	padding: 0.5rem 0;
}
/* Skeletons */
.wvn-search-recs__item--skeleton .wvn-search-recs__sk {
	height: var(--sf-recs-item-h);
	border-radius: 12px;
	background: linear-gradient( 90deg, #f3f4f6 25%, #e9eaee 37%, #f3f4f6 63% );
	background-size: 400% 100%;
	animation: sf-recs-shimmer 1.4s ease infinite;
}
@keyframes sf-recs-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
@media ( max-width: 600px ) {
	.wvn-search-recs { --sf-recs-item-w: 150px; --sf-recs-item-h: 250px; }
	.wvn-search-recs__img { height: 130px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.wvn-search-recs__link { transition: none; }
	.wvn-search-recs__item--skeleton .wvn-search-recs__sk { animation: none; }
}