/**
 * Horizontal product scroller (carousel) — native scroll + arrows + drag.
 * Shared system for any product row the design scrolls sideways (bestsellers,
 * related, upsells). See contracts/product-scroller.md.
 *
 * @package Geras_Custom
 */

.scroller-row {
	position: relative;
}

.scroller {
	display: flex;
	gap: var( --space-26 );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.scroller::-webkit-scrollbar {
	display: none;
}

/* While dragging, snap + smooth fight the pointer — turn both off. */
.scroller.is-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
}

.scroller ul.products {
	display: contents;
}

.scroller ul.products > li {
	flex: 0 0 auto;
	width: 280px;
	scroll-snap-align: start;
}

.scroller-row__nav {
	display: flex;
	justify-content: flex-end;
	gap: var( --space-10 );
	margin-bottom: var( --space-16 );
}

.scroller-row__nav .icon-btn:disabled {
	opacity: .35;
	cursor: default;
}

@media ( max-width: 767px ) {

	.scroller ul.products > li {
		width: 240px;
	}
}