/**
 * MONA Search – storefront styles.
 *
 * Design goals
 * ------------
 * * Premium and quiet: one accent colour, generous whitespace, no shadows
 *   competing for attention.
 * * Zero layout shift: skeleton rows have exactly the height of the real
 *   rows, and images reserve their box before they load.
 * * Light and dark are both first class, driven by `prefers-color-scheme`
 *   and overridable per instance via `data-theme`.
 * * Every interactive element is reachable and visible via keyboard.
 *
 * @package MonaSearch
 */

.mona-search {
	--mona-accent: #0b6b52;
	--mona-bg: #ffffff;
	--mona-bg-soft: #f6f7f8;
	--mona-bg-suggestion: #ffffff;
	--mona-bg-hover: #f0f3f2;
	--mona-fg: #16191c;
	--mona-fg-muted: #5b6570;
	--mona-border: #e3e6e9;
	--mona-shadow: 0 12px 40px -12px rgba(16, 24, 32, .28);
	--mona-radius: 14px;
	--mona-radius-sm: 9px;
	--mona-sale: #b3261e;
	--mona-stock-in: #17694f;
	--mona-stock-out: #8a2b25;

	position: absolute;
	z-index: 999999;
	box-sizing: border-box;
	max-width: calc(100vw - 24px);
	max-height: min(72vh, 680px);
	overflow: hidden auto;
	overscroll-behavior: contain;
	background: var(--mona-bg);
	color: var(--mona-fg);
	border: 1px solid var(--mona-border);
	border-radius: var(--mona-radius);
	box-shadow: var(--mona-shadow);
	font-size: 14px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	contain: layout paint;
}

.mona-search *,
.mona-search *::before,
.mona-search *::after {
	box-sizing: border-box;
}

.mona-search[hidden] {
	display: none;
}

/* Same black/45% dimming as the shop cart. The four non-overlapping areas
 * leave the bound search field usable without lifting a theme header. */
.mona-search__desktop-backdrop {
	position: fixed;
	inset: 0;
	z-index: 999998;
	pointer-events: none;
}

.mona-search__desktop-backdrop > div {
	position: absolute;
	background: rgba(0, 0, 0, .45);
	pointer-events: auto;
}

/* ---------------------------------------------------------------------
 * Dark mode
 * ------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
	.mona-search[data-theme="auto"] {
		--mona-bg: #14181b;
		--mona-bg-soft: #1b2024;
		--mona-bg-suggestion: #1b2024;
		--mona-bg-hover: #222a2e;
		--mona-fg: #eef2f4;
		--mona-fg-muted: #9aa7b1;
		--mona-border: #2a3238;
		--mona-shadow: 0 14px 44px -14px rgba(0, 0, 0, .7);
		--mona-sale: #ff8a80;
		--mona-stock-in: #6ddaae;
		--mona-stock-out: #ff9d95;
	}
}

.mona-search[data-theme="dark"] {
	--mona-bg: #14181b;
	--mona-bg-soft: #1b2024;
	--mona-bg-suggestion: #1b2024;
	--mona-bg-hover: #222a2e;
	--mona-fg: #eef2f4;
	--mona-fg-muted: #9aa7b1;
	--mona-border: #2a3238;
	--mona-shadow: 0 14px 44px -14px rgba(0, 0, 0, .7);
	--mona-sale: #ff8a80;
	--mona-stock-in: #6ddaae;
	--mona-stock-out: #ff9d95;
}

/* ---------------------------------------------------------------------
 * Layout variants
 * ------------------------------------------------------------------ */

.mona-search--fullscreen {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	border: 0;
	border-radius: 0;
}

/* ---------------------------------------------------------------------
 * Structure
 * ------------------------------------------------------------------ */

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

.mona-search__body {
	padding: 6px 0;
}

.mona-search__body:has(> .mona-search__suggestion:first-child) {
	padding-top: 0;
}

.mona-search__group + .mona-search__group {
	border-top: 1px solid var(--mona-border);
}

.mona-search__group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px 6px;
}

.mona-search__group-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mona-fg-muted);
}

.mona-search__clear {
	padding: 0;
	font-size: 11px;
	color: var(--mona-fg-muted);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}

.mona-search__clear:hover {
	color: var(--mona-fg);
}

/* ---------------------------------------------------------------------
 * Result rows
 * ------------------------------------------------------------------ */

.mona-result {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 96px;
	padding: 12px 16px;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background-color .12s ease, border-color .12s ease;
}

/*
 * Hover/Auswahl-Farben sind Vertragsvariablen (Theme → MONA, siehe den
 * Kachel-Block bei .mona-result__media--icon): --mona-row-hover für die
 * Fläche, --mona-row-hover-edge für den Balken am linken Rand. Modern
 * Natura speist ein leichtes neutrales Hellgrau mit warmer Kante ein —
 * MONAs eigener Grünstich (#f0f3f2 + Akzentbalken) wirkte dort fremd
 * (Händlerbefund 2026-08-20). Rückfall: bisheriges Verhalten.
 */
.mona-result:hover,
.mona-result.is-active {
	background: var(--mona-row-hover, var(--mona-bg-hover));
	border-left-color: var(--mona-row-hover-edge, var(--mona-accent));
	text-decoration: none;
}

/*
 * Two tiers per result: the top tier (image + title + excerpt) claims the
 * full row width for text, since that is the part that actually needs it.
 * The bottom tier (SKU/rating/stock vs. price/cart button) gets its own
 * full-width row underneath instead of competing with the title for the
 * same cramped column – that competition was the layout defect a
 * single-row design produced at realistic panel widths.
 */
