/* De winkel en de productpagina: wat het filtergedrag en de indeling nodig
   hebben. De componenten zelf (hn-product, hn-filters, hn-price, hn-status,
   hn-rating, hn-pagination) staan in commerce.css, forms.css en navigation.css. */

/* ---------- Filterrubrieken ---------- */

/* Het design system tekent de open/dicht-staat (de chevron draait); het
   in- en uitklappen zelf is gedrag en staat daarom hier. */
.hn-filtergroup:not([data-open="true"]) .hn-filtergroup__body {
	display: none;
}

/* Een term die binnen de huidige selectie niets meer oplevert blijft staan als
   hij aangevinkt is — anders kun je hem niet meer uitzetten. */
.hn-check.is-leeg {
	opacity: .55;
}

/* Lange lijsten (Theme, Brand) kort: het script toont eerst zes regels met een
   "Show all"-knop eronder (Ruud, 2026-09-07). Geen scrollvak: dat gaf een
   scrollbalk op elke lijst die net over de rand ging. Zonder script staat de
   hele lijst open. */
.hn-filtergroup__scroll.is-ingekort label:nth-of-type(n+7) {
	display: none;
}

.hn-filtergroup__meer {
	display: block;
	min-height: var(--hn-tap);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--hn-ui);
	font-weight: var(--hn-weight-bold);
	color: var(--action-primary);
}

.hn-filtergroup__meer:hover {
	color: var(--action-primary-hover);
	text-decoration: underline;
}

.hn-shop__filterkop {
	font-size: var(--hn-label);
	font-weight: var(--hn-weight-bold);
	letter-spacing: var(--hn-tracking);
	text-transform: uppercase;
	color: var(--text-muted);
	margin: var(--hn-s5) 0 var(--hn-s3);
}

.hn-shop__sheetfoot .hn-btn {
	margin-top: var(--hn-s3);
}

/* Met JavaScript filtert elke klik op desktop direct; de Apply-knop is daar
   overbodig. Op een telefoon blijft hij: daar sluit hij het filterpaneel
   ("Show N products"). */
@media (width >= 900px) {
	.hn-shop.hn-js .hn-shop__apply {
		display: none;
	}
}

/* De filterknop en de teller erin bestaan alleen op een telefoon. */
.hn-shop__filterknop {
	display: none;
	gap: var(--hn-s2);
}

.hn-shop__filtertal[hidden] {
	display: none;
}

.hn-shop__filtertal {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--hn-radius-pill);
	background: var(--action-primary);
	color: var(--hn-white);
	font-size: var(--hn-ui);
	font-variant-numeric: tabular-nums;
}

/* ---------- Snelle ingangen boven het raster ----------
   Populaire thema's als chips: één klik zet het filter en springt naar het
   raster. De meeste bezoekers komen voor hún klacht, niet voor 158 producten.
   Ze staan boven het raster en niet meer in de kopband (Ruud, 2026-09-14): daar
   kiest iemand, en de kopband houdt zo één kolom die op een telefoon meteen
   plaatsmaakt voor de producten. Eén rij die opzij schuift — zo kunnen er chips
   bij zonder dat de pagina groeit. */

.hn-kopchips {
	display: flex;
	align-items: center;
	gap: var(--hn-s3);
	margin-bottom: var(--hn-s5);
}

.hn-kopchips__rij {
	display: flex;
	gap: var(--hn-s3);
	overflow-x: auto;
	padding-bottom: 2px;
}

.hn-kopchips__label {
	flex: none;
	font-size: var(--hn-ui);
	font-weight: var(--hn-weight-bold);
	letter-spacing: var(--hn-tracking);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-right: var(--hn-s2);
}

.hn-kopchip {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--hn-s4);
	background: var(--hn-white);
	border: 1px solid var(--hn-line);
	border-radius: var(--hn-radius-pill);
	color: var(--action-primary);
	font-weight: var(--hn-weight-medium);
	text-decoration: none;
}

.hn-kopchip:hover {
	border-color: var(--action-primary);
}

/* Aan: dezelfde vulling als een actief filter, want het ís er een. */
.hn-kopchip.is-aan {
	background: var(--hn-brand-tint);
	border-color: var(--hn-brand);
}

