/* ============================================================

   1. HEADER: SFONDO, LOGO E VELO BLU

   ============================================================ */

.t4-header {position: relative;

    z-index: 9999 !important;

    background-image: url("https://www.4tic.it/images/headers/sfondo%20header.png") !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

    padding: 25px 0 !important;

    border-bottom: 5px solid #ff8c00 !important;

}



.t4-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Colore coordinato con i box (Blu Avio) */
    background: rgba(70, 130, 180, 0.7)) !important; 
    z-index: -1;
}


.navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.navbar-brand img {
    max-height: 150px !important; /* Aumentato da 90px a 150px */
    width: auto !important;
}



/* ============================================================
   2. NAVIGAZIONE: AREA PUBBLICA E SOTTOVOCI (NO HOVER)
   ============================================================ */

/* LIVELLO 1: Voci principali della barra (es. AREA PUBBLICA) */
.t4-navbar .nav-link, 
.t4-navbar .nav-link span {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* LIVELLO 2 e 3: Sottovoci (es. Prodotti, Arredi, Hardware, Software) */
/* BLOCCHIAMO IL COLORE: Resta Blu anche al passaggio del mouse */
.t4-megamenu .mega-dropdown-menu a, 
.t4-megamenu .mega-dropdown-menu a span,
.t4-megamenu .mega-dropdown-menu span,
.t4-megamenu .level-2 a, 
.t4-megamenu .level-3 a {
    color: #002d5a !important; 
    font-weight: 600 !important;
    text-transform: none !important; 
    font-size: 1rem !important;
    text-decoration: none !important;
    background-color: transparent !important; /* Rimuove eventuali sfondi al passaggio */
}

/* RIMOZIONE TOTALE EFFETTO HOVER */
/* Forziamo il colore blu anche quando il mouse è sopra */
.t4-megamenu .mega-dropdown-menu a:hover,
.t4-megamenu .mega-dropdown-menu a:hover span {
    color: #002d5a !important; /* Resta lo stesso Blu */
    background-color: transparent !important;
    text-decoration: none !important;
}

/* SFONDO E BORDI MEGAMENU */
.t4-megamenu .dropdown-menu,
.t4-megamenu .mega-dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #002d5a !important;
    padding: 15px !important;
}

.t4-megamenu .mega-dropdown-menu li {
    list-style: none !important;
    margin-bottom: 5px !important;
}
/* --- REGOLA 3 RIPRISTINATA: LAYOUT IBRIDO PC (ORIGINALE) --- */
@media (min-width: 992px) {
    body .jf_ph_cat_list.ph-item-content-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 20px !important;
    }

    body .jf_ph_cat_list .row-item.col-sm-1.col-md-2.list {
        width: 400px !important;
        min-width: 400px !important;
        flex: 0 0 400px !important;
        margin-right: 60px !important;
    }

    body .jf_ph_cat_list .row-item.col-sm-5.col-md-5.list:nth-child(2) {
        flex-grow: 1 !important;
    }

    body .jf_ph_cat_list .col-12.col-sm-5.col-md-5.list:last-child {
        width: 300px !important;
        flex: 0 0 300px !important;
    }
}
/* ============================================================
   4. FOOTER: STILE BASE E VELO BLU AVIO
   ============================================================ */
#t4-footer, .t4-footer {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    clear: both !important;
    background-image: url("https://www.4tic.it/images/headers/sfondo%20header.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 150px !important;
    padding: 40px 0 !important;
    border-top: 5px solid #ff8c00 !important;
    margin-top: 50px !important;
    z-index: 1; /* Necessario per gestire i livelli del velo */
}

/* IL VELO: Stesso Blu Avio dell'header */
#t4-footer::before, .t4-footer::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(70, 130, 180, 0.7) !important; /* Blu Avio coordinato */
    z-index: -1; /* Lo mette dietro ai contenuti del footer */
}

/* FIX CHIRURGICO: Solo nelle pagine articoli (Servizi), centra il footer e lo spinge giù */
.item-page ~ #t4-footer, 
.item-page ~ .t4-footer,
.item-page #t4-footer {
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
}

/* Forza il contenitore interno del footer a stare al centro ovunque */
.t4-footer .container {
    margin: 0 auto !important;
    float: none !important;
    display: block !important;
    position: relative; /* Assicura che i testi restino sopra il velo */
    z-index: 2;
}


/* ============================================================

   5. COPYRIGHT: ELIMINAZIONE JOOMLA E TESTO 4TIC

   ============================================================ */



/* Nasconde la riga con Joomla e licenza (footer2) */

.t4-footer .footer2,

.t4-footer .mod-footer .footer2 {

    display: none !important;

}



/* Mostra il tuo copyright bianco e centrato (footer1) */

.t4-footer .footer1 {

    color: #ffffff !important;

    font-size: 0.95rem !important;

    font-weight: 600 !important;

    text-align: center !important;

    display: block !important;

    width: 100% !important;

    padding: 15px 0 !important;

}



/* Rende trasparente il contenitore di fondo del copyright */

.t4-copyright {

    background: transparent !important;

    border: none !important;

}



/* Nasconde eventuali link residui nel copyright */

.t4-copyright a,

.t4-copyright br {

    display: none !important;

}

