/* QR Code na mesa (restaurante 2E, 28/10/2026) — página do cliente. Celular, uma mão, sem login. */
:root { --fundo:#fffbf5; --card:#fff; --borda:#f1e4d3; --texto:#1c1917; --sub:#78716c; --pri:#b45309; --pri2:#d97706; --ok:#15803d; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--fundo); color:var(--texto); font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:16px; }
body { padding-bottom:150px; }
button { font:inherit; cursor:pointer; }
[hidden] { display:none !important; }
.q-topo { display:flex; align-items:center; gap:12px; padding:14px 14px 12px; padding-top:max(14px, env(safe-area-inset-top));
  background:linear-gradient(135deg, var(--pri), var(--pri2)); color:#fff; }
.q-logo { width:48px; height:48px; border-radius:12px; object-fit:contain; background:#fff; flex:0 0 auto; }
.q-sem-logo { display:flex; align-items:center; justify-content:center; color:var(--pri); font-weight:800; font-size:24px; }
.q-loja { min-width:0; }
.q-loja b { display:block; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q-loja small { font-size:14px; opacity:.92; font-weight:600; }
/* avatar do cliente no topo (29/10/2026): iniciais do nome + sobrenome e o primeiro nome */
.q-loja { flex:1 1 auto; }
.q-quem { margin-left:auto; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:0; color:#fff; padding:0; max-width:76px; }
.q-av { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; color:var(--pri);
  font-weight:800; font-size:15px; letter-spacing:.5px; box-shadow:0 0 0 2px rgba(255,255,255,.55); }
.q-quem-nome { font-size:12px; font-weight:700; max-width:76px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q-abas { position:sticky; top:0; z-index:5; display:flex; gap:6px; padding:8px 12px; background:var(--fundo); border-bottom:1px solid var(--borda); }
.q-abas button { flex:1; padding:10px; border-radius:999px; border:1px solid var(--borda); background:var(--card); font-weight:700; color:var(--texto); }
.q-abas button.ativo { background:var(--texto); border-color:var(--texto); color:#fff; }
.q-abas span { background:#facc15; color:#1c1917; border-radius:999px; padding:0 7px; font-size:12px; margin-left:4px; }
main section { padding:12px; }
.q-busca { width:100%; padding:12px 14px; font-size:16px; border-radius:12px; border:1px solid var(--borda); background:#fff; margin-bottom:8px; }
.q-cats { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:6px; scrollbar-width:none; }
.q-cats button { flex:0 0 auto; padding:8px 14px; border-radius:999px; border:1px solid var(--borda); background:#fff; font-weight:700; font-size:14px; }
.q-cats button.ativo { background:var(--pri); color:#fff; border-color:var(--pri); }
.q-cat-titulo { font-weight:800; font-size:13px; text-transform:uppercase; color:var(--sub); margin:14px 2px 6px; letter-spacing:.04em; }
.q-prod { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--borda); border-radius:14px; padding:10px; margin-bottom:8px; }
.q-prod img, .q-prod .sem-foto { width:72px; height:72px; border-radius:12px; object-fit:cover; background:#f5ebe0; flex:0 0 auto; }
.q-prod .info { flex:1; min-width:0; }
.q-prod .info b { display:block; font-size:15px; line-height:1.25; }
.q-prod .info span { color:var(--pri); font-weight:800; }
.q-prod .info small { color:var(--sub); display:block; }
.q-prod .no-pedido { background:#facc15; border-radius:999px; font-size:12px; font-weight:800; padding:1px 7px; margin-left:4px; color:#1c1917; }
.q-prod .mais { width:42px; height:42px; border-radius:50%; border:0; background:var(--pri); color:#fff; font-size:24px; font-weight:800; flex:0 0 auto; }
.q-vazio { text-align:center; color:var(--sub); padding:30px 0; }
.q-aviso { background:#fef3c7; border:1px solid #fde68a; border-radius:12px; padding:10px 12px; margin-bottom:10px; font-size:14px; }
.q-aviso.ok { background:#dcfce7; border-color:#bbf7d0; }
.q-aviso.erro { background:#fee2e2; border-color:#fecaca; }
.q-card { background:var(--card); border:1px solid var(--borda); border-radius:14px; padding:12px; margin-bottom:10px; }
.q-card h3 { margin:0 0 6px; font-size:16px; }
.q-itens { list-style:none; margin:0; padding:0; }
.q-itens li { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-top:1px solid var(--borda); font-size:15px; }
.q-itens li:first-child { border-top:0; }
.q-itens small { display:block; color:var(--sub); }
.q-st { font-size:12px; font-weight:800; border-radius:999px; padding:2px 9px; white-space:nowrap; align-self:flex-start; background:#f5f5f4; color:#44403c; }
.q-st.aguardando { background:#fef3c7; color:#92400e; } .q-st.aceito { background:#dbeafe; color:#1e40af; }
.q-st.recusado { background:#fee2e2; color:#991b1b; } .q-st.pronto { background:#fde047; color:#713f12; }
.q-total { display:flex; justify-content:space-between; font-size:19px; font-weight:800; margin-top:8px; }
.q-linha { display:flex; justify-content:space-between; color:var(--sub); font-size:14px; margin-top:4px; }
.q-rodape { position:fixed; left:0; right:0; bottom:0; z-index:6; padding:8px 12px; padding-bottom:max(10px, env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--fundo) 70%, rgba(255,251,245,0)); }
.q-chamar { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.q-chamar button { padding:12px 8px; border-radius:12px; border:1px solid var(--borda); background:#fff; font-weight:700; font-size:14px; color:var(--texto); }
.q-chamar button.feito { background:#dcfce7; border-color:#86efac; color:var(--ok); }
.q-carrinho { width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:15px 16px; border:0; border-radius:14px;
  background:var(--ok); color:#fff; font-size:16px; box-shadow:0 6px 18px rgba(21,128,61,.35); }
.q-folha { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; justify-content:flex-end; }
.q-folha-fundo { position:absolute; inset:0; background:rgba(28,25,23,.55); }
.q-folha-caixa { position:relative; background:#fff; border-radius:18px 18px 0 0; padding:16px; padding-bottom:max(16px, env(safe-area-inset-bottom)); max-height:88vh; overflow:auto; animation:sobe .18s ease-out; }
@keyframes sobe { from { transform:translateY(40px); opacity:.6; } }
.q-folha h3 { margin:0 0 4px; font-size:20px; }
.q-folha img.grande { width:100%; max-height:220px; object-fit:cover; border-radius:12px; margin-bottom:10px; }
.q-qtd { display:flex; align-items:center; justify-content:center; gap:18px; margin:14px 0; }
.q-qtd button { width:52px; height:52px; border-radius:50%; border:1px solid var(--borda); background:var(--fundo); font-size:28px; font-weight:800; }
.q-qtd b { font-size:30px; min-width:50px; text-align:center; }
.q-folha textarea, .q-folha input[type=text] { width:100%; padding:12px; font-size:16px; border-radius:10px; border:1px solid var(--borda); margin:4px 0 10px; font-family:inherit; }
.q-adic { border:1px solid var(--borda); border-radius:10px; padding:8px 10px; margin-bottom:10px; }
.q-adic label { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:15px; }
.q-adic label input { width:22px; height:22px; accent-color:var(--pri); }
.q-adic label span { margin-left:auto; color:var(--sub); }
.q-btn { width:100%; padding:15px; border-radius:12px; border:1px solid var(--borda); background:#fff; font-weight:800; font-size:16px; margin-top:8px; color:var(--texto); }
.q-btn.pri { background:var(--ok); border-color:var(--ok); color:#fff; }
.q-btn:disabled { opacity:.6; }
.q-ped li { align-items:center; }
.q-ped .q { display:flex; align-items:center; gap:8px; }
.q-ped .q button { width:34px; height:34px; border-radius:50%; border:1px solid var(--borda); background:var(--fundo); font-weight:800; }
.q-toast { position:fixed; left:12px; right:12px; bottom:160px; z-index:30; background:#1c1917; color:#fff; padding:12px 14px; border-radius:12px; font-size:15px; box-shadow:0 8px 20px rgba(0,0,0,.25); }
.q-toast.erro { background:#b91c1c; } .q-toast.ok { background:var(--ok); }
@media (prefers-reduced-motion: reduce) { .q-folha-caixa { animation:none; } }

/* Seus dados — cadastro opcional do cliente (29/10/2026) */
.q-rot { font-size:14px; color:#78716c; display:block; margin-top:8px; }
.q-folha input[type=tel], .q-folha input[type=email], .q-folha input[type=date], .q-folha select { width:100%; padding:12px; font-size:16px; border-radius:10px; border:1px solid var(--borda); margin:4px 0 10px; font-family:inherit; background:#fff; color:var(--texto); }
.q-folha input.erro, .q-folha select.erro { border-color:#dc2626; box-shadow:0 0 0 3px #fee2e2; }
.q-cadastre { width:100%; margin:2px 0 6px; padding:12px; border-radius:12px; border:1px dashed #f59e0b; background:#fffbeb; color:#92400e; font-weight:800; font-size:15px; }
.q-cli { border:1px solid #fcd34d; background:#fffdf5; border-radius:14px; padding:10px 12px 6px; margin-top:12px; }
.q-cli-tit { display:flex; justify-content:space-between; align-items:center; gap:8px; font-weight:800; color:#92400e; }
.q-cli-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.q-cli-2 > div { min-width:0; }
.q-cli-st { font-size:13px; color:#78716c; margin:-6px 0 8px; min-height:0; }
.q-cli-st.ok { color:#15803d; } .q-cli-st.erro { color:#b91c1c; }
.q-aceite { display:flex; gap:8px; align-items:flex-start; font-size:14px; color:#44403c; margin:6px 0 8px; }
.q-aceite input { width:20px; height:20px; flex:none; margin-top:1px; }
.q-link { background:none; border:0; color:#b45309; text-decoration:underline; font-size:13px; padding:4px; font-weight:600; }
.q-cli-salvo { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; border:1px solid var(--borda); border-radius:12px; padding:10px 12px; margin-top:12px; background:#f0fdf4; }
.q-cli-salvo label { display:flex; gap:8px; align-items:center; flex:1 1 100%; font-size:15px; }
.q-cli-salvo label input { width:20px; height:20px; flex:none; }
.q-cli-salvo small { color:#78716c; margin-left:auto; white-space:nowrap; }
/* boas-vindas / entrar com CPF / observação (29/10/2026) */
.q-sub { color:#78716c; margin:-4px 0 12px; }
.q-btn small { font-weight:600; color:inherit; opacity:.75; }
.q-btn-leve { border-color:transparent; background:transparent; color:#78716c; font-weight:700; }
.q-ja-tenho { display:block; width:100%; text-align:center; margin:2px 0 8px; }
.q-folha textarea#q_obs_ped { min-height:56px; resize:vertical; }
/* cadastro obrigatório (29/10/2026) */
.q-cli-quem { flex:1 1 100%; font-size:15px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.q-cli-nota { font-size:13px; color:#78716c; margin:2px 0 6px; }
.q-pref { flex:1 1 100%; margin:4px 0 0; }
/* modo loja (etapa B, 29/10/2026) */
.q-tipo { margin:6px 0 10px; }
.q-tipo-op { display:flex; gap:8px; margin-top:4px; }
.q-tipo-op button { flex:1; padding:12px; border-radius:12px; border:2px solid var(--borda); background:#fff; font-weight:800; font-size:15px; color:var(--texto); }
.q-tipo-op button.ativo { border-color:var(--pri); background:#fffbeb; color:#92400e; }
.q-senha { font-size:15px; }

/* data de nascimento: digitar ou escolher no calendário (29/10/2026) */
.q-data { position:relative; display:block; } /* um campo só: o 📅 fica dentro, no canto direito */
.q-data input[type=text] { width:100%; padding-right:46px !important; }
.q-data-cal { position:absolute; right:4px; top:50%; transform:translateY(-50%); border:0; background:transparent; padding:6px 8px; font-size:18px; line-height:1; cursor:pointer; }
.q-data-nat { position:absolute; right:0; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none; border:0; padding:0; }
/* "Seus dados" e "Deseja se cadastrar?" */
.q-ro { background:#f1f5f9 !important; color:#475569 !important; }
.q-sem-cad { margin-top:10px; padding:12px; border-radius:12px; background:#fff7ed; border:1px solid #fdba74; }
.q-sem-cad p { margin:0 0 8px; }

/* Mesa / Para viagem / Delivery no QR da mesa (29/10/2026) */
.q-tipo-op.q-mini { flex-wrap:wrap; }
.q-tipo-op.q-mini button { padding:9px 10px; font-size:14px; flex:1 1 30%; }
.q-dv { margin-top:8px; padding:10px 12px; border:1px dashed var(--borda); border-radius:12px; background:#fffdf8; }
.q-dv input { width:100%; }

/* Taxa de entrega na folha do pedido (30/10/2026) */
.q-total.q-sub { font-size: 14px; font-weight: 600; color: var(--sub); padding-top: 2px; padding-bottom: 2px; border-top: 0; margin-top: 0; }
.q-total.q-sub small { font-weight: 500; color: var(--sub); }
.q-frete-calc { font-weight: 500; font-style: italic; color: var(--sub); text-align: right; max-width: 60%; }

/* "Adicionar ao pedido nº N" (30/10/2026) */
.q-acresc { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
  background: #fef3c7; border: 1px solid #f59e0b; color: #78350f; font-size: 14px; }
.q-acresc span { flex: 1; }
.q-acresc button { border: 1px solid #d97706; background: #fff; color: #92400e; border-radius: 8px; padding: 6px 10px; font-weight: 700; }
.q-link.q-mais { display: inline-block; color: #15803d; margin-right: 10px; }
.q-acr-tag { font-style: normal; font-size: 11px; font-weight: 700; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 0 6px; }

/* Pagamento pelo celular (01/11/2026): serviço escolhido pelo cliente + Pix da conta */
.q-svc { align-items:center; gap:8px; color:var(--texto); }
.q-svc label { display:flex; align-items:center; gap:6px; font-weight:700; flex:1; }
.q-svc input[type=checkbox] { width:20px; height:20px; }
.q-svc input[type=number] { width:64px; padding:6px 8px; border:1px solid var(--borda); border-radius:8px; font-size:15px; text-align:center; }
.q-svc input[type=number].erro { border-color:#dc2626; background:#fee2e2; }
.q-svc input[type=number]:disabled { background:#f5f5f4; color:#a8a29e; }
.q-svc-aviso { color:#dc2626; font-size:12px; text-align:right; margin-top:2px; }
.q-pago { color:#15803d; font-weight:700; }
.q-nota { color:#78716c; font-size:13px; margin:10px 0 0; }
.q-pag h3 { margin-top:0; }
.q-pag-op .q-btn small { display:block; font-size:13px; }
.q-btn.feito { background:#ecfdf5; border-color:#86efac; color:#15803d; }
.q-pago-ok { font-size:16px; text-align:center; padding:16px; }
.q-pix { text-align:center; }
.q-pix img { width:220px; max-width:80%; height:auto; background:#fff; padding:8px; border-radius:12px; border:1px solid var(--borda); }
.q-pix-valor { font-size:22px; font-weight:800; margin:8px 0 2px; }
.q-pix textarea { width:100%; font-family:monospace; font-size:12px; border:1px solid var(--borda); border-radius:10px; padding:8px; margin-top:8px; resize:none; background:#fafaf9; }
.q-pix-esp { margin-top:10px; color:#b45309; font-weight:700; font-size:14px; }

/* 01/11/2026: botões do rodapé só quando valem — um botão sozinho ocupa a largura toda; sem nenhum, o rodapé some */
.q-chamar { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:1fr; }
.q-chamar[hidden], .q-chamar button[hidden] { display:none; }

/* mesa compartilhada (01/11/2026) */
.q-na-mesa { background:#eef2ff; color:#3730a3; border-radius:10px; padding:6px 10px; font-size:13px; font-weight:700; margin:0 0 8px; }
.q-itens li.q-meu { background:#f0fdf4; border-radius:8px; }
.q-quem { color:#4338ca; font-weight:700; }
.q-previsao { display:block; color:#0369a1; font-weight:700; font-size:11px; margin-top:2px; }

/* Assistente do cardápio (01/11/2026) */
.q-assist-btn { display:block; width:100%; margin:0 0 8px; padding:11px 14px; border:1px dashed var(--pri); border-radius:12px; background:#fff7ed; color:#7c2d12; font-size:15px; text-align:left; cursor:pointer; }
.q-assist-btn b { color:var(--pri); }
.q-as-conversa { max-height:46vh; overflow:auto; padding:4px 2px; margin:8px 0; }
.q-as-dica { color:var(--sub); font-size:14px; }
.q-as-eu { margin:8px 0 8px auto; max-width:85%; width:fit-content; background:var(--pri); color:#fff; padding:8px 12px; border-radius:14px 14px 4px 14px; }
.q-as-ele { margin:8px 0; max-width:92%; width:fit-content; background:#f5f5f4; padding:8px 12px; border-radius:14px 14px 14px 4px; }
.q-as-pensa { color:var(--sub); font-style:italic; }
.q-as-item { margin-left:6px; }
.q-as-sug { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.q-as-sug button { padding:7px 11px; border-radius:999px; border:1px solid var(--borda); background:#fff; font-size:13px; cursor:pointer; }
.q-as-form { display:flex; gap:6px; margin-top:6px; }
.q-as-form input { flex:1; min-width:0; padding:11px 12px; border:1px solid var(--borda); border-radius:12px; font-size:16px; }
.q-as-form button { padding:0 16px; border:0; border-radius:12px; background:var(--pri); color:#fff; font-weight:800; }
.q-as-aviso { display:block; color:var(--sub); margin-top:8px; }

/* Moto × carro na entrega (01/11/2026) */
.q-veic-tit { font-weight:800; margin:12px 0 6px; font-size:14px; }
.q-veic { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; margin-bottom:10px; }
.q-veic-op { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; border:2px solid var(--borda); border-radius:14px;
  background:#fff; text-align:left; cursor:pointer; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; font:inherit; color:inherit; }
.q-veic-op:active { transform:scale(.97); }
.q-veic-op.sel { border-color:var(--pri); background:#fff7ed; box-shadow:0 6px 16px rgba(180,83,9,.18); }
.q-veic-op.sel::after { content:'✓'; position:absolute; top:8px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--pri); color:#fff;
  font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.q-veic-op.off { opacity:.55; cursor:not-allowed; background:#fafaf9; }
.q-veic-ic { font-size:26px; line-height:1; }
.q-veic-op b { font-size:15px; }
.q-veic-val { font-size:18px; font-weight:900; color:var(--pri); }
.q-veic-op small { color:var(--sub); font-size:12px; }
.q-veic-op em { font-style:normal; font-size:11px; font-weight:800; color:var(--ok); }
.q-veic-mot { color:#b91c1c !important; }
.q-pulsa { animation:qPulsa .45s ease; display:inline-block; }
@keyframes qPulsa { 0% { transform:scale(1); } 40% { transform:scale(1.15); color:var(--ok); } 100% { transform:scale(1); } }
@media (prefers-reduced-motion: reduce) { .q-veic-op, .q-pulsa { transition:none; animation:none; } }

/* saldo de pontos (01/11/2026) */
.q-quem-pts { font-size:10px; font-weight:800; background:rgba(255,255,255,.22); border-radius:999px; padding:1px 7px; white-space:nowrap; }
.q-quem-pts[hidden] { display:none; }
.q-pontos { background:linear-gradient(135deg,#fef3c7,#fff7ed); border-color:#fcd34d; }
.q-pontos b { display:block; color:#92400e; font-size:15px; }
.q-pontos small { display:block; color:#78716c; margin-top:3px; }

/* link do acompanhamento da entrega (01/11/2026) */
.q-rastreio { display:inline-block; margin-top:4px; font-weight:800; color:#0f766e; text-decoration:none; }

/* Cardápio online (03/11/2026): destaque, aberto/fechado, rodapé */
.q-destaque { margin:0 0 10px; border-radius:16px; overflow:hidden; background:var(--pri); color:#fff; }
.q-destaque img { display:block; width:100%; max-height:220px; object-fit:cover; }
.q-destaque b { display:block; padding:10px 14px; font-size:15px; }
.q-situacao { margin:0 0 10px; padding:9px 12px; border-radius:12px; font-weight:700; font-size:14px; }
.q-situacao.aberto { background:#dcfce7; color:#166534; } .q-situacao.fechado { background:#fee2e2; color:#991b1b; }
.q-info { padding:16px 16px 120px; color:var(--sub); font-size:13px; }
.q-info p { margin:6px 0; } .q-info summary { cursor:pointer; font-weight:700; color:var(--texto); margin:8px 0 4px; }
.q-info ul { list-style:none; padding:0; margin:4px 0; } .q-info li { display:flex; justify-content:space-between; padding:2px 0; max-width:320px; }
.q-redes a { display:inline-block; margin-right:12px; color:var(--pri); font-weight:700; text-decoration:none; }
.q-frete-dica { font-size:12px; color:var(--pri); font-weight:700; margin:-2px 0 6px; text-align:right; }
.q-frete-dica.falta { color:#b91c1c; }

/* ===== Cardápio moderno (03/11/2026): capa, categorias fixas, cartões em grade, carrinho e rodapé ===== */
:root { --sombra:0 1px 2px rgba(28,25,23,.06), 0 6px 18px rgba(28,25,23,.07); --raio:18px; }
main, .q-abas, .q-info { max-width:1180px; margin-left:auto; margin-right:auto; }
.q-topo { position:relative; overflow:hidden; padding:18px 16px 16px; padding-top:max(18px, env(safe-area-inset-top));
  background:radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 55%), linear-gradient(135deg, var(--pri), var(--pri2)); }
.q-topo::after { content:''; position:absolute; right:-40px; bottom:-60px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none; }
.q-logo { width:56px; height:56px; border-radius:16px; box-shadow:0 4px 14px rgba(0,0,0,.18); border:2px solid rgba(255,255,255,.7); }
.q-loja b { font-size:19px; letter-spacing:-.01em; }
.q-loja small { font-size:13px; opacity:.9; }
.q-abas { top:0; background:rgba(255,251,245,.88); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); }
.q-abas button { transition:background .2s, color .2s, transform .1s; }
.q-abas button:active { transform:scale(.97); }
.q-busca { padding:13px 14px 13px 42px; border-radius:14px; box-shadow:var(--sombra); border-color:transparent;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center / 18px; }
.q-busca:focus { outline:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--pri) 25%, transparent), var(--sombra); }
.q-cats { position:sticky; top:59px; z-index:4; margin:0 -12px 6px; padding:8px 12px; background:rgba(255,251,245,.9);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.q-cats::-webkit-scrollbar { display:none; }
.q-cats button { scroll-snap-align:start; padding:9px 16px; border-color:transparent; box-shadow:var(--sombra); transition:transform .12s, background .2s; }
.q-cats button:active { transform:scale(.95); }
.q-cats button.ativo { background:linear-gradient(135deg, var(--pri), var(--pri2)); box-shadow:0 4px 12px color-mix(in srgb, var(--pri) 35%, transparent); }
.q-cat-titulo { display:flex; align-items:center; gap:8px; font-size:13px; margin:18px 2px 10px; color:var(--texto); }
.q-cat-titulo::before { content:''; width:4px; height:16px; border-radius:4px; background:var(--pri); }
.q-cat-titulo::after { content:''; flex:1; height:1px; background:var(--borda); }

.q-grade { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
@media (min-width:600px) { .q-grade { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; } }
@media (min-width:900px) { .q-grade { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (min-width:1200px) { .q-grade { grid-template-columns:repeat(5, minmax(0, 1fr)); } }
@media (max-width:330px) { .q-grade { gap:8px; } }
.q-pcard { position:relative; display:flex; flex-direction:column; background:var(--card); border-radius:var(--raio); overflow:hidden;
  box-shadow:var(--sombra); cursor:pointer; animation:q-entra .45s cubic-bezier(.2,.8,.2,1) both; transition:transform .18s, box-shadow .18s; }
.q-pcard:active { transform:scale(.97); }
@media (hover:hover) { .q-pcard:hover { transform:translateY(-4px); box-shadow:0 2px 4px rgba(28,25,23,.06), 0 14px 30px rgba(28,25,23,.12); }
  .q-pcard:hover .q-pfoto img { transform:scale(1.06); } }
.q-pcard.no-carrinho { box-shadow:0 0 0 2px var(--pri), var(--sombra); }
.q-pfoto { position:relative; aspect-ratio:4 / 3; background:linear-gradient(135deg, #f5ebe0, #fde7cf); overflow:hidden; }
.q-pfoto img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.q-pinicial { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:800;
  color:color-mix(in srgb, var(--pri) 55%, white); text-transform:uppercase; }
.q-ptop { position:absolute; left:8px; top:8px; font-style:normal; font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.94); color:#b91c1c; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.q-pqtd { position:absolute; right:8px; top:8px; font-style:normal; min-width:26px; height:26px; padding:0 7px; border-radius:999px; display:flex;
  align-items:center; justify-content:center; background:var(--pri); color:#fff; font-weight:800; font-size:13px; box-shadow:0 2px 8px rgba(0,0,0,.2); animation:q-pop .3s; }
.q-pinfo { display:flex; flex-direction:column; gap:4px; padding:10px 10px 10px 12px; flex:1; }
.q-pinfo b { font-size:14.5px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.q-pinfo small { color:var(--sub); font-size:12.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.q-prodape { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; padding-top:6px; }
.q-prodape span { color:var(--pri); font-weight:800; font-size:16px; letter-spacing:-.01em; }
.q-prodape .mais { width:38px; height:38px; flex:0 0 auto; border:0; border-radius:12px; color:#fff; font-size:22px; font-weight:800; line-height:1;
  background:linear-gradient(135deg, var(--pri), var(--pri2)); box-shadow:0 4px 12px color-mix(in srgb, var(--pri) 40%, transparent); transition:transform .12s; }
.q-prodape .mais:active { transform:scale(.88); }
@media (min-width:600px) { .q-pinfo b { font-size:15px; } .q-prodape span { font-size:17px; } }

.q-esqueleto { cursor:default; animation:none; }
.q-esqueleto .q-pfoto, .q-esqueleto i { background:linear-gradient(90deg, #f1e4d3 0%, #fbf3ea 50%, #f1e4d3 100%); background-size:200% 100%; animation:q-brilho 1.2s linear infinite; }
.q-esqueleto i { display:block; height:12px; border-radius:6px; margin:4px 0; } .q-esqueleto i:nth-child(2) { width:70%; } .q-esqueleto i:nth-child(3) { width:40%; height:16px; }

.q-carrinho { background:linear-gradient(135deg, #16a34a, #15803d); border-radius:16px; max-width:1180px; margin:0 auto; }
.q-carrinho.q-pula { animation:q-pula .45s cubic-bezier(.3,1.6,.5,1); }
.q-destaque { border-radius:var(--raio); box-shadow:var(--sombra); animation:q-entra .5s both; }
.q-situacao { border-radius:14px; box-shadow:var(--sombra); }

.q-info { margin-top:10px; padding:20px 16px 10px; text-align:center; }
.q-redes { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:14px 0; }
.q-rede { display:inline-flex; align-items:center; gap:8px; padding:10px 16px 10px 12px; border-radius:999px; color:#fff; font-weight:700; font-size:14px;
  text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.15); transition:transform .12s; }
.q-rede:active { transform:scale(.95); }
.q-rede svg { width:22px; height:22px; }
.q-rede.ig { background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.q-rede.fb { background:#1877f2; } .q-rede.zap { background:#25d366; }
.q-end { color:var(--sub); font-size:13px; }
.q-info details { max-width:520px; margin:6px auto; text-align:left; }
.q-info summary { text-align:center; list-style:none; } .q-info summary::-webkit-details-marker { display:none; }
.q-info ul { margin:6px auto; }

@keyframes q-entra { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes q-pop { 0% { transform:scale(.4); } 70% { transform:scale(1.15); } 100% { transform:scale(1); } }
@keyframes q-pula { 0% { transform:scale(1); } 35% { transform:scale(1.04) translateY(-3px); } 100% { transform:scale(1); } }
@keyframes q-brilho { to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .q-pcard, .q-destaque, .q-pqtd, .q-carrinho.q-pula { animation:none !important; } .q-pcard, .q-pfoto img { transition:none; } }

/* Rodapé do cardápio online v3 (03/11/2026): cartão compacto, no estilo dos cartões de produto */
.q-rod { max-width:720px; margin:22px 12px 0; padding:14px; background:var(--card); border-radius:var(--raio); box-shadow:var(--sombra);
  display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--sub); }
@media (min-width:744px) { .q-rod { margin-left:auto; margin-right:auto; } }
.q-rod-topo { display:flex; align-items:center; gap:10px; }
.q-rod-logo { width:40px; height:40px; border-radius:12px; object-fit:contain; background:#fff; border:1px solid var(--borda); flex:0 0 auto; }
.q-rod-nome { flex:1; min-width:0; }
.q-rod-nome b { display:block; color:var(--texto); font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q-rod-st { display:inline-block; margin-top:2px; font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:999px; }
.q-rod-st.ok { background:#dcfce7; color:#166534; } .q-rod-st.no { background:#fee2e2; color:#991b1b; }
.q-rod-redes { display:flex; gap:6px; flex:0 0 auto; }
.q-rod-redes a { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; transition:transform .12s; }
.q-rod-redes a:active { transform:scale(.9); }
.q-rod-redes svg { width:20px; height:20px; }
.q-rod-redes .zap { background:#25d366; } .q-rod-redes .fb { background:#1877f2; }
.q-rod-redes .ig { background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.q-rod-chips { display:flex; flex-wrap:wrap; gap:6px; }
.q-rod-chips span { background:var(--fundo); border:1px solid var(--borda); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:700; color:var(--texto); }
.q-rod-end { color:var(--sub); text-decoration:none; line-height:1.35; }
.q-rod-end b { color:var(--pri); white-space:nowrap; }
.q-rod-mais { display:flex; flex-wrap:wrap; gap:4px 16px; border-top:1px solid var(--borda); padding-top:8px; }
.q-rod-mais details { flex:1 1 100%; }
.q-rod-mais details:not([open]) { flex:0 0 auto; }
.q-rod-mais summary { list-style:none; cursor:pointer; font-weight:700; color:var(--texto); padding:4px 0; }
.q-rod-mais summary::-webkit-details-marker { display:none; }
.q-rod-mais summary::after { content:' ▾'; color:var(--sub); font-size:11px; }
.q-rod-mais details[open] summary::after { content:' ▴'; }
.q-rod-mais ul { list-style:none; margin:2px 0 6px; padding:0; }
.q-rod-mais li { display:flex; justify-content:space-between; gap:10px; padding:3px 0; border-bottom:1px dashed var(--borda); }
.q-rod-mais li span:last-child { color:var(--texto); font-weight:600; text-align:right; }
.q-rod-mais p { margin:2px 0 6px; line-height:1.45; }

/* Slide do topo (03/11/2026): imagem de destaque + produtos com "Pedir agora" */
.q-slides { position:relative; margin:0 0 12px; border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); background:var(--card); }
.q-slides-trilho { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.q-slides-trilho::-webkit-scrollbar { display:none; }
.q-slide { flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; position:relative; }
.q-slide-banner img { display:block; width:100%; aspect-ratio:3 / 1; object-fit:cover; }
.q-slide-banner b { display:block; padding:10px 14px; background:var(--pri); color:#fff; font-size:15px; }
.q-slide-prod { display:flex; align-items:stretch; min-height:170px; cursor:pointer; color:#fff;
  background:radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.2) 0, rgba(255,255,255,0) 55%), linear-gradient(135deg, var(--pri), var(--pri2)); }
.q-slide-txt { flex:1 1 55%; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:16px 10px 26px 16px; }
.q-slide-txt em { align-self:flex-start; font-style:normal; font-size:11.5px; font-weight:800; background:rgba(255,255,255,.95); color:#b91c1c; padding:3px 10px; border-radius:999px; }
.q-slide-txt b { font-size:18px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.q-slide-txt small { font-size:12.5px; opacity:.9; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.q-slide-preco { font-size:22px; font-weight:800; letter-spacing:-.01em; }
.q-slide-btn { align-self:flex-start; margin-top:2px; border:0; border-radius:12px; padding:10px 16px; background:#fff; color:var(--pri); font-weight:800; font-size:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.18); transition:transform .12s; }
.q-slide-btn:active { transform:scale(.94); }
.q-slide-foto { flex:0 0 42%; position:relative; display:flex; align-items:center; justify-content:center; padding:12px 12px 24px 0; }
.q-slide-foto img { width:100%; max-height:170px; object-fit:contain; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.22); }
.q-slide-foto span { width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:800; }
.q-slides-pontos { position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; pointer-events:none; }
.q-slides-pontos button { pointer-events:auto; width:8px; height:8px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(0,0,0,.12); transition:width .25s, background .25s; }
.q-slides-pontos button.ativo { width:22px; background:#fff; }
@media (min-width:600px) { .q-slide-prod { min-height:220px; } .q-slide-txt { padding-left:28px; gap:7px; } .q-slide-txt b { font-size:24px; } .q-slide-preco { font-size:26px; } .q-slide-foto img { max-height:210px; } }

/* Chat do cardápio (03/11/2026): o visual vem de chat_cardapio.css (cópia do widget do site); aqui só o encaixe no cardápio */
#c7cb-root { transition:bottom .25s; }
body:has(#q_carrinho:not([hidden])) #c7cb-root.c7cb-pos-bottom-right { bottom:calc(max(10px, env(safe-area-inset-bottom)) + 74px); }
.c7cb-emojis { position:absolute; right:6px; bottom:46px; z-index:20; display:grid; grid-template-columns:repeat(6, 34px); gap:2px; padding:6px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.c7cb-emojis[hidden] { display:none; }
.c7cb-emojis button { width:34px; height:34px; border:0; background:none; font-size:20px; border-radius:8px; cursor:pointer; }
.c7cb-emojis button:hover { background:#f3f4f6; }
.q-chat-itens { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.q-chat-item { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:6px; cursor:pointer; }
.q-chat-item img, .q-chat-sem { width:44px; height:44px; border-radius:10px; object-fit:cover; flex:0 0 auto; background:#f5ebe0; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--pri); }
.q-chat-item > span { flex:1; min-width:0; font-size:13px; line-height:1.25; }
.q-chat-item b { display:block; } .q-chat-item em { font-style:normal; color:var(--pri); font-weight:800; } .q-chat-item small { display:block; color:#6b7280; }
.q-chat-item button { width:32px; height:32px; flex:0 0 auto; border:0; border-radius:10px; background:var(--pri); color:#fff; font-size:18px; font-weight:800; }
.q-chat-item button:disabled { background:#16a34a; }

/* Rodapé v4 (03/11/2026): sempre embaixo da tela e na MESMA largura do cardápio, em duas linhas */
body:has(.q-rod) { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; padding-bottom:0; }
body:has(.q-rod) > .q-topo, body:has(.q-rod) > .q-abas, body:has(.q-rod) > main { width:100%; }
body:has(.q-rod) > main { flex:1 0 auto; }
.q-rod { width:calc(100% - 24px); max-width:1156px; margin:24px auto 0; border-radius:18px 18px 0 0; padding:14px 16px max(14px, env(safe-area-inset-bottom));
  box-shadow:0 -2px 14px rgba(28,25,23,.08); gap:10px; }
body:has(#q_carrinho:not([hidden])) .q-rod { padding-bottom:calc(max(10px, env(safe-area-inset-bottom)) + 84px); }
.q-rod-l1, .q-rod-l2 { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; }
.q-rod-l1 .q-rod-topo { flex:1 1 220px; min-width:0; }
.q-rod-l1 .q-rod-chips { flex:0 1 auto; }
.q-rod-l1 .q-rod-redes { margin-left:auto; }
.q-rod-l2 { border-top:1px solid var(--borda); padding-top:10px; }
.q-rod-l2 .q-rod-end { flex:1 1 260px; }
.q-rod-l2 .q-rod-mais { border-top:0; padding-top:0; flex:0 1 auto; gap:4px 16px; }
.q-rod-l2 .q-rod-mais details[open] { flex:1 1 100%; }
@media (max-width:599px) {
  .q-rod { width:100%; border-radius:18px 18px 0 0; }
  .q-rod-l1 .q-rod-redes { margin-left:0; }
  .q-rod-l2 .q-rod-mais { flex:1 1 100%; }
}
