/* =====================================================
   绘城生态首页 Responsive V2
   仅覆盖布局
   ===================================================== */

html,
body{
    margin:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
}

*{
    box-sizing:border-box!important;
}


/* =========================
   Header
   ========================= */

body > header.header{
    width:100%!important;
    height:auto!important;
    min-height:90px!important;
}

body > header.header > .header-inner{
    width:calc(100% - 40px)!important;
    max-width:1500px!important;
    min-width:0!important;

    height:auto!important;
    min-height:90px!important;

    margin:0 auto!important;
    padding:10px 0 8px!important;

    position:relative!important;

    display:grid!important;

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

    grid-template-areas:
        "logo city center user"!important;

    column-gap:24px!important;

    align-items:center!important;
}


/* logo */

body > header.header .logo{
    grid-area:logo!important;

    position:static!important;
    inset:auto!important;
    transform:none!important;

    margin:0!important;
}


/* 城市 */

body > header.header .location{
    grid-area:city!important;

    position:static!important;
    inset:auto!important;
    transform:none!important;

    margin:0!important;

    white-space:nowrap!important;
}


/* 中间区域 */

body > header.header .header-center{
    grid-area:center!important;

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

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
}


/* 搜索 */

body > header.header .search{
    position:static!important;
    inset:auto!important;
    transform:none!important;

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

    height:42px!important;

    margin:0!important;

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

body > header.header .search input{
    width:0!important;
    min-width:0!important;

    flex:1 1 auto!important;
}

body > header.header .search button{
    width:90px!important;
    min-width:90px!important;

    flex:0 0 90px!important;
}


/* 导航 */

body > header.header .nav{
    position:static!important;
    inset:auto!important;

    transform:none!important;

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

    margin:6px 0 0!important;

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

    gap:clamp(16px,2.5vw,45px)!important;

    white-space:nowrap!important;
}


/* 我的 */

body > header.header .user-box{
    grid-area:user!important;

    position:relative!important;
    min-width:0!important;
}

body > header.header .user-btn{
    position:static!important;
    inset:auto!important;
    transform:none!important;

    margin:0!important;

    white-space:nowrap!important;
}


/* =========================
   首页 HERO
   ========================= */

body > section.hero{
    width:calc(100% - 40px)!important;
    max-width:1600px!important;
    min-width:0!important;

    height:auto!important;
    max-height:none!important;

    margin:18px auto!important;
    padding:0!important;

    display:grid!important;

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

    gap:18px!important;

    overflow:visible!important;
}


/* 左侧商城 */

body > section.hero .side-menu{
    width:100%!important;
    min-width:0!important;

    height:auto!important;
    max-height:none!important;

    overflow:visible!important;
}


/* HERO右区 */

body > section.hero .hero-main{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    height:auto!important;

    overflow:hidden!important;
}


/* 五宫格 */

body > section.hero .eco-banner-grid{
    width:100%!important;
    min-width:0!important;

    height:420px!important;

    display:grid!important;

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

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

    gap:14px!important;

    overflow:hidden!important;
}

body > section.hero .eco-banner-grid > *{
    min-width:0!important;
}


/* =========================
   内容区域
   ========================= */

body > section.section,
.top-notice-inner{
    width:calc(100% - 40px)!important;
    max-width:1600px!important;
    min-width:0!important;

    margin-left:auto!important;
    margin-right:auto!important;
}


/* =========================
   商品
   ========================= */

#realProductGrid,
.product-flow-grid{
    width:100%!important;
    min-width:0!important;

    display:grid!important;
    grid-template-columns:
        repeat(6,minmax(0,1fr))!important;
}


/* =========================
   1366 / 1280
   ========================= */

@media(max-width:1400px){

    body > header.header > .header-inner{
        width:calc(100% - 30px)!important;

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

        column-gap:16px!important;
    }

    body > header.header .logo img{
        width:58px!important;
        height:58px!important;
    }

    body > header.header .logo-text strong{
        font-size:34px!important;
        letter-spacing:2px!important;
    }

    body > header.header .nav{
        gap:20px!important;
    }

    body > section.hero{
        width:calc(100% - 30px)!important;

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

    body > section.section,
    .top-notice-inner{
        width:calc(100% - 30px)!important;
    }

    #realProductGrid,
    .product-flow-grid{
        grid-template-columns:
            repeat(5,minmax(0,1fr))!important;
    }
}


/* =========================
   1100以下
   ========================= */

@media(max-width:1100px){

    body > header.header > .header-inner{
        grid-template-columns:
            max-content
            minmax(0,1fr)
            max-content!important;

        grid-template-areas:
            "logo city user"
            "center center center"!important;

        row-gap:8px!important;
    }

    body > header.header .search{
        max-width:none!important;
    }

    body > section.hero{
        grid-template-columns:1fr!important;
    }

    body > section.hero .side-menu{
        display:none!important;
    }

    body > section.hero .eco-banner-grid{
        height:auto!important;

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

        grid-template-rows:auto!important;
    }

    body > section.hero .banner-main{
        grid-column:1 / -1!important;
        min-height:260px!important;
    }

    #realProductGrid,
    .product-flow-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr))!important;
    }
}


