/* ==========================================================
   ADMIN-ONLY HEADER / NAVIGATION TEST
   ========================================================== */

body.admin-logged {


    /* ==========================================================
       SEARCH BAR
       ========================================================== */

    @media (min-width: 768px) {
        
        
    /* Main visible desktop navigation – normal state */
    .navigation-in > .menu-level-1 >
    li.menu-item-1241 > a {
        color: var(--color-secondary) !important;
        background-color: #ececd0 !important;
    }


    /* Main visible desktop navigation – hover state */
    .navigation-in > .menu-level-1 >
    li.menu-item-1241 > a:hover,
    .navigation-in > .menu-level-1 >
    li.menu-item-1241 > a:focus {
        color: #ffffff !important;
        background-color: var(--color-primary) !important;
    }


    li.menu-item-1241 {
        padding-left: 0 !important;
        background: none !important;
    }


    li.menu-item-1241 > a,
    li.menu-item-1241 > a:hover,
    li.menu-item-1241 > a:focus {
        position: relative !important;
        box-sizing: border-box;

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

        padding-left: 38px !important;
        padding-right: 20px !important;

        white-space: nowrap;

        transition: none !important;
        animation: none !important;
    }
        
        /* ==========================================================
   ADMIN-ONLY: FAVOURITES TEXT NEXT TO HEART
   ========================================================== */


        /*
         * Allow enough room for heart + text.
         */
        #dkLabFavHeaderWrapper {
            width: auto !important;
            max-width: none !important;
        }


        /*
         * Heart + text = one clickable link.
         *
         * IMPORTANT:
         * We do NOT change the color here,
         * so the original heart keeps its existing color.
         */
        #dkLabFavHeaderIconBtn {
            display: inline-flex !important;
            align-items: center !important;

            width: auto !important;
            max-width: none !important;

            white-space: nowrap;

            text-decoration: none !important;
        }


        /*
         * Add "Obľúbené" next to the existing heart.
         *
         * Only this text gets the normal dark text color.
         */
        #dkLabFavHeaderIconBtn::after {
            content: "Obľúbené";

            display: inline-block;

            margin-left: 7px;

            color: #333333 !important;

            font-size: 14px !important;
            font-weight: 700 !important;
            line-height: 1 !important;

            white-space: nowrap;
        }


        /*
         * Keep text the same normal color on hover.
         * The heart itself is still controlled by its
         * original dkLAB styling.
         */
        #dkLabFavHeaderIconBtn:hover::after,
        #dkLabFavHeaderIconBtn:focus::after {
            color: #333333 !important;
        }




    /* ==================================================
       % ICON
       Replaces the old tag.svg icon
       ================================================== */

    .navigation-in > .menu-level-1 >
    li.menu-item-1241 > a::before {
        content: "%" !important;

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

        position: absolute !important;

        /*
         * Moved slightly to the right,
         * closer to the menu text.
         */
        left: 16px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 20px !important;
        height: 20px !important;

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

        color: var(--color-secondary) !important;
        -webkit-text-fill-color: var(--color-secondary) !important;

        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        /*
         * Completely remove the old SVG icon styling.
         */
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        -webkit-mask: none !important;
        -webkit-mask-image: none !important;
        mask: none !important;
        mask-image: none !important;

        border: none !important;
        box-shadow: none !important;

        pointer-events: none !important;

        transition: none !important;
        animation: none !important;
    }


    /* ==================================================
       % ICON – HOVER / FOCUS
       ==================================================

       Explicitly repeat the important properties here
       so the old tag.svg hover rule cannot come back.
       ================================================== */

    .navigation-in > .menu-level-1 >
    li.menu-item-1241 > a:hover::before,

    .navigation-in > .menu-level-1 >
    li.menu-item-1241 > a:focus::before {
        content: "%" !important;

        /*
         * EXACTLY same position as normal state.
         */
        left: 13px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        width: 20px !important;
        height: 20px !important;

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

        /*
         * White % on green hover background.
         */
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        /*
         * This is the important white-box fix.
         */
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        -webkit-mask: none !important;
        -webkit-mask-image: none !important;
        mask: none !important;
        mask-image: none !important;

        border: none !important;
        box-shadow: none !important;

        opacity: 1 !important;

        transition: none !important;
        animation: none !important;
    }
        
        
