@media (max-width: 991.98px) {
 
 
  /* dot slider_tb — generati da JS sotto il flexslider */
  #slider-tb-dots {
    display: flex !important;
    justify-content: center;
    gap: 7px;
    padding: 8px 0;
  }

  /* ── Sezione 2: layer2 ── */
  #layer2-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #layer2-carousel::-webkit-scrollbar { display: none; }

 
  #layer2-dots {
    display: flex !important;
    justify-content: center;
    gap: 7px;
    padding: 8px 0;
  }

  /* ── Sezione 3: content2 ── */
  #content2-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #content2-carousel::-webkit-scrollbar { display: none; }

   .layer2-slide,
  .content2-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
    padding: 12px 16px;
  }
  #content2-dots {
    display: flex !important;
    justify-content: center;
    gap: 7px;
    padding: 8px 0;
  }

  /* dot style comune */
  .home-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #d8d8d8;
    transition: background .15s, transform .15s;
    cursor: pointer;
    display: inline-block;
  }
  .home-dot.active {
    background: #009FE3;
    transform: scale(1.25);
  }

  /* aggiustamenti layout generali */
  #layer2 {
    padding: 8px 0 !important;
    margin: 0 !important;
  }
  #content2 {
    padding: 8px 0 !important;
  }
  #content2 .pricing-price {
    height: auto !important;
    max-height: none !important;
  }
  #content2 .col-1 { display: none; }
}
 
@media (min-width: 992px) {
  #layer2-carousel,
  #content2-carousel {
    display: contents;  /* solo desktop */
  }

}

@media (max-width: 991.98px) {
  #layer2-carousel,
  #content2-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    width: 100%;
  }
  #layer2-carousel::-webkit-scrollbar,
  #content2-carousel::-webkit-scrollbar { display: none; }
    .heading-block h1 {
        font-size: 1.3rem !important;
        font-weight: 600 !important;
        text-align: center !important;
    }  
    .text-pictokit-newx {
        background-image: none;
        width: auto;
        display: inline-block; 
        padding: 0 0 0 0; 
        cursor: pointer;
        position: relative;
        top: 12px;
        background-color: #fff !important;
        box-shadow: transparent !important;
        border-radius: 0px;
    }    
    .h2 {
        font-size: 1.2rem  !important;
        font-weight: 300 !important;
        text-align: center;
    }    
    .h3 {
        font-size: 1.1rem !important;
        font-weight: 200 !important;
        text-align: center !important;
        border-radius: 0px;        
     }  

 

    .feature-box a .h3 {
        font-size: 1.0rem !important;
    }
}

/* Desktop: layer2-carousel si comporta come una row */
#layer2-carousel {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* Ogni slide su desktop occupa 1/3 (come col-lg-4) */
@media (min-width: 992px) {
  .layer2-slide {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .shadow-smx {
    box-shadow: 0 !important; 
    }  
}

/* Mobile: carousel orizzontale */
@media (max-width: 991.98px) {
  #layer2-carousel {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #layer2-carousel::-webkit-scrollbar { display: none; }

  .layer2-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 12px 16px;
    box-sizing: border-box;
  }
}
#content2-carousel {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

@media (min-width: 992px) {
  .content2-slide {
    flex: 0 0 25%;      /* 4 colonne desktop: col-lg-3 */
    max-width: 25%;
    padding: 0 15px;
    box-sizing: border-box;
  }
}

@media (max-width: 991.98px) {
  #content2-carousel {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #content2-carousel::-webkit-scrollbar { display: none; }

  .content2-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 12px 16px;
    box-sizing: border-box;
  }
}

@media (max-width: 991.98px) {

  /* Stabilizza il fixed positioning */
  html, body {
    overflow-x: hidden;
    /* NO overflow-y: hidden — romperebbe lo scroll */
  }

  body {
    position: relative;
  }

  /* Preloader: forza via immediatamente su mobile senza aspettare il JS */
  #preloader {
    display: none !important;
  }

  /* Revolution slider: assicurati che non occupi spazio */
  #rev_slider_ishop_wrapper,
  #rev_slider_ishop {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Wrapper senza trasformazioni che rompono il fixed */
  #wrapper {
    transform: none !important;
    will-change: auto !important;
  }
}
@media (max-width: 991.98px) {

  #slider_tb {
    padding: 0 !important;
    padding-top: 10px !important;
    display: block !important;
  }

  /* Il flexslider azzera i bordi */
  #slider_tb .fslider,
  #slider_tb .flexslider {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Il container slide occupa l'altezza fissa */
  #slider_tb, .slide {
    height: 400px;
    position: relative;
  }

  /* L'<a> riempie tutta la slide */
  #slider_tb .slide a {
    display: block !important;
    width: 100%;
     
    position: relative;
  }

  /* L'immagine riempie l'<a> */
  #slider_tb .slide img {
    width: 500px;
    /*height: 420px;*/
    object-fit: cover;
    display: block;
    background-position: center bottom;
  }

  /* L'overlay si posiziona sopra l'immagine — 
     nota: le classi originali hanno 'x' spurie quindi 
     non funzionano; se vuoi il testo visibile 
     devi usare le classi corrette o aggiungerne di nuove */
  #slider_tb .slide .bg-overlay,
  #slider_tb .slide .bg-overxlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    padding: 8px 12px;
  }

  #slider_tb .slide .bg-overlay-content,
  #slider_tb .slide .bg-overlay-cxontent {
    display: flex;
    justify-content: center;
  }

  #slider_tb .slide .h3 {
    margin: 0;
    font-size: 0.9rem;
  }
}