*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--sow-branco);color:var(--sow-preto);font:var(--w-regular) var(--fs-body)/var(--lh-body) var(--font-ui);-webkit-font-smoothing:antialiased;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
button{font:inherit;color:inherit;cursor:pointer;border-radius:var(--r-1)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--sow-preto);outline-offset:2px}
.rot{font-size:var(--fs-micro);font-weight:var(--w-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase}
.tab-num{font-variant-numeric:tabular-nums}

/* topo */
.topo{background:var(--sow-preto);color:var(--sow-branco);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);padding:calc(var(--sp-5) + env(safe-area-inset-top,0px)) var(--gutter) var(--sp-5)}
.topo img{display:block;height:54px;width:auto}
.comanda{text-align:right}
.comanda .rot{display:block;color:var(--texto-invertido-2)}
.comanda .num{display:block;font-size:2rem;line-height:1;font-weight:var(--w-bold);letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums;margin-top:var(--sp-1)}

/* abas */
.abas{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:repeat(3,1fr);background:var(--sow-branco);border-bottom:var(--borda)}
.aba{appearance:none;background:none;border:0;border-bottom:3px solid transparent;border-radius:0;height:54px;font-size:var(--fs-small);font-weight:var(--w-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--sow-neutro);margin-bottom:-1px}
.aba[aria-selected="true"]{color:var(--sow-preto);border-bottom-color:var(--sow-preto)}

/* índice de categorias */
.indice{position:sticky;top:54px;z-index:19;background:var(--sow-branco);border-bottom:var(--borda);display:flex;gap:var(--sp-5);overflow-x:auto;padding:0 var(--gutter);scrollbar-width:none}
.indice::-webkit-scrollbar{display:none}
.indice a{flex:none;display:block;padding:var(--sp-3) 0;font-size:var(--fs-small);font-weight:var(--w-medium);color:var(--sow-neutro);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.indice a.on{color:var(--sow-preto);font-weight:var(--w-semibold);border-bottom-color:var(--sow-preto)}

/* lista */
main{padding:0 var(--gutter)}
.painel-aba[hidden]{display:none}
.cat{padding-top:var(--sp-7);scroll-margin-top:110px}
.cat:first-child{padding-top:var(--sp-6)}
.cat-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);border-top:var(--borda-forte);padding-top:var(--sp-3)}
.cat-cab h2{margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);font-weight:var(--w-bold);letter-spacing:var(--tracking-tight)}
.cat-cab .rot{color:var(--sow-neutro);white-space:nowrap}

.item{display:grid;grid-template-columns:1fr 72px;gap:var(--sp-4);padding:var(--sp-4) 0 var(--sp-4);border-bottom:var(--borda)}
.item:last-child{border-bottom:0}
.item h3{margin:0;font-size:var(--fs-lead);line-height:1.25;font-weight:var(--w-semibold);letter-spacing:-.01em}
.item p{margin:var(--sp-1) 0 0;font-size:var(--fs-small);line-height:1.45;color:var(--sow-neutro)}
.item .rodape{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-3)}
.preco{font-size:var(--fs-body);font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.preco.breve{font-size:var(--fs-micro);font-weight:var(--w-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--sow-neutro);border:1px solid var(--linha-forte);padding:5px 8px;border-radius:var(--r-1)}
.foto{width:72px;height:72px;background:var(--superficie);border:var(--borda);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--sp-1);font-size:10px;line-height:1.25;font-weight:var(--w-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--sow-neutro)}

.add{position:relative;appearance:none;background:var(--sow-branco);border:1.5px solid var(--sow-preto);height:40px;padding:0 var(--sp-4);font-size:var(--fs-small);font-weight:var(--w-semibold);letter-spacing:.02em}
.add::after{content:"";position:absolute;inset:-4px}
.add:active{background:var(--sow-preto);color:var(--sow-branco)}
.step{display:inline-flex;align-items:center;height:40px;background:var(--sow-preto);color:var(--sow-branco);border-radius:var(--r-1)}
.step button{appearance:none;background:none;border:0;color:inherit;width:40px;height:40px;font-size:1.25rem;line-height:1;font-weight:var(--w-regular);position:relative}
.step button::after{content:"";position:absolute;inset:-2px}
.step output{min-width:24px;text-align:center;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}

.vazio{margin:var(--sp-7) 0 var(--sp-5);border-top:var(--borda-forte);padding-top:var(--sp-5)}
.vazio h2{margin:0 0 var(--sp-2);font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);font-weight:var(--w-bold)}
.vazio p{margin:0;max-width:30ch;color:var(--sow-neutro)}
.aviso-bar{margin:var(--sp-5) 0 0;padding:var(--sp-3) var(--sp-4);border:1px solid var(--linha-forte);border-radius:var(--r-1);font-size:var(--fs-small);color:var(--sow-neutro)}

.rodape-pg{margin:var(--sp-8) 0 0;padding:var(--sp-5) 0 var(--sp-2);border-top:var(--borda);text-align:center}
.rodape-pg img{display:block;margin:0 auto;height:38px;width:auto;opacity:.9}
.rodape-pg .rot{display:block;margin-top:var(--sp-3);color:var(--sow-neutro)}

