.axcelersblocks-table-summary {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 8px;
	margin: 0 0 16px;
}

.axcelersblocks-table-summary__item {
	box-sizing: border-box;
	min-width: 0;
	padding: 10px;
	text-align: center;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 6px;
}

.axcelersblocks-table-summary__item span,
.axcelersblocks-table-summary__item strong {
	display: block;
}

.axcelersblocks-table-summary__item span {
	margin-bottom: 2px;
	font-size: 11px;
	line-height: 1.3;
	color: #646970;
}

.axcelersblocks-table-summary__item strong {
	font-size: 18px;
	line-height: 1.2;
	color: #1e1e1e;
}

.axcelersblocks-table-summary__help {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #646970;
}

.editor-styles-wrapper .axcelersblocks-table {
	width: 100%;
	table-layout: fixed;
}

// Keep the table layout stable regardless of which inner block is selected.
// A selected <tr>/<td> must not let the editor's generic block wrapper styles
// (margins/min-width) reflow the table or leak a stray appender cell.
.axcelersblocks-table .block-list-appender {
	display: none !important;
}

.editor-styles-wrapper .axcelersblocks-table tr,
.editor-styles-wrapper .axcelersblocks-table thead,
.editor-styles-wrapper .axcelersblocks-table tbody,
.editor-styles-wrapper .axcelersblocks-table tfoot {
	min-width: 0;
}

