:root{
  --primaria:#e63329; --secundaria:#1a1a1a; --destaque:#f5b301;
  --bg:#f4f4f5; --card:#ffffff; --texto:#1f2024; --sub:#6b7078; --linha:#ececef;
  --ok:#1f9d55; --radius:14px; --sombra:0 2px 10px rgba(0,0,0,.06);
  --fonte:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* garante que drawer/modal/fab realmente somem (display:flex sobrescrevia o atributo hidden) */
body{font-family:var(--fonte);background:var(--bg);color:var(--texto);-webkit-font-smoothing:antialiased;padding-bottom:90px}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* Topo */
.topo{background:var(--card);box-shadow:var(--sombra)}
.topo-banner{height:5px;background:linear-gradient(90deg,var(--primaria),var(--destaque),var(--secundaria))}
.topo-info{display:flex;gap:16px;align-items:center;padding:16px;max-width:900px;margin:0 auto}
.topo-logo{width:76px;height:76px;border-radius:16px;object-fit:cover;background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra);flex-shrink:0}
.topo-textos h1{font-size:22px}
.topo-textos p{color:var(--sub);font-size:14px;margin-top:2px}
.topo-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--sub)}
.badge{padding:3px 10px;border-radius:20px;font-weight:600;font-size:12px}
.badge.aberto{background:#e7f7ee;color:var(--ok)}
.badge.fechado{background:#fdeceb;color:var(--primaria)}

/* Nav categorias */
.catnav{position:sticky;top:0;z-index:20;background:var(--card);display:flex;gap:6px;overflow-x:auto;padding:10px 12px;box-shadow:var(--sombra);scrollbar-width:none}
.catnav::-webkit-scrollbar{display:none}
.catnav button{white-space:nowrap;padding:8px 14px;border-radius:20px;font-size:14px;font-weight:600;color:var(--sub);background:var(--bg)}
.catnav button.ativo{background:var(--primaria);color:#fff}

/* Conteudo */
.conteudo{max-width:900px;margin:0 auto;padding:16px 12px}
.carregando{text-align:center;color:var(--sub);padding:40px}
.secao{margin-bottom:28px;scroll-margin-top:64px}
.secao h2{font-size:19px;margin-bottom:12px;padding-left:4px;border-left:4px solid var(--primaria)}
.grade{display:grid;gap:12px}
.prod{display:flex;gap:12px;background:var(--card);border-radius:var(--radius);box-shadow:var(--sombra);padding:12px;cursor:pointer;transition:transform .1s;position:relative}
.prod:active{transform:scale(.99)}
.prod-txt{flex:1;min-width:0}
.prod-txt h3{font-size:16px;margin-bottom:4px}
.prod-txt p{color:var(--sub);font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-preco{margin-top:8px;font-weight:700;color:var(--secundaria);font-size:15px}
.prod-preco .de{color:var(--sub);text-decoration:line-through;font-weight:400;font-size:13px;margin-right:6px}
.prod-foto{width:96px;height:96px;border-radius:10px;object-fit:cover;background:var(--bg);flex-shrink:0}
.prod-foto.vazia{display:flex;align-items:center;justify-content:center;color:#c9ccd2}
.tag-promo{position:absolute;top:8px;left:8px;background:var(--destaque);color:#3a2c00;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px}
.indisp{opacity:.5}
.indisp .prod-preco::after{content:' - indisponível';color:var(--primaria);font-size:12px;font-weight:600}

/* FAB carrinho */
.carrinho-fab{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:40;background:var(--primaria);color:#fff;border-radius:30px;padding:12px 20px;display:flex;align-items:center;gap:12px;font-weight:700;box-shadow:0 6px 20px rgba(230,51,41,.4);max-width:92%}
.carrinho-fab #fabQtd{background:rgba(255,255,255,.25);border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}

/* Overlay + Drawer */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--bg);z-index:60;display:flex;flex-direction:column;animation:desliza .2s ease}
@keyframes desliza{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-topo{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--card);box-shadow:var(--sombra)}
.drawer-topo h2{font-size:18px}
.fechar{font-size:28px;line-height:1;color:var(--sub)}
.drawer-itens{flex:1;overflow-y:auto;padding:12px}
.ci{background:var(--card);border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:var(--sombra)}
.ci-topo{display:flex;justify-content:space-between;gap:8px}
.ci-topo strong{font-size:15px}
.ci-obs{color:var(--sub);font-size:12px;margin-top:4px}
.ci-ctrl{display:flex;align-items:center;gap:12px;margin-top:8px}
.qtd{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:20px;padding:4px}
.qtd button{width:28px;height:28px;border-radius:50%;background:var(--card);font-size:18px;font-weight:700;color:var(--primaria);box-shadow:var(--sombra)}
.ci-preco{margin-left:auto;font-weight:700}
.remover{color:var(--primaria);font-size:12px;font-weight:600;background:none}
.drawer-rodape{background:var(--card);padding:16px;box-shadow:0 -2px 10px rgba(0,0,0,.06)}
.linha-total{display:flex;justify-content:space-between;margin-bottom:6px;font-size:14px;color:var(--sub)}
.linha-total.grande{font-size:18px;color:var(--texto);font-weight:700;margin-top:8px}
.btn{display:block;width:100%;text-align:center;background:var(--primaria);color:#fff;font-weight:700;padding:14px;border-radius:12px;font-size:16px;margin-top:12px}
.btn:disabled{opacity:.5}
.btn.secundario{background:var(--bg);color:var(--texto)}
.btn.zap{background:#25d366}
.vazio-carrinho{text-align:center;color:var(--sub);padding:40px 16px}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:70;display:flex;align-items:flex-end;justify-content:center}
.modal-box{background:var(--card);width:min(480px,100%);max-height:92vh;overflow-y:auto;border-radius:18px 18px 0 0;animation:sobe .2s ease}
@keyframes sobe{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-box .foto-grande{width:100%;height:220px;object-fit:cover;background:var(--bg)}
.modal-corpo{padding:18px}
.modal-corpo h2{font-size:20px}
.modal-corpo .desc{color:var(--sub);margin:10px 0;line-height:1.45;font-size:14px}
.modal-corpo textarea{width:100%;border:1px solid var(--linha);border-radius:10px;padding:10px;font-family:inherit;font-size:14px;resize:vertical;margin-top:8px}
.modal-preco{font-size:22px;font-weight:800;margin:12px 0}
.form-campo{margin-bottom:12px}
.form-campo label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--sub)}
.form-campo input,.form-campo select{width:100%;border:1px solid var(--linha);border-radius:10px;padding:11px;font-size:15px;font-family:inherit;background:#fff}
.opcoes-radio{display:flex;gap:8px}
.opcoes-radio label{flex:1;border:1px solid var(--linha);border-radius:10px;padding:11px;text-align:center;font-size:14px;font-weight:600;cursor:pointer}
.opcoes-radio input{display:none}
.opcoes-radio input:checked + span{color:var(--primaria)}
.opcoes-radio label:has(input:checked){border-color:var(--primaria);background:#fdeceb}
.pix-box{text-align:center;padding:10px}
.pix-box img{width:220px;height:220px;margin:0 auto;border:1px solid var(--linha);border-radius:12px}
.pix-copia{display:flex;gap:8px;margin-top:12px}
.pix-copia input{flex:1;font-size:12px;border:1px solid var(--linha);border-radius:10px;padding:10px;background:var(--bg)}
.aviso{background:#fff8e6;border:1px solid #f5d97a;border-radius:10px;padding:12px;font-size:13px;color:#7a5c00;margin:10px 0}
.status-pago{text-align:center;color:var(--ok);font-weight:700;font-size:18px;padding:20px}

/* Rodape */
.rodape{max-width:900px;margin:0 auto;padding:24px 16px;text-align:center;color:var(--sub);font-size:13px}
.rodape-admin{font-size:12px;color:var(--sub);text-decoration:underline}