/* Подсказки поиска в шапке — по стенду docs/mockups/search-dropdown-stand.html
   (финал 04.09.2026). Разметка: extension/module/smartsearch.twig. Токены —
   jv-variables.css с фолбэками. Старые правила custom.css «Поиск: автоподсказка»
   бьют по .item_block/.title и здесь не срабатывают: у новой разметки свои классы. */
.jv-search-block .smartsearch { background: #fff; }
.ss { font-family: var(--jv-font-family, inherit); color: var(--jv-text-primary, #171717); font-size: 14px; line-height: 1.45; }
.ss a { text-decoration: none; color: inherit; }
.ss em { font-style: normal; }
/* строка уточнения */
.ss-refine { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; background: #fafafa; border-bottom: 1px solid #f0f0f0; }
.ss-refine__t { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ss-refine__t svg { color: var(--jv-primary, #E94E1B); }
.ss-refine__groups { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; min-width: 0; }
.ss-refine__g { display: inline-flex; align-items: center; gap: 6px; }
.ss-refine__l { font-size: 12.5px; color: var(--jv-text-muted, #8a8a8a); margin-right: 2px; white-space: nowrap; }
/* чипы */
.ss-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: #5f5f5f; background: #f2f2f2; border-radius: 6px; padding: 2px 8px; line-height: 1.5; white-space: nowrap; }
.ss-chip--spec { background: #fff; border: 1px solid #e6e6e6; font-weight: 500; }
.ss-chip--rf { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--jv-border, #d9d9d9); background: #fff; font-size: 13px; font-weight: 500; color: var(--jv-text-secondary, #303131); cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.ss-chip--rf b { color: var(--jv-primary, #E94E1B); font-weight: 700; margin-right: 4px; }
.ss-chip--rf:hover { border-color: var(--jv-primary, #E94E1B); color: var(--jv-primary, #E94E1B); }
.ss-chip--rf.is-on { background: var(--jv-primary, #E94E1B); border-color: var(--jv-primary, #E94E1B); color: #fff; }
.ss-chip--rf.is-on b { color: #fff; }
.ss-chip--rf.is-on:hover { background: var(--jv-primary-hover, #d1410f); border-color: var(--jv-primary-hover, #d1410f); }
.ss-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-attr { font-size: 12px; color: var(--jv-primary, #E94E1B); align-self: center; }
/* сетка: список + правая колонка */
.ss-grid { display: grid; grid-template-columns: 1fr 250px; }
.ss-main { min-width: 0; padding: 6px 0; }
.ss ul.items { margin: 0 !important; padding: 0 !important; list-style: none; max-height: none !important; overflow: visible !important; }
.ss li.item { list-style: none; border-top: 1px solid #f4f4f4 !important; background: transparent !important; }
.ss li.item:first-child { border-top: 0 !important; }
/* строка товара */
.ss-row__a { display: flex; align-items: center; gap: 14px; padding: 8px 14px; transition: background .16s ease; }
.ss-row__img { flex: none; width: 64px; height: 64px; border-radius: 10px; background: #f6f6f6; display: flex; align-items: center; justify-content: center; transition: background .16s ease; }
.ss-row__img img { max-width: 54px; max-height: 54px; width: auto; height: auto; }
.ss-row__b { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-row__name { font-size: 14.5px; font-weight: 600; line-height: 1.3; transition: color .16s ease; }
.ss-row__name b { color: var(--jv-primary, #E94E1B); }
.ss li.item:hover .ss-row__a, .ss li.item.current .ss-row__a { background: #FAFAFA; }
.ss li.item:hover .ss-row__name, .ss li.item.current .ss-row__name { color: var(--jv-primary, #E94E1B); }
.ss li.item:hover .ss-row__img, .ss li.item.current .ss-row__img { background: #ECECEC; }
.ss li.item.current { position: relative; }
.ss li.item.current::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--jv-primary, #E94E1B); }
/* карточка лучшего совпадения — светло-серый тон без рамки */
.ss-hero__a { display: flex; align-items: center; gap: 16px; margin: 8px 8px 4px; padding: 14px; border-radius: 12px; background: #F7F7F8; transition: background .16s ease; }
.ss li.item:hover .ss-hero__a, .ss li.item.current .ss-hero__a { background: #F2F3F6; }
.ss-hero__img { flex: none; width: 112px; height: 112px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; }
.ss-hero__img img { max-width: 96px; max-height: 96px; width: auto; height: auto; }
.ss-hero__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-hero__k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jv-primary, #E94E1B); }
.ss-hero__name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.ss-hero__name b { color: var(--jv-primary, #E94E1B); }
.ss-hero .ss-chip--code, .ss-hero .ss-chip--spec { background: #fff; }
.ss-hero .ss-chip--code { border: 1px solid #e6e6e6; }
.ss-hero__btn { flex: none; align-self: center; height: 38px; padding: 0 18px; border-radius: 9px; background: var(--jv-primary, #E94E1B); color: #fff; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; transition: background .16s ease, transform .16s ease; }
.ss li.item:hover .ss-hero__btn { background: var(--jv-primary-hover, #d1410f); }
.ss-hero__btn:active { transform: translateY(1px); }
/* правая колонка */
.ss-side { border-left: 1px solid #f0f0f0; background: #fafafa; padding: 8px 16px 14px; min-width: 0; }
.ss-side__h { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jv-text-muted, #8a8a8a); margin: 12px 0 4px; }
.ss-side__h:first-child { margin-top: 6px; }
.ss-sl { display: flex; align-items: center; gap: 6px; padding: 6px; margin: 0 -6px; border-radius: 6px; font-size: 13.5px; color: var(--jv-text-secondary, #303131); transition: color .16s ease, background .16s ease; }
.ss-sl em { margin-left: auto; color: var(--jv-text-muted, #8a8a8a); font-size: 12.5px; }
.ss-sl:hover { color: var(--jv-primary, #E94E1B); background: #F2F3F6; }
.ss-sl--c svg { color: var(--jv-primary, #E94E1B); flex: none; }
/* футер */
.ss-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid #f0f0f0; }
.ss-foot__txt { font-size: 13.5px; color: var(--jv-text-secondary, #303131); }
.ss-foot__txt b { color: var(--jv-text-primary, #171717); }
.ss-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 10px; background: var(--jv-primary, #E94E1B); color: #fff !important; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .16s ease; }
.ss-btn:hover { background: var(--jv-primary-hover, #d1410f); }
/* фокус с клавиатуры */
.ss a:focus-visible { outline: 2px solid var(--jv-primary, #E94E1B); outline-offset: 2px; }
/* ширина выпадашки: на десктопе не у́же 820px (поле бывает у́же), на планшете и
   телефоне — почти во всю ширину экрана; left/width ставит JS (search.twig),
   здесь только запас по высоте и прокрутка внутри */
.jv-search-block .smartsearch.ss-wide { max-height: calc(100vh - 140px); overflow-y: auto !important; }
@media (min-width: 1200px) { .jv-search-block .smartsearch { min-width: 820px; } }
/* телефон */
@media (max-width: 640px) {
  .ss-refine { display: block; padding: 10px 12px; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ss-refine::-webkit-scrollbar { display: none; }
  .ss-refine__t { display: flex; margin-bottom: 8px; }
  .ss-refine__groups { display: inline-flex; flex-wrap: nowrap; gap: 12px; }
  .ss-refine__g { white-space: nowrap; }
  .ss-grid { grid-template-columns: 1fr; }
  .ss-hero__a { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .ss-hero__img { width: 100%; height: 132px; }
  .ss-hero__img img { max-width: 104px; max-height: 104px; }
  .ss-hero__name { font-size: 15px; }
  .ss-hero__btn { width: 100%; justify-content: center; height: 40px; margin-top: 2px; }
  .ss-row__a { gap: 10px; padding: 8px 12px; align-items: flex-start; }
  .ss-row__img { width: 56px; height: 56px; border-radius: 8px; }
  .ss-row__img img { max-width: 46px; max-height: 46px; }
  .ss-row__name { font-size: 14px; }
  .ss-meta { gap: 4px; }
  .ss-chip { font-size: 11.5px; padding: 2px 7px; }
  .ss-side { border-left: 0; border-top: 1px solid #f0f0f0; background: #fff; padding: 4px 12px 10px; }
  .ss-side .ss-sl { display: inline-flex; gap: 6px; margin: 0 6px 6px 0; padding: 6px 10px; border: 1px solid var(--jv-border, #d9d9d9); border-radius: 999px; font-size: 13px; background: #fff; }
  .ss-side .ss-sl em { margin-left: 0; }
  .ss-side .ss-sl--c { display: flex; border: 0; border-radius: 0; margin: 0; padding: 6px 0; background: transparent; }
  .ss-side .ss-sl--c em { margin-left: auto; }
  .ss-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .ss-btn { justify-content: center; }
}