/* Lightbox */
.lightbox-shown .product-gallery{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: var(--bod-b-l);
    width: 100%;
    padding: 0;
    display: flex;
    max-width: none;
}
.lightbox-shown .product-gallery > .row{
    position: relative;
    height: 100%;
    width: 100%;
    margin: 0;
}

/* Thumbs */
.lightbox-shown #gallery-thumbs{
    max-height: 100%;
    z-index: 5;
    position: static;
    border: 0;
    align-content: flex-start;
    height: 100%;
    width: 0;
    padding: 0;
    cursor: pointer;
}
.lightbox-shown #gallery-thumbs .img-w:before{
    content: '';
    width: calc((100% - 100vh - 10rem) / 2);
    left: 10rem;
    position: absolute;
    top: 0;
    bottom: 0;
}
.lightbox-shown #gallery-thumbs .img-w.active:before,
.lightbox-shown #gallery-thumbs .img-w.active + .img-w ~ .img-w:before{
    display: none;
}
.lightbox-shown #gallery-thumbs .img-w.active + .img-w:before{
    left: auto;
    right: 0;
}

/* Gallery */
.lightbox-shown #gallery{
    width: 100%;
	height: 100%;
    margin: auto;
    padding: 2rem;
    max-width: none;
}
.lightbox-shown #gallery .inner{
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: flex-start;
}
.lightbox-shown #gallery .inner .img-ct{
    height: 100%;
}
.lightbox-shown #gallery .inner .img-ct:before{
    display: none;
}
.lightbox-shown #gallery .inner > a{
    height: 100%;
}
.lightbox-shown #gallery a{
    width: 100%;
    min-width: 100%;
    display: block;
    transition: margin .4s ease;
    border: 2rem solid transparent;
    height: auto;
    background:  var(--bod-b-l);
}
.lightbox-shown #gallery a:not(.active){
    margin-left: -100%;
    pointer-events: none;
	opacity: 0;
}
.lightbox-shown #gallery a.active ~ a{
    margin-left: 0%;
}
.lightbox-shown #gallery .active + a:not([href*="~"]),
.lightbox-shown #gallery .active + a:not([href*="~"]) ~ a{
    display: none;
}
.lightbox-shown #gallery-thumbs .img-w{
    position: static;
}
.lightbox-shown #close-lightbox{
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 11;
    width: 3rem;
    height: 3rem;
}

/* Prev / Next Arrows */
.lightbox-shown #gallery-thumbs .img-w:before{
    left: 0;
    width: 20rem;
    background: url('/templates/Snackys/img/icons/ic-ar.svg')no-repeat left 2rem center/3rem auto;
}
.lightbox-shown #gallery-thumbs .img-w.active+.img-w:before {
    left: auto;
    right: 0;
    background: url('/templates/Snackys/img/icons/ic-ar-r.svg')no-repeat right 2rem center/3rem auto;
}
.lightbox-shown #gallery a{
    cursor: zoom-out;
}

/* Disable Zoom in Ligthbox */
.lightbox-shown #gallery .zoomImg{
	display: none !important;
}

@media screen and (max-width: 1599px){
	.lightbox-shown #gallery-thumbs .img-w:before,
	.lightbox-shown #gallery-thumbs .img-w.active + .img-w:before{
		background-size: 2.5rem auto;
		background-position: left 1.5rem center;
	}
	.lightbox-shown #gallery-thumbs .img-w.active + .img-w:before{
		background-position: right 1.5rem center;		
	}
	.lightbox-shown #close-lightbox{
		width: 2.5rem;
		height: 2.5rem;
	}
}
@media screen and (max-width: 1199px){
	.lightbox-shown #gallery-thumbs .img-w:before,
	.lightbox-shown #gallery-thumbs .img-w.active + .img-w:before{
		background-size: 2rem auto;
		background-position: left 1rem center;
	}
	.lightbox-shown #gallery-thumbs .img-w.active + .img-w:before{
		background-position: right 1rem center;		
	}	
}
@media screen and (max-width: 499px){
	.lightbox-shown #gallery-thumbs .img-w:before,
	.lightbox-shown #gallery-thumbs .img-w.active + .img-w:before{
		background-size: 1.5rem auto;
		background-position: left .5rem center;
	}
	.lightbox-shown #gallery-thumbs .img-w.active + .img-w:before{
		background-position: right .5rem center;		
	}	
}