div[style*="text-align:right;display:block"] a[href*="phoca.cz"] {
    display: none !important;
}

div[style*="text-align:right;display:block"]:has(a[href*="phoca.cz"]) {
    display: none !important;
}

/* 1. Rimpicciolisce il logo e mantiene le proporzioni perfette */
.header-wrap .logo-image img.logo-img {
    max-height: 65px !important; /* Modifica questo numero per ingrandire o rimpicciolire */
    width: auto !important;
}

/* 2. Dà respiro all'header e centra verticalmente tutti gli elementi */
.header-wrap {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #f0f0f0; /* Aggiunge una linea sottile e pulita sotto l'header */
}

/* 3. Evita che il menu salti o si schiacci troppo sui monitor medi */
.t4-navbar {
    padding-left: 20px;
    padding-right: 20px;
}

/* ==================================================== */
/* STILE MINI-CARRELLO DROPDOWN (Layout "Top")          */
/* ==================================================== */

/* 1. Spoglia il bottone grigio e lo rende invisibile/trasparente */
.ph-cart-module-box .btn-outline-secondary {
    border: none !important;
    background: transparent !important;
    padding: 5px 15px 5px 5px !important; /* Diamo un po' di spazio a destra per il pallino */
    box-shadow: none !important;
    position: relative;
    display: flex;
    align-items: center;
    color: #212529 !important; /* Colore scuro */
}

/* 2. Rimuove la piccola freccetta (caret) del menu a tendina di default */
.ph-cart-module-box .dropdown-toggle::after {
    display: none !important;
}

/* 3. Inietta la bellissima icona del Carrello */
.ph-cart-module-box .shopping-cart::before {
    content: "\f07a"; /* Codice FontAwesome Carrello */
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 1.5rem !important; /* Grandezza icona */
    transition: color 0.2s ease-in-out;
}

/* Colore blu al passaggio del mouse */
.ph-cart-module-box .btn-outline-secondary:hover .shopping-cart::before {
    color: #0d6efd !important;
}

/* 4. Crea il Pallino Rosso del Contatore (Badge Amazon Style) */
.ph-cart-module-box .ph-cart-count-sup {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #dc3545 !important; /* Rosso accesso */
    color: white !important;
    font-size: 0.75rem !important; /* Grandezza del numero */
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Leggera ombretta 3D */
    z-index: 10;
}

/* 5. Aggiusta il menu a tendina che si apre sotto */
.ph-cart-module-box .dropdown-menu {
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 15px;
    min-width: 300px; /* Larghezza del riepilogo carrello */
    margin-top: 10px;
}

/* Blocca visivamente l'apertura delle tendine di Carrello e Wishlist */
.ph-cart-module-box .dropdown-menu,
.ph-wishlist-module-box .dropdown-menu {
    display: none !important;
}

/* ==================================================== */
/* ICONA E CONTATORE WISHLIST                           */
/* ==================================================== */

/* 1. Nasconde l'elenco dei prodotti e lascia solo il link finale */
.ph-wishlist-module-box .row {
    display: none !important;
}

/* 2. Resetta i margini per allineare il blocco all'header */
.ph-wishlist-module-box {
    display: flex;
    align-items: center;
    margin: 0 !important;
}

/* 3. Nasconde il testo "View Wish list" ma tiene vivo il link */
.ph-cart-link-wishlist a {
    font-size: 0 !important;
    text-decoration: none !important;
    display: inline-block;
    position: relative;
    padding: 5px;
}

/* 4. Inietta l'icona del Cuore (Vuoto di base) */
.ph-cart-link-wishlist a::before {
    content: "\f004"; 
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 400; /* 400 = Cuore vuoto (far) */
    font-size: 1.5rem !important; /* Grandezza icona */
    color: #212529; /* Colore scuro */
    visibility: visible;
    transition: all 0.2s ease-in-out;
}

/* 5. Effetto hover: il cuore si riempie e diventa rosso! */
.ph-cart-link-wishlist a:hover::before {
    font-weight: 900 !important; /* 900 = Cuore pieno (fas) */
    color: #dc3545 !important; /* Rosso scarlatto */
}

/* 6. Stile del contatore rosso (che verrà creato dal JavaScript) */
.wishlist-custom-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #dc3545 !important;
    color: white !important;
    font-size: 0.75rem !important;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ==================================================== */
/* STILE BARRA DI RICERCA ARROTONDATA                   */
/* ==================================================== */

.ph-search-box .phSearchBoxSearchInput {
    border-radius: 30px !important; /* Crea l'effetto "pillola" */
    padding-left: 20px !important;  /* Allontana il testo dal bordo per dare respiro */
    padding-right: 20px !important;
    border: 1px solid #ced4da;      /* Colore del bordo (grigio chiaro standard) */
    box-shadow: none !important;    /* Rimuove eventuali ombre se presenti */
}

/* Effetto quando si clicca per scrivere (il bordo diventa blu) */
.ph-search-box .phSearchBoxSearchInput:focus {
    border-color: #0d6efd !important;
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important; /* Effetto alone blu di Bootstrap */
}

/* ==================================================== */
/* SPAZIATURA HEADER E ANIMAZIONE ICONA PROFILO         */
/* ==================================================== */

/* 1. Crea uno spazio uniforme tra ricerca, profilo, cuore e carrello */
.t4-header-r {
    gap: 25px !important; 
}

/* 2. Uniforma l'icona del Profilo alle altre (colore scuro e grandezza) */
.header-icon-user a i {
    color: #212529 !important; /* Colore base scuro */
    font-size: 1.5rem !important; /* Allinea la grandezza a 24px come le altre */
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; /* Prepara l'animazione */
}

/* 3. Effetto Hover per il Profilo (diventa blu quando passi il mouse) */
.header-icon-user a:hover i {
    color: #0d6efd !important; /* Lo stesso blu di Bootstrap usato per il carrello */
}

/* (Opzionale) Rimuove eventuali margini extra della barra di ricerca che potrebbero sbilanciare il gap */
.t4-header-r .ph-search-box {
    margin-right: 0 !important;
}

/* ==================================================== */
/* INGRANDIMENTO HEADER E ALLINEAMENTO MILLIMETRICO     */
/* ==================================================== */

/* 1. Ingrandisce l'header dando più respiro (spazio sopra e sotto) */
.header-wrap {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
    min-height: 110px; /* Garantisce un'altezza minima per un look Premium */
}

/* 2. Allinea perfettamente sulla stessa riga tutti gli elementi a destra */
.t4-header-r {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important; /* Spazio esatto tra Ricerca, Omino, Cuore e Carrello */
}

/* 3. Azzera i margini invisibili dei moduli che "sfasano" il layout */
.t4-header-r > div,
.t4-header-r > .custom,
.ph-wishlist-module-box,
.ph-cart-module-box {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 4. IL SEGRETO: Dà a tutte le icone la STESSA altezza e le centra perfettamente */
.header-icon-user a,
.ph-cart-link-wishlist a,
.ph-cart-module-box .btn-outline-secondary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important; 
    height: 40px !important; /* Stessa altezza per tutti */
    width: 30px !important;  /* Stessa larghezza per tutti */
    border: none !important;
    position: relative;
}

