/* ============================================================
   QUEIMA DE ESTOQUE — NOVO DESIGN SYSTEM
   Estética: editorial premium (grafite + esmeralda + off-white)
   Substitui completamente o visual estilo marketplace (rosa/
   laranja/amarelo/roxo) por um layout de loja própria.
   ============================================================ */

:root {
  --ink: #17181c;
  --ink-2: #3f4753;
  --muted: #767d89;
  --line: #e6e4df;
  --bg: #f5f4f1;
  --surface: #ffffff;
  --accent: #0e7c66;
  --accent-soft: #edf4f1;
  --radius: 10px;
}

/* ---------- Base ---------- */
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  background-color: var(--bg) !important;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
}

/* Títulos de seção com cara editorial (serifada) */
#reviews h2,
#about h2,
#recommended h2,
#sellerShop .font-bold,
.rec-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-style: italic;
}

/* ---------- Header ---------- */
header.sticky {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* ---------- Faixa de preço (era o gradiente rosa/laranja) ---------- */
#flashPrice .bg-gradient-to-r {
  background-image: none !important;
  background-color: var(--ink) !important;
  border-radius: 0;
}

#flashPrice span[class*="text-[22px]"],
#flashPrice .text-\[22px\] {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
}

/* badge de desconto dentro da faixa */
#flashPrice .bg-white\/90 {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
}

/* "Oferta Relâmpago" + countdown mais discretos */
#flashPrice svg {
  display: none !important;
}

/* ---------- Selo 11.11 — removido (identidade de marketplace) ---------- */
.bg-\[\#ff4d4f\],
.bg-\[\#6d28d9\] {
  display: none !important;
}

/* ---------- Faixa de cupom (era violeta) ---------- */
.bg-violet-50 {
  background-color: var(--accent-soft) !important;
  border: 1px solid #d8e7e1;
}

.text-violet-700 {
  color: var(--accent) !important;
}

/* ---------- Estrelas e avaliações (era âmbar/amarelo) ---------- */
.text-amber-500,
.text-amber-400 {
  color: var(--ink) !important;
}

.text-sky-600 {
  color: var(--muted) !important;
}

/* ---------- Proteção do cliente (era bege/amarelo) ---------- */
.bg-\[\#fdf4e9\] {
  background-color: var(--surface) !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.text-\[\#8b5e34\] {
  color: var(--ink) !important;
}

.text-\[\#6b4b2a\] {
  color: var(--ink-2) !important;
}

.text-\[\#a3773f\] {
  color: var(--accent) !important;
}

/* ---------- Variantes (chips de cor) ---------- */
.variant-btn {
  border-radius: 8px !important;
}

/* ---------- Chips de avaliação ---------- */
#reviews .bg-slate-100 {
  background-color: var(--bg) !important;
  border: 1px solid var(--line);
}

/* ---------- Barra inferior de ação ---------- */
#actionBar {
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 -6px 24px rgba(23, 24, 28, .08) !important;
}

/* Adicionar ao carrinho — botão com contorno */
#btn-add {
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: var(--radius) !important;
  font-weight: 700 !important;
}

/* Comprar Agora — preto fosco (era rosa/roxo) */
#btn-comprar {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}

#btn-comprar:hover {
  background: var(--accent) !important;
}

/* ---------- Recomendados ---------- */
#recommended {
  background-color: var(--bg) !important;
}

#recGrid > a {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#recGrid .text-violet-700 {
  color: var(--ink) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 18px !important;
}

/* ---------- Divisores ---------- */
.h-2.bg-slate-100 {
  background-color: var(--bg) !important;
  height: 10px !important;
}

/* ---------- Botão "topo" ---------- */
#btnTop {
  border-radius: 10px !important;
}

/* ---------- Pop-up de cupom (home) ---------- */
.cpn-card {
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(23, 24, 28, .35) !important;
}

.cpn-title {
  color: var(--ink) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic;
}

.cpn-badge {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

.cpn-sub b {
  color: var(--accent) !important;
}

.cpn-btn {
  background: var(--ink) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  letter-spacing: .02em;
}

.cpn-btn:hover {
  background: var(--accent) !important;
}

.cpn-btn.is-claimed {
  background: var(--accent) !important;
}

.cpn-dot {
  background: var(--accent) !important;
}

.cpn-overlay {
  background: rgba(23, 24, 28, .55) !important;
}

/* ---------- Ajustes finos ---------- */
.rounded-2xl {
  border-radius: 12px !important;
}

::selection {
  background: var(--accent);
  color: #fff;
}