/* Portal (decisões 0094 e 0117): o site da loja, renderizado no servidor. Tokens e componentes básicos (g-botao, g-input,
   g-aviso, g-pular) vêm do recorte gerado do Design System (css/ds-portal.css); aqui fica só o que é do portal (prefixo
   p-) e as sobreposições da loja. Nenhum estilo inline: a CSP do portal é style-src 'self'.

   A marca da loja chega por /tema/{versão}/{cor}.css, em toda página de loja: ele troca os tokens de ação do Design
   System (--g-acao, --g-acao-hover, --g-sobre-acao, --g-degrade-acao...) e define os --loja-* (--loja-texto para links e
   categoria ativa, --loja-suave, --loja-borda-selecao para seleção e campo, --loja-contorno-acao para o botão que some na
   superfície). --g-acao é só preenchimento: texto e borda da cor da loja usam os --loja-*, que têm o contraste conferido
   pela PaletaDaLoja. Foco e cores de estado nunca herdam a cor da loja. O .p-loja leva galadh-ui, data-tema (claro,
   escuro, sistema), data-fonte e p-loja--lista|grade (MolduraDaLoja).

   Celular primeiro (375 px); a partir de 768 px os itens vão para duas colunas e, a partir de 1024 px, o cardápio ocupa
   dois terços com o resumo da sacola ao lado, até 1200 px. */

/* ---- Escala do portal (decisão 0117): cinco degraus, pesos 400, 600 e 700 ---- */
:root {
    --p-legenda: .8125rem;
    --p-apoio: .9375rem;
    --p-texto: 1rem;
    --p-secao: 1.25rem;
    --p-titulo: clamp(1.75rem, 1.45rem + 1.1vw, 2rem);
}

/* ---- Fontes da loja (decisão 0117): OFL 1.1, servidas pelo Design System. O preload da escolhida (MetadadosDaLoja) usa
   a MESMA URL do url() daqui: com o endereço com hash do @Assets ela desceria duas vezes. Sem o arquivo, a pilha do
   sistema. ---- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/nunito-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/nunito-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/lora-400.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 600; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/lora-600.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("/_content/Begetech.Galadh.Componentes/fontes/lora-700.woff2") format("woff2"); }

.p-corpo { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--g-fundo); -webkit-text-size-adjust: 100%; }
/* As regiões vivas vazias ficam fora da vista, mas na árvore de acessibilidade: com display:none o leitor de tela não
   anuncia o texto que entra (o "Código copiado" do Pix, o "Item adicionado" da barra e do resumo). */
