/* ==========================================================================
   HEADER DESKTOP — STABILNY NA WSZYSTKICH STRONACH
   ========================================================================== */

@media (min-width: 1200px) {

    /* Header pozostawia miejsce na pozycjonowaną belkę */
    html body #header {
        position: relative !important;
        z-index: 10020 !important;

        width: 100% !important;
        min-height: 108px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        overflow: visible !important;
    }

    html body #header .header-bottom {
        position: relative !important;
        z-index: 10020 !important;

        width: 100% !important;
        min-height: 108px !important;

        margin: 0 !important;
        padding: 14px 28px 0 !important;

        background: transparent !important;

        overflow: visible !important;
        box-sizing: border-box;
    }

    html body #header .header-bottom__container {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    /* Ta sama belka na stronie głównej i wszystkich podstronach */
    html body #header .header-bottom__row {
        position: fixed !important;

        top: 14px !important;
        left: 50% !important;
        right: auto !important;
        z-index: 10020 !important;

        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;

        width: calc(100% - 56px) !important;
        max-width: 1400px !important;

        height: 80px !important;
        min-height: 80px !important;

        margin: 0 !important;
        padding: 0 20px 0 14px !important;

        transform: translateX(-50%) !important;

        background: #fff !important;

        border: 1px solid rgba(30, 80, 145, .08) !important;
        border-radius: 42px !important;

        box-shadow:
            0 8px 30px rgba(18, 42, 69, .11) !important;

        overflow: visible !important;
        box-sizing: border-box;
    }

    /* Treść podstron nie dostaje dodatkowego sztucznego przesunięcia */
    html body #wrapper,
    html body #content {
        padding-top: 0 !important;
    }


    /* ======================================================================
       LOGO
       ====================================================================== */

    html body #header .header-bottom__logo,
    html body #header #_desktop_logo {
        order: 1 !important;

        align-self: stretch !important;

        display: flex !important;
        align-items: center !important;

        flex: 0 0 210px !important;

        width: 210px !important;
        min-width: 210px !important;
        height: 80px !important;

        margin: 0 20px 0 0 !important;
        padding: 0 !important;
    }

    html body #header #_desktop_logo a,
    html body #header .header-bottom__logo a {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 80px !important;
    }

    html body #header #_desktop_logo img,
    html body #header .header-bottom__logo img {
        display: block !important;

        width: auto !important;
        max-width: 200px !important;

        height: auto !important;
        max-height: 58px !important;

        margin: 0 !important;

        transform: none !important;
    }


    /* ======================================================================
       MENU
       ====================================================================== */

    html body #header .ps-mainmenu--desktop {
        order: 2 !important;

        align-self: stretch !important;

        display: flex !important;
        align-items: center !important;

        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        height: 80px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    html body #header .ps-mainmenu__desktop {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 80px !important;

        overflow: visible !important;
    }

    html body #header #top-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        height: 80px !important;

        gap: 22px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    html body #header #top-menu > li {
        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body #header
    #top-menu > li > .ps-mainmenu__tree-item-wrapper,
    html body #header
    #top-menu > li .ps-mainmenu__tree-link {
        display: flex !important;
        align-items: center !important;

        height: 80px !important;
        min-height: 80px !important;

        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;

        white-space: nowrap !important;
    }


    /* ======================================================================
       IKONY PO PRAWEJ
       ====================================================================== */

    html body #header #_desktop_search_widget,
    html body #header #_desktop_ps_searchbar,
    html body #header #_desktop_user_info,
    html body #header #_desktop_ps_customersignin,
    html body #header #_desktop_wishlist,
    html body #header #_desktop_blockwishlist,
    html body #header #_desktop_ps_shoppingcart {
        align-self: stretch !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 0 !important;
        height: 80px !important;

        margin: 0 0 0 8px !important;

        /*
         * Najważniejsze: usunięcie starego padding-top: 16px.
         */
        padding: 0 !important;

        float: none !important;

        overflow: visible !important;
        transform: none !important;
    }

    /* Ikony nie podskakują na hoverze */
    html body #header .header-block__action-btn:hover,
    html body #header #_desktop_user_info .dropdown-toggle:hover,
    html body #header #_desktop_ps_customersignin .dropdown-toggle:hover,
    html body #header .wishlist-button:hover,
    html body #header #_desktop_ps_shoppingcart .cart-preview:hover {
        transform: none !important;
    }


    /* ======================================================================
       WYSZUKIWARKA — BEZ SKAKANIA
       ====================================================================== */

    html body #header #_desktop_ps_searchbar {
        position: relative !important;
        z-index: 100 !important;

        flex: 0 0 46px !important;

        width: 46px !important;
        min-width: 46px !important;
        height: 80px !important;
    }

    html body #header #_desktop_ps_searchbar #ps_searchbar {
        position: absolute !important;

        top: 50% !important;
        right: 0 !important;
        left: auto !important;

        width: 46px;
        height: 46px;

        margin: 0 !important;
        padding: 0 !important;

        transform: translateY(-50%) !important;

        transition: width .25s ease;
    }

    html body #header
    #_desktop_ps_searchbar .ps-searchbar__form {
        position: relative !important;

        width: 100% !important;
        height: 46px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body #header
    #_desktop_ps_searchbar .ps-searchbar__magnifier {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        left: auto !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    html body #header
    #_desktop_ps_searchbar .ps-searchbar__magnifier:hover,
    html body #header
    #_desktop_ps_searchbar .ps-searchbar__magnifier:focus,
    html body #header
    #_desktop_ps_searchbar .ps-searchbar__magnifier:active {
        width: 46px !important;
        height: 46px !important;

        transform: none !important;
    }

    html body #header
    #_desktop_ps_searchbar.is-search-open #ps_searchbar {
        width: 290px !important;
    }

    html body #header
    #_desktop_ps_searchbar.is-search-open .ps-searchbar__input {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /*
     * Nie usuwamy tła ani ramki po otwarciu.
     * To właśnie powodowało zmianę wyglądu i „skok”.
     */
    html body #header
    #_desktop_ps_searchbar.is-search-open
    .ps-searchbar__magnifier {
        color: #fff !important;
        background: #0b69f6 !important;

        border-color: #0b69f6 !important;

        box-shadow:
            0 2px 6px rgba(45, 107, 177, .12) !important;

        transform: none !important;
    }

    html body #header
    #_desktop_ps_searchbar.is-search-open
    .ps-searchbar__magnifier::before,
    html body #header
    #_desktop_ps_searchbar .ps-searchbar__magnifier:hover::before {
        filter: brightness(0) invert(1);
    }
}


