/**
 * MantiLoad search box — input shell aesthetic (minimal soft-shadow pill).
 *
 * Loaded AFTER mantiload.css so these rules win on the input shell. ONLY the input
 * shell changes here (the .mantiload-search__field / __input / __icon / __spinner /
 * __clear / __submit); the dropdown + results panel keep their existing styles in
 * mantiload.css.
 *
 * NOTE on class names: this codebase's markup uses the BEM classes
 * .mantiload-search__input / __icon / __spinner (not .ml-input / .ml-icon …). The
 * `--ml-*` custom properties below are the overridable theming hooks, scoped to the
 * .mantiload-search component so they don't leak globally.
 *
 * Layout: the <input> itself is the pill. The magnifier / spinner / clear sit at the
 * TRAILING edge, absolutely positioned over the input's reserved trailing padding
 * (all via logical properties, so in RTL they flip to the left automatically and the
 * text right-aligns). When a "Search" submit button is rendered it becomes the trailing
 * affordance (the redundant magnifier is hidden and extra trailing room is reserved).
 */

.mantiload-search {
	/* Overridable theming hooks. Defaults = the slim "medium" pill (good inside page
	   content); data-size="large" restores the 60px hero look. */
	--ml-height: 48px;
	--ml-radius: 9999px;              /* full pill */
	--ml-bg: #ffffff;
	--ml-border-color: transparent;  /* no visible border by default (shadow="no" sets one) */
	--ml-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
	--ml-shadow-focus: 0 6px 22px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
	--ml-padding-inline: 20px;
	--ml-font-size: 15px;
	--ml-text: #1a1a1a;
	--ml-placeholder: #9ca3af;
	--ml-icon-color: #1a1a1a;
	--ml-icon-size: 18px;
	--ml-icon-stroke: 1.5;                        /* thin magnifier / X stroke */
	--ml-ring: rgba(37, 99, 235, 0.40);          /* faint accent ring (keyboard focus) */
	--ml-icon-gap: 12px;                          /* gap between text and trailing icon */
	--ml-submit-space: 92px;                      /* trailing room reserved for the Search button */

	/* Dropdown (floating results card) */
	--ml-dropdown-radius: 20px;                   /* card, not a full pill */
	--ml-dropdown-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
	--ml-dropdown-gap: 8px;                        /* float gap below the pill */
	--ml-row-radius: 12px;                         /* rounded hover/active highlight */
	--ml-row-inset: 8px;                           /* highlight floats inside the card */
	--ml-row-padding-inline: 20px;                 /* row content inset from the card edge */
	--ml-row-padding-block: 12px;                  /* row vertical padding (touch-friendly) */
	--ml-bg-hover: rgba(0, 0, 0, 0.05);            /* subtle row highlight */
	--ml-muted: #6b7280;                           /* section labels / footer / counts */
	--ml-hairline: rgba(0, 0, 0, 0.06);            /* very subtle divider */
	--ml-thumb-size: 48px;                         /* result thumbnail square */

	/* Icon-mode modal */
	--ml-modal-pad: 16px;                          /* generous header/panel padding */
	--ml-close-space: 56px;                        /* trailing room for the close (X) beside the pill */
	--ml-overlay: rgba(0, 0, 0, 0.45);             /* modal backdrop scrim */
}

/* Size variants (data-size). "medium" is the base defaults above, so it is intentionally
   not redefined here — that keeps theme overrides of the base vars working for the default
   size. small/large override per instance. */
.mantiload-search[data-size="small"] {
	--ml-height: 40px;
	--ml-font-size: 14px;
	--ml-padding-inline: 16px;
	--ml-icon-size: 16px;
}

.mantiload-search[data-size="large"] {
	--ml-height: 60px;
	--ml-font-size: 17px;
	--ml-padding-inline: 32px;
	--ml-icon-size: 20px;
}

/* shadow="no" → flat: drop the shadow and show a visible hairline border so the box
   doesn't vanish on a flat background. */
.mantiload-search.ml-flat {
	--ml-shadow: none;
	--ml-border-color: rgba(0, 0, 0, 0.15);
}

