/* ===========================
   TUO CSS ORIGINALE
   =========================== */

/* Gerarchia di posizionamento per le freccette */
.pbp-image-gallery-container {
  position: relative !important;
}

/* Stile e dimensione delle freccette */
.pbp-image-gallery-container .pbp-gallery-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  /* Azzeri padding/min-width di default dei button */
  padding: 0 !important;
  min-width: 0 !important;
  box-sizing: content-box !important;

  /* Sfondo bianco semitrasparente */
  background-color: rgba(255,255,255,0.8) !important;
  background-image: none !important;

  /* Colore freccia */
  color: #1C75BC !important;
  font-weight: 700 !important;
  /* Centra verticalmente il simbolo dentro il box */
  line-height: 20px !important;
  text-align: center !important;

  /* Shape rettangolare con bordi arrotondati */
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;

  /* Transizioni su opacità e scala */
  opacity: 0.7 !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;

  z-index: 10 !important;
}

/* Spostamento orizzontale all'esterno dell'immagine */
.pbp-image-gallery-container .pbp-gallery-arrow.prev {
  left: -10px !important;
}
.pbp-image-gallery-container .pbp-gallery-arrow.next {
  right: -10px !important;
}

/* Hover: piena opacità + leggero ingrandimento */
.pbp-image-gallery-container .pbp-gallery-arrow:hover {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* Dots sotto l’immagine: tondi, con active leggermente più grande e colore differente */
/* 1) Container dots centrato orizzontalmente */
.pbp-image-gallery-area .pbp-gallery-dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 12px !important;
  margin-bottom: 5px !important;
  padding: 0 !important;
  gap: 14px !important;
}

/* 2) Reset e stili base dei dots */
.pbp-image-gallery-area .pbp-gallery-dots button.pbp-gallery-dot,
.pbp-image-gallery-area .pbp-gallery-dots .pbp-gallery-dot {
  /* Reset dell’aspetto nativo */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  cursor: pointer !important;

  /* Forma circolare e dimensioni */
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-sizing: content-box !important;

  /* Colore di default: blu */
  background-color: #1C75BC !important;

  /* Transizioni */
  transition: background-color 0.3s ease, transform 0.3s ease !important;
}

/* 3) Dot attivo: arancione + leggero ingrandimento */
.pbp-image-gallery-area .pbp-gallery-dots button.pbp-gallery-dot.active,
.pbp-image-gallery-area .pbp-gallery-dots .pbp-gallery-dot.active {
  background-color: #F6A800 !important;
  transform: scale(1.22) !important;
}

/* 4) Hover sui dots non attivi */
.pbp-image-gallery-area .pbp-gallery-dots button.pbp-gallery-dot:not(.active):hover,
.pbp-image-gallery-area .pbp-gallery-dots .pbp-gallery-dot:not(.active):hover {
  background-color: #F6A800 !important;
  transform: scale(1.13) !important;
}

/* fa vedere il puntatore “a mano” quando si passa sopra l’immagine */
.pbp-image-gallery-area .pbp-gallery-main-img {
  cursor: pointer !important;
}

/* ===========================
   FIX: IMMAGINE A FILO DENTRO IL WRAP (L/R/T)
   =========================== */

/* Wrap: zero padding/margini e niente micro-gap */
.pbp-gallery-main-img-wrap {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  line-height: 0 !important;         /* elimina spazio sotto img inline */
  box-sizing: border-box !important;
  display: block !important;
  overflow: hidden !important;        /* taglia eventuale eccedenza */
}

/* Img: coincide con i lati sinistro/destro del wrap e aderisce in alto */
.pbp-gallery-main-img-wrap > img.pbp-gallery-main-img,
img.pbp-gallery-main-img {
  display: block !important;          /* niente spazio da inline img */
  width: 100% !important;             /* combacia con L/R del wrap */
  height: auto !important;            /* mantieni proporzioni */
  margin: 0 !important;               /* zero margini */
  padding: 0 !important;              /* zero padding */
  border: 0 !important;               /* nessun bordo */
  max-width: none !important;
  object-fit: contain !important;     /* nessun taglio; usa 'cover' se vuoi riempire */
  object-position: left top !important; /* aderente al bordo superiore/sinistro */
}

/* (opzionale) Se vuoi che riempia anche l'altezza (croppando):
.pbp-gallery-main-img-wrap > img.pbp-gallery-main-img.is-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: left top !important;
}
*/

/* Contenitori diretti della gallery: nessun padding/gap che faccia sembrare bordi */
.pbp-image-gallery-container,
.pbp-image-gallery-area {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.pbp-image-gallery-area {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* Frecce rientrate così non sembrano “spazio laterale” dell’immagine */
.pbp-image-gallery-container .pbp-gallery-arrow.prev { left: 8px !important; }
.pbp-image-gallery-container .pbp-gallery-arrow.next { right: 8px !important; }

/* DEBUG VISIVO (commentato): attivalo se vuoi verificare la coincidenza dei bordi */
/*
.pbp-gallery-main-img-wrap { outline: 2px dashed magenta !important; }
.pbp-gallery-main-img { outline: 2px solid lime !important; }
*/