/* Impedisce il trascinamento e la selezione delle immagini del catalogo */
.product-cover img,
.product-images img,
.images-container img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}
.product-cover {
    position: relative;
}

.product-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 2;
}




/* --- COLORE LABEL STATUS ORDINE CORREZIONE IN VERDE PIU OCCHIABILE --- */
span.label.label-pill.dark {
    background-color: #acde3b !important;
}


/* ============================================================
   PREZZO AMAZON STYLE - DINAMICO (Gestito da Creative Elements)
   ============================================================ */

.amazon-price {
    display: inline-flex !important;
    align-items: flex-start !important; /* Fondamentale: allinea tutto in alto */
    line-height: 1 !important;
    vertical-align: middle;
    /* Eredita font-family, weight e size impostati in CE */
    font-family: inherit;
    font-weight: inherit;
}

/* Parte Intera: usa la grandezza base di Creative Elements */
.price-integer {

    line-height: 0.9 !important; /* Stringe lo spazio sopra il numero */
    letter-spacing: -0.03em !important; /* Avvicina i numeri proporzionalmente */
}

/* Gruppo Decimali + Euro: si rimpicciolisce in proporzione all'intero */
.price-decimal-group {
    display: inline-flex !important;
    align-items: flex-start !important;
    /* Rimpicciolisce i decimali (circa il 55% della grandezza impostata in CE) */
    font-size: 0.55em !important; 
    margin-top: 0.12em !important; /* Allineamento millimetrico verso l'alto */
    margin-left: 2px !important;
    font-weight: inherit !important;
}

/* Centesimi e Simbolo Euro */
.price-fraction, 
.price-currency {
    line-height: 1 !important;
    font-weight: inherit !important;
    display: inline-block !important;
}

.price-currency {
    margin-left: 1px !important;
}


/* --- FIX SCRITTA IVA INCLUSA (30% DEL PREZZO) --- */
.ce-product-prices .ce-tax-shipping-delivery-label {
    font-size: 0.3em !important; /* Rimpicciolisce al 30% della dimensione base */
    color: #666 !important;      /* Grigio più morbido per non distrarre dal prezzo */
    font-weight: 400 !important; /* Peso del font normale (non bold) */
    margin-top: 2px !important;  /* Avvicina la scritta al prezzo */
    display: block !important;   /* Assicura che vada a capo correttamente */
    line-height: 1 !important;
}

.elementor-15170101 .elementor-element.elementor-element-278b5dda .ce-product-prices {
    gap: 1px;
}


/* --- PP ELIMINA SCATTO PREZZO VARIANTI --- */
.elementor-21170101 .elementor-element.elementor-element-4721a90.elementor-column.elementor-element[data-element_type="column"] > .elementor-column-wrap.elementor-element-populated > .elementor-widget-wrap {
    min-height: 100px;
}


/* --- INI PP PREZZI Style --- */
/* Rende il prezzo originale grigio e discreto, con sbarra sottile */
del.ce-product-price-regular {
    color: #9e9e9e !important; 
    font-size: 2rem !important; /* Più piccolo del prezzo corrente */
}

/* Applica la sbarra a tutti gli elementi interni al prezzo regolare */
del.ce-product-price-regular * {
    text-decoration: line-through !important;
}

/* --- COLORE PREZZO SCONTATO ARANCIO --- */
.ce-product-price.ce-has-discount {
    color: #ff6600 !important;
}

/* --- FINI PP PREZZI Style --- */








/* --- INI PP RIDIMENSIONAMENTO RESPONSIVE --- */
@media (max-width: 1224px) and (min-width: 680px) {
   .elementor-21170101 .elementor-element.elementor-element-7f28ff75 {
       width: 30%  !important;
       height: 100% !important;
   }
}
@media (max-width: 1224px) and (min-width: 680px) {
   .elementor-21170101 .elementor-element.elementor-element-6f0ff41c {
       width: 70%  !important;
       height: 100% !important;
   }
}

@media (max-width: 1524px) and (min-width: 1224px) {
   .elementor-21170101 .elementor-element.elementor-element-7f28ff75 {
       width: 40%  !important;
       height: 100% !important;
   }
}
@media (max-width: 1524px) and (min-width: 1224px) {
   .elementor-21170101 .elementor-element.elementor-element-6f0ff41c {
       width: 60%  !important;
       height: 100% !important;
   }
}
/* --- FINI PP RIDIMENSIONAMENTO RESPONSIVE --- */





/* --- PP RIMUOVE BORDI MINIATURE VERTICALI PRODOTTO --- */
.elementor-thumbnails-swiper .swiper-slide,
.elementor-thumbnails-swiper .swiper-slide.swiper-slide-thumb-active {
   border: none !important;
   box-shadow: none !important;
   outline: none !important;
}



/* --- PP SCROLLBAR MINIATURE NASCONDI --- */
.swiper-scrollbar-drag, .swiper-scrollbar.swiper-scrollbar-vertical {
   display: none;
}


/* --- PP BACKGROUND ATTRIBUTI --- */
dd.value, dt.name {
  background: #f6f6f6bd !important;
  align-content: center;
}

/* --- PP ATTRIBUTI PADDING TABELLA--- */
.product-features>dl.data-sheet dd.value, .product-features>dl.data-sheet dt.name {
    padding: .0rem .5rem;
}



/* --- INI PAGINA RISULTATI RICERCA - ALLARGAMENTO A 1600PX --- */
@media (min-width: 1200px) {
    #search #wrapper .container,
    #category #wrapper .container {
        max-width: 1600px !important;
        width: 100% !important;
    }
}

/* --- PADDING RIDOTTO --- */
.brands-sort .select-title, .products-sort-order .select-title, .suppliers-sort .select-title {
    display: inline-block;
    padding: 0.25rem;
}

/* --- BORDO MINIATURE RICERCA --- */
.elementor.elementor-17170101.col-xs-12.col-sm-6.col-xl-3 {
    padding: 2px !important;
    border-width: 1px 1px 1px 1px !important;
    border-style: solid !important;
    border-radius: 3px 3px 3px 3px !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

.ce-filters.ce-scrollbar-y--auto {
    padding: 10px;
        border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #EEEEEE;
    border-radius: 3px 3px 3px 3px;
}


/* --- fINI PAGINA RISULTATI RICERCA - ALLARGAMENTO A 1600PX --- */





/* --- PP NOME TITOLO PIU MAGRO--- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #333;
}



/* --- BORDATURA E PADDING PER LE MINIATURE NELLA PAGINA CONFRONTO --- */
#module-poscompare-comparePage .poscompare-product .elementor-17170101,
#module-poscompare-comparePage .poscompare-product .ce-edit-wrapper {
    padding: 0px 0px 0px 0px !important;
    border-width: 1px 1px 1px 1px !important;
    border-style: solid !important;
    border-radius: 3px 3px 3px 3px !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}
#poscompare-table .poscompare-product-td {
    padding: 2px;
}
#poscompare-table .poscompare-product-td.poscompare-feature-td {
    padding: 10px 0px 12px 7px !important;
}
.card-block {
    padding: 0px ;
}

/* --- RIATTIVAZIONE BORDO .card SOLO NELLA PAGINA CONFRONTO --- */
#module-poscompare-comparePage .card {
    border: 1px solid rgba(0, 0, 0, 0.125) !important; /* Bordo grigio leggero standard */
}



/* ===============================================================
   PADDING DI TUTTA LA HOMEPAGE
   =============================================================== */
.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
    padding: 4px;
}


/* -----  ALLINEAMENTO MINIATURE  -----  */
/* Spazio riservato brand */
.minia-brand a {
    min-height: 22px;
}


/* 8. ALLINEAMENTO TITOLO (Uniformità) */
.elementor-widget-product-miniature-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em; /* Riserva spazio per 2 righe */
    line-height: 1.5em;
}



/* --- RIMPICCIOLIMENTO BANDA GRIGIA VARIANTI --- */
.variant-links {
    height: 20px !important;      /* Imposta un'altezza fissa molto sottile */
    display: flex !important;
    align-items: center !important; /* Centra perfettamente i quadratini in verticale */
    margin-top: -4px !important;  /* Avvicina la banda alla foto (regola se serve) */
}

/* Assicuriamoci che il contenitore interno non forzi un'altezza maggiore */
.variant-links .elementor-container {
    min-height: auto !important;
    height: 100% !important;
}





 /*   MERCATARO.IT - CUSTOM CSS FINALE (CON TASTO PREMIUM) */
.page-my-account #content .links a i {
  font-size: 2.0rem !important;
  padding-bottom: 1.4rem;
}




/* ============================================================
   MERCATARO.IT - CUSTOM CSS FINALE (CON TASTO PREMIUM)
   ============================================================ */

/* --- 1. GLOBALI E FIX MODAL --- */
.modal-backdrop { display: none !important; }
body.modal-open { overflow: auto !important; padding-right: 0 !important; }

/* Forza Header, Footer e POPUP a rimanere centrati (Boxed) */
#header .container, #footer .container, .modal .container, .wishlist-modal .modal-content {
    max-width: 1140px !important; width: 95% !important; margin: 0 auto !important;
}

/* --- 2. BOTTONI BASE (RADIUS 4) --- */
.btn-primary, .view-product, #module-poscompare-comparePage .btn-primary {
    background-color: #232f3e !important; color: #ffffff !important;
    border-radius: 4px !important; border: none !important;
    font-weight: 700 !important; text-transform: uppercase !important;
    font-size: 11px !important; padding: 10px 15px !important;
    transition: 0.3s !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
}
.btn-primary:hover, #module-poscompare-comparePage .btn-primary:hover { background-color: #2fb5d2 !important; }

/* --- 3. WISHLIST: RESTYLING (RADIUS 4) --- */
.wishlist-add-to-wishlist .modal-content { border-radius: 4px !important; border: 1px solid #232f3e !important; box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; }
.wishlist-modal .modal-header { background: #232f3e !important; color: white !important; }
#wish-ins { font-size: 13px !important; font-weight: 700; text-align: center; padding: 10px; border-bottom: 1px solid #eee; }
#custom-view-wishlist, a.wishlist-add-to-new { height: 40px !important; min-width: 150px !important; border-radius: 4px !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 11px !important; font-weight: 800; text-decoration: none !important; }
#custom-view-wishlist { background: #fff !important; border: 2px solid #2fb5d2 !important; color: #2fb5d2 !important; margin-right: 10px; }
a.wishlist-add-to-new { background: #2fb5d2 !important; color: #fff !important; border: none; }

/* --- 4. PAGINA CONFRONTO (ULTRA-WIDE) --- */
/* #module-poscompare-comparePage #content-wrapper .container { max-width: 98% !important; width: 98% !important; } */
.table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; border: 1px solid #ebebeb; }



/* Prima Colonna (Sticky) */
#module-poscompare-comparePage thead th:first-child, #module-poscompare-comparePage tbody td:first-child {
    width: 150px !important; background: #fdfdfd !important; font-weight: 700 !important;
    border-right: 2px solid #dee2e6 !important; position: sticky !important; left: 0; z-index: 10;
}




/* ============================================================
   IL NUOVO TASTO "RIMUOVI TUTTI" (STYLE PREMIUM)
   ============================================================ */
.js-poscompare-remove-all {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: #cc0000 !important; /* Rosso Mercataro */
    color: white !important;
    padding: 12px 5px !important;
    border-radius: 4px !important; /* Coerenza Radius 4 */
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 0px #800000; /* Effetto 3D sottile */
    transition: all 0.2s ease;
    white-space: nowrap !important;
}

/* Rimuoviamo visivamente le parentesi quadre se presenti nel testo */
.js-poscompare-remove-all {
    font-size: 11px !important;
}

/* Aggiunta icona cestino Material Design */
.js-poscompare-remove-all::before {
    content: '\e872'; /* Codice icona delete */
    font-family: 'Material Icons';
    margin-right: 8px;
    font-size: 16px;
    font-weight: normal;
}

.js-poscompare-remove-all:hover {
    background: #e60000 !important;
    box-shadow: 0 2px 0px #800000;
    transform: translateY(2px); /* Effetto pressione tasto */
    color: white !important;
}

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

/* Celle Prodotti */
#module-poscompare-comparePage th:not(:first-child), #module-poscompare-comparePage td:not(:first-child) {
    padding: 15px 10px !important; border: 1px solid #ebebeb !important; background: #fff !important;
}




#module-poscompare-comparePage th h3 {
    font-size: 11px !important; font-weight: 600 !important; color: #007185 !important;
    height: 45px !important; overflow: hidden !important;
    display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}


