/* Shared screenshot gallery + lightbox styles (Infinitx product pages) */

.gallery { position: relative; }

/* hide scrollbar — navigation is via arrows */
.shots-row {
  scroll-behavior: smooth;
  scrollbar-width: none;            /* Firefox */
}
.shots-row::-webkit-scrollbar { display: none; }   /* Chrome / Safari */

.shots-row img {
  width: 220px; flex: 0 0 auto; border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.10);
  scroll-snap-align: center;
  cursor: zoom-in;
  transition: transform .18s ease;
}
.shots-row img:hover { transform: translateY(-4px); }

/* prev / next arrows */
.g-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(18,16,28,0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; transition: background .15s ease, opacity .15s ease;
}
.g-arrow:hover { background: rgba(40,38,62,0.9); }
.g-prev { left: -8px; }
.g-next { right: -8px; }

@media (max-width: 560px) {
  .g-arrow { width: 40px; height: 40px; font-size: 22px; }
  .g-prev { left: 2px; } .g-next { right: 2px; }
}

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8,6,16,0.92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 90vw; max-height: 86vh; border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.65);
}
.lb-btn {
  position: absolute; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25); color: #fff;
  border-radius: 999px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background .15s ease; z-index: 2;
}
.lb-btn:hover { background: rgba(255,255,255,0.26); }
.lb-close { top: 20px; right: 20px; width: 46px; height: 46px; font-size: 28px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 32px; }
.lb-prev { left: 18px; } .lb-next { right: 18px; }

@media (max-width: 560px) {
  .lb-prev, .lb-next { width: 44px; height: 44px; font-size: 26px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
}