/* ==========================================================
   VYÜ · loja (vitrine na home, página padrão de produto, conta)
   Complementa style.css e produto.css.
   ========================================================== */

/* ---------- Vitrine ---------- */
.store { scroll-margin-top: 80px; }
.store__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); border: 1px solid var(--line);
  transition: border-color .4s, transform .6s var(--ease);
}
.card:hover { border-color: rgba(255, 106, 31, .45); transform: translateY(-4px); }
.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 1.2s var(--ease), filter .8s; filter: saturate(.92) brightness(.9); }
.card:hover .card__media img { transform: scale(1.09); filter: saturate(1.08) brightness(1); }
.card__media--empty { display: grid; place-items: center; font: 800 64px/1 var(--font-display); color: rgba(255,255,255,.06); }
.card__tag { position: absolute; top: 14px; left: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(10, 9, 8, .7); backdrop-filter: blur(6px); font: 600 10px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--orange-soft); }
.card__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; flex: 1; }
.card__body h3 { font: 700 20px/1.2 var(--font-display); }
.card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.card__body p { color: var(--muted); font-size: 14px; }
.card__price { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card__price small { font: 500 11px/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.card__price strong { font: 800 20px/1 var(--font-display); color: var(--orange-soft); }
.store__empty { padding: 40px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }

/* ---------- Página padrão: fotos e descrição ---------- */
.p-hero__media .spot img { aspect-ratio: 4 / 5; object-fit: cover; }
.p-hero__media .spot--empty { display: grid; place-items: center; aspect-ratio: 4 / 5; font: 800 96px/1 var(--font-display); color: rgba(255,255,255,.06); }
.story__more { max-width: 720px; margin: 40px 0 0 auto; display: grid; gap: 18px; color: var(--muted); font-size: 17px; }
.photos .gallery { grid-template-rows: none; grid-auto-rows: minmax(240px, 320px); }
.photos .shot figcaption { transform: none; }

/* ---------- Palco com o modelo 3D (produto-3d.js) ---------- */
.stage.has-3d { padding: 0; min-height: 520px; }
.stage.has-3d .stage__ruler, .stage.has-3d .stage__figures { display: none; }
.stage__3d { position: absolute; inset: 0; }
.stage__canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity .8s var(--ease); }
.stage__canvas:active { cursor: grabbing; }
.stage__3d.is-ready .stage__canvas { opacity: 1; }
.stage__hud3d {
  position: absolute; left: 22px; right: 22px; bottom: 18px; display: flex; align-items: flex-end; gap: 22px;
  pointer-events: none; font: 500 11px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase;
}
.stage__hud3d small { display: block; margin-bottom: 6px; color: var(--muted); }
.stage__hud3d strong { color: var(--orange-soft); font-variant-numeric: tabular-nums; }
.stage__hud3d p { margin-left: auto; color: var(--muted); letter-spacing: .12em; }
.stage.is-printing .stage__hud3d p::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: blink 1s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .25; } }

/* ---------- Relacionados ---------- */
.related .section__head--row { align-items: flex-end; }

@media (max-width: 560px) {
  .store__grid { grid-template-columns: 1fr; }
  .stage.has-3d { min-height: 420px; }
  .stage__hud3d { gap: 14px; }
}