/* Op een telefoon past het label niet naast de rij: "Common concerns" eet daar
   de halve breedte en er blijft één chip over. Het gaat dus op een eigen regel
   erboven, en de rij eronder houdt zijn volle breedte. */
@media (width < 768px) {
	.hn-kopchips {
		display: block;
	}

	.hn-kopchips__label {
		display: block;
		margin: 0 0 var(--hn-s3);
	}
}

/* ---------- Toolbar boven het raster ---------- */

.hn-shop__toolbar {
	display: flex;
	align-items: center;
	gap: var(--hn-s4);
	margin-bottom: 0;
}

.hn-shop__telling {
	flex: 1;
	font-size: var(--hn-ui);
}

/* "Filters" boven de kolom en "Showing N products" boven het raster zijn samen
   één regel over de winkel; op een breed scherm liggen ze daarom in dezelfde
   band van 32px, gecentreerd (Ruud, 2026-09-14). Hun eigen lettermaten
   verschillen, dus uitlijnen op de marge alleen zou ze scheef zetten. */
@media (width >= 900px) {
	.hn-shop__filterkop {
		display: flex;
		align-items: center;
		min-height: 32px;
		margin: 0 0 var(--hn-s3);
	}

	.hn-shop__toolbar {
		min-height: 32px;
	}

	/* Lucht tussen het zoekveld en de eerste rubriek: zoeken en filteren zijn
	   twee manieren om hetzelfde te doen, geen doorlopende lijst. */
	.hn-shop__form > .hn-search {
		margin-bottom: var(--hn-s4);
	}
}

/* Een actief filter is gevuld, een snelle ingang is omlijnd — ze staan vlak bij
   elkaar en zien er anders hetzelfde uit. Zo blijft het verschil zichtbaar
   zonder dat er iets groter wordt (Ruud, 2026-09-14). */
.hn-shop__chips {
	align-items: center;
	margin-top: var(--hn-s4);
}

.hn-shop__chipslabel {
	font-size: var(--hn-ui);
	font-weight: var(--hn-weight-bold);
	letter-spacing: var(--hn-tracking);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-right: var(--hn-s2);
}

.hn-shop__chips .hn-chip {
	background: var(--hn-brand-tint);
	border-color: var(--hn-brand);
}

.hn-shop__chips .hn-chip__x {
	color: var(--hn-brand);
}

/* ---------- Raster ---------- */

/* hn-grid is in het ontwerp een div; hier draagt een lijst de producten, omdat
   het er een is. */
.hn-shop__grid {
	list-style: none;
	margin: var(--hn-s5) 0 0;
	padding: 0;
	max-width: none;
}

.hn-shop__grid > li {
	margin: 0;
}

/* Een weggefilterde kaart is écht weg. Zonder deze regel wint het display:flex
   van .hn-product het van het hidden-attribuut dat het script zet. */
.hn-shop__grid > li[hidden] {
	display: none;
}

/* Op een telefoon blijft het raster twee breed. Het design system zet elk raster
   onder 560px op één kolom, en dat klopt voor tekstblokken — maar niet voor 24
   producten: één kolom maakte de pagina 8368px hoog (gemeten 1 sep 2026), twee
   kolommen halveren dat. Op 375 en 390px, de maten waar de meeste telefoons op
   staan, past het net; smaller dan 360 is zeldzaam en dan wordt een kaart krap. */
@media (width < 560px) {
	.hn-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--hn-s4);
	}
}

/* Tijdens het verversen blijft het oude raster staan, maar gedempt — springen
   naar een lege pagina leest slechter dan even wachten. */
.hn-shop.is-bezig .hn-shop__lijst {
	opacity: .5;
	pointer-events: none;
}

/* Een kaart die net in het mandje legde zegt dat even op de knop (kaart.js):
   het groen van "gelukt". */
.hn-product__cta.is-toegevoegd {
	background: var(--hn-ok);
}

/* ---------- Productpagina ---------- */
/* Boven: beeld links, kopen rechts. De maat van het beeld volgt één regel
   (Ruud, 2026-09-11: op desktop te groot, op tabletmaat ineens schermvullend):
   in twee kolommen krijgt het beeld 40% van de breedte (vanaf 900) of de helft
   (768–900); in één kolom (onder 768) staat het gecentreerd en nooit breder dan
   420px. */

