:root {
    --cor-1: #7E6742;
    --cor-2: #B3B3B3;
    --cor-3: #ffffff;
    --cor-4: #594125;
    --cor-erro: #e83c2c;
}

.img-grade{
    margin: auto;
}

@media (min-width: 1200px){
    .img-grade{
        height: 320px !important;        
        width: auto;
    } 
}

@media (max-width: 767px) and (orientation:landscape){
    .img-grade{
        height: 260px !important;    
        width: auto;
    } 
}

.thumbs-grade{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
}

.thumbs-grade li{
    display: inline-block;
    flex-basis: 80px;    
}

.thumbs-grade li+li{
    margin: 0 0 10px 5px;
}

.thumbs-grade > li > a{
    border: 1px solid var(--cor-2); 
    display: block;
}

@media (max-width: 650px){
    .thumbs-grade li{
        width: 90px; 
        height: auto;
    }
}

.flex-tamanhos{
    display: flex; 
    flex-wrap: wrap;
}

.flex-tamanho-item{
    display: flex; 
    flex-direction: column; 
    align-items: center;
    width: 70px; 
    margin: 0 15px 15px 15px;
}

.flex-tamanho-row{
    align-self: stretch; 
    text-align: center;
}

.flex-tamanho-estoque{
    display: flex; 
    justify-content: space-around; 
    font-size: 0.9em;
}

.row-cor-grade{
    margin: 10px 1px;
    padding: 10px 0 20px 0;
    box-shadow: 0px 0px 2px 2px var(--cor-2);
}

.coluna-tamanho-grade input.erro, .input-grade-carrinho.erro, .input-grade.erro, .input-catalogo.erro{
    border: 1.5px solid var(--cor-erro);
    color: var(--cor-erro);
}

.input-grade{
    font-size: 120%;
    text-align: center;
}

.input-grade[disabled]{
    cursor: not-allowed; 
    background-color: var(--cor-2);
    opacity: 1;
}

.linha-cor{
    box-shadow: 0px 0px 2px 2px var(--cor-2); 
    margin: 30px 0;
}

.cab-produto-grade{
    display: flex; 
    height: 40px; 
    align-items: center;
    margin: 16px 0px;
}

.cab-produto-grade.with-image{
    display: flex; 
    height: 80px; 
    align-items: center;
    margin: 16px 0px;
}

.div-img-produto-grade{
    flex-basis: 60px;
    /* flex-basis: 14%; */
}

.div-desc-produto-grade{
    padding-left: 10px;
    width: 65%;
}

.div-quantidade-produto-grade{
    margin-left: auto;
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

.div-quantidade-produto-valor{
    /* margin-left: auto; */
    display: flex; 
    /* flex-direction: column;  */
    align-items: center;
}

.div-quantidade-estoque-cor{
    margin-left: auto;
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

.div-left-grade{
    flex-wrap: wrap; 
    flex-direction: row; 
    align-items: center;
    /* margin-left: auto; */
    /* width: 20%; */
}

.div-left-grade div{
    padding: 0 10px;
}

.div-right-grade{
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    margin-left: auto; 
    align-items: end;
    justify-content: flex-end;
    width: 20%;
}


.flags-grade {
    font-size: 12px;
    /* display: flex; */
    /* width: 10%; */
}

.flags-grade > div {
    padding: 8px;
    border-radius: 16px;
}

.tamanhos-grade {
    display: flex;
}

@media (min-width: 768px) {    
    .div-expande-card-grade .btn-expande-card-grade-lg{
        display: block;
    }
    .div-expande-card-grade .btn-expande-card-grade-xs{
        display: none;
    }
    .div-left-grade{
        display: flex;
    }
    .div-left-grade div{
        padding: 0 16px;
    }
}

@media (max-width: 767px) {    
    .div-expande-card-grade .btn-expande-card-grade-lg{
        display: none;
    }
    .div-expande-card-grade .btn-expande-card-grade-xs{
        display: block;
    }
    .div-left-grade{
        display: block;
    }
    .div-left-grade div{
        padding: 0 4px;
    }
}

.div-expande-card-grade button[aria-expanded="true"] .icone-abrir-grade:before{
    content: "\f077"
}

@media (max-width: 767px) {
    .cab-produto-grade.with-image {
        height: 140px;
    }
    .div-right-grade{
        flex-direction: column;
    }
}