/* Search suggestions under every search field. */
.zf-suggest-host {
	position: relative;
}
/* The header field clips its content; the suggestion panel must hang out of it. */
.header-search.zf-suggest-host {
	overflow: visible;
}
.zf-suggest {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline: 0;
	z-index: 60;
	box-sizing: border-box;
	min-inline-size: min(18rem, calc(100vw - 2rem));
	max-block-size: min(70vh, 28rem);
	overflow-y: auto;
	padding: 0.35rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--card);
	box-shadow: 0 14px 30px rgb(15 57 28 / 0.15);
	text-align: start;
}
.zf-suggest[hidden] {
	display: none;
}
.zf-suggest ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.zf-suggest-heading {
	padding: 0.5rem 0.6rem 0.2rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--muted);
}
.zf-suggest-link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-block-size: 44px;
	padding: 0.35rem 0.6rem;
	border-radius: 10px;
	color: var(--ink);
	text-decoration: none;
}
.zf-suggest-text {
	flex: 1;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}
.zf-suggest-note {
	color: var(--muted);
	font-size: 0.82rem;
}
.zf-suggest-link img {
	flex: none;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--tint);
}
.zf-suggest-price {
	flex: none;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.zf-suggest-all {
	color: var(--forest);
	font-weight: 600;
}
.zf-suggest-item.is-active .zf-suggest-link {
	background: var(--tint);
	outline: 2px solid var(--forest);
	outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
	.zf-suggest-link:hover {
		background: var(--tint);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.zf-suggest:not([hidden]) {
		animation: zf-suggest-in 0.15s ease-out;
	}
}
@keyframes zf-suggest-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

/* ---- The field itself: one calm pill. The focus ring belongs to the pill, never to the input inside it. ---- */
.site-header .header-search--primary,
.site-header .header-search-popover__panel {
	border: 1.5px solid color-mix(in srgb, var(--forest) 30%, var(--line));
	border-radius: 999px;
	background: var(--card);
	box-shadow: 0 1px 2px rgb(15 81 35 / 0.06);
	transition:
		border-color 150ms ease,
		box-shadow 150ms ease;
}
.site-header .header-search--primary:focus-within,
.site-header .header-search-popover__panel:focus-within {
	border-color: var(--forest);
	box-shadow: 0 0 0 4px rgb(15 81 35 / 0.14);
}
.site-header .header-search--primary::after,
.site-header .header-search-popover__panel::after {
	display: none;
}
.site-header .header-search--primary input,
.site-header .header-search-popover__panel input {
	padding-inline: 1.15rem 0.5rem;
	outline: none;
	box-shadow: none;
}
.site-header .header-search--primary input:focus-visible,
.site-header .header-search-popover__panel input:focus-visible {
	outline: none;
}
.site-header .header-search--primary button[type='submit'],
.site-header .header-search-popover__panel button[type='submit'] {
	min-inline-size: 40px;
	min-block-size: 40px;
	margin: 3px;
	border-radius: 50%;
	background: var(--forest);
	color: #fff;
}
.site-header .header-search--primary button[type='submit'] .zf-ui-icon,
.site-header .header-search-popover__panel button[type='submit'] .zf-ui-icon {
	--zf-icon-ink: #fff;
	--zf-icon-accent: #fff;
	--zf-icon-sage: #fff;
	inline-size: 20px;
	block-size: 20px;
}
@media (hover: hover) and (pointer: fine) {
	.site-header .header-search--primary button[type='submit']:hover,
	.site-header .header-search-popover__panel button[type='submit']:hover {
		background: color-mix(in srgb, var(--forest) 82%, #000);
	}
}

/* ---- The suggestion panel ---- */
.search-box.zf-suggest-host {
	overflow: visible;
}
.zf-suggest {
	/* Solid paper: the page below must never show through the list. */
	background: #fffdf8;
	padding: 0.5rem;
	border-radius: 18px;
	box-shadow: 0 18px 44px rgb(15 57 28 / 0.2);
}
.zf-suggest-link {
	border-radius: 12px;
}
.zf-suggest-completion::before,
.zf-suggest-link:not(.zf-suggest-product, .zf-suggest-all)::before {
	content: '';
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	background: var(--forest);
	opacity: 0.55;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
		center / contain no-repeat;
}
.zf-suggest mark {
	background: none;
	color: inherit;
	font-weight: 700;
}
.zf-suggest-heading {
	padding: 0.7rem 0.75rem 0.25rem;
	letter-spacing: 0.01em;
}
.zf-suggest-link img {
	inline-size: 48px;
	block-size: 48px;
	border-radius: 10px;
}
.zf-suggest-product {
	min-block-size: 58px;
}
.zf-suggest-all {
	margin-block-start: 0.35rem;
	border-block-start: 1px solid var(--line);
	border-radius: 0 0 12px 12px;
}