/* =================================================================
   Delícias da Terê — "A Parede de Azulejo"
   Sistema visual completo. Sem build, sem framework.
   Regras normativas em DESIGN.md.
   ================================================================= */

:root {
  /* Óxidos */
  --forno:          #D9541A;
  --brasa:          #B33A0E;
  --ocre:           #C9922B;
  --verde-esmalte:  #12403A;
  --verde-claro:    #17544B;
  --rejunte:        #0B2A26;
  --esmalte:        #F6F1E6;
  --esmalte-fosco:  #E5DCCA;
  --esmalte-sombra: #A9C0B6;
  --tinta:          #14100C;
  --tinta-media:    #4A423A;
  --tinta-fraca:    #6B6055;

  /* Rampa tipográfica.
     Os três degraus abaixo de 1rem sobem no telefone: a Terê tem 60+ e
     opera o painel no celular, e o cliente lê a descrição do produto no
     mesmo aparelho. Texto de dado operacional não pode ficar em 11px. */
  --t-micro:  0.75rem;
  --t-label:  0.78rem;
  --t-menor:  0.875rem;
  --t-desc:   0.9375rem;
  --t-corpo:  1rem;
  --t-titulo: 1.125rem;
  --t-sub:    1.35rem;
  --t-titulo-grande: 1.5rem;
  --t-preco:  1.75rem;
  --t-headline: clamp(1.5rem, 3.2vw, 2.25rem);
  --t-display:  clamp(2.75rem, 8vw, 5.5rem);
  --t-display-pagina: clamp(2rem, 5.5vw, 3.5rem);
  --t-marca:    clamp(1.125rem, 2.6vw, 1.35rem);

  /* Rejunte: a única separação entre peças */
  --junta: 3px;

  /* Ritmo */
  --xs: 6px;  --sm: 12px;  --md: 20px;
  --lg: 32px; --xl: 56px;  --xxl: 88px;

  --largura: 1240px;

  /* Profundidade cerâmica */
  --vidrado: inset 0 2px 0 rgba(255,255,255,0.38),
             inset 0 -3px 0 rgba(11,42,38,0.16);
  --vidrado-escuro: inset 0 2px 0 rgba(255,255,255,0.10),
                    inset 0 -3px 0 rgba(0,0,0,0.22);
  --peca-solta: 0 10px 22px -8px rgba(11,42,38,0.55);

  --saida: cubic-bezier(0.16, 1, 0.3, 1);
}

/* No telefone a rampa inteira sobe um degrau. É o dispositivo principal
   do cliente e da Terê, e é onde a vista cansada encontra o texto
   menor. Não é preferência: PRODUCT.md declara isto como requisito. */
@media (max-width: 720px) {
  :root {
    --t-micro: 0.8125rem;
    --t-label: 0.8125rem;
    --t-menor: 0.9375rem;
    --t-desc:  1rem;
  }
}

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

/* `hidden` precisa vencer as regras de autor. Sem isto, `.campo { display:
   grid }` derrotava o atributo e o campo "precisa de troco?" continuava
   na tela depois de o cliente escolher Pix. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rejunte);
  color: var(--esmalte);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-corpo);
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

/* Foco visível sobre óxido e sobre esmalte, sem deslocar layout. */
:focus-visible {
  outline: 3px solid var(--esmalte);
  outline-offset: 2px;
}
.sobre-claro:focus-visible { outline-color: var(--brasa); }

.pular-para-conteudo {
  position: absolute; left: -9999px;
  background: var(--esmalte); color: var(--tinta);
  padding: var(--sm) var(--md); font-weight: 700; z-index: 200;
}
.pular-para-conteudo:focus { left: var(--sm); top: var(--sm); }

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -----------------------------------------------------------------
   Tipografia
   ----------------------------------------------------------------- */

.display {
  margin: 0;
  font-size: var(--t-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
}

.headline {
  margin: 0;
  font-size: var(--t-headline);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 112;
}
/* Título de painel: mesmo desenho, um degrau abaixo. */
.headline-sub { font-size: var(--t-sub); }

.titulo { margin: 0; font-size: var(--t-titulo); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }

.etiqueta {
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1;
}

.preco {
  font-size: var(--t-preco); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Sem opacity: a 72% a tinta-fraca compunha #92897E sobre esmalte, que
   é 3,06:1 e reprova. A cor declarada passava; a cor na tela não. O
   riscado já é o sinal — não precisa de transparência por cima. */
.preco-antigo {
  font-size: var(--t-desc); font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-media);
}

/* Preço fora do ladrilho (carrinho, resumo): mesmo óxido de brasa. */
.preco-forte { color: var(--brasa); }

.prosa { max-width: 68ch; }

/* -----------------------------------------------------------------
   Estrutura
   ----------------------------------------------------------------- */

.envelope { max-width: var(--largura); margin: 0 auto; padding: 0 var(--md); }
/* Uma parede não tem margem: no telefone ela sangra até a borda da tela.
   É a folga lateral que faz a grade voltar a ler como cards soltos. */
@media (max-width: 720px) { .envelope { padding: 0; } }
@media (max-width: 720px) {
  .pagina-cabeca, .secao-cabeca, .frontal-acoes, .filtros { padding-left: var(--sm); padding-right: var(--sm); }
}

.faixa-aviso {
  background: var(--brasa);
  color: var(--esmalte);
  padding: 10px var(--md);
  text-align: center;
}
.faixa-aviso .etiqueta { display: inline-block; }

/* Barra superior ------------------------------------------------- */

.barra {
  position: sticky; top: 0; z-index: 100;
  background: var(--verde-esmalte);
  box-shadow: var(--vidrado-escuro);
}
.barra-interna {
  max-width: var(--largura); margin: 0 auto;
  display: flex; align-items: center; gap: var(--md);
  padding: var(--sm) var(--md); min-height: 68px;
}
@media (max-width: 720px) { .barra-interna { padding: var(--sm); } }

.marca {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-right: auto;
}
/* A logo entra solta, sem moldura: nem quadrado, nem círculo, nem
   anel. É a própria ilustração com o fundo já removido, apoiada no
   verde da barra. A largura é livre — a logo não é quadrada, e forçá-la
   num quadrado era justamente o que criava a moldura. */
.marca-selo {
  height: 52px; width: auto; flex: none;
  display: flex; align-items: center;
}
.marca-selo img, .marca-selo svg {
  height: 100%; width: auto; max-width: none;
  /* Sombra na silhueta, não numa caixa: a ilustração tem contorno
     próprio e é ele que precisa descolar do fundo escuro. */
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
}
@media (max-width: 460px) { .marca-selo { height: 42px; } }
.marca-nome {
  font-size: var(--t-marca);
  font-weight: 800; line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 118;
  text-transform: uppercase;
}

.estado-loja {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--esmalte-sombra); font-size: var(--t-menor);
  margin: 0;
}
.estado-loja b { color: var(--esmalte); font-weight: 700; }
/* Fechada é informação crítica: peça de brasa, não texto tingido.
   Ocre sobre verde dava 4.14:1 e reprovava. */
