.ab-canvas { max-width: 100%; }
.ab-block { margin: 0 0 16px 0; }
.ab-heading { line-height: 1.2; margin: 0 0 16px; }
.ab-text { line-height: 1.7; }
.ab-button { display: inline-block; text-decoration: none; font-weight: 600; }
.ab-image { height: auto; }
.ab-columns { display: flex; gap: 20px; flex-wrap: wrap; }
.ab-columns > .ab-column { flex: 1; min-width: 240px; }
.ab-spacer { width: 100%; }
.ab-section { width: 100%; }
.ab-section-inner > .ab-block:last-child { margin-bottom: 0; }

.ab-container { width: 100%; display: flex; }
.ab-container > .ab-block { margin-bottom: 0; }
.ab-container > .ab-block:not(:last-child) { margin-right: 0; }

.ab-html { width: 100%; }
.ab-html > *:last-child { margin-bottom: 0; }

/* Many themes animate content in on scroll/load using classes like
 * .fade-up, .fade-in, .reveal, .animate-on-scroll, etc., which start at
 * opacity:0 and rely on the theme's own JS (often keyed to specific
 * selectors/timing) to reveal them. That JS doesn't always reliably
 * fire once content is restructured inside the builder's wrapper divs,
 * which can leave entire real sections invisible even though they're
 * present in the HTML. This forces every such element visible
 * unconditionally so imported content is never silently hidden —
 * animation-driven entrance effects are lost, but nothing disappears.
 */
.ab-canvas [class*="fade-"],
.ab-canvas [class*="reveal"],
.ab-canvas [class*="animate-"],
.ab-canvas [class*="aos-"],
.ab-canvas [data-fade],
.ab-canvas [data-aos] {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

/* Falls back to the theme's own fonts unless a block explicitly sets one. */
.ab-heading:not([style*="font-family"]) { font-family: var(--ab-font-heading, inherit); }
.ab-text:not([style*="font-family"]) { font-family: var(--ab-font-body, inherit); }

@media (max-width: 767px) {
	.ab-columns { flex-direction: column; }
	.ab-container { flex-direction: column !important; }
}