/**
 * Load More products styles (Shop and category pages)
 *
 * Author:  MJ Bomar
 * Version: 1.0.0
 *
 * Changelog:
 * 1.0.0 (2026-07-18) - First version. Dresses the standard next-page link
 *   under the product grids as the Load More button, wearing the same look
 *   as the filter bar chips (soft beige, rounded corners, light weight,
 *   gentle shadow) so it feels like part of the family. Newly loaded cards
 *   ease in with a small rise and fade; visitors who ask their device for
 *   reduced motion get them instantly instead.
 */

/* Breathing room between the grid and the button. */
.wp-block-query-pagination.srx-load-more {
	margin-top: 30px;
	margin-bottom: 10px;
}

/* The button itself: the next-page link dressed like the filter bar chips. */
.wp-block-query-pagination.srx-load-more a.wp-block-query-pagination-next {
	display: inline-block;
	background-color: #EEEBE6;
	border: 1px solid transparent;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	color: #1f1f1f;
	font-weight: 300;
	padding: 12px 32px;
	text-decoration: none;
	transition: background-color 200ms ease;
}

.wp-block-query-pagination.srx-load-more a.wp-block-query-pagination-next:hover {
	background-color: #e5e1da;
}

.wp-block-query-pagination.srx-load-more a.wp-block-query-pagination-next:focus-visible {
	outline: 2px solid #371D4F;
	outline-offset: 2px;
}

/* While the next page is being fetched: dim the button and hold clicks. */
.wp-block-query-pagination.srx-load-more a[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
	cursor: progress;
}

/* Freshly loaded cards ease in with a small rise and fade. */
.srx-load-more-new {
	animation: srx-load-more-in 300ms ease both;
}

@keyframes srx-load-more-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Visitors who ask their device for less motion get the cards instantly. */
@media (prefers-reduced-motion: reduce) {
	.srx-load-more-new {
		animation: none;
	}
}