/* Prezzi */
#module-poscompare-comparePage th div { 
color: #b12704 !important; 
font-size: 19px !important; 
font-weight: bold !important; 
margin-bottom: 10px !important; }

/* Zebra righe */
#module-poscompare-comparePage tbody tr:nth-child(even) td { 
background-color: #f9f9f9 !important; }




/* ============================================================
   POPUP CONFERMA "SVUOTA LISTA" (CUSTOM MODAL)
   ============================================================ */
#ce-confirm-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); /* Sfondo oscurato */
    z-index: 9998;
}

#ce-confirm-modal {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 90%;
    max-width: 400px;
    background: #fff;
    border-radius: 4px; /* Radio 4px */
    box-shadow: 0 15px 50px rgba(0,0,0,0.4);
    overflow: hidden;
}

#ce-confirm-modal .modal-header {
    background: #232f3e; /* Antracite Mercataro */
    color: #fff;
    padding: 15px 20px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
}

#ce-confirm-modal .modal-body {
    padding: 25px 20px;
    text-align: center;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

#ce-confirm-modal .modal-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
}

#ce-confirm-modal .btn-cancel {
    background: #fff;
    border: 2px solid #ccc;
    color: #666;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.2s;
}

#ce-confirm-modal .btn-cancel:hover {
    border-color: #999;
    color: #333;
}

#ce-confirm-modal .btn-confirm {
    background: #cc0000; /* Rosso Mercataro */
    border: none;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.2s;
    box-shadow: 0 2px 5px rgba(204,0,0,0.3);
}

#ce-confirm-modal .btn-confirm:hover {
    background: #a00000;
}




/* DISATTIVA LO ZOOM 1.07 GENERATO DA CREATIVE ELEMENTS */
.elementor-14170101 .minia-imma:hover {
    transform: scale(1) !important;
}

/* OPZIONALE: Se vuoi togliere anche il movimento fluido che prepara lo zoom */
.elementor-14170101 .minia-imma {
    transition: none !important;
    transform: none !important;
}





/* ============================================================
   INI MINIATURA CON BORDINO
   ============================================================ */
