/* 

	Used by gallery view, and product view pages... 

*/


/*underlying image is 320px max, so need to match thumbnails to this size*/
/*.imageAlignmentBlock .imageBlockThumbs { max-width: 320px; clear: both;}*/
.imageBlockThumbs { margin-top: 5px; }
.imageBlockThumbs>ul {display: grid; grid-gap: 1rem; }
.imageBlockThumbs>ul>li { align-items: center; text-align: center; }


/* support mobile view still smaller */

@media (max-width: 600px) {
	.imageBlockThumbs ul,
	.imageBlockThumbs .list-style-3col ,
	.imageBlockThumbs .list-style-mobile-3col
	{
		gap: max(1rem, 4vw);
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%; 
	}

}


/*-----------------------------
Product Thumbs now have images dimensions set - override to fit responsive
------------------------------*/

.imageBlockThumbs .cmsThumb img{
  width:100%;
  height:auto;
}
/*-----------------------------
Product detail page Thumb block styling
Inline - scale full width via grid
------------------------------*/

.imageBlockThumbs .list-style-inline{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap:0.25rem;
}
.imageBlockThumbs .list-style-inline .cmsThumb{
	max-height:none;
	max-width:none;
  margin:0;
  min-height:0!important;
}

.imageBlockThumbs .list-style-inline .cmsThumb a{
  line-height:0;
  display: block;
}
.imageBlockThumbs .list-style-inline img{
    margin-top:0!important;
}

@media (max-width: 600px){
.imageBlockThumbs .list-style-inline  li {
  width: 100%;
	}
}


/*-----------------------------
Product detail page Thumb Aligned Left
------------------------------*/
.thumbsLeft.imageBlock{
  display: flex;
  gap: 1rem;
}
.thumbsLeft .imageBlockThumbs {
    margin-top: 0;
}
.imageBlock.thumbsLeft .list-style-inline{
  display: flex;
  flex-direction:column;
  gap:0.5rem;
  list-style: none;
  padding-left: 0;
  margin:0;
  width:90px;
}
.thumbsLeft.imageBlock .productHeaderSummaryImage{
  order:2;
}
.thumbsLeft.imageBlock .cmsThumb {
    margin: 0;
    max-height: none;
    max-width: 90px;
}

@media (max-width: 600px) {
  .thumbsLeft.imageBlock {
    display: inline-block;
  }

  .thumbsLeft.imageBlock .imageBlockThumbs {
    margin-top: 5px;
  }

  .imageBlock.thumbsLeft .list-style-inline {
    display: grid;
    width: 100%;
    gap:5px;
  }

  .thumbsLeft.imageBlock .cmsThumb {
    width: 100%;
    max-width: none;
  }
}

/*-----------------------------
thumbslider fullwidth
------------------------------*/
.thumbSlider.imageAlignmentBlock .imageBlockThumbs {
    max-width: none;
}