/* Preserve the existing card/gallery geometry; animate only completed loads. */
.kg-home img.kg-image-arrived,
.kg-product-card img.kg-image-arrived {
  animation: kg-image-arrive 180ms ease-out;
}
@keyframes kg-image-arrive { from { opacity: .65; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  img.kg-image-arrived { animation: none !important; }
}

/* A reserved media slot is never visually empty while its real image is
   approaching the viewport. The image itself is not hidden or replaced. */
.kg-image-slot-pending {
  background-color: #f4f2ee;
  background-image: linear-gradient(110deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.7) 45%,rgba(255,255,255,0) 65%);
  background-size: 220% 100%;
  animation: kg-image-slot-pulse 1.5s ease-in-out infinite;
}
@keyframes kg-image-slot-pulse { to { background-position-x: -220%; } }
@media (prefers-reduced-motion: reduce) {
  .kg-image-slot-pending { animation: none; background-image: none; }
}

/* Match established layout slots. Decorative icons keep their own geometry. */
.kg-product-card__media img.attachment-woocommerce_thumbnail,
.kg-product-card__media img.wp-post-image,
.kg-product-card__media img.klc-card-gallery__img {
  aspect-ratio: var(--kg-product-ratio, 3 / 4);
}
.kg-home-category-card > span img,
.kg-home-editorial__media > img,
.kg-home-story-card--image > img {
  aspect-ratio: 1 / 1;
}
.kg-home-float-card__image > img {
  aspect-ratio: 3 / 4;
}