Woocommerce converts products thumbnails to display as grid items to singular vertical block display on Safari

Question

We're using Uncode's Woocommerce product builder to display a product with a featured image and thumbnails to swap it out. However, on Safari and Internet Explorer, it converts the thumbnails to 100% block display that stacks vertically. Inspecting the section, it looks like it removes the active slide product gallery and just displays only the thumbnails as 100% width blocks and with a lightbox function. Is there a code I can implement to have it retain the grid style for these browsers and keep the active slide product gallery?

Link to page: https://kotisdesignstg.wpenginepowered.com/product/hoodie/

Woocommerce thumbnails in grid format on chrome

Woocommerce thumbnails stacked vertically on Safari

When inspecting, these were the classes I found that affected the grid area. So I tried implementing these:

.flex-control-nav {
    display: -ms-grid; /* Internet Explorer 10 */
    display: grid; /* Standard syntax */
    -ms-grid-columns: 1fr 1fr 1fr; /* Internet Explorer 10 */
    grid-template-columns: 1fr 1fr 1fr; /* Standard syntax */
}


.flex-control-thumbs {
    -ms-grid-column: auto; /* Internet Explorer 10 */
    -ms-grid-row: auto; /* Internet Explorer 10 */
    grid-column: auto; /* Standard syntax */
    grid-row: auto; /* Standard syntax */
    padding: 30px;
    background-color: #f2f2f2;
    text-align: center; 
}

However, it looks like safari removes these classes and replaces it with only .woocommerce-product-gallery__wrapper.