.mona-result__top {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.mona-result__top:hover {
	text-decoration: none;
}

.mona-result__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.mona-result:focus-visible {
	outline: 2px solid var(--mona-accent);
	outline-offset: -2px;
}

.mona-result__media {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: var(--mona-bg-soft);
	border-radius: var(--mona-radius-sm);
}

.mona-result__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Categories are short navigation rows, leaving room for product choices. */
.mona-result--term {
	background: var(--mona-bg-soft);
}

.mona-result.mona-result--term {
	min-height: 48px;
	padding-block: 8px;
}

.mona-result--term .mona-result__top {
	align-items: center;
}

/*
 * Placeholder icon for rows without an image. Keeps the exact box of a real
 * thumbnail (alignment down the column), but fills it with a solid tile
 * carrying the duotone type icon. A pale accent tint was tried first
 * (1.11.0) and drowned next to real product photos.
 *
 * The colours are a CONTRACT: `--mona-media-tile` (tile) and
 * `--mona-media-icon` (glyph) are meant to be set by the theme, inherited
 * from :root, so the tiles speak the shop's own palette – Modern Natura
 * feeds its warm beige with CTA forest green here. Neither variable is
 * defined inside .mona-search on purpose: a value on the element would
 * beat the theme's inherited one. Without a theme the fallback is white
 * on the accent, the same pairing as the cart button.
 */
.mona-result__media--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mona-media-icon, #fff);
	background: var(--mona-media-tile, var(--mona-accent));
}

.mona-result__media--icon svg {
	width: 28px;
	height: 28px;
}

@media (prefers-color-scheme: dark) {
	.mona-search[data-theme="auto"] .mona-result__image {
		mix-blend-mode: normal;
	}
}

.mona-search[data-theme="dark"] .mona-result__image {
	mix-blend-mode: normal;
}

