/*
 * HIZ – quick add op de productkaart en de mini-winkelwagen (conversieronde, release 1.2.0).
 *
 * Tot release 1.2.0 stond dit onderaan `catalogus.css` en werkte quick add dus alleen in de
 * winkel, de archieven en de zoekresultaten. Sinds 1.2.0 hebben ook de kaarten op de startpagina
 * (`hiz/home-uitgelicht`) quick add; dit blad laadt daarom overal waar `hiz_quickadd_actief()` waar
 * is (inc/winkel-quickadd.php), ná `catalogus.css` als die er is. De regels zijn ongewijzigd
 * verplaatst.
 */

/* ==========================================================================
   Conversieronde: quick add op de productkaart
   ========================================================================== */

/* --- Kaart: positioneringscontext voor de knop en het matenpaneel -------- */

.hiz-card--product {
	position: relative;
}

/* --- Vaste knop: overal zichtbaar; opent op een muis niets (de hover-
   overlay hieronder doet dat al), op elk ander apparaat het bodemblad ----- */

.hiz-quickadd__trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	position: absolute;
	right: var(--hiz-space-2, 8px);
	bottom: var(--hiz-space-2, 8px);
	z-index: 2;
	pointer-events: auto;
	min-height: var(--hiz-touch, 44px);
	padding: 0 var(--hiz-space-3, 12px);
	border: none;
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	font: inherit;
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
	box-shadow: 0 8px 24px rgba(30, 35, 82, .10);
	cursor: pointer;
}

