.cms-editor-shell {
	border: 1px solid var(--input);
	border-radius: 0.5rem;
	padding: 0.75rem;
	background: var(--background);
	color: var(--foreground);
	/* height: auto; */
}
.cms-editor-shell:focus-within {
	outline: 3px solid color-mix(in srgb, var(--ring) 50%, transparent);
	border-color: var(--ring);
}
.cms-editor-shell .ce-block__content,
.cms-editor-shell .ce-toolbar__content {
	max-width: 100%;
}
.cms-editor-shell .ce-paragraph {
	color: var(--foreground);
	font-size: 1rem;
	line-height: 1.5;
}
.cms-editor-shell .ce-header {
	color: var(--foreground);
	font-weight: 600;
}
.cms-editor-shell .ce-header-h1 {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}
.cms-editor-shell .ce-header-h2 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}
.cms-editor-shell .ce-header-h3 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}
.cms-editor-shell .cdx-list {
	color: var(--foreground);
	margin-left: 1.5rem;
}
.cms-editor-shell .cdx-quote {
	color: var(--foreground);
	border-left: 4px solid var(--primary);
	padding-left: 1rem;
	font-style: italic;
}
.cms-editor-shell .cdx-input {
	color: var(--foreground);
}
.cms-editor-shell .tc-wrap {
	color: var(--foreground);
}
.cms-editor-shell .cdx-table {
	border-collapse: collapse;
	width: 100%;
}
.cms-editor-shell .cdx-table td,
.cms-editor-shell .cdx-table th {
	border: 1px solid var(--input);
	padding: 0.5rem;
}
.cms-editor-shell .ce-toolbar__plus,
.cms-editor-shell .ce-toolbar__settings-btn {
	color: var(--foreground);
}
.cms-editor-shell .ce-popover {
	z-index: 60;
}
.cms-editor-shell .cdx-imagetoolbox {
	max-width: 100%;
}
.cms-editor-shell img {
	max-width: 100%;
}

.cms-editor-shell .ce-block__content > [contenteditable="true"],
.cms-editor-shell .cdx-input,
.cms-editor-shell input:not([type]),
.cms-editor-shell input[type="text"],
.cms-editor-shell input[type="url"],
.cms-editor-shell input[type="number"],
.cms-editor-shell input[type="email"],
.cms-editor-shell input[type="tel"],
.cms-editor-shell textarea,
.cms-editor-shell select {
	border: 1px solid color-mix(in srgb, var(--input) 88%, var(--foreground) 12%);
	border-radius: 0.625rem;
	background: color-mix(in srgb, var(--background) 82%, var(--muted) 18%);
	box-shadow: inset 0 1px 0 color-mix(in srgb, white 75%, transparent);
	transition:
		border-color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease;
}

.cms-editor-shell .ce-block__content > [contenteditable="true"],
.cms-editor-shell .ce-paragraph,
.cms-editor-shell .ce-header,
.cms-editor-shell .cdx-input {
	padding: 0.75rem 0.9rem;
}

.cms-editor-shell input:not([type]),
.cms-editor-shell input[type="text"],
.cms-editor-shell input[type="url"],
.cms-editor-shell input[type="number"],
.cms-editor-shell input[type="email"],
.cms-editor-shell input[type="tel"],
.cms-editor-shell textarea,
.cms-editor-shell select {
	padding: 0.55rem 0.75rem;
	color: var(--foreground);
}

.cms-editor-shell textarea {
	min-height: 7rem;
	resize: vertical;
}

.cms-editor-shell .ce-block__content > [contenteditable="true"]:focus,
.cms-editor-shell .cdx-input:focus,
.cms-editor-shell input:not([type]):focus,
.cms-editor-shell input[type="text"]:focus,
.cms-editor-shell input[type="url"]:focus,
.cms-editor-shell input[type="number"]:focus,
.cms-editor-shell input[type="email"]:focus,
.cms-editor-shell input[type="tel"]:focus,
.cms-editor-shell textarea:focus,
.cms-editor-shell select:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--ring) 70%, var(--primary) 30%);
	background: color-mix(in srgb, var(--background) 92%, white 8%);
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent),
		inset 0 1px 0 color-mix(in srgb, white 82%, transparent);
}

.cms-editor-shell input[type="checkbox"],
.cms-editor-shell input[type="radio"] {
	accent-color: var(--primary);
}

.cms-editor-shell--compact .codex-editor__redactor {
	padding-bottom: 0 !important;
}

.cms-editor-shell--compact .gc-cols {
	flex-direction: column;
	align-items: stretch;
}

.cms-editor-shell--compact .gc-col-wrap {
	width: 100%;
	flex: 0 0 auto;
}

.cms-editor-shell--compact .gc-col {
	min-width: 0;
}

.cms-editor-shell--compact .cms-img-outer {
	max-width: min(50%, 24rem);
}

.cms-editor-shell--compact .cms-img-container img {
	max-height: 12rem;
	object-fit: contain;
}

.cms-editor-shell--compact .card-tool__media-container {
	max-width: min(50%, 18rem);
	margin-inline: auto;
}

.cms-editor-shell--compact .card-tool__media-container img {
	max-height: 8rem;
}

.cms-editor-shell--compact .cms-link-wrap-tool--inline-card {
	border: none;
	border-radius: 0;
	overflow: visible;
	background: transparent;
}

.cms-editor-shell--compact .cms-link-wrap-tool--inline-card .cms-link-wrap-tool__body {
	padding: 0;
}

.cms-editor-shell--compact .cms-link-wrap-tool--inline-card .cms-link-wrap-tool__holder {
	border: none;
	border-radius: 0;
	padding: 0;
	min-height: 0;
}

.cms-editor-shell--compact .cms-link-wrap-tool--inline-card .card-tool--show-media .card-tool__content {
	display: grid;
	grid-template-columns: minmax(0, 30%) minmax(0, 70%);
	align-items: start;
}

.cms-editor-shell--compact .cms-link-wrap-tool--inline-card .card-tool--show-media .card-tool__media {
	border-right: 1px dashed var(--input);
}

.cms-editor-shell--compact .cms-link-wrap-tool--inline-card .card-tool__media-container {
	max-width: none;
	margin-inline: 0;
}

.cms-editor-shell--compact .cms-link-wrap-tool--inline-card .card-tool__media-container img {
	max-height: none;
}

.cms-editor-shell--compact .cms-link-wrap-tool--inline-card .card-tool__body {
	padding: 0.5rem 0.75rem 0.6rem;
}

.cms-editor-shell--compact .cms-link-wrap-tool--inline-card .cms-link-wrap-tool__options {
	padding: 0 0 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px dashed var(--input);
	background: transparent;
}

@media (max-width: 900px) {
	.cms-editor-shell--compact .cms-link-wrap-tool--inline-card .card-tool--show-media .card-tool__content {
		grid-template-columns: 1fr;
	}

	.cms-editor-shell--compact .cms-link-wrap-tool--inline-card .card-tool--show-media .card-tool__media {
		border-right: none;
		border-bottom: 1px dashed var(--input);
	}
}

.cms-editor-shell--compact .tc-cols {
	flex-direction: column;
}

.cms-editor-shell--compact .tc-col-wrap {
	width: 100%;
}

.cms-rendered-content {
	color: var(--foreground);
	line-height: 1.5;
}
.cms-rendered-content p {
	/* height: auto; */
	margin: 0 0 0.75rem;
}
.cms-rendered-content h1,
.cms-rendered-content h2,
.cms-rendered-content h3,
.cms-rendered-content h4,
.cms-rendered-content h5,
.cms-rendered-content h6 {
	color: var(--foreground);
	font-weight: 600;
	line-height: 1.25;
	margin: 0.75rem 0 0.5rem;
}
.cms-rendered-content h1 { font-size: 2rem; }
.cms-rendered-content h2 { font-size: 1.5rem; }
.cms-rendered-content h3 { font-size: 1.25rem; }
.cms-rendered-content ul,
.cms-rendered-content ol {
	margin: 0 0 0.75rem 1.5rem;
}
.cms-rendered-content blockquote,
.cms-rendered-content .cms-quote {
	margin: 0 0 1rem;
	padding: 1.25rem 1.5rem;
	border-left: 5px solid var(--primary);
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--primary) 6%, var(--background));
	color: color-mix(in srgb, var(--foreground) 78%, var(--primary));
	font-style: normal;
}
.cms-rendered-content blockquote > p,
.cms-rendered-content .cms-quote > p {
	margin: 0 0 0.75rem;
	line-height: 1.6;
}
.cms-rendered-content blockquote > p:last-of-type,
.cms-rendered-content .cms-quote > p:last-of-type {
	margin-bottom: 0;
}
.cms-rendered-content blockquote cite,
.cms-rendered-content .cms-quote cite {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--muted-foreground);
}
.cms-rendered-content pre {
	margin: 0 0 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: color-mix(in srgb, var(--muted) 70%, var(--background));
	overflow-x: auto;
}
.cms-rendered-content table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 0.75rem;
}
.cms-rendered-content th,
.cms-rendered-content td {
	border: 1px solid var(--input);
	padding: 0.5rem;
	text-align: left;
	vertical-align: top;
}
.cms-rendered-content img {
	display: block;
	max-width: 100%;
	margin: 0 0 0.75rem;
}
.cms-rendered-content figure {
	margin: 0 0 0.75rem;
}
.cms-rendered-content figcaption {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

/* Two-column block — rendered output.
   align-items: stretch (the flex default) makes each column fill the row's full
   height, so a `position: sticky` child (e.g. the TOC rail) has a taller
   containing block to stick within. With flex-start the column collapses to its
   own content height and sticky has no scroll room. Column content still flows
   from the top, so stretching the box changes nothing visually. */
.cms-rendered-content .cms-two-col {
	display: flex;
	gap: 1.5rem;
	align-items: stretch;
	margin: 0 0 1rem;
}
.cms-rendered-content .cms-two-col__col {
	flex: 1;
	min-width: 0;
}
@media (max-width: 640px) {
	.cms-rendered-content .cms-two-col {
		flex-direction: column;
	}
}

/* Section / Container block — rendered.
   <section> carries padding (px, inline) + background/rounded (classes);
   inner <div.max-w-7xl> is the centered flex column that carries gap (px, inline). */
.cms-rendered-content .cms-section-container {
	scroll-margin-top: 5rem; /* anchor offset under sticky header (≈ scroll-mt-20) */
}
.cms-rendered-content .cms-section-container > div {
	display: flex;
	flex-direction: column;
}
.cms-rendered-content .cms-section-container--bg-none { background: transparent; }
.cms-rendered-content .cms-section-container--bg-white { background: var(--background); }
.cms-rendered-content .cms-section-container--bg-light { background: color-mix(in srgb, var(--muted) 60%, var(--background)); }
.cms-rendered-content .cms-section-container--bg-primary {
	background: var(--primary);
	color: var(--primary-foreground);
}
.cms-rendered-content .cms-section-container--bg-secondary {
	background: var(--secondary);
	color: var(--secondary-foreground);
}
.cms-rendered-content .cms-section-container--bg-dark {
	background: #0f172a;
	color: #f8fafc;
}
.cms-rendered-content .cms-section-container--rounded { border-radius: 0.75rem; }

.cms-block-view .cms-rendered-content > .cms-section-container:last-child {
	padding-bottom: 1.5rem !important;
}

/* On "Edit CMS" the page scrolls to the top of the block — leave room for the
   sticky site header so the item's start isn't hidden underneath it. */
.cms-block {
	scroll-margin-top: 5rem;
}

/* Two-column block — editor shell */
.cms-editor-shell .tc-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.4rem;
}
.cms-editor-shell .tc-split-label {
	font-size: 0.65rem;
	font-variant-numeric: tabular-nums;
	color: var(--muted-foreground);
	min-width: 3.5rem;
}
.cms-editor-shell .tc-gap-btns {
	display: flex;
	gap: 0.2rem;
}
.cms-editor-shell .tc-gap-btn {
	font-size: 0.65rem;
	padding: 0.15rem 0.4rem;
	border: 1px solid var(--input);
	border-radius: 0.25rem;
	background: var(--background);
	color: var(--muted-foreground);
	cursor: pointer;
	line-height: 1.4;
}
.cms-editor-shell .tc-gap-btn.active {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}
.cms-editor-shell .tc-cols {
	display: flex;
	align-items: stretch;
}
.cms-editor-shell .tc-divider {
	width: 6px;
	flex-shrink: 0;
	cursor: col-resize;
	border-radius: 3px;
	background: var(--input);
	transition: background 0.15s;
	align-self: stretch;
	margin: 0 -2px;
}
.cms-editor-shell .tc-divider:hover,
.cms-editor-shell .tc-divider.dragging {
	background: var(--primary);
}
.cms-editor-shell .tc-col-wrap {
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.cms-editor-shell .tc-col-label {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted-foreground);
	margin-bottom: 0.25rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--input);
}
.cms-editor-shell .tc-col {
	flex: 1;
	border: 1px dashed var(--input);
	border-radius: 0.375rem;
	padding: 0.25rem 0.5rem;
	background: color-mix(in srgb, var(--muted) 15%, var(--background));
}
.cms-editor-shell .tc-col .ce-block__content,
.cms-editor-shell .tc-col .ce-toolbar__content {
	max-width: 100%;
}