/* 5. Riposiziona i pallini rossi (badge) in modo identico sia su Cuore che su Carrello */
.wishlist-custom-badge,
.ph-cart-module-box .ph-cart-count-sup {
    top: -5px !important;
    right: -10px !important;
}
/* ==================================================== */
/* ELIMINA IL TITOLO "ITEMS" DALLA LISTA PRODOTTI       */
/* ==================================================== */

h1.ph-header {
    display: none !important;
}

/* ==================================================== */
/* NASCONDE IL MENU SU PC MA LO MANTIENE SU MOBILE      */
/* ==================================================== */

/* Applica la regola SOLO agli schermi grandi (PC e Tablet in orizzontale) */
@media (min-width: 992px) {
    .desktop-hidden {
        display: none !important;
    }
}

/* Riporta in vita il campo di testo e rende visibili i numeri */
.ph-form-quantity .ph-input-quantity {
    display: block !important;
    width: 50px !important;
    flex: 1 1 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: center !important;
    
    /* FIX TESTO INVISIBILE */
    color: #212529 !important; /* Forza il colore del testo a grigio scuro/nero */
    background-color: #ffffff !important; /* Forza lo sfondo bianco */
    font-size: 16px !important; /* Assicura che il font non sia a 0 */
    padding: 5px !important; /* Previene bordi interni che schiacciano il testo */
    line-height: normal !important;
}

/* ==================================================== */
/* NASCONDE IL PULSANTE "TORNA ALLA CATEGORIA"          */
/* ==================================================== */

a.btn:has(svg.pc-si-back-category) {
    display: none !important;
}

/* ==================================================== */
/* NASCONDE IL TESTO "WISH LIST IS EMPTY"               */
/* ==================================================== */

.ph-wishlist-module-box > div:not(.ph-cart-link-wishlist) {
    display: none !important;
}

/* ==================================================== */
/* INGRANDISCE IL BLOCCO HEADER                         */
/* ==================================================== */

.header-wrap {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
    min-height: 130px !important;
}

/* ==================================================== */
/* FIX DISTANZA CARRELLO (Nasconde il div invisibile)   */
/* ==================================================== */

#phContainerModuleWishList {
    display: none !important;
}

/* ==================================================== */
/* FIX SPOSTAMENTO LAYOUT (Versione Definitiva)         */
/* ==================================================== */

/* Mantiene fissa la barra di scorrimento originale */
body.modal-open {
    padding-right: 0 !important;
    overflow-y: scroll !important; 
}

/* Neutralizza i padding artificiali di Bootstrap SOLO sull'header, preservando i margini interni dei container */
.modal-open .t4-header,
.modal-open .fixed-top,
.modal-open .sticky-top {
    padding-right: 0 !important;
}

/* ==================================================== */
/* TRASFORMA SCHERMATE CARRELLO E WISHLIST IN POPUP CENTRALI */
/* ==================================================== */

/* 1. Forza i contenitori a coprire esattamente l'intero schermo */
#phAddToCartPopup,
#phAddToWishListPopup {
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important; 
    max-width: 100vw !important;
    height: 100vh !important; 
    
    background: transparent !important;
    pointer-events: auto !important; 
    z-index: 99999 !important;
    
    transform: none !important; 
    padding: 0 !important;
    margin: 0 !important;
}

/* Attiva la griglia flessibile SOLO quando il popup è aperto (.show) */
#phAddToCartPopup.show,
#phAddToWishListPopup.show {
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important;
}

/* 2. Riquadro bianco centrale con animazione fluida */
#phAddToCartPopup .modal-dialog,
#phAddToWishListPopup .modal-dialog {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: 90% !important; 
    max-width: 420px !important; 
    
    transform: scale(0.95) !important; 
    transition: transform 0.2s ease-out !important;
}

#phAddToCartPopup.show .modal-dialog,
#phAddToWishListPopup.show .modal-dialog {
    transform: scale(1) !important; 
}

/* 3. Stile del riquadro */
#phAddToCartPopup .modal-content,
#phAddToWishListPopup .modal-content {
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

#phAddToCartPopup .modal-title,
#phAddToWishListPopup .modal-title {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #0f1111 !important;
}

/* 4. Incolonna i due bottoni per un layout pulito */
#phAddToCartPopup .modal-body .row:last-child,
#phAddToWishListPopup .modal-body .row:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
}

#phAddToCartPopup .modal-body .col-12,
#phAddToWishListPopup .modal-body .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* 5. Stile bottoni Amazon */
#phAddToCartPopup .btn-success,
#phAddToWishListPopup .btn-success {
    background-color: #ffd814 !important; 
    border-color: #fcd200 !important;
    color: #0f1111 !important;
}

#phAddToCartPopup .btn-primary,
#phAddToWishListPopup .btn-primary {
    background-color: #ffffff !important; 
    border-color: #d5d9d9 !important;
    color: #0f1111 !important;
}

#phAddToCartPopup .btn,
#phAddToWishListPopup .btn {
    width: 100% !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    padding: 10px !important;
    font-size: 14px !important;
}

/* ==================================================== */
/* 6. FIX MESSAGGIO DI ERRORE WISHLIST (Centratura)     */
/* ==================================================== */

/* Annulla i margini negativi della riga che contiene il messaggio */
#phAddToWishListPopup .modal-body .row:first-child {
    margin: 0 !important;
    width: 100% !important;
}

/* Rimuove i padding laterali della colonna */
#phAddToWishListPopup .modal-body .row:first-child .col-12 {
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
}

/* Formatta l'elenco (ul) per occupare tutto lo spazio centrato */
#phAddToWishListPopup #system-messages {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    width: 100% !important;
    text-align: center !important;
}

/* Formatta la singola riga (li) rimuovendo gli spazi invisibili e sistemando il testo */
#phAddToWishListPopup #system-messages li {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #d32f2f !important; /* Rosso per evidenziare l'avviso */
    font-weight: 600 !important;
    font-size: 14px !important;
    width: 100% !important;
}

/* ==================================================== */
/* ANIMAZIONI HOVER PER I BOTTONI DEI POPUP             */
/* ==================================================== */

/* 1. Prepara i bottoni per un'animazione morbida (transizione) */
#phAddToCartPopup .btn,
#phAddToWishListPopup .btn {
    transition: all 0.2s ease-in-out !important;
}

/* 2. Hover sul bottone GIALLO (Procedi al checkout / wishlist) */
#phAddToCartPopup .btn-success:hover,
#phAddToWishListPopup .btn-success:hover {
    background-color: #f7ca00 !important; /* Giallo leggermente più scuro */
    border-color: #f2c200 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important; /* Leggera ombra */
    transform: translateY(-1px) !important; /* Si solleva di 1 millimetro */
}

/* 3. Hover sul bottone BIANCO (Continua lo shopping) */
#phAddToCartPopup .btn-primary:hover,
#phAddToWishListPopup .btn-primary:hover {
    background-color: #f3f3f3 !important; /* Grigio chiarissimo */
    border-color: #c8cacb !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    transform: translateY(-1px) !important;
}

/* ==================================================== */
/* STILE DETTAGLIO PRODOTTO (Layout da riferimento foto)*/
/* ==================================================== */

