/* ==========================================================================
   Header product search.

   A compact rounded field in the header's left cell with a magnifier on its
   right edge, and a white results panel hanging under it. Every value here
   comes from the tokens in theme.css — no colours are declared literally.
   ========================================================================== */

.aa-hsearch {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 320px;
}

/* ------------------------------------------------------------------ field */

.aa-hsearch__form {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--aa-line);
	border-radius: 999px;
	background: var(--aa-white);
	overflow: hidden;
	transition: border-color .18s var(--aa-ease);
}

.aa-hsearch__form:focus-within {
	border-color: var(--aa-rose);
}

.aa-hsearch__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 .25rem 0 .95rem;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--aa-fs-sm);
	color: var(--aa-ink);
	text-overflow: ellipsis;
}

.aa-hsearch__input::placeholder { color: var(--aa-muted); }

/* The rounded wrapper already carries the focus ring. */
.aa-hsearch__input:focus,
.aa-hsearch__input:focus-visible { outline: none; }

/* Safari draws its own clear affordance inside a type=search box. */
.aa-hsearch__input::-webkit-search-decoration,
.aa-hsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.aa-hsearch__btn {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 42px;
	border: 0;
	background: transparent;
	color: var(--aa-black);
	cursor: pointer;
	transition: background-color .18s var(--aa-ease);
}

.aa-hsearch__btn:hover { background: var(--aa-cream); }
.aa-hsearch__btn svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ panel */

.aa-hsearch__panel {
	position: absolute;
	z-index: 20;
	inset-inline: 0;
	top: calc(100% + .5rem);
	max-height: min(70vh, 26rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: .25rem;
	border: 1px solid var(--aa-line);
	border-radius: var(--aa-radius-lg);
	background: var(--aa-white);
	box-shadow: var(--aa-shadow);
}

.aa-hsearch__panel[hidden] { display: none; }

/* The panel is wider than the compact field so product names can breathe. */
@media (min-width: 900px) {
	.aa-hsearch__panel {
		inset-inline: 0 auto;
		width: max(100%, 22rem);
	}
}

/* -------------------------------------------------------------- result row */

.aa-hsearch__item {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .5rem;
	border-radius: var(--aa-radius);
	color: var(--aa-ink);
	text-decoration: none;
}

.aa-hsearch__item:hover,
.aa-hsearch__item[aria-selected="true"] {
	background: var(--aa-cream);
}

.aa-hsearch__thumb {
	flex: none;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--aa-radius);
	background: var(--aa-cream);
}

/* Products with no image still need the row to line up. */
.aa-hsearch__thumb--empty { display: block; }

.aa-hsearch__text {
	min-width: 0;
	display: grid;
	gap: .1rem;
}

.aa-hsearch__name {
	font-size: var(--aa-fs-sm);
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aa-hsearch__price {
	font-size: var(--aa-fs-xs);
	color: var(--aa-muted);
}

.aa-hsearch__flag {
	margin-inline-start: .4rem;
	font-size: var(--aa-fs-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aa-muted);
}

/* ------------------------------------------------- messages and see-all row */

.aa-hsearch__msg {
	margin: 0;
	padding: .85rem .6rem;
	font-size: var(--aa-fs-sm);
	color: var(--aa-muted);
}

.aa-hsearch__all {
	display: block;
	margin-top: .25rem;
	padding: .7rem .6rem;
	border-top: 1px solid var(--aa-line);
	font-size: var(--aa-fs-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aa-black);
	text-decoration: none;
}

.aa-hsearch__all:hover,
.aa-hsearch__all[aria-selected="true"] { background: var(--aa-cream); }

/* Only the first child needs the rule suppressed — when the panel holds no
   products, the see-all row sits directly under the message. */
.aa-hsearch__panel > .aa-hsearch__all:first-child { border-top: 0; }

/* ----------------------------------------------------------------- mobile */

/* Under 900px the left cell keeps the hamburger, so the field drops onto its
   own row across the full width of the wrap. Unwrapping the left cell with
   display:contents lets both live in the same grid without a second wrapper. */
@media (max-width: 899px) {
	.aa-header__left { display: contents; }

	.aa-header__left > .aa-iconbtn {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.aa-header__brand { grid-column: 2; grid-row: 1; }
	.aa-header__right { grid-column: 3; grid-row: 1; }

	.aa-hsearch {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: none;
		/* The bar's own grid gap supplies the space above. */
		margin-bottom: .5rem;
	}

	/*
	 * Collapsed by default and revealed by the header's search button. The
	 * class is set by JavaScript, so `.no-js` — and any load where the script
	 * fails — keeps the field on show rather than hiding it behind a control
	 * that cannot work.
	 */
	.aa-has-js .aa-hsearch { display: none; }
	.aa-has-js .aa-header.is-search-open .aa-hsearch { display: block; }

	.aa-header.is-search-open [data-aa-search-toggle] { color: var(--aa-gold); }
}