/*
 * De productkaart: smaakregel onder de titel en het label "Gratis verzending".
 * Zie productkaart.php.
 *
 * Kleuren uit het palet van Blocksy. Color 10 (#31545B) is ook de tekstkleur
 * van de categorielabels op dezelfde kaart; op wit 8,2:1.
 */

/* Smaak en land ---------------------------------------------------------- */

/* Tussen titel (marge 10px onder) en sterren. Blocksy geeft elke laag van de
   kaart een marge onder; deze regel doet hetzelfde. */
.nrd-kaart-smaak {
	margin: 0 0 12px;
	color: var(--theme-palette-color-10);
	line-height: 1.35;
	text-wrap: balance;
}

.nrd-kaart-smaak__smaak {
	display: block;
	font-size: 16px;
	font-weight: 600;
}

.nrd-kaart-smaak__land,
.nrd-kaart-smaak__tonen {
	display: block;
	font-size: 14px;
	font-weight: 500;
}

/* Label ------------------------------------------------------------------ */

/* Vorm en plek komen van Blocksy, dat elke klasse ct-woo-badge-* als label
   opmaakt, net als "Uitverkocht". Daar staat de tekst in hoofdletters in de
   bron; hier doet de CSS dat, zodat een schermlezer gewoon "Gratis verzending"
   leest. Perzik (color 6) met donkere tekst: 11,6:1. */
.ct-woo-badge-nrd-verzending {
	--badge-background-color: var(--theme-palette-color-6);
	--badge-text-color: var(--theme-palette-color-2);
	text-transform: uppercase;
}

/* Twee naast elkaar op een telefoon -------------------------------------- */

/* Blocksy zet de kaarten onder 690px onder elkaar, elk een scherm hoog. Eerst
   stonden alleen op de homepage "Meest verkocht" twee naast elkaar; sinds
   7 oktober 2026 geldt dat voor elke productlijst: homepage, winkel,
   categorieën, landingspagina's en gerelateerde producten (Aart). Onder
   360px is een kaart van 150px te smal; daar blijft één kolom.

   Twee kolommen vragen een smallere kaart: kleinere titel, kleinere sterren
   zonder het gemiddelde (het aantal blijft), kleinere keurmerken, en prijs en
   knop onder elkaar in twee lage rijen. Tot 8 oktober 2026 stond hier alleen
   de eerste smaakregel; nu ook de tonen. */
@media (min-width: 360px) and (max-width: 689px) {
	ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	/* Het thema rekent met 20px binnenrand: de foto en de knoppenrij zijn 40px
	   breder dan de kaart, en de rij heeft onderaan -20px. Bij 10px opzij
	   moeten die mee, anders valt "Bekijk product" eraf. */
	ul.products li.product {
		padding: 0 10px 20px;
	}

	ul.products li.product > figure,
	ul.products .ct-woo-card-actions {
		width: calc(100% + 20px);
		margin-inline: -10px;
	}

	ul.products .woocommerce-loop-product__title {
		font-size: 17px;
		line-height: 1.2;
	}

	ul.products .nrd-kaart-smaak > span {
		font-size: 14px;
		line-height: 1.35;
	}

	ul.products .ct-rating-average {
		display: none;
	}

	ul.products .ct-woo-card-rating {
		gap: 6px;
	}

	ul.products .ct-woo-card-rating .star-rating {
		font-size: 12px;
	}

	ul.products .ct-product-brands {
		--product-brand-logo-size: 36px;
		--product-brands-gap: 8px;
	}

	ul.products .ct-woo-card-actions {
		flex-direction: column;
		align-items: stretch;
	}

	/* Het streepje tussen prijs en knop hoort bij naast elkaar. */
	ul.products .ct-woo-card-actions .price::after {
		content: none;
	}

	ul.products .ct-woo-card-actions > * {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 100%;
		min-height: 44px;
		padding: 6px 4px;
		font-size: 14px;
	}

	ul.products .ct-woo-card-actions > .button {
		border-top: 1px solid rgba(49, 84, 91, 0.12);
	}
}

/* Rustige kaart (live sinds 8 oktober 2026) ------------------------------- */

/* Variant B die Aart koos na een vergelijking met acht koffiewinkels: links
   uitgelijnd, de categorie als woord in plaats van een pil, sterren met alleen
   het aantal en onderaan "vanaf" met de knop. Zie nrd_kaart_rustig_aan() in
   productkaart.php. Eerst achter ?staging=true bekeken; terug naar de oude
   kaart: dit blok weghalen en nrd_kaart_rustig_aan() op false.

   De kaart blijft Blocksy's kolom; de variabelen zetten de inhoud links. */
