/* Unique Mini heroes: seller photo is always replaceable.
   CSS art is fallback only. Empty well stays a clickable frame. */

body.sg-mini-store .b2h-hero .ml-home-hero-media,
body.sg-mini-store .b7-hero .ml-home-hero-media,
body.sg-mini-store .b8-hero .ml-home-hero-media,
body.sg-mini-store .b2h-hero .ml-home-hero-media-frame,
body.sg-mini-store .b7-hero .ml-home-hero-media-frame,
body.sg-mini-store .b8-hero .ml-home-hero-media-frame,
body.sg-mini-store .b2h-hero .ml-home-hero-media:has(.ml-home-hero-media-img.is-empty),
body.sg-mini-store .b7-hero .ml-home-hero-media:has(.ml-home-hero-media-img.is-empty),
body.sg-mini-store .b8-hero .ml-home-hero-media:has(.ml-home-hero-media-img.is-empty),
body.sg-mini-store .b2h-hero .ml-home-hero-media:has(.ml-home-hero-media-img:not([src])),
body.sg-mini-store .b7-hero .ml-home-hero-media:has(.ml-home-hero-media-img:not([src])),
body.sg-mini-store .b8-hero .ml-home-hero-media:has(.ml-home-hero-media-img:not([src])),
body.sg-mini-store .b2h-hero .ml-home-hero-media:has(.ml-home-hero-media-img[src=""]),
body.sg-mini-store .b7-hero .ml-home-hero-media:has(.ml-home-hero-media-img[src=""]),
body.sg-mini-store .b8-hero .ml-home-hero-media:has(.ml-home-hero-media-img[src=""]) {
  pointer-events: auto !important;
  z-index: 9 !important;
}

body.sg-mini-store .b2h-hero .ml-home-hero-media-img,
body.sg-mini-store .b7-hero .ml-home-hero-media-img,
body.sg-mini-store .b8-hero .ml-home-hero-media-img {
  pointer-events: auto !important;
}

body.sg-mini-store .b2h-hero .ml-home-hero-media-img.is-empty,
body.sg-mini-store .b7-hero .ml-home-hero-media-img.is-empty,
body.sg-mini-store .b8-hero .ml-home-hero-media-img.is-empty,
body.sg-mini-store .b2h-hero .ml-home-hero-media-img.is-empty:not([src]),
body.sg-mini-store .b7-hero .ml-home-hero-media-img.is-empty:not([src]),
body.sg-mini-store .b8-hero .ml-home-hero-media-img.is-empty:not([src]),
body.sg-mini-store .b2h-hero .ml-home-hero-media-img.is-empty[src=""],
body.sg-mini-store .b7-hero .ml-home-hero-media-img.is-empty[src=""],
body.sg-mini-store .b8-hero .ml-home-hero-media-img.is-empty[src=""],
body.sg-mini-store .b2h-hero .ml-home-hero-media-img:not([src]),
body.sg-mini-store .b7-hero .ml-home-hero-media-img:not([src]),
body.sg-mini-store .b8-hero .ml-home-hero-media-img:not([src]) {
  display: block !important;
  opacity: 0 !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 200px !important;
  cursor: pointer !important;
}

body.sg-mini-store .b2h-hero .ml-home-hero-media-img[src]:not(.is-empty):not([src=""]),
body.sg-mini-store .b7-hero .ml-home-hero-media-img[src]:not(.is-empty):not([src=""]),
body.sg-mini-store .b8-hero .ml-home-hero-media-img[src]:not(.is-empty):not([src=""]) {
  display: block !important;
  opacity: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.sg-mini-store .b2h-hero:has(.ml-home-hero-media-img[src]:not(.is-empty):not([src=""])) .b2h-shoe,
body.sg-mini-store .b2h-hero:has(.ml-home-hero-media-img[src]:not(.is-empty):not([src=""])) .b2h-bag,
body.sg-mini-store .b7-hero:has(.ml-home-hero-media-img[src]:not(.is-empty):not([src=""])) .b7-obj,
body.sg-mini-store .b8-hero:has(.ml-home-hero-media-img[src]:not(.is-empty):not([src=""])) .b8-obj {
  opacity: 0;
  pointer-events: none;
}

body.store-editor-on.sg-mini-store .b2h-hero .ml-home-hero-media-frame,
body.store-editor-on.sg-mini-store .b7-hero .ml-home-hero-media-frame,
body.store-editor-on.sg-mini-store .b8-hero .ml-home-hero-media-frame {
  outline: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
  min-width: 200px;
  min-height: 220px;
}

body.store-editor-on.sg-mini-store .b2h-hero .se-img-overlay,
body.store-editor-on.sg-mini-store .b7-hero .se-img-overlay,
body.store-editor-on.sg-mini-store .b8-hero .se-img-overlay,
body.store-editor-on.sg-mini-store .b2h-hero .ml-home-hero-media-frame:has(.is-empty) .se-img-overlay,
body.store-editor-on.sg-mini-store .b7-hero .ml-home-hero-media-frame:has(.is-empty) .se-img-overlay,
body.store-editor-on.sg-mini-store .b8-hero .ml-home-hero-media-frame:has(.is-empty) .se-img-overlay {
  display: flex !important;
  pointer-events: auto !important;
  z-index: 40 !important;
  inset: auto 10px 10px auto !important;
  width: auto;
  height: auto;
  background: none !important;
}

body.store-editor-on.sg-mini-store .b2h-hero .ml-home-hero-media-frame:has(.is-empty)::after,
body.store-editor-on.sg-mini-store .b7-hero .ml-home-hero-media-frame:has(.is-empty)::after,
body.store-editor-on.sg-mini-store .b8-hero .ml-home-hero-media-frame:has(.is-empty)::after,
body.store-editor-on.sg-mini-store .b2h-hero .ml-home-hero-media-frame:has(img:not([src]))::after,
body.store-editor-on.sg-mini-store .b7-hero .ml-home-hero-media-frame:has(img:not([src]))::after,
body.store-editor-on.sg-mini-store .b8-hero .ml-home-hero-media-frame:has(img:not([src]))::after {
  content: "Change photo";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  body.sg-mini-store .b8-hero * { animation: none !important; }
}