/* Keryl Product Set — swatch colore del set nel loop archivio.
   Allineato agli swatch WVS delle card normali: 20px totali, bordo nero + 2px
   padding, dot colorato interno; selezionato = bordo verde; "+N" pill 27px. */

:root {
	/* Verde del bordo swatch selezionato. Se non combacia con WVS, cambia SOLO questo. */
	--kps-loop-selected: #4a9d4a;
}

.kps-loop-swatches {
	margin: 8px 0 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.kps-loop-swatches__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

/* Pallino: 20x20 totali = bordo nero 1px + padding 2px + dot colorato interno. */
.kps-loop-swatch {
	position: relative;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	border: 1px solid #000;
	padding: 2px;
	background: transparent;
	cursor: pointer;
	transition: border-color .15s ease;
}

.kps-loop-swatch__dot {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var( --kps-sw, #d1d5db );
}

/* Colori oltre il tetto: nascosti finche' non si clicca il "+N". */
.kps-loop-swatch.is-overflow {
	display: none;
}

.kps-loop-swatches.is-expanded .kps-loop-swatch.is-overflow {
	display: block;
}

/* Selezionato: bordo verde + spunta bianca centrata. */
.kps-loop-swatch.is-selected {
	border-color: var( --kps-loop-selected, #4a9d4a );
}

.kps-loop-swatch.is-selected::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 48%;
	width: 4px;
	height: 7px;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	transform: translate( -50%, -50% ) rotate( 45deg );
	filter: drop-shadow( 0 0 1px rgba( 0, 0, 0, .55 ) );
	pointer-events: none;
}

/* Non disponibile (esaurito in almeno un componente): barra diagonale, come WVS. */
.kps-loop-swatch.is-disabled {
	cursor: not-allowed;
	opacity: .55;
}

.kps-loop-swatch.is-disabled::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 1px;
	height: 100%;
	background: rgba( 0, 0, 0, .55 );
	transform: rotate( 45deg );
	transform-origin: center;
	pointer-events: none;
}

/* "+N" colori aggiuntivi (bottone che rivela i nascosti) — stile WVS "more". */
.kps-loop-swatches__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 27px;
	height: 27px;
	padding: 0;
	border: 0;
	background-color: #eeeeee !important;
	font-family: var( --e-global-typography-970c9c0-font-family ), Sans-serif;
	font-size: small !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #26453a !important;
	border-radius: 50px 50px 50px 50px;
	cursor: pointer;
}

.kps-loop-swatches__more:hover {
	background-color: #e4e4e4 !important;
}

/* Una volta espanso, il "+N" sparisce (tutti i colori sono visibili). */
.kps-loop-swatches.is-expanded .kps-loop-swatches__more {
	display: none;
}