/**
 * Catalog lot-card image gallery (Settings -> Features -> "Browse lot images
 * in the catalog"). Only loaded when the option is on.
 *
 * Sits inside the existing .bp-lot__wrp-image box and reuses .bp-lot__image for
 * each slide, so slide sizing is inherited from the theme's own card styles and
 * the card's height never changes.
 */

/* .bp-lot is a column flexbox, and this div sits where the
   <a class="bp-lot__wrp-image"> used to be a direct flex item. That <a> is
   height:0 + padding-top:78%, so flex-shrink has no content height to take and
   its box always survives at full size. This div has real auto height, so the
   default flex-shrink:1 squashed it — 280x133 wrapped around a 280x218 child —
   and clipped the bottom third off every photo. flex:none restores the <a>'s
   effective behaviour. No overflow here either: the <a> already clips, and that
   is the correct boundary. */
.bp-lot-gallery {
    position: relative;
    flex: none;
    width: 100%;
}

/* Slides inherit the plugin's own .bp-lot__image geometry — absolute, with
   top:50% + translateY(-50%) resolving against the <a>'s padding box, which
   lands them exactly over the 78% image area. Nothing needs to sit in normal
   flow to hold the box open, so this only layers the slides and cross-fades
   them. Overriding position/inset here breaks that centring. */
.bp-lot-gallery__slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    /* contain, never cover: a buyer paging through a lot's photos has to see
       the whole of each one. Cropping to fill the card hides exactly the detail
       (hallmarks, signatures, damage) they are paging through to inspect. */
    background-size: contain !important;
}

.bp-lot-gallery__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* ---- Arrows ---- */
.bp-lot-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #222;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
    opacity: 0;
    transition: opacity .18s ease, background-color .18s ease;
}

.bp-lot-gallery__nav--prev { left: 8px; }
.bp-lot-gallery__nav--next { right: 8px; }

.bp-lot-gallery:hover .bp-lot-gallery__nav,
.bp-lot-gallery:focus-within .bp-lot-gallery__nav {
    opacity: 1;
}

.bp-lot-gallery__nav:hover { background: #fff; }

.bp-lot-gallery__nav:focus-visible {
    opacity: 1;
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Touch devices have no hover, and arrows are the only affordance there. */
@media (hover: none) {
    .bp-lot-gallery__nav { opacity: 1; }
}

/* ---- Dots ---- */
.bp-lot-gallery__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 0 28px;
    flex-wrap: wrap;
    pointer-events: none;
}

.bp-lot-gallery__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .65);
    box-shadow: 0 0 2px rgba(0, 0, 0, .5);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color .18s ease, transform .18s ease;
}

.bp-lot-gallery__dot.is-active {
    background: #fff;
    transform: scale(1.35);
}

.bp-lot-gallery__dot:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Beyond ~8 photos the dot row becomes noise; the counter still conveys depth. */
.bp-lot-gallery[data-bp-many] .bp-lot-gallery__dots { display: none; }

/* ---- Image count badge ---- */
.bp-lot-gallery__count {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 600;
    pointer-events: none;
}

.bp-lot-gallery__count::before {
    content: "";
    width: 9px;
    height: 8px;
    border: 1.5px solid currentColor;
    border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .bp-lot-gallery__slide,
    .bp-lot-gallery__nav,
    .bp-lot-gallery__dot {
        transition: none;
    }
}