/* ─── Gallery ─── */
.gallery-wrapper { position: relative; margin-top: 16px; }
.gallery-container {
  display: flex; gap: 16px; overflow-x: auto; padding: 16px 0;
  scrollbar-width: none; /* Hide standard scrollbar for modern look, we use buttons/drag */
  scroll-behavior: smooth; cursor: grab;
}
.gallery-container::-webkit-scrollbar { display: none; }
.gallery-container:active { cursor: grabbing; scroll-behavior: auto; }
.gallery-img {
  height: 500px; aspect-ratio: 9/16; object-fit: contain;
  border-radius: 16px; border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); flex-shrink: 0;
  background: var(--card); padding: 8px;
}
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border);
  color: var(--fg); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: all 0.2s; z-index: 10; opacity: 0; pointer-events: none;
}
.gallery-wrapper:hover .gallery-nav { opacity: 1; pointer-events: auto; }
.gallery-nav:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-50%) scale(1.1); }
.gallery-nav.prev { left: -24px; }
.gallery-nav.next { right: -24px; }
@media(max-width: 768px) {
  .gallery-nav { display: none; } /* On mobile, users just swipe */
  .gallery-container { scrollbar-width: thin; scroll-behavior: auto; }
}