/*
 * Componentes visuais do cardápio, compartilhados pela página pública e pela impressão:
 * moldura com cantos, cabeçalho da marca, cabeçalho de categoria, linhas de produto,
 * informações gerais e rodapé.
 *
 * A moldura usa o sistema de coordenadas da referência (folha de 1055 px de largura):
 * --u equivale a 1 px da referência e é derivado do tamanho do canto (160 px na referência).
 */

/* ---------- Moldura ---------- */

.moldura {
  --canto: 160px;
  --u: calc(var(--canto) / 160);
  position: relative;
}

.moldura-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.moldura-canto {
  position: absolute;
  width: var(--canto);
  height: calc(185 * var(--u));
}

.moldura-canto--se { top: 0; left: 0; }
.moldura-canto--sd { top: 0; right: 0; transform: scaleX(-1); }
.moldura-canto--ie { bottom: 0; left: 0; transform: scaleY(-1); }
.moldura-canto--id { bottom: 0; right: 0; transform: scale(-1, -1); }

/* Linha dupla: externa 7 px a 18 px da borda; interna 5 px a 35 px (medidas da referência). */
.moldura-linha {
  position: absolute;
  border: 0 solid var(--cor-marrom);
}

.moldura-linha--topo,
.moldura-linha--base {
  left: calc(152 * var(--u));
  right: calc(152 * var(--u));
  height: calc(22 * var(--u));
}

.moldura-linha--topo {
  top: calc(18 * var(--u));
  border-top-width: calc(7 * var(--u));
  border-bottom-width: calc(5 * var(--u));
}

.moldura-linha--base {
  bottom: calc(18 * var(--u));
  border-bottom-width: calc(7 * var(--u));
  border-top-width: calc(5 * var(--u));
}

.moldura-linha--esq,
.moldura-linha--dir {
  top: calc(168 * var(--u));
  bottom: calc(168 * var(--u));
  width: calc(22 * var(--u));
}

.moldura-linha--esq {
  left: calc(18 * var(--u));
  border-left-width: calc(7 * var(--u));
  border-right-width: calc(5 * var(--u));
}

.moldura-linha--dir {
  right: calc(18 * var(--u));
  border-right-width: calc(7 * var(--u));
  border-left-width: calc(5 * var(--u));
}

/* ---------- Traço decorativo ao lado de um texto ---------- */

.com-tracos {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.com-tracos::before,
.com-tracos::after {
  content: '';
  flex: 1 1 0;
  min-width: 1.5em;
  height: 2px;
  background: currentColor;
}

/* ---------- Cabeçalho da marca ---------- */

/*
 * Três colunas iguais nas laterais: o texto fica na coluna do meio, centralizado
 * na página, e a xícara na coluna da esquerda, encostada nele. A coluna da direita
 * só equilibra. Se faltar espaço, a xícara diminui em vez de deslocar o texto.
 */
.marca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--espaco-4);
  margin: 0;
  color: var(--cor-marrom);
}

.marca-xicara {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: end;
  width: clamp(4.5rem, 16vw, 9.5rem);
  max-width: 100%;
  height: auto;
}

.marca-nome,
.marca-complemento {
  grid-column: 2;
}

.marca-nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: clamp(1.9rem, 7.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: center;
}

.marca-complemento {
  font-family: var(--fonte-script);
  font-weight: 400;
  font-size: clamp(1.5rem, 5.4vw, 3rem);
  line-height: 1.1;
  color: var(--cor-marrom-2);
}

.marca-complemento::before,
.marca-complemento::after {
  height: 3px;
  background: var(--cor-marrom);
}

/* ---------- Categoria ---------- */

.categoria {
  margin: 0 0 var(--espaco-6);
}

.categoria-cabecalho {
  margin: 0 0 var(--espaco-3);
  color: var(--cor-marrom);
}

.categoria-cabecalho::before,
.categoria-cabecalho::after {
  height: 3px;
  background: var(--cor-marrom);
}

.categoria-titulo {
  flex: 0 1 auto;
  max-width: 85%;
  margin: 0;
  line-height: 1.1;
  padding: 0.15em 1.4em 0.2em;
  border-radius: 0.45em;
  background: var(--cor-marrom);
  color: var(--cor-creme);
  text-align: center;
}

.categoria-nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.05rem, 3.6vw, 1.9rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* Celular: faixa mais compacta para nomes curtos caberem numa linha. */
@media (max-width: 34rem) {
  .categoria-cabecalho {
    gap: 0.4em;
  }

  .categoria-cabecalho::before,
  .categoria-cabecalho::after {
    min-width: 0.9em;
  }

  .categoria-titulo {
    max-width: calc(100% - 2.6em);
    padding-inline: 0.7em;
  }

  .categoria-nome {
    letter-spacing: 0.08em;
  }
}

.categoria-subtitulo {
  display: block;
  font-family: var(--fonte-texto);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.9vw, 1.05rem);
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
}

/* ---------- Produtos ---------- */

.produtos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.7em;
  row-gap: 0.45em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.produto {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 3.6em minmax(0, 1fr); /* fallback sem subgrid */
  grid-template-columns: subgrid;
  align-items: baseline;
  break-inside: avoid;
}

.produto-codigo {
  font-weight: 700;
  color: var(--cor-texto);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Em telas estreitas, códigos compostos ("184 - 185") quebram em duas linhas. */
@media (max-width: 34rem) {
  .produto-codigo {
    max-width: 3.4em;
    white-space: normal;
    font-size: 0.85em;
    line-height: 1.2;
  }
}

.produto-linha {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
}

.produto-nome {
  flex: 0 1 auto;
  margin: 0;
  font-size: inherit;
  font-weight: 700;
  color: var(--cor-texto);
  overflow-wrap: anywhere;
}

/* Telas muito estreitas (ex.: 280 px): pontilhado mínimo e hifenização (pt-BR)
   do nome, para não cortar palavras no meio. */
@media (max-width: 19rem) {
  .produto-nome {
    hyphens: auto;
  }

  .produto-pontos {
    min-width: 0.5em;
  }
}

.produto-pontos {
  flex: 1 1 1.5em;
  min-width: 1em;
  border-bottom: 0.14em dotted var(--cor-pontos);
  transform: translateY(-0.28em);
}

.produto-preco {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--cor-texto);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.produto-descricao {
  margin: 0.05em 0 0;
  overflow-wrap: anywhere;
  font-size: 0.8em;
  line-height: 1.3;
  color: var(--cor-texto-suave);
}

/* ---------- Informações gerais ---------- */

.informacoes-lista {
  display: grid;
  gap: 0.35em;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  overflow-wrap: anywhere;
}

.informacoes-lista strong {
  color: var(--cor-texto);
}

/* ---------- Rodapé ---------- */

.rodape-instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--cor-marrom);
  font-family: var(--fonte-texto);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.rodape-instagram img {
  width: 1.4em;
  height: 1.4em;
}