/*
 * ============================================================
 * 绘城MALL Buyer Home UI V4
 * HC_BUYER_HOME_V4
 * ============================================================
 */

:root{
    --hc-green:#4fa23c;
    --hc-green-dark:#347d2b;
    --hc-green-soft:#eef8ec;
    --hc-blue:#426fe8;
    --hc-gold:#f1aa28;
    --hc-text:#172033;
    --hc-sub:#70798a;
    --hc-border:#e8ebf0;
    --hc-bg:#f6f8fa;
    --hc-card:#ffffff;
    --hc-shadow:0 12px 36px rgba(24,34,52,.07);
}

.hc-buyer-home-v4,
.hc-buyer-home-v4 *{
    box-sizing:border-box;
}

.hc-buyer-home-v4{
    width:100%;
    background:#fff;
    color:var(--hc-text);
}

.hc-buyer-home-v4 a{
    text-decoration:none;
    color:inherit;
}

.hc-v4-container{
    width:min(1480px,calc(100% - 48px));
    margin:0 auto;
}


/* ============================================================
 * 保留商城分类节点给 iPad 原有弹层使用
 * PC首页不再显示老式左侧菜单
 * ============================================================ */

.hc-buyer-home-v4 .hc-v4-home-shell{
    position:relative;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    min-height:0 !important;
}

.hc-buyer-home-v4 .hc-v4-home-shell > .side-menu{
    position:absolute !important;
    left:-99999px !important;
    top:0 !important;
    width:280px !important;
    opacity:0;
    pointer-events:none;
}


/* ============================================================
 * HERO
 * ============================================================ */

.hc-v4-hero{
    position:relative;
    overflow:hidden;
    min-height:380px;
    background:
        radial-gradient(
            circle at 78% 24%,
            rgba(108,196,86,.34),
            transparent 34%
        ),
        linear-gradient(
            120deg,
            #f5fbf2 0%,
            #ffffff 48%,
            #edf6ff 100%
        );
    border-bottom:1px solid #edf0f3;
}

.hc-v4-hero::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-170px;
    bottom:-250px;
    border-radius:50%;
    background:rgba(74,157,57,.08);
}

.hc-v4-hero-inner{
    position:relative;
    z-index:2;
    width:min(1480px,calc(100% - 48px));
    min-height:380px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1.14fr) minmax(430px,.86fr);
    align-items:center;
    gap:64px;
    padding:52px 0;
}

.hc-v4-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:17px;
    color:var(--hc-green-dark);
    font-size:15px;
    font-weight:700;
}

.hc-v4-kicker::before{
    content:"";
    width:28px;
    height:3px;
    border-radius:999px;
    background:var(--hc-green);
}

.hc-v4-hero h1{
    margin:0;
    font-size:58px;
    line-height:1.05;
    letter-spacing:-2px;
    font-weight:900;
}

.hc-v4-hero h1 em{
    color:var(--hc-green);
    font-style:normal;
}

.hc-v4-hero-subtitle{
    margin:18px 0 0;
    font-size:22px;
    font-weight:700;
    color:#303a4b;
}

.hc-v4-hero-desc{
    max-width:680px;
    margin:13px 0 0;
    font-size:16px;
    line-height:1.8;
    color:var(--hc-sub);
}

.hc-v4-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}

.hc-v4-btn{
    min-height:46px;
    padding:0 22px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-size:15px;
    font-weight:800;
    transition:.18s ease;
}

.hc-v4-btn:hover{
    transform:translateY(-2px);
}

.hc-v4-btn.primary{
    color:#fff;
    background:var(--hc-green);
    box-shadow:0 8px 20px rgba(79,162,60,.24);
}

.hc-v4-btn.blue{
    color:#fff;
    background:var(--hc-blue);
}

.hc-v4-btn.light{
    color:#273043;
    background:#fff;
    border:1px solid var(--hc-border);
}


/* HERO RIGHT */

.hc-v4-hero-board{
    position:relative;
    padding:24px;
    border:1px solid rgba(255,255,255,.8);
    border-radius:26px;
    background:rgba(255,255,255,.76);
    backdrop-filter:blur(12px);
    box-shadow:0 24px 70px rgba(33,60,43,.13);
}

.hc-v4-board-brand{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
}

.hc-v4-board-brand img{
    width:58px;
    height:58px;
    object-fit:contain;
}

.hc-v4-board-brand strong{
    display:block;
    font-size:24px;
}

.hc-v4-board-brand span{
    display:block;
    margin-top:4px;
    color:var(--hc-sub);
    font-size:13px;
}

.hc-v4-board-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.hc-v4-board-item{
    min-height:104px;
    padding:18px;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.hc-v4-board-item i{
    font-size:24px;
}

.hc-v4-board-item strong{
    font-size:17px;
}

.hc-v4-board-item span{
    font-size:12px;
    opacity:.76;
}

.hc-v4-board-item.green{
    background:#e8f5e5;
    color:#317d29;
}

.hc-v4-board-item.blue{
    background:#ebf1ff;
    color:#3563c9;
}

.hc-v4-board-item.gold{
    background:#fff4dc;
    color:#9e6a00;
}

.hc-v4-board-item.purple{
    background:#f1edff;
    color:#7254c9;
}


/* ============================================================
 * 六大核心入口
 * ============================================================ */

.hc-v4-quick{
    position:relative;
    z-index:5;
    margin-top:-18px;
}

.hc-v4-quick-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px;
    padding:16px;
    border:1px solid var(--hc-border);
    border-radius:22px;
    background:#fff;
    box-shadow:var(--hc-shadow);
}

.hc-v4-quick-item{
    min-height:100px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border-radius:16px;
    transition:.16s ease;
}

.hc-v4-quick-item:hover{
    background:#f7f9fb;
    transform:translateY(-2px);
}

.hc-v4-quick-icon{
    flex:0 0 46px;
    width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:20px;
}

.hc-v4-quick-item:nth-child(1) .hc-v4-quick-icon{
    background:#ff7757;
}

.hc-v4-quick-item:nth-child(2) .hc-v4-quick-icon{
    background:#497bec;
}

.hc-v4-quick-item:nth-child(3) .hc-v4-quick-icon{
    background:#f2ad32;
}

.hc-v4-quick-item:nth-child(4) .hc-v4-quick-icon{
    background:#7f65e8;
}

.hc-v4-quick-item:nth-child(5) .hc-v4-quick-icon{
    background:#42ba94;
}

.hc-v4-quick-item:nth-child(6) .hc-v4-quick-icon{
    background:#e95e76;
}

.hc-v4-quick-copy strong{
    display:block;
    font-size:15px;
    margin-bottom:5px;
}

.hc-v4-quick-copy span{
    display:block;
    color:var(--hc-sub);
    font-size:12px;
    line-height:1.45;
}


/* ============================================================
 * 通用 section
 * ============================================================ */

.hc-v4-section{
    padding-top:34px;
}

.hc-v4-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:16px;
}

.hc-v4-section-title{
    display:flex;
    align-items:center;
    gap:10px;
}

.hc-v4-section-title::before{
    content:"";
    width:5px;
    height:25px;
    border-radius:999px;
    background:var(--hc-green);
}

.hc-v4-section-title h2{
    margin:0;
    font-size:24px;
    line-height:1.2;
}

.hc-v4-section-title p{
    margin:0 0 1px 8px;
    color:var(--hc-sub);
    font-size:13px;
}

.hc-v4-more{
    color:#758094;
    font-size:13px;
}


/* ============================================================
 * 材料快捷入口
 * ============================================================ */

.hc-v4-material-grid{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:12px;
}

.hc-v4-material{
    min-height:90px;
    padding:15px;
    border:1px solid var(--hc-border);
    border-radius:16px;
    background:#fff;
    transition:.16s ease;
}

.hc-v4-material:hover{
    border-color:#bdddb6;
    background:#f8fcf7;
    transform:translateY(-2px);
}

