/* ============================================================
 * 前端模板主题：B2B门户 · 商机平台风 style/themes/b2b.css
 * 参考 DESTOON 7ke 皮肤（盛林机电网类 B2B 分类信息门户）
 * 本主题做【排版级】改造，不只是换色：
 *   白顶红条导航 / 横条热线banner / 双栏分类格子 /
 *   栏目头红标签 / 信息列表虚线分隔+点符 / 步骤条横向5格 /
 *   面包屑"当前位置" / 深灰商务页脚
 * 需在 main.css / mobile.css 之后加载
 * ============================================================ */
:root{--primary:#de293a;--primary-dark:#b91c2c;--accent:#ff6600;--bg:#f6f7f9;--card-bg:#fff;--text:#1f2d3d;--text-light:#8a97a8;--border:#e8ecf1;--shadow:0 2px 10px rgba(31,45,61,.06);--radius:4px;}
body{background:var(--bg);}

/* ===== 版面加宽：B2B门户宽版 ===== */
body.tpl-b2b .container{max-width:1200px;}

/* ===== 顶栏：白底 + 3px红边，门户标志性白顶 ===== */
.header{background:#fff;border-bottom:3px solid var(--primary);box-shadow:0 2px 10px rgba(222,41,58,.10);}
.header-inner{padding-top:14px;padding-bottom:14px;}
.logo,.logo span{color:var(--primary);}
.phone-top{color:#5a6b7f;font-size:14px;}
.phone-top strong{color:var(--primary);font-size:20px;}

/* ===== 导航：整段正红横条（通栏感） ===== */
.nav{display:flex;flex-wrap:wrap;background:linear-gradient(180deg,#ed4040,#de293a 60%,#cf2233);border-radius:4px;margin:10px 0;box-shadow:0 3px 10px rgba(222,41,58,.22);padding:0 6px;}
.nav a{color:#fff;border-radius:0;font-weight:600;padding:11px 16px;}
.nav a:first-child{border-radius:4px 0 0 4px;}
.nav a:hover{background:rgba(255,255,255,.16);color:#fff;}
.nav a.active{background:#fff;color:var(--primary);font-weight:700;}

/* ===== 热线盒：横条 banner，左侧文案右侧大号码 ===== */
.hotline-box{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;background:linear-gradient(90deg,#de293a 0%,#f0403f 60%,#ff6600 130%);border-radius:4px;padding:14px 22px;box-shadow:0 4px 14px rgba(222,41,58,.26);}
.hotline-box .hl-label{font-size:15px;font-weight:600;color:#fff;border:none;}
.hotline-box .hl-num{font-size:24px;font-weight:800;color:#fff;letter-spacing:1px;}
.hotline-box .hl-tag{background:rgba(255,255,255,.22);color:#fff;border-radius:3px;font-size:12px;padding:2px 8px;vertical-align:middle;}

/* ===== 卡片：扁平栏目式 ===== */
.card{border:1px solid var(--border);border-radius:4px;box-shadow:var(--shadow);background:var(--card-bg);}

/* ===== 栏目头：灰底 + 左侧红色标签 + 右侧more ===== */
.card-title{display:flex;justify-content:space-between;align-items:center;background:#f6f7f9;border-bottom:1px solid var(--border);border-left:4px solid var(--primary);padding:9px 14px;font-size:16px;font-weight:700;color:var(--text);}
.card-title .cat-icon{display:none;}
.card-title a.more{font-size:12px;font-weight:400;color:var(--text-light);}
.card-title a.more:hover{color:var(--primary);}

/* ===== 分类格子：首页双栏 ===== */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media (max-width:860px){.cat-grid{grid-template-columns:1fr;}}

/* ===== 信息列表：B2B经典虚线分隔 + 红色点符 ===== */
.item-list{list-style:none;margin:0;padding:0 14px 10px;}
.item-list li{padding:9px 0;border-bottom:1px dashed #dfe5ec;}
.item-list li:last-child{border-bottom:none;}
.item-list li a{color:var(--text);font-size:14px;text-decoration:none;}
.item-list li a::before{content:"▪";color:var(--primary);margin-right:7px;font-size:12px;}
.item-list li a:hover{color:var(--primary);}
.item-list .item-intro{font-size:12px;color:var(--text-light);margin-top:3px;padding-left:15px;}

/* ===== 品牌内容列表：信息流行式 ===== */
.brand-list .list-item{padding:12px 2px;border-bottom:1px solid #eef1f5;transition:all .18s;}
.brand-list .list-item:hover{background:#fff7f8;padding-left:8px;}
.brand-list .item-title{font-size:15px;font-weight:600;}
.brand-list .item-intro{font-size:12px;color:var(--text-light);margin-top:4px;}
a:hover .item-title,.item-title:hover{color:var(--primary);}

/* ===== 条目标签：红框白底 ===== */
.item-tag{background:#fff;color:var(--primary);border:1px solid #f2c9ce;border-radius:3px;font-weight:600;font-size:12px;padding:1px 8px;}

/* ===== 步骤条：横向5格 ===== */
.process-steps{display:flex;gap:8px;flex-wrap:wrap;}
.process-steps .step{flex:1;min-width:130px;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-top:2px solid var(--primary);border-radius:4px;padding:12px 8px;text-align:center;}
.process-steps .step-num{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#ed4040,#ff6600);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.process-steps .step-text{font-size:12px;color:var(--text);line-height:1.5;}

/* ===== 优势格子：红顶线 ===== */
.advantage-grid .adv-card{background:#fff;border:1px solid var(--border);border-top:2px solid var(--primary);border-radius:4px;padding:14px;}

/* ===== 地区/服务标签：方形描边 ===== */
.area-tag,.area-tags span,.sv-tag,.service-tags span{border:1px solid #efd3d6;background:#fff;color:var(--primary-dark);border-radius:3px;padding:2px 10px;font-size:12px;}
.area-tag:hover,.area-tags span:hover{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ===== 面包屑：当前位置 ===== */
.breadcrumb{font-size:13px;color:var(--text-light);}
.breadcrumb::before{content:"当前位置：";color:#a5b1bf;}
.breadcrumb a{color:var(--primary);}

/* ===== 详情页小节标题：红竖条 ===== */
.detail-content h2{font-size:18px;border-left:4px solid var(--primary);padding-left:10px;margin:22px 0 12px;}
.detail-content .section-num{background:var(--primary);color:#fff;border-radius:3px;padding:1px 7px;font-size:13px;margin-right:6px;}

/* ===== FAQ：左侧红条 ===== */
.faq-item{border-left:3px solid var(--primary);padding-left:12px;margin-bottom:10px;}
.faq-item summary{color:var(--primary-dark);}

/* ===== 价格表：B2B报价单风格 ===== */
.price-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;}
.price-table th{background:#f6f7f9;border:1px solid var(--border);color:var(--text);padding:8px 10px;text-align:left;}
.price-table td{border:1px solid var(--border);padding:8px 10px;}
.price-table td:nth-child(2){color:var(--primary);font-weight:700;}

/* ===== 相关链接/标签盒 ===== */
.tag-box{background:#f8f9fa;border:1px solid var(--border);border-radius:4px;padding:10px 12px;font-size:12px;}
.tag-box a{border:1px solid var(--border);background:#fff;color:var(--text-light);border-radius:3px;padding:2px 9px;margin:2px;display:inline-block;text-decoration:none;}
.tag-box a:hover{border-color:var(--primary);color:var(--primary);background:#fff7f8;}
.related-links a{color:var(--primary);}

/* ===== 分页：直角矩形 ===== */
.pagination{display:flex;gap:6px;flex-wrap:wrap;}
.pagination .page-btn{color:var(--primary-dark);border:1px solid #e2e7ed;border-radius:3px;background:#fff;padding:6px 12px;}
.pagination .page-btn:hover{border-color:var(--primary);color:var(--primary);}
.pagination .page-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700;}

/* ===== 页脚：深灰商务 ===== */
.footer{background:#22272e;color:#9aa7b5;border-top:3px solid var(--primary);}
.footer a{color:#e8b9be;}
.footer a:hover{color:#fff;}

/* ===== 按钮 ===== */
.btn,button.btn{background:var(--primary);border-color:var(--primary);border-radius:4px;}
.btn:hover{background:var(--primary-dark);}

/* ===== 移动端适配 ===== */
@media (max-width:768px){
  .nav a{padding:10px 12px;font-size:14px;}
  .hotline-box .hl-num{font-size:19px;}
  .hotline-box .hl-label{font-size:13px;}
  .cat-grid{grid-template-columns:1fr;}
  .process-steps .step{min-width:100px;}
}