/* Pietenmuts: stofrondjes en het voorbeeld van de naam. Bouwt voort op speenkoord.css. */
.lk-mu-stoffen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 0.75rem;
}
.lk-mu-stof {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	width: 5.2rem;
	cursor: pointer;
	font-size: 0.85rem;
	text-align: center;
}
.lk-mu-stof input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.lk-mu-stof img,
.lk-mu-leeg {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--lk-linnen);
	box-shadow: 0 0 0 3px var(--lk-linnen);
	transition: box-shadow 0.15s ease;
}
.lk-mu-stof input:checked ~ img,
.lk-mu-stof input:checked ~ .lk-mu-leeg {
	box-shadow: 0 0 0 3px var(--lk-linnen), 0 0 0 5px var(--lk-kaneel);
}
.lk-mu-stof input:checked ~ span:last-child {
	font-weight: 600;
}
.lk-mu-stof input:focus-visible ~ img,
.lk-mu-stof input:focus-visible ~ .lk-mu-leeg {
	outline: 2px solid var(--lk-inkt);
	outline-offset: 6px;
}
/*
 * Barbuda is hoog en smal: iets meer ruimte dan een blokje van het speenkoord. De achtergrond is de foto van de gekozen
 * stof (muts.js), zodat de naam eruitziet zoals op de muts; een dun schaduwrandje houdt elke garenkleur leesbaar.
 */
.lk-mu-proef {
	padding: 0.8rem;
	border-radius: 14px;
	background: var(--lk-linnen) center / cover no-repeat;
	box-shadow: inset 0 0 0 1.5px var(--lk-linnen);
}
.lk-mu-proef:empty {
	display: none;
}
.lk-mu-proef svg {
	height: 3.2rem;
	filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.45));
}
.lk-mu-proef.lk-mu-licht svg {
	filter: drop-shadow(0 0 0.6px rgb(0 0 0 / 0.8)) drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.45));
}