/* Поиск по сайту — вариант A (лупа в шапке -> дропдаун под шапкой, товары+журнал).
   Токены — из main.css (ink, paper, white, acid, радиусы r-, шрифты f-). Проверено
   комиссией (backend/frontend/iOS/Android): z-order, скролл-лок, клавиатура,
   тап-таргеты, hover-тач.
   ВНИМАНИЕ: не писать в комментариях последовательность звёздочка+слэш внутри текста —
   она досрочно закрывает CSS-комментарий и роняет следующее за ним правило .hdr-search. */

/* кнопка-лупа в шапке — круглая, светлое кольцо на тёмной шапке (как .hdr-b2b), 44×44 */
.hdr-search{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.4);border-radius:var(--r-chip);background:transparent;color:var(--white);cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:background .15s,color .15s,border-color .15s;}
.hdr-search svg{width:20px;height:20px;display:block;}
.hdr-search[aria-expanded="true"]{background:var(--white);color:var(--ink);border-color:var(--white);}
.hdr-search:focus-visible{outline:3px solid var(--acid);outline-offset:2px;}
/* десктопная лупа живёт в .hdr-actions (перед RU/EN); .hdr-actions скрыт ≤1060 →
   отдельная мобильная лупа рядом с бургером */
.hdr-search--m{display:none;}
@media (max-width:1060px){
  /* Мобильная лупа — СПЛОШНОЙ белый круг, в один вес с лого и бургером (десктопная
     остаётся прозрачным кольцом: там она среди пилюль RU/EN и «Личного кабинета»).
     Хит-зона 48x48 (Material/WCAG). Тонкая ink-обводка задаёт край круга на светлом
     контенте при таянии полосы — как ring у лого. */
  .hdr-search--m{display:inline-flex;margin-left:auto;width:48px;height:48px;
    background:var(--white);color:var(--ink);border:1.5px solid var(--ink);}
  .hdr-search--m + .burger{margin-left:0;}
  /* При hdr-float (ниже 96px тёмная полоса тает) лупа тоже плавает и ОСТАЁТСЯ
     кликабельной — иначе она выпадала из whitelist и превращалась в некликабельную
     прозрачную обводку-призрак. Тень — идентична бургеру/лого. */
  .site-header.hdr-float:not(.nav-open) .hdr-search--m{pointer-events:auto;
    box-shadow:0 10px 24px rgba(30,30,30,.42);}
}

/* корень оверлея: pointer-events:none → шапка (лого/меню/лупа) остаётся кликабельной */
#fhSearchRoot{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:1200;pointer-events:none;visibility:hidden;color-scheme:light;}
#fhSearchRoot.is-open{visibility:visible;}
/* скролл-лок: body position:fixed — держит и iOS, и Android (overflow:hidden на iOS не держит) */
html.fhs-lock{overflow:hidden;overscroll-behavior:none;}
html.fhs-lock body{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
/* пока открыт поиск — прячем куки-баннер: иначе он (fixed, снизу) налезает на
   затемнение и нижние результаты. Вернётся после закрытия поиска. */
html.fhs-lock .cookie-bar{display:none;}

/* бэкдроп начинается ПОД шапкой (--fhs-top) и лежит НИЖЕ панели (z-index) */
.fhs-backdrop{position:fixed;left:0;right:0;bottom:0;top:var(--fhs-top,66px);z-index:1;pointer-events:none;cursor:pointer;
  background:rgba(12,12,12,.28);opacity:0;transition:opacity .18s;}
#fhSearchRoot.is-open .fhs-backdrop{opacity:1;pointer-events:auto;}

.fhs-panel{position:fixed;left:0;right:0;top:var(--fhs-top,66px);z-index:2;pointer-events:none;background:var(--white,#fff);
  border-top:1.5px solid var(--ink-08);border-bottom:1.5px solid var(--ink);
  box-shadow:0 24px 48px -20px rgba(12,12,12,.35);
  transform:translateY(-10px);opacity:0;transition:transform .2s ease,opacity .2s ease;}
#fhSearchRoot.is-open .fhs-panel{transform:none;opacity:1;pointer-events:auto;}
/* Внутренняя обёртка = как .container сайта: max-width + центрирование + боковой
   gutter. Иначе поле/результаты прижимались впритык к краям экрана на телефоне. */
.fhs-inner{max-width:var(--container);margin-inline:auto;padding:18px var(--gutter) 22px;}

/* поле ввода */
.fhs-field{display:flex;align-items:center;gap:12px;border:1.5px solid var(--ink);border-radius:var(--r-sm);
  padding:0 8px 0 14px;height:54px;background:var(--paper);}
.fhs-field:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
.fhs-ic{width:22px;height:22px;flex:0 0 auto;color:var(--ink-55);}
.fhs-input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-family:var(--f-body);
  font-size:17px;color:var(--ink);-webkit-appearance:none;appearance:none;}
.fhs-input::placeholder{color:var(--ink-55);opacity:1;}
.fhs-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none;}
.fhs-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1.5px solid var(--ink-16);background:var(--white);border-radius:var(--r-chip);color:var(--ink-55);cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:background .15s,color .15s,border-color .15s;}
.fhs-close svg{width:18px;height:18px;display:block;}

