/* Local preview of the selected, restrained desktop header concept. */
@media (min-width: 1024px) and (max-width: 1279px) {
    html body:not(.is-mobile) #masthead.site-header .site-header-inner.full {
        grid-template-areas: "logo search account favorite cart" "menu menu menu menu menu" !important;
        grid-template-columns: 210px minmax(0, 1fr) repeat(3, 44px) !important;
        grid-template-rows: 58px 48px !important;
        gap: 0 8px !important;
        min-height: 130px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .top-menu {
        grid-area: menu !important;
        justify-self: stretch !important;
        width: 100% !important;
    }

    html body:not(.is-mobile) #masthead.site-header .top-menu > ul.menu {
        justify-content: flex-start !important;
        gap: 20px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search.header-search,
    html body:not(.is-mobile) #masthead.site-header .header-search .search-form {
        box-sizing: border-box !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        height: 44px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search.header-search {
        grid-area: search !important;
        justify-self: end !important;
        border-radius: 22px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search .search-form {
        grid-template-columns: minmax(0, 1fr) 44px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-customer-account { grid-area: account !important; }
    html body:not(.is-mobile) #masthead.site-header .header-favorite { grid-area: favorite !important; }
    html body:not(.is-mobile) #masthead.site-header .site-header-cart { grid-area: cart !important; }
}

@media (min-width: 1280px) and (max-width: 1549px) {
    html body:not(.is-mobile) #masthead.site-header .site-header-inner.full {
        --kh-macbook-search-width: clamp(270px, calc(100vw - 1010px), 320px);
        width: calc(100% - 40px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        grid-template-columns: 195px minmax(0, 1fr) var(--kh-macbook-search-width) repeat(3, 44px) !important;
        gap: 0 6px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .site-branding {
        width: 175px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .site-logotype,
    html body:not(.is-mobile) #masthead.site-header .site-logotype img {
        max-width: 175px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .top-menu > ul.menu {
        box-sizing: border-box !important;
        justify-content: space-between !important;
        gap: 0 !important;
        padding-right: 16px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .top-menu > ul.menu > li.mega-catalog {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html body:not(.is-mobile) #masthead.site-header .top-menu > ul.menu > li:not(.mega-catalog) > a {
        padding-right: 5px !important;
        padding-left: 5px !important;
        font-size: 12px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .top-menu > ul.menu > li.mega-catalog > a {
        padding-right: 13px !important;
        padding-left: 35px !important;
        font-size: 14px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search.header-search,
    html body:not(.is-mobile) #masthead.site-header .header-search .search-form {
        width: var(--kh-macbook-search-width) !important;
        min-width: var(--kh-macbook-search-width) !important;
        max-width: var(--kh-macbook-search-width) !important;
    }
}

@media (min-width: 1550px) {
    html body:not(.is-mobile) #masthead.site-header .site-header-inner.full {
        grid-template-areas: "logo menu search account favorite cart" !important;
        grid-template-columns: 210px minmax(0, 1fr) 370px repeat(3, 44px) !important;
        gap: 0 10px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .site-branding {
        width: 210px !important;
        padding-left: 4px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .site-logotype,
    html body:not(.is-mobile) #masthead.site-header .site-logotype img {
        max-width: 206px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .site-logotype.site-logotype > a::before,
    html body:not(.is-mobile) #masthead.site-header .site-logotype.site-logotype > a::after {
        font-size: 24px !important;
        font-weight: 800 !important;
    }

    html body:not(.is-mobile) #masthead.site-header .top-menu {
        min-width: 0 !important;
    }

    html body:not(.is-mobile) #masthead.site-header .top-menu > ul.menu {
        justify-content: space-between !important;
        gap: 6px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .top-menu > ul.menu > li:not(.mega-catalog) > a {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search.header-search,
    html body:not(.is-mobile) #masthead.site-header .header-search .search-form {
        box-sizing: border-box !important;
        width: 370px !important;
        min-width: 370px !important;
        max-width: 370px !important;
        height: 44px !important;
        border-radius: 24px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search.header-search {
        grid-area: search !important;
        border: 1px solid #e1ebf8 !important;
        background: #f8fbff !important;
        box-shadow: inset 0 1px 2px rgba(35, 76, 135, .025) !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search .search-form {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search .search-form > label {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: stretch !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search .search-field {
        padding-left: 0 !important;
        font-size: 14px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search .search-submit {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 44px !important;
        height: 44px !important;
        border: 0 !important;
        border-radius: 24px !important;
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237c8da7' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center / 19px no-repeat !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search .search-submit::before {
        content: none !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-customer-account {
        grid-area: account !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-favorite {
        grid-area: favorite !important;
    }

    html body:not(.is-mobile) #masthead.site-header .site-header-cart {
        grid-area: cart !important;
    }
}

/* The favorites counter uses a different parent-theme rule than the cart.
   Anchor it to the same top-right corner as the cart badge. */
html body #masthead.site-header .js-header-favorite {
    position: relative !important;
}

html body #masthead.site-header .js-header-favorite > sup {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    left: auto !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border: 2px solid #fff !important;
    border-radius: 999px !important;
    background: #ff4d5a !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 13px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Refinement: retain the site's original centered 1460px header width. */
@media (min-width: 1550px) {
    html body:not(.is-mobile) #masthead.site-header .site-header-inner.full {
        grid-template-columns: 210px minmax(0, 1fr) 320px repeat(3, 44px) !important;
    }

    html body:not(.is-mobile) #page .super-header.super-header .super-header-inner.super-header-inner a {
        font-weight: 500 !important;
    }

    html body:not(.is-mobile) #page#page #masthead#masthead.site-header .top-menu.top-menu > ul.menu > li:not(.mega-catalog) > a {
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    html body:not(.is-mobile) #page #masthead.site-header .top-menu > ul.menu > li.mega-catalog > a {
        font-weight: 600 !important;
        box-shadow: 0 6px 16px rgba(79, 111, 230, .13) !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search.header-search,
    html body:not(.is-mobile) #masthead.site-header .header-search .search-form {
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        border-radius: 22px !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search.header-search {
        border: 1px solid #a9cafa !important;
        background: #fff !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-search .search-form {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        background: transparent !important;
    }

    html body:not(.is-mobile) #masthead.site-header .header-customer-account,
    html body:not(.is-mobile) #masthead.site-header .header-favorite,
    html body:not(.is-mobile) #masthead.site-header .site-header-cart {
        background: #fff !important;
        box-shadow: none !important;
    }
}