/* Header Marketplace*/
/* Requires variables_1.0.css */  

.page-header {
    border-bottom: unset;
    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;
}

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

.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;
    width: 80%;
    display: flex;
    justify-content: flex-start;

}


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

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

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

.nav-open .header.content .nav-sections {
    z-index: 99;
}

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


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

.nav-sections,
.navigation {
    background: unset;
}

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

.navigation .level0 > .level-top {
    color: var(--color-branding-secondary);
}

/* MAX WIDTH */

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

    .header.content .logo {
        padding-left: 3rem;
    }

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

    .catalog-product-view .box-tocart .fieldset {
        display: flex;
        flex-direction: column;
    }

    

} 
 
/* MIN WIDTH */

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

    .header.content .logo {
        display: flex;
        justify-content: left;
        align-items: center;
    }
    

    .header.content .nav-sections {
        display: flex;
        justify-content: flex-end;
        min-width: 568px;
        width: 100%;
    }

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

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

    .header.content .logo {
        grid-column-start: main-start;
        grid-column-end: nav-start;
        padding-left: 0;
    }

    .sections.nav-sections {
        margin-bottom: 0;
    }

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

    ul.ui-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
    }

}

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

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

/* Top ribbon */

/* 
<div class="top-ribbon-wrapper">
    <div class="top-ribbon-content">
        <div class="left">Free shipping on all order over $49</div>
        <div class="right">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="19"}}</div>
    </div>
</div> 
*/

.top-ribbon-wrapper {
    background: var(--color-branding-primary);
}

.top-ribbon-content {
    padding: 1rem 2rem;
    display: flex;
    max-width: var(--width-content-max);
    color: #ffffff;
    fill: #ffffff;
    margin: auto;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
}

.top-ribbon-content .right {
    display: none;
}

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

    .top-ribbon-content .right {
        display: block;
    }

    .top-ribbon-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}