#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;
}