/* ==========================
   CARRINHO FIXO
========================== */

.carrinho-fixo{
    position:fixed;
    top:25px;
    right:25px;

    width:60px;
    height:60px;

    display:flex;
    justify-content:center;
    align-items:center;

    text-decoration:none;

    z-index:9999;
}

.carrinho-fixo img{
    width:42px;
}

#contador-carrinho{

    position:absolute;

    top:-6px;
    right:-5px;

    width:24px;
    height:24px;

    background:#E53935;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    font-weight:bold;

    box-shadow:0 0 8px rgba(0,0,0,.35);

}

/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#111;

    color:#fff;

}

/* ===========================
   CABEÇALHO
=========================== */

header{

    background:#000;

    padding:20px;

    text-align:center;

    border-bottom:2px solid #d4af37;

}

header h1{

    color:#d4af37;

    font-size:32px;

}

/* ===========================
   CONTEÚDO
=========================== */

main{

    width:95%;
    max-width:1200px;

    margin:30px auto;

}

/* ===========================
   CARD DO PRODUTO
=========================== */

.item-carrinho{

    display:flex;

    align-items:center;

    gap:35px;

    width:100%;

    min-height:220px;

    padding:25px;

    background:#1b1b1b;

    border-radius:18px;

    border:1px solid #2d2d2d;

    margin-bottom:25px;

}

.item-carrinho:hover{

    border-color:#d4af37;

    transform:translateY(-3px);

}

/* ===========================
   IMAGEM
=========================== */

.item-carrinho img{

    width:150px;

    height:150px;

    object-fit:cover;

    border-radius:12px;

    background:white;

    padding:4px;

}

/* ===========================
   DADOS
=========================== */

.dados{

    flex:1;

}

.dados h3{

    font-size:30px;

    color:#d4af37;

    margin-bottom:15px;

}

.dados p{

    font-size:18px;

    line-height:32px;

    color:#ddd;

}

/* ===========================
   CONTROLE QUANTIDADE
=========================== */

.controle-quantidade{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:20px;

    margin-bottom:20px;

}

.controle-quantidade button{

    width:46px;

    height:46px;

    border-radius:50%;

    border:none;

    background:#d4af37;

    color:#111;

    font-size:22px;

    cursor:pointer;

    transition:.3s;

    font-weight:bold;

}

.controle-quantidade button:hover{

    transform:scale(1.1);

    background:#f1cd5c;

}

.controle-quantidade span{

    font-size:24px;

    font-weight:bold;

    min-width:40px;

    text-align:center;

}

/* ===========================
   BOTÃO REMOVER
=========================== */

.btn-remover{

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:#8B0000;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.3s;

    margin-left:auto;

    font-size:22px;

}

.btn-remover:hover{

    background:#c62828;

    transform:scale(1.10);

}

.btn-remover i{

    font-size:22px;

}

/* ===========================
   TOTAL
=========================== */

.resumo{

    background:#1b1b1b;

    border:1px solid #333;

    border-radius:20px;

    padding:40px;

    margin-top:35px;

}

.resumo h2{

    font-size:40px;

    color:#d4af37;

    margin-bottom:35px;

}

/* ===========================
   BOTÕES
=========================== */

.resumo button{

    width:100%;

    padding:18px;

    margin-top:15px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:18px;

    font-weight:bold;

    transition:.3s;

}

#btn-finalizar{

    background:#d4af37;

    color:#000;

}

#btn-finalizar:hover{

    background:#f3d46f;

}

.resumo button:last-child{

    background:#444;

    color:white;

}

.resumo button:last-child:hover{

    background:#666;

}

/* ===========================
   RESPONSIVO
=========================== */

@media(max-width:768px){

.item-carrinho{

    flex-direction:column;

    text-align:center;

}

.item-carrinho img{

    width:170px;

}

.dados{

    width:100%;

}

.controle-quantidade{

    justify-content:center;

}

header h1{

    font-size:28px;

}

.resumo h2{

    font-size:28px;

}

}