/*
 * form.cart is a shared flex ROW (theme rule: form.cart:not(.fixed) { display:
 * flex; }) meant for two children - the quantity stepper and the button. The
 * picker is now the first child of that same form (see simple.php), so
 * without this it sits in that row too, squeezed next to quantity/button
 * instead of above them. :has() scopes the wrap to only forms that actually
 * contain the picker, so every other product's add-to-cart row is untouched.
 */
form.cart:has(.tauria-product-options) {
	flex-wrap: wrap;
}

.tauria-product-options {
	flex: 1 0 100%;
	margin: 0 0 20px;
}

.tauria-option {
	margin: 0 0 16px;
}

.tauria-option-label {
	font-weight: 600;
	margin-bottom: 6px;
}

.tauria-option-required {
	color: #c0392b;
}

.tauria-option-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tauria-option-choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 8px 12px;
	cursor: pointer;
	font-weight: normal;
	margin: 0;
}

.tauria-option-choice input {
	margin: 0;
}

.tauria-option-choice small {
	color: #666;
}

.tauria-option.tauria-option-missing .tauria-option-choices {
	outline: 1px solid #c0392b;
	border-radius: 4px;
}

.tauria-option-error {
	background: #fbeaea;
	color: #c0392b;
	border: 1px solid #f0c4c0;
	border-radius: 4px;
	padding: 10px 12px;
	margin-bottom: 16px;
}

.tauria-option-total {
	font-weight: 600;
	margin-bottom: 16px;
}