/* Safe Studio — cards de produto.
   Regras de uso (não misturar ao acaso):
   1. Hero Product  (.hprod, .cine, Explorer)  -> um produto por vez, apresentação ampla: hero, Explorer, carrossel "Em foco".
   2. Editorial     (.pcard--editorial)         -> 1 a 3 destaques de uma seção, composição assimétrica.
   3. Compact       (.pcard)                    -> listas: novidades, catálogo, campanha, "todos os scripts". Compra direta.
   Linhas indexadas (.prow) ficam para listas longas de texto (mega menu). */

/* ---------- Compact ---------- */
.pcard { --sx: 50%; --sy: 50%; color: var(--bone); position: relative; display: flex; flex-direction: column; border-radius: var(--r-3); background: var(--graphite); box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; transition: box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out), background-color var(--dur-2); }
.pcard::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity var(--dur-2);
  background: radial-gradient(380px circle at var(--sx) var(--sy), rgba(241,236,229,.07), transparent 60%); }
.pcard:hover::before { opacity: 1; }
.pcard:hover { box-shadow: inset 0 0 0 1px var(--line-2); background: #1C1E22; }
.pcard__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.pcard__link:focus-visible { outline-offset: -2px; }

/* Mídia com margem interna: a imagem "assenta" no card */
.pcard__media { position: relative; margin: 8px 8px 0; aspect-ratio: 16 / 10; border-radius: calc(var(--r-3) - 6px); overflow: hidden; background: var(--graphite-2); }
.pcard__media img, .pcard__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-3) var(--ease-out), transform 1.2s var(--ease-out); }
.pcard__media .pcard__alt { opacity: 0; }
.pcard:hover .pcard__media .pcard__alt { opacity: 1; }
.pcard:hover .pcard__media img { transform: scale(1.035); }
.pcard__media video { opacity: 0; }
.pcard.is-playing .pcard__media video { opacity: 1; }
.pcard__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); border-radius: inherit; pointer-events: none; }
.pcard__badges { position: absolute; z-index: 2; top: 10px; left: 10px; display: flex; gap: 6px; }

.pcard__body { position: relative; z-index: 1; display: grid; gap: 10px; padding: 18px 18px 18px; flex: 1; align-content: start; }
.pcard__cat { font-size: var(--fs-12); color: var(--ash); }
.pcard__name { font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; font-weight: 700; font-variation-settings: "wdth" 92; }
.pcard__summary { color: var(--ash); font-size: var(--fs-14); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.pcard__price { font-size: var(--fs-25); }
.pcard__off { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: var(--r-1); background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pcard__actions { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 0 18px 18px; }
.pcard__actions .btn { min-height: 44px; border-radius: var(--r-2); }
.pcard__go { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color var(--dur-2), color var(--dur-2); }
.pcard__go svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.pcard:hover .pcard__go svg { transform: translateX(3px); }
.pcard__go:hover { background: var(--graphite-3); }
.btn.is-in-cart { --btn-bg: transparent; --btn-fg: var(--bone); --btn-bd: var(--line-2); }

/* Selo de lançamento em "aba" acima do card */
.pcard--new { box-shadow: inset 0 0 0 1px var(--accent-line); }
.pcard__tab { position: absolute; z-index: 2; left: 12px; top: -26px; height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 8px 8px 0 0; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pcard__tab svg { width: 12px; height: 12px; }

/* ---------- Editorial ---------- */
.pcard--editorial { display: grid; grid-template-columns: 1fr; padding: 10px; gap: 0; }
.pcard--editorial .pcard__media { margin: 0; aspect-ratio: 16 / 10; }
.pcard--editorial .pcard__body { padding: 22px 14px 14px; gap: 14px; }
.pcard--editorial .pcard__name { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem); letter-spacing: -.02em; line-height: 1; }
.pcard--editorial .pcard__summary { -webkit-line-clamp: 3; font-size: var(--fs-16); }
.pcard--editorial .pcard__actions { padding: 0 14px 14px; grid-template-columns: auto auto 1fr; }
@media (min-width: 900px) {
  .pcard--editorial { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  .pcard--editorial .pcard__media { aspect-ratio: auto; min-height: 380px; }
  .pcard--editorial .pcard__body { padding: 28px 28px 8px; align-content: center; }
  .pcard--editorial .pcard__actions { grid-column: 2; padding: 0 28px 28px; }
  .pcard--editorial.is-flip .pcard__media { order: 2; }
  .pcard--editorial.is-flip .pcard__body, .pcard--editorial.is-flip .pcard__actions { grid-column: 1; }
  .pcard--editorial.is-flip .pcard__actions { grid-row: 2; }
}
.pcard__mech { display: grid; gap: 8px; font-size: var(--fs-14); color: #CFD3D6; }
.pcard__mech li { display: flex; gap: 10px; }
.pcard__mech li::before { content: ""; flex: none; width: 12px; height: 1px; margin-top: .75em; background: var(--silver); }

/* ---------- Linha indexada ---------- */
.prow { --sx: 50%; position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line); isolation: isolate; }
.prow::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--dur-2); background: radial-gradient(400px circle at var(--sx) 50%, rgba(241,236,229,.05), transparent 70%); }
.prow:hover::before { opacity: 1; }
.prow__name { font-family: var(--font-title); font-size: var(--fs-25); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; transition: transform var(--dur-2) var(--ease-out); }
.prow:hover .prow__name { transform: translateX(6px); }
.prow__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--ash); font-size: var(--fs-14); }
.prow__price { font-size: var(--fs-20); text-align: right; }

/* Grades */
.pgrid { display: grid; gap: 40px var(--gutter); padding-top: 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); align-items: start; }
.pgrid > .pcard { animation: ss-card-in var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes ss-card-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .pgrid > .pcard { animation: none; } }
.editorial-stack { display: grid; gap: var(--gutter); }