/* Small hover highlight on product & category boxes */

/* Centers the caption text for PhotoSwipe gallery images */
.pswp__caption__center {
  text-align: center !important;
}

/* Sets base styles for product and category items, enabling smooth transitions for hover/focus effects */
.products li.product,
.products li.product-category {
  position: relative; /* Ensures z-index works for layering during hover/focus */
  transition: transform .18s ease, box-shadow .18s ease; /* Smoothly animates lift and shadow changes */
}

/* Applies lift effect (move up and shadow) on hover and focus for devices with a mouse or precise pointer */
@media (hover:hover) and (pointer:fine) {
  .products li.product:has(.woocommerce-LoopProduct-link:hover, .button:hover, .added_to_cart:hover),
  .products li.product-category:has(a:hover) {
    transform: translateY(-4px); /* Moves item up 4px for a "lift" effect */
    box-shadow: 0 14px 34px rgba(0,0,0,.14), 0 3px 10px rgba(0,0,0,.05); /* Adds subtle shadow for depth */
    z-index: 2; /* Ensures hovered item appears above others */
  }

  .products li.product:focus-within,
  .products li.product-category:focus-within {
    transform: translateY(-4px); /* Moves item up 4px for a "lift" effect */
    box-shadow: 0 14px 34px rgba(0,0,0,.14), 0 3px 10px rgba(0,0,0,.05); /* Matches hover shadow for consistency */
    z-index: 2; /* Ensures focused item appears above others */
  }
}

/* Disables transitions for users who prefer reduced motion, improving accessibility */
@media (prefers-reduced-motion: reduce) {
  .products li.product,
  .products li.product-category {
    transition: none; /* Removes animations to respect user preference */
  }
}

/* Ensures no lift effect on touch devices, relying on browser default focus styles */
@media (hover: none) {
  .products li.product:focus-within,
  .products li.product-category:focus-within {
    transform: none; /* Prevents lift effect on touch devices */
    box-shadow: none; /* Removes shadow on touch devices */
    /* Browser default focus styles (e.g., outline) will apply for accessibility */
  }
}