/**
 * Search overlay — phase-11-search.md.
 *
 * The theme ships no `* { box-sizing: border-box }` reset, so every element
 * here that states a width or a height declares its own. That trap has produced
 * five defects on this build already (Phase 5 once, Phase 6 twice, Phase 8's
 * quantity stepper, Phase 10's header) and an overlay full of stated sizes is
 * the obvious sixth.
 *
 * No new colours: every value below is a theme.json token.
 */

.hermizon-search {
	display: inline-flex;
}

/* --------------------------------------------------------------------------
 * The trigger
 * The 42 x 42 hit target and the 18px icon come from the theme's header rules,
 * which name `.hermizon-search__trigger` alongside the cart and account
 * controls. Only what those rules cannot know lives here.
 * ----------------------------------------------------------------------- */

.hermizon-search__trigger {
	text-decoration: none;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
 * The dialog
 * A native `<dialog>`, so the top layer puts it above the mini-cart drawer's
 * 9999 and the navigation overlay's 100000 with no z-index of its own.
 * ----------------------------------------------------------------------- */

.hermizon-search__dialog {
	box-sizing: border-box;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	/* The reference's 8vh drop. Enough scrim above the card to read as an
	 * overlay rather than a page, without pushing the field below the fold on a
	 * short viewport. */
	padding: 8vh var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	margin: 0;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 0;
	overflow: hidden;
}

/* `display` is stated per state, and that is not tidiness.
 *
 * Making the dialog a centring flex container by putting `display: flex` on
 * `.hermizon-search__dialog` outranks the user agent's
 * `dialog:not([open]) { display: none }` — one class beats one type selector —
 * so the **closed** dialog was laid out at full size over the entire page and
 * swallowed every click on the site. The trigger underneath it could not be
 * clicked; nor could anything else.
 *
 * This is the `[hidden]` specificity trap in another costume, and the sixth of
 * the family on this build. Anything here that overrides a user-agent display
 * rule has to restate the hidden case too.
 */
.hermizon-search__dialog[open] {
	display: flex;
}

.hermizon-search__dialog:not([open]) {
	display: none;
}

.hermizon-search__dialog::backdrop {
	background-color: var(--wp--custom--state--overlay);
	backdrop-filter: blur(8px);
}

/* Scroll lock.
 *
 * `showModal()` makes the rest of the document inert but does **not** stop it
 * scrolling — measured here, a real wheel over the scrim moved the page from
 * scrollY 0 to 600 with the dialog open. (A scripted `window.scrollBy()` is not
 * blocked by any engine, so testing with one proves nothing either way; this
 * was measured with `mouse.wheel`.)
 *
 * `scrollbar-gutter: stable` is the other half of the fix and not an
 * afterthought: `overflow: hidden` removes the scrollbar, and on a platform
 * with classic scrollbars that shifts the whole page ~15px sideways at the
 * moment the overlay opens — visible through the blur, and it would move the
 * sticky header. Reserving the gutter for exactly as long as the lock lasts
 * costs nothing when the overlay is closed. */
html:has(.hermizon-search__dialog:modal) {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* The entrance, ~260ms. `allow-discrete` plus `@starting-style` is what lets a
 * `<dialog>` animate at all: it toggles `display`, and a discrete property
 * cannot be interpolated without being told to. A browser without
 * `@starting-style` simply opens instantly, which is the old behaviour. */
.hermizon-search__dialog,
.hermizon-search__dialog::backdrop {
	opacity: 0;
	transition:
		opacity 260ms ease,
		translate 280ms cubic-bezier(0.2, 0.9, 0.3, 1),
		scale 280ms cubic-bezier(0.2, 0.9, 0.3, 1),
		display 280ms allow-discrete,
		overlay 280ms allow-discrete;
}

.hermizon-search__dialog {
	translate: 0 -24px;
	scale: 0.97;
}

.hermizon-search__dialog[open],
.hermizon-search__dialog[open]::backdrop {
	opacity: 1;
}

.hermizon-search__dialog[open] {
	translate: 0 0;
	scale: 1;
}

@starting-style {
	.hermizon-search__dialog[open],
	.hermizon-search__dialog[open]::backdrop {
		opacity: 0;
	}

	.hermizon-search__dialog[open] {
		translate: 0 -24px;
		scale: 0.97;
	}
}

/* A centred card, not a full-bleed sheet.
 *
 * Two earlier shapes were wrong before this one. The first gave the panel
 * `height: 100%`, which painted an opaque white page over the scrim — the blur
 * could never be seen, and `onBackdropClick` could never fire because
 * `event.target` was always the panel. The second was a full-width top sheet,
 * which fixed both but left most of a 1600px viewport empty and still went
 * full-screen below 600px, where it again left no backdrop to click.
 *
 * A card centred in the dialog solves all of it at every width: the scrim reads
 * as a scrim, and there is always somewhere to click away.
 */
.hermizon-search__panel {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	/* 600 rather than the reference's 560: these product names run long — "Aditri
	 * — Minimal Zardozi Jutti" — beside a two-decimal price. */
	max-width: 600px;
	max-height: 84vh;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--float);
	overflow: hidden;
}

/* --------------------------------------------------------------------------
 * The input row
 * ----------------------------------------------------------------------- */

.hermizon-search__bar {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	padding: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--border--width) solid var(--wp--preset--color--line-light);
}

