.ggd-search {
	--ggd-blue: var(--e-global-color-primary, #1D4ED8);
	--ggd-blue-soft: var(--e-global-color-e394900, #3B82F6);
	--ggd-tint: var(--e-global-color-be216fc, #EFF6FF);
	--ggd-ink: var(--e-global-color-text, #0F172A);
	--ggd-muted: var(--e-global-color-55d9783, #475569);
	--ggd-faint: var(--e-global-color-79860d8, #94A3B8);
	--ggd-white: var(--e-global-color-fba0803, #FFFFFF);
	--ggd-paper: var(--e-global-color-ced7ef0, #F8FAFC);
	--ggd-line: var(--e-global-color-2da9a21, #1E40AF2E);
	--ggd-line-soft: var(--e-global-color-ca37f13, #1E40AF1A);

	position: relative;
	width: 100%;
	max-width: 620px;
	font-family: inherit;
	color: var(--ggd-ink);
	text-align: left;
}

.ggd-search *,
.ggd-search *::before,
.ggd-search *::after {
	box-sizing: border-box;
}

.ggd-search__field {
	position: relative;
	display: flex;
	align-items: center;
}

/* Doubled selector: the theme's input styles outrank a single class and were
   collapsing the left padding (icon under the text) and forcing a black border. */
.ggd-search input.ggd-search__input {
	width: 100%;
	height: 54px;
	padding: 0 3.5rem 0 3.1rem;
	margin: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ggd-ink);
	background-color: var(--ggd-white);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 1.1rem center;
	background-size: 18px 18px;
	border: 1px solid var(--ggd-line);
	border-radius: 12px;
	outline: none;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
}

.ggd-search input.ggd-search__input::placeholder {
	color: var(--ggd-faint);
	opacity: 1;
}

.ggd-search input.ggd-search__input:focus {
	color: var(--ggd-ink);
	background-color: var(--ggd-white);
	border-color: var(--ggd-blue);
	outline: none;
	box-shadow: 0 0 0 3px var(--ggd-tint);
}

/* Belt and braces — the input is type="text" now, but if it ever goes back to
   type="search" the native cancel button must not double up with ours. */
.ggd-search input.ggd-search__input::-webkit-search-cancel-button,
.ggd-search input.ggd-search__input::-webkit-search-decoration {
	display: none;
	appearance: none;
}

.ggd-search button.ggd-search__clear {
	position: absolute;
	right: 12px;
	width: 28px;
	height: 28px;
	min-width: 0;
	padding: 0;
	cursor: pointer;
	background-color: #E2E8F0;
	/* viewBox is tight to the cross — a 24x24 box with a short path renders the
	   mark at a fraction of background-size. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 2l8 8M10 2l-8 8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 13px 13px;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	transition: background-color 0.15s ease;
}

/* Invert on hover — a dark mark on mid-grey reads as mud. */
.ggd-search button.ggd-search__clear:hover,
.ggd-search button.ggd-search__clear:focus-visible {
	background-color: var(--ggd-ink);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 2l8 8M10 2l-8 8'/%3E%3C/svg%3E");
	outline: none;
}

.ggd-search__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	z-index: 9999;
	max-height: 28rem;
	overflow: hidden auto;
	background: var(--ggd-white);
	border: 1px solid var(--ggd-line-soft);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

.ggd-search__card {
	position: relative;
	display: flex;
	gap: 0.9rem;
	align-items: center;
	padding: 0.7rem 1rem;
	color: var(--ggd-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ggd-line-soft);
	transition: background-color 0.12s ease;
}

.ggd-search__card:last-of-type {
	border-bottom: 0;
}

.ggd-search__card:hover,
.ggd-search__card.is-active {
	color: var(--ggd-ink);
	text-decoration: none;
	background-color: var(--ggd-tint);
}

.ggd-search__card.is-active::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	content: "";
	background: var(--ggd-blue);
}

.ggd-search__card.is-oos .ggd-search__thumb,
.ggd-search__card.is-oos .ggd-search__price {
	opacity: 0.5;
}

.ggd-search__thumb {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	object-fit: contain;
	background: var(--ggd-white);
	border: 1px solid var(--ggd-line-soft);
	border-radius: 9px;
}

.ggd-search__meta {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.ggd-search__title {
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ggd-ink);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ggd-search__brand {
	font-size: 11px;
	font-weight: 500;
	color: var(--ggd-faint);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.ggd-search__price {
	display: flex;
	gap: 0.4rem;
	align-items: baseline;
	margin-left: auto;
	font-size: 14px;
	font-weight: 500;
	color: var(--ggd-ink);
	white-space: nowrap;
}

.ggd-search__was {
	font-size: 12px;
	font-weight: 400;
	color: var(--ggd-faint);
	text-decoration: line-through;
}

.ggd-search__all {
	display: block;
	padding: 0.85rem 1rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--ggd-blue);
	text-align: center;
	text-decoration: none;
	background: var(--ggd-paper);
	border-top: 1px solid var(--ggd-line-soft);
	transition: background-color 0.12s ease;
}

.ggd-search__all:hover {
	color: var(--ggd-blue);
	text-decoration: none;
	background: var(--ggd-tint);
}

.ggd-search__empty {
	padding: 1.4rem 1rem;
	margin: 0;
	font-size: 14px;
	color: var(--ggd-muted);
	text-align: center;
}

.ggd-search__empty strong {
	font-weight: 500;
	color: var(--ggd-ink);
}

@media (max-width: 600px) {
	.ggd-search__input {
		height: 50px;
		font-size: 16px;
	}

	.ggd-search__price {
		flex-direction: column;
		gap: 0;
		align-items: flex-end;
	}
}