.hn-productpage__top {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: var(--hn-s7);
	align-items: start;
	margin-bottom: var(--hn-s7);
}

@media (width < 900px) {
	.hn-productpage__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--hn-s6);
	}
}

@media (width < 768px) {
	.hn-productpage__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.hn-productpage__galerij {
		width: 100%;
		max-width: 420px;
		margin-inline: auto;
	}
}

/* De kop in drie regels, zoals op de kaart: merk (label), naam (h2-maat — een
   H1 op h1-maat was hier vier regels), functie (tekst, gedempt). */
.hn-productpage__kop {
	margin-bottom: var(--hn-s4);
}

.hn-productpage__merk {
	display: block;
	font-size: var(--hn-label);
	font-weight: var(--hn-weight-bold);
	letter-spacing: var(--hn-tracking);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: var(--hn-s2);
}

.hn-productpage__naam {
	font-size: var(--hn-h2);
	margin: 0;
}

.hn-productpage__functie {
	margin: var(--hn-s2) 0 0;
	color: var(--text-muted);
	max-width: none;
}

.hn-productpage__staat {
	margin-bottom: var(--hn-s4);
}

.hn-productpage__staat .hn-small {
	display: block;
	flex-basis: 100%;
}

/* De korte beschrijving in de tekstletter: Spectral is voor koppen. */
.hn-productpage__kort {
	margin-bottom: var(--hn-s4);
}

.hn-productpage__kort p {
	max-width: none;
}

.hn-productpage__prijs {
	margin-bottom: var(--hn-s4);
}

.hn-productpage__vertrouwen {
	list-style: none;
	margin: var(--hn-s4) 0 0;
	padding: 0;
	font-size: var(--hn-ui);
	color: var(--text-muted);
}

.hn-productpage__vertrouwen li {
	display: flex;
	align-items: center;
	gap: var(--hn-s2);
	margin: 0 0 var(--hn-s2);
}

.hn-productpage__vertrouwen .hn-icon {
	flex: none;
	color: var(--hn-leaf);
}

/* De galerij: hoofdbeeld met de miniaturen eronder. */
.hn-productpage__galerij {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* anders rekt de miniaturenrij de kolom op en schuift de pagina zijwaarts (iPhone, 2026-09-17) */
	gap: var(--hn-s3);
}

.hn-productpage__beeld {
	aspect-ratio: 1;
	background: var(--surface-card);
	border-radius: var(--hn-radius);
	box-shadow: var(--hn-shadow);
	overflow: hidden;
}

.hn-productpage__beeld img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Zoom bij zweven, alleen met een muis: het beeld wordt twee keer zo groot en
   volgt de cursor (product.js zet is-zoom en de transform-origin). Op een
   aanraakscherm gebeurt er niets (Ruud, 2026-09-17). */
@media (hover: hover) and (pointer: fine) {
	.hn-productpage__beeld {
		cursor: zoom-in;
	}

	.hn-productpage__beeld img {
		transition: transform .15s ease-out;
	}

	.hn-productpage__beeld.is-zoom img {
		transform: scale(2);
	}
}

/* De miniaturen zijn knoppen die pas werken als het script draait. */
.hn-productpage__mini {
	display: none;
	min-width: 0;
	gap: var(--hn-s3);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: var(--hn-s1);
}

.hn-productpage__galerij.hn-js .hn-productpage__mini {
	display: flex;
}

.hn-productpage__minibtn {
	position: relative; /* houdt de verborgen tekst ("Image 1") binnen de knop; anders stond die rechts buiten het scherm en schoof de pagina op een telefoon zijwaarts (2026-09-17) */
	flex: 0 0 64px;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--hn-line);
	border-radius: var(--hn-radius);
	background: var(--hn-white);
	cursor: pointer;
	overflow: hidden;
	scroll-snap-align: start;
}

.hn-productpage__minibtn img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hn-productpage__minibtn[aria-current="true"] {
	border-color: var(--hn-brand);
	box-shadow: 0 0 0 1px var(--hn-brand);
}

