/* Elementor Compatibility CSS for mykd-product-main */

/* Fix conflicts between Elementor Bootstrap grid and custom product layout */
.elementor-widget-woocommerce-products .mykd-product-main {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    overflow: visible !important;
    flex: 1 !important;
    max-width: 100% !important;
}

/* Allow Elementor grid to work properly - Match shop page layout */
.elementor-widget-woocommerce-products .woocommerce {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure Elementor's grid classes work */
.elementor-widget-woocommerce-products.elementor-grid-1,
.elementor-widget-woocommerce-products.elementor-grid-2,
.elementor-widget-woocommerce-products.elementor-grid-3,
.elementor-widget-woocommerce-products.elementor-grid-4,
.elementor-widget-woocommerce-products.elementor-grid-5,
.elementor-widget-woocommerce-products.elementor-grid-6 {
    width: 100% !important;
}

.elementor-widget-woocommerce-products .woocommerce .mykd-product-main {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Support for different column counts with proper spacing */
.elementor-widget-woocommerce-products.elementor-grid-1 .woocommerce .mykd-product-main {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.elementor-widget-woocommerce-products.elementor-grid-2 .woocommerce .mykd-product-main {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    margin: 0 10px 20px 0 !important;
}

.elementor-widget-woocommerce-products.elementor-grid-2 .woocommerce .mykd-product-main:nth-child(2n) {
    margin-right: 0 !important;
}

.elementor-widget-woocommerce-products.elementor-grid-3 .woocommerce .mykd-product-main {
    flex: 1 1 calc(33.333% - 14px) !important;
    max-width: calc(33.333% - 14px) !important;
    margin: 0 14px 20px 0 !important;
}

.elementor-widget-woocommerce-products.elementor-grid-3 .woocommerce .mykd-product-main:nth-child(3n) {
    margin-right: 0 !important;
}

.elementor-widget-woocommerce-products.elementor-grid-4 .woocommerce .mykd-product-main {
    flex: 1 1 calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
    margin: 0 15px 20px 0 !important;
}

.elementor-widget-woocommerce-products.elementor-grid-4 .woocommerce .mykd-product-main:nth-child(4n) {
    margin-right: 0 !important;
}

.elementor-widget-woocommerce-products.elementor-grid-5 .woocommerce .mykd-product-main {
    flex: 1 1 calc(20% - 16px) !important;
    max-width: calc(20% - 16px) !important;
    margin: 0 16px 20px 0 !important;
}

.elementor-widget-woocommerce-products.elementor-grid-5 .woocommerce .mykd-product-main:nth-child(5n) {
    margin-right: 0 !important;
}

.elementor-widget-woocommerce-products.elementor-grid-6 .woocommerce .mykd-product-main {
    flex: 1 1 calc(16.666% - 17px) !important;
    max-width: calc(16.666% - 17px) !important;
    margin: 0 17px 20px 0 !important;
}

.elementor-widget-woocommerce-products.elementor-grid-6 .woocommerce .mykd-product-main:nth-child(6n) {
    margin-right: 0 !important;
}

/* Ensure proper positioning for product items in Elementor - Match shop page exactly */
.elementor-widget-woocommerce-products .mykd-product-main .shop__item {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    padding: 19px !important;
    margin: 0 0 35px !important;
    display: block !important;
    float: none !important;
    overflow: visible !important;
}

.elementor-widget-woocommerce-products .mykd-product-main .shop__item-thumb {
    position: relative !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
    background: var(--tg-common-color-black) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix SVG positioning in Elementor - Match shop page */
.elementor-widget-woocommerce-products .mykd-product-main .shop__item svg {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Ensure product images display properly - Match shop page */
.elementor-widget-woocommerce-products .mykd-product-main .shop__item-thumb img {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px !important;
}

/* Fix product labels positioning - Match shop page */
.elementor-widget-woocommerce-products .mykd-product-main .wapl-label {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* Fix wishlist button positioning - Match shop page exactly */
.elementor-widget-woocommerce-products .mykd-product-main .shop__item-thumb .tinv-wraper {
    position: absolute !important;
    top: 4px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 11 !important;
    line-height: 1 !important;
    color: var(--tg-body-color) !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    min-width: auto !important;
}

/* Hide wishlist text, show only icon - Match shop page */
.elementor-widget-woocommerce-products .mykd-product-main .shop__item-thumb .tinvwl_add_to_wishlist-text,
.elementor-widget-woocommerce-products .mykd-product-main .shop__item-thumb .tinvwl_remove_from_wishlist-text {
    display: none !important;
}

.elementor-widget-woocommerce-products .mykd-product-main .shop__item-thumb .tinvwl_add_to_wishlist_button::before {
    margin: 0 0 !important;
}

.elementor-widget-woocommerce-products .mykd-product-main .shop__item-thumb .wishlist-button:hover {
    color: var(--tg-theme-primary) !important;
}

/* Ensure wishlist button is properly positioned within thumb */

.elementor-widget-woocommerce-products .mykd-product-main .shop__item-thumb .tinv-wraper .tinvwl_add_to_wishlist_button {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide duplicate wishlist buttons in Elementor - Keep only icon version in shop__item-thumb */
.elementor-widget-woocommerce-products .mykd-product-main .tinv-wraper:not(.shop__item-thumb .tinv-wraper) {
    display: none !important;
}

/* Hide specific wishlist button types that appear outside shop__item-thumb */
.elementor-widget-woocommerce-products .mykd-product-main .tinv-wraper.tinvwl-after-add-to-cart,
.elementor-widget-woocommerce-products .mykd-product-main .tinv-wraper.tinvwl-loop-button-wrapper,
.elementor-widget-woocommerce-products .mykd-product-main .tinv-wraper.tinvwl-woocommerce_after_shop_loop_item {
    display: none !important;
}

/* Ensure proper content layout - Match shop page */
.elementor-widget-woocommerce-products .mykd-product-main .shop__item-content {
    position: relative !important;
    z-index: 3 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Fix line separator - Match shop page exactly */
.elementor-widget-woocommerce-products .mykd-product-main .shop__item-line {
    display: block !important;
    width: 100% !important;
    background: rgb(245, 246, 249) !important;
    background: radial-gradient(circle, rgb(245, 246, 249) 0%, rgba(255, 255, 255, 0) 100%) !important;
    height: 1px !important;
    opacity: 0.15 !important;
    margin: 18px 0 25px !important;
}

/* Override Bootstrap grid conflicts - Match shop page */
.elementor-widget-woocommerce-products .row .mykd-product-main {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
}

/* Fix Elementor container conflicts */
.elementor-widget-woocommerce-products .e-con .mykd-product-main {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
}

/* Fix any Bootstrap column conflicts */
.elementor-widget-woocommerce-products .col .mykd-product-main {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Responsive adjustments for Elementor */
@media (max-width: 1024px) {
    .elementor-widget-woocommerce-products.elementor-grid-5 .woocommerce .mykd-product-main,
    .elementor-widget-woocommerce-products.elementor-grid-6 .woocommerce .mykd-product-main {
        flex: 1 1 calc(25% - 15px) !important;
        max-width: calc(25% - 15px) !important;
        margin: 0 15px 20px 0 !important;
    }
    
    /* Reset margin-right for all items first */
    .elementor-widget-woocommerce-products.elementor-grid-5 .woocommerce .mykd-product-main:nth-child(5n),
    .elementor-widget-woocommerce-products.elementor-grid-6 .woocommerce .mykd-product-main:nth-child(6n) {
        margin-right: 15px !important;
    }
    
    /* Then set margin-right: 0 for every 4th item (4-column layout) */
    .elementor-widget-woocommerce-products.elementor-grid-5 .woocommerce .mykd-product-main:nth-child(4n),
    .elementor-widget-woocommerce-products.elementor-grid-6 .woocommerce .mykd-product-main:nth-child(4n) {
        margin-right: 0 !important;
    }
}

@media (max-width: 768px) {
    .elementor-widget-woocommerce-products.elementor-grid-3 .woocommerce .mykd-product-main,
    .elementor-widget-woocommerce-products.elementor-grid-4 .woocommerce .mykd-product-main,
    .elementor-widget-woocommerce-products.elementor-grid-5 .woocommerce .mykd-product-main,
    .elementor-widget-woocommerce-products.elementor-grid-6 .woocommerce .mykd-product-main {
        flex: 1 1 calc(33.333% - 14px) !important;
        max-width: calc(33.333% - 14px) !important;
        margin: 0 14px 20px 0 !important;
    }
    
    /* Reset margin-right for all items first */
    .elementor-widget-woocommerce-products.elementor-grid-3 .woocommerce .mykd-product-main:nth-child(3n),
    .elementor-widget-woocommerce-products.elementor-grid-4 .woocommerce .mykd-product-main:nth-child(4n),
    .elementor-widget-woocommerce-products.elementor-grid-5 .woocommerce .mykd-product-main:nth-child(4n),
    .elementor-widget-woocommerce-products.elementor-grid-6 .woocommerce .mykd-product-main:nth-child(4n) {
        margin-right: 14px !important;
    }
    
    /* Then set margin-right: 0 for every 3rd item (3-column layout) */
    .elementor-widget-woocommerce-products.elementor-grid-3 .woocommerce .mykd-product-main:nth-child(3n),
    .elementor-widget-woocommerce-products.elementor-grid-4 .woocommerce .mykd-product-main:nth-child(3n),
    .elementor-widget-woocommerce-products.elementor-grid-5 .woocommerce .mykd-product-main:nth-child(3n),
    .elementor-widget-woocommerce-products.elementor-grid-6 .woocommerce .mykd-product-main:nth-child(3n) {
        margin-right: 0 !important;
    }
    
    .elementor-widget-woocommerce-products .mykd-product-main .wapl-label {
        top: 8px !important;
        left: 8px !important;
    }
    
    .elementor-widget-woocommerce-products .mykd-product-main .shop__item-thumb .tinv-wraper {
        top: 3px !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
    }
}

@media (max-width: 480px) {
    /* Force single column on mobile */
    .elementor-widget-woocommerce-products .woocommerce .mykd-product-main {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    
    .elementor-widget-woocommerce-products .mykd-product-main .wapl-label {
        top: 6px !important;
        left: 6px !important;
    }
    
    .elementor-widget-woocommerce-products .mykd-product-main .shop__item-thumb .tinv-wraper {
        top: 2px !important;
        right: 6px !important;
        left: auto !important;
        bottom: auto !important;
    }
}