/**
 * 推荐产品区购物车图标修复样式
 * 专门解决推荐产品区购物车按钮图标不显示的问题
 */

/* 确保推荐产品区的购物车图标能够正常显示 */
.featured-products-container .fas.fa-shopping-cart,
.featured-products-container i.fas.fa-shopping-cart,
.featured-products-container button i.fas.fa-shopping-cart,
.featured-products-container .featured-product-card .fas.fa-shopping-cart,
.featured-products-container .featured-product-card i.fas.fa-shopping-cart,
.featured-products-container .featured-product-card button i.fas.fa-shopping-cart {
  /* 强制显示图标 */
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  /* 确保Font Awesome字体正确加载 */
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !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;
  
  /* 确保图标大小和颜色 */
  font-size: 1.1em !important;
  color: inherit !important;
  
  /* 确保图标位置正确 */
  position: relative !important;
  z-index: 1 !important;
  
  /* 覆盖可能的transform限制 */
  transform: none !important;
  
  /* 确保图标内容正确 */
  content: "\f07a" !important;
}

/* 确保购物车按钮本身的样式正确 */
.featured-products-container button:last-child,
.featured-products-container .featured-product-card button:last-child {
  /* 确保按钮可见 */
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  /* 确保按钮布局正确 */
  align-items: center !important;
  justify-content: center !important;
  
  /* 确保按钮颜色正确 */
  background-color: #5086c1 !important;
  color: #ffffff !important;
  
  /* 确保按钮大小正确 */
  width: 48% !important;
  height: auto !important;
  padding: 10px 0 !important;
  
  /* 确保按钮边框和圆角 */
  border: none !important;
  border-radius: 8px !important;
  
  /* 确保按钮可点击 */
  cursor: pointer !important;
  pointer-events: auto !important;
  
  /* 确保按钮位置正确 */
  position: relative !important;
  z-index: 10 !important;
}

/* 移动端特殊处理 */
@media (max-width: 768px) {
  .featured-products-container .fas.fa-shopping-cart,
  .featured-products-container i.fas.fa-shopping-cart,
  .featured-products-container button i.fas.fa-shopping-cart {
    font-size: 1.0em !important;
  }
  
  .featured-products-container button:last-child,
  .featured-products-container .featured-product-card button:last-child {
    padding: 8px 0 !important;
    font-size: 0.75rem !important;
  }
}

/* 确保Font Awesome图标的伪元素正确显示 */
.featured-products-container .fas.fa-shopping-cart::before,
.featured-products-container i.fas.fa-shopping-cart::before,
.featured-products-container button i.fas.fa-shopping-cart::before {
  content: "\f07a" !important;
  display: inline-block !important;
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 调试模式 - 可以通过添加debug-cart-icons类到body来启用 */
.debug-cart-icons .featured-products-container button:last-child {
  outline: 2px solid red !important;
  background-color: yellow !important;
  color: black !important;
}

.debug-cart-icons .featured-products-container .fas.fa-shopping-cart {
  outline: 1px solid blue !important;
  background-color: lime !important;
}