/* ==========================================================================
   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.
   ========================================================================== */

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

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

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

.ak-hsearch__form:focus-within {
	border-color: var(--ak-black);
}

.ak-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(--ak-fs-sm);
	color: var(--ak-ink);
	text-overflow: ellipsis;
}

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

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

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

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

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

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

.ak-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(--ak-line);
	border-radius: var(--ak-radius-lg);
	background: var(--ak-white);
	box-shadow: var(--ak-shadow);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Only the first child needs the rule suppressed — when the panel holds no
   products, the see-all row sits directly under the message. */
.ak-hsearch__panel > .ak-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) {
	.ak-header__left { display: contents; }

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

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

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