/*
 * =========================================================
 * HC_ECO_MATERIAL_CATEGORY_UI_V1
 * =========================================================
 */


/* =========================================================
   PC HOME SIDEBAR
========================================================= */

.side-menu{
    position:relative;
    overflow:hidden;
}


.side-menu .menu-item{
    cursor:pointer;
}


.side-menu .menu-item.is-active{
    background:#f1f8ec;
    color:#39872f;
}


.hc-material-desktop-detail{
    margin-top:14px;
    padding-top:12px;

    border-top:1px solid #edf0eb;

    max-height:250px;

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

    scrollbar-width:thin;
}


.hc-material-detail-title{
    margin:0 0 10px;

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

    color:#315d28;
}


.hc-material-child{
    margin-bottom:12px;
}


.hc-material-child-title{
    margin-bottom:6px;

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

    color:#273444;
}


.hc-material-items{
    display:flex;
    flex-wrap:wrap;

    gap:5px;
}


.hc-material-item{
    display:inline-flex;

    align-items:center;

    max-width:100%;

    padding:4px 7px;

    border-radius:6px;

    background:#f5f7f4;

    color:#53605a;

    font-size:11px;
    line-height:1.25;

    text-decoration:none;

    transition:.15s;
}


.hc-material-item:hover{
    background:#e7f2df;
    color:#397d31;
}


/* =========================================================
   MOBILE DRAWER
========================================================= */

.hc-material-drawer{
    display:none;
}


@media(max-width:768px){

    /*
     * 首页原 side-menu 不在手机首屏展示。
     * 详细分类统一由底部“商城”入口承担。
     */
    .side-menu{
        display:none !important;
    }


    .hc-material-drawer{
        position:fixed;

        inset:0;

        display:none;

        z-index:12000;
    }


    .hc-material-drawer.is-open{
        display:block;
    }


    .hc-material-drawer-backdrop{
        position:absolute;

        inset:0;

        background:
            rgba(15,23,42,.36);

        backdrop-filter:
            blur(2px);
    }


    .hc-material-drawer-sheet{
        position:absolute;

        left:0;
        right:0;
        bottom:0;

        height:
            min(
                82dvh,
                720px
            );

        display:flex;
        flex-direction:column;

        background:#f7f9f6;

        border-radius:
            20px
            20px
            0
            0;

        overflow:hidden;

        box-shadow:
            0 -12px 40px
            rgba(15,23,42,.20);
    }


    .hc-material-drawer-head{
        flex:0 0 auto;

        display:flex;

        align-items:center;
        justify-content:space-between;

        min-height:58px;

        padding:10px 14px;

        background:#fff;

        border-bottom:
            1px solid #e8ece6;
    }


    .hc-material-drawer-title strong{
        display:block;

        font-size:17px;
        line-height:1.3;

        color:#183414;
    }


    .hc-material-drawer-title span{
        display:block;

        margin-top:2px;

        color:#859084;

        font-size:11px;
    }


    .hc-material-drawer-close{
        width:36px;
        height:36px;

        display:flex;

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

        border:0;

        border-radius:50%;

        background:#f1f4ef;

        color:#435041;

        font-size:22px;

        cursor:pointer;
    }


    .hc-material-drawer-body{
        flex:1 1 auto;

        min-height:0;

        overflow-y:auto;

        padding:
            10px
            10px
            calc(
                72px
                +
                env(safe-area-inset-bottom)
            );
    }


    .hc-material-mobile-category{
        margin-bottom:9px;

        background:#fff;

        border:
            1px solid #e6ebe3;

        border-radius:14px;

        overflow:hidden;
    }


    .hc-material-mobile-category-btn{
        width:100%;

        min-height:48px;

        display:flex;

        align-items:center;
        justify-content:space-between;

        gap:10px;

        padding:10px 12px;

        border:0;

        background:#fff;

        color:#1d3320;

        text-align:left;

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

        cursor:pointer;
    }


    .hc-material-mobile-category-btn i{
        margin-right:7px;

        color:#579e42;
    }


    .hc-material-mobile-arrow{
        transition:
            transform .16s ease;
    }


    .hc-material-mobile-category.is-open
    .hc-material-mobile-arrow{
        transform:
            rotate(90deg);
    }


    .hc-material-mobile-content{
        display:none;

        padding:
            0
            12px
            12px;
    }


    .hc-material-mobile-category.is-open
    .hc-material-mobile-content{
        display:block;
    }


    .hc-material-mobile-child{
        padding:
            10px
            0;

        border-top:
            1px solid #eef1ec;
    }


    .hc-material-mobile-child-title{
        margin-bottom:8px;

        font-size:13px;
        font-weight:800;

        color:#3f4c41;
    }


    .hc-material-mobile-items{
        display:flex;

        flex-wrap:wrap;

        gap:7px;
    }


    .hc-material-mobile-item{
        display:inline-flex;

        align-items:center;

        padding:
            7px
            9px;

        border-radius:8px;

        background:#f2f6ef;

        color:#4d594d;

        text-decoration:none;

        font-size:12px;
        line-height:1.25;
    }


    .hc-material-mobile-item:active{
        background:#e4f0dc;
        color:#347d2b;
    }


    body.hc-material-drawer-open{
        overflow:hidden !important;
    }


    /*
     * 商城打开时底部商城按钮高亮。
     */

    body.hc-material-drawer-open
    .eco-mobile-bottom-nav
    [data-eco-material-open]{

        color:#2f8f35 !important;
        font-weight:800;
    }


    body.hc-material-drawer-open
    .eco-mobile-bottom-nav
    [data-eco-material-open]
    .eco-mbn-icon{

        color:#2f8f35 !important;
    }
}



