/* Enhanced Mobile Optimizations for Bobby Streetwear */
/* Building on existing mobile-optimizations.css */

/* Improved Safe Area Support for Modern Mobile Devices */
@supports (padding: max(0px)) {
    .navbar {
        padding-top: max(0.5rem, env(safe-area-inset-top));
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
    
    .hero {
        padding-top: max(90px, calc(80px + env(safe-area-inset-top)));
    }
    
    .loading-screen {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* Enhanced Touch Interactions */
@media (max-width: 768px) {
    /* Improved button feedback */
    .cta-btn:active,
    .cart-btn:active,
    .hologram-btn:active,
    .add-to-cart-btn:active,
    .quick-view-btn:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    /* Better product card interactions */
    .product-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .product-card:active {
        transform: scale(0.98);
    }
    
    /* Enhanced navigation touch targets */
    .nav-link {
        padding: 0.75rem 0.5rem;
        margin: 0 0.25rem;
        border-radius: 4px;
        transition: background-color 0.2s ease;
    }
    
    .nav-link:active {
        background-color: rgba(139, 92, 246, 0.1);
    }
}

/* Improved Typography for Mobile Readability */
@media (max-width: 768px) {
    /* Better line heights for mobile reading */
    .hero-description {
        line-height: 1.7;
        font-size: 1.1rem;
    }
    
    .about-description {
        line-height: 1.8;
        font-size: 1.05rem;
    }
    
    /* Improved heading hierarchy */
    .section-title {
        line-height: 1.2;
        margin-bottom: 2.5rem;
    }
    
    /* Better product text readability */
    .product-name {
        line-height: 1.4;
        margin-bottom: 0.75rem;
    }
    
    .product-price {
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    
    /* Fix for "THE TECH ANIMAL COLLECTION" hyphenation on mobile */
    .collection-title-main {
        hyphens: none !important;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
    
    /* Ensure proper spacing for collection title on mobile */
    @media (max-width: 768px) {
        .collection-title-main {
            font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
            padding: 0 20px !important;
            margin: 0 auto !important;
            max-width: 100% !important;
        }
    }
    
    @media (max-width: 480px) {
        .collection-title-main {
            font-size: clamp(1.3rem, 4.5vw, 2rem) !important;
            padding: 0 15px !important;
        }
    }
    
    /* COMPREHENSIVE MOBILE BLUR FIX - Crystal Clear Product Images */
    @media (max-width: 768px) {
        /* Remove all backdrop-filter effects that cause blur on mobile */
        .product-collection::after {
            filter: none !important;
            opacity: 0.3 !important;
        }
        
        /* Target ALL product card selectors to ensure no blur */
        .product-card,
        .product-card *,
        .product-grid .product-card,
        .product-grid-scroll .product-card,
        .products-grid .product-card,
        .collection .product-card,
        .product-image,
        .product-image *,
        .product-image img,
        .product-overlay,
        .product-info {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            filter: none !important;
            -webkit-filter: none !important;
        }
        
        /* Ensure product images are crystal clear */
        .product-image img {
            image-rendering: -webkit-optimize-contrast !important;
            image-rendering: crisp-edges !important;
            image-rendering: pixelated !important;
            image-rendering: optimizeQuality !important;
            -webkit-backface-visibility: hidden !important;
            backface-visibility: hidden !important;
            transform: translateZ(0) !important;
            will-change: auto !important;
        }
        
        /* Fix any remaining blur on collection controls */
        .collection-controls {
            backdrop-filter: blur(3px) !important;
            -webkit-backdrop-filter: blur(3px) !important;
        }
        
        /* Ensure clear backgrounds for product cards */
        .product-card {
            background: rgba(26, 26, 46, 0.95) !important;
        }
    }
    
    @media (max-width: 480px) {
        /* Complete removal of all blur effects on small mobile devices */
        .product-collection::after {
            display: none !important;
        }
        
        .collection-controls {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            background: rgba(26, 26, 46, 0.98) !important;
        }
        
        /* Comprehensive product card blur removal */
        .product-card,
        .product-card *,
        .product-grid .product-card,
        .product-grid-scroll .product-card,
        .products-grid .product-card,
        .collection .product-card,
        .product-image,
        .product-image *,
        .product-image img,
        .product-overlay,
        .product-info,
        .product-name,
        .product-price {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            filter: none !important;
            -webkit-filter: none !important;
            background: rgba(26, 26, 46, 0.95) !important;
        }
        
        /* Override any inherited blur effects */
        * {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        
        /* Restore necessary backgrounds only where needed */
        .navbar {
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
        }
        
        .cart-content {
            backdrop-filter: blur(5px) !important;
            -webkit-backdrop-filter: blur(5px) !important;
        }
    }
}

/* Enhanced Loading Screen for Mobile */
@media (max-width: 768px) {
    .loading-container {
        padding: 0 30px;
        max-width: 100%;
    }
    
    .loading-logo-container {
        margin-bottom: 3rem;
    }
    
    .loading-text {
        margin-bottom: 3.5rem;
    }
    
    .progress-container {
        max-width: 320px;
        margin: 0 auto;
    }
    
    .progress-bar {
        height: 10px;
        border-radius: 6px;
    }
    
    .progress-text {
        font-size: 1.1rem;
        margin-top: 1.25rem;
    }
}

@media (max-width: 480px) {
    .loading-container {
        padding: 0 20px;
    }
    
    .progress-container {
        max-width: 280px;
    }
    
    .loading-text .glitch-text {
        font-size: 1.3rem;
        letter-spacing: 1px;
    }
}

/* Enhanced Product Grid Mobile Experience */
@media (max-width: 768px) {
    .product-grid-scroll {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }
    
    .product-grid-scroll .product-card {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    
    /* Better product overlay for mobile */
    .product-overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(2px);
    }
    
    .product-action-btn {
        opacity: 1;
        transform: translateY(0);
        position: static;
        margin: 0.75rem 0.5rem;
        padding: 0.875rem 1.25rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
}

/* Enhanced Navigation for Mobile */
@media (max-width: 768px) {
    .nav-container {
        position: relative;
        min-height: 60px;
    }
    
    .nav-logo {
        z-index: 1001;
    }
    
    .nav-actions {
        z-index: 1001;
    }
    
    /* Better cart button styling */
    .cart-btn {
        background: rgba(139, 92, 246, 0.1);
        border: 2px solid var(--accent-purple);
        backdrop-filter: blur(10px);
    }
    
    .cart-btn:hover,
    .cart-btn:active {
        background: var(--accent-purple);
        transform: scale(0.95);
    }
}

/* Enhanced Footer for Mobile */
@media (max-width: 768px) {
    .footer {
        padding: 3rem 0 2rem;
    }
    
    .footer-content {
        gap: 2.5rem;
        text-align: center;
    }
    
    .footer-title {
        font-size: 1.3rem;
        margin-bottom: 1.25rem;
    }
    
    .footer-text {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 0.75rem;
    }
    
    .footer-links li {
        margin-bottom: 0.75rem;
    }
    
    .footer-links a {
        font-size: 1rem;
        padding: 0.5rem;
        display: inline-block;
        border-radius: 4px;
        transition: all 0.2s ease;
    }
    
    .footer-links a:active {
        background-color: rgba(139, 92, 246, 0.1);
    }
    
    .social-links-footer {
        justify-content: center;
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .ascii-footer {
        margin-bottom: 1.5rem;
        overflow-x: auto;
        padding: 0 10px;
    }
    
    .ascii-footer pre {
        font-size: 0.6rem;
        line-height: 1.1;
        white-space: pre;
        min-width: 300px;
    }
    
    .copyright {
        font-size: 0.95rem;
        padding: 0 20px;
    }
}

/* Enhanced About Section for Mobile */
@media (max-width: 768px) {
    .about {
        padding: 5rem 0 4rem;
    }
    
    .about-content {
        gap: 3.5rem;
    }
    
    .ascii-art {
        padding: 2rem 1.5rem;
        border-radius: 12px;
        margin-top: 2.5rem;
    }
    
    .ascii-bobby {
        font-size: 0.85rem;
        line-height: 1.3;
        overflow-x: auto;
    }
    
    .tech-grid {
        gap: 1.25rem;
        margin-top: 2rem;
    }
    
    .grid-item {
        height: 140px;
        border-radius: 12px;
    }
    
    .grid-image {
        border-radius: 8px;
    }
}

/* Enhanced Collection Section for Mobile */
@media (max-width: 768px) {
    .collection {
        padding: 7rem 0 5rem;
    }
    
    .arrow-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding: 0 30px;
    }
    
    .arrow {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 2px solid var(--accent-purple);
        background: rgba(139, 92, 246, 0.1);
        color: var(--accent-purple);
        font-size: 1.2rem;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s ease;
        backdrop-filter: blur(10px);
    }
    
    .arrow:active {
        transform: scale(0.9);
        background: var(--accent-purple);
        color: white;
    }
    
    .view-all-container {
        margin-top: 3rem;
        padding: 0 30px;
    }
    
    .view-all-btn {
        border-radius: 12px;
        padding: 1.25rem 2rem;
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: 1px;
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    }
}

/* Performance Optimizations for Mobile */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    .bg-pattern {
        animation-duration: 180s;
        opacity: 0.3;
    }
    
    .glitch-overlay {
        animation-duration: 20s;
    }
    
    .grid-details {
        animation-duration: 150s;
        opacity: 0.5;
    }
    
    /* Simplify particle effects */
    .particle-field {
        opacity: 0.02;
        animation-duration: 8s;
    }
    
    .loading-particles::before,
    .loading-particles::after {
        animation-duration: 12s, 16s;
    }
    
    /* Optimize image rendering */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .product-image img {
        will-change: transform;
    }
}

/* Enhanced Accessibility for Mobile */
@media (max-width: 768px) {
    /* Better focus indicators */
    button:focus-visible,
    .btn:focus-visible,
    a:focus-visible {
        outline: 3px solid var(--accent-yellow);
        outline-offset: 3px;
        border-radius: 4px;
    }
    
    /* Improved contrast for better readability */
    .nav-link {
        color: rgba(255, 255, 255, 0.95);
    }
    
    .footer-links a {
        color: rgba(255, 255, 255, 0.9);
    }
    
    /* Better button states */
    .cta-btn:focus-visible,
    .cart-btn:focus-visible {
        box-shadow: 0 0 0 3px var(--accent-yellow);
    }
}

/* Enhanced Landscape Mode Support */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        padding-top: 70px;
    }
    
    .hero-content {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 2.5rem;
        align-items: center;
        text-align: left;
    }
    
    .hero-title {
        font-size: clamp(2rem, 5vw, 2.8rem);
        margin-bottom: 1rem;
    }
    
    .subtitle {
        font-size: clamp(1.1rem, 3vw, 1.4rem);
    }
    
    .hero-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .product-3d {
        width: min(220px, 35vw);
        height: min(220px, 35vw);
    }
    
    .collection {
        padding: 5rem 0 4rem;
    }
    
    .about {
        padding: 4rem 0 3rem;
    }
    
    .loading-container {
        display: flex;
        align-items: center;
        gap: 3rem;
        text-align: left;
    }
    
    .loading-logo-container {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .loading-text {
        margin-bottom: 2rem;
    }
}

/* Very Small Devices Enhancements */
@media (max-width: 360px) {
    .container {
        padding: 0 12px;
    }
    
    .nav-container {
        padding: 0 12px;
    }
    
    .hero-content {
        padding: 0 5px;
    }
    
    .section-title {
        padding: 0 15px;
    }
    
    .product-grid,
    .products-grid {
        padding: 0 12px;
    }
    
    .arrow-container {
        padding: 0 20px;
    }
    
    .view-all-container {
        padding: 0 20px;
    }
    
    .footer-content {
        padding: 0 15px;
    }
    
    .ascii-footer {
        padding: 0 5px;
    }
    
    .copyright {
        padding: 0 15px;
    }
}

/* High DPI Display Optimizations */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    .loading-logo,
    .nav-logo-img,
    .product-img {
        image-rendering: -webkit-optimize-contrast;
    }
    
    .glitch-text,
    .nav-brand {
        text-rendering: optimizeLegibility;
    }
}

/* Dark Mode Enhancements for Mobile */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    .product-image {
        background: #0a0a0a;
    }
    
    .cart-btn {
        background: rgba(139, 92, 246, 0.15);
    }
    
    .arrow {
        background: rgba(139, 92, 246, 0.15);
    }
}

/* Reduced Motion Support for Mobile */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .bg-pattern,
    .glitch-overlay,
    .grid-details,
    .particle-field,
    .loading-particles::before,
    .loading-particles::after {
        animation: none !important;
    }
    
    .product-3d {
        animation: none !important;
    }
    
    .loading-cookie {
        animation: none !important;
    }
    
    .cookie-crumbs::before,
    .cookie-crumbs::after,
    .cookie-pixels::before,
    .cookie-pixels::after {
        animation: none !important;
    }
    
    * {
        transition-duration: 0.1s !important;
    }
}

/* Print Styles for Mobile */
@media print {
    .navbar,
    .loading-screen,
    .bg-pattern,
    .glitch-overlay,
    .grid-details,
    .particle-field,
    .loading-particles {
        display: none !important;
    }
    
    .hero,
    .collection,
    .about {
        page-break-inside: avoid;
    }
    
    .product-card {
        break-inside: avoid;
    }
}