/* ==========================================================================
   Este 2.0 — Live search (podpowiedzi produktów)
   Zadanie 06 audytu 2026-09-20. Tokeny z assets/css/este.css (--paper, --pearl, --line,
   --muted, --ink, --t400, --f-body, --f-display, --r). Ładowany po este-wp.css.
   Jeden spójny wiersz: miniatura, nazwa, marka · format, dostępność, cena (tylko uprawnieni).
   ========================================================================== */

.live-search-wrapper { position: relative; width: 100%; min-width: 0; }

.live-search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 1000;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: 0 12px 32px rgba(20, 24, 26, .12);
	max-height: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.live-search-results[hidden] { display: none; }
.live-search-results__inner { padding: 4px; }

/* Stany: ładowanie, brak wyników, błąd — rozróżnialne wizualnie i dla czytnika (aria-live w kontenerze). */
.live-search-results__message {
	margin: 0;
	padding: 14px 12px;
	font: 400 14px/1.45 var(--f-body);
	color: var(--muted);
}
.live-search-results__message--loading { color: var(--muted); }
.live-search-results__message--loading::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--t400); vertical-align: -2px; animation: este-ls-spin .8s linear infinite; }
.live-search-results__message--empty { color: var(--ink); }
.live-search-results__message--empty small { display: block; margin-top: 4px; color: var(--muted); }
.live-search-results__message--error { color: #8a2a1e; }
@keyframes este-ls-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .live-search-results__message--loading::before { animation: none; } }

.live-search-results__list { list-style: none; margin: 0; padding: 0; }
.live-search-results__item { list-style: none; margin: 0; padding: 0; }
.live-search-results__item + .live-search-results__item { border-top: 1px solid var(--line); }

.live-search-results__link {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	gap: 6px 12px;
	align-items: center;
	min-height: 56px;
	padding: 8px 10px;
	color: var(--ink);
	text-decoration: none;
	border-radius: calc(var(--r) - 2px);
}
.live-search-results__link:hover,
.live-search-results__link:focus-visible,
.live-search-results__item.is-active .live-search-results__link { background: var(--pearl); outline: none; }
.live-search-results__item.is-active .live-search-results__link { box-shadow: inset 0 0 0 2px var(--t400); }

.live-search-results__thumb {
	grid-row: span 2;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	background: var(--pearl);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.live-search-results__thumb img { width: 48px; height: 48px; object-fit: contain; mix-blend-mode: multiply; display: block; }

.live-search-results__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-search-results__title {
	font: 400 15px/1.3 var(--f-display);
	color: var(--ink);
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.live-search-results__brand { font: 400 13px/1.35 var(--f-body); color: var(--muted); overflow-wrap: anywhere; }
.live-search-results__brand b { font-weight: 400; color: var(--graphite); }

.live-search-results__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; }
.live-search-results__price { font: 500 15px var(--f-display); color: var(--ink); font-feature-settings: "tnum" 1; }
.live-search-results__stock { font: 400 12px/1.3 var(--f-body); color: var(--muted); }
.live-search-results__stock--instock { color: #2e6b45; }
.live-search-results__stock--backorder { color: #8a5a12; }
.live-search-results__stock--outofstock { color: var(--muted); }

.live-search-results__view-all {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 4px 4px 0;
	padding: 8px 12px;
	font: 400 14px/1.3 var(--f-body);
	color: var(--t400);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-align: center;
	border-top: 1px solid var(--line);
	border-radius: 0;
	white-space: normal;
}
.live-search-results__view-all:hover,
.live-search-results__view-all:focus-visible,
.live-search-results__view-all.is-active { background: var(--pearl); outline: none; }

.live-search-results__close {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 0;
	border-top: 1px solid var(--line);
	background: none;
	font: 400 14px var(--f-body);
	color: var(--muted);
	cursor: pointer;
}
.live-search-results__close:hover, .live-search-results__close:focus-visible { color: var(--ink); background: var(--pearl); outline: none; }
@media (min-width: 769px) { .live-search-results__close { display: none; } }

/* Szeroki ekran: panel szerszy niż pole i wyśrodkowany pod nim. */
@media (min-width: 1025px) {
	.live-search-results { left: 50%; right: auto; width: min(640px, calc(100vw - 48px)); transform: translateX(-50%); }
}

/* Telefon: panel nie może być odcięty przez klawiaturę — mniejsza wysokość, przewijanie w środku. */
@media (max-width: 768px) {
	.live-search-results { max-height: min(52vh, 420px); }
	.live-search-results__link { grid-template-columns: 44px minmax(0, 1fr); }
	.live-search-results__thumb, .live-search-results__thumb img { width: 44px; height: 44px; }
	.live-search-results__side { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: baseline; white-space: normal; text-align: left; }
}