/**
 * Shop archive — scroll loading control.
 *
 * Scoped to the product archive so it never touches the tarot reading's own
 * layout, which lives on the home page.
 */

/* The numbered pager stays in the DOM as the no-JavaScript fallback. */
.wp-block-woocommerce-product-collection .td-pager-hidden {
	display: none;
}

.td-load-more-shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 34px 0 12px;
}

.td-load-more {
	appearance: none;
	cursor: pointer;
	padding: 13px 34px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--secondary, #d4af37);
	background: transparent;
	color: var(--wp--preset--color--page-text, #f3e8d3);
	font: inherit;
	font-size: 15px;
	letter-spacing: 0.04em;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.td-load-more:hover,
.td-load-more:focus-visible {
	background: var(--wp--preset--color--secondary, #d4af37);
	color: #1a1408;
	border-color: var(--wp--preset--color--secondary, #d4af37);
}

.td-load-more[disabled] {
	cursor: default;
	opacity: 0.6;
}

.td-load-more-status {
	margin: 0;
	font-size: 13px;
	color: rgba(245, 239, 226, 0.62);
	text-align: center;
}

/*
 * Sits below the control so the observer fires just before the visitor reaches
 * the end of the rows already loaded.
 */
.td-load-more-sentinel {
	width: 100%;
	height: 1px;
}

/* A brief fade on each appended row so growth is visible rather than jarring. */
.wc-block-product-template > li {
	animation: td-row-in 0.32s ease both;
}

@keyframes td-row-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product-template > li {
		animation: none;
	}
}