.hc-v4-material strong{
    display:block;
    font-size:15px;
}

.hc-v4-material span{
    display:block;
    margin-top:6px;
    color:var(--hc-sub);
    font-size:12px;
}


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

.hc-buyer-home-v4 .product-flow-grid{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:14px !important;
}

.hc-buyer-home-v4 .product-flow-grid > *{
    min-width:0;
}


/* ============================================================
 * 双栏商业区
 * ============================================================ */

.hc-v4-commercial-grid{
    display:grid;
    grid-template-columns:1.12fr .88fr;
    gap:24px;
    align-items:start;
}

.hc-v4-panel{
    min-width:0;
}


/* 商家 */

.hc-v4-supplier-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
}

.hc-v4-supplier-card{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:14px;
    padding:12px;
    border:1px solid var(--hc-border);
    border-radius:17px;
    background:#fff;
    transition:.16s ease;
}

.hc-v4-supplier-card:hover{
    border-color:#cbdac7;
    box-shadow:0 9px 24px rgba(31,45,38,.07);
}

.hc-v4-supplier-image{
    width:112px;
    height:92px;
    border-radius:12px;
    overflow:hidden;
    background:#edf1f3;
}

.hc-v4-supplier-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.hc-v4-supplier-image-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#edf5ea,#eef3fb);
    color:#5f6e63;
    font-size:26px;
}

.hc-v4-supplier-copy{
    min-width:0;
}

.hc-v4-supplier-copy strong{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:15px;
}