/* Forza la riga del Builder a essere visibile e senza spazi inutili */
.box-flat-container {
    padding: 0 !important;
    margin: 40px 0 !important;
    background-color: #4682B4 !important; /* Nuovo Blu Avio */
    display: block !important;
}

/* Il Box interno con la cornice arancione su tutti e 4 i lati */
.box-docente-flat {
    display: block !important;
    width: 100% !important;
    background-color: #4682B4 !important; /* Nuovo Blu Avio */
    padding: 60px 20px !important;
    border: 4px solid #ff8c00 !important; 
    box-sizing: border-box !important;
    position: relative !important;
}

/* Rimuove le ombre e i veli del framework T4 che nascondono il box */
.box-flat-container::before, 
.box-flat-container::after,
.t4-section:has(.box-flat-container)::before {
    display: none !important;
    content: none !important;
}

/* Stile del testo bianco */
.testo-docente-flat {
    color: #ffffff !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    margin: 0 !important;
    font-family: sans-serif !important;
}
/* ============================================================

7. PHOCA CART: STILE ICONA CARRELLO

============================================================ */

.ph-cart-module-box .btn-outline-secondary {

    background: transparent !important;

    border: none !important;

    color: #ffffff !important;

    font-size: 30px !important;

    padding: 0 !important;

    box-shadow: none !important;

}



.ph-cart-module-box .fa-shopping-bag {

    color: #ffffff !important;

}



.ph-cart-module-box .ph-cart-count-sup {

    background-color: transparent !important;

    color: #ffffff !important;

    border: 1px solid #ffffff !important;

    font-size: 14px !important;    top: -10px !important;

    padding: 2px 5px !important;

    border-radius: 50% !important;

}


/* ============================================================
8. BOX UNIVERSALE 4TIC: FIX TOTALE INCOLONNAMENTO (FULL WIDTH)
============================================================ */

/* 1. Colpiamo le colonne della griglia per forzarle al 100% */
.ph-category-view .col-6, 
.ph-category-view .col-md-4, 
.ph-category-view .col-lg-3,
.ph-items-view .col-6,
.ph-items-view .col-md-4,
.ph-items-view .col-lg-3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important; /* Fondamentale per Bootstrap 4/5 */
}

/* 2. Lo stile del box (il tuo thumbnail arancione) */
.ph-category-view .thumbnail,
.ph-items-view .thumbnail,
.ph-item-box,
.blog-featured .item {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    
    /* FORZATURA BORDI ARANCIONI */
    border: 2px solid #ff9800 !important;
    border-left: 10px solid #e68a00 !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    
    /* Animazione */
    animation: entraBoxDaDestra 0.8s ease-out forwards !important;
}

/* 3. Allineamento contenuti interni per layout verticale */
.ph-thumbnail-text, .ph-items-view h2 {
    text-align: center !important;
    margin-top: 15px !important;
}


/* ============================================================
   9. RIMOZIONE E RIPRISTINO SELETTIVO TITOLI E RIGA ARANCIONE
   ============================================================ */

/* 1. Nasconde i titoli globali per evitare i doppioni (come Phoca e Header standard) */
.page-header, 
.ph-category-title, 
.ph-categories-title {
    display: none !important;
}

/* 2. RIPRISTINO TITOLO: Colore Blu e RIGA ARANCIONE (Area Pubblica + Dirigenti) */
/* Questo selettore colpisce sia le pagine singole che la lista dei tag */
.item-page .page-header, 
.blog .page-header, 
.category-list .page-header,
.com-tags-tag__category .item-tag-title { 
    display: block !important;
    color: #002d5a !important; 
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    border-bottom: 3px solid #ff8c00 !important; /* LA RIGA ARANCIONE */
    padding-bottom: 10px !important;
}

/* 3. Estetica del link nel titolo (evita il blu classico sottolineato) */
.item-tag-title a {
    text-decoration: none !important;
    color: inherit !important;
}

/* ============================================================

   10. LANDING PAGE GENERALE: BOX DEFINITIVO CATEGORIE

   ============================================================ */



/* Colpiamo esattamente il box che contiene il link "Arredi" */

.ph-item-subcategory-box {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    padding: 20px 30px !important;

    margin-bottom: 20px !important;

    min-height: 100px !important;

    

    /* STILE IDENTICO AD ARREDI */

    border: 2px solid #ff9800 !important;

    border-left: 10px solid #e68a00 !important;

    border-radius: 12px !important;

    background-color: #ffffff !important;

    

    /* Animazione fluida */

    animation: entraBoxDaDestra 0.8s ease-out forwards !important;

}



/* Rimuoviamo l'immagine duplicata o link vuoti sopra il titolo se presenti */

.ph-item-subcategory-box > a:first-child {

    display: none !important;

}



/* Trasformiamo l'H3 nel titolo principale del box */

.ph-item-subcategory-box h3 {

    margin: 0 !important;

    padding: 0 !important;

    font-size: 1.5rem !important;

    font-weight: 700 !important;

}



.ph-item-subcategory-box h3 a {

    color: #002d5a !important;

    text-decoration: none !important;

}



/* Nascondiamo la scritta "Subcategories:" sopra i box */

.ph-subcategories {

    display: none !important;

}

/* ============================================================

   11. PULIZIA PRODOTTO: RIMOZIONE RECENSIONI E STOCK

   ============================================================ */



