/* Kenmerken (inc/keurmerk.php): ronde iconen rechtsboven op de foto van een apparaat —
   in het raster op /apparatuur/ (fotovak van het rasteritem) én op de apparaatpagina
   (foto in de apparaatkaart). Zelfde plek en maat als het "SALE!"-rondje van de shop in de
   Aestetika-demo (48px, 17px van de rand), onder elkaar; vanaf vier in twee kolommen.
   De drager krijgt de klasse .bnb-kenmerk-host. Kleur per kenmerk via --bnb-kleur (inline).
   Klik opent de pop-up eronder, in de kleur van het kenmerk. */
.bnb-kenmerk-host {
	position: relative;
	overflow: visible;
}
.bnb-kenmerk-host .bnb-kenmerken {
	position: absolute;
	top: 1.25em;
	right: 1.25em;
	z-index: 3;
	display: grid;
	grid-template-columns: 48px;
	gap: 8px;
	direction: rtl; /* bij twee kolommen vult de rechterkolom eerst */
}
/* Vanaf vier kenmerken twee kolommen, zodat ze in de tegel passen */
.bnb-kenmerk-host .bnb-kenmerken[data-n="4"],
.bnb-kenmerk-host .bnb-kenmerken[data-n="5"],
.bnb-kenmerk-host .bnb-kenmerken[data-n="6"],
.bnb-kenmerk-host .bnb-kenmerken[data-n="7"],
.bnb-kenmerk-host .bnb-kenmerken[data-n="8"],
.bnb-kenmerk-host .bnb-kenmerken[data-n="9"] {
	grid-template-columns: 48px 48px;
}
.bnb-kenmerk-host .bnb-keurmerk {
	direction: ltr;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;  /* 18 sep (Bart): rondje iets kleiner, icoon iets groter */
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bnb-kleur, #6f766a);
	color: #fff;
	cursor: pointer;
	transition: transform 200ms ease, filter 200ms ease;
}
.bnb-kenmerk-host .bnb-keurmerk:hover,
.bnb-kenmerk-host .bnb-keurmerk[aria-expanded="true"] {
	filter: brightness(0.88);
	transform: scale(1.06);
}
.bnb-kenmerk-host .bnb-keurmerk:focus-visible {
	outline: 2px solid var(--accent-color);
	outline-offset: 3px;
}
.bnb-kenmerk-host .bnb-keurmerk svg {
	width: 30px;
	height: 30px;
	display: block;
}

/* Pop-up met uitleg, onder de iconen in de tegel, in de kleur van het kenmerk */
.bnb-kenmerk-host .bnb-keurmerk-pop {
	position: absolute;
	top: calc(1.25em + 56px);
	right: 1.25em;
	left: 1.25em;
	z-index: 4;
	padding: 1.25em 1.25em 1em;
	border-radius: 12px;
	background: var(--bnb-kleur, #6f766a);
	color: #fff;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
/* Pop-up onder de iconen: 1-3 kenmerken = één kolom, 4-8 = twee kolommen (rijen × 56px) */
.bnb-kenmerk-host .bnb-kenmerken[data-n="2"] ~ .bnb-keurmerk-pop,
.bnb-kenmerk-host .bnb-kenmerken[data-n="4"] ~ .bnb-keurmerk-pop { top: calc(1.25em + 112px); }
.bnb-kenmerk-host .bnb-kenmerken[data-n="3"] ~ .bnb-keurmerk-pop,
.bnb-kenmerk-host .bnb-kenmerken[data-n="5"] ~ .bnb-keurmerk-pop { top: calc(1.25em + 168px); }
/* Vanaf zes kenmerken past de pop-up niet meer onder de iconen: dan over de iconen heen */
.bnb-kenmerk-host .bnb-kenmerken[data-n="6"] ~ .bnb-keurmerk-pop,
.bnb-kenmerk-host .bnb-kenmerken[data-n="7"] ~ .bnb-keurmerk-pop,
.bnb-kenmerk-host .bnb-kenmerken[data-n="8"] ~ .bnb-keurmerk-pop,
.bnb-kenmerk-host .bnb-kenmerken[data-n="9"] ~ .bnb-keurmerk-pop { top: 1.25em; }
.bnb-kenmerk-host .bnb-kenmerken[data-n="6"] ~ .bnb-keurmerk-pop::before,
.bnb-kenmerk-host .bnb-kenmerken[data-n="7"] ~ .bnb-keurmerk-pop::before,
.bnb-kenmerk-host .bnb-kenmerken[data-n="8"] ~ .bnb-keurmerk-pop::before,
.bnb-kenmerk-host .bnb-kenmerken[data-n="9"] ~ .bnb-keurmerk-pop::before { display: none; }
.bnb-kenmerk-host .bnb-keurmerk-pop::before {
	content: "";
	position: absolute;
	top: -8px;
	right: 20px;
	width: 16px;
	height: 16px;
	background: inherit;
	transform: rotate(45deg);
	border-radius: 2px;
}
.bnb-kenmerk-host .bnb-keurmerk-pop__kop {
	display: block;
	margin: 0 2em 0.5em 0;
	font-size: 17px;
	font-weight: 600;
}
.bnb-kenmerk-host .bnb-keurmerk-pop p {
	margin: 0 0 0.75em;
	color: inherit;
}
.bnb-kenmerk-host .bnb-keurmerk-pop p:last-child { margin-bottom: 0; }
.bnb-kenmerk-host .bnb-keurmerk-pop__sluit {
	position: absolute;
	top: 0.5em;
	right: 0.6em;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.bnb-kenmerk-host .bnb-keurmerk-pop__sluit:hover { background: rgba(255, 255, 255, 0.15); }