@charset "UTF-8";
/* WC Plus — componentlaag (bewust klein: benoemde componenten op de tokens, GEEN utilities).
   Add-ons gebruiken deze classes; add-on-specifieke styling blijft in de add-on zelf. */

/* ── WooCommerce-clearfix uitschakelen op onze lijsten ──
   woocommerce.css zet `.woocommerce .products ul::before/::after { content: " "; display: table }`
   als clearfix. Elke ul van ons die binnen .products staat erft dat, en in een grid- of
   flexcontainer zijn pseudo-elementen echte items: de eerste cel blijft leeg en alles schuift
   een plek op. Zichtbaar bij de USP-rij onder een productloop, maar het raakt elke wcp-lijst
   op die plek. `content: none` haalt het pseudo-element helemaal weg. */
.woocommerce .products ul[class*="wcp-"]::before,
.woocommerce .products ul[class*="wcp-"]::after {
	content: none;
}

/* ── Knoppen ── */
.wcp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	color: #fff;
	background-color: var(--wcp-color-primary);
	border: 1px solid transparent;
	border-radius: var(--wcp-radius);
	transition: all 0.2s ease-in-out;
}
.wcp-btn:hover {
	color: #fff;
	background-color: var(--wcp-color-primary-hover);
}
.wcp-btn--outline {
	color: var(--wcp-color-dark);
	background-color: transparent;
	border-color: var(--wcp-color-dark);
}
.wcp-btn--outline:hover {
	color: #fff;
	background-color: var(--wcp-color-dark);
}
.wcp-btn--light {
	color: var(--wcp-color-dark);
	background-color: var(--wcp-color-light);
}
.wcp-btn--light:hover {
	color: var(--wcp-color-primary);
	background-color: var(--wcp-color-light);
}
.wcp-btn--danger {
	color: #9b1c1c;
	background-color: transparent;
	border-color: #9b1c1c;
}
.wcp-btn--danger:hover {
	color: #fff;
	background-color: #9b1c1c;
}
.wcp-btn--sm {
	padding: 0.25rem 0.5rem;
	font-size: var(--wcp-font-size-sm);
}
.wcp-btn--block {
	display: flex;
	width: 100%;
}

/* Kale WooCommerce-knoppen (login/registreren, account-formulieren, bestellingen-tabel-
   acties zoals "Bekijken"/"Retour aanmelden", lege-staat-notices als "Blader door
   producten", de e-mailadres-bevestigen-notice) krijgen dezelfde look als .wcp-btn, zonder
   dat een WC-template de class zelf hoeft te dragen — WC's eigen templates zetten altijd al
   .button op deze knoppen. Specificiteit gelijk aan WC's eigen `.woocommerce a.button` (zie
   woocommerce-general.css): wcp-components.css laadt bewust ná WooCommerce (assets.php,
   prioriteit 20 t.o.v. 10) zodat wij hier winnen. Contexten met een eigen, specifiekere
   regel (loop.css, cart.css, mini-cart.css, myaccount.css) blijven gewoon die eigen regel
   gebruiken. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	color: #fff;
	background-color: var(--wcp-color-primary);
	border: 1px solid transparent;
	border-radius: var(--wcp-radius);
	transition: all 0.2s ease-in-out;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	color: #fff;
	background-color: var(--wcp-color-primary-hover);
}
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce a.button.disabled {
	cursor: default;
	opacity: 0.6;
}

/* ── CTA-knoppen: de conversie-kritieke stappen (in winkelwagen, naar afrekenen, bestelling
   plaatsen) krijgen bewust een eigen accentkleur i.p.v. de algemene merkkleur van .button —
   zo vallen ze visueel op tegenover minder urgente knoppen (bv. "Bekijk winkelwagen").
   --wcp-color-secondary is al gedefinieerd in tokens.css maar stond nog nergens toegepast.
   Kleur via de tokens --wcp-buy-button-bg en --wcp-buy-button-bg-hover (#82): een thema zet die op zijn eigen
   selector (bv. een witte ronde loopknop) en heeft dan geen eigen !important nodig. De !important hieronder is
   alleen het schild tegen WooCommerce' paarse .button.alt-regels (tot 0,5,1 bij :disabled[disabled] en :hover). */
