/**
 * O relógio da campanha. Duas formas, e a diferença é o espaço que cada uma tem:
 *
 *   NO CARD   etiqueta sem fundo, no canto de cima à direita, na mesma linha do selo de desconto,
 *             sobre a foto. Vale em TODA grade que usa a parte 152 do Oxygen.
 *   NA FICHA  pastilha sólida abaixo do preço, onde sobra coluna e o card não existe.
 *
 * A cor é o carmim #CC0C39, o mesmo do selo de desconto — decisão dele em 18/09/2026, olhando o
 * selo "% off" da Amazon: "Igual em todo lugar, no mesmo vermelho do selo". Ele escolheu a coerência
 * sabendo do preço, que é o alcance: o card é o de todas as grades do site.
 */

.wcb-relogio {
	display: inline-block;
	margin: 4px 0 0;
	padding: 4px 7px;
	border-radius: 5px;
	background: #cc0c39;
	color: #fff;
	font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.35 );
	font-variant-numeric: tabular-nums;
}

.wcb-relogio-rotulo {
	font-weight: 700;
}

.wcb-relogio-ficha {
	margin: 10px 0 14px;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 14px;
}

.wcb-relogio-fim {
	background: #6b7784;
}

/**
 * URGÊNCIA NO CARD — o relógio sobe para a linha do selo, sobre a foto.
 *
 * O selo mora no canto de cima à esquerda (div_block-43-152, `position:absolute; top:5; left:5`
 * dentro do quadro de 250px da foto); o relógio vai para o canto oposto da MESMA linha, em carmim
 * sem fundo.
 *
 * ESCOPO: `.oxy-dynamic-list`, ou seja, toda grade do site — home, categoria, busca, relacionados.
 * Na primeira rodada isto valia só dentro da vitrine da home (`#_dynamic_list-153-32`), e o
 * resultado foi incoerente: o selo ficou vermelho em toda parte e a pastilha azul continuou
 * aparecendo embaixo do preço nas outras grades. A ficha do produto fica de fora de propósito
 * (`:not(.wcb-relogio-ficha)`): lá não há card, há coluna, e a pastilha lê melhor.
 *
 * O relógio não é filho do quadro da foto — ele nasce do filtro `woocommerce_get_price_html`, lá
 * embaixo, dentro do bloco de preço. Por isso `position:absolute` precisa de um ancestral
 * posicionado: medido no navegador, o primeiro ancestral posicionado do relógio é o CARROSSEL, e
 * sem a regra abaixo a etiqueta iria para o canto da vitrine inteira. Pôr `position:relative` no
 * cartão não desloca o selo, que se ancora no div_block-38-152, mais perto e já relativo — medido
 * antes e depois, o selo não anda um pixel.
 *
 * SOBRE A FOTO SER CLARA NO CANTO: medido no arquivo das 1.423 fotos de produto publicado, na
 * projeção exata do retângulo do relógio (x de 78% a 98%, y de 0 a 5%): 1.422 têm o canto claro o
 * bastante para o carmim passar de 4,5:1. O `text-shadow` branco é a rede para o caso restante e
 * para a foto que entrar amanhã — custa nada e evita o problema antes de ele existir.
 */

.oxy-dynamic-list [data-id="div_block-37-152"] {
	position: relative;
}

.oxy-dynamic-list .wcb-relogio:not( .wcb-relogio-ficha ) {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 2;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	color: #cc0c39;
	font-size: 12px;
	text-shadow: 0 1px 2px rgba( 255, 255, 255, 0.9 );
}

/* Zerou enquanto a pessoa lia a página: sai do carmim para não gritar promoção que acabou. */
.oxy-dynamic-list .wcb-relogio-fim:not( .wcb-relogio-ficha ) {
	color: #6b7784;
	font-size: 10px;
}