.estado-loja.fechada b {
  background: var(--brasa); color: var(--esmalte);
  padding: 6px 10px; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: var(--t-micro);
}
/* No telefone a barra é UMA linha só.
   Antes ela empilhava marca, botão de carrinho e estado da loja em três
   fileiras — quase um terço da tela de cabeçalho fixo, num aparelho em
   que o cliente veio ver pão.

   O carrinho sai daqui porque a barra inferior já o tem, a um polegar
   de distância. O estado da loja sai porque já está no primeiro
   viewport, e no carrinho e no checkout ele não muda decisão nenhuma —
   quem está fechando o pedido já escolheu. */
@media (max-width: 900px) {
  .barra-interna { flex-wrap: nowrap; min-height: 56px; }
  .estado-loja { display: none; }
  .botao-carrinho { display: none; }
}

.botao-carrinho {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--forno); color: var(--tinta);
  text-decoration: none; border: 0;
  padding: 14px var(--md); min-height: 56px;
  box-shadow: var(--vidrado);
  font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; font-size: var(--t-label);
  transition: background 0.18s var(--saida);
}
.botao-carrinho:hover { background: var(--ocre); }
.contador {
  min-width: 24px; height: 24px; padding: 0 6px;
  display: inline-grid; place-items: center;
  background: var(--rejunte); color: var(--esmalte);
  font-variant-numeric: tabular-nums; font-size: var(--t-menor);
}

/* -----------------------------------------------------------------
   Primeiro viewport: a parede
   ----------------------------------------------------------------- */

