/* Reset-ish */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; color:#111; background:#fff; }
img { max-width:100%; display:block; }

:root{
  --brand:#ff2e55;       /* botão comprar agora */
  --accent:#ff385c;
  --green:#16a34a;       /* frete grátis */
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg-soft:#f9fafb;
  --card:#ffffff;
  --shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* Top bar */
.topbar{
  position: sticky; top:0; z-index:30;
  height:48px; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 8px;
}
.topbar .left,.topbar .right{ display:flex; align-items:center; gap:6px; }
.topbar .icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:none; background:#fff; border-radius:10px; }
.topbar .icon-btn:hover{ background:var(--bg-soft); cursor:pointer; }
.topbar .badge{ position:absolute; top:0; right:0; transform:translate(35%,-35%); background:#ef4444; color:#fff; border-radius:999px; font-size:11px; line-height:1; padding:3px 6px; }
.topbar .time{ font-weight:600; font-variant-numeric: tabular-nums; }

/* Gallery */
.gallery .media{ position:relative; }
.product-img{ width:100%; aspect-ratio: 9/16; object-fit: cover; background:#000; }
.badge-round{
  position:absolute; left:12px; top:16px;
  width:110px; height:110px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background: radial-gradient(80% 80% at 50% 50%, #25e28a, #0a7a3a);
  color:#fff; font-weight:800; font-size:15px; line-height:1.1;
  box-shadow: var(--shadow);
}
.pager{
  position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.6); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px;
}

/* Pricing */
.pricing{ padding:14px 16px 8px; }
.price{ display:flex; align-items:flex-end; gap:4px; font-weight:800; color:#ef4444; }
.price .currency{ font-size:22px; }
.price .value{ font-size:36px; letter-spacing:-.5px; }
.installments{ margin-top:2px; color:#111; font-weight:600; }
.installments .muted{ color:var(--accent); font-weight:700; margin-left:4px; }

/* Title */
.title{ padding:4px 16px 12px; }
.title h1{ margin:0; font-size:18px; line-height:1.35; }

/* Shipping */
.shipping{ background:#fff; padding:10px 12px; border-top:8px solid var(--bg-soft); border-bottom:8px solid var(--bg-soft); }
.shipping .row{ display:flex; align-items:center; gap:12px; }
.shipping .icon{ color:#111; }
.shipping .text{ display:flex; flex-direction:column; gap:2px; flex:1; font-size:14px; }
.shipping .free{ color:#fff; background:#22c55e; padding:3px 8px; border-radius:999px; font-weight:700; width:fit-content; }
.shipping .eta{ color:#111; }
.shipping .ship-fee{ color:var(--muted); font-size:13px; }
.shipping .chev{ color:#9ca3af; }

/* Affiliate */
.affiliate{ position:relative; background:#fff; border-top:1px solid var(--line); }
.affiliate .grip{ height:22px; background:var(--bg-soft); position:relative; }
.affiliate .grip::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:42px; height:5px; border-radius:999px; background:#d1d5db;
}
.affiliate .aff-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; }
.affiliate .earn{ font-size:16px; }
.muted{ color:var(--muted); font-size:13px; }
.aff-cta{ border:none; background:#111; color:#fff; font-weight:700; padding:10px 12px; border-radius:10px; }
.aff-cta:hover{ opacity:.95; cursor:pointer; }

/* Sticky bar */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(255,255,255,.98);
  border-top:1px solid var(--line); padding:10px; display:flex; gap:10px; align-items:center; justify-content:space-between;
}
.mini-actions{ display:flex; gap:14px; }
.mini{ display:flex; flex-direction:column; align-items:center; text-decoration:none; color:#111; font-size:12px; }
.cta-actions{ display:flex; gap:10px; flex:1; justify-content:flex-end; }
.btn{ height:44px; border-radius:12px; padding:0 14px; font-weight:800; border:2px solid transparent; }
.btn.outline{ background:#fff; border-color:#111; }
.btn.solid{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn:hover{ filter:brightness(.98); cursor:pointer; }

/* Wider screens */
@media (min-width: 720px){
  #content{ max-width:480px; margin:0 auto; border-left:1px solid var(--line); border-right:1px solid var(--line); }
  .topbar{ justify-content:center; }
  .topbar .left, .topbar .right{ position:absolute; }
  .topbar .left{ left:8px; }
  .topbar .right{ right:8px; }
}