.hc-v4-supplier-copy p{
    margin:7px 0;
    color:var(--hc-sub);
    font-size:12px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.hc-v4-badges{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.hc-v4-badge{
    padding:3px 7px;
    border-radius:6px;
    background:#eef8ec;
    color:#438437;
    font-size:11px;
}

.hc-v4-card-link{
    display:inline-flex;
    margin-top:9px;
    color:var(--hc-green-dark);
    font-size:12px;
    font-weight:800;
}


/* 工人 */

.hc-v4-worker-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
}

.hc-v4-worker{
    min-height:128px;
    padding:16px;
    border:1px solid var(--hc-border);
    border-radius:17px;
    background:#fff;
}

.hc-v4-worker-top{
    display:flex;
    align-items:center;
    gap:12px;
}

.hc-v4-worker-icon{
    width:45px;
    height:45px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef8ec;
    color:var(--hc-green-dark);
    font-size:20px;
}

.hc-v4-worker strong{
    display:block;
    font-size:15px;
}

.hc-v4-worker span{
    display:block;
    margin-top:3px;
    color:var(--hc-sub);
    font-size:12px;
}

.hc-v4-worker a{
    display:inline-flex;
    margin-top:13px;
    color:var(--hc-green-dark);
    font-size:12px;
    font-weight:800;
}


/* ============================================================
 * 需求
 * ============================================================ */

.hc-v4-demand-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.hc-v4-demand{
    min-height:150px;
    padding:19px;
    border:1px solid var(--hc-border);
    border-radius:18px;
    background:#fff;
}

.hc-v4-demand-label{
    display:inline-flex;
    padding:5px 9px;
    border-radius:7px;
    background:#eef8ec;
    color:var(--hc-green-dark);
    font-size:11px;
    font-weight:800;
}

.hc-v4-demand h3{
    margin:13px 0 7px;
    font-size:17px;
}

.hc-v4-demand p{
    margin:0;
    color:var(--hc-sub);
    font-size:13px;
    line-height:1.65;
}


/* ============================================================
 * 专业服务
 * ============================================================ */

.hc-v4-service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.hc-v4-service{
    min-height:138px;
    padding:21px;
    border-radius:18px;
    color:#fff !important;
    overflow:hidden;
    position:relative;
}

.hc-v4-service:nth-child(1){
    background:linear-gradient(135deg,#3a8040,#6ebd64);
}

.hc-v4-service:nth-child(2){
    background:linear-gradient(135deg,#315ca9,#5d83d4);
}

.hc-v4-service:nth-child(3){
    background:linear-gradient(135deg,#916419,#d19b3c);
}

.hc-v4-service:nth-child(4){
    background:linear-gradient(135deg,#5e4a94,#846cc2);
}

.hc-v4-service i{
    font-size:25px;
    opacity:.92;
}

.hc-v4-service h3{
    margin:20px 0 4px;
    font-size:18px;
}

.hc-v4-service span{
    font-size:12px;
    opacity:.86;
}


/* ============================================================
 * 信任区
 * ============================================================ */

.hc-v4-trust{
    margin-top:38px;
    padding:22px 0;
    border-top:1px solid var(--hc-border);
    border-bottom:1px solid var(--hc-border);
    background:#fafbfc;
}

.hc-v4-trust-grid{
    width:min(1480px,calc(100% - 48px));
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.hc-v4-trust-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.hc-v4-trust-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef8ec;
    color:var(--hc-green-dark);
}

.hc-v4-trust-item strong{
    display:block;
    font-size:14px;
}

.hc-v4-trust-item span{
    display:block;
    margin-top:3px;
    color:var(--hc-sub);
    font-size:11px;
}


/* ============================================================
 * Footer
 * ============================================================ */

#footer-container{
    margin-top:0 !important;
}


/* ============================================================
 * Tablet
 * ============================================================ */

@media(max-width:1100px){

    .hc-v4-container,
    .hc-v4-hero-inner,
    .hc-v4-trust-grid{
        width:min(100% - 28px,980px);
    }

    .hc-v4-hero-inner{
        grid-template-columns:1fr;
        gap:24px;
        padding:36px 0 44px;
    }

    .hc-v4-hero-board{
        display:none;
    }

    .hc-v4-hero h1{
        font-size:46px;
    }

    .hc-v4-quick-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .hc-v4-material-grid{
        grid-template-columns:repeat(4,1fr);
    }

    .hc-buyer-home-v4 .product-flow-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .hc-v4-commercial-grid{
        grid-template-columns:1fr;
    }

    .hc-v4-demand-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* ============================================================
 * Mobile
 * ============================================================ */

@media(max-width:768px){

    body{
        background:#f5f7f8;
    }

    .hc-v4-container,
    .hc-v4-hero-inner,
    .hc-v4-trust-grid{
        width:calc(100% - 22px);
    }

    .hc-v4-hero{
        min-height:0;
        margin-top:0;
        border-radius:0 0 24px 24px;
    }

    .hc-v4-hero-inner{
        min-height:0;
        padding:30px 0 45px;
    }

    .hc-v4-kicker{
        font-size:13px;
    }

    .hc-v4-hero h1{
        font-size:37px;
        letter-spacing:-1px;
    }

    .hc-v4-hero-subtitle{
        font-size:18px;
    }

    .hc-v4-hero-desc{
        font-size:13px;
    }

    .hc-v4-hero-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .hc-v4-btn{
        padding:0 11px;
        min-height:43px;
        font-size:13px;
    }

    .hc-v4-quick{
        margin-top:-20px;
    }

    .hc-v4-quick-grid{
        grid-template-columns:repeat(3,1fr);
        gap:5px;
        padding:10px 7px;
        border-radius:18px;
    }

    .hc-v4-quick-item{
        min-height:90px;
        flex-direction:column;
        justify-content:center;
        text-align:center;
        gap:8px;
        padding:8px 4px;
    }

    .hc-v4-quick-icon{
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    .hc-v4-quick-copy strong{
        font-size:12px;
        margin:0;
    }

    .hc-v4-quick-copy span{
        display:none;
    }

    .hc-v4-section{
        padding-top:26px;
    }

    .hc-v4-section-head{
        align-items:center;
        margin-bottom:12px;
    }

    .hc-v4-section-title h2{
        font-size:19px;
    }

    .hc-v4-section-title p{
        display:none;
    }

    .hc-v4-material-grid{
        display:flex;
        overflow-x:auto;
        gap:8px;
        padding-bottom:4px;
        scrollbar-width:none;
    }

    .hc-v4-material-grid::-webkit-scrollbar{
        display:none;
    }

    .hc-v4-material{
        flex:0 0 104px;
        min-height:72px;
    }

    .hc-buyer-home-v4 .product-flow-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:9px !important;
    }

    .hc-v4-supplier-grid{
        grid-template-columns:1fr;
    }

    .hc-v4-supplier-card{
        grid-template-columns:100px minmax(0,1fr);
    }

    .hc-v4-supplier-image{
        width:100px;
        height:88px;
    }

    .hc-v4-worker-grid{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .hc-v4-worker{
        min-height:116px;
        padding:13px;
    }

    .hc-v4-worker-top{
        display:block;
    }

    .hc-v4-worker-icon{
        width:37px;
        height:37px;
        margin-bottom:8px;
    }

    .hc-v4-demand-grid{
        grid-template-columns:1fr;
    }

    .hc-v4-demand:nth-child(n+3){
        display:none;
    }

    .hc-v4-service-grid{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .hc-v4-service{
        min-height:112px;
        padding:16px;
    }

    .hc-v4-service h3{
        margin-top:12px;
        font-size:15px;
    }

    .hc-v4-trust{
        margin-bottom:76px;
    }

    .hc-v4-trust-grid{
        grid-template-columns:1fr 1fr;
        gap:16px 8px;
    }

    .hc-v4-trust-item{
        justify-content:flex-start;
    }

}


/* very small */

@media(max-width:390px){

    .hc-v4-hero-actions{
        grid-template-columns:1fr;
    }

    .hc-v4-worker-grid{
        grid-template-columns:1fr;
    }

}


/*
 * ============================================================
 * HC_BUYER_HOME_V41_BEGIN
 * 绘城MALL Buyer Home V4.1
 * ============================================================
 */


/* ------------------------------------------------------------
 * PC总体比例
 * ------------------------------------------------------------ */

@media(min-width:1101px){

    .hc-v4-container,
    .hc-v4-hero-inner,
    .hc-v4-trust-grid{
        width:min(
            1480px,
            calc(100% - 64px)
        ) !important;
    }


    /* ========================================================
     * HERO：让首屏真正像商业首页
     * ======================================================== */

    .hc-v4-hero{
        min-height:500px !important;
        border-bottom:0;
        background:
            radial-gradient(
                circle at 75% 12%,
                rgba(82,168,65,.28),
                transparent 29%
            ),
            radial-gradient(
                circle at 98% 80%,
                rgba(75,113,229,.13),
                transparent 27%
            ),
            linear-gradient(
                118deg,
                #f5fbf1 0%,
                #ffffff 48%,
                #eff6ed 100%
            ) !important;
    }

    .hc-v4-hero-inner{
        min-height:500px !important;
        grid-template-columns:
            minmax(0,1.1fr)
            minmax(480px,.9fr) !important;
        gap:76px !important;
        padding:62px 0 72px !important;
    }

    .hc-v4-kicker{
        margin-bottom:20px;
        font-size:16px;
    }

    .hc-v4-hero h1{
        max-width:810px;
        font-size:66px !important;
        line-height:1.04 !important;
        letter-spacing:-2.5px !important;
    }

    .hc-v4-hero-subtitle{
        margin-top:22px !important;
        font-size:23px !important;
    }

    .hc-v4-hero-desc{
        max-width:760px !important;
        margin-top:15px !important;
        font-size:17px !important;
        line-height:1.85 !important;
    }

    .hc-v4-hero-actions{
        margin-top:31px !important;
        gap:13px !important;
    }

    .hc-v4-btn{
        min-height:50px !important;
        padding:0 26px !important;
        border-radius:13px !important;
        font-size:15px !important;
    }


    /* 右侧业务板 */

    .hc-v4-hero-board{
        padding:29px !important;
        border-radius:28px !important;
        box-shadow:
            0 30px 80px
            rgba(38,72,44,.15) !important;
    }

    .hc-v4-board-brand img{
        width:68px !important;
        height:68px !important;
    }

    .hc-v4-board-brand strong{
        font-size:28px !important;
    }

    .hc-v4-board-item{
        min-height:122px !important;
        padding:20px !important;
    }

    .hc-v4-board-item strong{
        font-size:18px !important;
    }


    /* ========================================================
     * 六大核心入口
     * ======================================================== */

    .hc-v4-quick{
        margin-top:-26px !important;
    }

    .hc-v4-quick-grid{
        min-height:126px;
        padding:18px 20px !important;
        gap:9px !important;
        border-radius:22px !important;
    }

    .hc-v4-quick-item{
        min-height:88px !important;
        padding:16px 14px !important;
    }

    .hc-v4-quick-icon{
        flex-basis:51px !important;
        width:51px !important;
        height:51px !important;
        border-radius:15px !important;
        font-size:21px !important;
    }

    .hc-v4-quick-copy strong{
        font-size:16px !important;
    }

    .hc-v4-quick-copy span{
        margin-top:5px;
        font-size:12px !important;
    }


    /* ========================================================
     * SECTION
     * ======================================================== */

    .hc-v4-section{
        padding-top:42px !important;
    }

    .hc-v4-section-head{
        margin-bottom:20px !important;
    }

    .hc-v4-section-title h2{
        font-size:26px !important;
        letter-spacing:-.4px;
    }

    .hc-v4-section-title p{
        margin-left:10px !important;
        font-size:14px !important;
    }

    .hc-v4-more{
        font-size:14px !important;
        font-weight:700;
    }


    /* ========================================================
     * 材料分类
     * ======================================================== */

    .hc-v4-material-grid{
        gap:14px !important;
    }

    .hc-v4-material{
        min-height:104px !important;
        padding:18px !important;
        border-radius:17px !important;
    }

    .hc-v4-material strong{
        font-size:17px !important;
    }

    .hc-v4-material span{
        margin-top:8px !important;
        font-size:13px !important;
    }


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

    .hc-buyer-home-v4 #realProductGrid{
        grid-template-columns:
            repeat(5,minmax(0,1fr))
            !important;
        gap:16px !important;
        align-items:stretch;
    }

    .hc-buyer-home-v4 #realProductGrid > *{
        min-width:0;
        min-height:320px;
        border:1px solid #e5e9ef;
        border-radius:18px !important;
        overflow:hidden;
        background:#fff;
        box-shadow:
            0 7px 22px
            rgba(35,48,70,.05);
    }

    .hc-buyer-home-v4 #realProductGrid > * img{
        display:block;
        width:100%;
        height:190px;
        object-fit:cover;
    }


    /* ========================================================
     * 商家与工人
     * ======================================================== */

    .hc-v4-commercial-grid{
        gap:30px !important;
    }

    .hc-v4-supplier-grid{
        gap:15px !important;
    }

    .hc-v4-supplier-card{
        grid-template-columns:
            148px
            minmax(0,1fr)
            !important;
        min-height:150px;
        padding:14px !important;
        border-radius:18px !important;
    }

    .hc-v4-supplier-image{
        width:148px !important;
        height:120px !important;
        border-radius:13px !important;
    }

    .hc-v4-supplier-copy strong{
        font-size:16px !important;
    }

    .hc-v4-supplier-copy p{
        margin:8px 0 !important;
        font-size:13px !important;
    }

    .hc-v4-worker-grid{
        gap:15px !important;
    }

    .hc-v4-worker{
        min-height:150px !important;
        padding:18px !important;
        border-radius:18px !important;
    }

    .hc-v4-worker-icon{
        width:52px !important;
        height:52px !important;
        font-size:21px !important;
    }

    .hc-v4-worker strong{
        font-size:16px !important;
    }

    .hc-v4-worker span{
        font-size:13px !important;
    }


    /* ========================================================
     * 需求
     * ======================================================== */

    .hc-v4-demand-grid{
        gap:16px !important;
    }

    .hc-v4-demand{
        min-height:172px !important;
        padding:22px !important;
    }

    .hc-v4-demand h3{
        font-size:19px !important;
    }

    .hc-v4-demand p{
        font-size:14px !important;
    }


    /* ========================================================
     * 专业服务
     * ======================================================== */

    .hc-v4-service-grid{
        gap:16px !important;
    }

    .hc-v4-service{
        min-height:165px !important;
        padding:24px !important;
    }

    .hc-v4-service h3{
        margin-top:24px !important;
        font-size:20px !important;
    }

    .hc-v4-service span{
        font-size:13px !important;
    }

}


/* ============================================================
 * 本地找工人横幅
 * ============================================================ */

.hc-v41-worker-strip{
    padding-top:26px;
}

.hc-v41-worker-strip-inner{
    min-height:112px;
    padding:22px 28px;
    display:grid;
    grid-template-columns:
        minmax(300px,1fr)
        auto
        auto;
    align-items:center;
    gap:30px;
    overflow:hidden;
    position:relative;
    color:#fff !important;
    border-radius:22px;
    background:
        radial-gradient(
            circle at 86% 30%,
            rgba(255,255,255,.16),
            transparent 25%
        ),
        linear-gradient(
            110deg,
            #32772d 0%,
            #55a640 48%,
            #7bbb61 100%
        );
    box-shadow:
        0 14px 34px
        rgba(51,116,43,.16);
}

.hc-v41-worker-strip-inner::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-120px;
    bottom:-180px;
    border-radius:50%;
    border:
        30px solid
        rgba(255,255,255,.08);
}

.hc-v41-worker-strip-main{
    display:flex;
    align-items:center;
    gap:17px;
}

.hc-v41-worker-strip-icon{
    width:60px;
    height:60px;
    flex:0 0 60px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        rgba(255,255,255,.15);
    font-size:27px;
}

.hc-v41-worker-kicker{
    margin-bottom:3px;
    font-size:11px;
    opacity:.82;
}

.hc-v41-worker-strip-main strong{
    display:block;
    font-size:27px;
    letter-spacing:-.5px;
}

.hc-v41-worker-strip-main span{
    display:block;
    margin-top:5px;
    font-size:13px;
    opacity:.88;
}

.hc-v41-worker-types{
    display:flex;
    align-items:center;
    gap:9px;
}

.hc-v41-worker-types span{
    min-width:65px;
    min-height:42px;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:999px;
    background:
        rgba(255,255,255,.14);
    font-size:13px;
    white-space:nowrap;
}

.hc-v41-worker-cta{
    min-width:142px;
    min-height:46px;
    padding:0 18px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:#25601f;
    background:#fff;
    font-weight:800;
    font-size:14px;
}


/* ============================================================
 * 商品不足时使用真实功能入口补位
 * 不伪造商品
 * ============================================================ */

.hc-v41-support-card{
    min-height:320px !important;
    padding:25px !important;
    display:flex !important;
    flex-direction:column;
    justify-content:flex-end;
    position:relative;
    border:
        1px solid
        #e4e9ee !important;
    border-radius:18px !important;
    overflow:hidden;
    background:
        linear-gradient(
            145deg,
            #f8fbf7,
            #eef6ec
        ) !important;
    box-shadow:
        none !important;
}

.hc-v41-support-card:nth-of-type(even){
    background:
        linear-gradient(
            145deg,
            #f7f9fd,
            #edf2fb
        ) !important;
}

.hc-v41-support-icon{
    position:absolute;
    top:24px;
    left:24px;
    width:52px;
    height:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:var(--hc-green-dark);
    box-shadow:
        0 8px 24px
        rgba(34,62,40,.08);
    font-size:20px;
}

.hc-v41-support-card strong{
    display:block;
    font-size:19px;
    color:#1d2736;
}

.hc-v41-support-card span{
    display:block;
    margin-top:8px;
    font-size:13px;
    line-height:1.6;
    color:#70798a;
}

.hc-v41-support-arrow{
    margin-top:15px;
    color:var(--hc-green-dark) !important;
    font-weight:800;
}


/* ============================================================
 * Mobile
 * ============================================================ */

@media(max-width:768px){

    .hc-v41-worker-strip{
        padding-top:16px;
    }

    .hc-v41-worker-strip-inner{
        min-height:126px;
        padding:17px;
        grid-template-columns:1fr auto;
        gap:12px;
        border-radius:19px;
    }

    .hc-v41-worker-strip-icon{
        width:46px;
        height:46px;
        flex-basis:46px;
        border-radius:14px;
        font-size:20px;
    }

    .hc-v41-worker-strip-main strong{
        font-size:20px;
    }

    .hc-v41-worker-strip-main span{
        font-size:11px;
    }

    .hc-v41-worker-types{
        grid-column:1 / -1;
        width:100%;
        overflow-x:auto;
        padding-top:4px;
        scrollbar-width:none;
    }

    .hc-v41-worker-types::-webkit-scrollbar{
        display:none;
    }

    .hc-v41-worker-types span{
        min-width:auto;
        min-height:34px;
        padding:0 11px;
        font-size:11px;
    }

    .hc-v41-worker-cta{
        min-width:92px;
        min-height:40px;
        padding:0 11px;
        font-size:12px;
    }

    .hc-v41-worker-cta i{
        display:none;
    }

    .hc-v41-support-card{
        min-height:220px !important;
        padding:18px !important;
    }

    .hc-v41-support-icon{
        top:17px;
        left:17px;
        width:42px;
        height:42px;
        border-radius:13px;
    }

    .hc-v41-support-card strong{
        font-size:15px;
    }

    .hc-v41-support-card span{
        font-size:11px;
    }

}


/*
 * ============================================================
 * HC_BUYER_HOME_V41_END
 * ============================================================
 */



/*
 * ============================================================
 * HC_BUYER_HOME_V43_FINAL
 * ============================================================
 */


/* Header brand */

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


/* ------------------------------------------------------------
 * 最新业主需求
 * Desktop = 4列
 * Tablet = 2×2
 * Mobile = 单列，保留重要卡
 * ------------------------------------------------------------ */

@media(min-width:1101px){

    .hc-buyer-home-v4
    .hc-v4-demand-grid{
        grid-template-columns:
            repeat(4,minmax(0,1fr))
            !important;
    }

}


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

    .hc-buyer-home-v4
    .hc-v4-demand-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr))
            !important;
    }

}


