/*
 * Generic horizontal swipe row (see assets/js/swipe-row.js): hidden native
 * scrollbar replaced by a progress bar, previous/next arrows on desktop.
 * Item sizing and look are up to each component (categories, Look do Dia).
 *
 * --amless-gutter: the theme's .mbf-container side padding. Below 576px the
 * container is full width, so the track bleeds to the screen edges (the next
 * item is cut at the edge, inviting a swipe) while the first item stays
 * aligned with the page content.
 */
.amless-swipe-wrap {
	--amless-gutter: 20px;
	position: relative;
}

@media (min-width: 576px) {
	.amless-swipe-wrap {
		--amless-gutter: 0px;
	}
}

.amless-swipe-track {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--amless-gutter);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin-inline: calc(-1 * var(--amless-gutter));
	padding-inline: var(--amless-gutter);
}

.amless-swipe-track::-webkit-scrollbar {
	display: none;
}

.amless-swipe-track > * {
	scroll-snap-align: start;
}

/* ---------- Progress bar ---------- */
.amless-swipe-progress {
	position: relative;
	height: 4px;
	margin-top: 16px;
	border-radius: 2px;
	background: var(--mbf-color-border, #e4e4e7);
	overflow: hidden;
}

.amless-swipe-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 30%;
	height: 100%;
	border-radius: 2px;
	background: var(--mbf-color-primary, #1d1d1f);
	will-change: transform;
}

.amless-swipe-wrap.is-static .amless-swipe-progress,
.amless-swipe-wrap.is-static .amless-swipe-arrow {
	display: none;
}

/* ---------- Arrows (desktop / mouse only) ---------- */
.amless-swipe-arrow {
	display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.amless-swipe-arrow {
		position: absolute;
		top: var(--amless-arrow-top, 40%);
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid var(--mbf-color-border, #d9d7dd);
		border-radius: 50%;
		background: var(--mbf-site-background, #fff);
		color: var(--mbf-color-primary, #1d1d1f);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		transform: translateY(-50%);
		cursor: pointer;
		transition: opacity 0.2s ease;
	}

	.amless-swipe-arrow--prev {
		left: -20px;
	}

	.amless-swipe-arrow--next {
		right: -20px;
	}

	/* Hidden (not just transparent): the theme restyles buttons on hover/focus. */
	.amless-swipe-arrow:disabled {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}
}