/* Cores por marca. --marca é o fundo da faixa e dos botões; --sobre-marca é a letra em cima dela.
   Dio Santo (Otávio, 26/10): fundo amarelo, letra preta — #FFC11A medido na logo do site do Saipos. */
:root{--fundo:#f6f4f1;--cartao:#fff;--tinta:#1b1a18;--suave:#6b665f;--linha:#e4dfd8;--marca:#1F4E8C;--sobre-marca:#fff}
body[data-marca="dio_santo"]{--marca:#FFC11A;--sobre-marca:#000}
body[data-marca="parmegiando"]{--marca:#7a2e1f;--sobre-marca:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--tinta);font:16px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;padding-bottom:90px}
header{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--marca);color:var(--sobre-marca)}
header img{height:52px;width:auto}
header h1{font-size:18px;margin:0}
header small{color:var(--sobre-marca);opacity:.8}
nav{position:sticky;top:0;z-index:5;display:flex;gap:6px;overflow-x:auto;padding:10px 16px;background:var(--fundo);scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{white-space:nowrap;padding:6px 12px;border-radius:999px;border:1px solid var(--linha);background:var(--cartao);color:var(--tinta);text-decoration:none;font-size:14px}
nav a.ativa{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
main{max-width:720px;margin:0 auto;padding:0 16px}
h2{font-size:17px;margin:22px 0 10px;scroll-margin-top:60px}
.item{display:flex;gap:12px;align-items:center;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;padding:10px;margin-bottom:8px}
.item img{width:72px;height:72px;object-fit:cover;border-radius:8px;flex:none;background:var(--fundo)}
.item img.logo{object-fit:contain;padding:4px;background:var(--marca)}
.item .nome{font-weight:600}
.item .preco{color:var(--suave);font-variant-numeric:tabular-nums}
.item .meio{flex:1;min-width:0}
.item button,.grande{border:0;border-radius:10px;background:var(--marca);color:var(--sobre-marca);font:inherit;font-weight:600;padding:9px 14px;cursor:pointer}
#sacola-botao{position:fixed;left:16px;right:16px;bottom:16px;max-width:688px;margin:0 auto;padding:14px;border:0;border-radius:14px;background:var(--marca);color:var(--sobre-marca);font:inherit;font-weight:700;display:flex;justify-content:space-between}
dialog{border:0;border-radius:16px;width:min(560px,calc(100% - 32px));padding:16px}
dialog .linha{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid var(--linha)}
dialog .qtd button{border:1px solid var(--linha);background:var(--cartao);border-radius:8px;width:30px;height:30px;font:inherit}
.aviso{color:var(--suave);font-size:14px}
.escolha{display:grid;gap:12px;max-width:420px;margin:40px auto;padding:0 16px}
.escolha a{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--linha);border-radius:14px;background:var(--cartao);color:var(--tinta);text-decoration:none;font-weight:600}
.escolha img{height:56px;border-radius:10px;padding:4px}
.escolha a[data-marca="dio_santo"] img{background:#FFC11A}
#sacola-botao[hidden],header:empty{display:none}