/* Item photo gallery: public /shop/{slug} page and the customer shop's photo viewer.
   Swipe is native horizontal scroll-snap; item-gallery.js only syncs thumbs/counter. */
.ig { position: relative; }
.ig-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; aspect-ratio: 1 / 1; border-radius: 1rem; border: 1px solid var(--card-border, #e5e7eb); background: #f3f4f6; scrollbar-width: none; }
.ig-track::-webkit-scrollbar { display: none; }
.ig-track:focus { outline: none; }
.ig-track:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.ig-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; display: block; }
.ig-count { position: absolute; right: 0.6rem; top: 0.6rem; background: rgba(17, 24, 39, 0.72); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; }
.ig-nav { position: absolute; top: calc(50% - 1.1rem); width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 1px solid #d1d5db; background: #fff; color: #111827; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ig-nav[disabled] { opacity: 0.35; cursor: default; }
.ig-prev { left: 0.6rem; }
.ig-next { right: 0.6rem; }
@media (hover: none) { .ig-nav { display: none; } }
.ig-thumbs { display: flex; gap: 0.6rem; margin-top: 0.85rem; flex-wrap: wrap; }
.ig-thumb { width: 4.25rem; height: 4.25rem; border-radius: 0.5rem; overflow: hidden; border: 2px solid transparent; outline: 1px solid var(--card-border, #e5e7eb); background: none; padding: 0; cursor: pointer; }
.ig-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-thumb.is-active { border-color: var(--court-green, #16a34a); }

/* Viewer (customer shop): a plain dialog around the same gallery. */
.ig-viewer { position: fixed; inset: 0; z-index: 1900; background: rgba(17, 24, 39, 0.6); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ig-viewer-panel { background: #fff; border-radius: 0.75rem; width: 100%; max-width: 32rem; padding: 1rem; }
.ig-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.ig-viewer-head h2 { margin: 0; font-size: 1rem; font-weight: 700; color: #111827; }
.ig-viewer-close { border: 0; background: none; font-size: 1.25rem; line-height: 1; color: #4b5563; cursor: pointer; padding: 0.25rem 0.5rem; }