/* Applica il bordo SOLO alle miniature che hanno l'ID del tuo template (14170101) */
.elementor-14170101 .elementor-section-wrap {
    border: 1px solid rgba(2, 1, 1, 0.1) !important;

    background: #ffffff !important;
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Rimuove eventuali bordi doppi dai contenitori esterni di questo widget */
div[data-elementor-id="14170101"] {
    border: none !important;
    padding: 0 !important;
}

/* Effetto Hover solo per le miniature */
.elementor-14170101 .elementor-section-wrap:hover {
    border-color: rgba(2, 1, 1, 0.4) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}
/* ============================================================
   FINI MINIATURA CON BORDINO
   ============================================================ */



/* ============================================================
    INI RESET COLORE TESTO FILTRI LATERALI --- 
   ============================================================ */

/* 1. Cambiamo il colore dei link e delle etichette nei filtri */
.ce-filters a, 
.ce-filters label, 
.ce-filters .ce-filter-label,
.ce-filters .ce-filter-item__name {
    color: #333333 !important; /* Grigio scuro/Nero normale */
    text-decoration: none !important;
    font-weight: 400 !important;
}

/* 2. Colore al passaggio del mouse (Hover) */
/* Se vuoi che diventino azzurri solo quando ci passi sopra */
.ce-filters a:hover, 
.ce-filters label:hover,
.ce-filters .ce-filter-item:hover .ce-filter-item__name {
    color: #2fb5d2 !important; /* Azzurro Mercataro solo all'hover */
}

/* 3. Colore per i filtri già selezionati (Attivi) */
.ce-filters .ce-filter-item--active .ce-filter-item__name,
.ce-filters .ce-filter-item--active label {
    color: #2fb5d2 !important;
    font-weight: 600 !important;
}

/* 4. Opzionale: Colore dei numeri tra parentesi (es. (12)) */
.ce-filters .ce-filter-item__count {
    color: #999 !important; /* Grigio chiaro per i conteggi */
    font-size: 0.9em;
}

/* ============================================================
   HOVER ZOOM SULLE VARIANTI COLORE
   ============================================================ */




/* 3. Manteniamo lo zoom solo sul singolo cerchietto colore (opzionale, se ti piace ancora) */
.ce-product-variants__pattern.ce-product-variants__color:hover {
    transform: scale(1.2) !important;
    z-index: 11;
}

/* ============================================================
   FINI MINIATURA STILE VARIANTI COLORE (BARRA SEMITRASPARENTE)
   ============================================================ */





/* ============================================================
   FIX PAGINA PRODOTTO (CLASSE variant-pp)
   ============================================================ */
/* AGGIUNTA: Questo resetta tutto per la pagina prodotto dove hai messo la classe variant-pp */
.variant-pp, .variant-pp .ce-product-variants {
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    bottom: auto !important;
    background: transparent !important;
}




/* ============================================================
    INI MINIATURE - ICONE IN FILA ORIZZONTALE ECOLIFE STYLE
   ============================================================ */
/* 1. Forza il contenitore principale e la riga a non andare a capo */
article.elementor-section-wrap .minia-link .elementor-container,
article.elementor-section-wrap .minia-link .elementor-row {
    display: flex !important;
    flex-direction: row !important; /* Forza la fila */
    flex-wrap: nowrap !important;   /* Impedisce di andare sotto */
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 auto !important;
}

/* 2. Forza le colonne interne di Elementor a non occupare il 100% */
article.elementor-section-wrap .minia-link .elementor-column {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important; /* Impedisce alle colonne di espandersi */
}

/* 3. Posizionamento della sezione sopra l'immagine */
article.elementor-section-wrap .minia-link {
    position: absolute !important;
    top: 47% !important; /* Regola l'altezza sulle immagini */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 99 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.4s ease !important;
    width: 100% !important;
}

/* 4. Mostra al passaggio del mouse sul singolo prodotto */
article.elementor-section-wrap:hover .minia-link {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 5. Stile delle icone (Cerchi Bianchi) */
article.elementor-section-wrap .minia-link .elementor-widget-icon {
    margin: 0 -5px !important; /* Distanza tra i cerchi */
    background: #ffffff !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.15) !important;
    transform: scale(0); /* Parte da zero per l'animazione */
    transition: all 400ms linear;
}

/* 1. Stato base delle icone (nascoste e senza ritardo) */
article.elementor-section-wrap .minia-link .elementor-widget-icon {
    opacity: 0;
    transform: scale(0);
    transition: all 1s ease; /* Transizione fluida per tutto */
}

/* 2. HOVER SUL PRODOTTO: Attivazione sequenziale (Staggered) */
article.elementor-section-wrap:hover .icon-1,
article.elementor-section-wrap:hover .icon-2,
article.elementor-section-wrap:hover .icon-3 {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Ritardi specifici SOLO per l'entrata */
article.elementor-section-wrap:hover .icon-1 { transition-delay: 0.1s !important; }
article.elementor-section-wrap:hover .icon-2 { transition-delay: 0.2s !important; }
article.elementor-section-wrap:hover .icon-3 { transition-delay: 0.3s !important; }

/* 3. HOVER SULL'ICONA SPECIFICA (Il FIX) */
/* Azzeriamo il ritardo così il cambio colore è istantaneo */
article.elementor-section-wrap .minia-link .elementor-widget-icon:hover {
    transition-delay: 0s !important; /* ELIMINA IL RITARDO PRECEDENTE */
    background-color: #2fb5d2 !important;
    
}

article.elementor-section-wrap .minia-link .elementor-widget-icon:hover i {
    transition-delay: 0s !important; /* ELIMINA IL RITARDO ANCHE PER L'ICONA INTERNA */
    color: #fff !important;
}

/* 4. Quando togli il mouse dal prodotto, le icone spariscono senza ritardo */
article.elementor-section-wrap:not(:hover) .elementor-widget-icon {
    transition-delay: 0s !important;
}

/* ============================================================
    FINI MINIATURE - ICONE IN FILA ORIZZONTALE ECOLIFE STYLE
   ============================================================ */





/* Stile Notifica Toast Mercataro */
#merc-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #232f3e; /* Colore scuro Amazon */
    color: white;
    padding: 15px 25px;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 998;
    display: none; /* Nascosto di default */
    font-weight: 500;
    border-left: 5px solid #2fb5d2; /* Linea azzurra Mercataro */
    transition: all 0.3s ease;
}

#merc-toast.show {
    display: block;
    animation: slideIn 0.5s forwards;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}





/* ========================================= */
/*  INI ACCOUNT PAGE - CUSTOM STYLING            */
/* ========================================= */

/* 1. Stile base della card (il riquadro) */
.link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 4px;

    min-height: 155px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* 2. Effetto Hover: si solleva e si illumina */
.links a:hover .link-item {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    border-color: #d0d0d0;
}

/* 3. Stile delle Icone (ingrandite e animate) */
.link-item i.material-icons,
.link-item .material-icons {
    font-size: 48px !important;
    height: 48px;
    width: 48px;
    color: #555555;
    margin-bottom: 15px;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* 4. Effetto Hover sulle icone (cambiano colore e "rimbalzano" leggermente) */
.links a:hover .link-item i.material-icons,
.links a:hover .link-item .material-icons {
    color: #2fb5d2; /* Sostituisci con il colore secondario del tuo brand */
    transform: scale(1.1);
}


/* 7. Correzione spaziatura tra le card (se il tema non lo fa già) */
.links .col-lg-4,
.links .col-md-6,
.links .col-sm-6,
.links .col-xs-12 {
}

/* ========================================= */
/*  STILE BOTTONE "ESCI"   */
/* ========================================= */

.page-footer .text-sm-center a {
    display: inline-block;
    background-color: transparent;
    color: #dc3545;
    border: 2px solid #dc3545;
    padding: 10px 40px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.page-footer .text-sm-center a:hover {
    background-color: #dc3545;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(220, 53, 69, 0.3);
    text-decoration: none;
}

/* ========================================= */
/*  RESPONSIVE (MOBILE)                      */
/* ========================================= */

@media (max-width: 767px) {
    .link-item {
        min-height: 164px;
        border-radius: 10px;
    }
    
    .link-item i.material-icons,
    .link-item .material-icons {
        font-size: 32px !important;
        height: 32px;
        width: 32px;
        margin-bottom: 8px;
    }

    .link-item span:last-child {
        font-size: 14px;
    }
}
/* ========================================= */
/*  FORZA 3 COLONNE PER RIGA (DESKTOP)       */
/* ========================================= */

/* Forza le card ad essere larghe 1/3 (3 per riga) */
.links .col-lg-4,
.links .col-md-6, 
.links .col-sm-6,
.links .col-xs-12 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

/* ========================================= */
/*  RESPONSIVE (TABLET E MOBILE)             */
/* ========================================= */

/* Tablet (es. iPad): 2 colonne per riga */
@media (min-width: 350px) and (max-width: 991px) {
    .links .col-lg-4,
    .links .col-md-6, 
    .links .col-sm-6,
    .links .col-xs-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Mobile: 1 colonna per riga */
@media (max-width: 350px) {
    .links .col-lg-4,
    .links .col-md-6, 
    .links .col-sm-6,
    .links .col-xs-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* ========================================= */
/*  CORREZIONE BOTTONE ESCI SU MOBILE        */
/* ========================================= */

@media (max-width: 575px) {
    /* Centra il contenitore del footer e rimuove eventuali margini anomali */
    .page-footer {
        display: flex;
        justify-content: center;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    /* Forza il centramento del pulsante */
    .page-footer .text-sm-center {
        text-align: center !important;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Nel caso ci siano margini extra sull'ancora stessa */
    .page-footer .text-sm-center a {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================= */
/*  FINI ACCOUNT PAGE - CUSTOM STYLING            */
/* ========================================= */















/* ========================================= */
/*               GENERALE            */
/* ========================================= */
/* Rimuove il bordino nero (outline) dai link quando vengono cliccati o selezionati */
a:focus, a:active, button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Se vuoi rimuoverlo specificamente solo nel footer */
.footer-container a:focus {
    outline: none !important;
}




/* FA SPARIRE SCRITTA "Ordina per:" */
#js-product-list-top span.sort-by {
    display: none !important;
}





/* --- MINIATURE PAGINA BRANDS --- */

@media (min-width: 1200px) {
    .col-xl-3 {
        width: 100%;
    }
}

@media (min-width: 576px) {
    .col-sm-6, .col-sm-7 {
        float: left;
        width: 100%;
    }
}
/* --- FINI MINIATURE PAGINA BRANDS --- */



/* --- STILE BUY BOX FINALE --- */
.amz-buybox-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 250px;
    margin: 10px auto !important;
    position: relative;
    z-index: 999;
}

/* Selettore Grigio */
.amz-qty-box {
    background-color: #F0F2F2 !important;
    border: 1px solid #D5D9D9 !important;
    border-radius: 8px !important;
    height: 34px;
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Lista Numeri */
.amz-dropdown-list {
    position: absolute !important;
    top: 38px !important;
    width: 140px !important;
    background: #fff !important;
    border: 1px solid #D5D9D9 !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    z-index: 100000 !important; /* SOPRA TUTTO */
    list-style: none !important;
    padding: 5px 0 !important;
    max-height: 250px;
    overflow-y: auto;
}

.amz-dropdown-list li {
    padding: 10px 15px !important;
    cursor: pointer !important;
    text-align: left;
    font-size: 14px;
}

.amz-dropdown-list li:hover {
    background-color: #F0F2F2 !important;
    border-left: 3px solid #e77600 !important;
}

/* Tasto OK! */
.amz-btn-update {
    background-color: #243238 !important; /* Antracite */
    color: #fff !important;
    border: none !important;
    border-radius: 20px !important;
    width: 100% !important;
    max-width: 200px;
    height: 36px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 15px;
    cursor: pointer;
}

.amz-btn-update:hover { background-color: #2fb5d2 !important; }






/* ========================================================= */
/*  INI RESTYLING PAGINA CARRELLO  */
/* ========================================================= */

.cart-items-title .col-md-5 { font-weight: 600; color: #333; }
.cart-items-title .col-md-2 { font-weight: 600; color: #333; text-align: right; padding-right: 45px; }

/* 2. CARD PRODOTTO (Struttura a blocchi bianchi) */
.cart-item {
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    border-radius: 3px;
    overflow: hidden;
    list-style: none;
}

/* Riga superiore grigia con Nome e X */
.cart-item-header {
    padding: 8px 15px;
    border-bottom: 1px solid #eeeeee8a;
    display: flex;
    justify-content: space-between;
}

.item-name a {
    font-weight: 600;
    color: #444;
    font-size: 14px;
    text-decoration: none;
}

/* 3. CORPO DELLA RIGA (Immagine - Info - Qty - Totale) */
.cart-item-body {
    display: flex;
    align-items: center;
    padding: 10px;
}

/* Colonna Foto */
.item-img {
    width: 70px;
    margin-right: 20px;
}

.item-img img { width: 120%; }

/* Colonna Info (Colore e Prezzo Unitario) */
.item-details {
    flex: 1;
    font-size: 13px;
    color: #666;
    margin-left: 15px;
}
.item-details strong { color: #333; font-weight: 600; }
.unit-price { margin-top: 5px; color: #777; }

.qty-control input {
    width: 40px !important;
    height: 35px !important;
    border: none !important;
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    text-align: center !important;
    background: #fff !important;
}

.btn-touchspin {
    background: #f8f9fa !important;
    color: #333 !important;
    font-size: 16px !important;
}

/* --- HOVER TASTI QUANTITÀ --- */
.btn-touchspin:hover {
    background: #f2f2f2 !important;
    color: #000 !important; /* Opzionale: rende il simbolo + o - nero pieno */
    transition: background 0.2s ease-in-out; /* Rende il cambio colore fluido */
}

/* --- SIMMETRIA TASTI QUANTITÀ --- */

/* 1. Forza la stessa larghezza e altezza su entrambi i tasti */
.bootstrap-touchspin .btn-touchspin {
    width: 38px !important;  /* Larghezza fissa uguale per entrambi */
    justify-content: center !important;
}

/* 3. Assicura che i contenitori dei bottoni non aggiungano spazio extra */
.input-group-btn {
    width: auto !important;
}

/* Arrotonda solo il lato sinistro del tasto MENO */
.bootstrap-touchspin-down {
    border-top-left-radius: 2px !important;
    border-bottom-left-radius: 2px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Arrotonda solo il lato destro del tasto PIÙ */
.bootstrap-touchspin-up {
    border-top-right-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* 5. PREZZO TOTALE DI RIGA (Grassetto Nero) */
.total-line-price {
    color: #243238 !important;
    min-width: 80px;
    text-align: center;
    font-size: 18px;
}

/* 6. COLONNA DESTRA (RIEPILOGO) */
.cart-summary {
    border: 1px solid #ddd !important;
    border-radius: 3px;
    padding: 20px !important;
}

/* Bottone Checkout Nero */
.cart-detailed-actions .btn-primary {
    background-color: #243238 !important;
    border: none !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 15px !important;
}
.cart-detailed-actions .btn-primary:hover { background-color: #2fb5d2 !important; }

/* Pulizia Rassicurazioni (Rimuove scritte tra parentesi) */
#block-reassurance .block-reassurance-item span {
    font-size: 13px !important;
    color: #555 !important;
}
#block-reassurance br, 
#block-reassurance .block-reassurance-item span:last-child {
    display: none !important;
}

/* --- POSIZIONAMENTO VERTICALE: QTY SOPRA, PREZZO SOTTO --- */

/* 1. Forza il contenitore a incolonnare i figli */
.item-qty-total {
    display: flex !important;
    flex-direction: column !important; /* Mette gli elementi uno sopra l'altro */
    align-items: flex-end !important;   /* Allinea tutto a destra del riquadro */
    gap: 14px !important;              /* Spazio tra la quantità e il prezzo */
}

/* Fix estetico tasti quantità per farli somigliare al vecchio sito */
.qty-control .btn-touchspin {
    border: 1px solid #ccc !important;
    font-weight: bold !important;
}

.qty-control input.js-cart-line-product-quantity {
    width: 50px !important;
    height: 50px !important;
    border: 1px solid #ccc !important;
    border-right: none !important;
}

/* rende lo spazio prodotto piu ampio */
.cart-grid-body .card-block, .cart-grid-body .cart-overview {
    padding: 0rem !important;
}

article.alert.alert-danger {
    border-radius: 5px;
}

/* --- TRASFORMAZIONE "CONTINUA LO SHOPPING" IN BOTTONE --- */
#cart a.label {
    background-color: #243238 !important; /* Nero Antracite Mercataro */
    color: #ffffff !important;
    padding: 12px 15px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

/* Effetto Hover: diventa Celeste Brand */
#cart a.label:hover {
    background-color: #2fb5d2 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}




/* --- ALLINEAMENTO COLONNA RIEPILOGO CON HEADER TABELLA --- */
@media (min-width: 992px) {
    /* Spinge in basso la colonna di destra per allinearla a 'ITEM' */
    #cart .cart-grid-right {
        /* Regola questo valore (es. tra 60px e 80px) per trovare l'allineamento perfetto */
        margin-top: 40px !important; 
    }

    /* Opzionale: Rende il riepilogo 'Sticky' (rimane fermo mentre scorri i prodotti) */
    #cart .cart-summary {
        position: sticky;
        top: 20px;
        z-index: 10;
    }
}

/* Reset per Mobile: su smartphone le colonne sono una sotto l'altra, quindi il margine non serve */
@media (max-width: 991px) {
    #cart .cart-grid-right {
        margin-top: 0 !important;
    }
}

/* Rimoziome totale del padding dalle righe del carrello */
.cart-item {
    padding: 0 !important;
}

/* Se vuoi assicurarti che anche i margini siano azzerati tra un prodotto e l'altro */
.cart-item {
    margin-top: 0 !important;
    margin-bottom: 10px !important; /* Mantieni un piccolo spazio sotto se vuoi l'effetto card */
}


/* --- ALLARGAMENTO PAGINA CARRELLO --- */
@media (min-width: 1200px) {
    #cart .container {
        width: 1450px !important;
        max-width: 100% !important;
    }
}

@media (min-width: 1200px) {
    #cart .cart-grid-body {
        flex: 0 0 75% !important; /* Più spazio ai prodotti */
        max-width: 75% !important;
    }
    #cart .cart-grid-right {
        flex: 0 0 25% !important; /* Meno spazio al riepilogo */
        max-width: 25% !important;
    }
}

/* --- ALLINEAMENTO INTESTAZIONE "PEZZI" A DESTRA --- */

/* 1. Forza la riga dei titoli a prendersi tutto lo spazio orizzontale */
.cart-items-title .row {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 2. Sposta la colonna dei "Pezzi" (col-md-7) tutta a destra */
.cart-items-title .col-md-7 {
    text-align: right !important;
    padding-right: 25px !important; /* Questo allinea la scritta sopra il prezzo totale */
    flex: 1 !important;
}

/* 3. Assicura che la colonna "Item" rimanga a sinistra */
.cart-items-title .col-md-5 {
    text-align: left !important;
    padding-left: 5px !important;
}

/* 4. Rendi il font dei titoli un po' più evidente (opzionale) */
.cart-items-title {
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid #ddd; /* Linea scura come vecchio sito */
    border-radius: 3px;
    padding: 10px 20px;
    margin-bottom: 15px;
    margin-top: 15px;
    font-size: 16px;
}

/* Centra il titolo principale nella pagina carrello */
.cart-grid-body h1.h1 {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* PAG CARRELLO CROCETTA ELIMINA PRODOTTO */
.remove-from-cart::before {
    content: "close" !important;
    font-family: 'Material Icons' !important;
    font-size: 18px !important;
    display: block !important;
    color: black;
}

/* Nasconde il separatore hr nel Carrello */
.cart-container .separator, 
.cart-grid-body hr.separator {
    display: none !important;
}

/* ========================================= */
/*  FINI RESTYLING PAGINA CARRELLO  */
/* ========================================= */







/* --- INI RESTYLING BLOCCO CODICE PROMOZIONALE --- */
/* 1. Il link "Hai un codice sconto?" */
.promo-code-button {
    display: block;
    padding: 10px 0;
    color: #2fb5d2 !important; /* Celeste brand */
    font-weight: 600;
    text-align: center;
}

/* 2. Allineamento Input e Bottone */
.block-promo .promo-code {
    border: 1px solid #eee;
}

.promo-code form {
    display: flex !important;
}

.promo-code .promo-input {
    flex: 1;
    border: 1px solid #ddd !important;
}

/* Bottone "Aggiungi" (da azzurro a Nero Mercataro) */
.promo-code button[type="submit"] {
    background: #243238 !important;
    border: none !important;
}

.promo-code button[type="submit"]:hover {
    background: #2fb5d2 !important; /* Diventa celeste all'hover */
}

/* 3. Link "Chiudi" */
.promo-code [data-action="show-promo-code"] {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    color: #999;
    text-decoration: underline;
}

/* --- PULIZIA FINALE RASSICURAZIONI (Parentesi) --- */
/* Nasconde le scritte di istruzione "(modificale nel modulo...)" */
#block-reassurance p {
    font-size: 13px !important;
    color: #333 !important;
    line-height: 1.3;
}

#block-reassurance .block-reassurance-item span {
    display: block;
}

/* Rimuove il testo grigio di istruzioni di PrestaShop */
#block-reassurance .block-reassurance-item span:not(.h6) {
    font-size: 0 !important; /* Nasconde il testo */
}

#block-reassurance .block-reassurance-item span:not(.h6)::before {
    /* Qui puoi riscrivere un testo pulito se vuoi, altrimenti lascialo vuoto */
    font-size: 13px !important;
    color: #666;
}

/* Nasconde fisicamente la parte tra parentesi se è in un tag separato o tramite clip */
.block-reassurance-item p {
    max-height: 40px;
    overflow: hidden;
}

.block-promo .promo-input+button {
    margin-top: 0px;
}

/* --- RIMOZIONE BORDO ARANCIONE (FOCUS) CODICE PROMO --- */

/* Rimuove il bordo arancio dall'input di testo */
.promo-code .promo-input:focus {
    outline: none !important;
    box-shadow: none !important;

}

/* Rimuove il bordo arancio dal tasto Aggiungi */
.promo-code button[type="submit"]:focus,
.promo-code button[type="submit"]:active {
    outline: none !important;
    box-shadow: none !important;
}
/* --- FINI RESTYLING BLOCCO CODICE PROMOZIONALE --- */










/* =======================================================
   INI MODAL ADD CART (Effetto 3 Strati)
   ======================================================= */
   
/* --- RESET E STILE MODALE ADD CARRELLO (POPUP) --- */

/* 1. TESTATA: Scura con testo bianco */
#blockcart-modal .modal-header {
    background: #243238 !important; /* Grigio scuro/Antracite */
    display: flex !important;
    flex-direction: row-reverse !important; /* Sposta la X a destra */
    justify-content: space-between !important;
}

/* Titolo "Prodotto aggiunto..." */
#blockcart-modal .modal-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
}

/* Icona Check (V) verde o bianca nel titolo */
#blockcart-modal .modal-title i {
    margin-right: 10px !important;
    color: #44db44 !important; /* Verde acceso */
}

/* 2. CORPO DEL POPUP */
#blockcart-modal .modal-body {
    padding: 25px !important;
}

/* Titolo prodotto nel popup */
#blockcart-modal .product-name {
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #243238 !important;
    margin-bottom: 10px !important;
}

/* 3. BOTTONI: Look Foto 2 */
#blockcart-modal .cart-content-btn {
    display: flex !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

/* Bottone CONTINUA LO SHOPPING (Bianco/Grigio) */
#blockcart-modal .cart-content-btn .btn-secondary {
    background-color: #46565f !important; /* Grigio medio come foto 2 */
    color: #ffffff !important;
    border: none !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    flex: 1 !important;
    padding: 12px !important;
}

