/*
 * Catalogue layer — the shop archive and material category archives.
 *
 * Continues the approved homepage language: same 12-column field (`.layout`),
 * same tokens, same card grammar as the material cards on the homepage. Scoped to
 * the `iq-catalog` body class so nothing here reaches any other page.
 */

/* ── Scoped reset (catalogue subtree only) ────────────────────────────────── */

:where(.iq-catalog-page) *,
:where(.iq-catalog-page) *::before,
:where(.iq-catalog-page) *::after { box-sizing: border-box; }

:where(.iq-catalog-page) img { display: block; max-width: 100%; height: auto; }
:where(.iq-catalog-page) :is(h1, h2, h3) { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: var(--track-display); line-height: var(--lh-tight); }
:where(.iq-catalog-page) p { margin: 0; }
:where(.iq-catalog-page) ul { margin: 0; padding: 0; list-style: none; }
:where(.iq-catalog-page) a { color: inherit; text-decoration: none; text-underline-offset: .2em; }

.iq-catalog .iq-catalog-page {
	font-family: var(--font-body);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	color: var(--ink);
	background: var(--paper);
}

/* Woodmart's shop chrome must not frame the catalogue. */
.iq-catalog main.wd-content-layout { max-width: none; width: 100%; margin-inline: 0; padding: 0; }
.iq-catalog .wd-page-title,
.iq-catalog .wd-shop-tools,
.iq-catalog .wd-sidebar,
.iq-catalog .woocommerce-notices-wrapper,
.iq-catalog .woocommerce-result-count,
.iq-catalog .woocommerce-ordering,
.iq-catalog .wd-scroll-top { display: none !important; }

/* ── Page header ──────────────────────────────────────────────────────────── */

.iq-catalog .catalog-head { padding-block: var(--sp-md) 0; }
.iq-catalog .catalog-head__inner { grid-column: col 1 / col 9; }

.iq-catalog .crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: var(--t-small);
	color: var(--graphite);
}

.iq-catalog .crumbs a:hover,
.iq-catalog .crumbs a:focus-visible { color: var(--red); text-decoration: underline; }
.iq-catalog .crumbs [aria-current] { color: var(--ink); }

.iq-catalog .catalog-head__title {
	margin-block: 14px 10px;
	font-size: clamp(28px, 2.6vw, 42px);
}

.iq-catalog .search-again { max-width: 560px; margin-top: 18px; }
.iq-catalog .search-again .search__field { background: var(--paper); }

.iq-catalog .catalog-head__intro {
	max-width: 60ch;
	color: var(--graphite);
	font-size: var(--t-lead);
}

/* ── Material navigation ──────────────────────────────────────────────────── */

.iq-catalog .catalog-nav {
	grid-column: col 1 / content-end;
	margin-top: var(--sp-md);
	border-block: 1px solid var(--rule);
}

.iq-catalog .catalog-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.iq-catalog .catalog-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 56px;
	padding-inline: clamp(14px, 1.6vw, 24px);
	border-inline-end: 1px solid var(--rule);
	font-family: var(--font-display);
	font-size: var(--t-small);
	font-weight: 600;
	color: var(--ink);
}

.iq-catalog .catalog-nav li:first-child .catalog-nav__link { padding-inline-start: 0; }
.iq-catalog .catalog-nav li:last-child .catalog-nav__link { border-inline-end: 0; }

.iq-catalog .catalog-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	height: 2px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.iq-catalog .catalog-nav__link:hover::after,
.iq-catalog .catalog-nav__link:focus-visible::after,
.iq-catalog .catalog-nav__link.is-current::after { transform: scaleX(1); }
.iq-catalog .catalog-nav__link:hover,
.iq-catalog .catalog-nav__link.is-current { color: var(--red); }

/* ── Grid ─────────────────────────────────────────────────────────────────── */

.iq-catalog .catalog-body { padding-block: var(--sp-md) var(--sp-lg); }

.iq-catalog .catalog-grid {
	grid-column: col 1 / content-end;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr; /* every card the same height, row after row */
	align-items: stretch;
	gap: var(--col-gap);
}

.iq-catalog .pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--paper);
	border: 1px solid var(--rule);
	transition: border-color var(--dur) var(--ease);
}

.iq-catalog .pcard:hover,
.iq-catalog .pcard:focus-within { border-color: var(--ink); }

.iq-catalog .pcard__link { display: flex; flex-direction: column; flex: 1 1 auto; }

.iq-catalog .pcard__media { position: relative; display: block; overflow: hidden; background: var(--sunk); }

/* The plates are photographed 2:1 — the frame matches, so nothing is cropped. */
.iq-catalog .pcard__media img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	transition: transform 520ms var(--ease);
}

.iq-catalog .pcard:hover .pcard__media img,
.iq-catalog .pcard:focus-within .pcard__media img { transform: scale(1.04); }

