/* ============================================================
   Search modal — full-width top sheet opened by the header search
   icon. Accessible dialog (focus-trapped in JS), predictive results,
   trending pills, recently-viewed + featured grids. Tokens only.
   ============================================================ */

.lh-search {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
}
.lh-search.is-open {
  visibility: visible;
  pointer-events: auto;
}

.lh-search__backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-dark);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.lh-search.is-open .lh-search__backdrop { opacity: 1; }

.lh-search__dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  box-shadow: var(--shadow-xl);
  transform: translateY(-100%);
  transition: transform var(--duration-base) var(--ease-emphasis);
}
.lh-search.is-open .lh-search__dialog { transform: translateY(0); }

/* ---- Top row: brand logo + close ---- */
.lh-search__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3) var(--space-1);
}
.lh-search__logo { display: inline-flex; }
.lh-search__logo-img { display: block; height: auto; max-height: 34px; width: auto; }

/* ---- Search bar ---- */
.lh-search__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.lh-search__form {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Results are fetched live, so there is no submit button — pad both ends of the pill. */
  padding: 0 var(--space-3) 0 var(--space-4);
  overflow: hidden;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.lh-search__form:focus-within { border-color: var(--color-primary); }
.lh-search__bar-icon { display: inline-flex; color: var(--text-muted); flex-shrink: 0; }
.lh-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--font-body-md);
  color: var(--text-body);
  padding: var(--space-3) 0;
}
.lh-search__input::placeholder { color: var(--text-subtle); }
.lh-search__input:focus { outline: none; box-shadow: none; }
/* native search clear UI — we provide our own button */
.lh-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.lh-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-shrink: 0;
}
.lh-search__clear:hover { color: var(--text-heading); background: var(--color-primary-tint); }
/* Hidden by default (empty field) — JS toggles [hidden] as text is typed.
   Needs an explicit override because the display:inline-flex above otherwise
   defeats the [hidden] attribute's UA display:none. */
.lh-search__clear[hidden] { display: none; }

.lh-search__close { flex-shrink: 0; }

/* ---- Body ---- */
.lh-search__body {
  padding-block: var(--space-6) var(--space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lh-search__sec { margin-bottom: var(--space-8); }
.lh-search__sec:last-child { margin-bottom: 0; }
.lh-search__sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.lh-search__sec-title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--font-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.lh-search__sec-action {
  border: 0;
  background: none;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  cursor: pointer;
}

/* ---- Trending pills ---- */
.lh-search__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lh-search__pill {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition-fast);
}
.lh-search__pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-tint);
}

/* ---- Product grids (featured / recently viewed) ---- */
/* Phones: the tighter card spacing from Theme settings -> Layout (tokens.css --card-gap-*). */
.lh-search__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap-y) var(--card-gap-x);
}
@media (min-width: 768px) {
  .lh-search__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
}

/* ---- Recently viewed (clean row list, not the square card grid) ---- */
.lh-search__recent { display: grid; grid-template-columns: 1fr; gap: var(--space-1); }
@media (min-width: 768px) {
  .lh-search__recent { grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-4); }
}

/* ---- Predictive results ---- */
.lh-search__results { display: grid; gap: var(--space-6); }
.lh-search__results[hidden] { display: none; }

.lh-search__res-group-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--font-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}

.lh-search__res-products { display: grid; gap: var(--space-1); }
.lh-search__res {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-standard);
}
.lh-search__res:hover { background: var(--surface-sunken); }
.lh-search__res-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--lh-img-loader-sm, none), var(--surface-sunken);
}
.lh-search__res-body { min-width: 0; flex: 1; }
.lh-search__res-title {
  margin: 0;
  font-size: var(--font-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 20rem;
}
.lh-search__res-price { font-size: var(--font-body-sm); color: var(--color-primary); font-weight: var(--weight-semibold); }
.lh-search__res-price del { color: var(--text-subtle); font-weight: var(--weight-regular); margin-left: var(--space-2); }

.lh-search__res-terms { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.lh-search__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.lh-search__empty {
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-body-md);
}
.lh-search__empty strong { color: var(--text-heading); }

.lh-search__hint { color: var(--text-subtle); font-size: var(--font-body-sm); }

/* ---- Loading spinner ---- */
.lh-search__bar-icon { display: inline-flex; }
.lh-search__bar-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.lh-search__bar-loader[hidden] { display: none; }

.lh-search__loader-spin {
  animation: lh-search-spin 1s linear infinite;
}

@keyframes lh-search-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lh-search__loader-spin { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-search__dialog,
  .lh-search__backdrop { transition: opacity var(--duration-fast) linear; }
  .lh-search .lh-search__dialog { transform: none; }
  .lh-search:not(.is-open) .lh-search__dialog { display: none; }
}