@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');

*{
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




body{
    background-color: #f1f1f1;
}

/* ----------------------------------------------- */

/*-------------------------------------------MENU----------------------------------------------------*/ 
/*Este bloco de código CSS estiliza um cabeçalho em uma página web, utilizando um layout flexível, espaçamento uniforme entre os elementos, fundo branco e uma transição suave de 0.3 segundos para propriedades animáveis.*/
.header{

    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 0 25px;
    transition: 0.3s;

}

.logo h1{
    color: black;
    
}

.logo  {
    display:flex;
    align-items: center;


}



.navigation{

display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;

}
/*alinha os itens no meio e um do lado do outro, adiciona um animação breve de 0.5sec */
.menu {

    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    z-index: 1;
    transition: 0.5s;
    z-index: 10;
}

.menu li {

list-style-type: none;
z-index: 10;


}
/*estiliza os titluos dos atalhos */
.menu li a {

    color: black;
    text-decoration: none;
    display: block;
    padding: 40px 25px ;
    font-size: 18px;
    line-height: 1;
    transition: 0.3s;
    z-index: 10;

}

.menu li a:hover {

    box-shadow: 0 -5px 0 px #fff inset,
    500px 0 0 rgb(255, 255, 255);
    padding: 35px 25px 45px 25px;
    z-index: 10;


}
/*Esse bloco de código CSS estiliza um ícone de "hamburger" para interfaces de usuário, definindo suas características visuais, como largura, altura, cor preta, bordas arredondadas, cursor interativo, índice de empilhamento para aparecer acima de outros elementos e uma transição suave de 0.3 segundos para efeitos visuais durante interações.*/

.hamburger{

    position: relative;
    width: 30px;
    height: 4px;
    background-color: black;
    border-radius: 10px;
    cursor: pointer;
    z-index: 11;
    transition: 0.3s;

}
/*Este trecho de código CSS estiliza pseudo-elementos (:before e :after) associados a um ícone de "hamburger". Esses elementos adicionais são posicionados absolutamente em relação ao ícone principal, têm altura fixa, são alinhados à direita, possuem cor de fundo preta, bordas arredondadas e uma transição suave de 0.4 segundos.*/
.hamburger:before,
.hamburger:after {

    content:"";
    position: absolute;
    height: 4px;
    right: 0;
    background: black;
    border-radius: 10px ;
    transition: 0.4s;
    z-index: 11;


    
}

.hamburger:before{
    top: -10px;
    width: 20px;
    z-index: 11;
    
}

.hamburger:after{

    top: 10px;
    width: 25px;
    z-index: 11;
    
}

.toggle-menu {

    position: absolute;
    width: 30px;
    height: 100%;
    z-index: 3;
    cursor: pointer;
    opacity: 0;
    z-index: 11;
    
}

.hamburger,
.toggle-menu {

    display: none;
    z-index: 11;
   
}

.navigation input:checked ~ .hamburger{
    background: transparent;
   
}

.navigation input:checked ~ .hamburger:before{

    top: o;
    transform: rotate(-45deg);
    width: 30px;
    z-index: 11;
    

}

.navigation input:checked ~ .hamburger:after{

    top: 0;
    transform: rotate(45deg);
    width: 30px;
    
}

.navigation input:checked ~ .menu{ 

    right: 0;
    box-shadow: -20px 0 40px rgba(0,0,0,0.3);
    ;
}
/*todas as funções acima são para definir como as barras pretas ao virar hambuerguer vão ter uma animação de rotate. */

/*-------------------------------------------END MENU----------------------------------------------------*/ 


/*-------------------------------------------IMAGEM DE FUNDO INDEX----------------------------------------------------*/ 

.imagem {
    position: relative;
    background-color: lightgray;
    overflow: hidden;
    background-repeat: no repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    max-height: 200px;
  }
  
  .texto {
    color: white;
    text-shadow: 3px 3px 3px black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .texto #maior{
    font-size: 1.6em;
  }

  .texto #menor{
    text-align: center;
    font-size: 1em;
  }
  
  
/*-------------------------------------------END IMAGEM DE FUNDO INDEX----------------------------------------------------*/ 


/*-------------------------------------------FOOTER----------------------------------------------------*/ 



footer{
    text-align: center;
    background-color: white;
    padding-top: 20px;
    padding-bottom: 2px;
}
footer a{
    text-decoration: none;
    color: black;
}
.footer-col{
    margin-bottom: 5%;
}
.expo-title{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 24px;
    width: 160px;
    margin: auto;
}
.paginas-title{
    margin-bottom: 10px;
    font-size: 24px;
    margin-top: 12px;
}
.contato-title{
    margin-bottom: 10px;
    font-size: 24px;
    margin-top: 12px;
}
.mensagens-title a{
    font-size: 16px;
    line-height: 25px;
    transition: all 0.3s ease
}
.mensagens-title a:hover{  
    color: #af00ff;
    padding-left: 7px;
}
.paginas-buton a{
    font-size: 16px;
    line-height: 25px;
    transition: all 0.3s ease
}
.paginas-buton a:hover{
    color: #af00ff;
    padding-left: 7px;
}
.contato-expo a{
    font-size: 16px;
    line-height: 25px;
    transition: all 0.3s ease;
}
.contato-expo a:hover{
    color: #af00ff;
    padding-left: 7px;
}
.container-imagens-footer{
    width: 170px;
    margin: auto;
    display: flex;
}
.contato-expo i{
    margin-right: 10px;
}
.Imagem-alcina{
    margin-right: 5px;
}



/*-------------------------------------------END FOOTER----------------------------------------------------*/ 


  
/*-------------------------------------------CADASTRO----------------------------------------------------*/ 

 

/*Define um contêiner principal que ocupa 100% da largura e altura da tela. Tem um fundo de cor #f8f8f8 e usa flexbox para centralizar itens horizontal e verticalmente.*/
  .main-login{
    width: 100%;
    height: 100%;
    background-color:#f8f8f8 ;
    display: flex;
    justify-content: center;
    align-items: center;

}
/*Outro contêiner que ocupa 100% da largura e altura, usando flexbox para centralizar itens na coluna (flex-direction: column).*/
.left-login{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.left-login > h1{
    color: black;
}
/*ocupa todo o lado direito e deixa do meio  */
.right-login{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}
/*Um cartão de login com largura de 70%, centralizado e estilizado com cor de fundo preta, bordas arredondadas, sombra e margens.*/
.card-login{
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px 35px;
    background: #000000;
    border-radius: 20px;
    box-shadow: 0px 10px 40px #00000000;
    margin-top: 20px;
    margin-bottom: 20px;

   


    
}



.card-login > p a{

  color: rgb(23, 167, 245);
}


.card-login > h1{
color: #ffffff;
font-weight: 800;
margin: 0;
}

#icat{

  margin-top: 10px;


}

/*Estilo para um elemento de classe "categoria". Define largura, borda, borda arredondada, preenchimento, cor de fundo, cor do texto, sombra e margem.*/

.categoria{

  width: 100%;
  border:none;
  border-radius: 10px;
  padding: 15px;
  background: #747474 ;
  color: #ffffff;
  font-size: 12px;
  box-shadow: 0px 5px 10px #665f5f;
  outline: none;
  box-sizing: border-box;
  justify-content: space-between;
  font-size: 0.9em;
  align-items: center;
  margin-top: 5px;
  
  
  
}

.categoria a{
    text-decoration: none;
    color: rgb(23, 167, 245);
    font-weight: 700;
}



.checks input[type=checkbox]{

margin-right: 10px;

}


/*Estilo para um campo de texto. Define largura, exibição flexível, alinhamento e margens.*/
.textfield{
    width: 30vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px 0x;
    
}
/*Define largura, exibição flexível, alinhamento e margens.*/
.card-cvv-mes-ano{

  width: 30vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0x;
    
}
/*Estilo para campos de entrada dentro do cartão mencionado. Define largura, borda, preenchimento, cor de fundo, cor do texto e sombra.*/
.card-cvv-mes-ano > input{

  width: 100%;
  border:none;
  border-radius: 10px;
  padding: 15px;
  background: #747474 ;
  color: #ffffff;
  font-size: 12px;
  box-shadow: 0px 3px 6px #665f5f;
  outline: none;
  box-sizing: border-box;
  margin-right: 10px;



}
/*Estilo para elementos de seleção (<select>) dentro do cartão. Define largura, borda, preenchimento, cor de fundo, cor do texto e sombra.*/
.card-cvv-mes-ano > select {

  width: 100%;
  border:none;
  border-radius: 10px;
  padding: 15px;
  background: #747474 ;
  color: #ffffff;
  font-size: 12px;
  box-shadow: 0px 3px 6px #665f5f;
  outline: none;
  box-sizing: border-box;
}


.card-cvv-mes-ano > input::placeholder{
  color: #f0ffff94;
  }





/*Estilo para campos de entrada dentro do .textfield. Define largura, borda, preenchimento, cor de fundo, cor do texto e sombra.*/

.textfield > input{
    width: 100%;
    border:none;
    border-radius: 10px;
    padding: 15px;
    background: #747474 ;
    color: #ffffff;
    font-size: 12px;
    box-shadow: 0px 3px 6px #665f5f;
    outline: none;
    box-sizing: border-box;

}

/*Estilo para elementos de seleção dentro do .textfield.*/
.textfield > select{
  width: 100%;
  border:none;
  border-radius: 10px;
  padding: 15px;
  background: #747474 ;
  color: #ffffff;
  font-size: 12px;
  box-shadow: 0px 3px 6px #665f5f;
  outline: none;
  box-sizing: border-box;
}


.textfield > label{
    color: #f0ffffde;
    margin-bottom: 10px;

}

.textfield > input::placeholder{
color: #f0ffff94;
}
/*Estilo para um botão de login. Define largura, preenchimento, margem superior, borda, borda arredondada, texto em maiúsculas, peso da fonte, espaçamento de letras, cor do texto, cor de fundo, cursor e sombra.*/
.btn-login{
    width: 100%;
    padding: 15px;
   margin-top: 20px;
    border: none;
    border-radius: 8px;
    outline: none;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 3px;
    color: #000000;
    background: white;
    cursor: pointer;
    box-shadow: 0px 3px 6px white;

}

 .img-cad{
    width: 70%;
   
}