/* ==========================================================================
   MNIEJSZY DESKTOP
   ========================================================================== */

@media (min-width: 1200px) and (max-width: 1450px) {

    html body #header .header-bottom__row {
        width: calc(100% - 32px) !important;
    }

    html body #header .header-bottom__logo,
    html body #header #_desktop_logo {
        flex-basis: 180px !important;

        width: 180px !important;
        min-width: 180px !important;

        margin-right: 12px !important;
    }

    html body #header #_desktop_logo img,
    html body #header .header-bottom__logo img {
        max-width: 172px !important;
    }

    html body #header #top-menu {
        gap: 14px !important;
    }

    html body #header
    #top-menu > li .ps-mainmenu__tree-link {
        font-size: 13px !important;
    }

    html body #header
    #_desktop_ps_searchbar.is-search-open #ps_searchbar {
        width: 230px !important;
    }
}


/* ==========================================================================
   BARDZO WĄSKI DESKTOP
   ========================================================================== */

@media (min-width: 1200px) and (max-width: 1300px) {

    html body #header .header-bottom__logo,
    html body #header #_desktop_logo {
        flex-basis: 150px !important;

        width: 150px !important;
        min-width: 150px !important;

        margin-right: 8px !important;
    }

    html body #header #_desktop_logo img,
    html body #header .header-bottom__logo img {
        max-width: 145px !important;
    }

    html body #header #top-menu {
        gap: 7px !important;
    }

    html body #header
    #top-menu > li .ps-mainmenu__tree-link {
        font-size: 12px !important;
    }

    html body #header
    #_desktop_ps_searchbar.is-search-open #ps_searchbar {
        width: 210px !important;
    }
}

/* ==========================================================================
   HEADER — WYSZUKIWARKA NIE BLOKUJE LINKÓW MENU
   ========================================================================== */

