/* MIBIOTA Live Search */
.mibls,
.mibls-panel--portal {
	--mibls-accent: #2ea68f;        /* Mibiota mid green */
	--mibls-accent-dark: #1c6455;   /* Mibiota dark green */
	--mibls-accent-soft: #6dc1b0;   /* Mibiota light green */
	--mibls-accent-light: rgba(109, 193, 176, 0.16);
	--mibls-text: #1e2a2b;
	--mibls-muted: #6b7677;
	--mibls-border: #d9e1e2;
	--mibls-bg: #fff;
	--mibls-field-bg: #fff;
	--mibls-radius: 14px;
	--mibls-height: 52px;
	--mibls-font: 16px;
	font-size: var(--mibls-font);
	color: var(--mibls-text);
}
.mibls { position: relative; width: 100%; z-index: 20; }
.mibls.is-open { z-index: 1010; }
.mibls--large { --mibls-height: 62px; --mibls-font: 18px; --mibls-radius: 18px; }
.mibls--filled { --mibls-field-bg: #f3f6f6; --mibls-border: transparent; }
.mibls--pill  { --mibls-radius: 999px; }

/* Field ------------------------------------------------------------- */
.mibls-form {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--mibls-height);
	background: var(--mibls-field-bg);
	border: 1.5px solid var(--mibls-border);
	border-radius: var(--mibls-radius);
	transition: box-shadow .18s ease, border-color .18s ease;
	margin: 0;
}
.mibls-form:focus-within {
	border-color: var(--mibls-accent);
	box-shadow: 0 0 0 4px var(--mibls-accent-light), 0 10px 30px rgba(0, 0, 0, 0.06);
}
.mibls-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--mibls-height) - 4px);
	color: var(--mibls-accent);
	font-size: 1.1em;
	pointer-events: none;
}
.mibls-input,
.mibls-input:focus {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 8px 0 0;
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	font-size: var(--mibls-font);
	color: var(--mibls-text);
	-webkit-appearance: none;
	appearance: none;
}
.mibls-input::placeholder { color: var(--mibls-muted); opacity: 1; }
.mibls-input::-webkit-search-cancel-button,
.mibls-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.mibls-clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--mibls-muted);
	font-size: 1em;
	cursor: pointer;
	line-height: 1;
}
.mibls-clear:hover { background: var(--mibls-accent-light); color: var(--mibls-accent); }
.mibls-clear[hidden] { display: none; }

.mibls-submit {
	flex: 0 0 auto;
	height: calc(var(--mibls-height) - 12px);
	margin: 0 5px 0 0;
	padding: 0 18px;
	border: 0;
	border-radius: calc(var(--mibls-radius) - 5px);
	background: var(--mibls-accent);
	color: #fff;
	font: inherit;
	font-size: calc(var(--mibls-font) - 1px);
	font-weight: 600;
	cursor: pointer;
	transition: filter .15s ease;
	line-height: 1;
}
.mibls-submit:hover { background: var(--mibls-accent-dark); }
.mibls--pill .mibls-submit { border-radius: 999px; }

.mibls-spinner {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0 8px;
	border: 2px solid var(--mibls-accent-light);
	border-top-color: var(--mibls-accent);
	border-radius: 50%;
	animation: mibls-spin .7s linear infinite;
}
.mibls-spinner[hidden] { display: none; }
@keyframes mibls-spin { to { transform: rotate(360deg); } }

/* Panel ------------------------------------------------------------- */
.mibls-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: min(70vh, 640px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--mibls-bg);
	border: 1px solid var(--mibls-border);
	border-radius: var(--mibls-radius);
	box-shadow: 0 18px 50px rgba(20, 40, 42, 0.16);
	padding: 6px;
	text-align: left;
	animation: mibls-in .14s ease-out;
}
.mibls--pill .mibls-panel, .mibls-panel.mibls--pill { border-radius: 22px; }
.mibls-panel[hidden] { display: none; }
@keyframes mibls-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.mibls-group + .mibls-group { border-top: 1px solid var(--mibls-border); margin-top: 4px; padding-top: 4px; }
.mibls-group-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mibls-muted);
}
.mibls-group-title i { color: var(--mibls-accent); font-size: 13px; }

/* Items ------------------------------------------------------------- */
.mibls-panel--up { top: auto; bottom: calc(100% + 8px); box-shadow: 0 -18px 50px rgba(20, 40, 42, 0.16); animation-name: mibls-in-up; }
.mibls-panel--portal { position: fixed; top: auto; bottom: auto; left: auto; right: auto; z-index: 1300; font-size: 16px; }
.mibls-panel--portal.mibls-panel--up { bottom: auto; }
@keyframes mibls-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.mibls-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 7px 12px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: background .12s ease;
}
.mibls-item:hover,
.mibls-item.is-active,
.mibls-all:hover,
.mibls-all.is-active,
.mibls-cta.is-active { background: var(--mibls-accent-light); color: inherit; text-decoration: none; }
.mibls-item.is-outofstock .mibls-thumb img { opacity: .55; }

.mibls-thumb {
	color: var(--mibls-accent-dark);
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #f3f6f6;
	overflow: hidden;
	color: var(--mibls-accent);
	font-size: 22px;
}
.mibls-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mibls-item--post .mibls-thumb { border-radius: 10px; }