.cad{
    background-color: rgb(0, 0, 0);
}
/*Estilo para botões de rádio. Define a aparência, cor de fundo, borda, largura, altura e posição.*/
.checks input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid #333;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 10px;
  }
  
 
 /*Estilo para o estado marcado dos botões de rádio. Adiciona um marcador de seleção ("✔").*/ 
  .checks input[type="radio"]:checked::before {
    content: "✔";
    position: absolute;
    top: -1px;
    left: 2px;
    font-size: 16px;
    color: #333;
  }
  /*Estilo para o estado focado dos botões de rádio.*/
  .checks input[type="radio"]:focus {
    outline: none;
  }
  /*Estilo para o estado ativo dos botões de rádio.*/
  .checks input[type="radio"]:active {
    transform: scale(0.9);
  }
/* Estilo para uma caixa que parece ser usada para exibir mensagens de erro. Define fonte, tamanho, peso, fundo, alinhamento, largura, altura, borda arredondada, margens e preenchimento.*/
  .caixa-CadastroErro{
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    font-weight: normal;
    margin: auto;
    background: linear-gradient(75deg, #e95353, rgb(211, 12, 12));
    text-align: center;
    width: 55%;
    height: 20%;
    border-radius: 10px;
    align-items: center;
    margin-top: 15px;
    padding: 10px;
}
.menssagemErro{
    margin: auto;
}
.menssagemErro p{
    color: #ffffff;
   
}
/*Estilo para uma caixa que parece ser usada para exibir mensagens de sucesso. Define fonte, tamanho, peso, fundo, alinhamento, largura, altura, borda arredondada, margens, preenchimento e exibição flexível.*/
.caixa-CadastroCerto{
  font-family: 'Noto Sans', sans-serif;
  font-size: 15px;
  font-weight: bolder;
  margin: auto;
  background: linear-gradient(75deg, #b33beb, rgb(148, 112, 219));
  text-align: center;
  width: 180px;
  height: 70px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 10px;
  margin-top: 15px; 
}
.menssagemCerto{
  
  margin: auto;
}
.menssagemCerto p{
  color: #FFFFFF;

 
}
  



/*-------------------------------------------END CADASTRO----------------------------------------------------*/ 



/*-------------------------------------------SOBRE NOS----------------------------------------------------*/ 


/* Começo da estilização  do "Sobre nós" */
.SobrenosTexto h1{
    text-align: center;
    margin-top: 30px;
}
.TextoSobrenos{
    background-color: white;
    width: 440px;
    padding: 15px;
    text-align: center;
    position: absolute;
}
.TextoSobrenos p{
    font-size: 18px;
}
.conteudo-container-sobrenos{
    margin-top: 60px;
    height: 850px;
    padding-right: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ImagemSobrenos{
    margin-left: 800px;
}


/*-------------------------------------------END SOBRE NOS----------------------------------------------------*/ 




/*-------------------------------------------CARROSEL CRIADORES----------------------------------------------------*/ 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

.titulo-perfil{
  background-color: white;
  margin: auto;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 50px;
  margin-top: 50px;
}
.titulo-perfil h1{
  font-family: 'Noto Sans', sans-serif;
  text-align: center;
  margin-top: 50px;
  font-size: 40px;
  color: black;
}
.slide-row{
  display: flex;
  width: 2400px;
  transition: 0.45s;
}
.slide-col{
width: 800px;
height: 400px;
position: relative;
}
.perfil-imagem{
  position: absolute;
  top: 40px;
  right: 41%;
  margin-top: 40px;
  height: 100%;
}
.perfil-imagem img{
  height: 40%;
  width: 110%;
  border-radius: 50%;
}
.perfil-text{
  font-family: 'Noto Sans', sans-serif;
  font-size: 1.5vw;
  width: 500px;
  height: 270px;
  position: absolute;
  text-align: center;
  right: 18%;
  top: 110%;
  transform: translateY(-50%);
  border-radius: 10px;
  color: black;
  padding-left: 25px;
  padding-right: 25px;
  box-sizing: border-box;
}
.perfil-text p{
  font-size: 15px;
  line-height: 24px;
}
.perfil-text p p2{
  font-size: 15px;
font-weight: 800;
}
.perfil-text h3{
  font-size: 15px;
  margin: 20px 0 5px;
  font-weight: 600;
}
.container-perfil{
  width: 800px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.indicador-perfil{
  position: absolute;
  left: 43%;
  bottom: -10px;
  z-index: 1;
}
.btn-perfil{
  display: inline-block;
  height: 15px;
  width: 15px;
  margin: 4px;
  border-radius: 15px;
  background: black;
  cursor: pointer;
  transition: 0.45s;
}
.active-perfil{
  width: 45px;
}
.testimonial-perfil{
  height: 100%;
  width: 100%;
  overflow: hidden;
}


/*-------------------------------------------END CARROSEL CRIADORES----------------------------------------------------*/ 




/*-------------------------------------------ATALHOS CATEGORIA----------------------------------------------------*/ 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

.Roupas-Categorias {
  padding-top: 50px;
  text-align: center;
  font-family: 'Noto Sans', sans-serif;

}

.container-conteudo-Categorias {
  text-align: center;
  font-family: 'Noto Sans', sans-serif;
}

.Imagem1-Categorias {
  margin: auto;
  text-align: center;
  width: 300px;
}

.Imagem1-Categorias .Imagem-container-Categorias {
  overflow: hidden;
}

.Imagem1-Categorias .Imagem-container-Categorias img {
  transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
  max-width: 105%;
}

.Imagem1-Categorias:hover img,
.Btn-Imagem1-Categorias:hover ~ .Imagem-container-Categorias img {
  transform: scale(1.5);
  opacity: 0.7;
}

.Imagem2-Categorias {
  margin: auto;
  text-align: center;
  width: 300px;
  margin-top: 50px;
}

.Imagem2-Categorias .Imagem-container-Categorias {
  overflow: hidden;
}

.Imagem2-Categorias .Imagem-container-Categorias img {
  transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
  max-width: 105%;
}

.Imagem2-Categorias:hover img,
.Btn-Imagem1-Categorias:hover ~ .Imagem-container-Categorias img {
  transform: scale(1.5);
  opacity: 0.7;
}


.Text-Imagem-Categorias {
  padding-bottom: 10px;
}

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

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

/*-------------------------------------------END ATALHOS CATEGORIA----------------------------------------------------*/ 

/*-------------------------------------------SERCH BAR----------------------------------------------------*/ 

.serch-box{
    border: solid 1px;
    border-color: #928a8ab9;
    height: 20px;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .serch-box:hover{
    border-color: #5f038a;
  }
  
  .search-btn{
    color: #5f038a;
    width: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
  }
  
  .search-txt{
    border: none;
    background: none;
    outline: none;
    font-size: 16px;
   
  }
  
  /*-------------------------------------------END SERCH BAR----------------------------------------------------*/ 
  
  
  
  /*-------------------------------------------ERROR MENSAGE SEARCH PAGE----------------------------------------------------*/ 
  
  .erro-prod-search {
    text-align: center;
    align-items: center;
    padding: 100px;
  }
  
  
  
  /*-------------------------------------------END ERROR MENSAGE SEARCH PAGE----------------------------------------------------*/ 


  /*-------------------------------------------FILTER----------------------------------------------------*/ 

.filter-bar {

    align-items: center;
    justify-content: center;
    padding: 15px;
    padding-top: 40px;
    display: block;
    text-align: center;
    flex-direction: column;
  }
  
  
  .filter-bar select,
  .filter-bar button {
    margin-left: 10px;
    font-size: 14px;
    padding: 3px;
    margin-right: 10px;
    
  }
  
  .filter-button {
    background-color: #000000;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 10px;
    width: 90px;
    height: 30px;
  
  }
  .filter-bar form {
    display: none;
  }
  
  .filter-bar .mobile-show {
    display: block;
  }
  
  @media (min-width: 768px) {
    .filter-bar form {
      display: block;
    }
  
    .filter-bar .mobile-show {
      display: none;
    }
  }
  
  /* Estilos para dispositivos móveis */
  @media (max-width: 767px) {
    .filter-bar label,
    .filter-bar select,
    .filter-bar button {
        display: block;
        width: 100%;
        margin: 10px 0; /* Adiciona margens para espaçar os itens verticalmente */
    }
  
    .filter-button {
      height: 40px;
    }
  }
  
  
  /*-------------------------------------------END FILTER----------------------------------------------------*/ 


  /*-------------------------------------------CARD PRODUTO NICOLAS----------------------------------------------------*/ 


.bodyprod {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
  }
  
  header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
  }
  
  h1 {
    margin: 0;
  }
  
  .h3produtos {
    font-size: 17px;
  }
  .h3produtos::first-letter {
     text-transform: uppercase;
  }
  
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1300px;
    margin: 20px auto;
    padding: 30px;
    background-color: #f0f0f0;
    border-radius: 10px;
  }
  
  .clothing-item {
    width: 250px;
    margin: 8px;
    background-color: #ffffff;
    border-radius: 10px;
    text-align: center;
    padding: 15px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  
  .clothing-item img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
    transition: transform 0.4s ease;
    
  }
  
  .clothing-item:hover img {
    transform: scale(1.1);
  }
  
  .btncarrinho .material-symbols-outlined{
    background-color: #ffffff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 24px;
    position: absolute;
    top: 248px; /* Posição em relação ao topo */
    right: 20px; /* Posição em relação à direita */
    cursor: pointer;
     transition: transform 0.3s ease;
     text-decoration: none;
     color: #AF00FF;
  }
  
  .clothing-details {
    text-align: left;
    align-items: left;
    font-size: 12px;
    margin-top: -7px;
    
  }
  
  .clothing-price {
    font-weight: bolder;
    font-size: 14px;
    color: #AF00FF;
    margin-bottom: 5px;
  }
  
  @media screen and (max-width: 768px) {
    .clothing-item {
        flex: 0 0 calc(50% - 20px);
        width: calc(50% - 20px);
    }
  }
  
  @media screen and (max-width: 480px) {
    .clothing-item {
        flex: 0 0 100%;
        width: 100%;
    }
  }
  
  /*-------------------------------------------END CARD NICOLAS----------------------------------------------------*/ 

  
.mainpagprod {
display: flex;
border-radius: 10px;
background-color: #ffffff;
align-items: center;
margin-right: 20px;
max-width: 1200px;
margin: 0 auto;
margin-top: 50px;
padding: 10px;
  

	
}

.allcontainer{

	
	border-radius: 10px;
	display: flex;
	padding: 5px;
    width: 1200px;
    height: auto;
    
  


}

.allcontainer img{

	border-radius: 10px;
	display: flex;
	border-radius: 15px;
	width:360px;
	height: 500px;
	margin: auto;
    margin-top: 30px;
}

.container-img{


align-items: center;
width: 400px;
height: 560px;
}



 
.container-info-product {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 10px;
    width: 100%;
    margin-top: 13px;
}

.container-price {
	padding-bottom: 20px;
	border-bottom: 1px solid #e4e4e4;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.container-price span {
	font-size: 20px;
	font-weight: 300;
}
.nome-prod p{
    
    font-size: 25px;
	font-weight: 300;
    padding-bottom: 15px;

}
.container-details-product {
	padding: 30px 0;
}


.container-add-cart {
	display: flex;
	padding-bottom: 30px;
	margin-bottom: 10px;
	margin-top: 10px;
    color: none;
}

.btn-add-to-cart {
	
	background-color: rgb(255, 255, 255);
	padding: 10px;
	color: #AF00FF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	cursor: pointer;
	border-radius: 5px;
	transition: transform 0.7s ease;
    border-color: #AF00FF;
    
	
}

.btn-add-to-cart:hover {
  background-color: #AF00FF;
  color: #ffffff;
}

.condicaoprod{

  padding-bottom: 20px;
	border-bottom: 1px solid #e4e4e4;
	display: flex;
	align-items: center;
  text-align: center;
  

  
}
.condicaoprod span{

  font-size: 24px;
	font-weight: 300;


}

.condicaoProd::after {
  content: "";
  display: flex;
  width: 100%;
  height: 1px;
  background-color: #e4e4e4;
  margin-top: 20px; /* Ajuste este valor de acordo com a distância desejada entre a div e a linha */
  align-items: center;
  text-align: center;
  display: block;
}







.container-description,
.container-additional-information,
.container-reviews {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #e4e4e4;
	padding: 10px 0;
    
  
 
}

.title-description {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
  
}

.container-description{

  height: 255px; /* Adjust the height as per your design */
  overflow: hidden;
}



.text-description {
	font-size: 16px;
	color: #252525;
	line-height: 22px;
	margin-top: 20px;
    flex-grow: 1;
    margin-left: 2px;
    width: 650px;
    
 
}
.title-description span {
	font-size: 20px;
	
}

.text-description-container {
  
  overflow-y: auto;
}

.container-social {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	align-items: center;
	border-bottom: 1px solid #e4e4e4;
}

.container-social span {
	font-weight: 300;
	color: #252525;
}

.container-buttons-social {
	display: flex;
	gap: 15px;
	align-items: center;
}

.container-buttons-social a:link,
.container-buttons-social a:visited {
	color: #666;
	font-size: 15px;
}

.container-buttons-social a:hover {
	color: #AF00FF;
}
  


/*-------------------------------------------PAGINA USUARIO----------------------------------------------------*/ 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

* {
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #f1f1f1;
}

.tudo-perfil-usuario{
    margin-top: 50px;
    margin-bottom: 45px;
}
.parte-perfil-usuario{
    display: flex;
    align-items: center;
}
.container-imagem-usuario{
    width: 200px;
    height: 200px;
}
.container-imagem-sair-perfil-usuario{
    text-align: center;
    display: flex;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.imagem-perfil-usuario{
    border-radius: 50%;
    position: absolute;
    margin-right: 500px;
}
.imagem-perfil-usuario img{
    border-radius: 50%;
}
.sobrepondo-imagem-perfil-usuario {
    text-align: center;
    margin-top: 80%;
    margin-left: 75%;
    background-color: #af00ff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    z-index: 2;
    position: relative; /* Adicione esta linha */
}

#edit-perfil-usuario {
    margin-top: 2px;
    font-size: 30px;
    font-weight: 100;
    color: white;
}

.file-upload {
    position: absolute;
    top: -20px;
    right: 0; /* Mudança aqui para direita */
    width: 40px;
    height: 60px;
    opacity: 0;
    cursor: pointer;
    z-index: 3; /* Garante que o input esteja acima do ícone de edição */
}
.textos-perfil-usuario{
    margin-left: 20px;
}
.ola-perfil-usuario p{
    font-size: 30px;
    font-weight: 600;
}
.mensagem-perfil-usuario{
    margin-right:20px;
    margin-top: 10px;
}
.mensagem-perfil-usuario p{
    font-size: 18px;
}
.btn-sair-perfil-usuario{
    margin-top: 20px;
}
.btn-sair-perfil-usuario a{
    
    font-size: 18px; 
}


.tudo{
    background-color: white;
    width: 330px;
    margin: auto;
    border-radius: 10px; 
    margin-bottom: 50px;
}
.carrinho{
    margin-top: 20px;
}
.conteudo-carrinho{
    display: none; /* Display: none; para a tela de "carrinho" não aparecer. */
}
.card-carrinho{
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding-top: 8px;
    cursor: pointer;
    width: 317px;
}
.card-carrinho p{
    font-size: 20px;
    font-weight: 600;
}
.card-carrinho.active {
    color: #af00ff;
    /* Adicione outras propriedades de estilo conforme necessário */
}
#shopping_cart{
    margin-right: 10px;
    font-size: 30px;
}
#chevron-carrinho{
    margin-left: 5px;
    font-size: 30px;
    margin-top: 5px;
}
#chevron-dados{
    margin-left: 5px;
    font-size: 30px;
    margin-top: 5px;
}
#chevron-cadastrados{
    margin-left: 5px;
    font-size: 30px;
    margin-top: 5px;
}
/* Define a classe para girar as setas para baixo */
.rotate-down {
    transform: rotate(90deg);
    transition: transform 0.3s ease; /* Adicione uma transição suave para a animação */
}


