/* Стили страниц и коллекций, которых нет в sl-design.css.
   Файл отдельный намеренно: sl-design.css — общая тема, её правит другой
   владелец, и дописывать туда правила одной секции значит гарантированно
   поймать конфликт при слиянии. Здесь только то, что принадлежит страницам. */

/* ——— «Popular searches»: короткий ряд ссылок на посадочные под запросы.
   Не навигация по каталогу и не хлебные крошки, поэтому ряд плашек, а не
   список: глаз читает его как один блок и проходит мимо, если не ищет. */
.sl-pop-section { background: #fff; }

.sl-pop {
  box-sizing: border-box;
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 25px 32px;
  border-top: 1px solid var(--sl-hairline, rgba(20, 50, 43, .14));
}

.sl-pop__h {
  margin: 0 0 13px;
  font-family: 'Assistant', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a8378;
}

.sl-pop__list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-pop__list li { margin: 0; }

.sl-pop__list a {
  display: inline-block;
  padding: 9px 15px;
  border-radius: 999px;
  background: #faf7f1;
  box-shadow: inset 0 0 0 1px var(--sl-hairline, rgba(20, 50, 43, .14));
  font-family: 'Assistant', Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  /* Пункт списка не переносится: короткая фраза, которая сломалась пополам,
     перестаёт читаться как один запрос. */
  white-space: nowrap;
  color: var(--sl-forest, #14322b);
  text-decoration: none;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}

.sl-pop__list a:hover,
.sl-pop__list a:focus-visible {
  background: #f7f0e2;
  box-shadow: inset 0 0 0 1px #ead9b7;
  color: #7a5a17;
}

@media (max-width: 749px) {
  .sl-pop { padding: 22px 20px 26px; }
  .sl-pop__list { gap: 8px; }
  .sl-pop__list a { padding: 8px 13px; font-size: 14px; }
}

/* ——— Плашка очереди. Две правки поверх sl-design.css.
   1. Заголовок стал длиннее одного слова, а в теме он nowrap — на 390 px
      узкая колонка обрезала бы его. Разрешаем перенос и ставим точку по
      первой строке, а не по середине блока.
   2. В корзине плашка живёт в узкой правой колонке, где отступ темы
      (width: calc(100% - 25px)) уводит её с оси остальных строк. */
.sl-oos__head {
  align-items: flex-start;
  white-space: normal;
  text-wrap: balance;
}

.sl-oos__head::before { margin-top: .42em; }

.slc-oos {
  width: 100%;
  margin: 14px 0 0;
}