/*
 * The slab yard — shop archive and single product.
 * Hooks and CSS only; no template overrides.
 */

/* ── Archive cards as slab tiles ──────────────────────────────────────────── */

.woocommerce .wd-product .product-element-top,
.wd-product .product-element-top {
	aspect-ratio: var(--iq-ratio-slab);
	overflow: hidden;
	background: var(--iq-ground-sunk);
	border-radius: var(--iq-radius-material);
}

/* Supplier product shots are composites: styled kitchen on the left half, slab
   surface on the right. The catalogue is about the material, so show the
   material half — double width, pulled left. */
.wd-product .product-element-top img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* Scale about the right edge to reveal the slab half. A percentage width with
	   a negative margin resolved against two different containing blocks here and
	   pushed the image out of frame; a transform has no such ambiguity. */
	transform: scale(2);
	transform-origin: 100% 50%;
}

.wd-product .wd-entities-title {
	font-family: var(--iq-font-body);
	font-size: var(--iq-size-small);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}

.wd-product .wd-entities-title a { color: var(--iq-ink); text-decoration: none; }
.wd-product .wd-entities-title a:hover { color: var(--iq-signal); }

.iq-card-spec {
	margin: var(--iq-space-1) 0 0;
	font-family: var(--iq-font-mono);
	font-size: var(--iq-size-mono-micro);
	font-weight: 500;
	letter-spacing: var(--iq-track-mono);
	text-transform: uppercase;
	color: var(--iq-graphite);
	font-variant-numeric: tabular-nums;
}

/* The quote CTA on each card. */
.wd-product .iqcm-quote-button {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--iq-hit);
	margin-block-start: var(--iq-space-2);
	padding-inline: var(--iq-space-4);
	background: transparent;
	color: var(--iq-signal);
	border: 1px solid var(--iq-rule);
	border-radius: var(--iq-radius-control);
	font-family: var(--iq-font-mono);
	font-size: var(--iq-size-mono);
	font-weight: 500;
	letter-spacing: var(--iq-track-mono);
	text-transform: uppercase;
	transition: background var(--iq-dur-micro) var(--iq-ease), color var(--iq-dur-micro) var(--iq-ease), border-color var(--iq-dur-micro) var(--iq-ease);
}

.wd-product .iqcm-quote-button:hover {
	background: var(--iq-signal);
	border-color: var(--iq-signal);
	color: #fff;
}


/* ── Single product: the technical sheet ──────────────────────────────────── */

.iq-specs {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block: var(--iq-space-6);
	font-size: var(--iq-size-small);
}

.iq-specs caption {
	text-align: start;
	color: var(--iq-graphite);
	padding-block-end: var(--iq-space-3);
}

.iq-specs th,
.iq-specs td {
	text-align: start;
	padding: var(--iq-space-3) var(--iq-space-4);
	border-block-end: 1px solid var(--iq-rule);
	vertical-align: baseline;
}

/* Keys in the technical face, values in prose — the label is data, the value is
   the material speaking. */
.iq-specs th {
	inline-size: 40%;
	font-family: var(--iq-font-mono);
	font-size: var(--iq-size-mono);
	font-weight: 500;
	letter-spacing: var(--iq-track-mono);
	text-transform: uppercase;
	color: var(--iq-graphite);
}

.iq-specs tbody tr:nth-child(odd) { background: var(--iq-ground-sunk); }

/* The single-product quote CTA is the page's primary action. */
.iq-product-quote-cta .iqcm-quote-button,
.single-product .iqcm-quote-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 52px;
	background: var(--iq-signal);
	color: #fff;
	border: 0;
	border-radius: var(--iq-radius-control);
	font-family: var(--iq-font-mono);
	font-size: var(--iq-size-mono);
	font-weight: 500;
	letter-spacing: var(--iq-track-mono);
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--iq-dur-micro) var(--iq-ease);
}

.single-product .iqcm-quote-button:hover { background: var(--iq-signal-deep); color: #fff; }

/* ── Woodmart's own layered-nav filters, aligned to the tokens ────────────── */

/* Reused rather than replaced: the theme already ships attribute facets with
   live counts, and adding a second filter UI beside them would be the same
   duplication this rebuild has been removing everywhere else. */
.wd-shop-filters .widget-title,
.sidebar-container .widget-title {
	font-family: var(--iq-font-mono);
	font-size: var(--iq-size-mono);
	font-weight: 500;
	letter-spacing: var(--iq-track-mono);
	text-transform: uppercase;
	color: var(--iq-graphite);
}

.sidebar-container .wd-widget li a,
.sidebar-container .widget li a {
	font-family: var(--iq-font-body);
	font-size: var(--iq-size-small);
	color: var(--iq-ink);
}

.sidebar-container .wd-widget li a:hover { color: var(--iq-signal); }

.sidebar-container .count,
.sidebar-container .wd-filter-count {
	font-family: var(--iq-font-mono);
	font-size: var(--iq-size-mono-micro);
	color: var(--iq-graphite);
	font-variant-numeric: tabular-nums;
}