.destaque {
    background: #FF9900;
    padding:10px;
    margin-bottom: 20px;
    border-radius:20px;
    
}

.modal.modal-from-bottom .modal-dialog {
  transform: translateY(100%);
  transition: transform 0.3s ease-out; 
}

.modal.modal-from-bottom.show .modal-dialog {
  transform: translateY(0); /* Move para a posição inicial (visível) */
}


.product_meta {
    border-top: 0px solid #f5f5f5 !important;
}


.attribute {
    text-align: left;
    margin: 100px 0 0 0;
    border: 0px solid #000;
    padding-top:25px;
}



.alerta-message {
margin-top:0px;
font-size: 16px;
text-align:center;
z-index:99999;
position: absolute;
background: rgba(255, 255, 255, 0.8);
width:100%;


   
}

.alerta-message-success {
background: rgba(255, 255, 255, 0.8);
padding-top:30px;
padding-bottom:30px;
z-index: 9999;
font-size: 16px;
font-weight: bold;
color: #2E5F3F;
}

.alert-message-error {
     background: #FF0000;
    color: #fff;
    border-radius: 10px;
    border: 0px dotted #2E5F3F;
}

.dinan-error {
    background-color: #FFAAAA;
       border-radius: 10px;
}

.dinan-final {
   background: #EFF4E8;
   border-radius: 10px;
}

.dinan {
animation: dinan 0.3s 1;  
border-radius: 10px;
     background: #D1DFBB;
   
     padding:0px 5px;
}

.dinan::after { 
    background: #fff;
}

/* Defina a animação de vibração */
@keyframes dinan {
    0% {
        transform: translateX(-2px); /* Mova para a esquerda */
    }
    25% {
        transform: translateX(2px); /* Mova para a direita */
    }
    50% {
        transform: translateX(-2px); /* Mova para a esquerda */
    }
    75% {
        transform: translateX(2px); /* Mova para a direita */
    }
    100% {
        transform: translateX(0); /* Volte à posição original */
    }
}


.vibrate {
animation: vibrate 0.3s 3;  
border-radius: 20px;
     background: #f00 !important;
     color: #fff;
     padding:0px 5px;
}

.vibrate::after { 
    
}

/* Defina a animação de vibração */
@keyframes vibrate {
    0% {
        transform: translateX(-2px); /* Mova para a esquerda */
    }
    25% {
        transform: translateX(2px); /* Mova para a direita */
    }
    50% {
        transform: translateX(-2px); /* Mova para a esquerda */
    }
    75% {
        transform: translateX(2px); /* Mova para a direita */
    }
    100% {
        transform: translateX(0); /* Volte à posição original */
    }
}





.label-share {
     float:left;
    border:0px solid #000;
        font-size: 16px;

}

.social-share {
    float:right;
}

.new-price {
    position: absolute;
    font-size: 12px; 
    margin-right: 0px; 
     color: #016cd6; 
     z-index: 9999;
     padding: 6px 9px; 
     
     border-radius: 50%; 
        
}

.share-whatsapp, .share-facebook {
    border-radius:50px;
}


.quantidade-var {
    position: absolute; 
top: 15px; 
left:0px; 
    background-color: #fff; 
    color: #016cd6; 
    border-radius: 50%; 
    padding: 6px 9px; 
    font-size: 12px; 
     
   
}




.products-container {

    border: 0 solid #000;
    margin: 50px 0 150px 0;
    padding: 0px;

}

.variation {
    align-items: center;
    display: flex;
    margin-bottom: 37px;
    border-bottom: 1px dashed #016cd6;

    padding: 5px 0px 5px 0px;
flex-direction: row;
align-content: center;
   
}


.atacado {
    border-bottom: 1px groove #016cd6;
    padding:10px 10px 10px 20px;
background: rgb(255, 153, 0);
background: linear-gradient(360deg, rgba(255,238,213,1) 0%, rgba(255,238,213,1) 71%, rgba(255,192,98,1) 100%);
    margin-bottom: 10px;
    color: #000;
    border-radius: 10px 0 0 10px;
    position: relative;
    margin-top:10px;
    margin-bottom:20px;
}

.atacadoTitle h3{
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    font-family: arial;
    color: inherit  !important;
    font-size: 22px;
    margin-top: 6px;
    margin-bottom: 6px;
    font-weight: bold;
    font-style: normal;
}

.atacado-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: absolute; /* Posicionamento absoluto */
    right: 10px; /* Dist창ncia da direita */
    top: 50%; /* Alinha verticalmente no meio */
    transform: translateY(-50%); /* Corrige o alinhamento vertical */
}

.atacado-btn i {
    color: #ff0000;
    font-size: 20px;
}