@media (min-width: 1200px) {

    /* Zamknięty kontener zajmuje wyłącznie miejsce ikony */
    #header #_desktop_ps_searchbar {
        position: relative !important;
        z-index: 1 !important;

        flex: 0 0 46px !important;

        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;

        overflow: visible !important;

        /*
         * Przezroczysty kontener nie może przechwytywać kliknięć.
         */
        pointer-events: none !important;
    }


    /* Formularz zamkniętej wyszukiwarki */
    #header #_desktop_ps_searchbar #ps_searchbar,
    #header #_desktop_ps_searchbar .ps-searchbar__form {
        position: absolute !important;

        top: 50% !important;
        right: 0 !important;
        left: auto !important;

        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        pointer-events: none !important;

        transform: translateY(-50%) !important;
        transition:
            width .25s ease,
            background-color .25s ease !important;
    }


    /* Ukryty input nie może leżeć nad menu */
    #header
    #_desktop_ps_searchbar:not(.is-search-open)
    .ps-searchbar__input {
        position: absolute !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;

        height: 46px !important;

        padding: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;
    }


    /* Lupa pozostaje klikalna */
    #header
    #_desktop_ps_searchbar
    .ps-searchbar__magnifier {
        position: absolute !important;

        top: 50% !important;
        right: 0 !important;
        z-index: 3 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;

        pointer-events: auto !important;
        cursor: pointer !important;

        transform: translateY(-50%) !important;
    }


    /* ================================================================
       WYSZUKIWARKA OTWARTA
       ================================================================ */

    #header #_desktop_ps_searchbar.is-search-open {
        z-index: 100 !important;

        pointer-events: auto !important;
    }

    #header #_desktop_ps_searchbar.is-search-open #ps_searchbar,
    #header #_desktop_ps_searchbar.is-search-open .ps-searchbar__form {
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;

        background: #fff !important;

        pointer-events: auto !important;
    }

    #header
    #_desktop_ps_searchbar.is-search-open
    .ps-searchbar__input {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 46px !important;

        padding: 0 58px 0 20px !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* Menu pozostaje nad zamkniętym polem wyszukiwania */
    #header #_desktop_top_menu,
    #header #_desktop_top_menu #top-menu,
    #header .ps-mainmenu--desktop {
        position: relative !important;
        z-index: 5 !important;
    }
}

/* ==========================================================================
   COMPACT HEADER — WYSZUKIWARKA 40 × 40 PX
   ========================================================================== */

@media (min-width: 1200px) {

    /* Zamknięty kontener wyszukiwarki */
    #header.header--compact #_desktop_ps_searchbar {
        position: relative !important;
        z-index: 1 !important;

        flex: 0 0 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin-left: 8px !important;
        padding: 0 !important;

        overflow: visible !important;
        pointer-events: none !important;
    }

    /* Formularz w stanie zamkniętym */
    #header.header--compact
    #_desktop_ps_searchbar
    #ps_searchbar,

    #header.header--compact
    #_desktop_ps_searchbar
    .ps-searchbar__form {
        position: absolute !important;

        top: 50% !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        pointer-events: none !important;

        transform: translateY(-50%) !important;

        transition:
            width .25s ease,
            background-color .25s ease !important;
    }

    /* Zamknięty input nie blokuje menu */
    #header.header--compact
    #_desktop_ps_searchbar:not(.is-search-open)
    .ps-searchbar__input {
        position: absolute !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;
    }

    /* Kółko lupy */
    #header.header--compact
    #_desktop_ps_searchbar
    .ps-searchbar__magnifier {
        position: absolute !important;

        top: 30% !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 3 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        pointer-events: auto !important;
        cursor: pointer !important;

    }

    /* SVG lupy */
    #header.header--compact
    #_desktop_ps_searchbar
    .ps-searchbar__magnifier::before {
        width: 19px !important;
        height: 19px !important;

        margin: 0 !important;
        transform: none !important;
    }


    /* ======================================================================
       WYSZUKIWARKA OTWARTA
       ====================================================================== */

    #header.header--compact
    #_desktop_ps_searchbar.is-search-open {
        z-index: 100 !important;

        pointer-events: auto !important;
    }

    #header.header--compact
    #_desktop_ps_searchbar.is-search-open
    #ps_searchbar,

    #header.header--compact
    #_desktop_ps_searchbar.is-search-open
    .ps-searchbar__form {
        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        background: #fff !important;

        pointer-events: auto !important;
    }

    #header.header--compact
    #_desktop_ps_searchbar.is-search-open
    .ps-searchbar__input {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        margin: 0 !important;
        padding: 0 48px 0 18px !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }

    #header.header--compact
    #_desktop_ps_searchbar.is-search-open
    .ps-searchbar__magnifier {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    /* Menu jest klikalne, dopóki wyszukiwarka jest zamknięta */
    #header.header--compact #_desktop_top_menu,
    #header.header--compact #_desktop_top_menu #top-menu,
    #header.header--compact .ps-mainmenu--desktop {
        position: relative !important;
        z-index: 5 !important;
    }
}