.frontal {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--junta);
  background: var(--rejunte);
  margin-top: var(--junta);
}
@media (max-width: 900px) { .frontal { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------
   No telefone o primeiro viewport encolhe para uma faixa.

   A marca já está na barra, e a logo já traz o nome escrito dentro
   dela: o título em display repetia a mesma palavra pela terceira vez
   seguida e empurrava a parede para fora da tela. O mosaico repetia os
   mesmos produtos que aparecem 300px abaixo.

   Fica o que só existe aqui: se a loja está aberta, quanto tem hoje,
   quanto já esgotou, e o caminho para o cardápio. O h1 continua no
   documento para leitor de tela e busca — só não ocupa a tela.
   ----------------------------------------------------------------- */
@media (max-width: 720px) {
  .frontal-mosaico { display: none; }

  .frontal-texto {
    padding: var(--md);
    gap: var(--sm);
  }
  .frontal-texto .display {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .frontal-linha {
    font-size: var(--t-corpo); font-weight: 700;
    max-width: none;
  }
  .frontal-fatos {
    margin-top: 0; padding-top: var(--sm);
    gap: var(--xs) var(--md);
  }
}

.frontal-texto {
  background: var(--forno);
  color: var(--tinta);
  padding: clamp(var(--lg), 5vw, var(--xxl)) clamp(var(--md), 4vw, var(--xl));
  box-shadow: var(--vidrado);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--md);
}
.frontal-texto .display { color: var(--tinta); }

/* Sem o título em display, esta frase é a voz do bloco: sobe de peso
   e de tamanho para carregar o primeiro viewport sozinha. */
.frontal-linha {
  max-width: 30ch; margin: 0;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 800; line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.frontal-fatos {
  display: flex; flex-wrap: wrap; gap: var(--xs) var(--lg);
  margin-top: var(--xs);
  border-top: 3px solid rgba(20,16,12,0.28);
  padding-top: var(--md);
}
.fato { display: grid; gap: 4px; }
/* Tinta sólida: rgba a 72% caía para 3.39:1 sobre o laranja. */
.fato .etiqueta { color: var(--tinta); }
.fato b { font-size: var(--t-titulo); font-weight: 800; color: var(--tinta); }

.frontal-acoes { display: flex; flex-wrap: wrap; gap: var(--junta); margin-top: var(--xs); }

/* Mosaico decorativo da frente: peças de tamanhos diferentes. */
.frontal-mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--junta);
  min-height: 420px;
}
@media (max-width: 900px) { .frontal-mosaico { min-height: 260px; } }
.frontal-mosaico > * { position: relative; overflow: hidden; }
.frontal-mosaico .peca-larga { grid-column: span 2; }
.frontal-mosaico .peca-alta  { grid-row: span 2; }

.peca-legenda {
  position: absolute; inset: auto 0 0 0;
  background: var(--rejunte); color: var(--esmalte);
  padding: 10px var(--sm);
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* -----------------------------------------------------------------
   Botões
   ----------------------------------------------------------------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; border: 0; cursor: pointer;
  padding: 18px var(--lg); min-height: 56px;
  font-family: inherit; font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  box-shadow: var(--vidrado);
  transition: background 0.18s var(--saida), color 0.18s var(--saida);
}
.botao-forno  { background: var(--forno); color: var(--tinta); }
.botao-forno:hover { background: var(--ocre); }
.botao-esmalte { background: var(--esmalte); color: var(--tinta); }
.botao-esmalte:hover { background: var(--esmalte-fosco); }
.botao-verde { background: var(--verde-esmalte); color: var(--esmalte); }
.botao-verde:hover { background: var(--verde-claro); }
.botao-largo { width: 100%; }
.botao[disabled], .botao[aria-disabled="true"] {
  background: var(--verde-esmalte); color: var(--esmalte-sombra);
  cursor: not-allowed; box-shadow: var(--vidrado-escuro);
}

/* -----------------------------------------------------------------
   Filtros de categoria
   ----------------------------------------------------------------- */

.filtros {
  display: flex; flex-wrap: wrap; gap: var(--junta);
  margin: 0; padding: 0; list-style: none;
}
.filtro {
  display: inline-flex; align-items: center; text-decoration: none;
  background: var(--verde-esmalte); color: var(--esmalte);
  padding: 14px var(--md); min-height: 56px;
  box-shadow: var(--vidrado-escuro);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.18s var(--saida), color 0.18s var(--saida);
}
.filtro:hover { background: var(--verde-claro); }
/* O PHP emite aria-current="page". O seletor antigo pedia "true" e o
   chip ativo nunca acendia — o único mecanismo de navegação do cardápio
   não dava feedback de onde você está. */
.filtro[aria-current] {
  background: var(--forno); color: var(--tinta);
  box-shadow: var(--vidrado);
}

/* -----------------------------------------------------------------
   A PAREDE — grade de ladrilhos
   ----------------------------------------------------------------- */

.parede {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Fileiras de mesma altura: uma parede com peças de alturas
     diferentes deixa de ser parede. */
  grid-auto-rows: 1fr;
  gap: var(--junta);
  background: var(--rejunte);
}

/* Cercadura: a peça de arremate que abre e fecha a parede.
   Não é peça de campo — é direcional e resolve a borda. */
.cercadura { height: 34px; overflow: hidden; margin-bottom: var(--junta); }
.cercadura-fim { margin: var(--junta) 0 0; transform: scaleY(-1); }
.cercadura svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1100px) { .parede { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .parede { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .parede { grid-template-columns: 1fr; } }

.secao-parede { margin-top: var(--xxl); }
.secao-cabeca {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--md); flex-wrap: wrap;
  margin-bottom: var(--md);
}
.secao-cabeca p { margin: 6px 0 0; color: var(--esmalte-sombra); }

/* O ladrilho ------------------------------------------------------ */

.ladrilho {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--esmalte); color: var(--tinta);
  box-shadow: var(--vidrado);
  transition: box-shadow 0.22s var(--saida), transform 0.22s var(--saida);
}
.ladrilho:hover, .ladrilho:focus-within {
  box-shadow: var(--peca-solta), var(--vidrado);
  transform: translateY(-2px);
  z-index: 2;
}

.ladrilho-face {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--verde-esmalte);
}
.ladrilho-face img { width: 100%; height: 100%; object-fit: cover; }
.ladrilho-padrao { width: 100%; height: 100%; }

/* Foto enviada pelo dono: o padrão vira moldura de 8px. */
.ladrilho-face.com-foto { padding: 8px; }
.ladrilho-face.com-foto .moldura { position: absolute; inset: 0; z-index: 0; }
.ladrilho-face.com-foto img { position: relative; z-index: 1; }

/* A peça inteira é o alvo: face, nome e preço abrem o produto. */
.ladrilho-abrir {
  display: flex; flex-direction: column; flex: 1;
  text-decoration: none; color: inherit;
}
.ladrilho-abrir:focus-visible { outline: 3px solid var(--brasa); outline-offset: -3px; }

.ladrilho-corpo {
  display: flex; flex-direction: column; gap: var(--xs);
  padding: var(--md); flex: 1;
}
.ladrilho-corpo .titulo { font-size: var(--t-titulo); font-weight: 700; line-height: 1.2; }

/* Ação separada do link, senão um toque para ver vira uma compra. */
.ladrilho-acao { padding: 0 var(--md) var(--md); display: grid; gap: var(--xs); }

.marca-fotos {
  position: absolute; right: var(--sm); bottom: var(--sm); z-index: 3;
  background: var(--rejunte); color: var(--esmalte);
  padding: 4px 8px;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.marca-variacoes {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinta-media);
}
.ladrilho-corpo .titulo { text-wrap: balance; }
.ladrilho-desc {
  margin: 0; font-size: var(--t-desc); line-height: 1.45;
  color: var(--tinta-media);
}
.ladrilho-unidade {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinta-fraca);
}

.ladrilho-preco {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: auto; padding-top: var(--sm);
  flex-wrap: wrap;
}
.ladrilho-preco .preco { color: var(--brasa); }
.ladrilho-preco .preco-antigo { color: var(--tinta-media); }

