<style>
  /* ============ 全局重置 ============ */
  * { box-sizing: border-box; margin: 0; padding: 0; }

  /* ============ Section 基础 ============ */
  .section { padding: 10px 0; }
  .section-title {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
  }

  /* ============ Feature Cards（Why Shop With Us） ============ */
  .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
  }
  .card h3 { margin: 12px 0; }
  .card p { font-size: 15px; }
  .card:hover {
    border-color: #1a365d;
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.08);
  }
  .icon { font-size: 32px; margin-bottom: 8px; }

  /* ============ Product Grid ============ */
  .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .product-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
  .product-img { width: 100%; height: 200px; object-fit: cover; }
  .product-body { padding: 16px; }
  .product-body h3 { font-size: 16px; margin-bottom: 8px; }
  .product-spec { font-size: 14px; color: #666; margin-bottom: 8px; }
  .price { font-size: 18px; font-weight: bold; color: #1a365d; margin-bottom: 12px; }
  .btn-cart {
    display: block;
    width: 100%;
    text-align: center;
    background: #1a365d;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
  }
  .btn-cart:hover { background: #152c4a; }

  /* ============ Category 按钮 ============ */
  .brand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 6px;
    background: #f7f8fa;
    border: 1px solid #e4e6eb; /* 预留边框位，避免 hover 时抖动 */
    border-radius: 8px;
    font-size: 17px;
    font-weight: 500;
    color: #333333;
    text-align: center;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
  }
  .brand-btn:hover {
    border-color: #2b7fff;
    box-shadow: 0 0 0 1px rgba(43, 127, 255, .15);
  }
  .brand-btn:focus-visible { outline: none; border-color: #2b7fff; }

  /* ============ Wholesale ============ */
  .wholesale { background: #f7fafc; }
  .wholesale-wrap { max-width: 950px; margin: 0 auto; text-align: center; }
  .wholesale ul { text-align: left; display: inline-block; margin: 20px 0; }
  .wholesale li { margin: 8px 0; }

  A.bc:link { color: inherit; text-decoration: none; font-size: 13px; }
  A.bc:hover { color: #000000; text-decoration: none; font-size: 13px; }
  A.bc:visited { color: #000000; text-decoration: none; font-size: 13px; }

  /* ============ 品牌色卡片网格（每行4张，最后一行自动铺满） ============ */
  .brand-grid { display: flex; flex-wrap: wrap; gap: 16px; margin: 18px 0 8px; }
  .brand-card {
    flex: 1 1 calc((100% - 48px) / 4); /* 每行4张：总宽减3个gap后均分 */
    min-width: 160px;
    background: #f7f8fa;
    border: 1px solid #e4e6eb; /* 预留边框位，避免 hover 时抖动 */
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  /* 顶部品牌色块 */
  .brand-card .brand-name {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 14px;
    text-align: center;
    white-space: nowrap;
  }
  /* 品类链接列表 */
  .brand-card .brand-items {
    list-style: none;
    padding: 6px 10px;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    margin-top: -4px;
    margin-bottom: -4px;
  }
  /* 链接去下划线 */
  .brand-card .brand-items a { text-decoration: none; color: #333333; display: inline-block; }
  .brand-card .brand-items a:hover { color: #2b7fff; }
  /* 鼠标移上去：显示蓝色边框 */
  .brand-card:hover {
    border-color: #2b7fff;
    box-shadow: 0 0 0 1px rgba(43, 127, 255, .15);
    transform: translateY(-2px);
  }
  .brand-card:focus-visible { outline: none; border-color: #2b7fff; }
</style>