/* Optional CSS Grid layout layer for v3 product overviews. */
.pgrid[data-grid="products"] {
	--pgrid-columns: 3;
	display: grid;
	grid-template-columns: repeat(var(--pgrid-columns), minmax(0, 1fr));
	grid-auto-flow: row dense;
	gap: var(--pgrid-gap);
	width: 100%;
	align-items: stretch;
	align-content: start;
}

.pgrid[data-grid="products"] > .pc,
.pgrid[data-grid="products"] > .pgrid__spot {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.pgrid[data-grid="products"] > .pc {
	grid-column: span 1;
}

.pgrid[data-grid="products"] > .pgrid__spot--footprint-full-row,
.pgrid[data-grid="products"] > .pgrid__spot:not(.pgrid__spot--footprint-inline-card) {
	grid-column: 1 / -1 !important;
}

.pgrid[data-grid="products"] > .pgrid__spot--footprint-inline-card.pgrid__spot--cards-1 {
	grid-column: span 1 !important;
}

.pgrid[data-grid="products"] > .pgrid__spot--footprint-inline-card.pgrid__spot--cards-2 {
	grid-column: span 2 !important;
}

.pgrid[data-grid="products"] > .pgrid__spot--footprint-inline-card.pgrid__spot--cards-3 {
	grid-column: 1 / -1 !important;
}

@media (max-width: 550.98px) {
	.pgrid[data-grid="products"] > .pgrid__spot--after-products.pgrid__spot--footprint-inline-card {
		grid-column: 1 / -1 !important;
	}

	.pgrid[data-grid="products"] > .pgrid__spot--after-products.pgrid__spot--footprint-inline-card.pgrid__spot--cards-1:has(.features-container > .feature:is(.f-w20, .f-w25, .f-w33):not(.feature-larger-on-mobile)) {
		grid-column: span 1 !important;
	}

	.pgrid[data-grid="products"] > .pgrid__spot--footprint-inline-card:has(.feature.feature-larger-on-mobile.f-w20),
	.pgrid[data-grid="products"] > .pgrid__spot--footprint-inline-card:has(.feature.feature-larger-on-mobile.f-w25),
	.pgrid[data-grid="products"] > .pgrid__spot--footprint-inline-card:has(.feature.feature-larger-on-mobile.f-w33) {
		grid-column: 1 / -1 !important;
	}
}

.pgrid[data-grid="products"] > .pc.double-card,
.pgrid[data-grid="products"] > .pc.pc--double-card {
	grid-column: span 2;
}

.pgrid[data-grid="products"] > .pc.full-card,
.pgrid[data-grid="products"] > .pc.pc--full-card {
	grid-column: 1 / -1;
}

@media (min-width: 1001px) {
	.pgrid[data-grid="products"] > .pgrid__spot-card:not(.embla__slide) {
		min-height: clamp(420px, 35vw, 510px);
	}

	.pgrid[data-grid="products"] > .pgrid__spot-card.pgrid__spot--layout-product-card-grid:not(.embla__slide),
	.pgrid[data-grid="products"] > .pgrid__spot-card.pgrid__spot--layout-vertical-stack:not(.embla__slide) {
		height: auto;
		max-height: none;
		align-self: stretch;
	}
}

@media (max-width: 1000px) {
	.pgrid[data-grid="products"] {
		--pgrid-columns: 2;
	}

	.pgrid[data-grid="products"] > .pgrid__spot--footprint-inline-card.pgrid__spot--cards-2,
	.pgrid[data-grid="products"] > .pgrid__spot--footprint-inline-card.pgrid__spot--cards-3,
	.pgrid[data-grid="products"] > .pc.double-card,
	.pgrid[data-grid="products"] > .pc.pc--double-card {
		grid-column: 1 / -1 !important;
	}
}

@media (min-width: 768px) and (max-width: 1000px) {
	.pgrid[data-grid="products"] > .pgrid__spot-card:not(.embla__slide) {
		height: auto;
		min-height: clamp(360px, 42vw, 420px);
		max-height: none;
		align-self: stretch;
	}

	.pgrid[data-grid="products"] > .pgrid__spot-card.pgrid__spot--layout-product-card-grid:not(.embla__slide),
	.pgrid[data-grid="products"] > .pgrid__spot-card.pgrid__spot--layout-vertical-stack:not(.embla__slide) {
		min-height: 0;
	}
}