.container-editar-produto{
    margin-top: 20px;
}
.tabela-carrinho{
    background-color: white;
    margin-top: 15px;
    display: flex;
    align-items: center;
}
.imagem-tabela-carrinho img{
   border-radius: 20px; 
   margin-top: 10px;
   margin-left: 10px;
}
.imagem-tabela-carrinho img:hover{
    transition: opacity 0.4s ease;
    opacity: 0.6;
}
.texto-tabela-carrinho{
    margin-left: 8px;
}
.preco-tabela-carrinho{
    font-size: 20px;
    font-weight: 600;
}
.desc-tabela-carrinho{
    font-size: 20px;
    margin-top: 15px;
    
}
.excluir-tabela-carrinho{
    margin-left: 35px;
}
.excluir-tabela-carrinho span{
    color: black;
}
#delete{
    font-size: 40px;
    color: black;
}
#delete:hover {
    color: red; /* Altera a cor para vermelho quando o cursor está sobre o ícone */
}
.total-carrinho{
    display: flex;
    margin-top: 20px;
    margin-left: 10px;
}
.total-carrinho p{
    margin-right: 5px;
    font-size: 20px;
    font-weight: 600;
}
.confirmar-carrinho a{
    text-decoration: none;
}
.texto-confirmar-carrinho{
    background-color: white;
    width: 140px;
    height: 35px;
    text-align: center;
    margin: auto;
    margin-top: 10px;
    border-radius: 5px;
    border: #af00ff solid 2px;
}
.texto-confirmar-carrinho p{
    color: #af00ff;
    font-size: 17px;
    font-weight: 300;
    height: 32px; /* Alterar valores para o media query caso o hover do botão estiver com problemas*/
    padding-top: 5px;
}
.texto-confirmar-carrinho p:hover{
    color: white;
    transition: background-color 0.4s ease;
    background-color: #af00ff;
}

