/********************************************************
			Coderplace Custom Styles
********************************************************/
.tm-carousel {
  display: none;
  position: relative;
  float: left;
  width: 100%;
  margin: 0;
}
.cp-carousel {
  display: none;
  position: relative;
  float: left;
  width: 100%;
  margin: 0;
}
.owl-carousel .owl-wrapper {
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
  -ms-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate3d(0px, 0px, 0px);
  -moz-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-wrapper-outer {
  overflow-x: clip;
  position: relative;
  float: left;
  width: 100%;
  padding: 0;
}
.owl-carousel .owl-wrapper-outer.autoHeight {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item {
  float: left;
}
.owl-carousel .owl-item .manu_image a {
  display: inline-block;
}
.owl-carousel .owl-item .manu_image a img {
  max-width: 100%;
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  /* fix */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  text-align: center;
}

/* mouse grab icon */
.customNavigation {
	position: absolute;
	z-index: 9;
	width: 100%;
	top: 57%;
	direction: ltr !important;
	right: 0;
	left: auto;
  opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
}
.products .customNavigation {
	top: 35%;
}
.customNavigation a.prev::before {
	content: "\E314";
	font-family: "Material Icons";
	position: absolute;
	font-size: 20px;
	right: 5px;
	top: -1px;
	color: #808080;
}
.customNavigation a.next::before {
	content: "\E315";
	font-family: "Material Icons";
	position: absolute;
	font-size: 20px;
	position: absolute;
	right: 3px;
	top: -1px;
	color: #808080;
}
.special-products:hover .customNavigation, 
.products:hover .customNavigation,
.testimonial-block-part:hover .customNavigation,
.tmblog-latest:hover .customNavigation, 
.product-accessories:hover .customNavigation,
.productscategory-products:hover .customNavigation{
  opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
}
.lastest_block .customNavigation {
	top: 44%;
}
.customNavigation i {
	color: #222 !important;
	cursor: pointer;
	font-size: 0;
	font-weight: 500;
	height: 38px;
	line-height: 32px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 38px;
	background: transparent;
	border-radius: 0;
	font-style: unset;
	box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.11);
}
.customNavigation i.prev {
	background: transparent;
	right: auto;
	background: #fff;
	border-radius: 50%;
	left: -5px;
}
.customNavigation i.next {
	background: transparent;
	right: 0px;
	background: #fff;
	border-radius: 50%;
	right: -5px;
}
.testimonial-block-part .customNavigation i.prev, 
.special-products .customNavigation i.prev,
.btn.prev.accessories_prev {
	left: -20px;
} 
.testimonial-block-part .customNavigation i.next, 
.special-products .customNavigation i.next,
.btn.next.accessories_next  {
  right: -20px;
}
.customNavigation i.prev::before {
	content: '';
	-webkit-mask-image: url(../img/megnor/pro-left.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url(../img/megnor/pro-left.svg);
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: #000;
	mask-size: 14px;
	font-size: 14px;
	width: 38px;
	height: 38px;
	display: block;
  -webkit-mask-size: 14px;
}
.customNavigation i.next::before {
	content: '';
	-webkit-mask-image: url(../img/megnor/pro-right.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url(../img/megnor/pro-right.svg);
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: #000;
	mask-size: 14px;
	font-size: 14px;
	width: 38px;
	height: 38px;
	display: block;
  -webkit-mask-size: 14px;
}
.customNavigation i.next:hover::before,.customNavigation i.prev:hover::before  {
  color: #fff;
}
#cpleftbanner1 img,
#cpleftbanner2 img {
  max-width: 100%;
}
#cpleftbanner1 li,
#cpleftbanner2 li {
  overflow: hidden;
  position: relative;
  float: left;
  border-radius: 5px;
}
#cpleftbanner1 li a,
#cpleftbanner2 li a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
}
.footer-container .links.lastest_block .customNavigation i.prev:hover {
  color: #9bbab1 !important;
}
.footer-container .links.lastest_block .customNavigation i.next:hover {
  color: #9bbab1 !important;
}

@media (max-width: 1449px) {
  .testimonial-block-part .customNavigation i.prev, 
  .special-products .customNavigation i.prev,
  .btn.prev.accessories_prev {
    left: -15px;
  }
  .testimonial-block-part .customNavigation i.next,
   .special-products .customNavigation i.next,
   .btn.next.accessories_next {
    right: -15px;
  }
  .customNavigation i.next {
    right: 0;
  }
  .customNavigation i.prev {
    left: 0;
  }
}
@media (max-width: 1199px) {
}

