/* 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);
}

/* Por padrão, imagem com largura automática */
.img-mobile-full {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Em telas até 768px (mobile), ocupa 100% da largura */
@media (max-width: 768px) {
  .img-mobile-full {
    width: 100%;
  }
}