/*
 * Панель подсказок поиска (макет Search.dc.html, README §7). Поведение — js/ivanko-search.js,
 * поле — форма #ih-sform в template/ivanko/header.twig (стили поля — в ivanko-layout.css).
 * Токены (--ink, --brand ...) заданы в ivanko-layout.css на #ih / #ih-layers. Тема грузит свои
 * стили после наших, поэтому все правила висят на id #ih / #ih-layers. blue.css прячет все svg
 * (body svg { display: none }) — у каждой иконки display задан явно.
 */

/* ===== Поле: кнопка «очистить» и снятие родной крестики type=search ===== */
#ih .ih-search .ih-search-fb input[type="search"]::-webkit-search-cancel-button,
#ih .ih-search .ih-search-fb input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
#ih .ih-search .ih-search-fb.is-open { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27, 111, 179, .14); }
#ih .ih-search .ih-search-fb .ih-sclear { all: unset; box-sizing: border-box; display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 2px 0 0; border-radius: 8px; color: var(--muted-2); cursor: pointer; }
#ih .ih-search .ih-search-fb .ih-sclear:hover { background: var(--bg-subtle); }
#ih .ih-search .ih-search-fb .ih-sclear:focus-visible { outline: 3px solid rgba(27, 111, 179, .45); outline-offset: 1px; }
#ih .ih-search .ih-search-fb .ih-sclear .ih-i { display: block; }
#ih.is-stuck .ih-search .ih-search-fb .ih-sclear { width: 30px; height: 30px; }

/* ===== Затемнение страницы под шапкой (шапка #ih имеет z-index 1000, выше) ===== */
#ih-layers .ih-sdim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900; background: rgba(21, 24, 28, .18); }

/* ===== Панель (десктоп) ===== */
#ih .ih-sugg { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 920px; max-height: calc(100vh - 130px); overflow-x: hidden; overflow-y: auto; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(20, 30, 40, .14), 0 0 0 1px rgba(20, 30, 40, .06); color: var(--ink); font-size: 15px; line-height: 1.4; }
#ih .ih-sugg a, #ih .ih-sugg button { text-decoration: none; }
#ih .ih-sugg button { font-family: inherit; }
#ih .ih-sugg .ih-i { display: block; flex: none; width: 1em; height: 1em; font-size: 20px; fill: currentColor; }
#ih .ih-sugg .ih-i-18 { font-size: 18px; }
#ih .ih-sugg .ih-i-19 { font-size: 19px; }
#ih .ih-sugg .ih-i-40 { font-size: 40px; }
#ih .ih-sugg .ih-i-muted2 { color: #8A9099; }
#ih .ih-sugg .ih-i-brand { color: var(--brand); }
#ih .ih-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Шапка панели: чипы типов и счётчик */
#ih .ih-sh { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; border-bottom: 1px solid var(--border); }
#ih .ih-chips { display: flex; flex: 1; flex-wrap: wrap; gap: 6px; }
#ih .ih-chip { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border-input); border-radius: 16px; background: #fff; font-size: 14px; font-weight: 500; color: var(--ink); }
#ih .ih-chip span, #ih-layers .ih-chip span { font-size: 12px; font-weight: 400; color: var(--muted-2); }
#ih .ih-chip:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--ink); }
#ih .ih-sh-l { flex: 1; font-size: 14px; font-weight: 600; }
#ih .ih-sh-n { font-size: 13px; color: var(--muted-2); white-space: nowrap; }

