/**
 * Mobile visibility fix for product grid
 * Fixes conflicts with other plugins
 */

/* Ensure mobile product grid is visible */
@media (max-width: 768px) {
    .ts-product-grid-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        z-index: 1 !important;
    }
    
    .ts-product-grid-mobile .custom-carousel-wrapper,
    .ts-product-grid-mobile .custom-carousel-carousel,
    .ts-product-grid-mobile .custom-carousel-inner,
    .ts-product-grid-mobile-category-grid {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    .ts-product-grid-mobile .product-grid-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    /* Override any conflicting full-width styles */
    .ts-product-grid,
    .ts-product-grid-mobile {
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Ensure search results are visible on mobile */
    .ts-search-results .ts-product-grid-mobile,
    .ts-search-grid-mobile,
    .ts-search-list-mobile {
        display: block !important;
        visibility: visible !important;
    }
}

/* Additional specificity to override Tailwind utilities */
@media (max-width: 768px) {
    body .ts-product-grid-mobile,
    body .ts-product-grid-mobile-category-grid,
    body .ts-search-results .ts-product-grid-mobile {
        display: block !important;
    }
    
    /* Fix for list layout on mobile */
    body .ts-product-list-mobile {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Ensure product cards are visible */
    body .ts-product-grid-mobile .product-grid-card,
    body .ts-product-grid-mobile-category-grid .product-grid-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    /* Fix for carousel items */
    body .custom-carousel-inner {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Ensure images are visible */
    body .product-grid-card-img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Force carousel/slider layout on mobile when no category */
    body .ts-product-grid-mobile .custom-carousel-wrapper {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    body .ts-product-grid-mobile .custom-carousel-carousel {
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    
    body .ts-product-grid-mobile .custom-carousel-inner {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }
    
    body .ts-product-grid-mobile .custom-carousel-inner .product-grid-card {
        flex: 0 0 calc(66.666% - 4px) !important; /* 1.5 cards visible */
        max-width: calc(66.666% - 4px) !important;
    }
    
    /* Hide grid layout on mobile when using carousel */
    body .ts-product-grid-mobile:not(:has(.ts-product-grid-mobile-category-grid)) .product-grid-card {
        display: block !important;
    }
}

/* Prevent any absolute positioning that might hide elements */
.ts-product-grid * {
    position: static !important;
}

.ts-product-grid .product-grid-card,
.ts-product-grid .product-grid-card-image,
.ts-product-grid .product-grid-card-info {
    position: relative !important;
}

/* Restore necessary absolute positioning */
.ts-product-grid .discount-ribbon,
.ts-product-grid .custom-product-badge,
.ts-product-grid .product-grid-card-trans {
    position: absolute !important;
}