/* Het koopformulier: eigen markup (inc/product.php) — aantal en knop op één
   regel. De aantal-knoppen komen uit .hn-qty (commerce.css). */
.hn-koop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hn-s3);
	margin-bottom: var(--hn-s4);
}

.hn-koop .hn-qty input {
	-moz-appearance: textfield;
	appearance: textfield;
}

.hn-koop .hn-qty input::-webkit-outer-spin-button,
.hn-koop .hn-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Een hek in het koopformulier (een betaalplugin bij de knop) op een eigen regel. */
.hn-koop > .hn-extern {
	flex-basis: 100%;
}

/* De beschrijving: de leeskolom op leesbreedte met de vangnet-kaart ernaast,
   vast in beeld onder de header. Iets breder dan eerst (340 → 400px; Ruud,
   2026-09-11). Onder 900 komt de kaart onder de tekst. */
.hn-productpage__uitleg {
	display: grid;
	grid-template-columns: minmax(0, var(--hn-measure)) 400px;
	justify-content: space-between;
	gap: var(--hn-s7);
	align-items: start;
}

.hn-productpage__uitlegkop {
	font-size: var(--hn-h3);
	margin: 0 0 var(--hn-s4);
}

.hn-productpage__rail > .hn-card {
	position: sticky;
	top: calc(var(--hn-kop) + var(--hn-s5));
}

@media (width < 900px) {
	.hn-productpage__uitleg {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--hn-s6);
	}

	.hn-productpage__rail > .hn-card {
		position: static;
	}
}

/* Het reviewformulier: ingeklapt achter een knop. */
.hn-productpage__reviewformulier {
	margin-top: var(--hn-s6);
	max-width: var(--hn-measure);
}

.hn-productpage__reviewformulier summary {
	list-style: none;
}

.hn-productpage__reviewformulier summary::-webkit-details-marker {
	display: none;
}

.hn-productpage__reviewformulier[open] summary {
	display: none;
}

/* De secties onder de tekst (verwant, reviews) staan op één afstand van elkaar:
   alleen ruimte erboven, anders telt de ruimte dubbel. */
.hn-productpage > .hn-section--tight {
	padding-bottom: 0;
}

/* De disclaimer: over de volle breedte, als laatste vóór de voet. */
.hn-productpage__disclaimer {
	max-width: none;
	margin: var(--hn-s7) 0 0;
	padding-top: var(--hn-s5);
	border-top: var(--hn-border);
	font-size: var(--hn-ui);
	color: var(--text-muted);
}

/* ---------- Paneelkop en -voet ----------
   Op desktop is de kop gewoon het opschrift "Filters" (de sluitknop is er niet)
   en de voet een rijtje knoppen. Op een telefoon worden ze de vaste boven- en
   onderrand van het schuifpaneel. */