.dados{
    margin-top: 20px;
}
.conteudo-dados{
    display: none;  /* Display: none; para a tela de "dados" não aparecer. */
}
.card-dados{
    display: flex;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
    width: 190px;
}
.card-dados p{
    font-size: 20px;
    font-weight: 600;
}
.card-dados.active {
    color: #af00ff;
    /* Adicione outras propriedades de estilo conforme necessário */
}
#database{
    margin-right: 10px;
    font-size: 30px;
}
.tabela-dados{
    margin-top: 15px;
    margin-bottom: 30px;
    background-color: white;
}
.re-email{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 15px;
}
.e-email p{
    font-weight: 600;
    font-size: 20px
}
.u-email{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    
}
.re-nome{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-nome{
    font-weight: 600;
    font-size: 20px;
}
.u-nome{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-sobrenome{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-sobrenome{
    font-weight: 600;
    font-size: 20px;
}
.u-sobrenome{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-endereco{
    display: flex;
    align-items: baseline;
    margin-left: 10px;
    margin-top: 10px;
}
.e-endereco{
    font-weight: 600;
    font-size: 20px;
}
.u-endereco{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-cep{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-cep{
    font-weight: 600;
    font-size: 20px;
}
.u-cep{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-complemento{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-complemento{
    font-weight: 600;
    font-size: 20px;
}
.u-complemento{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-tel{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-tel{
    font-weight: 600;
    font-size: 20px;
}
.u-tel{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.editar-dados {
    background-color: white;
    border: #af00ff solid 2px;
    width: 165px;
    height: 35px;
    text-align: center;
    margin: auto;
    border-radius: 5px;
    margin-bottom: 30px;
}
.editar-dados a{
    text-decoration: none;
}
.editar-dados p{
    color: #af00ff;
    font-size: 17px;
    font-weight: 300;
    height: 32px; /* Alterar valores para o media query caso o hover do botão estiver com problemas*/
    padding-top: 5px;
}
.editar-dados p:hover{
    color: white;
    transition: background-color 0.4s ease;
    background-color: #af00ff;
}


.cadastrados{
    margin-top: 20px;
    margin-bottom: 20px;
}
.card-cadastrados{
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding-bottom: 8px;
    cursor: pointer;
    width: 281px;
}
.card-cadastrados p{
    font-size: 20px;
    font-weight: 600;
}
.card-cadastrados.active {
    color: #af00ff;
    /* Adicione outras propriedades de estilo conforme necessário */
}
#bookmark_manager{
    margin-right: 10px;
    font-size: 30px;
}
.conteudo-dados{
    background-color: white;
    display: none;  /* Display: none; para a tela de "dados" não aparecer. */
    padding-bottom: 10px;
    border-radius: 20px;
}
.card-dados{
    display: flex;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
    width: 190px;
}
.card-dados p{
    font-size: 20px;
    font-weight: 600;
}
#database{
    margin-right: 10px;
    font-size: 30px;
}
.tabela-dados{
    margin-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
}
.re-email{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 15px;
}
.e-email p{
    font-weight: 600;
    font-size: 20px
}
.u-email{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-nome{
    display: flex;
    align-items: center;
    margin-left: 10px;
}
.e-nome{
    font-weight: 600;
    font-size: 20px;
}
.u-nome{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-sobrenome{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-sobrenome{
    font-weight: 600;
    font-size: 20px;
}
.u-sobrenome{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-endereco{
    display: flex;
    align-items: baseline;
    margin-left: 10px;
    margin-top: 10px;
}
.e-endereco{
    font-weight: 600;
    font-size: 20px;
}
.u-endereco{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-cep{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-cep{
    font-weight: 600;
    font-size: 20px;
}
.u-cep{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-complemento{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-complemento{
    font-weight: 600;
    font-size: 20px;
}
.u-complemento{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-tel{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-tel{
    font-weight: 600;
    font-size: 20px;
}
.u-tel{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.espaco-editar-dados{
    padding-bottom: 10px;
}
.editar-dados {
    background-color: white;
    border: #af00ff solid 2px;
    width: 165px;
    height: 35px;
    text-align: center;
    margin: auto;
    border-radius: 5px;
}
.editar-dados a{
    text-decoration: none;
}
.editar-dados p{
    color: #af00ff;
    font-size: 17px;
    font-weight: 300;
    height: 33px; /* Alterar valores para o media query caso o hover do botão estiver com problemas*/
    padding-top: 5px;
}
.editar-dados p:hover{
    color: white;
    transition: background-color 0.4s ease;
    background-color: #af00ff;
}






.conteudo-carrinho-cadastrados{
    display: none;   
}
.tabela-cadastrados th{
    flex-direction: column;
}
.conteudo-carrinho-cadastrados{
    background-color: white;
    border-radius: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 20px;
}
.editar-tabela-carrinho{
    margin-left: 20px;
}
.editar-tabela-carrinho span{
    color: #af00ff;
}
#edit{
    font-size: 30px;
}
#delete-cad{
    font-size: 35px;
}
#delete-cad:hover{
    color: red;
}
.excluir-tabela-cad{
    margin-left: 15px;
}
.excluir-tabela-cad span{
    color: black;
}
.titulo-preco p{
    font-weight: 600;
    margin-left: 15px;
    margin-bottom: 10px;
    font-size: 20px;
}
.linha1-editar-produtos{
    display: flex;
    margin-bottom: 20px;
}
.e-precoO{
    width: 120px;
    margin-left: 10px;
    text-align: center;
}
.u-precoO{
    background-color: #cfcfcf;
    width: 120px;
    margin-top: 10px;
    margin-left: 10px;
    padding-top: 7px;
    height: 40px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid black;
    opacity: 0.6;
}
.col-precoN{
    margin-left: 40px;
}
.e-precoN{
    width: 120px;
    margin-left: 10px;
    text-align: center;
}
.u-precoN input[type="text"]{
    background-color: #e6e6e6;
    width: 120px;
    margin-top: 10px;
    margin-left: 10px;
    height: 40px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid black;
}
.linha2-editar-produtos{
    margin-bottom: 20px;
}
.e-nomeS p{
    font-weight: 600;
    margin-left: 15px;
    font-size: 20px;
}
.u-nomeS input[type="text"]{
    background-color: #e6e6e6;
    width: 290px;
    height: 40px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid black;
}
.linha3-editar-produtos{
    margin-bottom: 20px;
}
.e-desc p{
    font-weight: 600;
    margin-left: 15px;
    font-size: 20px;
}
.u-desc input[type="text"]{
    background-color: #e6e6e6;
    width: 290px;
    height: 40px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid black;
}
.linha4-editar-produtos{
    margin-bottom: 20px;
}
.e-tipo p{
    font-weight: 600;
    margin-left: 15px;
    font-size: 20px;
}
.u-tipo{
    margin-top: 10px;
}
.u-tipo input[type="radio"]{
    appearance: none;
    background-color: #e6e6e6;
    border: 2px solid black;
    height: 20px;
    width:  20px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    border-radius: 4px;
    display: inline-flex; /* Para alinhar verticalmente o conteúdo */
    align-items: center; /* Centralizar verticalmente */    
    cursor: pointer;
}
.u-tipo input[type="radio"]:checked::before{
    content: "✔";
    color: #af00ff;
    font-weight: 600;
    position: absolute;
    text-align: center;
    font-size: 20px;
}
.u-tipo label {
    cursor: pointer; /* Para mostrar a mão ao passar o mouse sobre o label */
    font-size: 18px;
    position: absolute;
    margin-left: 5px;
    margin-top: 7px;
}
.linha5-editar-produtos{
    margin-bottom: 20px;
}
.e-cond p{
    font-weight: 600;
    margin-left: 15px;
    font-size: 20px;
}
.u-cond{
    margin-top: 10px;
}
.u-cond input[type="radio"]{
    appearance: none;
    background-color: #e6e6e6;
    border: 2px solid black;
    height: 20px;
    width:  20px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    border-radius: 4px;
    display: inline-flex; /* Para alinhar verticalmente o conteúdo */
    align-items: center; /* Centralizar verticalmente */    
    cursor: pointer;
}
.u-cond input[type="radio"]:checked::before{
    content: "✔";
    color: #af00ff;
    font-weight: 600;
    position: absolute;
    text-align: center;
    font-size: 20px;
}
.u-cond label {
    cursor: pointer; /* Para mostrar a mão ao passar o mouse sobre o label */
    font-size: 18px;
    position: absolute;
    margin-left: 5px;
    margin-top: 7px;
}
.linha6-editar-produtos{
    margin-bottom: 30px;
}
.e-sub p{
    font-weight: 600;
    margin-left: 15px;
    font-size: 20px;
}
.u-sub{
    margin-top: 10px;
}
.u-sub select{
    background-color: #e6e6e6;
    border: 2px solid black;
    font-size: 17px;
    width: 150px;
    height: 40px;
    margin-left: 10px;
    text-align: center;
    border-radius: 4px;
    display: inline-flex; /* Para alinhar verticalmente o conteúdo */
    align-items: center; /* Centralizar verticalmente */    
    cursor: pointer;
}
.btn-slavar-alt-prod{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
}
.btn-slavar-alt-prod input[type="submit"]{
    background-color: white;
    border: 2px solid #af00ff;
    width: 165px;
    height: 35px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 30px;
    color: #af00ff;
    font-size: 17px;
    text-decoration: none;
}
.btn-slavar-alt-prod input[type="submit"]:hover{
    background-color: #af00ff;
    transition: background-color 0.4s ease;
    color: white;
}
#delete-cad{
    font-size: 35px;
}
#delete-cad:hover{
    color: red;
}
#edit{
    font-size: 30px;
}

.tudo-tudo-desktop{
    display: flex;
    width: 825px;
    height: auto;
    margin: auto;
    margin-bottom: 50px;
    display: none;
}
.tudo-card-desktop{
    background-color: #f1f1f1;
    width: 330px;
    height: 225px;
    border: 3px solid black;
}
.card-carrinho-desktop{
    display: flex;
    margin-top: 5px;
    align-items: center;
    margin-left: 5px;
    cursor: pointer;
    width: 317px;
}
.card-carrinho-desktop p{
    font-size: 20px;
    font-weight: 600;
    width: 330px;
}
.card-carrinho-desktop.active {
    color: #af00ff;
    /* Adicione outras propriedades de estilo conforme necessário */
}
#shopping_cart{
    margin-right: 10px;
    font-size: 30px;
}
#chevron-carrinho{
    margin-left: 5px;
    font-size: 30px;
    margin-top: 5px;
}
.card-dados-desktop{
    display: flex;
    align-items: center;
    margin-left: 5px;
    cursor: pointer;
    width: 190px;
    margin-top: 10px;
}
.card-dados-desktop p{
    font-size: 20px;
    font-weight: 600;
    width: 150px;
}
.card-dados-desktop.active {
    color: #af00ff;
    /* Adicione outras propriedades de estilo conforme necessário */
}
#database{
    margin-right: 10px;
    font-size: 30px;
}
#chevron-dados{
    margin-left: 5px;
    font-size: 30px;
    margin-top: 5px;
}
.card-cadastrados-desktop{
    display: flex;
    align-items: center;
    margin-left: 5px;
    cursor: pointer;
    width: 281px;
    margin-top: 10px;
}
.card-cadastrados-desktop p{
    font-size: 20px;
    font-weight: 600;
    width: 300px;
}
.card-cadastrados-desktop.active {
    color: #af00ff;
    /* Adicione outras propriedades de estilo conforme necessário */
}
#bookmark_manager{
    margin-right: 10px;
    font-size: 30px;
}
#chevron-cadastrados{
    margin-left: 5px;
    font-size: 30px;
    margin-top: 5px;
}
#chevron-enderecos{
    margin-left: 5px;
    font-size: 30px;
    margin-top: 5px;
}
.tabelas-desktop{
    width:400px;
    margin-left: 50px;
}


.conteudo-carrinho-desktop{
   background-color: white;
    display: none; /* para não aparecer esta parte*/
    border-radius: 20px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 20px;
}
.carrinho-vazio-desktop{
    text-align: center;
    margin-top: 0px;
    font-size: 20px;
}
.cadastrados-vazio-desktop{
    text-align: center;
    margin-top: 10px;
    font-size: 20px;
}

.carrinho-vazio{
    text-align: center;
    margin-top: 10px;
    font-size: 20px;
}
.tabela-carrinho-desktop{
    background-color: white;
    margin-bottom: 1px;
    display: flex;
    align-items: center;
    border-radius: 20px 20px 20px 20px;
}
.imagem-tabela-carrinho-desktop img{
   border-radius: 20px; 
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: 10px;
}
.imagem-tabela-carrinho-desktop img:hover{
    transition: opacity 0.4s ease;
    opacity: 0.6;
}
.texto-tabela-carrinho-desktop{
    margin-left: 8px;
    width: 180px;
}
#primeiro-card{
    width: 220px;
}
.preco-tabela-carrinho-desktop{
    font-size: 20px;
    font-weight: 600;
}
.desc-tabela-carrinho-desktop{
    font-size: 20px;
    margin-top: 15px;
}
.excluir-tabela-carrinho-desktop{
    margin-left: 0px;
}
.excluir-tabela-carrinho-desktop span{
    color: black;
}
#delete{
    font-size: 40px;
    color: black;
}
#delete:hover {
    color: red; /* Altera a cor para vermelho quando o cursor está sobre o ícone */
}
.total-carrinho-desktop{
    display: flex;
    margin-top: 20px;
    margin-left: 20px;
    padding-bottom: 20px;
}
.total-carrinho-desktop p{
    margin-right: 5px;
    font-size: 20px;
    font-weight: 600;
}
.confirmar-carrinho-desktop a{
    text-decoration: none;
}
.texto-confirmar-carrinho-desktop{
    background-color: white;
    width: 140px;
    height: 35px;
    text-align: center;
    margin: auto;
    margin-top: 0px;
    border-radius: 5px;
    border: #af00ff solid 2px;
}
.texto-confirmar-carrinho-desktop p{
    color: #af00ff;
    font-size: 17px;
    font-weight: 300;
    height: 33px; /* Alterar valores para o media query caso o hover do botão estiver com problemas*/
    padding-top: 5px;
}
.texto-confirmar-carrinho-desktop p:hover{
    color: white;
    transition: background-color 0.4s ease;
    background-color: #af00ff;
}




.conteudo-dados-desktop{
    background-color: white;
    display: none;  /* Display: none; para a tela de "dados" não aparecer. */
    padding-bottom: 10px;
    border-radius: 20px;
}
#database{
    margin-right: 10px;
    font-size: 30px;
}
.tabela-dados-desktop{
    margin-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
}
.re-email-desktop{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 15px;
}
.e-email-desktop p{
    font-weight: 600;
    font-size: 20px
}
.u-email-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-nome-desktop{
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding-top: 10px;
}
.e-nome-desktop{
    font-weight: 600;
    font-size: 20px;
}
.u-nome-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-sobrenome-desktop{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-sobrenome-desktop{
    font-weight: 600;
    font-size: 20px;
}
.u-sobrenome-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-endereco-desktop{
    display: flex;
    align-items: baseline;
    margin-left: 10px;
    margin-top: 10px;
}
.e-endereco-desktop{
    font-weight: 600;
    font-size: 20px;
}
.u-endereco-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-cep-desktop{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-cep-desktop{
    font-weight: 600;
    font-size: 20px;
}
.u-cep-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-complemento-desktop{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-complemento-desktop{
    font-weight: 600;
    font-size: 20px;
}
.u-complemento-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.re-tel-desktop{
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}
.e-tel-desktop{
    font-weight: 600;
    font-size: 20px;
}
.u-tel-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
    margin-right: 10px;
}
.espaco-editar-dados-desktop{
    padding-bottom: 10px;
}
.editar-dados-desktop {
    background-color: white;
    border: #af00ff solid 2px;
    width: 165px;
    height: 35px;
    text-align: center;
    margin: auto;
    border-radius: 5px;
}
.editar-dados-desktop a{
    text-decoration: none;
}
.editar-dados-desktop p{
    color: #af00ff;
    font-size: 17px;
    font-weight: 300;
    height: 33px; /* Alterar valores para o media query caso o hover do botão estiver com problemas*/
    padding-top: 5px;
}
.editar-dados-desktop p:hover{
    color: white;
    transition: background-color 0.4s ease;
    background-color: #af00ff;
}






.container-editar-produto-desktop{
    display: none;   
}
.tabela-cadastrados-desktop th{
    flex-direction: column;
}
.conteudo-carrinho-cadastrados-desktop{
    display: none;
    background-color: white;
    border-radius: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
.editar-tabela-carrinho-desktop{
    margin-left: 0px;
}
.editar-tabela-carrinho-desktop span{
    color: #af00ff;
}
#edit{
    font-size: 30px;
}
#delete-cad-desktop{
    font-size: 35px;
}
#delete-cad-desktop:hover{
    color: red;
}
.excluir-tabela-cad-desktop{
    margin-left: 15px;
}
.excluir-tabela-cad-desktop span{
    color: black;
}
.titulo-preco-desktop p{
    font-weight: 600;
    margin-left: 15px;
    margin-bottom: 10px;
    font-size: 20px;
}
.linha1-editar-produtos-desktop{
    display: flex;
    margin-bottom: 20px;
}
.e-precoO-desktop{
    width: 120px;
    margin-left: 10px;
    text-align: center;
}
.u-precoO-desktop{
    background-color: #cfcfcf;
    width: 120px;
    margin-top: 10px;
    margin-left: 10px;
    padding-top: 7px;
    height: 40px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid black;
    opacity: 0.6;
}
.col-precoN-desktop{
    margin-left: 40px;
}
.e-precoN-desktop{
    width: 120px;
    margin-left: 10px;
    text-align: center;
}
.u-precoN-desktop input[type="text"]{
    background-color: #e6e6e6;
    width: 120px;
    margin-top: 10px;
    margin-left: 10px;
    height: 40px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid black;
}
.linha2-editar-produtos-desktop{
    margin-bottom: 20px;
}
.e-nomeS-desktop p{
    font-weight: 600;
    margin-left: 15px;
    font-size: 20px;
}
.u-nomeS-desktop input[type="text"]{
    background-color: #e6e6e6;
    width: 290px;
    height: 40px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid black;
}
.linha3-editar-produtos-desktop{
    margin-bottom: 20px;
}
.e-desc-desktop p{
    font-weight: 600;
    margin-left: 15px;
    font-size: 20px;
}
.u-desc-desktop input[type="text"]{
    background-color: #e6e6e6;
    width: 290px;
    height: 40px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid black;
}
.linha4-editar-produtos-desktop{
    margin-bottom: 20px;
}
.e-tipo-desktop p{
    font-weight: 600;
    margin-left: 15px;
    font-size: 20px;
}
.u-tipo-desktop{
    margin-top: 10px;
}
.u-tipo-desktop input[type="radio"]{
    appearance: none;
    background-color: #e6e6e6;
    border: 2px solid black;
    height: 20px;
    width:  20px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    border-radius: 4px;
    display: inline-flex; /* Para alinhar verticalmente o conteúdo */
    align-items: center; /* Centralizar verticalmente */    
    cursor: pointer;
}
.u-tipo-desktop input[type="radio"]:checked::before{
    content: "✔";
    color: #af00ff;
    font-weight: 600;
    position: absolute;
    text-align: center;
    font-size: 20px;
}
.u-tipo-desktop label {
    cursor: pointer; /* Para mostrar a mão ao passar o mouse sobre o label */
    font-size: 18px;
    position: absolute;
    margin-left: 5px;
    margin-top: 7px;
}
.linha5-editar-produtos-desktop{
    margin-bottom: 20px;
}
.e-cond-desktop p{
    font-weight: 600;
    margin-left: 15px;
    font-size: 20px;
}
.u-cond-desktop{
    margin-top: 10px;
}
.u-cond-desktop input[type="radio"]{
    appearance: none;
    background-color: #e6e6e6;
    border: 2px solid black;
    height: 20px;
    width:  20px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    border-radius: 4px;
    display: inline-flex; /* Para alinhar verticalmente o conteúdo */
    align-items: center; /* Centralizar verticalmente */    
    cursor: pointer;
}
.u-cond-desktop input[type="radio"]:checked::before{
    content: "✔";
    color: #af00ff;
    font-weight: 600;
    position: absolute;
    text-align: center;
    font-size: 20px;
}
.u-cond-desktop label {
    cursor: pointer; /* Para mostrar a mão ao passar o mouse sobre o label */
    font-size: 18px;
    position: absolute;
    margin-left: 5px;
    margin-top: 7px;
}
.linha6-editar-produtos-desktop{
    margin-bottom: 30px;
}
.e-sub-desktop p{
    font-weight: 600;
    margin-left: 15px;
    font-size: 20px;
}
.u-sub-desktop{
    margin-top: 10px;
}
.u-sub-desktop select{
    background-color: #e6e6e6;
    border: 2px solid black;
    font-size: 17px;
    width: 150px;
    height: 40px;
    margin-left: 10px;
    text-align: center;
    border-radius: 4px;
    display: inline-flex; /* Para alinhar verticalmente o conteúdo */
    align-items: center; /* Centralizar verticalmente */    
    cursor: pointer;
}
.btn-slavar-alt-prod-desktop{
    text-align: center;
}
.btn-slavar-alt-prod-desktop input[type="submit"]{
    background-color: white;
    border: 2px solid #af00ff;
    width: 165px;
    height: 35px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 30px;
    color: #af00ff;
    font-size: 17px;
    text-decoration: none;
}
.btn-slavar-alt-prod-desktop input[type="submit"]:hover{
    background-color: #af00ff;
    transition: background-color 0.4s ease;
    color: white;
}
#delete-cad{
    font-size: 35px;
}
#delete-cad:hover{
    color: red;
}
#edit{
    font-size: 30px;
}








