/* =====================================================================
   Criativa Padaria — cardapio.css (página /cardapio/, dono: agente CATÁLOGO)
   Layout e componentes do catálogo, prefixo .cat-*. Tokens e componentes base (botão, etiqueta-arco,
   cartão de papel, campo, opções, contador) vêm de marca.css — aqui só o que é do catálogo.
   A folha (posição, animação, trava) vem do CSS que o folha.js injeta; aqui só o miolo das folhas do catálogo.

   Escala de camadas (z-index): cabeçalho 50 · folhas 1000+ (folha.js) · voo do croissant-abelha ≥ 3000 (sacola).
   Variáveis que a SACOLA pode usar/definir:
     --cat-topo-altura  altura do cabeçalho (sem a área segura do topo)
     --cat-lado         margem lateral da página
     --sac-barra-altura (definida pela sacola, se ela tiver barra fixa embaixo) → o rodapé ganha esse espaço
   ===================================================================== */

:root {
  --cat-topo-altura: 60px;
  --cat-lado: 16px;
  --cat-max: 1320px;
  --cat-indice-largura: 232px;
}
@media (min-width: 768px) { :root { --cat-lado: 24px; } }
@media (min-width: 1024px) { :root { --cat-topo-altura: 72px; --cat-lado: 32px; } }

/* âncoras (#croissants, #babka) param logo abaixo do cabeçalho fixo — vale com e sem JS. Embaixo, a barra fixa da
   sacola (--sac-barra-altura, 0 quando escondida): o foco do Tab e o scrollIntoView não param atrás dela (WCAG 2.4.11) */
html {
  scroll-padding-top: calc(var(--cat-topo-altura) + env(safe-area-inset-top) + 12px);
  scroll-padding-bottom: calc(var(--sac-barra-altura, 0px) + 12px);
  scrollbar-gutter: stable;
}
.cat-corpo { min-height: 100vh; min-height: 100dvh; overflow-x: clip; }

/* pular para o conteúdo (aparece no foco do teclado) */
.cat-pular {
  position: absolute; left: 12px; top: -80px; z-index: 60;
  padding: 10px 16px; border-radius: var(--cri-raio-2);
  background: var(--cri-chocolate); color: var(--cri-creme); font-weight: 650; text-decoration: none;
}
.cat-pular:focus { top: calc(env(safe-area-inset-top) + 8px); }