.ladrilho .botao { box-shadow: none; }

/* Selo circular: a única forma redonda do sistema. Uma palavra curta,
   porque é um carimbo — texto que não cabe vira faixa, não selo menor. */
.selo {
  position: absolute; top: var(--sm); left: var(--sm); z-index: 3;
  display: inline-grid; place-items: center; text-align: center;
  width: 62px; height: 62px; border-radius: 999px;
  background: var(--brasa); color: var(--esmalte);
  font-size: var(--t-micro); font-weight: 800; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--vidrado);
}

/* Encomenda: faixa de brasa no topo da peça, com o prazo por extenso.
   O prazo é uma frase e não cabe num carimbo. */
.faixa-encomenda {
  margin: 0; padding: 10px var(--md);
  background: var(--brasa); color: var(--esmalte);
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* Peça fechada: esgotou hoje. Continua na parede. */
.ladrilho-fechado {
  background: var(--verde-esmalte);
  color: var(--esmalte-sombra);
  box-shadow: var(--vidrado-escuro);
}
.ladrilho-fechado:hover { transform: none; box-shadow: var(--vidrado-escuro); }
.ladrilho-fechado .titulo { color: var(--esmalte); }
.ladrilho-fechado .ladrilho-desc { color: var(--esmalte-sombra); }
.ladrilho-fechado .ladrilho-unidade { color: var(--esmalte-sombra); }
.ladrilho-fechado .ladrilho-face img { filter: grayscale(0.7) brightness(0.55); }
.marca-esgotado {
  display: inline-block; margin-top: auto;
  background: var(--rejunte); color: var(--ocre);
  padding: 10px var(--sm);
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
}

.resta-hoje {
  margin: 0;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brasa);
}

/* Formulário de adicionar dentro do ladrilho */
.forma-add { display: grid; gap: var(--junta); margin-top: var(--sm); }
.forma-add .botao { padding: 16px var(--sm); letter-spacing: 0.1em; }

/* A escolha do sabor: peça clara com o mesmo vidrado dos campos, e
   nunca menor que o botão que vem depois dela. */
.campo-sabor { display: block; }
.campo-sabor select {
  width: 100%; border: 0; border-radius: 0;
  background: var(--esmalte-fosco); color: var(--tinta);
  box-shadow: var(--vidrado);
  padding: 14px var(--sm); min-height: 56px;
  font-family: inherit; font-size: var(--t-desc); font-weight: 700;
  appearance: none;
  /* Seta desenhada, para o campo não herdar o widget do sistema no
     meio de uma peça de cerâmica. */
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%),
                    linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.campo-sabor select:focus-visible { outline: 3px solid var(--forno); outline-offset: 0; }
.campo-sabor select:invalid { color: var(--tinta-media); }
.forma-add .botao[disabled] { background: var(--esmalte-fosco); color: var(--tinta-media); }

/* O sabor escolhido: peça de ocre, não texto solto. Precisa se separar
   do nome do produto num relance, porque é o que a Terê vai assar. */
.marca-sabor {
  display: inline-block; align-self: flex-start;
  background: var(--ocre); color: var(--tinta);
  padding: 4px 10px;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.marca-sabor-inline {
  display: inline-block;
  background: var(--ocre); color: var(--tinta);
  padding: 2px 8px; margin-left: 4px;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Quantas o cliente já colocou. A parede precisa lembrar, senão ele
   adiciona de novo na dúvida. */
.no-pedido {
  margin: var(--xs) 0 0;
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brasa);
}

/* -----------------------------------------------------------------
   Parede vazia — estado normal antes do primeiro cadastro
   ----------------------------------------------------------------- */

.parede-vazia {
  position: relative;
  display: grid; place-items: center;
  min-height: 380px; padding: var(--xl) var(--md);
  text-align: center; overflow: hidden;
  background: var(--verde-esmalte);
  box-shadow: var(--vidrado-escuro);
}
.parede-vazia .fundo { position: absolute; inset: 0; opacity: 0.5; }
.parede-vazia .dentro { position: relative; display: grid; gap: var(--sm); justify-items: center; }
.parede-vazia p { margin: 0; color: var(--esmalte-sombra); max-width: 46ch; }

/* -----------------------------------------------------------------
   Painéis de conteúdo (carrinho, checkout, pedido)
   ----------------------------------------------------------------- */

.pagina { padding: var(--junta) 0 var(--xxl); }

/* A Regra do Campo vale também aqui: o cabeçalho das páginas de tarefa
   é uma região inteira de óxido, não um título solto sobre o rejunte.
   Sem isto, carrinho e checkout perdem o laranja justamente onde o
   cliente decide comprar. */
.pagina-cabeca {
  background: var(--forno); color: var(--tinta);
  box-shadow: var(--vidrado);
  padding: var(--xl) var(--lg);
  margin-bottom: var(--lg);
}
/* No telefone o cabeçalho de tarefa encolhe: ele é orientação, não a
   tarefa. 56px de folga em cima e embaixo empurravam o primeiro item
   do pedido para fora da tela. */
@media (max-width: 720px) {
  .pagina-cabeca { padding: var(--md); margin-bottom: var(--junta); }
  .pagina-cabeca .display { font-size: 1.75rem; }
  .pagina-cabeca p { font-size: var(--t-menor); }
}
.pagina-cabeca .display { font-size: var(--t-display-pagina); color: var(--tinta); }
.pagina-cabeca p { margin: var(--sm) 0 0; color: var(--tinta); max-width: 52ch; }
.pagina-cabeca p b { color: var(--tinta); }

.colunas {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: var(--lg); align-items: start;
}
@media (max-width: 900px) { .colunas { grid-template-columns: 1fr; } }

.painel {
  background: var(--esmalte); color: var(--tinta);
  box-shadow: var(--vidrado);
  padding: var(--lg);
}
.painel + .painel { margin-top: var(--junta); }
.painel h2, .painel h3 { margin: 0 0 var(--sm); }
.painel-escuro {
  background: var(--verde-esmalte); color: var(--esmalte);
  box-shadow: var(--vidrado-escuro);
}

.resumo { position: sticky; top: 88px; }
@media (max-width: 900px) { .resumo { position: static; } }

.linha-resumo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--md); padding: var(--sm) 0;
  border-bottom: 2px solid rgba(20,16,12,0.10);
  font-variant-numeric: tabular-nums;
}
.linha-resumo:last-of-type { border-bottom: 0; }
.linha-resumo.total {
  border-top: 3px solid var(--tinta); border-bottom: 0;
  margin-top: var(--xs); padding-top: var(--md);
}
.linha-resumo.total b { font-size: var(--t-preco); font-weight: 800; }
.painel-escuro .linha-resumo { border-color: rgba(246,241,230,0.16); }
.painel-escuro .linha-resumo.total { border-top-color: var(--esmalte); }