/* Grid Columns block — editor shell */
.cms-editor-shell .gc-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.4rem;
}
.cms-editor-shell .gc-count-label {
	font-size: 0.65rem;
	color: var(--muted-foreground);
	font-variant-numeric: tabular-nums;
}
.cms-editor-shell .gc-gap-control {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.cms-editor-shell .gc-gap-label,
.cms-editor-shell .gc-gap-unit {
	font-size: 0.65rem;
	color: var(--muted-foreground);
}
.cms-editor-shell .gc-gap-input {
	width: 3.5rem;
	font-size: 0.65rem;
	padding: 0.1rem 0.3rem;
	border: 1px solid var(--input);
	border-radius: 0.25rem;
	background: var(--background);
	color: var(--foreground);
	outline: none;
	font-variant-numeric: tabular-nums;
}
.cms-editor-shell .gc-gap-input:focus {
	border-color: var(--ring);
}
.cms-editor-shell .gc-add-btn {
	font-size: 0.7rem;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--input);
	border-radius: 0.25rem;
	background: var(--background);
	color: var(--foreground);
	cursor: pointer;
	line-height: 1.4;
}
.cms-editor-shell .gc-add-btn:hover {
	background: var(--muted);
}
.cms-editor-shell .gc-cols {
	display: flex;
	gap: 1rem;
	align-items: stretch;
}
.cms-editor-shell .gc-col-wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.cms-editor-shell .gc-col-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.25rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--input);
}
.cms-editor-shell .gc-col-label {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted-foreground);
}
.cms-editor-shell .gc-remove-btn {
	font-size: 0.7rem;
	line-height: 1;
	padding: 0.1rem 0.3rem;
	border: 1px solid var(--input);
	border-radius: 0.25rem;
	background: var(--background);
	color: var(--muted-foreground);
	cursor: pointer;
}
.cms-editor-shell .gc-remove-btn:hover:not(:disabled) {
	background: var(--destructive);
	color: var(--destructive-foreground);
	border-color: var(--destructive);
}
.cms-editor-shell .gc-remove-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
.cms-editor-shell .gc-col {
	flex: 1;
	border: 1px dashed var(--input);
	border-radius: 0.375rem;
	padding: 0.25rem 0.5rem;
	background: color-mix(in srgb, var(--muted) 15%, var(--background));
}
.cms-editor-shell .gc-col .ce-block__content,
.cms-editor-shell .gc-col .ce-toolbar__content {
	max-width: 100%;
}

/* Grid Columns block — rendered output */
.cms-rendered-content .cms-grid {
	display: flex;
	align-items: flex-start;
	margin: 0 0 1rem;
}
.cms-rendered-content .cms-grid__col {
	flex: 1;
	min-width: 0;
}
@media (max-width: 640px) {
	.cms-rendered-content .cms-grid {
		flex-direction: column;
	}
}

/* Base block — editor shell */
.cms-editor-shell .bb-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px dashed var(--primary);
	border-radius: 0.375rem;
	background: color-mix(in srgb, var(--primary) 5%, var(--background));
}
.cms-editor-shell .bb-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary);
	font-weight: 600;
	white-space: nowrap;
}
.cms-editor-shell .bb-select {
	flex: 1;
	font-size: 0.875rem;
	color: var(--foreground);
	background: var(--background);
	border: 1px solid var(--input);
	border-radius: 0.25rem;
	padding: 0.2rem 0.4rem;
}
.cms-editor-shell .bb-slug {
	font-family: monospace;
	font-size: 0.85rem;
	color: var(--muted-foreground);
}

/* Base block — rendered output */
.cms-rendered-content .cms-base-block {
	margin: 0;
}
.cms-rendered-content .cms-base-block-placeholder {
	display: none;
}

/* Image block — editor shell */
.cms-img-uploader {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1rem;
	border: 2px dashed var(--input);
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--muted) 30%, var(--background));
	/* height: auto; */
}
.cms-img-error {
	flex-basis: 100%;
	font-size: 0.8125rem;
	color: var(--destructive, #dc2626);
}
.cms-img-file-btn {
	cursor: pointer;
	padding: 0.35rem 0.75rem;
	background: var(--primary);
	color: var(--primary-foreground);
	border-radius: 0.375rem;
	font-size: 0.875rem;
	white-space: nowrap;
}
.cms-img-sep {
	font-size: 0.75rem;
	color: var(--muted-foreground);
}
.cms-img-url-input {
	flex: 1;
	padding: 0.35rem 0.5rem;
	font-size: 0.875rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: var(--background);
	color: var(--foreground);
	outline: none;
}
.cms-img-outer {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 0.25rem;
}
.cms-img-container {
	position: relative;
	width: 100%;
	line-height: 0;
}
.cms-img-container img {
	display: block;
	width: 100%;
}

/* Width badge — visible on hover */
.cms-img-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 0.65rem;
	padding: 1px 5px;
	border-radius: 3px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.1s;
}
.cms-img-container:hover .cms-img-badge {
	opacity: 1;
}

/* Resize handle — bottom-right corner */
.cms-img-resize-handle {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 18px;
	height: 18px;
	cursor: se-resize;
	opacity: 0;
	transition: opacity 0.15s;
	background: var(--primary);
	border-radius: 3px 0 0 0;
}
.cms-img-resize-handle::after {
	content: '';
	position: absolute;
	bottom: 3px;
	right: 3px;
	width: 8px;
	height: 8px;
	border-right: 2px solid rgba(255, 255, 255, 0.9);
	border-bottom: 2px solid rgba(255, 255, 255, 0.9);
}
.cms-img-container:hover .cms-img-resize-handle {
	opacity: 1;
}

/* Caption input & change button */
.cms-img-caption-input {
	display: block;
	width: 100%;
	padding: 0.2rem 0.4rem;
	font-size: 0.8rem;
	color: var(--muted-foreground);
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--input);
	outline: none;
	line-height: 1.5;
}
.cms-img-caption-input:focus {
	border-color: var(--ring);
}
.cms-img-change-btn {
	font-size: 0.7rem;
	color: var(--muted-foreground);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	margin-top: 0.15rem;
	display: inline-block;
}
.cms-img-change-btn:hover {
	color: var(--foreground);
}

/* Person Card block — editor shell */
.cms-editor-shell .card-tool {
	border: 1px dashed var(--input);
	border-radius: 0.875rem;
	overflow: visible;
	background: var(--background);
}
.cms-editor-shell .card-tool__content {
	display: block;
}

/* Inline (page) editor: edit person cards as two columns — media (~30%) on the
   left, fields (~70%) on the right. Affects only the editing widget, not the
   published page. Collapses to one column on narrow screens. */
.cms-editor-shell--compact .card-tool--show-media .card-tool__content {
	display: grid;
	grid-template-columns: minmax(0, 30%) minmax(0, 70%);
	align-items: start;
}
.cms-editor-shell--compact .card-tool--show-media .card-tool__media {
	border-right: 1px dashed var(--input);
}
.cms-editor-shell--compact .card-tool--show-media .card-tool__media-container {
	max-width: none;
	margin-inline: 0;
}
.cms-editor-shell--compact .card-tool--show-media .card-tool__media-container img {
	max-height: none;
}
@media (max-width: 900px) {
	.cms-editor-shell--compact .card-tool--show-media .card-tool__content {
		grid-template-columns: 1fr;
	}
	.cms-editor-shell--compact .card-tool--show-media .card-tool__media {
		border-right: none;
		border-bottom: 1px dashed var(--input);
	}
}

/* Controls bar */
.cms-editor-shell .card-tool__controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.75rem;
	border-bottom: 1px solid var(--input);
	background: color-mix(in srgb, var(--muted) 15%, var(--background));
}
.cms-editor-shell .card-tool__color-btns {
	display: flex;
	gap: 0.2rem;
}
.cms-editor-shell .card-tool__color-btn {
	font-size: 0.65rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--input);
	border-radius: 0.25rem;
	background: var(--background);
	color: var(--muted-foreground);
	cursor: pointer;
	line-height: 1.4;
}
.cms-editor-shell .card-tool__color-btn--red.active {
	background: #e30613;
	color: #fff;
	border-color: #e30613;
}
.cms-editor-shell .card-tool__color-btn--blue.active {
	background: #004a94;
	color: #fff;
	border-color: #004a94;
}
.cms-editor-shell .card-tool__badge-input {
	flex: 1;
	font-size: 0.8rem;
	color: var(--foreground);
	background: var(--background);
	border: 1px solid var(--input);
	border-radius: 0.25rem;
	padding: 0.15rem 0.4rem;
	outline: none;
}
.cms-editor-shell .card-tool__badge-input:focus {
	border-color: var(--ring);
}

/* Media area */
.cms-editor-shell .card-tool__media {
	background: #f1f5f9;
}
.cms-editor-shell .card-tool__uploader {
	border: none;
	border-radius: 0;
	border-bottom: 1px dashed var(--input);
	padding: 0.5rem 0.75rem;
	gap: 0.5rem;
}
.cms-editor-shell .card-tool__media-container img {
	width: 100%;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	display: block;
}
.cms-editor-shell .card-tool__change-btn {
	display: block;
	padding: 0.2rem 0.75rem;
	border-top: 1px dashed var(--input);
}

/* Body (inner editor) */
.cms-editor-shell .card-tool__body {
	padding: 0.35rem 0.75rem 0.5rem;
	/* min-height: 3rem; */
}
.cms-editor-shell .card-tool__body-holder {
	border: 1px dashed var(--input);
	border-radius: 0.375rem;
	padding: 0.25rem 0.5rem;
	background: color-mix(in srgb, var(--muted) 10%, var(--background));
}
.cms-editor-shell .card-tool__body-holder .ce-block__content,
.cms-editor-shell .card-tool__body-holder .ce-toolbar__content {
	max-width: 100%;
}