#enderecos{
    margin-right: 10px;
    font-size: 30px;
}
.enderecos-cadastrados{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-top:20px;
}
.nome-enderecos-cadastrados{
    margin-left: 20px;
    width: 205px;
}
.nome-enderecos-cadastrados p{
    font-weight: 600;
    font-size: 20px
}
.botoes-endecos-cadastrados{
    display: flex;
    
}
.editar-enderecos-cadastrados{
    margin-left: 10px;
}
.editar-enderecos-cadastrados span{
    color: #af00ff;
}
#edit{
    font-size: 30px;
}
#delete-enderecos{
    font-size: 35px;
}
#delete-enderecos:hover{
    color: red;
}
.excluir-enderecos-cadastrados{
    margin-left: 15px;
}
.excluir-enderecos-cadastrados span{
    color: black;
}

.enderecos{
    margin-top: 20px;
}
.tudo-conteudo-enderecos{
    display: none;  /* Display: none; para a tela de "dados" não aparecer. */
}
.card-enderecos{
    display: flex;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
    width: 190px;
}
.card-enderecos p{
    font-size: 20px;
    font-weight: 600;
}
.card-enderecos.active {
    color: #af00ff;
    /* Adicione outras propriedades de estilo conforme necessário */
}
.rotated-chevronEnderecos {
    transform: rotate(90deg); /* Rotaciona o elemento em 90 graus */
}
#database{
    margin-right: 10px;
    font-size: 30px;
}
.tabela-enderecos{
    display: none;
    margin-top: 15px;
    margin-bottom: 20px;
    background-color: white;
}
.re-enderecos{
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-top: 15px;
}
.e-enderecos p{
    font-weight: 600;
    font-size: 16px
}
.u-enderecos{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-cep-enderecos{
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-top: 15px;
}
.e-cep-enderecos p{
    font-weight: 600;
    font-size: 16px
}
.u-cep-enderecos{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-cidade{
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-top: 15px;
}
.e-cidade p{
    font-weight: 600;
    font-size: 16px
}
.u-cidade{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-bairro{
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-top: 15px;
}
.e-bairro p{
    font-weight: 600;
    font-size: 16px
}
.u-bairro{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-rua{
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-top: 15px;
}
.e-rua p{
    font-weight: 600;
    font-size: 16px
}
.u-rua{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-numero{
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-top: 15px;
}
.e-numero p{
    font-weight: 600;
    font-size: 16px
}
.u-numero{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-complemento-enderecos{
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-top: 15px;
}
.e-complemento-enderecos p{
    font-weight: 600;
    font-size: 16px
}
.u-complemento-enderecos{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.editar-enderecos {
    background-color: white;
    border: #af00ff solid 2px;
    width: 155px;
    height: 30px;
    text-align: center;
    margin: auto;
    margin-top: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
}
.editar-enderecos a{
    text-decoration: none;
}
.editar-enderecos p{
    color: #af00ff;
    font-size: 17px;
    font-weight: 300;
    height: 26px; /* Alterar valores para o media query caso o hover do botão estiver com problemas*/
    padding-top: 2px;
}
.editar-enderecos p:hover{
    color: white;
    transition: background-color 0.4s ease;
    background-color: #af00ff;
}
.adicionar-enderecos{
    background-color: white;
    border: #af00ff solid 2px;
    width: 250px;
    text-align: center;
    margin: auto;
    border-radius: 5px;
    margin-top: 20px;
}
.adicionar-enderecos a{
    text-decoration: none;
}
.adicionar-enderecos p{
    color: #af00ff;
    font-size: 17px;
    font-weight: 300;
    height: 32px; /* Alterar valores para o media query caso o hover do botão estiver com problemas*/
    padding-top: 5px;
}
.adicionar-enderecos p:hover{
    color: white;
    transition: background-color 0.4s ease;
    background-color: #af00ff;
}
.caixa-conteudo-re-enderecos input[type="text"]{
    background-color: #e6e6e6;
    width: 290px;
    height: 30px;
    margin-top: 10px;
    margin-left: 20px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid black;
}


























.card-enderecos-desktop{
    display: flex;
    align-items: center;
    margin-left: 5px;
    cursor: pointer;
    width: 190px;
    margin-top: 10px;
}
.card-enderecos-desktop p{
    font-size: 20px;
    font-weight: 600;
    width: 150px;
}
.card-enderecos-desktop.active {
    color: #af00ff;
    /* Adicione outras propriedades de estilo conforme necessário */
}
#database{
    margin-right: 10px;
    font-size: 30px;
}
#chevron-enderecos-desktop{
    margin-left: 5px;
    font-size: 30px;
    margin-top: 5px;
}



.enderecos-desktop{
    display: none;
    background-color: white;
    border-radius: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}
#tabela-carrinho-desktop-ENDERECO{
    margin-top: 20px;
}
.tabela-enderecos-desktop{
    display: none;
    margin-top: 15px;
}
.nome-enderecos-cadastrados-desktop{
    margin-left: 20px;
    width: 265px;
}
.nome-enderecos-cadastrados-desktop{
    font-weight: 600;
    font-size: 20px
}
.botoes-endecos-cadastrados-desktop{
    display: flex;
    
}
.editar-enderecos-cadastrados-desktop{
    margin-left: 10px;
}
.editar-enderecos-cadastrados-desktop span{
    color: #af00ff;
}
#edit{
    font-size: 30px;
}
#delete-enderecos{
    font-size: 35px;
}
#delete-enderecos:hover{
    color: red;
}
.excluir-enderecos-cadastrados-desktop{
    margin-left: 15px;
}
.excluir-enderecos-cadastrados-desktop span{
    color: black;
}


#database{
    margin-right: 10px;
    font-size: 30px;
}

