/* 基础重置：统一盒模型，消除默认边距导致的偏移 */
.glite-hot-products,
.glite-hot-products * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.glite-hot-products {
  padding: 40px 0;
  background: #fff;
  /* 固定最小宽度，防止极端小屏幕布局崩溃 */
  min-width: 320px;
  margin: 0 auto;
}

.glite-hot-products .title {
  text-align: center;
  margin-bottom: 20px; 
}

.glite-hot-products .title h3 {
  font-size: clamp(28px, 3vw, 40px); 
  
  color: #000;
  letter-spacing: 1px;
  text-align: center;
  font-weight: 600;
  
  line-height: 1.4;
}

.glite-hot-products .title p {
  font-size: 18px;
  color: #0a0a0a;
  margin: 28px 0 0;
}

.glite-hot-products .title .more {
  margin: 55px 0 0;
  display: inline-block;
  width: clamp(150px, 12vw, 190px); /* 响应式宽度，替代多断点修改 */
  height: clamp(40px, 3vw, 50px); /* 响应式高度 */
  line-height: clamp(40px, 3vw, 50px); /* 行高与高度一致，垂直居中 */
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--button-radius);
  font-size: clamp(16px, 1.2vw, 18px); /* 响应式字体 */
  text-align: center; /* 文字居中，避免偏移 */
  transition: all 0.3s ease; /* 平滑过渡，消除hover跳动 */
  border: 1px solid transparent; /* 预占边框空间，hover时无偏移 */
}

.glite-hot-products .title .more:hover {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* 产品列表：Flex布局优化，防止换行偏移 */
.glite-hot-products ul {
  margin: 60px 0 0;
  display: flex;
  flex-wrap: wrap;
  /* 消除列表默认样式 */
  list-style: none;
  /* 防止子元素溢出 */
  overflow: hidden;
}

/* 产品项：响应式宽度，统一断点 */
.glite-hot-products ul li {
  /* 桌面端3列 */
  width: 33.33333333%;
  /* 防止宽度计算错误 */
  flex: 0 0 33.33333333%;
  /* 固定最小高度，防止内容塌陷 */
  min-height: 300px;
}

.glite-hot-products ul li a {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* 继承父元素高度，防止内容溢出 */
  height: 100%;
}

.glite-hot-products ul li .pic {
  position: relative;
  /* 图片容器占满父元素，防止高度塌陷 */
  width: 100%;
  height: 100%;
}

.glite-hot-products ul li .pic img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* 硬件加速，优化动画 */
  will-change: opacity;
  transition: opacity 0.5s ease;
}

.glite-hot-products ul li .pic img:last-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* 预加载优化，避免hover时加载延迟 */
  backface-visibility: hidden;
}

/* 交互按钮容器：固定占位，消除hover偏移 */
.glite-hot-products ul li .fun-btn {
  position: absolute;
  background: rgba(3, 3, 3, 1);
  z-index: 10;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 10%;
  transition: all 0.5s ease;
  opacity: 0;
  /* 固定布局，防止子元素偏移 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  /* 关键：hover前不可见且不占位，消除偏移 */
  visibility: hidden;
}

.glite-hot-products ul li .fun-btn .add {
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  font-size: 32px;
  line-height: 50px;
  text-align: center;
  /* 防止按钮偏移 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.glite-hot-products ul li .fun-btn img {
  display: inline-block;
  transition: all 0.5s ease;
  opacity: 0;
  transform: translateY(10px);
  /* 硬件加速 */
  will-change: transform, opacity;
}

.glite-hot-products ul li .fun-btn h5 {
  font-size: clamp(20px, 1.5vw, 24px);
  color: #fff;
  margin: 50px 0 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
  opacity: 0;
  will-change: transform, opacity;
}

.glite-hot-products ul li .fun-btn p {
  font-size: 16px;
  color: #fff;
  line-height: 24px;
  margin: 10px 0 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
  opacity: 0;
  will-change: transform, opacity;
}

/* 桌面端hover效果：平滑过渡，无偏移 */
@media screen and (min-width: 768px) {
  .glite-hot-products ul li:hover .pic img:last-child {
    opacity: 1;
  }
  
  .glite-hot-products ul li:hover .fun-btn {
    opacity: 1;
    background: rgba(3, 3, 3, 0.53);
    /* hover时显示并占位 */
    visibility: visible;
  }
  
  .glite-hot-products ul li:hover .fun-btn h5,
  .glite-hot-products ul li:hover .fun-btn p,
  .glite-hot-products ul li:hover .fun-btn img {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 平板端：2列布局，统一断点 */
@media screen and (min-width: 768px) and (max-width: 992px) {
  .glite-hot-products ul li {
    width: 50%;
    flex: 0 0 50%;
    min-height: 250px;
  }
}

/* 移动端：1列布局，重构交互样式 */
@media screen and (max-width: 767px) {
  .glite-hot-products {
    padding: clamp(20px, 5vw, 30px) clamp(10px, 3vw, 20px);
  }
  
  .glite-hot-products .title h3 {
    font-size: 26px;
  }
  
  .glite-hot-products .title .more {
    margin: 20px 0 0;
  }
  
  .glite-hot-products ul {
    margin: 30px 0 0; /* 减少间距，避免空白 */
  }
  
  .glite-hot-products ul li {
    width: 100%;
    flex: 0 0 100%;
    min-height: 200px;
    margin-bottom: 15px; /* 增加项间距，提升可读性 */
  }
  
  /* 移动端重构交互按钮，消除定位冲突 */
  .glite-hot-products ul li .fun-btn {
    position: static;
    background: #fff;
    padding: 10px 0;
    opacity: 1;
    visibility: visible;
    display: block;
    height: auto; /* 自适应高度，防止塌陷 */
  }
  
  .glite-hot-products ul li .fun-btn img,
  .glite-hot-products ul li .fun-btn p {
    display: none;
  }
  
  .glite-hot-products ul li .fun-btn h5 {
    font-size: clamp(18px, 2vw, 20px);
    color: #333;
    margin: 0;
    transform: translateY(0);
    opacity: 1;
  }
  
  /* 移动端隐藏hover切换的图片 */
  .glite-hot-products ul li .pic img:last-child {
    display: none;
  }
}

/* 精简断点：只保留关键尺寸，避免过度细分 */
@media screen and (max-width: 992px) {
  .glite-hot-products .title h3 {
    font-size: 28px;
  }
  
  .glite-hot-products ul li .fun-btn h5 {
    margin: 30px 0 0;
  }
}

@media screen and (max-width: 480px) {
  .glite-hot-products {
    padding: 20px 20px;
  }
}