.p-oculto, .p-barra-sacola__aviso:empty, .p-resumo-sacola__aviso:empty, .p-pix__copiado:empty { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.p-nota { font-size: var(--p-legenda); color: var(--g-secundario); }
.p-aviso { color: var(--g-texto); background: var(--g-info-fundo); border-color: var(--g-info); }
.p-aviso p { margin-top: .35rem; }

/* ---- Páginas de estado (404, tente de novo, erro, entrada, prova) ---- */
.p-estado { box-sizing: border-box; max-width: 40rem; margin: 0 auto; padding: var(--g-espaco-8) var(--g-espaco-4); display: flex; flex-direction: column; gap: var(--g-espaco-3); }
.p-estado h1 { font-size: var(--p-titulo); line-height: 1.15; font-weight: 700; }
.p-prova__links { display: flex; flex-direction: column; gap: var(--g-espaco-2); padding-left: 1.25rem; }
.p-prova__form { display: flex; flex-direction: column; gap: var(--g-espaco-3); max-width: 20rem; }

/* ---- Moldura da loja (MolduraDaLoja). A pilha de fonte vale aqui, depois do .galadh-ui do recorte (que agora também
   está no .p-loja): sem system-ui, o Android e o iPhone caíam na Arial. ---- */
.p-loja {
    box-sizing: border-box; width: 100%; max-width: 75rem; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; background: var(--g-superficie); color: var(--g-texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: var(--p-texto); line-height: 1.5;
}
.p-loja[data-fonte="inter"] { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.p-loja[data-fonte="nunito"] { font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.p-loja[data-fonte="poppins"] { font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.p-loja[data-fonte="lora"] { font-family: "Lora", Georgia, "Times New Roman", serif; }
.p-loja > main, .p-loja__corpo { flex: 1 0 auto; }
.p-loja :where(h1, h2, h3) { font-weight: 700; }

/* ---- Sobreposições do Design System na loja (decisão 0117, item 2). Especificidade maior que a do recorte; o recorte
   gerado nunca é editado. ---- */
:where(.p-loja) a:where(:not([class])), .p-link { color: var(--loja-texto); }
.p-loja .g-botao--discreto { color: var(--loja-texto); }
.p-loja .g-input:hover:not(:disabled), .p-loja .g-input:focus { border-color: var(--loja-borda-selecao); }
.p-loja .g-botao--primario { border-color: var(--loja-contorno-acao); box-shadow: none; }
.p-loja .g-botao--primario:hover:not(:disabled) { background: var(--g-acao-hover); box-shadow: none; }
.p-loja .g-botao--primario:active:not(:disabled) { transform: none; }
.p-link { font-weight: 600; }

/* ---- CabecalhoLoja ---- */
.p-cabecalho { padding: 0 var(--g-espaco-4) var(--g-espaco-5); }
/* Altura explícita, e não aspect-ratio + max-height: com os dois, o navegador encolhe a LARGURA da capa para manter a
   proporção. 16:6 no celular (37,5% da largura), no máximo 220 px. */
.p-cabecalho__capa { margin: 0 calc(-1 * var(--g-espaco-4)); height: min(37.5vw, 220px); overflow: hidden; background: var(--loja-suave); }
.p-cabecalho--sem-capa .p-cabecalho__capa { height: 4rem; }
.p-cabecalho__capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-cabecalho__identidade { position: relative; display: flex; align-items: flex-end; gap: var(--g-espaco-3); margin-top: -2.5rem; }
/* O logo fica sempre num quadro branco, nos dois temas: um PNG transparente com letra escura sumiria no escuro. */
.p-cabecalho__quadro { flex: 0 0 auto; box-sizing: border-box; width: 5.25rem; height: 5.25rem; padding: .375rem; border: 1px solid var(--g-borda); border-radius: 1.125rem; background: #FFFFFF; }
.p-cabecalho__logo { display: block; box-sizing: border-box; width: 100%; height: 100%; border-radius: .75rem; object-fit: contain; }
.p-cabecalho__logo--inicial { display: grid; place-items: center; font-size: var(--p-secao); font-weight: 700; color: var(--g-sobre-acao); background: var(--g-acao); }
.p-cabecalho__nome { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; min-width: 0; padding-bottom: .125rem; }
.p-cabecalho__nome h1 { font-size: var(--p-titulo); line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; }
.p-logistica { display: flex; flex-wrap: wrap; margin: var(--g-espaco-4) 0 0; padding: 0; list-style: none; font-size: var(--p-apoio); color: var(--g-secundario); }
.p-logistica li + li::before { content: "·" / ""; margin: 0 .5rem; }
.p-cabecalho__acoes { display: flex; flex-wrap: wrap; gap: var(--g-espaco-2); margin: var(--g-espaco-3) 0 0; }
.p-cabecalho__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--g-espaco-4); border-radius: 999px; background: var(--g-superficie-alta); color: var(--g-texto); font-size: var(--p-apoio); font-weight: 600; text-decoration: none; }
.p-cabecalho__link:hover { background: var(--loja-suave); color: var(--loja-texto); }
.p-cabecalho__recado { margin-top: var(--g-espaco-4); padding: var(--g-espaco-3) var(--g-espaco-4); border-radius: var(--g-raio); background: var(--loja-suave); color: var(--g-texto); white-space: pre-line; overflow-wrap: anywhere; }

/* O estado nunca é só cor: o texto diz; o ponto é decoração. */
.p-status { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .2rem .7rem; border-radius: 999px; font-size: var(--p-legenda); font-weight: 600; color: var(--g-sucesso); background: var(--g-sucesso-fundo); }
.p-status__ponto { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.p-status--fecha-em-breve { color: var(--g-atencao); background: var(--g-atencao-fundo); }
.p-status--fechada, .p-status--pausada { color: var(--g-perigo); background: var(--g-perigo-fundo); }

/* ---- Barra presa: a busca (details) e as categorias ---- */
.p-barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--g-espaco-1); padding: 0 var(--g-espaco-2); background: var(--g-superficie); border-bottom: 1px solid var(--g-borda); }
.p-busca { flex: 0 0 auto; }
.p-busca__abrir { display: grid; place-items: center; width: 44px; height: 44px; margin: .25rem 0; border-radius: 999px; color: var(--g-texto); list-style: none; cursor: pointer; }
.p-busca__abrir::-webkit-details-marker { display: none; }
.p-busca__abrir:hover { background: var(--g-superficie-alta); }
/* Aberta, a busca ocupa a barra: o ícone (que fecha) à esquerda e o formulário ao lado. */
.p-busca[open] { flex: 1 1 auto; padding: .375rem 0; }
.p-busca[open] .p-busca__abrir { float: left; margin: 0 var(--g-espaco-2) 0 0; background: var(--loja-suave); color: var(--loja-texto); }
.p-busca__form { display: flex; gap: var(--g-espaco-2); }
.p-busca__form .g-input { flex: 1 1 auto; min-height: 44px; padding: .5rem .85rem; font-size: var(--p-texto); }
.p-busca__form .g-botao { min-height: 44px; }
.p-barra:has(.p-busca[open]) .p-categorias { display: none; }
.p-categorias { flex: 1 1 auto; min-width: 0; }
.p-categorias ul { position: relative; display: flex; gap: var(--g-espaco-1); margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.p-categorias li { flex: 0 0 auto; scroll-snap-align: start; }
.p-categorias a { display: inline-flex; align-items: center; min-height: 40px; margin: .375rem 0; padding: 0 var(--g-espaco-4); border-radius: 999px; color: var(--g-texto); font-size: var(--p-apoio); font-weight: 600; text-decoration: none; white-space: nowrap; }
.p-categorias a:hover { background: var(--g-superficie-alta); }
.p-categorias a[aria-current="true"] { background: var(--loja-suave); color: var(--loja-texto); }

/* ---- Seções, "Mais pedidos" e o cartão do item ---- */
.p-cardapio { min-width: 0; padding-bottom: var(--g-espaco-6); }
.p-cardapio > .p-nota, .p-cardapio > .p-vazio { padding-left: var(--g-espaco-4); padding-right: var(--g-espaco-4); }
.p-cardapio > .p-nota { padding-top: var(--g-espaco-3); }
.p-secao { scroll-margin-top: 4rem; padding: var(--g-espaco-6) var(--g-espaco-4) 0; }
.p-secao h2, .p-mais-pedidos__titulo { margin-bottom: var(--g-espaco-2); font-size: var(--p-secao); line-height: 1.3; letter-spacing: -.01em; }
.p-itens { margin: 0; padding: 0; list-style: none; }
/* O "+" volta a #item-{id}: a margem deixa o item abaixo da barra presa, e não embaixo dela. */
.p-item { position: relative; scroll-margin-top: 4.5rem; border-bottom: 1px solid var(--g-borda); }
.p-item:last-child { border-bottom: 0; }
.p-item__corpo { display: grid; grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "texto foto"; gap: var(--g-espaco-4); align-items: start; padding: var(--g-espaco-4) 0; color: inherit; text-decoration: none; }
.p-item--sem-foto .p-item__corpo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto"; }
a.p-item__corpo:hover .p-item__nome { color: var(--loja-texto); }
.p-item__foto { grid-area: foto; display: block; width: 112px; height: 112px; border-radius: var(--g-raio); object-fit: cover; background: var(--g-superficie-alta); }
.p-item__texto { grid-area: texto; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.p-item__nome { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.p-item__descricao { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--g-secundario); font-size: var(--p-apoio); line-height: 1.4; }
.p-item__preco { margin-top: .25rem; font-size: var(--p-texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.p-item--indisponivel .p-item__nome, .p-item--indisponivel .p-item__preco { color: var(--g-secundario); }
.p-item--indisponivel .p-item__foto { opacity: .55; }
.p-selo { align-self: flex-start; margin-top: .3rem; padding: .1rem .55rem; border-radius: 999px; font-size: var(--p-legenda); font-weight: 600; color: var(--g-secundario); background: var(--g-superficie-alta); }
/* O "+": no canto da foto, ou no fim da linha do preço sem foto (o texto abre espaço para ele). */
.p-item__mais { position: absolute; right: -.25rem; bottom: .5rem; margin: 0; }
.p-item--rapido.p-item--sem-foto .p-item__texto { padding-right: 3.5rem; }
.p-item--sem-foto .p-item__mais { right: 0; bottom: 1rem; }
.p-item__adicionar { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--loja-contorno-acao); border-radius: 999px; background: var(--g-acao); color: var(--g-sobre-acao); cursor: pointer; box-shadow: 0 0 0 3px var(--g-superficie); touch-action: manipulation; }
.p-item__adicionar:hover { background: var(--g-acao-hover); }
.p-vazio { padding-top: var(--g-espaco-8); padding-bottom: var(--g-espaco-8); text-align: center; color: var(--g-secundario); }

/* Grade (p-loja--grade): foto em cima, duas colunas já no celular. */
.p-loja--grade .p-itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-espaco-5) var(--g-espaco-3); padding-top: var(--g-espaco-2); }
.p-loja--grade .p-item { border-bottom: 0; }
.p-loja--grade .p-item__corpo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "foto" "texto"; gap: var(--g-espaco-2); padding: 0; }
.p-loja--grade .p-item__foto { width: 100%; height: auto; aspect-ratio: 1; }
.p-loja--grade .p-item__mais { top: .5rem; right: .5rem; bottom: auto; }
.p-loja--grade .p-item--sem-foto .p-item__corpo { height: 100%; box-sizing: border-box; padding: var(--g-espaco-3); border-radius: var(--g-raio); background: var(--g-fundo); }
.p-loja--grade .p-item--sem-foto .p-item__mais { top: auto; right: .5rem; bottom: .5rem; }

.p-mais-pedidos { padding-top: var(--g-espaco-5); }
.p-mais-pedidos__titulo { padding: 0 var(--g-espaco-4); }
.p-carrossel { display: flex; gap: var(--g-espaco-3); margin: 0; padding: var(--g-espaco-1) var(--g-espaco-4) var(--g-espaco-2); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--g-espaco-4); scrollbar-width: thin; }
.p-destaque { flex: 0 0 9.5rem; scroll-snap-align: start; }
.p-destaque__corpo { display: flex; flex-direction: column; gap: .25rem; height: 100%; color: inherit; text-decoration: none; }
.p-destaque__foto { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--g-raio); object-fit: cover; background: var(--g-superficie-alta); }
.p-destaque--sem-foto .p-destaque__corpo { box-sizing: border-box; min-height: 9.5rem; justify-content: flex-end; padding: var(--g-espaco-3); border-radius: var(--g-raio); background: var(--loja-suave); }
.p-destaque__nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--p-apoio); font-weight: 600; line-height: 1.3; }
.p-destaque__corpo:hover .p-destaque__nome { color: var(--loja-texto); }
.p-destaque__preco { font-size: var(--p-apoio); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Resumo da sacola (a coluna lateral do desktop; no celular, a barra presa ao pé faz o papel dele) ---- */
.p-resumo-sacola { display: none; }
.p-resumo-sacola__titulo { font-size: var(--p-secao); }
.p-resumo-sacola__aviso { font-size: var(--p-apoio); font-weight: 600; color: var(--g-sucesso); }

/* ---- RodapeLegal ---- */
.p-rodape { margin-top: var(--g-espaco-8); padding: var(--g-espaco-6) var(--g-espaco-4) calc(var(--g-espaco-6) + env(safe-area-inset-bottom)); background: var(--g-fundo); color: var(--g-secundario); font-size: var(--p-legenda); }
.p-rodape p + p { margin-top: .35rem; }
.p-rodape strong { color: var(--g-texto); }
.p-rodape a { color: var(--g-secundario); overflow-wrap: anywhere; }
.p-rodape a:hover { color: var(--g-texto); }
.p-rodape__plataforma { margin-top: var(--g-espaco-3) !important; }

/* ---- Topo das páginas internas da loja ---- */
.p-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--g-espaco-3); padding: var(--g-espaco-2) var(--g-espaco-4); border-bottom: 1px solid var(--g-borda); }
.p-topo__voltar { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; min-width: 0; color: var(--g-texto); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.p-topo .p-status { flex: 0 0 auto; }

/* ---- FolhaItem ---- */
/* Altura explícita até 960 px, como a capa: com aspect-ratio + max-height o navegador encolhia a LARGURA da foto. A
   proporção fica só na tela larga, onde a coluna da grade dá a largura. Sem foto, o bloco não existe. */
.p-folha__foto { height: min(75vw, 320px); overflow: hidden; background: var(--g-superficie-alta); }
.p-folha__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-folha__corpo { padding: var(--g-espaco-5) var(--g-espaco-4) 0; }
.p-folha__nome { font-size: var(--p-titulo); line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; }
.p-folha__preco { margin-top: var(--g-espaco-2); font-size: var(--p-secao); font-weight: 700; font-variant-numeric: tabular-nums; }
.p-folha__descricao { margin-top: var(--g-espaco-3); color: var(--g-secundario); white-space: pre-line; overflow-wrap: anywhere; }
.p-folha__form { margin-top: var(--g-espaco-5); }
.p-resumo-erros { margin-bottom: var(--g-espaco-4); color: var(--g-perigo); background: var(--g-perigo-fundo); }
.p-resumo-erros ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.p-resumo-erros a { color: inherit; }

/* ---- GrupoComplemento e MeioAMeio ---- */
.p-grupo { margin: 0 0 var(--g-espaco-5) !important; }
.p-grupo__cabecalho { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem var(--g-espaco-3); width: 100%; padding: .65rem .85rem; border-radius: var(--g-raio-controle); background: var(--g-superficie-alta); }
.p-grupo__nome { font-weight: 700; }
.p-grupo__regra { font-size: var(--p-legenda); color: var(--g-secundario); }
.p-grupo--erro .p-grupo__cabecalho { background: var(--g-perigo-fundo); box-shadow: inset 3px 0 0 var(--g-perigo); }
.p-grupo__erro { margin: .5rem 0 0; color: var(--g-perigo); font-size: var(--p-apoio); font-weight: 600; }
.p-opcoes { margin: 0; padding: 0; list-style: none; }
.p-opcao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-espaco-3); min-height: 48px; padding: .4rem .85rem; border-bottom: 1px solid var(--g-borda); cursor: pointer; }
.p-opcao input[type="radio"], .p-opcao input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--loja-borda-selecao); }
.p-opcao--quantidade { grid-template-columns: minmax(0, 1fr) auto 5.5rem; cursor: default; }
.p-opcao__numero { min-height: 44px; padding: .4rem .6rem; text-align: center; font-size: var(--p-texto); }
.p-opcao__nome { overflow-wrap: anywhere; }
.p-opcao__preco { font-size: var(--p-apoio); color: var(--g-secundario); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-opcao--remocao .p-opcao__nome { color: var(--g-secundario); }
.p-meio { display: flex; align-items: center; gap: var(--g-espaco-3); padding: var(--g-espaco-3) .85rem 0; }
.p-meio__desenho { flex: 0 0 auto; }
.p-meio__parte { fill: var(--g-superficie-alta); stroke: var(--g-borda-campo); stroke-width: 1.5; }
.p-meio__parte--cheia { fill: var(--g-acao); }
.p-meio__regra { font-size: var(--p-apoio); color: var(--g-secundario); }

/* ---- Observação (a ajuda no "?"), quantidade (− e + do módulo) e Adicionar ---- */
.p-observacao { display: flex; flex-direction: column; gap: .35rem; margin-bottom: var(--g-espaco-4); }
.p-observacao__rotulo { display: flex; align-items: center; gap: var(--g-espaco-2); }
.p-observacao label { font-weight: 600; }
.p-observacao textarea.g-input { padding: .6rem .85rem; min-height: 4.5rem; resize: vertical; font-size: var(--p-texto); }
.p-ajuda { position: relative; }
.p-ajuda > summary { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--g-superficie-alta); color: var(--g-texto); font-weight: 700; list-style: none; cursor: pointer; }
.p-ajuda > summary::-webkit-details-marker { display: none; }
.p-ajuda > p { position: absolute; z-index: 6; top: 2.4rem; left: 0; width: max-content; max-width: min(18rem, 75vw); padding: .5rem .75rem; border-radius: var(--g-raio-controle); background: var(--g-texto); color: var(--g-superficie); font-size: var(--p-legenda); }
.p-folha__rodape { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: flex-end; gap: var(--g-espaco-3); margin: 0 calc(-1 * var(--g-espaco-4)); padding: var(--g-espaco-3) var(--g-espaco-4) calc(var(--g-espaco-3) + env(safe-area-inset-bottom)); background: var(--g-superficie); box-shadow: var(--g-sombra-flutuante); }
.p-quantidade { display: flex; flex-direction: column; gap: .2rem; font-size: var(--p-legenda); color: var(--g-secundario); }
.p-quantidade__controle { display: flex; align-items: center; gap: var(--g-espaco-1); }
.p-quantidade .g-input { width: 4rem; min-height: 48px; padding: .4rem .5rem; text-align: center; font-size: var(--p-texto); }
.p-adicionar { flex: 1 1 auto; min-height: 48px; font-size: var(--p-texto); font-weight: 700; }
.p-folha__form > .p-nota { margin-top: var(--g-espaco-2); }

