.search-popup {
	--search-popup-surface: #ffffff;
	--search-popup-text: #111110;
	--search-popup-accent: #9fc23c;
	--search-popup-backdrop: rgba(17, 17, 16, 0.65);
	--search-popup-heading-font: Lora, Georgia, serif;
	--search-popup-body-font: Lato, sans-serif;
	--search-popup-radius: 12px;

	border: 0;
	padding: 0;
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	background: transparent;
	color: var(--search-popup-text);
	overflow: auto;
}

.search-popup::backdrop {
	background: var(--search-popup-backdrop);
}

.search-popup[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.search-popup__panel {
	position: relative;
	box-sizing: border-box;
	width: min(640px, calc(100vw - 48px));
	padding: 32px 28px 28px;
	background: var(--search-popup-surface);
	border-radius: var(--search-popup-radius);
	box-shadow: 0 16px 40px rgba(17, 17, 16, 0.18);
}

.search-popup__close {
	appearance: none;
	cursor: pointer;
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--search-popup-text);
}

.search-popup__close svg {
	pointer-events: none;
	width: 24px;
	height: 24px;
}

.search-popup__title {
	margin: 0 40px 16px 0;
	font-family: var(--search-popup-heading-font);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--search-popup-text);
}

.search-popup__bar {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.search-popup__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid #d3d3d3;
	border-radius: 6px;
	background: var(--search-popup-surface);
	font-family: var(--search-popup-body-font);
	font-size: 16px;
	line-height: 1.4;
	color: var(--search-popup-text);
	outline: none;
}

.search-popup__input:focus {
	border-color: var(--search-popup-accent);
}

.search-popup__submit {
	appearance: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--search-popup-accent);
	border-radius: 6px;
	background: var(--search-popup-accent);
	color: var(--search-popup-text);
	font-family: var(--search-popup-body-font);
}

.search-popup__submit svg {
	pointer-events: none;
	width: 18px;
	height: 18px;
}

.search-popup-trigger--icon {
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--search-popup-text, #111110);
}

.search-popup-trigger--icon svg {
	pointer-events: none;
	width: 20px;
	height: 20px;
}

@media screen and (max-width: 768px) {
	.search-popup__panel {
		width: min(92.5vw, 640px);
		padding: 28px 20px 20px;
	}

	.search-popup__title {
		font-size: 24px;
		margin-right: 36px;
	}

	.search-popup__close {
		top: 12px;
		right: 12px;
	}

	.search-popup__submit {
		width: 44px;
		height: 44px;
	}
}

body.home .search-popup-trigger--icon,
body.single-sc_display_homes .search-popup-trigger--icon,
body.single-sc_home_designs .search-popup-trigger--icon {
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: white;
}

body.fixed-navigation .search-popup-trigger--icon {
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--search-popup-text, #111110);
}