/* The field is just a positioning context now — the input is the visible pill. */
.mantiload-search__field {
	position: relative;
	display: block;
	border: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	gap: 0;
}

/* ---- The pill itself ----
   Scoped to .mantiload-search__field .mantiload-search__input (specificity 0,2,0) so a
   theme's content-area input rules (e.g. .entry-content input, input[type=search]) don't
   bleed in. The field travels with the form when icon mode relocates it into the modal,
   so this still matches there. The defensive resets (appearance/background-image/border/
   margin/font) neutralise common theme input styling. */
.mantiload-search__field .mantiload-search__input {
	box-sizing: border-box;
	display: block;
	inline-size: 100%;
	min-inline-size: 0;
	block-size: var(--ml-height);
	margin: 0;
	border: 1px solid var(--ml-border-color);     /* transparent by default; visible when flat */
	border-radius: var(--ml-radius);
	background-color: var(--ml-bg);
	background-image: none;
	box-shadow: var(--ml-shadow);
	color: var(--ml-text);
	font-family: inherit;
	font-size: var(--ml-font-size);
	line-height: var(--ml-height);                /* vertically centre the single line */
	padding-block: 0;
	padding-inline-start: var(--ml-padding-inline);
	/* Reserve room on the trailing side for the magnifier / spinner / clear. */
	padding-inline-end: calc(var(--ml-padding-inline) + var(--ml-icon-size) + var(--ml-icon-gap));
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	transition: box-shadow 0.18s ease;
}

/* Native search-input decorations (the small circle/X) — suppressed defensively even
   though the input is now type="text". */
.mantiload-search__field .mantiload-search__input::-webkit-search-decoration,
.mantiload-search__field .mantiload-search__input::-webkit-search-cancel-button,
.mantiload-search__field .mantiload-search__input::-webkit-search-results-button,
.mantiload-search__field .mantiload-search__input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.mantiload-search__field .mantiload-search__input::placeholder {
	color: var(--ml-placeholder);
	opacity: 1;
}

/* Focus: shadow deepens, no outline ring for mouse users. */
.mantiload-search__field .mantiload-search__input:focus {
	box-shadow: var(--ml-shadow-focus);
	outline: none;
}

/* Keyboard navigation keeps an accessible indicator: a subtle accent ring ONLY for
   :focus-visible (declared after :focus so it wins for keyboard focus). */
.mantiload-search__field .mantiload-search__input:focus-visible {
	box-shadow: var(--ml-shadow-focus), 0 0 0 3px var(--ml-ring);
	outline: none;
}

/* Defensive: a theme injecting a submit button/input into the search wrapper must not
   show — MantiLoad's inline markup is input + icon + dropdown only (no submit). */
.mantiload-search button[type="submit"],
.mantiload-search input[type="submit"],
.mantiload-search__field button[type="submit"],
.mantiload-search__field input[type="submit"] {
	display: none;
}

/* ---- Trailing icon + spinner (overlaid at the trailing edge) ---- */
.mantiload-search__icon,
.mantiload-search__loader {
	position: absolute;
	inset-inline-end: var(--ml-padding-inline);
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ml-icon-color);
	pointer-events: none;
}

.mantiload-search__icon svg,
.mantiload-search__loader svg {
	inline-size: var(--ml-icon-size);
	block-size: var(--ml-icon-size);
}

/* Thin stroke for the minimal aesthetic (overrides the inline stroke-width attr). */
.mantiload-search__icon svg path {
	stroke-width: var(--ml-icon-stroke);
}

.mantiload-search__spinner {
	color: var(--ml-icon-color);
}

/* When the field has text, the magnifier gives way to the clear (×) button, which
   takes the same trailing slot. */
.mantiload-search__field:has(.mantiload-search__input:not(:placeholder-shown)) .mantiload-search__icon {
	display: none;
}

.mantiload-search__clear {
	position: absolute;
	inset-inline-end: var(--ml-padding-inline);
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--ml-icon-color);
	cursor: pointer;
}

.mantiload-search__clear[hidden] {
	display: none;
}

.mantiload-search__clear svg {
	inline-size: var(--ml-icon-size);
	block-size: var(--ml-icon-size);
}

