.woocommerce-customize-store__container {
	display: flex;
	flex-direction: column;

	button {
		cursor: pointer;
	}
}

.woocommerce-customize-store-error-link {
	cursor: pointer;
}

.woocommerce-customize-store-header {
	min-height: 64px;
	padding: 1rem;
	width: 100%;

	.edit-site-site-hub__view-mode-toggle-container {
		background-color: transparent;
		height: 32px;
		width: 32px;
	}

	.edit-site-site-icon {
		line-height: 0;

		svg {
			height: 32px;
			width: 32px;
		}
	}

	.edit-site-site-hub__site-title {
		font-size: 0.8125rem;
		font-weight: 500;
		margin: 0;
		padding: 0 0 0 0.75rem;
		line-height: 2rem;
		color: $gray-900;
	}
}

.woocommerce-customize-store-container {
	display: flex;
	flex-direction: row;
}

.woocommerce-customize-store-sidebar {
	flex: 0 0 380px;
	padding: 1rem;

	.woocommerce-customize-store-sidebar__title {
		color: #1e1e1e;
		font-size: 1rem;
		font-weight: 600;
		margin: 0;
		padding: 0;
		line-height: 2.5;
	}

	button {
		background-color: transparent;
		border: none;
		line-height: 1;
		padding-right: 0;
		vertical-align: middle;
	}

	svg {
		color: inherit;
		height: 24px;
		width: 24px;
		margin: 0.25rem;
	}

	p {
		padding: 0 1rem;
		color: #757575;
		max-width: 20rem;
	}
}

.woocommerce-customize-store-main {
	margin-right: 2.5rem;
	width: 100%;
	min-width: 820px;

	p {
		color: #2f2f2f;
		font-size: 0.813rem;
		line-height: 1.5;
		margin: 0;
		padding: 0;

		&.select-theme-text {
			font-size: 1rem;
			font-weight: 500;
			color: #1e1e1e;
			margin-bottom: 24px;
		}
	}

	.woocommerce-cys-design-with-ai__error-notice {
		margin: 0 0 24px;
	}
}

.woocommerce-customize-store-banner {
	background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-background.svg) no-repeat center right;
	background-size: auto 218px;
	background-position-y: 29px;
	border-radius: 4px;
	display: flex;
	margin: 1.25rem 0 3.375rem;
	min-height: 248px;
	width: 100%;
	align-items: center;
	padding-left: 50px;
	padding-right: 40px;
	position: relative;

	&.offline-banner {
		background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-offline.svg) no-repeat center right;
		background-size: auto 218px;
		background-position-y: 29px;
	}

	&.no-ai-banner {
		background: rgba(242, 237, 255, 0.6) url(../assets/images/intro-banner-no-ai.svg) no-repeat center right;
	}

	&.existing-ai-theme-banner,
	&.existing-no-ai-theme-banner {
		background: rgba(246, 247, 247, 1);

		.woocommerce-customize-store-banner-content {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.banner-actions {
				width: 50%;
			}
		}

		.preview-iframe {
			pointer-events: none;
			position: absolute;
			bottom: -497px;
			right: 50px;
			width: 1100px;
			height: 710px;
			-moz-transform: scale(0.3);
			-moz-transform-origin: top right;
			-o-transform: scale(0.3);
			-o-transform-origin: top right;
			-webkit-transform: scale(0.3);
			-webkit-transform-origin: top right;
			border-top-left-radius: 28px;
			border-top-right-radius: 28px;
		}
	}

	.woocommerce-customize-store-banner-content {
		width: 450px;

		@media only screen and (min-width: 1400px) {
			width: 710px;
		}

		button.is-link {
			color: var(--wp-admin-theme-color, #3858e9);
			text-decoration: none;
			font-weight: 500;
		}

		button.components-button {
			padding: 8px 16px;
			height: 40px;
		}

		button.components-button + button.components-button { // add left margin for all buttons with another button to its left
			margin-left: 12px;
		}

		h1 {
			font-size: 1.25rem;
			line-height: 23.87px;
			font-weight: 500;
			color: #000;
			padding: 0;
		}

		p {
			margin: 12px 0 28px 0;
			color: #2f2f2f;
			line-height: 16px;

			&.ai-disclaimer {
				color: #757575;
				font-size: 12px;
				margin-top: 10px;
				margin-bottom: 0;
				line-height: 18px;

				a {
					text-decoration: none;
				}
			}
		}
	}
}

.woocommerce-customize-store-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-bottom: 40px;

	.intro-card {
		border-radius: 4px;
		border: 1px solid #e9e9e9;
		text-align: center;
		padding: 36px 51px;
		margin-top: 0;
		width: 500px;

		img {
			width: 100%;
			margin-bottom: 20px;
		}

		div {
			text-align: left;
			.intro-card__title {
				font-size: 14px;
			}

			.intro-card__link {
				background-color: #fff;
				border: 0;
				padding: 0;
				color: #3858e9;
				font-size: 13px;
			}
		}
	}
}

.woocommerce-customize-store-theme-cards {
	display: grid;
	flex-wrap: wrap;
	gap: 32px;
	row-gap: 54px;
	grid-template-columns: repeat(2, 1fr);

	@media only screen and (min-width: 1600px) {
		grid-template-columns: repeat(4, 1fr);
	}

	.theme-card {
		display: block;
		text-decoration: none;

		a {
			&:focus {
				box-shadow: none;
			}
		}

		img {
			border-radius: 4px;
			border: 1px solid #e9e9e9;
			width: 100%;
			height: 240px;
			object-fit: cover;
			object-position: 0 0;
		}

		.theme-card__title {
			font-size: 1rem;
			margin: 0;
			padding: 0;
			font-weight: 600;
		}

		.theme-card__info {
			margin: 24px 0 8px 0;
			display: flex;
			.theme-card__color-palettes {
				margin-left: auto;
			}
		}

		.theme-card__color-palettes {
			display: flex;
			margin: 0 0 0 auto;
			padding: 0;
			gap: 5px;

			li {
				width: 20px;
				height: 20px;
				box-shadow: inset 0 0 0 1px #0003;
				border-radius: 50%;
				margin-bottom: 0;

				&.more_palettes {
					box-shadow: none;
					font-size: 11px;
					text-align: center;
				}
			}
		}

		.theme-card__free {
			color: #1e1e1e;
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: 16px; /* 114.286% */
		}

		.theme-card__active {
			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.12);
			color: var(--wp-admin-theme-color, #fff);
		}

		.theme-card__paid {
			background: #f0f0f1;
			color: #2c3338;
		}

		.theme-card__active,
		.theme-card__paid {
			border-radius: 4px;
			padding: 4px 8px;
			justify-content: flex-end;
			align-items: center;
			gap: 10px;
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: 20px; /* 166.667% */
			margin-right: 10px;
		}
	}
}

.woocommerce-customize-store-browse-themes {
	text-align: center;

	button {
		background-color: #fff;
		border: 1px solid var(--wp-admin-theme-color, #3858e9);
		border-radius: 2px;
		color: var(--wp-admin-theme-color, #3858e9);
		display: inline-block;
		font-size: 0.8125rem;
		margin: 3.75rem 0;
		padding: 0.5rem 0.75rem;
	}
}