/* Thumbnails sit below the photo frame and never take space from the image. */
body:not(.admin) .detail-grid .product-gallery {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 100%; min-width: 0; align-self: start;
}
body:not(.admin) .detail-grid .product-gallery .product-photo {
  display: flex; flex-direction: column; flex: 0 0 auto;
  width: 100%; max-width: 100%; min-width: 0; height: auto;
  aspect-ratio: auto; align-self: start; margin: 0;
}
body:not(.admin) .product-gallery .product-gallery-stage {
  position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; flex: 0 0 auto;
}
body:not(.admin) .product-gallery .product-gallery-slide {
  position: absolute; inset: 0; display: grid; place-items: center;
}
body:not(.admin) .product-gallery .product-gallery-slide[hidden],
body:not(.admin) .product-gallery .product-gallery-controls[hidden] { display: none; }
body:not(.admin) .detail-grid.has-photo .product-gallery .product-gallery-slide img {
  display: block; width: 100%; height: 100%; max-height: 100%; min-height: 0; object-fit: contain; object-position: center;
}
body:not(.admin) .product-gallery .product-gallery-thumbnails {
  display: flex; gap: 8px; width: 100%; min-width: 0; max-width: 100%;
  padding: 4px 2px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
body:not(.admin) .product-gallery .product-gallery-thumbnail {
  flex: 0 0 56px; width: 56px; height: 56px; padding: 3px;
  border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
}
body:not(.admin) .product-gallery .product-gallery-thumbnail[aria-pressed="true"] {
  border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand);
}
body:not(.admin) .detail-grid.has-photo .product-gallery .product-gallery-thumbnail img {
  display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain;
}
body:not(.admin) .product-gallery .product-gallery-controls {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px; padding: 0 12px 10px;
}
body:not(.admin) .product-gallery .product-gallery-control {
  min-height: 36px; min-width: 36px; padding: 5px 12px; font-size: .8rem;
}
body:not(.admin) .product-gallery .product-gallery-count {
  min-width: 4ch; text-align: center; font-size: .8rem; font-variant-numeric: tabular-nums;
}
body:not(.admin) .product-gallery .product-photo figcaption {
  padding: 8px 12px; font-size: .72rem; line-height: 1.4;
}
@media (max-width: 760px) {
  body:not(.admin) .product-gallery .product-gallery-thumbnail { flex-basis: 50px; width: 50px; height: 50px; }
}