/* ---- Barra da sacola (presa ao pé da página da loja no celular; só link, funciona sem JavaScript) ---- */
.p-barra-sacola { position: sticky; bottom: 0; z-index: 6; display: flex; flex-direction: column; gap: .35rem; padding: var(--g-espaco-2) var(--g-espaco-4) calc(var(--g-espaco-2) + env(safe-area-inset-bottom)); background: var(--g-superficie); box-shadow: var(--g-sombra-flutuante); }
.p-barra-sacola__aviso { font-size: var(--p-legenda); font-weight: 600; color: var(--g-sucesso); }
.p-barra-sacola__minimo { font-size: var(--p-legenda); color: var(--g-secundario); }
.p-barra-sacola__botao { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--g-espaco-3); min-height: 48px; padding: 0 var(--g-espaco-4); border: 1px solid var(--loja-contorno-acao); border-radius: var(--g-raio-controle); background: var(--g-acao); color: var(--g-sobre-acao); font-weight: 700; text-decoration: none; }
.p-barra-sacola__botao:hover { background: var(--g-acao-hover); }
.p-barra-sacola__quantidade { font-size: var(--p-legenda); font-weight: 600; }
.p-barra-sacola__valor { font-variant-numeric: tabular-nums; }

/* ---- Sacola, finalizar, pagamento e acompanhamento: seções com título, sem caixa em volta de cada uma ---- */
.p-pagina-pedido { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--g-espaco-5); padding: var(--g-espaco-5) var(--g-espaco-4) var(--g-espaco-6); }
.p-pagina-pedido__titulo { font-size: var(--p-titulo); line-height: 1.15; letter-spacing: -.02em; }
.p-pagina-pedido__colunas { display: flex; flex-direction: column; gap: var(--g-espaco-6); }
.p-pagina-pedido__principal { display: flex; flex-direction: column; gap: var(--g-espaco-8); min-width: 0; }
.p-pagina-pedido__lateral { display: flex; flex-direction: column; gap: var(--g-espaco-4); min-width: 0; }
.p-pagina-pedido .g-aviso p { margin-top: .35rem; }
.p-bloco { margin: 0; display: flex; flex-direction: column; gap: var(--g-espaco-3); min-width: 0; }
.p-bloco__titulo { padding: 0; font-size: var(--p-secao); font-weight: 700; line-height: 1.3; }
.p-bloco__rodape { margin: 0; }
/* O fieldset fica sem borda (o recorte zera .galadh-ui fieldset). A legenda não é item flex, então leva a própria margem. */
.p-campos { display: flex; flex-direction: column; gap: var(--g-espaco-3); min-width: 0; }
.p-campos > legend { margin-bottom: var(--g-espaco-3); }
.p-minimo { padding: var(--g-espaco-3); border-radius: var(--g-raio); background: var(--g-atencao-fundo); color: var(--g-texto); }
.p-continuar { width: 100%; min-height: 48px; font-size: var(--p-texto); font-weight: 700; }
.p-continuar:disabled { opacity: .55; cursor: not-allowed; }
.p-mudanca { color: var(--g-texto); background: var(--g-atencao-fundo); border-color: var(--g-atencao); }
.p-mudanca ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.p-detalhes > summary { display: flex; align-items: center; gap: var(--g-espaco-2); min-height: 48px; font-size: var(--p-secao); font-weight: 700; cursor: pointer; }
.p-detalhes > .p-campo { margin-top: var(--g-espaco-2); }
/* O troco aparece por padrão e some quando a forma marcada não é dinheiro. Sem :has, ou sem forma marcada, ele fica; o
   servidor ignora o troco fora do dinheiro. */
