/* Banner de ponta a ponta na Home */
#cabecalho .conteiner, .secao-banners .conteiner {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.flexslider {
    margin: 0 !important;
    border: none !important;
}

.banner.principal img {
    width: 100% !important;
}
/* 1. Esconde a imagem principal com zoom (que fica sozinha em cima) */
.produto-imagem .principal {
    display: none !important;
}

/* 2. Transforma o bloco de miniaturas no bloco principal de fotos */
.produto-imagem .thumbs {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* 3. Força a lista de miniaturas a virar uma grade 2x2 */
.produto-imagem .thumbs .produto-thumbnails {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    transform: none !important; /* Desativa o slide se houver */
}

/* 4. Faz cada "miniatura" ficar grande (50% da largura) */
.produto-imagem .thumbs .produto-thumbnails li {
    width: 48% !important; /* Quase 50% para caberem duas por linha */
    margin: 0 0 15px 0 !important;
    border: none !important; /* Remove bordas de seleção */
    height: auto !important;
}

/* 5. Ajusta a imagem dentro desses blocos */
.produto-imagem .thumbs .produto-thumbnails li a img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
}

/* 6. Remove as setas de navegação que podem sobrar */
.produto-imagem .thumbs .flex-direction-nav,
.produto-imagem .thumbs .slick-arrow {
    display: none !important;
}