body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

img[src*="thumb"] {
    cursor: pointer;
    transition: transform .2s ease;
    max-width: 100%;
    height: auto
}

img[src*="thumb"]:hover {
    transform: scale(1.05)
}

#productImageModal .modal-body {
    padding: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .03)
}

#productImageModal .modal-content {
    border-radius: 8px;
    overflow: hidden
}

#modalProductImage {
    max-height: 80vh;
    object-fit: contain;
    padding: 10px
}

[data-theme="dark"] #productImageModal .modal-body {
    background-color: rgba(255, 255, 255, .03)
}

.modal-backdrop+.modal-backdrop {
    opacity: .5
}

@media (max-width:768px) {
    #productImageModal .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem)
    }

    #modalProductImage {
        max-height: 70vh
    }
}