/* Product photographs use the existing VI surfaces, borders and focus styles. */
.product-photo-card {
  border: 1px solid var(--vi-border);
  overflow: hidden;
}
.product-photo-card img,
.product-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}
.product-photo-gallery {
  margin: 0;
  min-width: 0;
}
.product-photo-frame {
  border: 1px solid var(--vi-border);
  overflow: hidden;
}
.product-photo-thumbnails {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--vi-space-1);
  margin-top: var(--vi-space-3);
}
.product-photo-thumbnail {
  display: block;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
  padding: var(--vi-space-1);
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-radius);
  background: var(--vi-surface);
  cursor: pointer;
}
.product-photo-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-photo-thumbnail:hover {
  border-color: var(--vi-primary);
}
.product-photo-thumbnail[aria-pressed="true"] {
  border-color: var(--vi-primary);
  box-shadow: inset 0 0 0 1px var(--vi-primary);
}
@media (max-width: 359px) {
  .product-photo-thumbnails {
    grid-template-columns: repeat(3, minmax(44px, 1fr));
  }
}