/* Product cards: the cutaway fades in on hover or keyboard focus (Chris, 2026-10-25; same as the GD-MD hub).
   Touch screens have no hover, so they keep the main image and tapping opens the product.
   The cross-section image is decorative (empty alt): the card already names the product. */
.card-hover { position: relative; display: block; }
.card-hover > img { display: block; }
.card-hover > .card-cutaway {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: contain; opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
@media (hover: hover) { a:hover .card-hover > .card-cutaway { opacity: 1; } }
a:focus-visible .card-hover > .card-cutaway { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .card-hover > .card-cutaway { transition: none; } }