#finalizar-pagamento:has(input[name="pagamento"]:checked:not([value="Dinheiro"])) .p-troco { display: none; }

.p-linhas-sacola { margin: 0; padding: 0; list-style: none; }
.p-linha-sacola { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem var(--g-espaco-3); padding: var(--g-espaco-3) 0; border-bottom: 1px solid var(--g-borda); }
.p-linha-sacola:last-child { border-bottom: 0; }
.p-linha-sacola__texto { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.p-linha-sacola__nome { font-weight: 600; overflow-wrap: anywhere; }
.p-linha-sacola__quantidade { color: var(--g-secundario); font-variant-numeric: tabular-nums; }
.p-linha-sacola__detalhe { font-size: var(--p-legenda); color: var(--g-secundario); overflow-wrap: anywhere; }
.p-linha-sacola__problema { font-size: var(--p-legenda); font-weight: 600; color: var(--g-perigo); }
.p-linha-sacola__valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-linha-sacola--problema .p-linha-sacola__valor { color: var(--g-perigo); font-weight: 600; }
.p-linha-sacola__acoes { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--g-espaco-2); }
.p-passo { width: 44px; height: 44px; border: 1px solid var(--g-borda-campo); border-radius: 50%; background: var(--g-superficie); color: var(--g-texto); font-size: var(--p-secao); line-height: 1; cursor: pointer; touch-action: manipulation; }
.p-passo:hover:not(:disabled) { border-color: var(--loja-borda-selecao); }
.p-passo:disabled { opacity: .45; cursor: not-allowed; }
.p-passo__valor { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-linha-sacola__tirar { margin-left: auto; min-height: 44px; }

.p-escolha { display: flex; flex-wrap: wrap; gap: var(--g-espaco-2); margin: 0; padding: 0; border: 0; }
.p-escolha__opcao { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 var(--g-espaco-4); border: 1px solid var(--g-borda-campo); border-radius: var(--g-raio-controle); cursor: pointer; }
.p-escolha__opcao:has(input:checked) { border-color: var(--loja-borda-selecao); box-shadow: inset 0 0 0 1px var(--loja-borda-selecao); }
.p-escolha__opcao input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--loja-borda-selecao); }
.p-escolha__opcao--linha { display: flex; }
.p-escolha__grupo { font-size: var(--p-apoio); font-weight: 600; color: var(--g-secundario); }
.p-campos-entrega { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g-espaco-3); }
.p-campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.p-campo label { font-weight: 600; }
.p-campo .g-input { padding: .6rem .85rem; font-size: var(--p-texto); }
.p-campo select.g-input { padding-right: 2rem; }
.p-campo textarea.g-input { min-height: 4.5rem; resize: vertical; }
.p-campo .g-input[aria-invalid="true"] { border-color: var(--g-perigo); }
.p-campo__erro { margin: 0; color: var(--g-perigo); font-size: var(--p-apoio); font-weight: 600; }

