@charset "UTF-8";
/* WC Plus — producten-loop / archief. Lean, tokens-gedreven, Bootstrap-vrij. */

.wcp-loop__wrap {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}
.wcp-loop__sidebar {
	flex: 0 0 16rem;
}
.wcp-loop__column {
	flex: 1 1 auto;
	min-width: 0;
}
.wcp-loop__heading {
	margin: 0 0 1rem;
}
.wcp-loop__title {
	margin: 0;
}
.wcp-loop__header {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 1rem;
}
.wcp-loop__description {
	margin-top: 2rem;
}

@media ( max-width: 48rem ) {
	.wcp-loop__wrap {
		flex-direction: column;
		/* align-items: flex-start (voor de rij-variant) laat de kolom in kolomrichting naar zijn
		   inhoud krimpen: 265 van 331px op 390px, de subcategorielijst stopte op 80%. */
		align-items: stretch;
	}
	.wcp-loop__sidebar {
		flex: 1 1 auto;
		width: 100%;
	}

	/* Filters, aantal-per-pagina en sortering weer op één regel (was zo vóór de rebuild):
	   telling en het "Sorteren"-label kosten te veel breedte om alle vier te laten passen,
	   dus telling weg (blijft als paginatitel-context) en label a11y-only; de select zelf
	   krimpt tot zijn geselecteerde waarde in plaats van de breedte van de langste optie. */
	.wcp-loop__header {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0.5rem;
	}
	.wcp-loop__header .woocommerce-result-count {
		display: none;
	}
	.wcp-loop__header .wcp-select-wrap label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
		border: 0;
	}
	.wcp-loop__header .wcp-select-wrap:last-child {
		min-width: 0;
		flex: 1 1 auto;
	}
	.wcp-loop__header .wcp-select-wrap:last-child .wcp-select {
		max-width: 100%;
		text-overflow: ellipsis;
	}
}

/* Loop-header dropdowns + telling (was Bootstrap .form-select). */
.wcp-loop__header .woocommerce-result-count {
	float: none; /* WC zet float + margin-bottom 1em, waardoor de telling boven de select hing */
	margin: 0 auto 0 0;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
	line-height: 1;
}
.wcp-select-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.wcp-select {
	min-height: 2.25rem;
	padding: 0.35rem 1.75rem 0.35rem 0.65rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background-color: var(--wcp-surface);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23101820' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 0.7rem;
	transition: border-color 0.15s ease-in-out;
}
.wcp-select:hover {
	border-color: var(--wcp-color-dark);
}
.wcp-select:focus-visible {
	outline: 2px solid var(--wcp-color-primary);
	outline-offset: 1px;
	border-color: var(--wcp-color-primary);
}
/* Filters-knop in de loop-header op dezelfde hoogte als de dropdowns ernaast — anders
   staat hij 5px lager en oogt de rij ongelijk (was .wcp-btn--sm's eigen, kleinere maat).
   Border ook gelijk aan de dropdowns: .wcp-btn--outline's eigen --wcp-color-dark-rand
   (elders in de shop bewust, als losse actieknop) oogt hier te zwaar naast de lichte
   --wcp-color-border van de selects ernaast. */
.wcp-loop__header .wcp-filter-btn {
	min-height: 2.25rem;
	border-color: var(--wcp-color-border);
}
.wcp-loop__header .wcp-filter-btn:hover {
	border-color: var(--wcp-color-dark);
}
.wcp-loop__subtitle {
	margin: 0 0 1rem;
}

/* USP-blok als loop-item. */
li.type-usps {
	list-style: none;
	/* USP-rij tussen de producten: over de volle rasterrij, niet in één cel. */
	grid-column: 1 / -1;
}

/* Actiebanners (blok wcp/banners). Het aantal banners bepaalt de indeling (.wcp-banners--count-N):
   1 volle containerbreedte · 2 naast elkaar · 3 links groot, rechts twee boven elkaar ·
   4 twee hoge boven, twee platte eronder · 5 één volle breedte met vier vierkanten eronder ·
   6 twee rijen van drie. Onder md staan ze altijd onder elkaar. */
.wcp-banners {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0 0 2rem;
}
.wcp-banners > .wcp-banner { min-height: 12rem; }

@media ( min-width: 48rem ) {
	.wcp-banners--count-1 > .wcp-banner { min-height: 22rem; }

	.wcp-banners--count-2 { grid-template-columns: repeat( 2, 1fr ); }
	.wcp-banners--count-2 > .wcp-banner { min-height: 18rem; }

	.wcp-banners--count-3 { grid-template-columns: repeat( 2, 1fr ); grid-template-rows: repeat( 2, minmax( 10rem, 1fr ) ); }
	.wcp-banners--count-3 > :nth-child( 1 ) { grid-row: 1 / 3; min-height: 24rem; }
	.wcp-banners--count-3 > :nth-child( n + 2 ) { min-height: 0; }

	.wcp-banners--count-4 { grid-template-columns: repeat( 2, 1fr ); }
	.wcp-banners--count-4 > :nth-child( -n + 2 ) { min-height: 20rem; }
	.wcp-banners--count-4 > :nth-child( n + 3 ) { min-height: 11rem; }

	.wcp-banners--count-5 { grid-template-columns: repeat( 4, 1fr ); }
	.wcp-banners--count-5 > :nth-child( 1 ) { grid-column: 1 / -1; min-height: 20rem; }
	.wcp-banners--count-5 > :nth-child( n + 2 ) { aspect-ratio: 1 / 1; min-height: 0; }

	.wcp-banners--count-6 { grid-template-columns: repeat( 3, 1fr ); }
	.wcp-banners--count-6 > .wcp-banner { min-height: 14rem; }
}

@media ( min-width: 75rem ) {
	.wcp-banners--count-1 > .wcp-banner { min-height: 26rem; }
	.wcp-banners--count-2 > .wcp-banner { min-height: 22rem; }
	.wcp-banners--count-3 > :nth-child( 1 ) { min-height: 28rem; }
	.wcp-banners--count-4 > :nth-child( -n + 2 ) { min-height: 24rem; }
	.wcp-banners--count-4 > :nth-child( n + 3 ) { min-height: 12rem; }
	.wcp-banners--count-5 > :nth-child( 1 ) { min-height: 24rem; }
	.wcp-banners--count-6 > .wcp-banner { min-height: 16rem; }
}

.wcp-banner { min-height: 12rem; }

/* ── md: grote banner boven, kleine eronder ── */
@media ( min-width: 48rem ) {
	.wcp-banners--count-1 > .wcp-banner { min-height: 25rem; }

	.wcp-banners--count-2 { grid-template-columns: repeat( 2, 1fr ); }
	.wcp-banners--count-2 > .wcp-banner { min-height: 20rem; }

	.wcp-banners--count-3 { grid-template-columns: repeat( 4, 1fr ); }
	.wcp-banners--count-3 > :nth-child( 1 ) { grid-area: 1 / 1 / 3 / 5; min-height: 25rem; }
	.wcp-banners--count-3 > :nth-child( 2 ) { grid-area: 3 / 1 / 4 / 3; min-height: 15rem; }
	.wcp-banners--count-3 > :nth-child( 3 ) { grid-area: 3 / 3 / 4 / 5; min-height: 15rem; }

	.wcp-banners--count-4,
	.wcp-banners--count-5 { grid-template-columns: repeat( 4, 1fr ); }
	.wcp-banners--count-4 > :nth-child( 1 ),
	.wcp-banners--count-5 > :nth-child( 1 ) { grid-area: 1 / 1 / 3 / 5; min-height: 25rem; }
	.wcp-banners--count-4 > :nth-child( 2 ),
	.wcp-banners--count-5 > :nth-child( 2 ) { grid-area: 3 / 1 / 4 / 3; min-height: 15rem; }
	.wcp-banners--count-4 > :nth-child( 3 ),
	.wcp-banners--count-5 > :nth-child( 3 ) { grid-area: 3 / 3 / 4 / 5; min-height: 15rem; }
	.wcp-banners--count-4 > :nth-child( 4 ),
	.wcp-banners--count-5 > :nth-child( 4 ) { grid-area: 4 / 1 / 5 / 3; min-height: 15rem; }
	.wcp-banners--count-5 > :nth-child( 5 ) { grid-area: 4 / 3 / 5 / 5; min-height: 15rem; }

	.wcp-banners--count-6 { grid-template-columns: repeat( 2, 1fr ); }
	.wcp-banners--count-6 > .wcp-banner { min-height: 15rem; }
	.wcp-banners--count-6 > :nth-child( 1 ) { grid-column: 1 / 3; min-height: 22rem; }
}

