@tailwind base;
@tailwind components;
@tailwind utilities;
@import './icomoon/style.css';

/* Chỉ chuyển ảnh khi ảnh hover thứ hai đã tải thành công. */
.product-item.grid-type:hover .product-thumb .product-img:not(.has-hover-image) img:first-child,
.product-item.list-type .product-thumb:hover .product-img:not(.has-hover-image) img:first-child {
  opacity: 1 !important;
  visibility: visible !important;
}

.product-item.grid-type:hover .product-thumb .product-img:not(.has-hover-image) img:nth-child(2),
.product-item.list-type .product-thumb:hover .product-img:not(.has-hover-image) img:nth-child(2) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.product-item .product-thumb .product-img:not(.has-hover-image) img {
  transition: none !important;
}

/* Mobile: dùng chung cho mọi product card (Home, Shop, Related Products...). */
@media (max-width: 1023.98px) {
  .product-item .product-thumb .list-action,
  .product-item .product-thumb .quick-shop-block {
    display: none !important;
  }

  body:has(.shop-product) .breadcrumb-block {
    display: none !important;
  }
}

.product-item.grid-type .product-name,
.product-item.list-type .product-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}