/* ==========================================================================
   pages.css — all page styles (scoped by body.page-xxx)
   ========================================================================== */

/* ========== page-home (home.css) ========== */
/* ==========================================================================
   1. 严格对照设计稿的全局 Tokens (Global Resets & Design Tokens)
   ========================================================================== */
   body.page-home *{
    /* margin: 0;
    padding: 0; */
    box-sizing: border-box;
    font-family: 'Segoe UI', Arial, sans-serif;
}
body.page-home{
    background-color: #262834; /* 核心深色主背景 */
    color: #ffffff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
html:has(body.page-home){
    overflow-x: hidden;
}
.page-home a{ text-decoration: none; color: inherit; }
.page-home ul{ list-style: none; }
.page-home img{ max-width: 100%; display: block; }

.page-home .container{
    max-width: 1400px;
    margin: 0 auto;
    /* padding: 0 20px; */
    width: 100%;
}

/* 模块统一样式 */
.page-home .section-padding{
    padding: 90px 0;
}
.page-home .section-padding.apply{
    background: url(../img/bg-index-app.jpg);
    background-position: center;
    background-size: cover;
}
.page-home .section-padding.client{
    background: url(../img/bg-index-client.jpg);
    background-position: center;
    background-size: cover;
}
.page-home .section-title-container{
    text-align: center;
    margin-bottom: 70px;
}
.page-home .section-title-container h2{
    font-size: 32px;
    font-weight: 700;
    color: #EBC059; /* 工业金 */
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.page-home .section-title-container p{
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 设计稿通用按钮 */
.page-home .btn-gold{
    background-color: #EBC059;
    color: #111625;
    font-weight: 700;
    font-size: 13px;
    padding: 11px 28px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s;
}
.page-home .btn-gold:hover{ background-color: #e29522; }

.page-home .btn-outline{
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 28px;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s;
}
.page-home .btn-outline:hover{ border-color: #EBC059; color: #EBC059; }

/* ==========================================================================
   2. 顶栏与官方 Header (Top Bar & Header)
   ========================================================================== */
.page-home .top-bar{
    background-color: #0c0f1a;
    font-size: 12px;
    color: #a0aec0;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.page-home .top-bar-flex{
    display: flex;
    justify-content: flex-end;
    gap: 25px;
}
.page-home header:not(.home-header){
    background-color: rgba(17, 22, 37, 0.95);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.page-home .header-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
}
.page-home .logo-box{
    display: flex;
    align-items: center;
    gap: 12px;
}
.page-home .logo-text-main{ font-size: 22px; font-weight: 800; color: #fff; letter-spacing: 0.5px; }
.page-home .logo-text-main span{ color: #EBC059; }

.page-home .nav-menu{ display: flex; gap: 26px; }
.page-home .nav-link{ font-size: 13.5px; font-weight: 600; color: #e2e8f0; transition: color 0.2s; }
.page-home .nav-link:hover, .page-home .nav-link.active{ color: #EBC059; }

/* ==========================================================================
   3. 巨幕高精图 Banner (Hero Section)
   ========================================================================== */
.page-home .hero-banner{
    position: relative;
    height: 580px;
    background-image: linear-gradient(rgba(17,22,37,0.7), rgba(17,22,37,0.5)), url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=1600');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    text-align: center;
}
.page-home .hero-center-content{
    max-width: 800px;
    margin: 0 auto;
}
.page-home .hero-center-content h1{
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.page-home .hero-center-content h1 span{ color: #EBC059; }
.page-home .hero-center-content p{
    color: #cbd5e1;
    font-size: 15px;
    margin-bottom: 35px;
    opacity: 0.9;
}
.page-home .hero-buttons{
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* ==========================================================================
   4. 产品分类中心 (Product Categories Section)
   ========================================================================== */
.page-home .categories-bg{
    background-color: #161c2d;
}
.page-home .categories-grid-layout{
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    min-width: 0;
}
/* 左侧列表 */
.page-home .category-vertical-menu{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}
.page-home .cat-menu-node{
    background-color: #0f131f;
    padding: 15px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #a0aec0;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    word-break: break-word;
    overflow-wrap: break-word;
}
.page-home .cat-menu-node:hover, .page-home .cat-menu-node.active{
    background-color: #EBC059;
    color: #111625;
    border-left-color: #ffffff;
}
/* 右侧主视窗面板 */
.page-home .category-main-panel{
    background-color: #0f131f;
    padding: 40px;
    border-radius: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    min-width: 0;
}
.page-home .panel-desc-side{ flex: 1; min-width: 0; }
.page-home .panel-desc-side h3{ font-size: 22px; color: #ffffff; margin-bottom: 12px; font-weight: 700; }
.page-home .panel-desc-side p{ color: #a0aec0; font-size: 13.5px; line-height: 1.6; margin-bottom: 25px; }
.page-home .panel-media-side{
    width: 320px;
    max-width: 100%;
    height: 200px;
    flex-shrink: 1;
    background-color: #1a202c;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-home .panel-media-side::after{
    content: '[ HDD MACHINE IMAGE ]';
    font-size: 11px;
    color: rgba(255,255,255,0.2);
    font-weight: 600;
}

/* ==========================================================================
   5. 核心应用范畴 (Applications Section)
   ========================================================================== */
.page-home .apps-horizontal-matrix{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}
.page-home .app-square-box{
    border: 1px solid rgba(243, 166, 51, 0.3);
    background-color: rgba(25, 32, 53, 0.4);
    padding: 30px 15px;
    text-align: center;
    /* cursor: pointer; */
    transition: all 0.3s;
}
.page-home .app-square-box .icon-placeholder .icon{
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
    color: #EBC059;
}
.page-home .app-square-box h4{
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
}
/* 激活高亮态（如设计图第一个 Pipeline 项） */
.page-home .app-square-box.active, .page-home .app-square-box:hover{
    background-color: #EBC059;
    border-color: #EBC059;
}
.page-home .app-square-box.active h4, .page-home .app-square-box:hover h4, .page-home .app-square-box.active .icon-placeholder .icon, .page-home .app-square-box:hover .icon-placeholder .icon{
    color: #1D1E20;
}

/* ==========================================================================
   6. 关于我们与工厂实力 (About Us Section)
   ========================================================================== */
.page-home .about-main-layout{
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 50px;
    align-items: flex-start;
}
.page-home .about-text-column p{
    color: #fff;
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 25px;
}
.page-home .about-text-column .about-bullets-list>p{
    font-size: 18px;
    color: #E1E1E1;
}
.page-home .about-bullets-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}
.page-home .about-bullet-node{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    color: #EBC059;
    font-weight: 600;
}
.page-home .about-bullet-node .icon{
    width: 28px;
    height: 28px;
    color: #EBC059;
}
.page-home .about-bullet-node span{ color: #fff; font-weight: 400; }

/* 右侧数据墙与大图组合 */
.page-home .about-visual-column{
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.page-home .about-stats-row{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.page-home .stat-icon-unit{
    text-align: center;
    /* background-color: #161c2d; */
    padding: 15px 5px;
    border-radius: 2px;
}
.page-home .stat-icon-unit .icon{width: 60px;height: 60px;color: #EBC059;}
.page-home .stat-icon-unit .stat-num{ font-size: 30px; font-weight: 700; color: #EBC059; }
.page-home .stat-icon-unit .stat-label{ font-size: 16px; color: #EBC059; text-transform: uppercase; margin-top: 2px; }

.page-home .factory-image-container{
    position: relative;
}
.page-home .factory-image-container img{
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 2px;
}
.page-home .experience-floating-banner{
    position: absolute;
    bottom: 15px;
    left: 15px;
    background-color: #EBC059;
    color: #111625;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 13px;
    max-width: 200px;
    line-height: 1.4;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* ==========================================================================
   7. 热门爆款产品网格 (Hot Products - 严格遵循6卡片白色背景)
   ========================================================================== */
.page-home .hot-products-bg{
    background-color: #161c2d;
    background: url(../img/bg-index-pro.jpg);
    background-size: cover;
}
.page-home .products-six-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px;
}
.page-home .product-white-card{
    background-color: #ffffff; /* 严格对照设计稿：卡片背景为白色 */
    color: #333333;
    /* border-radius: 4px; */
    overflow: hidden;
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    
    box-shadow: 20px -20px 0px #EBC059;
}
.page-home .product-white-card .product-img-slot{
    /* height: 160px; */
    background-color: #f7fafc;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.page-home .product-white-card .product-img-slot img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
@media (hover: hover) and (pointer: fine) {
    .page-home .product-white-card:hover .product-img-slot img{
        transform: scale(1.08);
    }
    .page-home .product-white-card:hover h3{
        color: #EBC059;
    }
}
.page-home .product-white-card .product-img-slot:has(img)::after{
    content: none;
}
.page-home .product-white-card .product-img-slot::after{
    content: '[ DRILL RIG IMAGE ]';
    font-size: 11px;
    color: #cbd5e1;
    font-weight: bold;
}
.page-home .product-white-card h3{
    font-size: 22px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}
.page-home .product-white-card h3::after{
    content: '';
    display: block;
    width: 224px;
    height: 3px;
    background: linear-gradient(to right, transparent, #EBC059, transparent);
    margin:10px auto;
}
.page-home .product-white-card p{
    font-size: 16px;
    color: #4D4D4D;
    line-height: 1.5;
    /* text-align: center; */
    margin-bottom: 20px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-home .product-white-card .card-action-btn{
    align-self: center;
    background-color: #EBC059;
    color: #111625;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 24px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
}

/* ==========================================================================
   8. 成功案例布局 (Cases Section)
   ========================================================================== */
.page-home .cases-asymmetric-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}
.page-home .case-card{
    border: 0;
}

/* ==========================================================================
   9. 客户反馈模块 (Client Testimonials Section)
   ========================================================================== */
.page-home .testimonials-dual-layout{
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    align-items: center;
}
.page-home .testimonials-visual-left{
    position: relative;
    padding-left: 15px;
    padding-bottom: 15px;
}
.page-home .testimonials-visual-left::before{
    content: '';
    position: absolute;
    left: 0; top: 15px; width: 100%; height: 100%;
    background-color: #EBC059;
    z-index: 1;
}
.page-home .testimonials-visual-left img{
    position: relative;
    z-index: 2;
    width: 100%;
    /* height: 280px; */
    object-fit: cover;
}

.page-home .testimonials-list-right{
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.page-home .testimonials-list-right.is-scrollable{
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(235, 192, 89, .55) transparent;
    padding-right: 4px;
}
.page-home .testimonials-list-right.is-scrollable::-webkit-scrollbar{
    width: 6px;
}
.page-home .testimonials-list-right.is-scrollable::-webkit-scrollbar-thumb{
    background: rgba(235, 192, 89, .55);
    border-radius: 999px;
}
.page-home .feedback-item-line{
    border: 2px solid #615B4A;
    padding: 15px;
    display: inline-flex;
    gap: 15px;
    flex-shrink: 0;
}
.page-home .feedback-item-line .icon{
    width: 24px;
    height: 10px;
    color:#EBC059;
}
.page-home .feedback-item-line .icon:last-child{
    align-self: flex-end;
}
/* .feedback-item-line:last-child { border-bottom: none; } */
.page-home .feedback-item-line .feedback-user-img{width: 50px;height: 50px;border-radius: 50%;flex-shrink: 0;overflow: hidden;}
.page-home .feedback-item-line .feedback-user-img img{width: 100%;height: 100%;}
.page-home .feedback-item-line p{ font-size: 16px; color: #ffffff; font-style: italic; line-height: 1.6; }


/* ==========================================================================
   10. 最新资讯媒体网格 (Latest News Section)
   ========================================================================== */
.page-home .home-news-more{
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.page-home .home-news-more .btn-outline{
    background-color: #EBC059;
    color: #111625;
    font-size: 18px;
    font-weight: 700;
    padding: 8px 40px;
    border-radius: 2px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    margin-top: auto;
}
.page-home .news-card-big .btn-view{
    border-radius: 2px;
}
.page-home .news-card-big .btn-view{
    padding: 5px 40px;
}
/* ==========================================================================
   11. 奢华宽体底座 (Footer Base Matrix)
   ========================================================================== */
.page-home footer{
    background-color: #0E0D08;
    padding: 60px 0 30px 0;
    color: #718096;
    font-size: 16px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.page-home .footer-grid{
    display: grid;
    grid-template-columns: 1.5fr repeat(2, 1fr);
    gap: 40px;
    border-bottom: 1px solid #4F4F4F;
    padding-bottom: 40px;
    margin-bottom: 25px;
}
.page-home .footer-brand h3{ color: #ffffff; font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.page-home .footer-brand h3 span{ color: #EBC059; }
.page-home .footer-brand p{ font-size: 13px; color: #a0aec0; line-height: 1.6; }

.page-home .footer-links h4{ color: #ffffff; font-size: 18px; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; }
.page-home .footer-links ul{ display: flex; flex-direction: column; gap: 10px; }
.page-home .footer-links ul a{ transition: color 0.2s; }
.page-home .footer-links ul a:hover{ color: #EBC059; }

.page-home .footer-copyright-row{
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
}

/* Mobile nav toggle (dark theme) */
.page-home .nav-toggle{
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
}
.page-home .nav-toggle span{
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.page-about .hero{
    background: url('../img/about-banner-bg.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 80px 0;
}
/* --- Engineering Excellence --- */
.page-about .excellence{
    padding: 60px 0;
    background: #fff;
}
.page-about .excellence-grid{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}
.page-about .section-title-tag{
    color: #1A1A1A;
    font-weight: 700;
    font-size: 38px;
    margin-bottom: 15px;
}
.page-about .section-title-tag span{
    color:#F5B043;
}
.page-about .excellence-text p{
    color: #4D4D4D;
    font-size: 18px;
    /* margin-bottom: 20px; */
}
.page-about .excellence-counter-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 35px;
    text-align: center;
    background: #FFF6E9;
    border:1px solid rgba(245,176,67,.5);
    border-radius: 20px;
    padding:20px;
}
.page-about .excellence-counter-grid .counter-item{
    display: flex;
    flex-direction: column;
    align-items: flex-center;
}
.page-about .counter-item h3{
    color: #F5B043;
    font-size: 40px;
    font-weight: 700;
}
.page-about .counter-item p{
    font-size: 16px;
    color: #1A1A1A;
    font-weight: 500;
}
.page-about .excellence-img{
    height: 470px;
    position: relative;
}
.page-about .excellence-img img{
    width: 100%;
    height: 100%;
}
.page-about .floating-badge,.home .factory-image-container .floating-badge{
    position: absolute;
    bottom: 0px;
    left: 20px;
    right: 20px;
    background-color: #F5B043;
    width: 226px;
    height: 244px;
    color: #fff;
    padding: 30px 20px;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.page-about .floating-badge .icon,.home .factory-image-container .floating-badge .icon{
    color:#fff;
    width: 55px;
    height: 35px;
}

/* --- Triple Engine Ecosystem --- */
.page-about .ecosystem{
    padding: 60px 0;
    background-color: #fdfdfd;
    text-align: center;
}
.page-about .ecosystem h2{
    font-size: 40px;
    margin-bottom: 10px;
}
.page-about .ecosystem-sub{
    color: #4D4D4D;
    font-size: 20px;
    margin-bottom: 40px;
    padding: 0 10px;
}
.page-about .ecosystem-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.page-about .ecosystem-card{
    background: #fff;
    padding: 30px 25px;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.03);
    text-align: left;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}
.page-about .card-icon{
    /* width: 45px; */
    /* height: 45px; */
    background: #fff5e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #F5B043;
    font-weight: bold;
    align-self: center;
}
.page-about .ecosystem-card .card-icon .icon{width: 80px;height: 80px;}
.page-about .ecosystem-card h4{
    font-size: 22px;
    margin-bottom: 12px;
}
.page-about .ecosystem-card p{
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    /* flex-grow: 1; */
}
.page-about .card-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.page-about .tag{
    font-size: 14px;
    background: #FFF6E9;
    color: #F5B043;
    padding: 4px 20px;
    border-radius: 20px;
    border:1px solid rgba(245,176,67,.5);
}

/* --- Engineering Footprint --- */
.page-about .footprint{
    background-color: #0b0e17;
    color: #fff;
    padding: 60px 0;
    text-align: center;
}
.page-about .footprint h2{
    font-size: 40px;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}
.page-about .footprint h2::after{
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 4px;
    background: #F5B043;
}
.page-about .footprint-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}
.page-about .footprint-item h3{
    font-size: clamp(26px, 4vw, 36px);
    color: #F5B043;
    font-weight: 700;
    font-size: 70px;
}
.page-about .footprint-item p{
    font-size: 18px;
    color: #fff;
}
.page-about .footprint-desc{
    font-size: 18px;
    color: #fff;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 10px;
    opacity: 0.6;
}

/* --- Solutions Architect --- */
.page-about .solutions{
    padding: 60px 0;
    background: #fff;
}
.page-about .solutions-grid{
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: center;
}
.page-about .solutions-img{
    height: 520px;
    width: 640px;
    padding:20px;
    background: #fff;
    border: 1px solid #E6E9F2;
    border-radius: 20px;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.05);
}
.page-about .solutions-img img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
}
.page-about .solutions-text .tagline{
    color: #F5B043;
    font-size: 40px;
    font-weight: 700;
}
.page-about .solutions-text h2{
    font-size: 40px;
    /* margin-bottom: 15px; */
}
.page-about .solutions-text > p{
    color: #666;
    font-size: 16px;
    margin-bottom: 20px;
}
.page-about .solutions-features{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.page-about .feature-box{
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    border:1px solid #E6E9F2;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.05);
    /* border-left: 3px solid #F5B043; */
}
.page-about .feature-box .icon{
    width: 38px;
    height: 38px;
    color: #F5B043;
}
.page-about .feature-box h4{
    font-size: 16px;
    /* margin-bottom: 8px; */
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-about .feature-box p{
    color: #777;
    font-size: 14px;
}

/* --- Machinery & Attachments --- */
.page-about .machinery{
    padding: 60px 0;
    background: #f8f9fa;
    text-align: center;
}
.page-about .machinery h2{
    font-size: 40px;
    margin-bottom: 10px;
}
.page-about .machinery p.sub{
    color: #888;
    font-size: 20px;
    margin-bottom: 40px;
}
.page-about .machinery-box{
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.page-about .machinery-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}
.page-about .machinery-item{
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}
.page-about .machinery-icon .icon{
    width: 80px;
    height: 80px;
    background: #fff5e6;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F5B043;
}
.page-about .machinery-note{
    font-size: 16px;
    color: #999;
    /* border-top: 1px solid #eee; */
    padding-top: 20px;
}

/* --- Gallery Section --- */
.page-about .gallery-section{
    padding: 60px 0;
    background: #fff;
    text-align: center;
}
.page-about .gallery-section h2{
    font-size: 40px;
    margin-bottom: 10px;
}
.page-about .gallery-section p.sub{
    color: #888;
    font-size: 20px;
    margin-bottom: 40px;
}
.page-about .gallery-grid{
    display: grid;
    grid-template-columns: 1.2fr 0px 0.9fr 0.9fr;
    grid-template-rows: repeat(2, 260px);
    gap: 20px;
    margin-bottom: 25px;
}
.page-about .gallery-item{
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.page-about .gallery-item:nth-child(1){
    grid-row: span 2;
}
.page-about .gallery-item:nth-child(2){ grid-column: 3; }
.page-about .gallery-item:nth-child(3){ grid-column: 4; }
.page-about .gallery-item:nth-child(4){ grid-column: 3; }
.page-about .gallery-item:nth-child(5){ grid-column: 4; }
.page-about .gallery-item img{width: 100%;height: 100%;border-radius: 20px;}
.page-about .gallery-label{
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    z-index: 2;
    text-align: left;
}
.page-about .gallery-item::after{
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    z-index: 1;
}
.page-about .location-bar{
    background: #fff5e6;
    padding: 32px;
    border-radius: 4px;
    font-size: 20px;
    color: #666;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
    border-radius: 20px;
    border:1px solid rgba(245,176,67,.5);
}
.page-about .location-bar .icon{width: 24px;height: 30px;color:#F5B043;}
/* --- CTA Block --- */
.cta-wrapper{
    background: linear-gradient(to bottom, #ffffff 50%, #F7F7F7 50%);
    padding-top: 10px;
}
.cta-section{
    background-image: url('../img/cta-bg.jpg');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 50px 30px;
    border-radius: 30px;
    text-align: center;
    margin-bottom: -50px;
    position: relative;
    z-index: 10;
}
.cta-section h2{
    font-size: 40px;
    margin-bottom: 15px;
}
.cta-section p{
    color: #fff;
    font-size: 22px;
    margin-bottom: 25px;
}
.cta-btns{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.cta-btns .icon{
    width: 26px;
    height: 26px;
}
/* --- Features Row --- */
.features-row{
    background: #F7F7F7;
    padding: 100px 0 80px 0;
    border-bottom: 1px solid #eee;
}
.features-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
    background: #fff;
    padding:50px 0;
    border-radius: 30px;
    border:1px solid #E6E9F2;
    box-shadow: 0px 15px 15px rgba(255,255,255,0.05);
}
.features-grid .feature-item:nth-child(2){
    padding:0 10px;
    border-left:1px solid #F2F2F2;
    border-right:1px solid #F2F2F2;
}
.feature-item h4{
    font-size: 22px;
    margin: 10px 0;
}
.feature-item p{
    color: #777;
    font-size: 18px;
}
.feature-row-icon{
    color: #F5B043;
    font-size: 20px;
}
.feature-row-icon .icon{
    width: 60px;
    height: 60px;
}
/* --- Footer --- */
footer{
    background: #0b0e17;
    color: rgb(255, 255, 255,.6);
    padding: 80px 0 40px 0;
    font-size: 16px;
}
.footer-grid{
    display: grid;
    grid-template-columns: 1.5fr repeat(2, 1fr);
    gap: 40px;
    border-bottom: 1px solid #4F4F4F;
    padding-bottom: 40px;
    margin-bottom: 30px;
}
.footer-logo{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
.footer-logo span{ color: #F5B043; }
.footer-info{display: flex;flex-direction: column;gap: 10px;}
.footer-info p{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.footer-info .icon{
    width: 24px;
    height: 24px;
    color: #EBC059;
    flex-shrink: 0;
}
.footer-info .footer-social{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
    padding-left: 34px;
}
.footer-social-link{
    display: inline-flex;
    line-height: 0;
    opacity: .92;
    transition: opacity .2s ease, transform .2s ease;
}
.footer-social-link:hover{
    opacity: 1;
    transform: translateY(-1px);
}
.footer-social-link img{
    width: 30px;
    height: 30px;
    display: block;
}
.footer-links h4{
    color: #fff;
    margin-bottom: 20px;
    font-size: 18px;
}
.footer-links ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-bottom{
    display: flex;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    flex-wrap: wrap;
}
.footer-copyright{
    margin: 0;
    text-align: center;
}
.footer-copyright a{
    color: inherit;
}



/* ========== page-cases (cases.css) ========== */
.page-cases .hero{
    background: url('../img/banner-cases.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 90px 0;
}

/* --- Cases Grid Section --- */
.page-cases .cases-section{
    padding: 60px 0;
    background-color: #fff;
}
.page-cases .cases-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* --- 核心交互卡片样式 --- */
.case-card,
a.case-card{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 460px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.case-card::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1;
    transition: background-color 0.3s ease;
}


.case-card .card-img{
    height: 190px;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    transition: height 0.3s ease, opacity 0.3s ease;
}
.case-card .card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-card .card-content{
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.case-card .card-header-box{
    background: transparent;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 6px;
    border-left: none;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}
.case-card .card-header-box::after{
    content: "";
    display: block;
    width: 90px;
    height: 4px;
    background: #EBC059;
}
.case-card h3{
    font-size: 20px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    height: 56px;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}
.case-card p{
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    height: 76.8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    transition: color 0.3s ease;
}
.case-card:hover p{
    -webkit-line-clamp: 6;
    height: 10rem;
}
.case-card .btn-more{
    visibility: hidden;
    opacity: 0;
    align-self: flex-start;
    background: #EBC059;
    color: #1A1A1A;
    padding: 5px 30px;
    font-size: 16px;
    line-height: 1.5;
    height: 34px;
    box-sizing: border-box;
    border-radius: 20px;
    text-transform: uppercase;
    margin-top: auto;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}


/* ========== page-classification (classification.css) ========== */
.page-classification .hero{
    background: url('../img/banner-classification.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 90px 0;
}
/* --- Classification Layout Section (核心分类区块列表) --- */
.page-classification .classification-section{
    padding: 60px 0;
    background-color: #fff;
}
.page-classification .product-class-list{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 单行产品大分类卡片 */
.page-classification .product-class-card{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
    display: grid;
    grid-template-columns: 560px 1fr;
    gap: 40px;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.01);
    transition: all 0.3s ease;
}
.page-classification .product-class-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.04);
}
.page-classification a.class-card-preview-link,
.page-classification a.class-card-meta-link{
    display: block;
    text-decoration: none;
    color: inherit;
}
.page-classification a.class-card-meta-link:hover h3{
    color: #F5B043;
}

/* 左侧主图 */
.page-classification .product-class-card .main-preview-img{
    height: 400px;
    width: 100%;
    /* background-color: #fafafa; */
}
.page-classification .product-class-card .main-preview-img img{
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

/* 右侧内容区域 */
.page-classification .class-info-detail{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
.page-classification .class-meta-top h3{
    font-size: 26px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-classification .class-meta-top h3 .icon{
    width: 26px;
    height: 26px;
    color: #F5B043;
}
/* .class-meta-top h3 span {
    color: #F5B043;
    font-size: 16px;
} */
.page-classification .class-meta-top p.desc{
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 750px;
}

/* 热门标签及推荐型号网格 */
.page-classification .hot-models-box{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.page-classification .hot-title{
    font-size: 20px;
    color: #F5B043;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.page-classification .hot-grid{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.page-classification .hot-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 6px; */
    width: 160px;
    border:1px solid #E6E9F2;
    border-radius: 20px;
    background: rgba(0,0,0,0.6);
}
.page-classification .hot-item .mini-img{
    width: 160px;
    height: 100px;
    font-size: 9px;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}
.page-classification .hot-item .mini-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-classification a.hot-item{
    text-decoration: none;
    color: inherit;
}
.page-classification .hot-item span{
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: 2.5em;
    display: block;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 底部链接操作栏 */
.page-classification .class-action-bar{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    /* border-top: 1px dashed #eee; */
    padding-top: 15px;
}
.page-classification .link-view-all{
    font-size: 14px;
    color: #F5B043;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}
.page-classification .link-view-all:hover{
    color: #e29522;
}
.page-classification .link-view-all::after{
    content: "➔";
    font-size: 11px;
}


/* ========== page-contact (contact.css) ========== */
.page-contact .hero{
    background: url('../img/banner-contact.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 90px 0;
}
/* --- Contact Us Content Grid Section --- */
.page-contact .contact-main-section{
    padding: 80px 0 60px 0;
    background-color: #fff;
}
.page-contact .contact-grid{
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
    background: url('../img/map.png') no-repeat center center;
    background-position: left 300px;
}

/* 左侧信息栏及世界地图背景底纹 */
.page-contact .contact-info-panel{
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400" opacity="0.08"><circle cx="200" cy="150" r="3" fill="%23333"/><circle cx="400" cy="180" r="4" fill="%23333"/><path d="M100,200 Q200,100 400,250 T700,150" fill="none" stroke="%23333" stroke-width="1" stroke-dasharray="5,5"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-bottom: 40px;
    min-height: 450px;
}
.page-contact .contact-info-panel h2{
    font-size: 56px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}
.page-contact .contact-details-list{
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 10px;
}
.page-contact .detail-item{
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.page-contact .detail-icon{
    font-size: 16px;
    color: #F5B043;
    /* background-color: #fff4e3; */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.page-contact .detail-icon .icon{
    width: 24px;
    height: 24px;
    color: #EBC059;
}
.page-contact .detail-text h4{
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 2px;
}
.page-contact .detail-text p{
    font-size: 18px;
    color: #333;
    line-height: 1.5;
}

/* 右侧轻量表单设计 */
.page-contact .contact-form-container{
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.page-contact .contact-form-container h3{
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin-bottom: 25px;
}
.page-contact .form-row-twin{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.page-contact .form-group{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.page-contact .form-group.no-margin{
    margin-bottom: 0;
}
.page-contact .form-group label{
    font-size: 18px;
    font-weight: 600;
    color: #555;
}
.page-contact .form-group label span{
    color: #d9383a;
    margin-left: 3px;
}
.page-contact .form-group input, .page-contact .form-group textarea{
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 18px;
    color: #333;
    outline: none;
    transition: all 0.2s ease;
}
.page-contact .form-group input:focus, .page-contact .form-group textarea:focus{
    border-color: #F5B043;
    box-shadow: 0 0 0 3px rgba(243,166,51,0.15);
}
.page-contact .form-group textarea{
    resize: vertical;
    min-height: 110px;
}
.page-contact .form-submit-btn{
    width: 100%;
    background-color: #F5B043;
    color: #111;
    border: none;
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}
.page-contact .form-submit-btn .icon{
    width: 16px;
    height: 16px;
    color: #000000;
}
.page-contact .form-submit-btn:hover{
    background-color: #e29522;
}

/* --- Interactive Map Section区块 --- */
.page-contact .map-section{
    padding: 0 0 60px 0;
    background-color: #fff;
}
.page-contact .map-wrapper{
    width: 100%;
    height: 420px;
    background-color: #e5e9f0;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.page-contact .contact-google-map{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}



/* ==========================================================================
   🎨 1. 询价弹窗表单核心样式 (Get a Quote Modal CSS)
   ========================================================================== */
.quote-modal-backdrop{
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 暗色半透明背景遮罩 */
    backdrop-filter: blur(3px);          /* 背景轻微模糊，极具现代感 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;                        /* 确保在最上层 */
    opacity: 0; pointer-events: none;     /* 默认隐藏 */
    transition: opacity 0.3s ease;
}
/* 当激活时展示 */
.quote-modal-backdrop.show{
    opacity: 1;
    pointer-events: auto;
}

.quote-modal-box{
    background-color: #ffffff;
    width: 100%;
    max-width: 540px;                     /* 对应设计稿宽度 */
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    position: relative;
    transform: translateY(-30px);         /* 带有入场轻微位移包装 */
    transition: transform 0.3s ease;
    max-height: 90vh;                     /* 防止超出屏幕高度 */
    overflow-y: auto;                     /* 内部允许滚动 */
}
.quote-modal-backdrop.show .quote-modal-box{
    transform: translateY(0);
}

/* 关闭按钮 */
.modal-close-btn{
    position: absolute;
    top: 20px; right: 20px;
    font-size: 22px; color: #a0aec0;
    cursor: pointer; user-select: none;
    transition: color 0.2s;
}
.modal-close-btn:hover{ color: #2d3748; }

/* 表单内部排版 */
.modal-title{ font-size: 22px; font-weight: 700; color: #111625; margin-bottom: 20px; }

.form-group-row{
    display: grid;
    grid-template-columns: 1fr 1fr;       /* PC端左右两列并排 */
    gap: 15px;
    margin-bottom: 15px;
}
.form-item{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 15px;
}
.form-item label{ font-size: 14px; font-weight: 600; color: #2d3748; }
.form-item label span{ color: #e53e3e; margin-left: 3px; } /* 必填项红星 */

/* 输入框原生质感微调 */
.form-input{
    width: 100%;
    padding: 10px 14px;
    font-size: 13.5px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    border-radius: 6px;
    color: #111625;
    outline: none;
    transition: all 0.2s ease;
}
.form-input:focus{
    border-color: #F5B043;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(243, 166, 51, 0.15);
}
textarea.form-input{ min-height: 90px; resize: vertical; }

/* 提交按钮 */
.btn-modal-submit{
    width: 100%;
    background-color: #F5B043;
    color: #111;
    border: none;
    padding: 13px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    transition: background 0.2s;
}
.btn-modal-submit .icon{
    width: 16px;
    height: 16px;
    color: #000000;
}
.btn-modal-submit:hover{ background-color: #e09222; }

/* ========== page-news (news.css) ========== */
.page-news .hero{
    background: url('../img/banner-news.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 90px 0;
}
/* --- News Content Layout Section --- */
.page-news .news-section{
    padding: 60px 0;
    background-color: #fff;
}

/* 新闻分类页签 (News & Events / Technical Support) */
.page-news .news-tabs{
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}
.page-news .tab-item{
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    background-color: #D4CDBB;
    color: #1A1A1A;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}
.page-news .tab-item.active,.page-news .tab-item:hover{
    background-color: #F5B043;
    color: #111;
}

/* --- 顶层三格不规则网格布局 (Top Feature Grid) --- */
.top-news-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}
.top-left-block{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 基础大卡片基础样式 */
.news-card-big,
a.news-card-big{
    background: #fff;
    /* border: 1px solid #eee; */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.01);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.news-card-big:nth-child(2){
    flex-direction: column-reverse;
}
.news-card-big .img-wrapper{
    overflow: hidden;
    position: relative;
}
.news-card-big .img-wrapper .placeholder-img{
    transition: transform 0.5s ease;
}
.news-card-big .news-body{
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}
.news-card-big h3{
    font-size: 20px;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
}
.news-card-big h3::after{
    content:'';
    display: block;
    width: 80px;
    height: 6px;
    margin-top:10px;
    background: #D6D6D6;
}
.news-card-big:hover h3::after{
    background: #EBC059;
}
.news-card-big p{
    font-size: 18px;
    color: #666;
    display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  max-height: calc(1.5em * 6); /* 可选，假设 line-height 为 1.5 */
  line-height: 1.5;
}
.news-card-big .btn-view{
    align-self: flex-start;
    background-color: #D4CDBB;
    color: #4D4A43;
    font-size: 16px;
    font-weight: 500;
    padding: 2px 18px;
    border-radius: 20px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    margin-top: auto;
}

/* 顶部大卡片单独的图高控制 */
.card-type-vertical .img-wrapper .placeholder-img{
    height: 220px;
}
.card-type-vertical .img-wrapper .placeholder-img img,
.card-type-horizontal .img-wrapper .placeholder-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.card-type-horizontal{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    height: calc(50% - 15px);
}
.card-type-horizontal .img-wrapper .placeholder-img{
    height: 100%;
    min-height: 180px;
}

/* 💥 【新设计】顶部大卡片 Hover 效果 */
.news-card-big:hover{
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: #e2e8f0;
}
.news-card-big:hover .img-wrapper .placeholder-img{
    transform: scale(1.03);
}
.news-card-big:hover .btn-view{
    background-color: #F5B043;
    color: #111;
}

/* --- 下部分纵向新闻条目列表 (Row List) --- */
.page-news .news-row-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.page-news .news-row-item,
.page-news a.news-row-item{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 20px;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 25px;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.page-news .news-row-item .row-img-wrapper .placeholder-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.page-news .news-row-item .row-img-wrapper{
    height: 100px;
    width: 160px;
    overflow: hidden;
    border-radius: 4px;
}
.page-news .news-row-item .row-img-wrapper .placeholder-img{
    height: 100%;
}
.page-news .news-row-content{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.page-news .news-row-content h4{
    font-size: 20px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1.4;
}
.page-news .news-row-content p{
    font-size: 18px;
    color: #4D4D4D;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-news .news-row-meta{
    font-size: 11px;
    color: #aaa;
    display: flex;
    gap: 15px;
    margin-top: 4px;
}

/* 💥 【新设计】横向条目新闻 Hover 效果 */
.page-news .news-row-item::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background-color: #F5B043;
    transition: width 0.2s ease;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.page-news .news-row-item:hover{
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border-color: #e2e8f0;
    padding-left: 23px; /* 腾出橙色亮线空间 */
}
.page-news .news-row-item:hover::before{
    width: 4px; /* 激活高亮左竖边线 */
}
.page-news .news-row-item:hover .row-img-wrapper .placeholder-img{
    transform: scale(1.05);
}
.page-news .news-row-item:hover h4{
    color: #F5B043; /* 标题颜色同步变亮 */
}


/* ========== breadcrumbs (site-wide) ========== */
.breadcrumbs-bar{
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    font-size: 14px;
    color: #333;
    overflow-wrap: break-word;
    word-break: break-word;
}
.breadcrumbs-bar .container{
    line-height: 1.5;
}
.breadcrumbs-bar a{
    color: inherit;
    text-decoration: none;
}
.breadcrumbs-bar a:hover{
    color: #F5B043;
}
.breadcrumbs-bar span.current{
    color: #F5B043;
    font-weight: 500;
}

/* ========== floating contact bar (site-wide) ========== */
.floating-contact-bar{
    position: fixed;
    right: 30px;
    bottom: 150px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), gap 0.35s ease;
}
.floating-contact-bar.is-scrolled{
    bottom: 200px;
    gap: 10px;
}
.floating-contact-bar__panel{
    background-color: #EBC059;
    border-radius: 10px;
    overflow: hidden;
    width: 70px;
}
.floating-contact-bar__item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: background-color 0.2s ease;
}
.floating-contact-bar__item.is-last,
.floating-contact-bar__item:last-child{
    border-bottom: none;
}
.floating-contact-bar__item:hover{
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.floating-contact-bar__item img{
    display: block;
    /* width: 28px; */
    /* height: 28px; */
    flex-shrink: 0;
}
.floating-contact-bar__top{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 0;
    max-height: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background-color: #EBC059;
    cursor: pointer;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: max-height 0.35s ease, height 0.35s ease, opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}
.floating-contact-bar.is-scrolled .floating-contact-bar__top{
    height: 56px;
    max-height: 56px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.floating-contact-bar__top:hover{
    background-color: #d9ad4f;
}
.floating-contact-bar__top img{
    display: block;
    /* width: 28px; */
    /* height: 28px; */
}
@media (max-width: 767px){
    body:has(.floating-contact-bar__panel){
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }
    .floating-contact-bar{
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        transition: none;
    }
    .floating-contact-bar.is-scrolled{
        bottom: 0;
        gap: 0;
    }
    .floating-contact-bar__panel{
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
        border-radius: 0;
        background-color: #262834;
    }
    .floating-contact-bar__item{
        flex: 1;
        min-width: 0;
        padding: 10px 6px calc(10px + env(safe-area-inset-bottom, 0px));
        font-size: 11px;
        gap: 4px;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }
    .floating-contact-bar__item.is-last,
    .floating-contact-bar__item:last-child{
        border-right: none;
    }
    .floating-contact-bar__item:hover{
        background-color: rgba(255, 255, 255, 0.08);
    }
    .floating-contact-bar__item img{
        width: 24px;
        height: 24px;
    }
    .floating-contact-bar__top{
        position: fixed;
        right: 16px;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        width: 48px;
        border-radius: 10px;
    }
    .floating-contact-bar.is-scrolled .floating-contact-bar__top{
        height: 48px;
        max-height: 48px;
    }
    .floating-contact-bar__top img{
        width: 18px;
        height: 20px;
    }
}


/* ========== page-news-details (news-details.css) ========== */
/* --- Breadcrumbs (面包屑路径) --- */
.page-news-details .breadcrumbs-bar{
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    font-size: 14px;
    color: #333;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-news-details .breadcrumbs-bar .container{
    line-height: 1.5;
}
.page-news-details .breadcrumbs-bar a:hover{
    color: #F5B043;
}
.page-news-details .breadcrumbs-bar span.current{
    color: #F5B043;
    font-weight: 500;
}

/* --- Main Two-Column Layout Section --- */
.page-news-details .details-layout-section{
    padding: 40px 0 60px 0;
    background-color: #fff;
}
.page-news-details .details-grid{
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 40px;
    align-items: start;
    min-width: 0;
}

/* 左侧文章正文主体 */
.page-news-details .article-main-body{
    background-color: #fff;
    min-width: 0;
    max-width: 100%;
}
.page-news-details .article-header h1{
    font-size: 26px;
    font-weight: 700;
    color: #1A1A1A;
    line-height: 1.3;
    margin-bottom: 12px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-news-details .article-meta{
    font-size: 14px;
    color: #A6A6A6;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.page-news-details .article-content{
    font-size: 18px;
    color: #4D4D4D;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-news-details .article-content p{
    /* text-align: justify; */
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-news-details .article-content .inline-large-img{
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 280px;
    margin: 15px 0;
    border-radius: 6px;
    box-sizing: border-box;
    overflow: hidden;
}
.page-news-details .article-content .inline-large-img::before{
    content: "【 Horizontal Directional Drilling (HDD) Schematic Diagram 】";
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: center;
    padding: 12px 16px;
    max-width: 100%;
    box-sizing: border-box;
}
.page-news-details .article-content h3{
    font-size: 1.2rem;
    color: #1A1A1A;
    font-weight: 700;
    /* margin-top: 15px; */
    /* border-left: 3px solid #F5B043; */
    /* padding-left: 10px; */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 文章内互动联络按钮排(WhatsApp & Inquiry) */
.page-news-details .article-action-row{
    display: flex;
    gap: 15px;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
}
.page-news-details .article-action-row .icon{
    width: 20px;
    height: 20px;

}
.page-news-details .act-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.page-news-details .act-btn-whatsapp{
    background-color: #fff;
    color: #F5B043;
    border: 1px solid #F5B043;
}
.page-news-details .act-btn-whatsapp:hover{
    background-color: rgba(243,166,51,0.05);
}
.page-news-details .act-btn-inquiry{
    background-color: #F5B043;
    color: #fff;
    border: 1px solid #F5B043;
}
.page-news-details .act-btn-inquiry:hover{
    background-color: #e29522;
}

/* 社交分享小图标 */
.page-news-details .article-share-group{
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
}
.page-news-details .share-icon{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: background-color 0.2s;
}
.page-news-details .share-icon:hover{
    background-color: #edf2f7;
    color: #F5B043;
}

/* 文章尾部上下篇导航器 */
.page-news-details .article-nav-pager{
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 16px;
}
.page-news-details .pager-line{
    display: flex;
    gap: 10px;
}
.page-news-details .pager-line .label{
    color: #aaa;
    font-weight: 600;
    width: 80px;
    flex-shrink: 0;
}
.page-news-details .pager-line a{
    color: #4a5568;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}
.page-news-details .pager-line a:hover{
    color: #F5B043;
}

/* 右侧侧边栏组件容器 (Sidebar Column) */
.page-news-details .article-sidebar{
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
    max-width: 100%;
}
.page-news-details .sidebar-widget-title{
    font-size: 22px;
    font-weight: 700;
    color: #1A1A1A;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1A1A1A;
    position: relative;
}
.page-news-details .sidebar-widget-title::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 80px;
    height: 2px;
    background-color: #F5B043;
}

/* 侧边栏小部件 1：RECENT POSTS 最新文章 */
.page-news-details .widget-recent-posts{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.page-news-details .recent-post-item{
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 15px;
    align-items: center;
    cursor: pointer;
    min-width: 0;
}
.page-news-details .recent-post-item{
    padding-bottom: 15px;
    border-bottom: 1px solid #E5E5E5;
}
.page-news-details .recent-post-item .post-thumb{
    width: 128px;
    height: 90px;
    border-radius: 4px;
    overflow: hidden;
}
.page-news-details .recent-post-info h5{
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}
/* Hover：最新文章小卡片联动反馈 */
.page-news-details .recent-post-item:hover .post-thumb{
    background-color: #e2e8f0;
}
.page-news-details .recent-post-item:hover h5{
    color: #F5B043;
}

/* 侧边栏小部件 2：ARCHIVES 历史归档列表 */
.page-news-details .widget-archives-list{
    display: flex;
    flex-direction: column;
}
.page-news-details .archive-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    font-size: 16px;
    color: #4a5568;
    border-bottom: 1px dashed #E5E5E5;
    transition: all 0.2s ease;
    border-radius: 4px;
}
.page-news-details .archive-row .arrow-right{
    color: #ccc;
    font-weight: bold;
    transition: transform 0.2s ease;
}
/* Hover：历史归档行移入特效 */
.page-news-details .archive-row:hover{
    background-color: #f8f9fa;
    color: #F5B043;
    padding-left: 16px;
}
.page-news-details .archive-row:hover .arrow-right{
    color: #F5B043;
    transform: translateX(4px);
}

.page-news-details a.recent-post-item{
    color: inherit;
    text-decoration: none;
}
.page-news-details .recent-post-item .post-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-news-details .article-share-group .share-icon{
    border: none;
    cursor: pointer;
    font: inherit;
}
.page-news-details .article-content img{
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ========== page-case-details ========== */
.page-case-details .article-sidebar > div + div{
    margin-top: 30px;
}
.page-case-details a.sidebar-product-item,
.page-case-details a.recent-post-item{
    color: inherit;
    text-decoration: none;
}
.page-case-details .widget-recent-products{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.page-case-details .sidebar-product-item{
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 15px;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #E5E5E5;
    min-width: 0;
}
.page-case-details .sidebar-product-item:last-child{
    padding-bottom: 0;
    border-bottom: 0;
}
.page-case-details .sidebar-product-item .post-thumb,
.page-case-details .recent-post-item .post-thumb{
    width: 128px;
    height: 90px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f1f3f5;
}
.page-case-details .sidebar-product-item .post-thumb img,
.page-case-details .recent-post-item .post-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-case-details .sidebar-product-item:hover h5,
.page-case-details .recent-post-item:hover h5{
    color: #F5B043;
}
.page-case-details .case-featured-image{
    width: 100%;
    margin-bottom: 20px;
    border-radius: 6px;
    overflow: hidden;
}
.page-case-details .case-featured-image img{
    width: 100%;
    height: auto;
    display: block;
}

/* ========== page-products (products.css) ========== */
.page-products .hero{
    background: url('../img/banner-prolist.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 60px 0;
}
.page-products .custom-quote-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #F5B043;
    color: #111;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.page-products .custom-quote-btn .icon{
    width: 26px;
    height: 26px;
}
.page-products .custom-quote-btn:hover{
    background-color: #e29522;
}

/* ==========================================================================
   主布局：左侧树状筛选 + 右侧3列网格列表 (PRODUCTS详情标准设计)
   ========================================================================== */
.page-products .list-layout-section{
    padding: 50px 0;
    background-color: #fff;
}
.page-products .list-grid{
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: start;
}

/* --- 左侧产品分类筛选树 (Sidebar Filter Tree) --- */
.page-products .filter-sidebar{
    background-color: #fff;
    border: 1px solid #eef0f2;
    border-radius: 6px;
    padding: 20px;
}
.page-products .filter-title{
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.page-products .tree-menu > li{
    margin-bottom: 12px;
}
.page-products .tree-node-title{
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 6px 0;
    gap: 8px;
}
.page-products .tree-item:not(.has-children) .tree-node-title{
    cursor: default;
}
.page-products .tree-node-title a{
    color: inherit;
    text-decoration: none;
    flex: 1;
    min-width: 0;
}
.page-products .tree-node-title > span:first-child{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.page-products .tree-toggle-icon{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #999;
    transition: transform .25s ease;
}
.page-products .tree-toggle-icon .icon{
    width: 14px;
    height: 8px;
    display: block;
}
.page-products .tree-item.is-open > .tree-node-title .tree-toggle-icon{
    transform: rotate(180deg);
}
.page-products .tree-item:not(.is-open) > .tree-sub-menu{
    display: none;
}
.page-products .tree-node-title .icon{
    width: 16px;
    height: 16px;
    color: #1A1A1A;
}
/* 展开状态的子类目列表 */
.page-products .tree-sub-menu{
    margin-top: 5px;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 1px solid #eee;
    margin-left: 5px;
}
.page-products .tree-sub-menu li a{
    font-size: 16px;
    color: #666;
    display: block;
    position: relative;
    padding: 2px 0 2px 8px;
}

/* 💥 Hover交互：左侧子分类树移动悬停 */
.page-products .tree-sub-menu li a:hover, .page-products .tree-sub-menu li.active a{
    color: #F5B043;
    transform: translateX(3px);
}
.page-products .tree-sub-menu li a::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background-color: #F5B043;
    transition: height 0.2s ease;
}
.page-products .tree-sub-menu li a:hover::before, .page-products .tree-sub-menu li.active a::before{
    height: 8px;
}

/* --- 右侧产品列表主板 (Main Products Area) --- */
.page-products .products-display-panel{
    display: flex;
    flex-direction: column;
    gap: 35px;
}

/* 3列网格卡片流 */
.page-products .products-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* 单个产品卡片定义 */
.page-products .product-card{
    background-color: #fff;
    border: 1px solid #eef0f2;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.05);
}
.page-products .product-card-link{
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    cursor: pointer;
}
.page-products .product-card > :not(.product-card-link){
    pointer-events: none;
}

/* 右上角各种极细的状态彩色缎带标签 (HOT / NEW / SOLD) */
.page-products .product-badge{
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    color: #fff;
    z-index: 5;
}
.page-products .badge-hot{ background-color: #ef4444; }
.page-products .badge-new{ background-color: #f59e0b; }
.page-products .badge-sold{ background-color: #6b7280; }

/* 卡片上部：产品图片框 */
.page-products .card-img-wrapper{
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    background-color: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.page-products .card-img-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-products .placeholder-thumb{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: bold;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-products .placeholder-thumb::before{
    content: "📷 Drilling Rig Photo";
}

/* 卡片中部：技术规格描述文案 */
.page-products .card-info-content h4{
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-products .card-info-content p{
    font-size: 14px;
    color: #718096;
    line-height: 1.5;
    margin-bottom: 12px;
    /* height: 36px; */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 属性特征灰色扁平胶囊标签组 */
.page-products .spec-tags-row{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.page-products .spec-pill{
    background-color: #FFF6E9;
    color: #F5B043;
    border: 1px solid rgba(245,176,67,.5);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 15px;
    border-radius: 16px;
}

/* 卡片底部：More information单链接 */
.page-products .card-action-footer{
    margin-top: auto;
    /* border-top: 1px solid #f1f5f9; */
    padding-top: 12px;
}
.page-products .card-more-btn{
    font-size: 14px;
    /* font-weight: 700; */
    color: #F5B043;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding:5px 10px;
    border-radius: 20px;
    border:1px solid #E5E5E5;
}
.page-products .card-more-btn span{
    transition: transform 0.3s ease;
}

/* ==========================================================================
   💥 【新设计】产品瀑布流卡片 核心 Hover 特效样式
   ========================================================================== */
.page-products .product-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06);
    border-color: #e2e8f0;
}
/* 图片轻微平滑放大 */
.page-products .product-card:hover .placeholder-thumb,
.page-products .product-card:hover .card-img-wrapper img{
    transform: scale(1.04);
    color: #F5B043;
}
/* 底部文字变橙色，小箭头向右位移 */
.page-products .product-card:hover .card-more-btn{
    color: #fff;
    background: #F5B043;
}
.page-products .product-card:hover .card-more-btn span{
    transform: translateX(4px);
}

/* --- 底部数据分页器 (Pagination Footer) --- */
.page-products .pagination-container,
.page-cases .pagination-container,
.page-news .pagination-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 13px;
    color: #718096;
}
.page-products .showing-text,
.page-cases .showing-text,
.page-news .showing-text{
    margin-right: auto;
    font-size: 12px;
}
.page-products .page-btn,
.page-cases .page-btn,
.page-news .page-btn,
.page-products .page-node,
.page-cases .page-node,
.page-news .page-node{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}
.page-products .page-btn:hover,
.page-cases .page-btn:hover,
.page-news .page-btn:hover,
.page-products .page-node.active,
.page-cases .page-node.active,
.page-news .page-node.active{
    background-color: #F5B043;
    border-color: #F5B043;
    color: #111;
}


/* ========== page-products-details (products-details.css) ========== */
html:has(body.page-products-details),
body.page-products-details {
    overflow-x: clip;
}
/* --- 面包屑与移动端分类按钮 --- */
.page-products-details .product-mobile-cats-bar{
    background-color: #ffffff;
    padding: 15px 0;
    border-bottom: 1px solid #f0f4f8;
}
.page-products-details .breadcrumb-links{
    font-size: 14px;
    color: #333333;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    flex: 1;
}
.page-products-details .breadcrumb-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    gap: 10px;
}
.page-products-details .breadcrumb-links span{
    margin: 0 6px;
    color: #333333;
}
.page-products-details .mobile-category-trigger{
    display: none;
    background-color: #F5B043;
    color: #111625;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: none;
}
.page-products-details .mobile-category-dropdown{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 999;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    margin-top: 5px;
    padding: 10px 0;
}
.page-products-details .mobile-category-dropdown.active{
    display: block;
}
.page-products-details .mobile-cat-item{
    display: block;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: #2d3748;
    text-decoration: none;
}
.page-products-details .mobile-cat-item:hover{
    color: #F5B043;
}
.page-products-details .thumb-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-products-details .card-img-placeholder img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-products-details a.product-card-item,
.page-products-details a.article-card-strip{
    color: inherit;
    text-decoration: none;
}
.page-products-details a.product-card-item:hover h3,
.page-products-details a.article-card-strip:hover h4{
    color: #F5B043;
}
.page-products-details .parameters-grid-container--html table{
    width: 100%;
    border-collapse: collapse;
}
.page-products-details .parameters-grid-container--html td,
.page-products-details .parameters-grid-container--html th{
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 14px;
}
.page-products-details .parameters-grid-container--html th{
    background: #f8fafc;
    font-weight: 700;
    color: #111625;
}
.page-products-details .social-icon-btn{
    text-decoration: none;
}

.page-products-details .logo-sub{
    font-size: 10px;
    font-weight: 600;
    color: #a0aec0;
    line-height: 1.2;
    margin-left: 8px;
}
.page-products-details .nav-container .logo{
    flex-wrap: wrap;
    max-width: 100%;
}

/* --- 主体布局 --- */
.page-products-details .main-layout{
    padding: 30px 0 60px 0;
}
.page-products-details .layout-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
    min-width: 0;
}
.page-products-details .sidebar{
    background-color: #fff;
    border: 1px solid #eef1f6;
    border-radius: 6px;
    padding: 20px 15px;
}
.page-products-details .sidebar-title{
    font-size: 14px;
    font-weight: 700;
    color: #111625;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1f6;
}
.page-products-details .category-list > li{
    margin-bottom: 6px;
}
.page-products-details .category-item-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
}
.page-products-details .subcategory-list{
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.page-products-details .subcategory-list li a{
    font-size: 12.5px;
    color: #4D4D4D;
    display: block;
    padding: 6px 12px;
}
.page-products-details .subcategory-list li.active a{
    color: #F5B043;
    background-color: #fffaf0;
    font-weight: 600;
}

.page-products-details .details-wrapper{
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.page-products-details .product-essential{
    display: grid;
    grid-template-columns: 10fr 7fr;
    gap: 40px;
    align-items: start;
    min-width: 0;
}

/* 相册 */
.page-products-details .gallery-container{
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.page-products-details .main-slider-wrapper{
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 530px;
    background-color: #f8fafc;
    border: 1px solid #eef1f6;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.05);
}
.page-products-details .main-image-viewer{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #4D4D4D;
    /* background-color: #f1f5f9; */
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-products-details .gallery-slide-viewport{
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.page-products-details .gallery-slide-track{
    display: flex;
    height: 100%;
    transition: transform 0.45s ease;
    will-change: transform;
    touch-action: pan-y;
}
.page-products-details .gallery-slide-item{
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    background-color: #f8fafc;
}
.page-products-details .gallery-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border: 0;
    background: transparent;
    width: clamp(32px, calc(100vw * 46 / 1920), 46px);
    height: clamp(32px, calc(100vw * 46 / 1920), 46px);
    cursor: pointer;
    padding: 0;
}
.page-products-details .gallery-arrow.prev{
    left: clamp(8px, calc(100vw * 16 / 1920), 16px);
}
.page-products-details .gallery-arrow.next{
    right: clamp(8px, calc(100vw * 16 / 1920), 16px);
}
.page-products-details .gallery-arrow.prev img{
    transform: none;
}
.page-products-details .gallery-arrow.next img{
    transform: rotate(180deg);
}
.page-products-details .gallery-arrow img{
    width: 100%;
    height: 100%;
    display: block;
}
.page-products-details .thumbnail-carousel{
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.page-products-details .thumb-item{
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    transition: all 0.2s ease;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
}
.page-products-details .thumb-item.active{
    border-color: #F5B043;
    background-color: #fffaf0;
    color: #F5B043;
}

/* 产品信息 */
.page-products-details .essential-info{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-products-details .essential-info h1{
    font-size: 32px;
    font-weight: 800;
    color: #111625;
    margin-bottom: 4px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-products-details .sku-tag{
    font-size: 14px;
    color: #4D4D4D;
    margin-bottom: 12px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-products-details .product-desc{
    font-size: 14px;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 15px;
    overflow-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-products-details .social-share-box{
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.page-products-details .social-icon-btn{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #edf2f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #4a5568;
}
.page-products-details .technical-spec-list{
    border-top: 1px solid #edf2f7;
    padding-top: 15px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.page-products-details .technical-spec-row{
    display: flex;
    font-size: 14px;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.page-products-details .technical-spec-label{
    min-width: 140px;
    max-width: 50%;
    font-weight: 700;
    color: #4D4D4D;
    flex-shrink: 0;
}
.page-products-details .technical-spec-value{
    color: #111625;
    font-weight: 500;
    min-width: 0;
    flex: 1;
}
.page-products-details .quote-actions-row{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}
.page-products-details .quote-actions-row .btn-gold-sm{
    max-width: 100%;
}

/* ==========================================================================
   标签栏吸顶固定 (Sticky Tabs Strip)
   ========================================================================== */
.page-products-details .tabs-nav-strip-placeholder{
    display: none;
    width: 100%;
}
.page-products-details .tabs-nav-strip{
    display: flex;
    border-bottom: 1px solid #eef1f6;
    gap: 25px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 15px;
    background-color: #ffffff;
    position: relative;
    z-index: 94;
    padding: 10px 0;
    max-width: 100%;
    box-sizing: border-box;
}
.page-products-details .tabs-nav-strip.is-pinned{
    position: fixed;
    top: var(--product-tabs-sticky-top, 52px);
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(17, 22, 37, 0.06);
}
.page-products-details .tabs-nav-strip::-webkit-scrollbar{
    display: none;
}
.page-products-details .tab-nav-item{
    font-size: 16px;
    font-weight: 700;
    color: #4D4D4D;
    padding: 5px 0;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s;
    flex-shrink: 0;
}
.page-products-details .tab-nav-item:hover{ color: #F5B043; }
.page-products-details .tab-nav-item.active{ color: #F5B043; position: relative; }
.page-products-details .tab-nav-item.active::after{
    content: ""; position: absolute; bottom: -11px; left: 0; width: 100%; height: 3px; background-color: #F5B043;
}

/* 纵向平铺锚点区块，并设置滚动偏移量，防止被吸顶栏盖住标题 */
.page-products-details .scroll-block{
    scroll-margin-top: calc(var(--product-tabs-sticky-top, 52px) + var(--product-tabs-strip-height, 46px) + 12px);
}
.page-products-details .tabs-content-block h2{
    scroll-margin-top: calc(var(--product-tabs-sticky-top, 52px) + var(--product-tabs-strip-height, 46px) + 12px);
}
.page-products-details .content-section-title,.page-products-details h2{
    font-size: 22px;
    font-weight: 700;
    color: #111625;
    margin: 30px 0 15px 0;
    padding-left: 10px;
    border-left: 3px solid #F5B043;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-products-details ol{
    padding-left: 20px;
}
.page-products-details .section-paragraph{
    font-size: 20px;
    color: #4a5568;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 参数表矩阵 */
.page-products-details .parameters-grid-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: #e2e8f0;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 15px;
    max-width: 100%;
}
.page-products-details .grid-table-row{
    display: flex;
    background-color: #fff;
    min-width: 0;
}
.page-products-details .grid-cell-title{
    width: 45%;
    background-color: #f8fafc;
    padding: 12px 15px;
    font-size: 20px;
    font-weight: 600;
    color: #4a5568;
    border-right: 1px solid #e2e8f0;
    flex-shrink: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}
.page-products-details .grid-cell-content{
    width: 55%;
    padding: 12px 15px;
    /* font-size: 12.5px; */
    color: #111625;
    font-weight: 500;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
    min-width: 0;
}

.page-products-details .advantages-bullets-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 20px;
    color: #4a5568;
    margin-top: 15px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-products-details .advantages-bullets-list li{ display: flex; gap: 8px; }
.page-products-details .advantages-bullets-list li span{ color: #F5B043; }

/* 相关产品与文章 */
.page-products-details .related-section-header{ font-size: 26px; font-weight: 700; color: #111625; margin: 40px 0 20px 0; padding-bottom: 8px; border-bottom: 2px solid #edf2f7; position: relative; }
.page-products-details .related-section-header::after{ content: ""; position: absolute; bottom: -1px; left: 0; width: 100px; height: 3px; background-color: #F5B043; }
.page-products-details .related-products-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    min-width: 0;
}
.page-products-details .product-card-item{
    background-color: #fff;
    border: 1px solid #eef1f6;
    border-radius: 4px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.05);
    min-width: 0;
}
.page-products-details .card-img-placeholder{
    width: 100%;
    height: 200px;
    background-color: #f8fafc;
    border-radius: 4px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #cbd5e1;
    /* padding: 8px; */
    box-sizing: border-box;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-products-details .product-card-item h3{
    font-size: 20px;
    font-weight: 700;
    color: #111625;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    min-width: 0;
}
.page-products-details .product-card-item p{
    font-size: 14px;
    color: #4D4D4D;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-width: 0;
}

.page-products-details .related-articles-layout{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    min-width: 0;
}
.page-products-details .article-card-strip{
    background-color: #fff;
    border-radius: 10px;
    padding: 25px 20px;
    border: 1px solid #E6E9F2;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.05);
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
.page-products-details .article-card-strip h4{
    font-size: 16px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 4px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 10px;
    min-width: 0;
}
.page-products-details .article-card-strip h4::before{
    content: "✦";
    color: #F5B043;
    flex-shrink: 0;
    line-height: 1.4;
}
.page-products-details .article-card-strip-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    min-width: 0;
    flex: 1;
}
.page-products-details .article-card-strip p{
    font-size: 14px;
    color: #4D4D4D;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-width: 0;
}

.page-products-details .quote-actions-row .btn-gold-sm .icon{
    color: #1A1A1A;
    width: 20px;
    height: 16px;
}



/* ========== page-service (service.css) ========== */
.page-service .hero{
    background: url('../img/service-banner-bg.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 90px 0;
}
/* --- Common Section Headers --- */
.page-service .section-header{
    text-align: center;
    margin-bottom: 40px;
}
.page-service .section-header h2{
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1A1A1A;
}
.page-service .section-header p.sub{
    color: #4D4D4D;
    font-size: 20px;
    max-width: 100%;
    margin: 0 auto;
}

/* --- Service Assurance Block (三列保障) --- */
.page-service .service-assurance{
    padding: 60px 0;
    background-color: #fff;
}
.page-service .assurance-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.page-service .assurance-card{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 15px 20px rgba(0,0,0,0.05);
    padding: 25px;
}
.page-service .assurance-card .card-img{
    height: 220px;
    margin-bottom: 20px;
}
.page-service .assurance-card .card-img  img{width: 100%;height: 100%;border-radius: 10px;}
.page-service .card-meta-title{
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-service .card-meta-title .icon{
    width: 42px;
    height: 42px;
    color: #F5B043;
}
.page-service .card-meta-title h3{
    color: #1A1A1A;
    font-size: 22px;
}
.page-service .assurance-card .detail-item{
    margin-bottom: 15px;
}
.page-service .assurance-card .detail-item h5{
    font-size: 18px;
    color: #1A1A1A;
    margin-bottom: 4px;
}
.page-service .assurance-card .detail-item p{
    font-size: 16px;
    color: #333333;
    line-height: 1.5;
}
.page-service .check-list{
    margin-top: 15px;
    /* border-top: 1px solid #f0f0f0; */
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-service .check-item{
    font-size: 16px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 6px;
}
.page-service .check-item .icon{
    width: 26px;
    height: 26px;
    color: #F5B043;
}

/* --- Technical Support & Training (对齐/不对称嵌套布局) --- */
.page-service .tech-support{
    padding: 60px 0;
    background-color: #f8f9fa;
}
.page-service .tech-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}
.page-service .tech-main-card, .page-service .tech-side-card{
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.05);
}
.page-service .tech-main-card{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 30px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.page-service .tech-main-card .card-img{
    height: 270px;
}
.page-service .tech-main-card .card-img img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.page-service .tech-main-card h4{
    font-size: 28px;
    color: #1A1A1A;
}
.page-service .tech-main-card p{
    font-size: 18px;
    color: #4D4D4D;
}
.page-service .tech-main-card .icon{
    width: 18px;
    height: 22px;
    color: #F5B043;
}
.page-service .info-badge{
    display: inline-flex;
    gap:8px;
    font-weight: 600;
    align-self: flex-start;
    font-size: 14px;
    background: #FFF6E9;
    color: #1A1A1A;
    padding: 10px 30px;
    border-radius: 20px;
    border:1px solid rgba(245,176,67,.5);
}
.page-service .tech-side-stack{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.page-service .tech-side-stack .icon{
    width: 60px;
    height: 60px;
    color: #F5B043;
}
.page-service .tech-side-stack .tech-side-card:nth-child(1){
    display: flex;
    gap:10px;
}
.page-service .tech-side-stack .tech-side-card .card-img{
    width: 200px;
    height: auto;
    flex-shrink: 0;
}
.page-service .tech-side-card{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 30px;
    padding: 25px;
}
.page-service .tech-side-card h4{
    font-size: 28px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-service .tech-side-card p{
    font-size: 18px;
    color: #4D4D4D;
}
.page-service .tech-side-card .card-img{
    height: 120px;
    margin-bottom: 15px;
}
.page-service .think-tank-bar{
    background: linear-gradient(to bottom,#333333,#000000);
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 600;
}
.page-service .think-tank-bar .icon{
    width: 30px;
    height: 30px;
    color: #F5B043;
}
.page-service .think-tank-bar span{
    margin-left: 10px;
    margin-right: 5px;
    font-weight: 700;
}

/* --- Global Parts Supply Hub (供应链板块) --- */
.page-service .parts-hub{
    padding: 60px 0;
    background: #fff;
}
.page-service .parts-grid{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 30px;
}
.page-service .parts-left-box{
    border: 1px solid #eee;
    border-radius: 30px;
    padding: 25px;
    background: #fff;
}
.page-service .parts-left-box .card-img{
    /* height: 280px; */
    margin-bottom: 20px;
}
.page-service .parts-features-mini{
    position: absolute;
    bottom:0px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 20px;
}
.page-service .mini-feat-item{
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 6px;
}
.page-service .mini-feat-item .icon{ color: #F5B043;width: 30px;height: 30px; }
.page-service .parts-left-box h4{
    font-size: 28px;
    margin-bottom: 8px;
}
.page-service .parts-left-box p{
    font-size: 18px;
    color: #777;
    margin-bottom: 20px;
}
.page-service .tag-container-cloud{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.page-service .tag-container-cloud .icon{
    width: 20px;
    height: 20px;
    color: #F5B043;
}
.page-service .tag-cloud-item{
    font-size: 14x;
    color: #666;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    background: #FFF6E9;
    color: #1A1A1A;
    padding: 5px 20px;
    border-radius: 20px;
    border:1px solid rgba(245,176,67,.5);
}
.page-service .parts-right-stack{
    background: linear-gradient(to right,#333333,#000000);
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 30px;
    padding:20px;
    box-sizing: border-box;
    justify-content: space-between;
}
.page-service .hub-dark-card{
    /* background: #0b0e17; */
    color: #fff;
    border-radius: 8px;
    /* padding: 30px; */
    text-align: center;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-between;
}
.page-service .hub-dark-card h3{font-size: 28px;color:#fff;}
.page-service .hub-dark-card .icon{
    width: 30px;
    height: 20px;
}
.page-service .hub-dark-card .btn{
    background-color: rgba(245,176,67,0.1);
    color: #F5B043;
}
.page-service .hub-dark-card .hub-badge{
    color: #F5B043;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
}
.page-service .hub-dark-card .hub-badge .icon{
    width: 70px;
    height: 70px;
}
.page-service .hub-dark-card p{
    font-size: 18px;
    margin-bottom: 12px;
    padding:15px;
    text-align: left;
}
/* .hub-dark-card p {
    color: #aaa;
    font-size: 12px;
    margin-bottom: 20px;
    line-height: 1.5;
} */
.page-service .hub-dark-card .btn{
    width: 100%;
    border-radius: 10px;
}
.page-service .network-img-box{
    height: 175px;
}


@media (hover: hover) and (pointer: fine) {
    .case-card:hover{
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        background-image: var(--case-hover-bg, url('../img/cases.jpg'));
        background-size: cover;
        background-position: center;
    }
    .case-card:hover .card-img{
        height: 0;
        opacity: 0;
    }
    .case-card:hover .card-content{
        flex: 1;
        z-index: 2;
    }
    .case-card:hover .card-header-box{
        background: #EBC059;
    }
    .case-card:hover h3{
        color: #111;
    }
    .case-card:hover p{
        color: #ccc;
    }
    .case-card:hover .btn-more{
        visibility: visible;
        opacity: 1;
    }
    .case-card:hover::before{
        background-color: rgba(0, 0, 0, 0.7);
    }
}
@media (max-width: 1440px) {
    .page-home .container{ padding: 0 20px; }
    .page-home .section-padding{padding: 60px 0;}
    .page-home .section-title-container{margin-bottom: 40px;}
    .page-home .section-title-container h2{font-size: 28px;}
    .page-home .section-title-container p{font-size: 20px;}
    .page-home .about-stats-row{grid-template-columns:repeat(4, 1fr);}
    .page-home .about-bullet-node{font-size: 18px;}
    .page-home .about-text-column p{margin-bottom: 8px;}
    .page-home .about-bullets-list{gap: 8px;}
    .page-home .stat-icon-unit .icon{width: 30px;height: 30px;}
    .page-home .stat-icon-unit .stat-num{font-size: 24px;}
    .page-home .stat-icon-unit .stat-label{font-size: 16px;}
    .page-home .about-text-column p,.page-home .about-text-column .about-bullets-list>p,.page-home .about-bullet-node{font-size: 18px;}
    .page-home .product-white-card{padding: 8px;}
    .page-home .product-white-card h3{font-size: 20px;margin-bottom: 4px;}
    .page-home .product-white-card h3::after{width: 60px;height: 2px;margin: 4px auto;}
    .page-home .product-white-card p{font-size: 14px;margin-bottom: 8px;}
    .page-home .product-white-card .btn-outline{font-size:16px;padding: 4px 12px;}
    .page-home .product-white-card .btn-outline .icon{width: 16px;height: 16px;}
    .page-home .product-white-card .btn-outline:hover{background-color: #EBC059;color: #111625;}
    .page-home .product-white-card .btn-outline:hover .icon{filter: brightness(0) invert(1);}
    .page-home .product-white-card .btn-outline:hover span{color: #111625;}
    .page-home .product-white-card .btn-outline:hover .icon{filter: brightness(0) invert(1);}
    .hero h1{font-size: 38px;}
    .hero p{font-size: 16px;}
    .hero-buttons{flex-direction: column;gap: 10px;}
    .hero-buttons .btn{font-size: 16px;padding: 10px 20px;}
    .hero-buttons .btn .icon{width: 16px;height: 16px;}
    .hero-buttons .btn:hover{background-color: #EBC059;color: #111625;}
    .hero-buttons .btn:hover .icon{filter: brightness(0) invert(1);}
    .hero-buttons .btn:hover span{color: #111625;}
    .hero-buttons .btn:hover .icon{filter: brightness(0) invert(1);}
    .hero-buttons .btn:hover span{color: #111625;}
    .hero-buttons .btn:hover .icon{filter: brightness(0) invert(1);}
    .hero-buttons .btn:hover span{color: #111625;}
    .page-about .section-title-tag{font-size: 32px;}
    .page-about .section-title-tag span{font-size: 32px;}
    .page-about .section-title-tag span::after{width: 60px;height: 2px;margin: 4px auto;}
    .page-about .section-title-tag span::after{width: 60px;height: 2px;margin: 4px auto;}
    .page-about .counter-item h3{font-size: 28px;}
    .page-about .counter-item p{font-size: 16px;}
    .page-about .counter-item .icon{width: 32px;height: 32px;}
    .page-about .counter-item .icon{width: 32px;height: 32px;}
    .page-about .ecosystem h2{font-size: 32px;}
    .page-about .ecosystem-sub{font-size: 18px;}
    .page-about .ecosystem-card{padding: 16px;}
    .page-about .ecosystem-card h4{font-size: 18px;}
    .page-about .ecosystem-card p{font-size: 16px;}
    .page-about .card-tags{gap: 16px;}
    .page-about .tag{font-size: 14px;padding: 4px 16px;}
    .page-about .footprint h2{font-size: 32px;}
    .page-about .footprint-item h3{font-size: 40px;}
    .page-about .footprint-item p{font-size: 18px;}
    .page-about .footprint-desc{font-size: 16px;}
    .page-about .solutions-text .tagline{font-size: 32px;}
    .page-about .solutions-text h2{font-size: 32px;}
    .page-about .solutions-features .feature-box{gap: 4px;}
    .page-about .solutions-features .feature-icon{width: 24px;height: 24px;}
    .page-about .solutions-grid{gap: 30px;}
    .page-about .solutions-features .feature-icon .icon{width: 30px;height: 30px;}
    .page-about .solutions-features .feature-box h4{font-size: 18px;}
    .page-about .solutions-features .feature-box p{font-size: 16px;}
    .page-about .machinery h2{font-size: 32px;}
    .page-about .machinery p.sub{font-size: 18px;}
    .page-about .machinery-box{padding: 25px;}
    .page-about .machinery-item{font-size: 16px;}
    .page-about .machinery-icon .icon{width: 68px;height: 68px;}
    .page-about .machinery-note{font-size: 16px;}
    .page-about .gallery-section h2{font-size: 32px;}
    .page-about .gallery-section p.sub{font-size: 18px;}
    .page-about .gallery-grid{gap:15px;grid-template-rows: repeat(2, 230px);}
    .page-about .location-bar{font-size: 18px;padding: 10px 8px;}
    .page-about .location-bar .icon{width: 24px;height: 30px;}
    .cta-section h2{font-size: 32px;}
    .cta-section p{font-size: 18px;}
    .cta-section .btn{font-size: 16px;padding: 10px 20px;}
    .cta-section .btn .icon{width: 16px;height: 16px;}
    .cta-section .btn:hover{background-color: #EBC059;color: #111625;}
    .cta-section .btn:hover .icon{filter: brightness(0) invert(1);}
    .cta-section .btn:hover span{color: #111625;}
    .cta-section .btn:hover .icon{filter: brightness(0) invert(1);}
    .cta-section .btn:hover span{color: #111625;}
    .cta-section .btn:hover .icon{filter: brightness(0) invert(1);}
    .cta-section .btn:hover span{color: #111625;}
    .feature-item h4{font-size: 20px; margin-bottom: 10px;}
    .feature-item p{font-size: 16px;}
    .page-about .solutions-img{width: auto;height: auto;}
    .page-about .solutions-features{gap:10px;}
    .page-classification .product-class-card{grid-template-columns: .6fr 1fr;gap:30px;padding:20px;}
    .page-classification .product-class-card .main-preview-img{height: auto;width: 100%;}
    .page-classification .hot-grid{flex-wrap: nowrap;}
    .btn{padding:12px 50px;}
    footer{padding: 40px 0;}
    .page-products .list-grid{gap:30px;grid-template-columns:0.35fr 1fr;}
    .page-products .filter-sidebar{padding: 15px;}
    .page-products .products-grid{gap:20px;}
    .page-products .product-card{padding: 10px;}
    .page-products .card-info-content h4{font-size: 18px;margin-bottom: 5px;}
    .page-products .card-info-content p{font-size: 16px;margin-bottom: 10px;}
    .page-products .card-info-content .btn{font-size: 14px;padding: 8px 20px;}
    .page-products .card-info-content .btn .icon{width: 14px;height: 14px;}
    .page-products .card-info-content .btn:hover{background-color: #EBC059;color: #111625;}
    .page-products .card-info-content .btn:hover .icon{filter: brightness(0) invert(1);}
    .page-products .card-info-content .btn:hover span{color: #111625;}
    .page-products .card-info-content .btn:hover .icon{filter: brightness(0) invert(1);}
    .page-products-details .essential-info h1{font-size: 28px;}
    .page-products-details .essential-info p{font-size: 16px;}
    .page-products-details .essential-info .btn{font-size: 14px;padding: 8px 20px;}
    .page-products-details .essential-info .btn .icon{width: 14px;height: 14px;}
    .page-products-details .essential-info .btn:hover{background-color: #EBC059;color: #111625;}
    .page-products-details .essential-info .btn:hover .icon{filter: brightness(0) invert(1);}
    .page-products-details .essential-info .btn:hover span{color: #111625;}
    .page-products-details .essential-info .btn:hover .icon{filter: brightness(0) invert(1);}
    .page-products-details .essential-info .btn:hover span{color: #111625;}
    .page-products-details .essential-info .btn:hover .icon{filter: brightness(0) invert(1);}
    .page-products-details .essential-info .btn:hover span{color: #111625;}
    .page-products-details .grid-cell-title{font-size:18px;}
    .page-products-details .related-section-header{font-size:24px;}
    .page-service .section-header h2{font-size: 32px;}
    .page-service .section-header p.sub{font-size: 18px;}
    .page-service .assurance-grid{gap:20px;}
    .page-service .assurance-card{padding: 20px;border-radius: 20px;}
    .page-service .assurance-card .card-img{height: 200px;}
    .page-service .assurance-card .card-img img{height: 100%;}
    .page-service .assurance-card .card-content h4{font-size: 18px;margin-bottom: 5px;}
    .page-service .assurance-card .card-content p{font-size: 16px;margin-bottom: 10px;}
    .page-service .assurance-card .card-content .btn{font-size: 14px;padding: 8px 20px;}
    .page-service .assurance-card .card-content .btn .icon{width: 14px;height: 14px;}
    .page-service .assurance-card .card-content .btn:hover{background-color: #EBC059;color: #111625;}
    .page-service .assurance-card .card-content .btn:hover .icon{filter: brightness(0) invert(1);}
    .page-service .assurance-card .card-content .btn:hover span{color: #111625;}
    .page-service .assurance-card .card-content .btn:hover .icon{filter: brightness(0) invert(1);}
    .page-service .tech-side-card,.page-service .tech-main-card{padding:20px;border-radius: 20px;}
    .page-service .tech-side-card h4,.page-service .tech-main-card h4{font-size: 24px;}
    .page-cases .cases-grid{gap:20px;}
    .page-news-details .article-header h1{font-size: 24px;}
    .page-news-details .sidebar-widget-title{font-size:20px;}
    .page-news-details .details-grid{grid-template-columns: 2.5fr 1fr;gap:30px;}
    .page-news-details .recent-post-item{grid-template-columns: 1fr 2fr;}
    .page-case-details .sidebar-product-item .post-thumb, .page-case-details .recent-post-item .post-thumb{width: auto;height: auto;}
    .page-news .news-row-item, .page-news a.news-row-item{padding:15px;}
    .page-news-details .article-content h2{font-size: 1.5rem;}
    .page-news-details .article-content h3{font-size: 1.2rem;}
    .page-contact .contact-info-panel h2{font-size: 38px;}
    .page-contact .contact-grid{gap:50px;}
    
}
@media (max-width: 1024px) {
    .hero{padding:40px 0 !important;}
    .page-home .testimonials-visual-left{display: none;}
    .page-about .solutions-features .feature-icon .icon{width: 24px;height: 24px;}
    .page-home .products-six-grid, .page-home .news-three-column{ grid-template-columns: repeat(2, 1fr); }
    .page-home .cases-asymmetric-row{ grid-template-columns: 1fr; }
    .page-home .apps-horizontal-matrix{ grid-template-columns: repeat(3, 1fr); }
    .page-home .categories-grid-layout,.page-home .testimonials-dual-layout{ grid-template-columns: 1fr; }
    .page-home .category-main-panel{
        flex-direction: column;
        align-items: stretch;
        padding: 24px 20px;
    }
    .page-home .panel-media-side{
        width: 100%;
        height: 180px;
    }
    .page-cases .cases-grid{ grid-template-columns: repeat(2, 1fr); }
    .page-classification .product-class-card{ grid-template-columns: 260px 1fr; gap: 25px; padding: 20px; }
    .page-classification .product-class-card .main-preview-img{ height: 260px; }
    .page-news .top-news-grid{ grid-template-columns: 1fr; }
    .page-news .card-type-horizontal{ height: auto; }
    .page-products .list-grid{ grid-template-columns: 1fr; gap: 30px; }
    .page-products .products-grid{ grid-template-columns: repeat(2, 1fr); }
    .page-service .assurance-grid{ grid-template-columns: repeat(2, 1fr); }
    .page-contact .contact-grid{display: flex;flex-wrap: wrap;}
    .page-contact .contact-info-panel{min-height: 10rem;}
    .page-contact .contact-form-container{width: 100%;}
    .cta-section h2{font-size: 28px;}
    .cta-section{padding:40px 20px;}
    .card-type-vertical .img-wrapper .placeholder-img{height: auto;}
    .page-news-details .details-grid{display: flex;flex-direction: column;}
    .page-news-details .recent-post-item{grid-template-columns: 128px 1fr;}
    .hero h1{font-size: 28px;}
    .page-service .tech-grid{display: flex;flex-direction: column;}
    .page-service .parts-grid{display: flex;flex-direction: column;}
    .page-service .network-img-box img{width: 100%;}
    .page-classification .class-meta-top h3{font-size: 24px;}
    .page-classification .hot-item:nth-child(3){display: none;}
    .page-products .filter-sidebar{order:1;}
    .page-products-details .section-paragraph{font-size: 18px;}
    .page-products-details .grid-cell-title{font-size: 16px;}
    .page-products-details .product-card-item{padding:10px;}
    .page-products-details .related-products-grid{grid-template-columns: repeat(2,1fr);}
    .page-products-details .card-img-placeholder{height: auto;}
    .page-about .excellence-grid,.page-about .solutions-grid{grid-template-columns: 1fr;}
    .page-about .ecosystem-grid{gap:15px;}
    .page-home .about-main-layout{grid-template-columns: 1fr;}
    .page-home .about-visual-column{order:-1;}
    .page-home .product-white-card{box-shadow: 10px -10px 0px #EBC059;}
    .page-home .products-six-grid{gap:50px;}
    .top-news-grid{grid-template-columns: repeat(2, 1fr);}
    .news-card-big,.page-home a.news-card-big:nth-child(3){display: none;}
    .news-card-big .img-wrapper img{width: 100%;}
    .news-card-big:nth-child(2){flex-direction: column;}
}
/* 响应式断点 */
@media (max-width: 992px) {
    .page-products-details .layout-grid{ grid-template-columns: 1fr; }
    .page-products-details .sidebar{ display: none; }
    .page-products-details .mobile-category-trigger{ display: inline-flex; }
    .page-products-details .product-essential{ grid-template-columns: 1fr; gap: 25px; }
    .page-products-details .main-slider-wrapper{
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .page-products-details .main-layout .container{
        padding: 0 16px;
    }
}
@media (max-width: 768px) {
    .page-products .custom-quote-btn{font-size: 18px;padding: 10px 20px;}
    .page-home .app-square-box .icon-placeholder .icon{width: 40px;height: 40px;}
    .page-home .header-flex{ flex-wrap: wrap; }
    .page-home .nav-toggle{ display: flex; }
    .page-home .nav-menu{
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        gap: 12px;
        padding: 10px 0;
    }
    .page-home .nav-menu.is-open{ display: flex; }
    .page-home .hero-center-content h1{ font-size: 28px; }
    .page-home .hero-banner{ height: 420px; }
    .page-home .section-padding{ padding: 50px 0; }
    .page-home .section-title-container{ margin-bottom: 30px; }
    .page-home .section-title-container p{ font-size: 16px; letter-spacing: 0; }
    .page-home .hero-buttons{ flex-direction: column; align-items: center; }
    .page-home .about-stats-row{ grid-template-columns: repeat(2, 1fr); }
    .page-home .about-bullet-node{ font-size: 16px; }
    .page-home .products-six-grid{ gap: 15px; }
    .page-about .excellence-grid, .page-about .solutions-grid{
        grid-template-columns: 1fr; /* 左右分栏变为上下单栏堆叠 */
        gap: 30px;
    }
    .page-about .excellence-img, .page-about .solutions-img{
        height: 280px;
        grid-row: 1; /* 让图片在手机端优先排在文本上方 */
    }
    .page-about .excellence-text{
        grid-row: 2;
    }
    .page-about .solutions-features{
        grid-template-columns: 1fr;
    }
    .page-about .gallery-grid{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .page-about .gallery-item:nth-child(1){
        grid-row: span 1;
        grid-column: span 2;
    }
    .page-about .gallery-item{
        height: 180px;
    }
    .page-about .features-grid{
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .page-about .features-grid .feature-item:nth-child(2){
        padding: 0;
        border-left: none;
        border-right: none;
    }
    .page-about .footer-grid{
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .cta-section h2{
        font-size: 28px;
    }
    .cta-section p{
        font-size: 16px;
    }
    .page-cases .cases-grid{ grid-template-columns: 1fr; gap: 25px; }
    .page-classification .product-class-card{ grid-template-columns: 1fr; gap: 20px; }
    .page-classification .product-class-card .main-preview-img{ height: 220px; }
    .page-classification .class-action-bar{ justify-content: center; }
    .page-contact .contact-main-section{ padding: 50px 0; }
    .page-contact .contact-form-container{ padding: 30px 20px; }
    .page-contact .map-wrapper{ height: 320px; }
    .product-essential{ grid-template-columns: 1fr; }
    .form-group-row{ grid-template-columns: 1fr; gap: 0; } /* 手机端强制单列排版 */
    .quote-modal-box{ padding: 20px; max-width: 92%; }
    
    /* 当手机端输入框聚焦且需要推高时的辅助过渡类 */
    .quote-modal-box.keyboard-active{
        padding-bottom: 40px; /* 增加底部垫高，确保Send按钮能被推得更高 */
    }
    .page-news .card-type-horizontal{ grid-template-columns: 1fr; }
    .page-news .news-row-item{ grid-template-columns: 1fr; gap: 15px; }
    .page-news .news-row-item .row-img-wrapper{ width: 100%; height: 160px; }
    .page-news-details .details-grid{ grid-template-columns: 1fr; gap: 30px; }
    .page-news-details .details-layout-section{ padding: 30px 0; }
    .page-news-details .article-action-row{ flex-direction: column; align-items: stretch; gap: 12px; }
    .page-news-details .article-share-group{ margin-left: 0; justify-content: center; margin-top: 10px; }
    .page-products .products-grid{ grid-template-columns: 1fr; }
    .page-products .pagination-container,
    .page-cases .pagination-container,
    .page-news .pagination-container{ flex-direction: column; gap: 12px; text-align: center; }
    .page-products .showing-text{ margin-right: 0; }
    .page-products-details .essential-info h1{ font-size: 28px; }
    .page-products-details .section-paragraph{ font-size: 16px; }
    .page-products-details .grid-cell-title{ font-size: 14px; padding: 10px 12px; }
    .page-products-details .advantages-bullets-list{ font-size: 16px; }
    .page-products-details .parameters-grid-container{ grid-template-columns: 1fr; }
    .page-products-details .grid-table-row{ flex-direction: column; }
    .page-products-details .grid-cell-title, .page-products-details .grid-cell-content{
        /* width: 100%; */
        border-right: none;
    }
    .page-products-details .grid-cell-title{
        border-bottom: 1px solid #e2e8f0;
    }
    .page-products-details .related-products-grid{ grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .page-products-details .related-articles-layout{ grid-template-columns: 1fr; gap: 15px; }
    .page-products-details .advantages-grid{ grid-template-columns: 1fr; gap: 25px; }
    .page-products-details .thumb-item{ width: 80px; height: 80px; font-size: 10px; }
    .page-products-details .main-image-viewer{ font-size: 14px; }
    .page-service .assurance-grid, .page-service .tech-grid, .page-service .parts-grid{ grid-template-columns: 1fr; gap: 30px; }
    .page-service .tech-side-stack{ gap: 20px; }
    .page-home .section-title-container h2{font-size: 24px;}
    .page-home .app-square-box{padding:15px 5px;}
    .page-home .product-white-card{padding: 5px;}
    
    .page-home .categories-grid-layout, .page-home .about-main-layout, .page-home .testimonials-dual-layout, .page-home .footer-grid{ grid-template-columns: 1fr; }
    .page-home .products-six-grid, .page-home .news-three-column{ grid-template-columns:  repeat(2, 1fr); }
    .page-home .product-white-card .product-img-slot{margin-bottom: 5px;}
    .page-home .product-white-card h3{font-size: 18px;margin-bottom: 5px;}
    .page-home .product-white-card h3::after{width: 100%;height: 2px;margin: 5px auto;}
    .page-home .product-white-card p{font-size: 14px;margin-bottom: 10px;}
    .page-home .about-bullet-node .icon{width: 20px;height: 20px;}
    .page-home .about-text-column p{margin-bottom: 10px;}
    .page-home .about-bullets-list{gap: 10px;}
    .page-home .stat-icon-unit .icon{width: 40px;height: 40px;}
    .page-home .stat-icon-unit .stat-num{font-size: 20px;}
    .page-home .stat-icon-unit .stat-label{font-size: 14px;}
    .page-home .about-text-column p,.page-home .about-text-column .about-bullets-list>p,.page-home .about-bullet-node{font-size: 16px;}
    .page-home .product-white-card{box-shadow: 5px -5px 0px #EBC059;}
    .page-home .apps-horizontal-matrix{ grid-template-columns: repeat(3, 1fr); }
    .page-about .floating-badge, .home .factory-image-container .floating-badge{padding: 15px 10px;font-size: 16px;width: 40vw;height: 10em;}
    .page-about .floating-badge .icon, .home .factory-image-container .floating-badge .icon{width: 30px;height: 30px;}
    .page-home .about-main-layout{gap: 20px;}
    .case-card .card-content{padding: 10px;}
    .case-card .card-header-box{padding: 0;}
    .case-card h3{font-size: 18px;height: auto;}
    .page-home .about-visual-column{order: -1;}
    .page-home .stat-icon-unit{padding: 5px;}
    .page-home .about-stats-row{grid-template-columns:repeat(4, 1fr);}
    .top-news-grid{grid-template-columns: 1fr;}
    .case-card, a.case-card,.case-card p{height:auto;}
    .news-card-big .news-body{padding: 10px;}
    .news-card-big h3{font-size: 18px;margin-bottom: 5px;}  
    .news-card-big h3::after{width: 60px;height: 3px;}
    .news-card-big p{font-size: 16px;-webkit-line-clamp: 4;}
    .page-home .home-news-more .btn-outline{font-size:16px;padding: 5px 15px;}
    .page-home .home-news-more{margin-top: 20px;}
    .page-home .section-padding{padding: 30px 0;}

    .page-about .excellence,.page-about .ecosystem,.page-about .footprint,.page-about .solutions,.page-about .machinery,.page-about .gallery-section,.page-service .service-assurance,.page-service .tech-support,.page-service .parts-hub{padding: 30px 0;}
    .container{padding: 0;}
    .page-about .section-title-tag,.page-about .ecosystem h2,.page-about .footprint h2,.page-about .solutions-text .tagline,.page-about .solutions-text h2,.page-about .machinery h2,.page-about .gallery-section h2,.page-about .section-title-tag span{font-size: 24px;}
    .page-about .excellence-text p,.page-about .ecosystem-sub,.page-about .gallery-section p.sub,.page-about .gallery-label{font-size: 16px;}
    .page-about .counter-item h3{font-size: 32px;}
    .page-about .ecosystem-sub,.page-about .footprint h2{margin-bottom: 20px;}
    .page-about .ecosystem-grid{grid-template-columns: 1fr;}
    .page-about .ecosystem-card h4{font-size: 20px;}
    .page-about .ecosystem-card .card-icon .icon{width: 60px;height: 60px;}
    .page-about .ecosystem-card{padding: 20px 10px;}
    .page-about .card-tags,.page-about .ecosystem-grid,.page-about .footprint-grid{gap:10px;}
    .page-about .footprint-item h3{font-size: 40px;}
    .page-about .footprint-grid{grid-template-columns: repeat(2, 1fr);}
    .page-about .solutions-img{display: none;}
    .solutions-features .feature-box {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 5px 10px;
        align-items: start;
    }
      
    .solutions-features .feature-icon {
        grid-row: span 2;  /* 图标跨两行，对齐 h4 和 p 的整体高度 */
        width: 30px;
        height: 30px;
      }
      
    .solutions-features .feature-icon .icon {
        width: 100%;
        height: 100%;
      }
      
    .solutions-features .feature-box h4 {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 600;
      }
      
    .solutions-features .feature-box p,.feature-item p {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
        color: #666;
      }
      .page-about .machinery p.sub{font-size: 16px;margin-bottom: 20px;}
      .page-about .machinery-box{padding: 20px;}
      .page-about .machinery-grid{display: grid;grid-template-columns:repeat(4,1fr);gap:10px;}
      .page-about .machinery-item{font-size: 14px;}
      .page-about .machinery-icon .icon{width: 60px;height: 60px;}
      .page-about .machinery-note{font-size: 14px;padding-top: 10px;}
    /* .page-about .section-title-tag span{font-size: 24px;} */
    .page-about .gallery-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;  /* 默认两列 */
        gap: 5px;                       /* 间距，根据需要调整 */
    }
    .page-about .gallery-item img{border-radius: 5px;}
    /* 第一个元素占满整行（跨两列） */
    .page-about .gallery-item{width: calc(50vw - 19px);}
    .page-about .gallery-grid .gallery-item:first-child {
    grid-column: span 2;
    width: calc(100vw - 32px);
    }
    .page-about .gallery-grid{display: flex;flex-wrap: wrap;gap: 5px;}
    
    .page-about .gallery-section p.sub{margin-bottom: 20px;}
    .page-about .location-bar{font-size: 16px;padding: 15px 10px;}
    .page-about .location-bar .icon{flex-shrink: 0;}
    .cta-section{padding: 30px 10px;border-radius: 10px;}
    .cta-section h2,.page-contact .contact-info-panel h2,.page-service .section-header h2{font-size: 24px;}
    .cta-btns{gap: 10px;}
    /* .page-about .features-grid .feature-item{display: grid;grid-template-columns: auto 1fr;gap: 5px 10px;align-items: start;} */
    .features-grid{padding: 20px 10px;border-radius: 10px;grid-template-columns: 1fr;}
    .feature-row-icon .icon{width: 40px;height: 40px;}
    .page-contact .contact-grid{grid-template-columns: 1fr;gap: 10px;}
    .page-contact .detail-text p,.page-service .section-header p.sub{font-size: 16px;}
    .page-contact .contact-details-list,.page-contact .contact-info-panel{gap: 10px;}
    .page-contact .contact-info-panel{padding-bottom: 10px;min-height: auto;}
    .page-contact .form-row-twin{grid-template-columns: 1fr;gap: 10px;}
    .page-contact .form-row-twin,.page-contact .form-group,.page-service .section-header{margin-bottom: 10px;}
    .page-service .assurance-card,.page-service .tech-main-card ,.page-service .tech-side-card,.page-service .hub-dark-card{padding: 10px;border-radius: 10px;}
    .page-service .card-meta-title{flex-direction: row;}
    .page-service .assurance-card .detail-item{margin-bottom: 0px;}
    .page-service .check-list{margin-top:0px;}
    .page-service .card-meta-title .icon{width: 34px;height: 34px;}
    .page-service .tech-main-card .card-img{height:auto;}
    .page-service .tech-main-card{gap: 10px;}
    .page-service .tech-main-card h4,.page-service .tech-side-card h4{font-size: 22px;}
    .page-service .tech-side-stack .tech-side-card:nth-child(1){flex-direction: column;}
    .page-service .tech-side-stack .tech-side-card .card-img{width: 100%;height: 200px;}
    .page-service .tech-side-stack .tech-side-card .card-img img{width: 100%;height: 100%;border-radius: 10px;}
    .page-service .tech-main-card p,.page-service .tech-side-card p,.page-service .think-tank-bar{font-size: 16px;}
    .page-service .parts-left-box{border-radius: 10px;padding: 10px}
    .page-service .parts-features-mini{display: grid;grid-template-columns: repeat(3,1fr);gap: 10px;}
    .page-service .parts-left-box h4{font-size: 20px;}
    .page-service .parts-right-stack{border-radius: 10px;padding: 10px;}
    .page-service .hub-dark-card h3{font-size:24px;}
    .footer-grid{grid-template-columns: 1fr;gap: 10px;}
    .footer-info .footer-social{
        padding-left: 0;
    }
    footer{padding: 30px 10px;}
    .page-news .news-row-item, .page-news a.news-row-item{grid-template-columns:1fr;padding: 10px;}
    .page-classification .product-class-card{padding: 10px;}
    .page-classification .class-meta-top h3{font-size: 24px;}
    .page-classification .class-meta-top p.desc{font-size: 16px;}
    .page-classification .hot-title{font-size: 20px;}
    .page-classification .hot-grid{display: grid;grid-template-columns: repeat(2,1fr);gap: 10px;}
    .page-classification .hot-item{border-radius: 10px;}
    .page-classification .hot-item .mini-img{border-radius: 10px 10px 0 0;}
    
    .page-products .card-img-wrapper,.page-products-details .card-img-placeholder{aspect-ratio: 4 / 3;height: auto;}
    .page-products .pagination-container,
    .page-cases .pagination-container,
    .page-news .pagination-container{flex-direction:row;}
    .page-products .filter-sidebar{order:1;}
    .page-products-details .main-layout .container{padding: 0;}
    .page-products-details .grid-table-row{flex-direction: row;}
    .page-products .product-card{padding:8px;}
}
@media (max-width: 480px) {
    .page-home .hero-center-content h1{ font-size: 24px; }
    .page-home .hero-banner{ height: 360px; }
    .page-home .about-stats-row{ grid-template-columns: repeat(2, 1fr); }
    .page-home .cat-menu-node{ padding: 12px 16px; font-size: 12px; }
    .page-home .panel-desc-side h3{ font-size: 18px; }
    .page-about .excellence-counter-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .page-about .gallery-grid{
        grid-template-columns: 1fr; /* 图片画廊变为完全单列 */
    }
    .page-about .gallery-item:nth-child(1){
        grid-column: span 1;
    }
    .page-about .footer-bottom{
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .page-classification .hot-grid{ justify-content: center; }
    .page-products-details .related-products-grid{ grid-template-columns: 1fr; }
    .page-products-details .quote-actions-row{ flex-direction: column; gap: 10px; }
    .page-products-details .quote-actions-row .btn-gold-sm{ width: 100%; justify-content: center; }
    .page-products-details .main-slider-wrapper{
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .page-products-details .essential-info h1{ font-size: 22px; }
    .page-products-details .technical-spec-label{ width: 100%; }
    .page-products-details .breadcrumb-links{ font-size: 12px; }
    .page-products-details .tabs-nav-strip{ gap: 16px; }
    .page-products-details .tab-nav-item{ font-size: 14px; }
    .page-service .assurance-grid{ grid-template-columns: 1fr; }
    .page-service .parts-features-mini{ flex-direction: column; gap: 10px; }
}