/* FIX186 — Storefront Product Image Polish */

body.sp-ios-home .product-card{
  border-radius:20px!important;
  box-shadow:0 8px 26px rgba(15,23,42,.05)!important;
}

body.sp-ios-home .product-card .card-media{
  position:relative!important;
  isolation:isolate!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  aspect-ratio:3 / 4!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:14px!important;
  border-bottom:1px solid rgba(15,23,42,.05)!important;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.96), rgba(255,255,255,.78) 36%, rgba(250,251,253,.96) 100%)!important;
}

body.sp-ios-home .product-card .card-media::before{
  content:""!important;
  position:absolute!important;
  inset:12px!important;
  z-index:0!important;
  border-radius:18px!important;
  border:1px solid rgba(15,23,42,.05)!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 8px 24px rgba(148,163,184,.08)!important;
}

body.sp-ios-home .product-card .card-media::after{
  content:""!important;
  position:absolute!important;
  inset:12px!important;
  z-index:0!important;
  border-radius:18px!important;
  pointer-events:none!important;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0))!important;
}

body.sp-ios-home .product-card .badges-top,
body.sp-ios-home .product-card .badges-bottom{
  z-index:4!important;
}

body.sp-ios-home .product-card .card-media > img{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  margin:0 auto!important;
  background:transparent!important;
  filter:drop-shadow(0 10px 20px rgba(15,23,42,.12))!important;
  transform:translateZ(0) scale(.985)!important;
  transition:transform .26s ease, opacity .22s ease, filter .26s ease!important;
  opacity:0!important;
}

body.sp-ios-home .product-card .card-media[data-sp186-loaded="1"] > img{
  opacity:1!important;
}

body.sp-ios-home .product-card:hover .card-media > img{
  transform:translateZ(0) scale(1)!important;
  filter:drop-shadow(0 14px 28px rgba(15,23,42,.15))!important;
}

body.sp-ios-home .product-card .card-media[data-sp186-shape="portrait"] > img{
  max-width:82%!important;
  max-height:100%!important;
}

body.sp-ios-home .product-card .card-media[data-sp186-shape="square"] > img{
  max-width:88%!important;
  max-height:88%!important;
}

body.sp-ios-home .product-card .card-media[data-sp186-shape="landscape"] > img{
  max-width:100%!important;
  max-height:78%!important;
}

body.sp-ios-home .product-card .card-media[data-sp186-broken="1"] > img{
  display:none!important;
}

body.sp-ios-home .product-card .card-media[data-sp186-broken="1"]::before{
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)!important;
  border:1px dashed rgba(148,163,184,.45)!important;
  box-shadow:none!important;
}

body.sp-ios-home .product-card .card-media[data-sp186-broken="1"] .sp186-placeholder{
  position:relative!important;
  z-index:3!important;
  width:min(78%,180px)!important;
  max-width:180px!important;
  aspect-ratio:3 / 4!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:18px 14px!important;
  border-radius:16px!important;
  border:1px solid rgba(148,163,184,.25)!important;
  background:linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%)!important;
  box-shadow:0 10px 24px rgba(148,163,184,.10)!important;
  text-align:center!important;
}

body.sp-ios-home .product-card .card-media[data-sp186-broken="1"] .sp186-placeholder-icon{
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#f36b2d!important;
  font-size:24px!important;
  font-weight:900!important;
  box-shadow:0 6px 14px rgba(243,107,45,.12)!important;
}

body.sp-ios-home .product-card .card-media[data-sp186-broken="1"] .sp186-placeholder-label{
  color:#1f2937!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1.5!important;
  display:-webkit-box!important;
  overflow:hidden!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
}

body.sp-ios-home .product-card .card-media[data-sp186-loading="1"] .sp186-skeleton{
  position:absolute!important;
  inset:12px!important;
  z-index:1!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:linear-gradient(90deg,#f3f6fa 20%, #ffffff 38%, #f3f6fa 56%)!important;
  background-size:200% 100%!important;
  animation:sp186Shimmer 1.25s linear infinite!important;
}

body.sp-ios-home .product-card .card-media[data-sp186-loaded="1"] .sp186-skeleton,
body.sp-ios-home .product-card .card-media[data-sp186-broken="1"] .sp186-skeleton{
  display:none!important;
}

@keyframes sp186Shimmer{{
  0% {{ background-position:200% 0; }}
  100% {{ background-position:-200% 0; }}
}}

@media (max-width:599px){{
  body.sp-ios-home .product-card{{
    border-radius:16px!important;
    box-shadow:0 6px 20px rgba(15,23,42,.045)!important;
  }}

  body.sp-ios-home .product-card .card-media{{
    aspect-ratio:3 / 4.25!important;
    padding:10px!important;
  }}

  body.sp-ios-home .product-card .card-media::before,
  body.sp-ios-home .product-card .card-media::after,
  body.sp-ios-home .product-card .card-media[data-sp186-loading="1"] .sp186-skeleton{{
    inset:9px!important;
    border-radius:14px!important;
  }}

  body.sp-ios-home .product-card .card-media[data-sp186-shape="portrait"] > img{{
    max-width:86%!important;
  }}

  body.sp-ios-home .product-card .card-media[data-sp186-shape="square"] > img{{
    max-width:90%!important;
    max-height:90%!important;
  }}

  body.sp-ios-home .product-card .card-media[data-sp186-shape="landscape"] > img{{
    max-height:74%!important;
  }}

  body.sp-ios-home .product-card .card-media[data-sp186-broken="1"] .sp186-placeholder{{
    width:min(84%,140px)!important;
    padding:14px 12px!important;
    border-radius:14px!important;
  }}

  body.sp-ios-home .product-card .card-media[data-sp186-broken="1"] .sp186-placeholder-label{{
    font-size:10.5px!important;
  }}
}}