/* ---------------------------------------------------------------- cabeçalho */
.cat-topo {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: var(--cri-creme);   /* opaco: com 0.97 o cartão de baixo aparecia "fantasma" atrás do cabeçalho */
  border-bottom: 1px solid transparent;
  transition: border-color var(--cri-dur-2) var(--cri-curva-padrao), box-shadow var(--cri-dur-2) var(--cri-curva-padrao);
}
.cat-topo.is-rolado { border-bottom-color: var(--cri-borda); box-shadow: 0 8px 18px -14px rgb(76 53 36 / 0.45); }
/* mesma caixa da .cat-pagina: no desktop largo o logo alinha com o índice e a sacola com a borda da grade */
.cat-topo__in {
  display: flex; align-items: center; gap: 8px;
  height: var(--cat-topo-altura);
  max-width: var(--cat-max); margin: 0 auto;
  padding-left: max(var(--cat-lado), env(safe-area-inset-left));
  padding-right: max(var(--cat-lado), env(safe-area-inset-right));
}
/* tudo no cabeçalho encolhe (320 px, fonte 130%, zoom): a sacola nunca sai da tela */
.cat-topo__logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: 48px; padding: 0 4px; margin: 0 auto 0 -4px; border-radius: 6px; line-height: 0; }
.cat-topo__logo img { display: block; width: auto; height: 28px; max-width: 100%; object-fit: contain; object-position: left center; }
.cat-topo__cat {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 1 auto; min-width: 0;
  min-height: 48px; padding: 2px 12px 2px 11px;
  border: 1.5px solid var(--cri-borda-forte); border-radius: var(--cri-raio-2);
  background: var(--cri-campo-fundo); color: var(--cri-texto);
  font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color var(--cri-dur-1) var(--cri-curva-padrao), background-color var(--cri-dur-1) var(--cri-curva-padrao), transform var(--cri-dur-1) var(--cri-curva-padrao);
}
.cat-topo__cat:hover { border-color: var(--cri-chocolate); }
.cat-topo__cat:active { transform: translateY(1px); }
.cat-topo__cat-ico { display: grid; gap: 3px; width: 16px; flex: none; }
.cat-topo__cat-ico i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.cat-topo__cat-ico i:nth-child(2) { width: 75%; }
.cat-topo__cat-txt { display: grid; min-width: 0; line-height: 1.15; }
.cat-topo__cat-k { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.01em; }
/* nome inteiro da categoria atual, em até 2 linhas (o botão cresce até a sacola) */
.cat-topo__cat-atual {
  font-size: 0.75rem; line-height: 1.1; color: var(--cri-texto-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word;
}
/* lugar do botão da sacola (agente SACOLA troca o conteúdo): largura livre para "Sacola" + contador + total.
   Até o JS chegar, um botão "Sacola" provisório (o toque nele entra na fila do <head>). */
.cat-topo__vaga { flex: none; display: flex; justify-content: flex-end; min-width: 52px; min-height: 48px; }
.cat-topo__sacola {
  min-height: 48px; padding: 0 14px; border: 1.5px solid var(--cri-chocolate); border-radius: var(--cri-raio-2);
  background: var(--cri-campo-fundo); color: var(--cri-chocolate); font: 700 0.875rem/1 var(--cri-fonte-ui); cursor: pointer;
}
.sem-js .cat-topo__cat, .sem-js .cat-topo__sacola, .sem-sacola .cat-topo__sacola { display: none; }
@container pagina (max-width: 359.98px) {
  .cat-topo__cat-atual, .cat-topo__cat-ico { display: none; }
  .cat-topo__cat { padding-inline: 10px; }
}
@media (min-width: 1024px) { .cat-topo__logo img { height: 40px; } }
@container pagina (min-width: 1000px) {
  .cat-topo__cat { display: none; }   /* com espaço, o índice fica sempre à vista na lateral */
}

/* ---------------------------------------------------------------- página
   O layout segue o ESPAÇO do envelope (cabeçalho + cardápio + rodapé), que é um container: as quebras são
   @container pagina. Nada com position:fixed mora dentro dele. */
.cat-envelope { container: pagina / inline-size; }
.cat-pagina {
  display: grid; grid-template-columns: minmax(0, 1fr);
  max-width: var(--cat-max); margin: 0 auto;
  padding: 14px max(var(--cat-lado), env(safe-area-inset-right)) 0 max(var(--cat-lado), env(safe-area-inset-left));
  outline: none;
}
@container pagina (min-width: 1000px) {
  .cat-pagina { grid-template-columns: var(--cat-indice-largura) minmax(0, 1fr); column-gap: 48px; row-gap: 0; padding-top: 28px; }
  .cat-pagina > * { grid-column: 2; }
  .cat-pagina > .cat-indice { grid-column: 1; grid-row: 1 / span 60; }
}

/* ---------------------------------------------------------------- abertura
   Compacta no celular (título + cursiva + 1 linha + status das lojas, ~230 px): os Queridinhos, com foto e preço,
   entram ainda na 1ª tela. Tudo encolhe sem rolagem lateral em 320 px, fonte 130% e zoom 130%. */
.cat-abertura { margin: 0 0 16px; }
.cat-abertura__papel { padding: 6px; }
.cat-abertura__miolo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 14px 14px; }
.cat-abertura__linha { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 10px; }
.cat-abertura__t {
  margin: 0; min-width: 0; font-size: clamp(1.75rem, 1rem + 6vw, 3.5rem); letter-spacing: 0.05em; line-height: 1; overflow-wrap: anywhere;
}
.cat-abertura__abelha {
  display: block; flex: 1 1 36px; max-width: clamp(36px, 11vw, 84px); margin: 0 0 2px;   /* entra na linha do título com 36 px e cresce no que sobrar */
  color: var(--cri-gravura); line-height: 0; pointer-events: none;
}
.cat-abertura__abelha svg { display: block; width: 100%; height: auto; overflow: visible; }
.cat-abertura__cursiva { flex-basis: 100%; margin: 2px 0 0; font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.5rem); line-height: 1.15; padding-bottom: 2px; }
.cat-abertura__sub { margin: 0; color: var(--cri-texto-2); font-size: var(--cri-fs-0); line-height: 1.4; }
@container pagina (min-width: 720px) {
  .cat-abertura { margin-bottom: 24px; }
  .cat-abertura__papel { padding: 14px; }
  .cat-abertura__miolo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 20px 40px; padding: 28px 32px 28px; }
  .cat-abertura__miolo > .cat-pausa, .cat-abertura__miolo > noscript { grid-column: 1 / -1; }
  .cat-abertura__t { font-size: clamp(2.5rem, 1.6rem + 2vw, 3.5rem); }
  .cat-abertura__abelha { max-width: 84px; }
  .cat-abertura__cursiva { margin: 4px 0 8px; }
  .cat-abertura__sub { font-size: var(--cri-fs-1); }
}

/* croissant-abelha pousando ao lado do título: só com JS e sem "menos movimento" (decoração) */
@media (prefers-reduced-motion: no-preference) {
  .com-js .cat-abertura__abelha { animation: cat-pouso 1.5s cubic-bezier(0.25, 0.7, 0.3, 1) 0.45s both; }
}
@keyframes cat-pouso {
  0% { transform: translate(-210px, 64px) rotate(-12deg) scale(0.72); opacity: 0; }
  14% { opacity: 1; }
  52% { transform: translate(-70px, -30px) rotate(9deg) scale(0.92); }
  80% { transform: translate(-8px, -6px) rotate(-3deg) scale(1); }
  100% { transform: none; opacity: 1; }
}