/* Строки: 44 | 1fr | 140 | 44 | 180 | 116 | 36, gap 12, высота 60 */
#ih .ih-slist { padding: 4px 8px; }
#ih .ih-so { display: grid; grid-template-columns: 44px minmax(0, 1fr) 140px 44px 180px 116px 36px; gap: 12px; align-items: center; height: 60px; padding: 0 8px; border-radius: 8px; cursor: pointer; }
#ih .ih-so + .ih-so { border-top: 1px solid #F0F2F4; }
#ih .ih-so.is-active, #ih .ih-so.is-active + .ih-so { border-top-color: transparent; }
#ih .ih-so.is-active { background: var(--brand-tint); }
#ih .ih-so-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 32px; border-radius: 6px; background: #F5F7F9; }
#ih .ih-sil, #ih-layers .ih-sil { display: block; flex: none; fill: none; }
#ih .ih-so-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#ih .ih-so-t b { font-size: 14px; font-weight: 700; color: var(--ink); }
#ih .ih-so-n { overflow: hidden; font-size: 13px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
#ih .ih-so-c { overflow: hidden; font: 500 13px/1.4 'JetBrains Mono', ui-monospace, Consolas, monospace; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
#ih .ih-so-m { font-size: 13px; font-weight: 600; color: var(--muted); }
#ih .ih-so-s { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--ink); }
#ih .ih-so-s > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ih .ih-sdot, #ih-layers .ih-sdot { display: block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #B4BBC3; }
#ih .ih-sdot.is-ok, #ih-layers .ih-sdot.is-ok { background: #1D9A55; }
#ih .ih-sdot.is-warn, #ih-layers .ih-sdot.is-warn { background: #E59A00; }
#ih .ih-sdot.is-none, #ih-layers .ih-sdot.is-none { background: #B4BBC3; }
#ih .ih-so-p { font-size: 16px; font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }
#ih .ih-so-p.is-req, #ih-layers .ih-mo-l1 .ih-so-p.is-req { font-size: 13px; font-weight: 600; color: var(--muted-2); }

/* Подсветка совпадений */
#ih .ih-hl, #ih-layers .ih-hl { border-radius: 3px; background: #FFE9B0; color: var(--ink); font-weight: 700; }

/* Кнопка строки 36x36 */
#ih .ih-sa { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; }
#ih .ih-sa-cart { background: var(--cta); color: var(--ink); }
#ih .ih-sa-cart:hover { background: var(--cta-hover); }
#ih .ih-sa-cart.is-busy { opacity: .55; cursor: default; }
#ih .ih-sa-done { border: 1px solid #BFE3CD; background: #E8F5EE; color: var(--ok-text); }
#ih .ih-sa-out { border: 1.5px solid var(--brand); background: #fff; color: var(--brand); }
#ih .ih-sa-out:hover { background: var(--brand-tint); }

/* Низ панели */
#ih .ih-sfoot { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-top: 1px solid var(--border); background: #fff; color: var(--brand); cursor: pointer; }
#ih .ih-sfoot.is-idle { background: #F8FAFB; }
#ih .ih-sfoot:hover { background: var(--brand-tint); }
#ih .ih-sfoot-l { flex: 1; font-size: 15px; font-weight: 600; color: var(--brand); text-align: left; }
#ih .ih-keys { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-2); }
#ih .ih-keys kbd { padding: 1px 5px; border: 1px solid var(--border-input); border-radius: 4px; font: 500 11px/1.4 'JetBrains Mono', ui-monospace, Consolas, monospace; color: var(--muted); }
#ih .ih-keys kbd.is-sp { margin-left: 8px; }

/* Пустое поле: недавние запросы и подсказка про еврокод */
#ih .ih-sf { display: flex; flex-direction: column; padding: 10px 8px 8px; }
#ih .ih-sf-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px; }
#ih .ih-sf-h span { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#ih .ih-sf-h button { padding: 0; border: 0; background: none; font-size: 13px; color: var(--brand); cursor: pointer; }
#ih .ih-sf-none { padding: 8px; font-size: 14px; color: var(--muted-2); }
#ih .ih-sr { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
#ih .ih-sr:hover { background: #F5F7F9; }
#ih .ih-sr-p { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; height: 40px; padding: 0 8px; border: 0; background: none; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
#ih .ih-sr-p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ih .ih-sr-p .is-mono { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; }
#ih .ih-sr-x { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: #8A9099; cursor: pointer; }
#ih .ih-sr-x:hover { background: #E8ECF0; }
#ih .ih-stip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 8px 2px; padding: 10px 12px; border-radius: 10px; background: #F5F7F9; font-size: 14px; color: var(--ink-2); }
#ih .ih-stip-code { height: 24px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--brand-tint); font: 500 13px/24px 'JetBrains Mono', ui-monospace, Consolas, monospace; color: var(--ink); cursor: pointer; }
#ih .ih-stip-m { color: var(--muted-2); }

