/* muse-catalog.css (task-210) — самодостаточный «вау»-дизайн каталога. Работает БЕЗ системной
 * темы (свои дефолты), всё кастомизируется через CSS-переменные --mc-*. Оригинальный код. */
[data-component="catalog"],[data-mu-catalog]{
  --mc-acc:var(--brand-accent,var(--acc)); --mc-acc2:var(--brand-accent-2,var(--acc)); --mc-ink:#1a1d27; --mc-mut:#8a93a6;
  --mc-line:#eceef2; --mc-card:#fff; --mc-bg:#fff; --mc-radius:var(--brand-radius,16px); --mc-gap:20px;
  --mc-danger:var(--brand-danger,#e8497f); --mc-danger-line:var(--brand-danger-line,#f6b7ce);
  --mc-shadow-rgb:var(--brand-shadow-rgb,236,79,140);
  display:grid; grid-template-columns:248px minmax(0,1fr); gap:30px; align-items:start;
  color:var(--mc-ink); font-family:var(--brand-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif);
}
.mc-main{min-width:0}
.mc-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
/* без sticky: при дозагрузке короткий грид рос выше фильтра и тот резко защёлкивался («скакал») */
.mc-filters{display:flex;flex-direction:column;gap:20px;align-self:flex-start}
/* Каталог без фильтров (task-228): сетка во всю ширину. Ставится клиентом, когда фильтровать
   не по чему (нет фасетов и разброса цен) или проект передал filters:false. */
[data-component="catalog"].mc-nofilters,[data-mu-catalog].mc-nofilters{grid-template-columns:minmax(0,1fr);gap:0}
.mc-nofilters .mc-filters{display:none}

/* Числовая граница цены корректируется как подсказка, а не как ошибка: поле
   мягко «садится» на допустимое значение, место под пояснение зарезервировано. */
.mc-price-note{min-height:24px;margin-top:7px;padding:0 8px;border-radius:999px;color:var(--mc-mut);
  font-size:11px;font-weight:650;line-height:24px;opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .2s ease,transform .28s cubic-bezier(.22,.72,.2,1),background-color .2s ease}
.mc-price-note.is-visible{opacity:1;transform:none;background:color-mix(in srgb,var(--mc-acc) 9%,transparent);color:var(--mc-acc)}
.mc-price input.mc-price-adjusted{border-color:var(--mc-acc)!important;
  animation:mcPriceSettle .48s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 4px color-mix(in srgb,var(--mc-acc) 14%,transparent)!important}
@keyframes mcPriceSettle{0%{transform:scale(1)}42%{transform:scale(1.025)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .mc-price-note{transition:none}.mc-price input.mc-price-adjusted{animation:none}
}

/* ——— Три готовых вида фильтров (переключаются настройкой «Оформление» или пропом filters_view) ——— */

/* 1) Вертикальные — колонка слева. Это дефолт, отдельных правил не нужно. */

/* 2) Горизонтальные — строка над сеткой: фасеты в ряд, переносятся, цена компактная. */
[data-component="catalog"].mc-fv-horizontal,[data-mu-catalog].mc-fv-horizontal{grid-template-columns:minmax(0,1fr);gap:0}
.mc-fv-horizontal .mc-filters{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:14px 18px;
  padding:14px 16px;margin-bottom:18px;border:1px solid var(--mc-line);border-radius:var(--mc-radius);background:var(--mc-card)}
.mc-fv-horizontal .mc-facet{min-width:170px;max-width:260px}
.mc-fv-horizontal .mc-facet-values{max-height:132px;overflow:auto}
.mc-fv-horizontal .mc-facet-price{min-width:230px}
.mc-fv-horizontal .mc-switch{align-self:center}
.mc-fv-horizontal .mc-acts{margin-left:auto;align-self:center;display:flex;gap:8px}
.mc-fv-horizontal .mc-fdrawer-head{display:none}

/* 3) Канвас — фильтры скрыты, открываются кнопкой «Фильтры»: панель выезжает справа поверх страницы. */
[data-component="catalog"].mc-fv-drawer,[data-mu-catalog].mc-fv-drawer{grid-template-columns:minmax(0,1fr);gap:0}
.mc-fv-drawer .mc-filters-toggle{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  border:1px solid var(--mc-line);background:var(--mc-card);border-radius:var(--brand-radius);font-weight:600;cursor:pointer;color:var(--mc-ink)}
.mc-fv-drawer .mc-filters-toggle:hover{border-color:var(--mc-acc)}
.mc-filters-toggle.mc-active{border-color:color-mix(in srgb,var(--mc-acc) 58%,var(--mc-line));background:color-mix(in srgb,var(--mc-acc) 9%,var(--mc-card));color:var(--mc-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--mc-acc) 8%,transparent)}
.mc-filter-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--mc-acc);color:#fff;font-size:11px;font-weight:750;line-height:1}
.mc-fv-drawer .mc-filters{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);height:100dvh;z-index:1001;
  background:var(--mc-card);padding:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;gap:0;
  transform:translateX(100%);visibility:hidden;transition:transform .32s cubic-bezier(.34,.1,.2,1),visibility .32s;
  box-shadow:-18px 0 46px -24px rgba(20,22,34,.4)}