@media (max-width: 991px) {
  #cpleftbanner1 li img,
  #cpleftbanner2 li a {
    width: auto;
  }
}
@media (max-width: 767px) {
  .customNavigation {
    opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
  
  .testimonial-block-part .customNavigation i.prev, 
  .special-products .customNavigation i.prev,
  .btn.prev.accessories_prev {
    left: 5px;
  }
  .testimonial-block-part .customNavigation i.next,
   .special-products .customNavigation i.next,
   .btn.next.accessories_next {
    right: 5px;
  }
  #main .images-container .js-qv-mask .customNavigation {
    top: 13px;
  }
  .quickview .mask.additional_slider .customNavigation i.prev {
    left: -10px !important;
  }
  .quickview .mask.additional_slider .customNavigation i.next {
    right: -10px !important;
  }
  .btn.next.brand_next {
    left: auto;
    right: 0;
    position: absolute;
  }
  .btn.prev.brand_prev {
    left: 0;
    right: auto;
  }
  .customNavigation i.next {
    left: auto;
    right: 0;
  }
}
@media (max-width: 480px) {
}


#verticalmenu_desktop_user_info {
    display: none !important;
}


/* =========================================
   STILE MENU MOBILE PERSONALIZZATO
========================================= */

/* 1. Sfondo e contenitore principale */
#cp_sidevertical_menu_top {
  background-color: #f9eb46 !important; /* Il tuo colore giallo */
  box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.2);
  height: 100%;
  left: 0; /* Corretto il -0% originale */
  margin-left: 0;
  overflow: auto;
  padding: 0;
  position: fixed;
  top: 0;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
  transform: translateX(-102%);
  width: 320px; /* Larghezza standard ottimizzata per mobile */
  z-index: 9999;
}

#cp_sidevertical_menu_top.slide {
  transform: translateX(0);
  opacity: 1;
}

/* 2. Testata del menu (Dove c'è scritto "Menu" e la X per chiudere) */
#cp_sidevertical_menu_top .title_main_menu {
  background-color: #000000; /* Stacco nero molto sportivo */
  color: #f9eb46;
  padding: 18px 20px;
  border-bottom: 2px solid #000000;
}
#cp_sidevertical_menu_top .title_main_menu .menu-close {
  color: #f9eb46 !important;
}

/* 3. Voci Principali (Allineate al design desktop) */
#cp_sidevertical_menu_top ul.top-menu > li > a {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  text-transform: capitalize !important;
  padding: 16px 20px !important; /* Ottimizzato per il tocco col dito */
  display: block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Sottile linea di separazione */
}

/* 4. Colore delle icone "+" e "-" */
#cp_sidevertical_menu_top .collapse-icons i {
  color: #000000 !important;
  font-size: 40px;
}

/* 5. Voci dei Sottomenu (Più piccole e non in grassetto per fare gerarchia) */
#cp_sidevertical_menu_top ul.top-menu .sub-menu a {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #222222 !important;
  padding: 12px 20px 12px 35px !important; /* Il 35px sposta il testo più a destra */
  background-color: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* Rimuove sfondi bianchi indesiderati ereditati dal tema */
#cp_sidevertical_menu_top .popover.sub-menu {
  background-color: rgba(0,0,0,0.03) !important; /* Leggermente ombreggiato per staccare dal giallo base */
  border: none !important;
  box-shadow: none !important;
}

.homepage-video-wrapper {
    position: relative;
    width: 100%;
    height: 100vh; /* Copre tutta l'altezza dello schermo */
    overflow: hidden;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Assicurati che il tag video riempia il wrapper */
.homepage-video-wrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Taglia i bordi per non deformare il video */
}

/* Ottimizzazione per Mobile */
@media (max-width: 767px) {
    .homepage-video-wrapper {
        height: 80vh; /* Opzionale: un po' più corto su mobile per mostrare contenuto sotto */
    }
}

@media (min-width: 992px) {
    #header .header-nav .container {
        justify-content: center !important; /* Cambia da space-between a center */
        gap: 20px; /* Aggiunge spazio tra la scritta e gli altri elementi */
    }

  #cpheadercms1 {
    width: auto;
    max-width: 100%;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

    .contact-link {
    display: inline-flex;
    align-items: center;
        float: none !important;
        margin: 0 auto;
    padding: 0;
    line-height: 1.2;
    font-size: 13px;
    white-space: nowrap;
    }
}


