/**
 * Aanbiedingen — mobiel een rijenlijst, desktop een grid.
 *
 * Ontworpen op 2026-10-18/19 na een pagina die alleen klassen had en geen stylesheet: de
 * kaarten erfden de theme-opmaak en werden halve schermen hoog.
 *
 * ELKE REGEL STAAT ONDER `.dcae-offers`.
 *
 * Dat is niet voor de scoping alleen. Gemeten op staging met Kadence: het theme zet
 * `.entry-content h3` op WITTE tekst en `.entry-content p` op een marge van 1.5em. De eerste
 * versie gebruikte `.dcae-offers__naam { color: inherit }` en `.dcae-offers__prijs { margin: 0 }`,
 * en die verliezen op specificiteit (0,1,0 tegen 0,1,1): de productnaam verdween wit-op-wit en de
 * kaart werd 213px in plaats van 106. Een prefix op elke selector maakt het 0,2,0 — hoger dan het
 * theme, zonder !important.
 *
 * Mobiel: foto links, inhoud rechts, prijs + korting + knop op één regel.
 * Desktop: dezelfde markup, foto boven, drie kolommen naast elkaar.
 */

.dcae-offers {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 18px;
	color: #1a1216;
}

.dcae-offers *,
.dcae-offers *::before,
.dcae-offers *::after {
	box-sizing: border-box;
}

.dcae-offers .dcae-offers__kaart {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 9px;
	margin: 0;
	background: #fff;
	border: 1px solid var(--dcae-border, #e9e2e5);
	border-radius: 11px;
}

/* De foto is een vaste tegel, niet een beeld dat de kaart oprekt. */
.dcae-offers .dcae-offers__beeld {
	width: 74px;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--dcae-product-line, #eee7ea);
	border-radius: 8px;
}

.dcae-offers .dcae-offers__beeld img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	padding: 3px;
	margin: 0;
}

.dcae-offers .dcae-offers__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dcae-offers .dcae-offers__merk {
	display: block;
	margin: 0;
	font-size: 9.5px;
	line-height: 1.4;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dcae-adult-accent, #c2185b);
}

.dcae-offers .dcae-offers__naam {
	display: -webkit-box;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.25;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: #1a1216;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Terugval als een theme `display` overrulet: dan doet de clamp niets en rekt een lange
	   naam de rij op. Twee regels is de bovengrens, hoe dan ook. */
	max-height: 2.5em;
}

/* Prijs, adviesprijs, korting en knop op één regel. De knop duwt zich naar rechts. */
.dcae-offers .dcae-offers__prijsregel {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 2px 0 0;
	padding: 0;
}

.dcae-offers .dcae-offers__prijs {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.2;
	font-weight: 850;
	letter-spacing: -0.02em;
	color: #1a1216;
}

