:root {
    --swiper-navigation-sides-offset: 0;
}

.group-swiper::part(button-next) {
    color: transparent;
    background: url(/assets/SiteTheme/images/icons/top-gray.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.group-swiper::part(button-prev) {
    color: transparent;
    background: url(/assets/SiteTheme/images/icons/bottom-gray.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.product-swiper::part(button-next) {
    color: transparent;
    background: url(/assets/SiteTheme/images/icons/top-gray.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.product-swiper::part(button-prev) {
    color: transparent;
    background: url(/assets/SiteTheme/images/icons/bottom-gray.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.product-swiper::part(container) {
    padding: 0 0;
}

.swiper-prod-btn-next{
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 16%;
    cursor: pointer;
}

.swiper-prod-btn-prev {
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 6%;
    cursor: pointer;
}

.swiper-prod-btn-prev {
    background: url(/assets/SiteTheme/images/icons/bottom-gray.png);
    background-repeat: no-repeat;
    background-size: contain;
    right: auto;
    left: 6px;
    z-index: 1;
}

.swiper-prod-btn-next {
    background: url(/assets/SiteTheme/images/icons/top-gray.png);
    background-repeat: no-repeat;
    background-size: contain;
    right: auto;
    left: 6px;
    z-index: 1;
}

.group_swiper_container {
    display: flex;
    flex-direction: row;
}

.box_share_products{
    height: 298px;
}


.box_share_products swiper-slide{
    margin-bottom: -20px !important;
}

.box_share_products {
    --mask: linear-gradient(to bottom, 
        rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 40%, 
        rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
    ) 100% 50% / 100% 100% repeat-x;
    
    /* border: 1px #d8d8d8 dashed; */
    /* font: 2em/1.6em Arial; */
    -webkit-mask: var(--mask); 
    mask: var(--mask);
    
  }
@media only screen and (max-width: 768px) {

    .swiper-prod-btn-next,
    .swiper-prod-btn-prev {
        top: 89%;
    }

    .swiper-prod-btn-next {
        right: 3%;
    }

    .swiper-prod-btn-prev {
        left: 87%;
    }

}