/* fix-hover-shift.css
   High-specificity overrides to prevent layout shifts when hovering product cards.
   Ensures overlays (badges, wishlist/compare, quick buttons) animate with
   transform/opacity only and neutralizes margin/padding/top changes from
   compiled/base styles that cause visual jitter.
*/

/* Prevent parent hover from changing layout (margin/padding) */
.products-grid .product-item-info:hover,
.products-grid .product-item-info.active {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 9 !important;
}

/* Prevent the image container from being nudged on hover */
.products-grid .product-item-info:hover .product-item-photo,
.products-grid .product-item-info.active .product-item-photo,
.sidebar .products-grid .product-item-info:hover .product-item-photo,
.sidebar .products-grid .product-item-info.active .product-item-photo {
  left: 0 !important;
  top: 0 !important;
  transform: translateZ(0) !important;
}

/* Neutralize action list margin changes from base styles */
.products-grid .product-item-actions,
.products-grid .product-item-actions .action {
  margin: 0 !important;
}

/* Ensure overlays animate with transform/opacity only (GPU-accelerated)
   and avoid reflow causing the perceived jump */
.product-item-photo .similar-product-btn,
.product-item-photo .product-badges,
.product-item-photo .actions-secondary {
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;

}

/* If any module/theme rule is still more specific, this selector is deliberately
   broad but uses !important to ensure it wins without altering visual design.
*/