@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;800&display=swap');
/* ===== Comparativo "nosso x original" =====
   Usado no catálogo (modal) e na prévia do admin. Só usa as variáveis do tema da loja. */
.vs{--vs-gap:12px;width:100%;font-family:'Poppins',sans-serif;color:var(--ink,#2f2f2f)}
.vs-frames{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--vs-gap)}
.vs-frame{aspect-ratio:4/5;border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.vs-frame img{width:100%;height:100%;object-fit:contain;padding:9%;mix-blend-mode:multiply;display:block}

/* Nosso: protagonista (fundo tingido + anel na cor principal) */
.vs-mine{background:radial-gradient(120% 90% at 50% 12%,var(--surface,#fff) 0%,var(--green-50,#eef7ee) 100%);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--green,#0a6a0a) 35%,transparent),0 10px 26px -12px color-mix(in srgb,var(--green,#0a6a0a) 55%,transparent)}
/* Original: neutro e mais discreto */
.vs-orig{background:var(--pill,#f4f4f4);box-shadow:0 0 0 1px var(--line,#e8e8e8)}
.vs-orig img{filter:saturate(.85)}

.vs-ph{display:flex;align-items:center;justify-content:center;width:46%;color:var(--green,#0a6a0a);opacity:.55}
.vs-orig .vs-ph{color:var(--pill-ink,#666)}
.vs-ph svg{width:100%;height:auto}

/* Selo no encontro das duas fotos */
.vs-seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:var(--surface,#fff);border:2px solid var(--green,#0a6a0a);color:var(--green,#0a6a0a);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:2}
.vs-seal svg{width:26px;height:26px}

.vs-caps{display:grid;grid-template-columns:1fr 1fr;gap:var(--vs-gap);margin-top:12px;text-align:center}
.vs-caps>div{min-width:0}
.vs-tag{display:block;font-size:11px;font-weight:500;color:var(--muted,#8b8b8b);margin-bottom:2px}
.vs-caps b{display:block;font-size:13px;font-weight:800;letter-spacing:-.3px;line-height:1.2;text-transform:uppercase;overflow-wrap:anywhere}
.vs-caps .o b{font-weight:700;color:var(--insp,#555)}

/* Entrada: o original "desliza" de trás do nosso até o lugar — uma única animação ao abrir */
@keyframes vs-in{from{opacity:0;transform:translateX(-22%) scale(.94)}to{opacity:1;transform:none}}
@keyframes vs-seal-in{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%)}}
.vs.anim .vs-orig{animation:vs-in .55s cubic-bezier(.2,.8,.2,1) both}
.vs.anim .vs-seal{animation:vs-seal-in .4s .35s cubic-bezier(.3,1.5,.5,1) both}
@media(prefers-reduced-motion:reduce){.vs.anim .vs-orig,.vs.anim .vs-seal{animation:none}}

@media(max-width:380px){.vs-seal{width:40px;height:40px}.vs-seal svg{width:22px;height:22px}.vs-caps b{font-size:12px}}