/* ==========================================================================
   STHEFANY — loja
   loja.css · v0.1.1
   --------------------------------------------------------------------------
   Vitrine, não carrinho. Cada peça leva à conversa por WhatsApp, no mesmo
   arranjo que já usamos na Zenth: o site mostra e qualifica, a venda fecha no
   canal onde o cliente já está.

   O card é o mesmo do artista virado para produto — foto, nome, e uma linha
   de apoio. Diferença: aqui a foto é clara e vive sobre o papel, então não
   leva véu nem texto por cima.
   ========================================================================== */

.sp-loja {
  padding-block: var(--sp-secao-meia);
}

.sp-loja__topo {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: start;
  gap: var(--sp-e-6) var(--sp-e-8);
  margin-block-end: var(--sp-e-7);
}

.sp-loja__titulo {
  max-width: 14ch;
}

.sp-loja__apoio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-e-5);
}

.sp-loja__texto {
  max-width: 44ch;
  color: var(--sp-tinta-2);
}

/* `auto-fit`, não `auto-fill`: com quatro peças e espaço para cinco colunas,
   o `auto-fill` mantém a faixa vazia e deixa um buraco à direita. O `auto-fit`
   recolhe a faixa vazia e as peças ocupam a largura. */
.sp-loja__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-e-5);
}

/* --- peça ------------------------------------------------------------------ */

.sp-peca { display: block; }

.sp-peca__foto {
  border-radius: var(--sp-raio-bloco);
  background: #F2EFEF;
  transition: transform var(--sp-transicao);
}
.sp-peca:hover .sp-peca__foto { transform: translateY(-4px); }

.sp-peca__nome {
  margin-block-start: var(--sp-e-4);
  font-family: var(--sp-fonte-titulo);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
}

.sp-peca__preco {
  margin-block-start: var(--sp-e-1);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  font-variant-numeric: tabular-nums;
}

/* Placeholder claro: as peças ficam sobre o papel branco, então o bloco
   simulado do resto do protótipo (que é escuro) não serve aqui. */
.sp-peca .sp-foto--simulada::before {
  background:
    radial-gradient(70% 60% at 30% 22%, rgba(224, 27, 23, .16), transparent 62%),
    linear-gradient(160deg, #F6F3F3 0%, #E7E1E1 100%);
}
.sp-peca .sp-foto--simulada::after { opacity: .25; }

.sp-peca .sp-foto__rotulo {
  border-color: rgba(22, 9, 10, .22);
  color: var(--sp-tinta-3);
}

@media (max-width: 64rem) {
  .sp-loja__topo { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 48rem) {
  .sp-loja__grade {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--sp-e-4);
  }
  .sp-peca__nome { font-size: 1rem; }
}

/* --- variante carrossel ----------------------------------------------------- */

.sp-loja[data-exibicao="grade"] .sp-loja__carrossel { display: none; }
.sp-loja[data-exibicao="carrossel"] .sp-loja__grade { display: none; }

.sp-loja .sp-carrossel__trilho { --sp-visiveis: 5.3; }
.sp-loja .sp-carrossel__topo {
  justify-content: flex-end;
  margin-block-end: var(--sp-e-4);
}
.sp-loja .sp-carrossel__trilho .sp-peca { scroll-snap-align: start; }

@media (max-width: 48rem) {
  .sp-loja .sp-carrossel__trilho { --sp-visiveis: 2.3; }
}