/* Bottone PROCEDI CON IL CHECKOUT (Nero/Antracite) */
#blockcart-modal .cart-content-btn .btn-primary {
    background-color: #243238 !important; /* Nero Mercataro */
    color: #ffffff !important;
    border: none !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    flex: 1 !important;
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}




/* --- LAYOUT MODAL CART: TITOLO SOPRA | IMMAGINE SX | DATI DX --- */
/* --- INI FIX TOTALE: TITOLO SOPRA | IMMAGINE SX | DATI DX --- */

/* 1. Il contenitore di SINISTRA deve avere un padding superiore enorme per il titolo */
#blockcart-modal .divide-right {
    position: relative !important;
    padding-top: 100px !important; /* Spazio sacro per il titolo */
    display: block !important;
}

/* 2. Il TITOLO deve essere sganciato e messo in cima al contenitore */
#blockcart-modal h6.product-name {
    position: absolute !important;
    top: 0 !important;      /* Lo attacca al bordo superiore */
    left: 0 !important;
    width: 100% !important;  /* Occupa tutto lo spazio da sinistra a destra */
    height: 90px !important; /* Altezza fissa per il titolo */
    margin: 0 !important;
    padding: 10px !important;
    display: flex !important; /* Aggiunto display flex per abilitare l'allineamento */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
}

#blockcart-modal .col-md-5.divide-right {
    margin-top: -10px;
}

@media (max-width: 991px) {
    #blockcart-modal .product-image {
        max-width: 100%;
        margin: 0 auto 1rem;
    }
}

/* 3. Forza le due colonne (Immagine e Prezzo) a stare sotto il titolo e affiancate */
#blockcart-modal .divide-right .row {
    display: flex !important;
    flex-wrap: nowrap !important; /* Impedisce che il prezzo scenda sotto la valigia */
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Resetta le colonne per evitare che interferiscano con il titolo absolute */
#blockcart-modal .divide-right .col-md-6 {
    position: static !important; /* Cruciale: permette al titolo di vedere il contenitore padre */
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
}

/* 5. Allineamento testi a destra dell'immagine */
#blockcart-modal .divide-right .col-md-6:last-child {
    padding-left: 15px !important;
    text-align: left !important;
}

/* 6. Immagine proporzionata */
#blockcart-modal .product-image {
    max-height: 160px !important;
    width: auto !important;
    display: block;
    margin: 0 auto;
}

/* 7. Prezzo e quantità ben visibili */
#blockcart-modal .product-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
    display: block !important;
}

#blockcart-modal .product-quantity {
    display: block !important;
}
/* --- FINI FIX TOTALE: TITOLO SOPRA | IMMAGINE SX | DATI DX --- */


/* --- EFFETTO HOVER AZZURRO SUI PULSANTI POPUP --- */

/* Applica la transizione a entrambi i bottoni per renderla fluida */
#blockcart-modal .cart-content-btn .btn {
    transition: all 0.3s ease !important;
}

/* Hover sul bottone PROCEDI CON IL CHECKOUT */
#blockcart-modal .cart-content-btn .btn-primary:hover {
    background-color: #2fb5d2 !important; /* Celeste Brand */
    border-color: #2fb5d2 !important;
    color: #ffffff !important;
}

/* Hover sul bottone CONTINUA LO SHOPPING */
#blockcart-modal .cart-content-btn .btn-secondary:hover {
    background-color: #2fb5d2 !important; /* Celeste Brand */
    border-color: #2fb5d2 !important;
    color: #ffffff !important;
}

/* =======================================================
   FINI MODAL ADD CART (Effetto 3 Strati)
   ======================================================= */



/* ============================================================
   FIX DEFINITIVO POPUP WISHLIST - MERCATARO STYLE
   ============================================================ */

/* 1. Reset Sfondo e Scroll */
.modal-backdrop { display: none !important; }
body.modal-open { overflow: auto !important; padding-right: 0 !important; }

/* 2. Struttura Popup (Radius 4) */
.wishlist-add-to-wishlist .modal-content {
    border-radius: 4px !important;
    border: 1px solid #232f3e !important;
    box-shadow: 0 10px 50px rgba(0,0,0,0.4) !important;
    background: #fff !important;
}

/* 3. Header */
.wishlist-add-to-wishlist .modal-header {
    background: #232f3e !important;
    padding: 15px !important;
}
.wishlist-add-to-wishlist .modal-title {
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
}

/* 4. Lista e Righe (Trasformate in card cliccabili) */
.wishlist-chooselist .wishlist-list { border: none !important; padding: 10px 0 !important; }

.wishlist-chooselist .wishlist-list-item {
    display: flex !important;
    align-items: center !important;
    padding: 12px 15px !important;
    margin: 8px 15px !important;
    border: 1px solid #d5d9d9 !important;
    border-radius: 4px !important; /* Radio 4 */
    background: #fdfdfd !important;
    cursor: pointer !important;
    transition: 0.2s !important;
}
.wishlist-chooselist .wishlist-list-item:hover {
    border-color: #2fb5d2 !important;
    background: #f7fafa !important;
}

/* Icona Cuore */
.wishlist-chooselist .wishlist-list-item::before {
    content: '\e87d'; font-family: 'Material Icons';
    margin-right: 12px; color: #2fb5d2; font-size: 20px;
}

/* Testo AGGIUNGI a destra */
.wishlist-chooselist .wishlist-list-item::after {
    content: 'AGGIUNGI';
    font-size: 10px; font-weight: 800; color: #2fb5d2;
    border: 1px solid #2fb5d2; padding: 4px 8px; border-radius: 2px;
    margin-left: auto;
}

/* 5. Footer e Pulsanti (Simmetria Totale) */
.wishlist-add-to-wishlist .modal-footer {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 20px !important;
    border-top: 1px solid #eee !important;
}

/* Regola comune per VISUALIZZA e CREA NUOVA LISTA */
#custom-view-wishlist, 
.wishlist-add-to-wishlist .modal-footer .wishlist-add-to-new,
.wishlist-add-to-wishlist .modal-footer a[onclick*="showCreateWishlist"] {
    height: 44px !important;
    min-width: 170px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important; /* Radio 4 */
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: 0.3s !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* Pulsante VISUALIZZA (Sinistra - Bianco) */
#custom-view-wishlist {
    background: #ffffff !important;
    border: 2px solid #2fb5d2 !important;
    color: #2fb5d2 !important;
}
#custom-view-wishlist i { font-size: 18px !important; margin-right: 8px !important; }

/* Pulsante CREA NUOVA LISTA (Destra - Ciano) */
.wishlist-add-to-wishlist .modal-footer .wishlist-add-to-new,
.wishlist-add-to-wishlist .modal-footer a[onclick*="showCreateWishlist"] {
    background-color: #2fb5d2 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(47, 181, 210, 0.3) !important;
}

/* Hover Pulsante Crea */
.wishlist-add-to-wishlist .modal-footer .wishlist-add-to-new:hover {
    background-color: #232f3e !important;
}

/* Icona + nel tasto crea */
.wishlist-add-to-wishlist .modal-footer .wishlist-add-to-new i {
    color: #fff !important;
    font-size: 18px !important;
    margin-right: 5px !important;
}









/* --- FIX BORDINO MINIATURE PAGINA WISHLIST --- */
.wishlist-products-item {
    border: 1px solid #ebebeb !important;
    border-radius: 4px !important; /* Coerenza con il resto del sito */
    padding: 5px 5px !important;
    background: #fff !important;
    transition: all 0.3s ease;
    margin-bottom: 30px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Effetto al passaggio del mouse */
.wishlist-products-item:hover {
    border-color: #2fb5d2 !important; /* Colore Ciano Mercataro */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
    transform: translateY(-3px);
}

/* Centratura immagine nella wishlist */
.wishlist-product-image {
    display: block !important;
    margin-bottom: 15px !important;
}

.wishlist-product-image img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}




.wishlist-product-title {
    white-space: normal !important;    /* Forza il ritorno a capo */
    display: -webkit-box !important;   /* Necessario per il troncamento intelligente */
    -webkit-line-clamp: 3;             /* Numero massimo di righe visibili (es. 3) */
    -webkit-box-orient: vertical;
    overflow: hidden;                  /* Nasconde il testo in eccesso */
    height: 52px !important;           /* Altezza fissa calcolata su 3 righe (1.4 line-height) */
    line-height: 1.4 !important;
    word-break: break-word;            /* Spezza parole troppo lunghe se necessario */
    margin-bottom: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}






.wishlist-product-price {
    font-weight: 700 !important;
    color: #232f3e !important;
    margin-bottom: 15px !important;
}

/* Uniformità tasto Aggiungi al carrello nella wishlist */
.wishlist-product-add-to-cart .btn-primary {
    width: 100% !important;
    border-radius: 4px !important;
}



.wishlist-modal .modal-header h5 {
    color: #ffffff !important; /* Forza il testo bianco */
}
.wishlist-modal .modal-header .close {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* ==================================================================
    INI FIX NOTIFICA ELIMINAZIONE PREFERITI WISHLIST (SOLO AL CLICK) 
   ================================================================== */
/* 1. Stato base: il popup è preparato ma invisibile */
.wishlist-toast, 
.toast.wishlist-toast, 
#wishlist-toast {
    position: fixed !important;
    top: 140px !important; /* Sotto l'header */
    right: 20px !important;
    z-index: 99999 !important;
    background-color: #232f3e !important; /* Antracite Mercataro */
    color: #ffffff !important;
    border-radius: 4px !important;
    border: 2px solid #2fb5d2 !important; /* Bordino Ciano */
    box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
    min-width: 280px !important;
    padding: 20px !important;
    /* Rimuoviamo il display block forzato per farlo gestire al sistema */
    pointer-events: none; 
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 2. Stato ATTIVO: Solo quando il sistema aggiunge la classe .show o .active */
.wishlist-toast.show, 
.wishlist-toast.active,
.wishlist-toast.visible {
    opacity: 1 !important;
    pointer-events: auto;
    display: block !important;
}

/* 3. Forza il testo all'interno (Bianco su Antracite) */
.wishlist-toast .toast-body,
.wishlist-toast p,
.wishlist-toast span {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    display: block !important;
}
/* ==================================================================
    FINI FIX NOTIFICA ELIMINAZIONE PREFERITI WISHLIST (SOLO AL CLICK) 
   ================================================================== */







/* ============================================================
   MERCATARO.IT - CUSTOM CSS DEFINITIVO (FIX ALLINEAMENTO ICONE)
   ============================================================ */

/* --- 1. GLOBALI, FIX MODAL E BOTTONI BASE --- */
.modal-backdrop { display: none !important; }
body.modal-open { overflow: auto !important; padding-right: 0 !important; }

#header .container, #footer .container, .modal .container, .wishlist-modal .modal-content {
    max-width: 1140px !important; width: 95% !important; margin: 0 auto !important;
}

.btn-primary, .view-product, #module-poscompare-comparePage .btn-primary {
    background-color: #232f3e !important; color: #ffffff !important;
    border-radius: 4px !important; border: none !important;
    font-weight: 700 !important; text-transform: uppercase !important;
    font-size: 11px !important; padding: 10px 15px !important;
    transition: 0.3s !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important;
}
.btn-primary:hover, #module-poscompare-comparePage .btn-primary:hover { background-color: #2fb5d2 !important; }