ul.products li.product {
	--horizontal-alignment: flex-start;
	--text-horizontal-alignment: left;
	text-align: left;
	box-shadow:
		0 0 0 1px rgb(49 84 91 / 0.08),
		0 10px 24px -14px rgb(13 34 38 / 0.28);
	transition: box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wit op mintgroen (palet 7) scheelt weinig, en Blocksy's schaduw staat op
   3%. Een randje in petrol maakt de kaart scherp, de zachte schaduw eronder
   tilt hem op, en bij hover wordt die dieper: de hele kaart is een link. De
   foto zoomt al in, dus de kaart zelf beweegt niet. Aart, 7 oktober 2026. */
@media (hover: hover) {
	ul.products li.product:hover {
		box-shadow:
			0 0 0 1px rgb(49 84 91 / 0.12),
			0 18px 32px -16px rgb(13 34 38 / 0.34);
	}
}

ul.products li.product > .entry-meta,
ul.products li.product > .woocommerce-loop-product__title {
	margin-bottom: 6px;
}

ul.products li.product > .nrd-kaart-smaak {
	text-wrap: pretty;
}

ul.products li.product > .ct-woo-card-rating {
	margin-bottom: 16px;
}

/* Zelf de cafeïne kiezen (Low Caffeine, nrd_kaart_cafeine_aan() in
   productkaart.php): een regel onder de herkomst, met vier bonen waarvan twee
   vol, zoals in de keuzehulp op de productpagina. Petrol op wit: 8,2:1.
   Time to Relax krijgt dezelfde regel met "30% cafeïne" en één boon vol
   (nrd_kaart_cafeine_vast_aan()). */
ul.products li.product > .nrd-kaart-cafeine {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -4px 0 12px;
	color: var(--theme-palette-color-10, #31545b);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	text-wrap: balance;
}

.nrd-kaart-cafeine .nrd-cafeine__bonen {
	flex: none;
	width: 20px;
	height: 20px;
}

.nrd-kaart-cafeine .nrd-cafeine__boon ellipse {
	fill: #fff;
	stroke: var(--theme-palette-color-1, #749b8d);
	stroke-width: 1.4;
}

.nrd-kaart-cafeine .nrd-cafeine__boon path {
	fill: none;
	stroke: var(--theme-palette-color-1, #749b8d);
	stroke-width: 1;
	stroke-linecap: round;
}

.nrd-kaart-cafeine .nrd-cafeine__boon.is-vol ellipse {
	fill: var(--theme-palette-color-10, #31545b);
	stroke: var(--theme-palette-color-10, #31545b);
}

.nrd-kaart-cafeine .nrd-cafeine__boon.is-vol path {
	stroke: rgba(255, 255, 255, 0.7);
}

/* Geen keurmerken op de kaart: die laag zet productkaart.php uit. */

/* De balk onderaan op dezelfde hoogte als bij de buren. */
ul.products li.product > .ct-woo-card-actions {
	margin-top: auto;
}

/* De categorie als woord, in label-klein uit DESIGN.md (13px, 600). Kleur 10
   zoals de pil had: op wit 8,2:1. */
ul.products .entry-meta [data-type="pill"] a {
	padding: 0;
	background: none;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--theme-palette-color-10);
}

ul.products .entry-meta [data-type="pill"] a + a::before {
	content: "·";
	margin-right: 6px;
}

ul.products .ct-rating-average {
	display: none;
}

/* De smaak en de tonen in dezelfde grootte; het gewicht maakt het verschil. */
ul.products .nrd-kaart-smaak > span {
	font-size: 15px;
}

/* Prijs links, knop rechts, zonder streepje ertussen. Past het niet naast
   elkaar (de smalle kaart naast de filterbalk), dan komt de knop eronder. */
ul.products .ct-woo-card-actions {
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	gap: 6px 12px;
	min-height: 56px;
	padding: 12px 20px;
}

/* Blocksy geeft prijs en knop elk 55px hoogte; over twee regels werd de balk
   zo 141px hoog. De balk zelf houdt de hoogte. */
ul.products .ct-woo-card-actions > * {
	flex: none;
	min-height: 0;
	padding: 0;
}

ul.products .ct-woo-card-actions .price {
	font-size: 16px;
	font-weight: 700;
}

/* Het streepje en het centreren komen van Blocksy's kaarttype 2. Zelfde
   selector als daar, dus niet zwaarder; deze regels komen later. */
[data-products="type-2"] .ct-woo-card-actions .price {
	justify-content: flex-start;
}

[data-products="type-2"] .ct-woo-card-actions .price:not(:only-child)::after {
	content: none;
}

ul.products .nrd-vanaf {
	font-size: 14px;
	font-weight: 500;
	color: var(--theme-palette-color-10);
}

ul.products .ct-woo-card-actions > .button {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* Twee kaarten naast elkaar: de balk blijft twee rijen onder elkaar, maar dan
   links, net als de tekst erboven. */
@media (min-width: 360px) and (max-width: 689px) {
	ul.products .nrd-kaart-smaak > span {
		font-size: 14px;
	}

	/* De tonen staan sinds 8 oktober 2026 ook op de telefoon. Ze waren weg om
	   de smalle kaart kort te houden, maar Aart: je kiest er koffie op. Zonder
	   keurmerken is er ruimte. */
	ul.products .nrd-kaart-smaak__tonen,
	ul.products .nrd-kaart-smaak__land {
		margin-top: 2px;
	}

	ul.products .ct-woo-card-actions {
		align-items: stretch;
		padding: 0;
		gap: 0;
	}

	ul.products .ct-woo-card-actions > * {
		justify-content: flex-start;
		min-height: 44px;
		padding: 6px 10px;
	}

	ul.products .ct-woo-card-actions .price {
		font-size: 14px;
	}
}