/**
 * Simple Product Sorting — styles.
 *
 * @package Simple_Product_Sorting
 */

:root {
	--sps-accent: #f2907f; /* Peachy Keen coral — change to match your brand. */
	--sps-card-radius: 14px;
	--sps-card-shadow: 0 6px 20px rgba( 0, 0, 0, 0.08 );
	--sps-card-shadow-hover: 0 14px 34px rgba( 0, 0, 0, 0.16 );
}

/* ======================================================================
 * Radio sort control
 * ==================================================================== */
.sps-sort {
	display: block;
	margin: 0 0 1.5em;
}
.sps-sort-heading {
	display: block;
	font-weight: 700;
	margin: 0 0 0.6em;
}
.sps-sort-options {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.sps-sort-option {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
	line-height: 1.3;
}
.sps-sort-option input[type="radio"] {
	margin: 0;
	cursor: pointer;
}
.sps-sort.sps-js .sps-sort-apply {
	display: none;
}

/* ======================================================================
 * Product grid — equal-height cards, everything centred
 * ==================================================================== */
.peachy-products-wrap ul.products.peachy-products {
	display: grid;
	grid-template-columns: repeat( var( --peachy-cols, 4 ), minmax( 0, 1fr ) );
	grid-auto-rows: 1fr;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card */
.peachy-products-wrap ul.products.peachy-products > li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	background: #fff;
	border: 0;
	border-radius: var( --sps-card-radius );
	box-shadow: var( --sps-card-shadow );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: center !important;
	padding: 0 0 20px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.peachy-products-wrap ul.products.peachy-products > li.product:hover {
	box-shadow: var( --sps-card-shadow-hover );
	transform: translateY( -4px );
}

/* Flatten the WooCommerce link wrapper so image/title/price sit in the card
 * flex column and line up across every card. */
.peachy-products-wrap ul.products.peachy-products > li.product > a.woocommerce-LoopProduct-link,
.peachy-products-wrap ul.products.peachy-products > li.product > a.woocommerce-loop-product__link {
	display: contents;
	color: inherit;
	text-decoration: none;
}

/* Image — uniform square crop so rows align perfectly. */
.peachy-products-wrap ul.products.peachy-products > li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	margin: 0 0 16px;
	border-radius: 0;
}

/* Title — centred, reserves two lines so the price sits at the same spot. */
.peachy-products-wrap ul.products.peachy-products > li.product .woocommerce-loop-product__title,
.peachy-products-wrap ul.products.peachy-products > li.product h2,
.peachy-products-wrap ul.products.peachy-products > li.product h3 {
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.3;
	padding: 0 16px;
	margin: 0 0 8px;
	min-height: 2.6em;
	width: 100%;
	text-align: center !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Price — force centred (themes often left-align this). */
.peachy-products-wrap ul.products.peachy-products > li.product .price,
.peachy-products-wrap ul.products.peachy-products > li.product .price * {
	text-align: center !important;
}
.peachy-products-wrap ul.products.peachy-products > li.product .price {
	display: block;
	width: 100%;
	font-weight: 700;
	font-size: 1.05em;
	margin: 0 0 14px;
	padding: 0 16px;
	color: inherit;
}

/* Add to cart / Read more — centred, pushed to the bottom, shown on hover. */
.peachy-products-wrap ul.products.peachy-products > li.product .button,
.peachy-products-wrap ul.products.peachy-products > li.product .added_to_cart {
	margin: auto 16px 0 !important;
	align-self: center;
	float: none !important;
}
@media ( hover: hover ) {
	.peachy-products-wrap ul.products.peachy-products > li.product .button,
	.peachy-products-wrap ul.products.peachy-products > li.product .added_to_cart {
		opacity: 0;
		transform: translateY( 8px );
		transition: opacity 0.2s ease, transform 0.2s ease;
		pointer-events: none;
	}
	.peachy-products-wrap ul.products.peachy-products > li.product:hover .button,
	.peachy-products-wrap ul.products.peachy-products > li.product:hover .added_to_cart {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* Loading state during AJAX. */
.peachy-products-wrap ul.products.sps-loading {
	position: relative;
	opacity: 0.5;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.peachy-products-wrap ul.products.sps-loading::after {
	content: "";
	position: absolute;
	top: 60px;
	left: 50%;
	width: 36px;
	height: 36px;
	margin-left: -18px;
	border: 3px solid rgba( 0, 0, 0, 0.15 );
	border-top-color: var( --sps-accent );
	border-radius: 50%;
	animation: sps-spin 0.7s linear infinite;
}
@keyframes sps-spin {
	to { transform: rotate( 360deg ); }
}

.peachy-no-products {
	margin: 1em 0;
	text-align: center;
}

/* ======================================================================
 * Pagination — force horizontal, centred, circular, no borders.
 * !important is used to override the theme's own pagination CSS.
 * ==================================================================== */
.sps-pagination {
	width: 100% !important;
	float: none !important;
	clear: both !important;
	text-align: center !important;
	margin: 2em 0 0 !important;
}
.sps-pagination ul.page-numbers {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 10px !important;
	list-style: none !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	width: auto !important;
	float: none !important;
}
.sps-pagination ul.page-numbers li {
	display: inline-flex !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	width: auto !important;
	float: none !important;
	list-style: none !important;
	background: none !important;
}
.sps-pagination .page-numbers {
	box-sizing: border-box !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #f1f1f1 !important;
	color: inherit !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	float: none !important;
	transition: background 0.2s ease, color 0.2s ease;
}
.sps-pagination a.page-numbers:hover {
	background: #e4e4e4 !important;
}
.sps-pagination .page-numbers.current {
	background: var( --sps-accent ) !important;
	color: #fff !important;
}

/* ======================================================================
 * Responsive columns
 * ==================================================================== */
@media ( max-width: 1200px ) {
	.peachy-products-wrap ul.products.peachy-products {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}
@media ( max-width: 900px ) {
	.peachy-products-wrap ul.products.peachy-products {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}
@media ( max-width: 680px ) {
	.peachy-products-wrap ul.products.peachy-products {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 16px;
	}
	.peachy-products-wrap ul.products.peachy-products > li.product .button,
	.peachy-products-wrap ul.products.peachy-products > li.product .added_to_cart {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}
@media ( max-width: 420px ) {
	.peachy-products-wrap ul.products.peachy-products {
		grid-template-columns: 1fr;
	}
}