.kb2b-header {

    .slds-notification-badge {
        background-color: rgba(13, 136, 83, 1) !important;
    }

    .layout-header-desktop {
        display: flex;
        width: 100%;
        max-width: 1400px;
        padding: 0;
        margin: 0;
    }

    header.desktop {
        --dxp-c-header-container-spacing-inline-start: 80px;
        --dxp-c-header-container-spacing-inline-end: 80px;
    }

    .mobile {
        --dxp-c-header-container-spacing-block-start-mobile: 12px;
        --dxp-c-header-container-spacing-inline-end-mobile: 16px;
        --dxp-c-header-container-spacing-block-end-mobile: 16px;
        --dxp-c-header-container-spacing-inline-start-mobile: 12px;
    }

    .mobile .header-content {
        --dxp-g-spacing-xsmall: 0;
    }

    .header-logo {
        width: 78px;
        padding: 0;
    }

    .close-button-wrapper .close-button {
        margin: 0;
    }

    .close-button-wrapper .close-button button {
        padding: 0;
    }

    .close-button-wrapper .close-button button svg {
        width: 40px;
        height: 40px;
    }

    .kb2b-header-nav-menu lightning-button-icon button {
        width: 100%;
    }

    .kb2b-header-nav-menu commerce-drilldown-navigation-bar > nav ul > li a,
    .kb2b-header-nav-menu commerce-drilldown-navigation-bar > nav ul > li button {
        color: rgba(92, 92, 92, 1);
        background: #FFF;

        font-family: "PTSans-Regular";
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
    }

    .kb2b-header-nav-menu commerce-drilldown-navigation-bar > nav ul li button:hover {
        background: transparent;
        color: #002B4E;
    }

    .kb2b-header-nav-menu commerce-drilldown-navigation-bar > nav  ul li a:hover {
        background: transparent;
        color: #002B4E;
    }

    .kb2b-header-nav-menu commerce-drilldown-navigation-bar nav ul li button[aria-expanded="true"] {
        color: #002B4E;
        font-size: 22px;
        font-family: "PTSans-Bold";
        font-weight: 700;
        background: transparent;
    }

    .kb2b-header-nav-menu commerce-drilldown-navigation-list nav ul {
        border-radius: 8px;
        background: #FFF;
        box-shadow: none;
    }

    .kb2b-header-nav-menu commerce-drilldown-navigation-list nav ul li a,
    .kb2b-header-nav-menu commerce-drilldown-navigation-list nav ul li button {
        color: #002B4E;
        background: #FFF;

        font-family: "PTSans-Regular";
        font-size: 18px;
        line-height: 150%;
    }

    .kb2b-header-nav-menu commerce-drilldown-navigation-list nav ul li a:hover,
    .kb2b-header-nav-menu commerce-drilldown-navigation-list nav ul li button:hover {
        background: #F4F4F4;
    }

    .kb2b-header-nav-menu commerce-drilldown-navigation-list nav ul li button[aria-expanded="true"] {
        color: #11528F;
        font-family: "PTSans-Regular";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .header-account {
        padding: 0;
    }

    .cart-container {
        padding: 0;
    }

    .kb2b-header-login commerce_my_account-user-profile-menu ul {
        border-radius: 8px;
        background: #FFF;
        box-shadow: none;
    }

    .kb2b-header-login commerce_my_account-user-profile-menu ul li a,
    .kb2b-header-login commerce_my_account-user-profile-menu ul li button {
        color: #002B4E;
        background: #FFF;

        font-family: "PTSans-Regular";
        font-size: 18px;
        line-height: 150%;

        height: 100%;
        padding: 12px 24px;
    }

    .kb2b-header-login commerce_my_account-user-profile-menu ul li a span {
        height: 27px;
    }

    .kb2b-header-login commerce_my_account-user-profile-menu ul li a:hover,
    .kb2b-header-login commerce_my_account-user-profile-menu ul li button:hover {
        --dxp-g-root-1: #F4F4F4;
        font-family: "PTSans-Bold";
    }

    .kb2b-header-login commerce_my_account-user-profile-menu ul li .menu-item-bg-hover-color {
        --dxp-g-root-1: #F4F4F4;
    }

    .kb2b-header-login commerce_my_account-user-profile-menu ul li button[aria-expanded="true"] {
        color: #11528F;
        font-family: "PTSans-Regular";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .kb2b-header-login commerce_my_account-user-profile-menu .login-link {
        color: #787878;
        font-family: "PTSans-Regular";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }

    .kb2b-header-login commerce_my_account-user-profile-menu .login-link:hover {
        text-decoration: none;
    }

    .kb2b-header-login commerce_my_account-user-profile-menu .menu-button {
        padding: 0;
        margin: 0;
    }

    .kb2b-header-login commerce_my_account-user-profile-menu .menu-button > span {
        gap: 4px;
    }

    .kb2b-header-login commerce_my_account-user-profile-menu .menu-button:hover {
        background: none;
    }

    .kb2b-header-login commerce_my_account-user-profile-menu .icon-color svg,
    .kb2b-header-favorites svg {
        fill: #002B4E;
        height: 24px;
        width: 24px;
        padding: 0;
    }

    .kb2b-header-login .dropdown-ctn {
        width: 183px;
        border-radius: 8px;
        background: #FFF;
        inset-inline-start: auto;

        margin: 0;
        padding: 0;
    }

    .kb2b-header-login .dropdown-ctn a:focus {
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    .kb2b-header-search .input-container {
        height: 40px;
    }

    .kb2b-header-search .input-container button {
        height: 40px;
    }

    .kb2b-header-search .input-container .input-wrapper {
        z-index: 1;
    }

    .kb2b-header-search .input-container .input-wrapper input::placeholder,
    .kb2b-header-search .input-container .input-wrapper input:not(:focus) {
        color: #787878 !important;
    }

    .kb2b-header-search .input-container .input-wrapper input {
        color:  #002B4E !important;
    }

    .kb2b-header-search .input-container div:has(.input-search-button):focus {
        z-index: 3;
    }

    .kb2b-header-login {
        --com-c-my-account-user-profile-icon-display: inline-flex;
    }
    
    .kb2b-header-cart commerce_cart-badge svg {
        fill: #002B4E;
        height: 24px;
        width: 24px;
        padding: 0;
    }
    
    .kb2b-header-search svg use {
        fill: #002B4E;
    }

    .kb2b-order-additionals .contentContainer {
        margin-top: 1rem;
        background: #E6EDF4 !important;
        border: unset !important;
        border-radius: 12px !important;
        padding: 20px 12px 20px 12px;
    }

    @media screen and (min-width: 1024px) {
        .header-navigation {
            flex: 1 1 0;
        }

        .header-search {
            max-width: 216px;
        }
    }

    /* Tablet: keep inline search suggestions from overflowing the page */
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        .kb2b-header,
        .kb2b-header header,
        .kb2b-header .header-content {
            max-width: 100%;
        }

        /* SF default suggestions width is 100% + 35px — that grows the page */
        .kb2b-header-search,
        .search-input-container {
            --com-c-search-input-suggestions-width: 100%;
            --com-c-search-input-suggestions-left-position: 0;
        }

        .search-suggestions {
            width: var(--com-c-search-input-suggestions-width, 100%) !important;
            max-width: 100%;
            left: var(--com-c-search-input-suggestions-left-position, 0) !important;
            box-sizing: border-box;
            overflow-x: hidden;
        }
    }

    /* Phone only — SF mobile drawer breakpoint (exclude tablet portrait) */
    @media screen and (max-width: 47.9375em) {
        .mobile {
            --dxp-c-header-container-spacing-block-start-mobile: 0;
            /* Keep suggestion panel within the viewport so it can scroll */
            --com-c-search-input-suggestions-height-mobile: calc(100dvh - 72px);
        }

        header.mobile {
            position: sticky;
            top: 0;
            z-index: 1000;
            padding-top: 0 !important;
            margin-top: 0 !important;
            background-color: #ffffff;
            max-width: 100%;
        }

        .mobile .header-content {
            padding-top: 0 !important;
            margin-top: 0 !important;
            background-color: #ffffff;
            max-width: 100%;
        }

        .kb2b-header .dxp-content-layout-site-logo,
        .kb2b-header-logo .dxp-content-layout-site-logo {
            max-height: 56px !important;
        }

        .header-navigation {
            min-width: 70px;
            text-align: center;
            position: relative;
            z-index: 120;
        }

        .header-search {
            padding-top: 8px;
        }

        /*
         * Mobile search drawer:
         * - Leave left gutter for burger; extend to the right edge (covers icons)
         * - Results break out to exact viewport width (SF's +35px alone overflows)
         */
        .search-expanded .header-search-drawer {
            --kb2b-search-gutter-left: 48px;
            --kb2b-search-gutter-right: 0px;
            --kb2b-search-close-reserve: 35px;
            --kb2b-search-close-edge-gap: 5px;
            --kb2b-mobile-search-suggestions-top: 72px;

            left: var(--kb2b-search-gutter-left) !important;
            right: var(--kb2b-search-gutter-right) !important;
            width: auto !important;
            max-width: none;
            height: 100%;
            box-sizing: border-box;
            align-items: center;
            /* Remove translateX containing block so fixed suggestions attach to the viewport */
            transform: none !important;
            padding-inline-start: 0;
            padding-inline-end: 0;

            /*
             * Suggestion panel is sized against the input content box (parent has
             * padding-right: 35px for the close control). Break out by the left gutter
             * plus that reserve so the panel lands flush with the viewport edges.
             */
            --com-c-search-input-suggestions-left-position: calc(-1 * var(--kb2b-search-gutter-left));
            --com-c-search-input-suggestions-width: calc(
                100% + var(--kb2b-search-gutter-left) + var(--kb2b-search-gutter-right) +
                    var(--kb2b-search-close-reserve)
            );
            --com-c-layout-header-spacing-block-start-mobile: 0px;
            --com-c-layout-header-spacing-block-end-mobile: 0px;
        }

        /*
         * Override SF mobile rule (.header-search-drawer-close { right: 5px })
         * so the close control has clear space from the viewport edge.
         */
        .search-expanded .header-search-drawer-close,
        .header-search-drawer .header-search-drawer-close {
            right: var(--kb2b-search-close-edge-gap, 5px) !important;
        }

        /* Hide right-side icons while search is open (drawer covers that area) */
        .search-expanded .header-badge-icons {
            visibility: hidden;
            pointer-events: none;
        }

        .search-expanded .header-search-drawer-content {
            position: absolute;
            top: calc(50cqh - var(--com-c-layout-header-search-drawer-content-size, 2rem) / 2);
            width: 100% !important;
            max-width: 100%;
            box-sizing: border-box;
            align-items: center;
        }

        .search-expanded .header-search-drawer-input {
            max-width: 100%;
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
            /* SF already reserves ~35px for the close control — do not add more */
            padding-right: var(--kb2b-search-close-reserve, 35px);
        }

        .search-expanded .search-bar,
        .search-expanded .search-input-container {
            max-width: 100%;
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
        }

        /* Keep the loading spinner from covering the Clear control */
        .search-input-container {
            position: relative;
        }

        .search-input-container .clear {
            position: relative;
            z-index: 2;
            background-color: var(
                --com-c-search-input-background-color,
                var(--sds-c-input-color-background, transparent)
            );
        }

        .search-input-container:focus-within .clear {
            background-color: var(
                --com-c-search-input-background-color-focus,
                var(--com-c-search-input-background-color, var(--sds-c-input-color-background, transparent))
            );
        }

        .search-input-container .search-spinner {
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            pointer-events: none;
        }

        .search-input-container:has(.clear) .search-spinner,
        .search-input-container .clear + .search-spinner {
            right: 6rem !important;
        }

        /*
         * Prefer viewport-fixed full-bleed when the selector reaches the node.
         * CSS vars above remain the shadow-DOM-safe fallback.
         */
        .search-expanded .search-suggestions {
            position: fixed !important;
            top: var(--kb2b-mobile-search-suggestions-top, 72px) !important;
            left: 0 !important;
            right: 0 !important;
            width: auto !important;
            max-width: none !important;
            max-height: calc(100dvh - var(--kb2b-mobile-search-suggestions-top, 72px)) !important;
            height: auto !important;
            margin: 0.5rem 0 0 !important;
            box-sizing: border-box;
            overflow-x: hidden;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            touch-action: pan-y;
            z-index: 1002;
        }

        /* Fallback when fixed positioning does not apply (shadow DOM) */
        .search-suggestions {
            max-height: var(--com-c-search-input-suggestions-height-mobile, calc(100dvh - 72px));
            height: auto !important;
            width: var(--com-c-search-input-suggestions-width) !important;
            max-width: none;
            left: var(--com-c-search-input-suggestions-left-position) !important;
            box-sizing: border-box;
            overflow-x: hidden;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            touch-action: pan-y;
        }
    }

    /* Header dropshadow when mega menu submenu is visible */
    .header-content.header-dropshadow {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        transition: box-shadow 0.2s ease !important;
        position: relative;
        z-index: 999;
    }

}

/* Remove component-wrapper-spacer gap between store benefits and header/mega menu */
@media screen and (min-width: 768px) {
    c-krkl-store-benefits.component-wrapper-spacer {
        margin-bottom: 0 !important;
        --dxp-s-component-wrapper-spacer-size: 0 !important;
        --dxp-s-component-wrapper-spacer-size-mobile: 0 !important;
    }
}