/*
 * Verzendstaffel in de balk van Blocksy en in de popup (achter ?staging=true,
 * zie verzendstaffel.php).
 *
 * De tekst en de staffel staan samen in .ct-message, en die staat in de HTML
 * vóór de balk. Met display: contents worden het losse vakken van een grid,
 * zodat de staffel onder de balk komt. Alleen waar de staffel er echt staat.
 */
[class*="ct-shipping-progress"]:has(.nrd-staffel-bericht) {
	display: grid;
}

[class*="ct-shipping-progress"]:has(.nrd-staffel-bericht) .ct-message,
[class*="ct-shipping-progress"]:has(.nrd-staffel-bericht) .ct-message > p {
	display: contents;
}

.nrd-staffel {
	grid-row: 3;
	position: relative;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.45;
}

.nrd-staffel__stap {
	white-space: nowrap;
}

.nrd-staffel__stap--nu {
	font-weight: 700;
}

/* Een streepje op de balk bij elke tussenstap: 8px marge plus 5px balk. */
.nrd-staffel__trede {
	position: absolute;
	z-index: 1;
	top: -13px;
	width: 2px;
	height: 5px;
	margin-left: -1px;
	background: var(--theme-palette-color-8);
}

/* Al gratis zonder de grens te halen (alleen een proefpakket): geen balk. */
[class*="ct-shipping-progress"]:has(.nrd-staffel-bericht--gratis) .ct-progress-bar {
	display: none;
}

.ct-added-to-cart-popup-shipping .nrd-verzendtrede {
	display: block;
	font-size: 13px;
	line-height: 1.45;
}

/*
 * Blocksy maakt elke regel van de popup een flexrij zonder omslag, dus de
 * zin werd een derde kolom naast "€7,25 (incl. btw)". Met omslag en de volle
 * breedte staat hij eronder (live sinds 9 oktober 2026).
 */
.ct-added-to-cart-popup-shipping:has(.nrd-verzendtrede) {
	flex-wrap: wrap;
}

.ct-added-to-cart-popup-shipping .nrd-verzendtrede {
	flex-basis: 100%;
	margin-top: 4px;
}