.hiz-quickadd__trigger:hover,
.hiz-quickadd__trigger:focus-visible {
	color: var(--hiz-color-lemon-tekst, #C9430F);
}

@media (hover: hover) and (pointer: fine) {
	/* Met een muis toont hoveren/focussen van de kaart het matenpaneel al (hieronder); de losse
	   knop zou dan een dubbele, overbodige bediening zijn. De enkelvoudige knop (product zonder
	   maat, bv. de canvas tas) is de bediening zelf en blijft dus wél staan. */
	.hiz-quickadd:not(.hiz-quickadd--enkel) .hiz-quickadd__trigger {
		display: none;
	}
}

/*
 * QA 1.2.0: zonder betrouwbare hover (telefoon, tablet; dezelfde voorwaarde als het script, maar
 * omgekeerd) was dit een witte pil "+ Snel toevoegen" van 142 px met schaduw over de onderkant van
 * elke foto: 24 keer per winkelpagina, en in de strook op de startpagina zo breed als de foto zelf.
 * Nu een ronde knop van 44 px met alleen het plusteken, rechtsonder in de foto, met een lichte
 * schaduw. De tekst blijft in de knop staan (lettergrootte 0): de toegankelijke naam is nog steeds
 * "Snel toevoegen — <productnaam>".
 */
@media (hover: none), (pointer: coarse), (pointer: none) {
	.hiz-quickadd__trigger {
		justify-content: center;
		gap: 0;
		width: var(--hiz-touch, 44px);
		height: var(--hiz-touch, 44px);
		padding: 0;
		font-size: 0;
		background: rgb(255 255 255 / 94%);
		box-shadow: 0 1px 3px rgba(30, 35, 82, .16);
	}

	.hiz-quickadd__trigger > span[aria-hidden="true"] {
		font-size: 24px;
		font-weight: 500;
		line-height: 1;
		/* Het plusteken van Manrope staat optisch iets te hoog in een cirkel. */
		translate: 0 -1px;
	}
}

/* --- Matenbalk: schuift op hover/focus omhoog vanaf de ónderkant van de fóto -----
   `.hiz-quickadd` krijgt zelf de 4:5-verhouding van de kaartfoto (vast, zie Card::MAAT/
   blok-contract) en dezelfde breedte als de kaart (top/left/right: 0). Zo dekt dit
   onzichtbare, muisdoorlatende vlak precies de foto — nooit titel of prijs eronder — en kan
   de zichtbare balk daarbinnen onderaan blijven staan zonder dat er iets gemeten hoeft te
   worden. `pointer-events: none` op dit vlak plus `auto` op de balk zelf laat klikken op de
   rest van de foto (naar de productpagina) gewoon door. */
.hiz-quickadd {
	position: absolute;
	inset: 0 0 auto 0;
	aspect-ratio: 4 / 5;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.hiz-quickadd__paneel {
	display: block;
	pointer-events: auto;
	flex: none;
	padding: var(--hiz-space-2, 8px) var(--hiz-space-3, 12px) var(--hiz-space-3, 12px);
	background: var(--hiz-color-white);
	border-top: 1px solid var(--hiz-color-line);
	transform: translateY(100%);
}

@media (hover: hover) and (pointer: fine) {
	.hiz-card--product:hover .hiz-quickadd__paneel,
	.hiz-card--product:focus-within .hiz-quickadd__paneel {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hiz-quickadd__paneel {
		transition: transform .18s var(--hiz-ease, ease);
	}
}

.hiz-quickadd__label {
	margin: 0 0 var(--hiz-space-1, 4px);
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 700;
	color: var(--hiz-color-forest);
}

.hiz-quickadd__maten {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* Compacte, rechthoekige maatchips (Arket/COS/Asket): geen ronde knoppen die de balk breed
   maken. Onder :hover:hover mag de balk zelf al smal zijn (alleen met een muis zichtbaar),
   dus 32 px hoog i.p.v. de 44 px-tikdoelmaat — het bodemblad (aanraken) houdt wél 44 px aan. */
.hiz-quickadd__maat {
	flex: 1 1 auto;
	min-width: 30px;
	height: 32px;
	padding: 0 6px;
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	font: inherit;
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 700;
	cursor: pointer;
}

.hiz-quickadd__maat:hover:not(:disabled),
.hiz-quickadd__maat:focus-visible {
	border-color: var(--hiz-color-forest);
	background: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
}

.hiz-quickadd__maat.is-uitverkocht,
.hiz-quickadd__maat:disabled {
	color: var(--hiz-color-muted);
	border-color: var(--hiz-color-line);
	background: transparent;
	text-decoration: line-through;
	cursor: not-allowed;
}

.hiz-quickadd__maat.is-bezig {
	opacity: .6;
	cursor: wait;
}

/* --- Bodemblad (JavaScript bouwt dit éénmalig, buiten de kaart) ---------- */

.hiz-quickadd__sheet {
	position: fixed;
	inset: auto 0 0 0;
	margin: 0;
	width: 100%;
	max-width: 100%;
	max-height: min(70vh, 520px);
	border: none;
	border-radius: var(--hiz-radius-lg, 24px) var(--hiz-radius-lg, 24px) 0 0;
	padding: var(--hiz-space-5, 24px) var(--hiz-space-4, 16px) var(--hiz-space-6, 32px);
	background: var(--hiz-color-white);
	box-shadow: 0 -8px 24px rgba(30, 35, 82, .14);
}

.hiz-quickadd__sheet::backdrop {
	background: rgba(30, 35, 82, .4);
}

.hiz-quickadd__sheet-kop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--hiz-space-3, 12px);
	margin-bottom: var(--hiz-space-4, 16px);
}

.hiz-quickadd__sheet-titel {
	margin: 0;
	font-size: var(--hiz-h4, 17px);
	font-weight: 600;
	color: var(--hiz-color-forest);
}

.hiz-quickadd__sheet-sluit {
	flex: none;
	width: var(--hiz-touch, 44px);
	height: var(--hiz-touch, 44px);
	border: none;
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-mint, #D3D9EB);
	color: var(--hiz-color-forest);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.hiz-quickadd__sheet .hiz-quickadd__maten {
	justify-content: flex-start;
}

.hiz-quickadd__sheet .hiz-quickadd__maat {
	min-width: calc(var(--hiz-touch, 44px) + var(--hiz-space-3, 12px));
}

/*
 * QA 1.2.0: maatchips in gelijke kolommen. Met `flex: 1 1 auto` rekte de laatste rij uit: in de
 * hoverbalk werden XXL en 3XL twee keer zo breed als XS–XL, en in het bodemblad stond 3XL als
 * losse knop over de volle breedte. Een raster met vaste minimumbreedte houdt elke chip even
 * breed (op /winkel/ 5 + 2, op de bredere kaarten van de startpagina één rij van 7). In het
 * bodemblad (aanraken) zijn de chips 44 px hoog, zoals de toelichting hierboven al beloofde; ze
 * waren 32 px. Zeven naast elkaar passen vanaf 375 px.
 */
.hiz-quickadd__maten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
}

.hiz-quickadd__maat {
	min-width: 0;
	padding-inline: 2px;
}

.hiz-quickadd__sheet .hiz-quickadd__maten {
	grid-template-columns: repeat(auto-fill, minmax(var(--hiz-touch, 44px), 1fr));
}

.hiz-quickadd__sheet .hiz-quickadd__maat {
	min-width: 0;
	height: var(--hiz-touch, 44px);
	font-size: var(--hiz-text-sm, 14px);
}

@media (min-width: 768px) {
	/* Op een breed aanraakscherm (tablet) is een gecentreerd paneel logischer dan een
	   volle-breedte bodemblad. */
	.hiz-quickadd__sheet {
		inset: 0;
		margin: auto;
		width: min(420px, calc(100vw - var(--hiz-space-6, 32px)));
		max-height: min(60vh, 480px);
		border-radius: var(--hiz-radius-lg, 24px);
	}
}

/* ==========================================================================
   Conversieronde: mini-winkelwagen (slide-in na quick add)
   ========================================================================== */

.hiz-miniwagen {
	position: fixed;
	inset: 0 0 0 auto;
	margin: 0;
	width: min(420px, 100vw);
	max-width: 100vw;
	height: 100%;
	max-height: 100%;
	border: none;
	border-radius: var(--hiz-radius-lg, 24px) 0 0 var(--hiz-radius-lg, 24px);
	padding: var(--hiz-space-5, 24px);
	background: var(--hiz-color-white);
	box-shadow: -8px 0 24px rgba(30, 35, 82, .14);
	flex-direction: column;
	gap: var(--hiz-space-4, 16px);
}

/* Een `dialog` is standaard `display:none` zolang hij geen `[open]` heeft (browser-
   stijlblad); die regel wint niet automatisch van een class-selector uit dit stijlblad, dus
   `display: flex` staat expres alléén hier — anders bleef het paneel altijd "aanwezig"
   (leeg, maar met zijn achtergrond en schaduw) in plaats van pas na het openen. */
.hiz-miniwagen[open] {
	display: flex;
}

.hiz-miniwagen::backdrop {
	background: rgba(30, 35, 82, .4);
}

.hiz-miniwagen__kop {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--hiz-space-3, 12px);
}

.hiz-miniwagen__titel {
	margin: 0;
	font-size: var(--hiz-h4, 17px);
	font-weight: 600;
	color: var(--hiz-color-forest);
}

.hiz-miniwagen__sluit {
	flex: none;
	width: var(--hiz-touch, 44px);
	height: var(--hiz-touch, 44px);
	border: none;
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-mint, #D3D9EB);
	color: var(--hiz-color-forest);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.hiz-miniwagen__product {
	display: flex;
	gap: var(--hiz-space-3, 12px);
	padding-bottom: var(--hiz-space-4, 16px);
	border-bottom: 1px solid var(--hiz-color-line);
}

.hiz-miniwagen__foto {
	flex: none;
	width: 64px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-mint, #D3D9EB);
}

.hiz-miniwagen__tekst {
	min-width: 0;
}

.hiz-miniwagen__naam {
	margin: 0 0 var(--hiz-space-1, 4px);
	font-size: var(--hiz-text-md, 16px);
	font-weight: 600;
	color: var(--hiz-color-forest);
}

.hiz-miniwagen__variant,
.hiz-miniwagen__prijs {
	margin: 0;
	font-size: var(--hiz-text-sm, 14px);
	color: var(--hiz-color-muted);
}

.hiz-miniwagen__prijs {
	font-weight: 700;
	color: var(--hiz-color-ink);
}

/* Kleurstaal voor de kleurnaam (bij een andere inkt tweekleurig, zie `.hiz-staal--combo`). */
.hiz-miniwagen__staal {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: var(--hiz-space-1, 4px);
	border-radius: 50%;
	vertical-align: -2px;
	background: var(--hiz-swatch, var(--hiz-color-sage));
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 22%);
}

/* Verzendmeter: tekst boven een dunne balk die van links vult in Bright Slate — ronde 2 van de
   feedback verving hier een dekkende pil (tekst en vulling in hetzelfde vlak, wit-op-Link-Water
   las onduidelijk als "welke kant is het al") door het gangbare patroon: donkere vulling op een
   lichte baan, tekst er los boven. */
.hiz-miniwagen__verzendmeter {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-2, 8px);
}