/* результаты: две колонки; высота ограничена visualViewport (клавиатура) */
.fhs-results{margin-top:16px;max-height:var(--fhs-maxh,min(64vh,560px));overflow:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.fhs-hint{font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-55);padding:0 10px 10px;}
.fhs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;}
.fhs-col{min-width:0;}
.fhs-col-h{font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-55);padding:2px 10px 8px;border-bottom:1.5px solid var(--ink-08);margin-bottom:4px;}

.fhs-item{display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 10px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink);position:relative;}
.fhs-item.is-active{background:var(--paper);outline:2px solid var(--c-wash);outline-offset:-2px;}
.fhs-thumb{width:46px;height:46px;flex:0 0 auto;border-radius:var(--r-xs);object-fit:cover;background:var(--paper);
  border:1px solid var(--ink-08);}
.fhs-thumb--none{background:var(--paper);}
.fhs-item--art{padding-left:14px;}
.fhs-item--art::before{content:"";position:absolute;left:2px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--c-int);}
.fhs-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.fhs-name{font-family:var(--f-body);font-weight:700;font-size:14.5px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fhs-sub{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fhs-price{flex:0 0 auto;font-family:var(--f-disp,var(--f-body));font-weight:800;font-size:14px;
  font-variant-numeric:tabular-nums;color:var(--ink);}

.fhs-all{display:inline-block;margin:6px 0 2px 10px;font-family:var(--f-mono);font-size:12px;font-weight:700;
  letter-spacing:.02em;color:var(--c-wash);text-decoration:none;}
.fhs-none{padding:8px 10px;font-size:13px;color:var(--ink-55);}
.fhs-empty{padding:14px 10px;font-size:14px;color:var(--ink-55);}
.fhs-empty a{color:var(--c-wash);}

/* hover — только для мыши (на тач не залипает) */
@media (hover:hover) and (pointer:fine){
  .hdr-search:hover{background:var(--acid);color:var(--ink);border-color:var(--acid);}
  .fhs-item:hover{background:var(--paper);}
  .fhs-close:hover{background:var(--ink);color:var(--white);border-color:var(--ink);}
  .fhs-all:hover{text-decoration:underline;}
}

@media (max-width:720px){
  .fhs-grid{grid-template-columns:1fr;gap:2px;}
  .fhs-col + .fhs-col{margin-top:14px;}
  .fhs-inner{padding:14px var(--gutter) 18px;}
  .fhs-field{height:50px;}
  .fhs-input{font-size:16px;}          /* 16px+ — iOS не зумит поле при фокусе */
}