/* Menu item with "PAW" icon */
li.menu-item-856 {
    background: none !important;
    padding-left: 0px;
    background-position: left;
    background-position-x: 0px;
}
li.menu-item-856:hover {
    background: none !important;
    background-color: var(--color-primary)!important;
    padding-left: 0px;
    background-position: left;
    background-position-x: 0px;
}

        /*
         * Search form
         */
        #header .search-form {
            display: flex !important;
            align-items: stretch !important;

            height: 40px !important;

            background: #fff !important;

            border: 1px solid var(--color-primary) !important;
            border-radius: 999px !important;

            overflow: hidden !important;

            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12) !important;
        }


        /* ======================================================
           REMOVE ORIGINAL MAGNIFIER FROM INPUT
           ====================================================== */

        /*
         * This is the exact Shoptet icon:
         *
         * <span class="search-input-icon"></span>
         */
        #header .search-form .search-input-icon {
            display: none !important;
            visibility: hidden !important;
        }


        /*
         * Search input
         */
        #header .search-form .search-input,
        #header .search-form input[type="search"],
        #header .search-form input[name="string"] {
            flex: 1 1 auto !important;

            width: auto !important;
            min-width: 0 !important;
            height: 100% !important;

            /*
             * Normal spacing now that the original
             * magnifier is removed.
             */
            padding-left: 14px !important;
            padding-right: 14px !important;

            text-indent: 0 !important;

            background-color: #fff !important;
            background-image: none !important;

            border: 0 !important;
            border-radius: 999px 0 0 999px !important;

            box-shadow: none !important;
            outline: none !important;
        }


        /*
         * Input focus
         */
        #header .search-form .search-input:focus,
        #header .search-form input[type="search"]:focus,
        #header .search-form input[name="string"]:focus {
            border: 0 !important;
            box-shadow: none !important;
            outline: none !important;
        }



        /* ======================================================
           GREEN SEARCH BUTTON
           ====================================================== */

        #header .search-form button[type="submit"],
        #header .search-form .search-button {
            position: relative !important;

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

            flex: 0 0 54px !important;

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

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

            background: var(--color-primary) !important;

            border: 0 !important;
            border-radius: 0 999px 999px 0 !important;

            box-shadow: none !important;

            cursor: pointer !important;

            /*
             * Hide "Hľadať".
             */
            font-size: 0 !important;
            color: transparent !important;
        }



        /* ======================================================
           MAGNIFIER INSIDE GREEN BUTTON
           ====================================================== */

        /*
         * Magnifier circle
         */
        #header .search-form button[type="submit"]::before,
        #header .search-form .search-button::before {
            content: "" !important;

            display: block !important;

            position: absolute !important;

            top: 50% !important;
            left: 50% !important;

            width: 14px !important;
            height: 14px !important;

            margin: 0 !important;

            background: transparent !important;

            border: 2px solid #fff !important;
            border-radius: 50% !important;

            box-sizing: border-box !important;

            transform:
                translate(-60%, -60%) !important;
        }


        /*
         * Magnifier handle
         */
        #header .search-form button[type="submit"]::after,
        #header .search-form .search-button::after {
            content: "" !important;

            display: block !important;

            position: absolute !important;

            top: 57% !important;
            left: 57% !important;

            width: 7px !important;
            height: 2px !important;

            margin: 0 !important;

            background: #fff !important;

            border: 0 !important;
            border-radius: 2px !important;

            transform: rotate(45deg) !important;
            transform-origin: left center !important;
        }


        /*
         * Hide any original icon inside the submit button.
         */
        #header .search-form button[type="submit"] svg,
        #header .search-form button[type="submit"] i,
        #header .search-form .search-button svg,
        #header .search-form .search-button i {
            display: none !important;
        }


        /*
         * Button hover
         */
        #header .search-form button[type="submit"]:hover,
        #header .search-form .search-button:hover {
            background: var(--color-primary) !important;
            opacity: 0.9;
        }
    }



    /* ==========================================================
       NAVIGATION COLORS + ARROWS
       ========================================================== */

    @media (min-width: 768px) {

        /*
         * Main navigation link color.
         *
         * menu-item-1241 keeps its existing special color.
         */
        #navigation
        .navigation-in
        > .menu-level-1
        > li:not(.menu-item-1241)
        > a
        > b {
            color: var(--color-primary) !important;
        }


        /*
         * Navigation link color on hover.
         */
        #navigation
        .navigation-in
        > .menu-level-1
        > li:not(.menu-item-1241):hover
        > a
        > b {
            color: #fff !important;
        }


        /*
         * Navigation arrow
         */
        #navigation
        .menu-level-1
        > li
        > a
        > .wt-static-menu-arrow {
            position: relative;
            display: inline-block;

            width: 10px;
            height: 10px;
            margin-left: 7px;

            flex: 0 0 10px;
            pointer-events: none;
        }


        #navigation
        .menu-level-1
        > li
        > a
        > .wt-static-menu-arrow::before {
            content: "";

            position: absolute;

            top: 50%;
            left: 50%;

            width: 6px;
            height: 6px;

            border-right: 1px solid currentColor;
            border-bottom: 1px solid currentColor;

            transform:
                translate(-50%, -50%)
                rotate(45deg);

            transform-origin: center;
        }


        #navigation
        .menu-level-1
        > li:hover
        > a
        > .wt-static-menu-arrow::before {
            animation: wt-arrow-rotate 0.4s ease;
            border-color: #fff;
        }
    }



    /* ==========================================================
       EXISTING HAMBURGER + FIRST ITEMS
       ========================================================== */

    @media (min-width: 768px) {

        .menu-helper.wt-hamburger-menu {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }


        .menu-helper
        > ul
        > .wt-after-nine,

        .menu-helper
        > .menu-level-2
        > .wt-after-nine {
            display: list-item !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
    }



    /* ==========================================================
       HAMBURGER DROPDOWN SHADOW
       ========================================================== */

    @media (min-width: 768px) {

        .menu-helper > .menu-level-1 {
            box-shadow:
                0 5px 5px -1px rgba(0, 0, 0, 0.31);

            border: none !important;
        }
    }



    /* ==========================================================
       MAIN MENU / HAMBURGER VISIBILITY
       ========================================================== */

    @media (min-width: 768px) {

        #navigation
        > .navigation-in
        > .menu-level-1
        > li:nth-child(n + 11) {
            display: none !important;
        }


        #navigation
        > .navigation-in
        > .menu-level-1
        > li.wt-hide-main-item {
            display: none !important;
        }


        .navigation-wrapper
        > .menu-helper
        > .menu-level-1
        > li.wt-hide-helper-item {
            display: none !important;
        }


        .navigation-wrapper
        > .menu-helper
        > .menu-level-1
        > li.wt-show-helper-item {
            display: list-item !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
    }



    /* ==========================================================
       HIDE UNFINISHED DESKTOP NAVIGATION
       ========================================================== */

    @media (min-width: 768px) {

        html:not(.wt-menu-ready)
        &
        .navigation-wrapper.js-navigation-container {
            visibility: hidden !important;
        }


        html.wt-menu-ready
        &
        .navigation-wrapper.js-navigation-container {
            visibility: visible !important;
        }
    }



    /* ==========================================================
       MAIN MENU STRETCHED
       ========================================================== */

    @media (min-width: 768px) {

        .fitted
        .navigation-in
        > ul.menu-level-1 {
            justify-content: space-between !important;
        }
    }

}



/* ==========================================================
   NAVIGATION ARROW ANIMATION
   ========================================================== */

@keyframes wt-arrow-rotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(45deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(405deg);
    }    
}