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



      @media (min-width: 768px) {
          
          
          .call-text {

    padding-top: 3px  !important;
}
    
    /* Cart font size */
    
    .cart-price[data-testid="headerCartPrice"] {
        display: inline-block !important;

        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: left !important;

        /* Keep "Prázdny košík" on one line */
        white-space: nowrap !important;

        /* Give the text more room */
        width: auto !important;
        max-width: 90px !important;
    }
          .navigation-buttons>a[data-target=cart] i {

    bottom: 1px !important;
              }

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

  
        
        
/* ==================================================
   SPECIAL MENU ITEM - menu-item-1427
   MAIN DESKTOP NAVIGATION
   ================================================== */

@media (min-width: 768px) {

    /* Main visible desktop navigation – normal state */
    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a {
        color: var(--color-secondary) !important;
        background-color: #ececd0 !important;
    }


    /* Main visible desktop navigation – hover / focus state */
    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:hover,

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:focus {
        color: #ffffff !important;
        background-color: var(--color-primary) !important;
    }


    /* Menu item itself */
    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 {
        padding-left: 0 !important;
        background: none !important;
    }


    /* Link sizing / spacing */
    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a,

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:hover,

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:focus,

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:active {
        position: relative !important;
        box-sizing: border-box !important;

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

        /*
         * Space for the new % icon.
         */
        padding-left: 40px !important;
        padding-right: var(--wt-menu-padding, 20px) !important;

        white-space: nowrap !important;

        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: "Favoriten";

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




/* ==================================================
   AKCE / SLEVY MENU ICON
   menu-item-1427
   ================================================== */


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

@media (min-width: 768px) {

    /* ==================================================
       MAIN VISIBLE DESKTOP NAVIGATION
       ================================================== */

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a,

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:hover,

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:focus,

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:active {
        position: relative !important;

        padding-left: 40px !important;
        padding-right: var(--wt-menu-padding, 20px) !important;

        margin: 0 !important;

        box-sizing: border-box !important;
        white-space: nowrap !important;

        transition: none !important;

        color: var(--color-secondary) !important;
    }


    /* Normal menu background */
    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a {
        background-color: #ececd0 !important;
    }


    /* Hover / focus */
    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:hover,

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:focus {
        background-color: var(--color-primary) !important;
        color: #ffffff !important;
    }



    /* ==================================================
       REMOVE OLD SVG / OLD ::BEFORE
       ================================================== */

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a::before,

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:hover::before,

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427 > a:focus::before {
        content: none !important;

        display: none !important;

        width: 0 !important;
        height: 0 !important;

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

        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: 0 !important;
        box-shadow: none !important;
    }



    /* ==================================================
       % ICON
       ================================================== */

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

        position: absolute !important;

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

        transform: translateY(-50%) !important;

        display: block !important;

        width: auto !important;
        height: auto !important;

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

        font-family: inherit !important;
        font-size: 17px !important;
        font-style: normal !important;
        font-weight: 700 !important;
        line-height: 1 !important;

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

        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: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        pointer-events: none !important;

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



    /* ==================================================
       % ICON HOVER
       ================================================== */

    .navigation-wrapper #navigation
    .navigation-in > .menu-level-1
    > li.menu-item-1427
    > a:hover
    > b::before,

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

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        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: 0 !important;
        box-shadow: none !important;
    }



    /* ==================================================
       HAMBURGER / OVERFLOW MENU
       ================================================== */

    .menu-helper li.menu-item-1427,
    .menu-helper li.menu-item-1427:hover {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }


    .menu-helper li.menu-item-1427 > a,
    .menu-helper li.menu-item-1427 > a:hover,
    .menu-helper li.menu-item-1427 > a:focus {
        position: relative !important;

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

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

        color: var(
            --colors-foregrounds-content-primary
        ) !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

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


    /* Remove original hamburger icon */
    .menu-helper li.menu-item-1427 > a::before,
    .menu-helper li.menu-item-1427 > a:hover::before,
    .menu-helper li.menu-item-1427 > a:focus::before {
        content: none !important;

        display: none !important;

        width: 0 !important;
        height: 0 !important;

        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: 0 !important;
        box-shadow: none !important;
    }


    /* Hamburger % */
    .menu-helper
    li.menu-item-1427
    > a
    > b::before {
        content: "%" !important;

        position: absolute !important;

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

        transform: translateY(-50%) !important;

        display: block !important;

        width: auto !important;
        height: auto !important;

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

        font-family: inherit !important;
        font-size: 17px !important;
        font-style: normal !important;
        font-weight: 700 !important;
        line-height: 1 !important;

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

        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: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        pointer-events: none !important;

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


    /* Hamburger hover */
    .menu-helper
    li.menu-item-1427
    > a:hover
    > b::before,

    .menu-helper
    li.menu-item-1427
    > a:focus
    > b::before {
        color: var(--color-primary) !important;
        -webkit-text-fill-color: var(--color-primary) !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

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

}



/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 767px) {

    li.menu-item-1427,
    li.menu-item-1427:hover {
        padding-left: 0 !important;
        background: transparent !important;
    }


    li.menu-item-1427 > a,
    li.menu-item-1427 > a:hover,
    li.menu-item-1427 > a:focus {
        background: transparent !important;

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


    li.menu-item-1427 > a::before,
    li.menu-item-1427 > a > b::before {
        display: none !important;
        content: none !important;
    }

}
        
        
/* Menu item with "PAW" icon */
li.menu-item-727 {
    background: url(https://www.cannadorra.hu/user/documents/upload/img/icon-paw-3.png) no-repeat;
    padding-left: 20px;
    background-position: left;
    background-position-x: 10px;
}

li.menu-item-727:hover {
    background: url(https://www.cannadorra.hu/user/documents/upload/img/icon-paw-2.png) no-repeat;
    background-color: var(--color-primary)!important;
    padding-left: 20px;
    background-position: left;
    background-position-x: 10px;
}

        /*
         * 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-1427 keeps its existing special color.
         */
        #navigation
        .navigation-in
        > .menu-level-1
        > li:not(.menu-item-1427)
        > a
        > b {
            color: var(--color-primary) !important;
        }


        /*
         * Navigation link color on hover.
         */
        #navigation
        .navigation-in
        > .menu-level-1
        > li:not(.menu-item-1427):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);
    }    
}