/* O ESQUELETO DA ESPERA — a mesma folha no painel e na loja.
 *
 * Um arquivo só, incluído pelos dois layouts, porque é o MESMO gesto nos dois
 * lugares: o dono trocando de tela e o cliente trocando de categoria esperam a
 * mesma coisa, e duas folhas divergem no primeiro ajuste.
 *
 * As cores saem das variáveis de cada casa (`--color-*` no painel, `--loja-*`
 * na loja) com fallback neutro: nenhum hex novo entra no repositório, e a loja
 * do cliente continua com a paleta dele mesmo enquanto carrega.
 */

.esq {
  --esq-base: var(--color-surface, var(--loja-fundo, #16161d));
  --esq-brilho: var(--color-border, var(--loja-borda, #2a2a35));
  display: block;
  animation: esq-entra 220ms ease-out;
}

/* A entrada é suave DE PROPÓSITO: o esqueleto aparecendo de estalo depois de
 * 180ms é um segundo susto no meio da espera. */
@keyframes esq-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* O brilho que atravessa cada bloco é o que diz "está vindo" em vez de
 * "quebrou". Sem ele, blocos cinza parados leem como erro de renderização. */
.esq__card,
.esq__linha,
.esq__texto,
.esq__foto {
  background: linear-gradient(90deg,
              var(--esq-base) 25%,
              var(--esq-brilho) 37%,
              var(--esq-base) 63%);
  background-size: 400% 100%;
  animation: esq-brilho 1.4s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes esq-brilho {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* Quem prefere menos movimento não recebe movimento nenhum — o esqueleto
 * continua legível parado. */
@media (prefers-reduced-motion: reduce) {
  .esq__card, .esq__linha, .esq__texto, .esq__foto { animation: none; }
  .esq { animation: none; }
}

/* ── Os quatro formatos ───────────────────────────────────────────────────
   Cada um imita a FORMA da tela que está vindo (ver navegacao.js): cartões de
   número no Hoje, grade na loja, linhas nas listas, foto grande na ficha. Um
   esqueleto genérico faria a tela saltar duas vezes — uma pro cinza, outra pro
   conteúdo de verdade. */

.esq__linha-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.esq__card { height: 96px; }

.esq__lista { display: flex; flex-direction: column; gap: 12px; }
.esq__linha { height: 64px; }

/* OS DOIS EIXOS SÃO DIFERENTES, como na grade de verdade: depois que a vitrine
 * passou a separar FILEIRAS por 48px (--e7) e colunas por 16, um esqueleto com
 * 16px nos dois eixos entregava nove blocos mais curtos que o conteúdo que ia
 * chegar — e a página inteira descia de uma vez na troca, que é justamente o
 * salto que este arquivo existe pra evitar. Lido de variável com fallback: no
 * painel `--e4`/`--e7` não existem e o esqueleto continua com os 16px de
 * sempre; na loja ele acompanha o ritmo da grade do dono. */
.esq__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  column-gap: var(--e4, 16px);
  row-gap: var(--e7, 16px);
}
.esq__produto { display: flex; flex-direction: column; gap: 8px; }
/* O RAIO É O DA PLACA DA LOJA, e é por isso que ele é lido de variável com
   fallback: no painel `--loja-raio` não existe e o bloco continua com os 8px de
   sempre; na loja ele acompanha o raio que o DONO escolheu (2, 12 ou 22px). Sem
   isto o esqueleto desenhava um quadrado de canto quase reto e o conteúdo
   chegava com o canto redondo do card — a troca saltava justamente no elemento
   de maior área da tela, que é o que mais se nota. A proporção 1/1 já era a
   mesma da placa e continua sendo: é ela que impede o pulo de altura. */
.esq__foto { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--loja-raio, 8px); }
.esq__texto { height: 12px; width: 100%; }
.esq__texto--curto { width: 55%; }

.esq__ficha { display: flex; gap: 24px; flex-wrap: wrap; }
.esq__foto--grande { flex: 1 1 260px; max-width: 420px; aspect-ratio: 1 / 1; }
.esq__coluna { flex: 1 1 260px; display: flex; flex-direction: column; gap: 14px; }
.esq__coluna .esq__texto:first-child { height: 26px; width: 80%; }