/* Product gallery: thumbnails left of main photo (Amazon-style). Overrides theme.css. */

.product-gallery {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-right: 0.625rem;
}

.product-gallery-preview {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  position: relative;
  width: 100%;
}

.product-gallery-thumblist {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 5rem;
  max-height: 28rem;
  overflow-x: visible;
  overflow-y: auto;
  height: auto;
  margin-left: 0;
  margin-right: 0.625rem;
  padding-top: 0.75rem;
}

.product-gallery-thumblist-item {
  display: block;
  flex-shrink: 0;
  margin: 0.3125rem 0;
  position: relative;
  width: 5rem;
  height: 5rem;
  transition: border-color 0.2s ease-in-out;
  border: 1px solid #e3e9ef;
  border-radius: 0.3125rem;
  text-decoration: none !important;
}

.product-gallery-thumblist-item:first-child {
  margin-top: 0;
}

.product-gallery-thumblist-item > img {
  display: block;
  width: 100%;
  transition: opacity 0.2s ease-in-out;
  opacity: 0.6;
}

.product-gallery-thumblist-item:hover {
  border-color: #c9d5e0;
}

.product-gallery-thumblist-item:hover > img {
  opacity: 1;
}

.product-gallery-thumblist-item.active {
  border-color: var(--bs-primary);
}

.product-gallery-thumblist-item.active > img {
  opacity: 1;
}

/* Padding around the enlarged (zoomed) image */
.product-gallery figure.zoom.zoomed {
  padding: 0.5rem;
  background-origin: content-box;
  background-clip: content-box;
  background-color: var(--bs-gray-200, #f3f5f9);
}