/* Native WooCommerce variation selector presentation. */

.single-product .summary .variations_form {
	margin-block: var(--space-4) var(--space-3);
}

.single-product .summary .variations_form .variations {
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.single-product .summary .variations_form .variations tbody,
.single-product .summary .variations_form .variations tr {
	inline-size: 100%;
}

.single-product .summary .variations_form .variations th.label,
.single-product .summary .variations_form .variations td.value {
	padding-block: var(--space-1);
	padding-inline: 0;
	border: 0;
	vertical-align: middle;
	text-align: start;
}

.single-product .summary .variations_form .variations th.label {
	inline-size: 32%;
	padding-inline-end: var(--space-4);
	color: var(--color-ink);
	font-size: var(--font-size-ui);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-ui);
	unicode-bidi: isolate;
}

.single-product .summary .variations_form .variations td.value {
	inline-size: 68%;
}

.single-product .summary .variations_form .variations td.value::before,
.single-product .summary .variations_form .variations td.value::after {
	display: none;
}

.single-product .summary .variations_form .variations select {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 3rem;
	padding-block: var(--space-2);
	padding-inline: var(--space-3) 2.75rem;
	border: 1px solid var(--color-border-strong);
	border-radius: 0;
	background-color: var(--color-white);
	background-image: var(--sola-icon-nav-arrow-down);
	background-position: left var(--space-3) center;
	background-repeat: no-repeat;
	background-size: 1.5rem;
	color: var(--color-ink);
	direction: rtl;
	font-size: var(--font-size-body);
	line-height: var(--line-height-ui);
	text-align: start;
	unicode-bidi: isolate;
	appearance: none;
	-webkit-appearance: none;
}

.single-product .summary .variations_form .variations select:hover:not(:disabled),
.single-product .summary .variations_form .variations select:focus {
	border-color: var(--focus-color);
}

.single-product .summary .variations_form .variations select:focus-visible {
	outline: var(--focus-width) solid var(--focus-color);
	outline-offset: var(--focus-offset);
}

/* :has() reflects the native selected option without duplicating Woo state in JS. */
.single-product .summary .variations_form .variations select:has(
	option:checked:not([value=""])
) {
	border-color: var(--color-link);
	background-color: var(--color-surface);
}

.single-product .summary .variations_form .variations select:disabled {
	border-color: var(--color-border);
	background-color: var(--color-surface);
	color: var(--color-ink-soft);
	cursor: not-allowed;
	opacity: 0.65;
}

.single-product .summary .variations_form .variations select option:disabled {
	color: var(--color-ink-soft);
}

.single-product .summary .variations_form .reset_variations {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	margin-block: var(--space-2) 0;
	padding-block: var(--space-2);
	padding-inline: var(--space-3);
	color: var(--color-link);
	font-size: var(--font-size-ui);
	line-height: var(--line-height-ui);
	text-align: start;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.18em;
	unicode-bidi: isolate;
}

.single-product .summary .variations_form .reset_variations:focus-visible {
	border-radius: var(--radius-button);
}

@media (max-width: 47.99rem) {
	.single-product .summary .variations_form .variations,
	.single-product .summary .variations_form .variations tbody,
	.single-product .summary .variations_form .variations tr,
	.single-product .summary .variations_form .variations th.label,
	.single-product .summary .variations_form .variations td.value {
		display: block;
		inline-size: 100%;
	}

	.single-product .summary .variations_form .variations th.label {
		padding-block-end: var(--space-1);
		padding-inline-end: 0;
	}

	.single-product .summary .variations_form .variations td.value {
		padding-block-start: 0;
		padding-block-end: var(--space-2);
	}

	.single-product .summary .variations_form .variations tr:last-child td.value {
		padding-block-end: var(--space-1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-product .summary .variations_form .variations select {
		transition: none;
	}
}