/* Shared product gallery layout: below the main window, aligned left. */
html body .product .productTop > div:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  min-width: 0;
}
html body .product .productTop > div.productBothViews:first-child {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
}
html body .product .productTop > div:first-child > .stage {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100%;
  min-width: 0;
}
html body .product .productTop :is(
  .productBandanaGallery, .productLargeToteGallery, .productTowelGallery,
  .flagProductGallery, .hydroSampleGallery, .fopPenSampleGallery,
  .barMatRealGallery, .bicLighterGallery, .blanketProductGallery,
  .enamel-pin-gallery, .mylar-product-gallery, .productImageGallery,
  [class$="Gallery"], [class$="-gallery"]
) {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 12px !important;
  order: 2 !important;
}
html body .product .productTop .flagProductGallery { display: block !important; }
html body .product .productTop .flagThumbnailRow {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}
html body .product .productTop :is(
  .productBandanaGallery, .productLargeToteGallery, .productTowelGallery,
  .flagThumbnailRow, .hydroSampleGallery, .fopPenSampleGallery,
  .barMatRealGallery, .bicLighterGallery, .blanketProductGallery,
  .enamel-pin-gallery, .mylar-product-gallery, .productImageGallery,
  [class$="Gallery"], [class$="-gallery"]
) > :is(button, a) {
  box-sizing: border-box;
  flex: 0 0 90px !important;
  width: 90px !important;
  height: 90px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px !important;
  border-radius: 6px;
}
html body .product .productTop :is(
  .productBandanaGallery, .productLargeToteGallery, .productTowelGallery,
  .flagThumbnailRow, .hydroSampleGallery, .fopPenSampleGallery,
  .barMatRealGallery, .bicLighterGallery, .blanketProductGallery,
  .enamel-pin-gallery, .mylar-product-gallery, .productImageGallery,
  [class$="Gallery"], [class$="-gallery"]
) > :is(button, a) > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
@media (max-width: 600px) {
 html body .product .productTop :is(
  .productBandanaGallery, .productLargeToteGallery, .productTowelGallery,
  .flagThumbnailRow, .hydroSampleGallery, .fopPenSampleGallery,
  .barMatRealGallery, .bicLighterGallery, .blanketProductGallery,
  .enamel-pin-gallery, .mylar-product-gallery, .productImageGallery,
  [class$="Gallery"], [class$="-gallery"]
 ) > :is(button, a) {
  flex-basis: 72px !important; width: 72px !important; height: 72px !important;
 }
}
html body .product .productTop .productLargeToteGallery > button > img { height: calc(100% - 18px) !important; }
html body .product .productTop .productLargeToteGallery > button > span { display: block; font-size: 10px; line-height: 18px; }