/* Mobile Product Card Styles and Hover Behavior */

/* Mobile/Tablet - Remove Image Hover Effects (Under 1280px) */
@media (max-width: 1279px) {
    .product-card .productImage:hover .product-card-overlay,
    .product-card .productImage .product-card-overlay:hover,
    .product-card .productImage .product-card-hover-content,
    .product-card .productImage .quick-view-btn,
    .product-card .productImage .add-to-cart-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    .product-card .productImage {
        cursor: pointer;
    }
    
    .product-card .productImage:hover {
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* AGGRESSIVE: Remove ALL product card hover animations on mobile with high specificity */
    .product-card:hover,
    .product-card-container .product-card:hover,
    div.product-card:hover,
    .product-card.product-card:hover {
        transform: none !important;
        -webkit-transform: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        transition: none !important;
        -webkit-transition: none !important;
        animation: none !important;
        -webkit-animation: none !important;
    }
    
    /* Disable transitions on mobile for better performance with high specificity */
    .product-card,
    .product-card-container .product-card,
    div.product-card,
    .product-card.product-card {
        transition: none !important;
        -webkit-transition: none !important;
        animation: none !important;
        -webkit-animation: none !important;
    }
}

/* Additional mobile-specific rules for touch devices */
@media (hover: none) and (pointer: coarse) {
    /* This targets actual touch devices */
    .product-card:hover,
    .product-card-container .product-card:hover,
    div.product-card:hover {
        transform: none !important;
        -webkit-transform: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        transition: none !important;
        -webkit-transition: none !important;
    }
    
    .product-card,
    .product-card-container .product-card,
    div.product-card {
        transition: none !important;
        -webkit-transition: none !important;
    }
}

/* Disable image hover transitions on mobile */
@media (max-width: 1279px) {
    .product-card-main-image {
        transition: none !important;
        -webkit-transition: none !important;
    }
    
    /* Hide any hover overlays that might appear */
    .hover-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Hide overlay buttons on mobile to ensure clicks work */
    .product-card .AddtoCartBTN,
    .product-card .AddtoCart,
    .product-card .ProductFormOptions,
    .product-card .quickview,
    .product-card .button--small,
    .product-card .card-figcaption-button {
        display: none !important;
        pointer-events: none !important;
    }
    
    /* Ensure product image link is clickable */
    .product-card .product-card-image {
        pointer-events: auto !important;
        z-index: 10 !important;
        position: relative !important;
    }
    
    /* Ensure product title link is clickable */
    .product-card .product-title a {
        pointer-events: auto !important;
        z-index: 10 !important;
        position: relative !important;
    }
    
    /* Completely disable any zoom/scale effects on mobile */
    .product-card img,
    .product-card-main-image,
    .product-card .productImage img,
    .product-card .product-card-image img {
        transform: none !important;
        -webkit-transform: none !important;
        scale: none !important;
        zoom: 1 !important;
        transition: none !important;
        -webkit-transition: none !important;
    }
    
    /* Disable touch zoom on product cards */
    .product-card,
    .product-card-container,
    .product-card .productImage,
    .product-card .product-card-image {
        touch-action: pan-y !important; /* Allow vertical scrolling but prevent unwanted zoom */
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Remove any active/focus states that might cause zoom */
    .product-card:active,
    .product-card:focus,
    .product-card img:active,
    .product-card img:focus,
    .product-card-image:active,
    .product-card-image:focus {
        transform: none !important;
        -webkit-transform: none !important;
        outline: none !important;
    }
    
    /* Make entire product card clickable on mobile */
    .product-card {
        cursor: pointer !important;
        position: relative !important;
    }
    
    /* Ensure all child elements don't interfere with card click */
    .product-card * {
        pointer-events: none !important;
    }
    
    /* Re-enable pointer events for the card itself */
    .product-card {
        pointer-events: auto !important;
    }
    
    /* Improve scrolling behavior on product cards */
    .products-grid {
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
        overscroll-behavior-y: contain !important; /* Prevent scroll chain to parent */
    }
    
    /* Add visual feedback for mobile taps */
    .product-card:active {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
}

/* Mobile PLP Product Card Styles - Phone Only */
@media (max-width: 760px) {
    /* Hide Wishlist Button on Phones */
    .product-card .wishlist-btn,
    .product-card .add-to-wishlist,
    .product-card .wishlist-button,
    .product-card [data-wishlist],
    .product-card .btn-wishlist {
        display: none !important;
    }
    
    /* Hide Product Favorite on Phones */
    .product-favorite {
        display: none !important;
    }
    
    .product-card-container .productImage {
        position: relative;
        width: 150px !important;
        height: 150px !important;
        overflow: visible !important;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        flex-shrink: 0;
    }
    
    .product-card-container .productImage img,
    .product-card-container .productImage .product-card-main-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .product-card-container .product-card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex !important;
        gap: 6px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row !important;
        border-radius: 6px;
        overflow: hidden;
        align-items: flex-start;
    }

    .product-card-container .product-card-details {
        padding: 15px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 4px;
        max-width: calc(100% - 150px);
        flex: 1;
    }
}