/* ===== 左侧 Swiper 图文轮播 ===== */
        .swiper-wrap {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            /* flex 收缩允许 */;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
            /* 由父容器 flex 撑满 */
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        .swiper-slide {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            background-color: #eef2f6;
        }
        .swiper-slide .slide-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s;
        }
        .swiper-slide:hover .slide-img {
            transform: scale(1.03);
        }
        .swiper-slide .slide-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.2rem 1rem 0.8rem;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.70) 0%, transparent 100%);
            color: #fff;
            pointer-events: none;
        }
        .swiper-slide .slide-overlay h5 {
            font-size: 1.2rem;
            font-weight: 600;
            margin: 0 0 0.2rem;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .swiper-slide .slide-overlay .slide-desc {
            font-size: 0.85rem;
            opacity: 0.85;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Swiper 分页器 & 导航 (自定义样式) */
        .swiper-pagination {
            bottom: 10px !important;
        }
        .swiper-pagination-bullet {
            background: rgba(255, 255, 255, 0.6);
            opacity: 1;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin: 0 4px;
        }
        .swiper-pagination-bullet-active {
            background: #ffffff;
            width: 20px;
            border-radius: 4px;
        }

        .swiper-button-next,
        .swiper-button-prev {
            color: rgba(255, 255, 255, 0.7);
            background: rgba(0, 0, 0, 0.25);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            backdrop-filter: blur(4px);
            transition: all 0.2s;
        }
        .swiper-button-next:hover,
        .swiper-button-prev:hover {
            color: #fff;
            background: rgba(0, 0, 0, 0.45);
        }
        .swiper-button-next::after,
        .swiper-button-prev::after {
            font-size: 14px;
            font-weight: 700;
        }

        /* ===== 左侧图文区：上方大轮播 + 下方两个小轮播（各占一半宽度） ===== */
        .news-media-col {
            display: flex;
            flex-direction: column;
            /* 大轮播与下方小轮播行的 16px 净距改由 gap 提供：
               原先写在 .news-sub-row 上的 margin-top 会被首页统一的
               「.row { margin: 0 }」清零（.row 那条特异度更高），
               所以这里必须用 gap，不能再用行元素自己的外边距。 */
            gap: 1rem;
            height: 100%;
            min-height: 0;
        }
        /* 三个轮播「高度保持一致」：大轮播与整个小轮播行各占可用高度的一半，
           下方两个小轮播再各自撑满该行高度，于是三者高度相等。 */
        .news-media-col .news-swiper {
            flex: 1 1 0;
            min-height: 160px;
        }
        .news-sub-row {
            flex: 1 1 0;
            min-height: 160px;
        }
        /* 让小轮播所在列成为 flex 容器，小轮播即可撑满该行高度 */
        .news-sub-row > [class*='col-'] {
            display: flex;
        }
        .news-sub-swiper {
            width: 100%;
            height: 100%;
        }
        .news-sub-swiper .swiper-container {
            height: 100%;
        }
        .news-sub-swiper .swiper-slide .slide-overlay {
            padding: 0.6rem 0.6rem 1.3rem;
        }
        .news-sub-swiper .swiper-slide .slide-overlay h5 {
            font-size: 0.8rem;
            margin: 0;
            line-height: 1.35;
        }
        /* 小轮播空间有限：隐藏箭头，仅保留分页点 */
        .news-sub-swiper .swiper-button-next,
        .news-sub-swiper .swiper-button-prev {
            display: none;
        }
        .news-sub-swiper .swiper-pagination {
            bottom: 4px !important;
        }

        /* ===== 中间资讯列表：铺满容器高度 ===== */
        @media (min-width: 768px) {
            /* 资讯列改为 flex 列，列表即可撑满整列高度 */
            .news-col {
                display: flex;
                flex-direction: column;
            }
            /* 每个条目等分剩余高度，列表始终铺满容器；
               用 flex-basis:auto + 不允许收缩，保证加了标题条后条目也不会被压扁 */
            .news-col .news-list li {
                flex: 1 0 auto;
            }
        }

        @media (max-width: 767.98px) {
            .news-media-col {
                height: auto;
            }
            /* 移动端同样保持三个轮播等高 */
            .news-media-col .news-swiper {
                flex: 0 0 auto;
                height: 180px;
                min-height: 0;
            }
            .news-sub-row {
                flex: 0 0 auto;
                min-height: 0;
            }
            .news-sub-swiper {
                height: 180px;
            }
        }
        /* ===== 中间 资讯列表 ===== */
        .news-list-wrap {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        /* 资讯列整体做成一张卡片：标题条 + 列表 + 底部「查看全部资讯」
           （标题条 .db-head 沿用「设备品类 / 工程招标」那套金色渐变样式） */
        .news-col .news-list-wrap {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }
        .news-col .news-list-wrap .db-head {
            flex: 0 0 auto;
        }
        .news-col .news-list-wrap .news-list {
            box-shadow: none;
            border-radius: 0;
            /* 只留上下内边距：左右不留，否则条目变窄会让标题被省略号截断 */
            padding: 0.6rem 0;
        }
        /* 右侧竖排广告位：整列固定 708px（= 设计稿「行业资讯」面板高度，
           6 条广告平分）。资讯列本身没这么高，会被这一列撑到同高，两列齐平。
           间距规范：条目间 16px（L2 卡片级）；内嵌 .row 的负左右边距清零、
           列内边距清零，让广告与同行其他卡片左右对齐、列间距恒为 16px。 */
        .news-ad-col > .ad-row-under-search {
            height: 708px;
            display: flex;
            flex-direction: column;
            row-gap: 1rem;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
        }
        .news-ad-col > .ad-row-under-search > [class*='col-'] {
            flex: 1 1 0;
            min-height: 0;
            margin-top: 0; /* 覆盖 g-3 给每个 col 加的行间距 */
            padding-left: 0;
            padding-right: 0;
            display: flex;
        }
        .news-ad-col .ad-placeholder {
            flex: 1;
            width: 100%;
            min-height: 0;
        }
        .news-list {
            flex: 1;
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .news-list li {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.45rem 0.6rem;
            border-radius: 6px;
            background: #f8fafc;
            transition: background 0.15s;
            cursor: default;
            flex-shrink: 0;
        }
        .news-list li:hover {
            background: #f1f5f9;
        }
        .news-list li .news-cat {
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.15rem 0.6rem;
            border-radius: 20px;
            color: #fff;
            white-space: nowrap;
            flex-shrink: 0;
            background: #3b82f6;
            letter-spacing: 0.3px;
        }
        .news-list li .news-cat.cat-orange {
            background: #f59e0b;
        }
        .news-list li .news-cat.cat-green {
            background: #10b981;
        }
        .news-list li .news-cat.cat-purple {
            background: #8b5cf6;
        }
        .news-list li .news-cat.cat-pink {
            background: #ec4899;
        }
        .news-list li .news-cat.cat-cyan {
            background: #06b6d4;
        }

        .news-list li .news-title {
            flex: 1;
            font-size: 1.2rem;
            font-weight: 500;
            color: #1e293b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .news-list li .news-title a {
            color: inherit;
            text-decoration: none;
            transition: color 0.15s;
        }
        .news-list li .news-title a:hover {
            color: #3b82f6;
        }
        /* 窄屏：标题允许折成两行（超过两行才省略），
           避免长标题在手机上被截得只剩几个字 */
        @media (max-width: 767.98px) {
            .news-col .news-list li .news-title {
                white-space: normal;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                line-height: 1.35;
            }
            .news-col .news-list li {
                align-items: flex-start;
            }
            .news-col .news-list li .news-cat {
                margin-top: 0.1rem;
            }
        }
        .news-list li .news-date {
            font-size: 0.7rem;
            color: #94a3b8;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* 列表底部 "更多" 按钮 */
        .news-more {
            margin-top: 0.5rem;
            text-align: center;
            border-top: 1px solid #eef2f6;
            padding-top: 0.5rem;
        }
        .news-more a {
            font-size: 0.8rem;
            color: #3b82f6;
            text-decoration: none;
            font-weight: 500;
        }
        .news-more a:hover {
            text-decoration: underline;
        }
/* ----- ------------------------------------------------------------------------------------------------------------- ----- */	
		
/* ----- 标题样式（金色渐变） ----- */
    .section-header {
        display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 1.6rem;
		height: 4.8rem;
		font-size: 1.6rem;
		line-height: 1.6rem;
		/* 金色渐变标题条：与 .db-head（设备品类/工程招标/行业资讯）取同一套配色，
		   色值按设计稿实测（90deg 左→右 #f5b62f → #f6d089） */
		background: linear-gradient(90deg, #f5b62f, #f6d089);
		color: #fff;
		border-radius: 8px 8px 0 0; /* 与 .db-head 一致，全站卡片圆角 8px */
		/* 标题条属于本模块，不是独立一块：与内容的净距收到 8px（L3 卡片内部级），
		   与「模块之间 24px」拉开 3 倍差，一眼能看出「标题管的是下面的内容」。
		   原来也是 16px，和 24px 只差 1.5 倍，看着就是「相似但不相同」的毛刺。 */
		margin-bottom: 0.5rem;
    }
    .section-header h5 {
        font-size: 1.6rem;
        line-height: 1.6rem;
        margin: 0;
        font-weight: 600;
        color:#834a15;
    }
    .section-header .more-link {
        color: #926738; /* 与 .db-head-more 一致 */
        font-size: 1.2rem;
        text-decoration: none;
        transition: color 0.2s;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .section-header .more-link:hover {
        color: #6f4a1d;
    }

    /* ----- 图文推荐卡片（带图片） ----- */
    .rec-card {
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        transition: transform 0.2s, box-shadow 0.2s;
        margin-bottom: 0.5rem;
    }
    .rec-card:hover {
        transform: translateY(0px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    }
    .rec-card .rec-img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        display: block;
    }
    .rec-card .rec-title {
        padding: 8px 10px;
        font-size: 1.1rem;
        font-weight: 500;
        color: #333;
        text-align: center;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: #fafafa;
        border-top: 1px solid #f0f0f0;
    }

    /* ----- 最新动态列表（无日期，首条突出） ----- */
    .news-list-wrap .news-list {
        list-style: none;
        padding: 0;
        margin: 0;
        
        border-radius: 0 0 8px 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        overflow: hidden;
    }
    .news-list-wrap .news-list li {
        border-bottom: 1px solid #f0f2f5;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background 0.15s;
    }
    .news-list-wrap .news-list li:last-child {
        border-bottom: none;
    }
    .news-list-wrap .news-list li:hover {
        background: #f8faff;
    }
	 /* 普通条目 */
    .mynews .news-list-wrap .news-list li .news-cat {
        font-size: 0.8rem;
		padding: 0.15rem 0.6rem;
		border-radius: 20px;
		color: #fff;
		flex-shrink: 0;
    }
    .mynews .news-list-wrap .news-list li .news-title {
        flex: 1;
        font-size: 1.2rem;
        line-height: 1.6;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mynews .news-list-wrap .news-list li .news-title a {
        color: #333;
        text-decoration: none;
        transition: color 0.2s;
    }
    .mynews .news-list-wrap .news-list li .news-title a:hover {
        color: #007bff;
    }
    
	 /* 去掉日期 */
    .mynews .news-list-wrap .news-list li .news-date {
        display: none;
    }
	
   
    /* 首条（置顶）突出 */
    .top-news-item {
        background: #fff9e6 !important;
        border-left: 4px solid #f5af19 !important;
        padding: 14px 16px !important;
        margin-bottom: 2px;
    }
    .top-news-item .top-news-title {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: #222 !important;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
    }
    .top-news-item .top-news-title:hover {
        color: #0056b3 !important;
    }
    .top-news-item .top-badge {
        background: #f5af19;
        color: #fff;
        font-size: 0.7rem;
        padding: 2px 10px;
        border-radius: 20px;
        flex-shrink: 0;
    }
    /* 列表底部“更多” */
    .news-more {
        text-align: right;
        padding: 10px 16px 6px 0;
        border-top: 1px solid #f0f2f5;
        background: #fff;
        border-radius: 0 0 8px 8px;
    }
    .news-more a {
        color: #007bff;
        text-decoration: none;
        font-size: 0.9rem;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
    .news-more a:hover {
        text-decoration: underline;
    }

    /* ----- 推荐分类列表（放大行高和字体） ----- */
    .category-list {
        list-style: none;
        padding: 0;
        margin: 0;
        background: #fff2dd;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        overflow: hidden;
    }
    .category-list li {
        border-bottom: 1px solid #f0f2f5;
    }
    .category-list li:last-child {
        border-bottom: none;
    }
    .category-list li a {
        display: flex;
        align-items: center;
        padding: 20px 20px;   /* 增加高度 */
        font-size: 1.4rem;    /* 放大字体 */
        color: #333;
        text-decoration: none;
        transition: background 0.2s, color 0.2s;
        line-height: 1.5;
    }
    .category-list li a:hover {
        background: #f7f9fc;
        color: #834a15;
    }
    .category-list li a i {
        width: 32px;
        font-size: 1.2rem;
        color: #834a15;
        margin-right: 14px;
        text-align: center;
        transition: color 0.2s;
    }
    .category-list li a:hover i {
        color: #834a15;
    }
    .category-list li a .cat-name {
        flex: 1;
        font-weight: 500;
        font-size: 1.1rem;
    }
    .category-list li a .cat-count {
        background: #e9ecef;
        padding: 4px 14px;
        border-radius: 30px;
        font-size: 0.9rem;
        color: #495057;
        transition: background 0.2s, color 0.2s;
    }
    .category-list li a:hover .cat-count {
        background: #834a15;
        color: #fff;
    }
	/* ----- ------------------------------------------------------------------------------------------------------------- ----- */	
	
	/* ---------- 设备品类（两行 × 每行三格，格内可叠多个一级品类） ---------- */
    /* 甲方反馈：一品类一圆角卡片时，二级品类条数不一导致卡片高低不齐、留白过多。
       改为白色面板内的扁平分组：一行三格等宽，格内多个品类自上而下排，
       格与格用竖线分栏、两行之间用横线分段（对应设计稿上标注的红线）。 */
    #deviceCatRow {
        padding: 8px 0 12px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    .dc-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .dc-group + .dc-group {
        border-top: 1px solid #f0f2f5;
    }
    .dc-cell {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 16px;
    }
    /* 宽屏才分栏：竖线落在 1/3、2/3 处，首尾格留白与金色标题条的 1.6rem 对齐 */
    @media (min-width: 992px) {
        .dc-cell {
            padding: 16px 28px;
        }
        .dc-cell + .dc-cell {
            border-left: 1px solid #f0f2f5;
        }
        .dc-cell:first-child {
            padding-left: 1.6rem;
        }
        .dc-cell:last-child {
            padding-right: 1.6rem;
        }
    }
    /* 中屏两格 / 小屏单格：去掉竖线，避免换行后线条错位 */
    @media (max-width: 991.98px) {
        .dc-group {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 575.98px) {
        .dc-group {
            grid-template-columns: minmax(0, 1fr);
        }
    }
    .dc-card {
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }
    /* 品类与品类之间的间距 = 同一品类内两行的间距：行盒高一致，
       所以这里只补 .dc-links 那份 row-gap（2px），不要再额外留 margin。 */
    .dc-card + .dc-card {
        margin-top: 2px;
    }
    /* 左列高度收为 0：图标（44px）比一行行盒（26.6px）高，
       留在流内会把「带图标那一格」的品类间距撑大（实测比别处多 21px）。
       列宽 84px 仍然占位，缩进不变。 */
    .dc-card .dc-left {
        position: relative;
        height: 0;
        margin-top: 4px;
        flex: 0 0 84px;
    }
    .dc-card .dc-icon {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #e8a33d;
        background: linear-gradient(135deg, #fff7e8, #ffeccd);
    }
    /* 图标用分类图时（本项目真实数据来自后台 imgurl）—— 去掉金色底块 */
    .dc-card .dc-icon--img {
        background: none;
    }
    /* 每格只出一个图标：其余品类左列留空白占位（列宽 84px 不变，缩进照旧），
       高度收为 0，避免空列把行高撑开 */
    .dc-card .dc-icon--blank {
        height: 0;
        background: none;
    }
    .dc-card .dc-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }
    .dc-card .dc-title {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
        color: #1a2332;
        text-align: center;
        transition: color 0.2s ease;
    }
    /* 标题移到右侧列表第一项：与二级链接同一行，行高取一致值 */
    .dc-card .dc-title--inline {
        white-space: nowrap;
        line-height: 1.9;
    }
    .dc-card .dc-links {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 2px 18px;
        font-size: 18px;
        line-height: 1.9;
        color: #8c9aa8;
    }
    .dc-card .dc-links a {
        color: #3d4852;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s ease;
    }
    .dc-card .dc-links a:hover,
    .dc-card:hover .dc-title {
        color: #e67e22;
    }

    /* ---------- 分类标签（已注释停用） ----------
       需求：热门机型默认只展示「全部」标签下的内容，不再需要这排 tab，
       所以 index.html 里的 #categoryTabs 元素和对应 JS 都已注释。
       样式一并注释保留，恢复分类筛选时把这段放开即可。
    .category-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        margin: 18px 0 24px 0;
        padding-bottom: 6px;
        border-bottom: 2px solid #f0f2f5;
    }
    .category-tabs .tab-btn {
        flex: 0 0 auto;
        padding: 6px 20px;
        font-size: 0.95rem;
        font-weight: 500;
        color: #6c7a8a;
        background: transparent;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
        letter-spacing: 0.3px;
    }
    .category-tabs .tab-btn::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 60%;
        height: 3px;
        background: #e67e22;
        border-radius: 4px;
        transition: transform 0.3s ease;
    }
    .category-tabs .tab-btn:hover {
        color: #2c3e50;
        background: rgba(230, 126, 34, 0.06);
    }
    .category-tabs .tab-btn.active {
        color: #e67e22;
        background: rgba(230, 126, 34, 0.10);
        font-weight: 600;
    }
    .category-tabs .tab-btn.active::after {
        transform: translateX(-50%) scaleX(1);
    }
    ---------- 分类标签（已注释停用） ---------- */

    /* ---------- 机型卡片 ---------- */
    .product-grid .product-card {
        background: #ffffff;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid #f0f2f5;
    }
    .product-grid .product-card:hover {
        transform: translateY(0px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
        border-color: #e67e22;
    }
    .product-grid .product-card .card-img-wrap {
        position: relative;
        padding-top: 68%;
        /* 宽高比 ~ 1:0.68 */
        overflow: hidden;
        background: #fafbfc;
    }
    .product-grid .product-card .card-img-wrap img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 完整展示整机（不裁切） */
        object-fit: contain;
        padding: 8px;
        transition: transform 0.4s ease;
    }
    .product-grid .product-card:hover .card-img-wrap img {
        transform: scale(1.04);
    }
    .product-grid .product-card .card-body {
        padding: 12px 14px 14px 14px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .product-grid .product-card .card-body .prod-name {
        font-size: 1.1875rem; /* 甲方要求机型名放大到 19px 左右 */
        font-weight: 600;
        color: #1a2634;
        margin-bottom: 6px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.6em;
    }
    .product-grid .product-card .card-body .prod-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
        flex-wrap: wrap;
        gap: 4px 8px;
    }
    .product-grid .product-card .card-body .prod-cat {
        font-size: 0.875rem; /* 品牌胶囊标跟着机型名一起放大 */
        font-weight: 500;
        color: #ffffff;
        background: linear-gradient(135deg, #f5af19, #f7c04a);
        padding: 2px 12px;
        border-radius: 30px;
        display: inline-block;
        letter-spacing: 0.2px;
    }
    .product-grid .product-card .card-body .prod-views {
        font-size: 0.82rem;
        color: #8e9aab;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .product-grid .product-card .card-body .prod-views i {
        font-size: 0.75rem;
        color: #b0bccd;
    }

    /* ---------- 空状态 & 过渡 ---------- */
    .product-grid .product-list-wrap {
        min-height: 320px;
        transition: opacity 0.25s ease;
    }
    .product-grid .product-list-wrap.fade-transition {
        opacity: 0.5;
    }

    /* ---------- 响应式微调 ---------- */
    @media (max-width: 576px) {
        /* 分类标签已注释停用，这里对应的小屏样式一并注释
        .category-tabs {
            gap: 6px 8px;
            flex-wrap: nowrap;
            overflow-x: auto;
            padding-bottom: 8px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .category-tabs::-webkit-scrollbar {
            display: none;
        }
        .category-tabs .tab-btn {
            flex: 0 0 auto;
            padding: 4px 16px;
            font-size: 0.85rem;
            white-space: nowrap;
        }
        */
        .product-grid .product-card .card-body .prod-name {
            font-size: 0.92rem;
        }
        .product-grid .product-card .card-body {
            padding: 10px 12px 12px 12px;
        }
        .dc-card {
            gap: 10px;
        }
        .dc-card .dc-left {
            flex: 0 0 58px;
        }
        .dc-card .dc-icon {
            width: 38px;
            height: 38px;
            font-size: 17px;
        }
        /* 空白图标占位同样只占宽度（写在 .dc-icon 之后，避免被上面的 height 覆盖） */
        .dc-card .dc-icon--blank {
            height: 0;
        }
        .dc-card .dc-title {
            font-size: 12px;
        }
        .dc-card .dc-links {
            font-size: 11.5px;
            line-height: 1.9;
        }
    }
    /* 分类标签已注释停用，该断点下只有 tab 样式，整段一并注释
    @media (min-width: 577px) and (max-width: 768px) {
        .category-tabs .tab-btn {
            padding: 5px 18px;
            font-size: 0.90rem;
        }
    }
    */
	/* ----- ------------------------------------------------------------------------------------------------------------- ----- */	


	/* ===== 热门品牌 - 滚动样式 ===== */
	.brand-scroll-wrapper {
		margin: 0px;
		overflow: hidden;
		border-radius: 12px;
		background: #f8fafc;
		padding: 0px;
		box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
	}

	.brand-scroll-row {
		overflow: hidden;
		padding: 8px 0;
		position: relative;
		/* 接口数据到达前占位，避免板块高度塌陷（对齐桌面卡片高度 112px） */
		min-height: 112px;
	}

	/* 行间净距 = 上排 padding-bottom 8 + 虚线 1 + 本排 padding-top 7 = 16px（L2 卡片级）。
	   原来的 6 / margin 4 / padding-top 10 组合算出 21px，且让首行比其他两行矮 5px。 */
	.brand-scroll-row + .brand-scroll-row {
		border-top: 1px dashed rgba(0, 0, 0, 0.06);
		margin-top: 0;
		padding-top: 7px;
	}

	/* 轨道 - 使用 flex 让所有品牌在一行 */
	.brand-scroll-track {
		display: flex;
		flex-wrap: nowrap;
		gap: 16px; /* L2 卡片级，与全页网格一致（原 18px） */
		width: max-content;
		will-change: transform;
	}

	/* 品牌卡片 */
	.brand-item {
		flex: 0 0 auto;
		width: 200px;
		height: 112px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-weight: 700;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
		transition: transform 0.25s ease, box-shadow 0.25s ease;
		cursor: default;
		position: relative;
		user-select: none;
	}

	.brand-item:hover {
		transform: translateY(-4px) scale(1.02);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	}

	.brand-item .brand-short {
		font-size: 34px;
		letter-spacing: 1px;
		line-height: 1.2;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	}

	.brand-item .brand-name {
		font-size: 19px;
		font-weight: 500;
		opacity: 0.90;
		margin-top: 2px;
		letter-spacing: 0.5px;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	}

	/* ===== 滚动动画 ===== */

	/* 左 → 右 */
	@keyframes scrollLeftToRight {
		0% {
			transform: translateX(-50%);
		}
		100% {
			transform: translateX(0);
		}
	}

	/* 右 → 左 */
	@keyframes scrollRightToLeft {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-50%);
		}
	}

	/* 应用动画 - 不同行不同速度，更自然 */
	.brand-scroll-row[data-direction="left-to-right"] .brand-scroll-track {
		animation: scrollLeftToRight 28s linear infinite;
	}

	.brand-scroll-row[data-direction="right-to-left"] .brand-scroll-track {
		animation: scrollRightToLeft 32s linear infinite;
	}

	/* 鼠标悬停暂停 */
	.brand-scroll-row:hover .brand-scroll-track {
		animation-play-state: paused;
	}

	/* ===== 响应式适配 ===== */
	@media (max-width: 768px) {
		.brand-item {
			width: 140px;
			height: 94px;
		}
		.brand-item .brand-short {
			font-size: 28px;
		}
		.brand-item .brand-name {
			font-size: 16px;
		}
		.brand-scroll-track {
			gap: 12px;
		}
		.brand-scroll-wrapper {
			padding: 8px 0;
		}
		.brand-scroll-row {
			padding: 4px 0;
			min-height: 94px;
		}
	}

	@media (max-width: 480px) {
		.brand-item {
			width: 116px;
			height: 80px;
			border-radius: 8px;
		}
		.brand-scroll-row {
			min-height: 80px;
		}
		.brand-item .brand-short {
			font-size: 24px;
		}
		.brand-item .brand-name {
			font-size: 14px;
			margin-top: 1px;
		}
		.brand-scroll-track {
			gap: 10px;
		}
	}
	
	
	
	/* ----- ------------------------------------------------------------------------------------------------------------- ----- */	
	
	/* ===== 热门话题（左：推荐大图轮播 / 右：话题列表） ===== */
	.topic-panel {
		display: flex;
		gap: 16px;
		align-items: stretch;
	}

	.topic-panel-left {
		flex: 0 0 calc(50% - 8px);
		max-width: calc(50% - 8px);
		position: relative;
		min-height: 320px;
	}

	.topic-panel-left .hot-topic-swiper {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: auto;
		margin: 0;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	}

	.topic-slide-card {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 10px;
		overflow: hidden;
	}

	.topic-slide-card img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.topic-slide-overlay {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 36px 16px 14px;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
		color: #fff;
	}

	.topic-slide-overlay .topic-slide-tag {
		display: inline-block;
		background: rgba(0, 0, 0, 0.5);
		padding: 2px 10px;
		border-radius: 12px;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.5;
		margin-bottom: 6px;
	}

	.topic-slide-overlay h6 {
		font-size: 19px; /* 推荐话题大图的标题与其它两处字号对齐 */
		font-weight: 700;
		line-height: 1.3;
		margin: 2px 0 3px;
		color: #fff;
	}

	.topic-slide-overlay p {
		font-size: 14px;
		line-height: 1.5;
		opacity: 0.88;
		margin: 0;
		color: #eee;
	}

	/* 轮播左右箭头：白色圆形按钮 */
	.hot-topic-swiper .swiper-button-next,
	.hot-topic-swiper .swiper-button-prev {
		width: 30px;
		height: 30px;
		margin-top: -15px;
		border-radius: 50%;
		color: #2b3440;
		background: rgba(255, 255, 255, 0.92);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
		transition: background 0.3s;
	}

	.hot-topic-swiper .swiper-button-next:hover,
	.hot-topic-swiper .swiper-button-prev:hover {
		background: #fff;
	}

	.hot-topic-swiper .swiper-button-next::after,
	.hot-topic-swiper .swiper-button-prev::after {
		font-size: 12px;
		font-weight: 700;
	}

	.hot-topic-swiper .swiper-pagination-bullet {
		background: #fff;
		opacity: 0.55;
	}

	.hot-topic-swiper .swiper-pagination-bullet-active {
		background: #fff;
		opacity: 1;
	}

	/* ---- 话题列表（2 列网格）---- */
	.topic-grid {
		flex: 1 1 auto;
		min-width: 0;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem; /* L2 卡片级：卡片网格统一 16px */
		align-content: start;
	}

	.topic-card {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 56px;
		padding: 8px 12px;
		background: #fff;
		border: 1px solid #f0f2f5;
		border-radius: 10px;
		box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
		transition: box-shadow 0.25s ease, border-color 0.25s ease;
	}

	.topic-card:hover {
		border-color: #ffe2b0;
		box-shadow: 0 4px 14px rgba(245, 175, 25, 0.18);
	}

	.topic-card .topic-icon {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.topic-card .topic-info {
		flex: 1;
		min-width: 0;
	}

	.topic-card .topic-name {
		font-size: 19px; /* 甲方要求话题名放大到 19px 左右 */
		font-weight: 600;
		line-height: 1.4;
		color: #1a2332;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.topic-card .topic-meta {
		font-size: 13px; /* 热度行随话题名一起放大 */
		line-height: 1.5;
		color: #98a4b3;
		display: flex;
		align-items: center;
		gap: 8px;
		white-space: nowrap;
	}

	.topic-card .topic-hot {
		font-size: 13px;
		letter-spacing: 0;
	}

	/* ===== 热门圈子（横向卡片列表） ===== */
	.circle-grid {
		position: relative; /* 右侧蒙版的定位父级 */
	}

	.circle-scroll {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		/* 滚动条已隐藏，不再留 8px 轨道位——那 8px 会让本模块的下边缘比盒子上缩 8px，
		   看着比别的模块松 */
		padding-bottom: 0;
		scroll-behavior: smooth;
		cursor: grab;
		/* 隐藏滚动条：Firefox / IE-旧Edge / Chrome-Safari */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.circle-scroll::-webkit-scrollbar {
		display: none;
	}

	/* 拖拽中：关掉平滑滚动（否则 scrollLeft 会跟着动画延迟），并禁掉选中文字 */
	.circle-scroll.is-dragging {
		scroll-behavior: auto;
		cursor: grabbing;
		-webkit-user-select: none;
		user-select: none;
	}

	/* 右侧「还能往右拖」蒙版：整条压深的渐变 + 竖排文字浮在蒙版之上，纯提示不拦鼠标事件 */
	.circle-mask {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0; /* 拉满整列高度，蒙版面积更大 */
		width: 140px;
		display: flex;
		flex-direction: column; /* 竖排文字在上、箭头在下，整体居中 */
		align-items: center;
		justify-content: center;
		gap: 12px;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.25s ease;
	}

	/* 渐变单独占一层，文字压在它上面，不会被蒙版本身冲淡 */
	.circle-mask::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			90deg,
			rgba(245, 247, 250, 0) 0%,
			rgba(245, 247, 250, 0.92) 55%,
			#f5f7fa 100%
		);
	}

	.circle-mask-text {
		position: relative;
		z-index: 1;
		/* 竖排：自上而下读「拖动查看」，汉字保持正立 */
		writing-mode: vertical-rl;
		text-orientation: upright;
		letter-spacing: 6px;
		font-size: 18px;
		font-weight: 700;
		color: #a35a05; /* 深主橙：对白卡 5.2:1 */
		white-space: nowrap;
	}

	.circle-mask i {
		position: relative;
		z-index: 1;
		font-size: 18px;
		color: #a35a05;
	}

	/* 文字和箭头一起左右点动，强化「还能往右拖」的暗示 */
	.circle-mask > * {
		animation: circle-mask-nudge 1.6s ease-in-out infinite;
	}

	@keyframes circle-mask-nudge {
		0%,
		100% {
			transform: translateX(0);
		}
		50% {
			transform: translateX(4px);
		}
	}

	/* 窄屏：卡片本身只有 ~190px，蒙版相应收窄、字号降一档 */
	@media (max-width: 575.98px) {
		.circle-mask {
			width: 96px;
		}
		.circle-mask-text {
			font-size: 15px;
			letter-spacing: 4px;
		}
		.circle-mask i {
			font-size: 15px;
		}
	}

	.circle-grid.circle-mask--show .circle-mask {
		opacity: 1;
	}

	.circle-scroll .circle-item {
		flex: 0 0 calc((100% - 48px) / 4);
		max-width: calc((100% - 48px) / 4);
	}

	.circle-card {
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 1px 5px rgba(15, 23, 42, 0.07);
		transition: transform 0.25s ease, box-shadow 0.25s ease;
		height: 100%;
	}

	.circle-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 22px rgba(15, 23, 42, 0.13);
	}

	.circle-card .circle-cover {
		position: relative;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: #f0f4f8;
	}

	.circle-card .circle-cover img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.circle-card .circle-info {
		padding: 10px 14px 14px;
	}

	.circle-card .circle-name {
		font-size: 19px; /* 甲方要求圈子名放大到 19px 左右 */
		font-weight: 600;
		color: #1a2332;
		margin-bottom: 5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.circle-card .circle-stats {
		font-size: 14px; /* 随圈子名一起放大，保持比例 */
		line-height: 1.5;
		color: #98a4b3;
		display: flex;
		gap: 14px;
	}

	.circle-card .circle-stats i {
		margin-right: 3px;
		color: #c2ccd8;
	}

	.circle-card .circle-hot {
		font-size: 14px;
		line-height: 1.5;
		margin-top: 4px;
	}

	/* ---- 响应式微调 ---- */
	@media (max-width: 991.98px) {
		.circle-scroll .circle-item {
			flex: 0 0 calc((100% - 32px) / 3);
			max-width: calc((100% - 32px) / 3);
		}
	}

	@media (max-width: 767.98px) {
		.topic-panel {
			flex-direction: column;
		}

		.topic-panel-left {
			flex: none;
			width: 100%;
			max-width: 100%;
			aspect-ratio: 16 / 9;
			min-height: 0;
		}

		.topic-slide-overlay h6 {
			font-size: 15px;
		}

		.circle-scroll {
			gap: 12px;
		}

		.circle-scroll .circle-item {
			flex: 0 0 calc((100% - 12px) / 2);
			max-width: calc((100% - 12px) / 2);
		}
	}

	@media (max-width: 575.98px) {
		.topic-card {
			gap: 8px;
			min-height: 52px;
			padding: 7px 10px;
		}

		.topic-card .topic-icon {
			width: 22px;
			height: 22px;
		}

		.topic-card .topic-name {
			font-size: 12px;
		}

		.circle-card .circle-name {
			font-size: 13px;
		}
	}

	/* ===== 热门品牌 - /api/wx/unified 接口品牌 Logo 卡片（新增） ===== */
	.brand-scroll-track .brand-item.has-logo {
		background: #ffffff;
		color: #1f2937;
		border: 1px solid #edf0f3;
		box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
		gap: 4px;
		padding: 8px 12px;
	}

	.brand-scroll-track .brand-item.has-logo:hover {
		box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
	}

	.brand-item .brand-logo-img {
		height: 62px;
		max-width: 150px;
		object-fit: contain;
		display: block;
	}

	.brand-item.has-logo .brand-name {
		color: #4b5563;
		opacity: 1;
		text-shadow: none;
		margin-top: 0;
	}

	@media (max-width: 768px) {
		.brand-item .brand-logo-img {
			height: 48px;
			max-width: 118px;
		}
	}

	@media (max-width: 480px) {
		.brand-item .brand-logo-img {
			height: 40px;
			max-width: 96px;
		}
	}
        /* ===== 广告板块4：一行三个小盒子，盒内三图轮播 ===== */
        .ad-mini-swiper {
            width: 100%;
            height: 140px;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            background: #eef2f6;
        }
        .ad-mini-swiper .swiper-slide {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            background-color: #eef2f6;
        }
        /* 广告内容槽：图片层，会被站点广告脚本 renderBoxSlot() 重写 */
        .ad-mini-swiper .ad-slide-slot {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }
        .ad-mini-swiper .ad-slide-slot .ad-img-link {
            display: block;
            width: 100%;
            height: 100%;
        }
        .ad-mini-swiper .ad-slide-slot .ad-img,
        .ad-mini-swiper .ad-slide-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }
        .ad-mini-swiper .swiper-slide:hover .ad-img,
        .ad-mini-swiper .swiper-slide:hover .ad-slide-img {
            transform: scale(1.04);
        }
        /* 广告脚本注入的角标在轮播里隐藏（轮播自带 ad-label） */
        .ad-mini-swiper .ad-slide-slot .ad-label {
            display: none;
        }
        /* 文字遮罩层，置于图片之上 */
        .ad-mini-swiper .ad-slide-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 42px 0 40px;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 60%, transparent 100%);
            pointer-events: none;
        }
        .ad-mini-swiper .ad-slide-icon {
            flex: 0 0 auto;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #fff;
        }
        .ad-mini-swiper .ad-slide-text h5 {
            font-size: 1rem;
            font-weight: 700;
            margin: 0 0 2px;
            line-height: 1.3;
            color: #fff;
        }
        .ad-mini-swiper .ad-slide-text p {
            font-size: 0.75rem;
            margin: 0;
            opacity: 0.88;
            color: #fff;
        }
        .ad-mini-swiper .ad-label {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 10px;
            padding: 1px 9px;
            border-radius: 10px;
            font-weight: 500;
            line-height: 1.5;
        }
        /* 分页器（盒内三张图相同，圆点是判断轮播是否在动的关键） */
        .ad-mini-swiper .swiper-pagination {
            bottom: 6px !important;
        }
        .ad-mini-swiper .swiper-pagination-bullet {
            width: 6px;
            height: 6px;
            background: #fff;
            opacity: 0.5;
            margin: 0 3px !important;
        }
        .ad-mini-swiper .swiper-pagination-bullet-active {
            opacity: 1;
            background: #fff;
        }
        /* 导航箭头 */
        .ad-mini-swiper .swiper-button-next,
        .ad-mini-swiper .swiper-button-prev {
            width: 24px;
            height: 24px;
            margin-top: -12px;
            background: rgba(0, 0, 0, 0.35);
            border-radius: 50%;
            color: #fff;
            transition: background 0.25s;
        }
        .ad-mini-swiper .swiper-button-next:hover,
        .ad-mini-swiper .swiper-button-prev:hover {
            background: rgba(0, 0, 0, 0.6);
        }
        .ad-mini-swiper .swiper-button-next::after,
        .ad-mini-swiper .swiper-button-prev::after {
            font-size: 10px;
            font-weight: 700;
        }
        .ad-mini-swiper .swiper-button-next { right: 6px; }
        .ad-mini-swiper .swiper-button-prev { left: 6px; }

        @media (max-width: 991.98px) {
            .ad-mini-swiper {
                height: 130px;
            }
        }
        @media (max-width: 575.98px) {
            .ad-mini-swiper {
                height: 120px;
            }
            .ad-mini-swiper .ad-slide-icon {
                display: none;
            }
            .ad-mini-swiper .ad-slide-overlay {
                padding: 0 34px 0 14px;
            }
            .ad-mini-swiper .ad-slide-text h5 {
                font-size: 0.9rem;
            }
            .ad-mini-swiper .ad-slide-text p {
                font-size: 0.7rem;
            }
            .ad-mini-swiper .swiper-button-next,
            .ad-mini-swiper .swiper-button-prev {
                display: none;
            }
        }

/* ==========================================================================
   首页中部主栏：设备品类（悬停二级菜单）+ 工程招标 + 竖排广告位
   设计稿：D:\Desktop\微信图片_20261009120250_4_48.png
   交互参考：https://www.lmjx.net/ 首页 #side 元素
   ========================================================================== */

/* ---------- 区块容器 / 首页栅格排版 ---------- */
/* ==========================================================================
   首页间距统一规范（8pt 三级体系，全页通用）：
     L1 模块之间（section 纵向）：24px —— 相邻 margin 折叠后仍是 24px
     L2 网格卡片行/列间距        ：16px —— 由 .row 的 gap 提供
     L3 卡片内部 / 子模块        ：8px

   为什么把 .row 改成 flex + gap（上一版按规范调完仍「看着忽大忽小」的根因）：
   Bootstrap 的 gutter 不用 gap，而是「行 margin:-8px 负边距 + 列 padding:8px
   + 列 margin-top:16px 与行 margin-top:-16px 相抵」。上一版只把行的负上边距
   清零，列那份 margin-top:16px 就单独留在模块顶部 —— 实测带 g-3 的模块
   「内容上缩 16px、下缩 0」，于是盒盒间距恒为 24px，肉眼却 24 / 40 交替。
   现在行列间距一律由 gap 提供，行 margin 清零、列 padding/margin 清零，
   内容边缘与盒子边缘重合，视觉间距才等于标称间距。

   代价：列宽要自己扣掉 gap 份额。N 等分时每列少 (N-1)*16/N，
   故 2 列 -8px、3 列 -10.6667px、4 列 -12px（见下面按断点重算的宽度）。
   ========================================================================== */
body > section:not(.banner-section),
body > footer {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

body > section:not(.banner-section) .row,
body > footer .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
}

body > section:not(.banner-section) .row > [class*='col-'],
body > section:not(.banner-section) .row > .col,
body > footer .row > [class*='col-'],
body > footer .row > .col {
    margin-top: 0;
    padding: 0;
    min-width: 0;
}

/* 列宽 = Bootstrap 百分比 − 本行 gap 份额 */
.row > .col-6 {
    width: calc(50% - 0.5rem); /* 两等分 */
}
@media (min-width: 768px) {
    .row > .col-md-2 {
        width: calc(16.66666667% - 10.66666667px); /* 与 md-5/md-5 同行，三等分 */
    }
    .row > .col-md-3 {
        width: calc(25% - 0.75rem); /* 四等分 */
    }
    .row > .col-md-4 {
        width: calc(33.33333333% - 10.66666667px); /* 三等分 */
    }
    .row > .col-md-5 {
        width: calc(41.66666667% - 10.66666667px); /* 与 md-2/md-2 同行，三等分 */
    }
    .row > .col-md-6 {
        width: calc(50% - 0.5rem); /* 两等分 */
    }
}
@media (min-width: 992px) {
    /* 设备品类 / 工程招标 / 右侧广告列：lg 下三等分 */
    .row > .col-lg-2 {
        width: calc(16.66666667% - 10.66666667px);
    }
    .row > .col-lg-4 {
        width: calc(33.33333333% - 10.66666667px);
    }
    .row > .col-lg-6 {
        width: calc(50% - 10.66666667px);
    }
}

/* 成组的广告板块（3 盒 + 整行 1 盒挤在同一个 .row 里，如 block07 / block09）：
   整行那一排与上一行的净距抬到 24px，与模块之间的间距同一档，
   避免「组内两行」看着比「两个模块」挤。gap 已是 16px，这里补 8px。 */
body > section:not(.banner-section) .row.ad-row-under-search > .col-md-12 {
    margin-top: 0.5rem;
}

/* 左列抬高层级，保证悬停二级菜单盖住中间「工程招标」栏 */
.db-col-cats {
    position: relative;
    z-index: 20;
}

.db-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ---------- 面板标题（金色渐变，与 .section-header 同色系） ---------- */
.db-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.8rem;
    padding: 0 1.6rem;
    background: linear-gradient(90deg, #f5b62f, #f6d089);
    border-radius: 8px 8px 0 0;
}

.db-head-title {
    font-size: 1.6rem;
    font-weight: 600; /* 与 .section-header h5 一致（设计稿实测字重） */
    line-height: 1;
    color: #834a15;
}

/* 标题栏右侧「更多」：设计稿里只有文字，没有箭头图标（实测色 #926738） */
.db-head-more {
    display: inline-flex;
    align-items: center;
    font-size: 1.2rem;
    color: #926738;
    text-decoration: none;
    transition: color 0.2s;
}

.db-head-more:hover {
    color: #6f4a1d;
}

/* ==========================================================================
   一、设备品类列表
   ========================================================================== */
.db-cats {
    /* 浮层相对悬浮行「高出 / 低出」的距离（其余项仍与悬浮行纵向居中）：
       首项浮层顶部比该行高 --db-flyout-over-top、末项浮层底部比该行低 --db-flyout-over-bottom。
       脚本 placeFlyout 读取这两个值，改这里即可调。 */
    --db-flyout-over-top: 0px;
    --db-flyout-over-bottom: 70px;
    /* 浮层与「视口上下边缘」之间的最小距离（脚本读取，兼作浮层最大高度的限制），
       这是兜底保护：面板贴着视口边缘时，浮层不会被切掉或钻到粘性导航下面 */
    --db-flyout-edge: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative; /* 二级菜单的定位参照 */
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
    overflow: visible;
}

.db-cat-item {
    position: relative;
    z-index: 1; /* 普通条目在浮层(z-index:2)之下 */
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.9rem 1.6rem;
    background: #f9f9f9;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    transition: background 0.2s;
}

/* 悬停描边：用伪元素画「上/左/下」三条边，不影响布局（避免 1px 抖动）。
   右边框特意不画 —— 那一段留给右侧浮层的左边框接上来。 */
.db-cat-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #f0a020;
    border-right: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.db-cat-item:first-child {
    border-radius: 0;
}

.db-cat-item:last-child {
    border-bottom: 0;
    border-radius: 0 0 8px 8px;
}

/* 悬停高亮：白底 + z-index 抬到浮层之上，
   这样只有「当前这一块」会盖住浮层左边框与面板重叠的那 1px */
.db-cat-item.is-hover {
    background: #fff;
    z-index: 3;
}

.db-cat-item.is-hover::before {
    opacity: 1;
}

/* 图标 */
.db-cat-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #e8a33d;
    background: linear-gradient(135deg, #fff7e8, #ffeccd);
    transition: color 0.2s, background 0.2s;
}

.db-cat-item.is-hover .db-cat-icon {
    color: #fff;
    background: linear-gradient(135deg, #f7b733, #f0a020);
}

/* 图标用图片时（设计稿彩色机型图），去掉底色块 */
.db-cat-icon--img,
.db-cat-item.is-hover .db-cat-icon--img {
    background: none;
}

.db-cat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 文字区 */
.db-cat-info {
    flex: 1;
    min-width: 0;
}

.db-cat-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: #333;
}

.db-cat-name .fa-angle-right {
    font-size: 1.3rem;
    color: #c8ccd2;
    transition: color 0.2s, transform 0.2s;
}

.db-cat-item.is-hover .db-cat-name .fa-angle-right {
    color: #f0a020;
    transform: translateX(2px);
}

.db-cat-sub {
    margin-top: 0.3rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #8c9aa8;
    overflow: hidden;
    /* 本项目一级品类多（16 个），行内预览只占一行、超出省略，
       这样 16 行高度一致、列表整齐；完整二级列表在右侧浮层里 */
    white-space: nowrap;
    text-overflow: ellipsis;
}

.db-cat-sub a {
    color: #666;
    text-decoration: none;
    margin-right: 1rem;
    white-space: nowrap;
    transition: color 0.2s;
}

.db-cat-sub a:hover {
    color: #f0a020;
}

/* ==========================================================================
   二、悬停二级菜单（仿 lmjx.net #side 的 .pr2014 弹层）
   浮层是 .db-cat-item 的兄弟节点，纵向位置由脚本按悬浮块位置计算。
   ========================================================================== */
.db-flyout {
    position: absolute;
    /* 左边缘压住面板右边缘 1px：这 1px 的左边框会被悬停块的白底盖掉，
       于是浮层边框与悬浮块边框正好接上 */
    left: calc(100% - 1px);
    top: 0;
    width: 40rem;
    max-width: calc(100vw - 2rem);
    min-height: 12rem;
    background: #fff;
    border: 1px solid #f0a020;
    /* 左边贴住面板，不圆角，才能和悬浮块的描边接成一条线 */
    border-radius: 0 6px 6px 0;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
    display: none;
    z-index: 2; /* 低于 .db-cat-item.is-hover(3)，高于普通条目(1) */
}

/* 与悬浮块是相邻兄弟节点，所以用 + 选择器 */
.db-cat-item.is-hover + .db-flyout {
    display: block;
}

.db-flyout-ti {
    height: 3.2rem;
    line-height: 3.2rem;
    padding: 0 1.4rem;
    background: linear-gradient(90deg, #f7b733, #f6cf7f);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    border-radius: 0 5px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-flyout-body {
    padding: 1rem 1.4rem 1.2rem;
    /* 默认上限；浮层比视口还高时，脚本会把它压到「视口高 - 上下留白」以内并在这里滚动 */
    max-height: 40rem;
    overflow-y: auto;
}

.db-flyout-group {
    padding: 0.6rem 0 0.8rem;
    border-bottom: 1px dashed #eee;
}

.db-flyout-group:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.db-flyout-group > p {
    margin: 0 0 0.4rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.6;
}

.db-flyout-group > p a {
    color: #f0a020;
    text-decoration: none;
}

.db-flyout-group > p a:hover {
    color: #e03a00;
    text-decoration: underline;
}

.db-flyout-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
    row-gap: 0.2rem;
    line-height: 1.75;
}

.db-flyout-links a {
    font-size: 1.2rem;
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}

.db-flyout-links a:hover {
    color: #f0a020;
}

/* ==========================================================================
   二之一、品牌推荐（浮层正文最后一块，复刻 lmjx.net #side 的 .ditem.ditemb）
   参考站：分组标题 + 一排 4 个品牌 logo（a 宽 120px、img 最大宽 100%），
   位于正文末尾、不带下分隔线（对齐 .ditem.ditemb{border-bottom:0}）。
   ========================================================================== */
.db-flyout-group--brands > p {
    /* 参考站 .ditem p 是 #f40 橙字，且标题本身不是链接 */
    color: #f0a020;
}

.db-flyout-brands {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
}

.db-flyout-brands a {
    display: block;
    line-height: 0;
}

.db-flyout-brands img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
}

/* ==========================================================================
   二之二、热门品牌墙（设备品类列表第一项「热门品牌」的悬浮窗）
   1:1 复刻 lmjx.net #side 首个悬浮窗（.pr2014fo + #hot_brand_wall）：
     · 浮层无标题条、无边框、无底色 —— 留白处透出页面（对齐 .pr2014fo{border:0;background:none}）
     · 灰色底板（对齐 bg.png）：本项目自己描的 SVG 多边形，轮廓逐点取自参考站像素边界
     · 瓦片 122×106 的「上下平、左右尖」正六边形，白底 + 品牌 logo
     · 悬停整块六边形变金色 #ffd740 并居中显示品牌名（对齐 y.png + cite）
     · 出现时每块瓦片从远处飞入并淡入 500ms（对齐 brandShow()）
   ⚠️ 几何必须与 index.html 的 wallPos() / WALL_* 常量一致
   ========================================================================== */
.db-flyout--brands {
    /* 参考站浮层 750×500、底板 520×463 贴左上；这里宽度贴合底板即可 */
    width: 520px;
    min-height: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.db-flyout-body--brands {
    padding: 0;
}

.db-brandwall-fit {
    position: relative;
    width: 100%;
}

.db-brandwall {
    position: relative;
    margin: 0 auto;
    /* 飞入动画期间瓦片会跑到墙外，裁掉 */
    overflow: hidden;
}

.db-brandwall .bw-slab {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

/* 瓦片：正六边形（上下平、左右尖），与参考站 122×106 的六边形一致 */
.db-brandwall .bw-item {
    position: absolute;
    width: 122px;
    height: 106px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    /* 比满格内缩一点点，留出参考站那圈细缝 */
    clip-path: polygon(25.5% 1%, 74.5% 1%, 99% 50%, 74.5% 99%, 25.5% 99%, 1% 50%);
    text-decoration: none;
    animation: bw-in 0.5s ease-out both;
}

@keyframes bw-in {
    from {
        transform: translate(var(--bw-dx, 0), var(--bw-dy, 0));
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.db-brandwall .bw-item img {
    width: 94px;
    height: 58px;
    object-fit: contain;
    display: block;
}

/* 悬停：整个六边形瓦片变色 + 品牌名居中（对应参考站的 y.png 金色六边形 + cite） */
.db-brandwall .bw-name {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: #ffd740;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.db-brandwall .bw-item:hover .bw-name {
    opacity: 0.9;
}

/* 第 18 块「+ 更多品牌」：白六边形 + 深色文字，悬停同样整块变金色 */
.db-brandwall .bw-more-tx {
    color: #08103a;
    font-size: 14px;
    font-weight: 700;
}

/* 列表第一项「热门品牌」：图标换成红热色，跟其余品类区分开 */
.db-cat-item--brands .db-cat-icon {
    color: #fff;
    background: linear-gradient(135deg, #ff8a3d, #f0483c);
}

.db-cat-item--brands.is-hover .db-cat-icon {
    color: #fff;
    background: linear-gradient(135deg, #ff7a26, #e03426);
}

/* ==========================================================================
   三、工程招标列表
   ========================================================================== */
.bid-list {
    flex: 1;
    /* 与 .db-cats / .news-list 同一套做法：flex 列 + gap 控行距、行高等分撑满面板。
       原来用 .bid-item { margin-top: 10px } 撑行距，10px 不在 8pt 网格上。 */
    display: flex;
    flex-direction: column;
    gap: 8px; /* L3 子模块间距，与资讯列表一致 */
    list-style: none;
    margin: 0;
    /* 置顶行是圆角高亮卡片，不能紧贴金色标题条；留 8px（与行距同一档） */
    padding: 8px 0 0;
    background: #f8fafd;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.bid-list li {
    border-bottom: 1px solid #eef1f5;
}

.bid-list li:last-child {
    border-bottom: 0;
}

.bid-item {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 12px;
    overflow: hidden;
}
.bid-item > a {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-height: 3.75rem;
    padding: 0 1.6rem;
    text-decoration: none;
    transition: background 0.18s;
    border-radius: 12px;
}

.bid-item > a:hover {
    background: #fff7e6;
}

.bid-tag {
    flex: 0 0 auto;
    min-width: 2.8rem;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.bid-title {
    flex: 1;
    min-width: 0;
    font-size: 1.2rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.18s;
}

.bid-item > a:hover .bid-title {
    color: #e67e22;
}

/* 置顶条（首条） */
.bid-item.bid-top > a {
    min-height: 4.7rem; /* 用 min-height 而非 height：作为 flex 子项要能随面板等分拉伸 */
    padding-left: 1.3rem;
    gap: 0;
    background: #fff9e6;
    border-left: 6px solid #f6af19;
}

.bid-item.bid-top > a:hover {
    background: #fff4d6;
}

.bid-item.bid-top .bid-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #212121;
}

.bid-item.bid-top > a:hover .bid-title {
    color: #212121;
}

.bid-badge {
    flex: 0 0 auto;
    margin-left: 1rem;
    padding: 0.2rem 1rem;
    border-radius: 3px;
    background: #fb060b;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* ==========================================================================
   四、竖排广告位
   ========================================================================== */
.db-adcol {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* L2 卡片级：与右侧竖排广告列（资讯推荐）保持一致 */
    height: 100%;
}

.db-adcol .ad-placeholder {
    flex: 1 1 0;
    min-height: 6rem;
    font-size: 1.2rem;
}

/* 最后一个条目（结构上是倒数第 2 个元素，最后一个元素是它的浮层）要跟着面板收圆角 */
.db-cat-item:nth-last-child(2) {
    border-bottom: 0;
    border-radius: 0 0 8px 8px;
}

/* 悬停时把右下圆角去掉（改回直角）——只作用于设备品类列表下的最后一个条目：
   右下角是圆的，白底就会被圆角裁掉一小块，盖不住浮层左边框与面板重叠的那 1px，
   角落处会残留一小段橙色描边。悬停时改成直角，白底就能把那 1px 盖干净，
   条目底边与浮层左边框也正好接成一个直角，和其余条目一致。 */
.db-cats .db-cat-item.is-hover:nth-last-child(2) {
    border-bottom-right-radius: 0;
}

/* ---------- 响应式 ---------- */
/* 窄屏没有横向空间放浮层，改用「点击展开」的手风琴：
   二级数据不再浮在右侧，而是内联展开在分类行下方，数据一条都不少。 */
@media (max-width: 991.98px) {
    .db-col-cats {
        z-index: auto;
    }

    /* 面板自身裁圆角即可（此时浮层是文档流内的，不会被裁掉） */
    .db-cats {
        overflow: hidden;
        background: #fff;
    }

    /* 整行就是展开/收起按钮，行内那串二级链接预览去掉
      （完整链接都在展开面板里，数据没少） */
    .db-cat-sub {
        display: none;
    }

    .db-cat-item,
    .db-cat-item:nth-last-child(2) {
        flex: 0 0 auto;
        padding: 1.5rem 1.6rem;
        background: #fff;
        border-bottom: 1px solid #f0f2f5;
        border-radius: 0;
    }

    /* 窄屏是整行，描边四边都要 */
    .db-cat-item::before {
        border-right: 1px solid #f0a020;
    }

    /* 浮层 → 文档流内的内联面板 */
    .db-flyout {
        position: static;
        width: 100%;
        max-width: none;
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #fafbfc;
    }

    /* 热门品牌浮层：窄屏同样不要底色（留白透出），宽度跟着容器走 */
    .db-flyout--brands {
        width: 100%;
        background: none;
    }

    .db-flyout-body--brands {
        padding: 1rem 0;
    }

    .db-cat-item.is-open + .db-flyout {
        display: block;
    }

    .db-cat-item.is-open::before {
        opacity: 1;
    }

    /* 展开时箭头由「>」转成「v」 */
    .db-cat-item.is-open .db-cat-name .fa-angle-right {
        transform: rotate(90deg);
        color: #f0a020;
    }

    /* 分类名上一行已经写过了，展开面板里不再重复标题条 */
    .db-flyout-ti {
        display: none;
    }

    .db-flyout-body {
        max-height: none;
        padding: 1rem 1.6rem 1.2rem;
    }

    .db-flyout-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .db-adcol {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .db-adcol .ad-placeholder {
        flex: 1 1 calc(50% - 0.4rem);
        min-height: 8rem;
    }
}

@media (max-width: 575.98px) {
    /* 品牌推荐：4 列在手机上每格只剩 70 多像素，退成 2 列 */
    .db-flyout-brands {
        grid-template-columns: repeat(2, 1fr);
    }

    .db-adcol .ad-placeholder {
        flex: 1 1 100%;
    }

    .bid-item > a,
    .bid-item.bid-top > a {
        height: auto;
        padding: 1rem 1.2rem;
    }

    .bid-title {
        white-space: normal;
    }
}