/* =========================
   手机
   ========================= */

@media(max-width:768px){

    body > header.header > .header-inner{
        width:calc(100% - 24px)!important;

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

        grid-template-areas:
            "logo user"
            "city city"
            "center center"!important;
    }

    body > header.header .logo img{
        width:50px!important;
        height:50px!important;
    }

    body > header.header .logo-text strong{
        font-size:28px!important;
    }

    body > header.header .nav{
        width:100%!important;

        justify-content:flex-start!important;

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

        scrollbar-width:none!important;
    }

    body > header.header .nav::-webkit-scrollbar{
        display:none!important;
    }

    body > header.header .nav a{
        flex:0 0 auto!important;
    }

    body > section.hero,
    body > section.section,
    .top-notice-inner{
        width:calc(100% - 24px)!important;
    }

    body > section.hero .eco-banner-grid{
        grid-template-columns:1fr!important;
    }

    body > section.hero .banner-main{
        grid-column:auto!important;
    }

    #realProductGrid,
    .product-flow-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr))!important;

        gap:10px!important;
    }
}


/* =====================================================
   首页装修材料分类 - 统一响应式
   ===================================================== */

#realCategoryGrid,
.category-grid{
    width:100%!important;
    min-width:0!important;

    display:grid!important;
    grid-template-columns:repeat(10,minmax(0,1fr))!important;

    gap:14px!important;
    align-items:stretch!important;
}

/* 每一个分类尺寸完全统一 */
#realCategoryGrid > .category,
.category-grid > .category{
    width:100%!important;
    min-width:0!important;

    height:64px!important;
    min-height:64px!important;

    margin:0!important;
    padding:0 12px!important;

    border-radius:20px!important;

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

    text-align:center!important;

    overflow:hidden!important;
}

/* 分类名称 */
#realCategoryGrid > .category > div,
.category-grid > .category > div{
    width:100%!important;

    font-size:15px!important;
    line-height:22px!important;
    font-weight:700!important;

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

/* 图标尺寸统一 */

/* 小说明统一 */


/* 1280左右仍保持一排，但收紧 */
@media(max-width:1400px){

    #realCategoryGrid,
    .category-grid{
        gap:10px!important;
    }

    #realCategoryGrid > .category,
    .category-grid > .category{
        padding:0 7px!important;
        border-radius:17px!important;
    }

    #realCategoryGrid > .category > div,
    .category-grid > .category > div{
        font-size:14px!important;
    }
}


/* 平板：5列 */
@media(max-width:1100px){

    #realCategoryGrid,
    .category-grid{
        grid-template-columns:
            repeat(5,minmax(0,1fr))!important;
    }
}


/* 小平板：4列 */
@media(max-width:768px){

    #realCategoryGrid,
    .category-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr))!important;

        gap:9px!important;
    }

    #realCategoryGrid > .category,
    .category-grid > .category{
        height:60px!important;
        min-height:60px!important;
        border-radius:15px!important;
    }
}


/* 手机：2列 */
@media(max-width:480px){

    #realCategoryGrid,
    .category-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr))!important;
    }
}


