/* Product page pictures: a bigger main picture you can click or tap to zoom, bigger thumbnails, close-up badges.
   (The zoom viewer's own styles are injected by js/lightbox.js.) A separate file on purpose: browsers keep css/store.css for a week. */
@media (min-width: 1000px) {
  .product-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; }
}
/* The picture column stays in view while the buy box scrolls, but only when the screen is tall enough to show all of it. */
.media-panel { position: relative; top: 0; }
@media (min-width: 1000px) and (min-height: 960px) { .media-panel { position: sticky; top: 96px; } }

.photo-zoom { display: block; position: relative; width: 100%; padding: 0; border: 0; background: #fbf6ef; cursor: zoom-in; font: inherit; color: inherit; }
.photo-zoom img { display: block; width: 100%; aspect-ratio: 1 / 1; max-height: min(76vh, 780px); object-fit: contain; margin: 0 auto; }
.photo-zoom .zoom-hint { position: absolute; right: 14px; bottom: 14px; background: rgba(255,255,255,.97); color: var(--purple-deep, #5c4872); font: 800 1.1rem var(--sans, system-ui, sans-serif);
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.18); pointer-events: none; }
.photo-zoom:hover .zoom-hint { background: #fff; }
.photo-zoom:focus-visible { outline: 4px solid var(--purple-deep, #5c4872); outline-offset: -4px; }

.photo-strip { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
.photo-strip .gallery-thumb { position: relative; width: 88px; height: 88px; border-radius: 14px; background-size: cover; background-position: center; background-color: #fff; }
.photo-strip .gallery-thumb:focus-visible { outline: 4px solid var(--purple-deep, #5c4872); outline-offset: 2px; }
.photo-strip .gallery-thumb.closeup span { position: absolute; left: 0; right: 0; bottom: 0; background: var(--pink-deep, #a8445f); color: #fff; font: 800 .74rem/1 var(--sans, system-ui, sans-serif);
  padding: 5px 0; text-align: center; border-radius: 0 0 12px 12px; letter-spacing: .02em; }
@media (max-width: 640px) {
  .photo-zoom img { max-height: 92vw; }
  .photo-zoom .zoom-hint { right: 10px; bottom: 10px; padding: 9px 14px; font-size: 1.05rem; }
  .photo-strip .gallery-thumb { width: 72px; height: 72px; }
}