/**
 * Shop page — grid + card styling.
 */
body.woocommerce,
body.woocommerce-page {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
}

.site-header,
.site-content,
.site-footer {
	max-width: var(--container-max);
	margin: 0 auto;
}

/* Homepage uses a bare <main class="site-content"> (no .wh-main wrapper), so it
   otherwise caps at --container-max (1200). Raise it to 1400 to match the
   .wh-main content width every other page (incl. the /collecties/ archive) uses,
   so the homepage grid lines up with the archive grid. */
body.home .site-content {
	max-width: 1400px;
}

ul.products li.product {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--s-4);
	transition: box-shadow var(--transition), transform var(--transition);
}

ul.products li.product:hover {
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}

ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: var(--type-md);
	color: var(--ink);
	margin: var(--s-3) 0 var(--s-2);
}

ul.products li.product .price {
	color: var(--ink);
	font-weight: 500;
}

.button,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--accent);
	color: var(--on-ink, #FFFFFF);
	border-radius: var(--radius-sm);
	padding: var(--s-3) var(--s-5);
	font-family: var(--font-body);
	font-weight: 500;
	transition: background var(--transition);
	text-transform: none;
	letter-spacing: 0;
}

.button:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--accent-ink, #1A4651);
	color: var(--on-ink, #FFFFFF);
}

.wccb-btn-customise {
	background: var(--accent) !important;
	color: var(--on-ink, #FFFFFF) !important;
}

/* ---- Wandhaus archive toolbar ---- */

.wh-archive__main .woocommerce-ordering {
	margin: 0;
}

/* DEPRECATED — `.wh-archive__toolbar` markup + WC's stock orderby <select>
 * were both retired in [[Filter Bar V2 Scope]] Phase C; the plugin's
 * Sort_Pill replaces the stock <select> on every product archive.
 * Rule kept for `.wh-archive__main .woocommerce-ordering select` only as
 * a defensive fallback in case any third-party plugin re-attaches the
 * stock ordering hook. */
.wh-archive__main .woocommerce-ordering select {
	background: var(--surface);
	border: 1px solid var(--border-strong);
	padding: var(--s-2) var(--s-6) var(--s-2) 14px;
	font: 400 13px var(--font-body);
	color: var(--ink);
	border-radius: var(--radius-sm);
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%230E0E0C' fill='none' stroke-width='1.2'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

/* ---- Wandhaus product grid (overrides Woo defaults) ---- */

.wh-archive__main ul.products,
.wh-archive__main .products {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-20);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wh-archive__main ul.products li.product,
.wh-archive__main .products .wh-product-card {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	border-radius: 0;
	transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

.wh-archive__main ul.products li.product:hover {
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}

/* ---- Single-product hover on material / size pickers ---- */

.wh-material:hover:not(.is-selected),
.wh-size:hover:not(.is-selected) {
	border-color: var(--ink) !important;
}