/* ==========================================================================
   Галерея товара (dev) - start

   Независимый блок, живёт вне .product. Desktop-first.
   Высота главной области и ленты миниатюр задана до загрузки изображений.

   Сброс наследования от темы делается через all: unset внутри правил
   компонента. Отдельным селектором его выносить нельзя: .dev-gallery button
   имеет специфичность выше, чем .dev-gallery__arrow, и снёс бы собственные
   стили блока. Из-за all: unset в каждом таком правиле заново объявляется
   box-sizing — сброс перекрывает универсальное правило выше.
   ========================================================================== */





.dev-gallery {
    --dev-ratio: 4 / 3;
    /* Пропорции кадра: размеров изображений в Liquid нет, фиксируем квадрат */
    --dev-thumb-size: 78px;
    /* Сторона миниатюры */
    --dev-gap: 14px;
    /* Отступ между главной областью и лентой */
    --dev-border: #e6e6e6;
    /* Цвет рамок */
    --dev-accent: #d0323d;
    /* Акцент, фирменный красный */
    --dev-max-width: 634px;
    /* Ширина блока, как у штатной галереи */

    display: flex;
    flex-direction: column;
    gap: var(--dev-gap);
    box-sizing: border-box;
}

/* Режим песочницы: блок скрыт от посетителей.
   Чтобы посмотреть — снять галочку с этого правила в инспекторе */
.dev-gallery_sandbox {
    display: none;
}

.dev-gallery *,
.dev-gallery *::before,
.dev-gallery *::after {
    box-sizing: border-box;
}

/* Главная область
   ========================================================================== */

.dev-gallery__stage {
    position: relative;
}

.dev-gallery__track {
    display: flex;
    aspect-ratio: var(--dev-ratio);
    /* Резерв высоты до загрузки изображений */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Legacy Edge */
    overscroll-behavior-x: contain;
    /* Свайп не листает историю браузера */
}

.dev-gallery__track::-webkit-scrollbar {
    display: none;
    /* WebKit */
}

.dev-gallery__slide {
    display: flex;
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* Свайп листает по одному кадру */
}

.dev-gallery__slide.is-hidden {
    display: none;
    /* Кадр чужой модификации */
}

.dev-gallery__zoom {
    all: unset;
    /* Снимаем наследование от темы */
    box-sizing: border-box;
    display: block;
    /* После сброса кнопка становится inline */
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.dev-gallery__img {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Кадр квадратный, изображение вписывается без обрезки */
}

/* Стрелки
   ========================================================================== */

.dev-gallery__arrow {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border: 1px solid var(--dev-border);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    opacity: .85;
    transition: opacity .15s ease;
}

.dev-gallery__arrow:hover {
    opacity: 1;
}

.dev-gallery__arrow:focus-visible {
    outline: 2px solid var(--dev-accent);
    outline-offset: 2px;
}

/* Скрипт ставит атрибут hidden, display: flex его перебивает */
.dev-gallery__arrow[hidden] {
    display: none;
}

.dev-gallery__arrow::before {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
}

.dev-gallery__arrow_prev {
    left: 8px;
}

.dev-gallery__arrow_prev::before {
    margin-left: 3px;
    transform: rotate(-135deg);
    /* Шеврон влево */
}

.dev-gallery__arrow_next {
    right: 8px;
}

.dev-gallery__arrow_next::before {
    margin-right: 3px;
    transform: rotate(45deg);
    /* Шеврон вправо */
}

@media (max-width: 768px) {
    .dev-gallery__arrow {
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }
}

/* Лента миниатюр
   ========================================================================== */

.dev-gallery__thumbs {
    display: flex;
    gap: 8px;
    min-height: var(--dev-thumb-size);
    /* Резерв высоты ленты */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

.dev-gallery__thumbs::-webkit-scrollbar {
    display: none;
}

.dev-gallery__thumb {
    all: unset;
    box-sizing: border-box;
    display: block;
    flex: 0 0 var(--dev-thumb-size);
    height: var(--dev-thumb-size);
    padding: 2px;
    border: 1px solid var(--dev-border);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease;
}

.dev-gallery__thumb:hover {
    border-color: #b3b3b3;
}

.dev-gallery__thumb:focus-visible {
    outline: 2px solid var(--dev-accent);
    outline-offset: 2px;
}

.dev-gallery__thumb.is-active {
    border-color: var(--dev-accent);
}

.dev-gallery__thumb.is-hidden {
    display: none;
}

.dev-gallery__thumb-img {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .dev-gallery {
        --dev-thumb-size: 64px;
    }
}

/* Доступность
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .dev-gallery__track {
        scroll-behavior: auto;
    }

    .dev-gallery__arrow,
    .dev-gallery__thumb {
        transition: none;
    }
}

/* ==========================================================================
   Галерея товара (dev) - end
   ========================================================================== */


/* ==========================================================================
   Лайтбокс галереи (dev) - start

   Оверлей создаётся скриптом и живёт в body, вне блока галереи.
   ========================================================================== */

.dev-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .92);
}

