/* ==========================================================================
   Reusable media lightbox (mlb-*)
   Namespaced separately from the storefront PDP lightbox (.pl-*) so the two
   never collide when both scripts are present on a page. Powers full-screen
   view + zoom/pan for images and full-screen playback for videos anywhere a
   listing's media is shown (QC screens, seller listing pages, etc.).
   ========================================================================== */

/* Clickable thumbnail wrapper */
.mlb-item {
    position: relative;
    display: block;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: .5rem;
    line-height: 0;
}
.mlb-item img,
.mlb-item video {
    display: block;
    width: 100%;
    transition: transform .18s ease;
}
.mlb-item:hover img,
.mlb-item:hover video { transform: scale(1.04); }
.mlb-item:focus-visible { outline: 2px solid var(--aw-primary, #0f766e); outline-offset: 2px; }

/* Play glyph over a video thumbnail */
.mlb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.6rem;
    pointer-events: none;
    background: rgba(0, 0, 0, .28);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.mlb-play::before {
    content: "";
    position: absolute;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
}
.mlb-play > span { position: relative; margin-inline-start: 3px; }

/* Overlay (built by media-lightbox.js) */
.mlb-overlay { position: fixed; inset: 0; z-index: 2050; background: rgba(15, 12, 14, .93); display: none; }
.mlb-overlay.open { display: block; }
.mlb-stage { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; touch-action: none; }
.mlb-img {
    max-width: 92vw; max-height: 88vh;
    transform-origin: center center;
    transition: transform .08s linear;
    user-select: none; -webkit-user-drag: none;
    cursor: grab; will-change: transform;
}
.mlb-img.grabbing { cursor: grabbing; }
.mlb-video { max-width: 92vw; max-height: 88vh; background: #000; border-radius: .35rem; outline: none; }

.mlb-close { position: absolute; top: 1rem; inset-inline-end: 1rem; z-index: 3; }
.mlb-controls {
    position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); z-index: 3;
    display: flex; align-items: center; gap: .4rem;
    background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px);
    border-radius: 999px; padding: .35rem;
}
.mlb-btn {
    width: 42px; height: 42px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.15rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.mlb-btn:hover { background: rgba(255, 255, 255, .28); }
.mlb-btn:disabled { opacity: .35; cursor: default; }
.mlb-count { color: rgba(255, 255, 255, .85); font-size: .85rem; font-weight: 600; padding: 0 .6rem; white-space: nowrap; }
.mlb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; }
.mlb-prev { inset-inline-start: 1rem; }
.mlb-next { inset-inline-end: 1rem; }

/* Zoom controls are irrelevant while a video is showing */
.mlb-overlay.is-video .mlb-zoom { display: none; }

@media (prefers-reduced-motion: reduce) {
    .mlb-item img, .mlb-item video, .mlb-img { transition: none; }
    .mlb-item:hover img, .mlb-item:hover video { transform: none; }
}