.spectra-layout-guide.components-modal__frame.components-guide {
	max-height: 800px;
}

.spectra-layout-guide .components-guide__container {
	gap: 10px;
}

.spectra-layout-guide .components-button:hover svg {
	fill: var(--wp-components-color-accent, var(--wp-admin-theme-color, #2563eb)) !important;
}

.spectra-layout-guide .components-guide__page-image {
	align-items: center;
	background: #f8f9fa;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}

.spectra-layout-guide__page {
	margin: 0 auto;
	max-width: 520px;
	padding: 1rem 2rem;
}

.spectra-layout-guide__page h2 {
	color: #1e1e1e;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 1rem 0;
}

.spectra-layout-guide__page p {
	color: #757575;
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	margin: 1rem 0;
}

.spectra-layout-guide__page strong {
	color: #1e1e1e;
	font-weight: 600;
}

.spectra-layout-guide__icon {
	margin-bottom: 1rem;
}

.spectra-layout-guide__icon .dashicon, .spectra-layout-guide__icon svg {
	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #2563eb));
}

.spectra-layout-guide__features {
	background: #f0f6ff;
	border-left: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #2563eb));
	border-radius: 6px;
	margin: 1.5rem 0;
	padding: 1rem;
	text-align: left;
}

.spectra-layout-guide__features strong {
	color: #1e1e1e;
	display: block;
	font-weight: 600;
	margin-bottom: .5rem;
}

.spectra-layout-guide__features ul {
	margin: 0;
	padding-left: 1.25rem;
}

.spectra-layout-guide__features ul li {
	color: #555;
	line-height: 1.4;
	margin: .25rem 0;
}

.spectra-layout-guide__tip {
	background: #fff8e1;
	border-left: 4px solid #ffc107;
	border-radius: 6px;
	margin: 1.5rem 0;
	padding: 1rem;
	text-align: left;
}

.spectra-layout-guide__tip strong {
	color: #1e1e1e;
	display: block;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: .5rem;
}

.spectra-layout-guide__tip p {
	color: #666;
	line-height: 1.5;
	margin: 0;
}

@media (max-width:768px) {
	.spectra-layout-guide__page {
		padding: 1.5rem;
	}
	
	.spectra-layout-guide__layout-demo {
		margin: 1.5rem 0;
		padding: 1rem;
	}
	
	.spectra-layout-guide__layout-demo.flex-demo {
		flex-direction: column;
		gap: .5rem;
	}
	
	.spectra-layout-guide__layout-demo.grid-demo {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
	}
}

.wp-block-spectra-container {
	box-sizing: border-box;
	max-width: 100%;
	padding: 10px;
	position: relative;
}

.wp-block-spectra-container .wp-block-spectra-container {
	--spectra-overlay-opacity: initial;
	--spectra-shape-divider-top-width: initial;
	--spectra-shape-divider-top-height: initial;
	--spectra-shape-divider-bottom-width: initial;
	--spectra-shape-divider-bottom-height: initial;
}

.wp-block-spectra-container > :where(:not(.spectra-container__shape):not(.spectra-background-video__wrapper)) {
	position: relative;
}

.wp-block-spectra-container:after, .wp-block-spectra-container:before {
	border-radius: inherit;
}

.wp-block-spectra-container:not(.alignfull) {
	width: 100%;
}

.wp-block-spectra-container.has-image-background[style*=border-radius], .wp-block-spectra-container.has-video-background[style*=border-radius], .wp-block-spectra-container.spectra-background-image[style*=border-radius] {
	overflow: hidden;
	overflow: clip;
}

.wp-block-spectra-container[class*=wp-block].has-text-color * {
	color: inherit;
}

.wp-block-spectra-container[class*=wp-block].has-background {
	background: inherit;
}

.wp-block-spectra-container[class*=wp-block].spectra-text-color {
	color: var(--spectra-text-color);
}

.wp-block-spectra-container[class*=wp-block].spectra-text-color * {
	color: inherit;
}

.wp-block-spectra-container[class*=wp-block].spectra-background-color:not(.spectra-background-image):not(.has-video-background):before {
	background: var(--spectra-background-color);
	bottom: 0;
	content: "";
	left: 0;
	opacity: var(--spectra-overlay-opacity, 1);
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}

.wp-block-spectra-container[class*=wp-block].spectra-background-gradient:not(.spectra-background-image):not(.has-video-background):before {
	background: var(--spectra-background-gradient);
	bottom: 0;
	content: "";
	left: 0;
	opacity: var(--spectra-overlay-opacity, 1);
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}

.wp-block-spectra-container[class*=wp-block].spectra-background-color.spectra-background-image {
	isolation: isolate;
	position: relative;
}

.wp-block-spectra-container[class*=wp-block].spectra-background-color.spectra-background-image:before {
	background: var(--spectra-background-color);
	bottom: 0;
	content: "";
	left: 0;
	opacity: var(--spectra-overlay-opacity, 1);
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

.wp-block-spectra-container[class*=wp-block].spectra-background-color.spectra-background-image > :not(.spectra-background-video__wrapper):not(.spectra-container__shape) {
	position: relative;
	z-index: 3;
}

.wp-block-spectra-container[class*=wp-block].spectra-background-gradient.spectra-background-image {
	isolation: isolate;
	position: relative;
}

.wp-block-spectra-container[class*=wp-block].spectra-background-gradient.spectra-background-image:before {
	background: var(--spectra-background-gradient);
	bottom: 0;
	content: "";
	left: 0;
	opacity: var(--spectra-overlay-opacity, 1);
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

.wp-block-spectra-container[class*=wp-block].spectra-background-gradient.spectra-background-image > :not(.spectra-background-video__wrapper):not(.spectra-container__shape) {
	position: relative;
	z-index: 3;
}

.wp-block-spectra-container[class*=wp-block].spectra-text-color-hover:hover {
	color: var(--spectra-text-color-hover) !important;
}

.wp-block-spectra-container[class*=wp-block].spectra-text-color-hover:hover * {
	color: inherit !important;
}

.wp-block-spectra-container[class*=wp-block].spectra-background-color-hover:not(.spectra-background-image):hover:before {
	background: var(--spectra-background-color-hover);
	opacity: var(--spectra-overlay-opacity, 1);
}

.wp-block-spectra-container[class*=wp-block].spectra-background-gradient-hover:not(.spectra-background-image):hover:before {
	background: var(--spectra-background-gradient-hover);
	opacity: var(--spectra-overlay-opacity, 1);
}

.wp-block-spectra-container[class*=wp-block].spectra-background-color-hover.spectra-background-image:hover:before {
	background: var(--spectra-background-color-hover);
	opacity: var(--spectra-overlay-opacity, 1);
}

.wp-block-spectra-container[class*=wp-block].spectra-background-gradient-hover.spectra-background-image:hover:before {
	background: var(--spectra-background-gradient-hover);
	opacity: var(--spectra-overlay-opacity, 1);
}

.wp-block-spectra-container[class*=wp-block].spectra-background-gradient:not(.has-video-background):before {
	background: var(--spectra-background-gradient, var(--spectra-background-color));
	content: "";
	inset: 0;
	opacity: var(--spectra-overlay-opacity);
	position: absolute;
}

.wp-block-spectra-container[class*=wp-block].has-container-overlay:not(.has-video-background) {
	isolation: isolate;
	position: relative;
}

.wp-block-spectra-container[class*=wp-block].has-container-overlay:not(.has-video-background):after {
	background-attachment: var(--spectra-overlay-attachment, scroll);
	background-blend-mode: var(--spectra-overlay-blend-mode, normal);
	background-image: var(--spectra-overlay-image, none);
	background-position: var(--spectra-overlay-position, center);
	background-repeat: var(--spectra-overlay-repeat, no-repeat);
	background-size: var(--spectra-overlay-size, cover);
	border-radius: inherit;
	bottom: 0;
	content: "";
	left: 0;
	mix-blend-mode: var(--spectra-overlay-blend-mode, normal);
	opacity: var(--spectra-overlay-opacity-value, 0);
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.wp-block-spectra-container[class*=wp-block].has-container-overlay:not(.has-video-background) > :not(.spectra-container__shape):not(.spectra-background-video__wrapper) {
	position: relative;
	z-index: 2;
}

.wp-block-spectra-container[class*=wp-block].has-container-overlay:not(.has-video-background)[style*="--spectra-overlay-image: none"]:after {
	display: none;
}

.wp-block-spectra-container[class*=wp-block].has-video-background {
	isolation: isolate;
}

.wp-block-spectra-container[class*=wp-block].has-video-background .spectra-background-video__wrapper {
	border-radius: inherit;
	height: 100%;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.wp-block-spectra-container[class*=wp-block].has-video-background .spectra-background-video__wrapper video {
	border-radius: inherit;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
}

.wp-block-spectra-container[class*=wp-block].has-video-background > :not(.spectra-background-video__wrapper):not(.spectra-container__shape) {
	position: relative;
	z-index: 2;
}

.wp-block-spectra-container[class*=wp-block].spectra-box-shadow {
	box-shadow: var(--spectra-box-shadow) !important;
}

.wp-block-spectra-container[class*=wp-block].spectra-box-shadow:hover {
	box-shadow: var(--spectra-box-shadow-hover, var(--spectra-box-shadow)) !important;
}

.wp-block-spectra-container[class*=wp-block].spectra-box-shadow-hover:hover {
	box-shadow: var(--spectra-box-shadow-hover) !important;
}

.wp-block-spectra-container[class*=wp-block].spectra-border-hover:focus, .wp-block-spectra-container[class*=wp-block].spectra-border-hover:hover {
	border-color: var(--spectra-border-hover-color) !important;
}

:where(.wp-block-spectra-container[class*=wp-block].spectra-border-hover-override):focus, :where(.wp-block-spectra-container[class*=wp-block].spectra-border-hover-override):hover {
	border-color: unset !important;
}

:where(.wp-block-spectra-container[class*=wp-block].spectra-border-hover-override).spectra-border-hover:focus, :where(.wp-block-spectra-container[class*=wp-block].spectra-border-hover-override).spectra-border-hover:hover {
	border-color: var(--spectra-border-hover-color) !important;
}

.wp-block-spectra-container .spectra-container__shape {
	direction: ltr;
	left: 0;
	line-height: 0;
	overflow: hidden;
	position: absolute;
	width: 100%;
	z-index: 0;
}

.wp-block-spectra-container.is-layout-constrained > :where(.spectra-container__shape) {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

.wp-block-spectra-container .spectra-container__shape-top {
	top: -3px;
}

.wp-block-spectra-container .spectra-container__shape-top svg {
	height: var(--spectra-shape-divider-top-height, 100px);
	width: var(--spectra-shape-divider-top-width, 100%);
}

.wp-block-spectra-container .spectra-container__shape-top .spectra-container__shape-fill {
	fill: var(--spectra-shape-divider-top-color, #333);
}

.wp-block-spectra-container .spectra-container__shape-bottom {
	bottom: -3px;
	transform: rotate(180deg);
}

.wp-block-spectra-container .spectra-container__shape-bottom svg {
	height: var(--spectra-shape-divider-bottom-height, 100px);
	width: var(--spectra-shape-divider-bottom-width, 100%);
}

.wp-block-spectra-container .spectra-container__shape-bottom .spectra-container__shape-fill {
	fill: var(--spectra-shape-divider-bottom-color, #333);
}

.wp-block-spectra-container .spectra-container__shape.spectra-container__invert.spectra-container__shape-top {
	transform: rotate(180deg);
}

.wp-block-spectra-container .spectra-container__shape.spectra-container__invert.spectra-container__shape-bottom {
	transform: rotate(0deg);
}

.wp-block-spectra-container .spectra-container__shape.spectra-container__shape-flip svg {
	transform: translateX(-50%) rotateY(180deg);
}

.wp-block-spectra-container .spectra-container__shape svg {
	display: block;
	left: 50%;
	position: relative;
	transform: translateX(-50%);
}

.wp-block-spectra-container .spectra-container__shape .spectra-container__shape-fill {
	transform: rotateY(0deg);
	transform-origin: center;
}

.wp-block-spectra-container .spectra-container__shape.spectra-container__shape-above-content {
	pointer-events: none;
	z-index: 9;
}