/* Фото в галерее товара — теги <img> (их видит поиск по картинкам), нарисованные так же,
   как прежний фон блока .back: по центру, с обрезкой до размера блока. Подключается из
   goodSlider.template.php после общих стилей. */
.goodPhotoBox { position: relative; }

.goodPhotoBox > .goodPhoto {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: cover; object-position: 50% 50%;
    /* Как фон: не перехватывает нажатия и не тянется мышью, листание и открытие окна работают по-прежнему. */
    pointer-events: none; -webkit-user-select: none; user-select: none;
}

/* Миниатюры: фото под рамкой и зелёной обводкой блока, углы скруглены по рамке. */
.goodSliderThumbs .goodPhotoBox,
.goodOverlaySliderThumbs .goodPhotoBox { z-index: 0; overflow: hidden; }

.goodSliderThumbs .goodPhotoBox > .goodPhoto,
.goodOverlaySliderThumbs .goodPhotoBox > .goodPhoto { z-index: -1; }

/* Окно увеличения: width и height в теге только сообщают пропорции, размер считается как раньше. */
.goodOverlaySlider img.goodPhotoZoom { width: auto; height: auto; }

/* Ряд миниатюр до запуска слайдера (main.bundle.js, отложенный скрипт): пять в ряд через 8px, как их ставит Swiper
   (slidesPerView 5, spaceBetween 8), а не каждая во всю ширину ряда. Иначе ряд был высотой с большое фото, и на
   телефоне и планшете колонка с названием и ценой съезжала вверх на 290–550px, когда слайдер запускался
   (CLS 0,05–0,07; аудит 07.10, P-6). После запуска размеры ставит сам Swiper. */
.goodSliderThumbs:not(.swiper-initialized) .swiper-slide { width: calc((100% - 32px) / 5); margin-right: 8px; }

/* Десктоп (макет 1a, 13.10): под большим фото одиннадцать миниатюр в ряд через 8px (Swiper: slidesPerView 11 от 992px),
   квадратные, со скруглением 12px и серой рамкой; открытая — с зелёной обводкой 4px внутрь. Большое фото — целиком
   на белом. */
@media (min-width: 992px) {
    .goodSliderThumbs:not(.swiper-initialized) .swiper-slide { width: calc((100% - 80px) / 11); }
    .goodSlider .swiper-slide { background: #FFF; }
    .goodSlider .goodPhotoBox > .goodPhoto { object-fit: contain; }
}
.goodSliderThumbs .swiper-slide .back { border: 1px solid #C7CDCC; border-radius: 12px; outline: none; }
.goodSliderThumbs .swiper-slide-thumb-active .back { outline: 4px solid #0DA287; outline-offset: -4px; }

/* Десктоп: большое фото с миниатюрами едет вниз вместе со страницей под закреплённым меню (#fixedMenu, 67px при корне
   16px с 09.10, видимая плашка кончается на 59px; зазор ~10px) и останавливается у нижнего края своей колонки, пока справа читают описание. Окно увеличения (#modalSlider)
   лежит вне блока: внутри sticky-слоя оно оказалось бы под затемнением Bootstrap. На низких окнах фото не помещается
   целиком, там блок стоит на месте. Сайт делает <body> контейнером прокрутки, который никогда не прокручивается,
   и ничего не может прилипнуть внутри него (как в catalogue-text.css и gift-sets.css). */
@media (min-width: 992px) and (min-height: 700px) {
    body { overflow: visible !important; padding-right: 0 !important; }
    .goodMain .left > .goodGallerySticky { position: sticky; top: calc(4.125rem + 2px); }
}

/* Видео в окне увеличения, пока грузится: поверх кадра, на котором стояло видео на странице, крутится кольцо. */
#modalSlider .videoSlide { position: relative; }
#modalSlider .videoSlide.isLoading::after {
    content: ""; position: absolute; top: 50%; left: 50%; z-index: 2;
    width: 48px; height: 48px; margin: -24px 0 0 -24px; box-sizing: border-box;
    border: 4px solid rgba(255, 255, 255, .45); border-top-color: var(--Green-Brand, #066B59); border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); pointer-events: none;
    animation: goodVideoSpin .8s linear infinite;
}
@keyframes goodVideoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #modalSlider .videoSlide.isLoading::after { animation-duration: 2.4s; } }