.woocommerce ul.products li.product .buttons .single_add_to_cart_button,
.woocommerce ul.products li.product .buttons .add_to_cart_button,
.single_add_to_cart_button,
.wc-proceed-to-checkout .checkout-button,
.wcp-cart-sticky .checkout-button,
#place_order,
.wcp-mini-cart-canvas .woocommerce-mini-cart__buttons .button.checkout,
.wcp-mini-cart-canvas .wcp-mc__sticky-button {
	background: var(--wcp-buy-button-bg, var(--wcp-color-secondary)) !important;
}
.woocommerce ul.products li.product .buttons .single_add_to_cart_button:hover,
.woocommerce ul.products li.product .buttons .add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.wc-proceed-to-checkout .checkout-button:hover,
.wcp-cart-sticky .checkout-button:hover,
#place_order:hover,
.wcp-mini-cart-canvas .woocommerce-mini-cart__buttons .button.checkout:hover,
.wcp-mini-cart-canvas .wcp-mc__sticky-button:hover {
	background: var(--wcp-buy-button-bg-hover, color-mix( in srgb, var(--wcp-buy-button-bg, var(--wcp-color-secondary)) 85%, black )) !important;
}

/* ── Kaart ── */
.wcp-card {
	background-color: #fff;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
}
.wcp-card--shadow {
	border-color: transparent;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}
.wcp-card__body {
	padding: 1.5rem;
}

/* ── Badge ── */
.wcp-badge {
	display: inline-block;
	padding: 0.35em 0.65em;
	font-size: 0.75em;
	font-weight: var(--wcp-font-weight-bold);
	line-height: 1;
	white-space: nowrap;
	vertical-align: baseline;
	color: #fff;
	background-color: var(--wcp-color-secondary);
	border-radius: var(--wcp-radius);
}

/* ── Tabel ── */
.wcp-table-wrap {
	overflow-x: auto;
}
.wcp-table {
	width: 100%;
	border-collapse: collapse;
}
.wcp-table th,
.wcp-table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--wcp-color-border);
}
.wcp-table thead th {
	font-weight: var(--wcp-font-weight-bold);
	border-bottom-width: 2px;
}
.wcp-table tbody tr:last-child th,
.wcp-table tbody tr:last-child td {
	border-bottom: 0;
}

/* ── Formulieren ── */
.wcp-form__group {
	margin-bottom: 1rem;
}
.wcp-form__label {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
}
.wcp-form__control {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wcp-color-dark);
	background-color: #fff;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	transition: border-color 0.2s ease-in-out;
}
.wcp-form__control:focus {
	outline: 0;
	border-color: var(--wcp-color-primary);
}
.wcp-form__control--sm {
	padding: 0.25rem 0.5rem;
	font-size: var(--wcp-font-size-sm);
}
.wcp-form__check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}
.wcp-form__check input[type="checkbox"],
.wcp-form__check input[type="radio"] {
	margin: 0;
}
.wcp-input-group {
	display: flex;
	align-items: stretch;
	width: 100%;
}
.wcp-input-group .wcp-form__control {
	flex: 1 1 auto;
	width: 1%;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.wcp-input-group__text {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.75rem;
	background-color: var(--wcp-color-light);
	border: 1px solid var(--wcp-color-border);
	border-left: 0;
	border-radius: 0 var(--wcp-radius) var(--wcp-radius) 0;
}

/* ── WooCommerce-native formuliervelden (checkout / mijn-account / adres) ──
   Volwaardige veldhoogte: zonder expliciete font-size vallen invoervelden terug op de piepkleine
   browser-standaard (±13px) → visueel te platte velden. 1rem + ruime line-height geeft normale,
   volwaardige velden. WC+-basis; per project via het thema te overschrijven. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
	border: var(--wcp-border-width) solid #c4cdd5;
	border-radius: var(--wcp-radius);
	padding: 0.45rem 1rem;
	font-size: 1rem;
	line-height: 1.8;
}

/* ── Alert ── */
.wcp-alert {
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: var(--wcp-radius);
	background-color: var(--wcp-color-light);
}
.wcp-alert--warning {
	background-color: #fff3cd;
	color: #664d03;
}
.wcp-alert--small {
	font-size: var(--wcp-font-size-sm);
}

/* Geneste containers vlakken uit: add-on-templates renderen soms al binnen de
   theme-container (v2-startertheme opent main > .wcp-container in header.php). */
.wcp-container .wcp-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* ── Pagina-kop (hoort bij templates/global/page-heading.php) ── */
.wcp-page-heading {
	padding: 1.5rem 0;
}
.wcp-page-heading__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.wcp-page-heading__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
}
.wcp-page-heading__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.wcp-breadcrumb-wrap {
	margin: 0.25rem 0 1rem;
	font-size: var(--wcp-font-size-sm);
	color: var(--wcp-color-muted);
}
.wcp-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Yoast zet alles in één span met tekstscheidingstekens; WC krijgt eigen scheidingstekens. */
.wcp-breadcrumb a { color: inherit; text-decoration: none; }
.wcp-breadcrumb a:hover { color: var(--wcp-color-primary); }
.wcp-breadcrumb .breadcrumb_last,
.wcp-breadcrumb__item:last-child { color: var(--wcp-color-dark); }
.wcp-breadcrumb__sep { color: var(--wcp-color-border); }

