body{
    
    margin-top: 10%;
    margin-bottom: 10%;

}
.container{

}

@media (max-width: 576px) {
  .logo {
    height: 70px;
  }

  .form-control {
    width: 100%;
    font-size: 0.9rem;
  }

 
}

@media (max-width: 576px) {
  #header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

  }



}

/*CABEÇALHO*/
#comercio{
    
    text-align: center;
    height: 30px;
}



#header{
    display: flex;
    background-color: #210D41;
    position: fixed;
    margin-top: -10%;
    width: 100%;
    z-index: 1000;
}

.logo{
    margin-left: 40px;
    margin-top: 15px;
}

.pesquisa{
    margin-top: 40px;
    margin-left: 50px;
    height: 35px;
    width: 100%;
    border-radius: 15px;
    border-color: #808080;
    border-width: 1px;
}

.carrinho{
    margin-top: 41px;
    margin-left: -40%;
}

.perfil{
  margin-top: 41px;
}

/* Hover dos itens do dropdown */
.dropdown-menu .dropdown-item:hover {
    background-color: #ffb300 !important;
    color: #fff !important;
}

/* Hover dos links do menu principal */
.navbar-nav .nav-link:hover {
    color: #ffb300 !important;
}

.acesso, .dropdown-perfil{
    margin-top: 38px;
    margin-left: 50px;
    
}

list-style: none;

.nav-link{
    list-style: none;
}


.collapseoutro {
margin-left: 200px;
}

#menu {
    background-color: #210D41;
    

}

.nav-link{
    color: white;
}

/*BANNER*/

.banner{
    width: 90%;
    margin-left: 5%;
    margin-top: 2%;
}

/*PRODUTO*/
.iconesprod{
    height: 110px;
    margin-left: 70px;
    display: flex;
}

#iconesprod{
    display: flex;
}

.item2{
    margin-left: 150%;
    color: white;
  
}

.envios{
    width: 100%;
}


.iconesprod :hover{
    height: 30px;
    transition: 0.1s;
}

#cardrel{
  margin-left: 30px;
  margin-right: 30px;
}

/*FONTES*/
h1{
    font-size: 20px;
}

h2{
    font-size: 18px;
    margin: 2em 0;
  font-weight: arial;
  font-size: 18px;
   
}
h2 a{
    text-decoration: none;
    color: white;
}

h3{
    font-size: 25px;
}
h4{
    font-size: 30px;
    font-family: arial;
    text-align: center;
    margin-top: 30px;
}

h4 a{
    text-decoration: none;
}
h5{
    text-align: center;
    font-size: 25px;
  
}
h6{
    font-size: 28px;
}
h7{
    font-size: 23px;
}
h8{
    font-size: 40px;
}

h10{
    font-size: 15px;
    color: #313030;
    text-align: justify;
}

h10 a{
  text-decoration: none;
  color: #000000;
}

h11{
    font-size: 15px;
    text-decoration: none;
    color: black;
    
}
h11 a{
    text-decoration: none;
    color: black;
    
}
h12{
    font-size: 40px;
    color: #210d41;
}
h13{
     font-size: 35px;
    color: #210D41;
    margin-left: 25%;
}

h14{
    font-size: 25px;
    margin-left: 28%;
}
h15{
    font-size: 20px;
    margin-left: 30%;
}
h16{
    font-size: 40px;
    color: #210D41;
    margin-left: 30%;
    margin-top: 30%;
}

h17{
    font-size: 2rem;
    color: #333;
    margin-left: 60px;
    font-weight: bold;
    
}



H18{
    font-size: 1.5rem;
    color: #555;
    margin-left: 60px;
}

H18 a{
    font-size: 1.5rem;
    color: #555;
    
    text-decoration: none;
}

h19{
    color: black;
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
}

h20{
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}

/*produto*/

H21{
  font-size: 25px;
  color: #210D41;
  font-family: Arial, Helvetica, sans-serif;
  
}

h22{
  font-size: 20px
}

h23{
    font-size: 30px;
    font-family: arial;
    text-align: center;
    margin-top: 30px;
    color: #000000;
}

