/*
 * Product archive infinite scroll.
 *
 * Adds the loading / end-of-list states that replace pagination. main.css and
 * pages.css stay byte-identical to the static build; everything lives here.
 */

.product-load {
	margin: 26px 0 4px;
	text-align: center;
	min-height: 22px;
}

.product-load__notice {
	margin: 0;
	font-size: var(--fs-micro, 12px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-ink-3, #6b7276);
}

.product-load__notice[hidden] {
	display: none;
}

/* Dim the grid while a batch is appended so the change is visible. */
#product-grid.is-loading {
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

#product-grid {
	transition: opacity 0.15s ease;
}

.product-load__end {
	margin: 26px 0 4px;
	text-align: center;
	font-size: var(--fs-micro, 12px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-ink-3, #6b7276);
}

.product-load__end[hidden] {
	display: none;
}

/* A quiet three-dot pulse instead of a spinner, matching the site's restraint. */
.product-load__notice[aria-live="polite"]:not([hidden])::after {
	content: "";
	animation: ldb-dots 1.2s steps(4, end) infinite;
}

@keyframes ldb-dots {
	0%   { content: ""; }
	25%  { content: "."; }
	50%  { content: ".."; }
	75%  { content: "..."; }
}

@media (prefers-reduced-motion: reduce) {
	.product-load__notice[aria-live="polite"]:not([hidden])::after {
		animation: none;
		content: "";
	}

	#product-grid,
	#product-grid.is-loading {
		transition: none;
	}
}