/* ------------------------------ */
/* --------- Navigation --------- */
/* ------------------------------ */

.shop_header__nav .site_nav__main > li {
    position: relative;
}

.nav__sub .product {
    position: relative;
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
}

.nav__sub .product span {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--font-size-2);
    font-weight: bold;
}

.nav__sub .product__container {
    position: relative;
}

/* Language Switcher */
.shop_links__language_switcher > .wpml-ls {
    position: absolute;
    background-color: var(--color-white);
    padding: var(--spacing-4);
    box-shadow: var(--box-shadow-2);

    transform: translateY(5px);
    opacity: 0;
    visibility: hidden;

    -webkit-transition: transform var(--transition-1), opacity var(--transition-1), visibility var(--transition-1);
    -o-transition: transform var(--transition-1), opacity var(--transition-1), visibility var(--transition-1);
    transition: transform var(--transition-1), opacity var(--transition-1), visibility var(--transition-1);
}

.no-touchevents .shop_links__language_switcher:hover > a + .wpml-ls,
.touchevents .shop_links__language_switcher > .wpml-ls.is-active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}


.shop_links__language_switcher > .wpml-ls li + li {
    margin-top: var(--spacing-2);
}

.shop_links__language_switcher > .wpml-ls a {
    position: relative;
    display: inline-block;
    font-size: var(--font-size-2);
    color: var(--color-black);
    padding-left: 30px;
}

.shop_links__language_switcher > .wpml-ls a img {
    position: absolute;
    top: 0;
    left: 0;
}

.shop_links__language_switcher > a > span, .shop_links__language_switcher svg.icon--arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.shop_links__language_switcher svg.icon--arrow {
    right: 0;
    stroke: var(--color-white);
    stroke-width: 3px;
    margin-left: 0 !important;
}

.shop_links__language_switcher > a > span {
    left: 0;
    border-radius: 50%;
    line-height: 1;
    overflow: hidden;
}

.shop_links__language_switcher > a > span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

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

    .shop_header__nav {
        padding-left: var(--logo-width);
    }

    .site_nav__main > li {
        display: inline-block;
    }

    .site_nav__main > li > a {
        position: relative;
        display: inline-block;
        font-size: var(--font-size-copy);
        color: var(--color-white);
    }

    .site_nav__main > li > a > svg {
        display: inline-block;
        position: relative;
        top: -1px;
        stroke: var(--color-white);
        stroke-width: 3px;
    }

    .site_nav__main > li > .nav__sub {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background-color: var(--color-white);
        -webkit-box-shadow: var(--box-shadow);
                box-shadow: var(--box-shadow);

        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);

        -webkit-transition: all var(--transition-2);
        -o-transition: all var(--transition-2);
        transition: all var(--transition-2);

        opacity: 0;
        visibility: hidden;
        z-index: -1;
        pointer-events: none;
    }

    body.admin-bar .site_nav__main > li > .nav__sub {
        top: calc(var(--header-height) + 32px);
    }

    .site_nav__main > li.is-active > .nav__sub { 
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);

        opacity: 1;
        visibility: visible;
        z-index: 10;
        pointer-events: auto;
    }

    .site_nav__main .nav__sub .nav__sub__navigation {
        padding-left: var(--logo-width);
    }

    .site_nav__main .nav__sub .nav__sub__navigation > div:not(.navigation__sub--promo) {
        padding-right: var(--spacing-6); 
    }

    .site_nav__main .nav__sub .navigation__sub--all {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    .site_nav__main .nav__sub .navigation__sub--all + .navigation__sub--categories {
        -ms-flex-preferred-size: 45%;
        flex-basis: 45%;
        max-width: 45%;
    }

    .site_nav__main .nav__sub .navigation__sub--promo {
        -ms-flex-preferred-size: 30%;
        flex-basis: 30%;
        max-width: 30%;
    }

    .site_nav__main .nav__sub li {
        display: block;
    }

    .site_nav__main .nav__sub li a {
        position: relative;
        display: inline-block;
        color: var(--color-black);
        -webkit-transition: padding-left 500ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
        -o-transition: padding-left 500ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
        transition: padding-left 500ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
    }

    .no-touchevents .site_nav__main .nav__sub li:not(.nav__item--active) a:hover {
        padding-left: var(--spacing-3);
    }

    .site_nav__main .nav__sub .nav__item--active a {
        font-weight: bold;
    }

    .nav__sub .product__container img {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        -webkit-transition: transform 5s cubic-bezier(.19,1,.22,1);
        -o-transition: transform 5s cubic-bezier(.19,1,.22,1);
        transition: transform 5s cubic-bezier(.19,1,.22,1);
    }

    .no-touchevents .nav__sub .product__container:hover img {
        -webkit-transform: scale3d(1.05, 1.05, 1);
                transform: scale3d(1.05, 1.05, 1);
    }

    .site_nav__main > li:not(.is-active) > .nav__sub .product__container a.full {
        pointer-events: none !important;
    }

    .product_row > div {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }
    
    .shop_header__active_line {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: var(--color-warning);
        -webkit-transform: scaleX(0);
            -ms-transform: scaleX(0);
                transform: scaleX(0);
        -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
                transform-origin: 0 0;
        z-index: 20;
        -webkit-transition: .5s all .1s;
        -o-transition: .5s all .1s;
        transition: .5s all .1s;
    }

}


