/* =========================================================
   OTECHRIDE – HLAVNÍ MENU
   BEZPEČNÁ VERZE PRO SHOPTET
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}


/* =========================================================
   DESKTOP – ROZŠÍŘENÍ HEADERU
   ========================================================= */

@media (min-width: 992px) {

    /*
    Pouze rozšíříme původní Shoptet container.
    Nezasahujeme do jeho JS logiky.
    */
    #header .navigation-wrapper.container {
        width: calc(100% - 32px) !important;
        max-width: 1900px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    /*
    Navigace může využít dostupný prostor.
    Bez absolutního pozicování.
    */
    #header #navigation {
        flex-grow: 1 !important;
        min-width: 0 !important;
    }


    /*
    Vnitřek navigace.
    */
    #header #navigation .navigation-in {
        width: 100% !important;
        max-width: none !important;
    }


    /*
    Samotné položky vystředíme v prostoru,
    který jim Shoptet přidělí.
    */
    #header #navigation .navigation-in > .menu-level-1 {
        justify-content: center !important;
    }


    /*
    Mírně zmenšíme vodorovné mezery,
    aby se položek vešlo více.
    */
    #header #navigation .menu-level-1 > li > a {
        padding-left: 10px !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
    }


    #header #navigation .menu-level-1 > li > a b {
        white-space: nowrap !important;
    }
}


/* =========================================================
   NOTEBOOKY
   ========================================================= */

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

    #header .navigation-wrapper.container {
        width: calc(100% - 20px) !important;

        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    #header #navigation .menu-level-1 > li > a {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}


/* =========================================================
   VĚTŠÍ MONITORY
   ========================================================= */

@media (min-width: 1500px) {

    #header .navigation-wrapper.container {
        width: calc(100% - 50px) !important;
        max-width: 1950px !important;

        padding-left: 25px !important;
        padding-right: 25px !important;
    }


    #header #navigation .menu-level-1 > li > a {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* =========================================================
   EXTRA ŠIROKÉ MONITORY
   ========================================================= */

@media (min-width: 1800px) {

    #header #navigation .menu-level-1 > li > a {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }
}


/* =========================================================
   MOBIL A TABLET
   Necháváme kompletně na Shoptetu
   ========================================================= */

@media (max-width: 991px) {

    #header .navigation-wrapper.container {
        max-width: 100% !important;
    }

}