/* Op een telefoon kost het volledige pad twee tot drie regels boven de vouw, terwijl de
   bezoeker maar één ding wil: een stap terug. Onder de 48rem vervangt de terugknop het pad;
   daarboven staat het pad er gewoon en blijft de knop verborgen. Zonder link in het pad
   (bijvoorbeeld alleen de huidige pagina) blijft alles bij het oude — zie
   .wcp-breadcrumb-wrap--has-back. */
.wcp-breadcrumb__back {
	display: none;
	align-items: center;
	gap: 0.35rem;
	color: var(--wcp-color-dark);
	font-weight: var(--wcp-font-weight-semibold);
	text-decoration: none;
}
.wcp-breadcrumb__back:hover { color: var(--wcp-color-primary); }

@media (max-width: 47.99rem) {
	.wcp-breadcrumb-wrap--has-back .wcp-breadcrumb { display: none; }
	.wcp-breadcrumb-wrap--has-back .wcp-breadcrumb__back { display: inline-flex; }
}

/* ── Quantity met +/− (WC .quantity; knoppen via core qty-input.php) ── */
.quantity {
	display: inline-flex;
	align-items: stretch;
}
.quantity .qty {
	order: 2;
	width: 3rem;
	text-align: center;
	border: 1px solid var(--wcp-color-border);
	border-left: 0;
	border-right: 0;
	padding: 0.5rem 0.25rem;
	-moz-appearance: textfield;
	appearance: textfield;
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity button.minus,
.quantity button.plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	border: 1px solid var(--wcp-color-border);
	background-color: #fff;
	color: var(--wcp-color-dark);
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}
.quantity button.minus { order: 1; border-radius: var(--wcp-radius) 0 0 var(--wcp-radius); }
.quantity button.plus  { order: 3; border-radius: 0 var(--wcp-radius) var(--wcp-radius) 0; }
.quantity button.minus:hover,
.quantity button.plus:hover { background-color: var(--wcp-color-light); }
.quantity button.minus:before,
.quantity button.plus:before {
	content: '';
	width: 0.875rem;
	height: 0.875rem;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: currentColor;
}
.quantity button.minus:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8'/%3E%3C/svg%3E");
}
.quantity button.plus:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2'/%3E%3C/svg%3E");
}

/* ── Stappen-tijdlijn (retour- + bedankpagina; component — theme en core delen dit) ── */
.wcp-return-steps {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}
@media (min-width: 48rem) {
	.wcp-return-steps { grid-template-columns: repeat(5, 1fr); }
}
.wcp-return-steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.375rem;
}
.wcp-return-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wcp-color-primary);
	color: #fff;
	font-weight: var(--wcp-font-weight-bold);
	font-size: 1.15rem;
	margin-bottom: 0.375rem;
}
.wcp-return-steps__item small { color: var(--wcp-color-muted); }
.wcp-return-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

/* == Shared patterns (deduplicated 2026-07-09) ==================================
   One definition per pattern; legacy selectors are grouped in as aliases so the
   existing markup keeps working. New markup should use the .wcp-* component class. */

