/* Allis Shop Pro – header live search (LTR first, logical properties for RTL) */
.ct-asp-search { display: block; inline-size: 100%; min-inline-size: 0; }

.asp-hs {
	--asp-hs-bg: var(--theme-form-field-background-color, #fff);
	--asp-hs-text: var(--theme-form-text-initial-color, var(--theme-text-color, #1f2937));
	--asp-hs-border: transparent;
	--asp-hs-btn-bg: var(--theme-palette-color-1, #2872fa);
	--asp-hs-btn-text: #fff;
	--asp-hs-panel-bg: var(--theme-palette-color-8, #fff);
	--asp-hs-panel-text: var(--theme-text-color, #1f2937);
	--asp-hs-accent: var(--theme-palette-color-1, #2872fa);
	position: relative;
	inline-size: var(--asp-hs-width, 100%);
	max-inline-size: var(--asp-hs-maxw, 640px);
	margin-inline: auto;
	box-sizing: border-box;
}
.asp-hs *, .asp-hs *::before, .asp-hs *::after { box-sizing: border-box; }

.asp-hs__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	block-size: var(--asp-hs-height, 46px);
	padding-inline: 16px 6px;
	margin: 0;
	background: var(--asp-hs-bg);
	color: var(--asp-hs-text);
	border: 1px solid var(--asp-hs-border);
	border-radius: var(--asp-hs-radius, 999px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
	transition: box-shadow .2s ease, border-color .2s ease;
}
.asp-hs__form:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--asp-hs-accent) 35%, transparent); }
.asp-hs__lead { display: inline-flex; flex: none; opacity: .65; color: inherit; }
.asp-hs .asp-hs__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	block-size: 100%;
	padding: 0 4px;
	margin: 0;
	border: 0 !important;
	outline: 0;
	box-shadow: none !important;
	background: transparent !important;
	color: inherit;
	font-size: 15px;
	line-height: 1.2;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
.asp-hs .asp-hs__input::placeholder { color: inherit; opacity: .55; }
.asp-hs .asp-hs__input::-webkit-search-cancel-button { display: none; }
.asp-hs__cat {
	flex: none;
	max-inline-size: 150px;
	block-size: calc(100% - 14px);
	border: 0;
	border-inline-end: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	background: transparent;
	color: inherit;
	font-size: 13px;
	padding-inline: 4px 14px;
	border-radius: 0;
	cursor: pointer;
}
.asp-hs__clear {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	block-size: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
	cursor: pointer;
	min-block-size: 0;
}
.asp-hs__clear[hidden] { display: none; }
.asp-hs__spin {
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
	border-top-color: var(--asp-hs-accent);
	border-radius: 50%;
	display: none;
	animation: asp-hs-spin .7s linear infinite;
}
.asp-hs.is-loading .asp-hs__spin { display: block; }
.asp-hs.is-loading .asp-hs__clear { display: none; }
@keyframes asp-hs-spin { to { transform: rotate(360deg); } }
.asp-hs .asp-hs__submit {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: calc(var(--asp-hs-height, 46px) - 12px);
	block-size: calc(var(--asp-hs-height, 46px) - 12px);
	min-block-size: 0;
	padding: 0;
	border: 0;
	border-radius: calc(var(--asp-hs-radius, 999px) - 4px);
	background: var(--asp-hs-btn-bg);
	color: var(--asp-hs-btn-text);
	cursor: pointer;
}
.asp-hs .asp-hs__submit:hover { filter: brightness(1.08); }

/* Dropdown */
.asp-hs__panel {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: calc(100% + 8px);
	inline-size: var(--asp-hs-dd-width, 100%);
	max-inline-size: 100vw;
	max-block-size: min(70vh, 560px);
	overflow: auto;
	z-index: 9999;
	padding: 6px;
	background: var(--asp-hs-panel-bg);
	color: var(--asp-hs-panel-text);
	border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
	border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .28);
	text-align: start;
	animation: asp-hs-in .16s ease-out;
	scrollbar-width: thin;
}
.asp-hs__panel[hidden] { display: none; }
@keyframes asp-hs-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.asp-hs__head {
	padding: 10px 12px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .6;
}
.asp-hs__row, .asp-hs__cat-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
}
.asp-hs__row.is-active, .asp-hs__cat-item.is-active, .asp-hs__row:hover, .asp-hs__cat-item:hover {
	background: color-mix(in srgb, var(--asp-hs-accent) 10%, transparent);
	color: inherit;
}
.asp-hs__thumb {
	flex: none;
	inline-size: var(--asp-hs-thumb, 48px);
	block-size: var(--asp-hs-thumb, 48px);
	border-radius: 8px;
	overflow: hidden;
	background: color-mix(in srgb, currentColor 8%, transparent);
}
.asp-hs__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.asp-hs__body { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 3px; }
.asp-hs__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.asp-hs__title mark, .asp-hs__cat-item mark {
	background: color-mix(in srgb, var(--asp-hs-accent) 22%, transparent);
	color: inherit;
	padding: 0 1px;
	border-radius: 3px;
}
.asp-hs__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .7; }
.asp-hs__stars { position: relative; inline-size: 66px; block-size: 12px; background: color-mix(in srgb, currentColor 25%, transparent); -webkit-mask: linear-gradient(90deg, #000 0 0); display: inline-block; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
.asp-hs__stars span { position: absolute; inset-block: 0; inset-inline-start: 0; background: #f5a623; }
.asp-hs__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 13px; font-weight: 600; text-align: end; }
.asp-hs__price del { opacity: .55; font-weight: 400; margin-inline-end: 4px; }
.asp-hs__price ins { text-decoration: none; }
.asp-hs__off {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--asp-hs-accent);
	color: #fff;
}
.asp-hs__cat-item { font-size: 14px; }
.asp-hs__cat-item svg { flex: none; opacity: .6; }
.asp-hs__cat-item span { flex: 1 1 auto; min-inline-size: 0; }
.asp-hs__cat-item small { opacity: .55; }
.asp-hs__all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 6px 4px 2px;
	padding: 11px 14px;
	border-radius: 10px;
	background: var(--asp-hs-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.asp-hs__all:hover { filter: brightness(1.08); color: #fff; }
[dir="rtl"] .asp-hs__arrow { display: inline-block; transform: scaleX(-1); }
.asp-hs__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 26px 16px;
	font-size: 14px;
	opacity: .8;
	text-align: center;
}
.asp-hs__retry {
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	min-block-size: 0;
}
.asp-hs__line { display: block; block-size: 12px; border-radius: 6px; inline-size: 80%; }
.asp-hs__line--s { inline-size: 40%; }
.asp-hs__sk .asp-hs__row { pointer-events: none; }
.asp-hs__shim {
	background: linear-gradient(90deg, color-mix(in srgb, currentColor 8%, transparent) 25%, color-mix(in srgb, currentColor 16%, transparent) 50%, color-mix(in srgb, currentColor 8%, transparent) 75%);
	background-size: 200% 100%;
	animation: asp-hs-shim 1.2s linear infinite;
}
@keyframes asp-hs-shim { to { background-position: -200% 0; } }

/* Mobile: full-width sheet under the bar */
@media (max-width: 689px) {
	.asp-hs__panel {
		position: fixed;
		inset-inline: 8px;
		inline-size: auto;
		max-block-size: calc(100vh - 100px);
		max-block-size: calc(100dvh - 100px);
	}
	.asp-hs__cat { display: none; }
	.asp-hs .asp-hs__input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.asp-hs__panel, .asp-hs__spin, .asp-hs__shim { animation: none; }
}