.mpsc-commerce-design-preview {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .35rem;
	width: min(156px, 100%);
	margin: .3rem 0 0;
}

/* Full-cart replay belongs in the product-details cell, not the compact
 * WooCommerce catalogue-thumbnail cell. Mini-cart deliberately has no replay. */
.mpsc-commerce-design-preview.is-cart {
	width: min(260px, 100%);
	margin: .45rem 0 0;
}

.mpsc-commerce-design-component {
	min-width: 0;
	margin: 0;
}

.mpsc-commerce-design-component figcaption {
	margin: 0 0 .18rem;
	font-size: .68rem;
	line-height: 1.15;
	font-weight: 600;
}

.mpsc-commerce-design-surface {
	position: relative;
	container-type: size;
	width: 100%;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
	border-radius: 4px;
	background: #fff;
}

.mpsc-commerce-design-window {
	position: absolute;
	overflow: hidden;
}

.mpsc-commerce-design-window img {
	position: absolute;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: fill;
}

.mpsc-commerce-design-text {
	position: absolute;
	display: flex;
	align-items: center;
	line-height: 1.05;
	white-space: pre-wrap;
	overflow: hidden;
	font-family: inherit;
	font-weight: 400;
}

.mpsc-commerce-design-text.is-left { justify-content: flex-start; text-align: left; }
.mpsc-commerce-design-text.is-center { justify-content: center; text-align: center; }
.mpsc-commerce-design-text.is-right { justify-content: flex-end; text-align: right; }

.mpsc-commerce-design-more {
	grid-column: 1 / -1;
	font-size: .7rem;
	line-height: 1.2;
}

.woocommerce-checkout-review-order-table .mpsc-commerce-design-preview {
	margin-top: .45rem;
}

@media (max-width: 480px) {
	.mpsc-commerce-design-preview { width: min(132px, 100%); }
	.mpsc-commerce-design-preview.is-cart { width: min(220px, 100%); }
}