/* Options bar: link · hover · media mode · icon options */
.cms-editor-shell .card-tool__options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding: 0.35rem 0.75rem;
	border-bottom: 1px solid var(--input);
	background: color-mix(in srgb, var(--muted) 8%, var(--background));
}
.cms-editor-shell .card-tool__link-input {
	flex: 1 1 12rem;
	font-size: 0.8rem;
	color: var(--foreground);
	background: var(--background);
	border: 1px solid var(--input);
	border-radius: 0.25rem;
	padding: 0.15rem 0.4rem;
	outline: none;
}
.cms-editor-shell .card-tool__link-input:focus {
	border-color: var(--ring);
}
.cms-editor-shell .card-tool__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted-foreground);
	cursor: pointer;
	user-select: none;
}
.cms-editor-shell .card-tool__toggle input {
	cursor: pointer;
	margin: 0;
}
.cms-editor-shell .card-tool__seg {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
.cms-editor-shell .card-tool__seg-label {
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted-foreground);
}
.cms-editor-shell .card-tool__seg-btns {
	display: inline-flex;
	gap: 0.2rem;
}
.cms-editor-shell .card-tool__seg-btn {
	font-size: 0.65rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--input);
	border-radius: 0.25rem;
	background: var(--background);
	color: var(--muted-foreground);
	cursor: pointer;
	line-height: 1.4;
}
.cms-editor-shell .card-tool__seg-btn.active {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}
/* Color-swatch picker (link hover color) */
.cms-editor-shell .card-tool__swatches {
	display: inline-flex;
	gap: 0.35rem;
}
.cms-editor-shell .card-tool__swatch {
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border-radius: 0.45rem;
	border: 1px solid color-mix(in srgb, var(--swatch-color, #94a3b8) 60%, transparent);
	background: var(--swatch-color, #94a3b8);
	cursor: pointer;
	box-shadow: none;
	transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.cms-editor-shell .card-tool__swatch:hover {
	transform: translateY(-1px);
}
/* "None" swatch — diagonal stripe over a light background */
.cms-editor-shell .card-tool__swatch--none {
	border: 1px solid var(--input);
	background-color: var(--background);
	background-image: repeating-linear-gradient(
		45deg,
		color-mix(in srgb, var(--muted-foreground) 35%, transparent) 0,
		color-mix(in srgb, var(--muted-foreground) 35%, transparent) 1px,
		transparent 1px,
		transparent 5px
	);
}
/* Active swatch — focus ring like the screenshot */
.cms-editor-shell .card-tool__swatch.active {
	box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.cms-editor-shell .card-tool__icon-options {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

/* Icon-mode media preview */
.cms-editor-shell .card-tool__icon-preview {
	display: flex;
	justify-content: center;
	padding: 0.75rem;
	background: #f1f5f9;
}
.cms-editor-shell .card-tool__icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
	padding: 0.75rem;
}
.cms-editor-shell .card-tool__icon-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.cms-editor-shell .card-tool__icon-box--blue { background: #004a94; }
.cms-editor-shell .card-tool__icon-box--red  { background: #e30613; }
.cms-editor-shell .card-tool__icon-box--sm { width: 3.5rem; height: 3.5rem; }
.cms-editor-shell .card-tool__icon-box--md { width: 4.5rem; height: 4.5rem; }
.cms-editor-shell .card-tool__icon-box--lg { width: 6rem;   height: 6rem;   }

/* ── Icon Tool ─────────────────────────────────────────────────────────────── */
.cms-editor-shell .cms-icon-tool {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.5rem;
}
.cms-editor-shell .cms-icon-tool__preview {
	min-height: 2rem;
	display: flex;
	align-items: center;
}
.cms-editor-shell .cms-icon-tool__preview svg {
	display: block;
}
.cms-editor-shell .cms-icon-tool__empty {
	color: var(--muted-foreground);
	font-size: 1.25rem;
}
.cms-editor-shell .cms-icon-tool__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.cms-editor-shell .cms-icon-tool__name {
	font-size: 0.75rem;
	color: var(--muted-foreground);
	/* flex: 1; */
	font-family: monospace;
}
.cms-editor-shell .cms-icon-tool__size {
	width: 7rem;
	font-size: 0.8rem;
	padding: 0.2rem 0.4rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: var(--background);
	color: var(--foreground);
	outline: none;
}
.cms-editor-shell .cms-icon-tool__size:focus {
	border-color: var(--ring);
}
.cms-editor-shell .cms-icon-tool__caption {
	flex: 1;
	min-width: 8rem;
	font-size: 0.8rem;
	padding: 0.2rem 0.4rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: var(--background);
	color: var(--foreground);
	outline: none;
}
.cms-editor-shell .cms-icon-tool__caption:focus {
	border-color: var(--ring);
}
.cms-editor-shell .cms-icon-tool__pos-toggle {
	display: inline-flex;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	overflow: hidden;
	background: var(--background);
}
.cms-editor-shell .cms-icon-tool__pos-btn {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--foreground);
	font-size: 0.75rem;
	padding: 0.2rem 0.55rem;
	cursor: pointer;
}
.cms-editor-shell .cms-icon-tool__pos-btn + .cms-icon-tool__pos-btn {
	border-left: 1px solid var(--input);
}
.cms-editor-shell .cms-icon-tool__pos-btn.active {
	background: var(--muted);
}
.cms-editor-shell .cms-icon-tool__pick-btn {
	align-self: flex-start;
	font-size: 0.8rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: var(--background);
	color: var(--foreground);
	cursor: pointer;
}
.cms-editor-shell .cms-icon-tool__pick-btn:hover {
	background: var(--muted);
}

/* Icon picker popup */
.cms-icon-picker {
	position: absolute;
	z-index: 9999;
	background: var(--background);
	border: 1px solid var(--input);
	border-radius: 0.5rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	width: 340px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.cms-icon-picker__search {
	padding: 0.5rem 0.625rem;
	border: none;
	border-bottom: 1px solid var(--input);
	background: var(--background);
	color: var(--foreground);
	font-size: 0.875rem;
	outline: none;
}
.cms-icon-picker__grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
	padding: 0.375rem;
	overflow-y: auto;
	max-height: 280px;
}
.cms-icon-picker__item {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 0.25rem;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
	color: var(--foreground);
	padding: 0;
}
.cms-icon-picker__item:hover {
	background: var(--muted);
}
.cms-icon-picker__item.selected {
	border-color: var(--primary);
	background: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Section Header tool */
.cms-editor-shell .cms-section-header-tool {
	border: 1px dashed var(--input);
	border-radius: 0.75rem;
	padding: 0.5rem;
	background: color-mix(in srgb, var(--muted) 8%, var(--background));
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.cms-editor-shell .cms-section-header-tool__preview {
	border: 1px solid var(--input);
	border-radius: 0.5rem;
	padding: 0.6rem 0.75rem;
	background: var(--background);
}
.cms-editor-shell--compact .cms-section-header-tool__preview {
	display: grid;
	gap: 0.35rem;
}
.cms-editor-shell--compact .cms-section-header-tool__preview::before {
	content: "Preview";
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}
.cms-editor-shell .cms-section-header-tool__controls {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.cms-editor-shell .cms-section-header-tool__row {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex-wrap: wrap;
}
.cms-editor-shell .cms-section-header-tool__input,
.cms-editor-shell .cms-section-header-tool__select {
	font-size: 0.8rem;
	padding: 0.25rem 0.45rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: var(--background);
	color: var(--foreground);
	outline: none;
}
.cms-editor-shell .cms-section-header-tool__input:focus,
.cms-editor-shell .cms-section-header-tool__select:focus {
	border-color: var(--ring);
}
.cms-editor-shell .cms-section-header-tool__input--title {
	font-weight: 600;
}
.cms-editor-shell .cms-section-header-tool__icon-name {
	font-size: 0.75rem;
	font-family: monospace;
	color: var(--muted-foreground);
	flex: 1;
	min-width: 6rem;
}
.cms-editor-shell .cms-section-header-tool__btn {
	font-size: 0.75rem;
	padding: 0.2rem 0.55rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: var(--background);
	color: var(--foreground);
	cursor: pointer;
}
.cms-editor-shell .cms-section-header-tool__btn:hover {
	background: var(--muted);
}
.cms-editor-shell .cms-section-header-tool__icon-presets-label {
	font-size: 0.72rem;
	color: var(--muted-foreground);
	font-weight: 600;
	margin-right: 0.2rem;
}
.cms-editor-shell .cms-section-header-tool__icon-presets {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex-wrap: wrap;
}
.cms-editor-shell .cms-section-header-tool__icon-preset-btn {
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--input);
	border-radius: 0.5rem;
	padding: 0;
	background: var(--background);
	color: var(--muted-foreground);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cms-editor-shell .cms-section-header-tool__icon-preset-btn:hover {
	background: var(--muted);
	color: var(--foreground);
	border-color: color-mix(in srgb, var(--ring) 50%, var(--input));
}
.cms-editor-shell .cms-section-header-tool__icon-preset-btn svg {
	width: 1.25rem;
	height: 1.25rem;
}
.cms-editor-shell .cms-section-header-tool__icon-preset-btn--text {
	font-size: 0.72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}
.cms-editor-shell .cms-section-header-tool__row--svg {
	align-items: stretch;
}
.cms-editor-shell .cms-section-header-tool__svg-input {
	flex: 1;
	min-width: 12rem;
	font-size: 0.76rem;
	line-height: 1.35;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--input);
	border-radius: 0.45rem;
	background: var(--background);
	color: var(--foreground);
	resize: vertical;
	outline: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cms-editor-shell .cms-section-header-tool__svg-input:focus {
	border-color: var(--ring);
}
.cms-editor-shell .cms-section-header-tool__icon-bg {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: auto;
}
.cms-editor-shell .cms-section-header-tool__icon-bg-btn {
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 0.55rem;
	border: 1px solid var(--input);
	padding: 0;
	cursor: pointer;
	position: relative;
	opacity: 0.75;
	transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cms-editor-shell .cms-section-header-tool__icon-bg-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.cms-editor-shell .cms-section-header-tool__icon-bg-btn--blue {
	background: #004a94;
}
.cms-editor-shell .cms-section-header-tool__icon-bg-btn--slate {
	background: #3e4a5f;
}
.cms-editor-shell .cms-section-header-tool__icon-bg-btn--red {
	background: #e30613;
}
.cms-editor-shell .cms-section-header-tool__icon-bg-btn--none {
	background: repeating-linear-gradient(45deg, #d5d9e0 0 4px, #ffffff 4px 8px);
	border-style: dashed;
}
.cms-editor-shell .cms-section-header-tool__icon-bg-btn:hover {
	opacity: 0.95;
	transform: translateY(-1px);
}
.cms-editor-shell .cms-section-header-tool__icon-bg-btn.active {
	opacity: 1;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
}

/* Font color swatches */
.cms-editor-shell .cms-section-header-tool__swatch-label {
	font-size: 0.72rem;
	color: var(--muted-foreground);
	font-weight: 600;
}
.cms-editor-shell .cms-section-header-tool__accent {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.cms-editor-shell .cms-section-header-tool__accent-btn {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 0.4rem;
	border: 1px solid var(--input);
	padding: 0;
	cursor: pointer;
	position: relative;
	opacity: 0.75;
	transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cms-editor-shell .cms-section-header-tool__accent-btn--black { background: #1f2430; }
.cms-editor-shell .cms-section-header-tool__accent-btn--blue { background: #004a94; }
.cms-editor-shell .cms-section-header-tool__accent-btn--slate { background: #3e4a5f; }
.cms-editor-shell .cms-section-header-tool__accent-btn--red { background: #e30613; }
.cms-editor-shell .cms-section-header-tool__accent-btn:hover {
	opacity: 0.95;
	transform: translateY(-1px);
}
.cms-editor-shell .cms-section-header-tool__accent-btn.active {
	opacity: 1;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
}

/* Add-icon toggle + collapsible icon controls */
.cms-editor-shell .cms-section-header-tool__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	color: var(--foreground);
	cursor: pointer;
	user-select: none;
}
.cms-editor-shell .cms-section-header-tool__toggle input {
	cursor: pointer;
	margin: 0;
}
.cms-editor-shell .cms-section-header-tool__img-controls {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 2px;
	padding: 8px 10px;
	background: color-mix(in srgb, var(--muted) 30%, transparent);
	border-radius: 6px;
}
.cms-editor-shell .cms-section-header-tool__row--img-url {
	display: flex;
	gap: 6px;
	align-items: center;
}
.cms-editor-shell .cms-section-header-tool__input--img-url {
	flex: 1;
	min-width: 0;
}
.cms-editor-shell .cms-section-header-tool__icon-controls {
	/* margin: 0 0 1rem; */
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	/* border-left: 3px solid var(--primary);
	padding-left: 0.8rem;
	padding-top: 0.1rem;
	padding-bottom: 0.1rem; */
}
.cms-rendered-content .cms-section-header {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	text-align: left;
}
.cms-rendered-content .cms-section-header--align-center {
	text-align: center;
	align-items: center;
	border-left: none;
	padding-left: 0;
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}
.cms-rendered-content .cms-section-header--align-right {
	text-align: right;
	align-items: flex-end;
	border-left: none;
	border-right: 3px solid var(--primary);
	padding-left: 0;
	padding-right: 0.8rem;
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
}
.cms-rendered-content .cms-section-header--accent-secondary {
	border-color: var(--secondary);
}
.cms-rendered-content .cms-section-header--accent-slate {
	border-color: var(--muted-foreground);
}
.cms-rendered-content .cms-section-header--accent-black {
	border-color: var(--foreground);
}
.cms-rendered-content .cms-section-header--boxed {
	border: 1px solid var(--input);
	border-left-width: 1px;
	border-radius: 0.625rem;
	padding: 0.65rem 0.8rem;
	background: color-mix(in srgb, var(--muted) 18%, var(--background));
}
.cms-rendered-content .cms-section-header--align-right.cms-section-header--boxed {
	border-right-width: 1px;
	padding-right: 0.8rem;
}
.cms-rendered-content .cms-section-header--compact {
	gap: 0.2rem;
	margin-bottom: 0.7rem;
}
.cms-rendered-content .cms-section-header__lead {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 1.1rem;
}
.cms-rendered-content .cms-section-header__lead--row {
	align-items: center;
	gap: 0.6rem;
}
.cms-rendered-content .cms-section-header__lead--column {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
}
.cms-rendered-content .cms-section-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.6rem;
	flex-shrink: 0;
}
.cms-rendered-content .cms-section-header__icon--bg-blue {
	background: #004a94;
}
.cms-rendered-content .cms-section-header__icon--bg-slate {
	background: #3e4a5f;
}
.cms-rendered-content .cms-section-header__icon--bg-red {
	background: #e30613;
}
.cms-rendered-content .cms-section-header__icon--bg-none {
	background: transparent;
	border-radius: 0;
	width: 1.2rem;
	height: 1.2rem;
}
.cms-rendered-content .cms-section-header__icon--color-light {
	color: #fff;
}
.cms-rendered-content .cms-section-header__icon--color-dark {
	color: #101828;
}
.cms-rendered-content .cms-section-header__icon--text {
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	line-height: 1;
}
.cms-rendered-content .cms-section-header__icon svg {
	width: 1.05rem;
	height: 1.05rem;
}
.cms-rendered-content .cms-section-header__eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--primary);
	line-height: 1.2;
}
.cms-rendered-content .cms-section-header--accent-secondary .cms-section-header__eyebrow {
	color: var(--secondary);
}
.cms-rendered-content .cms-section-header--accent-slate .cms-section-header__eyebrow {
	color: var(--muted-foreground);
}
.cms-rendered-content .cms-section-header--accent-black .cms-section-header__eyebrow {
	color: var(--foreground);
}
.cms-rendered-content .cms-section-header h1,
.cms-rendered-content .cms-section-header h2,
.cms-rendered-content .cms-section-header h3,
.cms-rendered-content .cms-section-header h4,
.cms-rendered-content .cms-section-header h5,
.cms-rendered-content .cms-section-header h6 {
	margin: 0;
	line-height: 1.24;
}
.cms-rendered-content .cms-section-header--accent-primary h1,
.cms-rendered-content .cms-section-header--accent-primary h2,
.cms-rendered-content .cms-section-header--accent-primary h3,
.cms-rendered-content .cms-section-header--accent-primary h4,
.cms-rendered-content .cms-section-header--accent-primary h5,
.cms-rendered-content .cms-section-header--accent-primary h6 {
	color: var(--primary);
}
.cms-rendered-content .cms-section-header--accent-secondary h1,
.cms-rendered-content .cms-section-header--accent-secondary h2,
.cms-rendered-content .cms-section-header--accent-secondary h3,
.cms-rendered-content .cms-section-header--accent-secondary h4,
.cms-rendered-content .cms-section-header--accent-secondary h5,
.cms-rendered-content .cms-section-header--accent-secondary h6 {
	color: var(--secondary);
}
.cms-rendered-content .cms-section-header--accent-slate h1,
.cms-rendered-content .cms-section-header--accent-slate h2,
.cms-rendered-content .cms-section-header--accent-slate h3,
.cms-rendered-content .cms-section-header--accent-slate h4,
.cms-rendered-content .cms-section-header--accent-slate h5,
.cms-rendered-content .cms-section-header--accent-slate h6 {
	color: var(--muted-foreground);
}
.cms-rendered-content .cms-section-header--accent-black h1,
.cms-rendered-content .cms-section-header--accent-black h2,
.cms-rendered-content .cms-section-header--accent-black h3,
.cms-rendered-content .cms-section-header--accent-black h4,
.cms-rendered-content .cms-section-header--accent-black h5,
.cms-rendered-content .cms-section-header--accent-black h6 {
	color: var(--foreground);
}

.cms-rendered-content .cms-section-header--uppercase h1,
.cms-rendered-content .cms-section-header--uppercase h2,
.cms-rendered-content .cms-section-header--uppercase h3,
.cms-rendered-content .cms-section-header--uppercase h4,
.cms-rendered-content .cms-section-header--uppercase h5,
.cms-rendered-content .cms-section-header--uppercase h6,
.cms-rendered-content .cms-section-header--uppercase .cms-section-header__eyebrow {
	text-transform: uppercase;
}

.cms-rendered-content .cms-section-header--tight-tracking h1,
.cms-rendered-content .cms-section-header--tight-tracking h2,
.cms-rendered-content .cms-section-header--tight-tracking h3,
.cms-rendered-content .cms-section-header--tight-tracking h4,
.cms-rendered-content .cms-section-header--tight-tracking h5,
.cms-rendered-content .cms-section-header--tight-tracking h6,
.cms-rendered-content .cms-section-header--tight-tracking .cms-section-header__eyebrow {
	letter-spacing: var(--tracking-tight);
}

.cms-rendered-content .cms-section-header--semibold h1,
.cms-rendered-content .cms-section-header--semibold h2,
.cms-rendered-content .cms-section-header--semibold h3,
.cms-rendered-content .cms-section-header--semibold h4,
.cms-rendered-content .cms-section-header--semibold h5,
.cms-rendered-content .cms-section-header--semibold h6,
.cms-rendered-content .cms-section-header--semibold .cms-section-header__eyebrow {
	font-weight: var(--font-weight-semibold);
}

.cms-rendered-content .cms-section-header--hover-accent {
	transition: color 0.18s ease, border-color 0.18s ease;
}

.cms-rendered-content .cms-section-header--hover-accent:hover .cms-section-header__icon,
.cms-rendered-content .cms-section-header--hover-accent:hover .cms-section-header__eyebrow,
.cms-rendered-content .cms-section-header--hover-accent:hover h1,
.cms-rendered-content .cms-section-header--hover-accent:hover h2,
.cms-rendered-content .cms-section-header--hover-accent:hover h3,
.cms-rendered-content .cms-section-header--hover-accent:hover h4,
.cms-rendered-content .cms-section-header--hover-accent:hover h5,
.cms-rendered-content .cms-section-header--hover-accent:hover h6 {
	color: var(--primary);
}

/* ── Section Header – Image ──────────────────────────────────────────────── */
.cms-rendered-content .cms-section-header__img {
	display: block;
	object-fit: contain;
	border-radius: 0.5rem;
	flex-shrink: 0;
}
.cms-rendered-content .cms-section-header__img--xsmall { width: 1.5rem; height: 1.5rem; }
.cms-rendered-content .cms-section-header__img--small  { width: 3rem;  height: 3rem; }
.cms-rendered-content .cms-section-header__img--medium { width: 6rem;  height: 6rem; }
.cms-rendered-content .cms-section-header__img--large  { width: 10rem; height: auto; }
.cms-rendered-content .cms-section-header__img--full   { width: 100%;  height: auto; max-height: 20rem; }
.cms-rendered-content .cms-section-header__img-row {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1rem;
}
.cms-rendered-content .cms-section-header__img-text {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
	min-width: 0;
}

/* ── Icon List Tool ────────────────────────────────────────────────────────── */
.cms-editor-shell .lt-tool {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.5rem;
}
.cms-editor-shell .lt-controls {
	display: flex;
	align-items: center;
}
.cms-editor-shell .lt-style-toggle {
	display: inline-flex;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	overflow: hidden;
	background: var(--background);
}
.cms-editor-shell .lt-style-btn {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--muted-foreground);
	font-size: 0.75rem;
	padding: 0.2rem 0.6rem;
	cursor: pointer;
	line-height: 1.4;
}
.cms-editor-shell .lt-style-btn + .lt-style-btn {
	border-left: 1px solid var(--input);
}
.cms-editor-shell .lt-style-btn.active {
	background: var(--primary);
	color: var(--primary-foreground);
}
.cms-editor-shell .lt-items {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.cms-editor-shell .lt-swatches {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: 0.6rem;
}
.cms-editor-shell .lt-swatch {
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 9999px;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 0 0 1px var(--input);
}
.cms-editor-shell .lt-swatch--primary {
	background: var(--primary);
}
.cms-editor-shell .lt-swatch--slate {
	background: #374151;
}
.cms-editor-shell .lt-swatch--secondary {
	background: var(--secondary);
}
.cms-editor-shell .lt-swatch.active {
	border-color: var(--ring);
	box-shadow: 0 0 0 1px var(--ring);
}
.cms-editor-shell .lt-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.cms-editor-shell .lt-item__input {
	flex: 1;
	min-width: 0;
	font-size: 0.875rem;
	padding: 0.25rem 0.4rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: var(--background);
	color: var(--foreground);
	outline: none;
}
.cms-editor-shell .lt-item__input:focus {
	border-color: var(--ring);
}
.cms-editor-shell .lt-item__del {
	flex-shrink: 0;
	appearance: none;
	border: none;
	background: none;
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.1rem 0.3rem;
	border-radius: 0.25rem;
}
.cms-editor-shell .lt-item__del:hover {
	color: var(--destructive);
	background: color-mix(in srgb, var(--destructive) 10%, transparent);
}
.cms-editor-shell .lt-add-btn {
	align-self: flex-start;
	font-size: 0.75rem;
	padding: 0.2rem 0.6rem;
	border: 1px dashed var(--input);
	border-radius: 0.375rem;
	background: transparent;
	color: var(--muted-foreground);
	cursor: pointer;
	margin-top: 0.1rem;
}
.cms-editor-shell .lt-add-btn:hover {
	background: var(--muted);
	color: var(--foreground);
	border-style: solid;
}

/* Styled List — rendered output */
.cms-rendered-content .cms-list--numbered {
	margin: 0 0 0.75rem 1.5rem;
	list-style: decimal;
}
.cms-rendered-content .cms-list--dot {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}
.cms-rendered-content .cms-list__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}
.cms-rendered-content .cms-list__dot {
	flex-shrink: 0;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
}
.cms-rendered-content .cms-list--primary .cms-list__dot {
	background: var(--primary);
}
.cms-rendered-content .cms-list--secondary .cms-list__dot {
	background: var(--secondary);
}
.cms-rendered-content .cms-list--slate .cms-list__dot {
	background: #374151;
}
.cms-rendered-content .cms-list__text {
	line-height: 1.4;
}

/* Rendered icon in CMS content */
.cms-rendered-content .cms-icon {
	display: inline-block;
	vertical-align: middle;
}
.cms-rendered-content .cms-icon svg {
	display: block;
}
.cms-rendered-content .cms-icon-with-caption {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	vertical-align: middle;
}
.cms-rendered-content .cms-icon-with-caption--left {
	flex-direction: row;
}
.cms-rendered-content .cms-icon-with-caption--right {
	flex-direction: row;
}
.cms-rendered-content .cms-icon-caption {
	font-size: 0.95em;
	line-height: 1.3;
}

/* Section / Container block — editor shell */
.cms-editor-shell .cms-section-container-tool {
	border: 1px dashed var(--input);
	border-radius: 0.875rem;
	background: var(--background);
	overflow: visible;
}
.cms-editor-shell .cms-section-container-tool__controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding: 0.35rem 0.75rem;
	border-bottom: 1px solid var(--input);
	background: color-mix(in srgb, var(--muted) 15%, var(--background));
}
.cms-editor-shell .cms-section-container-tool__select {
	font-size: 0.75rem;
	color: var(--foreground);
	background: var(--background);
	border: 1px solid var(--input);
	border-radius: 0.25rem;
	padding: 0.15rem 0.4rem;
	outline: none;
	cursor: pointer;
}
.cms-editor-shell .cms-section-container-tool__select:focus {
	border-color: var(--ring);
}
/* Rail number preview inside the editor — mirrors .cms-rail in the rendered output. */
.cms-editor-shell .cms-rail {
	padding-left: 3.5rem;
}
.cms-editor-shell .cms-rail::before {
	content: attr(data-num);
	position: absolute;
	left: 0.5rem;
	top: 0.25rem;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: #94a3b8;
	letter-spacing: 0.14em;
}
.cms-editor-shell .cms-section-container-tool__num {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.7rem;
	color: var(--muted-foreground);
}
.cms-editor-shell .cms-section-container-tool__num input {
	width: 3.75rem;
	font-size: 0.75rem;
	color: var(--foreground);
	background: var(--background);
	border: 1px solid var(--input);
	border-radius: 0.25rem;
	padding: 0.15rem 0.4rem;
	outline: none;
}
.cms-editor-shell .cms-section-container-tool__num input:focus {
	border-color: var(--ring);
}
.cms-editor-shell .cms-section-container-tool__body {
	padding: 0.5rem 0.75rem;
}
.cms-editor-shell .cms-section-container-tool__holder {
	border: 1px dashed var(--input);
	border-radius: 0.375rem;
	padding: 0.25rem 0.5rem;
	min-height: 3rem;
}
/* Background hints in edit mode mirror the rendered palette */
.cms-editor-shell .cms-section-container-tool--bg-light .cms-section-container-tool__body { background: color-mix(in srgb, var(--muted) 60%, var(--background)); }
.cms-editor-shell .cms-section-container-tool--bg-primary .cms-section-container-tool__body { background: color-mix(in srgb, var(--primary) 12%, var(--background)); }
.cms-editor-shell .cms-section-container-tool--bg-secondary .cms-section-container-tool__body { background: color-mix(in srgb, var(--secondary) 12%, var(--background)); }
.cms-editor-shell .cms-section-container-tool--bg-dark .cms-section-container-tool__body { background: color-mix(in srgb, #0f172a 12%, var(--background)); }
.cms-editor-shell .cms-section-container-tool--rounded { border-radius: 0.875rem; }

/* ── Hero Image Tool — editor shell ──────────────────────────────────────── */
.cms-editor-shell .cms-hero-tool {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.cms-editor-shell .cms-hero-tool__controls {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.cms-editor-shell .cms-hero-tool__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.cms-editor-shell .cms-hero-tool__row--head {
	justify-content: space-between;
}
.cms-editor-shell .cms-hero-tool__input,
.cms-editor-shell .cms-hero-tool__select {
	font-size: 0.85rem;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: var(--background);
	color: var(--foreground);
	outline: none;
}
.cms-editor-shell .cms-hero-tool__input {
	width: 100%;
}
.cms-editor-shell .cms-hero-tool__input:focus,
.cms-editor-shell .cms-hero-tool__select:focus {
	border-color: var(--ring);
}
.cms-editor-shell .cms-hero-tool__input--title {
	font-size: 1rem;
	font-weight: 600;
}
.cms-editor-shell .cms-hero-tool__num {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}
.cms-editor-shell .cms-hero-tool__num input {
	width: 5rem;
	font-size: 0.8rem;
	padding: 0.25rem 0.4rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: var(--background);
	color: var(--foreground);
	outline: none;
}
.cms-editor-shell .cms-hero-tool__num input:focus {
	border-color: var(--ring);
}
.cms-editor-shell .cms-hero-tool__hint {
	font-size: 0.72rem;
	color: var(--muted-foreground);
}
.cms-editor-shell .cms-hero-tool__btn {
	font-size: 0.75rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: var(--background);
	color: var(--foreground);
	cursor: pointer;
}
.cms-editor-shell .cms-hero-tool__btn:hover {
	background: var(--muted);
}
.cms-editor-shell .cms-hero-tool__btn.active {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}
.cms-editor-shell .cms-hero-tool__badges {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.cms-editor-shell .cms-hero-tool__badge-row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.5rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: color-mix(in srgb, var(--muted) 15%, var(--background));
}
.cms-editor-shell .cms-hero-tool__badge-top {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.cms-editor-shell .cms-hero-tool__badge-opts {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.cms-editor-shell .cms-hero-tool__stats {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.cms-editor-shell .cms-hero-tool__stat-row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.5rem;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	background: color-mix(in srgb, var(--muted) 15%, var(--background));
}
.cms-editor-shell .cms-hero-tool__points {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.cms-editor-shell .cms-hero-tool__point-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}
.cms-editor-shell .cms-hero-tool__swatches {
	display: inline-flex;
	gap: 0.3rem;
}
.cms-editor-shell .cms-hero-tool__swatch {
	width: 16px;
	height: 16px;
	border-radius: 9999px;
	border: 2px solid transparent;
	box-shadow: 0 0 0 1px var(--input);
	cursor: pointer;
	padding: 0;
}
.cms-editor-shell .cms-hero-tool__swatch--red { background: #e30613; }
.cms-editor-shell .cms-hero-tool__swatch--green { background: #34d399; }
.cms-editor-shell .cms-hero-tool__swatch--blue { background: #004a94; }
.cms-editor-shell .cms-hero-tool__swatch--neutral { background: linear-gradient(135deg, #e2e8f0, #94a3b8); }
.cms-editor-shell .cms-hero-tool__swatch.active {
	border-color: var(--ring);
	box-shadow: 0 0 0 1px var(--ring);
}
.cms-editor-shell .cms-hero-tool__coords {
	font-variant-numeric: tabular-nums;
}
.cms-editor-shell .cms-hero-tool__point-del {
	margin-left: auto;
	appearance: none;
	border: none;
	background: none;
	color: var(--muted-foreground);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.3rem;
}
.cms-editor-shell .cms-hero-tool__point-del:hover {
	color: var(--destructive);
}
.cms-editor-shell .cms-hero__point--draggable {
	cursor: grab;
}
.cms-editor-shell .cms-hero__point--draggable:active {
	cursor: grabbing;
}

/* ── Hero Image Tool — shared rendered output (preview + published) ───────── */
.cms-hero {
	width: 100%;
	/* padding: 0 1rem; */
}
.cms-hero--contained .cms-hero__frame {
	max-width: 80rem;
	margin: 0 auto;
}
.cms-hero__figure {
	position: relative;
	margin: 0;
	width: 100%;
	height: var(--cms-hero-h, 440px);
	overflow: hidden;
	line-height: 0;
}
.cms-hero--contained .cms-hero__figure {
	border-radius: 1rem;
	border: 1px solid #e2e8f0;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.cms-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cms-hero__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.cms-hero__overlay--light {
	background: linear-gradient(to top, rgba(0, 27, 58, 0.55) 0%, transparent 55%);
}
.cms-hero__overlay--medium {
	background: linear-gradient(to top, rgba(0, 27, 58, 0.70) 0%, rgba(0, 27, 58, 0.10) 50%, transparent 100%);
}
.cms-hero__overlay--strong {
	background: linear-gradient(to top, rgba(0, 27, 58, 0.85) 0%, rgba(0, 27, 58, 0.25) 50%, transparent 100%);
}
/* Centered content layer: keeps overlaid text within the page content width
   (max-w-7xl) instead of letting it run to the image edges on full-bleed heroes.
   The inner div carries the Tailwind container classes; its padding is the gutter. */
.cms-hero__content {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.cms-hero__content > div {
	position: relative;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
}
.cms-hero__badges {
	position: absolute;
	top: 1.25rem;
	left: 1rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}
.cms-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: #1e293b;
	line-height: 1.4;
}
.cms-hero__badge--indent {
	margin-left: 1rem;
}
.cms-hero__badge-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 9999px;
	background: #e30613;
	flex-shrink: 0;
}
.cms-hero__badge-dot--red { background: #e30613; }
.cms-hero__badge-dot--blue { background: #004a94; }
.cms-hero__badge-dot--green { background: #34d399; }
.cms-hero__badge-dot--pulse {
	animation: cmsHeroPulseDot 1.8s ease-in-out infinite;
}
.cms-hero__caption {
	position: absolute;
	bottom: 1.25rem;
	left: 1rem;
	right: 1rem;
	color: #fff;
	line-height: 1.2;
}
.cms-hero__eyebrow {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.7);
}
.cms-hero__title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 0.25rem;
	line-height: 1.2;
	color: rgba(255, 255, 255, 1);

}
.cms-hero__point {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	width: 0.75rem;
	height: 0.75rem;
}
.cms-hero__point-ping {
	position: absolute;
	inset: -0.5rem;
	border-radius: 9999px;
	animation: cmsHeroPing 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.cms-hero__point-core {
	position: relative;
	display: block;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 9999px;
}
.cms-hero__point--red .cms-hero__point-ping { background: rgba(227, 6, 19, 0.30); }
.cms-hero__point--red .cms-hero__point-core { background: #e30613; box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.4); }
.cms-hero__point--green .cms-hero__point-ping { background: rgba(52, 211, 153, 0.40); }
.cms-hero__point--green .cms-hero__point-core { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.4); }
.cms-hero__point--blue .cms-hero__point-ping { background: rgba(0, 74, 148, 0.35); }
.cms-hero__point--blue .cms-hero__point-core { background: #004a94; box-shadow: 0 0 0 3px rgba(0, 74, 148, 0.4); }
.cms-hero__stats {
	position: absolute;
	bottom: 1.25rem;
	right: 1rem;
	display: flex;
	gap: 0.5rem;
	text-align: center;
}
.cms-hero__stat {
	min-width: 4rem;
	border-radius: 0.5rem;
	padding: 0.5rem 0.75rem;
	color: #fff;
	line-height: 1.1;
}
.cms-hero__stat--neutral {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
}
.cms-hero__stat--red { background: #e30613; }
.cms-hero__stat--blue { background: #004a94; }
.cms-hero__stat--green { background: #34d399; }
.cms-hero__stat-label {
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.75);
}
.cms-hero__stat-value {
	font-size: 1.125rem;
	font-weight: 700;
}
/* Keep the overlaid content gutter in lockstep with the centered container's
   responsive padding (px-4 / sm:px-6 / lg:px-8) so badges, caption and stats
   line up with the rest of the page content instead of sticking out past it. */
@media (min-width: 640px) {
	.cms-hero__badges { left: 1.5rem; }
	.cms-hero__caption { left: 1.5rem; right: 1.5rem; }
	.cms-hero__stats { right: 1.5rem; }
}
@media (min-width: 1024px) {
	.cms-hero__badges { left: 2rem; }
	.cms-hero__caption { left: 2rem; right: 2rem; }
	.cms-hero__stats { right: 2rem; }
}
@keyframes cmsHeroPing {
	75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes cmsHeroPulseDot {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}
@media (max-width: 640px) {
	.cms-hero__figure { height: calc(var(--cms-hero-h, 440px) * 0.62); }
	.cms-hero__title { font-size: 1.25rem; }
	.cms-hero__stats { gap: 0.375rem; bottom: 0.75rem; right: 0.75rem; }
	.cms-hero__stat { min-width: 3.25rem; padding: 0.375rem 0.5rem; }
	.cms-hero__stat-value { font-size: 1rem; }
}

/* Contact tool — editor shell */
.cms-editor-shell .cms-contact-tool {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border: 1px dashed var(--input);
	border-radius: 0.875rem;
	padding: 0.6rem;
	background: color-mix(in srgb, var(--muted) 10%, var(--background));
}
.cms-editor-shell .cms-contact-tool__preview {
	border: 1px solid var(--input);
	border-radius: 0.75rem;
	overflow: hidden;
	background: var(--background);
}
.cms-editor-shell .cms-contact-tool__controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem;
}
.cms-editor-shell .cms-contact-tool__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.cms-editor-shell .cms-contact-tool__label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}
.cms-editor-shell .cms-contact-tool__input {
	font-size: 0.8rem;
	padding: 0.28rem 0.5rem;
	border: 1px solid var(--input);
	border-radius: 0.4rem;
	background: var(--background);
	color: var(--foreground);
	outline: none;
}
.cms-editor-shell .cms-contact-tool__input:focus {
	border-color: var(--ring);
}
@media (max-width: 820px) {
	.cms-editor-shell .cms-contact-tool__controls {
		grid-template-columns: 1fr;
	}
}

/* Contact CTA — shared output (preview + published) */
.cms-contact {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	padding: 2rem;
	background: var(--vkb-blue-deep);
	color: #fff;
	isolation: isolate;
}
.cms-contact__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.22) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.22) 1px, transparent 1px);
	background-size: 60px 60px;
	opacity: 0.25;
	pointer-events: none;
	z-index: 0;
}
.cms-contact__glow {
	position: absolute;
	top: -5rem;
	right: -5rem;
	width: 18rem;
	height: 18rem;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(227, 6, 19, 0.20) 0%, rgba(227, 6, 19, 0) 70%);
	filter: blur(26px);
	pointer-events: none;
	z-index: 0;
}
.cms-contact__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
}
.cms-contact__text {
	max-width: 46rem;
}
.cms-contact__eyebrow-row {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.9rem;
	flex-wrap: wrap;
}
.cms-contact__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.2;
}
.cms-contact__dot {
	width: 0.3rem;
	height: 0.3rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.4);
	flex-shrink: 0;
}
.cms-contact__subtitle {
	font-size: 0.75rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.2;
}
.cms-contact .cms-contact__heading {
	margin: 0;
	font-size: clamp(1.8rem, 3.3vw, 3.1rem);
	font-weight: 700;
	line-height: 1.08;
	color: #fff;
}
.cms-contact .cms-contact__desc {
	margin: 0.9rem 0 0;
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.45;
	color: #cbd5e1;
	max-width: 38rem;
}
.cms-contact__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: stretch;
}
.cms-contact__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.78rem 1.25rem;
	border-radius: 9999px;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	white-space: nowrap;
	min-width: 12.6rem;
}
.cms-contact__btn--phone {
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
.cms-contact__btn--phone:hover {
	border-color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.18);
}
.cms-contact__btn--mail {
	border: 1px solid var(--secondary);
	background: var(--secondary);
	color: var(--secondary-foreground);
}
.cms-contact__btn--mail:hover {
	border-color: var(--secondary-hover);
	background: var(--secondary-hover);
}
@media (min-width: 768px) {
	.cms-contact {
		padding: 2.6rem;
	}
}
@media (min-width: 980px) {
	.cms-contact__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 2rem;
	}
	.cms-contact__actions {
		justify-self: end;
	}
}

/* ============================================================================
   Data Table tool — rendered output (.cms-dt-*). Applies in BOTH the editor
   preview and the published page (look mirrors the globaltable component).
   ========================================================================== */
.cms-data-table {
	border: 1px solid var(--border);
	border-radius: 1rem;
	background: var(--background);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
	overflow: hidden;
	margin: 1.5rem 0;
}
.cms-dt-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
}
.cms-dt-title {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--foreground);
	margin: 0;
}
.cms-dt-desc {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	margin: 0.125rem 0 0;
}
.cms-dt-cols {
	position: relative;
	flex-shrink: 0;
}
.cms-dt-cols-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--foreground);
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	padding: 0.4rem 0.7rem;
	cursor: pointer;
}
.cms-dt-cols-btn:hover { background: color-mix(in srgb, var(--muted) 50%, var(--background)); }
.cms-dt-cols-btn svg { width: 1rem; height: 1rem; }
.cms-dt-cols-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 0.35rem);
	z-index: 20;
	min-width: 12rem;
	display: none;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.4rem;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 0.6rem;
	box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25);
}
.cms-dt-cols.is-open .cms-dt-cols-menu { display: flex; }
.cms-dt-cols-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--foreground);
	padding: 0.3rem 0.4rem;
	border-radius: 0.4rem;
	cursor: pointer;
}
.cms-dt-cols-item:hover { background: color-mix(in srgb, var(--muted) 50%, var(--background)); }

.cms-dt-scroll { overflow-x: auto; }
.cms-dt-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.cms-dt-headrow th {
	background: color-mix(in srgb, var(--muted) 50%, var(--background));
	text-align: left;
	vertical-align: top;
	padding: 0.6rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--foreground);
}
.cms-dt-sort {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	width: 100%;
	min-width: 0;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	text-align: left;
}
.cms-dt-th-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cms-dt-sort-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--muted-foreground);
	opacity: 0.5;
	transition: opacity 0.15s, color 0.15s;
}
.cms-dt-sort-icon svg { width: 0.875rem; height: 0.875rem; }
.cms-dt-sort:hover .cms-dt-sort-icon { opacity: 0.9; }
.cms-dt-sort.is-asc .cms-dt-sort-icon,
.cms-dt-sort.is-desc .cms-dt-sort-icon { opacity: 1; color: var(--primary); }

.cms-dt-searchrow th {
	background: color-mix(in srgb, var(--muted) 50%, var(--background));
	vertical-align: top;
	padding: 0 1rem 0.75rem;
	border-bottom: 1px solid var(--border);
}
.cms-dt-search {
	width: 100%;
	height: 1.85rem;
	font-size: 0.75rem;
	color: var(--foreground);
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 0.45rem;
	padding: 0 0.55rem;
}
.cms-dt-search:focus {
	outline: none;
	border-color: var(--ring);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 30%, transparent);
}

.cms-dt-row { border-bottom: 1px solid var(--border); }
.cms-dt-row:last-child { border-bottom: 0; }
.cms-dt-row:hover { background: color-mix(in srgb, var(--muted) 35%, var(--background)); }
.cms-dt-td {
	padding: 1rem;
	vertical-align: middle;
	color: var(--foreground);
	overflow: hidden;
	text-overflow: ellipsis;
}
.cms-dt-td--num {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--muted-foreground);
}
.cms-dt-stacked {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}
.cms-dt-icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	border-radius: 0.6rem;
}
.cms-dt-icon svg { width: 1.25rem; height: 1.25rem; }
.cms-dt-icon--blue {
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 12%, var(--background));
}
.cms-dt-icon--red {
	color: var(--secondary);
	background: color-mix(in srgb, var(--secondary) 12%, var(--background));
}
.cms-dt-stacked-text { min-width: 0; }
.cms-dt-stacked-title {
	display: block;
	font-weight: 500;
	color: var(--foreground);
	line-height: 1.25;
}
.cms-dt-stacked-sub {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}
.cms-data-table [data-col-hidden] { display: none; }

