/* ── Outer shell ──────────────────────────────────────────────────────────── */
.cartcue-builder {
	border: 0.5px solid #e5e4f0;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 12px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
	grid-template-rows: auto 1fr;
	min-height: 520px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: #fff;
}

/* ── Builder toolbar (Build / Preview) ─────────────────────────────────── */
.cb-builder-toolbar {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 8px 12px;
	background: #faf9ff;
	border-bottom: 0.5px solid #e5e4f0;
	min-height: 38px;
}
.cb-builder-toolbar .cb-view-group {
	margin-left: 0;
	margin-right: 0;
}

/* Build: Structure | Edit — Preview: Structure | Preview */
.cartcue-builder[data-builder-view="list"] .cb-preview-col { display: none; }
.cartcue-builder[data-builder-view="preview"] .cb-edit-col { display: none; }

/* Live preview sidebar replaces the in-builder preview column */
.ap-action-card--split .cartcue-builder,
.cartcue-builder.cartcue-builder--external-preview {
	grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
	min-height: 480px;
}
/* Full-width builder when live preview panel is collapsed */
.ap-action-card--preview-collapsed .cartcue-builder,
.ap-action-card--preview-collapsed .cartcue-builder.cartcue-builder--external-preview {
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	min-height: 520px;
}
.ap-action-card--preview-collapsed .cb-widgets-rail {
	width: 172px;
}
.ap-action-card--preview-collapsed .cb-canvas-wrap {
	min-width: 0;
}
.ap-action-card--preview-collapsed .cartcue-builder--external-preview .cb-toolbar-hint::after {
	content: none;
}
.ap-action-card--split .cartcue-builder .cb-preview-col,
.cartcue-builder.cartcue-builder--external-preview .cb-preview-col {
	display: none !important;
}
.ap-action-card--split .cartcue-builder[data-builder-view="preview"] .cb-edit-col,
.cartcue-builder.cartcue-builder--external-preview[data-builder-view="preview"] .cb-edit-col {
	display: flex;
}
.ap-action-card--split .cartcue-builder .cb-view-btn[data-view="preview"],
.cartcue-builder.cartcue-builder--external-preview .cb-view-btn[data-view="preview"] {
	display: none;
}
.cb-builder-toolbar {
	justify-content: space-between;
	gap: 12px;
}
.cb-toolbar-hint {
	font-size: 11px;
	color: #6f699f;
	line-height: 1.35;
	max-width: min(420px, 55%);
}
.cartcue-builder--external-preview .cb-toolbar-hint::after {
	content: ' · Live preview updates on the right →';
	color: #9f9bc5;
}
.cb-toolbar-hint strong {
	color: #534AB7;
	font-weight: 600;
}

