/* Productkaart → producthero. Native waar mogelijk, lichtgewicht fallback elders. */
@view-transition { navigation: auto; }

.single-product .woocommerce-product-gallery__image:first-child img {
  view-transition-name: cc-product-image;
}

::view-transition-group(cc-product-image) {
  z-index: 200;
  animation-duration: .52s;
  animation-timing-function: cubic-bezier(.2, .72, .2, 1);
}

::view-transition-old(cc-product-image),
::view-transition-new(cc-product-image) {
  height: 100%;
  object-fit: contain;
  mix-blend-mode: normal;
}

.cc-transition-clone {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 1rem 1rem rgba(15, 25, 19, .22));
  transition: transform .34s cubic-bezier(.2, .72, .2, 1), opacity .34s ease;
  will-change: transform, opacity;
}

body.cc-product-leaving::after {
  position: fixed;
  z-index: 990;
  inset: 0;
  opacity: 0;
  background: rgba(246, 247, 244, .7);
  content: "";
  pointer-events: none;
  transition: opacity .28s ease;
  backdrop-filter: blur(2px);
}

body.cc-product-leaving.cc-product-leaving--active::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .single-product .woocommerce-product-gallery__image:first-child img { view-transition-name: none; }
  .cc-transition-clone { display: none; }
}