/**
 * Header product search — the search bar itself (replaces the old plain
 * .zozia-search-bar group; layout/flex-sizing rules for it still live in
 * header.css) plus the live suggestions dropdown wired up by
 * assets/js/product-search.js.
 */

.zozia-search-bar {
	position: relative;
	border: 1.5px solid var(--wp--preset--color--border-light);
	border-radius: 24px;
	padding: 10px 18px;
	background-color: var(--wp--preset--color--white);
}

.zozia-search-bar__input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	background: none;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

.zozia-search-bar__input::placeholder {
	color: var(--wp--preset--color--muted);
}

/* Hide the native "clear" control on WebKit/Chromium search inputs — the
   theme provides its own .zozia-search-bar__clear button instead. */
.zozia-search-bar__input::-webkit-search-cancel-button {
	display: none;
}

.zozia-search-bar__clear,
.zozia-search-bar__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

.zozia-search-bar__clear svg {
	width: 14px;
	height: 14px;
}

/* [hidden] normally beats a plain class selector on specificity alone, but
   the `display: flex` above matches it 1-for-1 (both 0,1,0), so source
   order decides — and this stylesheet loads after the UA default. Restate
   it explicitly so JS toggling the `hidden` attribute actually hides the
   button instead of staying visible as an empty flex box. */
.zozia-search-bar__clear[hidden] {
	display: none;
}

.zozia-search-bar__clear:hover,
.zozia-search-bar__submit:hover {
	color: var(--wp--preset--color--primary);
}

.zozia-search-bar__submit .zozia-icon {
	stroke: currentColor;
}

.zozia-search-bar__results {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	right: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(36, 16, 25, 0.14);
	padding: 8px;
	max-height: 70vh;
	overflow-y: auto;
}

.zozia-search-bar__suggestion {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}

.zozia-search-bar__suggestion:hover,
.zozia-search-bar__suggestion:focus-visible {
	background-color: var(--wp--preset--color--surface);
}

.zozia-search-bar__suggestion-image {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 8px;
	background-color: var(--wp--preset--color--surface);
	background-size: cover;
	background-position: center;
}

.zozia-search-bar__suggestion-info {
	min-width: 0;
}

.zozia-search-bar__suggestion-name {
	display: block;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zozia-search-bar__suggestion-price {
	display: block;
	margin: 2px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.zozia-search-bar__view-all {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 10px 8px 4px;
	border: none;
	border-top: 1px solid var(--wp--preset--color--border-light);
	background: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-align: center;
	cursor: pointer;
}

.zozia-search-bar__view-all:hover {
	text-decoration: underline;
}

.zozia-search-bar__empty,
.zozia-search-bar__loading {
	margin: 0;
	padding: 16px 8px;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 480px) {
	.zozia-search-bar__results {
		left: -16px;
		right: -16px;
	}
}