.hiz-miniwagen__verzendmeter-tekst {
	margin: 0;
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	color: var(--hiz-color-forest);
}

.hiz-miniwagen__verzendmeter-balk {
	position: relative;
	height: 4px;
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-mint, #D3D9EB);
	overflow: hidden;
}

.hiz-miniwagen__verzendmeter-balk::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--hiz-usp-voortgang, 0%);
	background: var(--hiz-color-forest);
	border-radius: inherit;
}

@media (prefers-reduced-motion: no-preference) {
	.hiz-miniwagen__verzendmeter-balk::after {
		transition: width .3s var(--hiz-ease, ease);
	}
}

/* "Meer uit <plaats>": vult de lege ruimte onder de verzendmeter met 2–4 compacte suggesties
   (geen volledige kaarten — geen quick-add-paneel in een quick-add-paneel). Leeg/niet geladen
   blijft het paneel gewoon compact: `hidden` laat er niets van zien. */
.hiz-miniwagen__aanbevelingen-titel {
	margin: 0 0 var(--hiz-space-2, 8px);
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 700;
	color: var(--hiz-color-muted);
}

.hiz-miniwagen__aanbevelingen-lijst {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--hiz-space-3, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-miniwagen__aanbeveling a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.hiz-miniwagen__aanbeveling img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-mint, #D3D9EB);
	margin-bottom: var(--hiz-space-1, 4px);
}