.atacado a {
    text-decoration: none;
     color: inherit !important;
}


.easy-opcao {
    font-size: 25px;
    text-transform: capitalize;
    color:#fff;
} 

.image-column {
    flex: 1;
    margin-right: 20px;
     border: 0px dashed #e1e1e1;
   
     
}

.image-column img {
    max-width: 100%;
    height: auto;
      border: 0px dashed #e1e1e1;
    border-radius: 10px;
   
     padding: 5px;
}


.info-column {
flex:4;
display: block;
border: 0px solid #f00;

align-items: center;
     
}



.info-column h2 {

margin-top:3px;
color: #016cd6;
border: 0px solid #000;
font-size: 20px;
   
}

.top-row {

border: 0px solid #f00;
display: block;
float: left;


}

.bottom-row { 
border: 0px solid #f00;
float: right;
padding: 0px;
margin-top: 0px;
display: block;

}

#variation-catt {
font-weight: normal;
border: 0px solid #ccc;
border-radius: 8px; 
 cursor: pointer;
}


.price {
    font-size: 30px;
    margin-bottom: 5px;
    border: 0px solid #000;
    display: block;
}


.variation-description-toggle i {
    border: 2px dotted #333;
     border-radius: 100%;
}


.variation-description {
  padding:6px 15px;
    border: 1px solid #016cd6;
    background-color: #f2f2f2;
    color: #333;
justify-content: space-between;
    align-items: center;
    text-align: left;
    border-radius: 10px;
    font-size: 15px;
    position: absolute;
    right: 10px;
    left: 290px;
    font-weight: normal;
    margin-top: -65px;
    z-index: 99999;
}




button.adicionar-ao-carrinho-btn {
margin-top: 0px;
    padding: 10px 30px;
    border-radius: 50px;
    border: 0px solid #016cd6;
display: flex;
    background: #002e8c !important; 
    color:#fff !important;
    float: right;
    font-size: 14px;
 font-weight: bold;

}

.adicionar-ao-carrinho-btn:hover {

    background: #FFC671;
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5);
     color: #fff;
}



.add_to_cart_button.added-to-cart { background-color: #00cc00; color: #fff;  }


.add_to_cart_button.hide-add {
    display: none;
}

.add_to_cart_button:hover {
    background-color: #ff9811; 
    color: #fff;
}


.mobile-only {
    display: none;
}


    .footer-fixed {
    position: fixed;
     bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    padding: 10px;
    text-align: center;
    z-index: 99999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#016cd6;
    
}

.arrow-up {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #FF770F;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 15px;
}

.arrow-up i {
    font-size: 15px;
    color: #FF770F;
}


.pagar-agora {
    display: flex;
    align-items: center;
}




label.cep-label {
    display: block;
    font-weight: bold;
    border: 0px solid #f00;
    text-align: left;
}

.cep-campo:invalid {
    border-color: #ffa500;
}

.cep-campo {
    height: 30px !important;
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #0084FF;
    border-radius: 50px;
    box-sizing: border-box;
    margin-right: 10px;
    color: #999;
    border: 1px solid #f00;
    width: 100%;
}

#resultado-cep {
    font-weight: italic;
    margin-right: 10px;
    max-width: 100%;
    margin-top: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    text-align: left;
}

button.calcular-entrega {
    background-color: #0084FF !important;
    color: #fff;
    border: none;
    padding: 2px 18px;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none;
    font-size: 15px;
}

button.calcular-entrega:hover {
    transform: scale(1.01); 
        transition: transform 0.1s; 
}

.pagar-agora {
    display: flex;
    align-items: center;
}

.pagar-agora-button {
    background-color: #0DC143 !important;
    color: #fff;
    border: none;
    padding: 2px 18px;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none;
    font-size: 15px;
}


.pagar-agora-button.botao-ativo {
    background-color: #14BA39;
}

.new-bag {


    border:0px dotted #ccc;
    display: inline-block;
    width: 100%;
    font-size: 12px;


}

.itensTotal {
    font-style: italic;
    margin-left:26px;
}

.subvalor {
    font-weight: bold;
   
}


.info-label {
    margin-bottom: 50px;
    font-size: 18px;
    color: #fff !important;
    font-style: italic;
    font-weight: bold;
    background: #002e8c;
    border-bottom: 3px solid #016cd6;
    display: flex; /* Usa Flexbox para facilitar o posicionamento */
    justify-content: space-between; /* Alinha os filhos à esquerda e à direita */
    align-items: center; /* Alinha verticalmente os itens */
    padding: 10px 14px;
    border-radius: 20px;
}

