/* ==========================================================================
   my_salecat — категории акционных товаров
   Базовые стили. Тема магазина может доложить свой my_salecat.css поверх.
   Все селекторы под .msc, чужую разметку не трогаем.

   Структура файла:
     1. Переменные и общие элементы (значки, счётчики)
     2. Боковой список: база + 3 стиля шапки (attached / accent / outline)
     3. Лента чипсов: база + 3 стиля (card / segmented / tabs)
   ========================================================================== */

.msc {
  --msc-accent: #d0021b;
  --msc-accent-dark: #a30115;
  --msc-accent-text: #fff;
  --msc-accent-soft: rgba(208, 2, 27, .08);
  --msc-text: #2b2b2b;
  --msc-muted: #8a8a8a;
  --msc-line: rgba(0, 0, 0, .1);
  --msc-soft: rgba(0, 0, 0, .04);
  --msc-card: #fff;
  --msc-radius: 10px;
  --msc-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px -8px rgba(0, 0, 0, .18);
}

/* --------------------------------------------------------------------------
   1. Общие элементы: счётчик, максимальная скидка, «заканчивается»
   -------------------------------------------------------------------------- */

.msc .msc-count {
  color: var(--msc-muted, #8a8a8a);
  font-size: 12px;
  white-space: nowrap;
}

.msc .msc-count:before { content: "("; }
.msc .msc-count:after  { content: ")"; }

.msc .msc-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.msc .msc-badge-discount {
  background: var(--msc-accent, #d0021b);
  color: var(--msc-accent-text, #fff);
}

.msc .msc-badge-ends {
  background: var(--msc-soft, rgba(0, 0, 0, .04));
  color: var(--msc-muted, #8a8a8a);
  font-weight: 400;
}

.msc .msc-badge-ends:before {
  content: "\f017"; /* fa-clock-o — FontAwesome уже подключён темой */
  font-family: FontAwesome;
  margin-right: 3px;
}

/* Иконка «%» в шапках. */
.msc .msc-head-icon:before,
.msc .msc-chips-icon:before {
  content: "%"; /* fa-percent */
  font-family: FontAwesome;
}

/* ==========================================================================
   2. БОКОВОЙ СПИСОК
   ========================================================================== */

.msc-list { margin-bottom: 20px; }

/* Шапка. Класс h3modul нужен теме для сворачивания на мобильном, но её
   собственные правила (розовая «таблетка» при ≤992px, отступ снизу, центр)
   ломают любой аккуратный вид — гасим их селектором с тем же id-весом. */
#column-left .msc-list .msc-head,
#column-right .msc-list .msc-head,
.msc-list .msc-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 13px 16px;
  border: none;
  border-radius: 0;
  text-align: left;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--msc-text, #2b2b2b);
  background: transparent;
}

.msc-list .msc-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.msc-list .msc-head-icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 24px;
  text-align: center;
}

/* Тело списка. Тема на мобильном красит .list-group в серый — перебиваем. */
#column-left .msc-list .msc-body,
#column-right .msc-list .msc-body,
.msc-list .msc-body {
  margin: 0;
  background: var(--msc-card, #fff);
}

.msc-list .msc-body > ul.box-category { border: none; padding: 0; }

/* Стрелка сворачивания, которую тема дорисовывает после шапки на ≤992px:
   выравниваем по нашей высоте шапки, а не по её 50px. */
@media (max-width: 992px) {
  #column-left .msc-list .boxclick,
  #column-right .msc-list .boxclick {
    margin-top: -46px;
    height: 46px;
    right: 16px;
  }

  #column-left .msc-list .boxclick:before,
  #column-right .msc-list .boxclick:before { line-height: 46px; }
}

/* --- Стиль 1: attached — шапка приклеена к списку, единая карточка -------- */

.msc-list--attached {
  border-radius: var(--msc-radius, 10px);
  overflow: hidden;
  box-shadow: var(--msc-shadow);
  border: 1px #c9016d solid;
}

#column-left .msc-list--attached .msc-head,
#column-right .msc-list--attached .msc-head,
.msc-list--attached .msc-head {
  background: linear-gradient(180deg, var(--msc-accent, #d0021b), var(--msc-accent-dark, #a30115));
  color: var(--msc-accent-text, #fff);
}

.msc-list--attached .msc-head-icon {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.msc-list--attached .msc-body {
  border: 1px solid var(--msc-line, rgba(0, 0, 0, .1));
  border-top: none;
}

/* --- Стиль 2: accent — светлая шапка с цветной полосой слева -------------- */

.msc-list--accent {
  border: 1px solid var(--msc-line, rgba(0, 0, 0, .1));
  border-radius: var(--msc-radius, 10px);
  overflow: hidden;
  background: var(--msc-card, #fff);
}

#column-left .msc-list--accent .msc-head,
#column-right .msc-list--accent .msc-head,
.msc-list--accent .msc-head {
  background: var(--msc-accent-soft, rgba(208, 2, 27, .08));
  border-bottom: 1px solid var(--msc-line, rgba(0, 0, 0, .1));
  box-shadow: inset 4px 0 0 var(--msc-accent, #d0021b);
  padding-left: 18px;
}

.msc-list--accent .msc-head-icon {
  background: var(--msc-accent, #d0021b);
  color: #fff;
}

/* --- Стиль 3: outline — минимализм, шапка отделена линией ----------------- */

.msc-list--outline { background: var(--msc-card, #fff); }

#column-left .msc-list--outline .msc-head,
#column-right .msc-list--outline .msc-head,
.msc-list--outline .msc-head {
  padding-left: 0;
  padding-right: 0;
  border-bottom: 2px solid var(--msc-accent, #d0021b);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .04em;
}

.msc-list--outline .msc-head-icon {
  background: transparent;
  color: var(--msc-accent, #d0021b);
  width: auto;
  font-size: 13px;
}

.msc-list--outline .msc-body { padding-top: 4px; }

@media (max-width: 992px) {
  #column-left .msc-list--outline .boxclick,
  #column-right .msc-list--outline .boxclick { right: 0; }
}

/* --- Выбранная категория и сброс ----------------------------------------- */

.msc-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--msc-line, rgba(0, 0, 0, .1));
  background: var(--msc-accent-soft, rgba(208, 2, 27, .08));
}

.msc-selected-name {
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msc-selected .msc-reset {
  flex: none;
  font-size: 12px;
  color: var(--msc-muted, #8a8a8a);
}

.msc-selected .msc-reset:before {
  content: "\f00d"; /* fa-times */
  font-family: FontAwesome;
  margin-right: 4px;
}

/* --- Дерево категорий ----------------------------------------------------- */

.msc-list .box-category .msc-name { word-break: break-word; }

/* Активный и наведённый пункт.
 *
 * Селекторы намеренно длинные: настройки оформления julytheme подставляют
 * в <head> инлайновый блок вида
 *   ul.box-category > li > a.active { color: …; background-color: … }
 * который идёт после наших css-ссылок и при равной специфичности выигрывает.
 * Здесь вес (0,3,3) против (0,2,3) у темы — перебиваем без !important.
 *
 * Выделяем только текстом: заливка в узкой колонке слишком тяжёлая и спорит
 * с ценами и бейджами скидок.
 */
.msc-list ul.box-category > li > a.active,
.msc-list ul.box-category > li > a.active:hover,
.msc-list ul.box-category > li ul > li > a.active,
.msc-list ul.box-category > li ul > li > a.active:hover {
  background-color: transparent;
  color: var(--msc-accent, #d0021b);
  font-weight: 700;
}

/* Ховер — только лёгкая подсветка: отклик нужен, блок нет. */
.msc-list ul.box-category > li > a:hover,
.msc-list ul.box-category > li ul > li > a:hover {
  background-color: var(--msc-accent-soft, rgba(208, 2, 27, .08));
  color: var(--msc-accent, #d0021b);
}

/* Счётчик у активного пункта не должен теряться в акцентном цвете. */
.msc-list ul.box-category > li > a.active .msc-count,
.msc-list ul.box-category > li ul > li > a.active .msc-count {
  color: var(--msc-muted, #8a8a8a);
}

/* Тема стилизует вложенность до 3-го уровня — дорисовываем 4-й. */
.msc-list ul.box-category > li > ul > li > ul > li > ul {
  background-color: rgba(0, 0, 0, .04);
  margin: 4px 8px;
}

.msc-list ul.box-category > li > ul > li > ul > li > ul > li > a {
  padding: 4px 30px 4px 18px;
  font-size: 12px;
}

.msc-list ul.box-category > li > ul > li > ul > li > ul > li > a:before {
  content: "\2013";
  margin-right: 4px;
}

/* Доп. ссылка «все товары категории» (режим «оба варианта»). */
.msc-list .msc-alt {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 28px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  color: var(--msc-muted, #8a8a8a);
  opacity: .55;
}

.msc-list .msc-alt:before {
  content: "\f105"; /* fa-angle-right */
  font-family: FontAwesome;
  font-size: 16px;
}

.msc-list .msc-alt:hover { opacity: 1; }

/* Если у пункта есть и подкатегории, и доп. ссылка — сдвигаем её левее «плюса». */
.msc-list li.msc-has-alt.msc-has-children > .msc-alt { right: 30px; }

.msc-list li ul .msc-alt { height: 28px; line-height: 28px; }

/* --- Кнопка «Показать все» ------------------------------------------------ */

.msc-more-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px;
  border: none;
  border-top: 1px solid var(--msc-line, rgba(0, 0, 0, .1));
  background: transparent;
  color: var(--msc-accent, #d0021b);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.msc-more-btn:hover { background: var(--msc-accent-soft, rgba(208, 2, 27, .08)); }

.msc-more-btn .msc-more-hide { display: none; }
.msc-more-btn[aria-expanded="true"] .msc-more-show { display: none; }
.msc-more-btn[aria-expanded="true"] .msc-more-hide { display: inline; }

.msc-more-count { opacity: .7; }

.msc-collapse .box-category { border-top: none; }

/* Липкий сайдбар — только на десктопе, где колонка вообще видна. */
@media (min-width: 993px) {
  .msc-sticky { position: sticky; top: 10px; }
}

/* ==========================================================================
   3. ЛЕНТА ЧИПСОВ
   ========================================================================== */

.msc-chips { margin: 0 0 18px; }

.msc-chips-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.msc-chips-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--msc-accent, #d0021b);
  color: #fff;
  font-size: 10px;
  line-height: 22px;
  text-align: center;
}

.msc-chips-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--msc-text, #2b2b2b);
}

.msc-chips-reset {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--msc-soft, rgba(0, 0, 0, .04));
  color: var(--msc-muted, #8a8a8a);
  font-size: 12px;
  white-space: nowrap;
}

.msc-chips-reset:before {
  content: "\f00d"; /* fa-times */
  font-family: FontAwesome;
  margin-right: 4px;
}

.msc-chips-reset:hover {
  background: var(--msc-accent, #d0021b);
  color: #fff;
  text-decoration: none;
}

/* Горизонтальный скролл. Отдельная обёртка, чтобы тень/фон карточки
   не уезжали вместе с содержимым. */
.msc-chips-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

/* Полоса прокрутки нужна как подсказка «лента едет вбок», но не как элемент
   оформления — поэтому тонкая и бледная, в покое почти незаметна. */
.msc-chips-scroll { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .16) transparent; }
.msc-chips-scroll::-webkit-scrollbar { height: 3px; }
.msc-chips-scroll::-webkit-scrollbar-track { background: transparent; }
.msc-chips-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .16);
  border-radius: 3px;
}

.msc-chips-scroll:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .3); }

.msc-chips-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 2px;
}

.msc-chip {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 72vw;
  padding: 8px 15px;
  border: 1px solid var(--msc-line, rgba(0, 0, 0, .1));
  border-radius: 20px;
  background: var(--msc-card, #fff);
  color: var(--msc-text, #2b2b2b);
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}

.msc-chip:hover,
.msc-chip:focus {
  text-decoration: none;
  border-color: var(--msc-accent, #d0021b);
  color: var(--msc-accent, #d0021b);
}

.msc-chip-name { overflow: hidden; text-overflow: ellipsis; }

.msc-chip-count {
  color: var(--msc-muted, #8a8a8a);
  font-size: 12px;
}

.msc-chip-active,
.msc-chip-active:hover,
.msc-chip-active:focus {
  border-color: var(--msc-accent, #d0021b);
  background: var(--msc-accent, #d0021b);
  color: var(--msc-accent-text, #fff);
  font-weight: 700;
}

.msc-chip-active .msc-chip-count { color: inherit; opacity: .8; }

.msc-chip-active .msc-badge-discount {
  background: #fff;
  color: var(--msc-accent, #d0021b);
}

.msc-chip-sm { padding: 6px 12px; font-size: 13px; }

/* --- Вторая строка: отделяем явно, а не просто отступом ------------------- */

.msc-chips-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--msc-line, rgba(0, 0, 0, .1));
}

.msc-chips-sublabel {
  flex: none;
  color: var(--msc-muted, #8a8a8a);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.msc-chips-sub .msc-chips-scroll { flex: 1 1 auto; min-width: 0; }

/* --- Стиль 1: card — вся лента в карточке -------------------------------- */

.msc-chips--card .msc-chips-box {
  padding: 14px 16px;
  border: 1px solid var(--msc-line, rgba(0, 0, 0, .5));
  border-radius: var(--msc-radius, 10px);
  background: var(--msc-card, #fff);
  #box-shadow: var(--msc-shadow);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px -8px rgba(0, 0, 0, .4);
}

/* Своего фона у чипса здесь нет: базовое .msc-chip уже белое, а лишнее
   правило .msc-chips--card .msc-chip перебивало бы .msc-chip-active
   по специфичности (0,2,0 против 0,1,0) — активный чипс становился
   белым текстом на белом фоне. */

/* --- Стиль 2: segmented — плотная группа-переключатель -------------------- */

.msc-chips--segmented .msc-chips-box {
  padding: 12px 14px;
  border-radius: var(--msc-radius, 10px);
  background: var(--msc-soft, rgba(0, 0, 0, .04));
}

.msc-chips--segmented .msc-chips-row { gap: 4px; }

.msc-chips--segmented .msc-chip {
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.msc-chips--segmented .msc-chip:hover {
  background: rgba(255, 255, 255, .7);
  border-color: transparent;
}

.msc-chips--segmented .msc-chip-active,
.msc-chips--segmented .msc-chip-active:hover {
  background: var(--msc-card, #fff);
  border-color: transparent;
  color: var(--msc-accent, #d0021b);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 3px 8px -4px rgba(0, 0, 0, .2);
}

.msc-chips--segmented .msc-chip-active .msc-badge-discount {
  background: var(--msc-accent, #d0021b);
  color: #fff;
}

.msc-chips--segmented .msc-chips-sub {
  border-top-color: rgba(0, 0, 0, .08);
  border-top-style: solid;
}

/* --- Стиль 3: tabs — вкладки с индикатором -------------------------------- */

.msc-chips--tabs .msc-chips-box {
  border-bottom: 2px solid var(--msc-line, rgba(0, 0, 0, .1));
  padding-bottom: 0;
}

.msc-chips--tabs .msc-chips-row { gap: 2px; padding: 0; }

.msc-chips--tabs .msc-chip {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 10px 14px;
  box-shadow: inset 0 -2px 0 transparent;
  margin-bottom: -2px;
}

.msc-chips--tabs .msc-chip:hover {
  color: var(--msc-accent, #d0021b);
  box-shadow: inset 0 -2px 0 var(--msc-line, rgba(0, 0, 0, .1));
}

.msc-chips--tabs .msc-chip-active,
.msc-chips--tabs .msc-chip-active:hover {
  background: transparent;
  color: var(--msc-accent, #d0021b);
  box-shadow: inset 0 -2px 0 var(--msc-accent, #d0021b);
}

.msc-chips--tabs .msc-chip-active .msc-chip-count { color: var(--msc-muted, #8a8a8a); }

.msc-chips--tabs .msc-chip-active .msc-badge-discount {
  background: var(--msc-accent, #d0021b);
  color: #fff;
}

/* Вторая строка у вкладок — уже под линией, поэтому пилюли на светлом фоне. */
.msc-chips--tabs .msc-chips-sub {
  margin-top: 0;
  padding: 10px 0 0;
  border-top: none;
}

.msc-chips--tabs .msc-chips-sub .msc-chip {
  border-radius: 16px;
  background: var(--msc-soft, rgba(0, 0, 0, .04));
  box-shadow: none;
  margin-bottom: 0;
  padding: 6px 12px;
}

.msc-chips--tabs .msc-chips-sub .msc-chip-active {
  background: var(--msc-accent, #d0021b);
  color: #fff;
}

.msc-chips--tabs .msc-chips-sub .msc-chip-active .msc-chip-count { color: inherit; opacity: .8; }

/* --- Мобильные ------------------------------------------------------------ */

@media (max-width: 767px) {
  .msc-chip { font-size: 13px; padding: 7px 13px; }
  .msc-chips-title { font-size: 13px; }

  /* Лента должна доезжать до края экрана, а не обрываться по паддингу. */
  .msc-chips--tabs .msc-chips-scroll,
  .msc-chips--segmented .msc-chips-scroll,
  .msc-chips--card .msc-chips-scroll {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* На узком экране подпись второй строки уводим над лентой,
     иначе она съедает половину ширины. */
  .msc-chips-sub {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
  }

  .msc-chips-sublabel {
    display: block;
    margin-bottom: 6px;
  }
}