#plugin-client-modal {
    position: fixed;
    background: #c8c8c859;
    top: 0;
    border: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
#plugin-client-modal-loader {
    position: absolute;
}
#wpp-image-resize-panel h2.woocommerce-loop-product__title {
    display: none;
}
#wpp-image-resize-panel span.price {
    display: none !important;
}
#wpp-image-resize-panel ul.products::before,
#wpp-image-resize-panel ul.products::after {
    content: none;
}
/* Grid layout for the product list */
#wpp-image-resize-panel ul.products {
    grid-template-columns: repeat(5, 70px); /* 5 columns with 70px width each */
    display: grid;
    gap: 5px;
    list-style: none; /* Remove default list styling */
    padding: 0; /* Remove extra padding */
    margin: 0; /* Remove extra margin */
    grid-auto-flow: inherit;
}

/* Product item styling */
#wpp-image-resize-panel ul.products li {
    width: 72px;
    height: 72px;
    border: 1px solid #ccc;
    margin: 0;
    padding: 0;
    border-radius: 2px;
}

/* Image styling */
#wpp-image-resize-panel img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail.wvs-archive-product-image {
    margin: 0 !important;
    padding: 0 !important;
    width: 70px;
    height: 70px;
    object-fit: cover; /* Ensure the image fits perfectly within the container */
}

/* Mobile layout: 6 columns */
@media only screen and (max-width: 768px) {
    #wpp-image-resize-panel ul.products {
        grid-template-columns: repeat(6, 60px); /* Change to 6 columns with 70px width */
        gap: 5px; /* Reduce gap size for mobile */
    }

    #wpp-image-resize-panel ul.products li {
        width: 62px;
        height: 62px;
        border: none;
    }
    
    #wpp-image-resize-panel img.attachment-woocommerce_thumbnail {
        width: 60px; /* Ensure images are 70px wide */
        height: 60px; /* Ensure images are 70px tall */
        border: 1px solid #ccc;
    }
}

/* Grid layout for tablet screens: 10 columns */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    #wpp-image-resize-panel ul.products {
        grid-template-columns: repeat(10, 60px); /* 10 columns with 60px width each */
        gap: 5px; /* Keep gap size consistent */
    }

    #wpp-image-resize-panel ul.products li {
        width: 62px;
        height: 62px;
        border: none;
    }

    #wpp-image-resize-panel img.attachment-woocommerce_thumbnail {
        width: 60px; /* Adjust image width for tablet */
        height: 60px; /* Adjust image height for tablet */
        border: 1px solid #ccc;
    }
}