/*
 * =========================================================
 * HC_ECO_DOCUMENT_EDGE_RESET
 * 页面基础边距归零
 * Header真正贴合浏览器左右及顶部边缘
 * =========================================================
 */

html{
    margin:0;
    padding:0;
}

body{
    margin:0;
}

.eco-global-header{
    width:100%;
    background:#69aa49;
    color:#fff;
    position:relative;
    z-index:1000;
}

.eco-global-header *{
    box-sizing:border-box;
}

.eco-gh-inner{
    width:min(1400px,calc(100% - 40px));
    min-height:82px;

    margin:auto;

    display:grid;
    grid-template-columns:
        350px
        minmax(420px,1fr)
        100px;

    gap:24px;

    align-items:center;
}


.eco-gh-left{
    display:flex;
    align-items:center;
    gap:24px;

    min-width:0;
}

.eco-gh-logo{
    display:flex;
    align-items:center;
    gap:8px;

    color:#fff;
    text-decoration:none;

    flex:0 0 auto;
}

.eco-gh-logo img{
    width:58px;
    height:58px;
    object-fit:contain;
}

.eco-gh-logo-text strong{
    display:block;

    font-size:26px;
    line-height:28px;

    letter-spacing:2px;
}

.eco-gh-logo-text small{
    display:block;

    margin-top:3px;

    font-size:11px;
    line-height:13px;
}

.eco-gh-location{
    display:flex;
    align-items:center;
    gap:4px;

    min-width:0;

    font-size:14px;
    white-space:nowrap;
}

.eco-gh-location.is-editable{
    cursor:pointer;
}

.eco-gh-location.is-readonly{
    cursor:default;
}

.eco-gh-city{
    max-width:110px;

    overflow:hidden;
    text-overflow:ellipsis;
}

.eco-gh-city-arrow{
    opacity:.8;
}


.eco-gh-center{
    min-width:0;
}

.eco-gh-search{
    width:100%;
    height:40px;

    display:flex;

    background:#fff;

    border:1px solid
        rgba(0,0,0,.18);

    border-radius:8px;

    overflow:hidden;
}

.eco-gh-search input{
    flex:1;
    min-width:0;

    padding:0 14px;

    border:0;
    outline:0;

    font-size:14px;

    background:#fff;
}

.eco-gh-search button{
    flex:0 0 78px;

    border:0;
    border-left:
        1px solid #d5ddd0;

    background:#69aa49;
    color:#fff;

    cursor:pointer;
}

.eco-gh-nav{
    margin-top:6px;

    display:flex;
    justify-content:center;

    gap:46px;

    white-space:nowrap;
}

.eco-gh-nav a{
    color:#fff;

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    opacity:.95;
}

.eco-gh-nav a:hover,
.eco-gh-nav a.is-active{
    opacity:1;
    text-decoration:underline;
}


.eco-gh-user{
    position:relative;

    justify-self:end;
}

.eco-gh-user-btn{
    color:#fff;
    text-decoration:none;

    padding:12px 4px;

    cursor:pointer;

    white-space:nowrap;
}

/*
 * HC_ECO_HEADER_MY_VECTOR_ICON
 * 公共 Header「我的」人物线性图标
 */