/* lojas e status (o JS escreve "aberta agora · fecha às 19h") */
/* uma linha por loja (nome e status no mesmo fluxo; só quebra se não couber) */
.cat-lojas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cat-loja { position: relative; padding-left: 22px; font-size: var(--cri-fs-0); line-height: 1.4; }
.cat-loja__status { display: inline-block; margin-left: 0.3em; }   /* status inteiro desce de linha, nunca "às / 21h" */
.cat-loja__favo {
  position: absolute; left: 0; top: 0.2em;
  width: 13px; height: 14px; background: var(--cri-borda-forte);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.cat-loja[data-aberta="1"] .cat-loja__favo { background: var(--cri-sucesso); }
.cat-loja__nome { font-weight: 700; color: var(--cri-texto); }
.cat-loja__status { color: var(--cri-texto-2); }
.cat-loja__status strong { font-weight: 700; color: var(--cri-texto); }
.cat-loja[data-aberta="1"] .cat-loja__status strong { color: var(--cri-sucesso); }

/* pedidos pausados / sem JS / sacola que não carregou */
.cat-pausa {
  padding: 14px 16px; border-radius: var(--cri-raio-2);
  background: var(--cri-aviso-fundo); color: var(--cri-cacau);
  border: 1px solid rgb(122 79 18 / 0.25);
}
.cat-pausa[hidden] { display: none; }
.cat-pausa__t { margin: 0 0 10px; font-weight: 650; }
.cat-fora { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-fora .botao { min-height: 44px; padding: 0.55em 1em; font-size: var(--cri-fs-0); }
.cat-fora .botao--secundario { background: var(--cri-campo-fundo); }
@media (max-width: 639px) {
  .cat-fora > li:has(.botao--secundario) { flex: 1 1 100%; }
  .cat-fora .botao--secundario { width: 100%; }
}

/* ---------------------------------------------------------------- índice de categorias */
.cat-indice { margin: 0 0 28px; }
.cat-indice__t { font-size: var(--cri-fs-3); margin: 0 0 12px; }
.cat-indice__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
/* sobra da grade: o 1º (Queridinhos, quando há) ocupa a linha toda — nunca célula vazia */
.cat-indice__lista > li:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
/* blocos de uma linha: nome e contagem lado a lado (a grade vem depois dos Queridinhos) */
.cat-indice__a {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px;
  min-height: 48px; height: 100%; box-sizing: border-box; padding: 8px 12px;
  border: 1px solid var(--cri-borda); border-radius: var(--cri-raio-2);
  background: var(--cri-campo-fundo); color: var(--cri-texto); text-decoration: none;
  box-shadow: var(--cri-sombra-1);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color var(--cri-dur-1) var(--cri-curva-padrao), background-color var(--cri-dur-1) var(--cri-curva-padrao);
}
.cat-indice__a:hover { border-color: var(--cri-caramelo); text-decoration: none; }
.cat-indice__a:active { background: var(--cri-papel-2); }
.cat-indice__nome { min-width: 0; font-weight: 650; line-height: 1.25; }
.cat-indice__n { margin-left: auto; font-size: 0.8125rem; color: var(--cri-texto-2); white-space: nowrap; }   /* nome comprido: a contagem desce, à direita */
@container pagina (min-width: 600px) {
  .cat-indice__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-indice__lista > li:first-child:nth-last-child(odd) { grid-column: auto; }
  .cat-indice__lista > li:first-child:nth-last-child(3n + 1) { grid-column: 1 / -1; }
  .cat-indice__lista > li:first-child:nth-last-child(3n + 2) { grid-column: span 2; }
}
@container pagina (min-width: 1000px) {
  .cat-indice { margin: 0; align-self: stretch; }
  .cat-indice__in {
    position: sticky; top: calc(var(--cat-topo-altura) + env(safe-area-inset-top) + 20px);
    max-height: calc(100vh - var(--cat-topo-altura) - 40px); overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 4px 24px 0;
  }
  .cat-indice__t { font-size: var(--cri-fs-2); letter-spacing: 0.08em; margin-bottom: 10px; }
  .cat-indice__lista { display: block; }
  .cat-indice__lista > li:first-child { grid-column: auto !important; }
  .cat-indice__a {
    flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 12px;
    min-height: 44px; padding: 9px 12px 9px 16px; position: relative;
    border: 0; border-radius: var(--cri-raio-1); box-shadow: none; background: transparent;
  }
  .cat-indice__a:hover { background: var(--cri-papel-2); }
  .cat-indice__n { flex: none; font-variant-numeric: tabular-nums; }
  .cat-indice__a::before {   /* marcador de favo da categoria atual */
    content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 9px; margin-top: -4.5px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--cri-chocolate); transform: scale(0); transition: transform var(--cri-dur-2) var(--cri-curva-pouso);
  }
  .cat-indice__a[aria-current="true"] { background: var(--cri-papel-2); font-weight: 650; }
  .cat-indice__a[aria-current="true"]::before { transform: scale(1); }
  .cat-indice__a[aria-current="true"] .cat-indice__nome { color: var(--cri-chocolate); }
}

/* ---------------------------------------------------------------- cabeçalho das seções */
.cat-secao { margin: 0 0 40px; }
.cat-secao__cab {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px;
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--cri-borda);
  position: relative;
}
.cat-secao__cab::after {      /* fio com o favo: divisória da casa */
  content: ""; position: absolute; left: 0; bottom: -5px; width: 9px; height: 10px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--cri-caqui);
}
.cat-secao__t { margin: 0; font-size: var(--cri-fs-4); outline: none; }
.cat-secao__n { margin: 0; font-size: var(--cri-fs-0); color: var(--cri-texto-2); }
.cat-secao__desc { flex-basis: 100%; margin: 6px 0 0; color: var(--cri-texto-2); max-width: 60ch; }
@media (min-width: 1024px) { .cat-secao { margin-bottom: 56px; } }

