/* Identidade visual — Wine & Co. Imports (vermelho, preto, branco) */
:root {
  --brand-red: #c8102e;
  --brand-red-dark: #8e0c21;
  --brand-red-soft: #fbe7ea;
  --violet: #c8102e;
  --purple: #c8102e;
}

.logo i,
.wide-promo small { color: var(--brand-red-dark); }

.badge,
.order-button { background: var(--brand-red); }

.order-button:hover { background: var(--brand-red-dark); }

/* Mini-banners com foto de fundo (overlay escuro) — texto sempre em branco */
.mini-banners small { color: #ff9fac; }
.mini-banners h3 { color: #fff; }
.mini-banners p { color: #eee; }
.mini-bottle { color: var(--brand-red); }
.category-strip a:hover b { color: var(--brand-red-dark); }

.dropdown-menu a:hover {
  background: var(--brand-red-soft);
  color: var(--brand-red-dark) !important;
}

.inner-hero { background: linear-gradient(135deg, #faf7f0, #f3e8d2); }
.contact-box a,
.notice-contact:hover,
.contact-line:hover,
.notice .social a:hover,
.footer-social a:hover { color: var(--brand-red-dark); }

.header-search:focus-within {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px #c8102e26;
}

.header-search button:hover {
  background: var(--brand-red-soft);
  color: var(--brand-red-dark);
}

.cart-count,
.cart-empty a { background: var(--brand-red); }
.cart-head > div > svg,
.cart-head small { color: var(--brand-red-dark); }
.card-actions .order-button,
.quick-cart { background: var(--brand-red); }
.card-actions .order-button:hover,
.quick-cart:hover { background: var(--brand-red-dark); }

.thumbs button.active { border-color: var(--brand-red); }
.breadcrumb { color: var(--brand-red-dark); }
.rating { color: var(--brand-red); }
.add-cart {
  border-color: var(--brand-red);
  color: var(--brand-red-dark);
}
.add-cart:hover { background: var(--brand-red-soft); }
.variant-button:hover {
  border-color: var(--brand-red);
  color: var(--brand-red-dark);
}
.variant-button.active {
  border-color: var(--brand-red);
  color: var(--brand-red-dark);
  background: var(--brand-red-soft);
  box-shadow: 0 0 0 2px #c8102e26;
}

.contact-grid .contact-box .social-icon { color: var(--brand-red-dark); }
.contact-grid .contact-box .social-icon-whatsapp { color: #20ad61; }

.admin-logo span,
.admin-main header small { color: #f4c9d1; }
.admin-nav:hover,
.admin-nav.active,
.panel-head button,
.primary { background: var(--brand-red); }
.admin-nav:hover,
.admin-nav.active,
.panel-head button:hover,
.primary:hover { background: var(--brand-red-dark); }
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 0;
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px #c8102e26;
}

/* ---- Marca (ícone redondo) no login/admin ---- */
.login-logo-mark { height: 44px; width: auto; }
.admin-logo-mark { height: 30px; width: auto; }

/* ---- Logo completa (logo.png) no header e no rodapé ---- */
.logo { align-items: center; }
.logo-full { height: 140px; width: auto; display: block; flex: 0 0 auto; transition: height .25s ease; }
.footer-brand .logo-full { margin-bottom: 4px; }
@media (max-width: 580px) {
  .logo-full { height: 58px; }
}

/* Base do agrupamento do header (funciona em qualquer largura; o desktop
   troca .header-top para grid e centraliza a logo — ver media query abaixo) */
.header-top {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}
.header-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.header-icons .cart-header-button { margin-left: 0; }

/* ---- Header em duas linhas no desktop: busca | logo centralizada | conta —
   com o menu de categorias centralizado abaixo, separado por uma linha ---- */
@media (min-width: 901px) {
  .header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 0;
    padding: 0;
  }
  /* Header sempre no tamanho compacto (o mesmo que antes só aparecia depois de rolar). */
  .header-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 8px max(20px, calc((100% - 1230px) / 2));
  }
  .header-top .logo-full { height: 84px; }
  .header-top .header-search { justify-self: start; width: min(340px, 100%); }
  .header-top .logo { justify-self: center; }
  .header-icons {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .header-icons .menu { display: none; }
  .header .main-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 27px;
    margin: 0;
    padding: 14px max(20px, calc((100% - 1230px) / 2));
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
}

/* ---- Barra superior dourada com frase rotativa; header e rodapé em preto com detalhe vermelho (identidade @winecoimports) ---- */
/* A faixa fica grudada no topo e o header gruda logo abaixo dela (42px de altura),
   então os dois descem/sobem juntos durante a rolagem. */
.notice {
  position: sticky;
  top: 0;
  z-index: 41;
  background: linear-gradient(90deg, #8a6a1f, #b08f3f, #8a6a1f);
  border-top: 3px solid var(--brand-red);
  border-bottom: 1px solid #6e551a;
}

.header {
  top: 42px;
  background: #0a0a0a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 18px #00000055;
  transition: opacity .25s ease, background-color .25s ease, box-shadow .25s ease;
  /* Impede o navegador de "corrigir" a posição de rolagem quando o header muda de
     altura (scroll anchoring) — é isso que causava o tremor em loop. */
  overflow-anchor: none;
}

/* Ao rolar a página, só o header ganha uma leve transparência (5%); a faixa fica sempre opaca. */
.header.is-scrolled {
  opacity: .95;
}
.header nav a,
.dropdown-toggle,
.menu,
.account,
.account-link,
.cart-header-button { color: #e9e9e9; }
.header nav a:hover,
.dropdown-toggle:hover { color: var(--brand-red-soft); }

footer { background: #0a0a0a; color: #d8d8d8; }
.footer-main h4 { color: #fff; }
.footer-main > div a,
.footer-main .contact-line { color: #d8d8d8; }
.footer-main > div a:hover,
.footer-main .contact-line:hover { color: var(--brand-red-soft); }
.footer-brand p { color: #a8a8a8; }
.footer-whatsapp .social-icon { color: #20ad61; }
.copyright { border-top: 1px solid #222; color: #9a9a9a; }
.copyright .dev-credit:hover { color: var(--brand-red-soft); }
.footer-payment span { border-color: #262626; color: #bdbdbd; }

/* Destaque unificado nos banners do carrossel (sobrepõe as cores por slide) */
.hero-slide .hero-text > span,
.hero-slide:nth-child(2) .hero-text > span,
.hero-slide:nth-child(3) .hero-text > span { color: #ff9fac; }
.hero-slide h1 b,
.hero-slide:nth-child(2) h1 b,
.hero-slide:nth-child(3) h1 b { color: #fff; }