.mona-result__main {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * The meta line stays on one row: "MODERN NATURA" wrapping onto a second
 * line pushed the title down and made every result look ragged. Each part
 * truncates individually instead.
 */
.mona-result__meta {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin-bottom: 2px;
	overflow: hidden;
	font-size: 11px;
	line-height: 1.35;
	color: var(--mona-fg-muted);
}

.mona-result__brand,
.mona-result__category {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mona-result__brand {
	flex: 0 1 auto;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.mona-result__category {
	flex: 0 1 auto;
}

/*
 * Container for the wishlist button of the shop's own provider. Kept
 * deliberately unopinionated – the provider brings its own icon and
 * states, and overriding them here would make the search look unlike the
 * rest of the shop.
 */
.mona-result__wishlist {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 34px;
	line-height: 1;
}

.mona-result__wishlist a,
.mona-result__wishlist button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mona-result__wishlist img,
.mona-result__wishlist svg {
	max-width: 22px;
	max-height: 22px;
}

/* Wishlist plugins like to announce themselves in a block of their own. */
.mona-result__wishlist .yith-wcwl-add-button,
.mona-result__wishlist .tinv-wishlist,
.mona-result__wishlist .tinv-wraper {
	margin: 0;
}

/* Language this row was matched in, when it differs from the one shown. */
.mona-result__origin {
	flex: 0 0 auto;
	padding: 0 5px;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .04em;
	color: var(--mona-fg-muted);
	border: 1px solid var(--mona-border);
	border-radius: 3px;
}

/*
 * Product names are long ("Bio Ashwagandha Kapseln hochdosiert 500mg").
 * A single nowrap line cut them to "Bio Ashwa…", which tells a shopper
 * nothing. Two wrapped lines fit the whole name in almost every case and
 * still keep the row height predictable.
 */
.mona-result__title {
	display: -webkit-box;
	display: box;
	overflow: hidden;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	box-orient: vertical;
	overflow-wrap: anywhere;
}

.mona-result__excerpt {
	display: -webkit-box;
	display: box;
	overflow: hidden;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--mona-fg-muted);
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	box-orient: vertical;
	overflow-wrap: anywhere;
}

.mona-result__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
	color: var(--mona-fg-muted);
}

.mona-result__stars {
	color: #e2a52b;
	letter-spacing: 1px;
}

.mona-result__stock--instock {
	color: var(--mona-stock-in);
}

.mona-result__stock--outofstock {
	color: var(--mona-stock-out);
}

.mona-result__side {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.mona-result__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	line-height: 1.25;
	white-space: nowrap;
}

.mona-result__price-old {
	font-size: 11.5px;
	color: var(--mona-fg-muted);
	text-decoration: line-through;
}

.mona-result__price-current {
	font-weight: 700;
	font-size: 14.5px;
	white-space: nowrap;
}

.mona-result__badge {
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	/* Vertragsvariable (Theme → MONA): Das Rabatt-Abzeichen darf gedämpft
	 * werden – Modern Natura speist sein tiefes UVP-Rot ein, damit das
	 * Abzeichen nicht lauter ist als die Treffer (Händlerentscheid
	 * 2026-08-20). Rückfall: MONAs Aktionsrot. */
	background: var(--mona-sale-badge, var(--mona-sale));
	border-radius: 999px;
}

.mona-result__cart {
	display: inline-block;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	/* Vertragsvariable (Theme → MONA): Der Kauf-Knopf darf die Knopffarbe
	 * des Shops tragen, damit Suche und Katalog eine Einheit sind —
	 * Modern Natura speist sein Aktionsgrün ein. Rückfall: Akzent. */
	background: var(--mona-cta-bg, var(--mona-accent));
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: opacity .12s ease, transform .12s ease;
}

/*
 * Farbe und Unterstreichung im Hover/Fokus ausdruecklich behaupten: Der Knopf
 * ist ein <a>, und globale Theme-Regeln wie `a:hover { color: ...;
 * text-decoration: underline }` (Modern Natura base.css, Spezifitaet 0,1,1)
 * schlagen sonst die Grundregel `.mona-result__cart` (0,1,0) - die Schrift
 * kippte beim Hover auf dunkelgruen-unterstrichen auf gruenem Grund
 * (Haendlerbefund 2026-08-18). Zwei Klassenstufen (0,2,0) gewinnen ohne
 * !important, unter jedem Theme.
 */
/*
 * Kompakte Fassung (Einstellung «Darstellung des Warenkorb-Knopfs»):
 * quadratischer Symbol-Knopf. Seine Farben sind eigene Vertragsvariablen
 * (Theme → MONA), denn sein Vorbild ist der Kachel-Warenkorb-Knopf eines
 * Shops: in Ruhe NEUTRAL, Farbe erst beim Überfahren – ein permanent
 * farbiger Knopf je Zeile zog den Blick von den Treffern ab
 * (Händlerbefund 2026-08-20). Ohne Theme-Vorgabe bleibt er farbig wie
 * die volle Fassung.
 */
.mona-result__cart--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 10px;
	color: var(--mona-cta-icon-fg, #fff);
	background: var(--mona-cta-icon-bg, var(--mona-cta-bg, var(--mona-accent)));
}

.mona-result__cart--icon svg {
	display: block;
}

.mona-result__cart:hover,
.mona-result__cart:focus {
	color: #fff;
	text-decoration: none;
	opacity: .9;
}

.mona-result__cart:active {
	transform: scale(.97);
}

.mona-result__cart.is-loading {
	opacity: .6;
	cursor: progress;
}

.mona-result__cart.is-done {
	background: var(--mona-stock-in);
}

/*
 * Zustandsfarben der kompakten Fassung. NACH :hover und .is-done, weil
 * die Reihenfolge hier entscheidet: Der allgemeine Hover (Deckkraft .9,
 * weisse Schrift) gilt für den neutralen Knopf nicht – er bekommt beim
 * Überfahren stattdessen seine Farbe. Der Erfolgszustand behält das
 * Grün von .is-done und wird vom Hover ausgenommen.
 */
.mona-result__cart--icon:not(.is-done):hover,
.mona-result__cart--icon:not(.is-done):focus {
	color: var(--mona-cta-icon-fg-hover, #fff);
	background: var(--mona-cta-icon-bg-hover, var(--mona-cta-bg, var(--mona-accent)));
	opacity: 1;
}

.mona-result__cart--icon.is-done {
	color: #fff;
}

/* ---------------------------------------------------------------------
 * Suggestion, chips and messages
 * ------------------------------------------------------------------ */

/*
 * Shown when the search had to widen past the visitor's language. Quieter
 * than the "did you mean" row – it explains something, it does not ask for
 * a decision.
 */
.mona-search__notice {
	padding: 10px 16px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--mona-fg-muted);
	background: var(--mona-bg-soft);
	border-bottom: 1px solid var(--mona-border);
}

.mona-search__suggestion {
	padding: 10px 16px;
	font-size: 13px;
	font-style: italic;
	background: var(--mona-bg-suggestion);
	border-bottom: 1px solid var(--mona-border);
}

.mona-search__suggestion-term {
	padding: 0;
	font-size: inherit;
	font-family: inherit;
	font-style: inherit;
	font-weight: 700;
	color: var(--mona-accent);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}

.mona-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 16px 14px;
}

.mona-search__chip {
	padding: 6px 12px;
	font-size: 12.5px;
	font-family: inherit;
	color: inherit;
	background: var(--mona-bg-soft);
	border: 1px solid var(--mona-border);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}

.mona-search__chip:hover,
.mona-search__chip.is-active {
	background: var(--mona-row-hover, var(--mona-bg-hover));
	border-color: var(--mona-row-hover-edge, var(--mona-accent));
}

.mona-search__message {
	padding: 26px 16px;
	text-align: center;
}

.mona-search__message-title {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 14px;
}

.mona-search__message-text {
	margin: 0;
	font-size: 13px;
	color: var(--mona-fg-muted);
}

.mona-search__message .mona-search__chips {
	justify-content: center;
	padding-top: 14px;
	padding-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------ */

/*
 * Stuck to the bottom edge of the scrolling panel. "Alle Resultate anzeigen"
 * is the way out of a live search that did not quite have the answer, and
 * having to scroll past eight results to find it is exactly the moment
 * nobody does. Opaque background, so the rows pass underneath cleanly.
 *
 * In the full screen mode the shell does not scroll and this degrades to an
 * ordinary flex item, which is what it should be there.
 */
.mona-search__footer {
	position: sticky;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 16px;
	background: var(--mona-bg-soft);
	border-top: 1px solid var(--mona-border);
}

.mona-search__footer:empty {
	display: none;
}

.mona-search__all {
	display: block;
	flex: 1 1 auto;
	padding: 13px 0;
	font-weight: 600;
	font-size: 13.5px;
	/* Vertragsvariable, siehe den Kachel-Block bei .mona-result__media--icon:
	 * das Theme darf den Link entschärfen (Modern Natura setzt sein
	 * Textgrau), ohne Theme-Vorgabe bleibt es der Akzent. */
	color: var(--mona-footer-link, var(--mona-accent));
	text-decoration: none;
}

.mona-search__all:hover {
	text-decoration: underline;
}

.mona-search__timing {
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--mona-fg-muted);
}

