/**
 * Estilo de produtos esgotados (outofstock) nos cards de listagem.
 *
 * Escopo: `.product-col.outofstock` — classe combinada presente SOMENTE em
 * cards de loop/listagem, nunca no wrapper da página de produto individual:
 *  - Loop padrão do WooCommerce: `<ul class="products ...">` > `<li class="product-col ... product outofstock">`.
 *  - Card customizado do Porto Builder (Loja/categorias/busca/Produtos
 *    relacionados/Upsells/Cross-sell/Home): `<div class="porto-tb-item product product-col ... outofstock">`.
 *  - Wrapper da página de produto individual (`<div id="product-123" class="product ... outofstock ...">`)
 *    NÃO tem `product-col` — por isso um card relacionado em estoque, aninhado
 *    dentro dessa página quando o produto principal está outofstock, não herda
 *    o grayscale/tarja (o seletor anterior, `.product.outofstock`, pegava
 *    qualquer `.product-image` descendente do wrapper do produto principal,
 *    inclusive as dos relacionados em estoque — corrigido ancorando em
 *    `.product-col`, que só existe no próprio card, não no wrapper da página).
 * Em todos os casos a badge `.stock.out-of-stock` é a mesma gerada pelo Porto
 * dentro de `.product-image`. A página de produto individual usa
 * `.product-stock.out-of-stock` (fora de `.product-image`) para o texto de
 * disponibilidade do resumo, então não é atingida por estas regras.
 */

/* Imagem em preto e branco (principal, secundária e no hover), preço e texto normais */
.product-col.outofstock .product-image img {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}

/* Reaproveita a tarja "Fora de estoque" já gerada pelo Porto,
   apenas recolorindo para faixa vermelha com texto branco, centralizada sobre a imagem. */
.product-col.outofstock .product-image .stock.out-of-stock {
	background-color: #d3242a !important;
	color: #ffffff !important;
	border-radius: 0;
}

.product-col.outofstock .product-image .stock.out-of-stock:before {
	content: none !important;
}

@media (max-width: 767px) {
	.product-col.outofstock .product-image .stock.out-of-stock {
		font-size: 0.625rem;
		width: 9em;
		height: 2.4em;
		line-height: 2.4em;
	}
}