/* ============================================================
   CARDÁPIO — sistema de design
   ------------------------------------------------------------
   Só TRÊS cores vêm do painel do lojista: fundo, texto e principal.
   Todo o resto — superfícies, linhas, sombras, realces — é derivado
   delas. Por isso uma loja clara e uma loja escura usam exatamente
   o mesmo CSS, e o próximo cliente escolhe a cara dele sem eu
   escrever uma linha nova.

   O JavaScript mede se o fundo é claro ou escuro e ajusta as
   derivadas: no escuro as superfícies sobem em direção ao branco,
   no claro elas sobem em direção ao papel. É a única coisa que o
   color-mix sozinho não resolve, porque a direção se inverte.
   ============================================================ */

:root {
  /* --- preenchidas pelo JS com as cores da loja --- */
  --fundo: #171311;
  --texto: #FFF8F1;
  --principal: #F47721;

  /* --- derivadas (o JS recalcula conforme claro/escuro) --- */
  --papel: #231D19;           /* superfície dos cards */
  --papel-alto: #2A231F;      /* superfície elevada: modais, barra fixa */
  --linha: rgba(255,255,255,.07);
  --linha-forte: rgba(255,255,255,.13);
  --leve: rgba(255,255,255,.05);
  --fraco: rgba(255,248,241,.62);
  --fraquinho: rgba(255,248,241,.40);
  --realce: rgba(244,119,33,.12);
  --sobre-principal: #1A1411;  /* texto em cima do laranja */

  /* --- espaçamento: uma escala só, sem números soltos --- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e7: 32px; --e8: 40px; --e9: 48px;

  /* --- cantos: cinco valores, não quinze --- */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-full: 999px;

  /* --- elevação: quatro níveis, aplicados com critério --- */
  --s-sm: 0 2px 8px rgba(0,0,0,.14);
  --s-md: 0 8px 24px rgba(0,0,0,.20);
  --s-lg: 0 16px 40px rgba(0,0,0,.28);
  --s-modal: 0 -12px 50px rgba(0,0,0,.45);
  /* brilho na cor da loja: o botão parece aceso, não pintado */
  --s-cor: 0 6px 20px color-mix(in srgb, var(--principal) 34%, transparent);

  --mola: cubic-bezier(.2,.9,.25,1);
  --mola-forte: cubic-bezier(.2,1.5,.4,1);
  --t-rapido: 180ms; --t-medio: 240ms; --t-lento: 320ms;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--texto);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 16px; line-height: 1.5; letter-spacing: -.011em;
  padding-bottom: 112px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* o fundo não é uma chapa lisa: tem um halo discreto no topo */
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--principal) 8%, transparent), transparent 70%),
    var(--fundo);
  background-attachment: fixed;
  min-height: 100dvh;
}

h1, h2, h3 { letter-spacing: -.03em; line-height: 1.16; margin: 0; font-weight: 800; }
.fraco { color: var(--fraco); }
.pequeno { font-size: 13px; }
.centro { min-height: 70dvh; display: grid; place-content: center; justify-items: center; gap: var(--e3); text-align: center; padding: var(--e6); }
.emoji-grande { font-size: 52px; line-height: 1; }

.envolve { max-width: 700px; margin: 0 auto; }

/* ============ ESQUELETO ============ */
.esqueleto-tela { max-width: 700px; margin: 0 auto; padding: var(--e7) var(--e4); }
.esq {
  background: linear-gradient(100deg, var(--leve) 30%, var(--linha-forte) 50%, var(--leve) 70%);
  background-size: 220% 100%; animation: brilha 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes brilha { to { background-position: -220% 0; } }
.esq-logo { width: 84px; height: 84px; border-radius: var(--r-lg); margin: 0 auto var(--e4); }
.esq-titulo { height: 28px; width: 56%; margin: 0 auto var(--e3); }
.esq-sub { height: 14px; width: 74%; margin: 0 auto var(--e6); }
.esq-pilulas { display: flex; gap: var(--e2); margin-bottom: var(--e6); }
.esq-pilulas span { height: 40px; border-radius: var(--r-full); flex: 1; }
.esq-cards { display: flex; flex-direction: column; gap: var(--e3); }
.esq-card {
  background: var(--papel); border-radius: var(--r-lg); padding: var(--e3);
  display: grid; grid-template-columns: 1fr 96px; grid-template-rows: auto auto auto;
  gap: var(--e2) var(--e3); border: 1px solid var(--linha);
}
.esq-card .esq-foto { grid-row: 1 / 4; grid-column: 2; border-radius: var(--r-md); }
.esq-linha { height: 12px; }
.esq-linha.g { height: 17px; width: 60%; }
.esq-linha.p { width: 34%; }

/* ============ CAPA DA LOJA ============ */
.capa { position: relative; padding: var(--e6) var(--e4) var(--e4); overflow: hidden; }
/* a logo vira marca d'água gigante e desfocada ao fundo — dá identidade
   sem precisar de banner que o lojista não tem */
.capa-marca {
  position: absolute; inset: -30% -10% auto; height: 300px; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: blur(46px) saturate(140%); opacity: .34; transform: scale(1.25);
}
.capa-veu {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fundo) 40%, transparent) 0%,
    color-mix(in srgb, var(--fundo) 88%, transparent) 62%,
    var(--fundo) 100%);
}
.capa-conteudo { position: relative; z-index: 2; }

