/* ==========================================================================
   ESTILO DA VITRINE (CARDS DE PRODUTO)
   ========================================================================== */

/* Container da Seção */
.secao-produtos-loja { 
    /* Padding grande no topo para o título não sumir embaixo do menu */
    padding: 160px 4% 80px 4%; 
    max-width: 1200px; 
    margin: 0 auto; 
    text-align: center; 
}

/* Título */
.titulo-secao-loja {
    font-size: 2rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 60px; 
    letter-spacing: 3px; 
    text-transform: uppercase;
}

/* GRID / FLEX (Forçando os 3 itens a ficarem um do lado do outro e no centro) */
.lista-produtos-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Se a tela for pequena, joga pra baixo, mas no PC ficam 3 na linha */
    gap: 30px; 
}

/* CARD INDIVIDUAL */
.produto-card {
    background-color: transparent; 
    border: none;
    text-align: left;
    transition: all 0.3s ease; 
    /* Força os cards a dividirem a tela em 3 partes iguais (30% cada) */
    width: 30%; 
    min-width: 280px;
    max-width: 350px; 
    position: relative; 
    cursor: pointer;
    opacity: 0; 
    padding-bottom: 10px;
}

/* Hover no Card */
.produto-card:hover {
    transform: translateY(-5px); 
    z-index: 2; 
}

/* ÁREA DA IMAGEM */
.produto-imagem-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 380px; /* Altura ajustada para não ficar desproporcional */
    width: 100%;
    background-color: transparent; 
    margin-bottom: 15px;
    border-radius: 4px;
}

.produto-card img {
    height: 100%; 
    width: 100%;
    object-fit: contain; 
    
    /* ZOOM REDUZIDO: baixei de 1.55 para 1.15. Agora fica bem mais suave */
    transform: scale(1.15); 
    transition: transform 0.5s ease; 
    display: block;
}

/* Zoom extra ao passar o mouse */
.produto-card:hover img {
    transform: scale(1.25); /* Zoom suave no hover */
}

/* INFORMAÇÕES (Texto) */
.produto-info-card {
    padding: 0 5px;
    text-align: center; 
}

.produto-nome-card {
    font-size: 1.1rem; 
    font-weight: 700;
    color: #000;
    margin-bottom: 6px; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

.produto-preco-card {
    font-size: 1rem; 
    font-weight: 500;
    color: #444;
    margin-top: 0; 
}

/* BOLINHAS DE COR */
.card-cores-hover {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    height: 18px;
    align-items: center;
}

.cor-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #ccc; 
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}

.cor-dot:hover {
    transform: scale(1.3);
    border-color: #000;
}

/* BOTÃO "VER PEÇA" */
.add-to-cart-btn {
    position: absolute; 
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #000; 
    color: #fff;
    padding: 15px 0; 
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0; 
    transform: translateY(100%); 
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.produto-card:hover .add-to-cart-btn {
    opacity: 1; 
    transform: translateY(0); 
}

.add-to-cart-btn:hover {
    background-color: #444; /* Verde neon */
    color: #000;
}

/* ANIMAÇÃO DE ENTRADA */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 0.8s ease forwards; }

.produto-card:nth-child(1) { animation-delay: 0.1s; }
.produto-card:nth-child(2) { animation-delay: 0.2s; }
.produto-card:nth-child(3) { animation-delay: 0.3s; }

/* RESPONSIVO (TABLET E CELULAR) */
@media (max-width: 900px) {
    .produto-card {
        width: 45%; /* Em telas médias (Tablet), coloca 2 por linha */
    }
}

@media (max-width: 768px) {
    .secao-produtos-loja { padding: 120px 3% 40px 3%; }
    .titulo-secao-loja { font-size: 1.5rem; margin-bottom: 40px; }
    
    .lista-produtos-grid {
        flex-direction: column; /* Coloca um embaixo do outro no celular */
        align-items: center;
    }
    
    .produto-card {
        width: 100%; 
        max-width: 380px;
    }

    /* AQUI ESTÁ A MÁGICA: Muda a direção para coluna */
    .produto-imagem-wrapper { 
        height: auto; /* Permite que a caixa cresça para caber a imagem e o botão */
        flex-direction: column; /* Força a imagem a ficar em cima e o botão embaixo */
    }

    /* Garante que a imagem mantém a proporção no mobile */
    .produto-card img {
        height: 350px; /* Mantém a altura bonita */
        width: 100%;
        margin-bottom: 10px; /* Dá um pequeno espaço antes do botão */
    }
    
    .add-to-cart-btn { 
        display: block; 
        opacity: 1; 
        transform: translateY(0); 
        position: relative; 
        margin-top: 0;
        width: 100%; /* Garante que o botão ocupa a largura total da base da foto */
    } 
}