/* 1. Box Immagine: Sfondo pulito senza bordi */
.ph-item-view-image-box {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ==================================================== */
/* RIORDINO ELEMENTI: DESCRIZIONE -> PREZZO -> DISP.    */
/* ==================================================== */
.phItemPricePanel {
    display: flex !important;
    flex-direction: column !important;
}

/* Assegna un ordine standard a tutti i contenitori per evitare sovrapposizioni */
.phItemPricePanel > * {
    order: 10 !important; 
}

/* 1°: Titolo */
.phItemPricePanel > .ph-header { 
    order: 1 !important; 
}

/* 2°: Descrizione (In evidenza, pulita senza linee) */
.phItemPricePanel > .ph-desc { 
    order: 2 !important; 
    font-size: 20px !important; 
    font-weight: 500 !important; 
    color: #111 !important; 
    line-height: 1.6 !important;
    margin-bottom: 25px !important; /* Spazio identico sopra al prezzo */
    padding: 0 !important; 
    border: none !important; 
}

/* 3°: Blocco Prezzo (Allineamento orizzontale originale, centrato verticalmente) */
.phItemPricePanel > div[id^="phItemPriceBoxItem"] { 
    order: 3 !important; 
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important; /* Spazio identico sotto al prezzo */
    box-shadow: none !important;
    display: flex !important;
    justify-content: flex-start !important; /* Riporta orizzontalmente a sinistra */
}

/* Centratura effettiva della cifra e della scritta "IVA inclusa" a sinistra */
.phItemPricePanel > div[id^="phItemPriceBoxItem"] .ph-item-price-box {
    justify-content: flex-start !important;
    margin-bottom: 0 !important; 
    width: 100% !important;
}

/* 4°: Disponibilità (Sotto il prezzo) */
.phItemPricePanel > .ph-item-stock-box { 
    order: 4 !important; 
    margin-bottom: 10px !important;
}

/* 5°: Codice SKU (Sotto la disponibilità) */
.phItemPricePanel > .ph-item-sku-box { 
    order: 5 !important; 
    margin-bottom: 20px !important;
}

/* 2. Tipografia e allineamento (Titolo e Prezzo) */
.ph-header {
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #333 !important;
    margin-bottom: 15px !important;
    line-height: 1.3 !important;
}

.ph-item-price-box {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 15px !important;
}

.ph-price-brutto {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #d32f2f !important; /* Rosso per il prezzo come in foto */
}

/* ==================================================== */
/* AGGIORNAMENTO TESTI: PREZZO, DISPONIBILITA', CODICE  */
/* ==================================================== */

/* "Prezzo IVA Inclusa" rosso, NON in grassetto e più grande */
.ph-price-brutto-txt {
    font-size: 16px !important; 
    font-weight: 400 !important; /* Rimosso il grassetto */
    color: #d32f2f !important; 
    order: 2 !important; 
    text-transform: uppercase !important; 
    margin-left: 5px !important;
}

/* Ingrandisce i testi di Disponibilità e Codice Prodotto */
.ph-item-sku-box, 
.ph-item-stock-box {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important; 
    margin-bottom: 8px !important;
    padding: 0 !important;
}

/* Assicura che anche i valori numerici seguano la nuova grandezza */
.ph-sku-txt, .ph-stock-txt,
.ph-stock, .ph-sku {
    color: #333 !important;
    font-size: 16px !important;
}

.ph-stock, .ph-sku {
    font-weight: 600 !important;
}


/* ==================================================== */
/* 4. RIQUADRO CARRELLO (Quantità e Bottone incolonnati)*/
/* ==================================================== */

.phItemCartBoxForm {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 25px !important;
}

/* Trasforma il contenitore in una colonna verticale */
.ph-item-add-to-cart-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* Spazio esatto tra il box quantità e il bottone */
    float: none !important;
    width: 100% !important;
    max-width: 320px !important; /* Larghezza fissa per entrambi i rettangoli */
}

/* Nasconde la parola "Quantità:" per un look più pulito e squadrato */
.ph-form-quantity label {
    display: none !important;
}

/* Forza i blocchi base a occupare il 100% dello spazio disponibile */
.ph-form-quantity,
.ph-form-button {
    width: 100% !important;
    margin: 0 !important;
}

/* Forza il contenitore della quantità a tenere uniti numero e frecce tramite Flexbox */
.ph-form-quantity .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ==================================================== */
/* FIX DEFINITIVO: STIRA IL CAMPO QUANTITA'             */
/* ==================================================== */

/* Forza il contenitore ad allargarsi al 100% */
.ph-form-quantity .input-group {
    display: flex !important;
    width: 100% !important;
}

/* Annulla i blocchi nativi e stira l'input numerico */
.ph-form-quantity .form-control,
.ph-form-quantity .form-control.ph-input-quantity {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important; /* Questo disattiva il "quadrato" nativo di Phoca Cart */
    height: 48px !important;
    text-align: center !important;
    font-size: 16px !important;
    border-radius: 4px 0 0 4px !important;
    border: 1px solid #ced4da !important;
    border-right: none !important;
}

/* Incolonna perfettamente le due freccette a destra */
.ph-form-quantity .input-group-btn-vertical {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
}

/* Regola i bottoncini +/- per adattarsi alla nuova altezza */
.ph-form-quantity .input-group-btn-vertical .btn {
    height: 24px !important; /* Esattamente metà dell'altezza totale */
    margin: 0 !important;
    border-radius: 0 4px 4px 0 !important; /* Smussa solo gli angoli esterni destri */
}

/* Stile del bottone Aggiungi al Carrello (Rettangolo inferiore) */
.ph-form-button .btn.ph-btn {
    width: 100% !important;
    height: 48px !important; /* Stessa altezza del campo quantità */
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* Spazio tra icona e testo */
    padding: 0 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 15px !important;
}

/* 5. Icone Azione (Wishlist e Domande) in stile griglia testo-sotto */
.ph-category-item-wishlist-box,
.ph-button-ask-question-box {
    float: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 20px 30px 20px 0 !important;
}

/* Trasforma il bottone "Ask Question" in un semplice link con icona */
.ph-button-ask-question-box .btn {
    background: transparent !important;
    border: none !important;
    color: #555 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

.ph-button-ask-question-box .btn:hover {
    color: #000 !important;
}

.ph-button-ask-question-box .btn svg,
.ph-category-item-wishlist-box a svg {
    width: 22px !important;
    height: 22px !important;
    fill: #777 !important;
    margin-bottom: 5px !important;
}

/* 6. Tabs inferiori in stile fisarmonica verticale */
.ph-item-bottom-box {
    margin-top: 40px !important;
    width: 100% !important;
    max-width: 600px !important; /* Allinea la larghezza con le informazioni del prodotto */
}

#PcItemTab {
    display: flex !important;
    flex-direction: column !important;
    border-bottom: none !important;
}

#PcItemTab .nav-item {
    border: 1px solid #e7e7e7 !important;
    border-bottom: none !important;
    margin: 0 !important;
}

#PcItemTab .nav-item:last-child {
    border-bottom: 1px solid #e7e7e7 !important;
}

