/* ==== CONFIG: padding globale del wrap (tranne l'area immagine) ==== */
.pbp-other-area {
  --pbp-pad: 16px;                 /* <— cambia qui se ti serve diverso */
  position: relative;
  padding: var(--pbp-pad);         /* padding per tutto il contenuto */
  border: none;                    /* il bordo lo disegniamo in ::after */
  border-radius: 8px;

  /* Sfondo prodotto */
  background-image: url("https://sleevemyseal.com/wp-content/uploads/Assets/Body/SfondoProdotto.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
}

/* BORDO SOPRA A TUTTO (non blocca i click) */
.pbp-other-area::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid #ccc;
  pointer-events: none;
  z-index: 999; /* sopra immagini/frecce */
}

/* Se avevi questa regola, puoi lasciarla: la gallery la sovrascriviamo sotto */
.pbp-other-area,
.pbp-other-area * {
  overflow: visible !important;
}

/* ==== AREA IMMAGINE: “bleed” ai bordi (L/R/T) ignorando il padding ==== */
.pbp-other-area .pbp-image-gallery-container {
  /* fai uscire l’area immagine dal padding del wrap */
  margin-top: calc(var(--pbp-pad) * -1) !important;
  margin-left: calc(var(--pbp-pad) * -1) !important;
  margin-right: calc(var(--pbp-pad) * -1) !important;
  /* allarga per compensare i margini negativi */
  width: calc(100% + var(--pbp-pad) * 2) !important;

  /* clip con i raggi del wrap in alto */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden !important;   /* fondamentale per non far sbordare l’immagine */
  position: relative;
  z-index: 1;                    /* sotto al bordo (::after) */
}

/* (se usi un sotto-wrap per la main image) */
.pbp-other-area .pbp-gallery-main-img-wrap {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* IMMAGINE: a filo nel wrap immagine (L/R/T) */
.pbp-other-area .pbp-gallery-main-img-wrap > img.pbp-gallery-main-img,
.pbp-other-area img.pbp-gallery-main-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  max-width: none !important;
  object-fit: contain;          /* usa 'cover' se vuoi riempire tagliando */
  object-position: left top;
}

/* FRECCE rientrate (così non vengono tagliate dal raggio) */
.pbp-other-area .pbp-image-gallery-container .pbp-gallery-arrow.prev { left: 8px !important; }
.pbp-other-area .pbp-image-gallery-container .pbp-gallery-arrow.next { right: 8px !important; }

/* Nascondi l'elemento come prima */
.pbp-current-id {
  display: none !important;
  visibility: hidden !important; /* opzionale, extra safety */
}



/* --- Opzioni extra --- */

/* Se vuoi che l’area immagine abbia arrotondamento anche in basso: */
/*
.pbp-other-area .pbp-image-gallery-container,
.pbp-other-area .pbp-gallery-main-img-wrap {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
*/

/* Se vuoi riempire anche l'altezza del contenitore immagine, croppando:
/*
.pbp-other-area img.pbp-gallery-main-img.is-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: left top !important;
}
*/