/* Forza la visibilità dell'immagine trib.png su mobile */
@media (max-width: 767px) {
    /* 1. Forza il contenitore */
    .imgblack {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 10px; /* Impedisce il collasso */
        text-align: center;
    }

    /* 2. Forza l'immagine specifica */
    .imgblack img[src*="trib.png"], 
    .imgblack img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }
}

/* Layout Generale del Contenitore */
.custom-banner-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    margin: 20px 0;
}

/* Stile del singolo Riquadro */
.banner-box {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: block;
    aspect-ratio: 16 / 9; /* Mantiene la proporzione rettangolare */
}

.banner-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%); /* Effetto bianco e nero dell'immagine */
    transition: transform 0.5s ease;
}

/* Overlay scuro per far risaltare il testo */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3); /* Scurisce leggermente lo sfondo */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Stile del Testo */
.banner-text {
    color: #ffffff;
    font-family: 'Lato', sans-serif; /* O il font del tuo sito */
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 10px;
    letter-spacing: 2px;
    text-align: center;
}

/* Effetto Hover su Desktop */
@media (min-width: 992px) {
    .banner-box:hover img {
        transform: scale(1.05);
        filter: grayscale(0%); /* Torna a colori se vuoi, o resta B/N */
    }
}

/* --- RESPONSIVE MOBILE 2 CARD HOME --- */
@media (max-width: 767px) {
    .custom-banner-wrapper {
        flex-direction: column; /* Impila i banner uno sopra l'altro */
        gap: 30px;
    }

    .banner-text {
        font-size: 1.5rem; /* Testo più piccolo su smartphone */
        text-underline-offset: 5px;
    }

 
    
    .banner-box {
        aspect-ratio: 4 / 3; /* Un po' più alto su mobile per leggibilità */
    }
}

   /* Aggiunge spazio sotto la sezione dei due banner */
.custom-banner-wrapper {
    margin-top:  80px !important;
    
}
/* Linea sotto l'username Instagram */
@media (max-width: 767px) {
    .ig-promo__container,
    .ig-promo__content,
    .ig-promo__title,
    .ig-promo__text {
        text-align: center !important;
    }
}
/* Linea sotto l'username Instagram */
.ig-promo__link {
    text-decoration: underline !important;
    text-underline-offset: 6px !important; /* Regola la distanza della linea dal testo */
    text-decoration-thickness: 2px !important; /* Regola lo spessore della linea */
}

/* Effetto opzionale: la linea sfuma leggermente quando ci passi sopra col mouse */
.ig-promo__link:hover {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}


/* --- SEZIONE HERO STRATEGIA ENERGETICA --- */

/* Contenitore con l'immagine di sfondo */
.fuel-hero-wrapper {
    position: relative;
    width: 100%;
    min-height: 450px; /* Altezza del banner su desktop */
    background-size: cover;    /* L'immagine copre tutto lo spazio */
    background-position: center; /* Centra l'immagine */
    background-repeat: no-repeat;
    margin: 40px 0;
    display: flex;
}

/* Patina scura (overlay) per far leggere il testo sull'immagine a colori */
.fuel-hero-overlay {
    width: 100%;
    background: rgba(0, 0, 0, 0.45); /* Modifica 0.45 per farla più chiara o più scura */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* Contenitore del testo */
.fuel-hero-content {
    text-align: center;
    color: #ffffff;
    max-width: 850px; /* Evita che il testo vada troppo largo sugli schermi grandi */
}

/* Titolo */
.fuel-hero-title {
    font-family: 'Lato', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #ffffff;
}

/* Sottotitolo */
.fuel-hero-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 35px;
    font-weight: 400;
}

/* Stile del Bottone CTA */
.fuel-hero-btn {
    display: inline-block;
    background-color: #fff021; /* Il tuo giallo */
    color: #221f20;
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s;
}

/* Effetto Hover del Bottone */
.fuel-hero-btn:hover {
    background-color: #e6d81e; /* Giallo leggermente più scuro */
    transform: scale(1.05); /* Ingrandisce un po' al passaggio del mouse */
    color: #221f20;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 767px) {
    .fuel-hero-wrapper {
        min-height: 350px;
        margin: 20px 0;
    }

    .fuel-hero-title {
        font-size: 2rem; /* Testo più piccolo su smartphone */
        line-height: 1.2;
    }

    .fuel-hero-subtitle {
        font-size: 1rem;
        margin-bottom: 25px;
    }

    .fuel-hero-btn {
        padding: 12px 25px;
        font-size: 1rem;
    }
}

