/* ===========================================================
   BATSTERA DEMIN — Vitrine premium de jeans
   Estética: heritage workwear / editorial.
   Índigo profundo + bone quente · costura mostarda (topstitch)
   · detalhe selvedge vermelho. Fraunces / Hanken Grotesk / Space Mono.
   =========================================================== */

:root {
  /* tinta & neutros quentes */
  --ink: #14161c;
  --muted: #6f6b60;
  --paper: #f4f0e7;
  --paper-2: #ece5d7;
  --card: #fffdf8;
  --line: #ddd3c1;

  /* denim / índigo */
  --indigo-900: #0f1c33;
  --indigo-800: #16263f;
  --indigo: #20396a;
  --denim: #3f63a0;
  --denim-200: #aebfd9;

  /* acentos */
  --thread: #d39626;     /* costura mostarda */
  --selvedge: #b23a2e;   /* fio vermelho selvedge */
  --ok: #3a7d54;         /* frete grátis */
  --wa: #1faf54;         /* whatsapp */

  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 12px 34px rgba(16, 29, 51, .10);
  --shadow-lg: 0 26px 60px rgba(16, 29, 51, .18);

  --display: 'Fraunces', Georgia, serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body { overflow-x: clip; }

body {
  font-family: var(--body);
  color: var(--ink);
  line-height: 1.55;
  background:
    repeating-linear-gradient(45deg, rgba(32, 58, 102, .022) 0 2px, transparent 2px 5px),
    var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display { font-family: var(--display); font-weight: 600; line-height: 1.05; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--thread);
}

/* ---------- Topbar (marquee) ---------- */
.topbar {
  background: var(--ink); color: var(--paper);
  overflow: hidden; padding: 10px 0;
}
.topbar-track {
  display: flex; width: max-content; flex-wrap: nowrap; animation: slide 42s linear infinite;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.topbar-track span { flex: 0 0 auto; white-space: nowrap; padding: 0 26px; position: relative; }
.topbar-track span::after {
  content: "✦"; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  color: var(--thread); font-size: 8px;
}
.topbar b { color: var(--thread); }
.topbar:hover .topbar-track,
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244, 240, 231, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 15px 24px; max-width: 1240px; margin: 0 auto;
}
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand-logo { height: 58px; width: auto; display: block; }
.footer-logo { height: 72px; }
.brand-name { font-family: var(--display); font-size: 25px; font-weight: 600; letter-spacing: .01em; }
.brand-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .32em; color: var(--thread); margin-top: 5px; text-transform: uppercase; }

.nav { display: flex; gap: 28px; }
.nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 4px 0; position: relative; transition: color .2s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--indigo); transition: width .22s;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { width: 100%; }

