/* dobre.audio — statyczny (nie-JS) układ nagłówka, header.tpl w child themie.
   Odtwarza dokładnie ten sam wygląd co poprzedni, JS-owy mechanizm — tylko
   renderowany bezpośrednio przez serwer, bez migotania przy ładowaniu. */

.dobre-audio-toprow {
  padding: 2px 0;
}

.dobre-audio-toprow__container {
  width: 100%;
}

.dobre-audio-toprow__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.dobre-audio-toprow__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Logo powiększone (sprawdzone wcześniej na żywo: 200px szerokości,
   proporcjonalna wysokość — motyw ma max-width/max-height z !important
   na samym obrazku, trzeba nadpisać też z !important). */
.dobre-audio-toprow__logo img {
  width: 200px !important;
  max-width: 200px !important;
  height: auto !important;
}

/* Sprawdzone na żywo (prawdziwa emulacja mobilna, 430px viewport):
   sztywne 200px logo koliduje z wyśrodkowaną wyszukiwarką (position:
   absolute, left:50%) na wąskich ekranach — logo kończyło się w tym
   samym miejscu gdzie zaczynała się wyszukiwarka (20px nachodzenia).
   110px zostawia bezpieczny, sprawdzony zapas (70px) po obu stronach. */
@media (max-width: 767px) {
  .dobre-audio-toprow__logo img {
    width: 110px !important;
    max-width: 110px !important;
  }
}

/* Wyszukiwarka na środek CAŁEGO paska (position:absolute) — sprawdzone
   na żywo: matematyczne centrowanie między logo i prawą grupą wygląda
   źle gdy te dwie kolumny mają różną szerokość (logo wąskie, prawa
   grupa szeroka) — position:absolute centruje względem całości. */
.dobre-audio-toprow__search {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  z-index: 5;
}

/* Na mobile: sprawdzone na żywo (prawdziwa emulacja mobilna, 430px) —
   position:absolute+wyśrodkowanie DZIAŁA dobrze w spoczynku (sama ikona
   lupy), ale natywny JS "Paska Szukania" po kliknięciu ROZSZERZA formularz
   (np. do 270px) niezależnie od naszego pozycjonowania — przy wyśrodko-
   wanym, sztywnym kontenerze rozszerzony formularz zaczynał się blisko
   środka ekranu i wystawał znacząco poza prawą krawędź (widoczne na
   żywo, 47px wystawania przy 430px ekranie). Naprawka: na mobile search
   wraca do normalnego przepływu flex (position:static) między logo a
   prawą grupą, z elastyczną szerokością — natywny JS może bezpiecznie
   rozszerzać formularz w tej ograniczonej, elastycznej przestrzeni bez
   wystawania poza ekran. Sprawdzone na żywo: po tej zmianie natywny
   mechanizm sam przechodzi w ładny, pełnoekranowy tryb wyszukiwania
   z przyciskiem "Anuluj" — dokładnie jak powinien. */
@media (max-width: 767px) {
  .dobre-audio-toprow__search {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    transform: none;
    left: auto;
    top: auto;
    width: auto;
    max-width: none;
  }
  .dobre-audio-toprow__search form {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* UWAGA: .ps-searchbar__magnifier to WEWNĘTRZNY element ukrytego,
     natywnego offcanvas (pełnoekranowy tryb wyszukiwania po kliknięciu),
     NIE widoczna ikona w spoczynku — sprawdzone na żywo (getBoundingClientRect
     dawał ujemny "top", element poza ekranem). Widoczna ikona to
     .header-block__icon wewnątrz .ps-searchbar--mobile, która już domyślnie
     dziedziczy poprawny rozmiar (20px) z tej samej, wspólnej klasy co
     kontakt/konto/koszyk — nie wymaga żadnej poprawki rozmiaru. */
  /* justify-content:center (dziedziczone z desktopu) w elastycznym,
     szerokim kontenerze na mobile sprawiało, że ikona "pływała" osobno
     na środku pustej przestrzeni między logo a resztą ikon, zamiast
     tworzyć spójny rządek. flex-end przykleja ją do reszty ikon. */
  .dobre-audio-toprow__search {
    justify-content: flex-end !important;
  }
}

.dobre-audio-toprow__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .dobre-audio-toprow__right {
    gap: 8px;
  }
}

