.cms-editor-shell {
	border: 2px 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%;
}
/* Block frame — 2px border around each tool block */
.cms-editor-shell .ce-block {
	border: 2px solid var(--input);
	border-radius: 0.5rem;
	padding: 0.25rem;
	margin-bottom: 0.5rem;
	transition: border-color 0.15s ease;
}
.cms-editor-shell .ce-block:last-child {
	margin-bottom: 0;
}
/* Highlight only the innermost edited block — the one that is focused/active and
   does NOT contain another focused/active block. A wrapper host block
   (Grid/TwoCol/Section/Card) therefore lights up only when focus is in its own
   settings/chrome, never when one of its nested blocks is being edited. */
.cms-editor-shell .ce-block:focus-within:not(:has(.ce-block:focus-within)),
.cms-editor-shell .ce-block.ce-block--focused:not(:has(.ce-block--focused)) {
	border-color: var(--ring);
	background: color-mix(in srgb, var(--ring) 10%, transparent);
}
/* Reset inside nested editor contexts (table cols, grid cols, card body) */
.cms-editor-shell .tc-col .ce-block,
.cms-editor-shell .gc-col .ce-block,
.cms-editor-shell .card-tool__body-holder .ce-block {
	border: none;
	border-radius: 0;
	padding: 0;
	margin-bottom: 0;
}
/* Borderless nested blocks (column/card body) have no frame, so the innermost
   focused/active one gets an outline instead — same "only the deepest" logic. */
.cms-editor-shell .tc-col .ce-block:focus-within:not(:has(.ce-block:focus-within)),
.cms-editor-shell .gc-col .ce-block:focus-within:not(:has(.ce-block:focus-within)),
.cms-editor-shell .card-tool__body-holder .ce-block:focus-within:not(:has(.ce-block:focus-within)),
.cms-editor-shell .tc-col .ce-block.ce-block--focused:not(:has(.ce-block--focused)),
.cms-editor-shell .gc-col .ce-block.ce-block--focused:not(:has(.ce-block--focused)),
.cms-editor-shell .card-tool__body-holder .ce-block.ce-block--focused:not(:has(.ce-block--focused)) {
	outline: 2px solid var(--ring);
	outline-offset: 1px;
	border-radius: 0.375rem;
	background: color-mix(in srgb, var(--ring) 10%, transparent);
}
.cms-editor-shell .ce-block.cms-editor-pi-active {
	border-color: var(--ring);
	background: color-mix(in srgb, var(--ring) 10%, transparent);
}
.cms-editor-shell .tc-col .ce-block.cms-editor-pi-active,
.cms-editor-shell .gc-col .ce-block.cms-editor-pi-active,
.cms-editor-shell .card-tool__body-holder .ce-block.cms-editor-pi-active {
	outline: 2px solid var(--ring);
	outline-offset: 1px;
	border-radius: 0.375rem;
}
/* Preview zone highlight — the rendered element matching the body block being
   edited (mapped via data-cms-pi from cms-card-tool.js). Filled zone + ring. */
