/*
 * De knop "Toon meer" onder een lijst met reviews (zie
 * smaakbewijs-paginering.php). Een omlijnde knop, geen oranje: oranje blijft
 * voor bestellen. Op de petrol band wit, elders petrol.
 */

.nrd-smaak__toon {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 24px 0 4px;
	padding: 8px 18px;
	border: 1.5px solid var(--theme-palette-color-10, #31545b);
	border-radius: 999px;
	background: transparent;
	color: var(--theme-palette-color-10, #31545b);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nrd-smaak__teller {
	font-size: 13px;
	font-weight: 500;
	opacity: 0.8;
	font-variant-numeric: tabular-nums;
}

.nrd-smaak__toon:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (hover: hover) {
	.nrd-smaak__toon:hover {
		background: var(--theme-palette-color-10, #31545b);
		color: #fff;
	}
}

.nrd-smaak--band .nrd-smaak__toon {
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

/*
 * Waar de lijst kolommen heeft (de band, het tabblad Decaf methode), hoort de
 * knop bij de hele lijst en niet bij de eerste kolom: in het midden, met
 * duidelijk meer ruimte erboven dan tussen de kaarten (8 tot 12px). In het
 * smalle blok op de productpagina staat alles links, en de knop ook.
 */
.nrd-smaak--band .nrd-smaak__toon,
.nrd-decaf__smaak .nrd-smaak__toon {
	display: flex;
	width: fit-content;
	margin: 32px auto 0;
}

@media (hover: hover) {
	.nrd-smaak--band .nrd-smaak__toon:hover {
		background: #fff;
		color: var(--theme-palette-color-10, #31545b);
	}
}

/* De review die er net bij kwam, krijgt focus maar geen rand van de browser. */
.nrd-smaak__lijst > li:focus,
.nrd-decaf__stemmen > li:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.nrd-smaak__toon {
		transition: none;
	}
}

/*
 * Live sinds 8 oktober 2026: elke portie na "Toon meer" is een eigen lijst onder
 * de vorige (zie smaakbewijs-paginering.js), met erboven een dunne lijn en
 * welke reviews het zijn ("10 tot 18 van 99"). Waar de knop in het midden
 * staat (de band, het tabblad Decaf methode) staat het label ook in het
 * midden, met een lijn aan beide kanten; in het smalle blok op de
 * productpagina links, met de lijn erachter.
 */
.nrd-smaak__portie {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Padding, geen marge: .nrd-pagina details > * zet margin-block op 0. */
	padding: 20px 0 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

.nrd-smaak__portie[hidden] {
	display: none;
}

.nrd-smaak__portie::after,
.nrd-smaak--band .nrd-smaak__portie::before,
.nrd-decaf__smaak .nrd-smaak__portie::before {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: 0.35;
}

.nrd-smaak__lijst.nrd-smaak__vervolg,
.nrd-smaak--band .nrd-smaak__lijst.nrd-smaak__vervolg,
.nrd-decaf__stemmen.nrd-smaak__vervolg {
	margin-top: 0;
}

.nrd-smaak--product .nrd-smaak__portie {
	color: var(--nrd-k-petrol, #31545b);
}