/*
 * =========================================================
 * HC_ECO_MATERIAL_DESKTOP_FLYOUT_V2
 * =========================================================
 *
 * PC ONLY
 *
 * 一级分类：
 * 左侧固定
 *
 * 二级 + 三级：
 * 鼠标悬停后在右侧弹窗显示
 *
 * MOBILE <=768：
 * 完全不修改，继续使用抽屉。
 */

@media (min-width:769px){

    /*
     * Hero 必须允许弹层越出左侧卡片。
     */
    .hero{
        position:relative !important;

        overflow:visible !important;
    }


    /*
     * 左侧菜单恢复固定一级分类区域。
     *
     * 不再在左卡片内部滚动二三级分类。
     */
    .hero
    .side-menu#eco-material-categories{

        position:relative !important;

        overflow:visible !important;

        z-index:80 !important;
    }


    /*
     * 一级分类始终保持可点。
     */
    .hero
    .side-menu#eco-material-categories
    .menu-item{

        position:relative !important;

        z-index:2 !important;

        cursor:pointer !important;
    }


    /*
     * -----------------------------------------------------
     * DETAIL PANEL
     * -----------------------------------------------------
     *
     * 原来：
     * position normal
     * 出现在一级菜单下面
     *
     * 现在：
     * absolute
     * 弹到一级菜单右侧
     */

    .hero
    .side-menu#eco-material-categories
    .hc-material-desktop-detail{

        position:absolute !important;

        top:0 !important;

        left:calc(100% + 12px) !important;

        /*
         * 默认隐藏。
         * 鼠标进入一级分类后显示。
         */
        display:none !important;

        width:
            clamp(
                520px,
                43vw,
                720px
            )
            !important;

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

        max-height:
            min(
                500px,
                calc(100vh - 150px)
            )
            !important;

        margin:0 !important;

        padding:18px 20px !important;

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

        background:#fff !important;

        border:
            1px solid
            #e7ece5
            !important;

        border-radius:16px !important;

        box-shadow:
            0 18px 50px
            rgba(15,23,42,.18)
            !important;

        z-index:500 !important;

        box-sizing:border-box !important;

        scrollbar-width:thin !important;
    }


    /*
     * 一级菜单处于 hover/open 状态时显示。
     */
    .hero
    .side-menu#eco-material-categories
    .hc-material-desktop-detail.is-open,

    .hero
    .side-menu#eco-material-categories.hc-material-flyout-open
    .hc-material-desktop-detail{

        display:block !important;
    }


    /*
     * 顶部分类标题
     */
    .hero
    .side-menu#eco-material-categories
    .hc-material-detail-title{

        position:sticky !important;

        top:-18px !important;

        z-index:5 !important;

        margin:
            -18px
            -20px
            15px
            !important;

        padding:
            16px
            20px
            13px
            !important;

        background:
            rgba(
                255,
                255,
                255,
                .97
            )
            !important;

        border-bottom:
            1px solid
            #edf1ea
            !important;

        color:#284f22 !important;

        font-size:17px !important;

        font-weight:800 !important;

        line-height:1.35 !important;

        backdrop-filter:
            blur(8px);
    }


    /*
     * 二级分类采用两列布局，
     * 不再纵向堆成一条长列表。
     */
    .hero
    .side-menu#eco-material-categories
    .hc-material-desktop-detail{

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


    .hero
    .side-menu#eco-material-categories
    .hc-material-child{

        padding:0 !important;

        margin:
            0
            0
            18px
            !important;
    }


    .hero
    .side-menu#eco-material-categories
    .hc-material-child-title{

        margin-bottom:8px !important;

        color:#253629 !important;

        font-size:14px !important;

        font-weight:800 !important;

        line-height:1.35 !important;
    }


    /*
     * 三级明细项。
     */
    .hero
    .side-menu#eco-material-categories
    .hc-material-items{

        display:flex !important;

        flex-wrap:wrap !important;

        gap:7px !important;
    }


    .hero
    .side-menu#eco-material-categories
    .hc-material-item{

        display:inline-flex !important;

        align-items:center !important;

        min-height:30px !important;

        max-width:100% !important;

        padding:
            6px
            9px
            !important;

        background:#f5f7f3 !important;

        border:
            1px solid
            #edf0eb
            !important;

        border-radius:8px !important;

        color:#4c5a4d !important;

        font-size:12px !important;

        line-height:1.25 !important;

        text-decoration:none !important;

        white-space:normal !important;

        cursor:pointer !important;
    }


    .hero
    .side-menu#eco-material-categories
    .hc-material-item:hover{

        background:#e8f3e2 !important;

        border-color:#cfe5c6 !important;

        color:#2f7f2a !important;

        transform:none !important;
    }


    /*
     * 当前一级分类明显高亮。
     */
    .hero
    .side-menu#eco-material-categories
    .menu-item.is-active{

        background:#eef7e9 !important;

        color:#397f31 !important;
    }


    /*
     * 菜单与弹窗之间增加透明桥接区。
     *
     * 鼠标从一级分类向右移动时，
     * 不会因为中间 12px 空隙导致弹窗消失。
     */
    .hero
    .side-menu#eco-material-categories
    .hc-material-desktop-detail::before{

        content:"" !important;

        position:absolute !important;

        top:0 !important;

        left:-14px !important;

        width:14px !important;

        height:100% !important;
    }
}


