:root {
      --radius: 5px;
      --shadow: 0 4px 20px rgba(0,0,0,.08);
    }
    /* ===== 推荐分类（纯文字列表，信息饱满） ===== */
    .b2b-rec-cat {
      background: #fff;
      border-radius: var(--b2b-radius);
      box-shadow: var(--b2b-shadow);
      padding: 30px;
      margin: 25px auto;
    }
    .rec-cat__title {
      font-size: 20px;
      font-weight: 700;
      color: var(--b2b-blue);
      margin-bottom: 20px;
      border-left: 4px solid var(--b2b-orange);
      padding-left: 8px;
    }
    .rec-cat__list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .rec-cat__item {
      background: var(--b2b-light);
      color: var(--b2b-gray);
      padding: 8px 12px;
      border-radius: 20px;
      font-size: 13px;
      text-decoration: none;
      transition: .2s;
    }
    .rec-cat__item:hover {
      background: var(--b2b-orange);
      color: #fff;
    }

    /* ===== 省市县三级城市分类（默认全开，美观布局） ===== */
    .b2b-city-cat {
      background: #fff;
      border-radius: var(--b2b-radius);
      box-shadow: var(--b2b-shadow);
      padding: 30px;
      margin: 25px auto;
    }
    .city-cat__title {
      font-size: 20px;
      font-weight: 700;
      color: var(--b2b-blue);
      margin-bottom: 20px;
      border-left: 4px solid var(--b2b-orange);
      padding-left: 8px;
    }
    .city-cat__prov {
      margin-bottom: 20px;
    }
    .city-cat__prov-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--b2b-blue);
      margin-bottom: 10px;
    }
    .city-cat__city {
      margin-left: 20px;
      margin-bottom: 15px;
    }
    .city-cat__city-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--b2b-orange);
      margin-bottom: 8px;
    }
    .city-cat__county {
      margin-left: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .city-cat__county a {
      background: var(--b2b-light);
      color: var(--b2b-gray);
      padding: 4px 10px;
      border-radius: 15px;
      font-size: 12px;
      text-decoration: none;
      transition: .2s;
    }
    .city-cat__county a:hover {
      background: var(--b2b-orange);
      color: #fff;
    }

    /* 移动端堆叠 */
    @media (max-width: 768px) {
      .rec-cat__list {
        flex-direction: column;
      }
      .city-cat__prov,
      .city-cat__city,
      .city-cat__county {
        margin-left: 0;
      }
    }
    
    .b2b-top-banner {
      background: linear-gradient(135deg, var(--b2b-blue) 0%, #004a8c 100%);
      color: #fff;
      padding: 60px 20px;
      margin: 25px auto;
      border-radius: var(--b2b-radius);
      box-shadow: var(--b2b-shadow);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .top-banner__title {
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 10px;
      animation: breathe 3s infinite;
    }
    .top-banner__subtitle {
      font-size: 16px;
      opacity: .9;
      margin-bottom: 20px;
    }
    .top-banner__btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .15);
      color: #fff;
      padding: 10px 20px;
      border-radius: 25px;
      font-size: 14px;
      text-decoration: none;
      transition: .2s;
      position: relative;
      overflow: hidden;
    }
    .top-banner__btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
      transition: .5s;
    }
    .top-banner__btn:hover::before {
      left: 100%;
    }
    .top-banner__btn:hover {
      background: rgba(255, 255, 255, .25);
    }
    @keyframes breathe {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.02);
      }
    }
    
    /**shop**/
    
    a {
      text-decoration: none;
    }

    /* 顶部 */
    .b2b-top-bar {
      background: linear-gradient(135deg, var(--b2b-blue) 0%, #004a8c 100%);
      color: #fff;
      padding: 20px 30px;
      margin: 25px auto;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 10px;
    }
    .top-bar__name {
      font-size: 36px;
      font-weight: 700;
      margin: 0;
    }
    .top-bar__tel {
      font-size: 16px;
      opacity: .9;
    }

    /* 面包屑 */
    .b2b-breadcrumb {
      margin: -15px auto 10px;
    }
    .breadcrumb {
      background: transparent;
      padding: 0;
      margin: 0;
    }

    /* 按钮导航 */
    .b2b-tag-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: -10px;
      z-index: 2;
      position: relative;
      margin-left: 10px;
    }
    .tag-bar__btn {
      background: linear-gradient(145deg, var(--b2b-blue), #004a8c);
      color: #fff;
      padding: 6px 14px;
      font-size: 13px;
      box-shadow: 0 2px 4px rgba(0,0,0,.15);
      transition: .2s;
      border-radius: 10px 4px 0 0;
    }
    .tag-bar__btn:hover {
      box-shadow: 0 4px 8px rgba(0,0,0,.25);
      transform: translateY(-2px);
      color: #fff;
    }

    /* 卡片统一 */
    .b2b-card {
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 30px;
      margin: 25px auto;
    }
    .card-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--b2b-blue);
      margin-bottom: 20px;
      border-left: 4px solid var(--b2b-orange);
      padding-left: 8px;
    }

    /* 公司简介豪华版 */
    .intro-box {
      display: flex;
      gap: 25px;
      align-items: flex-start;
    }
    .intro-left {
      flex: 0 0 320px;
    }
    .intro-left img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: var(--radius);
    }
    .intro-right {
      flex: 1;
    }
    .intro-right h4 {
      font-size: 22px;
      font-weight: 700;
      color: var(--b2b-blue);
      margin-bottom: 10px;
    }
    .intro-right .intro-tags {
      margin: 15px 0;
    }
    .intro-right .intro-tags span {
      display: inline-block;
      background: linear-gradient(145deg, var(--b2b-orange), #e55a00);
      color: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 8px;
      margin-bottom: 6px;
    }
    .intro-right .intro-text {
      font-size: 15px;
      line-height: 1.8;
      color: #555;
    }

    /* 表格美化 */
    table.b2b-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }
    table.b2b-table th,
    table.b2b-table td {
      padding: 12px 15px;
      border: 1px solid #e0e0e0;
      vertical-align: top;
    }
    table.b2b-table th {
      background: var(--b2b-light);
      color: var(--b2b-blue);
      font-weight: 600;
      width: 28%;
    }
    table.b2b-table td {
      color: #555;
    }
    table.b2b-table a {
      color: var(--b2b-blue);
      transition: color .2s;
    }
    table.b2b-table a:hover {
      color: var(--b2b-orange);
    }

    /* 供需产品卡片 */
    .prod-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }
    .prod-card {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: var(--radius);
      overflow: hidden;
      text-align: center;
      transition: transform .2s;
    }
    .prod-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
    }
    .prod-card img {
      width: 100%;
      height: 140px;
      object-fit: cover;
    }
    .prod-card-body {
      padding: 10px;
    }
    .prod-card-title {
      font-size: 14px;
      font-weight: 600;
      margin: 6px 0 4px;
      color: var(--b2b-blue);
    }
    .prod-card-price {
      font-size: 15px;
      color: var(--b2b-orange);
      margin-bottom: 4px;
    }
    .prod-card-time {
      font-size: 12px;
      color: #999;
    }

    /* PC 5列 / 手机 2列 */
    @media (min-width: 992px) {
      .prod-card {
        width: calc(20% - 12px);
      }
    }
    @media (max-width: 991px) {
      .prod-card {
        width: calc(50% - 8px);
      }
      .intro-box {
        flex-direction: column;
      }
      .intro-left {
        flex: 0 0 auto;
      }
    }

    /* 新闻动态左右分栏 */
    .news-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
    }
    .news-item:last-child {
      border-bottom: 0;
    }
    .news-title {
      flex: 1;
      font-size: 15px;
      color: #333;
    }
    .news-date {
      font-size: 13px;
      color: #999;
      margin-left: 10px;
      white-space: nowrap;
    }

    /* 提示美化 */
    .tips-box {
      background: linear-gradient(135deg, #fff8f0 0%, #fff0e0 100%);
      border-left: 5px solid var(--b2b-orange);
      padding: 20px;
      border-radius: var(--radius);
      font-size: 14px;
      line-height: 1.8;
      color: #664400;
    }
    .tips-box h6 {
      margin-bottom: 10px;
      color: var(--b2b-orange);
      font-weight: 600;
    }

    /* 右侧栏 */
    .b2b-right-bar {
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
      margin: 25px 0;
    }
    .right-bar__tit {
      font-size: 16px;
      font-weight: 600;
      color: var(--b2b-blue);
      margin-bottom: 12px;
      border-left: 4px solid var(--b2b-orange);
      padding-left: 8px;
    }
    .right-bar__list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .right-bar__list li {
      padding: 6px 0;
      border-bottom: 1px solid #f0f0f0;
      font-size: 13px;
    }
    .right-bar__list li:last-child {
      border-bottom: 0;
    }
    .right-bar__list a {
      color: var(--b2b-gray);
    }
    .right-bar__list a:hover {
      color: var(--b2b-orange);
    }

    /* 页脚 */
    .b2b-footer {
      background: var(--b2b-gray);
      color: #fff;
      padding: 30px 0;
      margin-top: 50px;
      text-align: center;
      font-size: 13px;
    }
    .b2b-footer a {
      color: #fff;
      margin: 0 6px;
    }
    .b2b-footer a:hover {
      color: var(--b2b-orange);
    }
    
    
    /*list*/
    
    /* ===== 区县筛选栏（放在最上面，美观布局） ===== */
    .b2b-filter-bar {
      background: #fff;
      border-radius: var(--b2b-radius);
      box-shadow: var(--b2b-shadow);
      padding: 15px 20px;
      margin: 25px auto;
    }
    .filter-bar__title {
      font-size: 16px;
      font-weight: 600;
      color: var(--b2b-blue);
      margin-bottom: 10px;
    }
    .filter-bar__list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .filter-bar__item {
      background: var(--b2b-light);
      color: var(--b2b-gray);
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      text-decoration: none;
      transition: .2s;
    }
    .filter-bar__item:hover,
    .filter-bar__item.active {
      background: var(--b2b-orange);
      color: #fff;
    }

    /* ===== 当前分类标题 ===== */
    .b2b-cur-cat {
      background: linear-gradient(135deg, var(--b2b-blue) 0%, #004a8c 100%);
      color: #fff;
      padding: 20px;
      border-radius: var(--b2b-radius);
      margin: 25px auto;
    }
    .cur-cat__title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .cur-cat__desc {
      font-size: 14px;
      opacity: .9;
    }

    /* ===== 主容器 ===== */
    .b2b-comp-list {
      background: #fff;
      border-radius: var(--b2b-radius);
      box-shadow: var(--b2b-shadow);
      padding: 30px;
      margin: 25px auto;
    }
    .comp-list__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
    }
    .comp-list__title {
      font-size: 20px;
      font-weight: 700;
      color: var(--b2b-blue);
    }
    .comp-list__sort {
      display: flex;
      gap: 10px;
    }
    .comp-list__sort button {
      background: none;
      border: 1px solid var(--b2b-blue);
      color: var(--b2b-blue);
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      transition: .2s;
    }
    .comp-list__sort button:hover,
    .comp-list__sort button.active {
      background: var(--b2b-blue);
      color: #fff;
    }

    /* ===== 公司卡片（信息密集，左图右文） ===== */
    .comp-card {
      display: flex;
      gap: 15px;
      padding: 15px;
      background: var(--b2b-light);
      border-radius: var(--b2b-radius);
      margin-bottom: 15px;
      position: relative;
      transition: .2s;
    }
    .comp-card:hover {
      box-shadow: 0 2px 10px rgba(0, 87, 146, .15);
    }
    .comp-card__img {
      width: 120px;
      height: 90px;
      object-fit: contain;
      border-radius: 6px;
      flex-shrink: 0;
    }
    .comp-card__info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .comp-card__name, .comp-card__name a{
      font-size: 16px;
      font-weight: 600;
      color: var(--b2b-blue);
      text-decoration: none;
    }
    .comp-card__name a:hover {
      color: var(--b2b-orange);
    }
    .comp-card__main {
      font-size: 13px;
      color: #666;
    }
    .comp-card__addr {
      font-size: 12px;
      color: #666;
    }
    .comp-card__meta {
      display: flex;
      gap: 15px;
      font-size: 12px;
      color: #666;
    }
    .comp-card__reg {
      font-weight: 600;
      
    }
    .comp-card__date {
      font-weight: 600;
      color: var(--b2b-blue);
    }
    .comp-card__btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: var(--b2b-orange);
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      transition: .2s;
    }
    .comp-card__btn:hover {
      background: #e05500;
    }

    /* ===== 分页（纯 CSS） ===== */
    .b2b-pagination {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
    .pagination {
      margin: 0;
    }
    .page-link {
      color: var(--b2b-blue);
      border: 1px solid var(--b2b-blue);
      background: none;
      transition: .2s;
    }
    .page-link:hover,
    .page-item.active .page-link {
      background: var(--b2b-blue);
      color: #fff;
      border-color: var(--b2b-blue);
    }

    /* ===== 右侧栏 20% ===== */
    .b2b-right-bar {
      background: #fff;
      border-radius: var(--b2b-radius);
      box-shadow: var(--b2b-shadow);
      padding: 20px;
      margin: 25px 0;
    }
    .right-bar__sect {
      margin-bottom: 25px;
    }
    .right-bar__sect:last-child {
      margin-bottom: 0;
    }
    .right-bar__tit {
      font-size: 16px;
      font-weight: 600;
      color: var(--b2b-blue);
      margin-bottom: 12px;
      border-left: 4px solid var(--b2b-orange);
      padding-left: 8px;
    }
    .right-bar__list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .right-bar__list li {
      padding: 6px 0;
      border-bottom: 1px solid #f0f0f0;
      font-size: 13px;
    }
    .right-bar__list li:last-child {
      border-bottom: 0;
    }
    .right-bar__list a {
      color: var(--b2b-gray);
      text-decoration: none;
      transition: color .2s;
    }
    .right-bar__list a:hover {
      color: var(--b2b-orange);
    }
    .right-bar__ad {
      width: 100%;
      border-radius: var(--b2b-radius);
      object-fit: cover;
      margin-bottom: 15px;
    }

    /* 移动端堆叠 */
    @media (max-width: 768px) {
      .comp-card {
        flex-direction: column;
      }
      .comp-card__img {
        width: 100%;
        height: 150px;
      }
    }