@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;
}
.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;
}
.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: 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" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></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" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>') 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 {
	background: var(--wcp-color-primary);
	opacity: 0.45;
	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;
}
/* 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 {
	display: none;
}
/* 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); }