.eco-gh-user-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.eco-gh-user-icon{
    width:20px;
    height:20px;

    flex:0 0 20px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.eco-gh-user-icon svg{
    width:20px;
    height:20px;

    display:block;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.eco-gh-user-label{
    display:inline-block;
    white-space:nowrap;
}



.eco-gh-user-panel{
    display:none;

    position:absolute;

    top:100%;
    right:0;

    width:260px;

    padding:16px;

    background:#fff;
    color:#222;

    border-radius:12px;

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.18);

    z-index:10000;
}


@media (hover:hover)
and (pointer:fine){

    .eco-gh-user:hover
    .eco-gh-user-panel{
        display:block;
    }

}


.eco-gh-user.is-open
.eco-gh-user-panel{
    display:block;
}

.eco-gh-user-panel
.user-head{
    display:flex;
    align-items:center;

    gap:10px;

    padding-bottom:12px;
    margin-bottom:8px;

    border-bottom:1px solid #eee;
}

.eco-gh-user-panel
.user-head p{
    margin:3px 0 0;

    color:#888;

    font-size:12px;
}

.eco-gh-user-panel
.user-menu{
    display:flex;
    flex-direction:column;
}

.eco-gh-user-panel
.user-menu a{
    padding:9px 7px;

    color:#333;

    text-decoration:none;

    border-radius:6px;
}

.eco-gh-user-panel
.user-menu a:hover{
    background:#f3f7f0;
}


@media (max-width:768px){
    .eco-global-header .eco-gh-logo img{
        width:42px;
        height:42px;
    }

    .eco-global-header .eco-gh-logo-text strong{
        font-size:20px;
        line-height:21px;
    }

    .eco-global-header .eco-gh-logo-text small{
        font-size:9px;
    }

    .eco-global-header .eco-gh-location{
        font-size:13px;
    }
}

@media (max-width:360px){
    .eco-global-header .eco-gh-logo-text small{
        display:none;
    }

    .eco-global-header .eco-gh-logo-text strong{
        font-size:18px;
    }
}

.eco-global-header,
.eco-global-header *,
.eco-global-header *::before,
.eco-global-header *::after{
    box-sizing:border-box;
}


@media (max-width:768px){


    .eco-global-header{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;

        margin:0 !important;

        overflow:visible !important;

        z-index:1000 !important;
    }


    .eco-global-header .eco-gh-inner{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;

        margin:0 !important;

        padding:
            8px
            max(10px,env(safe-area-inset-right))
            7px
            max(10px,env(safe-area-inset-left))
            !important;

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            auto
            !important;

        grid-template-rows:
            auto
            auto
            !important;

        align-items:center !important;

        column-gap:8px !important;
        row-gap:7px !important;

        overflow:visible !important;
    }


    .eco-global-header .eco-gh-left{
        grid-column:1 !important;
        grid-row:1 !important;

        width:auto !important;
        max-width:100% !important;
        min-width:0 !important;

        display:flex !important;
        align-items:center !important;

        flex-wrap:nowrap !important;

        gap:7px !important;

        margin:0 !important;
        padding:0 !important;

        overflow:hidden !important;
    }


    .eco-global-header .eco-gh-logo{
        flex:
            0
            1
            auto
            !important;

        min-width:0 !important;
        max-width:105px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;

        white-space:nowrap !important;

        overflow:hidden !important;

        text-overflow:ellipsis !important;
    }


    .eco-global-header .eco-gh-logo-text{
        min-width:0 !important;
        max-width:90px !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;

        font-size:15px !important;
        line-height:1.2 !important;
    }


    .eco-global-header .eco-gh-location{
        flex:
            1
            1
            auto
            !important;

        width:auto !important;

        min-width:0 !important;
        max-width:120px !important;

        margin:0 !important;

        padding:6px 7px !important;

        display:flex !important;
        align-items:center !important;

        gap:3px !important;

        overflow:hidden !important;

        white-space:nowrap !important;
    }


    .eco-global-header .eco-gh-city{
        display:block !important;

        min-width:0 !important;
        max-width:82px !important;

        overflow:hidden !important;

        text-overflow:ellipsis !important;
        white-space:nowrap !important;

        font-size:13px !important;
        line-height:1.2 !important;
    }


    .eco-global-header .eco-gh-city-arrow{
        flex:0 0 auto !important;
    }


    .eco-global-header .eco-gh-user{
        grid-column:2 !important;
        grid-row:1 !important;

        position:relative !important;

        width:auto !important;
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;

        justify-self:end !important;

        flex:0 0 auto !important;

        overflow:visible !important;
    }


    .eco-global-header .eco-gh-user-btn{
        width:auto !important;
        min-width:0 !important;
        max-width:92px !important;

        height:34px !important;

        margin:0 !important;

        padding:0 9px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        gap:4px !important;

        white-space:nowrap !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;

        font-size:13px !important;
        line-height:1 !important;
    }


    .eco-global-header .eco-gh-user-panel{
        position:absolute !important;

        top:calc(100% + 8px) !important;
        right:0 !important;
        left:auto !important;

        width:min(
            300px,
            calc(100vw - 24px)
        ) !important;

        max-width:calc(100vw - 24px) !important;
        min-width:220px !important;

        margin:0 !important;

        z-index:10000 !important;

        transform:none !important;
    }


    .eco-global-header .eco-gh-center{
        grid-column:1 / -1 !important;
        grid-row:2 !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;

        gap:6px !important;

        overflow:visible !important;
    }


    .eco-global-header .eco-gh-search{
        order:1 !important;

        width:100% !important;
        max-width:none !important;
        min-width:0 !important;

        height:38px !important;

        margin:0 !important;

        display:flex !important;
        align-items:stretch !important;

        overflow:hidden !important;
    }


    .eco-global-header .eco-gh-search input{
        flex:1 1 auto !important;

        width:1% !important;
        min-width:0 !important;
        max-width:none !important;

        height:38px !important;

        margin:0 !important;

        font-size:14px !important;
    }


    .eco-global-header .eco-gh-search button{
        flex:0 0 auto !important;

        width:auto !important;
        min-width:42px !important;

        height:38px !important;

        margin:0 !important;
    }


    .eco-global-header .eco-gh-nav{
        order:2 !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 !important;

        padding:1px 0 3px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;

        flex-wrap:nowrap !important;

        gap:3px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        overscroll-behavior-x:contain !important;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        white-space:nowrap !important;
    }


    .eco-global-header .eco-gh-nav::-webkit-scrollbar{
        display:none !important;
        width:0 !important;
        height:0 !important;
    }


    .eco-global-header .eco-gh-nav > a{
        flex:
            0
            0
            auto
            !important;

        width:auto !important;

        min-width:max-content !important;
        max-width:none !important;

        margin:0 !important;

        padding:7px 10px !important;

        display:block !important;

        white-space:nowrap !important;

        font-size:13px !important;
        line-height:1.15 !important;

        transform:none !important;
    }


    .eco-global-header a{
        box-sizing:border-box !important;
    }


    .eco-global-header button,
    .eco-global-header input{
        box-sizing:border-box !important;

        max-width:100% !important;
    }
}


@media (max-width:420px){

    .eco-global-header .eco-gh-inner{
        padding-left:8px !important;
        padding-right:8px !important;

        column-gap:6px !important;
    }


    .eco-global-header .eco-gh-left{
        gap:5px !important;
    }


    .eco-global-header .eco-gh-logo{
        max-width:90px !important;
    }


    .eco-global-header .eco-gh-logo-text{
        max-width:76px !important;

        font-size:14px !important;
    }


    .eco-global-header .eco-gh-location{
        max-width:105px !important;

        padding-left:5px !important;
        padding-right:5px !important;
    }


    .eco-global-header .eco-gh-city{
        max-width:70px !important;

        font-size:12px !important;
    }


    .eco-global-header .eco-gh-user-btn{
        max-width:78px !important;

        padding-left:7px !important;
        padding-right:7px !important;

        font-size:12px !important;
    }


    .eco-global-header .eco-gh-nav > a{
        padding:
            7px
            9px
            !important;

        font-size:12.5px !important;
    }
}


@media (max-width:360px){

    .eco-global-header .eco-gh-logo{
        max-width:78px !important;
    }


    .eco-global-header .eco-gh-logo-text{
        max-width:66px !important;

        font-size:13px !important;
    }


    .eco-global-header .eco-gh-location{
        max-width:92px !important;
    }


    .eco-global-header .eco-gh-city{
        max-width:60px !important;
    }


    .eco-global-header .eco-gh-user-btn{
        max-width:70px !important;
    }
}


@media (max-width:768px){


    .eco-global-header
    .eco-gh-user
    >
    .eco-gh-user-panel,

    .eco-global-header
    .user-box
    >
    .user-panel.eco-gh-user-panel,

    .eco-global-header
    .eco-gh-user:hover
    >
    .eco-gh-user-panel,

    .eco-global-header
    .user-box:hover
    >
    .user-panel.eco-gh-user-panel{

        display:none !important;

        visibility:hidden !important;
        opacity:0 !important;

        pointer-events:none !important;

        position:absolute !important;

        top:calc(100% + 8px) !important;

        right:0 !important;
        left:auto !important;

        width:min(
            300px,
            calc(100vw - 20px)
        ) !important;

        min-width:min(
            240px,
            calc(100vw - 20px)
        ) !important;

        max-width:calc(
            100vw - 20px
        ) !important;

        height:auto !important;

        max-height:min(
            70vh,
            520px
        ) !important;

        margin:0 !important;

        padding:14px !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        transform:none !important;

        border-radius:14px !important;

        z-index:10050 !important;
    }


    .eco-global-header
    .eco-gh-user.is-open
    >
    .eco-gh-user-panel,

    .eco-global-header
    .user-box.is-open
    >
    .user-panel.eco-gh-user-panel,

    .eco-global-header
    .eco-gh-user.is-open:hover
    >
    .eco-gh-user-panel,

    .eco-global-header
    .user-box.is-open:hover
    >
    .user-panel.eco-gh-user-panel{

        display:block !important;

        visibility:visible !important;
        opacity:1 !important;

        pointer-events:auto !important;
    }


    .eco-global-header
    .eco-gh-user-panel
    .user-head{

        width:100% !important;

        height:auto !important;
        min-height:0 !important;

        display:flex !important;

        align-items:center !important;

        gap:10px !important;

        margin:0 0 10px !important;

        padding:0 0 10px !important;

        overflow:visible !important;
    }


    .eco-global-header
    .eco-gh-user-panel
    .user-head > div{

        min-width:0 !important;
    }


    .eco-global-header
    .eco-gh-user-panel
    .user-head strong{

        display:block !important;

        margin:0 !important;

        font-size:14px !important;
        line-height:1.35 !important;

        white-space:nowrap !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }


    .eco-global-header
    .eco-gh-user-panel
    .user-head p{

        margin:3px 0 0 !important;

        font-size:12px !important;
        line-height:1.4 !important;

        white-space:normal !important;
    }


    .eco-global-header
    .eco-gh-user-panel
    .user-menu{

        width:100% !important;

        height:auto !important;

        display:flex !important;

        flex-direction:column !important;

        gap:3px !important;

        margin:0 !important;
        padding:0 !important;

        overflow:visible !important;
    }


    .eco-global-header
    .eco-gh-user-panel
    .user-menu a{

        width:100% !important;

        min-width:0 !important;
        max-width:none !important;

        height:auto !important;

        display:flex !important;

        align-items:center !important;

        gap:8px !important;

        margin:0 !important;

        padding:10px 9px !important;

        border-radius:8px !important;

        white-space:nowrap !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;

        font-size:13px !important;

        transform:none !important;
    }


    .eco-global-header
    .eco-gh-user{

        position:relative !important;

        overflow:visible !important;

        z-index:20 !important;
    }


    .eco-global-header
    .eco-gh-user-btn{

        position:relative !important;

        z-index:2 !important;

        overflow:hidden !important;

        transform:none !important;
    }
}


@media (max-width:768px){


    body >
    header.eco-global-header >
    .eco-gh-inner{

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            auto
            !important;

        grid-template-rows:
            auto
            auto
            !important;

        align-items:center !important;

        column-gap:8px !important;
        row-gap:7px !important;
    }


    body >
    header.eco-global-header
    .eco-gh-left{

        grid-column:1 !important;
        grid-row:1 !important;

        align-self:center !important;

        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        transform:none !important;
    }


    body >
    header.eco-global-header
    .eco-gh-user.user-box{

        grid-column:2 !important;
        grid-row:1 !important;

        align-self:center !important;
        justify-self:end !important;

        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        width:auto !important;
        height:auto !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;

        overflow:visible !important;

        z-index:60 !important;
    }


    body >
    header.eco-global-header
    .eco-gh-user-btn.user-btn{

        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        width:auto !important;

        min-width:58px !important;
        max-width:78px !important;

        height:36px !important;

        margin:0 !important;

        padding:0 10px !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        transform:none !important;

        white-space:nowrap !important;
    }


    body >
    header.eco-global-header
    .eco-gh-center{

        grid-column:1 / -1 !important;
        grid-row:2 !important;

        width:100% !important;

        min-width:0 !important;
        max-width:100% !important;

        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        margin:0 !important;
        padding:0 !important;

        transform:none !important;
    }


    body >
    header.eco-global-header
    .eco-gh-user-panel.user-panel{

        position:fixed !important;

        top:
            var(
                --eco-user-panel-top,
                72px
            )
            !important;

        right:10px !important;
        left:auto !important;
        bottom:auto !important;

        width:
            min(
                300px,
                calc(100vw - 20px)
            )
            !important;

        min-width:0 !important;

        max-width:
            calc(100vw - 20px)
            !important;

        height:auto !important;

        max-height:
            calc(
                100dvh
                -
                var(
                    --eco-user-panel-top,
                    72px
                )
                -
                16px
            )
            !important;

        margin:0 !important;

        padding:14px !important;

        box-sizing:border-box !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        transform:none !important;

        border-radius:14px !important;

        z-index:10050 !important;
    }


    body >
    header.eco-global-header
    .eco-gh-user:not(.is-open)
    >
    .eco-gh-user-panel{

        display:none !important;

        visibility:hidden !important;
        opacity:0 !important;

        pointer-events:none !important;
    }


    body >
    header.eco-global-header
    .eco-gh-user.is-open
    >
    .eco-gh-user-panel{

        display:block !important;

        visibility:visible !important;
        opacity:1 !important;

        pointer-events:auto !important;
    }
}


@media (max-width:420px){

    body >
    header.eco-global-header
    .eco-gh-user-panel.user-panel{

        right:8px !important;

        width:
            min(
                286px,
                calc(100vw - 16px)
            )
            !important;

        max-width:
            calc(100vw - 16px)
            !important;

        padding:12px !important;
    }
}

@media (max-width:768px){
    @supports not (height:100dvh){
        body > header.eco-global-header .eco-gh-user-panel.user-panel{
            max-height:
                calc(
                    100vh
                    - var(--eco-user-panel-top,72px)
                    - 16px
                )
                !important;
        }
    }
}


@media (max-width:768px){
    body > header.eco-global-header > .eco-gh-inner{
        position:relative !important;
        min-height:0 !important;
    }

    body > header.eco-global-header .eco-gh-center{
        z-index:1 !important;
    }
}

@media (max-width:420px){
    body > header.eco-global-header .eco-gh-user-btn.user-btn{
        font-size:13px !important;
        line-height:1 !important;
    }
}


@media (max-width:768px){


    body >
    header.eco-global-header
    .eco-gh-search{

        position:relative !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        height:38px !important;

        margin:0 !important;
        padding:0 !important;

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            58px
            !important;

        align-items:stretch !important;

        gap:0 !important;

        background:#fff !important;

        border:
            1px solid
            rgba(61,132,49,.58)
            !important;

        border-radius:8px !important;

        overflow:hidden !important;

        box-shadow:none !important;

        box-sizing:border-box !important;

        transform:none !important;
    }


    body >
    header.eco-global-header
    .eco-gh-search
    input{

        grid-column:1 !important;

        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        height:36px !important;

        margin:0 !important;

        padding:
            0
            12px
            !important;

        border:0 !important;
        outline:0 !important;

        border-radius:
            7px
            0
            0
            7px
            !important;

        background:#fff !important;

        color:#475569 !important;

        font-size:14px !important;
        font-weight:400 !important;

        line-height:36px !important;

        box-shadow:none !important;

        transform:none !important;

        box-sizing:border-box !important;

        overflow:hidden !important;

        text-overflow:ellipsis !important;

        white-space:nowrap !important;
    }


    body >
    header.eco-global-header
    .eco-gh-search
    input::placeholder{

        color:#7b8491 !important;

        opacity:1 !important;

        font-size:14px !important;
        font-weight:400 !important;
    }


    body >
    header.eco-global-header
    .eco-gh-search
    button{

        grid-column:2 !important;

        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        float:none !important;

        width:58px !important;
        min-width:58px !important;
        max-width:58px !important;

        height:36px !important;
        min-height:36px !important;
        max-height:36px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        flex:0 0 58px !important;

        border:0 !important;

        border-left:
            1px solid
            rgba(61,132,49,.28)
            !important;

        border-radius:
            0
            7px
            7px
            0
            !important;

        background:#5b9b3f !important;

        color:#fff !important;


        font-size:0 !important;

        line-height:1 !important;

        text-indent:0 !important;

        white-space:nowrap !important;

        overflow:hidden !important;

        box-shadow:none !important;

        transform:none !important;

        box-sizing:border-box !important;

        cursor:pointer !important;
    }


    body >
    header.eco-global-header
    .eco-gh-search
    button::before{

        display:none !important;

        content:none !important;
    }


    body >
    header.eco-global-header
    .eco-gh-search
    button::after{

        content:"搜索" !important;

        display:block !important;

        margin:0 !important;
        padding:0 !important;

        color:#fff !important;

        font-size:13px !important;
        font-weight:700 !important;

        line-height:1 !important;

        letter-spacing:0 !important;

        white-space:nowrap !important;
    }


    body >
    header.eco-global-header
    .eco-gh-search
    button i,

    body >
    header.eco-global-header
    .eco-gh-search
    button svg,

    body >
    header.eco-global-header
    .eco-gh-search
    button span{

        display:none !important;
    }


    body >
    header.eco-global-header
    .eco-gh-search:focus-within{

        border-color:#4b8d35 !important;

        box-shadow:
            0 0 0 2px
            rgba(75,141,53,.08)
            !important;
    }


    body >
    header.eco-global-header
    .eco-gh-search
    button:active{

        background:#4d8836 !important;

        transform:none !important;
    }
}


@media (max-width:360px){

    body >
    header.eco-global-header
    .eco-gh-search{

        grid-template-columns:
            minmax(0,1fr)
            54px
            !important;
    }


    body >
    header.eco-global-header
    .eco-gh-search
    button{

        width:54px !important;
        min-width:54px !important;
        max-width:54px !important;

        flex-basis:54px !important;
    }


    body >
    header.eco-global-header
    .eco-gh-search
    input{

        padding-left:10px !important;

        font-size:13px !important;
    }


    body >
    header.eco-global-header
    .eco-gh-search
    input::placeholder{

        font-size:13px !important;
    }
}


@media (min-width:769px){
    body .eco-gh-search,
    body .eco-global-header .eco-gh-search,
    body header .eco-gh-search{
        display:flex !important;
        align-items:stretch !important;
        flex:1 1 auto !important;
        width:auto !important;
        min-width:0 !important;
        height:40px !important;
        margin:0 !important;
        padding:0 !important;
        gap:0 !important;
        overflow:visible !important;
        box-sizing:border-box !important;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        outline:0 !important;
        box-shadow:none !important;
    }

    body .eco-gh-search input[type="search"],
    body .eco-global-header .eco-gh-search input[type="search"],
    body header .eco-gh-search input[type="search"]{
        flex:1 1 auto !important;
        flex-shrink:1 !important;
        width:auto !important;
        min-width:0 !important;
        height:40px !important;
        margin:0 !important;
        padding:0 16px !important;
        line-height:40px !important;
        background:#fff !important;
        border:1px solid #fff !important;
        border-right:0 !important;
        border-radius:8px 0 0 8px !important;
        outline:0 !important;
        box-shadow:none !important;
        box-sizing:border-box !important;
        appearance:none !important;
        -webkit-appearance:none !important;
    }

    body .eco-gh-search button,
    body .eco-global-header .eco-gh-search button,
    body header .eco-gh-search button{
        flex:0 0 88px !important;
        flex-grow:0 !important;
        flex-shrink:0 !important;
        flex-basis:88px !important;
        width:88px !important;
        min-width:88px !important;
        max-width:88px !important;
        height:40px !important;
        min-height:40px !important;
        margin:0 !important;
        padding:0 12px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;
        border:1px solid rgba(255,255,255,.95) !important;
        border-radius:0 8px 8px 0 !important;
        background:rgba(67,155,58,.28) !important;
        color:#fff !important;
        white-space:nowrap !important;
        word-break:keep-all !important;
        overflow-wrap:normal !important;
        writing-mode:horizontal-tb !important;
        text-orientation:mixed !important;
        line-height:1 !important;
        text-align:center !important;
        outline:0 !important;
        box-shadow:none !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
        cursor:pointer !important;
        appearance:none !important;
        -webkit-appearance:none !important;
    }

    body .eco-gh-search::before,
    body .eco-gh-search::after,
    body .eco-gh-search button::before,
    body .eco-gh-search button::after{
        content:none !important;
        display:none !important;
        border:0 !important;
        outline:0 !important;
        box-shadow:none !important;
        background:none !important;
    }

    body .eco-gh-search button:hover{
        border-color:#fff !important;
        background:rgba(255,255,255,.12) !important;
    }

    body .eco-gh-search button:focus,
    body .eco-gh-search button:focus-visible,
    body .eco-gh-search button:active{
        border:1px solid #fff !important;
        outline:0 !important;
        box-shadow:0 0 0 1px rgba(255,255,255,.15) !important;
    }

    body .eco-gh-search button *,
    body .eco-gh-search button span{
        display:inline !important;
        width:auto !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
        white-space:nowrap !important;
        word-break:keep-all !important;
        writing-mode:horizontal-tb !important;
        line-height:1 !important;
    }
}


@media
(min-width:769px)
and
(max-width:1024px){


    .eco-global-header{

        position:relative !important;

        overflow:visible !important;
    }


    .eco-global-header
    .eco-gh-user{

        position:absolute !important;

        top:14px !important;

        right:14px !important;

        left:auto !important;

        z-index:10020 !important;

        display:block !important;

        visibility:visible !important;

        opacity:1 !important;

        width:54px !important;

        min-width:54px !important;

        max-width:54px !important;

        margin:0 !important;

        padding:0 !important;

        flex:0 0 54px !important;

        overflow:visible !important;
    }


    .eco-global-header
    .eco-gh-user-btn{

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        width:54px !important;

        min-width:54px !important;

        height:38px !important;

        margin:0 !important;

        padding:0 6px !important;

        box-sizing:border-box !important;

        white-space:nowrap !important;

        visibility:visible !important;

        opacity:1 !important;
    }


    .eco-global-header
    .eco-gh-user-panel{

        left:auto !important;

        right:0 !important;
    }


    .eco-global-header
    .eco-gh-search{

        width:
            calc(
                100% - 72px
            )
            !important;

        max-width:470px !important;

        min-width:0 !important;

        margin-left:auto !important;

        margin-right:auto !important;

        transform:
            translateX(-34px)
            !important;

        box-sizing:border-box !important;
    }


    .eco-global-header
    .eco-gh-search
    #ecoSearchInput{

        min-width:0 !important;

        flex:1 1 auto !important;
    }


    .eco-global-header
    .eco-gh-search
    #ecoSearchBtn{

        flex:0 0 auto !important;
    }


    .eco-global-header
    .eco-gh-nav{

        width:
            calc(
                100% - 72px
            )
            !important;

        max-width:470px !important;

        min-width:0 !important;

        margin:
            6px
            auto
            0
            !important;

        display:flex !important;

        align-items:center !important;

        justify-content:flex-start !important;

        gap:
            clamp(
                18px,
                2.5vw,
                28px
            )
            !important;

        transform:
            translateX(-34px)
            !important;

        white-space:nowrap !important;

        box-sizing:border-box !important;
    }


    .eco-global-header
    .eco-gh-nav
    a{

        flex:0 0 auto !important;

        white-space:nowrap !important;
    }

}


