/* Per-widget Product Price styles. All selectors require the child marker. */
.b2io-product-price .price {
	display: block;
	margin-bottom: 0;
}

.b2io-product-price__output {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	max-width: 100%;
}

.b2io-product-price.text-center .b2io-product-price__output,
.b2io-product-price.wd-align[style*="--wd-align:var(--wd-center)"] .b2io-product-price__output {
	align-items: center;
}

.b2io-product-price.text-right .b2io-product-price__output,
.b2io-product-price.wd-align[style*="--wd-align:var(--wd-right)"] .b2io-product-price__output {
	align-items: flex-end;
}

.b2io-product-price__prefix {
	color: #777;
	font-size: .78em;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: .04em;
}

.b2io-product-price__current,
.b2io-product-price__line--from,
.b2io-product-price__line--range,
.b2io-product-price__range {
	display: inline-flex;
	flex-wrap: wrap;
	/* Vertical only. The outer output keeps the block's left/center/right alignment. */
	align-items: center;
	gap: .35em;
}

.b2io-product-price__prefix,
.b2io-product-price__amount,
.b2io-product-price__range {
	vertical-align: middle;
}

.b2io-product-price__prefix {
	display: inline-flex;
	align-items: center;
	color: var(--b2io-product-price-from-color, #777);
	font-family: var(--b2io-product-price-from-font-family, inherit);
	font-size: var(--b2io-product-price-from-font-size, .78em);
	font-style: var(--b2io-product-price-from-font-style, normal);
	font-weight: var(--b2io-product-price-from-font-weight, 500);
	line-height: 1;
	letter-spacing: var(--b2io-product-price-from-letter-spacing, .04em);
	text-transform: var(--b2io-product-price-from-text-transform, none);
}

.b2io-product-price__amount,
.b2io-product-price__range {
	color: var(--b2io-product-price-price-color, inherit);
	font-family: var(--b2io-product-price-price-font-family, inherit);
	font-size: var(--b2io-product-price-price-font-size, inherit);
	font-style: var(--b2io-product-price-price-font-style, normal);
	font-weight: var(--b2io-product-price-price-font-weight, inherit);
	letter-spacing: var(--b2io-product-price-price-letter-spacing, inherit);
	line-height: var(--b2io-product-price-price-line-height, 1.1);
	text-transform: var(--b2io-product-price-price-text-transform, none);
}

.b2io-product-price__sale-badge {
	display: inline-flex;
	align-items: center;
	padding: clamp(3px, .15em, 5px) clamp(6px, .28em, 9px);
	border-radius: .3em;
	background: var(--b2io-product-price-sale-badge-background-color, #f44040);
	color: var(--b2io-product-price-sale-badge-color, #fff);
	font-family: var(--b2io-product-price-sale-badge-font-family, inherit);
	font-size: var(--b2io-product-price-sale-badge-font-size, clamp(11px, .38em, 13px));
	font-style: var(--b2io-product-price-sale-badge-font-style, normal);
	font-weight: var(--b2io-product-price-sale-badge-font-weight, 700);
	letter-spacing: var(--b2io-product-price-sale-badge-letter-spacing, normal);
	line-height: var(--b2io-product-price-sale-badge-line-height, 1);
	text-transform: var(--b2io-product-price-sale-badge-text-transform, none);
	vertical-align: middle;
	white-space: nowrap;
}

.b2io-product-price__typical {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35em;
	color: var(--b2io-product-price-typical-color, #777);
	font-family: var(--b2io-product-price-typical-font-family, inherit);
	font-size: var(--b2io-product-price-typical-font-size, .5em);
	font-style: var(--b2io-product-price-typical-font-style, normal);
	font-weight: var(--b2io-product-price-typical-font-weight, inherit);
	letter-spacing: var(--b2io-product-price-typical-letter-spacing, normal);
	line-height: var(--b2io-product-price-typical-line-height, 1.25);
	text-transform: var(--b2io-product-price-typical-text-transform, none);
}

.b2io-product-price__regular {
	color: inherit;
	font: inherit;
	text-decoration: none;
	text-transform: none;
}

.b2io-product-price__typical-label {
	font-size: .9em;
}

.b2io-product-price__saving {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	width: fit-content;
	padding: clamp(3px, .15em, 5px) clamp(6px, .28em, 9px);
	border-radius: .32em;
	background: #f44040;
	color: #fff;
	font-size: clamp(11px, .38em, 13px);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.b2io-product-price__saving-label {
	color: var(--b2io-product-price-saving-label-color, inherit);
	font-family: var(--b2io-product-price-saving-label-font-family, inherit);
	font-size: var(--b2io-product-price-saving-label-font-size, 1em);
	font-style: var(--b2io-product-price-saving-label-font-style, normal);
	font-weight: var(--b2io-product-price-saving-label-font-weight, 500);
	letter-spacing: var(--b2io-product-price-saving-label-letter-spacing, .04em);
	line-height: var(--b2io-product-price-saving-label-line-height, 1);
	text-transform: var(--b2io-product-price-saving-label-text-transform, none);
}

.b2io-product-price__saving-value {
	color: var(--b2io-product-price-saving-value-color, inherit);
	font-family: var(--b2io-product-price-saving-value-font-family, inherit);
	font-size: var(--b2io-product-price-saving-value-font-size, 1em);
	font-style: var(--b2io-product-price-saving-value-font-style, normal);
	font-weight: var(--b2io-product-price-saving-value-font-weight, inherit);
	letter-spacing: var(--b2io-product-price-saving-value-letter-spacing, normal);
	line-height: var(--b2io-product-price-saving-value-line-height, 1);
	text-transform: var(--b2io-product-price-saving-value-text-transform, none);
}

.b2io-product-price.b2io-product-price--variation-selected .price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35em;
}

.b2io-product-price--variation-selected .price > del,
.b2io-product-price--variation-selected .price > ins {
	margin: 0;
}

.b2io-product-price--variation-selected .price > .b2io-product-price__saving {
	align-self: center;
	margin-inline-start: .2em;
	vertical-align: middle;
}

.b2io-product-price--variation-selected .price,
.b2io-product-price--variation-selected .price del,
.b2io-product-price--variation-selected .price ins {
	color: var(--b2io-product-price-price-color, inherit);
	font-family: var(--b2io-product-price-price-font-family, inherit);
	font-size: var(--b2io-product-price-price-font-size, inherit);
	font-style: var(--b2io-product-price-price-font-style, normal);
	font-weight: var(--b2io-product-price-price-font-weight, inherit);
	letter-spacing: var(--b2io-product-price-price-letter-spacing, inherit);
	line-height: var(--b2io-product-price-price-line-height, inherit);
	text-transform: var(--b2io-product-price-price-text-transform, none);
}
