.image-zoom-container {
            width: 600px;
            margin: 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: 100px;
            height: 100px;
            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.2);
            border: 1px solid #000;
            pointer-events: none;
            display: none;
        }