/* photos — a record's photos: one strip that snaps, ‹ › and a counter, thumbs, the whole screen on a click. */

.product-gallery { grid-area: gallery; min-width: 0; }

/* The gallery: one strip of photos that snaps — a swipe on a phone, the
   arrows, the thumbs and the keys elsewhere move the same strip. */

.product-gallery__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--hover-wash);
}

.product-gallery__track {
  display: flex; height: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}

.product-gallery__track::-webkit-scrollbar { display: none; }

.product-gallery__track:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: -2px; }

.product-gallery__slide { flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: start; cursor: zoom-in; }

.product-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-gallery--contain .product-gallery__stage { background: var(--plate, #fff); }

.product-gallery--contain .product-gallery__slide img { object-fit: contain; padding: 1.5rem; }

.product-gallery__arrow,
.product-gallery__zoom,
.product-gallery__count {
  position: absolute;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
}

.product-gallery__arrow {
  top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 3.5rem; padding: 0; cursor: pointer;
  opacity: 0; transition: opacity .15s ease;
}

/* The arrows over the photo: the chevron alone, white and half see-through, a soft shadow to
   stay readable on a light photo — no disc to cover the picture. */

.product-gallery__arrow.product-gallery__arrow { border: 0; background: none; color: #fff; }

.product-gallery__arrow svg { width: 2rem; height: 2rem; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .55)); }

.product-gallery__arrow--prev { left: .8rem; }

.product-gallery__arrow--next { right: .8rem; }

.product-gallery__stage:hover .product-gallery__arrow,
.product-gallery__stage:focus-within .product-gallery__arrow { opacity: .75; }

.product-gallery__stage .product-gallery__arrow:hover,
.product-gallery__stage .product-gallery__arrow:focus-visible { opacity: 1; }

.product-gallery__arrow:disabled { opacity: 0 !important; pointer-events: none; }

.product-gallery__zoom:hover { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }

.product-gallery__count { right: .8rem; bottom: .8rem; padding: .2rem .65rem; font-size: .8rem; font-variant-numeric: tabular-nums; }

.product-gallery__zoom { left: .8rem; bottom: .8rem; width: 2.3rem; height: 2.3rem; padding: 0; cursor: pointer; }

/* Over the photo, not on it: the zoom and the counter are a light veil until the hand is near. */

.product-gallery__zoom, .product-gallery__count {
  border-color: transparent; background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: .7; transition: opacity .15s ease;
}

.product-gallery__zoom svg { width: 1.05rem; height: 1.05rem; }

.product-gallery__stage:hover .product-gallery__zoom, .product-gallery__zoom:focus-visible,
.product-gallery__stage:hover .product-gallery__count { opacity: 1; }

.product-gallery__thumbs { display: flex; gap: .5rem; margin-top: .7rem; overflow-x: auto; scrollbar-width: none; padding: 2px; }

.product-gallery__thumb {
  flex: none; width: 4.5rem; height: 4.5rem; padding: 0;
  border: 2px solid transparent; border-radius: var(--radius-small);
  overflow: hidden; background: var(--hover-wash); cursor: pointer;
}

.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-gallery--contain .product-gallery__thumb { background: var(--plate, #fff); }

.product-gallery--contain .product-gallery__thumb img { object-fit: contain; }

.product-gallery__thumb.is-active { border-color: var(--ink); }

.product-gallery__thumb:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 2px; }

@media (max-width: 560px) {
  .product-gallery__stage { margin: 0 -24px; border-radius: 0; }
  .product-gallery__thumbs, .product-gallery__arrow { display: none; }
}