/* ---- Optional "Search" submit button ---- */
/* When present it becomes the trailing affordance: reserve extra room, hide the
   redundant magnifier, and nudge the spinner/clear inboard so nothing overlaps. */
.mantiload-search__field:has(.mantiload-search__submit) .mantiload-search__input {
	padding-inline-end: calc(var(--ml-padding-inline) + var(--ml-submit-space));
}

.mantiload-search__field:has(.mantiload-search__submit) .mantiload-search__icon {
	display: none;
}

.mantiload-search__field:has(.mantiload-search__submit) .mantiload-search__loader,
.mantiload-search__field:has(.mantiload-search__submit) .mantiload-search__clear {
	inset-inline-end: calc(var(--ml-padding-inline) + var(--ml-submit-space) - var(--ml-icon-size));
}

.mantiload-search__submit {
	position: absolute;
	inset-inline-end: 8px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	block-size: calc(var(--ml-height) - 12px);
	padding-inline: 20px;
	border: 0;
	border-radius: var(--ml-radius);
	background: var(--ml-icon-color);
	color: var(--ml-bg);
	font-size: calc(var(--ml-font-size) - 2px);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

/* =========================================================================
   Results dropdown — a separate floating card below the pill (not attached).
   Maps the design's .ml-dropdown/.ml-result/.ml-category/.ml-active/.ml-divider/
   .ml-footer onto this codebase's .mantiload-search__results / .mantiload-card /
   .mantiload-search__category / .is-active / __divider / __viewall.
   ========================================================================= */

/* .ml-dropdown — the floating card. Floats 8px below the pill; rounded card (not a
   pill); same soft-shadow language; clips to the radius. Vertical scroll is kept
   (overflow-y:auto) for long result sets — overflow-x:hidden still clips the corners. */
.mantiload-search__results {
	inset-block-start: 100%;
	margin-block-start: var(--ml-dropdown-gap);
	border: none;
	border-radius: var(--ml-dropdown-radius);
	box-shadow: var(--ml-dropdown-shadow);
	background: var(--ml-bg);
	padding-block: 8px;
	overflow-x: hidden;
	overflow-y: auto;
}

/* .ml-section-label — small, uppercase, muted; comfortable ~20px inset (the small/
   uppercase/letter-spacing rules come from mantiload.css; only inset + colour here). */
.mantiload-search__section-label {
	padding-inline: var(--ml-row-padding-inline);
	color: var(--ml-muted);
}

/* Soften the section separator to a hairline. */
.mantiload-search__section + .mantiload-search__section {
	border-top: 1px solid var(--ml-hairline);
}

/* .ml-result + .ml-category — generous padding; the row carries the rounded highlight,
   inset from the card edge so it floats inside (margin = inset, padding makes up the
   rest of the 20px content inset). No row borders. */
.mantiload-card,
.mantiload-search__category {
	margin-inline: var(--ml-row-inset);
	padding-block: var(--ml-row-padding-block);
	padding-inline: calc(var(--ml-row-padding-inline) - var(--ml-row-inset));
	border-bottom: 0;
	border-radius: var(--ml-row-radius);
	color: var(--ml-text);
	transition: background 0.15s ease;
}

/* .ml-bg-hover + .ml-active — the same rounded floating highlight for hover, focus and
   keyboard selection (the JS toggles .is-active on ArrowUp/Down). */
.mantiload-card:hover,
.mantiload-card:focus,
.mantiload-card.is-active,
.mantiload-search__category:hover,
.mantiload-search__category:focus,
.mantiload-search__category.is-active {
	background: var(--ml-bg-hover);
}

.mantiload-search__category-count {
	color: var(--ml-muted);
}

/* ---- Two-group result row: thumbnail + title (leading) | price + stock (trailing) ----
   .ml-result → .mantiload-card ; .ml-result-main → __main ; .ml-result-text → __body ;
   .ml-result-meta → __meta. The leading group flexes to fill (title truncates with
   ellipsis); the trailing group never shrinks and sits against the opposite edge.
   Logical props throughout → mirrors in RTL automatically. */
.mantiload-card {
	display: flex;
	align-items: center;
	gap: 0;                                /* spacing handled by __main's gap + __meta's margin */
}

.mantiload-card__main {
	display: flex;
	align-items: center;                   /* thumb centres against the full text block */
	gap: 12px;
	min-width: 0;                          /* allow the title to shrink → ellipsis */
	flex: 1;
}

/* Fixed-size square thumbnail; never grows/shrinks, vertically centred against the
   title+SKU block (whether that block is one line or two). */
.mantiload-card__media {
	inline-size: var(--ml-thumb-size);
	block-size: var(--ml-thumb-size);
	flex-shrink: 0;
	flex-grow: 0;
	align-self: center;
}

.mantiload-card__img {
	inline-size: 100%;
	block-size: 100%;
}

/* The text block stacks vertically and centres as a unit, so a single title line still
   lines up with the thumbnail's centre. */
.mantiload-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	gap: 2px;
}

