/* Uniformisation des couleurs : #0063b2 (bleu), #1f1f1f (gris foncé), #ffffff (blanc) */

/* Header */
#cabecalho {
    background: #ffffff; /* Arrière-plan blanc */
}

#cabecalho .actions>li>a {
    color: #1f1f1f; /* Texte gris foncé */
}

#cabecalho .busca input {
    border: solid 1px #888888; /* Bordure gris clair unifiée à 1px */
}

#cabecalho .carrinho .qtd-carrinho {
    background: #1f1f1f; /* Arrière-plan gris foncé pour la quantité du panier */
    color: #ffffff; /* Texte blanc */
}

/* Menu principal */
.full.menu {
    background: #0063b2; /* Arrière-plan bleu */
    border-top: solid 1px #888888; /* Bordure grise unifiée à 1px */
}

.full.menu .conteiner .nivel-um>li.offers>a {
    background: #0063b2 !important; /* Arrière-plan bleu uniforme pour les offres */
}

.full.menu .conteiner .nivel-um>li>a>.titulo {
    font-size: 14px; /* Taille du texte ajustée à 14px */
}

/* Boutons */
.flex-direction-nav li a {
    background: #0063b2; /* Arrière-plan bleu pour les boutons de navigation */
    color: #ffffff; /* Texte blanc */
}

.scrollToTop {
    background: #0063b2; /* Arrière-plan bleu pour le bouton de retour en haut */
}

/* Boutons d'achat et autres actions */
#listagemProdutos.listagem .listagem-item .acoes-produto .botao-comprar {
    background: #0063b2; /* Arrière-plan bleu uniforme pour le bouton d'achat */
    color: #ffffff; /* Texte blanc */
}

/* Bordures unifiées */
.float-contact .float-open:hover {
    background: #0063b2; /* Uniformisation des couleurs au survol des éléments flottants */
}

.float-contact .float-open {
    background: #0063b2; /* Arrière-plan bleu */
}

.coluna div.componente.newsletter .botao {
    background: #0063b2; /* Arrière-plan bleu pour le bouton de la newsletter */
    border: solid 1px #0063b2; /* Bordure bleue unifiée à 1px */
}

.modal-modalNewsletter #modalNewsletter .componente .interno .interno-conteudo .input-conteiner .botao {
    border: solid 1px #0063b2; /* Bordure bleue unifiée à 1px */
    background: #0063b2; /* Arrière-plan bleu */
}

.float-contact .float-items>li>a {
    background: #0063b2; /* Arrière-plan bleu uniforme pour les éléments flottants */
}

/* Pied de page */
#rodape .institucional {
    background: #0063b2; /* Arrière-plan bleu pour la section institutionnelle */
}

#rodape .institucional a, #rodape .institucional p {
    color: #ffffff; /* Texte blanc dans la section institutionnelle */
}

#rodape .links-rodape-atendimento .icon {
    fill: #ffffff; /* Remplissage blanc pour les icônes */
}

/* Autres éléments */
.bandeiras-produto .bandeira-promocao {
    background: #0063b2; /* Arrière-plan bleu pour les promotions */
}

#barraNewsletter.posicao-rodape .componente .newsletter-assinar {
    background: #0063b2; /* Arrière-plan bleu pour la newsletter */
    border: solid 1px #0063b2; /* Bordure bleue unifiée à 1px */
}

.full.menu .offers .nivel-dois .counter-offer .promo .title {
    background: #0063b2; /* Arrière-plan bleu pour les titres des promotions */
    line-height: 10px; /* Ajustement de la hauteur de ligne */
}

/* Version mobile */
@media only screen and (max-width: 767px) {
    .atalhos-mobile {
        background: #0063b2; /* Arrière-plan bleu pour les raccourcis mobiles */
    }

    .atalhos-mobile ul li a .icon * {
        fill: #ffffff; /* Remplissage blanc pour les icônes dans les raccourcis mobiles */
    }

    /* Espacement plus généreux entre les éléments interactifs */
    .atalhos-mobile ul li {
        margin-bottom: 12px; /* Espacement accru entre les items pour éviter les clics accidentels */
    }
}

/* Suppression des offres cachées */
.full.menu .conteiner .nivel-um>li.offers {
    display: none; /* Les offres sont masquées */
}
.full.menu .conteiner .nivel-um>li {
    padding: 0 5px; /* Réduire l'espace horizontal entre les items 0 10px*/
    margin: 0 5px;   /* Réduire la marge entre les items 0 5px */
}
@media only screen and (max-width: 480px) {
  #listagemProdutos.listagem {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between;
    gap: 2%;
  }

  #listagemProdutos.listagem li {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    margin-bottom: 16px;
    display: block;
    box-sizing: border-box;
  }

  #listagemProdutos.listagem li img {
    width: 100% !important;
    height: auto;
  }
}