/* ------------------------------------------------------------
 * 手机固定底栏安全区
 * ------------------------------------------------------------ */

@media(max-width:768px){

    .hc-buyer-home-v4{
        padding-bottom:
            calc(
                78px
                +
                env(safe-area-inset-bottom)
            );
    }


    /*
     * 原V4为了减少长度隐藏了第3张以后需求卡。
     * FINAL版允许显示前3张；
     * 第4张专业服务通过下方专业服务区继续承接。
     */

    .hc-buyer-home-v4
    .hc-v4-demand:nth-child(3){
        display:block !important;
    }

}


/*
 * HC_BUYER_HOME_V43_FINAL_END
 */


/*
 * ============================================================
 * HC_BUYER_HOME_V44_FINAL_FIX
 * ============================================================
 */


/* ============================================================
 * 1. 首页 Hero 完全独立
 * ============================================================ */

main.hc-buyer-home-v4{
    display:block !important;
    width:100% !important;

    margin-top:0 !important;
    padding-top:0 !important;

    position:relative !important;
    top:auto !important;

    transform:none !important;
}


.hc-buyer-home-v4
.hc-v4-home-shell{

    display:block !important;

    position:relative !important;

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

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

    margin:
        0
        !important;

    padding:
        0
        !important;

    inset:auto !important;

    transform:none !important;
}


.hc-buyer-home-v4
.hc-v4-home-shell
>
.side-menu{

    position:absolute !important;

    left:-99999px !important;
    top:0 !important;

    width:280px !important;

    opacity:0 !important;

    pointer-events:none !important;
}