/* 1–2 символа, ошибка */
#ih .ih-snote { padding: 14px 16px; font-size: 14px; color: var(--muted); }

/* Загрузка: спиннер и скелеты */
#ih .ih-sload, #ih-layers .ih-sload { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; font-size: 13px; color: var(--muted-2); }
#ih .ih-spin, #ih-layers .ih-spin { display: inline-block; flex: none; width: 14px; height: 14px; border: 2px solid var(--border-input); border-top-color: var(--brand); border-radius: 50%; animation: ih-spin .8s linear infinite; }
@keyframes ih-spin { to { transform: rotate(360deg); } }
#ih .ih-sload-rows { display: flex; flex-direction: column; padding: 4px 8px 10px; }
#ih .ih-sk { display: grid; grid-template-columns: 44px minmax(0, 1fr) 140px 44px 180px 116px 36px; gap: 12px; align-items: center; height: 60px; padding: 0 8px; }
#ih .ih-sk > span { display: block; height: 12px; border-radius: 4px; background: #EEF1F4; }
#ih .ih-sk .ih-sk-ic { width: 44px; height: 32px; border-radius: 6px; }
#ih .ih-sk .ih-sk-b { display: flex; flex-direction: column; gap: 6px; height: auto; background: none; }
#ih .ih-sk .ih-sk-b span { display: block; height: 11px; border-radius: 4px; background: #E3E8ED; }
#ih .ih-sk .ih-sk-b span + span { background: #EEF1F4; }
#ih .ih-sk .ih-sk-c { width: 110px; }
#ih .ih-sk .ih-sk-n { width: 30px; }
#ih .ih-sk .ih-sk-s { width: 130px; }
#ih .ih-sk .ih-sk-p { width: 60px; height: 14px; background: #E3E8ED; justify-self: end; }

/* Пусто */
#ih .ih-se, #ih-layers .ih-se { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px 24px; text-align: center; }
#ih .ih-se > .ih-i, #ih-layers .ih-se > .ih-i { color: #8A9099; }
#ih-layers .ih-se > .ih-i { display: block; width: 1em; height: 1em; font-size: 40px; fill: currentColor; }
#ih .ih-se-t, #ih-layers .ih-se-t { font-size: 20px; font-weight: 700; color: var(--ink); }
#ih .ih-se-s, #ih-layers .ih-se-s { font-size: 15px; color: var(--muted); }
#ih .ih-se-s button, #ih-layers .ih-se-s button { padding: 0 2px; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--brand); cursor: pointer; }
#ih .ih-se-a { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#ih .ih-se-phone, #ih-layers .ih-se-phone { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 1.5px solid var(--brand); border-radius: 10px; background: #fff; font-size: 15px; font-weight: 700; color: var(--brand); cursor: pointer; }
#ih .ih-se-phone:hover { background: var(--brand-tint); }
#ih .ih-se-tel, #ih-layers .ih-se-tel { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; }

/* Узкие окна десктопа: без колонки изготовителя */
@media (min-width: 768px) and (max-width: 960px) {
	#ih .ih-so, #ih .ih-sk { grid-template-columns: 44px minmax(0, 1fr) 110px 150px 100px 36px; }
	#ih .ih-so-m, #ih .ih-sk .ih-sk-n { display: none; }
	#ih .ih-keys { display: none; }
}

/* ===== Всплывающее уведомление ===== */
#ih-layers .ih-stoast { position: fixed; bottom: 28px; left: 50%; z-index: 10030; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; transform: translateX(-50%); }