#PcItemTab .nav-link {
    border: none !important;
    background: #f8f9fa !important;
    color: #333 !important;
    padding: 12px 15px !important;
    font-weight: 600 !important;
    text-align: left !important;
    width: 100% !important;
}

#PcItemTab .nav-link.active {
    background: #fff !important;
    color: #000 !important;
}

/* ==================================================== */
/* COMPATTAMENTO SPAZI VERTICALI (Prezzo, Stock, Carrello) */
/* ==================================================== */

/* 1. Azzera lo spazio della descrizione se il prodotto non ne ha una */
.phItemPricePanel > .ph-desc:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Riduce lo spazio vuoto sotto il prezzo */
.phItemPricePanel > div[id^="phItemPriceBoxItem"] { 
    margin-bottom: 10px !important; 
}

/* 3. Avvicina leggermente Disponibilità e Codice Prodotto */
.phItemPricePanel > .ph-item-stock-box { 
    margin-bottom: 5px !important; 
}

.phItemPricePanel > .ph-item-sku-box { 
    margin-bottom: 15px !important; 
}

/* 4. Tira in su l'intero blocco del carrello (quantità + bottone) */
.phItemCartBoxForm {
    margin-top: 10px !important; 
}

/* ==================================================== */
/* WISHLIST ACCANTO AL CARRELLO & FIX DISPONIBILITA'    */
/* ==================================================== */

/* 1. "Smantella" i contenitori di sistema per controllare gli elementi liberamente */
.ph-category-action-box-buttons.gridlist,
.ph-category-action-buttons.gridlist {
    display: contents !important;
}

/* 2. Trasforma la scheda prodotto in una griglia flessibile */
.row-item > .ph-item-action-box.gridlist {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important; /* Centra verticalmente gli elementi sulla stessa riga */
}

/* Nasconde i divisori invisibili per evitare spazi vuoti anomali */
.row-item > .ph-item-action-box.gridlist > .ph-cb {
    display: none !important;
}

/* 3. Forza Titolo, Prezzo, Descrizione e DISPONIBILITA' a sinistra a tutta larghezza */
.row-item > .ph-item-action-box.gridlist > .ph-product-header { order: 1 !important; width: 100% !important; text-align: left !important; }
.row-item > .ph-item-action-box.gridlist > div[id^="phItemPriceBoxItems"] { order: 2 !important; width: 100% !important; text-align: left !important; }
.row-item > .ph-item-action-box.gridlist > .ph-item-desc { order: 3 !important; width: 100% !important; text-align: left !important; margin-bottom: 10px !important; }

/* Riposiziona la Disponibilità a sinistra */
.ph-item-stock-box { 
    order: 4 !important; 
    width: 100% !important; 
    margin-bottom: 15px !important;
}
.ph-category-stock-box {
    display: flex !important;
    justify-content: flex-start !important; /* Allinea il testo a sinistra */
    gap: 5px !important;
}

/* 4. Estrae la Wishlist e la posiziona accanto al bottone Carrello */
.jf_ph_cat_item_grid.gridlist {
    order: 5 !important;
    width: auto !important;
    margin-left: auto !important; /* Spinge il cuoricino tutto a destra... */
    margin-right: 15px !important; /* ...lasciando lo spazio esatto per il carrello */
    display: flex !important;
    align-items: center !important; /* Lo allinea alla stessa identica altezza del bottone! */
}