.p-resumo { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.p-resumo__linha { display: flex; justify-content: space-between; gap: var(--g-espaco-3); }
.p-resumo__linha dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-resumo__linha dt { color: var(--g-secundario); overflow-wrap: anywhere; }
.p-resumo__total { padding-top: .4rem; border-top: 1px solid var(--g-borda); font-size: var(--p-texto); font-weight: 700; }
.p-resumo__total dt { color: var(--g-texto); }
.p-itens-resumo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.p-itens-resumo li { display: flex; justify-content: space-between; gap: var(--g-espaco-3); }
.p-itens-resumo li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.p-itens-resumo li > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-itens-resumo__detalhe { display: block; color: var(--g-secundario); }

.p-pix { display: flex; flex-direction: column; gap: var(--g-espaco-3); }
.p-pix__titulo { font-size: var(--p-secao); }
.p-pix__valor { font-size: var(--p-titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
.p-pix__dados { display: flex; flex-direction: column; gap: .25rem; margin: 0; }
.p-pix__dados div { display: flex; flex-wrap: wrap; gap: .4rem; }
.p-pix__dados dt { color: var(--g-secundario); }
.p-pix__dados dt::after { content: ":"; }
.p-pix__dados dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.p-pix__copia { display: flex; flex-direction: column; gap: .5rem; }
.p-pix__rotulo { font-weight: 600; }
.p-pix__codigo.g-input { padding: .6rem .85rem; font-family: var(--g-fonte-mono); font-size: var(--p-legenda); word-break: break-all; resize: none; }
.p-pix__copiar { min-height: 48px; font-size: var(--p-texto); }
.p-pix__copiado { font-weight: 600; color: var(--g-sucesso); }
.p-pix__qr summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--loja-texto); font-weight: 600; }
.p-pix__qr img { display: block; width: 240px; max-width: 100%; height: auto; margin-top: var(--g-espaco-2); image-rendering: pixelated; }
.p-pix__passos { margin: 0; padding-left: 1.25rem; color: var(--g-secundario); }
.p-pix__estado { font-weight: 600; }
.p-pix__acoes { display: flex; flex-wrap: wrap; gap: var(--g-espaco-3); margin: 0; }

.p-pedido__numero { color: var(--g-secundario); font-weight: 600; }
.p-pedido__estado { font-size: var(--p-titulo); line-height: 1.15; }
.p-pedido__estado--encerrado { color: var(--g-perigo); }
.p-pedido__agendado { font-weight: 600; }
.p-linha-do-tempo { margin: 0; padding: 0; list-style: none; }
.p-etapa { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--g-espaco-3); min-height: 44px; }
.p-etapa:not(:last-child)::before { content: ""; position: absolute; left: calc(.875rem - 1px); top: calc(50% + .875rem); height: calc(100% - 1.75rem); width: 2px; background: var(--g-borda); }
.p-etapa__marca { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; box-sizing: border-box; border: 2px solid var(--g-borda-campo); border-radius: 50%; font-size: var(--p-legenda); font-weight: 700; background: var(--g-superficie); }
.p-etapa__hora { font-size: var(--p-apoio); color: var(--g-secundario); font-variant-numeric: tabular-nums; }
.p-etapa--feita .p-etapa__marca { border-color: var(--g-sucesso); background: var(--g-sucesso); color: var(--g-superficie); }
.p-etapa--atual .p-etapa__marca { border-color: var(--loja-borda-selecao); box-shadow: inset 0 0 0 4px var(--g-superficie); background: var(--g-acao); }
.p-etapa--atual .p-etapa__nome { font-weight: 700; }
.p-etapa--futura .p-etapa__nome { color: var(--g-secundario); }
.p-etapa--encerrada .p-etapa__marca { border-color: var(--g-perigo); background: var(--g-perigo); color: var(--g-superficie); }
.p-etapa--encerrada .p-etapa__nome { font-weight: 700; color: var(--g-perigo); }

