/* --- 20251218瑞昌提供樣式 產品頁-推薦商品分類 --- */
  /* 1. 外層容器：負責讓標籤自動排列與換行 */
  .tags-container {
    display: flex;
    flex-wrap: wrap; /* 關鍵：讓空間不夠時自動換行 */
    gap: 12px; /* 設定標籤之間的水平與垂直間距 */
    padding: 20px; /* 容器內距 */
    max-width: 900px; /* 限制最大寬度 (可自行調整) */
    margin: 0 auto; /* 讓容器置中 */
  }

  /* 2. 單個標籤的樣式 (核心部分) */
  .category-tag {
    /* 顯示設定 */
    display: inline-block; /* 讓 padding 和 border 生效 */
    text-decoration: none; /* 去除連結預設的底線 */
    
    /* 【關鍵】框線設定：寬度 樣式 顏色 */
    border: 1px solid #285d2c; 
    
    /* 顏色與背景 */
    color: #285d2c; /* 文字顏色 (配合框線) */
    background-color: #fff; /* 背景色 */
    
    /* 形狀與空間 */
    border-radius: 50px; /* 圓角設定 (膠囊狀) */
    padding: 8px 18px; /* 內距：上下 8px，左右 18px */
    font-size: 15px; /* 文字大小 */
    
    /* 加入平滑過渡效果 (選用) */
    transition: all 0.3s ease;
  }

  /* 3. 滑鼠懸停時的效果 (選用，增加互動感) */
  .category-tag:hover {
    background-color: #285d2c; /* 背景變綠 */
    color: #ffffff; /* 文字變白 */
    /* 框線顏色也可以跟著變，或保持不變 */
    border-color: #28a745; 
  }
  
  /* 標題樣式 (選用) */
  h3.tag-title {
      padding-left: 20px;
      color: #333;
      font-weight: bold;
      margin-bottom: 10px;
  }
  /* --- 20251218瑞昌提供樣式結束 --- */