/* Header live search — shop_design §41 / ERR-97 / ERR-98 / ERR-103 */

.site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) max-content;
  align-items: center;
  gap: var(--sp-3);
}

.site-header__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  min-width: 0;
  flex-shrink: 0;
}

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

.header-search__form {
  position: relative;
  display: flex;
  align-items: center;
}

.header-search__icon {
  position: absolute;
  left: 0.9rem;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--color-muted);
  pointer-events: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.header-search__form:focus-within .header-search__icon {
  color: var(--btn-primary-bg, var(--color-primary));
}

.header-search__input[type="search"] {
  width: 100%;
  min-height: var(--touch);
  margin: 0;
  padding: 0 0.95rem 0 2.75rem;
  border: 1px solid var(--border-color, var(--color-border));
  border-radius: 999px;
  background: #fff;
  color: var(--text-main, var(--color-ink));
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition: all 0.2s ease;
}

.header-search__input[type="search"]::placeholder {
  color: var(--text-muted, var(--color-muted));
  opacity: 0.85;
}

.header-search__input[type="search"]::-webkit-search-decoration,
.header-search__input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.header-search__input[type="search"]:focus {
  outline: none;
  border-color: var(--btn-primary-bg, var(--color-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn-primary-bg, var(--color-primary)) 22%, transparent);
}

.header-search__results {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: calc(var(--z-header) + 2);
  max-height: min(70vh, 24rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface, #fff);
  color: var(--color-ink, #0f172a);
  box-shadow: var(--shadow-soft);
}

.header-search__results:empty {
  display: none;
}

.header-search__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  display: grid;
  gap: 0.15rem;
}

.header-search__item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--color-ink, #0f172a);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.header-search__item:hover,
.header-search__item:focus-visible {
  background: var(--color-cream);
  outline: none;
}

.header-search__thumb {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-cream);
}

.header-search__thumb--empty {
  display: block;
}

.header-search__meta {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.header-search__name {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 560;
  color: var(--color-ink, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-search__brand {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-muted, #64748b);
}

.header-search__price {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink, #0f172a);
  white-space: nowrap;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1);
}

.header-search__price--sale {
  color: var(--accent-orange, var(--price-discount));
}

.header-search__price-old {
  margin: 0;
  font-weight: 500;
  color: var(--price-old, #94a3b8);
  text-decoration: line-through;
  white-space: nowrap;
}

.header-search__empty {
  margin: 0;
  padding: var(--sp-4);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.header-search__more {
  display: block;
  padding: var(--sp-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-coral-deep);
  font-size: var(--text-sm);
  font-weight: 560;
  text-align: center;
  text-decoration: none;
}

.header-search__more:hover {
  background: var(--color-cream);
}

.site-header__search-toggle {
  display: none;
}

@media (max-width: 1024px) {
  .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-header__brand {
    max-width: none;
    justify-self: start;
  }

  .header-search {
    display: none;
    grid-column: 1 / -1;
  }

  .site-header.is-search-open .header-search {
    display: block;
  }

  .site-header__search-toggle {
    display: inline-flex;
  }

  .site-header__end {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 1024px) {
  .site-header.is-nav-open .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}