/* Custom Enhancements for Hero Swiper & Hover matching original website */

/* 1. Ensure Swiper slide content doesn't break hover interaction */
.hero-swiper .swiper-slide {
  pointer-events: auto !important;
}

/* 2. 'Chọn trái cây' and primary CTA buttons hover */
.home-button.bg-\[\#173a2d\]:hover,
.home-button.hover\:bg-\[\#d9572f\]:hover {
  background-color: #d9572f !important;
  color: #fffaf1 !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(23, 58, 45, 0.22);
}

/* 3. 'Xem giỏ quà' and secondary buttons hover */
.home-button.hover\:border-\[\#d9572f\]:hover,
.home-button.hover\:bg-\[\#fffaf1\]:hover {
  border-color: #d9572f !important;
  background-color: #fffaf1 !important;
  color: #d9572f !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(23, 58, 45, 0.16);
}

/* 4. Arrow icon translation on button hover */
.home-button.group:hover svg {
  transform: translateX(4px) !important;
}

/* 5. Smooth transitions */
.home-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 6. Fix image container and prevent unintended overflow masking */
.hero-swiper .swiper-slide img {
  pointer-events: auto;
}

/* 7. Hide 'Thêm vào giỏ' button entirely as requested across all product cards */
button[aria-label*="vào giỏ"],
button[aria-label*="Thêm vào giỏ"] {
  display: none !important;
}

/* 8. Fix product images opacity on static cards */
.aspect-\[1\/1\.06\] img,
.aspect-\[4\/5\] img,
[class*="aspect-"] img {
  opacity: 1 !important;
}

/* Hide skeleton placeholder once loaded */
.animate-pulse {
  display: none !important;
}