/*
 * HIZ – WooCommerce en productpagina (mobile-first, 375 px basis).
 *
 * Eigenaar: agent C (commerce). De basis-tokens en generieke klassen staan in hiz.css (agent A);
 * die worden hier niet gedupliceerd. Waar dit bestand tóch een generieke klasse zet (.hiz-button,
 * .hiz-card, .hiz-grid) gebeurt dat met :where() — specificiteit 0 — zodat hiz.css altijd wint
 * zodra agent A die klassen definieert. Dit bestand kan die regels later verliezen zonder verlies.
 */

/* ---------------------------------------------------------------- 1. Terugval voor basisklassen */

:where(.hiz-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--hiz-touch, 44px);
	padding: 10px 20px;
	border: 1px solid var(--hiz-color-forest);
	border-radius: var(--hiz-radius-pill);
	background: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--hiz-motion-fast) var(--hiz-ease), color var(--hiz-motion-fast) var(--hiz-ease);
}

:where(.hiz-button--accent) {
	/* Pow Orange met witte tekst haalt 3,87:1; deze diepere variant komt op 4,9:1. */
	border-color: var(--hiz-color-lemon-tekst);
	background: var(--hiz-color-lemon-tekst);
	color: var(--hiz-color-white);
}

:where(.hiz-button--outline) {
	background: transparent;
	color: var(--hiz-color-forest);
}

:where(.hiz-button--ghost) {
	border-color: transparent;
	background: transparent;
	color: var(--hiz-color-forest);
	text-decoration: underline;
	text-underline-offset: 4px;
}

:where(.hiz-grid) {
	display: grid;
	gap: var(--hiz-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.hiz-section) {
	margin-block: clamp(40px, 8vw, 72px);
}

:where(.hiz-section__title) {
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

:where(.hiz-section__lead) {
	margin: 0;
	max-width: 60ch;
	color: var(--hiz-color-muted);
}

:where(.hiz-visually-hidden) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------- 2. Productkaarten */

.hiz-grid--producten {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hiz-card--product {
	min-width: 0;
}

/*
 * Livegang (LQ): de kaart zelf (link, foto, titel 15 px, meta 13 px, prijs 15 px, hover) staat
 * in hiz.css. De kopieën die hier stonden laadden ná hiz.css en wonnen: titel 16 px, meta
 * 14 px, `display: block` op de link en een foto met eigen radius en 10 px marge.
 */

/* --------------------------------------------------------------------------- 3. Kruimelpad */

.hiz-breadcrumb,
.woocommerce-breadcrumb {
	margin: 0 0 12px;
	color: var(--hiz-color-muted);
	font-size: 0.875rem;
}

/* Kruimels waren 19 px hoge tekstlinks; ze horen ook op een telefoon raakbaar te zijn. */
.hiz-breadcrumb a,
.woocommerce-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hiz-touch, 44px);
	color: inherit;
}

.hiz-breadcrumb__scheiding {
	padding: 0 4px;
}

/* --------------------------------------------------- 4. Productpagina → assets/css/product.css

   De productpagina staat sinds ronde 3 volledig in `assets/css/product.css`: galerij,
   kleurstalen, variatieformulier en maten, canvas tas-upsell, sticky koopbalk, vertrouwensrij,
   uitklappers en aanbevelingen. Dat bestand laadt alleen op `is_product()` en is eigendom van de
   productpagina-agent; hier stonden die regels los van elkaar en overschreven ze elkaar over twee
   bestanden heen (zie docs/pr/r2-productpagina.md, open risico 6).

   Wat hier bleef staat ook buiten de productpagina: basisklassen (1), productkaarten (2),
   kruimelpad (3), catalogusgrids (10), winkelwagen en afrekenen (11), mijn account (12).
   ------------------------------------------------------------------------------------------ */

/* --------------------------------------------- 10. Catalogus, plaats en zoeken → catalogus.css

   Ronde 5 (V2): de catalogusgrids, het filterpaneel-in-de-pagina, de kop en voet van het
   raster, de lege staat, het SEO-tekstblok en de plaats- en zoekonderdelen staan sinds deze
   ronde in `assets/css/catalogus.css`. Dat bestand laadt alleen op /winkel/, de model- en
   kleurarchieven, de plaatspagina's en de zoekresultaten (inc/woocommerce.php) en is
   eigendom van de catalogusagent. Hier bleven alleen onderdelen staan die óók buiten die
   sjablonen voorkomen: basisklassen (1), de productkaart zelf (2), het kruimelpad (3),
   winkelwagen en afrekenen (11), mijn account (12).
   ------------------------------------------------------------------------------------------ */

/* -------------------------------------------------------------- 12. Meldingen van WooCommerce

   Deze staan op elke WooCommerce-pagina (winkel, product, winkelwagen, Mijn account) en horen
   daarom hier en niet in `commerce.css`, dat alleen op de commerce-sjablonen laadt. */

.hiz-woo .woocommerce-message,
.hiz-woo .woocommerce-info,
.hiz-woo .woocommerce-error {
	margin: 0 0 var(--hiz-space-4, 16px);
	padding: var(--hiz-space-3, 12px) var(--hiz-space-4, 16px);
	border: 0;
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-mint);
	font-size: var(--hiz-text-sm, 14px);
	list-style: none;
}

.hiz-woo .woocommerce-error {
	background: #fdecec;
}

.hiz-woo .wc-block-components-notice-banner {
	border-radius: var(--hiz-radius-sm, 10px);
	font-size: var(--hiz-text-sm, 14px);
}

/* -------------------------------------------------------------------------- 13. Breakpoints */

@media (min-width: 768px) {
	.hiz-grid--producten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.hiz-grid--producten {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}