/**
 * Dirigible Variation Swatches — frontend styles.
 *
 * Theme per site by overriding the custom properties below, e.g. in the
 * theme's stylesheet or Customizer → Additional CSS:
 *
 *   :root {
 *     --dvs-size: 40px;
 *     --dvs-radius: 50%;
 *     --dvs-border: #d5d5d5;
 *     --dvs-selected: #1a1a1a;
 *     --dvs-label-bg: #fff;
 *     --dvs-label-color: #1a1a1a;
 *   }
 */

:root {
	--dvs-size: 36px;
	--dvs-radius: 50%;
	--dvs-gap: 8px;
	--dvs-border: #d5d5d5;
	--dvs-selected: #1a1a1a;
	--dvs-label-bg: #fff;
	--dvs-label-color: #1a1a1a;
	--dvs-disabled-line: #b3b3b3;
}

/* Hide the native select but keep it in the DOM for Woo's variation JS.
   Kept focusable-off but not display:none-ed via visibility tricks so
   screen-reader/native fallback still works if JS never runs (the JS adds
   .dvs-active to switch hiding on). */
.dvs-active .dvs-select-wrap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Until JS initializes, hide the swatch row instead (no-JS fallback = dropdown). */
.dvs-swatches {
	display: none;
}
.dvs-active.dvs-swatches,
.dvs-active .dvs-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dvs-gap);
	align-items: center;
	margin: 4px 0;
}

.dvs-swatch {
	position: relative;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--dvs-size);
	height: var(--dvs-size);
	padding: 0;
	border: 1px solid var(--dvs-border);
	border-radius: var(--dvs-radius);
	background: none;
	cursor: pointer;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
	line-height: 1;
	font-size: 14px;
	appearance: none;
	-webkit-appearance: none;
	overflow: visible;
}

.dvs-swatch:focus-visible {
	outline: 2px solid var(--dvs-selected);
	outline-offset: 2px;
}

/* Selected ring */
.dvs-swatch.dvs-selected {
	border-color: var(--dvs-selected);
	box-shadow: 0 0 0 1px var(--dvs-selected);
}

/* --- Color swatches ---------------------------------------------------- */

.dvs-type-color .dvs-swatch:not(.dvs-fallback-label)::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: inherit;
	background: var(--dvs-swatch-color, #ccc);
}

/* --- Image swatches ---------------------------------------------------- */

.dvs-type-image .dvs-swatch img {
	width: calc(var(--dvs-size) - 2px);
	height: calc(var(--dvs-size) - 2px);
	object-fit: cover;
	border-radius: inherit;
	display: block;
	margin: 0;
}

/* --- Label / button swatches (and fallbacks) --------------------------- */

.dvs-type-label .dvs-swatch,
.dvs-swatch.dvs-fallback-label {
	width: auto;
	min-width: var(--dvs-size);
	padding: 0 14px;
	border-radius: 6px;
	background: var(--dvs-label-bg);
	color: var(--dvs-label-color);
	white-space: nowrap;
}

/* --- Unavailable / out of stock: crossed out, still visible ------------ */

.dvs-swatch.dvs-disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.dvs-swatch.dvs-disabled::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		var(--dvs-disabled-line) calc(50% - 1px),
		var(--dvs-disabled-line) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	pointer-events: none;
}

/* --- Tooltip (the .dvs-tip span is injected by swatches.js) ------------ */

.dvs-swatch[data-dvs-tip]:hover .dvs-tip,
.dvs-swatch[data-dvs-tip]:focus-visible .dvs-tip {
	opacity: 1;
	transform: translate(-50%, -6px);
}

.dvs-tip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, 0);
	background: #1a1a1a;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 6px 8px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.12s ease, transform 0.12s ease;
	z-index: 10;
}