/* Formattazione del cuoricino */
.jf_ph_cat_item_grid.gridlist .ph-pull-right { float: none !important; }
.jf_ph_cat_item_grid.gridlist svg {
    width: 24px !important;
    height: 24px !important;
    fill: #777 !important;
    transition: fill 0.2s ease-in-out !important;
    display: block !important;
}
.jf_ph_cat_item_grid.gridlist a:hover svg { fill: #d32f2f !important; } /* Diventa rosso al passaggio del mouse */

/* 5. Mantiene il form del Carrello all'estrema destra sulla stessa riga */
.phjAddToCart.phjItems {
    order: 6 !important;
    width: auto !important;
    margin: 0 !important;
}

/* Blocca il float per non rovinare l'allineamento di Flexbox */
.phjAddToCart.phjItems .ph-pull-right,
.phjAddToCart.phjItems .ph-pull-left {
    float: none !important;
    display: block !important;
}

/* ==================================================== */
/* LISTA PRODOTTI: PREZZO A SINISTRA E "IVA INCLUSA" A DESTRA */
/* ==================================================== */

/* 1. Trasforma il box del prezzo in una riga flessibile allineata a sinistra */
.ph-category-price-box {
    display: flex !important;
    align-items: baseline !important; /* Allinea il testo alla base per renderlo proporzionato */
    justify-content: flex-start !important; /* Spinge tutto verso sinistra */
    gap: 8px !important; /* Spazio tra il prezzo e la scritta */
    margin-bottom: 10px !important;
}

/* 2. Forza il prezzo numerico ad apparire per primo (a sinistra) */
.ph-category-price-box .ph-price-brutto {
    order: 1 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #d32f2f !important; /* Rosso acceso */
}

/* 3. Forza la scritta "IVA INCLUSA" ad apparire per seconda (a destra del prezzo) */
.ph-category-price-box .ph-price-brutto-txt {
    order: 2 !important;
    font-size: 13px !important;
    color: #777 !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
}

/* ==================================================== */
/* PULIZIA MENU A TENDINA: ORDINAMENTO PRODOTTI         */
/* ==================================================== */

/* Nasconde tutte le opzioni dal settimo elemento in poi */
select[name="itemordering"] option:nth-child(n+7) {
    display: none !important;
}

/* ==================================================== */
/* GRIGLIA FOTO SECONDARIE (4 Colonne)                  */
/* ==================================================== */

/* 1. Trasforma il contenitore delle miniature in una griglia a 4 colonne */
.ph-item-image-add-box {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 colonne della stessa larghezza */
    gap: 10px !important; /* Spazio uniforme tra le foto */
    margin-top: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Disattiva le classi Bootstrap (col-md-4) che forzavano le 3 colonne */
.ph-item-image-add-box > .ph-item-image-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
}

/* 3. Stile elegante e uniforme per le singole miniature */
.ph-item-image-add-box .phImageAdditional {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Forza le miniature a essere dei quadrati perfetti */
    object-fit: contain !important; /* L'immagine non viene tagliata, si adatta al quadrato */
    border: 1px solid #e7e7e7 !important;
    border-radius: 4px !important;
    padding: 4px !important;
    background: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

/* Effetto interattivo al passaggio del mouse */
.ph-item-image-add-box a:hover .phImageAdditional {
    border-color: #d32f2f !important; /* Diventa rosso per richiamare il prezzo */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ==================================================== */
/* UNIFORMAZIONE DIMENSIONI IMMAGINE PRINCIPALE         */
/* ==================================================== */

/* 1. Crea una "tela" quadrata fissa per l'immagine principale */
.ph-item-image-full-box {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Forza il contenitore a essere un quadrato perfetto */
    max-height: 450px !important; /* Evita che diventi sproporzionato sugli schermi molto grandi */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 2. Fa sì che il link attorno alla foto occupi tutta la tela */
.ph-item-image-full-box a.phImageFullHref {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 3. La magia sull'immagine vera e propria */
.ph-item-image-full-box img.ph-image-full {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Adatta l'immagine al quadrato senza MAI deformarla o tagliarla */
    padding: 15px !important; /* Lascia un po' di "respiro" dai bordi */
    border: none !important; /* Rimuove vecchi bordi di sistema */
    background: transparent !important;
}

/* ==================================================== */
/* RICERCA MOBILE: DA ICONA A BARRA ESPANDIBILE         */
/* ==================================================== */

/* Applica le modifiche SOLO sui dispositivi mobili (fino a 767px di larghezza) */
@media (max-width: 767px) {
    
    /* 1. Rimuove blocchi nativi dei contenitori per permettere l'espansione */
    .ph-search-box, 
    .ph-search-box .row, 
    .ph-search-box .col-12, 
    .phSearchBox, 
    .phSearchBox .input-group {
        position: static !important;
    }

    /* 2. Trasforma l'input di testo in un'icona (lente) a riposo */
    .ph-search-box .phSearchBoxSearchInput {
        width: 44px !important;
        height: 44px !important;
        border-radius: 22px !important;
        padding: 0 !important;
        color: transparent !important; /* Nasconde il testo inserito se non in uso */
        background-color: transparent !important;
        border: none !important;
        
        /* Inserisce la lente d'ingrandimento SVG come sfondo al centro */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%230f1111' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 20px !important;
        
        cursor: pointer !important;
        transition: all 0.3s ease-in-out !important;
        float: right !important; /* La posiziona a destra per non accavallarsi col logo */
    }

    /* Nasconde la scritta "Cerca prodotto..." quando è chiusa */
    .ph-search-box .phSearchBoxSearchInput::placeholder {
        color: transparent !important;
    }

    /* 3. Animazione di espansione: quando l'utente tocca l'icona (stato FOCUS) */
    .ph-search-box .phSearchBoxSearchInput:focus {
        /* Si sgancia dal layout e si posiziona in alto, a tutta larghezza */
        position: fixed !important;
        top: 15px !important;
        left: 15px !important;
        right: 15px !important;
        width: auto !important; 
        height: 50px !important;
        z-index: 99999 !important;
        
        background-color: #ffffff !important;
        border: 2px solid #ffd814 !important; /* Richiama il giallo Amazon */
        border-radius: 8px !important;
        box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important;
        
        /* Sposta l'icona della lente a sinistra e fa spazio per scrivere il testo */
        background-position: 15px center !important;
        padding: 0 15px 0 50px !important;
        color: #0f1111 !important;
        font-size: 16px !important; /* Dimensione ideale per evitare l'auto-zoom di iOS */
    }

    /* Fa riapparire il testo del placeholder "Cerca prodotto..." */
    .ph-search-box .phSearchBoxSearchInput:focus::placeholder {
        color: #777 !important;
    }
}

/* ==================================================== */
/* FIX CHECKOUT MOBILE: TRASFORMA RIGHE IN SCHEDE       */
/* ==================================================== */

@media (max-width: 767px) {
    
    /* 1. Nasconde l'intestazione della tabella (Immagine, Prodotto, ecc.) che non serve più */
    .ph-checkout-cart-row-header {
        display: none !important;
    }

    /* 2. Trasforma il contenitore del singolo prodotto in una colonna flessibile */
    .ph-checkout-cart-row-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        border: 1px solid #e7e7e7 !important;
        border-radius: 8px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
        background: #fff !important;
    }

    /* 3. Forza tutte le colonne interne (immagine, titolo, quantità, prezzo) al 100% della larghezza */
    .ph-checkout-cart-row-item > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
        display: block !important;
    }

    /* 4. Sistema l'immagine */
    .ph-checkout-cart-row-item .ph-checkout-cart-image {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 15px !important;
    }
    .ph-img-cart-checkout {
        max-width: 120px !important;
        height: auto !important;
    }

    /* 5. Evidenzia il titolo del prodotto */
    .ph-checkout-cart-row-item .ph-checkout-cart-title {
        font-size: 16px !important;
        font-weight: bold !important;
        margin-bottom: 15px !important;
    }

    /* 6. Centra e compatta il box per cambiare la quantità (bottoni + e -) */
    .phItemCartUpdateBoxForm {
        display: flex !important;
        justify-content: center !important;
        margin: 10px 0 !important;
        width: 100% !important;
    }
    .phItemCartUpdateBoxForm .input-group {
        width: auto !important;
        display: inline-flex !important;
    }

    /* 7. Evidenzia il prezzo finale in basso */
    .ph-checkout-cart-row-item .ph-checkout-cart-brutto {
        font-size: 20px !important;
        font-weight: bold !important;
        color: #d32f2f !important; /* Rosso Amazon per il prezzo */
        margin-top: 10px !important;
        border-top: 1px dashed #e7e7e7 !important; /* Riga di separazione visiva */
        padding-top: 10px !important;
    }

    /* 8. Sistema la spaziatura dei totali finali del carrello */
    .ph-checkout-cart-row-subtotal,
    .ph-checkout-cart-row-total-box {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 10px 15px !important;
    }
    
    .ph-checkout-cart-row-subtotal > div {
        width: auto !important;
        flex: none !important;
    }
}

/* ==================================================== */
/* NASCONDI TASTO AGGIORNA CARRELLO (Per Auto-Update)   */
/* ==================================================== */
.phItemCartUpdateBoxForm button[value="update"] {
    display: none !important;
}

/* ==================================================== */
/* MENU MOBILE: NASCONDI TENDINA, MANTIENI OFF-CANVAS   */
/* ==================================================== */

/* 1. Nasconde definitivamente il pulsante hamburger a tendina */
button.navbar-toggler {
    display: none !important;
}

/* 2. (Opzionale) Nasconde il blocco di navigazione vuoto che conteneva il pulsante */
.t4-header-r nav.navbar-expand-lg {
    display: none !important;
}

/* 3. Assicura che il pulsante off-canvas sia visibile SOLO su mobile/tablet e nascosto su PC */
@media (max-width: 991px) {
    #triggerButton.t4-offcanvas-toggle {
        display: inline-block !important;
    }
}

@media (min-width: 992px) {
    #triggerButton.t4-offcanvas-toggle {
        display: none !important;
    }
}

/* ==================================================== */
/* HEADER MOBILE: LOGO CENTRATO, TOGGLE SX, ICONE DX    */
/* ==================================================== */

@media (max-width: 991px) {
    
    /* 1. Prepara il contenitore principale */
    .header-wrap {
        position: relative !important;
        padding: 10px 15px !important;
    }

    /* 2. Ancoraggio del Logo al centro esatto */
    .header-left {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Limita l'altezza del logo per non sormontare le icone */
    .header-left img {
        max-height: 38px !important; 
        width: auto !important;
    }

    /* Nasconde la colonna centrale vuota */
    .header-center {
        display: none !important;
    }

    /* 3. Il contenitore di destra occupa tutto lo spazio per smistare gli elementi */
    .t4-header-r {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important; /* Distanza uniforme tra le icone a destra */
    }

    /* 4. Il trucco: spinge il Toggle (Hamburger) all'estrema sinistra */
    #triggerButton.t4-offcanvas-toggle {
        order: -1 !important; /* Lo forza ad essere il primo elemento */
        margin-right: auto !important; /* Spinge tutto il resto all'estrema destra */
        margin-left: 0 !important;
        padding: 6px 10px !important;
        font-size: 18px !important;
        background: transparent !important;
        border: 1px solid #e7e7e7 !important;
    }

    /* 5. Rimpicciolimento armonioso delle icone di destra */
    
    /* Icona Ricerca (adatta il codice precedente) */
    .ph-search-box .phSearchBoxSearchInput {
        width: 36px !important;
        height: 36px !important;
        background-size: 16px !important;
    }

    /* Icona Profilo Utente */
    .header-icon-user a i {
        font-size: 18px !important;
        color: #0f1111 !important;
    }

    /* Icona e Bottone Carrello */
    .ph-cart-module-box .btn {
        padding: 4px 10px !important;
        font-size: 13px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        border-radius: 6px !important;
    }
    
    .ph-cart-module-box .shopping-cart {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Ridimensiona il badge numerico del carrello */
    .ph-cart-count-sup {
        font-size: 11px !important;
        top: -2px !important;
    }
}

/* ==================================================== */
/* FIX DEFINITIVO PROPORZIONI ICONE E TOGGLE (MOBILE)   */
/* ==================================================== */

@media (max-width: 991px) {
    
    /* 1. Rimuove forzatamente il quadrato dal Toggle Menu */
    header #triggerButton.t4-offcanvas-toggle.btn {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    
    header #triggerButton i.fa-bars {
        font-size: 22px !important;
        color: #0f1111 !important;
    }

    /* 2. Rimuove il bottone grigio di Bootstrap dal Carrello */
    .t4-header-r .ph-cart-module-box button.btn.btn-outline-secondary {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }
    
    /* Nasconde la freccetta a tendina di Bootstrap */
    .t4-header-r .ph-cart-module-box button.dropdown-toggle::after {
        display: none !important;
    }

    /* 3. Uniforma tutte le icone (Ricerca, Utente, Cuore, Carrello) a 22px */
    .t4-header-r svg, 
    .t4-header-r .shopping-cart, 
    .t4-header-r .fas,
    .t4-header-r i.fa-user {
        width: 22px !important;
        height: 22px !important;
        font-size: 22px !important;
        color: #0f1111 !important;
    }

    /* 4. Sistema i pallini rossi (badge) per renderli piccoli e centrati */
    .t4-header-r .ph-cart-module-box .btn,
    .t4-header-r .ph-wishlist-module-box a,
    .t4-header-r .phItemWishListBox a {
        position: relative !important; 
        display: inline-block !important;
        overflow: visible !important; /* Fondamentale per non tagliare il pallino */
    }

    .t4-header-r .ph-cart-count-sup,
    .t4-header-r .wishlist-custom-badge {
        position: absolute !important;
        top: -8px !important;
        right: -10px !important;
        background-color: #d32f2f !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: bold !important;
        width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        border-radius: 50% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ==================================================== */
/* FIX CENTRATURA ARTICOLI (RIMUOVE SIDEBAR VUOTA)      */
/* ==================================================== */

/* 1. Nasconde la colonna laterale sinistra vuota */
.com-content-article .article-inner .row > .col-md-3 {
    display: none !important;
}

/* 2. Forza il contenitore dell'articolo a occupare tutto lo spazio (12 colonne) */
.com-content-article .article-inner .row > .col-md-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important; /* Rimuove eventuali margini extra */
}

/* ==================================================== */
/* ESPANSIONE LARGHEZZA SEZIONE RECENSIONI E TABS       */
/* ==================================================== */

.ph-item-bottom-box {
    max-width: 100% !important; /* Annulla il limite precedente di 600px */
    width: 100% !important;
}

/* Opzionale: dà un po' di respiro e stile al contenuto interno della recensione */
.ph-item-bottom-box .tab-content {
    padding: 20px 0 !important;
}

.ph-item-bottom-box .ph-message {
    max-width: 100% !important;
}

/* ==================================================== */
/* LAYOUT CARRELLO VUOTO E NASCONDIMENTO CHECKOUT       */
/* ==================================================== */

/* 1. Nasconde i moduli di Login, Indirizzi, Spedizione e Pagamento se il carrello è vuoto */
#ph-pc-checkout-box:has(.ph-cart-empty) .ph-checkout-box-login,
#ph-pc-checkout-box:has(.ph-cart-empty) .ph-checkout-box-address,
#ph-pc-checkout-box:has(.ph-cart-empty) .ph-checkout-box-shipping,
#ph-pc-checkout-box:has(.ph-cart-empty) .ph-checkout-box-payment,
#ph-pc-checkout-box:has(.ph-cart-empty) form#phCheckoutAddress {
    display: none !important;
}

/* 2. Trasforma il semplice testo in un avviso centrale e ben visibile */
#ph-pc-checkout-box .ph-cart-empty {
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #555 !important;
    background-color: #fcfcfc !important;
    border: 2px dashed #e7e7e7 !important;
    border-radius: 12px !important;
    padding: 80px 20px !important;
    margin: 40px auto !important;
    max-width: 700px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02) !important;
    
    /* Aggiunge un'icona decorativa (carrello vuoto) sopra il testo */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
}

