/*
 * PepPaws image quality layer
 * Prevents low-resolution placeholder assets from being stretched beyond their
 * intrinsic bitmap size. High-resolution replacement assets keep the original
 * layout rules (cover/contain) and therefore fill their slots normally.
 */

img {
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}

/* Images detected as being enlarged beyond their source bitmap are never
   upscaled. `scale-down` behaves like contain, but will not enlarge a source. */
img.peppaws-image--upscaled {
  object-fit: scale-down !important;
  object-position: center !important;
  transform: none !important;
}

/* Keep the surrounding slot attractive when a temporary source is too small. */
.pet-catalog-hero__media:has(> img.peppaws-image--upscaled),
.dog-food-hero__media:has(> img.peppaws-image--upscaled),
.need-cover__media:has(> img.peppaws-image--upscaled),
.food-type-card__visual:has(> img.peppaws-image--upscaled),
.food-product-card__media:has(img.peppaws-image--upscaled),
.main-image:has(> img.peppaws-image--upscaled),
.thumbnail:has(img.peppaws-image--upscaled),
.product-card__image:has(img.peppaws-image--upscaled),
.product-bundle-card__image:has(img.peppaws-image--upscaled) {
  background-color: #f7fafc;
}

/* The temporary image should not be zoomed on hover: zooming a bitmap that is
   already short of pixels makes the blur more obvious. */
.food-type-card:hover img.peppaws-image--upscaled,
.food-product-card:hover img.peppaws-image--upscaled,
.need-card:hover img.peppaws-image--upscaled,
.tiktok-product-card:hover img.peppaws-image--upscaled,
.main-image:hover img.peppaws-image--upscaled {
  transform: none !important;
}

/* Product photography is given a neutral canvas when the source cannot safely
   fill the complete frame. Future high-resolution photography is unaffected. */
.main-image:has(> img.peppaws-image--upscaled),
.food-product-card__media:has(img.peppaws-image--upscaled),
.product-card__image:has(img.peppaws-image--upscaled),
.product-bundle-card__image:has(img.peppaws-image--upscaled) {
  background-image: linear-gradient(145deg, #ffffff, #f5f8fb);
}

/* Avoid distortion in the reference hero. The former `fill` mode could stretch
   an image independently on each axis. */
.is-dog-food-catalog .dog-food-reference-hero .dog-food-hero__media img {
  object-fit: cover;
}

/* Full-bleed hero slots retain their design when the source is large enough;
   low-resolution temporary assets switch automatically to scale-down above. */
.pet-catalog-hero__media img,
.dog-food-hero__media img,
.need-cover__image,
.food-type-card__visual img,
.food-product-card__media img,
.main-image img,
.thumbnail img {
  image-rendering: auto;
}

/* A source may be large enough for 1x screens but not for high-density displays.
   We do not resize it (which would alter layout); the class is kept as a hook for
   diagnostics and future asset replacement. */
img.peppaws-image--retina-limited {
  image-rendering: auto;
}

@media (prefers-reduced-motion: reduce) {
  .food-type-card__visual img,
  .food-product-card__media img,
  .main-image img,
  .need-card__image img,
  .tiktok-product-card__media img {
    transition: none !important;
  }
}

/* v16.200 — Excepción controlada para las miniaturas demo de Paseo en móvil.
   Estas imágenes temporales son pequeñas, pero el listado necesita que el
   producto tenga presencia visual. El escalado se limita a este componente. */
@media (max-width: 620px) {
  body[data-page="products"].is-dog-walk-catalog .food-product-card__media img.peppaws-image--upscaled {
    object-fit: contain !important;
    object-position: center !important;
    transform: scale(1.14) !important;
    transform-origin: center center !important;
  }

  body[data-page="products"].is-dog-walk-catalog .food-product-card__media:has(img.peppaws-image--upscaled) {
    background-color: #ffffff;
    background-image: none;
  }
}