.cd-trade-in {
	display: flex;
	align-items: center;
	gap: var(--cd-space-3);
	margin-bottom: var(--cd-space-4);
	padding: var(--cd-space-3);
	border-radius: var(--cd-radius-md);
	background: var(--cd-surface-raised);
	box-shadow: var(--cd-shadow-raised-soft);
}
.cd-trade-in__icon { flex: 0 0 var(--cd-space-6); color: var(--cd-color-accent); }
.cd-trade-in__icon svg { display: block; width: 100%; height: var(--cd-space-6); }
.cd-trade-in__copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cd-trade-in__copy span { display: block; font-size: var(--cd-font-sm); color: var(--cd-color-muted); }
.cd-trade-in__copy strong { display: block; font-size: var(--cd-font-sm); line-height: var(--cd-line-height-heading); }
.cd-trade-in__trigger { padding: var(--cd-space-2) var(--cd-space-3); font-size: var(--cd-font-sm); }
.cd-trade-dialog {
	box-sizing: border-box;
	width: min(36rem, calc(100% - var(--cd-space-8)));
	max-width: none;
	max-height: calc(100dvh - var(--cd-space-8));
	margin: auto;
	padding: var(--cd-space-6);
	border: 0;
	border-radius: var(--cd-radius-card);
	background: var(--cd-surface-raised);
	color: var(--cd-color-text);
	box-shadow: var(--cd-shadow-raised);
	overflow-y: auto;
	overscroll-behavior: contain;
	overflow-wrap: anywhere;
}
.cd-trade-dialog::backdrop { background: color-mix(in srgb, var(--cd-color-text) 40%, transparent); }
.cd-trade-dialog__close { float: right; margin-left: var(--cd-space-2); }
.cd-trade-dialog h2 { font-size: var(--cd-font-lg); line-height: var(--cd-line-height-heading); margin: 0 0 var(--cd-space-2); }
.cd-trade-dialog__note { font-size: var(--cd-font-sm); color: var(--cd-color-muted); margin: var(--cd-space-2) 0; }
.cd-trade-dialog__context { box-shadow: var(--cd-shadow-inset);
	display: grid;
	gap: var(--cd-space-1);
	clear: both;
	margin-block: var(--cd-space-4);
	padding: var(--cd-space-3);
	font-size: var(--cd-font-sm);
	background: var(--cd-surface-inset);
	border-radius: calc(var(--cd-radius-card) - var(--cd-space-3));
}
.cd-trade-form { display: flex; flex-direction: column; gap: var(--cd-space-3); margin: 0; }
.cd-trade-form label:not(.cd-legal-choice) { font-size: var(--cd-font-sm); font-weight: var(--cd-weight-semibold); }
.cd-trade-form textarea { resize: vertical; }
.cd-trade-form__photos { margin-block: var(--cd-space-2); }
.cd-trade-form__previews { display: flex; flex-wrap: wrap; gap: var(--cd-space-2); list-style: none; margin: var(--cd-space-2) 0 0; padding: 0; }
.cd-trade-form__previews:empty { display: none; }
.cd-trade-form__previews li { position: relative; width: calc(var(--cd-space-12) * 1.5); }
.cd-trade-form__previews img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--cd-radius-sm); }
.cd-trade-form__previews button { position: absolute; top: 0; right: 0; }
.cd-trade-form__result { margin: 0; padding: var(--cd-space-3); border-radius: var(--cd-radius-sm); background: var(--cd-color-accent-soft); }
@media (max-width: 40rem) {
	.cd-trade-in { flex-wrap: wrap; gap: var(--cd-space-2); }
	.cd-trade-in__copy { flex-basis: calc(100% - var(--cd-space-8)); }
	.cd-trade-in__trigger { width: 100%; }
	.cd-trade-dialog {
		position: fixed;
		inset: auto 0 0;
		width: 100%;
		max-height: calc(100dvh - var(--cd-space-4));
		margin: 0;
		padding: var(--cd-space-4);
		padding-bottom: calc(var(--cd-space-4) + env(safe-area-inset-bottom, 0px));
		border-radius: var(--cd-radius-card) var(--cd-radius-card) 0 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cd-trade-dialog *, .cd-trade-in * { transition: none; scroll-behavior: auto; }
}
/* Layout only: shared fields, pills and buttons provide control treatment. */
.cd-trade-form [hidden] { display: none; }
.cd-trade-field { display: grid; gap: var(--cd-space-2); min-width: 0; }
.cd-trade-form input[type="file"] { max-width: 100%; }
.cd-trade-intent { border: 0; padding: 0; margin: 0; min-width: 0; }
.cd-trade-intent legend { font-size: var(--cd-font-sm); font-weight: var(--cd-weight-semibold); margin-bottom: var(--cd-space-2); }
.cd-trade-intent > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--cd-space-2); }
.cd-trade-intent .cd-pill { gap: var(--cd-space-2); min-height: var(--cd-control-size); cursor: pointer; }
.cd-trade-intent input { flex-shrink: 0; accent-color: var(--cd-color-accent); }
.cd-trade-intent small { display: block; margin-top: var(--cd-space-1); font-weight: var(--cd-weight-normal); color: var(--cd-color-muted); }
@media (max-width: 40rem) {
 .cd-trade-intent > div { grid-template-columns: minmax(0,1fr); }
 .cd-trade-form [type="submit"] { width: 100%; }
}