/* =========================
   HEADER: WHITE ON HERO, BLACK AFTER
   ========================= */

#siteHeader{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  background: transparent;
  -webkit-font-smoothing: antialiased;

  /* по умолчанию — белый поверх баннера */
  color: #fff !important;
}

/* после баннера — черный */
#siteHeader.header-dark{
  color: #111 !important;
}

/* ЖЕСТКО наследуем цвет для всего внутри хедера */
#siteHeader, #siteHeader *{
  color: inherit !important;
}

/* на всякий случай */
#siteHeader a,
#siteHeader button{
  color: currentColor !important;
}

/* SVG (fill + stroke) */
#siteHeader svg{
  fill: currentColor !important;
  stroke: currentColor !important;
}

#siteHeader .logo-white{ display: block; }
#siteHeader .logo-black{ display: none; filter: invert(1); }

#siteHeader.header-dark .logo-white{ display: none; }
#siteHeader.header-dark .logo-black{ display: block; }

/* ===== POPOVER ===== */
.catalog-popover {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100vw;

  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  z-index: 9999;
  display: none;

  mix-blend-mode: normal;
  isolation: isolate;
}

.catalog-popover .top-bar { height: 80px; }

.catalog-popover .links-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 48px;
}

.catalog-popover, .catalog-popover * {
  mix-blend-mode: normal !important;
  color: #111 !important;
}

.catalog-popover a {
  text-decoration: none;
  font-size: 14px;
  display:block;
  padding:6px 0;
}
.catalog-popover a:hover { text-decoration: underline; opacity: .9; }

/* bag icon in header: белый на баннере, чёрный после */
#heartLink { display:inline-block; line-height:0; transition: filter .18s ease, opacity .18s ease; }
#heartLink img.icon-bag { width:20px; height:20px; display:block; filter:invert(1); }
#siteHeader.header-dark #heartLink img.icon-bag { filter:invert(0); }

/* catalog button: white while over hero, otherwise dark */
#catalogBtn {
  transition: color .18s ease, opacity .18s ease;
  color: currentColor !important;
  background: transparent !important;
  border: none !important;
}

/* When header is over hero (not header-dark) make catalog white */
#siteHeader:not(.header-dark) #catalogBtn,
#catalogBtn.catalog-in-hero {
  color: #fff !important;
}

/* When header is after hero show dark catalog */
#siteHeader.header-dark #catalogBtn {
  color: #111 !important;
}

/* ensure arrow icon inherits color */
#catalogBtn svg { fill: currentColor !important; stroke: currentColor !important; }

/* mirror for heart/bag icon (if needed) */
#siteHeader:not(.header-dark) #heartLink img.icon-bag,
#heartLink.in-hero img.icon-bag { filter: invert(1); }
#siteHeader.header-dark #heartLink img.icon-bag { filter: invert(0); }
