/* ACF colour swatches — candidate module.
 * Only shape/layout mechanics live here; colour, typography, size and
 * spacing are all Elementor Style-tab controls (see widget.php selectors).
 *
 * The list_gap/item_gap controls (widget.php) have no 'default' key of their
 * own, matching this batch's convention of relying on this stylesheet for a
 * functional fallback — so the gap/list-gap base values below are not
 * decorative, they are what keeps swatches and their labels visibly spaced
 * apart before an editor ever opens the Style tab.
 */
 .complementor-widget .co-swatch-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

 .complementor-widget .co-swatch-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

 .complementor-widget .co-swatch-color {
	display: inline-block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

 .complementor-widget .co-swatch-list[data-co-shape="circle"] .co-swatch-color {
	border-radius: 50%;
}

 .complementor-widget .co-swatch-list[data-co-shape="square"] .co-swatch-color {
	border-radius: 0;
}

 .complementor-widget .co-swatch-list[data-co-shape="rounded"] .co-swatch-color {
	border-radius: 6px;
}

 .complementor-widget .co-swatch-code {
	overflow-wrap: anywhere;
}


 .complementor-widget .co-swatch-item { max-width: 100%; }
 .complementor-widget .co-swatch-label { overflow-wrap: anywhere; min-width: 0; }

 .complementor-widget .co-swatch-heading { display:inline-flex; align-items:center; gap:.5em; min-width:0; }
 .complementor-widget .co-swatch-icon { flex:none; line-height:1; }
 .complementor-widget .co-swatch-icon svg { width:1em; height:1em; }
.complementor-widget .co-swatch-icon svg:not([fill=none]){fill:currentColor}