/**
 * AOcos Wig Master Product Template — Visual Polish
 * Scoped to wig products via conditional enqueue in PHP.
 * Mirrors the Footwear / Costume master chip + unit-label pattern.
 * Brand: AOcos | Theme: Dark premium with gold accents
 */

/* ================================================================
   1. UNIT LABEL SUFFIX
   ================================================================ */

/* Phase 2A pattern — the visible label on the Head Circumference
   field reads `Head Circumference — cm` or `Head Circumference — in`.
   The unit value comes from the --aocos-wig-unit-label CSS variable,
   written by annotateUnit() in aocos-wig-master-template.js. */

.wapf-field-container[for="aocos_wig_head_circumference"]:not(.wapf-hide):not(.aocos-force-hidden) .wapf-field-label label span::after {
	content: " — " var(--aocos-wig-unit-label, "cm");
	font-weight: 500;
	color: var(--aocos-text-muted);
}

/* ================================================================
   2. MEASUREMENT UNIT CHIP CONTROL
   ================================================================ */

body.single-product .wapf-field-container[for="aocos_wig_measurement_unit"] .aocos-wig-unit-chip-group {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
}

body.single-product .wapf-field-container[for="aocos_wig_measurement_unit"] .aocos-wig-unit-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	padding: 9px 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: var(--aocos-text-light, #e6e9ef);
	background: rgba(26, 29, 38, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

body.single-product .wapf-field-container[for="aocos_wig_measurement_unit"] .aocos-wig-unit-chip:hover {
	border-color: rgba(201, 168, 76, 0.45);
	color: #fff;
}

body.single-product .wapf-field-container[for="aocos_wig_measurement_unit"] .aocos-wig-unit-chip:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.25);
	border-color: rgba(201, 168, 76, 0.6);
}

body.single-product .wapf-field-container[for="aocos_wig_measurement_unit"] .aocos-wig-unit-chip.is-active {
	background: rgba(201, 168, 76, 0.18);
	border-color: var(--aocos-gold, #c9a84c);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.6);
}

body.single-product .wapf-field-container[for="aocos_wig_measurement_unit"] .aocos-wig-unit-chip[aria-invalid="true"] {
	border-color: rgba(200, 85, 61, 0.6);
	box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.18);
}