/* ─────────────────────────────────────────────────────────────────────────────
   MODELO "HERO DE OFERTA" — padrão das presells do Prime Gear Finds (12/08/2026)
   Tudo que decide a compra fica acima da dobra: foto, título, 3 provas, preço e botão.
   Motivo: a presell de review recebia visita e não gerava clique (~54 visitas → 1 clique
   em 11–12/08). Antes, imagem e preço só apareciam depois de rolar.

   ⚠ Este arquivo é COMPARTILHADO pelas presells que usam o modelo. Ao alterar,
   publicar como oferta-v2.css e trocar o link nas páginas — sobrescrever deixa o
   cache servindo a versão antiga por horas.
   ⚠ Prefixo pg- de propósito: não colide com o /css/style.css, que é de TODAS as presells.
   ───────────────────────────────────────────────────────────────────────────── */

.pg-hero{background:#f6f7f5;border-bottom:1px solid #e4e6e1;margin:0 -16px 24px;padding:12px 16px 20px}
.pg-wrap{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:10px}

.pg-badge{display:inline-flex;align-items:center;gap:6px;background:#1f2a24;color:#fff;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:5px}
.pg-h1{font-size:29px;line-height:1.12;margin:9px 0 8px;letter-spacing:-.5px}
.pg-sub{font-size:15px;line-height:1.45;color:#41474f;margin:0 0 12px}

.pg-facts{list-style:none;padding:0;margin:0 0 13px}
.pg-facts li{position:relative;padding-left:27px;margin-bottom:7px;font-size:14.5px;line-height:1.35;color:#22272d}
.pg-facts li::before{content:"";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  background:#2e7d4f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}

.pg-media{order:-1;text-align:center;margin:0 auto -4px}
.pg-media img{width:100%;max-width:196px;height:auto;border-radius:12px}

.pg-price{display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1px solid #d9dcd6;background:#fff;
  border-radius:10px;padding:10px 12px;margin-bottom:11px}
.pg-flag{background:#fff6e0;border:1px solid #f0d68c;color:#8a6100;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:20px;white-space:nowrap}
.pg-pack{background:#1f6feb;color:#fff;font-size:13px;font-weight:700;padding:3px 9px;border-radius:5px}
.pg-de{font-size:13.5px;color:#8a9099;text-decoration:line-through}
.pg-amount{font-size:25px;font-weight:800;letter-spacing:-.5px}
.pg-each{font-size:13px;color:#5b6169}
.pg-save{background:#eaf6ee;color:#1d6b41;font-size:12px;font-weight:700;padding:4px 9px;border-radius:5px;white-space:nowrap}

.pg-buy{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box;
  background:#1f6b3f;color:#fff;font-size:17px;font-weight:700;text-align:center;text-decoration:none;
  padding:15px 16px;border-radius:44px;box-shadow:0 3px 0 #164d2d}
.pg-buy:hover{background:#1a5c36}

.pg-guarantee{display:flex;align-items:center;gap:11px;margin-top:13px}
.pg-seal{flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:#f3ede0;border:2px solid #c9a227;
  color:#8a6100;font-size:9.5px;font-weight:800;line-height:1.05;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:3px;box-sizing:border-box}
.pg-guarantee div{font-size:12.5px;line-height:1.35;color:#4a5058}
.pg-guarantee strong{display:block;color:#22272d;font-size:13px}

.pg-social{display:flex;flex-wrap:wrap;gap:7px 16px;align-items:center;margin-top:16px;font-size:12.5px;color:#5b6169}
.pg-social .pg-stars{color:#f5a623;letter-spacing:1px}

/* a barra fixa só entra quando o botão do hero sai da tela — senão os dois competem e
   a barra ainda cobre metade do botão principal (defeito visto no 1º teste, 12/08).
   !important porque algumas presells pintam .btn com !important no seu CSS local. */
.sticky-cta{transition:opacity .18s ease, transform .18s ease}
body.pg-hero-visivel .sticky-cta{opacity:0;pointer-events:none;transform:translateY(100%)}
.sticky-cta .btn{background:#1f6b3f !important}

@media(min-width:900px){
  .pg-wrap{grid-template-columns:1.05fr .95fr;align-items:center;gap:34px}
  .pg-media{order:0}
  .pg-media img{max-width:400px}
  .pg-h1{font-size:40px;margin-top:14px}
  .pg-buy{width:auto;min-width:390px}
}