/* ── 10.1B — canvas da página ────────────────────────────────────── As três grandes superfícies (hero, cardápio, visite-nos) passam a ser cartões sobre um fundo comum. O fundo vem para o por um motivo estrutural: #csc-app é irmão de .zp2-scope, não filho — sem isto ele não enxerga nem a cor do preset nem --zp2-radius-lg, e cada superfície inventaria o próprio raio. Mesmos valores já usados por preset; nenhum token novo, nenhuma cor nova. */ body.zp-menu-ui-v2{--zp2-radius-lg:30px;--zp2-canvas:#f5f8f5;background:var(--zp2-canvas)} body.zp-menu-ui-v2-signature{--zp2-radius-lg:18px;--zp2-canvas:#151715} body.zp-menu-ui-v2-warm{--zp2-radius-lg:26px;--zp2-canvas:#fff8ef} body.zp-menu-ui-v2 #csc-app{--zp2-catalog-paper:#ffffff;--zp2-catalog-ink:#1c1917;--zp2-catalog-muted:#6b6560;--zp2-catalog-soft:#f5f5f4;--zp2-catalog-line:#e7e5e4;--zp2-catalog-bg:#fafaf9;--zp2-catalog-shadow:0 14px 38px rgba(25,35,28,.08);box-sizing:border-box;width:100%;max-width:1180px;margin:0 auto;padding:18px clamp(16px,3vw,34px) 64px;background:var(--zp2-catalog-bg);color:var(--zp2-catalog-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;container-type:inline-size;border:1px solid var(--zp2-catalog-line);border-radius:var(--zp2-radius-lg);margin-block:24px}body.zp-menu-ui-v2-signature #csc-app{--zp2-catalog-paper:#1d1f1d;--zp2-catalog-ink:#fbfaf7;--zp2-catalog-muted:#c7c9c4;--zp2-catalog-soft:#292c29;--zp2-catalog-line:#3d423d;--zp2-catalog-bg:#151715;--zp2-catalog-shadow:0 16px 44px rgba(0,0,0,.24)}body.zp-menu-ui-v2-warm #csc-app{--zp2-catalog-paper:#fffdfa;--zp2-catalog-ink:#2b1b12;--zp2-catalog-muted:#705d50;--zp2-catalog-soft:#fff0dd;--zp2-catalog-line:#efd8bf;--zp2-catalog-bg:#fff8ef}body.zp-menu-ui-v2 #csc-app *,body.zp-menu-ui-v2 #csc-app *:before,body.zp-menu-ui-v2 #csc-app *:after{box-sizing:border-box}body.zp-menu-ui-v2 #csc-app button,body.zp-menu-ui-v2 #csc-app input{font:inherit}body.zp-menu-ui-v2 #csc-app .csc-abre{display:flex;min-height:48px;align-items:center;justify-content:flex-start;margin:0 0 16px;padding:8px 0;border:0;background:transparent}body.zp-menu-ui-v2 #csc-app .csc-abre__selo,body.zp-menu-ui-v2 #csc-app .csc-abre__titulo,body.zp-menu-ui-v2 #csc-app .csc-abre__sub{display:none!important}body.zp-menu-ui-v2 #csc-app .csc-status{width:auto;min-height:38px;margin:0;padding:7px 12px;border:1px solid var(--zp2-catalog-line);border-radius:999px;background:var(--zp2-catalog-paper);color:var(--zp2-catalog-muted);box-shadow:none;font-size:.78rem;font-weight:780;letter-spacing:.04em;text-transform:uppercase}body.zp-menu-ui-v2 #csc-app .csc-corpo{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}body.zp-menu-ui-v2 #csc-app .csc-coluna-menu{min-width:0}body.zp-menu-ui-v2 #csc-app .csc-tools{position:sticky;top:0;z-index:25;margin:0 -6px 30px;padding:10px 6px 12px;background:color-mix(in srgb,var(--zp2-catalog-bg) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}body.admin-bar.zp-menu-ui-v2 #csc-app .csc-tools{top:32px}body.zp-menu-ui-v2 #csc-app .csc-busca-linha{display:flex;align-items:stretch;gap:10px}body.zp-menu-ui-v2 #csc-app .csc-search{position:relative;display:flex;flex:1;min-width:0;align-items:center;border:1px solid var(--zp2-catalog-line);border-radius:15px;background:var(--zp2-catalog-paper);box-shadow:0 7px 24px rgba(25,35,28,.055);transition:border-color .16s,box-shadow .16s}body.zp-menu-ui-v2 #csc-app .csc-search:focus-within{border-color:var(--zp2-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--zp2-accent-source) 20%,transparent)}body.zp-menu-ui-v2 #csc-app .csc-search svg{flex:none;width:20px;height:20px;margin-left:15px;color:var(--zp2-catalog-muted);fill:none;stroke:currentColor;stroke-width:2}body.zp-menu-ui-v2 #csc-app #csc-busca{width:100%;min-width:0;min-height:50px;padding:11px 46px 11px 11px;border:0!important;outline:0!important;background:transparent!important;color:var(--zp2-catalog-ink);box-shadow:none!important;font-size:1rem}body.zp-menu-ui-v2 #csc-app #csc-busca::placeholder{color:var(--zp2-catalog-muted);opacity:.86}body.zp-menu-ui-v2 #csc-app .zp2-search-clear{position:absolute;right:6px;display:grid;width:38px;height:38px;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--zp2-catalog-muted);font-size:1.25rem;line-height:1;cursor:pointer}body.zp-menu-ui-v2 #csc-app .zp2-search-clear:hover{background:var(--zp2-catalog-soft);color:var(--zp2-catalog-ink)}body.zp-menu-ui-v2 #csc-app .zp2-search-clear[hidden]{display:none}body.zp-menu-ui-v2 #csc-app .csc-toggle-vista{display:inline-flex;min-width:94px;min-height:50px;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:1px solid var(--zp2-catalog-line);border-radius:15px;background:var(--zp2-catalog-paper);color:var(--zp2-catalog-ink);font-size:.78rem;font-weight:780;letter-spacing:.04em;text-transform:uppercase}body.zp-menu-ui-v2 #csc-app .csc-toggle-vista[aria-pressed="true"]{border-color:var(--zp2-accent);background:var(--zp2-accent);color:#fff}body.zp-menu-ui-v2 #csc-app .csc-toggle-vista svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}body.zp-menu-ui-v2 #csc-app .csc-nav-linha{display:flex;align-items:center;gap:6px;margin-top:10px}body.zp-menu-ui-v2 #csc-app .csc-nav{display:flex;flex:1;min-width:0;gap:8px;overflow-x:auto;padding:1px 1px 6px;scroll-padding-inline:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}body.zp-menu-ui-v2 #csc-app .csc-nav::-webkit-scrollbar{display:none}body.zp-menu-ui-v2 #csc-app .csc-nav button{flex:none;min-height:42px;padding:8px 14px;border:1px solid var(--zp2-catalog-line);border-radius:999px;background:var(--zp2-catalog-paper);color:var(--zp2-catalog-muted);font-size:.76rem;font-weight:760;letter-spacing:.025em;text-transform:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}body.zp-menu-ui-v2 #csc-app .csc-nav button:hover{border-color:var(--zp2-accent);color:var(--zp2-catalog-ink)}body.zp-menu-ui-v2 #csc-app .csc-nav button[aria-current="true"]{border-color:var(--zp2-accent);background:var(--zp2-accent);color:#fff}body.zp-menu-ui-v2 #csc-app .csc-nav-seta{display:none!important}body.zp-menu-ui-v2 #csc-app .zp2-catalog-status{min-height:20px;margin:5px 2px 0;color:var(--zp2-catalog-muted);font-size:.78rem}body.zp-menu-ui-v2 #csc-app .csc-secao{margin:0 0 38px;scroll-margin-top:145px}body.zp-menu-ui-v2 #csc-app .csc-secao__cabeca{display:flex;align-items:center;gap:14px;margin:0 0 6px}body.zp-menu-ui-v2 #csc-app .csc-secao__titulo{margin:0;color:var(--zp2-catalog-ink);font:820 clamp(1.35rem,3cqi,1.8rem)/1.15 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.035em}body.zp-menu-ui-v2 #csc-app .csc-secao__regua{height:1px;background:var(--zp2-catalog-line);opacity:1}body.zp-menu-ui-v2 #csc-app .csc-secao__nota{margin:0 0 18px;color:var(--zp2-catalog-muted);font:500 .83rem/1.45 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:0}body.zp-menu-ui-v2 #csc-app .csc-lista{display:grid;grid-template-columns:1fr;gap:14px}body.zp-menu-ui-v2 #csc-app .csc-item{position:relative;display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--zp2-catalog-line);border-radius:18px;background:var(--zp2-catalog-paper);color:var(--zp2-catalog-ink);box-shadow:0 1px 0 rgba(25,35,28,.02);transition:border-color .18s,box-shadow .18s,transform .18s}body.zp-menu-ui-v2 #csc-app .csc-item:hover{border-color:color-mix(in srgb,var(--zp2-accent-source) 40%,var(--zp2-catalog-line));box-shadow:var(--zp2-catalog-shadow);transform:translateY(-2px)}body.zp-menu-ui-v2 #csc-app .csc-item__moldura{position:relative;flex:none;overflow:hidden;aspect-ratio:16/10;background:var(--zp2-catalog-soft)}body.zp-menu-ui-v2 #csc-app .csc-item__foto{width:100%;height:100%;object-fit:cover;transition:transform .28s ease}body.zp-menu-ui-v2 #csc-app .csc-item:hover .csc-item__foto{transform:scale(1.025)}body.zp-menu-ui-v2 #csc-app .csc-item.sem-foto .csc-item__moldura{display:none}body.zp-menu-ui-v2 #csc-app .csc-item.sem-foto:before{display:block;width:44px;height:4px;margin:20px 20px 0;border-radius:999px;background:var(--zp2-accent);content:""}body.zp-menu-ui-v2 #csc-app .csc-item__corpo{min-width:0;flex:1;padding:18px 20px 0}body.zp-menu-ui-v2 #csc-app .csc-item__nome{margin:0;color:var(--zp2-catalog-ink);font:790 1.05rem/1.25 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.015em;overflow-wrap:break-word}body.zp-menu-ui-v2 #csc-app .csc-item__desc{display:-webkit-box;margin:7px 0 0;overflow:hidden;color:var(--zp2-catalog-muted);font-size:.88rem;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}body.zp-menu-ui-v2 #csc-app .csc-item.is-aberto .csc-item__desc{-webkit-line-clamp:unset;line-clamp:unset}body.zp-menu-ui-v2 #csc-app .csc-verMais{min-height:32px;margin:5px 0 0;padding:4px 0;border:0;background:transparent;color:var(--zp2-accent);font-size:.76rem;font-weight:760;text-decoration:underline;text-underline-offset:3px;text-transform:none}body.zp-menu-ui-v2 #csc-app .csc-item__acao{display:flex;min-height:50px;align-items:center;justify-content:space-between;gap:12px;margin:18px 20px 20px;padding:10px 13px;border:1px solid var(--zp2-accent);border-radius:13px;background:var(--zp2-accent);color:#fff;text-align:left;box-shadow:0 7px 20px color-mix(in srgb,var(--zp2-accent) 19%,transparent);transition:filter .15s,transform .1s}body.zp-menu-ui-v2 #csc-app .csc-item__acao:hover{filter:brightness(1.07)}body.zp-menu-ui-v2 #csc-app .csc-item__acao:active{transform:scale(.985)}body.zp-menu-ui-v2 #csc-app .csc-item__acao:disabled{border-color:var(--zp2-catalog-line);background:var(--zp2-catalog-soft);color:var(--zp2-catalog-muted);box-shadow:none;cursor:not-allowed;opacity:1}body.zp-menu-ui-v2 #csc-app .csc-item__acao-txt{display:flex;min-width:0;flex-direction:column;gap:1px}body.zp-menu-ui-v2 #csc-app .csc-item__acao-rotulo,body.zp-menu-ui-v2 #csc-app .csc-item__acao-sub{color:inherit;font-family:Inter,ui-sans-serif,system-ui,sans-serif}body.zp-menu-ui-v2 #csc-app .csc-item__acao-rotulo{font-size:.9rem;font-weight:780}body.zp-menu-ui-v2 #csc-app .csc-item__acao-sub{font-size:.82rem;font-weight:650;opacity:.9;font-variant-numeric:tabular-nums}body.zp-menu-ui-v2 #csc-app .csc-item__acao svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4}body.zp-menu-ui-v2 #csc-app #csc-vazio{margin:20px 0;padding:28px;border:1px dashed var(--zp2-catalog-line);border-radius:16px;background:var(--zp2-catalog-paper);color:var(--zp2-catalog-muted);text-align:center;font-size:.95rem}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-lista{display:flex;flex-direction:column;gap:0;overflow:hidden;border:1px solid var(--zp2-catalog-line);border-radius:18px;background:var(--zp2-catalog-paper)}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item{display:grid;grid-template-columns:1fr;border:0;border-radius:0;box-shadow:none;transform:none}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item:not([hidden])~.csc-item:not([hidden]){border-top:1px solid var(--zp2-catalog-line)}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item:before{display:none}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item__moldura{display:none}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item__corpo{padding:15px 16px 0}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item__acao{margin:12px 16px 15px}body.zp-menu-ui-v2 #csc-app :is(button,input,a):focus-visible{outline:3px solid color-mix(in srgb,var(--zp2-accent-source) 45%,#fff);outline-offset:3px}body.zp-menu-ui-v2 #csc-app .zp2-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@container (min-width:540px){body.zp-menu-ui-v2 #csc-app .csc-lista{grid-template-columns:repeat(2,minmax(0,1fr))}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item{grid-template-columns:72px minmax(0,1fr) auto;align-items:center}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item:not(.sem-foto) .csc-item__moldura{display:block;width:56px;height:56px;aspect-ratio:1;border-radius:12px;margin:14px 0 14px 14px}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item__corpo{padding:14px 10px}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item__acao{min-width:150px;margin:12px 14px 12px 0}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item.sem-foto{grid-template-columns:minmax(0,1fr) auto}}@container (min-width:940px){body.zp-menu-ui-v2 #csc-app .csc-corpo{grid-template-columns:minmax(0,1fr) 330px;gap:34px}body.zp-menu-ui-v2 #csc-app .csc-coluna-comanda{position:sticky;top:104px;align-self:start}body.zp-menu-ui-v2 #csc-app .csc-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (min-width:1160px){body.zp-menu-ui-v2 #csc-app .csc-lista{gap:16px}}@container (max-width:539px){body.zp-menu-ui-v2 #csc-app{padding:12px 14px 56px}body.zp-menu-ui-v2 #csc-app .csc-tools{margin-right:-2px;margin-left:-2px;padding-right:2px;padding-left:2px}body.zp-menu-ui-v2 #csc-app .csc-busca-linha{display:grid;grid-template-columns:1fr auto}body.zp-menu-ui-v2 #csc-app .csc-search{grid-column:1/-1}body.zp-menu-ui-v2 #csc-app .csc-toggle-vista{grid-column:2;min-height:44px}body.zp-menu-ui-v2 #csc-app .csc-nav-linha{margin-top:4px}body.zp-menu-ui-v2 #csc-app .csc-secao{scroll-margin-top:205px}body.zp-menu-ui-v2 #csc-app .csc-item__acao{min-height:52px}}@media (max-width:782px){body.admin-bar.zp-menu-ui-v2 #csc-app .csc-tools{top:46px}}@media (prefers-reduced-motion:reduce){body.zp-menu-ui-v2 #csc-app *,body.zp-menu-ui-v2 #csc-app *:before,body.zp-menu-ui-v2 #csc-app *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}body.zp-menu-ui-v2 #csc-app .csc-item:hover{transform:none}}@media (forced-colors:active){body.zp-menu-ui-v2 #csc-app .csc-item,body.zp-menu-ui-v2 #csc-app .csc-search,body.zp-menu-ui-v2 #csc-app .csc-nav button,body.zp-menu-ui-v2 #csc-app .csc-item__acao{border:1px solid ButtonText}} /* ========================================================================== CAMADA PREMIUM (2026-08-15) — catálogo Mesma estratégia do snippet 62: anexada no fim, vence por ordem de cascata com a mesma especificidade, sem reescrever a base testada acima. Apagar deste comentário até o fim devolve o visual anterior. Duas decisões de fundo: 1. NOME DO ITEM E TÍTULO DE SEÇÃO EM SERIFA. O cardápio inteiro em Inter lia como painel de SaaS. Fonte de sistema — zero requisição extra. 2. O PREÇO VIRA O PROTAGONISTA DO BOTÃO. Antes o rótulo da ação ("Montar pizza") era o texto grande e o preço vinha miúdo embaixo, invertendo a hierarquia: quem escolhe comida compara preço primeiro. Agora o preço é o texto forte, e a ação vira o apoio. ========================================================================== */ body.zp-menu-ui-v2 #csc-app{--zp2-display:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif} body.zp-menu-ui-v2 #csc-app .csc-secao{margin:0 0 46px} /* Clicar numa categoria deixava 15px do título escondidos atrás da barra fixa: o scroll-margin era 145px e a barra mede 160px no desktop. Defeito pré-existente, que a tipografia maior desta camada só tornou óbvio. Os valores abaixo têm ~22px de folga de propósito — sobrar espaço só afasta um pouco o título, faltar espaço esconde texto. */ body.zp-menu-ui-v2 #csc-app .csc-secao{scroll-margin-top:186px} body.admin-bar.zp-menu-ui-v2 #csc-app .csc-secao{scroll-margin-top:218px} body.zp-menu-ui-v2 #csc-app .csc-secao__cabeca{gap:16px;margin:0 0 4px} body.zp-menu-ui-v2 #csc-app .csc-secao__titulo{font-family:var(--zp2-display);font-size:clamp(1.55rem,3.4cqi,2.2rem);font-weight:600;letter-spacing:-.018em;line-height:1.12} body.zp-menu-ui-v2 #csc-app .csc-secao__regua{background:linear-gradient(90deg,var(--zp2-catalog-line),transparent)} body.zp-menu-ui-v2 #csc-app .csc-secao__nota{margin:0 0 22px;font-size:.86rem} body.zp-menu-ui-v2 #csc-app .csc-lista{gap:18px} body.zp-menu-ui-v2 #csc-app .csc-item{border-radius:20px;box-shadow:0 1px 2px rgba(25,35,28,.03),0 10px 30px rgba(25,35,28,.05);transition:border-color .22s ease,box-shadow .22s ease,transform .22s cubic-bezier(.2,.7,.3,1)} body.zp-menu-ui-v2 #csc-app .csc-item:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(25,35,28,.05),0 26px 62px rgba(25,35,28,.12)} body.zp-menu-ui-v2 #csc-app .csc-item__moldura{aspect-ratio:4/3} body.zp-menu-ui-v2 #csc-app .csc-item__moldura:after{position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,transparent,rgba(18,24,20,.16));content:"";pointer-events:none} body.zp-menu-ui-v2 #csc-app .csc-item__foto{transition:transform .55s cubic-bezier(.2,.7,.3,1)} body.zp-menu-ui-v2 #csc-app .csc-item:hover .csc-item__foto{transform:scale(1.05)} body.zp-menu-ui-v2 #csc-app .csc-item__corpo{padding:20px 22px 0} body.zp-menu-ui-v2 #csc-app .csc-item__nome{font-family:var(--zp2-display);font-size:1.18rem;font-weight:600;letter-spacing:-.008em;line-height:1.22} body.zp-menu-ui-v2 #csc-app .csc-item__desc{margin:9px 0 0;font-size:.89rem;line-height:1.56} body.zp-menu-ui-v2 #csc-app .csc-item__acao{min-height:54px;margin:18px 22px 22px;padding:10px 12px 10px 16px;border-radius:14px;box-shadow:0 2px 5px color-mix(in srgb,var(--zp2-accent) 18%,transparent),0 10px 26px color-mix(in srgb,var(--zp2-accent) 20%,transparent);transition:filter .16s ease,transform .12s ease,box-shadow .2s ease} body.zp-menu-ui-v2 #csc-app .csc-item__acao:hover{filter:brightness(1.06);box-shadow:0 3px 7px color-mix(in srgb,var(--zp2-accent) 22%,transparent),0 16px 36px color-mix(in srgb,var(--zp2-accent) 26%,transparent)} body.zp-menu-ui-v2 #csc-app .csc-item__acao-txt{gap:2px} body.zp-menu-ui-v2 #csc-app .csc-item__acao-rotulo{order:2;font-size:.73rem;font-weight:650;letter-spacing:.055em;text-transform:uppercase;opacity:.82} body.zp-menu-ui-v2 #csc-app .csc-item__acao-sub{order:1;font-size:1.06rem;font-weight:800;letter-spacing:-.015em;opacity:1;font-variant-numeric:tabular-nums} body.zp-menu-ui-v2 #csc-app .csc-item__acao:disabled{box-shadow:none;filter:none} body.zp-menu-ui-v2 #csc-app .csc-tools{background:color-mix(in srgb,var(--zp2-catalog-bg) 82%,transparent);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px)} body.zp-menu-ui-v2 #csc-app .csc-search{border-radius:16px;box-shadow:0 1px 2px rgba(25,35,28,.03),0 8px 26px rgba(25,35,28,.06)} body.zp-menu-ui-v2 #csc-app .csc-nav button{font-size:.79rem;font-weight:700;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .14s ease} body.zp-menu-ui-v2 #csc-app .csc-nav button:hover{transform:translateY(-1px)} body.zp-menu-ui-v2 #csc-app .csc-nav button[aria-current="true"]{box-shadow:0 4px 14px color-mix(in srgb,var(--zp2-accent) 28%,transparent)} body.zp-menu-ui-v2 #csc-app .csc-toggle-vista{border-radius:16px} /* O selo ficava espremido entre o horário (333px) e a borda, quebrando "ABERTO AGORA" em duas linhas dentro de uma pílula arredondada — virava uma bolha deformada. flex:none impede o encolhimento e a linha passa a quebrar por inteiro quando não couber. */ /* align-items:flex-start: sem isso o selo "Aberto agora" ficava centralizado verticalmente contra a lista de horarios aberta e flutuava no meio da altura, sem relacao visual com nada. */ body.zp-menu-ui-v2 #csc-app .csc-abre{flex-wrap:wrap;gap:10px 14px;align-items:flex-start} body.zp-menu-ui-v2 #csc-app .csc-status{font-size:.74rem;letter-spacing:.06em;flex:none;white-space:nowrap} body.zp-menu-ui-v2 #csc-app #csc-vazio{border-radius:18px;font-size:.97rem} @container (min-width:540px){body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item:not(.sem-foto) .csc-item__moldura{width:64px;height:64px;border-radius:14px;margin:15px 0 15px 15px}body.zp-menu-ui-v2 #csc-app.vista-lista .csc-item{grid-template-columns:80px minmax(0,1fr) auto}} /* No celular a barra fixa ocupava 214px — mais de um quarto da tela, o tempo todo, porque busca e botão de vista ficavam em linhas separadas. Passam a dividir a mesma linha, e o botão fica só com o ícone: o rótulo "LISTA" é escondido por font-size:0, que apaga o texto visualmente mas o mantém na árvore de acessibilidade (leitor de tela continua anunciando), diferente de display:none. Economiza uma linha inteira de altura permanente. */ @container (max-width:539px){body.zp-menu-ui-v2 #csc-app .csc-item__corpo{padding:17px 18px 0}body.zp-menu-ui-v2 #csc-app .csc-item__acao{margin:15px 18px 18px;min-height:56px}body.zp-menu-ui-v2 #csc-app .csc-item__nome{font-size:1.12rem}body.zp-menu-ui-v2 #csc-app .csc-busca-linha{display:flex;gap:9px;align-items:stretch}body.zp-menu-ui-v2 #csc-app .csc-search{flex:1 1 auto;min-width:0}body.zp-menu-ui-v2 #csc-app .csc-toggle-vista{flex:0 0 54px;width:54px;min-width:54px;padding:0;font-size:0}body.zp-menu-ui-v2 #csc-app .csc-toggle-vista svg{width:19px;height:19px;margin:0}body.zp-menu-ui-v2 #csc-app .csc-secao{scroll-margin-top:190px}body.admin-bar.zp-menu-ui-v2 #csc-app .csc-secao{scroll-margin-top:236px}} @media (prefers-reduced-motion:reduce){body.zp-menu-ui-v2 #csc-app .csc-item:hover .csc-item__foto{transform:none}body.zp-menu-ui-v2 #csc-app .csc-nav button:hover{transform:none}} /* ========================================================================== AJUSTE FINO (2026-08-15) — modais, horarios, raios e paleta do nicho Continuacao da CAMADA PREMIUM. Racional de cor e raio no snippet 62. ========================================================================== */ body.zp-menu-ui-v2 #csc-app{--zp2-r-xs:10px;--zp2-r-sm:14px;--zp2-r-md:18px;--zp2-r-lg:26px;--zp2-r-pill:999px;--zp2-catalog-paper:#ffffff;--zp2-catalog-ink:#1c1917;--zp2-catalog-muted:#6b6560;--zp2-catalog-soft:#f5f5f4;--zp2-catalog-line:#e7e5e4;--zp2-catalog-bg:#fafaf9} body.zp-menu-ui-v2-warm #csc-app{--zp2-catalog-paper:#fffdf9;--zp2-catalog-ink:#2b1b12;--zp2-catalog-muted:#71604f;--zp2-catalog-soft:#fdf0dd;--zp2-catalog-line:#f0dcc2;--zp2-catalog-bg:#fff8ef} body.zp-menu-ui-v2 #csc-app .csc-item{border-radius:var(--zp2-r-md)} body.zp-menu-ui-v2 #csc-app .csc-item__acao{border-radius:var(--zp2-r-sm)} body.zp-menu-ui-v2 #csc-app .csc-search,body.zp-menu-ui-v2 #csc-app .csc-toggle-vista{border-radius:var(--zp2-r-sm)} body.zp-menu-ui-v2 #csc-app .csc-nav button,body.zp-menu-ui-v2 #csc-app .csc-status{border-radius:var(--zp2-r-pill)} body.zp-menu-ui-v2 #csc-app #csc-vazio{border-radius:var(--zp2-r-md)} body.zp-menu-ui-v2 #csc-app.vista-lista .csc-lista{border-radius:var(--zp2-r-md)} /* ---------- HORARIOS ---------- Antes: o gatilho era uma pilula pequena em fonte mono/caixa-alta e a lista caia como uma caixa solta de 340px, com cara de tabela colada na pagina. Agora o gatilho e um controle de verdade (com marca de relogio) e a lista e um cartao com o mesmo acabamento do resto — o dia de hoje ganha fundo proprio em vez de so negrito, que e exatamente o que a pessoa procura. */ body.zp-menu-ui-v2 #csc-app .csc-horario__toggle{gap:8px;padding:9px 15px;border:1px solid var(--zp2-catalog-line);border-radius:var(--zp2-r-pill);background:var(--zp2-catalog-paper);color:var(--zp2-catalog-muted);font-family:inherit;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;min-height:40px;transition:border-color .16s,color .16s,box-shadow .16s} body.zp-menu-ui-v2 #csc-app .csc-horario__toggle:before{content:"";width:15px;height:15px;flex:none;border-radius:50%;border:1.6px solid currentColor;background:radial-gradient(circle at 50% 50%,currentColor 0 1.4px,transparent 1.4px)} body.zp-menu-ui-v2 #csc-app .csc-horario__toggle:hover{border-color:var(--zp2-accent);color:var(--zp2-accent);box-shadow:0 3px 12px rgba(36,26,18,.07)} body.zp-menu-ui-v2 #csc-app .csc-horario__lista{width:min(400px,100%);margin-top:12px;padding:8px;border:1px solid var(--zp2-catalog-line);border-radius:var(--zp2-r-md);background:var(--zp2-catalog-paper);box-shadow:0 2px 6px rgba(36,26,18,.04),0 14px 34px rgba(36,26,18,.07)} body.zp-menu-ui-v2 #csc-app .csc-horario__linha{align-items:center;gap:8px 16px;padding:9px 12px;border-bottom:0;border-radius:var(--zp2-r-xs);font-size:.88rem;font-family:inherit;color:var(--zp2-catalog-muted);font-variant-numeric:tabular-nums} body.zp-menu-ui-v2 #csc-app .csc-horario__linha+.csc-horario__linha{margin-top:1px} body.zp-menu-ui-v2 #csc-app .csc-horario__linha.csc-horario__hoje{background:color-mix(in srgb,var(--zp2-accent-source) 9%,var(--zp2-catalog-paper));color:var(--zp2-catalog-ink);font-weight:750} /* ---------- MODAL ---------- Era sempre folha de baixo (align-items:flex-end), inclusive no desktop, onde folha colada na base de uma tela larga fica deslocada. Agora fica centralizado com todos os cantos no desktop, e folha de baixo no celular — padrao dos apps de delivery e o gesto que o polegar espera. */ body.zp-menu-ui-v2 #csc-app .csc-modal{align-items:center;padding:20px} body.zp-menu-ui-v2 #csc-app .csc-modal__backdrop{background:rgba(28,18,10,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} body.zp-menu-ui-v2 #csc-app .csc-modal__folha{max-width:560px;max-height:88vh;border-radius:var(--zp2-r-lg);background:var(--zp2-catalog-paper);box-shadow:0 8px 20px rgba(28,18,10,.14),0 40px 90px rgba(28,18,10,.28);overflow:hidden} body.zp-menu-ui-v2 #csc-app .csc-modal__foto{border-radius:0;max-height:230px;aspect-ratio:21/9} body.zp-menu-ui-v2 #csc-app .csc-modal__fechar{top:14px;right:14px;width:40px;height:40px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 3px 14px rgba(28,18,10,.28)} body.zp-menu-ui-v2 #csc-app .csc-modal__corpo{padding:24px 26px 20px} body.zp-menu-ui-v2 #csc-app .csc-modal__titulo{font-family:var(--zp2-display);font-size:1.5rem;font-weight:600;letter-spacing:-.016em} body.zp-menu-ui-v2 #csc-app .csc-modal__desc{font-size:.9rem;line-height:1.55;color:var(--zp2-catalog-muted)} /* .csc-passo e a SECAO inteira (titulo + chips), e o numero e um dentro do

. Tratar a secao como linha flex jogava os chips para o lado do titulo — quem vira linha e o titulo, nao a secao. / body.zp-menu-ui-v2 #csc-app .csc-passo{display:block;margin:26px 0 0} body.zp-menu-ui-v2 #csc-app .csc-passotitulo{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-family:var(--zp2-display);font-size:1.05rem;font-weight:600;letter-spacing:-.01em} body.zp-menu-ui-v2 #csc-app .csc-passonum{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--zp2-accent);color:#fff;font-family:inherit;font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums} body.zp-menu-ui-v2 #csc-app .csc-passoopcional{font-size:.8rem;font-weight:600;color:var(--zp2-catalog-muted)} body.zp-menu-ui-v2 #csc-app .csc-passonota{margin:0 0 12px;font-size:.83rem;line-height:1.5;color:var(--zp2-catalog-muted)} body.zp-menu-ui-v2 #csc-app .csc-chips{display:flex;flex-wrap:wrap;gap:9px} body.zp-menu-ui-v2 #csc-app .csc-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:52px;padding:10px 15px;border:1.5px solid var(--zp2-catalog-line);border-radius:var(--zp2-r-sm);background:var(--zp2-catalog-paper);color:var(--zp2-catalog-ink);cursor:pointer;transition:border-color .15s,background .15s,transform .12s,box-shadow .15s} body.zp-menu-ui-v2 #csc-app .csc-chip:hover{border-color:color-mix(in srgb,var(--zp2-accent-source) 50%,var(--zp2-catalog-line));transform:translateY(-1px)} body.zp-menu-ui-v2 #csc-app .csc-chip.is-ativo{border-color:var(--zp2-accent);background:color-mix(in srgb,var(--zp2-accent-source) 10%,var(--zp2-catalog-paper));box-shadow:0 0 0 3px color-mix(in srgb,var(--zp2-accent-source) 16%,transparent)} body.zp-menu-ui-v2 #csc-app .csc-chipnome{font-size:.92rem;font-weight:700} body.zp-menu-ui-v2 #csc-app .csc-chip.is-ativo .csc-chipnome{color:var(--zp2-accent)} / O preco herdava Space Mono do motor v1 e destoava do resto do modal. tabular-nums ja da o alinhamento de coluna que a monoespacada dava. / body.zp-menu-ui-v2 #csc-app .csc-chippreco{font-family:inherit;font-size:.82rem;font-weight:650;color:var(--zp2-catalog-muted);font-variant-numeric:tabular-nums;letter-spacing:0} body.zp-menu-ui-v2 #csc-app .csc-chips--meio .csc-chip{flex:1 1 160px;align-items:center;text-align:center} body.zp-menu-ui-v2 #csc-app .csc-modalcorpo textarea{width:100%;padding:12px 14px;border:1.5px solid var(--zp2-catalog-line);border-radius:var(--zp2-r-sm);background:var(--zp2-catalog-paper);color:var(--zp2-catalog-ink);font:inherit;font-size:.9rem;resize:vertical} body.zp-menu-ui-v2 #csc-app .csc-modalcorpo textarea:focus{outline:0;border-color:var(--zp2-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--zp2-accent-source) 18%,transparent)} body.zp-menu-ui-v2 #csc-app .csc-modalrodape{padding:16px 26px 22px;border-top:1px solid var(--zp2-catalog-line);background:var(--zp2-catalog-paper);box-shadow:0 -8px 24px rgba(36,26,18,.05)} body.zp-menu-ui-v2 #csc-app .csc-modalrodape-linha{gap:12px;align-items:center} body.zp-menu-ui-v2 #csc-app .csc-qtdpizza{display:flex;align-items:center;gap:2px;flex:none;padding:4px;border:1.5px solid var(--zp2-catalog-line);border-radius:var(--zp2-r-sm);background:var(--zp2-catalog-paper)} body.zp-menu-ui-v2 #csc-app .csc-qtdpizzabtn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--zp2-r-xs);background:transparent;color:var(--zp2-catalog-ink);font-size:1.2rem;font-weight:700;cursor:pointer;transition:background .14s} body.zp-menu-ui-v2 #csc-app .csc-qtdpizzabtn:hover{background:var(--zp2-catalog-soft)} body.zp-menu-ui-v2 #csc-app .csc-qtdpizzan{min-width:28px;text-align:center;font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums} body.zp-menu-ui-v2 #csc-app .csc-modalok{min-height:56px;border-radius:var(--zp2-r-sm);background:linear-gradient(180deg,color-mix(in srgb,var(--zp2-accent) 92%,#fff),var(--zp2-accent));font-family:inherit;font-size:1rem;font-weight:780;box-shadow:0 3px 8px color-mix(in srgb,var(--zp2-accent) 22%,transparent),0 12px 28px color-mix(in srgb,var(--zp2-accent) 24%,transparent);font-variant-numeric:tabular-nums} body.zp-menu-ui-v2 #csc-app .csc-modalok:hover:not(:disabled){filter:brightness(1.06)} body.zp-menu-ui-v2 #csc-app .csc-modalok:disabled{background:var(--zp2-catalog-soft);color:var(--zp2-catalog-muted);border:1.5px dashed var(--zp2-catalog-line);box-shadow:none} body.zp-menu-ui-v2 #csc-app .csc-modalerro{color:#b3261e;font-size:.85rem} / ---------- BARRA DA COMANDA (fixa no rodape) ---------- Ela ja existia e so aparece quando ha item no carrinho — eu tinha afirmado antes que nao existia, e estava errado. O que faltava era acabamento: raio 17px fora da escala e numeros em Space Mono, herdados do motor v1. / body.zp-menu-ui-v2 .csc-barra{border-radius:var(--zp2-r-sm,14px);min-height:62px;box-shadow:0 6px 18px rgba(28,18,10,.18),0 22px 48px rgba(28,18,10,.22);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.7,.3,1)} / BUG BLOQUEANTE (achado 2026-08-15): a barra tem z-index 88 e o modal 80, entao ela ficava POR CIMA do rodape do modal. No celular isso cobria o botao "Adicionar" — dava para escolher o tamanho e nao dava para concluir. Alem de travar a compra, duas barras laranja empilhadas competiam pela mesma acao. Enquanto a folha esta aberta a barra sai de cena; o gancho e a classe csc-trava-scroll que o proprio motor ja poe no . / body.zp-menu-ui-v2.csc-trava-scroll .csc-barra{opacity:0;visibility:hidden;transform:translateY(130%)} body.zp-menu-ui-v2 .csc-barraqtd{font-family:inherit;font-weight:800;font-variant-numeric:tabular-nums;border-radius:var(--zp2-r-xs,10px);letter-spacing:0} body.zp-menu-ui-v2 .csc-barratxt{font-family:inherit;font-weight:750} body.zp-menu-ui-v2 .csc-barratotal{font-family:inherit;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em} / Remover segundo "Aberto agora" do catálogo (2026-08-15). Existe um no header (@zp2-status), outro aqui em .csc-abre — redundância. O verdadeiro é o do header, que alimenta o JS de sincronização. / body.zp-menu-ui-v2 #csc-app .csc-abre{display:none!important} @media (max-width:600px){ body.zp-menu-ui-v2 #csc-app .csc-modal{align-items:flex-end;padding:0} body.zp-menu-ui-v2 #csc-app .csc-modalfolha{max-width:100%;max-height:92vh;border-radius:var(--zp2-r-lg) var(--zp2-r-lg) 0 0} body.zp-menu-ui-v2 #csc-app .csc-modalcorpo{padding:20px 18px 16px} body.zp-menu-ui-v2 #csc-app .csc-modalrodape{padding:14px 18px calc(18px + env(safe-area-inset-bottom))} body.zp-menu-ui-v2 #csc-app .csc-modalfoto{max-height:190px} } / ---------- ESQUELETO DE CARREGAMENTO ---------- O cardapio chega por tres requisicoes em serie (~4s no pior caso). Ate agora esse intervalo mostrava a frase "Carregando o cardapio..." e, pior, o contador chegava a escrever "0 produtos encontrados" — que nao e um estado neutro: afirma ao cliente que a loja esta vazia justamente enquanto ela carrega. Cartoes-fantasma no formato dos reais comunicam "vem conteudo aqui" sem prometer numero nenhum. */ @keyframes zp2SkelShimmer{0%{background-position:-140% 0}100%{background-position:140% 0}} body.zp-menu-ui-v2 #csc-app .zp2-skel{display:grid;grid-template-columns:1fr;gap:14px;margin:0;padding:0;list-style:none} body.zp-menu-ui-v2 #csc-app .zp2-skelcard{overflow:hidden;border:1px solid var(--zp2-catalog-line);border-radius:var(--zp2-r-md,18px);background:var(--zp2-catalog-paper)} body.zp-menu-ui-v2 #csc-app .zp2-skelbloco{background:linear-gradient(90deg,var(--zp2-catalog-soft) 25%,color-mix(in srgb,var(--zp2-catalog-line) 55%,var(--zp2-catalog-soft)) 45%,var(--zp2-catalog-soft) 65%);background-size:220% 100%;animation:zp2SkelShimmer 1.25s ease-in-out infinite} body.zp-menu-ui-v2 #csc-app .zp2-skelfoto{aspect-ratio:16/10} body.zp-menu-ui-v2 #csc-app .zp2-skellinha{height:14px;margin:18px 20px 0;border-radius:999px} body.zp-menu-ui-v2 #csc-app .zp2-skellinha--curta{width:58%;margin-top:10px} body.zp-menu-ui-v2 #csc-app .zp2-skelacao{height:50px;margin:18px 20px 20px;border-radius:var(--zp2-r-sm,14px)} @container (min-width:540px){body.zp-menu-ui-v2 #csc-app .zp2-skel{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (prefers-reduced-motion:reduce){body.zp-menu-ui-v2 #csc-app .zp2-skelbloco{animation:none}}