/* Spazio aggiuntivo sotto il banner "Strategia Energetica" (Desktop) */
.fuel-hero-wrapper {
    margin-bottom: 80px !important; /* Molto spazio su PC */
}

/* Spazio aggiuntivo sotto il banner "Strategia Energetica" (Mobile) */
@media (max-width: 767px) {
    .fuel-hero-wrapper {
        margin-bottom: 40px !important; /* Spazio ridotto e proporzionato su smartphone */
    }
} 


/* --- SOTTOMENU VERTICALE CENTRATO (Solo Desktop) --- */
@media (min-width: 992px) {
    
    /* 1. TRUCCO FONDAMENTALE: Trasformiamo ogni singola voce principale nella nuova "ancora" */
    #header .top-menu > li {
        position: relative !important;
    }

    /* 2. Posizioniamo il riquadro bianco centrato sotto la sua specifica voce */
    #header .top-menu .popover {
        position: absolute !important;
        top: calc(100% - 2px) !important; /* Evita micro-gap tra voce menu e pannello */
        left: 50% !important; /* Lo sposta a metà della parola */
        transform: translateX(-50%) !important; /* Lo centra matematicamente */
        
        /* Dimensioni del riquadro */
        min-width: 220px !important; 
        max-width: 280px !important;
        width: max-content !important; /* Se il testo è corto, il box si adatta */
        margin: 0 !important; /* Rimuove margini di default del tema */
        display: none !important; /* Nascosto di default */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 2.1 Mostra il popover al hover sulla voce principale o sul popover stesso */
    #header .top-menu > li:hover .popover,
    #header .top-menu .popover:hover {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
      pointer-events: auto !important;
    }

    /* 3. Forza le colonne a mettersi una sotto l'altra (come prima) */
    #header .top-menu .popover .top-menu[data-depth="1"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 10px 0 !important;
    }

    /* 4. Gestisce i singoli link per farli stare su una riga intera */
    #header .top-menu .popover .top-menu[data-depth="1"] > li {
        width: 100% !important;
        float: none !important;
        padding: 5px 20px !important;
    }
    
    /* 5. Allinea il testo a sinistra nel riquadro bianco, oppure metti 'center' se preferisci */
    #header .top-menu .popover a {
        text-align: left !important;
        width: 100% !important;
    }
}

/* --- INGRANDIMENTO ICONE MENU MOBILE (+ / -) --- */
@media (max-width: 767px) {
    
    /* 1. Ingrandisce visivamente la croce/meno */
    #cp_sidevertical_menu_top .top-menu li span .material-icons {
        font-size: 20px !important; /* Molto più grande del 15px originale */
    }

    /* 2. Allarga l'area touch invisibile per facilitare il click col dito */
    #cp_sidevertical_menu_top .top-menu li span.navbar-toggler {
        padding: 10px 20px !important; /* Crea un "bottone" trasparente gigante */
        margin-top: -15px !important; /* La riallinea al centro col testo */
        display: inline-block !important; 
    }
}

/* Rimuove il bordo dalle immagini dei prodotti */
.products .product-thumbnail img {
    border: none !important;
}


/* --- INGRANDISCE OTTICAMENTE L'IMMAGINE DI BASE --- */
.products .thumbnail-container .product-thumbnail img {
    width: 100% !important;
    height: auto !important;
    /* Questa è la magia: la ingrandisce dell'11% sempre */
    transform: scale(1.11) !important; 
    transition: transform 0.4s ease !important;
}

/* Aggiorniamo l'effetto hover su PC per farla zoomare ancora di più */

    .products .thumbnail-container:hover .product-thumbnail img {
        /* Al passaggio del mouse passa dall'11% al 18% */
        transform: scale(1.28) !important; 
    }


  /* Prevent visual upscaling which causes thumbnails to look blurry on HiDPI devices */
  .products .thumbnail-container .product-thumbnail img {
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    image-rendering: auto !important;
  }


    /* --- GESTIONE VIDEO DOPPIO (DESKTOP / MOBILE) --- */

/* Di base, nascondiamo il video mobile per chi naviga da PC */
.homepage-video.video-mobile {
    display: none !important;
}

/* Su smartphone (schermi sotto i 768px), invertiamo la situazione */
@media (max-width: 767px) {
    .homepage-video.video-desktop {
        display: none !important; /* Nasconde il video orizzontale pesante */
    }
    
    .homepage-video.video-mobile {
        display: block !important; /* Mostra il video verticale per cellulari */
        width: 100% !important;
        height: auto !important; /* Mantiene le proporzioni corrette */
        object-fit: cover;
    }
}