/* Product gallery lightbox - fullscreen image viewer with zoom/pan */

.cp-product-gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  animation: pgl-fade-in var(--fast) ease-out;

  /* ---- Image (fit mode) ---- */
  .lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    cursor: zoom-in;
    display: block;
  }

  /* ---- Image (zoom mode) ---- */
  &.is-zoomed .lightbox-img {
    max-width: none;
    max-height: none;
    cursor: grab;
    touch-action: none;
  }

  &.is-zoomed.is-dragging .lightbox-img {
    cursor: grabbing;
  }

  /* ---- Toolbar buttons (close + zoom) ---- */
  .lightbox-toolbar {
    position: absolute;
    top: var(--md);
    right: var(--md);
    display: flex;
    gap: var(--xs);
    z-index: 1;
  }

  .lightbox-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    transition: background var(--fast);
  }

  .lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  /* Toggle zoom icon visibility */
  .lightbox-zoom .zoom-in-icon { display: block; }
  .lightbox-zoom .zoom-out-icon { display: none; }

  &.is-zoomed .lightbox-zoom .zoom-in-icon { display: none; }
  &.is-zoomed .lightbox-zoom .zoom-out-icon { display: block; }

  /* ---- Navigation arrows ---- */
  .lightbox-prev,
  .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    transition: background var(--fast);
    z-index: 1;
  }

  .lightbox-prev { left: var(--md); }
  .lightbox-next { right: var(--md); }

  .lightbox-prev:hover,
  .lightbox-next:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .lightbox-prev svg,
  .lightbox-next svg {
    width: 24px;
    height: 24px;
    display: block;
  }

  /* Hide nav in zoom mode */
  &.is-zoomed .lightbox-prev,
  &.is-zoomed .lightbox-next {
    display: none;
  }

  /* ---- Caption ---- */
  .lightbox-caption {
    position: absolute;
    bottom: var(--md);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    padding: var(--xs) var(--sm);
    border-radius: var(--radius);
    font-size: var(--small);
    color: var(--text-2);
    font-style: italic;
    text-align: center;
    max-width: 80vw;
    pointer-events: none;
  }

  /* Hide caption in zoom mode */
  &.is-zoomed .lightbox-caption {
    display: none;
  }

  @media (max-width: 480px) {
    .lightbox-toolbar {
      top: var(--sm);
      right: var(--sm);
    }

    .lightbox-prev { left: var(--xs); }
    .lightbox-next { right: var(--xs); }

    .lightbox-caption {
      bottom: var(--sm);
    }
  }
}

/* Cursor hint on gallery images */
.gallery-item[data-type="image"] {
  cursor: zoom-in;
}


@keyframes pgl-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}