/**
 * megasearch.css — the header search, promoted to a centred overlay.
 *
 * THIS FILE ADDS A STATE; IT DOES NOT REPLACE A COMPONENT. search.css still
 * owns the field, the listbox rows, the phone dialog and the whole combobox.
 * Everything here hangs off one class — `.is-mega` on the search root — and
 * every rule below is scoped to it, so with this stylesheet removed the search
 * is exactly what it was before.
 *
 * THE MORPH IS THE COMPONENT MOVING, NOT A COPY OF IT.
 *
 * The obvious implementation is a FLIP: measure the field, clone it into a
 * fixed layer, animate the clone, swap. It is also the wrong one here, because
 * the field is a `role="combobox"` wired by id to a listbox, a status region
 * and a label. Cloning it duplicates every one of those ids, and swapping it
 * moves focus — mid-animation, on the control the visitor just pressed.
 *
 * So the real root is promoted to `position: fixed` AT ITS OWN CURRENT RECT
 * (megasearch.js measures and writes --ms-x/y/w/h), and then on the next frame
 * those four variables are changed to the centred target. The element that
 * travels is the element that was always there: same node, same ids, same
 * focus, no swap.
 *
 * WHY A PLACEHOLDER IS LEFT BEHIND. Promoting the root to `fixed` takes it out
 * of flow, and the header is a flex row — without a spacer of the same width
 * the logo and the action icons would snap together the instant the overlay
 * opens and snap back when it closes. The placeholder holds the gap.
 *
 * @package Bedi\Theme
 */

/* =========================================================================
 * 1. THE SCRIM
 * ====================================================================== */

.bedi-msearch-scrim {
	background-color: rgba(7, 0, 36, 0.28);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity var(--bedi-dur) var(--bedi-ease-in);
	/* 190. Above the header (100) — the header blurs with the rest of the page,
	   which is what the client asked for: "blurout everything". */
	z-index: var(--bedi-z-overlay);
}

/*
 * The blur is opt-in on support, and the fallback is a HEAVIER wash rather
 * than the same one. Without a blur the scrim is the only thing separating the
 * panel from the page, so it has to work harder.
 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.bedi-msearch-scrim {
		background-color: rgba(7, 0, 36, 0.18);
		-webkit-backdrop-filter: blur(10px) saturate(112%);
		backdrop-filter: blur(10px) saturate(112%);
	}
}

.bedi-msearch-scrim.is-in {
	opacity: 1;
	pointer-events: auto;
}

/*
 * A phone gets an opaque surface and NO blur. A full-viewport backdrop-filter
 * is the single most expensive thing a mid-range Android renderer can be asked
 * for, and it is asked for here at exactly the moment the on-screen keyboard is
 * animating in.
 */