/* 1. Rimuove la linguetta "Recensioni" dal menu delle Tab */

#PcItemTab a[href="#phreview"],

.nav-tabs .nav-item:has(a[href="#phreview"]) {

    display: none !important;

}



/* 2. Rimuove il contenuto della tab Recensioni (per sicurezza) */

#phreview {

    display: none !important;

}



/* 3. Rimuove la scritta "In Stock" e lo spazio relativo */

.ph-item-stock-box,

#phItemStockBoxItem1,

.pc-status-in-stock {

    display: none !important;

    visibility: hidden !important;

    margin: 0 !important;

    padding: 0 !important;

}



/* 4. Rimuove lo spazio vuoto (top-space) che rimane dopo aver tolto lo stock */

.ph-item-view-data-box .ph-top-space {

    display: none !important;

}



/* ============================================================

   12. TRADUZIONE MANUALE CHECKOUT 4TIC (CSS)

   ============================================================ */



/* 1. Traduzione Titoli Sezioni */

#phcheckoutloginview h3 { font-size: 0 !important; }

#phcheckoutloginview h3::before { content: "1. Accesso o Registrazione"; font-size: 1.75rem !important; }



#phcheckoutaddressedit h3 { font-size: 0 !important; }

#phcheckoutaddressedit h3::before { content: "2. Indirizzo di Fatturazione e Spedizione"; font-size: 1.75rem !important; }



.ph-checkout-billing-row .ph-box-header { font-size: 0 !important; }

.ph-checkout-billing-row .ph-box-header::before { content: "Indirizzo di Fatturazione"; font-size: 1.25rem !important; }



/* 2. Traduzione Campi del Modulo (Labels) */

label[for="jform_name_first"] { font-size: 0 !important; }

label[for="jform_name_first"]::before { content: "Nome *"; font-size: 1rem !important; }



label[for="jform_name_last"] { font-size: 0 !important; }

label[for="jform_name_last"]::before { content: "Cognome *"; font-size: 1rem !important; }



label[for="jform_company"] { font-size: 0 !important; }

label[for="jform_company"]::before { content: "Azienda"; font-size: 1rem !important; }



label[for="jform_address_1"] { font-size: 0 !important; }

label[for="jform_address_1"]::before { content: "Indirizzo *"; font-size: 1rem !important; }



label[for="jform_zip"] { font-size: 0 !important; }

label[for="jform_zip"]::before { content: "CAP *"; font-size: 1rem !important; }



label[for="jform_city"] { font-size: 0 !important; }

label[for="jform_city"]::before { content: "Città *"; font-size: 1rem !important; }



label[for="jform_country"] { font-size: 0 !important; }

label[for="jform_country"]::before { content: "Nazione *"; font-size: 1rem !important; }



/* 3. Traduzione Tabella Prezzi */

.ph-cart-subtotal-netto-txt { font-size: 0 !important; }

.ph-cart-subtotal-netto-txt::before { content: "Sottototale"; font-size: 1rem !important; }



.ph-cart-total-txt { font-size: 0 !important; }

.ph-cart-total-txt::before { content: "Totale Ordine"; font-weight: bold; font-size: 1rem !important; }



/* Traduzione Header Tabella */

.ph-checkout-cart-image { font-size: 0 !important; }

.ph-checkout-cart-image::before { content: "Immagine"; font-size: 0.9rem; }



.ph-checkout-cart-product { font-size: 0 !important; }

.ph-checkout-cart-product::before { content: "Prodotto"; font-size: 0.9rem; }



.ph-checkout-cart-brutto { font-size: 0 !important; }

.ph-checkout-cart-brutto::before { content: "Prezzo"; font-size: 0.9rem; }

/* ============================================================

   LAYOUT MODULO UNICO: LOGO + LINK ORIZZONTALI

   ============================================================ */



/* Centra tutto il contenuto del modulo */

.t4-footer .t4-module {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

}



/* Gestione della riga dei link */

.footer-links-row {

    display: flex !important;

    flex-direction: row !important; /* Forza orizzontale */

    justify-content: center !important;

    gap: 40px !important;           /* Spazio tra i link */

    margin-top: 20px !important;    /* Distanza dal logo sopra */

    margin-bottom: 20px !important; /* Distanza dai dati aziendali sotto */

}



/* Stile dei link */

.footer-links-row a {

    color: #ffffff !important;

    text-decoration: none !important;

    font-weight: 700 !important;

    font-size: 1rem !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

}



.footer-links-row a:hover {

    color: #ff8c00 !important;

}

/* ============================================================

   13. STRISCIA 4TIC: FIX TOTALE (SFUMATURA E LINEA SOTTO)

   ============================================================ */



/* 1. Il contenitore principale: fondo Blu Avio */
.t4-section:has(.striscia-blu-4tic) {
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
    background-color: #4682B4 !important; /* Nuovo Blu Avio */
    padding: 0 !important;
    margin: 40px 0 !important;
    overflow: hidden !important;
    position: relative !important;
    border-bottom: 5px solid #ff8c00 !important;
}


/* 2. Pulizia contenitori interni */

.t4-section:has(.striscia-blu-4tic) .container,

.t4-section:has(.striscia-blu-4tic) .t4-section-inner {

    max-width: 100% !important;

    width: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

}



