/*
 * Product archive Load More button.
 *
 * Moved here from storefront-child/style.css during the stateless extraction
 * (2026-07-31, PR #144). The old rule only centered the button
 * (display:flex + margin-left/right:auto) and carried no top spacing, so once
 * the button sat directly under the last row of product cards it had no
 * separation from a card's own "Select options" / "Add to cart" button.
 * Confirmed on a real mobile device, not just headless capture.
 *
 * First pass used 2em (theme.json's M preset). Verified live at exactly 32px
 * against real product CTAs, but a second real-device check (Ricky,
 * 2026-08-01) still read it as too tight against the button's own visual
 * weight, not a measurement bug. Bumped to L (3em) for clearer breathing
 * room; both are theme.json presets, not arbitrary values.
 */

.e-sm-load-more-products[class][class] {
	display: flex;
	align-items: center;
	margin: 3em auto 0;
}

/*
 * Loading indicator for the infinite-scroll auto-trigger.
 *
 * Reuses the animated shimmer bar validated on the unified search input (see
 * includes/search/assets/search.css, .esm-search-form::after). Same recipe:
 * solid #3C3B6E base with a moving 50%-width highlight gradient layered on top,
 * two-layer background shorthand so only the highlight travels, 0.9s linear
 * infinite, brand glow.
 *
 * Drawn on the WRAPPER rather than the button: the button is hidden the moment
 * the final page lands, and during an auto-triggered load the visitor may not
 * be looking at the button at all. A bar spanning the content width reads as
 * "more products loading below", which is what is happening.
 *
 * The wrapper keeps the button's own 3em top margin working by not introducing
 * any spacing of its own.
 */
.e-sm-load-more-wrap {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -0.75em;
		height: 0.375em;
		border-radius: 0.25em;
		background:
			linear-gradient(
				90deg,
				transparent 0%,
				#6d6bc8 25%,
				#a4a2e8 50%,
				#6d6bc8 75%,
				transparent 100%
			),
			#3C3B6E;
		background-size: 50% 100%, 100% 100%;
		background-repeat: no-repeat, no-repeat;
		background-position: -50% 0, 0 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.15s ease;
		box-shadow: 0 0 0.5em rgba(109, 107, 200, 0.6);
	}

	&.is-loading::after {
		opacity: 1;
		animation: esm-load-more-loading 0.9s linear infinite;
	}
}

@keyframes esm-load-more-loading {
	0%   { background-position: -50% 0, 0 0; }
	100% { background-position: 150% 0, 0 0; }
}

/*
 * The shimmer is the only motion here and it is purely decorative, so honour a
 * reduced-motion preference by holding the bar still rather than removing it
 * (the visitor still gets the "something is loading" signal).
 */
@media (prefers-reduced-motion: reduce) {
	.e-sm-load-more-wrap.is-loading::after {
		animation: none;
		background-position: 50% 0, 0 0;
	}
}