/*==================================================
PRODUCT GALLERY
FULL WIDTH SHOP SLIDER
==================================================*/

.product-gallery {

    position: relative;

    width: 100%;
    height: calc(100vh - 90px);

    margin-top: 90px;

    overflow: hidden;

    background: #f4f1e8;

}


/*==================================
TRACK
==================================*/

.product-gallery-track {

    display: flex;

    width: 100%;
    height: 100%;

    gap: 0;

    transform: translateX(0);

    transition: transform .65s ease-in-out;

    will-change: transform;

}


/*==================================
SLIDE
==================================*/

.product-gallery-slide {

    flex: 0 0 100%;

    width: 100%;
    height: 100%;

    display: flex;

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

    flex-shrink: 0;

    text-decoration: none;

}


/*==================================
IMAGE
==================================*/

.product-gallery-slide img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    object-position: center;

    user-select: none;

    -webkit-user-drag: none;

}


/*==================================
NAVIGATION
==================================*/

.product-gallery-prev,
.product-gallery-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;
    height: 48px;

    display: flex;

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

    padding: 0;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.9);

    color: #1f3d2b;

    cursor: pointer;

    z-index: 20;

    box-shadow:
        0 5px 18px rgba(0,0,0,.12);

    transition:
        background .2s ease,
        color .2s ease;

}


.product-gallery-prev {

    right: 20px;

}


.product-gallery-next {

    left: 20px;

}


.product-gallery-prev:hover,
.product-gallery-next:hover {

    background: #1f3d2b;

    color: #fff;

}


/*==================================
DOTS
==================================*/

.product-gallery-dots {

    position: absolute;

    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;

    z-index: 20;

}


.product-gallery-dots button {

    width: 9px;
    height: 9px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: rgba(31,61,43,.3);

    cursor: pointer;

}


.product-gallery-dots button.active {

    width: 26px;

    border-radius: 10px;

    background: #1f3d2b;

}


/*==================================
TABLET
==================================*/

@media (max-width: 992px) {

    .product-gallery {

        height: calc(100vh - 85px);

        margin-top: 85px;

    }

    .product-gallery-slide {

        flex-basis: 100%;

    }

}


/*==================================
MOBILE
==================================*/

@media (max-width: 768px) {

    .product-gallery {

        height: calc(100vh - 72px);

        margin-top: 72px;

    }

    .product-gallery-prev,
    .product-gallery-next {

        width: 40px;
        height: 40px;

    }

    .product-gallery-prev {

        right: 10px;

    }

    .product-gallery-next {

        left: 10px;

    }

    .product-gallery-dots {

        bottom: 14px;

    }

}


/*==================================
SMALL MOBILE
==================================*/

@media (max-width: 480px) {

    .product-gallery {

        height: calc(100vh - 68px);

        margin-top: 68px;

    }

    .product-gallery-prev,
    .product-gallery-next {

        width: 36px;
        height: 36px;

        font-size: 12px;

    }

}