.cart-btn { position: relative; padding: 8px; color: var(--ink); display: flex; }
.cart-btn svg { width: 24px; height: 24px; }
.cart-count {
  position: absolute; top: -3px; right: -4px;
  background: var(--selvedge); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ---------- Hero ---------- */
.hero { position: relative; color: var(--paper); overflow: hidden; background: var(--indigo-900); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 28, 51, .78), rgba(15, 28, 51, .92)); }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s ease; }
.hero-slide.ativo { opacity: 1; }
.hero-inner {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto; padding: 92px 24px 84px;
  display: grid; gap: 22px;
}
.hero .eyebrow { color: var(--denim-200); }
.hero h1 {
  font-size: clamp(40px, 8vw, 78px); letter-spacing: -.02em; font-weight: 600;
}
.hero h1 em { font-style: italic; color: var(--thread); }
.hero p { color: rgba(244, 240, 231, .82); max-width: 480px; font-size: 16px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.hero-meta {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--denim-200);
}
.hero-meta span { display: flex; align-items: center; gap: 8px; }
.hero-meta span::before { content: ""; width: 6px; height: 6px; background: var(--thread); border-radius: 50%; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .13); color: #fff; font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .3); cursor: pointer; transition: background .2s, transform .2s; }
.hero-arrow:hover { background: rgba(255, 255, 255, .26); }
.hero-arrow.prev { left: 20px; } .hero-arrow.next { right: 20px; }
.hero-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; }
.hero-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .45); border: none; cursor: pointer; padding: 0; transition: width .2s, background .2s; }
.hero-dot.on { background: #fff; width: 26px; border-radius: 999px; }
.hero-fade { animation: heroFade .5s ease; }
@keyframes heroFade { from { opacity: .25; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .hero-arrow { width: 38px; height: 38px; font-size: 22px; } .hero-arrow.prev { left: 8px; } .hero-arrow.next { right: 8px; } }

/* ---------- Botões ---------- */
.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 26px; border-radius: var(--radius); transition: .2s; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; border: 1.5px solid transparent;
}
.btn-light { background: var(--paper); color: var(--indigo-900); position: relative; }
.btn-light::after {
  content: ""; position: absolute; inset: 5px; border: 1.5px dashed rgba(32, 57, 106, .4);
  border-radius: 4px; pointer-events: none;
}
.btn-light:hover { background: #fff; transform: translateY(-2px); }
.btn-outline { border-color: rgba(174, 191, 217, .55); color: var(--paper); }
.btn-outline:hover { border-color: var(--paper); background: rgba(244, 240, 231, .08); }

/* botão primário (modal "adicionar" + checkout) — usado pelo app.js */
.btn-primary {
  background: var(--indigo); color: var(--paper); width: 100%; padding: 15px;
  border-radius: var(--radius); font-family: var(--mono); font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; transition: .2s; border: 1.5px solid var(--indigo);
}
.btn-primary:hover { background: var(--indigo-900); border-color: var(--indigo-900); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
#btn-finalizar { background: var(--wa); border-color: var(--wa); }
#btn-finalizar:hover { background: #178f43; border-color: #178f43; }

/* ---------- Marquee ---------- */
.marquee {
  background: var(--ink); color: var(--paper); overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--indigo-800); border-bottom: 1px solid var(--indigo-800);
}
.marquee-track {
  display: flex; width: max-content; flex-wrap: nowrap; gap: 0; animation: slide 30s linear infinite;
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 12px 0;
}
.marquee-track span { flex: 0 0 auto; white-space: nowrap; padding: 0 26px; position: relative; }
.marquee-track span::after { content: "✦"; position: absolute; right: -4px; color: var(--thread); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Trust bar ---------- */
.trust {
  max-width: 1240px; margin: 0 auto; padding: 34px 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-item .ic { color: var(--indigo); display: flex; line-height: 1; }
.trust-item .ic svg { width: 27px; height: 27px; }
.trust-item .ic span { font-size: 20px; }
.trust-item h4 { font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.trust-item p { font-size: 12.5px; color: var(--muted); }

/* ---------- Seção catálogo ---------- */
.catalogo { max-width: 1240px; margin: 0 auto; padding: 30px 24px 10px; scroll-margin-top: 80px; }
.sec-head { text-align: center; display: grid; gap: 10px; margin-bottom: 8px; }
.sec-head h2 { font-size: clamp(28px, 5vw, 44px); letter-spacing: -.01em; }
.sec-head p { color: var(--muted); max-width: 460px; margin: 0 auto; font-size: 14px; }

/* ---------- Filtros ---------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 24px 0 14px; }
.filtro {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  background: transparent; border: 1.5px solid var(--line); color: var(--muted);
  padding: 9px 18px; border-radius: 999px; transition: .18s;
}
.filtro.ativo, .filtro:hover { background: var(--indigo); color: var(--paper); border-color: var(--indigo); }

/* ---------- Grid ---------- */
.grid {
  display: grid; gap: 26px; padding: 16px 0 8px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); cursor: pointer;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--denim-200); }
.card-img { position: relative; aspect-ratio: 3/4; background: var(--paper-2); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-img img { transform: scale(1.05); }
.badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
  padding: 5px 10px; border-radius: 4px; color: #fff; text-transform: uppercase;
}
.badge.esg { background: var(--ink); }
.badge.desconto { left: auto; right: 10px; background: var(--selvedge); }
.card.esgotado .card-img img { filter: grayscale(.55); opacity: .82; }
.ultimas { font-family: var(--mono); font-size: 11px; color: var(--selvedge); font-weight: 700; letter-spacing: .02em; }
.off-pct.sm { font-size: 11px; padding: 1px 6px; }

/* favoritos */
.fav { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 253, 248, .88); color: #c9b8a0; font-size: 16px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform .15s, color .15s; box-shadow: 0 2px 8px rgba(16, 29, 51, .12); }
.fav:hover { transform: scale(1.12); }
.fav.on { color: var(--selvedge); }
.loja-fav { padding: 11px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: pointer; letter-spacing: .04em; }
.loja-fav.on { background: var(--selvedge); color: #fff; border-color: var(--selvedge); }
.fav-modal.on { border-color: var(--selvedge); color: var(--selvedge); }

/* barra de frete grátis no carrinho */
.frete-bar { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.frete-bar.ok { background: #e6f2ea; border-color: #bfe0cb; color: var(--ok); text-align: center; font-weight: 600; }
.fb-track { height: 6px; background: #e3dccd; border-radius: 999px; margin-top: 7px; overflow: hidden; }
.fb-fill { height: 100%; background: linear-gradient(90deg, var(--thread), var(--ok)); border-radius: 999px; transition: width .3s; }

/* microcopy de confiança no checkout */
.checkout-trust { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 10px; }

/* feedback ao adicionar à sacola */
@keyframes cartBump { 0% { transform: scale(1); } 30% { transform: scale(1.25); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.cart-btn.bump { animation: cartBump .4s ease; }

/* prova social */
.vendidos { font-family: var(--mono); font-size: 10.5px; color: var(--thread); font-weight: 700; }
.vendidos-modal { font-family: var(--mono); font-size: 13px; color: var(--thread); font-weight: 700; margin-top: 6px; }

/* skeleton de carregamento */
.card.skel { pointer-events: none; }
.skel-box { aspect-ratio: 3/4; background: var(--paper-2); }
.skel-body { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.skel-line { height: 12px; border-radius: 6px; background: var(--paper-2); }
.skel-line.w30 { width: 30%; } .skel-line.w50 { width: 50%; } .skel-line.w80 { width: 80%; }
.card.skel .skel-box, .skel-line { background: linear-gradient(90deg, var(--paper-2) 25%, #f2ece0 37%, var(--paper-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* relacionados no modal */
.relacionados { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.rel-title { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rel-card { background: none; border: none; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 5px; }
.rel-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; background: var(--paper-2); transition: transform .2s; }
.rel-card:hover img { transform: translateY(-3px); }
.rel-nome { font-size: 12px; line-height: 1.2; }
.rel-preco { font-family: var(--mono); font-size: 12px; font-weight: 700; }

/* botão flutuante "ver sacola" */
.ver-sacola { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 49; display: none; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); padding: 13px 22px; border-radius: 999px; box-shadow: var(--shadow-lg); font-family: var(--mono); font-size: 13px; letter-spacing: .03em; cursor: pointer; }
.ver-sacola:hover { background: var(--indigo-900); }
.ver-sacola .vs-info { opacity: .85; }

/* cupom no carrinho */
.cupom-row { display: flex; gap: 8px; margin-top: 10px; }
.cupom-row .campo { margin-top: 0; flex: 1; }
.btn-cupom { background: var(--indigo); color: var(--paper); border-radius: var(--radius-sm); padding: 0 18px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.btn-cupom:hover { background: var(--indigo-900); }
.cupom-msg { font-size: 12px; margin-top: 6px; min-height: 14px; }
.cupom-msg.ok { color: var(--ok); font-weight: 600; }
.cupom-msg.err { color: var(--selvedge); }

@media (max-width: 600px) {
  .rel-grid { grid-template-columns: repeat(2, 1fr); }
  .ver-sacola { bottom: 16px; font-size: 12px; padding: 12px 18px; }
}

/* frete grátis no card + animação de entrada + modo de grade */
.frete-gratis-tag { font-family: var(--mono); font-size: 10px; color: var(--ok); font-weight: 700; }
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
.loja-grid { display: none; }
@media (max-width: 600px) {
  .loja-grid { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; font-size: 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; }
  .grid.umacol { grid-template-columns: 1fr; }
}

/* ícones do menu (header) */
.header-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }
.hdr-ic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: background .15s, color .15s; }
.hdr-ic:hover { background: var(--paper-2); color: var(--indigo); }
@media (max-width: 480px) { .hdr-ic { width: 34px; height: 34px; } .header-acoes { gap: 0; } }

/* música de fundo */
.music-btn { position: fixed; bottom: 78px; left: 22px; z-index: 49; width: 46px; height: 46px; border-radius: 50%; background: var(--indigo); color: var(--paper); display: none; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--shadow); cursor: pointer; }
.music-btn.tocando { background: var(--thread); }

/* logo acima da história */
.sobre-logo { height: 60px; width: auto; display: block; margin: 0 auto 16px; border-radius: 12px; }

/* depoimentos */
.depoimentos { max-width: 1240px; margin: 0 auto; padding: 50px 24px; }
.depo-grid { margin-top: 24px; }
.depo-viewport { overflow: hidden; }
.depo-track { display: flex; transition: transform .5s ease; }
.depo-slide { flex: 0 0 100%; display: flex; justify-content: center; padding: 0 6px; box-sizing: border-box; }
.depo-slide .depo-card { max-width: 620px; width: 100%; }
.depo-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.depo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); cursor: pointer; border: none; transition: .2s; padding: 0; }
.depo-dot.on { background: var(--indigo); width: 24px; border-radius: 999px; }
.depo-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.depo-stars { color: var(--thread); font-size: 15px; letter-spacing: 2px; }
.depo-texto { font-size: 14px; line-height: 1.6; color: var(--ink); flex: 1; }
.depo-quem { display: flex; align-items: center; gap: 11px; }
.depo-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--indigo); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 18px; flex: none; }
.depo-av img { width: 100%; height: 100%; object-fit: cover; }
.depo-quem b { font-size: 14px; display: block; }
.depo-quem span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
@media (max-width: 880px) { .depo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .depo-grid { grid-template-columns: 1fr; } }

/* aviso de cookies (LGPD) */
.cookie-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 65; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; background: var(--ink); color: var(--paper); padding: 12px 18px; font-size: 13px; box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
.cookie-link { color: var(--thread); text-decoration: underline; cursor: pointer; background: none; }
.cookie-ok { background: var(--paper); color: var(--ink); padding: 9px 22px; border-radius: 999px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; flex: none; }

/* popup de cadastro */
.popup-overlay { position: fixed; inset: 0; background: rgba(15, 28, 51, .7); display: none; align-items: center; justify-content: center; z-index: 92; padding: 16px; }
.popup-overlay.aberto { display: flex; animation: popFade .25s ease; }
@keyframes popFade { from { opacity: 0; } to { opacity: 1; } }
.popup-card { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 780px; background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); animation: popIn .35s cubic-bezier(.2, .9, .3, 1); }
@keyframes popIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.popup-img { background: linear-gradient(160deg, var(--indigo), var(--indigo-900)) center / cover; min-height: 320px; }
.popup-form { padding: 36px 30px; }
.popup-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: var(--ink); font-size: 18px; cursor: pointer; }
.popup-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.popup-destaque { font-family: var(--display); font-size: 46px; color: var(--thread); text-align: center; line-height: 1; margin: 6px 0; }
.popup-sub { text-align: center; color: var(--muted); margin-bottom: 18px; }
.popup-fld { margin-bottom: 12px; }
.popup-fld label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px; }
.popup-fld input { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); font-size: 14px; }
.popup-fld input:focus { outline: none; border-color: var(--indigo); }
.popup-btn { width: 100%; background: var(--thread); color: #fff; padding: 14px; border-radius: 10px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; margin-top: 6px; transition: .2s; }
.popup-btn:hover { background: #c0851f; }
.popup-rodape { text-align: center; font-size: 11px; color: var(--muted); font-style: italic; margin-top: 12px; }
.popup-sucesso { text-align: center; padding: 20px 0; }
.popup-check { font-size: 44px; }
.popup-sucesso h2 { font-size: 28px; margin: 6px 0 10px; }
.popup-cupom { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: .1em; color: var(--indigo); background: var(--paper-2); border: 2px dashed var(--indigo); border-radius: 10px; padding: 14px; margin: 12px 0; }
@media (max-width: 640px) { .popup-card { grid-template-columns: 1fr; max-width: 400px; } .popup-img { display: none; } .popup-form { padding: 30px 24px; } .popup-destaque { font-size: 40px; } }

/* contador de promoção */
.promo-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: var(--selvedge); color: #fff; padding: 9px 16px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-align: center; }
.promo-bar b { background: rgba(0, 0, 0, .22); padding: 3px 9px; border-radius: 6px; }

/* banner de cupom (1ª visita) */
.cupom-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--indigo-900); color: var(--paper); padding: 14px 18px; font-size: 14px; box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
.cupom-banner b { color: var(--thread); }
.cb-close { background: rgba(255, 255, 255, .15); color: #fff; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; flex: none; cursor: pointer; }

/* lightbox de foto */
.lightbox { position: fixed; inset: 0; background: rgba(8, 14, 26, .92); display: none; align-items: center; justify-content: center; z-index: 95; padding: 20px; cursor: zoom-out; }
.lightbox.aberto { display: flex; }
.lightbox img { max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: 8px; }
.lb-close { position: fixed; top: 18px; right: 20px; background: rgba(255, 255, 255, .15); color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; cursor: pointer; }

/* filtro de preço */
.preco-filtro { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 8px 0 2px; }
.preco-filtro label { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.preco-filtro #preco-label { color: var(--ink); font-weight: 700; }
.preco-filtro input[type=range] { width: 220px; accent-color: var(--indigo); cursor: pointer; }

/* limpar sacola */
.limpar-sacola { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--selvedge); border: 1.5px solid #eccfcb; padding: 6px 11px; border-radius: 7px; cursor: pointer; transition: .15s; }
.limpar-sacola:hover { background: var(--selvedge); color: #fff; border-color: var(--selvedge); }

/* ferramentas da loja: busca + ordenação */
.loja-tools { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 4px 0 2px; }
.loja-search { position: relative; flex: 1; max-width: 360px; }
.loja-search input { width: 100%; padding: 11px 14px 11px 38px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14px; font-family: inherit; }
.loja-search input:focus { outline: none; border-color: var(--indigo); }
.loja-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.loja-sort { padding: 11px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; font-family: var(--mono); color: var(--ink); cursor: pointer; }
.loja-sort:focus { outline: none; border-color: var(--indigo); }

/* selo de % e "últimas" no modal */
.off-pct { font-family: var(--mono); font-size: 13px; font-weight: 700; color: #fff; background: var(--selvedge); padding: 2px 8px; border-radius: 6px; }
.ultimas-modal { font-family: var(--mono); font-size: 13px; color: var(--selvedge); font-weight: 700; margin-top: 8px; }
.compartilhar { width: 100%; margin-top: 10px; background: none; border: 1.5px solid var(--line); color: var(--muted); padding: 12px; border-radius: var(--radius); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transition: .18s; cursor: pointer; }
.compartilhar:hover { border-color: var(--indigo); color: var(--indigo); }

/* acessibilidade */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.badge.new { background: var(--indigo); }
.badge.sale { background: var(--selvedge); }
.badge.exclusive { background: var(--ink); color: var(--thread); }
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-cat { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--thread); text-transform: uppercase; }
.card-nome { font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.15; }
.precos { margin-top: auto; padding-top: 6px; display: flex; align-items: baseline; gap: 4px 9px; flex-wrap: wrap; }
.preco { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.preco-antigo { font-family: var(--mono); font-size: 12px; color: var(--muted); text-decoration: line-through; white-space: nowrap; }

/* ---------- Como funciona ---------- */
.steps { max-width: 1240px; margin: 24px auto 0; padding: 30px 24px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; position: relative;
}
.step::before {
  content: ""; position: absolute; inset: 7px; border: 1.5px dashed var(--line); border-radius: 4px; pointer-events: none;
}
.step .n { font-family: var(--mono); font-size: 12px; color: var(--thread); letter-spacing: .1em; }
.step h4 { font-family: var(--display); font-size: 21px; margin: 10px 0 6px; }
.step p { font-size: 13.5px; color: var(--muted); }

/* ---------- Modal produto ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(15, 28, 51, .62);
  display: none; align-items: center; justify-content: center; z-index: 60; padding: 16px;
}
.overlay.aberto { display: flex; }
.modal {
  background: var(--card); border-radius: var(--radius); max-width: 900px; width: 100%;
  max-height: 92vh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: var(--shadow-lg);
}
.modal-fotos { background: var(--paper-2); }
.galeria { display: flex; flex-direction: column; }
.galeria-main { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--paper-2); cursor: zoom-in; }
.galeria-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .15s ease-out; }
.galeria-thumbs { display: flex; gap: 8px; padding: 10px; flex-wrap: wrap; background: var(--card); }
.thumb-btn { width: 52px; height: 64px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--paper-2); cursor: pointer; }
.thumb-btn.ativo { border-color: var(--indigo); }
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.modal-video { margin-top: 14px; border-radius: 10px; overflow: hidden; background: #000; }
.modal-video iframe, .modal-video video { width: 100%; aspect-ratio: 16/9; display: block; border: none; }
.medidas-toggle { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--indigo); background: none; border: 1.5px solid var(--line); padding: 9px 14px; border-radius: 7px; margin-top: 16px; cursor: pointer; transition: .15s; }
.medidas-toggle:hover { border-color: var(--indigo); }
.medidas-box { margin-top: 12px; }
.medidas-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.medidas-tab { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 260px; }
.medidas-tab th, .medidas-tab td { border: 1px solid var(--line); padding: 8px 10px; text-align: center; }
.medidas-tab th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; background: var(--paper-2); }
.modal-info { padding: 30px; position: relative; }
.fechar {
  position: absolute; top: 16px; right: 16px; background: var(--paper-2);
  width: 36px; height: 36px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--ink);
}
.modal-info h2 { font-size: 30px; margin: 8px 0; }
.modal-info .precos { margin-top: 6px; }
.opt-label { font-family: var(--mono); font-size: 11px; font-weight: 700; margin: 20px 0 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.opcoes { display: flex; gap: 9px; flex-wrap: wrap; }
.opt {
  font-family: var(--mono); font-size: 13px;
  border: 1.5px solid var(--line); background: var(--card); padding: 9px 15px;
  border-radius: var(--radius-sm); transition: .15s; min-width: 42px;
}
.opt.ativo, .opt:hover { border-color: var(--indigo); color: var(--indigo); }
.cor { width: 36px; height: 36px; border-radius: 50%; padding: 0; min-width: 0; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); }
.cor.ativo { box-shadow: 0 0 0 2.5px var(--indigo); }
.qtd { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.qtd button { background: var(--paper-2); width: 38px; height: 38px; border-radius: var(--radius-sm); font-size: 18px; color: var(--ink); }
.qtd #qtd-valor { font-family: var(--mono); font-weight: 700; min-width: 20px; text-align: center; }

/* ---------- Carrinho (drawer) ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(15, 28, 51, .5); display: none; z-index: 70; }
.drawer-overlay.aberto { display: block; }
.drawer {
  position: fixed; top: 0; right: -560px; width: 520px; max-width: 94vw; height: 100%;
  background: var(--paper); z-index: 80; transition: right .32s cubic-bezier(.23, 1, .32, 1);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.drawer.aberto { right: 0; }
.drawer-head { padding: 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.drawer-head h3 { font-size: 22px; }
.drawer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.drawer-itens { padding: 16px 22px; }
.drawer-itens:empty { display: none; }
.vazio { text-align: center; color: var(--muted); margin-top: 50px; font-family: var(--mono); font-size: 13px; letter-spacing: .05em; }
.item { display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.item img { width: 74px; height: 94px; object-fit: cover; border-radius: var(--radius-sm); background: var(--paper-2); }
.item-info { flex: 1; font-size: 14px; }
.item-info .nome { font-family: var(--display); font-size: 16px; font-weight: 600; }
.item-info .var { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.item-qtd { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.item-qtd button { background: var(--paper-2); width: 28px; height: 28px; border-radius: 6px; font-size: 14px; }
.item-qtd span { font-family: var(--mono); font-size: 13px; min-width: 16px; text-align: center; }
.remover { color: var(--selvedge); font-size: 11px; text-decoration: underline; font-family: var(--mono); }
.item strong { font-family: var(--mono); font-size: 14px; }
.drawer-foot { padding: 22px; border-top: 1px solid var(--line); background: var(--card); }
.linha { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 14px; font-family: var(--mono); }
.linha.total { font-size: 17px; font-weight: 700; margin-top: 10px; padding-top: 10px; border-top: 1.5px dashed var(--line); }
.campo { width: 100%; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); margin-top: 10px; font-size: 14px; font-family: inherit; background: var(--card); }
.campo:focus { outline: none; border-color: var(--indigo); }
.frete-info { font-size: 12px; color: var(--muted); margin-top: 9px; }
.checkout-erro { color: var(--selvedge); font-size: 13px; font-weight: 700; margin-top: 8px; min-height: 16px; }
.campo.invalido { border-color: var(--selvedge); background: #fdf3f1; }
.btn-mp { width: 100%; margin-top: 10px; background: #009ee3; color: #fff; padding: 14px; border-radius: var(--radius); font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: .2s; border: none; }
.btn-mp:hover { background: #0081bd; }
.btn-mp:disabled { opacity: .6; cursor: not-allowed; }
.btn-continuar {
  width: 100%; margin-top: 10px; background: none; border: 1.5px solid var(--line); color: var(--muted);
  padding: 12px; border-radius: var(--radius); font-family: var(--mono); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; transition: .18s;
}
.btn-continuar:hover { border-color: var(--indigo); color: var(--indigo); }

/* ---------- Footer ---------- */
footer.site { background: var(--indigo-900); color: var(--denim-200); padding: 56px 24px 30px; margin-top: 50px; }
.footer-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1.3fr; gap: 36px; }
footer.site .brand-name { color: var(--paper); }
footer.site .brand-tag { color: var(--thread); }
.footer-blurb { margin-top: 16px; font-size: 13.5px; max-width: 300px; color: rgba(174, 191, 217, .85); }
.footer-col h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); margin-bottom: 14px; }
.footer-col a, .footer-col p { display: block; font-size: 13.5px; margin-bottom: 9px; color: rgba(174, 191, 217, .85); transition: color .2s; }
.footer-col a:hover { color: var(--paper); }
.footer-bottom {
  max-width: 1240px; margin: 38px auto 0; padding-top: 22px; border-top: 1px solid var(--indigo-800);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: rgba(174, 191, 217, .6);
}
.footer-col .foot-link {
  display: block; background: none; padding: 0; margin-bottom: 9px; text-align: left;
  font-size: 13.5px; color: rgba(174, 191, 217, .85); cursor: pointer; transition: color .2s; font-family: var(--body);
}
.footer-col .foot-link:hover { color: var(--paper); }
.nsi-credit { color: var(--thread); font-weight: 700; letter-spacing: .06em; }
.nsi-credit:hover { color: var(--paper); text-decoration: underline; }
.footer-insta-line { margin-top: 12px; font-size: 13px; color: rgba(174, 191, 217, .85); }
.footer-insta-line span { color: var(--thread); }

/* ---------- Sobre ---------- */
.sobre { background: var(--indigo-900); color: var(--paper); padding: 70px 24px; }
.sobre-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.sobre-inner .eyebrow { color: var(--denim-200); }
.sobre-inner h2 { font-size: clamp(26px, 4.6vw, 40px); margin: 14px 0 18px; }
.sobre-inner p { color: rgba(244, 240, 231, .82); font-size: 16px; line-height: 1.7; }
.sobre-tag { margin-top: 20px; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--thread) !important; }

/* ---------- Modal de documentos ---------- */
.doc-overlay { position: fixed; inset: 0; background: rgba(15, 28, 51, .6); display: none; align-items: flex-start; justify-content: center; z-index: 90; padding: 30px 16px; overflow: auto; }
.doc-overlay.aberto { display: flex; }
.doc-modal { background: var(--card); border-radius: 12px; max-width: 720px; width: 100%; padding: 36px; box-shadow: var(--shadow-lg); position: relative; }
.doc-fechar { position: absolute; top: 16px; right: 16px; background: var(--paper-2); width: 36px; height: 36px; border-radius: 50%; font-size: 18px; color: var(--ink); }
.doc-modal h2 { font-size: 28px; margin-bottom: 18px; }
.doc-corpo { font-size: 14.5px; line-height: 1.7; }
.doc-corpo h3 { font-family: var(--display); font-size: 18px; margin: 20px 0 8px; }
.doc-corpo p { margin-bottom: 12px; color: #3b3a37; }
.doc-corpo strong { color: var(--ink); }

/* ---------- WhatsApp flutuante ---------- */
.zap-float {
  position: fixed; bottom: 22px; right: 22px; z-index: 50;
  background: var(--wa); color: #fff; width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(31, 175, 84, .5); transition: transform .2s;
  animation: zap-glow 2.6s ease-in-out infinite;
}
.zap-float svg { width: 32px; height: 32px; }
.zap-float::before, .zap-float::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--wa); animation: zap-ring 2.4s ease-out infinite; pointer-events: none;
}
.zap-float::after { animation-delay: 1.2s; }
.zap-float:hover { transform: scale(1.1); }

/* Atalho do painel (só aparece pro admin logado) */
.admin-fab {
  position: fixed; bottom: 22px; left: 22px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--indigo); color: var(--paper);
  padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow-lg);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-decoration: none;
  transition: transform .2s, background .2s;
}
.admin-fab:hover { transform: translateY(-2px); background: var(--indigo-900); }
.admin-fab svg { width: 16px; height: 16px; }
@media (max-width: 480px) { .admin-fab { bottom: 16px; left: 16px; padding: 9px 13px; font-size: 11px; } }
@keyframes zap-glow {
  0%, 100% { box-shadow: 0 10px 24px rgba(31, 175, 84, .45); }
  50% { box-shadow: 0 10px 40px rgba(31, 175, 84, .85); }
}
@keyframes zap-ring {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.15); opacity: 0; }
}

