/* ====================================================================
   ESTILOS PERSONALIZADOS - BANANINHA DA SERRA (RÚSTICO & ELEGANTE)
   Inspirado no charme colonial e tradição artesanal do Vale do Paraíba
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,500;1,600&display=swap');

:root {
    --cor-terra-escura: #2A1810;
    --cor-madeira: #4A2E1B;
    --cor-cobre: #A65B2E;
    --cor-banana-ouro: #ECA824;
    --cor-banana-clara: #F8DF88;
    --cor-verde-folha: #204B2A;
    --cor-verde-suave: #EBF3ED;
    --cor-creme-fundo: #FAF6EF;
    --cor-creme-card: #FFFFFF;
    --cor-borda-suave: #E8DECE;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--cor-creme-fundo);
    color: #2F261F;
    overflow-x: hidden;
}

h1, h2, h3, .font-serif {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Selo Artesanal / Badge Rústico */
.badge-artesanal {
    background: linear-gradient(135deg, #FAF1DF 0%, #F5E5C9 100%);
    border: 1px dashed #C9A96E;
    color: #5C381E;
}

/* Efeito de Tacho de Cobre nos Botões de Ação */
.btn-cobre {
    background: linear-gradient(135deg, #BD6B33 0%, #9E4D1A 100%);
    box-shadow: 0 4px 14px rgba(158, 77, 26, 0.3);
    transition: all 0.25s ease-in-out;
}
.btn-cobre:hover {
    background: linear-gradient(135deg, #CD783D 0%, #8A4013 100%);
    box-shadow: 0 6px 20px rgba(158, 77, 26, 0.45);
    transform: translateY(-1px);
}

.btn-banana {
    background: linear-gradient(135deg, #F3B328 0%, #DE9A0E 100%);
    color: #382103;
    box-shadow: 0 4px 14px rgba(222, 154, 14, 0.35);
    transition: all 0.25s ease-in-out;
}
.btn-banana:hover {
    background: linear-gradient(135deg, #F5BF45 0%, #CB8A05 100%);
    transform: translateY(-1px);
}

/* Cards de Produto Estilo Empório da Roça */
.card-produto {
    background: #FFFFFF;
    border: 1px solid var(--cor-borda-suave);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-produto:hover {
    border-color: #D4BFA4;
    box-shadow: 0 12px 30px -10px rgba(74, 46, 27, 0.12);
    transform: translateY(-4px);
}

/* Textura suave de papel pardo artesanal */
.bg-papel-kraft {
    background-color: #F5EFE6;
    background-image: radial-gradient(#E5DAC9 1px, transparent 1px);
    background-size: 16px 16px;
}

/* Faixa de Destaque / Banner Promocional */
.faixa-rustica {
    background: linear-gradient(90deg, #204B2A 0%, #16361D 100%);
}

/* Animações e Transições suaves */
.transicao-suave {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gaveta Lateral de Carrinho */
.drawer-overlay {
    transition: opacity 0.3s ease-in-out;
}
.drawer-content {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Botão Flutuante do WhatsApp */
.whatsapp-pulse {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Scrollbar Bonita */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #F4EFE6;
}
::-webkit-scrollbar-thumb {
    background: #C4AD93;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9D8469;
}