.page-builder {
	margin-bottom: 60px;
	scroll-margin-top: 96px;
	scroll-padding-top: 0 !important;

	ul {
		list-style: disc;
		padding-left: 20px;
	}

	ol {
		list-style: decimal;
		padding-left: 20px;
	}

	p {
		margin-top: 0;
		margin-bottom: 1rem;
	}

	a {
		&:not(.main-button) {
			color: var(--brand-primary, var(--primaryColor));
			&:hover{
				text-decoration: underline;
			}
		}
	}
	/*
	* {

		margin-top: calc(2rem * calc(1 - 0));
		margin-bottom: calc(2rem * 0);
	} */

	h1 { font-size: 2rem;    font-weight: 700; margin-bottom: 0.5rem; line-height: 1.2; }
	h2 { font-size: 1.5rem;  font-weight: 700; margin-bottom: 0.5rem; line-height: 1.2; }
	h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.3; }
	h4 { font-size: 1.125rem;font-weight: 600; margin-bottom: 0.5rem; line-height: 1.4; }
	h5 { font-size: 1rem;    font-weight: 600; margin-bottom: 0.5rem; }
	h6 { font-size: 0.875rem;font-weight: 600; margin-bottom: 0.5rem; }

	blockquote {
		border-left: 4px solid var(--brand-primary, var(--primaryColor));
		padding: 0.5rem 0 0.5rem 1rem;
		margin: 1rem 0;
		color: #555;
		font-style: italic;
	}

	.table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 1rem;
	}

	.table th,
	.table td {
		padding: 0.5rem 0.75rem;
		border: 1px solid #dee2e6;
		text-align: left;
		vertical-align: top;
	}

	.table thead th {
		background-color: #f8f9fa;
		font-weight: 600;
		border-bottom: 2px solid #dee2e6;
	}

	.table-striped tbody tr:nth-child(odd) {
		background-color: #f9f9f9;
	}

	.table-bordered {
		border: 1px solid #dee2e6;
	}

	/* Panel (Bootstrap 3) */
	.panel {
		margin-bottom: 1rem;
		border: 1px solid #ddd;
		border-radius: 4px;
		box-shadow: 0 1px 1px rgba(0,0,0,.05);
		overflow: hidden;
	}

	.panel-heading {
		padding: 10px 15px;
		background-color: #f5f5f5;
		border-bottom: 1px solid #ddd;
	}

	.panel-primary > .panel-heading {
		background-color: var(--brand-primary, var(--primaryColor));
		color: #fff;
		border-color: var(--brand-primary, var(--primaryColor));
	}

	.panel-body {
		padding: 15px;
	}

	/* List group (Bootstrap 3/4/5) */
	.list-group {
		padding-left: 0;
		margin-bottom: 1.25rem;
		list-style: none;
	}

	.list-group-item {
		display: block;
		padding: 0.5rem 1rem;
		border: 1px solid #dee2e6;
		border-top: none;
	}

	.list-group-item:first-child {
		border-top: 1px solid #dee2e6;
		border-radius: 4px 4px 0 0;
	}

	.list-group-item:last-child {
		border-radius: 0 0 4px 4px;
	}

	.table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Bootstrap image utility */
	.img-responsive {
		max-width: 100%;
		height: auto;
		display: block;
	}

}

/* The legacy page-builder editor lets admins bake inline colors into CMS
   HTML (e.g. style="color: black"). When the surrounding template is in
   dark mode, that content stays unreadable because the inline colors do
   not adapt. Lock page-builder blocks to a light surface so CMS-authored
   content renders consistently regardless of the theme.
   Dark-aware blocks opt out with .pb-dark-aware (the 2050 section-library
   galleries: their markup themes itself via the semantic tokens, so the
   forced white surface left their dark-palette text unreadable). */
html.dark .page-builder:not(.pb-dark-aware) {
	background-color: #ffffff;
	color: #4d4d4d;
	color-scheme: light;
}

.default-sections {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) {
	.default-sections{
		max-width: 750px;
	}
}
@media (min-width: 992px) {
	.default-sections{
		max-width: 970px;
	}
}
@media (min-width: 1200px) {
	.default-sections{
		max-width: 1170px;
	}
}

/* ── Bootstrap grid shim — FLAT CSS (no nesting) ─────────────────────────────
   Written as explicit flat selectors so they work in all browsers regardless
   of CSS nesting support. Global — covers .page-builder AND .default-sections
   and any other context where Bootstrap grid classes appear in DB content. */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

[class*="col-"] {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}

@media (min-width: 576px) {
	.col-sm-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.col-sm-3  { flex: 0 0 25%;      max-width: 25%;      }
	.col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-sm-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.col-sm-6  { flex: 0 0 50%;      max-width: 50%;      }
	.col-sm-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.col-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col-sm-9  { flex: 0 0 75%;      max-width: 75%;      }
	.col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.col-sm-12 { flex: 0 0 100%;     max-width: 100%;     }
}

@media (min-width: 768px) {
	.col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.col-md-3  { flex: 0 0 25%;      max-width: 25%;      }
	.col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.col-md-6  { flex: 0 0 50%;      max-width: 50%;      }
	.col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col-md-9  { flex: 0 0 75%;      max-width: 75%;      }
	.col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.col-md-12 { flex: 0 0 100%;     max-width: 100%;     }
}

@media (min-width: 992px) {
	.col-lg-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.col-lg-3  { flex: 0 0 25%;      max-width: 25%;      }
	.col-lg-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
	.col-lg-6  { flex: 0 0 50%;      max-width: 50%;      }
	.col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
	.col-lg-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
	.col-lg-9  { flex: 0 0 75%;      max-width: 75%;      }
	.col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
	.col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
	.col-lg-12 { flex: 0 0 100%;     max-width: 100%;     }
}

/* Bootstrap heading-size utilities */
.h1 { font-size: 2rem;    font-weight: 700; line-height: 1.2; }
.h2 { font-size: 1.5rem;  font-weight: 700; line-height: 1.2; }
.h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.h4 { font-size: 1.125rem;font-weight: 600; line-height: 1.4; }
.h5 { font-size: 1rem;    font-weight: 600; line-height: 1.5; }
.h6 { font-size: 0.875rem;font-weight: 600; line-height: 1.5; }