/* The data/template wrapper is rendered after the variations table by WooCommerce.
   JS moves its Colour 2 control into the native table directly below Blend. */
.muse-hair-options {
	display: none !important;
}

/* Let the new row behave exactly like a native WooCommerce/WoodMart variation row. */
tr.muse-hair-colour-two-row[hidden] {
	display: none !important;
}

tr.muse-hair-colour-three-row[hidden] {
	display: none !important;
}

tr.muse-hair-colour-two-row.is-visible {
	display: table-row;
}

tr.muse-hair-colour-three-row.is-visible {
	display: table-row;
}

.muse-hair-colour-two-control {
	min-width: 0;
}

/* We copy the ORIGINAL WoodMart Colour swatch container classes and individual
   swatch markup in JS. Do not resize the cloned .wd-swatch elements here: WoodMart
   itself controls their size, shape, image treatment, gap and active style. */
.muse-hair-colour-two-swatches {
	margin: 0;
}

.muse-hair-colour-two-swatches .muse-colour2-swatch {
	cursor: pointer;
}

/* Fallback only: used if WoodMart markup changes and no original swatches can be cloned. */
.muse-colour2-fallback {
	display: inline-flex;
	width: 58px;
	height: 58px;
	margin: 0 8px 8px 0;
	padding: 3px;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 50%;
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: none;
	cursor: pointer;
	vertical-align: middle;
}

.muse-colour2-fallback.active,
.muse-colour2-fallback:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 3px;
}

.muse-hair-no-pairs {
	margin-top: 8px;
	padding: 10px 12px;
	background: rgba(0,0,0,.04);
	border-radius: 4px;
}

/* On a catalogue variation landing page the original Colour selector remains in
   the DOM for WooCommerce logic but is replaced visually by a fixed Colour row. */
.muse-hair-colour-locked .muse-hair-original-colour-row,
.muse-hair-colour-locked .muse-hair-reset-hidden {
	display: none !important;
}

.muse-blend-unavailable {
	opacity: .28 !important;
	pointer-events: none !important;
	filter: grayscale(1);
}

.muse-hair-hidden {
	display: none !important;
}

.muse-hair-reset-row .muse-hair-reset-button {
	margin-top: 8px;
}

/* Compact selector help. The full explanation opens only when the question mark is selected. */
.muse-attribute-help-wrap {
	position: relative;
	display: inline-block;
	margin-left: 8px;
	vertical-align: middle;
}

.muse-info-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.muse-info-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.muse-info-tooltip {
	position: absolute;
	z-index: 20;
	top: calc(100% + 8px);
	left: 0;
	width: min(320px, 75vw);
	padding: 10px 12px;
	border-radius: 4px;
	background: #250101;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.muse-length-notice {
	margin: 8px 0 0;
	color: #250101;
	font-size: .9em;
	font-weight: 600;
	line-height: 1.45;
}