.cms-editor-shell .cms-card-tool-preview [data-cms-pi].cms-pi-active {
	background: color-mix(in srgb, var(--ring) 18%, transparent);
	outline: 2px solid var(--ring);
	outline-offset: 2px;
	border-radius: 0.375rem;
}
.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 .cms-quote-tool {
	display: grid;
	gap: 0.875rem;
	padding: 0.25rem 0;
}
.cms-editor-shell .cms-quote-tool__preview {
	display: block;
	padding: 0.25rem 0;
}
.cms-editor-shell .cms-quote-tool__preview .cms-rendered-content {
	margin: 0;
}
.cms-editor-shell .cms-quote-tool__controls {
	display: grid;
	gap: 0.75rem;
}
.cms-editor-shell .cms-quote-tool__text,
.cms-editor-shell .cms-quote-tool__caption {
	width: 100%;
	border: 1px solid var(--input);
	border-radius: 0.5rem;
	background: var(--background);
	color: var(--foreground);
	padding: 0.75rem 0.875rem;
	font: inherit;
}
.cms-editor-shell .cms-quote-tool__text {
	resize: vertical;
	min-height: 7rem;
	line-height: 1.5;
}
.cms-editor-shell .cms-quote-tool__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
.cms-editor-shell .cms-quote-tool__caption {
	flex: 1 1 15rem;
	min-width: 12rem;
}
.cms-editor-shell .cms-quote-tool__swatches {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.cms-editor-shell .cms-quote-tool__swatch-label {
	font-size: 0.875rem;
	color: var(--muted-foreground);
}
.cms-editor-shell .cms-quote-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 .cms-quote-tool__swatch.active {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
.cms-editor-shell .cms-quote-tool__swatch--blue {
	background: #004A94;
}
.cms-editor-shell .cms-quote-tool__swatch--slate {
	background: #64748B;
}
.cms-editor-shell .cms-quote-tool__swatch--red {
	background: #E30613;
}
.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);
}
/* EditorJS popover menus (the "+"/Add menu and the block-settings menu) must sit
   above all editor content — including stacked short blocks (Icon tool) and nested
   editors (Card / Columns), whose `.codex-editor` is `position:relative; z-index:1`,
   plus the sticky card preview at `z-index:5`.

   The visible popover box is `.ce-popover__container` (`position:absolute; z-index:4`),
   nested inside `.ce-toolbar`, which has `will-change:opacity,top` (creating a
   stacking context) but NO z-index. `.ce-popover` itself is `position:static`, so a
   z-index on it is ignored.

   Layering goals, from top to bottom: open menus (above everything, including the
   sticky action bars at z-30 that follow the editor) > sticky action bars > toolbar
   BUTTONS ("+"/drag-settings — above editor content like nested editors =1 and the
   sticky card preview =5, but NOT above the action bars) > editor content. Three
   coordinated pieces:
     1. strip the stacking context off `.ce-toolbar` (drop `opacity` from
        will-change) so its children layer independently at page level;
     2. the popover container carries z-101 itself, the buttons only z-10;
     3. while a popup is open, drop the `z-index:1` cap EditorJS puts on every
        `.codex-editor` in its ancestor chain (`z-index:auto` removes the stacking
        context) — otherwise everything above is trapped inside the editor and
        loses to the bars. Within a closed editor the cap stays, so nothing leaks
        above the body-level icon/media pickers or the inline-editor modal.
   The inline (selection) toolbar IS the popup itself (ships with only `z-index:3`),
   so the whole element gets z-100. */
.cms-editor-shell .ce-toolbar {
	will-change: top;
}
.cms-editor-shell .ce-toolbar__plus,
.cms-editor-shell .ce-toolbar__settings-btn {
	position: relative;
	z-index: 10;
}
.cms-editor-shell .ce-inline-toolbar {
	z-index: 100;
}
.cms-editor-shell .codex-editor:has(.ce-popover--opened),
.cms-editor-shell .codex-editor:has(.ce-inline-toolbar--showed) {
	z-index: auto;
}
.cms-editor-shell .ce-popover .ce-popover__container {
	z-index: 101;
	/* Solid fill so the menu fully covers whatever it overlaps (e.g. the sticky
	   card preview) — nothing shows through it. */
	background: var(--popover, #fff);
	box-shadow: 0 6px 24px color-mix(in srgb, var(--foreground) 18%, transparent);
}
/* Frame around the inline (page) editor: rounded-corner clip, released while a
   popup is open so a menu near the editor's bottom edge can extend past the frame
   (a clip cuts it geometrically no matter the z-index). */
.cms-editor-frame {
	overflow-y: clip;
}
.cms-editor-frame:has(.ce-popover--opened),
.cms-editor-frame:has(.ce-inline-toolbar--showed) {
	overflow-y: visible;
}
.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;
	gap: 5px;
	display: flex;
	flex-direction: column;
}