/* 3. La striscia blu */

.striscia-blu-4tic {

    width: 100% !important;

    height: 100% !important;

    display: flex !important;

    justify-content: flex-end !important;

    position: relative !important;

    border: none !important; /* Rimuove quella linea bastarda in alto a sinistra */

}



/* 4. L'immagine a destra a tutta altezza */

.striscia-blu-4tic img {

    width: 55% !important;

    height: 200px !important;

    object-fit: cover !important;

    display: block !important;

}



/* 5. SFUMATURA INVERTITA: Sostituito il blu scuro con Blu Avio */
.striscia-blu-4tic::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 35% !important;
    width: 25% !important;
    height: 100% !important;
    background: linear-gradient(to right, #4682B4, transparent) !important;
    z-index: 2 !important;
}

/* ============================================================

    14. ANIMAZIONI DI BASE (KEYFRAMES)

   ============================================================ */



@keyframes entraBoxDaSinistra {

    0% { opacity: 0; transform: translateX(-150px); }

    100% { opacity: 1; transform: translateX(0); }

}



@keyframes entraBoxDaDestra_Nuovo {

    0% { opacity: 0; transform: translateX(150px); }

    100% { opacity: 1; transform: translateX(0); }

}



/* ============================================================

    15. CLASSI PER I MODULI (DA APPLICARE IN ADVANCED)

   ============================================================ */



/* Box che entrano subito al caricamento */

.animazione-da-sinistra {

    animation: entraBoxDaSinistra 1.2s ease-out forwards !important;

}



.animazione-da-destra {

    animation: entraBoxDaDestra_Nuovo 1.2s ease-out forwards !important;

}



/* ============================================================

   16. BANNER DOCENTE: RESET TOTALE MARGINI E COPERTURA BIANCO

   ============================================================ */



/* 1. Sfondo del modulo */
.t4-module .banner-statico-docente,
.banner-statico-docente {
    background-color: #5a93c2 !important; /* Blu Avio Schiarito */
    border: 2px solid #ff8c00 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: stretch !important;
    margin: 50px 0 30px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    min-height: 250px !important;
    height: 100% !important;
}

/* 2. Forza il blu a riempire il lato testo */
.banner-statico-docente > div {
    flex: 1 !important;
    background-color: #5a93c2 !important; /* Coerente con lo sfondo */
    padding: 40px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
}

/* 3. Elimina margini dai testi che potrebbero "alzare" la box */

.banner-statico-docente h3,

.banner-statico-docente p {

    color: #ffffff !important;

    margin: 0 0 15px 0 !important;

    padding: 0 !important;

}



/* 4. Immagine a destra: deve toccare il fondo senza eccezioni */

.banner-statico-docente img {

    height: 100% !important;

    width: auto !important;

    display: block !important;

    object-fit: contain !important;

    margin: 0 !important;

    align-self: stretch !important;

}
/* ============================================================
    FIX CARTA DEL DOCENTE (VERSIONE FULL WIDTH IMAGE)
   ============================================================ */
@media (max-width: 767px) {
    
    /* 1. Contenitore Principale: AZZERIAMO I LATI */
    div[style*="linear-gradient(90deg, #002147 20%"] {
        flex-direction: column !important; 
        padding: 30px 0px 0px 0px !important; /* IMPORTANTE: 0px ai lati */
        background: #002147 !important; 
        min-height: 1px !important; 
        height: auto !important;
        display: flex !important;
        align-items: center !important; 
        overflow: hidden !important; /* Taglia l'immagine se esce dai bordi arrotondati */
    }

    /* 2. Div del testo: Proteggiamo il testo con il padding qui */
    div[style*="linear-gradient(90deg, #002147 20%"] > div[style*="max-width"] {
        max-width: 100% !important; 
        width: 100% !important;
        padding: 0 20px !important; /* Il testo non tocca i bordi, ma l'immagine sì */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 3. Testi centrati */
    div[style*="linear-gradient(90deg, #002147 20%"] h3, 
    div[style*="linear-gradient(90deg, #002147 20%"] p,
    div[style*="linear-gradient(90deg, #002147 20%"] span {
        text-align: center !important; 
        width: 100% !important;
        display: block !important;
    }

    /* 4. Pulsante centrato */
    div[style*="background-color: rgb(0, 123, 255)"] {
        margin: 10px auto 30px auto !important; 
        display: inline-block !important;
    }

    /* 5. Immagine: FULL WIDTH (Senza spazi blu) */
    div[style*="linear-gradient(90deg, #002147 20%"]::after {
        content: "";
        display: block !important;
        width: 100% !important; /* Occupa tutto il 100% ora che il padding è 0 */
        height: 180px !important; 
        background-image: url('https://www.4tic.it/images/carta%20del%20docente%204.png') !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important; /* Riempie lo spazio orizzontale */
        margin: 0 !important;
        border-bottom-left-radius: 6px !important;
        border-bottom-right-radius: 6px !important;
    }
}
/* ============================================================
   17. GESTIONE COORDINATA PC: BOX 1 & BOX 2
   ============================================================ */

@media (min-width: 1200px) {
    /* 1. PAREGGIAMENTO DELLE COLONNE (LA RIGA) */
    .t4-section:has(.banner-4tic-finito) .t4-row,
    .t4-section:has(#banner-scroll-shop) .t4-row {
        display: flex !important;
        align-items: stretch !important; /* Forza altezza uguale */
        gap: 30px !important;
    }

    /* 2. BOX 1 (SOLUZIONI INFORMATICHE) - FIX PC */
    div#banner-scroll-shop.animazione-da-sinistra {
        height: 600px !important;
        display: flex !important;
        align-self: stretch !important; /* Riempie la colonna */
        margin: 40px 0 !important; /* Margine identico al Box 2 */
        width: 100% !important;
    }

    /* 3. BOX 2 (INNOVAZIONE) - FIX PC */
    div#banner-scroll-shop.vieni-da-destra {
        height: 600px !important;
        display: flex !important;
        align-self: stretch !important; /* Riempie la colonna */
        margin: 40px 0 !important; /* Margine identico al Box 1 */
        width: 100% !important;
        background-color: #4682B4 !important;
        background-image: none !important;
        animation: entraBoxDaDestra_Nuovo 1.2s ease-out forwards !important;
    }

    /* 4. UNIFORMITÀ CONTENUTI INTERNI */
    .testo-lato {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        height: 100% !important;
    }

    .foto-lato {
        height: 100% !important;
    }
}

