/* Estilo padrão do banner */
.banner img {
    width: 100%;
    height: auto;
    display: block;
}

.category-container {
	position: relative;
}

.category-section {
	transition: opacity 0.5s ease, max-height 0.5s ease;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	position: relative;
}

.category-section.active {
	opacity: 1;
	visibility: visible;
	 max-height: 100%; /* Ajuste conforme necessário */
}

.category-header {
	margin-bottom: 10px;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Produtos começam invisíveis e deslocados */
.product {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Quando a classe "show" é adicionada, os produtos aparecem */
.product.show {
	opacity: 1;
	transform: translateY(0);
}