/* [gpp_color_swatches] — Farbskala unter dem Produkt-Hauptbild. */
.gpp-colorscale {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 3px;
}
.gpp-colorscale[hidden] { display: none; }
.gpp-colorscale .gpp-cs-dot {
	all: unset;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--gpp-cs, #fff);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
	cursor: pointer;
	transition: box-shadow .15s ease, transform .15s ease;
}
.gpp-colorscale .gpp-cs-dot:hover {
	transform: scale(1.08);
}
.gpp-colorscale .gpp-cs-dot.gpp-cs-unknown {
	background: repeating-linear-gradient(45deg, #e6e6e6 0 4px, #fafafa 4px 8px);
}
.gpp-colorscale .gpp-cs-dot.is-active {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px #fff, 0 0 0 4px #1E75C8;
}
.gpp-colorscale .gpp-cs-dot:focus-visible {
	outline: 2px solid #034C92;
	outline-offset: 4px;
}

/* Theme/Elementor-Kit färben button:hover/:focus ein — der Farbpunkt behält immer seine Farbe. */
.gpp-colorscale button.gpp-cs-dot,
.gpp-colorscale button.gpp-cs-dot:is(:hover, :focus, :active) {
	background: var(--gpp-cs, #fff);
	color: transparent;
	border: 0;
	margin: 0;
	padding: 0;
}
.gpp-colorscale button.gpp-cs-dot.gpp-cs-unknown,
.gpp-colorscale button.gpp-cs-dot.gpp-cs-unknown:is(:hover, :focus, :active) {
	background: repeating-linear-gradient(45deg, #e6e6e6 0 4px, #fafafa 4px 8px);
}