/* ============================================================
   MANTENIMENTO TABLET E MOBILE (NON TOCCARE)
   ============================================================ */

/* TABLET BOX 1 - FORZA BRUTA */
@media (min-width: 768px) and (max-width: 1199px) {
    body div#banner-scroll-shop.animazione-da-sinistra { 
        display: block !important; 
        background-color: #4682B4 !important; /* Colore solido di sicurezza */
        background-image: linear-gradient(rgba(70, 130, 180, 0.8), rgba(70, 130, 180, 0.8)), url("images/Sevizi.png") !important; 
        background-size: cover !important; 
        background-position: center !important; 
        height: 600px !important; 
    }

    body div#banner-scroll-shop.animazione-da-sinistra .testo-lato { 
        background: transparent !important; 
        background-color: transparent !important; /* Doppia sicurezza */
    }
}
/* TABLET BOX 2 */
@media (min-width: 768px) and (max-width: 1199px) {
    div#banner-scroll-shop.vieni-da-destra { display: block !important; background-image: linear-gradient(rgba(0, 45, 90, 0.8), rgba(0, 45, 90, 0.8)), url("images/Innovazione2.png") !important; background-size: cover !important; background-position: center !important; height: 600px !important; animation: none !important; transform: none !important; }
    div#banner-scroll-shop.vieni-da-destra .foto-lato { display: none !important; }
    div#banner-scroll-shop.vieni-da-destra .testo-lato { width: 100% !important; height: 100% !important; background: transparent !important; padding: 60px 40px !important; display: flex !important; justify-content: center !important; }
}

/* MOBILE - RESET TOTALE PER VISIBILITÀ TESTO E IMMAGINE */
@media (max-width: 767px) {
    div#banner-scroll-shop.vieni-da-destra { 
        display: flex !important; 
        flex-direction: column !important; /* Impila gli elementi verticalmente */
        height: auto !important; 
        background-image: none !important; /* Rimuove lo sfondo che copriva tutto */
        background-color: #4682B4 !important;
        margin-bottom: 60px !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Mostra il testo e il pulsante */
    div#banner-scroll-shop.vieni-da-destra .testo-lato { 
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 40px 20px !important;
        order: 1 !important; /* Testo per primo */
    }

    /* Mostra l'immagine fisica */
    div#banner-scroll-shop.vieni-da-destra .foto-lato { 
        display: block !important;
        width: 100% !important;
        height: 250px !important; /* Altezza fissa per l'immagine su mobile */
        order: 2 !important; /* Immagine sotto il testo */
    }

    div#banner-scroll-shop.vieni-da-destra .foto-lato img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}
/* ============================================================
   17. GESTIONE SINGOLA: BOX 3 - GIÀ CLIENTE (SCREEN 2)
   ============================================================ */

/* PC */
@media (min-width: 1200px) {
    div#box-cliente { margin-top: 0 !important; margin-bottom: 0 !important; display: block !important; opacity: 1 !important; visibility: visible !important; }
}
/* TABLET */
@media (min-width: 768px) and (max-width: 1199px) {
    div#box-cliente { 
        margin-top: 40px !important; 
        margin-bottom: 40px !important; 
        display: block !important; 
        opacity: 1 !important; 
        visibility: visible !important; 
    }
} /* <--- QUESTA È LA GRAFFA CHE MANCAVA */
/* MOBILE */
@media (max-width: 767px) {
    div#box-cliente { 
        margin-top: 20px !important;    /* Chiude il buco con il modulo sopra */
        margin-bottom: 30px !important; /* Crea lo spazio tra Box 3 e Box 4 */
        display: block !important; 
        clear: both !important; 
        position: relative !important; 
        z-index: 99 !important; 
        opacity: 1 !important; 
        visibility: visible !important; 
    }
}

/* ============================================================
   17. GESTIONE SINGOLA: BOX 4 - SEI NUOVO? (SCREEN 2)
   ============================================================ */

