/* =====================================================
   all_search-suggest.css v2.0
   Стили dropdown-автодополнения поиска.
   JS: all_search-suggest.js v2.0
   HTML: dropdown + <template> в шаблоне шапки

   Дизайн-система:
   - Dropdown «приземляется» из тёмной шапки —
     slide-down + fade, timing из MICRO-токенов.
   - Glassmorphism (dark) / чистый свет (light).
   - Stock-dot через ::before (без изменений template).
   - Mark-подсветка accent-тоном (не жёлтая).
   - Hover — левая accent-полоска (навигационный паттерн).
   - Mobile ≤600px — bottom-sheet с «ручкой».
   - Custom scrollbar, reduced-motion, a11y focus-visible.

   Fallback: все CSS custom properties имеют значение по умолчанию,
   файл работает standalone без :root-переменных.
   ===================================================== */


/* ── Локальные токены ── */

.search-suggest {
  /* Timing (из MICRO) */
  --ss-t-enter: 0.3s cubic-bezier(.22, 1, .36, 1);
  --ss-t-base:  0.18s ease;
  --ss-t-fast:  0.12s ease;

  /* Размеры */
  --ss-photo:     52px;
  --ss-radius:    12px;
  --ss-pad-x:     16px;
  --ss-pad-y:     10px;
  --ss-gap:       12px;

  /* Light-тема (defaults) */
  --ss-bg:            #ffffff;
  --ss-bg-item-hover: #f4f6f9;
  --ss-bg-item-kbd:   #eef1f6;
  --ss-border:        rgba(0, 0, 0, .06);
  --ss-border-sep:    rgba(0, 0, 0, .05);
  --ss-shadow:        0  4px 12px rgba(0, 0, 0, .06),
                      0 16px 48px rgba(0, 0, 0, .10);

  --ss-text:          #1a1a2e;
  --ss-text-sec:      #5a5f72;
  --ss-text-muted:    #8b90a0;
  --ss-accent:        #2563eb;
  --ss-accent-subtle: rgba(37, 99, 235, .07);
  --ss-green:         #16a34a;
  --ss-green-subtle:  rgba(22, 163, 74, .08);
  --ss-orange:        #ea580c;

  --ss-mark-bg:       rgba(37, 99, 235, .10);
  --ss-mark-color:    #1d4ed8;

  --ss-photo-bg:      #f4f6f9;
  --ss-photo-border:  rgba(0, 0, 0, .04);

  --ss-scrollbar-thumb: rgba(0, 0, 0, .12);
  --ss-scrollbar-track: transparent;
}


/* ── Dropdown-контейнер ── */

.search-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1000;

  background: var(--ss-bg);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);

  max-height: min(70vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;

  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.4;

  /* Вход: slide-down + fade */
  animation: ss-enter var(--ss-t-enter) both;
}

/* Scrollbar */
.search-suggest::-webkit-scrollbar {
  width: 6px;
}
.search-suggest::-webkit-scrollbar-track {
  background: var(--ss-scrollbar-track);
}
.search-suggest::-webkit-scrollbar-thumb {
  background: var(--ss-scrollbar-thumb);
  border-radius: 3px;
}
.search-suggest {
  scrollbar-width: thin;
  scrollbar-color: var(--ss-scrollbar-thumb) var(--ss-scrollbar-track);
}


/* ── Анимация входа ── */

@keyframes ss-enter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ── Элемент списка ── */

.search-suggest__item {
  position: relative;
  border-bottom: 1px solid var(--ss-border-sep);
}

.search-suggest__item:last-child {
  border-bottom: none;
}

/* Левая accent-полоска (hover / keyboard) */
.search-suggest__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ss-accent);
  opacity: 0;
  transform: scaleY(.5);
  transition: opacity var(--ss-t-fast), transform var(--ss-t-base);
}


/* ── Hover / Active (keyboard) states ── */

.search-suggest__item:hover::before,
.search-suggest__item_active::before {
  opacity: 1;
  transform: scaleY(1);
}

.search-suggest__item:hover {
  background: var(--ss-bg-item-hover);
}

.search-suggest__item_active {
  background: var(--ss-bg-item-kbd);
}

/* Keyboard active имеет приоритет */
.search-suggest__item_active::before {
  opacity: 1;
}


/* ── Ссылка-обёртка ── */

.search-suggest__link {
  display: flex;
  align-items: center;
  gap: var(--ss-gap);
  padding: var(--ss-pad-y) var(--ss-pad-x);
  padding-left: calc(var(--ss-pad-x) + 4px); /* место под accent-полоску */
  text-decoration: none;
  color: var(--ss-text);
  transition: none; /* hover на item, не на link */
}

/* Убираем дублирующий hover с link — он на item */
.search-suggest__link:hover {
  background: none;
}


/* ── Фото ── */

.search-suggest__photo {
  flex-shrink: 0;
  width: var(--ss-photo);
  height: var(--ss-photo);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ss-photo-bg);
  border: 1px solid var(--ss-photo-border);
  transition: border-color var(--ss-t-fast);
}

.search-suggest__item:hover .search-suggest__photo,
.search-suggest__item_active .search-suggest__photo {
  border-color: var(--ss-accent);
}

.search-suggest__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.search-suggest__no-photo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-photo-bg);
}

/* Плейсхолдер-иконка для no-photo */
.search-suggest__no-photo::after {
  content: '';
  width: 22px;
  height: 22px;
  opacity: .18;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}