/* Corner badge: small primary-colored count bubble on a thumbnail corner
   (mini-cart thumb, checkout review thumb, header cart icon). */
.wcp-corner-badge,
.wcp-mc__qty-badge,
.wcp-checkout__totals .shop_table .product-name .thumb > span,
.woocommerce-view-order table.order_details .product-name .thumb > span {
	position: absolute;
	top: -0.4rem;
	left: -0.4rem;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wcp-color-primary);
	color: #fff;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: var(--wcp-font-weight-bold);
	z-index: 1;
}

/* Icon tile: primary-tinted rounded square holding an icon
   (customer service category cards, contact cards, footer contact row). */
.wcp-icon-tile,
.wcp-cs-cat__icon,
.wcp-cs-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	border-radius: var(--wcp-radius);
	background: color-mix(in srgb, var(--wcp-color-primary) 10%, #fff);
	color: var(--wcp-color-primary);
}

/* Contact card: white card row with icon tile, title + subtitle, hover border
   (klantenservicepagina, 404; de footer van het thema stijlt zijn eigen contactregels). */
.wcp-contact-card,
.wcp-cs-cat,
.wcp-cs-contact__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease;
}
.wcp-contact-card:hover,
.wcp-cs-cat:hover,
.wcp-cs-contact__item:hover {
	border-color: var(--wcp-color-primary);
	text-decoration: none;
}
.wcp-contact-card__text,
.wcp-cs-contact__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.wcp-contact-card__text small,
.wcp-cs-contact__text small { color: var(--wcp-color-muted); }

/* Opening hours table: striped day/time rows, today bolded by wcp-opening-hours.js. */
.wcp-hours-table,
.wcp-cs-hours,
.wcp-opening-hours__table {
	width: 100%;
	border-collapse: collapse;
}
.wcp-hours-table td,
.wcp-cs-hours td,
.wcp-opening-hours__table td { padding: 0.55rem 0.75rem; }
.wcp-hours-table td:last-child,
.wcp-cs-hours__time,
.wcp-opening-hours__time { text-align: right; }
.wcp-hours-table tr:nth-child(odd) td,
.wcp-opening-hours__table tr:nth-child(odd) td { background: var(--wcp-color-light); }
.wcp-hours-table tr.is-today td,
.wcp-cs-hours tr.is-today td,
.wcp-opening-hours__table tr.is-today td { font-weight: var(--wcp-font-weight-bold); }

/* Socials row: icon links in a horizontal strip (footer, customer service card). */
.wcp-socials,
.wcp-cs-card__socials,
.wcp-socials a,
.wcp-cs-card__socials a,
.wcp-socials a:hover,
.wcp-cs-card__socials a:hover,

/* FAQ accordion (native details/summary, JS-free). Visually identical to the
   wcp-tab-faq add-on accordion; shared by faq archive, return page and blog [faq]. */
.wcp-faq-list { max-width: 50rem; margin-bottom: 2rem; }
.wcp-faq-item {
	border-bottom: var(--wcp-border-width) solid var(--wcp-color-border);
}
.wcp-faq-item summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	font-weight: var(--wcp-font-weight-bold);
	cursor: pointer;
}
.wcp-faq-item summary::-webkit-details-marker { display: none; }
.wcp-faq-item summary::after {
	content: '';
	margin-left: auto;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.wcp-faq-item[open] summary::after { transform: rotate(-135deg); }
.wcp-faq-item__answer { padding: 0 0 1rem; }

/* Kaartvariant (.wcp-faq-list--cards): elke vraag een witte kaart met een + in een getint rondje, open = −.
   Gebruikt door de FAQ op de productpagina (wcp-tab-faq); bruikbaar voor elke .wcp-faq-list. */
.wcp-faq-list--cards { display: flex; flex-direction: column; gap: 1rem; }
.wcp-faq-list--cards .wcp-faq-item {
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background-color: var(--wcp-color-surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wcp-faq-list--cards .wcp-faq-item:hover { border-color: color-mix(in srgb, var(--wcp-color-primary) 35%, var(--wcp-color-border)); }
.wcp-faq-list--cards .wcp-faq-item[open] { box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--wcp-color-dark) 6%, transparent); }
.wcp-faq-list--cards .wcp-faq-item summary {
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	line-height: 1.4;
}
.wcp-faq-list--cards .wcp-faq-item summary:focus-visible { outline: 2px solid var(--wcp-color-primary); outline-offset: 2px; border-radius: var(--wcp-radius); }
.wcp-faq-list--cards .wcp-faq-item summary:has(.wcp-faq-item__icon)::after { display: none; }
.wcp-faq-item__icon {
	position: relative;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	margin-left: auto;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wcp-color-primary) 10%, var(--wcp-color-surface));
	color: var(--wcp-color-primary);
	transition: background-color 0.15s ease;
}
.wcp-faq-item__icon::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0.8rem;
	height: 0.8rem;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wcp-faq-item[open] .wcp-faq-item__icon::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.wcp-faq-item summary:hover .wcp-faq-item__icon { background-color: color-mix(in srgb, var(--wcp-color-primary) 18%, var(--wcp-color-surface)); }