/* PC */
@media (min-width: 1200px) {
    div#box-nuovo { margin-top: 0 !important; margin-bottom: 0 !important; display: block !important; opacity: 1 !important; visibility: visible !important; }
}
/* TABLET - FIX DEFINITIVO BOX 1 */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Il contenitore diventa il portatore dello sfondo */
    div#banner-scroll-shop.animazione-da-sinistra { 
        display: block !important; 
        background-image: linear-gradient(rgba(0, 45, 90, 0.8), rgba(0, 45, 90, 0.8)), 
                          url("images/Sevizi.png") !important;
        background-size: cover !important;
        background-position: center !important;
        height: 600px !important;
    }

    /* Rendiamo la colonna testo trasparente così si vede lo sfondo sotto */
    div#banner-scroll-shop.animazione-da-sinistra .testo-lato { 
        width: 100% !important; 
        flex: 0 0 100% !important;
        background: transparent !important; /* Fondamentale: toglie il blu solido */
        padding: 40px !important;
    }

    /* Spegniamo la colonna immagine fisica per non creare doppioni */
    div#banner-scroll-shop.animazione-da-sinistra .foto-lato { 
        display: none !important; 
    }
}
/* MOBILE */
@media (max-width: 767px) {
    div#box-nuovo { 
        margin-top: 0 !important; 
        margin-bottom: 50px !important; /* Spazio verso il basso */
        display: block !important; 
        clear: both !important; 
        position: relative !important; 
        z-index: 99 !important; 
        opacity: 1 !important; 
        visibility: visible !important; 
    }
}
/* ============================================================
   18. RESET STRUTTURALE SEZIONE
   ============================================================ */
/* PC: Allineamento perfetto per i pulsanti assistenza/sopralluogo */
@media (min-width: 1200px) {
    /* Forza la riga che contiene i box cliente/nuovo */
    .t4-row:has(#box-cliente), .t4-row:has(#box-nuovo) {
        display: flex !important;
        align-items: stretch !important;
        gap: 30px !important;
        margin-top: 50px !important; /* Spazio uniforme sopra entrambi */
    }

    #box-cliente, #box-nuovo {
        margin: 0 !important; /* Rimuove i margini asimmetrici */
        height: 100% !important;
    }
}
/* TABLET RESET */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Sblocca la sezione ed elimina il min-height eccessivo */
    .t4-section:has(.banner-4tic-finito), .t4-section-1 { 
        height: auto !important; 
        min-height: 1px !important; 
        display: block !important; 
        overflow: visible !important; 
        padding: 20px 0 !important; /* Ridotto padding sezione */
    }

    .t4-section-1 .t4-row, .row { 
        display: block !important; 
        width: 100% !important; 
    }

    /* RIDUZIONE SPAZIO TRA PULSANTI E CARTA DEL DOCENTE */
    div#box-cliente { 
        margin-top: 40px !important; 
        margin-bottom: 15px !important; /* Spazio ridotto tra i due pulsanti */
    }

    div#box-nuovo { 
        margin-top: 0 !important; 
        margin-bottom: 20px !important; /* Spazio ridotto prima della Carta del Docente */
    }

    /* Rimuove eventuali margini extra della sezione che ospita i pulsanti */
    .t4-section:has(#box-nuovo) {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Assicura che la Carta del Docente si avvicini */
    .t4-section:has(.box-flat-container) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}
/* ============================================================
   19. FIX FOOTER MOBILE (Incolonnamento Link)
   ============================================================ */
