.image-zoom-container {
            max-width: 600px;
            margin: 0 auto 20px auto;
		
        }
        
        .primary-image-wrapper {
            position: relative;
            width: 100%;
            height: 400px;
            border: 1px solid #ccc;
            overflow: hidden;
            cursor: crosshair;
        }
        
        .primary-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.2s;
        }
        
        .thumbnail-container {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            overflow-x: auto;
        }
        
        .thumbnail {
            width: 80px;
            height: 80px;
            object-fit: cover;
            cursor: pointer;
            border: 2px solid #ddd;
            transition: border-color 0.3s;
        }
        
        .thumbnail:hover, .thumbnail.active {
            border-color: #007bff;
        }
        
        .zoom-lens {
            position: absolute;
            width: 100px;
            height: 100px;
            background: rgba(0, 0, 0, 0.05);
            border: 1px solid #000;
            pointer-events: none;
            display: none;
			
        }
		
		
		
@media screen and (min-width:0px) and (max-width: 600px)
{

	 .image-zoom-container {
            max-width: 600px;
            margin: 0 auto 20px auto;
		
        }
		
		 .primary-image-wrapper {
            position: relative;
            width: 100%;
            height: auto;
            border: 1px solid #ccc;
            overflow: hidden;
            cursor: crosshair;
        }
		
		.thumbnail {
            width: 50px;
            height: 50px;
            object-fit: cover;
            cursor: pointer;
            border: 2px solid #ddd;
            transition: border-color 0.3s;
        }
        
}