/* ===== Мобильный экран ===== */
#ih-layers .ih-ms { position: fixed; top: 0; right: 0; left: 0; z-index: 10020; display: flex; flex-direction: column; height: 100%; background: #fff; color: var(--ink); font-size: 15px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
#ih-layers .ih-ms a { text-decoration: none; }
#ih-layers .ih-ms button { font-family: inherit; }
#ih-layers .ih-ms .ih-i { display: block; flex: none; width: 1em; height: 1em; font-size: 20px; fill: currentColor; }
#ih-layers .ih-ms .ih-i-24 { font-size: 24px; }
#ih-layers .ih-ms .ih-i-18 { font-size: 18px; }
#ih-layers .ih-ms .ih-i-19 { font-size: 19px; }
#ih-layers .ih-ms .ih-i-brand { color: var(--brand); }
#ih-layers .ih-ms .ih-i-muted2 { color: #8A9099; }
#ih-layers .ih-ms-top { display: flex; flex: none; align-items: center; gap: 4px; height: 60px; padding: 0 8px 0 4px; border-bottom: 1px solid var(--border); }
#ih-layers .ih-ms-back { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); }
#ih-layers .ih-ms-field { display: flex; flex: 1; align-items: center; min-width: 0; height: 44px; padding: 0 2px 0 12px; border: 1.5px solid var(--brand); border-radius: 10px; background: #fff; box-shadow: 0 0 0 3px rgba(27, 111, 179, .14); }
#ih-layers .ih-ms-input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; box-shadow: none; font: inherit; font-size: 16px; color: var(--ink); -webkit-appearance: none; appearance: none; }
#ih-layers .ih-ms-input::-webkit-search-cancel-button, #ih-layers .ih-ms-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
#ih-layers .ih-ms-input::placeholder { color: var(--muted-2); opacity: 1; }
#ih-layers .ih-ms-clear { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--muted-2); }
#ih-layers .ih-ms-body { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#ih-layers .ih-ms-foot { flex: none; padding: 8px 12px; border-top: 1px solid var(--border); background: #fff; }
#ih-layers .ih-ms-all { display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; border-radius: 10px; background: var(--brand); font-size: 16px; font-weight: 600; color: #fff; }

#ih-layers .ih-mchips { display: flex; flex: none; gap: 6px; padding: 10px 16px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
#ih-layers .ih-mchips::-webkit-scrollbar { display: none; }
#ih-layers .ih-mchips .ih-chip { display: flex; flex: none; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border: 1px solid var(--border-input); border-radius: 18px; background: #fff; font-size: 14px; font-weight: 500; color: var(--ink); }

