/* Polished desktop Header 4. Mobile presentation remains independently controlled. */
@media only screen and (min-width: 768px) {
    /* The mobile search/menu markup is present on every page. Its normal
       hidden state must also exist in the desktop-only stylesheet. */
    .cwp-mobile-menu,
    .cwp-store-search-overlay {
        display: none !important;
    }

    .header-area.header4 > .middle-header {
        padding: 7px 0 !important;
        border-bottom: 1px solid #ebe9e4;
        background: #fff;
    }

    .header-area.header4 > .middle-header .line {
        display: grid !important;
        grid-template-columns: minmax(180px, 1fr) minmax(440px, 640px) minmax(180px, 1fr);
        align-items: center;
        column-gap: clamp(20px, 3vw, 44px);
        min-height: 72px;
        margin: 0 !important;
    }

    .header-area.header4 > .middle-header .line > div {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .header-area.header4 > .middle-header .line > div:nth-child(2) {
        min-width: 0;
        justify-self: stretch;
    }

    .header-area.header4 > .middle-header .line > div:nth-child(3) {
        justify-self: stretch;
    }

    .header-area.header4 .logo-header {
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
    }

    .header-area.header4 .logo-header .logo {
        display: flex;
        align-items: center;
        margin: 0 !important;
    }

    .header-area.header4 .logo-header img {
        display: block;
        width: auto !important;
        max-width: 176px !important;
        max-height: 58px !important;
    }

    .header-area.header4 .parent-search,
    .header-area.header4 .parent-search .search-form,
    .header-area.header4 .parent-search .block-search,
    .header-area.header4 .parent-search .block-content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .header-area.header4 .parent-search .form.minisearch {
        position: relative;
        width: 100%;
        height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border: 1.5px solid #262622 !important;
        border-radius: 999px !important;
        background: #fafaf8 !important;
        box-shadow: none !important;
    }

    .header-area.header4 .parent-search input#search {
        width: 100% !important;
        height: 41px !important;
        padding: 0 52px 0 20px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #171714 !important;
        font-size: 15px !important;
    }

    .header-area.header4 .parent-search input#search::placeholder {
        color: #77756f;
        opacity: 1;
    }

    .header-area.header4 .parent-search .actions {
        position: absolute !important;
        top: 0 !important;
        right: 3px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .header-area.header4 .parent-search button.action.search {
        display: grid !important;
        place-items: center;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #171714 !important;
    }

    .header-area.header4 .right-content {
        display: flex !important;
        align-items: center;
        justify-content: flex-end !important;
        gap: 10px;
        min-height: 48px;
        width: 100% !important;
    }

    .header-area.header4 .right-content > * {
        position: relative;
        display: grid !important;
        place-items: center;
        flex: 0 0 44px;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* The generic child alignment above must not reveal MGS's mobile menu
       trigger on desktop. It otherwise appears between wishlist and cart. */
    .header-area.header4 .right-content > .nav-tg {
        display: none !important;
    }

    .header-area.header4 .right-content > .header-top-links > .actions,
    .header-area.header4 .right-content > .header-top-links > .actions > .top-links,
    .header-area.header4 .right-content .top-wishlist,
    .header-area.header4 .right-content .top-wishlist > a,
    .header-area.header4 .right-content .minicart-wrapper,
    .header-area.header4 .minicart-wrapper .action.showcart {
        position: relative;
        display: grid !important;
        place-items: center;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    .header-area.header4 .right-content .theme-header-icon,
    .header-area.header4 .right-content .action.showcart::before {
        margin: 0 !important;
        line-height: 1 !important;
    }

    .header-area.header4 .top-wishlist .wishlist-count,
    .header-area.header4 .top-wishlist .counter.qty,
    .header-area.header4 .minicart-wrapper .counter.qty {
        position: absolute !important;
        top: 1px !important;
        right: 0 !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 17px !important;
        width: 17px !important;
        max-width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1.5px solid #fff !important;
        border-radius: 50% !important;
        background: #171714 !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 14px !important;
        text-align: center !important;
        z-index: 3;
    }

    .header-area.header4 .minicart-wrapper .counter-number {
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        font: inherit !important;
        line-height: 14px !important;
    }

    .header-area.header4 .cwp-sticky-search-toggle {
        display: none !important;
    }
}

/* SVG intrinsic sizing can collapse inside MGS's flex logo wrapper. */
@media only screen and (min-width: 769px) {
    .header-area.header4 .logo-header img.default-logo {
        width: 176px !important;
        height: auto !important;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1050px) {
    .header-area.header4 .logo-header img.default-logo {
        width: 150px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1050px) {
    .header-area.header4 > .middle-header .line {
        grid-template-columns: 150px minmax(300px, 1fr) 150px;
        column-gap: 18px;
    }

    .header-area.header4 .logo-header img {
        max-width: 150px !important;
        max-height: 50px !important;
    }
}
