/* Header Marketplace*/

.page-header {
    border-bottom: 1px solid var(--color-mid-gray);
    margin-bottom: 2rem;
    background: var(--color-header-background);
}

.cms-index-index .page-header {
    margin-bottom: 0;
}

.page-header .widget.block {
    margin: 0;
}

.header.content {
    padding: 2rem;
    display: grid;
    grid-template-columns: [main-start] 3fr [nav-start] 5fr [nav-end] 1fr [main-end];
    max-width: var(--width-content-max);
    align-items: center;
}

.header.content .logo {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: fit-content;
    margin: 0 auto 0 0;
    padding-left: 3rem;
}

.header.content .nav-sections {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    display: flex;
    justify-content: flex-start;
}

.minicart-wrapper .action.showcart:before {
    color: var(--color-minicart-icon);
}

.minicart-wrapper .action.showcart:active:before,
.minicart-wrapper .action.showcart:hover:before {
    color: var(--color-minicart-icon-hover);
}

.nav-open .nav-sections-items {
    z-index: 99;
    background: #fff;
    width: 100%;
}

.navigation .level0.active > a:not(.ui-state-active), .navigation .level0.has-active > a:not(.ui-state-active) {
    border-color: var(--color-branding-secondary);
}

.header.content .minicart-wrapper {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    justify-self: end;
    float: none;
    margin: 0;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
}

.menu-anchor {
    position: relative;
    top: -10rem;
}

.navigation .parent .level-top:after {
    top: -8px;
}

.navigation .level0 > .level-top {
    color: var(--color-branding-primary);
    background-color: #fff;
}

span.action.nav-toggle {
    top: 25%;
}

.section-item-title:nth-child(3) {
    display: none;
}

.section-item-title.nav-sections-item-title {
    background: unset;
    width: auto;
    padding-left: 2rem;
    font-size: var(--text-h2-size);
    font-weight: var(--font-weight-bold);
}

/* MAX WIDTH */

@media only screen and (max-width: 390px) {


    .nav-sections {
        left: calc(-1 * (100% - 38px));
    }

} 
 
/* MIN WIDTH */

@media only screen and (min-width: 768px) {

    .header.content .logo {
        display: flex;
        justify-content: left;
        align-items: center;
        padding-left: 0;
        grid-column-start: main-start;
        grid-column-end: nav-start;
        padding-left: 0;
    }
    
    .section-items.nav-sections-items {
        width: 100%;
    }

    .header.content .nav-sections {
        display: flex;
        margin-bottom: 0;
    }

    .topnav a {
        font-size: var(--text-normal-size);
    }

    .navigation .level0.active > .level-top {
        background: var(--color-light-gray);
    }

    .header.content .minicart-wrapper {
        grid-column-start: nav-end;
        grid-column-end: main-end;
    }

    .navigation .level0.active > .level-top, .navigation .level0.has-active > .level-top {
        border: unset;
    }

    .navigation .level0.parent>.level-top>.ui-menu-icon:after {
        font-size: 2.5rem;
        font-weight: var(--font-weight-bold);
    }

    ul.ui-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0;
        align-items: center;
        margin: 0;
        background: #fff;
    }

    .navigation li.level0 {
        border-top: none;
        flex-shrink: 0;
        flex-grow: 0;
        white-space: nowrap;
        min-width: 8rem;
    }

    .navbar-loaded {
        visibility: visible;
        opacity: 1; 
        transition: opacity 0.2s ease-in-out;
    }

    .header.content {
        padding: 0 0 2rem 0;
        display: grid;
        grid-template-columns: [main-start] 10fr [nav-start] 4fr [nav-end] 1fr [main-end];
        align-items: center;
        gap: 2rem;
        margin-top: 2rem;
        width: calc(100% - 4rem);
        max-width: var(--width-content-max);
    }

    
    .header.content .nav-sections {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 5;
        width: auto;
        border-top: 1px solid var(--color-mid-gray);
        border-bottom: 1px solid var(--color-mid-gray);
        background: unset;
    }

    .page-header {
        border-bottom: unset;
        margin-bottom: 0;
    }

    .navigation .level0 > .level-top {
        color: var(--color-branding-primary);
        line-height: calc(2 * (var(--spacing__vertical--3)));
    }

    .navigation .level0 {
        margin: 0;
    }
}

@media only screen and (min-width: 1280px) {

    .header.content {
        padding: 2rem 0;
        max-width: (--width-content-max-calc);
    }
}