/* Mobile Optimizations for Product Cards */
@media (max-width: 768px) {
    /* Two-column layout for product cards on mobile */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Hide buttons on mobile for cleaner two-column layout */
    .product-button-container {
        display: none !important;
    }
    
    /* Reduce title font size by 2px equivalent and prevent overflow */
    .product-title {
        font-size: 1.2em !important; /* Reduced from 1.4em (approximately 2px smaller) */
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        line-height: 1.25 !important;
        padding: 0 20px !important; /* Reduced padding for better fit */
        margin-bottom: 20px !important; /* Adjust bottom margin */
    }
    
    /* Adjust category text for mobile */
    .product-category {
        padding: 20px 20px 0 20px !important; /* Reduced padding */
        font-size: 0.7em !important; /* Slightly smaller */
        margin-bottom: 12px !important;
    }
    
    /* Adjust overall content padding for mobile */
    .product-content {
        padding-bottom: 20px !important; /* Add bottom padding since button is hidden */
    }
    
    /* Ensure images don't overflow */
    .product-image {
        border-radius: 20px 20px 0 0 !important; /* Only round top corners */
    }
}

@media (max-width: 480px) {
    /* Further optimize for very small mobile screens */
    .product-title {
        font-size: 1.1em !important; /* Even smaller for very small screens */
        padding: 0 16px !important;
        line-height: 1.2 !important;
    }
    
    .product-category {
        padding: 16px 16px 0 16px !important;
        font-size: 0.65em !important;
        margin-bottom: 10px !important;
    }
    
    .product-content {
        padding-bottom: 16px !important;
    }
}