/**
 * [lastore_cijfer]: het cijfer van WebwinkelKeur rechts in de groene balk
 * boven de kop (functions.php).
 *
 * De balk zelf en de voordelen met vinkjes zijn Elementor (kop/04-kop-native.php);
 * daar staat ook dat dit rondje alleen tot en met tablet zichtbaar is. Daarboven
 * staan de sterren van [lastore_sterren] in de kop eronder.
 */

/* Rondje en beeldmerk van 24 px: samen ruim het minimale klikvlak (WCAG 2.5.8). */
.lastore-balk__cijfer {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;

	color: #333333;
	text-decoration: none;
}

.lastore-balk__rond {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 24px;
	height: 24px;
	border-radius: 50%;

	background: #ffffff;

	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* De witte variant van het beeldmerk, los op het groen. */
.lastore-balk__merk {
	display: block;

	width: 24px;
	height: 24px;
}

.lastore-balk__cijfer:hover .lastore-balk__rond {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.lastore-balk__cijfer:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	border-radius: 14px;
}