/* ==========================================================================
   LH Live Search - našeptávač produktů laděný na téma kytky-svatby.
   Používá designové tokeny tématu (tokens.css je sitewide), aby pole a
   dropdown vizuálně splynuly se zbytkem webu (surface, --c-border, --radius,
   --shadow-2, --c-primary, fonty Marcellus/Mulish).
   ========================================================================== */

/* --- Formulář + pole --- */
.lh-ls {
  position: relative;
  margin: 0;
}

.lh-ls__field {
  display: flex;
  align-items: center;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: border-color var(--dur, 0.25s) var(--ease, ease);
}
/* Viditelný focus - kroužek na celém poli. `:focus-within` (široká podpora,
   ne `:has()`), aby klávesnicový fokus byl vidět vždy (WCAG 2.2 AA). */
.lh-ls__field:focus-within {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-color: var(--c-primary);
}

.lh-ls__submit {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  transition: color var(--dur, 0.25s) var(--ease, ease);
}
.lh-ls__submit:hover { color: var(--c-primary); }

.lh-ls__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-text);
  padding: 0.6rem 0.85rem 0.6rem 0;
}
.lh-ls__input:focus,
.lh-ls__input:focus-visible { outline: none; }
.lh-ls__input::placeholder { color: var(--c-muted); }
/* Skrýt nativní "x" u type=search, ať pole ladí s tématem. */
.lh-ls__input::-webkit-search-decoration,
.lh-ls__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- Dropdown našeptávače --- */
.lh-ls__dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 0.35rem;
}
.lh-ls__dropdown[hidden] { display: none; }

/* Scrolluje jen seznam návrhů - patička „Zobrazit vše" tak zůstává pod ním
   pevně viditelná a nikdy nepřekrývá poslední kartu (dřív sticky uvnitř
   scrollu, což poslední kartu překrývalo). */
.lh-ls__list {
  max-height: min(70vh, 24rem);
  overflow-y: auto;
}

.lh-ls.is-loading .lh-ls__field,
.lh-ls__dropdown.is-loading { cursor: progress; }

.lh-ls__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-xs);
  color: var(--c-text);
  text-decoration: none;
}
.lh-ls__item:hover,
.lh-ls__item.is-active {
  background: var(--c-plum-wash);
  text-decoration: none;
}

.lh-ls__thumb {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--c-surface-2);
}
.lh-ls__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lh-ls__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.lh-ls__name {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  line-height: 1.2;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lh-ls__sub {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.8rem;
  min-width: 0;
}
.lh-ls__cat {
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lh-ls__price {
  color: var(--c-primary-ink);
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}
.lh-ls__price del { color: var(--c-muted); font-weight: 400; margin-right: 0.3rem; }
.lh-ls__price ins { text-decoration: none; }

/* Pevná patička "Zobrazit vše" - žije pod scrollovaným seznamem (ne uvnitř
   něj), takže je vždy vidět a nepřekrývá poslední kartu. */
.lh-ls__more {
  display: block;
  margin-top: 0.35rem;
  padding: 0.6rem;
  text-align: center;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  color: var(--c-primary-ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.lh-ls__more:hover,
.lh-ls__more.is-active {
  background: var(--c-plum-wash);
  text-decoration: none;
}

/* Status region (role=status, aria-live). Defaultně jen pro čtečku (oznámení
   počtu nalezených návrhů), s modifikátorem --visible i vizuálně (prázdný stav)
   - prázdná hláška tak NENÍ neplatná `option` uvnitř listboxu. */
.lh-ls__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.lh-ls__status--visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 1.1rem 1rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  text-align: center;
  color: var(--c-muted);
  font-size: 0.9rem;
}

/* --- Varianta: toolbar obchodu (prostřední prvek .shop-toolbar) --- */
.lh-ls--shop {
  flex: 1 1 300px;
  max-width: 360px;
}

/* --- Varianta: lupa + panel v headeru --- */
.lh-ls-header {
  position: relative;
  display: inline-flex;
}
.lh-ls-panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 90;
  width: min(360px, calc(100vw - 2rem));
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 0.6rem;
}
.lh-ls-panel[hidden] { display: none; }
.lh-ls-panel .lh-ls__dropdown {
  /* uvnitř úzkého panelu držíme dropdown na jeho šířku */
  box-shadow: none;
  border: 0;
  padding: 0.35rem 0 0;
  top: calc(100% + 0.3rem);
}

/* Na úzkých displejích panel roztáhneme přes celou šířku pod headerem. */
@media (max-width: 560px) {
  .lh-ls-panel {
    position: fixed;
    top: 4.6rem;
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}