/* =====================================================================
   CARD DE PRODUTO — o mesmo na /loja/ e na faixa da home.
   Externo pelo mesmo motivo do marketplace.js: duas copias divergiriam.
   Usa as variaveis de cor/fonte que cada pagina ja define no :root.
   ===================================================================== */

/* FAIXA DE CARDS
   No celular rola na horizontal, como a vitrine do marketplace; no desktop
   vira grade de ate 5. A rolagem e da FAIXA, nunca da pagina: por isso o
   overflow fica aqui e nao no body. */
.trilha {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* A sombra do foco e do hover do card nao pode ser cortada pelo overflow. */
  padding: 4px 4px 12px;
  margin: 0 -4px;
  scrollbar-width: thin;
}
.trilha > * {
  flex: 0 0 min(46%, 190px);   /* ~2 cards e meio na tela do celular */
  scroll-snap-align: start;
}
@media (min-width: 720px) {
  .trilha {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    overflow: visible;
    padding: 0; margin: 0;
  }
  .trilha > * { flex: initial; }
}
/* Entre 720 e 980 cinco colunas apertam demais o nome; volta para quatro. */
@media (min-width: 720px) and (max-width: 980px) {
  .trilha { grid-template-columns: repeat(4, 1fr); }
}

/* CARD */
.pcard {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  /* o card inteiro e o alvo de toque, muito acima dos 44px */
  min-height: 44px;
  transition: transform .2s;
}
a.pcard:hover { transform: translateY(-2px); }
a.pcard:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; border-radius: 16px; }

/* Quadro da foto: fundo claro e contain, nunca cover — as fotos de produto
   tem proporcoes diferentes entre si e cover cortaria a peca. */
.pc-frame {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: var(--tint-graphite, #F1F1F1);
  border: 1px solid var(--hair, #E6E6E6);
  border-radius: 16px; overflow: hidden;
}
/* Absoluta de proposito: no fluxo a <img> usa a altura intrinseca e estica o
   quadro, e o aspect-ratio deixa de valer. */
.pc-frame img {
  position: absolute; inset: 8px;
  width: calc(100% - 16px); height: calc(100% - 16px);
  object-fit: contain;
}
.pc-frame--vazio { background: var(--tint-orange, #FFF2E9); }
.pc-frame--vazio img { inset: 0; margin: auto; width: 42%; height: 42%; opacity: .28; }

/* Nome em no maximo 2 linhas, com altura reservada para as duas: sem isso a
   base dos cards da mesma linha fica serrilhada. */
.pc-nome {
  font-size: 14px; font-weight: 600; line-height: 1.3;
  margin-top: 10px; color: var(--ink, #0F0F0F);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
  min-height: calc(14px * 1.3 * 2);
}

/* PRECO
   Cada pedaco em sua linha, com o espaco vindo do gap — no webview os spans
   sao concatenados e sai "DeR$ 38,00por". */
.pc-preco { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.pc-de {
  font-size: 12.5px; color: var(--dim, #6B6B6B);
  text-decoration: line-through;
}
.pc-apartir { font-size: 11.5px; color: var(--dim, #6B6B6B); }
/* Laranja escurecido, nao o #FF6200: em texto pequeno sobre branco o laranja
   puro nao passa em contraste. */
.pc-final { font-size: 16px; font-weight: 700; color: var(--accent-ink, #B84400); }

/* ESQUELETO — mesma proporcao do card, para nada se deslocar quando a lista
   chega. So opacidade; prefers-reduced-motion desliga abaixo. */
.pc-skel-frame {
  width: 100%; aspect-ratio: 1 / 1;
  background: var(--tint-graphite, #F1F1F1);
  border: 1px solid var(--hair, #E6E6E6); border-radius: 16px;
  animation: pc-pulso 1.4s ease-in-out infinite;
}
.pc-skel-linha {
  height: 18px; margin-top: 10px; width: 80%;
  background: var(--tint-graphite, #F1F1F1); border-radius: 4px;
  animation: pc-pulso 1.4s ease-in-out infinite;
}
.pc-skel-linha--curta { width: 45%; height: 15px; margin-top: 6px; }
@keyframes pc-pulso { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* TOPO DE SECAO — titulo a esquerda, "Ver mais" a direita */
.cat-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.cat-topo h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3vw, 38px); line-height: .98; letter-spacing: .015em;
}
/* O "Ver mais"/"Ver loja" e um alvo de toque como qualquer outro: sem isto
   a caixa do link fica na altura do texto (medido: 25px). */
.cat-topo a { min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .pcard { transition: none; }
  .pc-skel-frame, .pc-skel-linha { animation: none; }
}