/* --- hidden scrollbar for slider strips --- */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* --- gallery slide sizes --- */
.shot-portrait {
  flex-shrink: 0;
  width: 180px;
}
.shot-landscape {
  flex-shrink: 0;
  width: 300px;
}
@media (min-width: 640px) {
  .shot-portrait { width: 210px; }
  .shot-landscape { width: 380px; }
}
@media (min-width: 1024px) {
  .shot-portrait { width: 235px; }
  .shot-landscape { width: 430px; }
}

/* --- screenshot image corners --- */
.shot-img {
  border-radius: 22px;
}

/* --- gallery device tabs --- */
.gal-tab {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1.125rem;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.1);
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gal-tab:hover {
  background: rgba(148, 163, 184, 0.22);
  color: #334155;
}
.dark .gal-tab {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}
.dark .gal-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}
.gal-tab-active,
.gal-tab-active:hover,
.dark .gal-tab-active,
.dark .gal-tab-active:hover {
  background: #4f6ef7;
  border-color: #4f6ef7;
  color: #fff;
  box-shadow: 0 8px 24px rgba(79, 110, 247, 0.35);
}

/* --- gallery arrows --- */
.gal-arrow {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.95);
  color: #334155;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.2s ease;
}
.dark .gal-arrow {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(12, 18, 36, 0.9);
  color: #fff;
}
.gal-arrow:hover,
.dark .gal-arrow:hover {
  background: #4f6ef7;
  border-color: #4f6ef7;
  color: #fff;
}
.gal-arrow-left {
  left: 0;
  transform: translate(-16px, -50%);
}
.gal-arrow-right {
  right: 0;
  transform: translate(16px, -50%);
}
@media (min-width: 640px) {
  .gal-arrow { display: flex; }
}