/* 3. Inserisce un'icona SVG prima del testo */
#ph-pc-checkout-box .ph-cart-empty::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 482.165 424 496.326 424 512c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Nasconde la freccina nativa dal menu a tendina dell'utente */
.header-icon-user .dropdown-toggle::after {
    display: none !important;
}

/* ==================================================== */
/* FIX MENU A TENDINA PROFILO UTENTE                    */
/* ==================================================== */

/* Regola la larghezza e i margini del riquadro bianco */
.header-icon-user .dropdown-menu {
    min-width: 180px !important;
    width: max-content !important;
    padding: 8px 0 !important;
    margin-top: 10px !important;
    border-radius: 8px !important;
}

/* Blocca testi e icone all'interno del contenitore */
.header-icon-user .dropdown-item {
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Distanzia correttamente le icone dal testo */
.header-icon-user .dropdown-item i {
    width: 20px !important;
    text-align: center !important;
    margin-right: 12px !important;
}

/* ==================================================== */
/* CENTRATURA PERFETTA DEL MENU A TENDINA UTENTE        */
/* ==================================================== */

.header-icon-user .dropdown-menu {
    top: 100% !important; /* Spinge la tendina esattamente sotto l'icona */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important; /* Centra orizzontalmente */
    margin-top: 15px !important; /* Aggiunge un po' di spazio tra l'omino e il riquadro */
}

/* ==================================================== */
/* SEPARATORE PRODOTTI NEL CARRELLO (Corretto)          */
/* ==================================================== */

/* Aggiunge la linea e centra gli elementi lavorando solo sulla riga principale (non sulle colonne) */
.ph-checkout-cart-row-item {
    border-bottom: 1px solid #eaeaea !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
    align-items: center !important; /* Centra verticalmente le colonne in modo sicuro */
}

/* Rimuove la linea dall'ultimo articolo */
.ph-checkout-cart-row-item:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Assicura che la colonna del prezzo sia allineata a destra/centro come l'intestazione */
.ph-checkout-cart-brutto {
    text-align: right !important; /* Se l'intestazione è centrata, cambia "right" in "center" */
}

/* ==================================================== */
/* SEPARATORE PRODOTTI NELLE LISTE (Corretto)           */
/* ==================================================== */

/* Applica la linea SOLO al box principale per tutta la larghezza */
#phItemsBox .ph-item-box.gridlist {
    border-bottom: 1px solid #eaeaea !important;
    padding-bottom: 15px !important; /* Spazio sotto al prodotto prima della linea */
    margin-bottom: 15px !important;  /* Spazio sotto alla linea prima del prossimo prodotto */
}

