/*------------------------------------------------------------------------------*/
/* Product List Grid
/*------------------------------------------------------------------------------*/

.ProductList {
	--gap: var(--grid-list-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--grid-list-image-width), 1fr));
	gap: calc(var(--gap) * 2) var(--gap);
	list-style: none;
	margin-bottom: 4rem;
}

@media screen and (max-width: 800px) {
	.ProductList {
		--gap: 1rem;
		grid-template-columns: repeat(2, calc(50% - (var(--gap) / 2)));
	}
}

@media screen and (max-width: 320px) {
	.ProductList {
		grid-template-columns: 1fr;
	}
}

/*------------------------------------------------------------------------------*/
/* Product List Scrollable
/*------------------------------------------------------------------------------*/

.ProductScrollList {
	--gap: var(--grid-list-gutter);
	-ms-overflow-style: none;
	display: grid;
	gap: var(--gap);
	grid-auto-columns: var(--grid-list-image-width);
	grid-auto-flow: column;
	list-style: none;
	overflow-x: auto;
	padding-block: 20px;
	scroll-padding-left: var(--container-page-margin);
	scroll-padding-right: var(--container-page-margin);
	scroll-snap-type: none;
	scrollbar-width: none;
}

.ProductScrollList::-webkit-scrollbar {
	display: none;
}

.ProductScrollList .ListProduct {
	scroll-snap-align: start;
}

@media screen and (max-width: 480px) {
	.ProductScrollList {
		grid-auto-columns: 55%;
		scroll-snap-type: inline mandatory;
	}
}

@media screen and (max-width: 320px) {
	.ProductScrollList {
		grid-auto-columns: 85%;
	}
}

/*------------------------------------------------------------------------------*/
/* List Product
/*------------------------------------------------------------------------------*/

.ListProduct {
	--aspect-ratio: 1 / var(--product-image-ratio, 1);
	--default-margin: 0 0 var(--margin-xsmall);
	--color-link: var(--color-text-strong);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 4px 12px, rgba(17, 17, 26, 0.1) 0px 8px 12px !important;
}

.ListProduct:focus-within {
	outline: 2px solid var(--background-accent-color-shade-2);
	outline-offset: 2px;
}

.ListProduct a {
	text-decoration: none;
}

.ListProductImage {
	background-color: var(--image-background-color);
	border: 0 solid var(--border-color);
	border-radius: var(--border-radius);
	position: relative;
	z-index: 1;
}

.ListProductImageLink {
	align-items: center;
	aspect-ratio: var(--aspect-ratio);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	position: relative;
	width: 100%;
}

.ListProductImageLink img {
	border-radius: var(--border-radius);
	height: 100%;
	object-fit: contain;
	width: 100%;
	padding: 10px;
}

.ListProductInfo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-top: 1rem;
}

.ListProductName {
	font-family: var(--font-family);
	font-size: var(--font-size-regular);
	font-weight: normal;
	hyphens: auto;
	text-transform: none;
}

.ListProductBrandName {
	--color-link: var(--color-text-subtle);
}

/* List Product Price
/*------------------------------------------------------------------------------*/

.ListProductPrices {
	margin-bottom: var(--margin);
	margin-top: auto;
}

.ListProductPrices > dl {
	margin-bottom: 0;
}

.ListProductPrices dt.CurrentPrice {
	/* Hide visually */
	border: 0;
	clip: rect(0 0 0 0);
	height: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.ListProductBuy[data-setting-show-listbuy=""] .ListProductPrices {
	margin-bottom: 0;
}

/* List Product Buy Form
/*------------------------------------------------------------------------------*/

.ListProductBuy {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-top: auto;
}

.ListProductBuy form,
.ListProductBuy fieldset {
	margin: 0;
	padding: 0;
	gap: 0;
}

.ListProductBuy > :only-child:last-child {
	margin: auto 0 0;
}

@media screen and (max-width: 600px) {
	.ListProduct .AddToCart {
		font-size: var(--font-size-small);
		width: 100%;
	}
}

/*------------------------------------------------------------------------------*/
/* List Product Variation: Card
/*------------------------------------------------------------------------------*/

.ListProduct-Card {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
}

.ListProduct-Card .ListProductImage {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.ListProduct-Card .ListProductInfo {
	padding: 1rem;
	padding-bottom: 1.5rem;
}

.ListProduct-Card .AddToCart {
	width: 100%;
}

/*------------------------------------------------------------------------------*/
/* List Product Variation: Image Background
/*------------------------------------------------------------------------------*/

.ListProduct-ImageBackground {
	--image-background-color: var(--color-white-darker);
	border: 0;
}

.ListProduct-ImageBackground .ListProductImage img {
	mix-blend-mode: darken;
}

/*------------------------------------------------------------------------------*/
/* List Product Variation: Card + Image Background
/*------------------------------------------------------------------------------*/

.ListProduct-CardImageBackground {
	--image-background-color: var(--background-color-shade-1);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
}

.ListProduct-CardImageBackground .ListProductImage {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.ListProduct-CardImageBackground .ListProductImage img {
	mix-blend-mode: darken;
}

.ListProduct-CardImageBackground .ListProductInfo {
	padding: 1rem;
	padding-bottom: 1.5rem;
}

.ListProduct-CardImageBackground .AddToCart {
	width: 100%;
}

/*------------------------------------------------------------------------------*/
/* List Product Variation: Card + Image Background
/*------------------------------------------------------------------------------*/

.ListProduct-CardBackground {
	--image-background-color: var(--background-color-shade-1);
	background-color: var(--background-color-shade-1);
	border-radius: var(--border-radius);
}

.ListProduct-CardBackground .ListProductImage {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.ListProduct-CardBackground .ListProductImage img {
	mix-blend-mode: darken;
}

.ListProduct-CardBackground .ListProductInfo {
	padding: 1rem;
	padding-bottom: 1.5rem;
}

.ListProduct-CardBackground .AddToCart {
	width: 100%;
}

/*------------------------------------------------------------------------------*/
/* List Product Variation: Border
/*------------------------------------------------------------------------------*/

:root:not([data-color-contrast="white"]) .ListProduct-Border .ListProductImage {
	border-width: 1px;
}

/*------------------------------------------------------------------------------*/
/* List Product Variation: Minimal
/*------------------------------------------------------------------------------*/

.ListProduct-Minimal .ListProductImage {
	--image-background-color: var(--background-color);
	border: 0;
}

.ListProduct-Minimal .ListProductBadges {
	right: 0;
}

.ListProduct-Minimal .ListProductBadges .ProductBadge {
	border-radius: var(--border-radius);
	margin-inline: auto;
}

.ListProduct-Minimal .ListProductInfo {
	align-items: center;
	text-align: center;
}

.ListProduct-Minimal .ListProductPrices {
	justify-content: center;
}

.ListProduct-Minimal .ListProductPrices .Prices {
	justify-content: center;
	text-align: center;
}