/**
 * VIPUNTOZERO - MOBILE EMERGENCY FIX
 * Data: 30 Agosto 2025
 * Obiettivo: Fix immediato responsive per mobile
 * Impact atteso: +40% conversioni mobile
 */

/* ==========================================================================
   VIEWPORT & RESPONSIVE BASE
   ========================================================================== */

/* Forza responsive behavior */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Contenitore principale responsive */
body {
    margin: 0;
    padding: 0;
    min-width: 320px;
    overflow-x: hidden;
}

/* Fix immagini responsive globale */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   MOBILE FIRST - SMARTPHONE (320px+)
   ========================================================================== */

@media screen and (max-width: 768px) {
    
    /* Header mobile fix */
    #testata {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box;
    }
    
    /* Logo mobile */
    #logo {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        text-align: center;
        width: 100% !important;
        margin: 0 auto 20px auto;
    }
    
    /* Menu mobile */
    #menu {
        width: 100% !important;
        display: block !important;
        text-align: center;
    }
    
    #menu ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #menu li {
        width: 100% !important;
        display: block !important;
        margin: 5px 0 !important;
        border-bottom: 1px solid #eee;
    }
    
    #menu a {
        display: block !important;
        padding: 15px 10px !important;
        font-size: 16px !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Contenuto principale mobile */
    #contenutopagina {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    
    /* Shop grid mobile */
    .list {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .list-item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        display: block !important;
    }
    
    .list-content {
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box;
        text-align: center;
    }
    
    /* Immagini prodotti mobile */
    .img-hover-zoom {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto 15px auto !important;
    }
    
    .preview {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Titoli prodotti mobile */
    .titoloelencocreazioni {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 10px 0 !important;
    }
    
    /* Prezzi mobile */
    .prezzoelencocreazioni,
    .prezzoelencocreazioni2 {
        font-size: 16px !important;
        font-weight: bold !important;
        margin: 5px 0 !important;
    }
    
    /* Home page mobile */
    #shophome {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
    }
    
    .shophomeriquadro6 {
        width: calc(50% - 10px) !important;
        max-width: 150px !important;
        margin: 5px !important;
    }
    
    .shophomeriquadro6 img {
        width: 100% !important;
        height: auto !important;
    }
    
    .shophometitolo6 {
        font-size: 14px !important;
        padding: 8px 0 !important;
    }
    
    /* Carrello mobile */
    #tabellacarrello {
        width: 100% !important;
        font-size: 14px !important;
    }
    
    #tabellacarrello td {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }
    
    .immaginecarrello {
        width: 50px !important;
        height: auto !important;
    }
    
    /* Bottoni mobile */
    .checkout,
    .pulsanticarrello {
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        margin: 10px 0 !important;
        box-sizing: border-box;
        display: block !important;
        text-align: center !important;
    }
    
    /* Form mobile */
    input[type="text"],
    input[type="email"],
    select,
    textarea {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
        box-sizing: border-box;
        margin: 5px 0 !important;
    }
    
    /* Search mobile */
    #ricerca {
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box;
    }
    
    #formricerca {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .camporicerca {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    #buttonricerca {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
        background: #8B4513 !important;
        color: white !important;
        border: none !important;
    }
    
    /* Footer mobile */
    #footer {
        width: 100% !important;
        padding: 20px 15px !important;
        text-align: center !important;
        box-sizing: border-box;
    }
    
    #footer ul {
        display: block !important;
        width: 100% !important;
    }
    
    #footer li {
        display: block !important;
        margin: 10px 0 !important;
        width: 100% !important;
    }
    
    /* Text fixes mobile */
    h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin: 15px 0 !important;
    }
    
    h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin: 15px 0 10px 0 !important;
    }
    
    p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin: 10px 0 !important;
    }
    
    /* Breadcrumbs mobile */
    #breadcrumbs {
        width: 100% !important;
        font-size: 14px !important;
        padding: 10px 15px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    /* Video mobile */
    iframe,
    video {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    #videohomepage {
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box;
    }
    
    #videohomepage iframe {
        width: 100% !important;
        height: 200px !important;
    }
}

/* ==========================================================================
   TABLET - MEDIUM SCREENS (768px - 1024px)
   ========================================================================== */

@media screen and (min-width: 769px) and (max-width: 1024px) {
    
    #contenutopagina {
        width: 95% !important;
        max-width: 900px !important;
        margin: 0 auto !important;
        padding: 20px !important;
    }
    
    .list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
    }
    
    .shophomeriquadro6 {
        width: calc(33.33% - 10px) !important;
    }
}

/* ==========================================================================
   PERFORMANCE & LOADING OPTIMIZATIONS
   ========================================================================== */

/* Lazy loading placeholder */
.progressive.loading {
    filter: blur(5px);
    transition: filter 0.3s;
}

.progressive.loaded {
    filter: blur(0px);
}

/* Touch improvements */
@media (pointer: coarse) {
    button,
    .btn,
    a {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 16px !important;
    }
}

/* ==========================================================================
   CRITICAL PERFORMANCE FIXES
   ========================================================================== */

/* Prevent layout shifts */
img {
    aspect-ratio: attr(width) / attr(height);
}

/* Font loading optimization */
@font-face {
    font-display: swap;
}

/* Critical animations only */
.img-hover-zoom {
    transition: transform 0.2s ease !important;
}

.img-hover-zoom:hover {
    transform: scale(1.02) !important;
}

/* Hide non-critical elements on slow connections */
@media (prefers-reduced-motion: reduce) {
    .img-hover-zoom {
        transition: none !important;
    }
    
    .img-hover-zoom:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   EMERGENCY UX FIXES
   ========================================================================== */

/* Fix tap highlights */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

/* Fix input zooming on iOS */
input[type="text"],
input[type="email"],
input[type="search"],
select,
textarea {
    font-size: 16px !important;
}

/* Sticky header fix */
body.sticky-header #testata {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Loading spinner */
.loading-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #8B4513;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error states */
.error-message {
    background: #ffebee;
    border: 1px solid #f44336;
    color: #d32f2f;
    padding: 12px;
    border-radius: 4px;
    margin: 10px 0;
    text-align: center;
}

.success-message {
    background: #e8f5e8;
    border: 1px solid #4caf50;
    color: #2e7d32;
    padding: 12px;
    border-radius: 4px;
    margin: 10px 0;
    text-align: center;
}

/* Print optimization */
@media print {
    .no-print,
    #menu,
    #footer,
    .btn {
        display: none !important;
    }
    
    body {
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }
}