/* ── xl: definitieve indeling ── */
@media ( min-width: 75rem ) {
	.wcp-banners--count-3 { grid-template-columns: repeat( 3, 1fr ); }
	.wcp-banners--count-3 > :nth-child( 1 ) { grid-area: 1 / 1 / 3 / 3; min-height: 30rem; }
	.wcp-banners--count-3 > :nth-child( 2 ) { grid-area: 1 / 3 / 2 / 4; min-height: 0; }
	.wcp-banners--count-3 > :nth-child( 3 ) { grid-area: 2 / 3 / 3 / 4; min-height: 0; }

	.wcp-banners--count-4,
	.wcp-banners--count-5 { grid-template-columns: repeat( 6, 1fr ); }
	.wcp-banners--count-4 > :nth-child( 1 ),
	.wcp-banners--count-5 > :nth-child( 1 ) { grid-area: 1 / 1 / 3 / 5; min-height: 30rem; }
	.wcp-banners--count-4 > :nth-child( 2 ),
	.wcp-banners--count-5 > :nth-child( 2 ) { grid-area: 1 / 5 / 2 / 7; min-height: 0; }
	.wcp-banners--count-4 > :nth-child( 3 ),
	.wcp-banners--count-5 > :nth-child( 3 ) { grid-area: 2 / 5 / 3 / 7; min-height: 0; }
	.wcp-banners--count-4 > :nth-child( 4 ) { grid-area: 3 / 1 / 4 / 7; min-height: 20rem; }
	.wcp-banners--count-5 > :nth-child( 4 ) { grid-area: 3 / 1 / 4 / 4; min-height: 20rem; }
	.wcp-banners--count-5 > :nth-child( 5 ) { grid-area: 3 / 4 / 4 / 7; min-height: 20rem; }

	/* Zes: grote banner links over twee rijen, vier kleine rechts, zesde onder de grote. */
	.wcp-banners--count-6 { grid-template-columns: repeat( 3, 1fr ); }
	.wcp-banners--count-6 > :nth-child( 1 ) { grid-column: 1 / 2; grid-row: 1 / 3; min-height: 30rem; }
	.wcp-banners--count-6 > :nth-child( n + 2 ) { min-height: 14rem; }
}

.wcp-banner {
	position: relative;
	overflow: hidden;
	border-radius: var(--wcp-radius);
	min-height: 12rem;
	display: flex;
}
.wcp-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.wcp-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
}
.wcp-banner__inner {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	color: #fff;
}
.wcp-banner.is-body .wcp-banner__inner { color: var(--wcp-color-dark); }
.wcp-banner__title { margin: 0; color: inherit; }
.wcp-banner__text { margin: 0; }
.wcp-banner__btn {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	background: var(--wcp-color-secondary);
	color: #fff;
	border-radius: var(--wcp-radius);
	font-size: var(--wcp-font-size-sm);
}

/* FEATURE 2 — CTA-item tussen de producten (li.product.type-cta). */
li.product.wcp-cta {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: 14rem;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-light);
}
/* Met een foto eronder moet de tekst leesbaar blijven: een waas naar onderen in
   de tegenovergestelde kleur van de gekozen tekstkleur (veld Kleur: donker/licht). */
.wcp-cta:not(.wcp-cta--no-img)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient( to top, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 45%, rgba(255, 255, 255, 0) 100% );
}
.wcp-cta.is-white:not(.wcp-cta--no-img)::after {
	background: linear-gradient( to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 100% );
}
.wcp-cta__overlay { position: absolute; inset: 0; z-index: 2; }
.wcp-cta__image { position: absolute; inset: 0; z-index: 0; }
/* Specifieker dan WooCommerce's `.woocommerce img { height: auto }`, dat later
   laadt en de foto anders op zijn natuurlijke hoogte laat staan. */
li.product.wcp-cta .wcp-cta__image img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	margin: 0;
	object-fit: cover;
}
.wcp-cta__info {
	position: relative;
	z-index: 1;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.wcp-cta__info > * { max-width: 100%; }
.wcp-cta--no-img .wcp-cta__info { margin-top: 0; }
.wcp-cta.is-white .wcp-cta__info { color: #fff; }
.wcp-cta__title { margin: 0; font-size: 1.125rem; }
.wcp-cta__text { margin: 0; }
.wcp-cta__btn {
	display: inline-block;
	margin-top: 0.25rem;
	padding: 0.35rem 0.8rem;
	background: var(--wcp-color-primary);
	color: #fff;
	border-radius: var(--wcp-radius);
	font-size: var(--wcp-font-size-sm);
}

/* Paginering (was Bootstrap .pagination/.page-item/.page-link). */
.wcp-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	justify-content: center;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}
.wcp-page-item .wcp-page-link,
.wcp-page-item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	text-decoration: none;
}
.wcp-page-item.is-active .wcp-page-link,
.wcp-page-item.is-active span {
	background: var(--wcp-color-primary);
	color: #fff;
	border-color: var(--wcp-color-primary);
}

/* WooCommerce stijlt nav.woocommerce-pagination als één aaneengesloten balk uit het
   float-tijdperk: randen om de ul en tussen de li's, floats, margin 1px en een grijze
   current-staat (#e9e6ed). Onze nav draagt die klasse bewust — FacetWP en thema's haken
   erop — maar niet die opmaak, en WC's selectoren zijn specifieker dan de onze hierboven.
   Daarom één keer neutraliseren met dezelfde selectorvorm; wij laden later, dus we winnen. */
.woocommerce nav.wcp-pagination-nav,
.woocommerce-page nav.wcp-pagination-nav {
	text-align: left;
}
.woocommerce nav.wcp-pagination-nav ul.wcp-pagination,
.woocommerce-page nav.wcp-pagination-nav ul.wcp-pagination {
	display: flex;
	border: 0;
	margin: 3rem 0 0;
	white-space: normal;
}
.woocommerce nav.wcp-pagination-nav ul.wcp-pagination li,
.woocommerce-page nav.wcp-pagination-nav ul.wcp-pagination li {
	border: 0;
	float: none;
	display: block;
	overflow: visible;
}
/* WC zet op de links/spans zelf display block, padding .5em en line-height 1 (specifieker dan
   .wcp-page-item .wcp-page-link), waardoor het cijfer linksboven in het vakje stond (#89).
   Zelfde selectorvorm, dus wij winnen: vakje van 2.25rem met het cijfer in het midden. */
.woocommerce nav.wcp-pagination-nav ul.wcp-pagination li a,
.woocommerce nav.wcp-pagination-nav ul.wcp-pagination li span,
.woocommerce-page nav.wcp-pagination-nav ul.wcp-pagination li a,
.woocommerce-page nav.wcp-pagination-nav ul.wcp-pagination li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	margin: 0;
	padding: 0 0.5rem;
	line-height: 1;
	box-sizing: border-box;
}
/* Hover en focus terug naar onze eigen staat in plaats van WC's grijs. */
.woocommerce nav.wcp-pagination-nav ul li a:focus,
.woocommerce nav.wcp-pagination-nav ul li a:hover,
.woocommerce-page nav.wcp-pagination-nav ul li a:focus,
.woocommerce-page nav.wcp-pagination-nav ul li a:hover {
	background: var(--wcp-color-light);
	color: var(--wcp-color-primary);
	border-color: var(--wcp-color-primary);
}
/* Huidige pagina in de merkkleur; WC's eigen regel heeft dezelfde vorm, wij laden later. */
.woocommerce nav.wcp-pagination-nav ul li span.current,
.woocommerce nav.wcp-pagination-nav ul li .wcp-page-link.current,
.woocommerce-page nav.wcp-pagination-nav ul li span.current,
.woocommerce-page nav.wcp-pagination-nav ul li .wcp-page-link.current {
	background: var(--wcp-color-primary);
	color: #fff;
	border-color: var(--wcp-color-primary);
}

/* ── Productlabels (badges-zone over de loop-thumb; single-gallery deelt de klassen) ── */
.wcp-loop-thumb { position: relative; display: block; }

/* Uniform image box: shops with uncropped thumbnails serve mixed dimensions
   (300x300 / 300x450 / 300x709); a fixed 1:1 box keeps every card the same
   height and lines the titles/prices/buttons up across the row. */
.woocommerce ul.products li.product .wcp-loop-thumb {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.woocommerce ul.products li.product .wcp-loop-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
}
.wcp-loop-badges {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	pointer-events: none;
}
.wcp-badge-label {
	display: inline-block;
	padding: 0.25rem 0.55rem;
	border-radius: var(--wcp-radius);
	background: var(--wcp-badge-label-bg);
	color: #fff;
	font-size: 0.7rem;
	font-weight: var(--wcp-font-weight-bold);
	line-height: 1.2;
	text-transform: none;
}
.wcp-badge-label--deal,
.wcp-badge-label--last-chance { background: var(--wcp-badge-label-accent-bg); }

/* ── Product-collectie-secties + slider (verplaatst uit single-product.css: secties
   renderen ook op home/landingspagina's — loop.css is de globale looplaag) ── */
/* Product-collectie (related/upsells/cross-sells; was Bootstrap .d-flex/.mb-*). De carousel-JS
   voor --slider volgt in de loop-laag; zonder JS toont dit een net grid. */
.wcp-products {
	margin: 1.5rem 0;
}
.wcp-products__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}
.wcp-products__title {
	margin: 0;
}
/* Optionele link rechts in de kop ("Alle categorieën →", attributen linkText/linkUrl), vóór eventuele
   sliderpijlen. Zonder titel staat hij alleen, rechts. */
.wcp-products__more {
	margin-left: auto;
	align-self: center;
	color: var(--wcp-color-primary);
	font-size: 0.875rem;
	font-weight: var(--wcp-font-weight-bold, 700);
	text-decoration: none;
	white-space: nowrap;
}
.wcp-products__more:hover { text-decoration: underline; }
.wcp-products__more + .wcp-slider-buttons { margin-left: 0.75rem; }
/* Slider zonder titel en link (#210): kop met alleen de knoppen, rechts. Zonder knoppen is de rij met een
   muis niet te scrollen (een muiswiel scrolt niet horizontaal). Op touchapparaten veeg je; daar geen lege kop. */