/* ---------------------------------------------------------------- Queridinhos (faixa de papel estampado) */
.cat-queridos {
  container: queridos / inline-size;
  position: relative; isolation: isolate;
  margin: 0 calc(-1 * var(--cat-lado)) 36px; padding: 22px var(--cat-lado) 24px;
}
.cat-queridos__papel {
  position: absolute; inset: 0; z-index: -1;
  background: var(--cri-pessego-claro);
  --cri-estampa-cor: var(--cri-gravura); --cri-estampa-opacidade: 0.2; --cri-estampa-tam: 240px;
}
/* a estampa não passa atrás do título "Queridinhos da casa" (MARCA §9): começa lisa e aparece depois do cabeçalho */
.cat-queridos__papel::before {
  -webkit-mask: linear-gradient(#0000 0 104px, #000 150px), url("../graficos/papel-estampa.svg") 0 0 / var(--cri-estampa-tam) repeat;
  -webkit-mask-composite: source-in;
          mask: linear-gradient(#0000 0 104px, #000 150px), url("../graficos/papel-estampa.svg") 0 0 / var(--cri-estampa-tam) repeat;
          mask-composite: intersect;
}
.cat-queridos .cat-secao__cab { border-bottom-color: rgb(167 128 94 / 0.45); }
.cat-queridos .cat-secao__n { color: var(--cri-texto-2); }
.cat-queridos__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container pagina (min-width: 600px) {
  .cat-queridos { margin-left: 0; margin-right: 0; padding: 26px 24px 28px; }
  .cat-queridos__papel { border-radius: var(--cri-raio-3); }
}
@container pagina (min-width: 1000px) { .cat-queridos { padding: 28px 28px 30px; margin-bottom: 48px; } }
@container queridos (min-width: 540px) { .cat-queridos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@container queridos (min-width: 860px) { .cat-queridos__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cat-querido {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--cri-campo-fundo); border-radius: var(--cri-raio-2);
  box-shadow: var(--cri-sombra-2); overflow: hidden; cursor: pointer;
}
.cat-querido__foto {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; margin: 0; border: 0;
  background: var(--cri-papel-2); cursor: pointer; line-height: 0; border-radius: 0;
}
.cat-querido__foto > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cat-querido__texto { display: flex; flex-direction: column; flex: 1; padding: 10px 12px 12px; min-width: 0; container: querido / inline-size; }
/* nome de produto: DM Sans 600 na caixa da casa (Cinzel só nos títulos de seção) */
.cat-querido__nome { font: 600 1rem/1.3 var(--cri-fonte-ui); letter-spacing: 0; margin: 0 0 4px; overflow-wrap: break-word; }
.cat-querido__desc { margin: 0 0 10px; font-size: 0.875rem; line-height: 1.4; color: var(--cri-texto-2); overflow-wrap: break-word; }
.cat-querido__pe { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cat-querido__pe .cat-acoes { flex: 1 1 100%; }
.cat-querido__pe .cat-acoes .botao { width: 100%; }
.cat-querido .cat-selo { margin-bottom: 6px; }
/* sobra da grade: o 1º cartão (ou os 2 primeiros) ocupa a linha toda, deitado — nunca célula vazia */
@container queridos (max-width: 539.98px) {
  .cat-queridos__grade[data-r2="1"] > .cat-querido:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .cat-queridos__grade[data-r2="1"] > .cat-querido:first-child .cat-querido__foto { height: 100%; aspect-ratio: auto; min-height: 140px; }
}
@container queridos (min-width: 540px) and (max-width: 859.98px) {
  .cat-queridos__grade[data-r3="1"] > .cat-querido:first-child { grid-column: 1 / -1; }
  .cat-queridos__grade[data-r3="2"] > .cat-querido:first-child { grid-column: span 2; }
  .cat-queridos__grade[data-r3="1"] > .cat-querido:first-child,
  .cat-queridos__grade[data-r3="2"] > .cat-querido:first-child { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .cat-queridos__grade[data-r3="1"] > .cat-querido:first-child .cat-querido__foto,
  .cat-queridos__grade[data-r3="2"] > .cat-querido:first-child .cat-querido__foto { height: 100%; aspect-ratio: auto; min-height: 180px; }
}
@container queridos (min-width: 860px) {
  .cat-queridos__grade[data-r4="3"] > .cat-querido:first-child,
  .cat-queridos__grade[data-r4="2"] > .cat-querido:nth-child(-n + 2) { grid-column: span 2; }
  .cat-queridos__grade[data-r4="1"] > .cat-querido:first-child { grid-column: 1 / -1; }
  .cat-queridos__grade[data-r4="3"] > .cat-querido:first-child,
  .cat-queridos__grade[data-r4="2"] > .cat-querido:nth-child(-n + 2),
  .cat-queridos__grade[data-r4="1"] > .cat-querido:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cat-queridos__grade[data-r4="3"] > .cat-querido:first-child .cat-querido__foto,
  .cat-queridos__grade[data-r4="2"] > .cat-querido:nth-child(-n + 2) .cat-querido__foto,
  .cat-queridos__grade[data-r4="1"] > .cat-querido:first-child .cat-querido__foto { height: 100%; aspect-ratio: auto; min-height: 200px; }
  .cat-queridos__grade[data-r4="3"] > .cat-querido:first-child .cat-querido__texto,
  .cat-queridos__grade[data-r4="2"] > .cat-querido:nth-child(-n + 2) .cat-querido__texto { padding: 18px 18px 16px; }
  .cat-queridos__grade[data-r4="3"] > .cat-querido:first-child .cat-querido__nome,
  .cat-queridos__grade[data-r4="2"] > .cat-querido:nth-child(-n + 2) .cat-querido__nome { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------- cartão do produto */
.cat-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cat-item {
  position: relative; min-width: 0;
  padding: 14px 14px 12px;
  background: var(--cri-campo-fundo); color: var(--cri-texto);
  border: 1px solid var(--cri-borda); border-radius: var(--cri-raio-2);
  box-shadow: var(--cri-sombra-1);
  cursor: pointer;
}
.cat-item__foto {
  float: right; position: relative;
  width: clamp(104px, 34%, 172px); aspect-ratio: 4 / 3;
  margin: 2px 0 10px 12px; padding: 0; border: 0; border-radius: var(--cri-raio-1);
  overflow: hidden; background: var(--cri-papel-2); cursor: pointer; line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.cat-item__foto > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--cri-dur-3) var(--cri-curva-saida), filter var(--cri-dur-2) var(--cri-curva-padrao); }
.cat-item__foto:focus-visible, .cat-querido__foto:focus-visible { outline: 3px solid var(--cri-foco); outline-offset: 2px; }
.cat-selo { margin: 0 0 8px; line-height: 1; }
.cat-selo .etiqueta-arco { font-size: 0.6875rem; padding: 0.85em 0.95em 0.4em; }
.cat-item__nome { font: 600 1rem/1.3 var(--cri-fonte-ui); letter-spacing: 0; margin: 0 0 4px; overflow-wrap: break-word; }
.cat-item__desc { margin: 0 0 8px; font-size: var(--cri-fs-0); line-height: 1.5; color: var(--cri-texto-2); overflow-wrap: break-word; }
.cat-item__opcoes { margin: 0 0 8px; font-size: 0.8125rem; line-height: 1.45; color: var(--cri-texto-2); }
.cat-item__opcoes-t { font-weight: 700; color: var(--cri-texto); }
.cat-item__pe {
  clear: both; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--cri-borda);
}
.cat-preco { margin: 0; font-size: 1.0625rem; letter-spacing: 0.01em; }

@container pagina (min-width: 600px) {
  /* colunas pelo espaço: 2 no tablet e com a sacola aberta ao lado, 3 no desktop */
  .cat-grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
  .cat-item { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  .cat-item__foto { float: none; width: 100%; margin: 0 0 12px; border-radius: 0; }
  .cat-item__nome { font-size: 1.0625rem; }
  .cat-item > :not(.cat-item__foto) { margin-left: 16px; margin-right: 16px; }
  .cat-item__pe { margin-top: auto; padding: 12px 0 14px; }
}
/* desktop: sempre 3 por linha, numa grade de 6 trilhas; a última linha nunca fica com buraco.
   Sobram 2 → os 2 últimos ocupam meia linha cada; sobra 1 → os 4 últimos viram 2 linhas de 2.
   (categoria de 1 item só fica sozinha: hoje não existe) */
@container pagina (min-width: 1180px) {
  .cat-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cat-grade > .cat-item { grid-column: span 2; }
  .cat-grade > .cat-item:nth-child(3n + 1):nth-last-child(2),
  .cat-grade > .cat-item:nth-child(3n + 1):nth-last-child(2) ~ .cat-item,
  .cat-grade > .cat-item:nth-child(3n + 1):nth-last-child(4),
  .cat-grade > .cat-item:nth-child(3n + 1):nth-last-child(4) ~ .cat-item { grid-column: span 3; }
  .cat-grade > .cat-item:nth-child(3n + 1):nth-last-child(2) .cat-item__foto,
  .cat-grade > .cat-item:nth-child(3n + 1):nth-last-child(2) ~ .cat-item .cat-item__foto,
  .cat-grade > .cat-item:nth-child(3n + 1):nth-last-child(4) .cat-item__foto,
  .cat-grade > .cat-item:nth-child(3n + 1):nth-last-child(4) ~ .cat-item .cat-item__foto { aspect-ratio: 16 / 9; }
}

@media (hover: hover) and (pointer: fine) {
  .cat-item, .cat-querido { transition: box-shadow var(--cri-dur-2) var(--cri-curva-padrao), transform var(--cri-dur-2) var(--cri-curva-saida), border-color var(--cri-dur-2) var(--cri-curva-padrao); }
  .cat-item:hover { border-color: var(--cri-borda-forte); box-shadow: var(--cri-sombra-2); transform: translateY(-2px); }
  .cat-querido:hover { box-shadow: 0 1px 2px rgb(76 53 36 / 0.1), 0 16px 30px -10px rgb(76 53 36 / 0.3); transform: translateY(-2px); }
  .cat-item:hover .cat-item__foto > img, .cat-querido:hover .cat-querido__foto > img { transform: scale(1.035); }
}

/* sem foto: papel pêssego com estampa, croissant-abelha e etiqueta "Foto em breve" */
.cat-semfoto {
  position: absolute; inset: 0; display: grid; place-items: center; isolation: isolate;
  background: var(--cri-pessego-claro); line-height: 1.1;
}
.cat-semfoto::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--cri-gravura);
  -webkit-mask: url("../graficos/papel-estampa.svg") 0 0 / 150px repeat;
          mask: url("../graficos/papel-estampa.svg") 0 0 / 150px repeat;
  opacity: 0.16;
}
.cat-semfoto > .cat-semfoto__abelha { display: block; width: 44%; max-width: 150px; height: auto; margin-top: -12%; object-fit: contain; }
.cat-semfoto__etq { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); font-size: 0.625rem; padding: 0.85em 0.9em 0.38em; }
.cat-item__foto .cat-semfoto__etq { font-size: 0.5625rem; letter-spacing: 0.03em; }
@container pagina (min-width: 600px) { .cat-item__foto .cat-semfoto__etq { font-size: 0.6875rem; } }

/* ações: adicionar, +/−, "na sacola", esgotado */
.cat-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; margin-left: auto; }
.cat-adicionar { min-height: 44px; padding: 0.45em 1em 0.45em 0.85em; font-size: 0.9375rem; gap: 0.4em; background: var(--cri-campo-fundo); }
.cat-adicionar svg { width: 1.05em; height: 1.05em; }
/* [hidden] sempre vence o display dos componentes (o JS esconde/mostra por hidden) */
.cat-pagina [hidden], .cat-folha [hidden], .cat-topo [hidden] { display: none !important; }
.sem-js .cat-acoes, .sem-sacola .cat-acoes { display: none; }

.cat-passo {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1.5px solid var(--cri-chocolate); border-radius: var(--cri-raio-2);
  background: var(--cri-papel-2); padding: 1px;
}
.cat-passo.is-novo { animation: cat-entra var(--cri-dur-2) var(--cri-curva-saida); }
@keyframes cat-entra { from { transform: scale(0.94); opacity: 0.4; } to { transform: none; opacity: 1; } }
.cat-passo__b {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--cri-chocolate); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color var(--cri-dur-1) var(--cri-curva-padrao), transform var(--cri-dur-1) var(--cri-curva-padrao);
}
.cat-passo__b svg { width: 18px; height: 18px; }
.cat-passo__b:hover { background: var(--cri-pessego-claro); }
.cat-passo__b:active { transform: scale(0.94); }
.cat-passo__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 6.4em; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent;
  text-align: center; font: 600 0.875rem/1.2 var(--cri-fonte-ui); color: var(--cri-texto); white-space: nowrap;
}
button.cat-passo__n { cursor: pointer; text-decoration: underline; text-decoration-color: rgb(122 60 23 / 0.35); text-underline-offset: 0.2em; -webkit-tap-highlight-color: transparent; }
button.cat-passo__n:hover { background: var(--cri-pessego-claro); }
.cat-passo__n b, .cat-na-sacola b { display: inline-block; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--cri-chocolate); }
.cat-na-sacola { font-size: 0.875rem; font-weight: 600; color: var(--cri-texto); white-space: nowrap; }
.is-pulo { animation: cat-pulo 260ms var(--cri-curva-pouso); }
@keyframes cat-pulo { 0% { transform: scale(1); } 40% { transform: scale(1.28) translateY(-1px); } 100% { transform: scale(1); } }
.cat-querido .cat-passo { display: flex; width: 100%; max-width: 100%; box-sizing: border-box; justify-content: space-between; }
.cat-querido .cat-passo__n { min-width: 0; flex: 1 1 auto; padding: 0 4px; }
/* cartão estreito (2 colunas no celular): "− 1 na sacola +" não cabe numa linha com botões de 44 px.
   Fica só o número; "na sacola" segue para o leitor de tela (e o aria-label do botão diz tudo). */