.hermizon-search__field {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	background: transparent;
	border: 0;
}

.hermizon-search__field-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted);
}

.hermizon-search__input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 0;
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: var(--wp--preset--font-size--large);
}

.hermizon-search__input:focus {
	outline: none;
}

.hermizon-search__input::placeholder {
	color: var(--wp--preset--color--muted-soft);
}

/* Safari draws its own clear affordance on `type="search"`, which would sit
 * beside ours and do half the job. */
.hermizon-search__input::-webkit-search-cancel-button,
.hermizon-search__input::-webkit-search-decoration {
	appearance: none;
}

/* Clear and close are both an X, and they sat next to each other with the ESC
 * hint between them — three controls in a row, two of them the same glyph
 * meaning different things. Seen in a screenshot, not in an assertion.
 *
 * They are told apart the way the reference does it: clear is a small filled
 * disc that belongs to the field, close is a plain mark that belongs to the
 * dialog. */
.hermizon-search__clear,
.hermizon-search__close {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	cursor: pointer;
	transition:
		color var(--wp--custom--transition--fast),
		background-color var(--wp--custom--transition--fast);
}

.hermizon-search__clear {
	/* 24px is the WCAG 2.2 floor and this control is optional — the field can
	 * also be cleared by selecting and deleting — so the floor is the size. */
	width: 24px;
	height: 24px;
	color: var(--wp--preset--color--muted);
	background-color: var(--wp--preset--color--line-light);
	border-radius: var(--wp--custom--radius--pill);
}

.hermizon-search__clear svg {
	width: 12px;
	height: 12px;
}

.hermizon-search__close {
	/* Larger than the floor: it is the pointer user's way out. */
	width: 36px;
	height: 36px;
	color: var(--wp--preset--color--muted);
	background: transparent;
	border-radius: var(--wp--custom--radius--sm);
}

.hermizon-search__clear:hover {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--muted);
}

.hermizon-search__close:hover {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--line-light);
}

/* The keyboard hint, from the reference design. A label rather than a control:
 * it is not focusable and not clickable, because it names a key. */
.hermizon-search__esc {
	flex: 0 0 auto;
	padding: 2px 6px;
	color: var(--wp--preset--color--muted-soft);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--public-sans);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	letter-spacing: 0.04em;
	user-select: none;
}

/* The user agent's `[hidden] { display: none }` is one specificity point; the
 * rules above are two. Without this the clear button never hides.
 *
 * The close button is not listed: nothing binds `hidden` on it, so that half of
 * the rule never matched anything. */
.hermizon-search__clear[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
 * The body
 * ----------------------------------------------------------------------- */

.hermizon-search__body {
	box-sizing: border-box;
	flex: 1 1 auto;
	/* A flex item will not shrink below its content without this, so the sheet
	 * would grow past its own max-height instead of scrolling inside it. */
	min-height: 0;
	width: 100%;
	padding: 0 0 var(--wp--preset--spacing--40);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hermizon-search__section {
	padding-block-start: var(--wp--preset--spacing--30);
}

.hermizon-search__section[hidden] {
	display: none;
}

.hermizon-search__section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-inline-end: var(--wp--preset--spacing--40);
}

.hermizon-search__section-title {
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--public-sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The results heading binds `hidden` too, so it needs the same guard as every
 * other conditional element here. */
.hermizon-search__section-title[hidden] {
	display: none;
}

.hermizon-search__plain {
	padding: 0;
	color: var(--wp--preset--color--muted);
	background: none;
	border: 0;
	font-family: var(--wp--preset--font-family--public-sans);
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: underline;
	cursor: pointer;
}

.hermizon-search__plain:hover {
	color: var(--wp--preset--color--contrast);
}

.hermizon-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	list-style: none;
}

.hermizon-search__chip {
	box-sizing: border-box;
	/* The 24px WCAG 2.2 touch-target floor, met by padding rather than by a
	 * bigger label. */
	min-height: 32px;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--public-sans);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--transition--fast),
		border-color var(--wp--custom--transition--fast);
}

.hermizon-search__chip:hover {
	background-color: var(--wp--preset--color--line-light);
	border-color: var(--wp--preset--color--muted-soft);
}

/* --------------------------------------------------------------------------
 * Results
 * ----------------------------------------------------------------------- */

.hermizon-search__results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hermizon-search__results[hidden] {
	display: none;
}

.hermizon-search__result {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	cursor: pointer;
}

.hermizon-search__result.is-active {
	background-color: var(--wp--preset--color--surface);
}

.hermizon-search__thumb {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: cover;
	background-color: var(--wp--preset--color--line-light);
	border-radius: var(--wp--custom--radius--sm);
}

