body {
background: #e9cad9;
background: radial-gradient(circle, rgba(233,202,217,1) 0%, rgba(252,161,205,1) 100%);
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #6c2b24;
  text-align: center;
  font-family: 'Libre Baskerville', serif;
  min-width: 200px;
  height: 100%;
}



footer {
  color: #6c2b24;
  text-align: center;
}

.user{
  width: 60px;
  position: relative;
  
  
  border-radius: 10px;
}
  .button-cesta{
    display: flex;
    align-items: center;
    background: rgba( 190, 233, 238, 0.7 );
    
    backdrop-filter: blur( 0px );
    -webkit-backdrop-filter: blur( 0px );
    border-radius: 10px;
    outline: none;
  cursor: pointer;
  position: absolute;
  transform: translate(150px, -70px);

  height: 69px;
  min-width: 100px;
  
  }

  .button-nov{
    display: flex;
    align-items: center;
    background: rgba( 190, 233, 238, 0.7 );
    
    backdrop-filter: blur( 0px );
    -webkit-backdrop-filter: blur( 0px );
    border-radius: 10px;
    outline: none;
  cursor: pointer;
  position: absolute;
  left: 15em;
  transform: translate(150px, -70px);

  height: 69px;
  min-width: 100px;
  }

 .cartao-fidelidade{
  width: 300px;
  border-radius: 10px;
  border: 1px solid black;

 } 

.button-user{
  display: flex;
  align-items: center;
  background: rgba( 190, 233, 238, 0.7 );
  
  backdrop-filter: blur( 0px );
  -webkit-backdrop-filter: blur( 0px );
  border-radius: 10px;
    
  outline: none;
  cursor: pointer;
  position: absolute;
  transform: translate(30px,-70px); 



}
  
.user-div{
 
  max-width: 40px;
  
}

.titulo{
  border-top: 0.1px solid #98989868;
  padding: 15px;
 
}
.colunas{
  display: flex;
  order: 1 2;
}

