.styleather-variation-price {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
}

.styleather-variation-supplement {
	display: block;
	margin-top: 8px;
	line-height: 1.5;
}

.styleather-variation-amount {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	color: inherit;
	background: rgba(0, 0, 0, 0.06);
	padding: 3px 10px;
	border-radius: 999px;
}

.styleather-variation-name {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.6;
	color: #8a8a8a;
	letter-spacing: 0.01em;
}

.styleather-price-from-label {
	display: block;
	font-size: 0.6em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #777;
}

/*
 * Elementor's WooCommerce "Add to cart" widget forces flex-wrap: nowrap on this row via a
 * high-specificity selector, which stops our full-width "Totale" line from pushing the
 * quantity input and button below it. !important is needed to win over that rule.
 */
.woocommerce-variation-add-to-cart,
form.cart {
	flex-wrap: wrap !important;
}

.styleather-total-price {
	display: block;
	width: 100%;
	flex: 1 0 100%;
	order: -1;
	margin: 4px 0 12px;
	font-size: 1rem;
	line-height: 1.4;
}

.styleather-total-price-label {
	font-weight: 600;
	margin-right: 6px;
}

.styleather-total-price-amount {
	font-weight: 700;
}