@media (min-width: 768px) and (max-width: 991.98px) {

.recommend-section {
        padding: 40px 40px!important; /* 調整 iPad 上的間距 */
    }
}
@media (max-width: 576px) {
  .swiper-slide.product-card {
    transform: translateX(0px);  /* 確保卡片不會在滑動時移動 */
  }
}

/* 手機版調整 .recommend-next 的位置 */
@media (max-width: 576px) {
  .recommend-next {
    right: 10px !important;  /* 設定右邊距離為 10px */
  }
}

/* 手機版調整 .recommend-prev 的位置 */
@media (max-width: 576px) {
  .recommend-prev {
    left: 10px !important;  /* 設定左邊距離為 10px */
  }
}

/* 確保swiper容器具有足夠的高度 */
.recommend-swiper {
  position: relative; /* 讓箭頭可以相對定位 */
  height: auto; /* 高度自適應 */
  max-height: 400px; /* 可以根據需要調整最大高度 */
  overflow: hidden; /* 防止內容溢出 */
}

/* 調整箭頭的定位方式，確保箭頭居中 */
.recommend-prev, .recommend-next {
  position: absolute;
  top: 50%;  /* 垂直方向居中 */
  transform: translateY(-50%);  /* 精確居中 */
  z-index: 10;
  width: 30px;
  height: 30px;
  background-color: transparent;
  color: black;
  border: 2px solid black;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
}

/* 左箭頭定位 */
.recommend-prev {
  left: 0px; /* 設定左箭頭位置 */
}

/* 右箭頭定位 */
.recommend-next {
  right: 28px; /* 設定右箭頭位置 */
}

/* 商品區塊 */
.product-slider {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start; /* 確保卡片不會被壓縮 */
  padding-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* 商品卡片 */
.product-card {
  flex: 0 0 calc(20% - 20px); /* 五個商品一列 */
  text-align: center;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  background-color: #fff;
  box-sizing: border-box; /* 確保盒子模型正確 */
  min-height: 300px; /* 增加最小高度，確保卡片足夠容納所有內容 */
  max-height: 450px; /* 設定最大高度，防止卡片過高 */
  overflow: hidden; /* 防止內容超出卡片範圍 */
  position: relative; /* 確保內部內容正確顯示 */
}

/* 商品圖片調整 */
.product-card img {
  width: 100%;
  height: auto; /* 限制圖片的高度，避免超過卡片範圍 */
  object-fit: cover; /* 確保圖片自適應 */
  margin-bottom: 10px; /* 增加間距，讓圖片和其他內容不會太緊密 */
  border-radius: 4px;
}

/* 商品標題 */
.product-card .title {
  font-size: 16px;
  color: #333;
  margin: 8px 0 4px;
  word-wrap: break-word; /* 防止長標題超出邊界 */
  overflow: visible!important; /* 防止超出範圍 */
  text-overflow: ellipsis; /* 長標題會加上省略號 */
  white-space: nowrap; /* 防止換行 */
  font-weight: bold!important; /* 確保標題字體加粗 */
}

/* 商品價格 */
.product-card .price {
  font-size: 16px;
  color: #df181e!important;
  font-weight: bold;
  margin-top: 8px;
  word-wrap: break-word; /* 防止價格文字超出邊界 */
}

/* 響應式調整：手機版顯示每列兩個商品 */
@media (max-width: 768px) {
  .product-card {
    flex: 0 0 calc(50% - 20px); /* 手機版每行顯示兩個商品 */
  }
}

@media (min-width: 992px) {
  .recommend-section {
    padding: 40px 80px;
  }

  .section-header {
    padding-left: 0;
  }
}

/* 標題的樣式 */
.section-header {
  margin-bottom: 32px;
  padding-left: 20px;  /* 確保左側有適當間距 */
}

.section-header .en {
  font-size: 12px;
  color: #B60005;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
}

.line-inline {
  display: inline-block;
  width: 40px;
  height: 2px;
  background-color: #B60005;
}

.section-header .zh {
  font-size: 32px!important;
  font-weight: bold;
  margin: 4px 0 0;
  text-align: left;
  letter-spacing: 1.5px!important;
  word-wrap: break-word; /* 確保長字不會跑出邊界 */
}