/*
 * Hero 本体必须紧跟 Header，
 * 不允许继承任何旧广告容器位移。
 */

.hc-buyer-home-v4
.hc-v4-home-shell
>
.hc-v4-hero{

    margin-top:0 !important;

    position:relative !important;

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

    transform:none !important;
}



/* ============================================================
 * 2. PC：商家与工人真正等高
 * ============================================================ */

@media(min-width:1101px){


    .hc-buyer-home-v4
    .hc-v4-commercial-grid{

        grid-template-columns:
            1.12fr
            .88fr
            !important;

        align-items:stretch !important;
    }


    .hc-buyer-home-v4
    .hc-v4-commercial-grid
    >
    .hc-v4-panel{

        display:flex !important;

        flex-direction:column !important;

        min-height:0;
    }


    /*
     * 两家真实商家：
     * 不增加假商家，
     * 由横向2列改成纵向2张大卡。
     */

    .hc-buyer-home-v4
    .hc-v4-commercial-grid
    >
    .hc-v4-panel:first-child
    .hc-v4-supplier-grid{

        flex:1 1 auto;

        display:grid !important;

        grid-template-columns:
            1fr
            !important;

        grid-template-rows:
            repeat(
                2,
                minmax(150px,1fr)
            );

        gap:15px !important;
    }


    .hc-buyer-home-v4
    .hc-v4-commercial-grid
    >
    .hc-v4-panel:first-child
    .hc-v4-supplier-card{

        width:100%;

        min-height:150px !important;

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

        align-items:center;

        gap:20px !important;

        padding:
            16px
            18px
            !important;
    }


    .hc-buyer-home-v4
    .hc-v4-commercial-grid
    >
    .hc-v4-panel:first-child
    .hc-v4-supplier-image{

        width:170px !important;
        height:118px !important;

        flex:none;
    }


    .hc-buyer-home-v4
    .hc-v4-commercial-grid
    >
    .hc-v4-panel:first-child
    .hc-v4-supplier-copy strong{

        font-size:18px !important;
    }


    .hc-buyer-home-v4
    .hc-v4-commercial-grid
    >
    .hc-v4-panel:first-child
    .hc-v4-supplier-copy p{

        margin:
            8px
            0
            10px
            !important;

        font-size:13px !important;
    }


    /*
     * 右侧工人保持 2×2，
     * 并让网格占满与左侧相同的剩余高度。
     */

    .hc-buyer-home-v4
    .hc-v4-commercial-grid
    >
    .hc-v4-panel:nth-child(2)
    .hc-v4-worker-grid{

        flex:1 1 auto;

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

        grid-template-rows:
            repeat(
                2,
                minmax(150px,1fr)
            );

        gap:15px !important;
    }


    .hc-buyer-home-v4
    .hc-v4-commercial-grid
    >
    .hc-v4-panel:nth-child(2)
    .hc-v4-worker{

        min-height:150px !important;
    }

}



/* ============================================================
 * Tablet：维持纵向商家卡
 * ============================================================ */

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

    .hc-buyer-home-v4
    .hc-v4-supplier-grid{

        grid-template-columns:
            1fr
            !important;
    }

}



/*
 * HC_BUYER_HOME_V44_FINAL_FIX_END
 */


/* ============================================================
 * HC_BUYER_HOME_V45_SQUARE_UI
 * 首页前台全部改为直角
 * ============================================================
 */

main.hc-buyer-home-v4,
main.hc-buyer-home-v4 *{
    --hc-square-radius:0px;
}

/* 大容器 / 面板 */
.hc-buyer-home-v4 .hc-v4-home-shell,
.hc-buyer-home-v4 .hc-v4-hero,
.hc-buyer-home-v4 .hc-v4-hero-board,
.hc-buyer-home-v4 .hc-v4-worker-strip,
.hc-buyer-home-v4 .hc-v4-panel,
.hc-buyer-home-v4 .hc-v4-commercial-grid,
.hc-buyer-home-v4 .hc-v4-section,
.hc-buyer-home-v4 .hc-v4-section-head,
.hc-buyer-home-v4 .hc-v4-feature-row{
    border-radius:0 !important;
}

/* PC 材料分类：绝对不能丢，只改成直角 */
.hc-buyer-home-v4 .side-menu,
.hc-buyer-home-v4 .side-menu h3,
.hc-buyer-home-v4 .side-menu .menu-item,
.hc-buyer-home-v4 .side-menu .menu-item span,
.hc-buyer-home-v4 .category-panel,
.hc-buyer-home-v4 .category-content,
.hc-buyer-home-v4 .category-group,
.hc-buyer-home-v4 .category-tag,
.hc-buyer-home-v4 .mega-menu,
.hc-buyer-home-v4 .mega-panel,
.hc-buyer-home-v4 .mega-content{
    border-radius:0 !important;
}

/* 按钮 / CTA */
.hc-buyer-home-v4 .hc-v4-primary-btn,
.hc-buyer-home-v4 .hc-v4-secondary-btn,
.hc-buyer-home-v4 .hc-v4-ghost-btn,
.hc-buyer-home-v4 .hc-v4-worker-cta,
.hc-buyer-home-v4 .hc-v4-chip,
.hc-buyer-home-v4 .hc-v4-worker-chip,
.hc-buyer-home-v4 .hc-v4-action,
.hc-buyer-home-v4 button,
.hc-buyer-home-v4 .btn{
    border-radius:0 !important;
}

/* 热门材料快捷入口 */
.hc-buyer-home-v4 .hc-v4-shortcut-grid,
.hc-buyer-home-v4 .hc-v4-shortcut-card,
.hc-buyer-home-v4 .hc-v4-shortcut-card a{
    border-radius:0 !important;
}

/* 商品 / 跳转卡 */
.hc-buyer-home-v4 .hc-v4-product-grid,
.hc-buyer-home-v4 .hc-v4-product-card,
.hc-buyer-home-v4 .hc-v4-link-card,
.hc-buyer-home-v4 .hc-v4-link-card-icon,
.hc-buyer-home-v4 .product-card,
.hc-buyer-home-v4 .product-card img,
.hc-buyer-home-v4 .product-card .thumb,
.hc-buyer-home-v4 .realProductGrid > *{
    border-radius:0 !important;
}

/* 商家 */
.hc-buyer-home-v4 .hc-v4-supplier-grid,
.hc-buyer-home-v4 .hc-v4-supplier-card,
.hc-buyer-home-v4 .hc-v4-supplier-image,
.hc-buyer-home-v4 .hc-v4-supplier-image img,
.hc-buyer-home-v4 .hc-v4-supplier-badge{
    border-radius:0 !important;
}

/* 工人 */
.hc-buyer-home-v4 .hc-v4-worker-grid,
.hc-buyer-home-v4 .hc-v4-worker,
.hc-buyer-home-v4 .hc-v4-worker-icon{
    border-radius:0 !important;
}

/* 需求 */
.hc-buyer-home-v4 .hc-v4-demand-grid,
.hc-buyer-home-v4 .hc-v4-demand-card,
.hc-buyer-home-v4 .hc-v4-demand-badge{
    border-radius:0 !important;
}

/* 专业服务 */
.hc-buyer-home-v4 .hc-v4-service-grid,
.hc-buyer-home-v4 .hc-v4-service-card,
.hc-buyer-home-v4 .hc-v4-service-card .icon{
    border-radius:0 !important;
}

/* 底部信任区 */
.hc-buyer-home-v4 .hc-v4-trust-row,
.hc-buyer-home-v4 .hc-v4-trust-item,
.hc-buyer-home-v4 .hc-v4-trust-icon{
    border-radius:0 !important;
}

/* 如果有图片默认圆角，一并取消 */
.hc-buyer-home-v4 img,
.hc-buyer-home-v4 .thumb,
.hc-buyer-home-v4 .cover{
    border-radius:0 !important;
}

