/* ==========================================================================
   header.css — Cabecalho unificado das paginas estaticas institucionais
   (Etapa 16a). Espelha FIELMENTE o header da home (index.php + home.css),
   para que Sobre/Trocas/Contato/Como Comprar tenham EXATAMENTE o mesmo
   cabecalho da home: topbar (marquee) + header (logo + busca + redes +
   conta + sacola) + barra de categorias. Sem hamburguer/drawer (no mobile a
   barra de categorias e' a navegacao, igual a home).

   Carregado SOMENTE pelas institucionais, DEPOIS de main.css.
   Cuidados de isolamento (a home e' inline em index.php; aqui e' o partial):
   - A home usa a classe global .container (1320px). As institucionais ja tem
     .container no main.css (1200px) usada no CORPO das paginas. Para nao vazar,
     o header usa .hdr-container (copia do .container da home, renomeada).
   - main.css estiliza `a` (coral + underline); reset escopado abaixo neutraliza
     isso so dentro de .header/.topbar.
   - As regras e a ORDEM espelham home.css para o cascade resolver identico
     (inclusive os overrides nos @media). Se o header da home mudar, sincronizar
     aqui (duas fontes de verdade ate a home migrar para o partial).
   ========================================================================== */

/* ---------- Tokens (subconjunto DS v3 Commerce usado pelo header) ---------- */
:root {
  --azul: #0B1D51;
  --amarelo: #FEC601;
  --coral: #F05D5E; --coral-d: #D94849;
  --branco: #FFFFFF;
  --cinza-bg: #F4F2EE;
  --cinza-1: #EEEAE3;
  --cinza-3: #8A8378;
  --preto: #18120E;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', system-ui, sans-serif;

  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;

  --f-xs: 0.72rem; --f-sm: 0.81rem; --f-2xl: 1.63rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px;

  --r-sm: 4px; --r-md: 10px; --r-pill: 9999px;

  --sh-xs: 0 1px 4px rgba(27,45,91,0.06);

  --max-w: 1320px;
  --pad-x: clamp(12px, 3vw, 32px);

  --t-fast: 0.15s ease;
  --t-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset escopado (cobre o header sobre o main.css das institucionais) ---------- */
.header *, .header *::before, .header *::after,
.topbar *, .topbar *::before, .topbar *::after { box-sizing: border-box; }
.header a, .topbar a { text-decoration: none; }
.topbar a { color: inherit; }
.header img { display: block; max-width: 100%; }

/* ---------- Container do header (renomeado p/ nao colidir com .container do main.css) ---------- */
.hdr-container { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--pad-x); }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  background: var(--azul);
  color: var(--branco);
  font-size: var(--f-xs);
  font-weight: var(--w-medium);
}
.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s2) 0;
  gap: var(--s4);
}
/* Aviso deslizante (marquee): viewport recortado + faixa duplicada (2 grupos
   identicos) animada a -50% = loop continuo e perfeito. Pausa ao passar o mouse. */
.topbar-benefits { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar-track { display: flex; width: max-content; animation: topbar-marquee 32s linear infinite; }
.topbar-track:hover { animation-play-state: paused; }
.topbar-group { display: flex; align-items: center; gap: var(--s6); padding-right: var(--s6); flex: 0 0 auto; }
.topbar-benefit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar-benefit svg { width: 14px; height: 14px; color: var(--amarelo); }
.topbar-benefit strong { color: var(--amarelo); font-weight: var(--w-bold); }
.topbar-links { display: flex; gap: var(--s5); flex: 0 0 auto; }
.topbar-links a { opacity: 0.85; transition: var(--t-fast); }
.topbar-links a:hover { opacity: 1; color: var(--amarelo); }

@keyframes topbar-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 1023px) {
  .topbar-links { display: none; }
  .topbar-inner { padding: 6px 0; }
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  background: var(--branco);
  box-shadow: var(--sh-xs);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s8);
  padding-block: var(--s4);
}

.logo {
  font-family: var(--font-serif);
  font-size: var(--f-2xl);
  font-weight: var(--w-medium);
  color: var(--azul);
  line-height: 1;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
}
.logo-main { font-style: italic; }
.logo-sub {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cinza-3);
  font-weight: var(--w-semibold);
  margin-top: 2px;
}

