/* Grid Layout */
.elementor-widget-my-product-grid-slider .my-product-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 4), 1fr); /* Elementor dynamically sets --grid-columns */
    gap: 20px; /* Example gap */
}

/* Masonry requires JS, but basic styling for items */
.elementor-widget-my-product-grid-slider .my-product-masonry .my-product-card {
    /* Masonry items usually need a fixed width or flex-basis */
    width: calc( (100% / var(--grid-columns, 4)) - 20px ); /* Example for responsive masonry */
}


/* Product Card Base */
.elementor-widget-my-product-grid-slider .my-product-card {
    background-color: var(--card-background-color, #fff); /* Dynamic background from Elementor */
    border: var(--card-border-type, none) var(--card-border-width, 0) var(--card-border-color, transparent);
    border-radius: var(--card-border-radius, 0);
    box-shadow: var(--card-box-shadow);
    padding: var(--card-padding, 15px);
    margin: var(--card-margin, 0);
    text-align: center;
    overflow: hidden; /* For image overflow */
}

.elementor-widget-my-product-grid-slider .my-product-image {
    position: relative;
    overflow: hidden;
}

.elementor-widget-my-product-grid-slider .my-product-image img {
    max-width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Crossfade Effect (Requires two images or clever background-image switching) */
.elementor-widget-my-product-grid-slider .my-product-image.crossfade img {
    opacity: 1;
    transition: opacity 0.3s ease;
}
.elementor-widget-my-product-grid-slider .my-product-image.crossfade:hover img {
    opacity: 0; /* Or swap src with JS */
}

/* Product Title */
.elementor-widget-my-product-grid-slider .product-title {
    font-family: var(--title-font-family, inherit);
    font-size: var(--title-font-size, 20px);
    color: var(--title-color, #333);
    margin: var(--title-margin-top, 10px) 0 var(--title-margin-bottom, 5px);
}

/* Inquiry Popup */
.my-product-inquiry-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--popup-overlay-background, rgba(0, 0, 0, 0.7));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.my-product-inquiry-popup-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.my-product-inquiry-popup {
    background-color: var(--popup-box-background, #fff);
    padding: var(--popup-box-padding, 30px);
    border-radius: var(--popup-box-border-radius, 5px);
    box-shadow: var(--popup-box-box-shadow, 0 0 15px rgba(0,0,0,0.3));
    position: relative;
    max-width: var(--popup-max-width, 600px);
    width: 90%;
}

.my-product-inquiry-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--popup-close-color, #999);
}

/* Prevent body scroll when popup is active */
body.my-product-popup-active {
    overflow: hidden;
}

/* Slider (Swiper.js specific) */
.my-product-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Customize Swiper navigation/pagination if needed */
.my-product-slider .swiper-button-next,
.my-product-slider .swiper-button-prev {
    color: var(--slider-arrow-color, #000);
    background-color: var(--slider-arrow-background, rgba(255,255,255,0.7));
    /* ... other styles */
}


.my-product-image {
    position: relative;
    overflow: hidden; /* Important for containing images */
}

.my-product-image .product-main-image,
.my-product-image .product-hover-image {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease-in-out;
}

.my-product-image .product-hover-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Hidden by default */
}

.my-product-card:hover .my-product-image .product-main-image {
    opacity: 0; /* Fade out main image on hover */
}

.my-product-card:hover .my-product-image .product-hover-image {
    opacity: 1; /* Fade in hover image on hover */
}