/* 顶部搜索区和首页可见输入框也统一直角 */
.hc-buyer-home-v4 input,
.hc-buyer-home-v4 select,
.hc-buyer-home-v4 textarea{
    border-radius:0 !important;
}

/* ============================================================
 * HC_BUYER_HOME_V45_SQUARE_UI_END
 * ============================================================
 */


/*
 * ============================================================
 * HC_PC_MATERIAL_MEGA_V1_CSS
 * 绘城MALL PC完整材料分类中心
 * ============================================================
 */


.hc-pc-material-center{
    display:none;
}


@media(min-width:1101px){


    .hc-pc-material-center{

        display:block;

        position:relative;

        z-index:10020;

        width:100%;

        background:#fff;

        border-bottom:
            1px solid #edf0f2;
    }


    .hc-pc-material-bar{

        width:
            min(
                1480px,
                calc(100% - 64px)
            );

        min-height:54px;

        margin:
            0
            auto;

        display:flex;

        align-items:center;

        gap:0;

        position:relative;
    }


    /* ========================================================
     * 主入口
     * ======================================================== */

    .hc-pc-material-trigger{

        height:54px;

        min-width:238px;

        padding:
            0
            20px;

        border:0;

        display:flex;

        align-items:center;

        justify-content:flex-start;

        gap:10px;

        cursor:pointer;

        color:#fff;

        background:
            linear-gradient(
                135deg,
                #397b31,
                #5fa94b
            );

        font:
            inherit;
    }


    .hc-pc-material-trigger i{

        font-size:16px;

    }


    .hc-pc-material-trigger strong{

        font-size:15px;

        font-weight:850;

    }


    .hc-pc-material-trigger span{

        margin-left:auto;

        opacity:.82;

        transition:
            transform
            .16s ease;

    }


    .hc-pc-material-center.is-open
    .hc-pc-material-trigger span{

        transform:
            rotate(180deg);

    }


    /* ========================================================
     * 热门一级分类
     * ======================================================== */

    .hc-pc-material-hot{

        flex:1 1 auto;

        min-width:0;

        height:54px;

        display:flex;

        align-items:center;

        padding:
            0
            18px;

        gap:4px;
    }


    .hc-pc-material-hot a{

        min-height:36px;

        padding:
            0
            13px;

        display:flex;

        align-items:center;

        border-radius:8px;

        color:#3f4958;

        font-size:13px;

        font-weight:700;

        text-decoration:none;

        white-space:nowrap;

        transition:
            .15s ease;

    }


    .hc-pc-material-hot a:hover{

        color:#397d31;

        background:#f1f8ee;

    }


    .hc-pc-material-shop-link{

        flex:0 0 auto;

        min-height:38px;

        padding:
            0
            13px;

        display:flex;

        align-items:center;

        gap:6px;

        color:#3d7d34;

        font-size:13px;

        font-weight:800;

        text-decoration:none;

    }


    /* ========================================================
     * Mega dropdown mount
     * ======================================================== */

    .hc-pc-material-mount{

        display:none;

        position:absolute;

        top:54px;

        left:0;

        width:
            min(
                1180px,
                calc(100vw - 90px)
            );

        min-height:520px;

        z-index:2147482000;

        overflow:visible;

        background:transparent;

    }


    .hc-pc-material-center.is-open
    .hc-pc-material-mount{

        display:block;

    }


    /*
     * 真实原分类节点。
     * 不复制，不创建第二套分类。
     */

    #hcPcMaterialMount
    >
    #eco-material-categories{

        display:block !important;

        position:relative !important;

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

        width:260px !important;
        min-width:260px !important;

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

        margin:0 !important;

        padding:
            18px
            14px
            !important;

        opacity:1 !important;

        visibility:visible !important;

        pointer-events:auto !important;

        transform:none !important;

        overflow:visible !important;

        border:
            1px solid
            #e8ebef;

        border-top:0;

        border-radius:
            0
            0
            16px
            16px;

        background:#fff;

        box-shadow:
            0
            24px
            60px
            rgba(26,38,31,.14);

        box-sizing:border-box;

    }


    #hcPcMaterialMount
    >
    #eco-material-categories
    >
    h3{

        margin:
            2px
            10px
            14px;

        font-size:17px;

        color:#182333;

    }


    #hcPcMaterialMount
    >
    #eco-material-categories
    >
    .menu-item{

        min-height:48px;

        margin:
            2px
            0;

        padding:
            0
            12px;

        display:flex !important;

        align-items:center;

        justify-content:space-between;

        border-radius:9px;

        cursor:pointer;

        color:#323d4b;

        background:transparent;

        box-sizing:border-box;

    }


    #hcPcMaterialMount
    >
    #eco-material-categories
    >
    .menu-item:hover,

    #hcPcMaterialMount
    >
    #eco-material-categories
    >
    .menu-item.is-active{

        color:#397d31 !important;

        background:#eef7e9 !important;

    }


    #hcPcMaterialMount
    >
    #eco-material-categories
    >
    .menu-item
    span{

        display:flex;

        align-items:center;

        gap:9px;

        font-size:14px;

        font-weight:750;

    }


    #hcPcMaterialMount
    >
    #eco-material-categories
    >
    .menu-item
    b{

        color:#a7adb5;

        font-size:18px;

    }


    /*
     * 原分类系统生成的右侧飞出层继续使用。
     * 这里仅统一商业视觉，不改分类内容。
     */

    #hcPcMaterialMount
    .category-panel,

    #hcPcMaterialMount
    .mega-menu,

    #eco-material-categories
    .category-panel,

    #eco-material-categories
    .mega-menu{

        z-index:
            2147482100
            !important;

    }

}


/* ============================================================
 * Tablet / Mobile：
 * PC分类条完全不显示
 * ============================================================ */

@media(max-width:1100px){

    .hc-pc-material-center{

        display:none !important;

    }

}


/*
 * HC_PC_MATERIAL_MEGA_V1_CSS_END
 */


/* =====================================================
 HC_PC_MATERIAL_MEGA_V11_FLOAT_FIX
 PC材料中心浮层修复
 ===================================================== */


.hc-pc-material-mega,
.hc-pc-material-panel,
.hc-material-mega-panel{
    position:absolute !important;
    top:100%;
    left:0;
    z-index:99999;
}


.hc-pc-material-bar{
    position:relative !important;
    z-index:10000;
}


.hc-pc-material-mega{
    width:100%;
}


.hc-pc-material-panel{
    background:#fff;
    box-shadow:0 18px 45px rgba(0,0,0,.12);
    border-radius:0 0 18px 18px;
}


.hc-pc-material-mega{
    display:none;
}


.hc-pc-material-mega.active{
    display:block;
}




/*
 * ============================================================
 * HC_PC_MATERIAL_MEGA_V12_SAFE_CSS
 *
 * PC:
 *
 * 顶部 = 快捷入口
 * 左260 = 唯一真实一级分类
 * 右侧 = 原分类引擎生成的真实二三级内容
 *
 * ============================================================
 */