.hermizon-search__detail {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.hermizon-search__name {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

/* The matched substring. `mark`'s user-agent yellow would be the only colour on
 * the site that is not a token. */
.hermizon-search__name mark {
	color: var(--wp--preset--color--contrast);
	background: transparent;
	font-weight: 600;
}

.hermizon-search__category {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--public-sans);
	font-size: var(--wp--preset--font-size--x-small);
}

.hermizon-search__category[hidden] {
	display: none;
}

.hermizon-search__price {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	flex: 0 0 auto;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.hermizon-search__price del {
	color: var(--wp--preset--color--muted-soft);
}

.hermizon-search__price del[hidden] {
	display: none;
}

.hermizon-search__more {
	margin-block-start: var(--wp--preset--spacing--20);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: var(--wp--custom--border--width) solid var(--wp--preset--color--line-light);
	text-align: center;
}

.hermizon-search__more[hidden] {
	display: none;
}

.hermizon-search__more-link {
	display: inline-block;
	padding: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------------------
 * Empty and error
 * ----------------------------------------------------------------------- */

.hermizon-search__notice {
	padding-block: var(--wp--preset--spacing--60);
	text-align: center;
}

.hermizon-search__notice[hidden] {
	display: none;
}

.hermizon-search__notice-title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: var(--wp--preset--font-size--x-large);
}

.hermizon-search__notice-body {
	margin: 0 auto;
	/* Prose at the panel's full width runs past 100 characters a line. Phase 9
	 * shipped every policy page that way and only a screenshot caught it. */
	max-width: 46ch;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--public-sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.hermizon-search__retry {
	box-sizing: border-box;
	min-height: 40px;
	margin-block-start: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--brand);
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	font-family: var(--wp--preset--font-family--inter-tight);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--fast);
}

.hermizon-search__retry:hover {
	background-color: var(--wp--preset--color--contrast-strong);
}

/* --------------------------------------------------------------------------
 * Loading
 * ----------------------------------------------------------------------- */

.hermizon-search__skeleton[hidden] {
	display: none;
}

.hermizon-search__skeleton-row {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.hermizon-search__skeleton-thumb,
.hermizon-search__skeleton-line {
	display: block;
	background-color: var(--wp--preset--color--line-light);
	background-image: linear-gradient(
		90deg,
		var(--wp--preset--color--line-light) 0%,
		var(--wp--preset--color--base) 50%,
		var(--wp--preset--color--line-light) 100%
	);
	background-size: 200% 100%;
	border-radius: var(--wp--custom--radius--sm);
	animation: hermizon-search-shimmer 1200ms linear infinite;
}

.hermizon-search__skeleton-thumb {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
}

.hermizon-search__skeleton-lines {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	flex: 1 1 auto;
}

.hermizon-search__skeleton-line {
	height: 12px;
}

.hermizon-search__skeleton-line.is-short {
	width: 35%;
}

@keyframes hermizon-search-shimmer {
	from {
		background-position: 200% 0;
	}

	to {
		background-position: -200% 0;
	}
}

/* --------------------------------------------------------------------------
 * Visually hidden, but present for a screen reader
 * The theme defines no `.screen-reader-text`, so the overlay carries its own.
 * ----------------------------------------------------------------------- */

.hermizon-search__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Small screens
 * ----------------------------------------------------------------------- */

@media (max-width: 600px) {
	/* Still a card, not a full-screen sheet.
	 *
	 * The full-screen version was tried and dropped: it removed the one thing
	 * the scrim is for, since there was nowhere left to click away, leaving the
	 * ✕ and Escape as the only exits on the device least likely to have a
	 * keyboard. A smaller drop from the top keeps room for results with the
	 * on-screen keyboard up.
	 */
	.hermizon-search__dialog {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	}

	.hermizon-search__panel {
		max-height: 88vh;
	}

	.hermizon-search__bar {
		gap: var(--wp--preset--spacing--20);
		padding: var(--wp--preset--spacing--30);
	}

	.hermizon-search__input {
		/* Under 16px, iOS zooms the page on focus. */
		font-size: var(--wp--preset--font-size--medium);
	}

	/* The ESC hint is a pointer-and-keyboard affordance; on a phone it is a
	 * label for a key that is not there. */
	.hermizon-search__esc {
		display: none;
	}

	.hermizon-search__thumb {
		width: 48px;
		height: 48px;
	}

	/* The name wraps inside its own column; the row does not.
	 *
	 * This was `flex-wrap: wrap` at first, on the theory that the price would
	 * drop under the name when the name got long. A flex line break does not
	 * work that way — the price wrapped to the *container's* left edge, under
	 * the thumbnail, so at 390px two rows kept their price inline and the third,
	 * with a longer name, put it on a second line in a different column. Caught
	 * in a screenshot, not by an assertion. `min-width: 0` on the detail column
	 * is what lets the name wrap instead of forcing the row wider. */
	.hermizon-search__price {
		font-size: var(--wp--preset--font-size--x-small);
	}
}

/* --------------------------------------------------------------------------
 * Motion
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hermizon-search__dialog,
	.hermizon-search__dialog::backdrop {
		transition: none;
	}

	.hermizon-search__dialog,
	.hermizon-search__dialog[open] {
		translate: none;
	}

	.hermizon-search__skeleton-thumb,
	.hermizon-search__skeleton-line {
		animation: none;
	}
}