.capa-topo { display: flex; align-items: center; gap: var(--e4); }
.logo-caixa {
  width: 76px; height: 76px; flex-shrink: 0; border-radius: var(--r-lg);
  display: grid; place-items: center; overflow: hidden;
  background: var(--papel-alto);
  border: 1px solid color-mix(in srgb, var(--principal) 32%, transparent);
  box-shadow: var(--s-md), 0 0 24px color-mix(in srgb, var(--principal) 22%, transparent);
}
.logo { width: 100%; height: 100%; object-fit: cover; }
.logo-letra { font-size: 32px; font-weight: 800; color: var(--principal); }

.capa-texto { min-width: 0; }
.capa h1 { font-size: clamp(24px, 6.4vw, 32px); }
.slogan { margin: var(--e1) 0 0; font-size: 14px; color: var(--fraco); }

/* --- fichas de informação: status, tempo, pagamento --- */
.fichas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }
.ficha {
  display: inline-flex; align-items: center; gap: var(--e2);
  padding: 9px 14px; border-radius: var(--r-full);
  background: var(--leve); border: 1px solid var(--linha);
  font-size: 13px; font-weight: 700; color: var(--fraco);
}
.ficha svg { width: 15px; height: 15px; flex-shrink: 0; }
.ficha.aberta { color: #4ade80; border-color: rgba(74,222,128,.28); background: rgba(74,222,128,.10); }
.ficha.fechada { color: #f87171; border-color: rgba(248,113,113,.28); background: rgba(248,113,113,.10); }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ficha.aberta .ponto { animation: pulsaPonto 2.2s ease-in-out infinite; }
@keyframes pulsaPonto {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 6px transparent; }
}

/* --- aviso de loja fechada, com convite a agendar --- */
.aviso {
  display: flex; gap: var(--e3); align-items: flex-start;
  margin: 0 var(--e4) var(--e3); padding: var(--e4);
  border-radius: var(--r-lg); background: var(--papel);
  border: 1px solid var(--linha-forte); font-size: 14px; line-height: 1.55;
}
.aviso.destacado { border-color: color-mix(in srgb, var(--principal) 42%, transparent); background: var(--realce); }
.aviso-icone { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.aviso b { color: var(--texto); }

/* ============ BARRA FIXA ============ */
.barra-fixa {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e4);
  padding-top: calc(var(--e3) + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--fundo) 78%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--linha);
  transform: translateY(-100%); opacity: 0;
  transition: transform var(--t-lento) var(--mola), opacity var(--t-medio) ease;
}
.barra-fixa.vista { transform: none; opacity: 1; }
.barra-fixa strong { font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-logo { width: 30px; height: 30px; border-radius: var(--r-sm); object-fit: cover; background: var(--leve); }

/* ============ BUSCA ============ */
.busca-caixa { position: relative; margin: var(--e4) var(--e4) 0; }
.busca-caixa svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--fraquinho); pointer-events: none;
}
#busca {
  width: 100%; padding: 15px 15px 15px 44px;
  border-radius: var(--r-md); border: 1px solid var(--linha-forte);
  background: var(--papel); color: var(--texto); font: inherit; font-size: 15px;
  transition: border-color var(--t-rapido) ease, box-shadow var(--t-rapido) ease;
}
#busca::placeholder { color: var(--fraquinho); }
#busca:focus {
  outline: none; border-color: var(--principal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--principal) 14%, transparent);
}