.wcp-products__head--buttons { justify-content: flex-end; margin-bottom: 0.75rem; }
@media (hover: none) { .wcp-products__head--buttons { display: none; } }
.wcp-products__subtitle {
	display: block;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
}
.wcp-slider-buttons {
	display: flex;
	gap: 0.5rem;
	flex: 0 0 auto;
}
.wcp-slider-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-light);
	cursor: pointer;
}
.wcp-slider-btn:hover {
	background: var(--wcp-color-border);
}
.wcp-slider-btn.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* Non-slider sections: clean grid instead of WC's float columns (floats go
   ragged as soon as card heights differ by a pixel). columns-N maps 1:1. */
/* Hoofd-loop (categorie, zoekresultaten, shop) als raster. WooCommerce laat de
   items floaten; zodra één kaart een andere hoogte heeft — een categoriebanner,
   een kaart met meer specificaties — haakt de volgende rij achter die kaart en
   valt de lijst uit elkaar. In een raster is elke cel even hoog en staat elke
   kaart op zijn plek. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* WooCommerce laat de items floaten met een breedte per kolomaantal
   (.woocommerce.columns-3 ul.products li.product { width: 30.75% }). In het raster
   bepaalt de cel de breedte. Zelfde selectoren als WooCommerce; wij laden later. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce.columns-1 ul.products li.product, .woocommerce-page.columns-1 ul.products li.product, .woocommerce ul.products.columns-1 li.product, .woocommerce-page ul.products.columns-1 li.product,
.woocommerce.columns-2 ul.products li.product, .woocommerce-page.columns-2 ul.products li.product, .woocommerce ul.products.columns-2 li.product, .woocommerce-page ul.products.columns-2 li.product,
.woocommerce.columns-3 ul.products li.product, .woocommerce-page.columns-3 ul.products li.product, .woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product,
.woocommerce.columns-4 ul.products li.product, .woocommerce-page.columns-4 ul.products li.product, .woocommerce ul.products.columns-4 li.product, .woocommerce-page ul.products.columns-4 li.product,
.woocommerce.columns-5 ul.products li.product, .woocommerce-page.columns-5 ul.products li.product, .woocommerce ul.products.columns-5 li.product, .woocommerce-page ul.products.columns-5 li.product,
.woocommerce.columns-6 ul.products li.product, .woocommerce-page.columns-6 ul.products li.product, .woocommerce ul.products.columns-6 li.product, .woocommerce-page ul.products.columns-6 li.product {
	float: none;
	width: auto;
	margin: 0;
}
@media (min-width: 62rem) {
	.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.wcp-products:not(.wcp-products--slider) ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.wcp-products:not(.wcp-products--slider) ul.products > li.product {
	float: none;
	width: auto;
	margin: 0;
}
/* WooCommerce's clearfix-pseudo-elementen (.products::before/::after, display:
   table) worden in een raster of flexbox een lege eerste en laatste cel. De lijst
   is hier nooit meer een float-layout, dus ze kunnen weg (zelfde selectoren, later geladen). */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.wcp-products ul.products::before,
.wcp-products ul.products::after {
	content: none;
}
@media (min-width: 62rem) {
	.wcp-products:not(.wcp-products--slider) ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
	.wcp-products:not(.wcp-products--slider) ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
	.wcp-products:not(.wcp-products--slider) ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
	.wcp-products:not(.wcp-products--slider) ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Slider-modus: de productlijst horizontaal laten scrollen.
   Dubbele klasse (.wcp-products.wcp-products--slider) is bewust: een thema dat zijn eigen
   raster op bijvoorbeeld .wcp-loop .wcp-cats ul.products zet, wint anders op specificiteit
   en zet display terug op grid. De lijst wrapt dan over meerdere rijen, er is geen overflow
   meer en de slider-pijlen verstoppen zichzelf — zonder dat iemand ziet waarom. Wil een shop
   geen slider, dan is daar het filter wcp_loop_subcategories_slider voor. */
.wcp-products.wcp-products--slider ul.products {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 1rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* Arrows are the navigation; the scrollbar only adds visual noise. */
	scrollbar-width: none;
}
.wcp-products--slider ul.products::-webkit-scrollbar {
	display: none;
}
.wcp-products.wcp-products--slider ul.products > li.product {
	flex: 0 0 auto;
	width: clamp( 9rem, 45%, 16rem );
	margin: 0;
	scroll-snap-align: start;
}
/* Desktop: kaartbreedte volgt het kolomaantal zodat de rij exact de container vult
   (zelfde lijn als de banners — geen 16rem-plafond dat de rij smaller maakt). */
@media (min-width: 62rem) {
	.wcp-products.wcp-products--slider ul.products.columns-3 > li.product { width: calc((100% - 2rem) / 3); }
	.wcp-products.wcp-products--slider ul.products.columns-4 > li.product { width: calc((100% - 3rem) / 4); }
	.wcp-products.wcp-products--slider ul.products.columns-5 > li.product { width: calc((100% - 4rem) / 5); }
	.wcp-products.wcp-products--slider ul.products.columns-6 > li.product { width: calc((100% - 5rem) / 6); }
}

/* ── Loopkaart (demo-pariteit: witte kaart, border, knoppen in merkkleur) ── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: #fff;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease;
}
/* Alleen met een muis: op een touchscherm bleef de kaart na een tik in de hover-stand (#187). */
@media (hover: hover) {
	.woocommerce ul.products li.product:hover,
	.woocommerce-page ul.products li.product:hover {
		box-shadow: 0 0.25rem 0.9rem rgba(0, 0, 0, 0.07);
	}
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	color: var(--wcp-color-dark);
}
.woocommerce ul.products li.product .price { color: var(--wcp-color-dark); }
/* WooCommerce zet de actieprijs in <ins>; de browser onderstreept dat standaard, waardoor
   er een streep onder de prijs staat. De productpagina reset het al in single-product.css;
   dit dekt de loopkaart en alles wat verder een prijs rendert. */
.woocommerce .price ins,
.woocommerce-page .price ins {
	background: none;
	text-decoration: none;
}
/* Buy button in the brand colour. The a.button/button.button variants outrank
   WC's own `li.product .button { margin-top: 1em }` (equal specificity, later
   load order). */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button {
	margin-top: 0;
	background: var(--wcp-color-primary);
	color: #fff;
	border-radius: var(--wcp-radius);
	font-weight: var(--wcp-font-weight-bold);
}
.woocommerce ul.products li.product .button:hover {
	background: var(--wcp-color-primary-hover);
}

/* ── Card body (loop-card.php): title/rating → footer (price+stock) → buttons ── */
.woocommerce ul.products li.product .product-info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
.woocommerce ul.products li.product .product-info .wcp-stars {
	margin-top: 0.25rem;
}
/* Footer pinned to the bottom; price left, stock chip right. */
.woocommerce ul.products li.product .product-footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 0.75rem;
}
.woocommerce ul.products li.product .product-footer .price {
	margin: 0;
}
.woocommerce ul.products li.product .product-footer .stock {
	display: inline-block;
	padding: 0.3em 0.7em;
	border-radius: var(--wcp-radius);
	font-size: var(--wcp-font-size-sm);
	font-weight: var(--wcp-font-weight-semibold);
	background: #d9f4e3;
	color: #14833b;
	margin: 0;
}
.woocommerce ul.products li.product .product-footer .stock.out-of-stock {
	background: #fde2e2;
	color: #b42318;
}
.woocommerce ul.products li.product .product-footer .stock.available-on-backorder {
	background: var(--wcp-color-surface-alt);
	color: var(--wcp-color-muted);
}

/* Buttons row: quantity stepper + icon button (wcp-loop-item-add-to-cart add-on
   renders the single add-to-cart form here; without it, WC's loop button). */
.woocommerce ul.products li.product .buttons {
	margin-top: 0.75rem;
}
.woocommerce ul.products li.product .buttons form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
	margin: 0;
}
.woocommerce ul.products li.product .buttons form.cart .variations,
.woocommerce ul.products li.product .buttons form.cart .woocommerce-variation {
	width: 100%;
	margin: 0;
}
.woocommerce ul.products li.product .buttons form.cart table.variations select {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
}
.woocommerce ul.products li.product .buttons form.cart table.variations th.label {
	display: block;
	padding: 0 0 0.25rem;
	font-weight: var(--wcp-font-weight-normal);
	color: var(--wcp-color-muted);
	text-align: left;
}
/* On the card the variation sub-price duplicates the footer price — hide it.
   Single-form extras from add-ons (accessories, engraving) belong on the
   product page, not on a loop card (legacy parity). */
.woocommerce ul.products li.product .buttons .woocommerce-variation-price,
.woocommerce ul.products li.product .buttons .woocommerce-variation-availability,
.woocommerce ul.products li.product .buttons .additional-accessories,
.woocommerce ul.products li.product .buttons .wcp-product-add-ons {
	display: none;
}
/* Variation rows stack: label above a full-width select. */
.woocommerce ul.products li.product .buttons form.cart table.variations,
.woocommerce ul.products li.product .buttons form.cart table.variations tbody,
.woocommerce ul.products li.product .buttons form.cart table.variations tr,
.woocommerce ul.products li.product .buttons form.cart table.variations th,
.woocommerce ul.products li.product .buttons form.cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
}
/* Quantity stepper (same look as the single product form). */
.woocommerce ul.products li.product .buttons .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
	overflow: hidden;
	margin: 0;
}
.woocommerce ul.products li.product .buttons .quantity input.qty {
	width: 2.6rem;
	border: 0;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
	order: 1;
}
.woocommerce ul.products li.product .buttons .quantity input.qty::-webkit-outer-spin-button,
.woocommerce ul.products li.product .buttons .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.woocommerce ul.products li.product .buttons .quantity .minus,
.woocommerce ul.products li.product .buttons .quantity .plus {
	width: 2.1rem;
	align-self: stretch;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--wcp-color-dark);
	font-weight: var(--wcp-font-weight-semibold);
}
.woocommerce ul.products li.product .buttons .quantity .minus { order: 0; }
.woocommerce ul.products li.product .buttons .quantity .plus  { order: 2; }