.button-cep{
  height:30px;
  width:30px;
  background-color: #FA9FCB;
 
  border-radius:8px;
transform: translate(5px,6px);




}
.material-symbols-outlined{`
  transform: translate(5px,6px);
 }
 
  .section-texto{
  
    background: rgba( 213, 213, 213, 0.35 );
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
backdrop-filter: blur( 0px );
-webkit-backdrop-filter: blur( 0px );
border-radius: 10px;
  

   
    border-radius: 8px;
   

    
    margin-left: 230px;
   
    position: relative;

  }

.button-cep .material-symbols-outlined{

  transform: translate( -10px,10px);
 
}

.section-novidades{
  background: rgba( 190, 233, 238, 0.7 );
    
  backdrop-filter: blur( 0px );
  -webkit-backdrop-filter: blur( 0px );
  border-radius: 10px;
  border-radius: 15px;

  border: 2px solid black;

  transform: translate(3%,0);
  width: 93%;
  height: auto;
  align-items: center;

}



.section1{
  background: rgba( 190, 233, 238, 0.7 );
    
  backdrop-filter: blur( 0px );
  -webkit-backdrop-filter: blur( 0px );
  border-radius: 10px;
  border-radius: 15px;

  border: 2px solid black;

  padding: 15px;
  margin: 0 auto;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.363);
  justify-content: center;

  width: 93%;

}



header .cesta{
  position: relative;
}


.section-cesta-inicial{
  border-radius: 15%;
  background: white;
  width: 70px;
}
.logo {
  width: 100px;
  margin-bottom: 73px;
}







.foto1 {
  
  border-radius: 31px;
  background: #e0e0e0dd;
  box-shadow:  -13px 13px 21px #e4e4e477,
               13px -13px 21px #f6f6f675;
    width: 165px;
    
    float: left;
   
  
  
  }
  
  .foto2{
  
    border-radius: 31px;
    background: #e0e0e0dd;
    box-shadow:  -13px 13px 21px #e4e4e477,
                 13px -13px 21px #f6f6f675;
      width: 165px;
      
      float: left;
     
    
    
    }
    .foto3 {
  
      border-radius: 31px;
      background: #e0e0e0dd;
      box-shadow:  -13px 13px 21px #e4e4e477,
                   13px -13px 21px #f6f6f675;
        width: 165px;
        
        float: left;
       
      
      
      }
      .foto4 {
  
        border-radius: 31px;
        background: #e0e0e0dd;
        box-shadow:  -13px 13px 21px #e4e4e477,
                     13px -13px 21px #f6f6f675;
          width: 165px;
         
          float: left;
         
        
        
        }
        .foto5 {
  
          border-radius: 31px;
          background: #e0e0e0dd;
          box-shadow:  -13px 13px 21px #e4e4e477,
                       13px -13px 21px #f6f6f675;
            width: 165px;
           
            float: left;
           
          
          
          }
          .foto6 {
  
            border-radius: 31px;
            background: #e0e0e0dd;
            box-shadow:  -13px 13px 21px #e4e4e477,
                         13px -13px 21px #f6f6f675;
              width: 165px;
            
              float: left;
             
            
            
            }
            .foto7 {
  
              border-radius: 31px;
              background: #e0e0e0dd;
              box-shadow:  -13px 13px 21px #e4e4e477,
                           13px -13px 21px #f6f6f675;
                width: 165px;
            
                float: left;
               
              
              
              }
              .foto8 {
  
                border-radius: 31px;
                background: #e0e0e0dd;
                box-shadow:  -13px 13px 21px #e4e4e477,
                             13px -13px 21px #f6f6f675;
                  width: 165px;
                  height: auto;
                  float: left;
                 
                
                
                }
                .foto9 {
  
                  border-radius: 31px;
                  background: #e0e0e0dd;
                  box-shadow:  -13px 13px 21px #e4e4e477,
                               13px -13px 21px #f6f6f675;
                    width: 165px;
                    height: auto;
                    float: left;
                   
                  
                  
                  }
                  .foto10 {
  
                    border-radius: 31px;
                    background: #e0e0e0dd;
                    box-shadow:  -13px 13px 21px #e4e4e477,
                                 13px -13px 21px #f6f6f675;
                      width: 165px;
                      height: auto;
                      float: left;
                     
                    
                    
                    }
                      

  


.texto {
  margin-left: 10px;
  display: flex;
  align-items: center;

}
.adicione-cesta{
  background-color: #FA9FCB;
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 20px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 10px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manispulation;
  margin: 0 ;
  
  align-items: center;
}

.adicione-cesta:hover,.adicione-cesta:focus {
  outline: none;
  background-color: #F082AC;
}



container2 {
  display: flex;
  align-items: center
  margin-bottom: 10px;
  
}
container3{
  display: flex;
  align-items: center
}




.texto2 {
  margin-left: 10px;
  display: flex;
  align-items: center;
max-height: 1000px;
  width: auto ;
}

.section2 {
  background: rgba( 190, 233, 238, 0.7 );
    
  backdrop-filter: blur( 0px );
  -webkit-backdrop-filter: blur( 0px );
  border-radius: 10px;
  border-radius: 15px;

  border: 2px solid black;

  border-radius: 15px;
  padding: 10px;
  width: 300px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.363);
  margin: 0 auto;
  height: auto;
  justify-content: center;
}

.valor {
  font-family: 'Noto Serif NP Hmong', serif;



}
icones {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.section-cesta {
  background: rgba( 190, 233, 238, 0.7 );
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
backdrop-filter: blur( 0px );
-webkit-backdrop-filter: blur( 0px );
border: 2px solid black;
  border-radius: 15px;
  padding: 10px;
  width: 85%;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.363);
  margin: 0 auto;
  height: 0 auto;
  justify-content: center;
  display: flex;
  flex-direction: column;
  
}

.foto-fechar{
  width: 30px;
  height: 30px;
  position: relative;
  left: 44%;
  margin-top: 30px;
  cursor: pointer;
}

.exemplo1{
 border-radius: 31px;
background: #e0e0e0dd;
box-shadow:  -13px 13px 21px #e4e4e477,
             13px -13px 21px #f6f6f675;
  height: 120px;
  width:110px;
}
.exemplo2{
border-radius: 31px;
background: #e0e0e0dd;
box-shadow:  -13px 13px 21px #e4e4e477,
             13px -13px 21px #f6f6f675;
  height: 100px;
  width: 100px;
}
.exemplo3{
  border-radius: 31px;
background: #e0e0e0dd;
box-shadow:  -13px 13px 21px #e4e4e477,
             13px -13px 21px #f6f6f675;
  height: 100px;
  width: 100px;
}
span{
margin-top: 50px ;
font-size: 30px;
}
.p-valor{
  font-size: 30px;
}
.p-valor2{
  font-size:30px ;

}
.p-cep{
  margin-bottom: 0 auto ;
}
.section-produto{
background: rgba(201, 249, 255, 0.76);
border-radius: 16px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
backdrop-filter: blur(8.6px);
-webkit-backdrop-filter: blur(8.6px);
border: 1px solid rgba(201, 249, 255, 0.46);
}
.div-cep{
   display: flex;
   flex-direction: column;
}
.button-inicio{
  display: flex;
    align-items: center;
    background: rgba( 190, 233, 238, 0.7 );
    outline: none;
    backdrop-filter: blur( 0px );
    -webkit-backdrop-filter: blur( 0px );
    border-radius: 10px;
    transform: translate( 7em,8px);
}

.enviar{
  background: rgba( 250, 159, 203, 0.6 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 8px;
border: 1px solid black;

}


.button-comprar {
  background: rgba( 250, 159, 203, 0.6 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 4px solid black;
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 20px;
  list-style: none;
  margin: 0;
  outline: none;
  padding: 10px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: color 100ms;
  vertical-align: baseline;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-comprar:hover,
.button-comprar:focus {
  background-color: #F082AC;
}
}


.stepper {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  
}

.count{
  width: 40px;
  text-align: center;
}
.calcular-frete{
  height: 25px

}



.total-container{
 background: rgba(201, 249, 255, 0.76);
border-radius: 16px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
backdrop-filter: blur(8.6px);
-webkit-backdrop-filter: blur(8.6px);
border: 1px solid rgba(201, 249, 255, 0.46);

}

.menos{
  border-radius: 45%;
   width: 30px;
  height: 30px;
  background-color: #6c2b24;
  color: #fff;
  border: none;
  cursor: pointer;
  
}
.mais{
  border-radius: 45%;
 width: 30px;
  height: 30px;
  background-color: #6c2b24;
  color: #fff;
  border: none;
  cursor: pointer;
}
.count{
  color: fff;
  background-color: #e7c1cf00;
  border: none;
  font-size: 40px ;
  width: 80px;
  input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  -moz-appearance: textfileld;
  }
  .count::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
}