// WordPress adds editor state classes such as `is-highlighted` to hovered/active inner
// blocks. On semantic table elements those generic block styles can alter row
// geometry. Preserve native table display so hover never shrinks the table.
.editor-styles-wrapper .axcelersblocks-table thead.axcelersblocks-table-section,
.editor-styles-wrapper .axcelersblocks-table thead.axcelersblocks-table-section.is-highlighted,
.editor-styles-wrapper .axcelersblocks-table thead.axcelersblocks-table-section.is-hovered,
.editor-styles-wrapper .axcelersblocks-table thead.axcelersblocks-table-section.is-selected,
.editor-styles-wrapper .axcelersblocks-table thead.axcelersblocks-table-section.has-child-selected {
	display: table-header-group !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.editor-styles-wrapper .axcelersblocks-table tbody.axcelersblocks-table-section,
.editor-styles-wrapper .axcelersblocks-table tbody.axcelersblocks-table-section.is-highlighted,
.editor-styles-wrapper .axcelersblocks-table tbody.axcelersblocks-table-section.is-hovered,
.editor-styles-wrapper .axcelersblocks-table tbody.axcelersblocks-table-section.is-selected,
.editor-styles-wrapper .axcelersblocks-table tbody.axcelersblocks-table-section.has-child-selected {
	display: table-row-group !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.editor-styles-wrapper .axcelersblocks-table tfoot.axcelersblocks-table-section,
.editor-styles-wrapper .axcelersblocks-table tfoot.axcelersblocks-table-section.is-highlighted,
.editor-styles-wrapper .axcelersblocks-table tfoot.axcelersblocks-table-section.is-hovered,
.editor-styles-wrapper .axcelersblocks-table tfoot.axcelersblocks-table-section.is-selected,
.editor-styles-wrapper .axcelersblocks-table tfoot.axcelersblocks-table-section.has-child-selected {
	display: table-footer-group !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.editor-styles-wrapper .axcelersblocks-table tr.axcelersblocks-table-row,
.editor-styles-wrapper .axcelersblocks-table tr.axcelersblocks-table-row.is-highlighted,
.editor-styles-wrapper .axcelersblocks-table tr.axcelersblocks-table-row.is-hovered,
.editor-styles-wrapper .axcelersblocks-table tr.axcelersblocks-table-row.is-selected,
.editor-styles-wrapper .axcelersblocks-table tr.axcelersblocks-table-row.has-child-selected {
	display: table-row !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.editor-styles-wrapper .axcelersblocks-table th.axcelersblocks-table-cell,
.editor-styles-wrapper .axcelersblocks-table td.axcelersblocks-table-cell,
.editor-styles-wrapper .axcelersblocks-table th.axcelersblocks-table-cell.is-highlighted,
.editor-styles-wrapper .axcelersblocks-table td.axcelersblocks-table-cell.is-highlighted,
.editor-styles-wrapper .axcelersblocks-table th.axcelersblocks-table-cell.is-hovered,
.editor-styles-wrapper .axcelersblocks-table td.axcelersblocks-table-cell.is-hovered,
.editor-styles-wrapper .axcelersblocks-table th.axcelersblocks-table-cell.is-selected,
.editor-styles-wrapper .axcelersblocks-table td.axcelersblocks-table-cell.is-selected,
.editor-styles-wrapper .axcelersblocks-table th.axcelersblocks-table-cell.has-child-selected,
.editor-styles-wrapper .axcelersblocks-table td.axcelersblocks-table-cell.has-child-selected {
	display: table-cell !important;
	max-width: none !important;
	margin: 0 !important;
}

.editor-styles-wrapper .axcelersblocks-table .axcelersblocks-table-section.is-highlighted::after,
.editor-styles-wrapper .axcelersblocks-table .axcelersblocks-table-row.is-highlighted::after,
.editor-styles-wrapper .axcelersblocks-table .axcelersblocks-table-section.is-hovered::after,
.editor-styles-wrapper .axcelersblocks-table .axcelersblocks-table-row.is-hovered::after,
.editor-styles-wrapper .axcelersblocks-table .axcelersblocks-table-section.is-selected::after,
.editor-styles-wrapper .axcelersblocks-table .axcelersblocks-table-row.is-selected::after,
.editor-styles-wrapper .axcelersblocks-table .axcelersblocks-table-section.has-child-selected::after,
.editor-styles-wrapper .axcelersblocks-table .axcelersblocks-table-row.has-child-selected::after {
	content: none !important;
	display: none !important;
}

// Editor-only wrapper around the <table> so the "Add" affordances live outside
// the table's row/cell flow. The reserved right/bottom gutters (only while the
// table is being edited) give the inserter lines room just outside the edges.
.axcelersblocks-table__editor {
	position: relative;
}

$axb-cell-gutter: 30px;
$axb-row-gutter: 30px;

.axcelersblocks-table__editor.is-table-active {
	padding-right: $axb-cell-gutter;
	padding-bottom: $axb-row-gutter;
}

// ── Table-level "Add Section" inserter (line + centered capsule) ──────────────
.axb-table-inserter {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 4;

	// The insertion line.
	&::before {
		content: '';
		position: absolute;
		background: #c6c6c6;
		border-radius: 2px;
		transition: background 0.15s ease;
	}

	&:hover::before {
		background: #000000;
	}
}

.axcelersblocks-table__editor.is-table-active .axb-table-inserter {
	opacity: 1;
	pointer-events: auto;
}

// Add Section → horizontal line below the table (a whole new section).
.axb-table-inserter--section {
	left: 0;
	right: $axb-cell-gutter;
	bottom: 0;
	height: 30px;

	&::before {
		left: 0;
		right: 0;
		top: 50%;
		height: 2px;
		border-top: 1px dashed transparent;
		background: #c6c6c6;
	}

	&:hover::before {
		background: #000000;
	}
}

// Capsule button centered on the line.
.axb-table-inserter .axb-table-inserter__btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: auto;
	min-height: 0;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: #000000;
	border: none;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.18 );
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease;

	svg {
		width: 16px;
		height: 16px;
		fill: currentColor;
	}

	&:hover,
	&:focus {
		color: #fff;
		background: #000000;
		box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.24 );
	}
}

/* Creation-only grid picker (12×12). */
.axcelersblocks-table-grid-picker {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.axcelersblocks-table-grid-picker__grid {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.axcelersblocks-table-grid-picker__row {
	display: flex;
	gap: 3px;
}

.axcelersblocks-table-grid-picker__cell {
	width: 18px;
	height: 18px;
	padding: 0;
	background: #fff;
	border: 1px solid #c6c6c6;
	border-radius: 2px;
	cursor: pointer;

	&:hover,
	&.is-active {
		background: #000000;
		border-color: #000000;
	}
}

.axcelersblocks-table-grid-picker__label {
	font-size: 12px;
	color: #646970;
}
