/* ---------- 图片灯箱 ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(43, 35, 24, 0.95);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

/* 关闭按钮 */
.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 239, 230, 0.1);
  border: 1px solid rgba(245, 239, 230, 0.2);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.lightbox__close:hover {
  background: rgba(245, 239, 230, 0.15);
  transform: rotate(90deg);
}

.lightbox__close svg {
  width: 22px;
  height: 22px;
}

/* 图片容器 */
.lightbox__content {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: lightboxZoomIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

@keyframes lightboxZoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 上一张/下一张按钮 */
.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(245, 239, 230, 0.1);
  border: 1px solid rgba(245, 239, 230, 0.2);
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 10;
  backdrop-filter: blur(4px);
}

.lightbox__prev {
  left: 2rem;
}

.lightbox__next {
  right: 2rem;
}

.lightbox__prev:hover,
.lightbox__next:hover {
  background: rgba(245, 239, 230, 0.2);
}

.lightbox__prev:hover {
  transform: translateY(-50%) translateX(-4px);
}

.lightbox__next:hover {
  transform: translateY(-50%) translateX(4px);
}

.lightbox__prev svg,
.lightbox__next svg {
  width: 24px;
  height: 24px;
}

/* 只有一张图片时隐藏切换按钮 */
.lightbox[data-single-image="true"] .lightbox__prev,
.lightbox[data-single-image="true"] .lightbox__next {
  display: none;
}

/* 加载状态 */
.lightbox__img.is-loading {
  opacity: 0.5;
}

/* 产品图册添加放大游标提示 */
.pdp-cell[data-lightbox-trigger] {
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}

.pdp-cell[data-lightbox-trigger]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(43, 35, 24, 0);
  transition: background 0.3s ease;
  pointer-events: none;
}

.pdp-cell[data-lightbox-trigger]:hover::after {
  background: rgba(43, 35, 24, 0.05);
}

.pdp-cell[data-lightbox-trigger] img {
  transition: transform 0.4s ease;
}

.pdp-cell[data-lightbox-trigger]:hover img {
  transform: scale(1.05);
}

/* 移动端优化 */
@media (max-width: 768px) {
  .lightbox__close {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
  }
  
  .lightbox__close svg {
    width: 20px;
    height: 20px;
  }
  
  .lightbox__prev,
  .lightbox__next {
    width: 44px;
    height: 44px;
  }
  
  .lightbox__prev {
    left: 1rem;
  }
  
  .lightbox__next {
    right: 1rem;
  }
  
  .lightbox__prev svg,
  .lightbox__next svg {
    width: 22px;
    height: 22px;
  }
  
  .lightbox__content {
    max-width: 95vw;
    max-height: 85vh;
  }
  
  .lightbox__img {
    max-height: 85vh;
  }
}

/* 小屏幕设备 */
@media (max-width: 480px) {
  .lightbox__prev,
  .lightbox__next {
    width: 40px;
    height: 40px;
    background: rgba(245, 239, 230, 0.15);
  }
  
  .lightbox__prev svg,
  .lightbox__next svg {
    width: 20px;
    height: 20px;
  }
}