/*
 * Preço do campo {thelma_preco}: o valor cheio riscado em cima e o que se paga
 * embaixo, como no cartão de produto.
 *
 * Arquivo próprio, e não o frente.css, porque este campo vive na vitrine: o
 * frente.css puxa o CSS do player junto, e uma lista de produtos não precisa
 * dele.
 *
 * Nenhum tamanho é fixo: tudo parte de 1em, que herda do elemento do Bricks.
 */

.thelma-preco {
	display: inline-flex;
	flex-direction: column;
	gap: 0.1em;
	line-height: 1.2;
	color: var(--thelma-texto, #1d2327);
	font-family: var(--thelma-fonte, inherit);
}

.thelma-preco__antes {
	color: var(--thelma-preco-antes, var(--thelma-texto-suave, #646970));
	font-size: 0.8125em;
	font-weight: 400;
	text-decoration: line-through;
}

.thelma-preco__agora {
	color: var(--thelma-preco-agora, inherit);
	font-size: 1.125em;
	/* 600 é o mais grosso que este plugin usa */
	font-weight: 600;
}

.thelma-preco--gratis .thelma-preco__agora {
	color: var(--thelma-preco-gratis, var(--thelma-sucesso, #1a9d55));
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* O <bdi> que o WooCommerce põe em volta do valor não pode virar bloco. */
.thelma-preco bdi {
	display: inline;
}

/* Tema que pinta o fundo do <del>/<ins> não encosta aqui. O risco fica: esta
   regra é mais específica que .thelma-preco__antes e, com text-decoration
   aqui, apagava o riscado do preço antigo. */
.thelma-preco del,
.thelma-preco ins {
	background: none;
}

.thelma-preco ins {
	text-decoration: none;
}

.thelma-preco del.thelma-preco__antes {
	text-decoration: line-through;
}