/* ============================================
   TRENDING PRODUCTS - 2 COLUMN MOBILE LAYOUT
   Desktop: Untouched
   Mobile: 2 cards per row + WhatsApp on image corner
   ============================================ */

/* === MOBILE ONLY === */
@media (max-width: 768px) {
    /* 2-column grid for trending products */
    .products-grid-modern,
    .trending-grid,
    .cards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        padding: 0 12px !important;
    }

    /* Compact card styling */
    .product-card-modern {
        padding: 10px !important;
        border-radius: 16px !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Image container - relative for WhatsApp positioning */
    .product-image-modern {
        position: relative !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        aspect-ratio: 16 / 9 !important;
    }

    .product-image-modern img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* WhatsApp button - move to top-right corner of image */
    .product-card-modern .btn-whatsapp-modern {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 10 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        background: #25D366 !important;
        color: #fff !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
        border: 2px solid white !important;
        font-size: 18px !important;
    }

    .product-card-modern .btn-whatsapp-modern i {
        margin: 0 !important;
    }

    /* Hide WhatsApp text on mobile (icon only) */
    .product-card-modern .btn-whatsapp-modern span {
        display: none !important;
    }

    /* Compact typography */
    .product-title-modern {
        font-size: 14px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
        /* Limit to 2 lines with ellipsis */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .product-category-modern {
        font-size: 11px !important;
        padding: 3px 8px !important;
        margin-bottom: 6px !important;
    }

    .product-rating-modern {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .product-rating-modern .stars-modern {
        font-size: 11px !important;
    }

    .product-rating-modern .rating-count-modern {
        font-size: 10px !important;
    }

    /* Feature tags - smaller */
    .product-features-modern {
        gap: 4px !important;
        margin-bottom: 8px !important;
    }

    .feature-tag-modern {
        padding: 4px 8px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
    }

    /* Price section - compact */
    .product-price-modern {
        margin-bottom: 8px !important;
        gap: 6px !important;
    }

    .price-current-modern {
        font-size: 18px !important;
    }

    .price-original-modern {
        font-size: 13px !important;
    }

    .price-discount-modern {
        padding: 3px 6px !important;
        font-size: 10px !important;
    }

    /* Action buttons - adjust layout */
    .product-actions-modern {
        gap: 6px !important;
        flex-direction: column !important;
    }

    .btn-add-cart-modern {
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    /* Badge positioning */
    .product-badge-modern {
        top: 8px !important;
        left: 8px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    /* Overlay actions - smaller */
    .product-overlay-modern {
        border-radius: 12px !important;
    }

    .quick-action-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    /* Section header - compact */
    .section-header-modern {
        margin-bottom: 30px !important;
        padding: 0 12px !important;
    }

    .section-title-modern {
        font-size: 24px !important;
    }

    .section-subtitle-modern {
        font-size: 14px !important;
    }

    /* Container padding */
    .trending-products-modern {
        padding: 40px 0 !important;
    }
}

/* === Extra small mobile === */
@media (max-width: 480px) {
    .products-grid-modern,
    .trending-grid,
    .cards-grid {
        gap: 10px !important;
        padding: 0 10px !important;
    }

    .product-card-modern {
        padding: 8px !important;
        border-radius: 14px !important;
    }

    .product-image-modern {
        border-radius: 10px !important;
    }

    .product-title-modern {
        font-size: 13px !important;
    }

    .price-current-modern {
        font-size: 16px !important;
    }

    .btn-add-cart-modern {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    .product-card-modern .btn-whatsapp-modern {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        font-size: 16px !important;
        top: 6px !important;
        right: 6px !important;
    }
}

/* === DESKTOP UNTOUCHED === */
@media (min-width: 769px) {
    /* Ensure WhatsApp button stays in original position on desktop */
    .product-card-modern .btn-whatsapp-modern {
        position: static !important;
        width: auto !important;
        height: auto !important;
    }
}