/* == Cabeçalho (C13) == */
.cabecalho {
  position: sticky; top: 0; z-index: 20;
  height: var(--altura-cabecalho);
  padding-inline: var(--margem);
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color var(--rapido) var(--curva);
}
.cabecalho--solido { background: rgb(245 241 233 / .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--filete); }
.cabecalho__sentinela { position: absolute; top: 8px; left: 0; width: 1px; height: 1px; }
body.tem-heroi #page-content > :first-child { margin-top: calc(-1 * var(--altura-cabecalho)); }
.wordmark { display: flex; justify-self: start; align-items: center; min-height: 44px; text-decoration: none; }
.wordmark img { display: block; width: auto; height: 48px; }
.cabecalho__nav { display: none; }
.cabecalho__nav a { display: inline-flex; align-items: center; gap: var(--e1); min-height: 44px; padding: 0 var(--e4); border-radius: var(--raio-pilula); font: 500 15px/1 var(--sans); text-decoration: none; }
.cabecalho__nav a[aria-current="page"] { background: var(--branco); }
.nav-natal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--natal); }
.cabecalho__acoes { display: flex; align-items: center; gap: var(--e2); }
.sacola { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none; }
.sacola .icon { width: 24px; height: 24px; }
.sacola .order-count { position: absolute; top: 0; right: 0; }
.botao-pedido { display: none; }
.botao-icone { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.order-count { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--oliva); color: var(--branco); font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; }
.botao-pedido .order-count, .gaveta .order-count { width: 22px; height: 22px; background: var(--branco); color: var(--tinta); }

/* == Gaveta (C14) == */
.gaveta { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: auto; background: var(--papel); color: var(--tinta); }
.gaveta::backdrop { background: rgb(52 45 37 / .45); }
.gaveta[open] { animation: gaveta-entra var(--medio) var(--curva); }
@keyframes gaveta-entra { from { transform: translateX(100%); } to { transform: translateX(0); } }
.gaveta__corpo { display: flex; flex-direction: column; min-height: 100%; padding: var(--e4) var(--margem); }
.gaveta__topo { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.gaveta__link { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 56px; border-bottom: 1px solid var(--filete); font: 400 26px/1.15 var(--serifa); text-decoration: none; }
.gaveta__link .icon { width: 18px; height: 18px; }
.gaveta__natal { display: flex; align-items: center; gap: var(--e3); margin-block: var(--e4); padding: var(--e3); border-radius: var(--raio-cartao); background: var(--natal); color: var(--branco); text-decoration: none; }
.gaveta__natal img { flex: none; width: 64px; height: 64px; border-radius: var(--raio-foto); }
.gaveta__natal strong { display: block; font: 600 16px/1.3 var(--sans); }
.gaveta__natal small { display: block; font: 400 14px/1.4 var(--sans); }
.gaveta__pe { display: grid; gap: var(--e2); margin-top: auto; padding: var(--e4); border-radius: var(--raio-cartao); background: var(--areia); }
.gaveta__pe .botao { justify-content: center; }

/* == Rodapé (C15) == */
.rodape { padding: var(--e7) var(--margem) var(--e5); background: radial-gradient(80% 60% at 20% 0%, rgb(255 253 248 / .10), transparent 60%), var(--marrom); color: var(--branco); border-radius: var(--raio-painel) var(--raio-painel) 0 0; }
.rodape:empty { display: none; }
.rodape__logo { display: block; width: auto; height: 64px; margin-bottom: var(--e5); filter: brightness(0) invert(1); }
.rodape__apoio { margin-top: var(--e3); font: 400 16px/1.55 var(--sans); color: rgb(255 253 248 / .8); }
.rodape .botao { margin-top: var(--e4); }
.rodape__grupos { margin-top: var(--e7); }
.rodape__grupo { border-top: 1px solid rgb(255 253 248 / .25); }
.rodape__grupo:last-child { border-bottom: 1px solid rgb(255 253 248 / .25); }
.rodape__grupo > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font: 600 17px/1.2 var(--sans); list-style: none; cursor: pointer; }
.rodape__grupo > summary::-webkit-details-marker { display: none; }
.rodape__grupo > summary .icon { transition: transform var(--rapido) var(--curva); }
.rodape__grupo[open] > summary .icon { transform: rotate(45deg); }
.rodape__grupo ul { padding-bottom: var(--e3); }
.rodape__grupo a { display: flex; align-items: center; min-height: 44px; font: 400 15px/1.3 var(--sans); text-decoration: none; }
.rodape__final { margin-top: var(--e5); font: 400 13px/1.5 var(--sans); color: rgb(255 253 248 / .7); }

/* == Aviso (C20) == */
.aviso { position: fixed; inset: auto var(--margem) calc(var(--e4) + env(safe-area-inset-bottom)) var(--margem); display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e3) var(--e3) var(--e4); background: var(--tinta); color: var(--branco); border-radius: var(--raio-cartao); box-shadow: var(--sombra-flutuante); }
.aviso #toast-message { flex: 1; min-width: 0; }
.aviso__link { min-height: 44px; padding: 0 var(--e4); font-size: 14px; }
.aviso :focus-visible { outline-color: var(--branco); }

/* == Erro de carregamento == */
.empty-state { display: grid; justify-items: start; gap: var(--e3); padding-block: var(--e7); }

@media (min-width: 720px) {
  .gaveta { inset: 0 0 0 auto; width: min(420px, 100%); border-radius: var(--raio-painel) 0 0 var(--raio-painel); }
}
@media (min-width: 1000px) {
  .cabecalho { display: grid; grid-template-columns: 1fr auto 1fr; }
  .cabecalho__nav { display: flex; align-items: center; gap: var(--e1); padding: 6px; border-radius: var(--raio-pilula); background: rgb(255 253 248 / .75); backdrop-filter: blur(10px); }
  .cabecalho__acoes { justify-self: end; }
  .botao-pedido { display: inline-flex; }
  .sacola, .menu-botao { display: none; }
  .rodape__grupos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e5); }
  .rodape__grupo, .rodape__grupo:last-child { border: 0; }
  .rodape__grupo--aberto > summary { cursor: default; }
  .rodape__grupo--aberto > summary .icon { display: none; }
}

/* == Página == */
#page-content { display: grid; gap: var(--e3); padding-bottom: var(--e3); }
@media (min-width: 1000px) {
  #page-content { gap: var(--e5); padding-bottom: var(--e5); }
}
/* == Estados da página == */
.carregando { padding: calc(var(--altura-cabecalho) + var(--e8)) var(--margem) var(--e8); text-align: center; color: var(--suave); }
.noscript { position: fixed; inset: auto var(--margem) var(--margem); z-index: 40; padding: var(--e4); border-radius: var(--raio-cartao); background: var(--tinta); color: var(--branco); }
.noscript a { text-decoration: underline; }

/* Conteúdo que o servidor entrega para buscadores e IAs: fica fora da vista, mas no HTML. O navegador troca tudo pela página montada. */
.seo-conteudo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }