.g1-preheader {
    clear: both;
    position: relative;
    z-index: 70;

    margin: 0 auto;

    > .g1-row-background {
        border-bottom: 1px solid transparent;
    }

    .g1-drop {
        display: none;
        float: $right;
        margin-top: 0;
        margin-bottom: 0;
    }

    .g1-drop-toggle {
        color: inherit;
    }

    .g1-drop-toggle-icon {
        width: 20px;
        height: 32px;

        &:before {
            font-size: 16px;
        }
    }

    .g1-socials-items {
        display: none;
        float: $right;
        margin: side-values( 0 0 0 20px );
    }

    .wpml-ls {
        display: none;
    }
}

@media only screen and (min-width: 1025px) {
    .g1-preheader {
        .g1-drop,
        .g1-socials-items,
        .wpml-ls {
            display: block;
        }
    }
}

.g1-header {
    clear: both;
    position: relative;
    z-index: 60;

    margin: 0 auto;

    // So the margin-top of the logo can work
    &:before {
        display: table;
        content: "";
    }

    > .g1-row-inner,
    > .g1-row-inner > .g1-column {
        position: static;
    }

    > .g1-row-background {
        border-bottom: 1px solid transparent;

        @if ( 'minimal' == $stack ) {
            -webkit-backface-visibility: hidden;
            @include box-shadow( 0 0px 60px rgba( 0,0,0, 0.12 ) );
        }
    }

    .g1-drop .g1-socials-item-link { color: $skin_regular_text_color; }
    .g1-drop .g1-socials-item-link:hover { color: $skin_important_text_color; }
}



.g1-sticky-top-wrapper {
    clear: both;
    position: static;
    position: -webkit-sticky;
    position: sticky;
    z-index: 60;
    #{$left}: 0;
    #{$right}: 0;
    top: 0;

    body.admin-bar & {
        top: 32px;
    }
}

@media only screen and (max-width: 601px) {
    body.admin-bar .g1-sticky-top-wrapper{
        top:0px;
    }
}


@import "components.header/id";
.g1-id {
    display: table;
    //  100px = 30px (hamburger) + 20px (hamburger margin-right) + 30px (drop icon) + 20px ( drop icon margin-left)
    max-width: calc(100% - 100px);
}

@if ( 'bunchy' == $stack ) {
    .g1-header .g1-drop-toggle {
        &:before {
            display: block;
            position: absolute;
            z-index: -1;
            #{$left}: 0;
            #{$right}: 0;
            top: 0;
            bottom: 0;

            background-color: currentColor;
            opacity: 0.08333;

            content: "";
        }
    }
}








@media only screen and (min-width: $mobile_breakpoint + 1px) {
    .g1-header {
        .g1-id {
            float: $left;
        }
    }
}

$_bar_height: 50px;

.g1-navbar {
    position: relative;
    z-index: 50;

    @include box-sizing(border-box);
    width: 100%;
    //min-height: 50px;

    & > .g1-row-inner {
        position: static;

        > .g1-column {
            position: static;
        }

        // Clearfix
        &:after {
            display: table;
            clear: both;
            content: "";
        }
    }

    .g1-hamburger {
        float: #{$left};
        margin-#{$right}: 10px;
        padding-top: ($_bar_height - $_hamburger_height) / 2;
        padding-bottom: ($_bar_height - $_hamburger_height) / 2;
    }

    .g1-drop {
        margin-bottom: 0;
        float: $right;
    }

    .g1-drop-toggle {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .g1-drop-toggle-badge {
        top: 6px;
    }

    .g1-socials-items {
        float: $right;
        margin: side-values( 0 0 0 20px );
    }

    .g1-drop .g1-socials-item-link { color: $skin_regular_text_color; }
    .g1-drop .g1-socials-item-link:hover { color: $skin_important_text_color; }

    .g1-quick-nav {
        float: none;
    }
}

.g1-navbar + .g1-header,
.g1-navbar + .g1-sticky-top-wrapper {
    z-index: 40;
}

.snax-button            { @include order(14); }

.g1-drop-the-user       { @include order(10); }

.g1-drop-the-search     { @include order(8); }

.g1-drop-the-socials    { @include order(6); }

.g1-drop-the-cart       { @include order(4); }



.g1-body-inner {

    .g1-primary-nav,
    .g1-secondary-nav {
        display: none;
        float: $left;
        margin-bottom: 0;
    }

    .g1-primary-nav-menu {
        > .menu-item {
            display: inline-block;
            vertical-align: top;

            > a {
                padding: 17px 10px;
                line-height: 16px;
            }
        }
    }

    .g1-secondary-nav {
        display: none;
    }

    .g1-secondary-nav-menu {
        > .menu-item {
            display: inline-block;
            vertical-align: top;

            > a {
                padding: 8px 0;
                margin-#{$right}: 12px;
            }
        }
    }
}

@media only screen and (max-width: $mobile_breakpoint) {
    body.g1-has-mobile-logo {
        .g1-header,
        .g1-navbar {
            .g1-id {
                display: none;
            }
        }
    }
}

@media only screen and (max-width: 960px) {
    .g1-body-inner {
        .g1-quick-nav-long {
            display: none;
        }
    }
}

@media only screen and (min-width: 961px) {
    .g1-navbar {
        .g1-primary-nav {
            display: block;
        }

        .g1-hamburger {
            display: none;
        }
    }
}

.g1-socials {
    position: relative;

    .g1-socials-items {
        display: inline-block;
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 1025px) {
    .g1-body-inner {
        .g1-secondary-nav {
            display: block;
        }
    }
}

@import "components.header/gag";
@import "components.header/smiley";
@import "components.header/hardcore";
@import "components.header/05";
@import "components.header/06";
@import "components.header/07";
@import "components.header/bunchy";

@import "components.header/mobile-02";