.img-slider {
    position: relative;
    overflow: hidden;
}

.img-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /*
     * ЭТО и есть причина "рандомной" фотки при первом открытии карточки/
     * каталога: браузерная функция scroll anchoring по умолчанию сама
     * подстраивает scrollLeft, чтобы "удержать" видимый контент на месте,
     * когда размеры внутри скролл-контейнера меняются ПОСЛЕ первой отрисовки —
     * а именно так и происходит с img (loading="lazy"): картинка сначала
     * занимает 0×0, потом резко получает реальные width/height, когда
     * догружается. На первом (некэшированном) визите слайды догружаются не
     * одновременно и не по порядку — и браузер в ответ на эти скачки размера
     * молча прокручивает трек на другой слайд, хотя пользователь пальцем
     * ничего не трогал. Больше всего заметно именно там, где слайдов
     * несколько (карточка товара с галереей, плитки в каталоге). Отключаем
     * это поведение явно — трек должен оставаться там, куда его поставили
     * (scrollLeft = 0 по умолчанию), а не "само-скроллиться" вслед за
     * догрузкой картинок.
     */
    overflow-anchor: none;
}

.img-slider-track::-webkit-scrollbar {
    display: none;
}

.img-slider-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none; /* не мешает свайпу пальцем */
    -webkit-user-drag: none;
}

.img-slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}

.img-slider-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color 0.15s ease, width 0.15s ease;
}

.img-slider-dot.active {
    background-color: var(--color-accent);
    width: 14px;
    border-radius: 3px;
}

/*
 * Вариант "card" — внутри плитки товара в каталоге (product-card).
 * Плитка сделана уже в ширину, но выше в высоту (aspect-ratio 3/4, а не
 * квадрат) — картинка заполняет её целиком через object-fit: cover
 * (раньше был contain, из-за чего фото "плавало" по высоте плитки в
 * зависимости от пропорций исходного файла). Отступ 5px от края плитки —
 * это padding самого .product-card (см. product-card.css), не здесь; тут
 * фото просто заполняет всё доступное место без своего собственного отступа.
 */
.img-slider--card {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-block);
    background-color: var(--bg-block);
}

.img-slider--card .img-slider-slide {
    height: 100%;
}

.img-slider--card .img-slider-slide img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    border-radius: var(--radius-block);
}

/*
 * Широкое (16:9) фото — в портретной 3:4 плитке cover обрезал бы его по
 * бокам гораздо сильнее, чем квадратное/портретное, теряя заметную часть
 * содержимого ("часть контента съезжает за экран"). Для таких фото —
 * contain: видно целиком, без обрезки, ценой пустых полей сверху/снизу
 * (закрыты фоном .img-slider--card выше). См. ProductImage::isWide().
 */
.img-slider--card .img-slider-slide--contain img {
    object-fit: contain;
}

.img-slider--card .img-slider-dots {
    bottom: 4px;
}

.img-slider--card .img-slider-dot {
    width: 4px;
    height: 4px;
}

.img-slider--card .img-slider-dot.active {
    width: 10px;
}

/*
 * Вариант "detail" — крупная галерея на карточке товара. Та же пропорция
 * 3:4, что и у плитки каталога выше (а не 9:16, как было раньше) — фото
 * теперь при загрузке автоматически обрезаются по центру ровно под 3:4
 * (см. ProductMediaController::GALLERY_CROP_RATIO/ImageCropper), и если
 * контейнер везде одной пропорции — фото садится идеально и тут, и там,
 * без разницы. Без отступа от края (в отличие от плитки каталога, где
 * отступ 5px — это padding самого .product-card).
 */
.img-slider--detail {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-block);
    background-color: var(--bg-block);
}

.img-slider--detail .img-slider-slide {
    height: 100%;
}

.img-slider--detail .img-slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Та же защита от обрезки широких (16:9) СТАРЫХ фото (загруженных ДО
 * автообрезки при загрузке, см. ProductMediaController), что и у
 * .img-slider--card выше — см. ProductImage::isWide(). У новых фото
 * (уже обрезанных под 3:4 при загрузке) этот класс просто никогда не
 * применяется — isWide() для них всегда false.
 */
.img-slider--detail .img-slider-slide--contain img {
    object-fit: contain;
}

.img-slider--empty {
    background-color: var(--bg-block);
    aspect-ratio: 1;
    border-radius: var(--radius-block);
}

/* Специфичнее одиночного .img-slider--empty выше — держат те же пропорции,
   что и соответствующий вариант с фото, а не квадрат по умолчанию. */
.img-slider--card.img-slider--empty {
    aspect-ratio: 3 / 4;
}

.img-slider--detail.img-slider--empty {
    aspect-ratio: 3 / 4;
}