/* Volle kolombreedte. Het blok staat als flex-item in form.cart (WooCommerce Plus zet dat formulier
   op display: flex met flex-wrap) en kromp daardoor naar zijn inhoud; naast de knoppenrij las dat
   als een half blok. */
.bulk-discount {
	flex: 1 1 100%;
	width: 100%;
	box-sizing: border-box;
	border-radius: var(--wcp-radius, 0.375rem);
	background-color: var(--wcp-color-light, #f5f4f0);
	padding: 1rem;
}
.bulk-discount__title { display: block; margin-bottom: 0.5rem; }
.bulk-discount .discounts { display: flex; flex-direction: column; }
/* Drie kolommen: aantal, stukprijs, kortingsbadge. Liep als lopende tekst ("5 stuks voor
   82,51 per stuk. Bespaar 5%"), wat bij meerdere staffels slecht te scannen is. */
/* Aantal links, stukprijs rechts uitgelijnd naast de badge (gelijke cijferbreedte), badge
   uiterst rechts. Met de prijs direct achter het aantal gaapte er een halve tabel tussen prijs
   en badge en verschoof de prijs per regel mee met de breedte van "20 stuks"/"100 stuks". */
.bulk-discount .discount {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.4rem 0;
	cursor: pointer;
	transition: color 0.2s ease-in-out;
}
.bulk-discount .discount + .discount { border-top: 1px solid var(--wcp-color-border, #e5e7eb); }
.bulk-discount .discount__qty { font-weight: var(--wcp-font-weight-semibold, 600); }
.bulk-discount .discount__price { font-weight: var(--wcp-font-weight-semibold, 600); justify-self: end; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bulk-discount .discount__unit { font-weight: var(--wcp-font-weight-normal, 400); font-size: var(--wcp-font-size-sm, 0.875rem); color: var(--wcp-color-muted, #6c757d); }
.bulk-discount .discount__save {
	justify-self: end;
	padding: 0.15rem 0.5rem;
	border-radius: var(--wcp-radius, 0.375rem);
	background: var(--wcp-color-success-soft, #e6f4ea);
	color: var(--wcp-color-success, #1e7e34);
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: var(--wcp-font-weight-semibold, 600);
	white-space: nowrap;
}
.bulk-discount .discount:hover,
.bulk-discount .discount.active { color: var(--wcp-color-primary, #873EFF); }
.bulk-discount small { margin-top: 0.5rem; display: block; }

/* Schakelklasse tussen de staffelblokken per variatie: de template zet hem op elk blok dat niet
   bij het hoofdproduct hoort, js/bulk-prices.js wisselt hem bij found_variation/hide_variation.
   Zonder deze regel stapelen álle variatieblokken onder elkaar — op een product met tien
   variaties tien keer "Staffelkorting op prijs". Heette d-none toen Bootstrap hem nog leverde. */
.bulk-discount.is-hidden {
	display: none;
}

/* Winkelwagen en mini-cart: staffelkorting als chipje naast de prijs (includes/price.php), zelfde
   vorm als het combideal-chipje. */
.wcp-bulk-chip {
	display: inline-block;
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--wcp-color-light);
	color: var(--wcp-color-primary);
	font-size: 0.6875rem;
	font-weight: var(--wcp-font-weight-semibold, 600);
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: middle;
}