:root {
    --cor-primaria: #6F4E37;
    --cor-secundaria: #E8B15C;
    --texto: #2B2320;
    --texto-suave: #7A6F68;
    --fundo: #FBF8F4;
    --card: #FFFFFF;
    --borda: #ECE4D9;
    --sucesso: #2F7D4F;
    --raio: 16px;
    --sombra: 0 8px 24px rgba(43, 35, 32, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    padding-bottom: 90px;
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; margin: 0; }

/* ---- Faixa de aviso ---- */
.faixa-aviso {
    background: var(--cor-secundaria);
    color: #3A2A14;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
}

/* ---- Topo / banner ---- */
.topo {
    background-color: var(--cor-primaria);
    background-size: cover;
    background-position: center;
    position: relative;
}
.topo-sombra {
    background: linear-gradient(180deg, rgba(20,15,10,0.35), rgba(20,15,10,0.75));
    padding: 28px 20px 22px;
}
.topo-conteudo {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
}
.logo {
    width: 68px; height: 68px; border-radius: 18px; object-fit: cover;
    background: #fff; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.logo-inicial {
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700; color: var(--cor-primaria);
    font-family: Georgia, serif;
}
.topo-textos h1 { font-size: 24px; color: #fff; }
.topo-textos p { margin: 4px 0 10px; color: rgba(255,255,255,0.88); font-size: 14px; }
.topo-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
    font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px;
    background: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(2px);
}
.pill-aberta { background: rgba(47, 125, 79, 0.85); }
.pill-fechada { background: rgba(179, 65, 58, 0.85); }

.banner-fechado {
    background: #F7E5E3; color: #8C332B; text-align: center; font-size: 13px; padding: 10px 16px;
}

/* ---- Tabs de categoria ---- */
.tabs-categoria {
    position: sticky; top: 0; z-index: 20;
    display: flex; gap: 8px; overflow-x: auto;
    background: var(--fundo);
    padding: 12px 16px;
    border-bottom: 1px solid var(--borda);
    scrollbar-width: none;
}
.tabs-categoria::-webkit-scrollbar { display: none; }
.tab {
    flex-shrink: 0; font: inherit; font-size: 14px; font-weight: 600;
    padding: 9px 16px; border-radius: 20px; border: 1px solid var(--borda);
    background: var(--card); color: var(--texto-suave); cursor: pointer;
    transition: all .15s ease;
}
.tab.ativa { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }

/* ---- Conteúdo / grade de produtos ---- */
.conteudo { max-width: 900px; margin: 0 auto; padding: 8px 16px 24px; }
.secao-categoria { padding-top: 22px; scroll-margin-top: 64px; }
.secao-categoria h2 { font-size: 19px; margin-bottom: 14px; }

.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.card-produto {
    background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
    overflow: hidden; display: flex; box-shadow: var(--sombra);
}
.card-imagem { width: 110px; flex-shrink: 0; position: relative; background: #F1E9DE; }
.card-imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-imagem-vazia { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; min-height: 110px; }
.etiqueta-promo {
    position: absolute; top: 6px; left: 6px; background: var(--sucesso); color: #fff;
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
}
.card-info { padding: 10px 12px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.card-info h3 { font-size: 15px; font-family: inherit; font-weight: 700; line-height: 1.25; }
.card-info p {
    font-size: 12.5px; color: var(--texto-suave); margin: 4px 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-rodape { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; }
.precos { display: flex; flex-direction: column; }
.preco-antigo { font-size: 11px; color: var(--texto-suave); text-decoration: line-through; }
.preco { font-size: 15px; font-weight: 700; color: var(--cor-primaria); }
.botao-add {
    width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--cor-primaria); color: #fff; font-size: 18px; line-height: 1;
    flex-shrink: 0;
}
.botao-add:active { transform: scale(0.92); }
.botao-add.pulsar { animation: pulsarBotao .15s ease; }
@keyframes pulsarBotao { 50% { transform: scale(1.25); } }

.vazio { text-align: center; padding: 60px 20px; color: var(--texto-suave); }

/* ---- Rodapé ---- */
.rodape { text-align: center; padding: 30px 16px 20px; color: var(--texto-suave); font-size: 13px; }
.rodape p { margin: 3px 0; }
.rodape-marca { margin-top: 10px; font-size: 11px; opacity: .7; }

/* ---- Botão flutuante do carrinho ---- */
.botao-carrinho-flutuante {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30;
    max-width: 900px; margin: 0 auto;
    background: var(--cor-primaria); color: #fff; border: none; border-radius: 14px;
    padding: 14px 18px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
    display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.carrinho-icone { font-size: 17px; }
#carrinhoContagem {
    background: rgba(255,255,255,0.25); border-radius: 50%; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.carrinho-texto { flex: 1; text-align: left; }

/* ---- Painéis laterais (carrinho / checkout) ---- */
.painel-lateral { position: fixed; inset: 0; z-index: 50; }
.painel-fundo { position: absolute; inset: 0; background: rgba(20,15,10,0.5); }
.painel-caixa {
    position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 440px;
    background: var(--fundo); display: flex; flex-direction: column;
    box-shadow: -10px 0 40px rgba(0,0,0,0.2);
    animation: entrarPainel .22s ease;
}
@keyframes entrarPainel { from { transform: translateX(100%); } to { transform: translateX(0); } }

.painel-cabecalho {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 18px 20px; border-bottom: 1px solid var(--borda); background: var(--card);
}
.painel-cabecalho h2 { font-size: 17px; flex: 1; }
.painel-cabecalho .fechar, .painel-cabecalho .voltar {
    border: none; background: var(--fundo); width: 34px; height: 34px; border-radius: 50%;
    font-size: 15px; cursor: pointer; color: var(--texto);
}

.painel-lista { flex: 1; overflow-y: auto; padding: 14px 20px; }
.item-carrinho {
    display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda);
}
.item-carrinho img, .item-carrinho .sem-imagem {
    width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #F1E9DE;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.item-carrinho-info { flex: 1; min-width: 0; }
.item-carrinho-info h4 { margin: 0 0 2px; font-size: 14px; font-weight: 700; }
.item-carrinho-info .preco-unit { font-size: 12px; color: var(--texto-suave); }
.controle-qtd { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.controle-qtd button {
    width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--borda); background: var(--card);
    cursor: pointer; font-size: 14px; line-height: 1;
}
.controle-qtd span { font-size: 13px; font-weight: 700; min-width: 16px; text-align: center; }
.item-remover { background: none; border: none; color: var(--texto-suave); font-size: 12px; cursor: pointer; text-decoration: underline; margin-left: auto; }
.item-carrinho-linha { display: flex; align-items: center; }
.item-total { font-size: 14px; font-weight: 700; color: var(--cor-primaria); white-space: nowrap; }

.carrinho-vazio { text-align: center; padding: 50px 10px; color: var(--texto-suave); }

.painel-rodape { padding: 16px 20px 22px; border-top: 1px solid var(--borda); background: var(--card); }
.linha-total { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.linha-total-final { font-size: 16px; font-weight: 700; border-top: 1px dashed var(--borda); margin-top: 6px; padding-top: 10px; }

.botao-primario {
    width: 100%; padding: 14px; border: none; border-radius: 12px; background: var(--cor-primaria);
    color: #fff; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 10px;
}
.botao-whatsapp { background: #25D366; color: #0B3B22; }

/* ---- Formulário de checkout ---- */
.form-checkout { padding: 16px 20px 30px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.form-checkout label { font-size: 13px; font-weight: 600; color: var(--texto-suave); display: flex; flex-direction: column; gap: 6px; }
.form-checkout input, .form-checkout select, .form-checkout textarea {
    font: inherit; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--borda); color: var(--texto); background: var(--card);
}
.opcoes-entrega { display: flex; gap: 16px; }
.opcao-radio { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 14px; }
.resumo-valores { background: var(--card); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 16px; margin-top: 4px; }

@media (max-width: 480px) {
    .painel-caixa { max-width: 100%; }
    .topo-textos h1 { font-size: 20px; }
    .card-imagem { width: 92px; }
}