/**
 * GS — Kleuropslag badge op swatches.
 *
 * Klein pilletje rechtsboven op de cfvsw-swatch. Selectoren zijn bewust
 * samengesteld (container + optie + eigen klasse) zodat ze de theme-regels
 * verslaan; de kritieke eigenschappen staan op !important omdat het thema
 * generieke span-regels heeft.
 */

.cfvsw-swatches-container .cfvsw-swatches-option .gs-opslag-pil,
.cfvsw-swatches-option .gs-opslag-pil {
	position: absolute !important;
	top: 4px;
	right: 4px;
	z-index: 3;

	display: inline-block !important;
	margin: 0 !important;
	padding: 1px 5px !important;

	font-family: inherit;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.2px;
	white-space: nowrap;
	text-align: center;
	text-transform: none;
	text-decoration: none !important;

	color: #fff !important;
	background: rgba( 0, 0, 0, 0.72 ) !important;
	border: 0 !important;
	border-radius: 9px !important;
	box-shadow: 0 0 0 1px rgba( 255, 255, 255, 0.45 );

	/* Klik/hover moet gewoon naar de tegel gaan. */
	pointer-events: none !important;
	user-select: none;
	-webkit-user-select: none;

	/* Nooit de tegel oprekken of de hover-/selectie-outline verstoren. */
	max-width: calc( 100% - 8px );
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
	transition: none !important;
}

/* Iets meer contrast zodra de tegel gekozen is. */
.cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-selected-swatch .gs-opslag-pil {
	background: rgba( 0, 0, 0, 0.85 ) !important;
}

/* Uitverkocht/niet-beschikbaar: cfvsw legt een witte waas over de tegel,
   de pil dimt netjes mee in plaats van er hard bovenop te blijven staan. */
.cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-swatches-blur .gs-opslag-pil,
.cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-swatches-blur-cross .gs-opslag-pil,
.cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-swatches-out-of-stock .gs-opslag-pil {
	opacity: 0.55;
}

/* Kleine swatches (filters, loop) — hou de pil leesbaar maar bescheiden. */
@media ( max-width: 480px ) {
	.cfvsw-swatches-container .cfvsw-swatches-option .gs-opslag-pil {
		top: 3px;
		right: 3px;
		font-size: 10px !important;
		padding: 0 4px !important;
	}
}