@media (max-width: 767px) {
    /* 1. Forza il contenitore dei link a rompere la riga e mettersi in colonna */
    .t4-footer ul.nav, 
    .t4-footer .navbar-nav,
    .t4-footer .mod-menu,
    .t4-footer .container .row {
        display: flex !important;
        flex-direction: column !important; /* Forza la colonna */
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Rimuove stili che forzano i link sulla stessa riga */
    .t4-footer ul li, 
    .t4-footer .nav-item {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 5px 0 !important;
        float: none !important;
    }

    /* 3. Estetica dei link */
    .t4-footer a {
        display: inline-block !important;
        padding: 8px 0 !important;
        font-size: 14px !important;
        white-space: normal !important;
    }

    /* 4. Forza la centratura di tutto il blocco footer */
    .t4-footer .t4-module, 
    .t4-footer .custom {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
}
/* ============================================================
   20. FIX SOVRAPPOSIZIONE SOLO PER PAGINE ARTICOLI
   ============================================================ */

/* Impedisce al footer di salire sopra il contenuto nelle pagine singole */
.item-page {
    display: block !important;
    clear: both !important;
    margin-bottom: 100px !important; /* Crea uno spazio di sicurezza */
    position: relative !important;
    z-index: 10 !important;
}

/* Forza il corpo centrale a spingere giù il footer */
.t4-main-body {
    display: flex !important;
    flex-direction: column !important;
}
/* ============================================================
   21. RIMOZIONE MENU HAMBURGER (VERSIONE DESKTOP)
   ============================================================ */
@media (min-width: 992px) {
    .t4-navbar-toggler, 
    .navbar-toggler, 
    .t4-offcanvas-toggle {
        display: none !important;
    }
}
/* ============================================================
   22. RIMOZIONE DOPPIO MENU HAMBURGER SU MOBILE
   ============================================================ */
@media (max-width: 991px) {
    /* Nasconde il toggler standard per lasciare solo quello off-canvas */
    .t4-header .navbar-toggler {
        display: none !important;
    }

    /* Se ne vedi ancora due, prova a de-commentare (togliere /*) la riga sotto */
    /* .t4-section-inner .navbar-toggler { display: none !important; } */
}

/* ============================================================
   23. PC: LAYOUT A DUE COLONNE REALI (IMMAGINE + TUTTO IL RESTO)
   ============================================================ */
@media (min-width: 1200px) {

    /* 1. Apriamo il contenitore principale al massimo della larghezza */
    .t4-main-body .container, 
    #t4-main-body .container,
    .t4-section-inner {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 40px !important;
        margin: 0 !important;
    }

    /* 2. Neutralizziamo la griglia del template che crea il bianco */
    .t4-content-column, #t4-content, .col-md-9, .row {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: block !important;
    }

    /* 3. Cancelliamo la colonna bianca dalla memoria della pagina */
    .t4-sidebar, aside, .col-md-3, .t4-sidebar-right {
        display: none !important;
        width: 0 !important;
    }

    /* 4. CREIAMO LE NOSTRE DUE COLONNE (GRID) */
    #phocacart .ph-category-view div[class*="col-"], 
    #phocacart .ph-items-view div[class*="col-"] {
        display: grid !important;
        grid-template-columns: 450px 1fr !important; /* Colonna immagine fissa, il resto è 1fr (tutto lo spazio) */
        gap: 60px !important; /* Spazio tra immagine e testo */
        width: 100% !important;
        background: #ffffff !important;
        border-bottom: 5px solid #ff9800 !important;
        margin-bottom: 50px !important;
        padding: 40px !important;
        align-items: start !important;
    }

    /* 5. GESTIONE IMMAGINE (Colonna 1) */
    .phIBox, .ph-thumbnail, #phocacart div[class*="col-"] > a:first-child {
        width: 450px !important;
        display: block !important;
    }

    .phIBox img, .ph-thumbnail img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 4px;
    }

    /* 6. GESTIONE TUTTO IL RESTO (Colonna 2 - RIEMPIE IL BIANCO) */
    .ph-thumbnail-text, .ph-item-content, #phocacart div[class*="col-"] > div:last-child {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
    }
}

/* ============================================================
   24. RESET GERARCHICO TABLET: ELIMINAZIONE COLONNA BIANCA
   ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {

    /* 1. Colpiamo la struttura ossea del template */
    html, body {
        overflow-x: hidden !important; /* Impedisce lo scroll laterale */
    }

    /* 2. Azzeriamo ogni possibile vincolo di larghezza dal componente fino alla sezione */
    .t4-wrapper, 
    #t4-main-body, 
    .t4-main-body, 
    .t4-main-body > .container, 
    .t4-section-inner, 
    #phocacart, 
    .ph-category-view, 
    .ph-items-view {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding-left: 5px !important;  /* Margine minimo di sicurezza */
        padding-right: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
    }

    /* 3. Trasformiamo la riga in un blocco unico (distrugge le colonne) */
    .t4-row, .row {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 4. Forziamo il contenuto a ignorare la presenza della sidebar */
    .t4-content-column, 
    #t4-content, 
    div[class*="col-md-"], 
    div[class*="col-sm-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 10px !important;
    }

    /* 5. Rendiamo la colonna bianca invisibile e priva di ingombro */
    .t4-sidebar, 
    aside, 
    .col-md-3, 
    .col-md-4 {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        position: absolute !important;
    }

    /* 6. Ogni prodotto ora DEVE riempire il nuovo spazio */
    #phocacart div[class*="col-"] {
        display: block !important;
        width: 100% !important;
        background: #ffffff !important;
        border-bottom: 5px solid #ff9800 !important;
        margin-bottom: 40px !important;
    }

    #phocacart img {
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
}

/* ============================================================
   25. MOBILE (RESET DIMENSIONI IMMAGINE)
   ============================================================ */
@media (max-width: 767px) {
    /* Forza il contenitore a incolonnare */
    .ph-category-view div[class*="col-"], 
    .ph-items-view div[class*="col-"] {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
        width: 100% !important;
    }

    /* Forza l'immagine a ridimensionarsi e non uscire dai bordi */
    .phIBox, .ph-thumbnail, .ph-thumbnail-text {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    #phocacart img, .ph-thumbnail img, .phIBox img {
        width: 100% !important;      /* Occupa tutta la larghezza del telefono */
        max-width: 100% !important; 
        min-width: 0 !important;      /* Rimuove vincoli del PC */
        height: auto !important;     /* Mantiene le proporzioni */
        display: block !important;
        margin: 0 auto !important;    /* Centra l'immagine */
    }

    /* Testo centrato sotto l'immagine per mobile */
    .ph-thumbnail-text, .ph-item-content {
        text-align: center !important;
        padding: 15px 0 !important;
    }
}
/* Rimuove i limiti di larghezza del container principale su PC */
.t4-wrapper .container-xxl, 
.t4-main-body .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
/* ============================================================
   26. FIX TOTALE ICONA HAMBURGER (BIANCA E SEMPRE VISIBILE)
   ============================================================ */

