/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 13 2025 | 22:09:44 */
//fix

.sgi_product_image {
    display: flex;
    align-items: stretch;
    min-height: 414px;
    height: 414px;
    gap: 32px;
}

.sgi_gallery {
    width: 124px;
    display: flex;
    flex-direction: column;
    min-width: 124px;
}

.sgi_featured {
    width: calc(100% - 156px);
    border: 1px solid #d2d2d2;
    max-height: 414px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
	position: relative ;
	overflow: hidden ;
}

.sgi_product_image img {
    max-width: 100%;
    object-fit: contain;
    max-height: 100%;
	cursor: pointer ;
}

.sgi_gallery img {
    border: 1px solid #d2d2d2;
    object-fit: contain;
	opacity: 0.5 ;
	transition: all 0.4s ease ;
}

.sgi_gallery img.active{
	opacity: 1; 
}

button.sgi-arrow {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #C20E1A;
    color: #fff;
    border: none;
}


button.sgi-arrow:hover,
button.sgi-arrow:active,
button.sgi-arrow:focus{
	background: #C20E1A ;
}

button.sgi-arrow {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #C20E1A;
    color: #fff;
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	transition: all 0.4s ease ;
}

.sgi-prev{
	left: -100px ;
}

.sgi-next{
	right: -100px ;
}

.sgi_featured:hover .sgi-next{
	right: 24px ;
}

.sgi_featured:hover .sgi-prev{
	left: 24px ;
}

@media(max-width:767px){
	.sgi_product_image {
    flex-direction: column-reverse;
		height: auto ;
}
	
	.sgi_gallery {
    flex-direction: row;
    width: 100%;
    min-width: 1px;
}
	
	.sgi_gallery img {
    width: 25%;
    max-width: 25%;
}
	
	.sgi_featured {
    width: 100%;
		min-height: 350px ;
}
}