/* HEADER */

commerce-layout-header {
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid var(--b2b-color-main-blue, rgb(14, 77, 140));
    background-color: var(--b2b-color-white, rgb(255, 255, 255));
}

commerce-layout-header header {
    width: 100% !important;
    order: 1;
}

commerce-layout-header header.desktop {
    padding-top: 1rem !important;
    padding-left: var(--dxp-s-section-content-spacing-inline-start, 2.5rem) !important;
    padding-bottom: 1rem !important;
    padding-right: var(--dxp-s-section-content-spacing-inline-end, 2.5rem) !important;
}

commerce-layout-header header.tablet {
    padding-top: 1rem !important;
    padding-left: var(--dxp-s-section-content-spacing-inline-start-tablet, 1.5rem) !important;
    padding-bottom: 1rem !important;
    padding-right: var(--dxp-s-section-content-spacing-inline-end-tablet, 1.5rem) !important;
}

commerce-layout-header header.mobile {
    padding-top: 0.8rem !important;
    padding-left: var(--dxp-s-section-content-spacing-inline-start-mobile, 1rem) !important;
    padding-bottom: 0.8rem !important;
    padding-right: var(--dxp-s-section-content-spacing-inline-end-mobile, 1rem) !important;
}

/* PROMO */

commerce-layout-header .promo-banner {
    display: block !important;
    width: 100%;
    padding-top: 1rem !important;
    padding-left: var(--dxp-s-section-content-spacing-inline-start, 2.5rem) !important;
    padding-bottom: 1rem !important;
    padding-right: var(--dxp-s-section-content-spacing-inline-end, 2.5rem) !important;
    order: 2;
    border-top: 1px solid var(--b2b-color-grey-field, rgb(221, 221, 221));
}

@media (max-width: 1023.98px) {

    commerce-layout-header .promo-banner {
        padding-left: var(--dxp-s-section-content-spacing-inline-start-tablet, 1.5rem) !important;
        padding-right: var(--dxp-s-section-content-spacing-inline-end-tablet, 1.5rem) !important;
    }

}

@media (max-width: 767.98px) {

    commerce-layout-header .promo-banner {
        padding: 0 !important;
        border: 0;
    }

}

commerce-layout-header .promo-banner commerce_builder-drilldown-navigation nav {
    width: 100%;
    max-width: var(--dxp-s-section-columns-max-width) !important;
    margin: 0 auto !important;
}

/* HEADER CONTENT */

