/* GRADE DE PRODUTOS — o card e a grade, compartilhados pelo Catalogo e pela
   Piramide v2 (04/10/2026). Movido LITERALMENTE do <style> do fotos.html; o
   selo do card leva escopo (.pcard .selo) porque a Piramide usa .selo para
   outra coisa. O .selo global do Catalogo continua no fotos.html. */
  /* a grade */
  .grade{display:grid;gap:14px;padding:18px 24px 8px;
         grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
  .pcard{background:var(--branco);border:1px solid var(--linha);display:flex;
         flex-direction:column;position:relative}
  .pcard.sobre{border-color:var(--acento);box-shadow:0 0 0 2px var(--acento) inset}
  .pcard .quadro{position:relative;width:100%;aspect-ratio:1;background:var(--fundo2);
                 border-bottom:1px solid var(--linha);overflow:hidden;cursor:pointer}
  .pcard .quadro img{width:100%;height:100%;object-fit:contain;display:block}
  .pcard .quadro img.sem{opacity:.5}
  .pcard .quadro .chamada{position:absolute;inset:auto 0 0 0;background:rgba(10,10,10,.72);
        color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:6px 8px;
        text-align:center;opacity:0;transition:opacity .12s}
  .pcard .quadro:hover .chamada{opacity:1}
  .pcard .corpo{padding:9px 10px 11px;display:flex;flex-direction:column;gap:3px;flex:1}
  .pcard .nome{font-size:11.5px;font-weight:700;line-height:1.25;
               display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
               overflow:hidden;min-height:29px}
  .pcard .meta{font-size:10px;color:var(--claro);letter-spacing:.02em;
               white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pcard .din{display:flex;justify-content:space-between;align-items:baseline;
              margin-top:5px;padding-top:6px;border-top:1px solid var(--linha)}
  /* Venda e custo lado a lado: o card passa a mostrar quanto a peça vale
     e quanto ela custou, que é a conta que o comprador faz de cabeça.
     Peças fica na linha de baixo, em negrito — junto com o valor, são os
     dois números que decidem o que fotografar primeiro. */
  .pcard .din > div{display:flex;flex-direction:column;gap:1px}
  .pcard .din b{font-size:13.5px;font-weight:900;letter-spacing:-.03em;
                font-variant-numeric:tabular-nums;display:block}
  .pcard .din .cst{text-align:right}
  .pcard .din .cst b{font-size:12px;font-weight:700;color:var(--medio)}
  .pcard .din em{font-style:normal;font-size:8.5px;font-weight:700;
                 letter-spacing:.1em;text-transform:uppercase;color:var(--claro)}
  /* UMA LINHA, SEMPRE — a altura do card nao pode depender do texto.

     O pedido do Neto era a altura, nao o texto: tirar o "N tam" foi o
     meio, e a altura constante e o fim. Tirar o campo encurta o texto
     mas nao GARANTE nada — numa janela estreita, ou com um produto de
     numeros maiores, ele voltaria a quebrar e a diagramacao mudaria de
     novo sem ninguem ter mexido.

     Com nowrap a altura fica fixa por construcao. O pior caso real hoje
     e "3.246 peças · R$ 259 mil em estoque" (3.246 pecas e R$ 259 mil
     sao os maximos do banco, medidos), e ele cabe na largura usual. Se
     um dia nao couber, quem cede e o texto, com reticencias — nunca a
     altura do card.

     Mesma escolha da seta da galeria: o que e estrutura nao cede; o que
     e conteudo cede. */
  .pcard .pcs{font-size:10.5px;color:var(--claro);margin-top:5px;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pcard .pcs b{font-size:11.5px;font-weight:800;color:var(--tinta);
                font-variant-numeric:tabular-nums}

  .pcard .selo{position:absolute;top:7px;left:7px;font-size:9px;font-weight:800;
        letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;color:#fff}
  .pcard .selo.novo{background:var(--info)}
  .pcard .selo.velho{background:var(--grave-texto)}

  /* a marcacao do lote (so na Piramide: GRADE.card com selecionavel) */
  .pcard .marca-lote{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;
        padding:6px 10px 0;color:var(--medio);cursor:pointer}
  .pcard:has(.marca-lote input:checked){border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta) inset}