/* ==== VERSION (top): 2026-06-11-v29 — search-popup.css ==== (дублируется внизу) ==== */ /* ============================================================ Быстрый поиск fermasclad — production стили Порт дизайн-прототипа (Claude Design) под реальный движок KpProductSearch. Палитра: зелёный #83B81D / hover #96d221. Шрифт: Montserrat (уже подключён на сайте Aspro). Отличия от прототипа (только адаптация под данные, не редизайн): - цена может быть «По запросу» (часть категорий скрывает цену, движок возвращает 0 — показывать «0 ₽» нельзя); - блок «Вы искали» = история из localStorage (приватно, без сервера); - режим «Списком» уводит на /bulk-order/; - добавлены состояния, которых не было в макете: ошибка сети, пустая история, «ничего не найдено» (fallback популярного). Бонусы — по доке LogicTim: «Получите N баллов [?]» (LOGICTIM_BONUS_BALLS). CHANGELOG: v1 (2026-06-04): Первая версия — порт дизайна + все состояния. v2 (2026-06-04): Возврат кешбэка (убрана ошибочная подмена на «наличие»). v3 (2026-06-04): Бонусы по доке — плашка «Получите N баллов [?]» + тултип. v4 (2026-06-04): Реальная иконка бонусов 16×16; версия наверх. v5 (2026-06-05): Фото во всю высоту карточки (флёш влево); скругления 4px (попап/тумблеры/textarea); артикул 14px; планшетный брейкпоинт 641–1199; моб. порог 640. v6 (2026-06-08): Крестик закрытия убран (закрытие тапом вне / Esc; на мобиле — шторка снизу со скроллом до конца). + строка «в упаковке N · цена/уп». v7 (2026-06-08): Мобильный оверлей привязан к классу .is-mobile-open (без @media) — фикс «ловушки» при device=mobile на широком окне; фуллскрин сверху + стрелка «назад» ← в шапке. v8 (2026-06-08): Откат position:fixed-оверлея (страница схлопывалась вверх под меню); мобайл = дропдаун в потоке со своим скроллом; закрытие клик-вне/Esc, body не лочим. v9 (2026-06-08): На мобиле возвращён крестик ✕ закрытия — справа сверху колонки запросов (уровень первого заголовка, над стрелками разделов). На десктопе крестика нет. v10 (2026-06-08): Мобайл во весь экран (.is-fullscreen на host) — поле сверху с блоком «← Поиск», результаты скроллятся внутри popupHost. Парная к JS v19. v11 (2026-06-08): z-index фуллскрина поднят до максимума (host теперь в через портал в JS v20) — перекрывает фикс-шапку/крошки/нижнее меню сайта. v12 (2026-06-09): кнопка «Показать N» вынесена в прибитый футер (.fcsearch-foot, flex:none); обёртка стала колонкой с общим скролл-телом .fcsearch-cols (десктоп — ряд колонок, мобайл/фуллскрин — стопка). Тело скроллится, футер всегда снизу. v13 (2026-06-09): ОТКАТ футера v12 — .fcsearch-foot удалён, кнопка «Показать N» снова внизу колонки товаров (в скролле). Скролл-обёртка .fcsearch-cols сохранена (нужна фуллскрину). v14 (2026-06-09): бонус как на карточке — зелёное «+ N на счёт» + монета, без плашки-фона/тултипа (убраны .fcsearch-product__bonus фон/радиус, strong, .bonus-tip). v15 (2026-06-09): карточка — фото шире (120px)/во всю высоту/меньше левый отступ; 2 строки [бонус|цена+ед.изм.] и [артикул|упаковка]; кнопка «Показать N» без растяжки на 100% (auto + боковые отступы); оверлей-стикеры на фото. v16 (2026-06-09): фото квадрат 90×90 (align-self:center, без stretch/min-height); цвета стикеров по реальным XML_ID свойства HIT (HIT/SALES_HIT/STOCK красные, NEW синий, PRICE_ON_REQUEST серый, прочие зелёные). v17 (2026-06-09): стикеры (.fcsearch-product__label*) убраны; бонус перекрашен в обычный текст (var(--r-ink-mid), 13px, 400) — без зелёного/жирного, как арт/упаковка. v18 (2026-06-09): откат раздувания карточки — вертикальные падинги 8→2 (высота с 106 до ~94, по фото), убран margin у фото (один gap:12px вместо margin+gap). Фото 90×90 без изменений. v19 (2026-06-09): стили баннера посадочной (.fcsearch-landing-banner) над товарами. Weak-блок «Посадочные» использует существующие .fcsearch-row. v20 (2026-06-09): высота .fcs-searchbox 52→42 (под стандартный инпут Aspro). v21 (2026-06-09): стили баннера посадочной (.fcsearch-landing-banner) убраны — баннер заменён строками в левой колонке. v22 (2026-06-09): .fcsearch-product__image--empty — заглушка без фото показывается целиком (contain) на светлом фоне, не обрезается. v23 (2026-06-09): чистка легаси-имён → .rees46-search-* стали .fcsearch-*, короткие .r-* стали .fcs-*. Стили те же. v24 (2026-06-10): ATTACH-режим — .fcsearch-attached (host fixed из JS), обёртка без верхнего отступа; .title-search-result скрыта (родной автокомплит Aspro заменён). v25 (2026-06-10): attach — обёртка тянется по ширине хоста (по инпуту, из JS): .fcsearch-host.fcsearch-attached перебивает медиа-потолки 760/920 и колонку queries 240→353. Панель больше не зажата на 760 под широким инпутом. v26 (2026-06-10): [отменено в v27] attach мобайл .is-mobile-fill. v27 (2026-06-10): attach-мобайл переведён на фуллскрин own-режима — блок .is-mobile-fill удалён; «Показать N» в фуллскрине (.fcsearch-host.is-fullscreen) прибита к низу sticky (футер как у kari; касается и /poisk-test/). v28 (2026-06-11): attach-ПК тумблер в нативном инпуте (.fcs-hasinmode: relative-холдер, .fcs-inmode абсолютом справа, паддинг инпута 158px). Панель «Список»: .fcs-listsubmit__intro (описание сервиса), ряд кнопок .fcs-listsubmit__actions, «призрачная» .fcs-allbtn--ghost (Загрузить файл), мобильная textarea 240px/16px (iOS без зума). @version 2026-06-10-v28 ============================================================ */ :root { --r-green: #83B81D; --r-green-hover: #96d221; --r-ink: #333333; --r-ink-strong: #32332F; --r-ink-mid: #555555; --r-ink-soft: #999999; --r-line: #ededeb; --r-hover: #f5f6f3; --fcs-chip: #b6b8ac; --r-radius: 8px; } /* box-sizing только внутри наших компонентов (не трогаем сайт глобально) */ .fcsearch-wrapper, .fcsearch-wrapper *, .fcs-searchbox, .fcs-searchbox *, .fcs-mhead, .fcs-mhead * { box-sizing: border-box; } /* ---- mode toggle (поиск товара / списком) — segmented control ---- */ .fcs-modebar { display: flex; gap: 6px; background: #fff; border-radius: 4px; padding: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.04); width: fit-content; margin-bottom: 14px; } .fcs-modebar button { font-family: inherit; border: 0; background: transparent; color: var(--r-ink-mid); font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 4px; cursor: pointer; transition: background .18s ease, color .18s ease; } .fcs-modebar button:hover { color: var(--r-ink); } .fcs-modebar button[aria-pressed="true"] { background: var(--r-green); color: #fff; } /* ---- search input ---- */ .fcs-searchbox { position: relative; display: flex; align-items: center; background: #fff; border: 1.5px solid var(--r-line); border-radius: 4px; padding: 0 14px; height: 42px; transition: border-color .18s ease, box-shadow .18s ease; } .fcs-searchbox--focus { border-color: var(--r-green); box-shadow: 0 0 0 3px rgba(131,184,29,.12); } .fcs-searchbox__icon { width: 20px; height: 20px; color: var(--r-ink-soft); flex: none; } .fcs-searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; font-family: inherit; font-size: 16px; color: var(--r-ink); padding: 0 10px; background: transparent; } .fcs-searchbox input::placeholder { color: var(--r-ink-soft); } /* ✕ очистки поля — компактная кнопка внутри инпута, справа (flex-child) */ .fcs-searchbox__clear { border: 0; background: transparent; cursor: pointer; width: 22px; height: 22px; color: var(--r-ink-soft); flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .fcs-searchbox__clear:hover { background: var(--r-hover); color: var(--r-ink); } /* Крестик ЗАКРЫТИЯ. Десктоп: JS его не рисует (закрытие тапом вне / Esc). Мобайл: рисуется в колонке запросов, справа сверху — на уровне первого заголовка («Вы искали»/«Популярные запросы»), над стрелками разделов. */ .fcsearch-close { position: absolute; top: 14px; right: 14px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; color: var(--r-ink-soft); border-radius: 50%; transition: color .12s, background .12s; } .fcsearch-close:hover { color: var(--r-ink); background: var(--r-hover); } .fcsearch-close svg { width: 16px; height: 16px; } /* позиционирующий контекст для крестика на мобиле */ .fcsearch-wrapper.is-mobile .fcsearch-container--queries { position: relative; } /* in-input mode toggle (tumbler inside the field) */ .fcs-inmode { display: inline-flex; gap: 2px; background: #f1f2ee; border-radius: 4px; padding: 3px; margin-left: 6px; flex: none; } .fcs-inmode button { font-family: inherit; border: 0; background: transparent; color: var(--r-ink-soft); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 4px; cursor: pointer; transition: background .16s ease, color .16s ease; white-space: nowrap; } .fcs-inmode button:hover { color: var(--r-ink-mid); } .fcs-inmode button[aria-pressed="true"] { background: #fff; color: var(--r-green); box-shadow: 0 1px 2px rgba(0,0,0,.08); } /* keep the in-input toggle compact so it never overflows narrow (mobile) inputs */ .is-mobile .fcs-mhead .fcs-searchbox, .fcs-searchbox { flex-wrap: nowrap; } @media (max-width: 480px) { .fcs-inmode { margin-left: 4px; padding: 2px; } .fcs-inmode button { padding: 5px 8px; font-size: 11px; } .fcs-searchbox { padding: 0 8px; } } .fcs-listbox__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .fcs-listbox__cap { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--r-ink-soft); } /* textarea variant for "поиск списком" */ .fcs-listbox { background: #fff; border: 1.5px solid var(--r-line); border-radius: 12px; padding: 14px 16px; transition: border-color .18s ease, box-shadow .18s ease; } .fcs-listbox--focus { border-color: var(--r-green); box-shadow: 0 0 0 3px rgba(131,184,29,.12); } .fcs-listbox textarea { width: 100%; border: 0; outline: 0; resize: vertical; font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--r-ink); min-height: 84px; } .fcs-listbox textarea::placeholder { color: var(--r-ink-soft); } .fcs-listbox__hint { margin-top: 8px; font-size: 12px; color: var(--r-ink-soft); } /* ============================================================ Выпадашка ============================================================ */ .fcsearch-wrapper { position: relative; margin-top: 10px; width: 100%; max-width: 920px; max-height: min(700px, 86vh); /* v29: выше на ПК — больше карточек без пустоты снизу */ background: #fff; border-radius: 4px; box-shadow: 0 18px 48px -16px rgba(40,50,20,.28), 0 2px 6px rgba(0,0,0,.05); display: flex; flex-direction: column; /* v12: [скролл-тело .fcsearch-cols] + [футер] */ overflow: hidden; } .fcsearch-wrapper.is-mobile { width: 100%; max-width: 100%; flex-direction: column; max-height: 82vh; overflow: hidden; /* v12: скроллит .fcsearch-cols, футер прибит снизу */ } /* v12: общий скролл-контейнер колонок. Десктоп — ряд (queries|products), каждая колонка со своим скроллом. Мобайл/фуллскрин — стопка, скроллится целиком. Футер «Показать N» лежит ниже cols и потому всегда виден. */ .fcsearch-cols { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; } .fcsearch-wrapper.is-mobile .fcsearch-cols { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ============================================================ ATTACH-режим: дропдаун под родным инпутом Aspro (#title-search-input_*). host позиционируется из JS (position:fixed по координатам инпута), обёртка без верхнего отступа (зазор задаёт JS). Родную выпадашку Aspro гасим. ============================================================ */ .fcsearch-attached { position: fixed; } /* top/left/width/z-index — из JS */ .fcsearch-attached .fcsearch-popuphost { width: 100%; } /* attach: панель тянется по ширине инпута (из JS), не режется медиазапросами «узкого лаптопа» (.fcsearch-host.fcsearch-attached → специфичнее) */ .fcsearch-host.fcsearch-attached .fcsearch-wrapper { margin-top: 0; max-width: 100%; } .fcsearch-host.fcsearch-attached .fcsearch-container--queries { max-width: 353px; } /* attach-мобайл = фуллскрин (см. .fcsearch-host.is-fullscreen ниже) — отдельных правил не нужно */ /* ------------------------------------------------------------ ATTACH-ПК: тумблер «Товар/Список» внутри НАТИВНОГО инпута Aspro. JS вешает .fcs-hasinmode на холдер .search-input-div и кладёт туда .fcs-inmode; тут — позиционирование абсолютом справа по центру и правый паддинг инпута, чтобы текст не заезжал под кнопки. На мобиле не используется (тап открывает фуллскрин). ------------------------------------------------------------ */ .fcs-hasinmode { position: relative; } .fcs-hasinmode .fcs-inmode { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin-left: 0; /* инлайн-отступ own-варианта тут не нужен */ z-index: 3; /* поверх инпута */ padding: 2px; /* v29: компакт — нативные инпуты шапки ниже нашего (≈32px), тумблер не должен вылезать */ } .fcs-hasinmode .fcs-inmode button { padding: 3px 9px; font-size: 11px; } /* v29: высота тумблера ≈24px */ .fcs-hasinmode input.search-input { padding-right: 136px !important; } /* ширина компакт-тумблера (~120) + зазор */ .title-search-result { display: none !important; } /* родной автокомплит Aspro — заменён нашим попапом */ /* stacked layout: mode header on top, then the two columns */ .fcsearch-wrapper--stack { flex-direction: column; } .fcsearch-modehead { padding: 14px 18px 0; border-bottom: 1px solid var(--r-line); } .fcsearch-modehead .fcs-modebar { margin: 0 0 14px; background: #f3f4f0; box-shadow: none; width: 100%; } .fcsearch-modehead .fcs-modebar button { flex: 1; padding: 11px 18px; font-size: 15px; } .fcsearch-body { display: flex; align-items: stretch; } .fcsearch-wrapper--stack.is-mobile .fcsearch-body { flex-direction: column; } /* left column */ .fcsearch-container { padding: 18px 0; display: flex; flex-direction: column; min-height: 0; } .fcsearch-container--queries { max-width: 353px; width: 353px; flex: none; border-right: 1px solid var(--r-line); } .is-mobile .fcsearch-container--queries { max-width: 100%; width: 100%; border-right: 0; border-bottom: 1px solid var(--r-line); } .fcsearch-container--products { flex: 1; min-width: 0; } .fcsearch-group { margin-bottom: 22px; } .fcsearch-group:last-child { margin-bottom: 0; } .fcsearch-group-title { font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: .15px; color: var(--r-ink-strong); text-transform: lowercase; padding: 0 24px 6px; } .fcsearch-group-title::first-letter { text-transform: uppercase; } .fcsearch-group-description { display: flex; flex-direction: column; } /* query / category row */ .fcsearch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 24px; text-decoration: none; cursor: pointer; transition: background .14s ease; } .fcsearch-row:hover { background: var(--r-hover); } .fcsearch-row > span { font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: .15px; color: var(--r-ink-mid); } .fcsearch-row:hover > span { color: var(--r-ink); } .fcsearch-row__arrow { width: 16px; height: 16px; color: #cfd2ca; flex: none; } /* "Вы искали" chips */ .fcs-searched { padding: 0 24px 6px; } .fcs-searched__chips { display: flex; flex-wrap: wrap; gap: 7px; } .fcs-chip { font-family: inherit; border: 0; background: var(--fcs-chip); color: #fff; font-size: 13px; font-weight: 500; padding: 5px 11px; border-radius: 4px; cursor: pointer; transition: background .14s ease; line-height: 1.3; } .fcs-chip:hover { background: #9b9d90; } /* in-popup list field */ .fcs-listsubmit__field { width: 100%; min-height: 200px; resize: vertical; box-sizing: border-box; /* v29: 150→200 — плейсхолдер с примером-таблицей виден целиком */ margin: 4px 0 12px; padding: 14px 16px; border: 1.5px solid #e2e4dc; border-radius: 4px; font-family: inherit; font-size: 15px; line-height: 1.6; color: #333; background: #fff; outline: none; transition: border-color .15s; overflow: hidden; } .fcs-listsubmit__field:focus { border-color: #83B81D; } .fcs-listsubmit__field::placeholder { color: #b6b9ad; } .fcs-listsubmit__status { margin: 0 0 12px; } /* короткое описание сервиса над полем (текст с /bulk-order/, опция listIntro) */ .fcs-listsubmit__intro { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--r-ink-mid); max-width: 640px; } /* ряд кнопок панели «Список»: основная + «Загрузить файл»; на узких переносится */ .fcs-listsubmit__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* «призрачная» кнопка-ссылка (второстепенное действие): рамка вместо заливки, метрики как у .fcs-allbtn */ .fcs-allbtn--ghost { width: auto; padding: 0 22px; background: transparent; color: var(--r-green); border: 1.5px solid var(--r-green); text-decoration: none; } .fcs-allbtn--ghost:hover { background: rgba(131,184,29,.08); color: var(--r-green); } /* мобайл: поле пасты выше (инструкция-плейсхолдер видна целиком), 16px — iOS не зумит при фокусе */ .fcsearch-wrapper.is-mobile .fcs-listsubmit__field { min-height: 240px; font-size: 16px; } .fcs-searchbox--list input { color: #aeb1a6; cursor: default; } /* removable chip (Вы искали) with × */ .fcs-chip--rm { display: inline-flex; align-items: center; padding: 0; overflow: hidden; } .fcs-chip__txt { font-family: inherit; border: 0; background: transparent; color: #fff; font-size: 13px; font-weight: 500; line-height: 1.3; cursor: pointer; padding: 5px 4px 5px 11px; } .fcs-chip__x { border: 0; background: transparent; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 26px; padding: 0; opacity: .8; } .fcs-chip__x:hover { opacity: 1; background: rgba(0,0,0,.12); } .fcs-chip__x svg { width: 11px; height: 11px; } /* note line (Результат поиска) */ .fcs-note { padding: 2px 24px 14px; } .fcs-note h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--r-ink-strong); } .fcs-note p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--r-ink-mid); } /* ============================================================ Карточка товара — 3 варианта ============================================================ */ .fcsearch-product { display: flex; gap: 12px; padding: 2px 16px 2px 8px; text-decoration: none; align-items: stretch; transition: background .14s ease; cursor: pointer; } .fcsearch-product:hover { background: var(--r-hover); } .fcsearch-product__image { width: 90px; height: 90px; flex: none; align-self: center; position: relative; border-radius: 4px; background-size: cover; background-position: center; } .fcsearch-product__image--empty { background-size: contain; background-repeat: no-repeat; background-color: #f7f8f5; } .fcsearch-product__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; } .fcsearch-product__name { font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: .02em; color: var(--r-ink); } .fcsearch-product__row { display: flex; align-items: center; gap: 10px; justify-content: space-between; } .fcsearch-product__row--sub { gap: 12px; } /* левая ячейка 1-й строки (бонус) — тянется, чтобы цена прижималась вправо даже без бонуса */ .fcsearch-product__bonus-cell { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } .fcsearch-product__price { font-size: 17px; font-weight: 600; line-height: 22px; letter-spacing: .02em; color: var(--r-ink); white-space: nowrap; flex: none; } .fcsearch-product__price.is-onrequest { color: var(--r-ink-soft); } .fcsearch-product__unit { font-size: 13px; font-weight: 500; color: var(--r-ink-soft); margin-left: 1px; } .fcsearch-product__right { display: flex; align-items: center; gap: 12px; } .fcsearch-product__icons { display: inline-flex; align-items: center; gap: 4px; } .fcs-iconbtn { border: 0; background: transparent; cursor: pointer; padding: 0; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--r-ink-soft); transition: background .14s ease, color .14s ease; } .fcs-iconbtn:hover { background: var(--r-hover); color: var(--r-green); } .fcs-iconbtn svg { width: 18px; height: 18px; } .fcsearch-product__art { font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: .02em; color: var(--r-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* строка «упаковка» — справа во 2-й строке: «N шт/уп · цена за всё» */ .fcsearch-product__pack { font-size: 13px; line-height: 18px; color: var(--r-ink-mid); white-space: nowrap; flex: none; text-align: right; } .fcsearch-product__pack b { color: var(--r-ink); font-weight: 600; } /* бонус — монета + обычный (не зелёный, не жирный) текст «+ N на счёт», размер как арт/упаковка */ .fcsearch-product__bonus { display: inline-flex; align-items: center; color: var(--r-ink-mid); font-size: 13px; font-weight: 400; line-height: 1.3; white-space: nowrap; } .fcsearch-product__bonus-icon { width: 16px; height: 16px; flex: none; margin-right: 6px; display: block; } /* цена «По запросу» — приглушённая, не пугает отсутствием цифры */ .fcsearch-product__price.is-onrequest { color: var(--r-ink-soft); font-weight: 500; font-size: 14px; } .fcsearch-product__wish { flex: none; align-self: center; width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #cdd0c8; transition: color .14s ease, transform .14s ease; } .fcsearch-product__wish:hover { color: var(--r-green); } .fcsearch-product__wish.is-active { color: var(--r-green); transform: scale(1.05); } .fcsearch-product__wish svg { width: 22px; height: 22px; } /* --- variant: compact (имя в 3 строки, сердце сверху) --- */ .cards--compact .fcsearch-product__name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cards--compact .fcsearch-product { align-items: stretch; } .cards--compact .fcsearch-product__wish { align-self: flex-start; margin-top: 4px; } .cards--compact .fcsearch-product__body { justify-content: flex-start; padding-top: 2px; } /* --- variant: roomy (имя целиком, сердце по центру) — = Menu_Item2 --- */ .cards--roomy .fcsearch-product { padding: 12px 24px; } .cards--roomy .fcsearch-product__body { gap: 6px; } /* --- variant: framed (карточки в рамке, novel) --- */ .cards--framed .fcsearch-group-description { gap: 8px; padding: 0 16px; } .cards--framed .fcsearch-product { border: 1px solid var(--r-line); border-radius: 12px; padding: 12px; } .cards--framed .fcsearch-product:hover { background: #fff; border-color: #d6dbcb; box-shadow: 0 6px 16px -8px rgba(40,50,20,.25); } .cards--framed .fcsearch-product__name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* list-mode handoff panel */ .fcs-listsubmit { padding: 26px 28px 28px; } .fcs-listsubmit h4 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--r-ink-strong); } .fcs-listsubmit p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--r-ink-mid); max-width: 560px; } .fcs-listsubmit__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; } .fcs-listsubmit .fcs-allbtn { width: auto; padding: 0 22px; } .fcs-allbtn[disabled] { background: #cdd0c8; cursor: not-allowed; } /* ============================================================ Кнопка «Показать все товары» — внизу колонки товаров (в скролле) ============================================================ */ .fcsearch-products > .fcs-allbtn { width: auto; margin: 14px 12px 6px; } .fcs-allbtn { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 44px; background: var(--r-green); color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; border: 0; border-radius: var(--r-radius); cursor: pointer; transition: background ease .35s; } .fcs-allbtn:hover { background: var(--r-green-hover); } /* ============================================================ Loading skeleton ============================================================ */ @keyframes fcs-shine { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .fcs-skel { background: #eef0ea; background-image: linear-gradient(90deg, #eef0ea 0px, #f7f8f5 120px, #eef0ea 240px); background-size: 600px 100%; background-repeat: no-repeat; animation: fcs-shine 1.1s ease-in-out infinite; border-radius: 6px; } .fcs-skel-row { display: flex; gap: 12px; padding: 12px 24px; } .fcs-skel-row .fcs-skel-img { width: 88px; height: 88px; flex: none; border-radius: 8px; } .fcs-skel-row .fcs-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; } /* mobile header (строка с полем). Мобайл — обычный дропдаун в потоке, закрытие тапом вне / Esc; крестика и стрелки нет (.fcs-mhead__back скрыт). */ .fcs-mhead { display: flex; align-items: center; gap: 12px; padding: 14px 16px 0; } .fcs-mhead__back { border: 0; background: transparent; cursor: pointer; color: var(--r-ink-mid); width: 30px; height: 30px; display: none; align-items: center; justify-content: center; flex: none; } .fcs-mhead__back:hover { color: var(--r-ink); } .fcs-mhead__back svg { width: 22px; height: 22px; } .fcs-mhead .fcs-searchbox { flex: 1; height: 46px; } /* ============================================================ ФУЛЛСКРИН на мобиле (класс .is-fullscreen на host, ставится в open()). host на весь экран; сверху блок «← Поиск» + поле (flex:none); результаты скроллятся внутри popupHost. Закрытие — стрелка ← / Esc. host остаётся в потоке до открытия, поэтому страница НЕ схлопывается. ============================================================ */ .fcsearch-host.is-fullscreen { position: fixed; inset: 0; z-index: 2147483640; background: #fff; display: flex; flex-direction: column; } .fcsearch-host.is-fullscreen .fcs-mhead { flex: none; } .fcsearch-host.is-fullscreen .fcsearch-popuphost { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* в фуллскрине обёртка заполняет popupHost; скроллит .fcsearch-cols, футер прибит */ .fcsearch-host.is-fullscreen .fcsearch-wrapper.is-mobile { max-height: none; overflow: hidden; margin-top: 0; box-shadow: none; border-radius: 0; flex: 1 1 auto; min-height: 0; } /* шапка-колонка: [← Поиск] над полем */ .fcs-mhead--fs { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 14px 12px; } .fcs-mhead--fs .fcs-searchbox { flex: none; width: 100%; } .fcs-mhead__close { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; } .fcs-mhead--fs .fcs-mhead__back { display: flex; } /* стрелка видна только в фуллскрине */ .fcs-mhead__close-label { font-size: 18px; font-weight: 600; color: var(--r-ink); } /* «Показать N» в фуллскрине прибита к низу экрана (sticky внутри скролла .fcsearch-cols), как футер у kari */ .fcsearch-host.is-fullscreen .fcsearch-products > .fcs-allbtn { position: sticky; bottom: 0; z-index: 2; background: #fff; margin: 8px 12px 0; box-shadow: 0 -8px 14px -10px rgba(0,0,0,.25); } /* small responsive guard for the gallery on narrow screens */ @media (max-width: 980px) { .fcsearch-wrapper:not(.is-mobile) { width: 100%; max-width: 920px; } } /* ============================================================ Высота адаптивная (десктоп): попап ограничен по экрану (см. .fcsearch-wrapper max-height), список товаров скроллится внутри, заголовок и кнопка «Показать все» остаются на месте. ~7 карточек. ============================================================ */ .fcsearch-products { display: flex; flex-direction: column; min-height: 0; flex: 1; margin-bottom: 0; /* v29: скролл — на ВСЕЙ правой колонке (симметрично левой): дорожки одинаковой длины от верха колонок, заголовок «Популярное…» едет вместе с контентом */ overflow-y: auto; overflow-x: hidden; padding-right: 4px; } .fcsearch-products .fcsearch-group-description { /* v29: внутренний скролл списка снят — скроллится колонка целиком (см. выше) */ flex: none; min-height: auto; overflow: visible; padding-right: 0; } .fcsearch-container--queries { overflow-y: auto; overflow-x: hidden; } .fcsearch-products::-webkit-scrollbar, .fcsearch-container--queries::-webkit-scrollbar { width: 8px; } .fcsearch-products::-webkit-scrollbar-thumb, .fcsearch-container--queries::-webkit-scrollbar-thumb { background: #d8dad2; border-radius: 99rem; } /* ============================================================ МОБАЙЛ — обычный дропдаун в потоке (НЕ фуллскрин, НЕ position:fixed). position:fixed на хосте вырывал его из потока → страница схлопывалась вверх под меню. Поэтому мобайл = тот же дропдаун, одной колонкой, со своим скроллом до низа (см. .fcsearch-wrapper.is-mobile выше). Закрытие — тап вне / Esc, body НЕ лочим. ============================================================ */ .fcsearch-wrapper.is-mobile .fcsearch-container, .fcsearch-wrapper.is-mobile .fcsearch-products { min-height: auto; overflow: visible; } /* v29: на мобиле скроллит .fcsearch-cols, вложенный скролл колонки гасим */ .fcsearch-wrapper.is-mobile .fcsearch-products .fcsearch-group-description, .fcsearch-wrapper.is-mobile .fcsearch-container--queries { overflow: visible; flex: none; } /* ============================================================ Состояния, которых не было в макете ============================================================ */ /* Ошибка сети — мягкая плашка, попап не белеет (graceful degradation) */ .fcsearch-error { margin: 0 24px 14px; padding: 12px 14px; background: #fbf3ef; border: 1px solid #f0d6c8; border-radius: 10px; display: flex; align-items: center; gap: 10px; } .fcsearch-error__txt { flex: 1; font-size: 13px; line-height: 1.45; color: #8a4b2a; } .fcsearch-error__retry { flex: none; border: 0; background: #fff; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--r-ink-mid); padding: 7px 13px; border-radius: 7px; border: 1px solid #e6d3c8; transition: color .14s ease, border-color .14s ease; } .fcsearch-error__retry:hover { color: var(--r-ink); border-color: #d6c0b3; } /* Пустая история «Вы искали» — ничего не рисуем, но если надо подсказку: */ .fcsearch-empty-hint { padding: 0 24px 4px; font-size: 13px; line-height: 1.5; color: var(--r-ink-soft); } /* Кол-во в кнопке «Показать все» как мягкий бейдж */ .fcs-allbtn__count { opacity: .85; font-weight: 500; margin-left: 4px; } /* ПЛАНШЕТ/УЗКИЙ ЛАПТОП 641–1199: 2 колонки, но уже (как в макете) */ @media (min-width: 641px) and (max-width: 1199px) { .fcsearch-wrapper:not(.is-mobile) { max-width: 760px; } .fcsearch-container--queries { max-width: 240px; } .fcsearch-product__name { font-size: 13px; } .fcsearch-product__price { font-size: 15px; } } /* search-popup.css — @version 2026-06-11-v29 */