/* ============ CATEGORIAS ============ */
.atalhos {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: var(--e2); overflow-x: auto;
  padding: var(--e3) var(--e4);
  background: color-mix(in srgb, var(--fundo) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  scrollbar-width: none; scroll-behavior: smooth;
}
.atalhos::-webkit-scrollbar { display: none; }
.atalhos button {
  flex-shrink: 0; padding: 10px 18px; border-radius: var(--r-full);
  border: 1px solid var(--linha); background: var(--leve);
  color: var(--fraco); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all var(--t-medio) var(--mola);
}
.atalhos button.ativo {
  background: var(--principal); border-color: var(--principal); color: var(--sobre-principal);
  box-shadow: var(--s-cor);
}
.barra-fixa.vista ~ .atalhos { top: calc(54px + env(safe-area-inset-top, 0px)); }

/* ============ CARDÁPIO ============ */
.cardapio { padding: var(--e2) var(--e4) var(--e6); max-width: 700px; margin: 0 auto; }
.categoria { margin-top: var(--e7); scroll-margin-top: 124px; }
.cat-cabeca { margin-bottom: var(--e4); }
.categoria h2 { font-size: clamp(20px, 5.4vw, 24px); }
.categoria .desc-cat { margin: var(--e1) 0 0; font-size: 13.5px; color: var(--fraco); }

.produto {
  position: relative; display: flex; gap: var(--e4); width: 100%; text-align: left;
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--r-lg); padding: var(--e3); margin-bottom: var(--e3);
  box-shadow: var(--s-sm); cursor: pointer; font: inherit; color: inherit;
  transition: transform var(--t-medio) var(--mola), box-shadow var(--t-medio) ease, border-color var(--t-medio) ease;
}
.produto:not(.esgotado):active { transform: scale(.985); }
@media (hover: hover) {
  .produto:not(.esgotado):hover {
    transform: translateY(-3px); box-shadow: var(--s-md);
    border-color: color-mix(in srgb, var(--principal) 34%, transparent);
  }
  .produto:not(.esgotado):hover .produto-foto { transform: scale(1.07); }
}
.produto.esgotado { opacity: .46; cursor: not-allowed; }
/* destaque ganha um fio de luz na cor da loja */
.produto.destaque { border-color: color-mix(in srgb, var(--principal) 40%, transparent); }
.produto.destaque::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--principal) 12%, transparent);
}

