.wcp-swatch-select {
	display: block;
	margin: 0 0 8px;
	max-width: 260px;
}

.wcp-swatch-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 1em;
	padding: 8px;
	border-radius: 8px;
	/* --wcp-cols (set inline per attribute) is the near-square column count,
	   e.g. 4 for 16 swatches. Capping the row width to exactly that many
	   40px swatches + gaps keeps it square when there's room, and lets
	   flex-wrap fall back to fewer columns on narrower screens. */
	max-width: calc(var(--wcp-cols, 4) * 48px - 8px);
	/* Background is a flat tint of the selected swatch's colour, set in
	   syncFromSelect() in wcp-frontend.js — the palette chart image lives in
	   the product gallery instead (focused on hover), not behind the list. */
	transition: background-color 0.25s ease;
}

.wcp-swatch-list li {
	margin: 0;
	padding: 0;
}

.wcp-swatch {
	display: block;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.wcp-swatch:hover {
	transform: scale(1.08);
}

.wcp-swatch.is-selected {
	box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
}

/* Shown only while the hidden "None" value is the current selection — see
   WCP_None_Option and wcp-frontend.js's updateNoneMessage(). */
.wcp-none-message {
	display: none;
	margin: 0 0 1em;
	font-style: italic;
	opacity: 0.75;
}

.wcp-none-message.is-visible {
	display: block;
}