/*-----------------------------
Flexible Grid Layout Page Type AJ Jan 22
Image of any aspect fits into an image box (6/4 aspect), centered, no JS positioning
------------------------------*/

.shopping-ulli-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-gap: 2rem;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    clear: both;
    box-sizing: border-box;
}

  .list-style-3col.shopping-ulli-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

.shopping-ulli-grid li,
.shopping-ulli-grid form{
      display: flex;
      flex:1;
      width: 100%;
}
.shopping-ulli-grid .cmsImage {
    text-align: center;
    margin-inline:auto;
    display:flex;
    align-items:center;
}
.shopping-ulli-grid .cmsImage a{ /*flex item*/
    max-width:none;
}
.shopping-ulli-grid img{
    margin:0;
    max-height:640px;
    max-width: 640px;
    width: 100%;
    height:100%;
    object-fit:contain;
    height:auto;
}

/*Grid Images within square .cmsAspectSquared
  Fallback to standard grid if older browser
  Category Grid Layout also default to within square to keep tidy
*/
@supports (aspect-ratio:1) {
.shopping-ulli-grid .cmsImage.cmsAspectSquared,
.shopping-ulli-grid .cmsAspectSquared a,
.CategoryList .shopping-ulli-grid .cmsImage,
.CategoryList .shopping-ulli-grid .CategoryItem a{
  width:100%;
}

.shopping-ulli-grid .cmsAspectSquared img,
.shopping-ulli-grid .cmsAspectSquared:not(:has(img)),
.CategoryList .shopping-ulli-grid img {
    aspect-ratio: 1;
  }
}


.shopping-ulli-grid:not(.list-style-3col) img{
    margin-top: 0 !important;
}

.shopping-ulli-grid .cmsItem{
    display: flex;
    flex-direction: column;
    flex:1;
    margin:0;
}

.list-style-3col.shopping-ulli-grid .cmsItem{
  display:block;
}

.shopping-ulli-grid .cmsImage,
.shopping-ulli-grid .cmsTitleAndText{
  flex:1;
}
.shopping-ulli-grid .cmsTitle{
    margin-top:16px;
}

.shopping-ulli-grid .cmsPriceAndEnquiry{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}



/*Defaults to 2col mobile centered text and price.
 reuben has disabled the 2 column layout, 
 as many templates exist that have the cmsEnquiry set to flex... 
 Because of that, it pushes the right column out of frame,.
 The default layout needs to be the simplist, single column
 And then custom design templates that bring it back to 2 columns, where all other settings considered... 
 I did not want to take the approach of forcing the qty+buy+wishlist + price into a stack, as not everyone wants that
 Some people just want the buy button only... or just the buy button and wish...  so should not force the stack
 flex-wrap looks bad..   maybe cetner could be forced... 
 but if forcing everything at this leve, breaks other layouts, 
 then surely it is safer to have single column by default, and force back to 2 columns in templates... 
*/
@media(max-width:560px){

	.list-style-3col.shopping-ulli-grid,
	.shopping-ulli-grid,
	.cmsShoppingAreaInner .shopping-ulli-grid {
		/* grid-template-columns: 1fr 1fr; */
		grid-template-columns: 1fr; 
		grid-gap: 1rem;
	}

	.shopping-ulli-grid .cmsItem .cmsPrice,
	.shopping-ulli-grid .cmsItem .cmsEnquiry {
		float: none;
		width: 100%;
		text-align: center;
	}

	
	.list-style-3col.shopping-ulli-grid .cmsItem {
		margin: 0;
	}

}