.produto-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.produto-nome { font-weight: 800; font-size: 16.5px; margin-bottom: var(--e1); letter-spacing: -.02em; }
.produto-desc {
  font-size: 13.5px; color: var(--fraco); margin: 0 0 var(--e3); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.linha-preco { margin-top: auto; display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.produto-preco { font-weight: 800; font-size: 18px; color: var(--principal); letter-spacing: -.02em; }
.preco-de { font-size: 13px; color: var(--fraquinho); text-decoration: line-through; }
.produto-serve { font-size: 12px; color: var(--fraquinho); font-weight: 600; }

.economia {
  display: inline-block; margin-top: var(--e2);
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  padding: 5px 11px; border-radius: var(--r-full);
  background: rgba(74,222,128,.14); color: #4ade80; border: 1px solid rgba(74,222,128,.26);
}

.moldura-foto {
  position: relative; flex-shrink: 0; width: 104px; aspect-ratio: 1;
  border-radius: var(--r-md); overflow: hidden; background: var(--leve);
}
.produto-foto { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-lento) var(--mola); }

.selos-produto { display: flex; gap: var(--e1); flex-wrap: wrap; margin-bottom: var(--e2); }
.etiqueta {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 10px; border-radius: var(--r-full);
}
.etiqueta.promo { background: var(--principal); color: var(--sobre-principal); }
.etiqueta.esgotou { background: rgba(248,113,113,.16); color: #f87171; }

.sem-resultado { text-align: center; padding: var(--e8) var(--e5); color: var(--fraco); }

.rodape { text-align: center; padding: var(--e8) var(--e5) var(--e6); border-top: 1px solid var(--linha); margin-top: var(--e8); }
.rodape-marca { font-weight: 800; font-size: 16px; margin-bottom: var(--e1); }
.rodape p { margin: 2px 0; }

/* ============ BARRA DO CARRINHO ============ */
.barra-carrinho {
  position: fixed; left: var(--e4); right: var(--e4);
  bottom: calc(var(--e4) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--e3);
  padding: 16px var(--e5); border: 0; border-radius: var(--r-lg);
  background: var(--principal); color: var(--sobre-principal);
  font: inherit; font-weight: 800; font-size: 15.5px; cursor: pointer;
  box-shadow: 0 12px 35px rgba(0,0,0,.34), var(--s-cor); z-index: 35;
  max-width: 668px; margin: 0 auto;
  animation: entraBarra var(--t-lento) var(--mola-forte) both;
  transition: transform 160ms ease;
}
@keyframes entraBarra { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.barra-carrinho:active { transform: scale(.976); }
.barra-texto { flex: 1; text-align: left; }
.barra-carrinho strong { font-variant-numeric: tabular-nums; }
.bolha {
  background: color-mix(in srgb, var(--sobre-principal) 18%, transparent);
  min-width: 28px; height: 28px; padding: 0 var(--e2);
  border-radius: var(--r-full); display: grid; place-items: center; font-size: 14px;
}
.bolha.bate { animation: bate .4s var(--mola-forte); }
@keyframes bate { 0%,100% { transform: scale(1); } 45% { transform: scale(1.15); } }

.voa {
  position: fixed; z-index: 60; width: 64px; height: 64px; border-radius: var(--r-md);
  background-size: cover; background-position: center; pointer-events: none; box-shadow: var(--s-lg);
}

/* ============ AVISO FLUTUANTE ============ */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--e2);
  background: var(--papel-alto); color: var(--texto);
  padding: 13px 20px; border-radius: var(--r-full);
  border: 1px solid var(--linha-forte); box-shadow: var(--s-lg);
  font-size: 14px; font-weight: 700; z-index: 55;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-medio) ease, transform var(--t-medio) var(--mola);
}
.toast.vista { opacity: 1; transform: translateX(-50%); }
.toast svg { width: 17px; height: 17px; color: #4ade80; }

/* ============ FOLHAS ============ */
dialog.folha[open] { display: flex; }
dialog.folha {
  border: 0; padding: 0; background: var(--papel-alto); color: var(--texto);
  width: min(560px, 100vw); max-height: 92dvh; height: auto;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin: auto auto 0; box-shadow: var(--s-modal);
  flex-direction: column; overflow: hidden;
}
dialog.folha::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
dialog[open].folha { animation: sobeFolha var(--t-lento) var(--mola); }
dialog[open].folha::backdrop { animation: aparece var(--t-medio) ease; }
@keyframes sobeFolha { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

.puxador { width: 40px; height: 4px; border-radius: var(--r-full); background: var(--linha-forte); margin: var(--e3) auto 0; flex-shrink: 0; }
.dlg-corpo { padding: var(--e4) var(--e5) var(--e5); overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.dlg-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e2); }
.dlg-topo h2 { font-size: 21px; }
#prod-nome { font-size: 22px; margin: var(--e1) 0 var(--e2); }

.fechar {
  border: 0; background: var(--leve); color: var(--texto); cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%; font-size: 15px; flex-shrink: 0;
  display: grid; place-items: center;
  transition: background var(--t-rapido) ease, transform 150ms ease;
}
.fechar:active { transform: scale(.9); }
.fechar.flutua {
  position: absolute; top: var(--e3); right: var(--e4); z-index: 2;
  background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(8px);
}
.prod-foto {
  width: calc(100% + var(--e5) * 2); margin: calc(var(--e4) * -1) calc(var(--e5) * -1) var(--e4);
  aspect-ratio: 16 / 10; object-fit: cover; display: block;
}
.faixa-preco {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  flex-wrap: wrap; padding: var(--e3) var(--e4); margin: var(--e3) 0 var(--e2);
  border-radius: var(--r-md); background: var(--leve); border: 1px solid var(--linha);
}
.faixa-preco .grande { font-size: 22px; font-weight: 800; color: var(--principal); }

/* ============ GRUPOS DE OPÇÕES ============ */
.grupo { margin-top: var(--e6); }
.grupo-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e1); }
.grupo-cabeca h3 { font-size: 16.5px; }
.grupo-regra {
  font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: var(--r-full);
  white-space: nowrap; text-transform: uppercase; letter-spacing: .04em;
  transition: background var(--t-lento) ease, color var(--t-lento) ease;
}
.grupo-regra.pendente { background: var(--principal); color: var(--sobre-principal); }
.grupo-regra.ok { background: rgba(74,222,128,.16); color: #4ade80; animation: bate .4s var(--mola-forte); }
.grupo-regra.opcional { background: var(--leve); color: var(--fraquinho); }
.grupo-dica { margin: 0 0 var(--e3); font-size: 13px; color: var(--fraco); line-height: 1.45; }

.opcao {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e3); border-radius: var(--r-md); cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-rapido) ease, border-color var(--t-rapido) ease;
}
.opcao + .opcao { margin-top: var(--e1); }
.opcao:has(input:checked) { background: var(--realce); border-color: color-mix(in srgb, var(--principal) 34%, transparent); }
@media (hover: hover) { .opcao:not(.esgotada):hover { background: var(--leve); } }
.opcao-texto { flex: 1; min-width: 0; }
.opcao-nome { font-weight: 700; font-size: 15px; }
.opcao-desc { font-size: 12.5px; color: var(--fraco); margin-top: 2px; line-height: 1.42; }
.opcao-preco { font-size: 13.5px; font-weight: 800; color: var(--principal); white-space: nowrap; }
.opcao.esgotada { opacity: .38; pointer-events: none; }
.opcao input[type=radio], .opcao input[type=checkbox] {
  width: 21px; height: 21px; accent-color: var(--principal); flex-shrink: 0; margin: 0; cursor: pointer;
}

