/* Panel is a sibling of the animated form: its clip-path and dimensions are untouched. */
.cd-live-search[hidden], .cd-live-search__all[hidden] { display: none; }
.cd-live-search {
	position: absolute;
	inset-block-start: calc(100% + var(--cd-space-3));
	inset-inline-start: 0;
	width: calc(100% + var(--cd-space-4) + var(--cd-control-size));
	z-index: 30;
	padding: var(--cd-space-3);
	max-height: min(34rem, 65dvh);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.cd-live-search__status { margin: var(--cd-space-2); color: var(--cd-color-muted); font-size: var(--cd-font-sm); }
.cd-live-search__list { list-style: none; margin: 0; padding: 0; }
.cd-live-search__item {
	display: flex;
	align-items: center;
	gap: var(--cd-space-3);
	padding: var(--cd-space-3);
	border-radius: var(--cd-radius-md);
	text-decoration: none;
	color: var(--cd-color-text);
}
.cd-live-search__item:hover, .cd-live-search__item[aria-selected="true"] { background: var(--cd-color-accent-soft); }
.cd-live-search__item:focus-visible { outline: var(--cd-focus-width) solid var(--cd-focus-color); outline-offset: calc(-1 * var(--cd-focus-width)); }
.cd-live-search__item img { width: 3.5rem; height: 3.5rem; flex-shrink: 0; object-fit: contain; background: var(--cd-color-background); border-radius: var(--cd-radius-sm); }
.cd-live-search__body { display: grid; gap: var(--cd-space-1); min-width: 0; }
.cd-live-search__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: var(--cd-line-height-heading); font-weight: var(--cd-weight-semibold); }
.cd-live-search__price { font-size: var(--cd-font-sm); font-weight: var(--cd-weight-semibold); }
.cd-live-search__price ins { text-decoration: none; }
.cd-live-search__price del, .cd-live-search__stock { color: var(--cd-color-muted); font-size: var(--cd-font-sm); font-weight: var(--cd-weight-normal); }
.cd-live-search__all { display: flex; justify-content: center; margin-top: var(--cd-space-3); }
.cd-search-results__query { overflow-wrap: anywhere; color: var(--cd-color-muted); }
@media (max-width: 64rem) {
	/* The opaque shell stays visible even before a query has results. */
	.cd-search-open .cd-header-main { min-height: var(--cd-search-row-height); }
	.cd-search-open .cd-header-main > .cd-logo,
	.cd-search-open .cd-search-toggle,
	.cd-search-open .cd-header-cart,
	.cd-search-open .cd-search-mobile-submit,
	.cd-search-open .cd-primary-mobile { display: none; }
	.cd-search-open .cd-header-center {
		position: fixed;
		inset-block-start: var(--cd-search-top, 0px);
		inset-inline: 0;
		z-index: 100;
		width: 100%;
		height: var(--cd-search-height, calc(100dvh - var(--cd-search-top, 0px) - var(--cd-mobile-nav-height, 0px)));
		padding: var(--cd-space-3) var(--cd-gutter) max(var(--cd-space-3), env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--cd-space-3);
		background: var(--cd-color-background);
		overflow: hidden;
	}
	.cd-search-open .cd-product-search {
		flex: 0 0 auto;
		order: 3;
		margin-top: auto;
		clip-path: none;
		transition: none;
	}
	.cd-search-open .cd-product-search input[type="search"] { flex: 1; }
	.cd-search-open .cd-product-search input[type="search"]::-webkit-search-cancel-button { display: none; }
	.cd-search-open .cd-search-close { flex-shrink: 0; }
	.cd-search-open .cd-live-search {
		position: static;
		width: 100%;
		max-height: none;
		min-height: 0;
		flex: 1;
		order: 1;
		flex-direction: column;
		justify-content: flex-end;
		overflow: hidden;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: var(--cd-color-background);
	}
	.cd-search-open .cd-live-search:not([hidden]) { display: flex; }
	.cd-search-open .cd-live-search__list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
	.cd-search-open .cd-live-search__status, .cd-search-open .cd-live-search__all { flex-shrink: 0; }
	.cd-search-results .cd-product-search { flex-wrap: wrap; }
	.cd-search-results .cd-product-search input[type="search"] { flex: 1 1 12rem; }
}

/* Only the desktop header input: preserve geometry and the expanding control. */
@media (min-width: 64.001rem) {
	.cd-site-header .cd-product-search input[type="search"]:focus-visible {
		outline: var(--cd-focus-width) solid var(--cd-color-muted);
		outline-offset: calc(-1 * var(--cd-focus-width));
	}
	.cd-site-header.cd-search-pointer .cd-product-search input[type="search"]:focus {
		outline: none;
	}
}

/* Examples are a mobile-only prompt, outside the live-results listbox. */
.cd-search-examples { display: none; }
@media (max-width: 64rem) {
	.cd-search-open .cd-header-center { animation: cd-search-mobile-in 200ms ease-out both; }
	.cd-search-open.cd-search-closing .cd-header-center { animation: cd-search-mobile-out 200ms ease-in both; pointer-events: none; }
	.cd-search-open .cd-product-search input[type="search"]:focus {
		border-color: var(--cd-color-muted);
		box-shadow: var(--cd-shadow-inset);
	}
	.cd-search-open .cd-product-search input[type="search"]:focus-visible {
		outline: var(--cd-focus-width) solid var(--cd-color-muted);
		outline-offset: calc(-1 * var(--cd-focus-width));
	}
	.cd-search-open.cd-search-pointer .cd-product-search input[type="search"]:focus { outline: none; }
	.cd-search-open .cd-search-examples:not([hidden]) { display: block; order: 2; margin-top: auto; flex-shrink: 1; min-height: 0; overflow-y: auto; padding: var(--cd-space-3); }
	.cd-search-open .cd-header-center:has(.cd-search-examples:not([hidden])) .cd-product-search { margin-top: 0; }
	.cd-search-examples p { color: var(--cd-color-muted); font-size: var(--cd-font-sm); margin-bottom: var(--cd-space-3); }
	.cd-search-examples__queries { display: flex; flex-wrap: wrap; gap: var(--cd-space-2); }
	.cd-search-examples .cd-pill { min-height: 0; padding: var(--cd-space-2) var(--cd-space-3); font-size: var(--cd-font-sm); max-width: 100%; }
}
@keyframes cd-search-mobile-in {
	from { opacity: 0; transform: translateY(calc(-1 * var(--cd-space-2))); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes cd-search-mobile-out {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(calc(-1 * var(--cd-space-2))); }
}
@media (prefers-reduced-motion: reduce) {
	.cd-search-open .cd-header-center,
	.cd-search-open.cd-search-closing .cd-header-center { animation: none; }
}
