/* ═══════════════════════════════════════════════════════════════
   GW ART STUDIO — REBRAND.CSS
   Camada de estilos NOVA, carregada DEPOIS do site.css.
   • Cores/botões/cards do REBRANDING valem para todas as páginas do site
     (o rodapé continua exatamente como era).
   • Os blocos "h-*" só existem na home.
   Pra desfazer o rebranding: remova a linha <link ... rebrand.css>.
   ═══════════════════════════════════════════════════════════════ */

body {
  --h-wine: #7A1128;
  --h-wine-hover: #5E0C1F;
  --h-on-wine: #FFFFFF;
  --h-soft: #F7F2EE;
  --h-ink: #1A1512;
  --h-star: #D4AF37;
}
body[data-theme="dark"] {
  --h-wine: #C41E3A;
  --h-wine-hover: #DA3552;
  --h-soft: var(--bg-elevated);
  --h-ink: var(--text);
}

/* ───────── Faixa de avisos (topo) ───────── */
.h-topbar {
  background: var(--h-wine); color: var(--h-on-wine);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  text-align: center; padding: 9px 5%;
}
.h-topbar span + span::before { content: '·'; margin: 0 12px; opacity: 0.6; }
@media (max-width: 700px) {
  .h-topbar span:nth-child(n+3) { display: none; }
}

/* ───────── Botões da home ───────── */
.h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 10px; font-weight: 700; font-size: 0.92rem;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.h-btn-primary { background: var(--h-wine); color: var(--h-on-wine); }
.h-btn-primary:hover { background: var(--h-wine-hover); transform: translateY(-1px); }
.h-btn-ghost { background: transparent; color: var(--text); border-color: var(--line); border-color: color-mix(in srgb, var(--text) 22%, transparent); }
.h-btn-ghost:hover { border-color: var(--h-wine); color: var(--h-wine); }

/* ───────── Hero ───────── */
.h-hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
  width: 90%; max-width: 1240px; margin: 0 auto; padding: 64px 0 56px;
}
.h-hero h1 {
  font-size: clamp(2.5rem, 5.2vw, 4rem); line-height: 1.04; margin: 14px 0 18px;
  font-weight: 600; letter-spacing: -0.005em;
}
.h-hero h1 em { font-style: italic; color: var(--h-wine); }
.h-hero .lead { color: var(--text-dim); font-size: 1.08rem; line-height: 1.65; max-width: 520px; }
.h-eyebrow {
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: var(--h-wine);
}
.h-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 26px; }
.h-hero-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text-dim); font-size: 0.82rem; }
.h-hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.h-hero-proof svg { color: var(--h-wine); flex: none; }

.h-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.h-mosaic .tile {
  aspect-ratio: 1/1; border-radius: 18px; overflow: hidden; background: var(--h-soft);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
}
.h-mosaic .tile:nth-child(2) { transform: translateY(26px); }
.h-mosaic .tile:nth-child(4) { transform: translateY(26px); }
.h-mosaic .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.h-mosaic a.tile { cursor: pointer; position: relative; }
.h-mosaic a.tile:hover img { transform: scale(1.05); }
.h-mosaic a.tile .tile-label {
  position: absolute; left: 10px; bottom: 10px; right: 10px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); color: var(--text);
  border-radius: 8px; padding: 6px 10px; font-size: 0.76rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-mosaic .tile.logo img { width: 46%; height: auto; object-fit: contain; opacity: 0.9; }
.h-mosaic { padding-bottom: 26px; }

/* ───────── Faixa de confiança ───────── */
.h-trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--h-soft); padding: 0 5%; }
.h-trust-grid {
  max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr);
}
.h-trust-item { display: flex; gap: 14px; align-items: center; padding: 24px 18px; }
.h-trust-item + .h-trust-item { border-left: 1px solid var(--line); }
.h-trust-item svg { color: var(--h-wine); flex: none; }
.h-trust-item b { display: block; font-size: 0.9rem; }
.h-trust-item span { color: var(--text-dim); font-size: 0.8rem; }

/* ───────── Seções ───────── */
.h-section { padding: 84px 5%; }
.h-head { max-width: 1240px; margin: 0 auto 36px; display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.h-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); margin-top: 8px; }
.h-head p { color: var(--text-dim); margin-top: 8px; font-size: 0.98rem; max-width: 520px; }
.h-link { color: var(--h-wine); font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
.h-link:hover { text-decoration: underline; }
.h-head.center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }

/* Categorias */
.h-cats { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.h-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 28px 28px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--h-soft); transition: border-color 0.2s ease, transform 0.2s ease;
}
.h-cat:hover { border-color: var(--h-wine); transform: translateY(-2px); }
.h-cat h3 { font-size: 1.35rem; font-weight: 600; }
.h-cat span { color: var(--text-dim); font-size: 0.85rem; }
.h-cat svg { color: var(--h-wine); flex: none; }

/* Destaques: só ajusta o espaçamento da grade que já existe */
body.home #destaques { padding: 84px 5%; }
body.home .grid-products { max-width: 1240px; }

