/* PATCH_ID: b2c_image_stability_v1_20260709 */

.b2c-img-box,
.product-media,
.b2c-product-media-final,
.b2c-detail-safe-media,
.b2c-detail-hero-visual,
.chip-card,
.artist-card{
  position:relative;
}

.b2c-img-box::before,
.product-media::before,
.b2c-product-media-final::before,
.b2c-detail-safe-media::before,
.b2c-detail-hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(110deg,
      rgba(246,239,250,.72) 0%,
      rgba(255,255,255,.92) 36%,
      rgba(245,236,251,.76) 72%);
  background-size:240% 100%;
  animation:b2cImgSkeletonMoveV1 1.25s ease-in-out infinite;
  opacity:0;
  transition:opacity .22s ease;
}

.b2c-img-box:has(img.b2c-img-loading)::before,
.product-media:has(img.b2c-img-loading)::before,
.b2c-product-media-final:has(img.b2c-img-loading)::before,
.b2c-detail-safe-media:has(img.b2c-img-loading)::before,
.b2c-detail-hero-visual:has(img.b2c-img-loading)::before{
  opacity:1;
}

@keyframes b2cImgSkeletonMoveV1{
  0%{background-position:120% 0;}
  100%{background-position:-120% 0;}
}

img.b2c-img-managed{
  position:relative;
  z-index:1;
  transition:
    opacity .28s ease,
    filter .28s ease,
    transform .42s cubic-bezier(.22,.8,.2,1);
}

img.b2c-img-loading{
  opacity:.001;
}

img.b2c-img-loaded{
  opacity:1;
}

img.b2c-img-error{
  opacity:1;
  filter:saturate(.96) contrast(.98);
  object-fit:cover !important;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.8), transparent 34%),
    linear-gradient(135deg, #fbf7ff, #fff7fb);
}

/* prevent native broken image icon looking ugly before replacement */
img.b2c-img-error,
img[src^="data:image/svg+xml"]{
  color:transparent;
}

.b2c-img-fallback-mark{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:3;
  padding:6px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(70,56,84,.58);
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}

@media(prefers-reduced-motion: reduce){
  .b2c-img-box::before,
  .product-media::before,
  .b2c-product-media-final::before,
  .b2c-detail-safe-media::before,
  .b2c-detail-hero-visual::before{
    animation:none !important;
  }
}