/* --- 2. BOTTONI ACTION PAGINA PRODOTTO (CUORE E SHUFFLE) --- */
.my-wish, .pos-compare-wrapper { display: inline-block !important; margin: 0 8px !important; vertical-align: middle; }
.my-wish a, .my-wish button, .js-final-trigger-btn {
    width: 45px !important; height: 45px !important;
    background-color: #fff !important; border: 1px solid #ddd !important;
    border-radius: 8px !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    transition: 0.3s !important; box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}
.my-wish:hover a, .js-final-trigger-btn:hover { border-color: #2fb5d2 !important; transform: translateY(-2px); }
.my-wish i, .js-final-trigger-btn i { font-size: 22px !important; color: #444 !important; }
.my-wish:hover i, .js-final-trigger-btn:hover i { color: #2fb5d2 !important; }
.my-wish span, .pos-compare-wrapper span { display: none !important; }

/* --- 3. WISHLIST: POPUP (MODAL) --- */
.wishlist-add-to-wishlist .modal-content { border-radius: 4px !important; border: 1px solid #232f3e !important; box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; }
.wishlist-modal .modal-header { background: #232f3e !important; color: white !important; }
.wishlist-modal .modal-header h5 { color: #ffffff !important; font-weight: bold; }
#wish-ins { font-size: 13px !important; font-weight: 700; text-align: center; padding: 10px; border-bottom: 1px solid #eee; }
#custom-view-wishlist, a.wishlist-add-to-new { height: 40px !important; min-width: 150px !important; border-radius: 4px !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 11px !important; font-weight: 800; text-decoration: none !important; }
#custom-view-wishlist { background: #fff !important; border: 2px solid #2fb5d2 !important; color: #2fb5d2 !important; margin-right: 10px; }
a.wishlist-add-to-new { background: #2fb5d2 !important; color: #fff !important; border: none; }

/* --- 4. PAGINA "LE MIE LISTE" (FIX RIGIDO ALLINEAMENTO) --- */
.wishlist-list-item {
    background: #ffffff !important; border: 1px solid #e0e0e0 !important; border-radius: 6px !important;
    padding: 15px 25px !important; min-height: 80px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    flex-direction: row !important; /* Forza orizzontale */
}


.wishlist-list-item-title span { 
background: #2fb5d2 !important; color: #fff !important; border-radius: 20px !important; padding: 2px 12px !important; font-size: 11px !important; margin-left: 15px !important; }

.wishlist-list-item-title { 
   font-size: 18px !important;
   font-weight: 700 !important;
   flex: 1 !important;
   display: flex !important; 
   align-items: center; 
   margin: 0 !important; 
   text-transform: uppercase !important; /* Forza tutto in MAIUSCOLO */
   letter-spacing: 0.5px; /* Opzionale: dà più respiro alle lettere maiuscole */
}





/* IL FIX: Impedisce lo sfasamento delle icone */
.wishlist-list-item-actions { 
    display: flex !important; /* Abilita l'ambiente flexbox per far funzionare i parametri sottostanti */
    flex-direction: row !important; 
    flex-wrap: nowrap !important; /* BLOCCA LE ICONE SULLA STESSA RIGA */
    align-items: center !important; 
    justify-content: flex-end !important; 
    gap: 8px !important; 
    min-width: 130px !important; /* Spazio garantito per le icone */
    margin: 0 !important;
}

.wishlist-list-item-actions > button, 
.wishlist-list-item-actions > div, 
.wishlist-list-item-actions > a, 
.wishlist-list-item-actions i {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #f8f9fa !important;
    color: #555 !important; border: none !important; margin: 0 !important; padding: 0 !important;
    cursor: pointer !important; transition: 0.2s; font-size: 20px !important;
}

.wishlist-list-item-actions > *:hover { background: #e9f7f9 !important; color: #2fb5d2 !important; }
.wishlist-list-item-actions .delete, .wishlist-list-item-actions i[class*="delete"] { color: #cc0000 !important; }

/* --- 5. PAGINA CONFRONTO (ULTRA-WIDE) --- */
/* #module-poscompare-comparePage #content-wrapper .container { max-width: 98% !important; width: 98% !important; } */
.table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; border: 1px solid #ebebeb; }



#module-poscompare-comparePage table, #poscompare-table {
    table-layout: fixed !important; 
    width: 100%; 
    min-width: 800px !important; 
    border-collapse: separate !important; 
}




#module-poscompare-comparePage thead th:first-child, #module-poscompare-comparePage tbody td:first-child {
    width: 150px !important; min-width: 150px !important; background: #fdfdfd !important; font-weight: 700 !important;
    border-right: 2px solid #dee2e6 !important; position: sticky !important; left: 0; z-index: 10;
}

.js-poscompare-remove-all {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; background: #cc0000 !important; color: white !important;
    padding: 12px 5px !important; border-radius: 4px !important; font-size: 11px !important;
    font-weight: 800 !important; text-transform: uppercase; text-decoration: none !important;
    box-shadow: 0 4px 0px #800000; transition: all 0.2s ease; white-space: nowrap !important;
}
.js-poscompare-remove-all::before { content: '\e872'; font-family: 'Material Icons'; margin-right: 8px; font-size: 16px; font-weight: normal; }
.js-poscompare-remove-all:hover { background: #e60000 !important; box-shadow: 0 2px 0px #800000; transform: translateY(2px); color: white !important; }

#module-poscompare-comparePage th:not(:first-child), #module-poscompare-comparePage td:not(:first-child) {
    padding: 15px 10px !important; border: 1px solid #ebebeb !important; background: #fff !important;
}
#module-poscompare-comparePage #poscompare-table img { 
width: 100% !important; 
min-height: 188px !important; 
object-fit: contain !important; 
margin-bottom: 10px !important; 
}








/* --- 6. MINIATURE WISHLIST BORDATE --- */
.wishlist-products-item { border: 1px solid #ebebeb !important; border-radius: 4px !important; padding: 20px 15px !important; background: #fff !important; transition: all 0.3s ease; margin-bottom: 30px !important; }
.wishlist-products-item:hover { border-color: #2fb5d2 !important; box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important; transform: translateY(-3px); }















/* =======================================================
   INI PP DESCRIZIONE SCHEDA TECNICA A BLOCCHI SEPARATI (Effetto 3 Strati)
   ======================================================= */

/* --- 1. BOTTONI IN ALTO (Navigation) --- */
.elementor-widget-tabs .elementor-tabs-wrapper {
    display: flex !important;
    justify-content: center !important; /* Centrati */
}

.elementor-6170101 .elementor-element.elementor-element-d08b99f .elementor-tab-title, .elementor-6170101 .elementor-element.elementor-element-d08b99f .elementor-tab-title:before, .elementor-6170101 .elementor-element.elementor-element-d08b99f .elementor-tab-title:after,  .elementor-6170101 .elementor-element.elementor {
    margin-bottom: -2px;
}


/* Tab Attiva e Hover (Linea Celeste) */
.elementor-widget-tabs .elementor-tab-title.elementor-active,
.elementor-widget-tabs .elementor-tab-title:hover {
    color: #333 !important;
    border-bottom: 2px solid #2fb5d2 !important; /* La linea celeste */
}

.elementor-widget-tabs .elementor-tab-title {
    border: none !important;
    border-bottom: 3px solid transparent !important; /* Prepara lo spazio per la linea blu */
    margin: 0 !important;
    transition: all 0.3s ease;
}



/* =======================================================
   PP SCHEDA TECNICA A BLOCCHI SEPARATI (Effetto 3 Strati)
   ======================================================= */

/* 1. LA RIGA (Contenitore trasparente con Spazio Bianco) */
.product-features .feature-row {
    display: flex !important;
    width: 100% !important;
    padding: 1px 0 !important; /* Spazio verticale accorpato tra i testi */
    
    /* Questo crea lo spazio bianco orizzontale tra una riga e l'altra */
    margin-bottom: 2px !important; 
    
    /* Questo crea lo SPAZIO BIANCO VERTICALE nel mezzo */
    gap: 4px !important; 
    
    /* Lo sfondo della riga deve essere bianco/trasparente per vedere il buco */
    background-color: #fff !important; 
    border: none !important;
}

/* Rimuoviamo eventuali regole "Zebra" precedenti sulla riga */
.product-features .feature-row:nth-of-type(odd),
.product-features .feature-row:nth-of-type(even) {
    background-color: transparent !important;
}


/* 3. COLONNA DESTRA (Blocco Grigio 2) */
.product-features .feature-row .value {
    color: #666 !important;
}


/* --- 4. LOGO E DATI --- */
.product-manufacturer img {
    border: 1px solid #eee;
    padding: 10px;
    max-width: 150px;
    margin-bottom: 25px;
}

.product-reference-stock {
    font-size: 13px;
    color: #777;
    margin-bottom: 25px;
    line-height: 1.8;
}
.product-reference-stock strong {
    color: #333;
    margin-right: 5px;
}







/* =======================================================
   PP POPUP AVVISO PRODOTTI GIA IN CARRELLO 
   ======================================================= */
/* --- MODIFICHE RICHIESTE --- */
.alert-container-mercataro {
    width: 100%;
    margin-top: 15px;      /* Sposta il blocco più in BASSO */
    margin-bottom: 5px;    /* Distanza dai tasti + e - */
}

.alert-container-mercataro .alert-info {
    max-width: 230px;      /* STRINGE i lati (larghezza ridotta) */
    margin: 0 auto !important; /* CENTRA il box stretto nella colonna */
    
    padding: 4px 10px !important; /* Più basso e compatto */
    font-size: 12px !important;   /* Testo leggermente più piccolo per armonia */
    
    background-color: #f0faff !important; 
    border: 1px solid #2fb5d2 !important; 
    color: #2fb5d2 !important;           
    border-radius: 4px !important;
    text-align: center !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* Rimuove margini residui di PrestaShop */
.alert-container-mercataro #notifications {
    margin: 0 !important;
}






/* =======================================================
   INI PP MODAL POPUP RECENSIONI 
   ======================================================= */

/* --- 1. NASCONDI LA DESCRIZIONE LUNGA --- */
/* Questo è il punto fondamentale: nasconde il div che contiene il testo */
#post-product-comment-form div[itemprop="description"] {
    display: none !important;
}

/* --- 2. LAYOUT VERTICALE (Immagine -> Titolo -> Stelle) --- */
/* Forziamo le colonne della prima riga a occupare il 100% e andare a capo */
#post-product-comment-form .row:first-child .col-sm-2,
#post-product-comment-form .row:first-child .col-sm-4,
#post-product-comment-form .row:first-child .col-sm-6 {
    width: 100% !important;
    float: none !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
}

/* --- 3.1 IMMAGINE Centrato */
#post-product-comment-form .product-cover {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}

/* --- 3.2 Immagine centrato */
#post-product-comment-form img.js-qv-product-cover {
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* --- 3.3 Immagine centrato recensione*/
.product-comment-modal .modal-dialog .product-cover, .product-comment-modal .modal-dialog .product-cover img {
    width: auto;
    height: 150px;
}


.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-content {
        min-height: 100px;
    }








/* --- 4. TITOLO (Centrato e Grassetto) --- */
#post-product-comment-form p.h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
}

/* --- 5. STELLINE (Centrate e Pulite) --- */
#criterions_list {
    list-style: none !important;   /* Toglie i pallini neri */
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important; /* Centra le stelle */
    width: 100% !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
}

#criterions_list li {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.btn-comment, .btn-comment-inverse {
    background-color: #000000;
}

.btn-comment-inverse {
    color: #fff;
}

/* =======================================================
   FINI PP MODAL POPUP RECENSIONI 
   ======================================================= */






/* =======================================================
   INI BORDINO MINIATURE PRODOTTI CORRELATI - PAGINA RICERCA
   ======================================================= */
.elementor-5170101 
/*imposta la class css corretta e funziona*/

{
    padding: 0px 0px 0px 0px !important;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-radius: 3px 3px 3px 3px;
    border-color: rgba(2, 1, 1, 0.1);
}


/* =======================================================
   FINI GEN BORDINO MINIATURE PRODOTTI CORRELATI - PAGINA RICERCA
   ======================================================= */



/* =======================================================
   INI PP GALLERIA (Base Utente + Pulizia Miniature)
   ======================================================= */

/* 1. RESET ALTEZZE (Tuo codice) */
.elementor-widget-product-images .elementor-main-swiper,
.elementor-widget-product-images .elementor-main-swiper .swiper-container,
.elementor-widget-product-images .elementor-main-swiper .swiper-wrapper {
    height: auto !important; 
    margin-bottom: 0 !important;
}

/* 2. IL BOX DELLA FOTO (Tuo codice + Centratura) */
.elementor-widget-product-images .elementor-main-swiper .swiper-slide {
    height: auto !important;       
    display: block !important;     
    width: 100% !important;
    text-align: center; /* Assicura che l'immagine stia al centro */
}

.elementor-widget-product-images .elementor-main-swiper img {
    margin: 0 auto; /* Centra l'immagine nel blocco */
    display: block;
}





/* =======================================================
   PP EFFETTO SFUMATO BIANCO CONTENITORE IMM GRANDE (4 LATI)
   ======================================================= */

.elementor-widget-product-images .elementor-main-swiper .swiper-slide::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important;
    pointer-events: none !important;

    /* CREIAMO LE 4 SFUMATURE */
    background: 
        /* SOTTO: 20px bianco verso l'alto */
        linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 5px),
        /* SOPRA: 20px bianco verso il basso */
        linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 5px),
        /* SINISTRA: 40px bianco verso destra */
        linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 5px),
        /* DESTRA: 40px bianco verso sinistra */
        linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 5px) !important;
    
    background-repeat: no-repeat !important;
}