.mantiload-card__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;                 /* trailing edge in both LTR and RTL */
	text-align: end;
	flex-shrink: 0;                        /* never shrink/wrap; never pushed off the row */
	margin-inline-start: 12px;
	gap: 2px;
}

.mantiload-card__price {
	font-weight: 500;
}

.mantiload-card__stock {
	font-size: 12px;
}

.mantiload-card__sku {
	font-size: 12px;
	line-height: 1.3;
}

@media (max-width: 360px) {
	/* Very narrow rows: shrink price/stock slightly rather than wrapping or stacking. */
	.mantiload-card__meta {
		font-size: 0.85em;
	}
}

/* .ml-divider — very subtle hairline, inset to line up with the row highlights. */
.mantiload-search__divider {
	border: 0;
	border-top: 1px solid var(--ml-hairline);
	margin-block: 4px;
	margin-inline: var(--ml-row-inset);
}

/* .ml-footer — "View all" link: same inset, muted, hairline top separation. */
.mantiload-results__viewall,
.mantiload-search__footer {
	margin-block-start: 4px;
	padding-block: var(--ml-row-padding-block);
	padding-inline: var(--ml-row-padding-inline);
	border-block-start: 1px solid var(--ml-hairline);
	color: var(--ml-muted);
	font-weight: 600;
	text-decoration: none;
}

.mantiload-results__viewall {
	display: block;
	text-align: center;
}

.mantiload-results__viewall:hover,
.mantiload-results__viewall:focus {
	color: var(--ml-text);
}

/* =========================================================================
   Icon mode — the trigger button + its modal (both built in mantiload.js).
   .ml-trigger → .mantiload-search__trigger ; the modal hosts the relocated form,
   so its input is already the pill and its results already get the dropdown rows.
   ========================================================================= */

/* .ml-trigger — minimal by default: a circular, borderless, transparent magnifier
   that inherits the header's colour. Thin stroke (overrides the inline SVG attr). */
.mantiload-search__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: calc(var(--ml-icon-size) + 20px);
	block-size: calc(var(--ml-icon-size) + 20px);
	padding: 0;
	border: none;
	border-radius: var(--ml-radius);              /* full circle */
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background 0.15s ease;
}

.mantiload-search__trigger:hover {
	background: var(--ml-bg-hover);
}

.mantiload-search__trigger svg {
	inline-size: var(--ml-icon-size);
	block-size: var(--ml-icon-size);
}

.mantiload-search__trigger svg path {
	stroke-width: var(--ml-icon-stroke);                            /* thin stroke to match the pill */
}

/* Labeled variant (icon + label): a miniature of the search pill — rounded, white bg,
   soft shadow. Active when the trigger carries a label (modifier class or a label span);
   the markup hook is forward-looking — the default trigger above is icon-only. */
.mantiload-search__trigger--labeled,
.mantiload-search__trigger:has(.mantiload-search__trigger-label) {
	inline-size: auto;
	gap: 8px;
	padding-inline: 18px;
	padding-block: 0;
	block-size: calc(var(--ml-height) - 12px);
	background: var(--ml-bg);
	color: var(--ml-text);
	box-shadow: var(--ml-shadow);
}

