/* Start:/local/templates/starks_desktop/components/bitrix/catalog.section.list/starks/style.css?17874692132336*/
/* ============================================================
   Витрина разделов на корне каталога — десктопный слой.

   Мобильная разметка — список строк во всю ширину: на 360px это
   единственный разумный вариант. На 1280px тот же список оставляет
   две трети экрана пустыми, поэтому раскладываем строки в две колонки.
   Сама разметка и логика раскрытия подразделов — мобильные, здесь
   только сетка и наведение.

   Селекторы начинаются с .sw-d (класс на body десктопной витрины)
   намеренно: стили мобильного шаблона компонента ядро подключает ПОСЛЕ
   наших, и правило одинаковой силы проигрывает по порядку. Лишний класс
   поднимает специфичность и снимает зависимость от порядка подключения —
   это надёжнее, чем !important.
   ============================================================ */

@media (min-width: 1024px){
  .sw-d .sw-cats{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:var(--sw-gap);
    align-items:start;
  }

  /* Раскрытый раздел занимает обе колонки: подразделы в узкой колонке
     переносятся по два слова в строку и читаются хуже, чем в одну. */
  .sw-d .sw-cats > .sw-cat.is-open{ grid-column:1 / -1; }
}

/* Наведение — как у карточек товара: подсветка границы вместо нажатия. */
.sw-d .sw-cat{
  transition:border-color var(--sw-dur-hover) var(--sw-ease),
             box-shadow var(--sw-dur-hover) var(--sw-ease);
}

.sw-d .sw-cat:hover{
  border-color:var(--sw-hover-line);
  box-shadow:var(--sw-hover-lift);
}

.sw-d .sw-cat__row{ cursor:pointer; }

.sw-d .sw-sub{ transition:background var(--sw-dur-hover) var(--sw-ease); }
.sw-d .sw-sub:hover{ background:var(--sw-hover-bg); }

/* End */


/* Start:/local/templates/starks_mobile/components/bitrix/catalog.section.list/starks/style.css?17847103783159*/
/* Разделы каталога. Вёрстка — design-system/components/catalog-sections.html */

.sw-cats {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--sw-line-soft);
  border: 1px solid var(--sw-line-soft);
  border-radius: var(--sw-r-lg);
  overflow: hidden;
  margin-top: var(--sw-s-3);
}

.sw-cat { background: var(--sw-surface); }

.sw-cat__row {
  display: flex;
  align-items: center;
  gap: var(--sw-s-3);
  width: 100%;
  min-height: 54px;
  padding: var(--sw-s-4);
  background: none;
  border: 0;
  font: inherit;
  color: var(--sw-fg);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sw-cat__row:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: -2px; }

/* Монохромная иконка категории (приём Lamoda / Dragon Fly).
   34×34, графит на светлом; у раскрытого пункта — акцент, как в дизайн-системе. */
.sw-catico {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--sw-bg);
  color: var(--sw-graphite);
  display: grid; place-items: center;
}
.sw-catico svg { width: 21px; height: 21px; display: block; }
.sw-catico__uf {
  width: 21px; height: 21px;
  background: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.sw-cat__row[aria-expanded="true"] .sw-catico { background: var(--sw-accent); color: #fff; }

/* В подразделах значок легче: меньше и без плашки, чтобы список
   не выглядел тяжелее самих категорий. */
.sw-sub .sw-catico { width: 26px; height: 26px; background: none; border-radius: 0; color: var(--sw-fg-2); }
.sw-sub .sw-catico svg { width: 19px; height: 19px; }
.sw-sub .sw-catico__uf { width: 19px; height: 19px; }

.sw-cat__nm { flex: 1; font-size: 14.5px; font-weight: 650; }

/* Количество товаров — по нему принимают решение «заходить или нет».
   Ни у аналогов, ни на действующем сайте его нет. */
.sw-cat__cnt {
  font-family: var(--sw-mono);
  font-size: 11.5px;
  color: var(--sw-hint);
}

.sw-cat__chev { color: var(--sw-hint); transition: transform var(--sw-dur) var(--sw-ease); }
.sw-cat__row[aria-expanded="true"] .sw-cat__chev { transform: rotate(180deg); }
.sw-cat__chev--go { transition: none; }

.sw-cat__subs { padding: 0 var(--sw-s-4) var(--sw-s-3) var(--sw-s-4); }

.sw-sub {
  display: flex;
  align-items: center;
  gap: var(--sw-s-2);
  min-height: var(--sw-tap);
  padding: var(--sw-s-2) 0;
  border-top: 1px solid var(--sw-line-soft);
  font-size: 13.5px;
  color: var(--sw-fg);
  text-decoration: none;
}
.sw-sub:first-child { border-top: 0; }
.sw-sub__nm  { flex: 1; }
.sw-sub__cnt { font-family: var(--sw-mono); font-size: 11px; color: var(--sw-hint); }
.sw-sub--all { color: var(--sw-fg-2); font-weight: 600; }
.sw-sub:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: -2px; }

/* End */
/* /local/templates/starks_desktop/components/bitrix/catalog.section.list/starks/style.css?17874692132336 */
/* /local/templates/starks_mobile/components/bitrix/catalog.section.list/starks/style.css?17847103783159 */