@media all and (min-width: 1240px) {

    .site_nav__main > li {
        margin-left: var(--spacing-6);
    }

    .site_nav__main > li > a {
        padding: 27px 0 26px;
    }

    .site_nav__main > li > a > svg, .shop_links__language_switcher svg.icon--arrow {
        width: 10px;
        height: 10px;
        margin-left: 10px;
    }

    .shop_links__language_switcher > a {
        padding-left: 40px;
    }

    .shop_links__language_switcher > a > span {
        width: 22px;
        height: 22px;
    }

    .shop_links__language_switcher > .wpml-ls {
        left: -15px;
    }

    .site_nav__main > li > .nav__sub {
        padding: var(--spacing-7) 0;
    }

    .site_nav__main .nav__sub .nav__sub__navigation {
        margin-left: var(--spacing-6);
    }

    .site_nav__main .nav__sub .navigation__sub--categories {
        -ms-flex-preferred-size: 38%;
        flex-basis: 38%;
        max-width: 38%;
    }

    .site_nav__main .nav__sub .navigation__sub.navigation__sub--big {
        -ms-flex-preferred-size: 62%;
        flex-basis: 62%;
        max-width: 62%;
    }

    .site_nav__main .nav__sub li a {
        padding: var(--spacing-2) 0;
    }

    .product_row > div:first-child {
        padding-right: var(--spacing-3);
    }

    .product_row > div:last-child {
        padding-left: var(--spacing-3);
    }

}


@media all and (max-width: 1239.98px) {

    .shop_links__language_switcher svg.icon--arrow {
        width: 10px;
        height: 10px;
    }

    .shop_links__language_switcher > a {
        padding-left: 38px;
    }

    .shop_links__language_switcher > a > span, .shop_links__language_switcher > .wpml-ls a img {
        width: 21px;
        height: 21px;
    }

     .shop_links__language_switcher > .wpml-ls {
        left: -13px;
    }

}


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

    .site_nav__main > li {
        margin-left: 22px;
    }

    .site_nav__main > li > a {
        padding: 22px 0;
    }

    .site_nav__main > li > a > svg, .shop_links__language_switcher svg.icon--arrow {
        width: 10px;
        height: 10px;
        margin-left: 8px;
    }

    .site_nav__main > li > .nav__sub {
        padding: var(--spacing-6-6) 0;
    }

    .site_nav__main .nav__sub .nav__sub__navigation {
        margin-left: 22px;
    }

    .site_nav__main .nav__sub .navigation__sub--categories {
        -ms-flex-preferred-size: 32%;
        flex-basis: 32%;
        max-width: 32%;
    }

    .site_nav__main .nav__sub .navigation__sub.navigation__sub--big {
        -ms-flex-preferred-size: 68%;
        flex-basis: 68%;
        max-width: 68%;
    }

    .site_nav__main .nav__sub li a {
        padding: var(--spacing-1) 0;
    }

    .product_row > div:first-child {
        padding-right: var(--spacing-2);
    }

    .product_row > div:last-child {
        padding-left: var(--spacing-2);
    }

}


