/* Product photographs share the existing bone, ink and bronze product page.
   Cropped previews open the original composition in the shared photo viewer. */
.product-page .product-photo-link{
  position:relative;display:block;overflow:hidden;background:var(--tint);
  color:var(--ink);text-decoration:none;cursor:zoom-in;
}
.product-page .product-photo-link:focus-visible{
  outline:3px solid var(--gilt);outline-offset:5px;
}
.product-page .product-photo-link img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform .35s ease;
}
.product-page .product-photo-link:hover img{transform:scale(1.025)}
.product-photo-link__hint{
  position:absolute;inset-inline-end:12px;inset-block-end:12px;
  display:flex;align-items:center;gap:20px;padding:10px 14px;
  background:var(--bone);color:var(--ink);font-size:13px;font-weight:600;
  line-height:1.3;pointer-events:none;
}
.product-photography{border-block-start:1px solid var(--rule)}
.product-photography__heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  margin-block-end:30px;
}
.product-photography__heading .h2{margin-block-end:0}
.product-photography__intro{max-width:29ch;margin:0;color:var(--stone);font-size:16px;line-height:1.65}
.product-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}
.product-photo-grid figure{min-width:0;margin:0}
.product-photo-grid figcaption{padding-block-start:12px;color:var(--stone);font-size:14px;line-height:1.65}
@media(max-width:1000px){
  .product-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-photography__heading{align-items:flex-start;flex-direction:column;gap:14px}
  .product-photography__intro{max-width:52ch}
}
@media(max-width:600px){
  .product-photo-grid{grid-template-columns:1fr;gap:26px}
  .product-photo-link__hint{inset-inline-end:10px;inset-block-end:10px;padding:9px 12px}
}
@media(prefers-reduced-motion:reduce){
  .product-page .product-photo-link img{transition:none}
  .product-page .product-photo-link:hover img{transform:none}
}