/* Patch per popup - testo centrato */
#popup {
    text-align: center !important;
}
/* =====================================================================
PATCH MOBILE FOB2 - patch-mobile.css

PROBLEMA IDENTIFICATO:

- CSS ha larghezze fisse (960px) che causano overflow su mobile
- Carousel item ha width fissa 150px che non si adatta
- Button products ha positioning assoluto che esce dallo schermo

SOLUZIONE: Override mirati solo per mobile mantenendo desktop intatto
===================================================================== */

/* Previeni overflow orizzontale globale */
html {
overflow-x: hidden;
}

body {
overflow-x: hidden;
}

/* PATCH MOBILE - Solo per schermi <= 768px */
@media screen and (max-width: 768px) {

/* PATCH 1: Header container - da 960px fisso a responsive */
#header_content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
}

/* PATCH 2: Logo - da float left a centrato */
#logo {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
}

#logo img {
    max-width: 280px !important;
    width: auto !important;
    height: auto !important;
}

/* PATCH 3: Menu - da float con margini fissi a responsive */
#menu {
    float: none !important;
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    text-align: center !important;
}

/* PATCH 4: Container immagini - da 960px fisso a responsive */
#img_container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* PATCH 5: Carousel item - da 150px fisso a responsive */
.carousel-item {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* PATCH 6: Immagini carousel - mantieni aspetto */
.carousel-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
}

/* PATCH 7: Button products - da positioning assoluto fisso a responsive */
#button_products {
    position: absolute !important;
    width: 80% !important;
    max-width: 250px !important;
    left: 10% !important;
    right: auto !important;
    bottom: 20px !important;
    font-size: 14pt !important;
    padding: 8px 15px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* PATCH 8: Main text box - da 960px fisso a responsive */
#main_text_box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    margin: 20px 0 !important;
    box-sizing: border-box !important;
}

/* PATCH 9: Img shadow - da 960px fisso a responsive */
#img_shadow {
    width: 100% !important;
    max-width: 100% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* PATCH 10: Thumbs container - da 960px fisso a responsive */
#thumbs_container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* PATCH 11: Cerchi - mantieni funzionalità esistente */
.circle-container {
    width: 100% !important;
    padding: 20px 10px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* PATCH 12: Footer responsive */
#footer-container {
    width: 100% !important;
    max-width: 100% !important;
}

#footer {
    width: 100% !important;
    padding: 20px 15px !important;
    box-sizing: border-box !important;
}

}

/* PATCH EXTRA per iPhone molto piccoli */
@media screen and (max-width: 380px) {

```
#logo img {
    max-width: 250px !important;
}

#button_products {
    font-size: 12pt !important;
    width: 85% !important;
    left: 7.5% !important;
}

#main_text_box {
    padding: 0 15px !important;
}

#main_text_box span {
    font-size: 18pt !important;
}

}

/* PATCH SPECIFICA per Safari Mobile (problema di tuo marito) */
@supports (-webkit-touch-callout: none) {
@media screen and (max-width: 768px) {

```
    /* Forza il re-rendering su Safari */
    body {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Previeni zoom automatico Safari */
    body {
        -webkit-text-size-adjust: 100%;
    }
    
    /* Fix per il carousel su Safari */
    .rslides li {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

}