h24{
  font-size: 20px;
    font-family: arial;
   

    color: #000000;
}

h25{
  font: ;
}

/*footer*/
h26{

}

h27{

}

/*pix*/
h28{
  color: #313030;
}

h29{

  font-size: 25px;
   color: #210D41;
}



#cards{
    margin-top: 60px;
    padding: 50px;
}



.botao{
    border-radius: 9px;
    display: block;
    text-decoration: none;
    color: black;
    width: 170px;
    height: 40px;
    margin-left: 15%;    
    margin-top: 20%;
}

.botao a{
    text-decoration: none;
    color: black;
}

#bannerpromocionais{
    margin-top: 120px;
}

.promocao{
    height: 120px;
}

.comercial{
    margin-top: 30px;
    width: 100%;
}

#comercial{
    margin-top: 50px;
}

.formaspagamento{
    margin-left: 45%;
}
.desenvolvido{
    margin-left: 45%;
}
#rodape{
    display: flex;
    margin-left: 42%;
}









    .nome{
        border-radius: 9px;
        width: 80%;
        height: 50px;
        border-color: #cacaca;
    }

    .telefone{
        border-radius: 9px;
        width: 40%;
        height: 50px;
        border-color: #cacaca;
    }

    .nascimento{
        border-radius: 9px;
        width: 40%;
        height: 50px;
        border-color: #cacaca;
    }

    .email{
        border-radius: 9px;
        width: 80%;
        height: 50px;
        border-color: #cacaca;
    }

    .senha{
         border-radius: 9px;
        width: 80%;
        height: 50px;
        border-color: #cacaca;
    }

    .finalizarcad{
         border-radius: 9px;
        width: 80%;
        height: 50px;
        border-color: #cacaca;
    }

    .finalizarcad:hover{
background-color: #210d41;
transition: 0.5s;
    }
   

    /*cards*/

   
    .card-body h3 {
      font-size: 1rem;
      margin-bottom: 8px;
    }
    .card-body h2 {
      font-size: 1rem;
      margin-bottom: 10px;
    }
    .card {
      height: 100%;
      padding: 10px;
    }
    .card-img-top {
      max-height: 120px;
      object-fit: contain;
      margin-bottom: 10px;
    }
    .btn {
      font-size: 0.9rem;
      padding: 6px 12px;
    }
    .estrelas {
      width: 100px;
      margin: 5px auto;
    }

.card .btn {
  margin-top: auto; /* empurra o botão para o final */
  align-self: center; /* centraliza horizontalmente */
}

.btn {
  border-color: #1c1c1c;
  width: 200px;
}

.btn:hover {
  background-color: #000000;
  color: white;
}


/*fecha card*/

.centralpedidos{
    border-width: 1px;       
  border-style: solid;     
  border-color: black;
    height: 500px;
    width: 50%;
    margin-left: 45%;
    border-radius: 15px;
}

.centralcad{
    border-width: 1px;       
  border-style: solid;     
  border-color: black;
    height: 500px;
    width: 50%;
    border-radius: 15px;
}

.centralfotocad{
    margin-left: 30%;
}

.centralfotoped{
    margin-left: 30%;
}

.centralperguntas{
    border-width: 0.5px;       
  border-style: solid;     
  border-color: black;
    height: 500px;
    width: 40%;
    border-radius: 5px;
    margin-left: 30%;
}

#centralvendas{
      border-width: 1px;       
  border-style: solid;     
  border-color: black;
    height: 80px;
    width: 30%;
    border-radius: 5px;
    margin-left: 30px;
    margin-top: 60px;
}

#centralatendimento{
     border-width: 1px;       
  border-style: solid;     
  border-color: black;
    height: 80px;
    width: 30%;
    border-radius: 5px;
    margin-left: 30px;
    margin-top: 60px;
}

#centralreclamacoes{
 border-width: 1px;       
  border-style: solid;     
  border-color: black;
    height: 80px;
    width: 30%;
    border-radius: 5px;
    margin-left: 30px;
    margin-top: 60px;
}

#central{
    
}

.perguntasfreq{
    border-width: 1px;       
  border-style: solid;     
  border-color: black;
    height: 100%;
    width: 60%;
    border-radius: 5px;
    margin-left: 20%;
    margin-top: 60px;
    
}