/* Icon-only cart button: text stays in the DOM for screen readers (font-size 0),
   the cart glyph is a mask so it follows the button colour. Scoped to real
   add-to-cart buttons — external/grouped keep their own label. */
.woocommerce ul.products li.product .buttons .add_to_cart_button,
.woocommerce ul.products li.product .buttons .single_add_to_cart_button {
	/* flex:1 1 auto vult de rij alleen binnen form.cart (flex-ouder, variatie-formulier +
	   quantity-stepper); zonder form-wrapper (simpel product, geen add-on) staat de knop los
	   in .buttons (geen flex-context) en negeert de browser flex-grow — vandaar ook expliciet
	   display:block + width:100% als altijd werkende fallback. */
	display: block;
	width: 100%;
	flex: 1 1 auto;
	min-height: 2.75rem;
	font-size: 0;
	position: relative;
}
.woocommerce ul.products li.product .buttons .add_to_cart_button::before,
.woocommerce ul.products li.product .buttons .single_add_to_cart_button::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.4rem;
	height: 1.4rem;
	background: currentColor;
	-webkit-mask: var(--wcp-icon-cart) center / contain no-repeat; /* zelfde icoon als de header */
	mask: var(--wcp-icon-cart) center / contain no-repeat;
}
.woocommerce ul.products li.product .buttons .single_add_to_cart_button.disabled,
.woocommerce ul.products li.product .buttons .single_add_to_cart_button:disabled {
	opacity: 0.45; /* kleur blijft die van de koopknop (--wcp-buy-button-bg) */
	cursor: not-allowed;
}

/* ── Merkenlijst (WC-native brand-thumbnails binnen de core-sectie) ── */
ul.brand-thumbnails {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
@media (min-width: 48rem) {
	ul.brand-thumbnails { grid-template-columns: repeat(6, 1fr); }
}
ul.brand-thumbnails li {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5rem;
	padding: 1rem;
	background: #fff;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	transition: border-color 0.15s ease;
}
ul.brand-thumbnails li:hover { border-color: var(--wcp-color-primary); }
/* De link vult de kaart; het logo krijgt expliciet auto-maten (SVG-logo's met width/height-attributen zonder
   intrinsieke maat kregen anders 0×0 in de flex-kaart). */
ul.brand-thumbnails li a { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; }
ul.brand-thumbnails li img { display: block; width: auto; height: auto; max-height: 3rem; max-width: 100%; object-fit: contain; }

/* Slider mode: one horizontally scrollable row (same pattern as the product slider). */
.wcp-products--slider ul.brand-thumbnails {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* Arrows are the navigation; the scrollbar only adds visual noise. */
	scrollbar-width: none;
}
.wcp-products--slider ul.brand-thumbnails::-webkit-scrollbar {
	display: none;
}
.wcp-products--slider ul.brand-thumbnails > li {
	flex: 0 0 auto;
	width: clamp(8rem, 30%, 10.5rem);
	scroll-snap-align: start;
}

/* Categorie-kaarten in de loop: WC's gele count-highlight neutraliseren, titel als kaarttitel */
.woocommerce ul.products li.product.product-category .woocommerce-loop-category__title {
	font-size: 1rem;
	color: var(--wcp-color-dark);
	margin: 0.75rem 0 0;
}
/* Same uniform 1:1 image box as product cards — category thumbs are uncropped too. */
.woocommerce ul.products li.product.product-category .image-wrapper {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.woocommerce ul.products li.product.product-category .image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	margin: 0;
}
.woocommerce ul.products li.product.product-category mark {
	background: transparent;
	color: var(--wcp-color-muted);
	font-weight: 400;
}
/* Hele kaart klikbaar (#223): de titellink spant over de kaart (foto en titel blijven ook losse links). */
.woocommerce ul.products li.product.product-category { position: relative; }
.woocommerce ul.products li.product.product-category .category-info a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Huidige categorie tussen haar zuster-tegels — zelfde 'is-active' als de zijbalk-categorienav. */
.woocommerce ul.products li.product.product-category.is-active {
	border-color: var(--wcp-color-primary);
	box-shadow: inset 0 0 0 1px var(--wcp-color-primary);
}

/* ── Compacte variant van dezelfde loopkaart ──
   Staat ná de basiskaart in dit bestand en heeft minstens dezelfde specificiteit
   (.woocommerce ul.products li.product), anders wint de basis op volgorde.
   Eén component, andere maatvoering. De lijst krijgt zelf de variantklasse
   (.woocommerce ul.products.wcp-loop--compact, via woocommerce_product_loop_start); de sectieklasse
   .wcp-products--compact blijft werken. Zet .wcp-products--compact op de sectie (of
   op een eigen wrapper om een [products]-shortcode) en de kaarten worden een
   rij: kleine thumb links, titel en prijs ernaast, koopknop rechts. Gebruikt
   voor gerelateerde producten, uitgelichte producten in het menu en overal waar
   een lijst naast de hoofdinhoud staat. Specificaties en sterren vervallen:
   daar is in deze breedte geen plek voor. */
.wcp-products--compact ul.products > li.product,
.woocommerce ul.products.wcp-loop--compact > li.product {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	align-items: center;
	column-gap: 0.9rem;
	padding: 0.75rem;
}
/* Met een volle-breedte variatieformulier is de kaart altijd flink hoger dan een smalle
   thumb kan dragen. "Thumb links, tekst rechts" (deze paar regels hierboven) is bedacht
   voor een KORTE kaart met één knopje (menu, uitgelicht) — daar prima. Met een
   variatieformulier liet het een groot leeg vlak onder de thumb staan naast de content,
   wat bij kritische review als "lomp" overkwam. Bij een variatieformulier daarom een
   gewone verticale kaart: foto over de volle breedte boven, content eronder — hetzelfde
   patroon als vrijwel elke "snel bestellen"-kaart elders op het web. */
.wcp-products--compact ul.products > li.product:has(.buttons form.cart .variations),
.woocommerce ul.products.wcp-loop--compact > li.product:has(.buttons form.cart .variations) {
	grid-template-columns: 1fr;
}
.wcp-products--compact ul.products > li.product:has(.buttons form.cart .variations) .wcp-loop-thumb,
.woocommerce ul.products.wcp-loop--compact > li.product:has(.buttons form.cart .variations) .wcp-loop-thumb {
	width: 100%;
	margin-bottom: 0.75rem;
}
.wcp-products--compact ul.products > li.product .wcp-loop-thumb img,
.woocommerce ul.products.wcp-loop--compact > li.product .wcp-loop-thumb img {
	height: 6rem;
	object-fit: contain;
}
/* Ná de regel hierboven (i.p.v. hogere :has-specificiteit vertrouwen): height was daar al
   een expliciete declaratie op dezelfde eigenschap, dus moet 'm ook qua brontekst-volgorde
   verslaan. aspect-ratio i.p.v. een vaste hoogte: op mobiel (deze kaart wordt daar één
   brede kolom, zie de single-koloms-slider verderop) maakte een vaste 9rem op volle
   breedte de foto té breed/laag — de meeste productfoto's zijn vierkant met (bewust) veel
   witruimte rond het product, en cover sneed 'm dan tot een dun, leeg reepje. Vierkant
   houdt 'm in verhouding, ongeacht de kaartbreedte. */
.wcp-products--compact ul.products > li.product:has(.buttons form.cart .variations) .wcp-loop-thumb img,
.woocommerce ul.products.wcp-loop--compact > li.product:has(.buttons form.cart .variations) .wcp-loop-thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	max-height: 11rem;
	object-fit: contain;
	border-radius: var(--wcp-radius);
}
/* Titels wisselen in lengte ("Adidas Sportswear Run 80s sneakers" vs. "Floris van Bommel
   De Zager 02.53 suède sneakers geel") en braken daardoor over een ongelijk aantal regels
   — de kaarten in een rij kregen zo elk hun eigen hoogte, wat de rij als geheel rommelig
   maakt. Op twee regels afkappen houdt de rij uitgelijnd. */
.wcp-products--compact ul.products > li.product:has(.buttons form.cart .variations) .woocommerce-loop-product__title,
.woocommerce ul.products.wcp-loop--compact > li.product:has(.buttons form.cart .variations) .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
/* wcp-compare-products' badge (icoon + "Vergelijken") is voor de normale, veel bredere
   thumb ontworpen. Icoon-only (v2.3.26) loste de overlap met de content ernaast op, maar
   op de vaak lichte productfoto oogde het losse witte blokje met rand meer als een storend
   artefact dan als knop — bij kritische review viel dat als eerste op. In de compacte
   kaart is vergelijken sowieso een secundaire actie: badge hier helemaal weg. */
.wcp-products--compact ul.products > li.product .wcp-compare-btn,
.woocommerce ul.products.wcp-loop--compact > li.product .wcp-compare-btn {
	display: none;
}
/* Het "Wis selectie"-linkje (WooCommerce core, .reset_variations) blijft met visibility:hidden
   altijd zijn eigen regelhoogte reserveren (bewust op de volledige productpagina, zodat de
   lay-out niet springt zodra het verschijnt) — in de compacte kaart is dat alleen een kale
   lege strook tussen select en hoeveelheid-stepper. Hier volledig uit de flow. */
