/* The scroller is the collection's own <ul>; the rail only reshapes it. Every
   selector is anchored at .gsl-rail, so none of this leaks into the grid the
   same collection markup renders elsewhere.

   `!important` against WooCommerce's responsive grid: the product template
   ships `display: grid` with generated column counts at equal specificity, and
   which rule wins must not depend on enqueue order (see the theme's note on
   why @layer is off the table). */
.gsl-rail {
	position: relative;
}

.gsl-rail ul {
	/* The scroller is the containing block of everything absolutely placed in
	   the cards — WooCommerce's .screen-reader-text spans among them. Placed
	   against .gsl-rail they sat out past the scrolled-away cards and made the
	   desktop home 3 369 px wide (QA run, 16.10.2026). */
	position: relative;
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	/* Breathing room so a snapped card's hover shadow is not clipped. */
	padding-block-end: var(--wp--preset--spacing--20);
}

.gsl-rail ul::-webkit-scrollbar {
	display: none;
}

/* Four and a bit cards on desktop: the cut card is what says «scroll me»
   before any arrow is drawn. */
.gsl-rail ul > li {
	flex: 0 0 clamp(160px, 22.5%, 300px);
	scroll-snap-align: start;
}

@media (max-width: 781px) {
	.gsl-rail ul > li {
		flex-basis: clamp(150px, 42vw, 260px);
	}
}

/* Narrow desktops (owner, 15.10.2026): at 853 px the card was 181 px and the
   name ran out of its three lines; three and a bit cards a screen give it
   room and keep the peek that says «scroll me». */
@media (min-width: 782px) and (max-width: 1199px) {
	.gsl-rail ul > li {
		flex-basis: clamp(200px, 30%, 300px);
	}
}

.gsl-rail__btn {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand-text);
	cursor: pointer;
	box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
	transition: border-color 0.12s, color 0.12s;
}

.gsl-rail__btn:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.gsl-rail__btn[hidden] {
	display: none;
}

.gsl-rail__btn--prev {
	left: calc(-1 * var(--wp--preset--spacing--20));
}

.gsl-rail__btn--next {
	right: calc(-1 * var(--wp--preset--spacing--20));
}


/* Owner (13.08): the right edge showed a random scrap of the third card —
   half a sticker, a cut counter — which read as an artifact, not as an
   invitation to swipe. Phones: the rail bleeds edge to edge (same shout-back
   against core's constrained margins as the hero) and the card width comes
   from the viewport, so exactly two whole cards fit plus a 24px peek of the
   next. 24px of a card is picture only — nothing legible gets cut. */
@media (max-width: 640px) {
	.gsl-rail {
		left: 50%;
		width: 100vw;
		max-width: none !important;
		margin-left: -50vw !important;
		margin-right: 0 !important;
	}

	.gsl-rail ul {
		padding-inline: var(--wp--custom--gutter);
		scroll-padding-inline-start: var(--wp--custom--gutter);
	}

	.gsl-rail ul > li {
		flex-basis: calc((100vw - var(--wp--custom--gutter) - 2 * var(--wp--preset--spacing--20) - 24px) / 2);
	}
}

/* The 24px peek is an invitation, but it still slices letters vertically —
   SKU, price, a button edge. A fade into the page background dissolves the
   cut, so the eye reads «continues» instead of «broken». Sits above the
   cards, never above the arrows (z-index 3). */
@media (max-width: 640px) {
	.gsl-rail::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: var(--wp--preset--spacing--20);
		right: 0;
		width: 34px;
		background: linear-gradient(to right, transparent, var(--wp--preset--color--surface) 85%);
		pointer-events: none;
		z-index: 2;
	}
}
/* Phones: no snapping on this rail (09.10.2026). Safari on iOS ends every swipe on the
   next card as soon as a snap type is set, even `proximity` — no momentum, the strip
   «brakes» (WebKit bug 243582, confirmed by WebKit in 04.2026). Chrome on Android keeps
   the momentum and retargets to a card edge near the natural stop, so it loses nothing.
   Material 3 ships its uncontained carousel of equal cards without snapping for the same
   reason. Snapping stays where there is a mouse: the arrows scroll by whole cards there. */
@media (hover: none) and (pointer: coarse) {
	.gsl-rail ul {
		scroll-snap-type: none;
	}
}