/* Item do carrinho ------------------------------------------------ */

.item-carrinho {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--md);
  padding: var(--md) 0;
  border-bottom: 2px solid rgba(20,16,12,0.10);
}
.item-carrinho:last-child { border-bottom: 0; padding-bottom: 0; }
.item-carrinho:first-child { padding-top: 0; }
@media (max-width: 620px) {
  .item-carrinho { grid-template-columns: 72px 1fr; }
  .item-carrinho .item-acoes { grid-column: 1 / -1; justify-items: stretch; }
}
.item-face { width: 96px; height: 96px; overflow: hidden; box-shadow: var(--vidrado); }
@media (max-width: 620px) { .item-face { width: 72px; height: 72px; } }
.item-face img { width: 100%; height: 100%; object-fit: cover; }
.item-info { display: grid; gap: 6px; align-content: start; }
.item-acoes { display: grid; gap: var(--sm); justify-items: end; align-content: space-between; }

.contagem { display: flex; align-items: stretch; box-shadow: var(--vidrado); }
/* Submit invisível: existe só para Enter aplicar a quantidade digitada
   em vez de acionar o botão "menos", que é o primeiro do formulário. */
.submit-implicito {
  position: absolute; width: 1px; height: 1px;
  padding: 0; border: 0; opacity: 0; pointer-events: none;
}
.contagem button {
  width: 56px; min-height: 56px; border: 0; cursor: pointer;
  background: var(--esmalte-fosco); color: var(--tinta);
  font-size: var(--t-titulo); font-weight: 800; font-family: inherit;
  line-height: 1;
}
.contagem button:hover { background: var(--ocre); }
.contagem button[disabled] { color: var(--tinta-fraca); cursor: not-allowed; }
.contagem input {
  width: 56px; border: 0; text-align: center;
  background: var(--esmalte); color: var(--tinta);
  font-family: inherit; font-size: var(--t-corpo); font-weight: 800;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.contagem input::-webkit-outer-spin-button,
.contagem input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.link-remover {
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center;
  padding: 0 var(--xs); min-height: 56px;
  font-family: inherit; font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brasa); text-decoration: underline;
  text-underline-offset: 3px;
}

/* -----------------------------------------------------------------
   Formulários
   ----------------------------------------------------------------- */

/* fieldset como agrupador semântico, sem a moldura nativa: o mundo
   não tem borda, e o leitor de tela precisa do legend. */
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.grupo > legend { padding: 0; }

.campos { display: grid; gap: var(--md); }
.campos-duplos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md); }
@media (max-width: 620px) { .campos-duplos { grid-template-columns: 1fr; } }

.campo { display: grid; gap: 8px; }
.campo > span {
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-media);
}
.painel-escuro .campo > span { color: var(--esmalte-sombra); }

.campo input, .campo select, .campo textarea {
  width: 100%; border: 0; border-radius: 0;
  background: var(--esmalte); color: var(--tinta);
  box-shadow: var(--vidrado);
  padding: 16px 18px; min-height: 56px;
  font-family: inherit; font-size: var(--t-corpo);
  appearance: none;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-fraca); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--forno); outline-offset: 0;
}
.campo-erro input, .campo-erro select { box-shadow: var(--vidrado), inset 0 -4px 0 var(--brasa); }
.mensagem-erro {
  font-size: var(--t-menor); font-weight: 700; color: var(--brasa);
  display: flex; gap: 6px; align-items: baseline;
}

.ajuda { font-size: var(--t-menor); color: var(--tinta-media); margin: 0; }
.painel-escuro .ajuda { color: var(--esmalte-sombra); }

/* Escolha em ladrilhos (entrega/retirada, pagamento) */
.escolha { display: flex; flex-wrap: wrap; gap: var(--junta); }
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha label {
  cursor: pointer; display: inline-flex; align-items: center;
  padding: 16px var(--md); min-height: 56px;
  background: var(--esmalte-fosco); color: var(--tinta);
  box-shadow: var(--vidrado);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.18s var(--saida);
}
.escolha label:hover { background: var(--ocre); }
.escolha input:checked + label { background: var(--forno); color: var(--tinta); }
.escolha input:focus-visible + label { outline: 3px solid var(--brasa); outline-offset: 2px; }

