/**
 * RAI25 Shop — zone (a) shop / product archive.
 *
 * !important on color/background/border only, same reasoning as base.css:
 * WooCommerce's native classes here (.woocommerce-ordering, .woocommerce-
 * pagination...) still get styled by Oxygen's site-wide "Woo Global
 * Styler" through a higher-specificity selector, even without the old
 * "Products List" element on the page.
 */

.rai-shop ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--rai-space-4);
	list-style: none;
	margin: 0 0 var(--rai-space-5);
	padding: 0;
}

.rai-shop ul.products .rai-shop__card {
	display: flex;
	flex-direction: column;
	background: var(--rai-color-surface) !important;
	border: 1px solid var(--rai-color-border) !important;
	border-radius: var(--rai-radius-lg);
	box-shadow: var(--rai-shadow-card);
	padding: var(--rai-space-3);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
}

.rai-shop ul.products .rai-shop__card:hover {
	box-shadow: var(--rai-shadow-card-hover);
	transform: translateY(-2px);
}

.rai-shop .woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	gap: var(--rai-space-2);
	text-decoration: none;
	color: inherit;
}

.rai-shop .woocommerce-loop-product__title {
	font-size: var(--rai-font-size-base);
	font-weight: 600;
	margin: 0;
}

.rai-shop .star-rating {
	font-size: var(--rai-font-size-sm);
}

.rai-shop .onsale {
	position: absolute;
	top: var(--rai-space-3);
	left: var(--rai-space-3);
}

.rai-shop .woocommerce-result-count,
.rai-shop .woocommerce-ordering {
	font-size: var(--rai-font-size-sm);
	color: var(--rai-color-text-muted);
}

.rai-shop .woocommerce-ordering select {
	border-radius: var(--rai-radius-sm);
	border: 1px solid var(--rai-color-border) !important;
	padding: var(--rai-space-1) var(--rai-space-2);
}

.rai-shop nav.woocommerce-pagination ul {
	display: flex;
	gap: var(--rai-space-1);
	list-style: none;
	padding: 0;
	margin: var(--rai-space-4) 0 0;
}

.rai-shop nav.woocommerce-pagination ul li a,
.rai-shop nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--rai-radius-sm);
	border: 1px solid var(--rai-color-border) !important;
	text-decoration: none;
	color: var(--rai-color-text) !important;
}

.rai-shop nav.woocommerce-pagination ul li span.current {
	background: var(--rai-color-primary) !important;
	border-color: var(--rai-color-primary) !important;
	color: #fff !important;
}