/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/header/commerce-layout-header.css?{ versionKey }"/> */


commerce_builder-layout-header {
    --ecomm-header-desktop-logo-width: 160px;
    --ecomm-header-tablet-logo-width: 120px;
    --ecomm-header-desktop-search-width: 280px;
    --ecomm-header-desktop-badge-icons-width: 220px;
    --ecomm-header-desktop-badge-icons-with-login-width: 186px;
    --ecomm-header-tablet-badge-icons-width: 96px;
    --ecomm-header-tablet-badge-icons-with-login-width: 166px;
}


/* HEADER WRAPPER */

commerce_builder-layout-header header {
    padding: 1.5rem var(--ecomm-spacing-padding-right) 1.5rem var(--ecomm-spacing-padding-left) !important;
    border-bottom: 1px solid var(--ecomm-color-gray-06);
    background-color: var(--ecomm-color-white-01, #FFFFFF) !important;
}

@media (max-width: 1023.98px) {

    commerce_builder-layout-header header {
        padding: 1.5rem var(--ecomm-spacing-tablet-padding-right) 0.25rem var(--ecomm-spacing-tablet-padding-left) !important;
    }

}

@media (max-width: 767.98px) {

    commerce_builder-layout-header header {
        padding: 1rem var(--ecomm-spacing-mobile-padding-right) 1rem var(--ecomm-spacing-mobile-padding-left) !important;
    }

}


/* HEADER CONTAINER */

commerce_builder-layout-header header .header-content {
    padding: 0 !important;
}

commerce_builder-layout-header header .header-content > [class*="layout-header-"] {
    justify-content: space-between;
    grid-row-gap: 0.75rem;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1023.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] {
        grid-row-gap: 0.5rem;
    }

}

@media (max-width: 767.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] {
        grid-row-gap: 1rem;
    }

}


/* HEADER LOGO */

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-logo {
    width: var(--ecomm-header-desktop-logo-width);
    padding: 0 !important;
    order: 1;
}

@media (max-width: 1023.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-logo {
        width: var(--ecomm-header-tablet-logo-width);
        order: 1;
    }

}

@media (max-width: 767.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-logo {
        order: 2;
    }

}


/* HEADER NAVIGATION */

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-navigation {
    width: calc(100% - var(--ecomm-header-desktop-logo-width) - var(--ecomm-header-desktop-search-width) - var(--ecomm-header-desktop-badge-icons-width));
    padding: 0 !important;
    order: 2;
}

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-navigation commerce-drilldown-navigation > div {
    padding: 0 1rem 0 70px !important;
}

commerce_builder-layout-header header .header-content > [class*="layout-header-"]:has(a.login-link) .header-navigation {
    width: calc(100% - var(--ecomm-header-desktop-logo-width) - var(--ecomm-header-desktop-search-width) - var(--ecomm-header-desktop-badge-icons-with-login-width));
    padding: 0 !important;
}

commerce_builder-layout-header header .header-content > [class*="layout-header-"]:has(a.login-link) .header-navigation commerce-drilldown-navigation > div {
    padding: 0 1.5rem 0 70px !important;
}

@media (max-width: 1023.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-navigation,
    commerce_builder-layout-header header .header-content > [class*="layout-header-"]:has(a.login-link) .header-navigation {
        width: 100%;
        order: 4;
    }

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-navigation commerce-drilldown-navigation > div,
    commerce_builder-layout-header header .header-content > [class*="layout-header-"]:has(a.login-link) .header-navigation commerce-drilldown-navigation > div {
        padding: 0 !important;
    }

}

@media (max-width: 767.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-navigation,
    commerce_builder-layout-header header .header-content > [class*="layout-header-"]:has(a.login-link) .header-navigation {
        width: 2.5rem;
        padding: 0 1rem 0 0 !important;
        order: 1;
    }

}


/* HEADER SEARCH */

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-search {
    width: var(--ecomm-header-desktop-search-width);
    padding: 0 !important;
    order: 3;
}

@media (max-width: 1023.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-search {
        width: calc(100% - var(--ecomm-header-tablet-logo-width) - var(--ecomm-header-tablet-badge-icons-width));
        padding: 0 1rem 0 1.5rem !important;
        order: 2;
    }

    commerce_builder-layout-header header .header-content > [class*="layout-header-"]:has(a.login-link) .header-search {
        width: calc(100% - var(--ecomm-header-tablet-logo-width) - var(--ecomm-header-tablet-badge-icons-with-login-width));
    }

}

@media (max-width: 767.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-search,
    commerce_builder-layout-header header .header-content > [class*="layout-header-"]:has(a.login-link) .header-search {
        width: 100%;
        padding: 0 !important;
        order: 4;
    }

}


/* HEADER BADGE ICONS */

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-badge-icons {
    position: relative !important;
    width: var(--ecomm-header-desktop-badge-icons-width);
    padding: 0 0 0 1.5rem !important;
    order: 4;
}

commerce_builder-layout-header header .header-content > [class*="layout-header-"]:has(a.login-link) .header-badge-icons {
    width: var(--ecomm-header-desktop-badge-icons-with-login-width);
}

@media (max-width: 1023.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-badge-icons {
        width: var(--ecomm-header-tablet-badge-icons-width);
        padding: 0 !important;
        order: 3;
    }

    commerce_builder-layout-header header .header-content > [class*="layout-header-"]:has(a.login-link) .header-badge-icons {
        width: var(--ecomm-header-tablet-badge-icons-with-login-width);
    }

}

@media (max-width: 767.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-badge-icons,
    commerce_builder-layout-header header .header-content > [class*="layout-header-"]:has(a.login-link)  .header-badge-icons {
        width: calc(100% - 40px - 120px);
        padding-left: 1rem;
        order: 3;
    }

}


/* HEADER ACCOUNT */

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-badge-icons .header-account {
    margin-right: 1rem;
    padding: 0 !important;
}

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-badge-icons:has(a.login-link) .header-account {
    margin-right: 1.5rem;
}

@media (max-width: 767.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-badge-icons .header-account,
    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-badge-icons:has(a.login-link) .header-account {
        margin-right: 1rem;
    }

}

@media (max-width: 379.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-badge-icons .header-account,
    commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-badge-icons:has(a.login-link) .header-account {
        margin-right: 0.25rem;
    }

}