/* Image Zoom Styles */
.img-zoom-container {
    position: relative;
    width: 100%;
    /* Ensure the container doesn't overflow incorrectly */
    overflow: visible;
}

.img-zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    /* Size of the lens */
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: crosshair;
    /* Ensure lens is visible */
    z-index: 100;
    /* Center pointer */
    transform: translate(-50%, -50%);
    /* Start hidden until mouseover? usually managed by JS, but let's keep it visible when active */
    display: none;
}

/* Show lens on hover if needed, or JS handles display */
.img-zoom-container:hover .img-zoom-lens {
    display: block;
}

.img-zoom-result {
    border: 1px solid #d4d4d4;
    width: 100%;
    /* Aspect ratio will be handled by height/padding, but let's set a min-height */
    height: 400px;
    background-repeat: no-repeat;
    /* High resolution look */
    image-rendering: -webkit-optimize-contrast;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-top: 10px;
}

@media (max-width: 768px) {

    .img-zoom-result,
    .img-zoom-lens {
        display: none !important;
    }
}