/* ---- Etapa C: topo da loja, entrada, agenda, agendamento, cashback, sobre e privacidade ---- */
.p-topo-loja { padding: var(--g-espaco-2) var(--g-espaco-4); border-bottom: 1px solid var(--g-borda); }
.p-topo-loja__marca { display: inline-flex; align-items: center; gap: var(--g-espaco-3); min-height: 48px; min-width: 0; color: var(--g-texto); font-weight: 700; text-decoration: none; }
.p-topo-loja__logo { flex: 0 0 auto; box-sizing: border-box; width: 40px; height: 40px; padding: 3px; border-radius: 10px; object-fit: contain; background: #FFFFFF; }
.p-topo-loja__logo--inicial { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--g-sobre-acao); background: var(--g-acao); font-weight: 700; }
.p-topo-loja__nome { overflow-wrap: anywhere; }
.p-coleta { margin: 0; font-size: var(--p-legenda); color: var(--g-secundario); }
.p-coleta a { margin-left: .25rem; color: var(--loja-texto); }
.p-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-espaco-3); margin: 0; }
.p-lista { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.p-dados { display: flex; flex-direction: column; gap: var(--g-espaco-2); margin: 0; }
.p-dados > div { display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); gap: var(--g-espaco-3); }
.p-dados dt { color: var(--g-secundario); }
/* Decisão 0166: horários de funcionamento, um por linha. */
.p-linhas { display: flex; flex-direction: column; gap: 2px; }
.p-dados dd { margin: 0; overflow-wrap: anywhere; }
.p-dados dd a { color: var(--loja-texto); font-weight: 600; }
.p-dados__texto { white-space: pre-line; overflow-wrap: anywhere; }
.p-trocar { margin-left: .5rem; font-size: var(--p-legenda); font-weight: 600; color: var(--loja-texto); }
.p-bloco__subtitulo { margin-top: var(--g-espaco-2); font-size: var(--p-texto); font-weight: 700; }