/* Estilo para dispositivos móveis */
@media screen and (max-width: 768px) {

    
    .destaque {
  width: 100vw;
  position: relative;
  left: -3.5vw;
  border-radius:0px;
}
    
    

#subtotal-variation {
    position: fixed;
    top: 0px;
    z-index: 99999;
    background-color: #fff;
    font-size: 15px;
    width: 100%;
    padding: 11px;
    left: 0;
    border-bottom: 1px dotted #609;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .subtotal-variation {
        float: right;
        right: 0;
    }
    
    .itensT {
  
}

.new-bag {
   text-align:center;
    align-items: center;
    border:1px dotted #ccc;
    display: contents;

}




.outlined-icon {
color: transparent;
-webkit-text-stroke: 1px currentColor;
border:1px solid #f00;

}
    
    .mobile-only {
        display: inline-block;
    }
    
.itensTotal {
    margin-left:10px;
}

.subvalor {
    padding:0px 5px;
}

    

    
    .variation-description {
    display: normal;
  
    padding:6px 6px;
    border: 1px solid #016cd6;
    background-color: #f2f2f2;
    color: #333;
justify-content: space-between;
    align-items: center;
    text-align: left;
    border-radius: 10px;
    font-size: 8px;
    position: absolute;
    right: 10px;
    left: 180px;
    font-weight: normal;
    margin-top: -1px;
}
    
    .alert-message {
font-size: 16px;
margin-top:-85px;

   
}

.alert-message-success {

}


.alert-message-error {
     background: #FF0000;
    color: #fff;
    border-radius: 10px;
    border: 0px dotted #2E5F3F;
}



.new-price {
    right:40px;
    position: absolute; 
    font-weight:bold;
}

.quantidade-var {
    position: absolute; 
   z-index: 999999;
    background-color: #fff; 
    color: #016cd6; 
    border-radius: 50%; 
    padding: 3px 5px; 
    font-size: 14px; 
     border: 0px solid #F9991E;
     border: 1px solid #ccc !important;
     top:23px;
     
     
}
    



.products-container {
    margin: 50px 0 0px 0;

}

   .variation {
    align-items: center;
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px dashed #016cd6;
    padding: 5px 0px 5px 0px;
    flex-direction: row;
    align-content: center;

  
}



.easy-opcao {
    font-size: 14px;
    text-transform: capitalize;
    border: 0px solid #000;
    margin: 0; 
    color:#fff;
}  


.info-label {
    margin-bottom:42px;
    font-size:12px !important;
    margin-top:0px !important;
   
    
}

.change-modo {
    font-size: 15px;
    border: 0;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff !important;
    background: #016cd6;
    text-decoration: none; 
} 

.image-column {
    flex: 1;
    margin-right: 2px;
     border: 0px dashed #e1e1e1;
     
}

.image-column img {
    
}


.info-column {
flex:4;
display: block;
border: 0px solid #f00;

align-items: center

}

.info-column h2 {

margin:0px;
color: #016cd6;
border: 0px solid #000;
font-size: 14px;
font-weight:normal;
   
}

.top-row {

border: 0px solid #f00;
display: block;
float: left;
margin-left:5px;
position:relative;
z-index:99;
}


.toggle-maximize {

float:right;
text-align:left;
position:absolute;
z-index:9999;
border:0px solid #000;
right:70px;
margin-top:29px;
width:120px;
}


.bottom-row { 
border:0px solid #f00;
margin-top: 0px;


}

.price {
    font-size: 14px !important;
    margin-bottom: 5px;
    border: 0px solid #000;
    display: none;
 
}


.gramat {
    font-size: 15px;
border: 0px solid #f00;
line-height: 2.5;
}


.variation-description {
  padding:2px 5px;
    border: 1px solid #016cd6;
    background-color: #f2f2f2;
    color: #333;
justify-content: space-between;
line-height: 1.5;
}
    

button.adicionar-ao-carrinho-btn {
margin-top: 0px;
    padding:17px 3px 0px 3px;
    background: #002e8c !important;
    border-radius: 50%;
    border: 0px solid #914800;
    color:#fff !important;
    float: right;
    font-size: 8px;
    width: 54px;
    height: 54px;
    display: flex;
   box-shadow: 0 -3px 4px 0 rgba(0, 0, 0, 0.5);
font-weight: bold;

}

.adicionar-ao-carrinho-btn:hover {

    background: #FFC671;
     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5);
     color: #fff;
}



.attribute h2{ font-size: 10px; display: inline-block;  
padding:3px 25px 3px 25px; 
 
border-radius:20px; 

    
}

.attribute {
    margin:30px 0 10px 0;
}





    .footer-fixed {
    position: fixed;
     bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    padding: 10px;
    text-align: center;
    z-index: 99999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#014189;
    
}








}