/* Mobile Product Grid Enhancements */

/* Optimized product grid for better space utilization */
@media screen and (max-width: 768px) {
    /* Products page main container - more compact */
    .w3-container {
        padding: 12px 6px !important;
    }
    
    /* Product grid responsive layout - more columns */
    .w3-row-padding[style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columns on mobile */
        grid-gap: 8px !important;
        justify-content: center !important;
        margin: 12px 2px !important;
    }
    
    /* Product card mobile optimization */
    .w3-row-padding .w3-margin-bottom {
        margin-bottom: 0 !important;
    }
    
    .w3-card.w3-white.w3-round {
        border-radius: 6px !important;
        height: auto !important;
        overflow: hidden;
    }
    
    /* Product image mobile - smaller */
    .w3-card img.w3-image {
        height: 120px !important;
        object-fit: cover !important;
    }
    
    /* Product info container mobile - more compact */
    .w3-card .w3-container {
        padding: 8px !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
    }
    
    /* Product title mobile - smaller */
    .w3-card h3.w3-playfair {
        font-size: 0.8rem !important;
        line-height: 1.1 !important;
        height: auto !important;
        margin-bottom: 4px !important;
        overflow: visible !important;
    }
    
    /* Product brand mobile */
    .w3-card .w3-text-grey.w3-small {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
    }
    
    /* Product description mobile */
    .w3-card p.w3-text-grey {
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
        max-height: 2.6em !important;
        margin-bottom: 8px !important;
    }
    
    /* Product price mobile */
    .w3-luxury-gold.w3-xlarge {
        font-size: 1.1rem !important;
    }
    
    /* Favorite button mobile */
    .w3-button.w3-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
        min-width: 28px !important;
    }
    
    /* Quantity and cart section mobile */
    .w3-card form .w3-row {
        margin-bottom: 8px !important;
    }
    
    .w3-card form .w3-col.s4 input {
        height: 30px !important;
        font-size: 0.8rem !important;
        padding: 4px 6px !important;
    }
    
    .w3-card form .w3-col.s8 button {
        height: 30px !important;
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
        line-height: 1.2 !important;
    }
    
    .w3-card form .w3-col.s8 {
        padding-left: 4px !important;
    }
    
    /* Category badge mobile */
    .w3-tag.w3-luxury-gold {
        font-size: 0.6rem !important;
        padding: 2px 6px !important;
        top: 6px !important;
        left: 6px !important;
    }
    
    /* Page header mobile */
    .w3-center.w3-margin-bottom h1 {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }
    
    .w3-center.w3-margin-bottom p {
        font-size: 0.9rem !important;
        margin-top: 8px !important;
        padding: 0 16px;
    }
    
    /* Debug panel mobile */
    .w3-panel {
        margin: 8px 4px !important;
        padding: 12px !important;
        font-size: 0.85rem !important;
    }
    
    /* No products found mobile */
    .w3-center.w3-padding-64 {
        padding: 32px 16px !important;
    }
    
    .w3-center.w3-padding-64 .w3-text-grey[style*="font-size: 4rem"] {
        font-size: 2.5rem !important;
        margin-bottom: 16px !important;
    }
    
    .w3-center.w3-padding-64 h3 {
        font-size: 1.3rem !important;
    }
    
    .w3-center.w3-padding-64 p {
        font-size: 0.9rem !important;
        padding: 0 16px;
    }
    
    /* Action buttons mobile */
    .w3-center.w3-padding-64 .w3-button {
        font-size: 0.85rem !important;
        padding: 8px 16px !important;
        margin: 4px !important;
    }
}

/* Small mobile phones (up to 480px) */
@media screen and (max-width: 480px) {
    /* Single column layout for very small screens */
    .w3-row-padding[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        max-width: 100%;
        margin: 16px 8px !important;
    }
    
    /* Larger product cards on small screens */
    .w3-card img.w3-image {
        height: 180px !important;
    }
    
    .w3-card .w3-container.w3-padding-16 {
        padding: 16px !important;
    }
    
    .w3-card h3.w3-playfair {
        font-size: 1rem !important;
    }
    
    .w3-luxury-gold.w3-xlarge {
        font-size: 1.2rem !important;
    }
    
    /* Better spacing for single column */
    .w3-row-padding[style*="grid-template-columns"] {
        grid-gap: 16px !important;
    }
}

/* Very small screens (up to 320px) */
@media screen and (max-width: 320px) {
    .w3-container.w3-padding-64 {
        padding: 24px 4px !important;
    }
    
    .w3-row-padding[style*="grid-template-columns"] {
        margin: 12px 0 !important;
        grid-gap: 12px !important;
    }
    
    .w3-card .w3-container.w3-padding-16 {
        padding: 12px !important;
    }
    
    .w3-center.w3-margin-bottom h1 {
        font-size: 1.5rem !important;
    }
}

/* Landscape orientation for mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .w3-row-padding[style*="grid-template-columns"] {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 columns in landscape */
    }
    
    .w3-card img.w3-image {
        height: 120px !important;
    }
    
    .w3-card .w3-container.w3-padding-16 {
        padding: 10px !important;
    }
    
    .w3-card h3.w3-playfair {
        font-size: 0.85rem !important;
    }
    
    .w3-card form .w3-col.s4 input,
    .w3-card form .w3-col.s8 button {
        height: 26px !important;
        font-size: 0.7rem !important;
    }
}

/* Touch-friendly improvements for product cards */
@media (hover: none) and (pointer: coarse) {
    .w3-card form button,
    .w3-button.w3-circle {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .w3-card form .w3-col.s8 button {
        min-height: 36px !important;
        height: 36px !important;
    }
    
    .w3-button.w3-circle {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* Remove hover effects on touch devices */
    .w3-card img.w3-image {
        transition: none !important;
    }
    
    .w3-card.w3-hover-shadow:hover {
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12) !important;
    }
}

/* Category navigation mobile */
@media screen and (max-width: 768px) {
    .w3-center.w3-margin-top.w3-padding-32 {
        padding: 16px 8px !important;
    }
    
    .w3-center.w3-margin-top.w3-padding-32 .w3-button {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
        margin: 3px !important;
    }
}

/* Loading states for mobile */
@media screen and (max-width: 768px) {
    .w3-card form button[disabled] {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .w3-card form button[disabled]::after {
        content: "...";
        animation: loading-dots 1s infinite;
    }
}

@keyframes loading-dots {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60%, 100% { content: "..."; }
}

/* Filter and search mobile enhancements */
@media screen and (max-width: 768px) {
    /* If there are filter sections, make them mobile-friendly */
    .filter-section {
        padding: 12px !important;
        margin: 8px 4px !important;
    }
    
    .filter-section select,
    .filter-section input {
        height: 40px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    .filter-section button {
        height: 40px !important;
        min-width: 44px !important;
        font-size: 0.9rem !important;
    }
}

/* Accessibility improvements */
@media screen and (max-width: 768px) {
    .w3-card:focus-within {
        outline: 2px solid #D4AF37;
        outline-offset: 2px;
    }
    
    .w3-card form button:focus {
        outline: 2px solid #D4AF37;
        outline-offset: 2px;
    }
    
    /* Ensure text is readable */
    .w3-card p,
    .w3-card h3,
    .w3-card span {
        color: #333 !important;
    }
    
    .w3-text-grey {
        color: #666 !important;
    }
}