/* -----------------------------------------------------------------
   Avisos
   ----------------------------------------------------------------- */

.aviso {
  display: flex; gap: var(--sm); align-items: flex-start;
  background: var(--ocre); color: var(--tinta);
  padding: var(--md); box-shadow: var(--vidrado);
  margin-bottom: var(--junta);
}
.aviso-erro { background: var(--brasa); color: var(--esmalte); }
.aviso p { margin: 0; }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }

/* -----------------------------------------------------------------
   Trilha de status do pedido
   ----------------------------------------------------------------- */

.trilha { display: grid; gap: var(--junta); list-style: none; margin: 0; padding: 0; }
.trilha-passo {
  display: grid; grid-template-columns: 56px 1fr; align-items: center;
  gap: var(--md); padding: var(--md);
  background: var(--verde-esmalte); color: var(--esmalte-sombra);
  box-shadow: var(--vidrado-escuro);
}
.trilha-passo b { display: block; color: var(--esmalte); font-size: var(--t-titulo); }
.trilha-passo .marcador {
  width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--rejunte); color: var(--esmalte-sombra);
  font-size: var(--t-titulo); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.trilha-passo.cumprido { background: var(--forno); color: var(--tinta); }
.trilha-passo.cumprido b { color: var(--tinta); }
.trilha-passo.cumprido .marcador { background: var(--tinta); color: var(--forno); }
.trilha-passo.atual { background: var(--esmalte); color: var(--tinta-media); }
.trilha-passo.atual b { color: var(--tinta); }
.trilha-passo.atual .marcador { background: var(--brasa); color: var(--esmalte); }

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

.rodape { margin-top: var(--xxl); background: var(--verde-esmalte); }
.rodape-faixa { height: 56px; overflow: hidden; }
.rodape-faixa svg { width: 100%; height: 100%; }
.rodape-interna {
  max-width: var(--largura); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--lg); padding: var(--xl) var(--md);
}
.rodape h2 { margin: 0 0 var(--sm); font-size: var(--t-titulo); font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape a { color: var(--esmalte); text-decoration: underline; text-underline-offset: 3px; }
.rodape p { margin: 0 0 8px; color: var(--esmalte-sombra); }
.rodape-fim {
  border-top: 3px solid var(--rejunte);
  padding: var(--md); text-align: center;
  color: var(--esmalte-sombra); font-size: var(--t-menor);
}

/* -----------------------------------------------------------------
   Barra inferior no telefone
   ----------------------------------------------------------------- */

.barra-inferior { display: none; }
@media (max-width: 720px) {
  .barra-inferior {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--junta); background: var(--rejunte);
    position: sticky; bottom: 0; z-index: 90;
  }
  .barra-inferior a {
    display: flex; align-items: center; justify-content: center;
    min-height: 60px; text-decoration: none;
    font-size: var(--t-label); font-weight: 800;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
}

/* -----------------------------------------------------------------
   Movimento
   ----------------------------------------------------------------- */

/* -----------------------------------------------------------------
   FECHAR PEDIDO

   Destilado: 7 campos, quatro blocos, uma rolagem. A versão anterior
   pedia 13 dados em 6 painéis e 2.900px, e terminava num botão
   desabilitado que ninguém via chegar.
   ----------------------------------------------------------------- */

.pagina-fechar { padding-bottom: 140px; }   /* espaço para a barra de ação */

.titulo-fechar {
  margin: var(--md) 0;
  font-size: var(--t-sub); font-weight: 800;
  letter-spacing: -0.01em;
}
@media (max-width: 720px) { .titulo-fechar { padding: 0 var(--sm); } }

.bloco-fechar {
  background: var(--esmalte); color: var(--tinta);
  box-shadow: var(--vidrado);
  padding: var(--md);
  display: grid; gap: var(--sm);
}
.bloco-fechar + .bloco-fechar { margin-top: var(--junta); }
.bloco-titulo {
  margin: 0;
  font-size: var(--t-label); font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-media);
}
.campo-opcional {
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--tinta-fraca);
}

/* O endereço que o CEP achou: texto confirmado, não campo vazio. */
.endereco-achado {
  margin: 0; padding: var(--sm) var(--md);
  background: var(--esmalte-fosco);
  box-shadow: var(--vidrado);
  font-size: var(--t-desc); font-weight: 700;
}

/* O total nasce aqui, colado no CEP que o produziu. */
.resumo-entrega {
  margin-top: var(--xs);
  padding: var(--sm) var(--md);
  background: var(--verde-esmalte); color: var(--esmalte);
  box-shadow: var(--vidrado-escuro);
}
.resumo-entrega .linha-resumo { border-color: rgba(246,241,230,0.16); padding: 8px 0; }
.resumo-entrega .linha-resumo:last-of-type { border-bottom: 0; }
.linha-chegada {
  margin: 6px 0 0; font-size: var(--t-desc); color: var(--esmalte-sombra);
}
.linha-chegada b { color: var(--esmalte); }

.campo-troco { margin-top: var(--xs); }
.escolha-modo label, .escolha-data label { flex: 1 1 auto; justify-content: center; }

.nota-pagamento {
  margin: var(--md) 0 0; text-align: center;
  font-size: var(--t-menor); color: var(--esmalte-sombra);
}
@media (max-width: 720px) { .nota-pagamento { padding: 0 var(--sm); } }

.voltar-carrinho { margin: var(--md) 0 0; text-align: center; }
.voltar-carrinho a {
  color: var(--esmalte-sombra); font-size: var(--t-menor);
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 56px;
}
.voltar-carrinho a:hover { color: var(--esmalte); }

