/* ========================================
   PRODUTOS
======================================== */




/* ========================================
   PRODUTOS
======================================== */

#produtos{
    padding:90px 0;
    background:linear-gradient(
        180deg,
        #0b1120 0%,
        #111827 50%,
        #0b1120 100%
    );
}

/* ========================================
   GRID
======================================== */

.produtos-grid {
    
    display: flex;
    
    flex-wrap: wrap;
    
    justify-content: center;
    
    gap: 28px;
    
    margin-top: 50px;
    
}
/* ========================================
   CARD
======================================== */

.produto-card {
    
    position: relative;
    
    overflow: hidden;
    
    display: flex;
    
    flex-direction: column;
    
    background: #162033;
    
    border: 1px solid rgba(255, 255, 255, .06);
    
    border-radius: 18px;
    
    transition: .35s;
    
    cursor: pointer;
    
    flex: 0 0 220px;
    
    width: 220px;
    
    min-height: 220px;
    
}


.produto-card:link,
.produto-card:visited{

    color:inherit;

    text-decoration:none;
}

.produto-card:hover{

    transform:translateY(-6px);

    border-color:#3b82f6;

    box-shadow:
        0 18px 40px rgba(59,130,246,.18);
}

.produto-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top,
        rgba(59,130,246,.18),
        transparent 60%);

    opacity:0;

    transition:.35s;

    pointer-events:none;
}

.produto-card:hover::before{

    opacity:1;
}

/* ========================================
   FAVORITO
======================================== */
.btn-favorito {
    position: absolute;
    
    top: 12px;
    right: 12px;
    
    width: 44px;
    height: 44px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .08);
    
    background: rgba(15, 23, 42, .75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    
    transition: .3s;
}

/* Ícone do favorito */
.btn-favorito i {
    color: #fff;
    font-size: 18px;
    transition: .25s;
}

/* Quando está favoritado */
.btn-favorito .fas {
    color: #ef4444;
}

/* Hover */
.btn-favorito:hover i {
    transform: scale(1.12);
}
/* ========================================
   IMAGEM
======================================== */

.produto-imagem{

    height:230px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:12px;
}

.produto-imagem img{

    width:95%;

    height:95%;

    object-fit:contain;

    transition:.35s;
}

.produto-card:hover .produto-imagem img{

    transform:scale(1.08);
}

/* ========================================
   INFORMAÇÕES
======================================== */

.produto-info{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:18px;
}

.produto-categoria{

    color:#3b82f6;

    font-size:13px;

    font-weight:600;

    margin-bottom:8px;
}

.produto-info h3{

    color:#fff;

    font-size:19px;

    line-height:1.35;

    min-height:54px;

    margin-bottom:10px;
}

.produto-estrelas{

    color:#facc15;

    font-size:15px;

    margin-bottom:12px;
}

.produto-estrelas span{

    color:#94a3b8;
}

.produto-precos{

    margin-bottom:10px;
}

.preco-atual{

    color:#fff;

    font-size:28px;

    font-weight:800;
}

.produto-parcelamento{

    font-size:14px;

    color:#cbd5e1;
}

.produto-estoque{

    margin-top:auto;

    color:#22c55e;

    font-size:14px;

    font-weight:600;
}
/* ========================================
   BOTÕES
======================================== */

.produto-botoes{

    display:flex;

    gap:10px;
}

.btn-comprar,
.btn-detalhes{

    flex:1;
}

.btn-adicionar{

    transition:.3s;
}

.btn-adicionar:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(53,99,255,.35);
}

.btn-detalhes{

    transition:.3s;
}

.btn-detalhes:hover{

    background:rgba(53,99,255,.12);

    color:#fff;

    border-color:#3563ff;
}

.btn-carrinho{

    width:48px;

    border:none;
    border-radius:12px;

    background:#2563eb;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    transition:.3s;
}

.btn-carrinho:hover{

    background:#1d4ed8;
}