.p-atalhos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g-espaco-3); }
.p-atalho { display: flex; flex-direction: column; gap: .2rem; min-height: 48px; padding: var(--g-espaco-3) var(--g-espaco-4); border-radius: var(--g-raio); color: var(--g-texto); text-decoration: none; background: var(--g-fundo); }
.p-atalho:hover { background: var(--loja-suave); }

.p-escolhas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--g-espaco-2); }
.p-escolha-link { display: flex; flex-direction: column; gap: .15rem; min-height: 48px; justify-content: center; padding: var(--g-espaco-2) var(--g-espaco-4); border: 1px solid var(--g-borda-campo); border-radius: var(--g-raio-controle); color: var(--g-texto); text-decoration: none; }
.p-escolha-link:hover { border-color: var(--loja-borda-selecao); }
.p-escolha-link--atual { border-color: var(--loja-borda-selecao); box-shadow: inset 0 0 0 1px var(--loja-borda-selecao); }

.p-dias ul { display: flex; gap: var(--g-espaco-2); margin: 0; padding: 0 0 var(--g-espaco-1); list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
/* Decisão 0165: a fileira esmaece na borda direita para mostrar que rola; a folga no fim deixa o último dia inteiro. */
.p-dias ul { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); padding-inline-end: 2.5rem; }
.p-dias li { flex: 0 0 auto; scroll-snap-align: start; }
.p-dia { display: inline-flex; align-items: center; justify-content: center; min-width: 4.5rem; min-height: 48px; padding: 0 var(--g-espaco-3); border: 1px solid var(--g-borda-campo); border-radius: var(--g-raio-controle); color: var(--g-texto); font-size: var(--p-apoio); font-weight: 600; text-decoration: none; white-space: nowrap; }
.p-dia:hover { border-color: var(--loja-borda-selecao); }
.p-dia--atual { border-color: var(--loja-borda-selecao); background: var(--g-acao); color: var(--g-sobre-acao); }
.p-grade { display: flex; flex-direction: column; gap: var(--g-espaco-4); }
/* Decisão 0167: atalhos para Manhã, Tarde e Noite; a seção para com folga abaixo do topo. */
.p-atalhos-periodo { display: flex; flex-wrap: wrap; gap: var(--g-espaco-2); }
.p-atalhos-periodo a { padding: var(--g-espaco-1) var(--g-espaco-3); border: 1px solid var(--g-borda); border-radius: 999px; color: inherit; text-decoration: none; font-size: var(--p-legenda); }
.p-periodo { scroll-margin-top: var(--g-espaco-4); }
.p-periodo__titulo { margin-bottom: var(--g-espaco-2); font-size: var(--p-apoio); font-weight: 600; color: var(--g-secundario); }
.p-horarios-livres { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--g-espaco-2); }
.p-horario { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--g-borda-campo); border-radius: var(--g-raio-controle); color: var(--g-texto); font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; }
.p-horario:hover { border-color: var(--loja-borda-selecao); }
.p-horario--atual { border-color: var(--loja-borda-selecao); box-shadow: inset 0 0 0 1px var(--loja-borda-selecao); }

.p-cashback__saldo { margin: 0; font-size: var(--p-titulo); font-weight: 700; color: var(--g-sucesso); font-variant-numeric: tabular-nums; }
.p-extrato { margin: 0; padding: 0; list-style: none; }
.p-extrato__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--g-espaco-3); padding: var(--g-espaco-3) 0; border-bottom: 1px solid var(--g-borda); }
.p-extrato__linha:last-child { border-bottom: 0; }
.p-extrato__texto, .p-extrato__valores { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.p-extrato__texto { overflow-wrap: anywhere; }
.p-extrato__valores { align-items: flex-end; text-align: right; }
.p-extrato__valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--g-sucesso); }
.p-extrato__valor--saida { color: var(--g-texto); }