/* Rimuove la linea all'ultimo prodotto della pagina */
#phItemsBox .row-item:last-of-type .ph-item-box.gridlist {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ==================================================== */
/* SPAZIATURA TRA TITOLO E PREZZO (VISTA CATEGORIA)     */
/* ==================================================== */

/* Aggiunge spazio sotto al titolo del prodotto */
#phItemsBox .ph-product-header.gridlist {
    margin-bottom: 12px !important; /* Aumenta o diminuisci questo valore per regolare la distanza */
}

/* ==================================================== */
/* NASCONDI ICONA FLUTTUANTE COOKIE CONSENT             */
/* ==================================================== */

a.cc-trigger,
.cc-trigger.cc-trigger-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==================================================== */
/* HEADER DINAMICO: GRANDE, STICKY E RESTRINGIBILE      */
/* ==================================================== */

/* 1. ANCORAGGIO FORZATO E RIPRISTINO DEL TUO BORDO */
#t4-header {
    /* Ho rimosso il "border-bottom: none", così il bordo che hai messo nel template riappare! */
    position: sticky !important;    
    top: 0 !important;
    z-index: 9999 !important;
    background-color: #ffffff !important; 
    transition: all 0.4s ease !important;
    box-shadow: none !important; /* Uccide la 'piccola riga' (ombra) di default a riposo */
}

/* Rimuove eventuali righe residue interne che potrebbero sdoppiare il bordo */
#t4-header .header-block,
#t4-header .header-wrap {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Assicura che il menu nascosto non generi spazio o righe fantasma su desktop */
@media (min-width: 992px) {
    .t4-navbar.desktop-hidden {
        display: none !important;
        border: none !important;
    }
}

/* ================================== */
/* 2. STATO NORMALE (Header Gigante)  */
/* ================================== */
#t4-header .header-block {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
    transition: all 0.4s ease !important;
}

/* Logo Grande */
#t4-header .logo-img,
#t4-header .logo-img-sm {
    max-height: 80px !important; /* Puoi aumentarlo fino a 100px se lo vuoi più imponente */
    width: auto !important;
    transition: all 0.4s ease !important;
}

/* Barra di Ricerca Grande */
#t4-header .phSearchBoxSearchInput,
#t4-header .phSearchBox .btn {
    height: 50px !important;
    font-size: 1.1rem !important;
    transition: all 0.4s ease !important;
}

/* Icone Utente, Carrello e Menu grandi */
#t4-header .t4-header-r i,
#t4-header .shopping-cart {
    font-size: 1.6rem !important;
    transition: all 0.4s ease !important;
}
#t4-header .btn.dropdown-toggle {
    font-size: 1.1rem !important;
}

/* ============================================== */
/* 3. STATO SCORRIMENTO (is-sticky)               */
/* ============================================== */

/* Restringiamo l'Header */
#t4-header.is-sticky .header-block {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important; /* Ombra elegante */
}

/* Restringiamo il Logo */
#t4-header.is-sticky .logo-img,
#t4-header.is-sticky .logo-img-sm {
    max-height: 45px !important;
}

/* Restringiamo la Barra di Ricerca */
#t4-header.is-sticky .phSearchBoxSearchInput,
#t4-header.is-sticky .phSearchBox .btn {
    height: 38px !important;
    font-size: 1rem !important;
}

/* Restringiamo le Icone */
#t4-header.is-sticky .t4-header-r i,
#t4-header.is-sticky .shopping-cart {
    font-size: 1.2rem !important;
}
#t4-header.is-sticky .btn.dropdown-toggle {
    font-size: 1.0rem !important;
}

/* ==================================================== */
/* ADATTAMENTI E FIX PER SMARTPHONE (NESSUN RESTRINGIMENTO) */
/* ==================================================== */
@media (max-width: 991px) {
    
    /* 1. NORMALE E STICKY: TAGLIO DAL BASSO */
    #t4-header .header-block {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        transition: padding 0.3s ease !important;
    }
    
    /* Allo scroll, il contenuto resta uguale ma il guscio si "taglia" dal basso di 10px */
    #t4-header.is-sticky .header-block {
        padding-top: 15px !important; /* Resta invariato sopra */
        padding-bottom: 5px !important; /* Taglia 10 pixel dal basso */
        overflow: hidden !important;
    }
    
    /* Il contenuto (logo, icone, barra) mantiene esattamente le stesse dimensioni */
    #t4-header .logo-img,
    #t4-header .logo-img-sm,
    #t4-header.is-sticky .logo-img,
    #t4-header.is-sticky .logo-img-sm {
        max-height: 50px !important; 
    }

    #t4-header .phSearchBoxSearchInput,
    #t4-header .phSearchBox .btn,
    #t4-header.is-sticky .phSearchBoxSearchInput,
    #t4-header.is-sticky .phSearchBox .btn {
        height: 40px !important; 
        font-size: 1rem !important;
    }

    #t4-header .t4-header-r i,
    #t4-header .shopping-cart,
    #t4-header.is-sticky .t4-header-r i,
    #t4-header.is-sticky .shopping-cart {
        font-size: 1.5rem !important;
    }

    /* 2. NASCONDE LA WISHLIST (Cuore) IN MODO DEFINITIVO */
    #t4-header .ph-wishlist-module-box,
    #t4-header #phItemWishListBox,
    #t4-header .phItemWishListBox {
        display: none !important;
    }

    /* 3. IMPEDISCE LA SOVRAPPOSIZIONE E ORGANIZZA GLI SPAZI */
    #t4-header .header-wrap {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    #t4-header .header-left {
        flex: 0 1 auto !important;
        max-width: 45% !important;
    }

    /* 4. ALLINEAMENTO MILLIMETRICO A DESTRA (Omino e Carrello) */
    #t4-header .t4-header-r {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 1 1 auto !important;
        gap: 12px !important; /* Distanza tra omino e carrello */
        padding-right: 0 !important;
    }

    #t4-header .t4-header-r .custom,
    #t4-header .t4-header-r .ph-cart-module-box {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    #t4-header .ph-cart-module-box .btn {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Solleva il carrello per allinearlo all'omino */
    #t4-header .ph-cart-module-box {
        transform: translateY(-4px) !important; 
    }

    /* Pallino rosso del carrello sempre fisso e leggibile */
    #t4-header .ph-cart-count-sup,
    #t4-header.is-sticky .ph-cart-count-sup {
        font-size: 0.75rem !important;
        padding: 2px 5px !important;
        top: -6px !important;
    }
}

/* ==================================================== */
/* FIX ALLINEAMENTO PASSKEY E ACCEDI (CHECKOUT)         */
/* ==================================================== */

