/* ========================================
   MOBILE.CSS - Mobile-only fixes
   Create this as: /assets/css/mobile.css
   ======================================== */

/* MOBILE ONLY - Under 768px */
@media (max-width: 768px) {
    
    /* Header stacks vertically */
    .header-content {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    /* Logo + Nav on same row */
    .logo {
        width: 100%;
    }
    
    /* Search full width */
    .header form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .header form input {
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    /* Nav stacks */
    .nav {
        width: 100%;
        flex-direction: column !important;
        gap: 0 !important;
        border-top: 1px solid #e5e7eb;
        padding-top: 0.5rem;
    }
    
    .nav a {
        padding: 0.75rem 0 !important;
        border-bottom: 1px solid #f3f4f6;
    }
    
    /* Actions stay horizontal but compact */
    .header-actions {
        width: 100%;
        justify-content: space-between !important;
    }
    
    .header-actions a {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .cart-btn {
        font-size: 0.875rem !important;
    }
    
    /* Product grids: 2 columns on mobile */
    .product-grid,
    .products-grid,
    [style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* Categories: 2 columns */
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* Typography smaller */
    h1 {
        font-size: 1.75rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    /* Spacing tighter */
    .section {
        padding: 2rem 0 !important;
    }
    
    /* Buttons touch-friendly */
    button, .btn, a.btn-primary {
        min-height: 44px !important;
    }
}

/* Very small mobile - still 2 columns (like Amazon) */
@media (max-width: 480px) {
    .product-grid,
    .categories-grid {
        gap: 0.5rem !important;
    }
}