/* Search overlay: frosted panel, suggested product names, recommendations */

.fp-search-overlay, .fp-cart-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.fp-search-overlay.is-open, .fp-cart-overlay.is-open {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
}

.fp-search-overlay__backdrop, .fp-cart-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
}

.fp-search-overlay__panel, .fp-cart-overlay__panel {
	position: relative;
	width: 100%;
	max-width: 520px;
	backdrop-filter: blur(80px);
    background: #57575799;
	-webkit-backdrop-filter: blur(80px);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	border-radius: 12px;
	height: calc(100vh - 80px);
	padding: 8px;
	top: 40px;
}

.fp-search-overlay.is-open .fp-search-overlay__panel, .fp-cart-overlay.is-open .fp-cart-overlay__panel {
	transform: translateX(0);
}

.fp-search-overlay__header, .fp-cart-overlay__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0px 24px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

.fp-search-overlay__form {
	flex: 1;
	min-width: 0;
}

#fp-search-overlay-input {
	width: 100%;
	padding: 0 !important;
	font-size: 48px !important;
	line-height: 1.3;
	font-family: var(--font-abc-arizona-flare) !important;
	border: unset !important;
	background: transparent;
	color: #ffffff !important;
	background: transparent !important;
	transition: border-color 0.2s, box-shadow 0.2s;
}

#fp-search-overlay-input::placeholder {
	color: #666;
}

#fp-search-overlay-input:focus {
	outline: none !important;
	border-color: unset !important;
	box-shadow: unset !important;
}

.fp-search-overlay__close, .fp-cart-overlay__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	background: transparent !important;
	color: #333;
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.2s, color 0.2s;
	flex-shrink: 0;
}

.fp-search-overlay__close:hover, .fp-cart-overlay__close:hover {
	background: rgba(0, 0, 0, 0.06);
	color: #000;
}

.fp-search-overlay__body, .fp-cart-overlay__body {
	flex: 1;
	overflow-y: auto;
	margin-top: 10px;
	padding: 16px 0;
}

.fp-search-overlay__section-title {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: #ffffff;
	font-family: var(--font-abc-diatype-mono);
}

.fp-search-overlay__suggested {
	padding: 0 16px;
	margin-bottom: 28px;
}

.fp-search-overlay__suggested-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fp-search-overlay__suggested-item {
	display: inline-block;
	font-size: 18px;
	line-height: 1.3;
	color: #FFFFFF;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	cursor: pointer;
}

.fp-search-overlay__suggested-item:hover {
	text-decoration: underline;
}

/* Common loader for both Suggested and Maybe you would like */
.fp-search-overlay__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 32px 20px;
	color: #ffffff;
	font-size: 14px;
}

.fp-search-overlay__loading[hidden] {
	display: none !important;
}

.fp-search-overlay__content[hidden] {
	display: none !important;
}

.fp-search-overlay__content {
	color: #ffffff !important;
	font-family: var(--font-abc-arizona-flare) !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
	letter-spacing: -0.2px !important;
	font-weight: 400 !important;
}

.fp-search-overlay__spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: fp-search-overlay-spin 0.7s linear infinite;
}

@keyframes fp-search-overlay-spin {
	to {
		transform: rotate(360deg);
	}
}

.fp-search-overlay__loading-text {
	flex: 0 0 auto;
}

.blank-input .fp-search-overlay__recommendations {
	border-top: 1px solid #FFFFFF33;
	padding: 16px 24px 0;
}