.search {
  position: relative;
  max-width: 640px;
  width: 100%;
  justify-self: center;
}
.search-input {
  width: 100%;
  height: 46px;
  padding: 0 56px 0 var(--s5);
  background: var(--cinza-bg);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font: var(--w-medium) var(--f-sm) var(--font-sans);
  color: var(--preto);
  transition: var(--t-base);
}
.search-input::placeholder { color: var(--cinza-3); font-weight: var(--w-regular); }
.search-input:focus {
  outline: none;
  background: var(--branco);
  border-color: var(--azul);
}
.search-btn {
  position: absolute;
  right: 4px; top: 4px; bottom: 4px;
  width: 46px;
  background: var(--azul);
  color: var(--branco);
  border: none;
  cursor: pointer;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  transition: var(--t-base);
}
.search-btn:hover { background: var(--amarelo); color: var(--azul); }
.search-btn svg { width: 18px; height: 18px; }

.header-actions { display: flex; align-items: center; gap: var(--s5); }
.header-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--preto);
  font-size: var(--f-xs);
  font-weight: var(--w-medium);
  position: relative;
  transition: var(--t-fast);
}
.header-action:hover { color: var(--azul); }
.header-action svg { width: 22px; height: 22px; stroke-width: 1.8; }
.cart-badge {
  position: absolute;
  top: -5px; right: -9px;
  background: var(--coral);
  color: var(--branco);
  font-size: 10px;
  font-weight: var(--w-bold);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
}

.menu-toggle { display: none; }

/* ============================================================
   PÚBLICOS (navegação primária)
   ============================================================ */
.publicos {
  background: var(--branco);
  border-top: 1px solid var(--cinza-1);
}
.publicos-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.publico-link {
  padding: var(--s4) var(--s3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--font-sans);
  font-size: var(--f-sm);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--preto);
  border-right: 1px solid var(--cinza-1);
  transition: var(--t-fast);
}
.publico-link:last-child { border-right: none; }
.publico-link:hover { background: var(--cinza-bg); color: var(--azul); }
.publico-link .ico { font-size: 18px; line-height: 1; }
.publico-link.is-primary { position: relative; }
.publico-link.is-primary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: var(--amarelo);
}
.publico-link.is-ofertas { background: var(--coral); color: var(--branco); }
.publico-link.is-ofertas:hover { background: var(--coral-d); color: var(--branco); }

@media (max-width: 1023px) {
  .header-main { grid-template-columns: auto auto auto; gap: var(--s3); }
  .search { grid-column: 1 / -1; order: 3; }
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    color: var(--preto);
  }
  .menu-toggle svg { width: 24px; height: 24px; }
  .header-action span { display: none; }
  .publico-link {
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    padding: var(--s3) var(--s1);
    letter-spacing: 0.05em;
  }
  .publico-link .ico { font-size: 22px; }
}

/* ---- Ajuste do header mobile: logo a esquerda, acoes a direita
   (substitui o grid auto/auto/auto acima) ---- */
@media (max-width: 1023px) {
  .header-main { grid-template-columns: 1fr auto; }
}

/* ---- Logo real no header (imagem no lugar do texto) ---- */
.header .logo img { display: block; width: auto; height: auto; max-height: 46px; }

/* ---- Guarda contra overflow horizontal no mobile ---- */
body { overflow-x: clip; }

/* ---- Redes sociais no header (ao lado de "Conta") ---- */
.header-socials { display: inline-flex; align-items: center; gap: var(--s3); }
.header-social { display: grid; place-items: center; color: var(--preto); transition: var(--t-fast); }
.header-social:hover { color: var(--azul); }
.header-social svg { width: 20px; height: 20px; }

/* No mobile: logo menor e acoes apertadas; .header-socials vira display:contents
   para Instagram/Facebook/Conta/Sacola ficarem no mesmo flex de .header-actions. */
@media (max-width: 1023px) {
  .header .logo img { max-height: 22px; }
  .header-action svg { width: 19px; height: 19px; }
  .header-social svg { width: 18px; height: 18px; }
  .header-actions { gap: var(--s4); }
  .header-socials { display: contents; }
}

/* Em celular (<=600px) escondemos Instagram/Facebook do header (apertava e
   cortava o carrinho). As redes seguem no rodape. */
@media (max-width: 600px) {
  .header-socials { display: none; }
}

/* ---- Modo deitado / telas baixas (landscape no celular): esconde a topbar,
   solta o header do sticky e compacta paddings. ---- */
@media (max-height: 500px) {
  .topbar { display: none; }
  .header { position: static; }
  .header-main { padding-block: var(--s2); }
  .search-input { height: 40px; }
  .publico-link { padding: var(--s2) var(--s1); }
}