/* =======================================================
   PP FIX LIGHTBOX: IMPEDISCE APERTURA POPUP SULLE MINIATURE
   ======================================================= */

/* 1. Crea uno scudo invisibile sopra le miniature NON attive */
.elementor-skin-slideshow .elementor-thumbnails-swiper .swiper-slide:not(.swiper-slide-thumb-active)::after {
    content: "" !important;
    display: block !important;    /* DEVE ESSERE BLOCK, non none */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    background-color: transparent !important; /* Trasparente */
    opacity: 0 !important;      /* Invisibile */
    z-index: 10 !important;     /* Sta sopra l'immagine e il link */
}

/* 2. Disattiva i link (<a>) dentro le miniature per sicurezza */
/* Swiper funziona cliccando il box, non serve il link */
.elementor-thumbnails-swiper .swiper-slide a {
    pointer-events: none !important; /* Disabilita il click sul link */
    cursor: pointer !important;      /* Mantiene la manina del mouse */
}












/* =======================================================
   PP STILE FRECCE SLIDER (Cerchio Bianco -> Celeste)
   ======================================================= */

/* 1. STATO NORMALE (Cerchio Bianco con Ombra) */
.ceicon-chevron-left:before,
.ceicon-chevron-right:before {
    /* Creiamo il cerchio */
    width: 45px !important;
    height: 45px !important;
    line-height: 45px !important; /* Fondamentale per centrare la freccia */
    border-radius: 50% !important; /* Rende il box rotondo */
    display: block !important;
    text-align: center !important;

    /* Colori e Stile */
    background-color: #ffffff !important; /* Sfondo Bianco */
    color: #555555 !important;            /* Freccia Grigia scura */
    
    /* L'ombra leggera che si vede nella prima foto */
    box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important; 
    
    /* Dimensione della freccina interna */
    font-size: 16px !important; /* La freccia deve essere piccola dentro il cerchio */
    
    /* Animazione */
    transition: all 0.3s ease !important;
}

/* 2. STATO HOVER (Cerchio Celeste con Freccia Bianca) */
.ceicon-chevron-left:hover:before,
.ceicon-chevron-right:hover:before {
    background-color: #4dc0dc !important; /* Il Celeste della foto */
    color: #ffffff !important;            /* Freccia Bianca */
    
    /* Effetto "galleggiamento" */
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(77, 192, 220, 0.4) !important; /* Ombra celeste */
}



    /* descrizione breve altezza minima */
.ce-product-description-short {
    min-height: 150px;
}


/* =======================================================
   FINI GALLERIA PP (Base Utente + Pulizia Miniature)
   ====================================================== */





/* INI ======================================================= */
/* Nascondi il breadcrumb nativo del tema solo nella pagina prodotto */
#wrapper .breadcrumb {
    visibility: hidden;
}
/* FINI ======================================================= */
 












/* =======================================================
   MINIATURE FIX ALLINEAMENTO CARD (Senza rompere le colonne)
   ======================================================= */

/* 1. LA CARD DEL PRODOTTO */
/* Impostiamo altezza 100% così se il tema usa flex, la card si allunga */
article.elementor-product-miniature {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
    min-height: 100%;
    border: 1px solid #eee;
    box-sizing: border-box !important;
    position: relative;
}

/* 2. IL LINK (Foto + Titolo + Prezzo) */
/* Si espande per riempire lo spazio */
a.elementor-product-link {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; 
    text-decoration: none !important;
    color: inherit;
    width: 100%;
}

/* 3. CONTENUTO INTERNO */
.elementor-product-miniature .elementor-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 10px !important;
    justify-content: space-between !important;
}

/* 4. TITOLO (Opzionale: altezza minima per uniformità) */
.elementor-product-miniature .elementor-title {
    margin-bottom: 5px;
}

/* 5. PREZZO -> In fondo */
.elementor-product-miniature .elementor-price-wrapper {
    margin-top: auto !important; 
    padding-top: 10px;
    padding-bottom: 5px;
}


.elementor-product-miniature .elementor-price {
    color: #666;
    font-weight: 600;
}


/* 6. PULSANTE -> Incollato sotto */
form.elementor-atc {
    width: 100%;
    margin-top: 0 !important;
}

/* 7. IMMAGINE -> Fix proporzioni */
.elementor-image img {
    margin: 0 auto;
    display: block;
    /* Rimuoviamo width 100% forzato che potrebbe ingrandirle troppo */
    max-width: 100% !important; 
    height: auto !important;
}










/* --- FOOTER FLOTTANTE FIX --- */
/* Forza il contenuto centrale a occupare pagine vuote e spingere il footer in basso. */
html, body {height: 100%; margin: 0; padding: 0;}
main { display: flex; flex-direction: column; min-height: 100vh;}
section#wrapper { flex: 1;}
footer { margin-top: auto;}



/* FONT BASE DEL SITO - Regola debole che non rompe le icone */
body {
    font-family: 'Open Sans', sans-serif !important;
    color: #333333 !important;      /* Grigio scuro caldo anziché nero puro */
}


/* --- INI HOMEPAGE AGGIUSTAMENTO SOTTO I 580PX --- */
@media (max-width: 580px) {
    .mercataro-slider {
        height: 190px !important; /* Molto più respiro per mobile */
    }
    .mercataro-slider .slide-content {
        bottom: 10% !important; /* Sposta i testi un po' più su per non coprire il prodotto */
    }
}
/* --- FINI HOMEPAGE AGGIUSTAMENTO SOTTO I 580PX --- */



/* ===============================================================
   TOGLIE COPERTURA GRIGIO SU TUTTO IL SITO
   =============================================================== */
#wrapper {
        background: #fff;
}



/* ============================================================
   ASPETTO QUICK MENU (Mercataro Style)
   ============================================================ */
.quickmenu-mobile-wrapper {
    padding: 0 30px;
    line-height: 2;
    height: 40px;
    background: white;
    margin-top: 8px;
}
   
   /* Nasconde il quickmenu su schermi superiori a 680px */
@media (min-width: 680px) {
  .quickmenu-mobile {
    display: none !important;
  }
}
   
   



/* =================================================================
   INI ADATTAMENTO REPLICA FEDELE POS MEGAMENU MERCATARO (Basato sul tuo HTML) 
   ================================================================= */

.pos-menu-horizontal .img_desktop,
.pos-menu-vertical .img_desktop {
  overflow: hidden;
  display: block;
  position: relative; }
.pos-menu-horizontal img,
.pos-menu-vertical img {
  width: 30%;
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear; }
  .pos-menu-horizontal img:hover,
  .pos-menu-vertical img:hover {
    -moz-transform: scale(1.05) rotate(0.05deg);
    -ms-transform: scale(1.05) rotate(0.05deg);
    -o-transform: scale(1.05) rotate(0.05deg);
    -webkit-transform: scale(1.05) rotate(0.05deg);
    transform: scale(1.05) rotate(0.05deg);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear; }
@media (max-width: 991px) {
  .pos-menu-horizontal .hidden-mobile,
  .pos-menu-vertical .hidden-mobile {
    display: none; } }

#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item.block-icon > a i:not(.hidden-md-down),
#_desktop_megamenu .pos-menu-horizontal .menu-content .menu-item.block-icon > a .img-icon {
  display: block;
  margin: auto auto 5px;
  font-size: 24px;
  text-align: center; }

.not-padding-column .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown {
  padding-top: 0; }

.main-menu.megamenu_center .pos-menu-horizontal {
  margin: auto; }
  .main-menu.megamenu_center .pos-menu-horizontal .menu-content {
    justify-content: center; }
.main-menu .pos-menu-horizontal .icon-drop-mobile {
  display: none; }
