/* 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}

/* ——— Три готовых вида фильтров (переключаются настройкой «Оформление» или пропом 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-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 20px;overflow-y:auto;gap:18px;
  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:sticky;top:0;z-index:3;
  background:var(--mc-card);padding:18px 0 12px;margin-bottom:4px;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-acts{position:sticky;bottom:0;background:var(--mc-card);padding:12px 0 18px;margin-top:8px;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}
@media(max-width:760px){
  [data-component="catalog"],[data-mu-catalog]{grid-template-columns:1fr;gap:0}
}
/* ——— сетка ——— */
.mc-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:var(--mc-gap)}
@media(max-width:1100px){.mc-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.mc-grid{grid-template-columns:repeat(2,1fr);--mc-gap:14px}}
@media(max-width:420px){.mc-grid{grid-template-columns:1fr}}
/* ——— карточка ——— */
.mc-card{display:flex;flex-direction:column;background:var(--mc-card);border:1px solid var(--mc-line);
  border-radius:var(--mc-radius);overflow:visible;text-decoration:none;color:inherit;position:relative;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;
  animation:mc-card-in .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*45ms);will-change:transform}
.mc-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -16px rgba(28,32,64,.32);border-color:transparent}
/* картинку клиппит сам .mc-card-pic (скруглён сверху) — карточка overflow:visible, чтобы тень
   фото/карточки не обрезалась жёстким квадратом контейнера */
.mc-card-pic{aspect-ratio:1/1;height:auto;width:100%;background:var(--brand-photo-bg,#f3f4f7) center/cover no-repeat;display:flex;
  align-items:center;justify-content:center;font-size:40px;font-weight:800;color:#c2c6e0;overflow:hidden;
  border-radius:var(--mc-radius) var(--mc-radius) 0 0}
.mc-card-pic.mc-car-wrap{display:block;padding:0}
.mc-card-pic .mc-car{height:100%}
.mc-card-pic .mc-slide,.mc-slide{background:var(--brand-photo-bg,#f3f4f7) center/cover no-repeat;aspect-ratio:1/1}
.mc-card-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mc-card:hover .mc-card-pic img{transform:scale(1.05)}
.mc-card-t{padding:13px 14px 4px;font-size:14.5px;line-height:1.35;font-weight:550;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-card-p{padding:2px 14px 12px;font-size:17px;font-weight:750;letter-spacing:-.01em;margin-top:auto}
.mc-card-p-req{font-size:14px;font-weight:600;color:var(--mc-mut)}
/* старая цена: текущая со скидкой — акцентом, старая — мелкая перечёркнутая */
.mc-card-p .mc-card-now{font-weight:750}
.mc-card-p .mc-card-sale{color:var(--mc-danger)}
.mc-card-old{margin-left:8px;font-size:13px;font-weight:600;color:#aeb4c0;text-decoration:line-through}
.mc-oos{font-style:normal;font-size:11px;font-weight:600;color:#c0392b;margin-left:6px}
/* опц. краткое описание на карточке (card_excerpt) — 2 строки, приглушённо */
.mc-card-ex{padding:0 14px 4px;font-size:12.5px;line-height:1.4;color:var(--mc-mut);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* свотчи доступных цветов на карточке (Ozon-стиль) */
.mc-card-sw{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:0 14px 4px}
.mc-card-swd{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .12s}
.mc-card:hover .mc-card-swd{transform:scale(1.08)}
.mc-card-swn{font-size:11px;font-weight:600;color:var(--mc-mut);margin-left:1px}
/* опц. свойства и кнопка «В корзину» на карточке (card_props / card_cart) */
.mc-card-props{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 2px}
.mc-card-prop{font-size:11px;color:var(--mc-mut);background:#f3f4f7;border-radius:6px;padding:2px 7px;line-height:1.45}
.mc-card-cart{display:flex;align-items:center;justify-content:center;width:auto;min-height:42px;box-sizing:border-box;margin:0 14px 14px;padding:11px 14px;border:none;border-radius:11px;background:var(--grad);color:#fff;font-weight:700;font-size:14px;cursor:pointer;text-align:center;transition:box-shadow .2s,filter .15s}
.mc-card-cart:not(.mc-card-cart-off):hover{box-shadow:0 8px 20px -8px rgba(var(--mc-shadow-rgb),.6);filter:saturate(1.08)}
.mc-card-cart-pick{background:#fff;color:var(--mc-acc,var(--acc));border:1.5px solid var(--mc-danger-line)}
/* «нет в наличии» — некликабельна, без ховера */
.mc-card-cart-off{background:#f1f2f5;color:#9aa0ad;cursor:default;pointer-events:none}
/* Ozon-морф «В корзину» ↔ «− N +» — базовые стили .mc-cartctl/.mcc-* вынесены в theme.css
   (грузится на ВСЕХ страницах: и каталог, и карточка товара используют один морф). */
@keyframes mc-card-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform: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-grid{transition:opacity .2s}
/* без затемнения грида при загрузке — скелетоны/«Загрузка…» уже показывают процесс */
/* витринный режим (главная): без фильтров/бара/пагинации — карточки горизонтальным слайдером */
.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) */
.mc-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;z-index:2;pointer-events:none}
.mc-badge{font-size:11px;font-weight:800;letter-spacing:.01em;padding:4px 9px;border-radius:8px;color:#fff;box-shadow:0 2px 8px rgba(20,22,40,.18);line-height:1.1}
.mc-badge-sale{background:linear-gradient(135deg,var(--mc-acc),var(--mc-acc2))}
.mc-badge-new{background:var(--brand-badge-new,#2bb673)}
.mc-badge-hit{background:#1a1d27}
.mc-badge-top{background:var(--brand-badge-top,linear-gradient(135deg,#8b5cf6,#6f76e6))}
/* hover-режим превью (зоны по наведению, как Ozon) + буллиты */
.mc-card-pic.mc-hov{cursor:pointer;background-size:cover;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}}  /* на тач — свайп */