/* NexPedidos — cardápio público (M7). Mobile-first, fundo claro.
   A cor de AÇÃO é a da loja: o JS injeta --cor / --cor-suave / --cor-escura em runtime
   a partir de `loja.cor` da API. O resto da paleta é fixo — loja escolhe o acento, não
   o tema inteiro (cor de marca ruim não pode deixar o cardápio ilegível). */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --cor: #e63946;
  --cor-suave: #e6394614;
  --cor-escura: #c92a37;
  --txt: #2b2b2b;
  --txt-2: #717171;
  --linha: #ececec;
  --fundo: #f2f3f5;
  --verde: #1f9e54;
  color-scheme: light;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--fundo);
  color: var(--txt);
  font-size: 15px;
  line-height: 1.45;
  /* nenhuma tela pode rolar de lado no celular; o scroll horizontal permitido é o
     dos chips de categoria, que é interno ao próprio elemento */
  overflow-x: hidden;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  min-height: 100dvh;
  box-shadow: 0 0 40px rgba(0, 0, 0, .07);
}

.view { min-height: 100dvh; padding-bottom: 120px; }
[hidden] { display: none !important; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

/* ---- carregando / erro ---- */
.centro { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 0 24px; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--linha); border-top-color: var(--cor);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.erro-boot { text-align: center; color: var(--txt-2); font-size: 14px; }
.erro-boot strong { display: block; color: var(--txt); font-size: 16px; margin-bottom: 6px; }

/* ---- avisos (topo das telas) ---- */
.aviso {
  margin: 12px 16px 0; padding: 12px 14px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.45;
}
.aviso-fechado { background: #fdf1f2; color: #b02a37; font-weight: 600; }
.aviso-mudou { background: #fff7e8; color: #7a4a05; }
.aviso-mudou strong { display: block; margin-bottom: 3px; }
.aviso-mudou ul { margin: 0; padding-left: 18px; }
.aviso-info { background: #eef4ff; color: #21457a; }
/* envio que não deu resposta: o pedido PODE existir. Mais forte que o aviso amarelo
   porque a decisão errada aqui gera pedido em dobro na cozinha. */
.aviso-atencao { background: #fff3e0; color: #7a3d05; border: 1.5px solid #f0b970; }
.aviso-atencao strong { display: block; margin-bottom: 4px; }
.aviso-acoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn-mini {
  min-height: 44px; padding: 10px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 700; background: #fff; color: var(--txt);
  border: 1.5px solid #e0c39a;
}
.btn-mini.forte { background: #b02a37; color: #fff; border-color: #b02a37; }

/* ---- tela de entrada ---- */
#view-inicio { display: flex; flex-direction: column; padding-bottom: 40px; }
.ini-capa { height: 150px; background: linear-gradient(135deg, var(--cor), var(--cor-escura)); }
.ini-topo { padding: 0 20px; margin-top: -52px; text-align: center; position: relative; z-index: 1; }
.ini-logo {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 12px;
  background: #fff; color: var(--cor);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 800; overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
  border: 4px solid #fff;
}
.ini-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ini-topo h1 { font-size: 23px; font-weight: 800; letter-spacing: -.4px; }
.ini-meta {
  font-size: 13px; color: var(--txt-2); margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
}
.ini-pill { font-weight: 700; padding: 3px 10px; border-radius: 20px; font-size: 12.5px; }
.ini-pill.aberto { color: var(--verde); background: #1f9e5414; }
.ini-pill.fechado { color: #b02a37; background: #b02a3714; }
.ini-slogan { font-size: 14px; color: var(--txt-2); margin-top: 8px; }

.ini-acoes { padding: 22px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.ini-btn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 17px 16px; border-radius: 14px; text-align: left; text-decoration: none;
  background: #fff; color: var(--txt); border: 1.5px solid var(--linha);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  transition: transform .12s ease;
}
.ini-btn:active { transform: scale(.985); }
.ini-btn .ini-ic { font-size: 26px; line-height: 1; flex-shrink: 0; }
.ini-btn .ini-txt { flex: 1; min-width: 0; }
.ini-btn .ini-txt strong { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: .3px; }
.ini-btn .ini-txt small { display: block; font-size: 12.5px; color: var(--txt-2); margin-top: 2px; }
/* a seta serve a mais de uma tela (entrada e lista de pedidos): as medidas ficam na
   PRÓPRIA classe. Escopadas em .ini-btn, o mesmo SVG saía sem tamanho na outra tela */
.ini-seta { width: 20px; height: 20px; flex-shrink: 0; color: var(--txt-2); }
.ini-seta svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.ini-btn.primaria {
  background: var(--cor); color: #fff; border-color: var(--cor);
  box-shadow: 0 6px 18px var(--cor-suave), 0 3px 10px rgba(0, 0, 0, .12);
}
.ini-btn.primaria .ini-txt small { color: rgba(255, 255, 255, .88); }
.ini-btn.primaria .ini-seta { color: rgba(255, 255, 255, .9); }
.ini-btn.primaria:active { background: var(--cor-escura); }
#ini-rodape { margin-top: auto; padding-top: 34px; }

/* ---- cardápio: capa + card da loja ---- */
.capa { height: 110px; background: linear-gradient(135deg, var(--cor), var(--cor-escura)); position: relative; }
/* elemento posicionado pinta acima de irmão estático: sem z-index próprio a capa
   cobre o nome da loja (defeito real corrigido no NexDelivery em 18/08) */
.loja-wrap { padding: 0 16px; margin-top: -44px; position: relative; z-index: 1; }
.loja-card {
  background: #fff; border-radius: 14px; padding: 14px;
  display: flex; gap: 12px; align-items: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}
.loja-logo {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--cor-suave); color: var(--cor);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; overflow: hidden;
}
.loja-logo img { width: 100%; height: 100%; object-fit: cover; }
.loja-info { min-width: 0; }
.loja-info h1 { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.loja-meta { font-size: 13px; color: var(--txt-2); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.badge-aberto { color: var(--verde); font-weight: 700; }
.badge-fechado { color: #b02a37; font-weight: 700; }
.loja-slogan { font-size: 13px; color: var(--txt-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.capa-pill {
  position: absolute; top: 12px; right: 14px;
  background: rgba(255, 255, 255, .94); border-radius: 22px;
  padding: 11px 15px; font-size: 12.5px; font-weight: 700; color: var(--txt);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.capa-voltar {
  position: absolute; top: 12px; left: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--txt);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.capa-voltar svg { width: 19px; height: 19px; }

/* ---- busca ---- */
.busca-wrap { position: relative; padding: 14px 16px 4px; }
.busca-wrap > svg {
  position: absolute; left: 30px; top: 50%; transform: translateY(-20%);
  width: 18px; height: 18px; stroke: var(--txt-2); pointer-events: none;
}
/* 16px é obrigatório: abaixo disso o Safari do iPhone dá zoom sozinho ao focar */
#busca {
  width: 100%; border: 0; background: var(--fundo);
  border-radius: 10px; padding: 12px 14px 12px 42px; font-size: 16px; outline: none;
}
#busca::placeholder { color: #9a9a9a; }

/* ---- chips de categoria ---- */
.chips {
  position: sticky; top: 0; z-index: 20;
  background: #fff; display: flex; gap: 8px;
  padding: 10px 16px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--linha);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; padding: 11px 15px; border-radius: 20px; min-height: 42px;
  background: var(--fundo); color: var(--txt-2);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: .15s;
}
.chip.ativo { background: var(--cor); color: #fff; }

/* ---- seções e cards de produto ---- */
.secao { scroll-margin-top: 54px; }
.secao h2 { font-size: 16px; font-weight: 800; padding: 20px 16px 6px; letter-spacing: -.2px; }
.p-card {
  display: flex; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid #f5f5f5; cursor: pointer;
}
.p-card:active { background: #fafafa; }
.p-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-info h3 { font-size: 15px; font-weight: 600; }
.p-desc {
  font-size: 13px; color: var(--txt-2); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p-preco { font-size: 14.5px; font-weight: 600; margin-top: auto; padding-top: 6px; }
.p-foto {
  width: 88px; height: 88px; border-radius: 10px; flex-shrink: 0;
  background: #f7f7f8; display: flex; align-items: center; justify-content: center;
  font-size: 38px; overflow: visible; position: relative;
}
.p-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

/* produto sem preço: aparece no cardápio (o cliente precisa ver que existe),
   mas não tem controle de sacola */
.p-consulta, .p-esgotado {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 6px;
}
.p-consulta { color: var(--txt-2); background: var(--fundo); }
.p-esgotado { color: #b02a37; background: #fdf1f2; }
.p-card.indisponivel { cursor: default; }
.p-card.indisponivel .p-info h3, .p-card.indisponivel .p-desc { color: var(--txt-2); }
.p-card.indisponivel .p-foto img { opacity: .45; filter: grayscale(.6); }
.p-card.indisponivel .p-preco s { color: #a0a0a0; font-weight: 500; }

.sem-resultado { padding: 40px 16px; text-align: center; color: var(--txt-2); font-size: 14px; }
.rodape { padding: 28px 16px 20px; text-align: center; color: #9a9a9a; font-size: 12.5px; }

.vazio { padding: 60px 24px; text-align: center; }
.vazio .emoji { font-size: 54px; }
.vazio p { color: var(--txt-2); margin: 12px 0 20px; }
.vazio strong { color: var(--txt); }

/* ---- controle do card: "+" vira stepper quando o item já está na sacola ---- */
/* a mecânica de carrinho tem que estar VISÍVEL no card: sem isso o cliente precisa
   abrir a sacola só para tirar uma unidade */
.p-ctrl { position: absolute; right: -7px; bottom: -7px; }
.p-add {
  width: 32px; height: 32px; border-radius: 50%; position: relative;
  background: #fff; color: var(--cor); font-size: 20px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  display: flex; align-items: center; justify-content: center;
}
.p-add:active { background: var(--cor); color: #fff; }
/* ⚠️ SEM `overflow: hidden`. Ele recortava o ::after de 44px dos botões e a área do dedo
   do "−" e do "+" voltava a ser o desenho de 32px — medido por elementFromPoint: 38×33,
   com folga ZERO em cima e embaixo, num controle que fica no canto de uma foto. O
   arredondamento das pontas, que era o motivo do `overflow`, vem do próprio botão. */
.p-mini {
  display: flex; align-items: center; background: #fff;
  border-radius: 16px; box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  height: 32px;
}
.p-mini button {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cor); font-size: 19px; font-weight: 700; line-height: 1;
  position: relative;
}
.p-mini button:first-child { border-radius: 16px 0 0 16px; }
.p-mini button:last-child { border-radius: 0 16px 16px 0; }
.p-mini button:active { background: var(--cor-suave); }
.p-mini button svg { width: 15px; height: 15px; stroke: var(--cor); fill: none; }
.p-mini span { min-width: 20px; text-align: center; font-size: 14px; font-weight: 700; color: var(--txt); }
/* o desenho é pequeno de propósito (cabe no canto da foto); a ÁREA DO DEDO é esticada
   para 44px por pseudo-elemento, sem mexer no layout */
.p-add::after, .p-mini button::after, .sheet-fechar::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* ⚠️ Dentro da pílula os dois botões são vizinhos, então 44px de largura em cada um
   invadiria o número do meio e o toque nele viraria "+1" sem querer. A altura vai aos
   44px (era essa a folga que faltava) e a largura cresce só para FORA da pílula. */
.p-mini button::after { height: 44px; width: 40px; }
.p-mini button:first-child::after { transform: translate(-60%, -50%); }
.p-mini button:last-child::after { transform: translate(-40%, -50%); }

/* ---- header de view interna ---- */
.view-header {
  position: sticky; top: 0; z-index: 20;
  background: #fff; display: flex; align-items: center; gap: 4px;
  padding: 10px 12px; border-bottom: 1px solid var(--linha);
}
.view-header h2 { font-size: 16px; font-weight: 700; flex: 1; text-align: center; }
.header-vazio { width: 44px; flex-shrink: 0; }
.btn-voltar {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--txt); flex-shrink: 0;
}
.btn-voltar:active { background: var(--fundo); }
.btn-voltar svg { width: 22px; height: 22px; }
.link-topo { color: var(--cor); font-size: 13.5px; font-weight: 600; padding: 12px 8px; min-height: 44px; }

/* ---- sacola ---- */
.s-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f5f5f5; align-items: flex-start; }
.s-info { flex: 1; min-width: 0; }
.s-nome { font-size: 14.5px; font-weight: 600; }
.s-obs { font-size: 12.5px; color: var(--txt-2); margin-top: 2px; }
.s-preco { font-size: 14px; font-weight: 600; margin-top: 4px; }
.add-mais { display: block; padding: 16px; color: var(--cor); font-size: 14px; font-weight: 600; min-height: 44px; }

.stepper {
  display: flex; align-items: center; border: 1.5px solid var(--linha);
  border-radius: 9px; overflow: hidden; flex-shrink: 0; background: #fff;
}
.stepper button {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--cor); font-size: 20px; font-weight: 600;
}
.stepper button:disabled { color: #ccc; }
.stepper span { min-width: 28px; text-align: center; font-size: 14.5px; font-weight: 600; }
.stepper svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
.stepper.mini button { width: 40px; height: 40px; font-size: 17px; }
.stepper.mini svg { width: 15px; height: 15px; }

/* ---- blocos / formulários ---- */
.bloco { padding: 18px 16px; border-bottom: 8px solid var(--fundo); }
.bloco:last-of-type { border-bottom: 0; }
.bloco h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.campo { display: block; margin-bottom: 12px; }
.campo > span { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px; }
.campo input, .campo textarea {
  width: 100%; border: 1.5px solid #dcdcdc; border-radius: 9px;
  padding: 12px; font-size: 16px; background: #fff; outline: none; transition: border-color .15s;
  appearance: none; -webkit-appearance: none; min-height: 46px;
}
.campo textarea { resize: none; height: 74px; }
.campo input:focus, .campo textarea:focus { border-color: var(--cor); }

.opcoes-linha { display: flex; gap: 10px; }
.opcoes-col { display: flex; flex-direction: column; gap: 10px; }
.opcao {
  flex: 1; display: flex; align-items: center; gap: 10px; min-height: 52px;
  border: 1.5px solid var(--linha); border-radius: 10px;
  padding: 13px 14px; font-size: 14.5px; font-weight: 600; text-align: left;
  background: #fff; transition: .15s;
}
.opcao .op-emoji { font-size: 20px; }
.opcao .op-sub { display: block; font-size: 12px; color: var(--txt-2); font-weight: 500; margin-top: 1px; }
.opcao.ativa { border-color: var(--cor); background: var(--cor-suave); }
.opcao.bloqueada { opacity: .55; cursor: not-allowed; }
.opcao .radio {
  margin-left: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #cfcfcf; flex-shrink: 0; position: relative;
}
.opcao.ativa .radio { border-color: var(--cor); }
.opcao.ativa .radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--cor); }

.resumo-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--txt-2); padding: 3px 0; }
.resumo-linha.total { font-size: 15.5px; font-weight: 700; color: var(--txt); padding-top: 8px; }
.retirada-box { font-size: 13.5px; color: var(--txt-2); line-height: 1.5; }
.retirada-box strong { color: var(--txt); }

/* ---- M11: endereço e taxa de entrega ----
   Os quatro estados da caixa de frete têm COR PRÓPRIA de propósito: "entregamos",
   "não entregamos", "não deu para calcular" e "a taxa mudou" pedem reações diferentes
   do cliente, e ler as quatro na mesma caixa cinza faz ele tratar tudo como erro. */
.linha-campos { display: flex; gap: 10px; }
.linha-campos .campo { flex: 1 1 0; min-width: 0; }
.linha-campos .campo.cep { flex: 0 0 46%; }
.btn-frete { min-height: 46px; font-size: 14.5px; margin-bottom: 14px; }

.frete-box {
  border: 1.5px solid var(--linha); background: #fafafa; border-radius: 10px;
  padding: 13px 14px; margin-bottom: 14px; font-size: 13.5px; line-height: 1.5;
  /* a barra de ação é fixa no rodapé: sem esta margem, rolar até a caixa pode parar
     com o botão de dentro dela por baixo da barra, e o toque acerta a barra */
  scroll-margin-bottom: 110px;
}
/* o strong SOLTO na caixa e o titulo do estado, e ele ocupa a linha inteira... */
.frete-box > strong { display: block; font-size: 14.5px; color: var(--txt); margin-bottom: 4px; }
.frete-box p { margin-bottom: 6px; color: var(--txt-2); }
/* ...mas dentro de um paragrafo ele e um valor NO MEIO da frase. Com display:block o
   "R$ 6,00" quebrava linha e o ponto final caia sozinho numa terceira linha. */
.frete-box p strong { display: inline; font-size: inherit; color: var(--txt); margin: 0; }
.frete-box p:last-child { margin-bottom: 0; }
.frete-box .btn { margin-top: 10px; }
.frete-box.ok { background: #f2faf5; border-color: #b9e3ca; }
.frete-box.ok > strong { color: #17693a; }
.frete-box.recusa { background: #fdf1f2; border-color: #f0c2c6; }
.frete-box.recusa > strong { color: #b02a37; }
.frete-box.incerto { background: #eef4ff; border-color: #c3d6f5; }
.frete-box.incerto > strong { color: #21457a; }
.frete-box.atencao { background: #fff3e0; border-color: #f0b970; }
.frete-box.atencao > strong { color: #7a3d05; }
.frete-box.carregando { display: flex; align-items: center; gap: 10px; color: var(--txt-2); }

/* ⚠️ Especificidade, não !important: `.frete-box p` já pinta todo parágrafo de dentro,
   e uma classe solta (0,1,0) perde para ela (0,1,1). Cada exceção casa o pai. */
.frete-box p.frete-end { color: var(--txt); font-weight: 600; }
.frete-box p.frete-nota { font-size: 12.5px; }
.frete-box p.frete-nota.alerta { color: #b02a37; font-weight: 600; }
.frete-box p.nota-frete-gratis { color: var(--txt); }
.frete-box p.nota-frete-gratis.alcancado { color: #17693a; }

.frete-linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; margin-top: 8px; color: var(--txt-2);
  border-top: 1px solid rgba(0, 0, 0, .08);
}
.frete-box .frete-linha strong { display: inline; margin: 0; font-size: 15px; color: var(--txt); }
.frete-linha em { font-style: normal; font-size: 12.5px; }
.frete-box .frete-linha.total strong { font-size: 16.5px; font-weight: 800; }

.gratis { color: var(--verde); font-weight: 700; }
.gratis s { color: var(--txt-2); font-weight: 500; margin-left: 5px; }

/* ⭐ o empurrão do frete grátis: com falta > 0 fala do que FALTA; só depois de alcançado
   é que a palavra "grátis" aparece — anunciar antes é prometer o que não vale ainda */
.nota-frete-gratis {
  margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  font-size: 13px; line-height: 1.45; background: var(--cor-suave); color: var(--txt);
}
.nota-frete-gratis strong { font-weight: 800; }
.nota-frete-gratis.alcancado { background: #1f9e5414; color: #17693a; }

.spinner.mini { width: 18px; height: 18px; border-width: 2px; flex-shrink: 0; }

/* ---- barra fixa inferior ---- */
#barra-acao {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px; z-index: 30;
  background: #fff; border-top: 1px solid var(--linha);
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
}
.btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cor); color: #fff; border-radius: 9px; min-height: 50px;
  padding: 15px 16px; font-size: 15px; font-weight: 700; transition: .15s;
}
.btn:active { background: var(--cor-escura); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.tres-partes { justify-content: space-between; }
.btn .badge {
  background: rgba(255, 255, 255, .25); border-radius: 6px;
  min-width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; padding: 0 6px;
}
.btn-outline { background: #fff; color: var(--cor); border: 1.5px solid var(--cor); }
.btn-outline:active { background: var(--cor-suave); }
.barra-nota { font-size: 12px; color: var(--txt-2); text-align: center; padding-bottom: 8px; }
.barra-nota.alerta { color: #b02a37; font-weight: 600; }

/* ---- sheet do produto ---- */
#overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; opacity: 0; transition: opacity .25s; }
#overlay.aberto { opacity: 1; }
#sheet {
  position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 102%);
  width: 100%; max-width: 520px; max-height: 90dvh;
  background: #fff; border-radius: 18px 18px 0 0; z-index: 50;
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.2, .8, .25, 1);
}
#sheet.aberto { transform: translate(-50%, 0); }
.sheet-media {
  height: 180px; background: #f7f7f8; border-radius: 18px 18px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 72px; position: relative; flex-shrink: 0; overflow: hidden;
}
.sheet-media img { width: 100%; height: 100%; object-fit: cover; }
.sheet-fechar {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  display: flex; align-items: center; justify-content: center;
}
.sheet-fechar svg { width: 16px; height: 16px; stroke: #2b2b2b; fill: none; }
.sheet-corpo { padding: 16px; overflow-y: auto; }
.sheet-corpo h3 { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.sheet-corpo .p-desc { -webkit-line-clamp: unset; margin-top: 6px; }
.sheet-preco { font-size: 16px; font-weight: 700; margin: 10px 0 16px; }
.sheet-footer {
  display: flex; gap: 12px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha); flex-shrink: 0;
}
.sheet-footer .btn { flex: 1; justify-content: space-between; }

/* ---- observação por item (dentro da linha da sacola) ---- */
.link-acao {
  color: var(--cor); font-size: 13px; font-weight: 600;
  padding: 10px 0; min-height: 44px; text-align: left;
}
.link-acao.forte { font-weight: 700; }
.s-obs-edit { margin-top: 6px; }
.s-obs-edit textarea {
  width: 100%; border: 1.5px solid #dcdcdc; border-radius: 9px;
  padding: 10px; font-size: 16px; height: 62px; resize: none; outline: none;
  appearance: none; -webkit-appearance: none;
}
.s-obs-edit textarea:focus { border-color: var(--cor); }
.s-obs-acoes { display: flex; gap: 14px; align-items: center; }
.nota-campo { font-size: 12.5px; color: var(--txt-2); margin-top: 6px; line-height: 1.45; }
.nota-campo.alerta { color: #b02a37; font-weight: 600; }
.nota-rodape { font-size: 12.5px; color: var(--txt-2); padding: 16px; text-align: center; }
.campo.desligado > span, .campo.desligado input { opacity: .5; }

/* "não preciso de troco": alvo de 44px na linha inteira, não só na caixinha */
.check-linha {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 46px; padding: 10px 2px; font-size: 14px; font-weight: 600; text-align: left;
}
.check-caixa {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid #cfcfcf;
  flex-shrink: 0; position: relative;
}
.check-linha.marcado .check-caixa { border-color: var(--cor); background: var(--cor); }
.check-linha.marcado .check-caixa::after {
  content: ''; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---- resumo com itens (checkout e acompanhamento) ---- */
.resumo-linha.item { color: var(--txt); align-items: flex-start; }
.resumo-obs { display: block; font-size: 12px; color: var(--txt-2); font-style: normal; }

/* ---- meus pedidos ---- */
.ped-linha {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 15px 16px; border-bottom: 1px solid #f5f5f5; text-align: left; min-height: 62px;
}
.ped-linha:active { background: #fafafa; }
.ped-linha-info { flex: 1; min-width: 0; }
.ped-linha-info strong { display: block; font-size: 15px; font-weight: 700; }
.ped-linha-info small { display: block; font-size: 12.5px; color: var(--txt-2); margin-top: 2px; }
.ped-tag {
  font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 20px;
  background: var(--cor-suave); color: var(--cor); white-space: nowrap;
  max-width: 40%; overflow: hidden; text-overflow: ellipsis;
}
.ped-tag.final { background: #1f9e5414; color: var(--verde); }
.ped-tag.vazio { background: var(--fundo); color: var(--txt-2); }

/* ---- acompanhamento ---- */
/* o CÓDIGO é o que a pessoa fala no balcão: é o maior elemento da tela, com espaçamento
   entre letras para não ler 0 como O nem 1 como I em voz alta */
.ped-topo { padding: 26px 16px 22px; text-align: center; background: var(--cor-suave); }
.ped-rotulo { font-size: 12.5px; font-weight: 600; color: var(--txt-2); text-transform: uppercase; letter-spacing: .8px; }
.ped-codigo {
  font-size: 42px; font-weight: 800; letter-spacing: 3px; line-height: 1.1;
  margin-top: 4px; color: var(--cor);
}
.ped-quando { font-size: 13px; color: var(--txt-2); margin-top: 6px; }
.ped-topo.cancelado { background: #fdf1f2; }
.ped-topo.cancelado .ped-codigo { color: #b02a37; text-decoration: line-through; }

.ped-trilha { list-style: none; padding: 18px 16px; border-bottom: 8px solid var(--fundo); }
.ped-trilha li {
  display: flex; align-items: center; gap: 12px; position: relative;
  padding: 7px 0; color: var(--txt-2); font-size: 14px;
}
/* linha ligando as bolhas: pseudo-elemento no item, não borda do <ol>, senão sobra
   rabicho depois da última etapa */
.ped-trilha li:not(:last-child)::before {
  content: ''; position: absolute; left: 12px; top: 31px; bottom: -3px;
  width: 2px; background: var(--linha);
}
.ped-trilha li.feita:not(:last-child)::before { background: var(--verde); }
.ped-bolha {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: var(--fundo); color: #b9b9b9;
  border: 2px solid var(--linha);
}
.ped-trilha li.feita .ped-bolha { background: var(--verde); border-color: var(--verde); color: #fff; }
.ped-trilha li.agora .ped-bolha {
  background: var(--cor); border-color: var(--cor); color: #fff;
  box-shadow: 0 0 0 5px var(--cor-suave);
}
.ped-trilha li.feita { color: var(--txt); }
.ped-trilha li.agora .ped-etapa-nome { font-weight: 800; color: var(--txt); font-size: 15.5px; }

.ped-etapa-unica {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 16px; border-bottom: 8px solid var(--fundo);
}
.ped-etapa-unica strong { display: block; font-size: 16px; font-weight: 800; }
.ped-etapa-unica small { display: block; font-size: 13px; color: var(--txt-2); margin-top: 2px; }
.ped-etapa-unica .ped-bolha { background: var(--cor); border-color: var(--cor); color: #fff; }
.ped-etapa-unica.cancelado .ped-bolha { background: #b02a37; border-color: #b02a37; }
.ped-etapa-unica.cancelado strong { color: #b02a37; }
/* 'nao_entregue': o pedido existiu e foi feito, só não chegou. Âmbar e não vermelho para
   não se confundir com o cancelado, que é o outro fim e tem outra conversa com a loja. */
.ped-etapa-unica.falhou .ped-bolha { background: #a15c00; border-color: #a15c00; }
.ped-etapa-unica.falhou strong { color: #a15c00; }

/* Faixa de ação dentro de um .bloco — mesmo desenho de .pix-acoes, sem o nome do PIX.
   `min-height` de 48px porque o único botão daqui é a saída de emergência do cliente. */
.bloco-acoes { display: flex; gap: 8px; margin-top: 12px; }
.bloco-acoes .btn { flex: 1; min-height: 48px; }

/* ---- toast ---- */
#toast {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: #2b2b2b; color: #fff; padding: 11px 20px; border-radius: 24px;
  font-size: 13.5px; font-weight: 500; z-index: 99; opacity: 0;
  transition: .25s; pointer-events: none; max-width: 88%; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Confirmacao do numero no checkout. Nasce vazio e sem altura: aparecer e sumir a cada
   tecla empurraria o botao de fechar pedido pra baixo no meio da digitacao. */
.ck-eco{font-size:12.5px;line-height:1.4;color:var(--txt-2);margin:-6px 0 10px;min-height:0}
.ck-eco.on{min-height:18px}

/* ---- PIX na tela de acompanhamento ---- */
/* O bloco tem borda na cor da loja porque e a unica acao PENDENTE da tela: tudo o mais
   ali e informacao, so isto o cliente precisa fazer. */
.pix-bloco{border:1px solid var(--cor);background:var(--cor-suave)}
.pix-ajuda{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--txt-2)}
/* Monoespacado e quebra por caractere: o BR Code nao tem espaco nenhum, entao sem o
   `break-all` a linha estoura a tela e vira scroll horizontal no celular. */
.pix-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.55;
  color:var(--txt);background:#fff;border:1px solid var(--linha);border-radius:10px;
  padding:11px 12px;word-break:break-all;user-select:all;-webkit-user-select:all;max-height:132px;overflow:auto}
.pix-acoes{display:flex;gap:8px;margin-top:12px}
/* 48px e o alvo de toque: quem esta pagando faz isso com uma mao so, em pe. */
.pix-acoes .btn{flex:1;min-height:48px}
.pix-qr{display:flex;justify-content:center;margin-top:14px}
.pix-qr[hidden]{display:none}
.pix-qr img{width:224px;height:224px;background:#fff;border-radius:12px;padding:10px;border:1px solid var(--linha)}
@media (max-width:360px){.pix-acoes{flex-direction:column}}

/* ---- M19: grupos de opcao na folha do produto ---- */
.og{border-top:1px solid var(--linha);margin-top:16px;padding-top:14px}
.og-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.og-nome{font-size:15px;font-weight:700;color:var(--txt)}
/* "obrigatorio" precisa saltar: e a diferenca entre o botao habilitar ou nao. */
.og-obr{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:var(--cor);color:#fff;border-radius:5px;padding:2px 6px}
.og-opc{font-size:11.5px;color:var(--txt-2)}
.og-regra{margin:3px 0 9px;font-size:12.5px;color:var(--txt-2)}
/* Linha inteira clicavel com 52px: no celular o cliente toca com o polegar, em pe. */
.og-item{display:flex;align-items:center;gap:11px;width:100%;min-height:52px;padding:9px 12px;
  background:#fff;border:1px solid var(--linha);border-radius:11px;margin-bottom:7px;
  font-size:14.5px;color:var(--txt);text-align:left;cursor:pointer;font-family:inherit}
.og-item.on{border-color:var(--cor);background:var(--cor-suave)}
.og-marca{width:20px;height:20px;border-radius:50%;border:2px solid #cfcfcf;flex-shrink:0;
  position:relative;transition:border-color .12s}
.og-item.on .og-marca{border-color:var(--cor)}
.og-item.on .og-marca::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--cor)}
.og-item-nome{flex:1;min-width:0}
.og-extra{font-size:13.5px;font-weight:600;color:var(--txt-2);flex-shrink:0}
.og-item.on .og-extra{color:var(--cor-escura)}
/* Esgotado fica VISIVEL e riscado: quem some sem explicacao faz o cliente achar que o
   cardapio esta errado, e o esgotado de hoje volta amanha. */
.og-esg{opacity:.5;cursor:not-allowed}
.og-esg .og-item-nome{text-decoration:line-through}
.og-esg-txt{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--cor);
  text-decoration:none;display:inline-block;margin-left:4px}
/* Botao apagado precisa PARECER apagado, senao o cliente fica tocando sem resposta. */
#sheet-add:disabled{opacity:.5;cursor:not-allowed}
.s-opc{margin:2px 0 0;font-size:12.5px;color:var(--txt-2);line-height:1.4}
.p-apartir{font-size:11.5px;font-weight:500;color:var(--txt-2)}

/* ---- voltar ao topo ---- */
/* O cardápio do mercadinho tem 62.129px de rolagem (73 telas de celular). Sem atalho,
   voltar à busca é arrastar o dedo até desistir. Fica acima da barra de ação quando ela
   existe — botão flutuante por baixo de outro botão é o mesmo que não existir. */
.btn-topo {
  position: fixed; right: 14px; z-index: 29;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--txt);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .22);
  border: 1px solid var(--linha);
}
.btn-topo svg { width: 22px; height: 22px; }
.btn-topo:active { background: var(--fundo); }
body.tem-barra .btn-topo { bottom: calc(92px + env(safe-area-inset-bottom)); }
/* o max-width do #app é 520px: no desktop o botão acompanha a coluna, não a janela */
@media (min-width: 552px) { .btn-topo { right: calc(50% - 260px + 14px); } }

/* ---- linha da sacola que ficou sem escolha obrigatória ---- */
/* A opção que o cliente escolheu esgotou e saiu da linha. O servidor recusaria o pedido
   com 400; aqui ele vê ANTES, com o botão que conserta ao lado. */
.s-item.s-pendente { background: #fff8ec; border-left: 3px solid #e0a13a; }
.s-falta { font-size: 12.5px; font-weight: 700; color: #8a5300; margin-top: 3px; }

/* ---- ações da linha da sacola ---- */
/* Dois `.link-acao` seguidos são inline-block e encostam um no outro — "Trocar
   opções✎ Editar observação" numa palavra só, com os dois alvos de dedo colados. */
/* `gap` só na horizontal: cada `.link-acao` já tem 44px de altura, e um row-gap somava
   mais um vão quando a faixa quebrava — 92px de ação para uma linha de sacola. */
.s-acoes { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: center; }

/* ---- link que se comporta como botão (WhatsApp da loja) ---- */
/* ⚠️ Só existe quando `loja.whatsapp` veio preenchido: sem número, nenhuma tela escreve
   "fale com a loja". Mandar falar sem dar por onde é beco com jeito de ajuda.
   Verde do WhatsApp, e não a cor da loja: é a ação que sai do site, e o cliente reconhece
   para onde vai antes de ler. */
/* ⚠️ Especificidade, não !important: `.btn-mini.forte` e `.btn` já pintam fundo (0,2,0 e
   0,1,0). Cada seletor daqui prefixa com `a` para ganhar de propósito — uma classe solta
   perderia e o botão saía vermelho dentro do aviso azul. */
.btn-wa { text-decoration: none; }
a.btn.btn-wa, a.btn-mini.btn-wa, a.ini-btn.ini-wa {
  background: var(--verde); color: #fff; border-color: var(--verde);
}
a.btn.btn-wa:active, a.btn-mini.btn-wa:active, a.ini-btn.ini-wa:active {
  background: #17693a; border-color: #17693a;
}
a.btn.btn-wa { display: flex; }
a.btn-mini.btn-wa { display: inline-flex; align-items: center; justify-content: center; }
a.ini-btn.ini-wa { justify-content: center; font-size: 14.5px; font-weight: 700; }

/* aviso de catálogo (loja sem nada comprável): mesmo lugar dos outros avisos do topo */
#nx-catalogo-aviso strong { display: block; margin-bottom: 3px; font-size: 14.5px; }
#nx-catalogo-aviso { line-height: 1.5; }