/**
 * WooCommerce Variation Pills — visual layer only.
 * Namespaced under .ps-pill-* to avoid collisions with Elementor, Hello
 * Theme, Astra, Kadence, GeneratePress, etc.
 *
 * !important is used only on the handful of properties that themes and
 * Elementor's global kit commonly set on every <button> element (size,
 * shape, colour, shadow). Without it, that global button style wins the
 * cascade purely on load order, regardless of our selector's specificity.
 */

/* Visually hide the native select — not display:none, so WooCommerce and
   any script still measuring/reading it keeps working. */
.ps-pill-select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	pointer-events: none !important;
}

.ps-pill-group {
	--ps-pill-bg: #ffffff;
	--ps-pill-border: #d8dee5;
	--ps-pill-text: #33404e;
	--ps-pill-hover-bg: #eaf2fd;
	--ps-pill-hover-border: #5b93e0;
	--ps-pill-accent: #1a5c8f;
	--ps-pill-accent-text: #ffffff;
	--ps-pill-disabled-bg: #f2f3f5;
	--ps-pill-disabled-text: #a3abb5;

	display: flex !important;
	flex-flow: row wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	width: auto !important;
}

.ps-pill-group .ps-pill {
	display: inline-flex !important;
	flex: 0 1 auto !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 8px 20px !important;
	border: 1.5px solid var( --ps-pill-border ) !important;
	border-radius: 999px !important;
	background: var( --ps-pill-bg ) !important;
	background-image: none !important;
	color: var( --ps-pill-text ) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	user-select: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.ps-pill-group .ps-pill:hover:not(.ps-pill-disabled):not(.ps-pill-active) {
	background: var( --ps-pill-hover-bg ) !important;
	border-color: var( --ps-pill-hover-border ) !important;
	color: var( --ps-pill-text ) !important;
}

.ps-pill-group .ps-pill.ps-pill-active {
	background: var( --ps-pill-accent ) !important;
	border-color: var( --ps-pill-accent ) !important;
	color: var( --ps-pill-accent-text ) !important;
}

.ps-pill-group .ps-pill.ps-pill-disabled {
	background: var( --ps-pill-disabled-bg ) !important;
	border-color: var( --ps-pill-disabled-bg ) !important;
	color: var( --ps-pill-disabled-text ) !important;
	opacity: 0.8 !important;
	cursor: not-allowed !important;
}

.ps-pill-group .ps-pill:focus-visible {
	outline: 2px solid var( --ps-pill-accent ) !important;
	outline-offset: 2px !important;
}

.ps-pill-group .ps-pill:focus:not(:focus-visible) {
	outline: none !important;
}