@media (max-width: 47.9375em) {
	.bedi-msearch-scrim,
	.bedi-msearch-scrim.is-in {
		background-color: var(--bedi-surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* The spacer that holds the header's gap while the root is out of flow. */
.bedi-msearch-hold {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* =========================================================================
 * 2. THE PROMOTED ROOT
 * ====================================================================== */

.bedi-search.is-mega {
	block-size: var(--ms-h, 52px);
	inline-size: var(--ms-w, 100%);
	inset-block-start: var(--ms-y, 0);
	inset-inline-start: var(--ms-x, 0);
	position: fixed;
	/* 192: above the panel, so the field's own border and shadow read as one
	   unbroken edge and the panel tucks under it. */
	z-index: calc(var(--bedi-z-overlay) + 2);
	transition:
		block-size var(--bedi-dur) var(--bedi-ease-in),
		inline-size var(--bedi-dur) var(--bedi-ease-in),
		inset-block-start var(--bedi-dur) var(--bedi-ease-in),
		inset-inline-start var(--bedi-dur) var(--bedi-ease-in);
}

/*
 * The field grows with the root. 64px against the resting 52px is enough to
 * read as "this is now the thing you are doing" without becoming a banner.
 */
.bedi-search.is-mega .bedi-search__field {
	block-size: var(--ms-h, 64px);
	box-shadow: 0 18px 44px -24px rgba(37, 37, 49, 0.4);
	transition:
		block-size var(--bedi-dur) var(--bedi-ease-in),
		box-shadow var(--bedi-dur) var(--bedi-ease-in);
}

.bedi-search.is-mega .bedi-search__input {
	font-size: var(--bedi-text-xl);
}

/* =========================================================================
 * 3. THE PANEL
 * ====================================================================== */

/*
 * THE PANEL SHELL IS NOT USED IN THIS STATE.
 *
 * megasearch.js lifts the form out of it to be the floating field and moves the
 * resting content in beside the listbox, so by the time this class is on there
 * is nothing left in the panel but the head and the status region — and the
 * head is already `display: none` outside the phone dialog. Leaving the shell
 * visible produced exactly what it should have: an empty 40px white strip
 * sitting behind the real content.
 *
 * The status region is a `.screen-reader-text` and is unaffected by this.
 */
.bedi-search.is-mega .bedi-search__panel {
	display: contents;
}

.bedi-search.is-mega .bedi-search__panel-inner {
	display: contents;
}

/*
 * THE DROPDOWN IS WHICHEVER OF THE TWO IS SHOWING. They are never both visible
 * — the resting content hides the moment a query is long enough to fetch — so
 * one shared surface declaration is correct and there is never a second card.
 */
.bedi-search.is-mega .bedi-search__results.is-open,
.bedi-search.is-mega .bedi-msearch__rest {
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-xl);
	box-shadow: 0 24px 64px -28px rgba(41, 43, 46, 0.28);
	inline-size: 100%;
	inset-block-start: calc(100% + 12px);
	inset-inline-start: 0;
	/* dvh, not vh: on iOS Safari 100vh is the LARGEST viewport height, so the
	   bottom of this panel would sit under the browser chrome. */
	max-block-size: calc(100dvh - var(--ms-y, 104px) - var(--ms-h, 64px) - 64px);
	overflow-y: auto;
	/* The page behind must not scroll when this list hits its end. */
	overscroll-behavior: contain;
	padding: var(--bedi-space-5);
	position: absolute;
	scrollbar-gutter: stable;
	z-index: calc(var(--bedi-z-overlay) + 1);
	animation: bedi-ms-in 220ms var(--bedi-ease-in) 1;
}

/*
 * The box is the positioning context for both, and it is the field's own
 * parent — so `inset-block-start: calc(100% + 12px)` measures from the bottom
 * of the field regardless of how tall the field currently is.
 */
.bedi-search.is-mega .bedi-search__box { position: relative; }

@keyframes bedi-ms-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/*
 * The form is a direct child of the root in this state — megasearch.js moved
 * it there so the field is the thing that travels. See the note there on why
 * it is a DOM move and not two copies.
 */
.bedi-search.is-mega > .bedi-search__form {
	display: block;
	inline-size: 100%;
}

/* =========================================================================
 * 4. THE RESTING CONTENT
 * ====================================================================== */

.bedi-msearch__rest { display: none; }

/*
 * AND THE PHONE DIALOG SHOWS IT TOO, WHICH IT DID NOT.
 *
 * `.is-mega` is the DESKTOP state — megasearch.js sets it when the field
 * becomes the wide dropdown. On a phone the search opens as a full-screen
 * dialog instead (`.bedi-search__panel.is-dialog`) and the root never gets
 * `.is-mega`, so this block stayed at the `display: none` above it: recent
 * searches, popular terms, categories and the frequently-bought row were all
 * in the DOM, all unhidden, and all zero pixels tall. The phone got an empty
 * white screen with a text field on it.
 *
 * Verified before the fix: four .bedi-msearch__block elements present, three
 * of them display:block and not [hidden], every one measuring 0x0 because
 * their shared parent was none.
 */
.bedi-search__panel.is-dialog .bedi-msearch__rest,
.bedi-search.is-mega .bedi-msearch__rest {
	display: grid;
	gap: var(--bedi-space-5);
	/* The grid rows are the blocks; `align-content: start` stops them
	   stretching to fill a card that is taller than they are. */
	align-content: start;
}

.bedi-search__panel.is-dialog .bedi-msearch__rest[hidden],
.bedi-search.is-mega .bedi-msearch__rest[hidden] { display: none; }

.bedi-msearch__block-head {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
	margin-block-end: var(--bedi-space-3);
}

.bedi-msearch__block-title {
	color: var(--bedi-ink-muted);
	font-family: var(--bedi-font-body);
	font-size: 11px;
	font-weight: var(--bedi-weight-bold);
	/* Georgian is unicameral so uppercase would be a no-op; the tracking alone
	   does the label work. */
	letter-spacing: 0.08em;
	margin: 0;
}

.bedi-msearch__clear-recents {
	appearance: none;
	background: none;
	border: 0;
	color: var(--bedi-accent);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--bedi-text-sm);
	padding: 0;
}

.bedi-msearch__clear-recents:hover { text-decoration: underline; }

/* --- pills --- */

.bedi-msearch__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * A pill is a link with a border and nothing else — no gradient, no shadow, no
 * icon. Six of them in a row is already a lot of shapes; anything added to
 * each one multiplies by six.
 */
.bedi-msearch__pill {
	align-items: center;
	background-color: var(--bedi-surface);
	block-size: 34px;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-ink);
	display: inline-flex;
	font-size: var(--bedi-text-sm);
	padding-inline: 14px;
	text-decoration: none;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-msearch__pill:hover,
.bedi-msearch__pill:focus-visible {
	background-color: var(--bedi-bg-2);
	border-color: var(--bedi-bg-2);
	color: var(--bedi-navy);
}

.bedi-msearch__pill:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: 2px;
}

/* A recent gets a small clock mark so the two pill rows are distinguishable
   without reading the headings above them. */
.bedi-msearch__pill--recent::before {
	background-color: var(--bedi-rule-strong);
	block-size: 5px;
	border-radius: var(--bedi-radius-round);
	content: "";
	inline-size: 5px;
	margin-inline-end: 8px;
}

/* --- category tiles --- */

.bedi-msearch__cats {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-msearch__cat {
	align-items: center;
	background-color: var(--bedi-surface-2);
	block-size: 52px;
	border-radius: var(--bedi-radius-lg);
	color: var(--bedi-ink);
	column-gap: 10px;
	display: flex;
	font-size: var(--bedi-text-sm);
	padding-inline: 10px;
	text-decoration: none;
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-msearch__cat:hover { background-color: var(--bedi-bg-2); }

.bedi-msearch__cat:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: 2px;
}

.bedi-msearch__cat-icon {
	background-color: var(--bedi-surface);
	block-size: 34px;
	border-radius: var(--bedi-radius-lg);
	color: var(--bedi-navy);
	display: grid;
	flex: 0 0 auto;
	inline-size: 34px;
	place-items: center;
}

.bedi-msearch__cat-icon img {
	block-size: 22px;
	inline-size: 22px;
	object-fit: contain;
}

.bedi-msearch__cat-name {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- product cards --- */

.bedi-msearch__products {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-msearch__product {
	align-items: center;
	border-radius: var(--bedi-radius-lg);
	color: inherit;
	column-gap: 12px;
	display: flex;
	padding: 8px;
	text-decoration: none;
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-msearch__product:hover { background-color: var(--bedi-surface-2); }

.bedi-msearch__product:focus-visible {
	outline: 3px solid var(--bedi-accent);
	outline-offset: -2px;
}

.bedi-msearch__product-media {
	background-color: var(--bedi-surface);
	block-size: 52px;
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-lg);
	display: grid;
	flex: 0 0 auto;
	inline-size: 52px;
	overflow: hidden;
	place-items: center;
}

/* contain, never cover: a cropped hardware photo at 52px is unrecognisable. */
.bedi-msearch__product-media img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: contain;
}

.bedi-msearch__product-text { min-inline-size: 0; }

.bedi-msearch__product-name {
	color: var(--bedi-ink);
	display: -webkit-box;
	font-size: var(--bedi-text-sm);
	line-height: 1.35;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.bedi-msearch__product-price {
	color: var(--bedi-ink);
	display: block;
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-medium);
	margin-block-start: 3px;
}

.bedi-msearch__product-price del { display: none; }

/* =========================================================================
 * 5. RESULTS, AS CARDS
 *
 * The rows are search.css's own `.bedi-search__option` elements — same
 * `role="option"`, same ids, same arrow-key contract. Only the box changes.
 * ====================================================================== */

.bedi-search.is-mega .bedi-search__results.is-open {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	max-block-size: none;
	overflow: visible;
}

.bedi-search.is-mega .bedi-search__option {
	border-radius: var(--bedi-radius-lg);
}

/*
 * "ყველა შედეგის ნახვა" SPANS THE WHOLE GRID.
 *
 * It is appended to the same listbox as the result rows, so in the mega
 * layout's auto-fill grid it was landing in one cell — a full-width action
 * rendered as a half-width tile under the left column, which read as a
 * seventh result rather than as the way out of the list.
 *
 * `1 / -1` rather than a column count: the grid is auto-fill, so the number of
 * columns changes with the panel's width and any fixed span would be wrong at
 * some size.
 */
.bedi-search.is-mega .bedi-search__all {
	grid-column: 1 / -1;
	justify-content: center;
	text-align: center;
}

/* =========================================================================
 * 6. THE FOOTER HINT
 * ====================================================================== */

.bedi-msearch__foot {
	align-items: center;
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
	color: var(--bedi-ink-muted);
	display: none;
	font-size: var(--bedi-text-sm);
	justify-content: space-between;
	margin-block-start: var(--bedi-space-4);
	padding-block-start: var(--bedi-space-3);
}

.bedi-search.is-mega .bedi-msearch__foot { display: flex; }

.bedi-msearch__kbd {
	background-color: var(--bedi-surface-2);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-sm);
	font-family: var(--bedi-font-mono);
	font-size: 11px;
	padding: 2px 6px;
}

/* =========================================================================
 * 7. PHONE
 *
 * One concept, not a second component: the same promoted root, taken edge to
 * edge. search.css's own phone dialog is left alone — megasearch.js does not
 * promote below 48em, because that dialog is already the right answer there.
 * ====================================================================== */

@media (max-width: 47.9375em) {
	.bedi-search.is-mega {
		/* The phone path keeps search.css's dialog; nothing is promoted. */
		position: relative;
		inset: auto;
		inline-size: 100%;
		block-size: auto;
		z-index: auto;
	}

	.bedi-search.is-mega .bedi-search__panel {
		position: static;
		inline-size: auto;
	}

	/*
	 * Nothing is promoted below 48em — search.css's own dialog is already the
	 * right answer there — so this block only has to neutralise the state in
	 * case a resize left it applied.
	 */
	.bedi-search.is-mega .bedi-search__panel,
	.bedi-search.is-mega .bedi-search__panel-inner {
		display: block;
	}

	.bedi-search.is-mega .bedi-search__results.is-open,
	.bedi-search.is-mega .bedi-msearch__rest {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		max-block-size: none;
		padding: var(--bedi-space-4);
		position: static;
	}

	.bedi-msearch__products { grid-template-columns: minmax(0, 1fr); }
	.bedi-search.is-mega .bedi-search__results.is-open { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
 * 8. REDUCED MOTION
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bedi-msearch-scrim,
	.bedi-search.is-mega,
	.bedi-search.is-mega .bedi-search__field,
	.bedi-msearch__pill,
	.bedi-msearch__cat,
	.bedi-msearch__product {
		transition-duration: 1ms !important;
	}

	.bedi-search.is-mega .bedi-search__panel-inner {
		animation: none !important;
	}
}

/* =========================================================================
 * 9. FORCED COLOURS
 * ====================================================================== */

@media (forced-colors: active) {
	.bedi-search.is-mega .bedi-search__panel-inner,
	.bedi-msearch__pill,
	.bedi-msearch__cat,
	.bedi-msearch__cat-icon,
	.bedi-msearch__product-media,
	.bedi-msearch__kbd {
		border: 1px solid ButtonText;
	}

	.bedi-msearch-scrim { background-color: Canvas; }
}