/* Banner de Categoria — grade de imagens com layout automático (ver
   Category_Banners_Renderer::render()): cada linha tem 1 ou 2 imagens.
   Com "flex:1" nos dois casos, uma linha com 2 itens vira 50%/50% sozinha,
   e uma linha com 1 item só ocupa 100% sozinha — sem precisar de classe
   diferente pra cada caso. */

.loja-cipo-category-banner-grid {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.loja-cipo-category-banner-row {
	display: flex;
	gap: 4px;
}

.loja-cipo-category-banner-item {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	border-radius: 0;
	overflow: hidden;
}

.loja-cipo-category-banner-img {
	display: block;
	width: 100%;
	height: auto;
	/* Proporção recomendada do banner (1536x864 = 16:9) — mantém o recorte
	   consistente mesmo se a imagem enviada não vier exatamente nessa
	   proporção. */
	aspect-ratio: 1536 / 864;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

.loja-cipo-category-banner-item:hover .loja-cipo-category-banner-img {
	opacity: 0.85;
}

@media (max-width: 600px) {
	.loja-cipo-category-banner-row {
		flex-direction: column;
	}

	.loja-cipo-category-banner-item {
		flex-basis: 100%;
	}
}