.iq-catalog .pcard__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding: 16px 18px;
}

.iq-catalog .pcard__cat {
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--graphite);
}

.iq-catalog .pcard__title {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	line-height: var(--lh-tight);
	color: var(--ink);
}

.iq-catalog .pcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--rule-soft);
	font-size: 13px;
	color: var(--graphite);
}

.iq-catalog .pcard__meta b { color: var(--ink); font-weight: 600; }

.iq-catalog .pcard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 52px;
	padding: 8px 18px;
	border-top: 1px solid var(--rule-soft);
	font-family: var(--font-display);
	font-size: var(--t-small);
	font-weight: 600;
}

.iq-catalog .pcard__detail { color: var(--ink); }
.iq-catalog .pcard__detail:hover,
.iq-catalog .pcard__detail:focus-visible { color: var(--red); text-decoration: underline; }
.iq-catalog .pcard__quote { color: var(--red); }
.iq-catalog .pcard__quote:hover,
.iq-catalog .pcard__quote:focus-visible { color: var(--red-deep); text-decoration: underline; }

/* Nothing from the shop template may reintroduce commerce controls. */
.iq-catalog .price,
.iq-catalog .add_to_cart_button,
.iq-catalog .product_type_variable,
.iq-catalog .star-rating,
.iq-catalog .woocommerce-product-rating,
.iq-catalog .onsale,
.iq-catalog .wd-buttons,
.iq-catalog .wd-compare-btn,
.iq-catalog .wd-wishlist-btn,
.iq-catalog .wd-quick-view-btn,
.iq-catalog .wd-product-labels { display: none !important; }

/* ── Pagination ───────────────────────────────────────────────────────────── */

.iq-catalog .catalog-pagination { grid-column: col 1 / content-end; margin-top: var(--sp-md); }
.iq-catalog .catalog-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; }

.iq-catalog .catalog-pagination :is(a, span) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 12px;
	border: 1px solid var(--rule);
	font-family: var(--font-display);
	font-size: var(--t-small);
	font-weight: 600;
	color: var(--ink);
}

.iq-catalog .catalog-pagination .current,
.iq-catalog .catalog-pagination a:hover,
.iq-catalog .catalog-pagination a:focus-visible { border-color: var(--red); color: var(--red); }

/* ── Empty state ──────────────────────────────────────────────────────────── */

.iq-catalog .catalog-empty {
	grid-column: col 1 / col 8;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: var(--sp-md);
	border: 1px solid var(--rule);
	background: var(--sunk);
}

.iq-catalog .catalog-empty h2 { font-size: clamp(20px, 1.6vw, 26px); }
.iq-catalog .catalog-empty p { color: var(--graphite); max-width: 52ch; }
.iq-catalog .catalog-empty .btn { margin-top: 6px; }

/* ── Closing CTA ──────────────────────────────────────────────────────────── */

.iq-catalog .catalog-cta { padding-block: 0 var(--sp-lg); }

.iq-catalog .catalog-cta__inner {
	grid-column: col 1 / content-end;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-sm);
	padding: var(--sp-md);
	background: var(--red-deep);
	color: var(--inv-text);
}

.iq-catalog .catalog-cta__inner h2 { color: #FFFFFF; font-size: clamp(20px, 1.7vw, 28px); margin-block: 10px 8px; }
.iq-catalog .catalog-cta__inner p { color: rgba(255, 255, 255, .86); max-width: 52ch; }
.iq-catalog .catalog-cta__actions { display: flex; align-items: center; gap: var(--sp-sm); }
.iq-catalog .catalog-cta__tel { color: #FFFFFF; font-family: var(--font-display); font-weight: 600; }
.iq-catalog .catalog-cta__tel:hover { text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
	.iq-catalog .catalog-head__inner { grid-column: col 1 / col 11; }
}



@media (max-width: 860px) {
	.iq-catalog .layout > * { grid-column: col 1 / content-end; }
	.iq-catalog .catalog-grid { grid-template-columns: 1fr; gap: 12px; }
	.iq-catalog .catalog-empty { padding: var(--sp-sm); }
	.iq-catalog .catalog-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.iq-catalog .catalog-nav ul::-webkit-scrollbar { display: none; }
	.iq-catalog .catalog-nav__link { white-space: nowrap; }
	.iq-catalog .pcard__body { padding: 14px; }
	.iq-catalog .pcard__foot { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; min-height: 0; }
	.iq-catalog .pcard__detail,
	.iq-catalog .pcard__quote { display: inline-flex; align-items: center; min-height: 44px; }
	.iq-catalog .catalog-cta__inner { flex-direction: column; align-items: flex-start; }
	.iq-catalog .catalog-cta__actions { width: 100%; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.iq-catalog .pcard__media img,
	.iq-catalog .catalog-nav__link::after { transition: none; }
}