/*
==================================================
ГАЛЕРЕЯ ТОВАРОВ
==================================================
*/

.category-products-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
}


/*
==================================================
Элемент галереи
==================================================
*/

.category-product-gallery {
    min-width: 0;
}


.category-gallery-item {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}


.category-gallery-item:focus {
    outline: none;
}


.category-gallery-item:focus-visible {
    outline: 2px solid #b00000;
    outline-offset: 4px;
}


/*
==================================================
Изображение
==================================================
*/

.category-product-gallery .category-product-image {
    overflow: hidden;
    background: #f5f5f5;
}


.category-product-gallery .category-product-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}


.category-gallery-item:hover .category-product-image img {
    transform: scale(1.025);
}


/*
==================================================
Подпись
==================================================
*/

.category-product-gallery .category-product-title {
    margin-top: 12px;
}


/*
==================================================
LIGHTBOX
==================================================
*/

.category-lightbox {
    position: fixed;
    z-index: 99999;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px;

    background: rgba(0, 0, 0, 0.88);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


.category-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}


/*
==================================================
Большое изображение
==================================================
*/

.category-lightbox-content {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


.category-lightbox-content img {
    display: block;

    max-width: calc(100vw - 160px);
    max-height: calc(100vh - 80px);

    width: auto;
    height: auto;

    object-fit: contain;

    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}


/*
==================================================
КНОПКА ЗАКРЫТИЯ
==================================================
*/

.category-lightbox-close {
    position: absolute;

    top: 18px;
    right: 24px;

    z-index: 3;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 42px;
    font-weight: 300;
    line-height: 48px;

    cursor: pointer;

    opacity: 0.85;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.category-lightbox-close:hover {
    opacity: 1;
    transform: scale(1.08);
}


/*
==================================================
СТРЕЛКИ
==================================================
*/

.category-lightbox-prev,
.category-lightbox-next {
    position: absolute;

    top: 50%;

    z-index: 3;

    width: 54px;
    height: 72px;

    padding: 0;

    margin-top: -36px;

    border: 0;

    background: rgba(0, 0, 0, 0.18);

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 38px;
    font-weight: 300;
    line-height: 72px;

    text-align: center;

    cursor: pointer;

    opacity: 0.75;

    transition:
        opacity 0.2s ease,
        background 0.2s ease;
}


.category-lightbox-prev {
    left: 18px;
}


.category-lightbox-next {
    right: 18px;
}


.category-lightbox-prev:hover,
.category-lightbox-next:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
}


/*
==================================================
Блокировка прокрутки страницы
==================================================
*/

body.category-lightbox-open {
    overflow: hidden;
}


/*
==================================================
АДАПТИВ
==================================================
*/

@media (max-width: 900px) {

    .category-products-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }


    .category-lightbox {
        padding: 30px 60px;
    }


    .category-lightbox-content img {
        max-width: calc(100vw - 120px);
        max-height: calc(100vh - 60px);
    }


    .category-lightbox-prev {
        left: 8px;
    }


    .category-lightbox-next {
        right: 8px;
    }

}


@media (max-width: 600px) {

    .category-products-gallery {
        grid-template-columns: 1fr;
        gap: 24px;
    }


    .category-lightbox {
        padding: 20px 45px;
    }


    .category-lightbox-content img {
        max-width: calc(100vw - 90px);
        max-height: calc(100vh - 40px);
    }


    .category-lightbox-close {
        top: 8px;
        right: 8px;

        width: 42px;
        height: 42px;

        font-size: 36px;
        line-height: 42px;
    }


    .category-lightbox-prev,
    .category-lightbox-next {
        width: 38px;
        height: 60px;

        margin-top: -30px;

        font-size: 30px;
        line-height: 60px;
    }


    .category-lightbox-prev {
        left: 3px;
    }


    .category-lightbox-next {
        right: 3px;
    }

}