/*
 * =========================================================
 * MID-SIZE DESKTOP
 * =========================================================
 */

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

    .hero
    .side-menu#eco-material-categories
    .hc-material-desktop-detail{

        width:
            min(
                560px,
                calc(
                    100vw
                    -
                    320px
                )
            )
            !important;

        padding:
            16px
            17px
            !important;
    }
}



/*
 * =========================================================
 * HC_ECO_SERVICE_CHILD_LINK_STYLE_V2
 * =========================================================
 *
 * Only adds clickable behavior to category 6 children.
 */

@media(min-width:769px){

    .hero
    .side-menu#eco-material-categories
    .hc-material-service-link{

        display:flex !important;

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

        min-height:34px !important;

        padding:
            7px
            9px
            !important;

        box-sizing:border-box !important;

        border-radius:8px !important;

        background:#f3f7f1 !important;

        color:#34792f !important;

        text-decoration:none !important;

        cursor:pointer !important;
    }


    .hero
    .side-menu#eco-material-categories
    .hc-material-service-link::after{

        content:"查看 →";

        margin-left:10px;

        color:#6d9e62;

        font-size:11px;

        font-weight:600;
    }


    .hero
    .side-menu#eco-material-categories
    .hc-material-service-link:hover{

        background:#e7f2e1 !important;

        color:#2d7428 !important;
    }
}


@media(max-width:768px){

    .hc-material-mobile-child-title.hc-material-service-link{

        display:flex !important;

        align-items:center;
        justify-content:space-between;

        min-height:38px;

        margin:0;

        padding:
            7px
            9px;

        box-sizing:border-box;

        border-radius:8px;

        background:#f1f6ee;

        color:#367b31;

        text-decoration:none;

        font-weight:800;
    }


    .hc-material-mobile-child-title.hc-material-service-link::after{

        content:"查看 →";

        margin-left:10px;

        color:#73a36a;

        font-size:11px;

        font-weight:600;
    }
}



/*
 * =========================================================
 * HC_ECO_SERVICE_CTA_VIEW_FINAL_V1
 * =========================================================
 *
 * Public service directory CTA:
 *
 * 进入 → 查看
 *
 * No route / onboarding / business logic change.
 */