.wcp-products--compact ul.products > li.product .buttons form.cart .reset_variations,
.woocommerce ul.products.wcp-loop--compact > li.product .buttons form.cart .reset_variations,
.woocommerce ul.products li.product .buttons form.cart .reset_variations { /* ook de gewone kaart: kaal "Wissen" op een eigen regel; een andere maat kiezen volstaat */
	display: none !important; /* WooCommerce zet na een keuze een inline display */
}
/* Met li.product in de selector: thema's zetten de normale kaart op
   .woocommerce ul.products li.product .product-info { display: flex; align-items: center }
   (0,4,2), en dat won van de compacte variant — titel, prijs en voorraad kwamen gecentreerd
   in een smalle kolom te staan. */
.wcp-products--compact ul.products > li.product .product-info,
.woocommerce ul.products.wcp-loop--compact > li.product .product-info {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	justify-items: stretch;
	column-gap: 0.75rem;
	row-gap: 0.25rem;
	text-align: left;
}
.wcp-products--compact ul.products > li.product .product-info > *,
.woocommerce ul.products.wcp-loop--compact > li.product .product-info > * { grid-column: 1; }
.wcp-products--compact ul.products > li.product .product-info > .buttons,
.woocommerce ul.products.wcp-loop--compact > li.product .product-info > .buttons {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	margin: 0;
}
/* Bij een variabel product zet wcp-loop-item-add-to-cart hier het volledige
   winkelmandformulier (label + volle-breedte select + hoeveelheid + knop) i.p.v. één
   klein knopje — de smalle zijkolom hierboven is daar niet voor ontworpen (auto-breedte
   op de intrinsieke breedte van het formulier, dat elders width:100% verwacht), waardoor
   kolom 1 te smal werd en de titel achter het formulier ging overlappen. Met een
   variatieformulier krijgt .buttons daarom de volle breedte, ónder i.p.v. naast titel/footer. */
.wcp-products--compact ul.products > li.product .product-info > .buttons:has(form.cart .variations),
.woocommerce ul.products.wcp-loop--compact > li.product .product-info > .buttons:has(form.cart .variations) {
	grid-column: 1 / -1;
	grid-row: auto;
	align-self: auto;
}
/* Footer van de compacte kaart: prijs en voorraad links onder elkaar, koopknop rechts en
   verticaal gecentreerd. Als flex-rij stonden "Vanaf"-prijs, voorraad en knop naast elkaar en
   lijnde de prijs rechts uit tegen de voorraad; onder elkaar (zoals v1) leest het rustiger.
   Selector met li.product: de basisfooter staat op .woocommerce ul.products li.product .product-footer
   (0,4,2) en won anders op specificiteit van de variant. */
.wcp-products--compact ul.products > li.product .product-footer,
.woocommerce ul.products.wcp-loop--compact > li.product .product-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 0.75rem;
	row-gap: 0.15rem;
	text-align: left;
}
.wcp-products--compact ul.products > li.product .product-footer > *,
.woocommerce ul.products.wcp-loop--compact > li.product .product-footer > * { grid-column: 1; justify-self: start; }
.wcp-products--compact ul.products > li.product .product-footer > .button,
.woocommerce ul.products.wcp-loop--compact > li.product .product-footer > .button {
	grid-column: 2;
	grid-row: 1 / -1;
	justify-self: end;
}
.wcp-products--compact .featured-attributes,
.woocommerce ul.products.wcp-loop--compact .featured-attributes,
.wcp-products--compact .wcp-stars,
.woocommerce ul.products.wcp-loop--compact .wcp-stars,
.wcp-products--compact .wcp-usps,
.woocommerce ul.products.wcp-loop--compact .wcp-usps { display: none; }

/* Prijs krijgt in de compacte kaart evenveel gewicht als de titel. De kern-CSS levert 'm
   standaard regular en 0.857em (WooCommerce-default voor élke loopkaart); in de compacte
   kaart, met minder andere content om de aandacht te verdelen, viel de prijs zo juist weg
   tégen het voorraadlabel en bijschrift eromheen — terwijl het de belangrijkste regel is
   na de titel. Alleen hier aangescherpt, niet in de gewone (grote) loopkaart. */
.wcp-products--compact ul.products > li.product .product-footer .price,
.woocommerce ul.products.wcp-loop--compact > li.product .product-footer .price {
	font-size: 1rem;
	font-weight: var(--wcp-font-weight-bold);
}

/* Select/hoeveelheid/knop van het variatieformulier (#127) lenen nu 1-op-1 de maatvoering
   van de volledige productpagina (select ~50px, knop 44px) — te fors voor dit kleine
   kaartje en uit verhouding met de rest (voorraadlabel 22px, prijs 16px). Compacter:
   minder padding, kleinere minimumhoogte. Select-tekst blijft op 16px staan (kleiner
   laat iOS inzoomen bij focus); alleen de padding eromheen krimpt. */
.wcp-products--compact ul.products > li.product .buttons form.cart table.variations select,
.woocommerce ul.products.wcp-loop--compact > li.product .buttons form.cart table.variations select {
	height: 2.25rem;
	padding: 0 1.75rem 0 0.6rem;
	/* Zonder eigen pijltje leest de select als een kaal tekstvak i.p.v. een dropdown —
	   op de volledige productpagina toont de browser hier zelf één, maar appearance
	   verschilt te veel per browser/OS voor een consistente compacte kaart. Zelfde pijltje
	   als .wcp-select elders op de site (loop-header, filters). */
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23101820' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	background-size: 0.7rem;
}
.wcp-products--compact ul.products > li.product .buttons .quantity,
.woocommerce ul.products.wcp-loop--compact > li.product .buttons .quantity,
.wcp-products--compact ul.products > li.product .buttons .add_to_cart_button,
.woocommerce ul.products.wcp-loop--compact > li.product .buttons .add_to_cart_button,
.wcp-products--compact ul.products > li.product .buttons .single_add_to_cart_button,
.woocommerce ul.products.wcp-loop--compact > li.product .buttons .single_add_to_cart_button {
	min-height: 2.25rem;
}
/* Stepper bleef op zijn intrinsieke breedte (111px) staan terwijl de knop eronder de volle
   breedte krijgt (flex:1 1 auto, zie hierboven) — twee verschillende breedtes onder elkaar
   oogden onafgemaakt. Zelfde flex:1 1 auto + volle breedte, min/plus met space-between naar
   de randen zodat het geen scheve, half-lege pil wordt. */
.wcp-products--compact ul.products > li.product .buttons .quantity,
.woocommerce ul.products.wcp-loop--compact > li.product .buttons .quantity {
	flex: 1 1 auto;
	width: 100%;
	justify-content: space-between;
}
.wcp-products--compact ul.products > li.product .buttons .quantity input.qty,
.woocommerce ul.products.wcp-loop--compact > li.product .buttons .quantity input.qty {
	height: 2.25rem;
	padding: 0;
}
.wcp-products--compact ul.products > li.product .buttons .quantity .minus,
.woocommerce ul.products.wcp-loop--compact > li.product .buttons .quantity .minus,
.wcp-products--compact ul.products > li.product .buttons .quantity .plus,
.woocommerce ul.products.wcp-loop--compact > li.product .buttons .quantity .plus {
	height: 2.25rem;
}

/* Slider-secties op mobiel als lijst. Thema's (Starter, Lijmkam) maken de loopkaart onder 48rem
   liggend (thumb links, tekst rechts); in een horizontale slider met de kaartbreedte per
   kolomaantal (columns-4 ≈ 150px) brak de titel dan per woord af en vulde de sectie 40% van
   de breedte. Onder 48rem staan de productkaarten onder elkaar op de volle breedte; sliders
   met categoriekaarten (wcp-cats) blijven sliders. */
@media (max-width: 47.99rem) {
	.wcp-products.wcp-products--slider ul.products:not(:has(li.product-category)) {
		flex-direction: column;
		overflow: visible;
		scroll-snap-type: none;
	}
	.wcp-products.wcp-products--slider ul.products:not(:has(li.product-category)) > li.product { width: 100%; }
	.wcp-products.wcp-products--slider:has(ul.products:not(:has(li.product-category))) .wcp-slider-buttons { display: none; }
}

/* "Vanaf" op een eigen regel boven het bedrag. Stond tot 2.2.0 als <br> in de prijs-HTML
   (wcp_add_break_to_price); die brak de prijsregel van binnenuit en liet een lege regel achter. */
.wcp-loop-card .from-price,
.wcp-products .from-price {
	display: block;
	font-size: var(--wcp-font-size-sm);
	font-weight: var(--wcp-font-weight-normal);
	color: var(--wcp-color-muted);
}

/* ── Categorienavigatie in de zijbalk ──
   Deelt .wcp-filter-list met de filterblokken zodat het één geheel blijft; alleen de ouder
   en de inklapper hebben eigen opmaak. */
.wcp-category-nav__item--parent > a {
	font-weight: var(--wcp-font-weight-bold);
	color: var(--wcp-color-dark);
}
/* Niet-ouderregels licht inspringen — leesbaar als "onder" de ouderregel (of, zonder ouder,
   als een groep onder de "Categorieën"-kop), i.p.v. flush tegen dezelfde linkerrand. */
.wcp-category-nav__item:not(.wcp-category-nav__item--parent) > a {
	padding-left: 0.75rem;
}