/* ============================================================================
   Data Table tool — editor control panel (scoped under .cms-editor-shell).
   ========================================================================== */
.cms-editor-shell .dt-tool {
	border: 1px solid var(--border);
	border-radius: 0.75rem;
	padding: 1rem;
	background: color-mix(in srgb, var(--muted) 12%, var(--background));
}
.cms-editor-shell .dt-tool__meta {
	display: grid;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
}
.cms-editor-shell .dt-tool__field { display: grid; gap: 0.25rem; }
.cms-editor-shell .dt-tool__field-cap {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted-foreground);
}
.cms-editor-shell .dt-tool__input,
.cms-editor-shell .dt-tool__select,
.cms-editor-shell .dt-tool__svg {
	width: 100%;
	font-size: 0.85rem;
	color: var(--foreground);
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 0.45rem;
	padding: 0.4rem 0.55rem;
}
.cms-editor-shell .dt-tool__svg {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.75rem;
	resize: vertical;
}
.cms-editor-shell .dt-tool__check {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--foreground);
}
.cms-editor-shell .dt-tool__section {
	margin: 1rem 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted-foreground);
}
.cms-editor-shell .dt-tool__col {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem;
	margin-bottom: 0.4rem;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 0.5rem;
}
.cms-editor-shell .dt-tool__col .dt-tool__input { width: auto; flex: 1 1 8rem; min-width: 6rem; }
.cms-editor-shell .dt-tool__col .dt-tool__select { width: auto; flex: 0 0 auto; }
.cms-editor-shell .dt-tool__minicheck {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}
.cms-editor-shell .dt-tool__rowcard {
	padding: 0.6rem;
	margin-bottom: 0.5rem;
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 0.6rem;
}
.cms-editor-shell .dt-tool__rowhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted-foreground);
}
.cms-editor-shell .dt-tool__cells {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.6rem;
}
.cms-editor-shell .dt-tool__cell { display: grid; gap: 0.3rem; align-content: start; }
.cms-editor-shell .dt-tool__cell-cap {
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--muted-foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cms-editor-shell .dt-tool__cell--title {
	grid-column: 1 / -1;
	padding: 0.5rem;
	border: 1px dashed var(--border);
	border-radius: 0.5rem;
}
.cms-editor-shell .dt-tool__cell--file {
	grid-column: 1 / -1;
	padding: 0.5rem;
	border: 1px dashed var(--border);
	border-radius: 0.5rem;
}
.cms-editor-shell .dt-tool__cell--file .cms-file-dl-block { margin: 0; }
.cms-editor-shell .dt-tool__colors { display: inline-flex; gap: 0.35rem; }
.cms-editor-shell .dt-tool__color {
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.25rem 0.6rem;
	border-radius: 0.4rem;
	border: 1px solid var(--border);
	background: var(--background);
	color: var(--muted-foreground);
	cursor: pointer;
}
.cms-editor-shell .dt-tool__color--blue.active {
	color: var(--primary);
	border-color: var(--primary);
	background: color-mix(in srgb, var(--primary) 10%, var(--background));
}
.cms-editor-shell .dt-tool__color--red.active {
	color: var(--secondary);
	border-color: var(--secondary);
	background: color-mix(in srgb, var(--secondary) 10%, var(--background));
}
.cms-editor-shell .dt-tool__add {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--primary);
	background: none;
	border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border));
	border-radius: 0.5rem;
	padding: 0.4rem 0.8rem;
	cursor: pointer;
}
.cms-editor-shell .dt-tool__add:hover { background: color-mix(in srgb, var(--primary) 8%, var(--background)); }
.cms-editor-shell .dt-tool__del {
	flex-shrink: 0;
	width: 1.6rem;
	height: 1.6rem;
	display: grid;
	place-items: center;
	font-size: 0.8rem;
	color: var(--muted-foreground);
	background: none;
	border: 1px solid var(--border);
	border-radius: 0.4rem;
	cursor: pointer;
}
.cms-editor-shell .dt-tool__del:hover {
	color: var(--secondary);
	border-color: var(--secondary);
}
/* =========================================================================
   Badges tool
   ========================================================================= */

