/* WooCommerce Shop / archive.
   Block-based product collection, so the selectors are all wc-block-*.
   Woo's own stylesheet loads too and sets a flex layout via .columns-N, and
   the theme spaces block wrappers from theme.json — that is what the
   !important flags below are aimed at. */

/* ------------------------------------------------------------- page shell */
/* Scoped to body so it outranks the theme's own layout padding. */
body.woocommerce-shop main,
body.tax-product_cat main,
body.tax-product_tag main {
	padding-block-start: clamp(2rem, 5vw, 3.5rem) !important;
	padding-block-end: clamp(3.5rem, 8vw, 6rem) !important;
}

.woocommerce-shop .has-global-padding {
  --_pad: var(--container-pad);
  padding-inline: var(--_pad) !important;
}

/* --------------------------------------------------------------- header */
.wp-block-woocommerce-breadcrumbs {
  margin-block-end: 2.5rem;
}

body.woocommerce-shop .woocommerce-breadcrumb,
body.tax-product_cat .woocommerce-breadcrumb,
body.tax-product_tag .woocommerce-breadcrumb {
	margin-block: 0 1rem;
	font-size: 0.875rem;
	color: var(--c-mid);
}

.woocommerce-breadcrumb a {
	color: var(--c-black);
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-underline-offset: 0.1875rem;
}

.woocommerce-shop .wp-block-query-title {
  font-size: 2.75rem;
  margin-block: 0 0.75rem !important;
	font-family: var(--ff-alt);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-black);
}
  
.woocommerce-result-count {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--c-mid);
}

/* Toolbar row between the title and the grid. */
.woocommerce-shop .wp-block-group.is-content-justification-space-between,
.tax-product_cat .wp-block-group.is-content-justification-space-between,
.tax-product_tag .wp-block-group.is-content-justification-space-between {
	align-items: center;
	margin-block: clamp(1.5rem, 3vw, 2.5rem) 0 !important;
	padding-block-end: 1.25rem;
	border-block-end: 1px solid var(--c-border);
}

.wp-block-woocommerce-product-results-count,
.wp-block-woocommerce-catalog-sorting {
	margin-block: 0;
}

/* The collection wrapper carries its own margin — zero it so the gap below
   the toolbar comes from one place only. */
.wp-block-woocommerce-product-collection {
	margin-block: 0 !important;
}

/* Sorting select — matches the inputs on cart and checkout. */
.woocommerce-ordering select.orderby {
	block-size: 2.75rem;
	padding-inline: 1rem 2.5rem;
	font-family: var(--ff-sans);
	font-size: 0.9375rem;
	color: var(--c-dark);
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 0.5rem;
	cursor: pointer;
	transition: border-color 0.2s;
}

.woocommerce-ordering select.orderby:hover {
	border-color: var(--c-gold);
}

.woocommerce-ordering select.orderby:focus-visible {
	outline: 0;
	border-color: var(--c-gold);
	box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--c-gold) 35%, transparent);
}

/* ----------------------------------------------------------------- grid */
/* auto-fill keeps a single product at card width instead of stretching it
   across the row, and adds columns on its own as the catalogue grows. */
.wc-block-product-template.wc-block-product-template__responsive,
ul.wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 2.5rem 2rem;
	margin-block: clamp(2rem, 4vw, 3rem) 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* Woo gives each item a flex-basis percentage — clear it. */
.wc-block-product-template > li.wc-block-product {
	display: flex !important;
	flex-direction: column;
	inline-size: auto !important;
	max-inline-size: none !important;
	flex: initial !important;
	margin: 0 !important;
	padding: 0;
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 0.75rem;
	overflow: hidden;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.wc-block-product-template > li.wc-block-product:hover {
	border-color: var(--c-gold);
	transform: translateY(-0.25rem);
	box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--c-black) 10%, transparent);
}

/* ---------------------------------------------------------------- image */
.wc-block-product .wc-block-components-product-image {
	margin: 0;
	background: var(--c-bg);
}

.wc-block-product .wc-block-components-product-image a {
	display: block;
}

.wc-block-product .wc-block-components-product-image img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.4s;
}

.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.03);
}

/* ----------------------------------------------------------- title, price */
.wc-block-product .wp-block-post-title {
	display: block !important;
	visibility: visible !important;
	block-size: auto !important;
	margin: 0 !important;
	padding: 1.25rem 1.25rem 0;
	font-family: var(--ff-alt);
	font-size: 1.0625rem !important;
	font-weight: 700;
	line-height: 1.35 !important;
	text-align: start !important;
	color: var(--c-black);
}