@media
(min-width:769px)
and
(max-width:860px){

    .eco-global-header
    .eco-gh-search{

        max-width:410px !important;

        transform:
            translateX(-24px)
            !important;
    }


    .eco-global-header
    .eco-gh-nav{

        max-width:410px !important;

        gap:18px !important;

        transform:
            translateX(-24px)
            !important;
    }

}


@media
(min-width:851px)
and
(max-width:1024px){


    header.eco-global-header
    .eco-gh-search{

        transform:
            translateX(-125px)
            !important;

        max-width:440px !important;
    }


    header.eco-global-header
    .eco-gh-nav{

        transform:
            translateX(-125px)
            !important;

        max-width:440px !important;

        gap:24px !important;

        justify-content:center !important;
    }


    header.eco-global-header
    .eco-gh-user{

        transform:none !important;

        right:14px !important;

        left:auto !important;
    }

}


@media
(min-width:769px)
and
(max-width:850px){

    header.eco-global-header
    .eco-gh-search{

        transform:
            translateX(-95px)
            !important;

        max-width:380px !important;
    }


    header.eco-global-header
    .eco-gh-nav{

        transform:
            translateX(-95px)
            !important;

        max-width:380px !important;

        gap:17px !important;

        justify-content:center !important;
    }


    header.eco-global-header
    .eco-gh-user{

        transform:none !important;

        right:12px !important;

        left:auto !important;
    }

}