@media(min-width:1101px){


    /* ========================================================
     * 1. 分类导航整体层级
     * ======================================================== */

    .hc-pc-material-center{

        position:relative !important;

        z-index:10020 !important;

        overflow:visible !important;

    }


    .hc-pc-material-bar{

        position:relative !important;

        z-index:10021 !important;

        overflow:visible !important;

    }


    /*
     * “全部装修材料分类”右侧的小箭头隐藏。
     * 打开逻辑不受影响。
     */

    .hc-pc-material-trigger > span{

        display:none !important;

    }


    /* ========================================================
     * 2. 顶部六个 = 快捷入口
     * ======================================================== */

    .hc-pc-material-hot a{

        position:relative;

        border-radius:0 !important;

        background:transparent !important;

    }


    .hc-pc-material-hot a:hover,

    .hc-pc-material-hot a.is-active{

        color:#397d31 !important;

        background:#f5faf2 !important;

    }


    .hc-pc-material-hot a.is-active::after{

        content:"";

        position:absolute;

        left:12px;
        right:12px;
        bottom:0;

        height:3px;

        background:#5a9f44;

        border-radius:
            3px
            3px
            0
            0;

    }


    /* ========================================================
     * 3. Mega整体 = 真正浮层
     * ======================================================== */

    .hc-pc-material-mount{

        --hc-material-mega-width:
            min(
                1180px,
                calc(100vw - 90px)
            );

        display:none !important;

        position:absolute !important;

        top:54px !important;
        left:0 !important;

        width:
            var(--hc-material-mega-width)
            !important;

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

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

        overflow:visible !important;

        background:#fff !important;

        border:
            1px solid
            #e6eaee;

        border-top:0;

        border-radius:
            0
            0
            16px
            16px;

        box-shadow:
            0
            22px
            55px
            rgba(25,40,30,.14);

        z-index:
            2147482000
            !important;

    }


    .hc-pc-material-center.is-open
    .hc-pc-material-mount{

        display:block !important;

    }


    /* ========================================================
     * 4. 左栏：唯一真实一级分类
     * ======================================================== */

    #hcPcMaterialMount
    >
    #eco-material-categories{

        display:block !important;

        position:relative !important;

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

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

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

        margin:0 !important;

        padding:
            18px
            14px
            !important;

        opacity:1 !important;

        visibility:visible !important;

        pointer-events:auto !important;

        transform:none !important;

        /*
         * 动态右栏需要越过左栏宽度，
         * 所以这里不能 hidden。
         */

        overflow:visible !important;

        background:#fff !important;

        border:0 !important;

        border-right:
            1px solid
            #edf0f2
            !important;

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

        box-shadow:none !important;

        box-sizing:border-box;

        z-index:2;

    }


    #hcPcMaterialMount
    >
    #eco-material-categories
    >
    h3{

        margin:
            3px
            10px
            15px
            !important;

        font-size:17px !important;

        font-weight:850 !important;

        color:#172131 !important;

    }


    #hcPcMaterialMount
    >
    #eco-material-categories
    >
    .menu-item{

        min-height:49px !important;

        margin:
            2px
            0
            !important;

        padding:
            0
            12px
            !important;

        display:flex !important;

        align-items:center !important;

        justify-content:space-between !important;

        color:#344050 !important;

        background:#fff !important;

        border-radius:9px !important;

    }


    #hcPcMaterialMount
    >
    #eco-material-categories
    >
    .menu-item:hover,

    #hcPcMaterialMount
    >
    #eco-material-categories
    >
    .menu-item.is-active{

        color:#397d31 !important;

        background:#edf6e8 !important;

    }


    /* ========================================================
     * 5. 右栏：
     *
     * 只移动真实菜单的“直接子节点”。
     *
     * h3 + .menu-item 属于左栏；
     * 其余原分类引擎动态生成节点进入右栏。
     *
     * 关键：这里使用
     *
     * > *:not(...):not(...)
     *
     * 是连续过滤，不是上一版错误的后代选择器。
     * ======================================================== */

    #hcPcMaterialMount
    >
    #eco-material-categories
    >
    *:not(h1):not(h2):not(h3):not(h4):not(.menu-title):not(.menu-item):not(script):not(style){

        position:absolute !important;

        left:260px !important;
        top:0 !important;

        width:
            calc(
                var(--hc-material-mega-width)
                -
                260px
            )
            !important;

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

        margin:0 !important;

        padding:
            22px
            26px
            !important;

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

        box-sizing:border-box;

        background:#fff !important;

        border:0 !important;

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

        box-shadow:none !important;

        z-index:5 !important;

    }


    /* ========================================================
     * 6. 已知分类面板名称再做精准兜底
     * ======================================================== */

    #hcPcMaterialMount
    .category-panel,

    #hcPcMaterialMount
    .mega-menu{

        position:absolute !important;

        left:260px !important;
        top:0 !important;

        width:
            calc(
                var(--hc-material-mega-width)
                -
                260px
            )
            !important;

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

        margin:0 !important;

        padding:
            22px
            26px
            !important;

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

        background:#fff !important;

        box-shadow:none !important;

        z-index:10 !important;

    }


    #hcPcMaterialMount
    .category-panel a:hover,

    #hcPcMaterialMount
    .mega-menu a:hover{

        color:#397d31 !important;

    }

}


/*
 * Tablet / Mobile 不使用 PC Mega。
 */

@media(max-width:1100px){

    .hc-pc-material-center{

        display:none !important;

    }

}


/*
 * HC_PC_MATERIAL_MEGA_V12_SAFE_CSS_END
 */


/* HC_BUYER_HOME_V5A_START */


/*
 * ============================================================
 * 绘城MALL BUYER HOME V5A
 *
 * 目标：
 * 更接近成熟本地生活 / 装修商城商业首页
 *
 * 注意：
 * hc-pc-material-center 完全不在本轮修改范围
 * ============================================================
 */


/* ============================================================
 * 页面基础
 * ============================================================ */

.hc-buyer-home-v4{
    --v5-green:#4c8f39;
    --v5-green-dark:#32702d;
    --v5-green-soft:#edf6e8;
    --v5-blue:#486be8;
    --v5-text:#172033;
    --v5-sub:#667085;
    --v5-line:#e8ece8;
    --v5-bg:#f7f9f6;

    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            #ffffff 420px,
            #f8faf7 680px,
            #ffffff 100%
        );
}


/* ============================================================
 * HERO
 * ============================================================ */

