/*
 * Global frontend theme styles.
 *
 * Keep shared tokens, typography, layout primitives, and cross-site UI here.
 */

:root {
	--sb-price-gap: 0.2rem;
	--sb-price-weight-current: 720;
	--sb-price-weight-original: 560;
	--sb-price-weight-meta: 400;
}

:where(.woocommerce, .brxe-product-price) {
	--sb-price-original: color-mix(in oklch, currentColor 78%, transparent);
	--sb-price-strike: color-mix(in oklch, currentColor 52%, transparent);
	--sb-price-meta: color-mix(in oklch, currentColor 72%, transparent);
}

:where(.woocommerce, .brxe-product-price) :is(.price, td, th) {
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}

:where(.woocommerce, .brxe-product-price) .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sb-price-gap) calc(var(--sb-price-gap) * 2);
}

:where(.woocommerce, .brxe-product-price) .woocommerce-Price-amount.amount {
	color: inherit;
	font-weight: inherit;
	letter-spacing: -0.01em;
}

:where(.woocommerce, .brxe-product-price) :is(.price, td, th) > .woocommerce-Price-amount.amount {
	font-weight: var(--sb-price-weight-current);
}

:where(.woocommerce, .brxe-product-price) :is(.price, td, th) del {
	display: inline-flex;
	align-items: baseline;
	margin-inline-end: var(--sb-price-gap);
	color: var(--sb-price-original);
	font-weight: var(--sb-price-weight-original);
	text-decoration-thickness: max(1px, 0.08em);
	text-decoration-color: var(--sb-price-strike);
	text-decoration-skip-ink: auto;
}

:where(.woocommerce, .brxe-product-price) :is(.price, td, th) ins {
	display: inline-flex;
	align-items: baseline;
	padding: 0;
	border: 0;
	background: none;
	color: currentColor;
	font-weight: var(--sb-price-weight-current);
	text-decoration: none;
}

:where(.woocommerce, .brxe-product-price) .woocommerce-Price-currencySymbol {
	font-weight: inherit;
}

:where(.woocommerce, .brxe-product-price) .tax_label {
	display: inline-block;
	margin-inline-start: 0.35rem;
	color: var(--sb-price-meta);
	font-size: 0.75em;
	font-weight: var(--sb-price-weight-meta);
	letter-spacing: 0.01em;
	vertical-align: baseline;
}