/*
Мост между MVweb Smart Search и вёрсткой темы.

Разметку плагина не трогаем: строка поиска, выпадающие подсказки и фасеты
остаются его, а тема переводит их на свои токены — поэтому светлая и тёмная
схемы работают там же, где и везде. Файл подключается после стилей плагина,
селекторы повторяют плагинные один в один: при равной специфичности побеждает
наш файл. Обновление плагина ничего не ломает, пропадёт только то правило,
чей селектор вендор переименует.
*/

.mvweb-ss {
  --mvweb-ss-accent: var(--c-brand);
  --mvweb-ss-field-bg: var(--c-surface);
  --mvweb-ss-border: var(--c-line);
  --mvweb-ss-text: var(--c-text);
  --mvweb-ss-icon: var(--c-on-brand);
  --mvweb-ss-radius: var(--radius-sm);
  --mvweb-ss-height: 40px;
  --mvweb-ss-font-size: 14px;
  --mvweb-ss-weight: 400;
  --mvweb-ss-pad-y: 0px;
  --mvweb-ss-pad-x: 12px;
  --mvweb-ss-submit-w: 44px;
  --mvweb-ss-max-width: 100%;
  --mvweb-ss-panel-width: 640px;
}

.mvweb-ss__input:focus,
.mvweb-ss__scope:focus {
  box-shadow: none;
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

.mvweb-ss__input::placeholder {
  color: var(--c-muted);
}

.mvweb-ss__scope {
  max-inline-size: 190px;
  background-color: var(--c-surface-2);
  color: var(--c-muted);
  font-size: 13px;
}

.mvweb-ss__submit {
  color: var(--c-on-brand);
}
.mvweb-ss__submit:hover {
  background: color-mix(in oklab, var(--c-brand), #000 12%);
}

.mvweb-ss__clear {
  color: var(--c-muted);
}
.mvweb-ss__clear:hover {
  color: var(--c-text);
}

.mvweb-ss__panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / .18);
}

.mvweb-ss__close {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-brand);
}

.mvweb-ss__group,
.mvweb-ss__suggest-head,
.mvweb-ss__history-clear,
.mvweb-ss__cat-count,
.mvweb-ss__cat-context,
.mvweb-ss__empty {
  color: var(--c-muted);
}

.mvweb-ss .mvweb-ss__item,
.mvweb-ss .mvweb-ss__item:hover,
.mvweb-ss .mvweb-ss__item:focus,
.mvweb-ss .mvweb-ss__item.is-active {
  color: var(--c-text);
}

.mvweb-ss__item:hover,
.mvweb-ss__item:focus,
.mvweb-ss__item.is-active,
.mvweb-ss__suggest-item:hover,
.mvweb-ss__suggest-item:focus,
.mvweb-ss__suggest-item.is-active,
.mvweb-ss__cat:hover,
.mvweb-ss__cat:focus,
.mvweb-ss__cat.is-active {
  background: var(--c-surface-2);
}

.mvweb-ss__cat,
.mvweb-ss__cat-name,
.mvweb-ss__item-title,
.mvweb-ss__details-title,
.mvweb-ss__all,
.mvweb-ss__cta,
.mvweb-ss__correction {
  color: var(--c-text);
}

.mvweb-ss__correction-link,
.mvweb-ss__details-view {
  color: var(--c-brand);
}

.mvweb-ss__thumb,
.mvweb-ss__details-img {
  background: var(--c-surface-2);
}
.mvweb-ss__thumb--empty {
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
}

.mvweb-ss__item-price,
.mvweb-ss__details-price {
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.mvweb-ss__details-stock.is-in {
  color: var(--c-ok);
}
.mvweb-ss__details-stock.is-out {
  color: var(--c-bad);
}

.mvweb-ss__details {
  border-left: 1px solid var(--c-line);
  background: var(--c-surface-2);
}

.mvweb-ss__details-excerpt {
  color: var(--c-muted);
}

.mvweb-ss__details-cart {
  background: var(--c-brand);
  color: var(--c-on-brand);
}

.mvweb-ss__tabs {
  border-bottom: 1px solid var(--c-line);
}

.mvweb-ss__tab {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-muted);
}
.mvweb-ss__tab.is-active {
  border-color: var(--c-brand);
  background: var(--c-brand);
  color: var(--c-on-brand);
}

.mvweb-ss__spinner {
  border-top-color: var(--c-brand);
}

.mvweb-ss-facets {
  padding: 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
}

.mvweb-ss-facets__legend {
  color: var(--c-text);
  font-size: 15px;
  font-weight: 600;
}

.mvweb-ss-facets__opt,
.mvweb-ss-facets__opt-name {
  color: var(--c-text);
}
.mvweb-ss-facets__opt:hover {
  color: var(--c-brand);
}

.mvweb-ss-facets__opt-count,
.mvweb-ss-facets__price-sep {
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.mvweb-ss-facets__price-input {
  min-block-size: 36px;
  padding: 0 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
}

.mvweb-ss-facets__apply {
  min-block-size: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-weight: 600;
}
.mvweb-ss-facets__apply:hover {
  background: color-mix(in oklab, var(--c-brand), #000 12%);
}

.mvweb-ss-facets__reset {
  color: var(--c-muted);
}
.mvweb-ss-facets__reset:hover {
  color: var(--c-brand);
}

.mvweb-ss-sort__label {
  color: var(--c-muted);
}

.mvweb-ss-sort__select {
  min-block-size: 36px;
  padding: 0 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
}