@media(min-width:1101px){

    .hc-buyer-home-v4
    .hc-v4-hero{

        position:relative;

        overflow:hidden;

        background:
            radial-gradient(
                circle at 84% 24%,
                rgba(120,181,94,.18),
                transparent 31%
            ),
            radial-gradient(
                circle at 96% 92%,
                rgba(83,134,113,.12),
                transparent 27%
            ),
            linear-gradient(
                120deg,
                #f8fcf5 0%,
                #ffffff 48%,
                #f3f8f4 100%
            );

        border-bottom:
            1px solid #edf0ec;

    }


    .hc-buyer-home-v4
    .hc-v4-hero::before{

        width:560px;
        height:560px;

        right:-210px;
        bottom:-310px;

        background:
            rgba(
                72,
                137,
                59,
                .07
            );

    }


    .hc-buyer-home-v4
    .hc-v4-hero-inner{

        width:
            min(
                1480px,
                calc(100% - 56px)
            );

        min-height:430px;

        grid-template-columns:
            minmax(0,1.13fr)
            minmax(430px,.87fr);

        gap:56px;

        padding:
            48px 0
            50px;

    }


    /* 左侧文案 */

    .hc-buyer-home-v4
    .hc-v4-kicker{

        margin-bottom:16px;

        font-size:15px;

        color:
            var(--v5-green-dark);

        letter-spacing:.2px;

    }


    .hc-buyer-home-v4
    .hc-v4-hero h1{

        max-width:760px;

        font-size:
            clamp(
                48px,
                3.55vw,
                62px
            );

        line-height:1.02;

        letter-spacing:-2.4px;

        color:
            var(--v5-text);

    }


    .hc-buyer-home-v4
    .hc-v4-hero h1 em{

        color:
            #5b9c3f;

    }


    .hc-buyer-home-v4
    .hc-v4-hero-subtitle{

        margin-top:20px;

        font-size:22px;

        color:#293345;

        letter-spacing:.2px;

    }


    .hc-buyer-home-v4
    .hc-v4-hero-desc{

        max-width:700px;

        margin-top:14px;

        font-size:16px;

        line-height:1.85;

        color:
            #697588;

    }


    /* CTA */

    .hc-buyer-home-v4
    .hc-v4-hero-actions{

        gap:12px;

        margin-top:28px;

    }


    .hc-buyer-home-v4
    .hc-v4-btn{

        min-height:50px;

        padding:
            0 23px;

        border-radius:12px;

        font-size:15px;

        font-weight:850;

    }


    .hc-buyer-home-v4
    .hc-v4-btn.primary{

        background:
            linear-gradient(
                135deg,
                #5fa642,
                #438834
            );

        box-shadow:
            0 10px 24px
            rgba(
                67,
                136,
                52,
                .21
            );

    }


    .hc-buyer-home-v4
    .hc-v4-btn.blue{

        background:
            linear-gradient(
                135deg,
                #5579ee,
                #4264dc
            );

        box-shadow:
            0 10px 22px
            rgba(
                66,
                100,
                220,
                .16
            );

    }


    .hc-buyer-home-v4
    .hc-v4-btn.light{

        border:
            1px solid
            #e2e7e1;

        box-shadow:
            0 5px 14px
            rgba(
                30,
                45,
                34,
                .04
            );

    }


    /* ========================================================
     * HERO右侧生态服务板
     * ======================================================== */

    .hc-buyer-home-v4
    .hc-v4-hero-board{

        position:relative;

        padding:24px;

        border:
            1px solid
            rgba(
                220,
                228,
                218,
                .92
            );

        border-radius:20px;

        background:
            rgba(
                255,
                255,
                255,
                .94
            );

        box-shadow:
            0 20px 48px
            rgba(
                31,
                55,
                36,
                .10
            );

        backdrop-filter:
            blur(8px);

    }


    .hc-buyer-home-v4
    .hc-v4-hero-board::before{

        content:"绘城MALL · 本地装修生态";

        display:block;

        margin-bottom:14px;

        color:
            #253326;

        font-size:14px;

        font-weight:850;

        letter-spacing:.2px;

    }


    .hc-buyer-home-v4
    .hc-v4-hero-board
    > *{

        position:relative;

        z-index:1;

    }


    /*
     * 右侧现有四张功能卡：
     * 不重构DOM，只增强商业感
     */

    .hc-buyer-home-v4
    .hc-v4-hero-board a{

        transition:
            transform .17s ease,
            box-shadow .17s ease;

    }


    .hc-buyer-home-v4
    .hc-v4-hero-board a:hover{

        transform:
            translateY(-2px);

    }


    /* ========================================================
     * 首页主内容宽度
     * ======================================================== */

    .hc-buyer-home-v4
    .hc-v4-container,

    .hc-buyer-home-v4
    > .section{

        width:
            min(
                1480px,
                calc(100% - 56px)
            );

        margin-left:auto;
        margin-right:auto;

    }


    /* ========================================================
     * SECTION节奏
     * ======================================================== */

    .hc-buyer-home-v4
    .hc-v4-section{

        padding:
            22px 0;

    }


    .hc-buyer-home-v4
    .hc-v4-section-head{

        margin-bottom:14px;

        align-items:flex-end;

    }


    .hc-buyer-home-v4
    .hc-v4-section-title h2{

        font-size:23px;

        letter-spacing:-.3px;

    }


    .hc-buyer-home-v4
    .hc-v4-section-title p{

        margin-top:4px;

        color:#8a938e;

        font-size:12px;

    }


    .hc-buyer-home-v4
    .hc-v4-more{

        color:
            #557260;

        font-weight:800;

    }


    /* ========================================================
     * 热门材料快捷入口
     * ======================================================== */

    .hc-buyer-home-v4
    .category-grid{

        display:grid !important;

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

        gap:10px !important;

    }


    .hc-buyer-home-v4
    .category-grid
    .category{

        min-height:82px;

        padding:
            14px 14px;

        border:
            1px solid
            #e7ece7;

        border-radius:13px;

        background:
            linear-gradient(
                145deg,
                #fff,
                #fafcf9
            );

        color:#283329;

        box-shadow:
            0 4px 12px
            rgba(
                33,
                50,
                36,
                .025
            );

        transition:
            .16s ease;

    }


    .hc-buyer-home-v4
    .category-grid
    .category:hover{

        transform:
            translateY(-2px);

        border-color:
            #cbdcc5;

        background:
            #f5faf2;

        box-shadow:
            0 9px 22px
            rgba(
                41,
                78,
                44,
                .07
            );

    }


    /* ========================================================
     * 商品区域
     * ======================================================== */

    .hc-buyer-home-v4
    .product-flow-grid{

        gap:14px !important;

    }


    .hc-buyer-home-v4
    .product-flow-grid
    > *{

        border-radius:15px !important;

        border-color:
            #e8ece8 !important;

        box-shadow:
            0 5px 16px
            rgba(
                35,
                49,
                38,
                .035
            );

    }


    /* ========================================================
     * 商家 + 工人
     * ======================================================== */

    .hc-buyer-home-v4
    .hc-v4-commercial-grid{

        grid-template-columns:
            1.06fr .94fr;

        gap:18px;

    }


    .hc-buyer-home-v4
    .hc-v4-supplier-card,

    .hc-buyer-home-v4
    .hc-v4-worker{

        border-radius:14px;

        background:#fff;

        box-shadow:
            0 4px 14px
            rgba(
                31,
                48,
                34,
                .035
            );

    }


    .hc-buyer-home-v4
    .hc-v4-supplier-card:hover,

    .hc-buyer-home-v4
    .hc-v4-worker:hover{

        transform:
            translateY(-2px);

        box-shadow:
            0 10px 24px
            rgba(
                31,
                48,
                34,
                .075
            );

    }


    /* ========================================================
     * 需求 / 专业服务
     * ======================================================== */

    .hc-buyer-home-v4
    .hc-v4-demand-grid{

        gap:12px;

    }


    .hc-buyer-home-v4
    .hc-v4-demand{

        min-height:138px;

        padding:18px;

        border-radius:14px;

        border:
            1px solid
            #e8ece8;

        background:
            linear-gradient(
                145deg,
                #fff,
                #fbfcfb
            );

        box-shadow:
            0 4px 14px
            rgba(
                31,
                48,
                34,
                .03
            );

    }


    .hc-buyer-home-v4
    .hc-v4-demand:hover{

        transform:
            translateY(-2px);

        border-color:
            #cadcc4;

    }


    .hc-buyer-home-v4
    .hc-v4-service-grid{

        gap:12px;

    }


    .hc-buyer-home-v4
    .hc-v4-service{

        min-height:128px;

        border-radius:14px;

        border:
            1px solid
            #e8ece8;

        background:#fff;

        box-shadow:
            0 4px 14px
            rgba(
                31,
                48,
                34,
                .03
            );

        transition:
            .17s ease;

    }


    .hc-buyer-home-v4
    .hc-v4-service:hover{

        transform:
            translateY(-2px);

        border-color:
            #cadcc4;

        box-shadow:
            0 10px 24px
            rgba(
                31,
                48,
                34,
                .07
            );

    }

}


/* ============================================================
 * 平板 / 手机：
 * 保持现有成熟逻辑，只统一质感
 * ============================================================ */

@media(max-width:1100px){

    .hc-buyer-home-v4
    .hc-v4-hero{

        background:
            linear-gradient(
                145deg,
                #f7fbf5,
                #fff
            );

    }


    .hc-buyer-home-v4
    .hc-v4-hero-board{

        border-radius:16px;

    }


    .hc-buyer-home-v4
    .hc-v4-section{

        padding-top:16px;
        padding-bottom:16px;

    }

}


/* HC_BUYER_HOME_V5A_END */

/* =========================================================
 * HC_BUYER_HOME_MOBILE_BOTTOM_SPACE_FIX_V1
 *
 * 公共 mobile nav 已经给 body 预留底部安全区，
 * 首页不再重复预留 78px。
 * ========================================================= */
@media (max-width:768px){

    body.hc-has-mobile-bottom-nav
    .hc-buyer-home-v4{
        padding-bottom:0 !important;
    }

}