/* 甄选平台 */
#platform {
  /* padding: 40px 20px; */
  max-width: 1400px;
  margin: 0 auto;
}

.category-nav {
  display: flex;
  gap: 50px;
  /* margin: 30px 0; */
  align-items: flex-end;
  margin-bottom: 40px;
}

.category-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  position: relative;
}

.category-btn.active {
  color: #c20b0b;
  font-weight: 700;
}


.category-btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 3px;
  background-color: #c20b0b;

}



.products-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.product-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 5px;
}

.product-info {
  padding: 12px;
  position: relative;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-description {
  font-size: 13px;
  color: #666;
  /* margin-bottom: 8px; */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price{
  display: flex;
  align-items: flex-end;
}
.qian{
  font-size: 17px;
}
.datou{
  font-size: 20px;
  color: #c20b0b;
}
.xiaotou{
  color: #c20b0b;
  font-size: 17px;
}
.danwei{
  font-size: 15px;
  color: #666;
}



.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #ffb400;
  font-size: 12px;
  margin-bottom: 8px;
}

.review-count {
  color: #999;
  margin-left: 3px;
}

.add-to-cart {
  background-color: #486C8C;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  width: 100%;
  margin-top: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 14px;
}

.add-to-cart:hover {
  background-color: #3a5a78;
}

/* #productsPagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
} */



.aaa {
  display: flex;
}


.diyihang {
  display: flex;
  color: white;
  justify-content: space-around;
  height: 45px;
  align-items: center;
  background-color: #b80303;
}

.dierhang {
  display: flex;
  justify-content: space-around;
  color: #537593;
  height: 45px;
  align-items: center;
  background-color: #f6f8f9;
  border: 1px dashed black;
  margin-top: 2px;
  margin-bottom: 2px;
}

.disanhang {
  background-color: #b80303;
  color: white;
  height: 45px;
  padding-top: 1.5%;
  padding-left: 3%;
}


.product-params {
  margin-bottom: 20px;
}

.canshukuang {
  width: 8px;
  height: 26px;
  background-color: red;
  margin-right: 5px;
}

.product-params h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.product-params table {
  width: 100%;
  border-collapse: collapse;
}

.product-params table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.detail-images-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.detail-images-container img {
  height: auto;
  /* margin-left: 15%; */
  margin-top: 15px;
}

.back-to-list {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #486C8C;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 3%;
}

.back-to-list:hover {
  background-color: #3a5a78;
}

/* 二维码容器及内部元素 */
.saoma {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.erweima {
  position: absolute;
  z-index: 1;
  /* 增大二维码尺寸，原假设是 80px，这里调整为 120px 等更大值 */
  width: 230px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.jiantou {
  /* 增大箭头尺寸，原假设是 300px，调整为 400px 等 */
  width: 876px;
  height: auto;
  display: block;
}

/* 如果有控制“手机扫码下单”文字的样式，也调整字体大小 */
/* 假设文字在二维码容器内，给包含文字的元素加样式，比如： */
.saoma .qr-text {
  font-size: 16px;
  /* 原可能是 12px 等，调大 */
}


/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 5px;
  justify-content: right;
  margin-top: 80px;
}

/* 通用按钮样式，包括上一页、下一页、尾页、页码 */
.pagination button {
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 0px;
  transition: all 0.2s ease;
  background-color: white;
  color: #333;
  border: 1px solid #999;
  /* 新增 flex 相关属性 */
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中（可选，让文字在按钮内水平也居中） */
}

/* 页码按钮（非 active 状态） hover 效果 */
.pagination button.page-btn:hover:not(.active) {
  border-color: #b80303;
  color: #b80303;
  border-style: solid;
}

/* 高亮（active）状态的页码按钮样式 */
.pagination button.active {
  background-color: #b80303;
  color: white;
  border: 1px solid #b80303;
  /* 实线边框 */
}

/* 上一页、下一页、尾页等按钮可单独调整样式（如果需要区别于页码按钮），这里简单示例 */
.pagination button.prev-page,
.pagination button.next-page {
  /* 可以根据需求设置不同的边框、颜色等，比如保持虚线边框 */
  border: 1px solid #999;
}

.pagination button.prev-page:hover,
.pagination button.next-page:hover {
  border-color: #b80303;
  color: #b80303;
  border-style: solid;
}


@media (max-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .category-nav {
    gap: 5px;
  }

  .category-btn {
    padding: 6px 12px;
    font-size: 14px;
  }
}