.ctp-table-wrapper {
	width: 100%;
	margin: 1.5em 0;
	box-sizing: border-box;
}

.ctp-caption {
	font-weight: 700;
	font-size: 1.1em;
	margin-bottom: 0.5em;
}

table.ctp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

table.ctp-table th,
table.ctp-table td {
	text-align: var( --ctp-cell-align, left );
	padding: 10px 12px;
	vertical-align: top;
}

table.ctp-table tbody tr {
	background: var( --ctp-row-bg, transparent );
}

table.ctp-table thead th {
	background: var( --ctp-header-bg, #2c3338 );
	color: var( --ctp-header-text, #fff );
	text-align: var( --ctp-header-align, left );
	font-weight: 600;
}

table.ctp-table.ctp-bordered th,
table.ctp-table.ctp-bordered td {
	border: 1px solid var( --ctp-border-color, #ddd );
}

table.ctp-table.ctp-striped tbody tr:nth-child(even) {
	background: var( --ctp-row-alt-bg, #f7f7f7 );
}

/* Side-scroll responsive mode: keep the table shape, allow horizontal swipe. */
.ctp-responsive-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.ctp-responsive-scroll table.ctp-table {
	min-width: 480px;
}

/* Stack responsive mode: each row becomes a labelled card below the breakpoint. */
@media screen and ( max-width: 680px ) {
	.ctp-responsive-stack table.ctp-table,
	.ctp-responsive-stack table.ctp-table thead,
	.ctp-responsive-stack table.ctp-table tbody,
	.ctp-responsive-stack table.ctp-table th,
	.ctp-responsive-stack table.ctp-table td,
	.ctp-responsive-stack table.ctp-table tr {
		display: block;
		width: 100%;
	}

	.ctp-responsive-stack table.ctp-table thead {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.ctp-responsive-stack table.ctp-table tr {
		margin-bottom: 14px;
		border: 1px solid var( --ctp-border-color, #ddd );
		border-radius: 4px;
		overflow: hidden;
	}

	.ctp-responsive-stack table.ctp-table td {
		border: none;
		border-bottom: 1px solid var( --ctp-border-color, #eee );
		padding-left: 45%;
		position: relative;
		min-height: 20px;
	}

	.ctp-responsive-stack table.ctp-table td:last-child {
		border-bottom: 0;
	}

	.ctp-responsive-stack table.ctp-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 12px;
		top: 10px;
		width: 40%;
		white-space: normal;
		font-weight: 600;
		color: #555;
	}

	.ctp-responsive-stack table.ctp-table.ctp-striped tbody tr:nth-child(even) {
		background: transparent;
	}
}