/* =========================================
   PREMIUM PRODUCT GALLERY
========================================= */

.gallery-column {
  position: relative;

  display: flex;

  flex-direction: column;

  gap: 18px;

  width: 100%;

  max-width: 620px;
}

/* glow */

.gallery-column::before {
  content: "";

  position: absolute;

  width: 340px;
  height: 340px;

  top: -80px;
  left: -80px;

  background: radial-gradient(rgba(112, 26, 117, 0.12), transparent 72%);

  filter: blur(40px);

  z-index: 0;

  pointer-events: none;
}

/* =========================================
   MAIN IMAGE
========================================= */

.main-image-container {
  position: relative;

  z-index: 2;

  width: 100%;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  border-radius: 34px;

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.98),
    rgba(248, 244, 248, 0.96)
  );

  border: 1px solid rgba(255, 255, 255, 0.72);

  box-shadow: 0 18px 50px rgba(34, 12, 34, 0.08);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: zoom-in;
}

/* IMAGE */

.main-image-container img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: inherit;

  transition:
    transform 0.45s ease,
    opacity 0.3s ease;
}

/* HOVER */

.main-image-container:hover img {
  transform: scale(1.03);
}

/* =========================================
   THUMBNAILS
========================================= */

.thumbnail-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 14px;

  width: 100%;
}

/* CARD */

.thumb-btn {
  position: relative;

  width: 100%;

  aspect-ratio: 1;

  overflow: hidden;

  border-radius: 20px;

  border: 2px solid transparent;

  background: #ffffff;

  padding: 0;

  cursor: pointer;

  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* shimmer */

.thumb-btn::before {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.32),
    transparent
  );

  transform: translateX(-100%);

  transition: 0.7s ease;

  z-index: 2;
}

.thumb-btn:hover::before {
  transform: translateX(100%);
}

/* hover */

.thumb-btn:hover {
  transform: translateY(-3px);
}

/* active */

.thumb-btn.active {
  border-color: #603763;

  box-shadow:
    0 0 0 4px rgba(112, 26, 117, 0.1),
    0 10px 30px rgba(112, 26, 117, 0.18);
}

/* IMG */

.thumb-btn img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

/* =========================================
   FULLSCREEN PREVIEW
========================================= */

.fullscreen-preview {
  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  background: rgba(0, 0, 0, 0.94);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  z-index: 999999;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 40px;

  cursor: zoom-out;

  animation: fadePreview 0.24s ease;
}

.fullscreen-preview.active {
  display: flex;
}

/* image */

.fullscreen-preview img {
  max-width: 92%;

  max-height: 92vh;

  border-radius: 28px;

  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);
}

/* anim */

@keyframes fadePreview {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1024px) {
  .gallery-column {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .thumbnail-grid {
    grid-template-columns: repeat(4, 1fr);

    gap: 10px;
  }

  .thumb-btn {
    border-radius: 14px;
  }

  .main-image-container {
    border-radius: 24px;
  }
}

@media (max-width: 480px) {
  .gallery-column {
    gap: 12px;
  }

  .thumbnail-grid {
    gap: 8px;
  }

  .main-image-container {
    border-radius: 20px;
  }
}