/* ==========================================================================
   PRODUCT GALLERY
   --------------------------------------------------------------------------
   Real finished orders — a word, framed. Shown uncropped rather than
   object-fit: cover, for the same reason photograph.css bans cropping on a
   customer's own composition: this is what somebody actually receives, not
   an illustration of it. The frames vary wildly in aspect ratio (a single
   3-window frame reads very differently from six letters in a row), and
   cropping any of them to fit a uniform grid cell would misrepresent the
   product.

   No card behind the thumbnail — transparent, so each piece sits directly
   on the page rather than in a --mat-colored box.
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

@media (max-width: 30rem) {
  .gallery-grid { grid-template-columns: 1fr; }
}

.gallery-grid__item { margin: 0; }

.gallery-grid__link {
  display: block;
  background: transparent;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
}

.gallery-grid__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .2s ease;
}

.gallery-grid__link:hover .gallery-grid__img,
.gallery-grid__link:focus-visible .gallery-grid__img {
  transform: scale(1.015);
}

.gallery-grid__caption {
  margin-top: var(--space-2);
  font-size: .875rem;
  color: var(--ink-soft);
  text-align: center;
}

/* PhotoSwipe ships its own UI; this only pulls it onto the site's own tokens
   so the toolbar doesn't look like an unstyled third-party widget dropped on
   top of the page. */
:root {
  --pswp-bg: var(--ink);
}