/**
 * gallery.css
 * Страница: все, где показываются фотографии
 * Блок: виджет Gallery — миниатюра, увеличение при наведении, галерея
 *
 * Внутри:
 * 1. Миниатюра в строке списка
 * 2. Всплывающая картинка при наведении
 * 3. Галерея: затемнение, окно, стрелки, полоса миниатюр
 */

/* 1. Миниатюра в строке
   ------------------------------------------------------------------ */

.wms-gallery {
    display: inline-block;
    cursor: pointer;
    line-height: 0;
}

/*
 * Снимок целиком, без обрезки.
 *
 * Было `cover` — картинка заполняла рамку и срезала всё, что не влезло:
 * у товаров на людях это голова и ноги. Рамка теперь той же пропорции,
 * что снимки Wildberries (3:4), поэтому полей почти не остаётся;
 * а если продавец загрузил снимок другой формы, лучше поля по краям,
 * чем обрезанный товар.
 */
.wms-gallery-thumb {
    object-fit: contain;
    border-radius: .375rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    transition: border-color .15s;
}

.wms-gallery:hover .wms-gallery-thumb,
.wms-gallery:focus-visible .wms-gallery-thumb {
    border-color: var(--bs-primary);
}

/* Фотографий нет. Пустое место читается как поломка, поэтому
   рисуем значок: сразу видно, что снимков просто не завели. */
.wms-gallery-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    border: 1px dashed var(--bs-border-color);
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}

/* 2. Увеличение при наведении
   ------------------------------------------------------------------ */

.wms-gallery-hover {
    position: fixed;
    /* Выше любого окна: окна поднимают слой при каждом нажатии
       (windows.js, счётчик от 100010 по одному) и после десятка
       нажатий перекрывали галерею (телефон Александра, 15.09.2026). */
    z-index: 1000020;
    padding: .25rem;
    border-radius: .5rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
    pointer-events: none;
    line-height: 0;
}

/*
 * Рамка обтягивает фотографию.
 *
 * Раньше стоял квадрат 260 на 260, а снимки у площадки в пропорции
 * 3:4 — и по бокам оставались белые поля. Выглядело так, будто
 * фотография не догрузилась.
 *
 * Теперь задана только высота, ширину картинка берёт свою. Ширина
 * ограничена сверху на случай снимка, лежащего поперёк: без предела
 * такой развернулся бы во всю строку.
 */
.wms-gallery-hover img {
    height: 260px;
    width: auto;
    max-width: 360px;
    display: block;
    border-radius: .375rem;
}

/* На телефоне наведения нет — есть касание, и оно сразу открывает
   галерею. Всплывающая картинка там только мешала бы. */
@media (hover: none) {
    .wms-gallery-hover {
        display: none;
    }
}

/* 3. Галерея
   ------------------------------------------------------------------ */

body.wms-gallery-open {
    overflow: hidden;
}

.wms-gallery-box {
    position: fixed;
    inset: 0;
    z-index: 1000030;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wms-gallery-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .75);
}

/*
 * Окно обжимает фотографию, а не наоборот.
 *
 * Было жёстко: 900 на 900. Снимки Wildberries вертикальные, 3:4 —
 * и в квадратном окне оставались пустые поля: на телефоне сверху
 * и снизу, на широком экране слева и справа. Окно выглядело пустым,
 * а фотография — мелкой.
 *
 * Теперь размер задаёт содержимое: ширина и высота по нему, а `max-*`
 * не дают вылезти за экран.
 */
.wms-gallery-window {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    max-width: 94vw;
    max-height: 94vh;
    border-radius: .5rem;
    background: var(--bs-body-bg);
    overflow: hidden;
}

.wms-gallery-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.wms-gallery-title {
    flex: 1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wms-gallery-count {
    color: var(--bs-secondary-color);
    font-size: .875rem;
    white-space: nowrap;
}

.wms-gallery-close {
    border: 0;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.wms-gallery-close:hover {
    color: var(--bs-body-color);
}

.wms-gallery-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    background: var(--bs-tertiary-bg);
}

/*
 * Размер фотографии и есть размер окна.
 *
 * Вычитаем то, что занимают шапка и полоса миниатюр, — иначе окно
 * окажется выше экрана ровно на их высоту. Числа приблизительные
 * и намеренно с запасом: точность здесь не нужна, а нехватка пары
 * точек вернула бы прокрутку.
 */
.wms-gallery-big {
    display: block;
    max-width: 94vw;
    max-height: calc(94vh - 8.5rem);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Без миниатюр внизу места больше: одна фотография — полосы нет. */
.wms-gallery-window:has(.wms-gallery-strip[hidden]) .wms-gallery-big {
    max-height: calc(94vh - 3.5rem);
}

.wms-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.wms-gallery-arrow:hover {
    background: rgba(0, 0, 0, .65);
}

.wms-gallery-arrow.prev {
    left: .75rem;
}

.wms-gallery-arrow.next {
    right: .75rem;
}

/*
 * Полоса миниатюр внизу: по ней переключаются сразу, не листая.
 *
 * Ширину задаёт окно, а окно — фотография. Миниатюр бывает полтора
 * десятка, и без прокрутки они растянули бы окно вдвое шире снимка.
 */
.wms-gallery-strip {
    display: flex;
    gap: .375rem;
    padding: .5rem;
    overflow-x: auto;
    border-top: 1px solid var(--bs-border-color);

    /*
     * Ширину окна задаёт фотография, а не эта полоса.
     *
     * Семнадцать миниатюр по сорок точек — это семьсот с лишним,
     * и без запрета полоса растягивала бы окно шире снимка: по бокам
     * оставались пустые поля, ровно те, от которых уходили.
     *
     * Нулевая ширина с обязательным «во всю строку» — приём, который
     * позволяет содержимому прокручиваться, не влияя на размер окна.
     */
    width: 0;
    min-width: 100%;
}

.wms-gallery-strip img {
    width: 44px;
    height: 58px;
    object-fit: cover;
    border-radius: .25rem;
    border: 2px solid transparent;
    cursor: pointer;
    flex: 0 0 auto;
}

.wms-gallery-strip img.active {
    border-color: var(--bs-primary);
}