.product-gallery { min-width: 0; display: grid; gap: 14px; }
.product-gallery-stage { position: relative; min-width: 0; }
.product-gallery-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.product-gallery-track::-webkit-scrollbar { display: none; }
.product-gallery-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.product-gallery-slide img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; user-select: none; }
.product-gallery-slide img[src*="/products/studio/"] { padding: clamp(24px, 4vw, 52px); }
.product-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--navy); cursor: pointer; box-shadow: 0 3px 12px #0000000d;
  font: 32px/1 Arial, sans-serif;
}
.product-gallery-arrow.previous { left: 12px; }
.product-gallery-arrow.next { right: 12px; }
.product-gallery-arrow:disabled { opacity: .3; cursor: default; }
.product-gallery-count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 20px; background: var(--paper); color: var(--ink); font-size: .75rem; font-variant-numeric: tabular-nums; pointer-events: none; }
.product-gallery-thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 3px; }
.product-gallery-thumbs button { flex: 0 0 72px; width: 72px; height: 72px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.product-gallery-thumbs button[aria-current="true"] { border: 2px solid var(--navy); }
.product-gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.product-gallery [hidden] { display: none; }
@media (max-width: 600px) {
  .product-gallery { gap: 10px; }
  .product-gallery-arrow.previous { left: 8px; }
  .product-gallery-arrow.next { right: 8px; }
  .product-gallery-thumbs button { flex-basis: 60px; width: 60px; height: 60px; }
}