[Product Cards] Regression in visual appearance of product card shadows

[kjellr]

Describe the issue

Since #2372 and #2452, we've seen a regression in the layering of shadows for product cards.

Previously, shadows with a negative horizontal offset would always appear underneath product cards. With these updates however, these shadows appear on top of the cards next to them.

Dawn 9.0	Current

• This is because when "Reveal sections on scroll" is active, the cascading CSS animation basically establishes a new stacking order, in which each new card that appears overlaps the previous card.
• The problem also appears when the 3D hover effect is active, due to the z-index rule that's added there.

Demonstration:

01-08-7cr6d-v7nnq.mp4

[kjellr]

Brainstorming a couple possible solutions:

---

1. Apply our shadows to the parent wrapper (i.e. product-grid) instead of to the actual cards.

Some light prototyping shows that this would generally work, but that it would require a bunch of refactoring and testing. We'd have to use filter: drop-shadow() instead of box-shadow, in order for the shadow to appear correctly. drop-shadow() doesn't support a spread value, but we don't use one for these shadows today anyway.

There are some visual mockups of this approach over here.

---

2. Set descending z-index values for each cards as they get animated in.

We could try leveraging our existing --animation-order variable to set a descending z-index for each card. For example:

[data-cascade].scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
  z-index: calc(5 - var(--animation-order));
 }

(I used 5 there because that’s the max number of columns you can set for product cards.).

This seems to mostly work, though we’d also need to increase the z-index values used by the 3D Lift effect so they’re greater than 5. It also runs into issues when there are multiple rows of grid items. 😕