/* styles.css CORRIGIDO para garantir a exibição dos PNGs */

/* Reset e fonte padrão */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Poppins', sans-serif; }
body { background-color:#fdfaf6; color:#3e2c1c; }

/* Cabeçalho */
.header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 20px;
    background-color:#4e342e;
    color:white;
    position:sticky;
    top:0;
    z-index:10;
}

/* Logo arredondada */
.logo { width:90px; border-radius:50%; box-shadow:0 4px 10px rgba(0,0,0,0.25); transition:transform .25s ease; }
.logo:hover { transform:scale(1.05); }

/* Nome central da marca (fonte cursiva importada no HTML) */
.logo-text {
    font-family: 'Great Vibes', cursive;
    font-size:2.4rem;
    color:#f8e7c1;
    text-shadow:0 2px 8px rgba(0,0,0,0.25);
    text-align:center;
    flex:1;
}

/* Botão carrinho */
.carrinho-btn { background:none; border:none; color:white; font-size:1.5rem; cursor:pointer; transition:transform .15s ease; }
.carrinho-btn:hover { transform:scale(1.12); color:#f8e7c1; }

/* Hero */
.hero { background:linear-gradient(180deg, rgba(93,64,55,0.75), rgba(93,64,55,0.75)); color:#fff; text-align:center; padding:110px 20px; }
.hero-texto { background:rgba(0,0,0,0.35); padding:26px; border-radius:12px; display:inline-block; }

/* Botões gerais */
.btn { display:inline-block; margin-top:12px; padding:10px 16px; background-color:#c19a6b; color:white; border-radius:8px; text-decoration:none; border:none; cursor:pointer; font-weight:700; }

/* Cards de sabores */
.sabores { padding:36px 18px; text-align:center; }
.card-container { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; max-width:1100px; margin:20px auto 0; }
.card { 
    background:#fff; 
    border-radius:12px; 
    box-shadow:0 4px 10px rgba(0,0,0,0.06); 
    padding:12px; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    transition:transform .18s ease; 
}
.card:hover { transform:translateY(-6px); }

/* **CORREÇÃO APLICADA AQUI:** Adicionado `display: block` e alterado `object-fit` */
.card img { 
    width:100%; 
    max-height:260px; /* Alterado de height fixo para max-height */
    height: auto; /* Garante que a proporção da imagem seja respeitada */
    display: block; /* Garante que o navegador trate a imagem como bloco */
    object-fit: contain; /* Alterado de 'cover' para 'contain' para mostrar a imagem inteira */
    border-radius:8px; 
}
/* FIM DA CORREÇÃO */

/* Animação adicionar */
.btn.adicionar { transition:transform .08s ease, background-color .2s; }
@keyframes adicionar-pulso { 0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)} }
.adicionado { animation:adicionar-pulso .38s ease; }

/* Sobre */
.sobre { background:#efebe9; padding:48px 18px; text-align:center; }

/* Lojas */
.lojas { padding:40px 18px; background:#fff8e1; text-align:center; }
.lojas-container { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px; max-width:900px; margin:18px auto; }
.loja-card { background:#fff; border-radius:12px; padding:18px; box-shadow:0 4px 10px rgba(0,0,0,0.06); }

/* Footer */
.footer { text-align:center; background:#4e342e; color:white; padding:14px 0; margin-top:28px; }

/* Checkout specifics (classe usadas no checkout.html) */
.checkout-main { max-width:1000px; margin:28px auto; padding:0 20px 60px; }
.checkout-cart, .checkout-form { background:#fff; padding:18px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.06); margin-bottom:16px; }
.checkout-item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed #eee; }
.ci-controls { display:flex; align-items:center; gap:8px; }
.qtd-btn, .rem-btn { border:1px solid #c19a6b; background:#fff; padding:6px 10px; border-radius:8px; cursor:pointer; }
.qtd { min-width:22px; text-align:center; display:inline-block; }
.checkout-actions { display:flex; justify-content:space-between; gap:12px; margin-top:12px; }

/* Revenda section */
.revenda { background:#efebe9; padding:60px 20px; text-align:center; }

/* Responsivo */
@media (max-width:700px) {
    .card img { max-height:200px; height:auto; } /* Alterado para refletir a correção */
    .logo { width:70px; }
    .logo-text { font-size:1.9rem; }
    .card-container { grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:12px; }
}
/* ===== Navegação no cabeçalho ===== */
.navbar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.navbar a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.navbar a:hover {
    color: #f8e7c1;
}

@media (max-width: 700px) {
    .navbar {
        gap: 8px;
    }
    .navbar a {
        font-size: 0.9rem;
    }
}

/* ===== FORMULÁRIOS GERAIS (Checkout e Revenda) ===== */

.checkout-form input,
.revenda-form input,
.revenda-form textarea {
    width: 100%;
    max-width: 450px;
    display: block;
    margin: 10px auto 16px auto;
    padding: 12px 15px;
    font-size: 1rem;
    border: 2px solid #c19a6b;
    border-radius: 10px;
    outline: none;
    background-color: #fffdf8;
    color: #4e342e;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.checkout-form input:focus,
.revenda-form input:focus,
.revenda-form textarea:focus {
    border-color: #4e342e;
    box-shadow: 0 0 6px rgba(78, 52, 46, 0.4);
}

/* Botões no checkout e revenda */
.checkout-actions .btn,
.revenda-form button {
    width: 180px;
    margin: 10px;
    background-color: #4e342e;
    color: #f8e7c1;
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.25s, transform 0.2s;
}

.checkout-actions .btn:hover,
.revenda-form button:hover {
    background-color: #6d4c41;
    transform: scale(1.05);
}

/* Títulos das seções */
.checkout-main h1,
.checkout-form h2,
.revenda-form h2 {
    text-align: center;
    color: #4e342e;
    margin-bottom: 15px;
}

/* Revenda form layout */
.revenda-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fffaf4;
    border-radius: 16px;
    padding: 25px 20px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    max-width: 550px;
    margin: 0 auto 40px auto;
}

/* Textarea */
.revenda-form textarea {
    min-height: 100px;
    resize: vertical;
}

/* Label */
.revenda-form label {
    font-weight: 600;
    color: #4e342e;
    margin-bottom: 5px;
    display: block;
}