/**
 * SBAIMedia — shared styles for the media wrapper, the magnifier
 * affordance and the lightbox (S12-O28), loaded on BOTH customer
 * surfaces (product page + My Account) as a dependency of their own
 * stylesheets. One implementation — never duplicated per surface.
 */

/* Positioned wrapper so overlays (zoom, per-surface spinners) can sit
   over the image. */
.sbai-media {
  position: relative;
}

/* The enlargement affordance — invisible until the media is hovered or
   the control focused; subtly persistent on touch devices (no hover
   there); hidden entirely while no blob exists (a dead zoom button is
   worse than none). */
.sbai-media__zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(20 20 20 / 62%);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sbai-media:hover .sbai-media__zoom,
.sbai-media__zoom:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .sbai-media__zoom {
    opacity: 0.65;
  }
}

.sbai-media__zoom[disabled] {
  display: none;
}

/* Re-develop (§4.3, 2026-08-10) — the shared control on both surfaces:
   dice glyph + label, quiet outline treatment that deliberately does NOT
   resemble the Retake pill family's weight. Hidden (display:none via
   [hidden]) unless the selected Look carries a phrase pool. */
.sbai-redevelop {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1.5px dashed #5a5a5a;
  border-radius: 8px;
  background: transparent;
  color: #2a2a2a;
  font-size: 0.8em;
  font-weight: 600;
  cursor: pointer;
}

.sbai-redevelop:hover,
.sbai-redevelop:focus-visible {
  border-color: #141414;
  color: #141414;
}

.sbai-redevelop[hidden] {
  display: none;
}

/* Screen-reader-only text (the Re-develop tooltip's accessible copy). */
.sbai-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The lightbox — a dim full-viewport backdrop, the current render
   contained inside it, dismissible by Esc, backdrop, or the close
   control; small Download/Share controls share the top-right bar. */
.sbai-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 4vw;
  background: rgb(0 0 0 / 84%);
}

.sbai-lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.sbai-lightbox__bar {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sbai-lightbox__action {
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 16%);
  color: #fff;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
}

.sbai-lightbox__close {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.4em;
  line-height: 1;
}