/**
 * Anzeigen-Vorschau (Storno, Warenkorb, Bestellung) — responsive Container-Größe.
 */
:root {
	--tma-am-artwork-max-w: min(100%, clamp(140px, 38vw, 320px));
	--tma-am-artwork-max-h: clamp(100px, 28vh, 280px);
}

/* Container-aware preview hosts */
.nbd-cart-item-design,
.nbd-cart-item-upload-preview-wrap,
.tma-am-cancel-preview-popover,
.tma-am-cancel-form-preview,
.tma-am-cancel-preview-image-link,
.tma-am-artwork-preview-host,
.tma-fc-preview-link {
	--tma-am-artwork-max-w: min(100%, clamp(140px, 38vw, 320px));
	--tma-am-artwork-max-h: clamp(100px, 28vh, 280px);
	container-type: inline-size;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

@container (max-width: 280px) {
	.nbd-cart-item-design,
	.nbd-cart-item-upload-preview-wrap,
	.tma-am-cancel-preview-popover,
	.tma-am-cancel-form-preview,
	.tma-am-cancel-preview-image-link,
	.tma-am-artwork-preview-host,
.tma-fc-preview-link {
		--tma-am-artwork-max-h: clamp(80px, 24vh, 200px);
	}
}

@container (min-width: 400px) {
	.nbd-cart-item-design,
	.nbd-cart-item-upload-preview-wrap,
	.tma-am-cancel-preview-popover,
	.tma-am-cancel-form-preview,
	.tma-am-cancel-preview-image-link,
	.tma-am-artwork-preview-host,
.tma-fc-preview-link {
		--tma-am-artwork-max-w: min(100%, 320px);
		--tma-am-artwork-max-h: clamp(120px, 32vh, 320px);
	}
}

.tma-am-cancel-preview-popover {
	width: min(100%, calc(var(--tma-am-artwork-max-w) + 2rem));
	max-width: 100%;
}

.tma-am-cancel-preview-image-link {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tma-am-cancel-preview-image,
.tma-am-nbd-design-preview-img {
	display: block;
	max-width: 100%;
	max-height: var(--tma-am-artwork-max-h);
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center center;
	box-sizing: border-box;
}

.tma-am-cancel-preview-image {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

/* Storno-Dialog: Inline-Vorschau neben Terminliste */
.tma-am-cancel-form-layout--inline {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(140px, 38%);
	gap: 1rem 1.25rem;
	align-items: start;
}

.tma-am-cancel-form-main {
	min-width: 0;
}

.tma-am-cancel-form-preview {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0.65rem 0.75rem;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
}

.tma-am-cancel-form-preview__title {
	display: block;
	margin: 0 0 0.5rem;
}

.tma-am-cancel-form-preview .tma-am-cancel-preview-image {
	margin: 0 auto;
}

@media (max-width: 640px) {
	.tma-am-cancel-form-layout--inline {
		grid-template-columns: 1fr;
	}

	.tma-am-cancel-form-preview {
		order: -1;
	}
}