/* VSO Season Layout: look photos beside their products (desktop: 4 columns, two halves). */
.vso-sl-wrap {
	--vso-sl-gap-x: 58px;
	--vso-sl-gap-y: 16px;
	--vso-sl-cap: 60px;   /* product title + price under the photo (front.js measures it): the look photo stops level with the product photos */
	--vso-sl-cut: 28px;   /* the photo's cut corners */
	container-type: inline-size;
	width: 100%;
}
.vso-sl-wrap ul.products.vso-sl {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* over the theme's columns-N / tablet-columns-N */
	gap: var(--vso-sl-gap-y) var(--vso-sl-gap-x);
	align-items: start;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.vso-sl-wrap ul.products.vso-sl::before,
.vso-sl-wrap ul.products.vso-sl::after {
	content: none !important;
	display: none !important;
}
.vso-sl-wrap ul.products.vso-sl > li {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	padding: 0;
	list-style: none !important;
}
.vso-sl-wrap ul.products.vso-sl > li.product img {
	width: 100%;
	height: auto;
	display: block;
}
.vso-sl-wrap .vso-sl-look {
	align-self: stretch;
	min-height: 0;
	position: relative;
}
.vso-sl-wrap .vso-sl-photo {
	position: absolute;
	inset: 0 0 var(--vso-sl-cap) 0;
	display: block;
	overflow: hidden;
	background: #e5e5e5;
	clip-path: polygon(var(--vso-sl-cut) 0, calc(100% - var(--vso-sl-cut)) 0, 100% var(--vso-sl-cut), 100% calc(100% - var(--vso-sl-cut)), calc(100% - var(--vso-sl-cut)) 100%, var(--vso-sl-cut) 100%, 0 calc(100% - var(--vso-sl-cut)), 0 var(--vso-sl-cut));
}
.vso-sl-wrap .vso-sl-photo img.vso-sl-img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center top;
}

@media (min-width: 1025px) {
	.vso-sl-wrap ul.products.vso-sl {
		/* a row holds at least one product card (photo 2:3 + caption), so a row with only a look photo keeps its height */
		grid-auto-rows: minmax(calc((100cqi - 3 * var(--vso-sl-gap-x)) / 4 * 1.5 + var(--vso-sl-cap)), auto);
	}
	.vso-sl-wrap ul.products.vso-sl > li {
		grid-row: var(--vso-r) / span var(--vso-rs, 1);
		grid-column: var(--vso-c) / span var(--vso-cs, 1);
	}
}

/* tablet and phone: the list in reading order, each photo full width above its products */
@media (max-width: 1024px) {
	.vso-sl-wrap {
		--vso-sl-gap-x: 24px;
		--vso-sl-gap-y: 32px;
	}
	.vso-sl-wrap ul.products.vso-sl {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.vso-sl-wrap .vso-sl-look {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
		aspect-ratio: 4 / 5;
	}
	.vso-sl-wrap .vso-sl-photo {
		inset: 0;
	}
}
@media (max-width: 640px) {
	.vso-sl-wrap {
		--vso-sl-gap-x: 16px;
		--vso-sl-gap-y: 28px;
		--vso-sl-cut: 18px;
	}
}