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

/* HEADER WRAPPER */

commerce_builder-layout-header header {
    padding: 1rem var(--ecomm-spacing-padding-right) 1rem var(--ecomm-spacing-padding-left) !important;
    border-bottom: 1px solid var(--ecomm-color-secondary-01) !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1023.98px) {

    commerce_builder-layout-header header {
        padding: 1rem 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-"] {
    display: grid;
    grid-template-columns: min-content 1fr 280px min-content;
    grid-template-areas:
        "logo menu search profile";
    grid-column-gap: 1.5rem;
    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-template-columns: min-content 1fr min-content;
        grid-template-areas:
            "logo search profile"
            "menu menu menu";
        grid-column-gap: 1rem;
        grid-row-gap: 0.5rem;
    }

}

@media (max-width: 767.98px) {

    commerce_builder-layout-header header .header-content > [class*="layout-header-"] {
        grid-template-columns: min-content min-content 1fr;
        grid-template-areas:
            "menu logo profile"
            "search search search";
        grid-column-gap: 0.5rem;
        grid-row-gap: 1rem;
    }

}

/* HEADER LOGO */

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-logo {
    grid-area: logo;
    width: 100% !important;
    padding: 0 !important;
}

/* HEADER NAVIGATION */

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-navigation {
    grid-area: menu;
    width: 100% !important;
    padding: 0 !important;
}

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-navigation > div {
    width: calc(100% - 1px) !important;
}

/* HEADER SEARCH */

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-search {
    grid-area: search;
    width: 100% !important;
    padding: 0 !important;
}

/* HEADER BADGE ICONS */

commerce_builder-layout-header header .header-content > [class*="layout-header-"] .header-badge-icons {
    grid-area: profile;
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
}

/* 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;
    }

}