//
// Product Images Fancybox
// ----------------------------
//
@import "../../global";

// Fancybox customizations for product images
.fancybox__container {
  // Custom backdrop
  --fancybox-bg: rgb(0 0 0 / 90%);

  // Custom spacing
  --fancybox-spacing: 1rem;

  // Custom border radius
  --fancybox-border-radius: 0.5rem;
}

// Product image container
.product-images {
  .field__item {
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    margin-bottom: 1rem;

    &:hover {
      transform: scale(1.02);
    }
  }
}
