/**
 * 推荐产品区闪烁修复样式
 * 专门解决当带有打折标签的产品进入视口时触发的闪烁问题
 */

/* 强制禁用推荐产品区的所有动画和过渡效果 */
.featured-products-container,
.featured-products-container * {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
  backface-visibility: hidden !important;
  perspective: 1000px !important;
}

/* 重新启用必要的过渡效果 */
.featured-products-container .filter-tag {
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.featured-products-container .featured-product-card {
  transition: box-shadow 0.2s ease !important;
}

.featured-products-container .featured-product-card:hover {
  transform: none !important;
  animation: none !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

/* 特别针对标签按钮区的闪烁修复 */
.featured-products-container .featured-products-filters {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
  contain: layout style !important;
  isolation: isolate !important;
}

.featured-products-container .featured-products-filters .filter-tag {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
  contain: layout style !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* 禁用所有产品标签的动画 */
.featured-products-container .product-discount-badge,
.featured-products-container .product-new-badge,
.featured-products-container .product-popular-badge,
.featured-products-container [style*="position: absolute"] {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
  contain: layout style !important;
}

/* 禁用所有伪元素动画 */
.featured-products-container *::before,
.featured-products-container *::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  will-change: auto !important;
  display: none !important;
}

/* 强制重新定位标签，避免重叠 */
.featured-products-container .product-discount-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 100 !important;
  animation: none !important;
  transform: none !important;
  background: linear-gradient(135deg, #e83e8c, #6f42c1) !important;
}

.featured-products-container .product-new-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 90 !important;
  animation: none !important;
  transform: none !important;
  background: linear-gradient(135deg, #4e54c8, #8f94fb) !important;
}

.featured-products-container .product-popular-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 80 !important;
  animation: none !important;
  transform: translateY(35px) !important;
  background: linear-gradient(135deg, #ff4e00, #ec9f05) !important;
}

/* 推荐标签特殊处理 */
.featured-products-container div[style*="position: absolute"][style*="backgroundColor: rgb(80, 134, 193)"],
.featured-products-container div[style*="position: absolute"][style*="background-color: rgb(80, 134, 193)"],
.featured-products-container div[style*="backgroundColor:#5086c1"],
.featured-products-container div[style*="background-color:#5086c1"] {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 70 !important;
  animation: none !important;
  transform: translateY(70px) !important;
  background-color: #5086c1 !important;
}

/* 如果同时有折扣标签，推荐标签位置调整 */
.featured-products-container .featured-product-card:has(.product-discount-badge) div[style*="backgroundColor: rgb(80, 134, 193)"],
.featured-products-container .featured-product-card:has(.product-discount-badge) div[style*="background-color: rgb(80, 134, 193)"],
.featured-products-container .featured-product-card:has(.product-discount-badge) div[style*="backgroundColor:#5086c1"],
.featured-products-container .featured-product-card:has(.product-discount-badge) div[style*="background-color:#5086c1"] {
  transform: translateY(35px) !important;
}

/* 如果同时有折扣和推荐标签，爆款标签再向下 */
.featured-products-container .featured-product-card:has(.product-discount-badge):has(div[style*="backgroundColor: rgb(80, 134, 193)"]) .product-popular-badge,
.featured-products-container .featured-product-card:has(.product-discount-badge):has(div[style*="background-color: rgb(80, 134, 193)"]) .product-popular-badge,
.featured-products-container .featured-product-card:has(.product-discount-badge):has(div[style*="backgroundColor:#5086c1"]) .product-popular-badge,
.featured-products-container .featured-product-card:has(.product-discount-badge):has(div[style*="background-color:#5086c1"]) .product-popular-badge {
  transform: translateY(70px) !important;
}

/* 禁用图片加载动画 */
.featured-products-container img,
.featured-products-container .optimized-lazy-image,
.featured-products-container .product-image {
  animation: none !important;
  transition: opacity 0.2s ease !important;
  will-change: auto !important;
}

/* 禁用容器的transform */
.featured-products-container .featured-products-grid,
.featured-products-container .featured-product-item {
  transform: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
  contain: layout style !important;
}

/* 强制GPU加速，减少重绘 */
.featured-products-container {
  transform: translateZ(0) !important;
  will-change: auto !important;
  contain: layout style !important;
  isolation: isolate !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .featured-products-container .product-discount-badge,
  .featured-products-container .product-new-badge {
    top: 5px !important;
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
  }
  
  .featured-products-container .product-discount-badge {
    right: 5px !important;
  }
  
  .featured-products-container .product-new-badge {
    left: 5px !important;
  }
  
  .featured-products-container .product-popular-badge {
    top: 5px !important;
    right: 5px !important;
    transform: translateY(25px) !important;
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
  }
  
  .featured-products-container div[style*="backgroundColor: rgb(80, 134, 193)"],
  .featured-products-container div[style*="background-color: rgb(80, 134, 193)"],
  .featured-products-container div[style*="backgroundColor:#5086c1"],
  .featured-products-container div[style*="background-color:#5086c1"] {
    transform: translateY(50px) !important;
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
  }
}

/* 调试模式 */
.debug-featured-flicker .featured-products-container {
  outline: 3px solid red !important;
}

.debug-featured-flicker .featured-products-container .featured-product-card {
  outline: 2px dashed orange !important;
}

.debug-featured-flicker .featured-products-container [class*="badge"] {
  outline: 1px solid blue !important;
}

/* 强制禁用所有可能导致闪烁的CSS属性 */
.featured-products-container * {
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
  
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
  
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -o-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  
  will-change: auto !important;
  -webkit-will-change: auto !important;
  
  -webkit-backface-visibility: hidden !important;
  -moz-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  
  contain: layout style !important;
}

/* 重新启用必要的过渡效果 - 覆盖上面的通用规则 */
.featured-products-container .filter-tag {
  transition: background-color 0.2s ease, color 0.2s ease !important;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease !important;
  -moz-transition: background-color 0.2s ease, color 0.2s ease !important;
}

.featured-products-container .featured-product-card {
  transition: box-shadow 0.2s ease !important;
  -webkit-transition: box-shadow 0.2s ease !important;
  -moz-transition: box-shadow 0.2s ease !important;
}

.featured-products-container img,
.featured-products-container .optimized-lazy-image,
.featured-products-container .product-image {
  transition: opacity 0.2s ease !important;
  -webkit-transition: opacity 0.2s ease !important;
  -moz-transition: opacity 0.2s ease !important;
}

/* 确保购物车图标能够正常显示 */
.featured-products-container .fas.fa-shopping-cart,
.featured-products-container i.fas.fa-shopping-cart,
.featured-products-container button i.fas.fa-shopping-cart {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
