/* S4G_CATALOG_V123_R1
   Missing-admin-image artwork is rendered on the media container itself.
   This intentionally uses pseudo-elements instead of child nodes because
   the legacy V65 media guard removes unknown children from product cards. */

.cat-visual.s4g-v123-fallback,
.catalog-unified-media.s4g-v123-fallback,
.catalog-folder-icon.s4g-v123-fallback,
.public-product-image.s4g-v123-fallback,
.product-media.s4g-v123-fallback,
.product-image.s4g-v123-fallback{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
  border-radius:inherit!important;
  background:
    radial-gradient(circle at 50% 43%,transparent 0 31%,rgba(244,200,98,.98) 31.5% 32.35%,transparent 32.9%),
    radial-gradient(ellipse 48% 12% at 50% 59%,transparent 0 84%,rgba(78,202,255,.98) 85.5% 88%,rgba(92,92,255,.94) 90%,transparent 92%),
    radial-gradient(circle at 50% 42%,rgba(31,97,202,.26),transparent 45%),
    linear-gradient(145deg,#071d49 0%,#061737 47%,#020a19 100%)!important;
  border:1px solid rgba(48,126,255,.38)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 -28px 52px rgba(0,0,0,.23),
    0 0 14px rgba(34,112,255,.10)!important;
}

/* Main name box. No DOM child = legacy media sanitizers cannot delete it. */
.cat-visual.s4g-v123-fallback::before,
.catalog-unified-media.s4g-v123-fallback::before,
.catalog-folder-icon.s4g-v123-fallback::before,
.public-product-image.s4g-v123-fallback::before,
.product-media.s4g-v123-fallback::before,
.product-image.s4g-v123-fallback::before{
  content:attr(data-s4g-v123-name)!important;
  position:absolute!important;
  z-index:8!important;
  left:17%!important;
  right:17%!important;
  top:34%!important;
  min-height:29%!important;
  box-sizing:border-box!important;
  padding:7px 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  color:#fff!important;
  font-family:inherit!important;
  font-size:clamp(9px,2.45vw,17px)!important;
  font-weight:1000!important;
  line-height:1.16!important;
  direction:auto!important;
  unicode-bidi:plaintext!important;
  border-radius:13px!important;
  border:1px solid rgba(82,144,255,.54)!important;
  background:linear-gradient(145deg,rgba(7,29,69,.98),rgba(5,18,44,.98))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.06),0 0 12px rgba(37,118,255,.10)!important;
  text-shadow:0 2px 8px rgba(0,0,0,.54)!important;
}

/* Small name inside the artwork, matching the old working placeholder. */
.cat-visual.s4g-v123-fallback::after,
.catalog-unified-media.s4g-v123-fallback::after,
.catalog-folder-icon.s4g-v123-fallback::after,
.public-product-image.s4g-v123-fallback::after,
.product-media.s4g-v123-fallback::after,
.product-image.s4g-v123-fallback::after{
  content:attr(data-s4g-v123-name)!important;
  position:absolute!important;
  z-index:8!important;
  left:7%!important;
  right:7%!important;
  bottom:7%!important;
  height:auto!important;
  background:none!important;
  border:0!important;
  transform:none!important;
  filter:none!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  color:rgba(255,255,255,.96)!important;
  font-family:inherit!important;
  font-size:clamp(6px,1.58vw,10px)!important;
  font-weight:900!important;
  line-height:1.2!important;
  direction:auto!important;
  unicode-bidi:plaintext!important;
  text-shadow:0 2px 7px rgba(0,0,0,.55)!important;
  pointer-events:none!important;
}

/* Existing provider/icon/name-cover fallbacks are hidden only when V123 is active. */
.s4g-v123-fallback > .cat-icon,
.s4g-v123-fallback > .catalog-unified-fallback,
.s4g-v123-fallback > .s4g-v39-name-cover,
.s4g-v123-fallback > .s4g-v122-name-cover{
  display:none!important;
}

/* A real successfully loaded admin image always wins. */
.s4g-v123-has-admin-image::before,
.s4g-v123-has-admin-image::after{
  content:none!important;
  display:none!important;
}

@media (max-width:420px){
  .cat-visual.s4g-v123-fallback::before,
  .catalog-unified-media.s4g-v123-fallback::before{
    left:15%!important;
    right:15%!important;
    font-size:clamp(9px,3.05vw,14px)!important;
  }
}