/* barra inferior */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--sow-preto);color:var(--sow-branco);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom,0px));transform:translateY(110%);transition:transform var(--dur) var(--ease)}
.barra.on{transform:none}
.barra .rot{display:block;color:var(--texto-invertido-2)}
.barra .tot{display:block;font-size:var(--fs-h3);font-weight:var(--w-bold);letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums;line-height:1.15}
.btn-claro{appearance:none;border:0;background:var(--sow-branco);color:var(--sow-preto);height:50px;padding:0 var(--sp-5);font-size:var(--fs-small);font-weight:var(--w-bold);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-1)}

/* folha do pedido */
.folha{position:fixed;inset:0;z-index:40;background:var(--sow-branco);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .24s var(--ease);visibility:hidden}
.folha.on{transform:none;visibility:visible}
.folha-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);padding:calc(var(--sp-5) + env(safe-area-inset-top,0px)) var(--gutter) var(--sp-4);border-bottom:var(--borda-forte)}
.folha-cab h2{margin:0;font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);font-weight:var(--w-bold)}
.folha-cab .rot{display:block;color:var(--sow-neutro);margin-bottom:var(--sp-1)}
.btn-texto{appearance:none;background:none;border:0;padding:var(--sp-2) 0;font-size:var(--fs-small);font-weight:var(--w-semibold);text-decoration:underline;text-underline-offset:3px}
.folha-lista{flex:1;overflow:auto;padding:0 var(--gutter)}
.linha{padding:var(--sp-4) 0;border-bottom:var(--borda)}
.linha-topo{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:flex-start}
.linha h3{margin:0;font-size:var(--fs-lead);font-weight:var(--w-semibold);line-height:1.25}
.linha .sub{font-size:var(--fs-small);color:var(--sow-neutro)}
.linha-ctl{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-3);gap:var(--sp-3)}
.opcoes{display:inline-flex;border:1.5px solid var(--sow-preto);border-radius:var(--r-1);overflow:hidden}
.opcoes button{appearance:none;border:0;background:var(--sow-branco);height:36px;padding:0 var(--sp-3);font-size:var(--fs-small);font-weight:var(--w-semibold);border-radius:0}
.opcoes button[aria-pressed="true"]{background:var(--sow-preto);color:var(--sow-branco)}
.obs{width:100%;margin-top:var(--sp-3);height:42px;border:var(--borda);border-radius:var(--r-1);padding:0 var(--sp-3);font:inherit;font-size:var(--fs-small);background:var(--superficie);color:var(--sow-preto)}
.obs::placeholder{color:var(--sow-neutro)}
.folha-pe{border-top:var(--borda-forte);padding:var(--sp-4) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom,0px));background:var(--sow-branco)}
.folha-total{display:flex;justify-content:space-between;align-items:baseline}
.folha-total .v{font-size:var(--fs-h2);font-weight:var(--w-bold);letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums}
.folha-pe .nota{margin:var(--sp-1) 0 var(--sp-4);font-size:var(--fs-small);color:var(--sow-neutro)}
.btn-escuro{appearance:none;width:100%;border:0;background:var(--sow-preto);color:var(--sow-branco);height:54px;font-size:var(--fs-small);font-weight:var(--w-bold);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-1)}

/* pedido enviado */
.enviado{position:fixed;inset:0;z-index:50;background:var(--sow-preto);color:var(--sow-branco);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--sp-7) + env(safe-area-inset-top,0px)) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom,0px));visibility:hidden;opacity:0;transition:opacity .24s var(--ease)}
.enviado.on{visibility:visible;opacity:1}
.enviado svg{display:block;width:56px;height:56px;margin-bottom:var(--sp-6)}
.enviado h2{margin:0;font-size:var(--fs-h1);line-height:1.05;letter-spacing:var(--tracking-tight);font-weight:var(--w-bold);max-width:11ch}
.enviado p{margin:var(--sp-4) 0 0;color:var(--texto-invertido-2);max-width:32ch}
.enviado dl{margin:var(--sp-6) 0 0;border-top:1px solid var(--linha-invertida)}
.enviado dl div{display:flex;justify-content:space-between;padding:var(--sp-3) 0;border-bottom:1px solid var(--linha-invertida);font-size:var(--fs-small)}
.enviado dt{color:var(--texto-invertido-2)}
.enviado dd{margin:0;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}
.enviado .acoes{display:grid;gap:var(--sp-3)}
.btn-claro.cheio{width:100%;height:54px}
.btn-contorno{appearance:none;width:100%;height:54px;background:none;border:1.5px solid var(--sow-branco);color:var(--sow-branco);font-size:var(--fs-small);font-weight:var(--w-bold);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-1)}

@media (min-width:640px){
  body{max-width:560px;margin:0 auto;border-left:var(--borda);border-right:var(--borda);min-height:100vh}
  .barra{left:50%;right:auto;width:560px;transform:translate(-50%,110%)}
  .barra.on{transform:translate(-50%,0)}
  .folha,.enviado{left:50%;right:auto;width:560px;transform:translateX(-50%) translateY(100%)}
  .folha.on{transform:translateX(-50%)}
  .enviado{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}