/* ---------------------------------------------------------------------
 * Skeletons – identical height to real rows, so nothing jumps
 * ------------------------------------------------------------------ */

.mona-search__skeletons {
	padding: 6px 0;
}

.mona-skel {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 96px;
	padding: 12px 16px;
}

.mona-skel__img,
.mona-skel__line {
	background: linear-gradient(90deg, var(--mona-bg-soft) 0%, var(--mona-bg-hover) 50%, var(--mona-bg-soft) 100%);
	background-size: 220% 100%;
	border-radius: var(--mona-radius-sm);
	animation: mona-shimmer 1.3s ease-in-out infinite;
}

.mona-skel__img {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
}

.mona-skel__lines {
	flex: 1 1 auto;
}

.mona-skel__line {
	height: 12px;
	margin-bottom: 8px;
	border-radius: 6px;
}

.mona-skel__line--short {
	width: 45%;
}

.mona-skel__line--bar {
	width: 30%;
	height: 22px;
	margin-top: 12px;
	margin-bottom: 0;
	border-radius: 999px;
}

@keyframes mona-shimmer {
	0% { background-position: 120% 0; }
	100% { background-position: -20% 0; }
}

/* ---------------------------------------------------------------------
 * Highlighting
 * ------------------------------------------------------------------ */

/*
 * Auch die Markierfarbe ist eine Vertragsvariable (Theme → MONA, siehe
 * den Kachel-Block bei .mona-result__media--icon): Modern Natura hinterlegt
 * Treffer in seinem warmen «Bone» statt in einer Akzent-Tönung — eine
 * grünliche Hinterlegung wirkte im warmen Shop fremd (Händlerbefund
 * 2026-08-20). Ohne Theme-Vorgabe bleibt die bisherige Akzent-Tönung.
 */