/* 1. Trasforma il form da orizzontale (inline) a verticale (colonna) e lo allinea a sinistra */
#ph-login-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
    width: 100% !important;
}

/* 2. Disinnesca eventuali sfasature date dai contenitori della passkey */
#ph-login-form .com-users-login__submit,
#ph-login-form .com-users-login__submit .controls {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Crea il giusto spazio prima della Passkey e tra i due bottoni */
#ph-login-form .com-users-login__submit {
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}

/* 4. Rende i due bottoni (Passkey e Accesso) due rettangoli IDENTICI */
#ph-login-form .plg_system_webauthn_login_button,
#ph-login-form button[name="Submit"].ph-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 240px !important; /* Stessa larghezza per entrambi */
    max-width: 100% !important; 
    height: 42px !important; /* Stessa altezza per entrambi */
    padding: 0 15px !important;
    margin: 0 !important; 
    box-sizing: border-box !important;
    font-size: 14px !important;
    border-radius: 4px !important;
}

/* 5. Sistema l'icona interna della Passkey */
#ph-login-form .plg_system_webauthn_login_button svg {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    fill: currentColor;
}

/* 6. Spinge a capo i link di recupero password in modo ordinato */
.ph-checkout-box-action .ph-li-inline {
    width: 100% !important;
    display: block !important;
    margin-top: 15px !important;
}

/* ==================================================== */
/* FIX PASSKEY E ACCEDI NELLA PAGINA LOGIN STANDARD     */
/* ==================================================== */

/* 1. Blocca le dimensioni dell'icona (chiave) */
#com-users-login__form .plg_system_webauthn_login_button svg {
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    fill: currentColor;
}

/* 2. Rende i due bottoni larghi quanto i campi del form (100%) */
#com-users-login__form .plg_system_webauthn_login_button,
#com-users-login__form button[type="submit"] {
    display: flex !important; /* Passato da inline-flex a flex per riempire lo spazio */
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important; /* <-- Modificato: ora occupano tutta la larghezza del form */
    height: 42px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    border-radius: 4px !important;
}

/* 3. Aggiunge un po' di margine sotto la passkey per staccarla dal pulsante Accesso */
#com-users-login__form .plg_system_webauthn_login_button {
    margin-bottom: 10px !important;
}

/* ==================================================== */
/* RIORDINAMENTO PAGINA PRODOTTO E FIX QUANTITA'        */
/* ==================================================== */

/* 1. Trasforma il contenitore dei dati in una colonna flessibile */
.ph-item-view-data-box {
    display: flex !important;
    flex-direction: column !important;
}

/* Nasconde i "divisori vuoti" (clearfix) che in Flexbox creano solo spazi vuoti fastidiosi */
.ph-item-view-data-box > .ph-cb {
    display: none !important;
}

/* 2. Assegna un "ordine" agli elementi. 
   Tutto ciò che non ha un ordine specificato resta in alto (Titolo, Prezzo, Codice Prodotto).
   Spingiamo i tasti Avvisami, Carrello, Wishlist in fondo. */

/* Il messaggio "Ci dispiace..." va per primo (sopra) */
.ph-watchdog-info {
    order: 11 !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important; /* Crea un po' di spazio prima del link sottostante */
}

/* Il link "Avvisami..." va per secondo (sotto) */
.ph-watchdog {
    order: 12 !important;
}

.phItemCartBoxForm {
    order: 12 !important;
    margin-top: 15px !important;
}

/* Allinea la wishlist e la domanda a destra mantenendo l'ordine */
.ph-category-item-wishlist-box {
    order: 13 !important;
    align-self: flex-end !important;
    margin-top: 10px !important;
}

.ph-button-ask-question-box {
    order: 14 !important;
    align-self: flex-end !important;
    margin-top: 10px !important;
}

/* 3. FA SPARIRE IL SELETTORE DELLA QUANTITÀ SE IL PRODOTTO È ESAURITO */
/* Phoca Cart nasconde il carrello aggiungendo questa classe. Noi forziamo la sparizione totale dell'ingombro. */
.ph-form-quantity.ph-visibility-hidden {
    display: none !important;
}

/* ==================================================== */
/* TASTO "AVVISAMI" STILE ZALANDO                       */
/* ==================================================== */

/* Espande il contenitore per fargli prendere tutto lo spazio */
.ph-watchdog {
    width: 100% !important;
    display: block !important;
}

/* Nasconde l'icona separata per avere un bottone pulito e professionale */
.ph-watchdog a:first-child {
    display: none !important;
}

/* Trasforma il semplice link di testo in un bottone massiccio */
.ph-watchdog a:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background-color: #111111 !important; /* Nero profondo stile Zalando */
    color: #ffffff !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 700 !important; /* Grassetto */
    text-transform: uppercase !important; /* Scritta tutta in maiuscolo */
    text-decoration: none !important; /* Toglie la sottolineatura del link */
    border-radius: 4px !important; /* Metti 0 se preferisci i bordi perfettamente spigolosi */
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
    text-align: center !important;
}

/* Effetto quando si passa il mouse sopra il bottone */
.ph-watchdog a:last-child:hover {
    background-color: #444444 !important; /* Diventa grigio scuro */
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ==================================================== */
/* MESSAGGIO "NON DISPONIBILE" STILE MINIMAL E MODERNO  */
/* ==================================================== */

.ph-watchdog-info.alert.alert-info {
    background-color: transparent !important; /* Rimuove lo sfondo azzurro */
    border: none !important; /* Rimuove il bordo */
    color: #cc0000 !important; /* Rosso deciso per indicare la mancanza di disponibilità */
    padding: 0 !important; /* Rimuove lo spazio interno del box standard */
    font-weight: 600 !important; /* Rende il testo leggermente in grassetto */
    font-size: 15px !important; /* Dimensione del testo leggibile */
    margin-top: 20px !important; 
    margin-bottom: 15px !important; /* Distanza dal bottone nero sottostante */
}

/* Allinea orizzontalmente i bottoni Si e No della Fattura */
#jform_fattura .radio {
    display: flex;
    flex-direction: row;
    gap: 25px; /* Distanza tra il tasto Si e il tasto No */
    align-items: center;
    margin-top: 8px; /* Allinea visivamente i bottoni all'etichetta a sinistra */
}

/* Rimuove i margini di default che li fanno andare a capo */
#jform_fattura .radio .form-check {
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

/* Aggiunge un piccolo spazio tra il pallino cliccabile e la scritta */
#jform_fattura .radio .form-check input {
    margin-right: 7px;
    margin-top: 0;
}

/* Stile per il box delle coordinate bancarie a fine ordine */
.ph-info-payment-description {
    background-color: #f6fcf9; /* Sfondo verde chiarissimo */
    border: 1px solid #e0f0e9;
    border-left: 5px solid #4aa775; /* Linea verde marcata a sinistra */
    border-radius: 6px;
    padding: 20px 25px;
    margin: 25px 0;
    font-size: 16px;
    color: #333333;
    line-height: 2; /* Aumenta lo spazio tra le righe per la massima leggibilità */
    white-space: pre-line; /* MAGIA: Rispetta gli "a capo" del testo senza bisogno di codice HTML */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Leggera ombra per dare profondità */
}