#header .logo {
    max-width: 200px;
    max-height: 150px;
    padding: 5px 0;
}

#header #_mobile_logo svg,
#header #_desktop_logo svg,
#footer #_desktop_logo svg {
    max-width: 116px;
    max-height: 38px;
    width: 100%;
}

#footer_logo a svg {
    max-width: 100%;
    max-height: 75px;
    width: 100%;
}

@media (max-width: 991px) {
    #header .logo {
        width: auto;
    }
    #header .header-nav.tablet-h .top-logo a img {
        max-height: 50px;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    #header .header-nav .top-logo a img {
        max-height: 50px;
        max-width: 100%;
    }
}

/* =========================================
   2. DEFINITYWNY UKŁAD (Niszczyciel kolumn)
   ========================================= */

/* Szerokość głównego paska – tu wpisz ile trzeba (np. 1400px), żeby zrównało się z banerem na dole */
#header .header-top .container {
    max-width: 1100px !important; 
    width: 100% !important;
    margin: 0 auto !important; 
}

/* Wymuszamy główny kontener flex */
#header .header-top .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ⚠️ ZABIJAMY SIATKĘ PRESTASHOP
   Odbieramy kolumnom ich sztywne szerokości, żeby menu miało w końcu
   miejsce się rozprostować i nie łamało słowa "Blog" i "Kontakt" */
#header .header-top .row > div {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* LOGO: Sztywna tarcza ochronna. 
   Gwarantuje, że menu nigdy nie wjedzie na obrazek. */
#header .header-top #_desktop_logo,
#header .header-top .logo-module {
    flex: 0 0 auto !important;
    min-width: 220px !important;
    margin-right: 30px !important;
}

/* LUPA: Magiczna sztuczka.
   margin-left: auto w układzie flex bierze całe puste, wkurzające
   miejsce i rzuca je przed ten element, odpychając lupę na sam koniec prawej strony. */
#header .header-top .row > div:last-child {
    margin-left: auto !important;
}

/* =========================================
   3. PRZYKLEJONY NAGŁÓWEK I NAPRAWA PODMENU
   ========================================= */

/* Przyklejamy CAŁY nagłówek (nie tylko górny pasek).
   Zapobiega to uciekaniu logo/lupki i rozjeżdżaniu się struktury. */
#header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important; /* Wysoki z-index, aby być nad bannerem */
    width: 100% !important;
    background-color: #ffffff !important; /* Tło pod białym paskiem, na wypadek prześwitów */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; /* Opcjonalny cień dla widoczności */
}

/* Wymuszenie, aby biały pasek (z logo i menu) miał odpowiedni z-index wewnątrz przyklejonego nagłówka */
#header .header-top {
    position: relative !important;
    z-index: 10000 !important; 
}

/* Podnosimy szary pasek (header-nav) nad biały pasek z logiem (header-top) */
#header .header-nav {
    position: relative !important;
    z-index: 10005 !important; 
}

/* Zabezpieczenie dla kontenerów języków i walut (znajdujących się w header-nav) */
#header .header-nav #_desktop_language_selector,
#header .header-nav #_desktop_currency_selector,
#header .header-nav .lang_and_cr {
    position: relative !important;
    z-index: 10006 !important;
}

/* =========================================
   4. NAPRAWA GŁÓWNEGO PODMENU (POPOVER)
   ========================================= */

/* 1. KOTWICA DLA PODMENU */
/* Ustawiamy elementy głównego menu jako punkty odniesienia */
#top-menu > li {
    position: relative !important;
}

/* 2. DEFINICJA CHMURKI (POPOVER) */
/* Targetujemy ukrytego diva, który trzyma podmenu */
#top-menu > li .popover.sub-menu {
    position: absolute !important;
    top: 100% !important; /* Przyklejamy idealnie pod elementem głównym */
    left: 0 !important;
    margin: 0 !important; /* Likwidacja dziur, przez które ucieka kursor */
    background-color: #ffffff !important; 
    min-width: 250px !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    z-index: 10020 !important;
    
    /* Wymuszamy ukrycie domyślne, resetujemy ustawienia Bootstrapa */
    display: none !important; 
    opacity: 1 !important;
    visibility: visible !important;
}

/* Usuwamy domyślne tła i marginesy z samej listy wewnątrz popovera, żeby było czysto */
#top-menu > li .popover.sub-menu ul {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. POKAZYWANIE MENU NA HOVER */
/* Gdy zjedziesz na li, pokaż ukrytego diva */
#top-menu > li:hover .popover.sub-menu {
    display: block !important;
}
/* =========================================
   NEUTRALIZACJA ZŁEGO SKRYPTU MENU (Blokada przy stopce)
   ========================================= */

.anmm-menu-fixed,
#header .anmm-menu-fixed {
    overflow: visible !important;
    position: static !important; /* Zamraża w naturalnym położeniu siatki */
    
    /* Wyzerowanie prób przesunięć przy stopce: */
    transform: translate(0, 0) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    
    /* Sprzątanie wizualne: */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    animation: none !important;
    background: transparent !important;
}

/* Wymuszamy absolutny priorytet warstwy dla podmenu */
.anmm-menu-fixed .popover.sub-menu,
#header .anmm-menu-fixed .popover.sub-menu {
    z-index: 100000 !important; 
}
/* =========================================
   5. NAPRAWA WYGLĄDU TEKSTU W PODMENU
   ========================================= */

/* Automatyczne dopasowanie szerokości chmurki do najdłuższego tekstu */
#top-menu > li .popover.sub-menu {
    width: max-content !important; 
    min-width: 250px !important;
}

/* Wymuszamy, aby każdy element listy był osobnym, pełnym wierszem */
#top-menu > li .popover.sub-menu ul li {
    display: block !important;
    width: 100% !important;
    float: none !important; /* Usuwa ewentualne układy kolumnowe */
    margin: 0 !important;
    padding: 0 !important;
}

/* Rozciągamy linki i zabraniamy łamania tekstu */
#top-menu > li .popover.sub-menu ul li a {
    display: block !important;
    padding: 10px 15px !important; /* Estetyczne odstępy wewnątrz */
    white-space: nowrap !important; /* TO JEST KLUCZ: Zakaz łamania tekstu do nowej linii! */
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}