/* NB4 Media Catalog — rebuilt 2.0.0
   - Caroselli affidabili con CSS scroll-snap + variabili CSS
   - Frecce carosello tematizzabili via Global Colors Elementor (fallback sicuri)
   - Lightbox: overlay nero + frecce/X bianche con sfondo nero semitrasparente (forzato)
   - Nessun inline-style richiesto; riduzione conflitti con temi/Elementor
*/
:root {
  /* Carosello */
  --nb4-car-cols: 3;
  --nb4-gap: 16px;
  --nb4-anim-duration: 400ms;

  /* Frecce carosello (valori base; Elementor può sovrascrivere) */
  --nb4-nav-size: 36px;
  --nb4-nav-radius: 999px;
  --nb4-nav-bg: rgba(0,0,0,.65);
  --nb4-nav-color: #fff;

  /* Lightbox: valori FISSI come da richiesta */
  --nb4-lb-nav-size: 44px;
  --nb4-lb-nav-radius: 999px;
  --nb4-lb-nav-bg: rgba(0,0,0,.55);
  --nb4-lb-nav-color: #fff;
  --nb4-lb-overlay: rgba(0,0,0,.9);
  --nb4-lb-close-bg: rgba(0,0,0,.55);
  --nb4-lb-close-color: #fff;
}

/* =================== CAROSELLO =================== */
.nb4-gal-carousel, .nb4-el-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  --nb4-item-w: calc((100% - (var(--nb4-gap) * (var(--nb4-car-cols) - 1))) / var(--nb4-car-cols));
}

.nb4-gal-carousel .nb4-track,
.nb4-el-carousel .nb4-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--nb4-item-w);
  gap: var(--nb4-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; /* evita taglio shadow */
}

.nb4-gal-carousel .nb4-track > *,
.nb4-el-carousel .nb4-track > * {
  scroll-snap-align: start;
  border-radius: 12px;
}

/* --- HIDE HORIZONTAL SCROLLBAR (caroselli) --- */
.nb4-gal-carousel .nb4-track,
.nb4-el-carousel .nb4-track{
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}
.nb4-gal-carousel .nb4-track::-webkit-scrollbar,
.nb4-el-carousel .nb4-track::-webkit-scrollbar{
  display:none; width:0; height:0;
}

/* --- NAV FRECCE (agli estremi + safe per drag) --- */
.nb4-nav{
  position:absolute;
  top:50%;
  left:0; right:0;                 /* estende su tutta la larghezza */
  transform:translateY(-50%);      /* compatibile ovunque */
  display:flex;
  justify-content:space-between;   /* freccia sx / freccia dx agli estremi */
  align-items:center;
  padding:0 6px;                   /* piccolo gutter */
  z-index:3;
  pointer-events:none;             /* non blocca lo swipe/drag sotto */
}
.nb4-nav button{
  pointer-events:auto;             /* i bottoni restano cliccabili */
  appearance:none;
  border:none;
  width: var(--nb4-nav-size);
  height: var(--nb4-nav-size);
  border-radius: var(--nb4-nav-radius);

  /* Fallback NB4 */
  background: var(--nb4-nav-bg);
  color: var(--nb4-nav-color);
  /* Override Elementor (se definiti) */
  background: var(--e-global-color-secondary, var(--nb4-nav-bg));
  color: var(--e-global-color-primary, var(--nb4-nav-color));

  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  line-height:1;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.nb4-nav button[disabled]{ opacity:.35; cursor:default; }
.nb4-nav button:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.nb4-nav .prev, .nb4-nav .next{ user-select:none; }

/* =================== LIGHTBOX =================== */
.nb4-lightbox {
  position: fixed; inset: 0;
  display: none;
  background: var(--nb4-lb-overlay); /* overlay nero fisso */
  align-items: center; justify-content: center;
  z-index: 99999;
}
.nb4-lightbox.is-open { display: flex; }
.nb4-lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 8px; }

/* Bottone chiudi (X) — sempre bianco con sfondo nero semitrasparente */
.nb4-lightbox .nb4-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 999px;
  border: none;
  background: var(--nb4-lb-close-bg) !important;
  color: var(--nb4-lb-close-color) !important;

  /* centratura perfetta della X */
  display: grid;
  place-items: center;
  line-height: 1;
  padding: 0;
  text-align: center;

  font-size: 20px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.nb4-lightbox .nb4-close:focus-visible{
  outline:2px solid rgba(255,255,255,.85); outline-offset:2px;
}

/* [Compat] Wrapper opzionale .nb4-lb-nav: se presente, gestisce spacing e pass-through */
.nb4-lightbox .nb4-lb-nav{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none; /* pass-through, i bottoni riattivano gli eventi */
  padding: 0 8px;
}
.nb4-lightbox .nb4-lb-nav button{
  pointer-events:auto;
}

/* Frecce lightbox — stile comune (sia con wrapper che senza) */
.nb4-lightbox .nb4-lb-nav button,
.nb4-lightbox > .nb4-arrow{
  appearance:none;
  border:none;
  width: var(--nb4-lb-nav-size);
  height: var(--nb4-lb-nav-size);
  border-radius: var(--nb4-lb-nav-radius);
  background: var(--nb4-lb-nav-bg) !important;
  color: var(--nb4-lb-nav-color) !important;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; line-height:1;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* POSIZIONAMENTO FRECCE (markup di lightbox.js: bottoni figli diretti di .nb4-lightbox) */
.nb4-lightbox > .nb4-arrow{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  /* reset totale per evitare regole aggressive esterne */
  left: auto !important;
  right: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  z-index: 2;
}
.nb4-lightbox > .nb4-prev{
  left: 12px !important;
  right: auto !important;
  inset-inline-start: 12px !important;
  inset-inline-end: auto !important;
}
.nb4-lightbox > .nb4-next{
  right: 12px !important;
  left: auto !important;
  inset-inline-end: 12px !important;
  inset-inline-start: auto !important;
}

/* Margini quando c'è il wrapper .nb4-lb-nav (non usato da lightbox.js ma supportato) */
.nb4-lightbox .nb4-lb-prev { margin-left: 6px; }
.nb4-lightbox .nb4-lb-next { margin-right: 6px; }

.nb4-lightbox .nb4-lb-nav button:focus-visible,
.nb4-lightbox > .nb4-arrow:focus-visible{
  outline:2px solid rgba(255,255,255,.85); outline-offset:2px;
}

/* Contatore lightbox (opzionale) */
.nb4-lightbox .nb4-counter{
  position:absolute;
  bottom:12px; left:50%;
  transform:translateX(-50%);
  background: rgba(0,0,0,.35);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font: 500 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Utility */
.nb4-hidden { display:none !important; }

/* =================== PRODOTTI CORRELATI =================== */
.nb4-related-grid{
  display: grid;
  gap: 16px;
  /* Le colonne vengono impostate:
     - dal widget via CSS di Elementor
     - oppure inline dal render (fallback) */
}