/* ============ SELETOR DE QUANTIDADE ============ */
.contador, .contador-op {
  display: flex; align-items: center; flex-shrink: 0;
  background: var(--leve); border: 1px solid var(--linha-forte); border-radius: var(--r-md);
  padding: var(--e1);
}
.contador button, .contador-op button {
  width: 40px; height: 40px; border-radius: var(--r-sm); border: 0;
  background: none; color: var(--texto); font-size: 19px; cursor: pointer; line-height: 1;
  display: grid; place-items: center;
  transition: background var(--t-rapido) ease, transform 140ms ease;
}
.contador-op button { width: 34px; height: 34px; }
.contador button:not(:disabled):active, .contador-op button:not(:disabled):active {
  transform: scale(.88); background: var(--linha);
}
.contador button:disabled, .contador-op button:disabled { opacity: .3; cursor: not-allowed; }
.contador span, .contador-op span {
  min-width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums;
}
.contador-op span { min-width: 22px; }

/* ============ CAMPOS ============ */
.campo { display: block; margin-top: var(--e4); }
.campo > span { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: var(--e2); color: var(--fraco); }
.campo input, .campo select {
  width: 100%; min-height: 50px; padding: 14px 15px;
  border: 1px solid var(--linha-forte); border-radius: var(--r-md);
  background: var(--leve); color: var(--texto); font: inherit;
  transition: border-color var(--t-rapido) ease, box-shadow var(--t-rapido) ease, background var(--t-rapido) ease;
}
.campo input:focus, .campo select:focus {
  outline: none; border-color: var(--principal); background: var(--papel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--principal) 12%, transparent);
}
.campo input::placeholder { color: var(--fraquinho); }
.campo em { font-style: normal; color: var(--fraquinho); font-weight: 500; }
.dica-campo { display: block; margin-top: var(--e2); font-size: 12.5px; color: var(--fraquinho); }
h3 { font-size: 17px; margin: var(--e7) 0 0; }

.btn-vazado {
  width: 100%; margin-top: var(--e3); padding: 14px; border-radius: var(--r-md);
  border: 1px dashed var(--linha-forte); background: none; color: var(--fraco);
  font: inherit; font-weight: 700; cursor: pointer; transition: all var(--t-rapido) ease;
}
@media (hover: hover) { .btn-vazado:hover { border-color: var(--principal); color: var(--principal); } }
.btn-vazado.sem-margem { margin-top: 0; width: auto; padding: 15px var(--e4); flex-shrink: 0; }

.voltar {
  border: 0; background: none; color: var(--fraco); font: inherit; font-weight: 700;
  font-size: 14px; cursor: pointer; padding: 0 0 var(--e3);
}

