/* Poke v1.2 — "balcão de poke": tokens, tipografia e componentes compartilhados */
@font-face { font-family: "Zen Maru Gothic"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/zen-maru-gothic-400.woff2) format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/zen-maru-gothic-500.woff2) format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/zen-maru-gothic-700.woff2) format("woff2"); }

/* fonte de título, a dos posts da loja (OFL, ver public/fonts/OFL-lilita-one.txt) */
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/lilita-one-400.woff2) format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }

:root {
  --shari: #FAFAF7; --shoyu: #2B1D16; --marinho: #001060; /* azul da marca (logo e posts) */ --salmao: #F2735E; --wasabi: #C6D84A; --gergelim: #E9E3D6;
  --ambar: #E0A13A; /* faixa de "em preparo" no painel; nunca em texto */
  --cor: var(--salmao); /* a loja troca esta cor (topo.ejs) */
  --cor-forte: color-mix(in srgb, var(--cor) 75%, #000); /* fundo de botão com texto branco, AA */
  --cor-texto: var(--cor-forte); /* cor como texto sobre --fundo */
  --anel: var(--cor-forte); /* anel de foco, >= 3:1 sobre --fundo */
  /* a cor da loja clareada para fundo azul (tema escuro e vitrine do cardápio); o servidor recalcula em topo.ejs */
  --cor-clara: color-mix(in srgb, var(--cor) 75%, #fff); --anel-claro: var(--cor-clara);
  --fundo: var(--shari); --texto: var(--shoyu);
  --mudo: color-mix(in srgb, var(--shoyu) 72%, var(--shari));
  --fundo-suave: color-mix(in srgb, var(--gergelim) 45%, var(--shari));
  --superficie: #fff; /* cartões, campos, diálogos */
  --sobre-cor: #fff; /* texto sobre --cor-forte */
  --borda: color-mix(in srgb, var(--shoyu) 20%, var(--shari));
  --campo: #fff; --borda-campo: color-mix(in srgb, var(--shoyu) 24%, var(--shari)); /* campos de texto */
  --halo: color-mix(in srgb, var(--anel) 32%, transparent);
  --raio: 12px; --raio-cartao: 20px; --raio-pilula: 999px;
  --rapida: 140ms; --media: 240ms; --lenta: 420ms;
  /* transições (hover, foco, pressão) mais calmas que as animações de entrada e diálogo */
  --hover-rapida: 240ms; --hover-media: 400ms; --hover-lenta: 700ms;
  --mola: cubic-bezier(.2, .9, .25, 1.25); --suave: cubic-bezier(.4, 0, .2, 1);
  --t1: .875rem; --t2: 1rem; --t3: 1.1875rem; --t4: 1.5rem; --t5: 2rem; --t6: 2.75rem; /* 14/16/19/24/32/44 */
  --fonte: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "Lilita One", var(--fonte); /* nome da loja, banner e títulos do cardápio */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #050B30; --texto: var(--shari);
    --mudo: color-mix(in srgb, var(--shari) 72%, #050B30);
    --fundo-suave: #0B1547; --superficie: #0A1340; --sobre-cor: #fff;
    --borda: color-mix(in srgb, var(--shari) 22%, #050B30);
    --campo: color-mix(in srgb, #fff 7%, var(--superficie)); --borda-campo: color-mix(in srgb, var(--shari) 30%, #050B30);
    --cor-texto: var(--cor-clara);
    --anel: var(--anel-claro);
  }
}

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--t2)/1.55 var(--fonte); color: var(--texto); background: var(--fundo); overflow-wrap: break-word; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: var(--t5); }
h2 { font-size: var(--t4); }
h3 { font-size: var(--t3); }
@media (min-width: 720px) { h1 { font-size: var(--t6); } }
small { font-size: var(--t1); }
img { max-width: 100%; height: auto; }
a { color: var(--cor-texto); }
.preco, .num { font-variant-numeric: tabular-nums; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; white-space: nowrap; }
.caixa { max-width: 28rem; margin: 0 auto; padding: 1.5rem 1rem; }
.texto-longo { line-height: 1.6; }
:focus-visible { outline: 3px solid var(--anel); outline-offset: 2px; }

/* ---------- ícones (sprite em views/icones.ejs) ---------- */
.icone { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }

/* ---------- campos ---------- */
form { display: grid; gap: 1rem; }
label { display: grid; gap: .25rem; font-weight: 500; }
input, select, textarea { font: inherit; padding: .75rem 1rem; border: 1.5px solid var(--borda-campo); border-radius: var(--raio); background: var(--campo); color: var(--texto);
  transition: border-color var(--hover-rapida) var(--suave), background-color var(--hover-rapida) var(--suave), box-shadow var(--hover-media) var(--suave); }
input:not([type="checkbox"], [type="radio"], [type="file"]), select { min-height: 48px; }
textarea { min-height: 6.5rem; line-height: 1.45; resize: vertical; }
::placeholder { color: var(--mudo); opacity: .75; }
/* hover: contorno clareia e o fundo levanta um pouco; o foco (logo abaixo) vence na borda */
@media (hover: hover) and (pointer: fine) {
  input:not([type="checkbox"], [type="radio"], [type="file"]):hover, input:not([type="checkbox"], [type="radio"], [type="file"]):focus-visible,
  select:hover, select:focus-visible, textarea:hover, textarea:focus-visible {
    border-color: color-mix(in srgb, var(--borda-campo), var(--texto) 35%); background-color: color-mix(in srgb, var(--campo), var(--texto) 4%); }
}
/* foco: um anel só (borda acesa + halo suave), sem o contorno de fora somando com a borda */
input:not([type="checkbox"], [type="radio"]):focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--anel); box-shadow: 0 0 0 4px var(--halo); }
/* erro: só depois que a pessoa mexeu (:user-invalid) ou quando o servidor recusou (aria-invalid) */
input[aria-invalid="true"], input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: var(--cor-forte); }
/* autopreenchimento do navegador: mantém o fundo e a cor do tema (sem o branco/amarelo do Chrome) */
input:-webkit-autofill { -webkit-text-fill-color: var(--texto); caret-color: var(--texto); box-shadow: inset 0 0 0 100px var(--campo); }
input:-webkit-autofill:focus-visible { box-shadow: inset 0 0 0 100px var(--campo), 0 0 0 4px var(--halo); }
.campo { display: grid; gap: .3rem; }
.campo > label, .campo__rotulo { font-size: var(--t1); font-weight: 500; color: var(--mudo); transition: color var(--hover-rapida) var(--suave); }
/* o rótulo acende junto com o campo ativo */
.campo:focus-within > label, .campo:focus-within .campo__rotulo, label:focus-within > .campo__rotulo { color: var(--texto); }
.campo [aria-invalid="true"] { border-color: var(--cor-texto); }
.campo__erro, .erro { display: flex; align-items: flex-start; gap: .4rem; margin: 0; padding: 0; background: none; color: var(--cor-texto); font-size: var(--t1); font-weight: 500; }
.campo__erro:empty, .campo__erro[hidden] { display: none; }
.campo__erro::before, .erro::before { content: ""; flex: none; width: 1.1em; height: 1.1em; margin-top: .1em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- botões ---------- */
button { font: inherit; padding: .65rem 1rem; border: 1px solid var(--cor-forte); border-radius: var(--raio); background: var(--cor-forte); color: var(--sobre-cor); font-weight: 700; cursor: pointer; transition: transform var(--hover-rapida) var(--suave); }
.botao { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .65rem 1.4rem; border: 0; border-radius: var(--raio-pilula); background: var(--cor-forte); color: var(--sobre-cor); font: 700 var(--t2)/1.2 var(--fonte); text-decoration: none; cursor: pointer; transition: transform var(--hover-rapida) var(--suave); }
/* molho escorrendo: o preenchimento entra da esquerda */
.botao::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--cor-forte) 70%, #000); transform: scaleX(0); transform-origin: left; transition: transform var(--hover-media) var(--suave); }
.botao--sec { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--texto); }
.botao--sec::before { background: var(--fundo-suave); }
.botao--icone { width: 44px; padding: 0; background: transparent; color: var(--texto); }
.botao--icone::before { background: var(--fundo-suave); border-radius: 50%; }
/* salvar: bandeja + seta; no hover a seta desce para dentro da bandeja (guardar) e a bandeja assenta */
.ico-salvar { display: inline-grid; flex: none; width: 1.2em; height: 1.2em; }
.ico-salvar > .icone { grid-area: 1 / 1; width: 100%; height: 100%; vertical-align: 0; }
.botao--salvar:active .ico-salvar { transform: translateY(1px); }
@keyframes salvar-desce { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-7px); opacity: 0; } 46% { transform: translateY(-9px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes salvar-assenta { 0%, 55% { transform: none; } 75% { transform: scaleX(1.12) scaleY(.88); } 100% { transform: none; } }
/* seta de "seguir" (entrar, criar): anda um pouco pra frente no hover */
.botao--seguir .icone { transition: transform var(--hover-media) var(--suave); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .botao:hover::before, .botao:focus-visible::before { transform: scaleX(1); }
  .botao--seguir:hover .icone, .botao--seguir:focus-visible .icone { transform: translateX(4px); }
  .botao--salvar:hover .ico-salvar__seta, .botao--salvar:focus-visible .ico-salvar__seta { animation: salvar-desce .7s cubic-bezier(.22, 1, .36, 1); }
  .botao--salvar:hover .ico-salvar > .icone:first-child, .botao--salvar:focus-visible .ico-salvar > .icone:first-child { transform-origin: 50% 85%; animation: salvar-assenta .7s ease; }
}
button:active, .botao:active, .chip:active, .opcao-card:active, .cartao--clicavel:active { transform: scale(.97); }

/* ---------- link: traço fraco sempre; no hover o cheio entra pela esquerda e sai pela direita ---------- */
/* camada 1 = traço cheio (cresce); camada 2 = traço fraco de base. Só o tamanho anima: a âncora troca na hora,
   então entra ancorado à esquerda e, ao sair, encolhe ancorado à direita */
.link { color: var(--cor-texto); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1.5px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 35%, transparent), color-mix(in srgb, currentColor 35%, transparent)) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--hover-media) var(--suave); }
button.link { padding: .25rem 0; border: 0; font-weight: 500; line-height: 1.3; }
@media (hover: none) { .link { background-size: 100% 1.5px, 100% 1px; } }
@media (hover: hover) and (pointer: fine) {
  .link:hover, .link:focus-visible { background-size: 100% 1.5px, 100% 1px; background-position: 0 100%, 0 100%; }
}