/* 1. Forza il colore bianco sulle 3 linee (sia SVG che Font-Icon) */
.navbar-toggler, 
.t4-offcanvas-toggle, 
.t4-navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Bordino leggero */
    background-color: transparent !important;
    padding: 5px !important;
    z-index: 99999 !important; /* Sopra il velo blu dell'header */
}

/* 2. Colora le linee se sono realizzate tramite icona font o span CSS */
.navbar-toggler-icon,
.t4-offcanvas-toggle i,
.t4-navbar-toggler i {
    color: #ffffff !important;
    filter: brightness(0) invert(1) !important; /* Forza il bianco se è un'immagine/SVG */
}

/* 3. Se il T4 usa un SVG come background-image, lo forziamo bianco */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3 Blackboard%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* 4. Assicura che l'hamburger sia visibile correttamente nel range mobile/tablet */
@media (max-width: 991px) {
    .t4-header .container, 
    .t4-header .container-fluid {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Evita che il logo schiacci l'hamburger */
    .navbar-toggler, .t4-offcanvas-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}
/* ============================================================
   27. FORCE-GRID LAYOUT: ESPANSIONE ORIZZONTALE (PC)
   ============================================================ */
@media (min-width: 992px) {

    /* Trasformiamo il box arancione in una griglia a 2 colonne reali */
    .jf_ph_cat_list.ph-item-content-row {
        display: grid !important;
        grid-template-columns: 400px 1fr !important; /* Foto fissa | Tutto il resto occupa il 100% */
        grid-template-areas: "foto contenuto" !important;
        gap: 50px !important;
        width: 100% !important;
    }

    /* Assegniamo la foto alla sua area */
    .jf_ph_cat_list .row-item.col-md-2.list {
        grid-area: foto !important;
        width: 400px !important;
        margin: 0 !important;
    }

    /* Fondiamo le altre due colonne (testo e prezzi) in un'unica area a destra */
    .jf_ph_cat_list .row-item.col-md-5.list:nth-child(2),
    .jf_ph_cat_list .col-12.col-sm-5.col-md-5.list:last-child {
        grid-column: 2 !important; /* Forza entrambi nella colonna di destra */
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* La descrizione ora DEVE espandersi perché non ha più nulla a destra */
    .ph-item-desc {
        width: 100% !important;
        display: block !important;
        line-height: 1.8 !important;
        margin-bottom: 30px !important;
    }

    /* I prezzi scivolano sotto il testo */
    .jf_ph_cat_list .col-12.col-sm-5.col-md-5.list:last-child {
        margin-top: 10px !important;
        padding-top: 20px !important;
        border-top: 1px solid #eee !important;
    }

    /* Allineamento pulito */
    .ph-category-price-box, .ph-category-action-box-buttons {
        text-align: left !important;
    }
}

/* ============================================================
   28. RIMOZIONE PULSANTI PREVENTIVO / CARRELLO (POTENZIATA)
   ============================================================ */
.phocacart-add-to-cart-container, 
.phoca-cart-buttons-container, 
.btn-quote, 
.phocacart-button-quote,
.phocacart-view-cart,
.ph-cart-add-to-cart-box,
.add-to-cart-container,
#phocacart-item-container .btn,
.ph-quote-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* ============================================================
   31. KILLER FINALE PER ARTICOLO 20
   ============================================================ */
/* Colpiamo il pulsante basandoci sulla gerarchia della pagina */
.itemid-20 .btn-preventivo-auto,
.view-article.item-20 .btn-preventivo-auto,
article#item-20 .btn-preventivo-auto,
.page-item-20 .btn-preventivo-auto {
    display: none !important;
}

/* Se il tuo template usa una classe specifica nell'URL, usiamo questa forza bruta */
[class*="itemid-20"] .btn-preventivo-auto,
[class*="article-20"] .btn-preventivo-auto {
    display: none !important;
}
/* ============================================================
   32. SPARIZIONE NEL METODO DI PAGAMENTO
   ============================================================ */

/* 1. Nascondi tutti i contenitori delle descrizioni */
.ph-payment-desc-row, 
.ph-payment-desc, 
div[id^="ph-payment-description"] {
    display: none !important;
}

/* 2. Mostra il blocco solo quando il genitore ha la classe 'active' */
/* Molti template Joomla/T4 aggiungono la classe .active al div che contiene il pagamento selezionato */
.active .ph-payment-desc, 
.active .ph-payment-desc-row,
.selected .ph-payment-desc {
    display: block !important;
}
/* ============================================================
   33. TASTO LOGIN
   ============================================================ */
/* Tasto Esci/Login Header */
#t4-header .header-r .btn-primary, 
#t4-header .header-r button[type="submit"] {
    background-color: #0044ff !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    display: inline-block !important;
    visibility: visible !important;
    text-decoration: none !important;
}

/* Colore scritta Ciao Nome */
#t4-header .header-r {
    color: #ffffff !important;
}
/* ============================================================
   34. LOGIN IN REGISTRAZIONE
   ============================================================ */
/* Nasconde il blocco login nella testata solo quando siamo nella pagina registrazione */
.view-registration .t4-header-r #login-form {
    display: none !important;
}

/* Nasconde anche il carrello se non ti serve nella registrazione */
.view-registration .t4-header-r .ph-cart-module-box {
    display: none !important;
}