/* Local Studio Core structural and responsive runtime. */
.ls-container {
	box-sizing: border-box;
	margin-inline: auto;
	width: min(100%, var(--ls-content-width, var(--wp--style--global--wide-size, 1280px)));
}

.ls-stack {
	display: flex;
	flex-direction: column;
}

.ls-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.ls-grid {
	display: grid;
	grid-template-columns: repeat(var(--ls-grid-columns, 3), minmax(0, 1fr));
}

@media (480px < width <= 782px) {

	.ls-core-enhanced[style*="--ls-tablet-font-size:"] {
		font-size: var(--ls-tablet-font-size) !important;
	}
	.wp-block-button.ls-core-enhanced[style*="--ls-tablet-font-size:"] > .wp-block-button__link {
		font-size: inherit !important;
	}

	.ls-core-enhanced[style*="--ls-tablet-gap:"] {
		gap: var(--ls-tablet-gap) !important;
	}

	.ls-core-enhanced[style*="--ls-tablet-margin-bottom:"] {
		margin-block-end: var(--ls-tablet-margin-bottom) !important;
	}

	.ls-core-enhanced[style*="--ls-tablet-margin-top:"] {
		margin-block-start: var(--ls-tablet-margin-top) !important;
	}

	.ls-core-enhanced[style*="--ls-tablet-padding-y:"] {
		padding-block: var(--ls-tablet-padding-y) !important;
	}

	.ls-core-enhanced[style*="--ls-tablet-padding-x:"] {
		padding-inline: var(--ls-tablet-padding-x) !important;
	}

	.ls-core-enhanced[style*="--ls-tablet-text-align:"] {
		text-align: var(--ls-tablet-text-align) !important;
	}

	.ls-core-enhanced.ls-grid[style*="--ls-tablet-grid-columns:"] {
		grid-template-columns: repeat(var(--ls-tablet-grid-columns), minmax(0, 1fr)) !important;
	}

	.ls-core-enhanced:is(.ls-row, .ls-stack)[style*="--ls-tablet-direction:"] {
		flex-direction: var(--ls-tablet-direction) !important;
	}
}

@media (width <= 480px) {

	.ls-core-enhanced[style*="--ls-mobile-font-size:"] {
		font-size: var(--ls-mobile-font-size) !important;
	}
	.wp-block-button.ls-core-enhanced[style*="--ls-mobile-font-size:"] > .wp-block-button__link {
		font-size: inherit !important;
	}

	.ls-core-enhanced[style*="--ls-mobile-gap:"] {
		gap: var(--ls-mobile-gap) !important;
	}

	.ls-core-enhanced[style*="--ls-mobile-margin-bottom:"] {
		margin-block-end: var(--ls-mobile-margin-bottom) !important;
	}

	.ls-core-enhanced[style*="--ls-mobile-margin-top:"] {
		margin-block-start: var(--ls-mobile-margin-top) !important;
	}

	.ls-core-enhanced[style*="--ls-mobile-padding-y:"] {
		padding-block: var(--ls-mobile-padding-y) !important;
	}

	.ls-core-enhanced[style*="--ls-mobile-padding-x:"] {
		padding-inline: var(--ls-mobile-padding-x) !important;
	}

	.ls-core-enhanced[style*="--ls-mobile-text-align:"] {
		text-align: var(--ls-mobile-text-align) !important;
	}

	.ls-core-enhanced.ls-grid[style*="--ls-mobile-grid-columns:"] {
		grid-template-columns: repeat(var(--ls-mobile-grid-columns), minmax(0, 1fr)) !important;
	}

	.ls-core-enhanced:is(.ls-row, .ls-stack)[style*="--ls-mobile-direction:"] {
		flex-direction: var(--ls-mobile-direction) !important;
	}
}

.ls-effect {
	transition-duration: var(--ls-effect-duration, 500ms);
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.ls-effect.ls-effect-is-ready:not(.is-visible) {
	opacity: 0;
	transition-delay: var(--ls-effect-delay, 0ms);
}

.ls-effect--fade-up.ls-effect-is-ready:not(.is-visible) {
	transform: translateY(1.5rem);
}

.ls-effect--fade-down.ls-effect-is-ready:not(.is-visible) {
	transform: translateY(-1.5rem);
}

.ls-effect--slide-left.ls-effect-is-ready:not(.is-visible) {
	transform: translateX(2rem);
}

.ls-effect--slide-right.ls-effect-is-ready:not(.is-visible) {
	transform: translateX(-2rem);
}

.ls-effect--scale-in.ls-effect-is-ready:not(.is-visible) {
	transform: scale(0.96);
}

.ls-effect.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.ls-effect,
	.ls-effect.ls-effect-is-ready:not(.is-visible) {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}
/* Native border-support class may collide with the "border" palette slug.
 * Only a deliberately selected container color/new independent card opts in. */
.ls-builder-card--inherit-text.ls-builder-card--inherit-text:not(.has-text-color) {
	color: inherit !important;
}
.ls-core-custom-container-text.ls-core-custom-container-text[style*="--ls-core-container-text:"] {
	color: var(--ls-core-container-text) !important;
}

/* Only an explicit per-block control opts in. Reading accessibility wins. */
html:not(.ls-reading-spacing) .ls-core-custom-line-height.ls-core-custom-line-height[style*="--ls-core-line-height:"] {
	line-height: var(--ls-core-line-height) !important;
}

/* Explicit Heading/Paragraph/Button preset only. The repeated opt-in class outranks
 * legacy context + heading + preset selectors regardless of stylesheet order.
 * Device overrides still win; unmarked imported/custom typography is inert. */
.ls-core-custom-font-size.ls-core-custom-font-size.ls-core-custom-font-size[style*="--ls-core-font-size:"] {
	font-size: var(--ls-core-font-size) !important;
}
/* Native Button keeps its size on the wrapper, while design CSS can size the
 * inner link directly. Opted-in links follow that wrapper at every breakpoint. */
.wp-block-button.ls-core-custom-font-size.ls-core-custom-font-size[style*="--ls-core-font-size:"] > .wp-block-button__link {
	font-size: inherit !important;
}
@media (480px < width <= 782px) {
	.ls-core-custom-font-size.ls-core-custom-font-size.ls-core-custom-font-size[style*="--ls-core-font-size:"] {
		font-size: var(--ls-tablet-font-size, var(--ls-core-font-size)) !important;
	}
}
@media (width <= 480px) {
	.ls-core-custom-font-size.ls-core-custom-font-size.ls-core-custom-font-size[style*="--ls-core-font-size:"] {
		font-size: var(--ls-mobile-font-size, var(--ls-core-font-size)) !important;
	}
}