/* Умный поиск VERITAN — подсказки, страница результатов, подборки. Цвета — как у сайта (#FEDC29, #303030).
   Фильтры используют разметку и стили фильтра каталога (main.css); здесь — только дополнения. */

/* ───── подсказки в шапке ───── */
.smart-search .vs-dd { display: flex; width: 100%; }
.smart-search .vs-opt { display: block; border-radius: 3px; outline: none; }
/* выделение при наведении и стрелках — серое, как в прежних подсказках сайта (без жёлтой рамки) */
.smart-search .result-categorys .vs-opt.is-active { background: #F8F8F8; }
.smart-search .vs-dd-item.is-active { background-color: #f8f9ff; }
.smart-search .vs-opt-item.is-active { background: transparent; }
.smart-search .vs-opt-phrase { display: flex; align-items: center; gap: 6px; }
.smart-search .vs-opt-phrase b { font-weight: 800; color: #303030; }
.smart-search .vs-ico { width: 14px; height: 14px; flex: 0 0 14px; fill: #828282; }
.smart-search .vs-tag { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 8px;
    background: #303030; color: #fff; margin-right: 4px; vertical-align: 1px; }
.smart-search .vs-opt-col { font-weight: 700; }
.smart-search .vs-count { color: #828282; font-size: 12px; margin-left: 4px; }
.smart-search .vs-stock { font-size: 12px; white-space: nowrap; }
.smart-search .vs-stock.is-in { color: #2e7d32; }
.smart-search .vs-stock.is-out { color: #8a6d00; }
/* разделы левой колонки («Искать», «Подборки», «Категории») — с отступом друг от друга */
.smart-search .vs-dd-left > .result-categorys + .search-category,
.smart-search .vs-dd-left > .vs-dd-empty + .search-category { margin-top: 24px; }
.smart-search .vs-dd-all { margin-top: 10px; padding: 10px 14px; text-align: center; font-weight: 700; background: #FEDC29;
    color: #303030; border-radius: 45px; }
.smart-search .vs-dd-all.is-active { background: #FFD600; box-shadow: none; }
/* наведение — только там, где есть мышь (на телефоне после нажатия оно «застревает» на элементе) */
@media (hover: hover) {
    .smart-search .vs-dd-all:hover { background: #FFD600; box-shadow: none; }
    .vs-chip:hover { background: #EAEAEA; color: #303030; text-decoration: none; }
    .vs-chip-x:hover { color: #DD2C01; text-decoration: none; }
    .vs-collection-hit:hover { color: #FEDC29; text-decoration: none; }
    .vs-btn:hover { background: #FFD600; color: #303030; text-decoration: none; }
    .vs-btn-light:hover { background: #EAEAEA; }
}
.smart-search .vs-dd-foot { display: none; }
.smart-search .vs-dd-empty, .smart-search .vs-dd-state { color: #787878; font-size: 14px; padding: 10px 4px; }
.smart-search .vs-dd-fix { margin: 0 0 8px; padding: 6px 10px; background: #FFF6C8; border-radius: 6px; font-size: 13px; color: #303030; }
.smart-search .vs-dd-error { color: #b23b1e; }
.smart-search.vs-loading .vs-dd:not(.vs-skel) { opacity: .55; transition: opacity .15s; }
.smart-search .result-name-item b { font-weight: 800; }

/* «скелет» окна, пока ждём ответ (с .smart-search — сильнее правила сайта «.mob-head div { width: auto }») */
.smart-search .vs-skel { pointer-events: none; }
.vs-sk { position: relative; overflow: hidden; border-radius: 4px; background: #EEF0F2; }
.vs-sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%);
    animation: vs-shimmer 1.15s ease-in-out infinite; }
@keyframes vs-shimmer { 100% { transform: translateX(100%); } }
.smart-search .vs-sk-title { width: 46%; height: 14px; margin: 2px 0 18px; }
.smart-search .vs-sk-gap { margin-top: 26px; }
.smart-search .vs-sk-line { height: 12px; margin: 0 0 12px 6px; }
.smart-search .vs-sk-item { display: flex; align-items: flex-start; gap: 14px; padding: 6px; margin-bottom: 10px; }
.smart-search .vs-sk-img { flex: 0 0 56px; width: 56px; height: 50px; border-radius: 6px; }
.smart-search .vs-sk-txt { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.smart-search .vs-sk-txt .vs-sk-line { margin-left: 0; margin-bottom: 8px; }
.smart-search .vs-sk-price { width: 64px; height: 14px; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
    .vs-sk::after { animation: none; }
}

/* ───── страница результатов и подборки ───── */
/* шапка выдачи (общие правила — list-head.css): что учёл поиск и выбранные фильтры — под сортировкой */
.vs-page .vs-top .vs-note { display: table; margin: 0 0 12px; }
.vs-page .vs-head .vs-chips, .vs-page .vs-head .vs-applied { margin: 12px 0 0; }
.vs-page .vs-head .vs-collection-hit { margin: 12px 0 0; }
.vs-page .vs-col-title { margin: 4px 0 14px; }
.vs-note { color: #4F4F4F; font-size: 14px; margin: 4px 0 10px; }
.vs-note a { text-decoration: underline; }
.vs-note-fix { background: #FFF9D6; border-left: 4px solid #FEDC29; padding: 8px 12px; border-radius: 4px; }

.vs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.vs-chips-title { color: #787878; font-size: 13px; margin-right: 2px; }
.vs-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 16px; background: #F0F2F4;
    color: #303030; font-size: 13px; line-height: 1.3; text-decoration: none; }
.vs-chip-cond.is-required { background: #FFF6C2; }
.vs-chip-label { color: #787878; }
.vs-chip-x { margin-left: 4px; font-size: 16px; line-height: 1; color: #787878; text-decoration: none; }

.vs-collection-hit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px;
    background: #303030; color: #fff; margin: 0 0 14px; font-weight: 700; text-decoration: none; }
.vs-collection-hit .vs-chip-label, .vs-collection-hit .vs-count { color: #ccc; font-weight: 400; }

/* фильтр (вид — из фильтра каталога): число товаров у значения и уточнение одинаковых категорий */
.vs-page .filters .vs-count, .vs-page .catalog-filter-mobile .vs-count { color: #9A9A9A; font-size: 12px; font-weight: 400; }
.vs-page .vs-cat-parent { display: block; color: #9A9A9A; font-size: 11px; line-height: 14px; font-weight: 400; }
.vs-page .vs-f-stock { margin-top: 14px; }
.vs-page .vs-f-price .var-filter { padding-bottom: 6px; }

/* пока открывается новая выдача (без перезагрузки страницы, smart-search-v2.js): вместо карточек — заглушки той же формы
   (плиткой и списком: те же части vc-media / vc-info / vc-buy, что у карточки), «Найдено» и условия — бледнее */
.vs-page.vs-busy .vs-main { pointer-events: none; }
.vs-page.vs-busy .vs-found,
.vs-page.vs-busy .vs-chips,
.vs-page.vs-busy .vs-applied { opacity: .5; transition: opacity .15s; }
.vs-skel .vs-sk { display: block; }
.vs-skel .vs-sk-img { width: 90%; margin: 5%; padding-bottom: 90%; border-radius: 8px; }
.vs-skel .vc-info { padding-top: 8px; }
.vs-skel .vs-sk-l { height: 12px; margin-top: 10px; }
.vs-skel .vs-w40 { width: 40%; }
.vs-skel .vs-w55 { width: 55%; }
.vs-skel .vs-w75 { width: 75%; }
.vs-skel .vs-sk-price { width: 50%; height: 24px; margin-top: 12px; }
.vs-skel .vs-sk-btn { width: 100%; height: 40px; margin-top: 12px; border-radius: 45px; }

.vs-btn { display: inline-block; border: 0; border-radius: 45px; background: #FEDC29; color: #303030; font-weight: 700;
    padding: 9px 20px; cursor: pointer; text-decoration: none; }
.vs-btn-light { background: #F0F2F4; }
.vs-reset { color: #787878; font-size: 13px; text-decoration: underline; }

.vs-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }


/* карточки — те же, что в каталоге (special-item в .row-item-special): сетку, отступы и вид «списком» задаёт main.css.
   Обёртки .vs-card (аналитика) и .item (граница карточки для расширения) в раскладке не участвуют */
.vs-page .row-item-special > .vs-card,
.vs-page .row-item-special > .vs-card > .item { display: contents; }

.vs-empty { background: #F0F2F4; border-radius: 8px; padding: 18px 20px; margin-bottom: 20px; }
.vs-empty p { margin: 0 0 8px; font-size: 16px; color: #303030; }
.vs-expand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vs-expand > span { color: #787878; font-size: 13px; }

.vs-alt { margin: 26px 0 10px; padding-top: 18px; border-top: 2px dashed #EAEAEA; }
.vs-alt-title { font-size: 20px; margin-bottom: 4px; }
.vs-alt-all { margin-top: 6px; }

.vs-collection-text { margin: 0 0 18px; }

/* «Не нашли, что искали?»: общий вид маленькой кнопки и окна формы — в list-head.css; здесь — только поиск */
.vs-empty .vs-ask-empty { display: inline-block; margin: 6px 0 4px; padding: 10px 22px; }
@media (min-width: 1001px) {
    .vs-ask-mob { display: none; }
}

/* плашка-приглашение под товарами (.vs-ask-bottom) — тоже в list-head.css */


/* ───── телефон и планшет (граница — как у сайта, 1000 px) ───── */
@media (max-width: 1000px) {
    /* строка «≡ сортировка … + Фильтры» — как в каталоге */
    .vs-mob-bar .vs-mob-sort-cur { display: inline-flex; align-items: center; text-transform: lowercase; cursor: pointer; }
    .vs-mob-bar .drop-down-sort a { display: flex; align-items: center; padding: 7px 4px; text-transform: lowercase; }
    .vs-mob-bar .open-filter-mobile { cursor: pointer; }
    /* «Не нашли?» на телефоне — под товарами, не в шапке */
    .vs-ask-side { display: none; }
    /* шапка: сортировка и вид здесь не показываются — остаётся «Найдено N товаров» */
    .vs-page .vs-head .vs-chips, .vs-page .vs-head .vs-applied, .vs-page .vs-head .vs-collection-hit { margin-top: 10px; }

    /* окно «Фильтр»: снизу место под кнопку «Посмотреть N товаров» */
    .vs-mpanel.catalog-filter-mobile { padding-bottom: 150px; }
    .vs-mpanel .vs-mstock { padding-top: 0; padding-bottom: 0; }
    .vs-show-results .show-filter-results-buttons { font-weight: 700; color: #303030; font-size: 15px; }
    .vs-show-results .show-filter-results-buttons.vs-counting { opacity: .65; }

    /* подсказки: колонки друг под другом, окно — ровно до низа видимой части экрана */
    .smart-search .vs-dd { flex-direction: column; }
    .smart-search .vs-dd .w-40, .smart-search .vs-dd .w-60 { width: 100%; max-width: 100%; border: 0; }
    .smart-search .vs-dd .search-category { margin-bottom: 12px; }
    .search.active .smart-search { height: 100vh; height: var(--vs-vvh, 100vh); }
    .search.active .smart-search.active { padding-bottom: 0; }
    .search.active .smart-search .vs-dd-items { padding-bottom: 6px; }
    .smart-search .vs-dd-right .vs-dd-all-desk { display: none; }
    .smart-search .vs-dd-foot { display: block; position: -webkit-sticky; position: sticky; bottom: 0; z-index: 2;
        background: #fff; padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -6px 14px rgba(0, 0, 0, .06); }
    .smart-search .vs-dd-foot .vs-dd-all { margin: 0; }
    .smart-search .vs-sk-item { margin-bottom: 6px; }

    /* окно поиска — белое до самого низа экрана: список кончается над клавиатурой, а клавиатура iPhone
       полупрозрачная — без белого фона под ней просвечивал баннер главной страницы */
    .search.active { bottom: 0; background-color: #fff; }
    .search.active::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: #fff; }
}