/* A ação fica sempre à mão, com o número dentro. */
.acao-fechar {
  position: sticky; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: var(--md);
  margin-top: var(--junta);
  padding: var(--sm) var(--md);
  background: var(--rejunte);
  box-shadow: 0 -10px 24px -14px rgba(0,0,0,0.7);
}
.acao-total { display: grid; gap: 2px; }
.acao-total .etiqueta { color: var(--esmalte-sombra); }
.acao-total b {
  font-size: var(--t-preco); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--esmalte);
}
.acao-fechar .botao { box-shadow: var(--vidrado); }
@media (max-width: 460px) {
  .acao-fechar { grid-template-columns: 1fr; gap: var(--xs); }
  .acao-fechar .botao { width: 100%; }
}

/* -----------------------------------------------------------------
   A JANELA DO PRODUTO

   <dialog> nativo: foco preso, Esc fecha, leitor de tela entende.
   Ela não flutua sobre a parede como um card — ela é uma peça grande
   que se abre, com a mesma cerâmica de tudo.
   ----------------------------------------------------------------- */

.janela {
  border: 0; padding: 0; max-width: 980px; width: calc(100% - var(--md) * 2);
  max-height: calc(100dvh - var(--md) * 2);
  background: var(--esmalte); color: var(--tinta);
  box-shadow: var(--vidrado), 0 30px 60px -20px rgba(11,42,38,0.7);
  overflow: visible;
}
.janela::backdrop { background: rgba(11,42,38,0.82); }

@media (max-width: 720px) {
  .janela {
    width: 100%; max-width: 100%;
    max-height: 100dvh; height: 100dvh;
    margin: 0; align-self: flex-end;
  }
}

.janela-fechar-forma { position: absolute; top: 0; right: 0; z-index: 5; margin: 0; }
.janela-fechar {
  border: 0; cursor: pointer;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--rejunte); color: var(--esmalte);
  transition: background 0.15s var(--saida);
}
.janela-fechar:hover { background: var(--brasa); }
.janela-fechar:focus-visible { outline: 3px solid var(--forno); outline-offset: -6px; }

.janela-corpo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--junta); background: var(--rejunte);
  max-height: inherit; overflow: hidden;
}
@media (max-width: 820px) {
  .janela-corpo { grid-template-columns: 1fr; overflow-y: auto; max-height: 100dvh; }
}

/* Carrossel ------------------------------------------------------- */

.carrossel { position: relative; background: var(--verde-esmalte); overflow: hidden; }
.carrossel-trilho {
  display: flex; height: 100%;
  scroll-snap-type: x mandatory;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-foto {
  flex: 0 0 100%; scroll-snap-align: center;
  aspect-ratio: 1 / 1; min-height: 100%;
}
.carrossel-foto img, .carrossel-foto svg { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .carrossel-foto { aspect-ratio: 4 / 3; min-height: 0; } }

.carrossel-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 56px; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(11,42,38,0.72); color: var(--esmalte);
  transition: background 0.15s var(--saida), opacity 0.15s var(--saida);
}
.carrossel-seta:hover { background: var(--rejunte); }
.carrossel-seta:focus-visible { outline: 3px solid var(--forno); outline-offset: -4px; }
.carrossel-antes { left: 0; }
.carrossel-depois { right: 0; }
.carrossel-seta[hidden] { display: none; }

.carrossel-pontos {
  position: absolute; left: 0; right: 0; bottom: var(--sm);
  display: flex; justify-content: center; gap: var(--xs);
}
.carrossel-ponto {
  width: 32px; height: 6px; border: 0; padding: 0; cursor: pointer;
  background: rgba(246,241,230,0.45);
  transition: background 0.2s var(--saida);
}
.carrossel-ponto[aria-selected="true"] { background: var(--forno); }
.carrossel-ponto:focus-visible { outline: 2px solid var(--esmalte); outline-offset: 3px; }

/* Ficha ----------------------------------------------------------- */

.janela-ficha {
  background: var(--esmalte);
  padding: var(--xl) var(--lg) var(--lg);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sm);
}
@media (max-width: 720px) { .janela-ficha { padding: var(--md); } }

.janela-unidade {
  margin: 0; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-fraca);
}
.janela-descricao { margin: 0; color: var(--tinta-media); max-width: 52ch; }
.janela-preco { display: flex; align-items: baseline; gap: var(--sm); flex-wrap: wrap; }
.janela-preco .preco { color: var(--brasa); font-size: 2.25rem; }
.janela-encomenda { margin: 0; }

.janela-grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.janela-legenda {
  display: block; padding: 0; margin-bottom: var(--xs);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-media);
}

/* Sabores como peças de escolher, não dropdown apertado. */
.escolha-sabor label { flex: 1 1 auto; justify-content: center; text-align: center; }
.escolha-sabor input:disabled + label {
  background: var(--verde-esmalte); color: var(--esmalte-sombra);
  cursor: not-allowed; text-decoration: line-through;
}

.janela-linha {
  display: grid; grid-template-columns: auto 1fr; gap: var(--md);
  align-items: end; margin-top: var(--xs);
}
@media (max-width: 620px) { .janela-linha { grid-template-columns: 1fr; } }
.janela-quantidade { display: grid; gap: var(--xs); }
.janela-obs { margin: 0; }

