/* Product image gallery. No visible text; icon-only controls. */
.gal { display: grid; gap: 12px; }
.gal-main { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 5; cursor: zoom-in; touch-action: pan-y; }
.gal-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gal-img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.gal-lens { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 200%; background-position: 50% 50%; opacity: 0; pointer-events: none; transition: opacity .12s; }
.gal-lens.on { opacity: 1; }
.gal-thumbs { list-style: none; margin: 0; padding: 2px; display: flex; gap: 10px; overflow-x: auto; }
.gal-thumbs li { flex: 0 0 auto; }
.gal-thumb { display: block; padding: 0; width: 72px; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.gal-thumb img { display: block; width: 100%; height: auto; }
.gal-thumb[aria-current="true"] { border-color: var(--text); }
.gal-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 900px) {
  .gal { grid-template-columns: 84px 1fr; align-items: start; }
  .gal-main { grid-column: 2; grid-row: 1; }
  .gal-thumbs { grid-column: 1; grid-row: 1; flex-direction: column; overflow: visible; }
}
.gal-lb { position: fixed; inset: 0; z-index: 1000; background: #fff; }
.gal-lb[hidden] { display: none; }
.gal-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; user-select: none; }
.gal-lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: center; will-change: transform; -webkit-user-drag: none; }
.gal-lb.zoomed .gal-stage { cursor: grab; }
.gal-lb:not(.zoomed) .gal-lb-img { cursor: zoom-in; }
.gal-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--text); color: #fff; cursor: pointer; }
.gal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gal-close { top: 16px; right: 16px; }
.gal-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.gal-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { .gal-lens { transition: none; } }