/* RODAPÉ*/


footer {
      
      color: black;
      padding: 30px 20px;
      font-family: Arial, sans-serif;
      text-align: center; /* centraliza todo conteúdo */
      align-items: center;
      height: 200px;
      display: flex;
     
     
    }

    footer h5, footer h6 {
      margin-bottom: 10px;
      color: #000000;
    }

    footer a {
      color: #9ca3af;
      text-decoration: none;
      display: block;
      margin-bottom: 6px;
      font-size: 0.9rem;
    }

    footer a:hover {
      color: #7c3aed; /* roxo de destaque */
    }

    .footer-top img {
      max-width: 200px;
      height: auto;
      margin: 10px auto;
      display: block;
    }

    .footer-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      justify-items: center; /* centraliza as colunas no grid */
      margin-top: 20px;
    }

    .footer-links h6 {
      margin-bottom: 8px;
      font-size: 1rem;
    }

    .footer-phone {
      font-size: 1.2rem;
      font-weight: bold;
      color: #7c3aed;
    }


 










    /*suporte ao cliente*/
    .comprewpp{
        margin-left: 20%;
    }

     .falewpp{
        margin-left: 30%;
    }


    .bannercad{
        margin-left: -30px;
         object-fit: contain;
          object-fit: cover;
          margin-top: -70px;
          position: fixed
    }

    #cadastro{
      margin-top: -60px;
    }

    /*PAGINA PRODUTO*/

    #classificacao{
        background-color: rgb(242, 242, 242);
        margin-top: 5%;
        border-radius: 5px;
        position: sticky;
        top: 20px; /* distância do topo da tela */
         z-index: 100;
        background-color: white;
        padding-bottom: 20px;
        padding-bottom: 20px;
        border-right: 1px solid #ddd;
    }
 

/* Categoria no topo em telas pequenas */
@media (max-width: 767px) {
  #classificacao {
    position: static;
    border-right: none;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
  }
}


    .imgar{
        margin-left: 0%;
        height: auto;
    }

    html {
  scroll-behavior: smooth;
}

#prodcol1{
    display: flex;
}

#primeiralin{
    display: flex;
}


    .desconto {
      background-color: rgb(255, 136, 0);
      color: white;
      padding: 3px 6px;
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: bold;
      display: inline-block;
      margin-bottom: 8px;
    }
    .card-body h3 {
      font-size: 1rem;
      margin-bottom: 8px;
    }
    .card-body h2 {
      font-size: 1rem;
      margin-bottom: 10px;
    }
    .card {
      padding: 10px;
      height: 100%;
    }


    /*PAGINA DE PRODUTOS*/
    /* Lista do carrinho */
#lista-carrinho {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  width: 1500px;
  
}

#lista-carrinho li {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.infoprod{
  padding: 30px;
  margin-right: 20%;
}

/* Botão excluir no carrinho */
#lista-carrinho button {
  
  padding: 6px 12px;
  font-size: 0.8rem;
  margin-left: 50%;
}

#lista-carrinho button:hover {
  background-color: #ee7829;
  transform: scale(1.05);
}



/* Total */
#total {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 15px;
  color: #ee7829;
}

button1 {
  background-color: #2a9d8f;
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.2s;
}

button1:hover {
  background-color: #21867a;
  transform: scale(1.05);
}

.main-image {
    width: 100%;
    
    object-fit: contain;
    
    margin-bottom: 15px;
  }

  .thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
  
  }

  .thumbnail:hover {
    border: 2px solid #ee8142;
  }
  

  /*accordion produto*/
.accordion-button {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  margin: 0;
  line-height: 1.2;
  height: 60px;
}
.accordion-body {
  background-color: #fff;
  font-size: 1rem;
  color: #555;
  padding: 1rem;
}

.accordion-item {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
}

.accordion-button:not(.collapsed) {
  background-color: transparent; /* Remove o fundo azul */
  color: inherit; /* Mantém a cor do texto padrão */
  box-shadow: none; /* Remove sombra azul */

  .accordion-button:focus {
  box-shadow: none;
  outline: none;
}
}