@media all and (max-width: 991.98px) {

    /* Hamburger */
    .site_nav__icon {
        cursor: pointer;
        height: var(--header-height);
        width: calc(24px + 2 * var(--spacing-3));
    }

    .site_nav__icon .site_nav__icon__hamburger {
        position: absolute;
        top: 50%;
        left: var(--spacing-3);
        height: 22px;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }

    /* Navigation */
    .shop_nav__inside {
        padding: 0;
        width: 100%;
    }   

    .shop_header__nav .site_nav__main li, .shop_header__nav .site_nav__main li:not(.nav__item--social) a {
        display: block;
    }

    .shop_header__nav .site_nav__main li.nav__item--social {
        padding-left: calc(var(--spacing-6) - var(--spacing-3));
        border-bottom: 0;
    }

    .shop_header__nav .site_nav__main li.nav__item--social a {
        display: inline-block;
        padding-right: var(--spacing-3);
        padding-left: var(--spacing-3);
    }

    .shop_header__nav .site_nav__main > li, .nav__sub__title {
        border-bottom: 1px solid var(--color-grey);
    }

    .shop_header__nav .site_nav__main > li > a, .nav__sub__title, .account_headline {
        font-size: var(--font-size-4);
        padding: var(--spacing-3) var(--spacing-7) var(--spacing-3) 15px;
    }

    .shop_header__nav .site_nav__main > li.nav__item--active > a, .shop_header__nav .site_nav__main > li.nav__item--current_ancestor > a {
        font-weight: bold;
    }

    .shop_header__nav .site_nav__main > li > a svg {
        position: absolute;
        top: 18px;
        right: var(--spacing-3);
        width: 18px;
        height: 18px;
        stroke: var(--color-black);
        stroke-width: 2px;
        -webkit-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
                transform: rotate(-90deg);
    }

    .shop_header__nav .site_nav__main > li.nav__item--small > a {
        font-size: var(--font-size-3);
    }

    .shop_header__nav .site_nav__main > li.nav__item--has-children > a::before {
        top: 50%;
        right: var(--spacing-6);
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }

    .shop_header__nav .site_nav__main > li > .nav__sub {
        position: fixed;
        z-index: 10;
        top: 43px;
        height: calc(var(--app-height) - 43px);
        background-color: var(--color-white);
        -webkit-transition: all .45s cubic-bezier(.3,0,.15,1);
        -o-transition: all .45s cubic-bezier(.3,0,.15,1);
        transition: all .45s cubic-bezier(.3,0,.15,1);
    }

    .shop_header__nav .site_nav__main > li > .nav__sub.is-active {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        right: 0;
    }

    .shop_header__nav .site_nav__main > li > .nav__sub .nav__sub__navigation {
        display: block;
        margin: 0;
    }

    .nav__sub__inside  {
        padding: 0;
    }

    .shop_header__nav .site_nav__main > li > .nav__sub .nav__sub__navigation li a, .account_dropdown__content ul > li > a {
        padding: var(--spacing-1) 15px;
    }

    .shop_header__nav .site_nav__main > li > .nav__sub .nav__sub__navigation .navigation__sub--all li:first-child a,
    .shop_header__nav .site_nav__main > li > .nav__sub .nav__sub__navigation .navigation__sub--categories li:first-child a {
        padding-top: 15px;
    }

    .shop_header__nav .site_nav__main > li > .nav__sub .nav__sub__navigation .navigation__sub--all + .navigation__sub--categories li:first-child a {
        padding-top: var(--spacing-1);
    }

    .shop_header__nav .site_nav__main > li > .nav__sub .nav__sub__navigation .navigation__sub--categories li:last-child a {
        padding-bottom: 15px;
    }

    .shop_header__nav .site_nav__main > li > .nav__sub .nav__sub__navigation li > span {
        display: block;
        margin-top: var(--spacing-6);
        padding: var(--spacing-1) 15px;
        font-weight: bold;
    }

    .shop_header__nav .site_nav__main > li > .nav__sub .nav__sub__navigation li.nav__item--active a, .account_dropdown__content ul li.current a {
        font-weight: bold;
    }

    .shop_header__nav .site_nav__main > li > .nav__sub .nav__sub__navigation .navigation__sub--promo {
        margin-top: var(--spacing-1);
        margin-bottom: var(--spacing-5);
        padding-left: 15px;
        padding-right: 15px;
    }

    .nav__sub .product + .product {
        margin-top: var(--spacing-3);
    }

    /* Social */
    .site_nav__social {
        margin-top: 10px;
        padding: 0 8px;
    }

    .site_nav__social > a {
        display: inline-block;
        padding: 8px;
        line-height: 0;
    }

    .site_nav__social .icon--social:not(.icon--social-youtube) {
        width: 23px;
        height: 23px;
    }

    .site_nav__social .icon--social-youtube {
        width: 24px;
        height: 16px;
    }

}