/* =========================================================================
   DI Live Search. Colours are variables – set them on .di-ls (or a parent)
   to match any site. Defaults: dark.
   ========================================================================= */

.di-ls {
	--di-bg: #161616;
	--di-field: #1c1c1c;
	--di-line: #2e2e2e;
	--di-ink: #f4f3f3;
	--di-muted: #8f8f8f;
	--di-accent: var(--e-global-color-primary, #e83324);
	--di-hover: #222;
	--di-radius: 4px;
	--di-well: #f2f2f0;
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	font-family: inherit;
}
.di-ls * { box-sizing: border-box; }

.di-ls .di-ls__icon { position: absolute; left: 14px; z-index: 1; color: var(--di-muted); pointer-events: none; }
.di-ls input.di-ls__input,
.di-ls input.di-ls__input:focus {
	width: 100%;
	height: 46px;
	min-height: 0;
	margin: 0;
	padding: 0 84px 0 44px !important;
	border: 1.5px solid var(--di-line) !important;
	border-radius: var(--di-radius) !important;
	background: var(--di-field) !important;
	color: var(--di-ink) !important;
	font: inherit;
	font-size: 15px;
	box-shadow: none !important;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s;
}
.di-ls input.di-ls__input::placeholder { color: var(--di-muted); opacity: 1; }
.di-ls input.di-ls__input::-webkit-search-cancel-button { display: none; }
.di-ls.is-focus input.di-ls__input { border-color: var(--di-accent) !important; }

.di-ls button.di-ls__clear,
.di-ls button.di-ls__go {
	position: absolute;
	display: grid;
	place-items: center;
	min-height: 0;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 3px !important;
	background: transparent !important;
	color: var(--di-muted) !important;
	cursor: pointer;
	box-shadow: none !important;
}
.di-ls button.di-ls__clear { right: 46px; width: 28px; height: 28px; font-size: 22px; line-height: 1; }
.di-ls button.di-ls__clear[hidden] { display: none; }
.di-ls button.di-ls__go { right: 5px; width: 36px; height: 36px; background: var(--di-accent) !important; color: #fff !important; }
.di-ls button.di-ls__go:hover { filter: brightness(.9); }
.di-ls.is-loading button.di-ls__go svg { animation: di-ls-pulse .7s ease-in-out infinite alternate; }
@keyframes di-ls-pulse { to { opacity: .35; } }

/* ---------- Panel ---------- */
.di-ls__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 9999;
	max-height: min(70vh, 640px);
	overflow-y: auto;
	padding: 10px;
	border: 1px solid var(--di-line);
	border-radius: var(--di-radius);
	background: var(--di-bg);
	color: var(--di-ink);
	box-shadow: 0 24px 48px rgba(0, 0, 0, .55);
	overscroll-behavior: contain;
}
.di-ls__panel[hidden] { display: none; }
.di-ls__sec + .di-ls__sec { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--di-line); }
.di-ls__h { padding: 4px 8px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--di-muted); }
.di-ls__h small { margin-left: 4px; font-weight: 600; letter-spacing: 0; color: var(--di-accent); }

.di-ls__chips, .di-ls__terms { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; }
.di-ls button.di-ls__chip, .di-ls a.di-ls__term {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	margin: 0;
	padding: 0 12px !important;
	border: 1px solid var(--di-line) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--di-ink) !important;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: none !important;
}
.di-ls a.di-ls__term small { font-weight: 400; color: var(--di-muted); }
.di-ls button.di-ls__chip:hover, .di-ls a.di-ls__term:hover,
.di-ls .di-ls__chip.is-active, .di-ls .di-ls__term.is-active { border-color: var(--di-accent) !important; }

.di-ls__items { margin: 0; padding: 0; list-style: none; }
.di-ls a.di-ls__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: var(--di-radius);
	color: var(--di-ink);
	text-decoration: none;
}
.di-ls a.di-ls__item:hover, .di-ls a.di-ls__item.is-active { background: var(--di-hover); }
.di-ls__img { flex: none; width: 54px; height: 54px; overflow: hidden; border-radius: 3px; background: var(--di-well); }
.di-ls .di-ls__img img { width: 100%; height: 100%; margin: 0; object-fit: contain; mix-blend-mode: multiply; }
.di-ls a.di-ls__item.is-out .di-ls__img img { opacity: .5; }
.di-ls__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.di-ls__sub { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--di-accent); }
.di-ls__title { overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.di-ls__title mark, .di-ls a.di-ls__term mark { padding: 0; background: none; color: var(--di-accent); }
.di-ls__price { font-size: 13.5px; color: var(--di-muted); }
.di-ls__price del { opacity: .7; }
.di-ls__price ins { text-decoration: none; color: var(--di-ink); }
.di-ls__price em { margin-left: 6px; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.di-ls__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.di-ls a.di-ls__all {
	display: block;
	margin-top: 8px;
	padding: 12px;
	border-radius: var(--di-radius);
	background: var(--di-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
.di-ls a.di-ls__all:hover, .di-ls a.di-ls__all.is-active { filter: brightness(.92); }
.di-ls__empty { padding: 14px 8px; font-size: 14px; color: var(--di-muted); }