/* Horizontal snap rows. Moved out of the kit's Additional CSS on 2026-09-06 to sit
   with the module whose buttons drive them (scroller.js).

   Two hooks, deliberately separate:
   - scroll-x         a snap row at every breakpoint
   - scroll-x-mobile  a normal grid that becomes a snap row below 768px

   Either goes on a v4 container (as a global class) or on a Loop Grid widget (as a
   CSS class), which is why every rule is written twice.

   `haus-scroll-x` is the same row for markup Elementor did not build - a shortcode's
   own div, which has no gc- id and so cannot carry a global class. Written as a third
   selector rather than a second implementation: one scroller, three ways in. A row
   like that sets its own card width with --scroll-x-item. */

/* scroll-x. The browser scrolls (finger, trackpad, shift+wheel); the optional
   scroller-prev/next buttons call scrollBy. The row bleeds to the viewport edges -
   edge = max(gutter, (100vw - content max) / 2), because percentages are not usable
   here: scroll-padding resolves them against the scrollport - so neighbours stay
   visible right up to the edge, while the snap line and the first card sit on the
   content edge. One card = the content width on desktop, 85% on mobile. */
.elementor-widget.scroll-x .elementor-loop-container,
.elementor .e-con.scroll-x,
.haus-scroll-x {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: visible;
	align-items: stretch;
	scroll-snap-type: x mandatory;
	--scroll-x-edge: max(var(--space-gutter, 16px), calc((100vw - var(--size-content-max, 1240px)) / 2));
	scroll-padding-inline: var(--scroll-x-edge);
	gap: var(--space-gap-md, 24px);
	margin-inline: calc(-1 * var(--scroll-x-edge));
	padding-inline: var(--scroll-x-edge);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	--scroll-x-item: 100%;
}

.elementor-widget.scroll-x .elementor-loop-container::-webkit-scrollbar,
.elementor .e-con.scroll-x::-webkit-scrollbar,
.haus-scroll-x::-webkit-scrollbar {
	display: none;
}

.elementor-widget.scroll-x .elementor-loop-container > .e-loop-item,
.elementor .e-con.scroll-x > *,
.haus-scroll-x > * {
	flex: 0 0 var(--scroll-x-item);
	min-width: 0;
	scroll-snap-align: start;
}

@media (max-width: 767px) {
	.elementor-widget.scroll-x .elementor-loop-container,
	.elementor .e-con.scroll-x {
		--scroll-x-item: 85%;
	}
}

/* scroll-x-mobile. Cards snap to the gutter (scroll-padding-inline), not the
   viewport edge; the container bleeds edge to edge; the scrollbar is hidden. */
@media (max-width: 767px) {
	.elementor .scroll-x-mobile.e-con,
	.elementor-widget.scroll-x-mobile .elementor-loop-container {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		align-items: stretch;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--space-gutter, 16px);
		gap: var(--space-gap-sm, 16px);
		margin-inline: calc(-1 * var(--space-gutter, 16px));
		padding-inline: var(--space-gutter, 16px);
		width: calc(100% + 2 * var(--space-gutter, 16px));
		max-width: none;
		box-sizing: border-box;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.elementor .scroll-x-mobile.e-con::-webkit-scrollbar,
	.elementor-widget.scroll-x-mobile .elementor-loop-container::-webkit-scrollbar {
		display: none;
	}

	.elementor .scroll-x-mobile.e-con > *,
	.elementor-widget.scroll-x-mobile .elementor-loop-container > .e-loop-item {
		flex: 0 0 80%;
		min-width: 0;
		scroll-snap-align: start;
	}
}