.p-tabela { width: 100%; border-collapse: collapse; font-size: var(--p-apoio); }
.p-tabela th, .p-tabela td { padding: .5rem .25rem; border-bottom: 1px solid var(--g-borda); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.p-tabela th { color: var(--g-secundario); font-weight: 600; }
.p-tabela__numero { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }

.p-legal h2 { margin-top: var(--g-espaco-3); font-size: var(--p-secao); }
.p-legal p { max-width: 70ch; white-space: pre-line; overflow-wrap: anywhere; }
.p-legal__secao { display: flex; flex-direction: column; gap: var(--g-espaco-2); }

/* ---- Celular e tablet: o botão de avançar da sacola e do finalizar fica preso ao pé. O resumo vira parte da página
   (display: contents), para o pé ter a página inteira como bloco e já aparecer na primeira tela; a página leva o
   scroll-padding-bottom da altura dele, e o campo focado não fica embaixo do pé (WCAG 2.4.11). ---- */
@media (max-width: 959.98px) {
    .p-pagina-pedido__lateral { display: contents; }
    .p-pe { position: sticky; bottom: 0; z-index: 4; margin: 0 calc(-1 * var(--g-espaco-4)); padding: var(--g-espaco-3) var(--g-espaco-4) calc(var(--g-espaco-3) + env(safe-area-inset-bottom)); background: var(--g-superficie); box-shadow: var(--g-sombra-flutuante); }
    html:has(.p-pe) { scroll-padding-bottom: 6rem; }
}

/* ---- Telas médias (a partir de 768 px): duas colunas de itens ---- */
@media (min-width: 768px) {
    .p-cabecalho { padding: 0 var(--g-espaco-6) var(--g-espaco-6); }
    .p-cabecalho__capa { margin: 0 calc(-1 * var(--g-espaco-6)); height: 220px; }
    .p-cabecalho--sem-capa .p-cabecalho__capa { height: 5rem; }
    .p-cabecalho__identidade { margin-top: -3rem; gap: var(--g-espaco-4); }
    .p-cabecalho__quadro { width: 6.5rem; height: 6.5rem; }
    .p-itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g-espaco-6); }
    .p-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
    .p-loja--grade .p-itens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .p-secao, .p-cardapio > .p-nota, .p-cardapio > .p-vazio { padding-left: var(--g-espaco-6); padding-right: var(--g-espaco-6); }
    .p-mais-pedidos__titulo { padding: 0 var(--g-espaco-6); }
    .p-carrossel { padding-left: var(--g-espaco-6); padding-right: var(--g-espaco-6); scroll-padding: 0 var(--g-espaco-6); }
    .p-destaque { flex-basis: 10.5rem; }
    .p-barra { padding: 0 var(--g-espaco-4); }
    .p-rodape { padding-left: var(--g-espaco-6); padding-right: var(--g-espaco-6); }
    .p-campos-entrega { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .p-campo--curto { max-width: 16rem; }
    .p-barra-sacola { margin: 0 var(--g-espaco-4); border-radius: var(--g-raio) var(--g-raio) 0 0; }
    .p-atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-escolhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Telas largas (960 px): a página do item lado a lado e o resumo do pedido preso à direita ---- */
@media (min-width: 960px) {
    .p-folha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
    .p-folha--sem-foto { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
    .p-folha__foto { position: sticky; top: var(--g-espaco-4); height: auto; aspect-ratio: 4 / 3; margin: var(--g-espaco-5); border-radius: var(--g-raio); }
    .p-folha__corpo { padding: var(--g-espaco-5) var(--g-espaco-6) 0; }
    .p-folha__rodape { margin: 0 calc(-1 * var(--g-espaco-6)); border-radius: var(--g-raio) var(--g-raio) 0 0; }
    .p-pagina-pedido { padding: var(--g-espaco-6) var(--g-espaco-6) var(--g-espaco-8); }
    .p-pagina-pedido__colunas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: var(--g-espaco-8); }
    .p-pagina-pedido__lateral { position: sticky; top: var(--g-espaco-4); padding: var(--g-espaco-5); border-radius: var(--g-raio); background: var(--g-fundo); }
    /* Pagamento na tela larga: o QR à esquerda (o módulo o abre), o código e os passos à direita. */
    .p-pix:has(> .p-pix__qr) { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: var(--g-espaco-6); row-gap: var(--g-espaco-3); align-items: start; }
    .p-pix:has(> .p-pix__qr) > * { grid-column: 2; }
    .p-pix > .p-pix__qr { grid-column: 1; grid-row: 1 / span 8; }
}

/* ---- Desktop (1024 px): o cardápio em dois terços e o resumo da sacola numa coluna presa, até 1200 px ---- */
@media (min-width: 1024px) {
    .p-loja--cardapio .p-loja__corpo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; gap: var(--g-espaco-8); padding: 0 var(--g-espaco-6); }
    .p-loja--cardapio .p-secao, .p-loja--cardapio .p-cardapio > .p-nota, .p-loja--cardapio .p-cardapio > .p-vazio, .p-loja--cardapio .p-mais-pedidos__titulo { padding-left: 0; padding-right: 0; }
    .p-loja--cardapio .p-carrossel { padding-left: 0; padding-right: 0; scroll-padding: 0; }
    .p-loja--cardapio .p-barra { padding: 0; }
    .p-resumo-sacola { position: sticky; top: var(--g-espaco-4); display: flex; flex-direction: column; gap: var(--g-espaco-3); margin-top: var(--g-espaco-5); padding: var(--g-espaco-5); border-radius: var(--g-raio); background: var(--g-fundo); }
    .p-loja--cardapio .p-barra-sacola { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .p-categorias ul, .p-carrossel { scroll-behavior: auto; }
}