/* Alleen het gewicht; de kleur van een actieve regel in .wcp-filter-list is een themakeuze
   en daar moet de plugin niet overheen gaan. */
.wcp-category-nav__item a.is-active {
	font-weight: var(--wcp-font-weight-semibold);
}

/* Regels boven de grens: pas zichtbaar als de lijst open staat (wcpUI zet .is-open). */
.wcp-category-nav:not(.is-open) .wcp-category-nav__item--extra {
	display: none;
}

.wcp-category-nav__toggle {
	margin-top: 0.35rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
	text-decoration: underline;
	cursor: pointer;
}
.wcp-category-nav__toggle:hover { color: var(--wcp-color-primary); }

/* Bundel in een productkaart (product/bundle.php): wat er in zit, op één regel — overlappende fototegels
   (stapel) + aantal van de vaste onderdelen. De besparing staat als badge op de foto. */
.wcp-loop-bundle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0.4rem 0 0.6rem; min-width: 0; }
.wcp-loop-bundle__thumbs { display: inline-flex; align-items: center; padding-left: 0.4rem; }
.wcp-loop-bundle__thumb,
.wcp-loop-bundle__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	margin-left: -0.4rem; /* stapel */
	overflow: hidden;
	box-sizing: border-box;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius-sm);
	background: var(--wcp-color-surface);
	box-shadow: 0 0 0 2px var(--wcp-color-surface); /* witte ring: tegels los van elkaar */
}
.wcp-loop-bundle__thumb { position: relative; cursor: help; transition: transform 0.15s ease, border-color 0.15s ease; }
/* Hover/focus: tegel komt uit de stapel naar voren; de tooltip (wcp-ui) toont naam, prijs en "Optioneel". */
.wcp-loop-bundle__thumb:is(:hover, :focus-visible) { z-index: 1; transform: translateY(-2px) scale(1.12); border-color: var(--wcp-color-primary); outline: none; }
.wcp-loop-bundle__thumb img { display: block; width: 100%; height: 100%; padding: 0.15rem; box-sizing: border-box; object-fit: contain; }
.wcp-loop-bundle__more { background: var(--wcp-color-light); color: var(--wcp-color-muted); font-size: 0.6875rem; font-weight: var(--wcp-font-weight-semibold, 600); }
.wcp-loop-bundle__meta { flex: 1 1 auto; min-width: 0; font-size: var(--wcp-font-size-sm); line-height: 1.35; color: var(--wcp-color-muted); } /* mag afbreken: liep anders tegen de rand van de kaart */
.wcp-badge-label--save { background: var(--wcp-color-success); }
/* Optionele bundelonderdelen op de kaart: aan te vinken regel (checkbox, tegel, naam, "+ € 10,57"). */
.wcp-loop-bundle__extras { margin: -0.2rem 0 0.6rem; padding: 0; list-style: none; }
.wcp-loop-bundle__extras li { margin: 0; }
.wcp-loop-bundle__extras li + li { margin-top: 0.3rem; }
.wcp-loop-bundle__extra {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.3rem 0.5rem;
	border: 1px dashed var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	font-size: 0.8125rem;
	color: var(--wcp-color-text);
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}
.wcp-loop-bundle__extra:hover { border-color: color-mix(in srgb, var(--wcp-color-primary) 45%, var(--wcp-color-border)); }
.wcp-loop-bundle__extra:has(:checked) { border-style: solid; border-color: var(--wcp-color-primary); background: color-mix(in srgb, var(--wcp-color-primary) 4%, var(--wcp-color-surface)); }
.wcp-loop-bundle__check { width: 1rem; height: 1rem; margin: 0; accent-color: var(--wcp-color-primary); }
.wcp-loop-bundle__extra .wcp-loop-bundle__thumb { width: 1.6rem; height: 1.6rem; margin: 0; box-shadow: none; cursor: inherit; }
.wcp-loop-bundle__extra .wcp-loop-bundle__thumb:hover { transform: none; }
.wcp-loop-bundle__extra-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wcp-loop-bundle__extra-price { font-weight: var(--wcp-font-weight-semibold, 600); color: var(--wcp-color-dark); white-space: nowrap; }
/* Knop die naar de productpagina gaat om te kiezen ("Stel samen", "Opties selecteren" — samengesteld product, bundel
   met keuzes): tekst + pijltje i.p.v. het winkelwagen-icoon, zodat niemand denkt dat hij direct toevoegt. */
.woocommerce ul.products li.product .buttons .add_to_cart_button:is(.product_type_composite, .product_type_bundle_input_required, .product_type_variable):not(.ajax_add_to_cart) {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	font-size: var(--wcp-font-size-sm);
	font-weight: var(--wcp-font-weight-semibold, 600);
}
.woocommerce ul.products li.product .buttons .add_to_cart_button:is(.product_type_composite, .product_type_bundle_input_required, .product_type_variable):not(.ajax_add_to_cart)::before { content: none; }
.woocommerce ul.products li.product .buttons .add_to_cart_button:is(.product_type_composite, .product_type_bundle_input_required, .product_type_variable):not(.ajax_add_to_cart)::after { content: ''; width: 0.4rem; height: 0.4rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }

/* Koopknop op de kaart (icoon): tijdens het toevoegen een draaiende ring (zoals de kortingscodeknop op de
   afrekenpagina), daarna kort een vinkje i.p.v. het winkelwagen-icoon (wcp-add-to-cart.js zet .loading/.added). */