.mona-search mark.mona-mark {
	padding: 0 1px;
	/* --mona-mark-fg gehört zwingend zu --mona-mark-bg: Eine vom Theme
	 * gesetzte HELLE Markierfarbe träfe im Dunkelmodus sonst auf weisse
	 * Schrift und wäre unleserlich. Ohne Vorgabe erbt der Text wie bisher. */
	color: var(--mona-mark-fg, inherit);
	font-weight: 700;
	background: var(--mona-mark-bg, color-mix(in srgb, var(--mona-accent) 18%, transparent));
	border-radius: 3px;
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.mona-search mark.mona-mark {
		background: var(--mona-mark-bg, rgba(11, 107, 82, .16));
	}
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.mona-search,
	.mona-search * {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------
 *
 * This block sits near the end of the file on purpose. Every rule here
 * overrides a base rule of the same specificity (one class), so it only
 * wins if it comes later in the source order. Placed anywhere above the
 * component sections it would be silently dead – which is exactly what
 * happened in 1.1.0-dev and is why the section is marked so prominently.
 *
 * Do not move it. New responsive rules belong here, not next to their
 * component. Exactly one section follows it – the full screen mode, for the
 * same reason one step further: it has to override these media queries too.
 * ------------------------------------------------------------------ */

/*
 * Tablets and narrow desktops. Nothing changes structurally yet; the row
 * simply gets a little more breathing room, because the cart button is the
 * first element to run out of space.
 */
@media (max-width: 900px) {
	.mona-search {
		max-height: min(76vh, 640px);
	}

	.mona-result {
		padding: 13px 16px;
	}

	.mona-result__bottom {
		gap: 8px 12px;
	}

	.mona-result__cart {
		padding: 8px 14px;
	}

	/* Die kompakte Fassung bleibt auch hier quadratisch – das Polster der
	 * Vollfassung würde sie sonst in die Breite ziehen. */
	.mona-result__cart--icon {
		padding: 0;
	}
}

/*
 * Phones. Row density only – which mode the search runs in is decided by the
 * script, from `display.mobile_breakpoint`, because a media query cannot read
 * a setting. The two do not have to agree: a comfortable row is a
 * comfortable row either way.
 *
 * Until 1.8.0 this block also turned the panel into a bottom sheet pinned to
 * the lower screen edge. That was wrong in every case the shop actually has:
 * with a field at the top of a mobile menu the sheet either left a gap of
 * category list between the two, or – on a short phone – grew up far enough
 * to cover the field the visitor was typing in. The full screen mode at the
 * end of this file replaces it; `display.mobile_mode: panel` keeps an
 * ordinary anchored dropdown, which position() now sizes to fit.
 */
@media (max-width: 640px) {
	/* Clear the iPhone home indicator. */
	.mona-search--panel .mona-search__footer {
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	/*
	 * Dim the page behind the panel so it reads as a layer rather than as
	 * part of the page. Purely decorative: `pointer-events: none` keeps the
	 * existing outside-click handler working unchanged.
	 */
	html.mona-search-open::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 999998;
		background: rgba(10, 14, 18, .32);
		pointer-events: none;
	}

	.mona-result {
		min-height: 104px;
		padding: 14px 16px;
	}

	.mona-result__top {
		gap: 14px;
	}

	.mona-result__media,
	.mona-skel__img {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
	}

	.mona-result__media--icon svg {
		width: 32px;
		height: 32px;
	}

	.mona-result__title {
		font-size: 15px;
	}

	.mona-result__excerpt {
		font-size: 13px;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.mona-search__all {
		padding: 15px 0;
		font-size: 14.5px;
	}

	.mona-search__message {
		padding: 30px 16px;
	}
}

/*
 * Very narrow phones. Price and cart button no longer fit beside the SKU
 * and stock line, so the action row stacks instead of overflowing.
 */
@media (max-width: 380px) {
	.mona-result__bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.mona-result__side {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	.mona-result__cart {
		flex: 0 0 auto;
	}
}

/*
 * Touch devices of any size. Width is a poor proxy for input method – a
 * 1024 px tablet is still operated with a thumb – so the touch target
 * floor is keyed off the pointer instead. 44 px is the smallest reliably
 * hittable target.
 */
@media (pointer: coarse) {
	.mona-result__cart,
	.mona-search__chip {
		min-height: 44px;
	}

	/* Der Symbol-Knopf braucht die 44px in BEIDEN Richtungen – ohne Text
	 * gibt es keine Breite, die sie ihm schenkt. */
	.mona-result__cart--icon {
		min-width: 44px;
		width: 44px;
		height: 44px;
	}

	.mona-result__wishlist {
		min-width: 44px;
		min-height: 44px;
	}

	.mona-search__chip {
		padding: 10px 14px;
		font-size: 13.5px;
	}

	.mona-search__suggestion {
		padding: 14px 16px;
	}

	.mona-search__suggestion-term {
		display: inline-block;
		padding: 4px 0;
	}

	.mona-search__all {
		min-height: 48px;
	}

	/*
	 * iOS zooms the page in when a focused input's font-size is below
	 * 16 px. The panel is anchored to that input, so the zoom leaves it
	 * hanging off screen. The attribute is set by the script on every
	 * input it binds, which is more reliable than guessing the theme's
	 * class name.
	 */
	input[data-mona-search-bound] {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------
 * Full screen mode
 * ---------------------------------------------------------------------
 *
 * The last section in the file, and it has to be: these rules override both
 * the base component and the media queries above it – `max-height` and
 * `position` above all – and only win from here.
 *
 * The class is set by the script, never by a media query. The width it
 * switches at is `display.mobile_breakpoint`, and CSS cannot read a setting.
 *
 * Why the mode exists at all: on a phone there is no useful place to put a
 * dropdown. Anchored under a field at the top of a mobile menu it leaves the
 * theme's category list visible and tappable in between; pinned to the lower
 * edge as a sheet it either strands itself away from the field or grows up
 * far enough to cover it. Owning the whole screen – with the search field
 * inside it, directly above its own results – is the only arrangement where
 * neither can happen.
 * ------------------------------------------------------------------ */

.mona-search--overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000000;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	/*
	 * STARR am Layout-Viewport, ohne jede Variable. Bis 1.9.4 kamen `top`
	 * und `height` aus dem visuellen Viewport (Skript, `--mona-overlay-*`).
	 * Das war die Wurzel einer ganzen Fehlerfamilie: iOS verschiebt den
	 * sichtbaren Bereich bei offener Tastatur frei unter dem Finger. Folgte
	 * das Fenster ihm, zitterte es («Gummiband»); folgte es ihm nicht,
	 * blieb es an einer veralteten Lage stehen und liess sich samt weissem
	 * Rand darüber aus dem Bild schieben. Ein Element mit `inset: 0` kann
	 * beides nicht: Es deckt den Layout-Viewport immer vollständig – wohin
	 * auch immer der sichtbare Ausschnitt gerade gezogen wird, er zeigt
	 * dieses Fenster.
	 */
	height: 100%;
	max-height: none;
	/*
	 * Die Bildschirmtastatur liegt ÜBER dem unteren Teil des Fensters. Statt
	 * das Fenster zu verkleinern (das hiesse wieder: Geometrie aus dem
	 * visuellen Viewport), rückt nur der Inhalt hoch: Der Innenabstand
	 * entspricht der Tastaturhöhe, die das Skript einzig bei ECHTER
	 * Höhenänderung misst. Der Hintergrund des Fensters füllt den
	 * Abstand weiter – hinter der Tastatur liegt nie die Seite.
	 */
	padding-bottom: var(--mona-kb, 0px);
	/* The body scrolls, not the shell: bar and footer stay put. */
	overflow: hidden;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	/*
	 * Wischgesten starten nur noch dort, wo wirklich gescrollt wird (der
	 * Rumpf erlaubt sich `pan-y` weiter unten). Überall sonst – Suchleiste,
	 * Fusszeile, leere Fläche – beginnt gar keine Browser-Geste. Das ist
	 * die erste Hälfte der Sperre gegen das Verschieben des sichtbaren
	 * Bereichs bei offener Tastatur; die zweite ist der touchmove-Wächter
	 * im Skript.
	 */
	touch-action: none;
}

/* Backdrop and full screen mode would only dim each other. */
html.mona-search-overlay.mona-search-open::after {
	display: none;
}

/*
 * Scroll-Sperre. `overflow: hidden` allein reicht nicht – iOS Safari scrollt
 * die Seite darunter weiter. Den Body nimmt deshalb das Skript zusätzlich
 * aus dem Fluss (`lockScroll()`) und merkt sich die Position, damit der
 * Besucher beim Schliessen wieder dort steht, wo er war. Diese Regel bleibt
 * als erste Verteidigungslinie für Browser ohne die Eigenheit.
 */
html.mona-search-overlay,
html.mona-search-overlay body {
	overflow: hidden;
	overscroll-behavior: none;
}

/*
 * Deckende Fläche über der ganzen Seite, unter dem Suchmodus.
 *
 * Nur noch für den Rückfallpfad ohne <dialog>. Seit der Modus starr mit
 * `inset: 0` den ganzen Layout-Viewport deckt, ist sie dort zweite
 * Verteidigungslinie: Sollte eine fremde Regel dem Modus doch Geometrie
 * nehmen, liegt hinter ihm diese Fläche statt des Shops.
 *
 * Farbe kommt vom Modus selbst (JavaScript setzt sie beim Öffnen), damit
 * heller und dunkler Modus ohne zweite Farbtabelle stimmen.
 *
 * Sie ist bewusst ein echtes Element im <body> und KEIN Pseudoelement am
 * <html>. Bis 1.8.2 hing sie an html::before, und das war falsch:
 * lockScroll() setzt den Body auf `position: fixed`, was ihn zu einem
 * eigenen Stapelkontext macht. Alles darin – auch dieser Suchmodus mit
 * z-index 1000000 – liegt dann zwangsläufig unter einer Fläche, die
 * daneben am Wurzelelement hängt. Gemessen lag an jedem Punkt des
 * Bildschirms <html> zuoberst: Das Suchfenster war vollständig unter einer
 * weissen Fläche begraben. Als Geschwister des Modus im selben Kontext
 * entscheidet wieder der z-index, so wie es aussieht.
 */
.mona-search__backdrop {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: var(--mona-overlay-backdrop, #fff);
}

/* =====================================================================
 * Hülle des Vollbildmodus – <dialog> in der Top-Layer
 *
 * Die Top-Layer wird gezeichnet, NACHDEM das ganze Dokument fertig ist.
 * Nichts darin kann sie überdecken: kein z-index, kein Stapelkontext,
 * kein `position: fixed` am Body. Genau daran war der Aufbau bis 1.8.3
 * gescheitert – die Scroll-Sperre machte den Body zum Stapelkontext und
 * sperrte den Suchmodus mit ein.
 *
 * Der Reset ist absichtlich redundant: Als <dialog> trifft dieser Knoten
 * jede fremde `dialog { … }`-Regel, die irgendein Plugin auf der Seite
 * mitbringt. Spezifität schützt nur Eigenschaften, die hier stehen.
 *
 * KEIN transform, filter, backdrop-filter, will-change oder contain
 * ergänzen – jedes davon macht die Hülle zum Bezugsrahmen und schneidet
 * feste Kinder an `overflow: hidden` ab.
 * ================================================================== */

dialog.mona-search__shell {
	position: fixed;
	/* Starr `inset: 0` – siehe die Begründung an .mona-search--overlay.
	 * Alle vier Seiten ausdrücklich, zusätzlich die logischen Varianten:
	 * fremde dialog-Regeln setzen gern einzelne davon. */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
	overflow: hidden;
	overscroll-behavior: contain;
	background: transparent;
	color: inherit;
	box-shadow: none;
	transform: none;
	filter: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	will-change: auto;
	contain: none;
	opacity: 1;
	animation: none;
	transition: none;
}

/* Sichtbarkeit ausdrücklich, damit ein fremdes `dialog { display: … }`
 * sie nicht kippt. Leer und geschlossen kostet die Hülle nichts: kein
 * Kasten, kein Tabstopp, keine Rolle. */
dialog.mona-search__shell:not([open]) {
	display: none;
}

dialog.mona-search__shell[open] {
	display: block;
}

/* Deckfläche. Ersetzt .mona-search__backdrop im Dialogpfad.
 *
 * LITERALE Farben, kein var(): ::backdrop erbte ursprünglich von gar
 * nichts, und die Vererbung vom Ursprungselement kam erst spät und nicht
 * überall. Ein var() löste dort nicht auf und fiele auf transparent
 * zurück – genau der helle Streifen über der Tastatur, gegen den diese
 * Fläche überhaupt existiert. Bei einer Farbänderung beide Stellen
 * anfassen (hier und --mona-bg). */
dialog.mona-search__shell::backdrop {
	background: #ffffff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	opacity: 1;
	animation: none;
	transition: none;
}

@media (prefers-color-scheme: dark) {
	dialog.mona-search__shell[data-theme="auto"]::backdrop {
		background: #14181b;
	}
}

dialog.mona-search__shell[data-theme="dark"]::backdrop {
	background: #14181b;
}

dialog.mona-search__shell[data-theme="light"]::backdrop {
	background: #ffffff;
}

/* Das Panel IN der Hülle: gewöhnlicher Fluss statt eigener fester Lage.
 * Ein festes Kind hängt nur so lange am Viewport, wie kein Vorfahre einen
 * Bezugsrahmen aufmacht – und jedes spätere transform oder contain an der
 * Hülle würde es schlagartig umhängen und beschneiden. Statischer Fluss
 * ist gegen diese ganze Fehlerklasse immun. */
.mona-search--dialog.mona-search--overlay {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: auto;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	border-radius: 0;
	box-shadow: none;
}

/* =====================================================================
 * Hinweis, dass die Liste weitergeht
 *
 * Eine abgeschnittene Liste sieht aus wie eine vollständige. Wer den
 * ersten Treffer sieht und darunter «Alle Resultate anzeigen (23)»,
 * hält den einen für das Ergebnis – die Möglichkeit zu scrollen ist
 * nicht sichtbar, weil auf dem Telefon keine Scrollleiste steht.
 *
 * Der Hinweis liegt ÜBER dem unteren Rand der Liste, nicht darunter:
 * negativer oberer Aussenabstand statt absoluter Positionierung. Damit
 * braucht er keinen Bezugsrahmen, verschiebt nichts und funktioniert im
 * Dropdown genauso wie im Vollbildmodus.
 *
 * `pointer-events: none` ist wesentlich: Er sitzt über den Treffern und
 * dürfte niemals einen Fingertipp abfangen.
 * ================================================================== */

.mona-search__scrollhint {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 46px;
	margin-top: -46px;
	padding-bottom: 6px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .18s ease;
	/* Weicher Übergang, damit die Winkel nicht auf einer Textzeile liegen. */
	background: linear-gradient(to top, var(--mona-bg) 10%, transparent);
}

.mona-search__scrollhint.is-visible {
	opacity: 1;
}

.mona-search__scrollhint svg {
	display: block;
	width: 26px;
	height: 26px;
	padding: 3px;
	border-radius: 50%;
	color: var(--mona-fg-muted);
	background: var(--mona-bg-soft);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	/* Sacht auf und ab – Bewegung erklärt «scrollbar» schneller als jede
	 * Form. Bewusst klein und langsam, damit sie nicht vom Lesen ablenkt. */
	animation: mona-scrollhint 1.8s ease-in-out infinite;
}

@keyframes mona-scrollhint {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(3px); }
}

/* Wer Bewegung abbestellt hat, bekommt den Hinweis ohne sie – die
 * Aussage steckt in der Form, nicht in der Animation. */
@media (prefers-reduced-motion: reduce) {
	.mona-search__scrollhint svg {
		animation: none;
	}
}

/* Built for every instance, shown only here. */
.mona-search__bar {
	display: none;
}

.mona-search--overlay .mona-search__bar {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	padding-top: calc(8px + env(safe-area-inset-top, 0px));
	background: var(--mona-bg);
	border-bottom: 1px solid var(--mona-border);
}

.mona-search__back {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--mona-fg);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.mona-search__back:hover {
	background: var(--mona-row-hover, var(--mona-bg-hover));
}

.mona-search__field {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
	background: var(--mona-bg-soft);
	border: 1px solid var(--mona-border);
	border-radius: 999px;
	transition: border-color .12s ease, box-shadow .12s ease;
}

/*
 * Der Fokus gehört der Pille, nicht dem Feld darin: ein weicher Ring, der
 * ihrer eigenen Rundung folgt. Vorher trug ihn das Eingabefeld – vom Theme,
 * nicht von hier – als scharfkantiger Kasten, der über die runden Enden
 * hinausragte.
 */
.mona-search__field:focus-within {
	border-color: var(--mona-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mona-accent) 20%, transparent);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.mona-search__field:focus-within {
		box-shadow: 0 0 0 3px rgba(11, 107, 82, .2);
	}
}

/* Gleich breit wie der Löschen-Knopf gegenüber (40px + 2px Rand), damit die
 * Pille an beiden Enden gleich viel Luft hat. Vorher wuchs die Lupenseite
 * nur aus ihrem Innenabstand und blieb 8px schmaler – das las sich schief,
 * sobald rechts das X erschien. */
.mona-search__field-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	margin-inline-start: 2px;
	color: var(--mona-fg-muted);
}

.mona-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	/* Links 4px zur Lupe, rechts 4px – bei leerem Feld endet der Text damit
	 * vor der Rundung, nicht darin. */
	padding: 0 4px;
	color: var(--mona-fg);
	/*
	 * Not a design choice: below 16px iOS zooms the page in when the field
	 * takes focus, and a zoomed page under a fixed overlay is a state no
	 * amount of repositioning gets back.
	 */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.4;
	background: none;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * Abwehr gegen die globale Feldgestaltung des Themes.
 *
 * Themes gestalten Eingabefelder gesammelt über
 * `input[type="text"], input[type="search"], …` – Hintergrund, Rahmen,
 * Radius, Fokusring. Modern Natura tut genau das. Beides schlägt hier durch:
 *
 * 1. **Hintergrund und Radius.** Das Feld bekäme eine eigene weisse Fläche
 *    mit 6px Radius. Solange rechts der Löschen-Knopf steht, fällt das nicht
 *    auf – ohne ihn reicht das Feld bis an die Pille heran und übermalt
 *    deren runde Ecke samt Fokusring. Genau deshalb sah die Pille nur im
 *    leeren Zustand «aufgebrochen» aus und mit Text tadellos.
 * 2. **Fokusring.** Ein globales `:focus-visible { outline: 2px solid …;
 *    outline-offset: 2px; border-radius: 2px }` legt einen scharfkantigen
 *    Rahmen 2px ausserhalb – über die runden Enden hinaus. Den Fokus zeigt
 *    ohnehin die Pille selbst (:focus-within weiter oben).
 *
 * 3. **Schriftgrösse – der teuerste Punkt.** Weiter oben steht bereits
 *    `font-size: 16px`, aber mit einer einzigen Klasse (0,1,0) verliert die
 *    Regel gegen jedes `input[type="search"]` des Themes (0,1,1). Modern
 *    Natura setzt dort 15px, und darunter fängt iOS Safari an, beim Antippen
 *    des Feldes in die Seite HINEINZUZOOMEN.
 *
 *    Dieser Zoom ist die Wurzel von drei Beschwerden, die wie drei getrennte
 *    Fehler aussahen: Der Text lief rechts aus dem Bild, die Seite liess sich
 *    verschieben («wabbeln»), und an den Rändern schimmerte die Seite
 *    dahinter durch. Alles drei ist derselbe hineingezoomte Viewport.
 *
 *    Am Schreibtisch ist das unsichtbar – kein Desktop-Browser zoomt beim
 *    Fokus. Nur ein echtes Gerät zeigt es.
 *
 *    Der Weg über `maximum-scale=1` im Viewport-Meta wäre der falsche: Er
 *    nähme dem Besucher das Zoomen ganz.
 *
 * `!important`, weil Spezifität nicht reicht: `input[type="search"]` ist
 * spezifischer als jede einzelne Klasse, die dieses Stylesheet vergeben
 * kann. Bewusst nur diese Eigenschaften und nur auf dem eigenen Feld.
 */
.mona-search__input,
.mona-search__input:focus,
.mona-search__input:focus-visible {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	/* Nicht unter 16px – siehe Punkt 3 oben. */
	font-size: 16px !important;
	line-height: 1.4 !important;
}

/* The engine's own clear button would sit right next to ours. */
.mona-search__input::-webkit-search-cancel-button,
.mona-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.mona-search__clear-input {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-inline-end: 2px;
	padding: 0;
	color: var(--mona-fg-muted);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

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

.mona-search__back svg,
.mona-search__clear-input svg,
.mona-search__field-icon svg {
	display: block;
}

/*
 * Runde Knöpfe brauchen einen runden Fokusring. Ein Theme, das im globalen
 * `:focus-visible` nebenbei `border-radius: 2px` setzt – wie Modern Natura –
 * würde ihn sonst eckig um den Kreis legen. Der Radius wird deshalb hier
 * ausdrücklich behauptet.
 */
.mona-search__back:focus-visible,
.mona-search__clear-input:focus-visible {
	outline: 2px solid var(--mona-accent) !important;
	outline-offset: 2px !important;
	border-radius: 50% !important;
}

/*
 * Kein Federn an den Kanten.
 *
 * `contain` verhindert nur, dass die Geste an die Seite dahinter
 * weitergereicht wird – das LOKALE Federn im Behälter selbst lässt es
 * ausdrücklich zu. Im leeren Zustand gibt es hier aber nichts zu scrollen
 * (gemessen: Inhalt 750px, Fenster 750px), und ein Wischen erzeugte
 * genau dieses Stocken und Zurückfedern. `none` nimmt beides.
 *
 * `overflow-x: hidden` dazu: Der Rumpf stand auf `auto` und hatte damit
 * eine zweite, waagrechte Achse, die ebenfalls mitfederte – seitlich,
 * gleichzeitig mit der senkrechten. In vier gemessenen Fällen (leer,
 * viele Treffer, sehr langer Suchbegriff, kein Treffer) war die
 * Inhaltsbreite jedes Mal exakt so breit wie das Fenster: Es gab dort
 * noch nie etwas zu scrollen.
 */
.mona-search--overlay .mona-search__body {
	flex: 1 1 auto;
	overflow-y: auto;
	/*
	 * `none`, nicht `contain`.
	 *
	 * `contain` verhindert nur, dass die Geste an die Seite dahinter
	 * weitergereicht wird – das LOKALE Federn im Behälter selbst lässt es
	 * ausdrücklich zu. Im leeren Zustand gibt es hier aber nichts zu
	 * scrollen (gemessen: Inhalt 750px, Fenster 750px), und ein Wischen
	 * über die leere Fläche erzeugte genau dieses Stocken und
	 * Zurückfedern. `none` nimmt beides.
	 *
	 * Auf das normale Scrollen der Trefferliste wirkt es nicht:
	 * overscroll-behavior greift ausschliesslich an der Kante.
	 */
	overscroll-behavior: none;
	/*
	 * Waagrecht gar nicht erst scrollbar.
	 *
	 * Der Rumpf stand auf `auto` und hatte damit eine zweite Achse, die
	 * seitlich mitfederte – gleichzeitig mit der senkrechten. Das ist der
	 * Grund, warum sich das Wischen schief anfühlte und schwer zu
	 * beschreiben war. In vier gemessenen Fällen (leer, viele Treffer,
	 * sehr langer Suchbegriff, kein Treffer) war die Inhaltsbreite jedes
	 * Mal exakt so breit wie das Fenster: Es gab dort noch nie etwas zu
	 * scrollen.
	 */
	overflow-x: hidden;
	/* Veraltet seit iOS 13, auf neueren Geräten wirkungslos. Bleibt für
	 * alte Geräte stehen, auf denen es den Schwung erst ermöglichte. */
	-webkit-overflow-scrolling: touch;
	/*
	 * Gegenstück zum `touch-action: none` des Fensters: Nur hier, im
	 * Rumpf mit der Trefferliste, darf eine senkrechte Wischgeste
	 * überhaupt beginnen. Waagrecht gibt es nichts (overflow-x: hidden),
	 * und Kneif-Zoom mitten im Suchmodus führte ohnehin nur in den
	 * hineingezoomten Zustand, aus dem kein Weg sauber zurückführt.
	 */
	touch-action: pan-y;
}

.mona-search--overlay .mona-search__footer {
	flex: 0 0 auto;
	padding-bottom: env(safe-area-inset-bottom, 0);
}