/*!
 * WooKit — Product Swatches (variation text pills).
 * Click sync into WC's variations_form; grey palette, out-of-stock struck.
 */

.wookit-product-swatches {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: var( --wookit-font, inherit ) !important;
	color: var( --wookit-body, inherit ) !important;
	container-type: inline-size;
	container-name: wookit-swatches;
}

.wookit-product-swatches *,
.wookit-product-swatches *::before,
.wookit-product-swatches *::after { box-sizing: border-box !important; }

/* ── Group: one attribute as a discreet card (label + its pills) ─────── */
.wookit-product-swatches__group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 14px;
	background: var( --wookit-surface, #fff ) !important;
	border: 1px solid var( --wookit-border, #e2e8f0 ) !important;
	border-radius: var( --wookit-radius-md, 8px ) !important;
}

.wookit-product-swatches__label {
	/* Small uppercase eyebrow so the attribute name reads as a card heading. */
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	color: var( --wookit-muted, #64748b ) !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
}

.wookit-product-swatches__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	/* flex-start so a selected option (which gains a caption below) doesn't
	   stretch its neighbours — the pill itself keeps a constant height. */
	align-items: flex-start;
}

/* Wraps one pill + its "selectat" caption, stacked vertically. */
.wookit-product-swatches__option {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

/* ── Pill (text label, one per variation option) ───────────────────── */
.wookit-product-swatches__pill {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 14px !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	/* Unselected: outline only — transparent fill, grey border + text.
	   !important throughout: Hello Elementor / WC `.button` rules target
	   these same <button>s with high-specificity (often !important) colours
	   and would otherwise repaint the pills in the theme accent. */
	color: #4b5563 !important;
	background: transparent !important;
	border: 1.5px solid #d1d5db !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
	-webkit-tap-highlight-color: transparent;
	font-variant-numeric: tabular-nums;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.wookit-product-swatches__pill:hover {
		border-color: #9ca3af !important;
	}
}

.wookit-product-swatches__pill:focus-visible {
	outline: 2px solid #9ca3af !important;
	outline-offset: 2px !important;
}

/* Selected: same grey as the rest, just a bit more highlighted —
   darker grey border + fill + a subtle grey ring. No theme colour. */
.wookit-product-swatches__pill.is-active,
.wookit-product-swatches__pill.is-active:hover {
	border-color: #6b7280 !important;
	background: #e5e7eb !important;
	color: #111827 !important;
	box-shadow: 0 0 0 3px rgba( 107, 114, 128, 0.18 ) !important;
	font-weight: 600 !important;
}

/* "selectat" caption — sits OUTSIDE/below the pill so the button never
   changes size; only shown for the selected pill. */
.wookit-product-swatches__pill-tag {
	display: none;
	font-size: 0.625rem !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;
	color: #6b7280 !important;
	text-align: center !important;
}

.wookit-product-swatches__pill.is-active + .wookit-product-swatches__pill-tag {
	display: block;
}

/* ── Out-of-stock option: grey + struck through, not selectable ──────
   A value is marked out of stock when no purchasable, in-stock variation
   carries it (see the PHP stock map). */
.wookit-product-swatches__pill.is-out-of-stock,
.wookit-product-swatches__pill.is-out-of-stock:hover {
	color: #9ca3af !important;
	border-color: #e5e7eb !important;
	background: transparent !important;
	text-decoration: line-through !important;
	cursor: not-allowed !important;
	font-weight: 500 !important;
}

/* ── Hide WC's <select> variation table when swatches are present.
   The selects stay in the DOM (so WC's variation matching still works,
   driven by swatches click → select.value + change event), but the user
   only sees the pills. */
.variations_form.wookit-has-swatches .variations,
.variations_form.wookit-has-swatches .reset_variations {
	display: none !important;
}

/* No-flash, JS-independent fallback: if a swatches widget is anywhere on the
   page, hide the native variation <select> table / "Clear" link from first
   paint — even if WC's form is injected late (lazy Elementor) before the JS
   tags it. (:has() is supported in all current browsers; the JS above covers
   the rest.) */
body:has( .wookit-product-swatches ) .variations_form .variations,
body:has( .wookit-product-swatches ) .variations_form .reset_variations {
	display: none !important;
}