.wc-block-product .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wc-block-product .wp-block-post-title a:hover {
	color: var(--c-gold-dk);
}

.wc-block-product .wp-block-woocommerce-product-price {
	margin: 0 !important;
	padding: 0.5rem 1.25rem 0;
	text-align: start !important;
}

.wc-block-product .wc-block-components-product-price {
	font-family: var(--ff-alt);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--c-black);
}

.wc-block-product .wc-block-components-product-price del {
	margin-inline-end: 0.5rem;
	font-weight: 400;
	color: var(--c-muted);
}

/* Rating, if reviews are on. */
.wc-block-product .wc-block-components-product-rating {
	padding: 0.5rem 1.25rem 0;
}

/* --------------------------------------------------------------- button */
/* margin-block-start:auto pins the button to the bottom, so buttons line up
   across a row no matter how long the titles run. */
.wc-block-product .wc-block-components-product-button,
.wc-block-product .wc-block-components-product-button.align-center {
	margin: auto 0 0 !important;
	padding: 1rem 1.25rem 1.25rem;
	text-align: start !important;
}

.wc-block-product .wc-block-components-product-button__button {
	inline-size: 100% !important;
	max-inline-size: none !important;
	margin: 0 !important;
	padding: 0.8125rem 1.25rem !important;
	font-family: var(--ff-sans);
	font-size: 0.875rem !important;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--c-black) !important;
	background: var(--c-gold) !important;
	border: 0;
	border-radius: 6.25rem;
	cursor: pointer;
	transition: background-color 0.2s;
}

.wc-block-product .wc-block-components-product-button__button:hover {
	background: var(--c-gold-dk) !important;
}

.wc-block-product .wc-block-components-product-button__button.loading {
	opacity: 0.7;
	cursor: wait;
}

/* "View cart" appears after adding — secondary, so it stays a link. */
.wc-block-product .added_to_cart {
	display: block;
	margin-block-start: 0.625rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	color: var(--c-black);
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-underline-offset: 0.1875rem;
}

/* ------------------------------------------------------------ pagination */
.wp-block-query-pagination {
	margin-block-start: 3rem;
	gap: 0.5rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-inline-size: 2.5rem;
	block-size: 2.5rem;
	padding-inline: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--c-black);
	background: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: 0.5rem;
	text-decoration: none;
	transition: border-color 0.2s, background-color 0.2s;
}

.wp-block-query-pagination a:hover {
	border-color: var(--c-gold);
}

.wp-block-query-pagination .page-numbers.current {
	color: var(--c-black);
	background: var(--c-gold);
	border-color: var(--c-gold);
}

/* ------------------------------------------------------------- no results */
.wc-block-product-template__no-results {
	padding-block: 3rem;
	font-size: 1rem;
	color: var(--c-mid);
}

/* ------------------------------------------------------------- responsive */
@media (width <= 48rem) {
	/* Woo's is-nowrap keeps the count and the select on one line, which
	   squeezes the select on narrow screens. */
	.woocommerce-shop .wp-block-group.is-content-justification-space-between,
	.tax-product_cat .wp-block-group.is-content-justification-space-between,
	.tax-product_tag .wp-block-group.is-content-justification-space-between {
		display: flex !important;
		flex-wrap: wrap !important;
		flex-direction: column;
		align-items: stretch !important;
		gap: 0.875rem;
	}

	.wp-block-woocommerce-product-results-count,
	.wp-block-woocommerce-catalog-sorting,
	.woocommerce-ordering,
	.woocommerce-ordering select.orderby {
		inline-size: 100% !important;
	}
}

@media (width <= 37.5rem) {
	.wc-block-product-template.wc-block-product-template__responsive,
	ul.wc-block-product-template {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-block-start: 1.75rem !important;
	}

	.wc-block-product .wp-block-post-title {
		padding: 1rem 1rem 0;
	}

	.wc-block-product .wp-block-woocommerce-product-price,
	.wc-block-product .wc-block-components-product-button {
		padding-inline: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product-template > li.wc-block-product,
	.wc-block-product .wc-block-components-product-image img {
		transition: none;
	}

	.wc-block-product-template > li.wc-block-product:hover,
	.wc-block-product:hover .wc-block-components-product-image img {
		transform: none;
	}
}