/**
 * Product colour + VLT pickers.
 */

.flexi-product-revamp .flexi-config-card .mfn-variations-wrapper .mfn-vr.flexi-colour-row,
.flexi-product-revamp .flexi-colour-row,
.flexi-product-revamp .flexi-config-card .mfn-variations-wrapper .mfn-vr.flexi-vlt-row,
.flexi-product-revamp .flexi-vlt-row {
	display: grid !important;
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas:
		"label"
		"field";
	column-gap: 0;
	row-gap: 8px;
	align-items: start;
	padding: 8px 0 12px !important;
	margin: 0 !important;
	border: none !important;
	min-height: 0 !important;
	height: auto !important;
}

.flexi-product-revamp .flexi-colour-row::before,
.flexi-product-revamp .flexi-vlt-row::before {
	display: none !important;
	content: none !important;
}

.flexi-product-revamp .flexi-colour-row > label,
.flexi-product-revamp .flexi-vlt-row > label {
	grid-area: label;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--flexi-config-font, inherit) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--flexi-navy, #0f1f3d) !important;
	text-align: left !important;
	background: none !important;
}

.flexi-product-revamp .flexi-colour-picker,
.flexi-product-revamp .flexi-vlt-picker {
	grid-area: field;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}

.flexi-product-revamp .flexi-colour-chip,
.flexi-product-revamp .flexi-vlt-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--flexi-border, #e3e8f0);
	border-radius: 999px;
	background: #fff;
	color: var(--flexi-navy, #0f1f3d);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
}

.flexi-product-revamp .flexi-colour-chip:hover,
.flexi-product-revamp .flexi-vlt-chip:hover {
	border-color: #c5d3ea;
}

.flexi-product-revamp .flexi-colour-chip.is-selected,
.flexi-product-revamp .flexi-vlt-chip.is-selected {
	border-color: var(--flexi-blue, #ff5f1e);
	background: var(--flexi-blue-soft, #fff0e8);
	color: var(--flexi-blue, #ff5f1e);
	box-shadow: 0 0 0 1px rgba(255, 95, 30, 0.18);
}

.flexi-product-revamp .flexi-colour-chip:focus-visible,
.flexi-product-revamp .flexi-vlt-chip:focus-visible {
	outline: 2px solid rgba(255, 95, 30, 0.45);
	outline-offset: 2px;
}

.flexi-product-revamp .flexi-colour-picker__swatch {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 50%;
	border: 1px solid rgba(15, 31, 61, 0.18);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.flexi-product-revamp .flexi-colour-picker__name {
	font-size: 13px;
	font-weight: 700;
	color: inherit;
}

.flexi-product-revamp .flexi-colour-row.is-invalid .flexi-colour-chip,
.flexi-product-revamp .flexi-vlt-row.is-invalid .flexi-vlt-chip {
	border-color: #e11d48;
}