/**
 * Shop pages built from WooCommerce's block templates.
 *
 * The shop and category archives no longer render the classic
 * `ul.products > li.product` loop — WooCommerce's Product Collection block
 * emits `.wc-block-product-template > li.wc-block-product` instead, which none
 * of the classic archive styling in dreamcloud-woocommerce.css can reach. That
 * left the cards frameless, the wishlist heart stranded on its own row under
 * the button, and the pagination as bare text against the footer.
 *
 * This file dresses those blocks to match the homepage cards, so a product
 * looks the same whichever loop drew it.
 *
 * Colours resolve through the same tokens as the rest of the theme.
 *
 * @package Machis
 */

/* -------------------------------------------------------------------------
 * 1. The grid
 * ---------------------------------------------------------------------- */

.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.wc-block-product-template.columns-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.wc-block-product-template.columns-3,
	.wc-block-product-template.columns-4,
	.wc-block-product-template.columns-5 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.wc-block-product-template.columns-4,
	.wc-block-product-template.columns-5 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1180px) {
	.wc-block-product-template.columns-5 {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * 2. The card
 * ---------------------------------------------------------------------- */

.wc-block-product-template li.wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0.85rem 0.85rem 0.9rem;
	background-color: var(--machis-bg, #fff);
	border: 1px solid var(--machis-line-soft, rgba(14, 14, 16, 0.07));
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(14, 14, 16, 0.04);
	text-align: left;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wc-block-product-template li.wc-block-product:hover {
	border-color: var(--machis-line, rgba(14, 14, 16, 0.12));
	box-shadow: 0 6px 18px rgba(14, 14, 16, 0.08);
	transform: translateY(-2px);
}

.wc-block-product-template li.wc-block-product a {
	text-decoration: none;
	box-shadow: none;
}

/* Image ------------------------------------------------------------------ */

.wc-block-product-template li.wc-block-product .wc-block-components-product-image {
	margin: 0 0 0.85rem;
}

.wc-block-product-template li.wc-block-product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	background-color: var(--machis-tint, #f9f9fc);
}

/* A product with no photo yet gets the placeholder sized down, so the card is
   not dominated by a grey square. */
.wc-block-product-template li.wc-block-product img.woocommerce-placeholder {
	object-fit: contain;
	padding: 18%;
	opacity: 0.45;
}

/* Title and price -------------------------------------------------------- */

.wc-block-product-template li.wc-block-product .wp-block-post-title {
	margin: 0 0 0.35rem;
	font-family: var(--machis-font-heading, inherit);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
}

.wc-block-product-template li.wc-block-product .wp-block-post-title a {
	color: var(--machis-fg, #0e0e10);
}

.wc-block-product-template li.wc-block-product .wp-block-post-title a:hover,
.wc-block-product-template li.wc-block-product .wp-block-post-title a:focus {
	color: var(--machis-accent, #d9008a);
}

/* The price block carries an inline bottom margin from the template; the card
   controls its own rhythm, and `margin-top: auto` pins the price and the
   button row to the bottom so cards in a row line up. */
.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-price {
	margin: auto 0 0 !important;
	text-align: left;
}

.wc-block-product-template li.wc-block-product .wc-block-components-product-price {
	display: block;
	color: var(--machis-accent, #d9008a);
	font-size: 0.92rem;
	font-weight: 700;
	text-align: left;
}

.wc-block-product-template li.wc-block-product .machis-price-personalized,
.wc-block-product-template li.wc-block-product .machis-price-quote,
.wc-block-product-template li.wc-block-product .machis-price-tiered__note {
	display: block;
	margin-top: 0.15em;
	color: var(--machis-muted, #5c5c5c);
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.4;
}

/* -------------------------------------------------------------------------
 * 3. Button row and wishlist heart
 *
 * The button is its own block and the heart is printed after it by
 * machis_close_product_actions(), so the two cannot share a flex row in the
 * markup. The heart moves to the top corner of the card instead, and the
 * button spans the width underneath.
 * ---------------------------------------------------------------------- */

.wc-block-product-template li.wc-block-product .wp-block-woocommerce-product-button {
	margin: 0.7rem 0 0 !important;
	text-align: left;
}

.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button {
	display: block;
	width: 100%;
	min-height: 38px;
	margin: 0 !important;
	padding: 0.5rem 0.6rem;
	background-color: var(--machis-accent, #d9008a);
	border: 1px solid var(--machis-accent, #d9008a);
	border-radius: 6px;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button:hover,
.wc-block-product-template li.wc-block-product .wc-block-components-product-button__button:focus {
	background-color: var(--machis-fg, #0e0e10);
	border-color: var(--machis-fg, #0e0e10);
	color: #fff;
}

.wc-block-product-template li.wc-block-product .machis-product-actions {
	position: absolute;
	top: 1.35rem;
	right: 1.35rem;
	z-index: 2;
	margin: 0;
}

.wc-block-product-template li.wc-block-product .machis-wish {
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(2px);
}

.wc-block-product-template li.wc-block-product .added_to_cart {
	display: block;
	margin-top: 0.4rem;
	color: var(--machis-accent, #d9008a);
	font-size: 0.75rem;
	font-weight: 600;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 4. Result count and sorting
 * ---------------------------------------------------------------------- */

.woocommerce-result-count,
.wc-block-product-collection-no-results,
.wp-block-woocommerce-product-results-count {
	margin: 0 0 1.5rem;
	color: var(--machis-muted, #5c5c5c);
	font-size: 0.9rem;
}

.wp-block-woocommerce-catalog-sorting select,
.woocommerce-ordering select {
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	background-color: var(--machis-bg, #fff);
	border: 1px solid var(--machis-line, rgba(14, 14, 16, 0.12));
	border-radius: 6px;
	color: var(--machis-fg, #0e0e10);
	font-size: 0.85rem;
}

/* -------------------------------------------------------------------------
 * 5. Pagination
 *
 * Core's query pagination ships unstyled, which left the page numbers as run
 * together text sitting directly on top of the footer.
 * ---------------------------------------------------------------------- */

.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 2.5rem 0 4rem;
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 0.7rem;
	background-color: var(--machis-bg, #fff);
	border: 1px solid var(--machis-line, rgba(14, 14, 16, 0.12));
	border-radius: 8px;
	color: var(--machis-fg, #0e0e10);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination a.page-numbers:focus,
.wp-block-query-pagination .wp-block-query-pagination-next:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:focus,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:focus {
	background-color: var(--machis-tint, #f9f9fc);
	border-color: var(--machis-accent, #d9008a);
	color: var(--machis-accent, #d9008a);
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--machis-accent, #d9008a);
	border-color: var(--machis-accent, #d9008a);
	color: #fff;
}

/* The ellipsis is a label, not a target. */
.wp-block-query-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 0.25rem;
	background: none;
	border: 0;
	color: var(--machis-muted, #5c5c5c);
}

.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous {
	margin: 0;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
 * 6. Archive header
 * ---------------------------------------------------------------------- */

.woocommerce-products-header,
.wp-block-query-title {
	margin-bottom: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product-template li.wc-block-product,
	.wp-block-query-pagination .page-numbers {
		transition-duration: 0.01ms !important;
	}

	.wc-block-product-template li.wc-block-product:hover {
		transform: none;
	}
}