/* Voltar ao topo */
.to-top {
  position: fixed; bottom: 96px; right: 25px; z-index: 49;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--indigo); color: var(--paper);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .25s, transform .25s, background .2s;
}
.to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: var(--indigo-900); }

/* ---------- Responsivo ---------- */
@media (max-width: 880px) {
  .trust { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col.brand-col { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .header-inner { padding: 14px 18px; }
  .hero-inner { padding: 64px 20px 56px; }
  .steps-grid { grid-template-columns: 1fr; }
  .modal { grid-template-columns: 1fr; }
  .galeria-main { aspect-ratio: 4/5; }
}
@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .card-body { padding: 14px; }
  .card-nome { font-size: 16px; }
  .preco { font-size: 16px; }
  .preco-antigo, .off-pct { font-size: 11px; }
  .brand-logo { height: 48px; }
  .sobre { padding: 52px 20px; }
}
@media (max-width: 480px) {
  .trust { grid-template-columns: 1fr; }
  .brand-logo { height: 44px; }
  .card-body { padding: 13px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-meta { gap: 14px; }
  .modal-info { padding: 22px; }
  .modal-info h2 { font-size: 25px; }
  .thumb-btn { width: 46px; height: 56px; }
  .drawer { width: 100%; max-width: 100%; }
  .doc-modal { padding: 26px 20px; }
  .container, .header-inner, .catalogo, .trust, .steps, .footer-grid { padding-left: 16px; padding-right: 16px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-nome { font-size: 15px; }
}
@media (max-width: 340px) {
  .grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   TEMA ALTERNATIVO — VERMELHO & PRETO (degradê)
   Para ativar: em config.js troque  tema: 'denim'  por  tema: 'vermelho'
   (ou adicione data-tema="vermelho" na tag <html>). O tema índigo
   continua intacto — isto é só uma sobrecamada.
   =========================================================== */
[data-tema="vermelho"] {
  --muted: #b6a3a3;
  --paper-2: #1b1213;
  --card: #1a1415;
  --line: rgba(240, 232, 232, .16);
  --ink: #f0eaea;
  --indigo-900: #3d0808;
  --indigo-800: #5a0d0d;
  --indigo: #c41a1a;
  --denim: #e23b3b;
  --denim-200: #f2b8b8;
  --thread: #f3c531;
  --selvedge: #ff5a48;
  --shadow: 0 14px 36px rgba(0, 0, 0, .6);
  --shadow-lg: 0 26px 60px rgba(0, 0, 0, .72);
}
[data-tema="vermelho"] body {
  color: #ece6e6;
  background:
    radial-gradient(1100px 480px at 50% -8%, #34100f 0%, rgba(11, 7, 8, 0) 60%),
    #0b0708;
}
[data-tema="vermelho"] header.site { background: rgba(11, 7, 8, .9); border-bottom-color: #34201f; }
[data-tema="vermelho"] .topbar { background: #070405; }
[data-tema="vermelho"] .drawer { background: #0f0a0b; }
[data-tema="vermelho"] .card,
[data-tema="vermelho"] .depo-card,
[data-tema="vermelho"] .modal,
[data-tema="vermelho"] .galeria-thumbs,
[data-tema="vermelho"] .popup-card,
[data-tema="vermelho"] .doc-modal,
[data-tema="vermelho"] .loja-sort,
[data-tema="vermelho"] .loja-fav,
[data-tema="vermelho"] .loja-grid,
[data-tema="vermelho"] .doc-fechar { color: #ece6e6; }
[data-tema="vermelho"] .doc-corpo p { color: #c6bcbc; }
[data-tema="vermelho"] .doc-corpo strong { color: #fff; }
[data-tema="vermelho"] .campo,
[data-tema="vermelho"] .popup-fld input,
[data-tema="vermelho"] .loja-search input { color: #ece6e6; }
[data-tema="vermelho"] .campo::placeholder,
[data-tema="vermelho"] .loja-search input::placeholder { color: #8f8080; }
[data-tema="vermelho"] .btn-primary,
[data-tema="vermelho"] .btn-cupom,
[data-tema="vermelho"] .ver-sacola,
[data-tema="vermelho"] .music-btn,
[data-tema="vermelho"] .to-top,
[data-tema="vermelho"] .admin-fab { background: linear-gradient(135deg, #e22020, #7c0d0d); color: #fff; }
[data-tema="vermelho"] .btn-primary:hover,
[data-tema="vermelho"] .btn-cupom:hover,
[data-tema="vermelho"] .ver-sacola:hover,
[data-tema="vermelho"] .to-top:hover,
[data-tema="vermelho"] .admin-fab:hover { background: linear-gradient(135deg, #ff2d2d, #930f0f); }
[data-tema="vermelho"] .hero { background: #1a0808; }
[data-tema="vermelho"] .hero::after { background: linear-gradient(180deg, rgba(42, 8, 8, .74), rgba(8, 4, 4, .94)); }
[data-tema="vermelho"] .sobre { background: linear-gradient(160deg, #2a0a0a, #0c0708); }
[data-tema="vermelho"] footer.site { background: linear-gradient(180deg, #1c0809, #0a0506); }
[data-tema="vermelho"] .popup-img { background: linear-gradient(160deg, #c41a1a, #3d0808) center / cover; }
/* manter ESCUROS os poucos elementos que usavam --ink como FUNDO */
[data-tema="vermelho"] .marquee,
[data-tema="vermelho"] .badge.esg,
[data-tema="vermelho"] .badge.exclusive,
[data-tema="vermelho"] .cookie-bar { background: #15100f; }
/* botões/ícones de fundo CLARO precisam de texto escuro */
[data-tema="vermelho"] .cookie-ok,
[data-tema="vermelho"] .popup-close { color: #15100f; }
/* contornos claros pra destacar os detalhes no preto */
[data-tema="vermelho"] .card { border-color: rgba(240, 232, 232, .15); }
[data-tema="vermelho"] .card:hover { border-color: var(--denim-200); }
[data-tema="vermelho"] header.site { border-bottom-color: rgba(240, 232, 232, .12); }
[data-tema="vermelho"] .hdr-ic:hover { background: rgba(240, 232, 232, .08); }