@media (min-width:769px) and (max-width:1024px){
    body > header.eco-global-header .eco-gh-search{
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

/* HC_ECO_USER_BUTTON_STATE_START */

/*
 * 公共 Header「我的」交互状态
 * 所有消费者页面统一由这里控制。
 */

body .eco-global-header
.eco-gh-user.user-box
> .eco-gh-user-btn.user-btn{
    transition:
        background-color .18s ease,
        color .18s ease,
        box-shadow .18s ease !important;
}


/*
 * 桌面 / 鼠标设备：
 * 鼠标进入整个「我的」区域都显示绿色胶囊。
 */
@media (hover:hover) and (pointer:fine){

    body .eco-global-header
    .eco-gh-user.user-box:hover
    > .eco-gh-user-btn.user-btn,

    body .eco-global-header
    .eco-gh-user.user-box
    > .eco-gh-user-btn.user-btn:hover{

        background:
            rgba(
                55,
                116,
                42,
                .72
            )
            !important;

        color:#fff !important;

        border-radius:999px !important;

        box-shadow:none !important;
    }

}


/*
 * 用户菜单已打开时，
 * 即使鼠标离开按钮也保持选中状态。
 */
body .eco-global-header
.eco-gh-user.user-box.is-open
> .eco-gh-user-btn.user-btn{

    background:
        rgba(
            55,
            116,
            42,
            .72
        )
        !important;

    color:#fff !important;

    border-radius:999px !important;

    box-shadow:none !important;
}


/*
 * 图标与文字永远继承按钮颜色，
 * 防止其它页面单独改 SVG / label。
 */
body .eco-global-header
.eco-gh-user.user-box
> .eco-gh-user-btn.user-btn
.eco-gh-user-icon,

body .eco-global-header
.eco-gh-user.user-box
> .eco-gh-user-btn.user-btn
.eco-gh-user-label{

    color:inherit !important;
}

body .eco-global-header
.eco-gh-user.user-box
> .eco-gh-user-btn.user-btn
.eco-gh-user-icon svg{

    stroke:currentColor !important;
}

/* HC_ECO_USER_BUTTON_STATE_END */