.woocommerce ul.products li.product .buttons :is(.add_to_cart_button, .single_add_to_cart_button).loading { pointer-events: none; opacity: 1; }
.woocommerce ul.products li.product .buttons :is(.add_to_cart_button, .single_add_to_cart_button).loading::before {
	width: 1.25rem;
	height: 1.25rem;
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	background: transparent;
	-webkit-mask: none;
	mask: none;
	animation: wcp-loop-spin 0.7s linear infinite;
}
.woocommerce ul.products li.product .buttons :is(.add_to_cart_button, .single_add_to_cart_button).added::before {
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
	animation: wcp-loop-pop 0.3s ease;
}
/* WooCommerce' eigen vinkje/spinner (::after, WooCommerce-font) niet erbij. */
.woocommerce ul.products li.product .buttons :is(.add_to_cart_button, .single_add_to_cart_button):is(.loading, .added)::after { content: none !important; }
@keyframes wcp-loop-spin { to { transform: rotate(360deg); } }
@keyframes wcp-loop-pop { from { transform: scale(0.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product .buttons :is(.add_to_cart_button, .single_add_to_cart_button).loading::before { animation-duration: 2s; }
	.woocommerce ul.products li.product .buttons :is(.add_to_cart_button, .single_add_to_cart_button).added::before { animation: none; }
}

/* Aantal en koopknop naast elkaar (kaart mét wcp-loop-item-add-to-cart: het formulier van de productpagina). De knop
   stond op width:100% en sprong daardoor onder het aantal; in het formulier vult hij nu de rest van de rij. */
.woocommerce ul.products li.product .buttons form.cart .single_variation_wrap { width: 100%; }
.woocommerce ul.products li.product .buttons form.cart :is(.woocommerce-variation-add-to-cart, .wcp-loop-qty-row) { display: flex; gap: 0.5rem; width: 100%; }
.woocommerce ul.products li.product .buttons form.cart .quantity { flex: none; }
.woocommerce ul.products li.product .buttons form.cart .single_add_to_cart_button { width: auto; flex: 1 1 3.5rem; min-width: 0; }

/* Losse knop zonder formulier (add-on uit: WooCommerce' eigen loopknop): tekst + icoon, niet alleen het icoon. */
.woocommerce ul.products li.product .buttons > .add_to_cart_button.ajax_add_to_cart {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: var(--wcp-font-size-sm);
	font-weight: var(--wcp-font-weight-semibold, 600);
}
.woocommerce ul.products li.product .buttons > .add_to_cart_button.ajax_add_to_cart::before { position: static; inset: auto; flex: none; margin: 0; width: 1.2rem; height: 1.2rem; }

/* Compacte kaart (gerelateerde producten, canvas, menu): plat — foto links, tekst, één knop rechts. Geen formulier
   (wcp-loop-item-add-to-cart rendert daar de loopknop, zie wcp_loop_is_compact()): direct te bestellen = winkelwagen-
   icoon (met loader/vinkje), met keuzes (variabel, bundel met keuzes, samengesteld) = pijltje naar de productpagina.
   Tekst blijft in de knop voor screenreaders. */
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .buttons > .button {
	position: relative;
	display: block;
	width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	font-size: 0;
}
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .buttons > .button::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.3rem;
	height: 1.3rem;
	background: currentColor;
	-webkit-mask: var(--wcp-icon-cart) center / contain no-repeat;
	mask: var(--wcp-icon-cart) center / contain no-repeat;
}
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .buttons > .button:not(.ajax_add_to_cart)::before {
	width: 0.6rem;
	height: 0.6rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	background: none;
	-webkit-mask: none;
	mask: none;
	transform: translateX(-0.1rem) rotate(45deg);
}
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .buttons > .button:not(.ajax_add_to_cart)::after { content: none; }

/* Variatiekeuzes op de kaart: lucht tussen de rijen (label plakte tegen de swatches erboven), klein label,
   compacte keuzelijst. Label in th of td (per WooCommerce-versie/thema). */
.woocommerce ul.products li.product .buttons form.cart table.variations tr + tr { margin-top: 0.55rem; }
.woocommerce ul.products li.product .buttons form.cart table.variations .label { display: block; padding: 0 0 0.25rem; font-size: 0.8125rem; font-weight: var(--wcp-font-weight-semibold, 600); color: var(--wcp-color-dark); text-align: left; }
.woocommerce ul.products li.product .buttons form.cart table.variations .label label { margin: 0; }
.woocommerce ul.products li.product .buttons form.cart table.variations select { min-height: 2.4rem; padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 0.9375rem; }
.woocommerce ul.products li.product .buttons form.cart table.variations { margin-bottom: 0.25rem; }
/* Compacte knop: zelfde loader en vinkje als de gewone kaartknop. */
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .buttons > .button.loading::before {
	width: 1.2rem; height: 1.2rem; box-sizing: border-box;
	border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
	background: transparent; -webkit-mask: none; mask: none; transform: none;
	animation: wcp-loop-spin 0.7s linear infinite;
}
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .buttons > .button.added::before {
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
	animation: wcp-loop-pop 0.3s ease;
}
/* Compacte knop wint van de tekstknop-regel ("Stel samen ›", "Opties selecteren ›") en van WooCommerce' knopstijl;
   knop onderaan (het hartje van de verlanglijst staat rechtsboven), prijs + "incl. btw" op één regel. */
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .buttons > .button { display: block !important; font-size: 0 !important; gap: 0; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .buttons > .button:not(.ajax_add_to_cart)::after { content: none !important; }
/* Knop rechtsonder in de kaart (het hartje van de verlanglijst staat rechtsboven). grid-row 1 / -1 spande in dit
   raster met automatische rijen alleen de eerste rij — daardoor stond de knop bovenaan, onder het hartje. */
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product { position: relative; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .product-info { padding-right: 3.25rem; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .product-info > .buttons:not(:has(form.cart .variations)) { position: absolute; right: 0.75rem; bottom: 0.75rem; margin: 0; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .product-footer .price { white-space: nowrap; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .buttons > .button::before { content: '' !important; } /* de tekstknop-regel haalt het pijltje anders weg */
/* Inhoudsregel van een bundel/samengesteld product ook in de compacte kaart, iets kleiner. */
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .wcp-loop-bundle { margin: 0.25rem 0 0.35rem; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product :is(.wcp-loop-bundle__thumb, .wcp-loop-bundle__more) { width: 1.6rem; height: 1.6rem; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .wcp-loop-bundle__meta { font-size: 0.8125rem; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .wcp-loop-bundle__extras { display: none; } /* aanvinken kan op de productpagina */
/* Compacte kaart: badge linksboven, hartje rechtsboven en knop rechtsonder — precies op de kaartpadding (0.75rem).
   De badges hingen aan de (verticaal gecentreerde) foto; die is hier geen ankerpunt meer. */
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .wcp-loop-thumb { position: static; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .wcp-loop-badges { top: 0.75rem; left: 0.75rem; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .wishlist-sel { top: 0.75rem; right: 0.75rem; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .product-info > .buttons:not(:has(form.cart .variations)) { right: 0.75rem; bottom: 0.75rem; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .product-info > .buttons:not(:has(form.cart .variations)) { grid-row: auto; grid-column: auto; } /* met een rasterplaatsing rekent "bottom" vanaf het rastervak i.p.v. de kaartpadding */
/* Compacte kaart: geen "Vanaf" — kost hier een eigen regel; de prijs blijft staan. */
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .price .from-price { display: none; }
/* Compacte kaart minder hoog: ruimte voor hartje en knop alleen reserveren waar ze staan (titel rechtsboven, footer
   rechtsonder) i.p.v. over de hele tekstkolom — titel en inhoudsregel krijgen zo de volle breedte en breken minder af.
   Doorgehaalde prijs naast de actieprijs in plaats van erboven (WooCommerce zet er een <br> tussen). */
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .product-info { padding-right: 0; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .woocommerce-loop-product__title { padding-right: 2.25rem; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .product-info > .product-footer { padding-right: 3.25rem; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .product-footer .price br { display: none; }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .product-footer .price del { margin-right: 0.35rem; font-size: 0.8125rem; }
/* Compact raster zonder slider (gerelateerde producten: 2 rijen van 3): liggende kaarten passen niet met 2 naast
   elkaar op een telefoon — daar onder elkaar, op tablet 2 per rij, vanaf 62rem het kolomaantal. */
@media (max-width: 47.99rem) {
	.wcp-products--compact:not(.wcp-products--slider) ul.products { grid-template-columns: minmax(0, 1fr); }
}

/* ══ Archief in de WC+-basisstijl (referentieontwerp) ══════════════════════════════════════════════════════════════
   Kop met titel + aantal en subcategorie-chips rechts, filters als witte kaart, rustige werkbalk, en in de kaart het
   merk boven de titel, voorraad als stip en de actieprijs in --wcp-color-sale. */

/* Kop: titel + aantal producten (templates/loop/header.php) */
.wcp-loop__heading { margin: 0 0 1.25rem; }
.wcp-loop__count { margin: 0.35rem 0 0; color: var(--wcp-color-muted); font-size: 1rem; }

/* Subcategorieën als compacte chips (wcp_loop_subcategories_style = 'chips', standaard): één rij onder de titel,
   links beginnend, horizontaal scrollend — op elke breedte, zoals Lijmkam. Naast de titel (rechts uitgelijnd) werd
   het bij veel subcategorieën een blok van ongelijke rijen dat hoger stond dan de titel. */
.wcp-loop__column > .wcp-loop__heading:has(+ .wcp-cats--chips) { margin-bottom: 1rem; }
.wcp-loop__column > .wcp-cats--chips { margin: 0 0 1.5rem; }
.wcp-loop .wcp-cats.wcp-cats--chips .woocommerce { margin: 0; }
.wcp-loop .wcp-cats.wcp-cats--chips ul.products { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0.6rem; margin: 0; padding: 0 0 0.15rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.wcp-loop .wcp-cats.wcp-cats--chips ul.products::-webkit-scrollbar { display: none; }
/* Eén rij, horizontaal scrollbaar met de slider-pijlen ernaast (data-wcp-slider → wcp-slider.js; de pijlen
   verbergen zich als alles past). */
.wcp-loop .wcp-cats.wcp-cats--chips[data-wcp-slider] { position: relative; }
/* Pijlen als ronde knoppen óver de randen van de rij, met een vervloeiing aan de kant waar nog meer komt;
   een pijl staat er alleen als je die kant op kunt scrollen (is-disabled uit wcp-slider.js). */
.wcp-loop .wcp-cats.wcp-cats--chips > .wcp-slider-buttons { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
.wcp-loop .wcp-cats.wcp-cats--chips .wcp-slider-btn {
	position: absolute;
	top: 50%;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border-radius: 50%;
	background: var(--wcp-color-surface);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transform: translateY(-50%);
	pointer-events: auto;
	transition: opacity 0.15s ease;
}
.wcp-loop .wcp-cats.wcp-cats--chips .wcp-slider-btn--prev { left: 0.25rem; }
.wcp-loop .wcp-cats.wcp-cats--chips .wcp-slider-btn--next { right: 0.25rem; }
.wcp-loop .wcp-cats.wcp-cats--chips .wcp-slider-btn.is-disabled { opacity: 0; pointer-events: none; }
.wcp-loop .wcp-cats.wcp-cats--chips:has(.wcp-slider-btn--next:not(.is-disabled)) ul.products { mask-image: linear-gradient(to right, #000 calc(100% - 4.5rem), transparent); }
.wcp-loop .wcp-cats.wcp-cats--chips:has(.wcp-slider-btn--prev:not(.is-disabled)) ul.products { mask-image: linear-gradient(to right, transparent, #000 4.5rem); }
.wcp-loop .wcp-cats.wcp-cats--chips:has(.wcp-slider-btn--prev:not(.is-disabled)):has(.wcp-slider-btn--next:not(.is-disabled)) ul.products { mask-image: linear-gradient(to right, transparent, #000 4.5rem, #000 calc(100% - 4.5rem), transparent); }
.wcp-loop .wcp-cats.wcp-cats--chips ul.products > li.product.product-category {
	flex: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.7rem;
	width: auto;
	margin: 0;
	padding: 0.4rem 1rem 0.4rem 0.4rem;
	border: var(--wcp-border-width) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
	box-shadow: none;
}
.wcp-loop .wcp-cats.wcp-cats--chips ul.products > li.product.product-category:hover { border-color: var(--wcp-color-primary); box-shadow: none; }
/* Huidige categorie in de zusterrij: zelfde accent als het actieve item in de zijbalk-categorienav (#189). */
.wcp-loop .wcp-cats.wcp-cats--chips ul.products > li.product.product-category.is-active { border-color: var(--wcp-color-primary); background: color-mix(in srgb, var(--wcp-color-primary) 8%, var(--wcp-color-surface)); }
.wcp-loop .wcp-cats.wcp-cats--chips li.product-category.is-active .woocommerce-loop-category__title { color: var(--wcp-color-primary); }
.wcp-loop .wcp-cats.wcp-cats--chips li.product-category .image-wrapper { flex: none; width: 2.6rem; height: 2.6rem; border-radius: calc(var(--wcp-radius) * 0.75); background: var(--wcp-color-surface-alt); }
.wcp-loop .wcp-cats.wcp-cats--chips li.product-category .image-wrapper img { padding: 0.15rem; box-sizing: border-box; }
.wcp-loop .wcp-cats.wcp-cats--chips li.product-category .category-info a { text-decoration: none; }
.wcp-loop .wcp-cats.wcp-cats--chips ul.products li.product-category .woocommerce-loop-category__title { margin: 0; padding: 0; font-size: 0.9375rem; font-weight: var(--wcp-font-weight-semibold, 600); line-height: 1.25; white-space: nowrap; }
.wcp-cat__count { display: none; }
.wcp-cats--chips .wcp-cat__count { display: block; font-size: 0.8125rem; color: var(--wcp-color-muted); white-space: nowrap; }

/* Filters als witte kaart met kop "Filters" (wcp_loop_sidebar_title) */
.wcp-loop__sidebar { flex: 0 0 17rem; padding: 1.25rem 1.25rem 0.75rem; border: var(--wcp-border-width) solid var(--wcp-color-border); border-radius: calc(var(--wcp-radius) * 1.5); background: var(--wcp-color-surface); }
.wcp-loop__sidebar-title { margin: 0 0 0.35rem; font-size: 1.25rem; }
.wcp-offcanvas .wcp-loop__sidebar-title { display: none; }
.wcp-loop__sidebar .wcp-filter { margin: 0; padding: 0.85rem 0; border: 0; border-top: var(--wcp-border-width) solid var(--wcp-color-border); }
.wcp-loop__sidebar .wcp-loop__sidebar-title + .wcp-filter { border-top: 0; padding-top: 0.35rem; }
.wcp-loop__sidebar .facetwp-facet-reset { margin: 0 0 0.5rem; }
.wcp-filter__label button { padding: 0.2rem 0; font-size: 1rem; font-weight: var(--wcp-font-weight-semibold, 600); color: var(--wcp-color-dark); }
.wcp-filter__label button::after { width: 0.45em; height: 0.45em; border-width: 0 1.5px 1.5px 0; color: var(--wcp-color-muted); }
.wcp-filter__body { padding: 0.6rem 0 0.15rem; }

/* Categorienavigatie: regels als knopjes, actieve categorie als pil in de merkkleur */
.wcp-category-nav { margin: 0; padding: 0; list-style: none; }
.wcp-category-nav .wcp-category-nav__item > a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--wcp-radius); font-size: 0.9375rem; color: var(--wcp-color-text); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.wcp-category-nav .wcp-category-nav__item > a:hover { background: var(--wcp-color-light); color: var(--wcp-color-primary); }
.wcp-category-nav .wcp-category-nav__item > a.is-active { background: color-mix(in srgb, var(--wcp-color-primary) 10%, var(--wcp-color-surface)); color: var(--wcp-color-primary); font-weight: var(--wcp-font-weight-semibold, 600); }
.wcp-category-nav .wcp-category-nav__item--parent > a { font-weight: var(--wcp-font-weight-semibold, 600); color: var(--wcp-color-dark); }
.wcp-category-nav__toggle { margin: 0.35rem 0 0 0.75rem; }

/* Filterlijst zonder FacetWP (loop-filters.php): links met een "vinkje" en het aantal rechts */
.wcp-filter-list { margin: 0; padding: 0; list-style: none; }
.wcp-filter-list a { display: flex; align-items: center; gap: 0.65rem; padding: 0.35rem 0; font-size: 0.9375rem; color: var(--wcp-color-text); text-decoration: none; transition: color 0.15s ease; }
.wcp-filter-list a:hover,
.wcp-filter-list a:focus-visible { color: var(--wcp-color-primary); }
.wcp-filter-list a.is-active { color: var(--wcp-color-dark); font-weight: var(--wcp-font-weight-semibold, 600); }
.wcp-filter-list__check { flex-shrink: 0; width: 1.25rem; height: 1.25rem; border: var(--wcp-border-width) solid var(--wcp-color-border); border-radius: 0.3rem; background: var(--wcp-color-surface); transition: background 0.15s ease, border-color 0.15s ease; }
.wcp-filter-list a.is-active .wcp-filter-list__check { border-color: var(--wcp-color-primary); background: var(--wcp-color-primary); }
.wcp-filter-list__count { margin-left: auto; font-size: var(--wcp-font-size-sm); color: var(--wcp-color-muted); font-variant-numeric: tabular-nums; }
.wcp-filter-list__parent a { font-size: 0.9rem; color: var(--wcp-color-muted); }
.wcp-filter-reset { display: inline-block; margin-top: 0.5rem; font-size: var(--wcp-font-size-sm); color: var(--wcp-color-primary); }

/* Tablet/telefoon: filters via de filterknop + offcanvas, zijbalk weg */
@media (max-width: 61.99rem) {
	.wcp-loop__wrap:has(.wcp-filter-btn) > .wcp-loop__sidebar { display: none; }
}

/* Werkbalk: telling links, keuzelijsten wit en op knophoogte */
.wcp-loop__header { margin-bottom: 1.25rem; }
.wcp-loop__header .woocommerce-result-count { font-size: 0.9375rem; line-height: 1.3; }
.wcp-loop__header .wcp-select { min-height: 2.75rem; padding: 0 2.4rem 0 1rem; background-color: var(--wcp-color-surface); background-position: right 0.9rem center; font-size: 0.9375rem; font-weight: var(--wcp-font-weight-semibold, 600); color: var(--wcp-color-dark); }
.wcp-loop__header .wcp-select-wrap label { margin: 0; font-size: 0.9375rem; color: var(--wcp-color-muted); }
.wcp-loop__header .wcp-filter-btn { min-height: 2.75rem; }

/* Productkaart: merk klein in de merkkleur bóven de titel */
.woocommerce ul.products li.product .product-info .wcp-loop-brand { order: -1; margin: 0 0 0.2rem; font-size: 0.8125rem; font-weight: var(--wcp-font-weight-semibold, 600); line-height: 1.3; color: var(--wcp-color-primary); }
:is(.wcp-products--compact ul.products, .woocommerce ul.products.wcp-loop--compact) > li.product .wcp-loop-brand { display: none; }
/* Voorraad als stip + tekst i.p.v. een gekleurde pil */
.woocommerce ul.products li.product .product-footer .stock { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; border-radius: 0; background: none; color: var(--wcp-color-success); font-size: var(--wcp-font-size-sm); font-weight: var(--wcp-font-weight-semibold, 600); }
.woocommerce ul.products li.product .product-footer .stock::before { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.woocommerce ul.products li.product .product-footer .stock.out-of-stock { background: none; color: var(--wcp-color-danger); }
.woocommerce ul.products li.product .product-footer .stock.available-on-backorder { background: none; color: var(--wcp-color-warning); }
/* Actieprijs in de accentkleur, oude prijs klein en gedempt erboven */
.woocommerce ul.products li.product .price ins { color: var(--wcp-color-sale); }
.woocommerce ul.products li.product .price del { font-size: 0.8125rem; font-weight: var(--wcp-font-weight-normal, 400); color: var(--wcp-color-muted); }

/* USP-rij tussen de producten als licht getint vlak */
.woocommerce ul.products li.type-usps { padding: 1.1rem 1.5rem; border-radius: calc(var(--wcp-radius) * 1.5); background: var(--wcp-color-light); }
.woocommerce ul.products li.type-usps .wcp-usps__list { margin: 0; }
/* Elke USP als blok verticaal gecentreerd: icoon en tekst op dezelfde middellijn, kop en subregel strak onder
   elkaar. Breekt maar een deel van de koppen af (smalle rij naast de filterzijbalk), dan staan de blokken
   toch op één lijn. Eerder bovenaan (#187) of met gedeelde regels via subgrid (#190): dan stond een kop van
   één regel steeds hoger of lager dan de rest (#193). */
.woocommerce ul.products li.type-usps .wcp-usps__item { align-content: center; }
.woocommerce ul.products li.type-usps .wcp-usps__item > i { align-self: center; }
/* Smalle kaart (2 kolommen op een telefoon): voorraad onder de prijs i.p.v. buiten de kaart ("Binnenkort beschikbaar"). */
.woocommerce ul.products li.product .product-footer { flex-wrap: wrap; row-gap: 0.25rem; }
.woocommerce ul.products li.product .product-footer .stock { white-space: normal; }
/* Chips rustiger: lager, foto zonder kader op een lichte tint. */
.wcp-loop .wcp-cats.wcp-cats--chips ul.products > li.product.product-category { gap: 0.6rem; padding: 0.3rem 0.85rem 0.3rem 0.3rem; }
.wcp-loop .wcp-cats.wcp-cats--chips li.product-category .image-wrapper { width: 2.25rem; height: 2.25rem; border: 0; box-shadow: none; background: var(--wcp-color-light); }
.wcp-loop .wcp-cats.wcp-cats--chips li.product-category .image-wrapper a,
.wcp-loop .wcp-cats.wcp-cats--chips li.product-category .image-wrapper img { display: block; border: 0; box-shadow: none; background: none; }
.wcp-loop .wcp-cats.wcp-cats--chips li.product-category .woocommerce-loop-category__title { font-size: 0.875rem; }
.wcp-cats--chips .wcp-cat__count { font-size: 0.75rem; }

/* Optionele sticky filterzijbalk (wcp_loop_sidebar_sticky): meescrollend, ook als hij langer is dan het
   scherm. wcp-sticky-sidebar.js zet .is-sticky en stelt `top` per scrollstap bij (begrensd tussen
   "onderkant op de onderkant van het scherm" en --wcp-sidebar-sticky-top, de afstand onder de header). */
.wcp-loop__sidebar--sticky.is-sticky {
	position: sticky;
	top: var(--wcp-sidebar-sticky-top, 1.5rem);
}