/* -----------------------------------------------------------------
   MOVIMENTO

   Tese: azulejo tem peso e vidrado. Uma peça de cerâmica não flutua e
   não desliza — ela assenta, e a luz corre pelo esmalte quando você
   passa a mão. Todo movimento aqui é uma dessas duas coisas, e o
   momento focal é um só: a peça abrindo sob o dedo.

   Orçamento: hospedagem compartilhada e celular modesto. Nada de blur
   em área grande, nada em laço fora da tela, nada acima de 500ms.
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* A parede se assenta peça por peça, como quem azuleja — e agora
     acompanha a rolagem: cada fileira assenta quando entra na tela,
     não tudo de uma vez no carregamento. É o que tirava a vida do
     scroll: a página inteira já estava pronta antes de você chegar. */
  .parede .ladrilho {
    animation: assentar 0.5s var(--saida) both;
    animation-delay: calc(min(var(--ordem, 0), 12) * 40ms);
  }
  @keyframes assentar {
    from { opacity: 0.25; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1;    transform: none; }
  }

  /* Scroll-driven: onde o navegador suporta, o assentamento é
     comandado pela posição da peça na tela, não por tempo. Rolar
     passa a ter consequência. Fallback: a animação por tempo acima. */
  @supports (animation-timeline: view()) {
    .parede .ladrilho {
      animation: assentar-scroll linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      animation-delay: 0s;
    }
    @keyframes assentar-scroll {
      from { opacity: 0.2; transform: translateY(26px) scale(0.965); }
      to   { opacity: 1;   transform: none; }
    }

    /* As seções respiram ao entrar: título e cercadura sobem juntos. */
    .secao-cabeca, .cercadura {
      animation: subir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    @keyframes subir {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: none; }
    }
  }

  /* Troca de categoria: as peças que ficam reassentam no lugar novo. */
  .parede .ladrilho.reassentando {
    animation: reassentar 0.42s var(--saida) both;
    animation-delay: calc(min(var(--ordem, 0), 10) * 28ms);
    animation-timeline: auto;
  }
  @keyframes reassentar {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  /* A janela do produto cresce da parede, não aparece do nada. */
  .janela[open] { animation: janela-abre 0.34s var(--saida); }
  @keyframes janela-abre {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: none; }
  }
  .janela[open]::backdrop { animation: fundo-entra 0.28s ease-out; }
  @keyframes fundo-entra {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* A barra sai de cena ao descer e volta ao subir.
     Transform, não altura: animar `min-height` obriga o navegador a
     recalcular layout a cada quadro, e num celular modesto isso é
     exatamente o que faz o scroll engasgar. */
  .barra {
    transition: transform 0.28s var(--saida), box-shadow 0.28s var(--saida);
    will-change: transform;
  }
  .barra.encolhida { transform: translateY(-100%); }
  .barra.voltando { box-shadow: var(--vidrado-escuro), 0 8px 20px -12px rgba(0,0,0,0.55); }

  /* MOMENTO FOCAL — a peça abrindo.
     Não é um card levantando: é o vidrado ganhando luz na aresta de
     cima e a peça saindo um milímetro da parede. A luz é um gradiente
     que corre pela face, não um brilho aplicado por cima. */
  .ladrilho .ladrilho-face::after {
    content: '';
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 35%,
      rgba(255,255,255,0.30) 48%,
      rgba(255,255,255,0.05) 60%,
      transparent 72%);
    transform: translateX(-120%);
    opacity: 0;
    transition: transform 0.55s var(--saida), opacity 0.2s linear;
  }
  .ladrilho:hover .ladrilho-face::after,
  .ladrilho:focus-within .ladrilho-face::after {
    transform: translateX(120%);
    opacity: 1;
  }
  /* Peça fechada não brilha: o esmalte dela esfriou. */
  .ladrilho-fechado .ladrilho-face::after { content: none; }

  /* A peça entrou no pedido. Um assentar curto e seco — o toque teve
     consequência física, não um "toast" flutuando em outro canto. */
  .ladrilho.acabou-de-entrar { animation: encaixou 0.34s var(--saida); }
  @keyframes encaixou {
    0%   { transform: none; }
    35%  { transform: translateY(3px) scale(0.992); }
    100% { transform: none; }
  }

  .no-pedido[data-no-pedido]:not([hidden]) { animation: contar 0.3s var(--saida); }
  @keyframes contar {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }

  /* CONTINUIDADE — o item esgotando na frente do cliente.
     Aplicado por JS quando um item fecha durante a sessão. O esmalte
     esfria: a face perde saturação e a peça assenta de volta. */
  .ladrilho.esfriando { animation: esfriar 0.6s var(--saida) both; }
  @keyframes esfriar {
    from { filter: none; }
    to   { filter: saturate(0.35) brightness(0.75); }
  }

  /* FEEDBACK — o botão de ação afunda no toque, como tecla de esmalte. */
  .botao:active:not([disabled]),
  .filtro:active,
  .chave:active,
  .botao-miudo:active { transform: translateY(1px); }

  /* O campo em erro chama uma vez e para. Sem tremor: é peça de
     cerâmica, e tremor lê como falha do site, não do preenchimento. */
  .campo-erro input, .campo-erro select { animation: chamar 0.4s var(--saida); }
  @keyframes chamar {
    from { box-shadow: var(--vidrado), inset 0 -4px 0 var(--brasa), 0 0 0 6px rgba(179,58,14,0.28); }
    to   { box-shadow: var(--vidrado), inset 0 -4px 0 var(--brasa), 0 0 0 0 rgba(179,58,14,0); }
  }
}

/* Sem movimento: os estados continuam existindo, só não são animados. */
@media (prefers-reduced-motion: reduce) {
  .ladrilho, .ladrilho-face::after { transition: none; animation: none; }
}