/* ── Текстовый блок ── */

.search-suggest__info {
  flex: 1;
  min-width: 0;
}

.search-suggest__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ss-text);

  /* 2-строчный clamp */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-suggest__brand {
  font-size: 12px;
  color: var(--ss-text-muted);
  margin-top: 3px;
  letter-spacing: .01em;
}


/* ── Цена / наличие ── */

.search-suggest__right {
  flex-shrink: 0;
  text-align: right;
  padding-left: 8px;
}

.search-suggest__price {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--ss-text);
}

/* Stock — общие стили */
.search-suggest__stock_yes,
.search-suggest__stock_no {
  font-size: 11px;
  line-height: 1.2;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

/* Stock dot через ::before */
.search-suggest__stock_yes::before,
.search-suggest__stock_no::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.search-suggest__stock_yes {
  color: var(--ss-green);
  font-weight: 500;
}
.search-suggest__stock_yes::before {
  background: var(--ss-green);
  box-shadow: 0 0 0 2px var(--ss-green-subtle);
}

.search-suggest__stock_no {
  color: var(--ss-text-muted);
}
.search-suggest__stock_no::before {
  background: var(--ss-text-muted);
  opacity: .4;
}


/* ── Подсветка совпадений ── */

.search-suggest__mark {
  background: var(--ss-mark-bg);
  color: var(--ss-mark-color);
  padding: 1px 3px;
  margin: 0 -1px;
  border-radius: 3px;
  font-weight: 600;
  /* Без собственного перехода — мгновенно */
}


/* ═══════════════════════════════════════════════════════
   ТЁМНАЯ ТЕМА — Glassmorphism
   ═══════════════════════════════════════════════════════ */

[data-theme="dark"] .search-suggest {
  --ss-bg:            rgba(18, 22, 32, .88);
  --ss-bg-item-hover: rgba(255, 255, 255, .05);
  --ss-bg-item-kbd:   rgba(255, 255, 255, .08);
  --ss-border:        rgba(255, 255, 255, .08);
  --ss-border-sep:    rgba(255, 255, 255, .05);
  --ss-shadow:        0  4px 12px rgba(0, 0, 0, .20),
                      0 20px 60px rgba(0, 0, 0, .40),
                      inset 0  1px 0 rgba(255, 255, 255, .05);

  --ss-text:          #e8e9ed;
  --ss-text-sec:      #9ea3b5;
  --ss-text-muted:    #6b7496;
  --ss-accent:        #5b8def;
  --ss-accent-subtle: rgba(91, 141, 239, .10);
  --ss-green:         #34d670;
  --ss-green-subtle:  rgba(52, 214, 112, .12);

  --ss-mark-bg:       rgba(91, 141, 239, .18);
  --ss-mark-color:    #93b8ff;

  --ss-photo-bg:      rgba(255, 255, 255, .04);
  --ss-photo-border:  rgba(255, 255, 255, .06);

  --ss-scrollbar-thumb: rgba(255, 255, 255, .12);

  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

/* Fallback: если backdrop-filter не поддерживается — непрозрачный фон */
@supports not (backdrop-filter: blur(1px)) {
  [data-theme="dark"] .search-suggest {
    --ss-bg: #151a28;
  }
}


/* ═══════════════════════════════════════════════════════
   МОБИЛЬНЫЕ: ≤600px — bottom-sheet
   ═══════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .search-suggest {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 65vh;
    border-radius: 16px 16px 0 0;
    border: none;
    border-top: 1px solid var(--ss-border);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .12),
                0 -16px 48px rgba(0, 0, 0, .06);

    /* Вход: slide-up */
    animation: ss-enter-sheet var(--ss-t-enter) both;

    /* Чуть больше padding для пальцев */
    --ss-pad-x: 16px;
    --ss-pad-y: 12px;
    --ss-photo: 48px;
  }

  /* «Ручка» — drag-handle */
  .search-suggest::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--ss-text-muted);
    opacity: .3;
    border-radius: 2px;
    margin: 10px auto 4px;
    flex-shrink: 0;
  }

  .search-suggest__link {
    padding-left: var(--ss-pad-x);
  }

  /* Accent-полоска скрыта на mobile — палец её не увидит */
  .search-suggest__item::before {
    display: none;
  }

  /* Touch target ≥ 48px */
  .search-suggest__link {
    min-height: 48px;
  }

  [data-theme="dark"] .search-suggest {
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .30),
                0 -16px 48px rgba(0, 0, 0, .20),
                inset 0  1px 0 rgba(255, 255, 255, .05);
  }
}

@keyframes ss-enter-sheet {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ═══════════════════════════════════════════════════════
   МОБИЛЬНЫЕ: ≤380px — компактный вид
   ═══════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .search-suggest {
    --ss-photo: 40px;
    --ss-gap: 10px;
    font-size: 13px;
  }

  .search-suggest__name {
    font-size: 13px;
  }

  .search-suggest__price {
    font-size: 14px;
  }
}


/* ═══════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════ */

/* Focus-visible на item при клавиатурной навигации */
.search-suggest__item_active .search-suggest__link {
  outline: none; /* accent-полоска заменяет outline */
}

/* Принудительный focus-visible если tabbed */
.search-suggest__link:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: -2px;
  border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .search-suggest,
  .search-suggest__item::before,
  .search-suggest__photo {
    animation: none !important;
    transition: none !important;
  }
}