#ih-layers .ih-mo { display: flex; flex: none; align-items: center; gap: 12px; min-height: 76px; padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--ink); }
#ih-layers .ih-mo.is-active { background: var(--brand-tint); }
#ih-layers .ih-mo-ic { display: flex; align-items: center; justify-content: center; flex: none; align-self: flex-start; width: 40px; height: 30px; margin-top: 2px; border-radius: 6px; background: #F5F7F9; }
#ih-layers .ih-mo-b { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
#ih-layers .ih-mo-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#ih-layers .ih-mo-l1 b { font-size: 15px; font-weight: 700; }
#ih-layers .ih-so-p { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
#ih-layers .ih-so-p.is-req { font-size: 13px; font-weight: 600; color: var(--muted-2); }
#ih-layers .ih-mo-n { overflow: hidden; font-size: 13px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
#ih-layers .ih-mo-l3 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; color: var(--muted); }
#ih-layers .ih-mo-c { font: 500 12px/1.4 'JetBrains Mono', ui-monospace, Consolas, monospace; color: var(--ink-2); white-space: nowrap; }
#ih-layers .ih-mo-m { font-weight: 600; }
#ih-layers .ih-mo-s { display: flex; align-items: center; gap: 4px; min-width: 0; margin-left: auto; }
#ih-layers .ih-mo-s .ih-sdot { width: 7px; height: 7px; }
#ih-layers .ih-mo-s > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#ih-layers .ih-snote { padding: 14px 16px; font-size: 14px; color: var(--muted); }
#ih-layers .ih-sf { display: flex; flex-direction: column; }
#ih-layers .ih-sf-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; }
#ih-layers .ih-sf-h span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#ih-layers .ih-sf-h button { height: 32px; padding: 0; border: 0; background: none; font-size: 14px; color: var(--brand); }
#ih-layers .ih-sf-none { padding: 12px 16px; font-size: 14px; color: var(--muted-2); }
#ih-layers .ih-sr { display: flex; align-items: center; padding: 0 4px 0 16px; border-bottom: 1px solid var(--border); }
#ih-layers .ih-sr-p { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; height: 48px; padding: 0; border: 0; background: none; font-size: 16px; color: var(--ink); text-align: left; }
#ih-layers .ih-sr-p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ih-layers .ih-sr-p .is-mono { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; }
#ih-layers .ih-sr-x { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #8A9099; }
#ih-layers .ih-stip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 16px; padding: 10px 12px; border-radius: 10px; background: #F5F7F9; font-size: 14px; color: var(--ink-2); }
#ih-layers .ih-stip-code { height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--brand-tint); font: 500 13px/28px 'JetBrains Mono', ui-monospace, Consolas, monospace; color: var(--ink); }

#ih-layers .ih-sload-rows { display: flex; flex-direction: column; }
#ih-layers .ih-sk-m { display: flex; align-items: center; gap: 12px; height: 76px; padding: 0 16px; border-bottom: 1px solid var(--border); }
#ih-layers .ih-sk-m span { display: block; border-radius: 4px; background: #EEF1F4; }
#ih-layers .ih-sk-m .ih-sk-ic { flex: none; width: 40px; height: 30px; border-radius: 6px; }
#ih-layers .ih-sk-m .ih-sk-b { display: flex; flex: 1; flex-direction: column; gap: 7px; background: none; }
#ih-layers .ih-sk-m .ih-sk-b span { height: 11px; background: #E3E8ED; }
#ih-layers .ih-sk-m .ih-sk-b span + span { background: #EEF1F4; }
#ih-layers .ih-sk-m .ih-sk-p { width: 52px; height: 14px; background: #E3E8ED; }

#ih-layers .ih-se.is-m { padding: 28px 20px; }
#ih-layers .ih-se.is-m .ih-se-t { font-size: 19px; }
#ih-layers .ih-se.is-m .ih-se-s { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-size: 14px; }
#ih-layers .ih-se.is-m .ih-se-s button { height: 32px; padding: 0 10px; border-radius: 6px; background: var(--brand-tint); font-size: 14px; }
#ih-layers .ih-se.is-m .ih-se-a { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; margin-top: 8px; }
#ih-layers .ih-se.is-m .ih-se-phone { width: 100%; height: 48px; }
#ih-layers .ih-se.is-m .ih-se-tel { justify-content: center; height: 48px; border-radius: 10px; background: var(--bg-subtle); }
#ih-layers .ih-se .ih-i { display: block; width: 1em; height: 1em; fill: currentColor; font-size: 20px; }
#ih-layers .ih-se > .ih-i-40 { font-size: 40px; }
#ih-layers .ih-ms .ih-i-40 { font-size: 40px; }

/* На телефоне панели десктопа нет */
@media (max-width: 767px) {
	#ih .ih-sugg, #ih-layers .ih-sdim { display: none !important; }
	#ih-layers .ih-stoast { bottom: 20px; }
}

/* kbd темы (тёмная плашка) переопределяем под макет */
#ih .ih-keys kbd { background: #fff; box-shadow: none; text-shadow: none; }

/* Открытая панель выше всплывающих окон шапки (подтверждение города z-index 30, «Все контакты» 25) */
#ih .ih-search.is-open { z-index: 70; }