@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;
	}
	.wcp-loop__sidebar {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* Loop-header dropdowns + telling (was Bootstrap .form-select). */
.wcp-loop__header .woocommerce-result-count {
	margin-right: auto;
	color: var(--wcp-color-muted, #6c757d);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
.wcp-select-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.wcp-select {
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	background: var(--wcp-surface, #fff);
}
.wcp-loop__subtitle {
	margin: 0 0 1rem;
}

/* USP-blok als loop-item. */
li.type-usps {
	list-style: none;
}

/* FEATURE 1 — Actiebanners boven de categorie (was Bootstrap .row-type-banners/.block). */
.wcp-banners {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0 0 2rem;
}
@media ( min-width: 48rem ) {
	.wcp-banners--count-2 { grid-template-columns: 1fr 1fr; }
	.wcp-banners--count-3 { grid-template-columns: 2fr 1fr 1fr; }
	.wcp-banners--count-4 { grid-template-columns: repeat( 4, 1fr ); }
	/* 3+ banners: eerste groot (Toppy-stijl). */
	.wcp-banners--count-3 .wcp-banner:first-child,
	.wcp-banners--count-4 .wcp-banner:first-child { grid-row: span 2; }
}
.wcp-banner {
	position: relative;
	overflow: hidden;
	border-radius: var(--wcp-radius, 0.375rem);
	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, #374151); }
.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, #ff6a00);
	color: #fff;
	border-radius: var(--wcp-radius, 0.375rem);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}

/* 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;
	overflow: hidden;
	border-radius: var(--wcp-radius, 0.375rem);
	background: var(--wcp-color-light, #f5f4f0);
}
.wcp-cta__overlay { position: absolute; inset: 0; z-index: 2; }
.wcp-cta__image { position: absolute; inset: 0; z-index: 0; }
.wcp-cta__image img { width: 100%; height: 100%; object-fit: cover; }
.wcp-cta__info {
	position: relative;
	z-index: 1;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.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, #873EFF);
	color: #fff;
	border-radius: var(--wcp-radius, 0.375rem);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}

/* 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, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	text-decoration: none;
}
.wcp-page-item.is-active .wcp-page-link,
.wcp-page-item.is-active span {
	background: var(--wcp-color-primary, #873EFF);
	color: #fff;
	border-color: var(--wcp-color-primary, #873EFF);
}

/* ── 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, 0.375rem);
	background: var(--wcp-badge-label-bg, var(--wcp-color-primary, #873EFF));
	color: #fff;
	font-size: 0.7rem;
	font-weight: var(--wcp-font-weight-bold, 700);
	line-height: 1.2;
	text-transform: none;
}
.wcp-badge-label--deal,
.wcp-badge-label--last-chance { background: var(--wcp-badge-label-accent-bg, #e5641e); }

/* ── 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, #6c757d);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
.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, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	background: var(--wcp-color-light, #f5f4f0);
	cursor: pointer;
}
.wcp-slider-btn:hover {
	background: var(--wcp-color-border, #e5e7eb);
}
.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. */
.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;
}
/* WC's clearfix pseudo-elements become grid items (an empty first cell) — drop them. */
.wcp-products:not(.wcp-products--slider) ul.products::before,
.wcp-products:not(.wcp-products--slider) 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. */
.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--slider ul.products > li.product {
	flex: 0 0 auto;
	width: clamp( 9rem, 45%, 16rem );
	margin: 0 !important;
	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--slider ul.products.columns-3 > li.product { width: calc((100% - 2rem) / 3); }
	.wcp-products--slider ul.products.columns-4 > li.product { width: calc((100% - 3rem) / 4); }
	.wcp-products--slider ul.products.columns-5 > li.product { width: calc((100% - 4rem) / 5); }
	.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, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	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, #374151);
}
.woocommerce ul.products li.product .price { color: var(--wcp-color-dark, #374151); }
/* 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, #873EFF);
	color: #fff;
	border-radius: var(--wcp-radius, 0.375rem);
	font-weight: var(--wcp-font-weight-bold, 700);
}
.woocommerce ul.products li.product .button:hover {
	background: var(--wcp-color-primary-hover, #6f2be6);
}

/* ── 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, 0.375rem);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: var(--wcp-font-weight-semibold, 600);
	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, #f5f4f0);
	color: var(--wcp-color-muted, #6c757d);
}

/* 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, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	background: var(--wcp-color-surface, #fff);
}
.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, 400);
	color: var(--wcp-color-muted, #6c757d);
	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, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	background: var(--wcp-color-surface, #fff);
	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, #374151);
	font-weight: var(--wcp-font-weight-semibold, 600);
}
.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;
	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, #873EFF);
	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, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	transition: border-color 0.15s ease;
}
ul.brand-thumbnails li:hover { border-color: var(--wcp-color-primary, #873EFF); }
ul.brand-thumbnails li img { max-height: 3rem; width: auto; 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;
	scrollbar-width: thin;
}
.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, #374151);
	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, #6c757d);
	font-weight: 400;
}