/* ============================================================
   TOP BAR — pasek zaufania nad headerem
   Port z Lovable (TopInfoBar.tsx) — 1:1 layout/typografia/breakpointy,
   ikony lucide (outline/stroke, nie wypełnione kształty — patrz niżej).
   Statyczny (normalny przepływ dokumentu), NIE position:fixed — dokładnie
   jak w Lovable. Dzięki temu nie wymaga żadnych korekt #page/#stickybar:
   po scrollu topbar po prostu przewija się razem z resztą treści, a
   #stickybar (który dostaje position:fixed dopiero przez klasę .sticky na
   #page, patrz global.css ".sticky #stickybar") przykleja się normalnie
   do góry viewportu, tak jakby topbara tam już nie było — dokładnie tak
   jak w referencyjnym komponencie (tam też nic go nie "podpiera"). Próg
   aktywacji .sticky jest dodatkowo przesunięty o wysokość #topBar (patrz
   stickyNav() w footer.tpl), więc topbar chowa/pokazuje się naturalnym
   scrollem zamiast skokiem.
   Tylko na nowej karcie produktu (id_product 1229 / 852) — ładowane
   warunkowo przez <link> w header.tpl, ten sam warunek co nc-product.css,
   NIE przez autoload sitewide.
   Kolory jako literalne wartości (nie var(--nc-*)) — te zmienne są
   zdefiniowane tylko w nc-product.css, scope'owane do #nc-product-page i
   kilku innych elementów nowej karty; topbar.css ładuje się osobno.
   ============================================================ */

#topBar {
  background: rgb(248, 245, 242);
  border-bottom: 1px solid #E5E7EB;
  color: #4B5563;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

#topBar a {
  color: inherit !important;
  text-decoration: none;
  transition: color .2s ease;
}
#topBar a:hover {
  color: hsl(283 76% 43.7%) !important;
}
/* Kontakt (mail/telefon) — svg i tekst leżą oba WEWNĄTRZ <a> (w
   przeciwieństwie do reguł USP wyżej, gdzie svg+span są bezpośrednimi
   dziećmi .item) — samo align-items:center na .item nic tu nie centruje,
   bo .item ma tylko jedno dziecko (ten <a>). Flex trzeba więc powtórzyć
   na samym <a>, żeby jego dzieci (ikona + tekst) faktycznie się
   wyśrodkowały względem siebie. */
#topBar .item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#topBar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  /* clamp() zamiast osobnych breakpointów — font/odstępy płynnie maleją
     na węższych ekranach desktop, więc wszystko mieści się w jednym
     wierszu bez łamania nawet przy 1024–1280px (1:1 z Lovable). */
  font-size: clamp(10.5px, 0.92vw, 12px);
  gap: clamp(12px, 2vw, 36px);
  padding-block: 6px;
  padding-inline: clamp(24px, 3vw, 48px);
}
#topBar .container:before,
#topBar .container:after {
  display: none !important;
}

#topBar .topBar-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#topBar .topBar-features,
#topBar .topBar-contact {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
#topBar .topBar-features {
  gap: clamp(16px, 1.6vw, 24px);
  min-width: 0;
  flex-shrink: 1;
}
#topBar .topBar-contact {
  gap: 16px;
  padding-left: clamp(12px, 1.4vw, 28px);
  border-left: 1px solid #E5E7EB;
  flex-shrink: 0;
}

#topBar .item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Font Ninja wstrzykuje własny font-family/weight sitewide — !important
   wymuszenie, ten sam wzorzec co w nc-product.css (patrz tam "FIXUPS
   Font Ninja"). Wartości 1:1 ze zmierzonej referencji: Poppins Regular
   12px/18px, -0.1px tracking; pogrubione fragmenty (liczby/frazy) —
   Poppins Semi-bold, ta sama reszta. Kolor dziedziczony z #topBar (#4B5563),
   nie nadpisywany tutaj, żeby hover (czerwień marki) mógł go przebić. */
#topBar .item,
#topBar .item a {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  letter-spacing: -0.1px !important;
}
#topBar .item strong {
  font-family: 'Poppins', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  letter-spacing: -0.1px !important;
}

/* Ikony lucide (Truck/Undo2/Star/Package/Mail/Phone) — czysty obrys,
   fill:none zawsze (żaden z nich nie jest wypełnionym kształtem, w
   przeciwieństwie do poprzedniej wersji z niestandardową ikoną "truck-box"). */
#topBar .topbar-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  color: #4B5563;
}
/* display:block tylko na mobile (ticker) — <svg> jest domyślnie inline,
   więc ma pod sobą niewidoczny margines na "descender" (jak litery z
   ogonkiem, np. "y"), który przesuwał ikonę wizualnie do góry względem
   środka tekstu obok, mimo align-items:center na rodzicu (to center'uje
   BOX ikony razem z tym marginesem, nie jej faktyczną zawartość). */
@media (max-width: 767px) {
  #topBar .topbar-icon {
    display: block;
  }
}

@media (max-width: 767px) {
  #topBar .topBar-desktop { display: none !important; }

  /* .container jest flex + justify-content:space-between — z jednym
     jedynym widocznym dzieckiem (.topBar-desktop ukryty regułą wyżej)
     .topBar-mobile domyślnie NIE rozciąga się na główną oś flexa (flex:0
     1 auto), tylko dopasowuje do treści i zostaje przyklejony do lewej —
     stąd ticker zajmował tylko część szerokości paska zamiast całej.
     Padding kontenera też zmniejszony — clamp(24px,3vw,48px) z reguły
     bazowej (myślany pod desktopowe dwie kolumny) był tu za duży na tak
     wąski pasek. */
  #topBar .container {
    padding-inline: 8px;
  }
  #topBar .topBar-mobile {
    width: 100%;
  }
}
@media (min-width: 768px) {
  #topBar .topBar-mobile { display: none !important; }
}

/* ── Mobile: ticker jednego komunikatu naraz (autoplay + swipe + strzałki),
   patrz topbar.js — czysty vanilla JS, bez zależności od slick/jQuery. ── */
#topBar .topBar-mobile {
  padding: 0px 6px;
}
#topBar .topbar-ticker {
  display: flex;
  align-items: center;
  gap: 4px;
}
#topBar .topbar-nav-btn {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #6B7280;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, color .15s ease;
}
#topBar .topbar-nav-btn:hover {
  background: rgba(0, 0, 0, .05);
  color: #1F2937;
}
#topBar .topbar-nav-btn:active {
  transform: scale(.95);
}
#topBar .topbar-nav-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  pointer-events: none;
}
#topBar .topbar-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
#topBar .topbar-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  white-space: nowrap;
  animation: topbar-fade-in .25s ease;
}
#topBar .topbar-slide[hidden] { display: none; }
@media (max-width: 767px) {
  #topBar .topbar-slide {
    font-size: 12px;
  }
}
#topBar .topbar-slide span {
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes topbar-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}