@container querido (max-width: 179.98px) {
  .cat-querido .cat-qtd__t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cat-querido .cat-passo__n { font-size: 1.0625rem; }
}

.cat-esgotado { font-size: 0.6875rem; padding: 0.85em 0.95em 0.4em; margin-left: auto; }
[data-esgotado-hoje] .cat-acoes { display: none; }
[data-esgotado-hoje] .cat-item__foto > img, [data-esgotado-hoje] .cat-querido__foto > img { filter: grayscale(0.6) opacity(0.78); }
[data-esgotado-hoje] .cat-preco { color: var(--cri-texto-2); }

/* ---------------------------------------------------------------- folhas do catálogo (miolo; a casca é do folha.js) */
.cat-folha { --cri-folha-largura: 880px; }
.cat-folha__topo {
  position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 14px 10px 6px 18px;
}
.cat-folha__topo::before {   /* puxador (enfeite do bottom-sheet) */
  content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
  border-radius: 2px; background: var(--cri-borda);
}
.cat-folha__rotulo { margin: 0; font: 700 0.8125rem/1.2 var(--cri-fonte-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cri-texto-2); }
.cat-folha__fechar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--cri-papel-2); color: var(--cri-texto); font: 650 0.875rem/1 var(--cri-fonte-ui); cursor: pointer;
  transition: background-color var(--cri-dur-1) var(--cri-curva-padrao);
}
.cat-folha__fechar:hover { background: var(--cri-pessego-claro); }
.cat-folha__fechar svg { width: 18px; height: 18px; }
.cat-folha__rolagem { padding: 4px 18px 18px; }
.cat-folha__foto { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--cri-raio-2); overflow: hidden; background: var(--cri-papel-2); line-height: 0; margin: 0 0 16px; }
.cat-folha__foto > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cat-folha__foto .cat-semfoto__etq { font-size: 0.75rem; }
.cat-folha__info { min-width: 0; }
.cat-folha__nome { font: 600 var(--cri-fs-3)/1.25 var(--cri-fonte-ui); letter-spacing: 0; margin: 0 0 8px; outline: none; overflow-wrap: anywhere; }
.cat-folha__festival { margin: -2px 0 10px; font-size: var(--cri-fs-0); color: var(--cri-texto-2); }
.cat-folha__desc { color: var(--cri-texto-2); margin: 0 0 12px; overflow-wrap: anywhere; }
.cat-folha__preco { font-size: var(--cri-fs-2); margin: 0 0 18px; }
.cat-folha__opcoes { margin-bottom: 18px; }
.cat-folha__opcoes .opcao__texto small { display: block; }
.cat-folha__opcoes legend .campo__opcional { font-weight: 400; color: var(--cri-texto-2); }
.cat-folha__qtd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.cat-folha__qtd-t { font-weight: 650; margin: 0; }
.cat-folha__qtd .cat-passo__n { min-width: 2.6em; font-size: 1.0625rem; font-weight: 800; color: var(--cri-chocolate); font-variant-numeric: tabular-nums; }
.cat-folha__ja { margin: 0 0 12px; font-size: var(--cri-fs-0); color: var(--cri-texto-2); }
.cat-folha__aviso { margin: 0 0 4px; }
.cat-folha__pe {
  flex: none; padding: 12px 18px;   /* a área segura de baixo já está no padding da .cri-folha (folha.js) */
  background: var(--cri-fundo); border-top: 1px solid var(--cri-borda);
  box-shadow: 0 -10px 18px -16px rgb(76 53 36 / 0.5);
}
.cat-folha__pe .botao { width: 100%; }
.cat-folha__pe .botao .cri-preco { color: inherit; }
@media (min-width: 768px) {
  .cat-folha__topo { padding: 12px 12px 4px 24px; }
  .cat-folha__topo::before { display: none; }
  .cat-folha__rolagem { padding: 8px 24px 24px; }
  .cat-folha__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .cat-folha__foto { margin: 0; position: sticky; top: 0; }
  .cat-folha__pe { padding: 14px 24px 16px; border-radius: 0 0 20px 20px; }
  .cat-folha__pe .botao { width: auto; min-width: 320px; margin-left: auto; display: flex; }
}