.dcae-offers .dcae-offers__advies {
	margin: 0;
	padding: 0;
	font-size: 11px;
	line-height: 1.2;
	color: var(--dcae-disclosure, #9a8f95);
	text-decoration: line-through;
}

.dcae-offers .dcae-offers__korting {
	font-size: 9.5px;
	line-height: 1.6;
	font-weight: 850;
	color: #fff;
	background: var(--dcae-adult-accent, #c2185b);
	border-radius: 5px;
	padding: 2px 5px;
}

.dcae-offers .dcae-offers__knop {
	/* Boven het klikvlak, maar niet zelf klikbaar: de klik valt door naar het anker. */
	position: relative;
	z-index: 2;
	pointer-events: none;
	display: inline-block;
	margin: 0 0 0 auto;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 7px;
	background: var(--dcae-navy-900, #5c1f3d);
	color: #fff;
	font-size: 12px;
	font-weight: 750;
	line-height: 32px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.dcae-offers .dcae-offers__knop:hover,
.dcae-offers .dcae-offers__knop:focus {
	color: #fff;
	text-decoration: none;
	opacity: 0.92;
}

/* DE HELE TEGEL KLIKBAAR.
 *
 * Het klikvlak van de ene link wordt over de kaart getrokken. Geen omhullende <a>: dat geeft
 * een link in een link (ongeldig), twee tabstops, en — belangrijker — het risico dat het
 * omhullende element een ander doel krijgt dan de poort in de knop. Zo blijft de bestemming
 * die van de knop: een gast komt bij de login uit, ook als hij op de foto klikt.
 */
.dcae-offers .dcae-offers__kaart {
	position: relative;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dcae-offers .dcae-offers__kaart:hover {
	border-color: var(--dcae-slate-300, #d8ccd2);
	box-shadow: 0 6px 18px rgba(40, 20, 30, 0.08);
}

/*
 * HET KLIKVLAK LIGT OVER DE HELE KAART, ALS EIGEN ANKER.
 *
 * De knop is nu een <span> en het anker is een lege laag over de tegel. Reden: toen de knop zelf
 * het anker was en absoluut onderaan hing, werd zijn ::after 40px hoog in plaats van de kaart --
 * foto en tekst waren niet meer klikbaar (gemeten op productie 2026-10-19).
 */
.dcae-offers .dcae-offers__kaart {
	position: relative;
}

.dcae-offers .dcae-offers__klik {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 11px;
}

/* De focusring hoort om de kaart te staan, niet om het knopje: de kaart is wat je activeert. */
.dcae-offers .dcae-offers__klik:focus-visible {
	outline: 3px solid var(--dcae-adult-accent, #c2185b);
	outline-offset: 2px;
	border-radius: 12px;
}

/* De metaregel: eenheid, verzending en de controledatum. */
.dcae-offers .dcae-offers__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 1px 0 0;
	padding: 0;
	font-size: 10.5px;
	line-height: 1.35;
	color: var(--dcae-disclosure, #9a8f95);
}

.dcae-offers .dcae-offers__meta span,
.dcae-offers .dcae-offers__meta time {
	margin: 0;
}

.dcae-offers .dcae-offers__claim,
.dcae-offers .dcae-offers__validatie {
	margin: 2px 0 0;
	padding: 0;
	font-size: 10.5px;
	line-height: 1.35;
	color: var(--dcae-disclosure, #9a8f95);
}

.dcae-offers .dcae-offers__disclaimer {
	margin: 10px 0 0;
	padding: 0;
	font-size: 10.5px;
	line-height: 1.5;
	text-align: center;
	color: var(--dcae-disclosure, #9a8f95);
}

.dcae-offers__leeg {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--dcae-disclosure, #8a7f86);
}

/* ------------------------------------------------------ uitleg boven de lijst */

.dcae-offers__intro {
	position: relative;
	margin: 0 0 12px;
	padding: 10px 12px 10px 14px;
	background: #fff;
	border: 1px solid var(--dcae-border, #e9e2e5);
	border-left: 3px solid var(--dcae-adult-accent, #c2185b);
	border-radius: 11px;
}

.dcae-offers__intro-eyebrow {
	display: block;
	margin: 0 0 3px;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--dcae-adult-accent, #c2185b);
}

.dcae-offers__intro .dcae-offers__intro-kop {
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 1.25;
	font-weight: 750;
	letter-spacing: -0.01em;
	color: #1a1216;
}

.dcae-offers__intro .dcae-offers__intro-tekst {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--dcae-disclosure, #756a70);
}

.dcae-offers__intro .dcae-offers__intro-punten {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 7px 0 0;
	padding: 0;
	list-style: none;
}

.dcae-offers__intro .dcae-offers__intro-punten li {
	position: relative;
	margin: 0;
	padding: 3px 8px 3px 20px;
	font-size: 10.5px;
	line-height: 1.5;
	font-weight: 600;
	color: #3d3238;
	background: var(--dcae-slate-50, #f7f3f5);
	border-radius: 999px;
}

/* Het vinkje als pseudo-element: geen extra markup, geen icoonfont. */
.dcae-offers__intro .dcae-offers__intro-punten li::before {
	content: "✓";
	position: absolute;
	left: 7px;
	top: 2px;
	font-size: 9px;
	font-weight: 900;
	color: var(--dcae-emerald, #0f7b4f);
}

/* ------------------------------------------------------ filters en sortering */

.dcae-offers__filters {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
	margin: 0 0 10px;
	padding: 0;
}

.dcae-offers__filters .dcae-offers__chips {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.dcae-offers__filters .dcae-offers__chips::-webkit-scrollbar {
	display: none;
}

.dcae-offers__filters .dcae-offers__chip {
	flex: 0 0 auto;
	height: 30px;
	line-height: 28px;
	padding: 0 11px;
	border: 1px solid var(--dcae-border, #e9e2e5);
	border-radius: 999px;
	background: #fff;
	color: var(--dcae-disclosure, #756a70);
	font-size: 12px;
	font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
}

.dcae-offers__filters .dcae-offers__chip.is-actief {
	background: var(--dcae-navy-900, #5c1f3d);
	border-color: var(--dcae-navy-900, #5c1f3d);
	color: #fff;
}

.dcae-offers__filters .dcae-offers__sorteer {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	gap: 2px;
	border: 1px solid var(--dcae-border, #e9e2e5);
	border-radius: 8px;
	background: #fff;
	padding: 2px;
}

.dcae-offers__filters .dcae-offers__sorteeroptie {
	padding: 0 8px;
	height: 24px;
	line-height: 24px;
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 650;
	color: var(--dcae-disclosure, #756a70);
	text-decoration: none;
	white-space: nowrap;
}

.dcae-offers__filters .dcae-offers__sorteeroptie.is-actief {
	background: var(--dcae-slate-100, #f2eef0);
	color: #1a1216;
}

/* Een lege status zegt wat er aan de hand is en waarom. */
.dcae-offers__leegblok {
	margin: 0 0 12px;
	padding: 16px;
	background: #fff;
	border: 1px dashed var(--dcae-border, #ded5da);
	border-radius: 11px;
	text-align: center;
}

.dcae-offers__leegtitel {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: #1a1216;
}

.dcae-offers__leeguitleg {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--dcae-disclosure, #8a7f86);
}

/* ------------------------------------------------------ termen onderaan */

.dcae-offers__termen {
	margin: 14px 0 0;
	padding: 12px 14px;
	background: var(--dcae-slate-50, #f7f3f5);
	border: 1px solid var(--dcae-border, #e9e2e5);
	border-radius: 11px;
}

.dcae-offers__termen .dcae-offers__termen-kop {
	margin: 0 0 7px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dcae-disclosure, #756a70);
}

.dcae-offers__termen .dcae-offers__termen-lijst {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}

.dcae-offers__termen dt {
	margin: 0;
	font-size: 11px;
	font-weight: 750;
	color: #1a1216;
}

.dcae-offers__termen dd {
	margin: 0 0 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--dcae-disclosure, #756a70);
}

@media (min-width: 900px) {
	.dcae-offers__termen .dcae-offers__termen-lijst {
		grid-template-columns: max-content 1fr;
		column-gap: 12px;
		row-gap: 5px;
	}

	.dcae-offers__termen dt {
		text-align: right;
	}
}

/* ------------------------------------------------------ groter formaat */

/*
 * De variantregel is een tweede link binnen een kaart die al één groot klikvlak heeft (de
 * ::after van de knop ligt over de hele kaart). Zonder eigen stapelvolgorde is hij onbereikbaar:
 * de overlay vangt de klik. Vandaar position + z-index.
 */
.dcae-offers .dcae-offers__variant {
	position: relative;
	z-index: 3;
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 1.4;
}

.dcae-offers .dcae-offers__variant a {
	color: #7a1f3d;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 650;
}

.dcae-offers .dcae-offers__variant a:hover {
	color: #5c1229;
}

/* ------------------------------------------------------ lege fototegel */

/*
 * De feed levert op dit moment beeld-URL's die 200 met nul bytes antwoorden (gemeten
 * 2026-10-19). Zonder deze regel is dat een lege doos van 131px. Met deze regel wordt het een
 * rustig vlak met de mernaam, zodat de kaart klopt ook als de foto ontbreekt.
 */
.dcae-offers .dcae-offers__beeld.is-leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	/* Iets meer tint dan de fototegel, zodat een kaart zonder foto een bewuste tegel lijkt en
	   geen leeg vlak met een woord erin. */
	background: linear-gradient(135deg, #efe6ea 0%, #e2d5db 100%);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dcae-offers .dcae-offers__beeld.is-leeg::after {
	content: attr(data-merk);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6d5f66;
	text-align: center;
	line-height: 1.35;
	max-width: 100%;
	/* Nooit middenin een merknaam afbreken: op mobiel is de tegel 74px en dan werd
	   "ANEROS" twee regels ("ANE / ROS"). Beter kleiner dan gebroken. */
	hyphens: none;
	word-break: keep-all;
	overflow-wrap: normal;
}

/*
 * Op mobiel is de tegel 74px breed en staat hij naast de tekst. De letterspatiëring en het
 * uppercase-formaat dat op desktop klopt, past daar niet: gemeten 2026-10-20 gaf dat
 * "ANE / ROS" op twee regels. Kleiner en strakker, met minder padding.
 */
@media (max-width: 600px) {
	.dcae-offers .dcae-offers__beeld.is-leeg {
		padding: 6px;
	}

	.dcae-offers .dcae-offers__beeld.is-leeg::after {
		font-size: 9.5px;
		letter-spacing: 0.01em;
	}
}

.dcae-offers .dcae-offers__beeld.is-leeg img {
	display: none;
}

@media (min-width: 900px) {
	.dcae-offers {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	.dcae-offers .dcae-offers__kaart {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		gap: 0;
		padding: 0;
		overflow: hidden;
		/* De kaart vult de rijhoogte. Zonder dit heeft elke kaart zijn eigen hoogte en kan een
		   knop die aan de onderkant vastzit alsnog verspringen. */
		height: 100%;
	}

	/* De inhoud vult de kaart, zodat een rij niet verspringt.
	 *
	 * Zonder dit hangt de hoogte af van hoeveel tekst een product heeft: een tegel met een
	 * marktclaim is twee regels hoger dan een tegel zonder, en dan staan de prijzen en knoppen
	 * in dezelfde rij op verschillende hoogtes. De prijsregel krijgt `margin-top: auto` en zakt
	 * naar de onderkant; de rest blijft bovenaan.
	 */
	.dcae-offers .dcae-offers__body {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.dcae-offers .dcae-offers__beeld {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		border: 0;
		border-bottom: 1px solid var(--dcae-product-line, #eee7ea);
		border-radius: 0;
		background: #fff;
	}

	.dcae-offers .dcae-offers__beeld img {
		padding: 8px;
	}

	.dcae-offers .dcae-offers__body {
		padding: 10px 12px 12px;
		gap: 3px;
	}

	.dcae-offers .dcae-offers__naam {
		font-size: 14px;
	}

	.dcae-offers .dcae-offers__prijs {
		font-size: 18px;
	}

	.dcae-offers .dcae-offers__prijsregel {
		flex-wrap: wrap;
		/* Naar de onderkant van de kaart, zodat prijs en knop in elke tegel van een rij op
		   dezelfde hoogte staan. */
		margin-top: auto;
	}

	/* Twee regels naam, ook als de naam korter is: anders zakt de prijsregel bij een kort
	   product omhoog en staan twee tegels naast elkaar niet gelijk. */
	.dcae-offers .dcae-offers__naam {
		min-height: 2.5em;
	}

	/* DE KNOP AAN DE ONDERKANT VAN DE KAART.
	 *
	 * Gemeten op productie: binnen één rij stonden de knoppen op verschillende hoogtes. Oorzaak:
	 * de knop zit in de prijsregel, en daaronder staan nog meta, marktclaim en variantregel --
	 * die verschillen per kaart. `margin-top: auto` op de prijsregel duwt hem dus naar
	 * "onderkant min de hoogte van wat er nog onder staat", en dat is elke kaart anders.
	 *
	 * Absoluut positioneren ten opzichte van de kaart (die al `position: relative` heeft) haalt
	 * hem uit die optelsom. De body krijgt ruimte vrij zodat de tekst er niet onder schuift.
	 */
	.dcae-offers .dcae-offers__knop {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		margin: 0;
		min-height: 40px;
		line-height: 40px;
		border-radius: 0;
	}

	.dcae-offers .dcae-offers__body {
		padding-bottom: 46px;
	}
}