.mantiload-search__trigger--labeled:hover,
.mantiload-search__trigger:has(.mantiload-search__trigger-label):hover {
	background: var(--ml-bg);
	box-shadow: var(--ml-shadow-focus);
}

/* Icon-mode trigger size (the icon_size param) — independent of the inline pill's
   data-size. Scales both the glyph and the square hit area (calc icon-size + 20px). */
.mantiload-search[data-icon-size="small"] .mantiload-search__trigger { --ml-icon-size: 16px; }
.mantiload-search[data-icon-size="large"] .mantiload-search__trigger { --ml-icon-size: 22px; }

/* ---- The modal ---- */
.mantiload-modal {
	background: var(--ml-overlay);
}

/* Clean rounded card matching the dropdown. No inner padding: the input sits flush
   at the top and the result rows (which carry their own inline padding) run edge to
   edge, so there is no redundant white frame around the search box. overflow:hidden
   clips the flush input/rows to the card's rounded corners. (Desktop-only — mobile
   icon mode uses the sheet — so no safe-area insets needed here.) */
.mantiload-modal__panel {
	padding: 0;
	overflow: hidden;
	background: var(--ml-bg);
	border-radius: var(--ml-dropdown-radius);
	box-shadow: var(--ml-dropdown-shadow);
}

/* Flush header input: drop the floating-pill shadow, radius and border so the search
   box integrates cleanly into the modal — no rounded white frame around it (matches
   the mobile sheet header). */
.mantiload-modal .mantiload-search__field .mantiload-search__input {
	box-shadow: none;
	border-radius: 0;
	border-color: transparent;
}

/* The pill input sits at the top; reserve trailing room so the close (X) sits BEYOND
   it (the field is the absolute-positioning context for the pill's own trailing icon,
   so shrinking it keeps that icon clear of the close). */
.mantiload-modal .mantiload-search__field {
	inline-size: calc(100% - var(--ml-close-space));
}

/* .ml-close — vertically centred on the pill (same height, top-aligned with the form),
   minimal, muted, thin-stroke. */
.mantiload-modal__close {
	inset-block-start: 0;
	inset-inline-end: 0;
	align-items: center;
	justify-content: center;
	block-size: var(--ml-height);
	inline-size: var(--ml-close-space);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ml-muted);
	border-radius: var(--ml-radius);
}

.mantiload-modal__close:hover {
	color: var(--ml-text);
}

.mantiload-modal__close svg {
	inline-size: var(--ml-icon-size);
	block-size: var(--ml-icon-size);
}

.mantiload-modal__close svg path {
	stroke-width: var(--ml-icon-stroke);
}

/* Modal results: full-width body using the dropdown row styling (mantiload.css already
   makes the relocated panel static/borderless inside the modal; rows keep their rounded
   floating highlights). A touch of top spacing under the pill. */
.mantiload-modal .mantiload-search__results:not(:empty) {
	margin-block-start: var(--ml-dropdown-gap);
}

/* ---- Dark mode: override the variables only ---- */
@media (prefers-color-scheme: dark) {
	.mantiload-search {
		--ml-bg: #1e1e1e;
		--ml-text: #e5e5e5;
		--ml-placeholder: #6b7280;
		--ml-icon-color: #e5e5e5;
		--ml-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
		--ml-shadow-focus: 0 6px 22px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
		/* Dropdown: light highlight + readable muted on dark; deeper shadow so the
		   floating card still reads against a dark surface. */
		--ml-bg-hover: rgba(255, 255, 255, 0.07);
		--ml-muted: #9aa3af;
		--ml-hairline: rgba(255, 255, 255, 0.10);
		--ml-dropdown-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
	}

	/* Flat (shadow="no") needs a light hairline to read on a dark surface. */
	.mantiload-search.ml-flat {
		--ml-border-color: rgba(255, 255, 255, 0.18);
	}
}

/* ---- Mobile (<= 768px): results live inside the JS-built sheet (below) — drop the
   floating-card radius/shadow so they sit flush, keep the generous touch-row padding. */