/* ===== HUICheng ECO MOBILE HEADER FINAL 20260906 ===== */

.user-menu .eco-logout-entry{
    color:#e5484d;
}

.user-menu .eco-login-entry i,
.user-menu .eco-logout-entry i{
    width:20px;
    margin-right:8px;
    text-align:center;
}

@media (max-width:768px){

    html,
    body{
        max-width:100%;
        overflow-x:hidden;
    }

    .header{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        position:relative;
        z-index:1000;
    }

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

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

        margin:0 !important;
        padding:10px 12px 12px !important;

        display:grid !important;

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

        grid-template-areas:
            "ecoLogo ecoLocation ecoUser"
            "ecoSearch ecoSearch ecoSearch" !important;

        align-items:center !important;

        column-gap:10px !important;
        row-gap:10px !important;

        overflow:visible !important;
    }

    .header .logo{
        grid-area:ecoLogo !important;

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

        margin:0 !important;

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

    .header .logo img{
        flex:0 0 auto;
        max-width:38px !important;
        height:auto !important;
    }

    .header .logo-text{
        min-width:0 !important;
    }

    .header .logo-text strong{
        white-space:nowrap;
    }

    .header .location{
        grid-area:ecoLocation !important;

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

        margin:0 !important;
        padding:7px 8px !important;

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

        white-space:nowrap !important;
    }

    .header #currentLocation{
        display:block !important;

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

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

    .header-center{
        grid-area:ecoSearch !important;

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

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

        display:block !important;
    }

    .header-center .nav,
    .header .nav{
        display:none !important;
    }

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

        margin:0 !important;

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

        gap:8px !important;
    }

    .header .search input,
    #ecoSearchInput{
        flex:1 1 auto !important;

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

        height:44px !important;

        margin:0 !important;

        padding:0 13px !important;

        font-size:16px !important;

        border-radius:11px !important;

        box-sizing:border-box !important;
    }

    .header .search button{
        flex:0 0 78px !important;

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

        height:44px !important;

        margin:0 !important;
        padding:0 8px !important;

        border-radius:11px !important;

        white-space:nowrap !important;

        font-size:13px !important;
    }

    .header .user-box{
        grid-area:ecoUser !important;

        position:relative !important;

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

        margin:0 !important;

        justify-self:end !important;

        z-index:1100 !important;
    }

    .header .user-btn{
        min-width:44px !important;
        height:40px !important;

        margin:0 !important;
        padding:0 9px !important;

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

        gap:5px !important;

        border-radius:10px !important;

        white-space:nowrap !important;

        cursor:pointer !important;
    }

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

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

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

        margin:0 !important;

        z-index:99999 !important;

        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;

        transform:
            translateY(-8px) !important;

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease !important;
    }

    .header .user-box.is-open .user-panel{
        display:block !important;

        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;

        transform:
            translateY(0) !important;
    }

    /*
     * 手机不依赖 hover，
     * 避免手指触摸后菜单状态异常
     */
    .header .user-box:hover .user-panel{
        pointer-events:none;
    }

    .header .user-box.is-open:hover .user-panel{
        pointer-events:auto;
    }

    .header .user-menu a{
        min-height:44px !important;

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

        box-sizing:border-box !important;
    }
}

@media (max-width:480px){

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

        column-gap:7px !important;

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

    .header .logo img{
        max-width:34px !important;
    }

    .header .logo-text small{
        display:none !important;
    }

    .header .location{
        max-width:98px !important;
    }

    .header #currentLocation{
        max-width:57px !important;
    }

    .header .search button{
        flex-basis:68px !important;

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

        padding:0 5px !important;
    }

    .header .user-btn{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .header .user-panel{
        width:260px !important;
        min-width:220px !important;
    }
}

@media (max-width:360px){

    .header .location{
        max-width:86px !important;
    }

    .header #currentLocation{
        max-width:46px !important;
    }

    .header .search button{
        flex-basis:62px !important;

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

        font-size:12px !important;
    }
}

/* ===== /HUICheng ECO MOBILE HEADER FINAL 20260906 ===== */