commerce-layout-header .header-content {
    width: 100%;
    max-width: var(--dxp-s-section-columns-max-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* HEADER LAYOUT */

commerce-layout-header .layout-header-desktop {
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

commerce-layout-header .layout-header-tablet {
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

commerce-layout-header .layout-header-mobile {
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

/* HEADER LOGO */

commerce-layout-header .layout-header-desktop .header-logo {
    width: 300px;
    padding: -200px;
    /* margin-top: -100px; */
    margin-left: -100px;
    /* margin-bottom: -20px; */
    order: 1;
}

commerce-layout-header .layout-header-tablet .header-logo {
    width: 160px;
    padding: 0;
    order: 1;
}

commerce-layout-header .layout-header-mobile .header-logo .logo-anchor > div {
    height: 2.5rem;
}

commerce-layout-header .layout-header-mobile .header-logo {
    width: 130px;
    padding: 0;
    order: 1;
}

/* HEADER NAVIGATION */

commerce-layout-header .layout-header-desktop .header-navigation,
commerce-layout-header .layout-header-tablet .header-navigation {
    display: none !important;
}

commerce-layout-header .layout-header-mobile .header-navigation {
    width: 2.5rem;
}

/* HEADER SEARCH */

commerce-layout-header .layout-header-desktop .header-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    width: calc(100% - 180px - 243px);
    padding: 0 0 0 1rem;
    order: 2;
}

commerce-layout-header .header-search > div,
commerce-layout-header .header-search [data-region-name="searchInput"] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
}

commerce-layout-header .layout-header-tablet .header-search {
    width: calc(100% - 160px - 128px);
    padding: 0 0 0 1rem;
    order: 2;
}

commerce-layout-header .layout-header-tablet .header-search > div,
commerce-layout-header .layout-header-tablet .header-search [data-region-name="searchInput"] {
    justify-content: flex-start;
    flex-direction: row-reverse;
}

commerce-layout-header .layout-header-tablet:has(.login-text) .header-search {
    width: calc(100% - 160px - 216px);
}

commerce-layout-header .layout-header-mobile .header-search {
    width: 100%;
    padding: 0;
    order: 3;
}

commerce-layout-header .layout-header-mobile .header-search > div,
commerce-layout-header .layout-header-mobile .header-search [data-region-name="searchInput"] {
    padding-top: 1rem;
    justify-content: space-between;
    flex-direction: row-reverse;
}

/* HEADER BADGE ICONS */

commerce-layout-header .layout-header-desktop .header-badge-icons {
    width: 220px;
    padding: 0 0 0 2.25rem;
    order: 3;
}

commerce-layout-header .layout-header-desktop .header-badge-icons .header-account + .header-cart,
commerce-layout-header .layout-header-tablet .header-badge-icons .header-account + .header-cart {
    margin-left: 1.5rem;
}

commerce-layout-header .layout-header-mobile .header-badge-icons .header-account + .header-cart {
    margin-left: 0.875rem;
}

commerce-layout-header .layout-header-tablet .header-badge-icons {
    position: relative !important;
    width: 128px;
    height: auto !important;
    padding: 0 0 0 1.5rem;
    order: 3;
}

commerce-layout-header .layout-header-tablet:has(.login-text) .header-badge-icons {
    width: 216px;
}

commerce-layout-header .layout-header-mobile .header-badge-icons {
    position: relative !important;
    width: calc(100% - 40px - 130px);
    padding: 0 0 0 0.875rem;
    order: 2;
}

commerce-layout-header .layout-header-mobile .header-badge-icons .header-account {
    padding: 0;
}

commerce-layout-header .layout-header-mobile .header-badge-icons .header-account + .header-cart {
    margin-left: 0.875rem;
}

/* HEADER CONTACT US */

commerce-layout-header .header-search community_builder-html-editor,
commerce-layout-header .header-search community_builder-html-editor > community_builder-output-rich-text {
    overflow: unset !important;
}

commerce-layout-header .layout-header-desktop .header-search community_builder-html-editor {
    min-width: 125px;
    margin-left: 1.5rem;
}

commerce-layout-header .layout-header-tablet .header-search community_builder-html-editor {
    min-width: 100px;
    margin-left: 1.5rem;
}

commerce-layout-header .layout-header-mobile .header-search community_builder-html-editor {
    min-width: 100px;
    margin-left: 0.875rem;
}

commerce-layout-header .header-search community_builder-html-editor a.slds-button {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem !important;
    text-transform: capitalize;
}

commerce-layout-header .layout-header-tablet .header-search community_builder-html-editor a.slds-button,
commerce-layout-header .layout-header-mobile .header-search community_builder-html-editor a.slds-button {
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
}

commerce-layout-header .header-search community_builder-html-editor a.slds-button:focus,
commerce-layout-header .header-search community_builder-html-editor a.slds-button:active {
    box-shadow: var(--b2b-input-box-shadow-hover);
}

/* COMMERCE BUILDER SEARCH INPUT */

commerce-layout-header .layout-header-desktop commerce_builder-search-input {
    width: 388px;
    margin-left: 2.25rem;
}

@media (max-width: 1069.98px) {

    commerce-layout-header .layout-header-desktop commerce_builder-search-input {
        width: 213px;
    }

}

commerce-layout-header .layout-header-tablet commerce_builder-search-input {
    width: 213px;
}

commerce-layout-header .layout-header-mobile commerce_builder-search-input {
    width: 100%;
    max-width: 100%;
}

commerce_builder-search-input .input-wrapper,
commerce_builder-search-input .input-container {
    height: 2.5rem !important;
}

commerce_builder-search-input .input-wrapper {
    transition: box-shadow 0.1s;
}

commerce_builder-search-input .input-wrapper.active {
    box-shadow: var(--b2b-input-box-shadow-hover) !important;
}

commerce_builder-search-input .input-search-button {
    position: relative;
    width: 3rem;
    height: 2.5rem !important;
    padding: 0;
    transition: border-color 0.1s, background-color 0.1s, box-shadow 0.1s;
}

commerce_builder-search-input .input-search-button:hover,
commerce_builder-search-input .input-search-button:focus,
commerce_builder-search-input .input-search-button:active {
    border-color: var(--b2b-color-button-hover, rgb(5, 27, 63)) !important;
    background-color: var(--b2b-color-button-hover, rgb(5, 27, 63)) !important;
}

commerce_builder-search-input .input-search-button:focus,
commerce_builder-search-input .input-search-button:active {
    box-shadow: var(--b2b-input-box-shadow-hover) !important;
}

commerce_builder-search-input .input-search-button svg.slds-icon {
    display: none;
}

commerce_builder-search-input .input-search-button::after {
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.5195 14.9077L12.4048 10.8311C13.2339 9.66633 13.6638 8.19507 13.4488 6.63186C13.0804 3.99586 10.9309 1.91157 8.25944 1.66636C4.63606 1.29855 1.5654 4.36367 1.93388 8.01117C2.17953 10.6472 4.26758 12.8234 6.90835 13.1912C8.47438 13.4058 9.9483 12.9767 11.1151 12.1491L15.1991 16.2257C15.3834 16.4096 15.6597 16.4096 15.844 16.2257L16.4888 15.582C16.673 15.3981 16.673 15.0916 16.5195 14.9077ZM3.74566 7.42871C3.74566 5.25248 5.52665 3.47471 7.70681 3.47471C9.88698 3.47471 11.668 5.25248 11.668 7.42871C11.668 9.60495 9.88698 11.3827 7.70681 11.3827C5.52665 11.3827 3.74566 9.6356 3.74566 7.42871Z' fill='white'/%3E%3C/svg%3E%0A");
    position: absolute;
    top: 0.625rem;
    left: 0.90625rem;
    width: 1.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    pointer-events: none;
}

/* COMMERCE BUILDER USER PROFILE MENU */

commerce_builder-user-profile-menu .menu-button {
    margin: 0;
    margin-inline-end: 0 !important;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: background-color 0.1s, box-shadow 0.1s;
}

commerce_builder-user-profile-menu .menu-button:hover {
    background-color: transparent !important;
}

commerce_builder-user-profile-menu .menu-button:focus,
commerce_builder-user-profile-menu .menu-button:active {
    background-color: transparent !important;
    box-shadow: var(--b2b-input-box-shadow-hover) !important;
}

commerce_builder-user-profile-menu .menu-button > div {
    max-width: 8.9375rem !important;
}

commerce_builder-user-profile-menu .menu-button > div > div:first-child {
    max-width: 100% !important;
}

commerce-layout-header .layout-header-tablet commerce_builder-user-profile-menu .menu-button > div > div:first-child {
    display: none !important;
}

commerce_builder-user-profile-menu .menu-button > div > div:first-child > p {
    margin: 0;
    text-transform: none !important;
    text-shadow: unset !important;
    color: var(--b2b-color-black, rgb(0, 0, 0)) !important;
}

commerce_builder-user-profile-menu .menu-button > div > div:first-child > p:first-child {
    font-size: 1rem;
}

commerce_builder-user-profile-menu .menu-button > div > div:first-child > p:last-child {
    font-weight: 600;
}

commerce_builder-user-profile-menu .menu-button > div > div:last-child lightning-icon {
    display: none;
}

commerce_builder-user-profile-menu .menu-button > div > div:last-child {
    position: relative;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.25rem;
}

commerce-layout-header .layout-header-tablet commerce_builder-user-profile-menu .menu-button > div > div:last-child,
commerce-layout-header .layout-header-mobile commerce_builder-user-profile-menu .menu-button > div > div:last-child {
    margin-right: 0;
}

commerce_builder-user-profile-menu .menu-button > div > div:last-child::after {
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32 28.5V29.6C32 30.9 30.9 32 29.6 32H10.4C9.1 32 8 30.9 8 29.6V28.5C8 25.6 11.4 23.8 14.6 22.4L14.9 22.25C15.15 22.15 15.4 22.15 15.65 22.3C16.95 23.15 18.4 23.6 19.95 23.6C21.5 23.6 23 23.1 24.25 22.3C24.5 22.15 24.75 22.15 25 22.25L25.3 22.4C28.6 23.8 32 25.55 32 28.5V28.5ZM20 8C23.3 8 25.95 10.95 25.95 14.6C25.95 18.25 23.3 21.2 20 21.2C16.7 21.2 14.05 18.25 14.05 14.6C14.05 10.95 16.7 8 20 8Z' fill='%23444445'/%3E%3C/svg%3E%0A");
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* COMMERCE BUILDER USER PROFILE MENU : DROPDOWN */

commerce_builder-user-profile-menu .slds-dropdown {
    max-width: 12.5rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.20);
    background-color: white !important;
}

@media (max-width: 767.98px) {

    commerce_builder-user-profile-menu .slds-dropdown {
        top: 61px !important;
        width: calc(100% - 2rem) !important;
        left: 1rem !important;
        right: 1rem !important;
    }

}

commerce_builder-user-profile-menu .slds-dropdown .menu-nubbin,
commerce_builder-user-profile-menu .slds-dropdown::before,
commerce_builder-user-profile-menu .slds-dropdown::after {
    display: none;
}

commerce_builder-user-profile-menu .slds-dropdown .user-profile-menu-list {
    border-radius: 0.5rem;
}

commerce_builder-user-profile-menu .slds-dropdown li:nth-last-child(2) {
    border-bottom: 0 !important;
}

commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item:not(.company-name):first-child {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

commerce-layout-header .layout-header-tablet commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item:nth-child(1),
commerce-layout-header .layout-header-mobile commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item:nth-child(1) {
    margin: 0;
    padding-top: 0.625rem;
}

commerce-layout-header .layout-header-tablet commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item:nth-child(1) p,
commerce-layout-header .layout-header-mobile commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item:nth-child(1) p {
    font-size: 1rem;
    line-height: 1.5rem;
}

commerce-layout-header .layout-header-tablet commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item:nth-child(2),
commerce-layout-header .layout-header-mobile commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item:nth-child(2) {
    margin: 0;
}

commerce-layout-header .layout-header-tablet commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item:nth-child(2) p,
commerce-layout-header .layout-header-mobile commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item:nth-child(2) p {
    padding-bottom: 0.625rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
}

commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item:last-child {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item a {
    padding: 0.625rem 0.9375rem;
    font-size: 0.875rem;
    transition: color 0.1s, background-color 0.1s;
}

commerce-layout-header .layout-header-tablet commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item a,
commerce-layout-header .layout-header-mobile commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item a {
    line-height: 1.5rem;
}

commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item .menu-item_hover {
    color: var(--b2b-color-main-blue, rgb(14, 77, 140)) !important;
    background-color: var(--b2b-color-background-blue, rgb(238, 249, 254)) !important;
}

commerce_builder-user-profile-menu .slds-dropdown .slds-dropdown__item a:focus {
    box-shadow: inset 0 0 3px var(--b2b-input-color-box-shadow-hover, rgb(232, 244, 253));
}

/* LOGIN LINK */

commerce_builder-user-profile-menu a.login-link {
    display: block;
    padding: 0.5625rem 1rem;
    line-height: 1;
    text-decoration: none !important;
    background-color: var(--b2b-color-button, rgb(47, 81, 136));
    transition: background-color 0.1s, box-shadow 0.1s;
}

commerce_builder-user-profile-menu a.login-link:hover {
    background-color: var(--b2b-color-button-hover, rgb(5, 27, 63));
}

commerce_builder-user-profile-menu a.login-link:focus,
commerce_builder-user-profile-menu a.login-link:active {
    box-shadow: var(--b2b-input-box-shadow-hover);
    background-color: var(--b2b-color-button-hover, rgb(5, 27, 63));
}

commerce_builder-user-profile-menu a.login-link > div {
    max-width: 100% !important;
}

commerce_builder-user-profile-menu a.login-link .login-text {
    padding: 0;
    font-size: 1rem;
    line-height: 1.375rem;
    color: var(--b2b-color-white, rgb(255, 255, 255));
}

commerce-layout-header .layout-header-tablet commerce_builder-user-profile-menu a.login-link .login-text,
commerce-layout-header .layout-header-mobile commerce_builder-user-profile-menu a.login-link .login-text {
    font-size: 0.875rem;
}

commerce_builder-user-profile-menu a.login-link lightning-icon {
    display: none;
}

commerce_builder-user-profile-menu a:not(.slds-dropdown__item > a),
commerce_builder-user-profile-menu a:link:not(.slds-button):not(.slds-dropdown__item > a),
commerce_builder-user-profile-menu a:visited:not(.slds-button):not(.slds-dropdown__item > a) {
    background-color: rgb(14, 77, 140) !important; 
}

@media (max-width: 767.98px) {

    commerce_builder-user-profile-menu a.login-link > div {
        display: none;
    }

    commerce_builder-user-profile-menu a.login-link {
        position: relative;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
       background-color: var(--b2b-color-button,rgb(14, 77, 140)) !important;
        
    }

    commerce_builder-user-profile-menu a.login-link:hover,
    commerce_builder-user-profile-menu a.login-link:focus,
    commerce_builder-user-profile-menu a.login-link:active {
        border: 0 !important;
        background-color: transparent !important;
    }

    commerce_builder-user-profile-menu a.login-link::after {
        display: block;
        content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32 28.5V29.6C32 30.9 30.9 32 29.6 32H10.4C9.1 32 8 30.9 8 29.6V28.5C8 25.6 11.4 23.8 14.6 22.4L14.9 22.25C15.15 22.15 15.4 22.15 15.65 22.3C16.95 23.15 18.4 23.6 19.95 23.6C21.5 23.6 23 23.1 24.25 22.3C24.5 22.15 24.75 22.15 25 22.25L25.3 22.4C28.6 23.8 32 25.55 32 28.5V28.5ZM20 8C23.3 8 25.95 10.95 25.95 14.6C25.95 18.25 23.3 21.2 20 21.2C16.7 21.2 14.05 18.25 14.05 14.6C14.05 10.95 16.7 8 20 8Z' fill='%23444445'/%3E%3C/svg%3E%0A");
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

}

/* COMMERCE BUILDER CART BADGE */

commerce_builder-cart-badge commerce_cart-badge .cart-container,
commerce_builder-cart-badge commerce_cart-badge .cart-container > a,
commerce_builder-cart-badge commerce_cart-badge .cart-container > a .icon-container {
    display: block;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
}

commerce_builder-cart-badge .cart-container {
    padding: 0;
}

commerce_builder-cart-badge commerce_cart-badge .cart-container > a {
    transition: box-shadow 0.1s;
}

commerce_builder-cart-badge commerce_cart-badge .cart-container > a:focus,
commerce_builder-cart-badge commerce_cart-badge .cart-container > a:active {
    box-shadow: var(--b2b-input-box-shadow-hover);
}

commerce_builder-cart-badge .icon-container {
    position: relative;
}

commerce_builder-cart-badge .icon-container::after {
    position: absolute;
    top: 0.5rem;
    left: 0.25rem;
    display: block;
    width: 1.875rem;
    height: 1.75rem;
    content: url("data:image/svg+xml,%3Csvg width='30' height='28' viewBox='0 0 30 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1421 13.9693H25.8498C26.2805 13.9693 26.7113 13.6616 26.7728 13.2308L29.4805 3.75385C29.6651 3.07693 29.1728 2.52308 28.5574 2.52308H5.84975L5.48052 1.10769C5.2959 0.43077 4.68052 0 4.06513 0H1.60359C0.803594 0 0.0651319 0.615386 0.00359347 1.41539C-0.057945 2.27693 0.680517 3.01539 1.48052 3.01539H2.8959L7.57283 18.8308C7.75744 19.5077 8.31129 19.9385 8.98821 19.9385H26.3421C27.1421 19.9385 27.8805 19.3231 27.9421 18.5231C28.0036 17.6616 27.2651 16.9231 26.4651 16.9231H11.2036C10.5267 16.9231 9.97283 16.4923 9.78821 15.8769V15.8154C9.48052 14.8923 10.219 13.9693 11.1421 13.9693ZM11.4498 27.8769C12.8093 27.8769 13.9114 26.7749 13.9114 25.4154C13.9114 24.0559 12.8093 22.9539 11.4498 22.9539C10.0904 22.9539 8.98828 24.0559 8.98828 25.4154C8.98828 26.7749 10.0904 27.8769 11.4498 27.8769ZM25.9112 25.4154C25.9112 26.7749 24.8091 27.8769 23.4497 27.8769C22.0902 27.8769 20.9881 26.7749 20.9881 25.4154C20.9881 24.0559 22.0902 22.9539 23.4497 22.9539C24.8091 22.9539 25.9112 24.0559 25.9112 25.4154Z' fill='%23444445'/%3E%3C/svg%3E%0A");
}

commerce_builder-cart-badge svg.slds-icon {
    display: none;
}

commerce_builder-cart-badge .cart-container .slds-notification-badge {
    top: 0;
    right: -0.125rem;
    min-width: 1.125rem;
    min-height: 1.125rem;
    font-size: 0.75rem;
    line-height: 1;
    background-color: var(--b2b-color-secondary-blue, rgb(89, 158, 216));
}

/* COMMERCE BUILDER DRILLDOWN NAVIGATION */

.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item:first-child > a,
.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item:first-child > button {
    padding-left: 0;
}

.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item:last-child > a,
.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item:last-child > button {
    padding-right: 0;
}

.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item > a,
.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item > button {
    transition: color 0.1s, background-color 0.1s;
}

.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item > button[aria-expanded="true"],
.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item > a:hover,
.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item > button:hover,
.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item > a:focus,
.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item > button:focus,
.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item > a:active,
.promo-banner commerce_builder-drilldown-navigation .comm-drilldown-navigation__bar > .slds-list__item > button:active {
    color: var(--b2b-color-main-blue, rgb(14, 77, 140));
    background-color: transparent !important;
}

@media (max-width: 767.98px) {

    .promo-banner > commerce_builder-drilldown-navigation,
    .promo-banner webruntimedesign-design-component commerce_builder-drilldown-navigation {
        position: absolute;
        top: 1.5rem;
        left: 1rem;
        z-index: 1;
    }

    .promo-banner webruntimedesign-design-component commerce_builder-drilldown-navigation {
        top: -7.5rem;
    }

    .promo-banner commerce_builder-drilldown-navigation .close-button-wrapper lightning-button-icon {
        margin: 0;
    }

    .promo-banner commerce_builder-drilldown-navigation .close-button-wrapper lightning-button-icon > button.slds-button {
        padding: 0.75rem;
        border: 0 !important;
        box-shadow: unset !important;
        color: var(--b2b-color-black, rgb(0, 0, 0));
    }

}

/* HAMBURGER BUTTON */

@media (max-width: 767.98px) {

    .promo-banner commerce_builder-drilldown-navigation commerce-drilldown-navigation > lightning-button-icon > button.slds-button {
        position: relative;
        width: 1.5rem;
        min-width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        border: 0;
        transition: box-shadow 0.1s;
    }

    .promo-banner commerce_builder-drilldown-navigation commerce-drilldown-navigation > lightning-button-icon > button.slds-button:focus,
    .promo-banner commerce_builder-drilldown-navigation commerce-drilldown-navigation > lightning-button-icon > button.slds-button:active {
        box-shadow: var(--b2b-input-box-shadow-hover);
    }

    .promo-banner commerce_builder-drilldown-navigation commerce-drilldown-navigation > lightning-button-icon > button.slds-button::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12H3M21 6H3M16 18H3' stroke='%233B3F42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    }

    .promo-banner commerce_builder-drilldown-navigation commerce-drilldown-navigation > lightning-button-icon > button.slds-button lightning-primitive-icon {
        display: none;
    }

}

/* COMMERCE DRILLDOWN NAVIGATION LIST */

commerce-drilldown-navigation-list ul.slide-down {
    border-radius: 0.5rem !important;
    outline: 0 !important;
    box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.20) !important;
}

@media (max-width: 767.98px) {

    commerce-drilldown-navigation-list ul.slide-down {
        border-radius: 0 !important;
        outline: 0 !important;
        box-shadow: unset !important;
    }

}

commerce-drilldown-navigation-list ul.slide-down > li:last-child {
    border-bottom: 0;
}

commerce-drilldown-navigation-list ul.slide-down > li {
    margin-bottom: 0 !important;
}

commerce-drilldown-navigation-list ul.slide-down > li > a {
    padding: 0.625rem 0.9375rem;
    transition: color 0.1s, background-color 0.1s !important;
}

commerce-drilldown-navigation-list ul.slide-down > li > a:hover,
commerce-drilldown-navigation-list ul.slide-down > li > button:hover,
commerce-drilldown-navigation-list ul.slide-down > li > a:focus,
commerce-drilldown-navigation-list ul.slide-down > li > button:focus {
    color: var(--b2b-color-main-blue, rgb(14, 77, 140)) !important;
    background: var(--b2b-color-background-blue, rgb(238, 249, 254)) !important;
    background-color: var(--b2b-color-background-blue, rgb(238, 249, 254)) !important;
}

commerce-drilldown-navigation-list ul.slide-down > li:first-child:not(.slds-list__item) > button {
    padding-left: 2rem;
    border-bottom: 1px solid #E5E7EB;
}

commerce-drilldown-navigation-list ul.slide-down > li:first-child:not(.slds-list__item) > button lightning-icon {
    padding-left: 0.8125rem;
    transform: translateY(1px);
}

commerce-drilldown-navigation-list ul.slide-down > li:not(.slds-list__item) > a {
    font-weight: 600;
    border-bottom: 1px solid #E5E7EB;
}

commerce-drilldown-navigation-list ul.slide-down > li > button {
    padding-right: 2rem;
}

commerce-drilldown-navigation-list ul.slide-down > li > button lightning-icon {
    padding-left: 0.125rem;
    transform: translateY(0.25rem);
}
commerce-drilldown-navigation-bar >nav{
    background-color: white;
}