/**
 * Mersal Assistant — smart product search (shortcode).
 */
.mersal-search-root, .mersal-search-root * { box-sizing: border-box; }
.mersal-search-root {
	--ms-accent: #5B5BD6;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	max-width: 640px; margin: 0 auto;
	position: relative; /* anchor the floating results dropdown */
}
/* When it replaces a theme's search field, fill the slot the field occupied
   instead of the centered 640px shortcode block. */
.mersal-search-root--embed { max-width: 100%; margin: 0; }
.ms-field { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #E2E1EA; box-shadow: 0 2px 10px rgba(22,20,31,.05); }
.ms-shape-pill .ms-field { border-radius: 999px; }
.ms-shape-rounded .ms-field { border-radius: 12px; }
.ms-shape-square .ms-field { border-radius: 6px; }
.ms-size-compact .ms-field { padding: 9px 14px; }
.ms-size-medium .ms-field { padding: 12px 16px; }
.ms-size-large .ms-field { padding: 15px 20px; }
/* Hard reset: themes (e.g. Twenty Twenty-Five) style bare inputs with their own
   padding/border/min-height, which stacks on .ms-field's padding and makes the
   field twice as tall as designed. */
.ms-field input,
.ms-field input[type='search'] { flex: 1; border: none; outline: none; background: none; font-size: 14px; font-family: inherit; color: #2A2838; padding: 0; margin: 0; height: auto; min-height: 0; line-height: 1.5; border-radius: 0; box-shadow: none; -webkit-appearance: none; appearance: none; }
.ms-field input:focus { border: none; outline: none; box-shadow: none; background: none; }
.ms-badge { background: #EDEBFB; color: var(--ms-accent); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; }
/* Results float over the page as a dropdown so they never push content down. */
.ms-results {
	position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; z-index: 1000;
	display: flex; flex-direction: column; gap: 8px;
	max-height: min(70vh, 520px); overflow-y: auto;
	background: #fff; border: 1px solid #ECECF2; border-radius: 14px;
	box-shadow: 0 12px 34px rgba(22,20,31,.14); padding: 8px;
}
.ms-status {
	position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; z-index: 1000;
	font-size: 12.5px; color: #9794A8; text-align: center;
	background: #fff; border: 1px solid #ECECF2; border-radius: 14px;
	box-shadow: 0 12px 34px rgba(22,20,31,.14); padding: 16px 14px;
}
/* Only visible while the box is focused/active and actually has something to show. */
.mersal-search-root:not(.ms-open) .ms-results,
.mersal-search-root:not(.ms-open) .ms-status { display: none; }
.ms-results:empty, .ms-status:empty { display: none; }
.ms-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #ECECF2; border-radius: 12px; padding: 10px; text-decoration: none; color: inherit; transition: border-color .15s; }
.ms-card:hover { border-color: var(--ms-accent); }
.ms-card__img { width: 44px; height: 44px; border-radius: 8px; background: #EDE9FE; flex-shrink: 0; object-fit: cover; }
.ms-card__body { flex: 1; min-width: 0; }
.ms-card__title { font-size: 13px; font-weight: 700; color: #2A2838; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-card__desc { font-size: 11.5px; color: #6E6A86; line-height: 1.4; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-card__reason { font-size: 11px; color: #1F9D6B; font-weight: 600; }
.ms-card__price { font-size: 14px; font-weight: 800; color: #2A2838; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.ms-card__was { font-size: 11px; font-weight: 600; color: #9794A8; text-decoration: line-through; }
.ms-card__now { color: #2A2838; }
.ms-cart { background: var(--ms-accent); color: #fff; border: none; border-radius: 8px; padding: 7px 11px; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; flex-shrink: 0; }
.ms-oos { font-size: 11.5px; font-weight: 700; color: #C0392B; background: #FDECEA; border-radius: 8px; padding: 6px 10px; flex-shrink: 0; white-space: nowrap; }
.ms-spinner { width: 22px; height: 22px; border: 3px solid #ECECF2; border-top-color: var(--ms-accent); border-radius: 50%; margin: 14px auto; animation: msSpin .8s linear infinite; }
@keyframes msSpin { to { transform: rotate(360deg); } }

/* Shown above near-miss results when nothing matched the whole query. */
.mersal-search-root .ms-notice {
	display: flex; flex-direction: column; gap: 2px;
	padding: 11px 14px; margin-bottom: 8px;
	background: #FFF8EC; border: 1px solid #F2E2C4; border-radius: 12px;
	font-size: 13px; line-height: 1.5;
}
.mersal-search-root .ms-notice strong { color: #8A5A00; font-weight: 700; }
.mersal-search-root .ms-notice span { color: #6A6880; font-size: 12.5px; }

/* "Did you mean …" correction row. */
.mersal-search-root .ms-notice--suggest { flex-direction: row; align-items: baseline; gap: 4px; flex-wrap: wrap; background: #EEF0FE; border-color: #D5D8F7; }
.mersal-search-root .ms-notice--suggest span { color: #4A4A6A; }
.mersal-search-root .ms-suggest { color: var(--ms-accent); font-weight: 800; text-decoration: none; cursor: pointer; }
.mersal-search-root .ms-suggest:hover { text-decoration: underline; }

/* Section heading for "Popular products" / "You may also like". */
.mersal-search-root .ms-sec-head {
	font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
	color: #9794A8; padding: 8px 6px 4px; margin-top: 4px;
	border-top: 1px solid #F0F0F5;
}
.mersal-search-root .ms-results > .ms-sec-head:first-child { border-top: none; margin-top: 0; }
/* "Showing results for …" — the AI's interpreted query. */
.mersal-search-root .ms-notice--ai { flex-direction: row; align-items: baseline; gap: 4px; flex-wrap: wrap; background: #EAF7F0; border-color: #C6E8D5; }
.mersal-search-root .ms-notice--ai span { color: #4A6A58; }
.mersal-search-root .ms-notice--ai strong { color: #1F9D6B; font-weight: 800; }