/* folha das categorias */
.cat-folha--cats { --cri-folha-largura: 520px; }
.cat-folha--cats .cat-folha__rolagem { padding-bottom: 22px; }
.cat-folha-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cat-folha-lista a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 52px; box-sizing: border-box; padding: 12px 14px;
  border-radius: var(--cri-raio-2); color: var(--cri-texto); text-decoration: none;
  font-weight: 600; font-size: var(--cri-fs-1);
  -webkit-tap-highlight-color: transparent;
}
.cat-folha-lista a:hover, .cat-folha-lista a:active { background: var(--cri-papel-2); }
.cat-folha-lista a[aria-current="true"] { background: var(--cri-papel-2); color: var(--cri-chocolate); box-shadow: inset 3px 0 0 var(--cri-chocolate); }
.cat-folha-lista .cat-indice__n { flex: none; font-weight: 400; }

/* ---------------------------------------------------------------- rodapé (chocolate, estampa só numa faixa no topo) */
.cat-rodape {
  position: relative; isolation: isolate; margin-top: 24px;
  padding: 56px max(var(--cat-lado), env(safe-area-inset-right)) calc(40px + var(--sac-barra-altura, 0px) + env(safe-area-inset-bottom)) max(var(--cat-lado), env(safe-area-inset-left));
}
.cat-rodape::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; z-index: -1; pointer-events: none;
  background-color: var(--cri-pessego);
  -webkit-mask: url("../graficos/papel-estampa.svg") 0 0 / 170px repeat;
          mask: url("../graficos/papel-estampa.svg") 0 0 / 170px repeat;
  opacity: 0.2;
}
.cat-rodape__in { max-width: var(--cat-max); margin: 0 auto; display: grid; gap: 28px; }
.cat-rodape__nome { margin: 0; font: 500 var(--cri-fs-3)/1.1 var(--cri-fonte-titulo); letter-spacing: 0.06em; color: var(--cri-creme); }
.cat-rodape__ass { margin: 2px 0 8px; color: var(--cri-pessego); font-size: 2rem; }
.cat-rodape__frase { margin: 0; color: var(--cri-traco-claro); }
.cat-rodape__lojas { display: grid; gap: 24px; }
.cat-rodape__lt { font-size: var(--cri-fs-2); margin: 0 0 6px; color: var(--cri-creme); letter-spacing: 0.04em; }
.cat-rodape__end, .cat-rodape__hor { margin: 0 0 6px; color: var(--cri-traco-claro); font-size: var(--cri-fs-0); }
.cat-rodape__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.cat-rodape a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  color: var(--cri-creme); font-weight: 600; text-decoration: underline; text-decoration-color: rgb(232 203 171 / 0.6); text-underline-offset: 0.22em;
}
.cat-rodape a:hover { text-decoration-color: var(--cri-pessego); }
.cat-rodape__outros p { margin: 0; }
.cat-rodape__outros p + p { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cat-rodape__legal { margin: 0; padding-top: 18px; border-top: 1px solid rgb(232 203 171 / 0.25); font-size: 0.8125rem; color: var(--cri-traco-claro); }
@container pagina (min-width: 720px) {
  .cat-rodape__in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 48px; }
  .cat-rodape__lojas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-rodape__outros, .cat-rodape__legal { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- impressão (Ctrl+P)
   Cardápio-lista: sem cabeçalho fixo, botões, sacola, folhas abertas nem Queridinhos (repetem itens das categorias);
   3 colunas com foto pequena, cartão nunca partido entre páginas, texto escuro sem depender do fundo. */
/* a sacola recusou o toque em "Adicionar" (limite de itens, esgotou agora): recado à vista acima da barra */
.cat-recusa {
  position: fixed; z-index: 900; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--sac-barra-altura, 0px) + env(safe-area-inset-bottom) + 12px);
  width: min(480px, calc(100% - 32px)); box-sizing: border-box; margin: 0; padding: 12px 16px;
  border-radius: var(--cri-raio-2, 12px); background: var(--cri-chocolate); color: var(--cri-creme);
  font: 600 0.9375rem/1.35 var(--cri-fonte-ui); box-shadow: 0 10px 28px -12px rgb(76 53 36 / 0.55);
}
.cat-recusa[hidden] { display: none; }
.cat-folha__recusa { margin: 0 0 10px; }

