/* (v189) O jeito de app dos sites das lojas no celular (templates/_app_celular.html, static/js/app-celular.js):
   a barra de baixo da Vitrine e do catálogo, o menu ☰ em quadradinhos e "Meus pedidos". As cores saem do tema da loja
   (tema.css); nos layouts de página única, das fichas de cor deles (--i-*), claras ou escuras. */
body {
  --app-papel: var(--i-papel, var(--cor-fundo, #FFFFFF));
  --app-tinta: var(--i-tinta, var(--cor-texto, #16181B));
  --app-tinta-2: var(--i-tinta-3, var(--cor-texto-suave, #5B6470));
  --app-linha: var(--i-linha-forte, var(--cor-borda, #E2E2E2));
  --app-marca: var(--i-marca, var(--cor-marca-texto, #1F6FEB));
  --app-azulejo: var(--i-alt, var(--cor-superficie, #F3F3F3));
  --app-botao: var(--i-botao, var(--cor-botao, #1F6FEB));
  --app-sobre-botao: var(--i-sobre-botao, var(--cor-sobre-botao, #FFFFFF));
}
.app-barra, .app-menu-botao { display: none; }
.app-barra .ic, .app-folha .ic, .app-menu-botao .ic {
  flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.app-barra .ic .ic-cheio, .app-folha .ic .ic-cheio { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------ a barra de baixo e o ☰ (só no celular) */
@media (max-width: 720px) {
  .app-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); align-items: end;
    padding: 6px 6px max(8px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
    border-top: 1px solid var(--app-linha); background: color-mix(in oklab, var(--app-papel) 93%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 -14px 34px -24px rgba(0, 0, 0, .5);
  }
  .app-aba {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0;
    height: 54px; padding: 0; border: 0; background: none; color: var(--app-tinta-2); font: inherit; font-size: 11px;
    font-weight: 600; line-height: 1.1; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .app-aba[hidden] { display: none; }
  .app-aba[aria-current] { color: var(--app-marca); }
  .app-aba span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-aba:active .ic { transform: scale(.92); }
  .app-meio {
    position: relative; display: grid; place-items: center; justify-self: center; width: 62px; height: 62px;
    margin-top: -26px; border-radius: 50%; background: var(--app-botao); color: var(--app-sobre-botao);
    border: 4px solid var(--app-papel); box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--app-botao) 70%, transparent);
    -webkit-tap-highlight-color: transparent;
  }
  .app-meio:active { transform: scale(.95); }
  .app-contador {
    position: absolute; top: -4px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--app-tinta); color: var(--app-papel); font-size: 11px; font-weight: 800; font-style: normal;
    line-height: 20px; text-align: center;
  }
  .app-contador[hidden] { display: none; }
  /* O rodapé continua por trás da barra (as pontas dela são arredondadas): o espaço da barra fica nele, e não no
     fundo da página. Sem rodapé (ou navegador sem :has), o espaço fica no fim da página. */
  body.com-app-barra { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.com-app-barra:has(.rodape) { padding-bottom: 0; }
  body.com-app-barra .rodape { padding-bottom: calc(34px + 72px + env(safe-area-inset-bottom)); }
  /* O WhatsApp está na barra: o botão flutuante sai. */
  body.com-app-barra .whats-flutua { display: none; }
  /* No catálogo, a barra da sacola ("1 item · R$ 30,00") fica logo acima da barra de baixo, sem encostar no botão
     do meio (que sobe 26px): a barra tem 6 + 54 + max(8px, a faixa do iPhone); mais 26 do botão e 8 de folga. */
  body.com-app-barra .barra-sacola {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 94px); padding: 0 14px;
    background: none; pointer-events: none;
  }
  body.com-app-barra .barra-sacola .botao-sacola { pointer-events: auto; }
  body.com-app-barra:has(.barra-sacola:not([hidden])):not(:has(.rodape)) { padding-bottom: calc(max(8px, env(safe-area-inset-bottom)) + 170px); }
  body.com-app-barra:has(.barra-sacola:not([hidden])) .rodape { padding-bottom: calc(34px + 160px + max(8px, env(safe-area-inset-bottom))); }
  /* O aviso que some ("Adicionado") sobe junto, para não ficar atrás da barra. */
  body.com-app-barra .capp-toast { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 102px); }
  body.com-app-barra:has(.barra-sacola:not([hidden])) .capp-toast { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 168px); }
  /* Com a tela do item, a sacola ou uma folha aberta (por cima de tudo), a barra sai da frente. */
  body:has(.folha:not([hidden])) .app-barra, body:has(.app-folha:not([hidden])) .app-barra,
  body:has(.folha:not([hidden])) .inst-barra-app { display: none; }

  .app-menu-botao {
    display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
    border-radius: 999px; border: 1px solid var(--app-linha); background: transparent; color: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .app-menu-botao:active { transform: scale(.95); }
}
.app-menu-botao:focus-visible, .app-aba:focus-visible, .app-meio:focus-visible, .app-folha a:focus-visible,
.app-folha-fechar:focus-visible { outline: 3px solid var(--app-marca); outline-offset: 2px; }

/* ------------------------------------------------------------ as folhas (o menu e "Meus pedidos") */
.app-folha {
  position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; justify-items: center;
  background: rgba(10, 12, 16, .46); -webkit-tap-highlight-color: transparent;
}
.app-folha[hidden] { display: none; }
.app-folha-caixa {
  width: 100%; max-height: min(86vh, 640px); overflow: auto; overscroll-behavior: contain;
  padding: 8px 16px max(18px, env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
  background: var(--app-papel); color: var(--app-tinta); box-shadow: 0 -22px 50px -24px rgba(0, 0, 0, .55);
  animation: app-sobe .22s ease-out;
}
@keyframes app-sobe { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.app-folha-alca { display: block; width: 42px; height: 5px; margin: 2px auto 10px; border-radius: 999px; background: var(--app-linha); }
.app-folha-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.app-folha-topo h2 { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: var(--app-tinta); }
/* A letra do título é a do layout (no Galpão, a de cartaz), mas no tamanho de título de folha. */
.app-folha .app-folha-topo .app-folha-titulo { margin: 0; font-size: 1.25rem; line-height: 1.2; padding: 0; color: var(--app-tinta); }
.app-folha-fechar {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 999px;
  border: 1px solid var(--app-linha); background: transparent; color: var(--app-tinta); cursor: pointer;
}
.app-folha-nota { margin: -4px 2px 12px; font-size: .86rem; line-height: 1.45; color: var(--app-tinta-2); }

/* O menu: quadradinhos, 3 por linha. */
.app-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.app-grade a {
  display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 96px; padding: 14px 6px;
  border-radius: 18px; background: var(--app-azulejo); color: var(--app-tinta); text-align: center; text-decoration: none;
  font-size: .82rem; font-weight: 700; line-height: 1.2; -webkit-tap-highlight-color: transparent;
}
.app-grade a:active { transform: scale(.97); }
.app-grade-icone {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  background: var(--app-papel); color: var(--app-marca);
}
.app-grade-nome { overflow-wrap: anywhere; }

/* Meus pedidos. */
.app-pedidos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.app-pedidos a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 18px; background: var(--app-azulejo); color: var(--app-tinta); text-decoration: none;
}
.app-pedidos .app-pedido-icone {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--app-papel);
  color: var(--app-marca);
}
.app-pedidos b { display: block; font-size: .95rem; font-weight: 800; }
.app-pedidos small { display: block; margin-top: 2px; font-size: .82rem; color: var(--app-tinta-2); }
.app-pedidos .app-pedido-ir { color: var(--app-tinta-2); }
.app-pedidos-vazio { margin: 4px 2px 6px; padding: 18px 16px; border-radius: 18px; background: var(--app-azulejo);
  font-size: .9rem; line-height: 1.45; color: var(--app-tinta-2); text-align: center; }
.app-pedidos-vazio[hidden] { display: none; }

/* No computador as folhas abrem no meio da tela (o "Meus pedidos" do menu de cima). */
@media (min-width: 721px) {
  .app-folha { align-items: center; padding: 24px; }
  .app-folha-caixa { width: min(520px, 100%); border-radius: 26px; padding: 18px 22px 22px; }
  .app-folha-alca { display: none; }
}
/* O link "Meus pedidos" do menu de cima (computador): só com pedido feito neste navegador. */
[data-app-pedidos-link][hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .app-folha-caixa { animation: none; } }
@media print { .app-barra, .app-folha, .app-menu-botao { display: none !important; } }