/* Live header search — clear button + grouped results dropdown */

.kk-header-search.kk-ls-form { position: relative; }

.kk-ls__clear {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-right: -6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(31, 26, 20, .08);
	color: var(--kk-text-2, #555);
	cursor: pointer;
	transition: background .15s, color .15s;
}
.kk-ls__clear:hover,
.kk-ls__clear:focus-visible { background: var(--kk-brown, #4A3A2A); color: #fff; outline: none; }
.kk-ls-form--filled .kk-ls__clear { display: inline-flex; }
.kk-ls-form--loading > svg { animation: kk-ls-pulse .8s ease-in-out infinite alternate; }
@keyframes kk-ls-pulse { from { opacity: 1; } to { opacity: .35; } }

.kk-ls {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1000;
	width: min(440px, calc(100vw - 32px));
	max-height: min(70vh, 620px);
	overflow-y: auto;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--kk-line, #EBE9E5);
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(31, 26, 20, .16);
	color: var(--kk-text, #2d2d2d);
	text-align: left;
}
.kk-ls[hidden] { display: none; }

.kk-ls__group + .kk-ls__group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--kk-line, #EBE9E5); }
.kk-ls__group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px 4px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--kk-gold-deep, #A8883E);
}
.kk-ls__group-head em { font-style: normal; color: var(--kk-text-3, #999); margin-left: 2px; }
.kk-ls__group-head a { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--kk-text-2, #555); text-decoration: underline; text-underline-offset: 2px; }
.kk-ls ul { list-style: none; margin: 0; padding: 0; }

.kk-ls__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 10px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
}
.kk-ls__item:hover,
.kk-ls__item.is-active { background: var(--kk-surface, #F6F5F2); }
.kk-ls__thumb {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 4px;
	border-radius: 9px;
	background: #fff;
	border: 1px solid var(--kk-line, #EBE9E5);
	overflow: hidden;
}
.kk-ls__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kk-ls__thumb--page { color: var(--kk-text-3, #999); background: var(--kk-surface, #F6F5F2); border-color: transparent; }
.kk-ls__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kk-ls__title { font-size: 13.5px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-ls__title mark { background: none; color: inherit; font-weight: 700; }
.kk-ls__meta { font-size: 11.5px; color: var(--kk-text-3, #999); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-ls__price { flex: none; font-size: 13px; font-weight: 600; color: var(--kk-loyalty-accent, #2e7d32); font-variant-numeric: tabular-nums; }

.kk-ls__all {
	display: block;
	margin-top: 6px;
	padding: 11px 10px;
	border-top: 1px solid var(--kk-line, #EBE9E5);
	font-size: 13px;
	font-weight: 600;
	color: var(--kk-brown, #4A3A2A);
	text-align: center;
	text-decoration: none;
	border-radius: 0 0 10px 10px;
}
.kk-ls__all:hover,
.kk-ls__all.is-active { background: var(--kk-surface, #F6F5F2); }
.kk-ls__empty { padding: 18px 12px; font-size: 13px; color: var(--kk-text-2, #555); text-align: center; }

/* mobile menu copy: dropdown flows under the box at full width */
.kk-header-search--mobile .kk-ls { left: 0; right: 0; width: auto; }