/* Como funciona */
.h-steps { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.h-step .n {
  width: 42px; height: 42px; border-radius: 50%; background: var(--h-wine); color: var(--h-on-wine);
  display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 16px;
}
.h-step h3 { font-size: 1.25rem; margin-bottom: 6px; }
.h-step p { color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; }

/* Depoimentos */
.h-reviews { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.h-review { border: 1px solid var(--line); border-radius: 16px; padding: 26px; background: var(--bg); }
.h-review .stars { color: var(--h-star); letter-spacing: 2px; margin-bottom: 12px; }
.h-review p { font-size: 0.96rem; line-height: 1.6; margin-bottom: 16px; }
.h-review .who { color: var(--text-dim); font-size: 0.82rem; font-weight: 600; }
.h-reviews-empty { max-width: 560px; margin: 0 auto; text-align: center; color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; }

/* Faixa de fundo suave alternada */
.h-alt { background: var(--h-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ───────── Responsivo (home) ───────── */
@media (max-width: 980px) {
  .h-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; width: 88%; }
  .h-trust-grid { grid-template-columns: 1fr 1fr; }
  .h-trust-item:nth-child(3) { border-left: 0; }
  .h-trust-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .h-cats, .h-steps, .h-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .h-trust-grid { grid-template-columns: 1fr; }
  .h-trust-item + .h-trust-item { border-left: 0; border-top: 1px solid var(--line); }
  .h-section, body.home #destaques { padding: 60px 6%; }
  .h-btn { width: 100%; }
}

/* ───────── NAV (todas as páginas) ─────────
   No celular o menu sumia (display:none) e não havia como navegar.
   Agora vira uma linha rolável logo abaixo da logo. */
.nav { padding-top: 14px; padding-bottom: 14px; }
.nav.nav-scrolled { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 980px) {
  .nav { flex-wrap: wrap; row-gap: 8px; }
  .nav-links {
    display: flex !important; order: 3; width: 100%; gap: 22px; overflow-x: auto;
    padding: 4px 0 2px; white-space: nowrap; scrollbar-width: none;
    border-top: 1px solid var(--line); padding-top: 10px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a::after { display: none; }
}

/* ───────── REBRANDING GLOBAL (todas as páginas, menos o painel) ─────────
   Visual único: vinho como cor de ação, cantos suaves, sem brilho dourado.
   O rodapé NÃO é alterado. */
body:not(.admin) .btn-primary {
  background: var(--h-wine); color: var(--h-on-wine); border-radius: 10px;
  box-shadow: none;
}
body:not(.admin) .btn-primary:hover { background: var(--h-wine-hover); box-shadow: none; transform: translateY(-1px); }
body:not(.admin) .btn-ghost { border-radius: 10px; }
body:not(.admin) .btn-ghost:hover { border-color: var(--h-wine); color: var(--h-wine); }
body:not(.admin) .eyebrow { color: var(--h-wine); }
body:not(.admin) .nav-links a::after { background: var(--h-wine); }
body:not(.admin) .nav-links a.active { color: var(--h-wine); }
body:not(.admin) .icon-btn:hover { border-color: var(--h-wine); }

/* Cards de produto: mais limpos, sem o brilho que seguia o mouse */
body:not(.admin) .product-card::before { display: none; }
body:not(.admin) .product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
body:not(.admin) .product-card .price { color: var(--text); }
body:not(.admin) .badge { background: var(--h-wine); color: var(--h-on-wine); }
body:not(.admin) .add-btn:hover { background: var(--h-wine); border-color: var(--h-wine); color: var(--h-on-wine); }
body:not(.admin) footer .eyebrow { color: inherit; }

/* Títulos de página interna (institucionais) mais enxutos */
body:not(.admin) .institucional-hero { padding-top: 56px; padding-bottom: 28px; }
body:not(.admin) .breadcrumb a:hover { color: var(--h-wine); }

/* ───────── Cor de destaque única: vinho no lugar do dourado ─────────
   Tudo que usava o dourado (títulos, preços, selecionados, ícones) passa
   a usar o vinho. O RODAPÉ e o "ART" da logo mantêm o dourado. */
body:not(.admin) { --accent: var(--h-wine); }
body[data-theme="dark"]:not(.admin) { --accent: #E05570; }
footer, .brand-name { --accent: #D4AF37; }

body:not(.admin) .switch.on,
body:not(.admin) .auth-tab.active,
body:not(.admin) .timeline-step.done .timeline-dot { background: var(--h-wine); color: var(--h-on-wine); border-color: var(--h-wine); }
body:not(.admin) .timeline-step.done .timeline-line { background: var(--h-wine); }
body:not(.admin) .roleta-btn-principal { background: var(--h-wine); color: var(--h-on-wine); }
body:not(.admin) .nav-links a::after { background: var(--h-wine); }

/* ───────── Calculadora de frete (carrinho e produto) ───────── */
.frete-calc { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 18px; background: var(--bg-elevated); }
.frete-titulo { font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; }
.frete-linha { display: flex; gap: 8px; }
.frete-linha .frete-cep { flex: 1; min-width: 0; }
.frete-linha .frete-btn { padding: 10px 16px; font-size: 0.8rem; white-space: nowrap; }
.frete-naosei { display: inline-block; margin-top: 8px; font-size: 0.76rem; color: var(--text-dim); text-decoration: underline; }
.frete-resultado { margin-top: 12px; }
.frete-destino { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 8px; }
.frete-opcoes { display: grid; gap: 8px; }
.frete-opcao {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; font-size: 0.85rem; background: var(--bg);
}
.frete-opcao:has(input:checked) { border-color: var(--h-wine, var(--accent)); }
.frete-opcao input { accent-color: var(--h-wine, var(--accent)); flex: none; }
.frete-op-nome { flex: 1; min-width: 0; }
.frete-op-nome small { display: block; color: var(--text-dim); font-size: 0.74rem; margin-top: 2px; }
.frete-nota { font-size: 0.74rem; color: var(--text-dim); margin-top: 8px; line-height: 1.5; }
.frete-erro { font-size: 0.82rem; color: #c0392b; line-height: 1.5; }
.frete-erro a { text-decoration: underline; }