/**
 * Orpat — fan colour swatches on listing tiles.
 * Scoped entirely under .orpat-fan-swatches; inert everywhere the markup is absent.
 * Swatch shape / size / colour styling comes from WoodMart's own swatch parts
 * (woo-mod-swatches-style-1 + woo-mod-swatches-dis-1); this file only handles the
 * container layout, the anchor reset (swatches are <a> for the navigation fallback),
 * and a keyboard focus ring.
 */
.orpat-fan-swatches.wd-swatches-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 8px 0 4px;
}

.orpat-fan-swatches .wd-swatch {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.orpat-fan-swatches .wd-swatch:focus-visible {
	outline: 2px solid var(--wd-primary-color, #333);
	outline-offset: 2px;
}

/* Brief dim while the newly-selected colour image decodes (WoodMart adds .wd-loading-image). */
.wd-product.wd-loading-image .wd-product-img-link {
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

/* SINGLE PRODUCT PAGE — colour picker in the summary column (moved off the listing tiles).
   Reuses the .orpat-fan-swatches grid + WoodMart swatch parts; adds a label and PDP spacing. */
.orpat-fan-swatches-single {
	margin: 16px 0 18px;
}

.orpat-fan-swatches-single .orpat-fan-swatches-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wd-text-color, #333);
}

.orpat-fan-swatches-single .orpat-fan-swatches-label strong {
	text-transform: none;
	font-weight: 600;
}

.orpat-fan-swatches-single .orpat-fan-swatches.wd-swatches-grid {
	gap: 10px;
}

.orpat-fan-swatches-single .wd-swatch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.orpat-fan-swatches-single .wd-swatch-text {
	font-size: 13px;
	white-space: nowrap;
}