/* 6.3 Preço. Tokens da marca em common.css. */

.apw-price {
	--apw-price-justify: flex-start;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	font-family: var(--apw-font-text);
	color: var(--apw-dark);
}

.apw-price__main {
	transition: opacity 0.2s ease, filter 0.2s ease, transform 0.25s var(--apw-ease);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--apw-price-justify);
	gap: 8px 14px;
}

.apw-price .apw-price__amount {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
	margin: 0;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--apw-dark);
}

/* Em promoção, o WooCommerce coloca o preço original em <del> e o atual em <ins>. */
.apw-price .apw-price__amount ins {
	order: 1;
	font-weight: inherit;
	text-decoration: none;
	background: none;
	color: inherit;
}

.apw-price .apw-price__amount del {
	order: 2;
	font-size: 0.6em;
	font-weight: 400;
	color: var(--apw-muted);
	opacity: 1;
}

/* "A partir de" menor que o valor, para o número liderar. */
.apw-price__from {
	font-size: 0.6em;
	font-weight: 400;
	color: var(--apw-muted);
}

.apw-price__from .woocommerce-Price-amount {
	font-size: 1.667em;
	font-weight: 500;
	color: var(--apw-dark);
}

/* Selo: bloco cheio na cor da marca (o único acento além do botão de compra). */
.apw-price__badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 9px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--apw-white);
	background: var(--apw-brand);
}

/* Troca para o preço da variação: sai desfocado, entra nítido. */
.apw-price.is-swapping .apw-price__main {
	opacity: 0;
	filter: blur(4px);
	transform: translateY(4px);
}

@media (prefers-reduced-motion: reduce) {
	.apw-price.is-swapping .apw-price__main {
		filter: none;
		transform: none;
	}
}

.apw-price__badge[hidden],
.apw-price__extra[hidden] {
	display: none;
}

.apw-price .apw-price__extra {
	font-size: 14px;
	line-height: 1.5;
	color: var(--apw-muted);
}

.apw-price__extra .woocommerce-Price-amount {
	font-weight: 600;
	color: var(--apw-dark);
}

@media (max-width: 767px) {
	.apw-price .apw-price__amount {
		font-size: 24px;
	}
}