.image-popup-item img {
transform: scale(1);
transition: all 0.3s ease;
display: block;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.0);
}
.image-popup-item:hover img,
.image-popup-item:focus-visible img {
transform: scale(1.02) rotate(-1deg);
transition: all 0.3s ease;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}


/* Root overlay -------------------------------------------------- */
.image-gallery-popup {
position: fixed;
inset: 0;
z-index: 10000;
background: var(--wp--preset--color--cream);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease-in;
--ig-time: 300ms; 
}

.image-gallery-popup.ig-visible {
opacity: 1;
visibility: visible;
}

/* Content wrapper ---------------------------------------------- */
.ig-content {
max-width: calc(100vw - 120px);
max-height: calc(100vh - 160px);
text-align: center;
position: relative;
}

/* Image --------------------------------------------------------- */
.ig-image {
max-width: 100%;
max-height: 80vh;
width: auto;
height: auto;
object-fit: contain;
pointer-events: none;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Caption ------------------------------------------------------- */
.ig-caption {
/* color: #fff; */
font-size: 1rem;
margin-top: 0.75rem;
}

/* Buttons ------------------------------------------------------- */
.ig-btn {
position: absolute;
background: none;
border: 0;
width: 44px;
height: 44px;
padding: 0;
/* width: 3rem;
height: 3rem; */
cursor: pointer;
top: 50%;
transform: translateY(-50%);
color: var(--wp--preset--color--gray-dark);
font-weight: normal;
line-height: 1;
font-family: var(--wp--preset--font-family--adobe-garamond-pro);
}
.ig-btn:hover,
.ig-btn:focus-visible {
color: var(--wp--preset--color--red-light);
background-color: transparent;
font-weight: normal;
line-height: 1;
font-family: var(--wp--preset--font-family--adobe-garamond-pro);
}
/* .ig-btn:focus {
outline: 2px solid #fff;
outline-offset: 2px;
} */

/* Prev / next arrows ----------- */

.ig-next,
.ig-prev {
font-family: var(--wp--preset--font-family--adobe-garamond-pro);
font-size: 1.5em;
text-align: center;
}
.ig-prev  { left: 10px;  }
.ig-next  { right: 10px; }
.ig-next:hover,
.ig-prev:hover,
.ig-next:focus-visible,
.ig-prev:focus-visible {
font-size: 1.5em;
}

/* Close button (X) ----------- */
.ig-close       { 
top: 10px; 
right: 10px; 
transform: none;
font-size: 1.25em;
}
.ig-close:hover,
.ig-close:focus-visible {
font-size: 1.25em;
font-weight: normal;
}
/* .ig-close::before,
.ig-close::after {
content: '';
position: absolute;
inset: 1.3rem 0.25rem;
height: 0.2rem;
background: #fff;
} */
.ig-close::before { transform: rotate(45deg);  }
.ig-close::after  { transform: rotate(-45deg); }

/* Slide / fade transitions ------------------------------------- */
.ig-transition-out {
opacity: 0;
transform: translateX(-20px);
transition: opacity var(--ig-time, 300ms) ease,
            transform var(--ig-time, 300ms) ease;
}
.ig-transition-in {
opacity: 0;
transform: translateX(20px);
animation: igFadeSlide var(--ig-time, 300ms) forwards;
}

@keyframes igFadeSlide {
  to {
  opacity: 1;
  transform: translateX(0);
  }
}

/* Motion reduction --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ig-transition-out,
  .ig-transition-in,
  .image-gallery-popup {
  transition: none;
  animation: none;
  }
}