.re-enderecos-desktop{
    display: flex;
    align-items: center;
    margin-left: 25px;
    margin-top: 15px;
}
.e-enderecos-desktop p{
    font-weight: 600;
    font-size: 16px
}
.u-enderecos-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-cep-enderecos-desktop{
    display: flex;
    align-items: center;
    margin-left: 25px;
    margin-top: 15px;
}
.e-cep-enderecos-desktop p{
    font-weight: 600;
    font-size: 16px
}
.u-cep-enderecos-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-cidade-desktop{
    display: flex;
    align-items: center;
    margin-left: 25px;
    margin-top: 15px;
}
.e-cidade-desktop p{
    font-weight: 600;
    font-size: 16px
}
.u-cidade-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-bairro-desktop{
    display: flex;
    align-items: center;
    margin-left: 25px;
    margin-top: 15px;
}
.e-bairro-desktop p{
    font-weight: 600;
    font-size: 16px
}
.u-bairro-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-rua-desktop{
    display: flex;
    align-items: center;
    margin-left: 25px;
    margin-top: 15px;
}
.e-rua-desktop p{
    font-weight: 600;
    font-size: 16px
}
.u-rua-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-numero-desktop{
    display: flex;
    align-items: center;
    margin-left: 25px;
    margin-top: 15px;
}
.e-numero-desktop p{
    font-weight: 600;
    font-size: 16px
}
.u-numero-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}
.re-complemento-enderecos-desktop{
    display: flex;
    align-items: center;
    margin-left: 25px;
    margin-top: 15px;
}
.e-complemento-enderecos-desktop p{
    font-weight: 600;
    font-size: 16px
}
.u-complemento-enderecos-desktop{
    margin-left: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.editar-enderecos-desktop {
    background-color: white;
    border: #af00ff solid 2px;
    width: 155px;
    height: 30px;
    text-align: center;
    margin: auto;
    margin-top: 20px;
    border-radius: 5px;
}
.editar-enderecos-desktop a{
    text-decoration: none;
}
.editar-enderecos-desktop p{
    color: #af00ff;
    font-size: 17px;
    font-weight: 300;
    height: 26px; /* Alterar valores para o media query caso o hover do botão estiver com problemas*/
    padding-top: 2px;
}
.editar-enderecos-desktop p:hover{
    color: white;
    transition: background-color 0.4s ease;
    background-color: #af00ff;
}
.adicionar-enderecos-desktop{
    background-color: white;
    border: #af00ff solid 2px;
    width: 250px;
    text-align: center;
    margin: auto;
    border-radius: 5px;
}
.adicionar-enderecos-desktop a{
    text-decoration: none;
}
.adicionar-enderecos-desktop p{
    color: #af00ff;
    font-size: 17px;
    font-weight: 300;
    height: 32px; /* Alterar valores para o media query caso o hover do botão estiver com problemas*/
    padding-top: 5px;
}
.adicionar-enderecos-desktop p:hover{
    color: white;
    transition: background-color 0.4s ease;
    background-color: #af00ff;
}
.caixa-conteudo-re-enderecos-desktop input[type="text"]{
    background-color: #e6e6e6;
    width: 350px;
    height: 30px;
    margin-top: 10px;
    margin-left: 25px;
    text-align: center;
    border-radius: 5px;
    border: 2px solid black;
}

/*finalizar-compra----------------------------------------------- */



.tabela-carrinho-pag-cad{
    background-color: white;
    margin-top: 15px;
    display: flex;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 8px 3px;
   border-radius: 10px;
   width: 350px;
   padding: 8px;
}
.imagem-tabela-carrinho-pag-cad img{
   border-radius: 20px; 
   margin-top: 10px;
   margin-left: 10px;
}
.imagem-tabela-carrinho-pag-cad img:hover{
    transition: opacity 0.4s ease;
    opacity: 0.6;
}
.texto-tabela-carrinho-pag-cad{
    margin-left: 8px;
}
.preco-tabela-carrinho-pag-cad{
    font-size: 20px;
    font-weight: 600;
}
.desc-tabela-carrinho-pag-cad{
    font-size: 20px;
    margin-top: 15px;
}



.container-pag-cad{
    min-height: 100vh;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    padding-bottom: 60px;

   
}



.TotalFinalizar{
    color: white;
}


    
.boleto-container .inputBox{
    margin-top: 20px;
}

.boleto-container .inputBox span{
    display: block;
    color:#999;
    padding-bottom: 5px;
}

.boleto-container .inputBox input,
.boleto-container .inputBox select{
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border:1px solid rgba(0,0,0,.3);
    color:#e7e4e4;
    background-color: #747474;
}

.form-pix-{
    background: #000000;
    border-radius: 5px;
    box-shadow: 0 10px 15px rgba(0,0,0,.1);
    padding: 20px;
    width: 600px;
    
}
.form-pix- .inputBox{
    margin-top: 20px;
}

.form-pix- .inputBox span{
    display: block;
    color:#999;
    padding-bottom: 5px;
}

.form-pix- .inputBox input,
.form-pix- .inputBox select{
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border:1px solid rgba(0,0,0,.3);
    color:#e7e4e4;
    background-color: #747474;
}



.container-pag-cad form{
    background: #000000;
    border-radius: 5px;
    box-shadow: 0 10px 15px rgba(0,0,0,.1);
    padding: 20px;
    width: 600px;
    padding-top: 300px;
}

.container-pag-cad form .inputBox{
    margin-top: 20px;
}

.container-pag-cad form .inputBox span{
    display: block;
    color:#999;
    padding-bottom: 5px;
}

.container-pag-cad form .inputBox input,
.container-pag-cad form .inputBox select{
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border:1px solid rgba(0,0,0,.3);
    color:#e7e4e4;
    background-color: #747474;
}

.container-pag-cad form .flexbox{
    display: flex;
    gap:15px;
    align-items: center;
    justify-content: center;
}

.container-pag-cad form .flexbox .inputBox{
    flex:1 1 150px;
}

.container-pag-cad form .submit-btn{
    width: 100%;
    background-color: white;
    margin-top: 20px;
    padding: 10px;
    font-size: 20px;
    color:#af00ff;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s linear;
}
.inputBox ::placeholder{
    color: #f0ffff94;
}

.container-pag-cad form .submit-btn:hover{
    background-color: #af00ff;
    color: white;
}


.flexbox {
    color: #f0ffff94;
    align-items: center;
    justify-content: center;

    
}

.Parcelas{

    display: block;

}

.payment-methods {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.pix-container,
.boleto-container {
    display: none; /* Inicialmente escondidos */
    background: #000000;
    border-radius: 5px;
    box-shadow: 0 10px 15px rgba(0,0,0,.1);
    padding: 20px;
    width: 100%;
    height: auto;
    padding-top: 50px;
    align-items: center;
    justify-content: center;
}


.qrcode-container {
    display: flex; /* Muda o display para flex */
    flex-direction: column; /* Direção da coluna para organizar os itens verticalmente */
    align-items: center; /* Centraliza os itens horizontalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    width: 450px;
    margin: auto;
    
}

.pix-qrcode {
    width: 250px; /* Você pode ajustar conforme necessário */
    height: 250px;
    align-items: center;
    
    
    
}

.pix-copy-btn button{
    width: 300px;
   background: none;
    display: block;
    padding: 5px;
    font-size: 20px;
    color:#ffffff;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s linear;
   border: none;
    align-items: center;
    }

    .pix-copy-btn button:hover{
        background:linear-gradient(-45deg,rgb(95, 61, 173) rgb(178, 147, 206), );
        transition: .2s linear;

        
    }

.pix-finalizar{
width: 100%;
background-color: white;
margin-top: 20px;
padding: 10px;
font-size: 20px;
color:#af00ff;
border-radius: 10px;
cursor: pointer;
transition: .2s linear;
border:solid 2px #af00ff;
}


.pix-finalizar:hover{

    background-color: #af00ff;
    color: white;
 
}

.boleto-container img {

    margin-left: 150px;
}




.container-pag-cad .card-container{
 
    position: absolute;
    height: 250px;
    width: 400px;
    margin-left: 100px;
    margin-top: 20px;
}

.container-pag-cad .card-container .front{
    position: relative;
    height:100%;
    width: 100%;
    align-items: center;
    background:linear-gradient(45deg, rgb(97, 38, 151), rgb(143, 109, 221));
    border-radius: 5px;
    backface-visibility: hidden;
    padding:20px;
    transform:perspective(1000px) rotateY(0deg);
    transition:transform .4s ease-out;
}

.container-pag-cad .card-container .front .image{
    display: flex;
    align-items:center;
    justify-content: space-between;
    padding-top: 10px;
}

.container-pag-cad .card-container .front .image img{
    height: 50px;
}

.container-pag-cad .card-container .front .card-number-box{
    padding:30px 0;
    font-size: 22px;
    color:#fff;
}

.container-pag-cad .card-container .front .flexbox{
    display: flex;
}

.container-pag-cad .card-container .front .flexbox .box:nth-child(1){
    margin-right: auto;
}

.container-pag-cad.card-container .front .flexbox .box{
    font-size: 15px;
    color:#fff;
}

.container-pag-cad .card-container .back{
    position: absolute;
    top:0; left: 0;
    height: 100%;
    width: 100%;
    background:linear-gradient(45deg, rgb(97, 38, 151), rgb(143, 109, 221));
    border-radius: 5px;
    padding: 20px 0;
    text-align: right;
    backface-visibility: hidden;
    box-shadow: 0 15px 25px rgba(0,0,0,.2);
    transform:perspective(1000px) rotateY(180deg);
    transition:transform .4s ease-out;
}

.container-pag-cad .card-container .back .stripe{
    background: #000;
    width: 100%;
    margin: 10px 0;
    height: 50px;
}

.container-pag-cad .card-container .back .box{
    padding: 0 20px;
}

.container-pag-cad .card-container .back .box span{
    color:#fff;
    font-size: 15px;
}

.container-pag-cad .card-container .back .box .cvv-box{
    height: 50px;
    padding: 10px;
    margin-top: 5px;
    color:#333;
    background: #fff;
    border-radius: 5px;
    width: 100%;
}

.container-pag-cad .card-container .back .box img{
    margin-top: 30px;
    height: 30px;
}
.payment-methods label {
    display: inline-block;
    margin: 0 10px;
    position: relative;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.payment-methods input[type="radio"] {
    display: none;
}

.payment-methods input[type="radio"]:checked + span {
    transform: scale(0.95);
}

.payment-methods label span {
    display: block;
}

.payment-methods label:hover {
    transform: translateY(-3px);
}


@media only screen and (max-width: 767px) {
	.container-pag-cad .card-container{
        height: 210px;
        width: 360px;
    }

    .container-pag-cad form{
    
        width: 470px;
        padding-top: 300px;
    }

    .boleto-container {
       
        width: 450px;
    }

    .boleto-container img {

        margin: auto;
        margin-left: 55px;
    }
}


/*Página criadores--------------------------------------------------*/

.textocriadores{
    text-align: center;
    margin-top: 50px;
}


.container-pag-criadores{

	width: 950px;
	align-items: center;
	margin: auto;
	height: 550px;
}

.box-area {
	padding: 30px;
	position: relative;
	display: block;
	background: #fff;
	color: #000;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 8px 3px;
	
	width: 900px;
	height: 500px;
	margin: auto;
	margin-bottom: 30px;
    border-radius: 10px;
   
}
.box-area h5 {
	font-size: 25px;
	margin-top: 190px;
	margin-bottom: 5px;
	letter-spacing: 1px;
}

.box-area .content {
	color: #262626;
	font-size: 18px;
    margin-top: 30px;
}
.box-area .img-area {
	width: 150px;
	height: 150px;
	position: absolute;
	top: 15px;
	left: 0;
	bottom: 0;
	margin: 0 auto;
	right: 0;
	z-index: 1;
	border-radius: 50%;
	box-shadow: 0 5px 4px rgba(0, 0, 1, 0);
	border: none;
	background:none;
    margin-top: 20px;
}
.box-area .img-area img {
	width: 150px;
	height: 150px;
	border-radius: 50%;
}
.socials {
    margin-top: 55px;
   
}

.socials i {
    margin: 0 20px;
    color: #af00ff;
    font-size: 18px;
    transition: transform 0.2s ease-in-out; /* Adiciona transição suave */
    
    
}

.socials i:hover {
    transform: translateY(-5px); /* Move o ícone para cima ao passar o mouse */
}


#testimonial_area .owl-nav {
	position: absolute;
	top: 50%;
	width: 100%;
}
#testimonial_area .owl-prev, #testimonial_area .owl-next {
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: #af00ff;
	border-radius: 50%;
	text-align: center;
	background: #fff;
	position: absolute;
}
#testimonial_area .owl-prev {
	left: -60px;
	top: -30px;
}
#testimonial_area .owl-next {
	right: -60px;
	top: -30px;
}
@media only screen and (max-width: 1090px) {

    .owl-nav {
		display: none;
	}

    .socials {
        margin-top: 30px;
    }

    .img-area {
        padding: 10px;
    }
	

	.container-pag-criadores{
		width: 500px;
		align-items: center;
		margin: auto;
		height: 550px;
		
	}

	.box-area {
		
		width: 490px;
		height: 540px;
		margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
		
	}
	
}
@media only screen and (max-width: 540px) {
    .owl-nav {
		display: none;
	}

    .socials {
        margin-top: 30px;
    }

    .img-area {
        padding: 10px;
    }
	

	.container-pag-criadores{
		width: 440px;
		align-items: center;
		margin: auto;
		height: 350px;
        margin-bottom: 80px;
        box-shadow: none;
       margin-left: 20px;
		
       
	}

	.box-area {
		
		width: 440px;
		height: 370px;
		margin: auto;
        margin-top: 50px;
        box-shadow: none;
        
        
   
    
		
	}

	.box-area .img-area {
		width: 90px;
		height: 90px;
		top: -10px;
        
	}

	.box-area .img-area img {
		width: 90px;
		height: 90px;
		border-radius: 50%;
      
	}

	.box-area h5{
		margin-top: 60px;
		font-size: 25px;

	}

	.box-area .content {
		
		font-size: 17px;
	}

}