/* ============ BAIRRO COM BUSCA ============ */
.campo-bairro { position: relative; }
.bairro-lista {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  max-height: 240px; overflow-y: auto; margin-top: var(--e2);
  background: var(--papel-alto); border: 1px solid var(--linha-forte);
  border-radius: var(--r-md); box-shadow: var(--s-lg);
}
.bairro-lista div {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e3);
  padding: 13px 15px; cursor: pointer; font-size: 14.5px; font-weight: 600;
  border-bottom: 1px solid var(--linha);
}
.bairro-lista div:last-child { border-bottom: 0; }
.bairro-lista div:hover { background: var(--realce); }
.bairro-lista small { color: var(--fraco); font-weight: 700; white-space: nowrap; font-size: 12.5px; }
.bairro-vazio { padding: 14px 15px; color: var(--fraco); font-size: 13.5px; line-height: 1.5; }

/* ============ PAGAMENTO E MODO ============ */
.pagamentos, .escolha-modo { display: flex; gap: var(--e2); margin-top: var(--e2); }
.escolha-modo { margin-top: var(--e5); }
.pagamentos button, .modo {
  flex: 1; border-radius: var(--r-md); border: 1px solid var(--linha-forte);
  background: var(--leve); color: var(--fraco); font: inherit; font-weight: 700;
  cursor: pointer; transition: all var(--t-medio) var(--mola);
}
.pagamentos button { padding: 15px 6px; font-size: 14px; }
.modo { padding: 15px 10px; display: flex; flex-direction: column; align-items: center; gap: var(--e1); font-size: 14px; }
.modo span { font-size: 20px; }
.pagamentos button.ativo, .modo.ativo {
  background: var(--realce); border-color: var(--principal); color: var(--principal);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--principal) 26%, transparent);
}

.nota-segura { margin: var(--e4) 0 0; text-align: center; font-size: 12.5px; color: var(--fraquinho); line-height: 1.5; }

/* ============ SUGESTÕES ============ */
#sugestoes:not(:empty) { margin-top: var(--e6); }
.sugestao-titulo { font-size: 14.5px; font-weight: 800; margin-bottom: var(--e3); }
.sugestoes-fila { display: flex; gap: var(--e3); overflow-x: auto; padding-bottom: var(--e1); scrollbar-width: none; }
.sugestoes-fila::-webkit-scrollbar { display: none; }
.sugestao {
  flex-shrink: 0; width: 136px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md);
  padding: var(--e2); transition: transform var(--t-rapido) var(--mola), border-color var(--t-rapido) ease;
}
.sugestao:active { transform: scale(.96); }
@media (hover: hover) { .sugestao:hover { border-color: color-mix(in srgb, var(--principal) 34%, transparent); } }
.sugestao img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-sm); background: var(--leve); }
.sugestao b { display: block; font-size: 13px; margin: var(--e2) 0 2px; line-height: 1.3; }
.sugestao span { font-size: 13.5px; font-weight: 800; color: var(--principal); }

/* ============ CARRINHO ============ */
.vazio-carrinho { text-align: center; padding: var(--e8) var(--e5); }
.vazio-carrinho svg { width: 46px; height: 46px; color: var(--fraquinho); margin-bottom: var(--e4); }
.vazio-carrinho h3 { margin: 0 0 var(--e2); font-size: 18px; }
.vazio-carrinho p { margin: 0; color: var(--fraco); font-size: 14px; }