.mibls-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mibls-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mibls-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mibls-excerpt {
	font-size: 13px;
	line-height: 1.4;
	color: var(--mibls-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mibls-price {
	flex: 0 0 auto;
	color: var(--mibls-accent-dark);
	display: block;
	min-width: 84px;
	padding-left: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	text-align: right;
	white-space: nowrap;
}
.mibls-price p { margin: 0; }
.mibls-price del { display: block; color: var(--mibls-muted); font-weight: 400; font-size: 12px; text-decoration: line-through; }
.mibls-price ins { text-decoration: none; }
.mibls-stock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--mibls-accent); line-height: 1.3; }
.mibls-stock--outofstock { color: #c0392b; }
.mibls-panel mark { background: transparent; color: var(--mibls-accent-dark); font-weight: 700; padding: 0; }
.mibls-excerpt mark { color: var(--mibls-text); }

.mibls-type {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mibls-accent-light);
	color: var(--mibls-accent);
	font-size: 13px;
}

.mibls-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 2px 12px 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mibls-accent);
	text-decoration: none;
}
.mibls-more:hover { text-decoration: underline; color: var(--mibls-accent); }

.mibls-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 6px;
	padding: 12px;
	border-top: 1px solid var(--mibls-border);
	border-radius: 0 0 10px 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mibls-accent);
	text-decoration: none;
}

/* Empty / error ----------------------------------------------------- */
.mibls-empty { padding: 26px 18px 22px; text-align: center; }
.mibls-empty > i { font-size: 30px; color: var(--mibls-accent); margin-bottom: 8px; }
.mibls-empty--error > i { color: #d9534f; }
.mibls-empty-text { margin: 0; font-size: 15px; font-weight: 600; color: var(--mibls-text); }
.mibls-empty-hint { margin: 6px 0 0; font-size: 13px; color: var(--mibls-muted); }
.mibls-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--mibls-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.mibls-cta:hover, .mibls-cta.is-active { color: #fff; background: var(--mibls-accent-dark); text-decoration: none; }

.mibls-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mibls-live[hidden] { display: none; }

/* Mobile ------------------------------------------------------------ */
/* Icon mode (navbar): icon button, field slides out to the left on click ---- */
.mibls--icon { width: auto; display: inline-block; vertical-align: middle; line-height: 0; }
.mibls-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mibls-accent-light);
	color: var(--mibls-accent);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.mibls-toggle:hover, .mibls-toggle:focus-visible { background: var(--mibls-accent); color: #fff; outline: 0; }
.mibls--toggle-plain .mibls-toggle { background: transparent; color: var(--mibls-accent-dark); }
.mibls--toggle-plain .mibls-toggle:hover, .mibls--toggle-plain .mibls-toggle:focus-visible { background: var(--mibls-accent-light); color: var(--mibls-accent); }
.mibls--icon .mibls-form { display: none; }
.mibls--icon.is-expanded { z-index: 1100; }
.mibls--icon.is-expanded .mibls-form {
	display: flex;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	max-width: calc(100vw - 24px);
	background: #fff;
	border-color: var(--mibls-accent);
	box-shadow: 0 0 0 4px var(--mibls-accent-light), 0 14px 40px rgba(20, 40, 42, 0.22);
	z-index: 1100;
	line-height: normal;
	animation: mibls-expand .18s ease-out;
	transform-origin: right center;
}
.mibls--icon.is-expanded .mibls-form:focus-within { box-shadow: 0 0 0 4px var(--mibls-accent-light), 0 14px 40px rgba(20, 40, 42, 0.22); }
@keyframes mibls-expand { from { opacity: 0; transform: translateY(-50%) scaleX(.6); } to { opacity: 1; transform: translateY(-50%) scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .mibls--icon.is-expanded .mibls-form { animation: none; } }

/* Narrow containers (offcanvas, sidebars) */
.mibls--narrow .mibls-submit { display: none; }

/* Compact rows (narrow panel or forced) */
.mibls--compact .mibls-item { gap: 10px; padding: 6px 8px; }
.mibls--compact .mibls-thumb { flex-basis: 40px; width: 40px; height: 40px; font-size: 17px; border-radius: 8px; }
.mibls--compact .mibls-title { font-size: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mibls--compact .mibls-excerpt { -webkit-line-clamp: 1; font-size: 12px; }
.mibls--compact .mibls-price,
.mibls--compact .mibls-type { display: none; }
.mibls--compact .mibls-stock { font-size: 11px; }
.mibls--compact .mibls-group-title { padding: 8px 8px 4px; font-size: 11px; }
.mibls--compact .mibls-more { margin: 0 8px 6px; }
.mibls--compact.mibls-panel { padding: 4px; }

@media (max-width: 639px) {
	.mibls { --mibls-height: 48px; --mibls-font: 16px; }
	.mibls--large { --mibls-height: 54px; }
	.mibls-submit { display: none; }
	.mibls-panel { max-height: 65vh; padding: 4px; }
	.mibls-thumb { flex-basis: 46px; width: 46px; height: 46px; font-size: 18px; }
	.mibls-type { display: none; }
	.mibls-price { min-width: 0; font-size: 14px; }
	.mibls-item { gap: 10px; padding: 7px 10px; }
	.mibls-title { white-space: normal; }
	.mibls-excerpt { -webkit-line-clamp: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mibls-panel { animation: none; }
	.mibls-spinner { animation-duration: 1.5s; }
}