/* ---- Published / preview output (live preview shares .cms-rendered-content) */
.cms-rendered-content .cms-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.cms-rendered-content .cms-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.cms-rendered-content .cms-badge--dot::before {
	content: '';
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.cms-rendered-content .cms-badge--green {
	background: #E4F2EA;
	color: #14885E;
}
.cms-rendered-content .cms-badge--secondary {
	background: color-mix(in srgb, var(--secondary) 10%, var(--background));
	color: var(--secondary);
}
.cms-rendered-content .cms-badge--blue {
	background: #EBF2FF;
	color: var(--primary);
}
.cms-rendered-content .cms-badge--gray {
	background: #F0F5F7;
	color: #475569;
}
.cms-rendered-content .cms-badge--white {
	background: #FFFFFF;
	color: #334155;
	border: 1px solid #e2e8f0;
}

/* ---- Editor control panel */
.cms-editor-shell .cms-badges-tool {
	border: 1px dashed var(--input);
	border-radius: 0.75rem;
	padding: 0.5rem;
	background: color-mix(in srgb, var(--muted) 8%, var(--background));
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.cms-editor-shell .cms-badges-tool__preview {
	border: 1px solid var(--input);
	border-radius: 0.5rem;
	padding: 0.6rem 0.75rem;
	background: var(--background);
}
.cms-editor-shell .cms-badges-tool__controls {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.cms-editor-shell .cms-badges-tool__row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.cms-editor-shell .cms-badges-tool__input {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.8rem;
	padding: 0.25rem 0.45rem;
	border: 1px solid var(--input);
	border-radius: 0.4rem;
	background: var(--background);
	color: var(--foreground);
}
.cms-editor-shell .cms-badges-tool__select {
	font-size: 0.8rem;
	padding: 0.25rem 0.45rem;
	border: 1px solid var(--input);
	border-radius: 0.4rem;
	background: var(--background);
	color: var(--foreground);
}
.cms-editor-shell .cms-badges-tool__dot-label {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.78rem;
	color: var(--muted-foreground);
	white-space: nowrap;
	cursor: pointer;
}
.cms-editor-shell .cms-badges-tool__remove {
	width: 1.6rem;
	height: 1.6rem;
	display: grid;
	place-items: center;
	font-size: 0.8rem;
	color: var(--muted-foreground);
	background: none;
	border: 1px solid var(--border);
	border-radius: 0.4rem;
	cursor: pointer;
	flex-shrink: 0;
}
.cms-editor-shell .cms-badges-tool__remove:hover {
	color: var(--secondary);
	border-color: var(--secondary);
}
.cms-editor-shell .cms-badges-tool__add {
	align-self: flex-start;
	font-size: 0.8rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--input);
	border-radius: 0.4rem;
	background: var(--background);
	color: var(--foreground);
	cursor: pointer;
}
.cms-editor-shell .cms-badges-tool__add:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* ── Link Wrap Tool — editor shell ───────────────────────────────────────── */
/* Controls reuse the card tool's classes (.card-tool__options / __link-input /
   __seg); only the body + holder are tool-specific. Rendered-output styling
   lives in vkb-brand-colors.css under .cms-rendered-content (also loaded in the
   editor preview), so the preview matches the published page. */
.cms-editor-shell .cms-link-wrap-tool {
	border: 1px solid var(--input);
	border-radius: 0.5rem;
	overflow: hidden;
}
.cms-editor-shell .cms-link-wrap-tool__body {
	padding: 0.5rem 0.75rem;
}
.cms-editor-shell .cms-link-wrap-tool__holder {
	border: 1px dashed var(--input);
	border-radius: 0.375rem;
	padding: 0.25rem 0.5rem;
	min-height: 3rem;
}

/* ============================================================== */
/* TOC (Inhalt) tool — editor control panel                       */
/* ============================================================== */
.cms-editor-shell .cms-toc-tool {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.cms-editor-shell .cms-toc-tool__preview {
	border: 1px dashed var(--input);
	border-radius: 0.5rem;
	padding: 1rem;
	background: #ffffff;
}
.cms-editor-shell .cms-toc-tool__controls {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.cms-editor-shell .cms-toc-tool__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.cms-editor-shell .cms-toc-tool__section-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted-foreground);
	margin-top: 0.25rem;
}
.cms-editor-shell .cms-toc-tool__input,
.cms-editor-shell .cms-toc-tool__select {
	font-size: 0.82rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--input);
	border-radius: 0.4rem;
	background: #ffffff;
	color: var(--foreground);
}
.cms-editor-shell .cms-toc-tool__input--grow {
	flex: 1 1 auto;
	min-width: 8rem;
}
.cms-editor-shell .cms-toc-tool__items {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.cms-editor-shell .cms-toc-tool__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.cms-editor-shell .cms-toc-tool__icon-btn {
	width: 1.7rem;
	height: 1.7rem;
	flex: 0 0 auto;
	border: 1px solid var(--input);
	border-radius: 0.4rem;
	background: #ffffff;
	color: var(--muted-foreground);
	cursor: pointer;
	line-height: 1;
	font-size: 0.85rem;
}
.cms-editor-shell .cms-toc-tool__icon-btn:hover {
	background: #f1f5f9;
}
.cms-editor-shell .cms-toc-tool__icon-btn--danger:hover {
	background: #fee2e2;
	color: #b91c1c;
}
.cms-editor-shell .cms-toc-tool__btn {
	align-self: flex-start;
	font-size: 0.8rem;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--input);
	border-radius: 0.4rem;
	background: #ffffff;
	color: var(--foreground);
	cursor: pointer;
}
.cms-editor-shell .cms-toc-tool__btn:hover {
	background: #f1f5f9;
}
.cms-editor-shell .cms-toc-tool__swatch-label {
	font-size: 0.72rem;
	color: var(--muted-foreground);
	font-weight: 600;
}
.cms-editor-shell .cms-toc-tool__accent {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.cms-editor-shell .cms-toc-tool__accent-btn {
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 0.4rem;
	border: 1px solid var(--input);
	padding: 0;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cms-editor-shell .cms-toc-tool__accent-btn--black { background: #1f2430; }
.cms-editor-shell .cms-toc-tool__accent-btn--blue { background: #004a94; }
.cms-editor-shell .cms-toc-tool__accent-btn--slate { background: #3e4a5f; }
.cms-editor-shell .cms-toc-tool__accent-btn--red { background: #e30613; }
.cms-editor-shell .cms-toc-tool__accent-btn:hover {
	opacity: 0.95;
	transform: translateY(-1px);
}
.cms-editor-shell .cms-toc-tool__accent-btn.active {
	opacity: 1;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 55%, transparent);
}

/* ============================================================== */
/* TOC (Inhalt) tool — rendered output (editor preview + publish)  */
/* ============================================================== */
.cms-rendered-content .cms-toc {
	--cms-toc-accent: #004a94;
	position: sticky;
	top: 7rem;
}
.cms-rendered-content .cms-toc--accent-primary { --cms-toc-accent: #004a94; }
.cms-rendered-content .cms-toc--accent-secondary { --cms-toc-accent: #e30613; }
.cms-rendered-content .cms-toc--accent-slate { --cms-toc-accent: #3e4a5f; }
.cms-rendered-content .cms-toc--accent-black { --cms-toc-accent: #1f2430; }

.cms-rendered-content .cms-toc__title {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--cms-toc-accent);
}
.cms-rendered-content .cms-toc__nav {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.875rem;
}
.cms-rendered-content .cms-toc__link {
	display: block;
	color: #64748b;
	border-left: 2px solid transparent;
	padding: 0.375rem 0 0.375rem 0.75rem;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.cms-rendered-content .cms-toc__link:hover {
	color: var(--cms-toc-accent);
}
.cms-rendered-content .cms-toc__link--sub {
	color: #94a3b8;
	padding: 0.25rem 0 0.25rem 1.5rem;
	font-size: 0.8125rem;
}
.cms-rendered-content .cms-toc__link.is-active {
	color: var(--cms-toc-accent);
	border-color: var(--cms-toc-accent);
	font-weight: 600;
}
.cms-rendered-content .cms-toc__card {
	margin-top: 1.75rem;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	border-radius: 0.75rem;
	padding: 1rem;
}
.cms-rendered-content .cms-toc__card-label {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #64748b;
}
.cms-rendered-content .cms-toc__card-link {
	margin-top: 0.375rem;
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cms-toc-accent);
	text-decoration: none;
	word-break: break-all;
}
.cms-rendered-content .cms-toc__card-link:hover {
	text-decoration: underline;
}

/* ===== File Download tool ===== */
/* Editor controls */
.cms-file-dl-uploader {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	border: 1px dashed var(--input);
	border-radius: 0.5rem;
	padding: 1rem;
	background: color-mix(in srgb, var(--muted) 40%, var(--background));
}
.cms-file-dl-file-btn {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	padding: 0.5rem 0.9rem;
	border-radius: 0.5rem;
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: 0.875rem;
	font-weight: 600;
}
.cms-file-dl-hint {
	font-size: 0.75rem;
	color: var(--muted-foreground);
}
.cms-file-dl-error {
	flex-basis: 100%;
	font-size: 0.8125rem;
	color: var(--destructive, #dc2626);
}
.cms-file-dl-view {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border: 1px solid var(--input);
	border-radius: 0.5rem;
	padding: 0.875rem 1rem;
	background: var(--background);
}
.cms-file-dl-meta {
	font-size: 0.8125rem;
	color: var(--muted-foreground);
	word-break: break-all;
}
.cms-file-dl-label-field {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
}
.cms-file-dl-label-caption {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted-foreground);
}
.cms-file-dl-label-input {
	width: 100%;
	border: 1px solid var(--input);
	border-radius: 0.375rem;
	padding: 0.5rem 0.625rem;
	font-size: 0.9375rem;
	background: var(--background);
	color: var(--foreground);
}
.cms-file-dl-change-btn {
	align-self: flex-start;
	font-size: 0.8125rem;
	color: var(--muted-foreground);
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}

/* Rendered output (editor preview + published page) */
.cms-rendered-content .cms-file-download {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.625rem 1rem;
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--primary) 8%, var(--background));
	border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
	color: var(--primary);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.cms-rendered-content .cms-file-download:hover {
	background: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--primary);
}
.cms-rendered-content .cms-file-download__icon {
	display: inline-flex;
	flex-shrink: 0;
}
.cms-rendered-content .cms-file-download__icon svg {
	width: 1.125rem;
	height: 1.125rem;
}
.cms-rendered-content .cms-file-download__label {
	line-height: 1.2;
}
.cms-rendered-content .cms-file-download__meta {
	font-size: 0.75rem;
	font-weight: 500;
	opacity: 0.7;
}

/* File-download cell inside a Data Table — compact, width-constrained, and the
   label truncates with an ellipsis when it exceeds the fixed column width. */
.cms-rendered-content .cms-dt-file-link {
	max-width: 100%;
	padding: 0.4rem 0.7rem;
	font-weight: 500;
}
.cms-rendered-content .cms-dt-file-label {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ── CMS person-card + link-wrap component styles ──────────────────────────
   Moved here from the host project so the card component ships its own styles.
   Brand accents resolve via host-provided --primary / --secondary tokens. */
.cms-rendered-content .cms-person-card {
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  margin-bottom: 1rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.cms-rendered-content .cms-person-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(0, 30, 80, 0.18);
}

.cms-rendered-content .cms-person-card__media {
  position: relative;
  background: #f1f5f9;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.cms-rendered-content .cms-person-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}

.cms-rendered-content .cms-person-card__badge {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #1e293b;
}

.cms-rendered-content .cms-person-card__badge::before {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.cms-rendered-content .cms-person-card__badge--red::before {
  background: var(--secondary);
}

.cms-rendered-content .cms-person-card__badge--blue::before {
  background: var(--primary);
}

.cms-rendered-content .cms-person-card__body {
  padding: 1.25rem;
}

/* Card-wide link: keep the card looking like a card, not a hyperlink */
.cms-rendered-content a.cms-person-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Static fill presets — permanent tinted background + matching border.
   Default (no class) keeps the plain white card. Shades mirror the hover tints. */
.cms-rendered-content .cms-person-card--fill-blue {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.cms-rendered-content .cms-person-card--fill-gray {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.cms-rendered-content .cms-person-card--fill-red {
  background: #fef2f2;
  border-color: #fecaca;
}

/* Hover-color presets — mirror the risk-management nav cards */
.cms-rendered-content .cms-person-card--hover-blue:hover {
  border-color: #bfdbfe;
  background: rgba(239, 246, 255, 0.5);
}
.cms-rendered-content .cms-person-card--hover-blue:hover .cms-person-card__body :is(h1, h2, h3, h4, h5, h6) {
  color: var(--primary);
}
.cms-rendered-content .cms-person-card--hover-red:hover {
  border-color: #fecaca;
  background: rgba(254, 242, 242, 0.5);
}
.cms-rendered-content .cms-person-card--hover-red:hover .cms-person-card__body :is(h1, h2, h3, h4, h5, h6) {
  color: var(--secondary);
}
.cms-rendered-content .cms-person-card--hover-gray:hover {
  border-color: #cbd5e1;
  background: rgba(241, 245, 249, 0.6);
}
.cms-rendered-content .cms-person-card--hover-gray:hover .cms-person-card__body :is(h1, h2, h3, h4, h5, h6) {
  color: #334155;
}

/* ── Link Wrap tool: any block(s) wrapped in a clickable anchor ──────────── */
/* Keep the wrapped content looking like content, not a hyperlink. */
.cms-rendered-content a.cms-link-wrap {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* The hover color is chosen ON THE LINK and handed down as CSS variables, so the
   nested content (a person card, headings, plain text…) reads them on hover and
   reproduces the card's hover treatment — set the color once, inner blocks follow. */
.cms-rendered-content .cms-link-wrap--hover-blue {
  --cms-link-hover-border: #bfdbfe;
  --cms-link-hover-bg: rgba(239, 246, 255, 0.5);
  --cms-link-hover-text: var(--primary);
}
.cms-rendered-content .cms-link-wrap--hover-red {
  --cms-link-hover-border: #fecaca;
  --cms-link-hover-bg: rgba(254, 242, 242, 0.5);
  --cms-link-hover-text: var(--secondary);
}
.cms-rendered-content .cms-link-wrap--hover-gray {
  --cms-link-hover-border: #cbd5e1;
  --cms-link-hover-bg: rgba(241, 245, 249, 0.6);
  --cms-link-hover-text: #334155;
}

/* Smooth transitions for the nested elements driven by the link hover. */
.cms-rendered-content .cms-link-wrap :is(h1, h2, h3, h4, h5, h6) {
  transition: color 0.2s ease;
}
.cms-rendered-content .cms-link-wrap .cms-person-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

/* Nested person card: full card hover (lift + border + background) from the link. */
.cms-rendered-content :is(.cms-link-wrap--hover-blue, .cms-link-wrap--hover-red, .cms-link-wrap--hover-gray):hover .cms-person-card {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(0, 30, 80, 0.18);
  border-color: var(--cms-link-hover-border);
  background: var(--cms-link-hover-bg);
}
/* Nested headings (inside a card or bare) pick up the accent color. */
.cms-rendered-content :is(.cms-link-wrap--hover-blue, .cms-link-wrap--hover-red, .cms-link-wrap--hover-gray):hover :is(h1, h2, h3, h4, h5, h6) {
  color: var(--cms-link-hover-text);
}

/* Icon image mode — small image centered in a colored, rounded box */
.cms-rendered-content .cms-person-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 1rem;
  margin: 1.25rem 1.25rem 0;
}
.cms-rendered-content .cms-person-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
}
.cms-rendered-content .cms-person-card__icon--blue {
  background: var(--primary);
}
.cms-rendered-content .cms-person-card__icon--red {
  background: var(--secondary);
}
.cms-rendered-content .cms-person-card__icon--sm {
  width: 3.5rem;
  height: 3.5rem;
}
.cms-rendered-content .cms-person-card__icon--md {
  width: 4.5rem;
  height: 4.5rem;
}
.cms-rendered-content .cms-person-card__icon--lg {
  width: 6rem;
  height: 6rem;
}

/* Button block */
.cms-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 6px;
  border: 2px solid transparent;
  background-color: var(--color-primary, #1a56db);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s;
}
.cms-button:hover {
  opacity: 0.85;
}
.cms-button--outline {
  background-color: transparent;
  border-color: var(--color-primary, #1a56db);
  color: var(--color-primary, #1a56db);
}
.cms-button--outline:hover {
  background-color: var(--color-primary, #1a56db);
  color: #fff;
  opacity: 1;
}
.cms-button--link {
  background-color: transparent;
  border-color: transparent;
  padding: 0;
  border-radius: 0;
  color: var(--color-primary, #1a56db);
}
.cms-button--link:hover {
  text-decoration: underline;
  opacity: 1;
}
.cms-button__icon {
  display: inline-flex;
  flex-shrink: 0;
}
.cms-button__icon svg {
  width: 1em;
  height: 1em;
}

/* Button Tool editor UI */
.cms-editor-shell .cms-button-tool {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}
.cms-editor-shell .cms-button-tool__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cms-editor-shell .cms-button-tool__row--wrap {
  flex-wrap: wrap;
  align-items: flex-start;
}
.cms-editor-shell .cms-button-tool__input {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--input);
  border-radius: 0.375rem;
  background: var(--background);
  color: var(--foreground);
  outline: none;
}
.cms-editor-shell .cms-button-tool__input:focus {
  border-color: var(--ring);
}
.cms-editor-shell .cms-button-tool__input--url {
  flex: 2;
}
.cms-editor-shell .cms-button-tool__group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cms-editor-shell .cms-button-tool__label {
  font-size: 0.7rem;
  color: var(--muted-foreground);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cms-editor-shell .cms-button-tool__icon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.cms-editor-shell .cms-button-tool__icon-preview {
  min-height: 1.5rem;
  min-width: 1.5rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Additive extensions: card cover titles, gold badge, icon caption styling,
   Steps tool. New classes only — nothing above is modified, so existing
   content keeps rendering exactly as before.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Card tool: gold badge (editor color button) ── */
.cms-editor-shell .card-tool__color-btn--gold.active {
  background: #8a7a1e;
  color: #fff;
  border-color: #8a7a1e;
}

/* ── Card tool: cover title inputs (editor) ── */
.cms-editor-shell .card-tool__cover-input {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: 0.25rem;
  padding: 0.15rem 0.4rem;
  outline: none;
}
.cms-editor-shell .card-tool__cover-input:focus {
  border-color: var(--ring);
}
.cms-editor-shell .card-tool__cover-input--title {
  font-weight: 600;
}

/* ── Card: title overlay on the cover image (rendered, neutral baseline) ── */
.cms-rendered-content .cms-person-card__cover-titles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
}
.cms-rendered-content .cms-person-card__cover-eyebrow {
  font-size: 0.75rem;
  line-height: 1.3;
  opacity: 0.85;
}
.cms-rendered-content .cms-person-card__cover-title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Gold badge dot (neutral baseline; brand CSS may restyle the whole pill) */
.cms-rendered-content .cms-person-card__badge--gold::before {
  background: #c9a227;
}

/* ── Icon tool: caption styling (rendered) ── */
.cms-rendered-content .cms-icon-caption--bold {
  font-weight: 700;
}
.cms-rendered-content .cms-icon-caption--color-blue {
  color: var(--primary);
}
.cms-rendered-content .cms-icon-caption--color-gray {
  color: #64748b;
}
.cms-rendered-content .cms-icon-caption--color-white {
  color: #fff;
}
.cms-rendered-content .cms-icon-heading {
  margin: 0;
}

/* ── Icon tool: style controls row (editor) ── */
.cms-editor-shell .cms-icon-tool__style-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* ── Steps tool: editor controls ── */
.cms-editor-shell .steps-tool {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px dashed var(--input);
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--muted) 25%, var(--background));
}
.cms-editor-shell .steps-tool__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cms-editor-shell .steps-tool__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cms-editor-shell .steps-tool__num {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid var(--input);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground);
  background: var(--background);
}
.cms-editor-shell .steps-tool__label {
  flex: 1;
  min-width: 10rem;
  font-size: 0.875rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: 0.375rem;
  padding: 0.3rem 0.5rem;
  outline: none;
}
.cms-editor-shell .steps-tool__label:focus {
  border-color: var(--ring);
}
.cms-editor-shell .steps-tool__file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.cms-editor-shell .steps-tool__file-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 0.375rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 600;
}
.cms-editor-shell .steps-tool__file-url {
  font-size: 0.75rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: 0.375rem;
  padding: 0.3rem 0.5rem;
  outline: none;
  min-width: 11rem;
}
.cms-editor-shell .steps-tool__file-url:focus {
  border-color: var(--ring);
}
.cms-editor-shell .steps-tool__file-chip {
  display: inline-flex;
  align-items: center;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--background));
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  color: var(--primary);
}
.cms-editor-shell .steps-tool__file-clear,
.cms-editor-shell .steps-tool__remove {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.25rem;
}
.cms-editor-shell .steps-tool__file-clear:hover,
.cms-editor-shell .steps-tool__remove:hover {
  color: var(--destructive, #dc2626);
}
.cms-editor-shell .steps-tool__add {
  align-self: flex-start;
  border: 1px dashed var(--input);
  border-radius: 0.375rem;
  background: var(--background);
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.cms-editor-shell .steps-tool__add:hover {
  color: var(--foreground);
  border-color: var(--ring);
}
.cms-editor-shell .steps-tool__error {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--destructive, #dc2626);
}

/* ── Steps: rendered output (neutral structural baseline; brand CSS colors it) ── */
.cms-rendered-content .cms-steps {
  display: flex;
  align-items: flex-start;
}
.cms-rendered-content .cms-steps__step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.cms-rendered-content .cms-steps__step::before {
  content: '';
  position: absolute;
  top: 1.25rem;
  left: calc(-50% + 1.75rem);
  right: calc(50% + 1.75rem);
  height: 2px;
  background: currentColor;
  opacity: 0.25;
}
.cms-rendered-content .cms-steps__step:first-child::before {
  display: none;
}
.cms-rendered-content .cms-steps__circle {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 2px solid currentColor;
  background: #fff;
  font-weight: 700;
}
.cms-rendered-content .cms-steps__label {
  font-size: 0.875rem;
  line-height: 1.35;
  max-width: 12rem;
}
.cms-rendered-content a.cms-steps__step--link:hover .cms-steps__label {
  text-decoration: underline;
}

/* ── Section header: optional badge pill + subtitle (neutral baseline) ── */
.cms-rendered-content .cms-section-header__badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.25rem;
  padding: 0.125rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--muted) 60%, var(--background));
  color: var(--muted-foreground);
}
.cms-rendered-content .cms-section-header__subtitle {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.cms-rendered-content .cms-section-header__text-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── CMS Media Picker (shared "choose from library" modal) ───────────────── */
.cms-media-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none; /* toggled to flex when open */
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.55);
}
.cms-media-picker-modal {
  display: flex;
  flex-direction: column;
  width: min(880px, 100%);
  max-height: 80vh;
  background: var(--background, #fff);
  color: var(--foreground, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.75rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.cms-media-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.cms-media-picker-title {
  font-size: 0.95rem;
  font-weight: 600;
}
.cms-media-picker-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 0.375rem;
  color: var(--muted-foreground, #64748b);
}
.cms-media-picker-close:hover {
  background: var(--muted, #f1f5f9);
  color: var(--foreground, #0f172a);
}
.cms-media-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 1rem 0;
}
.cms-media-picker-toolbar .cms-media-picker-search {
  margin: 0;
  flex: 1 1 auto;
}
.cms-media-picker-view-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.5rem;
  overflow: hidden;
}
.cms-media-picker-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: var(--background, #fff);
  color: var(--muted-foreground, #64748b);
  cursor: pointer;
}
.cms-media-picker-view-btn + .cms-media-picker-view-btn {
  border-left: 1px solid var(--border, #e2e8f0);
}
.cms-media-picker-view-btn:hover {
  background: var(--muted, #f1f5f9);
}
.cms-media-picker-view-btn.is-active {
  background: var(--muted, #f1f5f9);
  color: var(--foreground, #0f172a);
}
.cms-media-picker-search {
  margin: 0.75rem 1rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: var(--background, #fff);
  color: inherit;
}
.cms-media-picker-search:focus {
  outline: none;
  border-color: var(--ring, #94a3b8);
}
.cms-media-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
  overflow-y: auto;
}
.cms-media-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 0;
  color: var(--muted-foreground, #64748b);
  font-size: 0.875rem;
}
.cms-media-picker-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.5rem;
  background: var(--background, #fff);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.cms-media-picker-item:hover {
  border-color: var(--ring, #94a3b8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.cms-media-picker-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--muted, #f1f5f9);
}
.cms-media-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cms-media-picker-type {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted-foreground, #64748b);
}
.cms-media-picker-name {
  font-size: 0.75rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cms-media-picker-meta {
  font-size: 0.6875rem;
  color: var(--muted-foreground, #64748b);
}

/* List view */
.cms-media-picker-list {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem 1rem;
  overflow-y: auto;
}
.cms-media-picker-row {
  display: grid;
  grid-template-columns: 3rem 1fr 4rem 5rem 7rem;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
}
.cms-media-picker-row:hover {
  background: var(--muted, #f1f5f9);
}
.cms-media-picker-row--head {
  position: sticky;
  top: 0;
  background: var(--background, #fff);
  cursor: default;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground, #64748b);
}
.cms-media-picker-row--head:hover {
  background: var(--background, #fff);
}
.cms-media-picker-row .cms-media-picker-thumb {
  width: 2.5rem;
  height: 2.5rem;
  aspect-ratio: auto;
}
.cms-media-picker-row .cms-media-picker-name {
  font-size: 0.8125rem;
}
.cms-media-picker-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}