/* ── Zone headers (row 1 of grid) ────────────────────────────────────────── */
.cb-zone-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: #faf9ff;
	border-bottom: 0.5px solid #e5e4f0;
	min-height: 38px;
}
.cb-zone-header--structure { border-right: 0.5px solid #e5e4f0; }
.cb-zone-header--edit      { border-right: 0.5px solid #e5e4f0; }

.cb-zone-label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	color: #7c79a8;
}
.cb-zone-label i { font-size: 13px; }

.cb-block-count {
	font-size: 11px;
	font-weight: 600;
	background: #EEEDFE;
	color: #534AB7;
	border-radius: 20px;
	padding: 3px 9px;
	box-shadow: inset 0 0 0 1px #d6d1f8;
}
.cb-view-group { display: inline-flex; gap: 4px; margin-left: auto; margin-right: 0; }
.cb-view-btn {
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 20px;
	border: 0.5px solid #d0cfe8;
	background: #fff;
	cursor: pointer;
	color: #888;
}
.cb-view-btn.is-active { background: #534AB7; border-color: #534AB7; color: #fff; font-weight: 500; }

/* ── Structure zone: widgets rail + visual canvas ───────────────────────── */
.cb-structure-col {
	border-right: 0.5px solid #e5e4f0;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cb-structure-body {
	flex: 1;
	display: flex;
	min-height: 0;
	min-width: 0;
}

.cb-widgets-rail {
	width: 148px;
	flex-shrink: 0;
	border-right: 0.5px solid #e5e4f0;
	background: #faf9ff;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.cb-widgets-rail-head {
	padding: 10px 10px 8px;
	background: linear-gradient(180deg, #EEEDFE 0%, #faf9ff 100%);
	border-bottom: 0.5px solid #e5e4f0;
}
.cb-widgets-rail-title {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #534AB7;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.cb-widgets-rail-hint {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	color: #9f9bc5;
	line-height: 1.35;
}

.cb-widget-region { border-bottom: 0.5px solid #e5e4f0; }
.cb-widget-region--blocks {
	background: #fff;
}
.cb-widget-region--blocks .cb-widget-region-header {
	color: #1a1830;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.cb-widget-region--styles {
	background: #faf9ff;
}
.cb-widget-region-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 10px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 11px;
	font-weight: 600;
	color: #534AB7;
	text-align: left;
}
.cb-widget-region-header i { font-size: 10px; color: #9b97be; transition: transform .12s; }
.cb-widget-region.is-open .cb-widget-region-header i { transform: rotate(180deg); }
.cb-widget-region-body { display: none; padding: 0 8px 8px; }
.cb-widget-region.is-open .cb-widget-region-body { display: block; }

.cb-widget-chips { display: flex; flex-direction: column; gap: 4px; }
.cb-widget-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 7px 9px;
	border: 1px solid #d8d6ef;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-size: 11px;
	font-weight: 500;
	color: #3C3489;
	text-align: left;
	transition: background .12s, border-color .12s, box-shadow .12s;
	box-shadow: 0 1px 2px rgba(83, 74, 183, 0.06);
}
.cb-widget-chip-add {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: #534AB7;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}
.cb-widget-chip i.ti { font-size: 13px; opacity: .9; color: #534AB7; }
.cb-widget-chip:hover {
	background: #EEEDFE;
	border-color: #534AB7;
	box-shadow: 0 2px 6px rgba(83, 74, 183, 0.12);
}
.cb-widget-chip:active {
	transform: translateY(1px);
}

.cb-style-field .cb-input { font-size: 11px; padding: 5px 7px; }

.cb-canvas-wrap {
	flex: 1;
	min-width: 0;
	background: #eceaf5;
	overflow-y: auto;
	padding: 14px;
	position: relative;
}
.cb-canvas-wrap::before {
	content: 'Email canvas';
	position: sticky;
	top: 0;
	left: 0;
	display: block;
	width: fit-content;
	margin: 0 0 8px;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #6f699f;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 4px;
	z-index: 1;
}

.cb-newsletter-shell {
	max-width: 600px;
	margin: 0 auto;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(15, 8, 50, .08);
	min-height: 200px;
}

.cb-canvas-blocks {
	padding: 8px 0;
}

.cb-visual-block {
	position: relative;
	border: 2px solid transparent;
	margin: 0 12px 2px;
	transition: border-color .12s, box-shadow .12s;
}
.cb-visual-block:hover,
.cb-visual-block.is-selected {
	border-color: #534AB7;
	box-shadow: 0 0 0 1px rgba(83, 74, 183, .15);
}
.cb-visual-block.cb-dragging { opacity: .45; }
.cb-visual-block.cb-drag-over { border-color: #7c79a8; border-style: dashed; }

.cb-block-tools {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s;
}
.cb-visual-block:hover .cb-block-tools,
.cb-visual-block.is-selected .cb-block-tools {
	opacity: 1;
	pointer-events: auto;
}

.cb-block-tools-slider {
	display: flex;
	gap: 2px;
	background: #534AB7;
	border-radius: 4px;
	padding: 3px;
	box-shadow: 0 2px 8px rgba(40, 31, 120, .25);
}

.cb-tool-btn,
.cb-tool-drag {
	width: 24px;
	height: 24px;
	border: none;
	background: transparent;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	font-size: 12px;
	padding: 0;
}
.cb-tool-btn:hover,
.cb-tool-drag:hover { background: rgba(255, 255, 255, .15); }
.cb-tool-delete:hover { background: rgba(220, 60, 60, .5); }
.cb-tool-drag { cursor: grab; }
.cb-tool-drag:active { cursor: grabbing; }

.cb-visual-inner {
	padding: 14px 16px;
	min-height: 24px;
}
.cb-visual-inner p { margin: 0 0 10px; }
.cb-visual-inner p:last-child { margin-bottom: 0; }

.cb-visual-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
}
.cb-visual-divider {
	border: none;
	border-top: 1px solid #e5e4f0;
	margin: 8px 0;
}
.cb-visual-spacer { background: repeating-linear-gradient(
	45deg,
	transparent,
	transparent 4px,
	rgba(83, 74, 183, .04) 4px,
	rgba(83, 74, 183, .04) 8px
); }
.cb-visual-placeholder {
	color: #9b97be;
	font-size: 12px;
	text-align: center;
	font-style: italic;
}
.cb-visual-address span {
	display: block;
	font-size: 10px;
	margin-top: 4px;
}
.cb-visual-columns {
	display: flex;
	gap: 12px;
}
.cb-visual-col {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	line-height: 1.5;
}
.cb-visual-img { height: auto; display: inline-block; }

.cb-history-group {
	display: inline-flex;
	gap: 3px;
	margin-left: 6px;
}
.cb-ctrl-btn:disabled { opacity: .35; cursor: not-allowed; }

.cb-insert-bar {
	padding: 8px 10px;
	border-bottom: 0.5px solid #e5e4f0;
	background: #fff;
}
.cb-insert-label {
	font-size: 11px;
	font-weight: 500;
	color: #888;
	margin-bottom: 5px;
}
.cb-insert-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.cb-add-chip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	border: 0.5px solid #d8d6ef;
	border-radius: 20px;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
	background: #fff;
	color: #534AB7;
	line-height: 1;
	transition: background .12s, border-color .12s;
}
.cb-add-chip i { font-size: 10px; }
.cb-add-chip:hover { background: #EEEDFE; border-color: #534AB7; }

.cb-canvas {
	flex: 1;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
	background: linear-gradient(180deg, #f7f6fe 0%, #f3f1fb 100%);
}

/* Legacy list canvas (unused after visual mode) */

/* ── Block cards in canvas ───────────────────────────────────────────────── */
.cb-block-card {
	display: flex;
	align-items: stretch;
	border: 1.5px solid #e0ddf5;
	border-radius: 7px;
	background: #fff;
	cursor: pointer;
	transition: border-color .12s, box-shadow .12s;
	overflow: hidden;
}
.cb-block-card:hover { border-color: #b8b3e0; box-shadow: 0 2px 6px rgba(40,31,120,.06); }
.cb-block-card.is-selected {
	border-color: #534AB7;
	box-shadow: 0 0 0 2px #EEEDFE;
}
.cb-block-card.is-selected .cb-card-accent { background: #534AB7; }

.cb-card-accent { width: 3px; flex-shrink: 0; background: transparent; transition: background .12s; }

.cb-drag-handle {
	width: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #faf9ff;
	border-right: 0.5px solid #f0eefb;
	flex-shrink: 0;
	cursor: grab;
	color: #c5c3e0;
	font-size: 11px;
}
.cb-drag-handle:active { cursor: grabbing; }

.cb-card-body {
	flex: 1;
	padding: 7px 9px;
	min-width: 0;
}
.cb-card-type-row {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 3px;
}
.cb-card-type-icon {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 9px;
}
.cti-text    { background: #E6F1FB; color: #0C447C; }
.cti-button  { background: #EAF3DE; color: #27500A; }
.cti-image   { background: #FAEEDA; color: #633806; }
.cti-columns { background: #FBEAF0; color: #72243E; }
.cti-divider { background: #F1EFE8; color: #444441; }
.cti-spacer  { background: #F1EFE8; color: #444441; }
.cti-logo    { background: #EEEDFE; color: #3C3489; }
.cti-address { background: #E1F5EE; color: #085041; }

.cb-card-type-name {
	font-size: 10px;
	font-weight: 500;
	color: #9b97be;
}
.cb-card-preview {
	font-size: 11px;
	color: #666;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cb-card-preview-btn {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 11px;
	margin-top: 2px;
}
.cb-card-preview-divider { border-top: 1px solid #e5e4f0; margin: 5px 0; }
.cb-card-preview-spacer  { font-size: 10px; color: #bbb; }

.cb-card-ctrl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 4px 4px;
	border-left: 0.5px solid #f0eefb;
	flex-shrink: 0;
}
.cb-ctrl-btn {
	width: 22px;
	height: 22px;
	border-radius: 4px;
	border: 0.5px solid #e0ddf5;
	background: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #9b97be;
	transition: border-color .12s, color .12s, background .12s;
	padding: 0;
}
.cb-ctrl-btn:hover { border-color: #b8b3e0; color: #534AB7; background: #EEEDFE; }
.cb-ctrl-btn.cb-ctrl-delete:hover { border-color: #F09595; color: #A32D2D; background: #FCEBEB; }

.cb-canvas-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	color: #9b97be;
}
.cb-canvas-empty i  { font-size: 28px; margin-bottom: 8px; }
.cb-canvas-empty p  { font-size: 11px; line-height: 1.5; }

/* ── Edit zone ───────────────────────────────────────────────────────────── */
.cb-edit-col {
	border-right: 0.5px solid #e5e4f0;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.cb-edit-area {
	flex: 1;
	padding: 14px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cb-edit-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	color: #9b97be;
}
.cb-edit-empty i { font-size: 32px; margin-bottom: 10px; }
.cb-edit-empty p { font-size: 12px; line-height: 1.6; max-width: 200px; }
.cb-edit-empty-hint {
	display: inline-block;
	margin-top: 10px;
	font-size: 11px;
	background: #EEEDFE;
	color: #534AB7;
	border-radius: 20px;
	padding: 3px 10px;
	font-weight: 500;
}

.cb-edit-block-id {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 12px;
	border-bottom: 0.5px solid #e5e4f0;
}
.cb-edit-block-icon {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}
.cb-edit-block-title { font-size: 13px; font-weight: 500; }
.cb-edit-block-sub   { font-size: 11px; color: #888; }

.cb-field-group { display: flex; flex-direction: column; gap: 4px; }
.cb-field-label {
	font-size: 11px;
	font-weight: 500;
	color: #666;
	display: block;
	margin-bottom: 2px;
}

.cb-rich-editor {
	min-height: 72px;
	border: 0.5px solid #d0cfe8;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	line-height: 1.6;
	color: #333;
	background: #fff;
	cursor: text;
}
.cb-rich-editor:focus { outline: none; border-color: #534AB7; box-shadow: 0 0 0 2px #EEEDFE; }

.cb-input {
	width: 100%;
	font-size: 13px;
	padding: 7px 9px;
	border: 0.5px solid #d0cfe8;
	border-radius: 6px;
	background: #fff;
	color: #1a1830;
	box-sizing: border-box;
}
.cb-input:focus { outline: none; border-color: #534AB7; box-shadow: 0 0 0 2px #EEEDFE; }
.cb-input--sm  { width: 72px; }
.cb-input--hex { width: 88px; }

.cb-fmt-bar { display: flex; gap: 3px; }
.cb-fmt-btn {
	width: 28px;
	height: 28px;
	border: 0.5px solid #d0cfe8;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: #555;
	transition: background .12s, border-color .12s;
}
.cb-fmt-btn:hover { background: #EEEDFE; border-color: #534AB7; color: #534AB7; }

.cb-vars-section {
	background: #faf9ff;
	border: 0.5px solid #e5e4f0;
	border-radius: 7px;
	padding: 9px 10px;
}
.cb-vars-section-label {
	font-size: 11px;
	font-weight: 500;
	color: #888;
	margin-bottom: 7px;
}
.cb-var-group { margin-bottom: 6px; }
.cb-var-group:last-child { margin-bottom: 0; }
.cb-var-group-name {
	font-size: 10px;
	color: #aaa;
	margin-bottom: 3px;
}
.cb-var-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.cb-var-chip {
	font-size: 10px;
	font-weight: 500;
	padding: 2px 7px;
	border-radius: 20px;
	cursor: pointer;
	border: none;
	line-height: 1.4;
	transition: filter .1s;
}
.cb-var-chip:hover { filter: brightness(.9); }
.cb-var-chip--customer { background: #E6F1FB; color: #0C447C; }
.cb-var-chip--order    { background: #EAF3DE; color: #27500A; }
.cb-var-chip--cart     { background: #FAEEDA; color: #633806; }
.cb-var-chip--coupon   { background: #FBEAF0; color: #72243E; }
.cb-var-chip--shop     { background: #EEEDFE; color: #3C3489; }

.cb-align-row { display: flex; gap: 4px; }
.cb-align-btn {
	flex: 1;
	height: 30px;
	padding: 0 10px;
	border: 0.5px solid #d0cfe8;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	color: #666;
	transition: border-color .12s, background .12s, color .12s;
}
.cb-align-btn.is-active { border-color: #534AB7; background: #EEEDFE; color: #3C3489; font-weight: 500; }
.cb-align-btn:hover:not(.is-active) { border-color: #b8b3e0; color: #534AB7; }

.cb-color-wrap { display: flex; gap: 7px; align-items: center; }
.cb-color-picker {
	width: 34px;
	height: 34px;
	padding: 2px;
	border: 0.5px solid #d0cfe8;
	border-radius: 6px;
	cursor: pointer;
}

.cb-slider-row { display: flex; align-items: center; gap: 10px; }
.cb-slider-row input[type="range"] { flex: 1; }
.cb-slider-val { font-size: 12px; font-weight: 500; min-width: 36px; color: #1a1830; }

.cb-info-box {
	background: #faf9ff;
	border: 0.5px dashed #d8d6ef;
	border-radius: 7px;
	padding: 9px 10px;
	font-size: 11px;
	color: #7c79a8;
	line-height: 1.5;
}

.cb-media-btn {
	width: 100%;
	padding: 16px;
	border: 1.5px dashed #d0cfe8;
	border-radius: 7px;
	background: #faf9ff;
	cursor: pointer;
	font-size: 12px;
	color: #534AB7;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: border-color .12s, background .12s;
}
.cb-media-btn:hover { border-color: #534AB7; background: #EEEDFE; }

/* ── Preview zone ─────────────────────────────────────────────────────────── */
.cb-preview-col { display: flex; flex-direction: column; }
.cb-preview-area {
	flex: 1;
	background: #eceaf5;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 14px 10px;
	overflow-y: auto;
}
.cb-preview-frame {
	width: 100%;
	max-width: 600px;
	min-height: 360px;
	border: none;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(15,8,50,.10);
	background: #fff;
	transition: max-width .16s;
}
.cb-preview-area[data-viewport="mobile"] .cb-preview-frame { max-width: 375px; }

.cb-vp-group { display: flex; gap: 3px; }
.cb-vp-btn {
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 20px;
	border: 0.5px solid #d0cfe8;
	background: #fff;
	cursor: pointer;
	color: #888;
	transition: background .12s, border-color .12s, color .12s;
}
.cb-vp-btn.is-active { background: #534AB7; border-color: #534AB7; color: #fff; font-weight: 500; }

@media (max-width: 1100px) {
	.cartcue-builder {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
	}
	.cb-zone-header--structure,
	.cb-zone-header--edit { border-right: 0; }
	.cb-structure-col,
	.cb-edit-col,
	.cb-preview-col { border-right: 0; border-bottom: 0.5px solid #e5e4f0; }
	.cb-structure-body { flex-direction: column; }
	.cb-widgets-rail {
		width: 100%;
		border-right: 0;
		border-bottom: 0.5px solid #e5e4f0;
		max-height: 160px;
	}
	.cb-widget-chips { flex-direction: row; flex-wrap: wrap; }
	.cb-widget-chip { width: auto; flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.cb-block-card,
	.cb-ctrl-btn,
	.cb-add-chip,
	.cb-preview-frame,
	.cb-align-btn,
	.cb-var-chip { transition: none; }
}

.cb-var-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: 2px 0 3px;
	cursor: pointer;
	text-align: left;
}
.cb-var-group-header:hover .cb-var-group-name { color: #534AB7; }
.cb-var-group-chevron { font-size: 10px; color: #bbb; }

.cb-var-chips--collapsed { display: none; }
.cb-var-chips:not(.cb-var-chips--collapsed) { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 4px; }

.cb-link-input-row {
	display: flex;
	gap: 5px;
	align-items: center;
	padding: 6px 0 2px;
}
.cb-link-input-row .cb-input { flex: 1; font-size: 12px; padding: 5px 8px; }
.cb-link-insert-btn,
.cb-link-cancel-btn {
	font-size: 11px;
	font-weight: 500;
	padding: 5px 10px;
	border-radius: 5px;
	border: 0.5px solid #d0cfe8;
	cursor: pointer;
	white-space: nowrap;
}
.cb-link-insert-btn { background: #534AB7; color: #fff; border-color: #534AB7; }
.cb-link-insert-btn:hover { background: #3C3489; }
.cb-link-cancel-btn { background: #fff; color: #666; }
.cb-link-cancel-btn:hover { background: #f5f5f5; }

.cb-preview-test-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 500;
	padding: 3px 10px;
	border-radius: 20px;
	border: 0.5px solid #d0cfe8;
	background: #fff;
	color: #534AB7;
	cursor: pointer;
	margin-left: auto;
	margin-right: 6px;
	transition: background .12s, border-color .12s;
}
.cb-preview-test-btn i { font-size: 10px; }
.cb-preview-test-btn:hover { background: #EEEDFE; border-color: #534AB7; }

.cb-chips-sep {
	display: inline-block;
	width: 0.5px;
	height: 16px;
	background: #d8d6ef;
	margin: 0 3px;
	align-self: center;
}

.cb-add-chip--utility {
	color: #888;
	border-color: #e5e4f0;
}
.cb-add-chip--utility:hover {
	background: #f5f4fe;
	border-color: #b8b3e0;
	color: #534AB7;
}