.hn-shop__sheethead {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hn-shop__sluit {
	display: none;
}

/* ---------- Telefoon: intro kort, filters in een schuifpaneel ----------
   Boven het raster staat op een telefoon maar één ding: de regel
   [Filters (n)] + [Sort], plakkend bovenaan het scherm. De filterkolom wordt
   een paneel dat van onderen omhoog schuift (Baymard/v0-ronde, 2026-09-04). */

@media (width < 900px) {
	/* De winkel binnen één scherm: de tweede alinea en de USP-regels gaan er
	   hier af — gratis verzending staat al in de balk bovenaan elke pagina. */
	.hn-shophead__meer {
		display: none;
	}

	.hn-shop__toolbar {
		position: sticky;
		top: var(--hn-kop);
		z-index: 30;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--hn-s3);
		padding: var(--hn-s3) 0;
		background: var(--surface-page);
	}

	.hn-shop__filterknop {
		display: inline-flex;
	}

	/* De rechterhelft van de balk: het aantal, rechts uitgelijnd. Zo zie je na
	   een concern of filter direct "12 products" zonder het paneel te openen;
	   het woord "Showing" is hier overbodig (Ruud, 2026-09-17). */
	.hn-shop__telling {
		text-align: right;
	}

	.hn-shop__telling-woord {
		display: none;
	}

	/* Het paneel: staat klaar onder het scherm en schuift omhoog. Alles hier is
	   aan hn-js gebonden — zonder script blijft de kolom gewoon in de pagina
	   staan, anders zou hij onbereikbaar zijn. */
	.hn-shop.hn-js .hn-shop__zij {
		position: fixed;
		inset: auto 0 0;
		z-index: 55;
		max-height: 88dvh;
		background: var(--surface-page);
		border-radius: var(--hn-radius) var(--hn-radius) 0 0;
		box-shadow: var(--hn-shadow-lift);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform .25s ease, visibility .25s;
	}

	.hn-shop.hn-js.is-open-filter .hn-shop__zij {
		transform: none;
		visibility: visible;
	}

	.hn-shop.hn-js .hn-shop__form {
		display: flex;
		flex-direction: column;
		max-height: 88dvh;
	}

	.hn-shop.hn-js .hn-shop__sheethead {
		flex: none;
		padding: var(--hn-s3) var(--hn-s4);
		border-bottom: var(--hn-border);
	}

	.hn-shop.hn-js .hn-shop__filterkop {
		margin: 0;
	}

	.hn-shop.hn-js .hn-shop__sluit {
		display: inline-flex;
	}

	/* Alleen het middenstuk scrolt; kop en voet blijven staan. */
	.hn-shop.hn-js .hn-shop__form > .hn-search,
	.hn-shop.hn-js .hn-shop__form > .hn-filters {
		margin: var(--hn-s4) var(--hn-s4) 0;
	}

	.hn-shop.hn-js .hn-shop__form > .hn-filters {
		overflow-y: auto;
		border: var(--hn-border);
	}

	.hn-shop.hn-js .hn-shop__sheetfoot {
		flex: none;
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: var(--hn-s3);
		padding: var(--hn-s3) var(--hn-s4);
		border-top: var(--hn-border);
		background: var(--surface-page);
	}

	.hn-shop.hn-js .hn-shop__sheetfoot .hn-btn {
		margin: 0;
	}
}

/* De scrim achter het paneel hoort alleen bij de open stand. */
.hn-shop__scrim {
	z-index: 54;
}

/* ---------- De vangnet-kaart en de thema-tags ---------- */

.hn-shop__vangnet {
	max-width: 480px;
	margin-top: var(--hn-s7);
}

/* ---------- Telefoon: de ingang-rijen swipen ---------- */

@media (width < 768px) {
	ul.hn-swipe {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--hn-s3);
	}

	ul.hn-swipe > li {
		flex: 0 0 70%;
		scroll-snap-align: start;
	}
}

/* ---------- Telefoon: de sticky koopbalk ---------- */

.hn-koopbalk {
	display: none;
}

@media (width < 900px) {
	.hn-koopbalk {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--hn-s4);
		padding: var(--hn-s3) var(--hn-s4);
		padding-bottom: calc(var(--hn-s3) + env(safe-area-inset-bottom));
		background: var(--hn-white);
		border-top: 1px solid var(--hn-line);
	}

	.hn-koopbalk[hidden] {
		display: none;
	}

	.hn-koopbalk__info {
		display: grid;
		min-width: 0;
	}

	.hn-koopbalk__naam {
		overflow: hidden;
		font-size: var(--hn-ui);
		font-weight: var(--hn-weight-bold);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.hn-koopbalk__prijs {
		font-size: var(--hn-ui);
	}
}

/* ---------- Mijn account ----------
   Het menu is van ons; de inhoud is WooCommerce' component in een hek. */

.hn-account {
	display: grid;
	gap: var(--hn-s6);
}

@media (width >= 900px) {
	.hn-account {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}

	/* Niet ingelogd is er geen menu: het inlogformulier krijgt de volle breedte. */
	.hn-account--login {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hn-account__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.hn-account__nav li {
	margin: 0;
}

.hn-account__nav a {
	display: block;
	padding: var(--hn-s3) var(--hn-s4);
	border-radius: var(--hn-radius);
	color: var(--text-body);
	text-decoration: none;
}

.hn-account__nav a:hover {
	background: var(--hn-surface);
}

.hn-account__nav a[aria-current] {
	background: var(--hn-brand-tint);
	color: var(--action-primary);
	font-weight: var(--hn-weight-bold);
}