/* DQ: melding "niet meer leverbaar" (DQ Nooit meer leverbaar) in de stijl van het design element dq-kaart.
 * Live sinds 28-10-2026. Gebruikt de variabelen uit dq-design-kaart.css. */

.nooit-meer-leverbaar.dq-nml {
	/* Groen van de shop (vinkjes in de USP-balk) */
	--dq-kaart-accent: #7cd320;
	--dq-kaart-knoptekst: #000;
	background: var(--dq-kaart-bg) !important;
	border: 0 !important;
	border-radius: 18px !important;
	padding: 20px 22px !important;
	margin: 20px 0 !important;
}
.nooit-meer-leverbaar.dq-nml > p {
	margin: 0 0 14px !important;
	line-height: 1.6;
}
.nooit-meer-leverbaar.dq-nml > p::before {
	content: '';
	display: block;
	width: 40px;
	height: 4px;
	border-radius: 2px;
	background: var(--dq-kaart-accent);
	margin-bottom: 12px;
}

/* Alternatief als witte tegel met pijl */
.nooit-meer-leverbaar.dq-nml .alternatief-product-wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 0;
	padding: 10px 16px 10px 10px;
	background: #fff;
	border-radius: var(--dq-kaart-tegel-radius);
	box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
	color: inherit;
	text-decoration: none;
	transition: box-shadow .3s, transform .3s;
}
.nooit-meer-leverbaar.dq-nml .alternatief-product-wrapper:hover {
	box-shadow: 0 10px 25px rgb(0 0 0 / 12%);
	transform: translateY(-2px);
}
.nooit-meer-leverbaar.dq-nml .alternatief-product-image img {
	display: block;
	width: 64px;
	max-width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 10px;
}
.nooit-meer-leverbaar.dq-nml .alternatief-product-info {
	flex-grow: 1;
	line-height: 1.35;
}
.nooit-meer-leverbaar.dq-nml .alternatief-product-wrapper::after {
	/* Chevron van het thema (FontAwesome angle-right); de tekst valt terug op het eigen lettertype */
	content: 'Bekijk\00a0\00a0\f105';
	font-family: Montserrat, FontAwesome, sans-serif;
	flex-shrink: 0;
	padding: 8px 14px;
	border-radius: 12px;
	background: var(--dq-kaart-accent);
	color: var(--dq-kaart-knoptekst);
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--dq-kaart-schaduw);
	transition: filter .3s;
}
.nooit-meer-leverbaar.dq-nml .alternatief-product-wrapper:hover::after {
	filter: brightness(1.08);
}

@media (max-width: 479px) {
	.nooit-meer-leverbaar.dq-nml .alternatief-product-wrapper::after {
		content: '\f105';
		font-family: FontAwesome;
		padding: 8px 12px;
	}
}