.hiz-miniwagen__aanbeveling-naam {
	display: block;
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 600;
	color: var(--hiz-color-forest);
	line-height: 1.3;
}

.hiz-miniwagen__aanbeveling-prijs {
	display: block;
	font-size: var(--hiz-text-xs, 13px);
	color: var(--hiz-color-muted);
}

.hiz-miniwagen__acties {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hiz-space-3, 12px);
	margin-top: auto;
}

.hiz-miniwagen__acties .hiz-button {
	width: 100%;
}

/*
 * QA 1.2.0: met vier suggesties ("Meer uit <plaats>") was het paneel hoger dan een scherm van
 * 800–844 px en vielen "Naar winkelwagen" en "Afrekenen" onder de rand – de knoppen waar het
 * paneel om draait, pas zichtbaar na scrollen. Nu plakt de knoppenrij onderaan het paneel
 * (`dialog:modal` scrolt zelf): de suggesties schuiven eronderdoor. Negatieve marges laten de
 * witte balk tot de randen van het paneel lopen, over de binnenruimte heen; `bottom` is ook
 * negatief omdat Chrome de plakrand binnen de padding van het paneel legt (gemeten: anders
 * bleef er 24 px suggestie zichtbaar onder de balk).
 */
.hiz-miniwagen__acties {
	position: sticky;
	bottom: calc(-1 * var(--hiz-space-5, 24px));
	z-index: 1;
	margin-inline: calc(-1 * var(--hiz-space-5, 24px));
	margin-bottom: calc(-1 * var(--hiz-space-5, 24px));
	padding: var(--hiz-space-3, 12px) var(--hiz-space-5, 24px) var(--hiz-space-5, 24px);
	border-top: 1px solid var(--hiz-color-line);
	background: var(--hiz-color-white);
}

@media (max-width: 480px) {
	.hiz-miniwagen {
		width: 100%;
		/* Schermvullend: geen ronde hoeken tegen de rand van het scherm. */
		border-radius: 0;
	}

	/* "Naar winkelwagen" brak op 375–390 px over twee regels; 14 px en 12 px zijruimte past. */
	.hiz-miniwagen__acties .hiz-button {
		padding-inline: var(--hiz-space-3, 12px);
		font-size: var(--hiz-text-sm, 14px);
		white-space: nowrap;
	}
}

/* Bodemblad omhoog, winkelwagenpaneel vanaf rechts — alleen op browsers die animeren van/naar
   `display:none` ondersteunen (`@starting-style`); daarbuiten verschijnen ze gewoon meteen. */
@media (prefers-reduced-motion: no-preference) {
	@supports (transition-behavior: allow-discrete) {
		.hiz-quickadd__sheet,
		.hiz-miniwagen {
			transition: transform .22s var(--hiz-ease, ease), opacity .22s var(--hiz-ease, ease), overlay .22s allow-discrete, display .22s allow-discrete;
			transform: translateY(100%);
			opacity: 0;
		}

		.hiz-miniwagen {
			transform: translateX(100%);
		}

		.hiz-quickadd__sheet[open] {
			transform: translateY(0);
			opacity: 1;
		}

		.hiz-miniwagen[open] {
			transform: translateX(0);
			opacity: 1;
		}

		@starting-style {
			.hiz-quickadd__sheet[open] {
				transform: translateY(100%);
				opacity: 0;
			}

			.hiz-miniwagen[open] {
				transform: translateX(100%);
				opacity: 0;
			}
		}
	}
}