/* Menu na pełną szerokość, osobny wiersz pod logo/wyszukiwarką. */
.dobre-audio-menurow .ps-mainmenu--desktop {
  flex: 1 1 100%;
  max-width: 100%;
}

/* Widget kontaktowy — ikona + tekst "Kontakt" + rozwijana karta.
   Reszta stylów (pozycja karty, cień, itd.) jest inline w PHP, bo to
   dane renderowane warunkowo — tu tylko odstęp od sąsiednich elementów. */
.dobre-audio-contact-widget {
  flex-shrink: 0;
}

/* Sprawdzone na żywo, precyzyjnie zmierzone (prawdziwa emulacja mobilna,
   430px): w przeciwieństwie do natywnych przycisków (search/konto/koszyk,
   każdy 32x32 z wbudowanym 6px paddingu wokół 20px ikony), widget
   kontaktowy ma kontener DOKŁADNIE dopasowany do samej ikony (20x20, bez
   paddingu) — więc "wypada z rytmu" wizualnych odstępów ustawionych przez
   naturalny gap między natywnymi przyciskami. Te dwie wartości (+14px,
   -10px) zostały wyliczone z rzeczywistych, zmierzonych na żywo odległości
   między czterema ikonami i dają dokładnie równe 20px odstępy między
   każdą sąsiednią parą (lupa-kontakt, kontakt-konto, konto-koszyk). */
@media (max-width: 767px) {
  .dobre-audio-contact-widget {
    margin-left: 14px;
    margin-right: -10px;
  }
}

/* Menu kategorii — "Dom i biuro" jako jedyna ma trzeci poziom głębokości
   (Strefa Zasilania → Ładowarki USB itd.). Sprawdzone na żywo: motyw
   Hummingbird nie rozróżnia głębokości drzewa — mechanicznie nakłada
   klasę "menu-item__group-main-item" (20px, waga 600 — styl przeznaczony
   dla GŁÓWNYCH nagłówków grup w standardowym, dwupoziomowym menu) na
   wszystko co renderuje się w prawej kolumnie submenu, niezależnie od
   tego czy to faktycznie nagłówek grupy, czy zwykła podkategoria 3.
   poziomu. Scoped precyzyjnie przez ".menu-item__group--nochild" (klasa
   motywu sygnalizująca "liść drzewa, bez dalszych dzieci") — sprawdzone
   na żywo, że to NIE dotyka żadnego innego, standardowego menu w tym
   sklepie (wszystkie inne kategorie mają tylko jeden realny poziom
   podkategorii, prawa kolumna submenu jest tam zawsze pusta). */
.menu-item__group--nochild .menu-item__group-main-item {
  font-size: 16px !important;
  font-weight: 400 !important;
}
/* Mobile: ukryj wersję desktopową ikon konta/koszyka zanim JS motywu
   przeniesie je do placeholderów #_mobile_ps_* (eliminuje błysk duplikatów) */
@media (max-width: 767.98px) {
  #_desktop_ps_customersignin,
  #_desktop_ps_shoppingcart {
    display: none !important;
  }
}
/* Tablet/desktop ≥768px: wyszukiwarka w flow zamiast absolute-center,
   żeby nie nachodziła na logo i ikonę Kontakt */
@media (min-width: 768px) {
  .dobre-audio-toprow__search {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 0 16px;
  }
  .dobre-audio-toprow__search > div.col-auto {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    display: flex;
    justify-content: center;
  }
  .dobre-audio-toprow__search .ps-searchbar {
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
  }
  .dobre-audio-toprow__search form {
    width: 100% !important; /* max-width 270px z configu dalej obowiązuje */
  }
}

/* 768–991px: sama ikona Kontakt, bez napisu (więcej miejsca na wyszukiwarkę) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .dobre-audio-contact-widget__icon > span {
    font-size: 0 !important;
    margin-left: -6px;
  }
}