/* Поиск — телефон.
   ═══════════════════════════════════════════════════════════════════════
   Один файл на страницу: над мобильной версией работают несколько рук
   одновременно, и общий ie-custom.css они бы затирали друг другу.

   ПРАВИЛА ЭТОГО ФАЙЛА
   1. Только @media (max-width:767.98px) — широкий экран здесь не трогаем.
   2. Селекторы начинаются с признака своей страницы, чтобы правило не
      утекло на соседнюю.
   3. Комментарий объясняет ПОЧЕМУ, а не что: «что» видно из кода.
   Общие вещи (шапка ie-topbar, нижняя панель, правовая строка) живут в
   ie-custom.css и отсюда не переопределяются.

   Часть узлов ниже (иконка-лупа, цена товара, артикул, короткий заголовок
   пустой выдачи, кнопка заявки) в разметке шаблона стоит со стандартным
   HTML-атрибутом `hidden` — на широком экране их прячет сам браузер, без
   единой строчки CSS вне медиа-запроса. Правила вида «.class{display:...}»
   без предшествующего display:none не переключают видимость, а открывают
   то, что уже скрыто атрибутом (тот же приём в проекте уже держат
   .ie-tabbar-count[hidden] и .ie-cookie[hidden] в ie-custom.css). */

@media (max-width:767.98px){

  /* --- заголовок -------------------------------------------------------
     H1 «Поиск по сайту» дословно повторяет название в .ie-topbar, который
     на телефоне и так стоит сверху (см. общий каркас). Это была половина
     первого экрана до самого поля поиска. Заголовок в шапке уже сказал
     всё, что нужно, — прячем дубль, а не нужный контент. */
  .ie-search h1.blockTitle{display:none}

  /* Отступ сверху — как на экране заявки: там между белой полосой и первой
     строкой воздух есть, а здесь поле в рамке подходило к полосе вплотную
     и читалось её продолжением. Число больше, чем на других экранах (16),
     потому что рамка поля — это видимая коробка: у текста воздух добирают
     поля строки, у коробки их нет. */
  .ie-search{padding-top:24px;padding-bottom:20px}
  .ie-search .container{padding-left:16px;padding-right:16px}

  /* --- поле поиска -------------------------------------------------------
     В прототипе это единая рамка высотой 50 с лупой слева — поле и кнопка
     «Найти» слиты в одну цель. Кнопка остаётся в форме (с одним текстовым
     полем форма отправляется по Enter/кнопке клавиатуры и без видимой
     кнопки — стандартное неявное отправление формы), на экране прячем
     именно её как дублирующий контрол, а не единственный способ отправить
     запрос. */
  /* flex-direction:row — явно, вопреки умолчанию. У .ie-search-form уже
     есть правило в ie-custom.css на @media (max-width:767px):
     flex-direction:column (сделано для старого макета «поле над кнопкой»).
     Специфичность у него та же, что у любого моего правила с этим же
     селектором, а my-файл грузится позже — значит, ЛЮБОЕ свойство, которое
     я не переопределю явно, наследуется из того старого правила. На этом
     ловилось: без строки ниже форма собиралась в колонку, лупа и поле
     схлопывались в центр друг на друге, а поле проседало до ширины
     плейсхолдера. */
  .ie-search-form{
    height:50px;padding:0 14px;margin:0 0 14px;
    display:flex;flex-direction:row;align-items:center;gap:10px;
    border:1px solid var(--ie-border-soft);border-radius:12px;background:#fff;
  }
  /* Свечение при фокусе у десктопного .ie-search-input:focus (border-color
     + box-shadow) осталось: рамку я снял (border:0), а тень осталась бы
     тонким ободком вокруг текстовой строки 17 px, а не вокруг всей рамки
     высотой 50 — переносим фокус-состояние на саму рамку. */
  .ie-search-form:focus-within{
    border-color:var(--ie-orange);
    box-shadow:0 0 0 3px rgba(var(--ie-orange-rgb),.18);
  }
  .ie-search-icon{display:block;flex:none;color:var(--ie-text-muted)}
  .ie-search-input{
    flex:1;min-width:0;height:auto;
    border:0;border-radius:0;padding:0;background:transparent;
    font-size:.9375rem;
  }
  .ie-search-input:focus{box-shadow:none}
  .ie-search-form .btn{display:none}

  /* --- частые запросы -----------------------------------------------------
     Заголовок «ЧАСТО ИЩУТ» и таблетки-подсказки вместо строчного «Частые
     запросы: …» — подсказки читаются отдельным блоком, а не хвостом
     подписи. flex-basis:100% у заголовка внутри flex-wrap переносит
     таблетки на следующую строку без изменения вложенности DOM.

     В прототипе таблетка высотой 38 px. Наш контракт цели нажатия требует
     ≥44 px по любой стороне (test_цели_нажатия_по_сайту) — здесь 44, а не
     38: в этом месте макет ниже нашей планки, а не выше. */
  .ie-search-hints{flex-wrap:wrap;gap:8px;margin-bottom:18px}
  .ie-search-hints-title{
    display:block;flex-basis:100%;
    font-weight:800;font-size:.8125rem;line-height:1;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ie-text-muted);
  }
  .ie-search-hints-label{display:none}
  .ie-search-hints a{
    display:inline-flex;align-items:center;height:44px;padding:0 14px;
    border-radius:999px;border-color:var(--ie-border-soft);
    font-weight:700;font-size:.8125rem;
  }

  .ie-search-idle{font-size:.875rem;line-height:1.6;color:var(--ie-text-muted)}

  .ie-search-summary{
    flex-direction:column;align-items:flex-start;gap:6px;
    font-size:.875rem;padding-bottom:10px;margin-bottom:16px;
  }
  .ie-search-sort{font-size:.8125rem}

  .ie-search-subtitle{font-size:1.05rem;margin:20px 0 10px}

  /* --- товары: строки с фото и ценой вместо сетки тайлов ------------------
     Сетка minmax(220px,1fr) на 360 px рабочей ширины даёт один столбец —
     тайл во всю ширину с фотографией 4:3, имя под ней и ни слова о цене.
     Прототип строит их строкой: маленькое фото слева, имя и артикул
     столбиком, цена справа — тот же контент вдвое компактнее, и цена
     наконец видна. */
  .ie-search-goods{display:flex;flex-direction:column;gap:8px}
  .ie-search-good{
    flex-direction:row;align-items:center;gap:12px;
    padding:12px;border-radius:14px;
  }
  .ie-search-good-pic{width:54px;height:54px;flex:none;border-radius:10px}
  .ie-search-good-pic img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
  .ie-search-good-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
  .ie-search-good-name{font-weight:700;font-size:.875rem;line-height:1.3}
  .ie-search-good-meta{display:block;font-weight:600;font-size:.75rem;color:var(--ie-text-muted)}
  /* Цену печатает result_modifier.php строкой ie_price_text()/ie_price_stub() —
     та же точка принятия решения «показывать ли цену», что и у всего
     сайта (local/php_interface/price_display.php). У большинства товаров
     здесь будет «По согласованию»: цены на сайте скрыты решением от
     20.08.2026, кроме элементов Li-SOCl2 с ценой из реестра. */
  .ie-search-good-price{
    display:block;flex:none;margin-left:auto;padding-left:6px;
    font-weight:800;font-size:.875rem;color:var(--ie-navy);text-align:right;
  }

  /* --- страницы: та же карточка, но текстовая ------------------------------
     Сюда попадают услуги, новости, разработки, кейсы и разделы каталога —
     у них нет цены и есть сниппет с подсветкой совпадений, который решает,
     тот ли это результат. Втиснуть многострочный сниппет в строку с
     фото-квадратом 54×54 значило бы обрезать текст или раздувать карточку
     без надобности — ухудшение поиска ради формы, прямо запрещённое
     условиями задачи. Поэтому здесь только радиус и отступы подтянуты под
     общий язык карточек прототипа (радиус 14, как у товаров), состав тот
     же. */
  .ie-search-item{padding:14px;border-radius:14px}
  .ie-search-kind{font-size:.7rem;margin-bottom:6px}
  .ie-search-item h3{font-size:.95rem;margin:0 0 6px}
  .ie-search-snippet{font-size:.85rem}

  /* --- пусто ---------------------------------------------------------------
     Старый блок был рамкой-подсказкой без выхода: три совета и две ссылки
     в тексте, ни одной кнопки. Прототип действует иначе — короткий
     заголовок с самим запросом и один явный шаг: оставить заявку. Советы
     не убираем (проверить раскладку, сократить запрос, искать по артикулу
     — рабочие подсказки для поиска по номенклатуре), только сжимаем их под
     вторичный план и ставим кнопку впереди. */
  .ie-search-empty{
    border:0;background:transparent;border-radius:0;padding:28px 0 4px;
    display:flex;flex-direction:column;gap:10px;text-align:center;
  }
  .ie-search-empty-lead{display:none}
  .ie-search-empty .ie-search-empty-lead-mobile{
    display:block;font-weight:700;font-size:1rem;line-height:1.35;color:var(--ie-navy);
  }
  .ie-search-empty ul{
    margin:0;padding-left:18px;text-align:left;
    font-size:.8125rem;line-height:1.6;color:#3a3a3a;
  }
  .ie-search-empty > p:last-of-type{margin:0;text-align:left;font-size:.8125rem}
  .ie-search-empty .ie-search-empty-cta{
    display:flex;align-items:center;justify-content:center;height:48px;
    margin-top:4px;border-radius:12px;background:var(--ie-orange);
    color:#fff;font-weight:800;font-size:.9375rem;text-decoration:none!important;
  }

  .ie-pager{justify-content:center}
}