.wcp-faq-list--cards .wcp-faq-item__answer {
	padding: 0 1.5rem 1.25rem;
	color: color-mix(in srgb, var(--wcp-color-text) 80%, transparent);
	line-height: 1.7;
}
.wcp-faq-list--cards .wcp-faq-item__answer > :last-child { margin-bottom: 0; }

/* ── USP-lijst (global/usps.php) — overal waar de template wordt gebruikt: header-upper, footer-upper,
   productpagina, cart/checkout en het wcp/usps-blok. Stond tot 2.0 alleen in cart.css, waardoor de
   lijst buiten de winkelwagen als kale <ul> met bullets rendert. ── */
/* USP-rijen: overal dezelfde opbouw — icoon in een zachte ronde merkkleur-badge,
   titel erboven, subregel eronder. De lijst schaalt mee: naast elkaar zolang er
   ruimte is (categoriepagina, productpagina), op smalle schermen onder elkaar. */
.wcp-usps__list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem 1.5rem;
}

.wcp-usps__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.85rem;
	align-items: center;
}

.wcp-usps__item > i {
	grid-row: 1 / span 2;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	/* Afgerond vierkant i.p.v. rond, in dezelfde verhouding als de productfoto's in winkelwagen en
	   mini-cart (var(--wcp-radius) op 2,75rem). */
	border-radius: calc(var(--wcp-radius) * 2.4 / 2.75);
	background: color-mix( in srgb, var(--wcp-color-primary) 15%, var(--wcp-color-surface) );
	color: var(--wcp-color-primary);
	font-size: 1.2rem;
}

.wcp-usps__head,
.wcp-usps__text {
	grid-column: 2;
}

.wcp-usps__head {
	font-weight: var(--wcp-font-weight-bold);
	font-size: 1rem;
	line-height: 1.3;
	color: var(--wcp-color-dark);
}

.wcp-usps__text {
	margin-top: 0.15rem;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
	line-height: 1.35;
}

/* Verticale variant (checkout/bestellijst): altijd één kolom, met scheidingslijn. */
.wcp-usps__list--vertical {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.9rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: var(--wcp-border-width) solid var(--wcp-color-border);
}

.wcp-usps__list--vertical .wcp-usps__item > i {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: calc(var(--wcp-radius) * 2.6 / 2.75);
	font-size: 1.3rem;
}

/* ── Sterbeoordeling (single-product/rating-stars.php) — ook in de loop en in blokken gebruikt;
   stond tot 2.0 alleen in single-product.css, waardoor de sterren daarbuiten in de tekstkleur
   verschenen i.p.v. goud. ── */
.wcp-stars { display: inline-flex; align-items: center; gap: 0.1rem; }
.wcp-stars .svg-icon__star { color: var(--wcp-color-border); }
.wcp-stars .svg-icon__star.filled { color: var(--wcp-color-rating, #f5a623); }
/* Gedeeltelijke ster (rating-stars.php: .remaining met --rating in %): gevuld tot dat percentage. */
.wcp-stars .svg-icon__star.remaining::before { background: linear-gradient(90deg, var(--wcp-color-rating, #f5a623) var(--rating, 0%), var(--wcp-color-border) var(--rating, 0%)); }
.wcp-stars__count { margin-left: 0.4rem; font-size: var(--wcp-font-size-sm); }