/*
 * iOS Safari can jump when the rail's animated transform, pointer capture and
 * browser momentum gesture all update its horizontal position together. On a
 * touch-first device, keep transforms still and use native momentum scrolling.
 */

/* The theme's original dotted card artwork expands every page by more than a
 * megabyte. This native pattern preserves the same subtle texture at a tiny
 * fraction of the transfer and paint cost. */
.dp-rcard {
	background:
		linear-gradient(to bottom, var(--dpx-bg-fbfbfc, #fbfbfc) 0, var(--dpx-bg-fbfbfc, #fbfbfc) calc(100% - 227px), transparent calc(100% - 227px)) center / 100% 100% no-repeat,
		radial-gradient(circle, var(--dpx-bg-a414676p12, rgba(46, 36, 30, .12)) .7px, transparent .85px) center bottom / 7px 7px repeat,
		linear-gradient(180deg, var(--dpx-bg-fbfbfc, #fbfbfc) 0%, var(--dpx-bg-f3f4f6, #f3f4f6) 100%) !important;
}

@media (hover: none), (pointer: coarse), (max-width: 809px) {
	.dp-rail__track {
		--dp-rail-mobile-side: calc((100vw - 32px - min(268px, calc(100vw - 64px))) / 2);
		overflow-x: auto !important;
		overflow-y: hidden !important;
		touch-action: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scroll-behavior: auto;
		scroll-snap-type: none;
		cursor: auto;
		scrollbar-width: none;
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}

	.dp-rail__track::-webkit-scrollbar {
		display: none;
	}

	.dp-rail__drag {
		display: flex !important;
		width: max-content !important;
		transform: none !important;
		will-change: auto;
	}

	.dp-rail__marq {
		display: flex !important;
		width: max-content !important;
		animation: none !important;
		transform: none !important;
		will-change: auto;
	}

	/* Three identical catalog units create a seamless native-scroll loop. There is
	 * only one 12px inter-card gap at each unit boundary, so recentering never
	 * creates the wide blank seam that caused the earlier mobile jump. */
	.dp-rail__marq > .dp-rail__unit {
		display: flex;
		width: max-content !important;
		gap: 12px !important;
		padding: 0 12px 0 0 !important;
	}

	/* Keep the theme's original compact mobile card size. The next card can peek
	 * in, but autoplay and duplicate units can no longer strand the rail between
	 * cards or expose fragments on the leading edge. */
	.dp-rail__track .dp-rcard {
		flex: 0 0 min(268px, calc(100vw - 64px)) !important;
		width: min(268px, calc(100vw - 64px)) !important;
		max-width: min(268px, calc(100vw - 64px)) !important;
	}

	.dp-rail__track.is-dragging,
	.dp-rail__track.is-dragging * {
		-webkit-user-select: auto;
		user-select: auto;
	}
}