/* 产品页面 */


.products-page .container {
  display: flex;

  margin: 50px auto;
  /* background-color: #2c3e50; */
  /* border-radius: 10px; */
  /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); */
  overflow: visible;
  /* border: 1px solid #e0e0e0; */
  column-gap: 10px;
  width: 100%;
  max-width: 1200px;
  padding-left: 12px;
  padding-right: 12px;
}

.products-page .categories {
  width: 250px;
  /* background: #efefef; */
  color: rgb(0, 0, 0);
  /* padding: 25px 0; */
  /* 设置固定高度，内容多时滚动 */
  height: 500px;
  overflow-y: auto;
  /* border-radius: 10px; */
  /* padding-right: 10px;
  border-right: 1px solid #efefef; */
}

/* 添加滚动条样式美化 */
.products-page .categories::-webkit-scrollbar {
  width: 6px;
}

.products-page .categories::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.products-page .categories::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.products-page .categories::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.products-page .all-products {
  font-weight: 700;
  background-color: #efefef;
  margin-bottom: 10px 0;


  /* margin-bottom: 10px; */
}



.products-page .category {
  padding: 15px 25px;
  margin: 10px 0;
  border-radius: 10px;
  background-color: #efefef;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.products-page .category:hover {
 background-color: #ffa800;

 /* color: #ffffff; */

}

.products-page .category.active {
  /* background: rgba(255, 255, 255, 0.15); */
  /* border-left-color: #ffa800; */
  background-color: #efefef;
  font-weight: 600;
}
.products-page .category.active:hover {
  /* background: rgba(255, 255, 255, 0.15); */
  /* border-left-color: #ffa800; */
  background-color: #ffa800;

}

.products-page .products {
  flex: 1;
  padding: 25px;
  background-color: white;
  border-radius: 10px;
  margin-left: 0;
  position: relative;
  z-index: 1;
  /* 确保高度与左侧一致 */
  height: auto;
  min-height: 400px;
  /* 等比例缩放 */
  transform-origin: top left;
  transition: transform 0.3s ease;
  /* 防止缩放时内容被遮挡 */
  overflow: visible;

}

.products-page .section-title {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 25px;
  color: #2c3e50;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

/* 初始状态显示所有产品 */
.products-page .product-content.active {
  display: block;
}

/* 当有分类被选中时，只显示对应的产品 */
.products-page .category.active~.products .product-content:not(.active) {
  display: none;
}

.products-page .product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.products-page .product-link {
  text-decoration: none;

  color: inherit;
  display: block;
}

.products-page .product-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #eee;
}

.products-page .product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);

}

.products-page .product-image {
  height: 250px;
  /* background: linear-gradient(135deg, #3498db, #2c3e50); */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
  position: relative;
  overflow: hidden;
  /* border-bottom: 1px solid #e9ecef; */
  transition: transform 0.3s ease;

}

.products-page .product-image img,
.products-page .product-image span img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 改为 contain，保持图片原始比例，不拉伸 */
  display: block;
}

.products-page .product-image:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.05)); */
}

.products-page .product-info {
  padding: 18px;


}
.products-page .product-card:hover .product-info {

  background-color: #ffa800;

}

.products-page .product-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  /* 两行省略 - 超过两行时第二行末尾显示省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* 标准属性，提高兼容性 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  /* 固定高度为两行的高度 (line-height * font-size * 2) */
  height: 44.8px; /* 1.4 * 16px * 2 = 44.8px */
  max-height: 44.8px;
}

.products-page .product-content {
  display: none;
}

.products-page .product-content.active {
  display: block;
}

/* 完整视口媒体查询 - 等比例缩放 */

/* 超大屏幕 1400px+ */
@media (min-width: 1400px) {
  .products-page .container {
    max-width: 1400px;
    transform: none; /* 避免缩放导致视觉高度与布局高度不一致 */
    transform-origin: initial;
  }
  .products-page .product-image {
    height: 300px;
  }
  .products-page .product-name {

    height: 50px;
  }
}

/* 大屏幕 1200px-1399px */
@media (max-width: 1399px) and (min-width: 1200px) {
  .products-page .container {
    max-width: 1200px;
    transform: scale(1);
    transform-origin: top center;
  }
  .products-page .product-image {
    height: 280px;
  }
  .products-page .product-name {

    height: 44px;
  }
}

/* 中等大屏幕 992px-1199px */
@media (max-width: 1199px) and (min-width: 992px) {
  .products-page .container {
    max-width: 992px;
    transform: scale(0.9);
    transform-origin: top center;
  }
  .products-page .product-image {
    height: 250px;
  }
  .products-page .product-name {

    height: 42px;
  }
  .products-page .product-grid {
    gap: 20px;
  }
}

/* 992px以下 - 平板和手机 */
@media (max-width: 991px) {
  .products-page .container {
    flex-direction: column;
    max-width: 100%;
    transform: none;
    margin: 20px auto;
    padding: 0 15px;
    height: auto;
  }
  
  .products-page .categories {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    padding: 15px;

    border-radius: 8px;
  }
  
  .products-page .categories .category:not(.all-products) {
    display: none;
  }
  
  .products-page .category {
    padding: 12px 20px;
    margin: 8px 0;

    text-align: center;
  }
  
  .products-page .products {
    padding: 20px 0;
    background: transparent;
    border-radius: 0;
    height: auto;
    min-height: auto;
  }
  
  .products-page .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .products-page .product-image {
    height: auto;
    aspect-ratio: 1;
  }
  
  .products-page .product-name {

    height: 40px;
  }
}

/* 768px以下 - 手机横屏 */
@media (max-width: 768px) {
  .products-page .product-info {
    padding: 12px;
  
  
  }
}


/* 576px以下 - 手机竖屏：保持两列布局 */