.main-menu .pos-menu-horizontal .menu-content {
  flex-wrap: wrap;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  margin: 0; }
  .main-menu .pos-menu-horizontal .menu-content:after {
    content: '';
    display: table;
    clear: both; }
  .main-menu .pos-menu-horizontal .menu-content .menu-item {
    display: inline-block;
    position: relative;
    /* Rotate menu */ }
    .main-menu .pos-menu-horizontal .menu-content .menu-item:first-child > a {
      margin-left: 0; }
    @media (max-width: 1199px) {
      .main-menu .pos-menu-horizontal .menu-content .menu-item > a {
        margin-left: 0.9375rem; } }
    .main-menu .pos-menu-horizontal .menu-content .menu-item > a {
      display: block;
      font-weight: 600;
      font-size: 0.875rem;
      background: transparent;
      text-transform: capitalize;
      position: relative;
      margin-left: 1.875rem; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item > a .menu-subtitle {
        display: inline-block;
        padding: 0 0.625rem;
        font-size: 0.6875rem;
        background: #253237;
        color: #ffffff;
        font-weight: 400;
        line-height: 1.125rem;
        position: absolute;
        margin-top: -1.25rem;
        right: 0;
        border-radius: 3px;
        z-index: 11; }
        .main-menu .pos-menu-horizontal .menu-content .menu-item > a .menu-subtitle:after {
          top: 100%;
          left: 50%;
          content: ' ';
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
          border: solid transparent;
          border-top-color: #253237;
          border-width: 4px;
          margin-left: -4px; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item > a .img-icon {
        margin-right: 5px;
        display: inline-block;
        vertical-align: middle;
        width: auto; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item > a i {
        display: inline-block;
        vertical-align: middle;
        font-size: 1rem;
        line-height: 1;
        vertical-align: 0px; }
        .main-menu .pos-menu-horizontal .menu-content .menu-item > a i.hidden-md-down {
          font-size: 8px; }
    .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown {
      position: absolute;
      top: 100%;
      z-index: 9;
      visibility: hidden;
      opacity: 0;
      text-align: left;
      padding-top: 10px; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.sub_grid .pos-menu-row {
        column-gap: 0;
        -webkit-column-count: 4;
        -moz-column-count: 4;
        -ms-column-count: 4;
        column-count: 4; }
        .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.sub_grid .pos-menu-row .pos-menu-col {
          float: none;
          display: inline-block;
          width: 100%; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown h4 {
        font-family: inherit; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .pos-sub-inner {
        box-shadow: 0px 0px 3.76px 0.24px rgba(0, 0, 0, 0.15);
        background: #ffffff;
        padding: 1.875rem 1.875rem 0.625rem 1.875rem; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .pos-menu-row {
        margin-bottom: 1.875rem; }
        .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .pos-menu-row .pos-menu-col {
          margin-bottom: 1.25rem; }
        .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .pos-menu-row:last-child {
          margin-bottom: 0; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .ul-column .submenu-item {
        margin-bottom: 1.875rem;
        overflow: hidden; }
        .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .ul-column .submenu-item:last-child {
          margin-bottom: 0; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .ul-column.column_dropdown {
        margin-top: 1.25rem; }
        .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .ul-column.column_dropdown .submenu-item {
          margin-bottom: 0; }
          .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .ul-column.column_dropdown .submenu-item > a {
            line-height: 2.25;
            display: block; }
          .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .ul-column.column_dropdown .submenu-item .category-sub-menu {
            margin-top: 0;
            padding-left: 10px; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .category-sub-menu {
        margin-top: 1.25rem; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .ul-column:not(.column_dropdown) .submenu-item > a,
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .column_title {
        color: #253237;
        line-height: 1;
        text-transform: capitalize;
        font-size: 1rem;
        font-weight: 600;
        display: block;
        margin: 0; }
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .ul-column:not(.column_dropdown) .submenu-item > a:hover {
        color: var(--hovercolor); }
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .ul-column.column_dropdown .submenu-item > a,
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .submenu-item .category-sub-menu a {
        color: #253237;
        text-transform: capitalize;
        display: block;
        line-height: 2;
        color: #888888 !important; 
        font-size: 14px; }
        .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .ul-column.column_dropdown .submenu-item > a:hover,
        .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .submenu-item .category-sub-menu a:hover {
          -moz-transform: translateX(10px);
          -webkit-transform: translateX(10px);
          -o-transform: translateX(10px);
          -ms-transform: translateX(10px);
          transform: translateX(10px);
          -webkit-transition: all 300ms linear;
          -moz-transition: all 300ms linear;
          -ms-transition: all 300ms linear;
          -o-transition: all 300ms linear;
          transition: all 300ms linear;
          color: var(--hovercolor); }
      .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu {
        min-width: 250px;
        left: auto !important;
        right: auto;
        padding: 0; }
        .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu .pos-sub-inner {
          padding: 0;
          box-shadow: 0px 0px 3.76px 0.24px rgba(0, 0, 0, 0.15); }
          .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu .pos-sub-inner .pos-sub-inner {
            margin: 0; }
        .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu li {
          position: relative;
          border-bottom: 1px solid #ebebeb;
          position: relative;
          display: block;
          padding: 0 2.7rem 0 1.25rem; }
          .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu li:last-child {
            border-bottom: none; }
          .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu li .icon-drop-mobile {
            display: block;
            position: absolute;
            right: 0.9375rem;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%); }
            .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu li .icon-drop-mobile:before {
              font-family: "roadthemes-icon";
              content: '\e92d';
              font-size: 0.625rem; }
            .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu li .icon-drop-mobile i {
              display: none; }
          .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu li a {
            display: block;
            padding: 0.625rem 0;
            color: #253237;
            font-weight: 400;
            text-transform: capitalize;
            color: #888888 !important;
            font-size: 0.875rem;
            background: #ffffff;
            white-space: nowrap; }
            .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu li a:hover {
              color: var(--hovercolor); }
          .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu li > .menu-dropdown {
            left: 100% !important;
            top: 0; }
          .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu li:hover > .menu-dropdown {
            opacity: 1;
            visibility: visible;
            -webkit-transition: all 300ms linear;
            -moz-transition: all 300ms linear;
            -ms-transition: all 300ms linear;
            -o-transition: all 300ms linear;
            transition: all 300ms linear; }
          .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown.cat-drop-menu li:hover > a {
            -moz-transform: translateX(10px);
            -webkit-transform: translateX(10px);
            -o-transform: translateX(10px);
            -ms-transform: translateX(10px);
            transform: translateX(10px);
            -webkit-transition: all 300ms linear;
            -moz-transition: all 300ms linear;
            -ms-transition: all 300ms linear;
            -o-transition: all 300ms linear;
            transition: all 300ms linear; }
    .main-menu .pos-menu-horizontal .menu-content .menu-item:hover > .menu-dropdown,
    .main-menu .pos-menu-horizontal .menu-content .menu-item > .cat-drop-menu > li:hover > .cat-drop-menu {
      opacity: 1;
      visibility: visible;
      -webkit-transition: all 300ms linear;
      -moz-transition: all 300ms linear;
      -ms-transition: all 300ms linear;
      -o-transition: all 300ms linear;
      transition: all 300ms linear; }
    .main-menu .pos-menu-horizontal .menu-content .menu-item > .menu-dropdown.cat-drop-menu {
      padding-top: 10px; }
    .main-menu .pos-menu-horizontal .menu-content .menu-item > .menu_slidedown,
    .main-menu .pos-menu-horizontal .menu-content .menu-item > .menu_slidedown.cat-drop-menu li > .menu-dropdown {
      opacity: 0;
      visibility: hidden;
      -o-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
      -webkit-transform-origin: 0% 0%;
      transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transform: rotateX(-75deg);
      -o-transform: rotateX(-75deg);
      -moz-transform: rotateX(-75deg);
      -webkit-transform: rotateX(-75deg); }
    .main-menu .pos-menu-horizontal .menu-content .menu-item:hover > .menu_slidedown,
    .main-menu .pos-menu-horizontal .menu-content .menu-item > .menu_slidedown.cat-drop-menu li:hover > .menu-dropdown {
      opacity: 1;
      visibility: visible;
      transform: rotateX(0deg);
      -o-transform: rotateX(0deg);
      -moz-transform: rotateX(0deg);
      -webkit-transform: rotateX(0deg);
      -o-transition: -o-transform 0.3s, opacity 0.3s;
      -ms-transition: -ms-transform 0.3s, opacity 0.3s;
      -moz-transition: -moz-transform 0.3s, opacity 0.3s;
      -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; }
    .main-menu .pos-menu-horizontal .menu-content .menu-item > .menu_slideup,
    .main-menu .pos-menu-horizontal .menu-content .menu-item > .menu_slideup.cat-drop-menu li > .menu-dropdown {
      opacity: 0;
      visibility: hidden;
      -webkit-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -o-transform-origin: center center;
      transform-origin: center center;
      -webkit-transform: translateY(20px);
      -moz-transform: translateY(20px);
      -ms-transform: translateY(20px);
      -o-transform: translateY(20px);
      transform: translateY(20px); }
    .main-menu .pos-menu-horizontal .menu-content .menu-item:hover > .menu_slideup,
    .main-menu .pos-menu-horizontal .menu-content .menu-item > .menu_slideup.cat-drop-menu li:hover > .menu-dropdown {
      opacity: 1;
      visibility: visible;
      -webkit-transform: rotateX(0deg);
      -moz-transform: rotateX(0deg);
      -ms-transform: rotateX(0deg);
      -o-transform: rotateX(0deg);
      transform: rotateX(0deg);
      -o-transition: -o-transform 0.3s, opacity 0.3s;
      -ms-transition: -ms-transform 0.3s, opacity 0.3s;
      -moz-transition: -moz-transform 0.3s, opacity 0.3s;
      -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; }
    .main-menu .pos-menu-horizontal .menu-content .menu-item > .menu_rotate,
    .main-menu .pos-menu-horizontal .menu-content .menu-item > .menu_rotate.cat-drop-menu li > .menu-dropdown {
      opacity: 0;
      visibility: hidden;
      transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
      transform-origin: 50% 0px 0px; }
    .main-menu .pos-menu-horizontal .menu-content .menu-item:hover > .menu_rotate,
    .main-menu .pos-menu-horizontal .menu-content .menu-item > .menu_rotate.cat-drop-menu li:hover > .menu-dropdown {
      opacity: 1;
      visibility: visible;
      max-height: 1000px;
      transform: perspective(400px) rotate3d(0, 0, 0, 0deg);
      -webkit-transition: all 300ms linear;
      -moz-transition: all 300ms linear;
      -ms-transition: all 300ms linear;
      -o-transition: all 300ms linear;
      transition: all 300ms linear; }
      
      .menu-no-gap .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown {
  padding-top: 0; }
  
  
  /* INI Correzione animazione "ritorno lento" per i link del menu */
     .pos-menu-horizontal .pos-sub-menu a,
     .pos-menu-horizontal .category-sub-menu li a,
     .pos-menu-horizontal .pos-sub-inner li a 
    {
     /* Questa è la regola magica: dice di animare qualsiasi cambiamento in 0.3 secondi */
       transition: all 0.3s ease-in-out !important;
       -webkit-transition: all 0.3s ease-in-out !important;
    
      /* Opzionale: assicura che il punto di partenza sia stabile */
      transform: translateX(0);
    }
    
    .pos-menu-horizontal .category-sub-menu li a:hover {
    /* Spostamento a destra */
    padding-left: 15px !important; 
    }
  /* FINI Correzione animazione "ritorno lento" per i link del menu */









/* ==========================================================
   MODIFICA HOVER MENU PRINCIPALE (NO AZZURRO, SOLO GRIGIO)
   ========================================================== */

/* 1. Definizione Base (Nero/Grigio Scuro) */
.pos-menu-horizontal .menu-item > a {
    color: #333333 !important; /* Colore di partenza scuro */
    transition: color 0.3s ease; /* Animazione morbida */
}

/* 2. Effetto al passaggio del Mouse (Si schiarisce un po') */
.pos-menu-horizontal .menu-item:hover > a {
    color: #777777 !important; /* Diventa grigio chiaro, NON azzurro */
}

/* 3. Anche la freccetta accanto deve schiarirsi uguale */
.pos-menu-horizontal .menu-item:hover .icon-rt-arrow-down {
    color: #777777 !important;
}



.main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown .submenu-item .category-sub-menu a {
    text-transform: capitalize;
    display: block;
    line-height: 2;
    color: #888888 !important;
    font-size: 14px;
}

.pos-menu-horizontal .pos-sub-inner li a {
    /* Questa riga è fondamentale: dice "Qualsiasi cambiamento fallo lentamente" */
    transition: all 0.3s ease-in-out !important; 
}



/* ======================================================
   FIX VISUALE SPECIFICO PER L'EDITOR DI ELEMENTOR
   (Serve per non vedere il menu esploso mentre lavori)
   ====================================================== */

/* 1. Allarga il contenitore principale nell'editor */
body.elementor-editor-active .pos-menu-horizontal {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* 2. Forza la disposizione orizzontale della barra */
body.elementor-editor-active .pos-menu-horizontal ul.menu-content {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
}

/* 3. Sistema la tendina (Sottomenu) che ora è stretta e verticale */
body.elementor-editor-active .pos-sub-menu,
body.elementor-editor-active .menu-dropdown {
    position: absolute !important; /* Lo sgancia dal flusso per non spingere giù tutto */
    top: 100% !important;
    left: 0 !important;

    width: auto !important;
    background: #fff !important;
    z-index: 9999 !important;
    
    /* Opzionale: Nascondilo nell'editor se ti da fastidio */
    /* display: none; */ 
}

/* 4. Mostra la tendina solo se passi il mouse (anche nell'editor) */
body.elementor-editor-active .menu-item:hover .pos-sub-menu {
    display: block !important;
}

/* 5. IMPEDISCE AL TESTO DI ANDARE A CAPO (Risolve: Borse A Traco...) */
body.elementor-editor-active .pos-sub-menu a,
body.elementor-editor-active .pos-sub-inner li a {
    white-space: nowrap !important; /* Obbliga il testo a stare su una riga */
    width: auto !important;
}

/* 6. Sistema le colonne interne nell'editor */
body.elementor-editor-active .pos-menu-col {
    width: auto !important;
    min-width: 200px !important;
    float: left !important;
}
/* =================================================================
   FINI REPLICA FEDELE POS MEGAMENU MERCATARO (Basato sul tuo HTML) 
   ================================================================= */
   
   
   
   
   /* ===================================================================
   FIX DEFINITIVO SPAZIO BIANCO MOBILE (CAUSATO DA MEGAMENU)
   =================================================================== */

/*
 * Applica queste regole solo su schermi più piccoli di 680px
 * (il breakpoint standard per tablet e mobile).
*/
@media (max-width: 680px) {

    /*
     * 1. Nasconde completamente l'intero menu orizzontale.
     *    'display: none' è la regola chiave che impedisce al browser
     *    di calcolare la larghezza degli elementi interni.
    */
    .pos-menu-horizontal {
        display: none !important;
    }

    /*
     * 2. Regola di sicurezza aggiuntiva: se per qualche motivo
     *    il menu non viene nascosto, impediamo ai sottomenu
     *    di creare problemi di layout.
    */
    .main-menu .pos-menu-horizontal .menu-content .menu-item .menu-dropdown {
        position: static !important; /* Rimuove il posizionamento assoluto */
        width: 100% !important;      /* Forza la larghezza al 100% del contenitore */
        column-count: 1 !important;  /* Forza una singola colonna */
    }
    
}
   

   
   
  /* ==================================================
   FIX LOGO: Impedisce il rimpicciolimento su Tablet
   ================================================== */

/* Seleziona l'immagine del logo dentro l'header */
#header .logo,
.elementor-widget-theme-site-logo img {
    width: 200px !important;       /* Imposta la larghezza desiderata (es. 200px) */
    min-width: 200px !important;   /* FONDAMENTALE: Impedisce di scendere sotto questa misura */
    max-width: none !important;    /* Rimuove il limite del contenitore */
    height: auto !important;       /* Mantiene le proporzioni */
}

/* Opzionale: Dice alla colonna che contiene il logo di non stringersi */
.elementor-col-33, /* O la classe specifica della tua colonna logo */
.header-logo-column {
    flex-shrink: 0 !important; /* Non ti far schiacciare dagli altri! */
} 
   
   
   
   
/* ===============================================================
   STILE PERSONALIZZATO BLOG - VERSIONE FINALE
   Basato su CSS utente, con fix per aspect ratio immagini.
   Data: 12/12/2025
   =============================================================== */

/* --- Card Principale --- */
.ets_block_latest li {
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    padding: 15px;
    margin: 10px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    /* Aggiunta: attiva Flexbox per l'allineamento verticale perfetto */
    display: flex;
    flex-direction: column;
}

/* Effetto hover elegante */
.ets_block_latest li:hover {
    transform: translateY(-4px);
    box-shadow: 0 3px 3px rgba(0,0,0,0.10);
}


/* --- SEZIONE IMMAGINE (MODIFICATA PER ASPECT RATIO 1:1) --- */

/* 1. Crea un contenitore quadrato per l'immagine */
.ets_block_latest li .ets_item_img {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Forza un'altezza pari alla larghezza -> crea un quadrato */
    border-radius: 10px;
    overflow: hidden; /* Nasconde le parti dell'immagine che escono */
    margin-bottom: 15px; /* Aumentato un po' il margine */
}

/* 2. Adatta l'immagine all'interno del contenitore quadrato */
.ets_block_latest li .ets_item_img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Riempie lo spazio senza deformare (croppa se necessario) */
    transition: opacity 0.2s ease;
}

.ets_block_latest li:hover .ets_item_img img {
    opacity: 0.92;
}

/* --- SEZIONE TESTUALE --- */

/* Aggiunta: Contenitore per il testo per usare Flexbox */
.ets_block_latest li .ets-blog-latest-post-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Fa espandere quest'area per riempire lo spazio verticale */
}

/* Titolo */
.ets_block_latest li .ets_title_block {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
    line-height: 1.3;
    transition: color 0.2s;
    min-height: 4.8em; /* Spazio per 3 righe per allineare tutto */
    max-height: calc(1.3em * 3); /* oppure: min-height: 3.9em; */
}

.ets_block_latest li .ets_title_block:hover {
    color: #007bff;
}

/* Data */
.ets_block_latest li .post-date {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
    display: inline-block;
}

/* Descrizione */
.ets_block_latest li .blog_description p {
    margin: 0 0 12px;
    font-size: 14px;
    color: #555;
    line-height: 1.45;
    min-height: 100px;
    /* Aggiunta: fa espandere la descrizione e spinge il "Read Moree" in fondo */
    flex-grow: 1;
}

/* Link Read more */
.ets_block_latest li .read_more {
    font-size: 14px;
    font-weight: 600;
    color: #007bff;
    text-decoration: none;
    /* Aggiunta: si assicura di stare in fondo */
    margin-top: auto; 
    margin-bottom: 10px;
    border-bottom: 2px dotted;
    align-self: flex-start !important;
}


.title_blog, .title_blog a {
    font-size: 20px;
    text-align: center;
}


.owl-carousel .owl-item {
    padding-left: 5px;
}


.ets_block_slider .owl-item>li {
    margin-top: 5px;
    margin-left: -1px;
    padding: 10px;
}


.page_home, .page_home_gallery {
    background-color: #fff;
    display: block;
    clear: both;
    margin-bottom: 2px;
    padding: 15px;
    width: 100%;
}


.page_home .title_blog, .page_home_gallery .title_blog {
    margin-top: -15px;
}

/* ===============================================================
   FINI STILE PERSONALIZZATO BLOG
   =============================================================== */







/*  --------- INI FOOTER CSS --------- */

/* La linea celeste sotto il titolo */
.footer-heading::after {
    content: '';
    display: block;
    width: 60px; /* Lunghezza linea */
    height: 2px; /* Spessore linea */
    background-color: #6AD4FF; /* COLORE CELESTE */
    position: absolute;
    bottom: 0; /* Corretto da 1 (non valido senza unità) a 0 */
}

/* 2. Stile Link delle Colonne */
.elementor-icon-list-item a {


    padding-bottom: 8px; /* Spazio tra le righe */
    display: block;
    transition: color 0.3s;
        /* QUI va la transition, così funziona sia quando entri che quando esci */
    transition: all 0.3s ease-in-out !important;
    
    /* Assicuriamoci che parta da zero spostamento */
    padding-left: 0; 
}

/* Checkbox GDPR sotto */
.block_newsletter .form-group.GDPRConsent {
    width: 100%;
    margin-top: 10px;
    font-size: 11px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Icona freccetta (se presente) */
.elementor-icon-list-icon i {
    color: #ccc;
    font-size: 12px;
    /* Anche la freccia deve muoversi fluida */
    transition: all 0.3s ease-in-out !important;
}

/* HOVER (Quando passi il mouse) */
.elementor-icon-list-item:hover a {
    color: #2fb5d2 !important; /* Celeste */
    padding-left: 10px !important; /* Si sposta a destra di 10px */
}

.elementor-icon-list-item:hover .elementor-icon-list-icon i {
    color: #2fb5d2 !important; /* Anche la freccia si colora */
    padding-left: 5px !important; /* Si muove anche lei */
}

/*  ---------- FINI FOOTER CSS --------------- */








/* ===============================================================
   INI STILE PERSONALIZZATO PAGINA CATEGORIE
   =============================================================== */


/* --- FIX AJAX: RIPRISTINO GRIGLIA 5 COLONNE --- */

/* Applichiamo la regola che hai trovato direttamente al contenitore di PrestaShop */
#js-product-list .products, 
#js-product-list .product-list-grid {
    display: grid !important;
    /* Forza 4 colonne su Desktop */
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 2px; /* Spazio tra i prodotti */
    width: 100% !important;
}

/* Assicuriamoci che la miniatura occupi tutto lo spazio della cella della griglia */
#js-product-list .product-miniature {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* --- RESPONSIVE --- */

/* Su Laptop: passiamo a 3 colonne */
@media (max-width: 1350px) {
    #js-product-list .products {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}


/* Su Tablet: passiamo a 3 colonne */
@media (max-width: 1100px) {
    #js-product-list .products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* Su Mobile: passiamo a 2 colonne */
@media (max-width: 767px) {
    #js-product-list .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }
}

/* Spazio righe miniature */
#js-product-list .products, #js-product-list .product-list-grid {
    grid-row-gap: 20px;
}



/* --- SPOSTAMENTO FORZATO ORDINAMENTO A DESTRA --- */

/* 1. Reset del contenitore principale */
#js-product-list-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important; /* Mette spazio tra conteggio e ordinamento */
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. Forza il blocco dell'ordinamento a scivolare tutto a destra */
#js-product-list-top .products-sort-order,
#js-product-list-top > div:last-child {
    margin-left: auto !important; /* La spinta magica verso destra */
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex: 0 1 auto !important; /* Impedisce al blocco di allargarsi troppo */
}


/* Elimina il troppo spazio dai divisori della pagina categorie */
.elementor-element-196c256 .elementor-divider,
.elementor-element-6ab3392 .elementor-divider {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* --- 1. LINEETTA BLU: SOLO NELLA SIDEBAR --- */
#sidebar-negozio h3, 
#sidebar-negozio .facet .title {
    position: relative !important;
    display: block !important;
    padding-bottom: 12px !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid #eeeeee !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    color: #333 !important;
}

/* Creazione della lineetta blu solo per la sidebar */
#sidebar-negozio h3::after, 
#sidebar-negozio .facet .title::after {
    content: "" !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 60px !important;
    height: 3px !important;
    background-color: #2fb5d2 !important;
    z-index: 2 !important;
}


p.h6.facet-title.hidden-sm-down, span.navbar-toggler.collapse-icons{
    display: none;
}

/* --- DISATTIVAZIONE CLICK SU TITOLI SIDEBAR --- */

.title.hidden-md-up.collapsed,
p.h6.facet-title {
    pointer-events: none !important; /* Impedisce qualsiasi interazione col mouse (click, hover, etc.) */
    cursor: default !important;      /* Impedisce al cursore di diventare una manina */
    user-select: none !important;    /* Impedisce anche di selezionare il testo per errore */
}



/* --- RIMOZIONE PADDING FILTRI NATIVI --- */
#search_filters, 
#search_filters_brands, 
#search_filters_suppliers {
    padding: 0 !important; /* Rimuove lo spazio interno */
    margin-bottom: 1.563rem;
    background: transparent !important; /* Opzionale: toglie lo sfondo bianco se vuoi che stia sul fondo grigio della sidebar */
}

/* Assicura che anche il contenuto interno parta da zero */
#search_filters .facet {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* --- RESET E STILE MODULO TAG --- */

/* 1. Reset totale contenitori (Widget e Modulo) */
#sidebar-negozio .elementor-widget-ps-widget-module,
#sidebar-negozio .elementor-widget-container,
#sidebar-negozio div#tags_block,
#sidebar-negozio .blocktags {
    padding-left: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

/* 2. Stile Titolo H2 (TAG) per allinearlo ai filtri sopra */
#sidebar-negozio div#tags_block h2 {
    display: block !important;
    position: relative !important;
    padding: 0 0 12px 0 !important; /* Spazio sotto per la linea */
    margin: 0 0 15px 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important; /* Forza MAIUSCOLO */
    color: #333 !important;
    border-bottom: 1px solid #eeeeee !important; /* Linea grigia lunga */
    text-align: left !important;
    width: 100% !important;
}

/* 3. Lineetta Celeste (60px) */
#sidebar-negozio div#tags_block h2::after {
    content: "" !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 60px !important;
    height: 3px !important;
    background-color: #2fb5d2 !important;
    z-index: 5 !important;
}

/* 4. Allineamento contenuto (i link dei tag) */
#sidebar-negozio div#tags_block .block_content {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
}

#sidebar-negozio div#tags_block .block_content a {
    color: #2fb5d2 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 5px 5px 5px 0 !important; /* Spazio tra i tag, ma zero a sinistra */
}

#sidebar-negozio a.tag_level3.first_item {
    color: #232323;
}

a.tag_level1.last_item {
    color: black;
}

/* ===============================================================
   FINI STILE PERSONALIZZATO PAGINA CATEGORIE
   =============================================================== */



/* Nascondi barra notifiche e avvisi solo sulla pagina 404 */
body#pagenotfound #notifications,
body.pagenotfound #notifications {
    display: none !important;
}

/* Nascondi prodotti popolari solo sulla conferma ordine */
#order-confirmation .featured-products {
    display: none !important;
}

