/**
 * Search focus: scrim + elevated search block (mobile fly-up / desktop scale).
 * Target is portaled to body by JS — z-index must beat header/popovers.
 */
.search-focus-scrim {
  position: fixed;
  inset: 0;
  z-index: 1090;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.24s ease-out;
  -webkit-tap-highlight-color: transparent;
}

html.is-search-focus .search-focus-scrim {
  opacity: 1;
  pointer-events: auto;
}

html.is-search-focus--desktop .search-focus-scrim {
  background: rgba(15, 23, 42, 0.28);
}

.search-focus-spacer {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Portaled elevated root (always position:fixed via JS) */
.is-search-focus-target {
  z-index: 1100 !important;
  will-change: transform;
  pointer-events: auto;
  /* No padding — avoids shrinking the input and shifting the mic */
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
}

html.is-search-focus--desktop .is-search-focus-target,
html.is-search-focus--mobile .is-search-focus-target {
  border-radius: var(--radius-lg, 12px);
  /* Soft elevation only — not a dark border ring */
  box-shadow: 0 12px 36px rgba(26, 75, 130, 0.18);
}

html.is-search-focus--desktop .is-search-focus-target {
  transform-origin: center center;
}

/*
 * Locked field chrome while elevated: one brand ring, no outline flash,
 * no translateY, no dark/black borders from stacked page CSS.
 */
html.is-search-focus .is-search-focus-target .search-input,
html.is-search-focus .is-search-focus-target .filter-input {
  outline: none !important;
  border-color: transparent !important;
  border-style: solid;
  transform: none !important;
  background: #fff;
  box-shadow: var(--focus-ring-soft, 0 0 0 3px rgba(26, 75, 130, 0.2));
  transition: none;
}

html.is-search-focus .is-search-focus-target .search-input,
html.is-search-focus .is-search-focus-target .search-input:focus,
html.is-search-focus .is-search-focus-target .search-input:focus-visible {
  border: none !important;
  outline: none !important;
}

html.is-search-focus .is-search-focus-target .filter-input,
html.is-search-focus .is-search-focus-target .filter-input:focus,
html.is-search-focus .is-search-focus-target .filter-input:focus-visible {
  outline: none !important;
  border-color: var(--border-focus, #1a4b82) !important;
}

html.is-search-focus .is-search-focus-target .search-btn,
html.is-search-focus .is-search-focus-target .catalog-search-submit-btn,
html.is-search-focus .is-search-focus-target .voice-search-btn {
  outline: none;
}

/* Catalog: hide Add / Wishlist / Filters while search row is elevated */
html.is-search-focus .filters-header__actions {
  display: none !important;
}

/* Showcases: hide «Витрина» / «Сброс» while search field is elevated */
html.is-search-focus .showcases-search-actions {
  display: none !important;
}

/* Mic stays pinned inside the field during parent scale */
html.is-search-focus .is-search-focus-target .voice-search-btn {
  top: 0;
  bottom: 0;
  margin-block: auto;
  transform: none !important;
}

html.is-search-focus .is-search-focus-target .voice-search-btn:hover,
html.is-search-focus .is-search-focus-target .voice-search-btn:focus-visible {
  transform: none !important;
}

html.is-search-focus {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .search-focus-scrim {
    transition: none;
  }

  html.is-search-focus--desktop .is-search-focus-target {
    transition: none;
  }
}