.item-carrinho {
  display: flex; gap: var(--e3); padding: var(--e4) 0; border-bottom: 1px solid var(--linha);
  animation: entraItem var(--t-lento) var(--mola) both;
}
@keyframes entraItem { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ic-texto { flex: 1; min-width: 0; }
.ic-nome { font-weight: 800; font-size: 15px; }
.ic-detalhe { font-size: 13px; color: var(--fraco); margin-top: 3px; line-height: 1.5; }
.ic-preco { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.remover {
  border: 0; background: none; color: #f87171; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; padding: var(--e2) 0 0;
}

.totais { margin: var(--e5) 0 var(--e1); padding-top: var(--e4); border-top: 1px solid var(--linha); }
.totais > div { display: flex; justify-content: space-between; padding: var(--e2) 0; font-size: 15px; color: var(--fraco); }
.totais strong { font-variant-numeric: tabular-nums; color: var(--texto); }
.total-grande {
  font-size: 17px !important; font-weight: 800; color: var(--texto) !important;
  padding-top: var(--e3) !important; margin-top: var(--e2); border-top: 1px solid var(--linha);
}
.total-grande strong { font-size: 26px; color: var(--principal); }

/* ============ RODAPÉ DAS FOLHAS ============ */
.rodape-dlg {
  display: flex; gap: var(--e3); align-items: center; flex-shrink: 0;
  padding: var(--e3) var(--e5) calc(var(--e4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linha);
  background: color-mix(in srgb, var(--papel-alto) 94%, transparent);
  backdrop-filter: blur(10px);
}
.btn-acao {
  flex: 1; min-width: 0; min-height: 54px; padding: 15px var(--e4); border: 0;
  border-radius: var(--r-md); background: var(--principal); color: var(--sobre-principal);
  font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: var(--s-cor);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  transition: transform 150ms ease, box-shadow var(--t-medio) ease, opacity var(--t-rapido) ease;
}
.btn-acao svg { width: 19px; height: 19px; flex-shrink: 0; }
.btn-acao:not(:disabled):active { transform: scale(.975); }
.btn-acao:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn-acao.grande { width: 100%; min-height: 56px; }
.btn-acao.verde { background: #25d366; color: #06301a; box-shadow: 0 6px 20px rgba(37,211,102,.3); }

.erro {
  margin: var(--e4) 0 0; padding: 13px 15px; border-radius: var(--r-md);
  background: rgba(248,113,113,.12); color: #fca5a5; font-size: 14px; font-weight: 600;
  border: 1px solid rgba(248,113,113,.28); animation: treme .4s ease;
}
@keyframes treme { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ============ PASSO FINAL ============ */
#passo-fim { text-align: center; padding: var(--e4) 0 var(--e2); }
#passo-fim h2 { font-size: 24px; margin: var(--e4) 0 var(--e3); }
#fim-sub { font-size: 14.5px; line-height: 1.6; }
.marca-certo { width: 74px; height: 74px; margin: 0 auto; }
.marca-certo svg { width: 100%; height: 100%; }
.mc-circulo { fill: none; stroke: #4ade80; stroke-width: 3; stroke-dasharray: 152; stroke-dashoffset: 152; animation: risca .55s var(--mola) forwards; }
.mc-risco { fill: none; stroke: #4ade80; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: risca .35s var(--mola) .45s forwards; }
@keyframes risca { to { stroke-dashoffset: 0; } }
.btn-zap {
  display: flex; align-items: center; justify-content: center; gap: var(--e2);
  margin: var(--e5) 0 0; min-height: 56px; padding: 16px; border-radius: var(--r-md);
  background: #25d366; color: #06301a; text-decoration: none; font-weight: 800; font-size: 15.5px;
  box-shadow: 0 6px 20px rgba(37,211,102,.3); transition: transform 150ms ease;
}
.btn-zap:active { transform: scale(.975); }
.btn-zap svg { width: 21px; height: 21px; }
.fim-resumo {
  margin: var(--e5) 0 var(--e4); padding: var(--e4); border-radius: var(--r-md); text-align: left;
  background: var(--leve); border: 1px solid var(--linha);
  font-size: 13px; line-height: 1.7; white-space: pre-wrap; color: var(--fraco);
  max-height: 200px; overflow-y: auto;
}

/* ============ ENTRADA ============ */
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.capa { animation: sobe var(--t-lento) var(--mola) both; }
.produto { animation: sobe var(--t-medio) var(--mola) both; }
.produto:nth-child(2) { animation-delay: 40ms; }
.produto:nth-child(3) { animation-delay: 80ms; }
.produto:nth-child(n+4) { animation-delay: 120ms; }

/* ============ DESKTOP ============ */
@media (min-width: 760px) {
  body { padding-bottom: var(--e9); }
  .capa, .busca-caixa, .aviso { max-width: 700px; margin-inline: auto; }
  .cardapio { max-width: 1120px; padding-inline: var(--e6); }
  .categoria .lista-produtos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e4); }
  .produto { margin-bottom: 0; }
  .atalhos { max-width: 1120px; margin-inline: auto; }
  .barra-carrinho { left: auto; right: var(--e6); width: 360px; }
  dialog.folha { border-radius: var(--r-xl); margin: auto; max-height: 88dvh; }
  dialog[open].folha { animation: surge var(--t-medio) var(--mola); }
  @keyframes surge { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (min-width: 1100px) {
  .categoria .lista-produtos { grid-template-columns: repeat(3, 1fr); }
  .produto { flex-direction: column; }
  .moldura-foto { width: 100%; aspect-ratio: 4/3; order: -1; }
}

/* ============ ACESSIBILIDADE ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
html { scroll-behavior: smooth; }
::selection { background: color-mix(in srgb, var(--principal) 30%, transparent); }
:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; }