.mc-fv-drawer.mc-filters-open .mc-filters{transform:none;visibility:visible}
.mc-fv-drawer.mc-filters-open .mc-backdrop{display:block;position:fixed;inset:0;background:rgba(15,18,28,.45);z-index:1000;animation:mcFadeIn .25s ease}
.mc-fv-drawer .mc-fdrawer-head{display:flex;align-items:center;justify-content:space-between;position:static;z-index:3;
  background:var(--mc-card);padding:16px 20px 12px;margin:0;border-bottom:1px solid var(--mc-line)}
.mc-fv-drawer .mc-fdrawer-head b{font-weight:700;font-size:18px}
.mc-fv-drawer .mc-fclose{width:36px;height:36px;border:none;background:var(--brand-soft,#f3f4f7);border-radius:50%;
  font-size:15px;color:var(--mc-mut);cursor:pointer;display:flex;align-items:center;justify-content:center}
.mc-fv-drawer .mc-fdrawer-body{min-height:0;padding:16px 20px 12px;display:flex;flex-direction:column;gap:18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.mc-fv-drawer .mc-fdrawer-body .mc-facet-vals{max-height:none;overflow:visible;padding-right:0;margin-right:0}
.mc-fv-drawer .mc-acts{position:static;background:var(--mc-card);padding:12px 20px calc(18px + env(safe-area-inset-bottom));margin:0;border-top:1px solid var(--mc-line)}

/* На мобиле любой вид схлопывается в шторку — там колонка и строка не помещаются. */
@media(max-width:760px){
  .mc-fv-horizontal .mc-filters{flex-direction:column}
}
.mc-more{margin-top:24px;display:flex;justify-content:center}
/* Отступ уже задан контейнером — у общего пейджера он был бы вторым. */
.mc-more .mu-pager{margin-top:0}
.mc-loadmore{appearance:none;-webkit-appearance:none;min-height:44px;padding:11px 22px;
  border:1px solid var(--mc-line);border-radius:var(--brand-radius,10px);background:var(--mc-card);color:var(--mc-ink);
  font:600 14px/1.2 var(--brand-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif);
  letter-spacing:.01em;cursor:pointer;box-shadow:0 8px 22px -18px rgba(20,22,34,.42);
  transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.mc-loadmore:hover{border-color:var(--mc-acc);box-shadow:0 12px 28px -20px rgba(var(--mc-shadow-rgb),.52);transform:translateY(-1px)}
.mc-loadmore:focus-visible{outline:2px solid var(--mc-acc);outline-offset:3px}
.mc-loadmore:disabled{opacity:.58;cursor:wait;transform:none;box-shadow:none}
@media(max-width:760px){
  [data-component="catalog"],[data-mu-catalog]{grid-template-columns:1fr;gap:0}
  [data-component="catalog"] .mc-bar,[data-mu-catalog] .mc-bar{
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 12px;margin-bottom:18px
  }
  [data-component="catalog"] .mc-filters-toggle,[data-mu-catalog] .mc-filters-toggle{
    min-height:44px;padding:10px 14px;justify-content:center
  }
  .mc-filter-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  [data-component="catalog"] .mc-total,[data-mu-catalog] .mc-total{
    min-width:0;font-size:13px;line-height:18px;font-variant-numeric:tabular-nums
  }
  [data-component="catalog"].mc-nofilters .mc-total,[data-mu-catalog].mc-nofilters .mc-total,
  [data-component="catalog"] .mc-corrected,[data-mu-catalog] .mc-corrected,
  [data-component="catalog"] .mc-search,[data-mu-catalog] .mc-search,
  [data-component="catalog"] .mc-sortbox,[data-mu-catalog] .mc-sortbox{
    grid-column:1/-1
  }
  [data-component="catalog"] .mc-sortbox,[data-mu-catalog] .mc-sortbox{width:100%;margin-left:0}
  [data-component="catalog"] .mc-sort-btn,[data-mu-catalog] .mc-sort-btn{width:100%;min-width:0;min-height:44px}
  [data-component="catalog"] .mc-sort-menu,[data-mu-catalog] .mc-sort-menu{left:0;right:0}
  [data-component="catalog"] .mc-filters,[data-mu-catalog] .mc-filters{
    display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;overflow:hidden;padding:0
  }
  [data-component="catalog"].mc-nofilters .mc-filters,[data-mu-catalog].mc-nofilters .mc-filters{display:none}
  [data-component="catalog"] .mc-fdrawer-head,[data-mu-catalog] .mc-fdrawer-head{padding-inline:18px}
  [data-component="catalog"] .mc-fdrawer-body,[data-mu-catalog] .mc-fdrawer-body{
    min-height:0;padding:16px 18px 12px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable
  }
  [data-component="catalog"] .mc-acts,[data-mu-catalog] .mc-acts{padding-inline:18px}
}
/* ——— Пустая выдача ———
   Это не ошибка и не карточка товара. Один спокойный объект на всю ширину даёт каталогу
   законченный вид, а его смысл меняется только при действительно активных фильтрах. */
.mc-empty{grid-column:1/-1;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,3vw,34px);min-height:300px;padding:42px clamp(24px,6vw,72px);overflow:hidden;
  border:1px solid var(--mc-line);border-radius:calc(var(--mc-radius) + 4px);background:linear-gradient(135deg,#fff 0%,var(--brand-soft,#f7f7fb) 100%);
  color:var(--mc-ink);text-align:left}
.mc-empty::before{content:"";position:absolute;z-index:-1;width:260px;height:260px;right:-96px;top:-142px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--mc-shadow-rgb),.13),rgba(var(--mc-shadow-rgb),0) 68%)}
.mc-empty-art{flex:0 0 auto;display:grid;place-items:center;width:108px;height:108px;border-radius:34px;
  color:var(--mc-acc);background:#fff;box-shadow:0 18px 36px -26px rgba(20,22,40,.45),inset 0 0 0 1px rgba(20,22,40,.05)}
.mc-empty-art svg{width:64px;height:64px;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.mc-empty-filtered .mc-empty-art{color:#cf5a80;background:linear-gradient(145deg,#fff,#fff4f8)}
.mc-load-error{border-color:color-mix(in srgb,var(--mc-acc) 22%,var(--mc-line));background:linear-gradient(135deg,#fff 0%,#fff8f5 100%)}
.mc-load-error .mc-empty-art{color:#d15b56;background:linear-gradient(145deg,#fff,#fff5f3)}
.mc-empty-copy{max-width:350px}
.mc-empty-t{margin:0;color:inherit;font-size:clamp(20px,2vw,26px);font-weight:750;letter-spacing:-.03em;line-height:1.15}
.mc-empty-s{margin:9px 0 0;color:var(--mc-mut);font-size:15px;line-height:1.5}
.mc-empty-reset{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin-top:20px;padding:10px 16px;
  border:1px solid transparent;border-radius:var(--brand-radius-ctl,10px);background:var(--grad,var(--mc-acc));color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;
  box-shadow:0 10px 20px -14px rgba(var(--mc-shadow-rgb),.9);transition:transform .16s,box-shadow .16s,filter .16s}
.mc-empty-reset:hover{transform:translateY(-1px);box-shadow:0 14px 24px -14px rgba(var(--mc-shadow-rgb),.95);filter:saturate(1.06)}
.mc-empty-reset:focus-visible{outline:3px solid rgba(var(--mc-shadow-rgb),.28);outline-offset:3px}
@media(max-width:600px){
  .mc-empty{min-height:270px;flex-direction:column;gap:18px;padding:34px 22px;text-align:center}
  .mc-empty-art{width:88px;height:88px;border-radius:28px}.mc-empty-art svg{width:54px;height:54px}
  .mc-empty-copy{max-width:300px}.mc-empty-reset{width:100%;margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.mc-empty-reset{transition:none}}
/* ——— скелетоны загрузки ——— */
.mc-skel{border-radius:var(--mc-radius);overflow:hidden;border:1px solid var(--mc-line);background:var(--mc-card)}
.mc-skel-pic{aspect-ratio:1/1;background:linear-gradient(100deg,#eef0f4 30%,#f7f8fb 50%,#eef0f4 70%);background-size:200% 100%;animation:mc-shimmer 1.3s infinite}
.mc-skel-line{height:12px;margin:12px 14px;border-radius:6px;background:linear-gradient(100deg,#eef0f4 30%,#f7f8fb 50%,#eef0f4 70%);background-size:200% 100%;animation:mc-shimmer 1.3s infinite}
.mc-skel-line.s2{width:55%;margin-top:8px}
@keyframes mc-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* без затемнения грида при загрузке — скелетоны/«Загрузка…» уже показывают процесс */
/* витринный режим (главная): без фильтров/бара/пагинации — карточки горизонтальным слайдером */
.mc-showcase{display:block}
.mc-showcase .mc-filters,.mc-showcase .mc-bar,.mc-showcase .mc-more,.mc-showcase .mc-chips,.mc-showcase .mc-buf{display:none!important}
.mc-showcase .mc-grid{display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.mc-showcase .mc-grid>.mc-card,.mc-showcase .mc-grid>.mc-skel{flex:0 0 230px;scroll-snap-align:start}
.mc-showcase .mc-grid::-webkit-scrollbar{height:8px}
.mc-showcase .mc-grid::-webkit-scrollbar-thumb{background:#d2d6e0;border-radius:var(--brand-radius-pill)}
/* плашки (badges): авто-скидка + настраиваемые по характеристикам (card_badges) */
/* Плашки карточки переехали в muse-product-cards.css: они нужны везде, где есть карточка,
   а не только в каталоге (в подборках они падали в поток под фото). */
/* hover-режим превью (зоны по наведению, как Ozon) + буллиты */
.mc-card-pic.mc-hov{cursor:pointer;background-size:contain;background-position:center}
.mc-hov-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:4px;z-index:1;pointer-events:none}
.mc-hov-dots i{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:background .15s}
.mc-hov-dots i.on{background:#fff}
/* витринный слайдер: стрелки + drag, голый скроллбар скрыт */
.mc-slider-wrap{position:relative}
.mc-showcase .mc-grid{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.mc-showcase .mc-grid::-webkit-scrollbar{display:none}
.mc-showcase .mc-grid.mc-grab{cursor:grabbing;scroll-behavior:auto}
.mc-arrow{position:absolute;top:38%;z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid rgba(20,22,40,.08);
  background:rgba(255,255,255,.96);box-shadow:0 4px 16px rgba(20,22,40,.18);color:#1a1d27;font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:opacity .2s,transform .15s,box-shadow .15s}
.mc-arrow:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(20,22,40,.26)}
.mc-arrow-prev{left:-10px}.mc-arrow-next{right:-10px}
.mc-arrow-hide{opacity:0;pointer-events:none}
@media(max-width:760px){.mc-arrow{display:none}}  /* на тач — свайп */

/* Фильтровать нечем — кнопки нет (иначе тап открывает пустую шторку). */
.mc-nofilters .mc-filters-toggle{display:none!important}