/*END PáGIANa CRIADORES_________________________________________________*/

/* começo compra finalizada */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

* {
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.body-compra-finalizada{
  margin: auto;
  margin-top: 60px;
  margin-bottom: 60px;
  height: 400px;
  width: 450px;
}
.conteudo-compra-finalizada {
  height: 400px;
  width: 450px;
  display: none;
}
.ecocloset-compra-finalizada{
    margin: auto;
    display: flex;
    align-items: center;
    width: 222px;
}
.ecoclosetm-compra-finalizada p{
    font-size: 30px;
    font-weight: 600;
    margin-top: 15px;
    margin-left: 3px;
}
.agradecimento-compra-finalizada{
    margin: auto;
    width: 450px;
    text-align: center;
    margin-top: 40px;
}
.agradecimento-compra-finalizada p{
    font-size: 22px;
}
.mensagem-compra-finalizada{
    margin: auto;
    width: 420px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 80px;
}
.mensagem-compra-finalizada p{
    font-size: 22px;
}
.gif-compra-finalizada{
    margin: auto;
    width: 240px;
}



:root {
    --primary: #275efe;
    --primary-light: #7699ff;
    --dark: #1c212e;
    --grey-dark: #3f4656;
    --grey: #6c7486;
    --grey-light: #cdd9ed;
    --white: #fff;
    --green: #16bf78;
    --sand: #dcb773;
    --sand-light: #edd9a9;
  }
  
  .order {
    appearance: none;
    border: 0;
    background: var(--dark);
    position: relative;
    height: 50px;
    width: 240px;
    padding: 0;
    outline: none;
    border-radius: 32px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
  }
  .order .lines {
    opacity: 0;
    position: absolute;
    height: 3px;
    background: var(--white);
    border-radius: 2px;
    width: 6px;
    top: 25px;
    left: 100%;
    box-shadow: 15px 0 0 var(--white), 30px 0 0 var(--white),
      45px 0 0 var(--white), 60px 0 0 var(--white), 75px 0 0 var(--white),
      90px 0 0 var(--white), 105px 0 0 var(--white), 120px 0 0 var(--white),
      135px 0 0 var(--white), 150px 0 0 var(--white), 165px 0 0 var(--white),
      180px 0 0 var(--white), 195px 0 0 var(--white), 210px 0 0 var(--white),
      225px 0 0 var(--white), 240px 0 0 var(--white), 255px 0 0 var(--white),
      270px 0 0 var(--white), 285px 0 0 var(--white), 300px 0 0 var(--white),
      315px 0 0 var(--white), 330px 0 0 var(--white);
  }
  .order .back,
  .order .box {
    --start: var(--white);
    --stop: var(--grey-light);
    border-radius: 2px;
    background: linear-gradient(var(--start), var(--stop));
    position: absolute;
  }
  .order .truck {
    width: 60px;
    height: 38px;
    left: 100%;
    z-index: 1;
    top: 6px;
    position: absolute;
    transform: translateX(24px);
  }
  .order .truck:before,
  .order .truck:after {
    --r: -90deg;
    content: "";
    height: 2px;
    width: 20px;
    right: 58px;
    position: absolute;
    display: block;
    background: var(--white);
    border-radius: 1px;
    transform-origin: 100% 50%;
    transform: rotate(var(--r));
  }
  .order .truck:before {
    top: 4px;
  }
  .order .truck:after {
    --r: 90deg;
    bottom: 4px;
  }
  .order .truck .back {
    left: 0;
    top: 0;
    width: 60px;
    height: 38px;
    z-index: 1;
  }
  .order .truck .front {
    overflow: hidden;
    position: absolute;
    border-radius: 2px 9px 9px 2px;
    width: 26px;
    height: 38px;
    left: 60px;
  }
  .order .truck .front:before,
  .order .truck .front:after {
    content: "";
    position: absolute;
    display: block;
  }
  .order .truck .front:before {
    height: 13px;
    width: 2px;
    left: 0;
    top: 14px;
    background: linear-gradient(var(--grey), var(--grey-dark));
  }
  .order .truck .front:after {
    border-radius: 2px 9px 9px 2px;
    background: var(--primary);
    width: 24px;
    height: 38px;
    right: 0;
  }
  .order .truck .front .window {
    overflow: hidden;
    border-radius: 2px 8px 8px 2px;
    background: var(--primary-light);
    transform: perspective(4px) rotateY(3deg);
    width: 22px;
    height: 38px;
    position: absolute;
    left: 2px;
    top: 0;
    z-index: 1;
    transform-origin: 0 50%;
  }
  .order .truck .front .window:before,
  .order .truck .front .window:after {
    content: "";
    position: absolute;
    right: 0;
  }
  .order .truck .front .window:before {
    top: 0;
    bottom: 0;
    width: 14px;
    background: var(--dark);
  }
  .order .truck .front .window:after {
    width: 14px;
    top: 5px;
    height: 4px;
    position: absolute;
    background: rgba(255, 255, 255, 0.14);
    transform: skewY(14deg);
    box-shadow: 0 7px 0 rgba(255, 255, 255, 0.14);
  }
  .order .truck .light {
    width: 3px;
    height: 8px;
    left: 83px;
    transform-origin: 100% 50%;
    position: absolute;
    border-radius: 2px;
    transform: scaleX(0.8);
    background: #f0dc5f;
  }
  .order .truck .light:before {
    content: "";
    height: 4px;
    width: 7px;
    opacity: 0;
    transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
    position: absolute;
    transform-origin: 0 50%;
    left: 3px;
    top: 50%;
    margin-top: -2px;
    background: linear-gradient(
      90deg,
      #f0dc5f,
      rgba(240, 220, 95, 0.7),
      rgba(240, 220, 95, 0)
    );
  }
  .order .truck .light.top {
    top: 4px;
  }
  .order .truck .light.bottom {
    bottom: 4px;
  }
  .order .box {
    --start: var(--sand-light);
    --stop: var(--sand);
    width: 21px;
    height: 21px;
    right: 100%;
    top: 15px;
  }
  .order .box:before,
  .order .box:after {
    content: "";
    top: 10px;
    position: absolute;
    left: 0;
    right: 0;
  }
  .order .box:before {
    height: 3px;
    margin-top: -1px;
    background: rgba(0, 0, 0, 0.1);
  }
  .order .box:after {
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
  }
  .order.animate .default {
    --o: 0;
    transition-delay: 0s;
  }
  .order.animate .success {
    --offset: 0;
    --o: 1;
    transition-delay: 7s;
  }
  .order.animate .success svg {
    transition-delay: 7.3s;
  }
  .order.animate .truck {
    animation: truck 10s ease forwards;
  }
  .order.animate .truck:before {
    animation: door1 2.4s ease forwards 0.3s;
  }
  .order.animate .truck:after {
    animation: door2 2.4s ease forwards 0.6s;
  }
  .order.animate .truck .light:before,
  .order.animate .truck .light:after {
    animation: light 10s ease forwards;
  }
  .order.animate .box {
    animation: box 10s ease forwards;
  }
  .order.animate .lines {
    animation: lines 10s ease forwards;
  }
  
  @keyframes truck {
    10%,
    30% {
      transform: translateX(-164px);
    }
    40% {
      transform: translateX(-104px);
    }
    60% {
      transform: translateX(-224px);
    }
    75%,
    100% {
      transform: translateX(24px);
    }
  }
  
  @keyframes truck-infinite {
      0%, 100% {
        transform: translateX(24px);
      }
      50% {
        transform: translateX(-224px);
      }
    }
    
    /* Modifique a classe .order para usar a animação infinita */
    .order.infinite .truck {
      animation: truck-infinite 10s linear infinite;
    }
    
  
  @keyframes lines {
    0%,
    30% {
      opacity: 0;
      transform: scaleY(0.7) translateX(0);
    }
    35%,
    65% {
      opacity: 1;
    }
    70% {
      opacity: 0;
    }
    100% {
      transform: scaleY(0.7) translateX(-400px);
    }
  }
  
  @keyframes light {
    0%,
    30% {
      opacity: 0;
      transform: perspective(2px) rotateY(-15deg) scaleX(0.88);
    }
    40%,
    100% {
      opacity: 1;
      transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
    }
  }
  
  @keyframes door1 {
    30%,
    50% {
      transform: rotate(32deg);
    }
  }
  
  @keyframes door2 {
    30%,
    50% {
      transform: rotate(-32deg);
    }
  }
  
  @keyframes box {
    8%,
    10% {
      transform: translateX(40px);
      opacity: 1;
    }
    25% {
      transform: translateX(112px);
      opacity: 1;
    }
    26% {
      transform: translateX(112px);
      opacity: 0;
    }
    27%,
    100% {
      transform: translateX(0px);
      opacity: 0;
    }
  }
  
 





  .tela-carregamento{
    
  margin: auto;
  position: absolute;
  
  z-index: 1;
}

.loading{
  margin: auto;
    text-align: center;
    height: 400px;
  width: 450px;
    

}
.loading span{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: blueviolet;
    margin: 8px;
    margin-top: 35%;
}
.loading span{
animation: bounce .6s cubic-bezier(0.6,0.1,1,0.4);
animation-iteration-count: infinite;
animation-direction: alternate;
} 
.loading span:nth-child(1){
    animation-delay: .1s;
}
.loading span:nth-child(2){
    animation-delay: .2s;
}
.loading span:nth-child(3){
    animation-delay: .3s;
}

@keyframes bounce{
    to{
        transform: translateY(50px);
    }
}


  /* end compra finalizada */
 
  .product-found{
    text-align: center;
    margin-top: 250px;
    margin-bottom: 250px;
  }




  #textfield-finalizar-prod{
    width: 560px;
    
  }