@media (max-width: 768px) {
	.mantiload-search__results,
	.mantiload-search__results:not(:empty) {
		margin-block-start: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.mantiload-card,
	.mantiload-search__category {
		margin-inline: 0;
		border-radius: 0;
		padding-inline: var(--ml-row-padding-inline);
	}

	/* Slightly larger thumbnail for touch. */
	.mantiload-search {
		--ml-thumb-size: 56px;
	}

	/* Icon-mode modal goes full-screen on phones (drop the card radius/shadow); the
	   panel's safe-area padding from the base rule keeps content clear of the notch. */
	.mantiload-modal {
		padding: 0;
	}

	.mantiload-modal__panel {
		max-inline-size: none;
		margin-block-start: 0;
		min-block-size: 100vh;
		border-radius: 0;
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile search sheet — built by mantiload.js setupMobileSheet() on phones.
 * A dimmed backdrop, an always-visible close (X) pinned above the sheet, and a
 * floating rounded sheet: fixed header (the field), a single scrollable results
 * region, and a sticky footer that keeps "View all results (N)" reachable.
 * ------------------------------------------------------------------------- */
.mantiload-msheet-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483600; /* above theme chrome / sticky headers */
}

.mantiload-msheet-overlay,
.mantiload-modal {
	/* Both body-level overlays (the mobile sheet AND the desktop icon-mode modal)
	   relocate the form to <body>, OUTSIDE .mantiload-search where the --ml-* theming
	   hooks are scoped — so we re-declare them here (mirroring the .mantiload-search
	   defaults) or the relocated field + results lose ALL sizing/colours: the desktop
	   modal would open transparent + unstyled (looking like nothing happened) and the
	   sheet's thumbnails would balloon. The --mantiload-* base vars live on :root, so
	   those still inherit. */
	--ml-height: 48px;
	--ml-radius: 9999px;
	--ml-bg: #ffffff;
	--ml-border-color: transparent;
	--ml-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
	--ml-shadow-focus: 0 6px 22px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
	--ml-padding-inline: 20px;
	--ml-font-size: 15px;
	--ml-text: #1a1a1a;
	--ml-placeholder: #9ca3af;
	--ml-icon-color: #1a1a1a;
	--ml-icon-size: 18px;
	--ml-icon-stroke: 1.5;
	--ml-ring: rgba(37, 99, 235, 0.40);
	--ml-icon-gap: 12px;
	--ml-submit-space: 92px;
	--ml-dropdown-radius: 20px;
	--ml-dropdown-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
	--ml-dropdown-gap: 8px;
	--ml-row-radius: 12px;
	--ml-row-inset: 8px;
	--ml-row-padding-inline: 20px;
	--ml-row-padding-block: 12px;
	--ml-bg-hover: rgba(0, 0, 0, 0.05);
	--ml-muted: #6b7280;
	--ml-hairline: rgba(0, 0, 0, 0.06);
	--ml-thumb-size: 56px; /* mobile touch size (the @media bump can't reach here) */
	--ml-modal-pad: 16px;
	--ml-close-space: 56px;
	--ml-overlay: rgba(0, 0, 0, 0.45);

	/* These --mantiload-* hooks are also scoped to .mantiload-search (no :root
	   fallback), so the relocated result rows need them for hover/active/labels. */
	--mantiload-hover: rgba(0, 0, 0, 0.04);
	--mantiload-active: rgba(0, 0, 0, 0.08);
	--mantiload-kbd-bg: rgba(0, 0, 0, 0.06);
	--mantiload-label: var(--mantiload-muted);
}

/* Dark mode: mirror the .mantiload-search dark overrides onto both relocated overlays. */
@media (prefers-color-scheme: dark) {
	.mantiload-msheet-overlay,
	.mantiload-modal {
		--ml-bg: #1f2329;
		--ml-text: #e5e7eb;
		--ml-placeholder: #9aa3af;
		--ml-icon-color: #e5e7eb;
		--ml-muted: #9aa3af;
		--ml-hairline: rgba(255, 255, 255, 0.10);
		--ml-bg-hover: rgba(255, 255, 255, 0.06);
		--ml-dropdown-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
		--mantiload-hover: rgba(255, 255, 255, 0.06);
		--mantiload-active: rgba(255, 255, 255, 0.12);
		--mantiload-kbd-bg: rgba(255, 255, 255, 0.1);
	}
}

.mantiload-msheet__backdrop {
	position: absolute;
	inset: 0;
	background: var(--ml-overlay, rgba(0, 0, 0, 0.45));
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* Dark circular close, pinned top-right ABOVE the sheet, always visible. */
.mantiload-msheet__close {
	position: absolute;
	inset-block-start: max(12px, env(safe-area-inset-top, 0px));
	inset-inline-end: 16px;
	z-index: 2;
	inline-size: 44px;
	block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: rgba(20, 20, 20, 0.85);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Floating sheet: inset from the edges, below the X, bounded height. */
.mantiload-msheet {
	position: absolute;
	z-index: 1;
	inset-inline: 16px;
	inset-block-start: calc(max(12px, env(safe-area-inset-top, 0px)) + 56px);
	max-block-size: calc(100% - max(12px, env(safe-area-inset-top, 0px)) - 56px - max(16px, env(safe-area-inset-bottom, 0px)));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ml-bg, #fff);
	border-radius: 20px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
}

/* The relocated form becomes the flex column: field (fixed) + results (scroll). */
.mantiload-msheet .mantiload-search__form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-block-size: 0; /* allow the inner results to overflow-scroll */
	margin: 0;
}

.mantiload-msheet .mantiload-search__field {
	flex: 0 0 auto; /* header: never scrolls away */
	margin: 0;
}

/* Flush header input: drop the floating-pill shadow, radius and border so the
   search box integrates cleanly into the sheet — no rounded white frame around it. */
.mantiload-msheet .mantiload-search__field .mantiload-search__input {
	box-shadow: none;
	border-radius: 0;
	border-color: transparent;
}

.mantiload-msheet .mantiload-search__results {
	/* The base panel is an absolutely-positioned floating dropdown (inset-block-start
	   100%), which inside the sheet would render off the bottom — pin it back into the
	   flex column so it becomes the scroll region (same trick as the desktop modal). */
	position: static;
	inset: auto;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	flex: 1 1 auto;
	min-block-size: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* iOS momentum */
	border-block-start: 1px solid var(--ml-hairline, rgba(0, 0, 0, 0.06));
	background: var(--ml-bg, #fff); /* opaque: never let the page show through */
}

/* Thumbnail clamp scoped to the overlay, with literal fallbacks so images stay
   fixed-size and cropped even if a custom property fails to resolve here. */
.mantiload-msheet .mantiload-card__media {
	inline-size: var(--ml-thumb-size, 56px);
	block-size: var(--ml-thumb-size, 56px);
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: calc(var(--mantiload-radius, 6px) / 1.5);
}

.mantiload-msheet .mantiload-card__img {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	object-fit: cover;
	display: block;
}

/* Sticky footer: always-reachable "View all results (N)". */
.mantiload-msheet__footer {
	flex: 0 0 auto;
	border-block-start: 1px solid var(--ml-hairline, rgba(0, 0, 0, 0.06));
	background: var(--ml-bg, #fff);
}

.mantiload-msheet__footer[hidden] {
	display: none;
}

.mantiload-msheet__footer .mantiload-results__viewall {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-block-size: 48px;
	margin: 0;
	padding: 14px 16px;
	font-weight: 600;
	color: #2563eb;
	text-decoration: none;
}

.mantiload-msheet__footer .mantiload-results__viewall-count {
	color: var(--ml-muted, #6b7280);
	font-weight: 500;
}

/* Term highlight inside result titles (search box, both desktop + mobile). */
.mantiload-mark {
	background-color: rgba(37, 99, 235, 0.14);
	color: inherit;
	border-radius: 3px;
	padding: 0 1px;
	font-weight: 600;
}

@media (prefers-color-scheme: dark) {
	.mantiload-msheet__footer .mantiload-results__viewall {
		color: #93b4ff;
	}
	.mantiload-mark {
		background-color: rgba(147, 180, 255, 0.22);
	}
}