/* Maybe you would like: horizontal scroll of product cards */
.fp-search-overlay__recommendations-inner {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.fp-search-overlay__recommendations-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.blank-input .fp-search-overlay__recommendations-list {
	flex-direction: row;
}

.blank-input .fp-search-overlay__rec-button {
	display: none;
}

.blank-input .fp-search-overlay__rec-card {
	min-width: 332px;
}

.fp-search-overlay__rec-card {
	display: flex;
	width: 100%;
	text-decoration: none;
	color: inherit;
	background: #00000014;
	transition: background 0.2s, transform 0.2s;
	border-radius: 8px;
	align-items: center;
	gap: 20.5px;
	padding: 12px 18px;
}

.fp-search-overlay__rec-card:hover {
	background: #00000038;
	transform: translateY(-1px);
}

.fp-search-overlay__rec-image {
	display: block;
	width: 40px;
	height: 77px;
	object-fit: cover;
	padding: 10px;
}

.fp-search-overlay__rec-image-placeholder {
	width: 40px;
	height: 77px;
	aspect-ratio: 1;
	object-fit: cover;
	padding: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='77' height='60' viewBox='0 0 77 60' fill='none'%3E%3Cpath d='M61.1031 19.033L1.45839 19.0346C1.45718 19.0346 1.45619 19.0336 1.45619 19.0324C1.45619 19.0298 1.45241 19.0294 1.45185 19.032L0.0168847 25.6101C-0.0821352 26.064 0.263603 26.4932 0.728199 26.4932L32.858 26.4923C33.5327 26.4922 34.0391 27.109 33.9076 27.7708L27.6887 59.0905C27.5968 59.5536 27.951 59.9852 28.4231 59.9853L35.1635 59.987C35.1646 59.987 35.1647 59.9855 35.1637 59.9853C35.1633 59.9852 35.163 59.9847 35.1631 59.9843L41.55 27.3566C41.6483 26.8543 42.0884 26.492 42.6002 26.492L61.1038 26.4916C66.7036 26.4912 70.4185 32.2944 68.0737 37.3797C66.8198 40.099 64.0988 41.8406 61.1044 41.8407H43.6517C43.651 41.8407 43.6503 41.84 43.6503 41.8393C43.6503 41.8375 43.6478 41.8373 43.6475 41.839L42.4238 48.5705C42.3548 48.95 42.6464 49.2993 43.0321 49.2993H61.1044C67.009 49.2993 72.3745 45.8649 74.847 40.5028C79.4706 30.4753 72.1452 19.0321 61.1031 19.033Z' fill='white'/%3E%3Cpath d='M33.9832 0H6.62154L5.35821 6.17374C5.22243 6.83725 5.72937 7.45843 6.40663 7.45843H33.9832C35.7082 7.45846 37.0219 9.00463 36.7435 10.7069L36.3277 13.2493C36.2211 13.9006 36.7238 14.4921 37.3838 14.4921H42.7728C43.2971 14.4921 43.7442 14.1122 43.8289 13.5947L44.1043 11.9108C45.1252 5.66905 40.3079 0.0000324664 33.9832 0Z' fill='white'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 48px auto;
}

.fp-search-overlay__rec-content {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.fp-search-overlay__rec-desc {
	font-family: var(--font-abc-diatype-mono);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: -0.26px;
	color: #979696;
}

.fp-search-overlay__rec-title {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.25;
	font-family: var(--font-abc-arizona-flare) !important;
	color: #ffffff;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.fp-search-overlay__rec-small-text {
	font-family: var(--font-abc-diatype-mono);
	border: 0.5px solid #FFFFFF99;
	padding: 1px 4px;
	border-radius: 2px;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: -0.24px;
	height: 17px;
    align-items: center;
    display: flex;
	color: #ffffff;
}

.fp-search-overlay__rec-button {
	height: 35px;
	padding: 0 24px;
	border-radius: 10px;
	font-family: var(--font-abc-diatype-mono);
	font-size: 13px;
	background-color: transparent !important;
	font-weight: 500;
	letter-spacing: -0.26px;
	color: #ffffff !important;
	border: 1px solid #CBD7CB80 !important;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.fp-search-overlay__rec-button.is-loading {
	opacity: 0.7;
	cursor: default;
	background-color: #ffffff !important;
}

.fp-search-overlay__rec-button.is-loading::after {
	content: "";
	position: absolute;
	inset: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #1a1a1a;
	animation: fp-search-overlay-spin 0.7s linear infinite;
}

.fp-search-overlay__rec-content-wrapper {
	flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fp-search-overlay__header-buttons {
	display: flex;
	gap: 24px;
	align-items: center;
}

.fp-search-overlay__header-buttons-separator {
	color: #FFFFFF33;
}

.fp-search-text__clear {
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
}

.blank-input .fp-search-overlay__content {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;	
}

.has-input .fp-search-overlay__content {
	height: 100%;
}

.has-input .fp-search-overlay__suggested, .has-input .fp-search-overlay__section-title {
	display: none;
}

.has-input .fp-search-overlay__recommendations {
	padding: 0 24px;
	height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.search-loading .fp-search-overlay__recommendations-list {
	display: none;
}

.fp-search-overlay__see-all-results {
	display: none;
}

.has-input .fp-search-overlay__see-all-results {
	display: flex;
	border: 0.5px solid #FFFFFF4D;
	height: 40px;
	font-family: var(--font-abc-diatype-mono);
	font-size: 12px;
	letter-spacing: -0.24px;
	color: #FFFFFF;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	border-radius: 10px;
}

.fp-search-overlay__see-all-results:hover {
	background: #FFFFFF1A;
}

@media (max-width: 768px) {
	.has-input .fp-search-overlay__recommendations {
		padding: 0;
	}

	.fp-search-overlay__rec-content-wrapper {
		gap: 10px;
		flex-direction: column;
		align-items: flex-start;
	}
	.fp-search-overlay__rec-button {
		padding: 0 50px;
	}
}