.app-product-image {
  position: relative;
  isolation: isolate;
  background: #e5e5e5 !important;
}

.app-product-image::before {
  content: "CASAVA VOGUE";
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8b8b8b;
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 500;
  letter-spacing: .16em;
  text-align: center;
  transition: opacity .22s ease;
}

.app-product-image::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.38) 48%, transparent 66%);
  transform: translateX(-100%);
  animation: casava-product-placeholder 1.35s ease-in-out infinite;
  transition: opacity .22s ease;
}

.app-product-image img {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s ease, transform .25s ease;
}

.app-product-image.is-image-loaded img { opacity: 1; }
.app-product-image.is-image-loaded::before,
.app-product-image.is-image-loaded::after { opacity: 0; animation: none; }

@keyframes casava-product-placeholder {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .app-product-image::after { animation: none; }
  .app-product-image img { transition: none; }
}