.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.cms-quote--primary,
.cms-rendered-content .cms-quote.cms-quote--primary {
	border-left-color: var(--primary);
	background: color-mix(in srgb, var(--primary) 6%, var(--background));
	color: color-mix(in srgb, var(--foreground) 78%, var(--primary));
}
.cms-rendered-content blockquote.cms-quote--slate,
.cms-rendered-content .cms-quote.cms-quote--slate {
	border-left-color: #64748B;
	background: color-mix(in srgb, #64748B 9%, var(--background));
	color: color-mix(in srgb, var(--foreground) 84%, #475569);
}
.cms-rendered-content blockquote.cms-quote--secondary,
.cms-rendered-content .cms-quote.cms-quote--secondary {
	border-left-color: var(--secondary);
	background: color-mix(in srgb, var(--secondary) 8%, var(--background));
	color: color-mix(in srgb, var(--foreground) 80%, var(--secondary));
}
.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: 2px 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: 2px 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: 2px 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 input.gc-gap-input {
	width: 3.5rem;
	font-size: 0.65rem;
	padding: 0.1rem 0.3rem;
	border: 2px solid var(--input);
	border-radius: 0.25rem;
	background: var(--background);
	color: var(--foreground);
	outline: none;
	font-variant-numeric: tabular-nums;
}
.cms-editor-shell input.gc-gap-input:focus {
	border-color: var(--ring);
}
.cms-editor-shell .gc-add-btn {
	font-size: 0.7rem;
	padding: 0.15rem 0.5rem;
	border: 2px 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: 2px 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: 2px 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: stretch;
	margin: 0 0 1rem;
}
.cms-rendered-content .cms-grid__col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
@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 {
	position: relative;
	border: 1px dashed var(--input);
	border-radius: 0.875rem;
	/* clip (not hidden) keeps the rounded-corner clipping without creating a
	   scroll container, so the sticky preview can pin to the page viewport. */
	overflow-y: clip;
	background: var(--background);
}
.cms-editor-shell .card-tool__content {
	display: block;
}
.cms-editor-shell .card-tool__url-view {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem;
	border-bottom: 1px dashed var(--input);
	background: #f1f5f9;
}
.cms-editor-shell--compact .cms-link-wrap-tool--inline-card .card-tool--show-media .card-tool__content {
	display: block;
}

.cms-editor-shell .card-tool__url-text {
	flex: 1 1 100%;
	font-size: 0.72rem;
	color: var(--muted-foreground);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: monospace;
}

/* Card preview — inline, full width, above the card-tool settings.
   Renders the card 1:1 so it matches the published page exactly.
   Sticky so it stays fully visible while scrolling through the settings. */
.cms-editor-shell .card-tool .cms-card-tool-preview {
	position: sticky;
	top: 0;
	z-index: 5;
	width: 100%;
	padding: 0.75rem;
	background: #fff;
	border-bottom: 1px dashed var(--input);
	/* Clicks on preview zones now focus the matching editor controls/block. */
	pointer-events: auto;
	display: flex;
	justify-content: center;
}
.cms-editor-shell .card-tool .cms-card-tool-preview [data-cms-pi] {
	cursor: pointer;
}
.cms-editor-shell .card-tool .cms-card-tool-preview .cms-rendered-content{
	width: 50%;
}
.vips-home-main-grid .cms-editor-shell .card-tool .cms-card-tool-preview .cms-rendered-content{
	width: 80%;
}

.cms-steps__step .cms-steps__label{
	word-break: break-word;
}
.cms-editor-shell .card-tool .cms-card-tool-preview:empty {
	display: none;
}
.cms-quote-tool__preview {
	display: block;
	margin-bottom: 0.125rem;
}
/* Inside a card, inner tools must not show their own per-tool preview — the
   card's central PREVIEW panel is the single place these render. Scoped to the
   nested card body so standalone (non-nested) usage keeps its own preview.
   The button tool's small icon swatch (.cms-button-tool__icon-preview) is an
   editing control, not a duplicate block preview, so it stays visible. */
.cms-editor-shell .card-tool__body-holder .cms-section-header-tool__preview,
.cms-editor-shell .card-tool__body-holder .cms-contact-tool__preview,
.cms-editor-shell .card-tool__body-holder .cms-badges-tool__preview,
.cms-editor-shell .card-tool__body-holder .cms-toc-tool__preview,
.cms-editor-shell .card-tool__body-holder .cms-hero-tool__preview,
.cms-editor-shell .card-tool__body-holder .cms-icon-tool__preview:not(.cms-button-tool__icon-preview),
.cms-editor-shell .card-tool__body-holder .cms-quote-tool__preview {
	display: none;
}


/* While a popup menu is open anywhere inside the card, the editing surface
   (settings rows + media + inner editor) must paint above the sticky preview, and
   the menu itself is handled by the `.codex-editor` release (top of file). Do NOT
   give the rows a z-index — that creates stacking contexts that trap the menu below
   the sticky action bars (z-30). Instead demote the preview to z-index:0: the rows
   (position:relative, z-auto, later in DOM) then paint over it by DOM order, and
   the solid backdrop keeps it from showing through the editor's transparent gaps
   or pinning over (and hiding) the card settings.
   The preview and these rows are siblings under .card-tool. */
.cms-editor-shell .card-tool:has(.ce-popover--opened) .cms-card-tool-preview,
.cms-editor-shell .card-tool:has(.ce-inline-toolbar--showed) .cms-card-tool-preview {
	z-index: 0;
}
.cms-editor-shell .card-tool:has(.ce-popover--opened) .card-tool__options,
.cms-editor-shell .card-tool:has(.ce-popover--opened) .card-tool__controls,
.cms-editor-shell .card-tool:has(.ce-popover--opened) .card-tool__content,
.cms-editor-shell .card-tool:has(.ce-inline-toolbar--showed) .card-tool__options,
.cms-editor-shell .card-tool:has(.ce-inline-toolbar--showed) .card-tool__controls,
.cms-editor-shell .card-tool:has(.ce-inline-toolbar--showed) .card-tool__content {
	position: relative;
}
/* The settings rows are already opaque (color-mixed fills); only the content row,
   whose inner editor/grid has transparent gaps, needs an explicit solid fill so the
   preview behind it never bleeds through. */
.cms-editor-shell .card-tool:has(.ce-popover--opened) .card-tool__content,
.cms-editor-shell .card-tool:has(.ce-inline-toolbar--showed) .card-tool__content {
	background: var(--background);
}

/* Inline (page) editor compact mode: no extra overrides needed — the two-column
   preview|edit layout is already applied globally above. The inner content area
   (media URL row + body) stacks vertically within the edit column. */

/* Controls bar */
.cms-editor-shell .card-tool__controls {
	display: flex;
	align-items: center;
	width: 100%;
	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;
	max-width: 5rem;
}
.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__change-btn {
	display: block;
	padding: 0.2rem 0.75rem;
	flex-shrink: 0;
}

/* 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 {
	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;
	white-space: nowrap;
}
.cms-editor-shell .cms-icon-tool__pick-btn:hover {
	background: var(--muted);
}

/* Icon picker popup — appended to document.body; must paint above the sticky
   card preview (z-index:5), editor toolbars (10/100) and sticky action bars
   (z-30), same level as the media picker modal. */
.cms-icon-picker {
	position: absolute;
	z-index: 100;
	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;
	/* clip (not hidden) keeps the rounded-corner clipping without creating a
	   scroll container, so a nested card's sticky preview can pin to the page
	   viewport. Mirrors `.card-tool` (overflow-y: clip). */
	/* overflow: clip; */
}
.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 {
  display: flex;
  flex-direction: column;
  flex: 1;
  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 {
  flex: 1;
  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: flex;
  flex-direction: column;
  flex: 1;
  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;
  flex-shrink: 0;
  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;
  max-width: 7ßrem;
}
.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: nowrap;
  gap: 0.75rem;
}
.cms-editor-shell .cms-icon-tool__sel-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.cms-editor-shell .cms-icon-tool__select {
  font-size: 0.75rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--input);
  border-radius: 0.25rem;
  background: var(--background);
  color: var(--foreground);
  cursor: pointer;
  outline: none;
}
.cms-editor-shell .cms-icon-tool__select:focus {
  border-color: var(--ring);
}

/* ── 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;
}