/* ---------- chip e cartão de opção (radio/checkbox nativo escondido) ---------- */
.chip, .opcao-card { position: relative; display: flex; align-items: center; gap: .6rem; border: 1.5px solid var(--borda); background: var(--superficie); color: var(--texto); font-weight: 500; cursor: pointer; transition: transform var(--hover-rapida) var(--suave), background-color var(--hover-media), border-color var(--hover-media); }
.chip { display: inline-flex; padding: .45rem 1.1rem; min-height: 44px; border-radius: var(--raio-pilula); }
.opcao-card { padding: .9rem 1.1rem; border-radius: var(--raio-cartao); }
.chip > input, .opcao-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; pointer-events: none; }
/* selo wasabi de marcado no canto */
.chip::after, .opcao-card::after { content: ""; position: absolute; top: -6px; right: -4px; width: 1.2rem; height: 1.2rem; border-radius: 50%; opacity: 0; transform: scale(0); pointer-events: none;
  background: var(--wasabi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001060' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 75% no-repeat;
  transition: transform var(--hover-media) var(--mola), opacity var(--hover-rapida); }
.chip:has(input:checked), .opcao-card:has(input:checked) { border-color: var(--marinho); background: color-mix(in srgb, var(--wasabi) 22%, var(--superficie)); }
.chip:has(input:checked)::after, .opcao-card:has(input:checked)::after { opacity: 1; transform: scale(1); }
.chip:has(input:focus-visible), .opcao-card:has(input:focus-visible) { outline: 3px solid var(--anel); outline-offset: 2px; }
.chip:has(input:disabled), .opcao-card:has(input:disabled) { opacity: .5; cursor: not-allowed; }
@media (prefers-color-scheme: dark) {
  .chip:has(input:checked), .opcao-card:has(input:checked) { border-color: var(--wasabi); background: color-mix(in srgb, var(--wasabi) 16%, var(--superficie)); }
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover, .chip:focus-within, .opcao-card:hover, .opcao-card:focus-within { border-color: var(--texto); }
}

/* ---------- contador − n + ---------- */
.contador { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem; border: 1.5px solid var(--borda); border-radius: var(--raio-pilula); background: var(--superficie); }
.contador output { min-width: 2.2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.contador .botao--icone { width: 40px; min-height: 40px; }

/* ---------- cartão: sombra num pseudo-elemento, só a opacidade anima ---------- */
.cartao { position: relative; isolation: isolate; padding: 1.25rem; border: 1px solid var(--borda); border-radius: var(--raio-cartao); background: var(--superficie); transition: transform var(--hover-media) var(--suave); }
.cartao::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 14px 30px -10px rgb(43 29 22 / .28); opacity: 0; transition: opacity var(--hover-media) var(--suave); pointer-events: none; }
.cartao--clicavel { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .cartao--clicavel:hover, .cartao--clicavel:focus-within { transform: translateY(-3px); }
  .cartao--clicavel:hover::after, .cartao--clicavel:focus-within::after { opacity: 1; }
}

/* ---------- selo ---------- */
.selo { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .7rem; border-radius: var(--raio-pilula); background: var(--gergelim); color: var(--shoyu); font-size: var(--t1); font-weight: 500; }
.selo--ok { background: var(--wasabi); color: var(--marinho); }
.selo--cor { background: var(--cor-forte); color: var(--sobre-cor); }

/* ---------- aviso (toast) ---------- */
#avisos > div { display: grid; justify-items: center; gap: .5rem; }
#avisos { position: fixed; inset: auto 0 1rem 0; z-index: 100; display: grid; justify-items: center; gap: .5rem; padding: 0 1rem; pointer-events: none; }
.aviso { display: flex; align-items: center; gap: .5rem; margin: 0; max-width: min(28rem, 100%); padding: .75rem .5rem .75rem 1.1rem; pointer-events: auto; border-radius: 16px; background: var(--shoyu); color: var(--shari); font-weight: 500; box-shadow: 0 10px 28px -8px rgb(0 0 0 / .4); animation: aviso-entra var(--media) var(--mola); }
.aviso--erro { background: var(--cor-forte); color: var(--sobre-cor); }
.aviso--ok { background: var(--marinho); color: var(--shari); }
/* botão de fechar do aviso: herda a cor do texto do aviso */
.aviso__fechar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.aviso__fechar:focus-visible { outline-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .aviso__fechar:hover, .aviso__fechar:focus-visible { background: color-mix(in srgb, currentColor 16%, transparent); } }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@media (prefers-color-scheme: dark) { .aviso:not(.aviso--erro):not(.aviso--ok) { background: var(--shari); color: var(--shoyu); } }

/* ---------- diálogo ---------- */
dialog.dialogo { width: min(28rem, 92vw); padding: 1.5rem; border: 0; border-radius: var(--raio-cartao); background: var(--superficie); color: var(--texto); }
dialog.dialogo p { margin: 0 0 1.25rem; }
dialog.dialogo .campo__erro { margin: 0; }
.dialogo__acoes { display: flex; justify-content: flex-end; gap: .5rem; }
dialog.dialogo::backdrop { background: rgb(5 11 48 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.dialogo[open] { animation: dialogo-entra var(--media) var(--mola); }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ---------- folha: select próprio (folha.js) ---------- */
.folha { position: relative; display: block; min-width: 9rem; }
.folha__nativo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } /* fora da vista, mas no DOM: submit e validação seguem valendo */
.folha__gatilho { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 48px; padding: .6rem 1rem; border: 1.5px solid var(--borda-campo); border-radius: var(--raio); background: var(--campo); color: var(--texto); font: 400 var(--t2)/1.3 var(--fonte); text-align: left; transition: border-color var(--hover-rapida) var(--suave), transform var(--hover-rapida) var(--suave); }
.folha__gatilho--vazio .folha__rotulo { color: var(--mudo); }
.folha__gatilho[aria-expanded="true"] { border-color: var(--anel); box-shadow: 0 0 0 4px var(--halo); }
.folha__gatilho:disabled { opacity: .5; cursor: not-allowed; }
.folha:has(.folha__nativo:user-invalid) .folha__gatilho { border-color: var(--cor-forte); }
.folha__seta { flex: none; width: 1.1em; height: 1.1em; background: currentColor; transition: transform var(--hover-media) var(--suave);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.folha__gatilho[aria-expanded="true"] .folha__seta { transform: rotate(180deg); }
dialog.folha__painel, dialog.calendario__painel { position: fixed; margin: 0; padding: 0; border: 0; border-radius: var(--raio-cartao); background: var(--superficie); color: var(--texto); overflow: hidden;
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--shoyu) 38%, transparent); }
dialog.folha__painel[open] { display: flex; max-height: min(22rem, calc(100vh - 2rem)); }
.folha__painel--pop, .calendario__painel--pop { top: var(--y, auto); bottom: var(--b, auto); left: var(--x, 0); animation: folha-pop var(--media) var(--mola); }
.folha__painel--pop { width: var(--larg, 14rem); }
.calendario__painel--pop { width: 20rem; }
dialog.folha__painel--pop::backdrop, dialog.calendario__painel--pop::backdrop { background: transparent; }
dialog.folha__painel--folha, dialog.calendario__painel--folha { inset: auto 0 0 0; width: 100%; max-width: none; border-radius: var(--raio-cartao) var(--raio-cartao) 0 0; animation: folha-sobe var(--media) var(--mola); }
dialog.folha__painel--folha[open] { max-height: 70vh; }
dialog.folha__painel--folha::backdrop, dialog.calendario__painel--folha::backdrop { background: color-mix(in srgb, var(--marinho) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.folha__miolo { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.folha__alca { flex: none; width: 2.5rem; height: 4px; margin: .6rem auto .2rem; border-radius: var(--raio-pilula); background: var(--borda); }
.folha__busca { flex: none; margin: .6rem .6rem .25rem; -webkit-appearance: none; appearance: none; }
.folha__busca::-webkit-search-cancel-button { display: none; }
.folha__lista { flex: 1; min-height: 0; margin: 0; padding: .35rem; list-style: none; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.folha__opcao { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding: .5rem .75rem; border-radius: var(--raio); cursor: pointer; transition: background-color var(--hover-rapida) var(--suave); }
.folha__opcao[hidden] { display: none; }
.folha__opcao[aria-selected="true"] { font-weight: 700; }
.folha__opcao[aria-selected="true"]::after { content: ""; flex: none; width: 1.1em; height: 1.1em; background: var(--cor-texto);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat; }
.folha__opcao--ativa { background: var(--fundo-suave); }
.folha__opcao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.folha__vazio { margin: 0; padding: 1rem; color: var(--mudo); text-align: center; }
@keyframes folha-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes folha-sobe { from { transform: translateY(100%); } }
@media (hover: hover) and (pointer: fine) {
  .folha__gatilho:hover, .folha__gatilho:focus-visible { border-color: var(--texto); }
  .folha__opcao:hover, .folha__opcao:focus-visible { background: var(--fundo-suave); }
}
.folha__gatilho:focus-visible { outline: none; border-color: var(--anel); box-shadow: 0 0 0 4px var(--halo); } /* como os outros campos */

/* ---------- calendário: máscara DD/MM/AAAA + popover (calendario.js) ---------- */
.calendario { display: grid; gap: .3rem; }
.calendario__campo { position: relative; display: flex; align-items: center; }
.calendario__campo input { flex: 1; min-width: 0; padding-right: 3rem; }
.calendario__abrir { position: absolute; right: .15rem; width: 40px; min-height: 40px; }
.calendario__miolo { display: grid; gap: .5rem; width: 100%; padding: .75rem; }
.calendario__cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.calendario__titulo { display: block; flex: 1; text-align: center; font-weight: 700; }
.calendario__titulo::first-letter { text-transform: uppercase; }
.calendario__semana, .calendario__grade { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.calendario__semana { font-size: var(--t1); color: var(--mudo); }
.calendario__dia { aspect-ratio: 1; min-height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texto); font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color var(--hover-rapida) var(--suave); }
.calendario__dia[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--borda); }
@media (hover: hover) and (pointer: fine) {
  .calendario__dia:hover, .calendario__dia:focus-visible { background: var(--fundo-suave); }
}
.calendario__dia[aria-pressed="true"] { background: var(--cor-forte); color: var(--shari); }
.calendario__acoes { display: flex; justify-content: space-between; gap: .5rem; }

/* ---------- foto: área de soltar com prévia circular (foto.js) ---------- */
.foto { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 2px dashed var(--borda); border-radius: var(--raio-cartao); background: var(--superficie); font-weight: 400; cursor: pointer; transition: border-color var(--hover-media) var(--suave), background-color var(--hover-media) var(--suave); }
.foto > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.foto:has(input:focus-visible) { outline: 3px solid var(--anel); outline-offset: 2px; }
.foto__previa { position: relative; flex: none; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; background: var(--fundo-suave); color: var(--mudo); }
.foto__previa .icone { width: 2rem; height: 2rem; }
.foto__previa--cheia .icone { display: none; }
.foto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto__trocar { position: absolute; inset: 0; display: grid; place-items: center; padding: .25rem; text-align: center; font-size: var(--t1); font-weight: 700; background: color-mix(in srgb, var(--shoyu) 62%, transparent); color: var(--shari); opacity: 0; transition: opacity var(--hover-media) var(--suave); }
.foto__previa:not(.foto__previa--cheia) .foto__trocar { display: none; }
.foto__texto { display: grid; gap: .15rem; min-width: 0; }
.foto__texto small { color: var(--mudo); }
@media (hover: hover) and (pointer: fine) {
  .foto:hover, .foto:focus-within, .foto--sobre { border-color: var(--cor); }
  .foto:hover .foto__trocar, .foto:focus-within .foto__trocar, .foto--sobre .foto__trocar { opacity: 1; }
}

/* ---------- peças que já existiam ---------- */
/* menu do admin: até 1200px, barra com a página atual + gaveta (popover); acima, links em linha */
.admin-menu { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .5rem; min-height: 52px; padding: .25rem .25rem .25rem 1rem; background: var(--marinho); color: var(--shari); box-shadow: 0 1px 0 color-mix(in srgb, #000 25%, transparent); } /* grudada no topo ao rolar */
.admin-menu__atual { display: inline-flex; align-items: center; gap: .45rem; margin-right: auto; font-weight: 700; }
.admin-menu .botao--icone { color: var(--shari); }
.admin-menu .botao--icone::before { background: color-mix(in srgb, var(--shari) 16%, transparent); }
.admin-menu :focus-visible { outline-color: var(--wasabi); }
.admin-menu__links { position: fixed; inset: 0 0 0 auto; width: min(20rem, 88vw); height: 100dvh; max-height: none; margin: 0; padding: .25rem .75rem 1.5rem; border: 0; background: var(--marinho); color: var(--shari); flex-direction: column; gap: .15rem; overflow-y: auto;
  transform: translateX(100%); transition: transform var(--hover-media) var(--suave), overlay var(--hover-media) allow-discrete, display var(--hover-media) allow-discrete; }
.admin-menu__links:popover-open { display: flex; transform: none; }
@starting-style { .admin-menu__links:popover-open { transform: translateX(100%); } }
.admin-menu__links::backdrop { background: rgb(0 0 0 / 0); transition: background-color 280ms var(--suave), overlay 280ms allow-discrete, display 280ms allow-discrete; }
.admin-menu__links:popover-open::backdrop { background: rgb(0 0 0 / .5); }
@starting-style { .admin-menu__links:popover-open::backdrop { background: rgb(0 0 0 / 0); } }
/* na gaveta, os itens entram em cascata (um depois do outro); o Sair por último */
@media (max-width: 74.99rem) {
  /* entrada longa e macia; saída mais curta, acelerando (a transição do estado fechado vale para a saída) */
  .admin-menu__links { transition-duration: 280ms; transition-timing-function: cubic-bezier(.55, 0, 1, .45); }
  .admin-menu__links:popover-open { transition-duration: 520ms; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
  /* na saída, os itens somem juntos (sem cascata) */
  .admin-menu__links:not(:popover-open) a, .admin-menu__links:not(:popover-open) form, .admin-menu__links:not(:popover-open) .admin-menu__cab {
    opacity: 0; transform: translateX(12px); transition: opacity 160ms var(--suave), transform 220ms var(--suave); }
  .admin-menu__links:popover-open a, .admin-menu__links:popover-open form, .admin-menu__links:popover-open .admin-menu__cab {
    transition: opacity 360ms var(--suave), transform 520ms cubic-bezier(.22, 1, .36, 1), background-color var(--hover-rapida) var(--suave);
    transition-delay: calc(140ms + var(--i, 0) * 45ms), calc(140ms + var(--i, 0) * 45ms), 0s; }
  .admin-menu__links a:nth-of-type(2) { --i: 1; } .admin-menu__links a:nth-of-type(3) { --i: 2; } .admin-menu__links a:nth-of-type(4) { --i: 3; } .admin-menu__links a:nth-of-type(5) { --i: 4; } .admin-menu__links a:nth-of-type(6) { --i: 5; } .admin-menu__links a:nth-of-type(7) { --i: 6; } .admin-menu__links a:nth-of-type(8) { --i: 7; } .admin-menu__links a:nth-of-type(9) { --i: 8; } .admin-menu__links a:nth-of-type(10) { --i: 9; } .admin-menu__links a:nth-of-type(11) { --i: 10; }
  .admin-menu__links:popover-open form { --i: 10; }
  @starting-style {
    .admin-menu__links:popover-open a, .admin-menu__links:popover-open form { opacity: 0; transform: translateX(28px); }
    .admin-menu__links:popover-open .admin-menu__cab { opacity: 0; }
  }
}
.admin-menu__cab { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding-left: .5rem; margin-bottom: .25rem; }
.admin-menu a { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: 0 .75rem; border-radius: var(--raio); color: var(--shari); font-weight: 500; text-decoration: none; transition: background-color var(--hover-rapida) var(--suave); }
.admin-menu a[aria-current="page"] { font-weight: 700; background: color-mix(in srgb, var(--shari) 12%, transparent); }
/* na gaveta, o item atual ganha um traço wasabi à esquerda */
.admin-menu a[aria-current="page"]::after { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--wasabi); }
.admin-menu__links form { margin-top: auto; padding-top: .75rem; border-top: 1px solid color-mix(in srgb, var(--shari) 18%, transparent); }
.admin-menu__links form .botao { width: 100%; justify-content: flex-start; gap: .75rem; padding: 0 .75rem; border-radius: var(--raio); font-weight: 500; }
.admin-menu__links form .so-leitor { position: static; width: auto; height: auto; clip-path: none; }
/* hover: a pílula cresce por trás do item e o ícone dá um pulinho com mola */
.admin-menu a { isolation: isolate; }
.admin-menu a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--shari) 14%, transparent); opacity: 0; transform: scale(.82); transition: opacity 220ms var(--suave), transform 420ms cubic-bezier(.34, 1.56, .64, 1); }
.admin-menu a .icone { transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) and (pointer: fine) {
  .admin-menu a:hover::before, .admin-menu a:focus-visible::before { opacity: 1; transform: none; }
  .admin-menu a:hover .icone, .admin-menu a:focus-visible .icone { transform: translateY(-2px) rotate(-8deg) scale(1.08); }
  .admin-menu a:active::before { transform: scale(.94); transition-duration: 120ms; }
}
@media (prefers-reduced-motion: reduce) { .admin-menu a::before, .admin-menu a .icone { transition: opacity 150ms; transform: none; } }
@media (min-width: 75rem) {
  .admin-menu { padding: .25rem 1rem; }
  .admin-menu__atual, .admin-menu__abrir, .admin-menu__cab { display: none; }
  .admin-menu__links { position: static; display: flex; flex: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 .25rem; width: auto; height: auto; padding: 0; background: none; overflow: visible; transform: none; transition: none; }
  .admin-menu a { display: inline-flex; gap: .45rem; min-height: 44px; border-radius: var(--raio-pilula); }
  .admin-menu a[aria-current="page"] { background: none; }
  .admin-menu a[aria-current="page"]::after { left: .75rem; right: .75rem; top: auto; bottom: 5px; width: auto; height: 3px; }
  .admin-menu__links form { margin: 0 0 0 auto; padding: 0; border: 0; }
  .admin-menu__links form .botao { width: 44px; justify-content: center; padding: 0; border-radius: var(--raio-pilula); }
  .admin-menu__links form .so-leitor { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); }
}
.rodape-site { padding: 1.5rem 1rem 5.5rem; text-align: center; font-size: var(--t1); color: var(--mudo); }
.rodape-site p { margin: 0 0 .25rem; }
.rodape-site__dados { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem 1rem; }
.caixa.texto-longo { max-width: 40rem; }
.ir-cardapio { margin: 2rem 0 0; }
/* erro com a arte da loja: a arte em cima no celular, ao lado do texto no desktop */
.erro__arte { display: block; width: min(15rem, 60vw); height: auto; margin: 0 0 1.5rem; border-radius: var(--raio-cartao); transform: rotate(-3deg); box-shadow: 0 6px 0 color-mix(in srgb, var(--texto) 20%, transparent); }
@media (min-width: 760px) {
  .erro--arte { display: grid; grid-template-columns: 15rem 1fr; column-gap: 2.5rem; align-items: center; }
  .erro--arte > .erro__arte { grid-row: 1 / span 4; margin: 0; }
}
/* voltar: "adesivo" como o logo (contorno firme + sombra dura embaixo); sobe no hover, afunda no clique */
.botao--voltar { gap: .65rem; padding: .55rem 1.2rem .55rem .55rem; border-radius: 16px; background: var(--superficie); color: var(--texto);
  box-shadow: inset 0 0 0 2px var(--texto), 0 4px 0 color-mix(in srgb, var(--texto) 35%, transparent);
  transition: transform var(--hover-rapida) var(--suave), box-shadow var(--hover-rapida) var(--suave); }
.botao--voltar::before { display: none; }
.botao--voltar__seta { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wasabi); color: var(--marinho); }
.botao--voltar__seta .icone { width: 18px; height: 18px; stroke-width: 2.2; transition: transform var(--hover-media) var(--mola); }
.botao--voltar:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--texto), 0 1px 0 color-mix(in srgb, var(--texto) 35%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .botao--voltar:hover, .botao--voltar:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--texto), 0 6px 0 color-mix(in srgb, var(--texto) 35%, transparent); }
  .botao--voltar:hover .botao--voltar__seta .icone, .botao--voltar:focus-visible .botao--voltar__seta .icone { transform: translateX(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .botao--voltar:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .botao--voltar:hover, .botao--voltar:focus-visible { transform: none; }
  .botao--voltar:hover .botao--voltar__seta .icone, .botao--voltar:focus-visible .botao--voltar__seta .icone { transform: none; }
}
.nota { margin: 0 0 1.25rem; padding: .8rem 1.1rem; border-radius: var(--raio-cartao); background: var(--fundo-suave); color: var(--mudo); font-size: var(--t1); }

/* ---------- movimento reduzido: só cor e opacidade ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  button:active, .botao:active, .chip:active, .opcao-card:active, .cartao--clicavel:active { transform: none; }
  .botao::before { transform: none; opacity: 0; }
  .chip::after, .opcao-card::after { transform: none; }
  .aviso, dialog.dialogo[open] { animation-name: aviso-fade; }
  dialog.folha__painel, dialog.calendario__painel { animation: none !important; }
  .folha__gatilho[aria-expanded="true"] .folha__seta { transform: none; }
  @keyframes aviso-fade { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .botao:hover::before, .botao:focus-visible::before { opacity: 1; }
  .botao--seguir:hover .icone, .botao--seguir:focus-visible .icone { transform: none; }
  .botao--salvar:hover .ico-salvar > .icone, .botao--salvar:focus-visible .ico-salvar > .icone { animation: none; }
  .cartao--clicavel:hover, .cartao--clicavel:focus-within { transform: none; }
}

/* faixa do admin: e-mail ainda não confirmado, ou aviso do painel */
.faixa-email { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .75rem; padding: .6rem 1rem; background: color-mix(in srgb, var(--wasabi) 26%, var(--superficie)); color: var(--texto); font-size: var(--t1); text-align: center; }
.faixa-email form { margin: 0; }
.faixa-email .link { border: 0; padding: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; }

/* ---------- vitrine: capa, esteira e topo da política no azul-marinho da marca, nos dois temas (como nos posts da loja) ---------- */
.vitrine { --fundo: var(--marinho); --texto: var(--shari); --mudo: color-mix(in srgb, var(--shari) 74%, var(--marinho));
  --fundo-suave: color-mix(in srgb, #fff 8%, var(--marinho)); --superficie: color-mix(in srgb, #fff 6%, var(--marinho));
  --borda: color-mix(in srgb, var(--shari) 24%, var(--marinho)); --cor-texto: var(--cor-clara); --anel: var(--anel-claro);
  position: relative; isolation: isolate; padding-bottom: 1.25rem; margin-bottom: .75rem; border-radius: 0 0 28px 28px; background: var(--fundo); color: var(--texto); }
/* a retícula de pontos no canto, igual à dos posts */
.vitrine::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle, rgb(250 250 247 / .16) 1.3px, transparent 1.8px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 55%); mask-image: radial-gradient(circle at 100% 0, #000, transparent 55%); }
/* o mascote em traço, fraquinho, saindo pela esquerda (como nos posts). A camada fica dentro da vitrine
   e só a máscara passa da borda, então não cria rolagem lateral */
.vitrine--arte::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .09; background: var(--shari);
  -webkit-mask: var(--arte) no-repeat; -webkit-mask-size: min(118vw, 640px); -webkit-mask-position: -30% 85%;
  mask: var(--arte) no-repeat; mask-size: min(118vw, 640px); mask-position: -30% 85%; }
@media (min-width: 900px) { .vitrine--arte::after { -webkit-mask-position: 0 70%; mask-position: 0 70%; opacity: .08; } }

/* ---------- aviso de privacidade: cartão no rodapé, uma vez; com Google Analytics, ele só liga no "Aceitar" ---------- */
.aviso-privacidade { position: fixed; z-index: 60; left: 1rem; right: 1rem; bottom: 1rem; max-width: 26rem; padding: 1.1rem 1.15rem 1.15rem; border-radius: var(--raio-cartao);
  background: var(--marinho); color: var(--shari); box-shadow: 0 20px 40px -16px rgb(0 0 0 / .5);
  --texto: var(--shari); --cor-texto: var(--cor-clara); --anel: var(--anel-claro); }
.aviso-privacidade[hidden] { display: none; }
.aviso-privacidade.aberto { animation: aviso-sobe var(--lenta) var(--mola) both; }
@keyframes aviso-sobe { from { opacity: 0; transform: translateY(24px); } }
.aviso-privacidade__titulo { margin: 0 0 .35rem; font: 400 var(--t4)/1.1 var(--fonte-titulo); letter-spacing: .01em; }
.aviso-privacidade p { margin: 0 0 .9rem; font-size: var(--t1); line-height: 1.5; }
.aviso-privacidade .link { color: var(--cor-clara); }
.aviso-privacidade__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.aviso-privacidade__acoes .botao:only-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .aviso-privacidade { left: 1.5rem; bottom: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .aviso-privacidade.aberto { animation: aviso-aparece var(--media) linear both; } @keyframes aviso-aparece { from { opacity: 0; } } }
.faixa-email .botao { min-height: 36px; padding: .3rem .9rem; }