.accordion-header {
  margin: 0;

}

.prodrelacionado{
  display: flex;
  
}

.btn-comprar {
  display: inline-block;
text-decoration: none;
  transition: background-color 0.3s ease;
border-color: #1c1c1c;
color: #000000;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
 
}

.btn-comprar:hover {
  background-color: black;
  color: white;
}

@media (max-width: 576px) {
  .btn-comprar {
    display: block;
    width: 100%;
    font-size: 14px;
    padding: 10px 0;
    margin-top: 10px;
  }
}

.btn-carrinho{
    display: inline-block;
text-decoration: none;
  transition: background-color 0.3s ease;
border-color: #1c1c1c;
color: #000000;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
}

.btn-carrinho:hover{
  background-color: #000000;
  transition: 0.2s;
  color: white;
}


/* 📱 Responsividade para telas menores */


.cardrel{
  margin-right: 50px;
}


/*ESTILIZAÇÃO DO CARRINHO*/
.botaocar{
  display: flex;
}


  .dialog {
     display: none; /* Oculto por padrão */ 
     position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%); 
      padding: 20px; 
      background: #fff; 
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
      z-index: 1000; } 
      
      .dialog.active { 
        display: block; /* Mostra o diálogo quando ativo */ } 
        
        .dialog-overlay { 
            display: none; 
            position: fixed; 
            top: 0;
            left: 0; 
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); z-index: 500; } 
            
        .dialog-overlay.active { display: block; } 
        
        .dialog-header, .dialog-footer { margin-bottom: 10px; }
        
        .dialog-footer { text-align: right; } 
        
        .dialog-body {
        display: flex; 
        grid-template-columns: 50%;
        gap: 10px; align-items: center; 
        }
                     
        .dialog-body img { 
        max-width: 100%; /* Ajuste o tamanho conforme necessário */
         border: 1px solid #ccc;
          padding: 5px; }

        #fechardialog{
            background-color: #fff;
            width: 100px;
            height: 30px;
            font-size: 20px;
            font-family: candara;
            margin-top: 10px;
            border-radius: 5px;
            border: 1px solid black;
        }

        #open-dialog{
          border-color: 2px solid #1c1c1c;
  width: 200px;
  border-radius: 5px;

        }
        


#open-dialog:hover {
  background-color: #000000;
  color: white;
}


/*FICHA TECNICA*/

th{
  width: 50%;
  padding: 10px;
  margin-left: 30px;
}

.tr1{
  background-color: #d1d1d1;
}



/*Cartao de credito*/
.formulariocartao{
  border: 1px solid black;
  width: 550px;
  border-radius: 25px;
  margin-left: 30%;
}

#cartao{
  border-radius: 10px;
  background-color: #210D41;
  color: white;
  height: 50px;
  width: 30%;
  font-size: 15px;
  align-items: center;
  margin-left: 35%;
  
}

.cartoesbarra{
  padding: 60px;
}

.texto5{
  width: 100px;
  border-radius: 5px;
}

.number{
  border-radius: 5px;
}

.pagamento{
  background-color: #21867a;
  width: 500px;
}

#pix{
  display: block;
}

.qr{
  margin-left: 60px;
  position: fixed;
}

#pague{
  display: flex;
  
}

.pix{
 
}

.perfil{
  margin-top: ;
}

.bemvindo{
border: 1px solid black;
  width: 550px;
  border-radius: 25px;
  margin-left: 30%;
}

.formulariocartao1{
  border: 1px solid black;
  width: 550px;
  border-radius: 25px;
  margin-left: 30%;
}

.imgblog{
margin-left: 150px;

}

#materia{
  margin-left: 0px;
  width: 900px;
padding: 30px;
text-align: justify;
}

#relacionadas{
  
  margin-left: 30px
}

#relacionadas a{
  text-decoration: none;
}


/* Fundo escuro atrás do popup */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  z-index: 999;
}

/* Janela do popup */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 500px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  z-index: 1000;
}

/* Botão de fechar */
.close-btn {
  margin-top: 10px;
  padding: 8px 20px;
  border: none;
  background: #d40000;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}