@media print {
  .cat-topo, .cat-pular, .cat-indice, .cat-queridos, .cat-acoes, .cat-passo, .cat-esgotado, .cat-abertura__abelha,
  #sacola-raiz, .cri-folha, .cri-folha-fundo, .cat-recusa, [data-sem-sacola], .cat-pausa, .cat-rodape::before { display: none !important; }
  html.cri-folha-travada { overflow: visible !important; }
  body.cat-corpo { background: #fff !important; }
  .cat-abertura__papel, .cat-abertura__miolo { padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
  .cat-abertura__papel::before { display: none; }
  .cat-pagina { display: block; max-width: none; padding: 0; }
  .cat-secao { margin-bottom: 18px; }
  .cat-secao__cab { break-after: avoid; page-break-after: avoid; }
  .cat-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .cat-grade > .cat-item { grid-column: auto !important; }
  .cat-item { display: block !important; padding: 8px !important; box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .cat-item > * { margin-left: 0 !important; margin-right: 0 !important; }
  .cat-item__foto { float: none; display: block; width: 100%; height: 72px; aspect-ratio: auto !important; margin: 0 0 6px; border-radius: 4px; }
  .cat-item__nome { font-size: 0.875rem !important; }
  .cat-item__desc, .cat-item__opcoes { font-size: 0.75rem; line-height: 1.35; margin-bottom: 4px; }
  .cat-preco { font-size: 0.875rem; }
  .cat-secao__t { font-size: 1.5rem; }
  .cat-item__pe { border-top: 0; padding: 4px 0 0 !important; }
  .cat-rodape, .cat-rodape * { background: none !important; color: #4C3524 !important; }
  .cat-rodape { padding: 16px 0 0 !important; margin-top: 8px; border-top: 1px solid #4C3524; }
  .botao { color: #4C3524 !important; }
}

/* ---------------------------------------------------------------- menos movimento */
@media (prefers-reduced-motion: reduce) {
  .cat-abertura__abelha { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cat-passo.is-novo, .is-pulo { animation: none !important; }
  .cat-item:hover, .cat-querido:hover { transform: none !important; }
  .cat-item:hover .cat-item__foto > img, .cat-querido:hover .cat-querido__foto > img { transform: none !important; }
}