/* Allineamento a piombo Tabella Prodotti Conferma Ordine */
@media (min-width: 768px) {
    #order-items .order-confirmation-table .order-line {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 10px 0 !important;
    }
    
    /* Immagine prodotto (15%) */
    #order-items .order-confirmation-table .order-line > div:first-child {
        flex: 0 0 15% !important;
        max-width: 15% !important;
    }
    #order-items .order-confirmation-table .order-line img {
        max-height: 90px !important;
        width: auto !important;
    }

    /* Nome e dettagli prodotto (35%) -> Totale colonna Articoli = 50% */
    #order-items .order-confirmation-table .order-line > .details {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        padding-left: 10px !important;
    }

    /* Blocco Prezzo / Qta / Totale (50% restante) */
    #order-items .order-confirmation-table .order-line > .qty {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    #order-items .order-confirmation-table .order-line > .qty .row {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 1. Prezzo Unitario (1/3 del blocco, allineato a destra sotto il suo titolo) */
    #order-items .order-confirmation-table .order-line > .qty .row > div:nth-child(1) {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        text-align: right !important;
        padding-right: 15px !important;
    }

    /* 2. Quantità (1/3 del blocco, centrato sotto Quantità) */
    #order-items .order-confirmation-table .order-line > .qty .row > div:nth-child(2) {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        text-align: center !important;
    }

    /* 3. Totale Prodotti (1/3 del blocco, allineato a destra sotto Totale) */
    #order-items .order-confirmation-table .order-line > .qty .row > div:nth-child(3) {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        text-align: right !important;
        padding-right: 15px !important;
        font-weight: 600 !important;
    }
}

/* Allarga blocco Dettagli Ordine (col-md-6) per evitare a capo sui pagamenti */
@media (min-width: 768px) {
    #order-details {
        flex: 0 0 55% !important;
        max-width: 55% !important;
    }
}

/* Forza larghezza reale blocco Dettagli Ordine per evitare a capo */
@media (min-width: 768px) {
    #order-details,
    #order-details.col-md-4,
    #order-details.col-md-7 {
        width: 60% !important;
        max-width: 60% !important;
        flex: 0 0 60% !important;
    }
}