.dev-lightbox * {
    box-sizing: border-box;
}

.dev-lightbox__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 56px 72px;
}

.dev-lightbox__img {
    all: unset;
    /* Снимаем наследование от темы */
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.dev-lightbox__btn {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

/* Крестик рисуем двумя линиями: символ × сидит не по центру из-за метрик шрифта */
.dev-lightbox__btn_close::before,
.dev-lightbox__btn_close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: #fff;
}

.dev-lightbox__btn_close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.dev-lightbox__btn_close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Скрипт ставит кнопкам атрибут hidden, display: flex его перебивает */
.dev-lightbox__btn[hidden] {
    display: none;
}

.dev-lightbox__btn:hover {
    background: rgba(255, 255, 255, .24);
}

.dev-lightbox__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.dev-lightbox__btn_close {
    top: 16px;
    right: 16px;
}

.dev-lightbox__btn_prev {
    top: 50%;
    left: 16px;
    margin-top: -24px;
}

.dev-lightbox__btn_next {
    top: 50%;
    right: 16px;
    margin-top: -24px;
}

.dev-lightbox__counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    opacity: .7;
}

/* Блокировка прокрутки страницы под открытым лайтбоксом */
.dev-lightbox-lock {
    overflow: hidden;
}

@media (max-width: 768px) {
    .dev-lightbox {
        flex-direction: column;
        /* Фото сверху, управление снизу */
    }

    .dev-lightbox__figure {
        flex: 1 1 auto;
        /* Занимает всё свободное место */
        height: auto;
        padding: 56px 12px 12px;
    }

    .dev-lightbox__btn_close {
        top: 12px;
        right: 12px;
    }

    /* Стрелки и счётчик в одну строку под фото */
    .dev-lightbox__btn_prev,
    .dev-lightbox__btn_next,
    .dev-lightbox__counter {
        position: static;
        /* Выходим из абсолютного позиционирования */
        margin: 0;
        transform: none;
    }

    .dev-lightbox__btn_prev,
    .dev-lightbox__btn_next {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .dev-lightbox__controls {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 12px 0 24px;
        /* Нижний отступ от панели навигации */
    }

    .dev-lightbox__counter {
        min-width: 56px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dev-lightbox__btn {
        transition: none;
    }
}

/* ==========================================================================
   Лайтбокс галереи (dev) - end
   ========================================================================== */


/* ==========================================================================
   Липкая колонка фото (dev) - start

   Тема вешала sticky на .product__gallery — внутренний элемент, который мы
   заменили. Переносим на саму ячейку: тогда галерея и блок видео едут вместе.
   ========================================================================== */

.product__area-photo:has(.dev-gallery) {
    position: sticky;
    top: 1rem;
    /* Значение из темы */
    align-self: start;
    /* Иначе grid растянет ячейку и sticky не сработает */
}

@media (max-width: 768px) {
    .product__area-photo:has(.dev-gallery) {
        position: static;
        /* На узких экранах галерея над ценой, липкость не нужна */
    }
}

/* ==========================================================================
   Липкая колонка фото (dev) - end
   ========================================================================== */


/* ==========================================================================
   Видео товара (dev) - start

   Независимый блок под галереей. Пропорции 16:9, своя лента со скроллом.
   Высота задана до загрузки обложек, сдвига макета нет.
   ========================================================================== */

.dev-video {
    --dev-video-ratio: 16 / 9;
    /* Пропорции кадра */
    --dev-video-gap: 8px;
    /* Отступ между роликами */
    --dev-video-per-view: 2;
    /* Роликов в кадре */
    --dev-video-border: #e6e6e6;
    /* Цвет рамок */
    --dev-video-accent: #d0323d;
    /* Акцент, фирменный красный */
    --dev-video-stub: linear-gradient(135deg, #917d7d 0%, #6a1818 100%);
    /* Фон заглушки, когда обложки нет */

    position: relative;
    box-sizing: border-box;
    margin-top: 12px;
    /* Отступ от галереи фото */
}

/* Режим песочницы: блок скрыт от посетителей, показ по ?devgallery=1 */
.dev-video_sandbox {
    display: none;
}

.dev-video *,
.dev-video *::before,
.dev-video *::after {
    box-sizing: border-box;
}

/* Лента
   ========================================================================== */

.dev-video__track {
    display: flex;
    gap: var(--dev-video-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Legacy Edge */
    overscroll-behavior-x: contain;
    /* Свайп не листает историю браузера */
}

.dev-video__track::-webkit-scrollbar {
    display: none;
    /* WebKit */
}

/* Карточка ролика
   ========================================================================== */

.dev-video__item {
    all: unset;
    /* Снимаем наследование от темы */
    box-sizing: border-box;
    position: relative;
    display: block;

    /* Ширина под N роликов в кадре с учётом отступов между ними */
    flex: 0 0 calc((100% - (var(--dev-video-gap) * (var(--dev-video-per-view) - 1))) / var(--dev-video-per-view));

    aspect-ratio: var(--dev-video-ratio);
    /* Резерв высоты до загрузки обложек */
    scroll-snap-align: start;
    background: var(--dev-video-stub);
    /* Виден, если обложки нет */
    cursor: pointer;
    overflow: hidden;
}

.dev-video__item:focus-visible {
    outline: 2px solid var(--dev-video-accent);
    outline-offset: 2px;
}

.dev-video__poster {
    all: unset;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Обложки приходят 16:9, поля не нужны */
}

/* Кнопка воспроизведения
   ========================================================================== */

.dev-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    transition: background .15s ease;
}

.dev-video__item:hover .dev-video__play {
    background: var(--dev-video-accent);
}

/* Треугольник воспроизведения на границах прозрачного блока */
.dev-video__play::before {
    content: '';
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #fff;
}

@media (max-width: 768px) {
    .dev-video__play {
        width: 44px;
        height: 44px;
        margin: -22px 0 0 -22px;
    }
}

/* Вставленный проигрыватель
   ========================================================================== */

.dev-video__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Стрелки: только десктоп, на узких экранах листаем свайпом
   ========================================================================== */

.dev-video__arrow {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border: 1px solid var(--dev-video-border);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    opacity: .85;
    transition: opacity .15s ease;
}

.dev-video__arrow:hover {
    opacity: 1;
}

.dev-video__arrow:focus-visible {
    outline: 2px solid var(--dev-video-accent);
    outline-offset: 2px;
}

.dev-video__arrow[hidden] {
    display: none;
    /* display: flex перебивает атрибут hidden */
}

.dev-video__arrow::before {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
}

.dev-video__arrow_prev {
    left: 8px;
}

.dev-video__arrow_prev::before {
    margin-left: 3px;
    transform: rotate(-135deg);
    /* Шеврон влево */
}

.dev-video__arrow_next {
    right: 8px;
}

.dev-video__arrow_next::before {
    margin-right: 3px;
    transform: rotate(45deg);
    /* Шеврон вправо */
}

@media (max-width: 768px) {
    .dev-video__arrow {
        width: 32px;
        height: 32px;
        margin-top: -16px;
    }

    .dev-video__arrow::before {
        width: 7px;
        height: 7px;
        border-width: 2px 2px 0 0;
    }

    .dev-video__arrow_prev {
        left: 4px;
    }

    .dev-video__arrow_next {
        right: 4px;
    }
}

/* Доступность
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .dev-video__track {
        scroll-behavior: auto;
    }

    .dev-video__item,
    .dev-video__play,
    .dev-video__arrow {
        transition: none;
    }
}

/* ==========================================================================
   Видео товара (dev) - end
   ========================================================================== */